/* ==========================================================================
   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 ------------------------------------------- */

.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; }
@media (max-width: 1640px) {
  .mu-menus .mu-menubtn { display: none; }
  .mu-menus .mu-menubtn--all { display: inline-block; }
  .mu-bar { gap: var(--s2); }
}
@media (max-width: 1280px) { .mu-where__clock, .mu-tempo__unit { display: none; } .mu-where { min-width: 88px; } }
/* Between the phone layout (980) and here the one-row bar ran out of room
   and the island cut off Export: two measured rows from here down. */
@media (max-width: 1120px) {
  .mu-menus, .mu-loud__meter { display: none; }
  .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; }
}
.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 { 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 { background: color-mix(in srgb, var(--tc) 32%, transparent); }
.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); } }
.mu-ar__corner { grid-area: corner; display: flex; align-items: center; justify-content: space-between; gap: var(--s1); 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); }
.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: 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; }
/* 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; }
.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); }
.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 (inspector #rides): 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); }
.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; }
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; }
.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-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 canvas fills its pad, so
   the pad can stretch to the controls' height without the canvas's own
   pixel size feeding back into the layout. */
.mu-place { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); min-width: 0; }
.mu-place__pad { position: relative; min-width: 0; height: clamp(200px, 50cqw, 300px); }
.mu-place__pad > .mu-viz--place { position: absolute; inset: 0; width: 100%; height: 100%; 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); }
.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; }
  .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 and name; the transport and the time;
     tempo, loudness and Export; 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 / -1; 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 / 3; justify-content: center; min-width: 0; min-height: 40px; }
  .mu-loud { grid-area: 3 / 3 / 4 / 5; justify-content: center; min-width: 0; min-height: 40px; }
  .mu-export { grid-area: 3 / 5 / 4 / -1; justify-content: center; min-width: 0; min-height: 40px; }
  .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; }
/* 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 (pluginface #riderFace, vis/riders.js): 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; }
@media (prefers-reduced-motion: reduce) { .mu-ref__read > span[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); }
.mu-ms__lanecanvas { --bands: 0px; display: block; width: 100%; height: calc(var(--ms-lane, 78px) + var(--bands)); cursor: pointer; }
.mu-ms__lanecanvas[data-sec] { --bands: 16px; }
.mu-ms__lanecanvas[data-mk] { --bands: 10px; }
.mu-ms__lanecanvas[data-sec][data-mk] { --bands: 26px; }
.is-peaks .mu-ms__lanecanvas { height: calc(112px + 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); }
/* 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.) */
  .mu-ms > .mu-ms__chain { display: flex; flex-direction: column; overflow: hidden; }
  .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; }
}
.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); }
  .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; }
}
/* The bar's two measured rows (the max-width 1120 block above) come sooner
   on touch: with a finger's transport, tempo and switches the one row runs
   out of room below 1360 and the island cut off Export. */
@media (pointer: coarse) and (min-width: 1121px) and (max-width: 1360px) {
  .mu-menus, .mu-loud__meter { display: none; }
  .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; }
  .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 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mu-views .mu-pill { justify-content: center; text-align: center; }
  .mu-export { grid-area: 2 / 5; justify-content: center; min-height: 40px; }
}
/* In those two rows the finger-sized transport leaves the view switch too
   little of the second, 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, and the name stands clear of the wider way back. */
@media (pointer: coarse) and (min-width: 641px) and (max-width: 1360px) {
  .mu-title { padding-left: calc(var(--hit) + var(--s3)); }
  .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; }
}

/* 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; }
}