:root{color-scheme:dark;--bg:#111a2e;--panel:#1b2944;--text:#f3efe6;--muted:#9aa5b9;--coral:#f47d67;--soft:#ffb09e;--sage:#a9c5ae;font-family:'DM Sans',system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;color:var(--text);background:radial-gradient(circle at 80% 25%,#f47d6720,transparent 24rem),var(--bg)}button,input{font:inherit}button{cursor:pointer}.shell{width:min(1180px,calc(100% - 64px));min-height:calc(100vh - 60px);margin:auto;padding:54px 0 42px;display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(56px,9vw,134px);align-items:center}.intro{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between}.brand{font-weight:600;letter-spacing:.04em}.brand span{color:var(--coral)}.mark{display:inline-block!important;width:18px;height:18px;border:2px solid var(--coral);border-radius:50%;vertical-align:-4px;margin-right:10px;position:relative}.mark:after{content:'';position:absolute;width:4px;height:4px;left:5px;top:5px;background:var(--coral);border-radius:50%}.intro-copy{max-width:390px;margin:auto 0;padding:80px 0 60px}.eyebrow{margin:0 0 16px;color:var(--soft);font-size:.69rem;text-transform:uppercase;letter-spacing:.2em;font-weight:700}h1{margin:0;font:500 clamp(3.3rem,6vw,5.45rem)/.94 'Fraunces',Georgia,serif;letter-spacing:-.06em}h1 em{color:var(--soft);font-style:normal}.lede{max-width:300px;margin:30px 0 0;color:var(--muted);line-height:1.72}.breath{color:#76849e;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em}.instrument{position:relative;padding:clamp(26px,4vw,48px);border:1px solid #f3efe61a;border-radius:28px;background:linear-gradient(145deg,#1f2c46d1,#121b2fba);box-shadow:0 28px 70px #04081259;overflow:hidden}.topline,.progress-meta{display:flex;justify-content:space-between;align-items:center;gap:16px}.topline .eyebrow{margin:0}.sound{border:0;background:none;color:var(--muted);font-size:.78rem}.sound:first-letter{color:var(--soft)}.timer-stage{min-height:278px;margin:26px auto 18px;position:relative;display:grid;place-items:center}.halo{position:absolute;border-radius:50%;border:1px solid #f47d672b}.back{width:min(80vw,278px);height:min(80vw,278px);box-shadow:0 0 0 20px #f47d6705,0 0 80px #f47d6719;animation:drift 10s ease-in-out infinite}.front{width:min(66vw,228px);height:min(66vw,228px);border-color:#f47d6766;border-top-color:var(--coral);transform:rotate(-20deg);transition:.4s}.face{text-align:center;z-index:1}.face p{margin:0 0 9px;color:var(--muted);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}.face div{font:500 clamp(4.1rem,9vw,6.6rem)/.95 'Fraunces',Georgia,serif;letter-spacing:-.07em;font-variant-numeric:tabular-nums}.face p:last-child{margin:12px 0 0;color:var(--soft)}.progress-meta{color:var(--muted);font-size:.74rem}.rail{height:42px;margin:10px 0 29px;display:flex;align-items:center;justify-content:space-between;position:relative}.rail i{position:absolute;left:9px;right:9px;height:1px;background:linear-gradient(90deg,var(--coral),#f47d6730 75%,var(--sage))}.rail b{z-index:1;display:grid;place-items:center;width:24px;height:24px;border:1px solid #4b5870;border-radius:50%;background:#18233b;color:#8190a9;font-size:.6rem;font-weight:500}.rail b.active,.rail b.reached{border-color:var(--coral);background:var(--coral);color:var(--bg);box-shadow:0 0 0 5px #f47d671a}.rail b:last-child{border-color:var(--sage);color:var(--sage)}.rail b:last-child.reached{background:var(--sage);color:var(--bg)}.settings{display:grid;grid-template-columns:1fr 1fr;gap:15px}.settings label{padding:15px 16px 13px;border:1px solid #f3efe61c;border-radius:14px;background:#0e162727;color:#bec7d6;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}.settings small{color:#72809a;text-transform:none;letter-spacing:0}.settings label>div{display:flex;align-items:baseline;gap:8px}.settings input{width:90px;padding:0;color:var(--text);background:none;border:0;outline:0;font:500 2.2rem/1 'Fraunces',Georgia,serif}.settings label>div span{color:var(--muted);font-size:.78rem}.settings nav{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}.settings nav button{min-width:34px;padding:5px 7px;border:1px solid transparent;border-radius:7px;color:#8d9ab0;background:#fff1;font-size:.7rem}.settings nav button.selected{color:var(--soft);border-color:#f47d677a;background:#f47d6717}.validation{min-height:18px;margin:9px 2px -2px;color:var(--soft);font-size:.72rem}.controls{display:flex;gap:10px;margin-top:18px}.primary,.secondary{min-height:50px;border-radius:11px;font-weight:600;transition:.16s}.primary{flex:1;border:1px solid var(--coral);color:var(--bg);background:var(--coral);box-shadow:0 9px 25px #f47d6729}.secondary{padding:0 23px;border:1px solid #f3efe633;color:var(--text);background:transparent}.primary:hover,.secondary:hover{transform:translateY(-1px)}.status{min-height:20px;margin:15px 0 0;color:var(--muted);font-size:.75rem;text-align:center}footer{padding:0 32px 25px;color:#63718a;font-size:.68rem;letter-spacing:.12em;text-align:center;text-transform:uppercase}@keyframes drift{50%{transform:translateY(-6px) scale(1.02)}}@media(max-width:820px){.shell{width:min(620px,calc(100% - 34px));min-height:auto;padding:31px 0 28px;display:block}.intro{min-height:290px;padding-bottom:26px}.intro-copy{margin:0;padding:55px 0 38px}.instrument{border-radius:22px;padding:25px 20px 22px}}@media(max-width:460px){.shell{width:min(calc(100% - 24px),390px);padding-top:23px}.intro{min-height:270px}.intro-copy{padding-top:47px}h1{font-size:3.65rem}.timer-stage{min-height:230px}.back{width:235px;height:235px}.front{width:195px;height:195px}.face div{font-size:4.25rem}.settings{grid-template-columns:1fr;gap:9px}.settings label{padding:13px 12px 11px}.settings input{width:75px;font-size:1.9rem}.secondary{padding:0 17px}}
.audio-actions{display:flex;align-items:center;gap:14px}.volume-row{display:flex;align-items:center;gap:12px;margin:12px 0 4px;color:var(--muted);font-size:.72rem}.volume-row label{min-width:48px;text-transform:uppercase;letter-spacing:.12em;color:#bec7d6}.volume-row input{flex:1;accent-color:var(--coral);height:4px}.volume-row output{width:38px;text-align:right;color:var(--soft);font-variant-numeric:tabular-nums}.test-beep{padding:5px 0}.audio-actions .sound{white-space:nowrap}@media(max-width:460px){.audio-actions{gap:9px}.volume-row{margin-top:14px}}
.session-mode{display:flex;gap:4px;margin:22px 0 4px;padding:4px;border:1px solid #f3efe61c;border-radius:11px;background:#0e162740}.session-mode button{flex:1;padding:9px 10px;border:1px solid transparent;border-radius:7px;color:#8d9ab0;background:transparent;font-size:.72rem}.session-mode button.selected{border-color:#f47d677a;color:var(--soft);background:#f47d6717}.session-mode button:disabled{cursor:not-allowed;opacity:.55}.duration-field[hidden]{display:none}.session-mode+ .volume-row{margin-top:12px}@media(max-width:460px){.session-mode{margin-top:18px}.session-mode button{padding:8px 6px;font-size:.68rem}}
.rail[hidden]{display:none}