/* Matter / Field's panels (2 Nov 2026). Cyrus, of the side column beside the other devices': "looks very messy design
   wise on this app need to step up ui to match others", then "you are welcome to do a better design for matters panels
   if it helps make it look more professional". The side column read as a web page beside Polite Disorder's, one device's
   and one device's: blue-grey cards on a blue-grey panel, a boxed TRY card above FIRST STEPS, the browser's own
   menus, sentence-case labels and plain sliders. Here it is made as theirs are: Matter / Field's own near-black, cool
   where theirs are warm (style.css's colours moved there); FIRST STEPS heading the column and TRY a line under the field
   (app.js), as the shared part has them; every slider a knob, the devices' own (knobs.js, ui/cx-knob.js), three to a
   row; one voice for every heading, label and value (small capitals in the mono, the values in the ink); one menu, one
   button and one switch, as the frame's; and the automation's foot as one device's. Loaded after style.css. */

:root{--mf-pad:20px;--mf-dock:#0e1113;--mf-line:#1d2427;--mf-line-2:#2a3236;--mf-well:#090c0d;--mf-raised:#13181a;
  --mf-ink:#e8e4dc;--mf-muted:#a3abae;--mf-quiet:#808a8e;--mf-faint:#788287;--mf-accent:var(--orange,#ed9369);
  --mf-accent-soft:#ed936914;--mf-accent-line:#ed936966;--cxn-hue:var(--mf-accent)}
@media(min-width:1650px){:root{--mf-pad:24px}}
@media(max-width:960px){:root{--mf-pad:16px}}

/* ---- The column: one panel that slides as a whole, FIRST STEPS at its head, the automation's foot kept under it ---- */
.viewport-inspector{background:var(--mf-dock);border-left-color:var(--mf-line-2)}
.viewport-inspector .inspector-body{padding:0;scrollbar-color:#3a4448 transparent}
.inspector-body>.mf-steps{padding:16px var(--mf-pad) 14px;border-bottom:1px solid var(--mf-line);background:none}
.inspector-body>.mf-steps[hidden]{display:none}
.viewport-inspector .inspector-heading{padding:18px var(--mf-pad) 15px;border-bottom:1px solid var(--mf-line)}
.viewport-inspector .inspector-heading>div>span{font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--mf-quiet);margin-bottom:9px}
.viewport-inspector .inspector-heading strong{font:400 22px/1.15 Matter;letter-spacing:-.03em;color:var(--mf-ink)}
.viewport-inspector .inspector-heading>span{display:grid;place-items:center;width:38px;height:38px;padding:0;border-color:var(--mf-line-2);color:var(--mf-accent)}
.viewport-inspector .inspector-guide{padding:14px var(--mf-pad) 0;font:13px/1.55 Matter;color:var(--mf-muted)}
.viewport-inspector .inspector-pane{padding:18px var(--mf-pad) 26px}
/* what each panel had as a frame of its own (v1's cards, racks and asides) left out: the column is the frame */
.viewport-inspector .inspector-pane>:is(.source-panel,.lab-card,#force-inspector,#object-inspector,.pitch-rack,.racks){margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.viewport-inspector .racks>.rack{margin:0;padding:0;border:0;background:none}

/* ---- One voice: headings, labels, notes ---- */
.viewport-inspector :is(.section-head h2,.layers-head h4,.read-motion-head>span,.emitter-head h4,.shard-label,.matter-surface>h2,
  .stack-head h3,.stack-starts>span,.walls-head h4,.rack-title h2,.rack-extra>label,.pitch-pair>label,.pitch-source>label){
  margin:0;font:500 10px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mf-quiet)}
.viewport-inspector :is(.layers-count,.emitter-count,.stack-head h3 span){margin-left:8px;font:500 10px/1.3 var(--mono);letter-spacing:.06em;color:var(--mf-accent)}
.viewport-inspector .matter-surface>h2{margin-bottom:14px}
.viewport-inspector .stack-editing{margin:22px 0 10px;padding:16px 0 0;border-top:1px solid var(--mf-line);font:500 10px/1.3 var(--mono);letter-spacing:.14em;color:var(--mf-accent)}
/* the labels over a menu, the menu's own name */
.viewport-inspector :is(.collision-pair label,.geometry-box>label,.force-type,.object-inspector-top label,.emitter-carrier>span,.read-cycle){
  display:grid;gap:7px;font:500 var(--mf-9h)/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mf-quiet)}
