:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#101211;color:#f0f3ef}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center;overflow-x:hidden}.ambience{position:fixed;inset:-100px;background:radial-gradient(ellipse at 50% 34%,#263a30aa,transparent 64%);pointer-events:none}main{position:relative;text-align:center;width:min(100%,580px);padding:40px 30px max(28px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center}header{display:flex;gap:9px;align-items:center;color:#c2d0c7;font-size:13px;font-weight:600;letter-spacing:.06em;margin-bottom:42px}.radio{font-size:9px;letter-spacing:.2em;color:#6c8274;margin-left:3px}.signal{display:flex;align-items:center;gap:2px;height:16px}.signal i{width:2px;background:#99d6b3;border-radius:2px;height:7px}.signal i:nth-child(2){height:15px}.signal i:nth-child(3){height:11px}.record{width:min(72vw,350px);aspect-ratio:1;position:relative;border-radius:50%;box-shadow:0 20px 70px #0008,0 0 0 1px #ffffff14;padding:5px;background:#1d2521}.sleeve{width:100%;height:100%;border-radius:50%;overflow:hidden;animation:spin 36s linear infinite;animation-play-state:paused;will-change:transform}#cover{width:100%;height:100%;object-fit:cover;display:block}.pin{position:absolute;inset:calc(50% - 6px);background:#101211;border:2px solid #d0d7cf99;border-radius:50%;box-shadow:0 0 0 4px #10121166}.playing .sleeve{animation-play-state:running}section{width:100%;min-height:95px;margin-top:30px}h1{font-size:clamp(19px,4.7vw,25px);line-height:1.35;font-weight:600;margin:0;overflow-wrap:anywhere;letter-spacing:-.025em}#artist{font-size:14px;line-height:1.5;margin:9px 0 0;color:#a0aea5}#play{margin-top:10px;width:54px;height:54px;border:1px solid #c8eed42b;border-radius:50%;background:#22372b;color:#bde8cd;display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .2s}#play:hover{background:#304d3b;transform:scale(1.04)}#play:focus-visible{outline:2px solid #bde8cd;outline-offset:5px}#play:disabled{opacity:.45;cursor:wait}#play svg{width:24px;height:24px;fill:currentColor;grid-area:1/1}.pause-icon{display:none}.playing .play-icon{display:none}.playing .pause-icon{display:block}#status{font-size:11px;color:#788d7e;letter-spacing:.02em;height:17px;margin:15px 0 0}@keyframes spin{to{transform:rotate(360deg)}}@media(max-height:650px){main{padding-top:22px}header{margin-bottom:24px}.record{width:min(55vw,240px)}section{margin-top:22px;min-height:77px}}@media(prefers-reduced-motion:reduce){.sleeve{animation:none!important}}

.record{padding:0}.controls{display:flex;gap:8px;margin-top:24px}.controls button{font:inherit;font-size:12px;padding:9px 17px;border-radius:20px;border:1px solid #ffffff20;background:#19211c;color:#809187;cursor:pointer}.controls button[aria-pressed="true"]{background:#304d3b;color:#c6efd5;border-color:#83c69d66}.controls button:disabled{opacity:.5;cursor:wait}.controls button:focus-visible{outline:2px solid #bde8cd;outline-offset:3px}#settings-status{color:#809187;font-size:11px;line-height:1.6;max-width:310px;margin:12px 0 0}#cover{transform-origin:center}

body.lofi .ambience{background:radial-gradient(ellipse at 50% 34%,#59302faa,transparent 64%)}body.lofi .signal i{background:#ee9a96}body.lofi .controls button[aria-pressed="true"]{background:#623633;color:#ffd4ce;border-color:#dd8b8266}body.lofi header{color:#e2bfba}body.lofi #status{color:#bc8c85}

.volume-control{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:10px}#volume-toggle{display:grid;place-items:center;width:32px;height:32px;background:transparent;color:#9fb6a7;border:0;border-radius:50%;cursor:pointer}#volume-toggle:hover,#volume-toggle[aria-expanded="true"]{background:#ffffff0c;color:#d5e9dc}#volume-toggle svg{width:20px;height:20px;fill:currentColor}.sound-waves{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}.muted .sound-waves{opacity:.2}#volume-panel:not([hidden]){display:grid;grid-template-columns:160px 28px;align-items:center;gap:6px 10px}#volume{width:160px;accent-color:#a5d9b6;cursor:pointer;margin:0;height:24px}#volume-value{font-size:11px;color:#b1c4b7;font-variant-numeric:tabular-nums;text-align:right}#volume-help{grid-column:1/-1;font-size:10px;color:#7e9487}body.lofi #volume{accent-color:#e9a39a}body.lofi #volume-toggle{color:#d8aaa4}#volume-toggle:focus-visible,#volume:focus-visible{outline:2px solid currentColor;outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.volume-control{flex-direction:row;gap:10px;margin-top:18px}#volume-panel:not([hidden]){grid-template-columns:160px 28px}#status:empty{display:none}

.title-row{display:flex;justify-content:center;align-items:center;gap:10px}.title-row h1{min-width:0}#original-link:not([hidden]){display:flex;align-items:center;justify-content:center;flex:0 0 30px;width:30px;height:30px;color:#9db4a5;border-radius:6px}#original-link svg{width:22px;height:22px;fill:currentColor}#original-link svg path{fill:#101211}#original-link:hover{color:#d5e9dc;background:#ffffff0c}#original-link:focus-visible{outline:2px solid currentColor;outline-offset:3px}body.lofi #original-link{color:#d8aaa4}