/* Helix World · Darkroom Instrument
   Warm charcoal, hairlines, one signal colour. No glow, no glass, no gradients. */

:root {
  color-scheme: dark;

  /* primitives */
  --ink-950: #131110;
  --ink-900: #1a1816;
  --ink-800: #262320;
  --ink-700: #302c28;
  --ink-950: oklch(14.5% 0.006 75);
  --ink-900: oklch(17.5% 0.006 75);
  --ink-800: oklch(21.5% 0.007 75);
  --ink-700: oklch(26% 0.008 75);
  --hairline: rgb(255 255 255 / 0.10);
  --hairline-strong: rgb(255 255 255 / 0.18);
  --bone: #ece7de;
  --bone-hover: #dcd6cc;
  --bone-active: #d0cabf;
  --bone: oklch(93% 0.012 80);
  --bone-hover: oklch(88% 0.012 80);
  --bone-active: oklch(84% 0.012 80);
  --text-secondary: #aca69b;
  --text-muted: #857f76;
  --text-secondary: oklch(72% 0.012 80);
  --text-muted: oklch(58.5% 0.010 80);
  --signal: #d4573b;
  --amber: #d9a94a;
  --signal: oklch(64% 0.17 32);
  --amber: oklch(78% 0.13 78);

  /* semantic */
  --plate: rgb(19 17 16 / 0.72);
  --plate-border: rgb(255 255 255 / 0.10);
  --focus: var(--bone);

  --r-1: 2px;
  --r-2: 3px;
  --r-3: 4px;
  --r-4: 6px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-1: 160ms;
  --t-2: 200ms;
  --t-3: 260ms;

  --font-ui: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --font-sans: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --topbar-h: 72px;
  --compose-w: 360px;
  --page-x: 40px;
  --hud-inset: 16px;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--ink-950);
  color: var(--bone);
}

