.deck {
  --accent: #087f5b;
  --accent-deep: #065c42;
  --accent-soft: #d9f2ea;
  --accent-ink: #fff;
  --probe: #fddd00;
  --probe-soft: #fdf4c4;
  --tomb: #8a97a5;
  --hatch: repeating-linear-gradient(-45deg, #e3e8ee 0 4px, #f6f8fa 4px 8px);
}
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; flex: none; }
.num-in {
  font: inherit; font-family: var(--mono); font-size: 0.85em; width: 6.5em; padding: 6px 10px; border-radius: 8px;
  border: 1.5px solid var(--ink); background: var(--panel); color: var(--ink); min-height: 40px; min-width: 0;
}
.num-in.wide { flex: 1; max-width: 16em; }
.demo .controls + .controls { margin-top: -6px; }
.demo .stats { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
.demo .stat b { font-size: 1.1em; }
.seg { gap: 6px; }
.demo .log { min-height: 4.4em; }

/* Title: a hash table with one key landing in its slot */
.title-slide { flex-direction: row; align-items: center; gap: clamp(28px, 6vw, 80px); }
.title-slide h1 { font-size: clamp(2.4rem, 4.4vw + 0.5rem, 4.6rem); max-width: 12ch; }
.title-slide .lead { font-size: clamp(1.05rem, 0.8vw + 0.8rem, 1.3rem); max-width: 46ch; }
.hero-hash {
  flex: none; width: min(100%, 380px); padding: 18px; border-radius: 14px; background: var(--ink); color: #c9d6e2;
  font-family: var(--mono); font-size: 0.78em; display: grid; gap: 12px;
}
.hh-key { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hh-key span { background: var(--probe); color: var(--ink); font-weight: 700; padding: 4px 8px; border-radius: 5px; }
.hh-key i { font-style: normal; color: #7f93a6; }
.hh-key b { color: #fff; }
.hh-mask { color: #7f93a6; }
.hh-mask b { color: var(--probe); font-size: 1.2em; }
.hh-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.hh-slots span { position: relative; display: grid; place-items: center; min-height: 44px; padding: 14px 2px 4px; border-radius: 6px; background: #2f6f8f; color: #fff; font-size: 0.9em; overflow: hidden; white-space: nowrap; }
.hh-slots small { position: absolute; top: 2px; left: 5px; font-size: 0.75em; color: #a9bccb; }
.hh-slots .e { background: #1f3a52; }
.hh-slots .t { background: #1f3a52; color: #7f93a6; }
.hh-slots .hit { background: var(--accent); box-shadow: 0 0 0 2px var(--probe); font-weight: 700; }
.hh-list { display: flex; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px dashed #3b566e; }
.hh-list i { font-style: normal; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; }
.hh-list i.old { background: #1f3a52; color: #7f93a6; border: 1.5px dashed #7f93a6; }
.hh-list em { font-style: normal; color: #7f93a6; }
.hh-list span { margin-left: auto; color: #7f93a6; }
@media (max-width: 900px) {
  .title-slide { flex-direction: column-reverse; align-items: stretch; }
  .hero-hash { width: 100%; }
}

/* Dynamic array */
.ar-rule { margin: -4px 0 0; font-size: 0.8em; }
.ar-cells { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; min-height: 30px; align-content: start; }
.ar-c {
  display: grid; place-items: center; height: 26px; border-radius: 4px; border: 1.5px dashed var(--line);
  font-family: var(--mono); font-size: 0.62em; color: var(--ink); overflow: hidden;
}
.ar-c.on { background: var(--accent-soft); border: 1.5px solid var(--accent); }
.ar-c.new { animation: flash 0.7s; }
.ar-cells .empty { grid-column: 1 / -1; align-self: center; }
.ar-cells.big { display: flex; flex-direction: column; gap: 6px; }
.ar-bar { height: 26px; border-radius: 5px; border: 1.5px dashed var(--line); overflow: hidden; }
.ar-bar span { display: block; height: 100%; background: var(--accent); }
.ar-bar.new { animation: flash 0.7s; }
@keyframes flash { 0% { box-shadow: 0 0 0 3px var(--probe); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 520px) { .ar-cells { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

/* Array vs list in memory */
.ch-mem { display: grid; gap: 2px; font-family: var(--mono); }
.ch-row { display: grid; grid-template-columns: 4em repeat(8, minmax(0, 1fr)); gap: 2px; padding: 1px 2px; border-radius: 4px; }
.ch-row.in { background: var(--probe-soft); }
.ch-addr { font-size: 0.62em; color: var(--muted); align-self: center; }
.ch-c { height: 21px; display: grid; place-items: center; border-radius: 3px; font-size: 0.6em; font-weight: 700; }
.ch-a, .sw.ch-a { background: var(--accent); color: #fff; }
.ch-v, .sw.ch-v { background: #1c7ed6; color: #fff; }
.ch-p, .sw.ch-p { background: #a5c8ec; color: var(--ink); }
.ch-x { background: var(--hatch); }
.sw.ch-l { background: var(--probe-soft); border: 1px solid #d9b800; }
.ch-c.cur { box-shadow: 0 0 0 2px var(--ink); position: relative; z-index: 1; }
.ch-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.75em; color: var(--muted); }
.ch-legend span { display: inline-flex; align-items: center; }
.ch-legend .sw { margin-right: 5px; }

/* Ring buffer */
.rg-cells { display: grid; grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr)); gap: 4px 3px; }
.rg-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.rg-cell small { font-family: var(--mono); font-size: 0.62em; color: var(--muted); }
.rg-cell span {
  width: 100%; height: 34px; display: grid; place-items: center; border-radius: 6px; border: 1.5px dashed var(--line);
  font-family: var(--mono); font-weight: 700; font-size: 0.85em;
}
.rg-cell.on span { background: var(--accent-soft); border: 1.5px solid var(--accent); }
.rg-cell.new span { background: var(--probe); border-color: var(--ink); }
.rg-cell em { font-style: normal; min-height: 2.6em; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.rg-cell em b { font-family: var(--mono); font-size: 0.6em; padding: 0 4px; border-radius: 3px; color: #fff; }
.rg-h { background: var(--accent); }
.rg-t { background: var(--ink); }
.rg-formula { font-family: var(--mono); font-size: 0.78em; color: var(--muted); }
.rg-formula b { color: var(--ink); }

/* Hash function */
.hf-table { display: grid; gap: 4px; }
.hf-row {
  font: inherit; font-size: 0.82em; display: grid; grid-template-columns: minmax(0, 1fr) auto 3.4em; gap: 10px; align-items: center;
  text-align: left; padding: 5px 10px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer;
}
.hf-row:hover { background: var(--paper); }
.hf-row.sel { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.hf-row code { background: none; padding: 0; }
.hf-row b { font-family: var(--mono); text-align: right; }
.hf-hist { display: grid; grid-template-columns: repeat(var(--m), minmax(0, 1fr)); gap: 2px; height: 90px; align-items: end; border-bottom: 1.5px solid var(--ink); }
.hf-hist span { background: #9fb4c6; border-radius: 2px 2px 0 0; min-height: 1px; }
.hf-hist span.me { background: var(--accent); }

/* Collisions */
.cl-fit .fit-col h3::before { display: none; }
.cl-fit .fit-col li { border-left-color: var(--accent); font-size: 0.92em; padding: 7px 12px; }
.cl-fit .fit-col ul { gap: 6px; }
.cl-pic { display: grid; gap: 4px; margin-bottom: 12px; font-family: var(--mono); font-size: 0.78em; min-height: 128px; align-content: center; }
.cl-row { display: flex; align-items: center; gap: 6px; }
.cl-row b { width: 28px; height: 26px; display: grid; place-items: center; border-radius: 4px; background: var(--ink); color: #fff; }
.cl-row i, .cl-open i { font-style: normal; padding: 3px 8px; border-radius: 5px; background: var(--accent-soft); border: 1.5px solid var(--accent); }
.cl-row em { font-style: normal; color: var(--muted); }
.cl-open { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
.cl-open i { padding: 6px 0; text-align: center; font-size: 0.85em; overflow: hidden; }
.cl-open i.e { background: var(--panel); border: 1.5px dashed var(--line); }
.cl-open i.p { background: var(--probe); border-color: var(--ink); }
.cl-arrow { font-family: var(--font); font-size: 0.95em; color: var(--muted); }

/* Linear probing */
.pb-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.pb-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.pb-cell small { font-family: var(--mono); font-size: 0.65em; color: var(--muted); }
.pb-cell b {
  width: 100%; height: 40px; display: grid; place-items: center; border-radius: 6px; border: 1.5px dashed var(--line);
  font-family: var(--mono); font-size: 0.9em; transition: background 0.15s;
}
.pb-cell.on b { background: var(--accent-soft); border: 1.5px solid var(--accent); }
.pb-cell.tomb b { background: var(--hatch); border: 1.5px solid var(--tomb); color: var(--tomb); }
.pb-cell.path b { background: var(--probe); border-color: var(--ink); }
.pb-cell.hit b { background: var(--accent); color: #fff; border-color: var(--accent-deep); }
.pb-cell.miss b { box-shadow: 0 0 0 2px var(--block); }
.pb-cell em { font-style: normal; font-family: var(--mono); font-size: 0.65em; color: var(--ink); min-height: 1.4em; font-weight: 700; }

/* Resize */
.rs-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 2px; }
.rs-grid span { height: var(--h, 20px); border-radius: 3px; border: 1px solid var(--line); background: var(--panel); }
.rs-grid span.on { border-color: transparent; }
.rs-grid .d0 { background: #8fd3bd; }
.rs-grid .d1 { background: var(--accent); }
.rs-grid .d2 { background: #e8a33c; }
.rs-grid .d3 { background: #e0663a; }
.rs-grid .d4 { background: var(--block); }
.rs-grid span.new { animation: flash 0.7s; }
.rs-row { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 12px; align-items: center; }
.rs-row .stats { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
.rs-chart svg { width: 100%; display: block; overflow: visible; }
.rs-chart text { font-family: var(--mono); font-size: 9px; fill: var(--muted); }
.rs-chart .ax { stroke: var(--ink); stroke-width: 1; }
.rs-chart .th { stroke: var(--block); stroke-width: 1.5; stroke-dasharray: 4 3; }
.rs-chart .cv { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.rs-chart .pt { fill: var(--probe); stroke: var(--ink); stroke-width: 2; }
@media (max-width: 520px) { .rs-row { grid-template-columns: 1fr; } }

/* Flooding */
.fl-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; font-size: 0.8em; }
.fl-keys div { display: flex; justify-content: space-between; gap: 8px; min-width: 0; }
.fl-keys code { background: none; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-keys b { font-family: var(--mono); font-size: 0.9em; }
.fl-keys .more { display: none; }
.fl-hist { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; height: 70px; align-items: end; border-bottom: 1.5px solid var(--ink); }
.fl-hist span { background: var(--accent); border-radius: 2px 2px 0 0; }
.fl-hist span.all { background: var(--block); }

/* Python dict */
.pd-idx { display: grid; grid-template-columns: repeat(min(var(--n), 16), minmax(0, 1fr)); gap: 2px; margin-top: -8px; }
.pd-idx span { display: flex; flex-direction: column; align-items: center; border-radius: 4px; border: 1.5px dashed var(--line); padding: 1px 0 3px; min-width: 0; }
.pd-idx small { font-family: var(--mono); font-size: 0.58em; color: var(--muted); }
.pd-idx b { font-family: var(--mono); font-size: 0.8em; }
.pd-idx .on { background: var(--accent-soft); border: 1.5px solid var(--accent); }
.pd-idx .tomb { background: var(--hatch); border: 1.5px solid var(--tomb); color: var(--tomb); }
.pd-idx .path { box-shadow: inset 0 0 0 2px var(--ink); background: var(--probe); }
.pd-ent { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 3px; margin-top: -8px; min-height: 30px; }
.pd-ent div { display: grid; grid-template-columns: 2em 4.4em minmax(0, 1fr) auto; gap: 5px; align-items: center; padding: 3px 7px; border-radius: 5px; background: var(--paper); font-size: 0.76em; }
.pd-ent small { font-family: var(--mono); color: var(--muted); }
.pd-ent code { background: none; padding: 0; font-size: 0.9em; color: var(--muted); }
.pd-ent b { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; }
.pd-ent span { font-family: var(--mono); }
.pd-ent div.mark { background: var(--probe); }
.pd-ent div.dead { display: flex; background: var(--hatch); color: var(--muted); }
.pd-iter { display: grid; gap: 2px; font-size: 0.76em; color: var(--muted); }
.pd-iter b { color: var(--ink); font-family: var(--mono); }
.pd-iter span:first-child { font-family: var(--mono); color: var(--ink); overflow-wrap: anywhere; }

/* Implementations */
.impl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; border-top: 2px solid var(--ink); padding-top: 12px; }
.im { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 10px; background: var(--panel); border-left: 4px solid var(--accent); }
.im b { font-family: var(--mono); color: var(--accent-deep); }
.im span { font-size: 0.92em; }
@media (max-width: 800px) { .impl { grid-template-columns: 1fr; } }

/* Mutable keys */
.mk-code, .pt-code { font-family: var(--mono); }
.mk-code { font-size: 12px; padding: 10px 14px; }
.mk-p { font-family: var(--mono); font-size: 0.85em; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.mk-p span { color: var(--muted); font-size: 0.9em; }
.mk-b { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.mk-b div { display: flex; flex-direction: column; gap: 3px; min-height: 64px; padding: 3px 4px 5px; border-radius: 6px; border: 1.5px solid var(--line); }
.mk-b div.look { border-color: var(--ink); background: var(--probe-soft); }
.mk-b small { font-family: var(--mono); font-size: 0.62em; color: var(--muted); }
.mk-b i { font-style: normal; font-family: var(--mono); font-size: 0.72em; padding: 2px 5px; border-radius: 4px; background: var(--paper); display: flex; justify-content: space-between; gap: 4px; }
.mk-b i em { font-style: normal; color: var(--muted); }
.mk-b i.p { background: var(--accent-soft); border: 1.5px solid var(--accent); font-weight: 700; }
.mk-b i.hit { box-shadow: 0 0 0 2px var(--ink); }

/* LRU */
.lru-keys { gap: 5px; }
.lru-keys .btn { min-height: 36px; padding: 0.3em 0.75em; }
.lru-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 14px; }
.lru-map { display: grid; gap: 3px; margin-top: 4px; }
.lru-map div { display: flex; justify-content: space-between; gap: 6px; font-family: var(--mono); font-size: 0.75em; padding: 3px 8px; border-radius: 5px; background: var(--paper); }
.lru-map div.hot { background: var(--probe); }
.lru-map div.gone { background: var(--block-soft); color: var(--block); text-decoration: line-through; }
.lru-map span { color: var(--muted); }
.lru-list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.lru-list i { font-style: normal; display: flex; flex-direction: column; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--accent-soft); border: 1.5px solid var(--accent); }
.lru-list i b { font-family: var(--mono); font-size: 1.1em; }
.lru-list i small { font-family: var(--mono); font-size: 0.6em; color: var(--muted); }
.lru-list i.hot { background: var(--probe); border-color: var(--ink); }
.lru-list i.tail { border-style: dashed; }
.lru-list i.gone { background: var(--block-soft); border-color: var(--block); opacity: 0.7; text-decoration: line-through; }
.lru-list em { font-style: normal; color: var(--muted); }
@media (max-width: 520px) { .lru-body { grid-template-columns: 1fr; } .lru-map { grid-template-columns: 1fr 1fr; } }

/* Patterns */
.pt-task { font-weight: 600; margin: -4px 0 -6px; }
.pt-code { font-size: 12px; padding: 10px 14px; }
.pt-view { display: grid; gap: 10px; }
.pt-arr { display: flex; flex-wrap: wrap; gap: 4px; }
.pt-arr span {
  position: relative; min-width: 38px; height: 40px; padding: 10px 6px 0; display: grid; place-items: center; border-radius: 6px;
  border: 1.5px solid var(--line); font-family: var(--mono); font-weight: 700; background: var(--panel);
}
.pt-arr span.w { padding-top: 0; height: 34px; }
.pt-arr small { position: absolute; top: 1px; left: 4px; font-size: 0.6em; color: var(--muted); font-weight: 400; }
.pt-arr .past { background: var(--paper); color: var(--muted); }
.pt-arr .win { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.pt-arr .cur { background: var(--probe); border-color: var(--ink); color: var(--ink); }
.pt-arr .hit { background: var(--accent); border-color: var(--accent-deep); color: #fff; }
.pt-map { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-family: var(--mono); font-size: 0.8em; }
.pt-map.col { flex-direction: column; align-items: flex-start; }
.pt-map > b { margin-right: 4px; }
.pt-map i { font-style: normal; padding: 2px 7px; border-radius: 5px; background: var(--accent-soft); }
.pt-map i.hit { background: var(--probe); box-shadow: 0 0 0 1.5px var(--ink); }
.pt-map .pt-best { margin-left: auto; font-weight: 700; }

/* Prefix sums */
.px-arr { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.px-arr span { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 2px 0 4px; border-radius: 6px; border: 1.5px solid var(--line); font-family: var(--mono); min-width: 0; }
.px-arr small { font-size: 0.58em; color: var(--muted); }
.px-arr b { font-size: 0.85em; }
.px-arr em { font-style: normal; font-size: 0.7em; color: var(--accent-deep); min-height: 1.3em; }
.px-arr .past { background: var(--paper); }
.px-arr .in { background: var(--accent-soft); border-color: var(--accent); }
.px-arr .cur { box-shadow: 0 0 0 2px var(--ink); }
.px-found { display: flex; flex-wrap: wrap; gap: 4px; font-family: var(--mono); font-size: 0.75em; min-height: 1.6em; }
.px-found i { font-style: normal; padding: 2px 7px; border-radius: 5px; background: var(--ok-soft); }