/* Cherry wood cabinet, warm ivory controls and amber display. */
:root{color-scheme:dark;background:#1b110e;color:#eee4d4;font-family:Inter,ui-sans-serif,system-ui,sans-serif}
body{background:radial-gradient(ellipse at 50% 0,#52332760,transparent 70%),#191310;background-attachment:fixed;padding:28px 18px}
main{max-width:1120px;padding:34px;border-radius:22px;border:1px solid #b17349;box-shadow:0 2px 0 #d49b6455 inset,0 0 0 5px #281811,0 28px 75px #0009;background:repeating-linear-gradient(2deg,transparent 0px,#30140c24 2px,transparent 4px,transparent 9px,#d6945018 10px,transparent 12px),repeating-linear-gradient(178deg,#743a2300 0px,#28130a2b 1px,transparent 3px,transparent 24px),linear-gradient(100deg,#6a321e,#985338 27%,#82432c 48%,#aa6040 72%,#68321f)}
header{padding:8px 10px 20px;border-bottom:1px solid #e8b78250;margin-bottom:28px;position:relative}
header:after{content:'●';position:absolute;right:8px;bottom:10px;color:#d5ad74;font-size:8px;text-shadow:0 1px #32180f}
h1{font:500 44px Georgia,serif;letter-spacing:-1.5px;color:#fff0d9;text-shadow:0 2px 2px #28140f90;margin:10px 0}
h1 span{color:#e8ba7d!important}header p{color:#f0cfac;margin:10px 0 0}.eyebrow{color:#f0cfaa;letter-spacing:2.8px;font-size:10px;font-weight:650}
section{background:linear-gradient(140deg,#302822,#251e1a);border:1px solid #16100d;border-top-color:#d3aa733f;border-radius:12px;margin:22px 0;padding:26px;box-shadow:0 2px 8px #1c0b0850,0 1px 1px #ffffff08 inset;position:relative}
section:before,section:after{content:'';position:absolute;width:5px;height:5px;border:1px solid #aa8659;border-radius:50%;top:10px;background:linear-gradient(45deg,#211811 43%,#ac8b61 46%,#ac8b61 54%,#211811 57%);opacity:.65}
section:before{left:10px}section:after{right:10px}
h2{font:500 22px Georgia,serif;color:#f2e2c9;letter-spacing:.1px;margin-top:11px}small{color:#d3af79;font-size:10px;letter-spacing:2px}p,label{color:#cbbba7}p{line-height:1.65}.muted{color:#b7a792;font-size:12px;line-height:1.6}label{font-size:12px;letter-spacing:.25px;gap:9px}
button,select,input:not([type=range]){border-radius:7px;border:1px solid #73604a;background:#211b17;color:#e8dbc6;padding:12px;box-shadow:0 1px 0 #ffffff08 inset}
button{transition:background .15s,border-color .15s,transform .1s;touch-action:manipulation}
button:hover{border-color:#d7b17c;background:#3e3025}button:active{transform:translateY(1px)}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #efc486;outline-offset:4px}
button.primary{background:linear-gradient(#e3c693,#b9915d);border:1px solid #e2c28c;color:#2b2117;font-weight:650;box-shadow:0 2px 3px #0004,0 1px #ffebc7 inset}
input[type=checkbox]{accent-color:#dbb27d;width:19px;height:19px;cursor:pointer}
input[type=range]{accent-color:#d7b17c}output{color:#e7c68f}#status{color:#e7c68f}
#pads{gap:13px;margin-top:18px}
.pad{min-height:118px;background:linear-gradient(145deg,#faf1df,#dfcfb6);border:1px solid #fff2d3;border-bottom:4px solid #a9967c;border-radius:8px;color:#3c2b20;box-shadow:0 3px 5px #0006,0 1px #fff inset;padding:16px 18px}
.pad:hover{background:linear-gradient(145deg,#fff9eb,#e8d5b8);border-color:#fff1cf}.pad span{color:#7d6953;font-size:10px;letter-spacing:1px}.pad b{color:#3c2b20;font-weight:650;font-size:16px;margin:12px 0}.pad .description{color:#755e46;letter-spacing:1.3px;font-size:10px}.pad.selected{background:linear-gradient(145deg,#e9c592,#bc8d51);border-color:#ffe3ad;border-bottom-color:#79542c;box-shadow:0 0 0 2px #d8b17c40,0 2px 4px #0005}.pad.selected span{color:#574128}
.presetdesk{background:linear-gradient(#1c1815,#29221b);border:1px solid #0e0b09;border-top-color:#8f765348;box-shadow:inset 0 2px 12px #0006;border-radius:12px;padding:24px;margin:24px 0;gap:22px}
.dial{background:radial-gradient(circle at 35% 25%,#7c6b59,#2a241e 57%,#16120f 78%)!important;border:3px solid #b9935d!important;box-shadow:0 0 0 4px #12100d,0 7px 12px #0009,inset 0 2px 2px #ffefd32b}
.dial::-webkit-slider-thumb{background:#e3bd7e;box-shadow:0 0 3px #f8e0ac66}.dialgroup>label{color:#cebaa0}.dialgroup .toolbar{justify-content:center;margin-top:14px}.dialgroup button{padding:5px 14px;border-radius:4px}
.screen{background:linear-gradient(135deg,#1d1a11,#242313);border:1px solid #836742;border-radius:6px;box-shadow:0 0 0 5px #100e0b,inset 0 2px 12px #000c;padding:24px;min-width:200px;color:#f1cb79}
.screen small{color:#b69b61;letter-spacing:3px;font-size:9px}.screen #programDisplay{font:54px ui-monospace,Consolas,monospace;color:#f4d58b;text-shadow:0 0 14px #d6ac4740;letter-spacing:7px;margin:8px 0}.screen #bankDisplay{color:#c6b17a;font:11px monospace}.screen #targetDisplay{display:block;color:#a99a71;margin-top:10px;font-size:11px}
.bankgrid button{background:linear-gradient(#3c3228,#221b16);border:1px solid #6f5940;border-bottom:3px solid #110c09;border-radius:6px;color:#e3ceb0;font:500 17px Georgia,serif;box-shadow:0 2px 4px #0005}.bankgrid button.active{background:linear-gradient(#dfc08a,#b58d54);color:#271b11;border-color:#e6c88f;border-bottom-color:#72502d}.bankgrid button:hover{border-color:#d9b985}
.bankvalues input{color:#e7cc9d;background:#181410}.bankvalues label{font-size:10px}.midibankpanel>span{font-size:10px}
#sliders{gap:24px;margin:26px 0 12px}.zones>div{background:#1d1915;border:1px solid #594731;border-radius:8px}.zones h2{font-size:19px}
dialog{background:linear-gradient(135deg,#332a22,#211b16);border:1px solid #b68d59;color:#eee0ca;box-shadow:0 25px 90px #0009;border-radius:12px}dialog::backdrop{background:#130b08b8;backdrop-filter:blur(3px)}a{color:#e5c48e}summary{color:#ead6b5;font-size:14px}#log{color:#d1b784;background:#1b1612;padding:16px;border-radius:6px}main>details{background:#201a16;border-radius:8px;padding:16px;border:1px solid #87613e}main>p:last-child{color:#f0cfaa;text-align:center;font-size:10px;letter-spacing:1.3px;margin:26px 0 0}
@media(max-width:800px){.presetdesk{gap:20px;padding:20px}.screen{min-width:150px}h1{font-size:37px}}
@media(max-width:600px){body{padding:12px 8px}main{padding:16px;border-radius:13px}header{padding:4px 2px 18px;gap:18px}h1{font-size:34px}.eyebrow{font-size:9px;letter-spacing:2px}header p{font-size:13px}section{padding:21px 15px;margin:18px 0}h2{font-size:20px}#pads{gap:9px}.pad{padding:12px 8px;min-height:104px;border-bottom-width:3px}.pad b{font-size:12px;line-height:1.3;overflow-wrap:anywhere}.pad span,.pad .description{font-size:8px;letter-spacing:.4px}.presetdesk{padding:18px 12px;gap:26px 16px}.screen{min-width:0;padding:16px 10px}.screen #programDisplay{font-size:42px}.screen #targetDisplay{font-size:10px}.presetdesk>div:last-child{align-self:start}.zones{gap:8px}.zones>div{padding:12px 10px}.zones h2{font-size:17px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}

.livekeys{overflow:hidden}.keyreadout{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:20px 0 14px;padding:14px 18px;background:#191611;border:1px solid #6a5134;border-radius:6px;min-height:56px}.keyreadout #playedNotes{font:22px Georgia,serif;color:#efd29c;overflow-wrap:anywhere}.keyreadout #keyVelocity{font:10px monospace;color:#c4a477;white-space:nowrap;letter-spacing:1px}.keyboardScroll{overflow-x:auto;overflow-y:hidden;padding:4px 3px 12px;scrollbar-color:#a77a4b #19130f}.keybed{position:relative;height:158px;min-width:910px;background:#0f0c09;box-shadow:0 -5px 0 #100c09,0 5px 10px #0008;border-radius:3px}.pianokey{position:absolute;top:0;display:block;box-sizing:border-box;transition:background .06s,box-shadow .06s,transform .06s}.whitekey{height:100%;z-index:1;background:linear-gradient(90deg,#d4c5ac,#fff6e4 18%,#f6ecd9 80%,#d5c6ad);border:1px solid #6d6051;border-top:8px solid #b7a58b;border-radius:0 0 4px 4px;box-shadow:inset 0 -5px 0 #bcac90}.blackkey{height:63%;z-index:2;background:linear-gradient(90deg,#100e0b,#3a3229 25%,#1a1612 80%,#080705);border:1px solid #070503;border-bottom:7px solid #0a0806;border-radius:0 0 4px 4px;box-shadow:2px 4px 3px #0008,inset 0 1px 2px #ffffff25}.whitekey>span{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#a99679;font:8px monospace}.pianokey.isDown{transform:translateY(3px);background:linear-gradient(90deg,#ab793c,#f5ce88 45%,#c89550);box-shadow:inset 0 -2px #95632e,0 0 16px #edb66099}.blackkey.isDown{background:linear-gradient(90deg,#6c4623,#dbad60 45%,#825328);border-bottom-color:#71451e;box-shadow:0 0 14px #e6b65c88}.keylegend{display:flex;justify-content:space-between;margin-top:5px;font:10px monospace;color:#aa9271}.livekeys>button{padding:8px 12px;font-size:12px}.livekeys .titleline h2{margin-bottom:0}@media(max-width:600px){.keybed{height:140px;min-width:900px}.keyreadout{padding:12px;align-items:start}.keyreadout #playedNotes{font-size:18px}.keyreadout #keyVelocity{font-size:9px}.keylegend{font-size:9px}}@media(prefers-reduced-motion:reduce){.pianokey{transition:none}}

.appActions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.installPanel .toolbar{margin-top:16px}.installPanel details{margin-top:12px}.installPanel #offlineStatus{font:12px ui-monospace,monospace;color:#cfb58c}.installPanel #offlineStatus.offlineReady{color:#c9d6a5}.installPanel #offlineStatus.offlineReady:before{content:'● ';color:#c9d6a5}html:fullscreen{overflow:auto;background:#191310}html:fullscreen body{min-height:100vh}body{padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}[hidden]{display:none!important}@media(max-width:600px){.appActions{width:100%}.appActions button{flex:1;font-size:12px}.installPanel .titleline{flex-direction:column;gap:8px}.installPanel .toolbar button{font-size:12px}}

.keybed{contain:layout paint}.pianokey{transition:transform .06s}.pianokey.isDown{will-change:auto}

.compatPanel>details>summary{font:500 20px Georgia,serif;color:#ecd3aa}.compatPanel .connection{margin:18px 0}.compatPanel input[type=number]{max-width:110px}.compatPanel .toolbar{margin:14px 0}.compatPanel button:disabled{opacity:.45;cursor:default}.compatPanel #compatStatus{color:#e5c18b}.compatPanel li{font-size:13px;line-height:1.65;color:#cbbba7;margin:8px 0}@media(max-width:600px){.compatPanel .toolbar button{font-size:12px}.compatPanel .connection{gap:12px}}

.appTabs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;padding:10px;background:#241c16;border:1px solid #8b633e;border-radius:10px;position:sticky;top:0;z-index:8;box-shadow:0 3px 5px #0005;margin:18px 0}
.appTabs [role=tab]{padding:12px 6px;font-size:12px;border-bottom:3px solid #100c09;white-space:nowrap}
.appTabs [aria-selected=true]{color:#2b2117;background:linear-gradient(#e3c693,#b9915d);border-color:#e2c28c;border-bottom-color:#76542d;font-weight:650}
.tabPanel{outline-offset:5px}.tabPanel>section:first-child{margin-top:0}.quickActions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.quickActions button{font-size:12px;padding:9px 14px}#panel-test .compatPanel>details>summary{font-size:18px}#panel-help>details{padding:18px;background:#251e1a;border-radius:8px}
@media(max-width:700px){.appTabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:8px}.appTabs [role=tab]{font-size:11px;padding:10px 4px}}

/* Equal tracks and compact controls across narrow and unfolded phones. */
#pads{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
.pad{min-width:0;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between}
.pad b{overflow-wrap:anywhere;line-height:1.25}
.pad .description{letter-spacing:.5px;overflow-wrap:normal}
.tabPanel,.tabPanel section,.connection>*,.presetdesk>*{min-width:0}
@media(max-width:900px){
 body{padding-left:10px;padding-right:10px}
 main{padding:20px}
 section{padding:20px 16px}
 #pads{gap:10px}
 .pad{padding:13px 10px;min-height:112px}
 .pad b{font-size:14px;margin:10px 0}
 .pad span,.pad .description{font-size:9px;letter-spacing:.3px}
 .titleline{flex-wrap:wrap;gap:10px}
 .appTabs{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:600px){
 body{padding-left:max(7px,env(safe-area-inset-left));padding-right:max(7px,env(safe-area-inset-right))}
 main{padding:12px}
 section{padding:18px 12px}
 #pads{gap:8px}
 .pad{min-height:96px;padding:10px 8px}
 .pad b{font-size:12px;margin:8px 0}
 .pad span,.pad .description{font-size:8px;letter-spacing:0}
 .appTabs{padding:6px;gap:5px;margin:12px 0}
 .appTabs [role=tab]{min-height:40px;padding:8px 2px;font-size:11px}
 .presetdesk{grid-template-columns:repeat(2,minmax(0,1fr));padding:16px 10px;gap:22px 12px}
 .connection label{max-width:100%}
 #output{min-width:0;width:100%}
 .zones{grid-template-columns:minmax(0,1fr)}
 .toolbar>button{max-width:100%;white-space:normal}
}
@media(max-width:380px){
 #pads{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pad{min-height:90px}
 .pad b{font-size:13px}
 .pad span,.pad .description{font-size:9px}
 .fields{grid-template-columns:minmax(0,1fr)}
}
@media(max-height:500px) and (orientation:landscape){
 .appTabs{position:relative;grid-template-columns:repeat(8,minmax(0,1fr));padding:5px}
 .appTabs [role=tab]{font-size:10px;padding:8px 2px}
}

.brandRow{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.brandRow h1{flex-shrink:0}header>div:first-child{flex:1;min-width:0}#panel-midi .connection{margin-top:16px}.appTabs [role=tab]{white-space:normal;overflow-wrap:anywhere}
@media(max-width:700px){.brandRow{gap:12px;flex-wrap:nowrap}.brandRow h1{font-size:32px}header>div:first-child{width:100%}}
@media(max-width:380px){.brandRow h1{font-size:28px}.brandRow{gap:10px}}
.sessionBar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;background:#211a15;border:1px solid #8b633e;border-radius:9px;box-shadow:0 3px 6px #0005}.sessionBar>span{flex:1;min-width:170px;font-size:11px;line-height:1.6;color:#cdbfa9;overflow-wrap:anywhere}.sessionBar>span.connected{color:#e9cf97}.sessionBar button{padding:8px 10px;font-size:11px}.appTabs{position:relative}.currentSound{font:20px Georgia,serif;color:#f0cf92;margin:16px 0 10px;min-height:24px}.editGuide{padding:12px;border-left:3px solid #e8bd7c;background:#191410;color:#f0cf92;font-size:13px}.inlineHelp{margin:14px 0}.inlineHelp summary{font-size:12px;color:#cdb28c}.inlineHelp p{margin-bottom:4px}.presetEditor{display:none}.editingPresets .presetEditor{display:flex}#presetStatus{color:#e9cb93;min-height:20px}
.performanceMode header,.performanceMode .appTabs,.performanceMode #note,.performanceMode #panel-presets .titleline,.performanceMode .inlineHelp,.performanceMode .presetEditor,.performanceMode #presetStatus,.performanceMode #panel-presets section>.toolbar,.performanceMode #panel-presets section>p.muted{display:none}.performanceMode main{padding-top:16px}.performanceMode .pad{min-height:100px}.performanceMode .presetdesk{margin-bottom:0}.performanceMode .sessionBar{margin-bottom:12px}.performanceMode #panel-presets section{margin-bottom:0}
@media(max-width:600px){.sessionBar{padding:8px;gap:6px}.sessionBar>span{flex-basis:100%;font-size:10px}.sessionBar button{flex:1;min-height:38px}.currentSound{font-size:17px}.performanceMode main{padding:10px}.performanceMode .pad{min-height:90px}}

/* Original transparent maker mark, without a surrounding panel. */
.brandRow{justify-content:space-between;gap:20px;flex-wrap:nowrap}.makerBrand{display:block;width:clamp(110px,20vw,200px);height:auto;object-fit:contain;flex:0 1 200px;min-width:0;max-width:40%}
@media(max-width:600px){.brandRow{gap:12px}.makerBrand{width:clamp(100px,30vw,160px);flex-basis:160px;max-width:43%}.brandRow h1{font-size:30px}}
@media(max-width:380px){.brandRow h1{font-size:27px}.makerBrand{max-width:42%}}
/* A fixed 16:9 application stage in fullscreen. MIDI nodes stay mounted. */
.screenApp,.screenApp body{width:100%;height:100%;overflow:hidden!important;min-height:0!important;padding:0!important}
.screenApp main{position:fixed;left:50%;top:50%;width:1280px;height:720px;max-width:none;margin:0;padding:14px 22px;transform:translate(-50%,-50%) scale(var(--appScale,1));transform-origin:center;display:flex;flex-direction:column;gap:7px;overflow:hidden;border-radius:12px}
.screenApp header{flex:0 0 60px;margin:0;padding:0 8px 5px;gap:18px;flex-direction:row;align-items:center}.screenApp header h1{font-size:30px;margin:0}.screenApp header p,.screenApp .eyebrow{display:none}.screenApp .makerBrand{width:130px;max-height:58px;flex-basis:130px}.screenApp .brandRow{justify-content:flex-start;gap:26px}.screenApp .appActions{width:auto}
.screenApp .sessionBar{position:relative;flex-shrink:0;padding:6px 10px;min-height:40px}.screenApp .sessionBar>span{flex-basis:auto;font-size:11px}.screenApp .sessionBar button{flex:none;min-height:30px;padding:6px 12px}.screenApp .quickActions{margin:0;gap:8px;flex-shrink:0}.screenApp .quickActions button{padding:6px 12px;min-height:30px}
.screenApp .appTabs{grid-template-columns:repeat(8,minmax(0,1fr));margin:0;padding:5px;gap:6px;flex-shrink:0}.screenApp .appTabs [role=tab]{padding:6px 4px;min-height:32px;font-size:12px}
.screenApp .tabPanel{flex:1 1 0;min-height:0;overflow:hidden;overscroll-behavior:contain;scroll-behavior:auto}.screenApp section{margin:0 0 8px;padding:14px 18px;border-radius:8px}.screenApp .tabPanel>section:last-child{margin-bottom:0}.screenApp h2{font-size:20px;margin:5px 0 10px}.screenApp .inlineHelp{margin:7px 0}.screenApp .inlineHelp p{font-size:12px;line-height:1.5}.screenApp main>p:last-child{display:none}
.screenApp #panel-presets>section{display:grid;grid-template-columns:minmax(0,1fr) 355px;grid-template-rows:auto auto minmax(0,1fr) auto;gap:7px 18px;min-height:100%}.screenApp #panel-presets .titleline{grid-column:1/-1}.screenApp #panel-presets .titleline h2{margin:0}.screenApp #currentSound{grid-column:1;margin:0;font-size:18px;min-height:24px}.screenApp #pads{grid-column:1;grid-row:3;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(60px,1fr));margin:0;gap:7px}.screenApp .pad{min-height:60px;padding:7px 10px;border-bottom-width:3px}.screenApp .pad b{font-size:14px;margin:3px 0;line-height:1.15}.screenApp .pad span,.screenApp .pad .description{font-size:9px}
.screenApp .presetdesk{grid-column:2;grid-row:2/4;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px;margin:0;align-content:start}.screenApp .presetdesk .screen{min-width:0;min-height:115px;padding:10px}.screenApp .screen #programDisplay{font-size:36px;letter-spacing:4px}.screenApp .dial{width:76px!important;height:76px!important;min-height:76px!important}.screenApp .dialgroup .toolbar{margin-top:8px}.screenApp .bankgrid{gap:6px;margin-top:6px}.screenApp .bankgrid button{height:36px;width:48px;padding:5px}.screenApp .bankvalues input{width:54px}.screenApp .bankvalues label{max-width:54px}.screenApp .midibankpanel>span{font-size:9px}.screenApp .presetEditor{grid-column:1/-1;gap:8px}.screenApp .presetEditor label{display:flex;align-items:center}.screenApp .presetEditor input{padding:6px}.screenApp .presetEditor button{padding:7px;font-size:12px}.screenApp #editGuide{grid-column:1/-1;padding:6px 10px;margin:0;font-size:12px}.screenApp #presetStatus{grid-column:1/-1;margin:0;font-size:11px}.screenApp #panel-presets .inlineHelp{grid-column:1/-1}.screenApp #panel-presets>section>.toolbar:not(.presetEditor){grid-column:1/-1}.screenApp #panel-presets .inlineHelp,.screenApp #panel-presets>section>.toolbar:not(.presetEditor){display:none}
.screenApp #panel-midi{columns:2;column-gap:12px}.screenApp #panel-midi>section{break-inside:avoid}.screenApp #sliders{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:16px 0}.screenApp .zones{grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}.screenApp .zones>div{padding:10px 14px}.screenApp .zones label{display:flex;align-items:center;justify-content:space-between;margin:7px 0}.screenApp .zones input{width:100px;padding:7px}.screenApp .zones select{padding:6px}.screenApp .keybed{min-width:0;height:200px}.screenApp .keyboardScroll{overflow:hidden}.screenApp .keyreadout{margin:12px 0;padding:10px}
.screenApp .performanceMode #panel-presets>section{grid-template-rows:auto minmax(0,1fr)}.screenApp .performanceMode #currentSound{grid-row:1}.screenApp .performanceMode #pads{grid-row:2}.screenApp .performanceMode .presetdesk{grid-row:1/3}.screenApp .performanceMode main{padding:14px 22px}.screenApp .performanceMode .pad{min-height:60px}.screenApp .performanceMode .sessionBar{margin:0}
.screenApp #currentSound{grid-row:2}.screenApp #panel-presets .inlineHelp{display:block}.screenApp #panel-presets>section>.toolbar:not(.presetEditor){display:flex}.screenApp #panel-midi{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start;columns:auto}.screenApp #panel-midi>section{min-width:0}.screenApp .editingPresets #panel-presets>section{grid-template-rows:auto auto auto minmax(240px,1fr) auto}.screenApp .editingPresets #editGuide{grid-row:2}.screenApp .editingPresets #currentSound{grid-row:3}.screenApp .editingPresets #pads{grid-row:4}.screenApp .editingPresets .presetdesk{grid-row:3/5}.screenApp .editingPresets .presetEditor{grid-row:5}
.screenApp #panel-presets .titleline>label{display:flex;align-items:center;gap:8px}.screenApp #panel-presets .titleline small{display:none}.screenApp .presetdesk{padding:10px;gap:10px;align-items:start}.screenApp .screen #programDisplay{margin:4px 0}.screenApp .presetdesk .screen{min-height:105px}.screenApp .bankvalues{margin-top:6px}
.helpButton,#tab-help{background:#243b39;border-color:#719c91;color:#e1f1e9}.helpButton:hover,#tab-help:hover{background:#35534d;border-color:#a3c7b9}#tab-help[aria-selected=true]{background:#8fb5a4;color:#132d26;border-color:#c0d8cc}.pageHelpDialog{border-color:#719c91;max-height:85dvh;overflow:auto}.pageHelpDialog h2{color:#c5e2d3}.pageHelpDialog p{font-size:13px;line-height:1.6;margin:14px 0}.pageHelpDialog strong{color:#d2e9dc}.helpCards{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}.helpCards p{margin:0;font-size:13px}.helpCards b{color:#c5e2d3}.fullscreenHint{animation:fullscreenInvite 1.8s ease-in-out 3}@keyframes fullscreenInvite{0%,100%{box-shadow:0 0 0 0 #efc48600;border-color:#73604a}50%{box-shadow:0 0 0 3px #efc48640,0 0 16px #d8a66550;border-color:#efc486}}
@media(prefers-reduced-motion:reduce){.fullscreenHint{animation:none;border-color:#efc486;box-shadow:0 0 0 2px #efc48630}}
@media(max-width:600px){.helpCards{grid-template-columns:1fr}.sessionBar button{flex:1 1 auto}.pageHelpDialog{padding:18px}}
/* All primary controls stay on the screen; lengthy history has its own small viewport. */
.screenApp .tabPanel{overflow:auto;scrollbar-width:thin;scrollbar-color:#8f7653 #251e1a}.screenApp #panel-presets>section{min-height:100%;height:100%;grid-template-rows:auto auto minmax(0,1fr) auto}.screenApp #panel-presets .titleline{grid-row:1}.screenApp #presetStatus{grid-row:4}.screenApp #panel-presets>section>.toolbar:not(.presetEditor){grid-column:2;grid-row:4}.screenApp #panel-presets>section>.toolbar:not(.presetEditor) button{padding:5px 12px;font-size:11px}.screenApp .editingPresets #panel-presets>section{grid-template-rows:auto auto auto minmax(0,1fr) auto auto}.screenApp .editingPresets #presetStatus{grid-row:6}.screenApp .editingPresets #panel-presets>section>.toolbar:not(.presetEditor){grid-row:6}.screenApp .editingPresets #pads{grid-template-rows:repeat(4,minmax(44px,1fr))}.screenApp .editingPresets .pad{min-height:44px}.screenApp .editingPresets .presetdesk{gap:6px}.screenApp .editingPresets .presetdesk .screen{min-height:85px}.screenApp .editingPresets .screen #programDisplay{font-size:30px}.screenApp .editingPresets .bankgrid button{height:30px}.screenApp #panel-test .compatPanel{padding:12px 18px}.screenApp .compatPanel .connection{margin:10px 0}.screenApp .compatPanel .toolbar{margin:8px 0}.screenApp .compatPanel p{font-size:12px;line-height:1.45;margin:8px 0}.screenApp .compatPanel h2{font-size:16px;margin:8px 0}.screenApp #compatReport{max-height:75px;overflow:auto;margin:5px 0}.screenApp .compatPanel li{font-size:11px;margin:3px 0}.screenApp .helpCards{gap:14px 30px}.screenApp #log{max-height:65px}.screenApp .performanceMode #panel-presets>section{grid-template-rows:auto minmax(0,1fr)}.screenApp .performanceMode #panel-presets>section>.toolbar:not(.presetEditor){display:none}
.fullscreenBrand{display:none}.screenApp main{width:var(--appWidth,1280px);height:var(--appHeight,720px)}.screenApp .brandRow .makerBrand{display:none}.screenApp .appActions{display:flex;align-items:center;gap:16px;flex-wrap:nowrap;flex-shrink:0}.screenApp .fullscreenBrand{display:block;width:130px;height:58px;object-fit:contain;flex-shrink:0}.screenApp header>div:first-child{width:auto}.screenApp #fullscreen{white-space:nowrap}
.screenApp.compactLandscape main{padding:8px 14px;gap:5px}.screenApp.compactLandscape header{flex-basis:42px;padding-bottom:0}.screenApp.compactLandscape header h1{font-size:27px}.screenApp.compactLandscape .fullscreenBrand{height:40px;width:100px}.screenApp.compactLandscape .sessionBar{min-height:34px;padding:4px 8px}.screenApp.compactLandscape .quickActions button{min-height:26px;padding:4px 10px}.screenApp.compactLandscape .appTabs{padding:3px}.screenApp.compactLandscape .appTabs [role=tab]{min-height:28px;padding:4px}.screenApp.compactLandscape section{padding:10px 12px}.screenApp.compactLandscape #panel-presets>section{grid-template-columns:minmax(0,1fr) 325px;gap:5px 12px}.screenApp.compactLandscape .pad{min-height:48px;padding:5px 8px}.screenApp.compactLandscape .pad b{font-size:14px}.screenApp.compactLandscape .presetdesk{gap:7px;padding:8px}.screenApp.compactLandscape .bankgrid button{height:30px}.screenApp.compactLandscape .screen #programDisplay{font-size:30px}.screenApp.compactLandscape .presetdesk .screen{min-height:90px}.screenApp.compactLandscape .dial{width:64px!important;height:64px!important;min-height:64px!important}.screenApp.compactLandscape .keybed{height:160px}.screenApp.compactLandscape .keyreadout{margin:8px 0}.screenApp.compactLandscape .zones label{margin:4px 0}.screenApp.compactLandscape .compatPanel .connection{margin:6px 0}.screenApp.compactLandscape .compatPanel .toolbar{margin:5px 0}
/* Light from the upper left: transparent marks cast a soft shadow down-right. */
.makerBrand,.fullscreenBrand{filter:drop-shadow(1px 1px 0 #fff0d91a) drop-shadow(2px 3px 2px #150b09a6)}
.appTabs{grid-template-columns:repeat(9,minmax(0,1fr))}.screenApp .appTabs{grid-template-columns:repeat(9,minmax(0,1fr))}
@media(max-width:900px){.appTabs{grid-template-columns:repeat(5,minmax(0,1fr))}}
.drumSection .toolbar label{min-width:90px}.drumSection #drumVelocity{width:135px}.drumPads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0}.drumPad{min-width:0;min-height:105px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;border-color:var(--padHue);border-bottom:4px solid #100c09;background:linear-gradient(145deg,#3c342e,#211b18);padding:14px;color:#eee2d0;touch-action:none;user-select:none;box-shadow:0 3px 5px #0006}.drumPad span,.drumPad small{font-size:10px;letter-spacing:1px;color:var(--padHue)}.drumPad b{font-size:18px}.drumPad.isHit{background:#72563b;border-color:#ffe0a2;box-shadow:inset 0 0 0 2px #f0c583,0 0 12px #e4b46866;transform:translateY(2px)}
.screenApp .drumSection{height:100%;display:flex;flex-direction:column}.screenApp .drumPads{flex:1;min-height:0;grid-template-rows:repeat(4,minmax(0,1fr));gap:9px;margin:8px 0}.screenApp .drumPad{min-height:0;padding:9px 14px}.screenApp .drumHint,.screenApp #drumStatus{font-size:11px;margin:4px 0}.screenApp .drumSection .titleline h2{margin:0}.screenApp .drumSection .toolbar label{display:flex;align-items:center;gap:8px}.screenApp .drumSection select{padding:6px 10px}.screenApp .drumPad b{font-size:17px}.screenApp.compactLandscape .drumPad{padding:6px 12px}.screenApp.compactLandscape .drumPad b{font-size:15px}
@media(max-width:600px){.drumPads{gap:8px}.drumPad{min-height:90px;padding:10px 8px}.drumPad b{font-size:13px}.drumPad span,.drumPad small{font-size:8px}.drumSection .toolbar{gap:8px}.drumSection #drumVelocity{width:100px}}
.drumSection .toolbar label:has(#drumEdit){display:flex;align-items:center;gap:8px}.drumPad b{overflow-wrap:anywhere}.drumPerformance .drumSection>.titleline,.drumPerformance .drumHint,.drumPerformance #drumStatus{display:none}.drumPerformance .drumPads{margin:0;min-height:65dvh}.screenApp .drumPerformance .drumPads{min-height:0}.screenApp .drumPerformance .drumPad b{font-size:23px}.screenApp.compactLandscape .drumPerformance .drumPad b{font-size:20px}
.transposeBar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0;padding:10px;background:#1e1914;border:1px solid #70563b;border-radius:8px}.transposeBar output{float:none;min-width:45px;text-align:center;font:17px monospace}.transposeBar button{padding:7px 12px}.transposeBar small{letter-spacing:0;font-size:10px;color:#bdac94}.transposeBar .transposed{box-shadow:0 0 0 2px #e3bd7e60}
.programSlider{appearance:none;width:160px!important;min-height:32px;background:transparent;touch-action:pan-y}.programSlider::-webkit-slider-runnable-track{height:8px;border-radius:5px;background:linear-gradient(#130f0c,#665039);border:1px solid #9a784c}.programSlider::-webkit-slider-thumb{appearance:none;width:22px;height:28px;margin-top:-11px;border-radius:5px;border:1px solid #f4d497;background:linear-gradient(90deg,#8e6338,#e5c38a 45%,#ac7e47);box-shadow:0 2px 4px #0008}.programSlider::-moz-range-track{height:8px;border-radius:5px;background:#665039}.programSlider::-moz-range-thumb{width:20px;height:26px;border-radius:5px;background:#d6b17b;border-color:#f4d497}.dialgroup{min-width:0}.effectValueReset{font-size:10px;padding:4px 8px;justify-self:start}
.splitMatrix{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0;padding:10px 14px;background:#1d1915;border:1px solid #7d603d;border-radius:8px}.splitMatrix select{width:100%;min-width:0}.drumPad.dragSource{outline:3px solid #ebc18a;opacity:.65}.drumPad.dropTarget{background:#466254;outline:3px solid #c5e6cb}
#drumEditor{position:fixed;inset:12px 0 auto;margin:0 auto;max-height:calc(100dvh - 24px);overflow:auto;width:min(560px,94vw)}#drumEditor .fields{grid-template-columns:1fr}#drumEditor #drumNote{min-height:44px}#drumNoteValue{float:none;font:20px monospace;color:#ecd09d}#drumEditor .toolbar{margin-top:12px}.screenApp .transposeBar{margin:8px 0;padding:6px 10px}.screenApp .transposeBar button{padding:5px 10px}.screenApp .splitMatrix{margin:5px 0;padding:7px 10px}.screenApp .splitMatrix select{padding:5px 8px}.screenApp #sliders{gap:10px;margin:10px 0}.screenApp .programSlider{width:140px!important}.screenApp .dialgroup .toolbar{margin-top:4px}.screenApp .drumSection .toolbar{gap:8px}.screenApp .drumSection .toolbar label{min-width:0;font-size:11px}.screenApp.compactLandscape .transposeBar{gap:5px;padding:5px}.screenApp.compactLandscape .transposeBar small{display:none}@media(max-width:600px){.transposeBar{gap:6px}.transposeBar button{font-size:12px}.splitMatrix{padding:9px;gap:8px}.splitMatrix label{font-size:10px}.splitMatrix select{font-size:12px;padding:8px}}
/* Compact instrument desk: banks flank the display and numeric entry. */
.presetdesk{display:grid;grid-template-columns:minmax(88px,1fr) minmax(130px,1.5fr) minmax(110px,1fr);gap:12px;align-items:start}.presetBankPanel,.midibankpanel{min-width:0}.presetdesk small{font-size:10px;letter-spacing:1px}.presetdesk .bankgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.presetdesk .bankgrid button{width:100%;min-width:0}.programPanel{min-width:0}.programPanel .screen{min-width:0}.programKeypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:8px}.programKeypad button{padding:7px 4px;min-height:34px;font-size:14px}.presetdesk .dialgroup{grid-column:1/-1;display:grid;grid-template-columns:38px minmax(0,1fr) 38px;align-items:center;gap:10px}.dialgroup label{text-align:center;font-size:11px;gap:2px}.presetdesk .programSlider{width:100%!important}.dialgroup>button{padding:6px;min-height:36px}#programEntryStatus{grid-column:1/-1;margin:0;font-size:10px;text-align:center}.presetdesk .bankvalues{flex-wrap:wrap;gap:4px}.presetdesk .bankvalues label{max-width:100%;min-width:0;flex:1}.presetdesk .bankvalues input{width:100%;min-width:0}.effectsActions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.effectsActions>label{display:grid;grid-template-columns:auto 30px;gap:2px 8px;min-width:140px;flex:1}.effectsActions>label input{grid-column:1/-1}.splitFeedback:empty{display:none}.splitFeedback{font-size:12px;margin:5px 0}.splitConnection{align-items:end}.splitConnection>label{flex:1;min-width:0}.splitConnection select{width:100%;min-width:0}.splitConnection button{font-size:12px}
.screenApp #panel-presets>section{grid-template-columns:minmax(0,1fr) 390px}.screenApp .presetdesk{grid-template-columns:minmax(80px,1fr) minmax(120px,1.4fr) minmax(100px,1fr);gap:8px;padding:8px;align-content:start}.screenApp .presetdesk .screen{min-height:90px;padding:7px}.screenApp .programKeypad{gap:4px;margin-top:6px}.screenApp .programKeypad button{min-height:28px;padding:3px;font-size:13px}.screenApp .presetdesk .bankgrid button{height:34px;width:100%}.screenApp .presetdesk .bankvalues input{width:100%;padding:5px!important}.screenApp .presetdesk .bankvalues label{max-width:none;font-size:10px}.screenApp #targetDisplay{font-size:9px}.screenApp .effectsActions{flex-wrap:nowrap;gap:10px}.screenApp .effectsActions button{font-size:12px;padding:8px 12px;white-space:nowrap}.screenApp #panel-effects #sliders{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px;margin:10px 0}.screenApp #sliders label{gap:3px}.screenApp #effectsStatus{margin:7px 0;font-size:11px;line-height:1.3}.screenApp #panel-split .zones{margin:7px 0;gap:10px}.screenApp #panel-split .zones>div{padding:7px 12px}.screenApp #panel-split .zones h2{margin:0 0 5px;font-size:17px}.screenApp #panel-split .zones label{margin:4px 0}.screenApp #panel-split .splitConnection{gap:12px}.screenApp #panel-split .splitConnection select{padding:7px}.screenApp #panel-split .splitMatrix{padding:6px 10px;margin:6px 0}.screenApp #panel-split .titleline>label{display:flex;align-items:center;gap:8px}.screenApp.compactLandscape #panel-presets>section{grid-template-columns:minmax(0,1fr) 370px}.screenApp.compactLandscape .presetdesk{gap:5px;padding:6px}.screenApp.compactLandscape .programKeypad button{min-height:24px;padding:2px}.screenApp.compactLandscape .presetdesk .screen{min-height:80px}.screenApp.compactLandscape .presetdesk .bankgrid button{height:30px}.screenApp.compactLandscape #panel-effects #sliders{gap:8px 22px}.screenApp.compactLandscape #panel-split .zones input,.screenApp.compactLandscape #panel-split .zones select{padding:5px}.screenApp.compactLandscape #panel-split h2{margin:3px 0 6px}
@media(max-width:450px){.presetdesk{gap:7px;grid-template-columns:minmax(66px,1fr) minmax(110px,1.45fr) minmax(85px,1fr)}.presetdesk .bankgrid button{height:38px;padding:5px}.presetdesk .screen{padding:8px}.presetdesk small{font-size:8px}.effectsActions{gap:7px}.effectsActions button{font-size:12px;padding:9px}.splitConnection{display:grid;grid-template-columns:1fr 1fr}.splitConnection button{grid-column:1/-1}}
.effectsTarget{margin:0 0 12px;padding:9px 12px;border:1px solid #8f7049;border-radius:7px;background:#1c1814;color:#e7c893;font-size:14px;line-height:1.4}.splitGuide{margin:5px 0;font-size:11px;line-height:1.4}.screenApp .effectsTarget{margin:0 0 8px;padding:6px 10px;font-size:12px}.screenApp #panel-effects h2{margin-bottom:6px}.screenApp .splitFeedback{margin:4px 0;font-size:11px;line-height:1.3}.screenApp .splitGuide{font-size:10px;line-height:1.3}.screenApp.compactLandscape #panel-effects #sliders{gap:5px 20px;margin:6px 0}.screenApp.compactLandscape #panel-split .zones label{margin:3px 0}
.screenApp #panel-effects .effectValueReset{min-height:24px;padding:3px 8px;line-height:1.2}.screenApp.compactLandscape #panel-effects>section,.screenApp.compactLandscape #panel-split>section{padding-top:8px;padding-bottom:8px}.screenApp.compactLandscape #panel-effects .effectsActions>label input{min-height:26px}.screenApp.compactLandscape #panel-effects #sliders label{gap:2px}.screenApp.compactLandscape #panel-effects #sliders input{min-height:27px}.screenApp.compactLandscape #panel-split .splitGuide{margin-bottom:0}
/* Cabinet finishes use only painted gradients: no extra image downloads. */
.themePicker{display:flex;align-items:center;gap:7px;font-size:11px}.themePicker select{padding:7px 9px;font-size:12px;max-width:165px}.screenApp .themePicker select{padding:5px 7px;max-width:145px;font-size:11px}.screenApp .themePicker{gap:5px}.effectHeading{display:flex;gap:12px;align-items:center;margin-bottom:8px}.effectHeading .effectsTarget{flex:1;margin:0}.effectHeading>label{display:flex;align-items:center;gap:8px;white-space:nowrap}.effectHeading select{padding:6px 12px}.splitAdvanced{margin:8px 0}.splitAdvanced summary{font-size:12px}.screenApp .splitAdvanced{margin:5px 0}.screenApp .splitAdvanced summary{font-size:11px}.screenApp .splitAdvanced .zones{margin:5px 0}.screenApp.compactLandscape .splitAdvanced .zones label{margin:2px 0}.screenApp.compactLandscape .splitAdvanced .zones input,.screenApp.compactLandscape .splitAdvanced .zones select{padding:4px}.screenApp.compactLandscape .effectHeading{margin-bottom:6px;gap:8px}.screenApp.compactLandscape .effectHeading label{font-size:11px}.screenApp.compactLandscape .effectHeading select{padding:4px 8px}
:root[data-theme=black]{background:#101112}:root[data-theme=black] body{background:radial-gradient(ellipse at 50% 0,#45474950,transparent 70%),#101112}:root[data-theme=black] main{border-color:#68635d;box-shadow:0 2px 0 #ffffff15 inset,0 0 0 5px #111111,0 28px 75px #0009;background:repeating-linear-gradient(2deg,transparent 0px,#00000040 2px,transparent 4px,transparent 9px,#b6b0a509 10px,transparent 12px),repeating-linear-gradient(178deg,transparent 0px,#0005 1px,transparent 3px,transparent 24px),linear-gradient(100deg,#17191a,#353637 27%,#242525 48%,#3c3b39 72%,#151718)}
:root[data-theme=white]{background:#d9d6d0}:root[data-theme=white] body{background:radial-gradient(ellipse at 50% 0,#fff9,transparent 70%),#d7d4ce}:root[data-theme=white] main{border-color:#afa99f;box-shadow:0 2px 0 #fff9 inset,0 0 0 5px #b6b0a7,0 28px 75px #413b3440;background:repeating-linear-gradient(2deg,transparent 0px,#776c6020 2px,transparent 4px,transparent 9px,#fff8 10px,transparent 12px),repeating-linear-gradient(178deg,transparent 0px,#84766612 1px,transparent 3px,transparent 24px),linear-gradient(100deg,#d9d6cf,#f7f4ec 27%,#e8e5dd 48%,#fffdf8 72%,#d6d2c9)}
:root[data-theme=pine]{background:#bda583}:root[data-theme=pine] body{background:radial-gradient(ellipse at 50% 0,#f9dfaf70,transparent 70%),#ad9476}:root[data-theme=pine] main{border-color:#b18a51;box-shadow:0 2px 0 #fff3c866 inset,0 0 0 5px #98774d,0 28px 75px #38250e60;background:repeating-linear-gradient(2deg,transparent 0px,#945a1724 2px,transparent 5px,transparent 17px,#fff1b82b 18px,transparent 20px),repeating-linear-gradient(178deg,transparent 0px,#9c60161e 1px,transparent 4px,transparent 33px),linear-gradient(100deg,#c49b62,#e5c48d 27%,#d0ad74 48%,#ecd19e 72%,#c49b65)}
:root[data-theme=white] h1,:root[data-theme=pine] h1{color:#36291e;text-shadow:0 1px 0 #fff9,0 2px 2px #543a1d35}:root[data-theme=white] h1 span,:root[data-theme=pine] h1 span{color:#725236!important}:root[data-theme=white] header p,:root[data-theme=white] .eyebrow,:root[data-theme=pine] header p,:root[data-theme=pine] .eyebrow{color:#594631}:root[data-theme=white] header,:root[data-theme=pine] header{border-bottom-color:#795d3c55}:root[data-theme=white] main>p:last-child,:root[data-theme=pine] main>p:last-child{color:#594631}:root[data-theme=white] .makerBrand,:root[data-theme=white] .fullscreenBrand,:root[data-theme=pine] .makerBrand,:root[data-theme=pine] .fullscreenBrand{filter:drop-shadow(1px 1px 0 #fff6) drop-shadow(1px 2px 1px #36230b80)}
@media(max-width:600px){.themePicker{flex:1;justify-content:center}.themePicker select{max-width:150px}.effectHeading{align-items:stretch;flex-direction:column}.effectHeading>label{justify-content:flex-end}.screenApp .effectHeading{flex-direction:row}.screenApp .themePicker{flex:none}.screenApp .themePicker select{max-width:125px}}
.screenApp.compactLandscape #panel-split>section{padding-bottom:4px}.effectsActions button:disabled{opacity:.45;cursor:default}