/* ============================================================
   CP Visualizations — shared design system (dark, glass, neon)
   ============================================================ */

:root {
  --bg-0: #070b16;
  --bg-1: #0b1122;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.085);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text-1: #eef1fb;
  --text-2: #a3aecb;
  --text-3: #6b7694;
  --indigo: #818cf8;
  --violet: #c084fc;
  --cyan: #22d3ee;
  --ok: #34d399;
  --warn: #fbbf24;
  --bad: #fb7185;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text-1);
  background: var(--bg-0);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Ambient background glow */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(99, 102, 241, 0.22), transparent 60%),
    radial-gradient(800px 500px at 85% 0%, rgba(168, 85, 247, 0.16), transparent 60%),
    radial-gradient(900px 600px at 50% 110%, rgba(34, 211, 238, 0.10), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 40%);
}

::selection { background: rgba(129, 140, 248, 0.35); }

/* ---------- typography helpers ---------- */
.grad-text {
  background: linear-gradient(90deg, var(--indigo), var(--violet) 50%, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mono { font-family: var(--mono); }

/* ---------- cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  padding: 1.75rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 1rem 0;
}

.card-title .dot {
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: linear-gradient(135deg, var(--indigo), var(--cyan));
  box-shadow: 0 0 12px rgba(129, 140, 248, 0.8);
  flex-shrink: 0;
}

/* ---------- badges / chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  white-space: nowrap;
}

.chip.easy   { color: #6ee7b7; border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.08); }
.chip.medium { color: #fcd34d; border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.08); }
.chip.hard   { color: #fda4af; border-color: rgba(251, 113, 133, 0.35); background: rgba(251, 113, 133, 0.08); }
.chip.accent { color: #c7d2fe; border-color: rgba(129, 140, 248, 0.4); background: rgba(129, 140, 248, 0.1); }

/* ---------- top bar (problem pages) ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.5rem;
  background: rgba(7, 11, 22, 0.75);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: all 0.2s;
}

.back-link:hover { color: var(--text-1); border-color: var(--border-strong); transform: translateX(-2px); }

/* ---------- inputs ---------- */
.field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: 0.4rem;
}

.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.6rem 0.9rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-1);
  font-family: var(--mono);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field textarea {
  min-height: 96px;
  resize: vertical;
}

.field input:focus, .field textarea:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.18);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.4rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  box-shadow: 0 8px 24px -8px rgba(99, 102, 241, 0.7);
  transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
}

.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.1); }
.btn-primary:active { transform: translateY(0); }

.preset-btn {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}

.preset-btn:hover { color: var(--text-1); border-color: var(--indigo); background: rgba(129, 140, 248, 0.1); }

/* ---------- visualization cells ---------- */
.viz-stage {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem;
  min-height: 120px;
}

.stage-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 0.6rem;
}

.cell-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.cell {
  position: relative;
  min-width: 52px;
  height: 52px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.7rem;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-1);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cell .idx {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-3);
}

.cell-row.has-idx { margin-bottom: 22px; }

.cell.active {
  border-color: var(--indigo);
  background: rgba(129, 140, 248, 0.18);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.25), 0 0 24px rgba(129, 140, 248, 0.35);
  transform: translateY(-6px) scale(1.06);
  z-index: 5;
}

.cell.ok {
  border-color: var(--ok);
  background: rgba(52, 211, 153, 0.16);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22), 0 0 24px rgba(52, 211, 153, 0.3);
  color: #a7f3d0;
}

.cell.warn {
  border-color: var(--warn);
  background: rgba(251, 191, 36, 0.14);
  color: #fde68a;
}

.cell.bad {
  border-color: var(--bad);
  background: rgba(251, 113, 133, 0.16);
  box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.22), 0 0 24px rgba(251, 113, 133, 0.3);
  color: #fecdd3;
  animation: shake 0.4s;
}

.cell.dim { opacity: 0.32; }

