/* ── Palette ────────────────────────────────────────────────────────── */
:root {
  --electric-blue: #0a6cff;
  --cyan:          #00d4ff;
  --magenta:       #d400ff;
  --pink:          #ff2d78;
  --purple:        #7b2fff;
  /* Roundtable companion accents beyond the 5 above — the 8 companions
     need 8 visually distinct label colors, more than the base palette
     has; these three are picked to sit in the same neon family. */
  --amber:         #ff8a3d;
  --gold:          #ffd166;
  --teal:          #2dd4a7;
  /* Generic "accent" alias used by buttons, links, and highlights that
     want the theme's primary accent without hardcoding which color that is. */
  --primary:       var(--cyan);

  /* gradients */
  --grad-tech:     linear-gradient(135deg, var(--electric-blue), var(--cyan));
  --grad-creative: linear-gradient(135deg, var(--magenta), var(--pink), var(--purple));
  --grad-full:     linear-gradient(135deg, var(--electric-blue), var(--cyan) 40%, var(--magenta) 70%, var(--pink));

  /* neutrals */
  --bg:      #0d0d14;
  --surface: #13131f;
  --border:  #1e1e32;
  --muted:   #7a7a9a;
  --text:    #e8e8f0;

  --radius: 10px;
}

/* ── Responsive approach ────────────────────────────────────────────── */
/* Mobile first: base rules describe the phone layout, and min-width queries
   add the wider layout. One breakpoint is used throughout, 601px, because the
   game scripts in static/js also switch to their phone layout at 600px. */

/* ── Base ───────────────────────────────────────────────────────────── */
body {
  font-size: 1rem;
  line-height: 1.7;
  background-color: var(--bg);
  color: var(--text);
}

a {
  color: #5b9fd4;
  text-decoration: none;
}
a:hover { color: #a06898; }

h1, h2, h3 { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Header / Nav ───────────────────────────────────────────────────── */
.site-header {
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 0;
  margin-bottom: 2rem;
  background: var(--surface);
}

.site-brand {
  text-decoration: none;
  display: flex;
  align-items: center;
}

.site-logo {
  height: 32px;
  width: auto;
  display: block;
}

/* On a narrow phone the logo and four links don't fit on one row, so the
   links wrap under the logo instead of overflowing. */
.site-header nav { flex-wrap: wrap; }
.site-header nav ul { flex-wrap: wrap; }
.site-header nav li { padding-left: 0.4rem; padding-right: 0.4rem; }

@media (min-width: 601px) {
  .site-logo { height: 40px; }
  .site-header nav li { padding-left: 0.5rem; padding-right: 0.5rem; }
}

.nav-link {
  position: relative;
  color: var(--muted) !important;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none !important;
  /* Vertical padding brings the tap target up toward 44px. */
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  transition: color 0.25s;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: var(--grad-tech);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover {
  color: #5b9fd4 !important;
}

.nav-link:hover::after {
  width: 100%;
}

@media (min-width: 601px) {
  .nav-link { font-size: 0.8rem; letter-spacing: 0.12em; }
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 4rem;
  padding: 1.5rem 0;
  color: var(--muted);
  text-align: center;
  background: var(--surface);
}

/* ── Buttons ────────────────────────────────────────────────────────── */
[role="button"],
button,
input[type="submit"] {
  background: var(--grad-tech) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--radius) !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em;
  transition: opacity 0.2s, transform 0.15s;
}
@media (hover: hover) {
  [role="button"]:hover,
  button:hover {
    opacity: 0.88;
    transform: translateY(-1px);
  }
}

[role="button"].secondary,
button.secondary {
  background: var(--grad-creative) !important;
}

[role="button"].outline,
button.outline {
  background: transparent !important;
  border: 1px solid var(--cyan) !important;
  color: var(--cyan) !important;
}
[role="button"].outline:hover,
button.outline:hover {
  background: var(--grad-tech) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ── Hero (homepage) ────────────────────────────────────────────────── */
.hero {
  padding: 2rem 0 0;
}
.hero + hr { margin: 1.5rem 0; }

.hero h1 {
  font-size: clamp(2rem, 1.2rem + 4vw, 2.75rem);
  font-weight: 800;
  margin-bottom: 0.5rem;
  background: var(--grad-full);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 600px;
  margin-bottom: 0;
}

/* ── Home grid ──────────────────────────────────────────────────────── */
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1.5rem;
}

.home-grid article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  transition: border-color 0.2s, transform 0.2s;
}
@media (hover: hover) {
  .home-grid article:hover {
    border-color: var(--cyan);
    transform: translateY(-2px);
  }
}

/* ── About ──────────────────────────────────────────────────────────── */
.about-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-top: 1.5rem;
}

