.deck {
  --accent: #1971c2;
  --accent-deep: #125293;
  --accent-soft: #e0edfa;
  --accent-ink: #fff;
  --front: #fddd00;
  --front-soft: #fdf4c4;
  --seen: #a5c8ec;
  --c2: #e8590c;
  --c2-soft: #fde4d4;
}

/* Title */
.title-slide { flex-direction: row; align-items: center; gap: clamp(28px, 6vw, 80px); }
.title-slide h1 { font-size: clamp(2.4rem, 4.2vw + 0.5rem, 4.4rem); max-width: 12ch; }
.title-slide .lead { font-size: clamp(1.05rem, 0.8vw + 0.8rem, 1.3rem); max-width: 44ch; }
.hero-graph { flex: none; width: min(100%, 400px); height: auto; }
.hg-edges path { stroke: var(--line); stroke-width: 3; fill: none; }
.hg-path { stroke: var(--accent); stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hg-nodes circle { fill: var(--panel); stroke: var(--ink); stroke-width: 2; }
.hg-nodes circle.on { fill: var(--accent); stroke: var(--accent-deep); }
.hg-nodes circle.src, .hg-nodes circle.dst { fill: var(--ink); }
.hg-d text { font: 700 12px var(--mono); text-anchor: middle; fill: var(--ink); }
.hg-d text:nth-child(1), .hg-d text:nth-child(2), .hg-d text:nth-child(5), .hg-d text:nth-child(7), .hg-d text:nth-child(8) { fill: #fff; }
.hg-w text { font: 600 12px var(--font); fill: var(--muted); text-anchor: middle; }
@media (max-width: 900px) {
  .title-slide { flex-direction: column-reverse; align-items: stretch; }
  .hero-graph { width: 100%; max-height: 230px; }
}

/* Generic SVG graph */

.stack > pre.code { font-size: clamp(11px, 0.35vw + 9.5px, 14px); padding: 12px 16px; }
.grid { margin: 0 auto; width: 100%; }
.gsvg { width: 100%; height: auto; display: block; touch-action: manipulation; }
.gsvg text { font-family: var(--mono); pointer-events: none; }
.ge path.ln { stroke: #b8c6d3; stroke-width: 2; fill: none; }
.ge path.hd { fill: #b8c6d3; }
.ge .wt { font-size: 12px; font-weight: 700; fill: var(--muted); text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: var(--panel); stroke-width: 5px; stroke-linejoin: round; }
.ge.hot path.ln { stroke: var(--ink); stroke-width: 3.5; }
.ge.hot path.hd { fill: var(--ink); }
.ge.hot .wt { fill: var(--ink); }
.ge.tree path.ln { stroke: var(--accent); stroke-width: 4.5; }
.ge.tree path.hd { fill: var(--accent); }
.ge.tree .wt { fill: var(--accent-deep); }
.ge.bad path.ln { stroke: var(--block); stroke-width: 4; }
.ge.bad path.hd { fill: var(--block); }
.ge.bad .wt { fill: var(--block); }
.ge.rej path.ln { stroke: var(--block); stroke-dasharray: 5 5; opacity: 0.7; }
.ge.rej .wt { fill: var(--block); }
.ge.dim { opacity: 0.35; }
.ge.extra path.ln { stroke-dasharray: 6 4; }
.gn .sh { fill: var(--panel); stroke: var(--ink); stroke-width: 2; }
.gn .lb { font-size: 14px; font-weight: 700; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.gn.rect .lb { font-size: 12.5px; }
.gn .sb { font-size: 12px; font-weight: 700; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.gn .bd { fill: var(--ink); }
.gn .bdt { font-size: 10.5px; font-weight: 700; fill: #fff; text-anchor: middle; dominant-baseline: central; }
.gn.front .sh { fill: var(--front); }
.gn.grey .sh { fill: #c3ccd5; }
.gn.cur .sh { stroke: var(--block); stroke-width: 3.5; }
.gn.done .sh { fill: var(--accent); stroke: var(--accent-deep); }
.gn.done .lb { fill: #fff; }
.gn.black .sh { fill: var(--ink); }
.gn.black .lb { fill: #fff; }
.gn.bad .sh { fill: var(--block-soft); stroke: var(--block); stroke-width: 3; }
.gn.c1 .sh { fill: var(--accent); stroke: var(--accent-deep); }
.gn.c1 .lb { fill: #fff; }
.gn.c2 .sh { fill: var(--c2); stroke: #b0440a; }
.gn.c2 .lb { fill: #fff; }
.gn.click { cursor: pointer; }

.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.75em; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; border: 1px solid rgba(0, 0, 0, 0.15); }
.sw.round { border-radius: 50%; }

.chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 1.9em; }
.chip { font-family: var(--mono); font-size: 0.74em; font-weight: 700; padding: 3px 7px; border-radius: 5px; background: var(--paper); border: 1.5px solid var(--line); white-space: nowrap; }
.chip.top { background: var(--front); border-color: var(--ink); }
.chip.stale { text-decoration: line-through; color: var(--muted); }
.chip.ok { background: var(--accent-soft); border-color: var(--accent); }
.chip.no { background: var(--block-soft); border-color: var(--block); color: var(--block); text-decoration: line-through; }
.chip.now { box-shadow: 0 0 0 2px var(--ink); }
.row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.row > .label { min-width: 6.5em; }

.stats.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 520px) { .stats.four { grid-template-columns: repeat(2, 1fr); } }

/* Where graphs live */
.wh-list { display: flex; flex-wrap: wrap; gap: 6px; }
.wh-btn { font: inherit; font-size: 0.82em; font-weight: 600; padding: 6px 11px; min-height: 36px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; }
.wh-btn:hover { background: var(--paper); }
.wh-btn.sel { background: var(--accent); border-color: var(--accent); color: #fff; }
.wh-detail { border-left: 4px solid var(--accent); padding: 4px 0 4px 14px; display: grid; gap: 8px; min-height: 15em; }
.wh-detail dl { display: grid; grid-template-columns: 7.5em 1fr; gap: 4px 12px; margin: 0; font-size: 0.9em; }
.wh-detail dt { color: var(--muted); font-weight: 600; }
.wh-detail dd { margin: 0; }
.wh-detail p { font-size: 0.9em; color: var(--muted); }
@media (max-width: 520px) { .wh-detail dl { grid-template-columns: 1fr; gap: 0; } .wh-detail dd { margin-bottom: 4px; } }

/* Representations */
.rp-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; align-items: center; }
.rp-top pre.code { font-size: clamp(11px, 0.35vw + 9.5px, 13.5px); padding: 10px 12px; min-height: 9.6em; }
.rp-bars { display: grid; gap: 6px; }
.rp-row { display: grid; grid-template-columns: 11.5em 1fr 6.5em; gap: 10px; align-items: center; font-size: 0.82em; }
.rp-row b { text-align: right; font-family: var(--mono); font-size: 0.92em; }
.rp-row.over b { color: var(--block); }
.rp-row.over .cost-fill { background: var(--block); }
.cost-track { height: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; display: block; position: relative; }
.cost-fill { display: block; height: 100%; background: var(--accent); transition: width 0.15s; }
.rp-ram { position: absolute; top: -1px; bottom: -1px; width: 2px; background: var(--block); }
@media (max-width: 600px) {
  .rp-top { grid-template-columns: 1fr; }
  .rp-row { grid-template-columns: 1fr 6em; }
  .rp-row .cost-track { grid-column: 1 / -1; grid-row: 2; }
}

/* Grids (BFS, islands, A*) */
.grid { display: grid; gap: 2px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.cell { aspect-ratio: 1; border-radius: 3px; background: var(--paper); display: grid; place-items: center; font-family: var(--mono); font-size: clamp(7px, 0.5vw + 4px, 10px); font-weight: 700; color: var(--ink); cursor: pointer; min-width: 0; overflow: hidden; line-height: 1; }
.cell.wall { background: var(--ink); }
.cell.seen { background: var(--front); }
.cell.done { background: var(--seen); }
.cell.cur { box-shadow: inset 0 0 0 2px var(--block); }
.cell.path { background: var(--accent); color: #fff; }
.cell.start, .cell.goal { background: var(--ok); color: #fff; }
.cell.land { background: #8a9aa8; }
.cell.water { background: #dbe8f3; }
.cell.scan { box-shadow: inset 0 0 0 2px var(--ink); }

/* DFS */
.df-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 8.5em; gap: 12px; align-items: start; }
.df-stack { display: flex; flex-direction: column-reverse; gap: 3px; min-height: 9em; justify-content: flex-start; border: 1.5px dashed var(--line); border-radius: 8px; padding: 6px; }
.df-frame { font-family: var(--mono); font-size: 0.74em; font-weight: 700; padding: 3px 6px; border-radius: 4px; background: #c3ccd5; }
.df-frame:last-child { background: var(--ink); color: #fff; }
.df-side { display: flex; flex-direction: column; gap: 4px; }


/* DSU */
.ds-arr { display: grid; grid-template-columns: auto repeat(10, minmax(0, 1fr)); gap: 2px; font-family: var(--mono); font-size: 0.74em; text-align: center; }
.ds-arr span { padding: 3px 0; border-radius: 3px; background: var(--paper); }
.ds-arr .h { background: none; color: var(--muted); text-align: right; padding-right: 6px; font-family: var(--font); font-weight: 600; }
.ds-arr .i { background: none; color: var(--muted); }
.ds-arr .root { background: var(--accent-soft); font-weight: 700; }
.ds-arr .chg { background: var(--front); font-weight: 700; }

/* Interview recogniser */
.recog { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; border-top: 2px solid var(--ink); }
.rc { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: baseline; font-size: 0.92em; }
.rc b { color: var(--accent-deep); text-align: right; }
@media (max-width: 900px) { .recog { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .rc { grid-template-columns: 1fr; gap: 2px; } .rc b { text-align: left; } }

/* Tools */
.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tools pre.code { font-size: clamp(11px, 0.35vw + 9.5px, 13.5px); padding: 10px 14px; }
@media (max-width: 900px) { .tools { grid-template-columns: 1fr; } }

/* Phone: bigger text inside scaled-down SVG graphs */
@media (max-width: 520px) {
  .ge .wt { font-size: 14px; }
  .gn .lb { font-size: 16px; }
  .gn.rect .lb { font-size: 13px; }
  .gn .sb { font-size: 14px; }
  .rp-top .gsvg { max-width: 240px; margin: 0 auto; }
  .df-wrap { grid-template-columns: minmax(0, 1fr); }
  .df-stack { flex-direction: row; flex-wrap: wrap; min-height: 2.6em; align-items: center; }
}