:root{color-scheme:dark;--line: rgba(255, 255, 255, .08);--text: #dae2fd;--muted: #99a4c9;--accent: #4cd7f6;--bg: rgba(11, 19, 38, .94)}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--text);font-family:Inter,sans-serif}.material-symbols-outlined{font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24}.material-symbols-outlined.filled{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}.player-root{height:100%;display:grid;grid-template-columns:minmax(180px,320px) 1fr minmax(140px,220px);align-items:center;gap:16px;padding:10px 20px;border-top:1px solid var(--line)}.footer-track{display:flex;align-items:center;gap:12px;min-width:0}.thumb{--thumb-bg: radial-gradient(circle at 30% 20%, #7b8aa0, #273b53 65%, #111827);width:56px;height:56px;border-radius:10px;background:var(--thumb-bg);background-position:center;background-repeat:no-repeat;background-size:cover;flex:0 0 auto}.footer-track-text{min-width:0}.track-title,.track-meta,.status{margin:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.track-title{font-family:Geist,sans-serif;font-weight:600;font-size:.95rem}.track-meta{color:var(--muted);font-size:.76rem;margin-top:2px}.status{color:#99a4c999;font-size:.7rem;margin-top:3px}.footer-center{display:grid;justify-items:center;gap:6px}.controls{display:flex;align-items:center;gap:14px}.controls button{border:0;background:transparent;color:var(--muted);width:36px;height:36px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.controls button:hover{color:var(--text)}#prevBtn,#nextBtn{width:40px;height:40px}#prevBtn .material-symbols-outlined,#nextBtn .material-symbols-outlined{font-size:32px}#playBtn{background:#dae2fd;color:#0b1326;width:40px;height:40px;border-radius:12px}#playBtn:hover{background:#fff}#playBtn .material-symbols-outlined{font-size:24px}.seek{width:min(560px,100%);display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px}.time{color:var(--muted);font-size:.72rem;text-align:center;font-variant-numeric:tabular-nums}#seekBar{width:100%;height:4px;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;--seek-progress: 0%}#seekBar::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--seek-progress),#2d3449 var(--seek-progress),#2d3449 100%)}#seekBar::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;margin-top:-4px;border-radius:999px;background:#fff;opacity:0;transition:opacity .14s ease}#seekWrap:hover #seekBar::-webkit-slider-thumb{opacity:1}#seekBar::-moz-range-track{height:4px;border-radius:999px;background:#2d3449}#seekBar::-moz-range-progress{height:4px;border-radius:999px;background:var(--accent)}#seekBar::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:999px;background:#fff}.seek.disabled{opacity:.55}.footer-side{min-width:0;display:flex;align-items:center;justify-content:flex-end}.volume-wrap{display:flex;align-items:center;gap:8px;color:var(--muted)}.volume-range{width:96px;height:4px;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;--volume-progress: 80%}.volume-range::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(to right,#99a4c9 0%,#99a4c9 var(--volume-progress),#2d3449 var(--volume-progress),#2d3449 100%)}.volume-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:10px;height:10px;margin-top:-3px;border-radius:999px;background:#fff;opacity:0;transition:opacity .14s ease}.volume-wrap:hover .volume-range::-webkit-slider-thumb{opacity:1}.volume-range::-moz-range-track{height:4px;border-radius:999px;background:#2d3449}.volume-range::-moz-range-progress{height:4px;border-radius:999px;background:#99a4c9}.volume-range::-moz-range-thumb{width:10px;height:10px;border-radius:999px;border:0;background:#fff}@media (max-width: 860px){.player-root{grid-template-columns:1fr;gap:8px;padding:8px 12px}.footer-side{justify-content:flex-start}.seek{width:100%}}