/* ==========================================================================
   The music room -- the still lake.

   Only what this room has. The theme (palette, material, motion, reaction)
   is in themes.css under [data-room="music"]; the shared components are in
   styles.css and are not restyled here -- every selector below is a `.mu-`
   name of this room's own, or is scoped to one of its faces.

   The studio is one screen: a bar along the top (transport, position,
   tempo, the three views, loudness, export), the view in the middle with
   the selection's settings on the right, and a strip at the bottom that
   opens for an effect's face or a clip's notes. Everything is rounded --
   water has no corners -- and a control being worked sends a ring out from
   itself (--react-drag-thumb) instead of lifting.
   ========================================================================== */

/* --- the island while working -------------------------------------------- */

.stage[data-state="music-edit"] .shell { width: min(100%, 1720px); }
.stage[data-state="music-edit"] .shell[data-tilt] { transform: none; }
main:has(.stage[data-state="music-edit"]) { padding-top: var(--s3); padding-bottom: var(--s5); }
body:has(.stage[data-state="music-edit"]) .footer { display: none; }
#face-music-edit { padding: 0; }

html[data-mu-full] .stage[data-state="music-edit"] .shell {
  position: fixed; inset: 0; z-index: 60;
  width: auto !important; height: auto !important; max-width: none;
  border: 0; border-radius: 0; transform: none !important;
  background: var(--film-shell-solid);
}
html[data-mu-full] body { overflow: hidden; }

/* The lake's ice as channels, for rings at any strength. */
/* (--mu-ice, --mu-mist and --mu-slate come from the look: look-<name>.css.) */

/* --- the resting face: water (water.js) ------------------------------------------ */

/* Water lies flat: the island does not lean towards the pointer here. */
.stage[data-state="music-idle"] .shell[data-tilt] { transform: none; }
.stage[data-state="music-idle"] .deck { position: relative; }
/* On touch, a sideways swipe makes a wake; up and down still scrolls. */
.stage[data-state="music-idle"] .shell { touch-action: pan-y; }
/* The water reaches a little past the island; on a phone that is past the
   screen's edge, which must not make the page scroll sideways. */
main:has(> .stage[data-state="music-idle"]) { overflow-x: clip; }
.mu-water { position: absolute; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 120ms linear; }
.mu-water[data-on] { opacity: 1; transition: opacity 1200ms var(--ease-soft); }

/* --- the resting face: sessions kept ------------------------------------------- */

/* What went wrong opening something there (a session file that is not one,
   or only part of one): one line under the bar, only while it has something
   to say. */
.mu-alert { margin: var(--s3) var(--s3) 0; font-size: var(--t-sm); line-height: 1.45; color: var(--film-bad, var(--mu-bad)); text-wrap: pretty; overflow-wrap: anywhere; }
.mu-alert[hidden] { display: none; }

.mu-shelf { margin-top: var(--s3); padding: var(--s3) var(--s3) var(--s1); border-top: var(--hairline) solid var(--film-rule); }
.mu-shelf__head { margin: 0 0 var(--s2); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--film-ink-3); }
.mu-shelf__head .mono { margin-left: var(--s1); letter-spacing: 0; }
.mu-shelf__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mu-shelf__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2); }
.mu-shelf__open {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--s3); align-items: center;
  min-height: 52px; padding: var(--s2) var(--s3); border: 0; border-radius: var(--mu-r-control); background: none; color: var(--film-ink); text-align: left; font: inherit; cursor: pointer;
  transition: background-color var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease-soft);
}
.mu-shelf__open:hover { background: var(--film-raise); box-shadow: var(--mu-ring-soft); }
.mu-shelf__open:focus-visible, .mu-shelf__del:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 1px; }
/* A small pool for each session: still water with its waterline. */
.mu-shelf__pool {
  grid-row: span 2; justify-self: center; width: 34px; height: 34px; border-radius: var(--mu-r-pool, 50%);
  background: var(--mu-pool); box-shadow: var(--mu-pool-edge, none);
}
.mu-shelf__name { font-weight: 600; font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-shelf__meta { font-size: var(--t-xs); color: var(--film-ink-3); }
.mu-shelf__del {
  min-height: 36px; padding: 0 var(--s3); border: var(--hairline) solid transparent; border-radius: var(--mu-r-control); background: none;
  color: var(--film-ink-3); font: inherit; font-size: var(--t-xs); cursor: pointer;
  transition: color var(--dur-state) var(--ease), background-color var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease);
}
.mu-shelf__del:hover { color: var(--film-ink); background: var(--film-raise); }
.mu-shelf__del[data-armed] { color: var(--film-bad, var(--mu-bad)); border-color: currentColor; }

/* --- icons and buttons ------------------------------------------------------------ */

.mu-ic { width: 18px; height: 18px; flex: none; }

.mu {
  --mu-bg: var(--film-shell-solid);
  --mu-line: var(--film-rule);
  --mu-water: var(--mu-lanes, rgb(var(--mu-deep) / 0.30));
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  height: clamp(560px, calc(100dvh - 132px), 1760px);
  color: var(--film-ink);
  background: var(--mu-bg);
  font-size: var(--t-sm);
  overflow: hidden;
  border-radius: inherit;
}
html[data-mu-full] .mu { height: 100dvh; border-radius: 0; }

.mu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 34px; padding: 0 var(--s3);
  border: var(--hairline) solid var(--mu-line); border-radius: var(--mu-r-control);
  background: var(--film-raise); color: var(--film-ink-2);
  font: inherit; font-size: var(--t-xs); font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease-soft);
}
.mu-btn:hover:not(:disabled) { background: var(--film-raise-hi); color: var(--film-ink); box-shadow: var(--react-lift); }
.mu-btn:active:not(:disabled) { transform: scale(var(--react-press)); }
.mu-btn:disabled { opacity: 0.4; cursor: default; }
.mu-btn:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 1px; }
.mu-btn--icon { width: 36px; padding: 0; border-color: transparent; background: none; }
.mu-btn--small { min-height: 30px; padding: 0 var(--s3); }
.mu-btn--small .mu-ic { width: 15px; height: 15px; }
.mu-toggle[aria-pressed="true"] { color: var(--signal); background: rgb(var(--mu-ice) / 0.12); }

/* --- the bar ---------------------------------------------------------------------------- */

.mu-bar {
  display: flex; align-items: center; gap: var(--s2) var(--s3);
  min-height: 60px; padding: var(--s2) var(--s3);
  border-bottom: var(--hairline) solid var(--mu-line);
  box-shadow: inset 0 -1px 0 rgb(var(--mu-mist) / 0.03);
}
.mu-title { display: flex; flex-direction: column; min-width: 120px; flex: 1 1 220px; }
.mu-name {
  min-width: 0; width: 100%; padding: 2px var(--s2); margin-left: calc(var(--s2) * -1);
  border: var(--hairline) solid transparent; border-radius: var(--mu-r-control); background: none;
  color: var(--film-ink); font: inherit; font-weight: 400; font-size: var(--t-base); letter-spacing: 0.02em; text-overflow: ellipsis;
  transition: border-color var(--dur-state) var(--ease), background-color var(--dur-state) var(--ease);
}
.mu-name:hover { border-color: var(--mu-line); }
.mu-name:focus { outline: none; border-color: var(--signal); background: var(--film-raise); }
.mu-saved { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--film-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-saved[data-bad] { color: var(--mu-bad); }
.mu-name[data-bad] { box-shadow: inset 0 -1px 0 var(--mu-bad); }
.mu-savedrow { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
.mu-keepfile { flex: none; padding: 0; border: 0; background: none; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--signal); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.mu-keepfile:hover { color: var(--film-ink); }
.mu-keepfile:focus-visible { outline: 1.5px solid var(--signal); outline-offset: 2px; border-radius: 3px; }
.mu[data-busy] .mu-saved { color: var(--film-ink-2); }
.mu[data-busy] .mu-saved::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: var(--s2); border-radius: 50%; background: var(--signal); animation: mu-breathe 1.4s var(--ease-soft) infinite; }
@keyframes mu-breathe { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }

.mu-menus { display: flex; gap: 0; flex: 0 0 auto; }
.mu-menubtn {
  min-height: 32px; padding: 0 var(--s2); border: 0; border-radius: var(--mu-r-control); background: none;
  color: var(--film-ink-2); font: inherit; font-size: var(--t-sm); cursor: pointer;
  transition: background-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
}
.mu-menubtn:hover, .mu-menubtn[aria-expanded="true"] { background: var(--film-raise-hi); color: var(--film-ink); }
.mu-menubtn:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; }
.mu-menubtn--all { display: none; }
/* (With a finger the menus' own row needs more room: one Menu up to 1740.) */
@media (max-width: 1640px), (pointer: coarse) and (max-width: 1740px) {
  .mu-menus .mu-menubtn { display: none; }
  .mu-menus .mu-menubtn--all { display: inline-block; }
  .mu-bar { gap: var(--s2); }
}
/* The one row never runs past the bar's box (the owner, 31 October 2026:
   Export was cut off at 1121 to 1270 px wide). Measured against the box in
   every look with the longest read-outs -- "−60.0 LUFS", bar 1888.12.4,
   79:59.999, 133.33 bpm, 15/16, the load badge -- (scripts/music-qa/
   bar-fit-run.mjs), the least important read-outs give way first: the
   "bpm" label and the position's second line (the clock under the bars, or
   the bars under the clock), then the loudness bars beside the figure, and
   below 1360 the two measured rows. A finger's larger controls need more:
   up to 1480, 1440 and 1420. Nothing the owner uses is hidden, and no text
   gets smaller. */
#mu-home, .mu-where { flex-shrink: 0; }
@media (max-width: 1430px), (min-width: 1641px) and (max-width: 1700px), (pointer: coarse) and (max-width: 1480px) {
  .mu-tempo__unit, .mu:not([data-where="clock"]) .mu-where__clock, .mu[data-where="clock"] .mu-where__bars { display: none; }
}
@media (max-width: 1280px) { .mu-where { min-width: 88px; } }
/* (Below 1361 the two rows have room for the loudness bars again.) */
@media (min-width: 1361px) and (max-width: 1390px), (pointer: coarse) and (min-width: 1361px) and (max-width: 1440px) { .mu-loud > .mu-loud__meter { display: none; } }
/* Two measured rows: back, name, Menu, transport, time; then tempo, the
   view switch (stretching, full screen at its end), loudness and Export,
   flush with the same edges. */
@media (max-width: 1360px), (pointer: coarse) and (max-width: 1420px) {
  .mu-bar { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; gap: var(--s2) var(--s3); padding: var(--s2) var(--s3) var(--s3); }
  #mu-home { grid-area: 1 / 1; justify-self: start; position: relative; z-index: 1; }
  .mu-title { grid-area: 1 / 1 / 2 / 4; min-width: 0; padding-left: calc(36px + var(--s3)); }
  .mu-menus { grid-area: 1 / 4; }
  .mu-transport { grid-area: 1 / 5; margin-left: 0; }
  .mu-where { grid-area: 1 / 6; }
  .mu-tempo { grid-area: 2 / 1; justify-content: center; min-height: 40px; }
  .mu-views { grid-area: 2 / 2 / 3 / 5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-right: calc(36px + var(--s2)); }
  .mu-fullbtn { grid-area: 2 / 4; justify-self: end; align-self: center; }
  .mu-views .mu-pill { justify-content: center; text-align: center; }
  .mu-loud { grid-area: 2 / 5; justify-content: center; min-height: 40px; }
  .mu-export { grid-area: 2 / 6; justify-content: center; min-height: 40px; }
}
.mu-loud__num { white-space: nowrap; }

.mu-transport { display: flex; align-items: center; gap: 2px; margin-left: auto; padding: 3px; border-radius: var(--mu-r-group); background: var(--film-well); box-shadow: inset 0 0 0 1px var(--mu-line); }
.mu-play, .mu-rec {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  transition: background-color var(--dur-state) var(--ease), box-shadow var(--dur-face) var(--ease-soft), transform var(--dur-state) var(--ease);
}
.mu-play { background: var(--signal-fill); color: var(--signal-ink); }
.mu-play:hover { background: var(--signal-fill-hover); box-shadow: var(--mu-ring-hover); }
.mu-play:active, .mu-rec:active { transform: scale(var(--react-press)); }
.mu-play .mu-ic--stop, .mu-play[data-playing="true"] .mu-ic--play { display: none; }
.mu-play[data-playing="true"] .mu-ic--stop { display: block; }
.mu-play[data-playing="true"]::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid rgb(var(--mu-ice) / 0.6); animation: mu-ring 2.4s var(--ease-soft) infinite; pointer-events: none; }
@keyframes mu-ring { from { transform: scale(0.9); opacity: 0.8; } to { transform: scale(1.5); opacity: 0; } }
.mu-rec { background: none; }
.mu-rec__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--mu-rec); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.18); transition: transform var(--dur-state) var(--ease); }
.mu-rec:hover { background: var(--film-raise-hi); }
.mu-rec[aria-pressed="true"] { background: rgb(var(--mu-rec-rgb) / 0.18); }
.mu-rec[aria-pressed="true"] .mu-rec__dot { animation: mu-breathe 1.2s var(--ease-soft) infinite; }
.mu-play:focus-visible, .mu-rec:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }

.mu-where {
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto minmax(1.3em, auto); justify-items: end; align-items: center; column-gap: 6px; min-width: 154px; padding: 4px var(--s3); border: 0; border-radius: var(--mu-r-control); background: none; color: var(--film-ink); cursor: pointer;
  transition: background-color var(--dur-state) var(--ease);
}
.mu-where:hover { background: var(--film-raise); }
.mu-where:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 1px; }
.mu-where__bars { grid-area: 1 / 1 / 2 / 3; font-size: var(--t-md); line-height: 1.1; font-variant-numeric: tabular-nums; }
.mu-where__clock { grid-area: 2 / 2; font-size: var(--t-xs); color: var(--film-ink-3); font-variant-numeric: tabular-nums; }
.mu[data-where="clock"] .mu-where__bars { grid-area: 2 / 2; font-size: var(--t-xs); color: var(--film-ink-3); }
.mu[data-where="clock"] .mu-where__clock { grid-area: 1 / 1 / 2 / 3; font-size: var(--t-md); color: var(--film-ink); }

.mu-tempo { display: flex; align-items: center; gap: 4px; padding: 3px 4px 3px var(--s3); border-radius: var(--mu-r-group); box-shadow: inset 0 0 0 1px var(--mu-line); }
.mu-tempo__bpm { width: 4.4ch; padding: 4px 2px; border: 0; border-radius: var(--mu-r-control); background: none; color: var(--film-ink); font-size: var(--t-sm); text-align: right; cursor: ns-resize; font-variant-numeric: tabular-nums; }
.mu-tempo__bpm:focus { outline: none; background: var(--film-raise); cursor: text; box-shadow: 0 0 0 1px var(--signal); }
.mu-tempo__unit { font-size: var(--t-xs); color: var(--film-ink-3); }
.mu-tempo__meter { min-height: 28px; padding: 0 var(--s2); border: 0; border-radius: var(--mu-r-control); background: var(--film-raise); color: var(--film-ink-2); font-size: var(--t-xs); cursor: pointer; }
.mu-tempo__meter:hover { color: var(--film-ink); background: var(--film-raise-hi); }
.mu-tempo__meter:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 1px; }

/* The group's corners are its pills' corners plus its padding (concentric),
   so a group that wraps onto a second row still holds every pill whole --
   a stadium-shaped group cut into the pills at its ends. */
.mu-where { position: relative; }
/* The engine's load: in the second row beside the time, in a place of its
   own (it never sits over the figures, and nothing moves when it shows). */
.mu-cpu { grid-area: 2 / 1; justify-self: start; padding: 0 6px; line-height: 1.3; pointer-events: auto; border-radius: var(--mu-r-bar); font-size: 10.5px; white-space: nowrap; color: var(--film-ink-2); background: rgb(var(--mu-mist) / 0.06); }
.mu-cpu[hidden] { display: none; }
.mu-cpu[data-hot="true"] { color: var(--mu-bad); background: rgb(var(--mu-bad-rgb) / 0.12); }
.mu-field__note { margin-left: var(--s2); font-size: 11px; color: var(--film-ink-3); }
.mu-pills { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--mu-r-group); background: var(--film-well); box-shadow: inset 0 0 0 1px var(--mu-line); }
.mu-pills--small { border-radius: var(--mu-r-group); }
.mu-pill {
  min-height: 30px; padding: 0 var(--s3); border: 0; border-radius: var(--mu-r-control); background: none; color: var(--film-ink-2);
  font: inherit; font-size: var(--t-xs); font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease), box-shadow var(--dur-face) var(--ease-soft);
}
.mu-pill:hover { color: var(--film-ink); background: var(--film-raise); }
.mu-pill[aria-checked="true"] { background: var(--film-raise-hi); color: var(--film-ink); box-shadow: inset 0 -1.5px 0 var(--signal); }
.mu-pill:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; }
.mu-pills--small .mu-pill { min-height: 26px; padding: 0 var(--s2); }
.mu-views { flex: none; flex-wrap: nowrap; }

.mu-loud {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 36px; padding: 0 var(--s3); border: 0; border-radius: var(--mu-r-group); background: var(--film-well); color: var(--film-ink-2); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--mu-line);
  transition: background-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
}
.mu-loud:hover { background: var(--film-raise-hi); color: var(--film-ink); }
.mu-loud:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 1px; }
.mu-loud__meter { display: grid; grid-template-columns: 4px 4px; gap: 2px; height: 20px; }
.mu-loud__l, .mu-loud__r { position: relative; display: block; border-radius: 2px; background: rgb(var(--mu-mist) / 0.08); overflow: hidden; }
.mu-loud__l::after, .mu-loud__r::after { content: ""; position: absolute; inset: auto 0 0; height: calc(var(--lv, 0) * 100%); background: linear-gradient(0deg, rgb(var(--mu-slate)), rgb(var(--mu-mist) / 0.9) 82%, rgb(var(--mu-ice)) 92%); transition: height 80ms linear; }
.mu-loud[data-over="true"] .mu-loud__meter { box-shadow: 0 -2px 0 var(--mu-bad); }
.mu-loud__num { font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.mu-loud[data-measuring="true"] .mu-loud__num { color: var(--film-ink-3); }
.mu-loud[data-measuring="true"] .mu-loud__num::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 6px; border-radius: 50%; background: rgb(var(--mu-mist) / 0.6); vertical-align: middle; animation: mu-breathe 1.2s var(--ease-soft) infinite; }

.mu-export {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 38px; padding: 0 var(--s4);
  border: 0; border-radius: var(--mu-r-control); background: var(--signal-fill); color: var(--signal-ink);
  font: inherit; font-weight: 700; font-size: var(--t-sm); cursor: pointer;
  transition: background-color var(--dur-state) var(--ease), box-shadow var(--dur-face) var(--ease-soft);
}
.mu-export:hover:not(:disabled) { background: var(--signal-fill-hover); box-shadow: var(--mu-ring-hover); }
.mu-export:disabled { opacity: 0.45; cursor: default; }
.mu-export:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
.mu-export .mu-ic { width: 16px; height: 16px; stroke-width: 2; }

/* Full screen lives in the top corner: a drop that falls when the pointer
   comes near. */

/* --- the middle ------------------------------------------------------------------------- */

/* The inspector folds away when nothing is chosen (it has nothing to
   show), and opens again with the first choice: the column's width moves,
   the timeline's content stays anchored at its left edge. */
.mu-main { display: grid; grid-template-columns: minmax(0, 1fr) 304px; min-height: 0; transition: grid-template-columns var(--dur-face) var(--ease-soft); }
.mu-main:has(> .mu-inspect[data-empty]) { grid-template-columns: minmax(0, 1fr) 0px; }
.mu-inspect[data-empty] { padding-inline: 0; border-left-width: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .mu-main { transition: none; } }
.mu-main > [hidden] { display: none !important; }
.mu[data-view="mix"] .mu-main, .mu[data-view="master"] .mu-main { grid-template-columns: minmax(0, 1fr); }
.mu-arrange, .mu-mix, .mu-master { min-width: 0; min-height: 0; position: relative; }
.mu-inspect { min-height: 0; overflow: auto; border-left: var(--hairline) solid var(--mu-line); padding: var(--s3) var(--s3) var(--s5); scrollbar-width: thin; }

/* --- the arrangement ------------------------------------------------------------------- */

.mu-ar {
  display: grid; height: 100%;
  grid-template-columns: 232px minmax(0, 1fr);
  grid-template-rows: var(--ruler-h, 34px) minmax(0, 1fr) 10px;
  grid-template-areas: "corner ruler" "heads lanes" ". hbar";
}
.mu-ar[data-loops] {
  grid-template-columns: 232px calc(var(--loops-n, 4) * 58px + 136px) minmax(0, 1fr);
  grid-template-areas: "corner lhead ruler" "heads loops lanes" ". . hbar";
}
.mu-ar__lhead, .mu-ar__loops { display: none; }
.mu-ar[data-loops] .mu-ar__lhead { grid-area: lhead; display: flex; align-items: center; gap: 4px; padding: 0 5px; border-bottom: var(--hairline) solid var(--mu-line); border-right: var(--hairline) solid var(--mu-line); overflow: hidden; }
.mu-ar[data-loops] .mu-ar__loops { grid-area: loops; display: block; position: relative; overflow: hidden; border-right: var(--hairline) solid var(--mu-line); background: rgb(var(--mu-deep) / 0.18); }
.mu-ar__lcells { will-change: transform; }
.mu-lscene { flex: 0 0 54px; display: grid; place-items: center; height: 22px; padding: 0; border: 0; border-radius: var(--mu-r-control); background: rgb(var(--mu-mist) / 0.06); color: var(--film-ink-3); cursor: pointer; transition: background-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease); }
.mu-lscene .mu-ic { width: 11px; height: 11px; }
.mu-lscene:hover:not(:disabled) { color: var(--film-ink); background: rgb(var(--mu-mist) / 0.12); }
.mu-lscene:focus-visible, .mu-lcell:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 1px; }
.mu-lhead__tools { display: flex; align-items: center; gap: 0; margin-left: auto; }
.mu-lhead__tools .mu-btn--icon { width: 26px; min-height: 24px; }
.mu-lhead__tools .mu-ic { width: 13px; height: 13px; }
.mu-lrow { display: flex; gap: 4px; padding: 3px 5px; box-sizing: border-box; border-bottom: var(--hairline) solid rgb(var(--mu-mist) / 0.04); }
.mu-lcell { position: relative; flex: 0 0 54px; min-width: 0; padding: 4px 6px; border: 0; border-radius: var(--mu-r-card); background: color-mix(in srgb, var(--tc) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 45%, transparent); color: var(--film-ink); font: inherit; font-size: 10.5px; font-weight: 600; text-align: left; overflow: hidden; cursor: pointer; transition: box-shadow var(--dur-state) var(--ease), background-color var(--dur-state) var(--ease); }
.mu-lcell:hover:not([aria-disabled="true"]) { background: color-mix(in srgb, var(--tc) 32%, transparent); }
/* While a take records where launching is held (room.js launchesHeld): the column keys and the loops dimmed and plain under the pointer, as anything that cannot be used now (Stop is a .mu-btn:disabled); their tip says why. */
.mu-lscene:disabled, .mu-lcell[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.mu-lcell__name { position: relative; z-index: 1; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-lcell__fill { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--pos, 0) * 100%); background: var(--signal); opacity: 0; }
.mu-lcell[data-state="playing"], .mu-lcell[data-state="stopping"] { box-shadow: inset 0 0 0 1.5px var(--signal); }
.mu-lcell[data-state="playing"] .mu-lcell__fill, .mu-lcell[data-state="stopping"] .mu-lcell__fill { opacity: 1; }
.mu-lcell[data-state="queued"] { animation: mu-queued 0.5s steps(2, jump-none) infinite alternate; }
@keyframes mu-queued { from { box-shadow: inset 0 0 0 1.5px var(--signal); } to { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 45%, transparent); } }
.mu-lcell[data-state="stopping"] .mu-lcell__fill { background: var(--film-ink-3); }
.mu-lcell--empty { background: rgb(var(--mu-mist) / 0.035); box-shadow: inset 0 0 0 1px rgb(var(--mu-mist) / 0.06); cursor: default; }
.mu-lcell[data-dragging] { opacity: 0.55; }
/* The chosen cell (its settings on the right); a cell with a follow action: a small arrow in its corner. */
.mu-lcell[data-chosen] { outline: 1.5px solid rgb(var(--mu-mist) / 0.7); outline-offset: 1px; }
.mu-lcell[data-follows]::after { content: ""; position: absolute; right: 5px; top: 5px; width: 0; height: 0; border-left: 5px solid rgb(var(--mu-mist) / 0.75); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; }
.mu-lquant { min-height: 22px; padding: 0 7px; font-size: 10.5px; white-space: nowrap; }
.mu-ar__lanes[data-drop] { box-shadow: inset 0 0 0 2px rgb(var(--mu-ice) / 0.35); }
.mu-lrec__dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; }
.mu-lrec[aria-pressed="true"] { color: var(--mu-bad); }
.mu-lrec[aria-pressed="true"] .mu-lrec__dot { background: currentColor; }
@media (prefers-reduced-motion: reduce) { .mu-lcell[data-state="queued"] { animation: none; box-shadow: inset 0 0 0 1.5px var(--signal); } }
/* One toolbar, one gap: "+ Track" sits as far from the next control as the
   controls sit from each other (--mu-tool-gap; a look may set its own), and
   what width is left over stays at the corner's end. Spread out
   (space-between), the left-over width went between "+ Track" and the
   magnet: 22 px in Industrial, 11 in Cockpit, against 2 and 3 everywhere
   else. */
