:root {
  color-scheme: light;
  --ink: #16213e;
  --muted: #526079;
  --paper: #ffffff;
  --canvas: #f4f6fb;
  --line: #d7ddea;
  --accent: #f3bd32;
  --accent-dark: #7b5400;
  --blue: #2356a8;
  --blue-dark: #173b76;
  --danger-bg: #fff3e3;
  --danger-line: #d77a11;
  --radius: 1rem;
  --shadow: 0 1rem 2.5rem rgba(22, 33, 62, .1);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); line-height: 1.65; }
a { color: var(--blue-dark); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .14em; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: .22rem solid var(--accent); outline-offset: .18rem; }
h1, h2, h3 { line-height: 1.14; letter-spacing: -.02em; }
h1 { max-width: 17ch; margin: .35rem 0 1rem; font-size: clamp(2.5rem, 7vw, 5.7rem); }
h2 { margin: .2rem 0 1rem; font-size: clamp(1.75rem, 4vw, 2.7rem); }
h3 { margin-bottom: .4rem; }
p, li, dd { max-width: 76ch; }
code { padding: .1em .32em; border-radius: .25rem; background: #edf0f7; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
pre { overflow-x: auto; padding: 1.2rem; border-radius: .75rem; color: #edf4ff; background: #111a31; }
pre code { padding: 0; color: inherit; background: transparent; }
.code-snippet { margin: 1.5rem 0; overflow: hidden; border: 1px solid var(--ink); border-radius: .75rem; background: #111a31; }
.code-snippet figcaption { padding: .55rem 1rem; border-bottom: 1px solid #4b5a7a; color: #edf4ff; background: #1b294a; font-size: .88rem; font-weight: 800; }
.code-snippet figcaption code { color: inherit; background: transparent; }
.code-snippet pre { margin: 0; border-radius: 0; }

.skip-link { position: fixed; z-index: 100; top: .75rem; left: .75rem; padding: .65rem 1rem; color: var(--ink); background: var(--accent); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.site-header { padding: 1rem clamp(1rem, 4vw, 3rem); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); }
.day-header { position: sticky; z-index: 10; top: 0; display: flex; gap: 1rem 2rem; align-items: center; justify-content: space-between; box-shadow: 0 .25rem .75rem rgba(20, 33, 61, .08); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .35rem .65rem; align-items: center; font-size: .92rem; }
.day-controls { display: flex; flex-wrap: wrap; gap: .6rem; }
.day-controls label { display: grid; gap: .15rem; color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.day-controls select { min-width: 12rem; padding: .5rem .7rem; border: 1px solid #aab5c8; border-radius: .4rem; color: var(--ink); background: white; font: inherit; font-size: .9rem; font-weight: 600; letter-spacing: normal; text-transform: none; }

main, .page-nav { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 7vw, 6rem); align-items: end; min-height: 36rem; padding: clamp(4rem, 9vw, 8rem) 0; }
.eyebrow, .section-kicker, .section-number, .day-number { color: var(--accent-dark); font-size: .78rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.lead { max-width: 62ch; color: #35435f; font-size: clamp(1.12rem, 2vw, 1.35rem); }
.promise { padding: 1.5rem; border-top: .45rem solid var(--accent); border-radius: .25rem .25rem var(--radius) var(--radius); background: var(--ink); color: white; box-shadow: var(--shadow); }
.promise h2 { font-size: 1.35rem; }
.promise p { margin-bottom: 0; color: #e6ebf6; }
.hero-actions, .day-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.button { display: inline-block; padding: .7rem 1rem; border: 1px solid var(--ink); border-radius: .45rem; color: var(--ink); background: white; font-weight: 800; text-decoration: none; }
.button-primary { background: var(--accent); }
.button[aria-disabled="true"] { color: var(--muted); border-color: #aab5c8; cursor: not-allowed; }

.course-builder, .prerequisite, .outcomes, .days, .method { margin-bottom: 2rem; padding: clamp(1.5rem, 5vw, 4rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.course-builder { border-top: .45rem solid var(--accent); }
.prerequisite { border-left: .55rem solid var(--blue); }
.topic-list { display: grid; gap: 1rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.topic-list a { display: grid; gap: .35rem; padding: 1.25rem; border: 2px solid var(--ink); border-radius: .8rem; color: var(--ink); background: linear-gradient(145deg, #fff 60%, #fff8dd); text-decoration: none; }
.topic-list a:hover, .topic-list a:focus-visible { border-color: var(--blue); box-shadow: 0 .45rem 0 var(--ink); transform: translateY(-.1rem); }
.topic-list strong { font-size: clamp(1.35rem, 3vw, 2rem); }
.topic-list a > :last-child { color: var(--muted); }
.outcome-grid, .day-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.outcome-grid article { padding: 1.25rem; border: 1px solid var(--line); border-radius: .7rem; }
.outcome-grid article > span { color: var(--blue); font-size: 1.55rem; font-weight: 900; }
.outcome-grid h3 { margin-top: .3rem; }
.day-card { display: block; padding: clamp(1.4rem, 4vw, 2.4rem); border: 2px solid var(--ink); border-radius: .8rem; color: var(--ink); background: linear-gradient(145deg, #fff 60%, #fff8dd); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.day-card:hover { transform: translateY(-.2rem); box-shadow: 0 .8rem 0 var(--ink); }
.day-card h3 { font-size: clamp(1.4rem, 3vw, 2.1rem); }
.day-card strong { color: var(--blue-dark); }
.method-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; padding: 0; list-style: none; counter-reset: method; }
.method-steps li { display: grid; gap: .35rem; padding: 1rem; border-top: .3rem solid var(--accent); background: var(--canvas); counter-increment: method; }
.method-steps li::before { content: "0" counter(method); color: var(--blue); font-weight: 900; }
.method-steps span { color: var(--muted); }
.callout { padding: 1rem 1.2rem; border-left: .35rem solid var(--accent); background: #fff8dd; }

.day-main { margin-top: 2rem; }
.day-intro { padding: clamp(2rem, 6vw, 5rem); border-radius: var(--radius); background: var(--ink); color: white; box-shadow: var(--shadow); }
.day-intro h1 { font-size: clamp(2.3rem, 6vw, 5rem); }
.day-intro .lead { color: #e0e6f1; }
.lab-preview { margin: 2rem 0; padding: clamp(.6rem, 2vw, 1rem); border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow); }
.lab-preview img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius) - .4rem); }
.lab-preview figcaption { max-width: 76ch; padding: .8rem .35rem .1rem; color: var(--muted); font-size: .92rem; }
.evidence-preview { margin: 1.5rem 0; padding: .6rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--canvas); }
.evidence-preview img { display: block; width: 100%; height: auto; border-radius: .45rem; }
.meme-preview { width: min(100%, 25rem); margin-inline: auto; }
.memory-tool-preview { width: min(100%, 49rem); margin-inline: auto; }
.render-mode-preview { width: min(100%, 40rem); margin-inline: auto; }
.throttle-preview { width: min(100%, 20rem); margin-inline: auto; }
.allocation-timeline-preview { width: min(100%, 75rem); margin-inline: auto; }
.arcade-preview { width: min(100%, 72.25rem); margin-inline: auto; }
.leak-spoiler { margin: .85rem 0; padding: .8rem .95rem; border: 1px solid #d9bb6b; border-radius: .65rem; background: #fff8dd; }
.leak-spoiler summary { cursor: pointer; color: var(--blue-dark); font-weight: 900; }
.leak-spoiler summary::marker { color: var(--accent-dark); }
.leak-spoiler:not([open]) .leak-spoiler-title { display: none; }
.leak-spoiler[open] summary { margin-bottom: .65rem; }
.leak-spoiler p { margin: 0 0 .75rem; }
.leak-spoiler .code-snippet { margin: 0; }
.evidence-preview figcaption { padding: .7rem .35rem .15rem; color: var(--muted); font-size: .92rem; }
.gc-stages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.gc-stage { min-width: 0; margin: 0; }
.gc-stage svg { display: block; width: 100%; height: auto; }
.gc-stage figcaption { padding: .65rem .3rem 0; color: var(--muted); font-size: .9rem; }
.gc-surface { fill: var(--canvas); stroke: var(--line); stroke-width: 2; }
.gc-root { fill: var(--ink); }
.gc-node { fill: white; stroke: var(--blue); stroke-width: 4; }
.gc-node-a { fill: #fff4cc; stroke: var(--accent-dark); }
.gc-edge { fill: none; stroke: var(--blue-dark); stroke-width: 3; }
.gc-arrow-head { fill: var(--blue-dark); }
.gc-island { fill: #fff8dd; stroke: var(--accent-dark); stroke-width: 2; stroke-dasharray: 8 7; }
.gc-heading { fill: var(--ink); font-size: 22px; font-weight: 900; }
.gc-label, .gc-node-letter { fill: var(--ink); font-size: 22px; font-weight: 900; }
.gc-label-light { fill: white; font-size: 17px; }
.gc-note { fill: var(--muted); font-size: 15px; font-weight: 700; }
.gc-result { font-size: 18px; font-weight: 900; }
.gc-result-live { fill: var(--blue-dark); }
.gc-result-gone { fill: var(--accent-dark); }
.memory-map-card { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.memory-map-summary { display: grid; gap: .45rem; margin: 0 0 1.5rem; padding-left: 1.4rem; }
.memory-map-summary li { margin: 0; }
.memory-leak-examples { display: grid; gap: .45rem; margin: .75rem 0 1.5rem; padding-left: 1.4rem; }
.memory-leak-examples li { margin: 0; }
.lab-meme { width: min(26rem, 100%); margin: 1rem auto 1.5rem; overflow: hidden; border: 1px solid var(--line); border-radius: .7rem; background: white; }
.lab-meme summary { padding: .8rem 1rem; color: var(--ink); cursor: pointer; font-weight: 800; text-align: center; }
.lab-meme[open] summary { border-bottom: 1px solid var(--line); }
.lab-meme img { display: block; width: 100%; height: auto; }
.lab-walkthrough > h3 { margin: 2rem 0 .75rem; font-size: clamp(1.35rem, 3vw, 1.8rem); }
.structure-actions-preview { max-width: 58rem; margin: .75rem 0 1.5rem; }
.lab-protocol { display: grid; gap: 1.25rem; margin: 1.75rem 0; padding-left: 1.6rem; }
.lab-protocol > li { padding-left: .3rem; }
.lab-protocol .evidence-preview { max-width: 42rem; margin-top: .8rem; }
.heap-state-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; max-width: 42rem; margin-top: .8rem; }
.heap-state-comparison .evidence-preview { margin: 0; }
.stack-heap-map { margin: 1.5rem 0 0; overflow-x: auto; }
.stack-heap-map svg { display: block; width: 100%; min-width: 42rem; height: auto; }
.stack-heap-map figcaption { padding: .75rem .35rem 0; color: var(--muted); font-size: .9rem; }
.memory-map-zone { stroke-width: 2; }
.memory-map-stack { fill: #edf4ff; stroke: #9fc0ef; }
.memory-map-heap { fill: #fff8dd; stroke: #e0b13a; }
.memory-map-heading { fill: var(--ink); font-size: 27px; font-weight: 900; }
.memory-map-caption { fill: var(--muted); font-size: 16px; font-weight: 700; }
.memory-map-frame { fill: white; stroke: var(--blue); stroke-width: 3; }
.memory-map-object { fill: white; stroke: var(--blue); stroke-width: 3; }
.memory-map-object-a { fill: #fff4cc; stroke: var(--accent-dark); }
.memory-map-label { fill: var(--ink); font-size: 19px; font-weight: 900; }
.memory-map-detail { fill: var(--muted); font-size: 16px; font-weight: 700; }
.memory-map-code { fill: var(--ink); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 19px; font-weight: 800; }
.memory-map-rule { stroke: var(--line); stroke-width: 2; }
.memory-map-edge { fill: none; stroke: var(--blue-dark); stroke-width: 3; }
.memory-map-arrow-head { fill: var(--blue-dark); }
.ariane-card { margin-top: clamp(1.75rem, 4vw, 3rem); padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid #dfc277; border-radius: .9rem; background: #fff8dd; }
.ariane-illustration { margin: 0; overflow: hidden; border-radius: .55rem; background: #f6e4bd; }
.ariane-illustration img { display: block; width: 100%; height: auto; }
.ariane-intro .ariane-illustration { margin: 1rem 0; }
.ariane-copy { margin-top: clamp(1.25rem, 3vw, 2rem); }
.ariane-copy > :first-child { margin-top: 0; }
.ariane-copy h3 { font-size: clamp(1.45rem, 3vw, 2rem); }
.ariane-intro > :first-child { margin-top: 0; }
.ariane-myth { margin: .9rem 0 1rem; padding: .75rem .9rem; border: 1px solid #d9bb6b; border-radius: .55rem; background: rgba(255, 255, 255, .72); }
.ariane-myth summary { cursor: pointer; color: var(--blue-dark); font-weight: 900; }
.ariane-myth summary::marker { color: var(--accent-dark); }
.ariane-myth[open] summary { margin-bottom: .55rem; }
.ariane-myth p { margin: 0; font-size: .94rem; line-height: 1.55; }
.ariane-joke { margin: -.25rem 0 0; color: var(--muted); font-size: .94rem; }
.ariane-explanation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: clamp(1.25rem, 3vw, 2rem); }
.ariane-column { min-width: 0; }
.ariane-column h4 { margin: 0 0 .8rem; font-size: 1.05rem; }
.ariane-heap-column { padding-left: clamp(1.25rem, 3vw, 2.5rem); border-left: 2px dashed #d9bb6b; }
.ariane-legend { display: grid; gap: .7rem; margin: 0; }
.ariane-legend > div { padding: .8rem .9rem; border: 1px solid #d9bb6b; border-radius: .55rem; background: rgba(255, 255, 255, .72); }
.ariane-legend dt { font-weight: 900; }
.ariane-legend dd { margin: .25rem 0 0; color: #39445c; font-size: .92rem; line-height: 1.5; }
.ariane-note { margin: clamp(1.25rem, 3vw, 2rem) 0 0; }
.ariane-after-note { margin: clamp(1.25rem, 3vw, 2rem) 0 0; }
.debugger-preview { max-width: 58rem; }
.retention-chain { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin: 1.5rem 0; padding: 1.25rem; border-radius: .75rem; background: var(--canvas); }
.retention-node { padding: .8rem 1rem; border: 2px solid var(--blue); border-radius: .6rem; background: white; font-weight: 900; }
.retention-root { color: white; border-color: var(--ink); background: var(--ink); }
.retention-root code { color: inherit; background: transparent; }
.retention-arrow { color: var(--accent-dark); font-size: 1.8rem; font-weight: 900; }
.section-toc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: 2.2rem; }
.section-toc a { display: grid; gap: .25rem; padding: 1rem; border: 1px solid #53617b; border-radius: .5rem; color: white; text-decoration: none; }
.section-toc a:hover { border-color: var(--accent); }
.section-toc span { color: var(--accent); font-weight: 900; }
.course-document { margin: 2rem 0; }
.lesson-section { scroll-margin-top: 8rem; margin-bottom: 1.4rem; padding: clamp(1.5rem, 5vw, 4rem); border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.lesson-section > h2 { max-width: 24ch; }
.concept-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-block: 1.5rem; }
.concept-grid > div { padding: 1rem; border-top: .3rem solid var(--blue); background: var(--canvas); }
.concept-grid p { margin-bottom: 0; }
.vocabulary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.vocabulary div { padding: 1rem; border: 1px solid var(--line); border-radius: .5rem; }
.vocabulary dt { font-weight: 900; }
.vocabulary dd { margin: .25rem 0 0; color: var(--muted); }
.warning { margin: 1.4rem 0; padding: 1rem 1.2rem; border-left: .35rem solid var(--danger-line); background: var(--danger-bg); }
.checkpoint { margin-top: 1.5rem; padding: 1rem 1.2rem; border-left: .35rem solid var(--blue); background: #edf4ff; }
.pipeline { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1.5rem 0; }
.pipeline span { padding: .65rem .9rem; border-radius: 999px; background: var(--ink); color: white; font-weight: 800; }
.table-wrap { overflow-x: auto; margin-block: 1.5rem; }
table { width: 100%; min-width: 42rem; border-collapse: collapse; }
caption { margin-bottom: .5rem; text-align: left; font-size: 1.2rem; font-weight: 900; }
th, td { min-width: 8rem; padding: .7rem; border: 1px solid #aeb8ca; text-align: left; }
thead { color: white; background: var(--ink); }
tbody tr:nth-child(even) { background: var(--canvas); }
.checklist { padding-left: 0; list-style: none; }
.checklist li { position: relative; margin: .5rem 0; padding-left: 2rem; }
.checklist li::before { content: "□"; position: absolute; left: 0; font-size: 1.35rem; }
.page-nav { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0 3rem; font-weight: 800; }
.page-nav-top { padding-block: 1rem; border-bottom: 1px solid var(--line); font-size: .92rem; }
.site-footer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 1.5rem clamp(1rem, 4vw, 3rem); border-top: 1px solid var(--line); color: var(--muted); background: white; font-size: .85rem; }
.site-footer > :nth-child(2) { text-align: center; }
.site-footer > :last-child { text-align: right; }
.site-footer-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer-two > :nth-child(2) { text-align: right; }

@media (max-width: 850px) {
  .hero, .outcome-grid, .day-grid, .method-steps, .concept-grid, .vocabulary, .gc-stages, .ariane-explanation, .heap-state-comparison { grid-template-columns: 1fr; }
  .ariane-heap-column { padding: 1.25rem 0 0; border-top: 2px dashed #d9bb6b; border-left: 0; }
  .hero { min-height: auto; }
  .section-toc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .day-header { position: static; align-items: stretch; flex-direction: column; }
  .lesson-section { scroll-margin-top: 1rem; }
}

@media (max-width: 520px) {
  main, .page-nav { width: min(100% - 1rem, 1180px); }
  .section-toc, .site-footer { grid-template-columns: 1fr; }
  .day-controls, .day-controls label, .day-controls select { width: 100%; }
  .page-nav { flex-direction: column; }
  .site-footer > :nth-child(2), .site-footer > :last-child { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .day-card { transition: none; }
}

@media print {
  body { background: white; font-size: 10pt; }
  .site-header, .hero-actions, .day-actions, .section-toc, .page-nav { display: none; }
  main { width: 100%; }
  .hero, .day-intro, .lab-preview, .evidence-preview, .lesson-section, .course-builder, .prerequisite, .outcomes, .days, .method { padding: 1rem; border: 1px solid #777; box-shadow: none; break-inside: avoid; }
  .day-intro { color: black; background: white; }
  .day-intro .lead { color: black; }
  a { color: black; }
}