/* ==========================================================================
   NodeCraft — design system
   Dark-first, token-driven. Every colour is a semantic token so light/dark
   stay in lockstep. Spacing follows a 4px rhythm.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */

:root {
  /* ------------------------------------------------------------------
     DARK IS THE BASE. :root carries the charcoal palette and
     html[data-theme="light"] layers the paper one on top. Authoring it
     this way means a token added here is dark by default and has to be
     deliberately given a light value, rather than the reverse — which is
     how dark themes drift out of sync.

     The greys are warm charcoal, not blue-black. A blue-tinted dark UI
     reads as a code editor; this is a reference work, so the ground is
     closer to ink on slate. Every step is a real step: the surfaces are
     spaced far enough apart to be distinguishable at a glance without
     any of them turning into a light grey box.
     ------------------------------------------------------------------ */

  /* surfaces — charcoal, warm-neutral, five real steps */
  --bg: #101215;
  /* above --bg, not below: this is the sidebar and topbar ground, and a
     darker rail reads as a black gutter rather than as a raised surface.
     Each step is at least ~1.06 contrast from the one before, which is
     roughly where an edge stops being visible on a dark ground. Neutral
     greys, barely warm — there is no colour cast anywhere in this ramp. */
  --bg-2: #141619;
  --surface: #191c20;
  --surface-2: #20242a;
  --surface-3: #292e35;
  --surface-hi: #343941;

  /* lines — each visibly above the surface it sits on */
  --border: #282c33;
  --border-2: #363b44;
  --border-3: #474d58;

  /* text — 15.8:1, 7.4:1 and 4.8:1 on --bg, so every step clears AA */
  --text: #f2f3f5;
  --text-2: #b8bcc2;
  --text-3: #8b9099;
  --text-inv: #101215;

  /* brand — lifted for a dark ground. The light greens sit at #08976a,
     which is 2.3:1 here and unreadable; these are the same hues taken up
     in lightness until they carry. */
  --accent: #2fd39b;
  --accent-soft: rgba(47, 211, 155, .13);
  --accent-line: rgba(47, 211, 155, .34);
  --accent-2: #8b96ff;
  --accent-2-soft: rgba(139, 150, 255, .14);
  --accent-3: #f0b45c;
  --danger: #ff7a8c;
  --danger-soft: rgba(255, 122, 140, .14);

  /* effects — on a dark ground a shadow does almost nothing, so depth
     comes from the surface steps above and these stay subtle */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .34);
  --shadow-2: 0 6px 20px -6px rgba(0, 0, 0, .48);
  --shadow-3: 0 22px 50px -16px rgba(0, 0, 0, .62);
  --scrim: rgba(6, 8, 11, .68);
  --dot: rgba(255, 255, 255, .045);
  --code-bg: #1a1d23;
}

html[data-theme="light"] {
  --bg: #f6f8fb;
  --bg-2: #eef2f8;
  --surface: #ffffff;
  --surface-2: #f4f7fb;
  --surface-3: #e9eff7;
  --surface-hi: #dee7f2;

  --border: #e0e6f0;
  --border-2: #cdd7e6;
  --border-3: #b4c2d6;

  --text: #0d1420;
  --text-2: #46536a;
  --text-3: #6b7891;
  --text-inv: #ffffff;

  --accent: #08976a;
  --accent-soft: rgba(8, 151, 106, .10);
  --accent-line: rgba(8, 151, 106, .28);
  --accent-2: #4d5bd8;
  --accent-2-soft: rgba(77, 91, 216, .10);
  --accent-3: #b46a05;
  --danger: #cf3348;
  --danger-soft: rgba(207, 51, 72, .10);

  --shadow-1: 0 1px 2px rgba(16, 32, 64, .06);
  --shadow-2: 0 6px 20px -6px rgba(16, 32, 64, .14);
  --shadow-3: 0 22px 50px -16px rgba(16, 32, 64, .22);
  --scrim: rgba(20, 28, 44, .42);
  --dot: rgba(20, 40, 80, .075);
  --code-bg: #f2f5fa;
}

:root {
  /* type */
  /* Headings are set in a serif. The site is a reference work, and a
     reference work is read, not used — a transitional serif carries that
     where a geometric sans reads like a product page. Newsreader is an
     optical-size face, so it stays sharp from a 13px card title up to the
     landing headline.

     --font-head-sans is kept for the few places that genuinely want a UI
     face at heading weight: buttons, tabs, the brand mark. */
  --font-head: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino,
    Georgia, "Times New Roman", serif;
  --font-head-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --fs-xs: .75rem;
  /* 12 */
  --fs-sm: .8125rem;
  /* 13 */
  --fs-base: .9375rem;
  /* 15 */
  --fs-md: 1rem;
  /* 16 */
  --fs-lg: 1.125rem;
  /* 18 */
  --fs-xl: 1.375rem;
  /* 22 */
  --fs-2xl: 1.75rem;
  /* 28 */
  --fs-3xl: 2.25rem;
  /* 36 */
  --fs-4xl: 3rem;
  /* 48 */

  /* shape */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* layout */
  --topbar-h: 62px;
  --sidebar-w: 264px;
  --measure: 68ch;

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --t-fast: 140ms;
  --t-mid: 220ms;
  --t-slow: 320ms;

  /* z */
  --z-bg: 0;
  --z-content: 10;
  --z-sidebar: 40;
  --z-topbar: 60;
  --z-overlay: 100;
  --z-toast: 200;

  --ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
}

/* ---------- 2. Reset & base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  font-feature-settings: "cv02", "cv03", "cv04", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.no-scroll {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-head);
  /* 500, not 600: a serif carries weight optically that a sans has to state,
     and Newsreader at 600 turns muddy at card-title sizes */
  font-weight: 500;
  line-height: 1.25;
  /* serifs need less negative tracking than a geometric sans */
  letter-spacing: -.008em;
  margin: 0;
  color: var(--text);
}

/* the larger a serif is set, the tighter it wants to be */
h1 {
  font-weight: 400;
  letter-spacing: -.018em;
}

h2 {
  letter-spacing: -.012em;
}

/* Emphasis inside body copy stays on the body face. A bold serif dropped into
   a paragraph of Inter reads as a quotation from somewhere else rather than as
   emphasis, which is the opposite of what bold is for. */
b,
strong,
.b,
.bold {
  font-family: inherit;
  font-weight: 600;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

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

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}

a:hover {
  color: var(--text);
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

kbd {
  font-family: var(--font-mono);
  font-size: .6875rem;
  line-height: 1;
  padding: 3px 6px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  border-bottom-width: 2px;
  color: var(--text-2);
  white-space: nowrap;
}

code {
  font-family: var(--font-mono);
  font-size: .875em;
}

/* *emphasis* from TD.rich — a shade brighter than the body copy around it */
em {
  font-style: italic;
  color: var(--text);
}

::selection {
  background: var(--accent-soft);
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: var(--r-pill);
  border: 3px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-3);
}

.skip-link {
  position: fixed;
  top: -60px;
  left: 12px;
  z-index: 999;
  padding: 10px 18px;
  background: var(--accent);
  color: var(--text-inv);
  font-weight: 600;
  border-radius: var(--r-sm);
  transition: top var(--t-mid) var(--ease-out);
}

.skip-link:focus {
  top: 12px;
  color: var(--text-inv);
}

/* ---------- 3. Ambient background ---------- */

.bg-grid {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 30%, transparent 78%);
}

/* The tinted page glow is gone. It was two blurred blobs bleeding under the
   topbar, and on a charcoal ground a coloured haze is the most conspicuous
   thing on the screen — it read as a smear rather than as atmosphere. The
   element is kept so nothing has to change in index.html, but it paints
   nothing in either theme. */
.bg-glow {
  display: none;
}

/* ---------- 4. Top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  height: var(--topbar-h);
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* The brand is a plate, so it follows the palette rather than being pinned
   to white — a white pill on charcoal is the brightest thing on the page and
   pulls the eye away from the content it is supposed to be labelling. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-family: var(--font-head-sans);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -.02em;
  flex: none;
  padding: 4px 10px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-1);
  transition: transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out);
}

.brand:hover {
  color: var(--text);
  background: var(--surface-2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.brand:hover .brand-mark {
  transform: scale(1.06);
}

.brand-text {
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  flex: none;
  /* The logo asset is black ink on transparent. On paper that is fine; on
     charcoal it would be invisible, and a white plate behind it punches a
     hole in the header. So in dark the mark is inverted to sit directly on
     the page instead of on a plate — see the rule below. */
  background: transparent;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: transform var(--t-mid) var(--ease-out);
}

.brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Light theme: the ink is already the right colour, so it needs a paper
   plate to sit on the way it does in print. */
html[data-theme="light"] .brand-mark {
  background: #ffffff;
  border-color: rgba(0, 0, 0, .1);
}

/* Dark theme: invert the black ink to near-white so the mark reads directly
   on the charcoal, with no plate at all. One filter is cheaper and sharper
   than shipping a second asset, and it tracks the palette automatically. */
html[data-theme="dark"] .brand-logo-img {
  filter: invert(1) brightness(1.08);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-family: var(--font-head-sans);
  font-weight: 800;
  font-size: 1.125rem;
  padding: 6px 14px;
  background: var(--surface);
  border-radius: var(--r-md);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-1);
  margin-bottom: 12px;
}

.footer-brand .brand-text {
  color: var(--text);
}

.footer-brand-mark {
  width: 24px;
  height: 24px;
}

.brand-accent {
  color: var(--text);
}

.searchbar {
  flex: 1;
  max-width: 540px;
  margin-inline: auto;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 0 12px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-3);
  text-align: left;
  transition: border-color var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
}

.searchbar:hover {
  border-color: var(--border-3);
  background: var(--surface-2);
}

.searchbar:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

.searchbar-icon {
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--ico-search) center / contain no-repeat;
  mask: var(--ico-search) center / contain no-repeat;
}

.searchbar-label {
  flex: 1;
  font-size: var(--fs-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.searchbar-kbd {
  flex: none;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

.icon-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--text-2);
  position: relative;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.icon-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

.icon-btn:active {
  background: var(--surface-3);
}

/* ---------- the theme control ----------
   A contrast disc: one ring with half of it inked — the printer's mark for
   tone. It says what the control *does* (invert the page) rather than naming
   a time of day, which is the wrong idea anyway once a third
   "follow the system" state exists.

   The three states are read off how much of the disc is inked, not off a
   rotation — a half-disc turned 180 degrees is the same picture, so light and
   dark were indistinguishable at 19px. Instead the ink *grows*:

     light   a quarter inked, solid ring   (mostly paper)
     dark    fully inked, solid ring       (all ink)
     system  half inked, dotted ring       (undecided)

   The fill scales about the disc's centre, so it always stays inside the
   ring at every state and animates as one object filling up. */

/* one fill visible at a time; they cross-fade rather than transform, so the
   circle is never distorted */
.theme-btn .ico-theme-f {
  opacity: 0;
  transition: opacity 320ms cubic-bezier(.16, 1, .3, 1);
}

.theme-btn .ico-theme-ring {
  transition: stroke-dasharray 300ms var(--ease-out);
}

.theme-btn[data-theme-pref="light"] .ico-theme-quarter,
.theme-btn[data-theme-pref="dark"] .ico-theme-full,
.theme-btn[data-theme-pref="system"] .ico-theme-half {
  opacity: 1;
}

/* "system" is a deferral rather than a choice, so the ring stops being a
   solid commitment — dashes read as "not fixed" without needing a label */
.theme-btn[data-theme-pref="system"] .ico-theme-ring {
  stroke-dasharray: 2.3 3.1;
}

@media (prefers-reduced-motion: reduce) {

  .theme-btn .ico-theme-ring,
  .theme-btn .ico-theme-f {
    transition: none;
  }
}

/* ---------- theme crossfade ----------
   Repainting every surface at once is jarring, so colour-carrying properties
   get a short transition. Deliberately scoped to colour only: adding
   `all` here would animate layout on every hover across the entire site.

   .theme-swap is set for the duration of a switch and removed after, so
   these transitions cost nothing during normal interaction. */

html.theme-swap,
html.theme-swap body,
html.theme-swap .topbar,
html.theme-swap .sidebar,
html.theme-swap .main,
html.theme-swap .view {
  transition: background-color 260ms var(--ease-out),
    border-color 260ms var(--ease-out),
    color 260ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {

  html.theme-swap,
  html.theme-swap body,
  html.theme-swap .topbar,
  html.theme-swap .sidebar,
  html.theme-swap .main,
  html.theme-swap .view {
    transition: none;
  }
}

.icon-btn svg {
  width: 19px;
  height: 19px;
}

.dot-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--text-inv);
  font-size: 9px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  border: 2px solid var(--bg);
}

.nav-toggle {
  display: none;
}

.read-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  overflow: hidden;
}

.read-progress>span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 90ms linear;
}

/* ---------- 5. Shell + sidebar ---------- */

.shell {
  position: relative;
  z-index: var(--z-content);
  max-width: 1560px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: var(--topbar-h);
  height: calc(100dvh - var(--topbar-h));
  border-right: 1px solid var(--border);
  z-index: var(--z-sidebar);
  background: transparent;
}

.sidebar-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 12px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.side-block {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.side-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0 10px 8px;
}

.side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-base);
  /* A nav list reads as a list. Weight here competes with the page's own
     headings for attention and loses the hierarchy. */
  font-weight: 400;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
  position: relative;
}

.side-link:hover {
  background: var(--surface-2);
  color: var(--text);
}

.side-link.is-active {
  background: var(--surface-2);
  color: var(--text);
  /* the active row is marked by the rule, the tint and the icon colour —
     it does not also need to be bolder */
  font-weight: 500;
}

.side-link.is-active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--cat, var(--accent));
}

.side-ico {
  width: 17px;
  height: 17px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-3);
}

.side-link.is-active .side-ico {
  color: var(--cat, var(--accent));
}

.side-ico svg {
  width: 17px;
  height: 17px;
}

.side-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  flex: none;
  background: var(--cat);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat) 16%, transparent);
}

.side-count {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  background: var(--surface-2);
  border-radius: var(--r-pill);
  padding: 1px 7px;
}

.side-link.is-active .side-count {
  background: var(--surface-3);
  color: var(--text-2);
}

.side-foot {
  margin-top: auto;
  padding: 14px 10px 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.side-stat {
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.side-stat strong {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.side-hint {
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.8;
}

.sidebar-scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: 39;
  backdrop-filter: blur(2px);
}

/* ---------- 6. Main / view ---------- */

.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.view {
  flex: 1;
  padding: 34px 32px 72px;
  max-width: 1180px;
  width: 100%;
}

.view-enter {
  animation: viewIn var(--t-slow) var(--ease-out) both;
}

@keyframes viewIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 7. Buttons, chips and the search suggestion list ----------
   What is left of the old home page. The rotating hero card, its aura, its
   rail and its stat row all went with viewHome(); the landing page is in
   landing.css now. These stayed because they are used site-wide. */

.hero {
  --cat: var(--accent);
  position: relative;
  padding: 16px 0 8px;
  overflow-x: clip;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--accent-line);
  }

  70% {
    box-shadow: 0 0 0 8px transparent;
  }

  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

.hero h1 {
  font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.75rem, 2.75vw, 2.4rem);
  margin: 0;
  max-width: 22ch;
  letter-spacing: -0.025em;
  font-weight: 450;
  line-height: 1.18;
  color: #0d1420;
  text-wrap: balance;
}

.hero h1 .grad {
  background: linear-gradient(100deg, var(--accent), var(--accent-2) 46%, var(--accent) 92%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradPan 11s ease-in-out infinite alternate;
}

@keyframes gradPan {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 100% 50%;
  }
}

.hero-sub {
  margin-top: 12px;
  max-width: 60ch;
  font-size: 0.875rem;
  color: var(--text-2);
  line-height: 1.6;
  text-wrap: pretty;
}

.hero-sub b {
  color: var(--text);
  font-weight: 600;
}

/* --- the hero search field: this page's primary action --- */

/* --- inline suggestions: answers without leaving the page --- */

.hero-sug {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  animation: sugIn 160ms var(--ease-out) both;
}

@keyframes sugIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.hero-sug-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
}

.hero-sug-item {
  --cat: var(--accent);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r-md);
  cursor: pointer;
  min-width: 0;
}

.hero-sug-item.is-active {
  background: var(--surface-2);
}

.hero-sug-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--cat);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat) 16%, transparent);
}

.hero-sug-main {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 2px;
}

.hero-sug-t {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-sug-d {
  font-size: var(--fs-sm);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-sug-c {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--cat);
  opacity: .85;
}

.hero-sug-item mark {
  background: var(--surface-2);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

.hero-sug-none {
  padding: 14px 12px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.6;
}

.hero-sug-none b {
  color: var(--text);
}

.hero-sug-foot {
  margin: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-size: var(--fs-xs);
  color: var(--text-3);
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-2);
  transition: transform var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out);
}

.chip:hover {
  background: var(--surface-3);
  border-color: var(--border-3);
  color: var(--text);
  transform: translateY(-1px);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
}

.btn:active {
  transform: scale(.975);
}

.btn svg {
  width: 17px;
  height: 17px;
}

.btn-primary {
  background: var(--accent);
  color: var(--text-inv);
}

.btn-primary:hover {
  background: var(--surface-2);
  background: color-mix(in srgb, var(--accent) 86%, var(--text));
  color: var(--text-inv);
}

.btn-ghost {
  background: var(--surface);
  border-color: var(--border-2);
  color: var(--text);
}

.btn-ghost:hover {
  background: var(--surface-2);
  border-color: var(--border-3);
  color: var(--text);
}

.btn-sm {
  min-height: 36px;
  padding: 0 12px;
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
}

.btn-md {
  min-height: 40px;
  padding: 0 16px;
  font-size: var(--fs-sm);
}

.stat {
  position: relative;
  background: var(--surface);
  padding: 18px 20px;
  transition: background var(--t-fast) var(--ease-out);
}

.stat::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease-out);
}

.stat:hover {
  background: var(--surface-2);
}

.stat:hover::after {
  transform: scaleX(1);
}

/* coarse pointers (phones, tablets) get full-size tap targets */
@media (pointer: coarse) {
  .chip {
    min-height: 44px;
    padding: 0 16px;
  }

  .hero-sug-item {
    padding: 12px 11px;
  }
}

/* --- hero responsive --- */

@media (max-width: 1080px) {

  .hero h1 {
    max-width: 20ch;
  }

  .hero-sub {
    max-width: 62ch;
  }

}

@media (max-width: 620px) {
  .hero {
    padding: 14px 0 4px;
  }

  .hero h1 {
    font-size: clamp(1.85rem, 8vw, 2.3rem);
    max-width: none;
  }

  .hero-sub {
    font-size: var(--fs-md);
  }

  #heroSwap {
    min-height: 0;
  }

  .hero-sug-c {
    display: none;
  }

}

/* Decoration stops; the content and its layout do not. */
@media (prefers-reduced-motion: reduce) {

  .hero h1 .grad {
    animation: none;
  }

  .hero-sug {
    animation: none;
  }
}

/* section heads */
.sec {
  margin-top: 56px;
}

.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.sec-head h2 {
  font-size: var(--fs-xl);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sec-head h2::before {
  content: "";
  width: 4px;
  height: 20px;
  border-radius: 2px;
  background: var(--cat, var(--accent));
}

.sec-desc {
  font-size: var(--fs-sm);
  color: var(--text-3);
  max-width: 56ch;
}

.sec-link {
  font-size: var(--fs-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sec-link svg {
  width: 14px;
  height: 14px;
}

/* ---------- 8. Category cards ---------- */

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

.cat-card {
  --cat: var(--accent);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  overflow: hidden;
  transition: border-color var(--t-mid) var(--ease-out),
    transform var(--t-mid) var(--ease-out),
    box-shadow var(--t-mid) var(--ease-out);
}

/* No hover bloom. The card already gets a tinted border and a lift on hover,
   which says "target" without painting coloured light onto a flat ground. */
.cat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface-2);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-out);
  pointer-events: none;
}

.cat-card:hover {
  border-color: var(--border-2);
  border-color: color-mix(in srgb, var(--cat) 45%, var(--border));
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  color: var(--text);
}

.cat-card:hover::after {
  opacity: 1;
}

.cat-ico {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat) 14%, transparent);
  color: var(--cat);
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--cat) 26%, transparent);
}

.cat-ico svg {
  width: 21px;
  height: 21px;
}

.cat-name {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--fs-md);
}

.cat-desc {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.55;
  flex: 1;
}

.cat-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}

.cat-meta b {
  color: var(--cat);
  font-weight: 700;
}

/* ---------- 9. Term cards ---------- */

.term-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 12px;
}

.term-card {
  --cat: var(--accent);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 16px 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  transition: border-color var(--t-mid) var(--ease-out),
    background var(--t-mid) var(--ease-out),
    transform var(--t-mid) var(--ease-out);
}

.term-card:hover {
  border-color: var(--border-2);
  border-color: color-mix(in srgb, var(--cat) 42%, var(--border));
  background: var(--surface-2);
  transform: translateY(-2px);
  color: var(--text);
}

.term-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.term-card h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -.01em;
}

.term-card .abbr {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0;
  margin-top: 2px;
}

.term-card p {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.58;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.term-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.pip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--cat);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat) 12%, transparent);
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--cat) 22%, transparent);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.lvl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--r-xs);
  border: 1px solid var(--border-2);
  color: var(--text-3);
  background: var(--surface-2);
  white-space: nowrap;
}

.lvl[data-lvl="core"] {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.lvl[data-lvl="intermediate"] {
  color: var(--accent-2);
  border-color: var(--border-2);
  border-color: color-mix(in srgb, var(--accent-2) 34%, transparent);
  background: var(--accent-2-soft);
}

.lvl[data-lvl="advanced"] {
  color: var(--accent-3);
  border-color: var(--border-2);
  border-color: color-mix(in srgb, var(--accent-3) 34%, transparent);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--accent-3) 12%, transparent);
}

/* Hardcore reads differently from the other three on purpose. Core through
   advanced are a ramp in one colour family; hardcore is a warning, because
   the questions behind it are built around the plausible wrong answer and a
   reader deserves to see that coming. */
.lvl[data-lvl="hardcore"] {
  color: var(--danger);
  border-color: var(--border-2);
  border-color: color-mix(in srgb, var(--danger) 42%, transparent);
  background: var(--danger-soft);
  letter-spacing: .09em;
}

.qz-q .lvl[data-lvl="hardcore"] {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 8%, transparent);
}

/* ---------- 10. Article (term page) ---------- */

.crumbs {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-bottom: 20px;
}

.crumbs a {
  color: var(--text-3);
  font-weight: 500;
}

.crumbs a:hover {
  color: var(--text);
}

.crumbs .sep {
  opacity: .5;
}

.crumbs .cur {
  color: var(--text-2);
}

.article {
  max-width: 860px;
}

.art-head {
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--border-2);
}

.art-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.art-head h1 {
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  letter-spacing: -.03em;
  font-weight: 400;
}

.art-abbr {
  margin-top: 8px;
  font-size: var(--fs-md);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-base);
}

.art-def {
  margin-top: 18px;
  font-size: var(--fs-lg);
  line-height: 1.62;
  color: var(--text);
  padding-left: 16px;
  border-left: 3px solid var(--cat, var(--accent));
}

.art-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.art-body {
  padding-top: 28px;
}

.art-body>*+* {
  margin-top: 18px;
}

.art-body p {
  font-size: var(--fs-md);
  line-height: 1.78;
  color: var(--text-2);
  max-width: var(--measure);
}

.art-body p strong {
  color: var(--text);
  font-weight: 600;
}

.art-body p code,
.kpoints code,
.art-def code {
  background: var(--surface-3);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: var(--r-xs);
  color: var(--text);
}

.art-h2 {
  font-size: var(--fs-lg);
  margin-top: 36px !important;
  display: flex;
  align-items: center;
  gap: 9px;
  letter-spacing: -.015em;
}

.art-h2 .h2-ico {
  width: 24px;
  height: 24px;
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 13%, transparent);
  color: var(--cat, var(--accent));
  flex: none;
}

.art-h2 .h2-ico svg {
  width: 14px;
  height: 14px;
}

.kpoints {
  list-style: none;
  display: grid;
  gap: 9px;
  padding: 18px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  max-width: var(--measure);
}

.kpoints li {
  display: flex;
  gap: 11px;
  font-size: var(--fs-base);
  line-height: 1.62;
  color: var(--text-2);
}

.kpoints li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 2px;
  flex: none;
  margin-top: 9px;
  background: var(--cat, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat, var(--accent)) 15%, transparent);
}

.kpoints li b {
  color: var(--text);
  font-weight: 600;
}

/* code block */
.codebox {
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--code-bg);
  overflow: hidden;
  max-width: min(100%, 820px);
}

.codebox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.codebox-lang {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}

.codebox pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
  tab-size: 2;
}

.codebox .tok-kw {
  color: var(--accent-2);
}

.codebox .tok-str {
  color: var(--accent);
}

.codebox .tok-num {
  color: var(--accent-3);
}

.codebox .tok-com {
  color: var(--text-3);
  font-style: italic;
}

.codebox .tok-fn {
  color: #62b6ff;
}

html[data-theme="light"] .codebox .tok-fn {
  color: #1d6fd0;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-3);
  padding: 5px 9px;
  border-radius: var(--r-xs);
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.copy-btn:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}

.copy-btn svg {
  width: 13px;
  height: 13px;
}

/* diagram */
.figure {
  max-width: min(100%, 840px);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background:
    radial-gradient(var(--dot) 1px, transparent 1px) 0 0 / 18px 18px,
    var(--surface);
  padding: 20px 18px 14px;
}

.figure svg {
  display: block;
  width: 100%;
  height: auto;
}

.figure figcaption {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px dashed var(--border-2);
  font-size: var(--fs-sm);
  color: var(--text-3);
  text-align: center;
}

/* diagram svg theming */
.dg {
  --dg-line: var(--border-3);
  --dg-text: var(--text-2);
  --dg-head: var(--text);
}

.dg text {
  font-family: var(--font-body);
  fill: var(--dg-text);
  font-size: 11px;
}

.dg .t-title {
  fill: var(--dg-head);
  font-weight: 600;
  font-size: 12px;
}

.dg .t-sm {
  font-size: 9.5px;
  fill: var(--text-3);
}

.dg .t-mono {
  font-family: var(--font-mono);
  font-size: 10px;
}

.dg .box {
  fill: var(--surface-2);
  stroke: var(--border-2);
  stroke-width: 1.2;
}

.dg .box-a {
  fill: var(--surface-2);
  fill: color-mix(in srgb, var(--cat, var(--accent)) 13%, transparent);
  stroke: var(--border-2);
  stroke: color-mix(in srgb, var(--cat, var(--accent)) 42%, transparent);
  stroke-width: 1.2;
}

.dg .box-b {
  fill: var(--accent-2-soft);
  stroke: var(--border-2);
  stroke: color-mix(in srgb, var(--accent-2) 42%, transparent);
  stroke-width: 1.2;
}

.dg .ln {
  stroke: var(--dg-line);
  stroke-width: 1.3;
  fill: none;
}

.dg .ln-d {
  stroke: var(--dg-line);
  stroke-width: 1.3;
  fill: none;
  stroke-dasharray: 3 4;
}

.dg .ln-a {
  stroke: var(--cat, var(--accent));
  stroke-width: 1.6;
  fill: none;
}

.dg .ln-b {
  stroke: var(--accent-2);
  stroke-width: 1.6;
  fill: none;
}

.dg .fill-a {
  fill: var(--cat, var(--accent));
}

.dg .fill-b {
  fill: var(--accent-2);
}

.dg .fill-c {
  fill: var(--accent-3);
}

.dg .dotgrid {
  fill: var(--border-2);
}

/* ---- animated diagrams -------------------------------------------------
   The Ground Zero hardware module draws time rather than structure: traffic
   on a bus, the fetch-decode-execute ring turning, a clock ticking. All of
   it is CSS on inline SVG, so a diagram stays a single string of markup with
   no script to wire up and no timer to leak when the view changes.

   Every diagram is authored to read correctly with none of this applied,
   which is what makes the reduced-motion rule at the bottom safe: it removes
   decoration, never information. */

.dg .box-none {
  fill: none;
  stroke: none;
}

/* a packet crossing a wire — carried by animateMotion, faded at the ends so
   it appears to leave one component and arrive at the other rather than
   popping into existence in mid-air */
.mv-pulse {
  animation-name: mvPulse;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes mvPulse {
  0%, 100% { opacity: 0; }
  12%, 88% { opacity: 1; }
}

.mv-fade {
  animation-name: mvPulse;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* the lit stage of a cycle. The unlit state is fully transparent, so the
   still frame is the plain outlined box drawn underneath it. */
.mv-stage {
  animation-name: mvStage;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

@keyframes mvStage {
  0%, 33.3% { opacity: 1; }
  33.4%, 100% { opacity: 0; }
}

.dg .mv-lit {
  stroke-width: 2;
}

/* the clock bar filling */
.mv-tick {
  animation-name: mvTick;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  transform-origin: center bottom;
}

@keyframes mvTick {
  0%, 100% { opacity: .18; }
  50% { opacity: 1; }
}

/* thousands of GPU cores, each doing the same small thing slightly out of
   step with its neighbours */
.mv-twinkle {
  animation-name: mvTwinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes mvTwinkle {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}

/* a bit flipping between its two states */
.mv-blink {
  animation-name: mvBlink;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

@keyframes mvBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: .12; }
}

/* ---- computer vision motion ----
   Convolution is the clearest case in the app for animating a diagram: the
   sliding *is* the operation, and a still frame shows the kernel parked in
   one arbitrary position with the reader asked to imagine the rest. */

/* the kernel window itself is always visible; only its position animates,
   which is why there is no opacity keyframe here */
.mv-slide {
  animation-name: mvSlideHold;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

@keyframes mvSlideHold {
  0%, 100% { opacity: 1; }
}

/* output cells filling in behind the kernel, each staying lit once reached,
   so the finished frame is a complete output grid rather than a blank one */
.mv-fill {
  animation-name: mvFill;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

@keyframes mvFill {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* losing boxes in non-maximum suppression: present, then deleted */
.mv-suppress {
  animation-name: mvSuppress;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}

@keyframes mvSuppress {
  0%, 45% { opacity: 1; }
  70%, 100% { opacity: 0; }
}

/* the power light: alive, not urgent */
.mv-breathe {
  animation-name: mvBreathe;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes mvBreathe {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}

/* A reader who has asked for less motion gets the still diagram, which is
   why every one of them is authored to work as a still. Pulses in flight
   would be stranded mid-wire with nothing to explain them, so they are
   hidden outright; everything that carries meaning is pinned to its
   readable state instead. */
@media (prefers-reduced-motion: reduce) {

  .mv-pulse,
  .mv-fade {
    display: none;
  }

  .mv-stage,
  .mv-tick,
  .mv-twinkle,
  .mv-blink,
  .mv-breathe,
  .mv-slide,
  .mv-fill,
  .mv-suppress {
    animation: none;
  }

  /* the still frame of a convolution is the completed output grid, and of
     NMS is the surviving box — both are the state worth reading */
  .mv-fill {
    opacity: 1;
  }

  .mv-suppress {
    opacity: 0;
  }

  .mv-stage {
    opacity: 1;
  }

  .mv-tick,
  .mv-twinkle,
  .mv-blink,
  .mv-breathe {
    opacity: .55;
  }
}

/* ---- figure drawing ----------------------------------------------------
   The professional-presence diagrams draw a person rather than a box, so
   they need a second small vocabulary: a limb is a thick round-capped
   stroke, a prop (chair, desk, screen) is a thin filled shape, and a fault
   is the same figure restroked in the danger colour. Keeping the fault in
   its own class is what lets one posture diagram show right and wrong side
   by side without either being redrawn. */

.dg .body,
.dg .body-a,
.dg .body-x {
  fill: none;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dg .body {
  stroke: var(--dg-head);
}

.dg .body-a {
  stroke: var(--cat, var(--accent));
}

.dg .body-x {
  stroke: var(--danger);
}

.dg .headf,
.dg .headf-a,
.dg .headf-x {
  fill: var(--surface-2);
  stroke-width: 3;
}

.dg .headf {
  stroke: var(--dg-head);
}

.dg .headf-a {
  stroke: var(--cat, var(--accent));
}

.dg .headf-x {
  stroke: var(--danger);
}

.dg .prop {
  fill: var(--surface-2);
  stroke: var(--border-3);
  stroke-width: 1.4;
}

.dg .prop-a {
  fill: var(--surface-2);
  fill: color-mix(in srgb, var(--cat, var(--accent)) 10%, transparent);
  stroke: var(--border-2);
  stroke: color-mix(in srgb, var(--cat, var(--accent)) 40%, transparent);
  stroke-width: 1.4;
}

.dg .prop-ln {
  fill: none;
  stroke: var(--border-3);
  stroke-width: 3;
  stroke-linecap: round;
}

.dg .floor {
  stroke: var(--border-3);
  stroke-width: 2;
  fill: none;
}

.dg .ln-x {
  stroke: var(--danger);
  stroke-width: 1.6;
  fill: none;
}

.dg .fill-x {
  fill: var(--danger);
}

.dg .t-x {
  fill: var(--danger);
  font-size: 9.5px;
  font-weight: 600;
}

.dg .t-ok {
  fill: var(--cat, var(--accent));
  font-size: 9.5px;
  font-weight: 600;
}

.dg .band {
  fill: var(--surface-2);
  fill: color-mix(in srgb, var(--cat, var(--accent)) 9%, transparent);
  stroke: none;
}

.dg .band-x {
  fill: var(--danger-soft);
  stroke: none;
}

/* related + nav */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: all var(--t-fast) var(--ease-out);
}

.chip:hover {
  border-color: var(--border-3);
  background: var(--surface-2);
  color: var(--text);
}

.chip .chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--cat, var(--accent));
  flex: none;
}

.art-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px dashed var(--border-2);
  max-width: var(--measure);
}

.art-nav-card {
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: all var(--t-fast) var(--ease-out);
  min-width: 0;
}

.art-nav-card:hover {
  border-color: var(--border-3);
  background: var(--surface-2);
  color: var(--text);
}

.art-nav-card span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
  margin-bottom: 4px;
}

.art-nav-card strong {
  font-size: var(--fs-base);
  font-weight: 600;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.art-nav-card.next {
  text-align: right;
}

.art-nav-card.is-empty {
  visibility: hidden;
}

/* ---------- 10b. Flow diagrams & real-world examples ---------- */

/* --- real-world example callout --- */

.rw {
  display: flex;
  gap: 14px;
  margin: 26px 0 4px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--cat, var(--accent)) 26%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cat, var(--accent)) 7%, transparent), transparent 62%),
    var(--surface);
}