.mu-ar__corner { grid-area: corner; display: flex; align-items: center; justify-content: flex-start; gap: var(--mu-tool-gap, 3px); padding: 0 var(--s2); border-bottom: var(--hairline) solid var(--mu-line); border-right: var(--hairline) solid var(--mu-line); }
.mu-ar__corner .mu-btn--small { min-height: 24px; padding: 0 var(--s2); }
/* "+ Track" at the track limit (markPlan in room.js): its plan mark sits in
   the button's top right corner instead of after the label, so the button
   keeps its width. Inline, it grew the button by 19 px from the fifth
   track on, and the corner, already full, pushed Loop grid over the ruler.
   A look whose button is another shape places it with --mu-plan-top and
   --mu-plan-right. */
.mu-ar__corner [data-add-track] { position: relative; }
.mu-ar__corner [data-add-track] > .plan-mark { position: absolute; top: var(--mu-plan-top, 2px); right: var(--mu-plan-right, 2px); margin: 0; pointer-events: none; }
.mu-ar__corner .mu-btn--icon { width: 26px; min-height: 26px; }
.mu-ar__corner .mu-btn--icon .mu-ic { width: 15px; height: 15px; }
/* A little air between the toggles: lit, their rounds must not run together. */
.mu-ar__snap { display: flex; align-items: center; gap: var(--mu-tool-gap, 3px); }
.mu-grid span { font-family: var(--font-mono); font-weight: 400; }
.mu-ar__ruler { grid-area: ruler; position: relative; border-bottom: var(--hairline) solid var(--mu-line); cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* (A finger on the tempo plane drags a change up, down and along: the page does not take the drag.) */
.mu-ar__ruler:has(> .mu-ar__rcan) { touch-action: none; }
/* The chord track: a band along the foot of the ruler, when shown. */
.mu-ar[data-chords] { grid-template-rows: var(--ruler-h, 56px) minmax(0, 1fr) 10px; }
.mu-ar__chords { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; touch-action: none; }
.mu-ar__chords[hidden] { display: none; }
.mu-ar__rcan { position: absolute; inset: 0; display: block; }
.mu-ar__heads { grid-area: heads; position: relative; overflow: hidden; border-right: var(--hairline) solid var(--mu-line); will-change: transform; }
.mu-ar__lanes { grid-area: lanes; position: relative; overflow: hidden; background: var(--mu-water); touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.mu-ar__lanes:focus-visible:not([data-pointer]) { outline: 2px solid rgb(var(--mu-mist) / 0.5); outline-offset: -2px; }
.mu-ar__can { position: absolute; inset: 0; display: block; }
.mu-ar__playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--signal); pointer-events: none; will-change: transform; box-shadow: var(--mu-playhead-glow); }
.mu-ar__ring { position: absolute; top: -5px; left: -5px; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--signal); background: var(--mu-bg); }
.mu-ar__tip { position: absolute; top: 0; left: 0; z-index: 4; padding: 4px var(--s2); border-radius: var(--mu-r-control); background: rgb(var(--mu-pop) / 0.92); box-shadow: 0 0 0 1px var(--mu-line); color: var(--film-ink); font-size: var(--t-xs); pointer-events: none; white-space: nowrap; }
.mu-ar__hbar { grid-area: hbar; position: relative; margin: 3px var(--s2); border-radius: var(--mu-r-bar); background: rgb(var(--mu-mist) / 0.04); cursor: pointer; }
.mu-ar__hthumb { position: absolute; top: 0; bottom: 0; left: 0; border-radius: var(--mu-r-bar); background: rgb(var(--mu-mist) / 0.18); }
.mu-ar__empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s3); padding: var(--s4); text-align: center; }
.mu-ar__empty[hidden] { display: none; }
.mu-ar__empty-words { margin: 0; color: var(--film-ink-2); font-size: var(--t-base); }
.mu-ar__empty-go { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }

.mu-head {
  position: relative; display: grid; align-content: start;
  /* The kind column is as wide as the track's keys (--mu-key-w, set by a look
     whose keys are wider), so an instrument's keyboard key stands over its M
     and every track's name starts at the same place. */
  --mu-key-w: 26px;
  grid-template-columns: calc(4px + var(--depth, 0) * 12px) var(--mu-key-w) minmax(0, 1fr) auto 10px;
  grid-template-rows: 30px auto;
  grid-template-areas: "colour kind name lufs meter" "colour btns btns btns meter";
  column-gap: var(--s1); padding: 4px 6px 4px 0;
  border-bottom: var(--hairline) solid rgb(var(--mu-mist) / 0.05);
  transition: background-color var(--dur-state) var(--ease);
}
/* A closed folder, or any track made shorter than two rows, is one row:
   its buttons beside its name, never spilling over the line under it. */
.mu-head[data-collapsed] { grid-template-rows: minmax(0, 1fr); grid-template-areas: "colour kind name btns meter"; align-content: center; align-items: center; padding: 0 6px 0 0; }
.mu-head[data-collapsed] .mu-head__lufs { display: none; }
.mu-head[data-collapsed] .mu-head__name { align-self: center; }
.mu-head:hover { background: rgb(var(--mu-mist) / 0.025); }
.mu-head.is-selected { background: rgb(var(--mu-mist) / 0.06); }
.mu-head.is-selected::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--signal); }
.mu-head[data-lifted] { opacity: 0.7; }
.mu-head__colour { grid-area: colour; justify-self: end; width: 4px; height: calc(100% - 4px); margin-top: 2px; border-radius: 4px; background: var(--tc); opacity: 0.85; }
.mu-head__kind, .mu-head__fold { grid-area: kind; display: grid; place-items: center; color: var(--film-ink-3); }
.mu-head__kind .mu-ic, .mu-head__fold .mu-ic { width: 15px; height: 15px; }
.mu-head__frozen { color: var(--signal); }
.mu-head__frozen[data-stale="true"] { color: var(--film-ink-3); opacity: 0.6; }
.mu-head__fold { width: 22px; height: 26px; padding: 0; border: 0; border-radius: var(--mu-r-control); background: none; cursor: pointer; }
.mu-head__fold:hover { color: var(--film-ink); background: var(--film-raise); }
.mu-head__name { grid-area: name; min-width: 0; padding: 0 4px; border: 0; border-radius: var(--mu-r-control); background: none; color: var(--film-ink); font: inherit; font-size: var(--t-sm); font-weight: 600; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: grab; }
.mu-head__name:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -1px; }
.mu-head__lufs { grid-area: lufs; align-self: center; font-size: 10.5px; color: var(--film-ink-3); font-variant-numeric: tabular-nums; }
.mu-head__btns { grid-area: btns; display: flex; gap: 4px; align-items: center; }
.mu-hb {
  display: grid; place-items: center; width: 26px; height: 22px; padding: 0; border: 0; border-radius: var(--mu-r-control);
  background: rgb(var(--mu-mist) / 0.06); color: var(--film-ink-3); font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer;
  transition: background-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease), box-shadow var(--dur-face) var(--ease-soft);
}
.mu-hb:hover { color: var(--film-ink); background: rgb(var(--mu-mist) / 0.12); }
.mu-hb:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 1px; }
.mu-hb .mu-ic { width: 13px; height: 13px; }
.mu-hb--m[aria-pressed="true"] { background: var(--mu-mute); color: var(--signal-ink); }
.mu-hb--s[aria-pressed="true"] { background: var(--signal); color: var(--signal-ink); box-shadow: var(--mu-ring-soft); }
.mu-hb--s[data-safe="true"]::after { content: ""; position: absolute; width: 4px; height: 4px; margin: 14px 0 0 14px; border-radius: 50%; background: var(--film-ink-2); }
.mu-hb--r span { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; }
.mu-hb--r[aria-pressed="true"] { color: var(--mu-bad); background: rgb(var(--mu-rec-rgb) / 0.2); }
.mu-hb--r[aria-pressed="true"] span { background: currentColor; }
.mu-hb--a[aria-pressed="true"] { color: var(--signal); }
.mu-head__meter { grid-area: meter; display: grid; grid-template-columns: 3px 3px; gap: 1px; align-self: stretch; margin: 4px 0; }
.mu-head__ml, .mu-head__mr { position: relative; border-radius: 2px; background: rgb(var(--mu-mist) / 0.06); overflow: hidden; }
.mu-head__ml::after, .mu-head__mr::after { content: ""; position: absolute; inset: auto 0 0; height: calc(var(--lv, 0) * 100%); background: linear-gradient(0deg, rgb(var(--mu-slate)), rgb(var(--mu-mist) / 0.85) 80%, rgb(var(--mu-ice)) 92%); transition: height 80ms linear; }
.mu-head__meter[data-over="true"] { box-shadow: 0 -2px 0 var(--mu-bad); }
.mu-head__resize { position: absolute; left: 0; right: 0; bottom: -3px; height: 7px; cursor: ns-resize; z-index: 1; }
.mu-head--auto { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto; grid-template-areas: none; align-content: center; align-items: center; gap: 4px; padding: 0 6px 0 calc(16px + var(--depth, 0) * 12px); background: rgb(var(--mu-deep) / 0.22); }
.mu-head--take { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto; grid-template-areas: none; align-content: center; align-items: center; gap: 6px; padding: 0 6px 0 16px; background: rgb(var(--mu-deep) / 0.28); }
.mu-head--take[data-used="false"] .mu-take__name { color: var(--film-ink-3); }
.mu-take__dot { width: 14px; height: 14px; padding: 0; border: 0; border-radius: 50%; background: var(--lc); cursor: pointer; box-shadow: 0 0 0 3px rgb(var(--mu-mist) / 0.06); transition: box-shadow var(--dur-state) var(--ease); }
.mu-take__dot:hover { box-shadow: 0 0 0 3px rgb(var(--mu-mist) / 0.18); }
.mu-take__dot:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
.mu-take__name { min-width: 0; font-size: var(--t-xs); font-weight: 600; color: var(--film-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-hb--t { font-variant-numeric: tabular-nums; }
.mu-hb--t[aria-pressed="true"] { color: var(--signal); background: rgb(var(--mu-ice) / 0.14); }
.mu-head__autoname { min-width: 0; font-size: var(--t-xs); color: var(--film-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-automode { min-width: 52px; }
/* The master's own automation lane, at the foot of the tracks: whose it is, before what it moves, and a hairline above it. */
.mu-head--masterauto { box-shadow: inset 0 1px 0 var(--mu-line); }
.mu-head__whose { margin-right: 6px; font-weight: 600; color: var(--film-ink); }
.mu-rename { width: 100%; padding: 2px 4px; border: 0; border-radius: var(--mu-r-control); background: var(--film-raise-hi); color: var(--film-ink); font: inherit; font-weight: 600; box-shadow: 0 0 0 1px var(--signal); }

/* --- the inspector ----------------------------------------------------------------------- */

.mu-ins__sec { padding: var(--s3) 0; border-bottom: var(--hairline) solid rgb(var(--mu-mist) / 0.06); display: grid; gap: var(--s3); }
.mu-ins__sec:first-child { padding-top: 0; }
.mu-ins__h { margin: 0; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--film-ink-3); }
.mu-ins__kind { margin: 0; font-size: var(--t-xs); color: var(--film-ink-3); }
.mu-ins__title { margin: 0; font-size: var(--t-md); font-weight: 400; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.mu-ins__note { margin: 0; font-size: var(--t-xs); color: var(--film-ink-2); }
.mu-ins__busy { margin: 0; font-size: var(--t-xs); color: var(--film-ink-3); }
.mu-ins__busy::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: var(--s2); border-radius: 50%; background: var(--signal); animation: mu-breathe 1.4s var(--ease-soft) infinite; }
.mu-ins__knobs { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); }
.mu-ins__fade { display: grid; gap: var(--s2); }
.mu-ins__row { display: grid; gap: var(--s2); }
/* A number typed or dragged (a tempo change's tempo, a signature's beats): its name, the figure, its unit. */
.mu-ins__num { display: flex; align-items: center; gap: var(--s2); min-height: 28px; }
.mu-ins__numname { flex: 1 1 auto; min-width: 0; font-size: var(--t-xs); color: var(--film-ink-2); }
.mu-ins__num .mu-ins__numin { flex: 0 0 auto; width: 7ch; min-height: 28px; text-align: right; font-size: var(--t-md); cursor: ns-resize; font-variant-numeric: tabular-nums; }
.mu-ins__num .mu-ins__numin:focus { cursor: text; }
.mu-ins__numunit { flex: 0 0 auto; min-width: 3ch; font-size: var(--t-xs); color: var(--film-ink-3); }
.mu-ins__takebtns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.mu-ins__takebtns .mu-btn { justify-content: center; }
.mu-ins__lineup { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.mu-ins__beat { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
.mu-ins__beat .mu-btn { justify-content: center; }
/* Softening esses or breaths, where the riders are (regional/riders-face.js ridePanel): its name and a close, the settings, Soften and the count, With / Without. */
.mu-ins__ridehead { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 28px; }
.mu-ins__rideacts { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s3); }
.mu-ins__rideacts .mu-btn { min-width: 88px; justify-content: center; }
.mu-ins__ridecount { font-size: var(--t-xs); color: var(--film-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-ins__ridehear { justify-self: start; }
.mu-ins__lineup > .mu-line { grid-column: 1 / -1; }
.mu-ins__lineup .mu-btn { justify-content: center; gap: var(--s3); }
.mu-ins__lineup .mu-btn:has(.mono) { justify-content: space-between; }
.mu-ins__label { font-size: var(--t-xs); color: var(--film-ink-2); }
.mu-ins__switches { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.mu-ins__colours { display: flex; flex-wrap: wrap; gap: 6px; }
.mu-swatch { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.2); transition: box-shadow var(--dur-face) var(--ease-soft); }
.mu-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--mu-bg), 0 0 0 3.5px var(--film-ink); }
.mu-swatch:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 3px; }
.mu-ins__clip { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.mu-ins__clip .mu-ins__h { grid-column: 1 / -1; }
.mu-ins__clipmeter { font-size: var(--t-xs); color: var(--film-ink-3); font-variant-numeric: tabular-nums; min-width: 7ch; text-align: right; }
.mu-ins__clipmeter[data-active="true"] { color: var(--signal); }
.mu-ins__facts { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s3); margin: 0; font-size: var(--t-xs); }
.mu-ins__facts dt { color: var(--film-ink-3); }
.mu-ins__facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.mu-send { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: center; }
.mu-send .mu-line { grid-column: 1 / -1; }
.mu-send .mu-btn--icon { width: 28px; min-height: 28px; justify-self: end; }

/* An effect chain: a column of stones, in order. */
.mu-chain__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mu-chain__empty { margin: 0; font-size: var(--t-xs); color: var(--film-ink-3); }
.mu-chain__add { justify-self: start; }
.mu-slot {
  position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) 20px 28px; align-items: center; gap: 2px;
  min-height: 38px; padding: 0 4px; border-radius: var(--mu-r-control); background: var(--film-raise); box-shadow: inset 0 0 0 1px var(--mu-line);
  transition: background-color var(--dur-state) var(--ease), box-shadow var(--dur-face) var(--ease-soft), opacity var(--dur-state) var(--ease);
}
.mu-slot:hover { background: var(--film-raise-hi); }
.mu-slot[data-on="false"] { opacity: 0.55; }
.mu-slot[data-lifted] { z-index: 2; box-shadow: 0 0 0 1px var(--signal), var(--mu-ring-lift); }
.mu-slot__power, .mu-slot__x { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--mu-r-icon); background: none; color: var(--film-ink-3); cursor: pointer; }
.mu-slot__power[aria-checked="true"] { color: var(--signal); }
.mu-slot__power:hover, .mu-slot__x:hover { color: var(--film-ink); background: rgb(var(--mu-mist) / 0.08); }
.mu-slot__power .mu-ic, .mu-slot__x .mu-ic { width: 15px; height: 15px; }
.mu-slot__open { display: grid; min-width: 0; padding: 4px 6px; border: 0; border-radius: var(--mu-r-control); background: none; color: var(--film-ink); font: inherit; text-align: left; cursor: pointer; }
.mu-slot__name { font-size: var(--t-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-slot__sub { font-size: 10.5px; color: var(--film-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-slot__sub:empty { display: none; }
.mu-slot__grip { color: var(--film-ink-3); cursor: grab; display: grid; place-items: center; touch-action: none; }
.mu-slot__grip .mu-ic { width: 14px; height: 14px; }
.mu-slot :focus-visible { outline: 2px solid var(--film-ink); outline-offset: 0; }
.mu-slot--inst { width: 100%; grid-template-columns: 22px minmax(0, 1fr) 18px; padding: 0 var(--s3); border: 0; color: var(--film-ink); font: inherit; cursor: pointer; }

/* --- controls ------------------------------------------------------------------------------- */

/* Look hooks (controls.js; js/music/looks/README.md): marks round a knob and
   its hand, the scale beside a fader, the scale under a line and its 0 mark.
   In the markup always, shown only by a look that dresses them. */
.mu-knob__ticks, .mu-knob__hand, .mu-fader__scale, .mu-line__scale, .mu-line__zero { display: none; }
/* While a look is being put on (look.js), nothing glides from the old look's values into the new one's. */
html[data-look-switching] :is(.mu, .mu-float, .mu-win, body > .mu-menu, #face-music-idle) :is(*, *::before, *::after) { transition: none !important; }

.mu-knob { display: grid; justify-items: center; gap: 2px; min-width: 56px; }
.mu-knob__dial { display: grid; place-items: center; border-radius: 50%; cursor: ns-resize; touch-action: none; transition: box-shadow var(--dur-face) var(--ease-soft); }
.mu-knob__dial:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
.mu-knob__dial[data-dragging] { box-shadow: var(--react-drag-thumb); }
.mu-knob__track { fill: none; stroke: rgb(var(--mu-mist) / 0.10); stroke-width: 2.5; stroke-linecap: round; }
.mu-knob__value { fill: none; stroke: var(--signal); stroke-width: 2.5; stroke-linecap: round; }
.mu-knob__stone { fill: var(--mu-knob-face); stroke: rgb(var(--mu-mist) / 0.16); stroke-width: 1; }
.mu-knob__tick { stroke: var(--film-ink); stroke-width: 2; stroke-linecap: round; }
.mu-knob__name { font-size: 10.5px; color: var(--film-ink-3); white-space: nowrap; max-width: 88px; overflow: hidden; text-overflow: ellipsis; }
.mu-knob__value-text { font-size: 11px; color: var(--film-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

.mu-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 22px; column-gap: var(--s2); align-items: center; }
.mu-line__name { font-size: var(--t-xs); color: var(--film-ink-2); }
.mu-line__read { font-size: var(--t-xs); color: var(--film-ink); text-align: right; font-variant-numeric: tabular-nums; }
.mu-line__track { grid-column: 1 / -1; position: relative; height: 22px; border-radius: var(--mu-r-control); cursor: ew-resize; touch-action: none; }
.mu-line__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: rgb(var(--mu-mist) / 0.12); }
.mu-line__fill { position: absolute; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--signal); }
.mu-line__thumb { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--mu-thumb); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25); transition: box-shadow var(--dur-face) var(--ease-soft); }
.mu-line__track[data-dragging] .mu-line__thumb, .mu-line__track:focus-visible .mu-line__thumb { box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25), var(--react-drag-thumb); }
.mu-line__track:focus-visible { outline: none; }
.mu-line__track:focus-visible::before { background: rgb(var(--mu-mist) / 0.3); }
.mu-ins__volume .mu-line__thumb { width: 20px; height: 20px; margin: -10px 0 0 -10px; }

.mu-fader { display: grid; justify-items: center; gap: var(--s1); }
.mu-fader__well { position: relative; width: 34px; height: var(--fh, 160px); border-radius: var(--mu-r-control); cursor: ns-resize; touch-action: none; }
.mu-fader__well:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
.mu-fader__reed { position: absolute; left: 50%; top: 8px; bottom: 8px; width: 2px; margin-left: -1px; border-radius: 2px; background: rgb(var(--mu-mist) / 0.14); }
.mu-fader__zero { position: absolute; left: 7px; right: 7px; height: 1px; background: rgb(var(--mu-mist) / 0.3); }
.mu-fader__cap { position: absolute; left: 50%; width: 30px; height: 18px; margin: 0 0 -9px -15px; border-radius: var(--mu-r-control); background: var(--mu-cap); box-shadow: 0 1px 0 rgb(0 0 0 / 0.3), inset 0 -1px 0 rgb(0 0 0 / 0.15); transition: box-shadow var(--dur-face) var(--ease-soft); }
.mu-fader__cap::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 1px; background: rgb(var(--mu-deep) / 0.45); }
.mu-fader__well[data-dragging] .mu-fader__cap { box-shadow: 0 1px 0 rgb(0 0 0 / 0.3), var(--react-drag-thumb); }
.mu-fader__read { font-size: 11px; color: var(--film-ink); font-variant-numeric: tabular-nums; }

.mu-switch { display: inline-flex; align-items: center; gap: var(--s2); min-height: 30px; padding: 0 var(--s1); border: 0; border-radius: var(--mu-r-control); background: none; color: var(--film-ink-2); font: inherit; font-size: var(--t-xs); cursor: pointer; }
.mu-switch:hover { color: var(--film-ink); }
.mu-switch:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 1px; }
.mu-switch__track { position: relative; width: 30px; height: 16px; border-radius: var(--mu-r-control); background: rgb(var(--mu-mist) / 0.14); transition: background-color var(--dur-state) var(--ease); }
.mu-switch__stone { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: var(--mu-r-knob); background: var(--mu-switch-knob); transition: transform var(--dur-face) var(--ease-soft), background-color var(--dur-state) var(--ease); }
.mu-switch[aria-checked="true"] .mu-switch__track { background: rgb(var(--mu-ice) / 0.45); }
.mu-switch[aria-checked="true"] .mu-switch__stone { transform: translateX(14px); background: var(--mu-switch-knob-on); }

.mu-select { display: grid; gap: 4px; font-size: var(--t-xs); color: var(--film-ink-2); }
.mu-select uc-select { min-width: 0; }

/* The look picker (Session settings; looks/README.md): each look's name with three bands of its colours. */
/* The look picker's swatches (Session settings). */
.mu-look { display: inline-flex; align-items: center; gap: 7px; }
.mu-look__swatch { display: inline-flex; gap: 0; }
.mu-look__swatch i { width: 7px; height: 12px; }
.mu-look__swatch i:first-child { border-radius: 2px 0 0 2px; }
.mu-look__swatch i:last-child { border-radius: 0 2px 2px 0; }
.mu-look:disabled .mu-look__swatch { opacity: 0.4; }
.mu-field--row > .mu-pills.mu-looks { width: auto; flex-wrap: wrap; grid-column: 1 / -1; }


