:root{--bg: #08090a;--panel: #0e1011;--line: #1e2224;--line-bright: #2c3235;--text: #d8dde0;--dim: #6b7478;--accent: #b6ff3a;--accent-dim: #6f9c22;--warn: #ff5c3a;--radius: 2px;--mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--mono);font-size:13px;-webkit-font-smoothing:antialiased}body{min-height:100vh;display:flex;flex-direction:column}button,select,input{font-family:inherit;font-size:inherit;color:inherit;background:transparent;border:1px solid var(--line-bright);border-radius:var(--radius);padding:6px 10px;cursor:pointer;transition:border-color .12s,color .12s,background .12s}button:hover,select:hover,input:hover{border-color:var(--accent-dim)}button:focus-visible,select:focus-visible,input:focus-visible,.knob:focus-visible{outline:1px solid var(--accent);outline-offset:2px}button:disabled{opacity:.4;cursor:not-allowed}select{appearance:none;padding-right:22px;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 12px) 52%,calc(100% - 8px) 52%;background-size:4px 4px,4px 4px;background-repeat:no-repeat}option{background:var(--panel);color:var(--text)}header{position:sticky;top:0;z-index:20;background:#08090af0;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}.bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 16px}.brand{display:flex;align-items:baseline;gap:8px;margin-right:6px}.brand h1{margin:0;font-size:14px;letter-spacing:.22em;font-weight:600;text-transform:uppercase}.brand .ver{color:var(--dim);font-size:10px;letter-spacing:.1em}.spacer{flex:1 1 auto}.btn-primary{border-color:var(--accent-dim);color:var(--accent)}.btn-primary:hover{background:#b6ff3a14;border-color:var(--accent)}.btn-play[data-playing=true]{background:var(--accent);color:#0a0c06;border-color:var(--accent)}.field{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.field input[type=number],.field input[type=text]{width:92px;cursor:text;color:var(--text);letter-spacing:0;text-transform:none}.blurb{padding:0 16px 10px;color:var(--dim);font-size:11px;letter-spacing:.04em}.timeline{position:relative;height:26px;border-top:1px solid var(--line);background:#0b0c0d;overflow:hidden;cursor:default}.timeline .seg{position:absolute;top:0;bottom:0;border-right:1px solid var(--line);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;padding-left:6px;white-space:nowrap;overflow:hidden}.timeline .seg[data-kind=main]{background:#b6ff3a12;color:var(--accent-dim)}.timeline .seg[data-kind=break]{background:#ffffff08}.timeline .playhead{position:absolute;top:0;bottom:0;width:1px;background:var(--accent);box-shadow:0 0 6px var(--accent);transform:translate(-.5px);pointer-events:none}main{flex:1 1 auto;padding:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;align-content:start}.panel{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);padding:10px 12px 12px}.panel h2{margin:0 0 10px;font-size:10px;letter-spacing:.28em;font-weight:600;color:var(--dim);text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:7px}.knobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:10px 6px}.knob{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:ns-resize;user-select:none;touch-action:none;border:0;padding:0;background:none;border-radius:var(--radius)}.knob svg{display:block;overflow:visible}.knob .track{stroke:var(--line-bright);stroke-width:3;fill:none;stroke-linecap:round}.knob .value-arc{stroke:var(--accent);stroke-width:3;fill:none;stroke-linecap:round}.knob .pointer{stroke:var(--text);stroke-width:1.5;stroke-linecap:round}.knob .cap{fill:#15181a;stroke:var(--line-bright);stroke-width:1}.knob .label{font-size:9px;letter-spacing:.06em;color:var(--dim);text-transform:uppercase;text-align:center;line-height:1.15}.knob .val{font-size:9px;color:var(--text);text-align:center;line-height:1.1;min-height:11px}.knob:hover .label,.knob.active .label{color:var(--text)}.knob.active .value-arc{filter:drop-shadow(0 0 4px var(--accent))}.enumctl{grid-column:span 2;display:flex;flex-direction:column;gap:3px}.enumctl label{font-size:9px;letter-spacing:.06em;color:var(--dim);text-transform:uppercase}.enumctl select{padding:4px 20px 4px 6px;font-size:11px;width:100%}footer{border-top:1px solid var(--line);padding:8px 16px 14px;color:var(--dim);font-size:11px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}footer a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--line-bright)}footer a:hover{color:var(--accent)}#status[data-busy=true]{color:var(--accent)}#status[data-error=true]{color:var(--warn)}.overlay{position:fixed;inset:0;background:#060708db;display:flex;align-items:center;justify-content:center;z-index:50}.overlay[hidden]{display:none}.overlay .box{border:1px solid var(--line-bright);background:var(--panel);padding:22px 28px;text-align:center;min-width:260px}.overlay .box p{margin:0 0 12px;letter-spacing:.1em;text-transform:uppercase;font-size:11px;color:var(--dim)}.progress{height:3px;background:var(--line);overflow:hidden}.progress>div{height:100%;width:0;background:var(--accent);transition:width .2s linear}@media(max-width:640px){.bar{padding:8px 10px;gap:8px}main{padding:10px;grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
