:root{--bg-deep:#060b15;--bg:#0d1421;--bg-elevated:#16203a;--bg-card:#16203a99;--warm:#ff9d6b;--warm-bright:#ffba8c;--warm-deep:#d97441;--cool:#4dd4c5;--cool-bright:#7aebe0;--cool-deep:#2a9a8d;--text:#e8eef5;--text-dim:#8da3bc;--text-faded:#5d7595;--border:#8da3bc2e;--border-strong:#8da3bc59;--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", sans-serif;--r-sm:8px;--r-md:16px;--r-lg:24px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;font-size:16px;line-height:1.5}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg-deep);color:var(--text);overscroll-behavior:none;-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}.app{min-height:100dvh;padding:max(env(safe-area-inset-top), 16px) 16px max(env(safe-area-inset-bottom), 16px);background:radial-gradient(ellipse at 50% 35%, #4dd4c514 0%, transparent 50%), radial-gradient(ellipse at 60% 70%, #ff9d6b0d 0%, transparent 55%), var(--bg-deep);flex-direction:column;align-items:center;gap:8px;transition:background .8s;display:flex}.app[data-screen=onboarding]{color:#1a2540;background:radial-gradient(at 50% 30%,#ffba8c2e 0%,#0000 60%),radial-gradient(at 50% 80%,#4dd4c51a 0%,#0000 55%),#fdf0e8}.app-header{align-items:center;gap:8px;padding-bottom:8px;display:flex}.brand{letter-spacing:.02em;color:var(--text);font-size:clamp(1.5rem,4.5vw,2rem);font-weight:300;font-family:var(--font-sans);margin:0}.brand-tick{color:var(--warm);margin:0 .02em;font-weight:400}.brand-pulse{font-weight:500}.app[data-screen=onboarding] .brand{color:#1a2540}.app[data-screen=onboarding] .brand-tick{color:var(--warm-deep)}.stage{flex-direction:column;flex:none;justify-content:center;align-items:center;width:100%;display:flex;position:relative}.breathing-svg{width:100%;max-width:min(82vw,320px);height:auto;max-height:min(44vh,320px)}.phase-block{flex-direction:column;align-items:center;gap:8px;width:100%;max-width:460px;margin-top:8px;display:flex}.phase-headline{justify-content:center;align-items:center;width:100%;height:56px;display:flex;position:relative}.phase-headline-empty{height:56px}.phase-headline-text{letter-spacing:.25em;text-shadow:0 0 32px;transform-origin:50%;font-size:clamp(1.5rem,4.5vw,2rem);font-weight:200;display:inline-block}.phase-headline-inhale{color:var(--warm-bright);filter:drop-shadow(0 0 12px #ffba8c66)}.phase-headline-exhale{color:var(--cool-bright);filter:drop-shadow(0 0 12px #7aebe066)}.phase-headline-hold{color:var(--text);filter:drop-shadow(0 0 8px #e8eef533)}.phase-list{flex-direction:column;gap:8px;width:100%;margin:0;padding:8px 0 0;list-style:none;display:flex}.phase-row{color:var(--text-dim);border:1px solid #0000;border-radius:8px;grid-template:"icon name duration"".desc desc"/28px 96px 1fr;align-items:center;gap:4px 12px;padding:12px 16px;font-size:1.0625rem;transition:color .25s,background .25s,border-color .25s;display:grid}.phase-row .phase-icon{grid-area:icon}.phase-row .phase-name{grid-area:name}.phase-row .phase-duration{grid-area:duration;justify-self:start}.phase-row .phase-desc{grid-area:desc}@media (width>=420px){.phase-row{grid-template:"icon name duration desc"/28px 96px auto 1fr}}.phase-row .phase-icon{color:var(--text-dim);align-items:center;display:inline-flex}.phase-row .phase-name{letter-spacing:.08em;color:var(--text);font-size:.95rem;font-weight:600}.phase-row .phase-duration{color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:.95rem}.phase-row .phase-desc{color:var(--text-dim);font-size:.95rem}.phase-row-active .phase-name{font-weight:700}.phase-row-active{background:var(--bg-elevated);border-color:var(--border-strong)}.phase-row-active.phase-color-inhale .phase-icon,.phase-row-active.phase-color-inhale .phase-name{color:var(--warm-bright)}.phase-row-active.phase-color-inhale{background:linear-gradient(135deg,#ff9d6b2e,#ff9d6b0d);border-color:#ffba8c66}.phase-row-active.phase-color-exhale .phase-icon,.phase-row-active.phase-color-exhale .phase-name{color:var(--cool-bright)}.phase-row-active.phase-color-exhale{background:linear-gradient(135deg,#4dd4c52e,#4dd4c50d);border-color:#7aebe066}.phase-row-active.phase-color-hold{background:#e8eef50d}.phase-row-active .phase-desc,.phase-row-active .phase-duration{color:var(--text)}.settings-panel{background:var(--bg-card);border:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:16px;flex-direction:column;gap:16px;width:100%;max-width:460px;padding:16px;display:flex}.control-group{border:none;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;display:flex}.control-group legend{text-transform:uppercase;letter-spacing:.18em;width:100%;color:var(--text-dim);margin-bottom:8px;padding:0;font-size:.75rem}.chip{border:1px solid var(--border);color:var(--text-dim);cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border-radius:999px;align-items:center;padding:8px 16px;font-size:.85rem;transition:background .2s,color .2s,border-color .2s;display:inline-flex;position:relative}.chip:hover{border-color:var(--cool);color:var(--text)}.chip:focus-within{outline:2px solid var(--cool);outline-offset:2px}.chip input{clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.chip-active{color:var(--text);border-color:var(--cool);background:linear-gradient(135deg,#4dd4c52e,#ff9d6b1f)}.volume-slider{appearance:none;background:var(--border);border-radius:2px;outline:none;flex:1;width:100%;height:4px}.volume-slider:focus-visible{outline:2px solid var(--cool);outline-offset:4px}.volume-slider::-webkit-slider-thumb{appearance:none;background:var(--cool);cursor:pointer;border-radius:50%;width:16px;height:16px;box-shadow:0 0 0 3px #4dd4c52e}.volume-slider::-moz-range-thumb{background:var(--cool);cursor:pointer;border:none;border-radius:50%;width:16px;height:16px}.exercise-desc{color:var(--text-dim);margin:0;font-size:.85rem;font-style:italic;line-height:1.55}.app-footer{width:100%;max-width:460px;padding-top:8px}.footer-actions{align-items:center;gap:8px;width:100%;display:flex}.icon-btn{border:1px solid var(--border);background:var(--bg-card);min-width:48px;min-height:48px;color:var(--text-dim);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:8px;transition:color .2s,border-color .2s,background .2s;display:inline-flex}.icon-btn:hover:not(:disabled){color:var(--text);border-color:var(--border-strong)}.icon-btn:focus-visible{outline:2px solid var(--cool);outline-offset:2px}.icon-btn:disabled{opacity:.4;cursor:not-allowed}.icon-btn-wide{min-width:auto;padding:8px 16px}.icon-btn-active{color:var(--cool-bright);border-color:var(--cool)}.icon-label{font-variant-numeric:tabular-nums;color:inherit;font-size:.85rem}.cta{background:linear-gradient(135deg, var(--cool) 0%, var(--warm) 100%);color:var(--bg-deep);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border:none;border-radius:12px;flex:1;justify-content:center;align-items:center;gap:12px;min-height:56px;padding:20px 24px;font-size:.95rem;font-weight:700;transition:transform .15s,filter .2s;display:inline-flex}.cta:hover{filter:brightness(1.1)}.cta:focus-visible{outline:2px solid var(--cool-bright);outline-offset:4px}.cta:active{transform:scale(.98)}.cta-stop{color:var(--text);border:1px solid var(--border-strong);background:0 0}.cta-stop:hover{background:var(--bg-elevated);filter:none}.yt-section{justify-content:center;width:100%;max-width:360px;display:flex}.yt-player{aspect-ratio:16/9;border:1px solid var(--border);background:#000;border-radius:16px;width:100%;position:relative;overflow:hidden;box-shadow:0 8px 32px #0006}.yt-player-host{width:100%;height:100%}.yt-player-host iframe,.yt-player iframe{border:0;width:100%;height:100%;display:block}.yt-swap-overlay{color:var(--text);cursor:pointer;letter-spacing:.08em;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:linear-gradient(135deg,#0d14218c,#0d142159);border:0;justify-content:center;align-items:center;gap:12px;font-size:.9rem;font-weight:600;transition:background .2s,transform .15s;display:flex;position:absolute;inset:0}.yt-swap-overlay:hover{background:linear-gradient(135deg,#0d1421b3,#0d142180)}.yt-swap-overlay:active{transform:scale(.99)}.yt-swap-overlay:focus-visible{outline:2px solid var(--cool-bright);outline-offset:-4px}.yt-swap-icon{color:#fff;background:#ff0000e6;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;padding-left:3px;font-size:1rem;display:inline-flex}.yt-swap-label{text-transform:uppercase;font-size:.78rem}.yt-subscribe{border:1px solid var(--border-strong);color:var(--text-dim);letter-spacing:.04em;background:0 0;border-radius:999px;justify-content:center;align-items:center;gap:10px;width:100%;margin-top:12px;padding:10px 16px;font-size:.85rem;font-weight:500;text-decoration:none;transition:background .2s,border-color .2s,color .2s,transform .15s;display:inline-flex}.yt-subscribe:hover{border-color:var(--cool);color:var(--text);background:#ffffff0a}.yt-subscribe:active{transform:scale(.99)}.yt-subscribe:focus-visible{outline-offset:2px;outline:2px solid #ff4040}.copyright{text-align:center;color:var(--text-faded);letter-spacing:.06em;margin:16px 0 0;font-size:.7rem}.onboarding{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:24px;width:100%;max-width:460px;padding:16px 0;display:flex}.onboarding-progress{align-items:center;gap:8px;display:flex}.onboarding-dot{background:#1a25402e;border-radius:2px;width:24px;height:4px;transition:background .4s,width .4s}.onboarding-dot-on{background:var(--warm-deep);width:32px}.onboarding-card{background:#fff;border-radius:24px;flex-direction:column;align-items:center;gap:16px;width:100%;padding:24px;display:flex;box-shadow:0 16px 48px #ff9d6b26}.onboarding-illustration{background:linear-gradient(135deg,#fff3ea 0%,#ffe5d4 100%);border-radius:16px;justify-content:center;align-items:center;width:100%;max-width:320px;height:240px;padding:16px;display:flex}.posture-svg{max-width:100%;max-height:100%}.onboarding-title{letter-spacing:-.01em;color:#1a2540;text-align:center;margin:0;font-size:clamp(1.65rem,5.5vw,2.25rem);font-weight:700}.onboarding-body{color:#3d4a64;text-align:center;max-width:360px;margin:0;font-size:1.05rem;line-height:1.6}.onboarding-actions{justify-content:space-between;align-items:center;gap:16px;width:100%;display:flex}.onboarding-skip{color:#4a5876;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:0 0;border:none;border-radius:8px;padding:8px 16px;font-size:.9rem;transition:color .2s,background .2s}.onboarding-skip:hover{color:#1a2540;background:#1a25400d}.onboarding-skip:focus-visible{outline:2px solid var(--warm-deep);outline-offset:2px}.onboarding-cta{background:linear-gradient(135deg, var(--warm-deep) 0%, var(--warm) 100%);color:#fff;flex:none;min-width:192px;padding:18px 32px;font-size:1rem}.onboarding-skip{padding:12px 16px;font-size:1rem}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (width<=380px){.phase-row{grid-template-columns:22px 64px auto 1fr;padding:8px;font-size:.8rem}.phase-row .phase-name,.phase-row .phase-duration,.phase-row .phase-desc{font-size:.78rem}.icon-label{display:none}}