:root{--bg:#121417;--card:#1b1e23;--ink:#eef0f2;--muted:#9aa1ab;--accent:#7fb3d5;--line:#2a2f36}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:600px;margin:0 auto;padding:40px 16px 60px}
.kicker{color:var(--accent);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px}
h1{font-size:1.8rem;line-height:1.2;margin:0 0 8px}
.sub{color:var(--muted);margin:0 0 28px}
.player{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:16px}
.player h2{font-size:1.05rem;margin:0 0 12px}
canvas{display:block;width:100%;height:90px;margin-bottom:12px}
.row{display:flex;align-items:center;gap:12px}
.btn{flex:none;width:52px;height:52px;border-radius:50%;border:0;background:var(--accent);color:#0d1114;display:grid;place-items:center;cursor:pointer}
.btn svg{width:22px;height:22px}
.track{flex:1;min-width:0}
input[type=range]{width:100%;accent-color:var(--accent);margin:0}
.time{display:flex;justify-content:space-between;color:var(--muted);font-size:.82rem;font-variant-numeric:tabular-nums;margin-top:2px}
.links a{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:12px;color:var(--ink);text-decoration:none}
.links a span{display:block;color:var(--muted);font-size:.9rem}