/*
* ════════════════════════════════════════════════════════════════════
* KinetiTone — Stylesheet
* Neumorphic dark-panel design system built on CSS custom properties.
*
* SECTION INDEX
* ─────────────────────────────────────────────────────────────────
* §1 Design Tokens & CSS Variables ............ :root
* §2 Base Reset & Global Styles ................ *, html, body
* §3 720p Fixed Screen Mode .................... body.mode-720
* §4 App Layout Grid .......................... #app
* §5 Top Bar .................................. #topbar, .logo, .nbtn
* §6 Neumorphic Button System ................. .nbtn variants
* §7 Range Slider (nslider) ................... .nslider
* §8 Collapsible Panels ....................... .panel, .panel-b
* §9 Layout Regions .......................... #sidebar-l/r, #main
* §10 Tab System .............................. .tabs, .tab-body
* §11 Visualizer Grid ......................... .viz-grid, .viz-box
* §12 Rotary Knob Component ................... .knob-*
* §13 Select / Dropdown (nsel) ................ .nsel, option
* §14 Layer Mixer Rows ........................ .layer-row, .l-btn
* §15 Effects Rack ............................ .fx-row, .fx-sw
* §16 Instrument Selector ..................... .instr-tabs, .instr-btn
* §17 Bottom Bar & History Strip .............. #bottombar, .hist-*
* §18 Piano Section .......................... #piano-section, .piano-oct-ctrl
* §19 Custom Select Dropdowns ................. .pkr-dd-*, .csel-*
* §20 Piano Keys (88-key layout) .............. .piano-88, .pk-w88, .pk-b88
* §21 Synth Key Highlight Animations ........... .pk-synth-hl, @keyframes pk-*
* §22 Export Dialog .......................... .export-backdrop, .export-dialog
* §23 Misc UI Controls ........................ .toggle3, .inline-ed, .filter-cv
* §24 Batch Panel ............................ .batch-grid, .batch-item
* §25 Settings Modal ......................... .settings-backdrop, .settings-modal
* §26 Hotkeys Pane ........................... .hk-row, .hk-badge
* §27 Form Controls .......................... .ncheck, number input, toggles
* §28 Welcome & Splash Animations ............. #welcome, @keyframes ktDot/Ring
* §29 Responsive — Mobile Breakpoints ......... @media (max-width: 900px)
* ════════════════════════════════════════════════════════════════════
*/
/* ╔══════════════════════════════════════════════════════════════════
* § 1 Design Tokens & CSS Variables
* All --custom-properties live here. Edit here to retheme the entire UI.
* ╚══════════════════════════════════════════════════════════════════ */
:root{
--base:#292D34;--base-light:#2F3339;--base-dark:#22252B;
--accent:#FE7648;--green:#7BC678;
--mint:#DDEEDD;--mint-dim:rgba(221,238,221,0.45);--mint-faint:rgba(221,238,221,0.15);--mint-ghost:rgba(221,238,221,0.07);
--shadow-dark:#1C1F24;--shadow-light:#363B43;
--neu-raised:5px 5px 10px var(--shadow-dark),-5px -5px 10px var(--shadow-light);
--neu-raised-sm:3px 3px 6px var(--shadow-dark),-3px -3px 6px var(--shadow-light);
--neu-inset:inset 3px 3px 6px var(--shadow-dark),inset -3px -3px 6px var(--shadow-light);
--neu-inset-sm:inset 2px 2px 4px var(--shadow-dark),inset -2px -2px 4px var(--shadow-light);
--radius:14px;--radius-sm:10px;--radius-xs:6px;
--font:'Nunito',sans-serif;--mono:'IBM Plex Mono',monospace;
--transition:150ms ease;--knob-size:54px;--glow-accent:rgba(254,118,72,0.35);
}
*{margin:0;padding:0;box-sizing:border-box;}
/* ╔══════════════════════════════════════════════════════════════════
* § 2 Base Reset & Global Styles
* ╚══════════════════════════════════════════════════════════════════ */
html{width:100%;height:100%;overflow:hidden;}
body{position:fixed;inset:0;overflow:hidden;background:var(--base);color:var(--mint);font-family:var(--font);font-size:12px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;}
input,textarea,select,.inline-ed{-webkit-user-select:text;user-select:text;}
:root.theme-smooth,:root.theme-smooth *{transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease,fill .3s ease,stroke .3s ease;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--shadow-light);border-radius:3px;}
::selection{background:var(--accent);color:var(--base);}
button,select,input{font-family:inherit;outline:none;}
button,.nbtn,.btn-gear,.panel-collapse,.tab,.instr-btn,.l-btn,.fx-sw{touch-action:manipulation;}
/* ── KinetiTone Icon System (.kti) ────────────────────────────────
Inline SVG icons: scale with font-size, inherit color, pixel-crisp.
All icons are filled-path style to match the existing gear icon. */
svg.kti{display:inline-block;width:1em;height:1em;vertical-align:-0.13em;flex-shrink:0;pointer-events:none;overflow:visible;}
.hc-fav-btn svg.kti{width:1.15em;height:1.15em;vertical-align:-0.18em;}
.exp-play-btn svg.kti,.exp-dl-btn svg.kti{width:.9em;height:.9em;vertical-align:-0.1em;margin-right:1px;}
.settings-close svg.kti{width:.85em;height:.85em;vertical-align:-0.08em;}
#tooltip svg.kti{width:.9em;height:.9em;vertical-align:-0.12em;margin-right:2px;}
.hk-conflict-toast svg.kti{width:.9em;height:.9em;vertical-align:-0.12em;margin-right:2px;}
#audio-unlock-banner svg.kti{width:1em;height:1em;vertical-align:-0.12em;margin-right:4px;}
.rrp-play-btn svg.kti,.rec-btn-inner svg.kti{width:.9em;height:.9em;vertical-align:-0.1em;margin-right:1px;}
.export-dialog-head svg.kti{width:1em;height:1em;vertical-align:-0.13em;margin-right:5px;}
.rotate-icon svg.kti{width:2.5em;height:2.5em;vertical-align:middle;}
input[type="range"],.nslider{touch-action:pan-x;}
#topbar,#piano-wrap,.hist-strip{-webkit-overflow-scrolling:touch;}
canvas{display:block;}
/* ╔══════════════════════════════════════════════════════════════════
* § 3 720p Fixed Screen Mode
* Activated via body.mode-720 — locks canvas to 1280×720px.
* ╚══════════════════════════════════════════════════════════════════ */
body.mode-720{display:flex;align-items:center;justify-content:center;background:#111;}
body.mode-720 #app{position:relative;inset:auto;width:1280px;height:720px;overflow:hidden;flex-shrink:0;padding:8px;border-radius:var(--radius);box-shadow:0 8px 40px rgba(0,0,0,0.6);grid-template-rows:52px 1fr 230px;}
body.mode-720 #topbar{border-radius:var(--radius);}
body.mode-720 #bottombar{border-radius:var(--radius);}
body.mode-720 #sidebar-l{padding:0;}
body.mode-720 #sidebar-r{padding:0;}
/* ╔══════════════════════════════════════════════════════════════════
* § 4 App Layout Grid
* #app uses CSS Grid: [topbar] [sidebar-l | main | sidebar-r] [bottombar]
* ╚══════════════════════════════════════════════════════════════════ */
#app{display:grid;grid-template-rows:52px 1fr 230px;grid-template-columns:256px 1fr 240px;position:fixed;inset:0;padding:0;gap:8px;background:var(--base);overflow:hidden;}
/* ── Top Bar (#topbar) ──────────────────────────────────────── */
#topbar{grid-column:1/-1;background:var(--base);box-shadow:var(--neu-raised);border-radius:0 0 var(--radius) var(--radius);display:flex;align-items:center;padding:0 14px;gap:6px;}
.logo{font-family:var(--mono);font-weight:700;font-size:14px;color:var(--accent);letter-spacing:1.5px;display:flex;align-items:center;gap:7px;white-space:nowrap;user-select:none;}
.logo-hex{width:26px;height:26px;background:var(--base);box-shadow:var(--neu-raised-sm);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:14px;font-weight:800;}
.divider{width:1px;height:26px;background:var(--mint-ghost);margin:0 4px;flex-shrink:0;}
/* ╔══════════════════════════════════════════════════════════════════
* § 6 Neumorphic Button System
* .nbtn is the base for all interactive buttons. Variants: .primary .green .sm
* ╚══════════════════════════════════════════════════════════════════ */
.nbtn{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;background:var(--base);box-shadow:var(--neu-raised-sm);border:none;border-radius:var(--radius-xs);color:var(--mint-dim);font-size:11px;font-weight:600;cursor:pointer;transition:all var(--transition);white-space:nowrap;letter-spacing:0.3px;}
.nbtn:hover{color:var(--mint);}
.nbtn:active,.nbtn.pressed{box-shadow:var(--neu-inset-sm);color:var(--accent);}
.nbtn.primary{color:var(--accent);}
.nbtn.green{color:var(--green);}
.nbtn.sm{padding:3px 8px;font-size:10px;}
.nbtn kbd{font-family:var(--mono);font-size:8px;padding:1px 3px;background:var(--mint-ghost);border-radius:3px;color:var(--mint-dim);}
.spacer{flex:1;}
.seed-group{display:flex;align-items:center;gap:3px;padding:3px 5px 3px 10px;background:var(--base);box-shadow:var(--neu-inset-sm);border-radius:var(--radius-xs);}
/* ── Seed group / Volume wrap / Recording wrap ──────────────── */
.seed-group label{color:var(--mint-dim);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;}
.seed-group input{background:transparent;border:none;color:var(--accent);font-family:var(--mono);font-size:11px;font-weight:600;width:84px;text-align:center;}
#seed-mod-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0;align-self:center;display:none;box-shadow:0 0 5px var(--glow-accent);animation:sdpulse 2s ease-in-out infinite;}
@keyframes sdpulse{0%,100%{opacity:.5}50%{opacity:1}}
.vol-wrap{display:flex;align-items:center;gap:5px;}
.vol-wrap label{color:var(--mint-dim);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;}
.rec-wrap{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.rec-dur{width:48px;padding:3px 18px 3px 6px;font-size:10px;font-family:var(--mono);}
.rec-btn{min-width:62px;justify-content:center;}
.rec-btn.rec-on{color:#ff9a9a;box-shadow:var(--neu-inset-sm),0 0 0 1px rgba(255,122,122,0.35);animation:recPulse 1s ease-in-out infinite;}
@keyframes recPulse{0%,100%{opacity:1;}50%{opacity:.62;}}
#rec-flash{position:fixed;inset:0;background:#00ff88;opacity:0;pointer-events:none;z-index:9999;}
@keyframes recFlash{0%{opacity:0;}20%{opacity:.15;}100%{opacity:0;}}
#rec-timer{position:fixed;left:50%;top:56px;transform:translateX(-50%);background:var(--base-dark);box-shadow:var(--neu-raised-sm);color:#ff9a9a;padding:4px 12px;border-radius:var(--radius-xs);font-size:12px;font-weight:700;z-index:1000;pointer-events:none;letter-spacing:0.5px;display:none;}
#rec-review-backdrop{position:fixed;inset:0;background:rgba(20,23,28,0.82);backdrop-filter:blur(12px);z-index:900;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.22s ease;pointer-events:none;}
#rec-review-backdrop.open{opacity:1;pointer-events:auto;}
#rec-review-dialog{background:var(--base);box-shadow:var(--neu-raised),0 20px 60px rgba(0,0,0,0.5);border-radius:var(--radius);width:340px;display:flex;flex-direction:column;overflow:hidden;transform:scale(0.94) translateY(12px);transition:transform 0.22s ease;}
#rec-review-backdrop.open #rec-review-dialog{transform:scale(1) translateY(0);}
.rrp-play-btn.playing{color:var(--accent) !important;box-shadow:var(--neu-inset-sm) !important;}
/* ╔══════════════════════════════════════════════════════════════════
* § 7 Range Slider (.nslider)
* Custom-styled . Thumb uses neumorphic raised shadow.
* ╚══════════════════════════════════════════════════════════════════ */
.nslider{-webkit-appearance:none;height:6px;background:var(--base);box-shadow:var(--neu-inset-sm);border-radius:3px;outline:none;width:68px;}
.nslider::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--base);box-shadow:var(--neu-raised-sm);cursor:pointer;border:2px solid var(--accent);transition:transform var(--transition);}
.nslider::-webkit-slider-thumb:hover{transform:scale(1.1);}
.preset-group{display:flex;gap:3px;align-items:center;}
/* ── Preset slot buttons ────────────────────────────────────── */
.preset-slot{width:22px;height:22px;background:var(--base);box-shadow:var(--neu-raised-sm);border:none;border-radius:4px;color:var(--mint-dim);font-size:9px;font-weight:700;cursor:pointer;transition:all var(--transition);display:flex;align-items:center;justify-content:center;font-family:var(--mono);}
.preset-slot:hover{color:var(--mint);}
.preset-slot.has-data{color:var(--accent);}
.preset-slot:active{box-shadow:var(--neu-inset-sm);}
/* Empty slots look like skeleton placeholders so users see they're fill-able */
.preset-slot:not(.has-data){background:transparent;box-shadow:inset 0 0 0 1px var(--mint-ghost);color:var(--mint-faint);}
.preset-slot:not(.has-data):hover{box-shadow:inset 0 0 0 1px var(--mint-dim);color:var(--mint-dim);}
/* ── Gear icon button (.btn-gear) ───────────────────────────── */
.btn-gear{width:30px;height:30px;background:var(--base);box-shadow:var(--neu-raised-sm);border:none;border-radius:var(--radius-xs);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition);}
.btn-gear:hover{box-shadow:var(--neu-raised);}
.btn-gear:active{box-shadow:var(--neu-inset-sm);}
.btn-gear svg{width:15px;height:15px;fill:var(--mint-dim);transition:fill var(--transition);}
.btn-gear:hover svg{fill:var(--accent);}
/* ╔══════════════════════════════════════════════════════════════════
* § 8 Collapsible Panels
* .panel-b animates via max-height. Toggled by togglePanel(id).
* ╚══════════════════════════════════════════════════════════════════ */
.panel{background:var(--base);box-shadow:var(--neu-raised);border-radius:var(--radius);margin-bottom:6px;overflow:hidden;}
.panel-h{display:flex;align-items:center;justify-content:space-between;padding:7px 11px;}
.panel-h h3{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--mint-dim);}
.panel-h-right{display:flex;align-items:center;gap:5px;}
.panel-h .count{font-family:var(--mono);font-size:9px;font-weight:600;padding:1px 6px;background:var(--base);box-shadow:var(--neu-inset-sm);border-radius:8px;color:var(--accent);}
.panel-collapse{width:18px;height:18px;background:transparent;border:none;cursor:pointer;color:var(--mint-dim);font-size:10px;display:flex;align-items:center;justify-content:center;transition:all var(--transition);border-radius:3px;}
.panel-collapse:hover{color:var(--accent);}
.panel-b{padding:3px 10px 8px;overflow:hidden;transition:max-height 0.3s ease,padding 0.3s ease;max-height:800px;}
/* Per-panel padding tweaks (replaces former inline styles so the collapse
rule below can reliably override them — inline styles beat any selector). */
.panel-b-tight-b{padding-bottom:4px;}
.panel-b-tight-t{padding-top:4px;}
/* Collapse: zero out max-height AND all vertical padding. Listing every
panel-b variant keeps specificity high enough and behaviour identical
for Engine/Instruments and Layers/Pitch alike — no stray sliver. */
.panel.collapsed .panel-b,
.panel.collapsed .panel-b-tight-b,
.panel.collapsed .panel-b-tight-t{max-height:0;padding-top:0;padding-bottom:0;}
.panel-collapse-icon{display:inline-block;transition:transform 0.25s ease;}
.panel.collapsed .panel-collapse-icon{transform:rotate(-90deg);}
/* ╔══════════════════════════════════════════════════════════════════
* § 9 Layout Regions
* Three columns of the main grid. Sidebar scrolls independently.
* ╚══════════════════════════════════════════════════════════════════ */
#sidebar-l{overflow-y:auto;display:flex;flex-direction:column;background:var(--base);padding:0 0 0 8px;}
#sidebar-r{overflow-y:auto;display:flex;flex-direction:column;background:var(--base);padding:0 8px 0 0;}
#main{background:var(--base);box-shadow:var(--neu-raised);border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden;}
/* ╔══════════════════════════════════════════════════════════════════
* § 10 Tab System
* .tab + .tab-body pairs. Active state toggled by switchTab().
* ╚══════════════════════════════════════════════════════════════════ */
.tabs{display:flex;gap:0;padding:5px 8px 0;}
.tab{padding:7px 13px;cursor:pointer;color:var(--mint-dim);font-size:11px;font-weight:600;border-radius:var(--radius-xs) var(--radius-xs) 0 0;transition:all var(--transition);letter-spacing:0.3px;background:transparent;border:none;}
.tab:hover{color:var(--mint);}
.tab.active{color:var(--accent);background:var(--base-dark);box-shadow:var(--neu-inset-sm);border-radius:var(--radius-xs);}
.tab-body{display:none;padding:12px 14px;overflow-y:auto;flex:1;background:var(--base-dark);border-radius:0 0 var(--radius-sm) var(--radius-sm);margin:0 4px 4px;box-shadow:var(--neu-inset-sm);}
.tab-body.active{display:block;}
/* ── Two-column tab split: left = primary, right = secondary (no scroll) ── */
.tab-body.tab-2col{display:none;padding:0;overflow:hidden;flex:1;background:var(--base-dark);border-radius:0 0 var(--radius-sm) var(--radius-sm);margin:0 4px 4px;box-shadow:var(--neu-inset-sm);}
.tab-body.tab-2col.active{display:flex;flex-direction:row;align-items:stretch;}
/* M3 fix: overflow-y:auto instead of hidden so knobs scroll if they overflow */
.tab-2col-left{flex:1 1 0;min-width:0;padding:12px 10px 12px 14px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:0;border-right:1px solid var(--mint-ghost);}
/* N2 fix: wider right column so 5 filter-env knobs fit */
.tab-2col-right{flex:0 0 48%;max-width:240px;padding:12px 14px 12px 12px;display:flex;flex-direction:column;justify-content:center;gap:0;overflow-y:auto;overflow-x:hidden;}
/* ═══════════════════════════════════════════════════════════════
CHORD BUILDER — professional redesign
Available: ~387px tall × ~750px wide (1280px viewport)
3 columns: Left(210px) | Center(flex) | Right(190px)
No overflow anywhere — designed to fit precisely.
═══════════════════════════════════════════════════════════════ */
#tab-chord{padding:0!important;overflow:hidden!important;}
#tab-chord.active{
display:grid;
grid-template-columns:230px 1fr 190px;
grid-template-rows:1fr;
height:100%;overflow:hidden;
}
.cb-col{display:flex;flex-direction:column;gap:6px;overflow:hidden;padding:8px;}
.cb-col-left {border-right:1px solid rgba(255,255,255,0.05);}
.cb-col-center{padding:8px 10px;}
.cb-col-right {border-left:1px solid rgba(255,255,255,0.05);}
.cb-section{
background:var(--base);box-shadow:var(--neu-raised-sm);
border-radius:var(--radius-sm);padding:9px 11px;
display:flex;flex-direction:column;gap:7px;flex-shrink:0;
}
.cb-section.grow{flex:1;min-height:0;}
.cb-sec-label{
font-size:9px;font-weight:800;text-transform:uppercase;
letter-spacing:0.9px;display:flex;align-items:center;
gap:5px;color:var(--mint-dim);flex-shrink:0;
}
.cb-sec-label::before{
content:'';width:3px;height:9px;border-radius:1.5px;
flex-shrink:0;background:var(--cb-col,var(--accent));
}
.cb-sec-accent {--cb-col:var(--accent);}
.cb-sec-green {--cb-col:var(--green);}
.cb-sec-blue {--cb-col:rgba(86,207,225,0.9);}
.cb-sec-purple {--cb-col:var(--purple);}
/* Root + Type: two inner columns inside one section */
.cb-rt-wrap{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:start;}
.cb-rt-col{display:flex;flex-direction:column;gap:5px;}
.cb-rt-label{
font-size:8px;font-weight:800;text-transform:uppercase;
letter-spacing:0.6px;padding-left:1px;
}
.cb-root-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;}
.cb-root-btn{
padding:6px 1px;background:var(--base-dark);box-shadow:var(--neu-raised-sm);
border:none;border-radius:var(--radius-xs);
color:var(--mint-dim);font-family:var(--mono);font-size:9px;font-weight:700;
cursor:pointer;transition:all 90ms;text-align:center;
}
.cb-root-btn:hover{color:var(--mint);}
.cb-root-btn.active{
box-shadow:var(--neu-inset-sm);color:var(--accent);
text-shadow:0 0 8px var(--glow-accent);
}
.cb-type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;}
.cb-type-btn{
padding:6px 2px;background:var(--base-dark);box-shadow:var(--neu-raised-sm);
border:none;border-radius:var(--radius-xs);
color:var(--mint-dim);font-family:var(--mono);font-size:9px;font-weight:700;
cursor:pointer;transition:all 90ms;text-align:center;
}
.cb-type-btn:hover{color:var(--mint);}
.cb-type-btn.active{box-shadow:var(--neu-inset-sm);color:var(--green);}
.cb-oct-row{display:flex;align-items:center;gap:4px;margin-top:1px;}
.cb-oct-row .nbtn{padding:4px 8px;font-size:10px;min-width:24px;justify-content:center;}
.cb-oct-row .cb-dim{min-width:0;font-size:8px;}
#cb-oct-display{
font-family:var(--mono);font-size:11px;font-weight:800;
color:var(--accent);min-width:18px;text-align:center;
}
.cb-opt-strip{display:flex;gap:4px;}
.cb-opt-btn{
flex:1;padding:6px 3px;background:var(--base-dark);box-shadow:var(--neu-raised-sm);
border:none;border-radius:var(--radius-xs);
color:var(--mint-dim);font-family:var(--mono);font-size:9px;font-weight:700;
cursor:pointer;transition:all 90ms;text-align:center;white-space:nowrap;
}
.cb-opt-btn:hover{color:var(--mint);}
.cb-opt-btn.active{box-shadow:var(--neu-inset-sm);color:rgba(86,207,225,0.9);}
.cb-opt-btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:var(--neu-raised-sm);color:var(--mint-dim);}
.cb-opt-btn:disabled:hover{color:var(--mint-dim);}
#cb-voice-list{display:flex;flex-direction:column;gap:5px;}
.cb-voice-row{
display:grid;grid-template-columns:18px 54px 1fr 1fr 24px;
align-items:center;gap:7px;
background:var(--base-dark);border-radius:var(--radius-sm);
padding:7px 10px;position:relative;overflow:hidden;flex-shrink:0;
}
.cb-voice-row::before{
content:'';position:absolute;left:0;top:0;bottom:0;
width:3px;background:var(--vc,var(--accent));
border-radius:3px 0 0 3px;
}
.cb-voice-row.muted{opacity:.35;}
.cb-vnum{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--mint-dim);text-align:center;}
.cb-vnote{font-family:var(--mono);font-size:11px;font-weight:800;color:var(--mint);line-height:1.2;}
.cb-vint{font-family:var(--mono);font-size:8.5px;color:var(--mint-dim);}
.cb-vsl{display:flex;flex-direction:column;gap:3px;}
.cb-vsl-row{display:flex;align-items:center;gap:4px;}
.cb-vsl-lbl{font-family:var(--mono);font-size:7.5px;color:var(--mint-dim);width:20px;flex-shrink:0;letter-spacing:0.2px;}
.cb-vmute{
width:24px;height:24px;background:var(--base);box-shadow:var(--neu-raised-sm);
border:none;border-radius:5px;color:var(--mint-dim);font-size:8.5px;font-weight:800;
cursor:pointer;transition:all 80ms;
display:flex;align-items:center;justify-content:center;
font-family:var(--mono);flex-shrink:0;
}
.cb-vmute.on{box-shadow:var(--neu-inset-sm);color:var(--accent);}
.cb-sep{height:1px;background:rgba(255,255,255,0.05);flex-shrink:0;}
.cb-global-rows{display:flex;flex-direction:column;gap:6px;}
.cb-sl-row{display:flex;align-items:center;gap:7px;}
.cb-dim{color:var(--mint-dim);font-size:8.5px;font-weight:700;font-family:var(--mono);letter-spacing:0.2px;white-space:nowrap;min-width:42px;}
.cb-val{color:var(--mint-dim);font-size:8.5px;font-weight:700;font-family:var(--mono);min-width:30px;text-align:right;white-space:nowrap;}
.cb-chord-badge{
font-family:var(--mono);font-size:16px;font-weight:800;
color:var(--accent);text-align:center;letter-spacing:0.5px;
padding:2px 0 4px;flex-shrink:0;
}
#cb-diagram{display:block;margin:0 auto;flex-shrink:0;}
.cb-play-row{display:flex;gap:5px;flex-shrink:0;}
.cb-play-row .nbtn{flex:1;justify-content:center;padding:8px 6px;font-size:11px;font-weight:700;}
.cb-stagger-row{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.cb-info{font-family:var(--mono);font-size:8px;color:var(--mint-faint);text-align:center;flex-shrink:0;}
/* Voice Mixer / Global slider reset — small, right-aligned, neumorphic */
.cb-mixer-reset-row{display:flex;justify-content:flex-end;margin-top:7px;flex-shrink:0;}
.cb-mixer-reset{
font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:0.4px;
text-transform:uppercase;color:var(--mint-dim);
background:var(--base);box-shadow:var(--neu-raised-sm);
border:none;border-radius:var(--radius-xs);padding:5px 12px;
cursor:pointer;transition:all 90ms;
}
.cb-mixer-reset:hover{color:var(--mint);box-shadow:var(--neu-raised);}
.cb-mixer-reset:active{box-shadow:var(--neu-inset-sm);color:var(--accent);}
/* ╔══════════════════════════════════════════════════════════════════
* § 11 Visualizer Grid
* 2×2 grid of canvas boxes: Scope | Spectrum | Spectrogram | Level
* ╚══════════════════════════════════════════════════════════════════ */
.viz-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:5px;flex-shrink:0;}
.viz-box{background:var(--base-dark);border-radius:var(--radius-sm);box-shadow:var(--neu-inset-sm);position:relative;overflow:hidden;height:78px;}
.viz-box canvas{width:100%;height:100%;}
.viz-tag{position:absolute;top:4px;left:7px;font-family:var(--mono);font-size:8px;font-weight:600;color:var(--mint-dim);letter-spacing:0.8px;text-transform:uppercase;pointer-events:none;z-index:2;}
/* ╔══════════════════════════════════════════════════════════════════
* § 12 Rotary Knob Component
* SVG-based knob. Arc drawn via arc() helper. Drag = ns-resize.
* ╚══════════════════════════════════════════════════════════════════ */
.knob-group{display:inline-flex;flex-direction:column;align-items:center;margin:3px 4px;}
.knob-lbl{font-size:9px;font-weight:600;color:var(--mint-dim);margin-bottom:2px;text-align:center;max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;letter-spacing:0.3px;}
.knob-body{width:var(--knob-size);height:var(--knob-size);position:relative;cursor:ns-resize;background:var(--base);border-radius:50%;box-shadow:var(--neu-raised-sm);display:flex;align-items:center;justify-content:center;}
.knob-body svg{width:42px;height:42px;}
.knob-val{font-family:var(--mono);font-size:9px;font-weight:500;color:var(--mint-dim);text-align:center;margin-top:2px;min-height:12px;}
.knob-arc-bg{fill:none;stroke:var(--base-dark);stroke-width:5;stroke-linecap:round;}
.knob-arc{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;}
.knob-dot{fill:var(--accent);}
.knob-center{fill:var(--base);}
/* ╔══════════════════════════════════════════════════════════════════
* § 13 Select / Dropdown (.nsel)
* Styled