:root{--fg:#eef4f7;--dim:rgba(238,244,247,.62);--accent:#b9e8ec;--glass:rgba(255,255,255,.1);--line:rgba(255,255,255,.18)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#08131f;color:var(--fg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden}
.bg{position:fixed;inset:-40px;background:#08131f url(bg-v2.jpg) center/cover;filter:blur(24px) saturate(1.2);transform:scale(1.1);animation:drift 40s ease-in-out infinite alternate}
.glow{position:fixed;inset:0;background:radial-gradient(60% 45% at 50% 30%,rgba(150,220,230,.16),transparent 70%),linear-gradient(180deg,rgba(10,18,26,.25),rgba(10,18,26,.85));animation:breathe 10s ease-in-out infinite}
@keyframes drift{from{transform:scale(1.1) translate(-2%,-1%)}to{transform:scale(1.18) translate(2%,1%)}}
@keyframes breathe{0%,100%{opacity:.85}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.bg,.glow{animation:none}}
.player{position:relative;height:100%;max-width:460px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,2.6vh,24px);padding:calc(env(safe-area-inset-top) + 16px) 24px calc(env(safe-area-inset-bottom) + 20px)}
.top{position:absolute;top:calc(env(safe-area-inset-top) + 12px);left:24px;right:24px;display:flex;justify-content:space-between;gap:8px;min-height:32px}
.chip{font:inherit;font-size:13px;color:var(--fg);background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:6px 14px;backdrop-filter:blur(10px)}
.chip.quiet{border-color:transparent;background:none;color:var(--dim);padding-right:0;margin-left:auto}
.chip.quiet:empty{display:none}
.art{margin:0 auto;width:min(78vw,40vh,360px);aspect-ratio:1;border-radius:28px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.art img{width:100%;height:100%;object-fit:cover;display:block}
body:not(.playing) .art{transform:scale(.92)}
.meta{text-align:center}
.meta h1{margin:0;font-size:28px;font-weight:650;letter-spacing:.01em}
.meta p{margin:4px 0 0;color:var(--dim);font-size:16px}
.seek input{width:100%;margin:0;-webkit-appearance:none;appearance:none;height:28px;background:transparent;cursor:pointer}
.seek input::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:linear-gradient(90deg,var(--fg) var(--p,0%),rgba(255,255,255,.22) var(--p,0%))}
.seek input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;margin-top:-5.5px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.seek input::-moz-range-track{height:5px;border-radius:5px;background:rgba(255,255,255,.22)}
.seek input::-moz-range-progress{height:5px;border-radius:5px;background:var(--fg)}
.seek input::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#fff}
.times{display:flex;justify-content:space-between;font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums;margin-top:2px}
.controls{display:flex;align-items:center;justify-content:center;gap:clamp(24px,9vw,44px)}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.icon{width:52px;height:52px;border:0;background:none;border-radius:50%;display:grid;place-items:center;opacity:.9}
.icon svg{width:34px;height:34px;fill:currentColor}
.icon:active{transform:scale(.92)}
.play{width:84px;height:84px;border-radius:50%;border:0;background:#fff;color:#08131f;display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,0,0,.35);transition:transform .15s}
.play:active{transform:scale(.94)}
.play svg{width:40px;height:40px;fill:currentColor;grid-area:1/1}
.i-pause{display:none}
body.playing .i-play{display:none}
body.playing .i-pause{display:block}
.extras{display:flex;justify-content:center;gap:12px}
.pill{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--glass);border-radius:999px;padding:9px 16px;font-size:14px;color:var(--dim);backdrop-filter:blur(10px)}
.pill svg{width:18px;height:18px;fill:currentColor}
.pill[aria-pressed="true"]{color:#08131f;background:var(--accent);border-color:var(--accent)}
.extras{flex-wrap:wrap;align-items:center}
.sleep{display:flex;align-items:center;gap:6px}
.sleep .pill{min-width:118px;justify-content:center;font-variant-numeric:tabular-nums}
.step{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--glass);font-size:20px;line-height:1;display:grid;place-items:center;backdrop-filter:blur(10px)}
.step:active{transform:scale(.92)}
.step:disabled{opacity:.35}
@media (max-height:640px){.meta h1{font-size:22px}.play{width:68px;height:68px}.art{width:min(70vw,34vh)}}