/* ============================================================
   Console homepage. Loaded after style.css, which supplies the
   fonts and the site tokens (--bg, --text, --accent and friends).
   Every size on the desk is in cqi, a percent of the desk's own
   width, so the whole object scales as one piece; text is clamped
   so it never drops below legible on a small laptop.
   ============================================================ */

:root {
  /* Desk hardware */
  --desk-body: #1c1d22;
  --desk-body-hi: #2a2b31;
  --desk-edge: #3a3b42;
  --desk-well: #121317;
  --desk-print: #8d8e98;
  --key-face: #2c2d33;
  --key-face-lo: #212227;
  --key-text: #d6d6dc;
  --key-shadow: #0b0b0e;
  --led: var(--accent);
  --led-rgb: var(--accent-rgb);

  /* Screens */
  --screen-bg: #07080b;
  --screen-bar: #171b25;
  --screen-line: rgba(255, 255, 255, 0.07);
  --screen-text: #dfe3ea;
  --screen-muted: #8a92a2;
  --cue-active: #26553a;
  --cue-active-text: #cdebd6;
  --cmd-ok: #9fd3ad;
  --cmd-err: #e39a8e;

  /* Pool appearances, one per section. Muted on purpose: the photos
     on the main screen carry the real colour, same rule as the site. */
  --app-work: #5ea4ad;

  /* Light colours for the row 1 tours. These ARE saturated: each one is
     the colour that tour's photos are lit in, and the rig behind the
     desk plays it when the fader comes up. */
  --lx-white: #eef0f4;
  --lx-orange: #ff7f1e;
  --lx-cto: #ffbd7a;
  --lx-magenta: #e93cd2;
  --lx-red: #f2302b;
  --app-woh: var(--lx-white);
  --app-forever: var(--lx-orange);
  --app-australia: var(--lx-cto);
  --app-atreyu: var(--lx-magenta);
  --app-edm: var(--lx-red);

  --app-scratch: #88a978;
  --app-plugins: #7f93c8;
  --app-studio: #c4907f;
  --app-pixels: #c8b27a;
  --app-about: #a984a1;
  --app-contact: #e3dccb;
  --app-demo: #b48ad8;

  /* Color Picker Demo. Group outlines follow the System Builder's own
     appearances (mode green, saturation red, layer amber, clear red,
     Type grey, fade blue), lifted a little so they read on a dark
     screen. The rainbow marks fader 306. */
  --cbd-mode: #00ff80;
  --cbd-delay: #3d6bff;
  --cbd-sat: #ff3b30;
  --cbd-type: #8a8f9c;
  --cbd-layer: #ffbe00;
  --cbd-clear: #d23a3a;
  --cbd-fade: #78c8ff;
  --demo-rainbow: linear-gradient(90deg, #ff0000, #ff8000, #ffff00, #00ff00, #00ffff, #0082ff, #8000ff, #ff00ff);
  --demo-drop: clamp(120px, 26svh, 290px);

  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}

@property --beam-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #f2e9d5;
}
/* One rig head's own colour, so a cue can lay a gradient across the
   truss. Registered so it fades with the rest of the rig. */
@property --bc {
  syntax: "<color>";
  inherits: true;
  initial-value: #f2e9d5;
}
@property --v {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
/* One demo head's colour. Registered so it can fade: color-demo.js sets
   the fade time and the delay on each head's transition. */
@property --lamp {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

body.console-page {
  background: var(--bg);
  height: 100svh;
  overflow: hidden;
  font-size: 1rem;
}

/* ---------- Scene ---------- */
.scene {
  position: relative;
  height: 100svh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 16px 14px;
}

.tagline {
  position: absolute;
  top: 18px; left: 22px;
  z-index: 3;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
  pointer-events: none;
}
.tagline strong { color: var(--text); font-weight: 700; }

.corner {
  position: absolute;
  top: 14px; right: 18px;
  z-index: 3;
  display: flex; align-items: center; gap: 10px;
}
.corner-link {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.corner-link:hover, .corner-link:focus-visible { color: var(--text); border-color: rgba(var(--accent-rgb), 0.4); }
.corner-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.corner-btn svg { width: 18px; height: 18px; }
.corner-btn .wave { display: none; }
.corner-btn[aria-pressed="true"] { color: var(--text); }
.corner-btn[aria-pressed="true"] .wave { display: inline; }
.corner-btn[aria-pressed="true"] .mute { display: none; }

/* ---------- Rig: truss, beams, haze behind the desk ---------- */
.rig {
  --gm: 1;
  --haze: 0.55;
  --beam-color: var(--accent);
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  transition: --beam-color 0.9s ease;
}
.truss {
  position: absolute;
  top: 0; left: 4%; right: 4%;
  height: 14px;
  background:
    repeating-linear-gradient(60deg, transparent 0 9px, #26272d 9px 11px),
    repeating-linear-gradient(-60deg, transparent 0 9px, #26272d 9px 11px);
  border-top: 2px solid #2d2e35;
  border-bottom: 2px solid #2d2e35;
  opacity: 0.8;
}
.beams { position: absolute; inset: 0; }
.beam {
  position: absolute;
  top: 12px;
  width: 22vw;
  height: 130vh;
  margin-left: -11vw;
  transform-origin: 50% 0;
  --bc: var(--beam-color);
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--bc) 90%, white) 0%,
    color-mix(in srgb, var(--bc) 55%, transparent) 30%,
    transparent 78%);
  clip-path: polygon(48.5% 0, 51.5% 0, 100% 100%, 0 100%);
  filter: blur(5px);
  mix-blend-mode: screen;
  opacity: calc(var(--gm) * var(--lvl, 1) * (0.12 + 0.5 * var(--haze)));
  transition: opacity 0.6s ease, --bc 0.9s ease;
}
.head {
  --bc: var(--beam-color);
  position: absolute;
  top: 6px;
  width: 16px; height: 12px;
  margin-left: -8px;
  border-radius: 3px 3px 6px 6px;
  background: #34353c;
  box-shadow: 0 6px 14px -2px color-mix(in srgb, var(--bc) calc(50% * var(--gm)), transparent);
  transition: --bc 0.9s ease;
}

/* Laser fan: the EDM cue swaps every other head for a spread of thin
   white lines. Each fan swings with the head it replaces. */
.laser {
  position: absolute;
  top: 12px;
  width: 0; height: 130vh;
  transform-origin: 50% 0;
  opacity: calc(var(--gm) * var(--on, 0) * (0.45 + 0.55 * var(--haze)));
  transition: opacity 0.6s ease;
  mix-blend-mode: screen;
}
.laser i {
  position: absolute;
  top: 0; left: -1px;
  width: 2px; height: 100%;
  transform-origin: 50% 0;
  transform: rotate(var(--a));
  background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0.75) 25%, rgba(255, 255, 255, 0.25) 60%, transparent 85%);
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
}
.haze {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 70% at 50% 30%, color-mix(in srgb, var(--beam-color) 18%, transparent), transparent 70%);
  opacity: calc(var(--haze) * var(--gm) * 0.8);
  transition: opacity 0.4s ease;
}

/* ---------- Power hint (first visit only) ---------- */
.power-hint {
  position: absolute;
  z-index: 4;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--text);
  text-shadow: 0 2px 16px #000;
  pointer-events: none;
  animation: hint-pulse 2.2s ease-in-out infinite;
}
.power-hint-sub { font-size: 14px; color: var(--muted); }
.power-hint[hidden] { display: none; }
@keyframes hint-pulse { 50% { opacity: 0.55; } }

