/* ============================================================================
   The ARC-AGI Atlas — "16-Bit Field Guide" design system.
   A research field guide wearing SNES/RPG pixel-game grammar: warm cream paper,
   plum + coral + gold + teal, chunky ink rules, hard offset print-shadows,
   double-line dialog-box frames, pixel dot / grid / checker chapter textures,
   and drifting ARC cells. Display type in Pixelify Sans; body & data in DM Mono.
   The theme accent palette (--t-*) is semantic and kept exactly — it color-codes
   the 8 currents across the catalog, timeline, constellation and charts.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- 16-Bit Field Guide palette (E0) --- */
  --paper:   #f6ecd2;   /* warm cream ground */
  --paper-2: #efe0be;   /* deeper cream — panels / bands */
  --paper-3: #fff8e8;   /* near-white warm — fills, inputs */
  --ink:     #3a2b46;   /* dark plum-brown — text, rules, shadows */
  --ink-70: rgba(58, 43, 70, 0.74);
  --ink-45: rgba(58, 43, 70, 0.48);
  --ink-20: rgba(58, 43, 70, 0.20);
  --ink-12: rgba(58, 43, 70, 0.12);

  /* accent roles (names kept for legacy markup; values retuned to E0) */
  --yellow:    #e3a72f;   /* gold  — highlights, active state, badges */
  --teal:      #2f9e8f;   /* teal  — cool accent */
  --orange:    #e0955a;   /* warm ochre */
  --sky:       #5b93c9;   /* soft blue */
  --violet:    #8a4a7d;   /* plum  — Part II, title bands, CTAs */
  --raspberry: #e2714f;   /* coral — emphasis, the "em" color */

  /* --- semantic theme accents (UNCHANGED — the 8 currents) --- */
  --t-benchmark:   #e8456b;
  --t-agentic:     #7b5cf0;
  --t-synthesis:   #2f8fd8;
  --t-test-time:   #ef7d3f;
  --t-neural:      #17a698;
  --t-milestone:   #e0a20c;
  --t-foundations: #b0567f;
  --t-critique:    #5f7488;

  /* --- pixel geometry --- */
  --rule:   3px solid var(--ink);
  --rule-2: 2px solid var(--ink);
  --shadow:      6px 6px 0 rgba(58, 43, 70, 0.22);   /* big print shadow */
  --shadow-6:    5px 5px 0 rgba(58, 43, 70, 0.20);
  --shadow-sm:   4px 4px 0 rgba(58, 43, 70, 0.16);
  --shadow-hard: 3px 3px 0 var(--ink);                /* crisp chip / badge */
  --radius: 0;        /* sharp pixel corners everywhere */
  --radius-sm: 0;

  /* --- type --- */
  --serif: "Pixelify Sans", "Trebuchet MS", system-ui, sans-serif;   /* pixel display — short labels/badges/chrome only */
  --display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif; /* readable display — long titles & headings */
  --sans:  "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;     /* body/labels */
  --mono:  "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;     /* data */

  --wrap: 1180px;

  /* pixel dot texture, reused by chapter washes */
  --dots: radial-gradient(var(--ink-12) 1.5px, transparent 1.7px);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  background-image: var(--dots);
  background-size: 15px 15px;
  background-attachment: fixed;
}

img, canvas { display: block; max-width: 100%; }
img, canvas, .arc-cell { image-rendering: pixelated; }

h1, h2, h3, h4, p { margin: 0; }
/* Reading-length titles use the legible display face; pixel type is reserved for
   short labels, badges and chrome (re-asserted with --serif where needed). */
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.08; text-wrap: balance; letter-spacing: -0.015em; }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; cursor: pointer; }
em { font-style: normal; color: var(--raspberry); font-weight: 500; }
strong { font-weight: 500; color: var(--ink); }
code { font-family: var(--mono); font-size: 0.92em; background: var(--paper-2); border: 2px solid var(--ink-20); padding: 0 0.28em; }

::selection { background: var(--yellow); color: var(--ink); }

.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }

.skip-link {
  position: fixed; top: 0.7rem; left: 0.7rem; z-index: 300;
  padding: 0.7rem 1rem; border: var(--rule); background: var(--yellow); color: var(--ink);
  text-decoration: none; font-weight: 600; box-shadow: var(--shadow-hard);
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* --- shared double-line dialog-box frame (the SNES panel signature) --- */
.plate, .card, .stat-card, .gap-card, .legend-card, .lb-card, .path-card,
.fam, .axis, .synthesis, .q, .q-foot, .sol, .constel-box, .bridge {
  position: relative;
}
.plate::after, .card::after, .stat-card::after, .gap-card::after,
.legend-card::after, .lb-card::after, .path-card::after, .fam::after,
.axis::after, .synthesis::after, .q::after, .q-foot::after, .sol::after,
.constel-box::after, .bridge::after {
  content: ""; position: absolute; inset: 4px;
  border: 2px solid var(--ink-12); pointer-events: none; z-index: 0;
}
.card > *, .plate > *, .stat-card > *, .gap-card > *, .legend-card > *,
.lb-card > *, .path-card > *, .fam > *, .axis > *, .synthesis > *,
.q > *, .q-foot > *, .sol > *, .constel-box > *, .bridge > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- eyebrow / tickets */
.eyebrow {
  display: table; margin: 0 0 1.1rem; padding: 0.42rem 0.7rem;
  border: var(--rule-2); background: var(--yellow); color: var(--ink);
  box-shadow: var(--shadow-hard);
  font-family: var(--serif); font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.eyebrow.plain { background: var(--paper-3); box-shadow: 3px 3px 0 var(--raspberry); }

.plate-title { font-size: clamp(1.9rem, 4.4vw, 3rem); margin-bottom: 0.7rem; line-height: 1.05; }
.plate-title .em { color: var(--raspberry); }
.plate-lede { max-width: 64ch; font-size: 1rem; color: var(--ink-70); }

/* ================================================================ TOPBAR */
.topbar {
  position: sticky; top: 0; z-index: 200;
  background: var(--paper-2);
  border-bottom: var(--rule);
  box-shadow: 0 3px 0 var(--ink-20);
}
.topbar-in {
  width: min(100% - 2.4rem, 1320px); margin-inline: auto;
  display: flex; align-items: center; gap: 1rem;
  min-height: 4.3rem; padding: 0.6rem 0;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.34rem 0.62rem; border: var(--rule-2); background: var(--paper-3);
  box-shadow: var(--shadow-hard); text-decoration: none;
  font-family: var(--serif); font-weight: 700; font-size: 1.1rem; white-space: nowrap;
}
.brand .glyph {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem;
  background: var(--ink); color: var(--yellow); border: 2px solid var(--ink);
  font-family: var(--serif); font-size: 0.95rem; font-weight: 700;
}
.brand b { color: var(--raspberry); }

.topnav {
  display: flex; gap: 0.15rem; margin-left: auto; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.topnav::-webkit-scrollbar { display: none; }
.topnav a {
  padding: 0.4rem 0.62rem; border: 2px solid transparent;
  text-decoration: none; white-space: nowrap;
  font-family: var(--serif); font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ink-70); transition: transform 0.12s ease;
}
.topnav a:hover, .topnav a:focus-visible {
  border-color: var(--ink); background: var(--paper-3); color: var(--ink);
  box-shadow: 3px 3px 0 var(--raspberry);
}
.topnav a.current {
  border-color: var(--ink); background: var(--paper-3); color: var(--ink);
  box-shadow: var(--shadow-hard);
}
.scrollprog { height: 4px; background: var(--ink-12); }
.scrollprog i { display: block; height: 100%; width: 0; background: var(--raspberry); }

/* ================================================================ HERO */
.hero {
  position: relative; overflow: hidden;
  border-bottom: var(--rule);
  background-color: var(--paper);
  background-image: var(--dots);
  background-size: 22px 22px;
  padding: clamp(2.4rem, 6vw, 5rem) 0 clamp(2.6rem, 6vw, 4.4rem);
}
.hero::before, .hero::after {
  content: ""; position: absolute; border: var(--rule);
  pointer-events: none; z-index: 0;
}
.hero::before { top: 9%; right: -6%; width: 26vw; height: 26vw; background: var(--sky); opacity: 0.20; transform: rotate(8deg); }
.hero::after { bottom: -10%; left: -7%; width: 20vw; height: 20vw; background: var(--yellow); opacity: 0.30; transform: rotate(-8deg); }
#arcfield { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero-in { position: relative; z-index: 1; }

/* Solid dialog-box panel that lifts the title + subtitle clear of the drifting
   ARC cells and rotated pixel squares behind them — keeps them fully legible. */
.hero-plate {
  position: relative; display: inline-block;
  max-width: min(100%, 46rem);
  margin-bottom: 2.2rem;
  padding: clamp(1.4rem, 3.2vw, 2.1rem) clamp(1.4rem, 3.4vw, 2.3rem);
  border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow);
}
.hero-plate::after {
  content: ""; position: absolute; inset: 5px;
  border: 2px solid var(--ink-12); pointer-events: none; z-index: 0;
}
.hero-plate > * { position: relative; z-index: 1; }
.hero-plate .hero-sub { margin-top: 1.2rem; }

.hero-kicker {
  display: inline-block; margin-bottom: 1.3rem; padding: 0.42rem 0.75rem;
  border: var(--rule-2); background: var(--ink); color: var(--yellow);
  box-shadow: 4px 4px 0 var(--raspberry);
  font-family: var(--serif); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.hero h1 {
  font-size: clamp(2.4rem, 6.2vw, 4.6rem); line-height: 1.02; max-width: 16ch;
  text-shadow: 2px 2px 0 rgba(58, 43, 70, 0.12);
}
.hero h1 .em { color: var(--raspberry); }
.hero h1 .hl {
  color: var(--ink); background: var(--yellow); box-shadow: 0 0 0 3px var(--yellow);
}
.hero-sub {
  margin-top: 1.5rem; max-width: 62ch; font-size: 1.04rem; color: var(--ink-70);
}
.hero-sub b { color: var(--ink); }

.hero-stats { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; }
.hstat {
  min-width: 8.5rem; flex: 1 1 8.5rem;
  padding: 0.8rem 1rem; border: var(--rule); background: var(--paper-3);
  box-shadow: var(--shadow-sm);
}
.hstat:nth-child(1) { background: #fde3d6; }
.hstat:nth-child(2) { background: #faeecb; }
.hstat:nth-child(3) { background: #d7f0ea; }
.hstat:nth-child(4) { background: #e4ecf7; }
.hstat .n { font-family: var(--serif); font-weight: 700; font-size: 1.9rem; line-height: 1; }
.hstat .n b { color: var(--raspberry); font-weight: 700; }
.hstat .l {
  margin-top: 0.4rem; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-70); font-weight: 500;
}

/* ================================================================ SECTION shells */
section { padding: clamp(3rem, 7vw, 5.4rem) 0; border-bottom: var(--rule); position: relative; }
section > .wrap { position: relative; z-index: 1; }

/* chapter grounds — soft tints of the palette + pixel textures */
.page-paper  { background: var(--paper); background-image: var(--dots); background-size: 15px 15px; }
.page-grid   { background-color: var(--paper);
  background-image: linear-gradient(var(--ink-12) 1px, transparent 1px), linear-gradient(90deg, var(--ink-12) 1px, transparent 1px);
  background-size: 30px 30px; }
.page-teal   { background-color: #d9f0ea;
  background-image: repeating-conic-gradient(rgba(47,158,143,.16) 0 25%, transparent 0 50%);
  background-size: 30px 30px; }
.page-violet { background-color: #ece0ec;
  background-image: radial-gradient(rgba(138,74,125,.20) 1.6px, transparent 1.8px); background-size: 22px 22px; }
.page-orange { background-color: #fbe2d3;
  background-image: radial-gradient(rgba(58,43,70,.12) 1.5px, transparent 1.6px); background-size: 20px 20px; }
.page-sky    { background-color: #e0ecf7;
  background-image: radial-gradient(rgba(91,147,201,.22) 1.8px, transparent 2px); background-size: 26px 26px; }
.page-yellow { background-color: #f6ecc7;
  background-image: linear-gradient(var(--ink-12) 1px, transparent 1px), linear-gradient(90deg, var(--ink-12) 1px, transparent 1px);
  background-size: 28px 28px; }

.section-head { margin-bottom: 2rem; }

/* a "plate" card that floats charts/tables above a chapter ground */
.plate { border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow); padding: clamp(1.2rem, 3vw, 2rem); }

/* ================================================================ THESIS */
.thesis-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 2rem; align-items: start; }
.thesis-body .lead { font-size: 1.24rem; font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 1.1rem; }
.thesis-body p { margin-bottom: 1rem; color: var(--ink-70); }
.thesis-body p:last-child { margin-bottom: 0; }

.legend-card {
  border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow);
  padding: 1.2rem 1.3rem; position: sticky; top: 6rem;
}
.legend-card h4 {
  font-family: var(--serif); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 0.9rem;
}
.legend-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.6rem; align-items: center;
  padding: 0.5rem 0; border-top: 2px solid var(--ink-12);
}
.legend-row:first-of-type { border-top: 0; }
.legend-row .dot { width: 0.9rem; height: 0.9rem; border: 2px solid var(--ink); }
.legend-row .name { display: block; font-weight: 500; font-size: 0.9rem; color: var(--ink); }
.legend-row .desc { display: block; font-size: 0.74rem; color: var(--ink-45); line-height: 1.35; }
.legend-row .cnt {
  font-family: var(--serif); font-weight: 700; font-size: 0.9rem;
  min-width: 1.7rem; text-align: center; padding: 0.1rem 0.35rem;
  border: 2px solid var(--ink); background: var(--paper-3);
}

/* ================================================================ TIMELINE */
.scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; }
.timeline-wrap { min-width: 760px; }
svg.plot { width: 100%; height: auto; display: block; }
.tl-era { fill: var(--ink); opacity: 0.05; }
.tl-era-label, .tl-lane-label {
  font-family: var(--serif); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.tl-era-label { font-size: 11px; fill: var(--ink-45); }
.tl-lane-label { font-size: 11.5px; }
.tl-lane-line { stroke: var(--ink-12); stroke-width: 1; }
.tl-axis { stroke: var(--ink); stroke-width: 1.5; }
.tl-tick { font-family: var(--mono); font-size: 11px; fill: var(--ink-70); }
.node, .cnode, .scatter-dot { cursor: pointer; }
.node circle { transition: transform 0.12s ease; }
.node:hover circle:first-child, .scatter-dot:hover circle { stroke: var(--ink); stroke-width: 2.5; }
.node.dim, .cnode.dim, .scatter-dot.dim { opacity: 0.16; }

/* ================================================================ CONSTELLATION */
.constel-shell { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1.6rem; align-items: center; }
.constel-box {
  border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow); padding: 0.5rem;
  background-image: var(--dots); background-size: 20px 20px;
}
#constel { width: 100%; height: auto; display: block; }
.edge { stroke: var(--ink-20); stroke-width: 1; transition: stroke 0.14s ease, stroke-width 0.14s ease; }
.edge.lit { stroke: var(--raspberry); stroke-width: 2.4; }
.cnode circle { stroke: var(--paper-3); stroke-width: 1.5; transition: transform 0.12s ease; }
.cnode.active circle { stroke: var(--ink); stroke-width: 2.5; }
.constel-center { font-family: var(--serif); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; fill: var(--ink-70); }
.constel-note h3 { font-size: 1.6rem; margin-bottom: 0.8rem; }
.constel-note p { color: var(--ink-70); margin-bottom: 0.9rem; }
.constel-hint {
  display: inline-block; margin-top: 0.4rem; padding: 0.5rem 0.75rem;
  border: var(--rule-2); background: var(--yellow); box-shadow: var(--shadow-sm); font-size: 0.78rem;
}
.constel-hint .k { font-family: var(--serif); font-weight: 700; }

