:root{--bg: #000;--fg: #fff;--muted: rgba(235, 235, 245, .6);--line: rgba(84, 84, 88, .65);--glass-fill: rgba(255, 255, 255, .1);--glass-edge: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 0 .5px rgba(255, 255, 255, .12);--surface: #1c1c1e;--green: #30d158;--red: #ff453a;--accent: #8e8e93;color-scheme:dark}*{box-sizing:border-box}svg{vertical-align:-.125em}html,body{margin:0;color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,system-ui,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}html{background:var(--bg)}body{position:relative;height:100dvh;overflow:hidden;background:transparent}#root{display:flex;flex-direction:column;height:100%}main{display:flex;flex:1;flex-direction:column;justify-content:center;gap:24px;width:100%;max-width:480px;min-height:0;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 20px) 16px 12px;overflow-y:auto}.tab-panel{display:flex;flex:1;flex-direction:column;min-height:0;animation:rise .26s ease}.tab-panel[hidden]{display:none}.panel-body{display:flex;flex:1;flex-direction:column;justify-content:space-evenly;align-items:center;gap:16px;width:100%;min-height:0}@keyframes rise{0%{opacity:0;transform:translateY(8px)}}.panel{display:flex;flex:1;flex-direction:column;align-items:center;gap:20px;width:100%;min-height:0}.panel-header{display:flex;justify-content:space-between;align-items:baseline;width:100%}h1,h2{margin:0;font-weight:400}h2{font-size:.8rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}button{font:inherit;color:var(--accent);background:none;border:0;padding:0;cursor:pointer;transition:color .25s ease,background-color .25s ease,transform .1s ease}button:active{transform:scale(.92)}.row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;width:100%}.round{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;width:68px;height:68px;border-radius:50%;font-size:32px}.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 16px;border-radius:999px;color:var(--fg);font-weight:500}.chip.on{background:var(--accent);color:#000;font-weight:600}.chip.dim{opacity:.35}.chip:disabled{opacity:.5}.panel-footer{display:grid;flex:none;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;margin-bottom:14px}.panel-footer .end{display:flex;justify-content:flex-end;align-items:center;gap:8px}.round.off{width:76px;height:76px;color:var(--fg);font-size:30px}input[type=range]{--handle-width: 36px;--handle-height: 22px;--track: 6px;width:100%;height:44px;margin:0;background:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{--filled: calc(var(--handle-width) / 2 + (100% - var(--handle-width)) * var(--fraction, 0));height:var(--track);border-radius:999px;background:linear-gradient(90deg,var(--accent) var(--filled),rgba(255,255,255,.18) var(--filled))}input[type=range]::-webkit-slider-thumb{width:var(--handle-width);height:var(--handle-height);margin-top:calc((var(--track) - var(--handle-height)) / 2);border:0;border-radius:999px;background:#fff;box-shadow:0 2px 8px #00000059;-webkit-appearance:none;transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}input[type=range]:active::-webkit-slider-thumb{background:#ffffff59;box-shadow:var(--glass-edge),0 4px 14px #0006;transform:scale(1.15)}input[type=range]::-moz-range-track{height:var(--track);border-radius:999px;background:#ffffff2e}input[type=range]::-moz-range-progress{height:var(--track);border-radius:999px;background:var(--accent)}input[type=range]::-moz-range-thumb{width:var(--handle-width);height:var(--handle-height);border:0;border-radius:999px;background:#fff}.status{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;color:var(--muted)}.toast{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);left:50%;z-index:20;display:flex;align-items:center;gap:10px;max-width:90vw;padding:12px 20px;border-radius:999px;background:#2c2c2eb3;-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:var(--glass-edge),0 10px 30px #00000080;color:var(--fg);font-weight:500;transform:translate(-50%);animation:drop .32s cubic-bezier(.2,.8,.2,1);pointer-events:none}.toast .dot{width:14px;height:14px;border-radius:50%}@keyframes drop{0%{opacity:0;transform:translate(-50%) translateY(-24px) scale(.9)}}.error{margin:0;color:var(--red)}.round.small{width:48px;height:48px;font-size:22px;position:relative}.round.soft{color:var(--muted)}.glass{background:var(--glass-fill);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:var(--glass-edge)}@keyframes fade{0%{opacity:0}}.tabbar{flex:none;z-index:10;display:flex;gap:2px;width:calc(100% - 28px);max-width:448px;margin:0 auto calc(env(safe-area-inset-bottom,0px) + 8px);padding:5px;border-radius:999px}.tabbar{position:relative;background:#161618b3;-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 1px #ffffff24,0 0 0 .5px #ffffff1a,0 10px 30px #00000080}.tab{position:relative;z-index:1;display:flex;flex:1;flex-direction:column;align-items:center;gap:3px;padding:7px 0 5px;border-radius:999px;color:var(--fg);font-size:.62rem;font-weight:600;letter-spacing:.05em;transition:color .3s ease,transform .2s ease}.tab svg{font-size:1.3rem}.tab.active{color:var(--accent)}.tab.offline{opacity:.4}.tab:active{transform:scale(.95)}.tab-glow{position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 10px - (var(--count) - 1) * 2px) / var(--count));border-radius:999px;background:color-mix(in srgb,var(--accent) 28%,rgba(118,118,128,.24));box-shadow:inset 0 1px #ffffff1f;transform:translate(calc(var(--index) * (100% + 2px)));transition:transform .32s cubic-bezier(.2,.8,.2,1),background-color .6s ease}a.status,.app-link{color:inherit;text-decoration:none}.select-wrap{position:relative;cursor:pointer}.select-wrap select{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;opacity:0;-moz-appearance:none;appearance:none;-webkit-appearance:none;font-size:16px;cursor:pointer}.skeleton{display:block;border-radius:8px;background:linear-gradient(90deg,#ffffff0f 25%,#ffffff24,#ffffff0f 75%);background-size:200% 100%;box-shadow:none;animation:shimmer 1.4s ease-in-out infinite}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.pill{padding:5px 12px;border-radius:999px;background:var(--glass-fill);color:var(--muted);font-size:.75rem;font-weight:600}.pill.ok{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green)}.pill.bad{background:color-mix(in srgb,var(--red) 18%,transparent);color:var(--red)}.panel.offline .panel-body,.panel.offline .round.off{opacity:.4;transition:opacity .3s ease}@media(max-width:430px){input[type=range]{height:52px}}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;background:#00000073;animation:fade .25s ease}.sheet{position:fixed;right:0;bottom:0;left:0;z-index:31;display:flex;flex-direction:column;gap:16px;max-height:calc(100dvh - env(safe-area-inset-top,0px) - 24px);max-width:480px;margin:0 auto;padding:8px 16px calc(env(safe-area-inset-bottom,0px) + 24px);overflow-y:auto;overscroll-behavior:contain;border-radius:28px 28px 0 0;background:var(--surface);box-shadow:var(--glass-edge),0 -10px 40px #00000080;animation:sheet-up .38s cubic-bezier(.2,.8,.2,1)}.sheet>*{flex-shrink:0}@keyframes sheet-up{0%{transform:translateY(100%)}}.sheet-bar{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-top:14px}.grabber{position:absolute;top:0;left:50%;width:36px;height:5px;border-radius:3px;background:#ffffff40;transform:translate(-50%)}.sheet .sheet-bar h1{font-size:1.05rem;font-weight:600;letter-spacing:0}.sheet-action{justify-self:start;font-size:1.05rem}.sheet-action.strong{justify-self:end;font-weight:600}.panel.compact{gap:14px}.lights{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;width:100%}.light{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 10px 8px 8px;border-radius:16px;color:var(--fg);text-align:left;touch-action:pan-x;-webkit-touch-callout:none;transition:background-color .4s ease,color .4s ease,opacity .4s ease}.light-icon{display:inline-flex;flex:none;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;background:#ffffff1f;color:var(--muted);font-size:17px;transition:background-color .4s ease,color .4s ease}.light-text{display:flex;flex-direction:column;min-width:0}.light-name{overflow:hidden;font-size:.8rem;font-weight:600;white-space:nowrap;text-overflow:ellipsis}.light-state{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}.light.on{background:linear-gradient(to top,rgba(255,255,255,.92) var(--level),rgba(255,255,255,.62) var(--level));color:#000}.light.on .light-icon{background:var(--light);color:#000}.light.on .light-state{color:#0000008c}.light.dim{opacity:.4}.light.targeted{outline:2px solid var(--accent);outline-offset:2px}.swatches{display:flex;justify-content:space-between;gap:10px;width:100%}.swatch{flex:1;aspect-ratio:1;max-width:40px;border-radius:50%;border:2px solid transparent;transition:transform .15s ease}.swatch.active{box-shadow:0 0 0 3px #000,0 0 0 5px var(--accent)}.swatch.off{display:inline-flex;justify-content:center;align-items:center;border-color:var(--line);color:var(--muted);font-size:1.1rem;box-shadow:none}.brightness-row{flex-wrap:nowrap}.brightness-row input[type=range]{flex:1;width:auto}.wheel{position:relative;width:min(62vw,240px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff,#fff0 72%),conic-gradient(from 0deg,#ff0040,#ff8000,#ff0,#00ff40,#0ff,#0040ff,#f0f,#ff0040);touch-action:none;cursor:crosshair}.wheel-dot{position:absolute;width:22px;height:22px;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 8px #0009;transform:translate(-50%,-50%);pointer-events:none}.scenes{display:flex;flex:none;gap:8px;width:100%;overflow-x:auto;scrollbar-width:none}.scenes::-webkit-scrollbar{display:none}.scenes>:first-child{margin-left:auto}.scenes>:last-child{margin-right:auto}.scenes .chip{flex:none;white-space:nowrap}.light-skeleton{height:48px;border-radius:16px}@media(max-width:430px){.swatch{max-width:52px}}.marquee{width:100%;overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}.marquee-inner{display:inline-block;padding:0 12px}.marquee-inner.scrolling{animation:marquee var(--duration) ease-in-out infinite alternate}@keyframes marquee{0%,12%{transform:translate(0)}88%,to{transform:translate(var(--shift))}}.lyrics-panel{justify-content:flex-start}.lyrics-header{display:grid;grid-template-columns:1fr minmax(0,2.2fr) 1fr;align-items:center;gap:8px}.lyrics-header .status{justify-self:end}.lyrics-card{display:flex;flex:1;width:100%;min-height:0;margin-bottom:12px;border-radius:24px;background:color-mix(in srgb,var(--accent) 30%,rgba(18,18,20,.55));-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:inset 0 1px #ffffff2e,0 0 0 .5px #ffffff1f,0 12px 32px #00000073;overflow:hidden}.lyrics .marker{display:block;margin-top:.6em;color:#fff9;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}.lyrics{position:relative;flex:1;width:100%;min-height:0;padding:24px 20px;overflow-y:auto;white-space:pre-wrap;font-family:Figtree,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:1.6rem;font-weight:700;line-height:1.25;letter-spacing:-.015em;text-align:center;color:var(--fg);-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(transparent,#000 28px,#000 calc(100% - 28px),transparent)}.lyrics.synced{padding-block:30vh;white-space:normal}.lyrics.synced .line{display:block;padding:8px 0;color:#ffffff73;cursor:pointer;transition:color .3s ease}.lyrics.synced .line.current{color:var(--fg);font-weight:800}.track{text-align:center;max-width:100%}.track-name{color:var(--fg);font-weight:600}.track-artist{color:var(--muted);font-size:.85rem}.lyrics-skeleton{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;padding:40px 20px}.lyrics-skeleton .skeleton{height:26px}.backdrop{position:absolute;top:-80px;right:-80px;bottom:-80px;left:-80px;z-index:-1;width:calc(100% + 160px);height:calc(100% + 160px);object-fit:cover;filter:blur(22px) brightness(.5) saturate(1.3);opacity:0;transition:opacity 1.2s ease;pointer-events:none;will-change:opacity;transform:translateZ(0);-webkit-mask-image:linear-gradient(#000 10%,rgba(0,0,0,.45) 60%,transparent 100%);mask-image:linear-gradient(#000 10%,rgba(0,0,0,.45) 60%,transparent 100%)}.backdrop.visible{opacity:1}body:not([data-tab=spotify]):not([data-tab=lyrics]) .backdrop{opacity:0;transition-duration:.3s}.player-middle{display:flex;flex:1;justify-content:center;align-items:center;min-height:0}.volume-row{flex-wrap:nowrap;color:#fff9}.volume-row input[type=range]{flex:1;width:auto}.player{position:relative;display:flex;flex:1;flex-direction:column;gap:16px;width:100%;min-height:0}.player-top,.player-bottom{display:flex;flex-direction:column;gap:10px}.player-top{flex-direction:row;justify-content:space-between;align-items:baseline}.player h2,.player .status{color:#ffffffbf}.disc{position:relative;width:min(62vw,280px);aspect-ratio:1;margin:-6px auto 4px;border-radius:50%;transition:transform .3s ease,opacity .3s ease}.disc:active{transform:scale(.97)}.disc img,.disc-empty{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 8px 24px #00000073;animation:fade .7s ease}.disc-empty{background:var(--surface)}.disc .pop{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;font-size:96px;color:var(--accent);animation:pop-heart .6s ease forwards;pointer-events:none}@keyframes pop-heart{0%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1.1)}to{opacity:0;transform:scale(1)}}.player.paused .disc{transform:scale(.92);opacity:.7}.ring{position:absolute;top:-9px;right:-9px;bottom:-9px;left:-9px;width:calc(100% + 18px);height:calc(100% + 18px);transform:rotate(-90deg);pointer-events:none}.ring circle{fill:none;stroke-width:1.9}.ring-track{stroke:#ffffff26}.ring-fill{stroke:var(--accent);stroke-linecap:round;transition:stroke-dasharray .5s linear}.player-title{cursor:pointer;font-size:1.25rem;font-weight:600;letter-spacing:-.01em;color:var(--fg);text-align:center}.title-extra{margin-left:8px;font-size:.7em;font-weight:400;color:#ffffff73}.liked{margin-left:8px;font-size:.85em;vertical-align:-.1em}.player-artist{color:var(--muted);font-size:1.05rem;text-align:center}.seek{position:relative;height:24px;margin:2px 0 -6px;cursor:pointer}.seek:before{content:"";position:absolute;top:9px;left:0;right:0;height:6px;border-radius:3px;background:#fff3}.seek-fill{position:absolute;top:9px;left:0;height:6px;border-radius:3px;background:var(--accent);transition:width .5s linear}.player-times{display:flex;justify-content:space-between;font-size:.75rem;font-weight:500;font-variant-numeric:tabular-nums;color:var(--muted)}.player .up-next{min-width:0;margin:2px auto 0;max-width:100%;padding:4px 14px;border-radius:999px;background:var(--glass-fill);color:var(--muted);font:inherit;font-size:.8rem;font-weight:500;text-align:center}.up-next span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.player button{color:#fff}.player .round.small{color:var(--fg)}.player .transport{flex-wrap:nowrap;justify-content:space-between;gap:0}.player .round.big.play{width:76px;height:76px;font-size:40px;background:var(--accent);color:#000;box-shadow:var(--glass-edge),0 6px 20px color-mix(in srgb,var(--accent) 35%,transparent)}.round.busy svg{animation:pulse 1s ease-in-out infinite}@keyframes pulse{50%{opacity:.3;transform:scale(.85)}}.step{display:inline-flex;justify-content:center;align-items:center;width:40px;height:40px;border-radius:50%;font-size:1.2rem;color:#fff9}.disc.skeleton,.disc-empty.skeleton{border-radius:50%}.skeleton-title{width:60%;height:22px;margin:4px auto 0}.skeleton-artist{width:40%;height:16px;margin:2px auto 6px}.player-skeleton{display:flex;flex:1;flex-direction:column;justify-content:center;gap:12px;width:100%}@media(max-width:430px){.player .round.big.play{width:80px;height:80px;font-size:42px}.disc{width:min(78vw,330px)}}.queue{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border-radius:12px;background:#2c2c2e;overflow:hidden}.queue li+li{border-top:.5px solid var(--line)}.queue-item{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px;color:var(--fg);text-align:left}.queue-item:active{background:#ffffff14;transform:none}.queue-item img,.queue-cover{flex:none;width:44px;height:44px;border-radius:6px;background:var(--surface);object-fit:cover}.queue-text{display:flex;flex-direction:column;min-width:0}.queue-title,.queue-artist{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.queue-title{font-size:.95rem;font-weight:600}.queue-artist{color:var(--muted);font-size:.8rem}.queue-empty{margin:0;padding:24px 0;color:var(--muted);text-align:center}.setup{display:flex;flex-direction:column;gap:20px;max-width:420px;min-height:100dvh;margin:0 auto;padding:24px;justify-content:center}.setup h1{letter-spacing:.3em;text-align:center}.group,.status-list{display:flex;flex-direction:column;border-radius:12px;background:var(--surface);overflow:hidden}.group-row{display:flex;flex-direction:column;gap:2px;padding:10px 16px;font-size:.75rem;color:var(--muted)}.group-row+.group-row,.status-line+.status-line{border-top:.5px solid var(--line)}.group-row input{padding:2px 0;border:0;background:none;color:var(--fg);font:inherit;font-size:1rem;outline:none}.setup.sheet{justify-content:flex-start;min-height:0;max-width:480px;padding:8px 16px calc(env(safe-area-inset-bottom,0px) + 24px)}.sheet .group,.sheet .status-list{background:#2c2c2e}.status-list{margin:0;font-size:.9rem}.status-line{display:flex;justify-content:space-between;gap:12px;padding:12px 16px}.status-line dt{color:var(--muted)}.status-line dd{margin:0;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-line.ok dd:before{content:"● ";color:var(--green)}.status-line.bad dd:before{content:"● ";color:var(--red)}.sources{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;width:100%}.source{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px 14px;border-radius:20px;color:var(--fg);font-size:.85rem;font-weight:600}.source svg{font-size:26px}.source.on{background:var(--accent);box-shadow:var(--glass-edge);color:#000}.volume-block{display:flex;justify-content:center;align-items:center;gap:28px;width:100%}.round.side{width:56px;height:56px;color:var(--fg);font-size:22px}.rocker{display:flex;flex-direction:column;width:104px;height:min(42dvh,260px);border-radius:36px;overflow:hidden}.rocker-half{display:flex;flex:1;justify-content:center;align-items:center;color:var(--fg);font-size:34px;touch-action:none;-webkit-touch-callout:none}.rocker-half+.rocker-half{border-top:.5px solid rgba(255,255,255,.14)}.rocker-half:active{background:#ffffff1f;transform:none}