@media (min-width: 601px) {
  .about-layout { grid-template-columns: 220px 1fr; gap: 3rem; }
}

.about-photo {
  width: 100%;
  max-width: 16rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

/* ── Blog ───────────────────────────────────────────────────────────── */
.post-card {
  background: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 0;
  margin: 0;
}
.post-card:last-of-type { border-bottom: none; }
.post-card header {
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 0.5rem 0;
}

.post-meta { color: var(--muted); font-size: 0.9rem; }

.tag {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 6px;
  font-size: 0.78rem;
  color: #5b9fd4;
  margin-left: 2px;
}

.post-body {
  max-width: 720px;
  line-height: 1.8;
}
.post-body h2, .post-body h3 { margin-top: 2rem; }
.post-body code {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-size: 0.88em;
  color: #5b9fd4;
}
.post-body pre {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1rem;
  border-radius: var(--radius);
  overflow-x: auto;
}

/* ── Projects grid ──────────────────────────────────────────────────── */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.project-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: border-color 0.2s, transform 0.2s;
}
@media (hover: hover) {
  .project-card:hover {
    border-color: var(--magenta);
    transform: translateY(-2px);
  }
}
.project-card [role="button"] { margin-top: auto; align-self: flex-start; }
.project-card-note { color: var(--muted); font-size: 0.85rem; }

/* ── Architecture diagrams ──────────────────────────────────────────── */
/* Hand-drawn SVGs that color themselves with currentColor and the palette
   variables, so they follow the site theme. */
.arch-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 1.5rem 0 1rem;
  overflow-x: auto;
  color: var(--text);
}
.arch-panel svg { display: block; width: 100%; min-width: 640px; height: auto; }
.arch-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--muted);
}
.arch-legend > span { display: inline-flex; align-items: center; gap: 0.5rem; }
.arch-key { display: inline-block; width: 22px; border-top: 1.5px solid var(--text); }
.arch-key-dashed { border-top-style: dashed; }
.arch-gcp { color: var(--cyan); }

/* ── Game of Life ────────────────────────────────────────────────────── */
.gol-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.gol-controls button { margin: 0; }
.gol-speed { width: 7.5rem; max-width: 100%; vertical-align: middle; }

.gol-canvas {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: crosshair;
  width: 100%;
  max-width: 100%;
}

.gol-hint { color: var(--muted); font-size: 0.85rem; margin-top: 0.5rem; }
/* Extra top margin for the control-hint text under a game's sidebar
   panel (Pong/Snake/Tetris) — needs more clearance than .gol-hint's
   default, which is tuned for the hint directly under Game of Life's canvas. */
.gol-hint-game { margin-top: 0.75rem; }

/* ── N-gram Generator ───────────────────────────────────────────────── */
.ngram-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 1.5rem;
}

@media (min-width: 601px) {
  .ngram-layout { grid-template-columns: 1fr 1fr; }
}

.ngram-num { width: 5.5rem; font-size: 1.1rem; }

.ngram-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 0.75rem;
}
.ngram-options button { margin: 0; }

.ngram-output {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  min-height: 200px;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  color: var(--text);
}

.ngram-stats {
  display: block;
  color: var(--muted);
  margin-top: 0.5rem;
  font-size: 0.82rem;
}

