:root{--amber:#ffb000;--dim:#7a5a10;--bg:#07090d;--panel:#0f141c;--text:#e8e2d0}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#1a1408 0,var(--bg) 60%);color:var(--text);font:16px/1.4 ui-monospace,Menlo,Consolas,monospace;min-height:100vh}
main{max-width:760px;margin:auto;padding:20px}header{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
#cover{width:220px;max-width:100%;border:1px solid var(--dim);box-shadow:0 0 30px #ffb00033}
.term{color:var(--amber);margin:0;letter-spacing:.1em;font-size:.85em}h1{margin:.2em 0;font-size:2.2em;color:#fff;text-shadow:0 0 12px #ffb00066}.artist{color:var(--amber);margin:0}.artist span{color:#999}
#player{position:sticky;top:0;z-index:5;background:var(--panel);border:1px solid var(--dim);border-radius:10px;padding:14px;margin:20px 0}
#now{display:flex;flex-direction:column}#nowKind{color:var(--amber);font-size:.75em;letter-spacing:.2em}#nowTitle{font-size:1.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#seek{width:100%;accent-color:var(--amber);margin-top:10px}.times{display:flex;justify-content:space-between;font-size:.8em;color:#aaa}
.ctrl{display:flex;justify-content:center;gap:16px;margin-top:6px}button{background:none;border:1px solid var(--amber);color:var(--amber);border-radius:50%;width:52px;height:52px;font-size:20px;cursor:pointer}#play{width:64px;height:64px;background:var(--amber);color:#000}
ol{list-style:none;padding:0;margin:0}li{display:flex;gap:12px;align-items:center;padding:11px 12px;border-bottom:1px solid #1d232d;cursor:pointer}li:hover,li:focus{background:#161c26;outline:none}
.no{color:var(--amber);min-width:3.2em}.ti{flex:1}li.on{background:#2a1f05;box-shadow:inset 3px 0 var(--amber)}
li.skit{font-size:.85em;color:#9fd8c8;background:#0b1512;border-left:2px dashed #2f6b5c}li.skit .no{color:#4fd1b0}li.skit .ti{text-transform:uppercase;letter-spacing:.06em}
li.pending{opacity:.38;cursor:default}.tag{font-size:.7em;border:1px solid #666;padding:1px 6px;border-radius:4px}
footer{margin-top:30px;color:#888;font-size:.8em}
@media(max-width:520px){header{flex-direction:column;text-align:center}#cover{width:70%}h1{font-size:1.7em}}