.rw-mark {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 15%, transparent);
  color: var(--cat, var(--accent));
}

.rw-mark svg {
  width: 18px;
  height: 18px;
}

.rw-in {
  min-width: 0;
}

.rw-h {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--text);
  letter-spacing: -.01em;
}

.rw-b {
  margin-top: 6px;
  font-size: var(--fs-base);
  line-height: 1.68;
  color: var(--text-2);
}

.rw-b code,
.rw-h code {
  font-family: var(--font-mono);
  font-size: .86em;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  color: var(--text);
}

/* --- flowchart --- */

.flow {
  margin: 22px 0 6px;
  padding: 20px 20px 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background:
    radial-gradient(var(--dot) 1px, transparent 1px) 0 0 / 18px 18px,
    var(--surface);
}

.flow-list {
  list-style: none;
  display: grid;
  gap: 0;
  counter-reset: none;
}

.flow-node {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 0 0 22px;
}

.flow-node:last-child {
  padding-bottom: 4px;
}

/* the connector: a line down from the badge, with a chevron at the bottom */
.flow-node:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 4px;
  width: 1.5px;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--cat, var(--accent)) 45%, transparent),
      var(--border-2));
}

.flow-node:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 9.5px;
  bottom: 2px;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--border-3);
  border-bottom: 1.5px solid var(--border-3);
  transform: rotate(45deg);
}

.flow-num {
  flex: none;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--cat, var(--accent));
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 13%, var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--cat, var(--accent)) 40%, transparent);
  position: relative;
  z-index: 1;
}

.flow-body {
  min-width: 0;
  padding-top: 3px;
}

.flow-label {
  display: block;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text);
}

.flow-label code,
.flow-note code,
.flow-case code {
  font-family: var(--font-mono);
  font-size: .86em;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  color: var(--text);
}

.flow-note {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-3);
}

/* --- a step that forks ---------------------------------------------
   Deliberately not a diamond, and deliberately not Yes/No in green and red.
   The two branches in the data are two cases, not two answers, so they get
   equal visual weight and the reader is never told which one is "right".
   See the note at the top of flow.js. */

.flow-depends {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--accent-3);
}

.flow-cases {
  display: grid;
  gap: 7px;
  margin-top: 9px;
  padding-left: 11px;
  border-left: 2px solid color-mix(in srgb, var(--accent-3) 30%, transparent);
}

.flow-case {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-2);
}

.flow-case-mark {
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: .55em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-3) 55%, transparent);
}

.flow-cap {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-2);
  font-size: var(--fs-sm);
  color: var(--text-3);
  text-align: center;
}

@media (max-width: 620px) {
  .flow {
    padding: 16px 14px 6px;
  }

  .rw {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }
}

/* ---------- 11. A–Z index ---------- */

.az-bar {
  position: sticky;
  top: calc(var(--topbar-h) + 0px);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px;
  margin-bottom: 22px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
}

.az-key {
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  transition: all var(--t-fast) var(--ease-out);
}

.az-key:hover {
  background: var(--surface-3);
  color: var(--text);
}

.az-key.is-empty {
  color: var(--text-3);
  opacity: .35;
  pointer-events: none;
}

.az-group {
  margin-bottom: 34px;
  scroll-margin-top: calc(var(--topbar-h) + 70px);
}

.az-letter {
  font-family: var(--font-head-sans);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.az-letter::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.az-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2px;
}

.az-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-base);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.az-item:hover {
  background: var(--surface-2);
  color: var(--text);
}

.az-item .chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--cat);
  flex: none;
}

.az-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 12. Toolbar / filters ---------- */

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.filter-input {
  flex: 1;
  min-width: 220px;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: var(--fs-base);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}

.filter-input::placeholder {
  color: var(--text-3);
}

.filter-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
}

.seg button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-3);
  transition: all var(--t-fast) var(--ease-out);
}

.seg button:hover {
  color: var(--text);
  background: var(--surface-2);
}

.seg button.is-on {
  background: var(--surface-3);
  color: var(--text);
}

.result-count {
  font-size: var(--fs-sm);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* ---------- 13. Category page header ---------- */

.cat-hero {
  --cat: var(--accent);
  position: relative;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  margin-bottom: 30px;
  overflow: hidden;
}

.cat-hero .cat-ico {
  width: 52px;
  height: 52px;
}

.cat-hero .cat-ico svg {
  width: 26px;
  height: 26px;
}

.cat-hero h1 {
  font-size: var(--fs-2xl);
  letter-spacing: -.025em;
}

.cat-hero p {
  margin-top: 8px;
  color: var(--text-2);
  max-width: 66ch;
  font-size: var(--fs-base);
}

.cat-hero-meta {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------- 14. Learning paths ----------
   Every block below reads its accent from the --cat channel that app.js
   injects per category, so a path card, its chapter numbers, its progress
   ring and its entry chips are all tinted by the field they belong to
   without a single hard-coded colour.                                    */

/* --- hero --- */

.px-hero {
  --cat: var(--accent);
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 26px 26px 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  margin-bottom: 26px;
}

.px-hero-ico {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
}

.px-hero-ico svg {
  width: 26px;
  height: 26px;
}

.px-hero h1 {
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}

.px-hero p {
  color: var(--text-2);
  max-width: var(--measure);
  font-size: var(--fs-base);
}

.px-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.pip.is-live {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.pip.is-live svg {
  width: 12px;
  height: 12px;
  margin-right: 4px;
  vertical-align: -2px;
}

.pip.is-soon {
  color: var(--accent-3);
  border-color: var(--border-2);
  border-color: color-mix(in srgb, var(--accent-3) 34%, transparent);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--accent-3) 11%, transparent);
}

/* --- resume --- */

.px-resume {
  --cat: var(--accent);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 18px;
  align-items: center;
  padding: 18px 20px 20px;
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--cat);
  border-radius: var(--r-md);
  background: var(--surface);
  margin-bottom: 26px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
}

.px-resume:hover {
  border-color: var(--border-3);
  border-left-color: var(--cat);
  transform: translateY(-1px);
}

.px-resume-k {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cat);
}

.px-resume-k svg {
  width: 13px;
  height: 13px;
}

.px-resume-p {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-family: var(--font-mono);
  text-align: right;
}

.px-resume strong {
  grid-column: 1 / -1;
  font-family: var(--font-head-sans);
  font-size: var(--fs-lg);
  color: var(--text);
  margin-top: 6px;
}

.px-resume-d {
  grid-column: 1 / -1;
  font-size: var(--fs-sm);
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.px-resume-go {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--cat);
}

.px-resume-go svg {
  width: 15px;
  height: 15px;
  transition: transform var(--t-fast) var(--ease-out);
}

.px-resume:hover .px-resume-go svg {
  transform: translateX(3px);
}

.px-resume-bar {
  display: block;
  grid-column: 1 / -1;
  margin-top: 14px;
}

/* --- filter row --- */

.px-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.px-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-2);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.px-filter b {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-3);
}

.px-filter:hover {
  color: var(--text);
  border-color: var(--border-3);
}

.px-filter.is-on {
  color: var(--text-inv);
  background: var(--accent);
  border-color: var(--accent);
}

.px-filter.is-on b {
  color: var(--text-inv);
  opacity: .72;
}

/* --- the card --- */

.px-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
  gap: 18px;
  align-items: start;
}

.px-card {
  --cat: var(--accent);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 22px 22px 18px;
  position: relative;
  overflow: hidden;
  scroll-margin-top: calc(var(--topbar-h) + 18px);
  transition: border-color var(--t-mid) var(--ease-out),
    box-shadow var(--t-mid) var(--ease-out);
}

/* the accent only reaches full strength on the card being read */
.px-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cat), transparent 72%);
  opacity: .5;
}

.px-card:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow-2);
}

.px-card.is-going::before,
.px-card.is-done::before {
  opacity: 1;
}

.px-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: start;
}

.px-ico {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--cat);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat) 12%, transparent);
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--cat) 30%, transparent);
}

.px-ico svg {
  width: 20px;
  height: 20px;
}

.px-lvl {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cat);
  margin-bottom: 6px;
}

.px-head h3 {
  font-size: var(--fs-lg);
  line-height: 1.25;
  letter-spacing: -.01em;
}

.px-desc {
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-top: 7px;
  max-width: 56ch;
}

/* progress donut */

.px-ring {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
}

.px-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.px-ring circle {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}

.px-ring-t {
  stroke: var(--border-2);
}

.px-ring-f {
  stroke: var(--cat);
  transition: stroke-dasharray var(--t-slow) var(--ease-out);
}

.px-ring b {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  line-height: 1;
}

.px-ring b i {
  font-style: normal;
  font-size: 8px;
  opacity: .7;
}

.px-ring.is-done b {
  color: var(--cat);
}

.px-ring.is-done svg {
  display: block;
}

.px-ring.is-done b svg {
  position: static;
  width: 15px;
  height: 15px;
  transform: none;
  stroke-width: 2.4;
}

/* meta + facts */

.px-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 16px 0 0;
}

.px-facts {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.px-facts dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 3px;
}

.px-facts dd {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.55;
}

/* --- the chapters --- */

.px-parts {
  margin-top: 18px;
  border-top: 1px solid var(--border);
}

.px-part {
  border-bottom: 1px solid var(--border);
}

.px-part-h {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 2px;
  cursor: pointer;
  list-style: none;
  transition: background var(--t-fast);
}

.px-part-h::-webkit-details-marker {
  display: none;
}

.px-part-h:hover {
  background: var(--surface-2);
}

.px-part-h:focus-visible {
  outline: 2px solid var(--cat);
  outline-offset: -2px;
  border-radius: var(--r-xs);
}

.px-part-n {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  background: var(--surface-3);
  border: 1px solid var(--border-2);
}

.px-part-n svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.6;
}

.px-part.is-done .px-part-n {
  background: var(--cat);
  border-color: var(--cat);
  color: var(--text-inv);
}

.px-part-b {
  min-width: 0;
}

.px-part-t {
  display: block;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
}

.px-part-d {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-top: 2px;
}

.px-part-c {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
}

.px-part.is-done .px-part-c {
  color: var(--cat);
}

.px-part-x {
  color: var(--text-3);
  display: grid;
  place-items: center;
}

.px-part-x svg {
  width: 15px;
  height: 15px;
  transition: transform var(--t-fast) var(--ease-out);
}

.px-part[open] .px-part-x svg {
  transform: rotate(90deg);
}

.px-part.is-here > .px-part-h {
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat) 7%, transparent);
}

.px-part.is-here .px-part-n {
  border-color: var(--cat);
  color: var(--cat);
}

/* --- the entries inside a chapter --- */

.px-steps {
  list-style: none;
  display: grid;
  gap: 2px;
  padding: 2px 0 14px 34px;
  position: relative;
}

/* the spine: a dotted line joining the entries of one chapter */
.px-steps::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 14px;
  width: 1px;
  background: repeating-linear-gradient(to bottom, var(--border-2) 0 3px, transparent 3px 7px);
}

.px-step {
  --cat: var(--accent);
  position: relative;
}

.px-step a {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 3px 10px;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.px-step a:hover {
  background: var(--surface-2);
  border-color: var(--border);
}

.px-step-n {
  position: absolute;
  left: -30px;
  top: 9px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  background: var(--surface);
  border: 1px solid var(--border-2);
  z-index: 1;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.px-step a:hover .px-step-n {
  background: var(--cat);
  border-color: var(--cat);
  color: var(--text-inv);
}

.px-step-t {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
}

.px-step-a {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}

.px-step-d {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.px-step-r {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  color: var(--cat);
  display: grid;
  place-items: center;
}

.px-step-r svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.6;
}

.px-step.is-next a {
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat) 8%, transparent);
  border-color: var(--border-2);
  border-color: color-mix(in srgb, var(--cat) 34%, transparent);
}

.px-step.is-next .px-step-n {
  background: var(--cat);
  border-color: var(--cat);
  color: var(--text-inv);
}

.px-step-r.is-next {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cat);
}

.px-step.is-read .px-step-t {
  color: var(--text-2);
}

.px-step.is-read .px-step-n {
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat) 18%, transparent);
  border-color: var(--border-2);
  border-color: color-mix(in srgb, var(--cat) 40%, transparent);
  color: var(--cat);
}

/* --- the course chip: the bridge to Learn Coding --- */

.px-course {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--border-2);
  background: var(--surface-2);
  transition: border-color var(--t-fast), background var(--t-fast);
}

a.px-course:hover {
  border-style: solid;
  border-color: var(--cat);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat) 7%, var(--surface-2));
}

.px-course-i {
  width: 30px;
  height: 30px;
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
  color: var(--cat);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat) 12%, transparent);
}

.px-course-i svg {
  width: 16px;
  height: 16px;
}

.px-course-b b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}

.px-course-b span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-top: 1px;
}

.px-course-go {
  color: var(--text-3);
  display: grid;
  place-items: center;
}

.px-course-go svg {
  width: 16px;
  height: 16px;
  transition: transform var(--t-fast) var(--ease-out);
}

a.px-course:hover .px-course-go {
  color: var(--cat);
}

a.px-course:hover .px-course-go svg {
  transform: translateX(3px);
}

.px-course.is-soon {
  border-style: dashed;
  opacity: .9;
}

.px-course.is-soon .px-course-i {
  color: var(--text-3);
  background: var(--surface-3);
}

/* --- card footer --- */

.px-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.px-foot-n {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.px-card.is-done .px-foot-n {
  color: var(--cat);
}

/* --- coming soon --- */

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

.px-soon {
  --cat: var(--accent);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: var(--r-md);
  border: 1px dashed var(--border-2);
  background:
    repeating-linear-gradient(135deg, var(--dot) 0 1px, transparent 1px 9px),
    var(--surface);
}

.px-soon .px-ico {
  width: 34px;
  height: 34px;
  opacity: .82;
}

.px-soon .px-ico svg {
  width: 17px;
  height: 17px;
}

.px-soon h3 {
  font-size: var(--fs-base);
  line-height: 1.3;
  padding-right: 84px;
}

.px-soon p {
  font-size: var(--fs-sm);
  color: var(--text-2);
  flex: 1;
}

.px-soon-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  color: var(--accent-3);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--accent-3) 13%, transparent);
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--accent-3) 32%, transparent);
  white-space: nowrap;
}

.px-course .px-soon-tag {
  position: static;
}

.px-soon-f {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.px-soon-c {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--cat);
}

.px-soon-c svg {
  width: 13px;
  height: 13px;
}

.px-soon-c:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.px-soon-w {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* --- the cross-link to the course --- */

.px-cross {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}

.px-cross-i {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  color: var(--accent-2);
  background: var(--accent-2-soft);
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent);
}

.px-cross-i svg {
  width: 22px;
  height: 22px;
}

.px-cross div {
  flex: 1 1 320px;
}

.px-cross h3 {
  font-size: var(--fs-md);
  margin-bottom: 4px;
}

.px-cross p {
  font-size: var(--fs-sm);
  color: var(--text-2);
  max-width: 64ch;
}

/* --- narrow screens --- */

@media (max-width: 900px) {
  .px-grid {
    grid-template-columns: 1fr;
  }

  .px-hero {
    flex-direction: column;
    padding: 20px;
  }

  .px-hero h1 {
    font-size: var(--fs-2xl);
  }
}

@media (max-width: 560px) {
  .px-card {
    padding: 18px 16px 14px;
  }

  .px-head {
    grid-template-columns: auto 1fr;
  }

  .px-ring {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: 38px;
    height: 38px;
  }

  .px-head-b {
    grid-column: 1 / -1;
  }

  .px-part-h {
    grid-template-columns: auto 1fr auto;
  }

  .px-part-x {
    display: none;
  }

  .px-steps {
    padding-left: 26px;
  }

  .px-step-n {
    left: -24px;
    top: 8px;
    width: 18px;
    height: 18px;
    font-size: 9px;
  }

  .px-step-a {
    display: none;
  }

  .px-soon h3 {
    padding-right: 0;
  }

  .px-soon-tag {
    position: static;
    align-self: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {

  .px-resume,
  .px-resume-go svg,
  .px-part-x svg,
  .px-ring-f,
  .px-course-go svg {
    transition: none;
  }
}

/* ---------- 15. Empty state ---------- */

.empty {
  padding: 56px 24px;
  text-align: center;
  border: 1px dashed var(--border-2);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.empty-ico {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--surface-3);
  color: var(--text-3);
}

.empty-ico svg {
  width: 24px;
  height: 24px;
}

.empty h3 {
  font-size: var(--fs-lg);
  margin-bottom: 7px;
}

.empty p {
  color: var(--text-3);
  font-size: var(--fs-base);
  max-width: 44ch;
  margin: 0 auto 18px;
}

/* ---------- 16. Command palette ---------- */

.palette-wrap {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
}

.palette-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  animation: fadeIn var(--t-mid) var(--ease-out) both;
}

@keyframes fadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.palette {
  position: relative;
  width: min(700px, calc(100vw - 28px));
  margin: max(8vh, 48px) auto 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(640px, 80dvh);
  animation: sheetIn var(--t-mid) var(--ease-out) both;
}

@keyframes sheetIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.palette-input-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 12px 0 16px;
  height: 56px;
  border-bottom: 1px solid var(--border);
  flex: none;
}

.palette-ico {
  width: 18px;
  height: 18px;
  flex: none;
  background: var(--text-3);
  -webkit-mask: var(--ico-search) center / contain no-repeat;
  mask: var(--ico-search) center / contain no-repeat;
}

.palette-input {
  flex: 1;
  height: 100%;
  border: none;
  background: none;
  outline: none;
  font-size: var(--fs-md);
  color: var(--text);
  min-width: 0;
}

.palette-input::placeholder {
  color: var(--text-3);
}

.palette-esc {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-3);
  padding: 5px 9px;
  border-radius: var(--r-xs);
  border: 1px solid var(--border-2);
  flex: none;
}

.palette-esc:hover {
  color: var(--text);
  background: var(--surface-2);
}

.palette-filters {
  display: flex;
  gap: 5px;
  padding: 9px 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  flex: none;
  scrollbar-width: none;
}

.palette-filters::-webkit-scrollbar {
  display: none;
}

.pf {
  --cat: var(--text-3);
  flex: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-3);
  white-space: nowrap;
  transition: all var(--t-fast) var(--ease-out);
}

.pf:hover {
  color: var(--text);
  border-color: var(--border-3);
}

.pf.is-on {
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat) 15%, transparent);
  border-color: var(--border-2);
  border-color: color-mix(in srgb, var(--cat) 40%, transparent);
  color: var(--cat);
}

.palette-results {
  list-style: none;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 8px;
  flex: 1;
  min-height: 120px;
}

.pr-item {
  --cat: var(--accent);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--text-2);
  border: 1px solid transparent;
}

.pr-item.is-sel {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text);
}

.pr-dot {
  width: 8px;
  height: 8px;
  border-radius: 2.5px;
  flex: none;
  background: var(--cat);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat) 15%, transparent);
}

.pr-main {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.pr-t {
  display: block;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pr-d {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.pr-cat {
  flex: 0 0 auto;
  max-width: 30%;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cat);
  flex: none;
}

mark {
  background: var(--surface-2);
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

.palette-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 14px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-3);
  flex: none;
  flex-wrap: wrap;
}

.palette-foot kbd {
  margin-right: 3px;
}

.palette-count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.palette-empty {
  padding: 34px 16px;
  text-align: center;
  color: var(--text-3);
  font-size: var(--fs-base);
}

.palette-empty b {
  color: var(--text-2);
}

/* shortcuts sheet */
.sheet {
  position: relative;
  width: min(440px, calc(100vw - 28px));
  margin: max(12vh, 60px) auto 0;
  padding: 24px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-3);
  animation: sheetIn var(--t-mid) var(--ease-out) both;
}

.sheet-title {
  font-size: var(--fs-lg);
  margin-bottom: 16px;
}

.sc-list {
  list-style: none;
  display: grid;
  gap: 2px;
}

.sc-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  font-size: var(--fs-base);
  color: var(--text-2);
  border-bottom: 1px dashed var(--border);
}

.sc-list li:last-child {
  border-bottom: none;
}

.sheet-close {
  margin-top: 18px;
  width: 100%;
  justify-content: center;
}

/* ---------- 17. Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 16px);
  z-index: var(--z-toast);
  padding: 11px 18px;
  border-radius: var(--r-pill);
  background: var(--surface-hi);
  border: 1px solid var(--border-2);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  box-shadow: var(--shadow-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out);
}

.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- 18. Footer ---------- */

.footer {
  border-top: 1px solid var(--border);
  padding: 30px 32px 40px;
  margin-top: auto;
}

.footer-in {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  max-width: 1180px;
}

.footer-brand {
  font-family: var(--font-head-sans);
  font-weight: 700;
  font-size: var(--fs-md);
}

.footer-note {
  font-size: var(--fs-sm);
  color: var(--text-3);
  max-width: 56ch;
  margin-top: 5px;
}

.footer-meta {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* ---------- 19. Responsive ---------- */

@media (max-width: 1080px) {
  :root {
    --sidebar-w: 232px;
  }

  .view {
    padding: 28px 24px 64px;
  }

  .footer {
    padding: 28px 24px 36px;
  }
}

@media (max-width: 900px) {
  .nav-toggle {
    display: grid;
  }

  .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    width: min(300px, 84vw);
    background: var(--bg-2);
    transform: translateX(-102%);
    transition: transform var(--t-slow) var(--ease-out);
    box-shadow: var(--shadow-3);
  }

  .sidebar.is-open {
    transform: none;
  }

  .searchbar {
    max-width: none;
  }

  .searchbar-kbd {
    display: none;
  }

  .art-nav {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  :root {
    --topbar-h: 58px;
  }

  .view {
    padding: 22px 16px 56px;
  }

  .footer {
    padding: 24px 16px 32px;
  }

  .topbar-inner {
    padding: 0 10px;
    gap: 8px;
  }

  .brand-text {
    display: none;
  }

  .searchbar-label {
    font-size: var(--fs-sm);
  }

  #randomBtn {
    display: none;
  }

  .term-grid,
  .cat-grid {
    grid-template-columns: 1fr;
  }

  .art-def {
    font-size: var(--fs-md);
  }

  .art-body p {
    font-size: var(--fs-base);
  }

  .palette {
    margin-top: 0;
    height: 100dvh;
    max-height: none;
    width: 100vw;
    border-radius: 0;
    border: none;
  }

  .cat-hero {
    flex-direction: column;
    gap: 14px;
  }

  .toolbar .seg {
    width: 100%;
    overflow-x: auto;
  }
}

/* ---------- 20. Motion & print ---------- */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 14. Case studies ---------- */

/* --- index: hero, filters, timeline --- */

.cs-hero {
  --cat: var(--accent);
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-top: 6px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--border);
}

.cs-hero-ico {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--accent);
}

.cs-hero-ico svg {
  width: 26px;
  height: 26px;
}

.cs-hero h1 {
  font-size: var(--fs-2xl);
  letter-spacing: -.025em;
}

.cs-hero p {
  margin-top: 8px;
  color: var(--text-2);
  max-width: 66ch;
  font-size: var(--fs-base);
  line-height: 1.62;
}

.cs-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px !important;
}

.cs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.cs-filter {
  --cat: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: border-color var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
}

.cs-filter i {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--cat);
}

.cs-filter b {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.cs-filter:hover {
  border-color: var(--border-3);
  background: var(--surface-2);
  color: var(--text);
}

.cs-filter.is-on {
  color: var(--text);
  border-color: var(--border-2);
  border-color: color-mix(in srgb, var(--cat) 46%, transparent);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat) 12%, var(--surface));
}

.cs-filter.is-on b {
  color: var(--cat);
}

.cs-coldesc {
  --cat: var(--accent);
  margin-top: 16px;
  padding-left: 14px;
  border-left: 3px solid var(--cat);
  color: var(--text-2);
  max-width: 72ch;
  line-height: 1.62;
  font-size: var(--fs-base);
}

.cs-timeline {
  margin-top: 30px;
}

.cs-era+.cs-era {
  margin-top: 34px;
}

.cs-era-h {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.cs-era-h i {
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}

.cs-era-h b {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-3);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
}

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

.cs-card {
  --cat: var(--accent);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 15px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  overflow: hidden;
  transition: border-color var(--t-mid) var(--ease-out),
    transform var(--t-mid) var(--ease-out),
    box-shadow var(--t-mid) var(--ease-out);
}

.cs-card::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--cat);
  opacity: .55;
  transition: opacity var(--t-mid) var(--ease-out);
}

.cs-card:hover {
  border-color: var(--border-3);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  color: var(--text);
}

.cs-card:hover::after {
  opacity: 1;
}

.cs-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cs-card-y {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--cat);
  font-variant-numeric: tabular-nums;
}

.cs-card-c {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3);
}

.cs-card-t {
  font-family: var(--font-head);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.25;
}

.cs-card-s {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.5;
  flex: 1 1 auto;
}

.cs-card-f {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-3);
}

.cs-card-f svg {
  width: 13px;
  height: 13px;
}

/* --- detail: skim layer --- */

.cs-article {
  --cat: var(--accent);
}

.cs-deck {
  font-weight: 500;
}

.cs-skim {
  display: grid;
  gap: 12px;
  margin: 26px 0 30px;
  max-width: var(--measure);
}

.cs-tldr {
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat) 7%, var(--surface));
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--cat) 22%, transparent);
}

.cs-tldr-k {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cat);
}

.cs-tldr-b {
  margin-top: 8px !important;
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--text);
}

.cs-say {
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.cs-say-k {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-2);
}

.cs-say-k svg {
  width: 14px;
  height: 14px;
  color: var(--cat);
}

.cs-say ul {
  list-style: none;
  margin-top: 11px;
  display: grid;
  gap: 9px;
}

.cs-say li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text);
}

.cs-say li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cat);
}

/* --- detail: contents rail --- */

.cs-toc {
  max-width: var(--measure);
  margin-bottom: 30px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  border: 1px dashed var(--border-2);
  background: var(--surface);
}

.cs-toc-k {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-3);
}

.cs-toc ol {
  margin-top: 9px;
  padding-left: 18px;
  display: grid;
  gap: 5px;
}

.cs-toc li {
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.cs-toc a {
  color: var(--text-2);
}

.cs-toc a:hover {
  color: var(--cat);
}

/* --- detail: body blocks --- */

.cs-body {
  max-width: var(--measure);
}

.cs-h {
  margin: 34px 0 12px;
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -.02em;
  scroll-margin-top: calc(var(--topbar-h) + 18px);
}

.cs-h:first-child {
  margin-top: 0;
}

.cs-p {
  margin-bottom: 14px;
  font-size: var(--fs-md);
  line-height: 1.75;
  color: var(--text-2);
}

.cs-p strong {
  color: var(--text);
  font-weight: 650;
}

/* auto-linked dictionary terms inside study prose */
.tlink {
  color: var(--text);
  border-bottom: 1px solid color-mix(in srgb, var(--cat) 55%, transparent);
  transition: background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out);
}

.tlink:hover {
  color: var(--text);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat) 14%, transparent);
  border-bottom-color: var(--cat);
}

.cs-list {
  margin: 0 0 18px;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.cs-list li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-base);
  line-height: 1.68;
  color: var(--text-2);
}

.cs-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat) 70%, transparent);
}

.cs-list strong {
  color: var(--text);
  font-weight: 650;
}

/* timeline */
.cs-time {
  margin: 4px 0 22px;
  padding: 0 0 0 4px;
  list-style: none;
  display: grid;
  gap: 0;
}

.cs-time-i {
  position: relative;
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 14px;
  padding: 11px 0 11px 20px;
  border-left: 2px solid var(--border-2);
}

.cs-time-i::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 17px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cat);
  border: 2px solid var(--bg);
}

.cs-time-i:last-child {
  border-left-color: transparent;
}

.cs-time-t {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--cat);
  padding-top: 1px;
}

.cs-time-d {
  font-size: var(--fs-base);
  line-height: 1.62;
  color: var(--text-2);
}

/* pull quote */
.cs-quote {
  margin: 22px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--cat);
}

.cs-quote blockquote {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  line-height: 1.55;
  letter-spacing: -.012em;
  color: var(--text);
}

.cs-quote figcaption {
  margin-top: 9px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.cs-quote figcaption::before {
  content: "— ";
}

/* callout */
.cs-note {
  display: flex;
  gap: 13px;
  margin: 22px 0;
  padding: 15px 17px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-3);
}

.cs-note-m {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  background: color-mix(in srgb, var(--accent-3) 16%, transparent);
  color: var(--accent-3);
}

.cs-note-m svg {
  width: 15px;
  height: 15px;
}

.cs-note-t {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 5px;
}

.cs-note-b {
  font-size: var(--fs-base);
  line-height: 1.68;
  color: var(--text-2);
}

/* code block */
.cs-code {
  margin: 20px 0;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--code-bg);
  overflow: hidden;
}

.cs-code-bar {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cs-code pre {
  margin: 0;
  padding: 15px 16px;
  overflow-x: auto;
}

.cs-code code {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.68;
  color: var(--text-2);
  white-space: pre;
}

.cs-dg {
  margin: 22px 0;
}

/* sources */
.cs-src {
  list-style: none;
  max-width: var(--measure);
  display: grid;
  gap: 8px;
}

.cs-src li {
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.cs-src a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  color: var(--text-2);
}

.cs-src a:hover {
  color: var(--cat);
}

.cs-src svg {
  width: 13px;
  height: 13px;
  flex: none;
  align-self: center;
  opacity: .6;
}

/* --- study rows inside the search surfaces --- */

.pr-item.is-study .pr-dot,
.hero-sug-item.is-study .hero-sug-dot {
  background: var(--accent-3);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-3) 16%, transparent);
}

.pr-badge,
.hero-sug-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--accent-3) 16%, transparent);
  color: var(--accent-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: 1px;
}

