:root{color-scheme:dark;--bg:var(--tone-101318,#101318);--panel:var(--tone-1a1e25,#1a1e25);--edge:var(--tone-333a45,#333a45);--text:var(--tone-e9e6df,#e9e6df);--muted:var(--tone-9fa9b5,#9fa9b5);--chords:var(--tone-e8b96b,#e8b96b);--drums:var(--tone-e97963,#e97963);--bass:var(--tone-79b9da,#79b9da);--accent:var(--chords);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 10% 0,var(--tone-25272b,#25272b),transparent 55%),var(--bg);color:var(--text)}main{max-width:1440px;margin:auto;padding:32px}header{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:30px}a{color:var(--muted);font-size:12px}h1{font-family:system-ui,sans-serif;font-size:clamp(32px,4vw,54px);font-weight:650;letter-spacing:-2px;margin:6px 0 12px}h1 em{font-style:normal;color:var(--chords)}header p{color:var(--muted);font-size:13px}.eyebrow{font-size:11px!important;letter-spacing:2px;color:var(--accent)!important}.badge{border:1px solid var(--edge);border-radius:7px;padding:16px;font-size:12px;white-space:nowrap}.badge span{color:var(--muted);margin:0 8px}h2{font-size:13px;font-weight:500;margin:0}.section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:20px}.section-head span,.hint,footer{font-size:11px;line-height:1.7;color:var(--muted)}button,input,select{font:inherit}button,select,input[type=number],input[type=text],#scene-name{background:var(--tone-232932,#232932);color:var(--text);border:1px solid var(--tone-424a55,#424a55);border-radius:5px;min-height:38px;padding:8px 10px}button{cursor:pointer;font-size:12px}button:hover{border-color:var(--accent);background:var(--tone-303741,#303741)}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.primary{background:var(--chords);color:var(--tone-18191b,#18191b);border-color:var(--chords);font-weight:bold}input[type=range]{accent-color:var(--accent);width:100%;min-width:60px}label{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:11px}label.check{flex-direction:row;align-items:center;font-size:12px}input[type=checkbox]{accent-color:var(--accent);width:17px;height:17px}output{color:var(--text);float:right}.transport{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:16px;border:1px solid var(--edge);border-radius:8px;background:var(--panel)}.transport label{width:95px}.transport input[type=number]{width:85px}.transport label:has(input[type=range]){width:130px}.beat-lights{display:flex;gap:6px;margin-left:auto}.beat-lights i{width:8px;height:8px;border-radius:50%;background:var(--tone-49515b,#49515b)}.beat-lights i.on{background:var(--chords);box-shadow:0 0 12px var(--tone-e8b96b88,#e8b96b88)}#status{font-size:12px;color:var(--muted);min-height:20px}.workspace{display:grid;grid-template-columns:1.7fr 1fr;gap:24px;margin:20px 0}.scene-rack,.song-panel,.editor{background:var(--panel);border:1px solid var(--edge);border-radius:10px;padding:22px}.pads{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.pad{position:relative;text-align:left;min-height:104px;border-radius:7px;border:2px solid var(--tone-3e454e,#3e454e);background:linear-gradient(145deg,var(--tone-30343c,#30343c),var(--tone-21252c,#21252c));padding:11px;box-shadow:0 4px 0 var(--tone-0f1115,#0f1115);display:flex;flex-direction:column;gap:9px}.pad.selected{border-color:var(--chords)}.pad.playing{box-shadow:0 0 0 2px var(--tone-80cc98,#80cc98),0 0 22px var(--tone-80cc9822,#80cc9822)}.pad.queued:after{content:'QUEUED';position:absolute;right:7px;top:7px;color:var(--tone-80cc98,#80cc98);font-size:8px}.pad-id{color:var(--muted);font-size:10px}.pad-title{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.mini{display:flex;gap:3px;height:4px}.mini i{flex:1;border-radius:1px;opacity:.25}.mini i.hit{opacity:1}.mini.chords i{background:var(--chords)}.mini.drums i{background:var(--drums)}.mini.bass i{background:var(--bass)}.scene-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.song-slot{display:grid;grid-template-columns:1fr 50px 30px 30px 30px;gap:5px;margin-bottom:8px;align-items:center}.song-slot select,.song-slot input{width:100%;min-width:0;padding:6px;font-size:11px}.song-slot button{padding:4px;font-size:12px}.song-slot.active{outline:1px solid var(--tone-80cc98,#80cc98);border-radius:5px}#song{max-height:385px;overflow:auto;padding:3px}.session-tools{display:flex;gap:6px;flex-wrap:wrap;margin-top:24px}.file-button{position:relative;border:1px solid var(--tone-424a55,#424a55);border-radius:5px;padding:10px;color:var(--text);cursor:pointer;font-size:12px}.file-button input{position:absolute;width:100%;height:100%;opacity:0;inset:0;cursor:pointer}#save-status{font-size:10px;color:var(--muted)}.editor-head{display:flex;gap:14px;align-items:end;flex-wrap:wrap;margin-bottom:20px}.editor-head>div{flex:1}#scene-name{font-size:23px;max-width:100%;width:280px;background:transparent;border-color:transparent;padding-left:0}.editor-head input[type=number]{width:95px}#seed{width:135px}.instrument-tabs{display:flex;gap:10px;border-bottom:1px solid var(--edge);padding-bottom:14px}.instrument-tabs button{flex:1;padding:15px;font-size:14px;color:var(--muted)}.instrument-tabs button[aria-selected=true]{border-color:var(--accent);color:var(--accent);background:var(--tone-2a2e35,#2a2e35)}.instrument-tabs small{font-size:10px;opacity:.65;display:block;margin-top:5px}.editor-toolbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:18px 0 24px}.editor-toolbar label:first-child{width:150px}.editor-toolbar #instrument-midi{margin-left:auto}.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:15px;margin:16px 0}.controls label{min-width:0}.controls input[type=number],.controls select{width:100%}.subhead{display:flex;align-items:center;justify-content:space-between;margin:20px 0 10px}.subhead h3{font-size:14px;font-weight:500;color:var(--accent)}.chord-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.chord-card{padding:20px;background:var(--tone-23272e,#23272e);border:1px solid var(--tone-41444b,#41444b);border-radius:7px}.chord-card strong{display:block;color:var(--chords);font-size:24px;margin:10px 0}.chord-card p{font-size:11px;color:var(--muted)}.link-banner{background:var(--tone-263038,#263038);border:1px solid var(--tone-4c6169,#4c6169);border-radius:7px;padding:15px;display:flex;gap:15px;align-items:center;flex-wrap:wrap}.link-banner p{margin:0;font-size:11px;line-height:1.6;color:var(--muted);flex:1}.drum-lane{border:1px solid var(--edge);border-radius:8px;padding:16px;margin:12px 0}.drum-lane h3{margin:0;font-size:14px;color:var(--drums)}.steps{display:flex;gap:4px;flex-wrap:wrap}.step-light{flex:1;min-width:9px;height:23px;background:var(--tone-2a3039,#2a3039);border-radius:3px;border:1px solid var(--tone-3c444f,#3c444f)}.step-light.hit{background:var(--accent);border-color:var(--accent)}.drum-lane details summary{font-size:11px;color:var(--muted);cursor:pointer;margin-top:14px}.bass-stages{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}.stage{padding:10px;background:var(--tone-232a32,#232a32);border:1px solid var(--tone-43515d,#43515d);border-radius:7px;min-width:0}.stage h3{font-size:12px;color:var(--bass);margin:0 0 15px}.stage label{margin-top:10px}.stage select,.stage input[type=number]{width:100%;font-size:11px;padding:5px}.stage.inactive{opacity:.35}.stage.current{border-color:var(--bass);box-shadow:0 0 12px var(--tone-79b9da33,#79b9da33)}#modulation{border-top:1px solid var(--edge);margin-top:26px;padding-top:20px}summary{cursor:pointer;font-size:12px}summary span{color:var(--muted);font-size:10px;margin-left:10px}.mod-lane{display:grid;grid-template-columns:140px 1fr;gap:20px;margin:18px 0;border-top:1px solid var(--edge);padding-top:16px}.mod-values{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;align-items:end}.mod-values input{width:100%;padding:5px}.mod-values label.inactive{opacity:.3}footer{margin:22px 0;max-width:900px}.hidden{display:none!important}
.dial{position:relative;width:42px;height:42px;border:2px solid var(--tone-555e69,#555e69);border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--tone-56616d,#56616d),var(--tone-202630,#202630) 70%);box-shadow:0 3px 5px var(--tone-0006,#0006);cursor:ns-resize;touch-action:none;margin:3px auto}.dial:after{content:'';position:absolute;inset:3px;border-radius:50%;background:linear-gradient(var(--accent),var(--accent)) center top/3px 11px no-repeat;transform:rotate(var(--turn))}.dial:hover{border-color:var(--accent)}
.workspace>*{min-width:0}.pad,.instrument-tabs button,.song-slot label{min-width:0}.section-head{flex-wrap:wrap}.song-slot{grid-template-columns:minmax(0,1fr) 50px 30px 30px 30px}.controls{grid-template-columns:repeat(auto-fit,minmax(min(110px,100%),1fr))}.mod-values{grid-template-columns:repeat(8,minmax(0,1fr))}.instrument-tabs button{overflow-wrap:anywhere}.mod-values input{min-width:0}h1{overflow-wrap:anywhere}
.editor-head>div{min-width:0}.eyebrow{overflow-wrap:anywhere}
.arp-panel{background:linear-gradient(135deg,var(--tone-302b3d,#302b3d),var(--tone-1b222b,#1b222b))}.arp-preview{position:relative;height:68px;overflow:hidden;border:1px solid var(--edge);border-radius:5px;background:repeating-linear-gradient(to right,transparent 0,transparent calc(6.25% - 1px),var(--tone-49515b55,#49515b55) calc(6.25% - 1px),var(--tone-49515b55,#49515b55) 6.25%),var(--tone-14151f,#14151f);margin-top:16px}.arp-note{position:absolute;height:7px;min-width:1px;background:var(--tone-c2a2ee,#c2a2ee);border-radius:2px}.arp-preview>span{display:block;padding:20px;font-size:10px;color:var(--muted);line-height:1.7}.arp-mode-note{color:var(--tone-c2a2ee,#c2a2ee)}.rhythm-panel.arp-bypassed{border-style:dashed}.rhythm-panel.arp-bypassed>h3:after{content:' / BYPASSED BY ARP';font-size:10px;letter-spacing:0}
.pad{min-height:132px;gap:7px}.pad-id{font-size:9px;overflow-wrap:anywhere}.pad-screen{width:100%;height:54px;position:relative;overflow:hidden;border:1px solid var(--tone-49515b,#49515b);border-radius:3px;background:var(--tone-12181e,#12181e);display:grid;grid-template-rows:18px 16px 14px;gap:2px}.pad-lane{position:relative;min-width:0;background:repeating-linear-gradient(to right,transparent 0,transparent calc(25% - 1px),var(--tone-67707c44,#67707c44) calc(25% - 1px),var(--tone-67707c44,#67707c44) 25%)}.pad-note{position:absolute;min-width:1px;border-radius:1px}.pad-lane.chords .pad-note{background:var(--chords)}.pad-lane.drums .pad-note{background:var(--drums)}.pad-lane.bass .pad-note{background:var(--bass)}.pad-playhead{position:absolute;inset:0 auto 0 0;width:1px;background:var(--tone-e9ffed,#e9ffed);box-shadow:0 0 5px var(--tone-aaffb7,#aaffb7);pointer-events:none;z-index:1}.pad:not(.playing) .pad-playhead{display:none}
.scale-status{display:block;border:1px solid;border-radius:4px;padding:6px 7px;margin:10px 0;font-size:9px!important;font-weight:600;line-height:1.6;overflow-wrap:anywhere}.scale-status.in-scale{color:var(--tone-a0d8ac,#a0d8ac);background:var(--tone-26372d,#26372d);border-color:var(--tone-54705c,#54705c)}.scale-status.out-scale{color:var(--tone-f1bf86,#f1bf86);background:var(--tone-3b2c22,#3b2c22);border-color:var(--tone-906840,#906840)}.color-options{border-top:1px solid var(--edge);margin-top:12px;padding-top:10px}.color-options summary{font-size:10px;line-height:1.5}.color-choice{margin:12px 0;border-top:1px solid var(--edge);padding-top:10px}.color-choice button{width:100%;color:var(--chords);min-height:38px}.color-choice p{white-space:pre-line;line-height:1.8}
.mixer-panel{background:var(--tone-171c23,#171c23);border:1px solid var(--edge);border-radius:10px;padding:18px;margin:20px 0}.mixer-channels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:720px;margin:auto}.mixer-strip{background:linear-gradient(var(--tone-2a3039,#2a3039),var(--tone-1e242c,#1e242c));border:1px solid var(--tone-424b57,#424b57);border-top:3px solid var(--accent);border-radius:6px;padding:14px;min-width:0}.mixer-strip h3{text-align:center;color:var(--accent);font-size:13px;letter-spacing:2px;margin:0 0 16px}.mixer-eq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.mixer-eq label{text-align:center;font-size:9px}.mixer-eq .dial{width:34px;height:34px;margin:2px auto}.mixer-eq input{min-width:0}.mixer-eq output{font-size:9px;float:none}.mixer-fader{align-items:center;margin:18px auto 14px;font-size:10px}.mixer-fader input{writing-mode:vertical-lr;direction:rtl;width:38px;height:115px;min-width:0}.mixer-fader output{float:none}.mixer-buttons{display:flex;gap:5px}.mixer-buttons button{flex:1;min-width:0;font-size:10px;padding:6px}.mixer-buttons button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--tone-14181e,#14181e);font-weight:bold}
@media(max-width:650px){.mixer-eq{grid-template-columns:1fr}.mixer-eq label{gap:3px}.mixer-strip{padding:10px}.mixer-panel{padding:12px}.mixer-eq input{max-width:80px}.mixer-buttons{flex-direction:column}.mixer-strip h3{font-size:10px;letter-spacing:0}.mixer-channels{gap:6px}}
.leading-panel{background:linear-gradient(135deg,var(--tone-223130,#223130),var(--tone-1b222b,#1b222b))}.chord-card select{width:100%;min-width:0;font-size:10px}.chord-card .voicing-notes{color:var(--chords);line-height:1.8}.chord-card .borrow-source{line-height:1.7;overflow-wrap:anywhere}
.rhythm-panel{background:linear-gradient(135deg,var(--tone-302a20,#302a20),var(--tone-1b222b,#1b222b))}.rhythm-preview{position:relative;height:55px;border:1px solid var(--edge);border-radius:5px;overflow:hidden;background:repeating-linear-gradient(to right,transparent 0,transparent calc(6.25% - 1px),var(--tone-49515b55,#49515b55) calc(6.25% - 1px),var(--tone-49515b55,#49515b55) 6.25%),var(--tone-12171d,#12171d)}.rhythm-note{position:absolute;top:23px;height:15px;min-width:2px;background:var(--chords);border-radius:2px}.rhythm-note.held{top:10px;height:28px;background:var(--bass)}
.voice-panel{border:1px solid var(--edge);border-top:3px solid var(--accent);border-radius:8px;margin-top:24px;padding:18px;background:var(--tone-20262f,#20262f)}.voice-panel h3{font:700 22px system-ui,sans-serif;letter-spacing:3px;margin:0;color:var(--accent)}.voice-section{border:1px solid var(--edge);border-radius:6px;margin:18px 0;padding:10px 14px;min-width:0}.voice-section legend{font-size:11px;color:var(--accent);padding:0 8px}.voice-section .controls{margin:8px 0}.voice-panel>.controls{max-width:420px}.acid-panel{background:linear-gradient(135deg,var(--tone-202c36,#202c36),var(--tone-1b2028,#1b2028))}.juno-panel{background:linear-gradient(135deg,var(--tone-302b25,#302b25),var(--tone-1b2028,#1b2028))}
@media(max-width:1050px){.workspace{grid-template-columns:1fr}.bass-stages{grid-template-columns:repeat(4,1fr)}.song-slot{grid-template-columns:minmax(0,1fr) 60px 40px 40px 40px}.badge{display:none}}@media(max-width:600px){main{padding:16px}header{margin-bottom:20px}.scene-rack,.song-panel,.editor{padding:14px}.pad{min-height:93px;padding:8px}.pads{gap:7px}.pad-title{font-size:10px}.section-head{align-items:start}.section-head span{font-size:9px;max-width:120px}.instrument-tabs{gap:5px}.instrument-tabs button{font-size:11px;padding:10px 3px}.chord-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.bass-stages{grid-template-columns:repeat(2,minmax(0,1fr))}.mod-lane{grid-template-columns:1fr;gap:5px}.mod-values{grid-template-columns:repeat(4,minmax(0,1fr))}.editor-toolbar #instrument-midi{margin-left:0}.controls{grid-template-columns:repeat(2,minmax(0,1fr))}.transport{gap:8px}.beat-lights{margin-left:0}.scene-tools button{font-size:10px}.editor-head>div{flex-basis:100%}}@media(max-width:380px){.song-slot{grid-template-columns:minmax(0,1fr) 38px 24px 24px 24px;gap:3px}.song-slot button{min-width:0;padding:2px}.chord-card{padding:10px}.stage{padding:7px}}
.family-status{display:block;font-size:.7rem;padding:.3rem .4rem;border-left:3px solid var(--tone-8bc7bb,#8bc7bb);margin:.3rem 0}.out-family{border-color:var(--tone-c695ed,#c695ed)}.keyboard-map{margin:1rem 0}.keyboard-status{font-weight:700;color:var(--chords)}.keyboard-roll{position:relative;height:100px;margin:12px 0;min-width:0}.piano-key{position:absolute;bottom:0;height:100%;border:1px solid var(--tone-222,#222);border-radius:0 0 4px 4px;background:#111518;color:#f2f2f2;font-size:9px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px}.piano-key.black{height:64%;top:0;bottom:auto;background:#f2f2f2;color:#111518;z-index:2;padding-bottom:3px}.piano-key.chord-note{background:var(--tone-e9ae4e,#e9ae4e);color:var(--tone-1a1c20,#1a1c20)}.piano-key.bass-note{background:var(--tone-70c6ec,#70c6ec);color:var(--tone-14212a,#14212a)}.piano-key.chord-note.bass-note{background:linear-gradient(135deg,var(--tone-e9ae4e,#e9ae4e) 50%,var(--tone-70c6ec,#70c6ec) 50%)}.keyboard-stages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.keyboard-stage{padding:10px;border:1px solid var(--tone-34424a,#34424a);border-radius:8px}.keyboard-stage.current{border-color:var(--tone-e9ae4e,#e9ae4e)}.keyboard-stage .keyboard-roll{height:74px}.keyboard-stage .piano-key{font-size:7px}@media(max-width:640px){.keyboard-stages{grid-template-columns:1fr}.piano-key{font-size:7px}}
.variation-options{margin-top:12px;border-top:1px solid var(--tone-34424a,#34424a);padding-top:12px}.variation-options summary{font-size:.75rem;color:var(--tone-c8b1ef,#c8b1ef);cursor:pointer}.variation-options .controls{grid-template-columns:repeat(2,minmax(0,1fr))}.variation-options .controls label{min-width:0}.variation-options select{max-width:100%}.variation-preview{display:flex;flex-wrap:wrap;gap:4px;margin:10px 0}.variation-token{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border:1px solid var(--tone-43535d,#43535d);border-radius:4px;font-size:.7rem}.variation-token.override{background:var(--tone-b594df,#b594df);color:var(--tone-141a20,#141a20)}.variation-token.base{color:var(--tone-a7b7bd,#a7b7bd)}
.chord-cards:has(.variation-options[open]){grid-template-columns:repeat(2,minmax(0,1fr))}.variation-options .check{grid-column:1 / -1}.variation-options .controls label{overflow-wrap:anywhere}@media(max-width:640px){.chord-cards:has(.variation-options[open]){grid-template-columns:1fr}}
.keyboard-live-window{overflow-x:auto;max-width:100%;scrollbar-color:var(--tone-64757e,#64757e) var(--tone-171e22,#171e22)}.keyboard-live-window .live-keyboard{width:1400px;margin-bottom:12px}
.bass-mode-preview{border:1px solid var(--tone-405661,#405661);border-radius:8px;padding:16px;margin:12px 0}.bass-mode-preview h3{color:var(--bass)}.bass-path{display:flex;gap:5px;flex-wrap:wrap;margin:10px 0}.bass-path-token{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--tone-5e9bb3,#5e9bb3);border-radius:4px;color:var(--bass);background:var(--tone-1d2b33,#1d2b33)}
.matrix-lane{--ink:var(--tone-73e1c3,#73e1c3);margin:18px 0;padding:18px;border:1px solid var(--tone-324842,#324842);border-radius:12px;background:linear-gradient(140deg,var(--tone-172321,#172321),var(--tone-11191b,#11191b));box-shadow:inset 0 1px var(--tone-ffffff08,#ffffff08)}.matrix-lane:nth-child(2){--ink:var(--tone-e6b777,#e6b777)}.matrix-lane:nth-child(3){--ink:var(--tone-a9a0f1,#a9a0f1)}.matrix-lane.categorical{--ink:var(--tone-7abbea,#7abbea)}.matrix-controls{display:flex;flex-wrap:wrap;align-items:end;gap:12px}.matrix-controls label{min-width:100px}.matrix-controls .check{margin-right:auto;color:var(--ink);font-weight:bold}.matrix-controls select{max-width:260px}.matrix-clear{margin-left:auto}.matrix-lane .hint{margin:12px 0;color:var(--tone-a3b3af,#a3b3af)}.matrix-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));height:154px;border:1px solid var(--tone-446057,#446057);border-radius:8px;overflow:hidden;cursor:crosshair;touch-action:none;background:repeating-linear-gradient(to top,transparent 0,transparent calc(100% / 15 - 1px),var(--tone-ffffff0a,#ffffff0a) calc(100% / 15 - 1px),var(--tone-ffffff0a,#ffffff0a) calc(100% / 15)),linear-gradient(to top,var(--tone-0d1517,#0d1517),var(--tone-172427,#172427))}.matrix-column{position:relative;border-right:1px solid var(--tone-ffffff15,#ffffff15);pointer-events:none}.matrix-column:after{content:'';position:absolute;top:50%;left:0;right:0;border-top:1px solid var(--tone-a6c8ba55,#a6c8ba55)}.matrix-point{position:absolute;bottom:clamp(4px,var(--point),calc(100% - 6px));left:14%;right:14%;height:5px;border-radius:3px;background:var(--ink);box-shadow:0 0 13px color-mix(in srgb,var(--ink) 60%,transparent)}.matrix-bar{position:absolute;bottom:50%;height:var(--fill);left:12%;right:12%;background:linear-gradient(to top,transparent,var(--ink));opacity:.3;border-radius:3px}.matrix-column.negative .matrix-bar{bottom:auto;top:50%;background:linear-gradient(to bottom,transparent,var(--ink))}.categorical .matrix-bar{bottom:0}.categorical .matrix-column:after{display:none}.matrix-column.inactive{opacity:.18;background:var(--tone-0008,#0008)}.matrix-column.playing{background:color-mix(in srgb,var(--ink) 20%,transparent);box-shadow:inset 0 0 0 2px var(--ink)}.matrix-lane:not(.enabled) .matrix-grid{filter:saturate(.45);opacity:.65}.matrix-readouts{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin-top:9px}.matrix-readouts label{min-width:0;text-align:center;color:var(--ink)}.matrix-readouts small{display:block;color:var(--tone-839d94,#839d94)}.matrix-readouts span{display:block;min-height:32px;font-size:11px;line-height:15px;overflow-wrap:anywhere}.matrix-readouts input{width:100%;accent-color:var(--ink)}@media(max-width:600px){.matrix-lane{padding:10px}.matrix-controls{gap:8px}.matrix-controls select{max-width:210px}.matrix-grid{height:130px}.matrix-readouts{gap:3px}.matrix-readouts span{font-size:9px}.matrix-controls .check{width:100%}}
.chord-clock-strip{display:flex;overflow:hidden;min-height:58px;border:1px solid var(--tone-665237,#665237);border-radius:8px;background:var(--tone-11191b,#11191b)}.chord-clock-block{display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;border-right:1px solid var(--tone-151a1e,#151a1e);color:hsl(var(--hue) 80% 75%);background:linear-gradient(to top,hsl(var(--hue) 35% 20%),hsl(var(--hue) 30% 30%));font-weight:bold;font-size:17px}.clock-caption{color:var(--tone-edbd7d,#edbd7d)}.chord-clock-panel{border-color:var(--tone-675332,#675332)}.chord-clock-panel .controls{margin-bottom:15px}
.chord-clock-panel .controls{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.chord-clock-panel select{width:100%}
.performance-rack{margin-top:16px}.performance-head{display:flex;align-items:center;gap:12px}.performance-head h3{font-size:15px;letter-spacing:2px;margin:0;color:var(--accent)}.performance-head>span{font-size:10px;color:var(--muted);margin-right:auto}.performance-head button{font-size:10px;padding:6px 10px}.performance-hint{font-size:10px;color:var(--muted);line-height:1.6;margin:9px 0}.performance-presets{display:flex;gap:5px;overflow-x:auto;padding:0 0 9px}.performance-presets button{font-size:9px;padding:6px 9px;white-space:nowrap;border-radius:18px}.performance-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.performance-tile{position:relative;min-width:0;padding:10px;border:1px solid var(--tone-39454c,#39454c);background:linear-gradient(135deg,var(--tone-243037,#243037),var(--tone-182126,#182126));border-radius:10px;overflow:hidden}.performance-title{display:flex;align-items:center;justify-content:space-between;height:22px;margin-bottom:6px}.performance-title h4{font-size:10px;letter-spacing:1.2px;color:var(--accent);margin:0}.performance-title button{font-size:9px;padding:2px 7px}.performance-title button[aria-pressed=true]{background:var(--accent);color:var(--tone-111,#111)}.performance-caption{color:var(--tone-9cabb0,#9cabb0);font-size:9px;margin:6px 0 0;min-height:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.xy-surface{position:relative;height:130px;border-radius:6px;border:1px solid var(--tone-58605a,#58605a);overflow:hidden;touch-action:none;cursor:crosshair;background:repeating-linear-gradient(to right,transparent 0,transparent calc(12.5% - 1px),var(--tone-ffffff0a,#ffffff0a) calc(12.5% - 1px),var(--tone-ffffff0a,#ffffff0a) 12.5%),repeating-linear-gradient(to top,transparent 0,transparent calc(12.5% - 1px),var(--tone-ffffff0a,#ffffff0a) calc(12.5% - 1px),var(--tone-ffffff0a,#ffffff0a) 12.5%),radial-gradient(ellipse at 80% 20%,color-mix(in srgb,var(--accent) 18%,transparent),var(--tone-0e171a,#0e171a) 80%)}.xy-surface:before,.xy-surface:after{content:'';position:absolute;pointer-events:none;opacity:.2;background:var(--accent)}.xy-surface:before{width:1px;top:0;bottom:0;left:50%}.xy-surface:after{height:1px;left:0;right:0;top:50%}.xy-point{position:absolute;width:11px;height:11px;margin-left:-5px;margin-bottom:-5px;border:2px solid var(--tone-e9f0ea,#e9f0ea);border-radius:50%;background:var(--accent);box-shadow:0 0 20px var(--accent);pointer-events:none}.xy-x-label,.xy-y-label{position:absolute;font-size:9px;color:var(--tone-b0c0be,#b0c0be);pointer-events:none;z-index:1}.xy-x-label{bottom:6px;right:6px}.xy-y-label{left:6px;top:6px}.xy-surface:focus-visible,.xy-surface:focus-within,.touch-lane:focus-within{outline:2px solid var(--accent);outline-offset:2px}.touch-axis-input,.touch-column input{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;opacity:0}.option-orbit{position:relative;max-width:170px;height:130px;margin:auto;touch-action:none;cursor:crosshair;border-radius:50%;background:radial-gradient(ellipse,var(--tone-111c20,#111c20) 45%,var(--tone-40505755,#40505755) 46%,var(--tone-40505755,#40505755) 48%,var(--tone-152026,#152026) 49%,var(--tone-19282c,#19282c) 66%,transparent 67%)}.orbit-center{position:absolute;inset:28% 19%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:10px;line-height:1.4;color:var(--accent);pointer-events:none}.orbit-option{position:absolute;transform:translate(-50%,-50%);min-width:0;width:12px;height:12px;min-height:0;padding:0;border:1px solid var(--tone-83938c,#83938c);border-radius:50%;background:var(--tone-2b3c40,#2b3c40);box-shadow:none}.orbit-option:hover,.orbit-option:focus-visible,.orbit-option[aria-pressed=true]{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 60%,transparent)}.touch-lane{height:130px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));border:1px solid var(--tone-58605a,#58605a);border-radius:6px;overflow:hidden;cursor:crosshair;touch-action:none;background:repeating-linear-gradient(to top,var(--tone-132126,#132126) 0,var(--tone-132126,#132126) calc(12.5% - 1px),var(--tone-ffffff12,#ffffff12) calc(12.5% - 1px),var(--tone-ffffff12,#ffffff12) 12.5%)}.touch-column{position:relative;border-right:1px solid var(--tone-ffffff16,#ffffff16);min-width:0}.touch-column i{position:absolute;bottom:0;left:14%;right:14%;height:max(3px,var(--height));border-top:3px solid var(--accent);background:linear-gradient(to top,transparent,color-mix(in srgb,var(--accent) 30%,transparent));pointer-events:none}.touch-column>span{position:absolute;bottom:5px;left:0;right:0;text-align:center;font-size:9px;color:var(--tone-edf0df,#edf0df);pointer-events:none}.touch-column.inactive{opacity:.16;background:var(--tone-0007,#0007)}.advanced-instrument{margin-top:16px;padding-top:12px;border-top:1px solid var(--tone-3b464c,#3b464c)}.advanced-instrument>summary{color:var(--muted);font-size:11px}.keyboard-map{padding:10px 14px;margin:8px 0}.keyboard-map h3{font-size:13px;letter-spacing:2px}.keyboard-map>.hint{font-size:9px;line-height:1.4;margin:5px 0}.keyboard-map .keyboard-status{font-size:11px;margin:6px 0}.keyboard-map .keyboard-stages{display:none}.keyboard-map.expanded .keyboard-stages{display:grid}.keyboard-live-window .live-keyboard{height:65px;margin:6px 0}.keyboard-expand{font-size:9px;padding:3px 7px;margin-left:10px}.keyboard-map .piano-key{font-size:7px;padding-bottom:3px}#mod-lanes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}#mod-lanes .matrix-lane{margin:9px 0;padding:10px}#mod-lanes .matrix-grid{height:110px}#mod-lanes .matrix-controls label{min-width:0}#mod-lanes .matrix-controls input[type=number]{max-width:75px}#mod-lanes .matrix-controls select{max-width:165px}#mod-lanes .matrix-controls .check{flex-basis:100%}#mod-lanes .matrix-readouts span{font-size:9px}.performance-tile:has(.option-orbit){background:linear-gradient(160deg,var(--tone-28312e,#28312e),var(--tone-172126,#172126))}@media(max-width:1100px){.performance-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:650px){.performance-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.performance-tile{padding:8px}.xy-surface,.touch-lane,.option-orbit{height:115px}.performance-title h4{font-size:9px;letter-spacing:.5px}#mod-lanes{grid-template-columns:1fr}.performance-head>span{display:none}.performance-head button{margin-left:auto}.performance-presets button{font-size:8px}.performance-hint{font-size:9px}}
.touch-timeline{display:flex;height:25px;margin-top:9px;border:1px solid var(--tone-45524e,#45524e);border-radius:5px;overflow:hidden}.touch-timeline span{min-width:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:9px;background:color-mix(in srgb,var(--accent) 15%,var(--tone-152025,#152025));border-right:1px solid var(--tone-5f685d,#5f685d);color:var(--accent)}.performance-presets button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.xy-point{left:clamp(5px,50%,calc(100% - 5px))}
.performance-rack:not(.more-colors) .paint-extra{display:none}
.performance-head{gap:8px;margin-bottom:3px}.performance-head h3{font-size:12px;letter-spacing:1.5px}.performance-head>span{font-size:9px;color:var(--tone-6f8588,#6f8588)}.performance-head button{font-size:9px;padding:5px 8px;background:var(--tone-182326,#182326);border-color:var(--tone-324247,#324247);border-radius:14px}.performance-head .paint-more{color:var(--accent)}
.paint-help,.paint-palette{display:inline-block;vertical-align:top;margin:5px 15px 9px 0;max-width:100%}.paint-help>summary,.paint-palette>summary{font-size:9px;color:var(--tone-869a9d,#869a9d);cursor:pointer}.paint-help[open],.paint-palette[open]{display:block}.paint-help .performance-hint{max-width:650px;margin:8px 0}.paint-palette .performance-presets{margin-top:9px}
.performance-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:10px;border:1px solid var(--tone-344248,#344248);border-radius:18px;background:linear-gradient(135deg,var(--tone-172124,#172124),var(--tone-101a1e,#101a1e))}
.performance-grid .performance-tile{padding:9px 10px 21px;background:linear-gradient(145deg,var(--tone-22303380,#22303380),var(--tone-152228,#152228));border:1px solid var(--tone-ffffff06,#ffffff06);border-radius:13px;transition:border-color .2s,background .2s}
.performance-grid .performance-tile:hover,.performance-grid .performance-tile:focus-within{border-color:color-mix(in srgb,var(--accent) 35%,transparent);background:var(--tone-243235,#243235)}
.performance-title{height:19px;margin-bottom:4px}.performance-title h4{font-family:system-ui,sans-serif;font-size:11px;font-weight:500;letter-spacing:.6px;color:var(--tone-b0c1c1,#b0c1c1)}.performance-title button{font-size:8px;padding:1px 6px}
.performance-caption{position:absolute;left:10px;right:10px;bottom:5px;font-size:8px;text-align:center;opacity:0;margin:0;transition:opacity .2s;pointer-events:none}.performance-tile:hover .performance-caption,.performance-tile:focus-within .performance-caption{opacity:1}
.xy-surface{height:110px;border:0;border-radius:10px;background:radial-gradient(ellipse at var(--x,50%) var(--y,50%),color-mix(in srgb,var(--accent) 20%,transparent),transparent 68%),var(--tone-101d22,#101d22)}
.xy-surface:before,.xy-surface:after{background:transparent;border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:50%;width:70px;height:70px;left:var(--x,50%);top:var(--y,50%);bottom:auto;right:auto;transform:translate(-50%,-50%);opacity:.4;transition:width .15s,height .15s}
.xy-surface:after{width:106px;height:106px;opacity:.17}.xy-surface.painting:before{width:88px;height:88px}.xy-point{width:8px;height:8px;margin-left:-4px;margin-bottom:-4px;border-width:1px;box-shadow:0 0 14px var(--accent)}
.xy-x-label,.xy-y-label{opacity:0;transition:opacity .2s;font-size:8px}.xy-surface:hover .xy-x-label,.xy-surface:hover .xy-y-label,.xy-surface:focus-within .xy-x-label,.xy-surface:focus-within .xy-y-label,.xy-surface:focus-visible .xy-x-label,.xy-surface:focus-visible .xy-y-label{opacity:.8}
.brush-trace{position:absolute;inset:0;pointer-events:none;background-size:100% 100%;background-repeat:no-repeat;opacity:0;transition:opacity 1.6s;filter:drop-shadow(0 0 4px var(--accent))}.xy-surface.painting .brush-trace{opacity:.7;transition:opacity .08s}
.touch-lane{height:110px;position:relative;border:0;border-radius:10px;background-color:var(--tone-101d22,#101d22);background-size:100% 100%;background-repeat:no-repeat}.touch-column{border-color:var(--tone-ffffff05,#ffffff05)}.touch-column i{bottom:clamp(6px,calc(var(--height) * .88 + 6%),calc(100% - 6px));left:calc(50% - 3px);right:auto;width:6px;height:6px;border:1px solid var(--accent);border-radius:50%;background:var(--accent);box-shadow:0 0 9px color-mix(in srgb,var(--accent) 30%,transparent)}
.touch-column>span{font-size:8px;opacity:0;transition:opacity .2s}.touch-lane:hover .touch-column>span,.touch-lane:focus-within .touch-column>span{opacity:.8}.performance-tile[data-tile="CHORDS"] .touch-column:not(.inactive)>span{opacity:.55}.touch-column.inactive{opacity:.1;background:transparent}
.option-orbit{width:110px;height:110px;max-width:100%;background:radial-gradient(circle,transparent 55%,var(--tone-627a7522,#627a7522) 56%,var(--tone-627a7522,#627a7522) 57%,transparent 58%)}.orbit-option{width:8px;height:8px;min-height:8px;border-color:var(--tone-4b6465,#4b6465);background:var(--tone-203337,#203337);box-shadow:none}.orbit-option[aria-pressed=true]{box-shadow:0 0 17px var(--accent)}.orbit-center{inset:26% 13%;font-family:system-ui,sans-serif;font-size:10px;line-height:1.25;color:var(--tone-cccfb7,#cccfb7)}
.touch-timeline{height:18px;margin-top:7px;border-color:var(--tone-314344,#314344);border-radius:9px;position:relative}.touch-timeline span{font-size:8px;background:var(--tone-1a292d,#1a292d);border-color:var(--tone-42525155,#42525155);color:var(--tone-8aaba6,#8aaba6)}.touch-playhead{position:absolute;top:0;bottom:0;width:1px;pointer-events:none;background:var(--accent)!important;box-shadow:0 0 10px var(--accent)}
.keyboard-map{position:relative;background:var(--tone-192429,#192429);border:1px solid var(--tone-334248,#334248);border-radius:13px}.keyboard-map h3{font-size:10px;letter-spacing:1.5px}.keyboard-map>.hint{font-size:0;line-height:0;margin:0}.keyboard-expand{position:absolute;top:7px;right:9px;font-size:8px;border:0;background:transparent;color:var(--tone-91a6a8,#91a6a8)}.keyboard-map .keyboard-status{font-size:9px;color:var(--tone-92a5a5,#92a5a5)}.keyboard-live-window .live-keyboard{height:47px}.keyboard-map .piano-key{font-size:6px}
@media(max-width:650px){.performance-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:7px}.performance-title h4{font-size:10px}.performance-head>span{display:none}.performance-head button{padding:4px 6px}.performance-head .paint-more{margin-left:0}.performance-head h3{margin-right:auto}.xy-surface,.touch-lane,.option-orbit{height:104px}.option-orbit{width:104px}}
@media(hover:none){.performance-caption,.xy-x-label,.xy-y-label{opacity:.7}.touch-column>span{opacity:.6}}
@media(prefers-reduced-motion:reduce){.performance-tile,.performance-caption,.xy-surface:before,.xy-surface:after,.xy-x-label,.xy-y-label,.brush-trace,.touch-column>span{transition:none}.brush-trace{display:none}}
.touch-column i{bottom:clamp(6px,var(--dot),calc(100% - 6px))}.touch-playhead[hidden]{display:none}
.option-count{margin-left:auto;color:var(--tone-8da5a5,#8da5a5);font-size:8px;letter-spacing:0;white-space:nowrap}.performance-title{gap:6px}
.choice-field{display:grid;gap:4px;min-height:110px}.choice-family{display:grid;grid-template-columns:55px 1fr;align-items:center;gap:5px}.choice-family-name{font-size:7px;line-height:1.3;color:var(--tone-8da4a5,#8da4a5)}.choice-cells{display:flex;gap:3px;flex-wrap:wrap}.choice-button{flex:0 0 19px;min-width:0;min-height:0;width:19px;height:19px;padding:0;border-radius:5px;border:1px solid var(--tone-3b5253,#3b5253);background-color:var(--tone-142428,#142428);background-size:100% 100%;background-repeat:no-repeat}.choice-button:hover,.choice-button:focus-visible,.choice-button[aria-pressed=true]{border-color:var(--accent);background-color:color-mix(in srgb,var(--accent) 20%,var(--tone-122226,#122226));box-shadow:0 0 9px color-mix(in srgb,var(--accent) 25%,transparent)}.choice-readout{display:block;min-height:12px;font-size:8px;color:var(--accent);margin-top:5px;text-align:center}.performance-tile[data-tile="TIMING"] .choice-family{grid-template-columns:1fr}.performance-tile[data-tile="TIMING"] .choice-family-name{display:none}.performance-tile[data-tile="TIMING"] .choice-cells{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.performance-tile[data-tile="TIMING"] .choice-button{width:100%;height:29px}.choice-field[aria-label^="TIMING"]{min-height:100px}
.stepped-lane{height:calc(var(--levels) * 11px + 19px);min-height:110px;gap:3px;overflow:visible;background-color:transparent;background-image:none!important;border-radius:0}.stepped-lane .touch-column{border:0;background:linear-gradient(var(--tone-58706e44,#58706e44),var(--tone-58706e44,#58706e44)) center top/1px calc(100% - 19px) no-repeat}.step-cells{display:grid;grid-template-rows:repeat(var(--levels),minmax(0,1fr));gap:2px;height:calc(100% - 19px)}.step-button{position:relative;min-width:0;min-height:0;width:100%;height:100%;padding:0;border:1px solid var(--tone-42606155,#42606155);border-radius:3px;background:var(--tone-16292d,#16292d);color:var(--accent)}.step-button:after{content:'';position:absolute;inset:0;margin:auto;width:3px;height:3px;border-radius:50%;background:var(--tone-7c969555,#7c969555);pointer-events:none}.step-button[aria-pressed=true],.step-button:hover:not(:disabled),.step-button:focus-visible{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 30%,var(--tone-163038,#163038));box-shadow:0 0 9px color-mix(in srgb,var(--accent) 20%,transparent)}.step-button[aria-pressed=true]:after{background:var(--accent)}.stepped-lane .touch-column>span{bottom:0;opacity:.7;font-size:8px}.stepped-lane .touch-column.inactive{opacity:.12}.step-button:disabled{cursor:default}.lane-tile .performance-caption{display:none}
.step-rails{display:grid;gap:9px;padding:4px 0}.step-rail{display:grid;grid-template-columns:1fr auto;gap:4px}.rail-readout{font-size:8px;color:var(--accent)}.rail-cells{grid-column:1/-1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px}.rail-button{min-width:0;min-height:0;padding:4px 1px;font-size:8px;border-radius:4px;background:var(--tone-172b2f,#172b2f);border:1px solid var(--tone-42606155,#42606155)}.rail-button:hover,.rail-button:focus-visible,.rail-button[aria-pressed=true]{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--tone-14272c,#14272c))}.rail-tile[data-tile="STRUCTURE"] .step-rail:nth-child(2) .rail-cells{grid-template-columns:repeat(3,minmax(0,1fr))}.performance-grid .lane-tile{padding-bottom:10px}.performance-grid .orbit-tile{padding-bottom:10px}
@media(max-width:650px){.performance-grid .lane-tile{grid-column:1/-1}.stepped-lane{height:calc(var(--levels) * 14px + 19px)}.choice-family{grid-template-columns:1fr}.choice-button{width:18px;height:18px;flex-basis:18px}.choice-readout{font-size:8px}.option-count{font-size:7px}}
 .drum-paint-heading{grid-column:1/-1;margin:12px 0 0;color:var(--drums);font-size:12px;letter-spacing:2px}.performance-grid:has(.drum-paint-heading){grid-template-columns:repeat(3,minmax(0,1fr))}.performance-grid:has(.drum-paint-heading) .choice-cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.performance-grid:has(.drum-paint-heading) .choice-family{grid-template-columns:1fr}.performance-grid:has(.drum-paint-heading) .choice-button{width:auto;height:auto;min-height:28px;font-size:9px;background-image:none!important}.stepped-xy{background:repeating-linear-gradient(to right,transparent 0,transparent calc(20% - 1px),var(--tone-ffffff20,#ffffff20) calc(20% - 1px),var(--tone-ffffff20,#ffffff20) 20%),repeating-linear-gradient(to top,transparent 0,transparent calc(20% - 1px),var(--tone-ffffff20,#ffffff20) calc(20% - 1px),var(--tone-ffffff20,#ffffff20) 20%),radial-gradient(ellipse at 80% 20%,var(--tone-ef967f26,#ef967f26),var(--tone-0e171a,#0e171a) 80%)}@media(max-width:650px){.performance-grid:has(.drum-paint-heading){grid-template-columns:repeat(2,minmax(0,1fr))}}
.drum-mini-mixer{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:12px 0}.drum-mini-strip{border:1px solid var(--tone-ef967f55,#ef967f55);border-top:3px solid var(--drums);border-radius:8px;background:var(--tone-192428,#192428);padding:12px;min-width:0}.drum-mini-strip h4{color:var(--drums);font-size:12px;margin:0 0 12px}.drum-mini-strip label{display:grid;gap:6px;font-size:9px}.drum-mini-strip input{width:100%;min-width:0;accent-color:var(--drums)}.drum-mini-strip output{color:var(--drums);font-size:10px}.drum-mini-buttons{display:flex;gap:5px;margin-top:10px}.drum-mini-buttons button{flex:1;min-width:0;font-size:9px;padding:7px 2px}.drum-mini-buttons button[aria-pressed=true]{background:var(--drums);color:var(--tone-111,#111)}.drum-mini-strip.voice-silent{border-top-color:var(--tone-536060,#536060)}.drum-mini-strip.voice-silent h4{color:var(--tone-9fa6a6,#9fa6a6)}@media(max-width:450px){.drum-mini-mixer{grid-template-columns:repeat(2,minmax(0,1fr))}}
.drum-bank-panel{padding:14px;border:1px solid var(--tone-ef967f55,#ef967f55);border-radius:10px;margin:14px 0;background:var(--tone-142226,#142226)}.drum-bank-panel h3,.drum-bank-panel h4{font-size:12px;color:var(--drums);margin:0}.drum-bank-panel .section-head{flex-wrap:wrap;gap:8px}.drum-bank-panel button{font-size:9px}.drum-bank-panel button[aria-pressed=true]{background:var(--tone-ef967f44,#ef967f44);border-color:var(--drums)}.drum-bank-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:12px 0}.drum-bank-choices button{text-align:left;padding:9px 7px;min-width:0}.drum-pattern-matrix{display:grid;gap:9px}.drum-row-tools{display:flex;align-items:center;gap:4px;margin-bottom:5px}.drum-row-tools h4{min-width:44px;margin-right:auto}.drum-row-tools button{padding:4px 8px}.drum-hit-strip{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:3px;touch-action:none}.drum-hit-strip button{min-width:0;min-height:28px;padding:5px 0;border-radius:3px;color:var(--tone-90a0a0,#90a0a0)}.drum-hit-strip button:nth-child(4n+1){border-left:2px solid var(--tone-ef967f88,#ef967f88)}.drum-hit-strip button[aria-pressed=true]{color:var(--tone-f4d9cf,#f4d9cf);background:var(--tone-ef967f66,#ef967f66)}.drum-bank-chain{margin-top:16px;border-top:1px solid var(--tone-ef967f33,#ef967f33);padding-top:12px}.drum-bank-chain label{font-size:9px}.drum-bank-chain select{padding:4px;font-size:10px}.drum-bank-sequence{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin:12px 0}.drum-bank-stage{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 3px;background:var(--tone-203237,#203237);border-radius:5px;min-width:0}.drum-bank-stage input[type=range]{writing-mode:vertical-lr;direction:rtl;width:24px;height:90px;accent-color:var(--drums)}.drum-bank-stage input[type=number]{width:100%;min-width:0;padding:4px;font-size:11px}.drum-bank-stage output{color:var(--drums);font-size:12px}.drum-bank-stage:has(input:disabled){opacity:.3}.drum-bank-panel .playing{outline:2px solid var(--tone-f3dfb0,#f3dfb0);outline-offset:-2px}@media(max-width:650px){.drum-bank-panel{padding:8px}.drum-bank-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.drum-hit-strip{gap:2px}.drum-hit-strip button{font-size:7px;min-height:26px}.drum-bank-sequence{gap:3px}.drum-bank-stage{padding:6px 1px}.drum-bank-stage span{font-size:7px}}
.transport #play[aria-pressed=false]{background:var(--tone-23272e,#23272e);color:var(--text);border-color:var(--edge)}.transport #play-song[aria-pressed=true]{background:var(--chords);color:var(--tone-171b20,#171b20);border-color:var(--chords)}
.drum-lane .drum-slider-controls{max-width:none;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.drum-slider-controls .dial{display:none}.drum-slider-controls>label{min-width:0;padding:8px;background:var(--tone-172329,#172329);border-radius:6px}.drum-slider-controls input[type=range]{width:100%;accent-color:var(--drums)}.drum-slider-controls label:has(input:disabled){opacity:.4}.drum-event-preview{position:relative;height:42px;border:1px solid var(--tone-ef967f44,#ef967f44);border-radius:5px;margin-top:8px;overflow:hidden;background:repeating-linear-gradient(to right,transparent 0,transparent calc(6.25% - 1px),var(--tone-ffffff12,#ffffff12) calc(6.25% - 1px),var(--tone-ffffff12,#ffffff12) 6.25%)}.drum-event{position:absolute;top:9px;height:24px;min-width:2px;background:var(--drums);border-radius:2px}.drum-wave-preview{height:65px;background-position:center;background-repeat:no-repeat;background-size:100% 100%;border:1px solid var(--tone-ef967f33,#ef967f33);border-radius:6px;margin:10px 0}
.rhythm-panel .rhythm-compact{display:grid;max-width:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.rhythm-compact>label{min-width:0;padding:8px;background:var(--tone-171e24,#171e24);border-radius:6px}.rhythm-compact .rail-cells{grid-template-columns:repeat(8,minmax(0,1fr));margin-top:5px}.rhythm-compact .rail-button{font-size:10px;min-height:26px}.rhythm-compact select{padding:6px;font-size:10px}.rhythm-compact .rhythm-fine{height:12px;margin:5px 0}.xy-tile .rhythm-preview{height:42px;margin-bottom:8px}.xy-tile .rhythm-note{top:20px;height:10px}.xy-tile .rhythm-note.held{top:8px;height:23px}@media(max-width:650px){.rhythm-panel .rhythm-compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.rhythm-compact>label{padding:5px}}
.articulation-matrix{--ink:var(--tone-e6b777,#e6b777)!important}.articulation-matrix h4{margin:0;font-size:12px;letter-spacing:2px;color:var(--ink)}.articulation-matrix .matrix-grid{height:128px;background:repeating-linear-gradient(to top,var(--tone-ffffff03,#ffffff03) 0,var(--tone-ffffff03,#ffffff03) calc(25% - 1px),var(--tone-ffffff22,#ffffff22) calc(25% - 1px),var(--tone-ffffff22,#ffffff22) 25%),var(--tone-101b20,#101b20)}.articulation-matrix .matrix-readouts label>span{font-size:10px;min-height:28px}.articulation-matrix output{display:block;font-size:12px;color:var(--ink)}.startup-shuffle{display:flex;align-items:center;gap:8px;font-size:11px;margin-top:14px}
.drum-hit-light{display:inline-block;width:9px;height:9px;margin-left:10px;border-radius:50%;vertical-align:middle;background:var(--tone-343d3e,#343d3e);border:1px solid var(--tone-65706c,#65706c);box-shadow:inset 0 1px 2px var(--tone-0008,#0008);flex-shrink:0}.drum-hit-light.firing{background:var(--tone-fff0bc,#fff0bc);border-color:var(--tone-fff6dc,#fff6dc);box-shadow:0 0 5px var(--tone-ffcb85,#ffcb85),0 0 14px var(--tone-ef967f99,#ef967f99);opacity:calc(.45 + var(--hit,1)*.55)}.drum-mini-strip h4{display:flex;align-items:center;justify-content:space-between}
.drum-lane-timeline{position:relative;margin-top:12px;border:1px solid var(--tone-ef967f44,#ef967f44);border-radius:6px;overflow:hidden;background:var(--tone-111c21,#111c21)}.drum-timeline-ruler{display:grid;height:19px;color:var(--tone-a3aeb0,#a3aeb0);font-size:9px;background:var(--tone-1c2a30,#1c2a30)}.drum-timeline-ruler span{padding:3px 6px;border-left:1px solid var(--tone-ef967f33,#ef967f33)}.drum-lane-timeline .drum-event-preview{margin:0;border:0;border-radius:0;background:repeating-linear-gradient(to right,transparent 0,transparent calc(6.25% - 1px),var(--tone-ffffff10,#ffffff10) calc(6.25% - 1px),var(--tone-ffffff10,#ffffff10) 6.25%)}.drum-timeline-playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--tone-fff0bc,#fff0bc);box-shadow:0 0 8px var(--tone-ffd396,#ffd396);pointer-events:none;z-index:2}.drum-timeline-playhead[hidden]{display:none}.drum-lane-timeline.live{border-color:var(--tone-ef967f88,#ef967f88)}
.touch-column.cycle-current{background:var(--tone-ef967f1c,#ef967f1c);border-radius:5px;box-shadow:inset 0 0 0 1px var(--tone-ffcf9c,#ffcf9c),0 0 12px var(--tone-ef967f33,#ef967f33)}.touch-column.cycle-current .step-button[aria-pressed=true]{background:var(--tone-ffd19e,#ffd19e);color:var(--tone-182327,#182327);box-shadow:0 0 8px var(--tone-ef967f77,#ef967f77)}.touch-column.cycle-current>span{color:var(--tone-ffe0b3,#ffe0b3)}.cycle-play-status{font-size:9px;color:var(--tone-ffd19e,#ffd19e);white-space:nowrap}
.drum-envelope-knobs{display:flex;justify-content:center;gap:32px;padding:14px 0 8px;border-top:1px solid var(--tone-ef967f33,#ef967f33);margin-top:9px}.drum-envelope-control{display:grid;justify-items:center;gap:7px;color:var(--tone-b5bfc0,#b5bfc0);font-size:10px}.drum-envelope-control output{color:var(--drums);font-size:10px}.drum-envelope-dial{--turn:-135deg;position:relative;width:42px;height:42px;border-radius:50%;border:1px solid var(--tone-ef967f66,#ef967f66);background:radial-gradient(circle at 35% 25%,var(--tone-62605b,#62605b),var(--tone-313b3d,#313b3d) 60%,var(--tone-172327,#172327));box-shadow:0 3px 8px var(--tone-0005,#0005),inset 0 1px var(--tone-fff2,#fff2);cursor:ns-resize;touch-action:none}.drum-envelope-dial:after{content:'';position:absolute;top:5px;left:19px;width:2px;height:10px;background:var(--drums);border-radius:2px;transform-origin:1px 16px;transform:rotate(var(--turn));box-shadow:0 0 5px var(--tone-ef967f66,#ef967f66)}.drum-envelope-dial:focus-visible{outline:2px solid var(--drums);outline-offset:4px}
.transport label.master-tempo:has(input[type=range]){width:180px;max-width:100%;flex-shrink:0}.master-tempo output{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}.master-tempo input[type=range]{min-height:28px;margin:0;cursor:pointer}
.keyboard-map .piano-key{color:#fff;text-shadow:none;font-weight:700}
.keyboard-map .piano-key.black{color:#000}
.keyboard-map .piano-key:is(.chord-note,.bass-note){color:#000}
.chord-strum-controls{padding:10px 0;border-bottom:1px solid var(--edge);margin-bottom:10px}.chord-strum-controls h4{margin:0 0 8px}.chord-strum-controls .rail-cells{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.chord-strum-controls label{display:block;margin-top:8px}.chord-strum-controls output{float:right;font-variant-numeric:tabular-nums}.chord-strum-controls input[type=range]{width:100%}.chord-strum-controls .strum-preview{height:42px;margin-top:8px;clear:both;width:100%}.strum-preview .rhythm-note{height:3px;background:var(--muted);min-width:2px}.strum-preview .rhythm-note.strummed{background:var(--chords);box-shadow:0 0 3px var(--chords)}

.pad-progression{display:block;color:var(--chords);font-size:12px;font-weight:700;line-height:1.4;overflow-wrap:anywhere}