/* ---------- The desk ---------- */
.console-wrap {
  position: relative;
  z-index: 2;
  width: min(1180px, 100%, calc((100svh - 72px) * 1.29));
  perspective: 2200px;
  perspective-origin: 50% 0%;
}
.console {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1cqi;
  padding: 1.8cqi 1.8cqi 1.3cqi;
  border-radius: 1.4cqi 1.4cqi 0.8cqi 0.8cqi;
  background:
    linear-gradient(to bottom, var(--desk-body-hi), var(--desk-body) 18%, var(--desk-body) 82%, #17181c);
  border: 1px solid var(--desk-edge);
  box-shadow:
    0 0 0 0.35cqi #101115,
    0 3cqi 6cqi -1cqi rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: rotateX(7deg);
  transform-origin: 50% 100%;
}
.console.is-off { cursor: pointer; }

/* ---------- Screens ---------- */
.deck-screens {
  display: grid;
  grid-template-columns: 2.35fr 1fr;
  gap: 1.3cqi;
  height: 29cqi;
}
.screen {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--screen-bg);
  border: 0.55cqi solid #0c0d10;
  border-radius: 0.6cqi;
  outline: 1px solid #2f3036;
  overflow: hidden;
  color: var(--screen-text);
  font-family: var(--font-body);
}
.screen-glass {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.045) 0%, transparent 38%);
}
.console.is-off .screen > :not(.screen-glass) { visibility: hidden; }
/* The last beat of a shutdown: screens dim out before the desk goes dark. */
.screen > :not(.screen-glass) { transition: opacity 0.6s ease; }
.console.is-fading .screen > :not(.screen-glass) { opacity: 0; }

.screen-bar {
  flex: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1cqi;
  padding: 0 0.9cqi;
  height: max(22px, 2.3cqi);
  background: var(--screen-bar);
  border-bottom: 1px solid var(--screen-line);
  font-size: clamp(10.5px, 1.02cqi, 13px);
  color: var(--screen-muted);
  white-space: nowrap;
}
.screen-title { color: var(--screen-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.screen-meta { display: flex; gap: 1.2cqi; font-family: var(--font-mono); }

.screen-body {
  flex: 1;
  min-height: 0;
  position: relative;
  filter: brightness(var(--screen-bright, 1));
  transition: filter 0.3s ease;
}
.screen-foot {
  flex: none;
  display: flex; align-items: center; gap: 1.4cqi;
  padding: 0 0.9cqi;
  height: max(26px, 2.6cqi);
  border-top: 1px solid var(--screen-line);
  font-size: clamp(10.5px, 1cqi, 13px);
  color: var(--screen-muted);
  white-space: nowrap;
  overflow: hidden;
}
.screen-foot .count { margin-left: auto; font-family: var(--font-mono); }

/* ---------- Strip screen: the live cue's photos as a pool ----------
   It sits in the lower deck above the faders, where the encoders were,
   so it costs the desk no height. */
.screen-strip {
  flex: none;
  flex-direction: row;
  height: 7cqi;
  border-width: 0.4cqi;
}
.strip-title {
  flex: none;
  display: grid; place-items: center;
  width: max(18px, 1.8cqi);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  background: var(--screen-bar);
  border-left: 1px solid var(--screen-line);
  font-family: var(--font-display);
  font-size: clamp(8.5px, 0.8cqi, 11px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--screen-muted);
}
.strip {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 0.4cqi;
  padding: 0.4cqi;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  filter: brightness(var(--screen-bright, 1));
  transition: filter 0.3s ease;
}
.strip::-webkit-scrollbar { display: none; }
.strip-tile {
  --app: var(--accent);
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 1.2;
  padding: 0;
  border: 1px solid #000;
  border-radius: 0.25cqi;
  overflow: hidden;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--app) 20%, #161922), #0d0f14);
  color: var(--screen-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.strip-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.62;
  transition: opacity 0.2s ease;
}
.strip-tile:hover img, .strip-tile.is-on img { opacity: 1; }
.strip-tile .st-no {
  position: absolute; top: 0.35cqi; left: 0.45cqi;
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.8cqi, 11px);
  color: var(--screen-text);
  text-shadow: 0 1px 2px #000;
}
.strip-tile .st-word {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(10px, 1.05cqi, 14px);
  color: var(--app);
}
.strip-tile .st-nm {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.7cqi 0.45cqi 0.35cqi;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.82));
  font-family: var(--font-display);
  font-size: clamp(9px, 0.85cqi, 12px);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.strip-tile::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 0.2cqi;
  background: var(--app);
  opacity: 0.85;
}
.strip-tile.is-on {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 1.2cqi -0.2cqi rgba(var(--accent-rgb), 0.5);
}
.strip-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hint-btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
}
.hint-btn:hover { color: var(--screen-text); }
/* The Please hint in the footer is the call to action, so it reads as one */
.hint-btn.primary {
  padding: 0.25em 0.75em 0.25em 0.3em;
  border-radius: 4px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  color: var(--accent);
  font-weight: 600;
}
.hint-btn.primary kbd { background: var(--accent); border-color: var(--accent); color: var(--ink-on-accent); }
.hint-btn.primary:hover { background: rgba(var(--accent-rgb), 0.2); color: var(--accent); }
.is-link { cursor: pointer; }
.item-media.is-link:hover img { filter: brightness(1.12); }
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0.1em 0.45em;
  border-radius: 3px;
  background: #22252e;
  border: 1px solid #343846;
  color: var(--screen-text);
  font: 600 0.92em/1.3 var(--font-body);
  text-align: center;
}

