/* ============================================================
   the runtime — design system
   v0.2 · warm technical book (Crafting Interpreters–inspired)
   Fonts: Crimson Text (prose) · Source Sans 3 (ui) · Source Code Pro (code)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&family=Source+Code+Pro:wght@400;500&family=Source+Sans+3:wght@400;600;700&display=swap');

/* ── tokens ─────────────────────────────────────────────── */
:root {
  /* paper & ink */
  --bg:       #faf8f5;
  --bg2:      #ffffff;
  --bg3:      #f3f1ec;
  --bg4:      #e8e4dc;

  --border:   #dee9ed;
  --border2:  #d0dae0;
  --border3:  #b8c8d4;

  --text:     #222222;
  --text2:    #444444;
  --text3:    #7aa0b8;

  --link:     #1481b8;
  --link-hover: #0f6a96;

  /* site chrome — warm gold CTAs like CI store buttons */
  --gold:       #e8a830;
  --gold-dark:  #c88f1a;
  --gold-dim:   #fcf6e8;

  /* logo / brand green */
  --accent:       #1a9268;
  --accent-dark:  #157a56;
  --accent-dim:   #e8f4ef;

  /* semantic — also used in visualizations */
  --blue:        #1481b8;
  --blue-dark:   #0f6a96;
  --blue-dim:    #eef4f7;
  --blue-dim2:   #e4eef1;

  --green:       #3d8f5c;
  --green-dark:  #2d7348;
  --green-dim:   #f6f8f2;
  --green-dim2:  #eef1ea;

  --amber:       #c38e22;
  --amber-dark:  #9a6e18;
  --amber-dim:   #fcf6e8;
  --amber-dim2:  #f5eed8;

  --red:         #b54a4a;
  --red-dark:    #8f3838;
  --red-dim:     #faf0f0;
  --red-dim2:    #f0e4e4;

  --purple:      #9966cc;
  --purple-dark: #7a4fa8;
  --purple-dim:  #f5f0fa;
  --purple-dim2: #ebe4f2;

  --teal:        #00a4b3;
  --teal-dark:   #008290;
  --teal-dim:    #e8f6f7;
  --teal-dim2:   #d8eef0;

  --track-c:       var(--blue);
  --track-algo:    var(--green);
  --track-systems: var(--purple);

  --font-serif:  'Crimson Text', Georgia, 'Times New Roman', serif;
  --font-display: var(--font-serif);
  --font-ui:     'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;
  --font-mono:   'Source Code Pro', Menlo, Consolas, monospace;

  --s1:   4px;
  --s2:   8px;
  --s3:   12px;
  --s4:   16px;
  --s5:   20px;
  --s6:   24px;
  --s8:   32px;
  --s10:  40px;
  --s12:  48px;
  --s16:  64px;
  --s20:  80px;
  --s24:  96px;

  --r-sm:   2px;
  --r:      3px;
  --r-lg:   4px;
  --r-xl:   6px;
  --r-pill: 3px;

  --content-width:  760px;
  --site-width:     1100px;
  --sidebar-width:  260px;
  --nav-height:     52px;

  --code-bg:        #faf8f5;
  --code-bg2:       #f3f0ea;
  --code-border:    #dee9ed;
}


/* ── reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.5;
}

img, svg { display: block; max-width: 100%; }

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.15s ease;
}

a:hover {
  color: var(--link-hover);
  border-bottom-color: var(--border);
}

a.btn,
a.nav-cta,
a.nav-logo,
a.footer-logo,
a.lesson-nav-prev,
a.lesson-nav-next {
  border-bottom: none;
}

a.btn:hover,
a.nav-cta:hover,
a.nav-logo:hover,
a.footer-logo:hover,
a.lesson-nav-prev:hover,
a.lesson-nav-next:hover {
  border-bottom: none;
}

/* cards are <a> — keep full box border; link underline uses side borders only */
a.track-card,
a.lesson-card {
  border-bottom: 1px solid var(--border2);
}

a.track-card:hover,
a.lesson-card:hover {
  border-bottom-color: var(--link);
}