@media (max-width: 760px) {
  .cs-hero {
    flex-direction: column;
    gap: 14px;
  }

  .cs-time-i {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .cs-grid {
    grid-template-columns: 1fr;
  }

  .cs-quote blockquote {
    font-size: var(--fs-md);
  }
}

@media print {

  .topbar,
  .sidebar,
  .footer,
  .palette-wrap,
  .art-actions,
  .art-nav,
  .bg-grid,
  .bg-glow {
    display: none !important;
  }

  .shell {
    grid-template-columns: 1fr;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* ==========================================================================
   21. Learn Coding
   A third content type, and the only one that expects the reader to type.
   Everything here reads the same --cat channel the categories and study
   collections use, so a track themes itself from one colour pair.
   ========================================================================== */

/* ---------- 21.0 shared helpers ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.side-new {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.side-link.is-active .side-new {
  background: var(--surface-3);
  color: var(--cat, var(--accent));
}

/* a progress bar, used by three views */
.pg {
  position: relative;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
  width: 100%;
}

.pg-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--surface-2);
  background: linear-gradient(90deg, var(--cat, var(--accent)), color-mix(in srgb, var(--cat, var(--accent)) 55%, var(--accent-2)));
  border-radius: inherit;
  transition: width var(--t-slow) var(--ease-out);
}

/* ---------- 21.1 learn index ---------- */

.lx-hero {
  --cat: var(--accent);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  padding: 30px 30px 32px;
  margin-bottom: 34px;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
}

.lx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: .01em;
}

.lx-eyebrow .pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.lx-hero-c h1 {
  margin: 14px 0 12px;
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  letter-spacing: -.035em;
  line-height: 1.1;
  font-weight: 400;
}

.lx-hero-c>p {
  max-width: 62ch;
  font-size: var(--fs-md);
  line-height: 1.72;
  color: var(--text-2);
}

.lx-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.lx-due {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--accent-3);
  color: var(--text-inv);
  font-size: 11px;
  font-weight: 700;
}

.lx-hero-s {
  display: grid;
  grid-template-columns: repeat(2, minmax(96px, 1fr));
  gap: 10px;
}

.lx-stat {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  text-align: center;
}

.lx-stat b {
  display: block;
  font-family: var(--font-head-sans);
  font-size: var(--fs-xl);
  color: var(--text);
  letter-spacing: -.02em;
}

.lx-stat span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.lx-how {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.lx-how-c {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.lx-how-i {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 12px;
}

.lx-how-i svg {
  width: 18px;
  height: 18px;
}

.lx-how-c h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -.01em;
}

.lx-how-c p {
  margin-top: 6px;
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--text-2);
}

.lx-how-c code {
  font-family: var(--font-mono);
  font-size: .85em;
  background: var(--surface-3);
  padding: 1px 4px;
  border-radius: 4px;
  color: var(--text);
}

.lx-cont {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--cat, var(--accent));
  border-radius: var(--r-lg);
  background: var(--surface);
}

.lx-cont-l {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex: 1 1 300px;
  min-width: 0;
}

.lx-cont-ico {
  flex: none;
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 14%, transparent);
  color: var(--cat, var(--accent));
}

.lx-cont-ico svg {
  width: 21px;
  height: 21px;
}

.lx-cont-k {
  font-size: var(--fs-xs);
  color: var(--cat, var(--accent));
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.lx-cont h3 {
  margin-top: 4px;
  font-size: var(--fs-lg);
  letter-spacing: -.02em;
}

.lx-cont-d {
  margin-top: 4px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.6;
}

.lx-cont-r {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 1 260px;
}

.lx-cont-r .pg {
  flex: 1;
}

.lx-drill {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 24px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  background: linear-gradient(140deg, var(--surface-2), var(--surface));
}

.lx-drill-i {
  flex: none;
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--accent-2-soft);
  color: var(--accent-2);
}

.lx-drill-i svg {
  width: 23px;
  height: 23px;
}

.lx-drill>div {
  flex: 1 1 320px;
  min-width: 0;
}

.lx-drill h3 {
  font-size: var(--fs-lg);
  letter-spacing: -.02em;
}

.lx-drill p {
  margin-top: 5px;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-2);
}

.lx-drill p b {
  color: var(--text);
}

.lx-home-note {
  margin-top: 14px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.lx-home-note b {
  color: var(--text-2);
}

/* ---------- 21.2 track cards ---------- */

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

.tk-card {
  --cat: var(--accent);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--t-fast), transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast);
}

.tk-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--cat);
  opacity: .8;
}

.tk-card:hover {
  border-color: var(--border-2);
  border-color: color-mix(in srgb, var(--cat) 45%, var(--border));
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.tk-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.tk-ico {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat) 15%, transparent);
  color: var(--cat);
}

.tk-ico svg {
  width: 20px;
  height: 20px;
}

.tk-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cat);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--cat) 30%, transparent);
}

.tk-name {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  font-weight: 650;
  letter-spacing: -.025em;
  color: var(--text);
}

.tk-deck {
  margin-top: 7px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-2);
  flex: 1;
}

.tk-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.tk-meta b {
  color: var(--text-2);
  font-weight: 650;
}

.tk-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border-3);
}

.tk-start {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--cat);
}

.tk-start svg {
  width: 15px;
  height: 15px;
  transition: transform var(--t-fast);
}

.tk-card:hover .tk-start svg {
  transform: translateX(3px);
}

.tk-pg {
  display: block;
  margin-top: 12px;
}

.tk-pg-l {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--cat);
  font-weight: 600;
}

/* ---------- 21.3 track page ---------- */

.tkv {
  --cat: var(--accent);
}

.tk-hero {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  margin-bottom: 30px;
}

.tk-hero-ico {
  flex: none;
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat) 15%, transparent);
  color: var(--cat);
}

.tk-hero-ico svg {
  width: 27px;
  height: 27px;
}

.tk-hero-b {
  min-width: 0;
}

.tk-hero-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cat);
  margin-bottom: 8px;
}

.tk-hero h1 {
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  letter-spacing: -.035em;
  line-height: 1.15;
}

.tk-hero-d {
  margin-top: 12px;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text-2);
  max-width: 70ch;
}

.tk-hero-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.tk-hero-go {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.tk-hero-pg {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
  flex: 1 1 200px;
}

.tk-hero-pg .pg {
  flex: 1;
}

.tk-hero-pg>span:last-child {
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
}

.tk-done-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 650;
}

.tk-done-pill svg {
  width: 16px;
  height: 16px;
}

/* ---------- 21.4 the briefing ---------- */

.bf {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  margin-bottom: 34px;
}

.bf-h {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  letter-spacing: -.025em;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--border-2);
  margin-bottom: 22px;
}

.bf-h svg {
  width: 20px;
  height: 20px;
  color: var(--cat, var(--accent));
}

.bf-feel {
  padding: 14px 18px;
  border-left: 3px solid var(--cat, var(--accent));
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface-2);
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text-2);
  font-style: italic;
  margin-bottom: 22px;
}

.bf-feel>span {
  display: block;
  margin-bottom: 5px;
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--cat, var(--accent));
}

.bf-block+.bf-block,
.bf-two,
.bf-build {
  margin-top: 24px;
}

.bf-block h3,
.bf-col h3,
.bf-build h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 10px;
  color: var(--text);
}

.bf-block p {
  font-size: var(--fs-md);
  line-height: 1.78;
  color: var(--text-2);
  max-width: var(--measure);
}

.bf-block p+p {
  margin-top: 12px;
}

.bf-block p code,
.bf-col code,
.bf-build code,
.bf-used code {
  font-family: var(--font-mono);
  font-size: .87em;
  background: var(--surface-3);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: var(--r-xs);
  color: var(--text);
}

.bf-block strong,
.bf-col strong {
  color: var(--text);
  font-weight: 600;
}

.bf-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.bf-col {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.bf-col h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bf-col h3 svg {
  width: 16px;
  height: 16px;
}

.bf-col.is-good h3 svg {
  color: var(--accent);
}

.bf-col.is-bad h3 svg {
  color: var(--danger);
}

.bf-col ul {
  list-style: none;
  display: grid;
  gap: 9px;
}

.bf-col li {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-2);
}

.bf-col li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.bf-col.is-good li::before {
  background: var(--accent);
}

.bf-col.is-bad li::before {
  background: var(--danger);
}

.bf-used {
  list-style: none;
  display: grid;
  gap: 12px;
}

.bf-used li {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.bf-used b {
  font-size: var(--fs-sm);
  color: var(--text);
  font-weight: 650;
}

.bf-used span {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-2);
}

.bf-build {
  padding: 20px;
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--cat, var(--accent)) 26%, var(--border));
  border-radius: var(--r-md);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 6%, var(--surface-2));
}

.bf-build h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bf-build h3 svg {
  width: 17px;
  height: 17px;
  color: var(--cat, var(--accent));
}

.bf-build ul {
  list-style: none;
  display: grid;
  gap: 9px;
}

.bf-build li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--text-2);
}

.bf-build li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .52em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--cat, var(--accent));
  opacity: .8;
}

/* ---------- 21.5 the syllabus ---------- */

.sy-h {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  letter-spacing: -.025em;
  margin-bottom: 18px;
}

.sy-h svg {
  width: 20px;
  height: 20px;
  color: var(--cat, var(--accent));
}

.sy-mod {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

.sy-mod+.sy-mod {
  margin-top: 12px;
}

.sy-mod.is-soon {
  opacity: .72;
}

.sy-mod-h {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.sy-mod-h>div {
  flex: 1;
  min-width: 0;
}

.sy-mod-n {
  flex: none;
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 16%, transparent);
  color: var(--cat, var(--accent));
  font-family: var(--font-head-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.sy-mod-h h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -.015em;
}

.sy-mod-h p {
  margin-top: 3px;
  font-size: var(--fs-sm);
  color: var(--text-3);
  line-height: 1.5;
}

.sy-mod-c {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sy-mod-c svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

.sy-soon {
  padding: 16px 20px;
  font-size: var(--fs-sm);
  color: var(--text-3);
  font-style: italic;
}

.sy-list {
  list-style: none;
}

.sy-item+.sy-item {
  border-top: 1px solid var(--border);
}

.sy-item a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 20px;
  transition: background var(--t-fast);
}

.sy-item a:hover {
  background: var(--surface-2);
}

.sy-n {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.sy-n svg {
  width: 14px;
  height: 14px;
}

.sy-item.is-done .sy-n {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent);
}

.sy-b {
  min-width: 0;
}

.sy-t {
  display: block;
  font-size: var(--fs-base);
  font-weight: 550;
  color: var(--text);
}

.sy-item.is-done .sy-t {
  color: var(--text-2);
}

.sy-d {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--text-3);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sy-m {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.sy-min {
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
}

/* ---------- 21.6 lesson page ---------- */

.ln-article {
  max-width: 1000px;
}

.ln-goal {
  margin-top: 26px;
  padding: 18px 22px;
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--cat, var(--accent)) 25%, var(--border));
  border-radius: var(--r-md);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 6%, var(--surface-2));
}

.ln-goal-k {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cat, var(--accent));
  margin-bottom: 10px;
}

.ln-goal-k svg {
  width: 15px;
  height: 15px;
}

.ln-goal ul {
  list-style: none;
  display: grid;
  gap: 7px;
}

.ln-goal li {
  position: relative;
  padding-left: 20px;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-2);
}

.ln-goal li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .58em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cat, var(--accent));
}

.ln-goal code {
  font-family: var(--font-mono);
  font-size: .87em;
  background: var(--surface-3);
  padding: 1px 5px;
  border-radius: var(--r-xs);
  color: var(--text);
}

.ln-body>*+* {
  margin-top: 20px;
}

.ln-h {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  letter-spacing: -.025em;
  margin-top: 40px !important;
  padding-top: 6px;
  scroll-margin-top: calc(var(--topbar-h) + 20px);
}

.ln-h:first-child {
  margin-top: 8px !important;
}

.ln-p {
  font-size: var(--fs-md);
  line-height: 1.8;
  color: var(--text-2);
  max-width: var(--measure);
}

.ln-p strong {
  color: var(--text);
  font-weight: 600;
}

.ln-list,
.ln-olist {
  max-width: var(--measure);
  display: grid;
  gap: 9px;
}

.ln-list {
  list-style: none;
}

.ln-list li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-base);
  line-height: 1.68;
  color: var(--text-2);
}

.ln-list li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: .68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cat, var(--accent));
  opacity: .75;
}

.ln-olist {
  list-style: none;
  counter-reset: lnol;
}

.ln-olist li {
  position: relative;
  padding-left: 32px;
  font-size: var(--fs-base);
  line-height: 1.68;
  color: var(--text-2);
  counter-increment: lnol;
}

.ln-olist li::before {
  content: counter(lnol);
  position: absolute;
  left: 0;
  top: .1em;
  width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 15%, transparent);
  color: var(--cat, var(--accent));
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-head-sans);
}

.ln-body code,
.ln-goal code {
  font-family: var(--font-mono);
}

.ln-p code,
.ln-list code,
.ln-olist code,
.ln-tbl code,
.ln-trap code,
.ln-ana code,
.ty code {
  font-size: .87em;
  background: var(--surface-3);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: var(--r-xs);
  color: var(--text);
}

/* ---------- 21.7 annotated code ---------- */

.lc {
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  background: var(--code-bg);
  overflow: hidden;
}

.lc-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.lc-dots {
  display: inline-flex;
  gap: 5px;
}

.lc-dots i,
.tm-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-3);
  opacity: .75;
}

.lc-file {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-2);
}

.lc-lang {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.lc-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-xs);
  background: var(--surface);
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-weight: 550;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.lc-copy:hover {
  color: var(--text);
  border-color: var(--border-3);
}

.lc-copy svg {
  width: 13px;
  height: 13px;
}

.lc-t {
  padding: 12px 16px 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.6;
}

.lc-t code {
  font-family: var(--font-mono);
  color: var(--text);
}

.lc-lines {
  list-style: none;
  padding: 12px 0;
}

.lc-line {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  padding: 3px 16px 3px 0;
  transition: background var(--t-fast);
}

.lc-line:hover {
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 5%, transparent);
}

.lc-line.is-hi {
  background: var(--surface-2);
  background: color-mix(in srgb, var(--accent-3) 9%, transparent);
}

.lc-line.is-blank {
  min-height: 10px;
}

.lc-n {
  text-align: right;
  padding-right: 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.85;
  color: var(--text-3);
  opacity: .55;
  user-select: none;
  font-variant-numeric: tabular-nums;
}

.lc-c {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  tab-size: 4;
}

.lc-w {
  position: relative;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-2);
  padding: 2px 0 6px 16px;
  grid-column: 2;
}

.lc-w code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--surface-3);
  padding: 0 4px;
  border-radius: 4px;
  color: var(--text);
}

.lc-w strong {
  color: var(--text);
  font-weight: 600;
}

.lc-w em {
  color: var(--text);
  font-style: italic;
}

.lc-w-arm {
  position: absolute;
  left: 3px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 40%, transparent);
}

/* Wide screens put the reason beside the line rather than under it, which
   is how the two read as one thought instead of two. */
@media (min-width: 1180px) {
  .lc-line {
    grid-template-columns: 40px minmax(0, 1.02fr) minmax(0, 1fr);
    column-gap: 4px;
    padding-top: 1px;
    padding-bottom: 1px;
  }

  .lc-w {
    grid-column: 3;
    padding: 0 0 0 18px;
  }

  .lc-w-arm {
    top: 4px;
    bottom: 4px;
  }

  .lc-line.is-bare .lc-c {
    grid-column: 2 / span 2;
  }
}

.lc-raw {
  display: none;
}

.lc-out {
  border-top: 1px dashed var(--border-2);
  padding: 12px 16px 14px;
  background: var(--surface-2);
}

.lc-out.is-solo {
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  border-top-style: dashed;
}

.lc-out-k {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.lc-out-k svg {
  width: 14px;
  height: 14px;
}

.lc-out pre {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.lc-after {
  padding: 12px 16px 14px;
  border-top: 1px dashed var(--border-2);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-2);
}

/* the token colours the highlighter emits, shared with .codebox */
.lc .tok-kw,
.vs .tok-kw,
.ty .tok-kw {
  color: var(--accent-2);
}

.lc .tok-str,
.vs .tok-str,
.ty .tok-str {
  color: var(--accent);
}

.lc .tok-num,
.vs .tok-num,
.ty .tok-num {
  color: var(--accent-3);
}

.lc .tok-com,
.vs .tok-com,
.ty .tok-com {
  color: var(--text-3);
  font-style: italic;
}

.lc .tok-fn,
.vs .tok-fn,
.ty .tok-fn {
  color: #62b6ff;
}

html[data-theme="light"] .lc .tok-fn,
html[data-theme="light"] .vs .tok-fn,
html[data-theme="light"] .ty .tok-fn {
  color: #1d6fd0;
}

/* ---------- 21.8 syntax anatomy ---------- */

.syn {
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--cat, var(--accent)) 24%, var(--border));
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 20px;
}

.syn-cap {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 14px;
}

.syn-cap code {
  font-family: var(--font-mono);
  color: var(--text);
}

.syn-line {
  padding: 18px 16px 14px;
  border-radius: var(--r-sm);
  background: var(--code-bg);
  border: 1px solid var(--border);
  overflow-x: auto;
}

.syn-line code {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  line-height: 2.4;
  white-space: pre;
  color: var(--text-2);
}

.syn-glue {
  color: var(--text-3);
}

.syn-part {
  position: relative;
  color: var(--text);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 15%, transparent);
  border-bottom: 2px solid var(--cat, var(--accent));
  border-radius: 3px 3px 0 0;
  padding: 2px 2px 1px;
}

.syn-mark {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cat, var(--accent));
  color: var(--text-inv);
  font-family: var(--font-head-sans);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.syn-legend {
  list-style: none;
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.syn-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.syn-item-n {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 16%, transparent);
  color: var(--cat, var(--accent));
  font-family: var(--font-head-sans);
  font-size: 11px;
  font-weight: 700;
  margin-top: 1px;
}

.syn-item-b {
  min-width: 0;
}

.syn-item-k {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  background: var(--surface-3);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  color: var(--text);
  margin-right: 8px;
}

.syn-item-w {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-2);
}

.syn-item-w code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--surface-3);
  padding: 0 4px;
  border-radius: 4px;
  color: var(--text);
}

.syn-item-w strong {
  color: var(--text);
  font-weight: 600;
}

.syn-after {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-2);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-2);
}

/* ---------- 21.9 terminal ---------- */

.tm {
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  background: var(--code-bg);
  overflow: hidden;
}

.tm-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.tm-dots {
  display: inline-flex;
  gap: 5px;
}

.tm-title {
  font-size: var(--fs-xs);
  color: var(--text-3);
  letter-spacing: .04em;
}

.tm-t {
  padding: 12px 16px 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.6;
}

.tm-body {
  padding: 14px 16px 16px;
}

.tm-cmd {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.8;
}

.tm-cmd+.tm-w,
.tm-cmd+.tm-out {
  margin-top: 6px;
}

.tm-p {
  color: var(--accent);
  font-weight: 700;
  user-select: none;
}

.tm-cmd code {
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-all;
}

.tm-w {
  padding-left: 22px;
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--text-2);
  border-left: 2px solid color-mix(in srgb, var(--cat, var(--accent)) 35%, transparent);
  margin-left: 4px;
}

.tm-w code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--surface-3);
  padding: 0 4px;
  border-radius: 4px;
  color: var(--text);
}

.tm-w strong {
  color: var(--text);
  font-weight: 600;
}

.tm-out {
  margin-top: 4px;
  padding: 8px 12px;
  border-radius: var(--r-xs);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
}

.tm-out+.tm-cmd {
  margin-top: 12px;
}

.tm-w+.tm-cmd {
  margin-top: 12px;
}

/* ---------- 21.10 wrong beside right ---------- */

.vs-cap {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 12px;
}

.vs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.vs-side {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.vs-side.is-bad {
  border-color: var(--border-2);
  border-color: color-mix(in srgb, var(--danger) 34%, var(--border));
}

.vs-side.is-good {
  border-color: var(--border-2);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
}

.vs-k {
  padding: 8px 14px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.vs-side.is-bad .vs-k {
  background: var(--danger-soft);
  color: var(--danger);
}

.vs-side.is-good .vs-k {
  background: var(--accent-soft);
  color: var(--accent);
}

.vs-code {
  padding: 14px;
  background: var(--code-bg);
  overflow-x: auto;
}

.vs-code code {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--text);
  white-space: pre;
}

.vs-w {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--text-2);
}

.vs-w code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--surface-3);
  padding: 0 4px;
  border-radius: 4px;
  color: var(--text);
}

/* ---------- 21.11 callouts ---------- */

.ln-trap,
.ln-ana {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  max-width: var(--measure);
}

.ln-trap {
  background: var(--danger-soft);
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
}

.ln-ana {
  background: var(--accent-2-soft);
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--accent-2) 26%, transparent);
}

.ln-trap-m {
  flex: none;
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--danger);
  color: var(--text-inv);
  font-family: var(--font-head-sans);
  font-weight: 800;
  font-size: 15px;
}

.ln-ana-m {
  flex: none;
  color: var(--accent-2);
}

.ln-ana-m svg {
  width: 22px;
  height: 22px;
}

.ln-trap-t,
.ln-ana-t {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.ln-trap-t {
  color: var(--danger);
}

.ln-ana-t {
  color: var(--accent-2);
}

.ln-trap-b,
.ln-ana-b {
  font-size: var(--fs-base);
  line-height: 1.68;
  color: var(--text-2);
}

.ln-trap-b strong,
.ln-ana-b strong {
  color: var(--text);
  font-weight: 600;
}

/* ---------- 21.12 table ---------- */

.ln-tbl figcaption {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 10px;
}

.ln-tbl-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.ln-tbl table {
  width: 100%;
  border-collapse: collapse;
  min-width: 460px;
}

.ln-tbl th,
.ln-tbl td {
  padding: 11px 14px;
  text-align: left;
  font-size: var(--fs-sm);
  line-height: 1.55;
  border-bottom: 1px solid var(--border);
}

.ln-tbl thead th {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 650;
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ln-tbl tbody th {
  color: var(--text);
  font-weight: 600;
}

.ln-tbl tbody td {
  color: var(--text-2);
}

.ln-tbl tbody tr:last-child th,
.ln-tbl tbody tr:last-child td {
  border-bottom: 0;
}

.ln-tbl tbody tr:hover {
  background: var(--surface-2);
}

/* ---------- 21.13 try it ---------- */

.ty {
  padding: 20px 22px;
  border: 1px dashed color-mix(in srgb, var(--cat, var(--accent)) 40%, var(--border-2));
  border-radius: var(--r-md);
  background: var(--surface-2);
  max-width: var(--measure);
}

.ty-k {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cat, var(--accent));
  margin-bottom: 10px;
}

.ty-k svg {
  width: 15px;
  height: 15px;
}

.ty-task {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--text);
}

.ty-fold {
  margin-top: 12px;
}

.ty-fold summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-sm);
  color: var(--text-2);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.ty-fold summary::-webkit-details-marker {
  display: none;
}

.ty-fold summary::before {
  content: "+";
  font-weight: 700;
  color: var(--cat, var(--accent));
}

.ty-fold[open] summary::before {
  content: "\2212";
}

.ty-fold summary:hover {
  color: var(--text);
  border-color: var(--border-3);
}

.ty-hint {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-2);
}

.ty-sol {
  margin-top: 10px;
  padding: 14px;
  border-radius: var(--r-sm);
  background: var(--code-bg);
  border: 1px solid var(--border);
  overflow-x: auto;
}

.ty-sol code {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--text);
  white-space: pre;
}

.ty-w {
  margin-top: 10px;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-2);
}

/* ---------- 21.14 vocab ---------- */

.ln-vocab {
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.ln-vocab-k {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}

.ln-vocab-k svg {
  width: 15px;
  height: 15px;
}

/* ---------- 21.15 the drill ---------- */

.ln-drill-mount {
  margin-top: 44px;
}

.dr {
  --cat: var(--accent);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--surface), var(--bg-2));
  overflow: hidden;
  transition: border-color var(--t-mid);
}

.dr.is-good {
  border-color: var(--border-2);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-2));
}

.dr.is-bad {
  border-color: var(--border-2);
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border-2));
}

.dr-head {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.dr-head-t {
  display: flex;
  gap: 14px;
  align-items: center;
  flex: 1 1 260px;
  min-width: 0;
}

.dr-ico {
  flex: none;
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
}

.dr-ico svg {
  width: 20px;
  height: 20px;
}

.dr-head h2 {
  font-size: var(--fs-lg);
  letter-spacing: -.02em;
}

.dr-head p {
  margin-top: 3px;
  font-size: var(--fs-sm);
  color: var(--text-3);
  line-height: 1.5;
}

.dr-count {
  flex: none;
  text-align: right;
}

.dr-count b {
  font-family: var(--font-head-sans);
  font-size: var(--fs-xl);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.dr-count span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.dr-rail {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  margin-top: 16px;
}

.dr-rail i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--surface-3);
  transition: background var(--t-mid);
}

.dr-rail i.is-done {
  background: var(--accent);
}

.dr-rail i.is-now {
  background: var(--surface-2);
  background: color-mix(in srgb, var(--accent) 55%, var(--surface-3));
}

.dr-stage {
  padding: 20px 24px 24px;
}

.dr-phase {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.dr-phase-k {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
}

.dr-stage[data-phase="recall"] .dr-phase-k {
  color: var(--accent-3);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--accent-3) 15%, transparent);
}

.dr-phase-w {
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.dr-intent {
  margin-top: 16px;
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -.01em;
}

.dr-intent code {
  font-family: var(--font-mono);
  font-size: .82em;
  background: var(--surface-3);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: var(--r-xs);
}

.dr-intent strong {
  font-weight: 700;
}

.dr-target {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: var(--code-bg);
  border: 1px solid var(--border);
  overflow-x: auto;
}

.dr-target code {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
}

.dr-ok {
  color: var(--accent);
}

.dr-bad {
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: 2px;
  box-shadow: inset 0 -2px 0 var(--danger);
}

.dr-rest {
  color: var(--text-3);
}

.dr-inputwrap {
  position: relative;
  margin-top: 14px;
}

.dr-input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  line-height: 1.8;
  resize: vertical;
  tab-size: 2;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.dr-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.dr.is-bad .dr-input {
  border-color: var(--border-2);
  border-color: color-mix(in srgb, var(--danger) 50%, var(--border-2));
}

.dr-msg {
  margin-top: 10px;
  min-height: 20px;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.dr-msg.is-good {
  color: var(--accent);
}

.dr-msg.is-bad {
  color: var(--danger);
}

.dr-msg.is-warn {
  color: var(--accent-3);
}

.dr-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.dr-reps {
  display: flex;
  align-items: center;
  gap: 7px;
}

.dr-reps i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--border-3);
  transition: background var(--t-fast), border-color var(--t-fast);
}

.dr-reps i.is-on {
  background: var(--accent);
  border-color: var(--accent);
}

.dr-reps span {
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-left: 4px;
}

.dr-reps-recall {
  color: var(--accent-3) !important;
  font-weight: 600;
}

.dr-acts {
  display: flex;
  gap: 8px;
  align-items: center;
}

.dr-acts kbd {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: .75;
}

.dr-help {
  margin-top: 14px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.6;
}

.dr-help kbd {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--border-2);
  border-radius: 4px;
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 10px;
}

.dr-done-in {
  padding: 34px 24px 30px;
  text-align: center;
}

.dr-done-ico {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 16px;
}

.dr-done-ico svg {
  width: 27px;
  height: 27px;
}

.dr-done-in h3 {
  font-size: var(--fs-xl);
  letter-spacing: -.025em;
}

.dr-done-in>p {
  margin: 10px auto 0;
  max-width: 52ch;
  font-size: var(--fs-base);
  line-height: 1.68;
  color: var(--text-2);
}

.dr-done-streak {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--accent-3) 14%, transparent);
  color: var(--accent-3);
  font-size: var(--fs-sm);
}

.dr-done-streak svg {
  width: 15px;
  height: 15px;
}

.dr-done-streak b {
  color: var(--accent-3);
}

.dr-done-acts {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 22px;
}

/* ---------- 21.16 daily drill page ---------- */

.dl-hero {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  margin-bottom: 28px;
}

.dl-hero-i {
  flex: none;
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
}

.dl-hero-i svg {
  width: 26px;
  height: 26px;
}

.dl-hero h1 {
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  letter-spacing: -.03em;
}

.dl-hero p {
  margin-top: 10px;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text-2);
  max-width: 68ch;
}

.dl-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.dl-stats .pip b {
  color: var(--text);
  font-weight: 700;
}

.dl-clear {
  text-align: center;
  padding: 54px 24px;
  border: 1px dashed var(--border-2);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.dl-clear>span {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 16px;
}

.dl-clear>span svg {
  width: 26px;
  height: 26px;
}

.dl-clear h3 {
  font-size: var(--fs-xl);
  letter-spacing: -.02em;
}

.dl-clear p {
  margin: 10px auto 20px;
  max-width: 52ch;
  font-size: var(--fs-base);
  line-height: 1.68;
  color: var(--text-2);
}

/* ---------- 21.17 palette + suggestion rows ---------- */

.pr-badge.is-lesson,
.hero-sug-item.is-lesson .hero-sug-badge {
  background: var(--surface-2);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}

.pr-item.is-lesson .pr-dot,
.hero-sug-item.is-lesson .hero-sug-dot {
  background: var(--cat, var(--accent));
}

/* ---------- 21.18 responsive ---------- */

@media (max-width: 1000px) {
  .lx-hero {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .lx-hero-s {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 760px) {
  .lx-hero {
    padding: 24px 20px 26px;
  }

  .lx-hero-s {
    grid-template-columns: repeat(2, 1fr);
  }

  .tk-hero,
  .dl-hero {
    flex-direction: column;
    gap: 16px;
  }

  .bf {
    padding: 20px;
  }

  .bf-used li {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .sy-item a {
    grid-template-columns: 30px minmax(0, 1fr);
    row-gap: 8px;
  }

  .sy-m {
    grid-column: 2;
  }

  .sy-d {
    white-space: normal;
  }

  .lx-cont-r {
    flex: 1 1 100%;
  }

  .dr-stage {
    padding: 16px 16px 20px;
  }

  .dr-head {
    padding: 16px;
  }

  .dr-rail {
    padding: 0 16px;
  }

  .dr-foot {
    flex-direction: column;
    align-items: stretch;
  }

  .dr-acts {
    justify-content: flex-end;
  }

  .syn-line code {
    font-size: var(--fs-sm);
  }
}

@media (prefers-reduced-motion: reduce) {

  .tk-card,
  .pg-fill,
  .dr,
  .lc-line {
    transition: none !important;
  }

  .tk-card:hover {
    transform: none;
  }
}

/* ==========================================================================
   Learn roadmap
   A numbered spine with real connector lines. The spine doubles as the
   progress indicator: each rung's segment fills to the completion of the
   tracks inside it, so the line shows how far up the course you are.
   Token-driven throughout, so light and dark stay in lockstep, and the
   per-stage accent comes from the [data-track] --cat rule app.js emits.
   ========================================================================== */

.rm-sec {
  --rail: 54px;
  --node: 38px;
}

/* ---- triage: which of these is you ---- */

.rm-triage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.rm-tri {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--t-fast), transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast);
}

.rm-tri:hover {
  border-color: var(--border-3);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.rm-tri.is-hot {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--accent-soft), transparent 70%), var(--surface);
}

.rm-tri.is-hot:hover {
  border-color: var(--accent);
}

.rm-tri-q {
  font-family: var(--font-head);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}

.rm-tri-d {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.55;
  flex: 1;
}

.rm-tri-go {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--accent);
}

.rm-tri-go svg {
  width: 13px;
  height: 13px;
  transition: transform var(--t-fast) var(--ease-out);
}

.rm-tri:hover .rm-tri-go svg {
  transform: translateX(3px);
}

/* ---- the unmissable first lesson ---- */

.rm-first {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 20px 22px;
  margin-bottom: 26px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.rm-first::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
}

.rm-first:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-2);
}

