:root{--bg: #0e0e11;--ink: #f3f1f8;--muted: #a19eb0;--faint: #67647a;--glass: rgba(240, 236, 255, .06);--line: rgba(240, 236, 255, .1);--accent: #b69cff;--accent-ink: #160f2b;--on: #7be3a4;--err: #ff9a85;--serif: "Fraunces", ui-serif, Georgia, serif;--sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;color:var(--ink);background:var(--bg);font:16px/1.4 var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}html,body{margin:0;min-width:320px;background:var(--bg);touch-action:manipulation;-webkit-text-size-adjust:100%;overflow-x:hidden}h1,h2,h3,p{margin:0}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{cursor:default}.radio{position:relative;min-height:100dvh;overflow-x:hidden;padding:max(18px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(60% 50% at 30% 10%,#2a2140 0%,transparent 70%),radial-gradient(50% 40% at 90% 90%,#1a1830 0%,transparent 70%)}.backdrop img{width:100%;height:100%;object-fit:cover;filter:blur(70px) saturate(1.4) brightness(.45);opacity:.9;transform:scale(1.3);transition:opacity .8s}.backdrop:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(14,14,17,.2),rgba(14,14,17,.75) 70%,var(--bg))}.top,.layout{position:relative;z-index:1;max-width:1080px;margin:0 auto}.top{display:flex;align-items:center;justify-content:space-between;padding:4px 0 18px}.top h1{font:600 1.6rem/1 var(--serif);letter-spacing:-.01em;font-variation-settings:"SOFT" 100}.status{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:7px 12px;border-radius:99px;background:var(--glass);border:1px solid var(--line)}.status i{width:7px;height:7px;border-radius:50%;background:var(--faint)}.status.on{color:var(--ink)}.status.on i{background:var(--on);box-shadow:0 0 0 0 var(--on);animation:pulse 2.4s infinite}@keyframes pulse{0%{box-shadow:0 0 #7be3a499}70%{box-shadow:0 0 0 7px #7be3a400}to{box-shadow:0 0 #7be3a400}}.layout{display:grid;gap:34px}.deck{display:grid;gap:22px;justify-items:center}.art{position:relative;width:min(100%,360px);aspect-ratio:1;border-radius:22px;overflow:hidden;background:#1a1a20;box-shadow:0 30px 60px -20px #000c,0 0 0 1px var(--line)}.art img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.art-empty{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:flex-end;justify-content:center;gap:6px;padding-bottom:42%;background:radial-gradient(circle at 50% 40%,#2a2140,#141419)}.art-empty span{width:6px;height:26px;border-radius:3px;background:var(--accent);opacity:.7;animation:bar 1.1s ease-in-out infinite}.art-empty span:nth-child(2){animation-delay:-.35s}.art-empty span:nth-child(3){animation-delay:-.7s}.art img:not([hidden])+.art-empty{display:none}@keyframes bar{0%,to{transform:scaleY(.35)}50%{transform:scaleY(1)}}.meta{width:min(100%,360px);display:flex;align-items:flex-start;gap:12px}.titles{flex:1;min-width:0}.station-name{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);min-height:1em;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.titles h2{font:500 1.45rem/1.15 var(--serif);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}#artist{color:var(--muted);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quiet{display:flex;gap:2px;margin-top:14px}.ghost{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:var(--faint);transition:color .2s,background .2s}.ghost:hover:not(:disabled){color:var(--ink);background:var(--glass)}.ghost:disabled{opacity:.35}#favourite.selected{color:#ff8fa3}#favourite.selected path{fill:currentColor}.controls{width:min(100%,360px);display:flex;align-items:center;justify-content:space-between}.round{width:56px;height:56px;display:grid;place-items:center;border-radius:50%;color:var(--ink);transition:transform .15s,background .2s,color .2s}.round:hover{background:var(--glass)}.round:active{transform:scale(.92)}.round.small{width:44px;height:44px;color:var(--muted)}.round.small.selected{color:var(--accent)}.round.play{width:76px;height:76px;background:var(--ink);color:var(--bg);box-shadow:0 12px 30px -8px #000000b3}.round.play:hover{background:#fff}.round.play svg{margin-left:2px}.radio.playing .round.play svg{margin-left:0}.message{min-height:1.3em;max-width:360px;text-align:center;font-size:.86rem;color:var(--muted);opacity:0;transition:opacity .3s}.message.show{opacity:1}.message.error{color:var(--err)}.stations-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.stations-head h3{font:500 1.15rem var(--serif)}.suggest{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:99px;font-size:.85rem;font-weight:600;background:var(--accent);color:var(--accent-ink);transition:transform .15s,filter .2s}.suggest:hover{filter:brightness(1.08)}.suggest:active{transform:scale(.96)}.suggest.busy svg{animation:spin 1s linear infinite}.suggest:disabled{opacity:.75}@keyframes spin{to{transform:rotate(360deg)}}.catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tile{position:relative}.tile-btn{position:relative;width:100%;aspect-ratio:1.25;border-radius:16px;overflow:hidden;padding:12px;text-align:left;display:flex;align-items:flex-end;background-size:cover;background-position:center;box-shadow:0 0 0 1px var(--line);transition:transform .2s,box-shadow .2s}.tile-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.78))}.tile-btn:active{transform:scale(.97)}.tile-label{position:relative;font-weight:600;font-size:.92rem;line-height:1.2;text-shadow:0 1px 8px rgba(0,0,0,.6);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tile.on .tile-btn{box-shadow:0 0 0 2px var(--accent),0 14px 30px -12px #b69cff80}.eq{position:absolute;top:12px;right:12px;display:flex;align-items:flex-end;gap:3px;height:16px}.eq i{width:3px;height:100%;border-radius:2px;background:var(--accent);transform-origin:bottom;animation:bar .9s ease-in-out infinite}.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}.radio:not(.playing) .eq i{animation-play-state:paused}.tile.suggested .tile-btn{box-shadow:0 0 0 1px #b69cff99}.tile.suggested.on .tile-btn{box-shadow:0 0 0 2px var(--accent)}.keep{position:absolute;top:9px;left:9px;padding:5px 11px;border-radius:99px;font-size:.72rem;font-weight:700;background:#0e0e11a6;color:var(--accent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(182,156,255,.5)}.tap{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:grid;place-items:center;background:#0e0e11b3;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.tap[hidden]{display:none}.tap button{display:grid;justify-items:center;gap:16px;font:500 1.2rem var(--serif)}.tap button svg{width:88px;height:88px;padding:24px 22px 24px 28px;border-radius:50%;background:var(--ink);color:var(--bg)}.spotify-menu{position:absolute;left:50%;bottom:14px;transform:translate(-50%);z-index:3}.spotify-menu button{padding:10px 16px;border-radius:99px;background:var(--ink);color:var(--bg);font-weight:600;font-size:.85rem;box-shadow:0 8px 24px #000a}.login{min-height:100dvh;display:grid;align-content:center;justify-items:start;gap:14px;max-width:440px;margin:auto;padding:max(28px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom))}.login h1{font:600 3rem/1 var(--serif)}.login p{color:var(--muted)}.login button{margin-top:8px;padding:14px 22px;border-radius:99px;background:var(--accent);color:var(--accent-ink);font-weight:700}@media(min-width:560px){.catalog{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:900px){.radio{padding-left:40px;padding-right:40px}.layout{grid-template-columns:minmax(340px,400px) 1fr;gap:56px;align-items:start;padding-top:10px}.deck{position:sticky;top:24px}.art,.meta,.controls{width:100%;max-width:400px}.stations{padding-top:4px}}@media(hover:none){.round:hover,.ghost:hover:not(:disabled){background:none}.round.play:hover{background:var(--ink)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