/* --- menus, palette, dialogs, notices ------------------------------------------------------- */

.mu-menu {
  position: fixed; z-index: 90; min-width: 220px; max-width: min(340px, calc(100vw - 16px)); max-height: min(70vh, 560px); overflow: auto; padding: 6px;
  border-radius: var(--mu-r-menu); background: rgb(var(--mu-pop) / 0.97); box-shadow: 0 0 0 1px var(--film-rule), 0 18px 40px -16px rgb(0 0 0 / 0.7);
  color: var(--film-ink); animation: mu-rise var(--dur-face) var(--ease-soft) both;
}
.mu-menu--cols { display: block; columns: 4 168px; column-gap: var(--s1); width: min(760px, calc(100vw - 16px)); max-width: min(760px, calc(100vw - 16px)); max-height: min(80vh, 640px); }
.mu-menu__group { display: grid; align-content: start; break-inside: avoid; padding-bottom: var(--s2); }
.mu-menu[data-leaving] { animation: mu-sink 160ms var(--ease) both; pointer-events: none; }
@keyframes mu-rise { from { opacity: 0; transform: translateY(-4px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes mu-sink { to { opacity: 0; transform: translateY(-3px); } }
.mu-menu__head { padding: var(--s2) var(--s3) 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--film-ink-3); }
.mu-menu__rule { height: 1px; margin: 4px var(--s2); background: var(--film-rule); }
.mu-menu__item { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: var(--s2); width: 100%; min-height: 34px; padding: 0 var(--s3) 0 var(--s2); border: 0; border-radius: var(--mu-r-control); background: none; color: var(--film-ink); font: inherit; font-size: var(--t-sm); text-align: left; cursor: pointer; }
.mu-menu__item:hover, .mu-menu__item:focus-visible { outline: none; background: var(--film-raise-hi); }
.mu-menu__item[disabled] { opacity: 0.4; cursor: default; }
.mu-menu__item.is-danger { color: var(--mu-bad); }
.mu-menu__tick { width: 7px; height: 7px; justify-self: center; border-radius: 50%; }
.mu-menu__item[aria-checked="true"] .mu-menu__tick { background: var(--signal); }
.mu-menu__keys { font-family: var(--font-mono); font-size: 11px; color: var(--film-ink-3); }
.mu-menu__sub { font-size: 11px; color: var(--film-ink-3); }
/* A line said in a menu instead of items (Your plugins in a browser that can't reach them). */
.mu-menu__note { margin: 0; padding: 2px var(--s3) var(--s2); max-width: 30ch; font-size: 11.5px; line-height: 1.45; color: var(--film-ink-2); }

/* Your plugins (bridgeui.js): a menu of the visitor's own plugins, found by name or maker,
   and the one line that says what is needed first. Made of the menu's parts, so every look dresses it. */
.mu-plugs { display: flex; flex-direction: column; width: min(360px, calc(100vw - 16px)); max-width: min(360px, calc(100vw - 16px)); max-height: min(70vh, 560px); overflow: hidden; }
.mu-plugs > .mu-menu__head { flex: 0 0 auto; }
.mu-plugs__q { flex: 0 0 auto; margin: 2px var(--s1) var(--s2); }
.mu-plugs__line { flex: 0 0 auto; margin: 0; padding: 2px var(--s3) var(--s2); font-size: var(--t-sm); line-height: 1.45; color: var(--film-ink-2); }
.mu-plugs__acts { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0 var(--s3) var(--s3); }
.mu-plugs__acts > a { text-decoration: none; }
.mu-plugs__list { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; align-content: start; grid-auto-rows: max-content; /* (each row as tall as its two lines: in a list shorter than its rows, an auto row shrank to the min-height and the maker's line slid under the name) */ }
/* Two lines per plugin, each with a line height of its own (the menu's is tight, for one line), and
   the maker's set apart from the name by a quarter of the name's size: measured, scripts/music-qa/bridge-list-chrome.mjs. */
.mu-plugs__item { grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 0.25em; padding-block: 8px; align-content: center; }
.mu-plugs__item .mu-menu__label { grid-column: 2; grid-row: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.mu-plugs__item .mu-menu__sub { grid-column: 2 / 4; grid-row: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.mu-plugs__item .mu-menu__tick { grid-row: 1 / 3; }
.mu-plugs__item[aria-selected="true"] { background: var(--film-raise-hi); }
.mu-plugs__fmt { grid-column: 3; grid-row: 1; font-size: 10px; letter-spacing: 0.06em; color: var(--film-ink-3); }
.mu-plugs__more { margin: var(--s2) var(--s3); font-size: 11px; color: var(--film-ink-3); }
.mu-go--small { min-height: 30px; padding: 0 var(--s3); font-size: var(--t-xs); }

/* A window for one of the visitor's own plugins: its own window a press away, and the room's list of its settings. */
.mu-nf { display: grid; gap: var(--s3); min-width: 0; }
.mu-nf__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); }
.mu-nf__maker { font-size: var(--t-xs); color: var(--film-ink-3); }
.mu-nf__open { margin-left: auto; }
.mu-nf__line { margin: 0; font-size: var(--t-sm); line-height: 1.45; color: var(--film-ink-2); max-width: 60ch; }
.mu-nf > .mu-plugs__acts { padding: 0; }
.mu-nf__find .mu-input { width: 100%; box-sizing: border-box; }
.mu-nf__params { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s3) var(--s4); max-height: 46vh; overflow: auto; padding-right: var(--s2); }
/* A plugin's own names and words can be long: one line each, cut with an ellipsis (the whole name is the tip). */
.mu-nf__params > .mu-line { min-width: 0; }
.mu-nf__params .mu-line__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-nf__params .mu-line__read { max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.mu-nf__params > .mu-plugs__more { grid-column: 1 / -1; margin: 0; }

/* A plugin's own editor in its window (editorview.js): its picture at its own size, smaller in
   proportion when the window is narrower; its menus drawn over it; a calm line while one of its file
   dialogs is open on the Mac. The canvas takes the keyboard while focused (data-own-keys). */
.mu-nf__stage { min-width: 0; display: grid; justify-items: center; }
.mu-ed { position: relative; display: grid; justify-items: center; width: 100%; min-width: 0; }
.mu-ed__fit { position: relative; overflow: visible; border-radius: var(--mu-r-well); background: var(--film-well); box-shadow: 0 0 0 1px var(--film-rule); }
.mu-ed__canvas { display: block; width: 100%; height: 100%; border-radius: inherit; touch-action: none; outline: none; }
/* (Before its size is known: a well of the editor's usual proportions, while it comes.) */
.mu-ed:not([data-sized]) .mu-ed__fit { width: 100%; aspect-ratio: 5 / 3; max-height: 50vh; }
.mu-ed__canvas:focus-visible { box-shadow: 0 0 0 2px var(--signal); }
.mu-ed__layers { position: absolute; inset: 0; pointer-events: none; }
/* (A plugin's tooltip or small window: drawn only; the helper hit-tests input to it.) */
.mu-ed__layer { position: absolute; pointer-events: none; box-shadow: 0 10px 26px -10px rgb(0 0 0 / 0.55); }
.mu-ed__dialog { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: var(--s4); text-align: center; font-size: var(--t-sm); color: var(--film-ink); background: rgb(var(--mu-deep) / 0.72); border-radius: var(--mu-r-well); }
.mu-ed[data-dialog] .mu-ed__canvas { filter: saturate(0.4) brightness(0.6); }

/* Session settings, Plugins: what UC Plugin Bridge is doing, and its two buttons. */
.mu-plugrow > [data-plug-status] { min-width: 0; }
.mu-plugrow__acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s2); }
/* Menus with icons: the room's icon in the first column, the shortcut or
   the More chevron at the right; a checked item lights its icon. */
.mu-menu__ic { display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--film-ink-2); }
.mu-menu__ic .mu-ic { width: 16px; height: 16px; }
.mu-menu__item[aria-checked="true"] .mu-menu__ic { color: var(--signal); }
.mu-menu__item.is-danger .mu-menu__ic { color: currentColor; }
.mu-menu__go { display: inline-grid; place-items: center; color: var(--film-ink-3); }
.mu-menu__go .mu-ic { width: 14px; height: 14px; }
.mu-menu__item.is-back { color: var(--film-ink-2); }
/* A point a menu opens from (a right-click, a long press). */
.mu-point { position: fixed; width: 0; height: 0; pointer-events: none; }
/* A clip's name typed over the clip. */
.mu-rename--clip { position: fixed; z-index: 80; min-height: 26px; }
/* More sits clear of the line above it: its hover glow never reaches the
   section's hairline (owner, 11 October). */
.mu-ins__moresec { padding-top: var(--s2); }
.mu-ins__more { margin-top: 0; }

.mu-palette { position: absolute; z-index: 80; top: 72px; left: 50%; width: min(520px, calc(100% - 32px)); translate: -50% 0; padding: 8px; border-radius: var(--mu-r-panel); background: rgb(var(--mu-pop) / 0.98); box-shadow: 0 0 0 1px var(--film-rule), 0 24px 60px -20px rgb(0 0 0 / 0.75); animation: mu-rise var(--dur-face) var(--ease-soft) both; }
.mu-palette__q { width: 100%; min-height: 42px; padding: 0 var(--s4); border: 0; border-radius: var(--mu-r-control); background: var(--film-raise); color: var(--film-ink); font: inherit; font-size: var(--t-base); }
.mu-palette__q:focus { outline: none; box-shadow: 0 0 0 1px var(--signal); }
.mu-palette__list { display: grid; gap: 2px; max-height: 50vh; overflow: auto; margin-top: 6px; }
.mu-palette__item { display: flex; justify-content: space-between; gap: var(--s3); min-height: 36px; padding: 0 var(--s4); border: 0; border-radius: var(--mu-r-control); background: none; color: var(--film-ink); font: inherit; text-align: left; cursor: pointer; }
.mu-palette__item[aria-selected="true"], .mu-palette__item:hover { background: var(--film-raise-hi); }
.mu-palette__item kbd { font-family: var(--font-mono); font-size: 11px; color: var(--film-ink-3); }
/* A command's group beside its name (an instrument's: UC instruments, Your sounds), before its keys. */
.mu-palette__item > span:first-child { flex: 1 1 auto; min-width: 0; }
.mu-palette__sub { flex: none; align-self: center; font-size: var(--t-xs); color: var(--film-ink-3); white-space: nowrap; }
.mu-palette__none { margin: var(--s3); color: var(--film-ink-3); font-size: var(--t-sm); }

.mu-layer { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; padding: var(--s4); background: rgb(var(--shade-rgb) / 0.55); }
.mu-layer[hidden] { display: none; }
.mu-dialog { width: min(560px, 100%); max-height: calc(100% - 32px); overflow: auto; padding: var(--s5); border-radius: var(--mu-r-panel); background: var(--film-shell-solid); box-shadow: 0 0 0 1px var(--film-rule), 0 30px 80px -30px rgb(0 0 0 / 0.8); display: grid; gap: var(--s4); animation: mu-rise var(--dur-face) var(--ease-soft) both; }
.mu-dialog__text { margin: 0; color: var(--film-ink-2); line-height: 1.5; }
.mu-dialog h3 { margin: 0; font-size: var(--t-lg); font-weight: 400; letter-spacing: 0.01em; }
.mu-dialog__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.mu-field { display: grid; gap: 6px; font-size: var(--t-xs); color: var(--film-ink-2); }
/* Session settings: each choice its own size, a note beside it. */
.mu-field--row { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--s2); }
.mu-field--row > .mu-field__name { grid-column: 1 / -1; }
.mu-field--row > .mu-pills { width: max-content; }
.mu-field--row > .mu-field__note { margin-left: 0; }
.mu-input { min-height: 38px; padding: 0 var(--s3); border: 0; border-radius: var(--mu-r-control); background: var(--film-raise); color: var(--film-ink); font: inherit; font-size: var(--t-sm); box-shadow: inset 0 0 0 1px var(--mu-line); }
.mu-input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--signal); }
.mu-go { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s5); border: 0; border-radius: var(--mu-r-control); background: var(--signal-fill); color: var(--signal-ink); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; transition: background-color var(--dur-state) var(--ease), box-shadow var(--dur-face) var(--ease-soft); }
.mu-go:hover { background: var(--signal-fill-hover); box-shadow: var(--mu-ring-hover); }
.mu-go:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
.mu-go:disabled { opacity: 0.45; cursor: default; }
.mu-versions { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mu-versions .mu-btn { width: 100%; justify-content: space-between; }
.mu-versions__why { color: var(--film-ink-3); font-weight: 400; }

.mu-notice { position: absolute; left: 50%; bottom: var(--s4); z-index: 60; max-width: min(560px, calc(100% - 32px)); translate: -50% 0; padding: var(--s3) var(--s4); border-radius: var(--mu-r-panel); background: rgb(var(--mu-pop) / 0.96); box-shadow: 0 0 0 1px var(--film-rule); color: var(--film-ink); font-size: var(--t-sm); animation: mu-rise var(--dur-face) var(--ease-soft) both; }
.mu-notice[data-kind="bad"] { box-shadow: 0 0 0 1px var(--mu-bad); }
.mu-notice[hidden] { display: none; }
/* A notice never stands in the way of an effect window (a drag on a knob
   under it reaches the knob): beneath the windows in the stacking order,
   pressed through except on its own buttons, and moved aside of a window
   that would cover it (room.js placeNotice). */
.mu-notice { z-index: 17; pointer-events: none; transition: left var(--dur-face) var(--ease-soft); }
.mu-notice__act { pointer-events: auto; }
.mu-notice:has(.mu-notice__act) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding-right: 6px; width: max-content; max-width: min(760px, calc(100% - 32px)); border-radius: var(--mu-r-panel); }
.mu-notice__act { min-height: 32px; padding: 0 var(--s3); white-space: nowrap; flex: none; border: 0; border-radius: var(--mu-r-control); background: var(--signal-fill); color: var(--signal-ink); font: inherit; font-weight: 600; cursor: pointer; transition: background-color var(--dur-state) var(--ease); }
.mu-notice__act:hover { background: var(--signal-fill-hover); }
.mu-notice__act:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }

/* --- the dock: an effect's face ------------------------------------------------------------------ */

.mu-dock { border-top: var(--hairline) solid var(--mu-line); background: rgb(var(--mu-deep) / 0.35); max-height: 48vh; overflow: auto; overscroll-behavior: contain; transition: opacity var(--dur-face) var(--ease-soft), transform var(--dur-face) var(--ease-soft); }
.mu-dock[hidden] { display: none; }
.mu-dock[data-opening] { opacity: 0; transform: translateY(14px); }
/* Effect windows (windows.js): float over the middle, moved by their title
   strip, sized from the right edge, the bottom edge and the corner. The
   one in front has the brighter rim. */
.mu-main { position: relative; }
.mu-wins { position: absolute; inset: 0; z-index: 18; pointer-events: none; }
/* On a desktop they roam the whole browser window (windows.js): a layer of
   their own on the page, outside the island (its lean and light never touch
   them). Over the studio and the room's chrome (the island is the page's
   layer 0; in full screen the studio is 60), under the top bar's dial
   (50), the menus (90), the tips (95) and the site's sheets. Shown only
   while the studio is: leaving it, they fade out with it. */