body {
  font: 400 13px/1.45 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "case";
  overscroll-behavior: none;
  min-height: 100dvh;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.scroll-locked { position: fixed; inset: 0; width: 100%; overflow: hidden; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
kbd { font-family: inherit; }

.tabular { font-variant-numeric: tabular-nums; }

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

:focus { outline: none; }
:focus-visible { outline: 1px solid var(--focus); outline-offset: 2px; }
textarea:focus-visible, input:focus-visible, select:focus-visible { outline: none; }

::selection { background: rgb(236 231 222 / 0.18); }

/* ---------- shell ---------- */

.app {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: var(--topbar-h);
  padding: 0 var(--page-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--hairline);
  flex: 0 0 auto;
}

/* Mark matches .space-logo: 42px wide, 24px from the left edge. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: calc(24px - var(--page-x));
  color: var(--bone);
  text-decoration: none;
  min-width: 0;
}
.wordmark-logo {
  display: block;
  width: 42px;
  height: auto;
}
.wordmark-text {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  letter-spacing: 0.005em;
  line-height: 1;
  transition: color var(--t-1) var(--ease);
}
.wordmark:hover .wordmark-text { color: var(--bone); }

.topbar-right { display: flex; align-items: center; gap: 8px; }
.icon-button.icon-github svg,
.icon-button.icon-huggingface svg { fill: currentColor; stroke: none; }

.icon-button {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--r-3);
  color: var(--text-secondary);
  transition: background-color var(--t-1) var(--ease), color var(--t-1) var(--ease);
}
.icon-button:hover { background: rgb(255 255 255 / 0.06); color: var(--bone); }
.icon-button svg, .rail-button svg, .hud-button svg, .frame-tile-upload svg, .chevron, .select-wrap svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.icon-button svg circle { fill: var(--ink-950); }

/* ---------- workspace ---------- */

.workspace {
  flex: 1 1 auto;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 28px var(--page-x) 32px;
  display: grid;
  grid-template-columns: var(--compose-w) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 40px;
  align-items: stretch;
  align-content: stretch;
  min-height: calc(100dvh - var(--topbar-h));
}

.compose-column {
  min-width: 0;
  align-self: stretch;
  display: flex;
  padding-right: 40px;
  border-right: 1px solid var(--hairline);
}

/* The panel fills the stage's height: frame grid on top, the prompt grows into
   the remaining space, and the primary action sits on the bottom edge. */
.compose {
  width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.compose-rail { display: none; }

/* blocks */

.block { padding: 22px 0; }
.block + .block { border-top: 1px solid var(--hairline); }
.block:first-child { padding-top: 0; }
.block-prompt { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.block-prompt textarea { flex: 1 1 auto; min-height: 100px; resize: none; }
.block-actions { order: 1; margin-top: auto; padding-bottom: 0; }
.queue-status {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.queue-status[data-state="free"] { color: var(--text-muted); }
.queue-status[data-state="busy"],
.queue-status[data-state="queued"] { color: var(--amber); }

.block-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.block-label { font-size: 12px; font-weight: 400; color: var(--text-secondary); }
.block-hint { font-size: 12px; color: var(--text-muted); }

/* frame strip */

.frame-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 2px;
  margin: -2px;
}

.frame-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-3);
  border: 1px solid var(--hairline);
  background: var(--ink-900);
  overflow: hidden;
  cursor: pointer;
  color: var(--text-secondary);
  transition: border-color var(--t-1) var(--ease), color var(--t-1) var(--ease);
}
.frame-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.frame-tile:hover { border-color: var(--hairline-strong); color: var(--bone); }
.frame-tile[aria-selected="true"] {
  border-color: var(--ink-950);
  outline: 1px solid var(--bone);
  outline-offset: 1px;
}
.frame-tile:focus-visible { outline: 1px solid var(--bone); outline-offset: 2px; }
.frame-tile .tile-title {
  position: absolute; inset: auto 0 0;
  padding: 7px 10px;
  font-size: 11px; line-height: 1.2;
  color: var(--bone);
  background: var(--plate);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.frame-tile.tile-fallback { display: grid; place-items: center; font-size: 11px; color: var(--text-muted); padding: 8px; text-align: center; }

.frame-tile-upload {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  border-style: dashed;
  background: transparent;
}
.frame-tile-upload svg { width: 18px; height: 18px; }
.frame-tile-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.frame-tile-upload.is-dragging { border-color: var(--bone); color: var(--bone); }
.frame-tile-upload.has-image { display: block; }
.frame-tile-upload.has-image svg, .frame-tile-upload.has-image span:not(.tile-title) { display: none; }

.frame-note { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
.frame-note .note-actions { display: flex; gap: 14px; margin-top: 6px; }
.frame-note[data-kind="error"] { color: var(--text-secondary); }
.frame-note[data-kind="error"]::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); margin-right: 8px; vertical-align: 1px; }

.text-button {
  font-size: 12px;
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color var(--t-1) var(--ease), text-decoration-color var(--t-1) var(--ease);
}
.text-button:hover { color: var(--bone); text-decoration-color: var(--hairline-strong); }
.text-button.is-primary { color: var(--bone); }

/* textarea and inputs */

textarea, .input {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  background: var(--ink-900);
  color: var(--bone);
  padding: 10px 12px;
  line-height: 1.5;
  transition: border-color var(--t-1) var(--ease);
}
textarea { min-height: 104px; resize: vertical; display: block; }
.block-details textarea { resize: vertical; }
textarea::placeholder, .input::placeholder { color: var(--text-muted); }
textarea:focus, .input:focus { border-color: var(--text-muted); }
.char-count { margin-top: 6px; text-align: right; font-size: 11px; color: var(--text-muted); }
.prompt-switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.prompt-switch-row .button-small { flex: 0 0 auto; }
.prompt-switch-status { min-height: 1.4em; font-size: 11px; line-height: 1.4; color: var(--text-muted); }
.prompt-switch-status[data-state="error"] { color: var(--signal); }

/* actions */

.button-primary {
  width: 100%;
  height: 44px;
  border-radius: var(--r-3);
  background: var(--bone);
  color: var(--ink-950);
  font-size: 14px;
  font-weight: 500;
  transition: background-color var(--t-1) var(--ease), color var(--t-1) var(--ease);
}
.button-primary:hover { background: var(--bone-hover); }
.button-primary:active { background: var(--bone-active); }
.button-primary:disabled { background: var(--ink-800); color: var(--text-muted); }

.button-ghost {
  width: 100%;
  height: 44px;
  border-radius: var(--r-3);
  border: 1px solid var(--hairline-strong);
  color: var(--bone);
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  transition: background-color var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.button-ghost:hover { background: rgb(255 255 255 / 0.05); }
.button-ghost:active { background: rgb(255 255 255 / 0.08); }
.button-ghost:disabled { color: var(--text-muted); border-color: var(--hairline); }
.button-small { width: auto; height: 36px; padding: 0 14px; font-size: 13px; font-weight: 400; }

.action-note { margin-top: 8px; font-size: 11px; color: var(--text-muted); }

.key-hints {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  margin-top: 18px;
  font-size: 11px;
  color: var(--text-muted);
}
.key-hints span { display: inline-flex; align-items: center; gap: 6px; }
kbd {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-1);
  font-size: 10px; line-height: 1;
  color: var(--text-secondary);
}
kbd + kbd { margin-left: -3px; }

/* details */

.block-details summary {
  list-style: none;
  display: flex; align-items: baseline; gap: 10px;
  cursor: pointer;
}
.block-details summary::-webkit-details-marker { display: none; }
.block-details summary .block-hint { margin-left: auto; }
.block-details summary .chevron { align-self: center; color: var(--text-muted); transition: transform var(--t-2) var(--ease); }
.block-details[open] summary .chevron { transform: rotate(180deg); }
.block-details textarea { margin-top: 12px; min-height: 120px; font-size: 13px; }
.block-details .text-button { margin-top: 8px; }

/* ---------- stage ---------- */

.stage-column {
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage {
  position: relative;
  /* The stream is 768x512. Never upscale past 1:1 CSS pixels so it stays crisp;
     leave generous breathing room above and below. */
  width: min(100%, clamp(720px, calc((100dvh - var(--topbar-h) - 220px) * 1.5), 768px));
  margin-inline: auto;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-4);
  background: var(--ink-950);
  overflow: hidden;
  outline: none;
  isolation: isolate;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.stage:focus-visible { outline: 1px solid var(--bone); outline-offset: 3px; }

.stage-poster, #helix-live-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  background: transparent;
}
.stage-poster { transition: opacity var(--t-3) var(--ease); }
#helix-live-video { opacity: 0; transition: opacity var(--t-3) var(--ease); }
.app[data-phase="live"] #helix-live-video,
.app[data-phase="degraded"] #helix-live-video,
.app[data-phase="complete"] #helix-live-video { opacity: 1; }
.app[data-phase="encoding"] .stage-poster { opacity: 0.55; }
.app[data-phase="stopping"] #helix-live-video { opacity: 0; }

.stage-scrim {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 28%;
  background: linear-gradient(to top, rgb(0 0 0 / 0.40), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-3) var(--ease);
}
.app[data-mode="play"] .stage-scrim { opacity: 1; }

.stage-empty {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 14px;
  color: var(--text-secondary);
  font-size: 13px;
  pointer-events: none;
}
.stage-empty[hidden] { display: none; }
.crosshair { position: relative; width: 16px; height: 16px; }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: rgb(236 231 222 / 0.35); }
.crosshair::before { left: 0; right: 0; top: 50%; height: 1px; }
.crosshair::after { top: 0; bottom: 0; left: 50%; width: 1px; }

.progress-line { position: absolute; top: 0; left: 0; right: 0; height: 1px; overflow: hidden; z-index: 4; }
.progress-line::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 30%;
  background: var(--bone);
  animation: slide 1.6s linear infinite;
}
@keyframes slide { to { left: 100%; } }

/* HUD */

.hud {
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-3) var(--ease);
  --inset-t: max(var(--hud-inset), calc(var(--safe-top) + 4px));
  --inset-r: max(var(--hud-inset), var(--safe-right));
  --inset-b: max(var(--hud-inset), var(--safe-bottom));
  --inset-l: max(var(--hud-inset), var(--safe-left));
}
.app[data-mode="play"] .hud { opacity: 1; }
.hud > * { pointer-events: auto; }

.plate {
  background: var(--plate);
  border: 1px solid var(--plate-border);
  border-radius: var(--r-2);
  color: var(--bone);
}