/* Boot log */
.boot {
  height: 100%;
  padding: 1.4cqi 1.6cqi;
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.15cqi, 15px);
  line-height: 1.6;
  color: var(--screen-text);
  white-space: pre-wrap;
  overflow: hidden;
}
.boot .dim { color: var(--screen-muted); }
.boot .ok { color: var(--cmd-ok); }
.boot .big { font-family: var(--font-display); font-weight: 700; font-size: 1.25em; color: var(--accent); }
.caret {
  display: inline-block; width: 0.55em; height: 1.05em;
  vertical-align: -0.15em;
  background: var(--screen-text);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Home: the pool */
.home {
  height: 100%;
  display: flex; flex-direction: column;
  padding: 1.2cqi 1.4cqi;
  gap: 1cqi;
}
.home-intro h1 {
  font-size: clamp(16px, 2.2cqi, 28px);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--accent);
}
.home-intro p { font-size: clamp(11px, 1.1cqi, 14.5px); color: var(--screen-muted); line-height: 1.4; margin-top: 0.3em; }
.pool {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 0.8cqi;
}
.pool-tile {
  --app: var(--accent);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 0.6cqi 0.8cqi 0.9cqi;
  min-height: 0;
  background: linear-gradient(to bottom, #161922, #11131a);
  border: 1px solid #2a2e3a;
  border-radius: 0.4cqi;
  color: var(--screen-text);
  font: 600 clamp(11px, 1.15cqi, 15px)/1.2 var(--font-display);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}
.pool-tile::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 0.45cqi;
  background: var(--app);
}
.pool-tile .pool-no {
  position: absolute; top: 0.4cqi; left: 0.6cqi;
  font: 500 clamp(9px, 0.85cqi, 11px) var(--font-mono);
  color: var(--screen-muted);
}
.pool-tile:hover { border-color: #444a5a; }
.pool-tile.is-sel {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 1.4cqi -0.2cqi rgba(var(--accent-rgb), 0.45);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--app) 22%, #161922), #11131a);
}
.pool-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Section item */
.item {
  height: 100%;
  display: grid;
  grid-template-columns: 1.12fr 1fr;
}
.item-media {
  position: relative;
  min-height: 0;
  background: #000;
  overflow: hidden;
}
.item-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: fade-in 0.35s ease;
}
.item-media.contain { background: #0d0f14; padding: 1cqi; }
.item-media.contain img { object-fit: contain; }
.item-media::after {
  /* a touch of scanline so the photo reads as "on a screen" */
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.item-nav {
  position: absolute; top: 50%; z-index: 2;
  transform: translateY(-50%);
  width: max(28px, 2.6cqi); height: max(40px, 4.4cqi);
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.55);
  border: 0;
  color: var(--screen-text);
  font-size: clamp(11px, 1.1cqi, 15px);
  cursor: pointer;
}
.item-nav:hover { background: rgba(0, 0, 0, 0.8); }
.item-nav.prev { left: 0; border-radius: 0 4px 4px 0; }
.item-nav.next { right: 0; border-radius: 4px 0 0 4px; }

.item-art {
  position: relative;
  display: grid; place-items: center;
  overflow: hidden;
  background:
    radial-gradient(80% 80% at 50% 40%, color-mix(in srgb, var(--app) 22%, transparent), transparent 70%),
    #0b0d12;
  animation: fade-in 0.35s ease;
}
.item-art.grid-art {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    radial-gradient(80% 80% at 50% 40%, color-mix(in srgb, var(--app) 22%, transparent), transparent 70%);
  background-size: 2.2cqi 2.2cqi, 2.2cqi 2.2cqi, auto;
  background-color: #0b0d12;
}
.art-word {
  font: 900 clamp(22px, 4.2cqi, 54px)/1 var(--font-display);
  color: var(--app);
  letter-spacing: 0.02em;
  text-align: center;
  padding: 0 1cqi;
  overflow-wrap: anywhere;
}
.art-word.small { font-size: clamp(15px, 2.1cqi, 28px); font-weight: 700; }
/* Contact: Instagram on the art side (2026-11-06), its own link. */
.ig-art { align-content: center; gap: 1.1cqi; text-decoration: none; cursor: pointer; }
.ig-art svg {
  width: clamp(48px, 7cqi, 96px); height: auto;
  fill: none; stroke: var(--app); stroke-width: 1.8;
  filter: drop-shadow(0 0 1.2cqi color-mix(in srgb, var(--app) 45%, transparent));
}
.ig-art svg .dot { fill: var(--app); stroke: none; }
.ig-art:hover svg, .ig-art:hover .art-word { filter: brightness(1.2); }
.item-email {
  display: inline-block;
  margin-top: 0.7em;
  font: 700 clamp(14px, 1.75cqi, 24px)/1.25 var(--font-display);
  color: var(--screen-text);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.item-email:hover { color: var(--app); }
.px-face {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.55cqi;
  width: 62%;
  max-width: 260px;
}
.px-face i {
  aspect-ratio: 1;
  border-radius: 50%;
  background: #1d2029;
  box-shadow: inset 0 0 0 1px #2b2f3b;
}
.px-face i.on {
  background: var(--app);
  box-shadow: 0 0 1cqi color-mix(in srgb, var(--app) 70%, transparent);
}

.item-panel {
  display: flex; flex-direction: column;
  min-height: 0;
  padding: 1.2cqi 1.4cqi;
  border-left: 1px solid var(--screen-line);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #343846 transparent;
}
.item-tag {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.5em;
  font: 500 clamp(9.5px, 0.9cqi, 12px)/1 var(--font-mono);
  color: var(--screen-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.item-tag::before {
  content: "";
  width: 0.9em; height: 0.9em; border-radius: 2px;
  background: var(--app);
}
.item-panel h2 {
  margin-top: 0.55em;
  font-size: clamp(15px, 1.9cqi, 25px);
  font-weight: 700;
  color: var(--screen-text);
}
.item-sub {
  margin-top: 0.4em;
  font-size: clamp(11px, 1.1cqi, 14.5px);
  color: var(--app);
  line-height: 1.4;
}
.item-body {
  margin-top: 0.8em;
  font-size: clamp(11px, 1.12cqi, 14.5px);
  line-height: 1.55;
  color: #c3c8d2;
}
.item-body + .item-body { margin-top: 0.6em; }
.dots { display: flex; gap: 0.45cqi; margin-top: auto; padding-top: 1cqi; }
.dots i { width: 0.7cqi; height: 0.7cqi; min-width: 6px; min-height: 6px; border-radius: 1px; background: #2c303c; }
.dots i.on { background: var(--app); }

/* Help */
.help {
  height: 100%;
  padding: 1.2cqi 1.6cqi;
  overflow-y: auto;
  font-size: clamp(11px, 1.08cqi, 14px);
  line-height: 1.5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2.4cqi;
  align-content: start;
}
.help h2 { grid-column: 1 / -1; font-size: clamp(14px, 1.6cqi, 21px); color: var(--accent); margin-bottom: 0.5em; }
.help h3 { font: 600 0.95em var(--font-body); color: var(--screen-muted); margin: 0.6em 0 0.3em; text-transform: uppercase; letter-spacing: 0.06em; }
.help dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25em 0.9em; }
.help dt { font-family: var(--font-mono); color: var(--screen-text); white-space: nowrap; }
.help dd { color: #b9bfca; }

@keyframes fade-in { from { opacity: 0; } }

/* Side screen: the cue list */
.cue-sheet {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  font-size: clamp(10.5px, 1.05cqi, 13.5px);
  filter: brightness(var(--screen-bright, 1));
  scrollbar-width: none;
}
.cue-row {
  display: grid;
  grid-template-columns: 3.2em 0.5em 1fr 2.2em;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  padding: 0.28em 0.8em;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--screen-line);
  color: var(--screen-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cue-row:hover { background: rgba(255, 255, 255, 0.03); }
.cue-row .no { font-family: var(--font-mono); color: var(--screen-muted); }
.cue-row .sw { width: 0.5em; height: 1em; border-radius: 1px; background: var(--app); }
.cue-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cue-row .ct { font-family: var(--font-mono); color: var(--screen-muted); text-align: right; }
.cue-row.is-active { background: var(--cue-active); color: var(--cue-active-text); }
.cue-row.is-active .no, .cue-row.is-active .ct { color: var(--cue-active-text); }
.cue-row.is-head { cursor: default; color: var(--screen-muted); font-size: 0.9em; background: #10131a; }
.cue-row.is-head:hover { background: #10131a; }
.side-status {
  flex: none;
  display: flex; justify-content: space-between;
  padding: 0.5em 0.8em;
  border-top: 1px solid var(--screen-line);
  font: clamp(10px, 0.95cqi, 12.5px) var(--font-mono);
  color: var(--screen-muted);
}
.side-status b { color: var(--screen-text); font-weight: 500; }
#pauseReadout { color: var(--cmd-err); }

/* ---------- Bottom strip: nameplate, command line, power ---------- */
.deck-bottom {
  display: flex; align-items: center; gap: 1.4cqi;
  padding: 0 0.4cqi;
}
.deck-bottom .cmdline { flex: 1; min-width: 0; }

.cmdline {
  display: flex; align-items: center; gap: 0.8cqi;
  height: max(30px, 3.3cqi);
  padding: 0 1cqi;
  background: var(--screen-bg);
  border: 0.3cqi solid #0c0d10;
  outline: 1px solid #2f3036;
  border-radius: 0.4cqi;
  font: clamp(11px, 1.12cqi, 14.5px) var(--font-mono);
}
.console.is-off .cmdline > * { visibility: hidden; }
.cmd-prompt { color: var(--accent); white-space: nowrap; }
.cmdline input {
  flex: 1 1 30%;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--screen-text);
  font: inherit;
  caret-color: var(--accent);
}
.cmdline input::placeholder { color: #4b5160; }
.cmd-feedback {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--screen-muted);
}
.cmd-feedback.ok { color: var(--cmd-ok); }
.cmd-feedback.err { color: var(--cmd-err); }

/* ---------- Lower deck ---------- */
.deck-lower {
  display: grid;
  grid-template-columns: 1fr 22cqi 5cqi;
  gap: 1.6cqi;
  height: 39cqi;
  padding: 1.1cqi 1.2cqi;
  background: var(--desk-well);
  border-radius: 0.6cqi;
  box-shadow: inset 0 0.25cqi 0.8cqi rgba(0, 0, 0, 0.6);
}
.deck-left { display: flex; flex-direction: column; gap: 1cqi; min-width: 0; }

/* Executors: two rows of six, the second row's last one a spare */
.exec-row {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.1cqi;
}
.exec-row + .exec-row {
  padding-top: 1cqi;
  border-top: 1px solid #1f2025;
}
.exec-empty { opacity: 0.38; pointer-events: none; }
.exec-empty .fader-knob { bottom: 0; }
.exec {
  --app: var(--accent);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.6cqi;
  min-height: 0;
  min-width: 0;
}
.exec-display {
  display: flex; flex-direction: column;
  padding: 0.3cqi 0.5cqi 0.35cqi;
  background: #08090c;
  border: 1px solid #26272d;
  border-radius: 0.25cqi;
  border-bottom: 0.3cqi solid var(--app);
  font-size: clamp(9px, 0.85cqi, 11.5px);
  line-height: 1.2;
  overflow: hidden;
}
.console.is-off .exec-display > * { visibility: hidden; }
.exec-no { font-family: var(--font-mono); color: var(--screen-muted); font-size: 0.9em; }
.exec-name { color: var(--screen-text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Faders, shared by executors and the Grand Master */
.fader {
  --v: 0;
  position: relative;
  min-height: 0;
  cursor: ns-resize;
  touch-action: none;
  transition: --v 0.7s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.fader.dragging { transition: none; }
.fader:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.fader-track {
  position: absolute;
  top: 0.8cqi; bottom: 0.8cqi; left: 50%;
  width: 0.45cqi; margin-left: -0.225cqi;
  background: #050506;
  border-radius: 1px;
  box-shadow: 0 0 0 1px #2a2b31;
  overflow: hidden;
}
.fader-fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--v) * 100%);
  background: color-mix(in srgb, var(--app, var(--led)) 70%, transparent);
}
.fader-knob {
  position: absolute;
  left: 50%;
  bottom: calc(var(--v) * (100% - 1.6cqi));
  width: 3.1cqi; height: 1.6cqi;
  margin-left: -1.55cqi;
  border-radius: 0.25cqi;
  background: linear-gradient(to bottom, #55565e, #3a3b42 45%, #2b2c32 55%, #4a4b53);
  box-shadow: 0 0.25cqi 0.5cqi rgba(0, 0, 0, 0.8);
}
.fader-knob::after {
  content: "";
  position: absolute; left: 12%; right: 12%; top: 50%;
  height: 1px; background: #d7d7dc;
}

/* Keys */
.key {
  position: relative;
  display: grid; place-items: center;
  min-width: 0;
  padding: 0 0.3cqi;
  background: linear-gradient(to bottom, var(--key-face), var(--key-face-lo));
  border: 1px solid #3a3b42;
  border-radius: 0.35cqi;
  box-shadow: 0 0.3cqi 0 var(--key-shadow), 0 0.35cqi 0.6cqi rgba(0, 0, 0, 0.5);
  color: var(--key-text);
  font: 600 clamp(9px, 0.95cqi, 12.5px)/1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.05s, box-shadow 0.05s, background 0.15s;
}
.key:hover { background: linear-gradient(to bottom, #34353c, #26272c); }
.key:active, .key.is-down {
  transform: translateY(0.25cqi);
  box-shadow: 0 0.05cqi 0 var(--key-shadow), 0 0.1cqi 0.3cqi rgba(0, 0, 0, 0.5);
}
.key:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.key.is-lit {
  color: var(--ink-on-accent);
  background: linear-gradient(to bottom, var(--led), color-mix(in srgb, var(--led) 78%, black));
  box-shadow: 0 0.3cqi 0 var(--key-shadow), 0 0 1.2cqi rgba(var(--led-rgb), 0.45);
}
.key.arrow { font-size: clamp(9px, 1cqi, 13px); }
.exec-key { height: 2.3cqi; }
.exec.is-active .exec-key {
  color: var(--ink-on-accent);
  background: linear-gradient(to bottom, var(--app), color-mix(in srgb, var(--app) 70%, black));
  box-shadow: 0 0.3cqi 0 var(--key-shadow), 0 0 1.2cqi color-mix(in srgb, var(--app) 55%, transparent);
}

/* On the desk the executor key just says Go; the name lives on its
   little display above the fader. On a phone it is the other way. */
.exec-key .k-name { display: none; }

.deck-right { display: flex; flex-direction: column; gap: 1.2cqi; min-width: 0; }
.keys {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0.8cqi;
}

/* Please: the biggest, brightest key on the desk, because it is the one
   that opens things. It breathes softly so the eye finds it. */
.key-please {
  flex: none;
  height: 9cqi;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5cqi;
  border: 1px solid rgba(var(--accent-rgb), 0.7);
  background: linear-gradient(to bottom, #3a3832, #24231f);
  color: var(--accent);
  box-shadow:
    0 0.3cqi 0 var(--key-shadow),
    0 0 1.6cqi rgba(var(--accent-rgb), 0.28),
    inset 0 0 0 1px rgba(var(--accent-rgb), 0.12);
  animation: please-breathe 2.8s ease-in-out infinite;
}
.key-please:hover { background: linear-gradient(to bottom, #46433b, #2b2924); }
.please-word { font: 900 clamp(13px, 2cqi, 26px)/1 var(--font-display); letter-spacing: 0.08em; }
.please-sub {
  font: 500 clamp(9px, 0.95cqi, 12px)/1.1 var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  color: rgba(var(--accent-rgb), 0.75);
  max-width: 95%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@keyframes please-breathe {
  50% { box-shadow: 0 0.3cqi 0 var(--key-shadow), 0 0 2.6cqi rgba(var(--accent-rgb), 0.5), inset 0 0 0 1px rgba(var(--accent-rgb), 0.25); }
}
.console.is-off .key-please { animation: none; box-shadow: 0 0.3cqi 0 var(--key-shadow); }
.console.is-off .please-sub { visibility: hidden; }

.playback {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0.8cqi;
  height: 5cqi;
}
.key-go { font-size: clamp(10px, 1.1cqi, 14px); }
.key-goplus { border-color: #4b4c54; }
.key[data-key="pause"].is-lit { color: var(--ink-on-accent); }

.deck-gm { display: flex; flex-direction: column; align-items: center; gap: 0.6cqi; min-height: 0; }
.fader-gm { flex: 1; width: 100%; --app: var(--led); }
.gm-label {
  font: 700 clamp(9px, 0.95cqi, 12px) var(--font-display);
  color: var(--desk-print);
  letter-spacing: 0.1em;
}

/* Nameplate + power */
.nameplate {
  flex: none;
  display: flex; align-items: center; gap: 0.5em;
  font: 700 clamp(10px, 1.05cqi, 13px) var(--font-display);
  letter-spacing: 0.35em;
  color: var(--desk-print);
  white-space: nowrap;
}
.nameplate span { color: var(--accent); letter-spacing: 0.2em; }
.power-key {
  flex: none;
  width: 1.5cqi; height: 1.5cqi;
  min-width: 14px; min-height: 14px;
  border-radius: 50%;
  border: 1px solid #45464e;
  background: #2a2b31;
  cursor: pointer;
  box-shadow: 0 0 0.8cqi rgba(var(--led-rgb), 0.55), inset 0 0 0 0.3cqi #1c1d22;
}
.console.is-off .power-key {
  background: #d36b5b;
  box-shadow: 0 0 1.2cqi rgba(211, 107, 91, 0.75);
  animation: hint-pulse 1.6s ease-in-out infinite;
}

/* ============================================================
   Color Picker Demo (fader 306)
   ============================================================ */

/* The desk drops to open a stage band; the swinging rig fades out and
   a row of 8 Types fades in under the truss. */
.console-wrap { transition: transform 0.8s cubic-bezier(0.3, 0.7, 0.2, 1); }
.scene.is-demo .console-wrap { transform: translateY(var(--demo-drop)); }
.tagline { transition: opacity 0.5s ease; }
.scene.is-demo .tagline { opacity: 0; }
/* The corner buttons would sit on the stage right tower, so they step
   out while the demo is open; Esc brings them back. */
.corner { transition: opacity 0.4s ease, visibility 0s linear 0s; }
.scene.is-demo .corner { opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s; }
.rig .beams, .rig > .head { transition: opacity 0.6s ease; }
.rig.is-demo .beams, .rig.is-demo > .head { opacity: 0; }

/* The demo rig: 8 Types, symmetrical. color-demo.js places every head
   at x% across the rig and y as a fraction of --band, the height of the
   stage band above the dropped desk. */
.demo-row {
  --band: 220px;
  --m: 5%;               /* one metre of rig, as a share of its width */
  position: absolute;
  top: 0; left: 4%; right: 4%;
  height: var(--band);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.rig.is-demo .demo-row {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease 0.35s, visibility 0s;
}
.d-pipe, .d-deck { position: absolute; background: #2d2e35; }
.d-mid {
  left: 20%; right: 20%;
  top: calc(0.42 * var(--band) + 1px);
  height: 6px;
  background:
    repeating-linear-gradient(60deg, transparent 0 5px, #26272d 5px 7px),
    #1e1f24;
  border-top: 1px solid #2d2e35;
  border-bottom: 1px solid #2d2e35;
}
.d-tower {
  top: calc(0.2 * var(--band));
  height: calc(0.62 * var(--band));
  width: 6px;
  margin-left: -3px;
  border-left: 1px solid #3a3b42;
  border-right: 1px solid #3a3b42;
  background: repeating-linear-gradient(-30deg, transparent 0 5px, #26272d 5px 7px), #1e1f24;
}
.d-tower.l { left: 0; }
.d-tower.r { left: 100%; }
.d-deck { left: 8%; right: 8%; top: calc(0.93 * var(--band) + 19px); height: 2px; background: #26272d; }

.d-head {
  --aim: 0deg;
  position: absolute;
  width: calc(var(--mw) * var(--m));
  margin-left: calc(var(--mw) * var(--m) / -2);
  aspect-ratio: var(--ar);
  transform-origin: 50% 0;
}
/* Hung under a truss chord; the towers turn the drawing so its base
   clamps to the tower and its lens faces on stage; the floor flips it. */
.d-head.aim-down { margin-top: 7px; }
.d-head.aim-right { --aim: 28deg; transform: translateX(3px) rotate(-90deg); }
.d-head.aim-left { --aim: -28deg; transform: translateX(-3px) rotate(90deg); }
.d-head.aim-up { margin-top: 19px; transform: scaleY(-1); }
.d-model { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.d-defs { position: absolute; }
.d-model .m-base { fill: #2b2c32; stroke: #17181c; stroke-width: 0.6; }
.d-model .m-yoke { fill: #34353c; stroke: #17181c; stroke-width: 0.6; }
.d-model .m-head { fill: #3c3d45; stroke: #17181c; stroke-width: 0.6; }
.d-model .m-hub { fill: #24252a; }
.d-model .m-line { fill: #2a2b31; }
.d-model .m-bezel { fill: #121317; }
.d-model .m-ring { fill: none; stroke: rgba(0, 0, 0, 0.45); stroke-width: 0.7; }
.d-model .lit { fill: var(--lamp); opacity: calc(0.3 + 0.7 * var(--gm)); }
.d-model .lit-hot { fill: color-mix(in srgb, var(--lamp) 45%, white); opacity: calc(0.3 + 0.7 * var(--gm)); }
.d-model .glow { fill: var(--lamp); filter: url(#d-glow); opacity: calc(0.85 * var(--gm)); }

/* The beam leaves the lens: --beam-y is where the lens sits down the
   drawing, --beam-clip narrows the top of the cone to the lens. */
.d-head .d-beam {
  position: absolute;
  left: 50%;
  top: var(--beam-y);
  width: var(--beam-w);
  height: 100svh;
  transform: translateX(-50%) rotate(var(--aim));
  transform-origin: 50% 0;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--lamp) 85%, white) 0%,
    color-mix(in srgb, var(--lamp) 50%, transparent) 20%,
    transparent 62%);
  clip-path: var(--beam-clip);
  filter: blur(var(--beam-blur, 3px));
  mix-blend-mode: screen;
  opacity: calc(var(--gm) * (0.16 + 0.5 * var(--haze)));
}
/* Khamsin (Types 1 and 5): a profile, a medium cone. */
.m-khamsin { --beam-y: 94.7%; --beam-w: 340%; --beam-clip: polygon(45% 0, 55% 0, 100% 100%, 0 100%); }
/* Cobra 2 (Types 3 and 8): a beam light, a tight near-parallel shaft. */
.m-cobra { --beam-y: 94.4%; --beam-w: 240%; --beam-clip: polygon(40.2% 0, 59.8% 0, 100% 100%, 0 100%); }
/* Zonda 9 (Types 2 and 6): a big wash face, a broad soft flood. */
.m-zonda { --beam-y: 89.7%; --beam-w: 450%; --beam-clip: polygon(41.2% 0, 58.8% 0, 100% 100%, 0 100%); --beam-blur: 7px; }
/* JDC Burst 1 (Type 4) and the Pixel Line (Type 7) cast no beam: the
   face is the look. */

/* Type 7 is a row of ACME Pixel Line IP battens, 1 m and 16 cells each,
   end to end along the top chord of the mid truss. A bar is 5% of the
   rig wide (see RIG in color-brain.js), less a hair so the joins show. */
.d-head.m-pixelline { width: 4.8%; height: 14px; margin: 0 0 0 -2.4%; aspect-ratio: auto; }
.m-pixelline i { position: absolute; left: 50%; transform: translateX(-50%); }
.m-pixelline .d-body { top: -11px; width: 100%; height: 13px; border-radius: 2px; background: #34353c; }
.m-pixelline .d-lens {
  top: -9px;
  width: calc(100% - 4px); height: 9px;
  border-radius: 1px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(6.25% - 1px), rgba(0, 0, 0, 0.6) calc(6.25% - 1px) 6.25%),
    var(--lamp);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--lamp) 60%, transparent);
  opacity: calc(0.3 + 0.7 * var(--gm));
}


/* Fader 306 */
.exec-demo .exec-display {
  position: relative;
  border-bottom: 1px solid #26272d;
  padding-bottom: 0.65cqi;
}
.exec-demo .exec-display::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 0.3cqi;
  background: var(--demo-rainbow);
}
.exec-demo .exec-name { font-size: 0.9em; letter-spacing: -0.01em; }

/* Side screen: the command log */
.cue-sheet[hidden], .demo-log[hidden] { display: none; }
.demo-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.3em 0.8em;
  font: clamp(9.5px, 0.86cqi, 12px)/1.4 var(--font-mono);
  filter: brightness(var(--screen-bright, 1));
  scrollbar-width: none;
}
.dl { padding: 0.25em 0; border-bottom: 1px solid var(--screen-line); color: var(--screen-text); }
.dl-cmd { display: block; overflow-wrap: anywhere; white-space: pre-wrap; }
.dl-note { display: block; color: var(--cmd-ok); }
.dl-macro .dl-cmd { color: var(--screen-muted); }
.dl-recall .dl-cmd { color: var(--cbd-layer); }

/* Main screen: the punt page. A 14 x 4 grid on the desk; every cell
   says where it sits with --dc / --dr (and --pc / --pr on a phone). */
.cbd {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 0.5cqi;
  padding: 0.8cqi 0.9cqi;
  animation: fade-in 0.3s ease;
}
.cbd > *, .cbd-types > * { grid-column: var(--dc); grid-row: var(--dr); min-width: 0; min-height: 0; }
/* The Type row (round 10): a wrapper only on a desktop, where it is its
   own flex row; elsewhere its buttons sit in the picker's grid. */
.cbd-types { display: contents; }
.ro-hint { color: var(--accent); font-family: var(--font-body); }
.cbd-hint { display: none; }
.cbd .gs { margin-left: 0.55cqi; }
.cb {
  --g: var(--screen-muted);
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.12em;
  padding: 0.2cqi;
  background: #0b0c10;
  border: max(1.5px, 0.17cqi) solid var(--g);
  border-radius: 0.3cqi;
  color: var(--screen-text);
  font: 600 clamp(8px, 0.78cqi, 11px)/1.1 var(--font-display);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, box-shadow 0.15s;
}
.cb b { font-size: 1.3em; font-weight: 700; }
.cb small {
  font-size: 0.8em;
  font-weight: 500;
  color: var(--screen-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cb:hover { background: color-mix(in srgb, var(--g) 16%, #0b0c10); }
.cb:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cb.on {
  background: color-mix(in srgb, var(--g) 70%, #000);
  color: #fff;
  box-shadow: 0 0 1.1cqi -0.3cqi var(--g);
}
.cb.on small { color: rgba(255, 255, 255, 0.82); }
.cb-fade { --g: var(--cbd-fade); }
.cb-fade b { font-size: 1.9em; }
.cb-mode { --g: var(--cbd-mode); }
.cb-mode b, .cb-layer b { font-size: 1.12em; letter-spacing: -0.01em; }
.cb-mode.on { background: color-mix(in srgb, var(--g) 55%, #000); }
.cb-delay { --g: var(--cbd-delay); }
.cb-sat { --g: var(--cbd-sat); }
.cb-layer { --g: var(--cbd-layer); }
.cb-layer.on { background: color-mix(in srgb, var(--g) 55%, #000); }
.cb-clear { --g: var(--cbd-clear); }
.cb-type { --g: var(--cbd-type); }
.cb svg {
  width: 58%; max-width: 30px; height: auto;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.cb-delay:not(.on) svg { color: var(--cbd-mode); }
.cb .mem {
  position: absolute; top: 0.35cqi; right: 0.35cqi;
  width: max(5px, 0.5cqi); height: max(5px, 0.5cqi);
  border-radius: 50%;
  background: var(--cbd-layer);
}
.cb-layer.on .mem { background: #fff; }
.cb-swatch {
  --g: var(--sw);
  justify-content: flex-end;
  padding-bottom: 0.3cqi;
  border-width: max(2px, 0.24cqi);
}
.cb-swatch span { font-size: 0.82em; font-weight: 500; color: var(--screen-muted); }
.cb-swatch:hover { background: color-mix(in srgb, var(--sw) 22%, #0b0c10); }
.cb-swatch.on { background: var(--sw); box-shadow: 0 0 1.4cqi -0.2cqi var(--sw); }
.cb-swatch.on span { color: #fff; text-shadow: 0 0 3px #000, 0 0 1px #000; }

.cbd-readout {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 0.3em;
  padding: 0.55cqi 0.75cqi;
  background: #0d1016;
  border: 1px solid #262a35;
  border-radius: 0.3cqi;
  font: clamp(9px, 0.82cqi, 11.5px)/1.3 var(--font-mono);
  color: var(--screen-muted);
}
.ro-top { display: flex; flex-wrap: wrap; gap: 0.3em 0.9em; }
.ro-big {
  font: 700 clamp(12px, 1.4cqi, 19px)/1.15 var(--font-display);
  color: var(--screen-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ro-mem { display: flex; gap: 0.4em; }
.ro-mem i {
  font-style: normal;
  padding: 0.05em 0.4em;
  border: 1px solid #2a2e3a;
  border-radius: 2px;
}
.ro-mem i.has { color: var(--cbd-layer); border-color: color-mix(in srgb, var(--cbd-layer) 45%, transparent); }
.ro-mem i.cur { background: #1b1f2a; color: var(--screen-text); }
.cbd-hint {
  align-self: center;
  padding: 0 0.3cqi;
  font-size: clamp(9.5px, 0.95cqi, 12.5px);
  line-height: 1.3;
  color: var(--accent);
}

.noscript {
  position: fixed; inset: auto 16px 16px;
  z-index: 10;
  padding: 16px 18px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: center;
}
.noscript a { color: var(--accent); }

/* ---------- Short or narrow windows: drop the tilt ---------- */
@media (max-height: 640px), (max-width: 980px) {
  .console { transform: none; }
}

/* ---------- Phones and small tablets: stack the desk ---------- */
@media (max-width: 760px) {
  body.console-page { height: auto; overflow: auto; }
  .scene {
    height: auto;
    min-height: 100svh;
    display: block;
    padding: 86px 16px 16px;
  }
  .tagline { top: 12px; left: 16px; right: 140px; font-size: 13px; line-height: 1.35; }
  .tagline p:not(:first-child) { display: inline; margin-right: 0.3em; }
  .tagline p:first-child { margin-bottom: 1px; }
  .corner { top: 12px; right: 16px; gap: 8px; }
  .corner-link { font-size: 13px; padding: 6px 8px; }
  .power-hint { top: 34%; font-size: 17px; width: 90%; text-align: center; }

  .console-wrap { width: 100%; perspective: none; }
  .console {
    gap: 10px;
    padding: 10px 10px 8px;
    border-radius: 14px;
  }
  .deck-screens { display: block; height: auto; }
  .screen-main { height: min(72svh, 620px); min-height: 420px; border-width: 4px; border-radius: 6px; }
  .screen-side { display: none; }
  .screen-strip { height: 84px; border-width: 4px; border-radius: 6px; }
  .strip { gap: 5px; padding: 5px; }
  .strip-title { width: 18px; font-size: 9px; }
  .strip-tile { border-radius: 3px; }
  .strip-tile .st-no { font-size: 10px; top: 4px; left: 5px; }
  .strip-tile .st-nm { font-size: 10.5px; padding: 8px 5px 4px; }
  .strip-tile::after { height: 2px; }

  .screen-bar { font-size: 11.5px; padding: 0 10px; }
  .screen-foot { font-size: 11.5px; gap: 14px; padding: 0 10px; }

  .home { padding: 14px; gap: 12px; }
  .home-intro h1 { font-size: 22px; }
  .home-intro p { font-size: 13px; }
  .pool { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .pool-tile { font-size: 12.5px; border-radius: 5px; padding: 14px 6px 10px; }
  .pool-tile::after { height: 4px; }
  .pool-tile .pool-no { font-size: 10px; top: 5px; left: 7px; }

  .item { grid-template-columns: 1fr; grid-template-rows: 42% 1fr; }
  .item-panel { border-left: 0; border-top: 1px solid var(--screen-line); padding: 12px 14px; }
  .item-panel h2 { font-size: 18px; }
  .item-sub, .item-body { font-size: 13.5px; }
  .item-tag { font-size: 10.5px; }
  .dots { gap: 5px; padding-top: 12px; }
  .art-word { font-size: 30px; }
  .px-face { gap: 6px; width: 46%; }
  .help { grid-template-columns: 1fr; padding: 14px; font-size: 13px; }
  .help h2 { font-size: 18px; }
  .boot { padding: 14px; font-size: 12.5px; }

  .cmdline {
    flex-wrap: wrap;
    height: auto;
    min-height: 38px;
    padding: 8px 10px;
    font-size: 13px;
    border-width: 3px;
    border-radius: 5px;
    gap: 2px 8px;
  }
  .cmd-feedback { display: none; }
  .cmdline.has-feedback .cmd-feedback { display: block; flex-basis: 100%; order: 3; font-size: 11.5px; }

  .deck-lower {
    display: flex; flex-direction: column;
    height: auto;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
  }
  .deck-gm, .exec-empty { display: none; }
  .deck-left { gap: 8px; }
  .exec-row { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .exec-row + .exec-row { padding-top: 8px; }
  .exec { grid-template-rows: auto; }
  .exec .fader, .exec-display { display: none; }
  .exec-key {
    height: 44px;
    font-size: 11.5px;
    letter-spacing: 0;
    text-transform: none;
    border-bottom: 3px solid var(--app);
    border-radius: 6px;
    box-shadow: 0 2px 0 var(--key-shadow);
    padding: 0 4px;
    line-height: 1.15;
    text-align: center;
  }
  .exec-key .k-go { display: none; }
  .exec-key .k-name { display: inline; }
  .keys { grid-template-rows: repeat(3, 46px); gap: 8px; }
  .playback { height: 48px; gap: 8px; }
  .key { font-size: 12px; border-radius: 6px; box-shadow: 0 2px 0 var(--key-shadow); }
  .key:active, .key.is-down { transform: translateY(2px); box-shadow: none; }
  .key.arrow { font-size: 13px; }
  .key-please { height: 64px; border-radius: 8px; }
  .please-word { font-size: 20px; }
  .please-sub { font-size: 12px; }

  .deck-bottom { flex-wrap: wrap; gap: 8px 10px; padding: 0; }
  .deck-bottom .cmdline { order: -1; flex-basis: 100%; }
  .nameplate { font-size: 11px; margin: 0 auto; padding-left: 26px; }
  .power-key { width: 16px; height: 16px; }
}

/* ---------- Color Picker Demo on a phone ---------- */
@media (max-width: 760px) {
  /* The desk scrolls on a phone, so the stage band opens above it
     instead of the desk sliding off the bottom. */
  .scene { transition: padding-top 0.7s cubic-bezier(0.3, 0.7, 0.2, 1); }
  .scene { --demo-band-phone: 230px; }
  .scene.is-demo { padding-top: var(--demo-band-phone); }
  .cb-sat small { font-size: 0.66em; }
  .scene.is-demo .console-wrap { transform: none; }
  .demo-row { left: 14px; right: 14px; }
  /* Fixtures draw half again true size on a phone so they read; the
     bars keep 1 m so they still span the mid truss. */
  .demo-row { --m: 7.5%; }
  .d-head .d-beam { height: 60svh; --beam-blur: 2px; }
  .d-head.m-zonda .d-beam { --beam-blur: 4px; }
  .d-head.aim-down { margin-top: 5px; }
  .d-head.aim-up { margin-top: 12px; }
  .d-head.aim-right { transform: translateX(2px) rotate(-90deg); }
  .d-head.aim-left { transform: translateX(-2px) rotate(90deg); }
  .m-pixelline .d-body { top: -7px; height: 8px; }
  .m-pixelline .d-lens {
    top: -6px; width: calc(100% - 2px); height: 6px;
    background:
      repeating-linear-gradient(90deg, transparent 0 calc(6.25% - 0.5px), rgba(0, 0, 0, 0.35) calc(6.25% - 0.5px) 6.25%),
      var(--lamp);
    box-shadow: 0 0 5px 1px color-mix(in srgb, var(--lamp) 60%, transparent);
  }
  .d-mid { height: 4px; }
  .d-tower { width: 4px; margin-left: -2px; }
  .d-deck { top: calc(0.93 * var(--band) + 12px); }

  .cbd {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: repeat(9, minmax(0, 1fr));
    gap: 5px;
    padding: 8px;
  }
  .cbd > *, .cbd-types > * { grid-column: var(--pc); grid-row: var(--pr); }
  .cbd-hint { display: block; }
  .ro-hint { display: none; }
  .cbd .gs { margin-left: 0; }
  .cb { font-size: 9.5px; border-width: 1.5px; border-radius: 4px; padding: 2px; }
  .cb small { font-size: 0.74em; letter-spacing: 0; }
  .cb-fade b { font-size: 1.6em; }
  .cb-swatch span { font-size: 0.78em; }
  .cb .mem { top: 3px; right: 3px; }
  .cbd-readout { flex-direction: row; align-items: center; padding: 4px 8px; border-radius: 4px; font-size: 10.5px; }
  .ro-top { flex-wrap: nowrap; gap: 0 0.6em; }
  .ro-top span:not(:first-child), .ro-mem { display: none; }
  .ro-big { flex: 1; font-size: 13.5px; text-align: right; }
  .cbd-hint { font-size: 11.5px; text-align: center; }
  .exec-demo .exec-key {
    border-bottom-color: #3a3b42;
    background: var(--demo-rainbow) bottom / 100% 3px no-repeat, linear-gradient(to bottom, var(--key-face), var(--key-face-lo));
  }
}

@media (prefers-reduced-motion: reduce) {
  .power-hint, .console.is-off .power-key, .caret, .key-please { animation: none; }
  .fader, .rig { transition: none; }
  .item-media img, .item-art { animation: none; }
  .console-wrap, .scene, .tagline, .corner, .rig .beams, .rig > .head, .demo-row, .rig.is-demo .demo-row { transition: none; }
  .cbd { animation: none; }
}

/* ============================================================
   The punt page under the Color Picker Demo (punt-demo.js)
   While the demo is open the lower deck gives way to one wide
   screen with the rest of the System Builder's punt page, and the
   desk is sized (fitDesk in color-demo.js) to sit whole under the
   stage band instead of sliding off the bottom.
   ============================================================ */
:root {
  /* The Builder's own category appearances, lifted to read on a dark
     screen like the --cbd-* set above. */
  --pb-pos: #3d73ff;
  --pb-cfx: #ff2fc0;
  --pb-mov: #00c850;
  --pb-zoom: #00c8c8;
  --pb-gobo: #ff8c00;
  --pb-prism: #dcdc00;
  --pb-frost: #9696ff;
  --pb-dform: #ffaa00;
  --pb-dpat: #00c8ff;
  --pb-axis: #c8c8c8;
  --pb-surprise: #ff00b4;
  --pb-offall: #ff2828;
}

.screen-punt[hidden] { display: none; }
.scene.is-demo .console-wrap { transform: none; }
.scene.is-demo .deck-lower { display: none; }
.scene.is-demo .deck-screens {
  height: var(--demo-screens-h, 50cqi);
  grid-template-rows: minmax(0, 1fr) var(--pb-h, 19cqi);
  row-gap: 1cqi;
}
/* Square picker buttons: fitDesk() sets --cell from the screen width. */
@media (min-width: 761px) {
  .scene.is-demo .cbd {
    grid-template-columns: repeat(14, var(--cell, minmax(0, 1fr)));
    grid-template-rows: repeat(3, var(--cell, minmax(0, 1fr))) var(--cell-type, minmax(0, 1.4fr));
    justify-content: center;
    align-content: center;
  }
  /* Types a size up from the picker: ten square units across the full
     width, All Types two of them (fitDesk() works out --cell-type). */
  .scene.is-demo .cbd-types {
    display: flex;
    justify-content: space-between;
    grid-column: 1 / -1;
    grid-row: 4;
  }
  .scene.is-demo .cbd-types .cb { flex: 0 0 var(--cell-type); font-size: clamp(9px, 0.95cqi, 13px); }
  .scene.is-demo .cbd-types .cb[data-v="0"] { flex-basis: calc(2 * var(--cell-type) + 0.5cqi); }
  .scene.is-demo .cbd-types .cb b { font-size: 1.6em; }
  .scene.is-demo .cbd-types .cb[data-v="0"] b { font-size: 1.35em; }
}
.scene.is-demo .screen-main { grid-column: 1; grid-row: 1; }
.scene.is-demo .screen-side { grid-column: 2; grid-row: 1; }
.screen-punt { grid-column: 1 / -1; grid-row: 2; }

.pb-page {
  height: 100%;
  display: grid;
  grid-template-columns: 4fr 2fr 3fr 4fr 4fr 2fr;
  gap: 1.1cqi;
  padding: 0.55cqi 0.9cqi 0.75cqi;
  filter: brightness(var(--screen-bright, 1));
  animation: fade-in 0.3s ease;
}
.pb-sec { display: flex; flex-direction: column; gap: 0.35cqi; min-width: 0; min-height: 0; }
.pb-title {
  padding-bottom: 0.25cqi;
  border-bottom: 1px solid var(--screen-line);
  font: 600 clamp(8px, 0.72cqi, 10px)/1.1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--screen-muted);
}
.pb-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 0.45cqi;
}
.pb b { font-size: 1.08em; letter-spacing: -0.01em; }
.pb small { font-size: 0.68em; }
.pb-pos { --g: var(--pb-pos); }
.pb-cfx { --g: var(--pb-cfx); }
.pb-cfxc { --g: var(--sw); }
.pb-cfxc.on { background: var(--sw); }
.pb-cfxc.on b { text-shadow: 0 0 3px #000; }
.pb-mov { --g: var(--pb-mov); }
.pb-zoom { --g: var(--pb-zoom); }
.pb-gobo { --g: var(--pb-gobo); }
.pb-prism { --g: var(--pb-prism); }
.pb-frost { --g: var(--pb-frost); }
.pb-dform { --g: var(--pb-dform); }
.pb-dpat { --g: var(--pb-dpat); }
.pb-axis { --g: var(--pb-axis); }
.pb-temp { --g: var(--cbd-layer); }
.pb-surprise { --g: var(--pb-surprise); }
.pb-surprise b { font-size: 1.3em; }
.pb-offall { --g: var(--pb-offall); background: color-mix(in srgb, var(--pb-offall) 28%, #0b0c10); }

/* The demo heads in layers (round 9; built in buildRow, color-demo.js,
   driven by punt-demo.js). The punt page's phasers only ever animate
   transform or opacity on these, so the graphics card runs them and the
   blurred beams are drawn once instead of every frame. The first build
   animated CSS variables here and fell to 11 fps with everything on.
     .d-beams  GM, and the screen blend against the stage
     .d-dim    DimmerFX (opacity)
     .d-hold   aim + pan (transform transition), pivots at the lens
     .d-mv     Movement (transform animation)
     .d-tilt   tilt + zoom (transform transition)
     .d-base / .d-cfx   the beams in the lamp colour, and the ColorFX
               copy that fades in and out over them
   The lens lives in .d-lensdim above the body drawing, with its own
   ColorFX copy and the tilt flare. */
.d-head { --cfx: #ffffff; }
.d-beams, .d-dim, .d-lensdim { position: absolute; inset: 0; pointer-events: none; }
.d-beams { opacity: var(--gm); mix-blend-mode: screen; }
.d-hold, .d-mv, .d-tilt {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 0;
  transform-origin: 50% 0;
}
.d-hold { top: var(--beam-y); transform: rotate(var(--aim)); }
.d-base, .d-cfx { position: absolute; inset: 0; }
.d-head .d-beam {
  top: 0;
  width: var(--beam-w);
  transform: translateX(-50%) rotate(var(--pr, 0deg));
  mix-blend-mode: normal;
  opacity: calc((0.16 + 0.5 * var(--haze)) * var(--tb, 1));
}
.d-cfx .d-beam {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--cfx) 85%, white) 0%,
    color-mix(in srgb, var(--cfx) 50%, transparent) 20%,
    transparent 62%);
}
.d-cfx, .d-lens-cfx { display: none; opacity: 0; }
.d-head.has-cfx .d-cfx, .d-head.has-cfx .d-lens-cfx { display: block; }
.d-head.cfx-still .d-cfx, .d-head.cfx-still .d-lens-cfx { opacity: 0.6; }

/* The lens. */
.d-model .lit { fill: var(--lamp); opacity: calc(0.3 + 0.7 * var(--gm)); }
.d-model .lit-hot { fill: color-mix(in srgb, var(--lamp) 45%, white); opacity: calc(0.3 + 0.7 * var(--gm)); }
.d-model .glow { fill: var(--lamp); opacity: calc(0.85 * var(--gm)); }
.d-lens-cfx .lit, .d-lens-cfx .glow { fill: var(--cfx); }
.d-lens-cfx .lit-hot { fill: color-mix(in srgb, var(--cfx) 45%, white); }

/* Tilt (round 8). Seen from the audience, a head tilting toward you
   shows a shorter, wider, brighter beam and you start to look into the
   lens. punt-demo.js scales .d-tilt / .d-mv, sets --tb (brightness) and
   fades and grows the flare. */
.d-flaregm { position: absolute; inset: 0; opacity: var(--gm); mix-blend-mode: screen; }
.d-flare {
  position: absolute;
  left: 50%;
  top: var(--beam-y);
  width: 170%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.35);
  background: radial-gradient(circle,
    color-mix(in srgb, var(--lamp) 25%, white) 0 9%,
    color-mix(in srgb, var(--lamp) 70%, transparent) 24%,
    transparent 64%);
  pointer-events: none;
}

/* The Pixel Line bars: the lens strip and its ColorFX copy. */
.m-pixelline .d-lensdim { left: 0; top: 0; width: 100%; height: 100%; transform: none; }
.m-pixelline .d-lens {
  --lc: var(--lamp);
  --cw: 1px;
  --cell-line: rgba(0, 0, 0, 0.6);
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(6.25% - var(--cw)), var(--cell-line) calc(6.25% - var(--cw)) 6.25%),
    var(--lc);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--lc) 60%, transparent);
  opacity: calc(0.3 + 0.7 * var(--gm));
}
.m-pixelline .d-lens-cfx { --lc: var(--cfx); opacity: 0; }

/* Prism: two more beams either side of the first. */
.d-prism { display: none; }
.d-prism.a { --pr: -9deg; }
.d-prism.b { --pr: 9deg; }
.d-head.prism .d-prism { display: block; opacity: calc((0.1 + 0.35 * var(--haze)) * var(--tb, 1)); }
/* Frost: a soft edge, which also smears the gobo. */
.d-head.frost .d-beam { --beam-blur: 11px; }
/* Gobos: masks centred on the lens, so the pattern opens with the cone. */
.d-head.g-rays .d-beam {
  -webkit-mask-image: repeating-conic-gradient(from 0deg at 50% 0, #000 0 1.4deg, rgba(0, 0, 0, 0.12) 1.4deg 3.6deg);
  mask-image: repeating-conic-gradient(from 0deg at 50% 0, #000 0 1.4deg, rgba(0, 0, 0, 0.12) 1.4deg 3.6deg);
}
.d-head.g-rings .d-beam {
  -webkit-mask-image: repeating-radial-gradient(circle at 50% 0, #000 0 16px, rgba(0, 0, 0, 0.12) 16px 30px);
  mask-image: repeating-radial-gradient(circle at 50% 0, #000 0 16px, rgba(0, 0, 0, 0.12) 16px 30px);
}
.d-head.g-dots .d-beam {
  -webkit-mask-image:
    repeating-conic-gradient(from 0deg at 50% 0, #000 0 1.6deg, transparent 1.6deg 4deg),
    repeating-radial-gradient(circle at 50% 0, #000 0 12px, transparent 12px 26px);
  -webkit-mask-composite: source-in;
  mask-image:
    repeating-conic-gradient(from 0deg at 50% 0, #000 0 1.6deg, transparent 1.6deg 4deg),
    repeating-radial-gradient(circle at 50% 0, #000 0 12px, transparent 12px 26px);
  mask-composite: intersect;
}

/* Phones: the punt page follows the picker down the page, in two
   columns of sections. */
@media (max-width: 760px) {
  .scene.is-demo .deck-screens { height: auto; }
  .screen-punt { margin-top: 8px; border-width: 4px; border-radius: 6px; }
  .pb-page { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; padding: 10px 8px; height: auto; }
  /* The four-wide sections take the full width; Position and Movement share a row. */
  .sec-dfx, .sec-cfx, .sec-beam { grid-column: 1 / -1; }
  .pb-title { font-size: 9.5px; padding-bottom: 3px; }
  .pb-grid { grid-template-rows: repeat(3, 40px); gap: 4px; }
  .pb { font-size: 9.5px; border-width: 1.5px; border-radius: 4px; padding: 1px; }
  .pb small { font-size: 0.72em; letter-spacing: 0; }
  .m-pixelline .d-lens {
    --cw: 0.5px;
    --cell-line: rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 5px 1px color-mix(in srgb, var(--lc) 60%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pb-page { animation: none; }
}

/* Square picker buttons on a phone too (round 8): the main screen grows
   to fit instead of squeezing nine rows into a fixed height. All Types
   spans two rows and the readout and hint rows size to their text. */
@media (max-width: 760px) {
  .scene.is-demo .screen-main { height: auto; min-height: 0; }
  .scene.is-demo .screen-main .screen-body { flex: none; }
  .scene.is-demo .cbd { height: auto; grid-template-rows: repeat(7, auto) auto auto; }
  .scene.is-demo .cbd > .cb, .scene.is-demo .cbd-types > .cb:not([data-v="0"]) { aspect-ratio: 1; }
}

/* Safety net (round 9): a machine that cannot hold 30 fps with the
   demo running gets plain-edged beams; color-demo.js adds .lite. */
.demo-row.lite .d-beam { filter: none; }
.demo-row.lite .d-model .glow { filter: none; }

/* Round 10: the demo's Patreon and Close buttons live in the main
   screen's top bar (console.js puts them in #screenCue), so its footer
   goes, and the side screen drops the GM readout (and the whole status
   line unless Pause has something to say). */
.scene.is-demo .screen-main .screen-foot { display: none; }
.scene.is-demo #screenCue { display: flex; align-items: center; gap: 1.2cqi; font-family: var(--font-body); }
.scene.is-demo #screenCue .hint-btn.primary { padding-block: 0.1em; }
.scene.is-demo .side-gm { display: none; }
.scene.is-demo .side-status:has(#pauseReadout:empty) { display: none; }
/* Punt page help: three columns, packed to fit the picker's height. */
.help-punt { grid-template-columns: 1fr 1fr 1fr; font-size: clamp(10px, 0.9cqi, 12.5px); line-height: 1.35; padding: 0.9cqi 1.2cqi; }
.help-punt dt { white-space: normal; }
.help-punt h2 { margin-bottom: 0.2em; }
@media (max-width: 760px) {
  .help-punt { grid-template-columns: 1fr; }
  .scene.is-demo #screenCue kbd { display: none; }
  .scene.is-demo #clock { display: none; }
}

/* Round 12: the demo's beams and lens glows are drawn on one WebGL
   canvas over the fixtures (demo-beams.js), one layer the size of the rig, instead of
   three beam-sized layers per head. It fades in and out with the demo
   row and screens over the stage the way the DOM beams did. Each beam
   head marks its lens with .d-anchor, a point plus one 100px along each
   of the head's own axes, which the canvas measures. */
.d-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.rig.is-demo .d-canvas {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease 0.35s, visibility 0s;
}
.d-anchor {
  position: absolute;
  left: 50%; top: var(--beam-y);
  width: 0; height: 0;
  pointer-events: none;
}
/* The JDC casts no beam, but its glow is on the canvas too: the centre
   of its plate. */
.m-jdc { --beam-y: 65.4%; }
.d-anchor i { position: absolute; width: 0; height: 0; }
.d-anchor i:first-child { left: 100px; top: 0; }
.d-anchor i:last-child { left: 0; top: 100px; }