/* ================================================================ THE GAP (benchmark) */
.gap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.gap-card { border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow); padding: 1.3rem 1.4rem; }
.gap-card h4 { font-family: var(--display); font-weight: 800; letter-spacing: -0.015em; font-size: 1.3rem; margin-bottom: 0.2rem; }
.gap-card .sub { font-size: 0.8rem; color: var(--ink-45); margin-bottom: 1.1rem; }
.dumbbell { display: grid; gap: 1.1rem; }
.db-row { display: grid; grid-template-columns: 5.4rem 1fr; gap: 0.7rem; align-items: center; }
.db-row .db-label { font-weight: 500; font-size: 0.9rem; }
.db-row .db-label small { display: block; font-family: var(--mono); font-size: 0.62rem; color: var(--ink-45); letter-spacing: 0.02em; }
.db-track {
  position: relative; height: 3rem; border: 2px solid var(--ink);
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--ink-12) calc(10% - 1px) 10%);
}
.db-fill-ai { position: absolute; top: 0; bottom: 0; left: 0; background: color-mix(in srgb, var(--raspberry) 40%, var(--paper-3)); }
.db-gap { position: absolute; top: 0; bottom: 0; background-image: repeating-linear-gradient(45deg, var(--ink-12) 0 3px, transparent 3px 7px); border-left: 2px dashed var(--ink-45); }
.db-mark {
  position: absolute; transform: translateX(-50%);
  display: grid; place-items: center; height: 1.4rem; padding: 0 0.4rem;
  border: 2px solid var(--ink);
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500; white-space: nowrap; z-index: 2;
}
.db-mark.human { top: 3px; background: var(--teal); }
.db-mark.ai { bottom: 3px; background: var(--raspberry); color: var(--paper); }
.gap-legend { display: flex; gap: 1.1rem; margin-top: 1.2rem; font-size: 0.76rem; flex-wrap: wrap; }
.gap-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.gap-legend i { width: 0.85rem; height: 0.85rem; border: 2px solid var(--ink); }
.gap-legend i.h { background: var(--teal); }
.gap-legend i.a { background: var(--raspberry); }

/* SOTA climb chart */
.sota-note { font-size: 0.8rem; color: var(--ink-45); margin-bottom: 1.1rem; }
#sotaSvg { width: 100%; height: auto; display: block; }
.sota-line { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.sota-area { fill: color-mix(in srgb, var(--yellow) 42%, transparent); }
.sota-dot { fill: var(--raspberry); stroke: var(--ink); stroke-width: 2; }
.sota-label { font-family: var(--mono); font-size: 10px; fill: var(--ink); font-weight: 500; }
.sota-val { font-family: var(--serif); font-size: 12px; font-weight: 700; fill: var(--ink); }
.ax-grid { stroke: var(--ink-12); stroke-width: 1; }
.ax-tick { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-70); }
.ax-caption { font-family: var(--serif); font-weight: 600; font-size: 10px; fill: var(--ink-45); text-transform: uppercase; letter-spacing: 0.08em; }

/* ================================================================ CATALOG */
.cat-toolbar { position: sticky; top: 4.7rem; z-index: 120; margin: 0 0 1.8rem; }
.cat-toolbar-in { border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow-6); padding: 0.85rem 1rem; display: grid; gap: 0.7rem; }
.tb-line { display: flex; flex-wrap: wrap; gap: 0.7rem 1.1rem; align-items: center; }
.tb-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.tb-label {
  font-family: var(--serif); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-45); margin-right: 0.1rem;
}
.segmented { display: inline-flex; border: 2px solid var(--ink); overflow: hidden; box-shadow: var(--shadow-sm); }
.segmented button {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.34rem 0.7rem;
  background: var(--paper-3); border: 0; border-right: 2px solid var(--ink);
  font-family: var(--serif); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em;
}
.segmented button:last-child { border-right: 0; }
.segmented button .rdot { width: 0.5rem; height: 0.5rem; border: 2px solid var(--ink); background: transparent; }
.segmented button[aria-pressed="true"] { background: var(--yellow); }
.segmented button[aria-pressed="true"] .rdot { background: var(--ink); }

.fbtn, .sbtn {
  padding: 0.32rem 0.6rem; border: 2px solid var(--ink); background: var(--paper-3);
  font-family: var(--serif); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em;
  display: inline-flex; align-items: center; gap: 0.35rem; transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.fbtn:hover, .sbtn:hover { box-shadow: var(--shadow-hard); transform: translate(-1px, -1px); }
.fbtn.active, .sbtn.active { background: var(--yellow); box-shadow: var(--shadow-hard); }
.fbtn .fdot { width: 0.65rem; height: 0.65rem; border: 2px solid var(--ink); background: var(--fc, var(--ink)); }
.match-count { margin-left: auto; font-family: var(--mono); font-size: 0.78rem; color: var(--ink-70); }
.match-count b { color: var(--ink); }

/* catalog list */
.catalog { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.card {
  position: relative; overflow: hidden;
  border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow-6);
  padding: 1.15rem 1.2rem 1.2rem 1.5rem;
  transition: box-shadow 0.14s ease, transform 0.14s ease;
}
.card:hover { box-shadow: var(--shadow); transform: translate(-2px, -2px); }
.card.hidden { display: none; }
.card.flash { animation: flash 1.1s ease; }
@keyframes flash { 0%, 100% { box-shadow: var(--shadow-6); } 25% { box-shadow: 0 0 0 4px var(--paper-3), 0 0 0 8px var(--paper-c, var(--raspberry)), var(--shadow); } }
.card-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--paper-c, var(--ink)); border-right: 2px solid var(--ink); z-index: 2; }
.card-head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.55rem; }
.cat-no {
  font-family: var(--serif); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 0.12rem 0.42rem; border: 2px solid var(--ink); background: var(--paper-c, var(--ink)); color: var(--paper);
}
.card-type {
  font-family: var(--serif); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-45);
}
.card-year { margin-left: auto; font-family: var(--serif); font-size: 0.9rem; font-weight: 700; }
.card-stamp {
  position: absolute; top: 0.8rem; right: 0.9rem; transform: rotate(4deg);
  font-family: var(--serif); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.2rem 0.4rem; border: 2px dashed var(--ink); color: var(--ink-70);
  pointer-events: none; max-width: 42%; text-align: center; line-height: 1.2;
}
.card-title { font-size: 1.3rem; line-height: 1.14; margin-bottom: 0.3rem; padding-right: 3.4rem; }
.card-authors { font-size: 0.78rem; color: var(--ink-45); margin-bottom: 0.7rem; }
.card-authors .venue { color: var(--ink-70); }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.8rem; align-items: center; }
.theme-chip {
  font-family: var(--serif); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 0.12rem 0.44rem; border: 2px solid var(--ink);
  background: color-mix(in srgb, var(--chip-c, var(--ink)) 26%, var(--paper-3));
}
.infl-chip { margin-left: auto; font-family: var(--serif); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-45); display: inline-flex; align-items: center; gap: 0.3rem; }
.infl-chip .pips span { color: var(--paper-c, var(--raspberry)); font-size: 0.72rem; }
.infl-chip .pips span.off { color: var(--ink-20); }

