:root{--bg:#8aa3b9;--surface:#4d5d75;--surface-2:#2c3b4f;--surface-3:#dde5ee;--text:#bbd1e8;--text-soft:#2b7ac9;--text-muted:#b1c9ed;--accent:#51e9c8;--accent-2:#5a87b1;--accent-quiet:#9ccfbe;--danger:#e05353;--border:rgba(30,41,59,0.15);--shadow-sm:0 2px 5px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);--shadow-lg:0 6px 20px rgba(0,0,0,0.14)}.breathe-container{font-family:system-ui,sans-serif;background:var(--bg);min-height:100vh;padding:1px 0 30px;color:var(--text)}.modes-container{display:flex;gap:9px;justify-content:center;margin-bottom:16px;flex-wrap:wrap}.mode-card{border-radius:18px;box-shadow:var(--shadow-sm);padding:8px 5px;cursor:pointer;text-align:center;transition:border .2s,background .3s,color .3s;background:var(--surface);color:var(--text);border:1px solid transparent}.mode-card:hover{background:var(--surface-2)}.mode-card.active{color:#fff;border:2px solid var(--accent);background:linear-gradient(180deg,var(--accent) 0,#2f7f6b 100%)}.mode-icon{font-size:18px;margin-bottom:5px}.mode-label{font-size:16px;font-weight:600}.mode-benefits{margin:7px auto 0;font-size:13px;font-style:italic;min-height:44px;max-width:100px}.main-card{background:var(--surface);border-radius:22px;box-shadow:var(--shadow-lg);padding:18px;max-width:400px;margin:0 auto;border:1px solid var(--border)}.gauge-container{margin:0 auto 14px;display:flex;align-items:center;justify-content:center}.gauge-circle{width:160px;height:160px;border-radius:50%;transition:transform 1.15s ease-out,background .4s;box-shadow:var(--shadow-md)}.phase-text,.ready-text{text-align:center;font-size:20px;font-weight:700;margin:16px 0 4px;color:var(--text)}.session-info{display:flex;justify-content:space-between;margin:20px 0 0;color:var(--text);font-size:17px}.main-button{display:block;margin:10px auto 0;font-size:20px;border:none;border-radius:14px;color:white;padding:12px 38px;font-weight:700;box-shadow:var(--shadow-md);cursor:pointer;transition:background .3s,transform .1s ease;background:linear-gradient(180deg,var(--accent) 0,#2f7f6b 100%)}.main-button:hover{transform:translateY(-1px)}.main-button.stop{background:linear-gradient(180deg,var(--danger) 0,#c74444 100%)}.main-button-icon{margin-right:10px}.audio-section{background:var(--surface);border-radius:22px;box-shadow:var(--shadow-lg);padding:10px 16px;max-width:400px;margin:15px auto 0;border:1px solid var(--border)}.audio-controls{display:flex;align-items:center;gap:10px;margin-top:5px}.sound-button{border:1px solid var(--border);border-radius:8px;padding:8px 12px;cursor:pointer;font-size:14px;font-weight:600;transition:all .3s;background:var(--surface-2);color:var(--text)}.sound-button.enabled{background:var(--accent);color:white;border-color:transparent}.sound-button.disabled{background:var(--surface-3);color:var(--text-soft)}.sound-button-icon{margin-right:6px}.track-button{background:var(--surface-3);border:1px solid var(--border);border-radius:8px;color:var(--text-soft);padding:8px 12px}.credits-button,.track-button{cursor:pointer;font-size:12px;transition:all .3s}.credits-button{background:transparent;border:none;color:var(--text-muted);padding:4px 8px;border-radius:6px}.credits-icon{margin-right:4px}.credits-section{background-color:var(--surface-2);border-radius:8px;padding:12px;border-top:1px solid var(--border);font-size:12px;color:var(--text-soft)}.credits-header{display:flex;align-items:center;margin-bottom:8px;font-weight:600;color:var(--text)}.credits-header-icon{margin-right:6px}.track-credit{padding-left:16px}.track-credit:not(:last-child){margin-bottom:6px}.track-name{font-weight:500;color:var(--text)}.track-license{font-size:11px;color:var(--text-muted)}.footer-text{text-align:center;margin-top:32px;color:var(--text-soft);font-size:14px}.ball-container{position:relative;width:100px;height:300px;display:flex;align-items:center;justify-content:center;border:2px solid var(--border);border-radius:60px;background:rgba(255,255,255,.75);box-shadow:var(--shadow-md)}.ball{width:80px;height:80px;border-radius:50%;box-shadow:0 10px 30px rgba(0,0,0,.25);position:relative;z-index:2}.visual-toggle-container{display:flex;justify-content:center;margin:20px 0}.visual-toggle-button{padding:12px 24px;border:none;border-radius:25px;color:white;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 6px rgba(0,0,0,.1);background:linear-gradient(180deg,var(--accent-2) 0,#486e93 100%)}.visual-toggle-button:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.15)}