/* ── typography ──────────────────────────────────────────── */
.t-display {
  font-family: var(--font-serif);
  font-size: clamp(30px, 5vw, 40px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.15;
  color: var(--text);
}

.t-display-italic {
  font-family: var(--font-serif);
  font-size: clamp(30px, 5vw, 40px);
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0;
  line-height: 1.15;
  color: var(--text2);
}

h1, .h1 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  color: var(--text);
}

h2, .h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  color: var(--text);
}

h3, .h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--text);
}

.label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
}

p { margin-bottom: var(--s4); }
p:last-child { margin-bottom: 0; }

/* inline code */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--code-bg);
  border: none;
  border-radius: var(--r-sm);
  padding: 1px 5px;
  color: #595959;
}

/* ── layout ──────────────────────────────────────────────── */
.site-wrap {
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 0 var(--s6);
}

.content-wrap {
  max-width: var(--content-width);
  margin: 0 auto;
}

/* lesson page layout */
.lesson-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: auto 1fr;
  gap: 0;
  min-height: 100vh;
}

.lesson-main {
  grid-column: 2;
  padding: var(--s12) var(--s12) var(--s20);
  max-width: calc(var(--content-width) + var(--s12) * 2);
}

.lesson-content {
  max-width: var(--content-width);
}

/* ── navigation ──────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  font-family: var(--font-ui);
}

.nav-inner {
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 0 var(--s6);
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--s4);
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-svg {
  display: block;
  width: auto;
  max-width: 100%;
}

.logo-svg--nav {
  height: 32px;
}

.footer-logo .logo-svg--nav {
  height: 26px;
  opacity: 0.92;
}

.logo-svg--hero {
  height: auto;
  width: min(400px, 88vw);
  margin: 0 auto var(--s5);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s1);
  margin-left: var(--s6);
  flex: 1;
}

.nav-link {
  font-size: 14px;
  font-weight: 400;
  color: var(--text3);
  padding: var(--s1) var(--s2);
  border-radius: 0;
  border-bottom: none;
  transition: color 0.15s;
}

.nav-link:hover {
  color: var(--link);
  background: transparent;
  border-bottom: none;
}

.nav-link.active {
  color: var(--text);
  font-weight: 600;
  background: transparent;
}

.nav-cta {
  font-size: 13px;
  font-weight: 600;
  background: var(--gold);
  color: #3d2e10;
  padding: 6px var(--s4);
  border-radius: var(--r);
  border-bottom: none;
  transition: background 0.15s;
  flex-shrink: 0;
}

.nav-cta:hover {
  background: var(--gold-dark);
  color: #2a2010;
  border-bottom: none;
}


/* ── sidebar ─────────────────────────────────────────────── */
.sidebar {
  grid-column: 1;
  grid-row: 1 / -1;
  width: var(--sidebar-width);
  position: sticky;
  top: var(--nav-height);
  height: calc(100vh - var(--nav-height));
  overflow-y: auto;
  border-right: 1px solid var(--border);
  background: var(--bg2);
  padding: var(--s6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  font-family: var(--font-ui);
}

.sidebar-section {
  padding: 0 var(--s4);
  margin-bottom: var(--s2);
}

.sidebar-track-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text3);
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s1);
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.sidebar-track-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 7px var(--s3);
  border-radius: var(--r);
  font-size: 13px;
  color: var(--text2);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
}

.sidebar-item:hover {
  background: var(--bg3);
  color: var(--text);
  text-decoration: none;
}

.sidebar-item.active {
  background: var(--blue-dim);
  color: var(--link-hover);
  font-weight: 600;
  border-left: 3px solid var(--link);
  padding-left: calc(var(--s3) - 3px);
}

.sidebar-item-num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text3);
  width: 18px;
  flex-shrink: 0;
}

.sidebar-item-status {
  margin-left: auto;
  font-size: 11px;
  flex-shrink: 0;
}

.sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: var(--s3) var(--s4);
}


/* ── buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 7px var(--s4);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-ui);
  border-radius: var(--r);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
  line-height: 1;
  white-space: nowrap;
}

.btn:active { transform: none; }

.btn-primary {
  background: var(--gold);
  color: #3d2e10;
  border-bottom: none;
}
.btn-primary:hover {
  background: var(--gold-dark);
  color: #2a2010;
  text-decoration: none;
  border-bottom: none;
}

.btn-secondary {
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--border2);
}
.btn-secondary:hover { background: var(--bg3); text-decoration: none; }

.btn-ghost {
  background: transparent;
  color: var(--text2);
  border: 1px solid transparent;
}
.btn-ghost:hover { background: var(--bg3); color: var(--text); text-decoration: none; }

.btn-sm { padding: 4px 11px; font-size: 12px; }
.btn-lg { padding: 10px 22px; font-size: 15px; }

.btn-icon {
  padding: 7px;
  width: 34px;
  height: 34px;
  justify-content: center;
}


/* ── cards ───────────────────────────────────────────────── */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s5) var(--s6);
}

.card-sm { padding: var(--s4); }
.card-lg { padding: var(--s8) var(--s8); }

/* lesson card — track lesson list; border2 so edges read on --bg paper */
.lesson-card {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
  text-decoration: none;
  display: block;
  color: inherit;
}

.lesson-card:hover {
  border-color: var(--link);
  text-decoration: none;
  box-shadow: none;
}

.lesson-card.current { border-color: var(--blue); }

.lesson-card-track { height: 3px; }

.lesson-card-body { padding: var(--s4) var(--s5); }

.lesson-card-meta {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: var(--s1);
}

.lesson-card-title {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--s1);
}

.lesson-card-desc {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
}

.lesson-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--border2);
  background: var(--bg);
}

.lesson-card-stats {
  font-size: 11px;
  color: var(--text3);
  display: flex;
  gap: var(--s4);
}

.lesson-card-status {
  font-size: 11px;
  font-weight: 600;
}

.lesson-card-status.done   { color: var(--green); }
.lesson-card-status.active { color: var(--blue); }
.lesson-card-status.locked { color: var(--text3); }


/* ── pills / badges ──────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-ui);
  line-height: 1;
}

.pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.pill-blue    { background: var(--blue-dim);   color: var(--blue-dark); }
.pill-green   { background: var(--green-dim);  color: var(--green-dark); }
.pill-amber   { background: var(--amber-dim);  color: var(--amber-dark); }
.pill-red     { background: var(--red-dim);    color: var(--red-dark); }
.pill-purple  { background: var(--purple-dim); color: var(--purple-dark); }
.pill-teal    { background: var(--teal-dim);   color: var(--teal-dark); }
.pill-neutral { background: var(--bg3); color: var(--text2); border: 1px solid var(--border2); }


/* ── callouts ────────────────────────────────────────────── */
.callout {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s4);
  border-radius: 0 var(--r) var(--r) 0;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  margin: var(--s6) 0;
}

.callout-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }

.callout code { font-size: 12px; }

.callout-info   { background: var(--blue-dim);   border-left: 3px solid var(--link);   }
.callout-warn   { background: var(--amber-dim);  border-left: 3px solid var(--amber);  }
.callout-danger { background: var(--red-dim);    border-left: 3px solid var(--red);    }
.callout-good   { background: var(--green-dim);  border-left: 3px solid var(--green);  }


/* ── code blocks ─────────────────────────────────────────── */
.code-block {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: var(--s6) 0;
  font-size: 0;  /* remove whitespace gap */
}

/* full-bleed from prose column */
.code-block-wide {
  margin-left: calc(-1 * var(--s10));
  margin-right: calc(-1 * var(--s10));
  border-radius: var(--r-xl);
}

.code-header {
  background: var(--code-bg2);
  padding: 8px var(--s4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--code-border);
}

.code-dots { display: flex; gap: 6px; align-items: center; }
.code-dot  { width: 10px; height: 10px; border-radius: 50%; }

.code-dots { opacity: 0.35; }

.code-lang {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text3);
}

.code-copy {
  font-size: 11px;
  color: var(--text3);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-ui);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  transition: color 0.15s, background 0.15s;
}

.code-copy:hover { color: var(--text2); background: var(--bg3); }

