/* Tokens matching lars.yencken.org: dark only, eigengrau ground, Source Sans 3 (loaded by the site). */
.aitl-fig {
  --aitl-font: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --aitl-surface: rgb(22, 22, 29);
  --aitl-ink: #f2f2f4;
  --aitl-ink-2: #c3c4cc;
  --aitl-ink-3: #8f909b;
  --aitl-grid: #2a2a33;
  --aitl-axis: #4d4e59;
  --aitl-rule: #363742;
  --aitl-oai: #3987e5;
  --aitl-anth: #d95926;
  --aitl-goog: #199e70;
  --aitl-other: #6f7079;
  --aitl-trend: #c9cad2;
  --aitl-band: rgba(255, 255, 255, 0.045);
  --aitl-tip-bg: rgb(32, 32, 39);
}

/* Reserve each figure's drawn height until the script fills it (.aitl-ready), so the post
   doesn't jump on load. Heights measured on the site, closed data tables, at its layout
   breakpoints: figures are 50rem wide from 1024px, 36rem from 624px, viewport minus 48px below. */
.aitl-fig[data-aitl-chart]:not(.aitl-ready) { min-height: 600px; }
.aitl-fig[data-aitl-chart="anthropic-speedup"][data-aitl-view="public"]:not(.aitl-ready) { min-height: 587px; }
.aitl-fig[data-aitl-chart="anthropic-speedup"][data-aitl-view="internal"]:not(.aitl-ready) { min-height: 668px; }
.aitl-fig[data-aitl-chart="speedup-ratios"]:not(.aitl-ready) { min-height: 785px; }
.aitl-fig[data-aitl-chart="frontier-trend"]:not(.aitl-ready) { min-height: 716px; }
.aitl-fig[data-aitl-chart="anthropic-cadence"]:not(.aitl-ready) { min-height: 1085px; }
@media (min-width: 480px) {
  .aitl-fig[data-aitl-chart="anthropic-cadence"]:not(.aitl-ready) { min-height: 877px; }
  .aitl-fig[data-aitl-chart="anthropic-speedup"][data-aitl-view="public"]:not(.aitl-ready) { min-height: 535px; }
  .aitl-fig[data-aitl-chart="anthropic-speedup"][data-aitl-view="internal"]:not(.aitl-ready) { min-height: 605px; }
  .aitl-fig[data-aitl-chart="speedup-ratios"]:not(.aitl-ready) { min-height: 680px; }
  .aitl-fig[data-aitl-chart="frontier-trend"]:not(.aitl-ready) { min-height: 645px; }
}
@media (min-width: 624px) {
  .aitl-fig[data-aitl-chart="anthropic-speedup"][data-aitl-view="public"]:not(.aitl-ready) { min-height: 547px; }
  .aitl-fig[data-aitl-chart="anthropic-speedup"][data-aitl-view="internal"]:not(.aitl-ready) { min-height: 583px; }
  .aitl-fig[data-aitl-chart="speedup-ratios"]:not(.aitl-ready) { min-height: 588px; }
  .aitl-fig[data-aitl-chart="frontier-trend"]:not(.aitl-ready) { min-height: 660px; }
  .aitl-fig[data-aitl-chart="anthropic-cadence"]:not(.aitl-ready) { min-height: 831px; }
}
@media (min-width: 1024px) {
  .aitl-fig[data-aitl-chart="anthropic-speedup"][data-aitl-view="public"]:not(.aitl-ready) { min-height: 619px; }
  .aitl-fig[data-aitl-chart="anthropic-speedup"][data-aitl-view="internal"]:not(.aitl-ready) { min-height: 680px; }
  .aitl-fig[data-aitl-chart="speedup-ratios"]:not(.aitl-ready) { min-height: 588px; }
  .aitl-fig[data-aitl-chart="frontier-trend"]:not(.aitl-ready) { min-height: 742px; }
  .aitl-fig[data-aitl-chart="anthropic-cadence"]:not(.aitl-ready) { min-height: 834px; }
}

/* Structure for the "Have AI timelines suddenly moved?" figures. Every rule is scoped to .aitl-fig;
   colours come from --aitl-* tokens, defined by a theme file (theme-site.css or the artifact page). */
