.pad-grid{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:8px;border-radius:var(--radius-lg);background:var(--panel-inset);flex-shrink:0}.pad{width:100%;aspect-ratio:1 / 1;border-radius:6px;border:none;cursor:pointer;position:relative;transition:transform .06s ease,box-shadow .12s ease}.pad-grid .pad:nth-child(1){background:linear-gradient(170deg,#ff7045,#ff5a25);box-shadow:0 3px #d84515,0 5px 10px #0006,inset 0 1px #ffffff4d}.pad-grid .pad:nth-child(2){background:linear-gradient(170deg,#f5f5f5,#e0e0e0);box-shadow:0 3px #b0b0b0,0 5px 10px #0000004d,inset 0 1px #fff9}.pad-grid .pad:nth-child(3){background:linear-gradient(170deg,#2a2a2a,#1a1a1a);box-shadow:0 3px #0a0a0a,0 5px 10px #00000080,inset 0 1px #ffffff1a}.pad-grid .pad:nth-child(4){background:linear-gradient(170deg,#2a2a2a,#1a1a1a);box-shadow:0 3px #0a0a0a,0 5px 10px #00000080,inset 0 1px #ffffff1a}.pad-grid .pad:nth-child(5){background:linear-gradient(170deg,#2a2a2a,#1a1a1a);box-shadow:0 3px #0a0a0a,0 5px 10px #00000080,inset 0 1px #ffffff1a}.pad-grid .pad:nth-child(6){background:linear-gradient(170deg,#2a2a2a,#1a1a1a);box-shadow:0 3px #0a0a0a,0 5px 10px #00000080,inset 0 1px #ffffff1a}.pad-grid .pad:nth-child(7){background:linear-gradient(170deg,#2a2a2a,#1a1a1a);box-shadow:0 3px #0a0a0a,0 5px 10px #00000080,inset 0 1px #ffffff1a}.pad-grid .pad:nth-child(8){background:linear-gradient(170deg,#2a2a2a,#1a1a1a);box-shadow:0 3px #0a0a0a,0 5px 10px #00000080,inset 0 1px #ffffff1a}.pad.is-active{transform:translateY(2px)}.pad-grid .pad:nth-child(1).is-active{background:linear-gradient(170deg,#ff9565,#ff7045);box-shadow:0 1px #d84515,0 0 25px #ff6b3599,inset 0 1px #fff6}.pad-grid .pad:nth-child(2).is-active{background:linear-gradient(170deg,#fff,#f5f5f5);box-shadow:0 1px #b0b0b0,0 0 25px #fffc,inset 0 1px #ffffffe6}.pad-grid .pad:nth-child(3).is-active{background:linear-gradient(170deg,#4a4a4a,#2a2a2a);box-shadow:0 1px #0a0a0a,0 0 15px #ffffff4d,inset 0 1px #fff3}.pad-grid .pad:nth-child(4).is-active{background:linear-gradient(170deg,#4a4a4a,#2a2a2a);box-shadow:0 1px #0a0a0a,0 0 15px #ffffff4d,inset 0 1px #fff3}.pad-grid .pad:nth-child(5).is-active{background:linear-gradient(170deg,#4a4a4a,#2a2a2a);box-shadow:0 1px #0a0a0a,0 0 15px #ffffff4d,inset 0 1px #fff3}.pad-grid .pad:nth-child(6).is-active{background:linear-gradient(170deg,#4a4a4a,#2a2a2a);box-shadow:0 1px #0a0a0a,0 0 15px #ffffff4d,inset 0 1px #fff3}.pad-grid .pad:nth-child(7).is-active{background:linear-gradient(170deg,#4a4a4a,#2a2a2a);box-shadow:0 1px #0a0a0a,0 0 15px #ffffff4d,inset 0 1px #fff3}.pad-grid .pad:nth-child(8).is-active{background:linear-gradient(170deg,#4a4a4a,#2a2a2a);box-shadow:0 1px #0a0a0a,0 0 15px #ffffff4d,inset 0 1px #fff3}.controls-panel{width:100%;min-width:0;border-radius:0 var(--radius-xl) var(--radius-xl) 0;padding:10px;display:flex;flex-direction:column;gap:8px;overflow:visible;background:transparent}.controls-panel__master-fx-title{font-family:var(--font-headline);font-size:.52rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-bright)}.controls-panel__kit-btn{font-family:var(--font-mono);font-size:.52rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text);border:none;border-radius:5px;background:linear-gradient(170deg,#f0f0f0,#d8d8d8);padding:5px 8px;cursor:pointer;box-shadow:0 2px #0003,0 3px 6px #00000026,inset 0 1px #ffffff80;transition:background .1s,transform .06s,box-shadow .1s}.controls-panel__kit-btn:active{transform:translateY(1px);box-shadow:0 1px #0003,0 2px 4px #00000026,inset 0 1px #ffffff4d}.controls-panel__kit-btn:hover{background:linear-gradient(170deg,#fff,#e8e8e8);color:var(--text-bright)}.controls-panel__pads{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}.controls-panel__pad-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 16px;border:1px solid rgba(0,0,0,.15);border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,transparent 50%,rgba(0,0,0,.05) 100%),linear-gradient(135deg,#e8e8e8,#d0d0d0);color:var(--text);cursor:pointer;font-family:var(--font-mono);font-size:.56rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 0 0 1px #ffffff4d inset,0 1px #fff6 inset,0 -1px 1px #0000001a inset,0 2px 4px #0003,0 4px 8px #00000026;transition:all .15s cubic-bezier(.4,0,.2,1);position:relative}.controls-panel__pad-btn:hover{background:linear-gradient(180deg,rgba(255,255,255,.3) 0%,transparent 50%,rgba(0,0,0,.05) 100%),linear-gradient(135deg,#f0f0f0,#d8d8d8);color:var(--text-bright)}.controls-panel__pad-btn:active{transform:translateY(1px);box-shadow:0 0 0 1px #fff3 inset,0 1px #0000001a inset,0 1px 2px #0003}.controls-panel__pad-dot{width:5px;height:5px;border-radius:50%;background:#6a6a6a;opacity:.5}.controls-panel__pad-name{flex:1;text-align:left}.controls-panel__pad-num{font-family:var(--font-mono);font-size:.52rem;color:var(--text-muted);opacity:.45}.controls-panel__pad-btn.is-selected{border-color:#0003;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.02) 50%,transparent 100%),linear-gradient(135deg,#c8c8c8,#b8b8b8);color:var(--text-bright);box-shadow:0 0 0 1px #0000001a inset,0 2px 4px #00000040 inset,0 -1px #ffffff1a inset,0 1px 2px #0003;transform:translateY(1px)}.controls-panel__pad-btn.is-selected .controls-panel__pad-dot{background:var(--accent);opacity:1;box-shadow:0 0 6px #d8451599}.controls-panel__pad-btn.is-selected .controls-panel__pad-num{color:var(--accent);opacity:.9}.controls-panel__master-fx,.controls-panel__params{display:flex;flex-direction:column;gap:6px}.controls-panel__master-fx-head{display:flex;align-items:center;justify-content:space-between;gap:6px}.controls-panel__master-fx-knobs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:6px;border-radius:var(--radius-md);background:#e8e8e81a;border:1px solid rgba(0,0,0,.08);overflow:visible}.controls-panel__pad-and-knobs{display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:var(--radius-md);background:#e8e8e81a;border:1px solid rgba(0,0,0,.08)}.controls-panel__pad-and-knobs .controls-panel__pads{margin-bottom:2px}.controls-panel__knobs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;overflow:visible}.controls-panel__knob{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 3px;overflow:visible}.controls-panel__knob-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}.controls-panel__knob-dial{-moz-appearance:none;appearance:none;-webkit-appearance:none;display:block;line-height:1;padding:0;overflow:visible;box-sizing:border-box;flex-shrink:0;width:46px;height:46px;border-radius:50%;border:0;background:var(--panel-inset);box-shadow:-4px -4px 8px #fff6,4px 4px 8px #00000040,inset -2px -2px 4px #ffffff1a,inset 2px 2px 4px #00000026;position:relative;cursor:ns-resize;transition:box-shadow .15s cubic-bezier(.4,0,.2,1);transform:translateZ(0)}.controls-panel__knob-dial:before{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;border-radius:50%;background:linear-gradient(145deg,silver,#a8a8a8);box-shadow:-1px -1px 2px #ffffff80,1px 1px 2px #0003}.controls-panel__knob-dial:hover{box-shadow:-4px -4px 8px #ffffff80,4px 4px 8px #0000004d,inset -2px -2px 4px #ffffff26,inset 2px 2px 4px #0003,0 0 0 1px #d8451533}.controls-panel__knob-dial.is-dragging{box-shadow:-3px -3px 6px #ffffff4d,3px 3px 6px #00000059,inset -3px -3px 6px #fff3,inset 3px 3px 6px #00000040,0 0 0 1px #d845154d}.controls-panel__knob-indicator{position:absolute;left:50%;top:50%;width:2px;height:14px;border-radius:1px;background:linear-gradient(180deg,var(--accent) 0%,rgba(216,69,21,.8) 100%);box-shadow:0 0 6px #d8451599,0 0 2px #d84515cc;z-index:2}.controls-panel__knob-value{font-family:var(--font-led);font-size:.56rem;color:var(--text-bright);min-width:46px;text-align:center}.controls-panel__reset{font-family:var(--font-mono);font-size:.52rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text);background:linear-gradient(170deg,#f0f0f0,#d8d8d8);border:none;border-radius:5px;padding:5px 9px;cursor:pointer;box-shadow:0 2px #0003,0 3px 6px #00000026,inset 0 1px #ffffff80;transition:background .1s,transform .06s,box-shadow .1s}.controls-panel__reset:active{transform:translateY(1px);box-shadow:0 1px #0003,0 2px 4px #00000026,inset 0 1px #ffffff4d}.controls-panel__reset:hover{background:linear-gradient(170deg,#fff,#e8e8e8);color:var(--text-bright)}.controls-panel__reset--inside-knobs{grid-column:1 / -1;text-align:center}.sequencer{width:100%;margin-top:0;padding:8px;border-radius:var(--radius-lg);background:var(--panel-inset);flex-shrink:1;min-height:0;display:flex;flex-direction:column}.sequencer__header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;flex-shrink:0;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.04)}.sequencer__header h2{margin:0 0 0 6px;font-family:var(--font-headline);font-size:.65rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-bright);flex-shrink:0}.sequencer__controls{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap;flex:1;min-width:0}.sequencer__control{display:flex;align-items:center;gap:5px;flex-shrink:0}.sequencer__control-label{color:var(--text-muted);font-family:var(--font-mono);font-size:.56rem;text-transform:uppercase;letter-spacing:.05em}.sequencer__controls button,.sequencer__controls input,.sequencer__controls select{font-family:var(--font-mono);font-size:.6rem}.sequencer__transport{display:flex;align-items:center;gap:6px;flex-shrink:0}.sequencer__transport button{border:none;background:linear-gradient(170deg,#f0f0f0,#d8d8d8);color:var(--text);border-radius:5px;padding:5px 10px;cursor:pointer;text-transform:uppercase;letter-spacing:.06em;box-shadow:0 2px #0003,0 3px 6px #00000026,inset 0 1px #ffffff80;transition:background .1s,transform .06s,box-shadow .1s}.sequencer__transport button:active{transform:translateY(1px);box-shadow:0 1px #0003,0 2px 4px #00000026,inset 0 1px #ffffff4d}.sequencer__transport button:hover{background:linear-gradient(170deg,#fff,#e8e8e8);color:var(--text-bright)}.sequencer__controls input,.sequencer__controls select{border:1px solid rgba(0,0,0,.15);border-radius:4px;background:#2a2a2a;color:var(--display-text);font-family:var(--font-led);padding:3px 5px}.sequencer__controls input{width:46px}.sequencer__controls select{min-width:0;width:100%;color:var(--text);background:#e8e8e8}.sequencer__toggle{display:inline-flex;align-items:center;border:none;border-radius:6px;overflow:visible;background:transparent;gap:2px;padding:2px}.sequencer__toggle button{border:0;border-radius:4px;background:linear-gradient(170deg,#f0f0f0,#d8d8d8);color:var(--text);min-width:32px;padding:5px 9px;cursor:pointer;text-transform:uppercase;letter-spacing:.06em;box-shadow:0 2px #0003,0 3px 6px #00000026,inset 0 1px #ffffff80;transition:background .12s,color .12s,transform .06s,box-shadow .1s}.sequencer__toggle button+button{border-left:none}.sequencer__toggle button:hover{background:linear-gradient(170deg,#fff,#e8e8e8);color:var(--text-bright)}.sequencer__toggle button.is-active{background:linear-gradient(170deg,#c8c8c8,#b0b0b0);color:var(--accent);box-shadow:inset 0 2px 4px #00000040,inset 0 1px 2px #0003,0 1px #ffffff1a;transform:translateY(1px)}.sequencer__grid{display:flex;flex-direction:column;gap:2px;padding:4px;border-radius:var(--radius-md);flex:1;min-height:0;overflow:visible}.sequencer__beat-numbers{display:flex;gap:4px;align-items:center;padding-bottom:1px}.sequencer__beat-numbers .sequencer__label{width:42px;flex-shrink:0}.sequencer__beat-num{flex:1;text-align:center;font-family:var(--font-mono);font-size:.5rem;font-weight:600;color:var(--text-muted);letter-spacing:.06em;opacity:.6;border-radius:3px;background:#e8e8e81a;border:1px solid rgba(0,0,0,.08);transition:color .08s,opacity .08s,box-shadow .12s,background .08s}.sequencer__beat-num.is-active{color:var(--accent);opacity:1;background:#d8451526;box-shadow:0 0 10px #d845154d,inset 0 0 8px #d8451526}.sequencer__row{display:flex;gap:4px;align-items:center}.sequencer__label{width:42px;flex-shrink:0;font-family:var(--font-mono);font-size:.52rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}.sequencer__bar{display:flex;gap:2px;flex:1;padding:2px;border-radius:4px;background:#ffffff04}.sequencer__bar--odd{background:#ffffff08}.sequencer__step{flex:1;min-width:0;height:22px;border-radius:4px;border:none;background:linear-gradient(170deg,#2a2a2a,#1a1a1a);cursor:pointer;transition:background .08s,transform .06s,box-shadow .1s;box-shadow:0 2px #0009,0 3px 6px #0006,inset 0 1px #ffffff14;padding:0}.sequencer__step:hover{background:linear-gradient(170deg,#3a3a3a,#2a2a2a)}.sequencer__step.is-on{background:linear-gradient(170deg,#ff7045,#ff5a25);box-shadow:0 2px #d84515,0 0 8px #ff6b3599,0 0 12px #ff6b3566,0 3px 6px #ff6b354d,inset 0 1px #ffffff4d,inset 0 0 8px #ff96644d;filter:brightness(1.1)}.sequencer__step.is-current{box-shadow:0 2px #0009,0 3px 6px #0006,inset 0 1px #ffffff14,inset 0 0 12px #ffffff14;filter:brightness(1.12)}.sequencer__step.is-on.is-current{filter:brightness(1.15) saturate(1.06);box-shadow:0 2px #00000080,0 0 12px #ffffff26,0 3px 6px #0000004d,inset 0 0 15px #ffffff1f,inset 0 1px #ffffff40}.mobile-message{display:none;position:fixed;top:0;left:0;width:100%;height:100vh;background:linear-gradient(135deg,#1a1a1a,#0d0d0d);z-index:9999;align-items:center;justify-content:center;padding:20px}.mobile-message__content{text-align:center;max-width:320px}.mobile-message__icon{font-size:4rem;margin-bottom:20px;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.mobile-message__content h2{font-family:var(--font-headline);font-size:1.5rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 15px;text-shadow:0 0 20px rgba(216,69,21,.3)}.mobile-message__content p{font-family:var(--font-display);font-size:1rem;color:var(--text-muted);line-height:1.5;margin:0}.app{display:grid;grid-template-columns:1fr minmax(230px,260px);grid-template-rows:auto auto auto;grid-template-areas:"header header" "pads   controls" "sequencer controls";align-items:stretch;gap:4px;width:960px;max-width:calc(100vw - 32px);padding:10px 10px 12px;border-radius:var(--radius-xl);background:var(--chassis);position:relative;border:3px solid;border-color:rgba(255,255,255,.1) rgba(0,0,0,.3) rgba(0,0,0,.4) rgba(255,255,255,.08);box-shadow:0 3px #ffffff14 inset,0 6px 12px #ffffff08 inset,0 -3px #00000080 inset,0 -8px 16px #0000004d inset,0 0 0 1px #0009,0 24px 48px #00000040,0 12px 24px #0003,0 6px 12px #00000026,0 32px 64px #0000001f}.app:before{content:"";position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px;border-radius:calc(var(--radius-xl) + 3px);background:linear-gradient(180deg,rgba(255,255,255,.05) 0%,transparent 20%,transparent 80%,rgba(0,0,0,.2) 100%);z-index:-1;pointer-events:none}.app>*{position:relative;z-index:1}.app__header{grid-area:header;display:flex;align-items:center;justify-content:space-between;padding:6px 8px 10px;border-bottom:2px solid rgba(255,255,255,.04);flex-shrink:0}.app__brand{display:flex;align-items:center;gap:10px}.app__brand-text{display:flex;flex-direction:column;gap:0}.app__brand-sub{font-family:var(--font-display);font-size:.48rem;font-weight:300;letter-spacing:.1em;color:var(--text-muted);text-transform:uppercase;line-height:1;margin-bottom:1px}.app__logo{width:12px;height:12px;border-radius:50%;position:relative;background:var(--panel-inset);box-shadow:inset 0 1px 2px #0000001a,inset 0 -1px 1px #ffffff1a}.app__logo:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f44,#c00);box-shadow:0 0 6px #f44,0 0 12px #ff444480,inset 0 -.5px 1px #ff645066,inset 0 .5px 1px #0003;animation:led-pulse 2s ease-in-out infinite}@keyframes led-pulse{0%,to{opacity:1;box-shadow:0 0 8px #f44,0 0 16px #f449}50%{opacity:.85;box-shadow:0 0 6px #f44,0 0 12px #f446}}.app__header h1{margin:0;font-family:var(--font-headline);font-size:.92rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--text-bright);text-shadow:0 0 20px rgba(216,69,21,.15)}.app__header-right{display:flex;align-items:center;gap:10px}.app__model-tag{font-family:var(--font-display);font-size:.68rem;font-weight:300;font-style:italic;color:var(--text);letter-spacing:.04em}.app__model-num{font-family:var(--font-headline);font-size:.62rem;font-weight:700;color:var(--accent);letter-spacing:.12em}.app__loading{font-family:var(--font-led);font-size:.68rem;color:var(--led-orange);animation:blink 1s step-end infinite}@keyframes blink{50%{opacity:.3}}.app__pads{grid-area:pads;min-height:0;display:flex;padding:0;background:var(--panel-inset);border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.04);box-shadow:inset 0 2px 8px #0006}.app__pads .pad-grid{flex:1;min-width:0;min-height:0}.app__sequencer{grid-area:sequencer;min-height:0;display:flex;flex-direction:column;overflow:visible;background:var(--panel-inset);border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.04);box-shadow:inset 0 2px 8px #0006}.app__sequencer .sequencer{margin:0}.app>.controls-panel{grid-area:controls;min-height:0}@media(max-width:960px){.mobile-message{display:flex}.app{display:none}}@media(min-width:961px)and (max-width:1200px){.app{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;grid-template-areas:"header" "pads" "sequencer" "controls";max-width:700px;width:100%}}:root{--bg: #d0d0d0;--chassis-dark: #a8a8a8;--chassis-mid: #c0c0c0;--chassis-light: #d8d8d8;--chassis-edge: rgba(0, 0, 0, .12);--chassis: linear-gradient(165deg, #c8c8c8, #b8b8b8);--panel-inset: #b8b8b8;--text: #2a2a2a;--text-dim: #4a4a4a;--text-muted: #6a6a6a;--text-bright: #000000;--accent: #d84515;--accent-hot: #ff6b35;--accent-glow: rgba(216, 69, 21, .5);--accent-dim: #b83810;--btn-black: #1a1a1a;--btn-light: #d8d8d8;--btn-white: #ececec;--btn-orange: #ff6b35;--led-green: #50c878;--led-red: #ff4444;--led-orange: #d84515;--display-bg: #1a1a1a;--display-text: #d84515;--hit-hat: #d84515;--font-display: "Outfit", system-ui, sans-serif;--font-headline: "Orbitron", "Chakra Petch", system-ui, sans-serif;--font-mono: "Share Tech Mono", "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--font-led: "Share Tech Mono", monospace;--radius-xl: 14px;--radius-lg: 10px;--radius-md: 8px;--radius-sm: 5px;--viz-energy: 0;--viz-hue: 0}*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100vh}#root{display:flex;align-items:center;justify-content:center;width:100%;min-height:100vh}body{font-family:var(--font-display);color:var(--text);background:radial-gradient(1200px 600px at 50% -100px,hsla(16,85%,calc(45% + var(--viz-energy) * 15%),calc(var(--viz-energy) * .4)) 0%,transparent 60%),radial-gradient(1200px 600px at 50% calc(100% + 100px),hsla(16,85%,calc(45% + var(--viz-energy) * 15%),calc(var(--viz-energy) * .4)) 0%,transparent 60%),radial-gradient(800px 1000px at -100px 50%,hsla(16,85%,calc(45% + var(--viz-energy) * 15%),calc(var(--viz-energy) * .4)) 0%,transparent 60%),radial-gradient(800px 1000px at calc(100% + 100px) 50%,hsla(16,85%,calc(45% + var(--viz-energy) * 15%),calc(var(--viz-energy) * .4)) 0%,transparent 60%),#fff;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:16px;box-sizing:border-box;transition:background .05s ease-out}h1,h2,h3,h4,h5,h6{font-family:var(--font-headline)}