*,:before,:after{box-sizing:border-box}html,body{background:var(--bg);width:100%;height:100%;color:var(--text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;touch-action:none;-webkit-user-select:none;user-select:none;overscroll-behavior:none;margin:0;padding:0;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:14px;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none}.app{flex-direction:column;width:100vw;height:100vh;display:flex}.start-card{text-align:center;flex-direction:column;align-items:center;display:flex}.start-card .start-btn{margin-top:24px}.start-btn{letter-spacing:.05em;color:var(--text);border:1px solid var(--panel-border);background:linear-gradient(#2a2a30,#18181c);border-radius:12px;padding:24px 48px;font-size:20px;font-weight:600;box-shadow:0 10px 40px #00000080,inset 0 1px #ffffff0f}.start-btn:active{transform:translateY(1px)}*{scrollbar-width:thin;scrollbar-color:var(--accent) var(--bg-deep)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-deep);box-shadow:inset 0 0 3px #000000b3}::-webkit-scrollbar-thumb{border:1px solid var(--panel-border);background:linear-gradient(#6b3e1f,#3a2010);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg, var(--accent), #8a3a14)}::-webkit-scrollbar-corner{background:var(--bg-deep)}:root{--bg:#0e0a06;--bg-deep:#050302;--panel:linear-gradient(180deg, #2c2620 0%, #1a1612 100%);--panel-flat:#1c1814;--panel-border:#5d4628;--panel-shadow:0 8px 24px #000000a6, inset 0 1px 0 #f4cd5e14, inset 0 0 0 1px #0000004d;--text:#e8d8b6;--text-dim:#a89372;--text-faint:#5d4a33;--accent:#e8742e;--accent-glow:#e8742e80;--accent-secondary:#f4cd5e;--accent-secondary-glow:#f4cd5e73;--led-on:#ff3a20;--led-off:#2a0a05;--key-white:linear-gradient(180deg, #ece1bc 0%, #c8b890 100%);--key-white-active:linear-gradient(180deg, #f4b56a 0%, #d4602a 100%);--key-black:linear-gradient(180deg, #1a0e08 0%, #050302 100%);--key-black-active:linear-gradient(180deg, #d4502a 0%, #8a2810 100%);--knob-bg:radial-gradient(circle at 35% 30%, #3a342c 0%, #1a1410 70%, #050302 100%);--knob-ring:#f4cd5e1f;--wood:linear-gradient(180deg, #4a2d18 0%, #6b3e1f 30%, #3a2010 70%, #2a1808 100%);--wood-grain:repeating-linear-gradient(90deg, #00000026 0px, #00000026 1px, transparent 1px, transparent 3px, #ffc8780d 3px, #ffc8780d 5px, transparent 5px, transparent 9px);--serif:"Georgia", "Times New Roman", serif}.knob{touch-action:none;flex-direction:column;align-items:center;gap:2px;width:52px;min-height:74px;display:flex}.knob-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.12em;text-align:center;font-size:9px;font-weight:600}.knob-dial{background:var(--knob-bg);cursor:ns-resize;border-radius:50%;width:44px;height:44px;position:relative;box-shadow:0 2px 3px #000000b3,inset 0 1px 1px #f4cd5e1f,inset 0 -2px 4px #0009,0 0 0 1px #00000080}.knob-indicator{background:var(--accent-secondary);transform-origin:50% 19px;width:3px;height:11px;box-shadow:0 0 6px var(--accent-secondary-glow);border-radius:2px;position:absolute;top:3px;left:50%;transform:translate(-50%)rotate(0)}.knob-arc{pointer-events:none;position:absolute;inset:-5px}.knob-arc circle{fill:none;stroke-width:2px}.knob-arc .track{stroke:var(--knob-ring)}.knob-arc .value{stroke:var(--accent);filter:drop-shadow(0 0 4px var(--accent-glow));transition:stroke-dashoffset 30ms linear}.knob-value{color:var(--text-dim);font-variant-numeric:tabular-nums;letter-spacing:.04em;min-height:11px;font-size:9px}.knob.dragging .knob-value{color:var(--accent);text-shadow:0 0 6px var(--accent-glow)}.switch{border:1px solid var(--panel-border);cursor:pointer;min-height:32px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;background:linear-gradient(#1a1410,#0a0805);border-radius:4px;align-items:center;gap:6px;padding:6px 10px;font-size:10px;font-weight:600;display:inline-flex;box-shadow:inset 0 1px #f4cd5e0a,0 1px 2px #0009}.switch:active{transform:translateY(.5px);box-shadow:inset 0 1px 3px #0009,inset 0 -1px #f4cd5e0a}.switch-led{background:var(--led-off);border-radius:50%;width:8px;height:8px;box-shadow:inset 0 1px 1px #000000e6,0 0 0 1px #0009}.switch.on .switch-led{background:var(--led-on);box-shadow:0 0 8px #ff3a20d9,inset 0 1px 1px #fff6,0 0 0 1px #0009}.switch.on{color:var(--text)}.switch-label{letter-spacing:.1em;font-size:10px}.segmented{border:1px solid var(--panel-border);background:linear-gradient(#0c0905,#1a1410);border-radius:4px;gap:2px;padding:2px;display:inline-flex;box-shadow:inset 0 1px 2px #000000b3,0 1px #f4cd5e0a}.segmented button{text-transform:uppercase;letter-spacing:.12em;color:var(--text-faint);min-width:30px;min-height:26px;font-size:8px;font-weight:700;font-family:var(--serif);border-radius:3px;padding:5px 9px}.segmented button.active{color:var(--accent-secondary);text-shadow:0 0 4px var(--accent-secondary-glow);background:linear-gradient(#4a3525,#2a1c10);box-shadow:inset 0 1px #f4cd5e26,inset 0 -1px 2px #00000080}.segmented.icons button{min-width:0;padding:5px 7px}.segmented button svg.wave-icon{width:22px;height:13px;display:block}.segmented button svg.wave-icon path{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round}.segmented button.active svg.wave-icon{filter:drop-shadow(0 0 3px var(--accent-secondary-glow))}.select{appearance:none;border:1px solid var(--panel-border);color:var(--text);letter-spacing:.08em;text-transform:uppercase;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%23f4cd5e'/></svg>") right 8px center no-repeat;border-radius:4px;min-height:32px;padding:7px 24px 7px 10px;font-size:11px;font-weight:600;box-shadow:inset 0 1px 2px #000000b3,0 1px #f4cd5e0a}.dropdown{display:inline-block;position:relative}.dropdown-toggle{border:1px solid var(--panel-border);color:var(--text);letter-spacing:.1em;text-transform:uppercase;font-size:11px;font-weight:700;font-family:var(--serif);cursor:pointer;background:linear-gradient(#1a1410,#0a0805);border-radius:4px;align-items:center;gap:10px;min-width:120px;min-height:32px;padding:7px 10px 7px 12px;display:inline-flex;box-shadow:inset 0 1px 2px #000000b3,0 1px #f4cd5e0a}.dropdown-label{text-align:left;color:var(--accent-secondary);text-shadow:0 0 4px var(--accent-secondary-glow);flex:1}.dropdown-caret{color:var(--text-dim);font-size:8px;transition:transform .12s}.dropdown.open .dropdown-caret{transform:rotate(180deg)}.dropdown-menu{border:1px solid var(--panel-border);z-index:1000;background:linear-gradient(#221c16 0%,#15110d 100%);border-radius:4px;min-width:100%;max-height:280px;padding:4px;display:none;position:fixed;overflow-y:auto;box-shadow:0 8px 24px #000000d9,0 0 0 1px #f4cd5e0d,inset 0 1px #f4cd5e14}.dropdown.open .dropdown-menu{display:block}.dropdown-option{width:100%;color:var(--text);letter-spacing:.1em;text-transform:uppercase;font-size:11px;font-weight:600;font-family:var(--serif);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:3px;padding:7px 10px;display:block}.dropdown-option:hover{color:var(--accent-secondary);background:linear-gradient(#3a2a18,#1f1610)}.dropdown-option.active{color:var(--accent-secondary);text-shadow:0 0 4px var(--accent-secondary-glow);background:linear-gradient(#4a3525,#2a1c10);box-shadow:inset 0 1px #f4cd5e26}.dropdown-compact{width:100%;display:block}.dropdown-compact .dropdown-toggle{justify-content:space-between;width:100%;padding:6px 8px;font-size:9px}.dropdown-compact .dropdown-label{text-transform:uppercase;letter-spacing:.12em}.dropdown-compact .dropdown-option{font-size:9px}.strip{border:1px solid var(--panel-border);touch-action:none;cursor:ns-resize;background:linear-gradient(#0a0805,#1a1410);border-radius:4px;flex:1;height:100%;position:relative;box-shadow:inset 0 2px 4px #000c,inset 0 -1px #f4cd5e0a}.strip-thumb{pointer-events:none;background:linear-gradient(#6a553c 0%,#2a1c10 50%,#6a553c 100%);border:1px solid #1a0e08;border-radius:3px;height:22px;position:absolute;left:2px;right:2px;box-shadow:0 2px 4px #000000b3,inset 0 1px #f4cd5e33}.strip-label{text-transform:uppercase;letter-spacing:.12em;color:var(--accent-secondary);white-space:nowrap;font-size:9px;font-weight:600;position:absolute;bottom:-18px;left:50%;transform:translate(-50%)}.keyboard{touch-action:none;-webkit-user-select:none;user-select:none;background:linear-gradient(#0a0604 0%,#1a0e08 100%);border-radius:4px;width:100%;height:100%;padding:6px;display:flex;position:relative;box-shadow:inset 0 2px 6px #000000e6,0 1px #f4cd5e0f}.key{cursor:pointer;touch-action:none;color:#3c281499;-webkit-user-select:none;user-select:none;font-size:8px;font-family:var(--serif);border-radius:0 0 4px 4px;flex:1;justify-content:center;align-items:flex-end;margin:0 1px;padding-bottom:6px;font-weight:600;display:flex;position:relative}.key.white{background:var(--key-white);box-shadow:inset 0 -3px 6px #50321466,inset 1px 0 #fff0c866,0 2px #0006}.key.white.active{background:var(--key-white-active);box-shadow:inset 0 -2px 8px #0000004d,inset 0 2px 4px #ffdcb466}.key.black{background:var(--key-black);color:#e8d8b666;z-index:2;border-radius:0 0 3px 3px;width:3%;height:60%;position:absolute;top:0;box-shadow:inset 0 -3px 6px #000c,inset 0 1px #f4cd5e0d,0 3px #000000b3}.key.black.active{background:var(--key-black-active);box-shadow:inset 0 -2px 6px #00000080,inset 0 2px 4px #ffb4824d,0 0 8px #e8502080}.key.white.seq{background:var(--key-white-active);box-shadow:inset 0 -2px 8px #0000004d,inset 0 2px 6px #f4cd5e99,0 0 12px #f4cd5e73}.key.black.seq{background:var(--key-black-active);box-shadow:inset 0 -2px 6px #00000080,inset 0 2px 4px #f4cd5e73,0 0 12px #f4cd5e99}.step{border:1px solid var(--panel-border);width:32px;height:32px;color:var(--text-faint);font-size:9px;font-weight:700;font-family:var(--serif);cursor:pointer;letter-spacing:.04em;background:linear-gradient(#1a1410,#0a0805);border-radius:4px;flex-shrink:0;transition:background 80ms,transform 60ms,border-color 80ms;box-shadow:inset 0 1px #f4cd5e0d,inset 0 -1px 2px #00000080,0 1px 2px #00000080}.step:active{transform:translateY(1px)}.step.on{color:#f4e4c2;text-shadow:0 1px #0009;background:linear-gradient(#d4602a 0%,#8a3010 100%);border-color:#d4602a;box-shadow:0 0 8px #e8742e80,inset 0 1px #ffdcb44d,inset 0 -1px 2px #00000080}.step-red.on{background:linear-gradient(#d4302a 0%,#8a1010 100%);border-color:#d4302a;box-shadow:0 0 8px #ff3a2080,inset 0 1px #ffb4a04d,inset 0 -1px 2px #00000080}.step-yellow.on{color:#1a1410;background:linear-gradient(#e8b542 0%,#8a6010 100%);border-color:#e8b542;box-shadow:0 0 8px #f4cd5e80,inset 0 1px #fff0b466,inset 0 -1px 2px #00000080}.step.playing{outline:2px solid var(--accent-secondary);outline-offset:-2px;box-shadow:0 0 12px var(--accent-secondary-glow), inset 0 1px 0 #f4cd5e33}.step.selected{border-color:var(--accent-secondary)}.step.drum-cell{width:24px;height:22px;font-size:8px}.tabs{background:var(--panel);border:1px solid var(--panel-border);box-shadow:var(--panel-shadow);border-radius:6px;flex-direction:column;min-height:0;display:flex;overflow:hidden}.tabs-bar{border-bottom:1px solid var(--panel-border);background:linear-gradient(#0a0604 0%,#16100b 100%);flex-shrink:0;padding:0 10px 0 6px;display:flex}.tab{text-transform:uppercase;letter-spacing:.18em;color:var(--text-faint);font-size:11px;font-weight:700;font-family:var(--serif);cursor:pointer;background:0 0;border-bottom:2px solid #0000;border-radius:0;padding:8px 18px}.tab.active{color:var(--accent-secondary);text-shadow:0 0 6px var(--accent-secondary-glow);border-bottom-color:var(--accent)}.tabs-body{flex:1;min-height:0;display:flex;position:relative}.tab-content{flex:1;min-width:0;min-height:0;padding:10px 12px;display:none;overflow:auto}.tab-content.visible{display:flex}.collapse-toggle{color:var(--accent-secondary);opacity:.7;border-radius:3px;margin-left:auto;padding:2px 10px;font-size:18px;line-height:1;transition:transform .14s,color .12s,opacity .12s}.collapse-toggle:hover{color:var(--accent-secondary);opacity:1}.collapsed .collapse-toggle{transform:rotate(-90deg)}.tabs.collapsed .tabs-body{display:none}.fx-section{flex-direction:column;gap:8px;min-width:0;display:flex}.fx-section-bar{border:1px solid var(--panel-border);box-shadow:var(--panel-shadow);background:linear-gradient(#0a0604 0%,#16100b 100%);border-radius:6px;align-items:center;padding:4px 10px;display:flex}.fx-section-title{text-transform:uppercase;letter-spacing:.18em;color:var(--accent-secondary);text-shadow:0 1px #000000b3;font-size:11px;font-weight:700}.fx-section.collapsed .fx-row{display:none}.pattern-panel{flex-direction:column;gap:10px;width:100%;display:flex}.pattern-panel-header{align-items:center;gap:12px;display:flex}.arp-body{flex-wrap:wrap;align-items:center;gap:18px;display:flex}.arp-group{flex-direction:column;gap:4px;display:flex}.arp-group-label{text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim);font-size:9px;font-weight:600}.arp-knobs{gap:12px;display:flex}.seq-selected-label{color:var(--accent-secondary);letter-spacing:.06em;font-variant-numeric:tabular-nums;font-size:11px}.step-row{grid-template-columns:repeat(16,minmax(0,1fr));gap:4px;width:100%;display:grid}.step-row .step{width:100%;min-width:0}.seq-edit{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.seq-note-ctrl{align-items:center;gap:6px;display:flex}.seq-note-label{text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim);margin-right:4px;font-size:9px}.seq-note-display{text-align:center;min-width:38px;color:var(--accent-secondary);font-size:13px;font-weight:700;font-family:var(--serif)}.seq-slider{align-items:center;gap:6px;min-width:200px;display:flex}.seq-slider-label{text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim);min-width:56px;font-size:9px}.seq-slider-track{border:1px solid var(--panel-border);cursor:ew-resize;touch-action:none;background:linear-gradient(#0a0604,#16100b);border-radius:5px;flex:1;height:10px;position:relative;overflow:hidden}.seq-slider-fill{background:linear-gradient(90deg,#d4602a,#f4cd5e);position:absolute;top:0;bottom:0;left:0;box-shadow:0 0 6px #e8742e80}.seq-slider-value{color:var(--text-dim);text-align:right;font-variant-numeric:tabular-nums;min-width:36px;font-size:10px}.drum-grid{flex-direction:column;gap:4px;display:flex}.drum-row{align-items:center;gap:8px;display:flex}.drum-row-ctrls{flex-shrink:0;align-items:center;gap:6px;width:130px;display:flex}.drum-track-label{border:1px solid var(--panel-border);color:var(--accent-secondary);font-size:10px;font-weight:700;font-family:var(--serif);letter-spacing:.08em;cursor:pointer;text-align:left;background:linear-gradient(#1a1410,#0a0805);border-radius:4px;min-width:64px;padding:4px 8px;box-shadow:inset 0 1px #f4cd5e0d}.drum-track-label:hover{color:var(--accent)}.drum-mute{min-height:24px!important;padding:4px 6px!important}.drum-mute .switch-label{font-size:8px!important}.sampler-panel .drum-row-ctrls{width:210px}.sampler-load{flex-shrink:0;min-height:24px!important;padding:4px 7px!important;font-size:9px!important}.sampler-name{text-overflow:ellipsis;white-space:nowrap;letter-spacing:0;flex:1;min-width:0;font-family:ui-monospace,monospace;font-size:9px;overflow:hidden}.sampler-name.needs-reload{color:#d9694f;border-color:#7a2b22;font-style:italic}.drum-cells{flex:1;grid-template-columns:repeat(16,minmax(0,1fr));gap:3px;min-width:0;display:grid}.drum-cells .step{width:100%;min-width:0;height:22px;font-size:0}.transport-group .play-btn{justify-content:center;min-width:64px}.play-btn.on .switch-label{color:var(--accent-secondary)}.about-backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1000;background:#080603d1;justify-content:center;align-items:center;transition:opacity .18s;display:flex;position:fixed;inset:0}.about-backdrop.hidden{opacity:0;pointer-events:none}.about{background:var(--panel);border:1px solid var(--panel-border);width:min(440px,92vw);max-height:86vh;box-shadow:var(--panel-shadow);border-radius:8px;padding:24px 26px;overflow-y:auto}.ai-modal{width:min(720px,94vw)}.ai-prompt-text{resize:vertical;width:100%;height:320px;color:var(--text);border:1px solid var(--panel-border);background:#0a0805;border-radius:4px;margin-top:12px;padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;line-height:1.4}.ai-actions{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.about-title{font-family:var(--serif);letter-spacing:.16em;color:var(--accent-secondary);text-transform:uppercase;text-shadow:0 0 6px var(--accent-secondary-glow), 0 1px 0 #000000d9;font-size:24px;font-weight:900}.about-tag{font-family:var(--serif);letter-spacing:.15em;color:var(--text-faint);text-transform:uppercase;margin-top:4px;font-size:9.5px;font-style:italic}.about-meta{color:var(--text-dim);letter-spacing:.04em;margin-top:16px;font-size:12px;line-height:1.8}.about-meta strong{color:var(--text);font-weight:700}.about-sec{text-transform:uppercase;letter-spacing:.2em;color:var(--accent-secondary);border-bottom:1px dashed #f4cd5e2e;margin-top:20px;padding-bottom:6px;font-size:10px}.about-keys{grid-template-columns:auto 1fr;align-items:baseline;gap:8px 18px;margin-top:12px;display:grid}.about-key{letter-spacing:.06em;color:var(--accent);white-space:nowrap;font-family:Courier New,monospace;font-size:11px;font-weight:700}.about-act{color:var(--text-dim);letter-spacing:.03em;font-size:12px}.about-close{justify-content:center;width:100%;margin-top:22px}.scope{background:radial-gradient(#0a0604 0%,#050302 100%);border:1px solid #2a1c10;border-radius:3px;width:100%;height:100%;display:block;box-shadow:inset 0 0 20px #000c,inset 0 0 0 1px #f4cd5e0d}.bank-bar{align-items:center;gap:8px;display:inline-flex}.bank-seg{border:1px solid var(--panel-border);background:linear-gradient(#0c0905,#1a1410);border-radius:4px;gap:2px;padding:2px;display:inline-flex;box-shadow:inset 0 1px 2px #000000b3}.bank-btn{min-width:30px;color:var(--text-faint);font-family:var(--serif);border-radius:3px;flex-direction:column;align-items:center;gap:2px;padding:5px 8px;font-size:11px;font-weight:700;display:flex;position:relative}.bank-btn .bank-letter{letter-spacing:.08em}.bank-btn .bank-dot{background:var(--led-off);border-radius:50%;width:5px;height:5px}.bank-btn.filled .bank-dot{background:var(--accent-secondary);box-shadow:0 0 4px var(--accent-secondary-glow)}.bank-btn.active{color:var(--accent-secondary);text-shadow:0 0 4px var(--accent-secondary-glow);background:linear-gradient(#4a3525,#2a1c10);box-shadow:inset 0 1px #f4cd5e26}.bank-btn.playing .bank-dot{background:var(--led-on);box-shadow:0 0 6px #ff3a20d9}.bank-copy{min-height:28px;padding:5px 9px}.bank-bar.copy-armed .bank-seg{outline:1px dashed var(--accent-secondary)}.song-panel{flex-direction:column;gap:14px;width:100%;display:flex}.song-section-label{text-transform:uppercase;letter-spacing:.18em;color:var(--text-dim);align-self:center;font-size:9px;font-weight:700}.song-chains{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.chain-lane{border:1px solid var(--panel-border);background:linear-gradient(#0c0905,#16100b);border-radius:6px;flex-direction:column;gap:8px;padding:10px;display:flex}.chain-head{align-items:center;gap:10px;display:flex}.chain-title{text-transform:uppercase;letter-spacing:.16em;color:var(--accent-secondary);flex:1;font-size:11px;font-weight:700}.chain-chips{flex-wrap:wrap;align-content:flex-start;gap:4px;min-height:30px;display:flex}.chain-chip{border:1px solid var(--panel-border);width:28px;height:28px;color:var(--text);font-family:var(--serif);background:linear-gradient(#1a1410,#0a0805);border-radius:4px;font-size:12px;font-weight:700}.chain-chip.sel{border-color:var(--accent-secondary)}.chain-chip.playing{color:#f4e4c2;background:linear-gradient(#d4602a 0%,#8a3010 100%);box-shadow:0 0 8px #e8742e80}.chain-controls{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.chain-add{gap:3px;display:inline-flex}.bank-btn.add{border:1px solid var(--panel-border);min-width:26px;color:var(--text-dim);background:linear-gradient(#1a1410,#0a0805);border-radius:3px;padding:5px 7px}.bank-btn.add:hover{color:var(--accent-secondary)}.chain-ctl{min-height:26px;padding:4px 8px}.dj-fx{border-top:1px dashed #f4cd5e2e;flex-wrap:wrap;align-items:center;gap:12px;padding-top:12px;display:flex}.dj-btn{min-height:36px;padding:8px 14px}.dj-btn.on{color:#1a1410;border-color:var(--accent);box-shadow:0 0 10px var(--accent-glow), inset 0 1px 0 #ffdcb44d;background:linear-gradient(#e8742e 0%,#8a3010 100%)}.dj-stutter{align-items:center;gap:6px;display:inline-flex}.dj-stutter-size button{min-width:26px}.song-io{border-top:1px dashed #f4cd5e2e;flex-wrap:wrap;align-items:center;gap:8px;padding-top:12px;display:flex}.song-io-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);font-size:10px}.demo-btn{color:var(--accent-secondary)}.app{background:var(--bg-deep);grid-template-rows:80px auto auto auto 1fr;gap:10px;padding:12px;display:grid;position:relative}.app:before,.app:after{content:"";background:var(--wood);background-image:var(--wood-grain), var(--wood);z-index:0;pointer-events:none;width:16px;position:absolute;top:0;bottom:0}.app:before{border-right:1px solid #000000b3;left:0;box-shadow:inset -3px 0 6px #000000b3,2px 0 4px #0006}.app:after{border-left:1px solid #000000b3;right:0;box-shadow:inset 3px 0 6px #000000b3,-2px 0 4px #0006}.app>*{z-index:1;position:relative}.app>:has(.dropdown.open){z-index:100}.header{background:var(--panel);border:1px solid var(--panel-border);box-shadow:var(--panel-shadow);z-index:10;border-radius:6px;align-items:center;gap:14px;margin:0 22px;padding:0 16px;display:flex}.header-title{font-family:var(--serif);letter-spacing:.18em;color:var(--accent-secondary);text-shadow:0 0 4px var(--accent-secondary-glow), 0 1px 0 #000c;text-transform:uppercase;font-size:18px;font-weight:900}.brand{border-right:1px solid #f4cd5e2e;flex-direction:column;gap:1px;margin-right:4px;padding-right:8px;line-height:1;display:flex}.brand-row{align-items:center;gap:10px;display:flex}.brand-name{font-family:var(--serif);letter-spacing:.18em;color:var(--accent-secondary);text-shadow:0 0 6px var(--accent-secondary-glow), 0 1px 0 #000000d9, 0 2px 4px #0009;text-transform:uppercase;font-size:26px;font-weight:900}.brand-model{letter-spacing:.14em;color:var(--accent);text-shadow:0 0 4px var(--accent-glow);background:#0006;border:1px solid #e8742e8c;border-radius:3px;padding:3px 8px;font-family:Courier New,monospace;font-size:15px;font-weight:700;line-height:1}.brand-tagline{font-family:var(--serif);letter-spacing:.15em;color:var(--text-faint);text-transform:uppercase;margin-top:4px;font-size:8.5px;font-style:italic}.header-spacer{flex:1}.header-group{text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);align-items:center;gap:10px;font-size:11px;display:flex}.main{grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin:0 22px;display:grid}.panel{background:var(--panel);border:1px solid var(--panel-border);box-shadow:var(--panel-shadow);border-radius:6px;flex-direction:column;gap:8px;min-width:0;min-height:0;padding:8px 10px 10px;display:flex}.panel-title{text-transform:uppercase;letter-spacing:.2em;color:var(--accent-secondary);text-align:center;text-shadow:0 1px #000000b3;border-bottom:1px dashed #f4cd5e2e;padding-bottom:6px;font-size:10px;font-weight:600}.panel-body{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:8px;display:flex}.panel-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;width:100%;display:flex}.fx-section{margin:0 22px}.fx-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;display:grid}.fx-panel{background:var(--panel);border:1px solid var(--panel-border);box-shadow:var(--panel-shadow);border-radius:6px;flex-direction:column;gap:6px;min-width:0;padding:8px 10px 10px;display:flex}.fx-header{border-bottom:1px dashed #f4cd5e2e;justify-content:space-between;align-items:center;gap:8px;padding-bottom:4px;display:flex}.fx-title{text-transform:uppercase;letter-spacing:.18em;color:var(--accent-secondary);text-shadow:0 1px #000000b3;font-size:11px;font-weight:700}.fx-knobs{flex-wrap:wrap;justify-content:space-around;align-items:center;gap:4px;display:flex}.pattern-row{min-height:240px;margin:0 22px}.pattern-row.collapsed{min-height:0}.bottom{grid-template-rows:130px 1fr;gap:10px;min-height:0;margin:0 22px;display:grid}.bottom-top{grid-template-columns:100px 1fr;gap:10px;min-height:0;display:grid}.wheels{background:var(--panel);border:1px solid var(--panel-border);box-shadow:var(--panel-shadow);border-radius:6px;align-items:stretch;gap:8px;padding:8px 8px 22px;display:flex}.scope-wrap{background:var(--panel);border:1px solid var(--panel-border);box-shadow:var(--panel-shadow);border-radius:6px;min-height:0;padding:8px;display:flex;position:relative}.scope-toggle{z-index:1;position:absolute;top:8px;right:8px;min-height:28px!important;padding:4px 10px!important;font-size:10px!important}.keyboard-wrap{background:var(--panel);border:1px solid var(--panel-border);box-shadow:var(--panel-shadow);border-radius:6px;min-height:0;padding:8px}@media (max-width:1280px){.main{grid-template-columns:repeat(4,minmax(0,1fr))}.panel-mixer-tall{grid-row:span 2}}@media (max-width:820px){.main{grid-template-columns:repeat(2,minmax(0,1fr))}.fx-row{grid-template-columns:repeat(2,1fr)}}