:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif; background:#111413; color:#d8d8d1; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; min-height:100%; background:#111413; overscroll-behavior:none; }
body { min-height:100dvh; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
main { min-height:100dvh; display:grid; place-items:center; padding:24px; }
.player { width:100%; min-height:calc(100dvh - 48px); display:flex; flex-direction:column; align-items:center; justify-content:center; touch-action:manipulation; }
.steady-button { position:relative; width:min(72vw,294px); aspect-ratio:1; border:1px solid #434944; border-radius:50%; background:#1b201e; color:#dbddd8; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:17px; font:500 23px/1 -apple-system,BlinkMacSystemFont,sans-serif; letter-spacing:.02em; box-shadow:inset 0 0 0 1px rgba(255,255,255,.018),0 18px 70px rgba(0,0,0,.28); touch-action:manipulation; }
.steady-button:active { transform:scale(.985); background:#1e2421; }
.steady-button:focus-visible,.choices button:focus-visible,.quiet-action:focus-visible,.skip:focus-visible { outline:2px solid #8e9b91; outline-offset:4px; }
.halo { position:absolute; inset:10px; border:1px solid rgba(148,160,150,.1); border-radius:50%; }
.play-icon { width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:23px solid #aeb7af;margin-left:5px; }
.steady-button.playing .play-icon { width:22px;height:27px;border:0;margin:0;background:linear-gradient(90deg,#aeb7af 0 36%,transparent 36% 64%,#aeb7af 64% 100%); }
.steady-button.playing .halo { animation:breathe 5s ease-in-out infinite; }
@keyframes breathe { 0%,100%{transform:scale(.98);opacity:.45} 50%{transform:scale(1.035);opacity:1} }
@media (prefers-reduced-motion:reduce){.steady-button.playing .halo{animation:none}}
.progress { width:62%; height:2px; background:#242a27; margin-top:34px; border-radius:2px; overflow:hidden; }
.progress div { height:100%; width:0; background:#69746c; transition:width .2s linear; }
.quiet-action,.skip { appearance:none;border:0;background:none;color:#7d857f;font:400 16px/1.2 inherit;padding:20px; }
.status { min-height:1.2em; margin:8px 0 0; color:#808781; font-size:14px; text-align:center; }
.checkin { width:min(100%,420px); position:relative; text-align:center; }
.checkin h1 { max-width:330px; margin:0 auto 38px; font-size:27px; line-height:1.22; font-weight:500; letter-spacing:-.02em; color:#d1d3ce; }
.skip { position:fixed; top:calc(12px + env(safe-area-inset-top)); right:calc(10px + env(safe-area-inset-right)); font-size:15px; }
.choices { display:grid; gap:13px; }
.choices.two { grid-template-columns:1fr 1fr; }
.choices button { min-height:72px; border:1px solid #3d4540; border-radius:18px; background:#1b201e; color:#cfd2cd; font:500 18px/1 inherit; touch-action:manipulation; }
.choices button:active { background:#252c28; transform:scale(.99); }
.saved { color:#8e958f; font-size:15px; margin:18px 0 0; }
[hidden] { display:none !important; }