.sum { font-size: 0.95rem; }
.sum-glance { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; font-size: 1.1rem; line-height: 1.4; color: var(--ink); }
.sum-core { color: var(--ink-70); line-height: 1.6; }
.sum-deep { color: var(--ink-70); line-height: 1.65; }
.sum-deep p { margin-bottom: 0.7rem; }
.sum-deep p:last-child { margin-bottom: 0; }
.catalog[data-res="glance"] .sum-core, .catalog[data-res="glance"] .sum-deep,
.catalog[data-res="glance"] .key-ideas, .catalog[data-res="glance"] .metrics,
.catalog[data-res="core"] .sum-glance, .catalog[data-res="core"] .sum-deep,
.catalog[data-res="deep"] .sum-glance, .catalog[data-res="deep"] .sum-core { display: none; }

.metrics { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.metric { display: grid; gap: 0.05rem; padding: 0.35rem 0.55rem; border: 2px solid var(--ink); background: var(--paper); box-shadow: var(--shadow-hard); }
.metric .mv { font-family: var(--serif); font-weight: 700; font-size: 0.95rem; line-height: 1; }
.metric .ml { font-family: var(--serif); font-weight: 600; font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-45); }

.key-ideas { list-style: none; margin: 0.95rem 0 0; padding: 0.85rem 0.9rem; border: 2px dashed var(--ink); background: var(--paper-2); }
.ki-label, .why-label { display: block; font-family: var(--serif); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-45); margin-bottom: 0.5rem; }
.key-ideas li { position: relative; padding-left: 1.1rem; margin-bottom: 0.4rem; font-size: 0.85rem; line-height: 1.45; }
.key-ideas li:last-child { margin-bottom: 0; }
.key-ideas li::before { content: "▪"; position: absolute; left: 0; color: var(--paper-c, var(--raspberry)); font-size: 0.8rem; }

.why { margin-top: 0.9rem; padding: 0.75rem 0.85rem; border-left: 5px solid var(--paper-c, var(--raspberry)); background: color-mix(in srgb, var(--paper-c, var(--raspberry)) 9%, var(--paper-3)); font-size: 0.86rem; line-height: 1.5; }
.catalog[data-res="glance"] .why { display: none; }

.conns { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.95rem; }
.conn-chip {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.5rem;
  border: 2px solid var(--ink); background: var(--paper-3);
  font-size: 0.72rem; text-align: left; transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.conn-chip:hover { box-shadow: var(--shadow-hard); transform: translate(-1px, -1px); background: var(--yellow); }
.conn-chip .cn { font-family: var(--serif); font-size: 0.62rem; font-weight: 700; padding: 0.05rem 0.25rem; border: 2px solid var(--ink); }
.catalog[data-res="glance"] .conns { display: none; }

.card-link {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem;
  padding: 0.5rem 0.8rem; border: var(--rule-2); background: var(--paper-c, var(--ink)); color: var(--paper);
  text-decoration: none; font-family: var(--serif); font-weight: 600; font-size: 0.84rem; box-shadow: var(--shadow-sm);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.card-link:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.card-link .arr { font-family: var(--mono); }

/* ================================================================ NUMBERS */
.viz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-bottom: 1.4rem; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.stat-card { border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow); padding: 1.1rem 1.2rem; }
.stat-card h4 { font-family: var(--display); font-weight: 800; letter-spacing: -0.015em; font-size: 1.22rem; margin-bottom: 0.2rem; }
.stat-card .sub { font-size: 0.76rem; color: var(--ink-45); margin-bottom: 1rem; }
.plot-svg { width: 100%; height: auto; display: block; }

.bar-row { display: grid; grid-template-columns: 6.5rem 1fr 2rem; gap: 0.55rem; align-items: center; margin-bottom: 0.5rem; }
.bar-row .bl { font-size: 0.78rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 0.9rem; border: 2px solid var(--ink); background: var(--paper); overflow: hidden; }
.bar-fill { height: 100%; border-right: 2px solid var(--ink); }
.bar-row .bv { font-family: var(--serif); font-size: 0.82rem; font-weight: 700; text-align: right; }
.hub-row { text-decoration: none; grid-template-columns: 3rem 1fr 1.6rem; }
.hub-row .hno { font-family: var(--serif); font-size: 0.72rem; font-weight: 700; }
.curator-note { margin-top: 0.8rem; font-size: 0.76rem; color: var(--ink-45); }

.yearchart { display: flex; align-items: flex-end; gap: 3px; height: 130px; padding-top: 1rem; }
.ybar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; }
.ybar .yn { font-family: var(--serif); font-size: 0.66rem; font-weight: 700; color: var(--ink-70); }
.ybar .yb { width: 100%; min-height: 2px; background: var(--sky); border: 2px solid var(--ink); border-bottom: 0; }
.ybar.peak .yb { background: var(--raspberry); }
.ybar .yl { font-family: var(--mono); font-size: 0.55rem; color: var(--ink-45); }

.mini-stats { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; }
.mini-stats .hstat { min-width: 0; flex: 0 0 auto; border: 0; background: transparent; box-shadow: none; padding: 0; }
.mini-stats .hstat .n { font-size: 1.7rem; }

/* ================================================================ CHRONICLE */
.chronicle { border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow); overflow: hidden; }
.chron-head, .chron-row { display: grid; grid-template-columns: 3.6rem 3.2rem 1fr 8rem 6rem; gap: 0.6rem; align-items: center; padding: 0.6rem 1rem; }
.chron-head { background: var(--ink); color: var(--paper); font-family: var(--serif); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.chron-row { border-top: 2px solid var(--ink-12); text-decoration: none; transition: background 0.1s ease; }
.chron-row:hover { background: var(--yellow); }
.chron-rank { font-family: var(--serif); font-weight: 700; font-size: 0.9rem; }
.chron-rank .catno { display: block; font-size: 0.55rem; color: var(--ink-45); font-weight: 500; }
.chron-year { font-family: var(--serif); font-weight: 700; }
.chron-title { font-weight: 500; font-size: 0.95rem; display: block; line-height: 1.2; color: var(--ink); }
.chron-auth { font-size: 0.7rem; color: var(--ink-45); }
.chron-theme { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; }
.chron-theme .cdot { width: 0.75rem; height: 0.75rem; border: 2px solid var(--ink); }
.chron-infl { display: inline-flex; align-items: center; gap: 0.4rem; }
.chron-infl .track { width: 3.4rem; height: 0.6rem; border: 2px solid var(--ink); overflow: hidden; background: var(--paper); }
.chron-infl .fill { display: block; height: 100%; background: var(--milestone, var(--yellow)); }
.chron-infl .iv { font-family: var(--serif); font-size: 0.74rem; font-weight: 700; }

/* ================================================================ PATHS */
.paths { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.path-card { border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow); padding: 1.2rem 1.3rem; }
.path-card .ph { margin-bottom: 0.6rem; }
.path-card .pn {
  display: inline-block; font-family: var(--serif); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.22rem 0.5rem; border: 2px solid var(--ink); background: var(--path-c, var(--yellow)); box-shadow: var(--shadow-hard);
}
.path-card h3 { font-size: 1.4rem; margin-bottom: 0.4rem; }
.path-card .pd { font-size: 0.86rem; color: var(--ink-70); margin-bottom: 1rem; }
.path-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.path-steps li { position: relative; padding: 0.5rem 0 0.5rem 2.2rem; border-top: 2px dashed var(--ink-20); }
.path-steps li::before {
  counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0.5rem;
  width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
  border: 2px solid var(--ink); background: var(--step-c, var(--paper));
  font-family: var(--serif); font-size: 0.72rem; font-weight: 700;
}
.path-steps a { text-decoration: none; font-weight: 500; font-size: 0.92rem; display: block; color: var(--ink); }
.path-steps a:hover { color: var(--raspberry); }
.path-steps .pstep-meta { font-size: 0.68rem; color: var(--ink-45); font-family: var(--mono); }

/* ================================================================ FRONTIER (afterward) */
.frontier-list { display: grid; gap: 1rem; margin-top: 1.6rem; }
.frontier-row {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
  border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow-6); padding: 1rem 1.2rem;
}
.frontier-row .fq {
  font-family: var(--serif); font-weight: 700; font-size: 1.1rem;
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  border: 2px solid var(--ink); background: var(--violet); box-shadow: var(--shadow-hard);
}
.frontier-row h4 { font-family: var(--display); font-weight: 800; letter-spacing: -0.015em; font-size: 1.3rem; margin-bottom: 0.25rem; }
.frontier-row p { font-size: 0.9rem; color: var(--ink-70); }

/* ================================================================ FOOTER */
.foot { border-bottom: 0; background-color: #e0ecf7; background-image: radial-gradient(rgba(91,147,201,.22) 1.8px, transparent 2px); background-size: 26px 26px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; }
.fbrand { font-family: var(--serif); font-weight: 700; font-size: 1.7rem; margin-bottom: 0.6rem; }
.foot p { color: var(--ink-70); font-size: 0.9rem; margin-bottom: 0.8rem; }
.foot .disclaim { font-size: 0.78rem; color: var(--ink-45); }
.foot-note { font-family: var(--serif); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-70); margin-bottom: 0.9rem; }
.foot a { color: var(--ink); }
.foot-home {
  display: inline-block; margin-top: 0.4rem; padding: 0.55rem 0.8rem;
  border: var(--rule-2); background: var(--yellow); box-shadow: var(--shadow-sm);
  text-decoration: none; font-family: var(--serif); font-weight: 600; font-size: 0.84rem;
}

/* ================================================================ REVIEW
   The reader's channel back into the guide: a footer call-to-action band that
   opens a pixel dialog-box modal. Same SNES panel grammar as ARC Radio — double
   rule frame, hard offset print-shadow, Pixelify chrome, gold/plum/coral. No
   floating buttons; the only trigger is the footer CTA. */