.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); flex: 0 0 auto; }

.readout {
  position: absolute; top: var(--inset-t); left: var(--inset-l);
  height: 28px; padding: 0 10px 0 9px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px;
}
.readout #session-timer { color: var(--text-secondary); }
.app[data-phase="live"] .readout .dot, .app[data-phase="degraded"] .readout .dot { background: var(--signal); }
.app[data-phase="error"] .readout .dot { background: var(--signal); }
.app[data-phase="degraded"] .readout .dot { background: var(--amber); }

.hud-tools {
  position: absolute; top: var(--inset-t); right: var(--inset-r);
  display: flex; gap: 6px;
}
.hud-button {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  transition: background-color var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.hud-button:hover { background: rgb(38 35 32 / 0.9); border-color: var(--hairline-strong); }
.hud-text { width: auto; padding: 0 12px; font-size: 12px; white-space: nowrap; }
.hud-text:hover { color: #fff; }
.hud-button[aria-pressed="true"] .icon-sound { display: none; }
.hud-button:not([aria-pressed="true"]) .icon-muted { display: none; }
.icon-exit { display: none; }
.app.is-immersive .icon-exit { display: block; }
.app.is-immersive .icon-enter { display: none; }
.mobile-only { display: none; }
html[data-device="mobile"] .mobile-only { display: grid; }

.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.bars i { width: 2px; background: rgb(236 231 222 / 0.25); border-radius: 1px; }
.bars i:nth-child(1) { height: 4px; }
.bars i:nth-child(2) { height: 6px; }
.bars i:nth-child(3) { height: 8px; }
.bars i:nth-child(4) { height: 10px; }
.bars[data-level="1"] i:nth-child(-n+1), .bars[data-level="2"] i:nth-child(-n+2),
.bars[data-level="3"] i:nth-child(-n+3), .bars[data-level="4"] i:nth-child(-n+4) { background: var(--bone); }
.bars[data-tone="warning"] i { background: rgb(217 169 74 / 0.3); }
.bars[data-tone="warning"][data-level="1"] i:nth-child(-n+1), .bars[data-tone="warning"][data-level="2"] i:nth-child(-n+2),
.bars[data-tone="warning"][data-level="3"] i:nth-child(-n+3) { background: var(--amber); }
.bars[data-tone="error"] i { background: rgb(212 87 59 / 0.35); }
.bars[data-tone="error"] i:nth-child(1) { background: var(--signal); }

/* clusters: WASD buttons for movement, eight-direction joystick for look */

.cluster {
  --stick: clamp(92px, 18vw, 104px);
  position: absolute; bottom: var(--inset-b);
  display: grid; justify-items: center; gap: 8px;
  opacity: 1;
  transition: opacity var(--t-2) var(--ease);
}
.cluster-move { left: var(--inset-l); }
.cluster-look { right: var(--inset-r); }
.hud.is-idle .cluster { opacity: 0.45; }
.cluster-label { font-size: 11px; color: var(--text-secondary); text-shadow: 0 1px 2px rgb(0 0 0 / 0.6); }

.keys {
  display: none;
  grid-template-columns: repeat(3, 30px);
  grid-template-rows: repeat(2, 30px);
  gap: 4px;
}
.cluster-move .keys { display: grid; }
.cluster-look .keys { display: none; }
.cluster-look .joystick-ring { display: block; }
.key {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 500; line-height: 1;
  color: var(--text-secondary);
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  transition: background-color 80ms linear, color 80ms linear, border-color 80ms linear;
}
/* Drawn arrows: Helvetica has no arrow glyphs, and the fallback reads thinner than W A S D. */
.key-arrow {
  width: 13px; height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: square;
  pointer-events: none;
}
.key-w { grid-column: 2; grid-row: 1; }
.key-a { grid-column: 1; grid-row: 2; }
.key-s { grid-column: 2; grid-row: 2; }
.key-d { grid-column: 3; grid-row: 2; }
.key:hover { color: var(--bone); border-color: var(--hairline-strong); }
.key.helix-key-active { background: var(--bone); color: var(--ink-950); border-color: var(--bone); }

.joystick-ring {
  position: relative;
  width: var(--stick); height: var(--stick);
  border-radius: 50%;
  border: 1px solid rgb(236 231 222 / 0.4);
  background: radial-gradient(circle, rgb(236 231 222 / 0.05), rgb(19 17 16 / 0.18) 68%, rgb(19 17 16 / 0.36));
  cursor: grab;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
}
.cluster.is-active .joystick-ring { cursor: grabbing; }
.joystick-ring .tick {
  position: absolute; left: 50%; top: 3px;
  width: 1px; height: 4px;
  margin-left: -0.5px;
  background: rgb(236 231 222 / 0.4);
  transform-origin: 50% calc(var(--stick) / 2 - 3px);
  transform: rotate(calc(var(--i) * 45deg));
  transition: background-color 80ms linear, width 80ms linear, height 80ms linear;
}
.joystick-ring .tick.is-active { width: 2px; height: 6px; margin-left: -1px; background: var(--bone); }
.joystick-hint {
  position: absolute;
  z-index: 1;
  color: rgb(236 231 222 / 0.48);
  font: 600 10px/1 var(--font-mono);
  pointer-events: none;
}
.joystick-hint.hint-n { top: 13px; left: 50%; transform: translateX(-50%); }
.joystick-hint.hint-e { right: 13px; top: 50%; transform: translateY(-50%); }
.joystick-hint.hint-s { bottom: 13px; left: 50%; transform: translateX(-50%); }
.joystick-hint.hint-w { left: 13px; top: 50%; transform: translateY(-50%); }
.joystick-thumb {
  position: absolute; left: 50%; top: 50%;
  z-index: 2;
  width: 28%; height: 28%;
  border-radius: 50%;
  background: var(--ink-700);
  border: 1px solid var(--hairline-strong);
  transform: translate(-50%, -50%);
  will-change: transform;
  transition: background-color 80ms linear;
}
.cluster.is-active .joystick-thumb { background: var(--bone); border-color: var(--bone); }
html[data-device="mobile"] .key-hints { display: none; }
html[data-device="mobile"] .cluster { opacity: 0.6; }
html[data-device="mobile"] .cluster.is-active { opacity: 1; }

.reticle {
  position: absolute; left: 50%; top: 50%;
  width: 16px; height: 16px;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity var(--t-2) var(--ease);
  pointer-events: none !important;
}
.reticle::before, .reticle::after { content: ""; position: absolute; background: rgb(236 231 222 / 0.35); }
.reticle::before { left: 0; right: 0; top: 50%; height: 1px; }
.reticle::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.app[data-phase="live"] .reticle, .app[data-phase="degraded"] .reticle { opacity: 1; }

.hud-center-bottom {
  position: absolute; left: 50%; bottom: var(--inset-b);
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: 6px;
  max-width: 60%;
  pointer-events: none !important;
}
.action-caption {
  font-size: 11px;
  color: var(--text-secondary);
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.6);
  text-transform: lowercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--t-1) var(--ease);
}
.action-caption.is-visible { opacity: 1; }
.status-bar {
  height: 28px; padding: 0 10px 0 9px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px;
  max-width: 100%;
  transition: opacity var(--t-2) var(--ease);
}
.status-bar .status-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-bar.is-hidden { opacity: 0; }
.status-bar[data-severity="warning"] .dot { background: var(--amber); }
.status-bar[data-severity="error"] .dot { background: var(--signal); }
.status-bar[data-severity="live"] .dot { background: var(--signal); }
.status-bar[data-severity="info"] .dot { background: var(--bone); }
.status-bar.has-arc .dot { display: none; }
.arc {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgb(236 231 222 / 0.25);
  border-top-color: var(--bone);
  animation: spin 900ms linear infinite;
  flex: 0 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* stats */

.stats {
  position: absolute; top: calc(var(--inset-t) + 36px); left: var(--inset-l);
  width: 268px;
  padding: 10px 12px 8px;
  font: 11px/1.55 var(--font-mono);
  color: var(--text-secondary);
}
.stats-grid { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; }
.stats-grid dt { color: var(--text-secondary); }
.stats-log { color: var(--text-secondary); }
.stats-grid dd { color: var(--bone); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats-log { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hairline); color: var(--text-muted); }
.stats-log li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats-log li:last-child { color: var(--text-secondary); }

/* stage cards */

.stage-card-layer {
  position: absolute; inset: 0;
  z-index: 6;
  display: grid; place-items: center;
  padding: 24px;
  background: rgb(19 17 16 / 0.35);
}
.stage-card-layer[hidden] { display: none; }
.card {
  width: min(420px, 100%);
  padding: 24px;
  background: var(--ink-800);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
}
.card-title { font-size: 16px; font-weight: 500; line-height: 1.3; display: flex; align-items: center; gap: 10px; }
.card[data-tone="queue"] {
  width: min(440px, 100%);
  padding: 24px;
  border-color: rgb(217 169 74 / 0.5);
  box-shadow: 0 18px 60px rgb(0 0 0 / 0.42);
}
.card[data-tone="queue"] .card-title {
  color: var(--bone);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
}
.card[data-tone="queue"] .card-title::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 5px rgb(217 169 74 / 0.12);
}
.card[data-tone="queue"] .card-body {
  margin-top: 12px;
  color: var(--bone);
  font-size: 15px;
  line-height: 1.65;
}
.card[data-tone="error"] .card-title::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex: 0 0 auto; }
.card-body { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.card-actions:empty { display: none; }

/* mobile sheet */

.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 8;
  background: var(--ink-900);
  border-top: 1px solid var(--hairline);
  padding: 8px 8px calc(8px + var(--safe-bottom));
  display: grid;
}
.sheet[hidden] { display: none; }
.sheet-item {
  height: 44px; padding: 0 12px;
  text-align: left; font-size: 14px;
  border-radius: var(--r-3);
  color: var(--bone);
}
.sheet-item:hover { background: rgb(255 255 255 / 0.05); }