.rm-first-k {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.rm-first-k svg {
  width: 13px;
  height: 13px;
}

.rm-first strong {
  font-family: var(--font-head-sans);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.rm-first-d {
  font-size: var(--fs-base);
  color: var(--text-2);
  line-height: 1.55;
  max-width: 62ch;
}

.rm-first-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-3);
}

.rm-first-go svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  transition: transform var(--t-fast) var(--ease-out);
}

.rm-first:hover .rm-first-go svg {
  transform: translateX(4px);
}

/* ---- the route ribbon: the whole course on one line ---- */

.rm-route-k {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 10px;
}

.rm-ribbon {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.rm-rib {
  --cat: var(--border-3);
  position: relative;
  flex: 1 0 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 8px 12px;
  text-align: center;
}

/* the connector between two chips — the spine, laid out horizontally */
.rm-rib::before {
  content: "";
  position: absolute;
  top: 27px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--border-2);
}

.rm-rib:first-child::before {
  display: none;
}

.rm-rib.is-done::before,
.rm-rib.is-current::before {
  background: var(--cat);
}

.rm-rib.is-optional::before {
  background: none;
  border-top: 2px dashed var(--border-2);
  height: 0;
}

.rm-rib-n {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--border-2);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-3);
}

.rm-rib-n svg {
  width: 14px;
  height: 14px;
}

.rm-rib.is-done .rm-rib-n {
  border-color: var(--cat);
  background: var(--cat);
  color: var(--text-inv);
}

.rm-rib.is-current .rm-rib-n {
  border-color: var(--cat);
  color: var(--cat);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat) 18%, transparent);
}

.rm-rib-t {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.35;
}

.rm-rib.is-current .rm-rib-t {
  color: var(--text);
}

.rm-rib-m {
  font-size: 10px;
  color: var(--text-3);
}

/* ---- the vertical spine ---- */

.rm {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rm-stage {
  --cat: var(--accent);
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  column-gap: 18px;
}

/* the rail column: holds the line and the node */
.rm-rail {
  position: relative;
  display: flex;
  justify-content: center;
}

.rm-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--border-2);
  border-radius: 2px;
}

/* the fill — how much of this stage is done */
.rm-line i {
  display: block;
  width: 100%;
  background: var(--cat);
  border-radius: 2px;
  transition: height var(--t-slow) var(--ease-out);
}

/* the spine starts and stops at a node centre, not at the page edge */
.rm-stage:first-child .rm-line {
  top: calc(var(--node) / 2);
}

.rm-stage:last-child .rm-line {
  bottom: auto;
  height: calc(var(--node) / 2);
}

.rm-stage.is-optional .rm-line {
  background: none;
  border-left: 2px dashed var(--border-2);
  width: 0;
}

.rm-stage.is-optional .rm-line i {
  display: none;
}

.rm-node {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: var(--node);
  height: var(--node);
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--border-2);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-3);
}

.rm-node svg {
  width: 17px;
  height: 17px;
}

.rm-stage.is-current .rm-node {
  border-color: var(--cat);
  color: var(--cat);
  background: var(--bg);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--cat) 16%, transparent);
}

.rm-stage.is-done .rm-node {
  border-color: var(--cat);
  background: var(--cat);
  color: var(--text-inv);
}

.rm-stage.is-optional .rm-node {
  border-style: dashed;
}

/* the body, with a short connector reaching back to the node */
.rm-body {
  position: relative;
  padding: 0 0 34px;
  min-width: 0;
}

.rm-body::before {
  content: "";
  position: absolute;
  top: calc(var(--node) / 2 - 1px);
  left: -18px;
  width: 12px;
  height: 2px;
  background: var(--border-2);
}

.rm-stage.is-current .rm-body::before,
.rm-stage.is-done .rm-body::before {
  background: var(--cat);
}

.rm-stage:last-child .rm-body {
  padding-bottom: 4px;
}

.rm-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  min-height: var(--node);
}

.rm-head-t {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rm-k {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cat);
}

.rm-you {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat) 16%, transparent);
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--cat) 40%, transparent);
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--cat);
}

.rm-head h3 {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}

.rm-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  color: var(--text-3);
  white-space: nowrap;
}

.rm-meta b {
  color: var(--text-2);
  font-weight: 700;
}

.rm-lede {
  margin: 10px 0 0;
  font-size: var(--fs-base);
  color: var(--text-2);
  line-height: 1.62;
  max-width: var(--measure);
}

/* the three facts: how to know you are here, when to skip, what you get */
.rm-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  margin: 16px 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--border);
  overflow: hidden;
}

.rm-facts>div {
  padding: 12px 14px;
  background: var(--surface);
}

.rm-facts dt {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 5px;
}

.rm-facts dd {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.55;
}

.rm-facts dd code {
  font-family: var(--font-mono);
  font-size: .92em;
}

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

/* ---- where a track sits, shown on the track page ---- */

.tk-where {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1px;
  margin: 0 0 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--border);
  overflow: hidden;
}

.tk-where-b {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  background: var(--surface-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-2);
  transition: color var(--t-fast), background var(--t-fast);
}

.tk-where-b:hover {
  color: var(--accent);
  background: var(--surface-3);
}

.tk-where-b svg {
  width: 15px;
  height: 15px;
}

.tk-where-s {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 168px;
  padding: 10px 16px;
  background: var(--surface);
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.4;
}

.tk-where-s b {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-3);
}

.tk-where-s.is-here {
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 10%, var(--surface));
  color: var(--text);
}

.tk-where-s.is-here b {
  color: var(--cat, var(--accent));
}

.lx-hero-order {
  margin-top: 10px !important;
  font-size: var(--fs-sm) !important;
  color: var(--text-3) !important;
}

/* ---- responsive ---- */

@media (max-width: 760px) {
  .rm-sec {
    --rail: 38px;
    --node: 30px;
  }

  .rm-stage {
    column-gap: 13px;
  }

  .rm-body::before {
    left: -13px;
    width: 8px;
  }

  .rm-head h3 {
    font-size: var(--fs-lg);
  }

  .rm-first strong {
    font-size: var(--fs-lg);
  }

  .rm-rib {
    flex: 1 0 116px;
  }

  .rm-facts {
    grid-template-columns: 1fr;
  }

  .tk-where-b {
    flex: 1 1 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {

  .rm-tri,
  .rm-first,
  .rm-line i,
  .rm-tri-go svg,
  .rm-first-go svg {
    transition: none !important;
  }

  .rm-tri:hover {
    transform: none;
  }

  .rm-tri:hover .rm-tri-go svg,
  .rm-first:hover .rm-first-go svg {
    transform: none;
  }
}

/* ==========================================================================
   22. Career Roadmap
   Every colour here is a token; the family accent arrives on --cat through
   [data-fam], the same channel categories, collections and tracks already
   use, so nothing below needs to know which family it is rendering.
   ========================================================================== */

/* ---------- 22.0 shared ---------- */

.cr-h2 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 44px 0 20px;
  scroll-margin-top: calc(var(--topbar-h) + 20px);
}

.cr-h2-i {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 14%, transparent);
  color: var(--cat, var(--accent));
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--cat, var(--accent)) 26%, transparent);
}

.cr-h2-i svg {
  width: 18px;
  height: 18px;
}

.cr-h2 b {
  display: block;
  font-family: var(--font-head-sans);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}

.cr-h2 i {
  display: block;
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-top: 3px;
}

.cr-sec {
  margin-bottom: 8px;
}

.cr-prose p {
  color: var(--text-2);
  line-height: 1.75;
  margin-bottom: 14px;
  max-width: var(--measure);
}

.cr-prose strong {
  color: var(--text);
  font-weight: 600;
}

/* The coming-soon tag. It must read as information, never as a broken
   link — so it is a static chip with a dashed edge, not a button. */
.cr-soon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px dashed var(--border-2);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  cursor: default;
}

.cr-soon b {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-3);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--accent-3) 15%, transparent);
  border-radius: var(--r-pill);
  padding: 2px 7px;
}

.cr-soon.is-inline {
  padding: 1px 8px;
  font-size: inherit;
  vertical-align: baseline;
  color: var(--accent-3);
  border-style: dashed;
}

.cr-golink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--cat, var(--accent));
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 11%, transparent);
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--cat, var(--accent)) 30%, transparent);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  transition: background var(--t-fast) var(--ease-out);
}

.cr-golink svg {
  width: 14px;
  height: 14px;
  transition: transform var(--t-fast) var(--ease-out);
}

.cr-golink:hover {
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 20%, transparent);
}

.cr-golink:hover svg {
  transform: translateX(3px);
}

/* A caveat that must be read where the numbers are, not in a footer. */
.cr-disclaim {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-3);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
}

.cr-disclaim svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--accent-3);
}

.cr-notes {
  list-style: none;
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.cr-notes li {
  position: relative;
  padding-left: 20px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
}

.cr-notes li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cat, var(--accent));
}

/* ---------- 22.1 careers index hero ---------- */

.cr-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: start;
  padding: 30px 0 34px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 34px;
}

.cr-hero h1 {
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 14px 0 16px;
}

.cr-hero-c p {
  color: var(--text-2);
  line-height: 1.75;
  max-width: 62ch;
  margin-bottom: 12px;
}

.cr-hero-sub {
  font-size: var(--fs-sm);
  color: var(--text-3) !important;
}

/* ---------- 22.2 the five phases ---------- */

.cr-ph {
  list-style: none;
  counter-reset: none;
  display: grid;
  gap: 16px;
}

.cr-ph-i {
  position: relative;
  padding: 22px 24px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

.cr-ph-i::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  opacity: .65;
}

.cr-ph-h {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.cr-ph-n {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-head-sans);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}

.cr-ph-h h3 {
  font-size: var(--fs-lg);
  line-height: 1.3;
}

.cr-ph-t {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.cr-ph-l {
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 14px;
  max-width: var(--measure);
}

.cr-ph-do {
  list-style: none;
  display: grid;
  gap: 9px;
  margin-bottom: 16px;
}

.cr-ph-do li {
  position: relative;
  padding-left: 24px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
}

.cr-ph-do li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--surface-2);
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}

.cr-ph-x {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.cr-ph-done,
.cr-ph-trap {
  padding: 13px 15px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-2);
  border: 1px solid var(--border);
}

.cr-ph-done {
  background: var(--surface-2);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
  border-color: var(--accent-line);
}

.cr-ph-trap {
  background: var(--surface-2);
  background: color-mix(in srgb, var(--danger) 6%, var(--surface-2));
  border-color: var(--border-2);
  border-color: color-mix(in srgb, var(--danger) 26%, transparent);
}

.cr-ph-done span,
.cr-ph-trap span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.cr-ph-done span {
  color: var(--accent);
}

.cr-ph-trap span {
  color: var(--danger);
}

.cr-ph-done svg,
.cr-ph-trap svg {
  width: 14px;
  height: 14px;
}

/* ---------- 22.3 role cards ---------- */

.cr-fam {
  margin-bottom: 34px;
}

.cr-fam-h {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.cr-fam-h > div {
  flex: 1 1 auto;
  min-width: 0;
}

.cr-fam-h h3 {
  font-size: var(--fs-lg);
}

.cr-fam-h p {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-top: 3px;
}

.cr-fam-i {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--cat, var(--accent));
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 13%, transparent);
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--cat, var(--accent)) 26%, transparent);
}

.cr-fam-i svg {
  width: 20px;
  height: 20px;
}

.cr-famdesc {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  margin-bottom: 22px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--cat, var(--accent));
}

.cr-famdesc-i {
  flex: none;
  color: var(--cat, var(--accent));
}

.cr-famdesc-i svg {
  width: 22px;
  height: 22px;
}

.cr-famdesc h3 {
  font-size: var(--fs-md);
  margin-bottom: 5px;
}

.cr-famdesc p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
  max-width: var(--measure);
}

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

.cr-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px 19px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
}

.cr-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--cat, var(--accent));
  opacity: .5;
}

.cr-card:hover {
  border-color: var(--border-2);
  border-color: color-mix(in srgb, var(--cat, var(--accent)) 45%, var(--border));
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.cr-card:hover::before {
  opacity: 1;
}

.cr-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cr-card-ico {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--cat, var(--accent));
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 13%, transparent);
}

.cr-card-ico svg {
  width: 18px;
  height: 18px;
}

/* Demand as four pips plus its label. The pips alone would be colour-and-
   shape only; the word makes it readable to everyone. */
.cr-card-dem {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.cr-card-dem i {
  width: 5px;
  height: 12px;
  border-radius: 1.5px;
  background: var(--border-3);
}

.cr-card-dem[data-n="1"] i:nth-child(-n+1),
.cr-card-dem[data-n="2"] i:nth-child(-n+2),
.cr-card-dem[data-n="3"] i:nth-child(-n+3),
.cr-card-dem[data-n="4"] i:nth-child(-n+4) {
  background: var(--cat, var(--accent));
}

.cr-card-dem b {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-left: 5px;
}

.cr-card-t {
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}

.cr-card-a {
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.5;
}

.cr-card-d {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-2);
  flex: 1 1 auto;
}

.cr-card-sk {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.cr-card-sk i {
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 3px 8px;
}

.cr-card-f {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  margin-top: 2px;
  border-top: 1px solid var(--border);
}

.cr-card-pay b {
  display: block;
  font-family: var(--font-head-sans);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--cat, var(--accent));
  font-variant-numeric: tabular-nums;
}

.cr-card-pay i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-3);
}

.cr-card-cov {
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cr-card.is-compact {
  padding: 15px 16px 14px;
}

.cr-card.is-compact .cr-card-t {
  font-size: var(--fs-md);
}

/* ---------- 22.4 salary charts ---------- */

.cr-pay {
  margin: 0;
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

.cr-pay-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.cr-pay-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.cr-pay-key i {
  display: block;
  border-radius: 2px;
}

.cr-pay-key i.k-range {
  width: 22px;
  height: 9px;
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 42%, transparent);
}

.cr-pay-key i.k-mid {
  width: 3px;
  height: 13px;
  background: var(--cat, var(--accent));
}

.cr-pay-scale {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.cr-pay-rows {
  display: grid;
  gap: 18px;
}

.cr-pay-row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) 128px;
  align-items: center;
  gap: 14px;
}

.cr-pay-lab b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}

.cr-pay-lab span {
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.cr-pay-track {
  position: relative;
  height: 15px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.cr-pay-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 42%, transparent);
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--cat, var(--accent)) 60%, transparent);
}

.cr-pay-mid {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 3px;
  border-radius: 2px;
  background: var(--cat, var(--accent));
  transform: translateX(-1px);
}

.cr-pay-num {
  text-align: right;
}

.cr-pay-num b {
  display: block;
  font-family: var(--font-head-sans);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.cr-pay-num span {
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cr-pay-note {
  grid-column: 1 / -1;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border-left: 2px solid color-mix(in srgb, var(--cat, var(--accent)) 40%, transparent);
}

.cr-pay-anchor {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 8%, var(--surface));
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--cat, var(--accent)) 26%, transparent);
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--text-2);
}

.cr-pay-anchor b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* cross-role comparison */
.cr-cmp {
  margin: 0;
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

.cr-cmp-cap {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.cr-cmp-rows {
  display: grid;
  gap: 4px;
}

.cr-cmp-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 96px;
  align-items: center;
  gap: 14px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease-out);
}

.cr-cmp-row:hover {
  background: var(--surface-2);
}

.cr-cmp-n {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cr-cmp-row:hover .cr-cmp-n {
  color: var(--text);
}

.cr-cmp-track {
  position: relative;
  display: block;
  height: 11px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.cr-cmp-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 45%, transparent);
}

.cr-cmp-mid {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 3px;
  border-radius: 2px;
  background: var(--cat, var(--accent));
}

.cr-cmp-v {
  text-align: right;
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- 22.5 role page header ---------- */

.cr-article {
  max-width: 100%;
}

.cr-head {
  padding-bottom: 24px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--border);
}

.cr-head-top {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.cr-head-ico {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  color: var(--cat, var(--accent));
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 13%, transparent);
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--cat, var(--accent)) 28%, transparent);
}

.cr-head-ico svg {
  width: 24px;
  height: 24px;
}

.cr-head h1 {
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  line-height: 1.12;
  letter-spacing: -.02em;
}

.cr-head-a {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-top: 8px;
}

.cr-deck {
  margin-top: 14px;
  max-width: var(--measure);
}

.lvl.is-tag {
  color: var(--cat, var(--accent));
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 13%, transparent);
  border-color: var(--border-2);
  border-color: color-mix(in srgb, var(--cat, var(--accent)) 32%, transparent);
}

.cr-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 22px 0 20px;
}

.cr-fact {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
}

.cr-fact b {
  display: block;
  font-family: var(--font-head-sans);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--cat, var(--accent));
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.cr-fact span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-top: 4px;
}

.cr-toc ol {
  columns: 2;
  column-gap: 26px;
}

/* ---------- 22.6 day in the life ---------- */

.cr-day {
  list-style: none;
  position: relative;
  padding-left: 8px;
}

.cr-day::before {
  content: "";
  position: absolute;
  left: 46px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--border-2);
}

.cr-day-i {
  position: relative;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 18px;
  padding: 10px 0;
}

.cr-day-t {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--cat, var(--accent));
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
}

.cr-day-i::after {
  content: "";
  position: absolute;
  left: 38px;
  top: 17px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--cat, var(--accent));
}

.cr-day-d {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--text-2);
  max-width: var(--measure);
}

/* ---------- 22.7 fit ---------- */

.cr-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
}

.cr-fit-c {
  padding: 20px 22px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
}

.cr-fit-c.is-yes {
  border-left: 3px solid var(--accent);
}

.cr-fit-c.is-no {
  border-left: 3px solid var(--danger);
}

.cr-fit-k {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.cr-fit-c.is-yes .cr-fit-k {
  color: var(--accent);
}

.cr-fit-c.is-no .cr-fit-k {
  color: var(--danger);
}

.cr-fit-k svg {
  width: 15px;
  height: 15px;
}

.cr-fit-c ul {
  list-style: none;
  display: grid;
  gap: 10px;
}

.cr-fit-c li {
  position: relative;
  padding-left: 20px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
}

.cr-fit-c li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.cr-fit-c.is-yes li::before {
  background: var(--accent);
}

.cr-fit-c.is-no li::before {
  background: var(--danger);
}

/* ---------- 22.8 skill matrix ---------- */

.cr-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 14px 16px;
  margin-bottom: 20px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.cr-legend-i {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.cr-legend-i i {
  width: 9px;
  height: 9px;
  border-radius: 2.5px;
}

.cr-legend-i b {
  color: var(--text-2);
}

.cr-legend-i em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.cr-legend-i[data-lvl="must"] i {
  background: var(--danger);
}

.cr-legend-i[data-lvl="should"] i {
  background: var(--accent-3);
}

.cr-legend-i[data-lvl="edge"] i {
  background: var(--accent-2);
}

.cr-sg {
  margin-bottom: 24px;
}

.cr-sg-h {
  margin-bottom: 14px;
}

.cr-sg-h h3 {
  font-size: var(--fs-md);
  display: flex;
  align-items: center;
  gap: 10px;
}

.cr-sg-h h3::before {
  content: "";
  width: 4px;
  height: 15px;
  border-radius: 2px;
  background: var(--cat, var(--accent));
}

.cr-sg-h p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-3);
  margin-top: 7px;
  max-width: var(--measure);
}

.cr-sk {
  list-style: none;
  display: grid;
  gap: 10px;
}

.cr-sk-i {
  padding: 15px 17px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-3);
}

.cr-sk-i[data-lvl="must"] {
  border-left-color: var(--danger);
}

.cr-sk-i[data-lvl="should"] {
  border-left-color: var(--accent-3);
}

.cr-sk-i[data-lvl="edge"] {
  border-left-color: var(--accent-2);
}

.cr-sk-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.cr-sk-n {
  font-family: var(--font-head-sans);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
}

.cr-sk-l {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 3px 9px;
}

.cr-sk-l[data-lvl="must"] {
  color: var(--danger);
  background: var(--danger-soft);
}

.cr-sk-l[data-lvl="should"] {
  color: var(--accent-3);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--accent-3) 14%, transparent);
}

.cr-sk-l[data-lvl="edge"] {
  color: var(--accent-2);
  background: var(--accent-2-soft);
}

.cr-sk-d {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
  margin-top: 7px;
  max-width: var(--measure);
}

.cr-sk-go {
  display: block;
  margin-top: 11px;
}

.cr-stack {
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin-top: 8px;
}

.cr-stack-k {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 12px;
}

.cr-stack-k svg {
  width: 15px;
  height: 15px;
  color: var(--cat, var(--accent));
}

.chip.is-static {
  cursor: default;
}

.chip.is-static:hover {
  transform: none;
}

/* ---------- 22.9 edge cards ---------- */

.cr-edge {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

.cr-edge-c {
  position: relative;
  padding: 20px 22px 20px 24px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
}

.cr-edge-n {
  position: absolute;
  top: 18px;
  right: 20px;
  font-family: var(--font-head-sans);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--text-2);
  color: color-mix(in srgb, var(--cat, var(--accent)) 22%, transparent);
}

.cr-edge-c h3 {
  font-size: var(--fs-md);
  line-height: 1.35;
  margin-bottom: 9px;
  padding-right: 42px;
}

.cr-edge-c p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
}

/* ---------- 22.10 the ladder ---------- */

.cr-ladder {
  list-style: none;
  position: relative;
  display: grid;
  gap: 12px;
}

.cr-rung {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.cr-rung-n {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-head-sans);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--cat, var(--accent));
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 12%, transparent);
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--cat, var(--accent)) 30%, transparent);
}

.cr-rung-b {
  padding: 15px 18px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
}

.cr-rung-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}

.cr-rung-h h3 {
  font-size: var(--fs-md);
}

.cr-rung-m {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.cr-rung-y {
  color: var(--text-3);
}

.cr-rung-p {
  font-weight: 700;
  color: var(--cat, var(--accent));
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 11%, transparent);
  border-radius: var(--r-pill);
  padding: 3px 10px;
}

.cr-rung-b p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
  max-width: var(--measure);
}

/* ---------- 22.11 who hires ---------- */

.cr-cos {
  display: grid;
  gap: 12px;
}

.cr-co {
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
}

.cr-co-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.cr-co-h h3 {
  font-size: var(--fs-md);
}

.cr-co-p {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--cat, var(--accent));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cr-co > p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
  margin-bottom: 13px;
  max-width: var(--measure);
}

.cr-co-names {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cr-co-names span {
  font-size: var(--fs-xs);
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 4px 10px;
}

/* ---------- 22.12 interview loop ---------- */

.cr-hire {
  list-style: none;
  display: grid;
  gap: 12px;
}

.cr-hire-i {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
}

.cr-hire-n {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-3);
  border: 1px solid var(--border-2);
}

.cr-hire-i h3 {
  font-size: var(--fs-md);
  margin-bottom: 6px;
}

.cr-hire-i > div > p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
  max-width: var(--measure);
}

.cr-hire-tip {
  display: flex;
  gap: 9px;
  margin-top: 11px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 8%, var(--surface-2));
  border-left: 2px solid var(--cat, var(--accent));
  color: var(--text-2) !important;
}

.cr-hire-tip svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  color: var(--cat, var(--accent));
}

/* ---------- 22.13 portfolio proof ---------- */

.cr-proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

.cr-proof-c {
  padding: 19px 21px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid color-mix(in srgb, var(--cat, var(--accent)) 55%, transparent);
}

.cr-proof-c h3 {
  font-size: var(--fs-md);
  line-height: 1.35;
  margin-bottom: 9px;
}

.cr-proof-c p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
}

.cr-proof-w {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-2);
  color: var(--text-3) !important;
}

.cr-proof-w b {
  color: var(--cat, var(--accent));
}

/* ---------- 22.14 study plan ---------- */

.cr-cov {
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin-bottom: 20px;
}

.cr-cov-b {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.cr-cov-k {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
}

.cr-cov-v {
  font-size: var(--fs-sm);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.cr-cov-v b {
  font-family: var(--font-head-sans);
  font-size: var(--fs-lg);
  color: var(--cat, var(--accent));
}

.cr-cov-bar {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}

.cr-cov-bar i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg,
      var(--cat, var(--accent)),
      color-mix(in srgb, var(--cat, var(--accent)) 55%, var(--accent-2)));
}

.cr-cov-n {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-3);
  margin-top: 12px;
}

.cr-plan {
  list-style: none;
  position: relative;
  display: grid;
  gap: 10px;
}

.cr-plan-i {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.cr-plan-n {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--cat, var(--accent));
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--accent)) 12%, transparent);
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--cat, var(--accent)) 28%, transparent);
}

.cr-plan-i.is-soon .cr-plan-n {
  color: var(--text-3);
  background: var(--surface-2);
  border-color: var(--border-2);
  border-style: dashed;
}

.cr-plan-b {
  padding: 15px 17px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
}

.cr-plan-i.is-soon .cr-plan-b {
  background: var(--surface-2);
  border-style: dashed;
}

.cr-plan-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.cr-plan-h h3 {
  font-size: var(--fs-md);
}

.cr-plan-mo {
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  white-space: nowrap;
}

.cr-plan-i.is-soon .cr-plan-mo {
  background: var(--surface-3);
}

.cr-plan-b > p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
  max-width: var(--measure);
}

.cr-plan-go {
  display: block;
  margin-top: 11px;
}

/* ---------- 22.15 myths ---------- */

.cr-myths {
  display: grid;
  gap: 12px;
}

.cr-myth {
  padding: 17px 19px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
}

.cr-myth p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  max-width: var(--measure);
}

.cr-myth-m {
  color: var(--text-3);
  margin-bottom: 11px;
  padding-bottom: 11px;
  border-bottom: 1px dashed var(--border-2);
}

.cr-myth-r {
  color: var(--text-2);
}

.cr-myth-m span,
.cr-myth-r span {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 2px 9px;
  margin-right: 9px;
  vertical-align: 1px;
}

.cr-myth-m span {
  color: var(--danger);
  background: var(--danger-soft);
}

.cr-myth-r span {
  color: var(--accent);
  background: var(--accent-soft);
}

/* ---------- 22.16 the playbook ---------- */

.cr-truths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.cr-truth {
  padding: 19px 21px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
}

.cr-truth h3 {
  font-size: var(--fs-md);
  line-height: 1.35;
  margin-bottom: 9px;
}

.cr-truth p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
}

.cr-pbrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.cr-pb {
  padding: 20px 22px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

.cr-pb-k {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head-sans);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}

.cr-pb-k svg {
  width: 17px;
  height: 17px;
  color: var(--accent);
}

.cr-pb-i {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-3);
  margin-bottom: 14px;
}

.cr-pb-l {
  list-style: none;
  display: grid;
  gap: 11px;
}

.cr-pb-l li {
  position: relative;
  padding-left: 20px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
}

.cr-pb-l li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--surface-2);
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}

.cr-pb-l b {
  display: block;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 2px;
}

.cr-funnel {
  list-style: none;
  display: grid;
  gap: 2px;
}

.cr-funnel li {
  display: grid;
  grid-template-columns: 62px 1fr;
  grid-template-areas: "v k" "v d";
  gap: 0 14px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.cr-funnel-v {
  grid-area: v;
  font-family: var(--font-head-sans);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.cr-funnel-k {
  grid-area: k;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}

.cr-funnel-d {
  grid-area: d;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-3);
}

.cr-levers {
  list-style: none;
  display: grid;
  gap: 8px;
}

.cr-levers li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "t d" "n n";
  gap: 4px 14px;
  align-items: baseline;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.cr-lever-t {
  grid-area: t;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
}

.cr-lever-d {
  grid-area: d;
  font-family: var(--font-head);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cr-lever-n {
  grid-area: n;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
}

.cr-honest {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 24px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-3);
}

.cr-honest-i {
  flex: none;
  color: var(--accent-3);
}

.cr-honest-i svg {
  width: 22px;
  height: 22px;
}

.cr-honest h3 {
  font-size: var(--fs-md);
  margin-bottom: 9px;
}

.cr-honest p {
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--text-2);
  max-width: var(--measure);
  margin-bottom: 14px;
}

.cr-honest b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ---------- 22.17 responsive ---------- */

@media (max-width: 900px) {
  .cr-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .cr-toc ol {
    columns: 1;
  }
}

@media (max-width: 720px) {

  /* Salary rows collapse to label over bar over figures, so nothing has to
     scroll sideways and the numbers stay legible at 375px. */
  .cr-pay-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "lab num" "track track" "note note";
    gap: 8px 12px;
  }

  .cr-pay-lab {
    grid-area: lab;
  }

  .cr-pay-num {
    grid-area: num;
    text-align: right;
  }

  .cr-pay-num b,
  .cr-pay-num span {
    display: inline-block;
  }

  .cr-pay-num b {
    margin-right: 8px;
  }

  .cr-pay-track {
    grid-area: track;
  }

  .cr-pay-note {
    grid-area: note;
  }

  .cr-cmp-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "n v" "track track";
    gap: 6px 12px;
    padding: 10px;
  }

  .cr-cmp-n {
    grid-area: n;
    white-space: normal;
  }

  .cr-cmp-v {
    grid-area: v;
  }

  .cr-cmp-track {
    grid-area: track;
  }

  .cr-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cr-day-i {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
  }

  .cr-day::before {
    left: 40px;
  }

  .cr-day-i::after {
    left: 32px;
  }

  .cr-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cr-levers li {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "t" "d" "n";
  }

  .cr-honest,
  .cr-famdesc {
    flex-direction: column;
    gap: 12px;
  }

  .cr-fam-h {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .cr-ph-i {
    padding: 18px 16px;
  }

  .cr-rung,
  .cr-plan-i,
  .cr-hire-i {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
  }

  .cr-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Motion is decoration here, never information — so removing it costs
   nothing and the reduced-motion contract is honoured properly. */
@media (prefers-reduced-motion: reduce) {

  .cr-card,
  .cr-golink,
  .cr-golink svg,
  .cr-cmp-row {
    transition: none !important;
  }

  .cr-card:hover {
    transform: none;
  }

  .cr-golink:hover svg {
    transform: none;
  }
}

/* ==========================================================================
   Question bank and speaking practice

   Two scored surfaces. They share a visual grammar with the rest of the
   product — same tokens, same radii, same accent-per-track colour — and add
   one idea of their own: a result is never just a number. A revealed answer
   always carries its reason, and a speaking score always carries the
   sentence that tells you what to change.
   ========================================================================== */

/* ---------- shared headers ---------- */

.qh {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 26px;
  margin-bottom: 26px;
  background: linear-gradient(140deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.qh-i {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-line);
}

.qh.is-speak .qh-i {
  background: var(--accent-2-soft);
  color: var(--accent-2);
  border-color: rgba(127, 140, 255, .32);
}

.qh-i svg {
  width: 26px;
  height: 26px;
}

.qh h1 {
  font-family: var(--font-head);
  font-size: var(--fs-2xl);
  line-height: 1.15;
  margin: 0 0 8px;
}

.qh p {
  color: var(--text-2);
  max-width: 62ch;
  margin: 0 0 14px;
  font-size: var(--fs-base);
}

.qh-pips,
.qh-go {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qh-go {
  margin-top: 12px;
}

.pip.is-on {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

/* ---------- bank index ---------- */

.qb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.qb-card {
  display: block;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast);
}

.qb-card:hover {
  transform: translateY(-2px);
  border-color: var(--c, var(--accent));
}

.qb-card-i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: var(--r-sm);
  color: var(--c, var(--accent));
  background: var(--surface-2);
  background: color-mix(in srgb, var(--c, var(--accent)) 12%, transparent);
}

.qb-card-i svg {
  width: 22px;
  height: 22px;
}

.qb-card h3 {
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  margin: 0 0 6px;
}

.qb-card p {
  color: var(--text-2);
  font-size: var(--fs-sm);
  margin: 0 0 14px;
  line-height: 1.55;
}

.qb-card-m {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* the mistakes callout */

.qz-wrongcard {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  margin-bottom: 22px;
  background: var(--danger-soft);
  border: 1px solid rgba(255, 107, 122, .3);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-fast);
}

.qz-wrongcard:hover {
  border-color: var(--danger);
}

.qz-wrongcard-i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: rgba(255, 107, 122, .16);
  color: var(--danger);
}

.qz-wrongcard-i svg,
.qz-wrongcard-go svg {
  width: 22px;
  height: 22px;
}

.qz-wrongcard h3 {
  font-family: var(--font-head);
  font-size: var(--fs-md);
  margin: 0 0 4px;
}

.qz-wrongcard p {
  color: var(--text-2);
  font-size: var(--fs-sm);
  margin: 0;
  line-height: 1.5;
}

.qz-wrongcard-go {
  color: var(--danger);
}

/* The gauntlet callout sits beside the mistakes one and must not read as a
   second copy of it, so it takes the amber accent rather than the red: the
   mistakes set is a correction, the hardcore set is a challenge. */

.qz-wrongcard.is-hard {
  background: var(--surface-2);
  background: color-mix(in srgb, var(--accent-3) 11%, transparent);
  border-color: var(--border-2);
  border-color: color-mix(in srgb, var(--accent-3) 32%, transparent);
}

.qz-wrongcard.is-hard:hover {
  border-color: var(--accent-3);
}

.qz-wrongcard.is-hard .qz-wrongcard-i {
  background: var(--surface-2);
  background: color-mix(in srgb, var(--accent-3) 17%, transparent);
  color: var(--accent-3);
}

.qz-wrongcard.is-hard .qz-wrongcard-go {
  color: var(--accent-3);
}

.qh.is-hard .qh-i {
  background: var(--surface-2);
  background: color-mix(in srgb, var(--accent-3) 15%, transparent);
  color: var(--accent-3);
}

/* ---------- chapter list ---------- */

.qb-chaps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.qb-chap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-fast);
}

