/* ============================================================
   OpenRSI Index — site stylesheet, v3 "star field"
   System: black-blue instrument panels with white light, crisp
   white documentation sections, one electric-blue accent.
   Manrope display, Geist Mono labels.
   ============================================================ */

:root {
  /* paper — a touch of cream, never pure white */
  --paper: #fbfaf7;
  --paper-2: #ffffff;
  --surface: #f4f2ed;
  --line: #e7e4dd;
  --line-soft: #efedE7;

  /* ink */
  --ink: #101318;
  --muted: #5b6170;
  --faint: #8b91a1;

  /* accent */
  --accent: #3b7cf0;
  --accent-deep: #2560cc;
  --accent-bright: #8ab8ff;
  --accent-soft: #e6eeff;
  --green: #3f9a4a;
  --red: #d0503b;

  /* dark field */
  --field: #04070f;
  --field-2: #080d1a;
  --field-3: #0d1526;
  --field-line: rgba(140, 170, 230, 0.16);
  --field-text: #f2f5fc;
  --field-body: #b6bfd3;
  --field-muted: #7a849c;

  --font-sans: "Nunito", "Manrope", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-mono: "Geist Mono", "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --maxw: 1180px;
  --radius: 14px;

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --shadow-soft: 0 1px 2px rgba(16, 19, 24, 0.04);
  --shadow-lift: 0 18px 40px -18px rgba(16, 19, 24, 0.18);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}
/* wider column for the blocks that carry a full panel of their own */
.wrap.wrap-wide { max-width: 1380px; }

/* ---------------- nav ---------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(4, 7, 15, 0.82);
  border-bottom: 1px solid rgba(140, 170, 230, 0.12);
}
.nav.scrolled {
  background: rgba(4, 7, 15, 0.74);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 15.5px;
  letter-spacing: 0.01em;
  color: var(--field-text);
}
.brand:hover { text-decoration: none; }
.brand svg { display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}
.nav-links a {
  color: var(--field-muted);
  padding: 4px 0 6px;
  background: linear-gradient(#fff, #fff) no-repeat left bottom / 0% 1px;
  transition: color 0.25s var(--ease), background-size 0.35s var(--ease);
}
.nav-links a:hover { color: var(--field-text); text-decoration: none; background-size: 100% 1px; }
.nav-links a.active { color: var(--field-text); background-size: 100% 1px; }
.nav-links a.ext::after { content: " ↗"; color: var(--field-muted); }

.nav-toggle { display: none; }

@media (max-width: 720px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: none;
    border: 1px solid rgba(140, 170, 230, 0.2);
    border-radius: 8px;
    color: var(--field-text);
    font-size: 17px;
    cursor: pointer;
  }
  .nav-links {
    display: none;
    position: absolute;
    top: 58px; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--field);
    border-bottom: 1px solid var(--field-line);
    padding: 8px 28px 16px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; width: 100%; border-bottom: 1px solid rgba(140, 170, 230, 0.08); }
}

/* ---------------- typography helpers ---------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
  flex: none;
}
.eyebrow.on-dark { color: var(--field-muted); }
.eyebrow.on-dark::before { background: var(--accent-bright); }

h1, h2, h3 { line-height: 1.16; margin: 0; }

.h-lg {
  font-size: clamp(32px, 4.1vw, 52px);
  font-weight: 600;
  letter-spacing: -0.031em;
}
.h-md {
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 600;
  letter-spacing: -0.016em;
}

.lede {
  font-size: clamp(16.5px, 1.75vw, 18.5px);
  color: var(--muted);
  max-width: 64ch;
}

.mono { font-family: var(--font-mono); font-size: 0.94em; }
.small { font-size: 13.5px; }
.muted { color: var(--muted); }

/* ---------------- sections ---------------- */

section.block { padding: clamp(76px, 9vw, 112px) 0; }
section.block + section.block { border-top: 1px solid var(--line-soft); }

.section-head { margin-bottom: 40px; max-width: 800px; }
.section-head p { margin: 16px 0 0; }

/* ============================================================
   FIELDS — the star map (hero) and its ambient variant (pagehead)
   ============================================================ */

.hero-field, .pagehead {
  position: relative;
  overflow: hidden;
  color: var(--field-text);
  background:
    radial-gradient(90% 80% at 72% 46%, rgba(30, 60, 130, 0.35), transparent 62%),
    radial-gradient(70% 60% at 10% 100%, rgba(20, 40, 95, 0.35), transparent 60%),
    var(--field);
  border-bottom: 1px solid var(--line);
}
.hero-field::after, .pagehead::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.035;
  pointer-events: none;
  z-index: 3;
}

.field-lines, .field-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.field-stars { touch-action: pan-y; }
[data-field-hero] .field-stars { cursor: grab; }
[data-field-hero] .field-stars.dragging { cursor: grabbing; }

.hero-field {
  min-height: min(calc(94vh - 58px), 1060px);
  min-height: min(calc(94svh - 58px), 1060px);
  display: flex;
  flex-direction: column;
}

.hero-scrim, .field-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.hero-scrim {
  background:
    linear-gradient(180deg, rgba(4, 7, 15, 0.35), transparent 24%),
    radial-gradient(95% 90% at 10% 85%, rgba(4, 7, 15, 0.92) 20%, rgba(4, 7, 15, 0.5) 52%, transparent 76%);
}
.field-scrim {
  background: radial-gradient(95% 130% at 16% 70%, rgba(4, 7, 15, 0.9) 22%, rgba(4, 7, 15, 0.4) 58%, transparent 82%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 140px 28px 88px;
  pointer-events: none;             /* the field underneath takes the pointer */
}
.hero-copy { max-width: 680px; }
.hero-copy a { pointer-events: auto; }

.hero-title {
  font-size: clamp(38px, 5.2vw, 68px);
  font-weight: 600;
  letter-spacing: -0.036em;
  line-height: 1.04;
  color: #ffffff;
  margin: 0 0 24px;
  max-width: 14ch;
}
.hero-title em { font-style: normal; color: var(--accent-bright); }

/* "01" kicker — OpenRSI Index */
.hero-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--field-muted);
}
.hero-kicker .k-num {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.1em;
  position: relative;
  padding-left: 16px;
}
.hero-kicker .k-num::before {
  /* first light */
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.55);
  animation: first-light 4.5s ease-in-out infinite;
}
.hero-kicker .k-line { width: 28px; height: 1px; background: rgba(140, 170, 230, 0.35); }
@keyframes first-light {
  0%, 100% { box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.55); }
  50% { box-shadow: 0 0 16px 5px rgba(255, 255, 255, 0.85); }
}

.hero-sub {
  font-size: clamp(16.5px, 1.7vw, 19px);
  line-height: 1.62;
  color: var(--field-body);
  max-width: 54ch;
  margin: 0 0 34px;
}
.hero-sub strong { color: var(--field-text); font-weight: 600; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero-copy > * { animation: hero-in 0.9s var(--ease) both; }
.hero-copy > *:nth-child(2) { animation-delay: 0.1s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.2s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.3s; }
html.shot .hero-copy > * { animation: none; }

/* interaction hint: appears only while the pointer rests on the field */
.field-hint {
  position: absolute;
  z-index: 2;
  right: 28px;
  bottom: 22px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--field-muted);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}
.field-hint.on { opacity: 1; }