.code-body {
  padding: var(--s4) var(--s5);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  color: #595959;
  overflow-x: auto;
  white-space: pre;
}

/* syntax tokens — Crafting Interpreters palette on warm paper */
.ck  { color: #0099e6; }  /* keyword */
.ct  { color: #1b6e98; }  /* type */
.cs  { color: #c38e22; }  /* string */
.cn  { color: #dd713c; }  /* number */
.cc  { color: #aaa9a7; }  /* comment */
.cf  { color: #9966cc; }  /* function */
.co  { color: #797978; }  /* operator */
.cp  { color: #222222; }  /* plain */

.code-line { display: block; }
.code-line.hl {
  background: #f5f3f0;
  margin: 0 calc(-1 * var(--s5));
  padding: 0 var(--s5);
  border-left: 2px solid var(--border2);
}


/* ── visualization frame ─────────────────────────────────── */
.viz-frame {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s6);
  margin: var(--s8) 0;
}

/* wide viz — breaks prose column */
.viz-frame-wide {
  margin-left: calc(-1 * var(--s10));
  margin-right: calc(-1 * var(--s10));
}

.viz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s4);
}

.viz-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text3);
}

.viz-controls {
  display: flex;
  gap: var(--s2);
  align-items: center;
  flex-wrap: wrap;
}

/* memory cells */
.mem-row  { display: flex; gap: 3px; margin-bottom: 3px; }
.mem-addr {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text3);
  width: 54px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.mem-cell {
  flex: 1;
  height: 40px;
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
}

.mem-cell:hover { transform: translateY(-2px); filter: brightness(1.05); }
.mem-cell-val   { font-size: 11px; font-weight: 500; }
.mem-cell-sub   { font-size: 8px; opacity: 0.75; margin-top: 1px; }

/* cell color variants — match viz palette */
.mc-blue   { background: rgba(59,130,246,0.14);  border-color: rgba(59,130,246,0.40);  color: #1d4ed8; }
.mc-green  { background: rgba(22,163,74,0.14);   border-color: rgba(22,163,74,0.40);   color: #15803d; }
.mc-amber  { background: rgba(217,119,6,0.14);   border-color: rgba(217,119,6,0.40);   color: #b45309; }
.mc-red    { background: rgba(220,38,38,0.14);   border-color: rgba(220,38,38,0.40);   color: #b91c1c; }
.mc-purple { background: rgba(124,58,237,0.14);  border-color: rgba(124,58,237,0.40);  color: #6d28d9; }
.mc-teal   { background: rgba(15,118,110,0.14);  border-color: rgba(15,118,110,0.40);  color: #0d6b63; }
.mc-gray   { background: rgba(100,100,90,0.09);  border-color: rgba(100,100,90,0.22);  color: var(--text3); }


/* ── lesson prose ────────────────────────────────────────── */
.prose h1 { margin-bottom: var(--s6); }
.prose h2 { margin-top: var(--s12); margin-bottom: var(--s4); padding-bottom: 2px; }
.prose h3 { margin-top: var(--s8); margin-bottom: var(--s3); }
.prose p  { margin-bottom: var(--s4); color: var(--text); line-height: 1.5; }

.prose ul, .prose ol {
  padding-left: var(--s6);
  margin-bottom: var(--s4);
}

.prose li { margin-bottom: var(--s2); color: var(--text); }

.prose hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--s10) 0;
}

/* lesson step nav at bottom */
.lesson-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s6) 0;
  margin-top: var(--s12);
  border-top: 1px solid var(--border);
}

.lesson-nav-prev, .lesson-nav-next {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  text-decoration: none;
}

.lesson-nav-prev { align-items: flex-start; }
.lesson-nav-next { align-items: flex-end; }

.lesson-nav-dir {
  font-size: 11px;
  color: var(--text3);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lesson-nav-title {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--link);
  border-bottom: none;
}

.lesson-nav-prev:hover .lesson-nav-title,
.lesson-nav-next:hover .lesson-nav-title {
  border-bottom: 1px solid var(--border);
}


/* ── progress ────────────────────────────────────────────── */
.progress-bar-wrap {
  background: var(--bg3);
  border-radius: var(--r-pill);
  height: 5px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  border-radius: var(--r-pill);
  transition: width 0.4s ease;
}

/* step indicators */
.steps-row { display: flex; align-items: center; }

.step-node {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  font-family: var(--font-ui);
}

.step-done   { background: var(--green);  color: #fff; }
.step-active { background: var(--blue);   color: #fff; }
.step-todo   { background: var(--bg3); color: var(--text3); border: 1px solid var(--border2); }

.step-connector {
  flex: 1;
  height: 2px;
  background: var(--border2);
}

.step-connector.done { background: var(--green); }


/* ── section / grid helpers ──────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s3); }

.flex     { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--s2); }
.gap-3 { gap: var(--s3); }
.gap-4 { gap: var(--s4); }

.mt-4  { margin-top: var(--s4); }
.mt-6  { margin-top: var(--s6); }
.mt-8  { margin-top: var(--s8); }
.mt-12 { margin-top: var(--s12); }
.mb-4  { margin-bottom: var(--s4); }
.mb-6  { margin-bottom: var(--s6); }
.mb-8  { margin-bottom: var(--s8); }


/* ── landing page sections ───────────────────────────────── */
.hero-section {
  padding: var(--s20) 0 var(--s16);
  text-align: center;
}

.hero-section .label {
  margin-bottom: var(--s4);
}

.hero-section .t-display {
  margin-bottom: var(--s5);
}

.hero-desc {
  font-size: 18px;
  color: var(--text2);
  max-width: 520px;
  margin: 0 auto var(--s8);
  line-height: 1.65;
}

.track-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin: var(--s12) 0;
}

.track-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s6);
  border-top-width: 3px;
  text-decoration: none;
  display: block;
  transition: box-shadow 0.15s, transform 0.15s;
}

.track-card:hover {
  border-color: var(--link);
  box-shadow: none;
  transform: none;
  text-decoration: none;
}

.track-card-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: var(--s4);
}

.track-card-title {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--s2);
}

.track-card-desc {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.55;
  margin-bottom: var(--s4);
}

.track-card-count {
  font-size: 12px;
  color: var(--text3);
  font-weight: 500;
}


/* ── footer ──────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--border);
  padding: var(--s8) 0;
  margin-top: var(--s20);
}

.footer-inner {
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 0 var(--s6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s6);
}

.footer-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}

.footer-copy {
  font-size: 12px;
  color: var(--text3);
}


/* ── cookie banner ───────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  padding: var(--s4) var(--s6);
  background: var(--bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.08);
}

.cookie-banner-inner {
  max-width: var(--site-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  flex-wrap: wrap;
}

.cookie-banner-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text2);
  max-width: 640px;
}

.cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-shrink: 0;
}


/* ── utilities ───────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

.text-center { text-align: center; }
.text-right  { text-align: right; }

.text-secondary { color: var(--text2); }
.text-tertiary  { color: var(--text3); }
.text-blue      { color: var(--blue); }
.text-green     { color: var(--green); }
.text-amber     { color: var(--amber); }
.text-red       { color: var(--red); }
.text-purple    { color: var(--purple); }

.font-mono { font-family: var(--font-mono); }
.font-display { font-family: var(--font-display); }

.w-full  { width: 100%; }
.hidden  { display: none; }


/* ── responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .lesson-layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }

  .sidebar.open {
    display: flex;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    bottom: 0;
    z-index: 99;
    box-shadow: 4px 0 24px rgba(0,0,0,0.12);
  }

  .lesson-main {
    grid-column: 1;
    padding: var(--s8) var(--s5) var(--s16);
  }

  .track-cards  { grid-template-columns: 1fr; }
  .grid-3       { grid-template-columns: 1fr; }
  .grid-2       { grid-template-columns: 1fr; }

  .code-block-wide,
  .viz-frame-wide {
    margin-left: 0;
    margin-right: 0;
    border-radius: var(--r-lg);
  }
}

@media (max-width: 600px) {
  .nav-links { display: none; }
  .lesson-main { padding: var(--s6) var(--s4) var(--s12); }
}


/* ── theme toggle (shared) ───────────────────────────────── */
.theme-toggle {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text3);
  border-bottom: none;
}

.theme-toggle:hover {
  color: var(--link);
  border-bottom: none;
}


/* ============================================================
   Classic theme — LLVM.org-inspired (html[data-theme="llvm"])
   Toggle via nav “classic” / localStorage runtime-theme=llvm
   ============================================================ */
html[data-theme="llvm"] {
  /* surfaces */
  --bg:       #ffffff;
  --bg2:      #ffffff;
  --bg3:      #f0f0f0;
  --bg4:      #e8e8e8;

  --border:   #cccccc;
  --border2:  #bbbbbb;
  --border3:  #999999;

  --text:     #000000;
  --text2:    #333333;
  --text3:    #666666;

  /* LLVM-ish link blue; keep semantic hues readable */
  --blue:        #1f58a7;
  --blue-dark:   #15317e;
  --blue-dim:    #e8eef7;
  --blue-dim2:   #d0dceb;

  --green:       #2a6e2a;
  --green-dark:  #1f4f1f;
  --green-dim:   #e8f0e8;
  --green-dim2:  #d4e4d4;

  --amber:       #996600;
  --amber-dark:  #664400;
  --amber-dim:   #f5eed8;
  --amber-dim2:  #ebe0c0;

  --red:         #990000;
  --red-dark:    #660000;
  --red-dim:     #f5e8e8;
  --red-dim2:    #ebd4d4;

  --purple:      #551a8b;
  --purple-dark: #3d1266;
  --purple-dim:  #efe8f5;
  --purple-dim2: #ddd0eb;

  --teal:        #006666;
  --teal-dark:   #004d4d;
  --teal-dim:    #e0f0f0;
  --teal-dim2:   #c8e4e4;

  --font-display: Georgia, 'Times New Roman', Times, serif;
  --font-ui:      Verdana, Arial, Helvetica, sans-serif;
  --font-mono:    'Courier New', Courier, monospace;

  --r-sm:   0;
  --r:      0;
  --r-lg:   0;
  --r-xl:   0;
  --r-pill: 0;

  --nav-height:  auto;
  --code-bg:     #f8f8f8;
  --code-bg2:    #eeeeee;
  --code-border: #cccccc;
}

html[data-theme="llvm"] {
  font-size: 16px;
  scroll-behavior: auto;
}

html[data-theme="llvm"] body {
  background: var(--bg);
  font-size: 16px;
  line-height: 1.55;
}

html[data-theme="llvm"] .prose p,
html[data-theme="llvm"] .lesson-content p,
html[data-theme="llvm"] .lesson-main p,
html[data-theme="llvm"] .prose li {
  font-size: 16px;
  line-height: 1.55;
}

html[data-theme="llvm"] a {
  color: var(--blue);
  text-decoration: underline;
}

html[data-theme="llvm"] a:visited {
  color: var(--purple);
}

html[data-theme="llvm"] h1,
html[data-theme="llvm"] .h1,
html[data-theme="llvm"] .t-display,
html[data-theme="llvm"] .t-display-italic {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
}

html[data-theme="llvm"] h2,
html[data-theme="llvm"] .h2,
html[data-theme="llvm"] h3,
html[data-theme="llvm"] .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
}

