/* ============================================================
   Game of Life v2 — stylesheet
   Redesign (2026-04-14): status strip + playback pill + inspector drawer
   ============================================================ */

:root {
  color-scheme: dark;
  --bg: #090b12;
  --bg-2: #121625;
  --surface: rgba(16, 20, 31, 0.56);
  --surface-strong: rgba(22, 27, 41, 0.74);
  --surface-soft: rgba(255, 255, 255, 0.042);
  --border: rgba(255, 255, 255, 0.075);
  --border-strong: rgba(255, 255, 255, 0.12);
  --text: rgba(245, 247, 255, 0.94);
  --text-dim: rgba(205, 214, 234, 0.58);
  --accent: #8d8fff;
  --accent-rgb: 141, 143, 255;
  --success: #83f4c3;
  --danger: #ff8f9b;
  --shadow: 0 14px 40px rgba(2, 4, 10, 0.22), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  --panel-blur: blur(18px);
  --panel-radius: 18px;
  --grid-line: rgba(255, 255, 255, 0.07);
  --ambient-a: rgba(141, 143, 255, 0.14);
  --font-sans: "SF Pro Display", "SF Pro Text", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", "Cascadia Code", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  background:
    radial-gradient(circle at 30% 20%, var(--ambient-a), transparent 40%),
    linear-gradient(150deg, var(--bg), var(--bg-2));
  color: var(--text);
  transition: background 260ms ease, color 240ms ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 22%);
  mix-blend-mode: screen;
  opacity: 0.5;
}

#app { position: relative; width: 100%; height: 100%; overflow: hidden; }
#life-canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(131, 244, 195, 0.45); }
  70% { box-shadow: 0 0 0 10px rgba(131, 244, 195, 0); }
  100% { box-shadow: 0 0 0 0 rgba(131, 244, 195, 0); }
}

/* ============================================================
   Status strip (top-left)
   ============================================================ */

.status-strip {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow);
  backdrop-filter: var(--panel-blur);
  -webkit-backdrop-filter: var(--panel-blur);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
  pointer-events: auto;
  z-index: 6;
}

.status-strip .dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--danger);
  flex-shrink: 0;
}

body.simulating .status-strip .dot {
  background: var(--success);
  animation: pulse 1.6s ease infinite;
}

body.rewinding .status-strip .dot {
  background: #f7c76d;
}

.status-strip .rule-name {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  min-height: 0;
  cursor: pointer;
  color: var(--text);
  transition: color 140ms ease;
}

.status-strip .rule-name:hover {
  color: rgba(var(--accent-rgb), 1);
  background: none;
  border-color: transparent;
}

.status-strip .sep {
  opacity: 0.35;
}

.status-strip .pop-token {
  cursor: help;
}

/* ============================================================
   Playback pill (bottom-center)
   ============================================================ */

.playback-pill {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow);
  backdrop-filter: var(--panel-blur);
  -webkit-backdrop-filter: var(--panel-blur);
  z-index: 6;
  transition: transform 160ms ease, background 180ms ease;
}

.playback-pill:hover {
  transform: translateX(-50%) scale(1.015);
}

.playback-pill .pill-btn {
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 160ms ease, transform 120ms ease;
}

.playback-pill .pill-btn:hover {
  background: rgba(255,255,255,0.06);
}

.playback-pill .pill-btn:active {
  transform: scale(0.97);
}

.playback-pill .pill-btn.primary {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.42);
  color: #fff;
  min-width: 64px;
}

.playback-pill .pill-btn.primary:hover {
  background: rgba(var(--accent-rgb), 0.28);
}

.playback-pill .pill-btn.ghost {
  color: var(--text-dim);
}

.playback-pill .pill-btn[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

.playback-pill .pill-divider {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.1);
  margin: 0 2px;
}

.playback-pill .speed-chip {
  font-variant-numeric: tabular-nums;
  min-width: 56px;
}