/* rotation gate */

.rotation-gate {
  position: absolute; inset: 0;
  z-index: 20;
  display: none;
  place-content: center; justify-items: center; gap: 8px;
  padding: 32px;
  text-align: center;
  background: var(--ink-950);
}
.rotation-gate svg { width: 40px; height: 40px; margin-bottom: 8px; fill: none; stroke: var(--text-secondary); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rotation-gate strong { font-size: 14px; font-weight: 500; }
.rotation-gate small { max-width: 26ch; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }

/* ---------- play mode: persistent prompt dock ---------- */

/* Keep live prompt editing one click away while the world is running.  The
   setup-only controls disappear, leaving a compact prompt dock instead of the
   old 56px icon rail. */
.app[data-mode="play"]:not(.compose-open) .workspace {
  grid-template-columns: clamp(280px, 22vw, 340px) minmax(0, 1fr);
  gap: 32px;
}
.app[data-mode="play"]:not(.compose-open) .compose {
  display: flex;
  justify-content: flex-start;
}
.app[data-mode="play"]:not(.compose-open) .compose-column { padding-right: 24px; }
.app[data-mode="play"]:not(.compose-open) .compose-rail { display: none; }
.app[data-mode="play"]:not(.compose-open) .block-frame,
.app[data-mode="play"]:not(.compose-open) .block-actions,
.app[data-mode="play"]:not(.compose-open) .block-details { display: none; }
.app[data-mode="play"]:not(.compose-open) .block-prompt {
  flex: 0 0 auto;
  width: 100%;
  padding: 4px 0 0;
  border-top: 0;
}
.app[data-mode="play"]:not(.compose-open) .block-prompt textarea {
  flex: 0 0 auto;
  min-height: 132px;
  max-height: min(34vh, 280px);
  resize: vertical;
}
.app[data-mode="play"]:not(.compose-open) .prompt-switch-row {
  align-items: flex-start;
  flex-direction: column;
}
.app[data-mode="play"]:not(.compose-open) .prompt-switch-row .button-small {
  width: 100%;
}
.rail-button {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--r-3);
  color: var(--text-secondary);
  transition: background-color var(--t-1) var(--ease), color var(--t-1) var(--ease);
}
.rail-button:hover { background: rgb(255 255 255 / 0.06); color: var(--bone); }
.rail-button svg circle { fill: var(--ink-950); }
.rail-expand { margin-top: 8px; color: var(--text-muted); }
.workspace { transition: grid-template-columns var(--t-3) var(--ease), gap var(--t-3) var(--ease); }

