@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;600&display=swap');
:root{--ink:#0b0b0a;--paper:#d9d3c5;--hot:#ff4d19;--acid:#d7ff3f;--line:#3a3934;--muted:#8c897f;--ui:system-ui,-apple-system,sans-serif;--mono:'IBM Plex Mono',monospace}
*{box-sizing:border-box}html,body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--ui);min-height:100%;overflow-x:hidden}button,select,input{font:inherit}button,select,input[type=number]{border:1px solid var(--line);background:#11110f;color:var(--paper);border-radius:0}button{min-height:44px;cursor:pointer}button:hover,button:focus-visible{border-color:var(--acid);color:var(--acid);outline:none}header{height:66px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr auto;align-items:center;padding:0 18px;gap:18px}.brand{font:26px 'Archivo Black',sans-serif;color:var(--paper);text-decoration:none;letter-spacing:-.05em}.brand span{color:var(--hot);font:11px var(--mono);letter-spacing:0;margin-left:7px}header p{margin:0;text-align:center;color:var(--muted);font:11px var(--mono);text-transform:uppercase;letter-spacing:.15em}.transport{display:flex;align-items:center;gap:6px}.transport button{padding:0 14px;font:600 11px var(--mono)}.transport .play{background:var(--hot);color:var(--ink);border-color:var(--hot)}.tempo-quick{display:grid;grid-template-columns:auto 58px;align-items:center;gap:6px;color:var(--muted);font:9px var(--mono)}.tempo-quick input{height:44px;text-align:center;padding:0 4px}#status{width:58px;text-align:right;color:var(--acid);font:10px var(--mono)}
main{height:calc(100vh - 66px);display:grid;grid-template-columns:minmax(0,1fr) 405px}.stage{min-width:0;padding:24px 26px 18px;display:grid;grid-template-rows:auto minmax(300px,1fr) 150px auto;gap:10px;border-right:1px solid var(--line)}.stage-head{display:flex;justify-content:space-between;align-items:end}.eyebrow{font:10px var(--mono);letter-spacing:.18em;color:var(--hot)}h1{font:clamp(34px,4vw,66px) 'Archivo Black',sans-serif;letter-spacing:-.055em;line-height:.9;margin:7px 0 0;text-transform:uppercase}.readout{text-align:right;display:grid;gap:5px}.readout b{font:18px var(--mono);color:var(--acid)}.readout span{font:10px var(--mono);color:var(--muted)}
.sequence-scroll{min-width:0;min-height:0;overflow-x:auto;overflow-y:hidden;border:1px solid var(--line);background:#0e0e0c;overscroll-behavior-x:contain;scrollbar-color:var(--hot) #161613;scrollbar-width:thin}.matrix-shell{height:calc(100% - 54px);min-height:245px;display:grid;grid-template-columns:34px minmax(680px,1fr);min-width:714px;width:100%;background:#0e0e0c}.degree-labels{display:grid;grid-template-rows:repeat(7,1fr);position:sticky;left:0;z-index:3;background:var(--ink);border-right:1px solid var(--line)}.degree-labels span{display:grid;place-items:center;font:9px var(--mono);color:var(--muted)}.matrix{display:grid;grid-template-columns:repeat(16,minmax(40px,1fr));grid-template-rows:repeat(7,1fr)}.pitch{min-height:30px;border:0;border-right:1px solid #24241f;border-bottom:1px solid #24241f;background:transparent;position:relative}.pitch::before{content:'';position:absolute;inset:30%;border:1px solid #303029;transform:rotate(45deg)}.pitch.active{background:var(--hot);color:var(--ink)}.pitch.active::before{inset:18%;border:2px solid var(--ink);background:rgba(0,0,0,.12)}.pitch.playing{box-shadow:inset 0 0 0 3px var(--acid)}.pitch.outside{opacity:.16;pointer-events:none}.step-tools{display:grid;grid-template-columns:repeat(16,minmax(42.5px,1fr));min-width:714px;width:100%;height:54px;padding-left:34px;border-top:1px solid var(--line)}.step-cell{display:grid;grid-template-columns:1fr 1fr;border-right:1px solid var(--line)}.step-cell button{padding:0;min-height:35px;border:0;font:9px var(--mono);color:#57564f}.step-cell button.on{color:var(--acid);background:#20231a}.step-cell b{grid-column:1/-1;text-align:center;color:var(--muted);font:8px var(--mono);font-weight:400}.scope-wrap{position:relative;border:1px solid var(--line);min-height:0;background:var(--paper)}#scope{display:block;width:100%;height:100%}.scope-label{position:absolute;top:8px;left:10px;color:var(--ink);font:9px var(--mono)}.hint{font:10px var(--mono);color:var(--muted);margin:0}
.rack{min-height:0;overflow-y:auto;background:#10100e}.rack>section,.rack>details{border-bottom:1px solid var(--line);padding:16px 18px}.jobs{padding-top:20px!important}.job-buttons{display:grid;grid-template-columns:repeat(3,1fr);margin-top:10px}.job-buttons button{font:600 10px var(--mono);line-height:1.2;text-align:left;padding:10px;border-right:0}.job-buttons button:last-child{border-right:1px solid var(--line)}.job-buttons button.selected{background:var(--acid);color:var(--ink)}.job-buttons small{font-size:8px;color:var(--muted)}details summary{list-style:none;cursor:pointer;font:600 11px var(--mono);letter-spacing:.1em}summary::-webkit-details-marker{display:none}summary::after{content:'+';float:right;color:var(--hot)}details[open] summary::after{content:'−'}summary span{color:var(--muted);font-size:8px;letter-spacing:0;float:right;margin:2px 20px 0 0}.fields{display:grid;gap:8px;margin-top:14px}.fields.three{grid-template-columns:repeat(3,1fr)}.fields.two{grid-template-columns:repeat(2,1fr)}label{font:9px var(--mono);color:var(--muted);display:grid;gap:6px}select,input[type=number]{min-width:0;width:100%;height:40px;padding:0 8px;color:var(--paper);font:11px var(--mono)}.sliders{display:grid;gap:12px;margin-top:14px}.sliders label span{display:flex;justify-content:space-between}.sliders output{color:var(--acid)}input[type=range]{appearance:none;width:100%;height:20px;background:transparent}input[type=range]::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,var(--hot) 0,var(--hot) var(--fill),var(--line) var(--fill))}input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:20px;background:var(--paper);margin-top:-8px;border:0}.export-row{display:grid;grid-template-columns:1fr auto;gap:8px}.export-row button{font:600 11px var(--mono);padding:0 14px}.export-row .export{background:var(--hot);border-color:var(--hot);color:var(--ink)}#export-status{grid-column:1/-1;font:9px var(--mono);color:var(--muted)}
@media(max-width:800px){body{padding-bottom:62px}header{height:58px;grid-template-columns:1fr;padding:0 12px}header p{display:none}.transport{position:fixed;z-index:20;left:0;right:0;bottom:0;height:62px;padding:8px 12px;background:rgba(11,11,10,.96);border-top:1px solid var(--hot);display:grid;grid-template-columns:minmax(86px,1fr) 50px 82px 48px;backdrop-filter:blur(10px)}.transport #status{display:block;width:auto;text-align:center}.transport button{padding:0 10px}.tempo-quick{grid-template-columns:24px 54px;gap:4px}.tempo-quick input{width:54px;height:44px}.brand{font-size:22px}main{height:auto;display:block}.stage{height:auto;min-height:750px;padding:18px 12px;grid-template-rows:auto 384px 130px auto;border-right:0}.stage-head{align-items:start}.readout{padding-top:4px}.readout b{font-size:12px}.readout span{font-size:8px}h1{font-size:39px;max-width:230px}.sequence-scroll{width:100%;touch-action:pan-x pan-y}.matrix-shell{grid-template-columns:30px 680px;width:710px;height:330px}.step-tools{padding-left:30px;width:710px}.rack{overflow:visible;border-top:4px solid var(--hot)}.rack>section,.rack>details{padding:16px 12px}.rack details:not([open]){padding-block:18px}.fields.three{grid-template-columns:repeat(3,minmax(0,1fr))}.hint{line-height:1.5;padding-bottom:8px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}