.shortcut-hint {
  position: absolute;
  bottom: 18px;
  right: 18px;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  pointer-events: none;
  z-index: 5;
  font-family: var(--font-mono);
}

.shortcut-hint kbd {
  font-family: var(--font-mono);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 10.5px;
}

/* ============================================================
   Inspector drawer (right, on-demand)
   ============================================================ */

.inspector {
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: 340px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  z-index: 12;
  transform: translateX(calc(100% + 20px));
  opacity: 0;
  pointer-events: none;
  transition:
    transform 360ms cubic-bezier(0.25, 0.85, 0.4, 1),
    opacity 260ms ease;
}

.inspector.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.inspector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 4px;
}

.inspector-header .inspector-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
}

.inspector-header .pill-btn {
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: inherit;
  cursor: pointer;
}

.inspector-header .pill-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text);
}

.inspector-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.inspector-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inspector-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  text-transform: uppercase;
}

.inspector .scene-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.inspector .scene-row button {
  min-height: 58px;
  padding: 8px 4px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text);
  font-family: inherit;
  font-size: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: background 160ms ease, transform 140ms ease;
}

.inspector .scene-row button:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}

.inspector .scene-row button svg {
  width: 16px;
  height: 16px;
  stroke: var(--text);
  stroke-width: 1.5;
  fill: none;
}

.inspector .tool-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.inspector .tool-grid button {
  min-height: 42px;
  padding: 0;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text);
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.inspector .tool-grid button:hover {
  background: rgba(255,255,255,0.08);
}

.inspector .tool-grid button svg {
  width: 18px;
  height: 18px;
  stroke: var(--text);
  stroke-width: 1.5;
  fill: none;
}

.inspector .tool-grid button.active {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.42);
}

.inspector .tool-active-label {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
}

.inspector .pattern-card {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease;
  width: 100%;
}

.inspector .pattern-card:hover {
  background: rgba(255,255,255,0.08);
}

.inspector .pattern-card canvas {
  width: 88px;
  height: 56px;
  border-radius: 10px;
  background: rgba(0,0,0,0.24);
}

.inspector .pattern-card .pattern-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.inspector .pattern-card .pattern-name {
  font-size: 14px;
  font-weight: 600;
}

.inspector .pattern-card .pattern-category {
  font-size: 11px;
  color: var(--text-dim);
}

.inspector .rule-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inspector .rule-picker .rule-select {
  width: 100%;
  border-radius: 12px;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
}

.inspector .theme-swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.inspector .theme-swatches .theme-swatch {
  position: relative;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  transition: transform 160ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.inspector .theme-swatches .theme-swatch:hover {
  transform: translateY(-1px);
}

.inspector .theme-swatches .theme-swatch.active {
  border-color: rgba(var(--accent-rgb), 0.65);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.22);
}

.inspector .theme-swatches .theme-swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.08));
  pointer-events: none;
}

.inspector .advanced-toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.inspector .advanced-toggles button {
  min-height: 36px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background 160ms ease;
}

.inspector .advanced-toggles button.active {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.42);
  color: #fff;
}

.inspector .advanced-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inspector .advanced-row .label {
  font-size: 11px;
  color: var(--text-dim);
  min-width: 60px;
}

.inspector .advanced-row input[type="color"] {
  width: 44px;
  height: 32px;
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.2);
}

.inspector .history-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.inspector .history-row button {
  min-height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background 160ms ease;
}

.inspector .history-row button:hover {
  background: rgba(255,255,255,0.08);
}

.inspector .history-row button[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

.inspector details > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 6px 0;
}

.inspector details > summary::-webkit-details-marker {
  display: none;
}

/* Pseudo-content lives on a dedicated aria-hidden child so older screen
   readers never announce the +/− glyph alongside the summary label. */
.inspector details > summary > .summary-icon::after {
  content: "+";
  opacity: 0.55;
  font-size: 14px;
}

.inspector details[open] > summary > .summary-icon::after {
  content: "−";
}