.cell.pop { animation: pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes pop-in {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* hash map / set chips */
.kv {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.8rem;
  border-radius: 0.6rem;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 0.85rem;
  transition: all 0.3s;
}

.kv .k { color: var(--text-1); font-weight: 700; }
.kv .arrow { color: var(--text-3); font-size: 0.7rem; }
.kv .v { color: var(--cyan); }

.kv.active { border-color: var(--indigo); background: rgba(129, 140, 248, 0.16); box-shadow: 0 0 16px rgba(129, 140, 248, 0.3); }
.kv.ok { border-color: var(--ok); background: rgba(52, 211, 153, 0.14); }
.kv.warn { border-color: var(--warn); background: rgba(251, 191, 36, 0.12); }
.kv.bad { border-color: var(--bad); background: rgba(251, 113, 133, 0.14); }
.kv.pop { animation: pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* status banner above the stage */
.step-msg {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: 0.8rem;
  border: 1px solid rgba(129, 140, 248, 0.3);
  background: rgba(129, 140, 248, 0.08);
  color: #c7d2fe;
  font-size: 0.9rem;
  font-weight: 500;
  min-height: 48px;
}

/* ---------- code panel ---------- */
.code-panel {
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.7;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 0.9rem 0;
  overflow: auto;
  max-height: 560px;
}

.code-line {
  display: flex;
  padding: 0 1rem 0 0;
  border-left: 3px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}

.code-line .ln {
  width: 3rem;
  flex-shrink: 0;
  text-align: right;
  padding-right: 1rem;
  color: var(--text-3);
  user-select: none;
}

.code-line pre { margin: 0; white-space: pre; color: #cdd6f4; }

.code-line.active {
  background: linear-gradient(90deg, rgba(129, 140, 248, 0.18), rgba(129, 140, 248, 0.03));
  border-left-color: var(--indigo);
}

.code-line.active pre { color: #fff; }

/* syntax accents (lightweight, applied via spans if desired) */
.tok-kw { color: #c4b5fd; }
.tok-str { color: #86efac; }
.tok-num { color: #fca5a5; }
.tok-com { color: var(--text-3); font-style: italic; }

/* ---------- playback controls ---------- */
.viz-controls { margin-top: 1.25rem; }

.ctrl-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}

.ctrl-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
}

.ctrl-btn:hover { color: var(--text-1); border-color: var(--border-strong); background: var(--surface-2); }
.ctrl-btn:active { transform: scale(0.93); }
.ctrl-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.ctrl-btn.play {
  width: 58px;
  height: 58px;
  border: none;
  color: white;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  box-shadow: 0 8px 24px -6px rgba(99, 102, 241, 0.8);
}

.ctrl-btn.play:hover { filter: brightness(1.12); }

.scrub-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.1rem;
}

.scrub-row input[type='range'] {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 6px;
  border-radius: 99px;
  background: var(--surface-2);
  outline: none;
  cursor: pointer;
}

.scrub-row input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 99px;
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  box-shadow: 0 0 10px rgba(129, 140, 248, 0.8);
  cursor: grab;
}

.frame-counter {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-3);
  min-width: 76px;
  text-align: right;
}

.speed-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface);
}

.speed-seg button {
  padding: 0.3rem 0.7rem;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.15s;
}

.speed-seg button.active { background: rgba(129, 140, 248, 0.22); color: #c7d2fe; }

.kbd-hint {
  text-align: center;
  margin-top: 0.9rem;
  font-size: 0.7rem;
  color: var(--text-3);
}

.kbd-hint kbd {
  font-family: var(--mono);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
  background: var(--surface);
  color: var(--text-2);
}

/* ---------- execution log ---------- */
.log-panel {
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.8;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  height: 230px;
  overflow-y: auto;
}

.log-panel .entry { color: var(--text-2); display: flex; gap: 0.75rem; }
.log-panel .entry .n { color: var(--text-3); min-width: 2.5rem; text-align: right; user-select: none; }
.log-panel .entry.latest { color: #c7d2fe; }
.log-panel .entry.latest .n { color: var(--indigo); }

/* ---------- prose / problem text ---------- */
.prose-dark { color: var(--text-2); font-size: 0.95rem; line-height: 1.75; }
.prose-dark p { margin: 0 0 0.9rem 0; }
.prose-dark p:last-child { margin-bottom: 0; }
.prose-dark strong { color: var(--text-1); }
.prose-dark code {
  font-family: var(--mono);
  font-size: 0.83em;
  color: #c7d2fe;
  background: rgba(129, 140, 248, 0.12);
  border: 1px solid rgba(129, 140, 248, 0.2);
  padding: 0.1em 0.4em;
  border-radius: 0.35rem;
}

.example-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  padding: 0.9rem 1.1rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.8;
  margin-top: 0.75rem;
}

.example-box .lbl { color: var(--text-3); }
.example-box .val { color: var(--text-1); }

.complexity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1rem;
}

.complexity-item {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  padding: 0.9rem 1.1rem;
}

.complexity-item .big {
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 700;
}

.complexity-item .lbl {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-top: 0.2rem;
}

/* ---------- problem page layout ---------- */
.pwrap { max-width: 1280px; margin: 0 auto; padding: 2rem 1.5rem 4.5rem; }

.phero { text-align: center; padding: 1.5rem 0 2.25rem; }
.phero h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 0.9rem;
}
.phero .chips { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
.gridmain { display: grid; grid-template-columns: 5fr 7fr; gap: 1.25rem; margin-bottom: 1.25rem; align-items: start; }
.grid2 > *, .gridmain > * { min-width: 0; }

@media (max-width: 1024px) {
  .grid2, .gridmain { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .pwrap { padding: 1.25rem .75rem 3rem; }
  .card { padding: 1.1rem; }
  .topbar { padding: .7rem .75rem; }
  .category-label { display: none; }
  .scrub-row { flex-wrap: wrap; }
  .scrub-row input[type='range'] { flex-basis: calc(100% - 90px); }
  .speed-seg { order: 3; margin: 0 auto; }
}

.section-gap { margin-bottom: 1.25rem; }

.result-banner {
  margin-top: 1rem;
  padding: 0.85rem 1.1rem;
  border-radius: 0.8rem;
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  display: none;
}
.result-banner.show { display: block; animation: pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.result-banner.ok { border: 1px solid rgba(52, 211, 153, 0.4); background: rgba(52, 211, 153, 0.1); color: #6ee7b7; }
.result-banner.bad { border: 1px solid rgba(251, 113, 133, 0.4); background: rgba(251, 113, 133, 0.1); color: #fda4af; }

/* ---------- tree visualization ---------- */
.tree-stage { display: flex; justify-content: center; }

.tree-edge { stroke: var(--border-strong); stroke-width: 2; }

.tree-node circle {
  fill: var(--surface-2);
  stroke: var(--border);
  stroke-width: 2;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tree-node text {
  fill: var(--text-1);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  transition: fill 0.2s;
}

.tree-sub {
  fill: var(--text-3);
  font-family: var(--mono);
  font-size: 9.5px;
  text-anchor: middle;
  pointer-events: none;
}

.tree-node.active circle {
  stroke: var(--indigo);
  fill: rgba(129, 140, 248, 0.28);
  filter: drop-shadow(0 0 6px rgba(129, 140, 248, 0.65));
}
.tree-node.active text { fill: #fff; }

.tree-node.ok circle { stroke: var(--ok); fill: rgba(52, 211, 153, 0.22); }
.tree-node.ok text { fill: #a7f3d0; }

.tree-node.warn circle { stroke: var(--warn); fill: rgba(251, 191, 36, 0.2); }
.tree-node.warn text { fill: #fde68a; }

.tree-node.bad circle {
  stroke: var(--bad);
  fill: rgba(251, 113, 133, 0.24);
  filter: drop-shadow(0 0 6px rgba(251, 113, 133, 0.6));
}
.tree-node.bad text { fill: #fecdd3; }

.tree-node.dim { opacity: 0.32; }

.tree-node.is-end circle {
  stroke-width: 3;
  stroke-dasharray: 2.5 2.5;
}

/* ---------- graph / matrix visualization ---------- */
.matrix-grid {
  display: grid;
  gap: 7px;
  justify-content: center;
  align-items: center;
}

.matrix-cell {
  width: 44px;
  height: 44px;
  border-radius: 0.65rem;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-2);
  transition: all 0.22s;
}

.tile-svg {
  width: 31px;
  height: 31px;
  display: block;
}

.matrix-cell.land { color: #a7f3d0; background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.25); }
.matrix-cell.water { color: #93c5fd; background: rgba(59, 130, 246, 0.10); border-color: rgba(59, 130, 246, 0.18); }
.matrix-cell.active { color: #fff; border-color: var(--indigo); background: rgba(129, 140, 248, 0.26); box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.22), 0 0 24px rgba(129, 140, 248, 0.3); transform: scale(1.08); }
.matrix-cell.ok { color: #6ee7b7; border-color: var(--ok); background: rgba(52, 211, 153, 0.22); }
.matrix-cell.warn { color: #fde68a; border-color: var(--warn); background: rgba(251, 191, 36, 0.18); }
.matrix-cell.bad { color: #fecdd3; border-color: var(--bad); background: rgba(251, 113, 133, 0.18); }
.matrix-cell.dim { opacity: 0.35; }

.state-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.state-tile {
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.24);
  border-radius: 0.8rem;
  padding: 0.85rem 0.9rem;
}

.state-tile .k {
  color: var(--text-3);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.state-tile .v {
  margin-top: 0.3rem;
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-1);
}

.graph-stage { display: flex; justify-content: center; overflow-x: auto; padding-bottom: 0.3rem; }
.graph-svg { width: 100%; min-width: 360px; max-height: 360px; }
.graph-edge { stroke: var(--border-strong); stroke-width: 2.2; }
.graph-edge.active { stroke: var(--indigo); stroke-width: 3; filter: drop-shadow(0 0 5px rgba(129, 140, 248, 0.55)); }
.graph-node circle { fill: var(--surface-2); stroke: var(--border); stroke-width: 2; transition: all 0.2s; }
.graph-node text { fill: var(--text-1); font-family: var(--mono); font-size: 13px; font-weight: 800; text-anchor: middle; dominant-baseline: central; }
.graph-node.active circle { fill: rgba(129, 140, 248, 0.28); stroke: var(--indigo); filter: drop-shadow(0 0 7px rgba(129, 140, 248, 0.7)); }
.graph-node.ok circle { fill: rgba(52, 211, 153, 0.22); stroke: var(--ok); }
.graph-node.warn circle { fill: rgba(251, 191, 36, 0.18); stroke: var(--warn); }
.graph-node.dim { opacity: 0.34; }

/* ---------- linked-list visualization ---------- */
.ll-svg { width: 100%; min-width: 360px; max-height: 230px; display: block; overflow: visible; }
.ll-arrow { stroke: var(--border-strong); stroke-width: 2.4; fill: none; }
.ll-head { fill: var(--border-strong); }
.ll-random { stroke: var(--warn); stroke-width: 2; fill: none; stroke-dasharray: 5 5; opacity: .88; }
.ll-node circle {
  fill: var(--surface-2);
  stroke: var(--border);
  stroke-width: 2;
  transition: all .25s;
}
.ll-node text {
  fill: var(--text-1);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
}
.ll-node.active circle { stroke: var(--indigo); fill: rgba(129, 140, 248, .28); filter: drop-shadow(0 0 7px rgba(129, 140, 248, .65)); }
.ll-node.ok circle { stroke: var(--ok); fill: rgba(52, 211, 153, .22); }
.ll-node.warn circle { stroke: var(--warn); fill: rgba(251, 191, 36, .18); }
.ll-node.bad circle { stroke: var(--bad); fill: rgba(251, 113, 133, .22); filter: drop-shadow(0 0 6px rgba(251, 113, 133, .55)); }

/* ---------- sliding-window / stack SVG visualization ---------- */
.sw-svg, .stack-svg { width: 100%; min-width: 340px; max-height: 210px; display: block; overflow: visible; }
.sw-window {
  fill: rgba(52, 211, 153, .09);
  stroke: rgba(52, 211, 153, .42);
  stroke-width: 2;
  filter: drop-shadow(0 0 10px rgba(52, 211, 153, .16));
}
.sw-window.bad { fill: rgba(251, 191, 36, .09); stroke: rgba(251, 191, 36, .45); }
.sw-cell rect, .stack-cell rect {
  fill: var(--surface-2);
  stroke: var(--border);
  stroke-width: 2;
  transition: all .22s;
}
.sw-cell text, .stack-cell text {
  fill: var(--text-1);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
}
.sw-cell.active rect, .stack-cell.active rect { stroke: var(--indigo); fill: rgba(129, 140, 248, .28); filter: drop-shadow(0 0 7px rgba(129, 140, 248, .62)); }
.sw-cell.ok rect, .stack-cell.ok rect { stroke: var(--ok); fill: rgba(52, 211, 153, .2); }
.sw-cell.warn rect, .stack-cell.warn rect { stroke: var(--warn); fill: rgba(251, 191, 36, .18); }
.stack-cell.bad rect { stroke: var(--bad); fill: rgba(251, 113, 133, .2); }
.stack-brace { stroke: var(--warn); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 5 5; }

/* ---------- binary-search visualization ---------- */
.bs-svg { width: 100%; min-width: 340px; max-height: 220px; display: block; overflow: visible; }
.bs-range {
  fill: rgba(59, 130, 246, .08);
  stroke: rgba(96, 165, 250, .44);
  stroke-width: 2;
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, .14));
}
.bs-range.bad { fill: rgba(251, 113, 133, .08); stroke: rgba(251, 113, 133, .42); }
.bs-cell rect {
  fill: var(--surface-2);
  stroke: var(--border);
  stroke-width: 2;
  transition: all .22s;
}
.bs-cell text {
  fill: var(--text-1);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
}
.bs-cell.active rect { stroke: var(--indigo); fill: rgba(129, 140, 248, .28); filter: drop-shadow(0 0 7px rgba(129, 140, 248, .62)); }
.bs-cell.ok rect { stroke: var(--ok); fill: rgba(52, 211, 153, .22); }
.bs-cell.dim { opacity: .34; }

/* ---------- greedy storytelling SVGs ---------- */
.greedy-svg { width: 100%; min-width: 360px; max-height: 300px; display: block; overflow: visible; }
.greedy-tile rect { fill: rgba(255,255,255,.07); stroke: var(--border); stroke-width: 2; transition: all .22s; }
.greedy-tile text { fill: var(--text-1); font: 800 13px var(--mono); text-anchor: middle; dominant-baseline: central; }
.greedy-tile text.sub { fill: var(--text-3); font-size: 9px; }
.greedy-tile.active rect { fill: rgba(129,140,248,.26); stroke: var(--indigo); filter: drop-shadow(0 0 8px rgba(129,140,248,.55)); }
.greedy-tile.current rect { stroke: var(--warn); }
.greedy-tile.ok rect { fill: rgba(52,211,153,.17); stroke: var(--ok); }
.greedy-tile.dim { opacity: .28; }
.greedy-reach { fill: rgba(34,211,238,.06); stroke: rgba(34,211,238,.42); stroke-width: 2; stroke-dasharray: 7 5; }
.greedy-arrow { fill: none; stroke: var(--warn); stroke-width: 2.4; }
.greedy-arrow.jump { filter: drop-shadow(0 0 5px rgba(251,191,36,.5)); }
.gas-svg { max-height: 330px; }
.greedy-road { fill: none; stroke: rgba(148,163,184,.26); stroke-width: 23; stroke-dasharray: 8 8; }
.gas-stop circle { fill: #101827; stroke: var(--border-strong); stroke-width: 2; }
.gas-stop .pump { fill: none; stroke: var(--cyan); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gas-stop text { fill: var(--text-2); font: 700 10px var(--mono); text-anchor: middle; }
.gas-stop text.idx { fill: var(--text-3); }
.gas-stop.active circle { stroke: var(--warn); fill: rgba(251,191,36,.14); filter: drop-shadow(0 0 9px rgba(251,191,36,.5)); }
.gas-stop.dim { opacity: .38; }
.gas-car path { fill: var(--warn); stroke: #fff3; stroke-width: 1; }
.gas-car circle { fill: #111827; stroke: var(--text-2); }
.greedy-center-label, .greedy-center-value { text-anchor: middle; font-family: var(--mono); }
.greedy-center-label { fill: var(--text-3); font-size: 11px; text-transform: uppercase; }
.greedy-center-value { fill: var(--text-1); font-size: 22px; font-weight: 900; }
.playing-card rect { fill: #eef1fb; stroke: #bac2d6; stroke-width: 2; }
.playing-card text { fill: #111827; font: 900 17px var(--mono); text-anchor: middle; }
.playing-card text.suit { fill: #e11d48; font-size: 15px; }
.playing-card.active { filter: drop-shadow(0 0 9px rgba(251,191,36,.7)); transform-box: fill-box; transform-origin: center; }
.playing-card.active rect { stroke: var(--warn); stroke-width: 4; }
.playing-card.ok rect { stroke: var(--ok); fill: #d1fae5; }
.playing-card.bad rect { stroke: var(--bad); fill: #ffe4e6; }
.card-bracket { fill: none; stroke: var(--ok); stroke-width: 2; }
.card-group-label { fill: #6ee7b7; font: 700 9px var(--mono); text-anchor: middle; }
.triplet rect { fill: rgba(255,255,255,.055); stroke: var(--border); stroke-width: 2; }
.triplet.active > rect { stroke: var(--indigo); filter: drop-shadow(0 0 7px rgba(129,140,248,.55)); }
.triplet.ok > rect { stroke: var(--ok); }
.triplet.bad { opacity: .32; }
.triplet text { fill: var(--text-2); font: 700 9px var(--mono); }
.trip-bar { stroke: none !important; }
.trip-bar.b0 { fill: #22d3ee; }.trip-bar.b1 { fill: #c084fc; }.trip-bar.b2 { fill: #fbbf24; }
.target-label { fill: var(--text-2); font: 700 12px var(--mono); text-anchor: middle; }
.partition-wall { stroke: var(--warn); stroke-width: 2; stroke-dasharray: 4 4; }
.boundary-label { fill: var(--warn); font: 700 8px var(--mono); }
.partition-bracket { fill: none; stroke: var(--ok); stroke-width: 2; }
.partition-size { fill: #6ee7b7; font: 800 10px var(--mono); text-anchor: middle; }
.balance-zero { stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 5 5; }
.balance-band { fill: rgba(52,211,153,.035); }
.balance-line { fill: none; stroke-width: 3; stroke-linejoin: round; }
.balance-line.high { stroke: var(--violet); }.balance-line.low { stroke: var(--cyan); }
.balance-char circle { fill: rgba(255,255,255,.06); stroke: var(--border); stroke-width: 2; }
.balance-char text { fill: var(--text-1); font: 900 13px var(--mono); text-anchor: middle; dominant-baseline: central; }
.balance-char.active circle { stroke: var(--warn); fill: rgba(251,191,36,.17); filter: drop-shadow(0 0 7px rgba(251,191,36,.5)); }
.balance-char.ok circle { stroke: var(--ok); }
.balance-legend, .balance-zero-label { fill: var(--text-3); font: 700 10px var(--mono); }
.run-row { display:flex; align-items:center; gap:.5rem; margin-top:.8rem; flex-wrap:wrap; }
.examples-label { color:var(--text-3); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
#preset-row { display:flex; gap:.45rem; flex-wrap:wrap; }
.greedy-stage { margin-top:1rem; overflow-x:auto; }
.greedy-stage #stage-main { min-height:150px; display:grid; place-items:center; }
.greedy-stage .solution-chip.active { box-shadow: 0 0 14px rgba(52,211,153,.2); }
.greedy-inputs { margin-bottom:0; }
.category-label { color:var(--text-3); font-size:.85rem; }
.problem-meta { margin-left:auto; display:flex; gap:.5rem; }
.explanation-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; gap:1rem; }
.explanation-head .card-title { margin:0; }

/* ---------- dynamic-programming state stories ---------- */
.dp-stage { margin-top: 1rem; overflow-x: auto; }
.dp-stage #stage-main { min-height: 165px; display: grid; place-items: center; padding: .35rem 0 .8rem; }
.dp-timeline { display: flex; align-items: flex-end; justify-content: center; gap: 7px; min-width: max-content; padding: 22px 8px 8px; }
.dp-column { width: 50px; display: grid; gap: 6px; justify-items: center; transition: transform .22s, opacity .22s; }
.dp-value {
  width: 48px; height: 48px; display: grid; place-items: center; padding: 4px;
  border-radius: 8px; border: 2px solid var(--border); background: rgba(255,255,255,.055);
  color: var(--text-1); font: 800 12px var(--mono); overflow: hidden;
}
.dp-index { max-width: 50px; overflow: hidden; text-overflow: ellipsis; color: var(--text-3); font: 700 9px var(--mono); white-space: nowrap; }
.dp-column.active { transform: translateY(-7px); }
.dp-column.active .dp-value { border-color: var(--indigo); background: rgba(129,140,248,.25); box-shadow: 0 0 18px rgba(129,140,248,.32); }
.dp-column.dep .dp-value { border-color: var(--warn); background: rgba(251,191,36,.13); }
.dp-column.ok .dp-value { border-color: var(--ok); background: rgba(52,211,153,.14); }
.dp-column.dim { opacity: .28; }
.dp-matrix {
  --cols: 1;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(38px, 54px));
  gap: 5px; justify-content: center; min-width: max-content; padding: 12px;
}
.dp-cell {
  min-width: 38px; height: 44px; border-radius: 7px; border: 1px solid var(--border);
  background: rgba(255,255,255,.05); display: grid; place-items: center; align-content: center;
  color: var(--text-1); font: 800 11px var(--mono); transition: all .2s;
}
.dp-cell small { color: var(--text-3); font-size: 7px; line-height: 1; }
.dp-cell.active { border: 2px solid var(--indigo); background: rgba(129,140,248,.25); box-shadow: 0 0 16px rgba(129,140,248,.3); transform: scale(1.06); z-index: 2; }
.dp-cell.dep { border-color: var(--warn); background: rgba(251,191,36,.13); color: #fde68a; }
.dp-cell.ok { border-color: rgba(52,211,153,.5); background: rgba(52,211,153,.1); }
.dp-cell.dim { opacity: .25; }

/* ---------- advanced graph SVG storytelling ---------- */
.ag-stage { margin-top: 1rem; overflow-x: auto; }
.ag-stage #stage-main { min-height: 210px; display: grid; place-items: center; }
.ag-svg { width: 100%; min-width: 390px; max-height: 330px; display: block; overflow: visible; }
.ag-edge path { stroke: rgba(148,163,184,.28); stroke-width: 2; fill: none; transition: all .22s; }
.ag-edge text { fill: var(--text-2); font: 800 10px var(--mono); text-anchor: middle; paint-order: stroke; stroke: #070b16; stroke-width: 4px; }
.ag-edge.hot path { stroke: var(--warn); stroke-width: 3; filter: drop-shadow(0 0 5px rgba(251,191,36,.6)); }
.ag-edge.selected path { stroke: var(--ok); stroke-width: 4; filter: drop-shadow(0 0 6px rgba(52,211,153,.55)); }
.ag-edge.used path { stroke: var(--indigo); stroke-width: 3; }
.ag-node circle { fill: #101827; stroke: var(--border-strong); stroke-width: 2; transition: all .22s; }
.ag-node > text { fill: var(--text-1); font: 900 11px var(--mono); text-anchor: middle; dominant-baseline: central; }
.ag-node text.sub { fill: var(--text-3); font-size: 8px; }
.ag-node.active circle { stroke: var(--warn); fill: rgba(251,191,36,.16); filter: drop-shadow(0 0 8px rgba(251,191,36,.55)); }
.ag-node.ok circle { stroke: var(--ok); fill: rgba(52,211,153,.15); }
.ag-node.bad circle { stroke: var(--bad); fill: rgba(251,113,133,.16); }
.ag-grid-cell rect { fill: rgba(255,255,255,.055); stroke: var(--border); stroke-width: 2; }
.ag-grid-cell text { fill: var(--text-1); font: 900 12px var(--mono); text-anchor: middle; dominant-baseline: central; }
.ag-grid-cell.wet rect { fill: rgba(34,211,238,.11); stroke: rgba(34,211,238,.38); }
.ag-grid-cell.ok rect { stroke: var(--ok); fill: rgba(52,211,153,.14); }
.ag-grid-cell.active rect { stroke: var(--warn); fill: rgba(251,191,36,.17); filter: drop-shadow(0 0 7px rgba(251,191,36,.5)); }
.ag-grid-cell .water { fill: rgba(34,211,238,.32); stroke: none; }
.stage-empty { color: var(--text-3); font: 700 11px var(--mono); }

/* ---------- math & geometry visual stories ---------- */
.mg-stage { margin-top:1rem; overflow-x:auto; }
.mg-stage #stage-main { min-height:190px; display:grid; place-items:center; padding:.5rem; }
.mg-matrix { --cols:1; display:grid; grid-template-columns:repeat(var(--cols),52px); gap:6px; min-width:max-content; }
.mg-cell { width:52px;height:52px;border:2px solid var(--border);border-radius:8px;background:rgba(255,255,255,.055);display:grid;place-items:center;align-content:center;font:900 13px var(--mono);transition:all .2s; }
.mg-cell small { color:var(--text-3);font-size:7px; }
.mg-cell.active { border-color:var(--indigo);background:rgba(129,140,248,.25);box-shadow:0 0 15px rgba(129,140,248,.35);transform:scale(1.06); }
.mg-cell.ok { border-color:var(--ok);background:rgba(52,211,153,.13); }
.mg-cell.bad { border-color:var(--bad);background:rgba(251,113,133,.12); }
.mg-digits,.mg-chain { display:flex;align-items:center;justify-content:center;gap:8px;min-width:max-content; }
.mg-digit { width:54px;display:grid;gap:5px;justify-items:center; }
.mg-digit span,.mg-number { width:52px;height:58px;border:2px solid var(--border);border-radius:9px;background:rgba(255,255,255,.06);display:grid;place-items:center;font:900 15px var(--mono); }
.mg-digit small { color:var(--text-3);font:700 8px var(--mono); }
.mg-digit.active span,.mg-number.active { border-color:var(--warn);background:rgba(251,191,36,.15);box-shadow:0 0 14px rgba(251,191,36,.3); }
.mg-digit.ok span { border-color:var(--ok);background:rgba(52,211,153,.13); }
.mg-arrow { color:var(--text-3);font:900 16px var(--mono); }
.mg-plane { width:100%;min-width:390px;max-height:300px;display:block; }
.mg-axis { stroke:rgba(148,163,184,.28);stroke-width:2; }
.mg-square { fill:rgba(52,211,153,.08);stroke:var(--ok);stroke-width:3;stroke-dasharray:7 5; }
.mg-point circle { fill:var(--indigo);stroke:#c7d2fe;stroke-width:2; }
.mg-point.ok circle { fill:var(--ok); }
.mg-point.query circle { fill:var(--warn);stroke:#fde68a; }
.mg-point text { fill:var(--text-2);font:700 9px var(--mono);text-anchor:middle; }

/* ---------- interval timelines ---------- */
.iv-stage { margin-top:1rem;overflow-x:auto; }
.iv-stage #stage-main { min-height:240px;display:grid;place-items:center; }
.iv-svg { width:100%;min-width:420px;max-height:285px;display:block; }
.iv-axis,.iv-tick { stroke:rgba(148,163,184,.38);stroke-width:2; }
.iv-tick-label,.iv-query-label { fill:var(--text-3);font:700 9px var(--mono);text-anchor:middle; }
.iv-query { stroke:var(--warn);stroke-width:2;stroke-dasharray:5 4; }
.iv-query-label { fill:var(--warn);text-anchor:start; }
.iv-bar rect { fill:rgba(129,140,248,.14);stroke:rgba(129,140,248,.45);stroke-width:2; }
.iv-bar text { fill:var(--text-1);font:800 9px var(--mono);text-anchor:middle; }
.iv-bar.active rect { fill:rgba(251,191,36,.2);stroke:var(--warn);filter:drop-shadow(0 0 6px rgba(251,191,36,.45)); }
.iv-bar.ok rect { fill:rgba(52,211,153,.15);stroke:var(--ok); }
.iv-bar.bad rect { fill:rgba(251,113,133,.16);stroke:var(--bad);opacity:.55; }
.iv-bar.warn rect { fill:rgba(192,132,252,.16);stroke:var(--violet); }

/* ---------- binary registers ---------- */
.bit-stage { margin-top:1rem;overflow-x:auto; }
.bit-stage #stage-main { min-height:190px;display:grid;place-items:center; }
.bit-registers { display:grid;gap:12px;min-width:max-content;padding:8px; }
.bit-register { display:grid;grid-template-columns:125px auto 90px;align-items:center;gap:9px; }
.bit-label,.bit-decimal { color:var(--text-3);font:700 9px var(--mono); }
.bit-decimal { color:var(--text-2);text-align:right;overflow:hidden;text-overflow:ellipsis; }
.bit-row { display:flex;gap:2px; }
.bit-row > span { width:18px;height:30px;border:1px solid var(--border);border-radius:4px;background:rgba(255,255,255,.045);display:grid;place-items:center;position:relative;color:var(--text-2);font:800 10px var(--mono); }
.bit-row > span small { position:absolute;bottom:-10px;color:var(--text-3);font-size:5px; }
.bit-row > span.active { border-color:var(--warn);background:rgba(251,191,36,.19);color:#fde68a;box-shadow:0 0 8px rgba(251,191,36,.35); }
.bit-row > span.ok { border-color:var(--ok);background:rgba(52,211,153,.13);color:#a7f3d0; }
@media (max-width:700px){.bit-register{grid-template-columns:85px auto 60px}.bit-row>span{width:14px}}
.pointer-stage { margin-top:1rem;overflow-x:auto; }
.pointer-stage #stage-array { min-width:max-content;padding:20px 8px 26px; }

/* ---------- backtracking visualization ---------- */
.story-lane {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
}

.choice-card {
  min-width: 46px;
  min-height: 42px;
  padding: 0.45rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 800;
  color: var(--text-1);
  transition: all 0.22s;
}

.choice-card.active { border-color: var(--indigo); background: rgba(129, 140, 248, 0.22); box-shadow: 0 0 22px rgba(129, 140, 248, 0.28); transform: translateY(-3px); }
.choice-card.ok { border-color: var(--ok); background: rgba(52, 211, 153, 0.16); color: #a7f3d0; }
.choice-card.warn { border-color: var(--warn); background: rgba(251, 191, 36, 0.14); color: #fde68a; }
.choice-card.bad { border-color: var(--bad); background: rgba(251, 113, 133, 0.16); color: #fecdd3; }
.choice-card.dim { opacity: 0.35; }

.story-arrow {
  color: var(--text-3);
  font-family: var(--mono);
  font-weight: 900;
}

.solution-chip {
  border: 1px solid rgba(52, 211, 153, 0.28);
  background: rgba(52, 211, 153, 0.10);
  color: #a7f3d0;
  border-radius: 999px;
  padding: 0.38rem 0.72rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 800;
}

.mini-board {
  display: grid;
  gap: 5px;
  justify-content: center;
}

.mini-tile {
  width: 42px;
  height: 42px;
  border-radius: 0.6rem;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.055);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-weight: 900;
  color: var(--text-1);
  position: relative;
  transition: all 0.22s;
}

.mini-tile.active { border-color: var(--indigo); background: rgba(129, 140, 248, 0.24); box-shadow: 0 0 20px rgba(129, 140, 248, 0.28); transform: scale(1.05); }
.mini-tile.ok { border-color: var(--ok); background: rgba(52, 211, 153, 0.16); color: #a7f3d0; }
.mini-tile.warn { border-color: var(--warn); background: rgba(251, 191, 36, 0.15); color: #fde68a; }
.mini-tile.bad { border-color: var(--bad); background: rgba(251, 113, 133, 0.16); color: #fecdd3; }
.mini-tile.dark { background: rgba(15, 23, 42, 0.78); }

/* ---------- scrollbars ---------- */
.code-panel::-webkit-scrollbar,
.log-panel::-webkit-scrollbar { width: 8px; height: 8px; }

.code-panel::-webkit-scrollbar-thumb,
.log-panel::-webkit-scrollbar-thumb {
  background: var(--surface-2);
  border-radius: 99px;
}

.code-panel::-webkit-scrollbar-track,
.log-panel::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Polish layer — signature details (applies to every page)
   ============================================================ */

/* Faint dot-matrix texture over the whole canvas — adds craft
   without competing with content. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.35) 40%, rgba(0,0,0,.7));
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.35) 40%, rgba(0,0,0,.7));
}

/* Cards: gradient hairline across the top — the "machined edge". */
.card { position: relative; }
.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 1.5rem;
  right: 1.5rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.55), rgba(34, 211, 238, 0.35), transparent);
  pointer-events: none;
}

/* Topbar: same hairline along its bottom edge. */
.topbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(129, 140, 248, 0.5), rgba(192, 132, 252, 0.4), rgba(34, 211, 238, 0.35), transparent 95%);
  pointer-events: none;
}
.topbar { position: sticky; }

/* Code panel dressed as an editor window: traffic lights + filename tab. */
.code-panel { padding-top: 0; }
.code-panel::before {
  content: 'Solution.java';
  display: block;
  position: sticky;
  top: 0;
  z-index: 6;
  padding: 0.6rem 1rem 0.6rem 4.4rem;
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-3);
  background:
    radial-gradient(circle 5px at 1.1rem 50%, #ff5f57 99%, transparent),
    radial-gradient(circle 5px at 2.1rem 50%, #febc2e 99%, transparent),
    radial-gradient(circle 5px at 3.1rem 50%, #28c840 99%, transparent),
    rgba(10, 14, 28, 0.97);
  border-bottom: 1px solid var(--border);
}

/* Viz stage: faint blueprint grid — this is the lab bench. */
.viz-stage {
  background:
    linear-gradient(rgba(129, 140, 248, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(129, 140, 248, 0.045) 1px, transparent 1px),
    rgba(0, 0, 0, 0.28);
  background-size: 30px 30px, 30px 30px, auto;
}

/* Step banner: pointed prompt marker. */
.step-msg::before {
  content: '»';
  font-family: var(--mono);
  font-weight: 700;
  color: var(--indigo);
  flex-shrink: 0;
}

/* Execution log: live terminal cursor after the latest entry. */
.log-panel .entry.latest > span:last-child::after {
  content: '▍';
  margin-left: 2px;
  color: var(--indigo);
  animation: cursor-blink 1.1s steps(1) infinite;
}
@keyframes cursor-blink { 50% { opacity: 0; } }

/* Play button: slow breathing glow while idle. */
.ctrl-btn.play { animation: play-breathe 3.2s ease-in-out infinite; }
@keyframes play-breathe {
  0%, 100% { box-shadow: 0 8px 24px -6px rgba(99, 102, 241, 0.8); }
  50% { box-shadow: 0 8px 34px -4px rgba(168, 85, 247, 0.95), 0 0 18px rgba(99, 102, 241, 0.35); }
}

/* Hero title on problem pages: soft glow behind the gradient text. */
.phero h1 { text-shadow: 0 0 70px rgba(129, 140, 248, 0.45); }

/* Result banner: light sweep when it appears. */
.result-banner.show {
  position: relative;
  overflow: hidden;
}
.result-banner.show::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.14) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: shine 1.1s ease-out 0.15s forwards;
}
@keyframes shine { to { transform: translateX(100%); } }

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
  .ctrl-btn.play { animation: none; }
  .result-banner.show::after { animation: none; opacity: 0; }
  .log-panel .entry.latest > span:last-child::after { animation: none; }
}