/* One fitted instrument: every performance surface and control bank stays visible. */
#hardwareDesk,#rotateNotice,.hardware-only,.hardware-chops,.touch-choice{display:none}
:root[data-view=hardware]{--bg:#e8e6de;--surface:#d9dbd3;--panel:#e9eae2;--raised:#f4f3eb;--field:#f2f3ec;--hover:#fffdf5;--text:#202d2d;--muted:#58645f;--line:#b7bdb3;--line-strong:#85948b;--accent:#be5429;--accent-ink:#fff8ef;--red:#b9272c;--overdub:#a86513;--queued:#886308;--play:#287858;--input:#b75931;--output:#287890;--key:#f8f7ed;--key-ink:#192020;--key-edge:#b7b9ae;--record-face:#243b3a;--record-ink:#f6f4e8;--track-1:#bf683a;--track-2:#a57c2b;--track-3:#8a629b;--track-4:#398770;--track-5:#38859c;color-scheme:light;scroll-padding:0}
:root[data-view=hardware][data-theme=cobalt]{--accent:#3168a4;--surface:#d2dade;--panel:#e1e7e9;--bg:#e6ebee}
:root[data-view=hardware][data-theme=violet]{--accent:#82568e;--surface:#ddd4df;--panel:#eae2eb;--bg:#eee8f0}
:root[data-view=hardware][data-theme=daylight]{--accent:#b43d37;--surface:#ebece7;--panel:#f4f4ec;--bg:#f7f7f1}
:root[data-view=hardware][data-theme=mint]{--accent:#377967;--surface:#d7dfd4;--panel:#e5ece0;--bg:#e9eee4}
:root[data-view=hardware] body,:root[data-view=hardware] main{margin:0;padding:0;width:100%;height:100dvh;max-width:none;overflow:hidden;background:var(--bg)}
:root[data-view=hardware] main>:not(#hardwareDesk){display:none!important}
:root[data-view=hardware] #hardwareDesk{--desk-scale:1;display:grid;grid-template-rows:42px minmax(196px,.85fr) minmax(384px,1.5fr) minmax(190px,.85fr) 88px 28px;gap:5px;width:calc(100vw / var(--desk-scale));height:calc(100dvh / var(--desk-scale));zoom:var(--desk-scale);padding:8px 12px;border-inline:4px solid var(--accent);background:linear-gradient(115deg,var(--panel),var(--surface))}
#hardwareDesk *,#hardwareDesk>*{min-width:0;min-height:0}
:root[data-view=hardware] .hardware-only{display:block}
:root[data-view=hardware] [data-original-view]{display:none!important}
#hardwareDesk button,#hardwareDesk select,#hardwareDesk input{font-size:11px;min-height:26px;border-radius:4px;line-height:1.15;max-width:100%;min-width:0}
#hardwareDesk button{background:var(--raised);border:1px solid var(--line);box-shadow:0 1px 1px #101a2010;color:var(--text);padding:3px 6px;font-weight:600}
#hardwareDesk button:hover:not(:disabled){background:var(--hover);border-color:var(--accent)}
#hardwareDesk button[aria-pressed=true],#hardwareDesk button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
#hardwareDesk button:disabled{opacity:.46;color:var(--muted)}
#hardwareDesk input:not([type=range]):not([type=checkbox]),#hardwareDesk select{color:var(--text);background:var(--field);border:1px solid var(--line-strong);padding:3px 5px}
#hardwareDesk input[type=range]{height:24px;min-height:24px;padding:0;box-shadow:none;background:transparent;border:0;accent-color:var(--track-color,var(--accent));width:100%;touch-action:none}
#hardwareDesk label{font-size:9px;color:var(--muted);line-height:1.2}
#hardwareDesk kbd{font-size:8px;color:inherit;opacity:.6;margin-left:3px}
#hardwareDesk h2,#hardwareDesk h3{font-size:12px;font-weight:700;line-height:1.2;letter-spacing:0}
#hardwareDesk p{line-height:1.3}
#hardwareDesk .toolbar{height:100%;min-height:0;margin:0;padding:0 0 4px;position:static;background:none;backdrop-filter:none;gap:12px;flex-wrap:nowrap;border-bottom:1px solid var(--line-strong)}
#hardwareDesk .brand{min-width:120px;flex:none;gap:0}
#hardwareDesk .brand b{font-size:22px;letter-spacing:-1px}
#hardwareDesk .brand .eyebrow{font:7px ui-monospace,monospace;letter-spacing:2px}
#hardwareDesk .transport{gap:6px;margin-right:0}
#hardwareDesk .transport button{min-height:32px}
#hardwareDesk #run{min-width:108px}
#hardwareDesk #tempo{min-width:120px;color:#dcf4ed;background:#233d3d;border-color:#233d3d;box-shadow:inset 0 1px 3px #0005}
#hardwareDesk #tempo strong{font:21px ui-monospace,monospace}
#hardwareDesk #tempo small{color:#d3e5df}
#hardwareDesk #beats{display:flex}
#hardwareDesk #beats i{height:6px;background:#758b81}
#hardwareDesk #beats i.on{background:#a9e9bb}
#hardwareDesk #hwSource{flex:1;display:block}
#hardwareDesk .toolbar nav{gap:4px;flex-wrap:nowrap;width:auto}
#hardwareDesk .toolbar nav button{min-height:30px;padding:3px 10px}
#hardwareDesk #sources{display:flex;height:100%;gap:8px;border:0;padding:0;margin:0;background:none;align-items:center;flex-wrap:nowrap}
#hardwareDesk .source-main{flex:0 0 140px;gap:8px}
#hardwareDesk .record-source{gap:4px;flex-wrap:nowrap;width:100%}
#hardwareDesk .record-source>.touch-choice{flex:1}
#hardwareDesk .source-tabs{display:none}
#source{display:none}
#hardwareDesk .section-label{display:block;font:9px ui-monospace,monospace;white-space:nowrap}
#hardwareDesk .source-tabs{gap:4px;flex-wrap:nowrap}
#hardwareDesk .source-tabs button{padding:3px 12px;min-height:26px;font-size:10px}
#hardwareDesk .beat-tools,#hardwareDesk .source-feedback{display:none}
#hardwareDesk .source-context{border:0;margin:0;padding:0;flex:1;flex-wrap:nowrap;align-items:center}
#hardwareDesk .input-actions{gap:8px;justify-content:flex-end}
#hardwareDesk .input-actions label{display:flex;align-items:center;gap:8px;white-space:nowrap}
#hardwareDesk .input-actions input{max-width:90px}
#hardwareDesk .signal-readout{font-size:9px}
#hardwareDesk .meter{width:30px}
/* Loop actions and all eight slice switches / repeat pads are always exposed. */
#hwLoops{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,2.5fr);grid-template-rows:32px minmax(0,1fr);gap:4px 10px}
#hardwareDesk .loops-heading{grid-column:1;grid-row:1;min-height:0;height:100%;padding:0;gap:8px;margin:0;flex-wrap:nowrap}
#hardwareDesk .loops-heading h2{font-size:12px;white-space:nowrap}
#hardwareDesk .loops-heading p,#hardwareDesk #trackScrollHint{display:none!important}
#hardwareDesk #loopCount{font-size:9px;margin-left:auto}
#hardwareDesk #tracks,#hardwareDesk #tracks.expanded{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(var(--hardware-tracks,5),minmax(0,1fr));gap:6px;overflow:visible;align-items:stretch;padding:0;scroll-snap-type:none}
#hardwareDesk .track,#hardwareDesk .tracks.expanded .track{padding:5px;min-width:0;margin:0;border:1px solid var(--line-strong);border-radius:6px;background:var(--panel);overflow:visible;display:grid;grid-template-columns:80px minmax(0,1fr);grid-template-rows:22px minmax(56px,1fr) 59px;gap:2px 6px}
#hardwareDesk .track:before{display:none}
#hardwareDesk .track.selected{border-color:var(--track-color);box-shadow:inset 0 2px var(--track-color)}
#hardwareDesk .track-head{grid-row:1;grid-column:1/-1;min-height:0;padding:0;gap:3px}
#hardwareDesk .select-track,#hardwareDesk .track-head .select-track{padding:0 3px;gap:5px;min-height:22px;background:none;border:0;box-shadow:none}
#hardwareDesk .select-track[aria-pressed=true]{background:transparent;color:var(--track-color)}
#hardwareDesk .select-track b{font:17px ui-monospace,monospace}
#hardwareDesk .select-track span{display:inline;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hardwareDesk .track-options{display:none;min-width:26px;min-height:22px;font-size:18px;padding:0}
#hardwareDesk .track-body{grid-column:1;grid-row:2;display:flex;align-items:center;justify-content:center;height:100%;min-height:0;margin:0;padding:0}
#hardwareDesk .loop-display{height:72px;width:72px;min-height:0;border:0;padding:0;border-radius:50%;background:transparent;box-shadow:none;color:var(--text)}
#hardwareDesk .loop-ring{width:100%;height:100%}
#hardwareDesk .loop-state strong{font-size:11px}
#hardwareDesk .loop-state>span{font-size:6px}
#hardwareDesk .track-controls{grid-column:2;grid-row:2;display:flex;flex-direction:column;justify-content:center;padding:0;gap:1px}
#hardwareDesk .track-playback{grid-template-columns:1fr .9fr .9fr!important}
#hardwareDesk .clear-loop{color:var(--red)}
#hardwareDesk .track-row{display:grid;grid-template-columns:1fr 1fr;gap:3px}
#hardwareDesk .track-row button{min-height:23px;padding:2px;font-size:10px}
#hardwareDesk .track-volume{display:flex;gap:4px;align-items:center;min-height:20px;margin:0}
#hardwareDesk .track-volume input{writing-mode:horizontal-tb;direction:ltr;width:100%;height:20px;min-height:20px}
#hardwareDesk .track-volume output{display:block;min-width:18px;font:9px ui-monospace,monospace}
#hardwareDesk .hardware-chops{grid-row:3;grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) 64px;grid-template-rows:11px 1fr;gap:1px 5px;border-top:1px solid var(--line);padding-top:2px}
#hardwareDesk .hw-chop-label{grid-column:1/-1;font:7px ui-monospace,monospace;color:var(--muted)}
#hardwareDesk .hw-slices{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px}
#hardwareDesk .hw-slice{display:grid;grid-template-rows:13px 26px;gap:2px}
#hardwareDesk .hw-slice-enable{font-size:0;padding:0;min-height:13px;border-radius:3px}
#hardwareDesk .hw-slice-enable[aria-pressed=true]{background:var(--track-color);border-color:var(--track-color)}
#hardwareDesk .hw-slice-hold{font:11px ui-monospace,monospace;min-height:26px;touch-action:none;user-select:none;padding:0}
#hardwareDesk .hw-slice-hold.active{background:var(--track-color);color:white}
#hardwareDesk .hw-slice-mode{display:grid;grid-template-columns:1fr;grid-template-rows:19px 19px;gap:2px}
#hardwareDesk .hw-slice-mode>button,#hardwareDesk .hw-slice-mode .touch-choice-value{font-size:8px;min-height:18px;padding:0 2px;height:19px}
#hardwareDesk .hw-slice-mode>button:last-child{grid-column:1/-1}
#hardwareDesk #hwTrackEditor{grid-row:1;grid-column:2;padding:0}
#hardwareDesk #trackSettingsContent{display:flex;align-items:center;gap:6px;height:100%}
#hardwareDesk #trackSettingsContent h3{font-size:9px;width:85px;flex:none}
#hardwareDesk #trackSettingsContent .fields{display:grid;grid-template-columns:minmax(100px,1fr) minmax(120px,.7fr);gap:6px;flex:1;margin:0}
#hardwareDesk #trackSettingsContent label{display:flex;align-items:center;gap:5px;font-size:8px;white-space:nowrap}
#hardwareDesk #trackSettingsContent input{width:100%}
#hardwareDesk #routeExplanation,#hardwareDesk #clearTrack,#hardwareDesk .legacy-route,#hardwareDesk label:has(> #trackRoute){display:none}
#hardwareDesk #replaceSelected,#hardwareDesk #clearTrack{font-size:9px;padding:3px 6px}
#hardwareDesk #clearTrack{color:var(--red)}
/* Four synth pads sit between the two effect banks. */
#hwRack{display:grid;grid-template-columns:minmax(188px,.8fr) minmax(0,3.7fr) minmax(188px,.8fr);gap:6px}
#hardwareDesk .fx-bank{height:100%;padding:5px;border:1px solid var(--line-strong);border-radius:6px;background:var(--panel);display:grid;grid-template-rows:16px minmax(0,1fr) 23px;gap:3px;position:relative}
#hardwareDesk .bank-heading{gap:5px;margin:0}
#hardwareDesk .bank-heading h2{font-size:11px}
#hardwareDesk .bank-dot{width:5px;height:5px}
#hardwareDesk .bank-note,#hardwareDesk .chain-route,#hardwareDesk .pad-help{display:none}
#hardwareDesk .fx-stack{display:grid;grid-template-rows:1fr 1fr;gap:4px}
#hardwareDesk .fx-deck,#hardwareDesk .fx-bank.chained .fx-deck{padding:3px;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:22px minmax(45px,1fr) 13px 23px;gap:2px 3px;border:1px solid var(--line);border-radius:4px;background:var(--surface);position:relative}
#hardwareDesk .deck-heading{grid-row:2;grid-column:1/-1;position:absolute;top:4px;left:5px;right:5px;z-index:1;pointer-events:none;margin:0;min-height:0;color:#cfdfd9}
#hardwareDesk .fx-title,#hardwareDesk .pad-state{font-size:7px}
#hardwareDesk .fx-deck>.touch-choice{grid-row:1;grid-column:1/-1}
#hardwareDesk .xy,#hardwareDesk .fx-bank.chained .xy{grid-row:2;grid-column:1/-1;width:100%;height:100%;min-height:45px;margin:0;background-color:#183335;border-color:#486961;border-width:1px;border-radius:4px}
#hardwareDesk .xy .pad-note{color:#c4d8d1;font-size:8px}
#hardwareDesk .pad-axes,#hardwareDesk .fx-bank.chained .pad-axes{grid-row:3;grid-column:1/-1;display:flex;flex-direction:row;justify-content:space-between;font:7px/1.2 ui-monospace,monospace;gap:2px;padding:0;color:var(--muted);min-height:0;overflow:hidden}
#hardwareDesk .fx-press,#hardwareDesk .fx-bank.chained .fx-press{display:block;grid-row:4;grid-column:1;min-height:23px;margin:0;padding:1px;font-size:8px}
#hardwareDesk .fx-press kbd{display:none}
#hardwareDesk .fx-bottom{display:contents}
#hardwareDesk .fx-bottom button,#hardwareDesk .fx-bank.chained .fx-bottom button{grid-row:4;min-height:23px;padding:2px;font-size:9px}
#hardwareDesk .fx-bottom button:first-child{grid-column:2}
#hardwareDesk .fx-bottom button:nth-child(2){grid-column:3}
#hardwareDesk .fx-bottom label{position:absolute;right:6px;top:39px;bottom:22px;width:15px;font-size:0;margin:0;pointer-events:none}
#hardwareDesk .fx-bottom input,#hardwareDesk .fx-bank.chained .fx-bottom input{writing-mode:vertical-lr;direction:rtl;height:100%;min-height:0;width:15px;pointer-events:auto}
#hardwareDesk .add-pad{width:100%;min-height:23px;font-size:9px;margin:0;padding:2px}
#hardwareDesk .fx-deck.pad-off{opacity:.5}
#hardwareDesk .fx-deck.pad-off .xy{pointer-events:none}
#hardwareDesk #touchInstrument{height:100%;margin:0;padding:5px;border:1px solid var(--line-strong);border-radius:6px;background:var(--panel);display:grid;grid-template-columns:170px minmax(0,1fr);grid-template-rows:30px 30px minmax(144px,1fr) 112px;gap:4px;position:relative}
#hardwareDesk .touch-heading{grid-column:1;grid-row:1;display:grid;grid-template-columns:1fr 70px;grid-template-rows:14px 14px;align-items:center;gap:0 4px;margin:0}
#hardwareDesk .touch-heading>div{grid-column:1;grid-row:1}
#hardwareDesk .touch-heading>span{grid-column:1;grid-row:2}
#hardwareDesk .touch-heading button{grid-column:2;grid-row:1/3}
#hardwareDesk .touch-heading h2{font-size:12px;margin:0}
#hardwareDesk .touch-heading>span{display:block;font:7px ui-monospace,monospace}
#hardwareDesk .touch-heading button{font-size:8px;min-height:17px;padding:0 4px}
#hardwareDesk .touch-toolbar{grid-column:2;grid-row:1;display:grid;grid-template-columns:1.45fr .7fr 1fr;gap:6px;margin:0}
#hardwareDesk .touch-toolbar label{display:flex;align-items:center;gap:5px;font-size:8px;grid-column:auto;white-space:nowrap}
#hardwareDesk .touch-toolbar label:has(#touchKeyboard){display:none}
#hardwareDesk .touch-preset-note{position:absolute;right:7px;top:42px;width:180px;margin:0;display:block}
#hardwareDesk #touchPresetHint{display:none}
#hardwareDesk .touch-preset-note label{display:flex;align-items:center;gap:5px;font-size:8px;cursor:pointer}
#hardwareDesk .touch-preset-note input{width:18px;height:18px;min-height:18px;flex:none}
#hardwareDesk .touch-harmony{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:nowrap;gap:4px;align-items:center;margin:0 184px 0 0}
#hardwareDesk .touch-harmony label{display:flex;align-items:center;gap:5px;flex:1;font-size:8px;max-width:280px}
#hardwareDesk #touchChords{display:flex;gap:3px;flex-wrap:nowrap;min-width:0;overflow-x:auto}
#hardwareDesk #touchChords button{min-width:26px;min-height:26px;padding:2px}
#hardwareDesk .touch-harmony>button{font-size:9px}
#hardwareDesk .touch-pads[data-count]{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;height:100%}
#hardwareDesk .touch-card{--voice:#b96a3c;--accent:var(--voice);background:var(--surface);padding:3px;border-color:var(--line-strong);border-radius:5px;overflow:visible;display:grid;grid-template-columns:70px minmax(0,1fr);grid-template-rows:23px minmax(55px,1fr) 24px;gap:3px}
#hardwareDesk .touch-card:nth-child(2){--voice:#287e77}#hardwareDesk .touch-card:nth-child(3){--voice:#8660a7}#hardwareDesk .touch-card:nth-child(4){--voice:#36799e}
#hardwareDesk .touch-card:has(.touch-card-heading button[aria-pressed=true]){border-color:var(--voice);box-shadow:inset 0 0 0 1px var(--voice)}
#hardwareDesk .touch-card-heading{grid-row:1;grid-column:1;padding:0;margin:0;background:none;min-height:0}
#hardwareDesk .touch-card-heading button{font:10px ui-monospace,monospace;font-weight:700;min-height:23px;width:100%;color:var(--voice);background:none!important;border:0;box-shadow:none;padding:0}
#hardwareDesk .touch-card-heading button[aria-pressed=true]{text-decoration:underline;text-underline-offset:4px}
#hardwareDesk .touch-card-heading span{display:none}
#hardwareDesk .touch-surface,#hardwareDesk .touch-pads:not([data-count="1"]) .touch-surface{grid-column:1/-1;grid-row:2;height:100%;min-height:55px;border:1px solid #45615a;border-radius:4px;background:linear-gradient(#173236,#102124);box-shadow:inset 0 0 18px #0005}
#hardwareDesk .touch-columns>span{border-color:color-mix(in srgb,var(--voice) 45%,transparent)}
#hardwareDesk .touch-columns .chord-tone{background:linear-gradient(color-mix(in srgb,var(--voice) 36%,transparent),color-mix(in srgb,var(--voice) 12%,transparent))}
#hardwareDesk .touch-columns small{font-size:8px;color:#bacfc5;bottom:4px}
#hardwareDesk .touch-columns .chord-tone small{color:#f0f2ce}
#hardwareDesk .touch-free-strip b{font-size:6px;padding:1px 3px}
#hardwareDesk .touch-finger{width:22px;height:22px;border-color:#fff3ce;box-shadow:0 0 12px var(--voice)}
#hardwareDesk .hw-pad-controls{display:contents}
#hardwareDesk .hw-pad-controls label{grid-column:2;grid-row:1;display:block;font-size:0}

#hardwareDesk .hw-pad-controls>div{grid-row:3;grid-column:1;display:flex;gap:2px}
#hardwareDesk .hw-pad-controls>div>button{flex:1;font-size:8px;min-height:24px;padding:1px}
#hardwareDesk .hw-synth-volume{grid-row:3;grid-column:2;display:flex;align-items:center;gap:3px;margin:0}
#hardwareDesk .hw-synth-volume>span{font-size:7px}
#hardwareDesk .hw-synth-volume output{font:8px ui-monospace,monospace;min-width:16px}
#hardwareDesk #touchInstrument>.touch-controls,#hardwareDesk #touchInstrument>.touch-switches,#hardwareDesk #touchInstrument>.touch-details{display:none}
#hardwareDesk #hwSynthEditor{grid-column:1/-1;grid-row:4;display:grid;grid-template-columns:1.2fr .55fr 1fr .9fr 1.2fr .85fr .8fr 1.15fr .65fr .65fr 1fr;grid-template-rows:23px 42px 38px;gap:3px 5px;padding-top:2px;border-top:1px solid var(--line-strong)}
#hardwareDesk #hwSynthTools{grid-column:1/-1}
#hardwareDesk .touch-pad-tools{display:flex;flex-wrap:nowrap;gap:4px;margin:0;height:100%;align-items:center}
#hardwareDesk .touch-pad-tools span{color:var(--text);font-size:10px;font-weight:700;margin-right:auto}
#hardwareDesk .touch-pad-tools button{font-size:8px;min-height:21px;padding:2px 6px}
#hardwareDesk #touchAdd{display:none}
#hardwareDesk .hw-editor-panel{display:contents}
#hardwareDesk .hw-editor-panel>label{display:flex;flex-direction:column;gap:1px;font-size:8px}
#hardwareDesk #hwEditStrips{grid-column:1/-1;grid-row:3;display:flex;align-items:center;gap:4px;border-top:1px solid var(--line);padding-top:2px}
#hardwareDesk #hwEditStrips>button{font-size:8px;padding:2px 5px;min-height:26px}
#hardwareDesk .touch-strip-heading{display:flex;gap:2px;flex-wrap:nowrap;margin:0}
#hardwareDesk .touch-strip-heading p{display:none}
#hardwareDesk .touch-strip-heading button{font-size:8px;min-height:26px;padding:2px 5px}
#hardwareDesk #touchStripEditor{flex:1;display:flex;gap:7px}
#hardwareDesk .touch-strip-row{display:grid;grid-template-columns:1fr 1fr;gap:1px 3px;flex:1;padding:0;border:0;margin:0}
#hardwareDesk .touch-strip-row>span{grid-column:1/-1;font:7px ui-monospace,monospace}
#hardwareDesk .touch-strip-row label{display:flex;align-items:center;font-size:7px;gap:2px}
#hardwareDesk .touch-strip-row input{height:19px;min-height:19px;min-width:20px}
/* Beats and keys share the lower performance row. */
#hwBottom{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);gap:6px}
#hardwareDesk #hwKeyboard,#hardwareDesk #hwBeat{border:1px solid var(--line-strong);border-radius:6px;background:var(--panel);padding:6px}
#hardwareDesk #hwKeyboard{display:grid;grid-template-columns:1fr;grid-template-rows:13px 29px minmax(66px,1fr) 27px;gap:4px}
#hardwareDesk .hw-section-title{font:10px ui-monospace,monospace;letter-spacing:1px;font-weight:700}
#hwKeySound{display:grid;grid-template-columns:1.2fr 68px 1fr;gap:8px}
#hwKeySound>label:has(#sound){grid-column:1;grid-row:1}
#hwKeyOctave{grid-column:2;grid-row:1}
#hwKeySound>label:has(#synthLevel){grid-column:3;grid-row:1}
#hwKeySound label{display:flex;align-items:center;gap:4px;white-space:nowrap}
#hardwareDesk #instrument{height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(38px,1fr) 26px;gap:3px;padding:0}
#hardwareDesk #instrument>label{display:none}
#hardwareDesk #keybed{grid-column:1/-1;display:flex;gap:3px;min-width:0;height:100%}
#hardwareDesk #keybed button{flex:1;height:100%;min-height:0;border-radius:3px 3px 5px 5px;background:linear-gradient(90deg,#e3e2d8,#fffdf2 15%,#f7f5e8 85%,#e3e0d3);box-shadow:inset 0 -3px #c5c4b7;color:#24332c;font-size:10px;padding:3px 0}
#hardwareDesk #keybed button.active{background:var(--accent);color:white}
#hardwareDesk #keybed kbd{display:block;margin:2px 0 0;font-size:7px}
#hardwareDesk #drumpads{display:flex;gap:3px;min-width:0}
#hardwareDesk #drumpads button{flex:1;min-height:26px;height:26px;padding:2px;font-size:8px}
#hardwareDesk #drumpads kbd{display:none}
#hardwareDesk #octaveReadout,#hardwareDesk #octaveUp,#hardwareDesk #octaveDown{display:none}
#hardwareDesk #hwKeyboardTargets{display:flex;align-items:center}
#hardwareDesk #hwKeyboardTargets label{display:flex;align-items:center;gap:8px;width:100%;white-space:nowrap;font-size:9px}
#hardwareDesk #beatDeck{position:relative;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;display:grid;grid-template-rows:18px minmax(0,1fr);gap:3px}
#hardwareDesk .beat-deck-heading{margin:0;min-height:0;align-items:center}
#hardwareDesk .beat-deck-heading>div{display:flex;align-items:center;gap:10px}
#hardwareDesk .beat-deck-heading h2{font-size:15px;letter-spacing:-.3px}
#hardwareDesk .beat-deck-heading .eyebrow{font-size:7px;letter-spacing:.5px}
#hardwareDesk #beatQueue{font-size:8px}
#hardwareDesk .beat-deck-body{height:100%;align-items:stretch;grid-template-columns:minmax(180px,.85fr) minmax(250px,1.65fr) minmax(150px,.65fr);gap:10px}
#hardwareDesk .beat-library{display:grid;grid-template-rows:39px 24px minmax(27px,1fr) 28px;gap:4px}
#hardwareDesk .beat-groove-label{display:flex;flex-direction:column;gap:3px;font-size:9px}
#hardwareDesk #beatDescription{margin:0;min-height:0;font-size:8px;line-height:1.25}
#hardwareDesk .beat-preview{height:100%;margin:0;grid-template-columns:26px repeat(16,minmax(0,1fr));gap:2px}
#hardwareDesk .beat-preview span{font-size:7px}
#hardwareDesk .beat-performance{display:grid;grid-template-rows:minmax(94px,1fr) 11px 28px;gap:3px}
#hardwareDesk .beat-xy{height:100%;min-height:94px;border-color:#506660;border-width:1px;background-color:#10262b}
#hardwareDesk .beat-corner{font-size:9px;padding:8px}
#hardwareDesk .beat-neutral{font-size:7px}
#hardwareDesk .beat-axes{font-size:8px;padding:0}
#hardwareDesk .beat-pad-actions{margin:0;gap:4px;flex-wrap:nowrap}
#hardwareDesk .beat-pad-actions button{font-size:10px;padding:3px 10px}
#hardwareDesk #beatPadState{font-size:8px;line-height:1.3}
#hardwareDesk .beat-mix{display:grid;grid-template-rows:65px 40px minmax(20px,1fr);gap:5px;grid-column:auto;padding:0}
#hardwareDesk .beat-sound{display:grid;grid-template-columns:1fr;grid-template-rows:30px 30px;gap:4px}
#hardwareDesk .beat-sound label{display:flex;align-items:center;font-size:9px;gap:5px;white-space:nowrap}
#hardwareDesk .beat-sound input{height:26px}
#hardwareDesk .beat-deck-footer{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0}
#hardwareDesk .beat-deck-footer button{font-size:10px;min-height:28px;padding:3px}
#hardwareDesk #beatDeckRun{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
#hardwareDesk .beat-swing-label{display:grid;grid-template-columns:1fr auto;grid-template-rows:12px 26px;font-size:9px}
#hardwareDesk .beat-swing-label input{grid-column:1/-1;height:26px}
#hardwareDesk #beatSwingValue{color:var(--text);font:10px ui-monospace,monospace}
#hardwareDesk .beat-axis-controls{display:none}
#hardwareDesk #beatPadHelp{font-size:8px;margin:0;line-height:1.3}
/* The entire setup strip remains open, beneath the playing surfaces. */
#hardwareDesk #hwConnections{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);gap:10px;border:1px solid var(--line-strong);border-radius:6px;padding:5px 8px;background:var(--panel)}
#hardwareDesk #hwConnections>div+div{border-left:1px solid var(--line);padding-left:10px}
#hardwareDesk #hwSystem .settings-grid{display:none}
#hardwareDesk .timing-settings{margin:0;padding:0;border:0}
#hardwareDesk .timing-settings h3{font-size:10px;margin-bottom:4px}
#hardwareDesk .timing-fields{display:grid;grid-template-columns:60px .9fr 1.1fr;gap:6px;margin:0}
#hardwareDesk .timing-fields label{display:flex;flex-direction:column;font-size:8px;gap:2px}
#hardwareDesk .timing-fields label:last-child{grid-column:auto}
#hardwareDesk #clockStatus{font-size:8px;margin:4px 0 0;line-height:1.2}
#hardwareDesk #hwConnections .settings-note{display:none}
#hardwareDesk #inputRoutesContent{display:grid;grid-template-rows:13px 1fr;gap:4px}
#hardwareDesk #inputRoutesContent>p:first-child{font-size:0;margin:0}
#hardwareDesk #inputRoutesContent>p:first-child:before{content:'INPUT EFFECTS ROUTES';font:10px ui-monospace,monospace}
#hardwareDesk .routing-fields{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px}
#hardwareDesk .routing-fields label{display:flex;align-items:center;gap:5px;font-size:8px;white-space:nowrap}
#hardwareDesk #inputRoutingHint{display:none}
#hardwareDesk #inputSettingsContent{display:grid;grid-template-columns:minmax(0,1fr) 130px;grid-template-rows:22px 35px 10px;gap:3px 8px}
#hardwareDesk #inputStatus{font-size:9px;margin:0;align-self:center}
#hardwareDesk #connectInput{grid-column:2;grid-row:1;font-size:9px;min-height:24px;padding:2px}
#hardwareDesk .input-fields{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:1fr 1.1fr;gap:8px;margin:0}
#hardwareDesk .input-fields label{font-size:8px;display:flex;flex-direction:column;gap:2px}
#hardwareDesk #inputChannelHint{grid-column:1/-1;font-size:8px;margin:0}
#hardwareDesk #inputSettingsContent>p:last-child{display:none}
#hardwareDesk #hwFooter .master-strip{position:static;height:100%;min-height:0;margin:0;padding:0;gap:8px;border:0;background:none;backdrop-filter:none;flex-wrap:nowrap}
#hardwareDesk .master-strip button{font-size:10px;min-height:27px}
#hardwareDesk .master-strip p{font-size:9px;order:0;flex:1;line-height:1.3;max-height:26px;overflow:hidden}
#hardwareDesk .master-label{margin:0;gap:7px;font-size:9px;white-space:nowrap}
#hardwareDesk .master-label input{width:90px}
#hardwareDesk #silence{color:var(--red)}
#hardwareDesk #tape.recording{background:var(--red);color:white}
#hardwareDesk #tapeTime{font-size:10px}
/* One value per setting. Choice palettes keep their touch size as the console fits. */
:root[data-view=hardware] select[data-touch-native]{display:none!important}
:root[data-view=hardware] .touch-choice{display:block;min-width:0;width:100%;position:relative}
.touch-choice-options{display:flex;gap:3px}
#hardwareDesk .touch-choice button{white-space:nowrap;font-size:9px;min-height:24px;min-width:0;line-height:1.15;padding:2px 4px;overflow:hidden;text-overflow:ellipsis}
.touch-choice-options>button{flex:1}
#hardwareDesk .touch-choice-value{width:100%;text-align:left;background:var(--field);border-color:var(--line-strong);font-weight:600;padding:3px 18px 3px 7px;font-size:10px;cursor:ew-resize;touch-action:pan-y;position:relative;user-select:none}
#hardwareDesk .touch-choice-value:after{content:'⌄';position:absolute;right:6px;top:50%;transform:translateY(-50%);color:var(--accent)}
.touch-choice-browser{position:fixed;z-index:30;margin:0;padding:10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--raised);box-shadow:0 8px 32px #0004;overflow:auto;overscroll-behavior:contain;color:var(--text)}
.touch-choice-browser .touch-choice-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.touch-choice-browser[data-count="2"] .touch-choice-options{grid-template-columns:1fr 1fr}
.touch-choice-browser input[type=search]{width:100%;margin-bottom:8px}
#hardwareDesk .touch-choice-browser button{min-height:40px;font-size:12px;white-space:normal;background:var(--panel);font-weight:500;padding:6px}
#hardwareDesk .touch-choice-browser button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}
#hardwareDesk :focus-visible{outline-offset:1px}
:root[data-view=hardware] dialog{background:var(--panel);color:var(--text);max-height:90dvh}
:root[data-view=hardware] dialog input,:root[data-view=hardware] dialog select{background:var(--raised);color:var(--text)}
:root[data-view=hardware] dialog .touch-choice button{min-height:40px;white-space:normal}
:root[data-view=hardware] #setup .view-options{grid-template-columns:1fr}
:root[data-view=hardware] #boot{background:#e1e3d9ed}
:root[data-view=hardware] .boot-card{background:var(--panel);box-shadow:0 20px 80px #272f342f}
:root[data-view=hardware] #learnBanner:not([hidden]){display:flex!important;position:fixed;top:10px;left:20%;right:20%;z-index:40;min-height:52px;background:var(--raised);border-color:var(--accent);box-shadow:0 6px 30px #0004}
/* Extra loops stay on screen by using two balanced rows, not a carousel. */
#hardwareDesk:has(.track:nth-child(6):not([hidden])){grid-template-rows:42px minmax(336px,1fr) minmax(384px,1.4fr) minmax(190px,.8fr) 88px 28px}
#hardwareDesk #tracks.expanded{grid-template-columns:repeat(5,minmax(0,1fr))}
#hardwareDesk #tracks.expanded .track{grid-template-columns:65px minmax(0,1fr);grid-template-rows:22px 60px 48px;gap:1px 5px}
#hardwareDesk #tracks.expanded .track-head{grid-column:1/-1;grid-row:1}
#hardwareDesk #tracks.expanded .track-body{grid-row:2}
#hardwareDesk #tracks.expanded .loop-display{height:52px;width:52px}
#hardwareDesk #tracks.expanded .loop-state strong{font-size:8px}
#hardwareDesk #tracks.expanded .loop-state>span{font-size:5px}
#hardwareDesk #tracks.expanded .track-controls{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:2px}
#hardwareDesk #tracks.expanded .track-playback,#hardwareDesk #tracks.expanded .track-routing{grid-column:1/-1}
#hardwareDesk #tracks.expanded .track-volume{grid-column:1/-1;grid-row:2}
#hardwareDesk #tracks.expanded .track-row>button{min-height:18px;font-size:9px}
#hardwareDesk #tracks.expanded .track-routing .touch-choice-value{height:18px;min-height:18px;font-size:9px}
#hardwareDesk #tracks.expanded .hardware-chops{grid-row:3;grid-column:1/-1;height:48px}
#hardwareDesk #tracks.expanded .hw-slice{grid-template-rows:10px 22px}
#hardwareDesk #tracks.expanded .hw-slice-enable{min-height:10px}
#hardwareDesk #tracks.expanded .hw-slice-hold{min-height:22px}

/* Each pad owns its sound controls; only truly shared settings span the bank. */
#hardwareDesk #touchInstrument{grid-template-rows:30px 30px minmax(222px,1fr) 70px}
#hardwareDesk .touch-card{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:23px minmax(58px,1fr) 24px 29px 29px 29px}
#hardwareDesk .touch-card-heading{grid-column:1/3}
#hardwareDesk .hw-pad-controls label{grid-column:auto;grid-row:auto;display:flex;flex-direction:column;font-size:8px;gap:1px;line-height:1}
#hardwareDesk .hw-pad-controls label .touch-choice-value{min-height:21px;height:21px;font-size:9px;padding-left:4px}
#hardwareDesk .hw-pad-controls .hw-pad-voice{grid-column:3/7;grid-row:1;font-size:0}
#hardwareDesk .hw-pad-controls .hw-pad-voice .touch-choice-value{height:23px}
#hardwareDesk .hw-pad-controls .hw-pad-y{grid-column:1/3;grid-row:4}
#hardwareDesk .hw-pad-controls .hw-pad-oct{grid-column:3/5;grid-row:4}
#hardwareDesk .hw-pad-controls .hw-pad-quantize{grid-column:5/7;grid-row:4}
#hardwareDesk .hw-pad-controls .hw-pad-gate{grid-column:1/3;grid-row:5}
#hardwareDesk .hw-pad-controls .hw-pad-arp{grid-column:3/5;grid-row:5}
#hardwareDesk .hw-pad-controls .hw-pad-insert{grid-column:5/7;grid-row:5}
#hardwareDesk .hw-pad-controls .hw-pad-echo{grid-column:1/3;grid-row:6}
#hardwareDesk .hw-pad-controls .hw-pad-verb{grid-column:3/5;grid-row:6}
#hardwareDesk .hw-pad-controls .hw-pad-switches{grid-row:3;grid-column:1/3}
#hardwareDesk .hw-pad-controls .hw-pad-tools{grid-row:6;grid-column:5/7;align-self:end;display:flex;gap:2px}
#hardwareDesk .hw-pad-controls .hw-pad-tools button{min-height:21px;height:21px;padding:1px;flex:1;font-size:14px}
#hardwareDesk .hw-pad-tools svg{width:13px;height:13px}
#hardwareDesk .hw-synth-volume{grid-column:3/7;grid-row:3}
#hardwareDesk #touchInstrument>.touch-pad-tools{display:none}
#hardwareDesk #hwSynthShared{display:grid;grid-column:1/-1;grid-row:4;grid-template-rows:30px 36px;gap:3px}
#hardwareDesk #hwSharedSound{display:grid;grid-template-columns:1fr 1.15fr 1fr 1fr;gap:12px;border-top:1px solid var(--line);padding-top:3px}
#hardwareDesk #hwSharedSound>label{display:flex;align-items:center;gap:5px;font-size:8px;white-space:nowrap}
#hardwareDesk #hwSharedSound input{width:100%}
#hardwareDesk #hwEditStrips{grid-row:2}
#hardwareDesk #hwKeyboardControls{display:grid;grid-template-columns:minmax(0,1fr) 125px;gap:8px;align-items:center}
#hardwareDesk #liveTiming{display:flex;gap:4px;align-items:center;white-space:nowrap;font-size:8px}
#hardwareDesk .beat-groove-heading{display:grid;grid-template-columns:minmax(0,1fr) 26px 26px;align-items:end;gap:3px}
#hardwareDesk .beat-groove-heading>button{min-height:24px;height:24px;padding:2px}
#hardwareDesk .beat-deck-body{grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) minmax(180px,.65fr)}
#hardwareDesk .beat-preview .beat-cell{padding:0;min-height:0;height:100%;border:0;border-radius:1px;box-shadow:none}
#hardwareDesk .beat-editing .beat-preview .beat-cell{outline:1px solid var(--line);cursor:crosshair}
#hardwareDesk .fx-bottom button:first-child{grid-column:1/3}
#hardwareDesk .fx-bottom button:nth-child(2){grid-column:3}

/* ── Legibility and state (2026-09 review) ─────────────────────────────────
   The desk is laid out at 1440×980 and zoomed to fit, so a laptop shows it at
   about 92%. Nothing here goes below 8.5px before that zoom. Every control
   keeps its place; only type, spacing and state colour change. */
#hardwareDesk label{font-size:10px}
#hardwareDesk kbd{font-size:9px}
#hardwareDesk .brand .eyebrow{font-size:9px;letter-spacing:1.5px}
#hardwareDesk .section-label{font-size:10px}
#hardwareDesk .signal-readout,#hardwareDesk #signalStatus{font-size:10px}
#hardwareDesk #tempo{min-width:0;gap:5px;padding:3px 9px}
#hardwareDesk #tempoMode{display:block;font:700 8.5px ui-monospace,monospace;letter-spacing:.8px;color:#a9e9bb;padding:1px 4px;border:1px solid #a9e9bb66;border-radius:3px}
#hardwareDesk #tempo[data-tempo-editable=false] #tempoMode{color:#ffd28a;border-color:#ffd28a66}
/* The header Record button shows what the selected track is doing. */
#hardwareDesk #touchRecord{font-size:11px;min-width:104px}
#hardwareDesk #touchRecord[data-mode=recording],#hardwareDesk #touchRecord[data-mode=replacing]{background:var(--red);border-color:var(--red);color:#fff}
#hardwareDesk #touchRecord[data-mode=overdub]{background:var(--overdub);border-color:var(--overdub);color:#fff}
#hardwareDesk #touchRecord[data-mode=armed]{background:var(--queued);border-color:var(--queued);color:#fff}
/* Loops: guidance next to the heading, a readable selected-track row. */
#hardwareDesk .loops-heading p#jamPrompt{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1;margin:0;font-size:10px;line-height:1.2;color:var(--muted)}
#hardwareDesk #loopCount{font-size:10px}
#hardwareDesk #trackSettingsContent h3{font-size:10px;width:auto;white-space:nowrap}
#hardwareDesk #trackSettingsContent label{font-size:10px}
#hardwareDesk #trackSettingsContent .fields{grid-template-columns:minmax(120px,.8fr) minmax(130px,1fr)}
#hardwareDesk #replaceSelected{font-size:10px}
#hardwareDesk .loop-state strong{font-size:12.5px}
#hardwareDesk .loop-state>span{font:600 8.5px/1.15 system-ui,sans-serif;letter-spacing:0;text-transform:none;max-width:62px;white-space:normal}
#hardwareDesk .track-volume output{font-size:10px}
/* Recording, overdubbing and queued passes tint the whole channel. */
#hardwareDesk .track[data-mode=recording],#hardwareDesk .track[data-mode=replacing]{background:color-mix(in srgb,var(--red) 9%,var(--panel));border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
#hardwareDesk .track[data-mode=overdub]{background:color-mix(in srgb,var(--overdub) 11%,var(--panel));border-color:var(--overdub);box-shadow:inset 0 0 0 1px var(--overdub)}
#hardwareDesk .track[data-mode=armed]{background:color-mix(in srgb,var(--queued) 11%,var(--panel));border-color:var(--queued);box-shadow:inset 0 0 0 1px var(--queued)}
/* Slices: one readable caption; an OUT slice says so, not just by colour. */
#hardwareDesk .hardware-chops{grid-template-rows:12px 1fr}
#hardwareDesk .hw-chop-label{display:flex;justify-content:space-between;gap:6px;font:9px ui-monospace,monospace;white-space:nowrap;overflow:hidden}
#hardwareDesk .hw-chop-label span:first-child{font-weight:700;color:var(--text)}
#hardwareDesk .hw-slice-enable[aria-pressed=false]{font:700 8.5px ui-monospace,monospace;color:var(--muted)}
#hardwareDesk .hw-slice-mode>button,#hardwareDesk .hw-slice-mode .touch-choice-value{font-size:9.5px}
/* Effects: the amount fader gets its own labelled row instead of covering the pad. */
#hardwareDesk .fx-deck,#hardwareDesk .fx-bank.chained .fx-deck{grid-template-rows:22px minmax(40px,1fr) 12px 18px 23px}
#hardwareDesk .fx-bottom label,#hardwareDesk .fx-bank.chained .fx-bottom label{position:static;grid-row:4;grid-column:1/-1;width:auto;display:flex;align-items:center;gap:6px;font-size:9.5px;pointer-events:auto;color:var(--muted)}
#hardwareDesk .fx-bottom input,#hardwareDesk .fx-bank.chained .fx-bottom input{writing-mode:horizontal-tb;direction:ltr;width:100%;height:18px;min-height:18px;flex:1}
#hardwareDesk .fx-bottom button,#hardwareDesk .fx-bank.chained .fx-bottom button{grid-row:5;font-size:10px}
#hardwareDesk .pad-axes,#hardwareDesk .fx-bank.chained .pad-axes{font-size:8.5px;line-height:12px}
#hardwareDesk .deck-heading{top:3px;left:18px;right:5px}
#hardwareDesk .fx-title,#hardwareDesk .pad-state{font-size:8.5px;padding:0 3px;border-radius:2px;background:#10262bcc}
#hardwareDesk .xy .pad-note{font-size:9px}
#hardwareDesk .add-pad{font-size:10px}
/* TouchSynth. */
#hardwareDesk .touch-heading{grid-template-columns:1fr 92px}
#hardwareDesk .touch-heading>span{font-size:9px}
#hardwareDesk .touch-heading button{font-size:9.5px}
#hardwareDesk .touch-toolbar label,#hardwareDesk .touch-harmony label,#hardwareDesk .touch-preset-note label{font-size:10px}
#hardwareDesk .touch-harmony>button{font-size:10px}
#hardwareDesk .touch-card{grid-template-rows:23px minmax(52px,1fr) 24px 31px 31px 31px}
#hardwareDesk .hw-pad-controls label{font-size:9.5px;gap:2px}
#hardwareDesk .hw-pad-controls label .touch-choice-value{font-size:10.5px}
#hardwareDesk .hw-pad-controls>div>button,#hardwareDesk .hw-pad-switches>button{font-size:10px}
#hardwareDesk .hw-pad-controls .hw-pad-tools button{font-size:9px;padding:1px 2px}
#hardwareDesk .hw-synth-volume>span{font-size:9px}
#hardwareDesk .hw-synth-volume output{font-size:9.5px}
#hardwareDesk .touch-columns small{font-size:9px}
#hardwareDesk .touch-free-strip b{font-size:8px}
#hardwareDesk #hwSharedSound>label{font-size:10px}
#hardwareDesk #hwEditStrips>button,#hardwareDesk .touch-strip-heading button{font-size:10px}
#hardwareDesk .touch-strip-row>span,#hardwareDesk .touch-strip-row label{font-size:9px}
/* Beat lab. */
#hardwareDesk .beat-deck-heading .eyebrow{font-size:9px}
#hardwareDesk #beatQueue{font-size:10px}
#hardwareDesk .beat-groove-label,#hardwareDesk .beat-sound label,#hardwareDesk .beat-swing-label{font-size:10px}
#hardwareDesk #beatDescription{font-size:9.5px}
#hardwareDesk .beat-preview{grid-template-columns:34px repeat(16,minmax(0,1fr))}
#hardwareDesk .beat-preview span{font-size:9px}
#hardwareDesk .beat-neutral,#hardwareDesk .beat-axes{font-size:9px}
#hardwareDesk #beatPadState{font-size:10px}
#hardwareDesk #beatPadHelp{font-size:9px}
#hardwareDesk .beat-deck-footer{grid-template-columns:1.25fr 1fr 1fr}
#hardwareDesk .beat-deck-footer button{font-size:10px;padding:3px 4px}
/* Keys and drum hits. */
#hardwareDesk #keybed kbd{font-size:9px}
#hardwareDesk #drumpads button{font-size:10px}
#hardwareDesk #liveTiming,#hardwareDesk #hwKeyboardTargets label{font-size:10px}
/* Setup strip and footer. */
#hardwareDesk .timing-settings h3{font-size:11px}
#hardwareDesk .timing-fields label,#hardwareDesk .routing-fields label,#hardwareDesk .input-fields label{font-size:10px}
#hardwareDesk #clockStatus,#hardwareDesk #inputChannelHint{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hardwareDesk #inputStatus,#hardwareDesk #connectInput{font-size:10px}
#hardwareDesk .master-strip p{font-size:10.5px}
#hardwareDesk .master-label{font-size:10px}
/* Where a click on the tempo (or a route button) took you. */
.desk-flash{animation:desk-flash 1.3s ease-out}
@keyframes desk-flash{0%,35%{box-shadow:0 0 0 2px var(--accent),0 0 16px color-mix(in srgb,var(--accent) 45%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
/* Chooser rows explain what a pattern or effect does. */
.touch-choice-browser button.described{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;gap:2px}
.touch-choice-browser button.described small{font-size:10.5px;font-weight:400;line-height:1.25;opacity:.72;white-space:normal}
/* Colour choices preview the palettes this view actually uses. */
:root[data-view=hardware] .theme-swatch{--input:#b75931;--output:#287890}
:root[data-view=hardware] .theme-swatch[data-theme=studio]{--bg:#e8e6de;--accent:#be5429}
:root[data-view=hardware] .theme-swatch[data-theme=cobalt]{--bg:#e6ebee;--accent:#3168a4}
:root[data-view=hardware] .theme-swatch[data-theme=violet]{--bg:#eee8f0;--accent:#82568e}
:root[data-view=hardware] .theme-swatch[data-theme=daylight]{--bg:#f7f7f1;--accent:#b43d37}
:root[data-view=hardware] .theme-swatch[data-theme=mint]{--bg:#e9eee4;--accent:#377967}
/* The Options dialog keeps Done reachable on short screens. */
:root[data-view=hardware] #setup{overflow:auto}
/* The last two columns hold Quantize, Insert effect and the Reset / Roll / Undo tools. */
#hardwareDesk .touch-card{grid-template-columns:repeat(4,minmax(0,1fr)) repeat(2,minmax(0,1.25fr))}
#hardwareDesk .touch-free-strip b{font-size:8.5px}
#hardwareDesk #tempoMode,#hardwareDesk .fx-title,#hardwareDesk .pad-state,#hardwareDesk .pad-axes,#hardwareDesk .fx-bank.chained .pad-axes{font-size:9px}
#hardwareDesk .loop-state>span{font-size:9px}