:root{color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;min-height:100vh;background:#0a0a0c;color:#d8d8dc;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.seq__back{position:fixed;top:1rem;left:1rem;z-index:5;color:#d8d8dc;text-decoration:none;font-size:.9rem;opacity:.7;padding:.4rem .7rem;border-radius:.5rem;background:#ffffff0f}.seq__back:hover{opacity:1}.seq__scanlines{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;pointer-events:none;opacity:.6;mix-blend-mode:overlay;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0px,rgba(255,255,255,.035) 1px,transparent 1px,transparent 3px)}.seq__scanlines:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.35) 100%)}.seq__page{min-height:100vh;display:flex;flex-direction:column;align-items:center;gap:1.25rem;padding:4.5rem 1rem 3rem}.seq__view{display:flex;flex-direction:column;align-items:center;gap:1.25rem;width:100%;transition:opacity .22s ease,transform .22s ease;opacity:1;transform:translateY(0)}.seq__view[hidden]{display:none}.seq__view--out,.seq__view--in{opacity:0;transform:translateY(6px)}.seq__title{margin:0;font-size:1.6rem;letter-spacing:.1em;text-transform:uppercase;color:#f4f2ee}.seq__rack{position:relative;width:min(96vw,44rem);border-radius:.6rem;padding:1.1rem 1.3rem;background:linear-gradient(180deg,#3a3a3f,#232326 12%,#1c1c1f);border:1px solid #050505;box-shadow:0 1px #ffffff14 inset,0 10px 24px #0000008c}.seq__tracksRack{width:min(97vw,54rem)}.seq__screw{position:absolute;width:.6rem;height:.6rem;border-radius:50%;background:radial-gradient(circle at 35% 35%,#8a8a8f,#2c2c2f 70%);box-shadow:0 1px 1px #0009}.seq__screw:after{content:"";position:absolute;top:50%;left:15%;width:70%;height:1px;background:#0009;transform:rotate(35deg)}.seq__screw--tl{top:.5rem;left:.5rem}.seq__screw--tr{top:.5rem;right:.5rem}.seq__screw--bl{bottom:.5rem;left:.5rem}.seq__screw--br{bottom:.5rem;right:.5rem}.seq__rackTitle{margin:0 0 .8rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:#9a9aa0;text-align:center}.seq__transport{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.4rem}.seq__meter{position:relative;flex-basis:100%;height:.45rem;background:#101012;border:1px solid #000;border-radius:.2rem;overflow:hidden}.seq__meterFill{position:absolute;top:0;right:0;bottom:0;left:0;width:0%;background:linear-gradient(90deg,#39ff6a,#ffd21a 75%,#ff3b1a 92%)}.seq__meter:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(90deg,transparent 0 3px,#000 3px 4px);pointer-events:none}.seq__playBtn{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:3.2rem;height:3.2rem;border-radius:50%;border:1px solid #050505;background:radial-gradient(circle at 35% 30%,#4a4a50,#1a1a1c 75%);color:#ff6a1a;font-size:1.1rem;box-shadow:0 1px #ffffff26 inset,0 3px 6px #0009;cursor:pointer}.seq__playBtn:hover{color:#ff8a3a}.seq__playBtn--active{color:#39ff6a;box-shadow:0 1px #ffffff26 inset,0 0 10px #39ff6ab3,0 3px 6px #0009}.seq__lcdField{display:flex;flex-direction:column;align-items:center;gap:.3rem}.seq__lcdLabel,.seq__knobLabel{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:#9a9aa0}.seq__lcd{width:4.5rem;text-align:center;background:#1a1206;color:#ffb000;border:1px solid #000;border-radius:.25rem;font-family:Courier New,Courier,monospace;font-size:1.3rem;font-weight:700;padding:.2rem .3rem;box-shadow:0 0 6px #ffb00059 inset;text-shadow:0 0 6px rgba(255,176,0,.7)}.seq__knobField{display:flex;flex-direction:column;align-items:center;gap:.3rem}.seq__knobValue{font-size:.7rem;color:#9a9aa0;font-variant-numeric:tabular-nums}.seq__knobRow{display:flex;flex-wrap:wrap;justify-content:center;gap:1.1rem}.seq__knob{display:flex;flex-direction:column;align-items:center;gap:.2rem}.seq__knobDial{position:relative;width:2.6rem;height:2.6rem;border-radius:50%;background:radial-gradient(circle at 35% 28%,#55555c,#17171a 72%);border:1px solid #050505;box-shadow:0 1px #ffffff26 inset,0 2px 4px #0009;cursor:ns-resize;touch-action:none}.seq__knobDial:focus-visible{outline:2px solid #ff6a1a;outline-offset:2px}.seq__knobIndicator{position:absolute;bottom:50%;left:50%;width:2px;height:42%;margin-left:-1px;background:#ff8a3a;border-radius:1px;transform-origin:bottom center;box-shadow:0 0 4px #ff8a3acc}.seq__select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#1a1a1c;color:#d8d8dc;border:1px solid #050505;border-radius:.3rem;padding:.3rem .5rem;font-size:.8rem}.seq__smallBtn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #050505;background:linear-gradient(180deg,#3a3a3f,#1c1c1f);color:#d8d8dc;padding:.4rem .7rem;border-radius:.4rem;font-size:.8rem;cursor:pointer;box-shadow:0 1px #ffffff1a inset}.seq__smallBtn:hover{color:#f4f2ee}.seq__smallBtn:disabled{opacity:.4;cursor:default}.seq__smallBtn:disabled:hover{color:#d8d8dc}.seq__octaveField,.seq__recField{display:flex;align-items:center;gap:.5rem}.seq__recBtn--armed{color:#ff3b1a;border-color:#ff3b1a;animation:seqSamplePulse .5s ease-in-out infinite}.seq__presetsRow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem}.seq__gridRow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.2rem}:root{--step-w: 1.7rem;--step-h: 1.7rem}.seq__tracksScroll{overflow-x:auto;width:100%}.seq__tracks{display:flex;flex-direction:column;gap:.55rem;width:max-content;min-width:100%}.seq__track{display:grid;grid-template-columns:6rem max-content auto;align-items:center;gap:.6rem;width:max-content;min-width:100%}.seq__trackHead{position:sticky;left:0;z-index:2;background:#232326;padding-right:.3rem}.seq__trackKnobs{position:sticky;right:0;z-index:2;background:#232326;display:flex;gap:.5rem;padding-left:.3rem}.seq__trackKnobs .seq__knobDial{width:2rem;height:2rem}.seq__trackKnobs .seq__knobLabel,.seq__trackKnobs .seq__knobValue{font-size:.6rem}.seq__trackHead{display:flex;flex-direction:column;gap:.2rem}.seq__trackNameRow{display:flex;align-items:center;gap:.35rem}.seq__trackName{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:#b8b8bd}.seq__trackMute{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:none;color:#b8b8bd;padding:0;cursor:pointer;display:flex}.seq__trackMute svg{width:.85rem;height:.85rem}.seq__trackMute--muted{color:#ff3b1a}.seq__trackRemove{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:none;color:#55555a;font-size:.9rem;line-height:1;padding:0;cursor:pointer}.seq__trackRemove:hover{color:#ff3b1a}.seq__trackName--muted{color:#55555a;text-decoration:line-through}.seq__trackNote{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#1a1a1c;color:#9a9aa0;border:1px solid #050505;border-radius:.25rem;font-size:.65rem;padding:.1rem .2rem;width:fit-content}.seq__steps{display:flex;gap:.3rem}.seq__step{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:var(--step-w);height:var(--step-h);flex:none;border-radius:.25rem;border:1px solid #000;background:#101012;box-shadow:0 1px #ffffff0d inset;cursor:pointer;position:relative;touch-action:none}.seq__step:hover{background:#18181b}.seq__step--beat{border-color:#2a2a2e;background:#1a1a1d}.seq__step--beat:hover{background:#232326}.seq__step--bar{border-color:#6a6a72;background:#222226}.seq__step--bar:hover{background:#2a2a2f}.seq__step--on{background:#ff3b1a;box-shadow:0 0 6px #ff3b1ad9,0 1px #ffffff26 inset}.seq__step--accent{background:#ffd21a;box-shadow:0 0 8px #ffd21ae6,0 1px #ffffff26 inset}.seq__step--live.seq__step--on{background:#8a5cff;box-shadow:0 0 8px #8a5cffd9,0 1px #ffffff26 inset}.seq__step--playing{outline:2px solid #f4f2ee;outline-offset:1px}.seq__addTracks{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:.9rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.06)}.seq__addTracks[hidden]{display:none}.seq__addTrackBtn{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;flex-direction:column;align-items:center;gap:.3rem;width:3.6rem;border:1px dashed #3a3a3f;border-radius:.5rem;background:#ffffff05;color:#9a9aa0;padding:.5rem .3rem;font-size:.55rem;text-transform:uppercase;letter-spacing:.05em;cursor:pointer}.seq__addTrackBtn:hover{color:#f4f2ee;border-color:#ff6a1a}.seq__addTrackBtn svg{width:1.3rem;height:1.3rem}.seq__mixRack{width:min(96vw,44rem)}.seq__mixGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(6rem,1fr));gap:.7rem}.seq__mixEmpty{grid-column:1 / -1;text-align:center;color:#6a6a70;font-size:.8rem;margin:.5rem 0}.seq__sampleCell{-webkit-appearance:none;-moz-appearance:none;appearance:none;aspect-ratio:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:.5rem;border-radius:.6rem;border:1px solid #050505;background:linear-gradient(180deg,#2a2a2e,#17171a);color:#b8b8bd;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;box-shadow:0 1px #ffffff14 inset,0 2px 4px #00000080}.seq__sampleCell:hover{border-color:#ff6a1a}.seq__sampleCell--on{background:linear-gradient(180deg,#ff6a1a,#b23f00);color:#1a1206;box-shadow:0 0 14px #ff6a1aa6,0 1px #ffffff40 inset}@keyframes seqSamplePulse{0%,to{opacity:1}50%{opacity:.4}}.seq__sampleCell--pending{animation:seqSamplePulse .5s ease-in-out infinite}.seq__leadControls{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem;margin-bottom:1rem}.seq__keys{position:relative;width:100%;height:7rem;-webkit-user-select:none;user-select:none;touch-action:none;display:flex}.seq__whiteKeys{display:flex;width:100%;height:100%}.seq__key{display:flex;align-items:flex-end;justify-content:center;padding-bottom:.4rem;border:1px solid #050505;cursor:pointer;font-size:.65rem;font-weight:700}.seq__key--white{flex:1;background:#e8e6e1;color:#1a1a1c;border-radius:0 0 .3rem .3rem}.seq__key--white-active{background:#ff6a1a}.seq__key--black{position:absolute;top:0;height:60%;background:#101012;color:#d8d8dc;border-radius:0 0 .25rem .25rem;z-index:2}.seq__key--black-active{background:#ff6a1a}.seq__hint{margin:.6rem 0 0;text-align:center;font-size:.75rem;color:#6a6a70}.seq__hint kbd{border:1px solid #3a3a3f;border-radius:.25rem;padding:0 .3rem}@media (max-width: 34rem){.seq__track{grid-template-columns:5.2rem max-content auto}}.seq__knobDial:after{content:"";position:absolute;top:-.4rem;right:-.4rem;bottom:-.4rem;left:-.4rem;border-radius:50%}.seq__randomInfo{min-width:6rem;font-size:.75rem;color:#ffb000;font-family:Courier New,Courier,monospace}.seq__knobPop{position:fixed;z-index:100;width:min(22rem,calc(100vw - 1rem));padding:.8rem 1rem .9rem;border:1px solid #050505;border-radius:.7rem;background:linear-gradient(180deg,#2c2c31,#17171a);color:#d8d8dc;box-shadow:0 10px 30px #000000b3;display:flex;flex-direction:column;gap:.7rem}.seq__knobPopHead{display:flex;align-items:baseline;justify-content:space-between;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#9a9aa0}.seq__knobPopHead strong{font-size:1.3rem;letter-spacing:0;color:#ffb000;font-family:Courier New,Courier,monospace;font-variant-numeric:tabular-nums}.seq__knobPopSlider{width:100%;height:2.2rem;margin:0;accent-color:#ff8a3a;touch-action:none;cursor:pointer}.seq__knobPopButtons{display:flex;gap:.4rem;justify-content:space-between}.seq__harmonyRow,.seq__harmonyBars{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:.9rem 1.1rem}.seq__harmonyBars{margin-top:.8rem}.seq__check{display:flex;align-items:center;gap:.35rem;font-size:.75rem;color:#c8c8cc;cursor:pointer}.seq__step--note{font-size:.55rem;line-height:1;color:#fff;font-family:Courier New,Courier,monospace;touch-action:none}.seq__trackActions{display:flex;align-items:center;gap:.3rem}.seq__trackRand,.seq__trackActions .seq__trackRemove{display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;border:1px solid #050505;border-radius:.35rem;background:linear-gradient(180deg,#3a3a3f,#1c1c1f);padding:0;font-size:.9rem;line-height:1;cursor:pointer}.seq__trackRand{opacity:.85}.seq__trackRand:hover{opacity:1}.seq__queueInfo:empty{display:none}.seq__queueInfo{flex-basis:100%;text-align:center;font-size:.75rem;color:#ffb000;font-family:Courier New,Courier,monospace;min-height:1rem}.seq__scenesRow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem .8rem}.seq__sceneSlots{display:flex;gap:.35rem}.seq__scene{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:2.1rem;height:2.1rem;border:1px solid #050505;border-radius:.4rem;background:linear-gradient(180deg,#2a2a2e,#17171a);color:#6a6a70;font-weight:700;cursor:pointer}.seq__scene--filled{color:#e8e8ec;background:linear-gradient(180deg,#3d3d44,#1f1f23)}.seq__scene--active{color:#1a1206;background:#ffb000;box-shadow:0 0 8px #ffb00099}.seq__scene--queued{animation:seqSamplePulse .5s ease-in-out infinite;border-color:#ff8a3a}.seq__smallBtn--on{color:#ff3b1a;border-color:#ff3b1a}.seq__chainInput{width:7rem;background:#1a1206;color:#ffb000;border:1px solid #000;border-radius:.25rem;padding:.3rem .4rem;font-family:Courier New,Courier,monospace;text-transform:uppercase}.seq__trackBtn--on{border-color:#ff8a3a!important;background:#4a2a14!important;color:#ffb000}