.viewport-inspector :is(.layers-note,.emitter-note,.lab-card>p,.surface-note,.read-note,[id=force-description],.force-options>p,
  .object-inspector-top>p,.walls-note,[id=spatial-description],[id=position-check-note],[id=pitch-mode-note],.rack>p,.room-dimensions,
  .playback-controls p,.live-input p,.scan-surface p,.tilt-pour p,.head-tracking p,[id=plugin-settings]>p,[id=app-haptics]>p){
  margin:10px 0 0;font:12.5px/1.55 Matter;color:var(--mf-quiet);letter-spacing:0;text-transform:none}
.viewport-inspector .room-dimensions{font:10px/1.5 var(--mono);letter-spacing:.06em;color:var(--mf-faint)}
/* a section's head: its name, its count, its action at the right */
.viewport-inspector :is(.section-head,.layers-head,.emitter-head,.stack-head,.walls-head,.read-motion-head){display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:32px;margin:0 0 12px}
/* sections apart by a line and room */
.viewport-inspector :is(.layers,.read-motion,.geometry-box,.matter-surface,.walls,.force-study-row,.construction-row,.emitter-mix,.position-check){margin-top:24px;padding-top:20px;border-top:1px solid var(--mf-line)}

/* ---- Knobs, three to a row ---- */
.viewport-inspector .cxn{--cxn-size:50px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;padding:0;margin:0;min-width:0;text-align:center;cursor:default}
.viewport-inspector .cxn input[type=range]{position:absolute;left:50%;top:0;width:1px;height:1px;margin:0;padding:0;opacity:0!important}
.viewport-inspector .cxn>span{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:100%;font:500 var(--mf-9h)/1.25 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--mf-muted);text-align:center;white-space:normal;overflow-wrap:anywhere}
.viewport-inspector .cxn>span>output,.viewport-inspector .cxn>span>b+output{display:block;font:500 11px/1 var(--mono);letter-spacing:.02em;color:var(--mf-ink);text-transform:none;white-space:nowrap}
.viewport-inspector .cxn>span>b{font:inherit;letter-spacing:inherit;color:inherit}
/* a knob switched off: its dial dimmed, its words still read (the audit's rule, 4.5 to 1 at least) */
.viewport-inspector .cxn.cxn-off{opacity:1}
.viewport-inspector .cxn.cxn-off .cxn-dial{opacity:.4}
.viewport-inspector .cxn.cxn-off>span,.viewport-inspector .cxn.cxn-off>span>output{color:var(--mf-quiet)}
.viewport-inspector .cxn-ticks{stroke:#323a3e}
.viewport-inspector .cxn-track{stroke:#1d2326}
.viewport-inspector .cxn-cap{stroke:#353d41}
.viewport-inspector .cxn-rim{stroke:#08090a}
/* the cap's own shading (the shared part's is warm, made for Polite Disorder's) in the page's cool greys; only Matter /
   Field's knobs are on its page */
#cxn-cap>stop:nth-child(1){stop-color:#353c40}
#cxn-cap>stop:nth-child(2){stop-color:#1a1e20}
#cxn-cap>stop:nth-child(3){stop-color:#101315}
/* where knobs stand together (knobs.js marks what holds them), a grid of three; what else stands among them (a menu, a
   note, a head) takes the row */
.viewport-inspector .knob-grid,.viewport-inspector #emitter-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 8px;align-items:start}
.viewport-inspector .knob-grid>:not(.cxn){grid-column:1/-1;min-width:0;margin-top:0;margin-bottom:0}
/* the emitter's groups (shown and hidden by its kind, stage-editor.js) one grid, their knobs flowing on */
.viewport-inspector :is(#emitter-place,#emitter-height,#emitter-aim,#emitter-opening,#emitter-push){display:contents}
.viewport-inspector #emitter-controls [hidden],.viewport-inspector #emitter-mix[hidden],.viewport-inspector [data-knob][hidden]{display:none!important}
.viewport-inspector #emitter-controls{margin-top:18px}
.viewport-inspector #emitter-controls .emitter-carrier{grid-column:1/-1}
.viewport-inspector .controls{margin-top:6px}
/* Read motion: its depth and its cycle side by side */
.viewport-inspector .read-motion{border-width:1px 0 0;border-style:solid;border-color:var(--mf-line);border-radius:0;background:none;padding-left:0;padding-right:0;padding-bottom:0}
.viewport-inspector .read-motion>.read-cycle{grid-column:2/-1;align-self:center;margin:0}
.viewport-inspector .read-motion>.read-note{margin-top:0}
.viewport-inspector [id=pitch-mode-note]{margin-bottom:16px}
.viewport-inspector summary{font:500 10px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mf-quiet);cursor:pointer}

/* ---- Menus: the frame's, in the mono's capitals, a caret drawn ---- */
.viewport-inspector select,.parameter-link select{-webkit-appearance:none;appearance:none;width:100%;min-width:0;height:36px;min-height:36px;margin:0;
  padding:0 30px 0 11px;border:1px solid var(--mf-line-2);border-radius:3px;color:var(--mf-ink);font:500 11px/1 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;cursor:pointer;
  background:linear-gradient(45deg,transparent 50%,var(--mf-muted) 50%) calc(100% - 15px) 50%/5px 5px no-repeat,
    linear-gradient(135deg,var(--mf-muted) 50%,transparent 50%) calc(100% - 10px) 50%/5px 5px no-repeat,var(--mf-well)}
.viewport-inspector select:disabled,.parameter-link select:disabled{opacity:.45;cursor:default}
.viewport-inspector select:focus-visible,.parameter-link select:focus-visible{outline:2px solid var(--mf-accent);outline-offset:1px}
@media(hover:hover){.viewport-inspector select:hover:not(:disabled),.parameter-link select:hover:not(:disabled){border-color:#3b4549}}

/* ---- Buttons: one kind, the mono's capitals, outlined; the accent for what brings something in ---- */
.viewport-inspector :is(#load,#layer-add,#layer-load,#force-duplicate,#force-remove,#object-duplicate,#object-remove,#force-bypass,#walls,
  #position-check,#listener-center,#budget-full,#head-center,#tilt-level,#rhythm-open,.emitter-add,.stack-starts button,.layer-row button,.live-actions button,
  .scan-actions button),.parameter-link button{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:32px;padding:0 12px;border:1px solid var(--mf-line-2);border-radius:3px;
  background:none;color:var(--mf-muted);font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.viewport-inspector :is(#load,#layer-load,.emitter-add){border-color:var(--mf-accent-line);color:var(--mf-accent)}
.viewport-inspector :is(#force-remove,#object-remove){color:var(--mf-quiet)}
.viewport-inspector .stack-starts{gap:6px}
.viewport-inspector .stack-starts button{min-height:30px;padding:0 10px;letter-spacing:.08em}
@media(hover:hover){
  .viewport-inspector :is(#load,#layer-add,#layer-load,#force-duplicate,#force-remove,#object-duplicate,#object-remove,#force-bypass,#walls,
    #position-check,#listener-center,#budget-full,#head-center,#tilt-level,#rhythm-open,.emitter-add,.stack-starts button,.layer-row button,.live-actions button,
    .scan-actions button):hover:not(:disabled),.parameter-link button:hover:not(:disabled){
    border-color:#3f494d;background:#ffffff06;color:var(--mf-ink)}
  .viewport-inspector :is(#load,#layer-load,.emitter-add):hover:not(:disabled){border-color:var(--mf-accent);background:var(--mf-accent-soft);color:var(--mf-accent)}}
.viewport-inspector :is(#force-bypass,#walls)[aria-pressed=true]{border-color:var(--mf-accent-line);background:var(--mf-accent-soft);color:var(--mf-accent)}
.viewport-inspector button:disabled{opacity:.42}
.viewport-inspector .stack-add{min-height:38px;border:1px dashed var(--mf-line-2);border-radius:3px;background:none;color:var(--mf-muted);font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
@media(hover:hover){.viewport-inspector .stack-add:hover{border-color:var(--mf-accent-line);color:var(--mf-accent);background:var(--mf-accent-soft)}}
.viewport-inspector .stack-add[aria-expanded="true"]{border-style:solid;border-color:var(--mf-accent-line);background:var(--mf-accent-soft);color:var(--mf-accent)}
/* a row that opens more: the grain's synthesis, the keyboard */
.viewport-inspector :is(#synth-open,#pitch-sequence-open){display:flex;align-items:center;gap:10px;width:100%;min-height:42px;margin-top:20px;padding:0 14px;
  border:1px solid var(--mf-line-2);border-radius:3px;background:var(--mf-raised);color:var(--mf-ink);font:500 10px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-align:left}
@media(hover:hover){.viewport-inspector :is(#synth-open,#pitch-sequence-open):hover{border-color:var(--mf-accent-line);color:var(--mf-accent)}}

/* ---- Switches: a box ticked in the accent ---- */
:is(.viewport-inspector,.workspace-deck) .check{display:flex;align-items:center;gap:10px;min-height:32px;margin:0;font:12.5px/1.4 Matter;color:var(--mf-muted);text-transform:none;letter-spacing:0}
:is(.viewport-inspector,.workspace-deck) .check input{-webkit-appearance:none;appearance:none;flex:none;display:grid;place-items:center;width:16px;height:16px;margin:0;
  border:1px solid #3a4448;border-radius:3px;background:var(--mf-well);cursor:pointer}
:is(.viewport-inspector,.workspace-deck) .check input:checked{border-color:var(--mf-accent);background:var(--mf-accent)}
:is(.viewport-inspector,.workspace-deck) .check input:checked::after{content:'';width:4px;height:8px;margin-top:-2px;border:solid #12100e;border-width:0 2px 2px 0;transform:rotate(45deg)}
:is(.viewport-inspector,.workspace-deck) .check input:focus-visible{outline:2px solid var(--mf-accent);outline-offset:2px}
.viewport-inspector .source-panel .check{margin-top:22px}
.viewport-inspector .force-options{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:20px}

/* ---- Source ---- */
.viewport-inspector .source-screen{border:1px solid var(--mf-line-2);border-radius:3px;background:var(--mf-well)}
.viewport-inspector .read-motion-head{margin:0}
.viewport-inspector .read-motion-head select{width:auto;max-width:62%;min-width:140px}
.viewport-inspector .read-cycle select{margin-top:0}
.viewport-inspector .read-motion.is-off .cxn-dial,.viewport-inspector .read-motion.is-off .read-cycle select{opacity:.4}
.viewport-inspector .read-motion.is-off :is(.cxn>span,.cxn output,.read-cycle){color:var(--mf-quiet)}

/* ---- Matter: the emitters' kinds and the surface's pair ---- */
.viewport-inspector .emitter-kinds{gap:6px}
/* the stacks' cards, a force's and an emitter's, as the Forces stack has them: the number and the glyph, the name, and
   its line under it, each whole; where the card is narrow (a tablet's column) a name or its line takes a second line,
   broken between its parts and never inside one (force-editor.js, stage-editor.js), never cut */
.viewport-inspector .force-card-main>strong{overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:break-word}
.viewport-inspector .force-card-main>span[id^=force-summary-]:last-child{overflow:visible;text-overflow:clip;white-space:normal;line-height:1.35}
.viewport-inspector .force-card-main>span[id^=force-summary-]>span,.viewport-inspector .emitter-sum>.sum-part{white-space:nowrap}
.viewport-inspector .emitter-pick{grid-template-columns:18px 18px minmax(0,1fr);row-gap:2px;padding-block:6px}
.viewport-inspector .emitter-pick>:is(.stack-no,.ui-icon){grid-row:1/3}
.viewport-inspector .emitter-pick>strong{grid-column:3;grid-row:1;min-width:0;overflow-wrap:break-word}
.viewport-inspector .emitter-sum{grid-column:3;grid-row:2;overflow:visible;text-overflow:clip;white-space:normal;text-align:left;line-height:1.35}
.viewport-inspector .collision-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.viewport-inspector .geometry-box>select{margin-top:-11px}

/* ---- Room: the walls ---- */
.viewport-inspector .walls-table th{font:500 var(--mf-9h)/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mf-muted)}
.viewport-inspector .walls-table thead th{color:var(--mf-faint)}

/* ---- Sound: Grains, Motion, Output, the frame's segments ---- */
.viewport-inspector .sound-nav{gap:0;padding:0;margin-bottom:22px;border:1px solid var(--mf-line-2);border-radius:3px;background:none;overflow:hidden}
.viewport-inspector .sound-nav button{min-height:34px;border:0;border-left:1px solid var(--mf-line-2);border-radius:0;background:none;color:var(--mf-quiet);
  font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.viewport-inspector .sound-nav button:first-child{border-left:0}
.viewport-inspector .sound-nav button[aria-selected=true]{background:var(--mf-accent-soft);color:var(--mf-accent);box-shadow:inset 0 -2px 0 var(--mf-accent)}
.viewport-inspector .rack-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.viewport-inspector .rack-title>span{font:500 var(--mf-9h)/1.3 var(--mono);letter-spacing:.1em;color:var(--mf-faint)}
.viewport-inspector .rack-extra{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--mf-line)}
.viewport-inspector .pitch-pair{gap:12px}
.viewport-inspector .rhythm-line{margin-top:24px;padding-top:20px;border-top-color:var(--mf-line);font:500 10px/1.3 var(--mono);letter-spacing:.14em;color:var(--mf-quiet)}
.viewport-inspector .pitch-pair>label,.viewport-inspector .pitch-source>label{gap:7px}

/* ---- Sound → Output: the peak and the protection, the voices, the fragment budget (knobs), and the apps' own rows ---- */
.viewport-inspector .playback-controls{margin-top:24px;padding-top:20px;border-top-color:var(--mf-line)}
.viewport-inspector .output-safety{gap:14px 16px;padding:14px;border:1px solid var(--mf-line-2);border-radius:3px;background:var(--mf-well)}
.viewport-inspector .output-safety>div>span{font:500 var(--mf-9h)/1.3 var(--mono);letter-spacing:.12em;color:var(--mf-quiet)}
.viewport-inspector .output-safety output{margin-top:8px;font:500 15px/1 var(--mono);letter-spacing:.02em;color:var(--mf-ink)}
.viewport-inspector .output-safety>div:nth-child(2) output{color:var(--mf-accent)}
.viewport-inspector .protection-meter{height:3px;background:var(--mf-line)}
.viewport-inspector .playback-controls>label{margin:22px 0 0;gap:12px;font:500 var(--mf-9h)/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mf-quiet)}
.viewport-inspector .playback-controls>label>select{width:auto;max-width:100%}
.viewport-inspector #fragment-budget{margin:24px 0 0;padding:20px 0 0;border:0;border-top:1px solid var(--mf-line);border-radius:0;background:none}
.viewport-inspector .budget-head{min-height:32px}
.viewport-inspector .budget-head>span{font:500 10px/1.3 var(--mono);letter-spacing:.14em;color:var(--mf-quiet)}
/* a switch that says ON or OFF (the apps' LIVE INPUT and YOUR SCAN, head tracking, tilt to pour): one button, lit while on */
.viewport-inspector button[role=switch]{min-height:32px;min-width:64px;padding:0 12px;border:1px solid var(--mf-line-2);border-radius:3px;background:none;
  color:var(--mf-muted);font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.viewport-inspector button[role=switch][aria-checked=true]{border-color:var(--mf-accent-line);background:var(--mf-accent-soft);color:var(--mf-accent)}
.viewport-inspector :is(.head-tracking,.tilt-pour) button[role=switch]{width:100%;min-height:42px}
.viewport-inspector :is(#head-center,#tilt-level){margin-top:10px}

/* ---- The automation's foot: as one device's ---- */
.parameter-link{padding:14px var(--mf-pad) 16px;border-top:1px solid var(--mf-line);background:#ffffff04}
.parameter-link>label{gap:9px;margin:0 0 10px;font:500 var(--mf-9h)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mf-muted)}
.parameter-link>label .ui-icon{width:15px;height:15px;color:var(--mf-accent)}
.parameter-link>div{gap:8px}
.parameter-link select{flex:1;height:36px;min-height:36px}
.parameter-link button{height:36px;min-height:36px;padding:0 14px}
.parameter-link p{margin:9px 0 0;font:12px/1.5 Matter;color:var(--mf-quiet)}

/* ---- TRY: a line under the field, as the other devices' are under their picture (cx-helpers.css its look) ---- */
.field-column{grid-column:1;grid-row:2;display:flex;flex-direction:column;min-width:0;min-height:0}
.field-column>.field-stage{flex:1 1 auto;min-height:0}
.field-column>.mf-try{flex:none;margin:0;padding:8px 18px 8px var(--cxf-pad,20px);border-top:1px solid var(--mf-line);background:var(--mf-dock);font:13.5px/1.45 Matter;color:var(--mf-muted)}
.field-column>.mf-try[hidden]{display:none}
@media(max-width:720px){
  .field-column{grid-row:1}
  .instrument-top{grid-template-rows:auto 50px auto}
  .focus-workspace .instrument-top{grid-template-rows:auto 50px auto}
  .one-place .instrument-top,.one-place.focus-workspace .instrument-top{grid-template-rows:auto 50px auto auto}
  .field-column>.field-stage{flex:none;height:clamp(400px,calc(60svh - var(--cxo-h,0px)),560px)}
  .focus-workspace .field-column>.field-stage{height:min(calc(62dvh - var(--cxo-h,0px)),570px)}
  .field-column>.mf-try{padding-left:16px;padding-right:16px}
}
/* in the visual mode, the field alone (style.css): its line with the rest of the page */
body.visual-mode .field-column>.mf-try{display:none}

/* a finger's sizes */
@media(pointer:coarse){
  .viewport-inspector .cxn{--cxn-size:54px}
  .viewport-inspector .cxn>span{font-size:10px}
  .viewport-inspector select,.parameter-link select{height:40px;min-height:40px;font-size:11.5px}
  .viewport-inspector :is(#load,#layer-add,#layer-load,#force-duplicate,#force-remove,#object-duplicate,#object-remove,#force-bypass,#walls,
    #position-check,#listener-center,#budget-full,#head-center,#tilt-level,#rhythm-open,.emitter-add,.stack-starts button,.layer-row button,.live-actions button,
    .scan-actions button),.parameter-link button{min-height:40px;font-size:10.5px}
  .viewport-inspector button[role=switch]{min-height:40px}
  .parameter-link button{height:40px}
  /* a line with a box to tick, the row a finger's size; a force's line at 10 px, as the frame's smallest words are */
  :is(.viewport-inspector,.workspace-deck) .check{min-height:40px}
  .viewport-inspector .force-card-main>span[id^=force-summary-]:last-child{font-size:10px}
}

/* ---- The panel under the field (Loop lanes, Keys, Rhythm, Synth): the same menus, buttons and knobs ---- */
.workspace-deck .cxn{--cxn-size:48px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;padding:0;margin:0;min-width:0;text-align:center}
.workspace-deck .cxn input[type=range]{position:absolute;left:50%;top:0;width:1px;height:1px;margin:0;padding:0;opacity:0!important}
.workspace-deck .cxn>span{display:flex;flex-direction:column;align-items:center;gap:4px;font:500 var(--mf-9h)/1.25 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mf-muted);text-align:center}
.workspace-deck .cxn>span>output{display:block;font:500 11px/1 var(--mono);letter-spacing:.02em;color:var(--mf-ink);text-transform:none;white-space:nowrap}
.workspace-deck .cxn.cxn-off{opacity:1}
.workspace-deck .cxn.cxn-off .cxn-dial{opacity:.4}
.workspace-deck .cxn-ticks{stroke:#323a3e}
.workspace-deck .cxn-track{stroke:#1d2326}
.workspace-deck .cxn-cap{stroke:#353d41}
.workspace-deck .knob-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:16px 8px;align-items:start}
.workspace-deck .knob-grid>:not(.cxn){grid-column:1/-1;min-width:0}
/* Rhythm's feel, four knobs in a row, Strum's way under its knob */
.workspace-deck .rhythm-feel{display:grid;grid-template-columns:repeat(4,minmax(0,200px));justify-content:start;gap:16px 8px;align-items:start}
.workspace-deck .rhythm-strum{display:grid;grid-template-columns:1fr;gap:10px;justify-items:center}
.workspace-deck .rhythm-strum>select{width:100%;max-width:220px;padding:0 24px 0 9px;letter-spacing:.02em;background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%}
.workspace-deck .rhythm-feel>.rhythm-strum{grid-column:auto}
@media(max-width:560px){.workspace-deck .rhythm-feel{grid-template-columns:repeat(2,minmax(0,1fr))}}
.workspace-deck .auto-tools select{width:auto;min-width:96px}
/* a lane's own row: its names in the mono's small capitals, its menus a size down */
.workspace-deck .auto-lane-settings label{font:500 var(--mf-9h)/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mf-quiet)}
.workspace-deck .auto-lane-settings select{height:28px;min-height:28px;padding:0 22px 0 8px;font-size:10px;letter-spacing:.04em;
  background-position:calc(100% - 13px) 50%,calc(100% - 8px) 50%}
/* a drive: where from and to on its first row, how far under them, as a phone has it: its menus in the mono need the room */
.workspace-deck .synth-drive{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 52px 28px;row-gap:4px}
.workspace-deck .synth-drive-amount{grid-column:1/3;grid-row:2}
.workspace-deck .synth-drive output{grid-row:1;grid-column:3}
.workspace-deck .synth-drive select{padding:0 22px 0 9px;letter-spacing:.04em;background-position:calc(100% - 13px) 50%,calc(100% - 8px) 50%}
.workspace-deck .key-switch,.workspace-deck #key-reset{min-height:32px;padding:0 12px;border:1px solid var(--mf-line-2);border-radius:3px;background:none;color:var(--mf-muted);
  font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.workspace-deck .key-step select{padding:0 24px 0 10px!important;background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%}
.workspace-deck .key-step select:first-of-type{font:15px/1 Matter!important;letter-spacing:0;text-transform:none}
.workspace-deck .key-step select:last-child{font:500 10.5px/1 var(--mono)!important;letter-spacing:.06em}
.workspace-deck .key-switch.is-on{border-color:var(--mf-accent-line);background:var(--mf-accent-soft);color:var(--mf-accent)}
.workspace-deck select{-webkit-appearance:none;appearance:none;min-width:0;height:34px;min-height:34px;padding:0 30px 0 11px;border:1px solid var(--mf-line-2);border-radius:3px;
  color:var(--mf-ink);font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;text-overflow:ellipsis;cursor:pointer;
  background:linear-gradient(45deg,transparent 50%,var(--mf-muted) 50%) calc(100% - 15px) 50%/5px 5px no-repeat,
    linear-gradient(135deg,var(--mf-muted) 50%,transparent 50%) calc(100% - 10px) 50%/5px 5px no-repeat,var(--mf-well)}
.workspace-deck select:disabled{opacity:.45;cursor:default}
.workspace-deck :is(.auto-tools,.auto-add-row,.keys-heading,.kb-controls,.key-seq-switch,.rhythm-controls,.rhythm-turn,.rhythm-foot,.synth-tools,.synth-starts,.synth-type,.synth-card-head) button,
.workspace-deck :is(.synth-add,.rhythm-random,.rhythm-pulse,.kb-toggle){min-height:32px;padding:0 12px;border:1px solid var(--mf-line-2);border-radius:3px;background:none;color:var(--mf-muted);
  font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.workspace-deck :is(.auto-tools,.auto-add-row,.keys-heading,.kb-controls,.key-seq-switch,.rhythm-controls,.rhythm-turn,.rhythm-foot,.synth-tools,.synth-starts,.synth-type,.synth-card-head) button[aria-pressed=true],
.workspace-deck :is(.rhythm-pulse,.kb-toggle,.synth-type button)[aria-pressed=true]{border-color:var(--mf-accent-line);background:var(--mf-accent-soft);color:var(--mf-accent)}
@media(hover:hover){
  .workspace-deck :is(.auto-tools,.auto-add-row,.keys-heading,.kb-controls,.key-seq-switch,.rhythm-controls,.rhythm-turn,.rhythm-foot,.synth-tools,.synth-starts,.synth-type,.synth-card-head) button:hover:not(:disabled),
  .workspace-deck :is(.synth-add,.rhythm-random,.rhythm-pulse,.kb-toggle):hover:not(:disabled){border-color:#3f494d;color:var(--mf-ink)}}
@media(pointer:coarse){
  .workspace-deck select{height:40px;min-height:40px}
  .workspace-deck :is(.auto-tools,.auto-add-row,.keys-heading,.kb-controls,.key-seq-switch,.rhythm-controls,.rhythm-turn,.rhythm-foot,.synth-tools,.synth-starts,.synth-type,.synth-card-head) button,
  .workspace-deck :is(.synth-add,.rhythm-random,.rhythm-pulse,.kb-toggle){min-height:40px;font-size:10.5px}
  .workspace-deck .key-switch,.workspace-deck #key-reset{min-height:40px;font-size:10.5px}
  .workspace-deck .cxn{--cxn-size:52px}}

/* ---- Where the column is narrow (a laptop's 1024 px, a tablet, a phone): what shares a row keeps its words whole ---- */
/* a menu that shares its row (a wall's material, More sources, the automation's foot): a size down, its letters closer */
.viewport-inspector :is(.walls-table,.layer-row,.layer-add) select,.parameter-link select{padding:0 22px 0 8px;font-size:10px;letter-spacing:.02em;
  background-position:calc(100% - 13px) 50%,calc(100% - 8px) 50%}
/* More sources: each row its menu and its two buttons, what it is under the menu */
.viewport-inspector .layer-row{grid-template-columns:auto minmax(0,1fr) auto auto;row-gap:5px;padding:8px 8px 8px 10px;border-color:var(--mf-line-2);background:var(--mf-well)}
.viewport-inspector .layer-row>.stack-no{grid-column:1;grid-row:1;align-self:center}
.viewport-inspector .layer-row>select{grid-column:2;grid-row:1}
.viewport-inspector .layer-row>.layer-kind{grid-column:2;grid-row:2;min-width:0;padding-left:1px;font:500 var(--mf-9)/1.3 var(--mono);letter-spacing:.12em;color:var(--mf-quiet)}
.viewport-inspector .layer-row>:nth-child(4){grid-column:3;grid-row:1}
.viewport-inspector .layer-row>:nth-child(5){grid-column:4;grid-row:1}
/* the row that adds one: the menu on a line of its own, ADD and LOAD AUDIO side by side under it */
.viewport-inspector .layer-add{display:flex;flex-wrap:wrap;gap:6px}
.viewport-inspector .layer-add>select{flex:1 1 100%}
.viewport-inspector .layer-add>button{flex:1 1 0}
@media(pointer:coarse){.viewport-inspector :is(.walls-table,.layer-row,.layer-add) select,.parameter-link select{font-size:10.5px}}
/* the walls' switches as they were sized (STRIKES or BOUNCES), the column's look, ALL STRIKE's mixed state in the accent */
.viewport-inspector .wall-strike{min-width:0;padding:0 10px;gap:7px;justify-content:flex-start;letter-spacing:.06em}
.viewport-inspector .wall-strike[aria-checked=mixed]{border-color:var(--mf-accent-line);background:none;color:var(--mf-accent)}
.viewport-inspector .walls-table th{padding-right:8px;letter-spacing:.08em}
/* by touch the walls' names at 10 px (style.css, --mf-9h) take a little more of the row: their gap and letters closer, so a
   material's menu beside them keeps AS THE FLOOR whole at 768 to 834 px (it lost 3 px there) */
@media(pointer:coarse){.viewport-inspector .walls-table th{padding-right:4px;letter-spacing:.06em}}
.parameter-link button{padding:0 12px;letter-spacing:.1em}
.viewport-inspector .walls-table select{padding:0 20px 0 7px;letter-spacing:0;background-position:calc(100% - 11px) 50%,calc(100% - 6px) 50%}