.mu-float {
  --mu-bg: var(--film-shell-solid); --mu-line: var(--film-rule); --mu-water: var(--mu-lanes, rgb(var(--mu-deep) / 0.30));
  position: fixed; inset: 0; z-index: 45; pointer-events: none;
  visibility: hidden; opacity: 0;
  transition: opacity var(--dur-face) var(--ease), visibility 0s linear var(--dur-face);
}
html[data-room="music"] body:has(#face-music-edit.is-active) .mu-float { visibility: visible; opacity: 1; transition: opacity var(--dur-face) var(--ease), visibility 0s; }
/* Leaving the room and coming back (router.js journeys; styles.css data-journey and data-entering), the windows
   sink with the studio and come back with it, on its clock and in its motion. On their own they stood whole over
   the empty lake while the studio went under, and were back before it. */
html[data-room="music"][data-journey="depart"] .mu-float { animation: leave-sink 600ms var(--ease-soft) 150ms forwards; }
html[data-room="music"][data-journey="travel"] body:has(#face-music-edit.is-active) .mu-float { opacity: 0; transition: none; }
html[data-room="music"][data-entering] .mu-float { animation: enter-ripple var(--beat-assemble) var(--ease-soft) var(--enter-shell-at, 330ms) both; }
/* A phone's sheet sits on the page itself (windows.js), outside the island and that layer: it too shows only while the
   studio does, and sinks and comes back with it. Left alone it stayed whole over the next room. */
body > .mu-win { visibility: hidden; }
html[data-room="music"] body:has(#face-music-edit.is-active) > .mu-win { visibility: visible; }
html[data-room="music"][data-journey="travel"] body:has(#face-music-edit.is-active) > .mu-win { visibility: hidden; }
html[data-room="music"][data-journey="depart"] body > .mu-win { animation: leave-sink 600ms var(--ease-soft) 150ms forwards; }
html[data-room="music"][data-entering] body > .mu-win { animation: enter-ripple var(--beat-assemble) var(--ease-soft) var(--enter-shell-at, 330ms) both; }
html[data-mu-full] .mu-float { z-index: 65; }
.mu-float > .mu-palette { pointer-events: auto; z-index: 2147483000; }
/* A dialog of the studio open (export, settings): the windows go under the
   studio with everything else, shaded, and take no presses. */
body:has(.mu .mu-layer:not([hidden])) .mu-float { z-index: -1; filter: brightness(0.45); }
body:has(.mu .mu-layer:not([hidden])) .mu-float .mu-win { pointer-events: none; }
/* The top bar lies over the top of the page: only its own buttons take
   presses there, so a window's title strip under its empty stretch can
   still be grabbed. */
html[data-room="music"] body:has(#face-music-edit.is-active .mu) :is(.topbar, .topbar__nav) { pointer-events: none; }
html[data-room="music"] body:has(#face-music-edit.is-active .mu) :is(.topbar__mark, .topbar__nav > *) { pointer-events: auto; }
.mu-win {
  /* (The studio's own names, for the phone's sheet, which sits outside it.) */
  --mu-line: var(--film-rule);
  color: var(--film-ink); font-size: var(--t-sm);
  position: absolute; display: flex; flex-direction: column; min-width: 0; pointer-events: auto;
  border-radius: var(--mu-r-panel); background: rgb(var(--mu-pop));
  box-shadow: 0 0 0 1px var(--film-rule), 0 26px 60px -28px rgb(0 0 0 / 0.85);
  transition: opacity var(--dur-face) var(--ease-soft), transform var(--dur-face) var(--ease-soft), box-shadow var(--dur-state) var(--ease-soft);
  outline: none;
}
.mu-win[data-front] { box-shadow: 0 0 0 1px rgb(var(--mu-ice) / 0.34), 0 30px 70px -26px rgb(0 0 0 / 0.9); }
.mu-win[data-opening] { opacity: 0; transform: translateY(10px) scale(0.985); }
.mu-win[data-dragging] { transition: none; user-select: none; }
/* (Moved up as a row grows in, in the row's own time and ease: windows.js 'mu-grow'.) */
.mu-win[data-glide]:not([data-dragging]) { transition: opacity var(--dur-face) var(--ease-soft), transform var(--dur-face) var(--ease-soft), box-shadow var(--dur-state) var(--ease-soft), top var(--dur-face) var(--ease-soft); }
.mu-win__dock { flex: 1 1 auto; min-height: 0; overflow: hidden auto; overscroll-behavior: contain; border-radius: inherit; container: mu-pf / inline-size; display: flex; flex-direction: column; }
.mu-win__dock > .mu-pf { flex: 1 0 auto; }
/* A window shorter than what it holds scrolls, and shows it: a bar that
   stays, and the content fading at an edge it goes on past (the shared
   scroll cue, js/ui/scroll-cue.js). */
.mu-win__dock::-webkit-scrollbar { width: 10px; }
.mu-win__dock::-webkit-scrollbar-track { margin: 22px 0; background: transparent; }
.mu-win__dock::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: var(--mu-r-bar); background: rgb(var(--mu-ice) / 0.4) padding-box; }
.mu-win__dock::-webkit-scrollbar-thumb:hover { background-color: rgb(var(--mu-ice) / 0.6); }
@supports not selector(::-webkit-scrollbar) { .mu-win__dock { scrollbar-width: thin; scrollbar-color: rgb(var(--mu-ice) / 0.45) transparent; } }
.mu-win__dock:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -3px; }
.mu-win .mu-pf__head { cursor: grab; touch-action: none; padding-bottom: var(--s1); }
.mu-win[data-dragging="move"] .mu-pf__head { cursor: grabbing; }
.mu-win .mu-pf__head :is(button, input, uc-select, [role=radio], [role=switch], .mu-switch) { cursor: pointer; }
/* The grips never lie over a control (the owner, 8 October): each reaches
   at most 6 px into the window from the sides and the bottom, and the
   corner's 16 px, inside the face's own padding; the content stops 6 px
   above the bottom edge (its padding gives the 6 px back, so a window is
   as tall as before), so nothing scrolled to the bottom passes under the
   bottom grip either. */
.mu-win__grip { position: absolute; z-index: 2; touch-action: none; }
.mu-win__grip--r { top: 22px; bottom: 22px; right: -4px; width: 10px; cursor: ew-resize; }
.mu-win__grip--b { left: 22px; right: 22px; bottom: -4px; height: 10px; cursor: ns-resize; }
.mu-win__grip--rb { right: -4px; bottom: -4px; width: 20px; height: 20px; cursor: nwse-resize; }
@media (min-width: 641px) { .mu-win__dock { margin-bottom: 6px; } .mu-win .mu-pf { padding-bottom: calc(var(--s4) - 6px); } }
.mu-win__grip--rb::after { content: ""; position: absolute; right: 7px; bottom: 7px; width: 7px; height: 7px; border-right: 1.5px solid rgb(var(--mu-mist) / 0.28); border-bottom: 1.5px solid rgb(var(--mu-mist) / 0.28); border-bottom-right-radius: 4px; transition: border-color var(--dur-state) var(--ease-soft); }
.mu-win__grip--rb:hover::after, .mu-win[data-dragging="rb"] .mu-win__grip--rb::after { border-color: rgb(var(--mu-mist) / 0.6); }
/* The close button keeps the top right corner however the strip wraps. */
.mu-win .mu-pf__head { position: relative; padding-right: 44px; }
.mu-win .mu-pf__close { position: absolute; top: 0; right: 0; margin: 0; }
@media (prefers-reduced-motion: reduce) { .mu-win { transition: none; } }
@media (max-width: 640px) {
  /* On a phone an effect is a sheet from the bottom, one at a time. */
  .mu-win { position: fixed; inset: auto 0 0 0 !important; width: auto !important; height: auto !important; max-height: 86dvh !important; border-radius: var(--mu-r-panel) var(--mu-r-panel) 0 0; z-index: 80; padding-bottom: env(safe-area-inset-bottom); }
  .mu-win[data-opening] { transform: translateY(40px); }
  .mu-win__grip { display: none; }
  .mu-win .mu-pf__head { cursor: auto; }
  .mu-win::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: var(--mu-r-bar); background: rgb(var(--mu-mist) / 0.18); pointer-events: none; }
  .mu-win .mu-pf { padding-top: var(--s4); }
}
.mu-pf { display: grid; gap: var(--s3); padding: var(--s3) var(--s4) var(--s4); align-content: start; }
.mu-pf__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.mu-pf__name { margin: 0; font-size: var(--t-md); font-weight: 400; letter-spacing: 0.02em; white-space: nowrap; }
.mu-pf__where { flex: 1 1 0; min-width: 0; font-size: var(--t-xs); color: var(--film-ink-3); margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-pf__head > * { flex-shrink: 0; }
.mu-pf__lat { font-size: 11px; color: var(--film-ink-3); white-space: nowrap; }
.mu-pf__lat[hidden] { display: none; }
.mu-pf__head > .mu-pf__where { flex-shrink: 1; }
.mu-pf__where[hidden] { display: none; }
.mu-pf__head:has(> .mu-pf__where[hidden]) > .mu-pf__name { margin-right: auto; }
/* Knobs and drawings in proportion to the window: smaller in a narrow
   one, larger in a wide one. */
.mu-pf { --kn: 42px; }
.mu-pf .mu-knob--m .mu-knob__dial svg { width: var(--kn); height: var(--kn); }
.mu-pf .mu-knob--l .mu-knob__dial svg { width: calc(var(--kn) * 1.24); height: calc(var(--kn) * 1.24); }
@container mu-pf (max-width: 480px) {
  .mu-pf { --kn: 34px; padding-left: var(--s3); padding-right: var(--s3); }
  .mu-pf__grid { --cell: 66px; }
  .mu-pf__sw .mu-switch__name { font-size: 11px; }
}
@container mu-pf (min-width: 900px) {
  .mu-pf { --kn: 48px; }
  .mu-pf__grid { --cell: 92px; }
}
.mu-pf__sw { display: flex; gap: var(--s2); }
.mu-pf__close { margin-left: var(--s1); }
.mu-pf__body { display: grid; gap: var(--s4); align-content: start; min-width: 0; }
/* A face's controls: choices in a row, then knobs in even columns. As a
   window narrows they reflow by whole columns, then the knobs and the
   drawings get smaller (container queries below), and the window stops at
   a size everything still fits (windows.js). */
.mu-pf__knobs { display: grid; gap: var(--s4); min-width: 0; }
.mu-pf__modes { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center; min-width: 0; }
.mu-pf__modes > * { min-width: 0; max-width: 100%; }
.mu-pf__modes .mu-pills { max-width: 100%; }
.mu-pf__grid {
  --cell: 78px;
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s2);
  max-width: calc(var(--n, 8) * (var(--cell) + 34px)); min-width: 0; align-items: flex-start;
}
.mu-pf__grid > * { flex: 0 0 var(--cell); min-width: 0; }
.mu-pf__grid > .mu-knob { min-width: 0; }
/* The output and the ceiling at the bottom right: the knobs take the whole width, those two pushed to its end. */
.mu-pf__grid[data-corner] { max-width: none; }
.mu-pf__grid > .mu-pf__corner { margin-left: auto; }
.mu-pf__grid > .mu-pf__corner + .mu-pf__corner { margin-left: 0; }
/* A row of choices beside which a knob can appear keeps a knob's height, so it appearing does not grow the window. */
.mu-pf__modes[data-tall] { min-height: calc(var(--kn) + 52px); }
.mu-pf__modes > .mu-knob { flex: 0 0 auto; min-width: calc(var(--cell, 78px) + 14px); }
.mu-pf__modes > .mu-pf__end { margin-left: auto; }
.mu-pf__ghost { visibility: hidden; }
.mu-pf__grid .mu-knob__name { max-width: 100%; white-space: normal; text-align: center; line-height: 1.2; overflow-wrap: anywhere; }
.mu-pf__grid > .mu-select { align-self: center; }
.mu-pf__more { justify-self: start; }
.mu-pf__choice { display: grid; justify-items: center; gap: 6px; align-self: center; }
/* (The riders' choice reads as a heading over its pills: "Listens for", then Esses / Consonants / Both.) */
.mu-pf[data-face="rider"] .mu-pf__choice { justify-items: start; }
.mu-pf[data-face="rider"] .mu-pf__choice > .mu-knob__name { order: -1; }
.mu-pf__more svg { transition: transform var(--dur-state) var(--ease-soft); }
.mu-pf__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.mu-pf__detail { padding-top: var(--s3); border-top: 1px solid var(--mu-line); }
.mu-pf__detail[hidden] { display: none; }
.mu-notes__body { display: grid; }
.mu-notes__can { width: 100%; height: clamp(260px, 38vh, 420px); display: block; border-radius: var(--mu-r-well); background: linear-gradient(180deg, rgb(var(--mu-mist) / 0.03), rgb(var(--mu-deep) / 0.45)); box-shadow: inset 0 0 0 1px var(--mu-line); touch-action: none; }
.mu-notes__can:focus-visible:not([data-pointer]) { outline: 2px solid var(--film-ink); outline-offset: 2px; }
.mu-notes__can[data-pointer]:focus-visible, .mu-ar__lanes[data-pointer]:focus-visible { outline: none; }
.mu-notes__grid, .mu-notes__step, .mu-notes__lane { display: inline-flex; align-items: center; }
/* The key, in one compact row: its root and scale as small drop-downs, Find, Fold. */
.mu-notes__key { display: inline-flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.mu-notes__key .mu-select { display: inline-flex; align-items: center; gap: 6px; }
.mu-notes__key .mu-select:nth-of-type(2) .mu-select__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mu-notes__key uc-select { min-height: 30px; font-size: var(--t-xs); }
.mu-notes__key .mu-select:first-of-type uc-select { width: 64px; }
.mu-notes__key .mu-select:nth-of-type(2) uc-select { width: 150px; }
.mu-notes__view { display: inline-flex; align-items: center; }

/* --- the step grid (steps.js): the same clip's notes as a drum machine's
   steps. A row of the instrument's keys for each sound (the track headers'
   own M and S beside its name, so every look dresses them as its keys), a
   beat to a group, a lamp above each step; a hit is the step lit, as high
   as it is loud. As tall as the piano roll's well, so the dock keeps its
   height when the view changes. -------------------------------------------------------------- */
.mu-st {
  --st-row: 24px; --st-min: 18px; --st-gap: 2px; --st-beat: 7px; --st-head: 150px; --st-fam: 9px;
}
.mu-st__ctl { display: inline-flex; align-items: center; }
/* (In the header the swing is one row: its name, the line, the figure; each look places a line's figure over its track, hence the weight.) */
.mu-st .mu-st__swing .mu-line { grid-template-columns: auto minmax(84px, 120px) 4ch; grid-template-rows: 26px; column-gap: var(--s2); }
.mu-st .mu-st__swing .mu-line__track { grid-column: 2; grid-row: 1; }
.mu-st .mu-st__swing .mu-line__read { grid-column: 3; grid-row: 1; }
/* The clip's name and track stay whole; the header wraps before they are
   cut, and the close button keeps the top right corner however it wraps,
   in both views of the notes (a close button alone on a row of its own was
   what the piano roll's header came to at 1024 px, its View pills added). */
:is(.mu-st, .mu-notes) .mu-pf__head { position: relative; min-height: 34px; padding-right: 44px; }
.mu-st .mu-pf__head > .mu-pf__where { flex: 0 1 auto; min-width: max-content; }
:is(.mu-st, .mu-notes) .mu-pf__head > .mu-pf__close { position: absolute; top: 0; right: 0; margin: 0; }
.mu-st__body {
  position: relative; height: clamp(260px, 38vh, 420px); overflow: auto; overscroll-behavior: contain;
  border-radius: var(--mu-r-well); background: var(--mu-lanes, var(--film-shell-solid)); box-shadow: inset 0 0 0 var(--hairline) var(--mu-line);
  scroll-padding: 26px 0 0 var(--st-head); --cue-inset-left: var(--st-head); --cue-inset-top: 26px;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.mu-st__body::-webkit-scrollbar { width: 10px; height: 10px; }
.mu-st__body::-webkit-scrollbar-track { background: transparent; }
.mu-st__body::-webkit-scrollbar-corner { background: transparent; }
.mu-st__body::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: var(--mu-r-bar); background: rgb(var(--mu-ice) / 0.4) padding-box; }
.mu-st__body::-webkit-scrollbar-thumb:hover { background-color: rgb(var(--mu-ice) / 0.6); }
@supports not selector(::-webkit-scrollbar) { .mu-st__body { scrollbar-width: thin; scrollbar-color: rgb(var(--mu-ice) / 0.45) transparent; } }
.mu-st__grid { position: relative; display: flex; flex-direction: column; width: max-content; min-width: 100%; padding: 0 var(--s3) var(--s3) 0; box-sizing: border-box; }
/* The ruler: a lamp over each step, the beats counted (bars on their own, then bar.beat). */
.mu-st__top { position: sticky; top: 0; z-index: 3; display: flex; padding-top: 4px; background: var(--mu-lanes, var(--film-shell-solid)); touch-action: pan-x; }
.mu-st__corner { position: sticky; left: 0; z-index: 4; flex: none; width: var(--st-head); align-self: stretch; background: var(--mu-lanes, var(--film-shell-solid)); }
.mu-st__ruler { display: flex; flex: 1 0 auto; gap: var(--st-gap); height: 22px; align-items: flex-end; padding-bottom: 4px; }
.mu-st__tick { position: relative; flex: 1 1 0; min-width: var(--st-min); height: 3px; border-radius: 1px; background: rgb(var(--mu-mist) / 0.1); transition: background-color 90ms var(--ease); }
.mu-st__tick[data-beat] { background: rgb(var(--mu-mist) / 0.22); }
.mu-st__tick[data-beat]:not([data-k="0"]) { margin-left: calc(var(--st-beat) - var(--st-gap)); }
/* (M and S's room in the ruler, on a phone, where they scroll with the steps.) */
.mu-st__gap { flex: none; width: 0; margin-right: calc(var(--st-gap) * -1); }
.mu-st__tick b { position: absolute; left: 0; bottom: 6px; font: 600 10px/1 var(--font-mono); color: var(--film-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mu-st__tick[data-bar] b { color: var(--film-ink-2); }
.mu-st__tick[data-now] { background: var(--signal); transition-duration: 0ms; }
.mu-st__row { display: flex; align-items: center; margin-top: 3px; }
.mu-st__row[data-fam] { margin-top: var(--st-fam); }
.mu-st__head { position: sticky; left: 0; z-index: 2; flex: none; display: flex; align-items: center; gap: 4px; width: var(--st-head); box-sizing: border-box; padding: 0 10px 0 8px; align-self: stretch; background: var(--mu-lanes, var(--film-shell-solid)); touch-action: pan-y; }
.mu-st__name {
  flex: 1 1 auto; min-width: 0; height: var(--st-row); padding: 0 6px; border: 0; border-radius: var(--mu-r-control);
  background: none; color: var(--film-ink-2); font: inherit; font-size: var(--t-xs); font-weight: 600; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  transition: background-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
}
.mu-st__name:hover { color: var(--film-ink); background: rgb(var(--mu-mist) / 0.06); }
.mu-st__name:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; }
.mu-st__name[data-heard] { color: var(--signal-ink); background: var(--signal); transition-duration: 0ms; }
.mu-st__head > .mu-hb { flex: none; }
.mu-st__steps { position: relative; display: flex; gap: var(--st-gap); flex: 1 0 auto; }
/* A step: one of the room's keys (each look dresses .mu-hb), as wide as the row allows. */
.mu-st__steps > .mu-hb.mu-st__step { position: relative; flex: 1 1 0; min-width: var(--st-min); width: auto; height: var(--st-row); overflow: hidden; touch-action: none; }
.mu-st__steps > .mu-st__step[data-beat]:not(:first-child) { margin-left: calc(var(--st-beat) - var(--st-gap)); }
.mu-st__lamp { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--v, 0) * 100%); border-radius: inherit; background: var(--signal); opacity: 0; pointer-events: none; transition: opacity var(--dur-state) var(--ease), height var(--dur-state) var(--ease); }
.mu-st__steps > .mu-st__step[aria-pressed="true"] { background-color: rgb(var(--mu-ice) / 0.24); }
.mu-st__step[aria-pressed="true"] > .mu-st__lamp { opacity: 1; }
/* Past the clip's end (a clip cut shorter than its pattern): not heard. */
.mu-st__step[data-past] { opacity: 0.4; }
/* A row that is not heard (muted, or not soloed while another is): its hits in the ink, not the light. */
.mu-st__row[data-silent] .mu-st__lamp { background: rgb(var(--mu-mist) / 0.42); }
.mu-st__row[data-silent] .mu-st__steps > .mu-st__step[aria-pressed="true"] { background-color: rgb(var(--mu-mist) / 0.1); }
.mu-st__row[data-silent] .mu-st__name { color: var(--film-ink-3); }
/* A note between steps (played, or written on a finer step): a hairline where it is. */
.mu-st__off { position: absolute; top: 4px; bottom: 4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--signal); pointer-events: none; }
.mu-st__row[data-silent] .mu-st__off { background: rgb(var(--mu-mist) / 0.42); }
/* The playhead, as the arrangement's: the light's line, across every row. */
.mu-st__now { position: absolute; left: 0; z-index: 1; width: 2px; margin-left: -1px; background: var(--signal); box-shadow: var(--mu-playhead-glow); pointer-events: none; will-change: transform; }
.mu-st__now[hidden] { display: none; }
.mu-st__read { position: absolute; left: 0; top: 0; z-index: 5; padding: 3px 7px; border-radius: var(--mu-r-control); background: rgb(var(--mu-pop)); color: var(--film-ink); font-size: 11px; white-space: nowrap; box-shadow: 0 0 0 1px var(--mu-line); pointer-events: none; margin-top: -4px; }
.mu-st__read[hidden] { display: none; }
.mu-st__foot { position: sticky; left: 0; width: max-content; padding: var(--s2) 0 0 8px; }
.mu-st__more .mu-ic { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .mu-st__lamp, .mu-st__tick, .mu-st__name { transition: none; } }
/* A finger: every step, name and key a finger square; the grid scrolls
   sideways with two fingers, a finger on the ruler, or the bar. A name too
   long for its key breaks onto a second line rather than being cut. */
@media (pointer: coarse) {
  .mu-st { --st-row: var(--hit, 44px); --st-min: var(--hit, 44px); --st-gap: 3px; --st-beat: 9px; --st-head: 188px; }
  .mu-st .mu-st__head > .mu-hb { width: var(--hit, 44px); height: var(--hit, 44px); }
  .mu-st__name { white-space: normal; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; line-height: 1.15; text-overflow: clip; }
  .mu-st .mu-st__swing .mu-line { grid-template-rows: var(--hit, 44px); }
  :is(.mu-st, .mu-notes) .mu-pf__head { padding-right: 52px; }
  :is(.mu-st, .mu-notes) .mu-pf__head > .mu-pf__close { width: var(--hit, 44px); height: var(--hit, 44px); }
}
/* A phone: only the names stay put (a frozen first column); M and S
   scroll away with the steps, so a few more steps show beside the names. */
@media (max-width: 640px) {
  .mu-st { --st-name: 70px; --st-key: 26px; --st-head: var(--st-name); }
  .mu-st__head { display: contents; }
  .mu-st__name { position: sticky; left: 0; z-index: 2; flex: none; width: var(--st-name); margin-right: 4px; padding: 0 4px 0 8px; border-radius: 0; background: var(--mu-lanes, var(--film-shell-solid)); }
  .mu-st__name:hover { background: linear-gradient(rgb(var(--mu-mist) / 0.06), rgb(var(--mu-mist) / 0.06)), var(--mu-lanes, var(--film-shell-solid)); }
  .mu-st .mu-st__head > .mu-hb { width: var(--st-key); margin-right: 4px; }
  .mu-st .mu-st__head > .mu-hb--s { margin-right: 6px; }
  .mu-st__gap { width: calc(var(--st-key) * 2 + 14px); }
  .mu-st__foot { padding-left: 0; }
}
@media (max-width: 640px) and (pointer: coarse) { .mu-st { --st-name: 74px; --st-key: var(--hit, 44px); } }
.mu-viz { width: 100%; display: block; border-radius: var(--mu-r-well); background: linear-gradient(180deg, rgb(var(--mu-mist) / 0.04), rgb(var(--mu-deep) / 0.5)); box-shadow: inset 0 0 0 1px var(--mu-line); touch-action: none; }
.mu-viz:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
.mu-viz--tame { height: clamp(150px, 30cqw, 340px); }
/* Place: the pad, with its controls beside it in a wide window and under it
   in a narrow one (pluginface.js #placeFace). The picture of the space has
   one shape, whatever the pad is given: as large as fits in it, centred,
   the rest of the pad left empty. (The pad stretched to the controls'
   height and the picture with it, so Headphones 3D -- its head picker
   making that column taller -- and every resize squashed or stretched
   the room.) The shape is the one the window opens with. The pad is a
   size container, so the canvas's own pixel size never feeds back into
   the layout. */
.mu-place { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); min-width: 0; }
.mu-place__pad { --place-aspect: 1.94; position: relative; min-width: 0; height: clamp(200px, 50cqw, 300px); container-type: size; }
.mu-place__pad > .mu-viz--place { position: absolute; inset: 0; margin: auto; width: min(100cqw, 100cqh * var(--place-aspect)); height: min(100cqh, 100cqw / var(--place-aspect)); cursor: grab; }
.mu-place__side { display: grid; gap: var(--s3); align-content: start; min-width: 0; }
.mu-place__side .mu-pf__more { justify-self: start; }
/* (Headphones 3D's own choices, under its switch: shown only when it holds something.) */
.mu-place__heads { display: grid; gap: var(--s2); min-width: 0; }
.mu-place__heads[hidden] { display: none; }
.mu-place__headrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s2); align-items: center; min-width: 0; font-size: var(--t-xs); color: var(--film-ink-2); }
.mu-place__headrow > uc-select { grid-column: 1 / -1; min-width: 0; }
/* (The column is as wide as its knobs; a longer head's name does not widen it and move the pad.) */
.mu-place__heads { width: 0; min-width: 100%; }
@container mu-pf (min-width: 600px) {
  .mu-place { grid-template-columns: minmax(0, 1fr) auto; }
  .mu-place__pad { height: auto; min-height: 260px; }
  /* Two knobs to a row beside the pad. */
  .mu-place__side .mu-pf__grid { width: calc(2 * var(--cell) + var(--s2)); }
}
/* A window given a height of its own: the pad takes what is spare. */
.mu-win[data-fixed] .mu-pf[data-face="place"] { display: flex; flex-direction: column; }
.mu-win[data-fixed] .mu-pf[data-face="place"] > .mu-pf__body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.mu-win[data-fixed] .mu-pf[data-face="place"] .mu-place { flex: 1 1 auto; grid-template-rows: minmax(200px, 1fr) auto; }
@container mu-pf (min-width: 600px) { .mu-win[data-fixed] .mu-pf[data-face="place"] .mu-place { grid-template-rows: minmax(260px, 1fr); } .mu-win[data-fixed] .mu-pf[data-face="place"] .mu-place__pad { height: auto; } }
.mu-win[data-fixed] .mu-pf[data-face="place"] .mu-place__pad { height: auto; }
.mu-viz--spectrum { height: clamp(130px, 28cqw, 340px); }
.mu-viz--scope { height: clamp(160px, 32cqw, 360px); }
.mu-viz--tuner { height: clamp(110px, 22cqw, 220px); }
.mu-viz--lm { height: 96px; }
.mu-viz[data-dragging] { cursor: grabbing; }
.mu-gr--row { justify-items: stretch; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2); max-width: 320px; }
.mu-gr--row .mu-gr__bar { width: auto; height: 8px; }
.mu-gr--row .mu-gr__bar::after { inset: 0 auto 0 0; height: auto; width: calc(var(--gr, 0) * 100%); transition: width 80ms linear; }
.mu-tuner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4); align-items: center; }
.mu-tuner__read { display: grid; justify-items: center; gap: 2px; min-width: 112px; }
.mu-tuner__note { font-size: 44px; line-height: 1; font-weight: 300; letter-spacing: 0.02em; color: var(--film-ink); transition: color var(--dur-state) var(--ease); }
.mu-tuner__note[data-in] { color: var(--signal); }
.mu-tuner__cents { font-size: var(--t-sm); color: var(--film-ink-2); min-height: 1.3em; }
.mu-tuner__hz { font-size: var(--t-xs); color: var(--film-ink-3); min-height: 1.3em; }
.mu-lm { display: grid; gap: var(--s3); }
.mu-lm__nums { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); }
.mu-lm__num { display: grid; gap: 2px; justify-items: start; padding: var(--s2) var(--s3); border-radius: var(--mu-r-card); background: rgb(var(--mu-mist) / 0.05); }
.mu-lm__v { font-size: 22px; line-height: 1.1; color: var(--film-ink); font-variant-numeric: tabular-nums; }
.mu-lm__n { font-size: var(--t-xs); color: var(--film-ink-3); }
.mu-lm__num[data-k="i"] .mu-lm__v { color: var(--signal); }
.mu-lm__num[data-over] .mu-lm__v { color: var(--mu-bad); }
@media (max-width: 560px) { .mu-lm__nums { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mu-tuner { grid-template-columns: 1fr; } }
.mu-verb__can { width: 100%; height: clamp(110px, 24cqw, 260px); display: block; border-radius: var(--mu-r-well); background: linear-gradient(180deg, rgb(var(--mu-mist) / 0.04), rgb(var(--mu-deep) / 0.5)); box-shadow: inset 0 0 0 1px var(--mu-line); }
/* --- the Sampler (samplerface.js) ---------------------------------------------------------------
   Its sound's well (a drop goes on it; Start, End and Loop from are handles on its picture), how it
   plays, its own keyboard, its knobs and its zones under their heading. */
.mu-smp { display: grid; gap: var(--s4); min-width: 0; }
.mu-smp__well { position: relative; height: clamp(150px, 26cqw, 230px); min-width: 0; overflow: hidden; touch-action: none; transition: box-shadow var(--dur-state) var(--ease); }
.mu-smp__top { position: absolute; z-index: 2; top: 8px; left: 8px; right: 8px; display: flex; align-items: center; gap: var(--s2); min-width: 0; pointer-events: none; }
.mu-smp__top > * { pointer-events: auto; }
.mu-smp__sound { min-width: 0; max-width: calc(100% - 64px); }
.mu-smp__soundname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-smp__len { font-size: 11px; color: var(--film-ink-2); white-space: nowrap; }
.mu-smp__can { position: absolute; left: 0; right: 0; top: 42px; bottom: 0; width: 100%; height: calc(100% - 42px); display: block; cursor: pointer; }
.mu-smp[data-has="none"] .mu-smp__can { top: 0; height: 100%; cursor: default; }
.mu-smp__empty { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: var(--s3); padding: var(--s4); text-align: center; }
.mu-smp__drop { margin: 0; font-size: var(--t-base); color: var(--film-ink-2); }
/* A drop aimed here: the well lit, and what letting go will do said in its middle. */
.mu-smp__ready { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; margin: 0; background: rgb(var(--mu-deep) / 0.82); color: var(--film-ink); font-size: var(--t-base); font-weight: 600; opacity: 0; pointer-events: none; transition: opacity var(--dur-state) var(--ease); }
/* (Over a look's own well: one class more than its rule.) */
.mu-smp :is(.mu-smp__well, .mu-smp__zmap)[data-drop-ready] { box-shadow: inset 0 0 0 2px var(--signal), 0 0 0 1px var(--signal); }
.mu-smp :is(.mu-smp__well, .mu-smp__zmap)[data-drop-ready] .mu-smp__ready { opacity: 1; }
/* (The ring on what lies over the well too: an inset shadow is drawn under what a box holds.) */
.mu-smp__ready { border-radius: inherit; box-shadow: inset 0 0 0 2px var(--signal); }
.mu-smp__well[data-drop-ready] .mu-smp__empty { visibility: hidden; }
.mu-smp__zmap { position: relative; border-radius: var(--mu-r-well); }
/* Start, End and Loop from: a line on the picture and a tab to hold it by; a finger's reach on a touch screen. */
.mu-smp__h { position: absolute; z-index: 2; top: 42px; bottom: 0; width: 16px; margin-left: -8px; cursor: ew-resize; touch-action: none; outline: none; }
.mu-smp__h::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--signal); }
.mu-smp__h::after { content: ""; position: absolute; left: 2px; bottom: 0; width: 12px; height: 16px; border-radius: 3px 3px 0 0; background: var(--signal); transition: background-color var(--dur-state) var(--ease); }
.mu-smp__h--lstart::before { background: rgb(var(--mu-ice) / 0.75); }
.mu-smp__h--lstart::after { top: 0; bottom: auto; height: 12px; border-radius: 0 0 3px 3px; background: rgb(var(--mu-ice) / 0.75); }
.mu-smp__h:hover::after, .mu-smp__h[data-dragging]::after { background: var(--film-ink); }
.mu-smp__h:focus-visible::after { box-shadow: 0 0 0 2px var(--film-ink); }
.mu-smp__bar { align-items: flex-start; }
/* Its keyboard: the room's keys (music.css .mu-key), the root marked, slices numbered. */
.mu-smp { --smp-keys: 92px; }
.mu-smp__keys { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: var(--smp-keys); grid-template-areas: "down bed up"; align-items: stretch; gap: var(--s2); min-width: 0; }
.mu-smp__keys > [data-oct="-1"] { grid-area: down; }
.mu-smp__keys > [data-oct="1"] { grid-area: up; }
.mu-smp__keys > .mu-smp__bed { grid-area: bed; }
/* A narrow window or a phone's sheet: the octave steps above the keys, so the keys have the whole width (a finger's each). */
@container mu-pf (max-width: 520px) {
  .mu-smp__keys { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto var(--smp-keys); grid-template-areas: "down . up" "bed bed bed"; row-gap: var(--s1); }
}
.mu-smp__oct { align-self: center; }
.mu-smp__bed { position: relative; min-width: 0; overflow: hidden; border-radius: 0 0 6px 6px; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; box-shadow: 0 -2px 0 rgb(var(--mu-deep) / 0.9); }
.mu-smp__bed .mu-key[data-root]::before { content: ""; position: absolute; z-index: 1; left: 50%; bottom: 4px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--signal); }
.mu-smp__bed .mu-key--b[data-root]::before { bottom: 6px; }
.mu-smp__bed .mu-key[data-quiet] { filter: brightness(0.72); }
.mu-key__n { position: absolute; z-index: 1; top: 5px; left: 0; right: 0; text-align: center; font-size: 10px; font-weight: 600; line-height: 1; color: rgb(var(--mu-cv-key-black, var(--mu-deep)) / 0.7); pointer-events: none; }
.mu-key--b .mu-key__n { color: rgb(var(--mu-cv-key-white, var(--mu-mist)) / 0.75); }
.mu-smp__keys .mu-key__k { bottom: 13px; }
.mu-smp__keys .mu-key__c { bottom: 30px; }
.mu-smp__knobs { min-width: 0; }
.mu-smp__zones { display: grid; gap: var(--s3); min-width: 0; }
.mu-smp__zhead { gap: 6px; }
.mu-smp__zcount { color: var(--film-ink-3); }
@media (pointer: coarse) {
  .mu-smp { --smp-keys: 128px; }
  .mu-smp__h { width: var(--hit, 44px); margin-left: calc(var(--hit, 44px) / -2); }
  .mu-smp__h::before { left: calc(50% - 1px); }
  .mu-smp__h::after { left: calc(50% - 7px); width: 14px; height: 20px; }
  .mu-smp__h--lstart::after { height: 14px; }
  .mu-smp__oct { width: var(--hit, 44px); min-height: var(--hit, 44px); }
}
@media (prefers-reduced-motion: reduce) { .mu-smp__ready, .mu-smp__well, .mu-smp__h::after { transition: none; } }