html[data-theme="llvm"] .label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text2);
}

html[data-theme="llvm"] code {
  background: var(--bg3);
  border-color: var(--border);
  border-radius: 0;
}

/* ── nav / footer ────────────────────────────────────────── */
html[data-theme="llvm"] .nav {
  position: static;
  height: auto;
  background: var(--bg2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 2px solid var(--border2);
  padding: 10px 0;
}

html[data-theme="llvm"] .nav-inner {
  flex-wrap: wrap;
  gap: var(--s2);
}

html[data-theme="llvm"] .nav-links {
  margin-left: var(--s4);
  gap: 0;
  flex-wrap: wrap;
}

html[data-theme="llvm"] .nav-link {
  font-size: 13px;
  font-weight: 400;
  color: var(--blue);
  padding: 2px 0;
  border-radius: 0;
  background: transparent;
}

html[data-theme="llvm"] .nav-link:hover {
  background: transparent;
  color: var(--blue-dark);
}

html[data-theme="llvm"] .nav-link.active {
  font-weight: 700;
  color: var(--text);
  background: transparent;
  text-decoration: none;
}

html[data-theme="llvm"] .nav-links .nav-link:not(:last-child)::after {
  content: " |";
  color: var(--text3);
  font-weight: 400;
  text-decoration: none;
}

html[data-theme="llvm"] .nav-cta {
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--border2);
  border-radius: 0;
  padding: 3px 10px;
  font-weight: 400;
}