.qb-chap:hover {
  border-color: var(--c, var(--accent));
}

.qb-chap>a:first-child {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.qb-chap-n {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.qb-chap.is-strong .qb-chap-n {
  background: var(--accent-soft);
  color: var(--accent);
}

.qb-chap.is-mid .qb-chap-n {
  background: rgba(255, 180, 84, .14);
  color: var(--accent-3);
}

.qb-chap.is-weak .qb-chap-n {
  background: var(--danger-soft);
  color: var(--danger);
}

.qb-chap-b {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.qb-chap-t {
  font-weight: 600;
  font-size: var(--fs-base);
}

.qb-chap-d {
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.qb-chap-m {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.qb-best {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
}

.qb-count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.qb-chap-test {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px;
  border-left: 1px solid var(--border);
  color: var(--text-3);
  text-decoration: none;
  font-size: var(--fs-sm);
  transition: color var(--t-fast), background var(--t-fast);
}

.qb-chap-test:hover {
  color: var(--accent);
  background: var(--surface-2);
}

.qb-chap-test svg {
  width: 15px;
  height: 15px;
}

/* ---------- one chapter ---------- */

.qc-how {
  color: var(--text-2);
  font-size: var(--fs-sm);
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 16px;
}

.qc-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.qc-tags-k {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.qc-tags-k svg {
  width: 14px;
  height: 14px;
}

.qc-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-2);
}

.qc-tag b {
  font-family: var(--font-mono);
  color: var(--text-3);
}

/* ---------- the quiz runner ---------- */

.qz-bar {
  position: sticky;
  top: var(--topbar-h);
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 18px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  backdrop-filter: blur(8px);
}

.qz-bar.is-done {
  border-color: var(--accent-line);
}

.qz-bar-l {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.qz-bar-k {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: var(--fs-sm);
}

.qz-bar-k svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

.qz-bar-s {
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-family: var(--font-mono);
}

.qz-bar-r {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qz-clock {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--accent-3);
  min-width: 48px;
  text-align: right;
}

.qz-bar-pg {
  grid-column: 1 / -1;
  height: 3px;
  border-radius: 2px;
  background: var(--surface-hi);
  overflow: hidden;
}

.qz-bar-pg span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width var(--t-mid) var(--ease-out);
}

.qz-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  counter-reset: none;
}

.qz-q {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  scroll-margin-top: calc(var(--topbar-h) + 90px);
  transition: border-color var(--t-fast);
}

.qz-q.is-right {
  border-color: var(--accent-line);
}

.qz-q.is-wrong {
  border-color: rgba(255, 107, 122, .38);
}

.qz-q-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.qz-n {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  flex: none;
}

.qz-q-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.qz-tag {
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: var(--fs-xs);
}

.qz-mark {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: none;
}

.qz-q.is-right .qz-mark {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  position: relative;
}

.qz-q.is-right .qz-mark::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.qz-q.is-wrong .qz-mark {
  background: var(--danger-soft);
  border: 1px solid rgba(255, 107, 122, .4);
  position: relative;
}

.qz-q.is-wrong .qz-mark::after,
.qz-q.is-wrong .qz-mark::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 5px;
  width: 2px;
  height: 10px;
  background: var(--danger);
}

.qz-q.is-wrong .qz-mark::after {
  transform: rotate(45deg);
}

.qz-q.is-wrong .qz-mark::before {
  transform: rotate(-45deg);
}

.qz-stem {
  font-size: var(--fs-md);
  line-height: 1.6;
  margin-bottom: 16px;
}

.qz-stem code {
  font-family: var(--font-mono);
  font-size: .92em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--code-bg);
}

.qz-opts {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.qz-opt-b {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 20px;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: inherit;
  font: inherit;
  font-size: var(--fs-base);
  line-height: 1.5;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.qz-opt-b:hover:not(:disabled) {
  border-color: var(--border-3);
  background: var(--surface-3);
}

.qz-opt-b:disabled {
  cursor: default;
}

.qz-let {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-xs);
  background: var(--surface-hi);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  flex: none;
}

.qz-opt-b.is-picked {
  border-color: var(--border-3);
  background: var(--surface-3);
}

.qz-opt-b.is-picked .qz-let {
  background: var(--surface-hi);
  color: var(--text);
}

.qz-opt-b.is-right {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.qz-opt-b.is-right .qz-let {
  background: var(--accent);
  color: var(--text-inv);
}

.qz-opt-b.is-wrong {
  border-color: rgba(255, 107, 122, .38);
  background: var(--danger-soft);
}

.qz-opt-b.is-wrong .qz-let {
  background: var(--danger);
  color: var(--text-inv);
}

.qz-opt-s::after {
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.qz-opt-b.is-right .qz-opt-s::after {
  content: "correct";
  color: var(--accent);
}

.qz-opt-b.is-wrong .qz-opt-s::after {
  content: "yours";
  color: var(--danger);
}

.qz-q-foot {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qz-locked {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.qz-locked svg {
  width: 14px;
  height: 14px;
}

/* the reveal — the reason this feature exists */

.qz-sol {
  margin-top: 14px;
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  animation: qz-reveal var(--t-mid) var(--ease-out);
}

@keyframes qz-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.qz-sol-a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--fs-base);
  margin: 0 0 10px;
  line-height: 1.55;
}

.qz-sol-a svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex: none;
  transform: translateY(2px);
}

.qz-sol-a b {
  font-family: var(--font-mono);
  color: var(--accent);
}

.qz-sol-x {
  color: var(--text-2);
  font-size: var(--fs-base);
  line-height: 1.65;
  margin: 0;
}

.qz-steps {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-2);
}

.qz-steps-k {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  margin: 0 0 10px;
}

.qz-steps-k svg {
  width: 14px;
  height: 14px;
}

.qz-steps ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 7px;
}

.qz-steps li {
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.qz-steps li::marker {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.qz-sol-n {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--border-2);
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.qz-sol-n svg {
  width: 15px;
  height: 15px;
  color: var(--accent-3);
  flex: none;
  transform: translateY(2px);
}

/* the score panel */

.qz-result {
  margin-top: 24px;
}

.qz-res-in {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 24px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
}

.qz-res-in[data-band="excellent"],
.qz-res-in[data-band="strong"] {
  border-color: var(--accent-line);
}

.qz-res-in[data-band="rough"] {
  border-color: rgba(255, 107, 122, .32);
}

.qz-res-score {
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-align: center;
}

.qz-res-pct {
  font-family: var(--font-head-sans);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

.qz-res-in[data-band="developing"] .qz-res-pct,
.qz-res-in[data-band="rough"] .qz-res-pct {
  color: var(--danger);
}

.qz-res-score span:last-child {
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-family: var(--font-mono);
}

.qz-res-b h3 {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  margin: 0 0 6px;
}

.qz-res-b p {
  color: var(--text-2);
  font-size: var(--fs-base);
  line-height: 1.6;
  margin: 0 0 14px;
  max-width: 60ch;
}

.qz-res-pips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.qz-res-go {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- speaking index ---------- */

.sp-cap {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 26px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.sp-cap.is-ok {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.sp-cap.is-warn {
  border-color: rgba(255, 180, 84, .32);
  background: rgba(255, 180, 84, .08);
}

.sp-cap svg {
  width: 22px;
  height: 22px;
  transform: translateY(2px);
}

.sp-cap.is-ok svg {
  color: var(--accent);
}

.sp-cap.is-warn svg {
  color: var(--accent-3);
}

.sp-cap b {
  display: block;
  font-size: var(--fs-base);
  margin-bottom: 4px;
}

.sp-cap span {
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.sp-group {
  margin-bottom: 32px;
}

.sp-group-h {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  margin: 0 0 4px;
}

.sp-group-n {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-xs);
  background: var(--accent-2-soft);
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.sp-group-d {
  color: var(--text-3);
  font-size: var(--fs-sm);
  margin: 0 0 14px;
}

.sp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

.sp-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast);
}

.sp-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-2);
}

.sp-card.is-done {
  border-color: var(--accent-line);
}

.sp-card-i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  background: var(--accent-2-soft);
  color: var(--accent-2);
}

.sp-card-i svg {
  width: 20px;
  height: 20px;
}

.sp-card-b {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.sp-card-t {
  font-weight: 600;
  font-size: var(--fs-base);
}

.sp-card-s {
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.sp-card-m {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

/* ---------- one session ---------- */

.sp-coach {
  padding: 20px 22px;
  margin: 22px 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.sp-coach-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: var(--fs-md);
  margin: 0 0 12px;
}

.sp-coach-h svg {
  width: 18px;
  height: 18px;
  color: var(--accent-3);
}

.sp-coach ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 9px;
}

.sp-coach li {
  color: var(--text-2);
  font-size: var(--fs-base);
  line-height: 1.65;
}

.sp-coach li::marker {
  color: var(--accent-2);
}

.sp-warn {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 20px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 180, 84, .32);
  background: rgba(255, 180, 84, .08);
}

.sp-warn.is-err {
  border-color: rgba(255, 107, 122, .35);
  background: var(--danger-soft);
}

.sp-warn svg {
  width: 20px;
  height: 20px;
  color: var(--accent-3);
  transform: translateY(2px);
}

.sp-warn.is-err svg {
  color: var(--danger);
}

.sp-warn b {
  display: block;
  margin-bottom: 4px;
}

.sp-warn span {
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* the activity stepper */

.sp-steps {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 18px;
  scrollbar-width: thin;
}

.sp-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 8px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}

.sp-step:hover {
  border-color: var(--border-3);
  color: var(--text);
}

.sp-step.is-here {
  border-color: var(--accent-2);
  color: var(--text);
  background: var(--accent-2-soft);
}

.sp-step.is-done {
  border-color: var(--accent-line);
}

.sp-step-n {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-hi);
  font-family: var(--font-mono);
  font-size: 11px;
  flex: none;
}

.sp-step.is-here .sp-step-n {
  background: var(--accent-2);
  color: var(--text-inv);
}

.sp-step-s:not(:empty) {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent);
  padding-left: 6px;
  border-left: 1px solid var(--border-2);
}

/* the activity itself */

.sp-act {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.sp-act-h {
  margin-bottom: 18px;
}

.sp-act-k {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  margin-bottom: 10px;
  border-radius: var(--r-pill);
  background: var(--accent-2-soft);
  color: var(--accent-2);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.sp-act-k svg {
  width: 14px;
  height: 14px;
}

.sp-act-h h3 {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  margin: 0 0 6px;
}

.sp-act-b {
  color: var(--text-2);
  font-size: var(--fs-base);
  line-height: 1.65;
  margin: 0;
  max-width: 62ch;
}

.sp-script {
  padding: 18px 20px;
  margin-bottom: 18px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--accent-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.sp-script-k {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  margin: 0 0 10px;
}

.sp-script-k svg {
  width: 14px;
  height: 14px;
}

.sp-hear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 4px 11px;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-xs);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.sp-hear:hover {
  color: var(--accent-2);
  border-color: var(--accent-2);
}

.sp-script-t {
  font-size: var(--fs-lg);
  line-height: 1.7;
  margin: 0;
}

.sp-brief {
  padding: 16px 18px;
  margin-bottom: 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.sp-brief-k {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  margin: 0 0 10px;
}

.sp-brief-k svg {
  width: 14px;
  height: 14px;
}

.sp-brief-s {
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--accent-3);
  text-transform: none;
  letter-spacing: 0;
}

.sp-brief ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}

.sp-brief li {
  color: var(--text-2);
  font-size: var(--fs-base);
  line-height: 1.55;
}

.sp-brief li::marker {
  color: var(--accent-2);
}

.sp-avoid {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--border-2);
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.sp-avoid svg {
  width: 14px;
  height: 14px;
  color: var(--danger);
  flex: none;
}

.sp-avoid b {
  color: var(--danger);
}

/* the record rig */

.sp-rig {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 18px;
  margin-bottom: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
}

.sp-rec {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 13px 22px;
  background: var(--accent-2);
  border: none;
  border-radius: var(--r-pill);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: var(--fs-base);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast);
}

.sp-rec:hover:not(:disabled) {
  transform: translateY(-1px);
}

.sp-rec:disabled {
  background: var(--surface-3);
  color: var(--text-3);
  cursor: not-allowed;
}

.sp-rec-d {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  flex: none;
}

.sp-rec.is-live {
  background: var(--danger);
}

.sp-rec.is-live .sp-rec-d {
  animation: sp-pulse 1.2s ease-in-out infinite;
}

@keyframes sp-pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .45;
    transform: scale(.8);
  }
}

.sp-rig-b {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.sp-level {
  height: 8px;
  border-radius: 4px;
  background: var(--surface-hi);
  overflow: hidden;
}

.sp-level i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  transition: width 90ms linear;
}

.sp-time {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.sp-time.is-over {
  color: var(--accent-3);
}

.sp-live {
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--code-bg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
}

.sp-live-k {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  margin: 0 0 8px;
}

.sp-live-k svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

.sp-live-t {
  margin: 0;
  min-height: 1.6em;
  font-size: var(--fs-base);
  line-height: 1.7;
}

.sp-int {
  color: var(--text-3);
  font-style: italic;
}

/* the typed-transcript fallback */

.sp-type {
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.sp-type summary {
  padding: 12px 16px;
  background: var(--surface-2);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text-2);
  user-select: none;
}

.sp-type summary:hover {
  color: var(--text);
}

.sp-type[open] summary {
  border-bottom: 1px solid var(--border);
}

.sp-type-w {
  margin: 14px 16px 10px;
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.sp-type-t {
  display: block;
  width: calc(100% - 32px);
  margin: 0 16px 12px;
  padding: 11px 13px;
  background: var(--code-bg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xs);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-base);
  line-height: 1.6;
  resize: vertical;
}

.sp-type-t:focus {
  outline: 2px solid var(--accent-2);
  outline-offset: 1px;
}

.sp-type .btn {
  margin: 0 16px 16px;
}

.sp-tip {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: rgba(255, 180, 84, .07);
  border: 1px solid rgba(255, 180, 84, .22);
  border-radius: var(--r-sm);
}

.sp-tip svg {
  width: 18px;
  height: 18px;
  color: var(--accent-3);
  transform: translateY(2px);
}

.sp-tip b {
  display: block;
  font-size: var(--fs-sm);
  margin-bottom: 3px;
}

.sp-tip span {
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.sp-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

/* the result panel */

.sp-res {
  padding: 20px;
  margin-bottom: 18px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  animation: qz-reveal var(--t-mid) var(--ease-out);
}

.sp-res[data-band="excellent"],
.sp-res[data-band="strong"] {
  border-color: var(--accent-line);
}

.sp-res[data-band="rough"] {
  border-color: rgba(255, 107, 122, .32);
}

.sp-res-top {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
}

.sp-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background:
    conic-gradient(var(--accent) calc(var(--v) * 1%), var(--surface-hi) 0);
}

.sp-ring::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--surface-2);
}

.sp-res[data-band="developing"] .sp-ring,
.sp-res[data-band="rough"] .sp-ring {
  background: conic-gradient(var(--danger) calc(var(--v) * 1%), var(--surface-hi) 0);
}

.sp-ring-n {
  position: relative;
  z-index: 1;
  font-family: var(--font-head-sans);
  font-size: var(--fs-xl);
  font-weight: 700;
}

.sp-res-hd h4 {
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  margin: 0 0 8px;
}

.sp-res-pips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.sp-bars {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 9px;
}

.sp-bar {
  display: grid;
  grid-template-columns: 78px minmax(60px, 1fr) 34px;
  gap: 10px;
  align-items: center;
  font-size: var(--fs-sm);
}

.sp-bar-k {
  color: var(--text-2);
}

.sp-bar-t {
  height: 7px;
  border-radius: 4px;
  background: var(--surface-hi);
  overflow: hidden;
}

.sp-bar-t i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
  transition: width var(--t-slow) var(--ease-out);
}

.sp-bar-v {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-2);
  text-align: right;
}

.sp-bar-d {
  grid-column: 2 / -1;
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-top: -3px;
}

.sp-bar.is-na .sp-bar-k,
.sp-bar.is-na .sp-bar-v {
  color: var(--text-3);
}

/* the word-by-word diff */

.sp-diff {
  padding: 14px 16px;
  margin: 0 0 8px;
  background: var(--code-bg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  line-height: 2.1;
}

.sp-diff .w {
  padding: 2px 5px;
  border-radius: 4px;
}

.sp-diff .w.ok {
  color: var(--text-2);
}

.sp-diff .w.near {
  background: rgba(255, 180, 84, .16);
  color: var(--accent-3);
}

.sp-diff .w.sub {
  background: var(--danger-soft);
  color: var(--danger);
  text-decoration: line-through;
}

.sp-diff .w.sub i {
  font-style: normal;
  text-decoration: none;
  color: var(--text-3);
  font-size: .85em;
  padding-left: 5px;
}

.sp-diff .w.miss {
  background: var(--surface-hi);
  color: var(--text-3);
  text-decoration: underline dotted;
}

.sp-diff .w.extra {
  color: var(--text-3);
  font-style: italic;
  opacity: .75;
}

.sp-diff-key {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 16px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.sp-diff-key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sp-diff-key .k {
  width: 11px;
  height: 11px;
  border-radius: 3px;
}

.sp-diff-key .k.ok {
  background: var(--text-3);
}

.sp-diff-key .k.near {
  background: var(--accent-3);
}

.sp-diff-key .k.sub {
  background: var(--danger);
}

.sp-diff-key .k.miss {
  background: var(--surface-hi);
  border: 1px solid var(--border-3);
}

.sp-diff-key .k.extra {
  background: var(--border-3);
}

.sp-cov {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 16px;
  padding: 0;
}

.sp-cov li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  border: 1px solid var(--border);
}

.sp-cov li svg {
  width: 13px;
  height: 13px;
}

.sp-cov .is-hit {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

.sp-cov .is-missed {
  background: var(--danger-soft);
  border-color: rgba(255, 107, 122, .3);
  color: var(--danger);
}

.sp-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.sp-note {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-3);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.sp-note.is-good {
  border-left-color: var(--accent);
}

.sp-note.is-ok {
  border-left-color: var(--accent-3);
}

.sp-note.is-bad {
  border-left-color: var(--danger);
}

.sp-note-i svg {
  width: 17px;
  height: 17px;
  transform: translateY(2px);
}

.sp-note.is-good .sp-note-i svg {
  color: var(--accent);
}

.sp-note.is-ok .sp-note-i svg {
  color: var(--accent-3);
}

.sp-note.is-bad .sp-note-i svg {
  color: var(--danger);
}

.sp-note b {
  display: block;
  font-size: var(--fs-base);
  margin-bottom: 4px;
}

.sp-note span {
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

/* the session total */

.sp-final {
  margin-top: 22px;
}

.sp-fin {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
  padding: 24px;
  background: var(--surface-2);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
}

.sp-fin[data-band="developing"],
.sp-fin[data-band="rough"] {
  border-color: rgba(255, 180, 84, .32);
}

.sp-fin-i {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
}

.sp-fin[data-band="developing"] .sp-fin-i,
.sp-fin[data-band="rough"] .sp-fin-i {
  background: rgba(255, 180, 84, .12);
  color: var(--accent-3);
}

.sp-fin-i svg {
  width: 26px;
  height: 26px;
}

.sp-fin-b h3 {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  margin: 0 0 6px;
}

.sp-fin-b>p {
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  margin: 0 0 10px;
}

.sp-fin-w {
  color: var(--text-2) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-base) !important;
  line-height: 1.65;
  max-width: 60ch;
  margin-bottom: 16px !important;
}

.sp-fin-go {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- narrow screens ---------- */

@media (max-width: 720px) {

  .qh,
  .sp-fin {
    grid-template-columns: minmax(0, 1fr);
  }

  .qh-i,
  .sp-fin-i {
    display: none;
  }

  .qz-res-in {
    grid-template-columns: minmax(0, 1fr);
  }

  .qz-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  .qz-bar-r {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .qb-chap {
    grid-template-columns: minmax(0, 1fr);
  }

  .qb-chap-test {
    border-left: none;
    border-top: 1px solid var(--border);
    padding: 10px 18px;
    justify-content: center;
  }

  .qb-chap>a:first-child {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .qb-chap-m {
    grid-column: 2;
  }

  .sp-rig {
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-res-top {
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 14px;
  }

  .sp-ring {
    width: 66px;
    height: 66px;
  }

  .sp-bar {
    grid-template-columns: 66px minmax(50px, 1fr) 30px;
  }

  .qz-opt-b {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .qz-opt-s {
    display: none;
  }
}

/* Motion here is decoration, never information. */
@media (prefers-reduced-motion: reduce) {

  .qb-card,
  .sp-card,
  .sp-rec,
  .proj-card {
    transition: none !important;
  }

  .qb-card:hover,
  .sp-card:hover,
  .sp-rec:hover,
  .proj-card:hover {
    transform: none;
  }

  .qz-sol,
  .sp-res {
    animation: none;
  }

  .sp-rec.is-live .sp-rec-d {
    animation: none;
    opacity: .7;
  }
}

/* ==========================================================================
   Shared section furniture: search box and detail breadcrumb
   Used by the Project Lab, the Interview Bank and the Research Hub.
   ========================================================================== */

.proj-search-wrap {
  position: relative;
  width: 100%;
}

.proj-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.proj-search-icon svg {
  width: 18px;
  height: 18px;
}

.proj-search-input {
  width: 100%;
  height: 46px;
  padding: 0 42px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border-2);
  color: var(--text);
  font-size: var(--fs-base);
  font-family: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  box-shadow: var(--shadow-1);
}

.proj-search-input::placeholder {
  color: var(--text-3);
}

.proj-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.proj-search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  padding: 6px;
  font-size: 14px;
  border-radius: var(--r-xs);
  transition: color var(--t-fast);
}

.proj-search-clear:hover {
  color: var(--text);
}

.proj-detail-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 20px;
}

.proj-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: all var(--t-fast);
}

.proj-back-btn svg {
  width: 15px;
  height: 15px;
}

.proj-back-btn:hover {
  border-color: var(--border-3);
  color: var(--text);
}

.proj-detail-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  min-width: 0;
}

.proj-detail-crumbs a {
  color: var(--text-2);
}

.proj-detail-crumbs a:hover {
  color: var(--accent);
}

.proj-detail-crumbs .is-current {
  color: var(--text);
  font-weight: 600;
}

/* ==========================================================================
   Project Lab
   ========================================================================== */

.pl-view,
.pl-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 88px;
}

/* ---------- hero ---------- */

.pl-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin-bottom: 26px;
  padding: 32px;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.pl-hero h1 {
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  font-weight: 400;
  letter-spacing: -.03em;
  margin-bottom: 12px;
}

.pl-hero-copy > p {
  color: var(--text-2);
  font-size: var(--fs-md);
  line-height: 1.7;
  max-width: 62ch;
}

.pl-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(94px, 1fr));
  gap: 10px;
}

/* ---------- domain cards ---------- */

.pl-domains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  margin-bottom: 30px;
}

.pl-domain-card {
  display: flex;
  gap: 13px;
  padding: 16px 17px;
  text-align: left;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--dc, var(--accent));
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}

.pl-domain-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.pl-domain-ico {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--dc) 12%, transparent);
  color: var(--dc);
}

.pl-domain-ico svg {
  width: 18px;
  height: 18px;
}

.pl-domain-body {
  min-width: 0;
}

.pl-domain-body strong {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-head-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.pl-domain-body strong em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--dc);
  flex: none;
}

.pl-domain-body > span {
  display: block;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-3);
}

/* ---------- controls ---------- */

.pl-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.pl-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.pl-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-family: var(--font-head-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--t-fast);
}

.pl-tab svg {
  width: 15px;
  height: 15px;
  color: var(--dc, currentColor);
}

.pl-tab span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-3);
}

.pl-tab:hover {
  border-color: var(--border-3);
  color: var(--text);
}

.pl-tab.is-active {
  background: var(--dc, var(--text));
  border-color: var(--dc, var(--text));
  color: #fff;
}

.pl-tab.is-active svg {
  color: #fff;
}

.pl-tab.is-active span {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

.pl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  transition: all var(--t-fast);
}

.pl-chip span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}

.pl-chip:hover {
  border-color: var(--border-3);
  color: var(--text);
}

.pl-chip.is-active {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}

.pl-chip.is-active span {
  color: rgba(255, 255, 255, .75);
}

.pl-count {
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-bottom: 12px;
}

.pl-count strong {
  font-family: var(--font-mono);
  color: var(--text);
}

/* ---------- project cards ---------- */

.pl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
}

.pl-card {
  display: flex;
  flex-direction: column;
  padding: 18px 20px 15px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--dc, var(--accent));
  box-shadow: var(--shadow-1);
  transition: transform var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}

.pl-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

.pl-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 11px;
}

.pl-diff {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  border: 1px solid;
  white-space: nowrap;
}

.pl-easy {
  color: #047857;
  background: rgba(5, 150, 105, .10);
  border-color: rgba(5, 150, 105, .28);
}

.pl-med {
  color: #1d4ed8;
  background: rgba(37, 99, 235, .10);
  border-color: rgba(37, 99, 235, .26);
}

.pl-hard {
  color: #b45309;
  background: rgba(217, 119, 6, .12);
  border-color: rgba(217, 119, 6, .30);
}

.pl-adv {
  color: #b91c1c;
  background: rgba(220, 38, 38, .10);
  border-color: rgba(220, 38, 38, .26);
}

.pl-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

.pl-time svg {
  width: 13px;
  height: 13px;
}

.pl-card-title {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.015em;
  margin-bottom: 7px;
}

.pl-card-title a {
  color: var(--text);
}

.pl-card-title a:hover {
  color: var(--accent);
}

.pl-card-lede {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 14px;
  flex: 1;
}

.pl-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 14px;
}

.pl-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: var(--r-xs);
}

.pl-tag.is-more {
  color: var(--text-2);
  font-weight: 700;
}

.pl-tag-lg {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  padding: 4px 10px;
  border-radius: var(--r-xs);
}

.pl-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}

.pl-domain {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--dc, var(--text-2));
}

.pl-domain svg {
  width: 14px;
  height: 14px;
}

.pl-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
}

.pl-open svg {
  width: 14px;
  height: 14px;
  transition: transform var(--t-fast);
}

.pl-open:hover {
  color: var(--accent);
}

.pl-open:hover svg {
  transform: translateX(2px);
}

.pl-prog {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
}

.pl-prog-bar {
  width: 52px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}

.pl-prog-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}

/* ==========================================================================
   Project detail
   ========================================================================== */

.pl-detail-header {
  margin-bottom: 26px;
  padding: 26px 28px;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  border-top: 3px solid var(--dc, var(--accent));
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.pl-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 13px;
}

.pl-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-2);
}

.pl-meta-pill svg {
  width: 13px;
  height: 13px;
  color: var(--text-3);
}

.pl-detail-header h1 {
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  font-weight: 400;
  letter-spacing: -.03em;
  margin-bottom: 10px;
}

.pl-detail-lede {
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text-2);
  max-width: 68ch;
  margin-bottom: 16px;
}

.pl-stack-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.pl-stack-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-right: 3px;
}

.pl-build-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.pl-build-bar {
  flex: 1;
  min-width: 140px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}

.pl-build-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width var(--t-mid) var(--ease-out);
}

.pl-build-text {
  font-size: var(--fs-xs);
  color: var(--text-2);
  white-space: nowrap;
}

.pl-build-text strong {
  font-family: var(--font-mono);
  color: var(--accent);
}

.pl-build-reset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-3);
  padding: 4px 9px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-2);
  transition: all var(--t-fast);
}

.pl-build-reset svg {
  width: 12px;
  height: 12px;
}

.pl-build-reset:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* ---------- layout ---------- */

.pl-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 26px;
  align-items: start;
}

.pl-browse {
  margin-top: 4px;
}

/* Grid children default to min-width:auto; without this a long code span
   or an unbroken URL widens the whole track and the page scrolls. */
.pl-main {
  min-width: 0;
}

.pl-section {
  margin-bottom: 30px;
}

.pl-section h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: 12px;
}

.pl-section h2 svg {
  width: 18px;
  height: 18px;
  color: var(--accent-2);
}

.pl-section-sub {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-bottom: 14px;
  margin-top: -6px;
}

.pl-prose {
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--text-2);
  max-width: 74ch;
}

.pl-bp-actions {
  display: flex;
  gap: 8px;
  margin-top: -8px;
}

/* ---------- phases ---------- */

.pl-phases {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  counter-reset: none;
}

.pl-phase {
  display: flex;
  gap: 13px;
  padding: 15px 17px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color var(--t-fast), background var(--t-fast);
}

.pl-phase.is-done {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.pl-phase.is-done .pl-phase-body h4 {
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-color: var(--border-3);
}

.pl-phase-check {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.6px solid var(--border-2);
  background: var(--surface);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  transition: all var(--t-fast);
}

.pl-phase-check svg {
  width: 15px;
  height: 15px;
}

.pl-phase-check:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.pl-phase.is-done .pl-phase-check {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.pl-phase-body h4 {
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 5px;
}

.pl-phase-body p {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-2);
}

/* ---------- outcome, proof, pitfalls ---------- */

.pl-outcome {
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
}

.pl-proof {
  display: flex;
  gap: 11px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--accent-2-soft);
  border: 1px solid rgba(77, 91, 216, .22);
}

.pl-proof svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  color: var(--accent-2);
}

.pl-proof p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
}

.pl-pitfalls,
.pl-interview {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.pl-pitfalls li,
.pl-interview li {
  display: flex;
  gap: 10px;
  padding: 13px 15px;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-2);
}

.pl-pitfalls li {
  background: var(--danger-soft);
  border: 1px solid rgba(207, 51, 72, .20);
}

.pl-pitfalls li svg {
  color: var(--danger);
}

.pl-interview li {
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.pl-interview li svg {
  color: var(--accent-2);
}

.pl-pitfalls li svg,
.pl-interview li svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 3px;
}

/* ---------- stretch goals ---------- */

.pl-stretch {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.pl-stretch li {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-3);
}