/* ── Inputs & textareas ─────────────────────────────────────────────── */
input, textarea, select {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
}
input:focus, textarea:focus {
  border-color: var(--cyan) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15) !important;
}

/* ── Range slider ───────────────────────────────────────────────────── */
input[type="range"] {
  accent-color: var(--cyan);
  border: none !important;
  background: transparent !important;
}

/* ── HR ─────────────────────────────────────────────────────────────── */
hr {
  border: none;
  height: 1px;
  background: var(--grad-full);
  opacity: 0.35;
  margin: 2rem 0;
}

/* ── Chess ──────────────────────────────────────────────────────────── */
/* Phone: board on top, status and captured pieces in a row beneath. */
.chess-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.chess-sidebar {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.chess-status {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  flex: 1 1 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.chess-status[data-state="check"] { border-color: #ff8c00; color: #ff8c00; }
.chess-status[data-state="over"]  { border-color: var(--cyan); color: var(--cyan); }

.chess-captured-row {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}
.chess-captured-label { display: block; }
.chess-captured-img {
  width: 1.1rem;
  height: 1.1rem;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 2px;
}

.chess-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: min(480px, 100%);
  aspect-ratio: 1;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
}

.chess-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}
.chess-piece-img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  z-index: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  pointer-events: none;
}
.chess-cell.light { background: #f0d9b5; }
.chess-cell.dark  { background: #b58863; }
.chess-cell.selected  { background: #f6f669 !important; }
.chess-cell.legal::before {
  content: '';
  position: absolute;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: rgba(0,0,0,0.18);
  z-index: 0;
}
.chess-cell.legal:not(:empty)::before { background: rgba(0,0,0,0); box-shadow: inset 0 0 0 3px rgba(0,0,0,0.2); width: 92%; height: 92%; }
.chess-cell.in-check { background: rgba(220,50,50,0.7) !important; }

.coord-r, .coord-f {
  position: absolute;
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 600;
  color: rgba(0,0,0,0.45);
  line-height: 1;
}
.coord-r { top: 2px; left: 3px; }
.coord-f { bottom: 2px; right: 3px; }

/* Wider screens: sidebar beside the board, at a fixed width so the board
   doesn't shift as the status text changes length. */
@media (min-width: 601px) {
  .chess-wrap { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .chess-sidebar { display: block; width: 220px; flex-shrink: 0; }
  .chess-status { flex: none; }
}

/* ── Tetris ─────────────────────────────────────────────────────────── */
/* Phone: canvas on top, stats row and touch buttons beneath. */
.tetris-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.tetris-canvas {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex-shrink: 0;
  max-width: 100%;
}

/* Pong reuses .tetris-wrap/.tetris-sidebar/.tetris-panel for its layout
   (same two-column canvas + stats-panel shape), but its canvas isn't
   square like Tetris's, so it gets its own canvas rule here. */
.pong-canvas {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex-shrink: 0;
  max-width: 100%;
}

.tetris-canvas-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.tetris-hud {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  gap: 0.75rem;
  background: rgba(13, 13, 20, 0.78);
  border-radius: 4px;
  padding: 4px 10px;
}

.tetris-hud-item {
  text-align: center;
}

.tetris-hud-label {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
  display: block;
}

.tetris-hud-val {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  display: block;
  line-height: 1.2;
}

.tetris-next-canvas {
  display: block;
  background: var(--bg);
  border-radius: 4px;
}

.tetris-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
}

.tetris-panel {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}

.tetris-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 0.15rem;
}

.tetris-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
}

/* ── Tetris mobile controls ─────────────────────────────────────────── */
.tetris-mobile-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  width: 100%;
}

.tetris-kb-hint { display: none; }
.tetris-drop { width: 100%; max-width: 20rem; }