.inspector details[open] > .details-body {
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.inspector details > .details-body {
  display: none;
}

.inspector .rewind-slider {
  width: 100%;
}

/* ============================================================
   Sparkline popover (hover over Pop token)
   ============================================================ */

.sparkline-popover {
  position: absolute;
  top: 52px;
  left: 12px;
  width: 220px;
  padding: 12px;
  border-radius: 14px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: var(--panel-blur);
  -webkit-backdrop-filter: var(--panel-blur);
  z-index: 9;
  display: none;
  pointer-events: none;
}

.sparkline-popover.visible {
  display: block;
}

.sparkline-popover canvas {
  width: 100%;
  height: 56px;
  display: block;
}

.sparkline-popover .label {
  font-size: 10px;
  color: var(--text-dim);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ============================================================
   Popovers (speed, rule)
   ============================================================ */

.popover {
  position: absolute;
  padding: 8px;
  min-width: 200px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  backdrop-filter: var(--panel-blur);
  -webkit-backdrop-filter: var(--panel-blur);
  z-index: 14;
  display: none;
}

.popover.visible {
  display: grid;
  gap: 6px;
}

.popover .option {
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.popover .option:hover {
  background: rgba(255,255,255,0.07);
}

.popover .option.selected {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.32);
}

.popover .option .meta {
  color: var(--text-dim);
  font-size: 11px;
}

.popover .custom-row {
  display: grid;
  gap: 6px;
  padding: 6px 4px 2px;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 4px;
}

.popover .custom-row input {
  width: 100%;
  border-radius: 10px;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  font-size: 12px;
  font-family: inherit;
}

/* ============================================================
   Inspector backdrop (subtle full-canvas dim when drawer is open)
   ============================================================ */

.inspector-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 12, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
  z-index: 10;
}

body.inspector-open .inspector-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   Shared type + controls
   ============================================================ */

.title { font-size: 16px; font-weight: 600; letter-spacing: 0.01em; }
.subtitle { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
.label { font-size: 10px; letter-spacing: 0.04em; color: var(--text-dim); }
.modal-note { font-size: 10px; letter-spacing: 0.04em; color: var(--text-dim); }

.stack { display: grid; gap: 8px; }
.panel-row, .button-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.space-between, .modal-header { justify-content: space-between; }
.input-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shortcuts-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

button, .chip, select, input, textarea { font: inherit; }

button {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8px 11px;
  background: rgba(255,255,255,0.05);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  font-family: inherit;
  transition: transform 140ms ease, background 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

button:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.16);
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.92);
  outline-offset: 2px;
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.16);
}

button:active { transform: translateY(1px) scale(0.99); }

button.icon { width: 36px; padding: 0; }
button.ghost { background: rgba(255,255,255,0.03); }
button[disabled] { opacity: 0.5; cursor: default; transform: none; pointer-events: none; }

select, input[type="text"], input[type="range"], input[type="color"], textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.14);
  color: var(--text);
  padding: 9px 11px;
}

select {
  color-scheme: dark;
  background-color: rgba(17, 21, 31, 0.92);
}

html[style*="color-scheme: light"] select {
  color-scheme: light;
  background-color: rgba(255, 255, 255, 0.92);
  color: rgba(28, 34, 44, 0.94);
}

option, optgroup {
  background: #161b29;
  color: rgba(245, 247, 255, 0.94);
}

html[style*="color-scheme: light"] option,
html[style*="color-scheme: light"] optgroup {
  background: #ffffff;
  color: rgba(28, 34, 44, 0.94);
}

input[type="range"] { padding: 0; height: 34px; background: transparent; border: none; }
input[type="color"] { padding: 5px; min-height: 38px; }

textarea {
  min-height: 180px;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
}

kbd {
  font-family: var(--font-mono);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.08);
  border-bottom-width: 2px;
  border-radius: 8px;
  padding: 2px 6px;
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
}

/* ============================================================
   Modals (help, pattern library, import/export)
   ============================================================ */

.modal-backdrop {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(3, 6, 12, 0.54);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 20;
  padding: 24px;
}

