@font-face{font-family:Satoshi;src:url('fonts/satoshi-400.woff2')}@font-face{font-family:Satoshi;src:url('fonts/satoshi-700.woff2');font-weight:700}@font-face{font-family:JB;src:url('fonts/jetbrains-mono.woff2')}
:root{--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.25rem;--text-xl:clamp(1.5rem,2.5vw,2.25rem);--s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s6:1.5rem;--s8:2rem;--s10:2.5rem;--s12:3rem;--s16:4rem;--font:Satoshi,system-ui,sans-serif;--mono:JB,monospace}
[data-theme=dark]{--bg:#0c100d;--panel:#111612;--line:#303c32;--ink:#e8ece6;--muted:#a5afa3;--accent:#8fd18a;--coral:#f29a82;--ice:#a5cbe2;--shade:#19251d}
[data-theme=light]{--bg:#f4f3ec;--panel:#fbfaf5;--line:#ced2c5;--ink:#1d221c;--muted:#596457;--accent:#28682b;--coral:#a13d29;--ice:#285e7b;--shade:#e6ebde}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:var(--text-base)/1.55 var(--font)}a{color:inherit}button,select{font:var(--text-sm) var(--font);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:0;padding:var(--s3) var(--s4);cursor:pointer;min-height:44px}button:hover,select:hover{border-color:var(--accent)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}input[type=range]{accent-color:var(--accent);cursor:pointer;min-width:0;height:32px}header{display:flex;justify-content:space-between;align-items:center;padding:var(--s4) var(--s8);border-bottom:1px solid var(--line);gap:var(--s4)}.brand{display:flex;align-items:center;gap:var(--s3);text-decoration:none;font-size:var(--text-sm)}.brand svg{color:var(--accent)}.brand b{letter-spacing:.12em}.brand span{font-family:var(--mono);color:var(--muted)}.header-right{display:flex;align-items:center;gap:var(--s4)}.preview-label,.label,.eyebrow,.live-label{font:var(--text-xs)/1.5 var(--mono);letter-spacing:.05em}.preview-label,.eyebrow{color:var(--accent)}main{max-width:1200px;margin:auto;padding:0 var(--s8)}.intro{display:flex;justify-content:space-between;align-items:end;gap:var(--s8);padding:var(--s12) 0 var(--s8)}h1{font-size:var(--text-xl);line-height:1.15;margin:var(--s3) 0 var(--s4);letter-spacing:-.02em}h2{font-size:var(--text-lg);line-height:1.3;margin:var(--s2) 0 var(--s3)}p{margin:var(--s2) 0;color:var(--muted)}.file-tag{display:flex;flex-direction:column;text-align:right;flex-shrink:0}.file-tag strong{font:700 var(--text-xl) var(--mono);margin:var(--s2) 0}.muted{color:var(--muted)}.file-tag .muted{font-size:var(--text-xs)}.notice{display:flex;align-items:center;gap:var(--s3);border-block:1px solid var(--line);padding:var(--s3) 0}.notice p{font-size:var(--text-sm)}.dot{height:6px;width:6px;flex-shrink:0;background:var(--accent)}.stats{display:grid;grid-template-columns:repeat(4,1fr);padding:var(--s8) 0}.stats>div{display:flex;flex-direction:column;padding:0 var(--s6);border-left:1px solid var(--line)}.stats>div:first-child{padding-left:0;border:0}.label{color:var(--muted)}.stats strong{font:700 var(--text-lg) var(--mono);margin:var(--s3) 0 var(--s2)}.stats small{font:var(--text-xs) var(--mono)}.stats div>span:last-child{font-size:var(--text-xs);color:var(--muted)}.player{border:1px solid var(--line);background:var(--panel)}.player-top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:var(--s4);padding-right:var(--s6)}.tabs{display:flex}.tabs button{border:0;border-right:1px solid var(--line);padding:var(--s4) var(--s6);background:transparent;font-family:var(--mono);font-size:var(--text-xs)}.tabs button[aria-selected=true]{color:var(--accent);box-shadow:inset 0 -2px var(--accent);background:var(--shade)}.live-label{color:var(--muted)}.panel-caption{padding:var(--s6) var(--s6) var(--s3)}.panel-caption p{font-size:var(--text-sm)}.current{display:flex;align-items:center;gap:var(--s6);padding:var(--s3) var(--s6);font:var(--text-xs) var(--mono);flex-wrap:wrap}.current b{font-weight:400;margin-left:var(--s2)}.coral{color:var(--coral)}.ice{color:var(--ice)}.chart-box{padding:0 var(--s4)}#chart{display:block;width:100%;height:280px}.transport{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s6);border-top:1px solid var(--line)}.primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}#timeline{flex:1}.clock{font:var(--text-xs) var(--mono);white-space:nowrap}.speed-label{display:flex;align-items:center;gap:var(--s2);font-size:var(--text-xs)}select{padding:var(--s2)}.chapter-row{display:flex;gap:var(--s2);padding:0 var(--s6) var(--s6);align-items:center;flex-wrap:wrap}.chapter-row .label{margin-right:var(--s2)}.chapter-row button{padding:var(--s2) var(--s3);font:var(--text-xs) var(--mono);min-height:36px}.audio-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--s8);padding:var(--s6)}.audio-grid p{font-size:var(--text-sm);max-width:58ch}.audio-actions{display:flex;gap:var(--s4);align-items:center;margin-top:var(--s6);flex-wrap:wrap}.volume{font-size:var(--text-xs);display:flex;align-items:center;gap:var(--s2)}.volume input{width:105px}.audio-status{font-size:var(--text-xs)!important;margin-top:var(--s3)}.audio-disclaimer{border-block:1px solid var(--line);padding:var(--s3) var(--s6);font-size:var(--text-xs);color:var(--muted)}#stage{display:block;width:100%;height:240px}.stage-key{display:flex;justify-content:center;gap:var(--s4);font-size:var(--text-xs)}.bottom{display:grid;grid-template-columns:1fr 1fr;gap:var(--s12);padding:var(--s10) 0}.bottom p{font-size:var(--text-sm);margin:var(--s3) 0}details{border-block:1px solid var(--line);padding:var(--s4) 0;font-size:var(--text-sm)}summary{cursor:pointer;color:var(--ink);min-height:28px}details p{max-width:95ch;margin:var(--s4) 0}.hash{overflow-wrap:anywhere;font:var(--text-xs) var(--mono)}footer{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;padding:var(--s8) 0;font:var(--text-xs) var(--mono);color:var(--muted)}footer a{color:var(--accent)}[hidden]{display:none!important}
@media(max-width:760px){header{padding:var(--s3) var(--s4)}main{padding:0 var(--s4)}.preview-label{display:none}.intro{padding-top:var(--s8);gap:var(--s4)}.eyebrow{letter-spacing:0}.stats{grid-template-columns:1fr 1fr;gap:var(--s6) 0}.stats>div{padding:0 var(--s4)}.stats>div:nth-child(3){padding-left:0;border:0}.player-top{padding:0;display:block}.live-label{display:none}.tabs button{flex:1;padding:var(--s4) var(--s3)}.tabs{width:100%}.current{gap:var(--s3);padding:var(--s3) var(--s4);font-size:var(--text-xs)}.current>span:first-child{width:100%}.transport{flex-wrap:wrap;padding:var(--s4)}#timeline{order:5;flex:1 0 100%}.speed-label{margin-left:auto}.clock{margin-left:auto}.panel-caption{padding:var(--s4)}.chapter-row{padding:0 var(--s4) var(--s4)}.audio-grid{grid-template-columns:1fr;gap:var(--s4);padding:var(--s4)}#stage{height:200px}.audio-disclaimer{padding:var(--s3) var(--s4)}.bottom{grid-template-columns:1fr;gap:var(--s6)}#chart{height:280px}.intro p{font-size:var(--text-sm)}.file-tag{align-self:center}.file-tag .label{font-size:var(--text-xs)}.file-tag .muted{max-width:100px}footer{font-size:var(--text-xs)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.audio-grid>*{min-width:0}.output-choice{display:flex;gap:8px;align-items:center;font-size:var(--text-xs)}.audio-actions{gap:12px}.volume input{min-height:44px}.volume output{min-width:3ch}.meter-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font:var(--text-xs) var(--mono);margin-top:20px}.meter-row meter{flex:1;min-width:80px;max-width:160px;height:16px}.meter-note{font-size:var(--text-xs)!important}.sample-player{padding:24px;border-top:1px solid var(--line)}.sample-player h3{font-size:var(--text-lg);margin:0 0 8px}.sample-player p{font-size:var(--text-sm);max-width:78ch}.sample-player audio{display:block;width:100%;max-width:520px;margin:16px 0}.sample-player details{margin-top:16px;border-bottom:0}.sample-player a{color:var(--accent)}summary,.chapter-row button{min-height:44px}.stage-key{flex-wrap:wrap}#timeline{min-height:44px}
@media(max-width:760px){.sample-player{padding:16px}.transport .clock{margin-left:0}.output-choice{flex-wrap:wrap}.audio-actions button{flex:1 1 auto}.intro{align-items:flex-start}.file-tag{flex-shrink:1;min-width:84px}.intro>div:first-child{min-width:0}}