/* ---- footer call-to-action band ---- */
.freview-wrap { margin-bottom: 2.1rem; }
.freview {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.1rem 1.4rem;
  padding: 1.1rem 1.3rem; border: var(--rule);
  background: var(--paper-3); box-shadow: var(--shadow-sm);
}
.freview::after { content: ""; position: absolute; inset: 4px; border: 2px solid var(--ink-12); pointer-events: none; }
.freview__lead { position: relative; z-index: 1; max-width: 60ch; }
.freview__kicker { font-family: var(--serif); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--raspberry); margin-bottom: 0.28rem; }
.freview__title { font-family: var(--display); font-weight: 800; font-size: 1.32rem; line-height: 1.1; margin-bottom: 0.34rem; letter-spacing: -0.01em; }
.freview__blurb { font-size: 0.86rem; color: var(--ink-70); margin: 0; }
.freview__cta {
  position: relative; z-index: 1; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.72rem 1.15rem; border: var(--rule);
  background: var(--violet); color: var(--paper); box-shadow: var(--shadow-hard);
  font-family: var(--serif); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em; text-transform: uppercase;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.freview__cta:hover { transform: translate(-1px, -2px); box-shadow: 5px 6px 0 var(--ink); }
.freview__cta:active { transform: translate(1px, 1px); box-shadow: var(--shadow-hard); }
.freview__cta-ico { font-size: 1.05rem; line-height: 1; }

/* ---- the modal shell (mirrors .soundtrack) ---- */
.review {
  width: min(560px, calc(100vw - 2rem)); max-height: min(88vh, 900px);
  padding: 0; border: var(--rule);
  background: var(--paper); color: var(--ink); box-shadow: 12px 12px 0 rgba(58,43,70,.4);
  overflow: hidden;
}
.review[open] { animation: review-in 0.18s ease-out both; }
.review::backdrop { background: rgba(58,43,70,.62); backdrop-filter: blur(4px); }
.review__form, .review__done { max-height: min(88vh, 900px); overflow-y: auto; }
.review__form { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem 1.3rem 1.4rem; }
/* class rules set display, so re-assert the hidden attribute at higher specificity */
.review__form[hidden], .review__done[hidden] { display: none; }
@keyframes review-in { from { opacity: 0; transform: translateY(12px); } }

.review__topline { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.review__kicker { font-family: var(--serif); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--raspberry); margin-bottom: 0.25rem; }
.review__title { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 5vw, 1.95rem); line-height: 1.04; letter-spacing: -0.015em; }
.review__close {
  flex: 0 0 auto; width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border: var(--rule-2); background: var(--raspberry); color: var(--paper);
  box-shadow: var(--shadow-hard); font-size: 1.4rem; line-height: 1;
  transition: transform 0.12s ease;
}
.review__close:hover { transform: translate(-1px, -1px); }
.review__intro { color: var(--ink-70); font-size: 0.88rem; line-height: 1.5; margin: 0; }

/* ---- fields ---- */
.review__field { min-width: 0; margin: 0; padding: 0; border: 0; }
.review__label { display: block; padding: 0; margin-bottom: 0.5rem; font-family: var(--serif); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.review__opt { font-family: var(--mono); font-size: 0.6rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-45); }