html[data-theme="llvm"] .nav-cta:hover {
  background: var(--bg3);
  color: var(--blue-dark);
}

html[data-theme="llvm"] .theme-toggle {
  background: transparent;
  border: none;
  color: var(--blue);
  text-decoration: underline;
  padding: 2px 6px;
  font-weight: 400;
  border-radius: 0;
}

html[data-theme="llvm"] .theme-toggle:hover {
  background: transparent;
  color: var(--blue-dark);
}

html[data-theme="llvm"] .logo-svg--nav {
  height: 28px;
}

html[data-theme="llvm"] .footer {
  border-top: 1px solid var(--border);
  margin-top: var(--s12);
  padding: var(--s4) 0;
  font-size: 12px;
}

html[data-theme="llvm"] .footer-inner {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
}

html[data-theme="llvm"] .footer .nav-link::after {
  content: none;
}

/* ── sidebar ─────────────────────────────────────────────── */
html[data-theme="llvm"] .lesson-layout {
  border-top: 1px solid var(--border);
}

html[data-theme="llvm"] .sidebar {
  background: var(--bg3);
  border-right: 1px solid var(--border2);
  top: 0;
  height: auto;
  min-height: calc(100vh - 80px);
}

html[data-theme="llvm"] .sidebar-item {
  border-radius: 0;
  font-size: 12px;
}