/* ---------- drawer ---------- */

.drawer {
  position: fixed; top: var(--topbar-h); right: 0; bottom: 0;
  z-index: 30;
  width: 320px;
  padding: 24px 24px calc(24px + var(--safe-bottom));
  overflow-y: auto;
  background: var(--ink-900);
  border-left: 1px solid var(--hairline);
  transform: translateX(8px);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--t-3) var(--ease), opacity var(--t-3) var(--ease), visibility 0s linear var(--t-3);
}
.drawer.is-open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.drawer:focus-visible { outline: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.drawer-head h2 { font-size: 14px; font-weight: 500; }

.field { padding: 18px 0; }
.field + .field { border-top: 1px solid var(--hairline); }
.field .block-label { display: block; margin-bottom: 10px; }
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset legend { padding: 0; }
.field-row { display: flex; align-items: center; gap: 12px; }
.field-row .input { flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 12px; }
.field-note { margin-top: 8px; font-size: 11px; line-height: 1.5; color: var(--text-muted); }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.select-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.select-wrap select { appearance: none; -webkit-appearance: none; height: 36px; padding: 0 32px 0 12px; }
.select-wrap svg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-muted); }

.radio-list { display: grid; gap: 4px; }
.radio {
  display: grid; grid-template-columns: 14px 1fr; grid-template-rows: auto auto; column-gap: 10px;
  align-items: center;
  padding: 8px 8px 8px 6px;
  border-radius: var(--r-3);
  cursor: pointer;
  transition: background-color var(--t-1) var(--ease);
}
.radio:hover { background: rgb(255 255 255 / 0.04); }
.radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio i {
  grid-row: 1 / span 2;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  display: grid; place-items: center;
  transition: border-color var(--t-1) var(--ease);
}
.radio i::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bone); opacity: 0; transition: opacity var(--t-1) var(--ease); }
.radio input:checked + i { border-color: var(--bone); }
.radio input:checked + i::after { opacity: 1; }
.radio input:focus-visible + i { outline: 1px solid var(--bone); outline-offset: 2px; }
.radio span { font-size: 13px; color: var(--bone); }
.radio small { font-size: 11px; color: var(--text-muted); }

.switch-row { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.switch-row .block-label { margin: 0; }
.switch { position: relative; width: 30px; height: 16px; display: inline-block; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch i {
  position: absolute; inset: 0;
  border-radius: var(--r-2);
  border: 1px solid var(--hairline-strong);
  transition: background-color var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.switch i::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 10px; height: 10px; border-radius: var(--r-1);
  background: var(--text-secondary);
  transition: transform var(--t-1) var(--ease), background-color var(--t-1) var(--ease);
}
.switch input:checked + i { background: var(--bone); border-color: var(--bone); }
.switch input:checked + i::after { transform: translateX(14px); background: var(--ink-950); }
.switch input:focus-visible + i { outline: 1px solid var(--bone); outline-offset: 2px; }

/* ---------- toasts ---------- */

.toasts {
  position: fixed; top: calc(var(--topbar-h) + 12px); right: 24px;
  z-index: 40;
  width: min(300px, calc(100vw - 32px));
  display: grid; gap: 8px;
  pointer-events: none;
}
.toast {
  padding: 10px 12px 10px 14px;
  background: var(--ink-800);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--text-secondary);
  border-radius: var(--r-3);
  font-size: 13px; line-height: 1.4;
  color: var(--bone);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--t-2) var(--ease), transform var(--t-2) var(--ease);
}
.toast.is-in { opacity: 1; transform: none; }
.toast[data-severity="warning"] { border-left-color: var(--amber); }
.toast[data-severity="error"] { border-left-color: var(--signal); }

/* ---------- dialog ---------- */

.dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 28px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  background: var(--ink-800);
  color: var(--bone);
}
.dialog::backdrop { background: rgb(19 17 16 / 0.6); }
.dialog h2 { font-size: 16px; font-weight: 500; margin-bottom: 18px; }
.how-list { display: grid; gap: 14px; }
.how-list li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.how-list li > span { color: var(--text-muted); font-size: 12px; padding-top: 1px; }
.how-list strong { font-weight: 500; color: var(--bone); }
.dialog form { margin-top: 22px; display: flex; justify-content: flex-end; }
.live-prompt-dialog { width: min(520px, calc(100vw - 32px)); }
.live-prompt-dialog p { margin: 0 0 14px; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.live-prompt-dialog textarea { min-height: 124px; }
.live-prompt-dialog .prompt-switch-status { margin-top: 8px; }
.live-prompt-dialog form { gap: 8px; }

/* ---------- immersive / fullscreen ---------- */

.stage:fullscreen { width: 100vw; height: 100dvh; border: 0; border-radius: 0; background: #000; }
.stage:fullscreen #helix-live-video, .stage:fullscreen .stage-poster { object-fit: contain; }

.app.is-pseudo-fullscreen {
  position: fixed; inset: 0; z-index: 999;
  width: 100vw; height: 100dvh;
  background: #000;
}
.app.is-pseudo-fullscreen .topbar,
.app.is-pseudo-fullscreen .compose-column,
.app.is-pseudo-fullscreen .stage-empty { display: none !important; }
.app.is-pseudo-fullscreen .workspace { display: block; padding: 0; min-height: 0; height: 100%; max-width: none; }
.app.is-pseudo-fullscreen .stage-column { height: 100%; }
.app.is-pseudo-fullscreen .stage { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }

.stage.is-css-landscape {
  position: fixed !important;
  z-index: 1000;
  left: 50% !important; top: 50% !important;
  width: 100dvh !important; height: 100dvw !important;
  aspect-ratio: auto !important;
  border: 0; border-radius: 0;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center;
}

@media (orientation: portrait) {
  html[data-device="mobile"] .app[data-mode="play"]:not(.is-css-landscape) .rotation-gate { display: grid; }
  html[data-device="mobile"] .app[data-mode="play"]:not(.is-css-landscape) .cluster,
  html[data-device="mobile"] .app[data-mode="play"]:not(.is-css-landscape) .reticle { visibility: hidden; }
}

/* ---------- responsive ---------- */

@media (max-width: 1200px) {
  :root { --page-x: 28px; }
  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    align-items: start;
    align-content: start;
    gap: 24px;
    min-height: 0;
    padding-top: 24px;
  }
  .compose-column { align-self: start; padding-right: 0; border-right: 0; padding-bottom: 22px; border-bottom: 1px solid var(--hairline); }
  .compose { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 22px; align-self: start; }
  .block { padding: 0; }
  .block + .block { border-top: 0; }
  .block-frame { grid-column: 1; grid-row: 1; }
  .frame-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .block-prompt { grid-column: 2; grid-row: 1; display: block; }
  .block-prompt textarea { min-height: 88px; resize: vertical; }
  .block-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 0; order: 0; }
  .block-actions .queue-status { flex: 1 0 100%; margin: 0; }
  .block-actions .button-primary, .block-actions .button-ghost { width: 280px; flex: 0 0 auto; }
  .block-actions .action-note { margin: 0; }
  .block-actions .key-hints { margin: 0; }
  .block-details { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--hairline); }
  .stage { width: 100%; }
  .app[data-mode="play"]:not(.compose-open) .workspace { grid-template-columns: 1fr; gap: 20px; }
  .app[data-mode="play"]:not(.compose-open) .compose-column {
    padding: 0 0 16px;
    border-bottom: 1px solid var(--hairline);
  }
  .app[data-mode="play"]:not(.compose-open) .compose { display: block; }
  .app[data-mode="play"]:not(.compose-open) .block-prompt textarea {
    min-height: 84px;
    max-height: 132px;
  }
  .rail-expand { margin-top: 0; }
}