@media (min-width: 601px) {
  .tetris-wrap { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .tetris-sidebar { display: block; width: auto; min-width: 120px; flex-shrink: 0; }
  .tetris-panel { flex: none; }
  .tetris-mobile-btns { display: none; }
  .tetris-kb-hint { display: block; }
}

.tetris-btn-row {
  display: flex;
  gap: 0.75rem;
}

.tetris-btn {
  width: auto;
  min-width: 80px;
  height: 44px;
  font-size: 0.9rem;
  border-radius: var(--radius) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  padding: 0 !important;
}

/* ── Snake layout ───────────────────────────────────────────────────── */
.snake-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.snake-canvas {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex-shrink: 0;
  max-width: 100%;
}

.snake-canvas-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.snake-hud {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  gap: 0.75rem;
  background: rgba(13, 13, 20, 0.78);
  border-radius: 4px;
  padding: 4px 10px;
}

.snake-hud-item { text-align: center; }

.snake-hud-label {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
  display: block;
}

.snake-hud-val {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  display: block;
  line-height: 1.2;
}

.snake-sidebar { display: none; }

/* ── Snake D-pad ────────────────────────────────────────────────────── */
.snake-mobile-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
  width: 100%;
}

.snake-dpad {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  grid-template-rows: repeat(3, 44px);
  gap: 4px;
}

.snake-dpad .tetris-btn {
  min-width: unset;
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
}

.snake-start-btn {
  background: var(--primary) !important;
  font-size: 1rem !important;
}

.snake-kb-hint { display: none; }

@media (min-width: 601px) {
  .snake-wrap { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .snake-sidebar { display: block; min-width: 120px; flex-shrink: 0; }
  .snake-mobile-btns { display: none; }
  .snake-kb-hint { display: block; }
}

/* ── Tutorials ───────────────────────────────────────────────────── */
/* The catalog page (list of tutorial series) intentionally reuses the
   blog's .post-card styling instead of its own card class — same
   "flat list row" pattern for any top-level content listing. */

/* Series index */
.tut-index-lede { color: var(--muted); font-style: italic; margin-bottom: 2rem; }
.tut-section-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2rem 0 .5rem;
}
.tut-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem 1.1rem;
  margin-bottom: .5rem;
  transition: border-color .15s, background .15s;
}
.tut-card:hover { border-color: var(--primary); background: rgba(0,212,255,.04); }
.tut-card-num { color: var(--primary); font-weight: 700; min-width: 2rem; display: inline-block; }
.tut-card-title { font-weight: 600; }
.tut-card-desc { color: var(--muted); font-size: .875rem; margin-top: .2rem; margin-left: 2rem; }
.tut-optional {
  display: inline-block;
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #d97706;
  background: rgba(217,119,6,.12);
  border: 1px solid rgba(217,119,6,.3);
  border-radius: 20px;
  padding: 1px 8px;
  margin-left: .5rem;
  vertical-align: middle;
}

