/* ── Design tokens ───────────────────────────────────────────────────────────
   Two themes share one set of token names so every component recolours by
   swapping values. DARK is the default (Direction B: the docs.tenstorrent.com
   Figma teal/green system, dark variant); LIGHT is opt-in via the theme toggle. */
:root {
  color-scheme: dark;
  --bg0: #0A1F1E; --bg1: #10302D; --bg2: #1E433F; --bg3: #061514;
  --teal: #2BA7C9; --teal-lt: #5BBAD5;
  --pink: #EC96B8; --gold: #F4C471; --green: #34C77B;
  --text: #E3F0EE; --text2: #A7C3C0; --muted: #6E8B89;
  --red: #FF6B6B;
  --radius: 6px;
  --nav-h: 56px;
  /* Top-nav chrome — the dark TT bar, identical in both themes */
  --nav-bg: #092221; --nav-text: #D9E8E5; --nav-muted: #8FAEAC;
  --nav-border: rgba(199, 217, 216, 0.18);
}

/* LIGHT theme — full Figma teal/green light palette */
[data-theme="light"] {
  color-scheme: light;
  --bg0: #F1F8F8; --bg1: #FFFFFF; --bg2: #C7D9D8; --bg3: #EAF3F2;
  --teal: #1B8EB1; --teal-lt: #1E86A9;
  --pink: #C75B8A; --gold: #B07A1F; --green: #1E8E5A;
  --text: #092221; --text2: #3A5452; --muted: #678583;
  --red: #C0392B;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg0); color: var(--text); font-size: 17px;
  line-height: 1.7; min-height: 100vh;
}

/* ── Scrollbars ──────────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: rgba(79,209,197,0.2) transparent; }
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: rgba(79,209,197,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(79,209,197,0.45); }

/* ── Top nav (TT docs chrome — dark teal-green bar; lightweight guide build) ── */
.tt-top-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 22px; height: var(--nav-h);
  background: var(--nav-bg); border-bottom: 1px solid var(--nav-border);
  position: sticky; top: 0; z-index: 200;
}
.tt-nav-left { display: flex; align-items: center; gap: 22px; min-width: 0; }
.tt-nav-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; }
.tt-nav-logo img { height: 22px; width: auto; }
.tt-nav-logo span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 14px; color: var(--nav-text); letter-spacing: 0.3px; white-space: nowrap;
}
.tt-nav-logo:hover { text-decoration: none; }
.tt-nav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.tt-nav-links li { margin: 0; padding: 0; }
.tt-nav-links a {
  display: flex; align-items: center; height: 30px; padding: 0 10px;
  color: var(--nav-text); text-decoration: none; font-size: 13.5px; letter-spacing: 0.2px;
  border-radius: 4px; white-space: nowrap; transition: background 0.15s, color 0.15s;
}
.tt-nav-links a:hover { background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; }
.tt-nav-links a.active { color: #fff; background: rgba(43,167,201,0.22); }
.tt-nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tt-nav-btn-github {
  display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  color: var(--nav-text); text-decoration: none; font-size: 13.5px;
  border: 1px solid var(--nav-border); border-radius: 4px;
}
.tt-nav-btn-github svg { width: 15px; height: 15px; fill: currentColor; }
.tt-nav-btn-github:hover { background: rgba(255,255,255,0.06); text-decoration: none; }

/* Light/dark theme toggle — sun/moon icon button, styled for the dark bar */
.tt-theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  color: var(--nav-text); background: rgba(255,255,255,0.05);
  border: 1px solid var(--nav-border); border-radius: 4px; transition: border-color 0.15s, color 0.15s;
}
.tt-theme-toggle:hover { border-color: var(--nav-text); color: #fff; }
.tt-theme-toggle svg { width: 16px; height: 16px; }
.tt-theme-toggle .icon-sun { display: none; }
.tt-theme-toggle .icon-moon { display: block; }
[data-theme="light"] .tt-theme-toggle .icon-sun { display: block; }
[data-theme="light"] .tt-theme-toggle .icon-moon { display: none; }

/* ── Personality toggle ──────────────────────────────────────────────────── */
.mode-toggle {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--nav-muted); cursor: pointer; user-select: none;
  background: rgba(255,255,255,0.05); border: 1px solid var(--nav-border);
  padding: 4px 10px; border-radius: 20px; transition: border-color 0.15s, color 0.15s;
}
.mode-toggle:hover { border-color: var(--nav-text); color: var(--nav-text); }
.mode-toggle-pip {
  width: 28px; height: 14px; background: var(--bg2);
  border-radius: 7px; position: relative; transition: background 0.2s;
}
.mode-toggle-pip::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--muted); transition: transform 0.2s, background 0.2s;
}
[data-mode="illustrated"] .mode-toggle-pip { background: rgba(79,209,197,0.2); }
[data-mode="illustrated"] .mode-toggle-pip::after {
  transform: translateX(14px); background: var(--teal);
}
.mode-toggle-label-illustrated { display: none; }
.mode-toggle-label-facts { display: inline; }
[data-mode="illustrated"] .mode-toggle-label-illustrated { display: inline; }
[data-mode="illustrated"] .mode-toggle-label-facts { display: none; }

