@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Inter:wght@400;500;600;700&display=swap");

    :root {
      --paper: #f3f2ed; /* palette mirrors persimmon.humansand.ai/blog */
      --surface: #f8f7f3;
      --ink: #3b3d37;
      --muted: #6b6e65;
      --rule: #d9dcd3;
      --rule-dark: #b8bfaa;
      --teal: #806354; /* the published post's accent, kept under the old token name */
      --teal-dark: #5f4a3f;
      --teal-soft: #ece5dc;
      --coral: #c85e4b;
      --gold: #b68a38;
      --blue: #527aa0;
      --purple: #7f6a98;
      --grey: #928d84;
      --move-correct: #2f8061;
      --move-incorrect: #c4514e;
      --move-blue: #4778a8;
      --move-violet: #8067a3;
      --move-amber: #b77b2e;
      --move-cyan: #3b8796;
      --move-magenta: #a45f82;
      --move-orange: #c26f3b;
      --move-no-response: #6f7782;
      --move-other: #59554e;
      --move-ended: #b8b4ac;
      --model-ours: #ab806d; /* Persimmon: the terracotta of the previous Persimmon post */
      --model-posttrained: #b3b3b0; /* the published post's grey for non-Persimmon bars */
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      --serif: "Newsreader", Georgia, serif;
      --sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--paper);
      color: var(--ink);
      font-family: var(--sans);
      margin: 0;
    }

    .prose-editor-toolbar {
      align-items: center;
      background: rgba(253, 251, 246, 0.97);
      border: 1px solid var(--rule-dark);
      bottom: 18px;
      box-shadow: 0 8px 28px rgba(23, 23, 20, 0.12);
      display: flex;
      gap: 8px;
      padding: 8px;
      position: fixed;
      right: 18px;
      z-index: 1000;
    }

    .prose-editor-toolbar button {
      background: transparent;
      border: 1px solid var(--rule-dark);
      color: var(--ink);
      cursor: pointer;
      font-family: var(--mono);
      font-size: 0.64rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      padding: 8px 10px 7px;
      text-transform: uppercase;
    }

    .prose-editor-toolbar button:hover,
    .prose-editor-toolbar button:focus-visible {
      border-color: var(--teal-dark);
      color: var(--teal-dark);
      outline: none;
    }

    .prose-editor-toolbar__toggle[aria-pressed="true"] {
      background: var(--teal-dark);
      border-color: var(--teal-dark);
      color: var(--paper);
    }

    .prose-editor-toolbar__status {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.6rem;
      max-width: 150px;
    }

    body.is-prose-editing [data-prose-editable] {
      border-radius: 2px;
      cursor: text;
      outline: 1px dashed rgba(23, 86, 79, 0.32);
      outline-offset: 4px;
      transition: background 120ms ease, outline-color 120ms ease;
    }

    body.is-prose-editing [data-prose-editable]:hover {
      background: rgba(225, 236, 232, 0.45);
      outline-color: var(--teal);
    }

    body.is-prose-editing [data-prose-editable]:focus {
      background: var(--surface);
      outline: 2px solid var(--teal);
    }

    @media (max-width: 720px) {
      .prose-editor-toolbar {
        bottom: 10px;
        left: 10px;
        overflow-x: auto;
        right: 10px;
      }

      .prose-editor-toolbar__status {
        margin-left: auto;
        min-width: 100px;
      }
    }

    a {
      color: inherit;
    }

    .page {
      overflow-x: clip;
    }

    .shell {
      margin: 0 auto;
      max-width: 1200px;
      padding-left: 40px;
      padding-right: 40px;
    }

    .eyebrow {
      align-items: center;
      color: var(--teal);
      display: flex;
      font-family: var(--mono);
      font-size: 0.65rem;
      font-weight: 700;
      gap: 10px;
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      background: currentColor;
      content: "";
      height: 7px;
      width: 7px;
    }

    .site-header {
      border-bottom: 1px solid var(--rule);
    }

    .site-header__inner {
      align-items: center;
      display: flex;
      height: 68px;
      justify-content: space-between;
    }

    .wordmark {
      font-family: var(--serif);
      font-size: 1.2rem;
      letter-spacing: -0.03em;
    }

    .draft-pill {
      border: 1px solid var(--rule-dark);
      border-radius: 100px;
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      padding: 7px 11px 6px;
      text-transform: uppercase;
    }

    .hero {
      border-bottom: 1px solid var(--rule);
      padding-bottom: 88px;
      padding-top: 80px;
      position: relative;
    }

    .hero::after {
      background-image:
        linear-gradient(var(--rule) 1px, transparent 1px),
        linear-gradient(90deg, var(--rule) 1px, transparent 1px);
      background-size: 38px 38px;
      content: "";
      height: 270px;
      opacity: 0.27;
      position: absolute;
      right: -36px;
      top: 0;
      transform: skewY(-8deg);
      width: 36vw;
      z-index: -1;
    }

    .hero h1 {
      font-family: var(--serif);
      font-size: clamp(3.2rem, 6vw, 4.9rem);
      font-weight: 400;
      letter-spacing: -0.055em;
      line-height: 0.9;
      margin: 38px 0 34px -0.055em;
    }

    .hero h1 em {
      color: var(--teal);
      display: block;
      font-size: 0.42em;
      font-style: italic;
      letter-spacing: -0.045em;
      line-height: 1.15;
      margin-left: 0.15em;
      margin-top: 0.25em;
    }

    .hero__deck {
      font-family: var(--serif);
      font-size: clamp(1.2rem, 2.2vw, 1.6rem);
      letter-spacing: -0.025em;
      line-height: 1.24;
      margin: 0;
      max-width: 850px;
    }

    .hero__byline {
      color: var(--teal-dark);
      font-family: var(--serif);
      font-size: 1.05rem;
      font-style: italic;
      margin: 24px 0 0;
    }

    .hero__meta {
      color: var(--muted);
      display: flex;
      font-family: var(--mono);
      font-size: 0.63rem;
      gap: 28px;
      letter-spacing: 0.06em;
      margin-top: 42px;
      text-transform: uppercase;
    }

    .article-grid {
      display: grid;
      gap: 64px;
      grid-template-columns: 190px minmax(0, 860px);
      justify-content: center;
      padding-bottom: 116px;
      padding-top: 82px;
    }

    .toc {
      align-self: start;
      display: flex;
      flex-direction: column;
      max-height: calc(100vh - 128px);
      overflow: hidden;
      position: sticky;
      top: 96px;
    }

    .toc__links {
      flex: 0 1 auto;
      min-height: 0;
      overflow-y: auto;
      scrollbar-width: thin;
    }

    .toc__label {
      border-bottom: 1px solid var(--ink);
      font-family: var(--mono);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      padding-bottom: 10px;
      text-transform: uppercase;
    }

    .toc ol {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .toc a {
      border-bottom: 1px solid var(--rule);
      color: var(--muted);
      display: grid;
      font-size: 0.84rem;
      gap: 8px;
      grid-template-columns: 22px 1fr;
      line-height: 1.4;
      padding: 12px 0;
      position: relative;
      text-decoration: none;
      transition: color 140ms ease, border-color 140ms ease;
    }

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

    .toc a[aria-current="location"] {
      border-bottom-color: var(--rule-dark);
      color: var(--ink);
      font-weight: 700;
    }

    .toc a[aria-current="location"]::after {
      background: var(--teal);
      bottom: 8px;
      content: "";
      left: -10px;
      position: absolute;
      top: 8px;
      width: 3px;
    }

    .toc a[aria-current="location"] .toc__number {
      color: var(--teal-dark);
    }

    .toc__number {
      color: var(--teal);
      font-family: var(--mono);
      font-size: 0.68rem;
      padding-top: 2px;
    }

    .toc-viz {
      border-top: 1px solid var(--ink);
      flex: 0 0 auto;
      margin-top: 16px;
      padding-top: 11px;
    }

    .toc-viz[hidden] {
      display: none;
    }

    .toc-viz__head {
      align-items: baseline;
      display: flex;
      font-family: var(--mono);
      font-size: 0.52rem;
      gap: 8px;
      justify-content: space-between;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .toc-viz__kicker {
      color: var(--teal-dark);
      font-weight: 700;
    }

    .toc-viz__section {
      color: var(--muted);
      text-align: right;
    }

    .toc-viz__body {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 160ms ease, transform 180ms ease;
    }

    .toc-viz.is-changing .toc-viz__body {
      opacity: 0;
      transform: translateY(4px);
    }

    .toc-viz__title {
      font-family: var(--serif);
      font-size: 0.84rem;
      line-height: 1.2;
      margin-top: 7px;
    }

    #toc-viz-chart {
      display: block;
      height: auto;
      margin-top: 6px;
      overflow: visible;
      width: 100%;
    }

    #toc-viz-chart .toc-grid {
      stroke: var(--rule);
      stroke-width: 1;
    }

    #toc-viz-chart .toc-axis,
    #toc-viz-chart .toc-label,
    #toc-viz-chart .toc-value {
      fill: var(--muted);
      font-family: var(--mono);
      font-size: 8px;
    }

    #toc-viz-chart .toc-label,
    #toc-viz-chart .toc-value {
      fill: var(--ink);
    }

    #toc-viz-chart .toc-track {
      fill: var(--paper);
    }

    #toc-viz-chart .toc-human {
      fill: var(--teal);
      stroke: var(--teal);
    }

    #toc-viz-chart .toc-ours {
      fill: var(--model-ours);
      stroke: var(--model-ours);
    }

    #toc-viz-chart .toc-frontier {
      fill: var(--coral);
      stroke: var(--coral);
    }

    #toc-viz-chart .toc-other {
      fill: var(--gold);
      stroke: var(--gold);
    }

    #toc-viz-chart .toc-line {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .toc-viz__takeaway {
      border-left: 2px solid var(--teal);
      color: var(--muted);
      font-family: var(--sans);
      font-size: 0.66rem;
      line-height: 1.4;
      margin: 4px 0 0;
      padding-left: 8px;
    }

    .toc__sublist {
      margin: -1px 0 5px !important;
      padding-left: 30px !important;
    }

    .toc__sublist a {
      display: block;
      font-size: 0.72rem;
      padding: 9px 0;
    }

    .toc__sublist a::before {
      color: var(--teal);
      content: "↳";
      margin-right: 8px;
    }

    .article {
      min-width: 0;
    }

    .article p {
      font-family: var(--sans);
      font-size: 1.05rem;
      line-height: 1.65;
      margin: 0 0 1.45em;
      max-width: 860px;
    }

    .article p strong {
      font-weight: 700;
    }

    .article .lead {
      font-family: var(--serif);
      font-size: 1.28rem;
      letter-spacing: -0.018em;
      line-height: 1.55;
    }

    .article h2 {
      font-family: var(--serif);
      font-size: clamp(2.1rem, 3.8vw, 3rem);
      font-weight: 400;
      letter-spacing: -0.055em;
      line-height: 0.98;
      margin: 1.7em 0 0.55em;
      scroll-margin-top: 36px;
    }

    .article h3 {
      font-family: var(--serif);
      font-size: 1.8rem;
      font-weight: 400;
      letter-spacing: -0.035em;
      line-height: 1.1;
      margin: 2.25em 0 0.65em;
    }

    .section-number {
      color: var(--teal);
      display: block;
      font-family: var(--mono);
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.13em;
      margin-bottom: 15px;
      text-transform: uppercase;
    }

    .benchmark-subsection {
      border-top: 1px solid var(--rule-dark);
      margin-top: 54px;
      padding-top: 18px;
    }

    .article .benchmark-subsection__title {
      align-items: center;
      color: var(--teal-dark);
      display: flex;
      font-family: var(--mono);
      font-size: 0.68rem;
      font-weight: 700;
      gap: 12px;
      letter-spacing: 0.12em;
      margin: 0 0 16px;
      text-transform: uppercase;
    }

    .article .benchmark-subsection__title::after {
      border-top: 1px solid var(--rule);
      content: "";
      flex: 1;
    }

    .article .result-chapter > .benchmark-subsection__title {
      font-size: 0.9rem;
      letter-spacing: 0.08em;
      line-height: 1.35;
      margin-bottom: 18px;
    }

    .pullquote {
      border-left: 3px solid var(--teal);
      color: var(--ink);
      font-family: var(--serif);
      font-size: 1.24rem;
      font-style: normal;
      letter-spacing: -0.01em;
      line-height: 1.55;
      margin: 34px 0 38px;
      padding: 4px 0 4px 20px;
    }

    .concept-pair {
      display: grid;
      gap: 1px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin: 40px 0 54px;
    }

    .concept {
      background: var(--surface);
      border: 1px solid var(--rule);
      padding: 25px;
    }

    .concept + .concept {
      border-left: 0;
    }

    .concept__index {
      color: var(--teal);
      font-family: var(--mono);
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.08em;
    }

    .concept h3 {
      font-size: 1.65rem;
      margin: 16px 0 9px;
    }

    .concept p {
      color: var(--muted);
      font-family: var(--sans);
      font-size: 0.82rem;
      line-height: 1.55;
      margin: 0;
    }

    .full-bleed {
      margin-left: -64px;
      margin-right: 0;
    }

    .dataset-figure {
      background: var(--surface);
      border: 1px solid var(--rule-dark);
      margin-bottom: 74px;
      margin-top: 46px;
      padding: 30px 28px 22px;
    }

    .figure-head {
      align-items: baseline;
      display: flex;
      justify-content: space-between;
      margin-bottom: 22px;
    }

    .figure-label {
      color: var(--teal);
      font-family: var(--mono);
      font-size: 0.59rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .figure-title {
      font-family: var(--serif);
      font-size: 1.15rem;
    }

    /* Fork figure: real-vs-model learner turns at the same conversation sites */
    .fork-figure {
      --real: var(--teal);
      --real-bg: var(--teal-soft);
      --gpt: var(--coral);
      --gpt-bg: #f6e7e1;
      --tut-bg: #efe9dc;
      margin: 46px 0 74px;
    }

    .fork-card {
      background: var(--surface);
      border: 1px solid var(--rule-dark);
      padding: 30px 28px 22px;
    }

    .fork-figure--teaser .fork-card {
      padding: 22px;
    }

    .fork-story {
      display: grid;
      gap: 36px;
      grid-template-columns: minmax(0, 1fr) 290px;
    }

    .fork-story > * {
      min-width: 0;
    }

    .fork-story-scroll {
      max-height: none;
      min-width: 0;
      overflow: visible;
      padding: 4px 0 20px 2px;
      width: 100%;
    }

    .fork-story-scroll .fork-moment {
      scroll-margin-block: 140px;
      scroll-snap-align: center;
    }

    .fork-figure--teaser .diagram {
      min-width: 0;
      width: 100%;
    }

    .fork-story-notes {
      align-self: start;
      border-left: 1px solid var(--rule);
      min-width: 0;
      padding: 8px 0 0 20px;
      position: sticky;
      top: 96px;
    }

    .fork-story-notes__head {
      border-bottom: 1px solid var(--rule-dark);
      display: grid;
      gap: 5px;
      padding-bottom: 13px;
    }

    .fork-story-notes__head span {
      color: var(--teal-dark);
      font-family: var(--mono);
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    .fork-story-notes__head strong {
      font-family: var(--serif);
      font-size: 1.15rem;
      font-weight: 500;
      line-height: 1.15;
    }

    .fork-story-notes ol {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .fork-story-note {
      display: none;
      gap: 10px;
      grid-template-columns: 26px minmax(0, 1fr);
      padding: 16px 14px;
    }

    .fork-story-note.is-active {
      background: var(--surface);
      background: color-mix(in srgb, var(--gpt-bg) 42%, var(--surface));
      border-left: 3px solid var(--coral);
      display: grid;
      margin: 14px 0;
    }

    .fork-story-note__number {
      color: var(--coral);
      font-family: var(--mono);
      font-size: 0.65rem;
      font-weight: 700;
      padding-top: 3px;
    }

    .fork-story-note strong {
      display: block;
      font-family: var(--serif);
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.2;
    }

    .fork-story-note p {
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.45;
      margin: 6px 0 8px;
    }

    .fork-story-note small {
      border-left: 2px solid var(--teal);
      color: var(--ink);
      display: block;
      font-family: var(--sans);
      font-size: 0.72rem;
      line-height: 1.4;
      padding-left: 8px;
    }

    .fork-story-progress {
      display: grid;
      gap: 6px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top: 6px;
    }

    .fork-story-progress span {
      border-top: 2px solid var(--rule);
      color: var(--muted);
      display: block;
      font-family: var(--mono);
      font-size: 0.57rem;
      letter-spacing: 0.06em;
      padding-top: 4px;
      transition: border-color 180ms ease, color 180ms ease, opacity 180ms ease;
    }

    .fork-story-progress span.is-complete {
      border-color: var(--coral);
      color: var(--coral);
      opacity: 0.62;
    }

    .fork-story-progress span.is-active {
      font-weight: 700;
      opacity: 1;
    }

    .fork-figure .fork-story-hint {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.62rem;
      line-height: 1.4;
      letter-spacing: 0.04em;
      margin: 8px 0 0;
      max-width: none;
    }

    .fork-figure--teaser .fork-moment .alt:last-child {
      opacity: 0.44;
      position: relative;
      transition: opacity 180ms ease, transform 180ms ease;
    }

    .fork-figure--teaser .fork-moment.is-active .alt:last-child {
      opacity: 1;
      transform: translateY(-2px);
    }

    .fork-response-index {
      background: var(--surface);
      color: var(--coral);
      display: none;
      font-family: var(--mono);
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      padding: 0 4px;
      position: absolute;
      right: 10px;
      top: -10px;
    }

    .fork-figure--teaser .fork-moment.is-active .fork-response-index {
      display: block;
    }

    .fork-figure--teaser .fork-moment.is-active .g-bubble {
      border: 2px solid var(--coral);
      box-shadow: none;
    }

    .fork-figure--teaser .why {
      display: none;
    }

    .fork-caption {
      color: var(--muted);
      font-family: var(--sans);
      font-size: 0.78rem;
      line-height: 1.5;
      margin: 14px 0 0;
    }

    .fork-caption-label {
      color: var(--teal);
      font-family: var(--mono);
      font-size: 0.59rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      margin-right: 8px;
      text-transform: uppercase;
    }

    .fork-figure .scroller {
      overflow-x: auto;
    }

    .fork-figure .diagram {
      margin: 0 auto;
      min-width: 560px;
      width: min(680px, 100%);
    }

    .fork-figure .who {
      font-family: var(--mono);
      font-size: 0.59rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .fork-figure .who-t {
      background: var(--surface);
      color: var(--muted);
      padding: 0 8px;
      position: relative;
    }

    .fork-figure .who-r { color: var(--real); }
    .fork-figure .who-g { color: var(--gpt); }

    .fork-figure .trunk {
      align-items: center;
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 12px 0;
      position: relative;
    }

    .fork-figure .trunk::before {
      border-left: 2.5px solid var(--real);
      bottom: 0;
      content: "";
      left: 50%;
      position: absolute;
      top: 0;
      transform: translateX(-1.25px);
    }

    .fork-figure .diagram > .trunk:first-of-type::before { top: 16px; }

    .fork-figure .bubble {
      border-radius: 14px;
      font-family: var(--sans);
      font-size: 0.84rem;
      line-height: 1.45;
      max-width: 88%;
      padding: 8px 12px;
      position: relative;
      width: fit-content;
    }

    .fork-figure .tut { background: var(--tut-bg); color: var(--ink); }

    .fork-figure .split,
    .fork-figure .join { display: block; height: 46px; width: 100%; }

    .fork-figure .pair { display: grid; grid-template-columns: 1fr 1fr; }

    .fork-figure .alt {
      align-items: center;
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: 0 10px;
    }

    .fork-figure .node,
    .fork-figure .gnode {
      background: var(--surface);
      border: 2.5px solid var(--real);
      border-radius: 50%;
      height: 13px;
      margin-bottom: 7px;
      width: 13px;
    }

    .fork-figure .gnode { border-color: var(--gpt); }

    .fork-figure .r-bubble { background: var(--real-bg); border: 1px solid var(--real); }
    .fork-figure .g-bubble { background: var(--gpt-bg); border: 1px dashed var(--gpt); }

    .fork-figure .drop {
      border-left: 2.5px solid var(--real);
      flex: 1;
      margin-top: 7px;
      min-height: 10px;
      width: 0;
    }

    .fork-figure .cap {
      align-items: center;
      border: 1px dotted var(--gpt);
      border-radius: 999px;
      color: var(--gpt);
      display: inline-flex;
      font-family: var(--mono);
      font-size: 0.59rem;
      font-weight: 700;
      gap: 6px;
      letter-spacing: 0.1em;
      margin: 9px 0 2px;
      padding: 2px 10px;
      text-transform: uppercase;
    }

    .fork-figure .cap::before { content: "⊗"; font-size: 0.72rem; }

    .fork-figure .why {
      align-self: stretch;
      color: var(--muted);
      font-family: var(--sans);
      font-size: 0.75rem;
      font-style: italic;
      line-height: 1.5;
      margin: 5px 0 0;
      max-width: 100%;
      overflow-wrap: anywhere;
      padding-inline: 2px;
      text-align: center;
      width: 100%;
    }

    .fork-figure .badge {
      border: 1px solid var(--gpt);
      border-radius: 999px;
      color: var(--gpt);
      display: block;
      font-family: var(--mono);
      font-size: 0.55rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      margin: 6px auto 0;
      padding: 1px 8px;
      text-transform: uppercase;
      width: fit-content;
    }

    .fork-figure .gap { height: 60px; position: relative; }

    .fork-figure .gap .dots {
      border-left: 2.5px dotted var(--rule-dark);
      bottom: 8px;
      left: 50%;
      position: absolute;
      top: 8px;
      transform: translateX(-1.25px);
    }

    .fork-figure .gap span {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.59rem;
      font-weight: 700;
      left: calc(50% + 18px);
      letter-spacing: 0.12em;
      position: absolute;
      text-transform: uppercase;
      top: 50%;
      transform: translateY(-50%);
    }

    .fork-figure .endrow {
      align-items: center;
      display: flex;
      flex-direction: column;
      padding-top: 2px;
    }

    .fork-figure .enode {
      background: var(--real);
      border: 2.5px solid var(--real);
      border-radius: 50%;
      height: 13px;
      width: 13px;
    }

    .fork-figure .endrow p {
      color: var(--muted);
      font-family: var(--sans);
      font-size: 0.75rem;
      font-style: italic;
      margin: 8px 0 0;
    }

    @media (max-width: 780px) {
      .fork-story {
        grid-template-columns: minmax(0, 1fr);
      }

      .fork-story-notes {
        background: var(--surface);
        border-left: 0;
        order: -1;
        padding: 0;
        position: sticky;
        top: 8px;
        z-index: 2;
      }

      .fork-story-note.is-active {
        display: grid;
      }

      .fork-story-scroll {
        padding-right: 0;
      }
    }

    .table-wrap {
      overflow-x: auto;
    }

    table {
      border-collapse: separate;
      border-spacing: 0 9px;
      table-layout: fixed;
      width: 100%;
    }

    th {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      padding: 0 14px 5px;
      text-align: left;
      text-transform: uppercase;
    }

    th:nth-child(1) { width: 21%; }
    th:nth-child(2) { width: 24%; }
    th:nth-child(3) { width: 22%; }
    th:nth-child(4) { width: 33%; }

    tbody tr {
      transition: transform 140ms ease;
    }

    tbody tr:hover {
      transform: translateY(-1px);
    }

    td {
      background: var(--paper);
      border-bottom: 1px solid var(--rule);
      border-top: 1px solid var(--rule);
      font-size: 0.84rem;
      line-height: 1.5;
      overflow-wrap: anywhere;
      padding: 18px 14px;
      vertical-align: middle;
    }

    tbody tr:hover td {
      border-color: var(--rule-dark);
      box-shadow: 0 7px 18px rgba(36, 35, 32, 0.045);
    }

    td:first-child {
      border-left: 3px solid var(--teal);
      padding-left: 16px;
    }

    td:last-child {
      border-right: 1px solid var(--rule);
    }

    .dataset-name {
      display: block;
      font-family: var(--serif);
      font-size: 1.38rem;
      letter-spacing: -0.02em;
      line-height: 1.05;
      overflow-wrap: anywhere;
    }

    .dataset-index {
      color: var(--teal);
      display: block;
      font-family: var(--mono);
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      margin-bottom: 8px;
    }

    .stat {
      display: block;
      font-family: var(--serif);
      font-size: 1.05rem;
      font-variant-numeric: tabular-nums;
      line-height: 1.15;
      margin-bottom: 4px;
    }

    .stat + .stat {
      margin-top: 10px;
    }

    .detail {
      color: var(--muted);
      display: block;
      font-family: var(--mono);
      font-size: 0.68rem;
      line-height: 1.45;
    }

    details {
      border: 1px solid var(--rule);
      background: var(--surface);
    }

    summary {
      color: var(--ink);
      cursor: pointer;
      font-family: var(--mono);
      font-size: 0.69rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      list-style: none;
      padding: 10px 34px 10px 12px;
      position: relative;
      text-transform: uppercase;
      transition: background-color 150ms ease, color 150ms ease, padding-left 150ms ease;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    summary:hover {
      background: var(--teal-soft);
      color: var(--teal-dark);
      padding-left: 16px;
    }

    summary:focus-visible {
      background: var(--teal-soft);
      color: var(--teal-dark);
      outline: 2px solid var(--teal);
      outline-offset: 2px;
      padding-left: 16px;
    }

    summary::after {
      content: "+";
      font-family: var(--sans);
      font-size: 0.76rem;
      font-weight: 400;
      position: absolute;
      right: 12px;
      top: 7px;
    }

    details[open] summary::after {
      content: "−";
    }

    details[open] summary {
      border-bottom: 1px solid var(--rule);
      color: var(--teal-dark);
    }

    .snippet {
      max-height: min(360px, 50vh);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 8px;
      scrollbar-color: var(--teal) var(--teal-soft);
      scrollbar-width: thin;
    }

    .snippet::-webkit-scrollbar {
      width: 8px;
    }

    .snippet::-webkit-scrollbar-track {
      background: var(--teal-soft);
    }

    .snippet::-webkit-scrollbar-thumb {
      background: var(--teal);
      border: 2px solid var(--teal-soft);
      border-radius: 10px;
    }

    .turn {
      display: grid;
      gap: 10px;
      grid-template-columns: 78px minmax(0, 1fr);
      padding: 9px 10px;
    }

    .turn + .turn {
      margin-top: 5px;
    }

    .turn--learner {
      background: var(--teal-soft);
      border-left: 3px solid var(--teal);
    }

    .speaker {
      color: var(--teal);
      font-family: var(--mono);
      font-size: 0.64rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      overflow-wrap: anywhere;
      padding-top: 2px;
      text-transform: uppercase;
    }

    .message {
      font-size: 0.88rem;
      line-height: 1.5;
      overflow-wrap: anywhere;
      white-space: pre-wrap;
    }

    .dataset-figure {
      margin-bottom: 62px;
      margin-top: 38px;
      padding: 24px 22px 17px;
    }

    .dataset-figure.full-bleed {
      left: 50%;
      margin-left: 0;
      margin-right: 0;
      position: relative;
      transform: translateX(-50%);
      width: min(960px, calc(100vw - 32px));
    }

    .dataset-figure .figure-head {
      margin-bottom: 15px;
    }

    .dataset-figure table {
      border-spacing: 0 6px;
    }

    .dataset-figure th {
      font-size: 0.59rem;
      padding: 0 10px 3px;
    }

    .dataset-figure td {
      font-size: 0.9rem;
      line-height: 1.4;
      padding: 12px 10px;
    }

    .dataset-figure td:first-child {
      padding-left: 12px;
    }

    .dataset-figure .dataset-name {
      font-size: 1.14rem;
    }

    .dataset-figure .dataset-index {
      font-size: 0.55rem;
      margin-bottom: 5px;
    }

    .dataset-figure .stat {
      font-size: 0.92rem;
      margin-bottom: 2px;
    }

    .dataset-figure .stat + .stat {
      margin-top: 6px;
    }

    .dataset-figure .detail {
      font-size: 0.62rem;
      line-height: 1.35;
    }

    .dataset-figure summary {
      font-size: 0.62rem;
      padding: 8px 30px 8px 10px;
    }

    .dataset-figure summary::after {
      right: 10px;
      top: 5px;
    }

    .dataset-figure .snippet {
      max-height: min(300px, 44vh);
      padding: 6px;
    }

    .dataset-figure .turn {
      gap: 8px;
      grid-template-columns: 70px minmax(0, 1fr);
      padding: 7px 8px;
    }

    .dataset-figure .turn + .turn {
      margin-top: 3px;
    }

    .dataset-figure .speaker {
      font-size: 0.58rem;
    }

    .dataset-figure .message {
      font-size: 0.78rem;
      line-height: 1.42;
    }

    .figure-note {
      color: var(--muted);
      font-size: 0.62rem;
      line-height: 1.5;
      margin: 12px 0 0;
    }

    .method-details {
      background: transparent;
      border: 0;
      border-bottom: 1px solid var(--rule-dark);
      border-top: 1px solid var(--rule-dark);
      margin: 0 0 56px;
    }

    .method-details summary {
      align-items: center;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      display: grid;
      font-family: var(--sans);
      font-size: 1rem;
      font-weight: 400;
      gap: 18px;
      grid-template-columns: minmax(0, 1fr) auto;
      letter-spacing: 0;
      list-style: none;
      padding: 16px 2px;
      position: relative;
      text-transform: none;
      transition: background-color 150ms ease, box-shadow 150ms ease, color 150ms ease, padding-left 150ms ease;
    }

    .method-details summary::-webkit-details-marker {
      display: none;
    }

    .method-details__summary-copy {
      align-items: baseline;
      display: flex;
      flex-wrap: wrap;
      gap: 9px 14px;
    }

    .method-details__eyebrow {
      color: var(--teal);
      font-family: var(--mono);
      font-size: 0.64rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .method-details__title {
      font-family: var(--serif);
      font-size: 1.08rem;
    }

    .method-details summary::after {
      background: var(--surface);
      border: 1px solid var(--teal);
      border-radius: 999px;
      color: var(--teal);
      content: "Open ↓";
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.05em;
      margin-left: 0;
      padding: 5px 8px;
      position: static;
      text-transform: uppercase;
      transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
    }

    .method-details[open] summary::after {
      content: "Close ↑";
    }

    .method-details summary:hover,
    .method-details summary:focus-visible {
      background: var(--teal-soft);
      box-shadow: inset 3px 0 var(--teal);
      color: var(--teal-dark);
      padding-left: 12px;
    }

    .method-details summary:hover::after,
    .method-details summary:focus-visible::after {
      background: var(--teal);
      color: #fff;
      transform: translateY(-1px);
    }

    .method-details summary:focus-visible {
      outline: 2px solid var(--teal);
      outline-offset: 2px;
    }

    .method-details__body {
      color: var(--muted);
      max-width: 860px;
      padding: 22px 2px 26px;
    }

    .method-details__body p {
      font-family: var(--sans);
      font-size: 1rem;
      line-height: 1.65;
      margin: 0 0 16px;
    }

    .method-details__body p:last-child {
      margin-bottom: 0;
    }

    .method-details__body em {
      color: var(--ink);
      font-family: var(--serif);
    }

    .result-chapter > .method-details {
      margin: 26px 0 40px;
    }

    .move-taxonomy-table {
      border-bottom: 1px solid var(--rule);
      border-top: 1px solid var(--rule-dark);
      margin: 18px 0 8px;
    }

    .move-taxonomy-table__caption {
      align-items: baseline;
      display: flex;
      font-family: var(--sans);
      justify-content: space-between;
      margin: 24px 0 8px;
    }

    .move-taxonomy-table__caption span:first-child {
      color: var(--ink);
      font-family: var(--mono);
      font-size: 0.67rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .move-taxonomy-table__caption span:last-child {
      color: var(--muted);
      font-size: 0.76rem;
    }

    .move-taxonomy-example[hidden] {
      display: none;
    }

    .move-taxonomy-table__row {
      align-items: baseline;
      border-bottom: 1px solid var(--rule);
      display: grid;
      gap: 10px;
      grid-template-columns: 118px minmax(0, 1fr);
      padding: 7px 6px;
      transition: background-color 140ms ease;
    }

    .move-taxonomy-table__row:not(.move-taxonomy-table__row--head):hover {
      background: color-mix(in srgb, var(--teal-soft) 28%, transparent);
    }

    .move-taxonomy-table__row:last-child {
      border-bottom: 0;
    }

    .move-taxonomy-table__row > span:first-child {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 0.86rem;
      font-weight: 600;
    }

    .move-taxonomy-table__row > span:last-child {
      color: var(--ink-soft);
      font-family: var(--sans);
      font-size: 0.76rem;
      line-height: 1.55;
    }

    .move-taxonomy-moves {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }

    .move-taxonomy-move {
      --taxonomy-tone: var(--grey);
      appearance: none;
      background: var(--surface);
      border: 1px solid color-mix(in srgb, var(--taxonomy-tone) 45%, var(--rule));
      border-left: 3px solid var(--taxonomy-tone);
      border-radius: 4px;
      color: var(--ink-soft);
      cursor: pointer;
      font-family: var(--sans);
      font-size: 0.76rem;
      line-height: 1.25;
      padding: 5px 7px;
      text-align: left;
      transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
    }

    .move-taxonomy-move::after {
      color: var(--muted);
      content: attr(data-frequency);
      font-family: var(--mono);
      font-size: 0.68rem;
      font-variant-numeric: tabular-nums;
      margin-left: 6px;
      white-space: nowrap;
    }

    .move-taxonomy-move[data-tone="correct"] { --taxonomy-tone: var(--move-correct); }
    .move-taxonomy-move[data-tone="incorrect"] { --taxonomy-tone: var(--move-incorrect); }
    .move-taxonomy-move[data-tone="help"] { --taxonomy-tone: var(--move-blue); }
    .move-taxonomy-move[data-tone="explain"] { --taxonomy-tone: var(--move-violet); }
    .move-taxonomy-move[data-tone="meta"] { --taxonomy-tone: var(--grey); }

    .move-taxonomy-move:hover,
    .move-taxonomy-move:focus-visible {
      background: color-mix(in srgb, var(--taxonomy-tone) 10%, var(--surface));
      border-color: var(--taxonomy-tone);
      color: var(--ink);
      transform: translateY(-1px);
    }

    .move-taxonomy-move:focus-visible {
      outline: 2px solid var(--taxonomy-tone);
      outline-offset: 2px;
    }

    .move-taxonomy-move[aria-pressed="true"] {
      background: color-mix(in srgb, var(--taxonomy-tone) 16%, var(--surface));
      border-color: var(--taxonomy-tone);
      box-shadow: inset 0 0 0 1px var(--taxonomy-tone);
      color: var(--ink);
      font-weight: 650;
    }

    .move-taxonomy-move[aria-pressed="true"]::after {
      color: var(--ink);
    }

    .move-taxonomy-table__row--head {
      background: color-mix(in srgb, var(--teal-soft) 34%, var(--paper));
      padding-bottom: 7px;
      padding-top: 7px;
    }

    .move-taxonomy-table__row--head > span:first-child,
    .move-taxonomy-table__row--head > span:last-child {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.59rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .move-taxonomy-note {
      color: var(--muted);
      font-size: 0.74rem;
      margin: 0;
    }

    .move-taxonomy-example {
      background: var(--surface);
      border: 1px solid var(--rule-dark);
      margin: 10px 0 20px;
      padding: 10px 12px 11px;
    }

    .move-taxonomy-example__head {
      align-items: center;
      border-bottom: 1px solid var(--rule);
      color: var(--muted);
      display: flex;
      font-family: var(--sans);
      font-size: 13px;
      justify-content: space-between;
      gap: 16px;
      padding-bottom: 7px;
    }

    .move-taxonomy-example__head strong {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 15px;
    }

    .move-taxonomy-example__next {
      appearance: none;
      background: color-mix(in srgb, var(--teal-soft) 62%, var(--surface));
      border: 1px solid color-mix(in srgb, var(--teal) 42%, var(--rule));
      border-radius: 4px;
      color: var(--teal-dark);
      cursor: pointer;
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.04em;
      padding: 7px 10px;
      text-transform: uppercase;
      transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
    }

    .move-taxonomy-example__next:hover,
    .move-taxonomy-example__next:focus-visible {
      background: var(--teal-soft);
      border-color: var(--teal);
      transform: translateX(2px);
    }

    .move-taxonomy-example__next:disabled {
      cursor: default;
      opacity: 0.35;
      transform: none;
    }

    .move-taxonomy-example__turns {
      align-items: start;
      display: grid;
      gap: 12px;
      grid-template-columns: minmax(220px, 0.82fr) minmax(300px, 1.18fr);
      padding-top: 8px;
    }

    .move-taxonomy-example__transcript {
      display: grid;
      gap: 7px;
      min-width: 0;
    }

    .move-taxonomy-example__context {
      display: grid;
      gap: 6px;
      max-height: 112px;
      overflow-y: auto;
      padding-right: 8px;
      scrollbar-color: var(--rule-dark) transparent;
      scrollbar-width: thin;
    }

    .move-taxonomy-example__turn {
      display: grid;
      gap: 8px;
      grid-template-columns: minmax(104px, 24%) minmax(0, 1fr);
    }

    .move-taxonomy-example__problem {
      display: grid;
      gap: 5px;
      min-width: 0;
      padding: 1px 14px 1px 0;
      position: relative;
    }

    .move-taxonomy-example__problem::after {
      background: var(--rule);
      bottom: 0;
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      width: 1px;
    }

    .move-taxonomy-example__problem-label {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    #move-taxonomy-example .move-taxonomy-example__problem-text {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 14px;
      line-height: 1.35;
      margin: 0;
      max-height: 152px;
      overflow-y: auto;
      padding-right: 6px;
      scrollbar-color: var(--rule-dark) transparent;
      scrollbar-width: thin;
      white-space: pre-wrap;
    }

    .move-taxonomy-example__speaker {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      hyphens: auto;
      min-width: 0;
      overflow-wrap: anywhere;
      padding-right: 3px;
      padding-top: 2px;
      text-transform: uppercase;
    }

    #move-taxonomy-example .move-taxonomy-example__text {
      color: var(--ink-soft);
      font-family: var(--sans);
      font-size: 13px;
      line-height: 1.36;
      margin: 0;
      white-space: pre-wrap;
    }

    .move-taxonomy-example__turn--target {
      background: var(--teal-soft);
      border-left: 3px solid var(--teal);
      margin-top: 1px;
      padding: 8px 9px;
    }

    .move-taxonomy-example__turn--target .move-taxonomy-example__speaker,
    #move-taxonomy-example .move-taxonomy-example__turn--target .move-taxonomy-example__text {
      color: var(--ink);
    }

    #move-taxonomy-example .move-taxonomy-example__turn--target .move-taxonomy-example__text {
      max-height: 66px;
      overflow-y: auto;
      padding-right: 5px;
      scrollbar-color: var(--rule-dark) transparent;
      scrollbar-width: thin;
    }

    .agreement-results {
      border-top: 1px solid var(--rule-dark);
      margin-top: 22px;
    }

    .agreement-results__row {
      align-items: baseline;
      border-bottom: 1px solid var(--rule);
      display: grid;
      gap: 20px;
      grid-template-columns: minmax(0, 1fr) auto;
      padding: 9px 2px;
    }

    .agreement-results--lenses .agreement-results__row {
      grid-template-columns: minmax(0, 1fr) repeat(2, 5.5rem);
    }

    .agreement-results--lenses .agreement-results__row--head span:not(:first-child) {
      text-align: right;
    }

    .agreement-results__row--head {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.64rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .agreement-results__dataset {
      color: var(--ink);
      font-family: var(--sans);
      font-size: 0.82rem;
    }

    .agreement-results__value {
      color: var(--ink);
      font-family: var(--mono);
      font-size: 0.78rem;
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      text-align: right;
    }

    .results-intro {
      border-left: 3px solid var(--teal);
      margin: 30px 0 62px;
      padding: 5px 0 5px 25px;
    }

    .results-intro p {
      color: var(--muted);
      font-family: var(--sans);
      font-size: 0.82rem;
      line-height: 1.6;
      margin: 0;
    }

    .result-chapter {
      border-top: 1px solid var(--ink);
      margin-top: 72px;
      padding-top: 20px;
    }

    .result-kicker {
      color: var(--teal);
      font-family: var(--mono);
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .result-mode-title {
      align-items: center;
      display: flex;
      font-family: var(--serif);
      font-size: 1.55rem;
      font-weight: 400;
      gap: 14px;
      margin: 44px 0 18px;
    }

    .result-mode-title::after {
      border-top: 1px solid var(--rule-dark);
      content: "";
      flex: 1;
    }

    .result-chapter h2 {
      font-size: clamp(1.9rem, 3.6vw, 2.8rem);
      margin: 18px 0 24px;
      max-width: 840px;
    }

    .figure-placeholder {
      background:
        linear-gradient(90deg, transparent 49.8%, var(--rule) 50%, transparent 50.2%),
        linear-gradient(transparent 49.8%, var(--rule) 50%, transparent 50.2%),
        var(--surface);
      background-size: 38px 38px;
      border: 1px solid var(--rule-dark);
      margin: 34px 0 18px;
      min-height: 330px;
      padding: 26px;
      position: relative;
    }

    .figure-placeholder__label {
      background: var(--paper);
      border: 1px solid var(--rule);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.57rem;
      left: 50%;
      letter-spacing: 0.07em;
      padding: 10px 14px;
      position: absolute;
      text-align: center;
      text-transform: uppercase;
      top: 50%;
      transform: translate(-50%, -50%);
      white-space: nowrap;
    }

    .figure-placeholder__corner {
      color: var(--teal);
      font-family: var(--mono);
      font-size: 0.54rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .figure-caption {
      color: var(--muted);
      font-size: 0.68rem;
      line-height: 1.5;
      margin-bottom: 34px;
    }

    .result-figure {
      background: var(--surface);
      border: 1px solid var(--rule-dark);
      margin-bottom: 58px;
      margin-top: 38px;
      padding: 28px;
      position: relative;
    }

    .editorial-todo {
      background: #fff0ed;
      border-left: 3px solid #b7352b;
      color: #9f241d;
      font-family: var(--mono);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.035em;
      margin: 26px 0 -18px;
      padding: 10px 12px;
      text-transform: uppercase;
    }

    .result-figure .figure-head {
      margin-bottom: 18px;
    }

    .figure-tabs {
      border-bottom: 1px solid var(--rule-dark);
      display: flex;
      margin: 0 0 24px;
      overflow-x: auto;
      scrollbar-width: thin;
    }

    .figure-tab {
      background: transparent;
      border: 0;
      border-bottom: 3px solid transparent;
      color: var(--muted);
      cursor: pointer;
      flex: 0 0 auto;
      font-family: var(--mono);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.035em;
      margin-bottom: -1px;
      padding: 12px 16px 11px;
      text-transform: uppercase;
    }

    .figure-tab:hover {
      background: var(--paper);
      color: var(--ink);
    }

    .figure-tab[aria-selected="true"] {
      background: var(--paper);
      border-bottom-color: var(--teal);
      color: var(--ink);
    }

    .figure-tab:focus-visible {
      outline: 2px solid var(--teal);
      outline-offset: -3px;
    }

    .distance-chart {
      overflow-x: auto;
      padding-bottom: 4px;
    }

    .distance-facets {
      display: grid;
      gap: 36px 38px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      min-width: 820px;
    }

    .distance-facet {
      min-width: 0;
    }

    .distance-facet__head {
      align-items: baseline;
      border-bottom: 1px solid var(--rule-dark);
      display: flex;
      gap: 12px;
      justify-content: space-between;
      margin-bottom: 8px;
      min-height: 34px;
      padding-bottom: 8px;
    }

    .distance-facet__title {
      font-family: var(--serif);
      font-size: 1.03rem;
      line-height: 1.15;
    }

    .distance-facet__meta {
      color: var(--muted);
      flex: 0 0 auto;
      font-family: var(--mono);
      font-size: 0.58rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .distance-facet__row,
    .distance-facet__axis {
      align-items: center;
      display: grid;
      gap: 8px;
      grid-template-columns: 178px minmax(0, 1fr) 40px;
    }

    .distance-facet__row {
      min-height: 29px;
      transition: background-color 120ms ease;
    }

    .distance-facet__row:hover {
      background: var(--paper);
    }

    .distance-facet__model {
      font-family: var(--sans);
      font-size: 0.67rem;
      line-height: 1.15;
      padding-left: 3px;
    }

    .distance-facet__track {
      background:
        linear-gradient(90deg, transparent 49.7%, var(--rule) 50%, transparent 50.3%),
        var(--paper);
      height: 17px;
      position: relative;
    }

    .distance-facet__bar {
      background: var(--blue);
      height: 9px;
      left: 0;
      opacity: 0.78;
      position: absolute;
      top: 4px;
      width: var(--bar-width);
    }

    .distance-facet__row--best .distance-facet__bar {
      background: var(--teal);
      opacity: 1;
    }

    .distance-facet__row--best .distance-facet__model,
    .distance-facet__row--best .distance-facet__value {
      color: var(--teal-dark);
      font-weight: 700;
    }

    .distance-facet__value {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.64rem;
      font-variant-numeric: tabular-nums;
      text-align: right;
    }

    .distance-facet__axis {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.57rem;
      margin-top: 5px;
    }

    .distance-facet__ticks {
      display: flex;
      justify-content: space-between;
    }

    .result-figure-note {
      color: var(--muted);
      font-family: var(--sans);
      font-size: 0.78rem;
      line-height: 1.5;
      margin: 14px 0 0;
    }

    .distribution-matching-figure {
      --dm-accent: var(--model-ours);
    }

    .dm-axis-title,
    .dm-y-axis,
    .dm-bar-column,
    .dm-selected-score,
    .dm-selected-meta,
    .dm-legend {
      font-family: var(--mono);
    }

    .dm-axis-title {
      color: var(--muted);
      display: flex;
      font-size: 0.61rem;
      justify-content: space-between;
      letter-spacing: 0.045em;
      margin: 0 0 9px 36px;
      text-transform: uppercase;
    }

    .dm-chart {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
    }

    .dm-y-axis {
      color: var(--muted);
      font-size: 0.57rem;
      height: 220px;
      position: relative;
    }

    .dm-y-axis span {
      position: absolute;
      right: 7px;
      transform: translateY(-50%);
    }

    .dm-bars-frame {
      min-width: 0;
      position: relative;
    }

    .dm-grid-field {
      border-bottom: 1px solid var(--rule-dark);
      border-left: 1px solid var(--rule-dark);
      height: 220px;
      inset: 0 0 auto;
      pointer-events: none;
      position: absolute;
    }

    .dm-grid-field i {
      border-top: 1px solid var(--rule);
      left: 0;
      position: absolute;
      right: 0;
    }

    .dm-grid-field i:nth-child(1) { top: 0; }
    .dm-grid-field i:nth-child(2) { top: 25%; }
    .dm-grid-field i:nth-child(3) { top: 50%; }
    .dm-grid-field i:nth-child(4) { top: 75%; }

    .dm-bars {
      display: grid;
      gap: clamp(2px, 1vw, 12px);
      grid-template-columns: repeat(8, minmax(0, 1fr));
      position: relative;
    }

    .dm-bar-button {
      appearance: none;
      background: transparent;
      border: 0;
      border-bottom: 3px solid transparent;
      color: inherit;
      cursor: pointer;
      min-width: 0;
      padding: 0 3px 8px;
    }

    .dm-bar-button:hover {
      background: color-mix(in srgb, var(--dm-accent) 7%, transparent);
    }

    .dm-bar-button[aria-pressed="true"] {
      background: color-mix(in srgb, var(--dm-accent) 12%, transparent);
      border-bottom-color: var(--dm-accent);
    }

    .dm-bar-button:focus-visible {
      outline: 2px solid var(--teal);
      outline-offset: -2px;
    }

    .dm-bar-column {
      display: grid;
      font-size: 0.58rem;
      gap: 6px;
      grid-template-rows: 220px 16px 32px;
      line-height: 1.15;
      min-width: 0;
      text-align: center;
    }

    .dm-bar-well {
      align-items: end;
      display: flex;
      justify-content: center;
      min-width: 0;
    }

    .dm-bar-well i {
      display: block;
      max-width: 38px;
      min-width: 10px;
      transition: filter 140ms ease, opacity 140ms ease;
      width: 58%;
    }

    .dm-bar-button:hover .dm-bar-well i,
    .dm-bar-button[aria-pressed="true"] .dm-bar-well i {
      filter: saturate(1.08);
    }

    .dm-bar-column strong {
      font-size: 0.64rem;
      font-variant-numeric: tabular-nums;
    }

    .dm-selected {
      border-top: 1px solid var(--rule-dark);
      margin-top: 28px;
      padding-top: 18px;
    }

    .dm-selected-head {
      align-items: baseline;
      display: flex;
      flex-wrap: wrap;
      gap: 8px 18px;
      justify-content: space-between;
    }

    .dm-selected-name {
      font-family: var(--serif);
      font-size: 1.05rem;
    }

    .dm-selected-score {
      font-size: 0.68rem;
      font-variant-numeric: tabular-nums;
      font-weight: 700;
    }

    .dm-selected-meta {
      color: var(--muted);
      font-size: 0.58rem;
      letter-spacing: 0.05em;
      margin: 5px 0 8px;
      text-transform: uppercase;
    }

    .dm-plot-wrap {
      background:
        linear-gradient(var(--rule) 1px, transparent 1px),
        linear-gradient(90deg, var(--rule) 1px, transparent 1px);
      background-size: 25% 25%;
      border: 1px solid var(--rule-dark);
      height: 300px;
      position: relative;
    }

    #dm-embedding-canvas {
      display: block;
      height: 100%;
      width: 100%;
    }

    #dm-embedding-canvas[hidden],
    .dm-empty[hidden] {
      display: none;
    }

    .dm-empty {
      background: color-mix(in srgb, var(--surface) 92%, transparent);
      border: 1px solid var(--rule);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.68rem;
      left: 50%;
      margin: 0;
      padding: 11px 14px;
      position: absolute;
      text-align: center;
      text-transform: uppercase;
      top: 50%;
      transform: translate(-50%, -50%);
      width: min(310px, calc(100% - 28px));
    }

    .dm-legend {
      border-top: 1px solid var(--rule);
      color: var(--muted);
      display: flex;
      font-size: 0.58rem;
      gap: 18px;
      margin-top: 10px;
      padding-top: 9px;
      text-transform: uppercase;
    }

    .dm-legend span {
      align-items: center;
      display: inline-flex;
      gap: 6px;
    }

    .dm-legend b { color: var(--ink); }

    .dm-dot {
      background: var(--dm-accent);
      border-radius: 50%;
      display: inline-block;
      height: 8px;
      width: 8px;
    }

    .dm-dot--human {
      background: var(--muted);
      opacity: 0.55;
    }

    .combined-scroll {
      overflow-x: auto;
      padding: 2px 0 8px;
    }

    #move-distance-figure,
    #move-shares-figure,
    #next-turn-output-figure,
    #multiturn-sankey-figure {
      left: calc(50% - 127px);
      margin-left: 0;
      position: relative;
      transform: translateX(-50%);
      width: min(1380px, calc(100vw - 32px));
    }

    .move-figure-layout {
      align-items: start;
      display: grid;
      gap: 22px;
      grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    }

    .move-figure-chart {
      min-width: 0;
    }

    .move-distance-key {
      align-items: center;
      color: var(--muted);
      display: flex;
      flex-wrap: wrap;
      font-family: var(--mono);
      font-size: 0.66rem;
      gap: 10px 18px;
      letter-spacing: 0.035em;
      margin: -8px 0 18px;
      text-transform: uppercase;
    }

    .move-distance-key span {
      align-items: center;
      display: inline-flex;
      gap: 7px;
    }

    .move-distance-key i {
      background: var(--model-posttrained);
      display: inline-block;
      height: 9px;
      width: 18px;
    }

    .move-distance-key i[data-family="ours"] {
      background: var(--model-ours);
    }

    .move-distance-scroll {
      overflow-x: auto;
      padding: 2px 0 8px;
    }

    .move-distance-bars {
      min-width: 680px;
    }

    .move-distance-row,
    .move-distance-axis {
      align-items: center;
      display: grid;
      gap: 12px;
      grid-template-columns: 210px minmax(280px, 1fr) 54px;
    }

    .move-distance-row {
      min-height: 42px;
      transition: background-color 120ms ease, opacity 120ms ease;
    }

    .move-distance-row:hover,
    .move-distance-row:focus-within {
      background: var(--paper);
    }

    .move-distance-model {
      font-family: var(--sans);
      font-size: 0.82rem;
      line-height: 1.2;
      padding-left: 5px;
    }

    .move-distance-track {
      background:
        linear-gradient(90deg, transparent 49.8%, var(--rule) 50%, transparent 50.2%),
        var(--paper);
      cursor: default;
      height: 22px;
      position: relative;
    }

    .move-distance-bar {
      background: var(--model-posttrained);
      height: 12px;
      left: 0;
      opacity: 0.82;
      position: absolute;
      top: 5px;
      transition: width 180ms ease;
    }

    .move-distance-row[data-family="ours"] .move-distance-bar {
      background: var(--model-ours);
      opacity: 0.92;
    }

    .move-distance-value {
      color: var(--ink);
      font-family: var(--mono);
      font-size: 0.74rem;
      font-variant-numeric: tabular-nums;
      text-align: right;
    }

    .move-distance-axis {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.62rem;
      margin-top: 5px;
    }

    .move-distance-ticks {
      display: flex;
      justify-content: space-between;
    }

    #move-distance-figure {
      margin-bottom: 46px;
      margin-top: 30px;
      padding: 20px 22px 17px;
      width: min(900px, calc(100vw - 32px));
    }

    #move-distance-figure .figure-head {
      margin-bottom: 12px;
    }

    #move-distance-figure .figure-tabs {
      margin-bottom: 16px;
    }

    #move-distance-figure .figure-tab {
      font-size: 0.66rem;
      padding: 9px 13px 8px;
    }

    #move-distance-figure .move-figure-layout {
      gap: 16px;
      grid-template-columns: minmax(380px, 420px) minmax(0, 1fr);
    }

    #move-distance-figure .move-distance-key {
      font-size: 0.6rem;
      gap: 8px 15px;
      margin: -3px 0 10px;
    }

    #move-distance-figure .move-distance-key i {
      height: 8px;
      width: 16px;
    }

    #move-distance-figure .move-distance-view-controls {
      border-bottom: 1px solid var(--rule);
      display: grid;
      gap: 9px;
      margin: -3px 0 13px;
      padding-bottom: 12px;
    }

    #multiturn-sankey-figure .move-distance-view-controls {
      border-bottom: 1px solid var(--rule);
      display: grid;
      gap: 9px;
      margin: -3px 0 13px;
      padding-bottom: 12px;
    }

    #multiturn-sankey-figure .move-distance-view-toggle {
      display: inline-flex;
      justify-self: start;
    }

    #multiturn-sankey-figure .move-distance-view-button {
      background: transparent;
      border: 1px solid var(--rule-dark);
      color: var(--muted);
      cursor: pointer;
      font-family: var(--mono);
      font-size: 0.72rem;
      letter-spacing: 0.035em;
      padding: 7px 10px 6px;
      text-transform: uppercase;
    }

    #multiturn-sankey-figure .move-distance-view-button + .move-distance-view-button {
      border-left: 0;
    }

    #multiturn-sankey-figure .move-distance-view-button[aria-pressed="true"] {
      background: var(--ink);
      color: var(--paper);
    }

    #multiturn-sankey-figure .move-distance-turn-control {
      display: grid;
      gap: 5px 10px;
      grid-template-columns: minmax(0, 1fr) auto;
    }

    #multiturn-sankey-figure .move-distance-turn-slider {
      accent-color: var(--teal);
      cursor: pointer;
      grid-column: 1 / -1;
      margin: 0;
      width: 100%;
    }

    #multiturn-sankey-figure .move-distance-turn-value {
      color: var(--ink);
      font-family: var(--mono);
      font-size: 0.76rem;
      font-variant-numeric: tabular-nums;
    }

    #multiturn-sankey-figure .move-distance-turn-sample {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.62rem;
      font-variant-numeric: tabular-nums;
      text-align: right;
    }

    #multiturn-sankey-figure .move-distance-turn-scale {
      color: var(--muted);
      display: flex;
      font-family: var(--mono);
      font-size: 0.58rem;
      grid-column: 1 / -1;
      justify-content: space-between;
      letter-spacing: 0.025em;
      text-transform: uppercase;
    }

    #move-distance-figure .move-distance-view-toggle {
      display: inline-flex;
      justify-self: start;
    }

    #move-distance-figure .move-distance-view-button {
      background: transparent;
      border: 1px solid var(--rule-dark);
      color: var(--muted);
      cursor: pointer;
      font-family: var(--mono);
      font-size: 0.72rem;
      letter-spacing: 0.035em;
      padding: 7px 10px 6px;
      text-transform: uppercase;
    }

    #move-distance-figure .move-distance-view-button + .move-distance-view-button {
      border-left: 0;
    }

    #move-distance-figure .move-distance-view-button[aria-pressed="true"] {
      background: var(--ink);
      color: var(--paper);
    }

    #move-distance-figure .move-distance-view-button:disabled {
      cursor: default;
      opacity: 0.42;
    }

    #move-distance-figure .move-distance-turn-control {
      display: grid;
      gap: 5px 10px;
      grid-template-columns: minmax(0, 1fr) auto;
    }

    #move-distance-figure .move-distance-turn-slider {
      accent-color: var(--teal);
      cursor: pointer;
      grid-column: 1 / -1;
      margin: 0;
      width: 100%;
    }

    #move-distance-figure .move-distance-turn-value {
      color: var(--ink);
      font-family: var(--mono);
      font-size: 0.76rem;
      font-variant-numeric: tabular-nums;
    }

    #move-distance-figure .move-distance-turn-sample {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.62rem;
      font-variant-numeric: tabular-nums;
      text-align: right;
    }

    #move-distance-figure .move-distance-turn-scale {
      color: var(--muted);
      display: flex;
      font-family: var(--mono);
      font-size: 0.58rem;
      grid-column: 1 / -1;
      justify-content: space-between;
      letter-spacing: 0.025em;
      text-transform: uppercase;
    }

    #move-distance-figure .move-distance-turn-unavailable {
      color: var(--muted);
      font-family: var(--sans);
      font-size: 0.72rem;
      line-height: 1.4;
      margin: 0;
    }

    #move-distance-figure .move-distance-scroll {
      padding-bottom: 4px;
    }

    #move-distance-figure .move-distance-bars {
      min-width: 0;
    }

    #move-distance-figure .move-distance-row,
    #move-distance-figure .move-distance-axis {
      gap: 8px;
      grid-template-columns: 145px minmax(120px, 1fr) 42px;
    }

    #move-distance-figure .move-distance-row {
      background: transparent;
      border: 0;
      color: inherit;
      cursor: pointer;
      font: inherit;
      min-height: 29px;
      padding: 0;
      text-align: left;
      width: 100%;
    }

    #move-distance-figure .move-distance-row[aria-pressed="true"] {
      background: var(--paper);
      box-shadow: inset 3px 0 var(--teal);
    }

    #move-distance-figure .move-distance-row[aria-pressed="false"] {
      opacity: 0.72;
    }

    #move-distance-figure .move-distance-row[aria-pressed="false"]:hover,
    #move-distance-figure .move-distance-row[aria-pressed="false"]:focus-visible {
      opacity: 1;
    }

    #move-distance-figure .move-distance-model {
      font-size: 0.76rem;
    }

    #move-distance-figure .move-distance-track {
      cursor: pointer;
      height: 15px;
    }

    #move-distance-figure .move-distance-bar {
      height: 8px;
      top: 3px;
    }

    #move-distance-figure .move-distance-value {
      font-size: 0.69rem;
    }

    #move-distance-figure .move-distance-axis {
      font-size: 0.58rem;
      margin-top: 3px;
    }

    #move-distance-figure .move-distance-sidebar {
      border-left: 1px solid var(--rule-dark);
      min-width: 0;
      padding-left: 16px;
    }

    #move-distance-figure .move-distance-sidebar .result-figure-note {
      font-size: 0.8rem;
      line-height: 1.5;
      margin: 0;
    }

    #move-distance-figure .figure-takeaway {
      font-size: 0.82rem;
      line-height: 1.45;
      margin-bottom: 12px;
      padding: 10px 12px 11px;
    }

    #multiturn-sankey-figure {
      margin-bottom: 46px;
      margin-top: 30px;
      padding: 20px 22px 17px;
      width: min(900px, calc(100vw - 32px));
    }

    #multiturn-sankey-figure .figure-head {
      margin-bottom: 12px;
    }

    #multiturn-sankey-figure .figure-tabs {
      margin-bottom: 16px;
    }

    #multiturn-sankey-figure .figure-tab {
      font-size: 0.66rem;
      padding: 9px 13px 8px;
    }

    #multiturn-sankey-figure .move-figure-layout {
      gap: 16px;
      grid-template-columns: minmax(380px, 420px) minmax(0, 1fr);
    }

    #multiturn-sankey-figure .move-distance-key {
      font-size: 0.6rem;
      gap: 8px 15px;
      margin: -3px 0 10px;
    }

    #multiturn-sankey-figure .move-distance-key i {
      height: 8px;
      width: 16px;
    }

    #multiturn-sankey-figure .move-distance-scroll {
      padding-bottom: 4px;
    }

    #multiturn-sankey-figure .move-distance-bars {
      min-width: 0;
    }

    #multiturn-sankey-figure .move-distance-row,
    #multiturn-sankey-figure .move-distance-axis {
      gap: 8px;
      grid-template-columns: 145px minmax(120px, 1fr) 42px;
    }

    #multiturn-sankey-figure .move-distance-row {
      background: transparent;
      border: 0;
      color: inherit;
      cursor: pointer;
      font: inherit;
      min-height: 29px;
      padding: 0;
      text-align: left;
      width: 100%;
    }

    #multiturn-sankey-figure .move-distance-row[aria-pressed="true"] {
      background: var(--paper);
      box-shadow: inset 3px 0 var(--teal);
    }

    #multiturn-sankey-figure .move-distance-row[aria-pressed="false"] {
      opacity: 0.72;
    }

    #multiturn-sankey-figure .move-distance-model {
      font-size: 0.76rem;
    }

    #multiturn-sankey-figure .move-distance-track {
      cursor: pointer;
      height: 15px;
    }

    #multiturn-sankey-figure .move-distance-bar {
      height: 8px;
      top: 3px;
    }

    #multiturn-sankey-figure .move-distance-value {
      font-size: 0.69rem;
    }

    #multiturn-sankey-figure .move-distance-axis {
      font-size: 0.58rem;
      margin-top: 3px;
    }

    #multiturn-sankey-figure .move-distance-sidebar {
      border-left: 1px solid var(--rule-dark);
      min-width: 0;
      padding-left: 16px;
    }

    #multiturn-sankey-figure .move-distance-sidebar .result-figure-note {
      font-size: 0.8rem;
      line-height: 1.5;
      margin: 0;
    }

    #multiturn-sankey-figure .figure-takeaway {
      font-size: 0.82rem;
      line-height: 1.45;
      margin-bottom: 12px;
      padding: 10px 12px 11px;
    }

    .multiturn-flow-section {
      border-top: 1px solid var(--rule-dark);
      margin-top: 18px;
      padding-top: 16px;
    }

    .multiturn-flow-section__head {
      align-items: baseline;
      display: flex;
      flex-wrap: wrap;
      gap: 6px 14px;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .multiturn-flow-section__title {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 0.92rem;
      font-weight: 700;
    }

    .multiturn-flow-section__instruction {
      color: var(--muted);
      font-size: 0.68rem;
    }

    .multiturn-flow-layout {
      display: grid;
      gap: 16px;
      grid-template-columns: minmax(0, 1fr) minmax(220px, 250px);
    }

    .multiturn-flow-section .sankey-svg {
      height: auto;
    }

    .move-sankey-comparison {
      border-top: 1px solid var(--rule-dark);
      margin-top: 18px;
      padding-top: 16px;
    }

    .move-sankey-comparison__head {
      align-items: baseline;
      display: flex;
      flex-wrap: wrap;
      gap: 6px 14px;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .move-sankey-comparison__title {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 0.92rem;
      font-weight: 700;
    }

    .move-sankey-comparison__instruction {
      color: var(--muted);
      font-size: 0.68rem;
    }

    .move-sankey-comparison__grid {
      display: grid;
      gap: 16px;
      grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    }

    .move-sankey-comparison .distance-flow__panel {
      min-width: 0;
    }

    .move-sankey-comparison .distance-flow__panel + .distance-flow__panel {
      border-top: 0;
      margin-top: 0;
      padding-top: 0;
    }

    .move-sankey-comparison .distance-flow__svg {
      height: auto;
    }

    .move-sankey-comparison__empty {
      color: var(--muted);
      font-size: 0.76rem;
      line-height: 1.45;
      margin: 0;
    }

    .next-turn-comparison {
      border-top: 1px solid var(--rule-dark);
      margin-top: 14px;
      padding-top: 12px;
    }

    #next-turn-output-figure {
      padding: 22px 24px 24px;
      width: min(1120px, calc(100vw - 32px));
    }

    #next-turn-output-figure .figure-head {
      margin-bottom: 12px;
    }

    #next-turn-output-figure .figure-tabs {
      margin-bottom: 16px;
    }

    #next-turn-output-figure .next-turn-comparison {
      border-top: 0;
      margin-top: 0;
      padding-top: 0;
    }

    #next-turn-output-figure .next-turn-comparison__title {
      font-size: 1.1rem;
    }

    #next-turn-output-figure .next-turn-comparison__instruction {
      font-size: 0.82rem;
    }

    #next-turn-output-figure .next-turn-history-button > span:first-child {
      font-size: 0.86rem;
    }

    #next-turn-output-figure .next-turn-history-button > span:last-child {
      font-size: 0.72rem;
    }

    #next-turn-output-figure .next-turn-context__label,
    #next-turn-output-figure .next-turn-branch__label {
      font-size: 0.76rem;
    }

    #next-turn-output-figure .next-turn-context__role {
      font-size: 0.7rem;
    }

    .article #next-turn-output-figure .next-turn-context__bubble {
      font-size: 0.88rem;
      line-height: 1.52;
      padding: 9px 12px 10px;
    }

    #next-turn-output-figure .next-turn-model-picker__label strong {
      font-size: 0.84rem;
    }

    #next-turn-output-figure .next-turn-model-picker__label span {
      font-size: 0.74rem;
    }

    #next-turn-output-figure .next-turn-model-button {
      font-size: 0.75rem;
      padding: 9px 12px;
    }

    #next-turn-output-figure .next-turn-card {
      min-height: 160px;
      padding: 13px 14px 14px;
    }

    #next-turn-output-figure .next-turn-card__label {
      font-size: 0.7rem;
    }

    #next-turn-output-figure .next-turn-card__name {
      font-size: 0.88rem;
    }

    #next-turn-output-figure .next-turn-card__move {
      font-size: 0.76rem;
    }

    .article #next-turn-output-figure .next-turn-card__text {
      font-size: 0.88rem;
      line-height: 1.52;
      max-height: 190px;
    }

    .next-turn-comparison__head {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      gap: 10px 18px;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .next-turn-comparison__title {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 0.82rem;
      font-weight: 700;
    }

    .next-turn-comparison__instruction {
      color: var(--muted);
      display: block;
      font-size: 0.6rem;
      margin-top: 2px;
    }

    .next-turn-comparison__controls {
      align-items: center;
      display: flex;
      gap: 8px;
    }

    .next-turn-comparison__button {
      background: var(--paper);
      border: 1px solid var(--rule-dark);
      border-radius: 999px;
      color: var(--ink);
      cursor: pointer;
      font: 650 0.61rem/1 var(--sans);
      min-height: 30px;
      padding: 7px 11px;
    }

    .next-turn-comparison__button:hover,
    .next-turn-comparison__button:focus-visible {
      background: var(--paper-warm);
      border-color: var(--ink);
      outline: none;
    }

    .next-turn-comparison__count {
      color: var(--muted);
      font: 600 0.58rem/1 var(--mono);
      min-width: 76px;
      text-align: center;
    }

    .next-turn-history-picker {
      display: grid;
      gap: 6px;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      margin-bottom: 18px;
    }

    .next-turn-index-explorer {
      align-items: stretch;
      display: grid;
      gap: 18px;
      grid-template-columns: 108px minmax(0, 1fr);
    }

    .next-turn-index-rail {
      align-items: center;
      border-right: 1px solid var(--rule);
      display: flex;
      flex-direction: column;
      padding: 4px 17px 8px 0;
    }

    .next-turn-index-rail__label {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 0.84rem;
      text-align: center;
    }

    .next-turn-index-rail__hint {
      color: var(--muted);
      font-size: 0.65rem;
      margin: 2px 0 12px;
      text-align: center;
    }

    .next-turn-index-control {
      align-items: stretch;
      display: grid;
      gap: 8px;
      grid-template-columns: 30px 42px;
      height: 236px;
      justify-content: center;
      width: 100%;
    }

    .next-turn-index-slider {
      appearance: none;
      -webkit-appearance: none;
      background: transparent;
      cursor: pointer;
      direction: ltr;
      height: 100%;
      margin: 0;
      width: 30px;
      writing-mode: vertical-lr;
    }

    .next-turn-index-slider::-webkit-slider-runnable-track {
      background: var(--rule-dark);
      border-radius: 999px;
      transition: background 120ms ease;
      width: 3px;
    }

    .next-turn-index-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      background: var(--paper);
      border: 2px solid var(--teal-dark);
      border-radius: 50%;
      height: 17px;
      margin-left: -7px;
      transition:
        background 120ms ease,
        border-color 120ms ease,
        box-shadow 120ms ease,
        transform 120ms ease;
      width: 17px;
    }

    .next-turn-index-slider::-moz-range-track {
      background: var(--rule-dark);
      border: 0;
      border-radius: 999px;
      transition: background 120ms ease;
      width: 3px;
    }

    .next-turn-index-slider::-moz-range-progress {
      background: var(--rule-dark);
      width: 3px;
    }

    .next-turn-index-slider::-moz-range-thumb {
      background: var(--paper);
      border: 2px solid var(--teal-dark);
      border-radius: 50%;
      height: 13px;
      transition:
        background 120ms ease,
        border-color 120ms ease,
        box-shadow 120ms ease,
        transform 120ms ease;
      width: 13px;
    }

    .next-turn-index-slider:hover::-webkit-slider-runnable-track {
      background: var(--teal);
    }

    .next-turn-index-slider:hover::-webkit-slider-thumb {
      background: var(--teal-soft);
      box-shadow: 0 0 0 3px var(--paper);
      transform: scale(1.12);
    }

    .next-turn-index-slider:hover::-moz-range-track,
    .next-turn-index-slider:hover::-moz-range-progress {
      background: var(--teal);
    }

    .next-turn-index-slider:hover::-moz-range-thumb {
      background: var(--teal-soft);
      box-shadow: 0 0 0 3px var(--paper);
      transform: scale(1.12);
    }

    .next-turn-index-slider:active::-webkit-slider-thumb {
      background: var(--teal);
      border-color: var(--teal-dark);
    }

    .next-turn-index-slider:active::-moz-range-thumb {
      background: var(--teal);
      border-color: var(--teal-dark);
    }

    .next-turn-index-slider:focus-visible {
      outline: none;
    }

    .next-turn-index-slider:focus-visible::-webkit-slider-thumb {
      box-shadow:
        0 0 0 3px var(--paper),
        0 0 0 5px var(--teal-dark);
    }

    .next-turn-index-slider:focus-visible::-moz-range-thumb {
      box-shadow:
        0 0 0 3px var(--paper),
        0 0 0 5px var(--teal-dark);
    }

    .next-turn-index-ticks {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 5px 0;
    }

    .next-turn-index-tick {
      color: var(--muted);
      font: 500 0.68rem/1 var(--mono);
      white-space: nowrap;
    }

    .next-turn-index-tick.is-selected {
      color: var(--teal-dark);
      font-weight: 600;
    }

    .next-turn-index-content {
      min-width: 0;
    }

    .next-turn-history-button {
      background: var(--paper);
      border: 1px solid var(--rule);
      color: var(--ink-soft);
      cursor: pointer;
      display: grid;
      font-family: var(--sans);
      gap: 2px;
      padding: 8px 10px;
      text-align: left;
    }

    .next-turn-history-button > span:first-child {
      font-size: 0.67rem;
      font-weight: 750;
    }

    .next-turn-history-button > span:last-child {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.51rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .next-turn-history-button:hover,
    .next-turn-history-button:focus-visible {
      border-color: var(--ink);
      outline: none;
    }

    .next-turn-history-button[aria-pressed="true"] {
      background: var(--paper-warm);
      border-color: var(--ink);
      box-shadow: inset 0 -3px 0 var(--teal);
      color: var(--ink);
    }

    .next-turn-context {
      margin: 0 auto;
      max-width: 780px;
      padding: 0 6px;
    }

    .next-turn-context__label {
      color: var(--muted);
      display: block;
      font-size: 0.55rem;
      font-weight: 750;
      letter-spacing: 0.08em;
      margin-bottom: 7px;
      text-align: center;
      text-transform: uppercase;
    }

    .next-turn-context__messages {
      display: grid;
      gap: 6px;
      max-height: 460px;
      overflow: auto;
      padding: 1px 6px 5px;
    }

    .next-turn-context__message {
      align-items: flex-start;
      display: flex;
      flex-direction: column;
      gap: 3px;
      margin: 0;
      max-width: 82%;
    }

    .next-turn-context__message--learner {
      justify-self: end;
    }

    .next-turn-context__message--other {
      justify-self: start;
    }

    .article .next-turn-context__bubble {
      background: color-mix(in srgb, var(--paper-warm) 68%, var(--paper));
      border: 1px solid var(--rule);
      border-radius: 3px 12px 12px 12px;
      color: var(--ink-soft);
      font-size: 0.64rem;
      line-height: 1.42;
      margin: 0;
      padding: 6px 9px 7px;
    }

    .next-turn-context__message--learner .next-turn-context__bubble {
      background: color-mix(in srgb, var(--teal-soft) 34%, var(--paper));
      border-radius: 12px 3px 12px 12px;
    }

    .next-turn-context__role {
      color: var(--ink);
      font-size: 0.49rem;
      font-weight: 750;
      letter-spacing: 0.025em;
      padding: 0 3px;
    }

    .next-turn-branch {
      align-items: center;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      margin: 7px 0 9px;
    }

    .next-turn-branch::before,
    .next-turn-branch::after {
      background: var(--rule-dark);
      content: "";
      height: 1px;
    }

    .next-turn-branch__label {
      color: var(--muted);
      font-size: 0.55rem;
      font-weight: 750;
      letter-spacing: 0.07em;
      padding: 0 10px;
      text-transform: uppercase;
    }

    .next-turn-model-picker {
      align-items: start;
      border-bottom: 1px solid var(--rule);
      display: grid;
      gap: 10px 18px;
      grid-template-columns: 155px minmax(0, 1fr);
      margin-bottom: 10px;
      padding-bottom: 10px;
    }

    .next-turn-model-picker__label {
      display: grid;
      gap: 2px;
      padding-top: 5px;
    }

    .next-turn-model-picker__label strong {
      color: var(--ink);
      font-size: 0.64rem;
    }

    .next-turn-model-picker__label span {
      color: var(--muted);
      font-size: 0.52rem;
    }

    .next-turn-model-picker__buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .next-turn-model-button {
      background: var(--paper);
      border: 1px solid var(--rule-dark);
      border-radius: 999px;
      color: var(--muted);
      cursor: pointer;
      font: 650 0.55rem/1.1 var(--sans);
      padding: 7px 10px;
    }

    .next-turn-model-button:hover,
    .next-turn-model-button:focus-visible {
      border-color: var(--ink);
      color: var(--ink);
      outline: none;
    }

    .next-turn-model-button[aria-pressed="true"] {
      background: color-mix(in srgb, var(--model-posttrained) 16%, var(--paper));
      border-color: var(--model-posttrained);
      color: var(--ink);
    }

    .next-turn-model-button[data-family="ours"][aria-pressed="true"] {
      background: color-mix(in srgb, var(--model-ours) 17%, var(--paper));
      border-color: var(--model-ours);
    }

    .next-turn-comparison__grid {
      display: grid;
      gap: 8px;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    }

    .next-turn-card {
      background: var(--paper);
      border: 1px solid var(--rule-dark);
      border-radius: 3px;
      display: flex;
      flex-direction: column;
      min-height: 112px;
      min-width: 0;
      padding: 9px 10px 10px;
    }

    .next-turn-card--human {
      background: color-mix(in srgb, var(--paper-warm) 70%, var(--paper));
      border-top: 3px solid var(--ink);
      padding-top: 8px;
    }

    .next-turn-card--model {
      border-top: 3px solid var(--teal);
      padding-top: 8px;
    }

    .next-turn-card__label {
      color: var(--muted);
      display: block;
      font-size: 0.48rem;
      font-weight: 750;
      letter-spacing: 0.07em;
      margin-bottom: 2px;
      text-transform: uppercase;
    }

    .next-turn-card__name {
      color: var(--ink);
      display: block;
      font-family: var(--serif);
      font-size: 0.62rem;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .next-turn-card__move {
      align-items: center;
      color: var(--muted);
      display: flex;
      font-size: 0.5rem;
      gap: 6px;
      line-height: 1.3;
      margin-bottom: 6px;
    }

    .next-turn-card__move::before {
      background: var(--move-tone, var(--move-other));
      border-radius: 50%;
      content: "";
      flex: 0 0 8px;
      height: 8px;
      width: 8px;
    }

    .next-turn-card__move-label {
      color: var(--ink-soft);
      font-weight: 700;
    }

    .article .next-turn-card__text {
      color: var(--ink-soft);
      font-size: 0.64rem;
      line-height: 1.42;
      margin: 0;
      max-height: 110px;
      overflow: auto;
      padding-right: 4px;
      white-space: pre-wrap;
    }

    #move-shares-figure {
      padding: 24px;
      width: min(1100px, calc(100vw - 32px));
    }

    #move-shares-figure .move-figure-layout {
      gap: 18px;
      grid-template-columns: minmax(0, 1fr) minmax(230px, 250px);
    }

    #move-shares-figure .aligned-move-grid {
      gap: 18px 24px;
    }

    #move-shares-figure .aligned-share-plot {
      --label-width: 145px;
    }

    .move-stage-controls {
      align-items: center;
      display: grid;
      gap: 8px 16px;
      grid-template-columns: minmax(220px, 1fr) auto;
      margin: -7px 0 26px;
    }

    .move-stage-slider {
      accent-color: var(--teal);
      cursor: pointer;
      grid-column: 1;
      margin: 0;
      width: 100%;
    }

    .move-stage-slider:disabled {
      cursor: default;
      opacity: 0.55;
    }

    .move-stage-value {
      background: var(--teal-soft);
      color: var(--ink);
      font-family: var(--mono);
      font-size: 0.68rem;
      letter-spacing: 0.025em;
      min-width: 220px;
      padding: 7px 10px;
      text-align: center;
      text-transform: uppercase;
    }

    .move-stage-scale {
      color: var(--muted);
      display: flex;
      font-family: var(--mono);
      font-size: 0.62rem;
      grid-column: 1;
      justify-content: space-between;
      letter-spacing: 0.025em;
      text-transform: uppercase;
    }

    .move-stage-note {
      color: var(--muted);
      font-family: var(--serif);
      font-size: 0.9rem;
      grid-column: 1 / -1;
      line-height: 1.4;
      margin: 0;
    }

    .aligned-move-grid {
      display: grid;
      gap: 22px 30px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aligned-move-facet {
      border-top: 1px solid var(--rule-dark);
      min-width: 0;
      padding-top: 9px;
    }

    .aligned-move-facet h5 {
      font-family: var(--serif);
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.25;
      margin: 0 0 8px;
    }

    .aligned-share-plot {
      --label-width: 160px;
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .aligned-share-human-row,
    .aligned-share-row,
    .aligned-share-axis-row {
      align-items: center;
      display: grid;
      gap: 10px;
      grid-template-columns: var(--label-width) minmax(120px, 1fr);
      min-width: 0;
    }

    .aligned-share-human-row {
      min-height: 24px;
    }

    .aligned-share-human-track,
    .aligned-share-track,
    .aligned-share-axis-track {
      min-width: 0;
      position: relative;
    }

    .aligned-share-human-track {
      height: 24px;
    }

    .aligned-share-human-label {
      color: var(--ink);
      font-family: var(--mono);
      font-size: 0.66rem;
      left: var(--human-share);
      position: absolute;
      top: 4px;
      transform: translateX(-50%);
      white-space: nowrap;
    }

    .aligned-share-row {
      border: 0;
      color: inherit;
      cursor: default;
      min-height: 27px;
      padding: 0;
      text-align: left;
    }

    .aligned-share-model-label {
      color: var(--muted);
      font-family: var(--sans);
      font-size: 0.72rem;
      line-height: 1.15;
    }

    .aligned-share-track {
      background:
        linear-gradient(90deg, var(--rule) 1px, transparent 1px),
        linear-gradient(90deg, transparent 49.8%, var(--rule) 50%, transparent 50.2%),
        linear-gradient(90deg, transparent calc(100% - 1px), var(--rule) calc(100% - 1px));
      height: 20px;
    }

    .aligned-share-track::before {
      border-left: 1.4px dashed var(--ink);
      bottom: -3px;
      content: "";
      left: var(--human-share);
      position: absolute;
      top: -3px;
    }

    .aligned-share-gap {
      background: var(--model-posttrained);
      height: 2px;
      left: min(var(--human-share), var(--model-share));
      opacity: 0.72;
      position: absolute;
      top: 9px;
      width: max(1px, calc(max(var(--human-share), var(--model-share)) - min(var(--human-share), var(--model-share))));
    }

    .aligned-share-dot {
      background: var(--model-posttrained);
      border: 2px solid var(--surface);
      border-radius: 50%;
      height: 10px;
      left: var(--model-share);
      position: absolute;
      top: 5px;
      transform: translateX(-50%);
      width: 10px;
    }

    .aligned-share-row[data-family="ours"] .aligned-share-gap,
    .aligned-share-row[data-family="ours"] .aligned-share-dot {
      background: var(--model-ours);
    }

    .aligned-share-row[data-family="ours"] .aligned-share-gap {
      height: 3px;
    }

    .aligned-share-row[data-family="ours"] .aligned-share-dot {
      height: 12px;
      top: 4px;
      width: 12px;
    }

    .aligned-share-row {
      transition: opacity 100ms ease;
    }

    .aligned-move-facet.is-comparing .aligned-share-row {
      opacity: 0.28;
    }

    .aligned-move-facet.is-comparing .aligned-share-row.is-active {
      opacity: 1;
    }

    .aligned-share-row:hover .aligned-share-model-label,
    .aligned-share-row:focus .aligned-share-model-label {
      color: var(--ink);
    }

    .aligned-share-axis-row {
      margin-top: 3px;
    }

    .aligned-share-axis-track {
      color: var(--muted);
      display: flex;
      font-family: var(--mono);
      font-size: 0.62rem;
      justify-content: space-between;
    }

    .move-tooltip-rail {
      border-left: 1px solid var(--rule-dark);
      min-height: 340px;
      padding-left: 18px;
      position: relative;
    }

    .move-tooltip-rail__hint {
      color: var(--muted);
      font-family: var(--sans);
      font-size: 0.8rem;
      line-height: 1.5;
      padding-top: 14px;
    }

    .move-tooltip-rail__hint strong {
      color: var(--ink);
      display: block;
      font-family: var(--serif);
      font-size: 1rem;
      margin-bottom: 5px;
    }

    .move-tooltip-rail.has-tooltip .move-tooltip-rail__hint {
      display: none;
    }

    .move-tooltip-rail .chart-tooltip {
      display: none;
      left: auto !important;
      max-width: none !important;
      opacity: 1;
      position: sticky;
      right: auto;
      top: 18px !important;
      transform: none;
      width: 100% !important;
    }

    .move-tooltip-rail .move-tooltip__header,
    .move-tooltip-rail .move-tooltip__row {
      gap: 6px;
      grid-template-columns: minmax(100px, 1fr) 48px 84px 58px;
    }

    .move-tooltip-rail.has-tooltip .chart-tooltip.is-visible {
      display: block;
      transform: none;
    }

    .combined-stage {
      min-width: 860px;
    }

    .combined-model-scroll {
      max-height: 486px;
      overflow-y: auto;
      overscroll-behavior: contain;
      position: relative;
      scrollbar-width: thin;
    }

    .combined-human-reference {
      background: var(--surface);
      border-bottom: 1px solid var(--rule-dark);
      position: relative;
      z-index: 3;
    }

    .combined-chart .combined-column-label {
      fill: var(--muted);
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .combined-chart .combined-column-note {
      fill: var(--muted);
      font-family: var(--sans);
      font-size: 12px;
    }

    .combined-chart .combined-row-label {
      fill: var(--ink);
      font-family: var(--sans);
      font-size: 14px;
    }

    .combined-chart .combined-row-label--human {
      fill: var(--teal-dark);
      font-weight: 700;
    }

    .combined-chart .combined-distance-track {
      fill: var(--paper);
    }

    .combined-chart .combined-distance-guide {
      stroke: var(--rule);
      stroke-width: 1;
    }

    .combined-chart .combined-distance-bar {
      fill: var(--blue);
      opacity: 0.82;
    }

    .combined-chart .combined-distance-bar--best {
      fill: var(--teal);
      opacity: 1;
    }

    .combined-chart .combined-distance-value {
      fill: var(--ink);
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 700;
    }

    .combined-chart .combined-row-rule {
      stroke: var(--rule);
      stroke-width: 1;
    }

    .combined-chart .combined-section-label {
      fill: var(--muted);
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .combined-chart .combined-section-rule {
      stroke: var(--rule-dark);
      stroke-width: 1;
    }

    .combined-chart .combined-move-connector {
      fill: none;
      opacity: 0.9;
      stroke-width: 1.5;
    }

    .combined-chart .combined-move-label {
      fill: var(--ink);
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 700;
    }

    .article .figure-explainer {
      color: var(--muted);
      font-family: var(--sans);
      font-size: 0.9rem;
      line-height: 1.55;
      margin: -6px 0 22px;
      max-width: 760px;
    }

    .flow-scroll {
      overflow-x: auto;
      padding: 4px 0 8px;
    }

    .progress-stage {
      min-width: 820px;
      padding: 2px 0 8px;
    }

    .progress-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 18px;
      margin-bottom: 12px;
    }

    .progress-legend__item {
      align-items: center;
      display: inline-flex;
      font-family: var(--sans);
      font-size: 0.76rem;
      gap: 7px;
    }

    .progress-legend__swatch {
      background: var(--tone);
      display: inline-block;
      height: 10px;
      width: 18px;
    }

    .progress-river {
      display: block;
      height: auto;
      width: 100%;
    }

    .progress-river .river-grid {
      stroke: var(--rule);
      stroke-width: 1;
    }

    .progress-river .river-baseline {
      stroke: var(--rule-dark);
      stroke-width: 1;
    }

    .progress-river .river-hover-guide {
      pointer-events: none;
      stroke: var(--ink);
      stroke-width: 1.5;
    }

    .progress-river .river-panel-rule {
      stroke: var(--rule);
      stroke-width: 1;
    }

    .progress-river .river-human-band {
      fill: var(--teal-soft);
    }

    .progress-river .river-area {
      cursor: crosshair;
      opacity: 0.88;
      stroke: var(--surface);
      stroke-width: 1;
      transition: opacity 120ms ease, stroke-width 120ms ease;
    }

    .progress-river.is-comparing .river-area {
      opacity: 0.2;
    }

    .progress-river.is-comparing .river-area.is-related {
      opacity: 1;
      stroke-width: 2;
    }

    #move-distance-figure .chart-tooltip--comparison,
    #move-shares-figure .chart-tooltip--comparison {
      box-sizing: border-box;
      max-width: 480px;
      padding: 13px 15px 12px;
      white-space: normal;
      width: min(480px, calc(100% - 16px));
    }

    #move-distance-figure .chart-tooltip--distance,
    #move-shares-figure .chart-tooltip--distance {
      box-sizing: border-box;
      max-width: none;
      padding: 13px 15px;
      white-space: normal;
      width: 100%;
    }

    #move-distance-figure .chart-tooltip,
    #move-shares-figure .chart-tooltip {
      background: var(--surface);
      border: 1px solid var(--rule-dark);
      color: var(--ink);
      box-shadow: 0 8px 24px rgba(23, 23, 20, 0.08);
    }

    #move-distance-figure .move-tooltip__metric,
    #move-distance-figure .move-tooltip__baseline-label,
    #move-distance-figure .move-tooltip__header,
    #move-distance-figure .move-tooltip__footer,
    #move-distance-figure .distance-tooltip__metric,
    #move-distance-figure .distance-tooltip__meaning,
    #move-distance-figure .distance-tooltip__sample,
    #move-shares-figure .move-tooltip__metric,
    #move-shares-figure .move-tooltip__baseline-label,
    #move-shares-figure .move-tooltip__header,
    #move-shares-figure .move-tooltip__footer {
      color: var(--muted);
    }

    #move-distance-figure .move-tooltip__stage,
    #move-distance-figure .distance-tooltip__value,
    #move-shares-figure .move-tooltip__stage {
      color: var(--ink);
    }

    #move-distance-figure .move-tooltip__baseline,
    #move-shares-figure .move-tooltip__baseline {
      background: var(--teal-soft);
    }

    #move-distance-figure .move-tooltip__baseline-value,
    #move-shares-figure .move-tooltip__baseline-value {
      color: var(--teal-dark);
    }

    #move-distance-figure .move-tooltip__header,
    #move-distance-figure .move-tooltip__row,
    #move-distance-figure .distance-tooltip__meaning,
    #move-shares-figure .move-tooltip__header,
    #move-shares-figure .move-tooltip__row {
      border-color: var(--rule);
    }

    #move-distance-figure .move-tooltip__row--active,
    #move-shares-figure .move-tooltip__row--active {
      background: var(--paper);
      box-shadow: inset 3px 0 var(--teal);
    }

    #move-distance-figure .move-tooltip__comparison::before,
    #move-shares-figure .move-tooltip__comparison::before {
      background: var(--rule-dark);
    }

    #move-distance-figure .move-tooltip__delta--more,
    #move-shares-figure .move-tooltip__delta--more {
      color: #a64233;
    }

    #move-distance-figure .move-tooltip__delta--less,
    #move-shares-figure .move-tooltip__delta--less {
      color: #365f88;
    }

    #move-distance-figure .move-tooltip__delta--same,
    #move-shares-figure .move-tooltip__delta--same {
      color: var(--muted);
    }

    .move-tooltip__title-row {
      align-items: center;
      display: flex;
      gap: 8px;
    }

    .move-tooltip__swatch {
      flex: 0 0 auto;
      height: 12px;
      width: 12px;
    }

    .move-tooltip__title {
      font-family: var(--serif);
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 2px;
    }

    .move-tooltip__metric {
      color: color-mix(in srgb, var(--paper) 78%, transparent);
      font-size: 0.76rem;
      line-height: 1.35;
      margin-bottom: 8px;
    }

    .move-tooltip__stage {
      color: var(--paper);
      font-family: var(--mono);
      font-size: 0.75rem;
      margin-bottom: 9px;
    }

    .move-tooltip__baseline {
      align-items: center;
      background: color-mix(in srgb, var(--teal) 20%, transparent);
      border-left: 3px solid var(--teal);
      display: flex;
      justify-content: space-between;
      margin-bottom: 9px;
      padding: 8px 10px;
    }

    .move-tooltip__baseline-label {
      color: color-mix(in srgb, var(--paper) 84%, transparent);
      font-size: 0.76rem;
    }

    .move-tooltip__baseline-value {
      color: var(--teal-soft);
      font-family: var(--mono);
      font-size: 0.9rem;
      font-variant-numeric: tabular-nums;
      font-weight: 700;
    }

    .move-tooltip__header,
    .move-tooltip__row {
      align-items: center;
      display: grid;
      gap: 8px;
      grid-template-columns: minmax(128px, 1fr) 54px 112px 67px;
    }

    .move-tooltip__header {
      border-bottom: 1px solid color-mix(in srgb, var(--paper) 24%, transparent);
      color: color-mix(in srgb, var(--paper) 66%, transparent);
      font-family: var(--mono);
      font-size: 0.7rem;
      padding: 0 0 5px;
      text-transform: uppercase;
    }

    .move-tooltip__row {
      border-bottom: 1px solid color-mix(in srgb, var(--paper) 12%, transparent);
      font-size: 0.76rem;
      margin: 0 -5px;
      padding: 5px;
    }

    .move-tooltip__row--active {
      background: color-mix(in srgb, var(--paper) 11%, transparent);
      box-shadow: inset 3px 0 color-mix(in srgb, var(--paper) 78%, transparent);
    }

    .move-tooltip__row--active .move-tooltip__model {
      font-weight: 700;
    }

    .move-tooltip__model {
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .move-tooltip__share,
    .move-tooltip__delta {
      font-family: var(--mono);
      font-variant-numeric: tabular-nums;
      text-align: right;
      white-space: nowrap;
    }

    .move-tooltip__comparison {
      height: 12px;
      position: relative;
    }

    .move-tooltip__comparison::before {
      background: color-mix(in srgb, var(--paper) 35%, transparent);
      content: "";
      height: 12px;
      left: 50%;
      position: absolute;
      top: 0;
      width: 1px;
    }

    .move-tooltip__comparison-bar {
      height: 6px;
      min-width: 2px;
      position: absolute;
      top: 3px;
    }

    .move-tooltip__comparison-bar--more {
      background: color-mix(in srgb, var(--coral) 72%, var(--paper));
      left: 50%;
    }

    .move-tooltip__comparison-bar--less {
      background: color-mix(in srgb, var(--blue) 62%, var(--paper));
      right: 50%;
    }

    .move-tooltip__delta--more {
      color: color-mix(in srgb, var(--coral) 68%, var(--paper));
      font-weight: 700;
    }

    .move-tooltip__delta--less {
      color: color-mix(in srgb, var(--blue) 58%, var(--paper));
      font-weight: 700;
    }

    .move-tooltip__delta--same {
      color: color-mix(in srgb, var(--paper) 60%, transparent);
    }

    .move-tooltip__footer {
      color: color-mix(in srgb, var(--paper) 68%, transparent);
      font-size: 0.72rem;
      line-height: 1.4;
      padding-top: 8px;
    }

    .distance-tooltip__model {
      font-family: var(--serif);
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.25;
      margin-bottom: 8px;
    }

    .distance-tooltip__metric {
      color: color-mix(in srgb, var(--paper) 72%, transparent);
      font-size: 0.72rem;
      margin-bottom: 2px;
    }

    .distance-tooltip__value {
      color: var(--paper);
      font-family: var(--mono);
      font-size: 1.35rem;
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 6px;
    }

    .distance-tooltip__meaning {
      border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
      color: color-mix(in srgb, var(--paper) 82%, transparent);
      font-size: 0.74rem;
      line-height: 1.4;
      padding-top: 7px;
    }

    .distance-tooltip__sample {
      color: color-mix(in srgb, var(--paper) 62%, transparent);
      font-family: var(--mono);
      font-size: 0.72rem;
      margin-top: 7px;
    }

    .distance-flow {
      border-top: 1px solid var(--rule);
      margin-top: 8px;
      padding-top: 9px;
    }

    .distance-flow__note {
      color: var(--muted);
      font-size: 0.7rem;
      line-height: 1.38;
      margin: 0 0 10px;
    }

    .distance-flow__panel + .distance-flow__panel {
      border-top: 1px solid var(--rule);
      margin-top: 9px;
      padding-top: 9px;
    }

    .distance-flow__panel-head {
      align-items: baseline;
      display: flex;
      justify-content: space-between;
      margin-bottom: 3px;
    }

    .distance-flow__panel-label {
      color: var(--ink);
      font-size: 0.72rem;
      font-weight: 700;
    }

    .distance-flow__panel-n {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.59rem;
    }

    .distance-flow__axis-title {
      fill: var(--muted);
      font-family: var(--mono);
      font-size: 14px;
      font-weight: 650;
      letter-spacing: 0.02em;
      text-anchor: middle;
    }

    .distance-flow__svg {
      display: block;
      height: 86px;
      overflow: visible;
      width: 100%;
    }

    .distance-flow__link {
      cursor: help;
      fill: none;
      opacity: 0.32;
      transition: opacity 120ms ease;
    }

    .distance-flow__link:hover,
    .distance-flow__link:focus {
      opacity: 0.82;
    }

    .distance-flow__svg.is-inspecting .distance-flow__link {
      opacity: 0.07;
    }

    .distance-flow__svg.is-inspecting .distance-flow__link.is-active {
      opacity: 0.9;
    }

    .distance-flow__node {
      cursor: help;
      stroke: var(--surface);
      stroke-width: 0.7;
      transition: opacity 120ms ease, stroke-width 120ms ease;
    }

    .distance-flow__svg.is-comparing-node .distance-flow__node {
      opacity: 0.16;
    }

    .distance-flow__svg.is-comparing-node .distance-flow__node.is-active {
      opacity: 1;
      stroke-width: 2;
    }

    .distance-flow__svg.is-comparing-node .distance-flow__link {
      opacity: 0.04;
    }

    .distance-flow__svg.is-comparing-node .distance-flow__link.is-related {
      opacity: 0.48;
    }

    .distance-flow__turn {
      fill: var(--ink);
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 700;
      text-anchor: middle;
    }

    .distance-flow__detail {
      color: var(--muted);
      font-size: 0.66rem;
      line-height: 1.3;
      min-height: 1.3em;
      margin-top: 2px;
    }

    .distance-flow__detail strong {
      color: var(--ink);
      font-weight: 650;
    }

    .distance-flow__delta {
      display: block;
      font-family: var(--mono);
      font-size: 0.59rem;
      font-weight: 650;
      margin-top: 3px;
    }

    .distance-flow__delta--higher {
      color: var(--coral);
    }

    .distance-flow__delta--lower {
      color: var(--blue);
    }

    .distance-flow__delta--reference,
    .distance-flow__delta--same {
      color: var(--muted);
    }

    .distance-flow__legend {
      display: flex;
      flex-wrap: wrap;
      gap: 5px 10px;
      margin-top: 9px;
    }

    .distance-flow__legend-item {
      align-items: center;
      color: var(--muted);
      display: inline-flex;
      font-size: 0.62rem;
      gap: 4px;
      line-height: 1.2;
    }

    .distance-flow__legend-swatch {
      flex: 0 0 auto;
      height: 7px;
      width: 7px;
    }

    .distance-distribution {
      border-top: 1px solid var(--rule);
      margin-top: 8px;
      padding-top: 9px;
      position: relative;
    }

    .distance-distribution__row {
      align-items: center;
      display: grid;
      gap: 8px;
      grid-template-columns: 42px minmax(0, 1fr);
      margin-bottom: 7px;
      position: relative;
      z-index: 2;
    }

    .distance-distribution__label {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.59rem;
      text-transform: uppercase;
    }

    .distance-distribution__bar {
      background: var(--paper);
      display: flex;
      height: 15px;
      overflow: hidden;
      position: relative;
    }

    .distance-distribution__segment {
      border-right: 1px solid color-mix(in srgb, var(--surface) 72%, transparent);
      display: block;
      min-width: 1px;
    }

    .distance-distribution__legend {
      display: grid;
      gap: 3px;
      margin-top: 10px;
      position: relative;
      z-index: 2;
    }

    .distance-distribution__legend-head,
    .distance-distribution__legend-item {
      align-items: center;
      display: grid;
      gap: 6px;
      grid-template-columns: 9px minmax(0, 1fr) 86px 100px;
    }

    .distance-distribution__legend-head {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.59rem;
      letter-spacing: 0.025em;
      padding-bottom: 3px;
      text-transform: uppercase;
    }

    .distance-distribution__legend-head span:nth-child(2) {
      grid-column: 3;
      text-align: right;
    }

    .distance-distribution__legend-head span:nth-child(3) {
      text-align: right;
    }

    .distance-distribution__legend-item {
      background: var(--surface);
      color: var(--muted);
      font-size: 0.71rem;
      line-height: 1.25;
      min-height: 20px;
    }

    .distance-distribution__swatch {
      height: 8px;
      width: 8px;
    }

    .distance-distribution__legend-values {
      color: var(--ink);
      font-family: var(--mono);
      font-size: 0.66rem;
      font-variant-numeric: tabular-nums;
      text-align: right;
      white-space: nowrap;
    }

    .distance-distribution__delta {
      align-items: center;
      display: grid;
      gap: 5px;
      grid-template-columns: 40px minmax(0, 1fr);
    }

    .distance-distribution__delta-track {
      background: var(--paper);
      height: 9px;
      position: relative;
    }

    .distance-distribution__delta-track::before {
      background: var(--rule-dark);
      bottom: -2px;
      content: "";
      left: 50%;
      position: absolute;
      top: -2px;
      width: 1px;
    }

    .distance-distribution__delta-bar {
      height: 5px;
      position: absolute;
      top: 2px;
    }

    .distance-distribution__delta-text {
      color: var(--teal-dark);
      font-family: var(--mono);
      font-size: 0.64rem;
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      text-align: right;
      white-space: nowrap;
    }

    .progress-river .river-panel-label {
      fill: var(--ink);
      font-family: var(--sans);
      font-size: 15px;
    }

    .progress-river .river-panel-label--human {
      fill: var(--teal-dark);
      font-weight: 700;
    }

    .progress-river .river-row-label {
      fill: var(--muted);
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 700;
    }

    .progress-river .river-row-label--human {
      fill: var(--teal-dark);
    }

    .progress-river .river-axis-label {
      fill: var(--muted);
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .figure-context {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.75rem;
      letter-spacing: 0.04em;
      margin: -7px 0 18px;
      text-transform: uppercase;
    }

    .session-persistence-head,
    .session-length-subhead {
      align-items: baseline;
      display: flex;
      justify-content: space-between;
      margin: 4px 0 8px;
    }

    .session-persistence-head strong,
    .session-length-subhead strong {
      font-family: var(--serif);
      font-size: 1.02rem;
    }

    .session-persistence-head span,
    .session-length-subhead span {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.7rem;
    }

    .session-persistence-chart {
      display: grid;
      gap: 18px;
      margin-bottom: 4px;
      min-width: 0;
    }

    .session-persistence-group {
      min-width: 0;
    }

    .session-persistence-group__head {
      align-items: baseline;
      border-bottom: 1px solid var(--rule-dark);
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      padding-bottom: 6px;
    }

    .session-persistence-group__head strong {
      font-family: var(--mono);
      font-size: 0.72rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .session-persistence-group__head span {
      color: var(--muted);
      font-size: 0.7rem;
    }

    .session-persistence-group--ours .session-persistence-group__head strong {
      color: var(--teal-dark);
    }

    .session-persistence-panels {
      display: grid;
      gap: 14px 18px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .session-persistence-group--ours .session-persistence-panels {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      max-width: calc(66.666% - 6px);
    }

    .session-persistence-panel {
      border-bottom: 1px solid var(--rule);
      min-width: 0;
      padding-bottom: 8px;
    }

    .session-persistence-panel__head {
      align-items: baseline;
      display: flex;
      gap: 8px;
      justify-content: space-between;
      margin-bottom: 2px;
    }

    .session-persistence-panel__head strong {
      font-family: var(--sans);
      font-size: 0.78rem;
      line-height: 1.2;
    }

    .session-persistence-panel__head span {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.64rem;
      white-space: nowrap;
    }

    .session-persistence-panel__head b {
      color: var(--ink);
    }

    .session-persistence-svg {
      display: block;
      height: auto;
      overflow: visible;
      width: 100%;
    }

    .session-persistence-grid {
      stroke: var(--rule);
      stroke-width: 1;
    }

    .session-persistence-axis-label,
    .session-persistence-axis-title {
      fill: var(--muted);
      font-family: var(--mono);
      font-size: 10px;
    }

    .session-persistence-axis-title {
      font-weight: 700;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .session-persistence-line {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2;
    }

    .session-persistence-line--human {
      stroke: var(--ink);
      stroke-width: 2.5;
    }

    .session-persistence-line--ours {
      stroke: var(--teal);
      stroke-width: 2.5;
    }

    .session-persistence-line--posttrained {
      stroke: var(--coral);
      stroke-width: 2.5;
    }

    .session-persistence-hit {
      fill: none;
      pointer-events: stroke;
      stroke: transparent;
      stroke-width: 16;
    }

    .session-persistence-point {
      fill: var(--surface);
      pointer-events: all;
      stroke-width: 2;
    }

    .session-persistence-point--human {
      stroke: var(--ink);
    }

    .session-persistence-point--ours {
      stroke: var(--teal);
    }

    .session-persistence-point--posttrained {
      stroke: var(--coral);
    }

    .session-persistence-detail {
      border-left: 3px solid var(--teal);
      color: var(--ink);
      font-family: var(--sans);
      font-size: 0.76rem;
      line-height: 1.4;
      margin: 10px 0 24px;
      min-height: 1.4em;
      padding: 4px 10px;
    }

    .session-length-subhead {
      border-top: 1px solid var(--rule-dark);
      padding-top: 18px;
    }

    .multiturn-length-chart {
      overflow-x: auto;
    }

    .multiturn-chart-inner {
      min-width: 620px;
    }

    .multiturn-header,
    .multiturn-row,
    .multiturn-axis-row {
      display: grid;
      gap: 14px;
      grid-template-columns: 190px minmax(0, 1fr) 96px;
    }

    .multiturn-header {
      border-bottom: 1px solid var(--rule-dark);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      padding: 8px 10px;
      text-transform: uppercase;
    }

    .multiturn-row {
      align-items: center;
      border-bottom: 1px solid var(--rule);
      min-height: 38px;
      padding: 0 8px;
      transition: background-color 120ms ease;
    }

    .multiturn-row:hover {
      background: var(--paper);
    }

    .multiturn-row--human {
      background: color-mix(in srgb, var(--teal) 8%, transparent);
      border-top: 1px solid var(--rule-dark);
    }

    .multiturn-group-label {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.64rem;
      letter-spacing: 0.05em;
      padding: 10px 8px 4px;
      text-transform: uppercase;
    }

    .multiturn-group-label--ours {
      color: var(--teal-dark);
    }

    .multiturn-model {
      font-family: var(--sans);
      font-size: 0.78rem;
      line-height: 1.1;
    }

    .multiturn-row--human .multiturn-model {
      color: var(--ink);
      font-weight: 700;
    }

    .multiturn-track {
      background:
        linear-gradient(to right, var(--rule) 1px, transparent 1px),
        linear-gradient(var(--rule-soft), var(--rule-soft)) center / 100% 1px no-repeat;
      background-size: 25% 100%, 100% 1px;
      height: 28px;
      position: relative;
    }

    .multiturn-whisker {
      background: var(--ink);
      height: 1px;
      position: absolute;
      top: 14px;
    }

    .multiturn-box {
      background: var(--coral);
      height: 6px;
      opacity: 0.8;
      position: absolute;
      top: 11px;
    }

    .multiturn-row--human .multiturn-box {
      background: var(--ink);
    }

    .multiturn-row[data-family="ours"] .multiturn-box {
      background: var(--teal);
    }

    .multiturn-median {
      background: var(--paper);
      border: 2px solid var(--coral);
      border-radius: 50%;
      height: 10px;
      position: absolute;
      top: 9px;
      transform: translateX(-50%);
      width: 10px;
    }

    .multiturn-row--human .multiturn-median {
      border-color: var(--ink);
    }

    .multiturn-row[data-family="ours"] .multiturn-median {
      border-color: var(--teal);
    }

    .multiturn-mean {
      background: var(--paper);
      height: 0;
      opacity: 0;
      position: absolute;
      width: 0;
    }

    .multiturn-value {
      font-family: var(--mono);
      font-size: 0.68rem;
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      text-align: right;
    }

    .multiturn-axis-row {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.72rem;
      padding: 7px 8px 0;
    }

    .multiturn-axis {
      display: flex;
      justify-content: space-between;
    }

    .chart-tooltip {
      background: var(--ink);
      color: var(--paper);
      font-family: var(--sans);
      font-size: 0.76rem;
      line-height: 1.4;
      max-width: 240px;
      opacity: 0;
      padding: 8px 10px;
      pointer-events: none;
      position: absolute;
      transform: translateY(4px);
      transition: opacity 80ms ease, transform 80ms ease;
      white-space: pre-line;
      z-index: 20;
    }

    .chart-tooltip.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .analysis-list {
      display: grid;
      gap: 0;
      grid-template-columns: 1fr;
      margin: 26px 0 46px;
    }

    .analysis-item {
      border-top: 1px solid var(--rule);
      display: grid;
      gap: 20px;
      grid-template-columns: 120px 1fr;
      padding: 18px 0;
    }

    .analysis-item:last-child {
      border-bottom: 1px solid var(--rule);
    }

    .analysis-item__label {
      color: var(--teal);
      font-family: var(--mono);
      font-size: 0.57rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .analysis-item p {
      font-family: var(--sans);
      font-size: 0.82rem;
      line-height: 1.55;
      margin: 0;
    }

    .footer {
      background: var(--ink);
      color: var(--paper);
      padding: 62px 0 68px;
    }

    .footer__inner {
      align-items: end;
      display: flex;
      justify-content: space-between;
    }

    .footer__title {
      font-family: var(--serif);
      font-size: clamp(2.5rem, 6vw, 4.5rem);
      letter-spacing: -0.06em;
    }

    .footer__note {
      color: #aaa69d;
      font-family: var(--mono);
      font-size: 0.58rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .figure-takeaway {
      align-items: flex-start;
      background: color-mix(in srgb, var(--teal) 8%, var(--paper));
      border-left: 3px solid var(--teal);
      color: var(--ink);
      display: grid;
      font-family: var(--sans);
      font-size: 0.9rem;
      gap: 4px;
      line-height: 1.55;
      margin-top: 18px;
      padding: 12px 15px 13px;
    }

    .figure-takeaway strong {
      font-family: var(--mono);
      font-size: 0.74rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .figure-takeaway--before-figure {
      margin: 22px 0 16px;
    }

    .result-figure > .figure-head + .figure-takeaway {
      margin: -2px 0 22px;
    }

    .move-tooltip-rail > .figure-takeaway,
    .braid-transcript > .figure-takeaway {
      margin: 0 0 18px;
    }

    .move-tooltip-rail > .figure-takeaway + .move-tooltip-rail__hint,
    .move-tooltip-rail > .figure-takeaway + #sankey-tooltip-content,
    .move-tooltip-rail > .figure-takeaway + #error-tooltip-content,
    .braid-transcript > .figure-takeaway + .move-tooltip-rail__hint,
    .braid-transcript > .figure-takeaway + #braid-transcript-content {
      border-top: 1px solid var(--rule);
      padding-top: 16px;
    }

    .sankey-figure-layout,
    .error-figure-layout {
      display: grid;
      gap: 22px;
      grid-template-columns: minmax(0, 1fr) 292px;
      margin-top: 12px;
    }

    .combined-distance-ci {
      stroke: #514d46;
      stroke-width: 1.1;
    }

    .sankey-figure-chart,
    .error-figure-chart {
      min-width: 0;
    }

    .sankey-main-grid {
      align-items: start;
      display: grid;
      gap: 22px;
      grid-template-columns: minmax(250px, 0.38fr) minmax(520px, 0.62fr);
    }

    .sankey-distance-panel,
    .sankey-flow-panel {
      min-width: 0;
    }

    .sankey-panel-label {
      color: var(--muted);
      display: block;
      font-family: var(--mono);
      font-size: 0.7rem;
      letter-spacing: 0.06em;
      margin-bottom: 10px;
      text-transform: uppercase;
    }

    .sankey-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 7px 13px;
      margin: 0 0 12px;
    }

    .sankey-distance-overview {
      border-top: 1px solid var(--rule-dark);
    }

    .sankey-distance-overview__head,
    .sankey-distance-row {
      align-items: center;
      display: grid;
      column-gap: 8px;
      grid-template-columns: 24px minmax(0, 1fr) 48px;
    }

    .sankey-distance-overview__head {
      border-bottom: 1px solid var(--rule-dark);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.66rem;
      letter-spacing: 0.04em;
      padding: 8px 7px;
      text-transform: uppercase;
    }

    .sankey-distance-list {
      display: grid;
    }

    .sankey-distance-row {
      appearance: none;
      background: transparent;
      border: 0;
      border-bottom: 1px solid var(--rule);
      color: var(--ink);
      cursor: pointer;
      font: inherit;
      padding: 9px 7px 10px;
      text-align: left;
      width: 100%;
    }

    .sankey-distance-row:hover,
    .sankey-distance-row:focus-visible {
      background: color-mix(in srgb, var(--teal) 7%, transparent);
    }

    .sankey-distance-row[aria-pressed="true"] {
      background: var(--teal-soft);
      box-shadow: inset 3px 0 var(--teal);
    }

    .sankey-distance-rank,
    .sankey-distance-value {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.72rem;
    }

    .sankey-distance-model {
      font-family: var(--sans);
      font-size: 0.76rem;
      font-weight: 650;
      line-height: 1.25;
    }

    .sankey-distance-track {
      background: var(--rule);
      grid-column: 2 / 4;
      height: 8px;
      margin-top: 3px;
      overflow: hidden;
      position: relative;
    }

    .sankey-distance-track::before {
      background: var(--teal);
      content: "";
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: var(--distance-position);
    }

    .sankey-distance-row[aria-pressed="true"] .sankey-distance-track::before {
      background: var(--teal-dark);
    }

    .sankey-distance-dot {
      display: none;
    }

    .sankey-distance-value {
      color: var(--ink);
      text-align: right;
    }

    .sankey-distance-axis {
      color: var(--muted);
      display: flex;
      font-family: var(--mono);
      font-size: 0.66rem;
      justify-content: space-between;
      margin-left: 32px;
      padding: 8px 7px 0;
    }

    .sankey-legend__item,
    .line-legend__item {
      align-items: center;
      color: var(--muted);
      display: inline-flex;
      font-family: var(--sans);
      font-size: 0.74rem;
      gap: 6px;
      line-height: 1.25;
    }

    .sankey-legend__swatch {
      border-radius: 999px;
      height: 8px;
      width: 17px;
    }

    .sankey-stage {
      background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.86), rgba(250, 249, 245, 0.98));
      border: 1px solid var(--rule-dark);
      overflow: hidden;
    }

    .sankey-human-reference {
      align-items: center;
      background: #f2f0e9;
      border-bottom: 3px solid var(--ink);
      display: grid;
      gap: 14px;
      grid-template-columns: 132px minmax(0, 1fr);
      padding: 13px 13px 10px;
      position: relative;
      z-index: 2;
    }

    .sankey-model-scroll {
      max-height: 760px;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-color: #aaa49a transparent;
      scrollbar-width: thin;
    }

    .sankey-row {
      align-items: center;
      border-bottom: 1px solid var(--rule);
      display: grid;
      gap: 14px;
      grid-template-columns: 132px minmax(0, 1fr);
      padding: 14px 13px 12px;
    }

    .sankey-row:last-child {
      border-bottom: 0;
    }

    .sankey-row__label {
      align-content: center;
      align-self: stretch;
      border-right: 1px solid var(--rule);
      display: grid;
      gap: 6px;
      font-family: var(--sans);
      font-size: 0.76rem;
      font-weight: 700;
      line-height: 1.3;
      padding-right: 12px;
    }

    .sankey-row__label span:last-child {
      color: var(--muted);
      display: block;
      font-family: var(--mono);
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .sankey-svg {
      display: block;
      height: 210px;
      overflow: visible;
      width: 100%;
    }

    .sankey-turn-label {
      fill: var(--muted);
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .sankey-node {
      stroke: rgba(31, 30, 27, 0.34);
      stroke-width: 0.6;
    }

    .sankey-link {
      cursor: pointer;
      fill-opacity: 0.36;
      opacity: 0;
      stroke: rgba(255, 255, 255, 0.38);
      stroke-width: 0.35;
      transition:
        fill-opacity 150ms ease,
        opacity 420ms ease,
        stroke-width 150ms ease;
    }

    .sankey-svg.is-ready .sankey-link {
      opacity: 1;
    }

    .sankey-stage.is-comparing .sankey-link {
      fill-opacity: 0.08;
    }

    .sankey-stage.is-comparing .sankey-link.is-related {
      fill-opacity: 0.78;
      stroke: var(--ink);
      stroke-width: 0.8;
    }

    .sankey-tooltip-rail,
    .error-tooltip-rail {
      max-height: 920px;
      overflow-y: auto;
    }

    .tooltip-transcript {
      border-top: 1px solid var(--rule-dark);
      margin-top: 12px;
      padding-top: 10px;
    }

    .tooltip-transcript__problem {
      color: var(--muted);
      font-family: var(--sans);
      font-size: 0.76rem;
      line-height: 1.45;
      margin-bottom: 9px;
    }

    .tooltip-transcript__line {
      border-left: 2px solid var(--rule-dark);
      font-family: var(--sans);
      font-size: 0.75rem;
      line-height: 1.4;
      margin-bottom: 7px;
      padding-left: 8px;
    }

    .tooltip-transcript__line strong {
      display: block;
      font-family: var(--mono);
      font-size: 0.72rem;
      letter-spacing: 0.06em;
      margin-bottom: 2px;
      text-transform: uppercase;
    }

    .error-distribution-layout {
      display: grid;
      gap: 24px;
      grid-template-columns: minmax(0, 1fr) 310px;
      margin-top: 18px;
    }

    .error-distribution-chart {
      border-top: 1px solid var(--rule-dark);
      overflow-x: auto;
    }

    .error-distribution-scale,
    .error-distribution-row {
      align-items: center;
      display: grid;
      gap: 12px;
      grid-template-columns: minmax(150px, 0.72fr) minmax(220px, 1.28fr);
      min-width: 440px;
    }

    .error-distribution-scale {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.64rem;
      letter-spacing: 0.035em;
      padding: 9px 6px 7px;
      text-transform: uppercase;
    }

    .error-distribution-scale__ticks {
      display: flex;
      justify-content: space-between;
    }

    .error-distribution-row {
      appearance: none;
      background: transparent;
      border: 0;
      border-top: 1px solid var(--rule);
      color: var(--ink);
      cursor: pointer;
      font: inherit;
      padding: 8px 6px;
      text-align: left;
      width: 100%;
    }

    .error-distribution-row:hover,
    .error-distribution-row:focus-visible,
    .error-distribution-row.is-selected {
      background: color-mix(in srgb, var(--teal) 7%, transparent);
    }

    .error-distribution-row__model {
      font-size: 0.8rem;
      line-height: 1.2;
    }

    .error-distribution-row__track {
      background:
        linear-gradient(to right, transparent calc(25% - 0.5px), var(--rule) 25%, transparent calc(25% + 0.5px)),
        linear-gradient(to right, transparent calc(50% - 0.5px), var(--rule) 50%, transparent calc(50% + 0.5px)),
        linear-gradient(to right, transparent calc(75% - 0.5px), var(--rule) 75%, transparent calc(75% + 0.5px)),
        color-mix(in srgb, var(--rule) 42%, transparent);
      height: 24px;
      overflow: hidden;
      position: relative;
    }

    .error-distribution-row__bar {
      background: #a39f97;
      display: block;
      height: 100%;
      transition: width 420ms ease;
    }

    .error-distribution-row[data-family="ours"] .error-distribution-row__bar {
      background: var(--teal);
    }

    .error-distribution-row__value {
      color: var(--ink);
      font-family: var(--mono);
      font-size: 0.72rem;
      line-height: 24px;
      position: absolute;
      right: 7px;
      text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper);
      top: 0;
    }

    .error-distribution-detail {
      border-left: 1px solid var(--rule-dark);
      min-width: 0;
      padding-left: 18px;
    }

    .error-distribution-detail__score {
      align-items: baseline;
      border-bottom: 1px solid var(--rule-dark);
      display: flex;
      justify-content: space-between;
      margin: 10px 0 14px;
      padding-bottom: 9px;
    }

    .error-distribution-detail__score span {
      color: var(--muted);
      font-size: 0.72rem;
    }

    .error-distribution-detail__score strong {
      font-family: var(--mono);
      font-size: 1rem;
    }

    .error-distribution-pair {
      display: grid;
      gap: 10px;
    }

    .error-distribution-strip__head {
      align-items: baseline;
      display: flex;
      font-size: 0.72rem;
      justify-content: space-between;
      margin-bottom: 4px;
    }

    .error-distribution-strip__head span {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.64rem;
    }

    .error-distribution-strip__bar {
      display: flex;
      height: 18px;
      overflow: hidden;
    }

    .error-distribution-strip__segment--correct {
      background: #338765;
    }

    .error-distribution-strip__segment--incorrect {
      background: #c95151;
    }

    .error-distribution-strip__segment--no-claim {
      background: #8e8a82;
    }

    .error-distribution-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem 0.9rem;
      margin: 0.35rem 0 0.8rem;
      font-size: 0.78rem;
      color: var(--ink-soft, inherit);
    }
    .error-distribution-legend span {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
    }
    .error-distribution-legend i {
      display: inline-block;
      width: 0.7rem;
      height: 0.7rem;
      border-radius: 2px;
    }
    .error-distribution-pair--all {
      gap: 0.55rem;
    }
    .error-distribution-pair--all .error-distribution-strip {
      padding: 0.2rem 0.35rem;
      margin: 0 -0.35rem;
      border-radius: 6px;
      transition: background 120ms ease;
    }
    .error-distribution-pair--all .error-distribution-strip.is-active,
    .error-distribution-pair--all .error-distribution-strip:hover {
      background: rgba(0, 0, 0, 0.05);
    }
    .error-distribution-pair--all .error-distribution-strip[data-family="ours"] .error-distribution-strip__head strong {
      color: var(--ours, inherit);
    }
    .error-distribution-strip__shares {
      opacity: 0;
      transition: opacity 120ms ease;
      font-variant-numeric: tabular-nums;
    }
    .error-distribution-strip.is-active .error-distribution-strip__shares,
    .error-distribution-strip:hover .error-distribution-strip__shares {
      opacity: 1;
    }
    .error-distribution-categories {
      border-top: 1px solid var(--rule);
      display: grid;
      margin-top: 14px;
    }

    .error-distribution-category {
      align-items: center;
      border-bottom: 1px solid var(--rule);
      display: grid;
      font-size: 0.7rem;
      gap: 4px 8px;
      grid-template-columns: 8px minmax(0, 1fr) auto;
      padding: 8px 0;
    }

    .error-distribution-category i {
      display: block;
      height: 8px;
      width: 8px;
    }

    .error-distribution-category strong {
      font-family: var(--mono);
      font-size: 0.67rem;
      text-align: right;
    }

    .error-distribution-category small {
      color: var(--muted);
      grid-column: 2 / -1;
      line-height: 1.25;
    }

    .correctness-f1-layout {
      display: grid;
      gap: 24px;
      grid-template-columns: minmax(0, 1fr) 286px;
      margin-top: 18px;
    }

    .correctness-f1-definition {
      align-items: center;
      background: color-mix(in srgb, var(--teal) 5%, var(--paper));
      border-bottom: 1px solid var(--rule-dark);
      border-top: 1px solid var(--rule-dark);
      display: grid;
      font-family: var(--sans);
      font-size: 0.78rem;
      gap: 8px 12px;
      grid-template-columns: auto minmax(0, 1fr) auto;
      line-height: 1.4;
      margin-top: 14px;
      padding: 10px 12px;
    }

    .correctness-f1-definition > strong {
      font-family: var(--mono);
      font-size: 0.73rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .correctness-f1-definition__range {
      color: var(--muted);
      white-space: nowrap;
    }

    .correctness-f1-definition__range span {
      color: var(--teal);
      margin: 0 4px;
    }

    .correctness-f1-chart {
      border-top: 1px solid var(--rule-dark);
      overflow-x: auto;
    }

    .correctness-f1-scale,
    .correctness-f1-row {
      align-items: center;
      display: grid;
      gap: 9px;
      grid-template-columns: minmax(145px, 0.7fr) minmax(170px, 1fr) 66px 66px 66px;
      min-width: 620px;
    }

    .correctness-f1-scale {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.61rem;
      letter-spacing: 0.035em;
      line-height: 1.2;
      padding: 9px 5px 7px;
      text-transform: uppercase;
    }

    .correctness-f1-scale small {
      display: block;
      font-size: 0.55rem;
      font-weight: 400;
      letter-spacing: 0;
      margin-top: 2px;
      text-transform: none;
    }

    .correctness-f1-scale__class {
      position: relative;
      text-align: center;
    }

    .correctness-f1-scale__class::before {
      border-radius: 50%;
      content: "";
      display: inline-block;
      height: 6px;
      margin-right: 4px;
      width: 6px;
    }

    .correctness-f1-scale__class--correct::before {
      background: #338765;
    }

    .correctness-f1-scale__class--incorrect::before {
      background: #c95151;
    }

    .correctness-f1-scale__class--no-claim::before {
      background: #8e8a82;
    }

    .correctness-f1-row {
      appearance: none;
      background: transparent;
      border: 0;
      border-top: 1px solid var(--rule);
      color: var(--ink);
      cursor: pointer;
      font: inherit;
      padding: 8px 5px;
      text-align: left;
      width: 100%;
    }

    .correctness-f1-row:hover,
    .correctness-f1-row:focus-visible {
      background: color-mix(in srgb, var(--teal) 7%, transparent);
    }

    .correctness-f1-row__model {
      font-size: 0.78rem;
      line-height: 1.2;
      padding-left: 6px;
    }

    .correctness-f1-row__track {
      background:
        linear-gradient(to right, transparent calc(25% - 0.5px), var(--rule) 25%, transparent calc(25% + 0.5px)),
        linear-gradient(to right, transparent calc(50% - 0.5px), var(--rule) 50%, transparent calc(50% + 0.5px)),
        linear-gradient(to right, transparent calc(75% - 0.5px), var(--rule) 75%, transparent calc(75% + 0.5px)),
        color-mix(in srgb, var(--rule) 42%, transparent);
      height: 22px;
      overflow: hidden;
      position: relative;
    }

    .correctness-f1-row__bar {
      background: #a39f97;
      display: block;
      height: 100%;
      transition: width 420ms ease;
    }

    .correctness-f1-row[data-family="ours"] .correctness-f1-row__bar {
      background: var(--teal);
    }

    .misconception-match-layout {
      display: grid;
      gap: 24px;
      grid-template-columns: minmax(0, 1fr) 300px;
      margin-top: 18px;
    }

    .misconception-match-chart {
      border-top: 1px solid var(--rule-dark);
      overflow-x: auto;
    }

    .misconception-match-scale,
    .misconception-match-row {
      align-items: center;
      display: grid;
      gap: 12px;
      grid-template-columns: minmax(150px, 0.75fr) minmax(220px, 1.25fr);
      min-width: 430px;
    }

    .misconception-match-scale {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.64rem;
      letter-spacing: 0.035em;
      padding: 9px 6px 7px;
      text-transform: uppercase;
    }

    .misconception-match-scale__ticks {
      display: flex;
      justify-content: space-between;
    }

    .misconception-match-row {
      appearance: none;
      background: transparent;
      border: 0;
      border-top: 1px solid var(--rule);
      color: var(--ink);
      cursor: pointer;
      font: inherit;
      padding: 8px 6px;
      text-align: left;
      width: 100%;
    }

    .misconception-match-row:hover,
    .misconception-match-row:focus-visible,
    .misconception-match-row.is-selected {
      background: color-mix(in srgb, var(--teal) 7%, transparent);
    }

    .misconception-match-row__model {
      font-size: 0.8rem;
      line-height: 1.2;
    }

    .misconception-match-row__track {
      background:
        linear-gradient(to right, transparent calc(33.333% - 0.5px), var(--rule) 33.333%, transparent calc(33.333% + 0.5px)),
        linear-gradient(to right, transparent calc(66.666% - 0.5px), var(--rule) 66.666%, transparent calc(66.666% + 0.5px)),
        color-mix(in srgb, var(--rule) 42%, transparent);
      height: 24px;
      overflow: hidden;
      position: relative;
    }

    .misconception-match-row__bar {
      background: #a39f97;
      display: block;
      height: 100%;
      transition: width 420ms ease;
    }

    .misconception-match-row[data-family="ours"] .misconception-match-row__bar {
      background: var(--teal);
    }

    .misconception-match-row__value {
      color: var(--ink);
      font-family: var(--mono);
      font-size: 0.72rem;
      line-height: 24px;
      position: absolute;
      right: 7px;
      text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper);
      top: 0;
    }

    .misconception-match-detail {
      border-left: 1px solid var(--rule-dark);
      min-width: 0;
      padding-left: 18px;
    }

    .misconception-match-detail__model {
      font-family: var(--display);
      font-size: 1.22rem;
      font-weight: 700;
      line-height: 1.15;
      margin: 5px 0 14px;
    }

    .misconception-match-funnel {
      display: grid;
      gap: 8px;
    }

    .misconception-match-step {
      background: color-mix(in srgb, var(--rule) 34%, transparent);
      padding: 9px 10px;
    }

    .misconception-match-step strong,
    .misconception-match-step span {
      display: block;
    }

    .misconception-match-step strong {
      font-family: var(--mono);
      font-size: 0.78rem;
    }

    .misconception-match-step span {
      color: var(--muted);
      font-family: var(--sans);
      font-size: 0.72rem;
      line-height: 1.35;
      margin-top: 2px;
    }

    .misconception-match-step--final {
      background: color-mix(in srgb, var(--teal) 12%, var(--paper));
      border-left: 3px solid var(--teal);
    }

    .correctness-f1-row__value {
      color: var(--ink);
      font-family: var(--mono);
      font-size: 0.69rem;
      line-height: 22px;
      position: absolute;
      right: 6px;
      text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper);
      top: 0;
    }

    .correctness-f1-row__class {
      align-items: center;
      background: linear-gradient(to right, var(--class-fill) var(--score-pct), color-mix(in srgb, var(--rule) 36%, transparent) var(--score-pct));
      display: flex;
      height: 22px;
      justify-content: center;
    }

    .correctness-f1-row__class b {
      font-family: var(--mono);
      font-size: 0.64rem;
      font-weight: 600;
      text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper);
    }

    .correctness-f1-row__class--correct_claim {
      --class-fill: color-mix(in srgb, #338765 42%, var(--paper));
    }

    .correctness-f1-row__class--incorrect_claim {
      --class-fill: color-mix(in srgb, #c95151 38%, var(--paper));
    }

    .correctness-f1-row__class--no_claim {
      --class-fill: color-mix(in srgb, #8e8a82 44%, var(--paper));
    }

    .correctness-f1-detail {
      border-left: 1px solid var(--rule-dark);
      min-width: 0;
      padding-left: 18px;
    }

    .correctness-f1-detail__eyebrow {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.68rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .correctness-f1-detail__model {
      font-family: var(--serif);
      font-size: 1.12rem;
      font-weight: 700;
      margin-top: 6px;
    }

    .correctness-f1-detail__score {
      align-items: baseline;
      border-bottom: 1px solid var(--rule-dark);
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      padding-bottom: 9px;
    }

    .correctness-f1-detail__formula {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.64rem;
      line-height: 1.35;
      margin: 7px 0 4px;
    }

    .correctness-f1-detail__score span {
      color: var(--muted);
      font-size: 0.72rem;
    }

    .correctness-f1-detail__score strong {
      font-family: var(--mono);
      font-size: 1rem;
    }

    .correctness-f1-classes {
      display: grid;
    }

    .correctness-f1-class {
      align-items: baseline;
      border-bottom: 1px solid var(--rule);
      display: grid;
      font-size: 0.7rem;
      gap: 3px 8px;
      grid-template-columns: minmax(0, 1fr) auto;
      padding: 9px 0;
    }

    .correctness-f1-class strong {
      font-size: 0.72rem;
      grid-column: 1 / -1;
    }

    .correctness-f1-class__f1 {
      color: var(--ink);
      font-family: var(--mono);
      font-weight: 700;
    }

    .correctness-f1-class span:nth-of-type(2),
    .correctness-f1-class span:nth-of-type(3) {
      color: var(--muted);
    }

    .correctness-f1-detail__note {
      color: var(--muted);
      font-size: 0.7rem;
      line-height: 1.4;
      margin: 10px 0 0;
    }

    .metric-toggle {
      display: inline-flex;
      margin: 12px 0 8px;
    }

    .metric-toggle button {
      background: transparent;
      border: 1px solid var(--rule-dark);
      color: var(--muted);
      cursor: pointer;
      font-family: var(--sans);
      font-size: 0.75rem;
      padding: 8px 12px;
    }

    .metric-toggle button + button {
      border-left: 0;
    }

    .metric-toggle button.is-active {
      background: var(--ink);
      color: var(--paper);
    }

    .error-model-picker {
      align-items: start;
      border-bottom: 1px solid var(--rule);
      display: grid;
      gap: 10px 16px;
      grid-template-columns: 150px minmax(0, 1fr);
      margin-top: 10px;
      padding-bottom: 11px;
    }

    .error-model-picker__label {
      display: grid;
      gap: 2px;
      padding-top: 5px;
    }

    .error-model-picker__label strong {
      font-size: 0.7rem;
    }

    .error-model-picker__label span {
      color: var(--muted);
      font-size: 0.62rem;
      line-height: 1.35;
    }

    .error-model-picker__buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .error-model-button {
      background: var(--paper);
      border: 1px solid var(--rule-dark);
      border-radius: 999px;
      color: var(--muted);
      cursor: pointer;
      font: 650 0.62rem/1.1 var(--sans);
      padding: 7px 10px;
    }

    .error-model-button:hover,
    .error-model-button:focus-visible {
      border-color: var(--ink);
      color: var(--ink);
      outline: none;
    }

    .error-model-button[aria-pressed="true"] {
      background: color-mix(in srgb, var(--model-posttrained) 16%, var(--paper));
      border-color: var(--model-posttrained);
      color: var(--ink);
    }

    .error-model-button[data-family="ours"][aria-pressed="true"] {
      background: color-mix(in srgb, var(--model-ours) 17%, var(--paper));
      border-color: var(--model-ours);
    }

    .error-metric-definition {
      color: var(--muted);
      font-size: 0.7rem;
      line-height: 1.45;
      margin: 0 0 9px;
    }

    .error-metric-definition strong {
      color: var(--ink);
    }

    .error-rate-chart {
      border: 1px solid var(--rule-dark);
      min-height: 420px;
      padding: 9px 10px 3px;
    }

    .error-rate-svg {
      display: block;
      min-height: 400px;
      overflow: visible;
      width: 100%;
    }

    .error-grid {
      stroke: #d9d5cc;
      stroke-width: 0.8;
    }

    .error-human-band {
      fill: rgba(31, 30, 27, 0.09);
      pointer-events: none;
    }

    .error-line {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2.1;
      opacity: 0;
      transition:
        opacity 420ms ease,
        stroke-width 150ms ease;
    }

    .error-line--human {
      stroke: var(--ink);
      stroke-width: 3.2;
    }

    .error-point {
      cursor: crosshair;
      stroke: var(--paper);
      stroke-width: 1.4;
      opacity: 0;
      transition: opacity 420ms ease, r 120ms ease;
    }

    .error-rate-svg.is-ready .error-line,
    .error-rate-svg.is-ready .error-point {
      opacity: 1;
    }

    .error-point:hover,
    .error-point.is-active {
      r: 5.2;
    }

    .error-rate-chart.is-comparing .error-line,
    .error-rate-chart.is-comparing .error-point {
      opacity: 0.28;
    }

    .error-rate-chart.is-comparing .error-line.is-related,
    .error-rate-chart.is-comparing .error-point.is-related {
      opacity: 1;
    }

    .error-axis-label,
    .error-axis-title {
      fill: var(--muted);
      font-family: var(--mono);
      font-size: 12px;
    }

    .error-axis-title--measure {
      fill: var(--ink);
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 650;
    }

    .line-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 15px;
      margin: 7px 4px 3px;
    }

    .line-legend__sample {
      border-top: 3px solid;
      width: 18px;
    }

    .braid-controls {
      align-items: end;
      display: grid;
      gap: 14px;
      grid-template-columns: minmax(0, 1.5fr) minmax(180px, 0.75fr) minmax(180px, 0.75fr);
      margin-bottom: 14px;
    }

    .figure-select-label {
      display: grid;
      gap: 5px;
    }

    .figure-select-label > span {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.72rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .figure-select-label select {
      appearance: none;
      background:
        linear-gradient(45deg, transparent 50%, var(--ink) 50%) calc(100% - 14px) 50% / 5px 5px no-repeat,
        linear-gradient(135deg, var(--ink) 50%, transparent 50%) calc(100% - 9px) 50% / 5px 5px no-repeat,
        var(--paper);
      border: 1px solid var(--rule-dark);
      border-radius: 0;
      color: var(--ink);
      font-family: var(--sans);
      font-size: 0.72rem;
      padding: 9px 28px 9px 10px;
      width: 100%;
    }

    .braid-summary {
      display: grid;
      gap: 1px;
      grid-template-columns: repeat(4, 1fr);
      margin-bottom: 14px;
    }

    .braid-stat {
      background: #efede6;
      padding: 12px 13px;
    }

    .braid-stat__label {
      color: var(--muted);
      display: block;
      font-family: var(--mono);
      font-size: 0.72rem;
      letter-spacing: 0.06em;
      margin-bottom: 5px;
      text-transform: uppercase;
    }

    .braid-stat__value {
      font-family: var(--serif);
      font-size: 1.42rem;
      font-variant-numeric: tabular-nums;
    }

    .braid-figure-layout {
      display: grid;
      gap: 18px;
      grid-template-columns: minmax(0, 1fr) 310px;
    }

    .braid-chart {
      background: #f7f5ef;
      border: 1px solid var(--rule-dark);
      min-height: 330px;
      padding: 9px;
    }

    .braid-svg {
      display: block;
      min-height: 310px;
      overflow: visible;
      width: 100%;
    }

    .braid-baseline {
      stroke: var(--ink);
      stroke-width: 1;
    }

    .braid-lane-label {
      fill: var(--ink);
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 700;
    }

    .braid-turn-label {
      fill: var(--muted);
      font-family: var(--mono);
      font-size: 12px;
    }

    .braid-link {
      cursor: pointer;
      fill: none;
      opacity: 0.72;
      stroke: #b24739;
      stroke-linecap: round;
      transition: opacity 130ms ease, stroke-width 130ms ease;
    }

    .braid-link:hover {
      opacity: 1;
      stroke-width: 6px !important;
    }

    .braid-node {
      cursor: pointer;
      stroke: var(--paper);
      stroke-width: 2;
    }

    .braid-node--incorrect {
      fill: #b24739;
    }

    .braid-node--correct {
      fill: #16866b;
    }

    .braid-node--no_claim {
      fill: #a8a49b;
    }

    .braid-transcript {
      border-left: 1px solid var(--rule-dark);
      max-height: 420px;
      min-height: 330px;
      overflow-y: auto;
      padding-left: 16px;
    }

    .braid-transcript__turn {
      border-bottom: 1px solid var(--rule);
      font-family: var(--sans);
      font-size: 0.77rem;
      line-height: 1.5;
      padding: 10px 0;
    }

    .braid-transcript__turn strong {
      display: block;
      font-family: var(--mono);
      font-size: 0.72rem;
      letter-spacing: 0.06em;
      margin-bottom: 4px;
      text-transform: uppercase;
    }

    .braid-method-details {
      margin-top: 18px;
    }

    .braid-controls--population {
      align-items: end;
      grid-template-columns: minmax(0, 1fr);
    }

    .braid-story-step {
      align-items: start;
      border-top: 1px solid var(--rule-dark);
      display: grid;
      gap: 12px;
      grid-template-columns: 28px minmax(0, 1fr);
      margin-top: 22px;
      padding-top: 14px;
    }

    .braid-story-step > span,
    .braid-example-details__number {
      align-items: center;
      background: var(--teal-dark);
      color: var(--paper);
      display: inline-flex;
      font-family: var(--mono);
      font-size: 0.7rem;
      height: 24px;
      justify-content: center;
      width: 24px;
    }

    .braid-story-step strong,
    .braid-example-details summary strong {
      display: block;
      font-family: var(--serif);
      font-size: 1.12rem;
      margin-bottom: 3px;
    }

    .braid-story-step p {
      color: var(--muted);
      font-family: var(--sans);
      font-size: 0.78rem;
      line-height: 1.45;
      margin: 0;
      max-width: 760px;
    }

    .braid-example-details {
      border-top: 1px solid var(--rule-dark);
      margin-top: 22px;
      padding-top: 12px;
    }

    .braid-example-details > summary {
      align-items: start;
      cursor: pointer;
      display: grid;
      gap: 12px;
      grid-template-columns: 28px minmax(0, 1fr);
      list-style: none;
    }

    .braid-example-details > summary::-webkit-details-marker {
      display: none;
    }

    .braid-example-details > summary small {
      color: var(--muted);
      display: block;
      font-family: var(--sans);
      font-size: 0.74rem;
      line-height: 1.4;
    }

    .braid-example-details > summary:hover strong {
      color: var(--teal-dark);
    }

    .braid-population-layout {
      display: grid;
      gap: 18px;
      grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
      margin: 16px 0;
    }

    .braid-population-panel {
      border-top: 1px solid var(--rule-dark);
      min-width: 0;
      padding-top: 12px;
    }

    .braid-panel-head {
      display: flex;
      flex-direction: column;
      gap: 3px;
      margin-bottom: 10px;
    }

    .braid-panel-head strong {
      font-family: var(--serif);
      font-size: 1.02rem;
    }

    .braid-panel-head span {
      color: var(--muted);
      font-family: var(--sans);
      font-size: 0.72rem;
      line-height: 1.35;
    }

    .braid-distance-chart {
      min-height: 330px;
    }

    .braid-distance-axis {
      color: var(--muted);
      display: flex;
      font-family: var(--mono);
      font-size: 0.64rem;
      height: 30px;
      justify-content: space-between;
      padding-left: 146px;
      position: relative;
    }

    .braid-distance-axis span:nth-child(2) {
      color: var(--teal-dark);
      position: absolute;
      transform: translateX(-50%);
      white-space: nowrap;
    }

    .braid-distance-row {
      align-items: center;
      background: transparent;
      border: 0;
      border-bottom: 1px solid var(--rule);
      color: var(--ink);
      cursor: pointer;
      display: grid;
      font-family: var(--sans);
      font-size: 0.72rem;
      gap: 9px;
      grid-template-columns: 137px minmax(90px, 1fr) 42px;
      min-height: 34px;
      padding: 4px 0;
      text-align: left;
      width: 100%;
    }

    .braid-distance-row:hover,
    .braid-distance-row.is-selected {
      background: var(--teal-soft);
    }

    .braid-distance-row__model {
      line-height: 1.15;
    }

    .braid-distance-row__track {
      background: var(--rule);
      height: 10px;
      position: relative;
    }

    .braid-distance-row__floor {
      background: var(--teal-dark);
      bottom: -4px;
      position: absolute;
      top: -4px;
      width: 1px;
      z-index: 2;
    }

    .braid-distance-row__bar {
      background: var(--grey);
      display: block;
      height: 100%;
    }

    .braid-distance-row.is-selected .braid-distance-row__bar {
      background: var(--teal);
    }

    .braid-distance-row > strong {
      font-family: var(--mono);
      font-size: 0.7rem;
      text-align: right;
    }

    .braid-recurrence-chart {
      min-height: 322px;
    }

    .braid-recurrence-svg {
      display: block;
      min-height: 300px;
      width: 100%;
    }

    .braid-recurrence-line {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 3;
    }

    .braid-recurrence-line.is-human {
      stroke-width: 4;
    }

    .braid-recurrence-ci {
      opacity: 0.52;
      stroke-width: 5;
    }

    .braid-recurrence-point {
      cursor: pointer;
      stroke: var(--surface);
      stroke-width: 2;
    }

    .braid-recurrence-label,
    .braid-recurrence-count,
    .braid-recurrence-legend {
      fill: var(--muted);
      font-family: var(--mono);
      font-size: 11px;
    }

    .braid-recurrence-label {
      fill: var(--ink);
      font-weight: 700;
    }

    .braid-recurrence-count {
      font-size: 9.5px;
    }

    .braid-recurrence-detail {
      background: var(--teal-soft);
      display: grid;
      font-family: var(--sans);
      font-size: 0.72rem;
      gap: 3px;
      line-height: 1.35;
      min-height: 72px;
      padding: 8px 10px;
    }

    .braid-example-intro {
      align-items: baseline;
      border-top: 1px solid var(--rule-dark);
      display: flex;
      gap: 12px;
      justify-content: space-between;
      margin-top: 20px;
      padding-top: 14px;
    }

    .braid-explorer-head {
      align-items: flex-end;
      border-top: 1px solid var(--rule-dark);
      display: flex;
      gap: 18px;
      justify-content: space-between;
      margin-top: 20px;
      padding-top: 14px;
    }

    .braid-explorer-head > div:first-child {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .braid-explorer-head > div:first-child strong {
      font-family: var(--serif);
      font-size: 1.08rem;
    }

    .braid-explorer-head > div:first-child span {
      color: var(--muted);
      font-size: 0.75rem;
      line-height: 1.4;
    }

    .braid-view-controls {
      display: flex;
      flex: 0 0 auto;
    }

    .braid-population-view,
    .braid-individual-view {
      margin-top: 14px;
    }

    .braid-population-explainer {
      align-items: baseline;
      display: flex;
      gap: 14px;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .braid-population-explainer strong {
      font-family: var(--serif);
      font-size: 0.98rem;
    }

    .braid-population-explainer span {
      color: var(--muted);
      font-size: 0.72rem;
      line-height: 1.4;
      max-width: 650px;
    }

    .braid-population-chart {
      background: var(--surface);
      border: 1px solid var(--rule-dark);
      min-height: 490px;
      padding: 8px;
    }

    .braid-population-svg {
      display: block;
      height: auto;
      min-height: 470px;
      overflow: visible;
      width: 100%;
    }

    .braid-pair-title {
      fill: var(--ink);
      font-family: var(--serif);
      font-size: 16px;
      font-weight: 700;
    }

    .braid-pair-subtitle,
    .braid-pair-axis-label,
    .braid-pair-axis-title,
    .braid-pair-legend {
      fill: var(--muted);
      font-family: var(--mono);
      font-size: 10px;
    }

    .braid-pair-axis-title {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .braid-pair-cell {
      cursor: pointer;
      stroke: var(--surface);
      stroke-width: 0.7px;
      transition: fill-opacity 100ms ease, opacity 100ms ease, stroke 100ms ease;
    }

    .braid-pair-cell--human,
    .braid-pair-legend-cell {
      fill: var(--ink);
    }

    .braid-pair-cell--model {
      fill: var(--teal);
    }

    .braid-pair-cell--unavailable {
      cursor: default;
      fill: var(--paper);
      stroke: var(--surface);
    }

    .braid-error-strip-label {
      fill: var(--muted);
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.05em;
    }

    .braid-error-strip-baseline {
      stroke: var(--rule-dark);
      stroke-width: 1;
    }

    .braid-error-bar {
      cursor: pointer;
      transition: opacity 100ms ease, stroke 100ms ease;
    }

    .braid-error-bar--human {
      fill: var(--ink);
    }

    .braid-error-bar--model {
      fill: var(--teal);
    }

    .braid-error-bar.is-muted {
      opacity: 0.25;
    }

    .braid-error-bar.is-highlighted {
      opacity: 1;
      stroke: var(--gold);
      stroke-width: 2px;
    }

    .braid-pair-cell.is-muted {
      opacity: 0.3;
    }

    .braid-pair-cell.is-highlighted {
      fill-opacity: 1 !important;
      opacity: 1;
      stroke: var(--gold);
      stroke-width: 2px;
    }

    .braid-pair-cell:focus-visible {
      outline: none;
    }

    .braid-population-baseline {
      stroke: var(--rule-dark);
      stroke-width: 1;
    }

    .braid-population-lane-label {
      fill: var(--ink);
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 700;
    }

    .braid-population-link {
      fill: none;
      pointer-events: none;
      stroke-linecap: round;
      transition: opacity 100ms ease, stroke-width 100ms ease;
    }

    .braid-population-link--human {
      stroke: var(--ink);
    }

    .braid-population-link--model {
      stroke: var(--teal);
    }

    .braid-population-link.is-muted {
      opacity: 0.035 !important;
    }

    .braid-population-link.is-highlighted {
      opacity: 1 !important;
      stroke-width: 7px !important;
    }

    .braid-population-link-hit {
      fill: none;
      pointer-events: stroke;
      stroke: transparent;
      stroke-width: 12;
    }

    .braid-population-node {
      cursor: pointer;
      stroke: var(--surface);
      stroke-width: 2;
    }

    .braid-population-node--human {
      fill: var(--ink);
    }

    .braid-population-node--model {
      fill: var(--teal);
    }

    .braid-population-turn-label,
    .braid-population-axis-title {
      fill: var(--muted);
      font-family: var(--mono);
      font-size: 11px;
    }

    .braid-population-axis-title {
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .braid-population-detail {
      background: var(--teal-soft);
      display: grid;
      font-family: var(--sans);
      font-size: 0.75rem;
      gap: 3px;
      line-height: 1.4;
      margin-top: 8px;
      min-height: 70px;
      padding: 9px 11px;
    }

    .braid-example-intro strong {
      font-family: var(--serif);
      font-size: 1.02rem;
    }

    .braid-example-intro span {
      color: var(--muted);
      font-size: 0.74rem;
      line-height: 1.4;
      max-width: 610px;
    }

    .braid-example-controls {
      display: grid;
      gap: 12px;
      grid-template-columns: 1fr 1fr;
      margin: 10px 0 12px;
    }

    .braid-mini-legend {
      align-items: center;
      color: var(--muted);
      display: flex;
      flex-wrap: wrap;
      font-family: var(--sans);
      font-size: 0.7rem;
      gap: 8px 16px;
      margin: 10px 0 12px;
    }

    .braid-mini-legend span {
      align-items: center;
      display: inline-flex;
      gap: 6px;
    }

    .braid-mini-key {
      display: inline-block;
      flex: 0 0 auto;
      height: 8px;
      width: 8px;
    }

    .braid-mini-key--incorrect {
      background: var(--move-incorrect);
      border-radius: 50%;
    }

    .braid-mini-key--correct {
      background: var(--move-correct);
    }

    .braid-mini-key--no-claim {
      background: var(--blue);
      transform: rotate(45deg);
    }

    .braid-mini-key--link {
      border-top: 2px solid var(--move-incorrect);
      height: 1px;
      width: 18px;
    }

    .braid-mini-sections {
      display: grid;
      gap: 14px;
    }

    .braid-mini-section {
      display: grid;
      gap: 7px;
    }

    .braid-mini-section__head {
      align-items: baseline;
      border-bottom: 1px solid var(--rule);
      display: flex;
      gap: 9px;
      padding-bottom: 5px;
    }

    .braid-mini-section__head strong {
      font-family: var(--serif);
      font-size: 0.92rem;
    }

    .braid-mini-section__head span {
      color: var(--muted);
      font-family: var(--sans);
      font-size: 0.68rem;
    }

    .braid-mini-grid {
      display: grid;
      gap: 8px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .braid-mini-tile {
      appearance: none;
      background: var(--surface);
      border: 1px solid var(--rule);
      color: var(--ink);
      cursor: pointer;
      display: block;
      font: inherit;
      min-width: 0;
      padding: 8px 9px 5px;
      text-align: left;
      transition: background 110ms ease, border-color 110ms ease;
      width: 100%;
    }

    .braid-mini-tile:hover,
    .braid-mini-tile:focus-visible,
    .braid-mini-tile.is-selected {
      background: var(--teal-soft);
      border-color: var(--teal);
      outline: none;
    }

    .braid-mini-tile:focus-visible {
      box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--teal);
    }

    .braid-mini-tile__head {
      align-items: baseline;
      display: flex;
      gap: 7px;
      justify-content: space-between;
      white-space: nowrap;
    }

    .braid-mini-tile__head strong {
      font-family: var(--sans);
      font-size: 0.72rem;
    }

    .braid-mini-tile__head span {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.59rem;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .braid-mini-svg {
      display: block;
      height: auto;
      margin-top: 2px;
      overflow: visible;
      width: 100%;
    }

    .braid-mini-baseline {
      stroke: var(--rule-dark);
      stroke-width: 1;
    }

    .braid-mini-link {
      fill: none;
      pointer-events: stroke;
      stroke: var(--move-incorrect);
      stroke-linecap: round;
      stroke-width: 2;
    }

    .braid-mini-node {
      pointer-events: all;
      stroke: var(--surface);
      stroke-width: 1.2;
    }

    .braid-mini-node--correct {
      fill: var(--move-correct);
    }

    .braid-mini-node--incorrect {
      fill: var(--move-incorrect);
    }

    .braid-mini-node--no_claim {
      fill: var(--blue);
    }

    .braid-mini-node--unclassified,
    .braid-mini-node--other {
      fill: var(--grey);
    }

    .braid-mini-axis-label {
      fill: var(--muted);
      font-family: var(--mono);
      font-size: 8px;
    }

    .braid-mini-empty {
      color: var(--muted);
      font-family: var(--sans);
      font-size: 0.72rem;
      grid-column: 1 / -1;
      padding: 22px 8px;
      text-align: center;
    }

    .braid-grid-detail {
      background: var(--teal-soft);
      font-family: var(--sans);
      font-size: 0.73rem;
      line-height: 1.45;
      margin-top: 10px;
      min-height: 82px;
      padding: 9px 11px;
    }

    .braid-unpaired-label {
      fill: var(--muted);
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.05em;
    }

    .braid-example-problem {
      border-top: 1px solid var(--rule);
      font-family: var(--sans);
      font-size: 0.73rem;
      line-height: 1.45;
      padding: 9px 0;
    }

    .braid-example-problem strong {
      display: block;
      font-family: var(--mono);
      font-size: 0.66rem;
      letter-spacing: 0.04em;
      margin-bottom: 3px;
      text-transform: uppercase;
    }

    @media (prefers-reduced-motion: reduce) {
      .sankey-link,
      .error-line,
      .error-point,
      .braid-link,
      .river-area {
        transition: none;
      }
    }

    @media (min-width: 1440px) {
      .site-header__inner.shell,
      .footer__inner.shell {
        max-width: 1344px;
        padding-left: 0;
        padding-right: 0;
      }

      .hero > .shell {
        margin-left: calc((100vw - 1344px) / 2 + 224px);
        margin-right: 0;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
        width: 1120px;
      }

      .article-grid.shell {
        gap: 158px;
        grid-template-columns: 196px minmax(0, 860px);
        justify-content: start;
        max-width: 1344px;
        padding-left: 0;
        padding-right: 0;
      }

      .toc {
        top: 140px;
      }

      .full-bleed {
        margin-left: -130px;
        margin-right: -130px;
      }

      #move-distance-figure,
      #move-shares-figure,
      #next-turn-output-figure,
      #multiturn-sankey-figure {
        left: 50%;
      }
    }

    @media (max-width: 920px) {
      .article-grid {
        display: block;
      }

      .toc {
        display: none;
      }

      .full-bleed {
        margin-left: 0;
        margin-right: 0;
      }

      #move-distance-figure,
      #move-shares-figure,
      #next-turn-output-figure,
      #multiturn-sankey-figure {
        left: 50%;
      }

      .move-figure-layout {
        grid-template-columns: 1fr;
      }

      #move-distance-figure .move-figure-layout,
      #move-shares-figure .move-figure-layout,
      #multiturn-sankey-figure .move-figure-layout {
        grid-template-columns: 1fr;
      }

      .move-sankey-comparison__grid {
        grid-template-columns: 1fr;
      }

      .sankey-figure-layout,
      .error-figure-layout,
      .error-distribution-layout,
      .correctness-f1-layout,
      .misconception-match-layout,
      .braid-figure-layout,
      .multiturn-flow-layout {
        grid-template-columns: 1fr;
      }

      .error-distribution-detail,
      .correctness-f1-detail,
      .misconception-match-detail {
        border-left: 0;
        border-top: 1px solid var(--rule-dark);
        padding-left: 0;
        padding-top: 14px;
      }

      .braid-controls {
        grid-template-columns: 1fr 1fr;
      }

      .braid-controls .figure-tabs {
        grid-column: 1 / -1;
      }

      .braid-transcript {
        border-left: 0;
        border-top: 1px solid var(--rule-dark);
        min-height: 0;
        padding-left: 0;
        padding-top: 12px;
      }

      .move-tooltip-rail {
        border-left: 0;
        border-top: 1px solid var(--rule-dark);
        min-height: 0;
        padding-left: 0;
        padding-top: 14px;
      }

      #move-distance-figure .move-distance-sidebar,
      #multiturn-sankey-figure .move-distance-sidebar {
        border-left: 0;
        border-top: 1px solid var(--rule-dark);
        padding-left: 0;
        padding-top: 14px;
      }

      .move-tooltip-rail .chart-tooltip {
        position: static;
      }

      .aligned-move-grid {
        grid-template-columns: 1fr;
      }

      .session-persistence-panels,
      .session-persistence-group--ours .session-persistence-panels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
      }
    }

    @media (max-width: 720px) {
      .session-persistence-head,
      .session-length-subhead,
      .session-persistence-group__head {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
      }

      .session-persistence-panels,
      .session-persistence-group--ours .session-persistence-panels {
        grid-template-columns: 1fr;
      }

      .correctness-f1-definition {
        grid-template-columns: 1fr;
      }

      .correctness-f1-definition__range {
        white-space: normal;
      }

      .error-model-picker {
        grid-template-columns: 1fr;
      }

      .shell {
        padding-left: 20px;
        padding-right: 20px;
      }

      .hero {
        padding-bottom: 60px;
        padding-top: 58px;
      }

      .hero h1 {
        font-size: clamp(3rem, 15vw, 4.2rem);
      }

      .hero__meta {
        flex-direction: column;
        gap: 8px;
      }

      .article-grid {
        padding-bottom: 78px;
        padding-top: 60px;
      }

      .concept-pair {
        grid-template-columns: 1fr;
      }

      .concept + .concept {
        border-left: 1px solid var(--rule);
        border-top: 0;
      }

      .move-taxonomy-table__row {
        gap: 4px;
        grid-template-columns: 1fr;
        padding: 10px 8px;
      }

      .move-taxonomy-table__row--head {
        display: none;
      }

      .move-taxonomy-moves {
        margin-top: 5px;
      }

      .move-taxonomy-example__head {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
      }

      .move-taxonomy-example__turns {
        gap: 10px;
        grid-template-columns: 1fr;
      }

      .move-taxonomy-example__problem {
        padding: 0 0 10px;
      }

      .move-taxonomy-example__problem::after {
        bottom: 0;
        height: 1px;
        left: 0;
        right: 0;
        top: auto;
        width: auto;
      }

      .move-taxonomy-example__turn {
        gap: 4px;
        grid-template-columns: 1fr;
      }

      .dataset-figure {
        padding: 22px 14px 16px;
      }

      .figure-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
      }

      .distribution-matching-figure {
        padding: 22px 14px 18px;
      }

      .dm-axis-title {
        margin-left: 32px;
      }

      .dm-bars {
        gap: 1px;
      }

      .dm-bar-button {
        padding-left: 1px;
        padding-right: 1px;
      }

      .dm-bar-column {
        font-size: 0.49rem;
      }

      .dm-bar-well i {
        min-width: 7px;
      }

      .dm-plot-wrap {
        height: 245px;
      }

      .move-stage-controls {
        grid-template-columns: 1fr;
      }

      .next-turn-history-picker {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .next-turn-index-explorer {
        grid-template-columns: 1fr;
      }

      .next-turn-index-rail {
        align-items: flex-start;
        border-bottom: 1px solid var(--rule);
        border-right: 0;
        padding: 0 0 12px;
      }

      .next-turn-index-rail__hint {
        margin-bottom: 8px;
      }

      .next-turn-index-control {
        grid-template-columns: 1fr;
        grid-template-rows: 28px 20px;
        height: auto;
        width: 100%;
      }

      .next-turn-index-slider {
        cursor: pointer;
        direction: ltr;
        height: 28px;
        width: 100%;
        writing-mode: horizontal-tb;
      }

      .next-turn-index-slider::-webkit-slider-runnable-track {
        height: 3px;
        width: auto;
      }

      .next-turn-index-slider::-webkit-slider-thumb {
        margin-left: 0;
        margin-top: -7px;
      }

      .next-turn-index-slider::-moz-range-track,
      .next-turn-index-slider::-moz-range-progress {
        height: 3px;
        width: auto;
      }

      .next-turn-index-ticks {
        flex-direction: row;
        padding: 0 7px;
      }

      .next-turn-model-picker {
        grid-template-columns: 1fr;
      }

      .move-stage-value {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        min-width: 0;
      }

      .sankey-main-grid {
        grid-template-columns: 1fr;
      }

      .sankey-human-reference,
      .sankey-row {
        align-items: stretch;
        gap: 8px;
        grid-template-columns: 1fr;
      }

      .sankey-row__label {
        border-bottom: 1px solid var(--rule);
        border-right: 0;
        display: flex;
        justify-content: space-between;
        padding-bottom: 7px;
        padding-right: 0;
      }

      thead {
        display: none;
      }

      table,
      tbody {
        display: block;
      }

      tbody tr {
        background: var(--paper);
        border: 1px solid var(--rule);
        border-left: 3px solid var(--teal);
        display: block;
        margin-bottom: 12px;
        padding: 10px 12px;
      }

      tbody tr:first-child {
        border-top: 1px solid var(--rule);
      }

      td {
        background: transparent;
        border: 0;
        display: grid;
        gap: 12px;
        grid-template-columns: 95px minmax(0, 1fr);
        padding: 9px 0;
      }

      td:first-child,
      td:last-child {
        border-left: 0;
        border-right: 0;
        padding-left: 0;
      }

      td::before {
        color: var(--muted);
        content: attr(data-label);
        font-family: var(--mono);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        padding-top: 3px;
        text-transform: uppercase;
      }

      td > * {
        min-width: 0;
      }

      .analysis-item {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .figure-tab {
        font-size: 0.72rem;
        padding-left: 12px;
        padding-right: 12px;
      }

      .braid-controls,
      .braid-summary {
        grid-template-columns: 1fr;
      }

      .braid-population-layout,
      .braid-example-controls {
        grid-template-columns: 1fr;
      }

      .braid-mini-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .braid-example-intro,
      .braid-explorer-head,
      .braid-population-explainer,
      .session-persistence-head,
      .session-length-subhead {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
      }

      .braid-view-controls {
        flex-wrap: wrap;
      }

      .braid-controls .figure-tabs {
        grid-column: auto;
      }

      .footer__inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
      }
    }

    /* --- ability plane figure (Results V) --- */
    .fw-box { background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 22px 20px 14px; }
    .fw-sub { color: var(--muted); font-size: 0.82rem; margin: 0 0 14px; font-family: var(--sans); }
    .fw-panels { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
    .fw-panel { flex: 1 1 340px; max-width: 440px; }
    .fw-panel h4 { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: .04em;
                   text-transform: uppercase; color: var(--muted); margin: 0 0 2px 46px; }
    .fw-legend { display: flex; flex-wrap: wrap; gap: 12px 18px; margin: 12px 8px 4px 46px;
                 font-size: 0.75rem; align-items: center; font-family: var(--sans); }
    .fw-legend span { display: inline-flex; align-items: center; gap: 6px; }
    .fw-panel svg text, .fw-legend svg text { font-family: var(--sans); }
    .fw-panel .axis-label { font-size: 11px; fill: var(--muted); }
    .fw-panel .tick-label { font-size: 9.5px; fill: var(--rule-dark); }
    .fw-panel .pt-label { font-size: 10px; fill: var(--ink); }
    .fw-panel .region-label { font-size: 10.5px; fill: var(--teal); font-style: italic; }
    .fw-panel .diag-label { font-size: 10.5px; fill: var(--rule-dark); font-style: italic; }
    .fw-panel .real-label { font-size: 10.5px; fill: var(--teal); font-weight: 600; }
    #fw-tip { position: fixed; pointer-events: none; background: var(--ink); color: var(--surface);
              font-family: var(--mono); font-size: 11px; padding: 6px 9px; border-radius: 3px;
              opacity: 0; transition: opacity .12s; max-width: 240px; line-height: 1.45; z-index: 10; }
    .fw-transcripts { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 4px 4px; }
    .fw-card { flex: 1 1 380px; border: 1px solid var(--rule); border-radius: 4px;
               padding: 12px 14px 10px; background: var(--paper); }
    .fw-card h5 { font-family: var(--mono); font-size: 0.66rem; font-weight: 600; letter-spacing: .04em;
                  text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
    .fw-probe { font-size: 0.78rem; color: var(--muted); border-left: 2px solid var(--rule-dark);
                padding: 2px 0 2px 10px; margin: 0 0 10px; line-height: 1.5; font-family: var(--sans); }
    .fw-probe b { color: var(--ink); font-weight: 600; }
    .fw-msg { border-radius: 4px; padding: 7px 10px; margin: 6px 0; font-size: 0.8rem;
              line-height: 1.5; font-family: var(--sans); }
    .fw-msg .who { display: block; font-family: var(--mono); font-size: 0.6rem; font-weight: 600;
                   letter-spacing: .05em; text-transform: uppercase; margin-bottom: 2px; }
    .fw-real { background: var(--real-bg); } .fw-real .who { color: var(--teal); }
    .fw-ours { background: #f1e9e3; } .fw-ours .who { color: var(--model-ours); }
    .fw-frontier { background: var(--gpt-bg); } .fw-frontier .who { color: var(--coral); }
    .fw-msg .note { color: var(--muted); font-size: 0.72rem; font-style: italic; }
    .fw-panel .verdict-label { font-size: 11.5px; fill: var(--rule-dark); font-weight: 600;
                               letter-spacing: .03em; text-transform: uppercase; font-family: var(--mono); }
    .fw-panel .callout-label { font-size: 10px; fill: var(--muted); font-style: italic; }
    .fw-headline { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; margin: 0 0 3px; }

    /* Keep every editorial figure on the same horizontal grid as the article. */
    .article .dataset-figure,
    .article .result-figure,
    .article .fork-figure {
      box-sizing: border-box;
      margin-left: 0;
      margin-right: 0;
      max-width: 100%;
      width: 100%;
    }

    /* Give the opening scrollytelling figure room for a true annotation rail. */
    @media (min-width: 1440px) {
      .article figure.fork-figure--teaser {
        max-width: none;
        width: calc(100% + 130px);
      }
    }

    @media (min-width: 781px) and (max-width: 920px) {
      .article figure.fork-figure--teaser {
        margin-left: -28px;
        max-width: none;
        width: calc(100% + 56px);
      }
    }

    .article #move-distance-figure,
    .article #move-shares-figure,
    .article #next-turn-output-figure,
    .article #multiturn-sankey-figure {
      left: auto;
      margin-left: 0;
      margin-right: 0;
      max-width: 100%;
      transform: none;
      width: 100%;
    }

    .article figure img,
    .article figure canvas,
    .article figure svg {
      box-sizing: border-box;
      max-width: 100%;
    }

    .article figure img {
      height: auto;
    }

    /* Follow-up figures (Persimmon rerun). Builds on the distance-facet bars. */
    .followup-facet--wide {
      grid-column: 1 / -1;
    }
    .followup-row--ours .distance-facet__model {
      font-weight: 600;
    }
    .followup-row--ours .distance-facet__bar {
      background: var(--accent, #c2410c);
    }
    .followup-row--reliable .distance-facet__bar {
      background: #2f7d5b;
    }
    .distance-facet__track {
      position: relative;
    }
    .followup-ci {
      position: absolute;
      top: 50%;
      height: 2px;
      margin-top: -1px;
      background: rgba(0, 0, 0, 0.55);
      pointer-events: auto;
    }
    .followup-ci::before,
    .followup-ci::after {
      content: "";
      position: absolute;
      top: -4px;
      width: 1px;
      height: 10px;
      background: rgba(0, 0, 0, 0.55);
    }
    .followup-ci::before { left: 0; }
    .followup-ci::after { right: 0; }
    .followup-chance {
      position: absolute;
      top: -3px;
      bottom: -3px;
      width: 0;
      border-left: 1px dashed rgba(0, 0, 0, 0.5);
    }
    .followup-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem 1.5rem;
      align-items: center;
      margin: 0.5rem 0 1rem;
    }
    .followup-controls__group {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .followup-controls__label {
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      opacity: 0.7;
    }
    .followup-subhead {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      margin: 1.5rem 0 0.5rem;
      font-size: 0.9rem;
    }
    .followup-lines {
      width: 100%;
      height: auto;
      display: block;
    }
    .followup-lines__grid {
      stroke: rgba(0, 0, 0, 0.08);
    }
    .followup-lines__tick {
      font-size: 10px;
      fill: rgba(0, 0, 0, 0.6);
    }
    .followup-lines__axis {
      font-size: 10px;
      fill: rgba(0, 0, 0, 0.75);
      letter-spacing: 0.04em;
    }
    .followup-lines__path {
      stroke-linejoin: round;
      stroke-linecap: round;
    }
    .followup-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem 1.2rem;
      font-size: 0.82rem;
      margin-top: 0.4rem;
    }
    .followup-legend__item {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }
    .followup-legend__swatch {
      width: 14px;
      height: 3px;
      border-radius: 2px;
      display: inline-block;
    }
    .followup-shares {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
      font-size: 0.78rem;
      margin-top: 0.4rem;
    }
    .followup-shares th {
      text-align: left;
      font-weight: 600;
      padding: 0.3rem 0.4rem;
      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    }
    .followup-shares__ours {
      color: var(--accent, #c2410c);
    }
    .followup-shares td {
      padding: 0.25rem 0.4rem;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      vertical-align: middle;
    }
    .followup-shares__label {
      overflow-wrap: anywhere;
    }
    .followup-shares__cell {
      position: relative;
      white-space: nowrap;
      overflow: hidden;
    }
    .followup-shares__bar {
      display: inline-block;
      height: 0.7rem;
      background: rgba(0, 0, 0, 0.28);
      vertical-align: middle;
      border-radius: 2px;
    }
    .followup-shares__bar--human {
      background: #2f7d5b;
    }
    .followup-shares__value {
      margin-left: 0.35rem;
      font-variant-numeric: tabular-nums;
      opacity: 0.85;
    }
    .followup-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
      gap: 0.75rem;
      margin-bottom: 1rem;
    }
    .followup-stat {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      padding: 0.6rem 0.75rem;
      border: 1px solid rgba(0, 0, 0, 0.12);
      border-radius: 6px;
    }
    .followup-stat__label {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      opacity: 0.7;
    }
    .followup-stat__value {
      font-size: 0.95rem;
    }
    .followup-detail {
      font-size: 0.85rem;
      opacity: 0.85;
      margin-top: 0.75rem;
    }
    .changelog {
      border-left: 3px solid var(--accent, #c2410c);
      padding: 0.25rem 0 0.25rem 1rem;
      margin: 1rem 0 1.5rem;
    }
    .changelog li {
      margin: 0.35rem 0;
    }
    /* The July facet grid assumes a wide chart; the follow-up figures sit in the article column. */
    #fixed-horizon-chart .distance-facets,
    #description-test-chart .distance-facets,
    #curated-chart .distance-facets {
      min-width: 0;
      gap: 28px 30px;
    }
    #fixed-horizon-chart .distance-facets {
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
    .followup-subhead {
      flex-wrap: wrap;
    }
    .followup-subhead .figure-tabs {
      flex-wrap: wrap;
    }

    .cmp-panel { border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px 8px; background: var(--surface); }
    .cmp-grid-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
    .cmp-panel__title { font: 600 0.8rem/1.2 var(--sans); letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
    .cmp-bar { display: grid; grid-template-columns: 128px 1fr 44px; align-items: center; gap: 8px; padding: 3px 0; font-size: 0.85rem; }
    .cmp-bar--ours .cmp-bar__label { color: var(--model-ours); font-weight: 600; }
    .cmp-bar__track { position: relative; height: 14px; background: color-mix(in srgb, var(--rule) 55%, var(--surface)); border-radius: 3px; overflow: visible; }
    .cmp-bar__track::after { content: ""; position: absolute; right: 0; top: -3px; bottom: -3px; border-right: 2px dashed var(--rule-dark); }
    .cmp-bar__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; opacity: 0.85; }
    .cmp-bar__dot { position: absolute; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--ink); opacity: 0.55; }
    /* 95% bootstrap CI whisker: a bar with end caps, drawn over the fill. */
    .cmp-bar__ci { position: absolute; top: 50%; height: 0; border-top: 2px solid var(--ink); margin-top: -1px; opacity: 0.75; }
    .cmp-bar__ci::before, .cmp-bar__ci::after { content: ""; position: absolute; top: -5px; width: 2px; height: 10px; background: var(--ink); }
    .cmp-bar__ci::before { left: 0; } .cmp-bar__ci::after { right: 0; }
    .cmp-bar__pending { position: absolute; left: 8px; top: -1px; font-size: 0.72rem; color: var(--muted); }
    .cmp-bar__value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
    .cmp-lines { width: 100%; height: auto; display: block; }
    .cmp-grid { stroke: var(--rule); stroke-width: 1; } .cmp-grid--ceiling { stroke: var(--rule-dark); stroke-dasharray: 4 4; }
    .cmp-axis { font: 11px var(--sans); fill: var(--muted); } .cmp-legend { font: 600 12px var(--sans); }
    .cmp-heat-wrap { overflow-x: auto; }
    .cmp-heat { border-collapse: collapse; width: 100%; min-width: 560px; table-layout: fixed; font-variant-numeric: tabular-nums; font-size: 0.85rem; }
    .cmp-heat th, .cmp-heat td { padding: 6px 4px; border-bottom: 1px solid var(--rule); text-align: center; }
    .cmp-heat thead th:first-child, .cmp-heat tbody th { width: 118px; }
    .cmp-heat thead th { font: 600 0.62rem/1.2 var(--sans); text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); overflow-wrap: anywhere; }
    .cmp-heat tbody th { text-align: left; font-weight: 600; } .cmp-heat tbody th small { display: block; font-weight: 400; color: var(--muted); font-size: 0.72rem; }
    .cmp-heat__ref { border-left: 1px solid var(--rule-dark); } .cmp-heat td.cmp-heat__na { color: var(--muted); }
    .cmp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 720px) { .cmp-two { grid-template-columns: 1fr; } }
    .cmp-strips { display: grid; gap: 8px; } .cmp-legend-row { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.8rem; margin-top: 4px; }
    .cmp-bar__fill--inrun { background: transparent !important; border: 2px dashed; opacity: 0.9; box-sizing: border-box; }

/* Fixed-horizon move distances on the campaign corpora: one row per model, one bar per distance definition. */
.cmp-dist { display: grid; gap: 6px; font-size: 0.85rem; }
.cmp-dist-row { display: grid; grid-template-columns: 7.5rem repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center; }
.cmp-dist-row--head { color: var(--muted, #6a655e); font-size: 0.75rem; letter-spacing: 0.02em; text-transform: uppercase; }
.cmp-dist-model { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-dist-cell { position: relative; height: 1.3rem; background: var(--surface-2, rgba(0, 0, 0, 0.05)); border-radius: 3px; overflow: hidden; }
.cmp-dist-row--head .cmp-dist-cell { background: none; height: auto; }
.cmp-dist-fill { position: absolute; inset: 0 auto 0 0; opacity: 0.85; }
.cmp-dist-value { position: absolute; right: 6px; top: 0; line-height: 1.3rem; font-variant-numeric: tabular-nums; font-weight: 600; }
@media (max-width: 560px) { .cmp-dist-row { grid-template-columns: 5.5rem repeat(3, minmax(0, 1fr)); } }
.cmp-dist-row--head .cmp-dist-cell { white-space: normal; font-size: 0.68rem; line-height: 1.15; overflow: visible; }

/* Figure detail lines under the campaign figures read like figure notes, not body text. */
.result-figure .followup-detail { color: var(--muted); font-family: var(--sans); font-size: 0.78rem; line-height: 1.5; margin: 10px 0 0; }
/* Section-level paragraph sizing outranks .result-figure-note inside the campaign sections; keep figure notes small. */
.result-chapter .result-figure p.result-figure-note, .result-chapter .result-figure p.followup-detail { font-size: 0.78rem; line-height: 1.5; color: var(--muted); }

/* Combined moves figure: plain bar tracks (no 50% ceiling mark) and a pending note. */
.cmp-bar__track--plain::after { display: none; }
.cmp-bars { display: grid; gap: 2px; }
.cmp-pending { color: var(--muted); font-size: 0.9rem; margin: 12px 0; }

/* ---- Formatting to match persimmon.humansand.ai/blog: open figures with a rule on top, small sans labels, serif section titles. ---- */
.result-figure { background: transparent; border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: 22px 0 0; margin: 44px 0 48px; }
.figure-head { align-items: baseline; margin-bottom: 10px; }
.figure-label { color: var(--muted); font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.figure-title { font-family: var(--sans); font-size: 20px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }
.figure-context { font-family: var(--sans); font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--muted); margin: 0 0 18px; }
.result-kicker { color: var(--muted); font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.result-chapter h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; line-height: 1.18; }
.figure-tabs { border-bottom: 1px solid var(--rule); margin: 0 0 20px; }
.figure-tab { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); border-bottom: 2px solid transparent; }
.figure-tab.is-active, .figure-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--model-ours); }
.figure-takeaway { background: transparent; border: 0; border-left: 3px solid var(--model-ours); border-radius: 0; padding: 4px 0 4px 14px; }
.figure-takeaway strong { color: var(--muted); font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
/* Figure 2 bars read like the published hero metric: 20px bars, grey for the other models, Persimmon in terracotta, value after the bar. */
.cmp-panel { border: 0; border-radius: 0; padding: 0; background: transparent; }
.cmp-panel__title { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink); letter-spacing: 0; text-transform: none; margin-bottom: 8px; }
.cmp-grid-panels { gap: 28px 40px; }
.cmp-bar { grid-template-columns: 120px 1fr 48px; font-size: 13px; padding: 4px 0; }
.cmp-bar__label { color: var(--muted); } .cmp-bar--ours .cmp-bar__label { color: var(--ink); font-weight: 500; }
.cmp-bar__track { height: 20px; background: transparent; border-radius: 0; }
.cmp-bar__track::after { border-right: 1px solid var(--rule-dark); top: -2px; bottom: -2px; }
.cmp-bar__fill { border-radius: 0; opacity: 1; }
.cmp-bar__dot { background: var(--ink); opacity: 0.45; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
.cmp-bar__value { font-weight: 600; font-size: 13px; }

/* Tighter hand-off from the hero to the first section (the old layout left ~150px of empty paper). */
.hero { padding-bottom: 48px; }
.article-grid.shell { padding-top: 32px; }
#introduction > h2 { margin-top: 0; }

/* The parked rows use the hidden attribute; the grid display on table rows would otherwise override it. */
[hidden] { display: none !important; }

/* References: numbered, hanging indent, small type. */
.references-list { padding-left: 1.4em; font-size: 0.92rem; line-height: 1.5; }
.references-list li { margin-bottom: 8px; }
.editorial-todo-inline { color: var(--muted); font-style: italic; }

/* Motivation / affect sections: the example panel carries the category definition; strips reuse the error-strip layout with the flow palette. */
.lens-example__definition { font-family: var(--sans); font-size: 0.85rem; line-height: 1.5; color: var(--muted); margin: 6px 0 12px; }
.lens-strip--ours .error-distribution-strip__head strong { color: var(--model-ours); }
.lens-legend span { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.lens-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.lens-legend__caption { font-family: var(--sans); font-size: 0.75rem; color: var(--muted); margin-top: 10px; }
.lens-legend--groups { margin-top: 4px; }
.lens-taxonomy-table .move-taxonomy-move { --taxonomy-tone: var(--grey); }

/* Lens figures: one grid row per model — label, distance bar, value, and the category mix beside it. */
.lens-rows { display: grid; gap: 5px; }
.lens-row { display: grid; grid-template-columns: 118px minmax(0, 1fr) 40px minmax(0, 1.25fr); gap: 10px; align-items: center; font-family: var(--sans); font-size: 13px; }
.lens-row--head { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.lens-row__label { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lens-row--ours .lens-row__label { color: var(--ink); font-weight: 500; }
.lens-row__track { position: relative; display: block; height: 18px; border-right: 1px solid var(--rule-dark); }
.lens-row__track--empty { border-right-color: transparent; }
.lens-row__fill { position: absolute; left: 0; top: 0; bottom: 0; }
.lens-row__value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.lens-row__strip { display: flex; height: 18px; overflow: hidden; }
.lens-row--mixonly { grid-template-columns: 118px 64px minmax(0, 1fr); }
.lens-row__n { color: var(--muted); font-size: 11px; white-space: nowrap; text-align: right; }
.lens-reply-hit { cursor: crosshair; }
.lens-reply-chart path:hover { stroke-width: 3; opacity: 1; }
@media (max-width: 720px) { .lens-row { grid-template-columns: 90px minmax(0, 1fr) 36px; } .lens-row__strip, .lens-row__strip-head { grid-column: 1 / -1; } .lens-row--mixonly { grid-template-columns: 90px 56px minmax(0, 1fr); } .lens-row--mixonly .lens-row__strip { grid-column: auto; } }
.lens-legend--grouped { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--sans); font-size: 0.8rem; margin-top: 10px; }
.lens-legend__group { display: inline-flex; align-items: baseline; gap: 6px; color: var(--muted); }
.lens-legend__group b { color: var(--ink); font-weight: 500; }
.lens-legend__group i { align-self: center; }
/* Lens example panels have no problem column: one full-width transcript, with Table 1's text styling. */
.lens-taxonomy-example .move-taxonomy-example__turns { grid-template-columns: minmax(0, 1fr); }
.lens-taxonomy-example .move-taxonomy-example__context { max-height: 190px; }
.lens-taxonomy-example .move-taxonomy-example__text { color: var(--ink-soft); font-family: var(--sans); font-size: 13px; line-height: 1.4; margin: 0; white-space: pre-wrap; }
.lens-taxonomy-example .move-taxonomy-example__turn--target .move-taxonomy-example__text { color: var(--ink); font-weight: 500; }
/* Inside the collapsible taxonomy panels the article's paragraph style would otherwise win; keep the example text small. */
.article .method-details__body .lens-taxonomy-example .move-taxonomy-example__text { font-family: var(--sans); font-size: 13px; line-height: 1.4; margin: 0; }
.article .method-details__body .lens-taxonomy-example .lens-example__definition { font-family: var(--sans); font-size: 0.85rem; }
.lens-toggle { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 13px; color: var(--muted); margin: -8px 0 16px; cursor: pointer; }
.lens-toggle input { accent-color: var(--model-ours); }
.lens-row__strip .error-distribution-strip__segment { box-shadow: inset -1px 0 0 var(--surface, #fff); }
.lens-legend__cat { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; }
.lens-legend__cat i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.lens-legend__cat i { width: 14px; height: 12px; }
.lens-row__strip .error-distribution-strip__segment, .lens-legend__cat, .lens-legend__group { transition: opacity 0.25s ease, filter 0.25s ease; cursor: default; }
.lens-row__strip .error-distribution-strip__segment.is-dim { opacity: 0.45; }
.lens-row__strip .error-distribution-strip__segment.is-hl { filter: brightness(0.92); }
.lens-legend__cat.is-dim { opacity: 0.12; }
.lens-legend__cat.is-hl, .lens-legend__group.is-hl b { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.lens-legend__group.is-dim { opacity: 0.12; }
.lens-toggles { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: -8px 0 16px; }
.lens-toggles .lens-toggle { margin: 0; }
.lens-legend__members { color: var(--muted); margin-left: 6px; font-weight: 400; }

/* Learning figures share the campaign's typography, bar rows and colour tokens. */
.learning-figure .figure-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.learning-examples {
  overflow-x: auto;
}

.learning-examples-grid {
  min-width: 600px;
}

.learning-example-row {
  margin-top: 24px;
}

.learning-example-heading {
  display: grid;
  gap: 5px;
  margin: 0 0 10px;
  font: 13px/1.5 var(--sans);
}

.learning-example-heading strong {
  font-weight: 500;
}

.learning-example-heading span,
.learning-axis-label,
.learning-panel-meta {
  color: var(--muted);
  font: 12px/1.5 var(--sans);
}

.learning-model-panels {
  display: grid;
  grid-template-columns: repeat(var(--learning-model-columns, 3), minmax(0, 1fr));
  gap: 20px;
}

.learning-model-headings .cmp-panel__title {
  text-align: center;
}

.learning-model-panel--ours .cmp-panel__title {
  color: var(--model-ours);
}

.learning-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 0 0 18px;
  color: var(--muted);
  font: 12px/1.5 var(--sans);
}

.learning-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.learning-legend i {
  display: inline-block;
  width: 25px;
  border-top: 2px solid var(--model-posttrained);
}

.learning-legend .learning-legend-human {
  border-top: 2px dashed var(--ink);
}

.learning-axis-label {
  margin: 10px 0;
}

.learning-axis-label--x {
  text-align: center;
}

.learning-model-panels svg {
  overflow: visible;
}

.learning-metric-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px 40px;
}

.learning-panel-meta {
  margin: -3px 0 18px;
}

.learning-metric-panels .cmp-bar {
  grid-template-columns: minmax(90px, 120px) minmax(0, 1fr) 44px;
}

.learning-metric-panels .cmp-bar__label {
  line-height: 1.35;
}

.learning-scale {
  display: flex;
  justify-content: space-between;
  margin: 10px 52px 0 128px;
  padding-top: 6px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font: 11px/1.4 var(--sans);
  font-variant-numeric: tabular-nums;
}

.learning-source-link {
  white-space: nowrap;
}

@media (max-width: 480px) {
  .learning-metric-panels {
    grid-template-columns: minmax(0, 1fr);
  }

  .learning-metric-panels .cmp-bar {
    grid-template-columns: 100px minmax(0, 1fr) 44px;
  }

  .learning-scale {
    margin-left: 108px;
  }
}

/* Two main parts, with the learner evaluations nested within part 2. */
.story-part {
  border-top: 2px solid var(--ink);
  margin-top: 80px;
  padding-top: 24px;
  scroll-margin-top: 36px;
}
.article .story-part > h2,
.article .story-part > header > h2 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 16px 0 30px;
}
.story-part > .result-kicker,
.story-part > header > .result-kicker {
  color: var(--teal-dark);
  font-family: var(--mono);
}
.evaluation-group {
  border-top: 1px solid var(--rule-dark);
  margin-top: 64px;
  padding-top: 24px;
  scroll-margin-top: 36px;
}
.article .evaluation-group > header > h3 {
  font-size: clamp(1.75rem, 3vw, 2.3rem);
  letter-spacing: -0.015em;
  line-height: 1.18;
  margin: 18px 0 24px;
}
.evaluation-group > .result-chapter {
  border-top-color: var(--rule);
  margin-top: 48px;
  padding-top: 24px;
  scroll-margin-top: 36px;
}
.evaluation-group > header + .result-chapter {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
.article .evaluation-group > .result-chapter > h4 {
  color: var(--ink);
  font: 500 1.25rem/1.35 var(--sans);
  letter-spacing: normal;
  margin: 20px 0;
  text-transform: none;
}
.toc .toc-subsections {
  margin-left: 16px;
}
.toc .toc-subsections a {
  font-size: 0.78rem;
  grid-template-columns: 30px 1fr;
  padding: 9px 0;
}
.toc .toc-evaluations {
  margin-left: 30px;
}
.toc .toc-evaluations a {
  font-size: 0.72rem;
  grid-template-columns: 1fr;
  padding: 7px 0;
}
.toc .toc-unnumbered a {
  grid-template-columns: 1fr;
}

/* Authoring hierarchy and notes use type and color without adding callout boxes. */
.article h3.teacher-subheading {
  border-top: 1px solid var(--rule-dark);
  font-size: clamp(1.75rem, 3vw, 2.3rem);
  line-height: 1.2;
  margin: 48px 0 24px;
  padding-top: 24px;
}
.article h4.teacher-subheading {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 32px 0 16px;
}
.article .editorial-todo,
.article .editorial-todo-inline {
  color: #b3342b;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}
.article p.editorial-todo {
  background: none;
  border: 0;
  font-size: 1rem;
  line-height: 1.6;
  margin: 20px 0;
  padding: 0;
}
.article .editorial-question {
  color: #245da8;
  font-weight: 500;
}
.student-intro-draft:empty {
  display: none;
}

/* Let the learner conversation sit directly on the article background. */
.student-results .fork-figure--teaser .fork-card {
  background: transparent;
  border: 0;
  padding: 0;
}
.student-results .fork-figure--teaser .who-t,
.student-results .fork-figure--teaser .fork-response-index,
.student-results .fork-figure--teaser .node,
.student-results .fork-figure--teaser .gnode {
  background: var(--paper);
}

/* TutorMoments follows the blog's small-multiple horizontal bar figures. */
.tutor-results .figure-head {
  flex-wrap: wrap;
  gap: 8px 16px;
}
.tutor-results-placeholder {
  color: #b3342b;
  font: 500 12px/1.4 var(--sans);
}
.tutor-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 24px 20px;
}
.tutor-chart-panel {
  --tutor-label-width: 134px;
  --tutor-score-width: 38px;
  --tutor-column-gap: 10px;
  min-width: 0;
  padding: 16px 12px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--sans);
}
.tutor-chart-panel--overall {
  border-color: color-mix(in srgb, var(--model-ours) 28%, transparent);
  background: color-mix(in srgb, var(--model-ours) 6%, transparent);
}
.tutor-chart-title {
  margin: 0 0 16px;
  color: var(--ink);
  font: 500 15px/1.35 var(--sans);
  letter-spacing: normal;
  text-transform: none;
}
.tutor-chart-row {
  display: grid;
  grid-template-columns: var(--tutor-label-width) minmax(0, 1fr) var(--tutor-score-width);
  column-gap: var(--tutor-column-gap);
  align-items: center;
  min-height: 23px;
  font: 400 12px/1.35 var(--sans);
  font-variant-numeric: tabular-nums;
}
.tutor-chart-model {
  color: var(--muted);
  text-align: right;
}
.tutor-chart-track {
  display: flex;
  align-items: center;
  align-self: stretch;
  min-width: 0;
  border-left: 1px solid var(--rule-dark);
  border-right: 1px solid var(--rule);
  background: linear-gradient(to right, transparent calc(50% - 0.5px), var(--rule) calc(50% - 0.5px), var(--rule) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.tutor-chart-bar {
  display: block;
  height: 13px;
  background: #8b917d;
}
.tutor-chart-score {
  color: var(--ink);
  text-align: right;
}
.tutor-chart-row--ours .tutor-chart-bar {
  background: var(--model-ours);
}
.tutor-chart-row--ours .tutor-chart-model,
.tutor-chart-row--ours .tutor-chart-score {
  color: var(--teal-dark);
  font-weight: 700;
}
.tutor-chart-axis {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--rule-dark);
  margin-left: calc(var(--tutor-label-width) + var(--tutor-column-gap));
  margin-right: calc(var(--tutor-score-width) + var(--tutor-column-gap));
  padding-top: 6px;
  color: var(--muted);
  font: 400 11px/1.3 var(--sans);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
  .tutor-chart-panel {
    --tutor-label-width: 120px;
    --tutor-column-gap: 7px;
    padding-inline: 8px;
  }
  .tutor-chart-row { font-size: 11px; }
}

/* Editorial layout and light/dark palettes from the published Persimmon blog. */
:root {
  color-scheme: light;
  --paper: #f3f2ed;
  --surface: #faf9f6;
  --ink: #3b3d37;
  --ink-soft: #575a51;
  --muted: #6b6e65;
  --rule: #dfe1d6;
  --rule-dark: #b8bfaa;
  --accent: #68774d;
  --teal: #68774d;
  --teal-dark: #5f4a3f;
  --teal-soft: #ece5dc;
  --model-ours: #ab806d;
  --chat-persimmon: #a96145;
  --model-posttrained: #8b917d;
  --hero-bg: #e8edde;
  --hero-ink: #35432e;
  --hero-muted: #5f6855;
  --hero-line: #35432e38;
  --card-shadow: 0 1px 2px #2f38260a, 0 22px 44px -30px #2f38263d;
  --chart-grey-1: #55554f;
  --chart-grey-2: #6b6b66;
  --chart-grey-3: #8c8c87;
}
html[data-site-theme="dark"] {
  color-scheme: dark;
  --paper: #17171b;
  --surface: #222228;
  --ink: #eeeae4;
  --ink-soft: #d1cdd4;
  --muted: #b5b1bb;
  --rule: #41404a;
  --rule-dark: #63626b;
  --accent: #b9c9a3;
  --teal: #b9c9a3;
  --teal-dark: #dfad91;
  --teal-soft: #392e29;
  --model-ours: #b5856c;
  --chat-persimmon: #e6b294;
  --model-posttrained: #8b917d;
  --hero-bg: #242c25;
  --hero-ink: #eef0e8;
  --hero-muted: #bdc5b7;
  --hero-line: #c5cfb94d;
  --card-shadow: 0 1px 2px #0002, 0 22px 44px -30px #0008;
  --chart-grey-1: #99998e;
  --chart-grey-2: #a7a79b;
  --chart-grey-3: #b5b5a8;
}
html { scroll-padding-top: 112px; }
body { -webkit-font-smoothing: antialiased; line-height: 1.55; }
::selection { background: color-mix(in srgb, var(--accent) 35%, var(--paper)); }
a { text-underline-offset: .2em; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.skip-link { position: fixed; top: 12px; left: 12px; transform: translateY(-180%); z-index: 100; padding: 10px 18px; background: var(--ink); color: var(--paper); }
.skip-link:focus { transform: none; }
.site-header { position: sticky; top: 0; z-index: 60; border: 0; background: color-mix(in srgb, var(--paper) 84%, transparent); backdrop-filter: blur(14px) saturate(1.2); }
.site-header__inner.shell { width: 100%; max-width: 1168px; min-height: 84px; height: auto; padding: 20px 24px; gap: 24px; }
.site-brand { display: inline-flex; flex-shrink: 0; align-items: center; min-height: 44px; }
.site-logo { display: block; width: 116px; height: auto; }
html[data-site-theme="dark"] .site-logo { filter: invert(1) grayscale(1); }
.site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 26px; font: 400 14px/1.4 var(--sans); }
.site-nav a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink); text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }
.theme-toggle { position: relative; width: 28px; height: 32px; margin-left: -16px; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; border-radius: 50%; }
.theme-toggle::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 11px; height: 11px; border: 1.5px solid currentColor; border-radius: 50%; opacity: .7; }
.theme-toggle[aria-pressed="true"]::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.reading-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: left; background: var(--accent); }
/* Centered article header, matching the humans& NVFP4 post. */
.hero { border: 0; border-bottom: 1px solid var(--rule); width: min(1120px, calc(100% - 64px)); margin: 0 auto; padding: 64px 0 42px; text-align: center; }
.hero::after { display: none; }
.hero > .shell { display: block; width: 100%; max-width: none; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.hero__copy { max-width: none; margin: 0; }
.hero h1 { color: var(--ink); font: 400 clamp(40px, 4.6vw, 68px)/1.02 var(--serif); letter-spacing: normal; margin: 0 auto; max-width: 980px; font-variation-settings: 'opsz' 72; text-wrap: balance; }
.hero h1 .title-accent { color: var(--accent); }
.hero__dek { max-width: 920px; margin: 20px auto 0; color: var(--ink); font: 400 clamp(22px, 2vw, 28px)/1.35 var(--serif); text-wrap: balance; }
.hero__meta { display: block; color: var(--ink); margin: 26px 0 0; font: 400 16.8px/1.65 var(--serif); letter-spacing: normal; text-transform: none; }
.article-grid.shell { width: min(1280px, calc(100% - 64px)); max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 760px) minmax(0, 1fr); column-gap: 0; padding: 56px 0 96px; }
.article { grid-column: 2; width: 100%; min-width: 0; }
.toc { grid-column: 1; grid-row: 1; width: min(196px, calc(100% - 32px)); min-width: 0; top: 108px; max-height: calc(100dvh - 132px); }
.toc__label { border: 0; padding-bottom: 12px; color: var(--muted); font: 400 11px/1.4 var(--sans); letter-spacing: .07em; }
.toc__links > ol { border-left: 1px solid var(--rule); }
.toc a, .toc .toc-evaluations a { display: block; border: 0; margin-left: -1px; padding: 7px 8px 7px 16px; color: var(--muted); font: 400 13px/1.4 var(--sans); text-transform: none; overflow-wrap: anywhere; }
.toc .toc-evaluations { margin-left: 12px; }
.toc .toc-evaluations a { font-size: 12px; }
.toc a[aria-current="location"] { color: var(--ink); font-weight: 500; box-shadow: inset 2px 0 0 var(--accent); }
.toc a[aria-current="location"]::after { display: none; }
.toc__number, .toc-viz { display: none !important; }
.toc a:hover { color: var(--ink); }
.article section { scroll-margin-top: 112px; }
.article section > p:not([class]), .article section > p.student-intro-draft { font: 400 20px/1.62 var(--serif); letter-spacing: -.004em; margin: 0 0 20px; max-width: none; text-wrap: pretty; }
.article #introduction > p:first-of-type { font-size: 25px; line-height: 1.5; letter-spacing: -.01em; }
#introduction > h2 { display: none; }
.article .story-part, .article .evaluation-group, .article > .result-chapter { border: 0; margin-top: 80px; padding-top: 0; }
.article .story-part > h2, .article .story-part > header > h2, .article > .result-chapter > h2 { font: 400 clamp(42px, 4.4vw, 56px)/1.05 var(--serif); letter-spacing: -.03em; margin: 0 0 28px; text-wrap: balance; }
.story-part > .result-kicker, .story-part > header > .result-kicker { display: none; }
.article .evaluation-group > header > h3, .article h3.teacher-subheading { border: 0; font: 400 31px/1.2 var(--serif); letter-spacing: -.018em; padding: 0; margin: 64px 0 20px; text-wrap: balance; }
.article .evaluation-group { margin-top: 64px; }
.article .evaluation-group > header > h3 { margin-top: 0; }
.article .benchmark-subsection__title, .article .result-chapter > .benchmark-subsection__title, .article h4.teacher-subheading { display: block; font: 500 23px/1.3 var(--serif); color: var(--ink); letter-spacing: -.01em; text-transform: none; margin: 36px 0 16px; }
.article .benchmark-subsection__title::after { display: none; }
.article .result-figure { background: var(--surface); border: 1px solid var(--rule); border-radius: 20px; box-shadow: var(--card-shadow); padding: 28px; margin: 44px -28px 48px; width: calc(100% + 56px); max-width: none; }
.article .result-figure .figure-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 18px; }
.figure-label { color: var(--muted); font: 400 12px/1.4 var(--sans); letter-spacing: 0; text-transform: none; }
.figure-title { color: var(--ink); font: 500 22px/1.3 var(--sans); letter-spacing: -.015em; }
.figure-context { color: var(--muted); font: 400 12px/1.6 var(--sans); margin-bottom: 22px; }
.article .result-figure p, .article .result-chapter .result-figure p { font: 400 13px/1.55 var(--sans); color: var(--muted); }
.article .result-figure .result-figure-note { margin: 20px 0 0; }
.figure-tabs { border-color: var(--rule); gap: 4px; }
.figure-tab { font: 500 13px/1.35 var(--sans); padding: 10px 12px; letter-spacing: 0; text-transform: none; }
.figure-tab.is-active, .figure-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tutor-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
.tutor-chart-panel { --tutor-label-width: 112px; --tutor-score-width: 34px; --tutor-column-gap: 8px; padding: 16px 10px; border-radius: 12px; }
.tutor-chart-row { font-size: 11px; min-height: 25px; }
.tutor-chart-title { font-size: 15px; }
.tutor-chart-panel--overall { border-color: color-mix(in srgb, var(--model-ours) 28%, transparent); background: color-mix(in srgb, var(--model-ours) 7%, transparent); }
.tutor-chart-row--ours .tutor-chart-model, .tutor-chart-row--ours .tutor-chart-score { color: var(--teal-dark); }
.cmp-bar--ours .cmp-bar__label, .lens-row--ours .lens-row__label { color: var(--teal-dark); font-weight: 600; }
.cmp-grid-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.cmp-grid-panels .cmp-bar { grid-template-columns: 112px minmax(0, 1fr) 40px; gap: 6px; font-size: 11px; }
.cmp-grid-panels .cmp-bar__value { font-size: 11px; }
.cmp-grid-panels .cmp-bar__track { height: 17px; }
.move-taxonomy-table__caption { font: 400 12px/1.5 var(--sans); letter-spacing: 0; text-transform: none; }
.move-taxonomy-table { border-color: var(--rule); }
.move-taxonomy-table__row { border-color: var(--rule); }
.move-taxonomy-move { color: var(--ink); }
.article .move-taxonomy-note { font: 400 13px/1.5 var(--sans); }
.method-details { background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; margin: 28px 0 40px; box-shadow: none; }
.method-details summary { padding: 20px; }
.method-details summary:hover { background: transparent; }
.method-details__title { color: var(--ink); font: 500 17px/1.4 var(--sans); }
.method-details__eyebrow { color: var(--muted); font: 400 11px/1.4 var(--sans); }
.method-details__body { padding: 0 20px 24px; }
.article .method-details__body p { font: 400 19px/1.6 var(--serif); }
.references-list { font: 400 16px/1.55 var(--serif); }
.references-list li { margin-bottom: 14px; }
.footer { border-top: 1px solid var(--rule); background: transparent; }
.footer__inner { max-width: 1168px; padding: 32px 24px; }
.footer__title, .footer__note { color: var(--muted); font: 400 13px/1.5 var(--sans); letter-spacing: 0; text-transform: none; }
.prose-editor-toolbar { background: var(--surface); border-color: var(--rule); border-radius: 12px; box-shadow: 0 8px 24px #0002; }
.prose-editor-toolbar button { font: 500 11px/1.3 var(--sans); letter-spacing: 0; text-transform: none; border-radius: 6px; }
.prose-editor-toolbar__status { font: 400 11px/1.35 var(--sans); }
html[data-site-theme="dark"] body.blog-edit-mode .blog-editable:focus { background: var(--surface); color: var(--ink); }
html[data-site-theme="dark"] .move-taxonomy-example { background: var(--surface); }
@media (max-width: 1119px) {
  .hero { width: calc(100% - 48px); }
  .article-grid.shell { display: block; width: min(760px, calc(100% - 96px)); padding-top: 40px; }
  .toc { display: block; position: static; width: 100%; max-height: none; margin: 0 0 36px; padding: 0 0 24px; border-bottom: 1px solid var(--rule); }
  .toc__links { overflow: visible; }
  .toc__links > ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .toc .toc-evaluations { display: none; }
  .article .result-figure { width: 100%; margin-inline: 0; }
}
@media (max-width: 700px) {
  .site-header__inner.shell { min-height: 76px; padding: 16px 24px; gap: 18px; }
  .site-logo { width: 92px; }
  .site-nav { font-size: 12px; column-gap: 14px; row-gap: 0; }
  .site-nav a { min-height: 22px; }
  .theme-toggle { margin-left: 0; }
  .hero { width: calc(100% - 40px); padding: 44px 0 32px; }
  .hero h1 { font-size: clamp(40px, 9vw, 54px); }
  .hero__dek { font-size: 22px; }
  .article-grid.shell { width: calc(100% - 40px); padding-top: 32px; }
  .article section > p:not([class]) { font-size: 20px; }
  .article #introduction > p:first-of-type { font-size: 23px; }
  .article .story-part, .article > .result-chapter { margin-top: 60px; }
  .article .story-part > h2, .article .story-part > header > h2, .article > .result-chapter > h2 { font-size: 38px; }
  .article .evaluation-group > header > h3, .article h3.teacher-subheading { font-size: 29px; }
  .article .result-figure { padding: 20px 16px; margin-block: 32px 40px; }
  .figure-title { font-size: 20px; }
  .tutor-chart-grid, .cmp-grid-panels { grid-template-columns: minmax(0, 1fr); }
  .tutor-chart-panel { --tutor-label-width: 118px; padding: 14px 8px; }
  .cmp-grid-panels .cmp-bar { font-size: 12px; }
  .footer__inner { flex-wrap: wrap; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  html[data-site-theme] { color-scheme: light; --paper: white; --surface: white; --ink: #24261f; --muted: #5f6259; --rule: #ddd; --rule-dark: #aaa; --hero-bg: #e8edde; --hero-ink: #35432e; --hero-muted: #5f6855; --teal-dark: #5f4a3f; }
  .site-header, .toc, .prose-editor-toolbar { display: none; }
  .hero, .article-grid.shell { width: 100%; display: block; }
  .hero > .shell { display: block; min-height: 0; padding: 24px; }
  .article .result-figure { width: 100%; margin-inline: 0; box-shadow: none; break-inside: avoid; }
}


.article .sample-chats { padding:20px 24px; box-shadow:none; }
.sample-chat-tabs { display:flex; flex-wrap:wrap; gap:8px 24px; margin-bottom:16px; border-bottom:1px solid var(--rule); }
.sample-chat-tabs button { border:0; border-bottom:2px solid transparent; padding:10px 0 13px; background:transparent; color:var(--muted); font:500 13px/1.4 var(--sans); cursor:pointer; }
.sample-chat-tabs button[aria-selected="true"] { border-bottom-color:var(--accent); color:var(--ink); }
.article .sample-chat-title { font:400 34px/1.2 var(--serif); margin:0 0 10px; text-wrap:balance; }
.sample-chat-description { font:400 12px/1.6 var(--sans); color:var(--muted); margin:0 0 34px; }
.sample-chat-transcript { height:420px; max-height:60dvh; overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:thin; scrollbar-color:var(--rule) transparent; margin:0; padding:0 12px 4px 0; border:0; background:transparent; }
.sample-chat-message { margin:0 0 16px; }
.sample-chat-message:last-child { margin-bottom:0; }
.sample-chat-message > span { display:block; font:500 12px/1.4 var(--sans); color:var(--muted); margin:0 0 5px 2px; }
.article .result-figure .sample-chat-message > p { display:inline-block; max-width:94%; margin:0; padding:10px 13px; border-radius:16px 16px 16px 4px; background:color-mix(in srgb,var(--ink) 5%,var(--surface)); color:var(--ink); font:400 14px/1.5 var(--sans); }
.sample-chat-message--tutor { margin-left:0; }
.sample-chat-message--tutor > span { color:var(--accent); }
.sample-chat-message--tutor > p { background:color-mix(in srgb,var(--accent) 10%,var(--surface)); }
.sample-chat-more { border-top:1px solid var(--rule); margin-top:30px; padding-top:16px; }
.sample-chat-more > summary { color:var(--accent); cursor:pointer; font:500 13px/1.5 var(--sans); padding:0 0 6px; }
.sample-chat-more[open] > summary { margin-bottom:22px; }
.sample-chats > figcaption { margin-top:24px; font-size:11px; }
@media(max-width:700px) { .article .sample-chats { padding:16px; } .sample-chat-tabs { gap:8px 18px; } .sample-chat-message > p { max-width:100%; } .sample-chat-message--tutor { margin-left:0; } }

@media print { .sample-chat-transcript { height:auto; max-height:none; overflow:visible; } }

.sample-chat-message > p { white-space:pre-wrap; }

.sample-chat-message:not(.sample-chat-message--tutor) > span { color:var(--chat-persimmon); }

.tutor-ablation { --ablation-yellow:#aa7358; --ablation-blue:#68774d; }
html[data-site-theme="dark"] .tutor-ablation { --ablation-yellow:#dfad91; --ablation-blue:#b9c9a3; }
.ablation-tabs { display:flex; gap:22px; border-bottom:1px solid var(--rule); margin:0 0 18px; }
.ablation-tabs button { font:500 13px/1.4 var(--sans); color:var(--muted); background:none; border:0; border-bottom:2px solid transparent; padding:8px 0 12px; cursor:pointer; }
.ablation-tabs button[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--accent); }
.ablation-legend { display:flex; flex-wrap:wrap; gap:8px 24px; margin:0 0 16px; font:400 12px/1.5 var(--sans); color:var(--ink); }
.ablation-legend span { display:flex; align-items:center; gap:8px; }
.ablation-swatch { width:22px; height:3px; display:inline-block; }
.ablation-swatch--persimmon { background:var(--ablation-yellow); }
.ablation-swatch--glm { background:var(--ablation-blue); }
.tutor-ablation svg { display:block; width:100%; height:auto; overflow:visible; }
.ablation-grid { stroke:var(--rule); stroke-width:1; }
.ablation-tick { fill:var(--muted); font:12px var(--sans); }
.ablation-axis { fill:var(--muted); font:13px var(--sans); }
.ablation-line { fill:none; stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
.ablation-line--persimmon { stroke:var(--ablation-yellow); }
.ablation-line--glm { stroke:var(--ablation-blue); }
.ablation-end { font:600 12px var(--sans); }
.ablation-end--persimmon { fill:var(--ablation-yellow); }
.ablation-end--glm { fill:var(--ablation-blue); }
.tutor-ablation [hidden] { display:none; }

.ablation-point { stroke:var(--surface); stroke-width:1.4; }
.ablation-point--persimmon { fill:var(--ablation-yellow); }
.ablation-point--glm { fill:var(--ablation-blue); }

/* Compact, consistent figure captions. */
.article .result-figure .figure-label { font:400 11px/1.45 var(--sans); }
.article .result-figure .figure-title { font:500 16px/1.4 var(--sans); }
.article .result-figure .result-figure-note,
.article .result-chapter .result-figure .result-figure-note,
.article .result-figure figcaption { font:400 12px/1.5 var(--sans); color:var(--muted); }

/* Inline links match the understated humans& blog treatment. */
.article a[href], .article a[href]:visited {
  color:inherit;
  text-decoration-line:underline;
  text-decoration-style:solid;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb, #8c769e 60%, transparent);
  text-underline-offset:.18em;
  text-decoration-skip-ink:auto;
  border-bottom:0;
  transition:text-decoration-color .15s ease;
}
.article a[href]:hover { color:inherit; text-decoration-color:currentColor; }

.tutor-dimension-tabs { display:flex; flex-wrap:wrap; gap:8px 22px; border-bottom:1px solid var(--rule); margin-bottom:18px; }
.tutor-dimension-tabs button { background:none; border:0; border-bottom:2px solid transparent; padding:8px 0 12px; color:var(--muted); font:500 13px/1.4 var(--sans); cursor:pointer; }
.tutor-dimension-tabs button[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--accent); }
#tutormoments-teacher-results .tutor-chart-grid { display:block; }
#tutormoments-teacher-results .tutor-chart-panel { --tutor-label-width:155px; --tutor-score-width:42px; --tutor-column-gap:12px; padding:16px 10px; border:0; background:transparent; }
#tutormoments-teacher-results .tutor-chart-panel[hidden] { display:none; }
#tutormoments-teacher-results .tutor-chart-row { font-size:13px; min-height:32px; }
#tutormoments-teacher-results .tutor-chart-title { display:none; }
@media(max-width:700px) { #tutormoments-teacher-results .tutor-chart-panel { --tutor-label-width:118px; --tutor-score-width:34px; --tutor-column-gap:8px; padding:12px 0; } #tutormoments-teacher-results .tutor-chart-row { font-size:11px; } .tutor-dimension-tabs { gap:4px 16px; } }

/* Pair the learning metrics in one figure. */
.learning-metrics-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.learning-metric-column { min-width: 0; }
.learning-metric-column h4 { margin: 0 0 12px; font: 500 18px/1.4 var(--sans); }
.learning-metric-column .figure-context { min-height: 42px; font-size: 12px; }
.learning-metric-column .learning-metric-panels { grid-template-columns: minmax(0, 1fr); }
.learning-metric-column .cmp-bar { grid-template-columns: 88px minmax(0, 1fr) 42px; gap: 8px; font-size: 12px; }
.learning-metric-column .learning-scale { margin-left: 96px; margin-right: 50px; }
@media (max-width: 700px) { .learning-metrics-comparison { grid-template-columns: minmax(0, 1fr); gap: 32px; } .learning-metric-column .figure-context { min-height: 0; } }
#tutormoments-teacher-results .tutor-chart-row--pending .tutor-chart-score { color: var(--muted); font-style: italic; }
#tutormoments-teacher-results .tutor-prompt-tabs { margin-bottom: 4px; }
/* Figure 1 lists every leaderboard model; show about ten rows and scroll the rest inside the panel. */
#tutormoments-teacher-results .tutor-chart-rows { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 6px; }
/* Figures 1 and 2: reasoning settings under each model name (as on the TutorMoments site), and role colours. */
.tutor-chart-model { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
.tutor-chart-reasoning { color: var(--muted); font-size: 10.5px; font-weight: 400; letter-spacing: 0; }
#tutormoments-teacher-results .tutor-chart-row { min-height: 40px; }
#tutormoments-teacher-results .tutor-chart-rows { max-height: 420px; }
/* The GLM-trained tutor and the untrained GLM-5.3 stay grey but are named in bold, like &Tutor. */
.tutor-chart-row--ablation .tutor-chart-model, .tutor-chart-row--baseline .tutor-chart-model { font-weight: 700; }

.tutor-hero-actions { display:flex; justify-content:center; align-items:center; gap:12px; margin-top:24px; }
.tutor-hero-button { display:inline-flex; align-items:center; gap:9px; padding:12px 22px; border:1px solid var(--rule); border-radius:999px; color:var(--ink); text-decoration:none; font:500 15px/1.3 var(--sans); }
.tutor-hero-button span { font-size:22px; line-height:1; opacity:.65; }
.tutor-hero-button--primary { background:#eadcf2; color:#231b29; border-color:#eadcf2; }
a.tutor-hero-button:hover { background:color-mix(in srgb,#bda9cc 12%,transparent); border-color:#bda9cc; }
.tutor-hero-button:focus-visible { outline:2px solid #bda9cc; outline-offset:4px; }

.footnote-ref { font-size: 0.7em; line-height: 0; }
.footnote-ref a { text-decoration: none; }
.section-footnote {
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
  margin-top: 28px;
  padding-top: 10px;
}
.section-footnote a { margin-right: 4px; text-decoration: none; }

.figure-todo { font-size: 0.82rem; margin: 6px 0 10px; }

.article .method-details { width: calc(100% + 56px); max-width: none; margin-inline: -28px; border-radius: 20px; }
.article .method-details > summary { padding-inline: 28px; }
@media (max-width: 1119px) { .article .method-details { width: 100%; margin-inline: 0; } }
@media (max-width: 700px) { .article .method-details > summary { padding-inline: 16px; } }
@media print { .article .method-details { width: 100%; margin-inline: 0; } }

.distance-dataset-tabs { display:flex; flex-wrap:wrap; gap:8px; border:0; margin:18px 0 24px; }
.distance-dataset-tabs .figure-tab { border:1px solid var(--rule); border-radius:8px; padding:10px 14px; background:transparent; color:var(--muted); text-transform:none; letter-spacing:0; font:500 13px/1.4 var(--sans); }
.distance-dataset-tabs .figure-tab[aria-selected="true"] { border-color:var(--accent); color:var(--ink); background:color-mix(in srgb,var(--accent) 12%,transparent); }

.distance-dataset-tabs { overflow: visible; padding: 2px 0; }
.distance-dataset-tabs .figure-tab { margin-bottom: 0; }

.article .move-taxonomy-disclosure { margin-bottom: 12px; }
.article .move-taxonomy-disclosure + .result-figure { margin-top: 12px; }

.article .result-figure .distance-chart-caption { margin: 20px 0 0; text-align: center; font: italic 12px/1.5 var(--sans); color: var(--muted); }

.article .method-details__body { padding-top: 24px; }

.toc .toc-open-coding { padding-left: 14px; margin-top: 4px; }

.move-comparison-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; }
.move-comparison-layout > div { display:flex; flex-direction:column; min-width:0; }
.article .result-figure .move-comparison-layout .distance-chart-caption { margin-top:auto; padding-top:20px; min-height:56px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; }
.move-comparison-layout .cmp-bar { grid-template-columns:110px minmax(0,1fr) 34px; gap:8px; font-size:12px; min-height:30px; }
.move-mix-row { display:grid; grid-template-columns:110px minmax(0,1fr); align-items:center; gap:8px; min-height:30px; font:400 12px/1.4 var(--sans); color:var(--muted); }
.move-mix-row--ours > span { color:var(--teal-dark); font-weight:600; }
.move-mix-track { display:flex; height:20px; overflow:hidden; border-radius:3px; }
.move-mix-segment { display:block; height:100%; transition:opacity .15s; }
.move-mix-legend { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:24px; font:400 11px/1.4 var(--sans); color:var(--muted); }
.move-mix-legend > span { display:inline-flex; gap:6px; align-items:center; }
.move-mix-legend i { width:9px; height:9px; border-radius:2px; flex:none; }
.move-mix-segment.is-muted, .move-mix-legend .is-muted { opacity:.25; }
@media(max-width:700px) { .move-comparison-layout { grid-template-columns:1fr; } }

/* Keep each model on the same row in both comparison panels. */
.move-comparison-layout .cmp-bars, .move-comparison-layout .move-mix-rows { display:grid; grid-auto-rows:40px; gap:0; }
.move-comparison-layout .cmp-bar, .move-comparison-layout .move-mix-row { min-height:0; height:40px; padding:0 8px; box-sizing:border-box; }
.move-reference-spacer { height:40px; }
.move-mix-legend { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 20px; align-items:start; }
.move-mix-legend > span { align-items:flex-start; }
.move-mix-legend i { margin-top:3px; }
@media(max-width:700px) { .move-reference-spacer { display:none; } .move-mix-legend { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:420px) { .move-mix-legend { grid-template-columns:1fr; } }

.move-comparison-layout .cmp-panel__title { min-height:32px; }

.move-mix-row--human { background:rgb(128 128 128 / 8%); border-radius:3px; box-shadow:none; }

/* Hero panel in the Persimmon article's style: copy on the left, the &Tutor illustration on the right. */
.hero.tutor-hero { width: min(1168px, calc(100% - 48px)); padding: 8px 0 0; border-bottom: 0; text-align: left; }
.hero.tutor-hero > .shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40%); align-items: center; gap: 32px; min-height: clamp(440px, 50svh, 520px); padding: 36px clamp(32px, 5vw, 72px); border-radius: 28px; background: var(--hero-bg); box-shadow: inset 0 0 0 1px rgb(53 67 46 / .06); }
.tutor-hero .hero__copy { min-width: 0; color: var(--hero-ink); }
.tutor-hero h1 { margin: 0; max-width: none; color: var(--hero-ink); font-size: clamp(56px, 6.4vw, 88px); line-height: .98; letter-spacing: -.035em; }
.tutor-hero .hero__dek { max-width: 560px; margin: 18px 0 0; color: var(--hero-ink); font-size: clamp(22px, 2.2vw, 28px); }
.tutor-hero .hero__meta { margin-top: 16px; color: var(--hero-muted); font: 400 17px/1.5 var(--serif); }
.tutor-hero .tutor-hero-actions { justify-content: flex-start; gap: 12px; margin-top: 20px; }
.tutor-hero .tutor-hero-button { min-height: 44px; padding: 0 18px; gap: 6px; border: 1px solid var(--hero-line); border-radius: 999px; background: #ffffff80; color: var(--hero-ink); font: 500 14px/1 var(--sans); }
.tutor-hero .tutor-hero-button span { font-size: 19px; }
.tutor-hero .tutor-hero-button--primary { background: var(--hero-ink); border-color: var(--hero-ink); color: white; }
.tutor-hero a.tutor-hero-button:hover { background: white; border-color: var(--hero-line); color: var(--hero-ink); }
.tutor-hero .tutor-hero-button:focus-visible { outline: 2px solid var(--hero-ink); }
.tutor-hero-art { min-width: 0; }
.tutor-hero-art svg { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; overflow: visible; }
.tutor-hero-art__ampersand { fill: var(--accent); }
.tutor-hero-art__frames { stroke: #3a2620; }
.tutor-hero-art__shadow { fill: #3b3d37; opacity: .16; }
html[data-site-theme="dark"] .hero.tutor-hero > .shell { box-shadow: inset 0 0 0 1px var(--hero-line); }
html[data-site-theme="dark"] .tutor-hero .tutor-hero-button { background: #ffffff0a; }
html[data-site-theme="dark"] .tutor-hero .tutor-hero-button--primary { background: var(--accent); border-color: var(--accent); color: #20261d; }
html[data-site-theme="dark"] .tutor-hero a.tutor-hero-button:hover { background: #ffffff14; color: var(--hero-ink); }
html[data-site-theme="dark"] .tutor-hero-art__shadow { fill: #000; opacity: .45; }
@media (max-width: 900px) {
  .hero.tutor-hero > .shell { grid-template-columns: minmax(0, 1fr); gap: 24px; min-height: 0; padding: 32px 24px 28px; text-align: center; }
  .tutor-hero .hero__dek { margin-inline: auto; }
  .tutor-hero .tutor-hero-actions { justify-content: center; }
  .tutor-hero-art svg { max-width: 340px; }
}
@media (max-width: 700px) {
  .hero.tutor-hero { width: calc(100% - 24px); padding-top: 4px; }
  .hero.tutor-hero > .shell { border-radius: 22px; }
  .tutor-hero h1 { font-size: clamp(45px, 13vw, 64px); }
  .tutor-hero .hero__dek { font-size: 22px; }
}
@media print {
  .hero.tutor-hero > .shell { display: grid; min-height: 0; padding: 24px; }
}
.tutor-hero .hero__equal-contribution { margin-top: 14px; font: 400 12.5px/1.4 var(--sans); color: var(--hero-muted); }

.tutor-hero .contribution-asterisk { font-family: var(--serif); font-weight: 400; }

/* Match the published humans& masthead independently of article width. */
body :is(.site-header, .home-nav).aligned-header {
  --header-gutter: max(24px, calc((100% - 1120px) / 2));
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 84px;
  padding: 20px var(--header-gutter);
}
body .home-nav.aligned-header { position: absolute; z-index: 20; top: 0; inset-inline: 0; }
body .home-nav.aligned-header a { color: #3b3d37; text-decoration: none; }
body .home-nav.aligned-header a:hover { text-decoration: underline; }
body .home-nav.aligned-header a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
body .aligned-header :is(.site-brand, .home-brand) { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; }
body .aligned-header :is(.site-logo, .site-brand img, .home-brand img) { display: block; width: 116px; height: auto; max-height: none; }
body .aligned-header :is(.site-nav, .home-nav-links) {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  font: 400 14px/1.4 "Inter", system-ui, sans-serif;
}
body .aligned-header :is(.site-nav, .home-nav-links) a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
/* Reserve the same right edge for Join Us on every page. */
body .aligned-header .site-nav .theme-toggle { position: absolute; inset: 50% auto auto calc(100% + 4px); width: 20px; margin: 0; transform: translateY(-50%); }

@media screen and (max-width: 700px) {
  body :is(.site-header, .home-nav).aligned-header { --header-gutter: 24px; min-height: 76px; gap: 16px; padding-block: 16px; }
  body .aligned-header :is(.site-logo, .site-brand img, .home-brand img) { width: 92px; }
  body .aligned-header :is(.site-nav, .home-nav-links) { gap: 18px; font-size: 12px; }
  body .aligned-header :is(.site-nav, .home-nav-links) { min-width: 0; flex-wrap: wrap; justify-content: flex-end; column-gap: 14px; row-gap: 0; }
  body .aligned-header :is(.site-nav, .home-nav-links) a { min-height: 22px; padding-block: 0; }
  body .aligned-header .site-nav { padding-right: 0; }
  body .aligned-header .site-nav .theme-toggle { inset-inline-start: calc(100% + 1px); width: 20px; }
  body .site-header.aligned-header[data-folded="true"] { min-height: 116px; padding-bottom: 56px; }
  body .site-header.aligned-header[data-folded="true"] > :is(.site-brand, .site-nav) { transform: none; }
}

@media print { body :is(.site-header, .home-nav).aligned-header { min-height: 0; padding: 12px 0; } }

/* Older articles have uppercase, tracked links; the masthead uses one type style. */
body .aligned-header :is(.site-nav, .home-nav-links) a { font: inherit; letter-spacing: normal; text-transform: none; color: var(--ink, #3b3d37); }
body .aligned-header .site-logo { opacity: 1; }
body .aligned-header .theme-toggle { box-sizing: border-box; height: 32px; padding: 0; border: 0; background: transparent; color: var(--ink); border-radius: 50%; font-size: 0; cursor: pointer; }
/* Boba's original quiet circle control: outline in light mode, half filled in dark. */
body .aligned-header .theme-toggle::before { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 50%; background: transparent; opacity: .6; -webkit-mask: none; mask: none; }
body .aligned-header .theme-toggle[aria-pressed="true"]::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
body .aligned-header .theme-toggle:hover::before { opacity: 1; }
body .aligned-header .theme-toggle:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 3px; }
body .aligned-header .theme-toggle[hidden] { display: none; }
@media screen { html[data-site-theme="dark"] .aligned-header .site-logo { filter: invert(1) grayscale(1); } }
body :is(.site-header, .home-nav).aligned-header { border-bottom: 0; }

/* The standard footer keeps the API legal documents at their canonical host. */
.footer.site-footer { width: 100%; margin: 0; padding: 0; }
.footer.site-footer .footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(1120px, calc(100% - 48px)); max-width: none; margin: 0 auto; padding: 32px 0; color: var(--muted); font: 400 13px/1.5 var(--sans); }
.footer.site-footer a { display: inline-flex; align-items: center; text-decoration: none; }
.footer.site-footer a:hover { text-decoration: underline; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 16px; }
@media (max-width: 700px) { .footer.site-footer .footer__inner { flex-wrap: wrap; gap: 20px; padding: 26px 0; font-size: 12px; } }