.aitl-fig {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 2rem 0;
  font-family: var(--aitl-font);
  color: var(--aitl-ink);
  text-align: left;
  line-height: 1.45;
}
.aitl-fig .aitl-title {
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  text-wrap: balance;
}
.aitl-fig .aitl-dek { color: var(--aitl-ink-2); font-size: 1rem; max-width: 62ch; }
.aitl-fig .aitl-controls { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; }
.aitl-fig .aitl-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.85rem; color: var(--aitl-ink-2); }
.aitl-fig .aitl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.aitl-fig .aitl-legend svg { flex: none; }
.aitl-fig .aitl-seg { display: inline-flex; border: 1px solid var(--aitl-rule); border-radius: 7px; padding: 2px; gap: 2px; }
.aitl-fig .aitl-seg button {
  font: inherit; font-size: 0.85rem; color: var(--aitl-ink-2); background: transparent;
  border: 0; border-radius: 5px; padding: 3px 10px; cursor: pointer; line-height: 1.4;
}
.aitl-fig .aitl-seg button[aria-pressed="true"] { background: var(--aitl-ink); color: var(--aitl-surface); }
.aitl-fig .aitl-seg button:focus-visible,
.aitl-fig summary:focus-visible { outline: 2px solid var(--aitl-oai); outline-offset: 2px; }
.aitl-fig .aitl-chart { position: relative; width: 100%; }
.aitl-fig .aitl-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.aitl-fig .aitl-chart text { font-family: var(--aitl-font); fill: var(--aitl-ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.aitl-fig .aitl-chart .aitl-lbl { fill: var(--aitl-ink-2); font-size: 12.5px; }
.aitl-fig .aitl-chart .aitl-lbl-strong { fill: var(--aitl-ink); font-size: 12.5px; font-weight: 600; }
.aitl-fig .aitl-chart .aitl-halo { paint-order: stroke; stroke: var(--aitl-surface); stroke-width: 4px; stroke-linejoin: round; }
.aitl-fig .aitl-tip {
  position: absolute; pointer-events: none; z-index: 2;
  background: var(--aitl-tip-bg); color: var(--aitl-ink); border: 1px solid var(--aitl-rule); border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); padding: 7px 10px; font-size: 0.85rem; line-height: 1.4;
  min-width: 150px; max-width: 250px; font-variant-numeric: tabular-nums;
}
.aitl-fig .aitl-tip[hidden] { display: none; }
.aitl-fig .aitl-tip b { font-weight: 600; }
.aitl-fig .aitl-muted { color: var(--aitl-ink-3); }
.aitl-fig .aitl-source { font-size: 0.82rem; color: var(--aitl-ink-3); max-width: 75ch; }
.aitl-fig .aitl-details { font-size: 0.85rem; color: var(--aitl-ink-2); }
.aitl-fig summary { cursor: pointer; color: var(--aitl-ink-3); }
.aitl-fig .aitl-tbl { overflow-x: auto; margin-top: 6px; }
.aitl-fig .aitl-tbl table { border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 100%; margin: 0; border: 0; font-size: 0.85rem; }
.aitl-fig .aitl-tbl th,
.aitl-fig .aitl-tbl td { text-align: left; padding: 3px 12px 3px 0; border: 0; border-bottom: 1px solid var(--aitl-rule); white-space: nowrap; font-size: 0.85rem; }
.aitl-fig .aitl-tbl th { font-weight: 600; color: var(--aitl-ink); }
.aitl-fig .aitl-tbl .num { text-align: right; }
.aitl-fig .aitl-evidence { margin-top: 4px; }
.aitl-fig .aitl-evidence table,
.aitl-fig .aitl-evidence th,
.aitl-fig .aitl-evidence td { font-size: 0.92rem; }
.aitl-fig .aitl-evidence td:first-child { font-weight: 600; }
.aitl-fig .aitl-evidence th { white-space: normal; vertical-align: bottom; }
/* Below the post's wide layout, drop the 80% window column (it stays in the hover). */
@media (max-width: 1023px) {
  .aitl-fig .aitl-evidence th:nth-child(3),
  .aitl-fig .aitl-evidence td:nth-child(3) { display: none; }
}
.aitl-fig .aitl-note { font-size: 0.92rem; }
@media (max-width: 520px) {
  .aitl-fig .aitl-title { font-size: 1.1rem; }
  .aitl-fig .aitl-chart text { font-size: 11px; }
}