@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@500;700&display=swap');:root{--orange:#ff4f24;--paper:#eee9dc;--ink:#171512;--coal:#24211d;--line:#655e52;--mono:'IBM Plex Mono',monospace}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--paper);color:var(--ink);font-family:Arial,sans-serif}button,input,select{font:inherit}button{min-height:44px;border:2px solid var(--ink);background:transparent;color:var(--ink);padding:.65rem .8rem;font:700 .68rem var(--mono);cursor:pointer}button:hover,button:focus-visible{background:var(--ink);color:var(--paper)}button:disabled{opacity:.35}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #2470ff;outline-offset:2px}main{height:100vh;display:grid;grid-template-rows:68px minmax(0,1fr);overflow:hidden}header{background:var(--orange);display:grid;grid-template-columns:250px 1fr auto;align-items:center;padding:0 20px;border-bottom:3px solid var(--ink);gap:20px}.brand{font:normal 1.4rem 'Archivo Black';letter-spacing:-.06em;color:var(--ink);text-decoration:none}header>p{font:700 .65rem var(--mono);letter-spacing:.16em}.transport{display:flex;gap:8px}.transport button{min-width:90px}.studio{display:grid;grid-template-columns:minmax(0,1fr) 380px;min-height:0}.stage{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:26px 30px 20px;border-right:3px solid var(--ink);background:var(--paper)}.stage-head{display:flex;justify-content:space-between;align-items:end;padding-bottom:18px}.stage-head small{font:700 .62rem var(--mono);letter-spacing:.15em}.stage h1{font:normal clamp(2.5rem,5vw,6.2rem)/.82 'Archivo Black';letter-spacing:-.065em;text-transform:uppercase;margin:.35rem 0 0}.readout{background:var(--ink);color:var(--paper);padding:14px;text-align:right;font-family:var(--mono);min-width:150px}.readout b,.readout span{display:block}.readout b{color:var(--orange);font-size:.75rem}.readout span{font-size:.65rem;margin-top:5px}.fault-wrap{position:relative;min-height:0;border:3px solid var(--ink);background:var(--coal);overflow:hidden}.fault-wrap:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 65%,rgba(255,79,36,.08))}canvas{width:100%;height:100%;display:block;touch-action:none}.axis{position:absolute;left:18px;right:18px;bottom:10px;display:flex;justify-content:space-between;color:#aea798;font:700 .57rem var(--mono);pointer-events:none}.stage-foot{display:flex;justify-content:space-between;gap:20px;align-items:center;padding-top:14px}.stage-foot p{margin:0;max-width:680px;font:500 .68rem/1.45 var(--mono);text-transform:uppercase}.rack{background:#d7d0c0;overflow:auto}.rack section{padding:22px;border-bottom:2px solid var(--ink)}h2{font:700 .65rem var(--mono);letter-spacing:.15em;margin:0 0 15px}.presets,.recipe{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.presets button{padding:.5rem;font-size:.57rem}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.control-grid label{display:grid;gap:8px;font:700 .58rem var(--mono)}select{height:44px;border:2px solid var(--ink);background:var(--paper);padding:0 8px}input[type=range]{width:100%;accent-color:var(--orange)}output{color:#534d44}.output .primary{width:100%;background:var(--orange);font-size:.75rem}.output .primary:hover{background:var(--ink)}.recipe{grid-template-columns:1fr 1fr;margin-top:8px}.file{min-height:44px;border:2px solid var(--ink);display:grid;place-items:center;font:700 .62rem var(--mono);cursor:pointer}.file input{display:none}.output p{font:500 .58rem/1.5 var(--mono);margin:12px 0 0}.mobile-rack{display:none}
@media(max-width:800px){main{height:auto;min-height:100vh;display:block;overflow:visible}header{position:sticky;top:0;z-index:10;height:62px;grid-template-columns:1fr auto;padding:0 10px}.brand{font-size:1rem}header>p{display:none}.transport{gap:4px}.transport button{min-width:68px;padding:.4rem;font-size:.57rem}.studio{display:block}.stage{border:0;padding:18px 12px 12px;min-height:660px;grid-template-rows:auto 390px auto}.stage-head{align-items:start}.stage h1{font-size:2.65rem}.readout{min-width:104px;padding:10px}.fault-wrap{border-width:2px}.stage-foot{align-items:stretch;flex-direction:column}.stage-foot button{width:100%}.rack{overflow:visible;border-top:3px solid var(--ink)}.mobile-rack{position:sticky;top:62px;z-index:9;background:#d7d0c0;display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:2px solid var(--ink);font:700 .62rem var(--mono)}#rack-body{display:none}#rack-body.open{display:block}.rack section{padding:20px 14px}.control-grid{gap:14px}.presets button{font-size:.52rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}