/* --- a Sampler from a drop: the place under the tracks for a new one, and a Sampler track's header -------------------- */
.mu-ar__newsmp { grid-area: heads; align-self: end; z-index: 3; display: none; margin: 6px; min-height: 52px; border-radius: var(--mu-r-card); background: rgb(var(--mu-pop) / 0.94); box-shadow: inset 0 0 0 1px rgb(var(--mu-ice) / 0.34); color: var(--film-ink-2); pointer-events: auto; transition: background-color var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease), color var(--dur-state) var(--ease); }
.mu[data-carrying] .mu-ar__newsmp { display: grid; place-items: center; }
.mu-ar__newsmp-in { display: inline-flex; align-items: center; gap: 8px; padding: 0 var(--s3); font-size: var(--t-sm); font-weight: 600; text-align: center; }
.mu-ar__newsmp-in .mu-ic { flex: none; width: 18px; height: 18px; }
.mu-ar__newsmp[data-drop-ready] { background: rgb(var(--mu-ice) / 0.2); box-shadow: inset 0 0 0 2px var(--signal); color: var(--film-ink); }
.mu-head[data-drop-ready] { background: rgb(var(--mu-ice) / 0.16); box-shadow: inset 0 0 0 2px var(--signal); }
.mu-ar__empty-go [data-drop-ready] { box-shadow: 0 0 0 2px var(--signal); background: var(--film-raise-hi); }
@media (prefers-reduced-motion: reduce) { .mu-ar__newsmp { transition: none; } }

.mu-zones__can { width: 100%; height: clamp(130px, 26cqw, 300px); display: block; border-radius: var(--mu-r-well); background: linear-gradient(180deg, rgb(var(--mu-mist) / 0.04), rgb(var(--mu-deep) / 0.5)); box-shadow: inset 0 0 0 1px var(--mu-line); touch-action: none; }
.mu-zones__can:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
.mu-zones__bar { display: flex; flex-wrap: wrap; gap: var(--s2); }
.mu-zones__zone { padding: var(--s3); border-radius: var(--mu-r-card); box-shadow: inset 0 0 0 1px var(--mu-line); }

.mu-eq { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); }
.mu-eq__can { width: 100%; height: clamp(140px, 30cqw, 340px); display: block; border-radius: var(--mu-r-well); background: linear-gradient(180deg, rgb(var(--mu-mist) / 0.04), rgb(var(--mu-deep) / 0.5)); box-shadow: inset 0 0 0 1px var(--mu-line); cursor: crosshair; touch-action: none; }
.mu-eq__bands { display: grid; grid-template-columns: repeat(2, 30px); align-content: start; gap: 6px; }
.mu-eq__band { width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--mu-r-icon); background: rgb(var(--mu-mist) / 0.06); color: var(--film-ink-3); font: inherit; font-size: var(--t-xs); font-weight: 700; cursor: pointer; }
.mu-eq__band[data-on="true"] { color: var(--film-ink); background: rgb(var(--mu-mist) / 0.14); }
.mu-eq__band[aria-checked="true"] { background: var(--signal); color: var(--signal-ink); }
.mu-eq__band:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
.mu-eq__read { position: absolute; top: 0; left: 0; padding: 3px var(--s2); border-radius: var(--mu-r-control); background: rgb(var(--mu-pop) / 0.92); font-size: var(--t-xs); pointer-events: none; }
.mu-eq__ctl { display: grid; gap: var(--s3); }
.mu-eq__row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

.mu-comp { display: grid; grid-template-columns: auto 26px; gap: var(--s3); justify-content: start; }
.mu-comp__can[hidden] { display: none; }
.mu-comp__can { width: clamp(150px, 30cqw, 300px); height: auto; aspect-ratio: 1; border-radius: var(--mu-r-well); background: rgb(var(--mu-deep) / 0.45); box-shadow: inset 0 0 0 1px var(--mu-line); }
.mu-gr { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 4px; justify-items: center; }
.mu-gr__bar { position: relative; width: 8px; border-radius: var(--mu-r-bar); background: rgb(var(--mu-mist) / 0.08); overflow: hidden; }
.mu-gr__bar::after { content: ""; position: absolute; inset: 0 0 auto; height: calc(var(--gr, 0) * 100%); background: var(--signal); transition: height 80ms linear; }
.mu-gr__num { font-size: 10.5px; color: var(--film-ink-2); }

/* --- the phone ------------------------------------------------------------------------------------------ */

.mu-phonebar { display: none; }
@media (max-width: 980px) {
  .mu-main { grid-template-columns: minmax(0, 1fr); }
  .mu-inspect { position: absolute; inset: 60px 0 0 auto; width: min(340px, 92%); z-index: 20; background: var(--film-shell-solid); box-shadow: -1px 0 0 var(--mu-line); transform: translateX(105%); transition: transform var(--dur-face) var(--ease-soft); }
  .mu[data-panel="inspect"] .mu-inspect { transform: none; }
  .mu-main:has(> .mu-inspect[data-empty]) { grid-template-columns: minmax(0, 1fr); }
  .mu:has(.mu-inspect[data-empty]) .mu-phonebar { display: none; }
  /* (The inspector is Arrange's: in Mix and Master a choice there opens nothing, so no Settings bar.) */
  .mu:is([data-view="mix"], [data-view="master"]) .mu-phonebar { display: none; }
  .mu[data-panel="inspect"]:has(.mu-inspect[data-empty]) .mu-inspect { transform: translateX(105%); }
  .mu-phonebar { display: flex; justify-content: flex-end; gap: var(--s2); padding: var(--s2) var(--s3); border-top: var(--hairline) solid var(--mu-line); }
  .mu-menus, .mu-loud__meter { display: none; }
  /* Two measured rows: back, name, transport, time; then tempo, the view
     switch (stretching), loudness and Export, flush with the same edges. */
  .mu-bar { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; gap: var(--s2) var(--s3); padding: var(--s2) var(--s3) var(--s3); }
  #mu-home { grid-area: 1 / 1; justify-self: start; position: relative; z-index: 1; }
  .mu-title { grid-area: 1 / 1 / 2 / 4; min-width: 0; padding-left: calc(36px + var(--s3)); }
  .mu-transport { grid-area: 1 / 4; margin-left: 0; }
  .mu-where { grid-area: 1 / 5; }
  .mu-tempo { grid-area: 2 / 1; justify-content: center; min-height: 40px; }
  .mu-views { grid-area: 2 / 2 / 3 / 4; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-right: calc(36px + var(--s2)); }
  .mu-fullbtn { grid-area: 2 / 3; justify-self: end; align-self: center; }
  .mu-views .mu-pill { justify-content: center; text-align: center; }
  .mu-loud { grid-area: 2 / 4; justify-content: center; min-height: 40px; }
  .mu-export { grid-area: 2 / 5; justify-content: center; min-height: 40px; }
}
@media (max-width: 640px) {
  /* On a phone the loop grid, when open, takes the timeline's place. */
  .mu-ar[data-loops] { grid-template-columns: 132px minmax(0, 1fr) 0; }
  .mu-ar[data-loops] .mu-ar__loops, .mu-ar[data-loops] .mu-ar__lhead { overflow-x: auto; }
  .mu-ar[data-loops] .mu-ar__lanes, .mu-ar[data-loops] .mu-ar__ruler, .mu-ar[data-loops] .mu-ar__hbar { visibility: hidden; }
  .mu-ar { grid-template-columns: 132px minmax(0, 1fr); }
  .mu-head { grid-template-columns: calc(4px + var(--depth, 0) * 8px) 0 minmax(0, 1fr) auto 8px; }
  .mu-head--take { grid-template-columns: auto minmax(0, 1fr) auto; gap: 5px; padding-left: 10px; }
  /* (The phone's header columns would otherwise apply to these rows too.) */
  .mu-head--auto { grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px; padding: 0 4px 0 8px; }
  .mu-head[data-collapsed] { grid-template-columns: calc(4px + var(--depth, 0) * 8px) 0 minmax(0, 1fr) auto 8px; }
  .mu-head[data-collapsed] .mu-hb--a { display: none; }
  .mu-head--auto .mu-btn--small { padding: 0 6px; }
  .mu-automode { min-width: 0; }
  .mu-head__kind, .mu-head__fold { visibility: hidden; }
  .mu-head__lufs { display: none; }
  .mu-tempo__unit { display: none; }
  /* On a phone the studio grows with what is open (the page scrolls), so
     an open dock never squeezes the tracks away. */
  .mu { height: auto; min-height: calc(100dvh - 132px); }
  .mu-main { min-height: 300px; }
  .mu-dock { max-height: none; }
  /* The bar in measured rows: back, name and Export; the transport and the
     time; tempo and loudness, half the row each (a tempo of 133.33 and its
     signature shown whole, the owner, 31 October 2026); the view switch,
     full width. Six equal columns, so every row starts and ends on the same
     edges. */
  .mu-bar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s2); padding: var(--s2) var(--s3) var(--s3); }
  #mu-home { grid-area: 1 / 1; justify-self: start; }
  .mu-title { grid-area: 1 / 2 / 2 / 5; min-width: 0; padding-left: 0; }
  .mu-transport { grid-area: 2 / 1 / 3 / 5; justify-content: space-between; min-height: 46px; }
  .mu-where { grid-area: 2 / 5 / 3 / -1; min-width: 0; justify-items: center; align-content: center; align-self: stretch; border-radius: var(--mu-r-control); box-shadow: inset 0 0 0 1px var(--mu-line); }
  .mu-tempo { grid-area: 3 / 1 / 4 / 4; justify-content: center; min-width: 0; min-height: 40px; }
  .mu-loud { grid-area: 3 / 4 / 4 / -1; justify-content: center; min-width: 0; min-height: 40px; }
  .mu-export { grid-area: 1 / 5 / 2 / -1; justify-content: center; align-self: center; min-width: 0; min-height: 40px; }
  /* The position and Export inside their own columns in every look (a look's wider minimum ran past the bar's edge), the
     position's sides a little closer so a bar in the hundreds fits beside the transport. */
  .mu .mu-bar > .mu-where { min-width: 0; padding-left: 8px; padding-right: 8px; }
  .mu .mu-bar > .mu-export { min-width: 0; }
  .mu-views { grid-area: 4 / 1 / 5 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mu-views .mu-pill { justify-content: center; text-align: center; }
  .mu-ar__corner .mu-ar__snap { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mu *, .mu *::before, .mu *::after, .mu-float *, .mu-float *::before, .mu-float *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* --- export ---------------------------------------------------------------------------------------- */

.mu-ex { display: grid; gap: var(--s4); }
.mu-ex__head { display: flex; justify-content: space-between; align-items: center; }
.mu-ex__rows { display: grid; gap: var(--s3); }
.mu-ex__row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--s3); align-items: center; }
.mu-ex__row .mu-pills { justify-self: start; }
/* On a phone the label sits above its choices, so a row of pills keeps one line. */
@media (max-width: 560px) { .mu-ex__row { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.mu-ex__label { font-size: var(--t-xs); color: var(--film-ink-3); }
.mu-ex__value { display: inline-flex; align-items: center; min-height: 30px; color: var(--film-ink-2); }
.mu-ex__est { margin: 0; font-size: var(--t-xs); color: var(--film-ink-2); }
.mu-ex__warn { margin: 0; font-size: var(--t-xs); color: var(--signal); }
.mu-ex__alert { margin: 0; font-size: var(--t-sm); color: var(--mu-bad); }
.mu-ex__prog { position: relative; height: 4px; border-radius: var(--mu-r-bar); background: rgb(var(--mu-mist) / 0.1); overflow: hidden; }
.mu-ex__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--part, 0) * 100%); border-radius: var(--mu-r-bar); background: var(--signal); transition: width 200ms linear; }
.mu-ex__line { margin: 0; font-size: var(--t-xs); color: var(--film-ink-2); }

/* --- the mixer ------------------------------------------------------------------------------------- */

.mu-mx { display: flex; gap: 6px; height: 100%; padding: var(--s3); overflow: auto; scrollbar-width: thin; }
.mu-strip {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 98px; min-height: 470px; padding: var(--s2) 6px var(--s3); border-radius: var(--mu-r-panel);
  background: var(--film-raise); box-shadow: inset 0 0 0 1px var(--mu-line), inset 0 3px 0 -1px var(--tc);
  transition: box-shadow var(--dur-face) var(--ease-soft);
}
.mu-strip.is-selected { box-shadow: inset 0 0 0 1px rgb(var(--mu-ice) / 0.6), inset 0 3px 0 -1px var(--tc); }
.mu-strip--master { width: 118px; background: rgb(var(--mu-ice) / 0.05); }
.mu-strip__name { width: 100%; min-height: 28px; padding: 0 4px; border: 0; border-radius: var(--mu-r-control); background: none; color: var(--film-ink); font: inherit; font-size: var(--t-xs); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.mu-strip__name:hover { background: rgb(var(--mu-mist) / 0.06); }
.mu-strip__name:focus-visible, .mu-strip__slot:focus-visible, .mu-strip__add:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 0; }
.mu-strip > * { flex: none; }
/* The inserts take the room the strip has (as many as fit), then scroll;
   a list that goes on past an edge fades there (the shared scroll cue), and
   its thin bar shows. */
.mu-strip__fx { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; align-content: start; overflow: hidden auto; min-height: 30px; flex: 0 1 auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(var(--mu-mist) / 0.35) transparent; }
.mu-strip__fx::-webkit-scrollbar { width: 4px; }
.mu-strip__fx::-webkit-scrollbar-thumb { border-radius: 4px; background: rgb(var(--mu-mist) / 0.35); }
.mu-strip__fx::-webkit-scrollbar-track { background: transparent; }
.mu-strip__item { position: relative; min-width: 0; transition: transform 140ms var(--ease-soft); }
.mu-strip__item[data-lifted] { z-index: 2; transition: none; }
.mu-strip__item[data-lifted] .mu-strip__slot { background: rgb(var(--mu-mist) / 0.18); color: var(--film-ink); box-shadow: 0 4px 14px rgb(0 0 0 / 0.35); cursor: grabbing; }
.mu-strip__slot { display: block; width: 100%; min-width: 0; min-height: 24px; padding: 0 8px; border: 0; border-radius: var(--mu-r-control); background: rgb(var(--mu-mist) / 0.07); color: var(--film-ink-2); font: inherit; font-size: 10.5px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; touch-action: none; }
.mu-strip__slot:hover { color: var(--film-ink); background: rgb(var(--mu-mist) / 0.12); }
.mu-strip__item[data-on="false"] .mu-strip__slot { opacity: 0.5; }
/* The cross sits inside the bubble's right end, shown on hover or focus
   (always on touch); the name gives it room then. */
.mu-strip__x { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--mu-r-icon); background: rgb(var(--mu-mist) / 0.14); color: var(--film-ink); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity var(--dur-state) var(--ease); }
.mu-strip__x .mu-ic { width: 11px; height: 11px; }
.mu-strip__x:hover { background: rgb(var(--mu-bad-rgb) / 0.28); }
.mu-strip__x:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 0; }
.mu-strip__item:hover .mu-strip__x, .mu-strip__item:focus-within .mu-strip__x { opacity: 1; pointer-events: auto; }
.mu-strip__item:hover .mu-strip__slot, .mu-strip__item:focus-within .mu-strip__slot { padding-right: 24px; }
@media (hover: none), (pointer: coarse) {
  .mu-strip__x { opacity: 1; pointer-events: auto; }
  .mu-strip__slot { padding-right: 24px; }
}
.mu-strip__add { display: grid; place-items: center; width: 28px; height: 22px; padding: 0; border: 0; border-radius: var(--mu-r-control); background: none; color: var(--film-ink-3); cursor: pointer; }
.mu-strip__add:hover { color: var(--film-ink); background: rgb(var(--mu-mist) / 0.08); }
.mu-strip__add .mu-ic { width: 14px; height: 14px; }
.mu-strip__sends { display: grid; gap: 4px; justify-items: center; }
.mu-strip__sends .mu-knob { min-width: 0; }
.mu-strip__level { display: flex; gap: 4px; align-items: stretch; margin-top: auto; }
.mu-strip__meter { display: grid; grid-template-columns: 5px 5px; gap: 2px; padding: 8px 0 22px; }
.mu-strip__ml, .mu-strip__mr { position: relative; border-radius: 3px; background: rgb(var(--mu-mist) / 0.07); overflow: hidden; }
.mu-strip__ml::after, .mu-strip__mr::after { content: ""; position: absolute; inset: auto 0 0; height: calc(var(--lv, 0) * 100%); background: linear-gradient(0deg, rgb(var(--mu-slate)), rgb(var(--mu-mist) / 0.85) 80%, rgb(var(--mu-ice)) 92%); transition: height 80ms linear; }
.mu-strip__peak { font-size: 10.5px; color: var(--film-ink-2); font-variant-numeric: tabular-nums; }
.mu-strip__peak[data-over="true"] { color: var(--mu-bad); }
.mu-strip__ms { display: flex; gap: 4px; min-height: 22px; }
.mu-strip__clip, .mu-strip__lufs { min-height: 1.45em; font-size: 10.5px; color: var(--film-ink-3); font-variant-numeric: tabular-nums; }
.mu-strip__clip[data-active="true"] { color: var(--signal); }
.mu-strip__lufs::after { content: " LUFS"; color: var(--film-ink-3); }
.mu-strip__lufs[data-measuring="true"] { opacity: 0.6; }

/* A value being worked out again keeps its figure, fades and breathes --
   a little smaller as it fades, back as it returns -- until it is measured
   (the master's song figure also moves as it converges). Reduced motion:
   faded, still. */
@keyframes mu-measure { 0%, 100% { opacity: 0.66; transform: scale(1); } 50% { opacity: 0.34; transform: scale(0.965); } }
[data-measuring="true"] .mu-val, .mu-val[data-measuring="true"] { display: inline-block; transform-origin: 50% 60%; animation: mu-measure 2.4s var(--ease-soft) infinite; }
@media (prefers-reduced-motion: reduce) {
  [data-measuring="true"] .mu-val, .mu-val[data-measuring="true"] { animation: none; opacity: 0.5; }
}
.mu-lc { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--s2) var(--s4); align-items: center; font-size: var(--t-xs); color: var(--film-ink-2); margin-bottom: var(--s3); font-variant-numeric: tabular-nums; }
.mu-lc > span { white-space: nowrap; }
.mu-lc__whole { grid-column: 1 / -1; color: var(--film-ink-3); overflow: hidden; text-overflow: ellipsis; }
/* Steady's Custom / Auto / Adaptive, where it has them (regional/steady-auto-face.js): one button, its label the state; lit in ice while the plan sets it. */
.mu-lc__mode { justify-self: start; min-width: 92px; font-family: inherit; font-size: var(--t-xs); letter-spacing: 0.04em; }
.mu-lc__mode[data-mode="auto"], .mu-lc__mode[data-mode="adaptive"] { color: var(--signal); background: rgb(var(--mu-ice) / 0.12); box-shadow: inset 0 0 0 1px rgb(var(--mu-ice) / 0.35); }
.mu-lc__mode[data-measuring="true"] { animation: mu-measure 2.4s var(--ease-soft) infinite; }
@media (prefers-reduced-motion: reduce) { .mu-lc__mode[data-measuring="true"] { animation: none; opacity: 0.6; } }
/* What a mode sets, shown greyed and out of reach. */
.mu-pf [data-locked] { opacity: 0.42; transition: opacity var(--dur-state) var(--ease); }

/* --- visual faces (vis/*.js) ---------------------------------------------------------------- */

/* The view switch in an effect's title strip: two small icons. */
.mu-pf__view .mu-pill { min-width: 32px; padding: 0 6px; display: inline-grid; place-items: center; }
.mu-pf__view .mu-ic { width: 16px; height: 16px; }
/* The picture fills the face: as tall as the window lets it when the
   window has a height of its own, in proportion to its width when it
   fits its content. */
