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

/* Shared article styles for the playground's Persimmon release and model card. */
:root {
  color-scheme: light;
  --bg: #f3f2ed;
  --surface: #f8f7f3;
  --ink: #3b3d37;
  --muted: #6b6e65;
  --line: #d9dcd3;
  --accent: #806354;
  --orange: #ab806d;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --reading-width: 760px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; }
body.article-page {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
::selection { background: #dfdfd2; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 18px; transform: translateY(-180%); background: var(--ink); color: white; font-family: var(--sans); font-size: 14px; }
.skip-link:focus { transform: none; color: white; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 80px;
  padding: 20px max(32px, calc((100% - 1160px) / 2));
  background: var(--bg);
}
.site-brand, .site-footer a { display: inline-flex; align-items: center; text-decoration: none; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 16px; }
.site-footer .footer-legal a:hover { text-decoration: underline; }
.site-logo { display: block; width: auto; height: 38px; }
.site-nav { display: flex; align-items: center; gap: 32px; font-family: var(--sans); font-size: 14px; }
.site-nav a { text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }

.site-header [hidden] { display: none; }
.site-header[data-folded="true"] { box-shadow: 0 1px 0 var(--line); }
:is(.persimmon-page, .model-card-page) .site-header[data-folded="true"] { background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.header-compact { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; animation: header-fold-in .18s ease-out; }
.header-compact-title { color: #35432e; font-family: var(--serif); font-size: 34px; font-weight: 400; line-height: 1; letter-spacing: -.035em; text-decoration: none; }
.header-compact-actions { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 500; }
.header-compact-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; white-space: nowrap; text-decoration: none; }
.header-compact-actions .hero-action-primary { gap: 8px; padding: 8px 20px; }
.header-compact-actions .hero-action-fruit { width: 20px; height: 20px; }
@keyframes header-fold-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.article-shell { width: 100%; margin: 0 auto 96px; }
.article-hero { padding: 0; }
.article-kicker { margin: 0 0 24px; color: var(--muted); font-family: var(--sans); font-size: 14px; }
.article-hero h1 { margin: 0 0 28px; font-family: var(--serif); font-size: clamp(48px, 5.5vw, 72px); font-weight: 400; line-height: 1.08; letter-spacing: -.025em; }
.article-subtitle { margin: 0; font-family: var(--serif); font-size: 30px; line-height: 1.35; }
.article-meta { margin: 0; color: var(--muted); font-family: var(--sans); font-size: 14px; }

.hero-art { position: relative; height: clamp(540px, calc(100svh - 80px), 700px); overflow: clip; background: #e8edde; }
.hero-art-poster, .hero-art-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hero-art-poster img { position: absolute; left: 50%; display: block; width: auto; height: 100%; max-width: none; transform: translateX(-50%); }
.hero-art-frame { border: 0; opacity: 0; pointer-events: none; }
.hero-art[data-state="ready"] .hero-art-frame { opacity: 1; pointer-events: auto; }
.hero-art[data-state="ready"] .hero-art-poster { visibility: hidden; }
.hero-art[data-dissolving="true"] :is(.hero-art-frame, .hero-art-poster) { opacity: 0; pointer-events: none; transition: none; }
.persimmon-drift { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.persimmon-drift[hidden] { display: none; }
.persimmon-page .hero-heading, .persimmon-page .article-content, .persimmon-page .article-toc, .persimmon-page .toc-mobile, .persimmon-page .site-footer { z-index: 2; }
.persimmon-page .article-content, .persimmon-page .toc-mobile, .persimmon-page .site-footer { position: relative; }
@media print, (prefers-reduced-motion: reduce) { .persimmon-drift { display: none; } }
.hero-heading { position: absolute; top: 40px; right: 24px; left: 24px; text-align: center; color: #35432e; pointer-events: none; }
.hero-heading :is(h1, .article-kicker, .article-subtitle, .article-meta) { pointer-events: auto; }
.hero-heading .article-kicker { margin-bottom: 18px; color: inherit; }
.persimmon-page .hero-heading h1 { margin: 0; font-size: clamp(80px, 8vw, 116px); line-height: 1; letter-spacing: -.035em; }
.hero-heading .article-subtitle { max-width: 580px; margin: 24px 0 0; font-size: clamp(20px, 1.75vw, 25px); line-height: 1.45; text-wrap: pretty; }
.hero-heading .article-meta { margin-top: 20px; }
.hero-heading .article-meta + .hero-actions { margin-top: 16px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 30px; font-size: 15px; font-weight: 500; pointer-events: auto; }
.hero-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; white-space: nowrap; text-decoration: none; }
.hero-action-primary { gap: 10px; padding: 12px 24px; border-radius: 999px; background: var(--surface); color: var(--ink); }
.hero-action-primary:hover { background: #eeeee6; color: var(--ink); }
.hero-action-fruit { display: block; flex: 0 0 auto; width: 24px; height: 24px; }
.hero-action-link { gap: 12px; text-decoration: none; }
.hero-action-link span { color: #87907f; font-size: 25px; font-weight: 400; line-height: 1; }
.hero-action-link:is(:hover, :focus-visible, :active) { color: var(--accent); text-decoration: none; }

@media screen and (min-width: 701px) {
  .hero-art { --painting-height: clamp(520px, 66svh, 680px); height: clamp(440px, 50svh, 520px); }
  /* Shift the still and live canvas together so their artwork stays aligned. */
  .hero-art-poster, .hero-art-frame { inset: calc(50% - var(--painting-height) * .59) auto auto 22%; height: var(--painting-height); }
  .hero-heading { top: 50%; right: auto; left: max(32px, calc((100% - 1160px) / 2)); width: min(590px, calc(56% - 32px)); transform: translateY(-50%); text-align: left; }
}

/* A single research figure. All five bars use the same zero baseline and scale. */
.hero-metric { width: min(900px, calc(100% - 48px)); margin: 32px auto 0; padding-top: 36px; border-top: 1px solid var(--line); }
.metric-chart-title { margin: 0 0 28px; font-family: var(--sans); font-size: 22px; line-height: 1.3; font-weight: 500; letter-spacing: -.02em; }
.metric-chart-title a { text-decoration: none; }
.metric-chart-title a:hover { text-decoration: underline; }
.metric-chart { --label-width: 124px; min-width: 0; font-family: var(--sans); }
.metric-chart-heading { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; color: var(--muted); font-size: 12px; }
.metric-row { display: grid; grid-template-columns: var(--label-width) minmax(0, 1fr); align-items: center; }
.metric-name { padding-right: 12px; font-size: 14px; line-height: 1.4; }
.metric-track { position: relative; display: flex; align-items: center; height: 40px; border-left: 1px solid var(--line); border-right: 1px dashed #aaa; background: linear-gradient(to right, transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + .5px), transparent calc(50% + .5px)); }
.metric-bar { display: block; height: 22px; background: #b3b3b0; }
.metric-error { position: absolute; top: calc(50% - 5px); height: 10px; border-left: 1px solid var(--ink); border-right: 1px solid var(--ink); pointer-events: none; }
.metric-error::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--ink); }
.metric-error + strong { white-space: nowrap; }
.metric-row.is-featured .metric-name { font-weight: 500; }
.is-featured .metric-bar { background: var(--orange); }
.metric-track strong { position: absolute; margin-left: 10px; font-size: 14px; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }
.metric-axis { display: flex; justify-content: space-between; margin: 9px 0 0 var(--label-width); color: var(--muted); font-size: 12px; }
.hero-metric-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; text-align: right; }
.hero-metric figcaption { max-width: var(--reading-width); margin: 28px auto 0; color: var(--muted); font-family: var(--sans); font-size: 14px; line-height: 1.6; }

.article-toc { display: none; font-family: var(--sans); }
.toc-label { margin-bottom: 16px; font-size: 13px; }
.article-toc ol { margin: 0; padding: 0; list-style: none; }
.article-toc a { display: block; padding: 7px 0; color: var(--muted); font-size: 13px; line-height: 1.5; text-decoration: none; }
.article-toc a.active { color: var(--ink); text-decoration: underline; text-decoration-color: #aaa; }
.article-toc a:hover { color: var(--ink); }
.toc-mobile { width: min(var(--reading-width), calc(100% - 48px)); margin: 40px auto 0; padding: 16px 0; border-bottom: 1px solid var(--line); font-family: var(--sans); font-size: 14px; }
.toc-mobile summary { color: var(--muted); cursor: pointer; }
.toc-mobile ol { margin: 16px 0 0; padding-left: 22px; }
.toc-mobile li { padding: 5px 0; }
.toc-mobile a { text-decoration: none; }
.toc-mobile a:hover { text-decoration: underline; }

.article-content { min-width: 0; width: min(var(--reading-width), calc(100% - 48px)); margin: 64px auto 0; font-size: 17px; line-height: 1.8; overflow-wrap: break-word; }
.article-content:focus { outline: none; }
.article-content h2, .article-content h3 { font-family: var(--serif); font-weight: 400; line-height: 1.18; letter-spacing: -.015em; }
.article-content h2 { margin: 64px 0 24px; font-size: 42px; }
.article-content > h2:first-child { margin-top: 0; }
.article-content h3 { margin: 40px 0 18px; font-size: 30px; }
.article-content h4 { margin: 30px 0 16px; font-size: 22px; font-weight: 500; }
.article-content p, .article-content ul, .article-content ol { margin: 0 0 24px; }
.article-content li + li { margin-top: 10px; }
.article-content strong { font-weight: 600; }
.article-content .prose-number { font-family: var(--serif); font-size: 1.12em; font-weight: 500; font-variant-numeric: lining-nums proportional-nums; letter-spacing: -.015em; line-height: 1; white-space: nowrap; }
.article-content strong .prose-number { font-weight: 600; }
.article-content .prose-number-unit { margin-left: .06em; font-size: .8em; letter-spacing: 0; }
.article-content a { text-decoration-color: #aaa; }
.article-content a:hover { text-decoration-color: currentColor; }
.persimmon-intro-copy > p:first-child { font-family: var(--serif); font-size: 25px; line-height: 1.5; }
.persimmon-sidenote { margin: 32px 0; padding-left: 24px; border-left: 1px solid #c9c9c4; }
.article-content .persimmon-sidenote h3 { margin: 0 0 12px; font-size: 23px; }
.article-content .persimmon-sidenote p { margin: 0; color: #55574e; font-size: 16px; }
.article-content mark.draft-placeholder { padding: .1em .2em; background: #ebe7d8; color: #6b6249; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* MTT method: labeled references, neutral samples, and a source reveal. */
.mtt-flow { margin: 44px 0 48px; padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--sans); }
.mtt-flow-label { display: block; margin-bottom: 12px; color: var(--muted); font-size: 12px; }
.mtt-flow-title { display: block; margin-bottom: 30px; font-size: 22px; font-weight: 500; line-height: 1.4; letter-spacing: -.015em; }
.mtt-stage-heading { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; font-size: 13px; font-weight: 500; line-height: 1.5; }
.mtt-stage-number { flex: 0 0 auto; color: var(--muted); font-size: 11px; font-weight: 400; font-variant-numeric: lining-nums tabular-nums; }
.mtt-reference-grid, .mtt-sample-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.mtt-reference { display: flex; align-items: center; gap: 20px; min-width: 0; padding: 19px 20px; background: var(--mtt-tint); }
.mtt-source-human { --mtt-color: #65715a; --mtt-tint: #e7eae2; }
.mtt-source-model { --mtt-color: #8f705e; --mtt-tint: #ece5dc; }
.mtt-reference strong { display: block; color: var(--mtt-color); font-size: 13px; font-weight: 500; line-height: 1.5; }
.mtt-reference div > span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.mtt-paper-stack { position: relative; display: block; flex: 0 0 32px; height: 38px; border: 1px solid var(--mtt-color); background: var(--mtt-tint); color: var(--mtt-color); }
.mtt-paper-stack::before, .mtt-paper-stack::after { content: ""; position: absolute; inset: -4px 3px 3px -4px; border: 1px solid currentColor; background: var(--mtt-tint); }
.mtt-paper-stack::after { inset: -7px 6px 6px -7px; }
.mtt-paper-stack i { position: absolute; z-index: 1; left: 0; width: 17px; height: 1px; background: currentColor; opacity: .6; }
.mtt-paper-stack i:nth-child(1) { top: 3px; }
.mtt-paper-stack i:nth-child(2) { top: 9px; width: 13px; }
.mtt-paper-stack i:nth-child(3) { top: 15px; }
.mtt-blind-stage { position: relative; margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }
.mtt-blind-stage::before { content: "↓"; position: absolute; top: -17px; left: calc(50% - 17px); width: 34px; background: var(--bg); color: #8a877d; font-size: 19px; line-height: 32px; text-align: center; }
.mtt-sample { min-width: 0; padding: 20px; border: 1px solid #d6d4ca; background: #fdfcf8; }
.mtt-sample-heading { display: flex; align-items: baseline; gap: 12px; margin-bottom: 21px; padding-bottom: 14px; border-bottom: 1px solid #e8e6de; }
.mtt-sample-heading strong { font-family: var(--serif); font-size: 32px; font-weight: 400; line-height: 1; }
.mtt-sample-heading > span { color: var(--muted); font-size: 11px; }
.mtt-flow .mtt-transcript { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mtt-flow .mtt-transcript li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 9px; margin: 0; font-size: 13px; line-height: 1.55; }
.mtt-speaker { color: var(--muted); font-size: 11px; padding-top: 2px; }
.mtt-flow .mtt-example-label { margin: 10px 0 26px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.mtt-flow .mtt-match-table { width: 100%; min-width: 0; margin: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 1.5; }
.mtt-flow .mtt-match-table th, .mtt-flow .mtt-match-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; background: transparent; font-weight: 400; }
.mtt-flow .mtt-match-table thead th { color: var(--muted); font-size: 11px; }
.mtt-flow .mtt-match-table th:first-child, .mtt-flow .mtt-match-table td:first-child { width: 30%; padding-left: 0; color: var(--muted); font-size: 12px; }
.mtt-flow .mtt-match-table .mtt-actual td { color: var(--mtt-color); background: var(--mtt-tint); border-bottom-color: transparent; font-weight: 500; }
.mtt-flow .mtt-match-table .mtt-actual th { border-bottom-color: transparent; }
.mtt-outcome { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0 0; }
.mtt-outcome > div:first-child { padding-left: 14px; border-left: 2px solid var(--orange); }
.mtt-outcome strong { display: block; font-family: var(--serif); font-size: 26px; font-weight: 400; line-height: 1.3; }
.mtt-outcome > div > span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.mtt-score { display: flex; flex-shrink: 0; align-items: center; gap: 10px; }
.mtt-equals { margin-left: 7px; }
.mtt-outcome .mtt-fraction { display: grid; gap: 4px; margin: 0; text-align: center; font-size: 11px; }
.mtt-fraction > span:first-child { padding: 0 4px 4px; border-bottom: 1px solid #aaa69a; }
.mtt-flow .mtt-flow-note { margin: 24px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }

/* Evaluation plots keep their axes steady while the measured marks enter. */
.eval-figure { margin: 44px 0 48px; padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--sans); }
.eval-figure-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-bottom: 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.eval-figure-status { color: #756d5e; }
.eval-figure-title { margin-bottom: 24px; font-size: 21px; font-weight: 500; line-height: 1.4; letter-spacing: -.015em; }
.eval-plot-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.article-content .eval-plot-scroll :is(img, svg) { display: block; width: 100%; height: auto; min-width: 640px; max-width: none; }
@media screen {
  #eval-trickle .eval-plot-scroll { width: 100%; }
  #eval-trickle .eval-plot-scroll :is(img, svg) { min-width: 560px; }
}
.eval-figure figcaption { margin-top: 20px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.eval-scroll-hint { display: none; }
/* Native Trickle example: shared prompts and parallel customer responses. */
.trickle-example-heading { margin-bottom: 22px; }
.trickle-example-title { font-family: var(--serif); font-size: 28px; line-height: 1.2; }
.trickle-example-customer { margin-top: 9px; color: var(--muted); font-size: 12px; }
.trickle-example-controls { min-width: 0; margin: 0; padding: 0; border: 0; }
.trickle-visually-hidden, .trickle-turn-input { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.trickle-turn-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); }
.trickle-turn-tabs label { display: flex; align-items: center; gap: 7px; margin-bottom: -1px; padding: 12px 0; border-bottom: 2px solid transparent; color: var(--muted); font-size: 13px; cursor: pointer; }
.trickle-turn-number { font-size: 10px; font-variant-numeric: lining-nums tabular-nums; }
#trickle-example-turn-1:checked ~ .trickle-turn-tabs label[for="trickle-example-turn-1"],
#trickle-example-turn-2:checked ~ .trickle-turn-tabs label[for="trickle-example-turn-2"],
#trickle-example-turn-3:checked ~ .trickle-turn-tabs label[for="trickle-example-turn-3"] { color: #42533b; border-bottom-color: #657957; }
#trickle-example-turn-1:focus-visible ~ .trickle-turn-tabs label[for="trickle-example-turn-1"],
#trickle-example-turn-2:focus-visible ~ .trickle-turn-tabs label[for="trickle-example-turn-2"],
#trickle-example-turn-3:focus-visible ~ .trickle-turn-tabs label[for="trickle-example-turn-3"] { outline: 2px solid var(--accent); outline-offset: 4px; }
.trickle-turn-panel { display: none; }
#trickle-example-turn-1:checked ~ .trickle-turn-panels [data-trickle-turn="1"],
#trickle-example-turn-2:checked ~ .trickle-turn-panels [data-trickle-turn="2"],
#trickle-example-turn-3:checked ~ .trickle-turn-panels [data-trickle-turn="3"] { display: block; }
@media screen {
  #trickle-example .trickle-example-controls[data-turn-motion] .trickle-turn-panel { display: none; }
  #trickle-example .trickle-example-controls[data-turn-motion] .trickle-turn-panel[data-active] { display: block; }
  .trickle-example-controls[data-turn-motion] .trickle-turn-tabs { position: relative; }
  #trickle-example .trickle-example-controls[data-turn-motion] .trickle-turn-tabs label { border-bottom-color: transparent; transition: color 220ms ease; }
  .trickle-example-controls[data-turn-motion] .trickle-turn-tabs::after { content: ""; position: absolute; bottom: -1px; left: 0; width: var(--turn-width); height: 2px; background: #657957; transform: translateX(var(--turn-left)); pointer-events: none; transition: transform 240ms cubic-bezier(.22, 1, .36, 1), width 240ms cubic-bezier(.22, 1, .36, 1); }
  .trickle-turn-panels[data-animating] { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .trickle-example-controls[data-turn-motion] .trickle-turn-tabs label,
  .trickle-example-controls[data-turn-motion] .trickle-turn-tabs::after { transition: none; }
}
.trickle-prompt { padding: 24px 0 28px; }
.trickle-prompt-label { margin-bottom: 8px; font-size: 12px; font-weight: 500; }
.trickle-prompt-label span { color: var(--muted); font-weight: 400; }
.trickle-example .trickle-prompt blockquote { margin: 0; padding: 0; border: 0; color: var(--ink); font-family: var(--serif); font-size: 24px; font-style: normal; line-height: 1.3; }
.trickle-response-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; }
.trickle-response { min-width: 0; padding: 16px 14px 20px; border-top: 2px solid #d5d8cf; }
.trickle-response.is-human { background: #eaece5; border-top-color: #87917a; }
.trickle-response.is-persimmon { background: #e7eddf; border-top-color: #687b52; }
.trickle-response-label { margin-bottom: 20px; font-size: 13px; font-weight: 600; line-height: 1.4; }
.trickle-response-label span { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; font-weight: 400; }
.is-persimmon .trickle-response-label { color: #465839; }
.trickle-example .trickle-response blockquote { margin: 0; padding: 0; border: 0; color: var(--ink); font-family: var(--sans); font-size: 13px; font-style: normal; line-height: 1.65; overflow-wrap: anywhere; }
.trickle-early-note { display: inline-flex; align-items: center; gap: 5px; margin-top: 16px; padding: 3px 7px; border-radius: 3px; background: #f1e5c7; color: #7b5a25; font-size: 10px; line-height: 1.5; }
.trickle-early-note strong { font-weight: 600; }
@media screen and (max-width: 900px) {
  .trickle-response-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .trickle-example .trickle-response blockquote { font-size: 14px; }
}
@media screen and (max-width: 540px) {
  .trickle-example-title { font-size: 26px; }
  .trickle-turn-tabs { gap: 18px; }
  .trickle-turn-tabs label { gap: 5px; font-size: 12px; }
  .trickle-response-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .trickle-response { padding-inline: 16px; }
  .trickle-response-label { margin-bottom: 12px; }
  .trickle-response-label span { display: inline; margin-left: 10px; }
}
@media print {
  .trickle-turn-tabs { display: none; }
  .trickle-example .trickle-turn-panel { display: block; }
  .trickle-response-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* End native Trickle example. */
[data-plot-frontier-line] {
  opacity: 1;
}

@media screen and (prefers-reduced-motion: no-preference) {
  .persimmon-page figure[data-reveal] { transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1); }
  .persimmon-page figure[data-reveal="pending"] { opacity: 0; transform: translateY(24px); }
  .persimmon-page figure[data-reveal="visible"] { opacity: 1; transform: translateY(0); }
  .mtt-flow [data-rollout-reveal="pending"],
  .mtt-flow [data-rollout-reveal="pending"] [data-rollout-item] { opacity: 0; }
  .mtt-flow [data-rollout-reveal="visible"] { animation: method-step-in .55s cubic-bezier(.22, 1, .36, 1) both; }
  .mtt-flow tr[data-rollout-reveal="visible"] { animation-name: plot-detail-in; }
  .mtt-flow [data-rollout-reveal="visible"] [data-rollout-item] {
    animation: method-message-in .65s cubic-bezier(.25, .7, .25, 1) both;
    animation-delay: calc(var(--rollout-delay, 0ms) + 120ms);
  }
  @keyframes method-step-in {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes method-message-in {
    from { opacity: 0; transform: translateY(-12px); clip-path: inset(0 0 100% 0); }
    to { opacity: 1; transform: translateY(0); clip-path: inset(0); }
  }
  [data-plot-mark="dot"] { transform-box: fill-box; transform-origin: center; }
  [data-plot-mark="bar"] { transform-box: fill-box; transform-origin: left center; }
  [data-plot-reveal="pending"] [data-plot-mark] { opacity: 0; }
  [data-plot-reveal="visible"] [data-plot-mark] {
    animation: plot-detail-in .6s ease both;
    animation-delay: var(--plot-delay, 0ms);
  }
  [data-plot-reveal="visible"] [data-plot-mark="dot"] { animation-name: plot-dot-in; }
  [data-plot-reveal="visible"] [data-plot-mark="bar"] { animation-name: plot-bar-in; animation-duration: .7s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  [data-plot-reveal="pending"] [data-plot-frontier] { stroke-dashoffset: 1; }
  [data-plot-reveal="visible"] [data-plot-frontier] {
    animation: plot-frontier-draw 1.5s cubic-bezier(.4, 0, .2, 1) both;
    animation-delay: var(--frontier-delay, 1300ms);
  }
  @keyframes plot-frontier-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
  }
  @keyframes plot-dot-in {
    0% { opacity: 0; transform: translateY(10px) scale(.2); }
    65% { opacity: 1; transform: translateY(0) scale(1.18); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes plot-bar-in {
    from { opacity: 0; transform: scaleX(0); }
    to { opacity: 1; transform: scaleX(1); }
  }
  @keyframes plot-detail-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

.article-content p.model-card-cta-label { margin: 64px 0 12px; padding-top: 30px; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--sans); font-size: 13px; font-weight: 400; }
.persimmon-page .article-content h2.model-card-cta-title { margin: 0 0 14px; padding: 0; font-family: var(--serif); font-size: 27px; font-weight: 500; line-height: 1.3; }
.model-card-cta-title a { text-decoration: none; }
.model-card-cta-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.model-card-cta-description { color: var(--muted); font-family: var(--sans); font-size: 16px; font-weight: 400; line-height: 1.5; }

.model-card-page .article-hero { width: min(880px, calc(100% - 48px)); margin: auto; padding: 72px 0 16px; text-align: center; }
.model-card-page .article-hero h1 { font-size: clamp(40px, 4.7vw, 58px); }
.model-card-page .article-hero h1 a { color: var(--accent); }
.model-card-page .article-subtitle { font-size: 23px; }
.model-card-page .article-meta { margin-top: 28px; }
.model-card-page .article-content { font-size: 16px; }
.model-card-disclosure { margin: 24px 0 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.model-card-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; list-style: none; cursor: pointer; }
.model-card-disclosure > summary::-webkit-details-marker { display: none; }
.article-content .model-card-disclosure > summary h2 { margin: 0; font-size: clamp(24px, 3vw, 30px); line-height: 1.2; }
.disclosure-chevron { flex: 0 0 auto; width: 9px; height: 9px; margin-right: 3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.model-card-disclosure[open] > summary .disclosure-chevron { transform: rotate(225deg); }
.model-card-disclosure-content { padding: 0 24px 8px; }
.model-card-disclosure-content > p:first-child { margin-top: 0; }
.article-content .trickle-plot-note { margin: 22px 0 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.trickle-results { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }
.trickle-results > summary { color: var(--ink); font-size: 14px; cursor: pointer; }
.article-content .trickle-results > p { margin: 12px 0; color: var(--muted); font-size: 12px; }
.trickle-results .table-scroll { margin: 12px 0 0; }
.trickle-results th[scope="row"] { font-weight: 500; background: transparent; }
.table-scroll { width: 100%; overflow-x: auto; margin: 28px 0 36px; }
.article-content table { width: 100%; min-width: 600px; border-collapse: collapse; font-family: var(--sans); font-size: 13px; line-height: 1.65; }
.article-content th, .article-content td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.article-content th { font-weight: 500; background: #f6f6f4; }
.article-content td:first-child { font-weight: 500; }
.article-content td:not(:first-child) { font-variant-numeric: lining-nums tabular-nums; }
.article-content .numeric { text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.article-content td.numeric { white-space: nowrap; }
.table-summary table { min-width: 0; }
.table-summary th:first-child, .table-summary td:first-child { width: 28%; }
.table-summary td:first-child { color: var(--muted); }
.status-pending { color: var(--muted); font-size: 12px; font-style: italic; }
.article-content pre { overflow-x: auto; padding: 20px; background: #f5f5f3; font-size: 14px; line-height: 1.65; }
.article-content code { font-family: "SF Mono", Consolas, monospace; font-size: .85em; }
.article-content :not(pre) > code { padding: .1em .25em; background: #f5f5f3; }
.article-content img { max-width: 100%; height: auto; }
.article-content hr { margin: 40px 0; border: 0; border-top: 1px solid var(--line); }
.site-footer { width: min(1160px, calc(100% - 64px)); margin: 0 auto; padding: 32px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); font-family: var(--sans); font-size: 13px; }
.site-logo-footer { height: 30px; }
.footer-note { color: var(--muted); }
.footer-top { gap: 8px; }

@media (min-width: 1280px) {
  .article-shell { display: grid; grid-template-columns: minmax(0, 1fr) var(--reading-width) minmax(0, 1fr); column-gap: 0; }
  .article-hero { grid-column: 1 / -1; grid-row: 1; }
  .article-toc { display: block; grid-column: 1; grid-row: 2; justify-self: end; width: 180px; margin-right: 40px; position: sticky; top: 116px; align-self: start; margin-top: 64px; max-height: calc(100dvh - 150px); overflow-y: auto; }
  .article-content { grid-column: 2; grid-row: 2; width: 100%; }
  .toc-mobile { display: none; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 94px; }
  .site-header { min-height: 70px; padding: 18px 22px; gap: 18px; }
  :is(.persimmon-page, .model-card-page) .site-header { min-height: 98px; padding-block: 10px; }
  :is(.persimmon-page, .model-card-page) [id] { scroll-margin-top: 24px; }
  .header-compact { flex-direction: column; align-items: flex-start; gap: 6px; }
  .header-compact-title { font-size: 28px; }
  .header-compact-actions { width: 100%; gap: 20px; font-size: 12px; }
  .header-compact-actions a { min-height: 36px; }
  .header-compact-actions .hero-action-primary { padding: 7px 14px; }
  .header-compact-actions .hero-action-link span { display: none; }
  .site-logo { height: 32px; }
  .site-nav { gap: 18px; font-size: 13px; }
  .site-nav .nav-playground { display: none; }
  .site-footer { width: calc(100% - 44px); }
  .article-shell { margin-bottom: 64px; }
  .hero-art { height: auto; padding-bottom: 300px; }
  .hero-art-poster, .hero-art-frame { inset: auto 0 0; height: 300px; }
  .hero-art-poster img { top: 59%; width: min(100%, 300px); height: auto; transform: translate(-50%, -59%); }
  .hero-heading { position: relative; inset: auto; margin: 0 22px; padding-top: 36px; }
  .persimmon-page .hero-heading h1 { font-size: min(64px, 16vw); }
  .hero-heading .article-subtitle { margin: 20px auto 0; font-size: 21px; }
  .hero-actions { justify-content: center; gap: 8px 20px; margin-top: 24px; font-size: 14px; }
  .hero-action-primary { padding: 11px 20px; }
  .hero-action-link { gap: 8px; }
  .article-kicker { margin-bottom: 20px; font-size: 13px; }
  .article-hero h1 { margin-bottom: 22px; font-size: 48px; }
  .article-subtitle { font-size: 25px; line-height: 1.4; }
  .article-meta { font-size: 13px; }
  .hero-metric { margin-top: 28px; }
  .metric-chart { --label-width: 92px; }
  .metric-chart-title { margin-bottom: 22px; font-size: 20px; }
  .metric-chart-heading, .metric-axis, .hero-metric-note { font-size: 11px; }
  .metric-name, .metric-track strong { font-size: 12px; }
  .metric-track { height: 38px; }
  .metric-bar { height: 20px; }
  .hero-metric figcaption { margin-top: 24px; font-size: 13px; }
  .toc-mobile { margin-top: 32px; }
  .article-content { margin-top: 40px; font-size: 16px; line-height: 1.8; }
  .article-content h2 { margin-top: 48px; font-size: 32px; }
  .article-content h3 { font-size: 26px; }
  .persimmon-sidenote { padding-left: 18px; }
  .article-content .persimmon-sidenote p { font-size: 15px; }
  .persimmon-intro-copy > p:first-child { font-size: 23px; }
  .mtt-flow-title { font-size: 20px; }
  .eval-figure-title { font-size: 20px; }
  .model-card-page .article-hero h1 { font-size: 43px; }
  .model-card-page .article-subtitle { font-size: 21px; }
  .model-card-page .article-content { font-size: 16px; }
  .model-card-page .article-hero { padding-top: 44px; }
  .table-summary th:first-child, .table-summary td:first-child { width: 32%; }
  .table-summary td { overflow-wrap: anywhere; }
  .article-content th, .article-content td { padding: 12px 10px; }
  .site-footer { flex-wrap: wrap; gap: 20px; padding: 26px 0; font-size: 12px; }
  .site-logo-footer { height: 28px; }
  .footer-note { order: 3; width: 100%; }
}

@media (max-width: 540px) {
  .mtt-reference-grid { gap: 12px; }
  .mtt-reference { flex-direction: column; align-items: flex-start; gap: 14px; padding: 19px 15px 14px; }
  .mtt-reference strong { font-size: 12px; }
  .mtt-paper-stack { flex-basis: auto; width: 26px; height: 32px; margin-left: 6px; }
  .mtt-paper-stack i { width: 13px; }
  .mtt-paper-stack i:nth-child(2) { width: 10px; }
  .mtt-sample-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .mtt-sample { padding: 18px; }
  .mtt-sample-heading { margin-bottom: 18px; }
  .mtt-stage-heading { gap: 9px; font-size: 12px; }
  .mtt-flow .mtt-match-table th, .mtt-flow .mtt-match-table td { padding: 10px; font-size: 12px; }
  .mtt-flow .mtt-match-table th:first-child, .mtt-flow .mtt-match-table td:first-child { width: 36%; font-size: 11px; }
  .mtt-outcome { align-items: flex-start; flex-direction: column; gap: 20px; }
  .mtt-outcome strong { font-size: 25px; }
  .mtt-score { margin-left: 16px; }
}

@media (max-width: 687px) {
  .eval-scroll-hint { display: block; margin-top: 10px; color: var(--muted); font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-art-frame { transition: none; }
  .header-compact { animation: none; }
}

/* Persimmon uses the public NVFP4 article's reading widths and type scale. */
@media screen {
  body.persimmon-page { --reading-width: 860px; --shell-width: 1120px; line-height: 1.65; }
  :is(.persimmon-page, .model-card-page) .site-header { padding: 20px max(20px, calc((100vw - var(--shell-width)) / 2)) 14px; }
  :is(.persimmon-page, .model-card-page) .site-logo { height: 42px; }
  .persimmon-page .article-shell { display: block; width: min(var(--shell-width), calc(100% - 40px)); margin: 0 auto 80px; }
  .persimmon-page .article-content { width: min(var(--reading-width), 100%); margin: 56px auto 0; font-size: 1.02rem; line-height: 1.65; }
  .persimmon-page .article-content h2, .persimmon-page .article-content h3 { line-height: 1.08; letter-spacing: normal; }
  .persimmon-page .article-content h2 { margin: 72px 0 20px; padding-top: 6px; font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
  .persimmon-page .article-content h3 { margin: 46px 0 16px; font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
  .persimmon-page .article-content h4 { font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.35rem); font-weight: 400; line-height: 1.18; letter-spacing: normal; }
  .persimmon-page .article-content p, .persimmon-page .article-content ul, .persimmon-page .article-content ol { margin-bottom: 20px; }
  .persimmon-page .article-content li + li { margin-top: 8px; }
  .persimmon-page .persimmon-intro-copy > p:first-child { font-family: var(--sans); font-size: inherit; line-height: inherit; }
  .persimmon-page .hero-metric { width: min(var(--reading-width), 100%); }
  .persimmon-page .article-content .hero-metric .metric-chart-title { margin: 0 0 28px; padding: 0; font-family: var(--sans); font-size: 22px; line-height: 1.3; font-weight: 500; letter-spacing: -.02em; }
  .persimmon-page .hero-art { width: 100vw; margin-left: calc(50% - 50vw); }
  .persimmon-page .hero-art-poster, .persimmon-page .hero-art-frame { transform: scale(1.5); transform-origin: 50% 59%; }
  .persimmon-page .hero-heading h1 { max-width: 980px; font-size: clamp(2.3rem, 4.6vw, 4.1rem); line-height: 1.02; letter-spacing: normal; }
  .persimmon-page .hero-heading .article-subtitle { max-width: 920px; margin-top: 20px; font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.35; }
  .persimmon-page .article-meta { color: var(--ink); font-family: var(--serif); font-size: 1.05rem; }
  .persimmon-page .article-toc { display: none; }
  .persimmon-page .toc-label { margin-bottom: 10px; color: #8a847a; font-size: .66rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
  .persimmon-page .article-toc a { padding: 3px 0 3px 11px; border-left: 2px solid #e4ded2; color: #6d6860; font-size: .8rem; line-height: 1.4; }
  .persimmon-page .article-toc a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; text-decoration: none; }
  .persimmon-page .toc-mobile { display: block; width: min(var(--reading-width), 100%); margin: 30px auto 0; padding: 12px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 16px; }
  .persimmon-page .toc-mobile summary { font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  .persimmon-page .toc-mobile ol { margin: 12px 0 4px; padding-left: 24px; }
  .persimmon-page .toc-mobile li { margin: 7px 0; padding: 0; }
  .persimmon-page .persimmon-intro-layout { position: relative; }
  .persimmon-page .persimmon-sidenote { max-width: 320px; margin: 24px 0; padding: 0; border: 0; color: #55504a; font-family: var(--sans); font-size: 13px; line-height: 1.45; }
  .persimmon-page .persimmon-sidenote h3 { margin: 0 0 8px; font-family: inherit; font-size: inherit; font-weight: 600; line-height: inherit; }
  .persimmon-page .persimmon-sidenote p { margin: 0; color: inherit; font-size: inherit; }
  .persimmon-page .site-footer { width: min(var(--shell-width), calc(100% - 40px)); padding: 34px 0 42px; }
}

@media screen and (min-width: 701px) {
  .persimmon-page .hero-heading { left: max(20px, (100vw - var(--shell-width)) / 2); width: calc(min(var(--shell-width), 100vw - 40px) * .52); }
  .persimmon-page .hero-art-poster, .persimmon-page .hero-art-frame { left: calc(min(var(--shell-width), 100vw - 40px) * .26); }
}

@media screen and (min-width: 701px) and (max-width: 1100px) {
  .persimmon-page .hero-art { --painting-height: min(clamp(520px, 66svh, 680px), calc((100vw - 40px) * .75)); }
  .persimmon-page .hero-art-poster, .persimmon-page .hero-art-frame { transform: scale(1.25); }
}

@media screen and (min-width: 1460px) {
  .persimmon-page .article-shell { display: grid; grid-template-columns: minmax(0, 1fr) var(--reading-width) minmax(0, 1fr); }
  /* Keep the reading column centered and place navigation in its left gutter. */
  .persimmon-page .article-toc { display: block; position: sticky; grid-column: 1; grid-row: 2; align-self: start; justify-self: end; top: 140px; left: auto; width: 196px; max-height: calc(100vh - 180px); overflow-y: auto; margin: 56px 40px 0 0; padding-right: 10px; }
  /* The backdrop follows the TOC's own bounds, including its sticky position. */
  .persimmon-page .article-toc { background: color-mix(in srgb, var(--bg) 88%, transparent); box-shadow: 0 0 20px 12px color-mix(in srgb, var(--bg) 88%, transparent); }
  .persimmon-page .toc-mobile { display: none; }
  .persimmon-page .persimmon-sidenote { position: absolute; top: -.2em; right: max(-244px, calc(-6px - (100vw - var(--shell-width)) / 2)); width: min(210px, calc((100vw - var(--shell-width)) / 2 - 18px)); margin: 0; font-size: 12px; line-height: 1.5; opacity: .55; }
  .persimmon-page .persimmon-sidenote:hover, .persimmon-page .persimmon-sidenote:focus-within { opacity: 1; }
}

@media screen and (max-width: 760px) {
  .persimmon-page .article-shell, .persimmon-page .site-footer { width: min(calc(100% - 28px), var(--shell-width)); }
  .persimmon-page .article-content { margin-top: 36px; font-size: .98rem; }
  .persimmon-page .article-content h2 { margin-top: 54px; }
}

@media screen and (max-width: 700px) {
  :is(.persimmon-page, .model-card-page) .site-header { padding-block: 10px; }
  .persimmon-page .hero-heading { margin-inline: 14px; }
  .persimmon-page .article-content .hero-metric .metric-chart-title { margin-bottom: 22px; font-size: 20px; }
  .persimmon-page .hero-art-poster, .persimmon-page .hero-art-frame { transform: scale(1.45); }
}

@media print {
  .site-header { position: static; }
  .site-header[data-folded="true"] { display: none; }
  .site-nav, .header-compact-actions, .article-toc, .toc-mobile, .footer-top { display: none; }
  .article-shell { display: block; width: 100%; }
  .article-hero { padding-top: 30px; }
  .article-content { max-width: none; }
  .article-content h2, .article-content h3 { break-after: avoid; }
  .table-scroll { overflow: visible; }
  .article-content table { min-width: 0; }
  .mtt-reference, .mtt-sample, .mtt-reveal-stage, .hero-metric, .eval-figure { break-inside: avoid; }
  .eval-plot-scroll { overflow: visible; }
  .article-content .eval-plot-scroll :is(img, svg) { min-width: 0; }
  .eval-scroll-hint { display: none; }
  .hero-art { height: 420px; }
  .hero-art-frame { display: none; }
  .hero-art[data-state="ready"] .hero-art-poster { visibility: visible; }
  .hero-art[data-dissolving="true"] .hero-art-poster { opacity: 1; }
}

/* Article reading position: one thin progress line and a quiet section label. */
.persimmon-page .header-reading-position { display: flex; align-items: center; flex: 1; min-width: 0; gap: 18px; }
.persimmon-page .header-reading-position .header-compact-title { flex-shrink: 0; }
.persimmon-page .header-current-section { min-width: 0; padding-left: 18px; border-left: 1px solid var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; line-height: 1.5; }
.persimmon-page .header-current-section-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.persimmon-page .header-reading-progress { position: absolute; inset: auto 0 0; height: 2px; overflow: hidden; pointer-events: none; }
.persimmon-page .header-reading-progress > span { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.persimmon-page .toc-mobile a[aria-current="location"] { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
@media screen and (max-width: 700px) {
  .persimmon-page .header-reading-position { width: 100%; gap: 14px; }
  .persimmon-page .header-current-section { padding-left: 14px; font-size: 11px; }
}
@media print {
  .persimmon-page .header-reading-progress, .persimmon-page .header-current-section { display: none; }
}

/* Native section links stay quiet until a reader hovers or focuses a heading. */
.persimmon-page .article-content > :is(h2, h3, h4) > .section-permalink { position: relative; color: inherit; text-decoration: none; }
.persimmon-page .article-content > :is(h2, h3, h4) > .section-permalink::after { content: "#" / ""; position: absolute; margin-left: .4em; color: var(--muted); font-family: var(--sans); font-size: .6em; line-height: 1.6; opacity: 0; }
.persimmon-page .article-content > :is(h2, h3, h4) > .section-permalink:hover::after,
.persimmon-page .article-content > :is(h2, h3, h4) > .section-permalink:focus-visible::after { opacity: .65; }
@media print {
  .persimmon-page .section-permalink::after { display: none; }
}

/* A few marks are visible in the green banner before the fruit diffuses. */
.persimmon-page .hero-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 2px 2.5px at 4% 24%, rgb(103 124 73 / .24) 80%, transparent),
    radial-gradient(ellipse 2px 2.5px at 16% 78%, rgb(177 106 55 / .26) 80%, transparent),
    radial-gradient(ellipse 2px 2.5px at 25% 32%, rgb(155 78 48 / .22) 80%, transparent),
    radial-gradient(ellipse 2px 2.5px at 33% 70%, rgb(103 124 73 / .24) 80%, transparent),
    radial-gradient(ellipse 2px 2.5px at 42% 20%, rgb(177 106 55 / .26) 80%, transparent),
    radial-gradient(ellipse 2px 2.5px at 48% 55%, rgb(155 78 48 / .22) 80%, transparent),
    radial-gradient(ellipse 2px 2.5px at 57% 80%, rgb(103 124 73 / .24) 80%, transparent),
    radial-gradient(ellipse 2px 2.5px at 63% 30%, rgb(177 106 55 / .26) 80%, transparent),
    radial-gradient(ellipse 2px 2.5px at 72% 65%, rgb(155 78 48 / .22) 80%, transparent),
    radial-gradient(ellipse 2px 2.5px at 79% 18%, rgb(103 124 73 / .24) 80%, transparent),
    radial-gradient(ellipse 2px 2.5px at 89% 78%, rgb(177 106 55 / .26) 80%, transparent),
    radial-gradient(ellipse 2px 2.5px at 97% 32%, rgb(155 78 48 / .22) 80%, transparent);
  transition: opacity 420ms ease;
}
.persimmon-page:has(.hero-art[data-dissolving="true"]) .hero-art::before { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .persimmon-page .hero-art::before { transition: none; }
}
@media print {
  .persimmon-page .hero-art::before { content: none; }
}

/* The article shortcuts join the persistent navigation after the hero scrolls away. */
:is(.persimmon-page, .model-card-page) .site-header > .header-compact-actions {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  gap: 22px;
  white-space: nowrap;
  animation: header-fold-in .18s ease-out;
}
@media screen and (min-width: 701px) {
  :is(.persimmon-page, .model-card-page) .site-header > .header-compact-actions { animation-name: header-actions-in; }
}
@keyframes header-actions-in { from { opacity: 0; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }
@media screen and (max-width: 700px) {
  :is(.persimmon-page, .model-card-page) .site-header > :is(.site-brand, .site-nav) { transition: transform .18s ease-out; }
  :is(.persimmon-page, .model-card-page) .site-header[data-folded="true"] > .site-brand { transform: translateY(-20px) scale(.85); transform-origin: left center; }
  :is(.persimmon-page, .model-card-page) .site-header[data-folded="true"] > .site-nav { transform: translateY(-20px); }
  :is(.persimmon-page, .model-card-page) .site-header > .header-compact-actions { inset: auto 14px 8px; width: auto; transform: none; justify-content: center; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.persimmon-page, .model-card-page) .site-header > .header-compact-actions { animation: none; }
  :is(.persimmon-page, .model-card-page) .site-header > :is(.site-brand, .site-nav) { transition: none; }
}

.margin-note-row { position: relative; }
.article-content .margin-footnote { min-width: 0; max-width: 100%; overflow-wrap: anywhere; color: #777168; font-family: var(--sans); font-size: 12px; line-height: 1.5; margin: 12px 0 24px; }
.article-content .margin-footnote p { display: inline; font-size: inherit; line-height: inherit; margin: 0; }
.margin-footnote-number { font-weight: 600; }
@media screen and (min-width: 1460px) {
  .article-content .margin-footnote { grid-column: 2; width: 190px; margin: 0; }
  .margin-note-row { display: grid; grid-template-columns: 100% 190px; column-gap: 32px; }
  .margin-note-row > p { grid-column: 1; grid-row: 1 / span 20; }
}

.model-card-page .site-header { --shell-width: 1120px; }

.figure-caption-control { position: relative; display: inline-block; }
.figure-caption-button { border: 0; border-bottom: 1px dotted currentColor; padding: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.figure-caption-card { position: absolute; top: 100%; left: 0; z-index: 70; width: min(520px, calc(100vw - 64px)); box-sizing: border-box; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 8px 28px #0002; color: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 400; line-height: 1.55; text-transform: none; letter-spacing: normal; max-height: 60vh; overflow: auto; }
.figure-caption-card[hidden] { display: none; }
@media print { .figure-caption-card[hidden], .figure-caption-card { display: block; position: static; width: auto; max-height: none; border: 0; box-shadow: none; } }

/* An authored playground conversation, available without JavaScript or API calls. */
.playground-example { margin: 32px 0 40px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.6; }
.example-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.playground-example .example-header h3 { margin: 0; font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.example-header > span, .example-footer > span { color: var(--muted); font-size: 12px; }
.example-scenario { padding: 16px 24px; border-bottom: 1px solid var(--line); background: #fafaf7; border-radius: 0; }
.example-scenario > summary { color: var(--muted); font-size: 12px; font-weight: 500; cursor: pointer; }
.playground-example .example-scenario > p { margin: 10px 0 0; font-size: 13px; line-height: 1.6; }
.example-cast { position: relative; display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.example-person > summary { display: flex; align-items: center; gap: 8px; padding: 4px; border: 1px solid transparent; border-radius: 24px; list-style: none; font-size: 13px; cursor: pointer; }
.example-person > summary::-webkit-details-marker { display: none; }
.example-person > summary:hover, .example-person[open] > summary { background: #f3f2ed; border-color: var(--line); }
.example-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--avatar-color); color: #fff; font-size: 11px; font-weight: 600; }
.example-profile { position: absolute; z-index: 5; top: calc(100% - 4px); left: 16px; right: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 6px 18px #0000000d; }
.playground-example .example-profile p { margin: 6px 0 0; font-size: 13px; line-height: 1.6; }
.playground-example .example-transcript { display: grid; gap: 24px; max-height: 480px; margin: 0; padding: 24px; overflow-y: auto; overscroll-behavior-y: auto; scrollbar-width: thin; scrollbar-color: #d5d5ce transparent; list-style: none; }
.playground-example .example-message { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 12px; margin: 0; }
.example-message > div { min-width: 0; }
.example-message strong { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; }
.playground-example .example-message p { margin: 0; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.example-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--line); }
.example-footer a { font-size: 13px; font-weight: 500; }
@media (max-width: 600px) {
  .example-header, .example-scenario, .example-footer { padding-inline: 16px; }
  .example-cast { gap: 4px; padding: 12px; }
  .example-person > summary { gap: 6px; font-size: 12px; }
  .playground-example .example-transcript { max-height: 440px; padding: 20px 16px; }
}
@media print {
  .playground-example .example-transcript { max-height: none; overflow: visible; }
  .example-profile { position: static; box-shadow: none; }
}