.modal-backdrop.open { display: grid; }

.modal {
  width: min(840px, calc(100vw - 32px));
  max-height: min(84vh, 960px);
  overflow: auto;
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.42);
  padding: 20px;
  display: grid;
  gap: 18px;
  position: relative;
}

.modal.large { width: min(960px, calc(100vw - 32px)); }
.modal-grid { display: grid; gap: 16px; grid-template-columns: 1.1fr 0.9fr; }

.panel-section {
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  display: grid;
  gap: 10px;
}

.shortcut-card {
  padding: 12px;
  border-radius: 12px;
  /* Use surfaceStrong (same as parent modal) so the card reads as
     "grouped content within the modal" rather than visually recessed.
     Lighter alpha than the modal lets the canvas bleed through more,
     which reads as a pit instead of a card at the token-stack composite. */
  background: var(--surface-strong);
  border: 1px solid var(--border);
  display: grid;
  gap: 10px;
  font-size: 12px;
  color: var(--text-dim);
}

.shortcut-card div { color: var(--text); }

.pattern-preview-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

.modal .pattern-card {
  padding: 12px;
  border-radius: 12px;
  /* Matches .shortcut-card reasoning: surfaceStrong keeps cards at the
     same visual elevation as the parent modal. */
  background: var(--surface-strong);
  border: 1px solid var(--border);
  display: grid;
  gap: 10px;
  cursor: pointer;
  transition: transform 150ms ease, background 180ms ease, border-color 180ms ease;
}

.modal .pattern-card:hover {
  transform: translateY(-2px);
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.25);
}

.modal .pattern-card canvas {
  width: 100%;
  height: 78px;
  border-radius: 10px;
  background: rgba(0,0,0,0.14);
  border: 1px solid var(--border);
}

/* ============================================================
   Toast, utility
   ============================================================ */

.toast-layer {
  position: absolute;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  display: grid;
  gap: 10px;
  z-index: 24;
  pointer-events: none;
}

.toast {
  min-width: 240px;
  max-width: min(480px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(15, 18, 28, 0.88);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 18px 48px rgba(0,0,0,0.35);
  font-size: 13px;
}

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

/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 768px) {
  .status-strip {
    top: 10px;
    left: 10px;
    right: 10px;
    justify-content: center;
  }
  .playback-pill {
    bottom: 14px;
    padding: 5px;
  }
  .playback-pill .pill-btn {
    min-height: 30px;
    padding: 6px 10px;
    font-size: 12px;
  }
  .inspector {
    top: auto;
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    max-height: 74vh;
    transform: translateY(calc(100% + 20px));
    border-radius: 24px 24px 18px 18px;
  }
  .inspector.open {
    transform: translateY(0);
  }
  .inspector::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.2);
  }
  .shortcut-hint { display: none; }
  .sparkline-popover { left: 10px; right: 10px; width: auto; }
  .modal-grid, .shortcuts-grid, .input-grid { grid-template-columns: 1fr; }
  .modal-backdrop { padding: 12px; }
  .modal, .modal.large { width: 100%; max-height: 88vh; padding: 16px; }
}

/* Respect users who have opted into reduced motion: kill long transitions,
   animations, and smooth scrolling. JS-driven background particles are also
   gated on the same media query in app.js:initialize(). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Fallback for browsers without backdrop-filter support (Chrome < 76,
   Firefox < 103). The glass surfaces rely on the blur for legibility;
   without it the translucent surfaceStrong tokens would be hard to read
   over the canvas. Fall back to the theme's opaque bg-2 on the main glass
   panels so content still meets contrast requirements. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .status-strip,
  .playback-pill,
  .inspector,
  .sparkline-popover,
  .popover {
    background: var(--bg-2);
  }
  .modal-backdrop {
    /* Opaque bg (not bg-2) so the backdrop fully occludes the canvas
       behind the modal — equivalent to what the blurred variant
       achieves on modern browsers. Tracks the active theme. */
    background: var(--bg);
  }
}