.mu-pf[data-view="visual"] { display: flex; flex-direction: column; }
.mu-pf[data-view="visual"] > .mu-pf__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--s3); min-height: 0; }
.mu-vz { position: relative; flex: 0 0 auto; height: clamp(220px, 48cqw, 460px); min-height: 180px; border-radius: var(--mu-r-well); overflow: hidden; background: linear-gradient(180deg, rgb(var(--mu-mist) / 0.04), rgb(var(--mu-deep) / 0.55)); box-shadow: inset 0 0 0 1px var(--mu-line); touch-action: none; user-select: none; -webkit-user-select: none; }
.mu-win[data-fixed] .mu-pf[data-view="visual"] .mu-vz { flex: 1 1 auto; height: auto; }
.mu-vz--compact { height: clamp(150px, 27cqw, 270px); }
.mu-vz--plain { height: max(150px, calc(clamp(220px, 48cqw, 460px) - var(--kn, 42px) - 45px)); }
/* The multiband: the chosen band's row, then the rest, under the picture. */
.mu-mb__rows { display: grid; gap: var(--s3); align-items: start; }
@container mu-pf (min-width: 760px) { .mu-mb__rows { grid-template-columns: minmax(0, 1fr) auto; } .mu-mb__band .mu-pf__knobs { grid-template-columns: auto minmax(0, 1fr); align-items: center; } }
.mu-mb__band { display: grid; gap: var(--s2); padding: var(--s3); border-radius: var(--mu-r-card); background: rgb(var(--mu-ice) / 0.05); box-shadow: inset 0 0 0 1px rgb(var(--mu-ice) / 0.14); }
.mu-mb__name { font-size: var(--t-xs); color: var(--film-ink-2); }
.mu-vz__can { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mu-vz__layer { position: absolute; inset: 0; pointer-events: none; }
/* Each thing you can move: a real control over the drawing. */
.mu-vz__h { position: absolute; left: 0; top: 0; pointer-events: auto; border-radius: var(--mu-r-control); touch-action: none; outline: none; }
.mu-vz__h:focus-visible { box-shadow: 0 0 0 2px var(--film-ink); }
.mu-vz__h[hidden] { display: none; }
@media (pointer: coarse) { .mu-vz__h { min-width: 36px; min-height: 36px; margin: -6px; } }
.mu-vz__read { position: absolute; left: 0; top: 0; padding: 3px var(--s2); border-radius: var(--mu-r-control); background: rgb(var(--mu-pop) / 0.92); color: var(--film-ink); font-size: var(--t-xs); white-space: nowrap; pointer-events: none; z-index: 2; }
.mu-vz__strip { flex: 0 0 auto; }
.mu-vz__strip .mu-pf__knobs { gap: var(--s3); }
/* The riders, where they are (regional/riders-face.js riderFace, riderVisual): how far down now and how many found; Add as automation under the settings. */
.mu-rider { display: grid; gap: var(--s2); max-width: 320px; }
.mu-rider__det { margin: 0; font-size: var(--t-xs); color: var(--film-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-rider__auto { justify-self: start; gap: 6px; }
.mu-rider__auto .mu-ic { width: 14px; height: 14px; }
.mu-pf .mu-rider__auto { margin-top: var(--s2); }
.mu-vz__acts { flex: 0 0 auto; display: flex; justify-content: flex-start; }
/* Tune: its figures over the picture's top left (fixed widths, so nothing
   moves), and the twelve keys under it, an octave of ice tiles -- the
   sharps a row above, between the naturals, so no key lies over another:
   lit where the note is allowed, ringed where it is pulling to, a mist
   bead on the one being sung. */
.mu-tune__read { position: absolute; left: 52px; top: 10px; display: flex; gap: var(--s3); align-items: baseline; padding: 4px var(--s3); border-radius: var(--mu-r-control); background: rgb(var(--mu-pop) / 0.62); color: var(--film-ink-2); font-size: var(--t-xs); font-variant-numeric: tabular-nums; pointer-events: auto; z-index: 1; }
.mu-tune__read .mu-tune__note { min-width: 3.4ch; color: var(--film-ink); font-size: var(--t-sm); }
.mu-tune__read [data-r] { min-width: 9ch; }
@container mu-pf (max-width: 560px) { .mu-tune__read [data-r="out"] { display: none; } }
@container mu-pf (max-width: 420px) { .mu-tune__read { left: 46px; top: 8px; } .mu-tune__read [data-r] { display: none; } }
.mu-tune__strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5, 24px); }
.mu-tune__strip > .mu-pf__knobs { flex: 1 1 260px; }
.mu-tune__keys { --kw: 30px; --kg: 3px; position: relative; flex: 0 0 auto; width: calc(7 * var(--kw) + 6 * var(--kg)); height: 50px; }
.mu-tune__key { position: absolute; top: 0; padding: 0; border: 0; cursor: pointer; font: inherit; transition: background var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease); }
.mu-tune__key--w { left: calc(var(--i) * (var(--kw) + var(--kg))); top: 22px; width: var(--kw); height: 28px; border-radius: 5px 5px 9px 9px; background: linear-gradient(180deg, rgb(var(--mu-mist) / 0.07), rgb(var(--mu-mist) / 0.12)); box-shadow: inset 0 0 0 1px rgb(var(--mu-mist) / 0.12); }
.mu-tune__key--b { left: calc((var(--i) + 1) * (var(--kw) + var(--kg)) - var(--kg) / 2 - 11px); width: 22px; height: 19px; border-radius: 5px; background: linear-gradient(180deg, rgb(var(--mu-pop) / 0.96), rgb(var(--mu-pop) / 0.96)); box-shadow: inset 0 0 0 1px rgb(var(--mu-mist) / 0.14), 0 2px 4px rgb(0 0 0 / 0.4); }
.mu-tune__key--w[aria-pressed="true"] { background: linear-gradient(180deg, rgb(var(--mu-ice) / 0.22), rgb(var(--mu-ice) / 0.34)); box-shadow: inset 0 0 0 1px rgb(var(--mu-ice) / 0.5); }
.mu-tune__key--b[aria-pressed="true"] { background: linear-gradient(180deg, rgb(var(--mu-ice) / 0.34), rgb(var(--mu-ice) / 0.5)); box-shadow: inset 0 0 0 1px rgb(var(--mu-ice) / 0.65), 0 2px 4px rgb(0 0 0 / 0.4); }
.mu-tune__key:hover { filter: brightness(1.25); }
.mu-tune__key:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 1px; z-index: 2; }
.mu-tune__key[data-to] { box-shadow: inset 0 0 0 1.5px var(--signal), 0 0 6px rgb(var(--mu-ice) / 0.35); }
.mu-tune__key::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: rgb(var(--mu-mist) / 0.9); opacity: 0; transition: opacity 120ms var(--ease); }
.mu-tune__key--b::after { bottom: 7px; }
.mu-tune__key[data-sung]::after { opacity: 1; }
/* The Reference: the button between the mix and the song (a puck of ice
   slides under the side you hear), the songs as chips, the figures and
   Align's one quiet line. */
.mu-ref { display: grid; gap: var(--s3); justify-items: start; border-radius: var(--mu-r-card); transition: box-shadow var(--dur-state) var(--ease); }
.mu-ref[data-drop] { box-shadow: 0 0 0 2px rgb(var(--mu-ice) / 0.5); }
.mu-ref__ab { position: relative; display: block; width: min(100%, 420px); height: 46px; padding: 4px; border: 0; border-radius: var(--mu-r-control); background: rgb(var(--mu-deep) / 0.5); box-shadow: inset 0 0 0 1px var(--mu-line); color: var(--film-ink-3); font: inherit; font-size: var(--t-sm); cursor: pointer; }
.mu-ref__ab:disabled { cursor: default; opacity: 0.55; }
.mu-ref__ab:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
.mu-ref__track { position: relative; display: flex; height: 100%; }
.mu-ref__puck { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; border-radius: var(--mu-r-bar); background: rgb(var(--mu-ice) / 0.2); box-shadow: inset 0 0 0 1px rgb(var(--mu-ice) / 0.55); transition: transform 160ms var(--ease); }
.mu-ref__ab[data-side="ref"] .mu-ref__puck { transform: translateX(100%); }
.mu-ref__side { position: relative; display: block; flex: 1 1 0; min-width: 0; line-height: 38px; text-align: center; padding: 0 var(--s3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 160ms var(--ease); }
.mu-ref__ab[data-side="mix"] [data-s="mix"], .mu-ref__ab[data-side="ref"] [data-s="ref"] { color: var(--film-ink); }
@media (prefers-reduced-motion: reduce) { .mu-ref__puck { transition: none; } }
.mu-ref__songs { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; max-width: 100%; }
.mu-ref__chip { display: inline-flex; align-items: center; max-width: 100%; border-radius: var(--mu-r-control); background: var(--film-raise); }
.mu-ref__pick { min-width: 0; max-width: 260px; height: 30px; padding: 0 var(--s2) 0 var(--s3); border: 0; border-radius: var(--mu-r-control) 0 0 var(--mu-r-control); background: none; color: var(--film-ink-2); font: inherit; font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; transition: color var(--dur-state) var(--ease), background var(--dur-state) var(--ease); }
.mu-ref__pick[aria-checked="true"] { color: var(--signal); background: rgb(var(--mu-ice) / 0.12); }
.mu-ref__x { display: grid; place-items: center; width: 28px; height: 30px; padding: 0; border: 0; border-radius: 0 var(--mu-r-control) var(--mu-r-control) 0; background: none; color: var(--film-ink-3); cursor: pointer; transition: color var(--dur-state) var(--ease); }
.mu-ref__x .mu-ic { width: 12px; height: 12px; }
.mu-ref__x:hover, .mu-ref__pick:hover { color: var(--film-ink); }
.mu-ref__pick:focus-visible, .mu-ref__x:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; }
.mu-ref__add .mu-ic { width: 14px; height: 14px; margin-right: 4px; }
.mu-ref__read { display: block; justify-self: stretch; height: 18px; overflow: hidden; white-space: nowrap; font-size: var(--t-xs); line-height: 18px; color: var(--film-ink-2); font-variant-numeric: tabular-nums; }
@container mu-pf (max-width: 560px) { .mu-ref__read { height: auto; min-height: 18px; white-space: normal; } }
.mu-ref__read > span { display: inline-block; min-width: 15ch; margin-right: var(--s4); height: 18px; line-height: 18px; white-space: nowrap; vertical-align: top; }
.mu-ref__read > span[data-measuring="true"] { animation: mu-measure 2.4s var(--ease-soft) infinite; }
/* Align's line, where it is on (regional/align-face.js): it breathes while Align works. */
.mu-ref__note { justify-self: stretch; font-size: var(--t-xs); line-height: 18px; color: var(--film-ink-3); min-height: 18px; }
.mu-ref__note[data-measuring="true"] { animation: mu-measure 2.4s var(--ease-soft) infinite; }
@media (prefers-reduced-motion: reduce) { .mu-ref__read > span[data-measuring="true"], .mu-ref__note[data-measuring="true"] { animation: none; opacity: 0.6; } }
.mu-vz--ref { height: clamp(200px, 36cqw, 380px); }
/* Band buttons in a row (the dynamic EQ's Controls). */
.mu-eq__bands--row { display: flex; gap: 6px; }
.mu-lc__gain { color: var(--film-ink); }
/* The over light: always there, the same size lit or not. */
.mu-lc__over { display: inline-flex; align-items: center; gap: 7px; color: var(--film-ink-3); transition: color var(--dur-state) var(--ease); }
.mu-lc__led { position: relative; width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--mu-mist) / 0.16); transition: background var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease); }
.mu-lc__led::before, .mu-lc__led::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--mu-bad); opacity: 0; pointer-events: none; }
.mu-lc__over[data-over="true"] { color: var(--mu-bad); }
.mu-lc__over[data-over="true"] .mu-lc__led { background: var(--mu-bad); box-shadow: 0 0 8px rgb(var(--mu-bad-rgb) / 0.7); }
.mu-lc__over[data-over="true"] .mu-lc__led::before { animation: mu-overring 1.1s var(--ease-soft) infinite; }
.mu-lc__over[data-over="true"] .mu-lc__led::after { animation: mu-overring 1.1s var(--ease-soft) 0.55s infinite; }
@keyframes mu-overring { from { transform: scale(1); opacity: 0.8; } to { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mu-lc__over[data-over="true"] .mu-lc__led::before, .mu-lc__over[data-over="true"] .mu-lc__led::after { animation: none; } }
.mu-ruler__anchor { position: absolute; top: 0; width: 1px; height: 30px; pointer-events: none; }
.mu-ins__loud { display: flex; gap: var(--s3); margin: var(--s1) 0 0; font-size: var(--t-xs); color: var(--film-ink-2); }
.mu-ins__lra { color: var(--film-ink-3); }

/* --- the master view ------------------------------------------------------------------------------- */

/* The master view, on one screen: the song along the top; loudness (with
   Metering), the master effects in the middle, the release. Each column
   scrolls inside itself only when more has been asked for than fits. */
.mu-ms {
  display: grid; height: 100%; padding: var(--s4); gap: var(--s4); overflow: hidden;
  grid-template-columns: minmax(270px, var(--ms-c1, 1.15fr)) minmax(220px, var(--ms-c2, 0.8fr)) minmax(280px, var(--ms-c3, 1.1fr));
  position: relative;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "lane lane lane" "loud chain meta";
}
.mu-ms > section { display: grid; gap: 10px; align-content: start; min-height: 0; padding: var(--s4); border-radius: var(--mu-r-panel); background: var(--film-raise); box-shadow: inset 0 0 0 1px var(--mu-line); overflow: hidden auto; scrollbar-width: thin; overscroll-behavior: contain; }
.mu-ms__lane { grid-area: lane; gap: var(--s2) !important; padding: var(--s2) var(--s4) var(--s3) !important; overflow: visible !important; }
.mu-ms__loud { grid-area: loud; } .mu-ms__chain { grid-area: chain; } .mu-ms__meta { grid-area: meta; }
.mu-ms__lanehead { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 30px; }
.mu-ms__board { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); align-items: stretch; }
.is-peaks .mu-ms__board { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.55fr); }
/* (The bands it carries -- the loop, the bars, the punch range, the markers, the sections -- are added to its height by master.js as --bands.)
   A finger dragging across it moves what it holds; up and down still scroll the page. */
.mu-ms__lanecanvas { --bands: 0px; display: block; width: 100%; height: calc(var(--ms-lane, 78px) + var(--bands)); cursor: pointer; touch-action: pan-y pinch-zoom; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.mu-ms__lanecanvas:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
/* (Peaks: a taller sound, 70 px, under the bars.) */
.is-peaks .mu-ms__lanecanvas { height: calc(90px + var(--bands)); }
.mu-ms__h { margin: 0; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--film-ink-3); }
.mu-ms__h4 { margin: 0; font-size: var(--t-sm); font-weight: 600; color: var(--film-ink-2); }

/* A toggle chip (Peaks): the same shape off and on. */
.mu-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 14px; border: 0; border-radius: var(--mu-r-control); background: rgb(var(--mu-mist) / 0.06); box-shadow: inset 0 0 0 1px var(--mu-line); color: var(--film-ink-2); font: inherit; font-size: var(--t-xs); font-weight: 600; cursor: pointer; transition: background-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease); }
.mu-chip:hover { color: var(--film-ink); background: rgb(var(--mu-mist) / 0.1); }
.mu-chip[aria-pressed="true"] { color: var(--signal-ink); background: var(--signal); box-shadow: none; }
.mu-chip:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }

/* Peaks: the bar (step, read, lower) over the samples of the chosen one. */
.mu-pk { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--s2); min-width: 0; }
.mu-pk__bar { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px auto; align-items: center; gap: var(--s1); }
.mu-pk__bar .mu-btn--icon { width: 32px; min-height: 32px; }
.mu-pk__next .mu-ic { transform: scaleX(-1); }
.mu-pk__read { min-width: 0; font-size: var(--t-xs); color: var(--film-ink-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-pk__read[data-over="true"] { color: var(--mu-bad); }
.mu-pk__zoom { display: block; width: 100%; height: calc(var(--ms-lane, 78px) - 2px); border-radius: var(--mu-r-well); background: rgb(var(--mu-deep) / 0.3); }
.mu-pk__zoom[data-measuring="true"] { opacity: 0.45; }
.mu-pk__zoom:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
.mu-pk__zoom[data-dragging] { cursor: ns-resize; }

/* Loudness. */
.mu-ms__big { display: flex; align-items: center; gap: var(--s3); }
.mu-ms__bigside { display: grid; gap: 2px; min-width: 0; }
.mu-ms__factrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--s2); }
.mu-ms__num { font-size: clamp(2.2rem, 3.2vw, 3rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mu-ms__unit { font-size: var(--t-xs); color: var(--film-ink-3); }
.mu-ms__loud[data-measuring="true"] .mu-ms__num { opacity: 0.55; transition: opacity var(--dur-face) var(--ease-soft); }
.mu-ms__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s4); margin: 0; }
.mu-ms__facts div { display: grid; gap: 2px; }
.mu-ms__facts dt { font-size: var(--t-xs); color: var(--film-ink-3); }
.mu-ms__facts dd { margin: 0; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.mu-ms__facts dd[data-hot="true"] { color: var(--signal); }
.mu-ms__more { justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 10px; border: 0; border-radius: var(--mu-r-control); background: none; color: var(--film-ink-3); font: inherit; font-size: var(--t-xs); cursor: pointer; }
.mu-ms__more:hover { color: var(--film-ink); background: rgb(var(--mu-mist) / 0.06); }
.mu-ms__more .mu-ic { width: 14px; height: 14px; transition: transform var(--dur-state) var(--ease); }
.mu-ms__more[aria-expanded="true"] .mu-ic { transform: rotate(180deg); }
.mu-ms__more:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 0; }
.mu-ms__target { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }

.mu-ms__label { font-size: var(--t-xs); color: var(--film-ink-3); }
.mu-ms__diff { font-size: var(--t-xs); color: var(--film-ink-2); }
.mu-ms__own { display: inline-flex; align-items: center; gap: var(--s1); }
.mu-ms__own[hidden] { display: none; }
.mu-ms__own .mu-input { width: 5.2em; text-align: right; padding-block: 4px; }
.mu-ms__ownunit { font-size: var(--t-xs); color: var(--film-ink-3); }
.mu-ms__live { display: flex; gap: var(--s2); margin-left: auto; align-self: center; font-size: var(--t-xs); color: var(--film-ink-3); white-space: nowrap; }
.mu-ms__live[data-idle] { visibility: hidden; }
.mu-ms__live-k { color: var(--film-ink-3); }

/* Metering: added meters as tiles, the rest as dotted bubbles to add. */
.mu-ms__metering { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: var(--hairline) solid var(--mu-line); }
.mu-ms__mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s2); }
.mu-ms__mods:empty { display: none; }
.mu-ms__mod { position: relative; margin: 0; min-width: 0; padding: var(--s2) var(--s3) var(--s3); border-radius: var(--mu-r-card); background: rgb(var(--mu-deep) / 0.22); box-shadow: inset 0 0 0 1px var(--mu-line); }
.mu-ms__mod figcaption { font-size: var(--t-xs); color: var(--film-ink-3); margin: 2px 26px var(--s2) 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-ms__modx { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--mu-r-icon); background: none; color: var(--film-ink-3); cursor: pointer; }
.mu-ms__modx:hover { color: var(--film-ink); background: rgb(var(--mu-mist) / 0.08); }
.mu-ms__modx:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 0; }
.mu-ms__modx .mu-ic { width: 13px; height: 13px; }
/* (The picture fills its box, the box at least the panel's height and as tall as its row: a taller neighbour in the row leaves no hole under it.) */
.mu-ms__mod { display: flex; flex-direction: column; }
.mu-ms__cbox { position: relative; flex: 1 0 auto; min-height: var(--mod-h, 72px); }
.mu-ms__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.mu-ms__mod--corr { align-self: start; }
.mu-ms__adds { display: flex; flex-wrap: wrap; gap: var(--s2); }
.mu-ms__adds:empty { display: none; }
.mu-ms__add { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px 0 9px; border: 1.5px dashed rgb(var(--mu-mist) / 0.36); border-radius: var(--mu-r-control); background: none; color: var(--film-ink-2); font: inherit; font-size: var(--t-xs); cursor: pointer; transition: border-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease), background-color var(--dur-state) var(--ease); }
.mu-ms__add .mu-ic { width: 13px; height: 13px; }
.mu-ms__add:hover { color: var(--film-ink); border-color: rgb(var(--mu-mist) / 0.7); background: rgb(var(--mu-mist) / 0.05); }
.mu-ms__add:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
.mu-corr { position: relative; height: 28px; --corr: 0.5; }
.mu-corr__track { position: absolute; left: 0; right: 44px; top: 12px; height: 4px; border-radius: var(--mu-r-bar); background: linear-gradient(90deg, rgb(var(--mu-bad-rgb) / 0.55) 0 50%, rgb(var(--mu-ice) / 0.35) 50% 100%); }
.mu-corr__needle { position: absolute; top: 6px; width: 3px; height: 16px; border-radius: 2px; background: var(--film-ink); left: calc((100% - 44px) * var(--corr) - 1.5px); transition: left 120ms linear; }
.mu-corr[data-bad="true"] .mu-corr__needle { background: var(--mu-bad); }
.mu-corr__num { position: absolute; right: 0; top: 6px; font-size: var(--t-xs); color: var(--film-ink-2); }

/* The master effects. */
.mu-ms__chain .mu-slot { grid-template-columns: 30px minmax(0, 1fr) 28px; touch-action: pan-x; cursor: grab; }
.mu-ms__chain .mu-slot > * { cursor: auto; }
.mu-ms__chain .mu-slot__open { cursor: grab; }
.mu-ms__fx[data-dragging] .mu-slot:not([data-lifted]) { transition: transform 140ms var(--ease); }
/* A chosen section's (or song's) own effects: under the master effects,
   after a rule, headed by its colour and name (as Metering sits under the
   loudness); on a phone right under the lane. The same slots as the
   master's. */
.mu-ms__secfx { display: grid; gap: 10px; align-content: start; min-width: 0; padding-top: var(--s3); border-top: var(--hairline) solid var(--mu-line); }
.mu-ms__lane > .mu-ms__secfx { margin-top: var(--s1); }
.mu-ms__sfxhead { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 28px; }
.mu-ms__sfxname { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mu-ms__sfxdot { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--sc, var(--signal)); box-shadow: inset 0 0 0 1px rgb(var(--mu-deep) / 0.35); }
.mu-ms__sfxtext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-ms__modx.mu-ms__sfxx { position: relative; top: auto; right: auto; flex: none; }
.mu-ms__secfx .mu-slot { grid-template-columns: 30px minmax(0, 1fr) 28px; touch-action: pan-x; cursor: grab; }
.mu-ms__secfx .mu-slot > * { cursor: auto; }
.mu-ms__secfx .mu-slot__open { cursor: grab; }
.mu-ms__secfx > .mu-chain__empty { margin: 0; }
/* On a computer the list scrolls inside its column (the header and Add
   stay put) and fades at an edge it goes on past, as the mixer's inserts. */