/* rating — a row of ARC cells that fill left-to-right */
.review__cells { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.review__cell {
  width: 2.4rem; height: 2.4rem; padding: 0; position: relative;
  border: var(--rule-2); background: var(--paper-3); box-shadow: 2px 2px 0 var(--ink-20);
  transition: transform 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
}
.review__cell::after { content: ""; position: absolute; inset: 3px; border: 2px solid transparent; }
.review__cell:hover { transform: translate(-1px, -1px); }
.review__cell.is-preview { background: color-mix(in srgb, var(--yellow) 52%, var(--paper-3)); }
.review__cell.is-on { background: var(--yellow); box-shadow: 2px 2px 0 var(--ink); }
.review__cell.is-on::after { border-color: rgba(58,43,70,.28); }
.review__rating-read { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; color: var(--ink-45); margin-left: 0.35rem; }

/* category chips */
.review__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.review__chip {
  padding: 0.42rem 0.72rem; border: var(--rule-2); background: var(--paper-3); box-shadow: 2px 2px 0 var(--ink-12);
  font-family: var(--serif); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em;
  transition: transform 0.1s ease, background 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
}
.review__chip:hover { transform: translate(-1px, -1px); background: var(--paper-2); }
.review__chip.is-on { background: var(--ink); color: var(--paper); box-shadow: 2px 2px 0 var(--raspberry); }

/* text inputs */
.review__textarea, .review__input {
  width: 100%; font-family: var(--mono); font-size: 0.9rem; color: var(--ink);
  padding: 0.65rem 0.7rem; border: var(--rule-2); background: var(--paper-3);
  box-shadow: inset 2px 2px 0 var(--ink-12);
}
.review__textarea { min-height: 6.4rem; line-height: 1.5; resize: vertical; }
.review__textarea:focus, .review__input:focus { outline: 3px solid var(--ink); outline-offset: 2px; background: #fffdf5; }
.review__textarea::placeholder, .review__input::placeholder { color: var(--ink-45); }
.review__field.is-invalid .review__textarea,
.review__field.is-invalid .review__input { border-color: var(--raspberry); box-shadow: inset 2px 2px 0 rgba(226,113,79,.25); }

/* errors */
.review__err { margin: 0.42rem 0 0; font-family: var(--mono); font-size: 0.72rem; color: var(--raspberry); }
.review__err--form { padding: 0.55rem 0.65rem; border: 2px solid var(--raspberry); background: color-mix(in srgb, var(--raspberry) 12%, var(--paper-3)); }
.review__err--form a { color: var(--ink); }

/* actions */
.review__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 1rem; margin-top: 0.15rem; }
.review__submit {
  padding: 0.72rem 1.3rem; border: var(--rule);
  background: var(--violet); color: var(--paper); box-shadow: var(--shadow-hard);
  font-family: var(--serif); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.03em; text-transform: uppercase;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.review__submit:hover { transform: translate(-1px, -2px); box-shadow: 5px 6px 0 var(--ink); }
.review__submit:active { transform: translate(1px, 1px); box-shadow: var(--shadow-hard); }
.review__submit[disabled] { opacity: 0.62; cursor: progress; transform: none; box-shadow: var(--shadow-hard); }
.review__privacy { margin: 0; font-family: var(--mono); font-size: 0.62rem; color: var(--ink-45); }
.review__gotcha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* success state */
.review__done { padding: 2rem 1.4rem 1.7rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.review__done-mark { display: grid; grid-template-columns: repeat(2, 1.15rem); gap: 3px; margin-bottom: 0.35rem; }
.review__done-mark i { width: 1.15rem; height: 1.15rem; border: 2px solid var(--ink); }
.review__done-mark i:nth-child(1) { background: var(--raspberry); }
.review__done-mark i:nth-child(2) { background: var(--violet); }
.review__done-mark i:nth-child(3) { background: var(--yellow); }
.review__done-mark i:nth-child(4) { background: var(--teal); }
.review__done .review__submit { margin-top: 0.5rem; background: var(--ink); }

@media (max-width: 560px) {
  .freview { flex-direction: column; align-items: flex-start; }
  .freview__cta { width: 100%; justify-content: center; }
  .review__cell { width: 2.15rem; height: 2.15rem; }
}

/* ================================================================ ARC RADIO */
.soundtrack-trigger {
  position: fixed; left: 1.3rem; bottom: 1.3rem; z-index: 180;
  display: flex; align-items: center; gap: 0.5rem;
  min-width: 12.5rem; padding: 0.5rem 0.6rem;
  border: var(--rule); background: var(--ink); color: var(--paper);
  box-shadow: var(--shadow-sm);
}
/* Dock play/pause toggle: gold square, CSS triangle that flips to pause bars. */
.soundtrack-trigger__toggle {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; cursor: pointer;
  border: 2px solid var(--paper); background: var(--yellow); color: var(--ink);
  transition: transform 0.12s ease, background 0.12s ease;
}
.soundtrack-trigger__toggle:hover { transform: translate(-1px, -1px); background: var(--paper); }
.soundtrack-trigger__toggle:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
.soundtrack-trigger__icon { position: relative; width: 14px; height: 14px; display: block; }
.soundtrack-trigger__icon::before {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
}
.soundtrack-trigger__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 10px; height: 12px; opacity: 0;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}
.soundtrack-trigger__toggle[aria-pressed="true"] .soundtrack-trigger__icon::before { opacity: 0; }
.soundtrack-trigger__toggle[aria-pressed="true"] .soundtrack-trigger__icon::after { opacity: 1; }
.soundtrack-trigger__open {
  flex: 1 1 auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem;
  border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; padding: 0;
  transition: transform 0.14s ease;
}
.soundtrack-trigger__open:hover { transform: translate(-1px, -1px); }
.soundtrack-trigger__open:hover .soundtrack-trigger__copy strong { color: var(--yellow); }
.soundtrack-trigger__open:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
.soundtrack-trigger__glyph {
  width: 2rem; height: 2rem; display: grid; place-items: center;
  border: 2px solid var(--paper); background: var(--violet);
  font-family: var(--mono); font-size: 1rem; font-weight: 700;
}
.soundtrack-trigger__copy { display: grid; line-height: 1.1; }
.soundtrack-trigger__copy strong { font-family: var(--serif); font-size: 0.82rem; letter-spacing: 0.02em; text-transform: uppercase; }
.soundtrack-trigger__copy small { margin-top: 0.22rem; color: rgba(246,236,210,.7); font-family: var(--mono); font-size: 0.56rem; }
.soundtrack-trigger__signal { height: 1.35rem; display: flex; align-items: end; gap: 2px; }
.soundtrack-trigger__signal i { width: 3px; height: 35%; display: block; background: var(--yellow); }
.soundtrack-trigger.is-playing .soundtrack-trigger__signal i { animation: radio-signal 0.56s steps(3, end) infinite alternate; }
.soundtrack-trigger.is-playing .soundtrack-trigger__signal i:nth-child(2) { animation-delay: -0.2s; }
.soundtrack-trigger.is-playing .soundtrack-trigger__signal i:nth-child(3) { animation-delay: -0.38s; }

.soundtrack {
  width: min(610px, calc(100vw - 2rem)); max-height: min(860px, calc(100vh - 2rem));
  padding: 1.2rem; border: var(--rule);
  background: var(--paper); color: var(--ink); box-shadow: 12px 12px 0 rgba(58,43,70,.4);
}
.soundtrack[open] { animation: radio-in 0.18s ease-out both; }
.soundtrack::backdrop { background: rgba(58,43,70,.62); backdrop-filter: blur(4px); }
.soundtrack__topline { display: flex; justify-content: space-between; align-items: start; padding-bottom: 0.9rem; border-bottom: var(--rule); }
.soundtrack__topline h2 { font-family: var(--serif); font-weight: 700; letter-spacing: 0; font-size: clamp(1.9rem, 7vw, 2.8rem); line-height: 1; }
.soundtrack__kicker { margin-bottom: 0.25rem; font-family: var(--serif); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-45); }
.soundtrack__close {
  width: 2.8rem; height: 2.8rem; display: grid; place-items: center;
  border: var(--rule-2); background: var(--raspberry); color: var(--paper);
  box-shadow: var(--shadow-hard); font-size: 1.5rem; line-height: 1;
}
.soundtrack__now { display: flex; flex-direction: column; gap: 0.18rem; padding: 1rem 0 0.85rem; }
.soundtrack__index { font-family: var(--mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; color: var(--raspberry); }
.soundtrack__now strong { font-family: var(--serif); font-weight: 700; font-size: 1.7rem; line-height: 1.1; }
.soundtrack__now > span:last-child { max-width: 62ch; color: var(--ink-70); font-size: 0.78rem; line-height: 1.45; }

.soundtrack__screen {
  padding: 0.55rem; border: var(--rule);
  background-color: #211128; color: var(--teal);
  background-image: linear-gradient(rgba(98,214,197,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(98,214,197,.08) 1px, transparent 1px);
  background-size: 12px 12px; box-shadow: inset 0 0 0 3px rgba(246,236,210,.08);
}
.soundtrack__screen > span { display: block; font-family: var(--mono); font-size: 0.52rem; font-weight: 700; letter-spacing: 0.14em; }
.soundtrack__screen > span:last-child { text-align: right; color: var(--yellow); }
.soundtrack__scope { height: 4.4rem; display: flex; align-items: end; gap: 4px; padding: 0.45rem 0; }
.soundtrack__scope i { flex: 1; height: 18%; display: block; background: var(--teal); border-top: 2px solid var(--paper); }
.soundtrack.is-playing .soundtrack__scope i { animation: radio-bars 0.72s steps(6, end) infinite alternate; }
.soundtrack.is-playing .soundtrack__scope i:nth-child(4n+1) { animation-delay: -0.18s; }
.soundtrack.is-playing .soundtrack__scope i:nth-child(4n+2) { animation-delay: -0.42s; }
.soundtrack.is-playing .soundtrack__scope i:nth-child(4n+3) { animation-delay: -0.61s; }

.soundtrack__controls { display: grid; grid-template-columns: auto 1fr auto; gap: 0.55rem; align-items: center; margin: 0.85rem 0; }
.soundtrack__controls > button {
  min-height: 2.65rem; padding: 0.55rem 0.85rem; border: var(--rule-2);
  background: var(--paper-2); box-shadow: var(--shadow-hard); font-family: var(--serif); font-size: 0.74rem; font-weight: 700; text-transform: uppercase;
}
.soundtrack__controls .soundtrack__play { background: var(--violet); color: var(--paper); }
.soundtrack__controls label {
  grid-column: 1 / -1; display: grid; grid-template-columns: 4.5rem 1fr; align-items: center; gap: 0.7rem;
  margin-top: 0.15rem; font-family: var(--serif); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.soundtrack__controls input { width: 100%; accent-color: var(--raspberry); }
.soundtrack__queue { margin: 0; padding: 0; border: var(--rule-2); overflow: hidden; list-style: none; }
.soundtrack__queue li { border-bottom: 2px solid var(--ink); }
.soundtrack__queue li:last-child { border-bottom: 0; }
.soundtrack__queue button {
  width: 100%; display: grid; grid-template-columns: 2rem 1fr auto; gap: 0.7rem; align-items: center;
  padding: 0.62rem 0.72rem; border: 0; background: var(--paper-3); text-align: left;
}
.soundtrack__queue button:hover { background: var(--paper-2); }
.soundtrack__queue button[aria-current="true"] { background: var(--yellow); }
.soundtrack__queue button span, .soundtrack__queue button small { font-family: var(--mono); font-size: 0.56rem; font-weight: 700; text-transform: uppercase; }
.soundtrack__queue button strong { font-family: var(--serif); font-size: 0.82rem; }
.soundtrack__queue button small { color: var(--ink-70); }
.soundtrack__credit { margin-top: 0.8rem; color: var(--ink-45); font-family: var(--mono); font-size: 0.58rem; line-height: 1.5; }
.playlist-fallback { margin: 1rem; padding: 1rem; border: var(--rule-2); background: var(--paper-3); }
.playlist-fallback summary { font-weight: 700; cursor: pointer; }
.playlist-fallback p, .playlist-fallback li { font-size: 0.8rem; }
html.js .playlist-fallback { display: none; }
@keyframes radio-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes radio-bars { to { height: 92%; background: var(--yellow); } }
@keyframes radio-signal { to { height: 100%; } }

/* ================================================================ TOOLTIP + toTop */
.tooltip {
  position: fixed; z-index: 400; max-width: 260px; pointer-events: none;
  border: var(--rule-2); background: var(--paper-3); box-shadow: var(--shadow-sm);
  padding: 0.6rem 0.7rem; opacity: 0; transform: translateY(4px); transition: opacity 0.12s ease;
  border-left: 6px solid var(--tt-c, var(--ink));
}
.tooltip.show { opacity: 1; transform: none; }
.tt-no { font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-45); }
.tt-title { font-family: var(--serif); font-weight: 700; font-size: 1rem; line-height: 1.14; margin: 0.15rem 0 0.25rem; }
.tt-meta { font-size: 0.72rem; color: var(--ink-70); margin-bottom: 0.35rem; }
.tt-themes { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.tt-th { font-family: var(--serif); font-size: 0.6rem; font-weight: 600; text-transform: uppercase; padding: 0.08rem 0.32rem; border: 1px solid currentColor; }

.to-top {
  position: fixed; right: 1.3rem; bottom: 1.3rem; z-index: 180;
  width: 3rem; height: 3rem; display: grid; place-items: center;
  border: var(--rule); background: var(--yellow); color: var(--ink);
  box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { transform: translate(-1px, -2px); box-shadow: var(--shadow-6); }

/* ================================================================ REVEAL (fast-scroll-safe) */
html.js .reveal { animation: none; }
html.js .reveal.is-visible { animation: lift 0.55s ease both; }
@keyframes lift { from { transform: translateY(12px); opacity: 0.55; } to { transform: none; opacity: 1; } }

/* ================================================================ PART SWITCHER (topbar) */
.parts { display: inline-flex; flex: 0 0 auto; border: 2px solid var(--ink); overflow: hidden; box-shadow: var(--shadow-hard); }
.parts .part { display: inline-flex; align-items: baseline; gap: 0.3rem; padding: 0.42rem 0.66rem; font-family: var(--serif); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; color: var(--ink-70); background: var(--paper-3); border-right: 2px solid var(--ink); }
.parts .part .prt-n { font-weight: 700; }
.parts .part:last-child { border-right: 0; }
.parts .part:hover { background: var(--paper-2); color: var(--ink); }
.parts .part.active { background: var(--yellow); color: var(--ink); }
.parts .part-2.active { background: var(--violet); color: var(--paper); }

/* ================================================================ BRIDGE (main → Part II) */
.bridge { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center; border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow); padding: 1.7rem 1.9rem; }
.bridge-cta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.4rem; padding: 0.85rem 1.25rem; border: var(--rule); background: var(--violet); color: var(--paper); text-decoration: none; font-family: var(--serif); font-weight: 700; box-shadow: var(--shadow-6); transition: transform 0.12s ease, box-shadow 0.12s ease; }
.bridge-cta:hover { transform: translate(2px, 2px); box-shadow: var(--shadow-sm); }
.bridge-cta .arr { font-family: var(--mono); }
.bridge-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.bpill { border: 2px solid var(--ink); border-left: 6px solid var(--bp, var(--ink)); background: var(--paper); box-shadow: var(--shadow-sm); padding: 0.7rem 0.85rem; }
.bpill b { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.1rem; line-height: 1.1; }
.bpill span { font-size: 0.72rem; color: var(--ink-45); }

/* ================================================================ ARC-AGI-3 HERO */
.hero-a3 { background-image: radial-gradient(color-mix(in srgb, var(--violet) 36%, transparent) 1.6px, transparent 1.8px); background-size: 24px 24px; }
.hero-a3::before { background: var(--violet); opacity: 0.20; }
.hero-a3::after { background: var(--teal); opacity: 0.24; }
.a3-badge { display: inline-block; margin-left: 0.5rem; padding: 0.12rem 0.45rem; border: 2px solid var(--ink); background: var(--raspberry); color: var(--paper); font-family: var(--serif); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; }
.hero-a3 .hstat:nth-child(1) { background: #d7f0ea; }
.hero-a3 .hstat:nth-child(2) { background: var(--raspberry); color: var(--paper); }
.hero-a3 .hstat:nth-child(2) .n, .hero-a3 .hstat:nth-child(2) .n b { color: var(--paper); }
.hero-a3 .hstat:nth-child(2) .l { color: rgba(246, 236, 210, 0.9); }
.hero-a3 .hstat:nth-child(3) { background: #ece0ec; }
.hero-a3 .hstat:nth-child(4) { background: #faeecb; }

/* ================================================================ DIRECT ARC-AGI-3 PAPERS */
.paper-group { margin-top: 2.5rem; }
.paper-group:first-child { margin-top: 0; }
.paper-group-head {
  display: flex; justify-content: space-between; align-items: end; gap: 1.5rem;
  margin-bottom: 1.15rem; padding-bottom: 0.85rem; border-bottom: 3px solid var(--ink);
}
.paper-group-kicker { margin-bottom: 0.2rem; font-family: var(--serif); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-45); }
.paper-group-head h3 { font-size: 1.9rem; line-height: 1.05; margin-bottom: 0.35rem; }
.paper-group-head p:last-child { max-width: 64ch; font-size: 0.86rem; line-height: 1.5; color: var(--ink-70); }
.paper-group-count { flex: 0 0 auto; padding: 0.3rem 0.55rem; border: 2px solid var(--ink); background: var(--yellow); box-shadow: var(--shadow-hard); font-family: var(--serif); font-size: 0.74rem; font-weight: 700; }
.shelf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.shelf-card .role { margin-top: 0.95rem; padding: 0.8rem 0.9rem; border: 2px dashed var(--ink); background: color-mix(in srgb, var(--paper-c, var(--violet)) 11%, var(--paper-3)); font-size: 0.88rem; line-height: 1.5; }
.role-label { display: block; font-family: var(--serif); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-45); margin-bottom: 0.4rem; }
.shelf-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.shelf-links .card-link { margin-top: 0; }
.source-note { margin-top: 0.7rem; font-size: 0.7rem; line-height: 1.5; color: var(--ink-45); }
.card-link.ghost { background: var(--paper-3); color: var(--ink); box-shadow: var(--shadow-hard); }

/* ================================================================ SOLUTIONS SO FAR */
.sol-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: 1.5rem; align-items: start; }
.sol-list { display: grid; gap: 1rem; }
.sol { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; border: var(--rule); border-left: 8px solid var(--sol-c, var(--ink)); background: var(--paper-3); box-shadow: var(--shadow-6); padding: 1rem 1.15rem; }
.sol-rank { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border: 2px solid var(--ink); background: var(--sol-c, var(--paper)); color: var(--paper); }
.sol-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.6rem; margin-bottom: 0.5rem; }
.sol-name { font-family: var(--serif); font-weight: 700; font-size: 1.22rem; }
.sol-org { font-size: 0.72rem; color: var(--ink-45); }
.cat-tag { font-family: var(--serif); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; padding: 0.14rem 0.42rem; border: 2px solid var(--ink); background: color-mix(in srgb, var(--sol-c, var(--ink)) 24%, var(--paper-3)); }
.sol-result { margin-left: auto; font-family: var(--serif); font-weight: 700; font-size: 0.78rem; line-height: 1.3; padding: 0.16rem 0.45rem; border: 2px solid var(--ink); background: var(--yellow); }
.sol-approach { font-size: 0.9rem; color: var(--ink-70); margin-bottom: 0.7rem; }
.sol-why { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.sol-strength, .sol-limit { font-size: 0.8rem; line-height: 1.45; padding: 0.5rem 0.6rem; margin: 0; border: 2px solid var(--ink-12); }
.sol-strength { background: color-mix(in srgb, var(--t-neural) 14%, var(--paper-3)); }
.sol-limit { background: color-mix(in srgb, var(--raspberry) 12%, var(--paper-3)); }
.sol-strength span, .sol-limit span { display: block; font-family: var(--serif); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-45); margin-bottom: 0.25rem; font-weight: 600; }

.lb-card { border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow); padding: 1.1rem 1.2rem; position: sticky; top: 5.6rem; }
.lb-card h4 { font-family: var(--serif); font-weight: 700; font-size: 1.26rem; }
.lb { display: grid; gap: 0.75rem; margin-top: 0.6rem; }
.lb-row { display: grid; grid-template-columns: 1.2rem 1fr 2.7rem; gap: 0.5rem; align-items: center; }
.lb-rank { font-family: var(--serif); font-weight: 700; font-size: 0.82rem; color: var(--ink-45); }
.lb-name { font-size: 0.78rem; font-weight: 500; display: block; margin-bottom: 0.25rem; }
.lb-name em { color: var(--ink-45); font-weight: 400; }
.lb-track { height: 0.9rem; border: 2px solid var(--ink); background: var(--paper); overflow: hidden; }
.lb-fill { height: 100%; min-width: 3px; background: var(--violet); border-right: 2px solid var(--ink); }
.lb-fill.floor { background: var(--raspberry); }
.lb-val { font-family: var(--serif); font-weight: 700; font-size: 0.78rem; text-align: right; }

/* ================================================================ SOLUTION SPACE */
.fam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; }
.fam { border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow-6); padding: 1.1rem 1.2rem; }
.fam-gap { background: color-mix(in srgb, var(--t-benchmark) 10%, var(--paper-3)); border-style: dashed; }
.mat { display: inline-block; margin-bottom: 0.6rem; padding: 0.18rem 0.5rem; border: 2px solid var(--ink); background: color-mix(in srgb, var(--mat-c, var(--ink)) 26%, var(--paper-3)); font-family: var(--serif); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.fam h4 { font-family: var(--display); font-weight: 800; letter-spacing: -0.015em; font-size: 1.2rem; margin-bottom: 0.4rem; line-height: 1.14; }
.fam p { font-size: 0.86rem; color: var(--ink-70); margin-bottom: 0.6rem; }
.fam-eg { font-size: 0.76rem; color: var(--ink-45); margin-bottom: 0; }
.fam-eg span { font-family: var(--serif); font-weight: 700; text-transform: uppercase; font-size: 0.58rem; letter-spacing: 0.06em; color: var(--ink-70); }

.axes-wrap, .synthesis { margin-top: 1.8rem; }
.axes-title { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; margin-bottom: 1rem; }
.axes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.2rem; }
.axis { border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow-6); padding: 1rem 1.1rem; }
.axis-name { font-family: var(--serif); font-weight: 700; font-size: 0.86rem; margin-bottom: 0.8rem; }
.axis-bar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.55rem; align-items: center; margin-bottom: 0.7rem; }
.axis-end { font-size: 0.68rem; color: var(--ink-70); line-height: 1.3; }
.axis-end.left { text-align: right; }
.axis-track { width: 2.8rem; height: 0.55rem; border: 2px solid var(--ink); background: linear-gradient(90deg, var(--t-agentic), var(--t-benchmark)); }
.axis-note { font-size: 0.78rem; color: var(--ink-70); margin: 0; }
.synthesis { border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow); padding: 1.4rem 1.6rem; }
.synthesis p { margin-bottom: 1rem; color: var(--ink-70); }
.synthesis p:last-child { margin-bottom: 0; }
.synthesis p:first-of-type { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; font-size: 1.2rem; color: var(--ink); line-height: 1.45; }

