:root{color-scheme:dark;--background: #090807;--foreground: #f4f1ee;--muted: #8d8782;--muted-soft: rgba(244, 241, 238, .38);--border: rgba(255, 255, 255, .09);--surface: rgba(18, 17, 16, .58);--accent: #f4f1ee;--accent-rgb: 244, 241, 238;--accent-soft: rgba(244, 241, 238, .14);--danger: #ff6b6b;--radius: 12px;--radius-lg: 22px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;overflow:hidden;background:var(--background);color:var(--foreground);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,input{font:inherit}button{color:inherit;border:0;background:transparent;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}.ambient{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--background)}.ambient-art{position:absolute;top:-14%;right:-14%;bottom:-14%;left:-14%;opacity:0;transition:opacity 1.1s ease}.ambient-art.has-art{opacity:.8}.ambient-art img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);filter:blur(48px) saturate(1.45) brightness(.58)}.ambient-shade{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,#0605045c,#06050414 48%,#0605046b),linear-gradient(180deg,rgba(6,5,4,.48),transparent 32%,rgba(6,5,4,.66)),radial-gradient(circle at 50% 42%,transparent 0%,rgba(6,5,4,.28) 62%,rgba(6,5,4,.78) 100%)}.ambient-grain{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.shell{position:relative;z-index:2;display:flex;flex-direction:column;width:100%;height:100%}.stage{display:flex;flex-direction:column;align-items:stretch;gap:0;flex:1 1 auto;min-height:0;padding:clamp(30px,5vh,72px) clamp(24px,4vw,82px) 78px}body.panel-open .stage{padding-bottom:0}.now{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,1.4vh,16px);flex:1 1 auto;width:100%;min-width:0;min-height:0}.cover-frame{position:relative;flex:0 0 auto;width:min(45vh,31vw,520px);max-width:100%;aspect-ratio:1;border-radius:var(--radius-lg);background:#151311;box-shadow:0 0 0 1px #ffffff0f,0 30px 80px #00000080;isolation:isolate}.cover-frame:before{content:"";position:absolute;top:-8%;right:-8%;bottom:-8%;left:-8%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.18),transparent 68%);filter:blur(30px)}.cover-frame img{display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.cover-empty{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-radius:inherit;background:radial-gradient(circle at 32% 22%,rgba(var(--accent-rgb),.12),transparent 58%),#171512;color:#ffffff3d}.cover-empty .icon{width:32%;height:32%}.meta{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;min-width:0;text-align:center}.title-row{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-width:0}.title-row h1{min-width:0;margin:0;overflow:hidden;font-size:clamp(20px,2.9vh,25px);font-weight:650;letter-spacing:-.028em;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.meta>p{width:100%;margin:0;overflow:hidden;color:var(--muted);font-size:clamp(12px,1.7vh,14px);line-height:1.4;text-overflow:ellipsis;white-space:nowrap}.favorite-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:26px;height:26px;color:var(--muted);transition:color .16s ease,transform .16s ease}.favorite-button:hover{color:var(--foreground);transform:scale(1.08)}.favorite-button.active{color:var(--foreground)}.favorite-button.active .icon svg path{fill:currentColor}.favorite-button:disabled{cursor:default;opacity:.28}.controls{display:flex;flex-direction:column;gap:8px;width:min(100%,360px);margin-top:8px;flex:0 0 auto}.seek{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;align-items:center;gap:8px;width:100%;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}.seek span:first-child{text-align:right}.seek span:last-child{text-align:left}input[type=range]{--progress: 0%;width:100%;height:16px;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:999px;background:linear-gradient(90deg,var(--foreground) var(--progress),rgba(255,255,255,.18) var(--progress))}input[type=range]::-moz-range-track{height:3px;border-radius:999px;background:#ffffff2e}input[type=range]::-moz-range-progress{height:3px;border-radius:999px;background:var(--foreground)}input[type=range]::-webkit-slider-thumb{width:10px;height:10px;margin-top:-3.5px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:50%;background:var(--foreground);box-shadow:0 1px 5px #00000080;opacity:0;transition:opacity .15s ease}input[type=range]:hover::-webkit-slider-thumb,input[type=range]:focus-visible::-webkit-slider-thumb{opacity:1}input[type=range]::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:var(--foreground)}.transport{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(14px,1.5vw,22px);min-height:38px}.icon-button,.play-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:0;color:#f4f1eed1;transition:color .15s ease,transform .15s ease,opacity .15s ease}.icon-button{width:26px;height:26px}.icon-button .icon{width:18px;height:18px}.play-button{width:30px;height:30px;color:var(--foreground)}.play-button .icon{width:22px;height:22px}.icon-button:hover,.play-button:hover{color:#fff;transform:scale(1.08)}.icon-button:active,.play-button:active{transform:scale(.94)}.icon-button:disabled,.play-button:disabled{cursor:default;opacity:.28;transform:none}.icon-button.active{color:var(--foreground)}.volume-wrap{position:absolute;top:50%;right:0;display:flex;align-items:center;transform:translateY(-50%)}.volume-popover{position:absolute;bottom:calc(100% + 12px);left:50%;display:flex;align-items:center;gap:9px;width:138px;padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:#0f0d0bdb;box-shadow:0 14px 40px #00000073;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;pointer-events:none;transform:translate(-50%,7px) scale(.97);transform-origin:bottom center;transition:opacity .16s ease,transform .16s ease}.volume-wrap:hover .volume-popover,.volume-wrap:focus-within .volume-popover,.volume-wrap.open .volume-popover{opacity:1;pointer-events:auto;transform:translate(-50%) scale(1)}.volume-popover span{width:27px;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums;text-align:right}.side-panel{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;height:100%;padding-left:clamp(18px,4vw,82px);animation:panel-in .32s ease both}.side-panel:before,.side-panel:after{content:"";position:absolute;right:0;left:clamp(18px,4vw,82px);z-index:2;height:16%;pointer-events:none}.side-panel:before{top:0;background:linear-gradient(180deg,rgba(9,8,7,.9),transparent)}.side-panel:after{bottom:0;background:linear-gradient(0deg,rgba(9,8,7,.9),transparent)}@keyframes panel-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.view{display:flex;flex-direction:column;height:100%;min-height:0}.view-head{display:none}.lyrics-scroll{position:relative;flex:1 1 auto;min-height:0;width:100%;max-width:640px;overflow-x:hidden;overflow-y:auto;padding:19vh 0 24vh;scroll-behavior:smooth;scrollbar-width:none}.lyrics-scroll::-webkit-scrollbar{display:none}.lyric-line{position:relative;margin:0 0 clamp(10px,1.7vh,19px);color:#f4f1ee45;font-size:clamp(16px,1.48vw,22px);font-weight:620;letter-spacing:-.015em;line-height:1.34;transform-origin:left center;transition:color .32s ease,opacity .32s ease,transform .32s ease,font-size .32s ease}.lyric-line.past{color:#f4f1ee29}.lyric-line.active{color:var(--foreground);font-size:clamp(19px,1.72vw,28px);transform:translate(2px);text-shadow:0 2px 20px rgba(0,0,0,.32)}.lyric-line:hover{color:#f4f1ee99}.lyric-break{display:flex;align-items:center;gap:10px;margin:2px 0 18px;padding:5px 0;color:#f4f1ee3d;transition:opacity .24s ease,color .24s ease}.lyric-break.past{opacity:.45}.lyric-break.active{color:#f4f1eecc}.break-note{display:inline-flex;align-items:center;justify-content:center;width:clamp(16px,1.35vw,22px);height:clamp(16px,1.35vw,22px);color:#f4f1ee3d;opacity:.45;transition:color .22s ease,opacity .22s ease,transform .22s ease}.break-note svg{display:block;width:100%;height:100%}.lyric-break .break-note.on{color:#f4f1eeb3;opacity:.85}.lyric-break.active .break-note.on{color:var(--foreground);opacity:1;transform:translateY(-1px)}.lyric-break.past .break-note{opacity:.3}.lyric-text{display:inline-block;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}.lyric-word{transition:color .2s ease,text-shadow .2s ease}.lyric-line.active .lyric-word{color:#f4f1ee61}.lyric-line.active .lyric-word.sung{color:var(--foreground)}.lyric-line.active .lyric-word.current{color:var(--foreground);text-shadow:0 0 16px rgba(var(--accent-rgb),.45)}.lyric-romanized{margin-top:4px;color:var(--muted);font-size:.56em;font-weight:450;letter-spacing:.01em;line-height:1.35;opacity:.82}.lyric-secondary{margin-top:3px;color:var(--muted-soft);font-size:.62em;font-weight:430;font-style:italic;line-height:1.35}.lyric-line.active .lyric-secondary{color:#f4f1ee80}.lyrics-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;padding:24px;color:var(--muted);text-align:center}.lyrics-empty .icon{width:28px;height:28px;opacity:.4}.lyrics-empty strong{color:#f4f1eeb3;font-size:13px;font-weight:560}.lyrics-empty span{max-width:280px;font-size:11px;line-height:1.5;opacity:.8}.lyrics-loading{display:flex;align-items:center;justify-content:center;gap:9px;height:100%;color:var(--muted);font-size:12px}.spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.16);border-top-color:var(--foreground);border-radius:50%;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.queue-scroll{flex:1 1 auto;min-height:0;width:100%;max-width:560px;overflow-x:hidden;overflow-y:auto;padding:12vh 0 20vh;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}.queue-scroll::-webkit-scrollbar{width:8px}.queue-scroll::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:999px;background:#ffffff24;background-clip:content-box}.queue-current,.queue-item{display:grid;grid-template-columns:38px minmax(0,1fr) auto auto;align-items:center;gap:10px;width:100%;padding:7px 8px;border-radius:10px;text-align:left;transition:background .15s ease}.queue-current{margin-bottom:8px;background:#ffffff0b}.queue-item:hover{background:#ffffff0d}.queue-cover{width:38px;height:38px;overflow:hidden;border-radius:6px;background:#ffffff0f}.queue-cover img{width:100%;height:100%;object-fit:cover}.queue-info{display:flex;flex-direction:column;gap:2px;min-width:0}.queue-title{overflow:hidden;color:#f4f1eedb;font-size:12px;font-weight:520;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.queue-artist{overflow:hidden;color:var(--muted);font-size:10px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.queue-duration{color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap}.queue-actions{display:flex;align-items:center;opacity:0;transition:opacity .15s ease}.queue-item:hover .queue-actions,.queue-item:focus-within .queue-actions{opacity:1}.queue-remove{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;color:var(--muted)}.queue-remove:hover{color:var(--danger)}.queue-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:220px;color:var(--muted);text-align:center}.queue-empty strong{color:#f4f1eeb3;font-size:13px;font-weight:560}.queue-empty span{max-width:240px;font-size:11px;line-height:1.5;opacity:.8}.panel-pill{position:fixed;right:auto;bottom:24px;left:50%;z-index:20;display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:#0f0d0b8c;box-shadow:0 12px 34px #00000052;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transform:translate(-50%)}.panel-pill button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:30px;border-radius:999px;color:var(--muted);transition:color .16s ease,background .16s ease}.panel-pill button:hover{color:var(--foreground)}.panel-pill button.active{background:#ffffff1a;color:var(--foreground)}.panel-pill .icon{width:17px;height:17px}.visualizer{position:fixed;right:0;bottom:0;left:0;z-index:1;display:flex;align-items:flex-end;justify-content:center;gap:clamp(2px,.32vw,5px);height:clamp(110px,20vh,220px);padding:0 clamp(12px,3vw,60px);opacity:.12;pointer-events:none;mask-image:linear-gradient(180deg,transparent 0%,#000 68%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 68%);transition:opacity .5s ease}body.panel-open .visualizer{opacity:0}body.playing:not(.panel-open) .visualizer{opacity:.2}.visualizer span{width:clamp(3px,.4vw,6px);height:calc(var(--h, .4) * 100%);border-radius:999px 999px 0 0;background:linear-gradient(180deg,rgba(var(--accent-rgb),.56),rgba(var(--accent-rgb),.02));transform-origin:bottom;animation:viz 1.25s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.07s);animation-play-state:paused}body.playing .visualizer span{animation-play-state:running}@keyframes viz{0%{transform:scaleY(.35);opacity:.45}to{transform:scaleY(1);opacity:.9}}.toast{position:fixed;bottom:74px;left:50%;z-index:50;max-width:min(90vw,520px);padding:9px 14px;border:1px solid var(--border);border-radius:999px;background:#0f0d0be6;color:var(--foreground);font-size:12px;box-shadow:0 16px 44px #0000006b;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;pointer-events:none;transform:translate(-50%,10px);transition:opacity .18s ease,transform .18s ease}.toast.show{opacity:1;transform:translate(-50%)}.toast.error{border-color:#ff6b6b42}.boot,.fatal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px;background:var(--background);text-align:center}.boot p,.fatal p,.fatal strong{margin:0;color:var(--muted);font-size:12px;font-weight:450;line-height:1.6}.boot-mark{display:flex;align-items:flex-end;gap:4px;width:42px;height:38px}.boot-mark span{width:5px;border-radius:999px;background:var(--foreground);animation:boot-bars .9s ease-in-out infinite alternate}.boot-mark span:nth-child(1){height:32%;animation-delay:-.7s}.boot-mark span:nth-child(2){height:64%;animation-delay:-.35s}.boot-mark span:nth-child(3){height:46%;animation-delay:-.9s}.boot-mark span:nth-child(4){height:92%;animation-delay:-.2s}@keyframes boot-bars{0%{transform:scaleY(.5);opacity:.55}to{transform:scaleY(1);opacity:1}}.fatal{background:radial-gradient(circle at 50% 20%,rgba(255,107,107,.08),transparent 48%),var(--background)}.fatal h1{margin:0;font-size:22px;font-weight:620;letter-spacing:-.02em}body.booting .shell,body.booting .ambient,body.booting .visualizer,body.booting .panel-pill{visibility:hidden}body.ready .boot{display:none}@media (min-width: 901px){body.panel-open .stage{padding:0}body.panel-open .side-panel{order:1;flex:1 1 auto;width:100%;height:auto;min-height:0;padding:clamp(18px,3.6vh,44px) clamp(20px,4vw,64px) 0}body.panel-open .side-panel:before,body.panel-open .side-panel:after{display:none}body.panel-open .lyrics-scroll{max-width:680px;margin:0 auto;padding:14vh 0 12vh;text-align:center;mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 84%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 84%,transparent 100%)}body.panel-open .view{flex:1 1 auto;height:auto;min-height:0}body.panel-open .lyric-line,body.panel-open .lyric-line.active{margin-bottom:clamp(12px,1.9vh,22px);transform:none;transform-origin:center}body.panel-open .lyric-break{justify-content:center}body.panel-open .lyric-romanized,body.panel-open .lyric-secondary{text-align:center}body.panel-open .queue-scroll{max-width:560px;margin:0 auto;padding:8vh 0 14vh;mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 90%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 90%,transparent 100%)}body.panel-open .panel-pill{position:static;order:2;flex:0 0 auto;align-self:center;margin:0 auto 10px;transform:none}body.panel-open .now{order:3;flex:0 0 auto;align-self:center;flex-direction:row;align-items:center;justify-content:flex-start;gap:clamp(12px,1.4vw,18px);width:min(760px,calc(100% - 40px));min-height:64px;margin:0 auto clamp(16px,2.4vh,26px);padding:10px 16px 10px 12px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:#12100eb8;box-shadow:0 22px 60px #00000080,0 2px 10px #00000047,inset 0 1px #ffffff0d;-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px)}body.panel-open .cover-frame{width:48px;border-radius:10px;box-shadow:0 0 0 1px #ffffff12,0 8px 20px #00000073}body.panel-open .cover-frame:before{display:none}body.panel-open .meta{flex:1 1 auto;align-items:flex-start;gap:2px;width:auto;text-align:left}body.panel-open .title-row{justify-content:flex-start}body.panel-open .title-row h1{font-size:14px;font-weight:600}body.panel-open .meta>p{font-size:11px;text-align:left}body.panel-open .favorite-button{width:22px;height:22px}body.panel-open .controls{flex:0 1 auto;width:min(32vw,330px);margin:0 0 0 auto;gap:2px}body.panel-open .seek{font-size:9px;gap:6px}body.panel-open .transport{gap:clamp(10px,1vw,16px);min-height:30px}body.panel-open .volume-popover{bottom:calc(100% + 10px)}}@media (max-width: 900px){.stage,body.panel-open .stage{padding:16px 16px 72px}.side-panel{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;padding:7vh 7vw 10vh;background:#090807f2;-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px)}body:not(.panel-open) .side-panel{display:none}body.panel-open .now{visibility:hidden}.cover-frame{width:clamp(180px,min(40vh,62vw),380px)}.lyrics-scroll{padding-top:9vh;padding-bottom:14vh;max-width:100%}.queue-scroll{padding-top:8vh;max-width:100%}}@media (max-width: 560px){.title-row h1{font-size:19px}.meta>p{font-size:12px}.transport{gap:11px}.icon-button{width:24px;height:24px}.play-button{width:28px;height:28px}.panel-pill{bottom:18px}}@media (max-height: 680px){.stage{padding-top:14px;padding-bottom:62px}.cover-frame{width:clamp(160px,36vh,320px)}.now{gap:8px}.title-row h1{font-size:19px}.controls{margin-top:2px}.lyrics-scroll{padding-top:14vh;padding-bottom:18vh}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}@media (max-width: 700px),(max-height: 420px){.panel-pill{display:none}.stage,body.panel-open .stage{padding:8px 12px 14px}.side-panel{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;padding:0;background:#090807f7;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}body:not(.panel-open) .side-panel{display:none}body.panel-open .now{visibility:hidden}.lyrics-scroll{width:100%;max-width:100%;padding:30vh 18px;text-align:center}.lyric-line,.lyric-line.active{font-size:clamp(15px,4vw,19px);margin-bottom:11px;transform:none;text-align:center}.lyric-line.active{font-size:clamp(17px,4.7vw,22px)}.lyric-romanized,.lyric-secondary{text-align:center}.lyric-break{justify-content:center;gap:8px;margin-bottom:12px}.break-note{width:16px;height:16px}.queue-scroll{max-width:100%;padding:16vh 10px 18vh}.queue-current,.queue-item{grid-template-columns:34px minmax(0,1fr) auto auto;gap:7px;padding:6px}.queue-cover{width:34px;height:34px}.now{gap:5px}.cover-frame{width:min(38vh,54vw,190px)}.title-row h1{font-size:clamp(15px,4vw,18px)}.meta>p{font-size:10px}.favorite-button{width:20px;height:20px}.controls{width:min(100%,280px);gap:3px;margin-top:1px}.seek{grid-template-columns:28px minmax(0,1fr) 28px;gap:5px;font-size:8px}.transport{gap:9px;min-height:26px}.icon-button{width:21px;height:21px}.icon-button .icon{width:14px;height:14px}.play-button{width:25px;height:25px}.play-button .icon{width:17px;height:17px}.volume-popover{width:112px;padding:7px 9px}.visualizer{display:none}}