/* Article */
.tut-wrap { max-width: 740px; margin: 0 auto; padding: 1.5rem 0 4rem; }
.tut-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 .6rem;
}
.tut-sub { color: var(--muted); font-style: italic; font-size: .95rem; margin: 0 0 2.5rem; }
.tut-callout {
  border-left: 4px solid var(--primary);
  background: rgba(0,212,255,.07);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: .9rem 1.1rem;
  margin: 0 0 1.5rem;
  font-size: .97rem;
}
.tut-callout strong { color: var(--primary); }
.tut-callout.warn {
  border-left-color: #d97706;
  background: rgba(217,119,6,.08);
}
.tut-callout.warn strong { color: #d97706; }
.tut-math {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  margin: 0 0 1.4rem;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: .92rem;
  text-align: center;
  color: #a8d8f0;
  overflow-x: auto;
}
.tut-flow {
  text-align: center;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: .88rem;
  color: var(--muted);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  padding: 1rem;
  margin: 0 0 1.5rem;
}
.tut-code {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  margin: 0 0 1.5rem;
  overflow-x: auto;
}
.tut-code pre {
  margin: 0;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.tut-code code { background: none; padding: 0; color: inherit; font-size: inherit; }
.tut-code .cm { color: var(--muted); font-style: italic; }
.tut-notebook-list { padding-left: 1.4rem; margin: 0 0 1.5rem; }
.tut-notebook-list li { margin: 0 0 .5rem; }
.tut-notebook-open {
  display: inline-block;
  color: #fff;
  background: var(--grad-tech);
  text-decoration: none;
  font-weight: 700;
  padding: .7rem 1.4rem;
  border-radius: var(--radius);
  margin: 0 0 1.5rem;
  transition: opacity 0.2s, transform 0.15s;
}
.tut-notebook-open:hover { transform: translateY(-1px); }
.tut-notebook-open:hover { opacity: .88; }
.tut-nb-ref { color: var(--muted); font-size: .85rem; }
.tut-wrap code {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: .88em;
  overflow-wrap: anywhere;
  background: rgba(0,212,255,.1);
  color: #a8d8f0;
  padding: 1px 6px;
  border-radius: 4px;
}
/* Every table sits in a .table-scroll wrapper. A table with many columns gets a
   minimum width so its text stays readable, and the wrapper scrolls sideways
   when the screen is narrower. The two gradients at the edges hint that there
   is more to scroll to. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.5rem;
  background:
    linear-gradient(to right, var(--bg) 30%, transparent) left center / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--bg) 30%, transparent) right center / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,212,255,.25), transparent) left center / .9rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,212,255,.25), transparent) right center / .9rem 100% no-repeat scroll;
}
.table-scroll > table { width: 100%; margin: 0; }

/* Tables with four or more columns are too wide for a phone, and squeezing the
   columns makes tall unreadable rows. On a phone each row becomes a card, and
   every cell shows its column name (copied into data-label by the templates and
   the markdown filter). From 601px up the browser's normal table display is
   restored. */
.table-scroll > table:has(tr > :nth-child(4)),
.table-scroll > table:has(tr > :nth-child(4)) :is(tbody, thead, tr, td) { display: block; }
.table-scroll > table:has(tr > :nth-child(4)) tr:has(th) { display: none; }
.table-scroll > table:has(tr > :nth-child(4)) tr {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 0 0 .75rem;
  padding: .25rem 0;
}
.table-scroll > table:has(tr > :nth-child(4)) td { border: none; padding: .35rem .9rem; }
.table-scroll > table:has(tr > :nth-child(4)) td::before {
  content: attr(data-label);
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.table-scroll > table:has(tr > :nth-child(4)) td:first-child {
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  padding-bottom: .5rem;
  margin-bottom: .25rem;
}
.table-scroll > table:has(tr > :nth-child(4)) td:first-child::before { display: none; }

@media (min-width: 601px) {
  .table-scroll > table:has(tr > :nth-child(4)),
  .table-scroll > table:has(tr > :nth-child(4)) :is(tbody, thead, tr, td),
  .table-scroll > table:has(tr > :nth-child(4)) tr:has(th) { display: revert; }
  .table-scroll > table:has(tr > :nth-child(4)) tr { border: none; border-radius: 0; margin: 0; padding: 0; }
  .table-scroll > table:has(tr > :nth-child(4)) td { border: 1px solid var(--border); padding: .5rem .75rem; }
  .table-scroll > table:has(tr > :nth-child(4)) td::before { display: none; }
  .table-scroll > table:has(tr > :nth-child(4)) td:first-child { font-weight: inherit; padding-bottom: .5rem; margin-bottom: 0; }
}

.tut-wrap table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: .93rem;
}
.tut-wrap th,
.tut-wrap td {
  border: 1px solid var(--border);
  padding: .5rem .75rem;
  text-align: left;
  vertical-align: top;
}
.tut-wrap th { background: rgba(255,255,255,.04); font-weight: 700; }
.tut-wrap th.num,
.tut-wrap td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tut-wrap tr.total td { background: rgba(255,255,255,.04); font-weight: 700; }
.tut-wrap td.f,
.tut-wrap td.lbl { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }
/* Diagrams. On a wide screen a diagram is centered and scaled to fit the column.
   On a phone, scaling a wide diagram down to ~360px shrinks its labels past the
   point of being readable, so below the breakpoint the SVG renders at its own
   natural size and the container scrolls sideways instead. */
.mermaid {
  margin: 1.5rem auto;
  text-align: center;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.mermaid svg { max-width: 100%; height: auto; }

/* This one stays a max-width query: Mermaid writes width and max-width inline on
   the SVG, and undoing those on wider screens would need a second !important
   override. */
@media (max-width: 700px) {
  .mermaid {
    text-align: left;
    /* Bleed into the page gutter so a scrolling diagram gets the full width. */
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 0 1rem;
  }
  .mermaid svg {
    width: auto !important;
    max-width: none !important;
    height: auto;
  }
}
.tut-wrap figure {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.25rem 1rem;
  margin: 0 0 1.5rem;
  text-align: center;
}
.tut-wrap figcaption { color: #555; font-size: .8rem; font-style: italic; text-align: center; margin-top: .6rem; }
.tut-nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: .9rem;
}
/* Same nav, placed above the content instead of below -- mirrors the
   spacing/border so it separates from what follows rather than what
   precedes it. */
.tut-nav-top {
  margin-top: 0;
  margin-bottom: 2rem;
  padding-top: 0;
  padding-bottom: 1.25rem;
  border-top: none;
  border-bottom: 1px solid var(--border);
}
.tut-nav a { color: var(--primary); text-decoration: none; font-weight: 600; display: inline-block; padding: .3rem 0; }
.tut-nav a:hover { text-decoration: underline; }
/* .tut-nav always has two children: Previous (left) and Next (right).
   Right-aligns the second so its label/link line up under the right
   edge instead of hugging the flex gap. */
.tut-nav > div:last-child { text-align: right; }
.tut-nav-label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .2rem; }
.tut-breadcrumb { font-size: .82rem; color: var(--muted); margin-bottom: 1.5rem; }
.tut-breadcrumb a { color: var(--muted); text-decoration: none; }
.tut-breadcrumb a:hover { color: var(--primary); }

/* ── Roundtable ─────────────────────────────────────────────────────── */
.rt-heading {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.rt-heading h1 { margin: 0; }

.rt-logo {
  height: 48px;
  width: auto;
  border-radius: var(--radius);
}

.rt-messages {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  max-height: 60vh;
  max-height: 60dvh; /* dvh follows the visible viewport as mobile browser bars show and hide */
  overflow-y: auto;
  padding: 1rem;
  margin: 1rem 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.rt-messages::-webkit-scrollbar { width: 8px; }
.rt-messages::-webkit-scrollbar-track { background: transparent; }
.rt-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.rt-messages::-webkit-scrollbar-thumb:hover { background: var(--muted); }

.rt-msg {
  max-width: 90%;
  padding: .55rem .85rem;
  border-radius: var(--radius);
  line-height: 1.45;
  font-size: .95rem;
  overflow-wrap: break-word;
}
.rt-msg .rt-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .2rem;
  opacity: .8;
}

.rt-msg.rt-user {
  align-self: flex-end;
  background: var(--grad-tech);
  color: #fff;
  border-bottom-right-radius: 3px;
}
.rt-msg.rt-user .rt-label { color: rgba(255,255,255,.85); }

.rt-msg.rt-persona {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 3px;
}
.rt-msg.rt-persona-quillfeather .rt-label { color: var(--cyan); }
.rt-msg.rt-persona-wormeye .rt-label { color: var(--purple); }
.rt-msg.rt-persona-hollowell .rt-label { color: var(--magenta); }
.rt-msg.rt-persona-mira .rt-label { color: var(--electric-blue); }
.rt-msg.rt-persona-calder .rt-label { color: var(--pink); }
.rt-msg.rt-persona-severin .rt-label { color: var(--amber); }
.rt-msg.rt-persona-elara .rt-label { color: var(--gold); }
.rt-msg.rt-persona-ren .rt-label { color: var(--teal); }

.rt-msg.rt-system {
  align-self: center;
  background: none;
  border: 1px dashed var(--border);
  color: var(--muted);
  font-size: .85rem;
  text-align: center;
}

.rt-msg.rt-verdict {
  align-self: center;
  max-width: 90%;
  background: var(--surface);
  color: var(--text);
}
.rt-msg.rt-verdict .rt-verdict-text { margin: .4rem 0 0; }
.rt-msg.rt-verdict-solved { border: 1px solid var(--teal); }
.rt-msg.rt-verdict-solved .rt-label { color: var(--teal); }
.rt-msg.rt-verdict-open { border: 1px solid var(--gold); }
.rt-msg.rt-verdict-open .rt-label { color: var(--gold); }
.rt-verdict-nudge {
  margin: .6rem 0 0;
  padding-top: .5rem;
  border-top: 1px dashed var(--border);
  color: var(--gold);
  font-style: italic;
}

.rt-connection-note {
  color: var(--gold);
  font-size: .9rem;
  margin: 0 0 .75rem;
}

.rt-generating {
  text-align: center;
  color: var(--muted);
  font-style: italic;
  margin: 2rem 0;
}

/* ── Roundtable: mystery + companion setup screen ──────────────────── */
.rt-setup { margin: 1rem 0; }

.rt-companion-hint { color: var(--muted); font-size: .85rem; margin: -.5rem 0 .75rem; }

.rt-companion-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
  margin: 0 0 1.5rem;
}
@media (min-width: 481px) {
  .rt-companion-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 901px) {
  .rt-companion-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 601px) {
  .rt-msg { max-width: 75%; }
}

.rt-companion-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-height: 150px;
  padding: .9rem 2.2rem .9rem .9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.rt-companion-option:has(input:checked) {
  border-color: var(--primary);
  background: rgba(0, 212, 255, 0.08);
}
.rt-companion-option.rt-companion-disabled { opacity: .4; cursor: not-allowed; }

/* The native checkbox stays in the DOM (click target, form semantics,
   accessibility) but is visually replaced by the circular badge below —
   plain checkbox styling wasn't obvious enough as a selection state. */
.rt-companion-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.rt-companion-option::after {
  content: "";
  position: absolute;
  top: .7rem;
  right: .7rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg);
  transition: all .15s;
}
.rt-companion-option:has(input:checked)::after {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-tech);
  border-color: var(--primary);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1;
}