/* ── Main content area ───────────────────────────────────────────────────── */
.site-main { max-width: 860px; margin: 0 auto; padding: 40px 24px 80px; }

/* ── Typography ──────────────────────────────────────────────────────────── */
h1 { font-size: 2.2rem; font-weight: 800; color: var(--text); line-height: 1.2; margin-bottom: 0.5em; }
h2 { font-size: 1.5rem; font-weight: 700; color: var(--text); margin: 2em 0 0.6em; }
h3 { font-size: 1.2rem; font-weight: 600; color: var(--teal-lt); margin: 1.5em 0 0.4em; }
p  { margin-bottom: 1em; color: var(--text); }
a  { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
  font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
  font-size: 0.88em; background: var(--bg1); color: var(--teal-lt);
  padding: 2px 6px; border-radius: 3px;
}
pre {
  background: var(--bg3); border: 1px solid var(--bg2);
  border-radius: var(--radius); padding: 16px 20px; overflow-x: auto;
  margin: 1.2em 0;
}
pre code { background: none; padding: 0; color: var(--text2); }

/* ── Syntax highlighting (Prism tokens) ──────────────────────────────────── */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata             { color: #546e7a; font-style: italic; }
.token.keyword,
.token.selector,
.token.important,
.token.atrule            { color: #EC96B8; } /* pink */
.token.function,
.token.function-name     { color: #F4C471; } /* gold */
.token.string,
.token.attr-value,
.token.char,
.token.regex             { color: #81E6D9; } /* teal-lt */
.token.number,
.token.boolean,
.token.constant          { color: #E6B55E; } /* orange-gold */
.token.variable          { color: #4FD1C5; } /* teal */
.token.parameter,
.token.parameter.variable { color: #B0C4DE; } /* text2 */
.token.operator          { color: #607D8B; } /* muted */
.token.punctuation       { color: #546e7a; }
.token.class-name,
.token.builtin           { color: #EC96B8; } /* pink */
.token.tag               { color: #EC96B8; }
.token.attr-name         { color: #4FD1C5; }
.token.property          { color: #4FD1C5; }
.token.namespace         { color: #B0C4DE; }
.token.url               { color: #81E6D9; }
.token.inserted          { color: #27AE60; }
.token.deleted           { color: #FF6B6B; }
.token.bold              { font-weight: bold; }
.token.italic            { font-style: italic; }
hr { border: none; border-top: 1px solid var(--bg2); margin: 2em 0; }
ul, ol { padding-left: 1.4em; margin-bottom: 1em; }
li { margin-bottom: 0.3em; }
blockquote {
  border-left: 3px solid var(--teal); padding-left: 16px;
  color: var(--text2); font-style: italic; margin: 1.2em 0;
}

/* ── Callout blocks ──────────────────────────────────────────────────────── */
.callout {
  border-radius: var(--radius); padding: 14px 18px; margin: 1.4em 0;
  border-left: 3px solid var(--teal);
  background: rgba(79,209,197,0.06);
}
.callout--warn  { border-color: var(--gold); background: rgba(244,196,113,0.06); }
.callout--deep-dive { border-color: var(--pink); background: rgba(236,150,184,0.06); }
.callout-icon { font-size: 1.1em; margin-right: 6px; }

/* In Facts mode: strip callout decoration, keep content */
[data-mode="facts"] .callout {
  border-left: 2px solid var(--teal); background: none; padding-left: 14px;
}
[data-mode="facts"] .callout--warn  { border-color: var(--gold); }
[data-mode="facts"] .callout--deep-dive { border-color: var(--pink); }
[data-mode="facts"] .callout-icon { display: none; }
[data-mode="facts"] .callout-narrator { display: none; }

/* ── Spot illustrations (Illustrated mode only) ──────────────────────────── */
.spot-illustration { display: block; margin: 1.5em auto; max-width: 320px; opacity: 0.85; }
[data-mode="facts"] .spot-illustration { display: none; }
[data-mode="facts"] .illustrated-only { display: none; }

/* ── Shared chunk marker (illustrated mode only) ─────────────────────────── */
.shared-chunk-marker {
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted); border-top: 1px solid rgba(79,209,197,0.12);
  padding-top: 6px; margin-bottom: 4px;
}
[data-mode="facts"] .shared-chunk-marker { display: none; }

/* ── Video placeholder ───────────────────────────────────────────────────── */
.video-placeholder {
  background: var(--bg1); border: 1px dashed rgba(79,209,197,0.3);
  border-radius: var(--radius); padding: 24px; text-align: center;
  margin: 1.5em 0; color: var(--muted); font-size: 13px;
}
.video-placeholder strong { display: block; color: var(--text2); margin-bottom: 4px; }

/* ── Chapter nav (track pages) ───────────────────────────────────────────── */
.track-layout { display: flex; gap: 0; min-height: calc(100vh - 52px); }
.chapter-nav {
  width: 220px; flex-shrink: 0; background: var(--bg3);
  border-right: 1px solid rgba(79,209,197,0.12);
  padding: 20px 0; position: sticky; top: var(--nav-h);
  height: calc(100vh - var(--nav-h)); overflow-y: auto;
}
.chapter-nav-label {
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted); padding: 0 16px 8px;
}
.chapter-nav-back {
  display: block; font-size: 13px; color: var(--muted);
  padding: 5px 16px 12px; text-decoration: none;
  border-bottom: 1px solid rgba(79,209,197,0.08); margin-bottom: 8px;
}
.chapter-nav-back:hover { color: var(--teal); }
.chapter-nav-item {
  display: block; font-size: 14px; color: var(--muted);
  padding: 7px 16px; text-decoration: none;
  transition: color 0.1s, background 0.1s;
  border-left: 3px solid transparent;
}
.chapter-nav-item:hover { color: var(--text); background: var(--bg1); }
.chapter-nav-item.active { color: var(--persona-color, var(--teal)); border-left-color: var(--persona-color, var(--teal)); background: rgba(79,209,197,0.06); font-weight: 600; }
.track-content { flex: 1; min-width: 0; padding: 40px 40px 80px; max-width: 920px; }

/* ── Mobile: collapse the chapter sidebar into a horizontal strip ─────────────
   Below 768px the 220px sticky sidebar would crush the reading column to an
   unusable width, so the nav stacks above the content as a sticky, horizontally
   scrollable chapter strip (active chapter auto-centred via main.js) and the
   content takes the full viewport width. */
@media (max-width: 768px) {
  .track-layout { flex-direction: column; min-height: 0; }

  .chapter-nav {
    width: 100%; height: auto;
    position: sticky; top: var(--nav-h); z-index: 90;
    flex-shrink: 0; padding: 0;
    border-right: none;
    border-bottom: 1px solid rgba(79,209,197,0.12);
    background: var(--bg3);
    display: flex; align-items: stretch;
    overflow-x: auto; overflow-y: hidden; white-space: nowrap;
    scrollbar-width: none; /* the strip scrolls by touch; hide the bar */
  }
  .chapter-nav::-webkit-scrollbar { display: none; }

  /* The track name is implied by context on mobile — recover the space. */
  .chapter-nav-label { display: none; }

  .chapter-nav-back {
    border-bottom: none; margin: 0; flex-shrink: 0;
    align-self: center; padding: 10px 14px;
  }
  /* Tabs read horizontally: swap the left active-bar for an underline. */
  .chapter-nav-item {
    border-left: none; border-bottom: 3px solid transparent;
    padding: 12px 14px; flex-shrink: 0;
  }
  .chapter-nav-item.active {
    border-left-color: transparent;
    border-bottom-color: var(--persona-color, var(--teal));
  }

  .track-content { padding: 28px 20px 64px; max-width: none; }
}

/* ── Responsive top nav ───────────────────────────────────────────────────────
   The bar carries the logo, four path links, two toggles and a GitHub button.
   Shed the lowest-value pieces as width drops so it never overflows a phone. */
@media (max-width: 860px) {
  .tt-nav-links { display: none; } /* paths reachable from home + the chapter strip */
}
@media (max-width: 480px) {
  .tt-top-nav { padding: 0 14px; gap: 8px; }
  .mode-toggle { padding: 4px 6px; }
  .tt-nav-btn-github span { display: none; }   /* icon only */
  .mode-toggle-label-illustrated,
  [data-mode="illustrated"] .mode-toggle-label-illustrated,
  .mode-toggle-label-facts { display: none; }  /* toggle collapses to its switch */
}

/* ── Persona colors via data-persona ─────────────────────────────────────── */
[data-persona="first-timer"]     { --persona-color: var(--teal); }
[data-persona="ml-practitioner"] { --persona-color: var(--pink); }
[data-persona="builder-hacker"]  { --persona-color: var(--gold); }
[data-persona="tinkerer"]        { --persona-color: var(--green); }

/* ── Landing hero ────────────────────────────────────────────────────────── */
.hero { text-align: center; padding: 48px 24px 32px; }
.hero-eyebrow { font-size: 0.95rem; color: var(--muted); margin: 0 0 4px; letter-spacing: 0.01em; }
.hero-title { font-size: 2.6rem; font-weight: 700; color: var(--text); letter-spacing: -0.5px; margin: 0 0 16px; }
.hero-title sup { font-size: 0.5em; vertical-align: super; font-weight: 400; }
.hero-couplet { margin: 0 auto; max-width: 480px; color: var(--text2); font-size: 0.95rem; transition: opacity 0.3s; display: flex; flex-direction: column; justify-content: center; }
.hero-couplet p { margin: 0; }
.hero-postscript { text-align: center; max-width: 560px; margin: 6px auto 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.hero-postscript strong { color: var(--text2); font-weight: 600; }

/* ── Home layout: venn + cards side by side on wide screens ─────────────── */
.home-layout { display: flex; flex-direction: column; align-items: center; }
@media (min-width: 900px) {
  .home-layout {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 0 32px;
    max-width: 1080px;
    margin: 0 auto;
  }
  .home-layout .venn-wrap { flex: 0 0 auto; padding: 0; }
  .home-layout .persona-cards {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: center;
    width: 480px;
    padding: 0 0 0;
    margin: 0;
  }
}

/* ── Venn diagram ────────────────────────────────────────────────────────── */
.venn-wrap { display: flex; justify-content: center; padding: 20px 0 10px; }
.venn-svg { width: min(520px, 90vw); height: auto; }
.venn-circle { fill: rgba(79,209,197,0.04); stroke-width: 1.5; transition: fill 0.2s; cursor: pointer; }
.venn-circle[data-persona="first-timer"]     { stroke: var(--teal); }
.venn-circle[data-persona="ml-practitioner"] { stroke: var(--pink); }
.venn-circle[data-persona="builder-hacker"]  { stroke: var(--gold); }
.venn-circle[data-persona="tinkerer"]        { stroke: var(--green); }
.venn-circle.highlight  { fill: rgba(79,209,197,0.1); }
[data-persona="first-timer"]:hover, [data-persona="first-timer"].highlight     { fill: rgba(79,209,197,0.12); }
[data-persona="ml-practitioner"]:hover, [data-persona="ml-practitioner"].highlight { fill: rgba(236,150,184,0.12); }
[data-persona="builder-hacker"]:hover, [data-persona="builder-hacker"].highlight    { fill: rgba(244,196,113,0.12); }
[data-persona="tinkerer"]:hover, [data-persona="tinkerer"].highlight                { fill: rgba(39,174,96,0.12); }
.venn-label { font-size: 13px; fill: var(--muted); pointer-events: none; text-anchor: middle; }
.venn-intersection-label { font-size: 11px; fill: rgba(79,209,197,0.4); pointer-events: none; text-anchor: middle; }
.venn-intersection { fill: rgba(79,209,197,0.0); cursor: default; }
.venn-intersection:hover .venn-intersection-label { fill: var(--teal); }

/* ── Persona cards ───────────────────────────────────────────────────────── */
.persona-cards { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; padding: 20px 24px 60px; max-width: 960px; margin: 0 auto; }
.persona-card {
  flex: 1 1 200px; max-width: 240px;
  background: var(--bg1); border-radius: var(--radius);
  border-left: 3px solid var(--persona-color, var(--teal));
  padding: 16px 18px; text-decoration: none; color: var(--text);
  transition: background 0.15s, transform 0.15s;
}
.persona-card:hover { background: var(--bg2); transform: translateY(-2px); text-decoration: none; }
.persona-card-verb { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--persona-color, var(--teal)); margin-bottom: 8px; }
.persona-card-name { font-weight: 700; font-size: 15px; color: var(--text); line-height: 1.35; margin-bottom: 10px; min-height: 4em; }
.persona-card-meta { font-size: 12px; color: var(--muted); }
.persona-card-enter { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--persona-color, var(--teal)); font-weight: 600; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.4em 0;
  font-size: 0.95em;
}
th, td {
  border: 1px solid rgba(79,209,197,0.15);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
th {
  background: var(--bg1);
  color: var(--teal-lt);
  font-weight: 600;
  font-size: 0.85em;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
tr:hover td { background: rgba(79,209,197,0.04); }
@media (max-width: 640px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Figures / video demo embeds ─────────────────────────────────────────── */
figure.video-demo { margin: 1.8em 0; }
figure.video-demo img { display: block; max-width: 100%; border-radius: var(--radius); }
figure.video-demo figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); text-align: center; font-style: italic; }

/* ── Read (long-form) page ───────────────────────────────────────────────── */
.read-chapter { border-top: 1px solid var(--bg2); padding-top: 2.5em; margin-top: 2.5em; }
.read-chapter-number { font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }

/* ── Spec sheet section ──────────────────────────────────────────────────── */
.specsheet-section {
  max-width: 1080px; margin: 48px auto 0; padding: 0 32px;
}
.specsheet-wrap {
  background: var(--bg1); border: 1px solid var(--bg2);
  border-top: 3px solid var(--teal);
  border-radius: var(--radius); padding: 28px 32px;
}
.specsheet-product {
  display: flex; align-items: center; gap: 32px;
  margin-bottom: 24px; padding-bottom: 20px;
  border-bottom: 1px solid var(--bg2);
}
.specsheet-photo {
  flex: 0 0 auto; margin: 0; width: 260px; max-width: 38%;
  display: flex; align-items: center; justify-content: center;
  /* teal glow behind the transparent product render */
  background: radial-gradient(circle at 50% 46%,
    rgba(79,209,197,0.18), rgba(79,209,197,0.05) 46%, transparent 70%);
}
.specsheet-photo img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,0.5));
}
.specsheet-intro { flex: 1 1 auto; min-width: 0; }
.specsheet-intro .specsheet-link { display: inline-block; margin-top: 12px; }
@media (max-width: 640px) {
  .specsheet-product { flex-direction: column; text-align: center; gap: 8px; }
  .specsheet-photo { width: 200px; max-width: 66%; }
}
.specsheet-title {
  font-size: 1.2rem; font-weight: 700; color: var(--text);
  margin: 0 0 4px; line-height: 1;
}
.specsheet-title sup { font-size: 0.55em; vertical-align: super; font-weight: 400; }
.specsheet-sub { font-size: 13px; color: var(--muted); margin: 0; }
.specsheet-link {
  font-size: 13px; color: var(--teal); white-space: nowrap;
  text-decoration: none; font-weight: 600;
}
.specsheet-link:hover { text-decoration: underline; }

.specsheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px 32px;
}
.specsheet-group-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 10px;
}
.specsheet-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 5px 0;
  border-bottom: 1px solid rgba(79,209,197,0.07);
  font-size: 13px;
}
.specsheet-row:last-child { border-bottom: none; }
.specsheet-row span:first-child { color: var(--muted); white-space: nowrap; }
.specsheet-row span:last-child  { color: var(--text); text-align: right; }

.specsheet-source {
  margin: 20px 0 0; font-size: 12px; color: var(--muted);
  padding-top: 14px; border-top: 1px solid var(--bg2);
}
.specsheet-source a { color: var(--muted); text-decoration: underline; }
.specsheet-source a:hover { color: var(--teal); }

/* ── Resource cards (lessons / repos / tools / models) ───────────────────── */
.rcard-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 14px; margin: 1.5em 0;
}
.rcard {
  display: flex; flex-direction: column; gap: 5px;
  background: var(--bg1); border: 1px solid var(--bg2);
  border-left: 3px solid var(--teal); border-radius: var(--radius);
  padding: 14px 16px; text-decoration: none; color: var(--text);
  transition: background 0.15s, transform 0.15s;
}
.rcard:hover { background: var(--bg2); transform: translateY(-2px); text-decoration: none; }
.rcard--repo  { border-left-color: var(--gold); }
.rcard--lesson { border-left-color: var(--teal); }
.rcard--model { border-left-color: var(--pink); }
.rcard--tool, .rcard--site { border-left-color: var(--green); }
.rcard-kind { font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.rcard-title { font-weight: 700; font-size: 14px; color: var(--text); }
.rcard--repo .rcard-title, .rcard--model .rcard-title { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; }
.rcard-desc { font-size: 12.5px; line-height: 1.5; color: var(--text2); }
.rcard-meta { font-size: 11px; color: var(--muted); margin-top: 2px; font-family: "JetBrains Mono", ui-monospace, monospace; }

/* ── Compatibility matrix section ────────────────────────────────────────── */
.compat-section {
  max-width: 1080px; margin: 48px auto 0; padding: 0 32px 80px;
}
.compat-header { margin-bottom: 24px; }
.compat-title { font-size: 1.4rem; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.compat-subtitle { font-size: 0.95rem; color: var(--text2); margin: 0 0 4px; }
.compat-updated { font-size: 12px; color: var(--muted); margin: 0; }

.compat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.compat-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg1); border-radius: var(--radius);
  border: 1px solid var(--bg2);
  border-top: 3px solid var(--bg2);
  padding: 14px 16px; text-decoration: none; color: var(--text);
  transition: background 0.15s, transform 0.15s;
}
.compat-card:hover { background: var(--bg2); transform: translateY(-2px); text-decoration: none; }
.compat-card--supported  { border-top-color: var(--teal); }
.compat-card--experimental { border-top-color: var(--gold); }

.compat-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.compat-status {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 10px;
}
.compat-status--supported    { background: rgba(79,209,197,0.15); color: var(--teal); }
.compat-status--experimental { background: rgba(244,196,113,0.15); color: var(--gold); }

.compat-task { font-size: 11px; color: var(--muted); }

.compat-card-name { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3; }
.compat-card-size { font-size: 12px; color: var(--teal-lt); }
.compat-card-desc { font-size: 12px; color: var(--text2); line-height: 1.45; flex: 1; }

.compat-card-footer { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.compat-sw {
  font-size: 11px; color: var(--muted);
  background: var(--bg2); border-radius: 4px;
  padding: 2px 6px;
}

/* ── Print styles ────────────────────────────────────────────────────────── */
@media print {
  .tt-top-nav, .chapter-nav, .mode-toggle, .readall-actions, .persona-cards, .venn-wrap,
  .video-placeholder { display: none !important; }
  body { background: white; color: #111; font-size: 12pt; }
  a { color: #111; }
  pre { border: 1px solid #ccc; }
  .read-chapter { page-break-before: always; }
  .read-chapter:first-child { page-break-before: avoid; }
}

/* ── Light-theme component tweaks ─────────────────────────────────────────────
   Most components recolour from the token swap alone. These few need explicit
   treatment because they pair light surfaces with dark code/widget panels: code
   blocks stay dark-green so the (dark-tuned) syntax colors keep their contrast. */
[data-theme="light"] pre { background: #092221; border-color: #0E3331; }
[data-theme="light"] pre code { color: #D9E8E5; }
[data-theme="light"] code { background: #E5F2F1; color: #10657f; }
[data-theme="light"] .persona-card,
[data-theme="light"] .rcard,
[data-theme="light"] .compat-card,
[data-theme="light"] .specsheet-wrap { box-shadow: 0 1px 3px rgba(9, 34, 33, 0.05); }
[data-theme="light"] .venn-wrap { background: #ECF5F4; border: 1px solid var(--bg2); border-radius: 16px; padding: 24px; }
[data-theme="light"] .venn-label { fill: #3A5452; }
[data-theme="light"] table th { color: #10657f; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 18px;
  border-radius: var(--radius); font-size: 14px; font-weight: 600; cursor: pointer;
  text-decoration: none; border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, filter 0.15s;
}
.btn--primary { background: var(--teal); color: var(--bg0); }
.btn--primary:hover { filter: brightness(1.08); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--text2); border-color: var(--bg2); }
.btn--ghost:hover { border-color: var(--teal); color: var(--text); }

/* ── Read-all (complete guide) page ──────────────────────────────────────── */
.readall-head { padding: 8px 0; border-bottom: 1px solid var(--bg2); }
.readall-eyebrow { font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.readall-lede { color: var(--text2); font-size: 1.05rem; max-width: 640px; }
.readall-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 4px; }

.readall-toc {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px 28px;
  margin: 28px 0 8px; padding: 22px 24px;
  background: var(--bg1); border: 1px solid var(--bg2); border-radius: var(--radius);
}
.readall-toc-track[data-persona] { border-left: 3px solid var(--persona-color, var(--teal)); padding-left: 14px; }
.readall-toc-title { display: block; font-weight: 700; font-size: 13px; color: var(--persona-color, var(--teal)); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.06em; }
.readall-toc-chapters { list-style: none; margin: 0; padding: 0; }
.readall-toc-chapters li { margin: 0 0 4px; font-size: 13px; line-height: 1.4; }
.readall-toc-chapters a { color: var(--text2); }
.readall-toc-chapters a:hover { color: var(--teal); }

.readall-track { margin-top: 44px; scroll-margin-top: calc(var(--nav-h) + 12px); }
.readall-track-banner { border-left: 4px solid var(--persona-color, var(--teal)); padding: 4px 0 4px 18px; margin-bottom: 8px; }
.readall-track-verb { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--persona-color, var(--teal)); font-weight: 700; }
.readall-track-banner h2 { margin: 4px 0 6px; }
.readall-track-banner p { color: var(--text2); margin: 0; }
.readall .read-chapter { scroll-margin-top: calc(var(--nav-h) + 12px); }