@media (min-width: 1181px) {
  /* (A column of its own: the list gives way when the column reaches the room's height; and when even its heads and Adds no
     longer fit -- a low window, the modules made tall, the bar in two rows -- the column itself scrolls, so the chosen section's
     "Add an effect" is never cut off.) */
  .mu-ms > .mu-ms__chain { display: flex; flex-direction: column; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .mu-ms__chain > * { flex: none; }
  .mu-ms__chain > .mu-ms__fx { flex: 0 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .mu-ms__chain > .mu-ms__addfx { align-self: flex-start; }
  /* (The chosen section's list gives way with the master's when the column reaches the room's height.) */
  .mu-ms__chain > .mu-ms__secfx { display: flex; flex-direction: column; flex: 0 1 auto; min-height: auto; margin-top: var(--s1); }
  .mu-ms__secfx > * { flex: none; }
  .mu-ms__secfx > .mu-ms__sfx { flex: 0 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .mu-ms__secfx > .mu-ms__addfx { align-self: flex-start; }
  /* (A list with effects gives way no further than most of its first row, faded where it goes on -- the chosen section's block
     holding its head, that row and its Add together -- and past that the column scrolls, so a section's effects never shrink to
     a sliver: with the bar in two rows, 1280 x 800 left the chosen section's EQ 8 px of its 38.) */
  .mu-ms__chain > .mu-ms__fx:not(:empty), .mu-ms__secfx > .mu-ms__sfx:not(:empty) { min-height: 30px; }
}
.mu-ms__addfx { justify-self: start; }

/* The release: one bubble, then three, then the details. */
.mu-rel { display: grid; gap: var(--s3); align-content: start; }
.mu-rel[data-stage="add"], .mu-rel[data-stage="kind"] { min-height: 120px; place-items: center; align-content: center; }
.mu-rel__bubble { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border: 0; border-radius: var(--mu-r-control); background: rgb(var(--mu-mist) / 0.07); box-shadow: inset 0 0 0 1px var(--mu-line); color: var(--film-ink); font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer; transition: background-color var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease); }
.mu-rel__bubble:hover { background: rgb(var(--mu-mist) / 0.13); box-shadow: inset 0 0 0 1px rgb(var(--mu-mist) / 0.35); }
.mu-rel__bubble:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
.mu-rel__bubble .mu-ic { width: 16px; height: 16px; }
.mu-rel__kinds { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.mu-rel__kinds .mu-rel__bubble { min-width: 92px; }
.mu-rel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.mu-rel__clear { width: 32px !important; min-height: 32px !important; color: var(--film-ink-3); }
.mu-rel__addsong { justify-self: start; }
.mu-sheet { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s3); }
.mu-rel .mu-field { gap: 3px; font-size: 11px; }
.mu-rel .mu-field .mu-input, .mu-song__title { min-height: 32px; }
/* Inputs take the room their cell gives them, never their own default width. */
.mu-rel .mu-input { min-width: 0; width: 100%; box-sizing: border-box; }
.mu-rel .mu-field { min-width: 0; }
.mu-sheet__wide { grid-column: 1 / -1; }
.mu-sheet__lyrics { min-height: 70px; padding: var(--s2) var(--s3); border-radius: var(--mu-r-card); resize: vertical; font: inherit; font-size: var(--t-sm); line-height: 1.5; }
.mu-sheet__cover { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s3); }
.mu-sheet__art { width: 56px; height: 56px; border-radius: var(--mu-r-card); background: rgb(var(--mu-mist) / 0.06) center / cover no-repeat; box-shadow: inset 0 0 0 1px var(--mu-line); }
.mu-sheet__err { margin: 0; min-height: 0; font-size: var(--t-xs); color: var(--mu-bad); }
.mu-sheet__err:empty { display: none; }
.mu-songs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.mu-song { display: grid; gap: 4px; padding: 6px var(--s2); border-radius: var(--mu-r-card); background: rgb(var(--mu-deep) / 0.18); box-shadow: inset 0 0 0 1px var(--mu-line); }
.mu-song__row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 32px; gap: var(--s2); align-items: center; }
.mu-rel[data-kind="single"] .mu-song__row { grid-template-columns: 22px minmax(0, 1fr); }
.mu-song__n { font-size: var(--t-xs); color: var(--film-ink-3); }
.mu-song__x { width: 32px !important; min-height: 32px !important; color: var(--film-ink-3); }
.mu-song__times { display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) 30px auto; gap: 3px; align-items: center; }
.mu-song__times .mu-btn--icon { width: 30px; min-height: 30px; color: var(--film-ink-3); }
.mu-song__times .mu-btn--icon .mu-ic { width: 15px; height: 15px; }
.mu-song__time { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--film-ink-3); min-width: 0; }
.mu-song__time .mu-input { min-height: 30px; min-width: 74px; width: 100%; padding: 0 8px; font-size: 11.5px; }
.mu-song__more { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: center; padding-left: 30px; }
.mu-song__isrc { min-height: 32px; font-size: var(--t-xs); max-width: 220px; }
.mu-song__isrc[data-ok="false"], .mu-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--mu-bad); }
.mu-song__creditsbtn { padding: 4px 10px; border: 0; border-radius: var(--mu-r-control); background: none; font: inherit; font-size: var(--t-xs); color: var(--film-ink-3); cursor: pointer; white-space: nowrap; }
.mu-song__creditsbtn:hover, .mu-song__creditsbtn[aria-expanded="true"] { color: var(--film-ink); background: rgb(var(--mu-mist) / 0.06); }
.mu-song__creditsbtn:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 0; }
.mu-credits { display: grid; gap: 6px; margin: 2px 0 0 30px; }
/* A song's credits (releaseui.js #credits): Writers, Performers, Production
   and engineering, each person a row -- the name, then what they did as
   chips with a + for more, then their cross; the adds under the groups. */
.mu-credits__group { display: grid; gap: 4px; }
.mu-credits__group + .mu-credits__group { margin-top: 6px; }
.mu-credits__g { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--film-ink-3); }
.mu-credits__row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) 32px; gap: var(--s2); align-items: start; }
/* The chips' first line centred on the name beside it, the cross too. */
.mu-credits__row > .mu-input { min-height: 38px; }
.mu-credits__whats { padding-block: 4px; }
.mu-credits__row > .mu-credits__x { margin-top: 3px; }
.mu-credits__whats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.mu-credits__chip { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; border-radius: var(--mu-r-control); background: rgb(var(--mu-mist) / 0.08); box-shadow: inset 0 0 0 1px var(--mu-line); transition: background-color var(--dur-state) var(--ease); }
.mu-credits__chip:hover { background: rgb(var(--mu-mist) / 0.14); }
.mu-credits__chip:has(.mu-chips__x) .mu-credits__what { padding-right: 2px; }
.mu-credits__chip .mu-chips__x { margin-right: 5px; }
.mu-credits__plus { display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border: 1.5px dashed rgb(var(--mu-mist) / 0.36); border-radius: var(--mu-r-icon); background: none; color: var(--film-ink-3); cursor: pointer; transition: border-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease), background-color var(--dur-state) var(--ease); }
.mu-credits__plus .mu-ic { width: 12px; height: 12px; }
.mu-credits__plus:hover { color: var(--film-ink); border-color: rgb(var(--mu-mist) / 0.7); background: rgb(var(--mu-mist) / 0.05); }
.mu-credits__plus:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
.mu-credits__x { width: 32px !important; min-height: 32px !important; color: var(--film-ink-3); }
.mu-credits__adds { display: flex; flex-wrap: wrap; gap: var(--s2); }
/* Where a store asks for something the song does not have yet: a quiet
   point of the lake's ice, its words in the tip. */
.mu-credits__need { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.mu-ms__add .mu-credits__need { margin-left: 1px; }
/* The release by sections (U7): each comes in from a dotted bubble, with
   its title and a cross; a song's ISRC sits with it; contributors are what
   they did (pressed to choose again) and a name. */
.mu-rel__sechead { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: var(--s2); }
.mu-rel__secx { width: 28px !important; min-height: 28px !important; color: var(--film-ink-3); }
.mu-rel__secx .mu-ic { width: 13px; height: 13px; }
.mu-rel__adds { margin-top: var(--s2); }
.mu-song__code { display: grid; grid-template-columns: auto minmax(0, 220px); justify-content: start; align-items: center; gap: 8px; margin-left: 30px; font-size: var(--t-xs); color: var(--film-ink-3); }
.mu-credits__what { min-width: 0; max-width: 100%; min-height: 30px; padding: 0 11px; border: 0; border-radius: var(--mu-r-control); background: none; color: var(--film-ink-2); font: inherit; font-size: var(--t-xs); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.mu-credits__what:hover { color: var(--film-ink); }
.mu-credits__what:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 1px; }
.mu-credits__pick { display: block; grid-column: 1 / -1; }
.mu-rolepick { display: grid; gap: 4px; }
.mu-rolepick__q { min-height: 32px; }
.mu-rolepick__list { position: static; z-index: auto; min-width: 0; max-width: none; max-height: 220px; animation: none; }
.mu-rolepick__list .mu-menu__item[aria-selected="true"] { background: var(--film-raise-hi); }
.mu-rolepick__none { margin: 0; padding: var(--s2) var(--s3); font-size: var(--t-xs); color: var(--film-ink-3); }
.mu-credits__role .mu-select__name { display: none; }

@media (max-width: 1180px) {
  .mu-ms { overflow: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto; grid-template-areas: "lane lane" "loud chain" "meta meta"; align-content: start; }
  /* Stacked, each part is as tall as what it holds; the view scrolls. */
  .mu-ms > section { overflow: visible; min-height: auto; }
  .is-peaks .mu-ms__board { grid-template-columns: minmax(0, 1fr); }
  .mu-pk__zoom { height: 120px; }
}
@media (max-width: 760px) {
  .mu-ms { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lane" "loud" "chain" "meta"; padding: var(--s3); gap: var(--s3); }
  .mu-sheet { grid-template-columns: 1fr; }
  .mu-song__times { grid-template-columns: minmax(0, 1fr) auto; padding-left: 0; }
  .mu-song__times > .mu-song__creditsbtn { grid-column: 1 / -1; justify-self: start; }
  .mu-song__more { padding-left: 0; }
  .mu-credits { margin-left: 0; }
  /* A person's name and cross on a line, what they did under it; a little air between people. */
  .mu-credits__group { gap: 10px; }
  .mu-credits__row { grid-template-columns: minmax(0, 1fr) 32px; row-gap: 4px; }
  .mu-credits__row > .mu-input { grid-column: 1; grid-row: 1; }
  .mu-credits__row > .mu-credits__x { grid-column: 2; grid-row: 1; }
  .mu-credits__row > .mu-credits__whats { grid-column: 1 / -1; grid-row: 2; padding-block: 0; }
}

/* A clip's peaks up close (peaks.js), in the right-hand column. */
.mu-ins__peaks { grid-template-columns: minmax(0, 1fr); }
.mu-ins__peaks > div { min-width: 0; }
.mu-cp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); min-width: 0; }
.mu-cp > * { min-width: 0; }
.mu-cp__kinds .mu-pills { width: max-content; max-width: 100%; }
.mu-cp__bar { grid-template-columns: 32px minmax(0, 1fr) 32px auto; }
.mu-cp__clear[hidden] { display: none; }
.mu-cp__zoom { display: block; width: 100%; min-width: 0; max-width: 100%; height: 132px; border-radius: var(--mu-r-well); background: rgb(var(--mu-deep) / 0.3); touch-action: none; }
.mu-cp__zoom:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
.mu-cp__zoom[data-dragging] { cursor: ns-resize; }
.mu-cp__note { margin: 0; min-height: 1.4em; font-size: 10.5px; color: var(--film-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The studio building itself as it opens from the island (room.js buildIn):
   each part waits its turn (--bi), then arrives; the bar's pieces rise into
   place, the headers come in from the left, the ruler and lanes are drawn
   across, the columns settle. Only the individual translate and clip-path
   move, so a part's own transform is untouched. */
.mu[data-building] :is(.mu-bar > *, .mu-ar__corner, .mu-ar__ruler, .mu-ar__heads, .mu-ar__lanes, .mu-inspect, .mu-mx, .mu-ms) { opacity: 0; }
.mu[data-building="go"] .mu-bar > * { animation: mu-build-rise 520ms var(--ease-soft) both; animation-delay: calc(100ms + var(--bi, 0) * 45ms); }
.mu[data-building="go"] :is(.mu-ar__corner, .mu-ar__heads) { animation: mu-build-left 600ms var(--ease-soft) both; animation-delay: calc(100ms + var(--bi, 0) * 45ms); }
.mu[data-building="go"] :is(.mu-ar__ruler, .mu-ar__lanes) { animation: mu-build-wipe 720ms var(--ease-soft) both; animation-delay: calc(100ms + var(--bi, 0) * 45ms); }
.mu[data-building="go"] :is(.mu-inspect, .mu-mx, .mu-ms) { animation: mu-build-settle 620ms var(--ease-soft) both; animation-delay: calc(100ms + var(--bi, 0) * 45ms); }
@keyframes mu-build-rise { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
@keyframes mu-build-left { from { opacity: 0; translate: -18px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes mu-build-wipe { from { opacity: 0.2; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes mu-build-settle { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .mu[data-building] :is(.mu-bar > *, .mu-ar__corner, .mu-ar__ruler, .mu-ar__heads, .mu-ar__lanes, .mu-inspect, .mu-mx, .mu-ms) { opacity: 1; animation: none; } }

/* A strip as a whole (strip.js): Bypass, and A/B before against after with
   the loudness match shown. One line; the readout keeps its width. */
.mu-strip-ab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.mu-strip-ab__cmp { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.mu-strip-ab__read { min-width: 8.5em; font-size: var(--t-xs); color: var(--film-ink-2); white-space: nowrap; }
.mu-ms__strip:empty { display: none; }
/* A section's title with its own controls on the same line (Master
   effects: Bypass and A/B), as the song lane's header carries Peaks. */
/* (The 30 px controls hang over the title's line by equal amounts, so the
   title stays level with the other sections' titles.) */
.mu-ms__sechead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s3); min-height: 30px; margin-block: calc((var(--mu-h-line, 18px) - 30px) / 2); }
.mu-ms__sechead > .mu-ms__h { line-height: var(--mu-h-line, 18px); min-height: 30px; display: flex; align-items: center; }
.mu-ms > section > .mu-ms__h { line-height: var(--mu-h-line, 18px); }
.mu-ms__sechead .mu-ms__strip { margin-left: auto; }
.mu-ms__sechead .mu-strip-ab { gap: var(--s1) var(--s2); justify-content: flex-end; }
.mu-hear .mu-chip:focus-visible { outline-offset: -2px; }

/* Hear as a service plays it (services.js), in the song's header beside
   Peaks: one pill of the same height. Its left part turns it on and off
   (lit while heard, the gain inside it), its chevron chooses the service. */
.mu-ms__lanehead { flex-wrap: wrap; row-gap: var(--s1); }
.mu-ms__laneacts { display: flex; align-items: center; gap: var(--s2); margin-left: auto; min-width: 0; }
.mu-hear { display: inline-flex; align-items: stretch; min-height: 28px; border-radius: var(--mu-r-group); background: rgb(var(--mu-mist) / 0.06); box-shadow: inset 0 0 0 1px var(--mu-line); transition: background-color 160ms var(--ease-soft); }
.mu-hear .mu-chip { background: transparent; box-shadow: none; white-space: nowrap; }
.mu-hear .mu-chip:hover { background: rgb(var(--mu-mist) / 0.08); }
.mu-hear__on { padding: 0 10px 0 14px; border-radius: var(--mu-r-control) 0 0 var(--mu-r-control); }
.mu-hear__pick { width: 30px; padding: 0; justify-content: center; border-radius: 0 var(--mu-r-control) var(--mu-r-control) 0; position: relative; }
.mu-hear__pick::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 1px; background: var(--mu-line); }
.mu-hear__pick .mu-ic { width: 16px; height: 16px; margin-left: -2px; }
.mu-hear__read:not(:empty) { display: inline-block; margin-left: 8px; font-weight: 500; font-size: var(--t-xs); font-variant-numeric: tabular-nums; opacity: 0.85; }
.mu-hear__read[data-measuring="true"] { font-family: inherit; animation: mu-measure 2.4s var(--ease-soft) infinite; }
.mu-hear.is-on { background: var(--signal); box-shadow: none; }
.mu-hear.is-on .mu-chip, .mu-hear.is-on .mu-chip[aria-pressed="true"] { color: var(--signal-ink); background: transparent; }
.mu-hear.is-on .mu-chip:hover { background: rgb(0 0 0 / 0.08); }
.mu-hear.is-on .mu-hear__pick::before { background: rgb(0 0 0 / 0.2); }
@media (prefers-reduced-motion: reduce) { .mu-hear__read[data-measuring="true"] { animation: none; opacity: 0.55; } }

/* The full-screen button beside the views; not on a phone, where the
   browser does not give the screen to a page. */
.mu-fullbtn { flex: none; }
.mu-fullbtn[aria-pressed="true"] { color: var(--signal); }
@media (max-width: 760px) { .mu-fullbtn { display: none; } .mu-views { margin-right: 0 !important; } }

/* The lower columns are as tall as what they hold (up to the room's
   height, then they scroll), not stretched to the floor; a handle in each
   gap resizes them (U10). */
@media (min-width: 1181px) {
  .mu-ms > .mu-ms__loud, .mu-ms > .mu-ms__chain, .mu-ms > .mu-ms__meta { align-self: start; max-height: 100%; }
  /* (A height chosen by its lower edge; never past the room's floor.) */
  .mu-ms > .mu-ms__loud { height: var(--ms-h-loud, auto); } .mu-ms > .mu-ms__chain { height: var(--ms-h-chain, auto); } .mu-ms > .mu-ms__meta { height: var(--ms-h-meta, auto); }
}
.mu-ms__split { position: absolute; z-index: 3; width: 16px; margin-left: -8px; cursor: col-resize; touch-action: none; border-radius: 8px; }
.mu-ms__split::after { content: ""; position: absolute; left: 7px; top: 50%; width: 2px; height: 36px; margin-top: -18px; border-radius: 1px; background: rgb(var(--mu-mist) / 0.16); opacity: 0; transition: opacity var(--dur-state) var(--ease), background-color var(--dur-state) var(--ease); }
.mu-ms__split:hover::after, .mu-ms__split[data-dragging]::after, .mu-ms__split:focus-visible::after { opacity: 1; background: rgb(var(--mu-mist) / 0.4); }
.mu-ms__split:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -4px; }
.mu-ms__split[hidden] { display: none; }
/* The edges that resize a module (resize.js): unseen until the pointer is near, then a short line along the edge. */
.mu-rsz { position: absolute; z-index: 3; touch-action: none; border-radius: var(--mu-r-bar); }
.mu-rsz--y { height: 12px; margin-top: -6px; cursor: row-resize; }
.mu-rsz--x { width: 12px; cursor: col-resize; }
.mu-rsz::after { content: ""; position: absolute; border-radius: 1px; background: rgb(var(--mu-mist) / 0.16); opacity: 0; transition: opacity var(--dur-state) var(--ease), background-color var(--dur-state) var(--ease); }
.mu-rsz--y::after { left: 50%; top: 5px; width: 36px; height: 2px; margin-left: -18px; }
.mu-rsz--x::after { top: 50%; left: 5px; width: 2px; height: 28px; margin-top: -14px; }
.mu-rsz:hover::after, .mu-rsz[data-dragging]::after, .mu-rsz:focus-visible::after { opacity: 1; background: rgb(var(--mu-mist) / 0.4); }
.mu-rsz:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -3px; }
.mu-rsz[hidden] { display: none; }
:root[data-resizing="y"], :root[data-resizing="y"] * { cursor: row-resize !important; }
:root[data-resizing="x"], :root[data-resizing="x"] * { cursor: col-resize !important; }
:root[data-resizing] { user-select: none; -webkit-user-select: none; }
/* (A column's lower edge mostly outside it, in the gap: never over the panels it holds.) */
.mu-ms__rsz.mu-rsz--y { margin-top: -3px; }
.mu-ms__rsz::after { top: 3px; }
.mu-mt__rszw { top: 18px; bottom: 6px; left: -7px; }
.mu-mt__rszh.mu-rsz--y { left: 8px; right: 8px; bottom: -4px; height: 8px; margin-top: 0; }
.mu-mt__rszh::after { top: 3px; }
.mu-ms__modrszh.mu-rsz--y { left: 16px; right: 16px; bottom: -5px; height: 10px; margin-top: 0; }
.mu-ms__modrszh::after { top: 4px; }
.mu-ms__modrszw { top: 34px; bottom: 14px; right: -5px; width: 10px; }
.mu-ms__modrszw::after { left: 4px; }
/* A short computer screen (U9): the meters three to a row and a little
   lower, so the loudness and every meter fit without scrolling. */
@media (min-width: 1181px) and (max-height: 860px) {
  .mu-ms__mods { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  .mu-ms__cbox { min-height: var(--mod-h, 60px); }
}

/* Clear repairs, only while there are any: in the corner of the samples
   view, laid over it, so nothing moves when it comes or goes. */
.mu-pk { position: relative; }
.mu-pk__foot { position: absolute; right: 6px; bottom: 6px; z-index: 1; display: flex; }
.mu-pk__foot .mu-btn { background: rgb(var(--mu-pop) / 0.88); }
.mu-pk__foot:not(:has(button:not([hidden]))) { display: none; }
.mu-pk__clear[hidden] { display: none; }

/* The planes over the tracks (arrange.js planes): the corner names them
   beside their bands; its own buttons sit in the band left under them. */
.mu-ar__corner { position: relative; align-items: flex-end; padding-top: var(--planes-top, 0px); padding-bottom: 3px; }
.mu-ar__pnames { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.mu-ar__pname { position: absolute; right: 10px; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--film-ink-3); white-space: nowrap; }
.mu-rename--plane { position: fixed; z-index: 80; min-height: 20px; }
.mu-menu__swatch { width: 14px; height: 14px; justify-self: center; border-radius: 4px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); }

/* The release as a distributor's upload asks (releaseui.js): its steps,
   artists as chips, searchable lists, the ℗ and © lines, the song cards. */
.mu-rel__step { display: grid; gap: var(--s2); }
.mu-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 32px; padding: 3px 4px 3px 4px; border-radius: var(--mu-r-group); background: var(--film-raise); box-shadow: inset 0 0 0 1px var(--mu-line); cursor: text; box-sizing: border-box; }
.mu-chips:focus-within { box-shadow: inset 0 0 0 1px var(--signal); }
.mu-chips__chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-height: 24px; padding: 0 2px 0 10px; border-radius: var(--mu-r-control); background: rgb(var(--mu-mist) / 0.12); color: var(--film-ink); font-size: var(--t-xs); font-weight: 600; overflow-wrap: anywhere; }
.mu-chips__x { display: grid; place-items: center; flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--mu-r-icon); background: none; color: var(--film-ink-3); cursor: pointer; }
.mu-chips__x:hover { color: var(--film-ink); background: rgb(var(--mu-mist) / 0.12); }
.mu-chips__x:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 0; }
.mu-chips__x .mu-ic { width: 11px; height: 11px; }
.mu-chips__in { flex: 1 1 90px; min-width: 90px; min-height: 24px; padding: 0 6px; border: 0; background: none; color: var(--film-ink); font: inherit; font-size: var(--t-sm); outline: none; }
.mu-chips__in::placeholder, .mu-combo__in::placeholder { color: var(--film-ink-3); }
.mu-combo { position: relative; }
.mu-combo__list { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; z-index: 30; max-height: 240px; overflow: auto; }
/* The ℗ and © lines: the sign at the start of the field, beside what is typed (the box is the field). */
.mu-rel__pre { display: flex; align-items: center; min-height: 32px; border-radius: var(--mu-r-group); background: var(--film-raise); box-shadow: inset 0 0 0 1px var(--mu-line); }
.mu-rel__pre:focus-within { box-shadow: inset 0 0 0 1px var(--signal); }
.mu-rel__sym { flex: none; padding-left: 12px; font-size: var(--t-sm); color: var(--film-ink-3); }
.mu-rel .mu-rel__pre > .mu-input { flex: 1 1 auto; min-height: 30px; padding-left: 6px; background: none; box-shadow: none; }
.mu-rel__explicit .mu-pills { width: max-content; max-width: 100%; }
.mu-song__same { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sm); font-weight: 600; color: var(--film-ink); }
.mu-song__body { display: grid; gap: var(--s2); margin: 4px 0 2px 30px; }
.mu-song__body > .mu-sheet { gap: var(--s2) var(--s3); }
.mu-song__body .mu-credits { margin-left: 0; }
.mu-credits__h { font-size: 11px; color: var(--film-ink-2); }
@media (max-width: 760px) { .mu-song__body { margin-left: 0; } }

/* Fades in one tight row each (fades.js): the name, the slider, the length,
   then the shape's drop-down; two side by side where there is room. */
.mu-fades { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 4px var(--s3); min-width: 0; }
.mu-fade { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0; }
/* (Fixed name and reading columns, so the two sliders line up when stacked.) */
.mu-fade .mu-line { grid-template-columns: 4.4em minmax(36px, 1fr) 6.2ch; grid-template-rows: 26px; column-gap: 4px; min-width: 0; }
.mu-fade .mu-line__name { grid-column: 1; grid-row: 1; white-space: nowrap; }
.mu-fade .mu-line__track { grid-column: 2; grid-row: 1; height: 26px; margin: 0 8px; }
.mu-fade .mu-line__read { grid-column: 3; grid-row: 1; min-width: 4.2ch; }
.mu-fade--x { grid-template-columns: auto auto; justify-content: start; gap: var(--s2); }
.mu-fade__shape { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 6px 0 7px; border: 0; border-radius: var(--mu-r-control); background: rgb(var(--mu-mist) / 0.08); box-shadow: inset 0 0 0 1px var(--mu-line); color: var(--film-ink-2); font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap; }
.mu-fade__shape:hover, .mu-fade__shape[aria-expanded="true"] { color: var(--film-ink); background: rgb(var(--mu-mist) / 0.14); }
.mu-fade__shape:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 1px; }
.mu-fade__sname { display: none; }
.mu-fade--x .mu-fade__sname { display: inline; }
.mu-fade__chev { width: 6px; height: 6px; margin: -3px 1px 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.7; }
.mu-curve { flex: none; display: block; }
.mu-menu__ic .mu-curve { width: 16px; height: 16px; }