.pl-stretch-n {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(180, 106, 5, .12);
  color: var(--accent-3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

.pl-stretch li p {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-2);
}

/* ---------- sidebar ---------- */

.pl-side {
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pl-side-box {
  padding: 16px 17px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

.pl-side-box h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 11px;
}

.pl-side-box h3 svg {
  width: 16px;
  height: 16px;
  color: var(--accent-2);
}

.pl-side-learn {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.pl-side-learn h3 svg {
  color: var(--accent);
}

.pl-side-box ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pl-side-box ul li {
  display: flex;
  gap: 8px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-2);
}

.pl-side-box ul li svg {
  width: 13px;
  height: 13px;
  flex: none;
  margin-top: 3px;
  color: var(--accent);
}

.pl-resources li a {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-2);
  transition: color var(--t-fast);
}

.pl-resources li a svg {
  width: 12px;
  height: 12px;
  flex: none;
  margin-top: 3px;
  color: var(--text-3);
}

.pl-resources li a:hover {
  color: var(--accent);
}

.pl-related {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pl-related-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: all var(--t-fast);
}

.pl-related-item strong {
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
}

.pl-related-item:hover {
  border-color: var(--border-3);
  background: var(--surface-3);
}

/* ---------- responsive ---------- */

@media (max-width: 1020px) {
  .pl-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .pl-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .pl-side {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

@media (max-width: 720px) {

  .pl-view,
  .pl-detail {
    padding: 16px 12px 64px;
  }

  .pl-hero,
  .pl-detail-header {
    padding: 20px 18px;
  }

  .pl-hero-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .pl-domains,
  .pl-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pl-side {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ==========================================================================
   Architecture blueprints (TD.blueprint SVG output)
   ========================================================================== */

.bp {
  margin: 0 0 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0) 0 0 / 22px 22px,
    var(--surface);
  overflow: hidden;
}

.bp-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-head-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}

.bp-title svg {
  width: 16px;
  height: 16px;
  color: var(--accent-2);
  flex: none;
}

.bp-canvas {
  padding: 8px 12px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.bp-canvas svg {
  display: block;
  max-width: 100%;
  height: auto;
  /* Below this the labels stop being legible, so let it scroll instead. */
  min-width: 560px;
  margin: 0 auto;
}

/* ---------- nodes ---------- */

.bp-node-box {
  fill: var(--surface);
  stroke: var(--border-2);
  stroke-width: 1.2;
}

.bp-node-accent {
  fill: var(--text-3);
}

.bp-node-label {
  font-family: var(--font-head-sans);
  font-size: 12.5px;
  font-weight: 700;
  fill: var(--text);
  letter-spacing: -.01em;
}

.bp-node-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--text-3);
}

.bp-node {
  transition: opacity var(--t-fast);
}

.bp-canvas:hover .bp-node {
  opacity: .82;
}

.bp-canvas .bp-node:hover {
  opacity: 1;
}

.bp-canvas .bp-node:hover .bp-node-box {
  stroke-width: 1.8;
}

/* kind accents — one colour language across every diagram in the product */

.bp-client .bp-node-accent {
  fill: #4d5bd8;
}

.bp-client .bp-node-box {
  stroke: rgba(77, 91, 216, .38);
}

.bp-service .bp-node-accent {
  fill: #08976a;
}

.bp-service .bp-node-box {
  stroke: rgba(8, 151, 106, .38);
}

.bp-store .bp-node-accent {
  fill: #c2410c;
}

.bp-store .bp-node-box {
  stroke: rgba(194, 65, 12, .34);
}

.bp-cache .bp-node-accent {
  fill: #b46a05;
}

.bp-cache .bp-node-box {
  stroke: rgba(180, 106, 5, .36);
}

.bp-queue .bp-node-accent {
  fill: #7c3aed;
}

.bp-queue .bp-node-box {
  stroke: rgba(124, 58, 237, .34);
}

.bp-worker .bp-node-accent {
  fill: #0891b2;
}

.bp-worker .bp-node-box {
  stroke: rgba(8, 145, 178, .36);
}

.bp-external .bp-node-accent {
  fill: #6b7891;
}

.bp-external .bp-node-box {
  stroke: var(--border-3);
  stroke-dasharray: 5 3;
}

.bp-model .bp-node-accent {
  fill: #be123c;
}

.bp-model .bp-node-box {
  stroke: rgba(190, 18, 60, .34);
}

.bp-note .bp-node-box {
  fill: var(--surface-2);
  stroke: var(--border);
  stroke-dasharray: 4 3;
}

.bp-note .bp-node-accent {
  fill: none;
}

.bp-note .bp-node-label {
  font-weight: 600;
  fill: var(--text-2);
}

/* ---------- edges ---------- */

.bp-edge {
  fill: none;
  stroke: var(--border-3);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.bp-edge.is-dashed {
  stroke-dasharray: 6 4;
}

.bp-edge.is-muted {
  stroke: var(--border-2);
  stroke-width: 1.2;
  stroke-dasharray: 3 4;
}

.bp-arrowhead {
  fill: var(--border-3);
}

.bp-arrowhead.is-muted {
  fill: var(--border-2);
}

.bp-edge-label rect {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 1;
}

.bp-edge-label text {
  font-family: var(--font-mono);
  font-size: 9.5px;
  fill: var(--text-3);
}

/* ---------- groups ---------- */

.bp-group {
  pointer-events: none;
}

.bp-group-box {
  fill: var(--surface-2);
  fill: color-mix(in srgb, var(--accent-2) 3%, transparent);
  stroke: var(--border-2);
  stroke-width: 1;
  stroke-dasharray: 7 5;
}

.bp-group-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  fill: var(--text-3);
}

/* ---------- legend & note ---------- */

.bp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  padding: 9px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.bp-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
}

.bp-key i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--text-3);
  flex: none;
}

.bp-key.bp-client i {
  background: #4d5bd8;
}

.bp-key.bp-service i {
  background: #08976a;
}

.bp-key.bp-store i {
  background: #c2410c;
}

.bp-key.bp-cache i {
  background: #b46a05;
}

.bp-key.bp-queue i {
  background: #7c3aed;
}

.bp-key.bp-worker i {
  background: #0891b2;
}

.bp-key.bp-external i {
  background: #6b7891;
}

.bp-key.bp-model i {
  background: #be123c;
}

.bp-note {
  padding: 11px 16px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-2);
  background: var(--surface);
}

.bp-note strong {
  color: var(--text);
}

@media (max-width: 720px) {
  .bp-canvas {
    padding: 6px 8px;
  }

  .bp-legend {
    padding: 8px 12px;
  }
}

/* ==========================================================================
   Shared: rendered long-form prose (TD.md output)
   Used by the interview answers, the research hub and the project lab.
   ========================================================================== */

.md > *:first-child {
  margin-top: 0;
}

.md > *:last-child {
  margin-bottom: 0;
}

.md-p {
  margin: 0 0 12px;
  color: var(--text-2);
  line-height: 1.7;
}

.md-h {
  font-family: var(--font-head);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.md > .md-h:first-child {
  margin-top: 0;
}

.md-list {
  margin: 0 0 14px;
  padding-left: 20px;
  color: var(--text-2);
}

.md-list li {
  margin-bottom: 6px;
  line-height: 1.65;
}

.md-list li::marker {
  color: var(--text-3);
}

ul.md-list {
  list-style: disc;
}

ol.md-list {
  list-style: decimal;
}

.md-quote {
  margin: 0 0 14px;
  padding: 10px 16px;
  border-left: 3px solid var(--accent-line);
  background: var(--accent-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--text);
  font-style: italic;
}

.md strong {
  color: var(--text);
}

.md code,
.md-p code,
.md-list code {
  font-family: var(--font-mono);
  font-size: .86em;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  color: var(--accent-3);
  white-space: nowrap;
}

.md-code {
  position: relative;
  margin: 0 0 16px;
  padding: 14px 16px;
  background: #0f1623;
  border: 1px solid #1e293b;
  border-radius: var(--r-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

.md-code code {
  background: none;
  border: 0;
  padding: 0;
  color: #dbe4f3;
  white-space: pre;
}

.md-code[data-lang]::after {
  content: attr(data-lang);
  position: absolute;
  top: 8px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5b6b85;
  pointer-events: none;
}

.md-formula {
  margin: 0 0 16px;
  padding: 14px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-2);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  color: var(--text);
  text-align: center;
  overflow-x: auto;
}

.md-math {
  font-family: var(--font-mono);
  font-size: .92em;
  color: var(--accent-2);
  white-space: nowrap;
}

.md-math-em {
  display: inline-block;
  padding: 1px 6px;
  background: var(--accent-2-soft);
  border-radius: var(--r-xs);
}

.md-table-wrap {
  margin: 0 0 16px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.md-table th {
  text-align: left;
  padding: 9px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-2);
  font-family: var(--font-head-sans);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.md-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  vertical-align: top;
}

.md-table tr:last-child td {
  border-bottom: 0;
}

.md-table tbody tr:hover td {
  background: var(--surface-2);
}

/* ==========================================================================
   Research Hub
   ========================================================================== */

.rs-view {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 88px;
}

.rs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin-bottom: 22px;
  padding: 32px;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.rs-hero h1 {
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  font-weight: 400;
  letter-spacing: -.03em;
  margin-bottom: 12px;
}

.rs-hero-copy > p {
  color: var(--text-2);
  font-size: var(--fs-md);
  line-height: 1.7;
  max-width: 64ch;
}

.rs-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(96px, 1fr));
  gap: 10px;
}

/* ---------- tabs ---------- */

.rs-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 26px;
  padding: 5px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

.rs-tabs::-webkit-scrollbar {
  display: none;
}

.rs-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: var(--r-md);
  color: var(--text-2);
  font-family: var(--font-head-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--t-fast);
}

.rs-tab svg {
  width: 16px;
  height: 16px;
}

.rs-tab:hover {
  background: var(--surface);
  color: var(--text);
}

.rs-tab.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-1);
}

.rs-tab.is-active svg {
  color: var(--accent-2);
}

/* ---------- block headings ---------- */

.rs-body {
  min-width: 0;
}

.rs-block {
  min-width: 0;
}

.rs-block-head {
  margin-bottom: 20px;
  max-width: 78ch;
}

.rs-block-head h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: 8px;
}

.rs-block-head h2 svg {
  width: 20px;
  height: 20px;
  color: var(--accent-2);
}

.rs-block-head p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
}

.rs-mt {
  margin-top: 40px;
}

/* ---------- 1. paper types ---------- */

.rs-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
}

.rs-type {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid);
}

.rs-type:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

.rs-type-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.rs-type-ico {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--accent-2-soft);
  color: var(--accent-2);
}

.rs-type-ico svg {
  width: 19px;
  height: 19px;
}

.rs-type-head h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.3;
  margin-bottom: 4px;
}

.rs-type-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
}

.rs-type-desc {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-2);
  margin-bottom: 13px;
}

.rs-type-when {
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 13px;
}

.rs-type-when strong,
.rs-type-elems > strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
}

.rs-type-elems {
  flex: 1;
  margin-bottom: 13px;
}

.rs-type-elems ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.rs-type-elems li {
  display: flex;
  gap: 7px;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-2);
}

.rs-type-elems li svg {
  width: 13px;
  height: 13px;
  flex: none;
  margin-top: 3px;
  color: var(--accent);
}

.rs-type-eg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-3);
}

.rs-type-eg svg {
  width: 13px;
  height: 13px;
  flex: none;
  margin-top: 2px;
}

/* roles */

.rs-roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 13px;
}

.rs-role {
  display: flex;
  gap: 13px;
  padding: 17px 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

.rs-role-n {
  flex: none;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-2-soft);
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.rs-role h4 {
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 6px;
}

.rs-role-size {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-3);
  margin-top: 2px;
}

.rs-role p {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-2);
}

.rs-role-owns {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed var(--border-2);
}

.rs-role-owns strong {
  color: var(--text);
}

/* ---------- 2. anatomy ---------- */

.rs-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 16px;
}

.rs-panel {
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

.rs-panel h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.rs-panel h3 svg {
  width: 16px;
  height: 16px;
  color: var(--accent-2);
}

.rs-formula {
  padding: 13px 0;
  border-bottom: 1px dashed var(--border);
}

.rs-formula:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.rs-formula-pattern {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent-2);
  background: var(--accent-2-soft);
  padding: 6px 10px;
  border-radius: var(--r-xs);
  margin-bottom: 8px;
  word-break: break-word;
}

.rs-formula-eg {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text);
  font-style: italic;
  margin-bottom: 5px;
}

.rs-formula-why {
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-3);
}

.rs-abs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rs-abs-step {
  display: flex;
  gap: 11px;
}

.rs-abs-n {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

.rs-abs-step h4 {
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 3px;
}

.rs-abs-step p {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-2);
}

.rs-abs-eg {
  margin-top: 5px;
  padding: 7px 10px;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  border-left: 2px solid var(--border-3);
  font-style: italic;
  color: var(--text-3) !important;
}

/* ---------- template kits ----------
   The LaTeX skeleton and the rebuttal used to be two <pre> dumps in a dark
   scroll box. They are documents now: an outline with a page preview, and a
   piece of correspondence. The raw source lives in a closed <details>. */

.rs-kit {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 18px;
}

.rs-kit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.rs-kit-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.rs-kit-tag {
  flex: none;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-2-soft);
  color: var(--accent-2);
  border: 1px solid var(--accent-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.rs-kit-reb .rs-kit-tag {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

.rs-kit-id h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.3;
}

.rs-kit-id p {
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-top: 2px;
}

.rs-kit-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rs-kit-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}

.rs-kit-chip svg {
  width: 12px;
  height: 12px;
}

.rs-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--t-fast);
}

.rs-copy svg {
  width: 13px;
  height: 13px;
}

.rs-copy:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.rs-kit-sub {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}

.rs-kit-sub svg {
  width: 14px;
  height: 14px;
  color: var(--accent-2);
}

/* the one line you will replace */

.rs-kit-note {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.rs-kit-note code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent-2);
  background: var(--accent-2-soft);
  padding: 5px 9px;
  border-radius: var(--r-xs);
  white-space: nowrap;
  overflow-x: auto;
  max-width: 100%;
}

.rs-kit-note p {
  flex: 1 1 260px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-3);
}

/* page preview + outline */

.rs-kit-split {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 22px;
  padding: 20px;
}

@media (max-width: 900px) {
  .rs-kit-split {
    grid-template-columns: 1fr;
  }
}

.rs-kit-left {
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
  align-self: start;
}

@media (max-width: 900px) {
  .rs-kit-left {
    position: static;
  }
}

.rs-page figcaption {
  margin-top: 10px;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-3);
}

.rs-sheet {
  aspect-ratio: 17 / 22;
  padding: 16px 14px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: hidden;
}

.rs-sheet i {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--border-2);
  margin-bottom: 4px;
}

.rs-sheet b {
  display: block;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--text-2);
  margin: 7px 0 4px;
}

.rs-sheet-title {
  padding-bottom: 2px;
}

.rs-sheet-title i {
  height: 6px;
  border-radius: 3px;
  background: var(--text-2);
  margin: 0 auto 4px;
}

.rs-sheet-auth i {
  height: 3px;
  background: var(--border-3);
  margin: 0 auto 2px;
}

.rs-sheet-cols {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-height: 0;
}

.rs-sheet-col {
  min-width: 0;
}

.rs-sheet-fig {
  height: 42px;
  margin: 8px 0;
  border-radius: 3px;
  border: 1px dashed var(--accent-2);
  background: var(--accent-2-soft);
  display: grid;
  place-items: center;
}

.rs-sheet-fig span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 7px;
  font-weight: 700;
  color: var(--accent-2);
}

.rs-sheet-fig svg {
  width: 8px;
  height: 8px;
}

.rs-sheet-table {
  margin: 8px 0;
  padding: 5px 0;
}

.rs-sheet-table u {
  display: block;
  height: 1px;
  background: var(--text-3);
  margin-bottom: 4px;
}

.rs-sheet-table i.is-bold {
  background: var(--accent);
  height: 4px;
}

/* the outline */

.rs-outline {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.rs-out {
  display: flex;
  gap: 12px;
  padding-bottom: 16px;
  position: relative;
}

.rs-out:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 26px;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.rs-out-n {
  flex: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  z-index: 1;
}

.rs-out-main {
  min-width: 0;
  flex: 1;
  padding-top: 1px;
}

.rs-out-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.rs-out-top h4 {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.rs-out-len {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.rs-out-cmd {
  display: block;
  margin: 6px 0 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-2);
  word-break: break-word;
}

.rs-out-what {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-2);
}

.rs-out-watch {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 9px;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  border-left: 2px solid var(--accent-3);
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-3);
}

.rs-out-watch svg {
  width: 12px;
  height: 12px;
  flex: none;
  margin-top: 2px;
  color: var(--accent-3);
}

/* preamble */

.rs-preamble {
  padding: 20px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.rs-preamble ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}

.rs-preamble li {
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
}

.rs-preamble code {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 5px;
}

.rs-preamble span {
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-3);
}

/* rebuttal as correspondence */

.rs-reb-flow {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rs-reb-step {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 9px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.rs-reb-quote {
  padding: 13px 15px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text);
}

.rs-reb-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 8px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-3);
}

.rs-reb-note svg {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 2px;
  color: var(--accent-3);
}

.rs-threads {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rs-thread {
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}

.rs-thread-head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.rs-thread-who {
  padding: 3px 9px;
  border-radius: var(--r-xs);
  background: var(--text-2);
  color: var(--text-inv);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

.rs-thread-kind {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
}

.rs-thread-score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.rs-thread-score svg {
  width: 11px;
  height: 11px;
}

.rs-msg {
  padding: 12px 14px;
}

.rs-msg + .rs-msg {
  border-top: 1px dashed var(--border);
}

.rs-msg-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-3);
}

.rs-msg-tag svg {
  width: 12px;
  height: 12px;
}

.rs-msg p {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-2);
}

.rs-msg-them {
  background: var(--surface-2);
}

.rs-msg-them p {
  font-style: italic;
}

.rs-msg-you .rs-msg-tag {
  color: var(--accent);
}

.rs-msg-you p {
  color: var(--text);
}

.rs-thread-why {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 11px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-3);
}

.rs-thread-why svg {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 1px;
  color: var(--accent-3);
}

/* do / don't */

.rs-rules {
  padding: 20px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.rs-rules ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}

.rs-rule {
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rs-rule p {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.rs-rule svg {
  width: 13px;
  height: 13px;
  flex: none;
  margin-top: 2px;
}

.rs-rule-do {
  color: var(--text);
  font-weight: 600;
}

.rs-rule-do svg {
  color: var(--accent);
}

.rs-rule-dont {
  color: var(--text-3);
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

.rs-rule-dont svg {
  color: var(--danger);
}

/* the raw file, demoted to a disclosure */

.rs-src {
  border-top: 1px solid var(--border);
}

.rs-src > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  cursor: pointer;
  font-size: var(--fs-xs);
  color: var(--text-2);
  list-style: none;
  transition: background var(--t-fast);
}

.rs-src > summary::-webkit-details-marker {
  display: none;
}

.rs-src > summary:hover {
  background: var(--surface-2);
  color: var(--accent);
}

.rs-src > summary > svg:first-child {
  width: 15px;
  height: 15px;
  color: var(--text-3);
}

.rs-src > summary code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-2);
}

.rs-src > summary em {
  margin-left: auto;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}

.rs-src > summary > svg:last-child {
  width: 14px;
  height: 14px;
  color: var(--text-3);
  transition: transform var(--t-fast);
}

.rs-src[open] > summary > svg:last-child {
  transform: rotate(180deg);
}

.rs-src[open] > summary {
  border-bottom: 1px solid var(--border);
}

.rs-src-body pre {
  margin: 0;
  padding: 16px 18px;
  max-height: 460px;
  overflow: auto;
  background: #0f1623;
}

.rs-src-body code {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: #dbe4f3;
  white-space: pre;
}

/* ---------- 3. reading passes ---------- */

.rs-passes {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rs-pass {
  padding: 20px 22px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-2);
}

.rs-pass-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.rs-pass-n {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent-2);
  background: var(--accent-2-soft);
  padding: 3px 9px;
  border-radius: var(--r-pill);
}

.rs-pass-head h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -.015em;
}

.rs-pass-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

.rs-pass-time svg {
  width: 13px;
  height: 13px;
}

.rs-pass-goal {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-2);
  margin-bottom: 14px;
}

.rs-pass-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 14px;
}

.rs-pass-cols h4 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}

.rs-pass-cols h4 svg {
  width: 13px;
  height: 13px;
}

.rs-pass-cols ul {
  padding-left: 17px;
  list-style: disc;
}

.rs-pass-cols li {
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--text-2);
  margin-bottom: 4px;
}

.rs-pass-cols li::marker {
  color: var(--border-3);
}

.rs-pass-out {
  display: flex;
  gap: 9px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-2);
}

.rs-pass-out svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 2px;
  color: var(--accent);
}

.rs-callout {
  margin-top: 26px;
  padding: 20px 22px;
  border-radius: var(--r-lg);
  background: rgba(180, 106, 5, .06);
  border: 1px solid rgba(180, 106, 5, .22);
}

.rs-callout h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-3);
  margin-bottom: 8px;
}

.rs-callout h3 svg {
  width: 16px;
  height: 16px;
}

.rs-callout p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
}

/* ---------- 4. venues ---------- */

.rs-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 11px;
  margin-bottom: 20px;
}

.rs-fact {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.rs-fact strong {
  display: block;
  font-family: var(--font-head-sans);
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--accent-2);
  line-height: 1.1;
}

.rs-fact > span {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text);
  margin: 3px 0 4px;
}

.rs-fact p {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-3);
}

.rs-chips-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
}

.rs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--t-fast);
}

.rs-chip svg {
  width: 13px;
  height: 13px;
}

.rs-chip span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}

.rs-chip:hover {
  border-color: var(--border-3);
  color: var(--text);
}

.rs-chip.is-active {
  background: var(--fc, var(--text));
  border-color: var(--fc, var(--text));
  color: #fff;
}

.rs-chip.is-active span {
  color: rgba(255, 255, 255, .78);
}

.rs-sort {
  display: inline-flex;
  gap: 5px;
  margin-left: auto;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}

.rs-venue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(348px, 1fr));
  gap: 16px;
}

.rs-venue {
  display: flex;
  flex-direction: column;
  padding: 19px 20px 16px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--fc, var(--accent-2));
  box-shadow: var(--shadow-1);
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid);
}

.rs-venue:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

.rs-venue-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.rs-venue-id h3 {
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -.02em;
}

.rs-venue-id h3 a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}

.rs-venue-id h3 a svg {
  width: 14px;
  height: 14px;
  color: var(--text-3);
}

.rs-venue-id h3 a:hover {
  color: var(--fc, var(--accent));
}

.rs-venue-full {
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--text-3);
  margin-top: 3px;
}

.rs-venue-tier {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--fc) 10%, transparent);
  color: var(--fc);
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--fc) 26%, transparent);
}

.rs-venue-desc {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 15px;
  flex: 1;
}

.rs-venue-metrics {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 14px;
}

.rs-metric {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.rs-metric-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
}

.rs-metric-bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}

.rs-metric-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.rs-metric-accept i {
  background: var(--danger);
}

.rs-metric-h5 i {
  background: var(--accent-2);
}

.rs-metric-val {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-2);
  white-space: nowrap;
}

.rs-venue-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.rs-venue-foot span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-3);
}

.rs-venue-foot svg {
  width: 13px;
  height: 13px;
}

.rs-venue-field {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fc) !important;
}

/* ---------- 5. paper timeline ---------- */

.rs-paper-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.rs-timeline {
  position: relative;
}

.rs-decade {
  position: relative;
  margin-bottom: 26px;
}

.rs-decade-label {
  position: relative;
  margin-bottom: 14px;
  padding-left: 0;
}

.rs-decade-label span {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text-3);
  background: var(--bg);
  padding-right: 14px;
  position: relative;
  z-index: 1;
}

.rs-decade-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--border);
}

.rs-decade-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rs-paper {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--fc, var(--accent-2));
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}

.rs-paper:hover {
  transform: translateX(3px);
  box-shadow: var(--shadow-2);
}

.rs-paper-body {
  min-width: 0;
}

.rs-paper-year {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--fc, var(--accent-2));
  line-height: 1.1;
  padding-top: 2px;
}

.rs-paper-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.rs-paper-venue {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-2);
}

.rs-paper-field {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fc);
}

.rs-paper h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.015em;
  margin-bottom: 5px;
}

.rs-paper h3 a {
  color: var(--text);
}

.rs-paper h3 a:hover {
  color: var(--fc, var(--accent));
}

.rs-paper-authors {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-3);
  margin-bottom: 9px;
}

.rs-paper-tldr {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-2);
  margin-bottom: 10px;
}

.rs-paper-break {
  display: flex;
  gap: 9px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 12px;
}

.rs-paper-break svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 2px;
  color: var(--fc, var(--accent-2));
}

.rs-paper-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
}

.rs-cites {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
}

.rs-cites-bar {
  width: 70px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}

.rs-cites-bar i {
  display: block;
  height: 100%;
  background: var(--fc, var(--accent-2));
  border-radius: inherit;
}

.rs-paper-links {
  display: inline-flex;
  gap: 7px;
}

.rs-paper-links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 600;
  transition: all var(--t-fast);
}

.rs-paper-links a svg {
  width: 13px;
  height: 13px;
}

.rs-paper-links a:hover {
  border-color: var(--border-3);
  color: var(--text);
}

.rs-paper-links a.is-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.rs-paper-links a.is-primary:hover {
  filter: brightness(1.08);
  color: #fff;
}

/* ---------- 6. review process ---------- */

.rs-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.rs-step {
  display: flex;
  gap: 12px;
  padding: 16px 17px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
}

.rs-step-n {
  flex: none;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-2-soft);
  border: 1px solid rgba(77, 91, 216, .22);
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.rs-step h4 {
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 5px;
}

.rs-step p {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-2);
}

.rs-reasons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 13px;
}

.rs-reason {
  padding: 17px 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--danger);
}

.rs-reason header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.rs-reason h3 {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -.01em;
}

.rs-reason-share {
  flex: none;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--danger-soft);
  color: var(--danger);
}

.rs-reason-tell {
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--text-2);
  margin-bottom: 10px;
}

.rs-reason-tell strong {
  color: var(--text);
}

.rs-reason-fix {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-2);
}

.rs-reason-fix svg {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 2px;
  color: var(--accent);
}

.rs-reason-fix strong {
  color: var(--text);
}

/* ---------- responsive ---------- */

@media (max-width: 1020px) {
  .rs-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .rs-hero-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 720px) {
  .rs-view {
    padding: 16px 12px 64px;
  }

  .rs-hero {
    padding: 20px 18px;
  }

  .rs-hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .rs-type-grid,
  .rs-venue-grid,
  .rs-reasons,
  .rs-two {
    grid-template-columns: minmax(0, 1fr);
  }

  .rs-paper {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .rs-paper-year {
    font-size: var(--fs-md);
  }

  .rs-sort {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
    width: 100%;
  }

  .rs-metric {
    grid-template-columns: 68px minmax(0, 1fr) auto;
  }
}

/* ==========================================================================
   Interview Bank
   ========================================================================== */

.iv-view,
.iv-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 88px;
}

/* ---------- difficulty badge, shared by both views ---------- */

.iv-lvl {
  display: inline-flex;
  align-items: center;
  flex: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  border: 1px solid;
  white-space: nowrap;
}

.lvl-easy {
  color: #047857;
  background: rgba(5, 150, 105, .10);
  border-color: rgba(5, 150, 105, .28);
}

.lvl-med {
  color: #1d4ed8;
  background: rgba(37, 99, 235, .10);
  border-color: rgba(37, 99, 235, .26);
}

.lvl-hard {
  color: #b45309;
  background: rgba(217, 119, 6, .12);
  border-color: rgba(217, 119, 6, .30);
}

.lvl-staff {
  color: #b91c1c;
  background: rgba(220, 38, 38, .10);
  border-color: rgba(220, 38, 38, .26);
}

/* ---------- hero ---------- */

.iv-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin-bottom: 32px;
  padding: 32px;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.iv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-2);
  background: var(--accent-2-soft);
  border: 1px solid rgba(77, 91, 216, .22);
  padding: 4px 11px;
  border-radius: var(--r-pill);
  margin-bottom: 14px;
}

.iv-eyebrow svg {
  width: 13px;
  height: 13px;
}

.iv-hero h1 {
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  font-weight: 400;
  letter-spacing: -.03em;
  margin-bottom: 12px;
}

.iv-hero-copy > p {
  color: var(--text-2);
  font-size: var(--fs-md);
  line-height: 1.7;
  max-width: 62ch;
}

.iv-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.iv-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(96px, 1fr));
  gap: 10px;
}

.iv-stat {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: center;
  box-shadow: var(--shadow-1);
}

.iv-stat strong {
  display: block;
  font-family: var(--font-head-sans);
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1.1;
}

.iv-stat span {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
}

.iv-stat.is-live strong {
  color: var(--accent);
}

/* ---------- section headings ---------- */

.iv-guide h2,
.iv-topics h2,
.iv-directory h2,
.iv-loop h2,
.iv-signals h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: 16px;
}

.iv-guide h2 svg,
.iv-topics h2 svg,
.iv-directory h2 svg,
.iv-loop h2 svg,
.iv-signals h2 svg {
  width: 19px;
  height: 19px;
  color: var(--accent-2);
}

/* ---------- how to use ---------- */

.iv-guide {
  margin-bottom: 34px;
  padding: 24px 26px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.iv-guide-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px 26px;
  counter-reset: ivguide;
  list-style: none;
}

.iv-guide-steps li {
  position: relative;
  padding-left: 32px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.6;
  counter-increment: ivguide;
}

.iv-guide-steps li::before {
  content: counter(ivguide);
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-2);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

.iv-guide-steps strong {
  color: var(--text);
}

/* ---------- topic coverage ---------- */

.iv-topics {
  margin-bottom: 34px;
}

.iv-topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 12px;
}

.iv-topic-card {
  display: flex;
  gap: 12px;
  padding: 15px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--tc, var(--accent-2));
  transition: box-shadow var(--t-fast), transform var(--t-fast) var(--ease-out);
}

.iv-topic-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.iv-topic-ico {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--tc) 12%, transparent);
  color: var(--tc);
}

.iv-topic-ico svg {
  width: 17px;
  height: 17px;
}

.iv-topic-card h4 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 3px;
}

.iv-topic-card h4 em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--tc);
}

.iv-topic-card p {
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-3);
}

/* ---------- directory controls ---------- */

.iv-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.iv-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.iv-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-family: var(--font-head-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--t-fast) var(--ease-out);
}

.iv-tab:hover {
  border-color: var(--border-3);
  color: var(--text);
}

.iv-tab.is-active {
  background: var(--text);
  border-color: var(--text);
  color: var(--text-inv);
}

.iv-tab-n {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-3);
}

.iv-tab.is-active .iv-tab-n {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

/* ---------- company cards ---------- */

.iv-co-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(348px, 1fr));
  gap: 16px;
}

.iv-co-card {
  display: flex;
  flex-direction: column;
  padding: 18px 20px 16px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  transition: transform var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out),
              border-color var(--t-mid);
}

.iv-co-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: var(--border-3);
}

.iv-co-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}

.iv-co-mark {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--co, var(--accent-2)) 12%, transparent);
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--co, var(--accent-2)) 30%, transparent);
  color: var(--co, var(--accent-2));
  font-family: var(--font-head-sans);
  font-size: var(--fs-lg);
  font-weight: 800;
}

.iv-co-mark.lg {
  width: 52px;
  height: 52px;
  font-size: var(--fs-2xl);
  border-radius: var(--r-md);
}

.iv-co-ident {
  min-width: 0;
  flex: 1;
}

.iv-co-ident h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.25;
}

.iv-co-ident h3 a {
  color: var(--text);
}

.iv-co-ident h3 a:hover {
  color: var(--accent);
}

.iv-co-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}

.iv-co-tagline {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 14px;
}

/* topic mix bar */

.iv-mix {
  margin-bottom: 14px;
}

.iv-mix-bar {
  display: flex;
  height: 6px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface-3);
}

.iv-mix-seg {
  height: 100%;
  transition: opacity var(--t-fast);
}

.iv-mix-bar:hover .iv-mix-seg {
  opacity: .55;
}

.iv-mix-seg:hover {
  opacity: 1;
}

.iv-mix-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 7px;
}

.iv-mix-key {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
}

.iv-mix-key i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex: none;
}

/* facts */

.iv-co-facts {
  margin-bottom: 14px;
  flex: 1;
}

.iv-co-facts > div {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
  padding: 5px 0;
  border-top: 1px solid var(--border);
}

.iv-co-facts.wide > div {
  grid-template-columns: 104px minmax(0, 1fr);
}

.iv-co-facts dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-top: 2px;
}

.iv-co-facts dd {
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-2);
}

.iv-co-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}

.iv-co-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.iv-co-count svg {
  width: 14px;
  height: 14px;
}