@media (max-width: 620px) {
  :root { --page-x: 16px; --topbar-h: 54px; --hud-inset: 12px; }
  .wordmark { margin-left: 0; gap: 10px; }
  .wordmark-logo { width: 32px; }
  #how-link { display: none; }
  .workspace { padding: 20px var(--page-x) calc(16px + var(--safe-bottom)); gap: 20px; }
  .compose-column { border-bottom: 0; padding-bottom: 0; }
  .compose { grid-template-columns: 1fr; row-gap: 18px; }
  .block-frame, .block-prompt { grid-column: 1; grid-row: auto; }
  .frame-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .block-prompt textarea { min-height: 80px; max-height: 120px; resize: none; }
  .key-hints { display: none; }
  .block-actions { display: block; }
  .block-actions .button-primary, .block-actions .button-ghost { width: 100%; }
  .block-actions .action-note { margin-top: 8px; }
  .stage { border-radius: var(--r-3); }
  .hud-button { width: 40px; height: 40px; }
  .cluster { --stick: clamp(92px, 22vw, 104px); }
  .app[data-mode="play"] .compose-column { display: none !important; }
  .app[data-mode="play"] .workspace { display: block; padding: 0; }
  .app[data-mode="play"] .stage { width: 100%; height: calc(100dvh - var(--topbar-h)); aspect-ratio: auto; border: 0; border-radius: 0; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .app[data-mode="play"] .topbar, .app[data-mode="play"] .compose-column { display: none !important; }
  .app[data-mode="play"] .workspace { display: block; padding: 0; min-height: 0; max-width: none; }
  .app[data-mode="play"] .stage { width: 100vw; height: 100dvh; aspect-ratio: auto; border: 0; border-radius: 0; }
  .cluster { --stick: min(25vh, 104px); }
}

@media (pointer: coarse) {
  .hud-button { min-width: 44px; min-height: 44px; }
  .hud-text { font-size: 13px; padding: 0 14px; }
  .key { width: 44px; height: 44px; }
  .keys { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); gap: 6px; }
}

@media (prefers-contrast: more) {
  :root { --plate: rgb(19 17 16 / 0.86); --plate-border: rgb(255 255 255 / 0.2); }
}

/* ---------- play mode: a lit retro computer, monitor + keyboard (desktop) ---------- */

.label-keys, .play-deck, .crt-glass, .play-bg, .play-back { display: none; }
.console, .monitor, .crt { display: contents; }

/* Top bar: back on the left, mark in the middle, actions on the right. */
.app[data-mode="play"] .topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.app[data-mode="play"] .wordmark { grid-column: 2; margin-left: 0; }
.app[data-mode="play"] .topbar-right { grid-column: 3; justify-self: end; }
.app[data-mode="play"] .play-back {
  display: grid;
  grid-column: 1;
  justify-self: start;
  margin-left: calc(24px - var(--page-x) - 8px);
}


