:root{--ink:#0b0c0c;--paper:#e7e3da;--acid:#d7ff39;--rust:#ff4f2e;--line:#41423e;--muted:#94958e}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);color:var(--paper);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}button,input,select{font:inherit}button{min-height:44px;border:1px solid var(--line);background:#151616;color:var(--paper);cursor:pointer;padding:.7rem 1rem}button:hover,button:focus-visible{border-color:var(--acid);color:var(--acid);outline:2px solid transparent}.primary,.export{background:var(--acid);color:var(--ink);border-color:var(--acid);font-weight:600}.primary:hover,.export:hover{background:var(--rust);color:var(--ink);border-color:var(--rust)}header{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:stretch;justify-content:space-between}.brand{display:flex;align-items:center}.mark{height:100%;width:76px;display:grid;place-items:center;background:var(--rust);color:var(--ink);font-weight:600}.brand h1{font:900 clamp(1.5rem,3vw,2.8rem)/1 Arial Black,Arial,sans-serif;margin:0 1rem;letter-spacing:-.055em}.brand p{color:var(--muted);font-size:.7rem}.transport{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem}.transport label{font-size:.65rem;color:var(--muted)}.transport input{width:66px;background:transparent;color:var(--paper);border:0;border-bottom:1px solid var(--line);padding:.45rem}.transport button{min-height:46px}.transport span{font-size:.72rem;color:var(--acid);padding-left:.5rem}main{height:calc(100vh - 106px);display:grid;grid-template-columns:minmax(0,1.65fr) minmax(350px,.65fr)}.stage{min-width:0;padding:1.2rem 1.4rem;display:grid;grid-template-rows:auto minmax(260px,1fr) minmax(120px,.5fr) auto;gap:1rem;background:radial-gradient(circle at 78% 10%,#24231e 0,transparent 32%)}.stage-head{display:flex;justify-content:space-between;align-items:start}.stage-head b{font-size:.78rem}.stage-head span{display:block;color:var(--muted);font-size:.65rem;margin-top:.35rem}.legend{display:flex;gap:.5rem;color:var(--muted);font-size:.55rem;align-items:center}.legend i{width:8px;height:8px;background:#5e5f58}.legend i:nth-of-type(2){background:var(--paper)}.legend i:nth-of-type(3){background:var(--rust)}.pattern-scroll{overflow-x:auto;min-height:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.pattern{height:100%;min-width:780px;display:grid;grid-template-rows:repeat(3,1fr);gap:1px}.lane{display:grid;grid-template-columns:82px repeat(16,1fr);align-items:stretch;border-bottom:1px solid #2e2f2c}.lane-name{writing-mode:vertical-rl;transform:rotate(180deg);display:flex;justify-content:center;align-items:center;font:bold .66rem 'IBM Plex Mono';letter-spacing:.18em;color:var(--muted)}.step{position:relative;min-width:40px;border:0;border-left:1px solid #262725;background:transparent;padding:0}.step::after{content:attr(data-step);position:absolute;bottom:.35rem;left:.35rem;font-size:.5rem;color:#5f605b}.step[data-level="1"]{background:linear-gradient(0deg,#5c5d57 20%,transparent 20%)}.step[data-level="2"]{background:linear-gradient(0deg,var(--paper) 56%,transparent 56%)}.step[data-level="3"]{background:linear-gradient(0deg,var(--rust) 88%,transparent 88%)}.step.active{box-shadow:inset 3px 0 var(--acid)}.step:focus-visible{outline:2px solid var(--acid);outline-offset:-2px}.wave-wrap{position:relative;border:1px solid var(--line);min-height:100px;overflow:hidden}canvas{width:100%;height:100%;display:block}.wave-label{position:absolute;inset:auto .8rem .65rem .8rem;display:flex;justify-content:space-between;font-size:.55rem;color:var(--muted)}.wave-label strong{color:var(--acid)}.jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.rack{min-height:0;overflow:auto;border-left:1px solid var(--line);background:#111212}details{border-bottom:1px solid var(--line)}summary{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;cursor:pointer;font-size:.72rem;font-weight:600;list-style:none}summary span{color:var(--rust)}.voice{padding:.8rem 1rem 1rem;border-top:1px solid #242522}.voice-head{display:grid;grid-template-columns:1fr 110px 44px;align-items:center;gap:.5rem;margin-bottom:.7rem}.voice-head strong{font-size:.74rem;text-transform:uppercase}.voice select{background:var(--ink);color:var(--paper);border:1px solid var(--line);height:38px;padding:0 .5rem}.mute{padding:0;min-height:38px;height:38px;font-size:.58rem}.mute.on{color:var(--rust);border-color:var(--rust)}.controls{display:grid;gap:.7rem}.controls label,.voice-controls label{display:grid;grid-template-columns:65px 1fr 38px;align-items:center;gap:.5rem;color:var(--muted);font-size:.6rem}.voice-controls{display:grid;gap:.4rem}.controls{padding:1rem}.controls label{grid-template-columns:90px 1fr 44px}.controls output,.voice-controls output{text-align:right;color:var(--paper)}input[type=range]{appearance:none;width:100%;height:2px;background:var(--line)}input[type=range]::-webkit-slider-thumb{appearance:none;width:17px;height:17px;background:var(--acid);border:0}.state-tools{padding:1rem;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.state-tools .export,.state-tools p{grid-column:1/-1}.state-tools p{font-size:.62rem;color:var(--muted);margin:.5rem 0}footer{height:30px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 1rem;color:#6f706a;font-size:.52rem}
@media(max-width:760px){header{height:116px;display:block}.brand{height:54px;border-bottom:1px solid var(--line)}.mark{width:54px}.brand h1{font-size:1.65rem}.brand p{display:none}.transport{height:62px;padding:.4rem .55rem}.transport button{padding:.45rem .7rem;flex:1}.transport span{display:none}main{height:calc(100vh - 146px);display:block;overflow:auto}.stage{padding:.8rem;min-height:610px;grid-template-rows:auto 280px 120px auto;gap:.75rem}.legend{display:none}.pattern-scroll{width:100%}.pattern{min-width:760px}.lane{grid-template-columns:54px repeat(16,44px)}.rack{overflow:visible;border-left:0;border-top:1px solid var(--line)}details:not([open]){display:block}.jobs{position:sticky;bottom:0;z-index:3;background:var(--ink);padding:.4rem 0}.jobs button{font-size:.58rem;padding:.4rem}.voice-head{grid-template-columns:1fr 120px 44px}footer{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}