@font-face { font-family: "Stencil"; src: url(/fonts/bigshoulders-stencil.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "LCD"; src: url(/fonts/sharetech.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Plex"; src: url(/fonts/plexmono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex"; src: url(/fonts/plexmono-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --bg: #050705;
  --panel-hi: #1d231b;
  --panel-lo: #111510;
  --slot: #080a08;
  --line: #2b3427;
  --line-hi: #44523e;
  --ink: #d9dfcb;
  --ink-dim: #8c977f;
  --ink-faint: #56604d;
  --phos: #9dff7f;
  --phos-mid: #57c24a;
  --phos-dim: #1f4a1d;
  --amber: #ffb627;
  --amber-dim: #6b4a0d;
  --red: #ff3b2f;
  --red-dim: #5a1410;
  --glow: 0 0 6px rgba(157, 255, 127, .55), 0 0 18px rgba(87, 194, 74, .25);
  --gap: clamp(5px, .55vw, 9px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* what the shared panels (boot, help, prep, discord, decals) are drawn with; each decal sets its own */
  --f-display: "Stencil", sans-serif;
  --f-lcd: "LCD", monospace;
  --f-mono: "Plex", ui-monospace, monospace;
  --dlg-bg: linear-gradient(#171c15, #0d100c);
  --sting-ink: #f1d9a6;
  --radius: 4px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
button { font: inherit; color: inherit; }
:is(.boot, dialog) .dim { color: var(--ink-faint); }
:is(.boot, dialog) .lbl { font: 600 10px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
@keyframes blink { 50% { opacity: .25 } }

#decal { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- controls inside the shared panels ---------- */
:is(.boot, dialog) .hw-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #3a4535;
  border-radius: 4px;
  background: linear-gradient(#2a3226, #181d16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 0 #050605, 0 3px 6px rgba(0, 0, 0, .6);
  font: 600 10.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: transform .08s, box-shadow .08s, filter .15s;
}
:is(.boot, dialog) .hw-btn:hover { filter: brightness(1.18); }
:is(.boot, dialog) .hw-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 #050605; }
:is(.boot, dialog) .hw-btn-led { width: 7px; height: 7px; border-radius: 50%; background: #233b20; box-shadow: inset 0 0 2px #000; }
:is(.boot, dialog) .hw-btn.on :is(.boot, dialog) .hw-btn-led { background: var(--phos); box-shadow: 0 0 6px var(--phos); }
:is(.boot, dialog) .hw-btn.busy :is(.boot, dialog) .hw-btn-led { background: var(--amber); box-shadow: 0 0 6px var(--amber); animation: blink 1s steps(1) infinite; }
:is(.boot, dialog) .hw-btn.big { min-height: 52px; padding: 0 26px; font-size: 13px; }
:is(.boot, dialog) .plate { /* embossed label-maker tape */
  flex: none;
  font: 12px/1 var(--f-lcd); letter-spacing: .14em;
  color: #e9eee0;
  background: linear-gradient(#141614, #0a0b0a);
  padding: 4px 6px 3px;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px #000;
  transform: rotate(-1deg);
}
:is(.boot, dialog) .pad {
  container-type: size;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  gap: 3px;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform .06s, border-color .2s, box-shadow .2s, filter .15s;
}
:is(.boot, dialog) .pad:hover { border-color: var(--line-hi); filter: brightness(1.12); }
:is(.boot, dialog) .pad:active, :is(.boot, dialog) .pad.firing { transform: translateY(2px); }
:is(.boot, dialog) .pad:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
:is(.boot, dialog) .pad-title {
  font: 800 clamp(15px, 24cqh, 26px)/1 var(--f-display);
  letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
:is(.boot, dialog) .pad-sub { font-size: clamp(9px, 13cqh, 11.5px); color: var(--ink-dim); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
:is(.boot, dialog) .pad-key { position: absolute; top: 7px; right: 8px; font-size: 11px; padding: 0 5px; color: var(--ink-faint); background: rgba(0,0,0,.35); }
:is(.boot, dialog) .sting.firing .pad-key { color: var(--amber); border-color: var(--amber); }
:is(.boot, dialog) .pad-glyph { position: absolute; top: 6px; right: 10px; font-size: clamp(16px, 30cqh, 30px); color: var(--ink-faint); line-height: 1; }
:is(.boot, dialog) .pad-led {
  position: absolute; top: 8px; right: 8px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #1c2a1a; box-shadow: inset 0 0 3px #000;
}
:is(.boot, dialog) .toggle[aria-pressed="true"] { border-color: var(--phos-mid); box-shadow: 0 0 14px rgba(87, 194, 74, :is(.boot, dialog) .25), inset 0 0 18px rgba(87, 194, 74, :is(.boot, dialog) .1); }
:is(.boot, dialog) .toggle[aria-pressed="true"] .pad-led { background: var(--phos); box-shadow: 0 0 8px var(--phos); }
:is(.boot, dialog) .toggle[aria-pressed="true"] .pad-title { color: var(--phos); text-shadow: var(--glow); }

:is(.boot, dialog) .sting { background: linear-gradient(160deg, rgba(255, 255, 255, :is(.boot, dialog) .03), transparent 40%), linear-gradient(#211d16, #14110d); border-color: #3a3123; }
:is(.boot, dialog) .sting .pad-title { color: var(--sting-ink); }
:is(.boot, dialog) .sting.firing { border-color: var(--amber); box-shadow: 0 0 22px rgba(255, 182, 39, :is(.boot, dialog) .45), inset 0 0 22px rgba(255, 182, 39, :is(.boot, dialog) .18); }
:is(.boot, dialog) .sting.firing .pad-title { color: var(--amber); text-shadow: 0 0 10px rgba(255, 182, 39, :is(.boot, dialog) .7); }
:is(.boot, dialog) .sting::after { /* progress sweep while a sting plays */
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--amber); box-shadow: 0 0 6px var(--amber);
  transform-origin: left; transform: scaleX(0);
}
:is(.boot, dialog) .sting.firing::after { animation: sweep var(--dur, 2s) linear forwards; }
@keyframes sweep { from { transform: scaleX(1) } to { transform: scaleX(0) } }
.env .pad-title, :is(.boot, dialog) .env .pad-title { font-size: clamp(14px, 26cqh, 22px); }

/* ---------- boot + manual ---------- */
.boot {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: #000;
  transition: opacity .5s var(--ease), visibility .5s;
}
/* dark until the operator touches it, then the tube warms up */
.boot.on { background: radial-gradient(ellipse at center, rgba(4, 18, 4, .94), rgba(0, 0, 0, .98)); backdrop-filter: blur(3px); }
.boot.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.boot:focus { outline: none; }
.boot > * { grid-area: 1 / 1; }
.boot-wake {
  font: 13px/1.4 var(--f-lcd); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); background: none; border: 0; padding: 12px 16px; cursor: pointer;
  transition: color .4s;
}
.boot-wake.nudge, .boot-wake:focus-visible { color: var(--phos-mid); outline: none; }
.boot-cursor { display: inline-block; width: .6em; height: 1.1em; margin-right: .8em; vertical-align: -.2em; background: currentColor; animation: blink 1.1s steps(1) infinite; }
.boot.on .boot-wake { display: none; }
.boot-inner { width: min(600px, 90vw); text-align: center; visibility: hidden; }
.boot.on .boot-inner { visibility: visible; }
:where(html:not(.quick-boot)) .boot.on .boot-inner { animation: crt-on .45s var(--ease) both; }
@keyframes crt-on {
  0% { transform: scale(1, .004); filter: brightness(4); opacity: .2; }
  45% { transform: scale(1, .004); filter: brightness(4); opacity: 1; }
  100% { transform: none; filter: none; }
}
.boot-auth { opacity: 0; visibility: hidden; transition: opacity .5s var(--ease); }
.boot.ready .boot-auth { opacity: 1; visibility: visible; }
.boot.gone .boot-inner, .boot.gone .boot-auth { visibility: hidden; transition: visibility 0s .5s; } /* after the fade */
/* the RPG player opens on the theme's own gate (app.js, bootQuick): no wake screen before it, nothing while the theme
   loads, and on Begin the gate goes in the same frame the console comes, so its words never lie over the board */
.quick-boot .boot-wake { display: none !important; }
.quick-boot:not([data-decal]) .boot-inner { visibility: hidden; }
.quick-boot .boot.gone, .quick-boot .boot.gone * { transition: none !important; animation: none !important; }
.boot-log {
  text-align: left;
  font: 14px/1.5 var(--f-lcd); color: var(--phos-mid);
  min-height: 9em; margin: 0 0 18px;
  text-shadow: var(--glow);
  white-space: pre-wrap;
}
.boot h2 { font: 800 44px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--phos); text-shadow: var(--glow); margin: 0 0 10px; }
.boot p { color: var(--ink-dim); font-size: 15px; line-height: 1.5; margin: 0 auto 22px; max-width: 46ch; }
.boot .boot-fine { font-size: 11px; color: var(--ink-faint); letter-spacing: .12em; text-transform: uppercase; margin-top: 18px; }

.manual {
  width: min(980px, 94vw); max-height: 90vh;
  padding: 0;
  background: var(--dlg-bg);
  color: var(--ink);
  border: 1px solid var(--line-hi);
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .8), 0 0 0 1px #000;
  user-select: text;
}
.manual::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(2px); }
.manual-inner { padding: 22px 26px; overflow: auto; max-height: 90vh; }
.manual h2 { font: 800 30px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--phos); text-shadow: var(--glow); margin: 0 0 14px; }
.manual h3 { font: 600 11px/1 var(--f-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--amber); margin: 16px 0 8px; }
.manual p, .manual li { font-size: 13.5px; line-height: 1.6; color: #c3cab6; margin: 0 0 8px; }
.manual a { color: var(--phos); }
.manual-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
@media (max-width: 900px) { .manual-inner p, .manual-inner li { font-size: 16px; line-height: 1.5; } }
.manual-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.keys { list-style: none; padding: 0; margin: 0; }
kbd { font: 12px var(--f-lcd); padding: 1px 5px; border: 1px solid var(--line-hi); border-bottom-width: 2px; border-radius: 3px; background: #0b0e0a; color: var(--ink); }
.tracklist { columns: 3; column-gap: 3.2em; font-size: 12px; color: var(--ink-dim); margin: 10px 0 16px; padding-left: 22px; }
.tracklist li { font-size: 12px; margin: 0; overflow-wrap: anywhere; break-inside: avoid; }

/* ---------- discord relay ---------- */
.discord-panel { width: min(560px, 94vw); }
/* settings and a band's track list: small panels in the help dialog's look, so every theme restyles them with it */
.settings, .tracks-dlg { width: min(560px, 94vw); }
.set-row { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0 4px; cursor: pointer; }
.set-row input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--phos-mid); }
.set-row span { font-size: 13.5px; line-height: 1.5; color: #c3cab6; }
.set-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.set-density { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0 0; font-size: 13.5px; color: var(--ink); }
.set-density b { margin-right: 6px; }
.set-density label { position: relative; cursor: pointer; }
.set-density input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.set-density span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(var(--panel-hi), var(--panel-lo)); font: 600 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.set-density input:checked + span { border-color: var(--phos-mid); color: var(--phos); box-shadow: inset 0 0 0 1px var(--phos-dim); }
.set-density input:focus-visible + span { outline: 2px solid var(--phos); outline-offset: 2px; }
@media (pointer: coarse) { .set-density span { min-height: 44px; } }
.set-note { font-size: 12px !important; color: var(--ink-dim) !important; margin: 8px 0 14px !important; }
.td-lede { margin-bottom: 10px !important; }
.td-list { list-style: none; margin: 0 0 14px; padding: 0; max-height: min(56vh, 520px); overflow-y: auto; border-top: 1px solid var(--line); }
.td-track {
  display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 44px; padding: 7px 10px; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; color: inherit;
}
.td-track:hover, .td-track:focus-visible { background: rgba(157, 255, 127, .06); outline: none; }
.td-name { font-size: 14px; color: var(--ink); }
.td-meta { font-size: 11.5px; color: var(--ink-dim); }
.td-track.now .td-name { color: var(--phos); }
.td-track.next .td-name { color: var(--amber); }
.td-actions { display: flex; gap: 10px; justify-content: flex-end; }
.dc-lede { margin-bottom: 4px !important; }
.dc-steps { list-style: none; counter-reset: step; padding: 0; margin: 14px 0 0; display: grid; gap: 14px; }
.dc-steps li { counter-increment: step; position: relative; padding: 12px 14px 14px 52px; border: 1px solid var(--line); border-radius: 4px; background: var(--slot); }
.dc-steps li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 14px; top: 12px;
  font: 600 13px/1 var(--f-lcd); color: var(--phos); text-shadow: var(--glow);
}
.dc-steps h3 { margin: 0 0 6px !important; }
.dc-steps p { margin-bottom: 10px !important; }
a.hw-btn { text-decoration: none; color: var(--ink); }
.dc-code-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dc-code {
  font: 400 34px/1 var(--f-lcd); letter-spacing: .14em; color: var(--phos); text-shadow: var(--glow);
  padding: 8px 14px; border: 1px solid var(--phos-dim); border-radius: 3px; background: #040604; user-select: all;
}
.dc-status { margin: 16px 0 8px !important; font: 600 12px/1.5 var(--f-mono) !important; letter-spacing: .08em; color: var(--amber) !important; }
.discord-panel[data-state="live"] .dc-status { color: var(--phos) !important; }
.discord-panel[data-state="error"] .dc-status { color: var(--red) !important; }
.dc-local { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13.5px; color: #c3cab6; cursor: pointer; }
.dc-local input { width: 18px; height: 18px; accent-color: var(--phos-mid); }
.dc-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.hw-btn[hidden] { display: none; }
.hw-btn:disabled { opacity: .45; cursor: default; filter: none; }

/* ---------- prep: the board before the session ---------- */
.boot .boot-prep { display: flex; margin: 14px auto 0; }
.prep, .tile-browser {
  width: min(1320px, 96vw); max-width: none; height: min(92vh, 980px); max-height: none;
  padding: 0;
  background: var(--dlg-bg);
  color: var(--ink);
  border: 1px solid var(--line-hi); border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .8), 0 0 0 1px #000;
}
.prep::backdrop, .tile-browser::backdrop { background: rgba(0, 0, 0, .78); backdrop-filter: blur(2px); }
.prep-inner { height: 100%; display: flex; flex-direction: column; padding: 18px 22px; gap: 14px; overflow: auto; }
.prep h2, .tile-browser h2 { font: 800 30px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--phos); text-shadow: var(--glow); margin: 0 0 6px; }
.prep h3 { font: 600 11px/1 var(--f-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--amber); margin: 0 0 8px; }
.prep-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.prep-lede { margin: 0; color: var(--ink-dim); font-size: 13.5px; line-height: 1.5; max-width: 70ch; }
.prep-actions { display: flex; gap: 10px; align-items: center; flex: none; }

.prep-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.preset {
  display: flex; flex-direction: column; gap: 5px; text-align: left; padding: 10px 12px;
  background: linear-gradient(var(--panel-hi), var(--panel-lo)); border: 1px solid var(--line); border-radius: 4px;
  color: var(--ink); cursor: pointer; font: inherit;
}
.preset:hover { border-color: var(--line-hi); }
.preset.on { border-color: var(--phos-mid); box-shadow: inset 0 0 0 1px var(--phos-dim), 0 0 12px rgba(87, 194, 74, .15); }
.preset-name { font: 700 16px/1.1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--sting-ink); }
.preset.on .preset-name { color: var(--phos); }
.preset-sub { font-size: 12px; line-height: 1.35; color: var(--ink-dim); }
.preset-card { display: flex; flex-direction: column; gap: 4px; }
.preset-sets { display: flex; flex-wrap: wrap; gap: 4px; }
.preset-set { min-height: 32px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-lo); color: var(--ink-dim); font: 600 11.5px/1.2 var(--f-mono); letter-spacing: .04em; cursor: pointer; text-align: left; }
.preset-set:hover { border-color: var(--line-hi); color: var(--ink); }
.preset-set.on { border-color: var(--phos-mid); color: var(--phos); box-shadow: inset 0 0 0 1px var(--phos-dim); }
@media (pointer: coarse), (max-width: 900px) { .preset-set { min-height: 44px; } }
.preset-card .preset { flex: 1; }
.preset-notes { display: flex; align-items: center; white-space: nowrap; min-height: 32px; padding: 4px 12px; font: 600 12px/1.3 var(--f-mono); letter-spacing: .04em; color: var(--phos); text-decoration: underline; text-underline-offset: 3px; }
.preset-notes:hover { color: var(--ink); }
.preset-notes:focus-visible { color: var(--ink); outline: 2px solid var(--phos); outline-offset: -2px; }
@media (pointer: coarse), (max-width: 900px) { .preset-notes { min-height: 44px; } }

.prep-main { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(420px, 1.1fr); gap: 20px; min-height: 0; flex: 1 0 auto; }
.prep-hint { margin: 0 0 10px; font-size: 12.5px; color: var(--ink-dim); }
.prep-map {
  display: grid; gap: 5px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 52px;
  grid-template-areas:
    "inv inv inv inv vio vio vio vio pur pur pur pur"
    "inv inv inv inv vio vio vio vio pur pur pur pur"
    "unn unn unn unn unn unn hom hom hom hom hom hom"
    "s1  s1  s2  s2  s3  s3  s4  s4  s5  s5  s6  s6 "
    "s7  s7  e1  e1  e2  e2  e3  e3  e4  e4  e5  e5 "
    "e6  e6  e7  e7  e8  e8  .   .   .   .   .   .  ";
}
.map-tile {
  display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0;
  padding: 6px 8px; text-align: left; cursor: pointer; touch-action: manipulation; user-select: none;
  background: linear-gradient(var(--panel-hi), var(--panel-lo)); border: 1px solid var(--line); border-radius: 4px;
  color: var(--ink); font: inherit;
}
.map-tile:hover { border-color: var(--line-hi); }
.map-tile.sel { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber-dim), 0 0 14px rgba(255, 182, 39, .18); }
.map-tile.drop { border-color: var(--phos); box-shadow: 0 0 14px rgba(157, 255, 127, .35); }
.map-tile.lifting { opacity: .35; }
.map-tile.ghost { position: fixed; z-index: 10; pointer-events: none; transform: translate(-50%, -50%) rotate(-2deg); opacity: .9; box-shadow: 0 12px 30px rgba(0, 0, 0, .7); }
.map-title { font: 700 14px/1.05 var(--f-display); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-scene .map-title { font-size: 19px; }
.map-sting .map-title { color: var(--sting-ink); }
.map-sub { font-size: 10.5px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prep-presets-wrap > summary { cursor: pointer; display: flex; align-items: baseline; gap: 12px; list-style: none; }
.prep-presets-wrap > summary::-webkit-details-marker { display: none; }
.prep-presets-wrap > summary h3 { margin: 0; }
.prep-presets-wrap > summary::after { content: "▾"; color: var(--ink-faint); }
.prep-presets-wrap:not([open]) > summary::after { content: "▸ change"; color: var(--phos); font-size: 12px; }
.prep-preset-now { font-size: 12.5px; color: var(--ink-dim); }
.prep-foot { display: none; justify-content: flex-end; margin-top: 16px; }
.track .cue-in { grid-column: 3 / -1; width: 100%; min-height: 36px; margin-top: 4px; font: inherit; color: var(--ink); background: rgba(0, 0, 0, .3); border: 1px solid var(--line); border-radius: 3px; padding: 4px 8px; }
.map-tile.empty .map-sub { color: var(--amber); }
/* a flex board (any number of sounds and loops) lays its map out as flowing rows under Music, Ambience and Sounds */
.prep-map.flex { grid-template-areas: none; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); grid-auto-rows: minmax(52px, auto); }
.prep-map .map-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 0; }
.map-head.fixed { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.map-head.fixed .map-head-t { margin: 0; font: 700 12px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.prep-map .map-head-t { margin: 0; font: 700 12px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.map-edit { min-height: 36px; min-width: 64px; padding: 0 14px; border: 1px solid var(--line-hi); border-radius: 4px; background: transparent; color: var(--ink); font: 600 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.map-edit.on { background: var(--phos-dim); border-color: var(--phos-mid); color: var(--phos); }
.map-edit:focus-visible { outline: 2px solid var(--phos); outline-offset: 2px; }
@media (pointer: coarse) { .map-edit { min-height: 44px; } }
/* unlocked: the tiles show they can be picked up, and only they take the drag */
.map-tile.arrange { cursor: grab; touch-action: none; position: relative; outline: 2px solid var(--phos-mid); outline-offset: -2px; padding-right: 30px; }
.map-tile.arrange::after { content: "⋮⋮"; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--phos); letter-spacing: -2px; font-size: 15px; line-height: 1; }
.prep-map.flex .map-head:first-child { margin-top: 0; }
/* on a ranked board, where Simple and Standard stop showing tiles */
.prep-map.flex .map-cut { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font: 600 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.prep-map.flex .map-cut.now { color: var(--phos); }
.prep-map.flex .map-cut::before, .prep-map.flex .map-cut::after { content: ""; flex: 1; border-top: 1px dashed var(--amber-dim); }
.prep-map.flex .map-scene { grid-column: span 2; }
.map-add { cursor: pointer; border-style: dashed; background: transparent; color: var(--ink-dim); }
.map-add:hover, .map-add:focus-visible { color: var(--ink); border-color: var(--line-hi); }

.prep-editor { min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 4px; background: rgba(0, 0, 0, .25); display: flex; flex-direction: column; gap: 10px; }
.ed-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ed-name, .ed-sub, .ed-band, .add-track input {
  font: inherit; color: var(--ink); background: #080a08; border: 1px solid var(--line); border-radius: 3px; padding: 7px 9px; min-width: 0;
}
.ed-name { font: 800 26px/1.1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--phos); }
.ed-sub { font-size: 13px; color: var(--ink-dim); }
.ed-name:focus, .ed-sub:focus, .ed-band:focus, .add-track input:focus { outline: none; border-color: var(--amber); }
.ed-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-dim); }
.ed-tile { position: relative; min-height: 120px; border: 1px solid var(--line-hi); border-radius: 4px; container-type: size; }
.ed-tile .pad-title { font-size: 34px; }
.ed-vol { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.ed-vol .lbl { font: 600 10.5px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); }
.ed-vol input { flex: 1; max-width: 320px; accent-color: var(--phos); }
.ed-vol output { font: 600 13px/1 var(--f-mono); color: var(--phos); min-width: 3.5em; }
.ed-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 2px 0 12px; }
.ed-opt { display: flex; flex-direction: column; gap: 6px; }
.ed-opt .lbl { font: 600 10.5px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); }
.ed-opt select { min-height: 40px; padding: 0 10px; font: 14px var(--f-mono); color: var(--ink); background: var(--slot); border: 1px solid var(--line-hi); border-radius: 3px; }
.ed-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.band-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.band-tab {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; padding: 7px 9px; min-width: 0;
  background: #0b0e0a; border: 1px solid var(--line); border-radius: 3px; color: var(--ink-dim); cursor: pointer; font: inherit;
}
.band-tab b { font: 16px/1 var(--f-lcd); color: var(--ink-faint); }
.band-tab .band-name { font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.band-tab .band-len { font-size: 10.5px; color: var(--ink-faint); }
.band-tab.on { border-color: var(--amber); background: #15120a; }
.band-tab.on b { color: var(--amber); text-shadow: 0 0 6px rgba(255, 182, 39, .5); }
.band-row { display: flex; align-items: center; gap: 10px; }
.ed-band { flex: 1; }

.playlist { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.tracks { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 3px; background: #070907; }
.track {
  display: grid; grid-template-columns: 22px 30px minmax(0, 1fr) auto 44px 22px 22px 24px; align-items: center; gap: 6px;
  padding: 5px 8px; border-bottom: 1px solid #141a12; background: #070907; font-size: 12.5px; position: relative;
  transition: transform .12s var(--ease);
}
.track.dragging { transition: none; z-index: 2; background: #121810; box-shadow: 0 6px 18px rgba(0, 0, 0, .7); }
.track.next .num { color: var(--phos); }
.track.next .num::before { content: "▶ "; font-size: 9px; }
.track.skipped .info { opacity: .45; text-decoration: line-through; text-decoration-thickness: 1px; }
.track.empty { display: block; padding: 18px 12px; color: var(--ink-faint); text-align: center; }
.grip { color: var(--ink-faint); user-select: none; text-align: center; letter-spacing: -2px; visibility: hidden; }
#prep.edit-music .grip { visibility: visible; cursor: grab; touch-action: none; } /* playlists reorder by drag only while Music is being edited */
.num { font: 13px var(--f-lcd); color: var(--ink-faint); text-align: right; }
.info { display: flex; flex-direction: column; min-width: 0; }
.info .t { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info .a { color: var(--ink-faint); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src { font: 600 9px/1 var(--f-mono); letter-spacing: .14em; padding: 3px 5px; border-radius: 2px; border: 1px solid var(--line); color: var(--ink-faint); }
.src.yt { color: #ff8a80; border-color: #5a2420; }
.src.url { color: #8fd3ff; border-color: #1f4157; }
.dur { font: 13px var(--f-lcd); color: var(--ink-dim); text-align: right; }
.mv, .del { background: none; border: 1px solid transparent; border-radius: 3px; color: var(--ink-faint); cursor: pointer; font-size: 11px; padding: 2px 0; }
.mv:hover, .del:hover, .mv:focus-visible, .del:focus-visible { border-color: var(--line-hi); color: var(--ink); outline: none; }
.del:hover { color: var(--red); }
.add-track { display: flex; gap: 8px; }
.add-track input { flex: 1; }
.add-track .hw-btn:disabled { opacity: .6; cursor: progress; }
.add-note { margin: 0; font-size: 12px; color: var(--ink-dim); line-height: 1.45; min-height: 1.4em; }

.tile-browser { width: min(1100px, 94vw); height: min(86vh, 900px); }
.tb-inner { height: 100%; display: flex; flex-direction: column; padding: 18px 22px; gap: 10px; }
.tb-head { display: flex; justify-content: space-between; align-items: center; }
.tb-body { overflow: auto; padding-right: 4px; }
.browse-cat { font: 600 11px/1 var(--f-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--amber); margin: 14px 0 8px; }
.browse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); grid-auto-rows: 92px; gap: 8px; }
.browse-grid.scenes { grid-auto-rows: 120px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.browse-tile { position: relative; text-align: left; cursor: pointer; border: 1px solid var(--line); container-type: size; }
.browse-tile:hover, .browse-tile:focus-visible { border-color: var(--phos-mid); outline: none; }
.browse-tile.current { border-color: var(--amber); }
.scene-choice .pad-title { font-size: 24px; }
.browse-tag { position: absolute; top: 6px; right: 8px; font: 600 9px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.browse-preview {
  position: absolute; right: 6px; bottom: 6px; width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--line-hi); border-radius: 50%; color: var(--phos); font-size: 11px; background: #0b0e0a;
}
.browse-preview:hover, .browse-preview:focus-visible { background: #16200f; outline: none; }

@media (max-width: 900px) {
  .prep, .tile-browser { width: 100vw; height: 100dvh; border-radius: 0; }
  .prep-head { flex-direction: column; }
  .prep-main { grid-template-columns: 1fr; }
  .prep-map { grid-auto-rows: 46px; grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas: "inv inv inv vio vio vio" "pur pur pur unn unn unn" "hom hom hom s1 s1 s1" "s2 s2 s3 s3 s4 s4" "s5 s5 s6 s6 s7 s7" "e1 e1 e2 e2 e3 e3" "e4 e4 e5 e5 e6 e6" "e7 e7 e8 e8 . ."; }
  .map-scene .map-title { font-size: 15px; }
  .track { grid-template-columns: 22px 26px minmax(0, 1fr) 40px 22px 22px 24px; }
  .track .src { display: none; }
  .tracks { max-height: none; }
}

/* The shared dialogs carry the same fine print and touch rules under every theme (themes only recolor them): a tile's
   sub-line wraps instead of trailing off, words stay at 11 px or more, and on touch screens every control in them is
   a 40 px target. A phone's track row gives the title a line of its own, with its controls under it. */
.map-sub { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.2; font-size: 11px; }
.map-title { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; hyphens: auto; } /* a renamed scene takes a second line */
.band-tab .band-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; line-height: 1.2; } /* "Something off" in a phone's quarter-width tab */
.prep-map { grid-auto-rows: minmax(52px, auto); }
:is(.boot, dialog) .lbl, .preset-game, .band-tab .band-len, .ed-vol .lbl { font-size: 11px; }
.src { font-size: 10px; }
@media (max-width: 900px) {
  .prep-map { grid-auto-rows: minmax(46px, auto); }
  .track { grid-template-columns: 22px 26px minmax(0, 1fr) 40px 40px 40px 40px; }
  .mv, .del { min-width: 40px; min-height: 40px; font-size: 14px; }
  .ed-name, .ed-sub, .ed-band, .add-track input { min-height: 44px; }
  .dc-local { display: flex; align-items: center; gap: 12px; min-height: 44px; }
  .dc-local input { flex: none; width: 22px; height: 22px; margin: 0; }
  .manual a { position: relative; }
  .manual a::after { content: ""; position: absolute; inset: -12px -4px; } /* a finger-sized hit area; the text stays put */
}
/* The playing track's name opens its band's list on engines that have one (marked data-tracks, or labelled "Tracks for …"). It is a
   line of type, so on touch screens it gets a finger-sized hit area without moving: padding the eye doesn't see,
   taken back by a matching negative margin. A theme that pads its own title keeps its padding (this rule weighs nothing) */
@media (pointer: coarse), (max-width: 900px) {
  :where(#decal [data-tracks], #decal [aria-label^="Tracks for"]) { padding-block: 14px; margin-block: -14px; }
}
@media (max-width: 600px) {
  .track { grid-template-columns: 22px 30px minmax(0, 1fr) repeat(3, 40px); row-gap: 2px; padding-block: 8px 4px; }
  .track > .grip { grid-row: 1 / span 2; }
  .track > .info { grid-column: 2 / -1; }
  .track > .num { grid-row: 2; grid-column: 2; }
  .track > .dur { grid-row: 2; grid-column: 3; text-align: left; }
  .track > .mv, .track > .del { grid-row: 2; }
  .info .t, .info .a { white-space: normal; overflow-wrap: anywhere; }
}
.dc-yt { margin: 4px 0 10px; padding: 10px 12px; border: 1px solid #5a2420; border-radius: 4px; background: rgba(90, 36, 32, .12); }
.dc-yt p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--ink-dim); }
.dc-yt b { color: #ff8a80; font-weight: 600; }
.boot .boot-remote { font-size: 13px; margin: 18px auto 0; color: var(--ink-dim); }
.boot .boot-remote b { color: var(--phos-mid); font-weight: 600; }

/* ---------- YouTube's picture: lives in the shell, sits over the decal's [data-yt-home] ---------- */
.yt-bay { position: fixed; left: 0; top: 0; z-index: 30; width: 120px; height: 68px; overflow: hidden; border: 1px solid var(--line); opacity: 0; pointer-events: none; transition: opacity .6s; }
.yt-bay.on { opacity: .85; }
.yt-bay iframe { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; transform: translate(-50%, -50%) scale(.62); }

/* ---------- the decal picker ---------- */
.decal-picker { width: min(1040px, 94vw); }
.dp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dp-head h2 { margin: 0; }
.dp-lede { margin: 6px 0 4px !important; color: var(--ink-dim) !important; }
.dp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.dp-game { grid-column: 1 / -1; font: 600 11px/1 var(--f-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--amber); margin: 14px 0 0; }
.dp-games { grid-column: 1 / -1; margin: -4px 0 0; font: 400 12px/1.3 var(--f-mono); letter-spacing: .04em; text-transform: none; color: var(--ink-dim); }
.dp-card {
  display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 10px; text-align: left; cursor: pointer;
  background: linear-gradient(var(--panel-hi), var(--panel-lo)); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink);
  transition: border-color .15s, transform .15s cubic-bezier(.2, .7, .2, 1);
}
.dp-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: 2px; background: #000; display: block; }
.dp-card:hover, .dp-card:focus-visible { border-color: var(--phos-mid); outline: none; transform: translateY(-2px); }
.dp-card.on { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber-dim); }
.dp-name { font: 700 17px/1.1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; }
.dp-sound { font-size: 12px; color: var(--ink-dim); }
.dp-card.on .dp-sound::before { content: "On now · "; color: var(--amber); }

/* ---------- changing themes: changing the channel ----------
   The old face jolts (a few random sideways kicks, set per change in decals.js) while it leaves the way its own world
   would: a screen collapses to a line, a page turns away, a cover drops off the press, blast doors close, a placard
   flips on its bolts, a deck plan scans out. Static takes the picture (#tvStatic), the new channel's number shows in
   the corner (#tvOsd), and the new face arrives its own way while the picture rolls into vertical hold. */
html[data-ch-out], html[data-ch-in] { background: #050505; overflow: hidden; }
html[data-ch-out] #decal, html[data-ch-in] #decal { will-change: transform, filter, clip-path; }
@keyframes ch-jolt { 0%, 100% { translate: 0 0 } 18% { translate: var(--j1) 0 } 42% { translate: var(--j2) var(--jy) } 66% { translate: var(--j3) 0 } 84% { translate: calc(var(--j1) * -.4) 0 } }
@keyframes ch-roll { 0% { translate: 0 var(--roll) } 35% { translate: 0 calc(var(--roll) * -.35) } 60% { translate: 0 calc(var(--roll) * .12) } 80% { translate: 0 -2px } 100% { translate: 0 0 } }
html[data-ch-out] #decal { animation: ch-fade .27s cubic-bezier(.4, 0, .6, 1) both, ch-jolt .27s steps(1, end) both; }
html[data-ch-in] #decal { animation: ch-fade-in .5s cubic-bezier(.2, .7, .2, 1) both, ch-roll .42s cubic-bezier(.3, .6, .25, 1) both; }
@keyframes ch-fade { to { opacity: 0; filter: brightness(1.8) contrast(1.4) } }
@keyframes ch-fade-in { from { opacity: 0; filter: brightness(2) contrast(1.5) } }

html[data-ch-out="delta-green"] #decal { animation: ch-crt-off .27s cubic-bezier(.6, 0, .8, .4) both, ch-jolt .27s steps(1, end) both; }
html[data-ch-in="delta-green"] #decal { animation: ch-crt-on .5s cubic-bezier(.2, .7, .2, 1) both, ch-roll .42s cubic-bezier(.3, .6, .25, 1) both; }
@keyframes ch-crt-off { 55% { transform: scale(1, .006); filter: brightness(3) } 100% { transform: scale(0, .006); filter: brightness(5); opacity: 0 } }
@keyframes ch-crt-on { 0% { transform: scale(0, .006); filter: brightness(5) } 40% { transform: scale(1, .006); filter: brightness(3) } 100% { transform: none; filter: none } }

html[data-ch-out="operations-manual"] #decal { transform-origin: 0 50%; animation: ch-page-out .27s cubic-bezier(.4, 0, .6, 1) both, ch-jolt .27s steps(1, end) both; }
html[data-ch-in="operations-manual"] #decal { animation: ch-page-in .55s cubic-bezier(.2, .7, .2, 1) both, ch-roll .42s cubic-bezier(.3, .6, .25, 1) both; }
@keyframes ch-page-out { to { transform: perspective(2000px) rotateY(-100deg); filter: brightness(.55) } }
@keyframes ch-page-in { from { transform: translate(3%, 2%) rotate(-1.4deg); opacity: 0; filter: brightness(1.6) } }

html[data-ch-out="module-cover"] #decal { animation: ch-drop .27s cubic-bezier(.5, 0, .75, .3) both, ch-jolt .27s steps(1, end) both; }
html[data-ch-in="module-cover"] #decal { animation: ch-print .6s cubic-bezier(.2, .7, .2, 1) both, ch-roll .42s cubic-bezier(.3, .6, .25, 1) both; }
@keyframes ch-drop { to { transform: translateY(14%) rotate(2.5deg); opacity: 0 } }
@keyframes ch-print { 0% { clip-path: inset(0 100% 0 0); filter: contrast(1.8) saturate(0) } 70% { filter: contrast(1.25) saturate(.6) } 100% { clip-path: inset(0); filter: none } }

html[data-ch-out="bridge-hardware"] #decal { animation: ch-doors-shut .27s cubic-bezier(.7, 0, .3, 1) both, ch-jolt .27s steps(1, end) both; }
html[data-ch-in="bridge-hardware"] #decal { animation: ch-doors-open .6s cubic-bezier(.7, 0, .3, 1) both, ch-roll .42s cubic-bezier(.3, .6, .25, 1) both; }
@keyframes ch-doors-shut { to { clip-path: inset(0 50% 0 50%); filter: brightness(.5) } }
@keyframes ch-doors-open { from { clip-path: inset(0 50% 0 50%); filter: brightness(.5) } }

html[data-ch-out="emergency-placard"] #decal { transform-origin: 50% 100%; animation: ch-flip-out .27s cubic-bezier(.5, 0, .75, .3) both, ch-jolt .27s steps(1, end) both; }
html[data-ch-in="emergency-placard"] #decal { transform-origin: 50% 0; animation: ch-flip-in .55s cubic-bezier(.2, .8, .3, 1.15) both, ch-roll .42s cubic-bezier(.3, .6, .25, 1) both; }
@keyframes ch-flip-out { to { transform: perspective(1600px) rotateX(88deg); filter: brightness(.5) } }
@keyframes ch-flip-in { from { transform: perspective(1600px) rotateX(-88deg); filter: brightness(.6) } }

html[data-ch-out="deck-plan"] #decal { animation: ch-scan-out .27s cubic-bezier(.4, 0, .6, 1) both, ch-jolt .27s steps(1, end) both; }
html[data-ch-in="deck-plan"] #decal { animation: ch-scan-in .6s cubic-bezier(.3, .6, .3, 1) both, ch-roll .42s cubic-bezier(.3, .6, .25, 1) both; }
@keyframes ch-scan-out { to { clip-path: inset(100% 0 0 0); filter: hue-rotate(160deg) saturate(.3) brightness(.7) } }
@keyframes ch-scan-in { from { clip-path: inset(0 0 100% 0); filter: brightness(1.6) } }

#tvStatic { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 2147483000; display: none; pointer-events: none;
  image-rendering: auto; filter: contrast(1.15) blur(.4px); mix-blend-mode: normal; }
#tvOsd { position: fixed; top: 18px; right: 22px; z-index: 2147483001; pointer-events: none; display: grid; justify-items: end; gap: 2px;
  font-family: "LCD", "Plex", ui-monospace, monospace; color: #7dff8a; text-shadow: 0 0 6px rgba(80, 255, 110, .75), 2px 0 0 rgba(255, 40, 80, .35), -2px 0 0 rgba(40, 160, 255, .35);
  opacity: 0; letter-spacing: .08em; }
#tvOsd b { font-size: 64px; line-height: 1; font-weight: 400; }
#tvOsd span { font-size: 24px; }
#tvOsd i { font-style: normal; font-size: 13px; opacity: .75; }
#tvOsd.on { animation: osd 1.7s steps(1, end) both; }
@keyframes osd { 0% { opacity: 1 } 88% { opacity: 1 } 100% { opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
  :is(.boot, dialog) *, :is(.boot, dialog) *::before, :is(.boot, dialog) *::after { animation: none !important; transition: none !important; }
}
.preset-game { grid-column: 1 / -1; margin: 6px 0 0; font: 600 10.5px/1 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); }
.prep-presets .preset-reset { grid-column: 1 / -1; justify-self: start; }
.set-voice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0 0; font-size: 13.5px; color: var(--ink); }
.set-voice select { min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-lo); color: var(--ink); font: 600 12px/1 var(--f-mono); }
@media (pointer: coarse) { .set-voice select { min-height: 44px; } }

/* Prep on a phone (kept last so it wins): names wrap rather than lose their ends, rows grow to fit them */
@media (max-width: 900px) {
  .map-sub, .info .t, .info .a { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
  .prep-map { grid-auto-rows: minmax(56px, auto); }
  .band-tab, .band-tab .band-name { white-space: normal; }
  /* a playlist row in two lines: the whole title, then its source, length and actions at thumb size */
  .track { grid-template-columns: 18px minmax(0, 1fr) auto 44px 44px 44px; grid-template-areas: "g i i i i i" "g s d u w x" "g c c c c c"; row-gap: 2px; }
  .track > :nth-child(1) { grid-area: g; } .track > :nth-child(2) { display: none; } .track > :nth-child(3) { grid-area: i; }
  .track > :nth-child(4) { grid-area: s; justify-self: start; } .track > :nth-child(5) { grid-area: d; } .track > :nth-child(6) { grid-area: u; }
  .track > :nth-child(7) { grid-area: w; } .track > :nth-child(8) { grid-area: x; } .track > .cue-in { grid-column: 2 / -1; grid-row: 3; }
  .track .mv, .track .del { min-height: 44px; min-width: 44px; font-size: 14px; }
  .track .src { display: inline-block; } /* YT / LINK: these need the internet */
  .band-tabs { grid-template-columns: repeat(2, 1fr); }
  #prep .prep-foot { display: flex; }
}