/* layout.css — the app layout of every instrument page (shared/layout.js), loaded
   after the page's own style.css. The page fills the screen: the header on top,
   the controls and the keyboard pinned to the bottom, and between them the views
   above the Controls panel, each headed by its bar and scrolling on its own, sharing
   the height as the handle on the controls' bar sets it. Phones are different (see
   the end): the page scrolls between the header, stuck to the top, and the keyboard, stuck
   to the bottom.
   Body classes from shared/layout.js:
     perform          Perform mode: the views turned on fill the screen, with no text in them
     views-folded     the views folded away, leaving their bar (in Perform on a phone, More controls in their place)
     controls-folded  the Controls panel folded away, leaving its bar (in Perform, until More controls)
     sharing          the handle being dragged
     no-views         a page with no views: the controls take the space
     no-midi          a browser with no Web MIDI (Safari; every browser on iPhone and iPad): MIDI buttons and hints hidden
     kb-s … kb-xl     key size
   and --split-rows (the rows of <main>: the views' bar, the views, the controls' bar and the
   controls, each panel with its share), --footer-h, the footer's height, --bar-h, the
   controls' bar's, and --header-h, the header's. */

body[data-instrument] {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
body[data-instrument] > header { padding-top: max(10px, env(safe-area-inset-top)); }
body[data-instrument] > main { min-height: 0; overflow: hidden; position: relative; }
body[data-instrument] #controls,
body[data-instrument] #views {
  max-height: none;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body[data-instrument] > footer { position: relative; min-width: 0; padding-bottom: max(12px, env(safe-area-inset-bottom)); } /* never wider than the window: the keyboard bar fits itself to it */

/* ---- header: the name (and menu), the mode, then audio ------------------------- */
body[data-instrument] > header { gap: 8px 16px; }
body[data-instrument] .brand { flex: 1 1 auto; flex-wrap: nowrap; align-items: center; gap: 10px; min-width: 0; }
body[data-instrument] [data-forte-nav] { min-width: 0; }
body[data-instrument] .brand h1 { white-space: nowrap; }
/* the subtitle takes what room is left, and no more, on very wide screens */
body[data-instrument] .brand .sub { flex: 1 1 0; min-width: 0; contain: inline-size; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1700px) { body[data-instrument] .brand .sub { display: none; } }
body[data-instrument] > header .status { margin-left: auto; justify-content: flex-end; }
.forte-mode { display: inline-flex; flex: none; padding: 2px; gap: 2px; border: 1px solid var(--line); border-radius: 9px; background: rgba(0, 0, 0, 0.28); }
body[data-instrument] .forte-mode button { border: 0; border-radius: 7px; background: transparent; color: var(--muted); padding: 2px 11px; }
body[data-instrument] .forte-mode button:hover { color: var(--text); }
body[data-instrument] .forte-mode button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink, #111); font-weight: 600; }
/* "Start audio" until the audio is on, then the CPU meter (the black hole's voice count) in its place */
body[data-instrument] #start.running,
body[data-instrument] #start:not(.running) ~ :is(#cpu, #voices),
body[data-instrument] #start:not(.running) ~ .forte-load > :is(#cpu, #voices) { display: none; }
.pill[hidden] { display: none; }
/* the MIDI status opens the MIDI settings once MIDI is on (shared/midi.js midiMenu): the velocity
   curve, MPE, Octave and Transpose; it says how far the keys are moved, in the accent, while they are */
.forte-midi-pill { cursor: pointer; white-space: nowrap; }
.forte-midi-pill::after { content: ' ▾'; }
.forte-midi-pill[data-shift] { color: var(--accent); border-color: var(--accent); }
.forte-midi-pill[data-shift]::after { content: ' · ' attr(data-shift) ' ▾'; }
.forte-midi-pill:hover, .forte-midi-pill[aria-expanded="true"] { color: var(--text); border-color: var(--accent); }
.forte-midi-menu {
  position: fixed; z-index: 60; display: grid; grid-template-columns: auto auto; gap: 8px 12px; align-items: center;
  padding: 12px 14px; background: var(--card, #161b22); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.forte-midi-menu[hidden] { display: none; }
.forte-midi-menu label { display: contents; }
.forte-midi-menu label > span { color: var(--muted); }
.forte-midi-menu select { min-width: 0; }
/* Quality beside the CPU readout (shared/quality.js), in one pill: "Quality High" until the audio
   starts, then "CPU 12 % | High" (the peak and the voices in its tooltip) */
body[data-instrument] .forte-load {
  display: inline-flex; align-items: stretch; min-width: 0; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px; overflow: hidden;
}
body[data-instrument] .forte-load > :is(#cpu, #voices) { display: flex; align-items: center; border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 0 8px 0 10px; }
body[data-instrument] .forte-load:has(> .hot) { border-color: var(--warn); }
body[data-instrument] .forte-quality { display: inline-flex; align-items: center; gap: 2px; min-width: 0; cursor: pointer; color: var(--muted); padding: 0 2px 0 10px; }
body[data-instrument] .forte-quality select { color: var(--text); background: transparent; border: 0; border-radius: 999px; padding: 2px 6px; min-width: 0; }
body[data-instrument] #start.running ~ .forte-load .forte-quality { padding-left: 2px; }
body[data-instrument] #start.running ~ .forte-load .forte-quality > span { display: none; }
body:not(.perform) .forte-fullscreen { display: none; }

/* ---- the page: the views above the Controls panel, each headed by its bar, sharing the
   height (--split-rows); a panel folded away leaves its bar ---------------------------------- */
body[data-instrument] > main { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--split-rows, auto minmax(0, 0.6fr) auto minmax(0, 0.4fr)); }
body[data-instrument] > main > .forte-views-bar { grid-row: 1; }
body[data-instrument] #views { grid-row: 2; grid-column: 1; }
body[data-instrument] > main > .forte-controls-bar { grid-row: 3; }
body[data-instrument] #controls { grid-row: 4; grid-column: 1; border-right: 0; }
body[data-instrument].views-folded #views, body[data-instrument].controls-folded #controls { display: none; }
#controls > .forte-no-view { margin: 10px 0; }
#controls > .forte-no-view[hidden] { display: none; }
/* the controls side by side, as many columns as fit */
body[data-instrument] #groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); column-gap: 26px; align-items: start; }

/* the bars: the toggles (each turns a view or a group of controls on or off), the tools, and
   the button that folds the panel away */
.forte-bar {
  position: relative; display: flex; align-items: center; gap: 6px 12px; min-width: 0;
  padding: 7px 10px 7px 14px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.forte-controls-bar { border-top: 1px solid var(--line); }
.forte-toggles { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; }
.forte-toggles > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.forte-toggles-label { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
body[data-instrument] .forte-toggles button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 12px 3px 10px; border-radius: 999px; font-size: 12px; color: var(--muted);
  background: transparent; border: 1px solid var(--line);
}
.forte-toggles button::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid currentColor; opacity: 0.7;
}
body[data-instrument] .forte-toggles button:hover { color: var(--text); }
body[data-instrument] .forte-toggles button[aria-pressed="true"] { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.forte-toggles button[aria-pressed="true"]::before { background: var(--accent); border-color: var(--accent); opacity: 1; }
.forte-bar-tools { flex: none; display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
.forte-bar-tools:empty { display: none; }
/* the presets */
body[data-instrument] :is(.forte-bar, .forte-kbtools) .forte-presets { margin: 0; min-width: 0; }
body[data-instrument] :is(.forte-bar, .forte-kbtools) .forte-presets select { width: clamp(150px, 15vw, 240px); padding: 3px 8px; text-overflow: ellipsis; border-color: var(--accent); } /* outlined in the instrument's colour, to find it */
body[data-instrument] .forte-kbtools .forte-presets select { width: clamp(120px, 11vw, 200px); } /* in Perform, beside the keys' tools */
body[data-instrument] .forte-presets #reset { display: none; } /* "Default settings" in the menu presses it */
/* fold: a chevron that points the way the panel goes */
body[data-instrument] .forte-fold {
  flex: none; display: grid; place-items: center; width: 30px; height: 28px; min-height: 0; padding: 0;
  border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--muted);
}
body[data-instrument] .forte-fold:hover { color: var(--text); }
.forte-fold svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.forte-views-bar .forte-fold[aria-expanded="true"] svg, .forte-controls-bar .forte-fold[aria-expanded="false"] svg,
.forte-controls-bar.below .forte-fold svg { transform: rotate(180deg); } /* on a phone, the controls out of sight below: up they come */
/* a group's toggle stands in for folding it */
#controls details.group[hidden] { display: none; }
#controls details.group[data-key] > summary { cursor: default; }
#controls details.group[data-key] > summary::after { content: none; }
/* the handle on the controls' bar's top edge shares the height; so does the bar itself, where
   it has nothing to tap */
.forte-split {
  position: absolute; z-index: 6; top: -9px; left: 50%; transform: translateX(-50%);
  width: 72px; height: 18px; cursor: row-resize; touch-action: none; outline: none;
}
.forte-split::before { content: ""; display: block; width: 44px; height: 5px; margin: 6px auto 0; border-radius: 3px; background: color-mix(in srgb, var(--muted) 55%, transparent); }
.forte-split:hover::before, .forte-split:focus-visible::before, body.sharing .forte-split::before { background: var(--accent); }
.forte-split:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
body:not(.perform) .forte-controls-bar:has(> .forte-split) { cursor: row-resize; touch-action: none; }
.forte-controls-bar :is(button, select) { cursor: pointer; }
body.sharing, body.sharing * { cursor: row-resize !important; user-select: none; -webkit-user-select: none; }
/* in Perform the views' bar is just the mode, over the views' corner, and the controls' just the
   presets and the chevron that opens the panel (More controls) */
body.perform .forte-split, body.perform .forte-views-bar .forte-fold { display: none; }
body.perform .forte-views-bar { position: absolute; z-index: 5; top: 8px; right: 10px; padding: 0; background: none; border: 0; }
body.perform .forte-views-bar .forte-mode { background: color-mix(in srgb, var(--bg) 82%, transparent); }
body.perform .forte-controls-bar { padding-block: 5px; }

/* ---- views: the views turned on, in rows (shared/layout.js sets each card's span of the
   twelve columns, and --rows) ------------------------------------------------------------ */
body[data-instrument] #views { display: flex; flex-direction: column; gap: 10px; }
.forte-stage {
  flex: 1 1 0; display: grid; gap: 12px; min-height: 0;
  grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 1), minmax(220px, 1fr));
}
body.perform .forte-stage { grid-template-rows: repeat(var(--rows, 1), minmax(0, 1fr)); }
.forte-stage > .card { min-height: 0; overflow: auto; }
#views .forte-stage > .card[hidden], .forte-no-view[hidden] { display: none; }
.forte-no-view { grid-column: 1 / -1; align-self: start; margin: 4px 2px; color: var(--muted); font-size: 12.5px; }
/* a view's caption waits behind ⓘ in its title */
#views .card.has-notes:not(.notes-open) .caption { display: none; }
#views .card.notes-open .caption { animation: forte-reveal 0.18s ease-out; }
body[data-instrument] .card-head h2 .forte-info { margin-left: 7px; vertical-align: 1px; }
@keyframes forte-reveal { from { opacity: 0; transform: translateY(-4px); } }

/* ---- a control surface (the organ's drawbars) comes first among the groups, two columns wide ---- */
body[data-instrument] #controls .forte-surface { margin: 0 0 12px; grid-column: span 2; }
@media (max-width: 600px) { body[data-instrument] #controls .forte-surface { grid-column: 1 / -1; } }
#controls .forte-surface[hidden] { display: none; }
details.group:not(:has(.param)) { display: none; } /* every control in it is in the strip */

/* ---- the strip: the few small controls you play with, in the keyboard bar: a label, the
   slider and its value on one line; a checkbox is a stop that lights up when on ---------- */
.forte-perform { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; }
.forte-perform:empty { display: none; }
.forte-perform .param {
  flex: 0 1 auto; display: flex; align-items: center; gap: 7px; min-width: 0; height: 32px; margin: 0; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.03); font-size: 12px;
}
.forte-perform .param[hidden] { display: none; }
.forte-perform .param .hint { display: none; }
.forte-perform .param :is(.row, .forte-param-head) { display: contents; }
.forte-perform .param label { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.forte-perform .param input[type=range] { order: 1; flex: 0 1 auto; width: clamp(70px, 8vw, 120px); min-width: 50px; margin: 0; }
.forte-perform .param .val { order: 2; flex: none; min-width: 3.5em; font-size: 11.5px; text-align: right; }
.forte-perform .param select { order: 1; width: auto; margin: 0; padding: 2px 6px; }
.forte-perform .forte-info { order: -1; }
.forte-perform .param.check { cursor: pointer; flex-wrap: nowrap; } /* never its name under its box */
.forte-perform .param.check > label { cursor: pointer; }
.forte-perform .param.check:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.forte-perform .param.check:has(input:checked) > label { color: var(--text); }
/* a few short choices: a row of buttons instead of a dropdown */
.forte-perform .forte-seg { order: 1; }
.forte-seg { display: flex; gap: 2px; padding: 2px; border-radius: 7px; background: rgba(0, 0, 0, 0.28); }
body[data-instrument] .forte-seg button {
  flex: 1 1 auto; min-height: 0; padding: 2px 9px; border: 0; border-radius: 5px; background: transparent;
  color: var(--muted); font-size: 12px; white-space: nowrap;
}
body[data-instrument] .forte-seg button:hover { color: var(--text); }
body[data-instrument] .forte-seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink, #111); font-weight: 600; }

/* the Scala file button under Temperament (shared/tuning-ui.js), as wide as the dropdown above it */
body[data-instrument] .param.scala button { width: 100%; }

/* ⓘ: a hint above the keys opens in a bubble; in the Controls panel it slides open */
body[data-instrument] .forte-info {
  position: relative; flex: none; display: inline-grid; place-items: center;
  width: 17px; height: 17px; min-height: 0; padding: 0; margin: 0;
  border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: var(--muted);
  font: italic 700 10.5px/1 Georgia, "Iowan Old Style", serif; cursor: pointer;
}
body[data-instrument] .forte-info::after { content: ""; position: absolute; inset: -9px; } /* a finger-sized target */
body[data-instrument] .forte-info:hover, body[data-instrument] .forte-info[aria-expanded="true"] { color: var(--accent); }
#controls .param .row .forte-info { margin-right: auto; } /* next to its label */
/* the octaves' names on the white keys, dark enough to read (they were 2.9 : 1, now about 5 : 1) */
body[data-instrument] .wk .c-label { color: #5f5c55; font-size: 10px; }
/* a long readout ("2.50 mm at C4 → 2.00 mm at C8") wraps in its share of the row, short ones never;
   unwrapped it ran into the next column */
#controls .param:not([data-face]) .row > .val { flex: none; max-width: 62%; white-space: normal; text-align: right; }
.forte-param-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
#controls .param:not(.hint-open) > .hint { display: none; }
#controls .param.hint-open > .hint { animation: forte-reveal 0.18s ease-out; }
.forte-hint-pop {
  position: fixed; z-index: 60; max-width: min(340px, calc(100vw - 16px)); padding: 9px 12px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55); font-size: 12.5px; line-height: 1.45;
}
.forte-hint-pop b { display: block; margin-bottom: 3px; color: var(--accent); font-weight: 600; }

/* ---- faces (shared/faces.js): a control drawn as the instrument has it. The checkbox, range or
   dropdown stays, out of sight but in the tab order; the face is its label (or the knob) ---------- */
body[data-instrument] { --engrave: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", system-ui, sans-serif; } /* faces' engraved legends */
body[data-instrument] .param[data-face] { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 5px; vertical-align: top; margin: 4px 12px 14px 0; }
body[data-instrument] .param[data-face][hidden] { display: none; }
body[data-instrument] .param[data-face] > :is(input[type=checkbox], input[type=range], select) { position: absolute; left: 50%; top: 0; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
body[data-instrument] .param[data-face] .hint { flex-basis: auto; max-width: 180px; text-align: left; }
body[data-instrument] .param[data-face]:has(> :is(input, select):focus-visible) :is(> label, .forte-knob, .forte-selector-knob, .forte-rockers) { outline: 2px solid var(--accent); outline-offset: 3px; }
body[data-instrument] .param[data-face]:not([data-face=lever]) .forte-info { position: absolute; top: -4px; right: -6px; z-index: 1; background: var(--panel, #16161a); }
body[data-instrument] .param[data-face] > label { cursor: pointer; user-select: none; -webkit-user-select: none; }
body[data-instrument] .param:is([data-face=selector], [data-face=rockers]) :is(.forte-param-head, > label) { font-size: 12px; text-align: center; }

/* a drawknob: an ivory face in a dark rim, its stop's name in script; drawn, it stands out and lights */
body[data-instrument] .param[data-face=drawknob] > label {
  box-sizing: border-box; width: 72px; height: 72px; padding: 9px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  font: italic 600 11.5px/1.12 Georgia, "Iowan Old Style", "Times New Roman", serif; color: #2a1f15;
  background: radial-gradient(circle at 36% 30%, #fffbf2, #ece2cc 55%, #cbbb98);
  border: 5px solid #3a2818; box-shadow: 0 0 0 1px #120c07, 0 2px 3px rgba(0, 0, 0, 0.6);
  transition: transform 0.12s, box-shadow 0.12s;
}
body[data-instrument] .param[data-face=drawknob]:has(> input:checked) > label {
  transform: translateY(-3px) scale(1.07);
  box-shadow: 0 0 0 1px #120c07, 0 9px 10px rgba(0, 0, 0, 0.7), 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* a harpsichord's hand stop: a brass knob in a slot, slid across to bring the row on */
body[data-instrument] .param[data-face=lever] { display: flex; flex-direction: row; align-items: center; margin: 0 0 9px; }
body[data-instrument] .param[data-face=lever] > label { position: relative; display: flex; align-items: center; gap: 12px; }
body[data-instrument] .param[data-face=lever] > label::before { content: ""; flex: none; width: 56px; height: 12px; border-radius: 6px; background: linear-gradient(#0c0906, #2b2117); box-shadow: inset 0 1px 3px #000, 0 1px 0 rgba(255, 255, 255, 0.06); }
body[data-instrument] .param[data-face=lever] > label::after {
  content: ""; position: absolute; left: -2px; top: 50%; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff2bd, #d4a63e 50%, #7c5a1c); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.7);
  transform: translateY(-50%); transition: transform 0.15s;
}
body[data-instrument] .param[data-face=lever]:has(> input:checked) > label::after { transform: translate(36px, -50%); }
body[data-instrument] .param[data-face=lever]:has(> input:checked) > label { color: var(--text); }

/* a Clavinet's rocker tab: pressed at the top when on, its legend lit; a bank of them is a selector */
body[data-instrument] .param[data-face=tab] { margin-right: 5px; }
body[data-instrument] .param[data-face=tab] > label, .forte-rockers > span {
  box-sizing: border-box; width: 58px; height: 46px; padding: 0 2px 6px; border-radius: 4px; display: flex; align-items: flex-end; justify-content: center; text-align: center;
  font: 700 10px/1.1 system-ui, sans-serif; letter-spacing: 0.5px; text-transform: uppercase; color: #cfc8bd;
  background: linear-gradient(#45403b, #2c2825 48%, #1d1a18 52%, #26221f); border: 1px solid #000; box-shadow: 0 3px 0 #000, 0 4px 5px rgba(0, 0, 0, 0.5);
  transition: transform 0.1s, box-shadow 0.1s;
}
body[data-instrument] .param[data-face=tab]:has(> input:checked) > label, .forte-rockers > span.on {
  color: var(--accent); background: linear-gradient(#1d1a18, #26221f 48%, #3b3632 52%, #4a443f);
  transform: translateY(2px); box-shadow: 0 1px 0 #000, 0 2px 3px rgba(0, 0, 0, 0.5);
}
.forte-rockers { display: flex; gap: 5px; margin-bottom: 4px; }
.forte-rockers > span { width: 48px; cursor: pointer; user-select: none; -webkit-user-select: none; }

/* an apparatus's switch: a bat handle in a hex nut, ON and OFF engraved, a pilot lamp that lights */
body[data-instrument] .param[data-face=toggle] > label { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; text-align: center; max-width: 96px; }
.forte-toggle { position: relative; width: 60px; height: 84px; flex: none; }
.forte-toggle :is(.on-l, .off-l) { position: absolute; left: 0; right: 0; text-align: center; font: 600 10.5px/1 var(--engrave); letter-spacing: 1px; color: #7b7b86; }
.forte-toggle .on-l { top: 0; }
.forte-toggle .off-l { bottom: 0; color: var(--text); }
.forte-toggle .nut { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; background: linear-gradient(140deg, #d9dbe0, #8c8f96 50%, #5b5e64); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.forte-toggle .nut::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f3f4f6, #8d9097 60%, #4a4c51); }
.forte-toggle .bat {
  position: absolute; left: 50%; top: 50%; width: 10px; height: 28px; margin: -28px 0 0 -5px; border-radius: 5px 5px 3px 3px; transform-origin: 50% 100%; transform: scaleY(-1);
  background: linear-gradient(90deg, #7e828a, #f4f5f7 40%, #a8acb3 70%, #6a6e75); box-shadow: 0 0 0 0.5px #333; transition: transform 0.16s cubic-bezier(0.5, 1.6, 0.5, 1);
}
.forte-toggle .bat::before { content: ""; position: absolute; left: -2px; right: -2px; top: -2px; height: 10px; border-radius: 6px; background: radial-gradient(circle at 40% 35%, #fff, #b6b9c0 60%, #7a7e85); }
.forte-toggle .lamp { position: absolute; right: -1px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a3a3f, #1a1a1d); box-shadow: 0 0 0 1.5px #2c2c32; }
body[data-instrument] .param[data-face=toggle]:has(> input:checked) .forte-toggle .bat { transform: scaleY(1); }
body[data-instrument] .param[data-face=toggle]:has(> input:checked) .forte-toggle .on-l { color: var(--text); }
body[data-instrument] .param[data-face=toggle]:has(> input:checked) .forte-toggle .off-l { color: #7b7b86; }
body[data-instrument] .param[data-face=toggle]:has(> input:checked) .forte-toggle .lamp { background: radial-gradient(circle at 40% 35%, #fff, var(--accent) 55%); box-shadow: 0 0 0 1.5px #2c2c32, 0 0 10px var(--accent); }

/* a rotary selector: a pointer knob that clicks between engraved positions */
.forte-selector { position: relative; width: 156px; height: 104px; flex: none; user-select: none; -webkit-user-select: none; }
.forte-selector > i { position: absolute; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #55555e; pointer-events: none; }
.forte-selector > i.on { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.forte-selector-legend { position: absolute; transform: translate(-50%, -50%); padding: 2px 3px; cursor: pointer; white-space: nowrap; font: 600 11.5px/1 var(--engrave); letter-spacing: 0.4px; color: #8d8d98; }
.forte-selector-legend:hover { color: var(--text); }
.forte-selector-legend.on { color: var(--accent); }
.forte-selector-knob {
  --turn: 0deg; position: absolute; left: 78px; top: 62px; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; cursor: grab; touch-action: none;
  background: radial-gradient(circle at 38% 30%, #4a4a4a, #161616 65%, #090909); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  transform: rotate(var(--turn)); transition: transform 0.14s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.forte-selector-knob::before { /* the pointer, a "chicken head" */
  content: ""; position: absolute; left: 50%; top: -8px; width: 18px; height: 40px; margin-left: -9px;
  background: linear-gradient(90deg, #0b0b0b, #3b3b3b 45%, #1c1c1c); clip-path: polygon(50% 0, 100% 32%, 82% 100%, 18% 100%, 0 32%);
}
.forte-selector-knob::after { content: ""; position: absolute; left: 50%; top: -5px; width: 2.5px; height: 18px; margin-left: -1.25px; border-radius: 2px; background: #f3eee6; }

/* an amp's knob: a black cap with a white line, in a ring that fills with the value */
body[data-instrument] .param:is([data-face=knob], [data-face=dial]) { width: 78px; gap: 2px; margin-right: 8px; }
body[data-instrument] .param:is([data-face=knob], [data-face=dial]) .row { flex-direction: column; align-items: center; gap: 0; text-align: center; }
body[data-instrument] .param:is([data-face=knob], [data-face=dial]) .row label { font-size: 12px; }
body[data-instrument] .param[data-face=knob] .val { font-size: 11px; }
.forte-knob { --turn: 0deg; --a0: 0deg; --a1: 0deg; position: relative; flex: none; width: 56px; height: 56px; border-radius: 50%; cursor: ns-resize; touch-action: none; }
.forte-knob::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from -135deg, transparent 0 var(--a0), var(--accent) 0 var(--a1), transparent 0),
    conic-gradient(from -135deg, rgba(255, 255, 255, 0.13) 0 270deg, transparent 0);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}
.forte-knob-cap {
  position: absolute; inset: 8px; z-index: 1; border-radius: 50%; transform: rotate(var(--turn));
  background: radial-gradient(circle at 38% 30%, #575757, #1b1b1b 62%, #0d0d0d); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.18);
}
.forte-knob-mark { position: absolute; left: 50%; top: 3px; width: 3px; height: 12px; margin-left: -1.5px; border-radius: 2px; background: #f3eee6; }

/* a lab dial: a knurled knob over a printed scale whose ticks light to the value, the value in a
   readout under it */
body[data-instrument] .param[data-face=dial] { width: 104px; }
body[data-instrument] .param[data-face=dial] .row { flex-direction: column-reverse; gap: 4px; }
body[data-instrument] .param[data-face=dial] .val {
  min-width: 80px; padding: 3px 7px; border-radius: 4px; background: #07080a; box-shadow: inset 0 1px 4px #000, 0 0 0 1px #24242b;
  font: 500 11.5px/1.25 ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 45%, transparent);
}
.forte-dial { width: 84px; height: 84px; }
.forte-dial::before { display: none; }
.forte-dial svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.forte-dial line { stroke: #5c5c66; stroke-width: 1.4; }
.forte-dial line.major { stroke: #a9a9b3; stroke-width: 2; }
.forte-dial line.lit { stroke: var(--accent); }
.forte-dial .forte-knob-cap {
  inset: 15px; background: radial-gradient(circle, #2b2b2f 0 56%, transparent 57%), repeating-conic-gradient(#3a3a40 0 6deg, #121214 6deg 12deg);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.85), 0 0 0 1px #000;
}
.forte-dial .forte-knob-cap::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: radial-gradient(circle at 40% 32%, #6a6a72, #2a2a2f 60%, #1c1c20); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2); }
.forte-dial .forte-knob-mark { z-index: 1; top: 2px; height: 15px; background: var(--accent); box-shadow: 0 0 4px color-mix(in srgb, var(--accent) 60%, transparent); }

/* ---- every other slider is a fader: a cap in a slot, lit from its left end to the cap (--fill,
   shared/faces.js), over a scale of tenths; every other checkbox a button whose lamp lights ---- */
body[data-instrument] input[type=range] {
  --fill: 0%; -webkit-appearance: none; appearance: none; height: 24px; margin: 3px 0 0; padding: 0; cursor: pointer;
  background: linear-gradient(90deg, #4a4a53 1px, transparent 1px) 7px 100% / calc((100% - 15px) / 10) 4px repeat-x;
}
body[data-instrument] input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255, 255, 255, 0.06);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 80%, #000) 0 var(--fill), #08080a var(--fill));
}
body[data-instrument] input[type=range]::-moz-range-track {
  height: 6px; border-radius: 3px; box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255, 255, 255, 0.06);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 80%, #000) 0 var(--fill), #08080a var(--fill));
}
body[data-instrument] input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 22px; margin-top: -8px; border-radius: 3px; border: 1px solid #000;
  background: linear-gradient(90deg, #3a3a40, #8a8a92 20%, #3a3a40 22%, #2a2a2f 46%, #f3eee6 46% 54%, #2a2a2f 54%, #3a3a40 78%, #8a8a92 80%, #3a3a40);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.8);
}
body[data-instrument] input[type=range]::-moz-range-thumb {
  box-sizing: border-box; width: 14px; height: 22px; border-radius: 3px; border: 1px solid #000;
  background: linear-gradient(90deg, #3a3a40, #8a8a92 20%, #3a3a40 22%, #2a2a2f 46%, #f3eee6 46% 54%, #2a2a2f 54%, #3a3a40 78%, #8a8a92 80%, #3a3a40);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.8);
}
body[data-instrument] input[type=range]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
body[data-instrument] #controls .param:not([data-face]) > input[type=checkbox] {
  -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 26px; height: 18px; margin: 0 2px 2px 0; cursor: pointer;
  border-radius: 4px; border: 1px solid #000; background: linear-gradient(#34343a, #1e1e22); box-shadow: 0 2px 0 #000;
}
body[data-instrument] #controls .param:not([data-face]) > input[type=checkbox]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #3b3530; }
body[data-instrument] #controls .param:not([data-face]) > input[type=checkbox]:checked { transform: translateY(1px); box-shadow: 0 1px 0 #000; }
body[data-instrument] #controls .param:not([data-face]) > input[type=checkbox]:checked::after { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
body[data-instrument] #controls .param:not([data-face]) > input[type=checkbox]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* a pedal above the keys (the Sustain or Hold button, a checkbox marked `pedal`): a brass pedal that
   goes down */
.forte-pedal-glyph { flex: none; width: 18px; height: 22px; transition: transform 0.1s; }
.forte-pedal-glyph path { fill: url(#forte-brass); }
:is(.forte-pedal.on, .forte-perform .param[data-pedal]:has(input:checked)) .forte-pedal-glyph { transform: translateY(2px) scaleY(0.8); }
:is(.forte-pedal.on, .forte-perform .param[data-pedal]:has(input:checked)) .forte-pedal-glyph path { fill: url(#forte-brass-down); }
.forte-pedal { display: inline-flex; align-items: center; gap: 6px; }
.forte-perform .param[data-pedal] > input[type=checkbox] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.forte-perform .param[data-pedal] { position: relative; }
.forte-perform .param[data-pedal] > label { display: inline-flex; align-items: center; gap: 6px; }
/* its twin in the Controls panel (layout.js placePedal): the name, then the pedal and Latch */
.forte-pedal-pair { display: flex; gap: 6px; margin-top: 6px; }
body[data-instrument] .forte-pedal-pair button { padding: 4px 12px; white-space: nowrap; touch-action: none; }

/* ---- the keyboard bar and the keys --------------------------------------------- */
body[data-instrument] .kb-help { display: block; position: relative; margin: 0 0 7px; }
.forte-kbbar { display: flex; align-items: center; gap: 6px; }
/* where the strip doesn't fit beside the rest, it takes a line of its own above it (layout.js
   measures the bar with nothing shrunk and the overview at 140px: .measure) */
.forte-kbbar.stacked { flex-wrap: wrap; row-gap: 0; }
.forte-kbbar.stacked > .forte-perform { order: -2; flex: 1 1 auto; flex-wrap: wrap; } /* in Perform the presets wrap below it before it wraps */
.forte-kbbar.stacked > .forte-kbtools { order: -2; margin-left: auto; }
.forte-kbbar.stacked > :is(.forte-perform, .forte-kbtools) { margin-bottom: 7px; }
.forte-kbbar.stacked::after { content: ""; order: -1; flex: 0 0 100%; } /* the end of their line (or lines) */
.forte-kbbar.measure > *, .forte-kbbar.measure > .forte-perform > * { flex-shrink: 0; }
.forte-kbbar.measure > .forte-kbmap { flex: 0 0 140px; }
.forte-kbbar.tight > .forte-kbstep { display: none; } /* a phone held sideways, short of room: the overview alone */
body[data-instrument] .forte-kbbar button { padding: 3px 9px; white-space: nowrap; }
body[data-instrument] .forte-kbbar .forte-info { padding: 0; } /* a circle, not a button's padding */
.forte-kbbar button:disabled { opacity: 0.35; cursor: default; }
/* the overview: the whole range, with the keys on screen framed */
.forte-kbmap { flex: 1 1 0; min-width: 70px; max-width: 720px; height: 26px; border-radius: 5px; overflow: hidden; cursor: grab; touch-action: none; outline: none; }
.forte-kbmap:active { cursor: grabbing; }
.forte-kbmap:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.forte-kbmap canvas { display: block; width: 100%; height: 100%; min-height: 0; }
.forte-kbbar.all-keys > :is(.forte-kbmap, .forte-kbstep) { display: none; } /* every key fits */
.forte-kbsize { display: flex; gap: 2px; }
.forte-kbbar > .forte-perform { margin-left: auto; } /* the strip and the pedal to the right */
.forte-kbbar:not(:has(> .forte-perform:not(:empty))) > .forte-pedal { margin-left: auto; } /* no strip: the pedal on its own */
/* in Perform, the presets and More controls (layout.js placeTools), and no controls' bar */
.forte-kbtools { display: flex; align-items: center; gap: 6px; flex: none; }
.forte-kbtools:empty { display: none; }
.forte-kbtools .forte-fold[aria-expanded="false"] svg { transform: rotate(180deg); } /* the panel opens above */
body.tools-below .forte-controls-bar { display: none; }
body[data-instrument] .forte-kbsize button { width: 32px; padding: 3px 0; font-weight: 600; }
.forte-pedal { min-width: 84px; }
.forte-pedal.on, .forte-latch.on { background: var(--accent); color: var(--accent-ink, #111); border-color: transparent; }
/* ⌨: the page's hints for the computer keyboard and MIDI, and their readouts */
body[data-instrument] .forte-keys { font-size: 15px; padding: 1px 8px; }
.forte-keys-pop {
  position: absolute; z-index: 40; bottom: calc(100% + 8px); left: 0;
  display: flex; flex-direction: column; gap: 6px; max-width: min(560px, calc(100vw - 24px));
  padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55); color: var(--muted);
}
.forte-keys-pop[hidden] { display: none; }

body[data-instrument] #keyboard {
  height: var(--kb-h, 115px);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
body.kb-s { --kb-h: 80px; }
body.kb-m { --kb-h: 115px; }
body.kb-l { --kb-h: 165px; }
body.kb-xl { --kb-h: 230px; }
#keyboard .wk, #keyboard .bk { touch-action: none; }

/* ---- Perform: the views turned on fill the space, with no toggles and no text in
   them: no titles, readouts, tools, captions, legends or tables (shared/layout.js
   also stops their canvases drawing text). */
body.perform .brand .sub,
body.perform .forte-about,
body.perform .forte-info,
body.perform #midi,
body.perform #midi-menu,
body.perform #cpu:not(.hot),
body.perform .forte-load:not(:has(.hot)),
body.perform .forte-toggles,
body.perform .forte-no-view,
body.perform #views .card:not([data-keep-text]) :is(.card-head, .caption, .legend, .readout, .tabs, dl, table) { display: none; }
body.perform #views .card { background: transparent; border-color: transparent; padding: 4px; }
:root.perform { --card: var(--bg); } /* views draw label backdrops in the card's colour: they vanish too */
body.perform #views .card:not([data-keep-text]) canvas { flex: 1 1 0; height: auto; min-height: 0; }

/* tablets and narrow windows: a view's pictures shrink to its share of the height (the pages ask
   for 230px at least on a narrow screen, as on a phone, where the page scrolls) */
@media (min-width: 601px) and (max-width: 1050px) and (min-height: 501px) {
  body[data-instrument] .forte-stage canvas { min-height: 0; }
}

/* touch screens: bigger targets, no computer-keyboard hints */
@media (pointer: coarse) {
  body[data-instrument] input[type=range] { height: 32px; }
  body[data-instrument] button, body[data-instrument] select { min-height: 36px; touch-action: manipulation; }
  body[data-instrument] .forte-kbbar button { min-height: 44px; } /* the pedal, Latch, ◀ ▶, − +: hit mid-phrase */
  .forte-perform .param { height: 44px; }
  body[data-instrument] .forte-perform .forte-seg button { min-height: 34px; }
  body[data-instrument] .forte-kbbar .forte-info { min-height: 0; }
  .forte-kbmap { height: 34px; }
}
@media (any-hover: none) {
  body[data-instrument] .forte-keys, body[data-instrument] #keyboard .k-label { display: none; }
  .forte-perform .param.keys-only { display: none; } /* velocity for the computer keys (↑ ↓ still set it) */
  body[data-instrument] #keyboard .wk.mapped::before { display: none; }
}

/* every browser on iPhone and iPad lacks Web MIDI: no MIDI button or status */
body.no-midi :is(#midi-btn, #midi, #midi-menu) { display: none; }

/* toasts: announced, never in the way of the keys */
body[data-instrument] #toast { pointer-events: none; bottom: calc(var(--footer-h, calc(var(--kb-h, 115px) + 52px)) + 12px); max-width: min(90vw, 560px); }

/* ---- phones (portrait, or landscape under 500px tall): no room to share, so the page
   scrolls (and Safari can tuck its toolbars away) under the header, which sticks to the top:
   the views' bar scrolls away with the views, the controls follow them, and the controls' bar
   sticks just above the keys, which stick to the bottom, until it heads the controls (below the
   header) as they scroll by. In Perform, More
   controls takes the place of the views. The menus open below the header, inside the screen. */
@media (max-width: 600px), (max-width: 1050px) and (max-height: 500px) {
  html:has(> body[data-instrument]) { overscroll-behavior-y: none; } /* no pull-to-refresh mid-phrase */
  body[data-instrument] { height: auto; min-height: 100vh; min-height: 100svh; overflow: visible; }
  body[data-instrument], body.no-views > main { grid-template-columns: minmax(0, 1fr); } /* never wider than the screen */
  body[data-instrument] > main,
  body[data-instrument] #views,
  body[data-instrument] #controls { overflow: visible; }
  body[data-instrument] > main { padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); }
  body[data-instrument] #views { padding: 10px; }
  body[data-instrument] > main { grid-template-rows: none; grid-auto-rows: auto; }
  body[data-instrument] .forte-stage { flex: none; grid-template-rows: none; grid-auto-rows: max-content; }
  body[data-instrument] #views .card { overflow-x: auto; } /* wide tables scroll inside their card */
  /* the bars: the toggles slide sideways when they don't fit */
  .forte-bar { gap: 8px; padding: 6px 8px 6px 0; }
  .forte-bar-tools { gap: 6px; }
  body[data-instrument] .forte-toggles > div {
    flex: 1 1 100%; flex-wrap: nowrap; gap: 5px; overflow-x: auto; overscroll-behavior-x: contain;
    padding: 0 18px 0 10px; scrollbar-width: none;
  }
  .forte-toggles > div::-webkit-scrollbar { display: none; }
  /* fading under the tools, so the toggles read as going on */
  .forte-toggles > div { -webkit-mask-image: linear-gradient(to left, transparent, #000 18px); mask-image: linear-gradient(to left, transparent, #000 18px); }
  body.perform .forte-views-bar { position: static; padding: 6px 10px; background: var(--panel); border-bottom: 1px solid var(--line); }
  body[data-instrument] .forte-toggles button { flex: none; }
  .forte-toggles-label { display: none; } /* the bar's place says it */
  body[data-instrument] .forte-toggles button { min-height: 30px; padding-block: 2px; }
  body[data-instrument] :is(.forte-bar, .forte-kbtools) .forte-presets select { width: clamp(118px, 34vw, 200px); min-height: 32px; padding-block: 2px; }
  body[data-instrument] .forte-mode button { min-height: 30px; }
  body[data-instrument] .forte-fold { width: 32px; height: 32px; }
  .forte-split { display: none; }
  body[data-instrument] .forte-controls-bar { position: sticky; z-index: 15; top: var(--header-h, 0px); bottom: var(--footer-h, 0px); cursor: auto; touch-action: auto; }

  body[data-instrument] > header {
    position: sticky; top: 0; z-index: 25; gap: 6px 10px;
    padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left));
  }
  body[data-instrument] .brand { flex: 1 1 8rem; gap: 6px; }
  body[data-instrument] .brand h1 { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  body[data-instrument] > header .status { gap: 6px; margin-left: auto; }
  body[data-instrument] > header button { white-space: nowrap; }
  body[data-instrument] .pill { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* one row: the CPU readout gives way (its text ends in …) before the row wraps */
  body[data-instrument] > header .status { flex-wrap: nowrap; min-width: 0; }
  body[data-instrument] .forte-switch { position: static; }
  body[data-instrument] .forte-menu { top: calc(100% + 4px); max-height: 70vh; max-height: 70svh; overflow: auto; }
  body[data-instrument] .forte-menu { left: max(8px, env(safe-area-inset-left)); width: min(400px, calc(100vw - 16px)); }
  body[data-instrument] .forte-fullscreen { display: none; }

  body[data-instrument] > footer {
    position: sticky; bottom: 0; z-index: 20;
    padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  /* Perform: each view fills the room above the keys (the page scrolls between them) */
  body.perform:not(.no-views) #views .card { height: max(140px, calc(100svh - var(--header-h, 44px) - var(--footer-h, 320px) - var(--bar-h, 46px) - 20px)); }
  .forte-perform .param { flex: 1 1 auto; padding: 0 8px; }
  .forte-perform .param input[type=range] { flex: 1 1 auto; height: 26px; }
  .forte-pedal { min-width: 0; }
  body[data-instrument] .forte-kbsize button { width: 30px; }
  body[data-instrument] #keyboard { height: min(var(--kb-h, 115px), 38vh); height: min(var(--kb-h, 115px), 38svh); }
}
/* phones in landscape: the strip shares the keyboard bar's line, however tight (layout.js
   never stacks it), so the views keep some height; the overview shrinks to a thumbnail */
@media (max-width: 1050px) and (max-height: 500px) {
  .forte-kbbar > .forte-perform { flex: 1 1 auto; }
  .forte-perform .param { height: 40px; }
  .forte-kbbar:has(> .forte-perform:not(:empty)) .forte-kbmap { flex: 0 1 72px; min-width: 0; }
  body[data-instrument] #keyboard { height: min(var(--kb-h, 115px), 24svh); } /* a third shorter than 36svh, for the views */
  /* the controls' bar heads the controls and scrolls with them: the views keep the room */
  body[data-instrument] .forte-controls-bar { position: relative; }
  body.perform:not(.no-views) #views .card { height: max(140px, calc(100svh - var(--header-h, 40px) - var(--footer-h, 200px) - 20px)); }
  /* one row: the name keeps its width and the CPU readout gives way */
  body[data-instrument] .brand { flex: 0 0.1 auto; }
  body[data-instrument] > header .status { flex: 0 1 auto; }
  /* every row above the keys is height the views lose: a slimmer header and keyboard bar, and in
     Perform, Discover | Perform floating over the views as on a desktop */
  body[data-instrument] > header { padding-block: max(4px, env(safe-area-inset-top)) 4px; }
  body[data-instrument] > header :is(button, select, summary) { min-height: 32px; }
  body[data-instrument] .forte-kbbar button { min-height: 36px; }
  body[data-instrument] > footer { padding-block: 5px max(5px, env(safe-area-inset-bottom)); }
  .forte-bar { padding-block: 3px; }
  body.perform .forte-views-bar { position: absolute; z-index: 5; top: 6px; right: max(8px, env(safe-area-inset-right)); padding: 0; background: none; border: 0; }
  body[data-instrument] .forte-kbtools .forte-presets select { width: 104px; } /* in Perform, on the keyboard bar's one line */
}
/* 16px text in dropdowns on phones, or iOS zooms the page in when one is tapped */
@media (pointer: coarse) and (max-width: 600px), (pointer: coarse) and (max-width: 1050px) and (max-height: 500px) {
  body[data-instrument] select { font-size: 16px; }
}

/* a guided tour of the physics (shared/tour.js): Tour in the header, and its card over the
   controls, just above the keys (on a phone, above the controls' bar; held sideways, beside the views) */
/* Tour sits in the header with How it works (shared/forte.css .forte-about), and keeps its word
   where How it works shrinks to its icon: ▶ alone would read as play */
body > header .forte-tour-start .forte-about-label { display: inline; }
body > header .forte-tour-start { width: auto; border-radius: 999px; padding: 4px 10px 4px 5px; }
.forte-tour-glyph { font: 700 7px/1 system-ui, sans-serif; padding-left: 1px; }
body > header .forte-tour-start[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink, #111); border-color: var(--accent); }
/* where How it works is just its icon, Tour is just its word: the header stays one row on a
   tablet held upright, even beside the longest names */
@media (max-width: 1249px) {
  body > header .forte-tour-start { padding: 4px 9px; }
  body > header .forte-tour-start .forte-tour-glyph { display: none; }
}
@media (min-width: 601px) and (max-width: 1249px) { body[data-instrument] .brand { gap: 8px; } }
.forte-tour {
  position: fixed; z-index: 30; right: 16px; bottom: calc(var(--footer-h, 170px) + 12px);
  width: min(470px, calc(100vw - 32px)); max-height: calc(100vh - var(--header-h, 50px) - var(--footer-h, 170px) - 36px);
  display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 12px;
  border: 1px solid var(--accent); border-radius: 12px; background: color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6); color: var(--text);
}
.forte-tour[hidden] { display: none; }
.forte-tour-head { display: flex; align-items: center; gap: 6px; }
.forte-tour-kicker { flex: 1 1 auto; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
body[data-instrument] .forte-tour :is(.forte-tour-fold, .forte-tour-close) {
  flex: none; display: grid; place-items: center; width: 28px; height: 26px; min-height: 0; padding: 0;
  border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--muted);
}
.forte-tour-fold svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.forte-tour.folded .forte-tour-fold svg { transform: rotate(180deg); }
.forte-tour-title { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.25; }
.forte-tour-text { min-height: 0; overflow-y: auto; overscroll-behavior: contain; font-size: 13.5px; line-height: 1.5; color: color-mix(in srgb, var(--text) 88%, var(--muted)); }
.forte-tour-text p { margin: 0 0 0.6em; }
.forte-tour-text :is(ul, ol) { margin: 0 0 0.6em; padding-left: 1.3em; }
.forte-tour-text pre { margin: 0 0 0.6em; white-space: pre-wrap; color: var(--text); }
.forte-tour-text a { color: var(--accent-2); }
.forte-tour.folded :is(.forte-tour-text) { display: none; }
.forte-tour.folded .forte-tour-title { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.forte-tour-nav { display: flex; gap: 8px; }
body[data-instrument] .forte-tour-nav button { flex: 1 1 0; min-width: 0; padding: 4px 8px; border-radius: 8px; white-space: nowrap; }
body[data-instrument] .forte-tour-nav .forte-tour-next { background: var(--accent); color: var(--accent-ink, #111); border-color: transparent; font-weight: 600; }
/* what a step changes, in the Controls panel */
body[data-instrument] #controls .param.forte-tour-mark { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
/* a phone: at the top of the views, in the page's flow */
@media (max-width: 600px), (max-width: 1050px) and (max-height: 500px) {
  .forte-tour { position: static; width: auto; max-height: none; margin: 0 0 10px; padding: 8px 12px 10px; box-shadow: none; }
  .forte-tour-title { font-size: 15px; }
  .forte-tour-text { font-size: 13px; overflow: visible; }
  body[data-instrument] .forte-tour-nav button { min-height: 36px; }
}

/* Songs (shared/songs.js): ♪ Songs in the header after Tour, a .forte-about as How it works is
   (just ♪ where the header is tight), and a card in the tour's place: Forte's songs, a MIDI file
   of your own, and the song's transport */
.forte-songs-glyph { font: 700 11px/1 system-ui, sans-serif; }
body > header .forte-songs-start[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink, #111); border-color: var(--accent); }
.forte-songs {
  position: fixed; z-index: 30; right: 16px; bottom: calc(var(--footer-h, 170px) + 12px);
  width: min(470px, calc(100vw - 32px)); max-height: calc(100vh - var(--header-h, 50px) - var(--footer-h, 170px) - 36px);
  display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 12px;
  border: 1px solid var(--accent); border-radius: 12px; background: color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6); color: var(--text);
}
.forte-songs[hidden] { display: none; }
.forte-songs-head { display: flex; align-items: center; gap: 6px; }
.forte-songs-kicker { flex: 1 1 auto; min-width: 0; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-instrument] .forte-songs :is(.forte-songs-fold, .forte-songs-close) {
  flex: none; display: grid; place-items: center; width: 28px; height: 26px; min-height: 0; padding: 0;
  border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--muted);
}
.forte-songs-fold svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.forte-songs.folded .forte-songs-fold svg { transform: rotate(180deg); }
.forte-songs-title { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.forte-songs-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
body[data-instrument] .forte-songs-song {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 9px; border-radius: 8px; text-align: left;
}
body[data-instrument] .forte-songs-song[aria-current="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.forte-songs-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
.forte-songs-by { font-size: 11.5px; color: var(--muted); }
.forte-songs-transport { display: flex; align-items: center; gap: 8px; }
body[data-instrument] .forte-songs-play { flex: none; min-width: 78px; padding: 4px 10px; border-radius: 8px; background: var(--accent); color: var(--accent-ink, #111); border-color: transparent; font-weight: 600; white-space: nowrap; }
body[data-instrument] .forte-songs-play:disabled { opacity: 0.45; }
.forte-songs-where { flex: 1 1 auto; min-width: 60px; accent-color: var(--accent); }
.forte-songs-time { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
body[data-instrument] .forte-songs-speed { flex: none; width: auto; padding: 3px 6px; font-size: 12px; }
.forte-songs-note { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.forte-songs-file { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
body[data-instrument] .forte-songs-open { padding: 4px 10px; border-radius: 8px; }
.forte-songs-or { font-size: 12px; color: var(--muted); }
.forte-songs.folded :is(.forte-songs-list, .forte-songs-note, .forte-songs-file) { display: none; }
.forte-songs.folded .forte-songs-title { font-size: 14px; }
/* a file dragged over the page: where to drop it */
.forte-songs-drop {
  position: fixed; inset: 12px; z-index: 60; display: grid; place-items: center; pointer-events: none;
  border: 2px dashed var(--accent); border-radius: 16px; background: color-mix(in srgb, var(--bg, #000) 70%, transparent);
}
.forte-songs-drop[hidden] { display: none; }
.forte-songs-drop-text { padding: 12px 18px; border-radius: 12px; background: var(--panel); color: var(--text); font-size: 16px; font-weight: 600; }
@media (max-width: 600px), (max-width: 1050px) and (max-height: 500px) {
  .forte-songs { position: static; width: auto; max-height: none; margin: 0 0 10px; padding: 8px 12px 10px; box-shadow: none; }
  .forte-songs-title { font-size: 15px; }
  .forte-songs-list { overflow: visible; grid-template-columns: 1fr 1fr; }
  body[data-instrument] .forte-songs :is(.forte-songs-play, .forte-songs-open, .forte-songs-speed) { min-height: 36px; }
}
/* a second instrument (shared/layer.js): its button in the keyboard bar, its panel, and its keys
   lit in its colour; in a split, a line under each key in the colour of the instrument it plays */
.forte-layer { display: inline-flex; align-items: center; gap: 6px; max-width: 150px; flex: none; white-space: nowrap; }
.forte-layer.on { border-color: var(--layer-accent); }
.forte-layer-name { overflow: hidden; text-overflow: ellipsis; }
.forte-layer-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.forte-layer-pop { width: min(360px, calc(100vw - 24px)); color: var(--text); }
.forte-layer-pop select { width: 100%; }
.forte-layer-row { display: flex; align-items: center; gap: 8px; }
.forte-layer-more { display: flex; flex-direction: column; gap: 8px; }
.forte-layer-more[hidden], .forte-layer-at[hidden], .forte-layer-pop [hidden] { display: none; }
.forte-layer-at { display: flex; align-items: center; gap: 6px; color: var(--muted); flex: 1; }
.forte-layer-at select { flex: 1; }
.forte-layer-volume input { flex: 1; }
.forte-layer-volume .val { color: var(--accent); font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; }
.forte-layer-note { margin: 0; color: var(--muted); font-size: 12px; }
.forte-layer-link { font-size: 12px; }
.forte-layer-modes button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink, #111); border-color: transparent; }
#keyboard .wk.down.other { background: var(--layer-down); }
#keyboard .bk.down.other { background: var(--layer-accent); }
#keyboard .wk.part-own::after, #keyboard .wk.part-other::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; }
#keyboard .wk.part-own::after { background: var(--accent); }
#keyboard .wk.part-other::after { background: var(--layer-accent); }
#keyboard .wk.edge, #keyboard .bk.edge { box-shadow: inset 3px 0 0 var(--accent-2); }
.forte-layer-label { flex: none; width: 4.8em; color: var(--muted); }
.forte-layer-row select { flex: 1; min-width: 0; }
/* above the keys, it scrolls when the screen is short (a phone held sideways) */
.forte-layer-pop { max-height: calc(100vh - var(--footer-h, 170px) - var(--header-h, 0px) - 16px); max-height: calc(100svh - var(--footer-h, 170px) - var(--header-h, 0px) - 16px); overflow: auto; }
/* ---- in a plugin's window (shared/in-plugin.js): the views alone, under their bar, filling the
   frame; the window has the header, the controls and the keys (native/plugin/editor.html), and
   folds the views away itself. Always the desktop's layout: the phones' rules above are dropped. */
html.in-plugin body[data-instrument] { grid-template-rows: minmax(0, 1fr); }
html.in-plugin body[data-instrument] > :is(header, footer),
html.in-plugin .forte-edge,
html.in-plugin .forte-controls-bar,
html.in-plugin body[data-instrument] #controls,
html.in-plugin .forte-views-bar :is(.forte-fold, .forte-mode),
html.in-plugin .forte-tour-start { display: none; }
html.in-plugin body[data-instrument] > main { grid-template-rows: auto minmax(0, 1fr); }
html.in-plugin .forte-views-bar { padding-right: 10px; }
html.in-plugin .forte-stage { grid-template-rows: repeat(var(--rows, 1), minmax(0, 1fr)); } /* the views fit the frame, as in Perform */

/* ---- a Seaboard RISE plugged in (shared/rise.js): the instrument drawn at the left, the height
   of the page (as PhuzzBox draws its pedal on a board): its faders and pad with what they move,
   its keywave with a dot for each finger (across: the key and its glide; up: its slide; size and
   glow: its press), then the five dimensions of its touch, each lit while it comes in. Folded,
   it leaves a rail. ------------------------------------------------------------------------- */
body[data-instrument].rise > main { grid-template-columns: clamp(236px, 21vw, 300px) minmax(0, 1fr); }
body[data-instrument].rise.rise-folded > main { grid-template-columns: 40px minmax(0, 1fr); }
body[data-instrument].rise > main > :not(.forte-rise), body[data-instrument].rise :is(#views, #controls) { grid-column: 2; }
.forte-rise {
  grid-column: 1; grid-row: 1 / -1; min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 14px; border-right: 1px solid var(--line);
  background: repeating-linear-gradient(45deg, rgb(255 255 255 / 0.018) 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, rgb(0 0 0 / 0.25) 0 2px, transparent 2px 5px), #111113;
}
.forte-rise-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.forte-rise-head b { flex: 1 1 auto; min-width: 0; font-size: 13px; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.forte-rise .forte-fold svg { transform: none; }
body.rise-folded .forte-rise { padding: 8px 4px; align-items: center; cursor: pointer; }
body.rise-folded .forte-rise-head { flex-direction: column-reverse; gap: 10px; }
body.rise-folded .forte-rise-head b { writing-mode: vertical-rl; transform: rotate(180deg); overflow: visible; color: var(--muted); }
body.rise-folded .forte-rise .forte-fold svg { transform: rotate(180deg); }
body.rise-folded .forte-rise-body { display: none; }
.forte-rise-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* the instrument: a black slab, its side panel above its keywave */
.forte-rise-slab {
  display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 12px;
  background: linear-gradient(180deg, #232327, #131316); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 6px 18px rgb(0 0 0 / 0.55);
}
.forte-rise-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; align-items: start; }
.forte-rise-faders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; justify-items: center; }
.forte-rise-fader { display: flex; flex-direction: column; align-items: center; gap: 4px; }
/* a touch fader: a column of lights, lit from the bottom to its value */
.forte-rise-track { position: relative; width: 12px; height: 84px; border-radius: 6px; background: #09090b; box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.9); overflow: hidden; }
.forte-rise-track i {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--v, 0) * 100%);
  background: repeating-linear-gradient(0deg, #f4f4f6 0 3px, transparent 3px 6px); opacity: 0.25; transition: height 60ms linear;
}
.forte-rise-fader.known .forte-rise-track i { opacity: 1; box-shadow: 0 0 6px rgb(255 255 255 / 0.5); }
.forte-rise-fnum { font-size: 10px; font-weight: 600; color: var(--muted); }
.forte-rise-pad { position: relative; width: 100%; max-width: 104px; justify-self: center; aspect-ratio: 1; border-radius: 6px; background: #09090b; box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.9); }
.forte-rise-pad i {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  left: calc(var(--x, 0.5) * 100%); top: calc((1 - var(--y, 0.5)) * 100%); background: #f4f4f6; opacity: 0.25;
}
.forte-rise-pad.known i { opacity: 1; box-shadow: 0 0 8px rgb(255 255 255 / 0.7); }
/* what each moves here: its number (or X, Y), the control, where it is */
.forte-rise-legend { grid-column: 1 / -1; display: grid; gap: 3px; }
.forte-rise-lrow { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; column-gap: 6px; align-items: baseline; font-size: 11px; line-height: 1.25; }
.forte-rise-lrow > b { font-size: 10px; color: var(--muted); text-align: center; }
.forte-rise-llabel { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forte-rise-lrow.none .forte-rise-llabel { color: var(--muted); }
.forte-rise-lval { color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.forte-rise-modeline { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 7px; font-size: 10.5px; line-height: 1.3; color: var(--muted); }
/* the mode button's light: white in MIDI mode, cyan (its expression mode) until a fader is seen */
.forte-rise-led { flex: none; width: 9px; height: 9px; margin-top: 2px; border-radius: 50%; background: #3fd0e0; box-shadow: 0 0 6px #3fd0e0; }
.forte-rise-led.white { background: #f4f4f6; box-shadow: 0 0 6px #fff; }
/* the keywave: 25 soft keys, black keys a shade darker, each finger a dot */
.forte-rise-wave { position: relative; height: 74px; border-radius: 8px; overflow: hidden; background: #0c0c0e; }
.forte-rise-keys { position: absolute; inset: 0 0 14px; display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 1px; }
.forte-rise-keys span { border-radius: 3px; background: linear-gradient(180deg, #3a3a40, #2a2a2f); }
.forte-rise-keys span.b { background: linear-gradient(180deg, #232327, #18181b); margin-bottom: 14px; }
.forte-rise-dots { position: absolute; inset: 0 0 14px; pointer-events: none; }
.forte-rise-dots i {
  position: absolute; left: calc(var(--x) * 100%); top: calc((1 - var(--y)) * 100%);
  width: calc(8px + var(--p, 0) * 14px); height: calc(8px + var(--p, 0) * 14px); transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--accent); opacity: calc(0.55 + 0.45 * var(--s, 1)); box-shadow: 0 0 calc(4px + var(--p, 0) * 14px) var(--accent);
}
.forte-rise-range { position: absolute; left: 6px; right: 6px; bottom: 1px; font-size: 9.5px; color: var(--muted); text-align: right; }

/* the five dimensions: a light, the name, a meter, the newest finger's value, what it does here */
.forte-rise-dims { display: grid; gap: 7px; }
.forte-rise-dim { display: grid; grid-template-columns: 9px 46px minmax(0, 1fr) 46px; align-items: center; column-gap: 7px; row-gap: 1px; }
.forte-rise-dim > b { font-size: 12px; font-weight: 600; color: var(--muted); }
.forte-rise-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--muted); opacity: 0.6; }
.forte-rise-dim.on .forte-rise-dot { background: var(--accent); border-color: var(--accent); opacity: 1; box-shadow: 0 0 6px var(--accent); }
.forte-rise-dim.on > b { color: var(--text); }
.forte-rise-meter { position: relative; height: 6px; border-radius: 3px; background: #09090b; box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.8); overflow: hidden; }
.forte-rise-meter i { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--v, 0) * 100%); background: var(--accent); opacity: 0.45; }
.forte-rise-dim.on .forte-rise-meter i { opacity: 1; }
/* Glide bends either way, from the middle */
.forte-rise-meter.signed::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line); }
.forte-rise-meter.signed i { left: calc(var(--from, 0.5) * 100%); width: calc(var(--w, 0) * 100%); }
.forte-rise-val { font-size: 11px; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.forte-rise-what { grid-column: 2 / -1; font-size: 10.5px; line-height: 1.3; color: var(--muted); }
.forte-rise-note { margin: 0; font-size: 10.5px; line-height: 1.35; color: var(--muted); }
/* On the RISE: its own settings, read over SysEx, a button to set it up for Forte, its sensitivities */
.forte-rise-own { display: grid; gap: 7px; padding-top: 8px; border-top: 1px solid var(--line); }
.forte-rise-own h3 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.forte-rise-status { margin: 0; font-size: 10.5px; line-height: 1.35; color: var(--muted); }
.forte-rise-status:empty { display: none; }
.forte-rise-status.off { color: var(--text); }
.forte-rise-settings { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; font-size: 11px; line-height: 1.3; }
.forte-rise-settings dt { color: var(--muted); }
.forte-rise-settings dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.forte-rise-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.forte-rise-buttons button { font-size: 11.5px; padding: 4px 9px; }
.forte-rise-buttons button.armed { border-color: var(--accent); color: var(--accent); }
.forte-rise-sens summary { cursor: pointer; font-size: 11.5px; color: var(--muted); }
.forte-rise-sens[open] summary { color: var(--text); margin-bottom: 2px; }
.forte-rise-srow { display: grid; grid-template-columns: 46px minmax(0, 1fr) 26px; align-items: center; column-gap: 7px; font-size: 11px; }
.forte-rise-srow output { text-align: right; font-variant-numeric: tabular-nums; color: var(--accent); }
.forte-rise-snote { margin: 2px 0 0; font-size: 10.5px; color: var(--muted); }
html.in-plugin .forte-rise { display: none; }

/* phones: the page scrolls, and the RISE follows the controls */
@media (max-width: 600px), (max-width: 1050px) and (max-height: 500px) {
  body[data-instrument].rise > main, body[data-instrument].rise.rise-folded > main { grid-template-columns: minmax(0, 1fr); }
  body[data-instrument].rise > main > :not(.forte-rise), body[data-instrument].rise :is(#views, #controls) { grid-column: 1; }
  .forte-rise { grid-row: 5; border-right: 0; border-top: 1px solid var(--line); overflow: visible; }
  body.rise-folded .forte-rise { align-items: stretch; }
  body.rise-folded .forte-rise-head { flex-direction: row; }
  body.rise-folded .forte-rise-head b { writing-mode: horizontal-tb; transform: none; }
}