:root{--bg:#080808;--panel:#11110f;--line:#34332e;--ink:#edeadf;--muted:#8c897f;--acid:#dcff39;--rust:#ff5733;--cyan:#7ee7ee;--gap:14px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg)}button,input{font:inherit}button{min-height:44px;border:1px solid var(--line);border-radius:0;color:var(--ink);background:#151513;cursor:pointer;font-size:11px;font-weight:750;letter-spacing:.08em}button:hover,button:focus-visible{border-color:var(--acid);outline:1px solid var(--acid);outline-offset:2px}.mast{height:76px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 20px;gap:20px}.brand{display:flex;align-items:center;gap:12px}.mark{font-size:34px;color:var(--acid);line-height:1}.brand h1{font-size:18px;letter-spacing:.18em;margin:0}.brand p{font:10px ui-monospace,monospace;color:var(--muted);margin:4px 0 0;text-transform:uppercase}.transport{display:flex;align-items:center;gap:7px}.transport button{width:66px}.primary{background:var(--acid);color:#0a0a08;border-color:var(--acid)}.tempo{height:44px;border:1px solid var(--line);display:flex;align-items:center;padding-left:10px;font:10px ui-monospace,monospace;color:var(--muted)}.tempo input{width:54px;height:42px;border:0;background:transparent;color:var(--ink);text-align:center;font-weight:800}.export{justify-self:end;width:130px;border-color:var(--rust);color:#ff9b81}.workspace{height:calc(100vh - 112px);display:grid;grid-template-columns:minmax(270px,22vw) minmax(500px,1fr) minmax(280px,23vw);gap:1px;background:var(--line)}.panel,.machine{min-width:0;background:var(--panel);padding:18px;overflow-y:auto}.machine{display:flex;flex-direction:column;padding:18px 22px;background:#0b0b0a;overflow:hidden}.panel-head{height:30px;display:flex;justify-content:space-between;align-items:start;font:700 10px ui-monospace,monospace;letter-spacing:.12em;color:var(--muted)}.status{color:var(--acid)}.source-orbit{min-height:250px;position:relative;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at center,#1b1b16 0,#0b0b0a 62%)}.source-orbit:before,.source-orbit:after{content:"";position:absolute;border:1px solid #343a22;border-radius:50%;width:160px;height:160px}.source-orbit:after{width:220px;height:220px;border-style:dashed}.source-orbit canvas{position:absolute;inset:0;width:100%;height:100%}.source-orbit span{z-index:2;font:700 10px ui-monospace,monospace;color:var(--acid);letter-spacing:.15em}.load-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.file-button{min-height:44px;display:grid;place-items:center;border:1px solid var(--acid);font-size:11px;font-weight:750;letter-spacing:.08em;color:var(--acid);cursor:pointer}#audio-file{position:absolute;opacity:0;pointer-events:none}.hint{color:var(--muted);font-size:11px;line-height:1.5;margin:10px 0 16px}.recipes{display:grid;gap:7px}.recipes button{text-align:left;padding:0 12px}.legend{height:42px;display:flex;gap:18px;align-items:center;font:9px ui-monospace,monospace;color:var(--muted)}.legend span{display:flex;align-items:center;gap:5px}.legend i{width:8px;height:8px;display:inline-block}.l-cut{background:#242421}.l-ghost{background:#5b5a53}.l-open{background:var(--acid)}.l-ratchet{background:var(--rust)}.steps{flex:1;min-height:280px;display:grid;grid-template-columns:repeat(16,minmax(24px,1fr));gap:5px;align-items:stretch;padding-top:14px}.step{position:relative;min-width:0;height:100%;min-height:240px;padding:0;border:0;border-top:1px solid var(--line);background:#181816;overflow:hidden;touch-action:none}.step:before{content:"";position:absolute;inset:auto 0 0;height:var(--height);background:var(--color);transition:height .16s ease,background .16s ease;clip-path:polygon(50% 0,100% 8%,83% 100%,12% 100%,0 13%)}.step:after{content:attr(data-index);position:absolute;bottom:8px;left:0;right:0;text-align:center;color:#070707;font:800 9px ui-monospace,monospace;z-index:2}.step[data-state="0"]{--height:18%;--color:#282825}.step[data-state="1"]{--height:42%;--color:#66645c}.step[data-state="2"]{--height:82%;--color:var(--acid)}.step[data-state="3"]{--height:64%;--color:repeating-linear-gradient(90deg,var(--rust) 0 24%,#39130b 24% 34%)}.step.current{filter:brightness(1.45)}.step.current:before{box-shadow:0 -12px 30px color-mix(in srgb,var(--acid) 35%,transparent)}.playline{height:3px;background:#242421;position:relative;margin-top:10px}.playline span{display:block;width:6.25%;height:100%;background:var(--acid);transform:translate(0)}.instruction{font:10px ui-monospace,monospace;color:var(--muted);margin:14px 0 0}.text-button{border:0;min-height:30px;background:transparent;color:var(--muted)}.control-group{margin:18px 0}.group-label,.range span{display:flex;justify-content:space-between;font:700 10px ui-monospace,monospace;color:var(--muted);letter-spacing:.08em}.segmented{display:grid;grid-template-columns:repeat(3,1fr);margin-top:8px}.segmented button+button{border-left:0}.segmented button.active{background:var(--cyan);color:#071011}.range{display:block;padding:16px 0;border-top:1px solid var(--line)}.range output{color:var(--ink)}input[type=range]{width:100%;height:28px;appearance:none;background:transparent}input[type=range]::-webkit-slider-runnable-track{height:2px;background:#4a4943}input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;margin-top:-8px;background:var(--acid);border:2px solid #090908;border-radius:50%}.ab-row{margin-top:14px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.ab-row span{font:9px ui-monospace,monospace;color:var(--muted)}#bypass{border-color:var(--cyan);color:var(--cyan)}#bypass.held{background:var(--cyan);color:#071011}.meter{height:7px;background:#272723;margin:24px 0 12px}.meter span{display:block;height:100%;width:0;background:var(--acid)}.notice{font:10px/1.5 ui-monospace,monospace;color:var(--muted);min-height:44px}footer{height:36px;border-top:1px solid var(--line);padding:0 20px;display:flex;justify-content:space-between;align-items:center;font:9px ui-monospace,monospace;color:#6f6c64;letter-spacing:.07em}@media(max-width:900px){html,body{overflow:auto}.mast{height:auto;min-height:126px;grid-template-columns:1fr auto;padding:12px}.brand{grid-column:1}.transport{grid-column:1/-1;grid-row:2}.transport button{flex:1}.export{grid-column:2;grid-row:1}.workspace{height:auto;display:flex;flex-direction:column;background:var(--bg)}.panel,.machine{overflow:visible;border-bottom:1px solid var(--line);padding:15px}.machine{order:-1;min-height:430px}.source{order:0}.shape{order:1}.steps{min-height:290px;overflow-x:auto;grid-template-columns:repeat(16,34px);padding-bottom:8px}.step{min-height:260px}.source-orbit{min-height:210px}.shape{padding-bottom:70px}footer{display:none}.instruction{line-height:1.5}.ab-row{grid-template-columns:1fr}.ab-row span{text-align:center}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}