html[data-theme="llvm"] .sidebar-item:hover {
  background: #e0e0e0;
}

html[data-theme="llvm"] .sidebar-item.active {
  background: var(--blue-dim);
  font-weight: 700;
}

html[data-theme="llvm"] .lesson-main {
  padding: var(--s6) var(--s8) var(--s12);
}

/* ── buttons ───────────────────────────────────────────────── */
html[data-theme="llvm"] .btn {
  border-radius: 0;
  font-weight: 400;
  box-shadow: none;
}

html[data-theme="llvm"] .btn:active {
  transform: none;
}

html[data-theme="llvm"] .btn-primary {
  background: var(--bg3);
  color: var(--blue);
  border: 1px solid var(--border2);
}

html[data-theme="llvm"] .btn-primary:hover {
  background: #e0e0e0;
  color: var(--blue-dark);
}

html[data-theme="llvm"] .btn-secondary,
html[data-theme="llvm"] .btn-ghost {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--blue);
}

html[data-theme="llvm"] .btn-secondary:hover,
html[data-theme="llvm"] .btn-ghost:hover {
  background: var(--bg3);
}

/* ── cards / tracks ────────────────────────────────────────── */
html[data-theme="llvm"] .card,
html[data-theme="llvm"] .lesson-card,
html[data-theme="llvm"] .track-card,
html[data-theme="llvm"] .viz-frame {
  border-radius: 0;
  box-shadow: none;
}

html[data-theme="llvm"] .lesson-card:hover,
html[data-theme="llvm"] .track-card:hover {
  box-shadow: none;
  transform: none;
  border-color: var(--blue);
}

html[data-theme="llvm"] .track-card {
  border-top-width: 1px;
  padding: var(--s4);
}

html[data-theme="llvm"] .track-card-icon {
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--bg2) !important;
}

html[data-theme="llvm"] .track-cards {
  gap: var(--s3);
}

html[data-theme="llvm"] .pill {
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--bg2);
}

html[data-theme="llvm"] .pill-blue,
html[data-theme="llvm"] .pill-green,
html[data-theme="llvm"] .pill-purple {
  background: var(--bg2);
}

