/* ==========================================================================
   Projection-first stylesheet.

   Everything sizes off the root font, which is itself a fraction of the
   viewport HEIGHT. A 16:9 projector at 1920x1080 lands on ~21px, so body copy
   is ~27px and code is ~23px -- readable from the back of a 100-seat room.
   The same file previews correctly in a small window because the whole scale
   shrinks together.
   ========================================================================== */

html { font-size: clamp(9px, 1.95vh, 30px); }

:root {
    --bg-dark: #0f1012;
    --bg-darker: #080809;
    --primary: #FFD700;
    --primary-dim: #b99f14;
    --primary-glow: rgba(255, 215, 0, 0.4);
    --text-main: #f8f9fa;
    --text-muted: #b2b2b8;
    --glass-border: rgba(255, 255, 255, 0.1);
    --ok: #4ae07f;
    --warn: #ffb04d;
    --bad: #ff6b6b;
    --blue: #7cbcf5;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-darker);
    color: var(--text-main);
    overflow: hidden;
    height: 100vh; width: 100vw;
}

#presentation-container { position: relative; width: 100%; height: 100%; }

/* ---------- slide shell ---------- */
.slide {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden;
    transition: opacity .4s ease-in-out, transform .4s cubic-bezier(.2,.8,.2,1);
    transform: scale(.98);
    display: flex; align-items: center; justify-content: center;
    padding: 3.9rem 0 3.3rem;          /* clears the fixed top bar and nav strip */
    background: radial-gradient(circle at center, var(--bg-dark) 0%, var(--bg-darker) 100%);
}
.slide.active { opacity: 1; visibility: visible; transform: scale(1); z-index: 10; }
.slide.prev { transform: translateX(-3rem) scale(.98); }
.slide.next { transform: translateX(3rem) scale(.98); }

.content {
    width: 96%; max-width: 100rem; height: 100%;
    background: #17181c;
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    padding: 1.6rem 2rem 1.3rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.5);
    display: flex; flex-direction: column;
    overflow: hidden;
}