.rt-companion-option .rt-companion-name { font-weight: 700; }
.rt-companion-option .rt-companion-blurb { color: var(--muted); font-size: .8rem; }
.rt-companion-option .rt-companion-personality { font-size: .82rem; margin-top: auto; padding-top: .3rem; }

.rt-mystery-banner {
  padding: 1rem 1.2rem;
  margin: 1rem 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.rt-mystery-banner h3 { margin: 0 0 .5rem; }
.rt-mystery-banner ul { margin: .5rem 0 0; padding-left: 1.2rem; color: var(--muted); font-size: .9rem; }

/* One row: the message form (input + Send) alongside Ask the Oracle and
   New investigation, so all three actions read as parallel choices instead
   of the form looking like the only thing to interact with. */
.rt-chat-controls {
  display: flex;
  align-items: stretch;
  gap: .6rem;
  margin: .75rem 0;
  flex-wrap: wrap;
}
.rt-chat-controls #roundtable-form {
  display: flex;
  gap: .6rem;
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
}
/* Pico's classless defaults make form inputs/buttons block-level and
   full-width -- explicit width: auto here overrides that so they behave
   as ordinary flex items instead of each claiming the whole row. */
.rt-chat-controls #roundtable-form input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin: 0;
}
.rt-chat-controls #roundtable-form button,
.rt-chat-controls > button {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  white-space: nowrap;
}