/* ================================================================ OPEN QUESTIONS */
.q-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.q { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow-6); padding: 1rem 1.2rem; }
.q-core { background: color-mix(in srgb, var(--t-agentic) 9%, var(--paper-3)); border-left: 8px solid var(--t-agentic); }
.q-rank { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border: 2px solid var(--ink); background: var(--yellow); box-shadow: var(--shadow-hard); }
.q-body h4 { font-family: var(--display); font-weight: 800; letter-spacing: -0.015em; font-size: 1.28rem; margin-bottom: 0.3rem; line-height: 1.16; }
.q-body p { font-size: 0.9rem; color: var(--ink-70); }
.core-star { color: var(--t-agentic); }
.q-foot { margin-top: 1.6rem; border: var(--rule); background: var(--yellow); box-shadow: var(--shadow); padding: 1.3rem 1.5rem; }
.q-foot p { font-size: 0.98rem; margin-bottom: 1rem; }

/* ================================================================ RESPONSIVE */
@media (max-width: 980px) {
  .thesis-grid, .constel-shell, .gap-grid, .viz-grid, .foot-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .legend-card { position: static; }
  .constel-note { order: -1; }
  .sol-layout, .bridge { grid-template-columns: 1fr; }
  .lb-card { position: static; }
}
@media (max-width: 720px) {
  body { font-size: 15px; }
  .catalog, .shelf, .fam-grid { grid-template-columns: 1fr; }
  .paper-group-head { align-items: start; flex-direction: column; gap: 0.75rem; }
  .sol-why, .bridge-pills { grid-template-columns: 1fr; }
  .cat-toolbar { position: static; }
  .chron-head, .chron-row { grid-template-columns: 2.8rem 1fr 5rem; }
  .chron-head span:nth-child(2), .chron-row .chron-year,
  .chron-head span:nth-child(4), .chron-row .chron-theme { display: none; }
  .hstat { flex-basis: 100%; }
  .card { padding-left: 1.3rem; }
  section { padding: 2.6rem 0; }
  .soundtrack-trigger { left: 0.8rem; bottom: 0.8rem; min-width: 0; }
  .soundtrack-trigger__copy small { display: none; }
  .soundtrack { padding: 0.9rem; }
  .soundtrack__queue button { grid-template-columns: 1.6rem 1fr; }
  .soundtrack__queue button small { grid-column: 2; }
}
@media (max-width: 440px) {
  .hero h1 { font-size: 2.2rem; }
  .plate, .stat-card, .gap-card, .path-card, .constel-box, .legend-card { box-shadow: var(--shadow-6); }
  .soundtrack-trigger__copy { display: none; }
  .soundtrack-trigger__signal { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, html.js .reveal, html.js .reveal.is-visible { opacity: 1; transform: none; transition: none; animation: none; }
  .card, .fbtn, .sbtn, .conn-chip, .card-link, .to-top, .node circle { transition: none; }
  .card.flash { animation: none; }
  .soundtrack[open], .soundtrack.is-playing .soundtrack__scope i, .soundtrack-trigger.is-playing .soundtrack-trigger__signal i { animation: none; }
}

@media print {
  .topbar, .to-top, .cat-toolbar, .tooltip, .soundtrack-trigger, .soundtrack, .playlist-fallback { display: none !important; }
  section { break-inside: avoid; border: 0; }
  .card, .plate, .stat-card { box-shadow: none; break-inside: avoid; }
  .card::after, .plate::after, .stat-card::after { display: none; }
  body { background: #fff; }
}

/* ==================================================== GLOSSARY · PART Ⅵ */
/* Part switcher — per-part active colors for parts 3–6. Placed after the base
   `.parts .part.active` rule so they win by source order for each tab. Below
   1024px only the roman numeral shows, so six parts always fit the top bar. */
.parts .part-3.active { background: var(--t-foundations); color: var(--paper); }
.parts .part-4.active { background: var(--t-test-time); color: var(--paper); }
.parts .part-5.active { background: var(--t-synthesis); color: var(--paper); }
.parts .part-6.active { background: var(--teal); color: var(--paper); }
@media (max-width: 1023px) { .parts .part .prt-l { display: none; } }
@media (max-width: 380px) { .brand { font-size: 1rem; padding: 0.3rem 0.5rem; } .parts .part { padding: 0.42rem 0.5rem; } }

/* Hero variant — teal-forward dotted ground (cf. .hero-a3). */
.hero-gl { background-image: radial-gradient(color-mix(in srgb, var(--teal) 34%, transparent) 1.6px, transparent 1.8px); background-size: 24px 24px; }
.hero-gl::before { background: var(--teal); opacity: 0.18; }
.hero-gl::after { background: var(--yellow); opacity: 0.28; }
.hero-gl .hstat:nth-child(1) { background: #d7f0ea; }
.hero-gl .hstat:nth-child(2) { background: #faeecb; }
.hero-gl .hstat:nth-child(3) { background: #ece0ec; }
.hero-gl .hstat:nth-child(4) { background: #fde3d6; }

/* Toolbar — reuses .cat-toolbar; adds the search field. */
.gl-search-group { flex: 1 1 20rem; }
.gl-search { position: relative; display: inline-flex; align-items: center; flex: 1 1 16rem; }
.gl-search input {
  width: 100%; min-width: 9rem; font-family: var(--mono); font-size: 0.9rem; color: var(--ink);
  padding: 0.5rem 2rem 0.5rem 0.7rem; border: 2px solid var(--ink); background: var(--paper); box-shadow: var(--shadow-sm);
}
.gl-search input::placeholder { color: var(--ink-45); }
.gl-clear {
  position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; cursor: pointer; font-size: 1.2rem; line-height: 1; color: var(--ink-70); padding: 0 0.3rem;
}
.gl-clear:hover { color: var(--raspberry); }

/* Family groups. */
.gl-body { display: grid; gap: 2.4rem; }
.gl-group { scroll-margin-top: 6rem; }
.gl-group-head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem 0.7rem;
  margin-bottom: 1.1rem; padding-bottom: 0.7rem; border-bottom: 3px solid var(--ink);
}
.gl-group-dot { width: 0.9rem; height: 0.9rem; border: 2px solid var(--ink); background: var(--gc, var(--ink)); }
.gl-group-title { font-size: clamp(1.35rem, 3vw, 1.6rem); line-height: 1.05; }
.gl-group-count {
  justify-self: end; padding: 0.16rem 0.5rem; border: 2px solid var(--ink); background: var(--gc, var(--yellow)); color: var(--paper);
  box-shadow: var(--shadow-hard); font-family: var(--serif); font-size: 0.78rem; font-weight: 700;
}
.gl-group-blurb { grid-column: 1 / -1; max-width: 70ch; font-size: 0.86rem; line-height: 1.5; color: var(--ink-70); }

/* Term list & card. */
.gl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1.1rem; align-items: start; }
.gl-term { position: relative; overflow: hidden; border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow-6); }
.gl-term::after { content: ""; position: absolute; inset: 4px; border: 2px solid var(--ink-12); pointer-events: none; z-index: 0; }
.gl-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--paper-c, var(--ink)); border-right: 2px solid var(--ink); z-index: 2; }
.gl-term-in { position: relative; z-index: 1; padding: 1rem 1.1rem 1.05rem 1.35rem; }
.gl-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.gl-name { font-size: 1.18rem; line-height: 1.15; }
.gl-head .theme-chip { margin-left: auto; flex: 0 0 auto; }
.gl-aka { font-family: var(--mono); font-size: 0.74rem; font-style: italic; color: var(--ink-45); margin-bottom: 0.5rem; }
.gl-def { font-size: 0.9rem; line-height: 1.55; color: var(--ink-70); }
.gl-def em { color: var(--raspberry); font-style: normal; font-weight: 500; }
.gl-links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.gl-src, .gl-paper {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.24rem 0.5rem; border: 2px solid var(--ink);
  background: var(--paper-3); text-decoration: none; color: var(--ink);
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.2; transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.gl-src:hover { box-shadow: var(--shadow-hard); transform: translate(-1px, -1px); background: var(--yellow); }
.gl-paper { background: var(--paper-c, var(--ink)); color: var(--paper); font-family: var(--serif); font-weight: 600; }
.gl-paper:hover { box-shadow: var(--shadow-hard); transform: translate(-1px, -1px); }
.gl-paper-no { font-family: var(--serif); font-size: 0.64rem; font-weight: 700; padding: 0.02rem 0.25rem; border: 2px solid var(--paper); }
.gl-src .arr, .gl-paper .arr { font-family: var(--mono); }

/* Empty state. */
.gl-empty { padding: 1.4rem 1.2rem; border: 2px dashed var(--ink); background: var(--paper-2); font-size: 0.95rem; text-align: center; }
.gl-reset { border: 0; background: transparent; color: var(--raspberry); font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }

/* Sources ("ground truth") grid. */
.src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.src-card {
  display: grid; gap: 0.35rem; position: relative; overflow: hidden; border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow-6);
  padding: 0.95rem 1rem; text-decoration: none; color: var(--ink); transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.src-card::after { content: ""; position: absolute; inset: 4px; border: 2px solid var(--ink-12); pointer-events: none; }
.src-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.src-card > * { position: relative; z-index: 1; }
.src-org { font-family: var(--serif); font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-45); }
.src-label { font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1.2; }
.src-go { font-family: var(--serif); font-size: 0.74rem; font-weight: 600; color: var(--violet); }
.src-go .arr { font-family: var(--mono); }

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

/* ==================================================== NEW CHAPTER HEROES */
/* Theory (Ⅲ) — foundations plum-pink. */
.hero-th { background-image: radial-gradient(color-mix(in srgb, var(--t-foundations) 30%, transparent) 1.6px, transparent 1.8px); background-size: 24px 24px; }
.hero-th::before { background: var(--t-foundations); opacity: 0.18; }
.hero-th::after { background: var(--violet); opacity: 0.22; }
.hero-th .hstat:nth-child(1) { background: #ece0ec; }
.hero-th .hstat:nth-child(2) { background: #f3e0ea; }
.hero-th .hstat:nth-child(3) { background: #faeecb; }
.hero-th .hstat:nth-child(4) { background: #d7f0ea; }
/* Methods (Ⅳ) — warm competition gold/coral. */
.hero-me { background-image: radial-gradient(color-mix(in srgb, var(--t-test-time) 30%, transparent) 1.6px, transparent 1.8px); background-size: 24px 24px; }
.hero-me::before { background: var(--t-milestone); opacity: 0.22; }
.hero-me::after { background: var(--raspberry); opacity: 0.20; }
.hero-me .hstat:nth-child(1) { background: #faeecb; }
.hero-me .hstat:nth-child(2) { background: #fde3d6; }
.hero-me .hstat:nth-child(3) { background: #e4ecf7; }
.hero-me .hstat:nth-child(4) { background: #d7f0ea; }
/* Techniques (Ⅴ) — engineering blue. */
.hero-tc { background-image: radial-gradient(color-mix(in srgb, var(--t-synthesis) 30%, transparent) 1.6px, transparent 1.8px); background-size: 24px 24px; }
.hero-tc::before { background: var(--t-synthesis); opacity: 0.20; }
.hero-tc::after { background: var(--teal); opacity: 0.22; }
.hero-tc .hstat:nth-child(1) { background: #e4ecf7; }
.hero-tc .hstat:nth-child(2) { background: #d7f0ea; }
.hero-tc .hstat:nth-child(3) { background: #faeecb; }
.hero-tc .hstat:nth-child(4) { background: #ece0ec; }

/* Shared: chart legends + scatter marks (technique map, climb, cost). */
.map-legend { display: flex; flex-wrap: wrap; gap: 0.55rem 1.1rem; margin-top: 1rem; font-size: 0.74rem; }
.ml-item { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--mono); }
.ml-item i { width: 0.8rem; height: 0.8rem; border: 2px solid var(--ink); display: inline-block; flex: 0 0 auto; }
.ml-item i.ml-line { width: 1.1rem; height: 0; border: 0; border-top: 2px dashed var(--t-neural); }
.tm-lab { font-family: var(--mono); font-size: 9.5px; font-weight: 500; fill: var(--ink-70); }
.tm-pt { cursor: pointer; }
.tm-pt rect { transition: transform 0.1s ease; }
.tm-pt.on rect, .tm-pt:focus-visible rect { stroke-width: 3; }
.tm-pt:focus-visible { outline: none; }

/* ==================================================== THEORY · PART Ⅲ */
.ladder { display: grid; gap: 0.5rem; }
.rung { border: 2px solid var(--ink); background: var(--paper); padding: 0.55rem 0.7rem; }
.rung-l { display: block; font-family: var(--serif); font-weight: 700; font-size: 0.84rem; }
.rung-d { display: block; font-size: 0.72rem; color: var(--ink-45); line-height: 1.35; margin-top: 0.12rem; }
.rung-arc { background: var(--yellow); box-shadow: var(--shadow-hard); }
.rung-arc .rung-d { color: var(--ink-70); }
.rung-tag { display: inline-block; margin-top: 0.4rem; font-family: var(--serif); font-size: 0.56rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.1rem 0.36rem; border: 2px solid var(--ink); background: var(--paper-3); }

.eqn { position: relative; margin-top: 2rem; border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow); padding: clamp(1.3rem, 3vw, 2rem); }
.eqn::after { content: ""; position: absolute; inset: 4px; border: 2px solid var(--ink-12); pointer-events: none; }
.eqn > * { position: relative; z-index: 1; }
.eqn-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 1rem; padding: 0.4rem 0 1.3rem; text-align: center; }
.eqn-lhs { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 4vw, 2.1rem); color: var(--t-foundations); }
.eqn-eq { font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 3.6vw, 1.9rem); color: var(--ink-45); }
.eqn-frac { display: inline-grid; justify-items: center; gap: 0.3rem; }
.eqn-num { font-family: var(--serif); font-weight: 600; font-size: clamp(0.82rem, 2.3vw, 1.12rem); }
.eqn-bar { width: 100%; height: 3px; background: var(--ink); }
.eqn-den { font-family: var(--serif); font-weight: 600; font-size: clamp(0.82rem, 2.3vw, 1.12rem); color: var(--ink-70); }
.eqn-reading { max-width: 72ch; margin: 0 auto 1.3rem; text-align: center; color: var(--ink-70); font-size: 0.95rem; }
.eqn-reading em { color: var(--raspberry); font-style: normal; font-weight: 500; }
.eqn-terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.eqn-term { border-left: 5px solid var(--t-foundations); background: var(--paper-2); padding: 0.6rem 0.8rem; }
.eqn-t { display: block; font-family: var(--serif); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.25rem; }
.eqn-d { display: block; font-size: 0.78rem; color: var(--ink-70); line-height: 1.42; }

.prior-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.prior { position: relative; border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow-6); border-left: 8px solid var(--prior-c, var(--ink)); padding: 1.1rem 1.2rem; }
.prior::after { content: ""; position: absolute; inset: 4px; border: 2px solid var(--ink-12); pointer-events: none; }
.prior > * { position: relative; z-index: 1; }
.prior-glyph { display: inline-grid; place-items: center; width: 2.7rem; height: 2.7rem; border: 2px solid var(--ink); background: color-mix(in srgb, var(--prior-c) 20%, var(--paper-3)); color: var(--prior-c); margin-bottom: 0.6rem; }
.prior-glyph svg { width: 1.8rem; height: 1.8rem; }
.prior-name { font-size: 1.2rem; margin-bottom: 0.3rem; }
.prior-desc { font-size: 0.86rem; color: var(--ink-70); line-height: 1.5; }

.fw-spectrum { display: grid; grid-template-columns: minmax(0, auto) 1fr minmax(0, auto); align-items: center; gap: 0.8rem; margin-bottom: 2rem; padding: 1.4rem 1.1rem 1.4rem; border: var(--rule-2); background: var(--paper-3); box-shadow: var(--shadow-sm); }
.fws-end { font-family: var(--serif); font-weight: 700; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-45); max-width: 7rem; line-height: 1.2; }
.fws-end.right { text-align: right; }
.fws-track { position: relative; height: 4px; background: var(--ink); }
.fws-mark { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border: 2px solid var(--ink); background: var(--fws-c, var(--ink)); color: var(--paper); box-shadow: var(--shadow-hard); text-decoration: none; font-family: var(--serif); font-weight: 700; font-size: 0.82rem; transition: transform 0.12s ease; }
.fws-mark:hover, .fws-mark:focus-visible { transform: translate(-50%, -50%) scale(1.15); }

.fw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1.3rem; align-items: start; }
.fw { position: relative; overflow: hidden; border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow-6); scroll-margin-top: 6rem; }
.fw::after { content: ""; position: absolute; inset: 4px; border: 2px solid var(--ink-12); pointer-events: none; z-index: 0; }
.fw-in { position: relative; z-index: 1; padding: 1.1rem 1.2rem 1.2rem 1.5rem; }
.fw-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.5rem; }
.fw-no { font-family: var(--serif); font-weight: 700; font-size: 0.9rem; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border: 2px solid var(--ink); background: var(--paper-c, var(--ink)); color: var(--paper); flex: 0 0 auto; }
.fw-name { font-size: 1.18rem; line-height: 1.12; flex: 1 1 40%; }
.fw-head .theme-chip { flex: 0 0 auto; }
.fw-prop { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-45); margin-bottom: 0.6rem; }
.fw-thesis { font-size: 0.92rem; line-height: 1.5; margin-bottom: 0.7rem; }
.fw-arc, .fw-against { font-size: 0.8rem; line-height: 1.45; padding: 0.5rem 0.6rem; margin-bottom: 0.5rem; border: 2px solid var(--ink-12); }
.fw-arc { background: color-mix(in srgb, var(--paper-c) 10%, var(--paper-3)); }
.fw-against { background: color-mix(in srgb, var(--raspberry) 9%, var(--paper-3)); }
.fw-arc span, .fw-against span { display: block; font-family: var(--serif); font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-45); margin-bottom: 0.25rem; font-weight: 600; }
.fw .card-link { margin-top: 0.35rem; }

.ledger { position: relative; border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow); overflow: hidden; }
.ledger-head, .ledger-row { display: grid; grid-template-columns: 1fr 1fr; }
.ledger-head { background: var(--ink); color: var(--paper); }
.ledger-head span { padding: 0.6rem 1rem; font-family: var(--serif); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }
.lh-counter { border-left: 2px solid var(--ink-45); color: var(--yellow); }
.ledger-row { border-top: 2px solid var(--ink-12); }
.ledger-row .claim, .ledger-row .counter { padding: 0.85rem 1rem; font-size: 0.85rem; line-height: 1.5; margin: 0; }
.ledger-row .claim { color: var(--ink-70); }
.ledger-row .counter { border-left: 2px solid var(--ink-12); background: color-mix(in srgb, var(--t-critique) 8%, var(--paper-3)); }
.ledger-close { margin-top: 1.3rem; padding: 1.1rem 1.3rem; border: var(--rule-2); border-left: 6px solid var(--t-agentic); background: color-mix(in srgb, var(--t-agentic) 8%, var(--paper-3)); font-family: var(--display); font-weight: 700; font-size: 1.05rem; line-height: 1.45; }

