:root{--bg:#0a0a0a;--fg:#fff;--fg-dim:#ccc;--accent:#4af;--accent-dim:#44aaff14;--border:#282828;--error:#f44;--marker:#f80;--font:"Berkeley Mono", "JetBrains Mono", "Fira Code", "SF Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:var(--bg);height:100%;color:var(--fg);font-family:var(--font);-webkit-font-smoothing:antialiased;font-size:13px;line-height:1.6}::selection{background:var(--accent);color:var(--bg)}a{color:var(--accent);text-decoration:none}.dots:after{content:"";text-align:left;width:1.2em;animation:1.4s steps(4,end) infinite dots;display:inline-block}@keyframes dots{0%,to{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}.app-container{width:100%;max-width:880px;margin:0 auto}.box{border:1px solid var(--border);padding:1rem}.box-header{color:var(--fg-dim);text-transform:uppercase;letter-spacing:.12em;margin-bottom:.5rem;font-size:11px}input,select,textarea{outline:none}input:focus,select:focus,textarea:focus{border-color:var(--accent)!important}input::placeholder,textarea::placeholder{color:var(--fg-dim);opacity:.6}button{outline:none}button:hover{opacity:.8}button:active{opacity:.6}.player-btn{color:var(--accent);font-family:var(--font);cursor:pointer;background:linear-gradient(#1c1c1c 0%,#131313 100%);border:1px solid #2e2e2e;border-color:#3a3a3a #2e2e2e #0a0a0a;border-radius:4px;justify-content:center;align-items:center;min-width:38px;height:32px;padding:0 10px;font-size:13px;transition:transform 50ms,box-shadow 50ms,background .1s;display:inline-flex;box-shadow:inset 0 1px #ffffff0d,0 1px 2px #0009}.player-btn:hover{opacity:1;background:linear-gradient(#232323 0%,#181818 100%)}.player-btn:active{opacity:1;background:linear-gradient(#0f0f0f 0%,#161616 100%);transform:translateY(1px);box-shadow:inset 0 2px 4px #000000b3,0 0 0 1px #2e2e2e}.player-btn-primary{min-width:48px;height:38px;color:var(--bg);background:linear-gradient(#6bf 0%,#3a99e6 100%);border-color:#8cf #2a7ec0 #1d5a8c;font-size:15px;box-shadow:inset 0 1px #ffffff59,0 2px 4px #0009}.player-btn-primary:hover{background:linear-gradient(#7ac6ff 0%,#4aa6ee 100%)}.player-btn-primary:active{background:linear-gradient(#2f8ad6 0%,#4aa6ee 100%);box-shadow:inset 0 2px 4px #00000080,0 0 0 1px #2a7ec0}.player-inner{align-items:center;gap:1.25rem;max-width:880px;margin:0 auto;padding:1.25rem 1.5rem 1.5rem;display:flex}.player-artwork{border:1px solid var(--border);background:var(--bg);flex:none;width:96px;height:96px;overflow:hidden}.player-controls-row{align-items:center;gap:.6rem;margin-bottom:.75rem;display:flex}.player-title{color:var(--fg);white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;margin-left:.75rem;overflow:hidden}.player-time{color:var(--fg-dim);font-variant-numeric:tabular-nums;white-space:nowrap}.player-marker{transition:transform .1s,box-shadow .1s}.player-marker:hover{z-index:3;transform:scale(1.18);box-shadow:0 2px 8px #000c}.player-marker-group:hover .player-marker-line{opacity:.75}@media (width<=640px){.player-inner{gap:.75rem;padding:.9rem 1rem 1rem}.player-artwork{width:56px;height:56px}.player-title{margin-left:.25rem;font-size:12px}.player-time{font-size:11px}}::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:1px}@supports (padding-bottom:env(safe-area-inset-bottom)){body{padding-bottom:env(safe-area-inset-bottom)}}