.iv-co-count strong {
  font-family: var(--font-mono);
  color: var(--text);
}

.iv-co-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
}

.iv-co-progress-bar {
  width: 60px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}

.iv-co-progress-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}

/* ==========================================================================
   Company page
   ========================================================================== */

.iv-co-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 26px;
  margin-bottom: 30px;
  padding: 26px 28px;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  border-top: 3px solid var(--co, var(--accent-2));
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.iv-co-header-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.iv-co-header h1 {
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  font-weight: 400;
  letter-spacing: -.03em;
}

.iv-co-lede {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--text-2);
  max-width: 66ch;
  margin-bottom: 16px;
}

/* progress ring */

.iv-progress-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 16px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.iv-ring {
  position: relative;
  width: 104px;
  height: 104px;
}

.iv-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.iv-ring circle {
  fill: none;
  stroke-width: 3.4;
}

.iv-ring-track {
  stroke: var(--surface-hi);
}

.iv-ring-fill {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dasharray var(--t-slow) var(--ease-out);
}

.iv-ring-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.iv-ring-label strong {
  font-family: var(--font-head-sans);
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
}

.iv-progress-legend {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  list-style: none;
}

.iv-progress-legend li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  color: var(--text-2);
}

.iv-progress-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.dot-solid {
  background: var(--accent);
}

.dot-revisit {
  background: var(--accent-3);
}

.dot-unseen {
  background: var(--border-3);
}

.iv-reset {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text-3);
  font-size: 11px;
  transition: all var(--t-fast);
}

.iv-reset:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.iv-reset svg {
  width: 13px;
  height: 13px;
}

/* ---------- the loop ---------- */

.iv-loop,
.iv-signals {
  margin-bottom: 30px;
}

.iv-rounds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 12px;
  list-style: none;
  counter-reset: none;
}

.iv-round {
  display: flex;
  gap: 12px;
  padding: 16px 17px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
}

.iv-round-n {
  flex: none;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-2-soft);
  border: 1px solid rgba(77, 91, 216, .22);
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.iv-round-body h4 {
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 5px;
}

.iv-round-body p {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-2);
}

.iv-round-prep {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-2);
  color: var(--accent) !important;
}

.iv-round-prep svg {
  width: 13px;
  height: 13px;
  flex: none;
  margin-top: 2px;
}

.iv-signals ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  list-style: none;
}

.iv-signals li {
  display: flex;
  gap: 10px;
  padding: 13px 15px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-2);
}

.iv-signals li svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
  color: var(--accent);
}

/* ---------- the bank ---------- */

.iv-bank {
  margin-top: 8px;
}

/* A grid child defaults to min-width:auto, so a long unbroken string inside
   it can push the whole track wider than the container. Every text column in
   a grid needs this or the page scrolls sideways on a narrow screen. */
.iv-co-header-main {
  min-width: 0;
}

/* ---------- filters ---------- */

.iv-filters {
  position: sticky;
  top: calc(var(--topbar-h) + 8px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 20px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
}

.iv-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.iv-filter-label {
  flex: none;
  width: 52px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-3);
}

.iv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.iv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--t-fast);
}

.iv-chip span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
}

.iv-chip:hover {
  border-color: var(--border-3);
  color: var(--text);
}

.iv-chip.is-active {
  background: var(--tc, var(--text));
  border-color: var(--tc, var(--text));
  color: #fff;
}

.iv-chip.is-active span {
  color: rgba(255, 255, 255, .8);
}

.iv-expand {
  margin-left: auto;
}

.iv-result-count {
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-bottom: 12px;
}

.iv-result-count strong {
  font-family: var(--font-mono);
  color: var(--text);
}

/* ---------- question cards ---------- */

.iv-q-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.iv-q {
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-2);
  box-shadow: var(--shadow-1);
  transition: border-color var(--t-mid), box-shadow var(--t-mid);
  scroll-margin-top: calc(var(--topbar-h) + 24px);
}

.iv-q:hover {
  border-color: var(--border-2);
  border-left-color: var(--border-3);
}

.iv-q.is-solid {
  border-left-color: var(--accent);
  background: linear-gradient(90deg, var(--accent-soft), transparent 220px), var(--surface);
}

.iv-q.is-revisit {
  border-left-color: var(--accent-3);
  background: linear-gradient(90deg, rgba(180, 106, 5, .07), transparent 220px), var(--surface);
}

.iv-q.is-spotlit {
  box-shadow: 0 0 0 3px var(--accent-2-soft), var(--shadow-2);
}

.iv-q-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 11px;
}

.iv-q-n {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  background: var(--surface-3);
  padding: 2px 7px;
  border-radius: var(--r-xs);
}

.iv-q-topic {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--tc, var(--accent-2));
  background: var(--surface-2);
  background: color-mix(in srgb, var(--tc, var(--accent-2)) 10%, transparent);
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--tc, var(--accent-2)) 24%, transparent);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.iv-q-topic svg {
  width: 12px;
  height: 12px;
}

.iv-q-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-pill);
}

.iv-q-mark svg {
  width: 12px;
  height: 12px;
}

.iv-q-mark.is-solid {
  color: var(--accent);
  background: var(--accent-soft);
}

.iv-q-mark.is-revisit {
  color: var(--accent-3);
  background: rgba(180, 106, 5, .10);
}

.iv-q-title {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.015em;
  color: var(--text);
  margin-bottom: 10px;
}

.iv-q-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}

.iv-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 1px 7px;
  border-radius: var(--r-xs);
}

.iv-q-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.iv-q-spacer {
  flex: 1;
  min-width: 8px;
}

.iv-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--text-2);
  font-family: var(--font-head-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--t-fast);
}

.iv-btn svg {
  width: 14px;
  height: 14px;
}

.iv-btn:hover {
  border-color: var(--border-3);
  color: var(--text);
  background: var(--surface-3);
}

.iv-btn-nudge.is-on {
  background: rgba(180, 106, 5, .10);
  border-color: rgba(180, 106, 5, .32);
  color: var(--accent-3);
}

.iv-btn-answer.is-on {
  background: var(--accent-2-soft);
  border-color: rgba(77, 91, 216, .32);
  color: var(--accent-2);
}

.iv-mark.is-on {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

.iv-mark[data-mark="revisit"].is-on {
  background: rgba(180, 106, 5, .10);
  border-color: rgba(180, 106, 5, .32);
  color: var(--accent-3);
}

/* ---------- nudge ---------- */

.iv-nudge {
  margin-top: 14px;
  padding: 15px 17px;
  border-radius: var(--r-md);
  background: rgba(180, 106, 5, .06);
  border: 1px solid rgba(180, 106, 5, .20);
  animation: iv-slide var(--t-mid) var(--ease-out);
}

.iv-nudge h4 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-3);
  margin-bottom: 8px;
}

.iv-nudge h4 svg {
  width: 16px;
  height: 16px;
}

.iv-nudge p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
}

.iv-nudge-hint {
  margin-top: 8px;
  font-size: var(--fs-xs) !important;
  color: var(--text-3) !important;
  font-style: italic;
}

@keyframes iv-slide {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- answer ---------- */

.iv-answer {
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px dashed var(--border-2);
  animation: iv-slide var(--t-mid) var(--ease-out);
}

.iv-answer-body {
  font-size: var(--fs-sm);
}

.iv-panel {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.iv-panel h4 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 9px;
}

.iv-panel h4 svg {
  width: 16px;
  height: 16px;
}

.iv-panel ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.iv-panel li {
  display: flex;
  gap: 8px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-2);
}

.iv-panel li svg {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 4px;
}

.iv-panel p {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-2);
}

.iv-panel-key {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.iv-panel-key h4,
.iv-panel-key li svg {
  color: var(--accent);
}

.iv-panel-trap {
  background: var(--danger-soft);
  border-color: rgba(207, 51, 72, .24);
}

.iv-panel-trap h4 {
  color: var(--danger);
}

.iv-panel-next {
  background: var(--accent-2-soft);
  border-color: rgba(77, 91, 216, .20);
}

.iv-panel-next h4,
.iv-panel-next li svg {
  color: var(--accent-2);
}

/* also asked at */

.iv-asked {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}

.iv-asked-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-right: 3px;
}

.iv-asked-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  color: var(--co, var(--text-2));
  background: var(--surface-2);
  background: color-mix(in srgb, var(--co, var(--text-3)) 9%, transparent);
  border: 1px solid var(--border-2);
  border: 1px solid color-mix(in srgb, var(--co, var(--text-3)) 24%, transparent);
  transition: all var(--t-fast);
}

.iv-asked-chip:hover {
  background: var(--surface-2);
  background: color-mix(in srgb, var(--co, var(--text-3)) 18%, transparent);
}

.iv-asked-more {
  font-size: 11px;
  color: var(--text-3);
}

/* ---------- responsive ---------- */

@media (max-width: 1020px) {

  .iv-hero,
  .iv-co-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .iv-hero-stats {
    grid-template-columns: repeat(4, 1fr);
  }

  .iv-progress-card {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    flex-wrap: wrap;
  }

  .iv-progress-legend {
    width: auto;
    flex: 1;
  }

  .iv-reset {
    width: auto;
  }
}

@media (max-width: 720px) {
  .iv-view,
  .iv-detail {
    padding: 16px 12px 64px;
  }

  .iv-hero,
  .iv-co-header {
    padding: 20px 18px;
  }

  .iv-hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .iv-co-grid,
  .iv-topic-grid,
  .iv-rounds {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The sticky filter bar eats too much of a short viewport; let it scroll
     away on small screens rather than covering the questions. */
  .iv-filters {
    position: static;
    padding: 13px 14px;
  }

  .iv-filter-label {
    width: auto;
  }

  .iv-q {
    padding: 15px 15px 14px;
  }

  .iv-q-actions {
    gap: 6px;
  }

  .iv-q-spacer {
    display: none;
  }

  .iv-btn span {
    display: none;
  }

  .iv-btn-nudge span,
  .iv-btn-answer span {
    display: inline;
  }

  .md-code {
    font-size: 11.5px;
  }
}

/* ==========================================================================
   Code Dojo — the writing trainer (#/code)

   The sheet is a transparent <textarea> stacked on a <pre>. Both must agree
   on font, line-height and padding to the pixel, and the line boxes are
   pinned in px so a fallback glyph can never push one layer out of step with
   the other. Everything else here is ordinary product furniture.
   ========================================================================== */

.dj-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px 14px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.dj-search {
  flex: 1 1 190px;
  min-width: 150px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
}

.dj-search::placeholder {
  color: var(--text-3);
}

.dj-chip {
  min-height: 30px;
  padding: 0 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  transition: all var(--t-fast) var(--ease-out);
}

.dj-chip:hover {
  border-color: var(--border-3);
  color: var(--text);
}

.dj-chip[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

select.dj-chip {
  padding-right: 26px;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  max-width: 190px;
}

.dj-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* ---- the problem list ---- */

.dj-group {
  margin-bottom: 26px;
}

.dj-group-h {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.dj-group-h h2 {
  font-family: var(--font-head);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
}

.dj-group-h .rule {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.dj-group-h b {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-3);
}

.dj-list {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dj-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
}

.dj-row:hover {
  border-color: var(--accent-line);
  background: var(--surface-2);
  transform: translateX(2px);
}

.dj-row-t {
  font-size: var(--fs-base);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dj-row-co {
  display: flex;
  gap: 5px;
  overflow: hidden;
}

.dj-row-co span {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-3);
  white-space: nowrap;
}

.dj-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--border-3);
}

.dj-dot.is-attempted {
  border-color: var(--accent-3);
  background: color-mix(in srgb, var(--accent-3) 30%, transparent);
}

.dj-dot.is-solved {
  border-color: var(--accent);
  background: var(--accent);
}

.dj-freq {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}

.dj-freq i {
  display: block;
  width: 3px;
  height: 10px;
  border-radius: 1px;
  background: var(--border-3);
}

.dj-freq i.on {
  background: var(--accent);
}

.dj-flagmark {
  color: var(--accent-3);
}

.dj-empty {
  padding: 34px 16px;
  text-align: center;
  color: var(--text-3);
  border: 1px dashed var(--border-2);
  border-radius: var(--r-md);
}

/* ---- problem page ---- */

.dj-brief {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 16px 18px;
  margin-bottom: 16px;
}

.dj-brief>p {
  margin: 0 0 14px;
  max-width: var(--measure);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--text-2);
}

.dj-lab {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 7px;
}

.dj-ex {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--code-bg);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.6;
  overflow-x: auto;
}

.dj-ex u {
  text-decoration: none;
  color: var(--text-3);
}

.dj-ex .o {
  color: var(--accent);
}

.dj-ex .n {
  font-family: var(--font-body);
  color: var(--text-3);
}

.dj-cons {
  margin: 0 0 4px;
  padding-left: 18px;
}

.dj-cons li {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
}

.dj-given {
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px dashed var(--border-3);
  border-radius: var(--r-sm);
  background: var(--code-bg);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
  color: var(--text-2);
}

/* ---- workspace ---- */

.dj-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}

.dj-main {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.dj-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.dj-seg {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  background: var(--bg);
}

.dj-seg button {
  padding: 5px 12px;
  border: none;
  border-radius: var(--r-xs);
  background: none;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  transition: all var(--t-fast) var(--ease-out);
}

.dj-seg button:hover {
  color: var(--text);
}

.dj-seg button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-1);
}

.dj-read {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

.dj-read u {
  text-decoration: none;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.dj-read b {
  font-weight: 600;
  min-width: 32px;
}

.dj-read.is-good b {
  color: var(--accent);
}

.dj-read.is-bad b {
  color: var(--danger);
}

.dj-track {
  flex: 1;
  min-width: 70px;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
  overflow: hidden;
}

.dj-track i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width var(--t-mid) var(--ease-out);
}

.dj-zoom {
  display: inline-flex;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.dj-z {
  padding: 4px 9px;
  border: none;
  background: var(--bg);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.dj-z:hover {
  color: var(--text);
  background: var(--surface-3);
}

/* ---- the sheet ---- */

.dj-sheet {
  --dj-fs: 14px;
  --dj-lh: 1.62;
  display: flex;
  max-height: min(62vh, 640px);
  min-height: 240px;
  overflow: auto;
  background: var(--code-bg);
  /* ruled like paper, on the same rhythm as the code */
  background-image: linear-gradient(to bottom, var(--dot) 1px, transparent 1px);
  background-size: 100% calc(var(--dj-fs) * var(--dj-lh));
  background-position: 0 14px;
  background-attachment: local;
  font-family: var(--font-mono);
  font-size: var(--dj-fs);
  line-height: var(--dj-lh);
}

.dj-gutter {
  position: sticky;
  left: 0;
  z-index: 2;
  flex: 0 0 auto;
  padding: 14px 10px 40vh 14px;
  border-right: 1px solid var(--border);
  background: var(--code-bg);
  text-align: right;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.dj-gutter div {
  height: calc(var(--dj-fs) * var(--dj-lh));
  line-height: calc(var(--dj-fs) * var(--dj-lh));
  opacity: .45;
  transition: color var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}

.dj-gutter div.is-done {
  color: var(--accent);
  opacity: 1;
}

.dj-gutter div.is-here {
  opacity: 1;
  color: var(--text);
}

.dj-gutter div.is-done.is-here {
  color: var(--accent);
}

.dj-wrap {
  position: relative;
  flex: 1 0 auto;
  width: max-content;
  padding: 14px 22px 40vh 14px;
}

.dj-layer {
  position: relative;
  margin: 0;
  white-space: pre;
  tab-size: 4;
  pointer-events: none;
  font: inherit;
  line-height: inherit;
}

.dj-ln {
  display: block;
  height: calc(var(--dj-fs) * var(--dj-lh));
  line-height: calc(var(--dj-fs) * var(--dj-lh));
  color: var(--text);
}

.dj-gh {
  opacity: .34;
}

.dj-bad {
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: 2px;
  text-decoration: underline wavy var(--danger);
  text-underline-offset: 2px;
}

.dj-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 14px 22px 40vh 14px;
  border: none;
  outline: none;
  resize: none;
  overflow: hidden;
  background: transparent;
  color: transparent;
  caret-color: var(--accent);
  white-space: pre;
  tab-size: 4;
  font: inherit;
  line-height: inherit;
}

.dj-input::selection {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
}

/* token colours, matching .codebox and the lesson code blocks */
.dj-layer .tok-kw,
.dj-ref .tok-kw,
.dj-given .tok-kw {
  color: var(--accent-2);
}

.dj-layer .tok-str,
.dj-ref .tok-str,
.dj-given .tok-str {
  color: var(--accent);
}

.dj-layer .tok-num,
.dj-ref .tok-num,
.dj-given .tok-num {
  color: var(--accent-3);
}

.dj-layer .tok-com,
.dj-ref .tok-com,
.dj-given .tok-com {
  color: var(--text-3);
  font-style: italic;
}

.dj-layer .tok-fn,
.dj-ref .tok-fn,
.dj-given .tok-fn {
  color: #62b6ff;
}

html[data-theme="light"] .dj-layer .tok-fn,
html[data-theme="light"] .dj-ref .tok-fn,
html[data-theme="light"] .dj-given .tok-fn {
  color: #1d6fd0;
}

.dj-layer .tok-bi,
.dj-ref .tok-bi,
.dj-given .tok-bi {
  color: var(--accent-2);
  opacity: .85;
}

.dj-layer .tok-op,
.dj-ref .tok-op,
.dj-given .tok-op {
  color: var(--text-2);
}

/* ---- actions ---- */

.dj-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 11px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.dj-verdict {
  flex: 1 1 220px;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.dj-verdict code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: var(--code-bg);
  border: 1px solid var(--border);
  color: var(--text);
}

.dj-verdict.is-ok {
  color: var(--accent);
  font-weight: 600;
}

.dj-verdict.is-near {
  color: var(--accent-3);
}

.dj-verdict.is-off {
  color: var(--danger);
}

/* ---- coach ---- */

.dj-coach {
  display: grid;
  gap: 12px;
  align-content: start;
  position: sticky;
  top: calc(var(--topbar-h) + 12px);
}

.dj-panel {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 13px 14px;
}

.dj-panel-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}

.dj-panel-h h3 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.dj-hint {
  display: grid;
  grid-template-columns: 15px 1fr;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px dashed var(--border-2);
}

.dj-hint:first-child {
  border-top: none;
  padding-top: 0;
}

.dj-hint b {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  padding-top: 2px;
}

.dj-hint p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-2);
}

.dj-note {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-3);
}

.dj-note+.dj-test {
  margin-top: 6px;
}

.dj-prose {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
}

.dj-prose code {
  font-family: var(--font-mono);
  font-size: .88em;
  padding: 1px 4px;
  border-radius: var(--r-xs);
  background: var(--code-bg);
  color: var(--text);
}

.dj-locked {
  width: 100%;
  padding: 13px;
  border: 1px dashed var(--border-3);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.dj-locked:hover {
  color: var(--accent);
  border-color: var(--accent-line);
}

.dj-cx {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.dj-cx span {
  flex: 1;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.dj-cx u {
  display: block;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.dj-cx b {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--accent);
}

.dj-tests {
  display: grid;
  gap: 5px;
}

.dj-test {
  display: block;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--code-bg);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-2);
  white-space: pre;
  overflow-x: auto;
}

.dj-ref {
  margin: 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--code-bg);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.65;
  white-space: pre;
  overflow-x: auto;
  color: var(--text);
}

.dj-notes {
  width: 100%;
  min-height: 78px;
  padding: 9px 10px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.6;
  resize: vertical;
}

.dj-nav {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 18px;
}

@media (max-width: 1080px) {
  .dj-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dj-coach {
    position: static;
  }
}

@media (max-width: 640px) {
  .dj-row {
    grid-template-columns: 12px minmax(0, 1fr) auto;
  }

  .dj-row-co,
  .dj-freq {
    display: none;
  }

  .dj-sheet {
    max-height: 56vh;
  }
}

/* ===================================================================
   Loops & Logics — the Logic Vault
   Appended after the dj-* section, same as every other section block.
   Cards are recall-first: the line is hidden until asked for, so the
   default state of the page is a set of questions, not a set of answers.
   =================================================================== */

.lv-view {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-bottom: 40px;
}

/* ---- hero ---- */

.lv-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 30px 32px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.lv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 var(--fs-xs) / 1 var(--font-head);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.lv-eyebrow svg {
  width: 15px;
  height: 15px;
}

.lv-hero-copy h1 {
  margin: 12px 0 10px;
  font: 800 var(--fs-3xl) / 1.12 var(--font-head);
  letter-spacing: -.02em;
  max-width: 22ch;
}

.lv-hero-copy h1 em {
  font-style: normal;
  color: var(--accent-2);
}

.lv-hero-copy > p {
  margin: 0;
  max-width: 68ch;
  color: var(--text-2);
  line-height: 1.65;
}

.lv-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.lv-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(84px, 1fr));
  gap: 10px;
}

.lv-stat {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  text-align: center;
}

.lv-stat strong {
  display: block;
  font: 800 var(--fs-xl) / 1 var(--font-head);
  color: var(--text);
}

.lv-stat span {
  display: block;
  margin-top: 5px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.lv-stat.is-live {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.lv-stat.is-live strong {
  color: var(--accent);
}

/* ---- how to use ---- */

.lv-how {
  padding: 22px 26px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.lv-how h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font: 700 var(--fs-md) / 1.3 var(--font-head);
}

.lv-how h2 svg {
  width: 17px;
  height: 17px;
  color: var(--accent-3);
}

.lv-how-steps {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 9px;
  color: var(--text-2);
  line-height: 1.6;
}

.lv-how-steps strong {
  color: var(--text);
}

.lv-how-steps em {
  font-style: normal;
  color: var(--accent-2);
  font-weight: 600;
}

/* ---- shelf grid ---- */

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

.lv-shelf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color .16s, transform .16s, box-shadow .16s;
}

.lv-shelf:hover {
  border-color: var(--sc, var(--accent-2));
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.lv-shelf-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--sc, var(--accent-2)) 14%, transparent);
  color: var(--sc, var(--accent-2));
}

.lv-shelf-ico svg {
  width: 20px;
  height: 20px;
}

.lv-shelf-body h3 {
  margin: 0 0 5px;
  font: 700 var(--fs-md) / 1.25 var(--font-head);
}

.lv-shelf-deck {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.5;
}

.lv-shelf-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.lv-shelf-done {
  color: var(--accent);
  font-weight: 600;
}

.lv-bar {
  height: 4px;
  margin-top: 10px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}

.lv-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--sc, var(--accent-2));
  transition: width .3s;
}

.lv-bar-lg {
  height: 6px;
  margin: 0;
}

/* ---- shelf header ---- */

.lv-shead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 26px 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.lv-shead-ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--sc, var(--accent-2)) 15%, transparent);
  color: var(--sc, var(--accent-2));
}

.lv-shead-ico svg {
  width: 26px;
  height: 26px;
}

.lv-shead h1 {
  margin: 0 0 8px;
  font: 800 var(--fs-2xl) / 1.15 var(--font-head);
  letter-spacing: -.015em;
}

.lv-shead p {
  margin: 0;
  max-width: 76ch;
  color: var(--text-2);
  line-height: 1.62;
}

.lv-shead-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* ---- jump nav ---- */

.lv-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lv-jump a {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  transition: border-color .15s, color .15s;
}

.lv-jump a:hover {
  border-color: var(--sc, var(--accent-2));
  color: var(--sc, var(--accent-2));
}

/* ---- tools ---- */

.lv-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.lv-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.lv-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  font: 600 var(--fs-xs) / 1 var(--font-body);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.lv-filter:hover {
  border-color: var(--border-3);
}

.lv-filter.is-active {
  border-color: var(--sc, var(--accent-2));
  background: color-mix(in srgb, var(--sc, var(--accent-2)) 12%, transparent);
  color: var(--sc, var(--accent-2));
}

.lv-filter-n {
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  font-size: 10px;
}

.lv-filter.is-active .lv-filter-n {
  background: rgba(255, 255, 255, .55);
}

.lv-tools-r {
  display: flex;
  gap: 8px;
  align-items: center;
}

.lv-search {
  min-width: 200px;
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  font: 400 var(--fs-sm) / 1 var(--font-body);
  color: var(--text);
}

.lv-search:focus-visible {
  outline: none;
  border-color: var(--sc, var(--accent-2));
}

/* ---- decks ---- */

.lv-deck {
  scroll-margin-top: 84px;
}

.lv-deck-h {
  margin-bottom: 12px;
}

.lv-deck-h h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 5px;
  font: 700 var(--fs-lg) / 1.25 var(--font-head);
}

.lv-deck-n {
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  font: 600 var(--fs-xs) / 1.6 var(--font-body);
  color: var(--text-3);
}

.lv-deck-h p {
  margin: 0;
  max-width: 78ch;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.55;
}

.lv-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 12px;
}

/* ---- a card ---- */

.lv-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-2);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .16s, box-shadow .16s;
}

.lv-card:hover {
  box-shadow: var(--shadow-1);
}

.lv-card.is-known {
  border-left-color: var(--accent);
}

.lv-card.is-shaky {
  border-left-color: var(--accent-3);
}

.lv-card-h {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 15px 17px 11px;
}

.lv-card-h h4 {
  margin: 0;
  font: 700 var(--fs-md) / 1.3 var(--font-head);
}

.lv-marks {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.lv-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  font: 600 10px / 1 var(--font-body);
  color: var(--text-3);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.lv-mark svg {
  width: 11px;
  height: 11px;
}

.lv-mark:hover {
  border-color: var(--border-3);
  color: var(--text-2);
}

.lv-mark[data-mark="known"].is-on {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

.lv-mark[data-mark="shaky"].is-on {
  border-color: color-mix(in srgb, var(--accent-3) 40%, transparent);
  background: color-mix(in srgb, var(--accent-3) 12%, transparent);
  color: var(--accent-3);
}

/* the recall line — hidden until asked for */

.lv-recall {
  position: relative;
  margin: 0 17px 13px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px dashed var(--border-2);
}

.lv-recall-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  font: 600 var(--fs-xs) / 1 var(--font-body);
  color: var(--text-3);
  cursor: pointer;
}

.lv-recall-btn svg {
  width: 14px;
  height: 14px;
}

.lv-recall-btn:hover {
  color: var(--accent-2);
}

.lv-recall-line {
  display: none;
  margin: 0;
  padding: 13px 15px;
  font: 600 var(--fs-base) / 1.55 var(--font-body);
  color: var(--text);
}

.lv-recall.is-open {
  border-style: solid;
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.lv-recall.is-open .lv-recall-btn {
  display: none;
}

.lv-recall.is-open .lv-recall-line {
  display: block;
}

.lv-card-b {
  padding: 0 17px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lv-why {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.62;
}

/* numbers worth memorising */

.lv-nums {
  display: grid;
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--border);
  overflow: hidden;
}

.lv-num {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--surface-2);
  font-size: var(--fs-xs);
}

.lv-num span {
  color: var(--text-2);
}

.lv-num strong {
  font-family: var(--font-mono);
  color: var(--text);
}

.lv-code {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--code-bg);
  border: 1px solid var(--border);
  overflow-x: auto;
  font: 400 var(--fs-xs) / 1.65 var(--font-mono);
}

.lv-k {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font: 700 10px / 1 var(--font-head);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3);
}

.lv-k svg {
  width: 12px;
  height: 12px;
}

.lv-use ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--text-2);
  line-height: 1.55;
}

.lv-trap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent);
}

.lv-trap > span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font: 700 11px / 1 var(--font-head);
}

.lv-trap p:last-child {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-2);
  line-height: 1.58;
}

.lv-rel {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---- responsive ---- */

@media (max-width: 1080px) {
  .lv-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .lv-hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lv-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {

  .lv-hero,
  .lv-shead {
    padding: 20px 18px;
  }

  .lv-hero-copy h1 {
    font-size: var(--fs-2xl);
  }

  .lv-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lv-shead {
    grid-template-columns: minmax(0, 1fr);
  }

  .lv-tools {
    flex-direction: column;
    align-items: stretch;
  }

  .lv-tools-r {
    flex-direction: column;
  }

  .lv-search {
    min-width: 0;
    width: 100%;
  }

  .lv-card-h {
    flex-direction: column;
  }

  .lv-shelves {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===================================================================
   Drill speed layer
   The drill measured correctness; these are the parts that measure
   fluency. Speed is shown quietly during a card and summarised at the
   end — a permanently visible timer turns practice into anxiety.
   =================================================================== */

.dr-speed {
  display: none;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.dr-speed.is-on {
  display: flex;
}

.dr-sp-now {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.dr-sp-now i {
  font-style: normal;
  font-size: 9px;
  font-weight: 500;
  opacity: .75;
}

/* a personal best is the one moment worth celebrating in the flow */
.dr-sp-now.is-pb {
  background: var(--accent);
  color: var(--text-inv);
  animation: dr-pb .5s ease;
}

@keyframes dr-pb {
  0% { transform: scale(.85); }
  55% { transform: scale(1.09); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .dr-sp-now.is-pb { animation: none; }
}

.dr-sp-best {
  color: var(--text-3);
  font-size: 10px;
  letter-spacing: .04em;
}

/* the session verdict on the completion card */

.dr-done-speed {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.dr-done-speed svg {
  width: 15px;
  height: 15px;
  color: var(--accent-2);
}

.dr-done-speed b {
  color: var(--text);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* the speed pip in the drill hero */

.dl-stats .pip.is-speed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dl-stats .pip.is-speed svg {
  width: 13px;
  height: 13px;
  color: var(--accent-2);
}

/* the speed-run invitation on the daily drill page */

.dl-speed {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
  padding: 18px 22px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background:
    linear-gradient(100deg, var(--accent-soft), transparent 62%),
    var(--surface);
}

.dl-speed-i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
}

.dl-speed-i svg {
  width: 19px;
  height: 19px;
}

.dl-speed h3 {
  margin: 0 0 4px;
  font: 700 var(--fs-md) / 1.3 var(--font-head);
}

.dl-speed p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.55;
  max-width: 70ch;
}

@media (max-width: 720px) {
  .dl-speed {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .dl-speed .btn {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .dr-foot {
    flex-wrap: wrap;
  }
}

/* ===================================================================
   Speed Coding — its own section.
   The ladder reads as a progression, so the rung number is structural
   rather than decorative: it is the one thing that tells a reader where
   to start and what comes next.
   =================================================================== */

.sp-view {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-bottom: 44px;
}

/* ---- hero ---- */

.sp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 30px 32px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.sp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 var(--fs-xs) / 1 var(--font-head);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
}

.sp-eyebrow svg {
  width: 15px;
  height: 15px;
}

.sp-hero-copy h1 {
  margin: 12px 0 10px;
  font: 800 var(--fs-3xl) / 1.1 var(--font-head);
  letter-spacing: -.02em;
  max-width: 20ch;
}

.sp-hero-copy h1 em {
  font-style: italic;
  color: var(--accent);
}

.sp-hero-copy > p {
  margin: 0;
  max-width: 66ch;
  color: var(--text-2);
  line-height: 1.65;
}

.sp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.sp-hero-stats {
  display: grid;
  gap: 10px;
}

.sp-stat {
  min-width: 118px;
  padding: 13px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  text-align: center;
}

.sp-stat strong {
  display: block;
  font: 800 var(--fs-2xl) / 1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--accent);
}

.sp-stat span {
  display: block;
  margin-top: 5px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* ---- how it works ---- */

.sp-how {
  padding: 22px 26px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.sp-how h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font: 700 var(--fs-md) / 1.3 var(--font-head);
}

.sp-how h2 svg {
  width: 17px;
  height: 17px;
  color: var(--accent-3);
}

.sp-how-steps {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 9px;
  color: var(--text-2);
  line-height: 1.6;
}

.sp-how-steps strong {
  color: var(--text);
}

/* ---- the personalised deck ---- */

.sp-slow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 20px 24px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background:
    linear-gradient(100deg, var(--accent-soft), transparent 60%),
    var(--surface);
  color: inherit;
  text-decoration: none;
  transition: transform .16s, box-shadow .16s;
}

.sp-slow:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.sp-slow-i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
}

.sp-slow-i svg {
  width: 20px;
  height: 20px;
}

.sp-slow h3 {
  margin: 0 0 4px;
  font: 700 var(--fs-md) / 1.3 var(--font-head);
}

.sp-slow p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.55;
  max-width: 74ch;
}

.sp-slow-go {
  color: var(--accent);
}

.sp-slow-go svg {
  width: 20px;
  height: 20px;
}

/* ---- a rung ---- */

.sp-rung-h {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.sp-rung-n {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-line);
  background: var(--accent-soft);
  font: 700 var(--fs-sm) / 1 var(--font-mono);
  color: var(--accent);
}

.sp-rung-h h2 {
  margin: 0 0 2px;
  font: 700 var(--fs-lg) / 1.25 var(--font-head);
}

.sp-rung-h p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.sp-sets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

/* ---- a set card ---- */

.sp-set {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 17px 19px 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color .16s, transform .16s, box-shadow .16s;
}

.sp-set:hover {
  border-color: var(--accent-line);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.sp-set-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.sp-set-top h3 {
  margin: 0;
  font: 700 var(--fs-md) / 1.25 var(--font-head);
}

.sp-set-n {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  font: 600 var(--fs-xs) / 1.6 var(--font-mono);
  color: var(--text-3);
}

.sp-set p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.55;
}

.sp-set-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
  font-size: var(--fs-xs);
}

.sp-set-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-3);
}

.sp-set-time svg {
  width: 12px;
  height: 12px;
}

.sp-set-best {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent);
}

.sp-set-new {
  color: var(--text-3);
}

.sp-bar {
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}

.sp-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width .3s;
}

