:root{--stone:#3f8494;--stone-light:#5a9fae;--stone-dark:#1f5664;--groove:#10313a;--glow:#8ff0ff;--amber:#f39a2b;--text-soft:#e1f8fcc7;--dial:min(76vmin, 480px);--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='1400'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0.1 0 0 0 0 0.15 0 0 0 0.9 -0.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");color:#eafcff;-webkit-font-smoothing:antialiased;font-family:ui-rounded,SF Pro Rounded,Nunito,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--stone-dark);-webkit-tap-highlight-color:transparent;overflow:hidden}.stage{background:var(--grain), var(--mottle), radial-gradient(ellipse at 50% 42%, var(--stone-light) 0%, var(--stone) 45%, var(--stone-dark) 100%);background-blend-mode:soft-light, multiply, normal;background-position:0 0,50%,50%;background-size:240px 240px,1400px 1400px,100% 100%;height:100%;min-height:100dvh;position:relative;overflow:hidden}.stage:after{content:"";pointer-events:none;background:radial-gradient(at 50% 42%,#0000 55%,#05192073 100%);position:absolute;inset:0}.groove{background:var(--groove);position:absolute;box-shadow:0 0 0 1px #ffffff0d,0 0 6px #00000059}.groove-h{height:8px;top:calc(42% - 4px);left:0;right:0}.groove-v{width:8px;top:0;bottom:0;left:calc(50% - 4px)}.dial{width:var(--dial);height:var(--dial);z-index:1;background:var(--grain), radial-gradient(circle at 50% 45%, #33798a 0%, #2a6878 60%, #215867 100%);background-blend-mode:soft-light, normal;box-shadow:0 0 0 8px var(--groove), 0 0 0 9px #ffffff0f, inset 0 10px 30px #00000059, inset 0 -2px 10px #ffffff0f, 0 0 40px #051e2659;background-size:240px 240px,100% 100%;border-radius:50%;transition:background-color 2s;position:absolute;top:42%;left:50%;transform:translate(-50%,-50%)}.dial-title{text-align:center;font-size:calc(var(--dial) * .15);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:#1e55648c;text-shadow:0 1px #ffffff1f,0 -1px #00000040;-webkit-user-select:none;user-select:none;font-weight:800;position:absolute;top:13%;left:0;right:0}.dial-art{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.wedge{fill:#08232c47}.breath{fill:#8ff0ff12;stroke:#8ff0ff59;stroke-width:.6px;transition:r .6s}.dial[data-phase="0"] .breath{transition:none}.dot-glow{fill:#f39a2b59;filter:blur(4px)}.dial-time{text-align:center;font-size:calc(var(--dial) * .2);font-variant-numeric:tabular-nums;color:#f2feff;text-shadow:0 0 6px var(--glow), 0 0 18px #8ff0ff99, 0 0 36px #8ff0ff59;font-weight:300;line-height:1;position:absolute;top:58%;left:0;right:0}.dial-cue{text-align:center;font-size:max(13px, calc(var(--dial) * .04));letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);position:absolute;top:81%;left:10%;right:10%}.panel{left:50%;top:calc(42% + var(--dial) / 2 + 28px);z-index:1;gap:18px;width:min(100% - 32px,440px);display:grid;position:absolute;transform:translate(-50%)}.bar{background:#08232c8c;border-radius:999px;height:10px;overflow:hidden;box-shadow:inset 0 2px 4px #0006,0 1px #ffffff14}.bar-fill{border-radius:inherit;transform-origin:0;background:linear-gradient(90deg, #5fd6e8, var(--glow));height:100%;box-shadow:0 0 12px #8ff0ffb3}.steps{grid-template-columns:repeat(3,1fr);gap:8px;margin:0;padding:0;list-style:none;display:grid}.steps li{color:#e1f8fc99;background:#08232c4d;border-radius:12px;justify-items:center;gap:2px;padding:8px 4px;transition:background .6s,color .6s;display:grid}.steps li.current{color:#f2feff;background:#8ff0ff29;box-shadow:inset 0 0 0 1px #8ff0ff66}.steps li.done{color:#e1f8fc66}.step-name{font-size:14px;font-weight:600}.step-time{font-variant-numeric:tabular-nums;opacity:.8;font-size:12px}.controls{justify-content:center;gap:12px;display:flex}.btn{font:inherit;letter-spacing:.04em;color:#eafcff;cursor:pointer;background:#08232c59;border:1px solid #8ff0ff66;border-radius:999px;min-width:112px;padding:12px 22px;font-size:16px;font-weight:600;transition:background .2s,transform .1s}.btn:hover{background:#08232c80}.btn:active{transform:scale(.97)}.btn:focus-visible{outline:2px solid var(--glow);outline-offset:3px}.btn.primary{background:linear-gradient(180deg, #ffb551, var(--amber));color:#3a1d00;border-color:#0000;box-shadow:0 4px 16px #f39a2b59}.btn.primary:hover{background:linear-gradient(#ffc06a,#f7a53c)}.btn.quiet{color:var(--text-soft);background:0 0;border-color:#0000}@media (height<=640px){:root{--dial:min(56vmin, 480px)}.panel{top:calc(42% + var(--dial) / 2 + 16px);gap:10px}}@media (prefers-reduced-motion:reduce){.breath{transition:none}}