:root{color-scheme:dark;--bg:#0b0b0a;--panel:#10100f;--cream:#edeadf;--muted:#a09f95;--line:#373731;--orange:#ff571d;--soft:#21211e;font-family:Arial,Helvetica,sans-serif;color:var(--cream);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 60% 30%,#171713 0,transparent 66%),var(--bg)}button,input,select{font:inherit}button,select{cursor:pointer}button{color:inherit;background:none;border:0}button:disabled{opacity:.3;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--orange);outline-offset:4px}@media(hover:hover){button:hover:not(:disabled){color:var(--orange)}}input[type=range]{accent-color:var(--orange);cursor:ew-resize;height:3px;min-width:0}input[type=number]{color:var(--cream);background:none;border:0;text-align:center;width:67px;font-size:27px;font-variant-numeric:tabular-nums;outline-offset:0}input[type=number]::-webkit-inner-spin-button{opacity:.4}select{background:#151513;color:var(--cream);border:1px solid var(--line);border-radius:2px;font:12px 'Courier New',monospace;letter-spacing:.03em;min-height:34px;padding:6px 25px 6px 10px;max-width:100%}#instrument{max-width:1520px;margin:auto;padding:0 4.5vw}button,select,input{-webkit-tap-highlight-color:transparent}.brandbar{height:66px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:11px;font-size:18px;font-weight:700;letter-spacing:-.04em}.brand img{width:30px;height:30px;object-fit:contain;mix-blend-mode:screen}.machine-id{font:11px 'Courier New',monospace;letter-spacing:.13em;color:var(--muted);margin-left:auto;margin-right:28px}.machine-id span{margin:0 13px;color:var(--orange)}.text-button{font:11px 'Courier New',monospace;letter-spacing:.08em;padding:6px 0;white-space:nowrap}.help-mark{display:inline-grid;place-items:center;border:1px solid #55554d;border-radius:50%;width:17px;height:17px;margin-left:8px}.titlebar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:27px 0 24px}.eyebrow,.micro{font:10px 'Courier New',monospace;letter-spacing:.13em;color:var(--muted)}h1{font-family:Anton,'Arial Narrow',Arial,sans-serif;font-size:clamp(32px,3.5vw,54px);font-weight:400;letter-spacing:.015em;line-height:1.1;margin:7px 0 0}h1 span{color:var(--orange)}.session-actions{display:flex;gap:7px;align-self:flex-end}.small-button{font:11px 'Courier New',monospace;letter-spacing:.09em;border:1px solid #5b5b52;border-radius:2px;padding:10px 13px;min-height:34px}.transport{display:flex;align-items:center;gap:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);min-height:83px;padding:14px 0}.play{width:46px;height:46px;border-radius:50%;background:var(--cream);color:var(--bg);display:grid;place-items:center;flex-shrink:0;transition:background .15s}.play.running{background:var(--orange);color:var(--bg)}@media(hover:hover){.play:hover:not(:disabled){background:var(--orange);color:var(--bg)}}.play svg{width:24px;height:24px}.tempo{display:flex;gap:4px;align-items:baseline}.tempo span{font:11px 'Courier New',monospace;color:var(--muted)}.inline-control{display:grid;grid-template-columns:auto 86px 30px;gap:10px;align-items:center;font:11px 'Courier New',monospace}.inline-control>span{color:var(--muted)}.transport-divider{width:1px;height:34px;background:var(--line)}.bank-area{display:flex;align-items:center;gap:12px}.segmented{display:flex;border:1px solid #505048;border-radius:2px}.segmented button{width:32px;height:31px;font:12px 'Courier New',monospace;border-right:1px solid #505048}.segmented button:last-child{border:0}.segmented button.active{background:var(--cream);color:var(--bg)}.segmented button.pending{color:var(--orange);box-shadow:inset 0 -2px var(--orange)}.preset-area{display:flex;align-items:center;gap:12px;margin-left:auto}.preset-area select{min-width:174px}.clock{display:flex;flex-direction:column;gap:4px;align-items:center;padding-left:10px;min-width:50px}.clock>span:first-child{font:22px 'Courier New',monospace;color:var(--orange)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 244px;gap:30px;padding:22px 0 0}.section-heading{display:flex;justify-content:space-between;align-items:center;height:29px;margin-bottom:13px}.section-label{font:12px 'Courier New',monospace;letter-spacing:.12em;white-space:nowrap}.section-label .orange{margin-right:9px}.orange{color:var(--orange)}.sequence-tools{display:flex;align-items:center;gap:14px}.sequence-tools #liveRecord{color:var(--muted);margin-right:9px}.sequence-tools #liveRecord.active{color:var(--orange)}.page-button{width:20px;font-size:22px;line-height:1;padding:0}.ruler{display:grid;grid-template-columns:144px 1fr;gap:12px;margin-bottom:8px;color:var(--muted);font:10px 'Courier New',monospace}.ruler-label{letter-spacing:.12em}.ruler #stepNumbers{display:grid;grid-template-columns:repeat(var(--steps,16),1fr);gap:6px;text-align:center}.track{display:grid;grid-template-columns:144px minmax(0,1fr);gap:12px;align-items:center;min-height:56px;border-bottom:1px solid #23231f}.track-controls{display:flex;align-items:center;gap:5px;min-width:0;border-left:2px solid transparent;padding-left:7px;margin-left:-9px}.track.selected .track-controls{border-left-color:var(--orange)}.voice-pad{width:24px;height:27px;color:var(--muted);font:11px 'Courier New',monospace;flex-shrink:0;padding:0;border:1px solid #3a3a34;border-radius:2px}.voice-pad.hit{background:var(--orange);color:var(--bg);border-color:var(--orange)}.voice-name{text-align:left;flex:1;font:13px 'Courier New',monospace;letter-spacing:.04em;padding:0 2px}.voice-name small{display:block;font:9px 'Courier New',monospace;color:var(--muted);margin-top:4px;letter-spacing:.03em}.track.selected .voice-name{color:var(--orange)}.track-mute,.track-solo{font:10px 'Courier New',monospace;color:var(--muted);width:17px;padding:4px 0}.track-mute.active,.track-solo.active{color:var(--orange)}.steps{display:grid;grid-template-columns:repeat(var(--steps,16),minmax(0,1fr));gap:6px}.step{position:relative;height:38px;min-width:0;padding:0;border:1px solid #5f5f55;border-radius:2px;background:linear-gradient(125deg,#141413,#0c0c0b);touch-action:manipulation;transition:background .08s,box-shadow .08s}.step.beat{border-color:#929184}.step.active{background:var(--cream);border-color:var(--cream);box-shadow:0 0 10px #e8dfbb10}.step.accent{background:var(--orange);border-color:var(--orange);box-shadow:0 0 10px #ff571d18}.step.inactive{opacity:.18}.step.muted{opacity:.32}.step.playing:after{content:'';position:absolute;inset:-5px -3px;border:1px solid var(--orange);border-radius:3px;pointer-events:none}.step.selected{outline:1px solid var(--cream);outline-offset:2px}.step .velocity{position:absolute;bottom:3px;left:3px;right:3px;height:2px;background:#0008;transform-origin:left}.step .step-meta{position:absolute;top:3px;right:3px;font:9px 'Courier New',monospace;color:var(--bg);line-height:1}.step .lock-dot{position:absolute;width:3px;height:3px;background:var(--bg);top:4px;left:4px}.sequence-footer{display:flex;justify-content:space-between;gap:14px;font:9px 'Courier New',monospace;color:var(--muted);letter-spacing:.045em;padding:14px 0 17px}.dim{color:#52524b;margin:0 6px}.editor{border-top:1px solid #66665b;min-height:232px}.editor-top{display:flex;justify-content:space-between;align-items:center;margin:12px 0 17px;gap:16px}.tabs{display:flex;gap:25px}.tabs button{font:12px 'Courier New',monospace;letter-spacing:.07em;color:var(--muted);padding:7px 0;border-bottom:2px solid transparent}.tabs button[aria-selected=true]{border-bottom-color:var(--orange);color:var(--cream)}.editor-voice{font:11px 'Courier New',monospace;letter-spacing:.05em;color:var(--orange)}.sound-top{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}.sound-top label{display:flex;align-items:center;gap:7px;font:10px 'Courier New',monospace;color:var(--muted)}.sound-top select{font-size:11px;min-height:30px}.sound-top .engine-label{margin-right:auto}.knobs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:15px}.knob-control{display:flex;align-items:center;flex-direction:column;gap:7px;min-width:0}.knob-label{font:11px 'Courier New',monospace;letter-spacing:.07em;color:var(--muted);white-space:nowrap}.knob{position:relative;width:48px;height:48px;border:1px solid #77766a;border-radius:50%;background:radial-gradient(circle at 38% 25%,#282825,#0b0b0b 72%);touch-action:none;cursor:ns-resize}.knob:before{content:'';position:absolute;width:3px;height:12px;left:calc(50% - 1.5px);top:3px;background:var(--orange);border-radius:1px;transform-origin:1.5px 20px;transform:rotate(var(--angle,0deg))}.knob:after{content:'';position:absolute;inset:-5px;border:1px solid #393931;border-bottom-color:transparent;border-radius:50%}.knob-value{font:11px 'Courier New',monospace;white-space:nowrap;font-variant-numeric:tabular-nums}.step-head{display:flex;justify-content:space-between;gap:10px;align-items:center;font:12px 'Courier New',monospace;margin-bottom:19px}.step-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:13px 20px}.step-control{display:flex;flex-direction:column;gap:7px}.step-control>span{display:flex;justify-content:space-between;gap:7px;font:10px 'Courier New',monospace;color:var(--muted)}.step-control output{color:var(--cream)}.step-control input{width:100%;margin:4px 0 7px}.step-control select{min-height:25px;font-size:10px}.step-control .reset-lock{font-size:9px;color:var(--orange);padding:0}.motion-row{display:grid;grid-template-columns:1.25fr 16px 1fr 1fr;align-items:center;gap:12px;border-bottom:1px solid #2a2a25;padding:9px 0}.motion-row>span{font:12px 'Courier New',monospace;color:var(--orange)}.motion-row select{min-height:31px;font-size:11px}.motion-row label{display:flex;align-items:center;gap:10px;font:10px 'Courier New',monospace}.motion-row input{width:100%}.motion-note{font:11px 'Courier New',monospace;color:var(--muted);line-height:1.5;margin:13px 0 4px}.performance{border-left:1px solid var(--line);padding-left:25px}.performance .section-heading{margin-bottom:12px}.field-top,.field-bottom{display:flex;justify-content:space-between;font:9px 'Courier New',monospace;color:var(--muted);letter-spacing:.09em;margin:9px 0}.field-top span:first-child{opacity:0}.field-top span:last-child{color:var(--cream)}#fieldReadout{font-size:9px;color:var(--orange)}#field{aspect-ratio:1;border:1px solid #89897b;border-radius:2px;position:relative;overflow:hidden;touch-action:none;cursor:crosshair;background:radial-gradient(ellipse at 75% 25%,#39201530,transparent 70%),#0b0b0a}#fieldCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:.65}.field-cross{position:absolute;pointer-events:none;opacity:.25}.field-cross.horizontal{border-top:1px dashed #8b8a7e;top:50%;width:100%}.field-cross.vertical{border-left:1px dashed #8b8a7e;left:50%;height:100%}.field-ring{position:absolute;border:1px solid #ff571d26;border-radius:50%;width:60px;height:60px;left:var(--x,24%);top:var(--y,78%);transform:translate(-50%,-50%);pointer-events:none;transition:width .4s,height .4s}.field-ring.r2{width:105px;height:105px;border-color:#ff571d18}.field-ring.r3{width:158px;height:158px;border-color:#ff571d10}#fieldDot{width:17px;height:17px;background:var(--orange);border-radius:50%;position:absolute;left:var(--x,24%);top:var(--y,78%);transform:translate(-50%,-50%);box-shadow:0 0 14px #ff571d66;pointer-events:none}.field-corner{font:8px/1.5 'Courier New',monospace;color:#8b8a7b;position:absolute;bottom:9px;right:9px;text-align:right}.field-bottom:before{content:'DRY';position:absolute;margin-top:-23px;margin-left:9px;font-size:8px}.performance-buttons{display:flex;gap:8px;margin-top:19px}.orange-button{background:var(--orange);color:#160e09!important;border:1px solid var(--orange);border-radius:2px;font:11px 'Courier New',monospace;letter-spacing:.1em;padding:11px 13px;flex:1}@media(hover:hover){.orange-button:hover{background:#ff743e}}.hold-buttons{display:flex;gap:8px;margin-top:9px}.hold-buttons button{border:1px solid #41413a;border-radius:2px;font:9px 'Courier New',monospace;letter-spacing:.03em;padding:11px 3px;flex:1;touch-action:none;user-select:none}.hold-buttons button.active{background:var(--cream);color:var(--bg)}.snapshot{display:flex;justify-content:space-between;padding:13px 0 16px;border-bottom:1px solid var(--line)}.snapshot button{font-size:9px}.scope-wrap{margin-top:19px}.scope-wrap canvas{width:100%;height:62px;display:block}.scope-wrap>div{display:flex;justify-content:space-between;font:8px 'Courier New',monospace;letter-spacing:.05em;color:var(--muted);margin-top:8px}.master{display:flex;gap:26px;align-items:center;margin-top:25px;padding:23px 0;border-top:1px solid #66665b;border-bottom:1px solid var(--line)}.master>label{display:grid;grid-template-columns:auto minmax(30px,1fr) 20px;align-items:center;gap:10px;flex:1;font:10px 'Courier New',monospace}.master>label>span{color:var(--muted)}.master input{width:100%;margin:0}.icon-button{width:29px;height:29px;display:grid;place-items:center;padding:3px}.icon-button svg{width:24px;height:24px}.icon-button[aria-pressed=true]{color:var(--orange)}footer{display:flex;justify-content:space-between;font:9px 'Courier New',monospace;color:var(--muted);letter-spacing:.1em;padding:17px 0 23px}footer span:last-child{color:var(--orange)}footer i{display:inline-block;width:4px;height:4px;background:var(--orange);vertical-align:middle;margin-right:7px}#notice{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;padding:13px 20px;background:var(--cream);color:var(--bg);font:12px 'Courier New',monospace;box-shadow:0 5px 25px #0008;border-radius:2px;transition:opacity .2s,transform .2s;max-width:90vw;text-align:center;z-index:5}#notice.visible{opacity:1;transform:translate(-50%,0)}dialog{background:var(--panel);color:var(--cream);border:1px solid #737363;border-radius:4px;max-width:780px;width:calc(100% - 36px);padding:30px}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;gap:15px;border-bottom:1px solid var(--line);padding-bottom:16px}h2{font:30px Anton,Arial,sans-serif;font-weight:400;margin:0}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}.guide-grid h3{font:12px 'Courier New',monospace;letter-spacing:.08em;color:var(--orange);margin-top:25px}.guide-grid p{font-size:14px;line-height:1.65;color:#c4c2b7;margin:10px 0}.guide-note{font-size:12px;line-height:1.5;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;margin-top:20px}
@media(min-width:1500px){#instrument{padding:0 55px}.workspace{grid-template-columns:minmax(0,1fr) 276px}.step{height:43px}.track{min-height:63px}}
@media(max-width:1180px){#instrument{padding:0 30px}.transport{gap:14px}.inline-control{grid-template-columns:auto 53px 26px;gap:7px}.bank-area>.micro,.preset-area>.micro{display:none}.workspace{gap:23px;grid-template-columns:minmax(0,1fr) 218px}.performance{padding-left:20px}.track,.ruler{grid-template-columns:126px minmax(0,1fr);gap:9px}.steps,#stepNumbers{gap:4px!important}.voice-pad{width:20px}.voice-name{font-size:12px}.track-controls{gap:3px}.step{height:34px}.master{gap:18px}.master>.section-label{font-size:10px}.master>label{gap:7px}.sound-top{gap:6px}.sound-top label{gap:4px}.sound-top select{padding-left:6px}.knob-label{font-size:10px}}
@media(max-width:930px){.machine-id{display:none}.workspace{grid-template-columns:minmax(0,1fr) 192px;gap:18px}.performance{padding-left:17px}.clock{display:none}.transport-divider{display:none}.transport{flex-wrap:wrap;gap:16px}.preset-area{margin-left:auto}.session-actions{gap:5px}.session-actions button{padding:8px;font-size:10px}.titlebar{padding:23px 0}.track,.ruler{grid-template-columns:111px minmax(0,1fr);gap:8px}.track-mute,.track-solo{width:13px;font-size:9px}.voice-pad{width:18px;font-size:9px}.voice-name{font-size:11px}.voice-name small{font-size:8px}.step{height:30px}.steps,#stepNumbers{gap:3px!important}.track{min-height:53px}.sequence-footer{font-size:8px}.sequence-footer #patternStatus{display:none}.tabs{gap:18px}.editor-voice{font-size:10px}.knobs{gap:8px}.knob{width:41px;height:41px}.knob:before{transform-origin:1.5px 16.5px;height:10px}.master{gap:15px;flex-wrap:wrap}.master>.section-label{width:100%}.master>label{font-size:10px}.scope-wrap{margin-top:23px}.performance-buttons{gap:5px}.performance-buttons button{padding:10px 9px}.hold-buttons{gap:5px}.hold-buttons button{font-size:8px}.snapshot button{font-size:8px}.sound-top label{font-size:9px}.sound-top select{font-size:10px}.sound-top .engine-label{width:100%;margin-bottom:3px}.step-controls{gap:12px}.step-control>span{font-size:9px}}
@media(max-width:720px){#instrument{padding:0 19px}.brandbar{height:58px}.titlebar{display:block;padding:22px 0 18px}.eyebrow{font-size:9px}h1{font-size:40px}.session-actions{margin-top:17px}.session-actions button{font-size:10px;padding:8px 12px}.transport{gap:14px;padding:16px 0}.play{width:42px;height:42px}.inline-control{margin-left:auto;grid-template-columns:auto 70px 25px}.tempo input{font-size:25px;width:61px}.bank-area{order:5}.bank-area>.micro{display:block}.preset-area{order:6}.preset-area select{min-width:168px;font-size:11px}.workspace{display:block;padding-top:17px}.ruler,.track{grid-template-columns:124px minmax(0,1fr);gap:9px}.track{min-height:53px}.steps,#stepNumbers{gap:5px!important}.step{height:35px}.voice-name{font-size:12px}.voice-name small{font-size:9px}.voice-pad{width:23px;font-size:10px}.track-mute,.track-solo{width:17px;font-size:10px}.section-heading{margin-bottom:12px}.sequence-tools{gap:12px}.section-label{font-size:11px}.sequence-tools .text-button{font-size:10px}.ruler{font-size:9px}.sequence-footer{font-size:8px;padding-bottom:17px;line-height:1.5}.editor{min-height:257px}.editor-top{margin-bottom:15px}.tabs{gap:25px}.tabs button{font-size:12px}.editor-voice{font-size:11px}.sound-top{gap:10px}.sound-top label{font-size:10px}.sound-top select{font-size:11px}.sound-top .engine-label{width:auto;margin-bottom:0}.sound-top label:last-child{margin-left:auto}.knobs{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:24px}.knob{width:39px;height:39px}.knob:before{transform-origin:1.5px 15.5px}.knob-label,.knob-value{font-size:9px}.performance{border-left:0;border-top:1px solid #66665b;padding:19px 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:22px;margin-top:21px}.performance .section-heading{grid-column:1/-1}.field-top{grid-column:1;grid-row:2;margin-top:0}.performance #field{grid-column:1;grid-row:3/7}.field-bottom{grid-column:1;grid-row:7}.performance-buttons{grid-column:2;grid-row:3;margin:0;height:36px}.hold-buttons{grid-column:2;grid-row:4;margin-top:9px;height:36px}.snapshot{grid-column:2;grid-row:5;flex-wrap:wrap;padding:9px 0;gap:7px}.scope-wrap{grid-column:2;grid-row:6;margin-top:8px;min-width:0}.scope-wrap canvas{height:35px}.scope-wrap>div{font-size:7px}.performance-buttons button{font-size:10px;padding:8px}.hold-buttons button{padding:7px 2px}.master{margin-top:22px;gap:21px 17px;padding:20px 0}.master>label{flex:none;width:calc(50% - 20px);grid-template-columns:50px 1fr 22px;font-size:10px}.master>.section-label{width:calc(100% - 45px)}.master .icon-button{order:-1}.master>.section-label{order:-2}footer{font-size:8px;letter-spacing:.04em;gap:15px;line-height:1.5}.guide-grid{grid-template-columns:1fr;gap:0}dialog{padding:21px}.step-controls{grid-template-columns:repeat(4,1fr)}.step-head{font-size:11px}.motion-row{gap:7px;grid-template-columns:1.1fr 10px 1fr .8fr}.motion-row select{font-size:10px}.motion-note{font-size:10px}}
@media(max-width:390px){#instrument{padding:0 13px}h1{font-size:36px}.ruler,.track{grid-template-columns:110px minmax(0,1fr);gap:7px}.steps,#stepNumbers{gap:4px!important}.track-controls{gap:2px}.voice-pad{width:19px}.voice-name{font-size:11px}.track-mute,.track-solo{width:14px}.step{height:32px}.bank-area{gap:8px}.bank-area>.micro{display:none}.preset-area select{min-width:155px}.sequence-tools{gap:8px}.knobs{gap:5px}.knob{width:36px;height:36px}.knob:before{transform-origin:1.5px 14px}.knob-label{font-size:8px}.performance{column-gap:16px}.hold-buttons{flex-direction:column;height:auto}.snapshot{gap:0;padding-bottom:5px}.scope-wrap{margin-top:5px}.scope-wrap>div{display:none}.sound-top{gap:6px}.sound-top label:last-child{margin-left:0}.step-controls{grid-template-columns:repeat(3,1fr)}.editor{min-height:275px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}