/* Room: nebula and film grain. */
.app[data-mode="play"] { background: #000; }
.app[data-mode="play"] .play-bg {
  display: block;
  position: fixed; inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.app[data-mode="play"] .play-bg .space-noise { opacity: 0.3; }
.app.has-deck .play-bg .space-noise { opacity: 0.4; }
.app.has-deck .play-bg .space-nebula i { scale: 1.6; }
/* Fog: a pale bank of Space's nebula lying on a platform. It is brightest at
   the platform's far edge, level with the prompt row, and falls to black at
   the near edge (the bottom of the viewport). Wisps rise from the lit edge. */
.play-fog { display: none; }
.app.has-deck .play-fog {
  --edge: var(--deck-floor, 14vh);
  display: block;
  position: absolute;
  left: -10%; right: -10%; bottom: 0;
  z-index: 2;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  /* The ramp alone gives a ruler-straight lower edge; the noise band under the
     lit edge lets fog trail down unevenly. */
  --ragged: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='300' preserveAspectRatio='none'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003 0.012' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 3.4 0 0 0 -1.25'/%3E%3C/filter%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='100%25' height='100%25' fill='url(%23g)'/%3E%3C/mask%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' mask='url(%23m)'/%3E%3C/svg%3E");
  --ramp: linear-gradient(to top, transparent 0, rgb(0 0 0 / 0.12) calc(var(--edge) * 0.45), #000 calc(var(--edge) - 4px), #000 calc(var(--edge) + 30px), transparent calc(var(--edge) + 40vh));
  -webkit-mask-image: var(--ragged), var(--ramp);
  -webkit-mask-size: 100% calc(var(--edge) + 36px), 100% 100%;
  -webkit-mask-position: 0 100%, 0 0;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-over;
  mask-image: var(--ragged), var(--ramp);
  mask-size: 100% calc(var(--edge) + 36px), 100% 100%;
  mask-position: 0 100%, 0 0;
  mask-repeat: no-repeat;
  mask-composite: add;
}
.app.has-deck .play-fog::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--edge) - 12vh);
  height: 24vh;
  background: radial-gradient(ellipse 62% 50% at 50% 50%, rgb(244 244 242 / 0.7), rgb(230 230 228 / 0.18) 55%, transparent 100%);
}
/* Billowed texture, computed once. */
.app.has-deck .play-fog b {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--edge) - 16vh);
  height: 44vh;
  background: #fff;
  filter: url(#helix-fog);
  opacity: 0.7;
  -webkit-mask-image: linear-gradient(to top, transparent, #000 36%, rgb(0 0 0 / 0.5) 55%, transparent);
  mask-image: linear-gradient(to top, transparent, #000 36%, rgb(0 0 0 / 0.5) 55%, transparent);
}
.app.has-deck .play-fog i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(46px);
  will-change: transform, opacity;
}
.app.has-deck .play-fog i:nth-child(2) {
  width: 60vw; height: 16vh; left: -6%; bottom: calc(var(--edge) - 8vh);
  background: radial-gradient(ellipse at center, rgb(230 230 228 / 0.5), transparent 70%);
  animation: fog-drift 28s ease-in-out infinite alternate;
}
.app.has-deck .play-fog i:nth-child(3) {
  width: 64vw; height: 16vh; right: -8%; bottom: calc(var(--edge) - 8vh);
  background: radial-gradient(ellipse at center, rgb(225 225 223 / 0.46), transparent 70%);
  animation: fog-drift 34s ease-in-out infinite alternate-reverse;
}
.app.has-deck .play-fog i:nth-child(4) {
  width: 44vw; height: 18vh; left: 28%; bottom: calc(var(--edge) - 7vh);
  background: radial-gradient(ellipse at center, rgb(240 240 238 / 0.44), transparent 70%);
  animation: fog-drift 24s ease-in-out infinite alternate;
}
.app.has-deck .play-fog i:nth-child(5) {
  width: 36vw; height: 22vh; left: 4%; bottom: calc(var(--edge) - 4vh);
  background: radial-gradient(ellipse at center, rgb(200 200 198 / 0.26), transparent 70%);
  filter: blur(60px);
  animation: fog-drift 40s ease-in-out infinite alternate-reverse;
}
/* Rising wisps */
.app.has-deck .play-fog i:nth-child(6),
.app.has-deck .play-fog i:nth-child(7),
.app.has-deck .play-fog i:nth-child(8),
.app.has-deck .play-fog i:nth-child(9) {
  width: 18vw; height: 20vh;
  bottom: calc(var(--edge) - 6vh);
  background: radial-gradient(ellipse at center, rgb(235 235 233 / 0.34), transparent 70%);
  filter: blur(38px);
  opacity: 0;
  animation: fog-rise 18s ease-out infinite;
}
.app.has-deck .play-fog i:nth-child(6) { left: 12%; }
.app.has-deck .play-fog i:nth-child(7) { left: 38%; width: 22vw; animation-duration: 22s; animation-delay: -7s; }
.app.has-deck .play-fog i:nth-child(8) { left: 62%; animation-duration: 20s; animation-delay: -13s; }
.app.has-deck .play-fog i:nth-child(9) { left: 80%; width: 14vw; animation-duration: 16s; animation-delay: -4s; }
@keyframes fog-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(6vw, -1.5vh, 0) scale(1.08); }
}
@keyframes fog-rise {
  0% { transform: translate3d(0, 0, 0) scale(0.7); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate3d(2.5vw, -24vh, 0) scale(1.6, 1.3); opacity: 0; }
}
.app.has-deck .play-bg::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgb(0 0 0 / 0.78) 100%);
}
.app[data-mode="play"] > .topbar,
.app[data-mode="play"] > .workspace { position: relative; z-index: 1; }
.app[data-mode="play"] > .topbar { border-bottom-color: transparent; }

.app.has-deck .compose-column { display: none; }
/* Centre the screen and controls on the viewport, not on the space under the bar. */
.app.has-deck[data-mode="play"] .workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  padding-top: 0;
  padding-bottom: var(--topbar-h);
  gap: 0;
}
.app.has-deck .stage-column {
  display: grid;
  justify-content: center;
  align-content: center;
  min-height: 100%;
}
/* No case: move and look keys flank the bottom of the picture; the live prompt
   runs beneath, spanning from the outer edge of one key cluster to the other. */