.eff-band { position: relative; margin-top: 1.8rem; border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow); padding: 1.4rem 1.6rem; }
.eff-band::after { content: ""; position: absolute; inset: 4px; border: 2px solid var(--ink-12); pointer-events: none; }
.eff-band > * { position: relative; z-index: 1; }
.eff-band h3 { font-family: var(--display); font-weight: 800; font-size: 1.4rem; margin-bottom: 0.7rem; }
.eff-band p { color: var(--ink-70); margin-bottom: 0.8rem; }
.eff-band p:last-child { margin-bottom: 0; }
.eff-band em { color: var(--raspberry); font-style: normal; font-weight: 500; }

@media (max-width: 720px) {
  .eqn-terms { grid-template-columns: 1fr; }
  .prior-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ledger-head { display: none; }
  .ledger-row { grid-template-columns: 1fr; }
  .ledger-row .counter { border-left: 0; border-top: 2px dashed var(--ink-20); }
  .ledger-row .claim::before { content: "Claim · "; font-weight: 500; color: var(--t-milestone); }
  .ledger-row .counter::before { content: "Counter · "; font-weight: 500; color: var(--t-critique); }
}

/* ==================================================== METHODS · PART Ⅳ */
.climb-wrap { min-width: 620px; }
#climbSvg { width: 100%; height: auto; display: block; }
#costPlot { width: 100%; height: auto; display: block; max-width: 430px; margin: 0.4rem auto 0; min-width: 300px; }
.bench-intro { max-width: 68ch; margin-bottom: 1.6rem; }
.bench-intro p { color: var(--ink-70); margin-bottom: 0.8rem; }
.bench-intro p:last-child { margin-bottom: 0; }
.bench-intro em { color: var(--raspberry); font-style: normal; font-weight: 500; }

