/* Perform: four voices, three sections, one deliberate downbeat. */
#performDesk,.perform-pad-actions{display:none}
.pf-lanes{display:none}
:root[data-view=perform]{scroll-padding:70px 0 90px}
:root[data-view=perform][data-theme=studio]{--bg:#101211;--surface:#181c19;--panel:#202521;--raised:#292f29;--field:#121613;--hover:#353e32;--text:#f0f0e6;--muted:#a8b1a4;--line:#394237;--line-strong:#64725c;--accent:#d7f878;--accent-ink:#1a2310;--input:#d7f878;--output:#aba8e8;--record-face:#d7f878;--record-ink:#192411;color-scheme:dark}
:root[data-view=perform] main{max-width:1640px;padding:0 24px 18px}
:root[data-view=perform] main>:not(#performDesk):not(#learnBanner){display:none!important}
:root[data-view=perform] #performDesk{display:block;--pf-lane:#d7f878}
:root[data-view=perform] [data-original-view]{display:none!important}
:root[data-view=perform] #learnBanner:not([hidden]){display:flex!important;position:fixed;inset:8px 15% auto;z-index:45;background:var(--raised);box-shadow:0 6px 30px #0006}
#performDesk button{border-radius:6px;min-height:36px;padding:7px 11px;font-size:11px;letter-spacing:.1px}
#performDesk label{color:var(--muted);font-size:10px;letter-spacing:.35px}
#performDesk .eyebrow{font-size:9px;letter-spacing:1.7px}
#performDesk .toolbar{position:static;min-height:62px;margin:0;gap:22px;background:transparent;backdrop-filter:none;border-bottom:1px solid var(--line)}
#performDesk .brand b{font-size:19px;letter-spacing:-.8px}
#performDesk .brand .eyebrow{display:none}
#performDesk .toolbar nav{gap:5px}
#performDesk .toolbar nav button{background:transparent;border-color:transparent;color:var(--muted)}
#performDesk .transport{margin-right:auto;gap:12px}
#performDesk #run{background:transparent;border-color:var(--line)}
#performDesk #tempo{background:transparent;border:0;padding:4px 8px;min-width:145px}
#performDesk #tempo strong{font-size:23px;font-weight:500}
#performDesk #tempoMode{font-size:8px}
#performDesk #beats{gap:4px}
#performDesk #beats i{width:5px;height:5px}
.pf-start{display:grid;grid-template-columns:225px minmax(0,1fr) auto;gap:24px;align-items:center;padding:20px 0 8px}
.pf-title h1{font-size:32px;font-weight:580;letter-spacing:-1.8px;line-height:1.1;margin:7px 0 0;white-space:nowrap}
.pf-title h1 span{color:var(--accent);display:inline-block;margin-left:10px}
#performDesk .touch-toolbar{display:grid;grid-template-columns:minmax(160px,2fr) 70px 115px;gap:10px}
#performDesk .touch-toolbar label{font-size:10px;gap:5px}
#performDesk .touch-toolbar label:last-child{display:none}
#performDesk .touch-preset .touch-choice-value{font-size:14px;color:var(--text);font-weight:650}
.pf-inspiration{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-width:240px}
#performDesk #pfGenerate{grid-column:1/-1;background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700;font-size:12px}
#performDesk #pfUndo,#performDesk #pfSceneBeat{font-size:10px;min-height:28px;padding:4px 9px;background:transparent}
#performDesk .touch-preset-note{margin:2px 0 14px;display:block;font-size:11px;line-height:1.6;max-width:100%;color:var(--muted)}
#performDesk .touch-preset-note label{display:none}
.pf-song{display:grid;grid-template-columns:225px minmax(0,1fr) 185px;gap:24px;align-items:center;padding:15px 0;border-block:1px solid var(--line)}
.pf-section-timing{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
#performDesk .pf-section-timing label{display:flex;align-items:center;gap:6px;white-space:nowrap}
#performDesk #pfBoundary{min-height:28px;font-size:10px;padding:4px;background:transparent}
#performDesk #pfFollow{min-height:26px;font-size:10px;padding:3px 7px}
.pf-sections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#performDesk .pf-section{position:relative;display:flex;align-items:flex-start;flex-direction:column;gap:5px;text-align:left;white-space:normal;min-height:78px;border-color:var(--line);background:var(--surface);padding:10px 12px}
.pf-section>span{font:9px ui-monospace,monospace;letter-spacing:1.2px;color:var(--muted)}
.pf-section strong{text-transform:capitalize;font-weight:580;font-size:14px;line-height:1.15}
.pf-section small{font:10px ui-monospace,monospace;color:var(--muted);line-height:1.3;overflow-wrap:anywhere}
#performDesk .pf-section[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--text)}
.pf-section[aria-pressed=true]:before{content:'';position:absolute;right:9px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
#performDesk .queued{border-color:var(--queued)!important;box-shadow:inset 0 -3px var(--queued)}
.pf-section-tools{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
#performDesk .pf-section-tools button{background:transparent;min-height:28px;font-size:10px;padding:4px 7px}
#pfQueue{font-size:10px;color:var(--muted);line-height:1.45;max-width:180px;min-height:28px}
#performDesk .touch-harmony{margin:0;min-height:52px;gap:12px;padding:9px 0}
#performDesk .touch-harmony label{font-size:10px;gap:6px;flex:0 0 225px;width:auto}
#performDesk .touch-harmony label .touch-choice{flex:1}
#performDesk .touch-harmony>#touchAuto,#performDesk .touch-harmony>#touchNext,#performDesk .touch-harmony>#touchRestart,#performDesk .touch-harmony>#touchSync{display:none}
#performDesk[data-deep=true] .touch-harmony>:is(#touchAuto,#touchNext,#touchRestart,#touchSync){display:inline-flex}
#performDesk #touchChords{gap:4px}
#performDesk #touchChords button{min-height:25px;font-size:11px;padding:3px 5px;border-radius:3px;background:var(--panel);border:0}
#performDesk #touchChords button[aria-pressed=true]{color:var(--accent-ink);background:var(--accent)}
.pf-bank-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 10px}
.pf-bank-title>div{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pf-key-hint{font:10px ui-monospace,monospace;color:var(--muted);margin-left:14px}
.pf-key-hint b{color:var(--text);font-weight:500}
#performDesk .pf-bank-title button{min-height:28px;background:transparent;font-size:10px;padding:5px 8px}
#performDesk #pfLayers{color:var(--accent);border-color:var(--line-strong)}
#performDesk #touchInstrument{margin:0;padding:0;border:0;border-radius:0;background:transparent;scroll-margin:80px}
#performDesk .touch-heading,#performDesk .touch-pad-tools,#performDesk #touchInstrument>.touch-controls,#performDesk .touch-switches,#performDesk .touch-details{display:none}
#performDesk .touch-pads[data-count]{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#performDesk .touch-card{--pf-lane:#d4ed91;--accent:var(--pf-lane);border:1px solid var(--line);border-top:2px solid var(--pf-lane);background:var(--surface);border-radius:8px;overflow:visible;position:relative}
#performDesk .touch-card:nth-child(2){--pf-lane:#87c7da}
#performDesk .touch-card:nth-child(3){--pf-lane:#baa4e2}
#performDesk .touch-card:nth-child(4){--pf-lane:#e2a08d}
#performDesk .touch-card:has(.touch-card-heading button[aria-pressed=true]){border-color:var(--line);border-top-color:var(--pf-lane)}
#performDesk .touch-card.pf-sounding{box-shadow:0 0 0 1px color-mix(in srgb,var(--pf-lane) 40%,transparent)}
#performDesk .touch-card-heading{background:transparent;min-height:27px;padding:0 8px}
#performDesk .touch-card-heading button{font:9px ui-monospace,monospace;letter-spacing:1.5px;min-height:26px;padding:4px 0;color:var(--pf-lane)}
#performDesk .touch-card-heading span{font-size:9px;color:var(--pf-lane)}
#performDesk .touch-pads .touch-surface{height:118px;border-block:1px solid var(--line);background:var(--field)}
#performDesk .touch-columns>span{border-color:color-mix(in srgb,var(--pf-lane) 12%,transparent)}
#performDesk .touch-columns .chord-tone{background:linear-gradient(0deg,color-mix(in srgb,var(--pf-lane) 21%,transparent),color-mix(in srgb,var(--pf-lane) 4%,transparent))}
#performDesk .touch-columns .chord-tone:before{top:10px;width:3px;height:3px}
#performDesk .touch-columns small{font-size:8px;bottom:7px}
#performDesk .touch-columns .sounding{background:linear-gradient(0deg,color-mix(in srgb,var(--pf-lane) 48%,transparent),color-mix(in srgb,var(--pf-lane) 12%,transparent))}
#performDesk .perform-pad-actions{display:flex;padding:7px 9px 0;gap:6px}
#performDesk .perform-pad-actions button{flex:1;font-size:10px;min-height:29px;background:transparent}
#performDesk .perform-pad-actions button[aria-pressed=true]{background:color-mix(in srgb,var(--pf-lane) 14%,var(--surface));border-color:var(--pf-lane);color:var(--pf-lane)}
#performDesk .hw-pad-controls{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:'voice voice' 'switch octave' 'gate arp';gap:7px 10px;padding:8px 10px}
#performDesk .hw-pad-controls label{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:9px}
#performDesk .hw-pad-voice{grid-area:voice}
#performDesk .hw-pad-oct{grid-area:octave}
#performDesk .hw-pad-gate{grid-area:gate}
#performDesk .hw-pad-arp{grid-area:arp}
#performDesk .hw-pad-switches{grid-area:switch;display:flex;align-items:end;gap:4px}
#performDesk .hw-pad-switches button{min-height:29px;flex:1;font-size:10px}
#performDesk .hw-pad-y,#performDesk .hw-pad-quantize,#performDesk .hw-pad-insert,#performDesk .hw-pad-echo,#performDesk .hw-pad-verb,#performDesk .hw-pad-tools,#performDesk .hw-pad-switches button:nth-child(2){display:none}
#performDesk .hw-synth-volume{display:flex;align-items:center;gap:10px;padding:0 10px 6px;font-size:9px}
#performDesk .hw-synth-volume input{min-width:0;flex:1;height:20px;min-height:20px;accent-color:var(--pf-lane)}
#performDesk .hw-synth-volume output{font:9px ui-monospace,monospace;width:20px;text-align:right}
#performDesk[data-deep=true] .hw-pad-controls{grid-template-areas:'voice voice' 'switch octave' 'gate arp';grid-auto-rows:auto}
#performDesk[data-deep=true] .hw-pad-y,#performDesk[data-deep=true] .hw-pad-quantize,#performDesk[data-deep=true] .hw-pad-insert,#performDesk[data-deep=true] .hw-pad-echo,#performDesk[data-deep=true] .hw-pad-verb{display:flex}
#performDesk[data-deep=true] .hw-pad-tools{display:flex;grid-column:1/-1;gap:5px}
#performDesk[data-deep=true] .hw-pad-tools button{flex:1;font-size:10px}
#performDesk[data-deep=true] .hw-pad-switches button:nth-child(2){display:block}
#performDesk[data-deep=true] .touch-details{display:block;padding:12px;margin-top:10px;background:var(--surface);border-radius:8px}
#performDesk[data-deep=true] .touch-details .touch-controls{grid-template-columns:repeat(5,minmax(0,1fr))}
.pf-performance{display:grid;grid-template-columns:minmax(330px,.9fr) minmax(430px,1.1fr);gap:20px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
#performDesk .fx-bank{padding:0;background:transparent;min-width:0;position:static;width:auto}
#performDesk .bank-heading{padding:0;margin:0 0 4px;gap:6px}
#performDesk .bank-heading h2{font-size:12px;font-weight:500;letter-spacing:0}
#performDesk .bank-dot{width:5px;height:5px}
#performDesk .bank-note{font-size:10px;margin:0 0 8px}
#performDesk .chain-route,#performDesk .add-pad,#performDesk .bank-routes,#performDesk .pad-help{display:none}
#performDesk #addInputPad:not([hidden]),#performDesk #addOutputPad:not([hidden]){display:block;font-size:10px;min-height:28px}
#performDesk[data-deep=true] #removeInputPad:not([hidden]),#performDesk[data-deep=true] #removeOutputPad:not([hidden]){display:block;font-size:10px;min-height:28px}
#performDesk .fx-stack{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#performDesk .fx-bank .fx-deck{border-radius:8px;padding:10px;background:var(--surface);border:1px solid var(--line)}
#performDesk .deck-heading{margin:0 0 5px;min-height:12px}
#performDesk .fx-title{font:9px ui-monospace,monospace;letter-spacing:1px}
#performDesk .pad-state{font-size:9px}
#performDesk .fx-bank .xy{height:122px;margin-top:8px;border-radius:5px;background:repeating-linear-gradient(0deg,transparent,transparent calc(25% - 1px),color-mix(in srgb,var(--pad) 10%,transparent) calc(25% - 1px),color-mix(in srgb,var(--pad) 10%,transparent) 25%),repeating-linear-gradient(90deg,transparent,transparent calc(25% - 1px),color-mix(in srgb,var(--pad) 10%,transparent) calc(25% - 1px),color-mix(in srgb,var(--pad) 10%,transparent) 25%),var(--field)}
#performDesk .xy .pad-note{font-size:8px;letter-spacing:2px;opacity:.65}
#performDesk .xy .puck{width:19px;height:19px;border-width:1px}
#performDesk .pad-axes{display:flex;flex-direction:row;justify-content:space-between;font-size:8px;padding:6px 0 0;gap:3px}
#performDesk .fx-press{display:none}
#performDesk .fx-bank .fx-bottom{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:7px}
#performDesk .fx-bank .fx-bottom button{min-height:27px;font-size:9px;padding:4px}
#performDesk .fx-bottom kbd{font-size:8px}
#performDesk .fx-bank .fx-bottom label{grid-column:1/-1;display:flex;align-items:center;gap:12px;font-size:9px;margin:0}
#performDesk .fx-bank .fx-bottom input{height:19px;min-height:19px;flex:1;width:100%}
.pf-drop-row{display:flex;align-items:center;gap:12px;justify-content:space-between;margin:0 0 8px}
.pf-drop-row>div{display:flex;flex-direction:column;gap:5px}
.pf-drop-row>div>span:last-child{font-size:10px;color:var(--muted)}
#performDesk #pfDrop{min-width:180px;min-height:43px;background:var(--accent);color:var(--accent-ink);font-size:13px;font-weight:700;border:0}
#performDesk #pfDrop[aria-pressed=true]{background:var(--panel);border:1px solid var(--accent);color:var(--accent)}
#performDesk #beatDeck{padding:0;margin:0;border:0;border-radius:0;background:transparent}
#performDesk .beat-deck-heading{display:none}
#performDesk .beat-deck-body{display:grid;grid-template-columns:minmax(175px,.9fr) minmax(205px,1.1fr);grid-template-rows:auto auto;gap:8px 12px;align-items:start}
#performDesk .beat-library{grid-column:1;grid-row:1}
#performDesk .beat-groove-heading{display:flex;gap:4px;align-items:end;margin:0}
#performDesk .beat-groove-label{flex:1;min-width:0;gap:4px}
#performDesk #beatEdit,#performDesk #beatResetPattern{min-width:25px;min-height:28px;padding:5px;background:transparent}
#performDesk #beatEdit svg,#performDesk #beatResetPattern svg{width:12px;height:12px}
#performDesk #beatDescription{font-size:10px;line-height:1.5;min-height:32px;margin:8px 0;color:var(--muted)}
#performDesk .beat-preview{display:grid;grid-template-columns:28px repeat(16,minmax(0,1fr));gap:3px;margin:7px 0}
#performDesk .beat-preview>span{font-size:7px}
#performDesk .beat-preview .beat-cell{min-width:0;min-height:8px;height:8px;padding:0;border-radius:1px;opacity:1}
#performDesk .beat-editing .beat-preview .beat-cell{min-height:18px;height:18px}
#performDesk .beat-deck-footer{display:flex;flex-wrap:wrap;gap:4px;padding-top:4px}
#performDesk #beatDeckRun{display:none}
#performDesk .beat-deck-footer button{font-size:9px;min-height:25px;padding:3px 6px;background:transparent}
#performDesk .beat-performance{grid-column:2;grid-row:1/3;min-width:0}
#performDesk .beat-xy{height:190px;min-height:190px;border:1px solid var(--line-strong);border-radius:8px;background:radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--accent) 19%,transparent),transparent 70%),radial-gradient(ellipse at 100% 100%,#7faab823,transparent 70%),repeating-linear-gradient(0deg,transparent,transparent calc(25% - 1px),var(--line) calc(25% - 1px),var(--line) 25%),repeating-linear-gradient(90deg,transparent,transparent calc(25% - 1px),var(--line) calc(25% - 1px),var(--line) 25%),var(--field)}
#performDesk .beat-xy:after{content:'↗';position:absolute;top:35%;right:17%;font-size:56px;color:color-mix(in srgb,var(--accent) 13%,transparent);pointer-events:none}
#performDesk .beat-corner{font:9px ui-monospace,monospace;letter-spacing:1px}
#performDesk .beat-corner-fill{bottom:12px;top:auto;right:12px;color:#a8cdd6}
#performDesk .beat-neutral{font:9px ui-monospace,monospace;letter-spacing:2px;left:28%;top:55%;color:var(--muted)}
#performDesk .beat-puck{width:20px;height:20px;box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 14%,transparent)}
#performDesk .beat-axes{font-size:8px;margin:6px 0;gap:4px}
#performDesk .beat-pad-actions{gap:5px;flex-wrap:wrap}
#performDesk .beat-pad-actions button{min-height:26px;font-size:9px;padding:4px 8px}
#performDesk #beatPadState{font-size:9px;margin-left:auto}
#performDesk .beat-mix{grid-column:1;grid-row:2;display:grid;grid-template-columns:1fr;gap:6px;min-width:0;border:0;padding:0}
#performDesk .beat-sound{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#performDesk .beat-sound label{display:flex;flex-direction:column;gap:4px;min-width:0}
#performDesk .beat-sound input{height:24px;min-height:24px;width:100%}
#performDesk .beat-swing-label{display:flex;align-items:center;gap:8px;min-width:0;font-size:9px}
#performDesk .beat-swing-label input{flex:1;min-height:22px;height:22px;width:60px}
#performDesk .beat-axis-controls,#performDesk #beatPadHelp{display:none}
.pf-recording{margin-top:18px;border-top:1px solid var(--line);padding-top:8px}
#performDesk .pf-recording .pf-bank-title{margin:0 0 7px}
#performDesk details>summary{cursor:pointer;list-style:none;font-size:12px;min-height:38px;display:flex;align-items:center;gap:10px}
#performDesk details>summary:before{content:'+';font:17px ui-monospace,monospace;color:var(--accent)}
#performDesk details[open]>summary:before{content:'−'}
#performDesk details>summary>span{font-size:10px;color:var(--muted);margin-left:auto}
#performDesk #sources{margin:7px 0 10px;padding:12px;background:var(--surface);border-radius:7px}
#performDesk .source-context{margin-top:8px;padding-top:8px}
#performDesk .source-feedback{display:none}
#performDesk .input-actions{justify-content:flex-start}
#performDesk .loops-heading{margin:10px 0;gap:8px}
#performDesk .loops-heading h2{font-size:15px}
#performDesk .loops-heading #jamPrompt{font-size:11px}
#performDesk .tracks,#performDesk .tracks.expanded{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;overflow:visible}
#performDesk .track{min-width:0;border-radius:7px}
#performDesk .track-head{padding:5px}
#performDesk .track-body{height:95px;padding:3px}
#performDesk .loop-display{width:92px;height:92px}
#performDesk .loop-state strong{font-size:12px}
#performDesk .loop-state>span{font-size:7px}
#performDesk .track-controls{padding:7px;gap:5px}
#performDesk .track-volume{display:flex;align-items:center;gap:8px;margin:0}
#performDesk .track-volume input{width:100%;height:25px;min-height:25px;writing-mode:horizontal-tb;direction:ltr}
#performDesk .track-volume output{font-size:9px;display:block}
#performDesk .track-row button{min-height:28px}
.pf-loop-effects{margin-top:10px}
#performDesk #pfOutput .bank-heading,#performDesk #pfOutput .bank-note{display:none}
.pf-key-drawer{border-top:1px solid var(--line);margin-top:4px}
#performDesk #instrument{margin:8px 0;padding:12px;background:var(--surface)}
#performDesk .master-strip{position:sticky;bottom:0;z-index:15;display:flex;gap:14px;flex-wrap:nowrap;margin:10px -8px -10px;padding:12px 8px;background:var(--bg);border-top:1px solid var(--line);backdrop-filter:none}
#performDesk #tape{font-size:11px;background:transparent;min-height:35px}
#performDesk #message{font-size:10px;color:var(--muted);line-height:1.4;flex:1}
#performDesk .master-label{font-size:8px;max-width:180px;min-width:140px;gap:8px}
#performDesk #master{min-height:24px;height:24px;width:80px}
#performDesk #silence{font-size:10px;min-height:32px;background:transparent}
:root[data-view=perform] select[data-touch-native]{display:none!important}
:root[data-view=perform] .touch-choice{display:block;position:relative;width:100%;min-width:0}
:root[data-view=perform] .touch-choice-value{width:100%;position:relative;text-align:left;padding:5px 21px 5px 8px;font-size:11px;min-height:30px;background:var(--field);border-color:var(--line);overflow:hidden;text-overflow:ellipsis;cursor:ew-resize;touch-action:pan-y}
:root[data-view=perform] .touch-choice-value:after{content:'⌄';position:absolute;right:7px;top:50%;transform:translateY(-50%);color:var(--muted)}
:root[data-view=perform] .touch-choice-browser{z-index:35;background:var(--panel);box-shadow:0 12px 60px #0009}
:root[data-view=perform] .touch-choice-browser .touch-choice-options{grid-template-columns:repeat(2,minmax(0,1fr))}
:root[data-view=perform] .touch-choice-browser button{white-space:normal;min-height:44px;font-size:12px;padding:8px;line-height:1.4}
:root[data-view=perform] .touch-choice-browser button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
:root[data-view=perform] dialog .touch-choice-value{min-height:40px}
:root[data-view=perform] #boot{background:color-mix(in srgb,var(--bg) 95%,transparent)}
#performDesk .pf-section:focus-visible,#performDesk .touch-surface:focus-visible,#performDesk .beat-xy:focus-visible,#performDesk summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(min-width:1400px){#performDesk .touch-pads .touch-surface{height:140px}#performDesk .beat-xy{height:207px;min-height:207px}#performDesk .fx-bank .xy{height:140px}}
@media(max-width:1150px){.pf-start{grid-template-columns:180px minmax(0,1fr) 185px;gap:14px}.pf-title h1{font-size:27px}.pf-song{grid-template-columns:180px minmax(0,1fr);gap:14px}.pf-section-tools{grid-column:1/-1;flex-direction:row;align-items:center}#pfQueue{max-width:none;min-height:0}.pf-key-hint{margin-left:5px}#performDesk .toolbar{gap:14px}#performDesk .toolbar nav{gap:0}#performDesk .toolbar nav button{padding-inline:7px}.pf-performance{gap:14px;grid-template-columns:minmax(285px,.9fr) minmax(400px,1.1fr)}#performDesk .fx-stack{gap:8px}#performDesk .beat-deck-body{gap:8px}#performDesk .touch-pads[data-count]{gap:8px}#performDesk .hw-pad-controls{padding:8px;gap:6px}#performDesk .touch-harmony label{flex-basis:180px}#performDesk #beatPadState{width:100%;margin:0}#performDesk .master-label{min-width:120px;max-width:140px}}
@media(max-width:900px){:root[data-view=perform] main{padding:0 16px 16px}.pf-start{grid-template-columns:1fr 190px;gap:10px;padding-top:15px}.pf-title{grid-column:1/-1;display:flex;align-items:center;gap:15px}.pf-title h1{font-size:23px;margin:0}.pf-title .eyebrow{order:2}.pf-song{grid-template-columns:1fr;gap:10px}.pf-song-intro{display:flex;align-items:center;justify-content:space-between}.pf-section-timing{margin:0}.pf-section-tools{grid-column:auto}#performDesk .touch-pads[data-count]{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#performDesk .touch-pads .touch-surface{height:145px}.pf-performance{grid-template-columns:1fr;gap:16px}#performDesk .fx-bank .xy{height:150px}#performDesk .beat-xy{height:215px;min-height:215px}#performDesk .beat-deck-body{grid-template-columns:1fr 1fr}#performDesk .toolbar{flex-wrap:wrap;gap:8px;padding:8px 0}#performDesk .toolbar nav{margin-left:auto}#performDesk .toolbar nav button{min-height:32px}#performDesk .transport{margin:0}#performDesk .master-strip{flex-wrap:wrap;gap:8px}#performDesk #message{order:4;flex-basis:100%;min-height:14px}#performDesk .master-label{margin-left:auto}#performDesk .pf-bank-title{flex-wrap:wrap;gap:8px}#performDesk .tracks,#performDesk .tracks.expanded{grid-template-columns:repeat(3,minmax(0,1fr))}#performDesk .touch-harmony label{flex-basis:175px}#performDesk[data-deep=true] .touch-details .touch-controls{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:540px){:root[data-view=perform] main{padding:0 12px 12px}#performDesk .toolbar{justify-content:space-between}#performDesk .brand b{font-size:16px}#performDesk .toolbar nav{width:100%;justify-content:space-between}#performDesk .toolbar nav button{flex:1;font-size:10px}#performDesk .transport{gap:3px}#performDesk #run{font-size:10px}#performDesk #run kbd{display:none}#performDesk #tempo{min-width:130px}.pf-start{grid-template-columns:1fr}.pf-title{justify-content:space-between}.pf-title .eyebrow{font-size:8px}.pf-inspiration{grid-template-columns:1fr 1fr 1fr;max-width:none}#performDesk #pfGenerate{grid-column:auto;font-size:11px}#performDesk #pfUndo,#performDesk #pfSceneBeat{font-size:10px;min-height:36px}.pf-song-intro{flex-wrap:wrap;gap:8px}.pf-sections{gap:5px}#performDesk .pf-section{padding:10px 8px;min-height:94px}.pf-section strong{font-size:12px}.pf-section small{font-size:9px}.pf-section>span{font-size:8px}#performDesk .touch-harmony{gap:8px}#performDesk .touch-harmony label{flex:1;min-width:100%}#performDesk .pf-bank-title>div:first-child{flex-wrap:wrap;gap:8px}.pf-key-hint{margin:0;font-size:9px}#performDesk .touch-pads[data-count]{grid-template-columns:1fr;gap:14px}#performDesk .touch-pads .touch-surface{height:165px}#performDesk .hw-pad-controls{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:'voice voice voice voice' 'switch octave gate arp';gap:8px}#performDesk .hw-pad-controls label{font-size:9px}#performDesk .perform-pad-actions{padding:8px 10px 0}#performDesk .touch-card-heading button{font-size:10px;min-height:30px}#performDesk .hw-pad-switches button{min-width:0;padding:5px;font-size:10px}#performDesk .touch-card-heading span{font-size:10px}#performDesk[data-deep=true] .hw-pad-controls{grid-template-columns:1fr 1fr;grid-template-areas:'voice voice' 'switch octave' 'gate arp'}#performDesk .fx-bank .xy{height:145px}#performDesk .beat-deck-body{grid-template-columns:1fr}#performDesk .beat-library{grid-row:1;grid-column:1}#performDesk .beat-mix{grid-row:2;grid-column:1}#performDesk .beat-performance{grid-row:3;grid-column:1;margin-top:5px}#performDesk .beat-xy{height:245px;min-height:245px}#performDesk #beatPadState{width:auto;margin-left:auto}#performDesk .beat-description{min-height:0}#performDesk #pfDrop{min-width:160px}#performDesk .pf-drop-row>div>span:last-child{max-width:150px;line-height:1.4}#performDesk details>summary>span{max-width:170px;font-size:9px;text-align:right}#performDesk .tracks,#performDesk .tracks.expanded{grid-template-columns:repeat(2,minmax(0,1fr))}#performDesk #tape{padding:6px;font-size:10px}#performDesk #silence kbd{display:none}#performDesk #silence{padding:6px}#performDesk #master{width:55px}#performDesk .master-label{min-width:94px;max-width:108px;gap:5px}#performDesk[data-deep=true] .touch-details .touch-controls{grid-template-columns:1fr 1fr}}
@media(pointer:coarse){#performDesk button,#performDesk .touch-choice-value,#performDesk #pfUndo,#performDesk #pfSceneBeat{min-height:42px}#performDesk .hw-pad-switches button{min-height:42px}#performDesk .hw-synth-volume input{min-height:32px;height:32px}#performDesk .touch-card-heading button{min-height:35px}#performDesk .pf-bank-title button{min-height:38px}}

/* Keep the default lane to the four performance decisions. */
#performDesk:not([data-deep=true]) .hw-pad-controls :is(.hw-pad-y,.hw-pad-quantize,.hw-pad-insert,.hw-pad-echo,.hw-pad-verb){display:none}
#performDesk .touch-choice-value{min-height:29px;height:29px;padding-block:4px;font-size:11px}
#performDesk #run{color:var(--text)}
#performDesk .hw-pad-controls .touch-choice-value{font-size:10px}
#performDesk .hw-pad-voice .touch-choice-value{font-size:11px}
@media(pointer:coarse){#performDesk .touch-choice-value{min-height:42px;height:42px}}
/* Desktop stage: all sound, harmony and gesture surfaces in one glance. */
@media(min-width:1100px){
  #performDesk .toolbar{min-height:52px}
  .pf-start{padding:12px 0 5px;grid-template-columns:210px minmax(0,1fr) 205px;gap:18px}
  .pf-title h1{font-size:29px}
  #performDesk .touch-preset-note{margin:0 0 9px;font-size:10px}
  .pf-song{padding:9px 0;grid-template-columns:210px minmax(0,1fr) 180px;gap:18px}
  #performDesk .pf-section{min-height:69px;padding:8px 11px;gap:4px}
  .pf-section-timing{gap:4px;margin-top:5px}
  #performDesk .touch-harmony{min-height:38px;padding:5px 0}
  #performDesk .touch-harmony label{flex-basis:210px}
  .pf-bank-title{margin:4px 0 7px}
  #performDesk .touch-pads .touch-surface{height:112px}
  #performDesk .hw-pad-controls{grid-template-columns:.72fr .63fr 1.2fr 1.2fr;grid-template-areas:'voice voice voice voice' 'switch octave gate arp';gap:6px;padding:7px 9px}
  #performDesk .hw-pad-controls label{font-size:9px;gap:4px}
  #performDesk .hw-pad-controls .touch-choice-value{padding-left:6px;padding-right:16px;font-size:10px}
  #performDesk .hw-pad-switches button{padding:4px;min-width:0;font-size:10px}
  #performDesk[data-deep=true] .hw-pad-controls{grid-template-columns:1fr 1fr;grid-template-areas:'voice voice' 'switch octave' 'gate arp'}
  #performDesk .hw-synth-volume{padding-bottom:4px}
  #performDesk .hw-synth-volume input{height:18px;min-height:18px}
  .pf-performance{margin-top:12px;padding-top:12px}
  #performDesk .fx-bank .xy{height:106px}
  #performDesk .beat-xy{height:175px;min-height:175px}
  #performDesk .fx-bank .fx-deck{padding:8px}
  #performDesk .fx-bank .fx-bottom{margin-top:5px;gap:4px}
  .pf-recording{margin-top:10px;padding-top:6px}
  #performDesk .pf-recording .pf-bank-title{margin:0 0 3px}
  #performDesk details>summary{min-height:30px}
  .pf-key-drawer{margin-top:0}
  #performDesk .master-strip{margin:5px -8px -10px;padding:8px;min-height:48px}
}
#performDesk #pfFooter{position:sticky;bottom:0;z-index:15}
#performDesk .master-strip{position:static}
@media(pointer:coarse) and (min-width:1100px){#performDesk .hw-pad-controls .touch-choice-value{height:36px;min-height:36px}#performDesk .hw-pad-switches button{min-height:36px}}
@media(max-width:540px){
  .pf-lanes{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:10px 0}
  #performDesk .pf-lanes button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:6px;font-size:11px}
  .pf-lanes i{width:4px;height:4px;border-radius:50%;background:var(--line-strong)}
  .pf-lanes .sounding i{background:var(--accent)}
  #performDesk .touch-card:not(.pf-visible-lane){display:none}
}

/* Space is an everyday performance control, with depth one gesture away. */
.perform-space{display:none}
.pf-play-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 9px;font-size:10px;color:var(--muted)}
.pf-play-tools>div{display:flex;align-items:center;gap:7px;min-width:0}
#performDesk .pf-play-tools button{min-height:29px;font-size:10px;padding:5px 9px}
#performDesk #pfChromatic[aria-pressed=true]{color:#9acbbb;border-color:#9acbbb70;background:#9acbbb0c}
#performDesk #pfStripPosition{font-size:10px;min-height:29px;padding:4px 20px 4px 6px;background:transparent;width:76px}
.pf-play-tools>label{display:flex;align-items:center;gap:8px;white-space:nowrap;margin:0;font-size:10px}
.pf-play-tools>label .touch-choice{width:112px}
#performDesk .perform-space{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 9px;padding:8px 0 2px;border-top:1px solid var(--line)}
.perform-space-control{display:grid;grid-template-columns:1fr auto;column-gap:3px;row-gap:3px;min-width:0}
#performDesk .perform-space-control>label{font-size:9px;letter-spacing:.2px;margin:0;color:var(--muted)}
#performDesk .perform-space-control>output{font:9px ui-monospace,monospace;color:var(--pf-lane);align-self:center}
#performDesk .perform-space-control.is-dry>output{color:var(--muted)}
#performDesk .perform-space-control>.touch-choice,#performDesk .perform-space-control>input{grid-column:1/-1;width:100%;min-width:0}
#performDesk .perform-space-control .touch-choice-value{font-size:10px;background:transparent;min-height:26px;height:26px;padding:3px 18px 3px 6px}
#performDesk .perform-space-control>input{height:19px;min-height:19px;margin:0;accent-color:var(--pf-lane)}
#performDesk[data-deep=true] .hw-pad-echo,#performDesk[data-deep=true] .hw-pad-verb{display:none}
@media(max-width:900px){#pfStripHint{display:none}.pf-play-tools{margin-bottom:12px}}
@media(max-width:540px){.pf-play-tools{align-items:stretch;gap:6px;flex-wrap:wrap}.pf-play-tools>label{gap:5px}.pf-play-tools>label .touch-choice{width:105px}#performDesk .pf-play-tools button{font-size:10px;padding-inline:6px}#performDesk #pfStripPosition{width:67px;padding-right:13px}.pf-play-tools>div{gap:4px}#performDesk .perform-space{margin-inline:10px;gap:18px}.pf-lanes{margin-top:4px}#performDesk .perform-space-control .touch-choice-value{font-size:12px}}
@media(pointer:coarse){#performDesk .perform-space-control .touch-choice-value,#performDesk .pf-play-tools button,#performDesk #pfStripPosition{min-height:42px;height:42px}#performDesk .perform-space-control>input{height:32px;min-height:32px}}