.app.has-deck .console {
  display: grid;
  justify-self: center;
  width: max-content;
  max-width: 100%;
  grid-template-columns: auto auto auto;
  grid-template-areas:
    "left screen right"
    "prompt prompt prompt"
    "note note note";
  position: relative;
}
.app.has-deck .monitor {
  display: block;
  grid-area: screen;
  padding: 18px 0 28px;
}
.app.has-deck .crt { display: block; position: relative; }
/* Everything fits in the first viewport; the stream never renders above 768 px. */
.app.has-deck .stage {
  z-index: 1;
  width: clamp(440px, calc((100dvh - 2 * var(--topbar-h) - 240px) * 1.5), 768px);
  max-width: calc(100vw - 2 * var(--page-x) - 424px);
  border: 0;
  border-radius: 2px;
  background: transparent;
}
.app.has-deck .stage:focus-visible { outline: none; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Controls */
.app.has-deck .play-deck { display: contents; }
.app.has-deck .deck-slot { position: relative; z-index: 1; min-width: 0; }
.app.has-deck .deck-left,
.app.has-deck .deck-right {
  display: grid;
  align-content: end;
  justify-content: center;
  /* Bottom padding matches .monitor's, so the keys end level with the picture. */
  padding: 0 24px 28px;
}
.app.has-deck .deck-left { grid-area: left; }
.app.has-deck .deck-right { grid-area: right; }
.app.has-deck .play-deck .cluster {
  position: static;
  justify-items: center;
  opacity: 1;
  gap: 12px;
}
.app.has-deck .play-deck .cluster-look .keys { display: grid; }
.app.has-deck .play-deck .joystick-ring,
.app.has-deck .play-deck .label-ring { display: none; }
.app.has-deck .play-deck .label-keys { display: inline; }
.app.has-deck .play-deck .cluster-label { display: none; }
.app.has-deck .play-deck .keys {
  grid-template-columns: repeat(3, 40px);
  grid-template-rows: repeat(2, 38px);
  gap: 6px;
}
.app.has-deck .play-deck .cluster-label,
.app.has-deck .play-deck .deck-label {
  margin: 0;
  font: 400 10px/1 Helvetica, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8d8982;
}

/* Keys: clear faces with white hairlines; a press fills them like Space's chips. */
.app.has-deck .play-deck .key {
  width: 40px; height: 38px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.85);
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font: 500 13px/1 Helvetica, "Helvetica Neue", Arial, sans-serif;
  text-shadow: none;
  transform: none;
  transition: background 90ms, color 90ms, border-color 90ms;
}
.app.has-deck .play-deck .key .key-arrow { stroke-width: 1.3; }
.app.has-deck .play-deck .key:hover { background: rgb(255 255 255 / 0.08); }
.app.has-deck .play-deck .key:active,
.app.has-deck .play-deck .key.helix-key-active {
  background: #e9e6df;
  border-color: #e9e6df;
  color: #111;
}

/* Live prompt: a fixed three-line field. Longer text stays inside it and scrolls. */
.app.has-deck .deck-prompt {
  grid-area: prompt;
  position: relative;
  z-index: 2;
  height: 98px;
  margin: 0 24px;
  padding: 0;
}
.deck-prompt-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  min-width: 0;
  height: 98px;
  padding: 8px 8px 8px 20px;
  border-radius: 8px;
  background: #141414;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  transition: box-shadow 0.2s;
}
.deck-prompt-row:hover { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); }
.deck-prompt-row:focus-within { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4); }
.deck-prompt textarea {
  flex: 1 1 auto;
  min-width: 0;
  /* Three 22px lines plus 8px above and below. */
  height: 82px;
  min-height: 82px;
  margin: 0;
  padding: 8px 6px 8px 0;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 0.25) transparent;
  font: 15px/22px Helvetica, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.01em;
  color: #fff;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
}
.deck-prompt textarea::-webkit-scrollbar { width: 4px; }
.deck-prompt textarea::-webkit-scrollbar-thumb { border-radius: 2px; background: rgb(255 255 255 / 0.25); }
.deck-prompt textarea::placeholder { color: rgb(255 255 255 / 0.4); }
.deck-send {
  flex: 0 0 auto;
  height: 38px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: #111;
  font: 600 13px/1 Helvetica, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: background 90ms, color 90ms;
}
.deck-send:not(:disabled):hover { background: #e6e3dc; }
.deck-send:disabled {
  cursor: default;
  background: #262626;
  color: rgb(255 255 255 / 0.34);
}
/* Only status shows, just under the field; the hint lives in the placeholder. */
.deck-label {
  display: flex;
  position: absolute;
  top: calc(100% + 10px);
  left: 20px; right: 20px;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
}
.deck-label > span:first-child { display: none; }
.deck-label > span { overflow: hidden; text-overflow: ellipsis; }
.deck-prompt-status:empty { display: none; }
.deck-prompt-status[data-state="error"] { color: #e0917c; }
.deck-prompt-status[data-state="active"] { color: #fff; }

.deck-note { display: none; }
.app.has-deck .deck-note {
  display: block;
  grid-area: note;
  margin: 14px 0 0;
  padding-left: 0;
  text-align: center;
  font: 11px/1.4 Helvetica, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.01em;
  color: #f4f1ea;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.75);
}

/* HUD on the screen: smoked glass chips, neutral hover. */
.app.has-deck .hud .plate {
  background: rgb(14 13 12 / 0.55);
  border-color: rgb(255 255 255 / 0.1);
  border-radius: 6px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.app.has-deck .hud-button:hover {
  background: rgb(255 255 255 / 0.14);
  border-color: rgb(255 255 255 / 0.24);
  color: #fff;
}
.app.has-deck[data-phase="live"] .readout .dot,
.app.has-deck .status-bar[data-severity="live"] .dot {
  background: #9dffb0;
  box-shadow: 0 0 6px rgb(120 255 150 / 0.7);
}

/* Cards read as a message on the screen itself. */
.app.has-deck .stage-card-layer {
  background: rgb(6 6 5 / 0.66);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.app.has-deck .card {
  width: min(440px, 100%);
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  text-align: center;
}
.app.has-deck .card-title {
  justify-content: center;
  color: #fff;
  font: 600 22px/1.25 Helvetica, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.01em;
}
.app.has-deck .card-body {
  margin-top: 10px;
  color: #b8b2a6;
  font-size: 13px;
  line-height: 1.55;
}
.app.has-deck .card-actions {
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 22px;
}
.app.has-deck .card-actions button {
  position: relative;
  width: auto; height: auto;
  padding: 8px 14px;
  border: 0;
  border-radius: 1px;
  background: #fff;
  color: #111;
  font: 600 13px/1.2 Helvetica, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.02em;
}
.app.has-deck .card-actions button + button {
  padding: 0;
  overflow: hidden;
  background: none;
  color: #fff;
}
.app.has-deck .card-actions button + button::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}
.app.has-deck .card-actions button + button:hover::after { transform: scaleX(0); transform-origin: right center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .progress-line::before { left: 0; width: 40%; animation: none; }
  .arc { animation: none; border-top-color: var(--bone); }
}

@media (prefers-reduced-motion: reduce) {
  .app.has-deck .play-fog i { animation: none; }
  .app.has-deck .play-fog i:nth-child(n + 6) { display: none; }
}

/* Play uses the Space pixel pointer everywhere; text fields keep the caret. */
.app[data-mode="play"],
.app[data-mode="play"] * {
  cursor: url("space/pointer.svg") 1 1, default;
}
.app[data-mode="play"] :is(textarea, input[type="number"]) {
  cursor: text;
}