/* ---- a set page ---- */

.sp-shead {
  padding: 24px 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.sp-shead-n {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  font: 700 10px / 1.7 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}

.sp-shead h1 {
  margin: 0 0 8px;
  font: 800 var(--fs-2xl) / 1.15 var(--font-head);
  letter-spacing: -.015em;
}

.sp-shead p {
  margin: 0;
  max-width: 74ch;
  color: var(--text-2);
  line-height: 1.62;
}

.sp-shead-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.sp-mount {
  min-height: 220px;
}

/* ---- empty state ---- */

.sp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 42px 28px;
  border: 1px dashed var(--border-2);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  text-align: center;
}

.sp-empty > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}

.sp-empty h3 {
  margin: 0;
  font: 700 var(--fs-lg) / 1.3 var(--font-head);
}

.sp-empty p {
  margin: 0;
  max-width: 58ch;
  color: var(--text-2);
  line-height: 1.6;
}

/* ---- responsive ---- */

@media (max-width: 1080px) {
  .sp-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .sp-hero,
  .sp-shead {
    padding: 20px 18px;
  }

  .sp-hero-copy h1 {
    font-size: var(--fs-2xl);
  }

  .sp-slow {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sp-slow-go {
    display: none;
  }

  .sp-sets {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- the teaching beat -------------------------------------------
   Shown only once a card is cleared. It replaces the auto-advance, so
   it must read as the reward for finishing rather than an interruption
   of it — hence the accent border and the button that carries focus. */

.dr-why {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 18px;
  align-items: center;
  margin-top: 14px;
  padding: 15px 18px;
  border: 1px solid var(--accent-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  animation: dr-why-in .22s ease;
}

@keyframes dr-why-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dr-why { animation: none; }
}

.dr-why-k {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 7px;
  font: 700 10px / 1 var(--font-head);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
}

.dr-why-k svg {
  width: 13px;
  height: 13px;
}

.dr-why-b {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--text-2);
  max-width: 74ch;
}

.dr-why .btn {
  align-self: end;
  white-space: nowrap;
}

.dr-why kbd {
  margin-left: 7px;
  opacity: .7;
}

@media (max-width: 640px) {
  .dr-why {
    grid-template-columns: minmax(0, 1fr);
  }

  .dr-why .btn {
    justify-content: center;
  }
}

/* ===================================================================
   The Python runner
   An editable console attached under an annotated code block. It sits
   inside the same figure, so it reads as part of the example rather
   than a separate tool the reader has to relate back to the lesson.
   =================================================================== */

.lc-run {
  margin-left: 6px;
}

.lc-run:disabled {
  opacity: .55;
  cursor: default;
}

.rn {
  margin-top: 2px;
  border-top: 1px dashed var(--border-2);
  background: var(--surface-2);
}

.rn-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
}

.rn-k {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 700 10px / 1 var(--font-head);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.rn-k svg {
  width: 13px;
  height: 13px;
  color: var(--accent-2);
}

.rn-acts {
  display: flex;
  gap: 7px;
}

.rn-acts kbd {
  margin-left: 7px;
  opacity: .72;
}

.rn-code {
  display: block;
  width: 100%;
  padding: 13px 15px;
  border: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--code-bg);
  color: var(--text);
  font: 400 var(--fs-sm) / 1.68 var(--font-mono);
  tab-size: 4;
  resize: vertical;
}

.rn-code:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: -2px;
}

.rn-result:empty {
  display: none;
}

.rn-out {
  padding: 12px 15px 14px;
  border-left: 3px solid var(--accent);
}

.rn-out.is-err {
  border-left-color: var(--danger);
  background: var(--danger-soft);
}

.rn-out.is-fatal {
  border-left-color: var(--accent-3);
  background: color-mix(in srgb, var(--accent-3) 9%, transparent);
}

.rn-out.is-wait {
  border-left-color: var(--accent-2);
}

.rn-out-k {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  font: 700 10px / 1 var(--font-head);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}

.rn-out.is-err .rn-out-k {
  color: var(--danger);
}

.rn-out.is-fatal .rn-out-k {
  color: var(--accent-3);
}

.rn-out.is-wait .rn-out-k {
  color: var(--accent-2);
}

.rn-out-k svg {
  width: 13px;
  height: 13px;
}

.rn-out p:not(.rn-out-k) {
  margin: 0;
  max-width: 70ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-2);
}

.rn-out pre {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow-x: auto;
  font: 400 var(--fs-sm) / 1.62 var(--font-mono);
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.rn-out pre + pre {
  margin-top: 8px;
}

.rn-tb {
  color: var(--danger) !important;
  border-color: color-mix(in srgb, var(--danger) 28%, transparent) !important;
}

.rn-quiet {
  color: var(--text-3) !important;
  font-style: italic;
}

@media (max-width: 640px) {
  .rn-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .rn-acts {
    justify-content: flex-end;
  }

  .rn-acts kbd {
    display: none;
  }
}

/* ===================================================================
   Journeys — the plan section
   A timeline, so the numbering is structural: the phase number tells
   you where you are, and the "you are here" marker is the one piece
   of state a returning reader actually wants.
   =================================================================== */

.jy-view {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 44px;
}

/* ---- hero ---- */

.jy-hero {
  padding: 30px 32px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.jy-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 var(--fs-xs) / 1 var(--font-head);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.jy-eyebrow svg {
  width: 15px;
  height: 15px;
}

.jy-hero-copy h1 {
  margin: 12px 0 10px;
  font: 800 var(--fs-3xl) / 1.11 var(--font-head);
  letter-spacing: -.02em;
  max-width: 24ch;
}

.jy-hero-copy h1 em {
  font-style: italic;
  color: var(--accent-2);
}

.jy-hero-copy > p {
  margin: 0;
  max-width: 70ch;
  color: var(--text-2);
  line-height: 1.65;
}

/* ---- guidance ---- */

.jy-how {
  padding: 22px 26px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.jy-how h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font: 700 var(--fs-md) / 1.3 var(--font-head);
}

.jy-how h2 svg {
  width: 17px;
  height: 17px;
  color: var(--accent-3);
}

.jy-how-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 9px;
  color: var(--text-2);
  line-height: 1.6;
}

.jy-how-list strong {
  color: var(--text);
}

/* ---- the chooser ---- */

.jy-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px;
}

.jy-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 15px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color .16s, transform .16s, box-shadow .16s;
}

.jy-card:hover {
  border-color: var(--jc, var(--accent-2));
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.jy-card.is-on {
  border-color: var(--jc, var(--accent-2));
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--jc) 9%, transparent), transparent 58%),
    var(--surface);
}

.jy-card-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--jc, var(--accent-2)) 14%, transparent);
  color: var(--jc, var(--accent-2));
}

.jy-card-ico svg {
  width: 22px;
  height: 22px;
}

.jy-card-b h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 0 0 5px;
  font: 700 var(--fs-md) / 1.25 var(--font-head);
}

.jy-yours {
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--jc, var(--accent-2));
  color: #fff;
  font: 700 9px / 1.7 var(--font-head);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.jy-card-b p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.55;
}

.jy-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* ---- progress bar ---- */

.jy-bar {
  height: 4px;
  margin-top: 10px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}

.jy-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--jc, var(--accent-2));
  transition: width .3s;
}

.jy-bar-lg {
  height: 6px;
  margin: 0;
}

/* ---- one journey ---- */

.jy-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 26px 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.jy-head-ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--jc, var(--accent-2)) 15%, transparent);
  color: var(--jc, var(--accent-2));
}

.jy-head-ico svg {
  width: 26px;
  height: 26px;
}

.jy-head h1 {
  margin: 0 0 8px;
  font: 800 var(--fs-2xl) / 1.15 var(--font-head);
  letter-spacing: -.015em;
}

.jy-head p {
  margin: 0;
  max-width: 76ch;
  color: var(--text-2);
  line-height: 1.62;
}

.jy-market {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px !important;
  padding: 9px 13px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--fs-sm);
}

.jy-market svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--accent-3);
}

.jy-head-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.jy-head-meta b {
  font-family: var(--font-mono);
  color: var(--text);
}

/* ---- the next action ---- */

.jy-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px 24px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background:
    linear-gradient(100deg, var(--accent-soft), transparent 62%),
    var(--surface);
}

.jy-next-b h3 {
  margin: 6px 0 4px;
  font: 700 var(--fs-lg) / 1.28 var(--font-head);
}

.jy-next-b p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.jy-next-a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.jy-k {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font: 700 10px / 1 var(--font-head);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}

.jy-k svg {
  width: 13px;
  height: 13px;
}

/* ---- a phase ---- */

.jy-phase {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  scroll-margin-top: 84px;
}

.jy-phase.is-next {
  border-color: var(--jc, var(--accent-2));
  box-shadow: var(--shadow-1);
}

.jy-phase.is-done {
  opacity: .72;
}

.jy-phase.is-gap {
  border-style: dashed;
}

.jy-phase-h {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.jy-phase-n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--border-2);
  background: var(--surface);
  font: 700 var(--fs-sm) / 1 var(--font-mono);
  color: var(--text-3);
}

.jy-phase.is-next .jy-phase-n {
  border-color: var(--jc, var(--accent-2));
  background: color-mix(in srgb, var(--jc, var(--accent-2)) 14%, transparent);
  color: var(--jc, var(--accent-2));
}

.jy-phase.is-done .jy-phase-n {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

.jy-phase-n svg {
  width: 15px;
  height: 15px;
}

.jy-phase-h h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 0 0 2px;
  font: 700 var(--fs-md) / 1.25 var(--font-head);
}

.jy-here {
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--jc, var(--accent-2));
  color: #fff;
  font: 700 9px / 1.7 var(--font-head);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.jy-phase-w {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.jy-phase-p {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.jy-phase-b {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jy-goal {
  margin: 0;
  max-width: 76ch;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.62;
}

/* ---- tracks in a phase ---- */

.jy-tracks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jy-track {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: inherit;
  text-decoration: none;
  font-size: var(--fs-xs);
  transition: border-color .15s, background .15s;
}

.jy-track:hover {
  border-color: var(--border-3);
  background: var(--surface-3);
}

.jy-track.is-done {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.jy-track-ico {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tc, var(--accent-2)) 16%, transparent);
  color: var(--tc, var(--accent-2));
}

.jy-track-ico svg {
  width: 12px;
  height: 12px;
}

.jy-track-n {
  font-weight: 600;
}

.jy-track-p {
  font-family: var(--font-mono);
  color: var(--text-3);
}

/* ---- practice and proof ---- */

.jy-practice ul {
  margin: 8px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-size: var(--fs-sm);
}

.jy-practice li a {
  font-weight: 600;
}

.jy-practice li span {
  display: block;
  color: var(--text-3);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.jy-proof {
  padding: 12px 15px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border-left: 3px solid var(--accent-3);
}

.jy-proof .jy-k {
  color: var(--accent-3);
  margin-bottom: 6px;
}

.jy-proof p:last-child {
  margin: 0;
  max-width: 74ch;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.6;
}

.jy-gapnote {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent-3) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-3) 26%, transparent);
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.55;
}

.jy-gapnote svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--accent-3);
}

/* ---- responsive ---- */

@media (max-width: 860px) {
  .jy-next {
    grid-template-columns: minmax(0, 1fr);
  }

  .jy-next-a {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .jy-hero,
  .jy-head {
    padding: 20px 18px;
  }

  .jy-hero-copy h1 {
    font-size: var(--fs-2xl);
  }

  .jy-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .jy-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .jy-phase-h {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .jy-phase-p {
    display: none;
  }
}

/* ---- the resume band ------------------------------------------------
   Sits above the hero on the home page. Two states: no plan chosen (an
   invitation) or a plan in progress (an instruction). Either way it is
   the first thing on the page, because "what do I do now" is the first
   question a returning reader has. */

.rz {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px 22px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--jc, var(--accent)) 10%, transparent), transparent 60%),
    var(--surface);
  box-shadow: var(--shadow-1);
}

.rz-ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--jc, var(--accent)) 15%, transparent);
  color: var(--jc, var(--accent));
}

.rz-ico svg {
  width: 21px;
  height: 21px;
}

.rz-k {
  margin: 0 0 3px;
  font: 700 10px / 1 var(--font-head);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--jc, var(--accent));
}

.rz-b h2 {
  margin: 0 0 3px;
  font: 700 var(--fs-md) / 1.28 var(--font-head);
}

.rz-b > p:last-of-type {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.5;
}

.rz-bar {
  height: 3px;
  margin-top: 9px;
  max-width: 320px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}

.rz-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--jc, var(--accent));
  transition: width .3s;
}

.rz-a {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* the no-plan-yet variant is a link, so the whole band is clickable */

.rz-empty {
  text-decoration: none;
  color: inherit;
  transition: border-color .16s, transform .16s, box-shadow .16s;
}

.rz-empty:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.rz-empty .rz-b h2 {
  font-size: var(--fs-lg);
}

.rz-go {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}

.rz-go svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 720px) {
  .rz {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
  }

  .rz-a,
  .rz-go {
    grid-column: 1 / -1;
  }

  .rz-a {
    justify-content: stretch;
  }

  .rz-a .btn {
    flex: 1;
    justify-content: center;
  }

  .rz-go {
    display: none;
  }
}

/* ---------- quick-reference cards ----------
   The cue card and formula card are scanned, not read. They are laid out as
   dense tables with a sticky header, sized so a whole section fits on screen,
   and they print cleanly because printing one out is a genuine use. */

.card-page {
  max-width: var(--w-read, 860px);
  margin: 0 auto;
}

.card-head {
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

.card-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.card-head h1 {
  font-size: var(--fs-2xl);
  line-height: 1.15;
  margin-bottom: 10px;
}

.card-deck {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 62ch;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.card-sec {
  margin-bottom: 34px;
}

.card-note {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-3);
  max-width: 68ch;
  margin-bottom: 14px;
}

/* the table scrolls inside its own box rather than the page */
.cue-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.cue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: 560px;
}

.cue-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: 11px 14px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.cue-table td {
  padding: 11px 14px;
  vertical-align: top;
  line-height: 1.5;
  border-bottom: 1px solid var(--border-2);
}

.cue-table tbody tr:last-child td {
  border-bottom: 0;
}

.cue-table tbody tr:hover {
  background: var(--surface-2);
}

.cue-table td:first-child {
  color: var(--text);
}

.cue-cx {
  color: var(--text-3);
  font-size: var(--fs-xs);
}

/* the pattern name links into the dictionary */
.cue-link {
  color: var(--accent);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease-out);
}

.cue-link:hover {
  border-bottom-color: currentColor;
}

/* a secondary label under the linked name, when the wording differs */
.cue-alt {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-3);
}

.formula-table code.formula {
  font-family: var(--font-mono);
  font-size: .84em;
  white-space: nowrap;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  color: var(--text);
}

.card-steps {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 9px;
}

.card-steps li {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-2);
}

.card-steps li b {
  color: var(--text);
}

/* The pattern card carries five tables now, so it is given more room than
   the reading measure the formula card is happy with. */
.card-page-wide {
  max-width: 1180px;
}

/* ---- the filter bar over the whole card ----
   One input and one segmented control narrow every table on the page, so the
   bar sticks under the top bar and stays reachable however far you scroll. */
.cue-tools {
  position: sticky;
  top: var(--topbar-h, 56px);
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding: 10px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.cue-filter {
  flex: 1 1 260px;
  min-width: 0;
}

.cue-seg {
  flex: 0 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.cue-seg::-webkit-scrollbar {
  display: none;
}

.cue-seg button {
  white-space: nowrap;
}

.cue-count {
  margin-left: auto;
  white-space: nowrap;
}

/* the discriminator column: quieter than the pattern, louder than the
   complexity, because it is read second and only when the guess is in doubt */
.cue-tell {
  color: var(--text-2);
  font-size: var(--fs-xs);
  line-height: 1.55;
  max-width: 34ch;
}

.cue-main {
  min-width: 780px;
}

.cue-confuse td:first-child,
.cue-confuse td:nth-child(2) {
  white-space: nowrap;
}

.cue-edges td:first-child {
  white-space: nowrap;
  color: var(--text);
}

/* the ladder is an ordered list, but each rung has a reason under it */
.cue-ladder li {
  color: var(--text);
}

.ladder-why {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-3);
  line-height: 1.55;
}

.cue-empty {
  padding: 28px 4px;
  font-size: var(--fs-sm);
  color: var(--text-3);
  text-align: center;
}

@media (max-width: 900px) {
  .card-page-wide {
    max-width: 100%;
  }
}

@media (max-width: 620px) {
  .cue-tools {
    position: static;
  }

  .cue-count {
    margin-left: 0;
  }

  .cue-tell {
    max-width: none;
  }
}

@media (max-width: 620px) {
  .cue-table {
    font-size: var(--fs-xs);
  }

  .cue-table td,
  .cue-table thead th {
    padding: 9px 10px;
  }
}

/* Printing one of these out is a real use, so make it work: drop the app
   chrome, drop the link colours, and let tables break across pages. */
@media print {

  .topbar,
  .sidebar,
  .footer,
  .card-actions,
  .cue-tools,
  .cue-empty,
  .bg-grid,
  .bg-glow {
    display: none !important;
  }

  /* print what is on screen: a row the reader filtered out stays out */
  .cue-table tr[hidden],
  .card-sec[hidden],
  .card-steps li[hidden] {
    display: none !important;
  }

  .card-page-wide {
    max-width: none;
  }

  .shell,
  .main {
    display: block;
    margin: 0;
    padding: 0;
  }

  .card-page {
    max-width: none;
  }

  .cue-wrap {
    overflow: visible;
    border: 0;
  }

  .cue-table {
    min-width: 0;
    page-break-inside: auto;
  }

  .cue-table tr {
    page-break-inside: avoid;
  }

  .cue-link {
    color: inherit;
    border: 0;
  }
}

/* ==========================================================================
   Depth sections — why it exists, the numbers, what people get wrong,
   the trade-off.

   These carry the reasoning half of an entry, so they are set to be *read*
   rather than skimmed: wider measure than a card, real vertical rhythm, and
   no decoration that competes with the prose. The only colour is semantic —
   red on a wrong belief, green on the correction, and the category tint on
   the rule that opens "why it exists".
   ========================================================================== */

.dp {
  margin: 0 0 8px;
}

/* --- why it exists --- */

.dp-why {
  display: grid;
  gap: 2px;
  border-left: 2px solid var(--cat, var(--accent));
  padding-left: 18px;
}

.dp-row {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
  padding: 10px 0;
}

.dp-row + .dp-row {
  border-top: 1px solid var(--border);
}

.dp-row-k {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
}

.dp-row-k svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.dp-row-v {
  font-size: var(--fs-base);
  line-height: 1.72;
  color: var(--text-2);
  text-wrap: pretty;
}

/* --- what people get wrong ---
   The wrong belief is printed first and struck through in tone, then the
   correction. Someone holding the wrong model recognises it and reads the
   fix; a list of true statements would slide straight past them. */

.dp-miss {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.dp-miss-i {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

/* The mark is floated rather than gridded. A grid makes every child a grid
   item, so an inline <code> or <strong> inside the sentence became its own
   row — the text broke apart and overlapped. Indent plus a positioned mark
   keeps the sentence a single flowing line box. */
.dp-miss-w,
.dp-miss-r {
  position: relative;
  padding-left: 30px;
  font-size: var(--fs-base);
  line-height: 1.65;
  /* A long unbreakable token — a `WHERE date_col + interval '1 day'` snippet,
     a URL — has no space to wrap at, so it would push the card wider than its
     column and overlap the text beside it. Allow a break inside such a word
     only when there is no other option. */
  overflow-wrap: anywhere;
}

/* Inline code inside a misconception must stay part of the sentence. It is
   set explicitly rather than inherited because several sections of this
   stylesheet make `code` a block, and one of those winning here is exactly
   what broke this layout before. */
.dp-miss-w code,
.dp-miss-r code,
.dp-row-v code,
.dp-bal-c li code,
.dp-avoid li code,
.dp-num-n code {
  display: inline;
  white-space: normal;
  overflow-wrap: anywhere;
}

.dp-miss-w {
  color: var(--text-3);
}

.dp-miss-r {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px dashed var(--border);
  color: var(--text);
}

.dp-miss-mark {
  position: absolute;
  left: 0;
  top: .18em;
  display: flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.dp-miss-mark svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.6;
}

.dp-miss-w .dp-miss-mark {
  color: var(--danger);
  background: var(--danger-soft);
}

.dp-miss-r .dp-miss-mark {
  color: var(--accent);
  background: var(--accent-soft);
}

/* --- the trade-off --- */

.dp-bal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 12px;
}

.dp-bal-c {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.dp-bal-c.is-buy {
  border-top: 2px solid var(--accent);
}

.dp-bal-c.is-cost {
  border-top: 2px solid var(--accent-3);
}

.dp-bal-k {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 9px;
}

.dp-bal-k svg {
  width: 13px;
  height: 13px;
}

.is-buy .dp-bal-k svg {
  color: var(--accent);
}

.is-cost .dp-bal-k svg {
  color: var(--accent-3);
}

.dp-bal-c ul,
.dp-avoid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.dp-bal-c li,
.dp-avoid li {
  position: relative;
  padding-left: 16px;
  font-size: var(--fs-base);
  line-height: 1.62;
  color: var(--text-2);
}

.dp-bal-c li::before,
.dp-avoid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-3);
}

.dp-avoid {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 2px solid var(--danger);
  border-radius: var(--r-md);
  background: var(--surface);
}

.dp-avoid-k {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 9px;
}

.dp-avoid-k svg {
  width: 13px;
  height: 13px;
  color: var(--danger);
}

/* --- the numbers ---
   A comparison wants columns, and figures want tabular numerals so a reader
   can scan down a column and see the magnitude change without reading. */

.dp-num-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.dp-num-t {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.dp-num-t caption {
  caption-side: top;
  text-align: left;
  padding: 12px 16px 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
}

.dp-num-t th,
.dp-num-t td {
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.dp-num-t thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

.dp-num-t tbody th {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}

.dp-num-t .is-n {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  white-space: nowrap;
}

.dp-num-t tbody tr:last-child th,
.dp-num-t tbody tr:last-child td {
  border-bottom: 0;
}

.dp-num-n {
  margin-top: 12px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-3);
  text-wrap: pretty;
}

@media (max-width: 620px) {

  .dp-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .dp-why {
    padding-left: 14px;
  }
}

/* ---- inline maths ----------------------------------------------------
   TD.math() converts $…$ LaTeX into these elements. No external font or
   script is loaded: the glyphs are Unicode and the only real layout work
   is the stacked fraction. Maths sits inline in running prose, so it must
   not change the line height — hence the small fraction scale and the
   inline-flex that keeps the two halves inside one line box. */

.math {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.95em;
  font-style: italic;
  white-space: nowrap;
  color: inherit;
}

/* Operators, function names and \text spans read upright — italicising them
   is the usual giveaway that maths was typeset by something that did not
   know the difference between a variable and a word. */
.math .mop,
.math .mtxt {
  font-style: normal;
}

.math .mtxt {
  font-family: var(--font-body, inherit);
  font-size: 1.02em;
}

/* \mathcal and \mathbb — script and blackboard-bold sets. Without the real
   glyphs, a slightly heavier upright letter still reads as "this is a named
   set or class" rather than a plain variable. */
.math .mcal {
  font-style: normal;
  font-weight: 600;
}

/* Stacked fraction. inline-flex with a middle baseline keeps it from
   pushing the surrounding line apart. */
.math .mf {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  text-align: center;
  font-size: 0.85em;
  line-height: 1.1;
  margin: 0 0.15em;
}

.math .mf-n {
  border-bottom: 1px solid currentColor;
  padding: 0 0.25em 0.05em;
}

.math .mf-d {
  padding: 0.05em 0.25em 0;
}

/* The radicand needs an overbar to show what the root covers. */
.math .msqrt {
  border-top: 1px solid currentColor;
  padding: 0 0.15em;
}

.math sup,
.math sub {
  font-size: 0.75em;
  font-style: normal;
  line-height: 0;
}

/* Maths inside a table cell may be the longest thing in the column, and
   nowrap would otherwise force the whole table wide. */
.dp-num td .math,
.dp-num th .math {
  white-space: normal;
}

/* Display maths sits on its own line, centred, with room to breathe — the
   formulas that use it are the ones worth pausing on. */
.math-block {
  display: block;
  margin: 14px auto;
  text-align: center;
  font-size: 1.05em;
  white-space: normal;
  overflow-x: auto;
  max-width: 100%;
}

.math code {
  font-style: normal;
  font-size: 0.95em;
}

/* ---- heading weight ceiling -----------------------------------------
   Newsreader is a variable font whose weight axis stops at 600. Asking for
   700 or 800 does not select a heavier cut — there isn't one — so the
   browser synthesises it by smearing the glyphs, which is what made the
   headings look heavy and muddy rather than confident.

   Anything using the heading serif is clamped to 600 here. Hierarchy comes
   from size, colour and space; it never needed the extra weight. */
h1, h2, h3, h4, h5, h6,
.brand-text, .cat-name, .art-title, .sheet-title,
.sec-h, .dp-h, .ln-h, .card-title {
  font-weight: 600;
  /* never let the browser fake a weight the font does not have */
  font-synthesis-weight: none;
}

/* Body copy keeps real bold: the body sans has a genuine 700. */
strong, b {
  font-synthesis-weight: auto;
}

/* ==========================================================================
   Cross-References & Term Highlighter (.xref, .xref-peek, .xref-trail)
   Semantic dictionary term matching, reading trail, and live preview card.
   ========================================================================== */

/* The highlighted term inline anchor */
.xref {
  position: relative;
  display: inline;
  color: var(--text);
  text-decoration: none;
  background: color-mix(in srgb, var(--cat, var(--accent)) 16%, transparent);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 1px 4px 2px 4px;
  margin: 0 1px;
  border-radius: var(--r-xs, 4px);
  border-bottom: 1.5px solid color-mix(in srgb, var(--cat, var(--accent)) 65%, transparent);
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
  cursor: pointer;
  white-space: normal;
}

/* Micro-highlighter mark beside the term */
.xref::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 5px;
  height: 5px;
  margin-left: 3.5px;
  margin-bottom: 2px;
  border-radius: 50%;
  background: var(--cat, var(--accent));
  box-shadow: 0 0 6px color-mix(in srgb, var(--cat, var(--accent)) 85%, transparent);
  opacity: 0.85;
  transition: transform var(--t-fast) var(--ease-out),
              opacity var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}

/* Hover and focus-visible state */
.xref:hover,
.xref:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--cat, var(--accent)) 30%, transparent);
  border-bottom-color: var(--cat, var(--accent));
  box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--cat, var(--accent)) 40%, transparent);
  outline: none;
}

.xref:hover::after,
.xref:focus-visible::after {
  transform: scale(1.4);
  opacity: 1;
  box-shadow: 0 0 10px var(--cat, var(--accent));
}

/* Previously read / seen terms: softer styling so fresh terms stand out */
.xref.is-read {
  background: transparent;
  border-bottom: 1px dashed color-mix(in srgb, var(--cat, var(--accent)) 45%, transparent);
  padding: 0 2px;
}

.xref.is-read::after {
  opacity: 0.35;
  box-shadow: none;
  transform: scale(0.8);
}

.xref.is-read:hover,
.xref.is-read:focus-visible {
  background: color-mix(in srgb, var(--cat, var(--accent)) 16%, transparent);
  border-bottom-style: solid;
  border-bottom-color: var(--cat, var(--accent));
}

.xref.is-read:hover::after,
.xref.is-read:focus-visible::after {
  opacity: 0.9;
  transform: scale(1.2);
  box-shadow: 0 0 8px var(--cat, var(--accent));
}

/* Live term peek card */
.xref-peek {
  position: fixed;
  z-index: var(--z-toast, 200);
  width: 330px;
  max-width: calc(100vw - 28px);
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md, 12px);
  box-shadow: var(--shadow-3, 0 18px 45px rgba(0, 0, 0, 0.45));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px) scale(0.98);
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.xref-peek.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.xref-peek-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
}

.xref-peek-cat {
  font-family: var(--font-body);
  font-size: var(--fs-xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cat, var(--accent));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xref-peek-state {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 1px 7px;
  border-radius: var(--r-pill, 999px);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  white-space: nowrap;
}

.xref-peek-state.is-read {
  background: var(--surface-2);
  color: var(--text-3);
  border-color: var(--border);
}

.xref-peek-title {
  margin: 0 0 6px;
  font-family: var(--font-head);
  font-size: var(--fs-lg, 1.15rem);
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}

.xref-peek-abbr {
  display: inline-block;
  margin-left: 6px;
  font-size: var(--fs-sm, 0.8125rem);
  font-family: var(--font-mono);
  color: var(--text-3);
  font-weight: 400;
}

.xref-peek-def {
  margin: 0 0 12px;
  font-size: var(--fs-sm, 0.8125rem);
  line-height: 1.55;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.xref-peek-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs, 0.75rem);
  font-weight: 600;
  color: var(--cat, var(--accent));
  text-decoration: none;
  border-radius: var(--r-xs, 6px);
  padding: 6px 12px;
  background: color-mix(in srgb, var(--cat, var(--accent)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--cat, var(--accent)) 30%, transparent);
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}

.xref-peek-open svg {
  width: 13px;
  height: 13px;
  transition: transform var(--t-fast) var(--ease-out);
}

.xref-peek-open:hover {
  background: var(--cat, var(--accent));
  color: var(--text-inv, #ffffff);
  border-color: var(--cat, var(--accent));
}

.xref-peek-open:hover svg {
  transform: translateX(3px);
}

.xref-peek-hint {
  margin: 8px 0 0;
  font-size: 0.72rem;
  color: var(--text-3);
  font-style: italic;
}

/* Reading trail banner */
.xref-trail {
  position: sticky;
  top: calc(var(--topbar-h, 62px) + 8px);
  z-index: 25;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 9px 15px;
  margin-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-left: 3.5px solid var(--accent);
  border-radius: var(--r-sm, 9px);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: xrefSlideDown 200ms var(--ease-out);
}

@keyframes xrefSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.xref-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm, 0.8125rem);
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--t-fast) var(--ease-out);
}

.xref-back svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  transition: transform var(--t-fast) var(--ease-out);
}

.xref-back strong {
  color: var(--accent);
  font-weight: 650;
}

.xref-back:hover {
  color: var(--accent);
}

.xref-back:hover svg {
  transform: translateX(-3px);
}

.xref-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs, 0.75rem);
  color: var(--text-3);
  margin-left: auto;
}

.xref-crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.xref-crumbs li:not(:last-child)::after {
  content: "→";
  color: var(--text-3);
  opacity: 0.6;
}

.xref-crumbs a {
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--t-fast);
}

.xref-crumbs a:hover {
  color: var(--text);
}

@media (max-width: 640px) {
  .xref-crumbs {
    display: none;
  }
}