:root{--bg: #f5f6f8;--card: #ffffff;--fg: #15181d;--muted: #6a7280;--line: #dfe3e9;--accent: #d6291f;--accent-fg: #ffffff}@media (prefers-color-scheme: dark){:root{--bg: #111317;--card: #1a1d23;--fg: #eceef2;--muted: #8e97a6;--line: #2b303a;--accent: #ff5148;--accent-fg: #111317;color-scheme:dark}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 system-ui,sans-serif}main{max-width:860px;margin:0 auto;padding:24px 16px 48px;display:grid;gap:16px}h1{font-size:1.4rem;margin:0}h2{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px}.row{display:flex;gap:8px;flex-wrap:wrap}input[type=text]{flex:1 1 260px;min-width:0;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit}button{padding:10px 14px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--fg);font:inherit;cursor:pointer}button.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.stage{position:fixed;left:-9999px;top:0;width:320px;height:180px;pointer-events:none}.controls{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:12px}.seek{width:100%}input[type=range]{accent-color:var(--accent)}label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.9rem}.time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.9rem}.err{color:var(--accent);margin:0}ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}button:disabled{opacity:.6;cursor:default}.tracks li button{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:8px}.tracks img,.now img{width:96px;aspect-ratio:16 / 9;object-fit:cover;border-radius:6px;flex:none}.meta{display:grid;min-width:0}.title{font-weight:600;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.channel{color:var(--muted);font-size:.85rem}.label{color:var(--accent);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}.now{display:flex;gap:14px;align-items:center}.now img{width:128px}