.mteam { position: relative; overflow: hidden; border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow-6); }
.mteam::after { content: ""; position: absolute; inset: 4px; border: 2px solid var(--ink-12); pointer-events: none; z-index: 0; }
.mteam-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--sol-c, var(--ink)); border-right: 2px solid var(--ink); z-index: 2; }
.mteam-in { position: relative; z-index: 1; padding: 1rem 1.15rem 1.05rem 1.5rem; }
.mteam-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 0.6rem; margin-bottom: 0.45rem; }
.mteam-name { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; }
.mteam-org { font-size: 0.72rem; color: var(--ink-45); }
.mteam-badge { margin-left: auto; font-family: var(--serif); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.14rem 0.45rem; border: 2px solid var(--ink); background: color-mix(in srgb, var(--sol-c, var(--ink)) 22%, var(--paper-3)); }
.mteam-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.55rem; margin-bottom: 0.6rem; }
.mteam-year { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-45); }
.mteam-result { margin-left: auto; font-family: var(--serif); font-weight: 700; font-size: 0.8rem; padding: 0.14rem 0.45rem; border: 2px solid var(--ink); background: var(--yellow); }
.mteam-approach { font-size: 0.9rem; color: var(--ink-70); line-height: 1.5; margin-bottom: 0.6rem; }
.mteam-note { font-size: 0.8rem; line-height: 1.45; padding: 0.5rem 0.65rem; border-left: 5px solid var(--sol-c, var(--raspberry)); background: color-mix(in srgb, var(--sol-c, var(--raspberry)) 9%, var(--paper-3)); margin-bottom: 0.7rem; }
.mteam-note span { display: block; font-family: var(--serif); font-size: 0.55rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-45); margin-bottom: 0.2rem; }
.mteam-link { margin-top: 0; }

.era-line { display: grid; grid-template-columns: repeat(5, 1fr); border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow); margin-bottom: 1.6rem; overflow: hidden; }
.era-step { padding: 1.1rem 1rem 1.15rem; border-right: 2px solid var(--ink-12); }
.era-step:last-child { border-right: 0; }
.era-when { font-family: var(--serif); font-weight: 700; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--era-c, var(--ink)); }
.era-dot { display: block; width: 0.9rem; height: 0.9rem; border: 2px solid var(--ink); background: var(--era-c, var(--ink)); margin: 0.5rem 0; }
.era-name { font-family: var(--display); font-weight: 800; font-size: 1.02rem; line-height: 1.14; margin-bottom: 0.2rem; }
.era-who { display: block; font-family: var(--mono); font-size: 0.64rem; color: var(--ink-45); margin-bottom: 0.5rem; }
.era-blurb { font-size: 0.75rem; color: var(--ink-70); line-height: 1.4; }
@media (max-width: 860px) {
  .era-line { grid-template-columns: 1fr; }
  .era-step { border-right: 0; border-bottom: 2px solid var(--ink-12); }
  .era-step:last-child { border-bottom: 0; }
  .era-dot { display: none; }
}

/* ==================================================== TECHNIQUES · PART Ⅴ */
.techmap-wrap { min-width: 640px; }
#techMap { width: 100%; height: auto; display: block; }
.fam-glyph { width: 0.95rem; height: 0.95rem; flex: 0 0 auto; }
.tk-group .theme-chip, .tk .theme-chip { display: inline-flex; align-items: center; gap: 0.3rem; }

.tk-group { margin-top: 2.6rem; }
.tk-group:first-child { margin-top: 0; }
.tk-group-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9rem; margin-bottom: 1.2rem; padding-bottom: 0.8rem; border-bottom: 3px solid var(--ink); }
.tk-group-glyph { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 2px solid var(--ink); background: color-mix(in srgb, var(--gc) 20%, var(--paper-3)); color: var(--gc, var(--ink)); flex: 0 0 auto; }
.tk-group-glyph .fam-glyph { width: 1.55rem; height: 1.55rem; }
.tk-group-title { font-size: clamp(1.35rem, 3vw, 1.7rem); line-height: 1.06; margin-bottom: 0.15rem; }
.tk-group-blurb { max-width: 72ch; font-size: 0.82rem; line-height: 1.45; color: var(--ink-70); }
.tk-group-count { padding: 0.3rem 0.55rem; border: 2px solid var(--ink); background: var(--gc, var(--yellow)); color: var(--paper); box-shadow: var(--shadow-hard); font-family: var(--serif); font-size: 0.9rem; font-weight: 700; }

.tk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 27rem), 1fr)); gap: 1.4rem; align-items: start; }
.tk { position: relative; overflow: hidden; border: var(--rule); background: var(--paper-3); box-shadow: var(--shadow-6); scroll-margin-top: 6rem; transition: box-shadow 0.14s ease, transform 0.14s ease; }
.tk::after { content: ""; position: absolute; inset: 4px; border: 2px solid var(--ink-12); pointer-events: none; z-index: 0; }
.tk:hover { box-shadow: var(--shadow); transform: translate(-2px, -2px); }
.tk.tk-flash { animation: flash 1.1s ease; }
.tk-in { position: relative; z-index: 1; padding: 1.15rem 1.25rem 1.25rem 1.55rem; }
.tk-head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.35rem; }
.tk-head .cat-no { flex: 0 0 auto; }
.tk-name { font-size: 1.24rem; line-height: 1.12; flex: 1 1 auto; }
.tk-score { flex: 0 0 auto; font-family: var(--serif); font-weight: 700; font-size: 0.95rem; padding: 0.14rem 0.5rem; border: 2px solid var(--ink); background: color-mix(in srgb, var(--paper-c) 26%, var(--paper-3)); white-space: nowrap; }
.tk-meta { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-45); margin-bottom: 0.6rem; }
.tk-target { font-family: var(--serif); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.1rem 0.42rem; border: 2px dashed var(--ink); color: var(--ink-70); }
.tk-scorenote { font-size: 0.66rem; color: var(--ink-45); font-family: var(--mono); }
.tk-lead { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; font-size: 1.04rem; line-height: 1.4; margin-bottom: 0.9rem; }

.mech-wrap { margin-bottom: 0.9rem; }
.mech-label { display: block; font-family: var(--serif); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-45); margin-bottom: 0.55rem; }
.mech { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.mech-step { display: flex; align-items: flex-start; gap: 0.5rem; border: 2px solid var(--ink); background: var(--paper); padding: 0.42rem 0.6rem; position: relative; }
.mech-num { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; display: grid; place-items: center; border: 2px solid var(--ink); background: var(--mech-c, var(--ink)); color: var(--paper); font-family: var(--serif); font-weight: 700; font-size: 0.7rem; }
.mech-txt { font-size: 0.78rem; line-height: 1.35; padding-top: 0.12rem; }
.mech-step:not(:last-child)::after { content: "↓"; position: absolute; left: 0.75rem; bottom: -0.66rem; transform: translateX(-50%); font-family: var(--mono); font-size: 0.72rem; font-weight: 700; color: var(--mech-c, var(--ink-45)); z-index: 2; line-height: 1; }

.tk-why { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.8rem; }
.tk-terms { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.9rem; }
.term-chip { font-family: var(--mono); font-size: 0.68rem; padding: 0.14rem 0.44rem; border: 2px solid var(--ink-20); background: var(--paper-2); color: var(--ink-70); }
@media (max-width: 560px) { .tk-why { grid-template-columns: 1fr; } }

/* Narrow-screen hardening for the framework spectrum (keep markers from crowding
   the track) and the equation row. */
@media (max-width: 560px) {
  .fws-end { max-width: 5rem; font-size: 0.62rem; }
  .fws-mark { width: 1.45rem; height: 1.45rem; font-size: 0.74rem; }
  .eqn-row { gap: 0.4rem 0.7rem; }
  .fw-spectrum { padding: 1.2rem 0.7rem; gap: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tk, .fws-mark, .tm-pt rect { transition: none; }
  .tk.tk-flash { animation: none; }
}