:root{--zc-background:#f0f4f6;--zc-surface:#fff;--zc-ink:#1d3550;--zc-muted:#607488;--zc-accent:#396bd8;--zc-accent-ink:#fff;--zc-border:#cdd9e4;--zc-soft:#e2eaf1;--zc-bloom-top:#092345;--zc-bloom-bottom:#276c91;--zc-bloom-light:#dcf5ff;--zc-bloom-blue:#78dfff}*{box-sizing:border-box}body{margin:0;background:var(--zc-background);color:var(--zc-ink);font:14px/1.6 system-ui,sans-serif}main{width:min(1320px,100%);margin:auto;padding:23px 28px;display:grid;grid-template-columns:minmax(0,1fr) 265px;gap:24px 32px}header{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--zc-border);padding-bottom:13px;font:9px ui-monospace,monospace;color:var(--zc-muted)}.eyebrow{font:9px/1.6 ui-monospace,monospace;letter-spacing:.17em}.scene{position:relative;min-height:560px;overflow:hidden;border-radius:2px;background:radial-gradient(ellipse at 52% 53%,#3688b765,transparent 43%),linear-gradient(165deg,var(--zc-bloom-top),var(--zc-bloom-bottom));color:var(--zc-bloom-light);isolation:isolate}.scene:before{content:'';position:absolute;inset:0;opacity:.26;background-image:radial-gradient(circle,#d0f2ff 1px,transparent 1px),radial-gradient(circle,#d0f2ff .7px,transparent 1px);background-size:127px 137px,79px 191px;background-position:13px 39px,53px 22px;pointer-events:none}.scene-heading{position:absolute;left:28px;right:28px;top:24px;pointer-events:none;z-index:2}.scene-heading .eyebrow{font-size:8px;color:#a9d8ef}.scene-heading h1{font:300 clamp(34px,4vw,53px)/1 system-ui,sans-serif;letter-spacing:-.055em;margin:7px 0 12px}.scene-heading p{font-size:11px;color:#a9d8ef;margin:0;letter-spacing:.03em}canvas{position:absolute;width:100%;height:100%;inset:0;z-index:1}.orbit-mark{position:absolute;pointer-events:none;border:1px solid #91c4e235;border-radius:50%;left:50%;top:51%;transform:translate(-50%,-50%);width:300px;height:300px}.orbit-two{width:395px;height:395px;border-style:dashed;border-color:#91c4e21d}.scene[data-phase=inhale] .orbit-one,.scene[data-phase=hold] .orbit-one{border-color:#a8e5ff88}.primary{position:absolute;left:50%;top:51%;z-index:3;transform:translate(-50%,-50%);width:104px;height:104px;border:1px solid #b7eaff99;border-radius:50%;background:radial-gradient(circle,#9bddff3b,#377aaf66);color:var(--zc-bloom-light);font:400 11px/1.5 system-ui,sans-serif;padding:20px;touch-action:none;user-select:none;box-shadow:0 0 26px #9be1ff15,inset 0 0 18px #9be1ff18;cursor:pointer;transition:box-shadow 1s,background 1s}.primary[aria-pressed=true]{background:#8bdaff55;box-shadow:0 0 0 16px #9be1ff0c,0 0 45px #9be1ff33}.primary:disabled{opacity:.5;cursor:default}.scene-guide{position:absolute;left:20px;right:20px;bottom:51px;text-align:center;pointer-events:none;z-index:2}.scene-guide h2{font:300 24px/1.2 system-ui,sans-serif;letter-spacing:-.03em;margin:0 0 9px}.scene-guide p{font-size:10px;color:#b9ddeb;margin:0}.scene-footer{position:absolute;bottom:18px;width:100%;text-align:center;font:7px ui-monospace,monospace;letter-spacing:.24em;color:#95bfd6}.controls{align-self:center;min-width:0}.phase-sequence{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:35px;color:var(--zc-muted);font-size:9px}.phase-sequence span{border-top:2px solid var(--zc-border);padding-top:12px}.phase-sequence b{display:block;font:300 28px/1.1 system-ui,sans-serif;margin-bottom:7px}.phase-sequence .current{color:var(--zc-accent);border-color:var(--zc-accent)}button,select{font:inherit;min-height:46px;border:1px solid var(--zc-border);border-radius:4px;padding:10px 12px;background:var(--zc-surface);color:var(--zc-ink);cursor:pointer}button:disabled,select:disabled{opacity:.5;cursor:default}:focus-visible{outline:3px solid var(--zc-accent);outline-offset:4px}.scene :focus-visible{outline-color:var(--zc-bloom-light);outline-offset:7px}.options{display:grid;gap:12px}label{display:grid;gap:10px;color:var(--zc-muted);font:9px ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase}select{width:100%;font:12px system-ui,sans-serif;text-transform:none;letter-spacing:0}.options button{font-size:11px;background:var(--zc-accent);color:var(--zc-accent-ink);border-color:var(--zc-accent)}.quiet-row{display:flex;gap:8px;margin-top:13px}.quiet-row button{flex:1;font-size:10px;border:0;background:none}.note{font-size:10px;color:var(--zc-muted);line-height:1.8;margin:15px 0}.remember{display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--zc-border);padding-top:16px;color:var(--zc-muted);font:10px/1.5 ui-monospace,monospace}#count{font-size:14px;color:var(--zc-ink)}#status{font-size:10px;color:var(--zc-muted);margin:12px 0;min-height:20px}
@media(max-width:700px){main{padding:13px 14px;grid-template-columns:1fr;gap:14px}header{font-size:7px;align-items:center;padding-bottom:10px}.eyebrow{font-size:7px}.scene{min-height:368px}.scene-heading{top:18px;left:20px}.scene-heading h1{font-size:33px;margin:4px 0 7px}.scene-heading p{font-size:9px}.scene-heading .eyebrow{font-size:7px}.primary{width:84px;height:84px;font-size:10px;padding:14px;top:52%}.orbit-one{width:210px;height:210px;top:52%}.orbit-two{width:280px;height:280px;top:52%}.scene-guide{bottom:36px;left:12px;right:12px}.scene-guide h2{font-size:21px;margin-bottom:6px}.scene-guide p{font-size:8px}.scene-footer{bottom:13px;font-size:6px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}.phase-sequence{grid-column:1/-1;margin:0 0 2px;font-size:8px;gap:8px}.phase-sequence span{display:flex;align-items:center;gap:8px;padding-top:7px}.phase-sequence b{font-size:19px;margin:0}.options{display:contents}.options label{grid-column:1;font-size:8px;gap:5px}.options select{font-size:11px;min-height:44px}.options #guide{grid-column:2;align-self:end;font-size:10px;min-height:44px;padding:8px}.quiet-row{grid-column:1/-1;margin:0}.quiet-row button{min-height:38px}.note{grid-column:1/-1;margin:0;font-size:9px}.remember{grid-column:1/-1;flex-direction:row;justify-content:space-between;padding-top:10px;font-size:8px}#count{font-size:10px}#status{grid-column:1/-1;min-height:0;margin:0;font-size:9px}}
[data-motion=reduced] *,[data-motion=reduced] *::before{animation:none!important;transition:none!important}@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}

/* Breath scene fills the viewport; options form a bounded keyboard-scrollable rail. */
html,body{height:100%;overflow:hidden}
main{height:100dvh;max-height:100dvh;grid-template-rows:auto minmax(0,1fr);overflow:hidden}
.scene{height:100%;min-height:0}
.controls{height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.controls:focus-visible{outline:2px solid var(--zc-accent);outline-offset:-2px}
@media(max-width:700px){main{grid-template-rows:auto minmax(0,1fr) minmax(115px,218px);gap:7px;padding:7px 10px}.scene{min-height:0}.scene-heading{top:12px;left:15px}.scene-heading h1{font-size:clamp(25px,7vw,31px)}.scene-guide{bottom:25px}.scene-guide h2{font-size:17px}.scene-footer{bottom:7px}.controls{height:100%;display:block;padding:0 2px}.phase-sequence{margin:0 0 5px}.options{display:grid;grid-template-columns:1fr 1fr;gap:7px}.options label,.options #guide{grid-column:auto}.quiet-row{margin-top:5px}.note{margin:4px 0}.remember{padding-top:5px}#status{margin:3px 0}}

/* Polish: the scene sizes its own words, the bloom fades in, and the inner ring breathes with the phases. */
.scene{container-type:size}
canvas{animation:bloom-in 1.8s cubic-bezier(.2,.7,.2,1) both}
@keyframes bloom-in{from{opacity:0;transform:scale(.97)}}
.orbit-mark{transition:transform 4s cubic-bezier(.45,0,.25,1),border-color 1.2s,opacity 1.2s}
.scene[data-phase=inhale] .orbit-one,.scene[data-phase=hold] .orbit-one{transform:translate(-50%,-50%) scale(.84)}
.scene[data-phase=exhale] .orbit-one{transform:translate(-50%,-50%) scale(1.07);border-color:#ffe2bf55}
.scene[data-phase=inhale] .orbit-two,.scene[data-phase=hold] .orbit-two{opacity:.45}
.scene-heading,.scene-guide{text-shadow:0 1px 18px #06203d99}
.scene-guide h2{transition:opacity .6s}
@container (max-height:430px){.orbit-two,.scene-footer,.scene-heading p{display:none}.scene-guide{bottom:14px}.scene-guide h2{font-size:17px;margin-bottom:3px}.scene-guide p{font-size:9px}}
@container (max-height:310px){.scene-heading{top:10px}.scene-heading h1{font-size:22px;margin:2px 0 0}.scene-guide p{display:none}.primary{width:68px;height:68px;font-size:9px;padding:9px}.orbit-one{width:140px;height:140px}}
@container (max-height:215px){.scene-heading h1,.scene-guide{display:none}.primary{width:60px;height:60px}.orbit-one{width:112px;height:112px}}
.primary{color:#f4fbff;text-shadow:0 1px 10px #04182f;background:radial-gradient(circle,#0b2a4c66,#0b2a4cb3);backdrop-filter:blur(3px)}
.primary[aria-pressed=true]{background:radial-gradient(circle,#2a5f8c66,#0b2a4c99)}