/* pagehead: ambient field behind the page title */
.pagehead { padding: clamp(84px, 10vw, 128px) 0 clamp(60px, 7vw, 92px); }
.pagehead .wrap { position: relative; z-index: 2; pointer-events: none; }
.pagehead .wrap a { pointer-events: auto; }
.pagehead .eyebrow { color: var(--field-muted); }
.pagehead .eyebrow::before { background: var(--accent-bright); }
.pagehead h1 { color: #ffffff; max-width: 21ch; }
.pagehead .lede { color: var(--field-body); margin: 18px 0 0; }

/* ---------------- pipeline (index) ---------------- */

.pipeline {
  display: flex;
  align-items: stretch;
  gap: 14px;
  flex-wrap: wrap;
}
.pipeline .step {
  position: relative;
  flex: 1 1 220px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: 10px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-soft);
}
.pipeline .k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.pipeline .v {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.pipeline .arrow {
  align-self: center;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 18px;
}

/* ============================================================
   RUNFLOW — how a run works (two containers, two loops)
   ============================================================ */

.runflow {
  --rf-blue: #245bce;
  --rf-blue-line: #b9cff5;
  --rf-orange: #b84b25;
  --rf-orange-line: #e9b49c;
  --rf-warm: #fffbf8;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}
.runflow *, .runflow *::before, .runflow *::after { min-width: 0; }
.runflow h4, .article .runflow p { margin: 0; }
.runflow code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  white-space: nowrap;
}
.rf-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.rf-icon { width: 22px; height: 22px; flex: none; }

/* Preparation happens once, outside the persistent workspace. */
.rf-setup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
  align-items: center;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-2);
}
.rf-setup .rf-eyebrow { color: var(--muted); margin-bottom: 9px; }
.rf-setup-title { display: flex; gap: 9px; align-items: center; margin-bottom: 8px; }
.rf-setup-title strong { font-size: 15px; font-weight: 650; letter-spacing: -0.02em; }
.rf-setup-title .rf-icon { color: var(--rf-blue); }
.rf-files { display: flex; flex-wrap: wrap; gap: 5px 6px; }
.rf-files code { padding: 2px 6px; border-radius: 4px; background: #f1f4f9; color: #4b576d; font-size: 10px; }
.rf-setup-plan p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.rf-setup-arrow { font-size: 23px; color: #8a97ad; text-align: center; }
.rf-start, .rf-finish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 0;
  color: var(--muted);
  font-size: 11px;
}
.rf-start > span, .rf-finish > span { font-size: 20px; line-height: 1; }
.rf-start > span { color: var(--rf-blue); }
.rf-finish > span { color: var(--rf-orange); }

/* The outer boundary encloses one submission / evaluation / feedback cycle. */
.rf-cycle {
  border: 1px solid var(--rf-orange-line);
  border-radius: 18px;
  padding: 18px;
  background: var(--rf-warm);
}
.rf-cycle-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 2px 16px;
  color: var(--rf-orange);
}
.rf-cycle-head .rf-eyebrow { font-size: 10px; font-weight: 700; }
.rf-cycle-head .rf-eyebrow > span { margin-right: 5px; font-size: 15px; vertical-align: -1px; }
.rf-cycle-head > span:last-child { font-size: 11px; }
.rf-flow {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) 22px minmax(0, .72fr) 22px minmax(0, 1fr);
  align-items: stretch;
}
.rf-work, .rf-judge {
  padding: 16px;
  border: 1px solid var(--rf-blue-line);
  border-radius: 13px;
  background: linear-gradient(155deg, #eef4ff, #f7faff);
}
.rf-stage-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--rf-blue);
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rf-number {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border: 1px solid #bed1f5;
  border-radius: 50%;
  font-size: 9px;
  letter-spacing: 0;
}
.runflow h4 { margin: 10px 0 4px; font-size: 20px; font-weight: 650; letter-spacing: -0.035em; line-height: 1.25; }
.rf-work h4 { color: #1e489b; }
.runflow .rf-subtitle { font-size: 11px; line-height: 1.55; color: var(--muted); }
.rf-agent {
  margin-top: 17px;
  padding: 15px 14px 12px;
  border: 1px solid #243b64;
  border-radius: 10px;
  color: #f4f7ff;
  background: radial-gradient(ellipse at 0 0, #20365a, #0c1528 85%);
  box-shadow: 0 5px 14px #152c5710;
}
.rf-agent-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.rf-agent-head .rf-icon { width: 23px; height: 23px; color: #a7c7ff; }
.rf-agent-head strong { flex: 1; font-size: 15px; font-weight: 600; letter-spacing: -0.025em; }
.rf-loop-symbol { flex: none; margin-left: auto; color: #95bafc; font-size: 22px; line-height: 1; }
.rf-agent > .rf-eyebrow { font-size: 8px; color: #afc8ee; letter-spacing: 0.065em; }
.rf-research-steps {
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 13px 0;
  margin: 0;
}
.rf-research-steps li { position: relative; padding-left: 13px; }
.rf-research-steps li::before { content: ''; position: absolute; top: 6px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #80b1ff; }
.rf-research-steps strong { display: block; font-size: 11.5px; font-weight: 600; }
.rf-research-steps span { display: block; margin-top: 1px; color: #b9c6df; font-size: 10px; }
.rf-agent-return { display: flex; gap: 6px; align-items: center; padding-top: 9px; border-top: 1px solid #ffffff21; color: #b9cef2; font-size: 10px; }
.rf-agent-return > span { color: #96beff; font-size: 16px; line-height: 1; }
.rf-work-note { display: grid; gap: 5px; margin-top: 12px; color: #3a5d97; font-size: 10px; }
.rf-private { display: flex; align-items: center; gap: 5px; color: #586b8b; }
.rf-private svg { width: 13px; height: 13px; flex: none; }

/* Dashed arrows are the submitted snapshot, not a shared filesystem. */
.rf-connector { position: relative; align-self: center; height: 0; border-top: 1.5px dashed #cb7652; }
.rf-connector::after { content: ''; position: absolute; right: 0; top: -4px; border-left: 6px solid #cb7652; border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
.rf-checkpoint {
  align-self: center;
  border: 1px solid var(--rf-orange-line);
  border-radius: 12px;
  padding: 15px 12px;
  background: #ffffff;
  text-align: center;
}
.rf-checkpoint .rf-stage-label { justify-content: center; }
.rf-checkpoint .rf-stage-label, .rf-judge .rf-stage-label { color: var(--rf-orange); }
.rf-checkpoint .rf-number, .rf-judge .rf-number { border-color: #e8bca7; }
.rf-checkpoint h4 { margin: 17px 0 8px; font-size: 18px; letter-spacing: -0.055em; color: #a9411d; }
.rf-checkpoint h4 code { font-size: 1em; }
.rf-checkpoint > p { color: var(--muted); font-size: 11px; }
.rf-snapshot { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 17px; padding-top: 15px; border-top: 1px solid #f0dcd1; }
.rf-snapshot .rf-icon { color: #b26342; margin-bottom: 2px; }
.rf-snapshot strong { font-size: 10.5px; font-weight: 650; }
.rf-snapshot > span { font-size: 10px; color: var(--muted); line-height: 1.5; }
.rf-judge { display: flex; flex-direction: column; background: #fff; border-color: var(--rf-orange-line); }
.rf-judge h4 { color: #a9411d; }
.rf-judge-origin { margin-top: 17px; padding: 8px 9px; border-radius: 6px; background: #fff2e9; color: #9a4b2e; font-size: 10px; }
.rf-judge-steps { display: grid; gap: 19px; padding: 20px 0; margin: auto 0; list-style: none; }
.rf-judge-steps li { display: flex; gap: 9px; position: relative; }
.rf-step-dot { position: relative; z-index: 1; width: 7px; height: 7px; flex: none; margin-top: 6px; border: 1px solid #c47654; border-radius: 50%; background: #fff; }
.rf-judge-steps li:not(:last-child)::after { content: ''; position: absolute; top: 12px; left: 3px; bottom: -24px; width: 1px; background: #edddd3; }
.rf-judge-steps strong { display: block; font-size: 11px; font-weight: 650; }
.rf-judge-steps li div > span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.rf-judge-note { border-top: 1px solid #f0dcd1; padding-top: 11px; color: #986046; font-size: 10px; }

/* A continuous return path points back into the same Work container. */
.rf-feedback { position: relative; padding: 29px 0 0; text-align: center; }
.rf-feedback::before {
  content: '';
  position: absolute;
  left: 19%;
  right: 14%;
  top: 0;
  height: 38px;
  border: solid #ca7955;
  border-width: 0 1.5px 1.5px;
  border-radius: 0 0 9px 9px;
}
.rf-feedback::after { content: ''; position: absolute; left: calc(19% - 3px); top: 0; border-bottom: 6px solid #ca7955; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; }
.rf-feedback > div { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rf-feedback strong { padding: 0 12px; background: var(--rf-warm); color: var(--rf-orange); font-size: 12px; font-weight: 650; }
.rf-feedback strong > span { display: none; }
.rf-feedback div > span { color: #876453; font-size: 10.5px; }
.article .runflow .rf-boundary { margin-top: 14px; padding-top: 12px; border-top: 1px solid #f0e3dc; color: #75665e; font-size: 10px; text-align: center; }

.rf-final {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 19px 22px;
  border: 1px solid #203253;
  border-radius: 12px;
  background: linear-gradient(120deg, #12223b, #0a1222);
  color: #f4f7ff;
}
.rf-final > .rf-icon { width: 28px; height: 28px; color: #accbff; }
.rf-final .rf-eyebrow { color: #a9bfe0; font-size: 8px; margin-bottom: 4px; }
.rf-final strong { display: block; font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -0.025em; }
.article .rf-final p { margin-left: auto; padding-left: 20px; border-left: 1px solid #ffffff24; color: #bfcbe0; font-size: 10.5px; line-height: 1.65; }
.article .runflow-figure figcaption { margin: 13px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.65; }
.runflow-figure figcaption a { white-space: nowrap; margin-left: 4px; }
.runflow-figure { scroll-margin-top: 80px; }
#how-an-agent-is-evaluated { scroll-margin-top: 85px; }

@media (max-width: 760px) {
  .rf-setup { padding: 18px; }
  .rf-cycle { padding: 14px; }
  .rf-flow { grid-template-columns: minmax(0, 1.2fr) 16px minmax(0, .75fr) 16px minmax(0, 1fr); }
  .rf-work, .rf-judge { padding: 12px; }
  .rf-agent { padding: 12px 10px; }
  .rf-agent-head { gap: 6px; }
  .rf-agent-head strong { font-size: 13px; }
  .rf-checkpoint { padding: 14px 8px; }
  .rf-checkpoint h4 { font-size: 16px; }
}

@media (max-width: 680px) {
  .rf-setup { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
  .rf-setup-arrow { transform: rotate(90deg); justify-self: center; line-height: 1; }
  .rf-setup-plan p { max-width: 35em; }
  .rf-start, .rf-finish { font-size: 10px; }
  .rf-cycle { padding: 16px; }
  .rf-cycle-head { align-items: flex-start; gap: 8px; padding-bottom: 15px; }
  .rf-cycle-head > span:last-child { max-width: 105px; text-align: right; font-size: 10px; }
  .rf-flow { grid-template-columns: 1fr; }
  .rf-work, .rf-judge { padding: 18px; }
  .runflow h4 { font-size: 22px; }
  .rf-agent { padding: 17px; }
  .rf-agent-head strong { font-size: 16px; }
  .rf-agent > .rf-eyebrow { font-size: 8.5px; }
  .rf-research-steps { gap: 12px; }
  .rf-research-steps strong { font-size: 13px; }
  .rf-research-steps span, .rf-work-note { font-size: 11px; }
  .rf-connector { height: 28px; width: 0; justify-self: center; border-top: 0; border-left: 1.5px dashed #cb7652; }
  .rf-connector::after { top: auto; right: -3px; bottom: 0; border: 3px solid transparent; border-top: 6px solid #cb7652; border-bottom: 0; }
  .rf-checkpoint { padding: 17px; }
  .rf-checkpoint h4 { margin-top: 13px; font-size: 23px; }
  .rf-snapshot { margin-top: 13px; padding-top: 13px; }
  .rf-snapshot strong { font-size: 12px; }
  .rf-snapshot > span { font-size: 11px; }
  .rf-judge-origin, .rf-judge-note { font-size: 11px; }
  .rf-judge-steps { gap: 22px; padding: 22px 0; }
  .rf-judge-steps strong { font-size: 13px; }
  .rf-judge-steps li div > span { font-size: 11px; }
  .rf-feedback { padding-top: 20px; }
  .rf-feedback::before, .rf-feedback::after { display: none; }
  .rf-feedback > div { padding: 12px; border: 1px solid #ebc5b3; border-radius: 9px; background: #fff4ec; }
  .rf-feedback strong { padding: 0; background: none; }
  .rf-feedback strong > span { display: inline; margin-right: 4px; }
  .rf-feedback div > span { font-size: 11px; }
  .rf-final { display: grid; grid-template-columns: auto 1fr; padding: 19px; gap: 14px 12px; }
  .rf-final strong { font-size: 17px; }
  .article .rf-final p { grid-column: 1 / -1; margin: 0; padding: 12px 0 0; border-left: 0; border-top: 1px solid #ffffff24; font-size: 11px; }
  .article .runflow-figure figcaption { font-size: 11px; }
}

/* ---------------- grids & cards ---------------- */

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-wide { gap: 40px; }
@media (max-width: 940px) { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }

.card {
  position: relative;
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: var(--radius);
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: #cfd4de;
}
.card::after {
  content: "";
  position: absolute;
  left: 26px; right: 26px; top: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
  border-radius: 0 0 2px 2px;
}
.card:hover::after { transform: scaleX(1); }

.card .num, .dark-card .num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.card h3 { font-size: 18.5px; font-weight: 650; letter-spacing: -0.014em; }
.card p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--muted); }

.card-foot {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px dashed var(--line-soft);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
}
.status.run { color: var(--green); }
.status.run::before { background: var(--green); animation: status-ping 2.4s var(--ease) infinite; }
.status.prep { color: var(--faint); }
.status.prep::before { background: var(--faint); }
@keyframes status-ping {
  0% { box-shadow: 0 0 0 0 rgba(63, 154, 74, 0.45); }
  70% { box-shadow: 0 0 0 7px rgba(63, 154, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 154, 74, 0); }
}

.go {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--accent-deep);
}

.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 7px;
  margin-left: 2px;
}
.tag.d-pre  { background: var(--accent-soft); color: var(--accent-deep); }
.tag.d-vis  { background: #ebe6ff; color: #5c47b8; }
.tag.d-post { background: #e3f3e6; color: #2f7a3a; }

/* ---------------- dark panel (signature tasks) ---------------- */

.panel-dark {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid #16213a;
  background:
    radial-gradient(110% 100% at 100% 0%, rgba(40, 80, 170, 0.22), transparent 52%),
    radial-gradient(100% 110% at -6% 116%, rgba(30, 60, 130, 0.18), transparent 48%),
    var(--field);
  color: var(--field-text);
  padding: clamp(36px, 5vw, 60px);
  box-shadow: 0 44px 90px -44px rgba(4, 7, 15, 0.55);
}
.panel-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.035;
  pointer-events: none;
}
.panel-dark > * { position: relative; z-index: 1; }
.panel-dark h2 { color: #ffffff; }

.dark-card {
  position: relative;
  border: 1px solid rgba(140, 170, 230, 0.16);
  background: linear-gradient(180deg, rgba(140, 170, 230, 0.05), rgba(140, 170, 230, 0.015));
  border-radius: var(--radius);
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.4s var(--ease);
}
.dark-card:hover {
  border-color: rgba(138, 184, 255, 0.5);
  background: linear-gradient(180deg, rgba(138, 184, 255, 0.07), rgba(140, 170, 230, 0.02));
  transform: translateY(-3px);
}
.dark-card .num { color: var(--field-muted); }
.dark-card h3 { font-size: 18px; font-weight: 650; letter-spacing: -0.014em; color: var(--field-text); }
.dark-card p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--field-body); }
.dark-card .card-foot { border-top-color: rgba(140, 170, 230, 0.14); }
.dark-card .status.run { color: #7fd48c; }
.dark-card .status.run::before { background: #7fd48c; }
.dark-card .status.prep { color: var(--field-muted); }
.dark-card .status.prep::before { background: var(--field-muted); }
.dark-card .go { color: var(--accent-bright); }

/* ---------------- formula plate ---------------- */

.formula {
  position: relative;
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow-soft);
}
.fx {
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.9vw, 18px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-weight: 500;
}
.frac { display: inline-flex; flex-direction: column; text-align: center; vertical-align: middle; }
.frac .top { padding: 0 14px 8px; color: var(--accent-deep); }
.frac .bot { padding: 8px 14px 0; border-top: 1.5px solid var(--ink); color: var(--muted); }
.formula .note { margin: 22px 0 0; color: var(--muted); font-size: 14.5px; max-width: 76ch; }
.formula .note b { color: var(--ink); }

/* ---------------- data tables ---------------- */

.table-scroll { overflow-x: auto; scrollbar-width: thin; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.data th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 14px;
  white-space: nowrap;
}
table.data td { padding: 11px 14px; vertical-align: top; }
table.data .r { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.r, table.data td:first-child { font-family: var(--font-mono); font-size: 13px; }

.panel-dark table.data th { color: var(--field-muted); border-bottom: 1px solid rgba(140, 170, 230, 0.24); }
.panel-dark table.data td { border-bottom: 1px solid rgba(140, 170, 230, 0.09); color: var(--field-body); }
.panel-dark table.data td:first-child { color: var(--accent-bright); }
.panel-dark table.data tbody tr { transition: background 0.25s var(--ease); }
.panel-dark table.data tbody tr:hover { background: rgba(140, 170, 230, 0.06); }

section.block table.data th { color: var(--faint); border-bottom: 1px solid var(--ink); }
section.block table.data td { border-bottom: 1px solid var(--line-soft); }
section.block table.data tbody tr:hover { background: rgba(59, 124, 240, 0.04); }
table.data.desc td:first-child {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--accent-deep);
  white-space: nowrap;
  width: 1%;
  padding-right: 24px;
}

/* ---------------- lists ---------------- */

ul.checks, ul.forbid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
ul.checks li, ul.forbid li {
  position: relative;
  padding: 13px 0 13px 30px;
  font-size: 15px;
  line-height: 1.6;
}
ul.checks li + li, ul.forbid li + li { border-top: 1px dashed rgba(140, 170, 230, 0.14); }
section.block > .wrap ul.checks li + li,
section.block > .wrap ul.forbid li + li { border-top: 1px dashed var(--line-soft); }

ul.checks li::before {
  content: "";
  position: absolute;
  left: 2px; top: 21px;
  width: 12px; height: 7px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
ul.forbid li::before, ul.forbid li::after {
  content: "";
  position: absolute;
  left: 7px; top: 22px;
  width: 14px; height: 2px;
  background: var(--red);
  transform: rotate(45deg);
}
ul.forbid li::after { transform: rotate(-45deg); }

.panel-dark ul.checks li { color: var(--field-body); }
.panel-dark ul.checks li b { color: var(--field-text); }
.panel-dark ul.checks li::before { border-color: #7fd48c; }
ul.forbid li b { color: var(--ink); }
ul.checks li b { color: var(--ink); }

/* ---------------- code / tree blocks ---------------- */

pre.tree {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.75;
  color: var(--field-body);
  background:
    radial-gradient(120% 130% at 100% -10%, rgba(40, 80, 170, 0.14), transparent 52%),
    var(--field);
  border: 1px solid #16213a;
  border-radius: var(--radius);
  padding: 24px 26px;
  overflow-x: auto;
  box-shadow: 0 24px 50px -30px rgba(4, 7, 15, 0.45);
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 170, 230, 0.25) transparent;
}
pre.tree::-webkit-scrollbar { height: 8px; }
pre.tree::-webkit-scrollbar-thumb { background: rgba(140, 170, 230, 0.2); border-radius: 4px; }
pre.tree::-webkit-scrollbar-track { background: transparent; }
pre.tree .c { color: var(--field-muted); }
pre.tree .g { color: #9ad4a6; }
pre.tree .a { color: var(--accent-bright); }

/* ---------------- callouts / steps (contribute) ---------------- */

/* notes — a hairline, a tracked label in its own column, and the text.
   No box, no fill: these are asides, not alerts. */
.callout {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 0 24px;
  margin-top: 28px;
  padding: 15px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.68;
  letter-spacing: 0;
  color: var(--muted);
}
.callout p { margin: 0; }
@media (max-width: 720px) {
  .callout { grid-template-columns: 1fr; gap: 7px; }
}

.steps {
  counter-reset: step;
  display: flex;
  flex-direction: column;
  max-width: 860px;
}
.step-item {
  counter-increment: step;
  position: relative;
  padding: 26px 0 30px 74px;
}
.step-item + .step-item { border-top: 1px solid var(--line-soft); }
.step-item::before {
  content: "0" counter(step);
  position: absolute;
  left: 0; top: 30px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-deep);
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: 8px;
  padding: 7px 10px;
}
.step-item::after {
  content: "";
  position: absolute;
  left: 21px; top: 76px; bottom: 6px;
  width: 1px;
  background: linear-gradient(var(--line), transparent);
}
.step-item:last-child::after { display: none; }
.step-item h3 { font-size: 18.5px; font-weight: 650; letter-spacing: -0.014em; margin-bottom: 10px; }
.step-item p { margin: 0 0 6px; color: var(--muted); font-size: 15px; }
.step-item ul { margin: 10px 0 0; padding-left: 20px; color: var(--muted); font-size: 14.5px; }
.step-item ul li { margin: 5px 0; }
.step-item ul li b { color: var(--ink); }

/* ---------------- RSI-Anything (contribute pagehead) ---------------- */

.pagehead h1.vibe-h1 {
  font-family: "Manrope", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-size: clamp(62px, 10.4vw, 140px);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 0.94;
  max-width: none;
  margin: 6px 0 0;
  text-shadow: 0 18px 60px rgba(4, 7, 15, 0.75);
}
.pagehead h1.vibe-h1 em { font-style: normal; color: var(--accent-bright); }

/* rule under the wordmark — turns title + tagline into one lockup */
.vibe-rule {
  height: 1px;
  max-width: 660px;
  margin: clamp(18px, 2.2vw, 28px) 0 clamp(12px, 1.4vw, 16px);
  background: linear-gradient(90deg,
    var(--accent-bright), rgba(138, 184, 255, 0.4) 38%, transparent 92%);
}
.vibe-tag {
  margin: 0 0 clamp(18px, 2.2vw, 26px);
  font-family: var(--font-mono);
  font-size: clamp(12.5px, 1.7vw, 16px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

/* the contribute page runs tighter than the rest of the site */
.page-vibe .pagehead { padding: clamp(60px, 7vw, 92px) 0 clamp(40px, 4.6vw, 60px); }
.page-vibe .pagehead .lede { max-width: 56ch; margin-top: 0; }
.page-vibe section.block { padding: clamp(40px, 4.5vw, 60px) 0; }
.page-vibe .section-head { margin-bottom: clamp(20px, 2.4vw, 30px); }
.page-vibe .step-item { padding: 20px 0 24px 74px; }
.page-vibe .step-item::before { top: 22px; }
.page-vibe .step-item::after { top: 66px; }
.page-vibe .steps { max-width: 900px; }
.page-vibe .cta-band { margin-top: 0; }
.page-vibe .h-lg em { font-style: normal; color: var(--accent-deep); }
.page-vibe .h-lg { text-wrap: balance; }
/* push the tree right so it is not stranded mid-canvas with dead space beside it */
.page-vibe .pagehead .ph-frame.ph-right { left: 20%; }

@media (max-width: 860px) {
  /* narrow screens have no room beside the text — move the tree further out
     and deepen the scrim so the lede stays readable over it */
  .page-vibe .pagehead .ph-frame.ph-right { left: 38%; opacity: 0.9; }
  .page-vibe .field-scrim {
    background:
      linear-gradient(180deg, rgba(4, 7, 15, 0.55), rgba(4, 7, 15, 0.8) 55%, rgba(4, 7, 15, 0.7)),
      radial-gradient(110% 120% at 2% 58%, rgba(4, 7, 15, 0.96) 34%, rgba(4, 7, 15, 0.55) 68%, transparent 86%);
  }
}

/* labelled callout variants — mirror the README admonitions */
.callout .k {
  margin: 3px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.callout.warn { border-top-color: rgba(208, 80, 59, 0.4); }
.callout.warn .k { color: var(--red); }
.callout a { color: var(--accent-deep); }

/* the two hardware lanes inside a step */
.lanes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: 14px;
  margin-top: 18px;
}
@media (max-width: 860px) { .lanes { grid-template-columns: 1fr; } }
.lane {
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: 12px;
  padding: 18px 20px;
}
.lane h4 {
  margin: 0 0 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.lane p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--muted); }
.lane ol { margin: 9px 0 0; padding-left: 18px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.lane ol li { margin: 4px 0; }
.lane ol li b, .lane p b { color: var(--ink); }

.step-item pre.tree { margin-top: 15px; }
.step-item .callout + .callout { margin-top: 22px; }

/* ---------------- env list (1-node tasks) ---------------- */

.env-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 860px) { .env-grid { grid-template-columns: 1fr; } }

.env {
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: var(--radius);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.env:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: #cfd4de; }
.env-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.env-name a {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.env-name a:hover { color: var(--accent-deep); text-decoration: none; }
.env-name .up {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.env-body { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--muted); }
.env-target {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  border-top: 1px dashed var(--line-soft);
  padding-top: 12px;
}
.env-target b {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-right: 8px;
}

/* ---------------- filter chips (tasks) ---------------- */

.filterbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.chip {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------------- CTA band ---------------- */

.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid #16213a;
  background:
    radial-gradient(120% 160% at 100% -20%, rgba(40, 80, 170, 0.3), transparent 55%),
    radial-gradient(100% 140% at 0% 130%, rgba(30, 60, 130, 0.2), transparent 50%),
    var(--field);
  color: var(--field-text);
  padding: clamp(32px, 4.6vw, 52px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  box-shadow: 0 40px 80px -40px rgba(4, 7, 15, 0.5);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #ffffff; }
.cta-band p { margin: 0 0 10px; color: var(--field-body); max-width: 62ch; }
.cta-band p b { color: #ffffff; font-weight: 700; }


/* ============================================================
   THE CLOSING PAIR — the compute ask and the RSI-Anything shout
   One light card and one dark card on the same skeleton: flat
   line icon, mono label, one headline, one line, and (only on
   the loud one) a button.
   ============================================================ */
.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.8vw, 20px);
  align-items: stretch;
}
.pcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border-radius: 18px;
  padding: clamp(28px, 3.4vw, 40px);
}
/* both buttons pin to the bottom, so the pair lines up whatever the copy does */
.pcard .btn { margin-top: auto; padding-top: 12px; padding-bottom: 12px; }
.pc-icon { display: block; margin-bottom: 4px; }
.pc-icon svg { width: 30px; height: 30px; display: block; }
.pc-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.pcard.light {
  background: var(--paper-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.pcard.light .pc-icon { color: var(--accent); }
.pcard.light .pc-label { color: var(--faint); }
.pcard.light p { color: var(--muted); }

.pcard.dark {
  position: relative;
  overflow: hidden;
  border: 1px solid #16213a;
  background:
    radial-gradient(120% 160% at 100% -20%, rgba(40, 80, 170, 0.3), transparent 55%),
    radial-gradient(100% 140% at 0% 130%, rgba(30, 60, 130, 0.2), transparent 50%),
    var(--field);
  color: var(--field-text);
  box-shadow: 0 40px 80px -40px rgba(4, 7, 15, 0.5);
}
.pcard.dark > * { position: relative; }
.pcard.dark .pc-icon { color: var(--accent-bright); }
/* the brand is the headline on this card — same lockup as the contribute page */
.pc-wordmark {
  font-family: "Manrope", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-size: clamp(34px, 3.8vw, 46px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #ffffff;
  margin: 2px 0 2px;
}
.pc-wordmark em { font-style: normal; color: var(--accent-bright); }
/* both cards share one body block under the wordmark */
.pcard p {
  margin: 2px 0 0;
  font-size: 15.5px;
  line-height: 1.62;
  max-width: 46ch;
}
.pcard.light p { color: var(--muted); }
.pcard.dark p { color: var(--field-body); }
.pcard.dark p b { color: #ffffff; font-weight: 700; }
.pcard.light .pc-wordmark { color: var(--ink); }
.pcard.light .pc-wordmark em { color: var(--accent); }
.pcard.dark p { color: var(--field-body); }
.pcard.light .btn { background: var(--paper); border-color: var(--line); color: var(--ink); }
.pcard.light .btn:hover { border-color: var(--ink); }

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

/* ---------------- buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  border-radius: 9px;
  padding: 12px 22px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* on dark: white primary, hairline secondary */
.btn-solid {
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 10px 30px -12px rgba(255, 255, 255, 0.45);
}
.btn-solid:hover { background: #f1f4fb; box-shadow: 0 14px 34px -12px rgba(255, 255, 255, 0.55); }
.btn-ghost {
  color: var(--field-text);
  border-color: rgba(140, 170, 230, 0.3);
  background: rgba(140, 170, 230, 0.05);
}
.btn-ghost:hover { border-color: rgba(138, 184, 255, 0.65); background: rgba(138, 184, 255, 0.08); }

/* on paper: ink primary, hairline secondary */
.btn-paper {
  background: var(--ink);
  color: #ffffff;
  box-shadow: 0 10px 26px -12px rgba(16, 19, 24, 0.5);
}
.btn-paper:hover { background: #22262e; }
.cta-band .btn-paper {
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 10px 28px -12px rgba(255, 255, 255, 0.4);
}
.btn-paper-ghost {
  color: var(--ink);
  border-color: var(--line);
  background: transparent;
}
.btn-paper-ghost:hover { border-color: var(--accent); background: rgba(59, 124, 240, 0.05); }

/* ---------------- blog list ---------------- */

.post-list { display: flex; flex-direction: column; gap: 14px; max-width: 860px; }
.post-card {
  display: block;
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: var(--radius);
  padding: 28px 30px;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.post-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: #cfd4de; }
.post-card .meta, .article .meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.post-card .cat, .article .cat {
  color: var(--accent-deep);
  border: 1px solid #cddcff;
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 2px 8px;
}
.post-card h2 { font-size: 23px; font-weight: 650; letter-spacing: -0.018em; margin-bottom: 10px; }
.post-card p { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
.post-card .more {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--accent-deep);
  transition: letter-spacing 0.3s var(--ease);
}
.post-card:hover .more { letter-spacing: 0.04em; }

/* ---------------- article ---------------- */

.article {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 88px) 28px 96px;
}
.article .backlink {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
  display: inline-block;
  margin-bottom: 34px;
}
.article .backlink:hover { color: var(--accent-deep); text-decoration: none; }
.article h1 {
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 600;
  letter-spacing: -0.028em;
  margin: 0 0 22px;
}
.article .standfirst {
  font-size: clamp(17px, 1.9vw, 19.5px);
  line-height: 1.65;
  color: var(--muted);
  border-left: 3px solid var(--accent);
  padding-left: 22px;
  margin: 0 0 40px;
}
.article h2 {
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.016em;
  margin: 52px 0 16px;
}
.article h2 .sec {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 8px;
}
.article p { margin: 0 0 18px; }
.article a { color: var(--accent-deep); }
.article blockquote {
  margin: 26px 0;
  border: 1px solid #16213a;
  background: var(--field);
  color: var(--accent-bright);
  border-radius: 10px;
  padding: 18px 24px;
  font-size: 14px;
  letter-spacing: 0.02em;
  overflow-x: auto;
  white-space: nowrap;
}
.article ul { padding-left: 22px; color: var(--ink); }
.article ul li { margin: 7px 0; }

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

footer.site {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(100% 120% at 100% 0%, rgba(40, 80, 170, 0.16), transparent 48%),
    radial-gradient(90% 110% at 0% 120%, rgba(30, 60, 130, 0.14), transparent 50%),
    var(--field);
  color: var(--field-body);
  border-top: 1px solid var(--line);
}
.footer-inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 80px) 28px 48px;
  display: flex;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.footer-brand { max-width: 500px; }
.footer-brand .wm {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.01em;
  color: var(--field-text);
  margin-bottom: 14px;
}
.footer-brand .wm .dex { color: var(--accent-bright); }
.footer-brand p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--field-muted); }
.footer-brand p.ack { font-size: 15.5px; line-height: 1.7; color: var(--field-body); }
.footer-brand p.ack strong { display: block; margin-bottom: 6px; color: var(--field-text); font-weight: 700; }

.footer-cols { display: flex; gap: clamp(40px, 6vw, 90px); }
.footer-cols h4 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--field-muted);
  margin: 0 0 14px;
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { margin: 9px 0; }
.footer-cols a { color: var(--field-body); font-size: 14px; }
.footer-cols a:hover { color: var(--field-text); text-decoration: none; }

.footer-base {
  position: relative;
  border-top: 1px solid rgba(140, 170, 230, 0.1);
}
.footer-base span {
  display: block;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--field-muted);
}

/* ---------------- scroll reveal ---------------- */

.reveal { opacity: 0; transform: translateY(22px); }
.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease) var(--rd, 0ms), transform 0.9s var(--ease) var(--rd, 0ms);
}
html.shot .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------------- small screens ---------------- */

@media (max-width: 720px) {
  .hero-inner { padding: 120px 24px 56px; }
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(4, 7, 15, 0.3), rgba(4, 7, 15, 0.55) 34%, rgba(4, 7, 15, 0.9) 62%);
  }
  .field-hint { display: none; }
  .pipeline .arrow { display: none; }
  .step-item { padding-left: 0; }
  .step-item::before { position: static; display: inline-block; margin-bottom: 12px; }
  .step-item::after { display: none; }
  .footer-inner { flex-direction: column; gap: 36px; }
}

/* ============================================================
   HERO SPLIT — standalone title on paper, the field boxed below
   ============================================================ */
.hero-split {
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
  padding: clamp(40px, 5vw, 68px) 0 clamp(56px, 7vw, 92px);
}
.hero-head { margin-bottom: clamp(40px, 5.5vw, 68px); text-align: center; }

.hero-split .hero-title {
  color: var(--ink);
  font-family: "Manrope", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-size: clamp(46px, 6.6vw, 88px);
  font-weight: 800;
  letter-spacing: -0.028em;
  margin: 0;
  max-width: none;
}
.hero-split .hero-title em { color: var(--accent); }

.hero-below {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(24px, 3vw, 36px);
}
.hero-split .hero-sub { color: var(--muted); margin: 0; max-width: 640px; font-size: clamp(15.5px, 1.6vw, 17.5px); }
.hero-split .hero-sub strong { color: var(--ink); }
.hero-split .hero-ctas { margin: 4px 0 0; flex: none; }
.hero-split .btn-ghost { color: var(--ink); border-color: var(--line); background: var(--paper-2); }
.hero-split .btn-ghost:hover { border-color: var(--ink); }
@media (max-width: 820px) {
  .hero-below { flex-direction: column; }
}

.hero-viewport {
  position: relative;
  height: clamp(380px, 38vw, 540px);
  border-radius: 20px;
  overflow: hidden;
  background: var(--field);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
}
.hero-viewport .f3d-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.hero-viewport .field-hint { right: 20px; bottom: 16px; pointer-events: none; }

/* scene switcher pills */
.vp-switch {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 16px;
  display: flex;
  gap: 6px;
}
.vp-switch .vs {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--field-muted);
  background: rgba(4, 7, 15, 0.55);
  border: 1px solid rgba(140, 170, 230, 0.22);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.vp-switch .vs:hover { color: var(--field-text); border-color: rgba(138, 184, 255, 0.5); }
.vp-switch .vs.on {
  color: #ffffff;
  border-color: var(--accent);
  background: rgba(59, 124, 240, 0.22);
}

@media (max-width: 720px) {
  .hero-viewport { height: clamp(320px, 62vw, 460px); border-radius: 14px; }
  .hero-viewport .field-hint { display: none; }
}

/* ============================================================
   HOME v2 — centered section heads, placeholder team/partners,
   signature-task tab frame
   ============================================================ */
.center-head { text-align: center; margin-bottom: clamp(30px, 4vw, 48px); }
.center-head .lede-c {
  margin: 12px 0 0;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* team placeholders */
.people-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(14px, 2vw, 26px);
  max-width: 920px;
  margin: 0 auto;
}
.ph-person { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ph-person .ava {
  width: clamp(56px, 6vw, 80px);
  height: clamp(56px, 6vw, 80px);
  border-radius: 50%;
  border: 1px dashed var(--line);
  background: var(--surface);
}
.ph-person .bar {
  width: 70%;
  height: 9px;
  border-radius: 5px;
  background: var(--line-soft);
}

/* partner institution logos — infinite marquee
   Two identical .logo-group children; the track slides exactly one group
   width (-50%) and snaps back, so the loop is seamless. */
.logo-marquee {
  position: relative;
  overflow: hidden;
  padding: 6px 0;
  /* soften both edges so logos fade in and out rather than clipping */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.logo-track {
  display: flex;
  width: max-content;
  animation: logo-scroll 32s linear infinite;
  will-change: transform;
}
.logo-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.lg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 0 clamp(20px, 3vw, 40px);
}
.lg img {
  max-height: var(--lh, 40px);
  max-width: 200px;
  width: auto;
  object-fit: contain;
  opacity: 0.8;
  filter: grayscale(0.1);
  transition: opacity 0.25s var(--ease), filter 0.25s var(--ease);
}
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.lg:hover img { opacity: 1; filter: grayscale(0); }

@keyframes logo-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  /* no scrolling: the single visible group wraps into a static centred grid */
  .logo-marquee { -webkit-mask-image: none; mask-image: none; }
  .logo-track { animation: none; width: 100%; }
  .logo-group { flex: 1 1 100%; flex-wrap: wrap; justify-content: center; }
  .logo-group[aria-hidden="true"] { display: none; }
}

/* signature-task frame with tabs */
.task-frame {
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: 20px;
  padding: clamp(20px, 3vw, 36px);
  box-shadow: var(--shadow-lift);
}
.task-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: clamp(20px, 2.6vw, 30px); }
.task-frame .tt {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
              background 0.25s var(--ease);
}
.task-frame .tt:hover { color: var(--ink); border-color: var(--faint); }
.task-frame .tt.on { color: #ffffff; background: var(--ink); border-color: var(--ink); }

.task-panel { display: none; }
.task-panel.on { display: block; }

.task-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.task-tags .tag {
  width: 74px;
  height: 22px;
  border-radius: 999px;
  border: 1px dashed var(--line);
  background: var(--surface);
}

.task-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.8vw, 20px);
  margin-bottom: clamp(18px, 2.4vw, 26px);
}
.ph-img {
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  border: 1px dashed var(--line);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.task-card { border-top: 1px solid var(--line-soft); padding-top: clamp(16px, 2vw, 22px); }
.task-card .skel { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.task-card .skel span { height: 10px; border-radius: 5px; background: var(--line-soft); }
.task-card .skel span:nth-child(1) { width: 92%; }
.task-card .skel span:nth-child(2) { width: 84%; }
.task-card .skel span:nth-child(3) { width: 55%; }

@media (max-width: 860px) {
  .people-row { grid-template-columns: repeat(3, 1fr); }
  .lg { height: 54px; padding: 0 22px; }
  .lg img { max-height: calc(var(--lh, 40px) * 0.82); }
  .task-media { grid-template-columns: 1fr; }
}

/* star-trail backdrop on page headers (blog / tasks) */
.pagehead .ph-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0.8;
  pointer-events: none;
}

/* 3D-model pageheads (blog: river, contribute: tree): scene shifted right,
   the text side stays dark under the scrim */
.pagehead .ph-frame.ph-right { left: 12%; width: 100%; opacity: 1; }

/* Framed figures inside the article. EVERY figure is one <figure class="fig-frame">
   at exactly the text-column width — no breakout variants, so the left and right
   edges of prose, diagrams and tables all line up down the page. */
.article .fig-frame {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper-2);
  padding: clamp(18px, 2.6vw, 28px);
  margin: 26px 0 30px;
  overflow-x: auto;
}
/* content that already carries its own frame only needs aligning */
.article .fig-frame.fig-bare {
  border: 0;
  background: none;
  padding: 0;
}
.article .fig-frame.fig-dark {
  background:
    radial-gradient(120% 160% at 100% -20%, rgba(40, 80, 170, 0.28), transparent 55%),
    var(--field);
  border-color: #16213a;
}

/* the frame is the only chrome: anything that carries its own border, fill or
   padding sheds it inside a figure, or the figure reads as a box in a box */
.article .fig-frame > * { margin: 0; }
.article .fig-frame .runflow {
  border: 0;
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.article .fig-frame .table-scroll { margin: 0; }
.article .fig-frame .data { margin: 0; }

/* RSI-Anything: five steps with aligned contributor and agent roles. */
#contributing-with-rsi-anything, #rsi-anything-pipeline { scroll-margin-top: 85px; }
.anything-flow {
  --af-columns: 168px minmax(0, .9fr) minmax(0, 1.15fr);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper-2);
  font-size: 12px;
  line-height: 1.6;
}
.anything-flow * { min-width: 0; }
.af-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  color: var(--field-text);
  background: radial-gradient(ellipse at 100% 0, #213d68, transparent 75%), #0c1527;
}
.af-kicker, .af-columns, .af-role {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.af-kicker { display: block; margin-bottom: 7px; color: #b6cae9; }
.af-banner > div > strong { display: block; font-size: 20px; line-height: 1.35; font-weight: 600; letter-spacing: -.03em; }
.af-estimate { flex: none; padding-left: 24px; border-left: 1px solid #ffffff26; text-align: right; }
.af-banner .af-estimate strong { font-family: var(--font-mono); color: #b8d4ff; font-size: 35px; font-weight: 500; line-height: 1.1; letter-spacing: -.06em; }
.af-estimate > span { display: block; margin-top: 8px; color: #b6c6de; font-size: 9px; }
.af-columns { display: grid; grid-template-columns: var(--af-columns); gap: 22px; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--line); color: var(--muted); background: #f8f9fc; }
.af-columns > span { display: flex; align-items: center; gap: 7px; }
.af-columns > span:last-child { color: var(--accent-deep); }
.af-columns svg { width: 17px; height: 17px; flex: none; }
.af-steps { list-style: none; padding: 0; margin: 0; }
.af-step { position: relative; display: grid; grid-template-columns: var(--af-columns); gap: 18px 22px; padding: 22px 24px; }
.af-step + .af-step { border-top: 1px solid var(--line-soft); }
.af-step:not(:last-child)::after { content: ''; position: absolute; width: 1px; top: 53px; bottom: -22px; left: 38px; background: #d5e0f2; }
.af-stage { display: flex; align-items: flex-start; gap: 11px; }
.af-number { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex: none; width: 29px; height: 29px; border: 1px solid #bfd2f3; border-radius: 50%; background: #f1f6ff; color: var(--accent-deep); font-family: var(--font-mono); font-size: 10px; line-height: 1; }
.af-stage h3 { margin: 3px 0 5px; font-size: 13px; font-weight: 650; line-height: 1.4; letter-spacing: -.02em; }
.af-time { display: block; color: var(--muted); font-family: var(--font-mono); font-size: 9px; line-height: 1.5; }
.article .af-step p { margin: 1px 0 0; font-size: 12px; line-height: 1.65; color: var(--muted); }
.af-you strong { color: #34415a; font-weight: 600; }
.article .af-agent p { color: #2a426b; }
.af-role { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.anything-flow code { font-family: var(--font-mono); font-size: .9em; color: var(--accent-deep); overflow-wrap: anywhere; }
.af-repository { grid-column: 2 / -1; display: flex; gap: 12px; align-items: center; padding: 13px 15px; border: 1px solid #d3e0f6; border-radius: 8px; background: linear-gradient(100deg, #edf4ff, #f7faff); }
.af-repository > svg { width: 23px; height: 23px; flex: none; color: var(--accent-deep); }
.af-repository strong { display: block; color: #264f92; font-size: 12px; font-weight: 600; }
.af-repository div > span { display: block; margin-top: 2px; color: #5b6e8d; font-size: 10px; }
.af-result { display: flex; align-items: center; gap: 13px; padding: 18px 24px; border-top: 1px solid #dce6f6; background: #f1f5fc; }
.af-result > svg { width: 25px; height: 25px; flex: none; color: var(--accent-deep); }
.af-result strong { display: block; color: #254979; font-size: 14px; font-weight: 650; letter-spacing: -.02em; }
.af-result div > span { display: block; margin-top: 2px; color: #5e6f88; font-size: 11px; }
.article .anything-figure figcaption { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.article .anything-links { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; margin-top: 24px; }
.anything-links a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; font-weight: 600; }
.anything-links a:first-child { padding: 10px 15px; border: 1px solid #cad9f3; border-radius: 7px; background: #edf3fe; }
.anything-links a:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 4px; }

@media (max-width: 760px) {
  .anything-flow { --af-columns: 145px minmax(0, .9fr) minmax(0, 1.15fr); }
  .af-columns, .af-step { column-gap: 15px; padding-left: 18px; padding-right: 18px; }
  .af-step:not(:last-child)::after { left: 32px; }
  .af-banner { gap: 18px; padding: 22px 18px; }
  .af-banner > div > strong { font-size: 18px; }
  .af-estimate { padding-left: 18px; }
  .af-columns { font-size: 9px; letter-spacing: .04em; }
}

@media (max-width: 620px) {
  .af-banner { align-items: flex-start; flex-direction: column; gap: 18px; padding: 22px; }
  .af-banner > div > strong { max-width: 15em; font-size: 20px; }
  .af-estimate { display: flex; gap: 14px; align-items: center; padding: 15px 0 0; border-left: 0; border-top: 1px solid #ffffff26; text-align: left; width: 100%; }
  .af-banner .af-estimate strong { flex: none; font-size: 30px; }
  .af-estimate > span { max-width: 15em; margin-top: 0; font-size: 10px; }
  .af-kicker { font-size: 9px; }
  .af-columns { display: none; }
  .af-step { grid-template-columns: 1fr; gap: 12px; padding: 22px; }
  .af-step:not(:last-child)::after { left: 36px; }
  .af-stage { gap: 12px; }
  .af-stage h3 { font-size: 15px; margin-top: 3px; margin-bottom: 3px; }
  .af-time { font-size: 10px; }
  .af-you, .af-agent { padding-left: 41px; }
  .af-role { position: static; display: block; width: auto; height: auto; margin: 0 0 3px; overflow: visible; clip-path: none; white-space: normal; color: var(--muted); font-size: 9px; }
  .af-agent .af-role { color: var(--accent-deep); }
  .article .af-step p { margin: 0; font-size: 12px; }
  .af-repository { grid-column: 1; margin-left: 41px; padding: 12px; align-items: flex-start; gap: 9px; }
  .af-repository > svg { width: 18px; height: 18px; margin-top: 2px; }
  .af-repository strong { font-size: 11px; }
  .af-repository div > span { font-size: 10px; line-height: 1.6; }
  .af-result { align-items: flex-start; padding: 18px 22px; }
  .af-result > svg { width: 22px; height: 22px; }
  .af-result strong { font-size: 13px; }
}

/* Scale the desktop diagram evenly while keeping it centered. */
@media (min-width: 681px) {
  .article .fig-frame.runflow-figure {
    width: 90%;
    margin-inline: auto;
    zoom: 0.9;
  }
}

/* ============================================================
   TASKS PAGE — sidebar-tab task frames, jewel (signature) and
   slate (1-node) themes
   ============================================================ */
.task-frame.side {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
.task-side { display: flex; flex-direction: column; gap: 8px; }
.task-side .tt {
  text-align: left;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13px;
}
.task-frame .tc-label {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.task-frame .tc-body { margin: 12px 0 0; line-height: 1.66; }
.task-frame .tc-target { margin: 12px 0 0; font-size: 14.5px; }
.task-frame .tc-target b { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-right: 8px; }
.task-frame .tc-link {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.task-tags .tag.t {
  width: auto;
  height: auto;
  padding: 4px 11px;
  border-style: solid;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper);
}

/* compute budget — the one tag that must read at a glance, on any ground */
.task-tags .tag.compute,
.task-frame.deep .task-tags .tag.compute,
.task-frame.slate .task-tags .tag.compute {
  width: auto;
  height: auto;
  padding: 4px 11px;
  border: 1px solid #f2c53d;
  border-radius: 999px;
  background: #f5cb3f;
  color: #14110a;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* inline schematics sit where a figure image would */
.task-fig svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
}

/* black & gold — signature tasks */
.task-frame.deep {
  position: relative;
  background: linear-gradient(180deg, #0c0d11 0%, #060709 100%);
  border: 1px solid #c8a457;
  box-shadow:
    inset 0 0 0 1px rgba(200, 164, 87, 0.14),
    0 0 0 4px #060709,
    0 0 0 5px rgba(200, 164, 87, 0.35),
    0 24px 50px -24px rgba(0, 0, 0, 0.6);
  color: #f1ede4;
}
/* home page: the same black & gold, dialled back so it sits on paper */
.task-frame.deep.soft {
  background: linear-gradient(180deg, rgba(12, 13, 17, 0.93), rgba(6, 7, 9, 0.96));
  border-color: rgba(200, 164, 87, 0.5);
  box-shadow:
    inset 0 0 0 1px rgba(200, 164, 87, 0.09),
    0 0 0 4px rgba(6, 7, 9, 0.5),
    0 0 0 5px rgba(200, 164, 87, 0.16),
    0 24px 50px -24px rgba(0, 0, 0, 0.4);
}
.task-frame.deep .task-tabs .tt { color: #d9c48f; background: rgba(200, 164, 87, 0.06); border-color: rgba(200, 164, 87, 0.35); }
.task-frame.deep .task-tabs .tt:hover { color: #f3e6c4; border-color: rgba(200, 164, 87, 0.75); }
.task-frame.deep .task-tabs .tt.on { color: #14110a; background: linear-gradient(180deg, #e2c479, #c8a457); border-color: #e2c479; }
.task-frame.deep .task-tags .tag.t { color: #d9c48f; background: rgba(200, 164, 87, 0.06); border-color: rgba(200, 164, 87, 0.4); }
.task-frame.deep .ph-img { background: rgba(255, 255, 255, 0.025); border-color: rgba(200, 164, 87, 0.3); color: rgba(217, 196, 143, 0.55); }
.task-frame.deep .task-card { border-top-color: rgba(200, 164, 87, 0.28); }
/* the home page's skeleton placeholders, on the dark ground */
.task-frame.deep .task-tags .tag { background: rgba(200, 164, 87, 0.07); border-color: rgba(200, 164, 87, 0.26); }
.task-frame.deep .task-card .skel span { background: rgba(200, 164, 87, 0.13); }
.task-frame.deep .tc-label { color: #c8a457; }
.task-frame.deep .h-md { color: #ffffff; }
.task-frame.deep .tc-body, .task-frame.deep .tc-target { color: #d8d3c8; }
.task-frame.deep .tc-target b { color: #c8a457; }
.task-frame.deep .tc-link { color: #e2c479; }
.task-frame.deep .tf-sig {
  margin-left: auto;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c8a457;
}

/* slate grey — 1-node tasks */
.task-frame.slate { background: #e9f0fb; border-color: #d1dcef; }
.task-frame.slate .task-tabs .tt { background: #f8fbff; }
.task-frame.slate .task-tabs .tt.on { color: #ffffff; background: #3a414d; border-color: #3a414d; }
.task-frame.slate .task-tags .tag.t { background: #f8fbff; }
.task-frame.slate .ph-img { background: #f8fbff; border-color: #cfdbee; }
.task-frame.slate .task-card { border-top-color: #d1dcef; }

@media (max-width: 820px) {
  .task-frame.side { grid-template-columns: 1fr; }
  .task-side { flex-direction: row; flex-wrap: wrap; }
}

/* the facts: one row of three matched cards under the hero */
.hero-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(26px, 3.2vw, 40px);
}
.hero-cards .hc {
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hc-k {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.hero-principles {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.hero-principles li { position: relative; padding-left: 15px; line-height: 1.5; }
.hero-principles li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.hero-principles span { color: var(--faint); font-weight: 400; }

.hero-fx {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-fx .fx {
  font-size: 14.5px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hero-fx .frac .top { padding: 0 12px 6px; }
.hero-fx .frac .bot { padding: 6px 12px 0; border-top-width: 1.4px; }

.hero-steps {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.hero-steps .hs { display: flex; align-items: baseline; gap: 12px; }
.hero-steps .k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  width: 92px;
  flex: none;
}
.hero-steps .v { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--ink); }
.hero-steps .v.accent { color: var(--accent); }

@media (max-width: 960px) {
  .hero-cards { grid-template-columns: 1fr; }
}
.hero-flow .pipeline .v.accent { color: var(--accent-deep); }

@media (max-width: 820px) {
  .hero-facts { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   SCROLL CHOREOGRAPHY — what changes between the sections
   Each section should arrive as its own place rather than
   scrolling past as more of the same page: the seams soften,
   one band opens out to full bleed as it rises, the dark
   ground lifts up to meet the footer, and the star field
   steps back once you have left it.

   Every effect is driven by a CSS custom property that one
   rAF-throttled handler in site.js writes from scroll
   position; each rests at a sane value when that handler
   never runs (no JS, reduced motion).
   ============================================================ */

/* --- seams: the rule between sections fades out at both ends --- */
section.block { position: relative; }
section.block + section.block { border-top: 0; }
section.block + section.block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(var(--maxw), calc(100% - 56px));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* a section carrying its own faint ground; it washes in and out at its
   own edges, so the tone change reads as a gradient rather than a step
   (and makes the seam rule redundant on both sides) */
section.block.tinted {
  background: linear-gradient(180deg,
    var(--paper) 0%, #f2eee5 13%, #f2eee5 87%, var(--paper) 100%);
}
section.block.tinted::before,
section.block.tinted + section.block::before { display: none; }

/* --- the band that opens out to full bleed as it arrives (--band 0 → 1) --- */
.band-block { padding: clamp(52px, 6.5vw, 78px) 0; }
.bleed-band {
  --band: 1;                              /* rest state: open */
  --band-w: calc(var(--maxw) - 56px);
  position: relative;
  width: min(100%, calc(var(--band-w) + (100% - var(--band-w)) * var(--band)));
  margin: 0 auto;
  padding: clamp(28px, 3.6vw, 48px) 0 clamp(20px, 2.6vw, 34px);
  border-radius: calc(20px * (1 - var(--band)));
  overflow: hidden;
  background: linear-gradient(180deg, #f3f6fd, #e9eff9);
}
/* star dust, cleared out of the middle so the logos stay legible */
.bleed-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(59, 124, 240, 0.30) 0.9px, transparent 0.9px),
    radial-gradient(circle, rgba(59, 124, 240, 0.20) 0.9px, transparent 0.9px);
  background-size: 20px 20px, 34px 34px;
  background-position: 0 0, 11px 15px;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 6%, rgba(0, 0, 0, 0.22) 36%, #000 100%);
          mask-image: radial-gradient(ellipse at center, transparent 6%, rgba(0, 0, 0, 0.22) 36%, #000 100%);
  pointer-events: none;
}
/* the ring only exists while the band is still a card */
.bleed-band::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  border-radius: inherit;
  opacity: calc(1 - var(--band));
  pointer-events: none;
}
.bleed-band > * { position: relative; z-index: 1; }
.bleed-band .center-head { margin-bottom: clamp(20px, 2.6vw, 32px); }
/* acknowledgement, lifted out of the footer to sit under the partner logos */
.partners-ack {
  max-width: 78ch;
  margin: 18px auto 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--faint);
}

/* --- the dark ground rising into the footer (--rise 0 → 1) --- */
.ground-rise {
  --rise: 1;                              /* rest state: risen */
  position: relative;
  height: clamp(52px, 6.5vw, 86px);
  overflow: hidden;
  background: var(--paper);
}
.ground-rise i {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 26px 26px 0 0;
  background:
    radial-gradient(130% 170% at 78% 130%, rgba(40, 80, 170, 0.30), transparent 62%),
    var(--field);
  transform: translateY(calc(100% * (1 - var(--rise))));
}
.ground-rise + footer.site { border-top: 0; }

/* --- the star field steps back once you have scrolled past it (--hero 0 → 1) --- */
.hero-viewport { --hero: 0; }
.hero-viewport .f3d-frame {
  transform: scale(calc(1 + 0.035 * var(--hero)));
  transform-origin: 50% 42%;
}
.hero-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  background: var(--paper);
  opacity: calc(0.28 * var(--hero));
  pointer-events: none;
}

/* --- how far down the page you are, on the nav's own edge --- */
.nav::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  transform: scaleX(var(--prog, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
.nav.scrolled::after { opacity: 0.95; }

/* below the band's contained width there is no room to inset it, so it
   simply stays open — a full-width card with a ring reads as a mistake */
@media (max-width: 1180px) {
  .bleed-band { --band: 1 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .bleed-band { --band: 1 !important; }
  .ground-rise { --rise: 1 !important; }
  .hero-viewport { --hero: 0 !important; }
  .nav::after { display: none; }
}

/* ============================================================
   TASK FIGURES — the two-figure pair inside a task panel
   Left: the source project's own teaser, on its own white ground
   so a paper figure never sits on our tint. Right: that task's
   agent run, drawn from the real submission trajectory.
   ============================================================ */
.task-fig {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-2);
  overflow: hidden;
}
.task-fig .fig-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  padding: 14px;
  min-height: 0;
}
.task-fig img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.task-fig .fig-cap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 13px 10px;
  border-top: 1px solid var(--line-soft);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.task-fig .fig-cap b { color: var(--muted); font-weight: 500; }
.task-fig .fig-cap a { color: var(--accent-deep); text-decoration: none; }
.task-fig .fig-cap a:hover { text-decoration: underline; }
/* the figure keeps its light ground inside the black-and-gold frame */
.task-frame.deep .task-fig { border-color: rgba(200, 164, 87, 0.34); }
.task-frame.deep .task-fig .fig-cap {
  background: #14150f;
  border-top-color: rgba(200, 164, 87, 0.22);
  color: rgba(217, 196, 143, 0.6);
}
.task-frame.deep .task-fig .fig-cap b { color: #d9c48f; }
.task-frame.deep .task-fig .fig-cap a { color: #e2c479; }

/* ---- the trajectory figure itself ---- */
.traj {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-mono);
}
.traj .gl { stroke: var(--line-soft); stroke-width: 1; }
.traj .ax { stroke: #d7dae1; stroke-width: 1; }
.traj .tk { fill: var(--faint); font-size: 10px; letter-spacing: 0.08em; }
.traj .axlbl { fill: var(--faint); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.traj .run { fill: var(--muted); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.traj .base { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 5 4; opacity: 0; }
.traj .best-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.traj .stem { stroke: #c3cbd8; stroke-width: 1.4; transform-origin: center bottom; }
.traj .stem.dead { stroke: #e6e8ee; }
.traj .dot { fill: var(--muted); }
.traj .peak { fill: var(--accent); }
.traj .halo { fill: var(--accent); opacity: 0.14; }
.traj .zero line { stroke: #c9ccd5; stroke-width: 1.3; stroke-linecap: round; }
/* a white outline keeps both labels legible over dots, stems and the dashed rule */
.traj .baselbl {
  fill: var(--ink); font-size: 10px; letter-spacing: 0.1em; opacity: 0;
  paint-order: stroke; stroke: #fff; stroke-width: 3.2px; stroke-linejoin: round;
}
.traj .axis-break {
  fill: none;
  stroke: #8b91a1;
  stroke-width: 1.4;
  stroke-linecap: round;
}
.traj .peaklbl {
  fill: var(--accent-deep); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em;
  paint-order: stroke; stroke: #fff; stroke-width: 3.6px; stroke-linejoin: round;
}

/* the draw — only runs once the panel it lives in is the active one */
.traj .mk, .traj .peak, .traj .halo, .traj .dot { transform-box: fill-box; transform-origin: center; }
.task-panel.on .traj .base,
.task-panel.on .traj .baselbl { animation: tr-fade 0.7s ease-out 0.15s forwards; }
.task-panel.on .traj .stem { animation: tr-grow 0.5s var(--ease) var(--d) both; }
.task-panel.on .traj .mk { animation: tr-pop 0.45s var(--ease) var(--d) both; }
.task-panel.on .traj .peaklbl { animation: tr-fade 0.5s ease-out calc(var(--d) + 0.18s) both; }
.task-panel.on .traj .best-line {
  stroke-dasharray: 1600; stroke-dashoffset: 1600;
  animation: tr-draw 2.9s cubic-bezier(0.4, 0, 0.2, 1) 0.55s forwards;
}
@keyframes tr-fade { to { opacity: 1; } }
@keyframes tr-grow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes tr-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes tr-draw { to { stroke-dashoffset: 0; } }

/* Screenshot mode settles every figure. Without this, ?shot=1 captures the
   charts mid-draw — .best-line sits at stroke-dashoffset:1600 and marks at
   opacity:0 until their staggered delays elapse, so a screenshot of a figure
   with late delays comes out empty. Same reset as reduced motion. */
html.shot .traj * {
  animation: none !important; opacity: 1 !important;
  stroke-dashoffset: 0 !important;
}
html.shot .traj .stem, html.shot .traj .mk, html.shot .traj .dot,
html.shot .traj .peak, html.shot .traj .halo, html.shot .traj .bar { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .traj * { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
  .traj .stem, .traj .mk, .traj .dot, .traj .peak, .traj .halo, .traj .bar { transform: none !important; }
}

/* ============================================================
   TASK GALLERY — every task's teaser, running past
   ============================================================ */
.gallery {
  position: relative;
  overflow: hidden;
  padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.gallery-track { display: flex; width: max-content; animation: gal-scroll 64s linear infinite; will-change: transform; }
.gallery-group { display: flex; align-items: stretch; flex: 0 0 auto; }
.gal-card {
  flex: 0 0 auto;
  width: clamp(240px, 22vw, 320px);
  margin-right: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-2);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-soft);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.gal-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-lift); text-decoration: none; }
.gal-card .gal-img {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: var(--paper-2);
}
.gal-card img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.gal-card .gal-name {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--line-soft);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.gal-card .gal-name span { display: block; margin-top: 3px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.gallery:hover .gallery-track { animation-play-state: paused; }
@keyframes gal-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .gallery { -webkit-mask-image: none; mask-image: none; }
  .gallery-track { animation: none; flex-wrap: wrap; width: 100%; }
  .gallery-group { flex: 1 1 100%; flex-wrap: wrap; justify-content: center; }
  .gallery-group[aria-hidden="true"] { display: none; }
}

/* ---- run readout: shown instead of a chart when there is no trajectory
   to draw (one submission, or none the judge would accept) ---- */
.task-media.one { grid-template-columns: 1fr; max-width: 620px; }
.run-readout {
  width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 4px 8px;
}
.run-readout .rr-k {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.rr-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}
.rr-row span { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); }
.rr-row b {
  grid-row: span 2;
  align-self: center;
  font-family: var(--font-mono);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent-deep);
}
.rr-row b.rr-none {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--red);
}
.rr-row i { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.run-readout .rr-note {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  border-top: 1px solid var(--line-soft);
  padding-top: 11px;
}
.task-frame.deep .rr-row span, .task-frame.deep .run-readout .rr-note { color: #d8d3c8; }
.task-frame.deep .rr-row b { color: #e2c479; }

/* the two card links need air between them */
.task-card .tc-link + .tc-link { margin-left: 18px; }
/* one-line gallery subtitles keep every card the same height */
.gal-card .gal-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   CONTRIBUTE "JOY" PASS — marketing line + dopamine accents
   (scoped to body.joy so the rest of the site stays untouched)
   ============================================================ */
.joy .vibe-tag.joy-line {
  font-family: var(--font-sans);
  font-size: clamp(19px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  background: linear-gradient(92deg, #ff7a6b 4%, #c084fc 46%, #7cb1ff 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.joy .joy-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 clamp(18px, 2.2vw, 26px); }
.joy .jc {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid;
}
.joy .jc-a, .joy .jc-b, .joy .jc-c { color: var(--field-body); border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.05); }

/* five steps, one ordered scale. Each step owns a colour, cool to warm in
   order, and everything inside the step — badge, rail, callout labels, lane
   headers — takes that one colour. Nothing inside a step introduces another. */
.joy .step-item { --sc: var(--accent); }
.joy .step-item::before {
  color: #ffffff;
  background: var(--sc);
  border-color: var(--sc);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--sc) 70%, transparent);
}
.joy .step-item::after {
  left: 21px; top: 78px; bottom: 10px;
  width: 2px;
  background: linear-gradient(color-mix(in srgb, var(--sc) 45%, transparent), color-mix(in srgb, var(--sc) 10%, transparent));
}
.joy .step-item h3 { color: var(--ink); }
.joy .step-item h3::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sc);
  margin: 0 10px 2px 0;
  vertical-align: middle;
}

/* the two GPU lanes: quiet paper, headers in the step colour */
.joy .lane { background: var(--paper-2); border-color: var(--line); }
.joy .lane h4 { color: var(--sc); }

/* callouts: a hairline in the step colour, the label in the step colour; warnings stay red */
.joy .callout {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--sc) 45%, transparent);
  background: none;
  border-radius: 0;
  padding: 15px 0 0;
}
.joy .callout .k { color: var(--sc); }
.joy .callout.warn { border-top-color: var(--line); }
.joy .callout.warn .k { color: var(--ink); }

/* two ways in: coral / violet cards */
.joy .grid-2 .card .num { color: var(--faint); }

/* the closing band goes vivid */
.joy .cta-band {
  background:
    radial-gradient(120% 170% at 100% -30%, rgba(255, 255, 255, 0.18), transparent 55%),
    linear-gradient(120deg, #7c3aed 0%, #d6438f 55%, #f59e0b 115%);
  border-color: transparent;
}
.joy .cta-band p { color: rgba(255, 255, 255, 0.86); }
.joy .cta-band .btn-paper { background: #ffffff; color: #1a1030; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.45); }
.joy .cta-band .btn-paper:hover { background: #fff7e8; }

/* ============================================================
   HOME HERO — the benchmark shown as an exam map
   The sky is atmosphere; the real environments are the picture.
   ============================================================ */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hero-exam {
  --hero: 0;
  --map-line: rgba(185, 206, 199, 0.28);
  position: relative;
  isolation: isolate;
  min-height: max(880px, calc(100svh - 58px));
  overflow: hidden;
  color: #edf2ef;
  background: #050908;
  border-bottom: 1px solid rgba(168, 202, 190, 0.18);
}

.hero-exam > .exam-sky {
  position: absolute;
  z-index: -3;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(0.55) brightness(0.48) contrast(1.1);
  transform: scale(calc(1 + 0.035 * var(--hero)));
  transform-origin: 50% 42%;
}

.exam-atmosphere {
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 56% 38% at 50% 21%, rgba(3, 7, 6, 0.18), rgba(3, 7, 6, 0.73) 76%),
    linear-gradient(180deg, rgba(2, 6, 5, 0.16) 0%, rgba(2, 6, 5, 0.35) 37%, rgba(2, 6, 5, 0.82) 72%, rgba(2, 6, 5, 0.96) 100%);
}
.exam-atmosphere::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.022;
}
.exam-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #f7faf8;
  opacity: calc(0.16 * var(--hero));
}

.exam-shell.wrap-wide {
  position: relative;
  z-index: 1;
  max-width: 1580px;
  min-height: inherit;
  padding: 0 clamp(24px, 3vw, 56px) 30px;
  pointer-events: none;
}

.exam-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(203, 218, 212, 0.58);
}
.exam-meta span { display: inline-flex; align-items: center; gap: 10px; }
.exam-meta i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a8daca;
  box-shadow: 0 0 12px rgba(168, 218, 202, 0.7);
}
.exam-meta b { margin-left: 8px; color: #edf2ef; font-weight: 500; }

.exam-intro {
  position: relative;
  text-align: center;
  padding: clamp(42px, 6vh, 74px) 0 clamp(38px, 5vh, 58px);
  pointer-events: none;
}
.exam-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 19px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(203, 218, 212, 0.62);
}
.exam-kicker span { width: 28px; height: 1px; background: rgba(174, 207, 196, 0.32); }
.exam-intro h1 {
  max-width: none;
  margin: 0;
  color: #f4f5f2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(66px, 7.8vw, 118px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.052em;
  text-wrap: balance;
  text-shadow: 0 2px 36px rgba(0, 0, 0, 0.5);
}
.exam-intro h1 em {
  color: #b9dacc;
  font-weight: 400;
  text-shadow: 0 0 34px rgba(150, 210, 190, 0.18);
}
.exam-question {
  margin: 27px 0 0;
  font-size: clamp(16px, 1.55vw, 21px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.016em;
  color: rgba(226, 234, 230, 0.84);
}
.exam-positioning {
  margin: 13px 0 0;
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.85vw, 11px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(177, 207, 196, 0.76);
}
.exam-definition {
  max-width: 680px;
  margin: 12px auto 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(218, 228, 223, 0.7);
}
.exam-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 22px;
  pointer-events: auto;
}
.hero-exam .btn-paper {
  background: #e9efeb;
  color: #07100d;
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 12px 36px -14px rgba(197, 229, 218, 0.62);
}
.hero-exam .btn-paper:hover { background: #ffffff; }
.exam-text-link {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: rgba(218, 229, 224, 0.7);
  border-bottom: 1px solid rgba(177, 207, 196, 0.3);
}
.exam-text-link:hover { color: #ffffff; text-decoration: none; border-color: #b9dacc; }

.exam-map {
  position: relative;
  max-width: 1480px;
  margin: 0 auto;
  padding-top: 17px;
  border-top: 1px solid rgba(177, 207, 196, 0.17);
  pointer-events: none;
}
.exam-map-title {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 35px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: rgba(203, 218, 212, 0.52);
}
.exam-map-title strong {
  color: rgba(226, 235, 231, 0.78);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
}
.exam-map-mark { width: 18px; height: 18px; color: #9bc9ba; }
.exam-map-mark svg { display: block; width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.5; }
.exam-map-title > span:last-child { margin-left: 8px; }

.exam-map-head {
  display: grid;
  grid-template-columns: 190px minmax(170px, 0.72fr) minmax(250px, 1.05fr) minmax(350px, 1.5fr);
  gap: 22px;
  padding: 11px 0 9px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(180, 199, 192, 0.42);
}

.exam-tree {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: stretch;
  gap: 22px;
}
.exam-root,
.exam-domain,
.exam-environment {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.exam-root::after,
.exam-domain::after,
.exam-environment::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  width: 22px;
  border-top: 1px solid currentColor;
  opacity: 0.52;
}
.exam-root { align-self: stretch; color: #b9dacc; }
.exam-root > div,
.exam-domain > div,
.exam-environment > div,
.exam-targets div { min-width: 0; }
.exam-root strong,
.exam-domain strong,
.exam-environment strong,
.exam-targets strong {
  display: block;
  overflow: hidden;
  color: rgba(232, 239, 235, 0.88);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.018em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exam-root strong { font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 400; }
.exam-root small,
.exam-domain small,
.exam-environment small,
.exam-targets small {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #92a69e;
}
.exam-node-dot {
  display: inline-flex;
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  background: rgba(4, 9, 7, 0.72);
  box-shadow: 0 0 0 3px rgba(4, 9, 7, 0.45);
}

.exam-branches {
  position: relative;
  display: grid;
  grid-template-rows: repeat(3, minmax(90px, auto));
  gap: 7px;
}
.exam-branches::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 45px;
  bottom: 45px;
  border-left: 1px solid var(--map-line);
}
.exam-branch {
  --branch: #a9d8c9;
  position: relative;
  display: grid;
  grid-template-columns: minmax(170px, 0.72fr) minmax(250px, 1.05fr) minmax(350px, 1.5fr);
  gap: 22px;
  align-items: center;
  width: 100%;
  min-height: 90px;
  padding-left: 25px;
  color: var(--branch);
}
.exam-branch::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 25px;
  border-top: 1px solid currentColor;
  opacity: 0.52;
}
.branch-post { --branch: #c7b9e7; }
.branch-vision { --branch: #dac57f; }
.exam-domain,
.exam-environment { color: var(--branch); }
.exam-domain strong,
.exam-environment strong { color: rgba(225, 235, 230, 0.82); }

.exam-targets {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 24px);
  min-width: 0;
  margin: 0;
  padding: 0 0 0 5px;
  list-style: none;
}
.exam-targets::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 27px;
  border-top: 1px solid currentColor;
  opacity: 0.52;
}
.exam-targets li {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--branch);
}
.exam-targets i,
.exam-map-foot i {
  display: block;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(4, 9, 7, 0.85);
  background: currentColor;
}
.exam-targets strong {
  overflow: visible;
  font-size: 12px;
  font-weight: 600;
  color: #d4ded9;
  text-overflow: clip;
  white-space: normal;
}
.exam-targets small { font-size: 10px; letter-spacing: 0.03em; color: #92a69e; }

.exam-map-foot {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 42px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(177, 207, 196, 0.12);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  color: #92a69e;
}
.exam-map-foot span { display: inline-flex; align-items: center; gap: 7px; }
.exam-map-foot i.pre { color: #a9d8c9; }
.exam-map-foot i.post { color: #c7b9e7; }
.exam-map-foot i.vision { color: #dac57f; }
.exam-map-foot b { margin-left: auto; font-weight: 500; color: #92a69e; }

@media (max-width: 1080px) {
  .exam-map-head { display: none; }
  .exam-map-title { border-bottom: 1px solid rgba(177, 207, 196, 0.12); padding-bottom: 12px; height: auto; }
  .exam-tree { display: block; }
  .exam-root {
    width: max-content;
    max-width: 100%;
    min-height: 66px;
  }
  .exam-root::after { display: none; }
  .exam-branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 12px; }
  .exam-branches::before { display: none; }
  .exam-branch {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    min-height: 0;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--branch) 28%, transparent);
    border-radius: 12px;
    background: rgba(3, 8, 6, 0.52);
  }
  .exam-branch::before,
  .exam-domain::after,
  .exam-environment::after,
  .exam-targets::before { display: none; }
  .exam-domain,
  .exam-environment { padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--branch) 18%, transparent); }
  .exam-targets { display: flex; flex-direction: column; gap: 11px; padding: 0; }
  .exam-targets strong { font-size: 11px; }
}

@media (max-width: 720px) {
  .hero-exam { min-height: 0; }
  .exam-shell.wrap-wide { padding: 0 18px 22px; }
  .exam-meta { min-height: 44px; font-size: 8px; letter-spacing: 0.06em; }
  .exam-meta span:first-child { max-width: 56%; }
  .exam-intro { padding: 38px 0 42px; }
  .exam-kicker { margin-bottom: 16px; font-size: 8px; gap: 9px; }
  .exam-kicker span { width: 18px; }
  .exam-intro h1 { font-size: clamp(52px, 15.8vw, 72px); line-height: 0.94; }
  .exam-question { max-width: 280px; margin: 22px auto 0; font-size: 16px; }
  .exam-positioning { max-width: 310px; margin: 13px auto 0; font-size: 8px; line-height: 1.7; }
  .exam-definition { max-width: 330px; margin-top: 10px; font-size: 11.5px; line-height: 1.55; }
  .exam-actions { flex-direction: column; gap: 13px; margin-top: 19px; }
  .hero-exam .btn-paper { padding: 10px 18px; }
  .exam-map-title > span:last-child { display: none; }
  .exam-map-title { padding-bottom: 11px; }
  .exam-root { min-height: 64px; }
  .exam-branches { grid-template-columns: 1fr; gap: 10px; }
  .exam-branch { width: 100%; min-width: 0; padding: 17px 16px; }
  .exam-domain strong,
  .exam-environment strong { white-space: normal; }
  .exam-map-foot { flex-wrap: wrap; gap: 12px 18px; padding-top: 15px; }
  .exam-map-foot b { flex-basis: 100%; margin-left: 0; line-height: 1.5; }
}

/* Touch users must be able to pan the page from anywhere in the tall hero.
   The sky remains animated; drag-to-look is a desktop enhancement. */
@media (hover: none), (pointer: coarse) {
  .hero-exam > .exam-sky { pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-exam { --hero: 0 !important; }
}

/* ---- signature card: the Marin ladder as a table figure ---- */
.task-fig .fig-body.fig-table { padding: 18px 22px; }
.ladder {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink);
}
.ladder th, .ladder td { padding: 8px 10px; text-align: left; white-space: nowrap; }
.ladder th {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--ink);
}
.ladder td { border-bottom: 1px solid var(--line-soft); color: var(--muted); }
.ladder tbody tr:last-child td { border-bottom: 0; }
.ladder .r { text-align: right; }
.ladder td.rung { font-weight: 700; color: var(--accent-deep); }
.ladder td:nth-child(2) { color: var(--ink); }
@media (max-width: 720px) { .ladder { font-size: 11px; } .ladder th, .ladder td { padding: 6px 6px; } }
/* the measured-curve figure keeps its side labels inside the box on narrow cards */
.traj.sig .tk, .traj.sig .peaklbl { font-size: 10.5px; }

/* ---- the search timeline: a third, full-width figure in a task panel ---- */
.task-media .task-fig.wide { grid-column: 1 / -1; }
.task-fig.wide .fig-body { aspect-ratio: auto; padding: 10px 16px 6px; }
.traj.evo .lbl { font-size: 10.5px; letter-spacing: 0.04em; }
.traj.evo .note { font-size: 9.5px; letter-spacing: 0.02em; fill: #6b7280; }
.traj.evo .glyph { font-weight: 700; }
.traj.evo .bar { transform-box: fill-box; transform-origin: left center; }
.traj.evo .head { stroke: var(--accent); stroke-width: 1.2; opacity: 0; }
.task-panel.on .traj.evo .lbl,
.task-panel.on .traj.evo .note { opacity: 0; animation: tr-fade 0.4s ease-out var(--d) forwards; }
.task-panel.on .traj.evo .bar { animation: tr-growx 0.6s var(--ease) var(--d) both; }
.task-panel.on .traj.evo .head { animation: tr-sweep 5.7s linear 0.3s forwards; }
@keyframes tr-growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tr-sweep { 0% { opacity: 0.9; transform: translateX(0); } 98% { opacity: 0.9; } 100% { opacity: 0; transform: translateX(var(--sweep, 880px)); } }
@media (max-width: 860px) { .task-fig.wide .fig-body { overflow-x: auto; } .traj.evo { min-width: 900px; } }
/* the best-so-far figure shares the timeline's animation rules; its own metrics */
.traj.best .note { font-size: 9.5px; fill: #6b7280; }
.traj.best .glyph { font-weight: 700; }
/* ---- reference-style progress plot: raw values, sans type, boxed legend ---- */
.traj.ref, .traj.ref text { font-family: var(--font-sans); }
.traj.ref .ttl { font-size: 18px; font-weight: 700; fill: var(--ink); letter-spacing: -0.01em; }
.traj.ref .sub { font-size: 11.5px; fill: #6b7280; }
.traj.ref .tk { font-size: 11px; fill: #6b7280; letter-spacing: 0; }
.traj.ref .axl { font-size: 12px; fill: #4b5160; }
.traj.ref .gl { stroke: #e6e8ee; }
.traj.ref .ax { stroke: #c9ccd5; }
.traj.ref .ann { font-size: 11.5px; fill: var(--ink); letter-spacing: 0; }
.traj.ref .lead { stroke: #5b6170; stroke-width: 0.9; }
.traj.ref .lg { font-size: 12px; fill: var(--ink); }
.traj.ref .lgbox { fill: #fff; stroke: #d7dae1; stroke-width: 1; }
.task-panel.on .traj.ref .lead { opacity: 0; animation: tr-fade 0.4s ease-out var(--d) forwards; }
/* the progress plot sits smaller and centred, not edge to edge */
.task-media .task-fig.wide { justify-self: center; width: min(100%, 960px); }

/* ============================================================
   HOME HERO — measured benchmark evidence over the original sky
   ============================================================ */
.hero-benchmark {
  --hero: 0;
  position: relative;
  isolation: isolate;
  min-height: max(880px, calc(100svh - 58px));
  overflow: hidden;
  color: #f5f7fb;
  background: #030711;
  border-bottom: 1px solid rgba(161, 191, 240, 0.18);
}

.hero-benchmark > .benchmark-sky {
  position: absolute;
  z-index: -3;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: none;
  transform: scale(calc(1 + 0.035 * var(--hero)));
  transform-origin: 50% 42%;
}

.benchmark-wash {
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 54% 46% at 15% 18%, rgba(3, 7, 17, 0.58), transparent 77%),
    linear-gradient(180deg, rgba(3, 7, 17, 0.03) 0%, rgba(3, 7, 17, 0.14) 50%, rgba(3, 7, 17, 0.72) 100%);
}
.benchmark-wash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #f7f9ff;
  opacity: calc(0.13 * var(--hero));
}

.benchmark-shell.wrap-wide {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-width: 1580px;
  min-height: inherit;
  padding: 0 clamp(24px, 3vw, 56px) 25px;
  pointer-events: none;
}

.benchmark-meta {
  position: relative;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(220, 229, 246, 0.68);
}
.benchmark-meta span { display: inline-flex; align-items: center; gap: 9px; }
.benchmark-meta i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a7d8ff;
  box-shadow: 0 0 15px rgba(167, 216, 255, 0.82);
}
.benchmark-meta b { color: #ffffff; font-weight: 500; }

.benchmark-intro {
  position: relative;
  z-index: 5;
  align-self: center;
  max-width: 30ch;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.84);
}
.benchmark-intro p {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9bcaff;
}
.benchmark-intro h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(45px, 4.45vw, 68px);
  font-weight: 400;
  line-height: 0.93;
  letter-spacing: -0.048em;
  color: #ffffff;
}
.benchmark-intro h1 em {
  color: #e2c479;
  font-weight: 400;
}
.benchmark-intro > span {
  display: block;
  max-width: 560px;
  margin-top: 15px;
  font-size: clamp(13px, 1.15vw, 17px);
  font-weight: 650;
  line-height: 1.4;
  color: rgba(239, 244, 253, 0.86);
}

/* The hero stage: the claim on the left, ONE readable figure on the right.
   The previous build stacked three finished charts at 20-34% opacity as
   wallpaper behind the copy — at that size and opacity none of them could be
   read, and their titles and annotations collided with each other and with the
   headline. A result used as texture stops being a result. */
.benchmark-stage {
  position: relative;
  z-index: 5;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.5fr);
  align-items: center;
  gap: clamp(24px, 3.4vw, 64px);
  /* the proof bar is absolutely positioned at the bottom; keep clear of it */
  padding: clamp(12px, 2vw, 28px) 0 96px;
}

.benchmark-exhibit {
  margin: 0;
  min-width: 0;
}
.benchmark-exhibit svg {
  display: block;
  width: 100%;
  height: auto;
}
.benchmark-exhibit figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(154, 170, 200, 0.75);
}

.benchmark-proof {
  position: absolute;
  z-index: 7;
  right: clamp(24px, 3vw, 56px);
  bottom: 24px;
  left: clamp(24px, 3vw, 56px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: center;
  gap: clamp(12px, 2vw, 32px);
  min-height: 57px;
  margin: 0;
  padding-top: 13px;
  border-top: 1px solid rgba(200, 218, 249, 0.22);
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.35;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: rgba(207, 219, 241, 0.64);
}
.benchmark-proof b {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 500;
  color: #f7f9ff;
}
.benchmark-proof a {
  pointer-events: auto;
  color: #dceaff;
  white-space: nowrap;
  border-bottom: 1px solid rgba(177, 211, 255, 0.4);
}
.benchmark-proof a:hover { color: #ffffff; text-decoration: none; border-color: #ffffff; }

@media (max-width: 1050px) {
  .benchmark-stage { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .benchmark-intro { max-width: none; }
  .benchmark-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .benchmark-proof a { grid-column: 1 / -1; width: max-content; margin-top: 4px; }
}

@media (max-width: 720px) {
  .hero-benchmark {
    height: calc(100svh - 58px);
    min-height: 720px;
    max-height: 800px;
  }
  .benchmark-shell.wrap-wide { min-height: 100%; padding: 0 18px; }
  .benchmark-meta { min-height: 43px; font-size: 7.5px; letter-spacing: 0.055em; }
  .benchmark-stage {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 22px;
    padding: 8px 0 0;
  }
  .benchmark-intro { max-width: none; }
  .benchmark-intro p { font-size: 8px; }
  .benchmark-intro h1 { font-size: clamp(46px, 13.5vw, 58px); }
  .benchmark-intro > span { max-width: 340px; margin-top: 13px; font-size: 13px; }
  .benchmark-exhibit figcaption { font-size: 9px; letter-spacing: 0.08em; }
  /* at phone width the whole figure would shrink past legibility; keep it at a
     readable size and let the reader swipe it instead */
  .benchmark-exhibit { overflow-x: auto; pointer-events: auto; scrollbar-width: none; }
  .benchmark-exhibit::-webkit-scrollbar { display: none; }
  .benchmark-exhibit svg { width: 720px; max-width: none; }
  .benchmark-proof {
    right: 18px;
    bottom: 18px;
    left: 18px;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    padding-top: 18px;
    font-size: 8px;
  }
  .benchmark-proof span:last-of-type { grid-column: 1 / -1; }
  .benchmark-proof a { grid-column: 1 / -1; margin-top: 1px; }
}

/* the sky takes the pointer on desktop (drag to look around); on touch it stays
   inert so the page scrolls */
@media (hover: none), (pointer: coarse) {
  .hero-benchmark > .benchmark-sky { pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-benchmark { --hero: 0 !important; }
}

/* ---------------- hero: three signature-task branches ----------------
   Fan of three arms from one core; all three nodes sit on a single arc —
   the shared 256x H100 budget drawn as one radius. Each name is TYPED out
   of its node by a clip-wipe with a write-head caret.
   To preview a frame: pause every animation via the Web Animations API and
   set currentTime. Do NOT override animation-delay globally — this design
   authors literal delays, so a var(--d) override silently clobbers them. */
/* ============================================================
   HERO — THE FAN AND THE BUDGET ARC
   Every rule is scoped under .fanhero (the class on the <svg>).
   tr-draw / tr-fade / tr-pop are byte-identical to the ones the
   site already ships for .traj — declare once and share them.
   ============================================================ */
.fanhero { display: block; width: 100%; height: auto; }

/* ---- the shared idiom ---- */
@keyframes tr-draw { to { stroke-dashoffset: 0; } }
@keyframes tr-fade { to { opacity: 1; } }
@keyframes tr-pop  { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }

/* ---- three extensions, same family ---- */
/* the name is uncovered left-to-right, out of its own node */
@keyframes tr-wipe  { to { transform: scaleX(1); } }
/* the write-head that rides the uncovering edge */
@keyframes tr-caret {
  0%   { opacity: 0; transform: translateX(0); }
  8%   { opacity: 1; }
  86%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(var(--w)); }
}
/* ambient */
@keyframes tr-ping  { 0% { opacity: 0.55; transform: scale(1); } 74%, 100% { opacity: 0; transform: scale(3.2); } }
@keyframes tr-glow  { 0%, 100% { fill-opacity: 0.6; } 50% { fill-opacity: 1; } }
@keyframes tr-beat  { 0%, 66%, 100% { fill-opacity: 0.8; } 10% { fill-opacity: 1; } }
@keyframes tr-glint {
  0%   { stroke-dashoffset: 74;   opacity: 0; }
  6%   { opacity: 0.7; }
  40%  { opacity: 0.7; }
  48%  { stroke-dashoffset: -1000; opacity: 0; }
  100% { stroke-dashoffset: -1000; opacity: 0; }
}

/* ---- transform boxes ---- */
.fanhero .core, .fanhero .ring, .fanhero .ping,
.fanhero .node, .fanhero .nring { transform-box: fill-box; transform-origin: center; }
/* the clip rects scale from their own left edge, given in user units so we never
   depend on transform-box: fill-box resolving inside a <clipPath> */
.fanhero #fanW1 .wipe { transform-origin: 478px  90px; }
.fanhero #fanW2 .wipe { transform-origin: 531px 288px; }
.fanhero #fanW3 .wipe { transform-origin: 478px 486px; }

/* ---- start states ---- */
/* dasharray 1000 1200 / offset 1006, NOT 1000/1000: with a single-value dasharray
   the pattern's dash boundary falls exactly on path position 0, and a round cap
   paints that zero-length segment as a full-width DOT at every path start. The
   longer gap plus the 6-unit overshoot parks the whole pattern off the path, so
   t=0 really is an empty frame. */
.fanhero .arc, .fanhero .ray,
.fanhero .arm, .fanhero .tail { stroke-dasharray: 1000 1200; stroke-dashoffset: 1006; }
.fanhero .glint { stroke-dasharray: 70 2400; stroke-dashoffset: 74; opacity: 0; }
.fanhero .wipe  { transform: scaleX(0); }
.fanhero .caret { opacity: 0; }
.fanhero .glow, .fanhero .olabel, .fanhero .brow,
.fanhero .say, .fanhero .beat, .fanhero .halo { opacity: 0; }
.fanhero .core, .fanhero .ring, .fanhero .node, .fanhero .nring, .fanhero .ping { opacity: 0; }

/* ---- the draw: the program unfolding outward ---- */
.fanhero .arc  { animation: tr-draw 1.10s cubic-bezier(0.22, 0.68, 0.2, 1) var(--d) forwards; }
.fanhero .ray  { animation: tr-draw 1.00s cubic-bezier(0.22, 0.68, 0.2, 1) var(--d) forwards; }
.fanhero .arm  { animation: tr-draw 0.95s cubic-bezier(0.28, 0.72, 0.24, 1) var(--d) forwards; }
.fanhero .tail { animation: tr-draw 0.55s cubic-bezier(0.25, 0.75, 0.25, 1) var(--d) forwards; }

/* ---- the arrivals ---- */
.fanhero .glow   { animation: tr-fade 0.75s ease-out 0s forwards; }
.fanhero .olabel,
.fanhero .brow,
.fanhero .say    { animation: tr-fade 0.55s ease-out var(--d) forwards; }
.fanhero .core, .fanhero .ring,
.fanhero .node, .fanhero .nring { animation: tr-pop 0.50s cubic-bezier(0.2, 0.9, 0.3, 1.25) var(--d) both; }

/* ---- THE BEAT: the three task names are uncovered out of their nodes ---- */
.fanhero #fanW1 .wipe { animation: tr-wipe 0.62s linear 1.36s forwards; }
.fanhero #fanW2 .wipe { animation: tr-wipe 0.62s linear 1.56s forwards; }
.fanhero #fanW3 .wipe { animation: tr-wipe 0.62s linear 1.76s forwards; }
.fanhero .caret       { animation: tr-caret 0.62s linear var(--d) forwards; }

/* ---- the drumbeat: fades in on opacity, then pulses on fill-opacity ---- */
.fanhero .c1 .beat { animation: tr-fade 0.50s ease-out var(--d) forwards, tr-beat 3.2s ease-in-out 3.00s infinite; }
.fanhero .c2 .beat { animation: tr-fade 0.50s ease-out var(--d) forwards, tr-beat 3.2s ease-in-out 3.20s infinite; }
.fanhero .c3 .beat { animation: tr-fade 0.50s ease-out var(--d) forwards, tr-beat 3.2s ease-in-out 3.40s infinite; }

/* ---- the life that continues after 2.88s ---- */
.fanhero .halo {
  animation: tr-fade 0.60s ease-out var(--d) forwards,
             tr-glow 4.4s ease-in-out calc(var(--d) + 1.05s) infinite;
}
.fanhero .ping { animation: tr-ping 4.4s cubic-bezier(0.1, 0.6, 0.3, 1) var(--d) infinite; }
.fanhero .r1 .glint { animation: tr-glint 6.2s linear 3.10s infinite backwards; }
.fanhero .r2 .glint { animation: tr-glint 6.2s linear 3.45s infinite backwards; }
.fanhero .r3 .glint { animation: tr-glint 6.2s linear 3.80s infinite backwards; }

/* ---- settled state: screenshots and OG capture must never be a blank hero ---- */
html.shot .fanhero *,
.fanhero.settled * {
  animation: none !important;
  opacity: 1 !important;
  stroke-dashoffset: 0 !important;
  transform: none !important;
}
html.shot .fanhero .halo,  .fanhero.settled .halo  { opacity: 0.9 !important; fill-opacity: 0.85 !important; }
html.shot .fanhero .ping,  .fanhero.settled .ping,
html.shot .fanhero .glint, .fanhero.settled .glint,
html.shot .fanhero .caret, .fanhero.settled .caret { opacity: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .fanhero * {
    animation: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
  }
  /* the four elements whose settled value is not opacity:1 */
  .fanhero .halo  { opacity: 0.9 !important; fill-opacity: 0.85 !important; }
  .fanhero .ping  { opacity: 0 !important; }   /* would stack on .ring */
  .fanhero .glint { opacity: 0 !important; }   /* a travelling spark has no still frame */
  .fanhero .caret { opacity: 0 !important; }   /* nor does a write-head */
}

/* ============================================================
   LEADERBOARD — rankings, performance vs effort, task cards —
   and the per-task detail pages under tasks/<slug>.html
   ============================================================ */
.lb-head .h-lg { max-width: 24ch; }
.lb-wrap { max-width: 980px; }
.lb .section-head { margin-bottom: 28px; }

/* rankings */
table.rank { width: 100%; border-collapse: collapse; font-size: 15px; }
table.rank th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); font-weight: 500; text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--ink); }
table.rank td { padding: 14px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.rank .r, table.runs .r { text-align: right; }
table.rank .rk { font-family: var(--font-mono); color: var(--faint); width: 48px; }
table.rank .mdl { font-weight: 700; }
table.rank .hr { color: var(--muted); }
table.rank .sc { width: 34%; white-space: nowrap; }
table.rank .bar { display: inline-block; height: 10px; border-radius: 2px; vertical-align: middle; margin-right: 12px; max-width: 78%; }
table.rank .sc b { font-family: var(--font-mono); font-weight: 700; }
/* the run-mark glyph in tables and cards. Scoped to spans: bare `.mk` also matched
   the SVG marks every chart generator emits, and a `width` on an SVG <rect class="mk">
   overrides its width attribute — bars collapsed to 1.1em. */
span.mk { display: inline-block; width: 1.1em; text-align: center; margin-right: 2px; }

/* performance vs effort */
.effort-toggle { display: flex; justify-content: flex-end; gap: 0; margin-bottom: 14px; }
.effort-toggle .et { font-family: var(--font-mono); font-size: 12.5px; padding: 8px 16px; border: 1px solid var(--line); background: var(--paper-2); color: var(--muted); cursor: pointer; }
.effort-toggle .et:first-child { border-radius: 8px 0 0 8px; } .effort-toggle .et:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }
.effort-toggle .et.on { color: var(--ink); font-weight: 700; background: var(--paper); }
.scat-wrap { border: 1px solid var(--line); border-radius: 14px; background: var(--paper-2); padding: 12px 10px 6px; }
.scat { display: block; width: 100%; height: auto; font-family: var(--font-sans); }
.scat .gl { stroke: #eceef2; } .scat .tk { fill: #6b7280; font-size: 11px; } .scat .axl { fill: #4b5160; font-size: 12px; }
.scat .pareto { fill: none; stroke: #101318; stroke-width: 1.2; stroke-dasharray: 5 4; }
.scat .pt { fill: var(--ink); font-size: 12px; font-weight: 600; }

/* task cards */
.lb-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.lb-filter .chip { font-family: var(--font-mono); font-size: 12px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper-2); color: var(--muted); cursor: pointer; }
.lb-filter .chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tcard { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-2); text-decoration: none; color: var(--ink); transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.tcard:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-lift); text-decoration: none; }
.tcard h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.012em; }
.tcard p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tcard-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 8px; font-size: 13px; }
.tcard-foot .dom { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.tcard-foot .best { color: var(--ink); font-weight: 600; white-space: nowrap; }
@media (max-width: 760px) { .tgrid { grid-template-columns: 1fr; } }

/* detail pages */
.detail-head .eyebrow a { color: var(--field-muted); }
.detail-head .eyebrow a:hover { color: var(--accent-bright); }
.article.detail { max-width: 900px; }
.scorebox { border: 1px solid var(--line); border-radius: 16px; background: var(--paper-2); padding: 20px 22px 14px; margin-bottom: 30px; }
.scorebox-head { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; font-size: 14px; margin-bottom: 14px; }
.scorebox-head span { color: var(--muted); font-size: 13px; text-align: right; }
.score-tie { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 4px 0 14px; padding: 11px 12px; border-left: 3px solid var(--accent); background: var(--accent-soft); font-size: 13px; }
.score-tie b { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.score-tie span { color: var(--muted); }
.strip { position: relative; height: 26px; margin: 6px 4px 22px; }
.strip-axis { position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 2px; background: var(--line-soft); }
.strip .pip { position: absolute; top: 6px; width: 10px; height: 14px; margin-left: -5px; border-radius: 2px; }
.strip .pip.partial { opacity: 0.45; }
.strip-lo, .strip-hi { position: absolute; top: 24px; font-family: var(--font-mono); font-size: 10px; color: var(--faint); }
.strip-hi { right: 0; }
table.runs { width: 100%; border-collapse: collapse; font-size: 14px; }
table.runs th { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); font-weight: 500; text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); }
table.runs td { padding: 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.runs .mdl { font-weight: 600; } table.runs .mdl i { display: block; font-style: normal; font-weight: 400; font-size: 12px; color: var(--faint); }
table.runs b { font-family: var(--font-mono); }
.scorebox .basis { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.run-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0 28px; }
.run-figs .task-fig .fig-body { aspect-ratio: 16 / 10; }
.agent-note { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); padding: 0 18px; }
.agent-note summary { cursor: pointer; padding: 14px 0; font-size: 14.5px; }
.agent-note .note-body { padding: 4px 0 16px; font-size: 14.5px; line-height: 1.62; color: var(--muted); border-top: 1px solid var(--line-soft); }
.agent-note .note-body code, .detail code { font-family: var(--font-mono); font-size: 0.86em; background: var(--accent-soft); color: var(--accent-deep); border-radius: 4px; padding: 1px 6px; }
.detail pre.code { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; background: var(--field); color: var(--field-body); border-radius: 12px; padding: 16px 18px; overflow-x: auto; }
.detail h2 { margin-top: 38px; }
.detail .task-fig { margin: 22px 0; }
@media (max-width: 760px) { .run-figs { grid-template-columns: 1fr; } }

/* ---- results rows inside a 1-node task card: one line per agent run ---- */
.tc-runs { list-style: none; margin: 14px 0 12px; padding: 0; border-top: 1px solid var(--line-soft); }
.tc-runs li { display: grid; grid-template-columns: 1.2em minmax(160px, 1fr) auto minmax(0, 1.4fr); gap: 0 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.tc-runs .rr-mk { text-align: center; }
.tc-runs .rr-model { font-weight: 600; color: var(--ink); }
.tc-runs .rr-model i { display: block; font-style: normal; font-weight: 400; font-size: 12px; color: var(--faint); }
.tc-runs .rr-best { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--accent-deep); text-align: right; }
.tc-runs .rr-meta { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--muted); }
.tc-runs li.partial .rr-best { color: var(--faint); }
.task-frame.deep .tc-runs .rr-model, .task-frame.deep .tc-runs .rr-meta { color: #d8d3c8; }
.task-frame.deep .tc-runs .rr-best { color: #e2c479; }
@media (max-width: 720px) { .tc-runs li { grid-template-columns: 1.2em 1fr auto; } .tc-runs .rr-meta { grid-column: 2 / -1; } }
/* comparative run figure: same draw rules as .traj; the ref line is solid grey here */
.traj.multi .base { stroke: #8b91a1; stroke-dasharray: 5 4; }
.chart-legend {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 6px;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: none;
}
.chart-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.chart-legend i { display: inline-block; flex: 0 0 auto; }
.chart-legend .legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-deep);
}
.chart-legend .legend-solid,
.chart-legend .legend-baseline {
  width: 20px;
  height: 0;
  border-top: 2px solid var(--accent-deep);
}
.chart-legend .legend-baseline {
  border-top-color: #8b91a1;
  border-top-style: dashed;
}
.chart-legend .legend-rejected {
  width: 10px;
  color: var(--accent-deep);
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}
.chart-legend .baseline-note { color: var(--muted); }
/* per-submission ledger on a task detail page */
.ledger { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); padding: 0 18px; }
.ledger summary { cursor: pointer; padding: 12px 0; font-size: 14px; }
table.subs { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 4px 0 14px; }
table.subs th { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); font-weight: 500; text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.subs td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); color: var(--muted); }
table.subs td b { font-family: var(--font-mono); color: var(--ink); font-weight: 500; }
table.subs tr.best td b { color: var(--accent-deep); font-weight: 700; }
table.subs .r { text-align: right; }


/* ============================================================
   HOME RESTRUCTURE — tagline highlight, the two solo cards
   ============================================================ */
.benchmark-intro > span { font-size: clamp(15px, 1.35vw, 20px); }
.benchmark-intro > span em {
  font-style: normal;
  font-weight: 800;
  color: #e2c479;
  text-shadow: 0 0 22px rgba(226, 196, 121, 0.55);
  border-bottom: 2px solid rgba(226, 196, 121, 0.55);
}
/* one card on its own row: pitch on the left, three steps on the right */
.pcard.solo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 28px clamp(32px, 4vw, 64px);
  align-items: center;
  padding: clamp(32px, 4vw, 52px);
}
.pcard.solo .solo-main { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.pcard.solo .pc-wordmark { font-size: clamp(44px, 5.2vw, 68px); }
.pcard.solo p { max-width: 52ch; font-size: 16.5px; }
.pcard.solo .solo-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.pcard.solo .btn { margin-top: 0; }
.pcard.dark .btn-ghost { color: #ffffff; border-color: rgba(255, 255, 255, 0.32); background: transparent; }
.pcard.dark .btn-ghost:hover { border-color: #ffffff; }
.solo-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; min-width: 0; }
.solo-steps li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.solo-steps li i { font-family: var(--font-mono); font-style: normal; font-size: 10.5px; letter-spacing: 0.12em; color: var(--accent-bright); padding-top: 4px; }
.solo-steps li b { display: block; color: #ffffff; font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.solo-steps li span { display: block; font-size: 14.5px; line-height: 1.55; color: var(--field-body); }
.pcard.solo .solo-close { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--field-body); max-width: none; }
.pcard.light .solo-steps li { background: var(--paper); border-color: var(--line); }
.pcard.light .solo-steps li i { color: var(--accent); }
.pcard.light .solo-steps li b { color: var(--ink); }
.pcard.light .solo-steps li span { color: var(--muted); }
.section-head .lede a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; white-space: nowrap; }
@media (max-width: 860px) {
  .pcard.solo { grid-template-columns: 1fr; }
}


.lb-head .lede a { color: #8ab8ff; text-decoration: none; border-bottom: 1px solid rgba(138, 184, 255, 0.55); }
.lb-head .lede a:hover { color: #ffffff; }


/* ============================================================
   REVIEW FIXES 2026-09-03
   ============================================================ */
/* figures: kill the UA <figure> margin that shrank every chart 40px per side */
.task-fig { margin: 0; }
/* the ladder table sets its own height and scrolls from column one instead of being clipped */
.task-fig .fig-body.fig-table { aspect-ratio: auto; justify-content: flex-start; overflow-x: auto; padding: 18px 16px; }
.ladder th, .ladder td { padding: 8px 8px; }
/* the wide best-so-far chart starts at its y-axis when it has to scroll */
@media (max-width: 860px) { .task-fig.wide .fig-body { justify-content: flex-start; } }
/* phones: charts keep a readable size and swipe instead of shrinking to 3px labels */
@media (max-width: 560px) {
  .task-fig:not(.wide) .fig-body:has(> svg) { aspect-ratio: auto; overflow-x: auto; justify-content: flex-start; }
  .task-fig:not(.wide) .fig-body > svg { width: 480px; min-width: 480px; }
}
/* compute tags wrap inside the frame on phones */
@media (max-width: 720px) {
  .task-tags .tag.compute, .task-frame.deep .task-tags .tag.compute, .task-frame.slate .task-tags .tag.compute { white-space: normal; max-width: 100%; line-height: 1.35; text-align: left; }
}
/* long inline paths on task pages break instead of widening the page */
.agent-note .note-body code, .detail code { overflow-wrap: anywhere; }
/* fact labels like ATTEMPT get their own width */
.solo-steps li { grid-template-columns: 58px minmax(0, 1fr); }
/* the domain filter actually hides cards (.tcard{display:flex} used to beat [hidden]) */
.tcard[hidden] { display: none; }
/* deep links to a tab land below the sticky nav */
.task-frame, .task-frame .tt[id] { scroll-margin-top: 96px; }
/* hero on phones: the fan becomes a stacked list, and the proof row is in flow */
.fan-list { display: none; }
@media (max-width: 720px) {
  .hero-benchmark { height: auto; min-height: calc(100svh - 58px); max-height: none; }
  .benchmark-shell.wrap-wide { min-height: inherit; padding: 0 18px 18px; }
  .benchmark-stage { padding: 8px 0 24px; }
  .benchmark-proof { position: static; }
  .benchmark-exhibit { overflow: visible; }
  .benchmark-exhibit svg { display: none; }
  .fan-list { display: grid; gap: 14px; list-style: none; margin: 6px 0 0; padding: 0; }
  .fan-list li { display: grid; gap: 3px; padding: 2px 0 2px 12px; border-left: 2px solid var(--c); }
  .fan-list small { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); }
  .fan-list b { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--n); }
  .fan-list em { font-style: normal; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
  .fan-list span { font-family: Georgia, "Times New Roman", serif; font-size: 13.5px; color: #DFEAFB; }
}

/* ============================================================
   HERO — THE RESEARCH TREE (exam → domain → environment → verifiers)
   ============================================================ */
.hero-tree { height: auto; min-height: calc(100svh - 58px); max-height: none; padding-bottom: 26px; }
.hero-tree .benchmark-shell.wrap-wide { min-height: 0; display: flex; flex-direction: column; }
.hero-tree .benchmark-intro { max-width: 820px; margin: 30px auto 26px; text-align: center; align-self: center; }
.hero-tree .benchmark-intro h1 { font-size: clamp(52px, 6.4vw, 100px); }
.hero-tree .benchmark-intro > span { margin: 18px auto 0; max-width: 640px; font-size: clamp(15px, 1.4vw, 21px); }
.rt-head { display: flex; align-items: center; gap: 18px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #9bbbe0; padding: 0 0 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.rt-head .rt-title { display: inline-flex; align-items: center; gap: 8px; color: #dbe7fa; }
.rt-head .rt-count { color: #6f86a8; }
.rt-head .rt-legend { margin-left: auto; display: flex; gap: 18px; }
.rt-head .rt-legend i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--c); margin-right: 7px; vertical-align: middle; }
.rtree-wrap { margin: 0; }
.rtree { display: block; width: 100%; height: auto; }
.rtree text { font-family: "Manrope", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; }
.rt-col, .rt-sub, .rt-budget, .rt-coinmark { font-family: var(--font-mono); }
.rt-col { font-size: 10px; letter-spacing: 0.16em; fill: #7d93b6; }
.rt-rule { stroke: rgba(255, 255, 255, 0.08); }
.rt-root { font-family: Georgia, "Times New Roman", serif; font-size: 25px; fill: #ffffff; }
.rt-name { font-size: 21px; font-weight: 500; fill: #EAF1FB; }
.rt-leafname { font-size: 16.5px; fill: #E4ECF8; }
.rt-sub { font-size: 10.5px; letter-spacing: 0.12em; fill: #8FA6C9; }
.rt-sub.small { font-size: 9.5px; }
.rt-budget { font-size: 10.5px; letter-spacing: 0.12em; fill: #ffffff; font-weight: 700; }
.rt-node { fill: #0b1224; stroke-width: 1.6; }
.rt-leaf { fill: #0b1224; stroke-width: 1.3; }
.rt-ring { fill: rgba(11, 18, 36, 0.72); stroke: #8ab8ff; stroke-width: 1.4; }
.rt-agent rect, .rt-agent line { fill: none; stroke: #DDEBFF; stroke-width: 1.5; }
.rt-agent .rt-eye { fill: #8FF0FF; stroke: none; transform-box: fill-box; transform-origin: center; animation: rt-blink 4.2s infinite; }
.rt-agent .rt-ant { fill: #FFD98A; stroke: none; animation: rt-pulse 1.8s ease-in-out infinite; }
.rt-edge { fill: none; stroke-width: 1.4; stroke-opacity: 0.75; stroke-dasharray: 1; stroke-dashoffset: 1; animation: rt-draw 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: var(--d, 0s); }
.rt-edge.thin { stroke-width: 1.1; stroke-opacity: 0.55; }
.rt-nd { opacity: 0; animation: rt-in 0.7s ease forwards; animation-delay: var(--d, 0s); }
.rt-link { cursor: pointer; }
.rt-link:hover .rt-name { fill: #ffffff; text-decoration: underline; }
.rt-coin { opacity: 0; animation: rt-in 0.4s ease forwards; animation-delay: var(--d, 0s); }
.rt-coinmark { font-size: 6.5px; font-weight: 700; fill: #6b4d12; }
.rt-rack { fill: rgba(255, 255, 255, 0.04); stroke: rgba(180, 200, 235, 0.35); stroke-width: 1; }
.rt-fan circle, .rt-fan path { fill: none; stroke: rgba(180, 200, 235, 0.65); stroke-width: 1; }
.rt-fan { transform-box: fill-box; transform-origin: center; animation: rt-spin var(--s, 3s) linear infinite; }
.rt-led { fill: rgba(143, 240, 255, 0.35); animation: rt-blink-led 2.2s steps(2, end) infinite; animation-delay: var(--d, 0s); }
.rt-led.on { fill: rgba(143, 240, 255, 0.75); }
.rt-room { opacity: 0.32; }
.rt-gpu .rt-rack { stroke: rgba(180, 200, 235, 0.55); }
@keyframes rt-draw { to { stroke-dashoffset: 0; } }
@keyframes rt-in { to { opacity: 1; } }
@keyframes rt-spin { to { transform: rotate(360deg); } }
@keyframes rt-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes rt-blink-led { 50% { opacity: 0.35; } }
@keyframes rt-pulse { 50% { opacity: 0.35; } }
.hero-tree .benchmark-exhibit figcaption { text-align: center; margin-top: 10px; }
.tree-list .tree-leaves { display: grid; gap: 4px; margin-top: 6px; }
.tree-list .tree-leaves i { font-style: normal; font-size: 13px; color: #DFEAFB; }
.tree-list .tree-leaves u { text-decoration: none; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: #8FA6C9; margin-left: 8px; }
@media (max-width: 720px) {
  .hero-tree .rt-head { display: none; }
  .hero-tree .benchmark-intro { text-align: left; margin: 18px 0 16px; max-width: none; }
  .hero-tree .benchmark-intro > span { margin: 13px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rt-edge, .rt-nd, .rt-coin { animation: none; opacity: 1; stroke-dashoffset: 0; }
  .rt-fan, .rt-led, .rt-eye, .rt-ant { animation: none; }
}

/* ---- the research tree, second pass: no coins, no captions; the allocation panel carries the motion */
.rt-room { opacity: 0.9; }
.rt-room .rt-rack { fill: rgba(60, 96, 150, 0.22); stroke: rgba(180, 205, 240, 0.75); }
.rt-room .rt-fan circle, .rt-room .rt-fan path { stroke: rgba(200, 222, 250, 0.9); }
.rt-room .rt-led { fill: rgba(143, 240, 255, 0.85); }
.rtree { --idle: rgba(255, 255, 255, 0.07); }
.rt-actname { font-size: 13px; fill: #EAF1FB; }
.rt-act { opacity: 0.4; animation-duration: 14s; animation-timing-function: linear; animation-iteration-count: infinite; }
.rt-act.s1 { animation-name: rt-act1; }
.rt-act.s2 { animation-name: rt-act2; }
.rt-act.s3 { animation-name: rt-act3; }
.rt-act.s4 { animation-name: rt-act4; }
.rt-cell { fill: var(--idle); stroke: rgba(255, 255, 255, 0.12); stroke-width: 0.6; animation: rt-alloc 14s linear infinite; animation-delay: calc(-0.045s * var(--i, 0)); }
.rt-cursor { transform-box: view-box; animation: rt-cursor 14s linear infinite; }
.rt-cursor rect { fill: rgba(11, 18, 36, 0.9); stroke: #DDEBFF; stroke-width: 1.2; }
.rt-cursor .rt-eye { fill: #8FF0FF; stroke: none; }
@keyframes rt-alloc { 0%, 13% { fill: var(--a); } 15%, 38% { fill: var(--b); } 40%, 76% { fill: var(--c); } 78%, 90% { fill: var(--d); } 92%, 100% { fill: var(--idle); } }
@keyframes rt-act1 { 0%, 13% { opacity: 1; } 15%, 100% { opacity: 0.4; } }
@keyframes rt-act2 { 0%, 13% { opacity: 0.4; } 15%, 38% { opacity: 1; } 40%, 100% { opacity: 0.4; } }
@keyframes rt-act3 { 0%, 38% { opacity: 0.4; } 40%, 76% { opacity: 1; } 78%, 100% { opacity: 0.4; } }
@keyframes rt-act4 { 0%, 76% { opacity: 0.4; } 78%, 90% { opacity: 1; } 92%, 100% { opacity: 0.4; } }
@keyframes rt-cursor { 0%, 13% { transform: translateY(0); } 15%, 38% { transform: translateY(34px); } 40%, 76% { transform: translateY(68px); } 78%, 90% { transform: translateY(102px); } 92%, 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .rt-act, .rt-cell, .rt-cursor { animation: none; } .rt-act { opacity: 1; } }
.rt-actname { font-size: 14px; }
.rt-root { font-size: 25px; }
.rt-flow { stroke-width: 1; stroke-dasharray: 3 3; stroke-opacity: 0.9; animation: rt-dash 1.2s linear infinite; }
@keyframes rt-dash { to { stroke-dashoffset: -12; } }
.rt-act .rt-flow, .rt-act .rt-flowhead { opacity: 0; transition: opacity 0.3s; }
.rt-act.s1 .rt-flow, .rt-act.s1 .rt-flowhead { animation: rt-act1 14s linear infinite; }
.rt-act.s2 .rt-flow, .rt-act.s2 .rt-flowhead { animation: rt-act2 14s linear infinite; }
.rt-act.s3 .rt-flow, .rt-act.s3 .rt-flowhead { animation: rt-act3 14s linear infinite; }
.rt-act.s4 .rt-flow, .rt-act.s4 .rt-flowhead { animation: rt-act4 14s linear infinite; }
.rt-act.s1 .rt-flow { animation: rt-act1 14s linear infinite, rt-dash 1.2s linear infinite; }
.rt-act.s2 .rt-flow { animation: rt-act2 14s linear infinite, rt-dash 1.2s linear infinite; }
.rt-act.s3 .rt-flow { animation: rt-act3 14s linear infinite, rt-dash 1.2s linear infinite; }
.rt-act.s4 .rt-flow { animation: rt-act4 14s linear infinite, rt-dash 1.2s linear infinite; }
@keyframes rt-act1 { 0%, 13% { opacity: 1; } 15%, 100% { opacity: 0; } }
@keyframes rt-act2 { 0%, 13% { opacity: 0; } 15%, 38% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes rt-act3 { 0%, 38% { opacity: 0; } 40%, 76% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes rt-act4 { 0%, 76% { opacity: 0; } 78%, 90% { opacity: 1; } 92%, 100% { opacity: 0; } }
.rt-act { opacity: 1; animation: none; }
.rt-act > circle, .rt-act > text { animation-duration: 14s; animation-timing-function: linear; animation-iteration-count: infinite; opacity: 0.4; }
.rt-act.s1 > circle, .rt-act.s1 > text { animation-name: rt-lbl1; }
.rt-act.s2 > circle, .rt-act.s2 > text { animation-name: rt-lbl2; }
.rt-act.s3 > circle, .rt-act.s3 > text { animation-name: rt-lbl3; }
.rt-act.s4 > circle, .rt-act.s4 > text { animation-name: rt-lbl4; }
@keyframes rt-lbl1 { 0%, 13% { opacity: 1; } 15%, 100% { opacity: 0.4; } }
@keyframes rt-lbl2 { 0%, 13% { opacity: 0.4; } 15%, 38% { opacity: 1; } 40%, 100% { opacity: 0.4; } }
@keyframes rt-lbl3 { 0%, 38% { opacity: 0.4; } 40%, 76% { opacity: 1; } 78%, 100% { opacity: 0.4; } }
@keyframes rt-lbl4 { 0%, 76% { opacity: 0.4; } 78%, 90% { opacity: 1; } 92%, 100% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .rt-act > circle, .rt-act > text, .rt-flow, .rt-flowhead { animation: none; opacity: 1; } }

/* ---- the research tree, third pass: merged columns, one label at a time, a calm fill */
.hero-tree .benchmark-intro { margin: 54px auto 30px; }
.rt-cur { font-size: 13px; opacity: 0; animation-duration: 14s; animation-timing-function: linear; animation-iteration-count: infinite; }
.rt-cur.rt-sub { font-size: 10.5px; }
.rt-cur.s1 { animation-name: rt-act1; }
.rt-cur.s2 { animation-name: rt-act2; }
.rt-cur.s3 { animation-name: rt-act3; }
.rt-cur.s4 { animation-name: rt-act4; }
.rt-cell { fill: var(--idle); stroke: none; animation: rt-alloc 14s linear infinite; animation-delay: calc(-0.006s * var(--i, 0)); }
@keyframes rt-alloc { 0%, 12% { fill: var(--a); } 15%, 37% { fill: var(--b); } 40%, 75% { fill: var(--c); } 78%, 89% { fill: var(--d); } 92%, 100% { fill: var(--idle); } }
@media (prefers-reduced-motion: reduce) { .rt-cur { animation: none; } .rt-cur.s3 { opacity: 1; } .rt-cell { animation: none; fill: var(--c); } }
.rt-cur { font-size: 15px; }
.rt-cur.rt-sub { font-size: 11px; }

/* research-tree leaf panels: run tapes (replaces the allocation grids) */
.rt-tp-axis { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }
.rt-tp-div { stroke: rgba(255, 255, 255, 0.08); stroke-dasharray: 2 4; }
.rt-tp-tick { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }
.rt-tp-outline { fill: none; stroke-width: 1.2; stroke-opacity: 0.28; }
.rt-tp-lit { fill: none; stroke-width: 2; stroke-opacity: 0.95; stroke-linejoin: round; }
.rt-tp-fill { fill-opacity: 0.14; }
.rt-tp-head { stroke: #ffffff; stroke-opacity: 0.5; stroke-width: 1; }
.rt-tp-dot { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.55)); }
.rt-tp-ev { opacity: 0.14; transform-box: fill-box; transform-origin: center; transition: opacity 0.35s, transform 0.35s; }
.rt-tp-ev.on { opacity: 0.95; }
.rt-tp-ev.fresh { transform: scale(1.8); }
.rt-tp-ev.reward.on { filter: drop-shadow(0 0 6px rgba(226, 165, 76, 0.9)); }
.rt-tp-stage { font-size: 14px; }
.rt-tp-gpu, .rt-tp-hour, .rt-tp-note { font-family: var(--font-mono) !important; }
.rt-tp-gpu { font-size: 10.5px; letter-spacing: 0.12em; fill: #B8C8E4; }
.rt-tp-hour { font-size: 9px; fill: #5f7396; }
.rt-tp-note { font-size: 9px; letter-spacing: 0.12em; fill: #6b82a6; }

/* allocation grid, vibe pass: waves of claims sweep the rack, cells shimmer,
   hot cells burst — no counts, just motion */
.rt-panel .rt-cell {
  fill: var(--idle);
  animation: rt-claim 9s cubic-bezier(0.4, 0, 0.2, 1) infinite, rt-shimmer 4.3s ease-in-out infinite;
  animation-delay: calc(-0.11s * var(--cx, 0) - 0.55s * var(--ry, 0) - 0.02s * var(--i, 0)), calc(-0.37s * var(--i, 0));
}
.rt-panel .rt-cell.hot {
  animation: rt-claim 9s cubic-bezier(0.4, 0, 0.2, 1) infinite, rt-burst 2.9s ease-in-out infinite;
  animation-delay: calc(-0.11s * var(--cx, 0) - 0.55s * var(--ry, 0)), calc(-0.9s * var(--i, 0));
}
@keyframes rt-claim {
  0%, 8% { fill: var(--idle); }
  14%, 16% { fill: #ffffff; }
  20%, 58% { fill: var(--on); }
  66%, 100% { fill: var(--idle); }
}
@keyframes rt-shimmer { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes rt-burst { 0%, 70%, 100% { opacity: 0.7; } 80% { opacity: 1; filter: drop-shadow(0 0 4px var(--on)); } }
@media (prefers-reduced-motion: reduce) { .rt-panel .rt-cell { animation: none; fill: var(--on); opacity: 0.8; } }

/* the scheduler owns the grid cells now (rt-sched.js); CSS waves are off */
.rt-panel .rt-cell, .rt-panel .rt-cell.hot { animation: none; opacity: 1; transition: fill 0.12s linear; }
.rt-agent-mini rect, .rt-agent-mini line { stroke-width: 1.3; }
.rt-agent-mini .rt-ant { animation-delay: 0.6s; }



































/* ============================================================
   THESIS — "RSI: The Last Puzzle to ASI" (home, right under the hero)
   ============================================================ */
.thesis { background: var(--paper); }
.thesis-grid {
  display: grid;
  grid-template-columns: minmax(250px, 0.4fr) minmax(0, 0.6fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
}
.thesis-head { position: sticky; top: 92px; }
.thesis-title {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0;
  max-width: 10ch;
}
.thesis-body { display: flex; flex-direction: column; gap: 22px; padding-top: 6px; }
.thesis-body > p, .thesis-fold > p {
  margin: 0;
  font-size: clamp(16.5px, 1.5vw, 19px);
  line-height: 1.62;
  color: #2a2f3a;
  max-width: 64ch;
}
.thesis-body b { color: var(--ink); font-weight: 750; }
/* ---------- Thesis: fold the argument, put the four principles up front ---------- */
.thesis-more { margin: 0; }
.thesis-more summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-deep);
}
.thesis-more summary::-webkit-details-marker { display: none; }
.thesis-more summary::after { content: "↓"; font-size: 13px; transition: transform 0.2s var(--ease); }
.thesis-more[open] summary::after { transform: rotate(180deg); }
.thesis-more summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.thesis-fold { display: flex; flex-direction: column; gap: 22px; margin-top: 22px; }

.thesis-principles {
  margin-top: clamp(36px, 4.5vw, 56px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line);
}
.thesis-principles .tp-grid { margin-top: clamp(26px, 3vw, 40px); }
.tp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tp-card {
  position: relative; min-width: 0;
  padding: 22px 22px 20px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}
.tp-n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--accent); }
.tp-yes {
  margin: 12px 0 4px;
  font-family: "Manrope", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-size: clamp(20px, 1.6vw, 24px); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em;
  color: var(--ink);
}
.tp-no {
  margin: 0 0 14px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #b0413e;
}
.tp-desc { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
@media (max-width: 980px) { .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tp-grid { grid-template-columns: 1fr; } }

.thesis-chain { margin-top: clamp(40px, 5vw, 64px); }
.thesis-chain .step.last { border-color: rgba(59, 124, 240, 0.45); background: var(--accent-soft); }
.thesis-chain .step.last .v { color: var(--accent-deep); }
@media (max-width: 860px) {
  .thesis-grid { grid-template-columns: 1fr; }
  .thesis-head { position: static; }
  .thesis-title { max-width: none; }
}

/* the closing card, centred: one column, no side list */
.pcard.solo.centred { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: clamp(30px, 3.6vw, 46px); }
.pcard.solo.centred .solo-main { align-items: center; }
.pcard.solo.centred p { max-width: 62ch; }
.center-head + .pcard { margin-top: 0; }
/* the compute figure is the number that matters on each branch */
.rt-budget.big { font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; fill: #ffffff; }
.rt-brand { transform-box: view-box; }



















.pcard.light.solo {
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(245, 158, 11, 0.12), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(255, 122, 107, 0.09), transparent 60%),
    var(--paper-2);
  border-color: #e8d9c4;
}
.pcard.light.solo .pc-wordmark em {
  background: linear-gradient(92deg, #ff7a6b 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* contact addresses as rounded pills — the card's only call to action */
.solo-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 14px;
}
.solo-contact a {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--accent-deep);
  text-decoration: none;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.solo-contact a:hover { border-color: var(--accent); background: rgba(59, 124, 240, 0.05); }
/* inside the light-blue 1-node frame the figure stays cool, not cream */
.task-frame.slate .task-fig { background: #f8fbff; border-color: #cfdbee; }
.task-frame.slate .task-fig .fig-cap { background: #eef3fb; border-top-color: #d6e0f0; }
/* the site mark leading a section title */
.h-lg.with-mark { display: flex; align-items: center; justify-content: center; gap: 0.42em; }
.h-lg.with-mark .head-mark { width: 0.82em; height: 0.82em; flex: none; border-radius: 22%; }
@media (max-width: 560px) { .h-lg.with-mark { gap: 0.32em; } }
/* the two contact addresses are one unbreakable mono string on a phone: 390px overflowed by 16px */
.solo-contact { overflow-wrap: anywhere; }

/* hero tree: branch lines leave from a junction clear of the label */
.rt-edge.stem { stroke: #9DB9E8; stroke-opacity: 0.55; stroke-width: 1.4; }
.rt-bus { fill: #DDEBFF; }

/* LEADING INSTITUTIONS — two small cards, UW × Berkeley. The school colour runs
   from a deep left edge into a photo on the right; the photo is a vibe, faded in
   from the colour, not a hero image. */
.li-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  max-width: 880px;
  margin: 0 auto clamp(26px, 3vw, 38px);
}
.li-card {
  position: relative;
  display: flex;
  align-items: center;
  height: 132px;
  padding: 0 22px;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.bleed-band .li-row { position: relative; z-index: 1; }
/* the lead cards are not links any more, so no lift on hover */
.li-uw  { background: linear-gradient(100deg, #33195f 0%, #4B2E83 38%, #8f78bd 70%, #ffffff 100%); }
.li-cal { background: linear-gradient(100deg, #001f3f 0%, #003262 38%, #4f7fb3 70%, #ffffff 100%); }
.li-photo {
  position: absolute;
  inset: 0 0 0 auto;
  width: 64%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0.92;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 100%);
}
.li-cal .li-photo { object-position: 42% 14%; }
.li-name {
  position: relative;
  z-index: 1;
  font-family: "Manrope", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}
.li-x {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  line-height: 1;
  color: var(--faint);
}
@media (max-width: 720px) {
  .li-row { grid-template-columns: 1fr; gap: 10px; justify-items: stretch; }
  .li-x { text-align: center; font-size: 24px; }
  .li-card { height: 112px; }
}

/* =========================================================
   CALL FOR CONTRIBUTORS (design after Ruilin Han, dev_rh/task)
   ========================================================= */
#contribute {
  padding: 80px 0;
  background: #f4f0e8;
}

/* =========================================================
   CALL FOR CONTRIBUTORS
   ========================================================= */


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

#contribute .cfc-shell {
  --bg: #0d1014;
  --panel: #15191f;
  --panel-2: #181d23;
  --gold: #e3b94f;
  --gold-light: #f2cc70;
  --gold-border: rgba(227,185,79,.34);
  --text: #f3f1ea;
  --muted: #a8afbb;
  --line: rgba(255,255,255,.10);
  --blue: #8daeff;

  width: 100%;
  min-height: 760px;

  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  gap: 52px;

  padding: 54px;

  border-radius: 28px;
  border: 1px solid var(--gold-border);

  background:
    radial-gradient(
      circle at 7% 5%,
      rgba(227,185,79,.08),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #11161b 0%,
      #0b0f14 58%,
      #10161b 100%
    );

  box-shadow:
    0 32px 80px rgba(12,15,18,.18),
    inset 0 1px 0 rgba(255,255,255,.035);

  color: var(--text);
}


/* ================= LEFT ================= */

#contribute .cfc-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#contribute .cfc-title {
  margin: 0;
  max-width: 760px;

  color: var(--text);

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(54px, 5vw, 82px);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 600;
}

#contribute .cfc-subtitle {
  margin: 20px 0 34px;
  max-width: 620px;

  font-size: 22px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text);
}
#contribute .cfc-subtitle .nowrap,
#contribute .cfc-hour-copy .nowrap { white-space: nowrap; }
#contribute .cfc-subtitle .cfc-brand-word,
#contribute .cfc-hour-copy .cfc-brand-word {
  font-style: normal;
  font-weight: 700;
  color: var(--gold-light);
}


/* ================= QUESTIONS ================= */

#contribute .cfc-questions {
  margin-top: 30px;
  border-top: 1px solid var(--line);
}

#contribute .cfc-question {
  min-height: 94px;

  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 20px;
  gap: 18px;
  align-items: center;

  padding: 17px 2px;

  border-bottom: 1px solid var(--line);
}

#contribute .cfc-question-icon {
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  color: var(--gold-light);

  border-radius: 50%;
  border: 1px solid rgba(227,185,79,.24);
  background: rgba(227,185,79,.045);
}

#contribute .cfc-question-icon svg {
  width: 21px !important;
  height: 21px !important;
  max-width: 21px !important;
  max-height: 21px !important;
  display: block;
  flex: none;
}

#contribute .cfc-question p {
  margin: 0;

  color: #e9e7e1;
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: -.015em;
}

#contribute .cfc-question strong {
  color: var(--gold-light);
  font-weight: 650;
}

#contribute .cfc-question strong.blue {
  color: var(--blue);
}

#contribute .cfc-chevron {
  justify-self: end;
  color: #aeb5bf;
  font-size: 27px;
  font-weight: 300;
}


/* ================= 1 HOUR ================= */

#contribute .cfc-hour {
  display: flex;
  align-items: center;

  margin-top: 30px;
  min-height: 126px;
}

#contribute .cfc-hour-number {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: none;
}

#contribute .cfc-hour-number .num {
  font-family: Georgia, "Times New Roman", serif;

  font-size: 92px;
  line-height: .85;
  letter-spacing: -.05em;
  color: var(--text);
}

#contribute .cfc-hour-number .unit {
  font-family: Georgia, "Times New Roman", serif;

  font-size: 43px;
  line-height: 1;
  color: var(--gold-light);
}

#contribute .cfc-hour-divider {
  width: 1px;
  height: 58px;

  margin: 0 30px;

  background: rgba(227,185,79,.54);
}

#contribute .cfc-hour-copy {
  margin: 0;

  color: var(--text);
  font-size: 21px;
  line-height: 1.4;
  font-weight: 600;
}


#contribute .cfc-description {
  max-width: none;
  margin: 8px 0 0;

  color: var(--muted);

  font-size: 16px;
  line-height: 1.65;
}

#contribute .cfc-authorship {
  margin: 18px 0 0;
  max-width: none;

  color: var(--muted);

  font-size: 15px;
  line-height: 1.65;
}
#contribute .cfc-authorship strong {
  color: var(--gold-light);
  font-weight: 650;
}


/* ================= BUTTONS ================= */

#contribute .cfc-buttons {
  display: flex;
  align-items: center;
  gap: 14px;

  margin-top: 34px;
}

#contribute .cfc-btn {
  min-height: 52px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;

  padding: 0 22px;

  border-radius: 9px;

  text-decoration: none;
  font-size: 15px;
  font-weight: 650;

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

#contribute .cfc-btn:hover {
  transform: translateY(-1px);
}

#contribute .cfc-btn-primary {
  color: #111318;

  border: 1px solid #edc45c;

  background:
    linear-gradient(
      180deg,
      #f3ce73,
      #e3b94f
    );

  box-shadow:
    0 10px 24px rgba(227,185,79,.16),
    inset 0 1px 0 rgba(255,255,255,.42);
}

#contribute .cfc-btn-secondary {
  color: #d8dde5;

  border: 1px solid rgba(227,185,79,.44);

  background: rgba(255,255,255,.015);
}


/* =========================================================
   RIGHT: the contribution flow, a light panel with an inline chart
   ========================================================= */

#contribute .cfc-flow {
  position: relative;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  padding: 24px 26px 22px;
  border-radius: 22px;
  border: 1px solid rgba(227,185,79,.30);
  background:
    radial-gradient(circle, rgba(16,19,24,.07) 1px, transparent 1.2px) 0 0 / 22px 22px,
    linear-gradient(180deg, #f8f5ee 0%, #f1ece1 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 18px 40px rgba(0,0,0,.18);
}
#contribute .cfc-flow-head { margin: 0 0 10px; }
#contribute .cfc-flow-slogan {
  margin: 0;
  font-family: "Manrope", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: #101318;
}
#contribute .cfc-flow-slogan .nowrap { white-space: nowrap; }
#contribute .cfc-flow .cfc-brand-word { font-style: normal; color: #a8841e; }
#contribute .cfc-flow-desc {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #5f6470;
}
#contribute .cfc-flow-svg {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  max-height: 100%;
  display: block;
  font-family: "Nunito", "Manrope", system-ui, sans-serif;
}
#contribute .fl-link { fill: none; stroke: #a8841e; stroke-width: 1.4; marker-end: url(#cfc-arrow); }
#contribute .fl-loop { fill: none; stroke: #a8841e; stroke-width: 1.2; stroke-dasharray: 4 4; marker-end: url(#cfc-arrow); }
#contribute .fl-tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; fill: #8a7430; }
#contribute .fl-node rect { fill: #ffffff; stroke: #d8d0bd; stroke-width: 1; }
#contribute .fl-node circle { fill: #fbf3dc; stroke: #d9b957; stroke-width: 1; }
#contribute .fl-n { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; fill: #8a6a12; }
#contribute .fl-h { font-family: "Manrope", "Nunito", system-ui, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: -.015em; fill: #101318; }
#contribute .fl-s { font-size: 11.5px; fill: #6b6f7a; }
#contribute .fl-key rect { stroke: #d9b957; stroke-width: 1.4; }
#contribute .fl-pill rect { fill: #101318; }
#contribute .fl-pill text { font-family: "Manrope", "Nunito", system-ui, sans-serif; font-size: 12.5px; font-weight: 700; fill: #f2cc70; }
#contribute .cfc-flow-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: #6b6f7a;
}
#contribute .cfc-flow-note strong { color: #8a6a12; font-weight: 700; }
#contribute .fl-who rect { stroke-width: 1; }
#contribute .fl-who text { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .10em; text-transform: uppercase; }
#contribute .fl-who .fl-ico { fill: none; stroke-width: 1.1; stroke-linecap: round; }
#contribute .fl-who .fl-ico .fl-eye { stroke: none; }
#contribute .fl-joint rect { fill: #fbf3dc; stroke: #d9b957; }
#contribute .fl-joint text { fill: #8a6a12; }
#contribute .fl-joint .fl-ico { stroke: #8a6a12; }
#contribute .fl-joint .fl-ico .fl-eye { fill: #8a6a12; }
#contribute .fl-agent rect { fill: #eef0f4; stroke: #cfd4dc; }
#contribute .fl-agent text { fill: #5f6470; }
#contribute .fl-agent .fl-ico { stroke: #5f6470; }
#contribute .fl-agent .fl-ico .fl-eye { fill: #5f6470; }


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

  #contribute .cfc-shell {
    grid-template-columns: 1fr;
    gap: 35px;

    padding: 38px;
  }

  #contribute .cfc-flow { min-height: 0; }

}


@media (max-width: 650px) {

  #contribute {
    padding: 40px 0;
  }

  #contribute .cfc-shell {
    padding: 25px 20px;

    border-radius: 20px;
  }

  #contribute .cfc-title {
    font-size: 47px;
  }

  #contribute .cfc-question {
    grid-template-columns: 42px minmax(0,1fr);
  }

  #contribute .cfc-question-icon {
    width: 38px;
    height: 38px;
  }

  #contribute .cfc-chevron {
    display: none;
  }

  #contribute .cfc-question p {
    font-size: 16px;
  }

  #contribute .cfc-hour {
    align-items: flex-end;
  }

  #contribute .cfc-hour-number .num {
    font-size: 68px;
  }

  #contribute .cfc-hour-number .unit {
    font-size: 31px;
  }

  #contribute .cfc-hour-divider {
    margin: 0 18px;
  }

  #contribute .cfc-hour-copy {
    font-size: 17px;
  }
  #contribute .cfc-hour-copy br { display: none; }

  #contribute .cfc-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  #contribute .cfc-btn {
    width: 100%;
  }





}

/* =========================================================
   SIGNATURE TASK SAMPLES — dark + gold (design after Ruilin Han, dev_rh/task)
   ========================================================= */
/* Signature task samples — dark + gold redesign */
#signature {
  --sig-page: #f4f0e8;
  --sig-frame: #0d1014;
  --sig-card: #171a1f;
  --sig-card-2: #1e2228;
  --sig-card-hover: #222730;
  --sig-gold: #e3b94f;
  --sig-gold-2: #a98a42;
  --sig-gold-soft: rgba(227,185,79,.14);
  --sig-border: rgba(227,185,79,.34);
  --sig-border-soft: rgba(255,255,255,.08);
  --sig-text: #f3f1ea;
  --sig-muted: #a8afbb;
  --sig-grid: #31363f;
  --sig-blue: #4a86e8;
  --sig-orange: #e0703a;
  background: var(--sig-page);
}

#signature .center-head { margin-bottom: 26px; }
#signature .h-lg {
  color: #101318;
  letter-spacing: -0.035em;
  font-weight: 700;
}
#signature .head-mark {
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.12));
}

#signature .task-frame.deep.soft {
  background:
    radial-gradient(circle at 92% 4%, rgba(227,185,79,.08), transparent 22%),
    linear-gradient(180deg, #11161d 0%, var(--sig-frame) 62%, #0a0d11 100%);
  border: 1px solid var(--sig-border);
  border-radius: 28px;
  box-shadow:
    0 28px 70px rgba(11,15,20,.22),
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 5px rgba(227,185,79,.07);
  padding: 26px;
}

#signature .task-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
#signature .task-tabs .tt {
  appearance: none;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.025);
  color: var(--sig-text);
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 650;
  letter-spacing: -.01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  transition: .18s ease;
}
#signature .task-tabs .tt:hover {
  border-color: var(--sig-border);
  background: rgba(227,185,79,.07);
  transform: translateY(-1px);
}
#signature .task-tabs .tt.on {
  color: #111318;
  border-color: #f0cb71;
  background: linear-gradient(180deg, #f7d77e 0%, var(--sig-gold) 100%);
  box-shadow: 0 8px 24px rgba(227,185,79,.22), inset 0 1px 0 rgba(255,255,255,.55);
}

#signature .task-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 18px;
}
#signature .task-tags .tag {
  color: #d8d3c7;
  border: 1px solid rgba(227,185,79,.42);
  background: rgba(227,185,79,.045);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
}
#signature .task-tags .tag.compute {
  color: #111318;
  border-color: #f0c967;
  background: linear-gradient(180deg,#f4d172,#e3b94f);
  font-weight: 750;
  box-shadow: 0 7px 18px rgba(227,185,79,.18);
}

#signature .task-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

#signature .task-fig {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--sig-border-soft);
  background: linear-gradient(180deg, var(--sig-card-2), var(--sig-card));
  box-shadow: 0 16px 36px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.035);
}
#signature .task-fig:hover {
  border-color: rgba(227,185,79,.22);
}
#signature .task-fig .fig-body {
  background: transparent !important;
  min-height: 360px;
  padding: 12px 14px 8px;
}
#signature .task-fig .fig-body svg {
  width: 100%;
  height: 100%;
  display: block;
}
#signature .task-fig.wide {
  grid-column: 1 / -1;
  min-height: 465px;
}
#signature .task-fig.wide .fig-body {
  min-height: 420px;
  padding: 14px 16px 12px;
}

/* Dark table treatment */
#signature table.ladder {
  width: 100%;
  color: var(--sig-text);
  border-collapse: separate;
  border-spacing: 0;
}
#signature table.ladder th {
  color: #c1c7d1;
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
#signature table.ladder td {
  color: #e9e6df;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
#signature table.ladder tbody tr:hover td { background: rgba(255,255,255,.025); }
#signature table.ladder td.rung { color: #6ca0ff; font-weight: 700; }
#signature table.ladder tfoot td {
  background: rgba(255,255,255,.035);
  color: #b4bbc6;
  border-top: 1px solid rgba(255,255,255,.06);
}
#signature table.ladder tfoot td:last-child { color: var(--sig-text); font-weight: 800; }

#signature .fig-cap {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  background: rgba(4,6,8,.48);
  border-top: 1px solid rgba(227,185,79,.26);
  color: #d8d1be;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 11px;
}
#signature .fig-cap b { color: #f2cc70; }

/* Make all SVG typography and grid work on dark cards */
#signature .task-fig svg .run,
#signature .task-fig svg .ttl,
#signature .task-fig svg .axlbl,
#signature .task-fig svg .axl,
#signature .task-fig svg .tk,
#signature .task-fig svg .lg,
#signature .task-fig svg .note,
#signature .task-fig svg .ann,
#signature .task-fig svg .baselbl {
  fill: #c3cad4 !important;
}
#signature .task-fig svg .run,
#signature .task-fig svg .ttl { fill: #f3f1ea !important; }
#signature .task-fig svg .gl { stroke: var(--sig-grid) !important; }
#signature .task-fig svg .ax { stroke: #68717e !important; }
#signature .task-fig svg .lgbox {
  fill: #15191f !important;
  stroke: #39404a !important;
}
#signature .task-fig svg .base { opacity: .9; }

/* Preserve semantic series colors despite the global dark-theme text override */
#signature .task-fig svg [style*="fill:#3b7cf0"],
#signature .task-fig svg [style*="fill: #3b7cf0"] { fill: var(--sig-blue) !important; }
#signature .task-fig svg [style*="stroke:#3b7cf0"],
#signature .task-fig svg [style*="stroke: #3b7cf0"] { stroke: var(--sig-blue) !important; }
#signature .task-fig svg [style*="fill:#4a86e8"],
#signature .task-fig svg [style*="fill: #4a86e8"] { fill: var(--sig-blue) !important; }
#signature .task-fig svg [style*="stroke:#4a86e8"],
#signature .task-fig svg [style*="stroke: #4a86e8"] { stroke: var(--sig-blue) !important; }
#signature .task-fig svg [style*="fill:#d0503b"],
#signature .task-fig svg [style*="fill: #d0503b"],
#signature .task-fig svg [style*="fill:#e0703a"],
#signature .task-fig svg [style*="fill: #e0703a"] { fill: var(--sig-orange) !important; }
#signature .task-fig svg [style*="stroke:#d0503b"],
#signature .task-fig svg [style*="stroke: #d0503b"],
#signature .task-fig svg [style*="stroke:#e0703a"],
#signature .task-fig svg [style*="stroke: #e0703a"] { stroke: var(--sig-orange) !important; }

/* The explanatory box under the charts should also feel substantial / full-width */
#signature .task-card {
  margin-top: 18px;
  width: 100%;
  min-height: 260px;
  box-sizing: border-box;
  border-radius: 18px;
  padding: 26px 28px;
  background: linear-gradient(180deg, #171b21 0%, #13171c 100%);
  border: 1px solid var(--sig-border-soft);
  box-shadow: 0 14px 32px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.03);
}
#signature .task-card .tc-label {
  color: var(--sig-gold);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
}
#signature .task-card .h-md { color: var(--sig-text); }
#signature .task-card .tc-body,
#signature .task-card .tc-target { color: #b5bdc8; }
#signature .task-card .tc-body b,
#signature .task-card .tc-target b { color: #ece7db; }
#signature .task-card .tc-link {
  color: #f1ca6f;
  border-bottom-color: rgba(241,202,111,.4);
}
/* Kill inherited white glow / blur on SVG text */
#signature .task-fig svg text,
#signature .task-fig svg tspan,
#signature .task-fig svg .run,
#signature .task-fig svg .ttl,
#signature .task-fig svg .axlbl,
#signature .task-fig svg .axl,
#signature .task-fig svg .tk,
#signature .task-fig svg .lg,
#signature .task-fig svg .note,
#signature .task-fig svg .ann,
#signature .task-fig svg .baselbl,
#signature .task-fig svg .peaklbl {
  text-shadow: none !important;
  filter: none !important;
  stroke: none !important;
  stroke-width: 0 !important;
  paint-order: normal !important;
  -webkit-text-stroke: 0 !important;
}

/* Also neutralize inherited animation glow helpers */
#signature .task-fig svg .mk,
#signature .task-fig svg .ann,
#signature .task-fig svg .peaklbl,
#signature .task-fig svg .dot {
  filter: none !important;
  text-shadow: none !important;
}

/* Make text render a bit crisper */
#signature .task-fig .fig-body svg {
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}
/* Fix dark text / dark strokes in the Qwen panel (s1) */
#signature .task-panel[data-p="s1"] svg [style*="fill:#101318"],
#signature .task-panel[data-p="s1"] svg [style*="fill: #101318"] {
  fill: #cfd6e1 !important;
}

#signature .task-panel[data-p="s1"] svg [style*="stroke:#101318"],
#signature .task-panel[data-p="s1"] svg [style*="stroke: #101318"] {
  stroke: #7f8998 !important;
}

/* Make the left headline score brighter */
#signature .task-panel[data-p="s1"] svg .peaklbl[style*="fill:#101318"],
#signature .task-panel[data-p="s1"] svg .peaklbl[style*="fill: #101318"] {
  fill: #e8edf5 !important;
}

/* Optional: make category labels a touch softer */
#signature .task-panel[data-p="s1"] svg .tk[style*="fill:#101318"],
#signature .task-panel[data-p="s1"] svg .tk[style*="fill: #101318"],
#signature .task-panel[data-p="s1"] svg .axlbl[style*="fill:#101318"],
#signature .task-panel[data-p="s1"] svg .axlbl[style*="fill: #101318"] {
  fill: #c9d1dc !important;
}
#signature .task-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* Normal top cards */
#signature .task-fig {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

/* Bottom optimizer chart */
#signature .task-fig.wide {
  grid-column: 1 / -1;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  justify-self: stretch !important;

  min-height: 440px;
}

/* Give the chart enough breathing room */
#signature .task-fig.wide .fig-body {
  width: 100%;
  min-height: 420px;
  padding: 20px 24px 16px;
  box-sizing: border-box;
}

#signature .task-fig.wide svg {
  width: 100% !important;
  height: auto;
  display: block;
}
@media (max-width: 900px) {
  #signature .task-frame.deep.soft { padding: 18px; border-radius: 22px; }
  #signature .task-media { grid-template-columns: 1fr; }
  #signature .task-fig.wide { grid-column: auto; min-height: 390px; }
  #signature .task-fig.wide .fig-body { min-height: 350px; }
  #signature .task-card { min-height: 0; padding: 22px; }
}

/* GPIC panel (s3): shapes and labels the blanket dark-theme overrides flatten */
#signature .task-panel[data-p="s3"] svg .bar[style*="fill:#101318"] { fill: #3a414c !important; }
#signature .task-panel[data-p="s3"] svg .tk[style*="fill:#4b3f66"] { fill: #2b2340 !important; }
#signature .task-panel[data-p="s3"] svg .tk[style*="fill:#8a5cd0"] { fill: #b08cf0 !important; }
/* a seal alone is easy to miss between wordmarks: give Texas A&M its name */
.lg.lg-lockup { display: inline-flex; align-items: center; gap: 11px; }
.lg-word {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.005em;
  color: #500000;
  opacity: 0.85;
  white-space: nowrap;
  transition: opacity 0.25s var(--ease);
}
.lg.lg-lockup:hover .lg-word { opacity: 1; }
/* the GPU requirement, lifted out of step four and made unmissable under the five steps */
.gpu-note {
  margin: 36px 0 0;
  max-width: 860px;
  padding: 22px 26px 20px;
  border: 1px solid rgba(208, 80, 59, 0.4);
  border-left: 4px solid var(--red);
  border-radius: 12px;
  background: #fff3f0;
}
.gpu-note-k {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}
.gpu-note p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink); }
.gpu-note ol { margin: 14px 0 0; padding-left: 22px; font-size: 15px; line-height: 1.62; color: var(--muted); }
.gpu-note ol li { margin: 7px 0; }
.gpu-note ol li b { color: var(--ink); }

/* ---- the research tree, fourth pass: climbing curves, chassis, the dotted fourth branch ---- */
.rt-room { opacity: 0.85; }
.rt-chassis { fill: rgba(40, 62, 100, 0.55); stroke: rgba(185, 205, 240, 0.7); stroke-width: 1; }
.rt-slat { stroke: rgba(185, 205, 240, 0.45); stroke-width: 1; }
.rt-bay { fill: rgba(11, 18, 36, 0.8); stroke: rgba(185, 205, 240, 0.4); stroke-width: 0.8; }
.rt-pwr { fill: #8FF0FF; animation: rt-pwr 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); filter: drop-shadow(0 0 3px rgba(143, 240, 255, 0.9)); }
@keyframes rt-pwr { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.rt-edge.more { stroke: #9DB9E8; stroke-opacity: 0.7; stroke-width: 1.6; stroke-dasharray: 2.5 4.5 !important; stroke-linecap: round; animation: rt-in 1.2s ease forwards; animation-delay: var(--d, 0s); opacity: 0; stroke-dashoffset: 0; }
.rt-more circle { fill: #9DB9E8; fill-opacity: 0.85; }
.rt-more circle:nth-child(2) { animation: rt-pwr 2.4s ease-in-out infinite 0.4s; }
.rt-more circle:nth-child(3) { animation: rt-pwr 2.4s ease-in-out infinite 0.8s; }
.rt-climb { --dur: 9s; }
.rt-cl-grid { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.rt-cl-base { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; stroke-dasharray: 4 5; }
.rt-cl-baselbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; fill: rgba(255, 255, 255, 0.45); }
.rt-cl-branch { fill: none; stroke: var(--c); stroke-opacity: 0.22; stroke-width: 1.2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: rt-climbline var(--dur) ease-in-out infinite; animation-delay: var(--d, 0s); }
.rt-cl-best { fill: none; stroke: var(--b); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px var(--c)); animation: rt-climbline var(--dur) ease-in-out infinite; animation-delay: 0.6s; }
.rt-cl-step { fill: var(--b); opacity: 0; animation: rt-climbdot var(--dur) linear infinite; animation-delay: calc(0.6s + var(--p) * 5.4s); }
.rt-cl-more { font-size: 22px; fill: var(--b); fill-opacity: 0.7; animation: rt-pwr 2.4s ease-in-out infinite; }
@keyframes rt-climbline { 0% { stroke-dashoffset: 1; opacity: 1; } 58% { stroke-dashoffset: 0; opacity: 1; } 90% { stroke-dashoffset: 0; opacity: 1; } 97% { opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes rt-climbdot { 0% { opacity: 0; } 3% { opacity: 1; } 36% { opacity: 1; } 42% { opacity: 0; } 100% { opacity: 0; } }
.tree-list .tree-more { border-left-style: dashed; }
@media (prefers-reduced-motion: reduce) { .rt-cl-branch, .rt-cl-best { animation: none; stroke-dashoffset: 0; } .rt-cl-step { animation: none; opacity: 1; } .rt-pwr, .rt-cl-more, .rt-more circle { animation: none; } }

/* the tree floats over a draggable sky: only its links take the pointer */
.hero-tree .benchmark-exhibit, .rtree-wrap, .rtree { pointer-events: none; }
.rtree .rt-link { pointer-events: auto; }
.hero-tree .benchmark-intro { pointer-events: auto; }

/* ---- hero, fifth pass: three real-data charts in the card palette, one big GPU server ---- */
.rt-room { opacity: 0.92; }
.rt-box { fill: #0c1526; stroke: rgba(170, 195, 235, 0.55); stroke-width: 1.2; }
.rt-bezel { fill: none; stroke: rgba(170, 195, 235, 0.18); stroke-width: 1; }
.rt-fanring { fill: rgba(255, 255, 255, 0.03); stroke: rgba(170, 195, 235, 0.55); stroke-width: 1.2; }
.rt-fanring.small { stroke-width: 1; }
.rt-fan path { fill: rgba(170, 195, 235, 0.45); }
.rt-fan circle { fill: rgba(220, 232, 250, 0.8); }
.rt-fan.big path { fill: rgba(170, 195, 235, 0.55); }
.rt-gpu-card { fill: rgba(30, 48, 82, 0.75); stroke: rgba(170, 195, 235, 0.5); stroke-width: 1; }
.rt-gpu-lbl { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; fill: #EAF1FB; }
.rt-gpu-sub { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; fill: #8FA6C9; }
.rt-ledbar { fill: #8FF0FF; animation: rt-pwr 2.2s ease-in-out infinite; animation-delay: var(--d, 0s); filter: drop-shadow(0 0 4px rgba(143, 240, 255, 0.9)); }
.rt-chart { --dur: 11s; }
.rt-ch-grid { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.rt-ch-base { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; stroke-dasharray: 4 5; }
.rt-ch-lbl, .rt-ch-axis { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em; fill: rgba(255, 255, 255, 0.45); }
.rt-ch-axis { fill: rgba(255, 255, 255, 0.32); }
.rt-ch-end { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; opacity: 0; animation: rt-chpop var(--dur) linear infinite; animation-delay: calc(0.4s + var(--p) * 6s); }
.rt-ch-line { fill: none; stroke: var(--c); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px var(--c)); animation: rt-chline var(--dur) linear infinite; animation-delay: 0.4s; }
.rt-ch-line.curve { stroke-width: 2.6; }
.rt-ch-stem { stroke: var(--c); stroke-opacity: 0.45; stroke-width: 1.4; opacity: 0; animation: rt-chpop var(--dur) linear infinite; animation-delay: calc(0.4s + var(--p) * 6s); }
.rt-ch-stem.dead { stroke: rgba(255, 255, 255, 0.28); }
.rt-ch-dot { fill: var(--c); opacity: 0; animation: rt-chpop var(--dur) linear infinite; animation-delay: calc(0.4s + var(--p) * 6s); }
.rt-ch-dot.final { filter: drop-shadow(0 0 6px var(--c)); }
.rt-ch-ghost { fill: none; stroke: var(--c); stroke-width: 1.4; stroke-dasharray: 2 2; opacity: 0; animation: rt-chpop var(--dur) linear infinite; animation-delay: calc(0.4s + var(--p) * 6s); }
.rt-ch-mk { fill: var(--c); fill-opacity: 0.85; opacity: 0; animation: rt-chpop var(--dur) linear infinite; animation-delay: calc(0.4s + var(--p) * 6s); }
.rt-ch-mk.x { fill: none; }
.rt-ch-mk.x line { stroke: var(--c); stroke-opacity: 0.8; stroke-width: 1.3; }
@keyframes rt-chline { 0% { stroke-dashoffset: 1; opacity: 1; } 55% { stroke-dashoffset: 0; opacity: 1; } 90% { stroke-dashoffset: 0; opacity: 1; } 97% { opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes rt-chpop { 0% { opacity: 0; } 2% { opacity: 1; } 42% { opacity: 1; } 47% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rt-ch-line { animation: none; stroke-dashoffset: 0; } .rt-ch-dot, .rt-ch-stem, .rt-ch-mk, .rt-ch-ghost, .rt-ch-end { animation: none; opacity: 1; } .rt-ledbar { animation: none; } }
/* marks are timed by SMIL now, in step with the line; CSS only styles them */
.rt-ch-dot, .rt-ch-stem, .rt-ch-mk, .rt-ch-ghost, .rt-ch-end { animation: none; }
.rt-gpu-lbl { font-size: 12.5px; }
.rt-gpu-sub { font-size: 9.5px; }

/* ---- hero, sixth pass: three wordless autoresearch vibes ---- */
.rt-tr-edge { fill: none; stroke: #9DB9E8; stroke-opacity: 0.28; stroke-width: 1.1; stroke-dasharray: 1; stroke-dashoffset: 1; animation: rt-grow var(--dur) linear infinite; animation-delay: calc(0.4s + var(--d) * 0.6 * var(--dur)); }
.rt-tr-win { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px var(--c)); animation: rt-grow var(--dur) linear infinite; animation-delay: calc(0.4s + var(--d) * 0.6 * var(--dur)); }
.rt-tr-node { fill: #9DB9E8; fill-opacity: 0.55; }
.rt-tr-node.win { fill: var(--c); fill-opacity: 1; }
.rt-tr-node.tip { filter: drop-shadow(0 0 6px var(--c)); }
.rt-tr-x line { stroke: #9DB9E8; stroke-opacity: 0.4; stroke-width: 1.2; }
.rt-lp-base { stroke: rgba(255, 255, 255, 0.3); stroke-width: 1; stroke-dasharray: 4 5; }
.rt-lp-stem { stroke: var(--c); stroke-opacity: 0.4; stroke-width: 1.3; }
.rt-lp-dot { fill: var(--c); }
.rt-lp-x line { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.3; }
.rt-lp-best { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 4px var(--c)); stroke-dasharray: 1; stroke-dashoffset: 1; animation: rt-chline var(--dur) linear infinite; animation-delay: 0.4s; }
.rt-lp-peak { fill: var(--c); filter: drop-shadow(0 0 7px var(--c)); }
.rt-bd-target { stroke: rgba(255, 255, 255, 0.3); stroke-width: 1; stroke-dasharray: 4 5; }
.rt-bd-line { fill: none; stroke: #9DB9E8; stroke-opacity: 0.22; stroke-width: 1.1; stroke-dasharray: 1; stroke-dashoffset: 1; animation: rt-chline var(--dur) linear infinite; animation-delay: calc(0.4s + var(--d)); }
.rt-bd-line.win { stroke: var(--c); stroke-opacity: 1; stroke-width: 2.2; filter: drop-shadow(0 0 4px var(--c)); }
.rt-bd-tip { fill: var(--c); filter: drop-shadow(0 0 7px var(--c)); }
@keyframes rt-grow { 0% { stroke-dashoffset: 1; opacity: 1; } 12% { stroke-dashoffset: 0; opacity: 1; } 90% { stroke-dashoffset: 0; opacity: 1; } 97% { opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
.rt-gpu-lbl { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .rt-tr-edge, .rt-tr-win, .rt-lp-best, .rt-bd-line { animation: none; stroke-dashoffset: 0; } }

/* ---- hero, seventh pass: a wall of 1,536 GPUs and the scheduler moving jobs across it ---- */
.rt-room { opacity: 0.95; }
.rt-rk { fill: rgba(14, 22, 40, 0.85); stroke: rgba(170, 195, 235, 0.35); stroke-width: 1; }
.rt-room .rt-fan circle { fill: none; stroke: rgba(170, 195, 235, 0.5); stroke-width: 0.9; }
.rt-room .rt-fan path { stroke: rgba(170, 195, 235, 0.5); stroke-width: 0.9; }
.rtree { --idle: rgba(255, 255, 255, 0.07); }
.rt-gcells rect { fill: var(--idle); animation: rt-sched 16s linear infinite; animation-delay: calc(-0.006s * var(--i, 0)); }
@keyframes rt-sched {
  0%, 20% { fill: var(--a); }
  24%, 44% { fill: var(--b); }
  48%, 68% { fill: var(--c); }
  72%, 92% { fill: var(--d); }
  95%, 100% { fill: var(--idle); }
}
@media (prefers-reduced-motion: reduce) { .rt-gcells rect { animation: none; fill: var(--a); } }
/* cheaper: animate the 37 job groups, let the 1,536 cells inherit */
.rt-gcells { fill: var(--idle); animation: rt-sched 16s linear infinite; animation-delay: calc(-0.09s * var(--i, 0)); }
.rt-gcells rect { fill: inherit; animation: none; }
@media (prefers-reduced-motion: reduce) { .rt-gcells { animation: none; fill: var(--a); } }
/* the three signature cards in the sample list: not links, marked by a gold hairline */
.tcard.sig { cursor: default; border-top: 3px solid #c8a457; }
.tcard.sig:hover { border-color: var(--line); border-top-color: #c8a457; transform: none; box-shadow: none; }
.tcard .sigtag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #9a7a2e; font-weight: 600; }
.lb-head .lede { max-width: 62ch; }

/* Call for Contributors: the contact line under the button */
#contribute .cfc-contact { margin: 22px 0 0; font-size: 14px; line-height: 1.7; color: var(--field-muted); }
#contribute .cfc-contact a { color: var(--field-body); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
#contribute .cfc-contact a:hover { color: #ffffff; border-bottom-color: #ffffff; }

/* ============================================================
   PHONE POLISH — one swipeable tab row per frame, readable
   small labels, the wide chart steps aside, comfortable taps
   ============================================================ */
@media (max-width: 720px) {
  .task-frame .task-tabs {
    display: flex; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding: 2px 0 6px; margin-right: -18px; padding-right: 18px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent);
  }
  .task-frame .task-tabs::-webkit-scrollbar { display: none; }
  .task-frame .tt { flex: none; white-space: nowrap; min-height: 38px; }
  .task-frame .task-tags { gap: 6px; }
  .task-frame .task-tags .tag { font-size: 10px; padding: 5px 9px; }
  .task-card .tc-link { display: inline-block; margin: 6px 14px 0 0; }
  .lb-filter .chip { min-height: 38px; }
  .fan-list small { font-size: 10px; }
  .fan-list em { font-size: 11px; letter-spacing: 0.1em; }
  .fan-list li { gap: 5px; padding: 4px 0 4px 14px; }
  .tree-list .tree-more b { font-size: 22px; line-height: 0.6; }
  .hero-tree .benchmark-intro h1 { font-size: clamp(46px, 13vw, 58px); }
  .hero-tree .benchmark-intro > span { font-size: 16px; line-height: 1.45; }
}
@media (max-width: 600px) {
  /* the wide best-so-far plot only works at width; the ladder table and the
     measured chart carry the same story on a phone */
  .task-media .task-fig.wide { display: none; }
}
@media (max-width: 720px) {
  /* the signature frame's own #id rule kept the tabs wrapping; same swipe row here */
  #signature .task-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin-right: -18px; padding-right: 18px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent); }
  #signature .task-tabs::-webkit-scrollbar { display: none; }
  /* one card per row on a phone */
  .tgrid { grid-template-columns: 1fr; }
  /* the runs table keeps its columns and scrolls sideways instead of squeezing */
  .detail .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
  .detail table.runs { min-width: 560px; }
  .detail table.subs { min-width: 520px; }
}
/* grid tracks must be allowed to shrink below a card's longest unbreakable line,
   or one long score label pushes every card past the page padding on a phone */
.tgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 760px) { .tgrid { grid-template-columns: minmax(0, 1fr); } .tcard-foot { flex-wrap: wrap; } .tcard-foot .best { white-space: normal; } }

/* signature frame: a metadata line, not a second row of tabs */
.task-frame.deep .task-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0;
  margin: 2px 0 20px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d9c48f;
}
.task-frame.deep .task-meta span + span::before { content: "·"; margin: 0 12px; color: rgba(217, 196, 143, 0.5); }
.task-frame.deep .task-meta span:last-child { color: #f2f5fc; font-weight: 700; }
/* the runtime axis under the optimizer climb leads the figure */
.task-frame.deep .traj.evo .xax { stroke: #ffffff; stroke-opacity: 0.95; stroke-width: 2; }
.task-frame.deep .traj.evo .xtk { stroke: #ffffff; stroke-opacity: 0.9; stroke-width: 1.6; }
.task-frame.deep .traj.evo .xt { fill: #ffffff; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; }
.task-frame.deep .traj.evo .axl.xl { fill: #ffffff; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; }
/* the lightweight frame gets the same metadata line, in daylight colours */
.task-frame.slate .task-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0;
  margin: 2px 0 20px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.task-frame.slate .task-meta span + span::before { content: "·"; margin: 0 12px; color: var(--faint); }
.task-frame.slate .task-meta span:last-child { color: var(--ink); font-weight: 700; }

/* ============================================================
   PHONE HERO — the title alone in the sky, then the tree as its
   own block that pans sideways; the thesis starts folded
   ============================================================ */
.thesis-toggle { display: none; }
@media (max-width: 720px) {
  .hero-tree { padding-bottom: 0; min-height: 0; }
  .hero-tree .benchmark-shell.wrap-wide { padding: 0 18px 0; min-height: 0; }
  .hero-tree .benchmark-intro {
    min-height: calc(100svh - 58px); margin: 0; max-width: none;
    display: flex; flex-direction: column; justify-content: center; text-align: center;
  }
  .hero-tree .benchmark-intro > span { margin: 14px auto 0; max-width: 30ch; }
  .hero-tree .benchmark-intro h1 { font-size: clamp(50px, 14vw, 64px); }
  /* the tree: a second block under the sky, panning left to right */
  .hero-tree .benchmark-exhibit {
    display: block; margin: 0 -18px; padding: 18px 0 0;
    background: #04070f; border-top: 1px solid rgba(140, 170, 230, 0.16);
    overflow-x: auto; overflow-y: hidden; pointer-events: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; scroll-snap-type: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent);
  }
  .hero-tree .benchmark-exhibit::-webkit-scrollbar { display: none; }
  .hero-tree .benchmark-exhibit svg.rtree { display: block; width: 1300px; max-width: none; height: auto; pointer-events: auto; }
  .rtree-wrap, .rtree { pointer-events: auto; }
  .fan-list, .tree-list { display: none; }
  /* the thesis folds to its title on a phone */
  .thesis-toggle {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
    padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--paper-2); color: var(--ink); cursor: pointer;
  }
  .thesis.is-folded .thesis-body, .thesis.is-folded .thesis-chain { display: none; }
  .thesis.is-folded { padding-bottom: clamp(28px, 6vw, 40px); }
}
@media (max-width: 720px) {
  /* the whole section folds: the design-principle cards belong to it too */
  .thesis.is-folded .thesis-principles { display: none; }
}

/* phones: the thesis disclosure reads as a button under the first paragraph */
@media (max-width: 720px) {
  .thesis .thesis-more > summary {
    display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 4px; list-style: none;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
    padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--paper-2); color: var(--ink); cursor: pointer;
  }
  .thesis .thesis-more > summary::-webkit-details-marker { display: none; }
  .thesis .thesis-more > summary::after { content: "▾"; }
  .thesis .thesis-more[open] > summary::after { content: "▴"; }
  .thesis .thesis-more[open] > summary { margin-bottom: 12px; }
  .thesis.is-folded .thesis-body, .thesis.is-folded .thesis-chain, .thesis.is-folded .thesis-principles { display: revert; }
}