/* A track's colour, lightly, on its header and its strip (owner, 9 October):
   a wash from its colour edge that fades out across, and the strip's head
   washed the same way. Kept faint (a few percent over the dark), so the name,
   the level and the buttons read as before, and apart from the chosen
   state (the signal bar, a lighter ground), mute, solo and arm (their own
   buttons lit). */
.mu-head:not(.mu-head--take):not(.mu-head--auto) { background-image: linear-gradient(90deg, color-mix(in srgb, var(--tc) 13%, transparent) 0, color-mix(in srgb, var(--tc) 5%, transparent) 55%, transparent 100%); }
.mu-strip:not(.mu-strip--master) { background-image: linear-gradient(180deg, color-mix(in srgb, var(--tc) 15%, transparent) 0, color-mix(in srgb, var(--tc) 4%, transparent) 38%, transparent 70%); }

/* --- a finger instead of a pointer ----------------------------------------------------------
   DESIGN.md 2.5: 44 px for a finger. The building's reach (styles.css) lends
   the small buttons what they do not show; here the bar's segmented and
   packed controls -- the transport, the views, the tempo, the loudness
   targets -- are a finger tall themselves, since a reach lent across their
   two-pixel gaps would land on the neighbour, and the chips that wrap stand
   far enough apart for two reaches never to meet.

   The timeline and the mixer keep their sizes, and lend nothing: a track's
   head buttons, the arrange corner, the loop grid's head, the ruler and the
   scroll bar under the lanes, and a strip's fader, pan, name and add are a
   dense editor worked by dragging, each command also in a menu whose rows
   are a finger tall. Their reach is taken back so none of it lands on a
   neighbour. */
@media (pointer: coarse) {
  /* The building's reach (styles.css); Play lends its ::before, its ring
     being its ::after. */
  :where(.mu-btn, .mu-chip, .mu-ms__add, .mu-ms__modx, .mu-ms__more, .mu-tempo__meter, .mu-rec, .mu-export, .mu-loud, .mu-rel__bubble, .mu-chips__x, .mu-play) { position: relative; }
  :where(.mu-btn, .mu-chip, .mu-ms__add, .mu-ms__modx, .mu-ms__more, .mu-tempo__meter, .mu-rec, .mu-export, .mu-loud, .mu-rel__bubble, .mu-chips__x)::after,
  :where(.mu-play)::before { content: ""; position: absolute; inset: var(--hit-reach); }
  .mu-transport { gap: 0; }
  .mu-transport .mu-btn--icon, .mu-play, .mu-rec { flex: none; width: var(--hit); height: var(--hit); }
  .mu-bar > .mu-btn--icon { width: var(--hit); min-height: var(--hit); }
  .mu-pill, .mu-pills--small .mu-pill { min-height: var(--hit); min-width: var(--hit); }
  .mu-tempo__bpm, .mu-tempo__meter { min-height: var(--hit); min-width: var(--hit); }
  .mu-name { min-height: var(--hit); }
  .mu-shelf__del, .mu-menubtn, .mu-menu__item { min-height: var(--hit); }
  /* (The dialogs' own button -- Export WAV, Done and the rest -- a finger tall too, in every look: each look sets its 40 px.) */
  :root .mu-go:not(.mu-go--small) { min-height: var(--hit); }
  .mu-ms__adds { row-gap: calc(var(--hit) - 30px); }
  .mu-input, .mu-inspect uc-select, .mu-line__track { min-height: var(--hit); }
  /* The release's fields: the artists' box and the ℗ and © lines, with the
     field inside each as tall as its box. */
  .mu-chips, .mu-rel__pre, .mu-rel .mu-rel__pre > .mu-input, .mu-rel .mu-field .mu-input, .mu-song__title, .mu-song__time .mu-input { min-height: var(--hit); }
  .mu-chips__in { min-height: var(--hit); margin-block: -3px; }
  /* A person's chips and their + a finger tall, with the chips' crosses lending a reach. */
  .mu-credits__what { min-height: var(--hit); }
  .mu-credits__plus { width: var(--hit); height: var(--hit); }
  .mu-credits__whats { padding-block: 0; }
  .mu-credits__row > .mu-credits__x { margin-top: calc((var(--hit) - 32px) / 2); }
  .mu-credits__whats, .mu-credits__adds { row-gap: calc(var(--hit) - 30px); }
  .mu-line { grid-template-rows: auto var(--hit); }
  /* A clip's fades: the slider rows and the shape's drop-down a finger tall. */
  .mu-fade .mu-line { grid-template-rows: var(--hit); }
  .mu-fade .mu-line__track, .mu-fade__shape { height: var(--hit); }
  /* The colours keep their size and lend a reach, with room between them. */
  .mu-ins__colours { gap: calc(var(--hit) - 24px); }
  /* A module's close button sits a little lower, so its reach is not cut by
     the module's top edge. */
  .mu-ms__modx { top: 10px; }
  /* The peaks' step buttons are a finger square, the gap before Lower wide
     enough for the two reaches. */
  .mu-pk__bar { grid-template-columns: var(--hit) minmax(0, 1fr) var(--hit) auto; column-gap: var(--s2); }
  .mu-pk__bar .mu-btn--icon { width: var(--hit); min-height: var(--hit); }
  :where(.mu-swatch) { position: relative; }
  :where(.mu-swatch)::after { content: ""; position: absolute; inset: var(--hit-reach); }
  .mu-ar__corner .mu-btn::after, .mu-ar__lhead .mu-btn::after { content: none; }
}
/* In the bar's rows with a finger (from 1420 down), and on a tablet with any
   pointer (641 to 980), the second row leaves the view switch too little --
   its names ran out of their pills at 768 -- so it takes a row of its own
   under the bar, as on a phone, with full screen at its end; loudness has the
   second row's middle to itself. (Above 980 the rows have the Menu's column
   too.) */
@media (min-width: 641px) and (max-width: 980px), (pointer: coarse) and (min-width: 641px) and (max-width: 1420px) {
  .mu-views { grid-area: 3 / 1 / 4 / 5; margin-right: 0; }
  .mu-fullbtn { grid-area: 3 / 5; justify-self: end; align-self: center; }
  .mu-loud { grid-area: 2 / 2 / 3 / 5; justify-content: center; min-height: 40px; }
}
/* (With a finger, the name stands clear of the wider way back.) */
@media (pointer: coarse) and (min-width: 641px) and (max-width: 1420px) {
  .mu-title { padding-left: calc(var(--hit) + var(--s3)); }
}
@media (pointer: coarse) and (min-width: 981px) and (max-width: 1420px) {
  /* (Its three views share the row, as on a phone: here, after the pills' own display, the grid holds.) */
  .mu-views { grid-area: 3 / 1 / 4 / 6; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mu-fullbtn { grid-area: 3 / 6; }
  .mu-loud { grid-area: 2 / 2 / 3 / 6; }
}

/* A channel's name being typed in the mixer: in the name's place, as wide as the strip allows. */
.mu-strip > .mu-rename { width: 100%; min-height: 28px; box-sizing: border-box; padding: 0 8px; text-align: center; font-size: var(--t-xs); font-weight: 600; }

/* Over lights, lit: a click clears them (room.clearOvers). */
.mu-loud[data-over="true"] .mu-loud__meter, .mu-head__meter[data-over="true"], .mu-strip__peak[data-over="true"], .mu-strip__meter[data-over="true"], .mu-lc__over[data-over="true"] { cursor: pointer; }
.mu-strip__meter[data-over="true"] { box-shadow: inset 0 2px 0 var(--mu-bad); border-radius: 3px; }

/* The master's detailed meter (bigmeter.js), beside the figures. */
/* (The meter's chosen width, but never so wide the figures beside it lose their 230 px: a width chosen on a wide screen gives way on a narrower one.) */
.mu-ms__top { display: grid; grid-template-columns: minmax(0, 1fr) min(var(--mt-w, 132px), max(132px, 100% - 230px)); gap: var(--s3); align-items: stretch; }
.mu-ms__topl { display: grid; gap: var(--s3); align-content: start; min-width: 0; }
/* (As tall as the figures beside it: taller when More shows more of them.) */
.mu-mt { display: grid; grid-template-rows: minmax(var(--mt-h, 104px), 1fr) auto; gap: 3px; min-width: 0; margin: 0; }
/* (The canvas laid over its box, sized by its place only, never by its own drawing: at height 100% in the row, Safari let the canvas's pixel size feed back into the row and grow it without end.) */
.mu-mt__box { position: relative; min-height: var(--mt-h, 104px); }
.mu-mt__can { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: var(--mu-r-well); background: rgb(var(--mu-deep) / 0.28); box-shadow: inset 0 0 0 1px var(--mu-line); cursor: pointer; }
.mu-mt__foot { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 22px; }
.mu-mt__read { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9.5px; color: var(--film-ink-2); }
.mu-mt__set { flex: none; min-height: 22px !important; padding: 0 8px !important; font-size: 11px; }
@media (max-width: 760px) { .mu-ms__top { grid-template-columns: minmax(0, 1fr); } .mu-mt { width: 100%; max-width: 300px; } .mu-mt__rszw { display: none; } }

/* --- the keyboard on screen (keys.js) ------------------------------------------------------------------------------------
   A strip at the foot of the studio: the wheels at its side, a row of its
   own settings over the keys. Everything in it takes its own touches: no
   page scroll, no zoom, no text picked. The keys are drawn from the look's
   own key colours (--mu-cv-key-white, -black: the piano roll's), lit with
   the accent, brighter the harder the note. */
.mu { grid-template-rows: auto minmax(0, 1fr) auto auto auto; }
.mu-keys {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "wheels top" "wheels bed";
  gap: var(--s2) var(--s3); height: 204px; padding: var(--s2) var(--s3) var(--s3);
  border-top: var(--hairline) solid var(--mu-line); background: rgb(var(--mu-deep) / 0.35);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  transition: opacity var(--dur-face) var(--ease-soft), transform var(--dur-face) var(--ease-soft);
}
.mu-keys[hidden] { display: none; }
.mu-keys[data-opening] { opacity: 0; transform: translateY(14px); }
.mu-keys__wheels { grid-area: wheels; display: flex; gap: 6px; min-height: 0; }
.mu-keys__top { grid-area: top; display: flex; align-items: center; gap: var(--s3); min-width: 0; min-height: 40px; }
.mu-keys__sus .mu-ic { width: 10px; height: 10px; }
.mu-keys__sus[aria-pressed="true"] .mu-ic { filter: drop-shadow(0 0 4px rgb(var(--mu-ice) / 0.7)); }
.mu-keys__vel { flex: 0 1 168px; min-width: 120px; }
.mu-keys__vel .mu-line { grid-template-rows: auto 18px; }
.mu-keys__vel .mu-line__track { height: 18px; }
.mu-keys__map { display: flex; align-items: center; gap: 2px; flex: 0 1 300px; min-width: 150px; height: 32px; border-radius: var(--mu-r-control); }
.mu-keys__map:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
.mu-keys__step { display: grid; place-items: center; flex: none; width: 26px; height: 30px; padding: 0; border: 0; border-radius: var(--mu-r-control); background: none; color: var(--film-ink-2); cursor: pointer; transition: background-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease); }
.mu-keys__step .mu-ic { width: 14px; height: 14px; }
.mu-keys__step:hover:not(:disabled) { color: var(--film-ink); background: rgb(var(--mu-mist) / 0.1); }
.mu-keys__step:disabled { opacity: 0.35; cursor: default; }
.mu-keys__oct { flex: 1 1 auto; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 2px; height: 22px; cursor: grab; touch-action: none; }
.mu-keys__oct:active { cursor: grabbing; }
.mu-keys__o { display: grid; place-items: center; min-width: 0; overflow: hidden; border-radius: calc(var(--mu-r-control) / 2 + 1px); background: rgb(var(--mu-mist) / 0.07); color: var(--film-ink-2); font-family: var(--font-mono); font-size: 10px; line-height: 1; transition: background-color var(--dur-state) var(--ease); }
.mu-keys__o.is-shown { background: rgb(var(--mu-ice) / 0.3); color: var(--film-ink); }
.mu-keys__who { display: inline-flex; align-items: center; gap: 7px; min-width: 0; margin-left: auto; font-size: var(--t-xs); color: var(--film-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-keys__who:not(:empty)::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--tc, var(--signal)); }
.mu-keys__close { flex: none; }
.mu-keys__bed { grid-area: bed; position: relative; min-height: 0; touch-action: none; overflow: hidden; border-radius: 0 0 6px 6px; box-shadow: 0 -2px 0 rgb(var(--mu-deep) / 0.9); }
.mu-key { position: absolute; top: 0; box-sizing: border-box; overflow: hidden; }
.mu-key--w { bottom: 0; background: linear-gradient(to bottom, rgb(var(--mu-cv-key-white, var(--mu-mist)) / 0.86), rgb(var(--mu-cv-key-white, var(--mu-mist)) / 0.96) 70%); border-radius: 0 0 5px 5px; box-shadow: inset -1px 0 0 rgb(0 0 0 / 0.28), inset 0 -5px 0 rgb(0 0 0 / 0.09); }
.mu-key--b { z-index: 1; height: 62%; background: linear-gradient(to bottom, rgb(var(--mu-cv-key-black, var(--mu-deep))), rgb(var(--mu-cv-key-black, var(--mu-deep))) 87%, rgb(255 255 255 / 0.12) 87.5%, rgb(var(--mu-cv-key-black, var(--mu-deep))) 100%); border-radius: 0 0 4px 4px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.4), 0 3px 4px -1px rgb(0 0 0 / 0.45); }
.mu-key::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--signal); opacity: 0; transition: opacity 160ms var(--ease-soft); pointer-events: none; }
.mu-key[data-on="held"]::after { opacity: calc(0.28 + var(--v, 0.8) * 0.5); transition-duration: 0ms; }
.mu-key[data-on="pedal"]::after { opacity: 0.18; }
.mu-key--w[data-on="held"] { box-shadow: inset -1px 0 0 rgb(0 0 0 / 0.28), inset 0 -2px 0 rgb(0 0 0 / 0.09); }
.mu-key__k, .mu-key__c { position: absolute; z-index: 1; left: 0; right: 0; text-align: center; font-family: var(--font-mono); line-height: 1; pointer-events: none; }
.mu-key__k { bottom: 11px; font-size: 10.5px; font-weight: 600; color: rgb(var(--mu-cv-key-black, var(--mu-deep)) / 0.55); }
.mu-key--b .mu-key__k { bottom: calc(13% + 4px); font-size: 9.5px; color: rgb(var(--mu-cv-key-white, var(--mu-mist)) / 0.6); }
.mu-key__c { bottom: 28px; font-size: 9.5px; color: rgb(var(--mu-cv-key-black, var(--mu-deep)) / 0.38); }
/* The wheels: a slot with a cap; Bend's cap rests in the middle and springs back to it, Mod's fills from the foot. */
.mu-wheel { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 5px; width: 32px; min-height: 0; cursor: ns-resize; touch-action: none; border-radius: var(--mu-r-control); }
.mu-wheel:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
.mu-wheel__slot { position: relative; width: 24px; height: 100%; min-height: 60px; overflow: hidden; border-radius: var(--mu-r-control); background: rgb(var(--mu-deep) / 0.7); box-shadow: inset 0 0 0 1px var(--mu-line), inset 0 6px 10px -6px rgb(0 0 0 / 0.6); }
.mu-wheel__mid { position: absolute; left: 4px; right: 4px; top: 50%; height: 1px; background: rgb(var(--mu-mist) / 0.28); }
.mu-wheel__fill { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u, 0) * 100%); background: rgb(var(--mu-ice) / 0.24); }
.mu-wheel__thumb { position: absolute; left: 2px; right: 2px; height: 16px; bottom: calc(var(--u, 0.5) * (100% - 16px)); border-radius: max(2px, calc(var(--mu-r-control) - 2px)); background: var(--mu-cap); box-shadow: 0 1px 0 rgb(0 0 0 / 0.35), inset 0 -1px 0 rgb(0 0 0 / 0.15); }
.mu-wheel[data-wheel="mod"] .mu-wheel__thumb { bottom: calc(var(--u, 0) * (100% - 16px)); }
.mu-wheel[data-dragging] .mu-wheel__thumb { box-shadow: 0 1px 0 rgb(0 0 0 / 0.35), var(--react-drag-thumb); }
.mu-wheel__name { font-size: 10.5px; color: var(--film-ink-3); }
/* Notices stand above the keyboard. */
.mu[data-keys] .mu-notice { bottom: calc(var(--mu-keys-h, 204px) + var(--s4)); }
@media (prefers-reduced-motion: reduce) { .mu-keys { transition: none; } .mu-key::after { transition: none; } }
/* A touch screen: bigger reaches, a taller bed. */
@media (pointer: coarse) {
  .mu-keys { height: clamp(236px, 36dvh, 320px); }
  .mu-keys__vel { display: none; }
  .mu-keys__step { width: var(--hit, 40px); height: var(--hit, 40px); }
  .mu-keys__map { height: var(--hit, 40px); }
  .mu-keys__oct { height: 30px; }
  .mu-wheel { width: 40px; }
  .mu-wheel__slot { width: 32px; }
  .mu-wheel__thumb { height: 22px; }
  .mu-wheel[data-wheel="bend"] .mu-wheel__thumb { bottom: calc(var(--u, 0.5) * (100% - 22px)); }
  .mu-wheel[data-wheel="mod"] .mu-wheel__thumb { bottom: calc(var(--u, 0) * (100% - 22px)); }
}
/* A phone, and a phone on its side: the keyboard is fixed to the foot of the screen, under the thumbs, whatever scrolls above it. */
@media (max-width: 640px), (pointer: coarse) and (max-height: 520px) {
  .mu-keys { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom)); padding-left: calc(var(--s3) + env(safe-area-inset-left)); padding-right: calc(var(--s3) + env(safe-area-inset-right)); background: var(--film-shell-solid); box-shadow: 0 -1px 0 var(--mu-line), 0 -24px 48px -24px rgb(0 0 0 / 0.7); }
  .mu-keys[data-opening] { transform: translateY(40px); }
  .mu-float > .mu-keys { pointer-events: auto; }
  .mu[data-keys] { padding-bottom: var(--mu-keys-h, 300px); }
  .mu-keys__who { display: none; }
  .mu-keys__map { flex: 1 1 auto; min-width: 0; }
}
/* Narrow: the octave map by its figures alone, and the computer's velocity left to C and V. */
@media (max-width: 640px) { .mu-keys__o i { display: none; } .mu-keys__vel { display: none; } }
.mu-keys__o i { font-style: normal; }
/* A phone has no keys to type on: its piano carries no letters. */
@media (max-width: 640px) and (pointer: coarse) { .mu-key__k { display: none; } }
@media (pointer: coarse) and (max-height: 520px) { .mu-keys { height: min(62dvh, 280px); } }
/* A phone held upright: Bend and Mod as ribbons over the keys, the keys as tall as a thumb wants. */
@media (max-width: 640px) {
  .mu-keys { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto clamp(168px, 30dvh, 250px); grid-template-areas: "top" "wheels" "bed"; }
  .mu-keys__wheels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); }
  .mu-wheel { width: auto; grid-template-rows: none; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s2); cursor: ew-resize; }
  .mu-wheel__name { order: -1; }
  .mu-wheel__slot { width: 100%; height: 38px; min-height: 0; }
  .mu-wheel__mid { left: 50%; right: auto; top: 5px; bottom: 5px; width: 1px; height: auto; }
  .mu-wheel__fill { top: 0; bottom: 0; right: auto; width: calc(var(--u, 0) * 100%); height: auto; }
  .mu-wheel .mu-wheel__thumb, .mu-wheel[data-wheel] .mu-wheel__thumb { top: 3px; bottom: 3px; left: calc(3px + var(--u, 0.5) * (100% - 6px - 22px)); right: auto; width: 22px; height: auto; }
  .mu-wheel[data-wheel="mod"] .mu-wheel__thumb { left: calc(3px + var(--u, 0) * (100% - 6px - 22px)); }
}

/* An instrument track's keyboard key (the keyboard's one home): one of the
   track's keys, over its M and as wide, with a piano on its face, lit while
   the keyboard is open for that track. Each look dresses it as its other keys
   (.mu-hb), and lists it with S and A for the lit state. */
.mu-head > .mu-hb.mu-head__play { grid-area: kind; position: relative; z-index: 1; align-self: center; justify-self: stretch; width: auto; }
.mu-hb--k .mu-ic { width: 15px; height: 15px; }
.mu-hb--k[aria-pressed="true"] { color: var(--signal); background: rgb(var(--mu-ice) / 0.14); }
/* A phone: the column as wide as the keys under it once they have shrunk to
   share the header (four, or five with the takes key). */
@media (max-width: 640px) {
  .mu-head[data-kind="instrument"], .mu-head[data-kind="instrument"][data-collapsed] { grid-template-columns: calc(4px + var(--depth, 0) * 8px) min(var(--mu-key-w), calc((100% - 32px - var(--depth, 0) * 8px) / 4)) minmax(0, 1fr) auto 8px; }
  .mu-head[data-kind="instrument"]:has(.mu-hb--t) { grid-template-columns: calc(4px + var(--depth, 0) * 8px) min(var(--mu-key-w), calc((100% - 36px - var(--depth, 0) * 8px) / 5)) minmax(0, 1fr) auto 8px; }
  .mu-head[data-kind="instrument"] .mu-head__play { visibility: visible; }
}
/* A finger: a header's first row a finger tall (it gives way when the track
   is made shorter), so the keyboard key's reach, 44 px square, stays inside
   its own track and stops where the M row starts. The reach starts no
   further left than the header's edge. */
@media (pointer: coarse) {
  .mu-head:not(.mu-head--take):not(.mu-head--auto):not([data-collapsed]) { grid-template-rows: minmax(30px, var(--hit)) auto; padding-top: 0; padding-bottom: 0; }
  .mu-head > .mu-hb.mu-head__play::after { content: ""; position: absolute; top: calc(50% - var(--hit) / 2); left: max(calc(50% - var(--hit) / 2), calc(-8px - var(--depth, 0) * 8px)); width: var(--hit); height: var(--hit); }
}

/* MIDI learn: the control waiting for a controller's move. */
[data-learning] { outline: 2px solid var(--signal) !important; outline-offset: 3px; animation: mu-learn 1.1s var(--ease-soft) infinite; }
@keyframes mu-learn { 50% { outline-color: rgb(var(--mu-ice) / 0.25); } }
@media (prefers-reduced-motion: reduce) { [data-learning] { animation: none; } }
/* Session settings, MIDI: the controllers heard, a light that flickers with what comes in, the bindings. */
.mu-midirow { grid-template-columns: minmax(0, max-content) auto; justify-content: start; }
.mu-midirow__in { display: flex; align-items: center; min-width: 0; }
.mu-midirow__in uc-select { min-width: min(240px, 100%); }
.mu-midi-light { width: 8px; height: 8px; margin-right: var(--s2); border-radius: 50%; background: rgb(var(--mu-mist) / 0.16); box-shadow: inset 0 0 0 1px var(--mu-line); transition: background-color 240ms var(--ease-soft), box-shadow 240ms var(--ease-soft); }
.mu-midi-light[data-on] { background: var(--signal); box-shadow: 0 0 8px rgb(var(--mu-ice) / 0.6); transition-duration: 0ms; }
.mu-midimap[hidden] { display: none; }
.mu-midimap__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mu-midimap__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 160px auto auto; align-items: center; gap: var(--s2); min-height: 36px; }
.mu-midimap__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--film-ink); }
.mu-midimap__src { font-size: 11px; color: var(--film-ink-3); white-space: nowrap; }
.mu-midimap__mode { min-width: 0; }
.mu-midimap__pin .mu-ic, .mu-midimap__x .mu-ic { width: 15px; height: 15px; }
@media (max-width: 560px) {
  .mu-midimap__row { grid-template-columns: minmax(0, 1fr) auto 36px 36px; grid-template-areas: "name name pin x" "src mode mode mode"; row-gap: 2px; padding: 4px 0; }
  .mu-midimap__name { grid-area: name; } .mu-midimap__src { grid-area: src; } .mu-midimap__mode { grid-area: mode; width: 150px; } .mu-midimap__pin { grid-area: pin; } .mu-midimap__x { grid-area: x; }
}