/* ---------- type scale ---------- */
h2 {
    font-size: 2.6rem; font-weight: 800; line-height: 1.04; margin-bottom: .3rem;
    background: linear-gradient(135deg, #fff 0%, #b9bac1 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.highlight { color: var(--primary); -webkit-text-fill-color: var(--primary); text-shadow: 0 0 1rem var(--primary-glow); }

/* the one-line deck under every heading */
.content > p.lede {
    font-size: 1.3rem; line-height: 1.4; color: var(--text-muted);
    margin-bottom: .9rem; flex-shrink: 0;
}
.content > p.lede b { color: var(--text-main); }

code.inline {
    font-family: var(--mono); font-size: .95em;
    background: rgba(255,215,0,.12); color: var(--primary);
    padding: .05em .35em; border-radius: .2rem;
}

/* ---------- layout primitives ---------- */
.two-col { display: flex; gap: 1.2rem; flex: 1; min-height: 0; }
.col-main { flex: 1.45; min-width: 0; display: flex; flex-direction: column; gap: .7rem; min-height: 0; }
.col-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .7rem; min-height: 0; }
.col-wide { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .8rem; min-height: 0; }
.grow { flex: 1; min-height: 0; }

.panel {
    background: rgba(255,255,255,.045);
    border: 1px solid var(--glass-border);
    border-radius: .6rem; padding: .9rem 1rem;
    display: flex; flex-direction: column; gap: .55rem;
    min-height: 0; overflow: auto;
}
.panel-title.divider {
    margin-top: .5rem; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.09);
}
.panel-title {
    font-size: .95rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--primary);
}
.note { font-size: 1.15rem; line-height: 1.45; color: var(--text-muted); }
.note b { color: var(--text-main); }
.dim { color: #7c7c86; }
.pill {
    display: inline-block; font-size: 1rem; font-weight: 700; font-family: var(--mono);
    background: rgba(255,215,0,.14); color: var(--primary);
    border: 1px solid rgba(255,215,0,.3); padding: .1rem .6rem; border-radius: 1rem;
    vertical-align: middle; margin-left: .4rem;
}

/* ---------- code ---------- */
.code-panel {
    background: #101115; border: 1px solid var(--glass-border);
    border-radius: .6rem; padding: .8rem 1rem;
    font-family: var(--mono); font-size: 1.1rem; line-height: 1.5;
    color: #d8dbe3; overflow: auto; min-height: 0; position: relative;
}
.code-panel pre { font-family: var(--mono); white-space: pre; margin: 0; }
.code-panel.big-code { font-size: 1.32rem; line-height: 1.6; padding: 1rem 1.2rem; }
.code-title {
    font-size: .95rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--primary); margin-bottom: .5rem; font-family: 'Inter', sans-serif;
}
.code-line { padding: 0 .3rem; border-left: .18rem solid transparent; border-radius: .15rem; white-space: pre; }
.code-line.active { background: rgba(255,215,0,.18); border-left-color: var(--primary); color: #fff; }
.code-panel.dimmed { opacity: .35; transition: opacity .3s, border-color .3s; }
.code-panel.live-code { border-color: rgba(255,215,0,.5); }
.code-panel.clickable .code-line { cursor: pointer; transition: background .15s; }
.code-panel.clickable .code-line:hover { background: rgba(255,255,255,.07); }
.code-line.wrong { background: rgba(255,107,107,.2); border-left-color: var(--bad); }
.code-line.right { background: rgba(74,224,127,.2); border-left-color: var(--ok); }
.ln { display: inline-block; width: 2em; color: #55585f; user-select: none; }
.cmt { color: #767c8b; }
.kw  { color: #d09ce8; }
.num { color: #f89a72; }

/* ---------- stats ---------- */
.stat-row { display: flex; gap: .6rem; flex-shrink: 0; }
.stat {
    flex: 1; background: rgba(0,0,0,.4); border: 1px solid var(--glass-border);
    border-radius: .5rem; padding: .5rem .3rem; text-align: center;
}
.stat-num { font-family: var(--mono); font-size: 2.1rem; font-weight: 700; color: var(--primary); line-height: 1.05; }
.stat-num.bad-num { color: var(--bad); }
.stat-num.ok-num { color: var(--ok); }
/* complexity strings like O(n log n) need more room than a bare number */
.stat-num.formula { font-size: 1.5rem; white-space: nowrap; }
.stat-lbl { font-size: .88rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-top: .15rem; }

/* ---------- tables ---------- */
.data-table { width: 100%; border-collapse: collapse; font-size: 1.2rem; }
.data-table td { padding: .42rem .4rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.data-table tr:last-child td { border-bottom: none; }
.data-table td:first-child { font-family: var(--mono); color: var(--text-main); white-space: nowrap; }
.data-table td:nth-child(2) { font-family: var(--mono); color: var(--primary); text-align: right; white-space: nowrap; }
.data-table td:nth-child(3) { text-align: right; }
.data-table.huge { font-size: 1.6rem; }
.data-table.huge td { padding: .6rem .5rem; }
.ok { color: var(--ok); } .warn { color: var(--warn); } .bad { color: var(--bad); }
/* the column rule above outranks a bare .ok/.bad, so restate them for cells */
.data-table td.ok { color: var(--ok); }
.data-table td.warn { color: var(--warn); }
.data-table td.bad { color: var(--bad); }

/* ---------- lists ---------- */
.tick-list { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.tick-list li {
    font-size: 1.3rem; color: var(--text-muted); padding-left: 1.3rem;
    position: relative; line-height: 1.35;
}
.tick-list li::before { content: "\25B8"; position: absolute; left: 0; color: var(--primary); }
.warn-list li::before { content: "!"; font-weight: 900; color: var(--bad); }

/* ---------- buttons ---------- */
.btn {
    padding: .6rem 1.1rem; border-radius: .45rem; border: 1px solid var(--glass-border);
    background: rgba(255,255,255,.06); color: var(--text-main);
    font-size: 1.05rem; font-weight: 600; cursor: pointer; transition: all .15s; font-family: inherit;
}
.btn:hover:not(:disabled) { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.primary-btn { background: var(--primary); color: #101010; border: none; }
.primary-btn:hover:not(:disabled) { background: #ffe33f; box-shadow: 0 0 1rem var(--primary-glow); }
.danger-btn { background: var(--bad); color: #fff; border: none; }
.btn.active-btn { background: var(--primary); color: #101010; border-color: var(--primary); }
.sort-controls { display: flex; justify-content: center; gap: .6rem; flex-shrink: 0; flex-wrap: wrap; }

/* ---------- live commentary strip ---------- */
.explanation-panel {
    background: rgba(255,215,0,.07); border: 1px solid rgba(255,215,0,.25);
    border-radius: .45rem; padding: .7rem 1rem;
    font-size: 1.25rem; font-family: var(--mono); line-height: 1.4;
    color: var(--primary); min-height: 3.4rem; flex-shrink: 0; overflow: auto;
}

/* ---------- sliders / tabs ---------- */
.slider-row { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.slider-row label { color: var(--primary); font-weight: 700; font-size: 1.2rem; font-family: var(--mono); white-space: nowrap; }
input[type=range] { flex: 1; accent-color: var(--primary); height: .4rem; cursor: pointer; }

.tabs { display: flex; gap: .3rem; margin-bottom: .5rem; flex-shrink: 0; }
.tab {
    padding: .4rem .9rem; border-radius: .4rem .4rem 0 0;
    border: none; border-bottom: .15rem solid transparent;
    background: none; color: var(--text-muted); font-family: inherit; font-size: 1.1rem;
    font-weight: 600; cursor: pointer; transition: all .15s;
}
.tab:hover { color: var(--text-main); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); background: rgba(255,215,0,.08); }

/* ================= TITLE ================= */
.title-slide {
    justify-content: center; align-items: center; text-align: center;
    background: transparent; border: none; box-shadow: none;
}
.logo-img { height: 5rem; object-fit: contain; margin-bottom: 2rem; }
.main-title { font-size: 5.4rem; font-weight: 900; line-height: 1.14; margin-bottom: 1rem; padding-bottom: .1em; }
.subtitle { font-size: 2rem; color: var(--text-muted); font-weight: 400; -webkit-text-fill-color: var(--text-muted); background: none; }
.instruction { margin-top: 2.5rem; font-size: 1.2rem; color: var(--text-muted); animation: pulse 2s infinite; }
.tournament-graphic { font-size: 7rem; margin-bottom: 1rem; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity:.35 } 50% { opacity:.95 } }

/* ================= VS ================= */
.split-text { display: flex; align-items: stretch; gap: 1.5rem; flex: 1; min-height: 0; }
.text-block {
    flex: 1; background: rgba(255,255,255,.04); padding: 1.6rem;
    border-radius: .8rem; border: 1px solid var(--glass-border);
}
.text-block h3 { font-size: 2rem; color: var(--primary); margin-bottom: 1.1rem; }
.vs { font-size: 2rem; font-weight: 900; color: var(--text-muted); opacity: .4; align-self: center; }
.takeaway { margin-top: 1rem; font-size: 1.7rem; color: var(--text-main); text-align: center; flex-shrink: 0; }

/* ---- slide 2 line art ---- */
.vs-art { width: 100%; max-height: 7.5rem; margin: .2rem 0 1rem; display: block; }
.vs-art g { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vs-art .fill { fill: currentColor; stroke: none; }
.vs-art .art-muted { stroke: var(--text-muted); color: var(--text-muted); opacity: .85; }
.vs-art .art-gold  { stroke: var(--primary);    color: var(--primary);    opacity: .9; }

/* ---- code hidden until the machine runs ---- */
.code-veil { display: none; font-family: 'Inter', sans-serif; font-size: 1.1rem;
    line-height: 1.5; color: #6b7080; }
.code-panel.veiled .code-veil { display: block; }
.code-panel.veiled .code-line { display: none; }

/* ================= THE CLICK: gears ================= */
.gear-stage {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .6rem;
    background: rgba(0,0,0,.3); border: 1px solid var(--glass-border);
    border-radius: .8rem; padding: 1rem;
}
.gears { width: 100%; max-height: 100%; }
.gears .teeth { fill: none; stroke-width: 18; stroke-linecap: butt; }
.gears .rim   { fill: none; stroke-width: 5; opacity: .5; }
.gears .hub   { fill: none; stroke-width: 6; opacity: .8; }

/* Same tooth pitch on all three, so they read as genuinely meshing. */
.gear-a .teeth { stroke-dasharray: 13 11.74; }
.gear-b .teeth { stroke-dasharray: 13 11.56; }
.gear-c .teeth { stroke-dasharray: 13 11.20; }
.gear-a circle { stroke: var(--primary); }
.gear-b circle { stroke: var(--primary-dim); }
.gear-c circle { stroke: var(--ok); }

/* Speed is inversely proportional to tooth count: 16, 11 and 7 teeth. */
.gear { transform-origin: 0 0; }
.gear-a { animation: gear-cw  16s linear infinite; }
.gear-b { animation: gear-ccw 11s linear infinite; }
.gear-c { animation: gear-cw   7s linear infinite; }
@keyframes gear-cw  { to { transform: rotate(360deg); } }
@keyframes gear-ccw { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .gear { animation: none; } }

.gear-caption {
    font-family: var(--mono); font-size: 1.05rem; color: var(--text-muted); text-align: center;
}

.phase {
    background: rgba(255,255,255,.05); border: 1px solid var(--glass-border);
    border-left: .3rem solid var(--text-muted); border-radius: .5rem;
    padding: .7rem 1rem; margin-bottom: .6rem;
}
.phase:last-child { margin-bottom: 0; }
.phase h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: .1rem; }
.phase.before { border-left-color: var(--bad); }
.phase.before h3 { color: var(--bad); }
.phase.during { border-left-color: var(--primary); background: rgba(255,215,0,.09); }
.phase.during h3 { color: var(--primary); }
.phase.after { border-left-color: var(--ok); }
.phase.after h3 { color: var(--ok); }

/* ================= THE CLICK: reveal one card at a time ================= */
.reveal-row { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.reveal-card {
    width: 7.5rem; height: 8rem; border-radius: .8rem;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 4rem; font-weight: 700;
    background: rgba(255,255,255,.05); border: .14rem solid var(--glass-border);
    color: #4f525a; transition: all .25s;
}
.reveal-card.shown { color: var(--text-main); background: rgba(255,255,255,.08); }
.reveal-card.seen { opacity: .45; }
.reveal-card.current {
    background: rgba(255,215,0,.2); border-color: var(--primary);
    color: var(--primary); transform: translateY(-.5rem); opacity: 1;
}
.reveal-card.best {
    background: rgba(74,224,127,.22); border-color: var(--ok); color: var(--ok); opacity: 1;
}
.reveal-card.wrong-pick { animation: shake .4s; border-color: var(--bad); background: rgba(255,107,107,.18); }
/* only clickable while the race is on */
.reveal-row.live .reveal-card { cursor: pointer; }
.reveal-row.live .reveal-card:hover { border-color: var(--primary); transform: translateY(-.25rem); }

.memory-box {
    background: rgba(0,0,0,.45); border: 1px solid var(--glass-border);
    border-radius: .6rem; padding: .8rem 1.1rem;
    display: flex; flex-direction: column; gap: .3rem; align-items: center;
}
.mem-slot { display: flex; align-items: baseline; gap: .8rem; }
.mem-slot span { font-family: var(--mono); color: var(--text-muted); font-size: 1.6rem; }
.mem-slot b { font-family: var(--mono); font-size: 2.4rem; color: var(--primary); line-height: 1; }

#s-ds-stack .code-panel { font-size: 1rem; line-height: 1.42; }

/* ================= APPROACH CARDS (TSP options) ================= */
.approach-stack {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    justify-content: center; gap: 1rem; overflow: auto;
}
.approach {
    background: rgba(255,255,255,.05); border: 1px solid var(--glass-border);
    border-left: .3rem solid var(--text-muted); border-radius: .5rem; padding: 1rem 1.2rem;
}
.approach h3 { font-size: 1.6rem; font-weight: 800; display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; }
.approach .meta { font-family: var(--mono); font-weight: 700; }
.approach .note { margin-top: .2rem; }
.approach.bad-a  { border-left-color: var(--bad); }
.approach.bad-a h3, .approach.bad-a .meta { color: var(--bad); }
.approach.warn-a { border-left-color: var(--warn); }
.approach.warn-a h3, .approach.warn-a .meta { color: var(--warn); }
.approach.ok-a   { border-left-color: var(--ok); }
.approach.ok-a h3, .approach.ok-a .meta { color: var(--ok); }

/* Slides 2 and 3 are narrative and carry little content, so they get a
   larger reading size than the data-heavy slides. */
#s-vs .text-block h3 { font-size: 2.4rem; margin-bottom: 1.2rem; }
#s-vs .tick-list { gap: .85rem; }
#s-vs .tick-list li { font-size: 1.65rem; padding-left: 1.5rem; }

#s-theclick .phase { padding: .9rem 1.2rem; }
#s-theclick .phase h3 { font-size: 1.65rem; }
#s-theclick .phase .note { font-size: 1.42rem; }
#s-theclick .col-side .note { font-size: 1.4rem; }
#s-theclick .gear-caption { font-size: 1.15rem; }

/* ================= MAP ================= */
.map-container {
    flex: 1; border-radius: .8rem; border: 1px solid var(--glass-border);
    overflow: hidden; background: rgba(0,0,0,.3);
    background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 20px 20px; min-height: 0;
}
#map-svg { width: 100%; height: 100%; display: block; }
.country-path { fill: rgba(255,255,255,.09); stroke: rgba(255,255,255,.34); stroke-width: 2; }
.city-marker {
    fill: var(--text-main); stroke: var(--bg-darker); stroke-width: 2; cursor: pointer;
    transition: all .3s ease; filter: drop-shadow(0 0 .5rem rgba(255,255,255,.25));
}
.city-marker:hover, .city-marker.visited { fill: var(--primary); filter: drop-shadow(0 0 .8rem var(--primary-glow)); }
.city-marker.optimal, .city-marker.optimal:hover {
    fill: var(--ok); filter: drop-shadow(0 0 .9rem rgba(74,224,127,.65));
}
.city-label { fill: var(--text-main); font-weight: 700; font-family: 'Inter', sans-serif;
    text-shadow: 0 2px 4px #000; pointer-events: none; }
#path-display { font-family: var(--mono); font-size: 1.4rem; line-height: 1.5; }

.road-block {
    background: rgba(255,255,255,.04); border: 1px solid var(--glass-border);
    border-left: .3rem solid var(--text-muted); border-radius: .5rem;
    padding: .7rem 1rem .5rem; margin-bottom: .9rem;
}
.road-block:last-child { margin-bottom: 0; }
.road-block.warn-road { border-left-color: var(--warn); }
.road-block.warn-road .panel-title { color: var(--warn); }
.road-block.ok-road { border-left-color: var(--ok); }
.road-block.ok-road .panel-title { color: var(--ok); }
.road { width: 100%; max-height: 12rem; display: block; }
.road .road-base line { stroke: rgba(255,255,255,.25); stroke-width: 3; }
.road .road-arc path { fill: none; stroke-width: 3.4; stroke-linecap: round; }
.road .warn-arc path { stroke: var(--warn); }
.road .ok-arc path { stroke: var(--ok); }
.road .road-stop circle { fill: var(--bg-dark); stroke: var(--text-muted); stroke-width: 3; }
.road .road-stop circle.start { fill: var(--primary); stroke: var(--primary); }
.road .road-label text { fill: var(--text-muted); font-family: var(--mono); font-size: 19px; }
.road-sum { font-family: var(--mono); font-size: 1.15rem; color: var(--text-muted); text-align: center; }
.road-sum b { color: var(--text-main); }

.catch-line {
    font-size: 1.7rem; line-height: 1.3; color: var(--text-main);
    text-align: center; margin-bottom: .2rem; flex-shrink: 0;
}
.hl-ok { color: var(--ok); }
.hl-warn { color: var(--warn); }
.hl-bad { color: var(--bad); }
.cellrow { width: 100%; max-height: 5rem; display: block; }
.cellrow rect { stroke-width: 2.4; }
.cellrow .gone { fill: rgba(255,255,255,.03); stroke: rgba(255,255,255,.13); }
.cellrow .keep { fill: rgba(74,224,127,.18); stroke: var(--ok); }
.cellrow .live { fill: rgba(255,176,77,.18); stroke: var(--warn); }
.cellrow text { font-family: var(--mono); font-size: 20px; font-weight: 700; }
.cellrow .t-gone { fill: #45484f; }
.cellrow .t-keep { fill: var(--ok); }
.cellrow .t-live { fill: var(--warn); }
#s-halving .note { font-size: 1.22rem; }
#s-halving .road-sum { font-size: 1.25rem; }

/* Commentary here runs from one line to three as the demo talks. Pin its
   height so the cards below never get squeezed mid-run. */
#s-click .explanation-panel { height: 5.4rem; }

.table-cap {
    font-size: .95rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--primary); margin-bottom: .1rem;
}

/* ---- delivery-driver scoreboard ---- */
.tsp-log { display: flex; flex-direction: column; gap: .3rem; overflow: auto; min-height: 0; }
.tsp-try {
    display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
    font-family: var(--mono); font-size: 1.15rem;
    padding: .3rem .6rem; border-radius: .35rem;
    background: rgba(255,255,255,.04); border: 1px solid transparent; color: var(--text-muted);
}
.tsp-try .tsp-len { font-weight: 700; color: var(--text-main); }
.tsp-try.lead { background: rgba(255,215,0,.13); border-color: rgba(255,215,0,.4); color: var(--primary); }
.tsp-try.lead .tsp-len { color: var(--primary); }
.tsp-try.best { background: rgba(74,224,127,.18); border-color: var(--ok); color: var(--ok); }
.tsp-try.best .tsp-len { color: var(--ok); }
#s-map .explanation-panel { height: 6rem; }

/* Java lines are long; give the code column room on these two slides. */
#s-twosum .col-main { flex: 1; }
#s-twosum .col-side { flex: 1.2; }
#io-code { font-size: 1.05rem; line-height: 1.42; }

#s-greedy .col-main { flex: 1.85; }
#s-greedy .road-block { padding: .8rem 1.2rem .6rem; }

/* ================= DOT GRIDS ================= */
.grid-container {
    flex: 1; display: grid; gap: .4rem; padding: 1rem;
    background: rgba(0,0,0,.3); border-radius: .8rem;
    border: 1px solid var(--glass-border); min-height: 0;
    justify-content: center; align-content: center;
}
.dot {
    background-color: var(--primary); border-radius: 50%; width: 100%; height: 100%;
    cursor: pointer; transition: transform .2s, background-color .2s, opacity .2s;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: #000; font-family: var(--mono);
}
.binary-grid .dot { font-size: 1.15rem; }
.dot:hover { transform: scale(1.15); }
.bucket-row.pickable .bucket-item { cursor: pointer; }
.bucket-row.pickable .bucket-item:hover { background: rgba(255,215,0,.25); border-color: var(--primary); color: var(--primary); }
.binary-grid.pickable .dot { cursor: pointer; outline: .1rem solid transparent; }
.binary-grid.pickable .dot:hover { background-color: #fff; transform: scale(1.3); box-shadow: 0 0 .7rem #fff; }
.dot.target { background-color: var(--bad); }
.dot.scanned { background-color: rgba(255,215,0,.2); color: #555; }
.dot.scanning { background-color: #fff; transform: scale(1.3); box-shadow: 0 0 .7rem #fff; }
.dot.eliminated { background-color: rgba(255,255,255,.07); color: #3a3a3a; }
.dot.candidate { background-color: rgba(255,215,0,.8); }

.var-watch { display: flex; gap: .5rem; flex-shrink: 0; }
.var {
    flex: 1; background: #101115; border: 1px solid var(--glass-border); border-radius: .45rem;
    padding: .4rem; text-align: center; font-family: var(--mono);
}
.var span { display: block; font-size: .85rem; text-transform: uppercase; color: var(--text-muted); letter-spacing: .06em; }
.var b { font-size: 1.8rem; color: var(--primary); }

/* ================= SORT ================= */
.array-container {
    flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: .55rem;
    padding: 1rem; background: rgba(0,0,0,.3); border-radius: .8rem;
    border: 1px solid var(--glass-border); min-height: 0;
}
.array-bar {
    width: 3.4rem; background: linear-gradient(to top, rgba(255,215,0,.25), var(--primary));
    border-radius: .35rem .35rem 0 0; display: flex; justify-content: center; align-items: flex-start;
    padding-top: .3rem; color: #101010; font-weight: 900; font-size: 1.5rem; min-height: 2.6rem;
    transition: all .3s cubic-bezier(.4,0,.2,1); cursor: pointer;
}
.array-bar:hover { filter: brightness(1.2); }
.array-bar.selected { background: linear-gradient(to top, rgba(255,255,255,.25), #fff); }
.array-bar.comparing { background: linear-gradient(to top, rgba(255,150,50,.25), #ff9933); color: #fff; }
.array-bar.error { background: linear-gradient(to top, rgba(255,60,60,.25), var(--bad)); color: #fff; animation: shake .4s; }
.array-bar.sorted { background: linear-gradient(to top, rgba(74,224,127,.25), var(--ok)); color: #06301a; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

.custom-dropdown { position: relative; user-select: none; min-width: 11rem; }
.dropdown-selected {
    background: rgba(255,255,255,.06); color: var(--text-main);
    padding: .6rem 2rem .6rem 1rem; cursor: pointer; border: 1px solid var(--glass-border);
    border-radius: .45rem; font-size: 1.05rem; font-weight: 600;
}
.dropdown-selected::after {
    content: "\25BE"; position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); color: var(--text-muted);
}
.dropdown-selected:hover, .custom-dropdown.active .dropdown-selected { border-color: var(--primary); }
.dropdown-options {
    position: absolute; bottom: calc(100% + .4rem); left: 0; right: 0;
    background: var(--bg-dark); border: 1px solid var(--primary); border-radius: .45rem;
    overflow: hidden; display: none; z-index: 50;
}
.custom-dropdown.active .dropdown-options { display: block; }
.dropdown-option { padding: .6rem 1rem; cursor: pointer; color: var(--text-main); font-size: 1.05rem; }
.dropdown-option:hover { background: rgba(255,215,0,.22); }

/* ================= CHART ================= */
#chart-container {
    flex: 1; min-height: 0; background: rgba(0,0,0,.3); border-radius: .8rem;
    border: 1px solid var(--glass-border); padding: .7rem;
}

.cmp-table td:first-child { color: var(--text-muted); font-family: 'Inter', sans-serif; font-weight: 700; }
.cmp-table tr:first-child td { color: var(--primary); font-size: .85em; font-family: 'Inter', sans-serif; }
.cmp-table td { text-align: right; font-family: var(--mono); }
.cmp-table td:first-child { text-align: left; }

.bigo-table td.bigo { color: var(--primary); font-weight: 700; white-space: nowrap; }
.bigo-table td:nth-child(2) { color: var(--text-main); font-family: 'Inter', sans-serif; text-align: left; font-size: .92em; }
.bigo-table td:nth-child(3) { text-align: right; font-family: 'Inter', sans-serif; font-size: .72em; font-style: italic; }

/* ================= CONSTRAINTS ================= */
.n-picker { display: flex; flex-wrap: wrap; gap: .5rem; flex-shrink: 0; justify-content: center; }
.n-chip {
    font-family: var(--mono); font-size: 1.2rem; padding: .5rem 1rem;
    background: rgba(255,255,255,.06); border: 1px solid var(--glass-border);
    border-radius: .45rem; cursor: pointer; transition: all .15s; color: var(--text-main);
}
.n-chip:hover { border-color: var(--primary); }
.n-chip.active { background: var(--primary); color: #101010; border-color: var(--primary); font-weight: 700; }
.verdict-grid {
    flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem;
    align-content: center; min-height: 0; overflow: auto;
}
.verdict {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    padding: .55rem 1rem; border-radius: .55rem; border: 1px solid var(--glass-border);
    background: rgba(255,255,255,.035); transition: all .25s;
}
.verdict .vc { font-family: var(--mono); font-weight: 700; font-size: 1.6rem; }
.verdict .vops { font-family: var(--mono); font-size: 1.05rem; color: var(--text-muted); }
.verdict .vtag {
    /* A block here stretched the pill to whatever the ops number happened to be,
       so the coloured background resized every time N changed. */
    display: inline-block; min-width: 6.2rem; text-align: center;
    font-size: .95rem; font-weight: 800; padding: .15rem .55rem; border-radius: 1rem;
    white-space: nowrap;
}
.verdict.good { border-color: rgba(74,224,127,.5); background: rgba(74,224,127,.09); }
.verdict.good .vtag { background: rgba(74,224,127,.22); color: var(--ok); }
.verdict.good .vc { color: var(--ok); }
.verdict.tight { border-color: rgba(255,176,77,.5); background: rgba(255,176,77,.09); }
.verdict.tight .vtag { background: rgba(255,176,77,.22); color: var(--warn); }
.verdict.tight .vc { color: var(--warn); }
.verdict.dead { border-color: rgba(255,107,107,.4); background: rgba(255,107,107,.07); opacity: .8; }
.verdict.dead .vtag { background: rgba(255,107,107,.22); color: var(--bad); }
.verdict.dead .vc { color: var(--bad); }

/* ================= QUIZ ================= */
.quiz-options { display: flex; flex-direction: column; gap: .5rem; flex-shrink: 0; }
.quiz-opt {
    text-align: left; padding: .7rem 1rem; border-radius: .5rem;
    border: 1px solid var(--glass-border); background: rgba(255,255,255,.05);
    color: var(--text-main); font-family: var(--mono); font-size: 1.45rem; font-weight: 700;
    cursor: pointer; transition: all .15s;
}
.quiz-opt:hover:not(.locked) { border-color: var(--primary); background: rgba(255,215,0,.12); }
.quiz-opt.correct { background: rgba(74,224,127,.2); border-color: var(--ok); color: var(--ok); }
.quiz-opt.incorrect { background: rgba(255,107,107,.18); border-color: var(--bad); color: var(--bad); }
.quiz-opt.locked { cursor: default; }

/* ================= MEMORY ================= */
.memory-container {
    flex: 1; display: flex; gap: 1.2rem; background: rgba(0,0,0,.3);
    border-radius: .8rem; border: 1px solid var(--glass-border); padding: 1rem; min-height: 0;
}
.ram-stick {
    width: 7rem; background: #1a1b1f; border: .12rem solid #3a3d45; border-radius: .4rem;
    display: flex; flex-direction: column-reverse; padding: .4rem .4rem 1.5rem;
    position: relative; overflow: hidden; flex-shrink: 0;
}
#ram-blocks { display: flex; flex-direction: column-reverse; gap: .2rem; width: 100%; overflow: hidden; }
.ram-label { position: absolute; bottom: .3rem; left: 0; right: 0; text-align: center; color: #71747d;
    font-size: .85rem; letter-spacing: .15em; font-weight: 800; }
.ram-block { width: 100%; height: .9rem; border-radius: .15rem; flex-shrink: 0; opacity: 0; transition: opacity .2s; }

/* ================= TOOLBOX ================= */
.ds-grid { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; align-content: start; overflow: auto; min-height: 0; }
.ds-card {
    background: rgba(255,255,255,.05); border: 1px solid var(--glass-border);
    border-radius: .6rem; padding: .7rem .9rem; cursor: pointer; transition: all .2s;
}
.ds-card:hover { border-color: rgba(255,215,0,.45); background: rgba(255,215,0,.07); }
.ds-card.active { border-color: var(--primary); background: rgba(255,215,0,.14); }
.ds-name { font-weight: 800; font-size: 1.35rem; }
.ds-tag { font-size: 1rem; color: var(--text-muted); line-height: 1.25; margin-top: .05rem; }
.op-table { width: 100%; border-collapse: collapse; font-size: 1.15rem; font-family: var(--mono); }
.op-table td { padding: .3rem .3rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.op-table td:last-child { text-align: right; font-weight: 700; }
.mini-ops td.ok { color: var(--ok); }
.mini-ops td.bad { color: var(--bad); }
.mini-ops td.warn { color: var(--warn); }

.ds-grid.big-grid {
    grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
    gap: 1rem; align-content: stretch;
}
.big-grid .ds-card {
    cursor: default; padding: 1.1rem 1.4rem;
    border-left: .3rem solid var(--primary);
    display: flex; align-items: center; gap: 1.2rem;
}
.big-grid .ds-card:hover { border-color: var(--glass-border); border-left-color: var(--primary); background: rgba(255,255,255,.05); }
.ds-num {
    font-family: var(--mono); font-size: 2.6rem; font-weight: 700;
    color: var(--primary); opacity: .45; line-height: 1; flex-shrink: 0;
}
.ds-body { flex: 1; min-width: 0; }
.big-grid .ds-name { font-size: 1.75rem; color: var(--primary); }
.big-grid .ds-tag { font-size: 1.2rem; margin-bottom: .55rem; }
.mini-ops { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 1.2rem; }
.mini-ops td { padding: .22rem 0; color: var(--text-muted); border-top: 1px solid rgba(255,255,255,.06); }
.mini-ops td:last-child { text-align: right; font-weight: 700; }

/* ---- hash map buckets ---- */
.bucket-row { display: flex; gap: .5rem; justify-content: center; align-items: stretch; }
.bucket {
    flex: 1; min-width: 0; min-height: 8rem;
    background: rgba(255,255,255,.04); border: 1px solid var(--glass-border);
    border-radius: .5rem; padding: .4rem; display: flex; flex-direction: column;
    align-items: center; gap: .3rem; transition: all .25s;
}
.bucket.active { border-color: var(--primary); background: rgba(255,215,0,.14); }
.bucket-idx { font-family: var(--mono); font-size: 1.1rem; color: var(--text-muted); font-weight: 700; }
.bucket-items { display: flex; flex-direction: column; gap: .25rem; width: 100%; }
.bucket-item {
    font-family: var(--mono); font-size: .95rem; text-align: center;
    background: rgba(124,188,245,.2); border: 1px solid rgba(124,188,245,.45);
    color: #c7e3ff; border-radius: .25rem; padding: .15rem .2rem;
    overflow: hidden; text-overflow: ellipsis;
}
.bucket-item.match { background: rgba(74,224,127,.3); border-color: var(--ok); color: var(--ok); }

/* ---- stack / queue ---- */
.stack-box {
    display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-start;
    gap: .4rem; min-height: 14rem;
}
.stack-item {
    width: 14rem; padding: .5rem; border-radius: .4rem; text-align: center;
    font-family: var(--mono); font-size: 1.5rem; font-weight: 700;
    background: rgba(255,215,0,.16); border: 1px solid rgba(255,215,0,.35); color: var(--primary);
    position: relative;
}
.stack-item.top { background: rgba(74,224,127,.22); border-color: var(--ok); color: var(--ok); }
.queue-box { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 6rem; }
.queue-item {
    width: 5rem; padding: .7rem .3rem; border-radius: .4rem; text-align: center;
    font-family: var(--mono); font-size: 1.6rem; font-weight: 700;
    background: rgba(255,215,0,.16); border: 1px solid rgba(255,215,0,.35); color: var(--primary);
    position: relative;
}
.queue-item.front { background: rgba(74,224,127,.22); border-color: var(--ok); color: var(--ok); }
.queue-item.back { background: rgba(124,188,245,.2); border-color: rgba(124,188,245,.5); color: #c7e3ff; }
.stack-item .tag, .queue-item .tag {
    position: absolute; white-space: nowrap; font-family: 'Inter', sans-serif;
    font-size: .85rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .8;
}
.stack-item .tag { right: .7rem; top: 50%; transform: translateY(-50%); }
.queue-item .tag { top: calc(100% + .3rem); left: 50%; transform: translateX(-50%); }
.empty-note { color: #5a5d66; font-family: var(--mono); font-size: 1.3rem; }

/* ================= FRAMEWORK ================= */
.flow-container { flex: 1; display: flex; flex-direction: column; gap: .45rem; overflow: auto; min-height: 0; }
.flow-step {
    background: rgba(255,255,255,.05); padding: .6rem .9rem; border-radius: .5rem;
    border: 1px solid var(--glass-border); cursor: pointer; transition: all .2s;
    border-left: .25rem solid rgba(255,255,255,.12);
}
.flow-step:hover { background: rgba(255,215,0,.08); border-left-color: var(--primary-dim); }
.flow-step.active { background: rgba(255,215,0,.15); border-left-color: var(--primary); }
.flow-step h3 { font-size: 1.35rem; color: var(--primary); font-weight: 700; }
.problem-card {
    background: rgba(124,188,245,.08); border: 1px solid rgba(124,188,245,.35);
    border-radius: .6rem; padding: .8rem 1rem; flex-shrink: 0;
}
.problem-card .panel-title { color: var(--blue); }
.prob-statement { font-size: 1.2rem; line-height: 1.4; margin-top: .3rem; color: var(--text-main); }

/* ================= ARRAY CELLS ================= */
.stage {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    justify-content: center; gap: 1rem; overflow: auto;
    background: rgba(0,0,0,.3); border: 1px solid var(--glass-border);
    border-radius: .8rem; padding: 1rem;
}
.ts-array { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }
.cell {
    min-width: 2.8rem; flex: 0 1 auto; padding: .5rem .25rem .25rem; border-radius: .45rem; text-align: center;
    background: rgba(255,255,255,.06); border: 1px solid var(--glass-border);
    font-family: var(--mono); font-size: 1.7rem; font-weight: 700; transition: all .2s;
}
.cell .idx { display: block; font-size: .8rem; color: #6c6f78; font-weight: 400; }
.cell.i-ptr { background: rgba(255,215,0,.25); border-color: var(--primary); color: var(--primary); transform: translateY(-.3rem); }
.cell.j-ptr { background: rgba(124,188,245,.22); border-color: var(--blue); color: var(--blue); }
.cell.hit { background: rgba(74,224,127,.28); border-color: var(--ok); color: var(--ok); transform: translateY(-.5rem) scale(1.05); }
.cell.win { background: rgba(74,224,127,.2); border-color: rgba(74,224,127,.65); }
.cell.dimmed { opacity: .3; }
.hashmap-view {
    background: rgba(0,0,0,.4); border: 1px solid var(--glass-border); border-radius: .6rem;
    padding: .7rem .9rem; min-height: 5rem;
}
.map-entries { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.map-entry {
    font-family: var(--mono); font-size: 1.15rem; padding: .2rem .55rem; border-radius: .3rem;
    background: rgba(124,188,245,.18); border: 1px solid rgba(124,188,245,.4); color: #c7e3ff;
}
.map-entry.match { background: rgba(74,224,127,.28); border-color: var(--ok); color: var(--ok); }
.kd-bars { display: flex; gap: .4rem; justify-content: center; align-items: flex-end; height: 5rem; }
.kd-bar { min-width: 2.7rem; flex: 0 1 auto; background: rgba(255,215,0,.22); border-radius: .2rem; transition: all .25s; }
.kd-bar.in-window { background: var(--primary); }
.kd-bar.in-best { background: var(--ok); }

/* ================= PSEUDOCODE ================= */
.task-picker { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .7rem; flex-shrink: 0; }
.editor-pane {
    flex: 1; min-width: 0; background: rgba(0,0,0,.4); border: 1px solid var(--glass-border);
    border-radius: .6rem; padding: .8rem 1rem; display: flex; flex-direction: column; min-height: 0;
}
.pane-title { font-size: .95rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .35rem; }
.pane-title.pseudo { color: var(--primary); }
.pane-title.real { color: var(--blue); }
.pane-body { flex: 1; overflow: auto; font-family: var(--mono); font-size: 1.2rem; line-height: 1.4; color: #d8dbe3; min-height: 0; }
.pane-body .dim { white-space: normal; display: block; line-height: 1.45; font-family: 'Inter', sans-serif; font-size: 1.1rem; }

.takeaway-list, .seed-list { list-style: none; display: flex; flex-direction: column; }
.takeaway-list { gap: 1rem; }
.takeaway-list li { display: flex; gap: .9rem; align-items: baseline; font-size: 1.2rem; line-height: 1.4; color: var(--text-muted); }
.takeaway-list .tk-num { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; color: var(--primary); flex-shrink: 0; }
.takeaway-list b { color: var(--text-main); }

.seed-list { gap: .9rem; }
.seed-list li {
    font-size: 1.15rem; line-height: 1.4; color: var(--text-main);
    padding-left: 1.5rem; position: relative; font-style: italic;
}
.seed-list li::before {
    content: "?"; position: absolute; left: 0; top: 0;
    color: var(--primary); font-weight: 900; font-style: normal; font-size: 1.3rem;
}

/* ================= CHECKLIST ================= */
.checklist { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; align-content: start; overflow: auto; min-height: 0; }
.check-item {
    display: flex; gap: .8rem; align-items: flex-start; padding: .7rem .9rem;
    background: rgba(255,255,255,.05); border: 1px solid var(--glass-border);
    border-radius: .5rem; cursor: pointer; transition: all .2s;
}
.check-item:hover { border-color: rgba(255,215,0,.4); }
.check-item.checked { background: rgba(74,224,127,.09); border-color: rgba(74,224,127,.4); }
.check-box {
    width: 1.5rem; height: 1.5rem; border-radius: .3rem; border: .13rem solid var(--text-muted);
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 900; color: transparent; transition: all .2s;
}
.check-item.checked .check-box { background: var(--ok); border-color: var(--ok); color: #06301a; }
.check-title { font-weight: 700; font-size: 1.25rem; color: var(--text-main); }
.check-body { font-size: 1.05rem; color: var(--text-muted); line-height: 1.35; margin-top: .1rem; }

pre.sample-io {
    font-family: var(--mono); font-size: 1.2rem; line-height: 1.45; color: #d8dbe3;
    background: #101115; border: 1px solid var(--glass-border); border-radius: .4rem; padding: .6rem .8rem;
}

/* ================= CHROME ================= */
.controls-overlay {
    position: fixed; bottom: 0; left: 0; width: 100%; padding: .7rem 1.6rem;
    display: flex; justify-content: space-between; align-items: center; z-index: 600;
    background: linear-gradient(to top, rgba(0,0,0,.85), transparent); pointer-events: none;
}
.nav-btn { background: none; border: none; color: var(--text-muted); font-size: 1.05rem; cursor: pointer;
    font-family: inherit; pointer-events: auto; }
.nav-btn:hover { color: var(--primary); }
.progress-bar { width: 18rem; height: .25rem; background: rgba(255,255,255,.12); border-radius: .2rem; overflow: hidden; }
.progress-fill { height: 100%; background: var(--primary); width: 5%; transition: width .3s ease; }

.global-top-bar {
    position: fixed; top: 0; left: 0; width: 100%; padding: .7rem 1.6rem;
    display: flex; justify-content: space-between; align-items: center; z-index: 1000; pointer-events: none;
}
.top-right { display: flex; gap: .5rem; align-items: center; }
.burger-btn {
    background: rgba(0,0,0,.55); border: 1px solid var(--glass-border);
    border-radius: 1rem; width: 3rem; height: 2.05rem; padding: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .26rem; cursor: pointer; pointer-events: auto; transition: border-color .2s, background .2s;
}
.burger-btn span {
    display: block; width: 1.15rem; height: .12rem; border-radius: .1rem;
    background: var(--text-muted); transition: background .2s;
}
.burger-btn:hover { border-color: rgba(255,215,0,.5); background: rgba(255,215,0,.08); }
.burger-btn:hover span { background: var(--primary); }
.slide-counter, .talk-timer {
    background: rgba(0,0,0,.55); border: 1px solid var(--glass-border);
    padding: .25rem .8rem; border-radius: 1rem; font-size: 1.05rem; font-weight: 700;
    pointer-events: auto; font-family: var(--mono);
}
.talk-timer { cursor: pointer; color: var(--text-muted); }
.talk-timer.running { color: var(--primary); border-color: rgba(255,215,0,.45); }

.drawer-scrim {
    position: fixed; inset: 0; z-index: 1900; background: rgba(0,0,0,.6);
    opacity: 0; pointer-events: none; transition: opacity .3s;
}
.drawer-scrim.show { opacity: 1; pointer-events: auto; }

.drawer {
    position: fixed; top: 0; left: 0; width: 24rem; height: 100vh;
    background: #17181c; border-right: 1px solid var(--glass-border); z-index: 2000;
    transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
    display: flex; flex-direction: column;
    box-shadow: 1.5rem 0 3rem rgba(0,0,0,.55);
}
.drawer.open { transform: translateX(0); }
.drawer-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 1.1rem 1.3rem .9rem; border-bottom: 1px solid rgba(255,255,255,.07); flex-shrink: 0;
}
.drawer-title { font-size: 1.1rem; font-weight: 800; color: var(--text-main); line-height: 1.2; }
.drawer-sub { font-family: var(--mono); font-size: .9rem; color: var(--text-muted); margin-top: .15rem; }
.close-btn {
    background: none; border: none; color: var(--text-muted); font-size: 1.7rem;
    cursor: pointer; line-height: 1; padding: 0 .2rem; transition: color .2s;
}
.drawer-list { list-style: none; flex: 1; overflow-y: auto; position: relative; padding-bottom: .6rem; }
.drawer-section {
    font-size: .8rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
    color: var(--primary); opacity: .7; padding: 1.15rem 1.3rem .35rem; cursor: default;
}
.drawer-list > .drawer-section:first-child { padding-top: .75rem; }
.drawer-item {
    display: flex; gap: .75rem; align-items: baseline;
    padding: .4rem 1.3rem; cursor: pointer; color: var(--text-muted);
    font-size: 1.02rem; font-weight: 500; line-height: 1.3;
    border-left: .22rem solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}
.drawer-item .d-num { font-family: var(--mono); font-size: .85rem; color: #55585f; flex-shrink: 0; }
.drawer-item:hover { background: rgba(255,255,255,.055); color: var(--text-main); }
.drawer-item:hover .d-num { color: var(--text-muted); }
.drawer-item.active {
    background: rgba(255,215,0,.13); color: var(--primary);
    border-left-color: var(--primary); font-weight: 700;
}
.drawer-item.active .d-num { color: var(--primary); }
.drawer-footer {
    padding: .85rem 1.3rem; border-top: 1px solid rgba(255,255,255,.07); flex-shrink: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .8rem;
    font-size: .95rem; color: var(--text-muted);
}
.drawer-footer span { display: flex; align-items: center; gap: .35rem; }
kbd {
    font-family: var(--mono); background: rgba(255,255,255,.08);
    border: 1px solid var(--glass-border); border-bottom-width: .12rem;
    border-radius: .25rem; padding: .1em .45em; font-size: .88em;
    color: var(--text-main); line-height: 1;
}

.notes-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
    background: rgba(8,8,10,.97); border-top: .15rem solid var(--primary);
    padding: .8rem 1.6rem 2.6rem; font-size: 1.2rem; line-height: 1.4; color: var(--text-main);
    display: none;
}
.notes-bar.show { display: block; }
.notes-bar b { color: var(--primary); text-transform: uppercase; font-size: .85rem;
    letter-spacing: .1em; display: block; margin-bottom: .2rem; }

::-webkit-scrollbar { width: .4rem; height: .4rem; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: .2rem; }

/* ================= TOOLBOX: ARRAY IN MEMORY ================= */
.mem-row { display: flex; gap: .35rem; justify-content: center; align-items: stretch; width: 100%; }
.mem-cell {
    flex: 1 1 0; min-width: 0; padding: .5rem .15rem .3rem; border-radius: .45rem; text-align: center;
    background: rgba(255,255,255,.06); border: 1px solid var(--glass-border);
    font-family: var(--mono); font-size: 1.7rem; font-weight: 700; color: var(--text-main);
    transition: transform .18s, background .18s, border-color .18s, color .18s, opacity .18s;
}
.mem-row.pickable .mem-cell { cursor: pointer; }
.mem-row.pickable .mem-cell:hover { border-color: var(--primary); background: rgba(255,215,0,.13); }
.mem-cell .idx  { display: block; font-size: .85rem; font-weight: 400; color: #7a7d86; margin-top: .15rem; }
.mem-cell .addr { display: block; font-size: .75rem; font-weight: 400; color: #55585f; }
.mem-cell.hit   { background: rgba(74,224,127,.28); border-color: var(--ok); color: var(--ok); transform: translateY(-.45rem) scale(1.04); }
.mem-cell.scan  { background: rgba(255,215,0,.25); border-color: var(--primary); color: var(--primary); }
.mem-cell.moved { background: rgba(255,107,107,.22); border-color: var(--bad); color: var(--bad); }
.mem-cell.fresh { background: rgba(124,188,245,.2); border-color: var(--blue); color: #c7e3ff; }
.mem-cell.pale  { opacity: .3; }
.addr-formula { text-align: center; font-family: var(--mono); font-size: 1.6rem; color: var(--text-muted); }
.addr-formula b { color: var(--primary); }

/* ---- "how many boxes" job list ---- */
.job-list { display: flex; flex-direction: column; gap: .5rem; }
.job {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    padding: .6rem .85rem; border-radius: .5rem; border: 1px solid var(--glass-border);
    background: rgba(255,255,255,.05); cursor: pointer; transition: all .18s;
}
.job:hover:not(.done) { border-color: var(--primary); background: rgba(255,215,0,.09); }
.job.current { border-color: var(--primary); background: rgba(255,215,0,.15); }
.job.done { cursor: default; }
.job-code { font-family: var(--mono); font-size: 1.3rem; color: var(--text-main); }
.job-sub  { font-size: 1rem; color: var(--text-muted); margin-top: .05rem; }
.job-res  { font-family: var(--mono); font-size: 1.9rem; font-weight: 700; color: #5a5d66; flex-shrink: 0; }
.job-res.cheap { color: var(--ok); }
.job-res.dear  { color: var(--bad); }

/* ================= HASH MAP: THE PIPELINE ================= */
.hash-pipe { display: flex; flex-direction: column; gap: .55rem; align-items: center; width: 100%; }
.pipe-stage {
    display: flex; gap: .4rem; align-items: center; justify-content: center; flex-wrap: wrap;
    min-height: 2.4rem; opacity: .18; transition: opacity .3s;
}
.pipe-stage.on { opacity: 1; }
.letter-chip {
    font-family: var(--mono); text-align: center; padding: .25rem .55rem; border-radius: .35rem;
    background: rgba(124,188,245,.16); border: 1px solid rgba(124,188,245,.4); color: #c7e3ff;
    font-size: 1.6rem; font-weight: 700; line-height: 1.1;
}
.letter-chip span { display: block; font-size: .9rem; font-weight: 400; color: #8fb6da; }
.pipe-eq { font-family: var(--mono); font-size: 1.9rem; font-weight: 700; color: var(--text-main); }
.pipe-eq b { color: var(--primary); }
.pipe-eq .sm { font-size: 1.2rem; color: var(--text-muted); font-weight: 400; }
.slot-row { display: flex; gap: .35rem; justify-content: center; width: 100%; }
.slot {
    flex: 1 1 0; min-width: 0; padding: .5rem .1rem; border-radius: .4rem; text-align: center;
    font-family: var(--mono); font-size: 1.2rem; color: var(--text-muted);
    background: rgba(255,255,255,.05); border: 1px solid var(--glass-border); transition: all .25s;
}
.slot b { display: block; font-size: 1rem; color: var(--text-main); font-weight: 700; min-height: 1.2em; }
.slot.on { background: rgba(74,224,127,.28); border-color: var(--ok); color: var(--ok); transform: translateY(-.3rem); }
.slot.on b { color: var(--ok); }
.word-input {
    font-family: var(--mono); font-size: 1.3rem; padding: .55rem .8rem; border-radius: .45rem;
    background: rgba(255,255,255,.06); border: 1px solid var(--glass-border);
    color: var(--text-main); width: 13rem; outline: none;
}
.word-input:focus { border-color: var(--primary); }

/* ---- duplicate-hunt race ---- */
.seen-box {
    display: flex; flex-wrap: wrap; gap: .3rem; align-content: flex-start;
    min-height: 3.6rem; background: rgba(0,0,0,.25); border: 1px solid var(--glass-border);
    border-radius: .45rem; padding: .4rem;
}
.seen-cap { font-size: .9rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: .25rem; }

/* ================= STACK / QUEUE EXERCISES ================= */
.stack-item.returned { background: rgba(74,224,127,.14); border-color: rgba(74,224,127,.45); color: var(--ok); }
.stack-item small, .queue-item small { display: block; font-size: .85rem; font-weight: 400; opacity: .85; font-family: 'Inter', sans-serif; }

.bracket-str { display: flex; gap: .3rem; justify-content: center; flex-wrap: wrap; }
.br-char {
    font-family: var(--mono); font-size: 2.7rem; font-weight: 700; line-height: 1;
    padding: .35rem .65rem; border-radius: .4rem; color: var(--text-main);
    background: rgba(255,255,255,.05); border: 1px solid var(--glass-border); transition: all .18s;
}
.br-char.on    { background: rgba(255,215,0,.22); border-color: var(--primary); color: var(--primary); transform: translateY(-.35rem); }
.br-char.good  { background: rgba(74,224,127,.22); border-color: var(--ok); color: var(--ok); }
.br-char.wrong { background: rgba(255,107,107,.22); border-color: var(--bad); color: var(--bad); }
.btn.correct-btn { background: rgba(74,224,127,.22); border-color: var(--ok); color: var(--ok); }
.btn.wrong-btn   { background: rgba(255,107,107,.2); border-color: var(--bad); color: var(--bad); }

.flood-grid { display: grid; gap: .22rem; justify-content: center; align-content: center;
    flex: 1; min-height: 0; width: 100%; }
.fcell {
    border-radius: .2rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: .82rem; font-weight: 700; color: #101010; transition: background .15s;
}
.flood-grid.pickable .fcell:not(.wall) { cursor: pointer; }
.flood-grid.pickable .fcell:not(.wall):hover { background: #fff; }
.fcell.wall { background: #2b2d34; border-color: #2b2d34; }
.fcell.frontier { background: #fff; }

/* Column headers were markup only; give them a look so a number column
   can never be mistaken for a data row. */
.data-table tr.head td, .mini-ops tr.head td, .op-table tr.head td {
    color: var(--primary); font-family: 'Inter', sans-serif; font-weight: 800;
    font-size: .78em; text-transform: uppercase; letter-spacing: .07em;
    border-top: none; border-bottom: 1px solid rgba(255,215,0,.28);
}
.queue-item.spent { opacity: .28; }
.queue-item.moved { background: rgba(255,107,107,.22); border-color: var(--bad); color: var(--bad); }
.fcell.exit  { background: rgba(124,188,245,.9); color: #06243d; }
.fcell.start { background: var(--ok); color: #06301a; }
.fcell.path  { background: var(--ok); color: #06301a; }

/* ================= QUESTIONS ================= */
.q-stage {
    flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
    gap: 2.5rem; padding: .5rem 1.5rem;
}
.rand-q {
    flex: 1; min-width: 0; text-align: center;
    font-size: 3rem; font-weight: 800; line-height: 1.25; color: var(--text-main);
}
.rand-q.prompt { font-size: 2.1rem; font-weight: 600; color: var(--text-muted); }
.q-art { flex: 0 0 34%; max-height: 100%; align-self: center; }
.q-art g { fill: none; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.q-art text { stroke: none; fill: currentColor; font-family: 'Inter', sans-serif;
    font-weight: 900; text-anchor: middle; }
.q-art .art-muted { stroke: var(--text-muted); color: var(--text-muted); opacity: .5; }
.q-art .art-gold  { stroke: var(--primary);    color: var(--primary); }

/* ================= THE THREE RULES ================= */
.rule-list { flex: 1; display: flex; flex-direction: column; gap: .8rem; min-height: 0; }
.rule {
    flex: 1; display: flex; align-items: center; gap: 1.2rem;
    padding: .8rem 1.2rem; border-radius: .6rem;
    border: 1px solid var(--glass-border); border-left: .32rem solid var(--primary);
    background: rgba(255,215,0,.09);
}
.rule-num {
    font-family: var(--mono); font-size: 3.2rem; font-weight: 700; line-height: 1.2;
    color: var(--primary); flex-shrink: 0;
}
.rule-body { flex: 1; min-width: 0; }
.rule-name { font-size: 1.55rem; font-weight: 800; color: var(--text-main); line-height: 1.2; }
.rule-ex { display: flex; align-items: center; gap: .45rem; margin-top: .55rem; flex-wrap: wrap; }
.rule-ex .from, .rule-ex .to {
    font-family: var(--mono); font-size: 1.3rem; font-weight: 700;
    padding: .2rem .65rem; border-radius: .35rem; white-space: nowrap;
}
.rule-ex .from { background: rgba(255,255,255,.06); border: 1px solid var(--glass-border); color: var(--text-muted); }
.rule-ex .to   { background: rgba(74,224,127,.18); border: 1px solid rgba(74,224,127,.5); color: var(--ok); }
.rule-ex .arr  { font-weight: 900; font-size: 1.35rem; color: var(--primary); }
.rule-ex .to + .from { margin-left: 1.4rem; }

.rule.r2 {
    border-left-color: var(--warn);
    background: rgba(255,176,77,.09);
}
.rule.r2 .rule-num, .rule.r2 .rule-ex .arr { color: var(--warn); }
.rule.r3 {
    border-left-color: var(--blue);
    background: rgba(124,188,245,.09);
}
.rule.r3 .rule-num, .rule.r3 .rule-ex .arr { color: var(--blue); }

/* The toolbox cards lead with what the thing IS and when you reach for it.
   Costs belong on each structure's own slide, not on the introduction. */
.ds-use {
    font-size: 1.15rem; line-height: 1.35; color: var(--text-muted);
    margin-top: .55rem; padding-top: .5rem; border-top: 1px solid rgba(255,255,255,.09);
}
.ds-use b { color: var(--primary); }

/* The frontier drawn as an actual list, so the queue and the stack are
   visible objects on the slide rather than a claim in the caption. */
.frontier-strip {
    display: flex; align-items: center; justify-content: center; gap: .3rem;
    min-height: 2.8rem; overflow: hidden;
}
.fr-chip {
    font-family: var(--mono); font-size: 1.15rem; font-weight: 700;
    padding: .3rem .55rem; border-radius: .3rem; white-space: nowrap;
    background: rgba(255,255,255,.09); border: 1px solid var(--glass-border); color: var(--text-main);
}
.fr-chip.next { background: var(--primary); border-color: var(--primary); color: #101010; }
.fr-end {
    font-size: .85rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--text-muted); padding: 0 .3rem;
}
.fr-more { color: var(--text-muted); font-family: var(--mono); padding: 0 .1rem; }
.fr-empty { color: #5a5d66; font-family: var(--mono); font-size: 1.15rem; }
/* An empty slot: the thing that actually travels when you insert at the front. */
.mem-cell.gap {
    background: rgba(0,0,0,.45); border-style: dashed;
    border-color: rgba(255,255,255,.35); color: transparent;
    box-shadow: inset 0 0 .8rem rgba(0,0,0,.6);
}

/* ================= STRUCTURE EXPLAINERS (static slides) ================= */
.ds-art { width: 100%; max-height: 100%; display: block; flex: 1; min-height: 0; }
.ds-art text { text-anchor: middle; stroke: none; }
.ds-art .bx      { stroke: rgba(255,255,255,.3); fill: rgba(255,255,255,.05); stroke-width: 2.4; }
.ds-art .bx-hi   { stroke: var(--primary); fill: rgba(255,215,0,.16); stroke-width: 3; }
.ds-art .bx-ok   { stroke: var(--ok); fill: rgba(74,224,127,.16); stroke-width: 3; }
.ds-art .bx-blue { stroke: var(--blue); fill: rgba(124,188,245,.14); stroke-width: 3; }
.ds-art .bx-bad  { stroke: var(--bad); fill: rgba(255,107,107,.12); stroke-width: 3; }
.ds-art .bx-open { stroke: rgba(255,255,255,.22); fill: none; stroke-width: 2.2; stroke-dasharray: 8 8; }
.ds-art .ln-ok   { stroke: var(--ok); stroke-width: 3.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ds-art .ln-blue { stroke: var(--blue); stroke-width: 3.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ds-art .ln-bad  { stroke: var(--bad); stroke-width: 3.2; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 8 7; }
.ds-art .ln-x    { stroke: var(--bad); stroke-width: 3.2; fill: none; stroke-linecap: round; }
.ds-art .ln-dim  { stroke: rgba(255,255,255,.35); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.ds-art .val  { fill: var(--text-main); font-family: var(--mono); font-weight: 700; font-size: 26px; }
.ds-art .val-sm { fill: var(--text-main); font-family: var(--mono); font-weight: 700; font-size: 21px; }
.ds-art .idx  { fill: var(--text-muted); font-family: var(--mono); font-size: 15px; }
.ds-art .cap  { fill: var(--text-muted); font-family: 'Inter', sans-serif; font-weight: 700; font-size: 16px; }
.ds-art .cap-ok   { fill: var(--ok); }
.ds-art .cap-bad  { fill: var(--bad); }
.ds-art .cap-gold { fill: var(--primary); }
.ds-art .cap-blue { fill: var(--blue); }
.art-stage {
    flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.3); border: 1px solid var(--glass-border);
    border-radius: .8rem; padding: 1rem 1.2rem;
}

/* ================= PASSWORD GATE ================= */
.lock-screen {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--bg-dark);
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
    transition: opacity .35s ease, visibility 0s linear 0s;
}
.lock-screen.hidden {
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .35s ease, visibility 0s linear .35s;
}
.lock-card {
    width: min(28rem, 100%); display: flex; flex-direction: column;
    align-items: center; gap: 1.1rem; text-align: center;
}
.lock-logo { height: 3.6rem; object-fit: contain; margin-bottom: .3rem; }
.lock-card h1 {
    font-size: 1.7rem; font-weight: 900; color: var(--text-main); line-height: 1.25;
}
.lock-sub { color: var(--text-muted); font-size: 1rem; margin-top: -.6rem; }
.lock-row { display: flex; gap: .6rem; width: 100%; }
.lock-input {
    flex: 1; min-width: 0; font-family: inherit; font-size: 1.1rem;
    padding: .7rem 1rem; border-radius: .5rem;
    background: rgba(255,255,255,.06); border: 1px solid var(--glass-border);
    color: var(--text-main); outline: none;
}
.lock-input:focus { border-color: var(--primary); }
.lock-error { color: var(--bad); font-size: .95rem; min-height: 1.3em; }
.lock-card.shake { animation: shake .4s; }