/* ── callouts ──────────────────────────────────────────────── */
html[data-theme="llvm"] .callout {
  border-radius: 0;
  border: 1px solid var(--border);
  border-left-width: 4px;
  background: var(--bg2);
  font-size: 15px;
  line-height: 1.55;
}

html[data-theme="llvm"] .callout-info   { border-left-color: var(--blue); }
html[data-theme="llvm"] .callout-warn   { border-left-color: var(--amber); }
html[data-theme="llvm"] .callout-danger { border-left-color: var(--red); }
html[data-theme="llvm"] .callout-good   { border-left-color: var(--green); }

/* ── code blocks (light, pre-IDE) ──────────────────────────── */
html[data-theme="llvm"] .code-block {
  border-radius: 0;
  border-color: var(--code-border);
}

html[data-theme="llvm"] .code-block-wide,
html[data-theme="llvm"] .viz-frame-wide {
  border-radius: 0;
}

html[data-theme="llvm"] .code-header {
  border-bottom: 1px solid var(--code-border);
}

html[data-theme="llvm"] .code-lang,
html[data-theme="llvm"] .code-copy {
  color: var(--text3);
}

html[data-theme="llvm"] .code-body {
  color: var(--text);
  background: var(--code-bg);
}

html[data-theme="llvm"] .ck  { color: #000080; }
html[data-theme="llvm"] .ct  { color: #2b2b8b; }
html[data-theme="llvm"] .cs  { color: #006400; }
html[data-theme="llvm"] .cn  { color: #880000; }
html[data-theme="llvm"] .cc  { color: #666666; }
html[data-theme="llvm"] .cf  { color: #2b2b8b; }
html[data-theme="llvm"] .co  { color: #000000; }
html[data-theme="llvm"] .cp  { color: #000000; }

html[data-theme="llvm"] .code-line.hl {
  background: #ffffcc;
}

/* ── viz / memory cells ─────────────────────────────────────── */
html[data-theme="llvm"] .mem-cell {
  border-radius: 0;
}

html[data-theme="llvm"] .mem-cell:hover {
  transform: none;
  filter: none;
}

html[data-theme="llvm"] .step-node {
  border-radius: 0;
}

html[data-theme="llvm"] .progress-bar-wrap {
  border-radius: 0;
}

html[data-theme="llvm"] .progress-bar {
  border-radius: 0;
}

/* ── lesson nav ──────────────────────────────────────────────── */
html[data-theme="llvm"] .lesson-nav-title {
  font-weight: 400;
  text-decoration: underline;
}

html[data-theme="llvm"] .lesson-nav-dir {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* ── card links (avoid global underline breaking grids) ───────── */
html[data-theme="llvm"] a.track-card,
html[data-theme="llvm"] a.lesson-card,
html[data-theme="llvm"] a.nav-logo,
html[data-theme="llvm"] a.footer-logo,
html[data-theme="llvm"] .btn,
html[data-theme="llvm"] .nav-cta {
  text-decoration: none;
}

html[data-theme="llvm"] a.track-card,
html[data-theme="llvm"] a.track-card:visited,
html[data-theme="llvm"] a.lesson-card,
html[data-theme="llvm"] a.lesson-card:visited {
  color: inherit;
}

html[data-theme="llvm"] a.track-card:hover .track-card-title,
html[data-theme="llvm"] a.lesson-card:hover .lesson-card-title {
  text-decoration: underline;
}

/* ── home page (preserve centered layout from inline styles) ─── */
html[data-theme="llvm"] main.page-home .logo-svg--hero {
  width: min(480px, 95vw);
  margin-left: auto;
  margin-right: auto;
}

html[data-theme="llvm"] main.page-home section > p {
  font-size: 16px;
  line-height: 1.55;
}

html[data-theme="llvm"] main.page-home .track-cards {
  margin-top: var(--s6);
  margin-bottom: 0;
}

html[data-theme="llvm"] main.page-home #tracks {
  max-width: var(--site-width);
}

html[data-theme="llvm"] .hero-desc {
  font-size: 16px;
}