:root{--slush: #c589f9;--slush-tint: rgba(197, 137, 249, .15);--slush-ink: #c589f9;--button: #9333ea;--button-hover: #7e22ce;--on-button: #ffffff;--link: #c589f9;--background: #0a0a0a;--foreground: #ededed;--surface: oklch(20.5% 0 0);--surface-raised: oklch(26.9% 0 0);--surface-hover: oklch(27.8% .033 256.848);--row-hover: oklch(27.8% .033 256.848 / .5);--border: oklch(27.8% .033 256.848);--border-subtle: oklch(27.8% .033 256.848);--ink-strong: oklch(96.7% .003 264.542);--ink-title: oklch(92.8% .006 264.531);--ink: oklch(87.2% .01 258.338);--ink-secondary: oklch(87.2% .01 258.338);--ink-muted: oklch(70.7% .022 261.325);--ink-faint: oklch(55.1% .027 264.364);--danger: oklch(70.4% .191 22.216);--font-sans: Geist, "Geist Fallback", ui-sans-serif, system-ui, sans-serif;--space-1: 6px;--space-2: 12px;--space-3: 18px;--space-4: 24px;--space-8: 48px;--radius-sm: 6px;--radius-lg: 12px;--radius-full: 9999px;--shadow-float: 0 15px 22px -5px rgb(0 0 0 / .1), 0 6px 9px -6px rgb(0 0 0 / .1);--size-icon-button: 42px;--size-icon: 24px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--background);color:var(--foreground);font-family:var(--font-sans);font-size:21px;line-height:30px;-webkit-font-smoothing:antialiased}button{font-family:inherit;color:inherit;cursor:pointer}.app{height:100%;display:flex;flex-direction:column}.app-header{padding:var(--space-4) var(--space-4) var(--space-2);border-bottom:1.5px solid var(--border);flex:0 0 auto}.app-title{font-size:27px;line-height:42px;font-weight:600;color:var(--ink-strong);margin:0}.track-list{flex:1 1 auto;overflow-y:auto;padding:var(--space-2) 0}.track-row{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);background:transparent;border:none;border-radius:var(--radius-sm);text-align:left}.track-row:hover{background:var(--surface-hover)}.track-row.is-active{background:var(--slush-tint)}.track-row.is-active .track-title{color:var(--slush-ink)}.track-index{width:60px;flex:0 0 auto;font-size:36px;line-height:48px;color:var(--ink-faint);text-align:right}.track-info{flex:1 1 auto;min-width:0}.track-title{font-size:21px;line-height:30px;font-weight:600;color:var(--ink-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-artist{font-size:18px;line-height:24px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-duration{flex:0 0 auto;font-size:18px;line-height:24px;color:var(--ink-faint)}.track-row .track-title{font-size:42px;line-height:54px}.track-row .track-artist,.track-row .track-duration{font-size:36px;line-height:48px}.track-list-empty,.track-list-loading{padding:var(--space-4);color:var(--ink-muted);font-size:18px}.player-bar{flex:0 0 auto;display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,2fr) minmax(240px,1fr);align-items:center;column-gap:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--surface-raised);border-top:1.5px solid var(--border-subtle);box-shadow:var(--shadow-float)}.player-left{min-width:0}.player-center{display:flex;flex-direction:column;gap:var(--space-2);width:100%;max-width:960px;margin:0 auto}.player-right{display:flex;justify-content:flex-end}.player-now-playing{min-width:0}.player-now-playing .track-title{font-size:21px}.player-now-playing .track-artist{font-size:18px}.player-controls{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:var(--size-icon-button);height:var(--size-icon-button);border-radius:var(--radius-full);background:transparent;border:none;color:var(--ink-muted)}.icon-button:hover{background:var(--surface-hover);color:var(--ink)}.icon-button:disabled{opacity:.5;cursor:default;pointer-events:none}.icon-button svg{width:var(--size-icon);height:var(--size-icon)}.play-button{width:54px;height:54px;background:var(--button);color:var(--on-button)}.play-button:hover{background:var(--button-hover);color:var(--on-button)}.play-button svg{width:27px;height:27px}.player-seek{flex:1 1 auto;display:flex;align-items:center;gap:var(--space-2);min-width:0}.player-time{font-size:18px;color:var(--ink-faint);width:57px;flex:0 0 auto}.player-time.is-end{text-align:right}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--radius-full);background:var(--border-control, oklch(37.3% .034 259.733));outline:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:var(--radius-full);background:var(--slush);cursor:pointer}.slider::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:var(--radius-full);background:var(--slush);cursor:pointer}.player-volume{display:flex;align-items:center;gap:var(--space-2);flex:0 0 auto;width:180px}.player-volume .slider{width:120px}