@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root{--night:#151b1b;--ink:#222a29;--panel:#d9d9cc;--panel-hi:#ecebdf;--muted:#79817c;--line:#b8bcb0;--orange:#fa7747;--lime:#d5f080;--pink:#ef9da4;--blue:#91cbd1;--cream:#f5f2e8;--mono:'Space Mono',monospace;--sans:'DM Sans',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--night);color:var(--cream);font-family:var(--sans);min-width:320px;background-image:radial-gradient(circle at 15% 12%,#29413a 0,transparent 32%),radial-gradient(circle at 90% 70%,#3a302d 0,transparent 37%)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,.knob:focus-visible,input:focus-visible{outline:3px solid var(--orange);outline-offset:3px}.page{width:min(1220px,calc(100% - 60px));margin:auto;padding:25px 0 20px}.site-header{display:flex;align-items:center;gap:25px;height:43px}.identity{display:flex;align-items:center;gap:10px;font-size:10px;line-height:1;letter-spacing:.24em;font-weight:800}.identity-mark{width:36px;height:36px;display:grid;grid-template-columns:repeat(2,1fr);gap:3px;transform:rotate(-10deg)}.identity-mark i{background:var(--orange);border-radius:2px}.identity-mark i:nth-child(2){background:var(--lime)}.identity-mark i:nth-child(3){background:var(--blue)}.identity-mark i:nth-child(4){background:var(--pink)}.header-rule{height:1px;background:#61706b;flex:1;opacity:.5}.edition{font:10px var(--mono);letter-spacing:.1em;color:#a3b2a8;white-space:nowrap}.edition span{color:var(--orange);padding:0 7px}.intro{display:flex;align-items:end;justify-content:space-between;gap:30px;padding:23px 2px 27px}.eyebrow{font:10px var(--mono);letter-spacing:.14em;color:var(--lime);font-weight:700}.sparkle{font-size:16px;vertical-align:-1px;margin-right:5px}.intro h1{font-size:clamp(48px,5.8vw,82px);line-height:1.01;letter-spacing:-.065em;margin:10px 0 0;font-weight:800}.intro h1 em{color:var(--orange);font-style:normal}.intro p{max-width:225px;font-size:14px;line-height:1.5;color:#aeb9b1;margin:0 10px 7px 0}.machine{background:var(--panel);color:var(--ink);border-radius:20px;padding:15px 18px 11px;box-shadow:0 2px 0 #f0eee3 inset,0 0 0 2px #6c766d,0 7px 0 #a3a79d,0 12px 0 #596158,0 27px 65px #0008;position:relative}.machine:before,.machine:after{content:'';position:absolute;width:8px;height:8px;border-radius:50%;background:#858c80;box-shadow:inset 1px 1px 2px #535d57,1px 1px 0 #fff7;top:17px}.machine:before{left:17px}.machine:after{right:17px}.machine-topline{display:flex;align-items:center;justify-content:space-between;padding:0 22px 11px;border-bottom:1px solid #b7bcae;height:28px}.model{font-weight:800;font-size:15px;letter-spacing:-.05em}.model-symbol{color:var(--orange);font-size:17px;vertical-align:-1px}.model-sub{font:9px var(--mono);font-weight:700;letter-spacing:.07em;padding-left:8px;color:#777d73}.serial{font:9px var(--mono);font-weight:700;letter-spacing:.08em;color:#626b63}.power-led{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 9px #8fad38;vertical-align:1px;margin-right:5px}.serial-divider{color:#a5ab9e;padding:0 7px}.top-deck{display:grid;grid-template-columns:minmax(360px, .96fr) minmax(440px,1.04fr);gap:14px;margin-top:12px}.screen-panel{height:190px;background:#152622;border-radius:10px;border:7px solid #283330;box-shadow:inset 0 0 0 1px #476055,0 2px 2px #fff9,0 5px 8px #343b3560;overflow:hidden;color:var(--lime);position:relative}.screen-panel:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,#fff1,transparent 37%);pointer-events:none}.screen-top,.screen-bottom{height:26px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font:9px var(--mono);letter-spacing:.09em;position:relative;z-index:2}.screen-top{border-bottom:1px solid #7da47e3f}.screen-top span:last-child{color:#90a395}.screen-bottom{height:32px;border-top:1px solid #7da47e3f;color:#9aada0;gap:10px}.screen-bottom b{color:var(--lime);font-size:21px;letter-spacing:-.07em}.screen-bottom span:first-child{white-space:nowrap}.screen-dot{width:3px;height:3px;border-radius:50%;background:var(--lime);flex:none}.screen-spacer{flex:1}.screen-visual{height:calc(100% - 58px);position:relative;overflow:hidden;background:linear-gradient(#57726011 1px,transparent 1px),linear-gradient(90deg,#57726011 1px,transparent 1px);background-size:100% 27px,34px 100%}.screen-visual canvas{width:100%;height:100%;display:block}.screen-grain{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#0002 4px);opacity:.5}.control-panel{border:1px solid #b4b9ac;background:#e4e4d8;border-radius:9px;padding:11px 16px 8px;box-shadow:inset 0 1px #fff9}.panel-heading{display:flex;justify-content:space-between;font:9px var(--mono);font-weight:700;letter-spacing:.08em;color:#69736b}.panel-heading span:last-child{color:#969b8f}.knob-grid{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;height:143px;gap:5px}.knob-wrap{display:flex;flex-direction:column;align-items:center;position:relative;gap:3px}.knob-wrap:before{content:'';position:absolute;top:17px;width:82px;height:82px;border:1px solid #c4c9ba;border-radius:50%}.knob-wrap:after{content:'·   ·   ·   ·   ·';position:absolute;top:1px;white-space:nowrap;letter-spacing:5px;font-size:15px;color:#8d968b;transform:scaleX(1.1)}.knob{position:relative;width:61px;height:61px;border-radius:50%;background:radial-gradient(circle at 32% 24%,#5f6962 0,#35413c 52%,#26332e 75%);box-shadow:0 3px 0 #1b2622,0 6px 5px #66716977,inset 0 1px 2px #93a599;border:2px solid #28342e;margin-top:27px;z-index:1;touch-action:none;cursor:ns-resize;transform:rotate(var(--rotation,0deg))}.knob-marker{position:absolute;width:4px;height:17px;background:var(--knob-color);border-radius:3px;left:calc(50% - 2px);top:6px;box-shadow:0 0 7px var(--knob-color)}.knob-label{font:10px var(--mono);font-weight:700;letter-spacing:.09em;margin-top:3px}.knob-value{font:9px var(--mono);color:#858d82}.kick-color{--knob-color:var(--orange)}.snare-color{--knob-color:var(--pink)}.hat-color{--knob-color:var(--lime)}.bass-color{--knob-color:var(--blue)}.command-deck{display:grid;grid-template-columns:auto 1fr 1.05fr auto;align-items:stretch;gap:9px;margin:12px 0}.command-deck>div,.command-deck>button{height:62px}.transport{display:flex;gap:7px}.play-button,.stop-button,.mutate-button{border-radius:7px;font:11px var(--mono);font-weight:700;letter-spacing:.07em;white-space:nowrap}.play-button{border:1px solid #d85e32;background:var(--orange);color:#342b26;min-width:122px;box-shadow:inset 0 2px #ffb28e,0 3px 0 #ab4f32;display:flex;align-items:center;justify-content:center;gap:11px}.play-button:hover{background:#ff8b5e}.play-button.is-playing{background:var(--lime);border-color:#9eb954;box-shadow:inset 0 2px #ebffae,0 3px 0 #748b3b}.play-icon{display:block;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:10px solid currentColor}.play-button.is-playing .play-icon{width:10px;height:13px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor}.stop-button{border:1px solid #adb2a5;background:#e7e7da;padding:0 19px;color:#47534c;box-shadow:inset 0 2px #fff,0 3px 0 #abb0a5}.stop-button span{font-size:12px;margin-right:5px}.stop-button:hover,.tempo-control button:hover{background:#f7f6ec}.tempo-control,.swing-control{border:1px solid #b7bcad;border-radius:7px;background:#e4e5d9;display:flex;align-items:center;padding:5px 12px;gap:5px;box-shadow:inset 0 1px #fff8}.control-caption{font:9px var(--mono);font-weight:700;color:#687269;letter-spacing:.06em;margin-right:auto}.tempo-control button{background:#d1d6ca;border:1px solid #b3b9aa;border-radius:4px;width:29px;height:29px;color:#38433e;font-size:19px;line-height:1}.tempo-control input{width:49px;border:0;background:transparent;text-align:right;color:#273630;font:700 19px var(--mono);padding:0;appearance:textfield}.tempo-control input::-webkit-inner-spin-button,.tempo-control input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.bpm-small{font:9px var(--mono);font-weight:700;color:#778078;margin-right:auto}.swing-control{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:6px;padding:8px 16px}.swing-control label{display:flex;justify-content:space-between;font:9px var(--mono);font-weight:700;letter-spacing:.08em;color:#687269}.swing-control label span{color:#33423a}.swing-control input{width:100%;margin:0;accent-color:#4a6958;cursor:pointer}.mutate-button{border:1px solid #263b32;background:#2d4439;color:var(--lime);padding:0 19px;box-shadow:inset 0 2px #577264,0 3px 0 #1a2e24}.mutate-button:hover{background:#3a5a48}.mutate-icon{font-size:19px;vertical-align:-2px;padding-right:4px}.sequencer{border-radius:10px;background:#28322f;color:#edf0e5;padding:17px 19px 12px;box-shadow:inset 0 2px #45564b,0 2px 0 #f5f4e9}.sequencer-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:12px}.section-number{font:9px var(--mono);font-weight:700;letter-spacing:.1em;color:#9fb1a2}.sequencer h2{font-size:23px;letter-spacing:-.045em;margin:2px 0 0;line-height:1.1}.sequencer h2 span{color:var(--orange);font-size:11px;vertical-align:3px;margin-left:5px;text-shadow:0 0 7px var(--orange)}.sequence-actions{display:flex;align-items:center;gap:16px}.sequence-actions>span{font:9px var(--mono);letter-spacing:.07em;color:#9baa9e}.sequence-actions button{height:29px;border:1px solid #62756a;background:#3b4c42;color:var(--lime);border-radius:4px;font:9px var(--mono);font-weight:700;letter-spacing:.06em;padding:0 11px}.sequence-actions button:hover{background:#4b6755}.sequence-actions button span{font-size:15px;vertical-align:-2px}.grid-shell{border:1px solid #516258;border-radius:7px;background:#202a27;padding:9px 11px 9px 10px;box-shadow:inset 0 1px 4px #111a16}.grid-head,.track-row{display:grid;grid-template-columns:148px 1fr;gap:10px}.grid-head{align-items:end;padding-bottom:6px}.grid-label-spacer{font:8px var(--mono);letter-spacing:.09em;color:#748b7c;padding-left:10px}.step-numbers,.steps{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:7px}.step-number{text-align:center;font:9px var(--mono);color:#7e9184;position:relative}.step-number.beat-start{color:#c1d1bf}.track-row{align-items:center;min-height:51px;border-top:1px solid #3a4940}.track-name{display:flex;align-items:center;gap:9px;min-width:0}.track-indicator{width:7px;height:28px;background:var(--track-color);border-radius:3px;box-shadow:0 0 9px var(--track-color);flex:none}.track-identity{display:flex;flex-direction:column;flex:1;min-width:0}.track-identity strong{font-size:13px;line-height:1.15;letter-spacing:-.015em;white-space:nowrap}.track-identity small{font:8px var(--mono);color:#8ea394;white-space:nowrap}.mute-button{border:1px solid #607369;background:#334238;color:#9daf9e;width:29px;height:28px;flex:none;border-radius:4px;font:700 10px var(--mono);margin-right:5px}.mute-button:hover{background:#486050}.mute-button.muted{color:#243029;background:#8e9c8c;border-color:#b2c3ae}.track-row.is-muted .track-indicator{opacity:.28;box-shadow:none}.track-row.is-muted .track-identity{opacity:.5}.step{height:31px;border:1px solid #4b5c50;background:#334138;border-radius:4px;box-shadow:inset 0 2px #ffffff0c,0 2px 0 #111b15;position:relative;padding:0;touch-action:manipulation}.step:after{content:'';position:absolute;inset:5px;border-radius:2px;background:var(--track-color);opacity:0;transition:opacity .1s}.step:hover{border-color:#829684}.step.active{background:color-mix(in srgb,var(--track-color),#344038 68%);border-color:var(--track-color);box-shadow:inset 0 2px #ffffff55,0 2px 0 #111b15,0 0 10px color-mix(in srgb,var(--track-color),transparent 70%)}.step.active:after{opacity:.25}.step.playing{outline:2px solid #f8f5e7;outline-offset:2px;z-index:1}.step.playing:before{content:'';width:5px;height:5px;border-radius:50%;position:absolute;top:-9px;left:calc(50% - 2.5px);background:#f6f0dd;box-shadow:0 0 8px #fff}.step.beat-start{margin-left:5px}.step-numbers .beat-start{margin-left:5px}.page-bar{display:none}.sequencer-footer{display:flex;justify-content:space-between;margin-top:11px;color:#9eb0a0;font:8px var(--mono);font-weight:700;letter-spacing:.08em}.machine-foot{display:flex;justify-content:space-between;padding:11px 3px 0;color:#7d867a;font:8px var(--mono);letter-spacing:.07em}.machine-foot b{font-size:7px}.page-foot{display:flex;justify-content:space-between;margin-top:33px;color:#8c9f93;font:9px var(--mono);letter-spacing:.09em}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--lime);color:#213026;border-radius:6px;padding:10px 15px;font:700 11px var(--mono);box-shadow:0 8px 25px #0007;transition:opacity .2s,transform .2s;z-index:10;white-space:nowrap}.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.page{width:min(760px,calc(100% - 30px))}.top-deck{grid-template-columns:1fr 1fr}.control-panel{padding:10px}.knob-wrap:before{width:60px;height:60px;top:21px}.knob{width:46px;height:46px;margin-top:28px}.knob-marker{height:13px}.knob-grid{height:143px}.command-deck{grid-template-columns:1.2fr 1fr}.command-deck>div,.command-deck>button{height:59px}.mutate-button{grid-column:2;grid-row:2}.swing-control{grid-column:1;grid-row:2}.step-numbers,.steps{gap:4px}.grid-head,.track-row{grid-template-columns:124px 1fr;gap:5px}.track-identity strong{font-size:11px}.track-identity small{font-size:7px}.step.beat-start,.step-numbers .beat-start{margin-left:2px}}
@media(max-width:620px){.page{width:calc(100% - 22px);padding-top:14px}.site-header{height:30px;gap:13px}.identity{font-size:8px;gap:7px}.identity-mark{width:28px;height:28px;gap:2px}.edition{font-size:7px;letter-spacing:0}.edition span{padding:0 2px}.intro{padding:17px 1px 19px;align-items:start}.eyebrow{font-size:8px}.sparkle{font-size:13px}.intro h1{font-size:clamp(39px,10.5vw,62px);margin-top:7px;letter-spacing:-.065em}.intro p{display:none}.machine{padding:10px 10px 8px;border-radius:14px}.machine:before,.machine:after{top:12px;width:5px;height:5px}.machine:before{left:11px}.machine:after{right:11px}.machine-topline{padding:0 11px 8px;height:23px}.model{font-size:12px}.model-symbol{font-size:13px}.model-sub{font-size:7px;padding-left:3px}.serial{font-size:7px}.serial-divider,.serial-divider+span{display:none}.top-deck{grid-template-columns:1fr;gap:9px;margin-top:8px}.screen-panel{height:132px;border-width:5px}.screen-top{height:20px;font-size:7px;padding:0 10px}.screen-bottom{height:26px;font-size:7px;padding:0 10px;gap:6px}.screen-bottom b{font-size:17px}.screen-visual{height:calc(100% - 46px)}.control-panel{padding:7px 8px 5px}.panel-heading{font-size:7px}.knob-grid{height:102px}.knob-wrap{gap:0}.knob-wrap:before{width:54px;height:54px;top:15px}.knob-wrap:after{top:0;font-size:11px;letter-spacing:3px}.knob{width:43px;height:43px;margin-top:19px}.knob-marker{height:11px;top:4px}.knob-label{font-size:8px;margin-top:6px}.knob-value{font-size:7px}.command-deck{grid-template-columns:1fr 1fr;gap:7px;margin:9px 0}.command-deck>div,.command-deck>button{height:48px}.play-button{min-width:0;flex:1}.stop-button{padding:0 10px}.play-button,.stop-button,.mutate-button{font-size:9px}.tempo-control{padding:3px 6px}.control-caption{font-size:7px}.tempo-control button{height:24px;width:24px;font-size:16px}.tempo-control input{width:36px;font-size:15px}.bpm-small{font-size:7px}.swing-control{padding:5px 10px;gap:3px}.swing-control label{font-size:8px}.mutate-button{padding:0 8px}.mutate-icon{font-size:16px}.sequencer{padding:10px 9px 8px}.sequencer-heading{margin-bottom:6px;align-items:center}.section-number{font-size:7px}.sequencer h2{font-size:17px}.sequence-actions>span{display:none}.sequence-actions button{height:25px;font-size:8px;padding:0 7px}.page-bar{display:flex;justify-content:space-between;align-items:center;margin:0 0 5px;color:#8fa592;font:8px var(--mono);font-weight:700}.page-buttons{display:flex;gap:5px}.page-button{border:1px solid #5a6b60;background:#324238;color:#92aa97;border-radius:3px;padding:3px 7px;font:8px var(--mono)}.page-button.selected{color:#24352a;background:var(--lime);border-color:var(--lime)}.grid-shell{padding:5px 5px 6px}.grid-head,.track-row{grid-template-columns:74px 1fr;gap:2px}.grid-head{padding-bottom:4px}.grid-label-spacer{font-size:6px;padding-left:2px}.step-numbers,.steps{grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}.step-number{font-size:8px}.step-number.beat-start,.step.beat-start{margin-left:3px}.step[data-page="1"],.step-number[data-page="1"]{display:none}.machine[data-page="1"] .step[data-page="0"],.machine[data-page="1"] .step-number[data-page="0"]{display:none}.machine[data-page="1"] .step[data-page="1"],.machine[data-page="1"] .step-number[data-page="1"]{display:block}.track-row{min-height:41px}.track-indicator{width:4px;height:22px}.track-name{gap:4px}.track-identity strong{font-size:9px}.track-identity small{font-size:6px}.mute-button{width:19px;height:20px;font-size:8px;margin-right:1px;padding:0}.step{height:27px}.sequencer-footer{font-size:6px;margin-top:7px;letter-spacing:0}.machine-foot{font-size:6px;padding-top:9px}.machine-foot span:nth-child(2){display:none}.page-foot{margin-top:23px;font-size:7px}}
@media(max-width:620px){.track-row{min-height:46px}.step{height:32px}.mute-button{width:22px;height:26px}}
@media(max-width:380px){.model-sub{display:none}.serial{font-size:6px}.step-numbers,.steps{gap:3px}.step-number.beat-start,.step.beat-start{margin-left:2px}.control-caption{display:none}.tempo-control{justify-content:center}.sequencer-footer span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:0s!important;animation-duration:0s!important}}