/* The blog in an engineering blog's plain format: the landing page's header as a bar held at the
   top, then one reading column with the title, the byline with the post's tags and a banner, the text with a contents list in the left margin on wide screens, figures at the
   column's width, quiet notes and references at the end, and the landing page's footer. One type
   scale: 19px text on 1.75 lines, serif titles and headings, 15px around the text (captions,
   references, contents), 14 and 16px inside tables, and the landing page's mono capitals for
   labels. The type is the memo's (/assets/shared/reader/); the black, the warm white, the
   champagne metal and the mono are the landing page's, so the blog reads as the
   same site. None of the memo's hero, chapters or backdrop is used. */

/* Titles in the memo's serif, with two letters it cannot set as a post needs them. Orpheus Pro
   has no Greek, so Pagella (the landing page's served fallback for it) draws the τ of τ³-Voice;
   and Orpheus draws "#" as a numero sign, so "#1" takes Pagella's number sign too. */
@font-face {
  font-family: "Blog Number Sign";
  src: url("/assets/shared/fonts/texgyrepagella-regular.woff2") format("woff2");
  unicode-range: U+0023;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
body.blog-page { --font-serif: "Blog Number Sign", "Memo Orpheus Pro", "TeX Gyre Pagella", serif; }

/* The landing page's technical voice for labels: Space Mono, in capitals. */
@font-face {
  font-family: "Avartha Mono";
  src: url("/assets/shared/fonts/space-mono-normal-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* The landing page's colours: black, its warm white (#F8F5E7) for text and 66% of it for quieter
   text, and the memo's champagne (#F8F5E7, #CDC0A2, #82785E, the metal of its figures) as the
   accent, rather than the landing button's yellower finish. Avartha's wordmark in Figure 2 takes the metal; its other marks, its
   leaderboard row, citations and the contents marker take the solid champagne. Light mode keeps the
   memo's neutrals and darkens the champagne to read on off-white. The memo's chart greys are set
   here too (its own light rule scopes them under a nested .memo-document, which these pages do
   not have). */
html.reader-document.memo-document body.reader-page.blog-page {
  --blog-mono: "Avartha Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --blog-rule: color-mix(in srgb, var(--foreground) 12%, transparent);
  --blog-accent: #cdc0a2;
  --blog-accent-metal: linear-gradient(180deg, #f8f5e7 8%, #cdc0a2 50%, #82785e 95%);
  --editorial-mid: var(--blog-accent);
}
html.reader-document.memo-document:not([data-theme="light"]) body.reader-page.blog-page {
  --foreground: #f8f5e7;
  --muted-foreground: rgb(248 245 231 / .66);
  background: #000;
}
html.reader-document.memo-document[data-theme="light"] body.reader-page.blog-page {
  --blog-accent: #6e6552;
  --blog-accent-metal: linear-gradient(180deg, #8f8570 8%, #6e6552 55%, #57503f 95%);
  --memo-tau-grid: #e4e4e4;
  --memo-tau-tick: #8a8a8a;
  --memo-tau-name: #3d3d3d;
  --memo-tau-point: #9a9a9a;
}
/* The memo's textured backdrop stays off: the landing page is plain black. */
html.reader-document.memo-document body.blog-page .reader-backdrop { display: none; }
/* Labels in the mono's capitals, as the landing page sets its navigation and footer. */
html.reader-document.memo-document body.blog-page :is(.blog-back, .blog-meta, .blog-tags, .blog-toc-title, .blog-figure-label, .blog-footer-in) {
  font-family: var(--blog-mono);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---------- Site bar ----------
   The landing page's header, held at the top as the reader scrolls: the flat lockup at the left,
   home, and Careers and the blog at the right in the mono's capitals, on a translucent black over
   a hairline. Anchors land below it. */
html.reader-document.memo-document:has(> body.blog-page) { --blog-bar: 64px; scroll-padding-top: calc(var(--blog-bar) + 32px); }
html.reader-document.memo-document body.blog-page .blog-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--blog-rule);
  background: color-mix(in srgb, var(--background) 84%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
html.reader-document.memo-document body.blog-page .blog-bar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1200px;
  height: var(--blog-bar);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
}
html.reader-document.memo-document body.blog-page .blog-brand { display: inline-flex; align-items: center; min-height: 44px; border: 0; }
html.reader-document.memo-document body.blog-page .blog-brand img { display: block; width: 132px; height: auto; }
/* The lockup is drawn for black; the light palette darkens it. */
html.reader-document.memo-document[data-theme="light"] body.blog-page .blog-brand img { filter: brightness(.35); }
html.reader-document.memo-document body.blog-page .blog-bar nav { display: flex; align-items: center; gap: 0 clamp(20px, 2.4vw, 36px); }
html.reader-document.memo-document body.blog-page .blog-bar nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  color: color-mix(in srgb, var(--foreground) 80%, transparent);
  font: 400 13px/1 var(--blog-mono);
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s;
}
html.reader-document.memo-document body.blog-page .blog-bar nav a:is(:hover, [aria-current]) { color: var(--foreground); }
html.reader-document.memo-document body.blog-page .blog-bar a:focus-visible { outline: 2px solid var(--blog-accent); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  html.reader-document.memo-document body.blog-page .blog-bar nav a { transition: none; }
}
@media (max-width: 640px) {
  html.reader-document.memo-document:has(> body.blog-page) { --blog-bar: 56px; }
  html.reader-document.memo-document body.blog-page .blog-brand img { width: 104px; }
  html.reader-document.memo-document body.blog-page .blog-bar nav a { font-size: 12px; }
}

/* ---------- Footer ----------
   The landing page's: the social marks at the far left, the company and the trust center at the
   far right, over a hairline; on phones, one row without the trust center. Each mark is drawn to a tight box and sized to read as an equal. */
html.reader-document.memo-document body.blog-page .blog-footer { border-top: 1px solid var(--blog-rule); }
html.reader-document.memo-document body.blog-page .blog-footer-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px clamp(16px, 4vw, 40px);
  color: var(--muted-foreground);
  font-size: 13px;
  line-height: 1.3;
}
html.reader-document.memo-document body.blog-page .blog-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  color: color-mix(in srgb, var(--foreground) 80%, transparent);
  font: inherit;
  text-decoration: none;
  transition: color .2s, transform .2s;
}
html.reader-document.memo-document body.blog-page .blog-footer a:hover { color: var(--foreground); }
html.reader-document.memo-document body.blog-page .blog-social { display: flex; align-items: center; gap: 4px; margin-left: -12px; }
html.reader-document.memo-document body.blog-page .blog-social a:hover { transform: translateY(-1px); }
html.reader-document.memo-document body.blog-page .blog-footer .lp-mark { display: block; width: auto; }
html.reader-document.memo-document body.blog-page .blog-footer .lp-mark.is-x { height: 1.2em; }
html.reader-document.memo-document body.blog-page .blog-footer .lp-mark.is-in { height: 1.12em; }
html.reader-document.memo-document body.blog-page .blog-footer .lp-mark.is-mail { height: 1.02em; }
html.reader-document.memo-document body.blog-page .blog-footer-end { display: flex; align-items: center; gap: 0 clamp(20px, 2.6vw, 40px); }
html.reader-document.memo-document body.blog-page .blog-copy { margin: 0; max-width: none; font-size: inherit; }
@media (prefers-reduced-motion: reduce) {
  html.reader-document.memo-document body.blog-page .blog-footer a { transition: none; }
}
/* Phones: one row, the marks at the left and the company at the right, without the trust center. */
@media (max-width: 640px) {
  html.reader-document.memo-document body.blog-page .blog-footer-in { flex-wrap: nowrap; gap: 16px; font-size: 12px; letter-spacing: .04em; }
  html.reader-document.memo-document body.blog-page .blog-footer-end > a { display: none; }
}

/* ---------- The reading column ---------- */
/* At least a screen tall, so the footer sits at the bottom of a short index. */
html.reader-document.memo-document body.blog-page { --blog-gutter: clamp(16px, 4vw, 40px); --blog-top: clamp(32px, 7vw, 80px); }
/* By id, to outrank the memo's own #main rule, which drops the left padding for its rail. */
html.reader-document.memo-document body.blog-page #main.blog-main { min-height: calc(100svh - 160px); padding: var(--blog-top) var(--blog-gutter) clamp(48px, 8vw, 96px); }
html.reader-document.memo-document body.blog-page :is(.blog-article, .blog-index) { max-width: 780px; margin: 0 auto; }
html.reader-document.memo-document body.blog-page .blog-head { margin-bottom: 40px; padding-bottom: 28px; border-bottom: 1px solid var(--blog-rule); }
/* A banner closes the head itself, without the rule. */
html.reader-document.memo-document body.blog-page .blog-head:has(.blog-banner) { margin-bottom: clamp(32px, 4vw, 48px); padding-bottom: 0; border-bottom: 0; }
html.reader-document.memo-document body.blog-page .blog-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: -10px 0 8px;
  border: 0;
  color: var(--muted-foreground);
  font-size: 13px;
  text-decoration: none;
}
html.reader-document.memo-document body.blog-page .blog-back:hover { color: var(--foreground); }
.blog-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
html.reader-document.memo-document body.reader-page.blog-page :is(.blog-title, .blog-prose h2, .blog-entry-title) {
  color: var(--foreground);
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -.005em;
  text-wrap: balance;
}
html.reader-document.memo-document body.reader-page.blog-page .blog-title { margin: 0; font-size: clamp(38px, 4.4vw, 58px); line-height: 1.06; }
html.reader-document.memo-document body.blog-page .blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 24px 0 0;
  max-width: none;
  color: var(--muted-foreground);
  font-size: 13px;
  line-height: 1.5;
}
/* The byline: the author at the left, the date and the rest at the right; on a narrow screen
   the date takes the next line, at the left. */
html.reader-document.memo-document body.blog-page .blog-meta.is-byline { justify-content: space-between; gap: 6px 24px; }
html.reader-document.memo-document body.blog-page .blog-meta-author { color: color-mix(in srgb, var(--foreground) 88%, transparent); }
html.reader-document.memo-document body.blog-page .blog-meta-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
html.reader-document.memo-document body.blog-page :is(.blog-meta:not(.is-byline), .blog-meta-when) > :not(:first-child)::before { margin-right: 10px; content: "·"; }
/* The post's topics: small labels, each in a hairline box with square corners, under the byline
   and under each summary on the index. Quiet and unfilled, so they read as details, not buttons. */
html.reader-document.memo-document body.blog-page .blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  color: var(--blog-accent);
  font-size: 11px;
  letter-spacing: .1em;
  line-height: 1.4;
  list-style: none;
}
html.reader-document.memo-document body.blog-page .blog-tags li {
  margin: 0;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--blog-accent) 38%, transparent);
  border-radius: 2px;
  white-space: nowrap;
}
/* ---------- Banner ----------
   As Prime Intellect opens its posts: a wide picture under the byline, wider than the text,
   square-cornered. Here the whole of the team's champagne swirl (covers/swirl.webp, its lockup
   painted out) sits centred in a black field, so on the black page it floats free, under a very
   light film grain that flickers as film does. Overlaid, the grain sits only in the picture's
   light and leaves the black untouched. The banner is not isolated, so the grain blends with the
   black page itself: an isolated group's half-covered edge row showed as a grey line on iPhones. It stays dark in the light palette: it is a picture. */
html.reader-document.memo-document body.blog-page .blog-banner {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3;
  margin: 28px calc(50% - min(560px, 50vw - var(--blog-gutter))) 0;
  background: #000;
}
/* The picture's own black is a hair above the page's, so its outer edge fades out on every side:
   no square or line ever shows where it meets the page. The element is the picture's own square,
   centred, so the fade follows the picture's edges rather than the banner's. */
.blog-banner-picture {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  margin-inline: auto;
  aspect-ratio: 1;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent), linear-gradient(transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent), linear-gradient(transparent, #000 3%, #000 97%, transparent);
  mask-composite: intersect;
}
.blog-banner-grain {
  position: absolute;
  inset: -64px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.6' intercept='-.8'/%3E%3CfeFuncG type='linear' slope='2.6' intercept='-.8'/%3E%3CfeFuncB type='linear' slope='2.6' intercept='-.8'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 240px 240px;
  mix-blend-mode: overlay;
  opacity: .22;
}
@keyframes blog-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes blog-shine { 0% { background-position: 130% 0, 0 0; } 38%, 100% { background-position: -30% 0, 0 0; } }
@keyframes blog-grain {
  0%, 100% { translate: 0 0; }
  12% { translate: -18px 10px; }
  25% { translate: 14px -22px; }
  37% { translate: -26px -8px; }
  50% { translate: 22px 18px; }
  62% { translate: -10px 26px; }
  75% { translate: 26px -14px; }
  87% { translate: -20px -24px; }
}
@media (prefers-reduced-motion: no-preference) {
  .blog-banner-grain { animation: blog-grain .8s steps(1) infinite; }
}
/* Phones: a little taller, so the figure keeps a fair size at the screen's width. */
@media (max-width: 640px) {
  html.reader-document.memo-document body.blog-page .blog-banner { aspect-ratio: 3 / 2; margin-top: 24px; }
}

/* ---------- The post's text ---------- */
html.reader-document.memo-document body.reader-page.blog-page .blog-prose > p {
  max-width: none;
  margin: 0 0 1.25em;
  color: color-mix(in srgb, var(--foreground) 92%, transparent);
  font-size: 19px;
  line-height: 1.75;
}
html.reader-document.memo-document body.reader-page.blog-page .blog-prose h2 { margin: 64px 0 20px; font-size: clamp(30px, 3vw, 36px); line-height: 1.15; }
@media (max-width: 640px) {
  html.reader-document.memo-document body.reader-page.blog-page .blog-prose > p { font-size: 18px; line-height: 1.7; }
  html.reader-document.memo-document body.reader-page.blog-page .blog-prose h2 { margin-top: 48px; }
}
html.reader-document.memo-document body.reader-page.blog-page .blog-prose > p a:not(.av-editorial-citation) {
  border: 0;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--blog-accent) 70%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
html.reader-document.memo-document body.reader-page.blog-page .blog-prose > p a:not(.av-editorial-citation):hover { text-decoration-color: var(--blog-accent); }

/* Figures at the column's width, each with a numbered caption beneath. */
html.reader-document.memo-document body.blog-page .blog-figure { margin: 40px 0 48px; }
html.reader-document.memo-document body.reader-page.blog-page .blog-figure > figcaption { margin-top: 14px; max-width: none; color: var(--muted-foreground); font-size: 15px; line-height: 1.6; }
html.reader-document.memo-document body.reader-page.blog-page .blog-figure > figcaption a { border: 0; color: inherit; text-decoration: underline; text-underline-offset: .2em; }
/* The figure's number in the mono's capitals and the champagne, as the landing page sets its labels. */
html.reader-document.memo-document body.reader-page.blog-page .blog-figure-label { color: var(--blog-accent); font-size: 13px; }

/* Notes and references close the post in small type, under a rule. */
html.reader-document.memo-document body.blog-page .blog-end { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--blog-rule); }
html.reader-document.memo-document body.reader-page.blog-page .blog-end .av-editorial-references { margin: 0 0 28px; padding: 0; border: 0; }
/* Notes and References are labels, set like Contents in the mono's capitals. */
html.reader-document.memo-document body.reader-page.blog-page .blog-end .av-editorial-references h2 {
  margin: 0 0 12px;
  color: var(--foreground);
  font-family: var(--blog-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .06em;
  line-height: 1.4;
  text-transform: uppercase;
}
html.reader-document.memo-document body.reader-page.blog-page .blog-end .av-editorial-references :is(li, p) { color: var(--muted-foreground); font-size: 15px; line-height: 1.65; }

/* ---------- Contents: in the left margin on wide screens, following the reader ----------
   It hangs off the column's left edge, as wide as the margin allows, and sticks while the post
   scrolls. The current section is in the foreground with a champagne marker that slides to it. */
html.reader-document.memo-document body.blog-page .blog-body { position: relative; }
html.reader-document.memo-document body.blog-page .blog-toc { display: none; }
@media (min-width: 1200px) {
  html.reader-document.memo-document body.blog-page .blog-toc {
    position: absolute;
    top: 0;
    right: calc(100% + 56px);
    bottom: 0;
    display: block;
    width: min(220px, calc((100vw - 780px) / 2 - 88px));
  }
}
html.reader-document.memo-document body.blog-page .blog-toc-in { position: sticky; top: calc(var(--blog-bar) + 40px); }
html.reader-document.memo-document body.reader-page.blog-page .blog-toc-title { margin: 0 0 12px; color: var(--foreground); font-size: 13px; line-height: 1.4; }
html.reader-document.memo-document body.blog-page .blog-toc-track { position: relative; border-left: 1px solid var(--blog-rule); }
html.reader-document.memo-document body.blog-page .blog-toc-marker {
  position: absolute;
  top: 0;
  left: -1px;
  width: 2px;
  height: 1.5em;
  background: var(--blog-accent);
  transition: transform .2s ease, height .2s ease;
}
html.reader-document.memo-document body.blog-page .blog-toc ol { margin: 0; padding: 0; list-style: none; }
html.reader-document.memo-document body.blog-page .blog-toc a {
  display: block;
  padding: 5px 0 5px 16px;
  border: 0;
  color: var(--muted-foreground);
  font-size: 15px;
  line-height: 1.45;
  text-decoration: none;
  transition: color .2s ease;
}
html.reader-document.memo-document body.blog-page .blog-toc a:hover,
html.reader-document.memo-document body.blog-page .blog-toc a[aria-current] { color: var(--foreground); }
@media (prefers-reduced-motion: reduce) {
  html.reader-document.memo-document body.blog-page :is(.blog-toc-marker, .blog-toc a) { transition: none; }
}

/* ---------- Index: a dated list ---------- */
html.reader-document.memo-document body.blog-page .blog-list { margin: 0; padding: 0; list-style: none; }
html.reader-document.memo-document body.blog-page .blog-entry { padding: 0 0 32px; border-bottom: 1px solid var(--blog-rule); }
html.reader-document.memo-document body.blog-page .blog-entry + .blog-entry { padding-top: 32px; }
/* An entry: the date, the title, the summary, then its topics. */
html.reader-document.memo-document body.blog-page .blog-entry .blog-meta { margin: 0; }
html.reader-document.memo-document body.reader-page.blog-page .blog-entry-title { margin: 12px 0 0; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.12; }
html.reader-document.memo-document body.reader-page.blog-page .blog-entry-title a { border: 0; color: inherit; text-decoration: none; }
html.reader-document.memo-document body.reader-page.blog-page .blog-entry-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
html.reader-document.memo-document body.blog-page .blog-entry-summary { margin: 14px 0 0; max-width: none; color: var(--muted-foreground); font-size: 18px; line-height: 1.6; }

/* ---------- Footnotes: a superscript marker, and the notes above the references ---------- */
html.reader-document.memo-document body.blog-page .blog-note-mark { font-size: .7em; line-height: 0; }
html.reader-document.memo-document body.blog-page .blog-note-mark a {
  position: relative;
  border: 0;
  color: var(--blog-accent);
  text-decoration: none;
}
/* As on a citation, an invisible box keeps a 44 px target around the number. */
html.reader-document.memo-document body.blog-page .blog-note-mark a::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  content: "";
}
html.reader-document.memo-document body.blog-page .blog-note-back { border: 0; color: var(--blog-accent); text-decoration: none; }

/* ---------- Leaderboard (figures.tsx): an editorial table, scores over zero-based bars ----------
   Editorial tables put Avartha in the last column and tint it; a leaderboard puts Avartha in a
   row, so that tint is off here and Avartha's row takes the accent instead. Model names are data,
   so they drop the tracked label voice. */
html.reader-document.memo-document body.blog-page .blog-board .av-editorial-table-scroll { margin: 4px 0 20px; }
html.reader-document.memo-document body.blog-page .blog-board-table {
  --av-reader-table-min-width: 0px;
  table-layout: auto;
  background: transparent;
}
html.reader-document.memo-document body.reader-page.blog-page .blog-article .blog-board-table :is(th, td),
html.reader-document.memo-document body.reader-page.blog-page .blog-article .blog-board-table :is(th, td):last-child {
  padding: 14px 12px;
  background: none !important;
  box-shadow: none;
  color: var(--memo-tau-name);
  vertical-align: top;
  text-align: left;
}
html.reader-document.memo-document body.reader-page.blog-page .blog-article .blog-board-table thead :is(th, th:last-child) {
  padding-block: 12px;
  color: var(--muted-foreground);
  font-size: 14px !important;
  font-weight: 400;
  letter-spacing: normal !important;
  line-height: 1.35;
  text-transform: none;
  vertical-align: bottom;
}
html.reader-document.memo-document body.reader-page.blog-page .blog-article .blog-board-table tbody :is(th, td) { font-size: 16px !important; }
html.reader-document.memo-document body.reader-page.blog-page .blog-article .blog-board-table tbody th {
  font-size: 16px !important;
  letter-spacing: normal !important;
  overflow-wrap: anywhere;
}
html.reader-document.memo-document body.blog-page .blog-board-table tbody tr + tr :is(th, td) { border-top: 1px solid var(--memo-tau-grid); }
/* The provider under each model, a step below it as in the editorial table. */
html.reader-document.memo-document body.blog-page .blog-article .blog-board-table small { margin-top: 2px; color: var(--muted-foreground); font-size: 14px; letter-spacing: normal; }
/* The provider's mark beside the model, in one tone: grey for the field, the champagne for
   Avartha. Without a mark, the provider's initial in a ring. */
html.reader-document.memo-document body.blog-page .blog-board-model { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: start; }
html.reader-document.memo-document body.blog-page .blog-board-who { display: grid; }
html.reader-document.memo-document body.blog-page .blog-board-logo {
  display: block;
  width: 24px;
  height: 24px;
  background: var(--memo-tau-name);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
html.reader-document.memo-document body.blog-page tr.is-avartha .blog-board-logo { background: var(--blog-accent); }
html.reader-document.memo-document body.blog-page .blog-board-logo.is-initial {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--memo-tau-name) 55%, transparent);
  border-radius: 50%;
  background: none;
  -webkit-mask: none;
  mask: none;
}
html.reader-document.memo-document body.blog-page .blog-board-logo.is-initial::before { color: var(--memo-tau-name); content: attr(data-initial); font-size: 12px; font-weight: 600; line-height: 1; }
@media (forced-colors: active) {
  html.reader-document.memo-document body.blog-page .blog-board-logo { background: CanvasText; forced-color-adjust: none; }
}
html.reader-document.memo-document body.reader-page.blog-page .blog-article .blog-board-table .blog-board-rank { width: 1%; white-space: nowrap; }
html.reader-document.memo-document body.reader-page.blog-page .blog-article .blog-board-table tbody .blog-board-rank { color: var(--memo-tau-tick); }
html.reader-document.memo-document body.blog-page .blog-board-table .blog-board-metric { width: 20%; }
html.reader-document.memo-document body.blog-page .blog-board-value { display: block; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.blog-board-bar { display: block; width: 100%; height: 6px; margin-top: 8px; overflow: visible; }
.blog-board-track { fill: color-mix(in srgb, var(--memo-tau-name) 10%, transparent); }
.blog-board-fill { fill: color-mix(in srgb, var(--memo-tau-name) 45%, transparent); }
.blog-board-table tr.is-avartha .blog-board-fill { fill: var(--blog-accent); }
.blog-board-table tr.is-avartha .blog-board-bar { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--blog-accent) 40%, transparent)); }
/* The memo's metal gradient, restopped to the landing page's champagne, for anything on the page
   that still draws with it. */
html.reader-document.memo-document body.blog-page .av-metal-stop-light { stop-color: #f8f5e7; }
html.reader-document.memo-document body.blog-page .av-metal-stop-mid { stop-color: #cdc0a2; }
html.reader-document.memo-document body.blog-page .av-metal-stop-dark { stop-color: #82785e; }
html.reader-document.memo-document[data-theme="light"] body.blog-page .av-metal-stop-light { stop-color: #8f8570; }
html.reader-document.memo-document[data-theme="light"] body.blog-page .av-metal-stop-mid { stop-color: #6e6552; }
html.reader-document.memo-document[data-theme="light"] body.blog-page .av-metal-stop-dark { stop-color: #4f4939; }
/* Avartha's row in one champagne, the accent: its name, provider, scores, mark and bars, so the
   row reads as one tone rather than three shades of it. */
html.reader-document.memo-document body.reader-page.blog-page .blog-article .blog-board-table tr.is-avartha :is(th, td, td:last-child, small) { color: var(--blog-accent); }
@media (prefers-reduced-motion: no-preference) {
  .blog-board.is-armed .blog-board-fill { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; }
  .blog-board.is-in .blog-board-fill { animation: av-chart-grow 1.4s cubic-bezier(.22, .61, .36, 1) .15s both; }
  .blog-board.is-in tbody tr:nth-child(n + 2) .blog-board-fill { animation-delay: .4s; }
}
/* Phones: each entry takes two lines, its rank and model above its three scores, under one row
   of metric headings. The table keeps its roles in the markup, so it still reads as a table. */
@media (max-width: 640px) {
  html.reader-document.memo-document body.blog-page .blog-board-table :is(thead, tbody) { display: block; }
  html.reader-document.memo-document body.blog-page .blog-board-table { display: block; font-size: 13px; }
  html.reader-document.memo-document body.blog-page .blog-board-table tr { display: grid; grid-template-columns: 2.2em repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding: 12px 0; }
  html.reader-document.memo-document body.reader-page.blog-page .blog-article .blog-board-table :is(th, td),
  html.reader-document.memo-document body.reader-page.blog-page .blog-article .blog-board-table :is(th, td):last-child,
  html.reader-document.memo-document body.reader-page.blog-page .blog-article .blog-board-table thead :is(th, th:last-child) { width: auto; padding: 0; border: 0; }
  /* Rank and Model need no heading on screen here, but keep them for screen readers. */
  html.reader-document.memo-document body.blog-page .blog-board-table thead :is(.blog-board-rank, th:nth-child(2)) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html.reader-document.memo-document body.blog-page .blog-board-table :is(thead th:nth-child(3), tbody td:nth-child(3)) { grid-column: 2; }
  html.reader-document.memo-document body.blog-page .blog-board-table tbody th { grid-column: 2 / -1; }
  html.reader-document.memo-document body.blog-page .blog-board-table tbody tr { border-top: 1px solid var(--memo-tau-grid); }
  html.reader-document.memo-document body.blog-page .blog-board-table tr { grid-template-columns: 2em repeat(3, minmax(0, 1fr)); gap: 4px 12px; padding: 12px 0 14px; }
  /* The headings get an even band between the table's top rule and the first row's hairline, at
     the body's size so they read on a phone; a long one wraps, and all sit on one baseline. */
  html.reader-document.memo-document body.blog-page .blog-board-table thead tr { padding-block: 14px; }
  html.reader-document.memo-document body.reader-page.blog-page .blog-article .blog-board-table thead :is(th, th:last-child) { align-self: end; font-size: 14px !important; line-height: 1.3; text-wrap: balance; }
  html.reader-document.memo-document body.reader-page.blog-page .blog-article .blog-board-table tbody :is(th, td) { font-size: 15px !important; }
  html.reader-document.memo-document body.reader-page.blog-page .blog-article .blog-board-table tbody th { margin-bottom: 4px; font-size: 16px !important; }
  html.reader-document.memo-document body.blog-page .blog-article .blog-board-table small { font-size: 13px; }
  html.reader-document.memo-document body.blog-page .blog-board-model { grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; }
  html.reader-document.memo-document body.blog-page .blog-board-logo { width: 20px; height: 20px; }
  html.reader-document.memo-document body.blog-page .blog-board-value { font-size: 15px; }
  .blog-board-bar { height: 4px; margin-top: 8px; }
}

/* ---------- Fast is accurate (figures.tsx), redrawn from slide 7 of the seed deck ----------
   Set as the memo sets its figures: a graphite panel with a hairline and room on every side, the
   regions named in serif in a strip above the plot, graphite marks for the field, and Avartha as
   the one lit, pearl point. The real-time zone is lit from its title down to the axis and closed
   by a dashed deadline, as the memo marks its deadlines. The curve is an SVG stretched to the
   plot; points and labels sit at shares of it, on the curve. */
.blog-fast {
  --blog-fast-axis: color-mix(in srgb, var(--memo-tau-name) 38%, transparent);
  /* The deadline's share of the latency axis, Avartha's place inside the zone, the centre of the
     co-design label, and the frontier's accuracy: where the curve reaches x = 84%. */
  --blog-fast-zone: 33%;
  --blog-fast-us: 15%;
  --blog-fast-say: 62%;
  --blog-fast-y: 33.1%;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  grid-template-areas: ". head" "ytitle plot" ". xaxis";
  column-gap: 12px;
  padding: 24px 28px 18px 18px;
  border: 1px solid var(--blog-rule);
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--foreground) 4.5%, transparent), color-mix(in srgb, var(--foreground) 1.5%, transparent));
}
/* The zone, lit from the top of its title down to the axis and closed by the deadline. Its left
   edge is the accuracy axis, so the axis runs the full height of the zone, through the strip. The
   light is the memo's cream, not a champagne tint, so the zone reads as lit rather than gold. */
.blog-fast-zone {
  grid-column: 2;
  grid-row: 1 / 3;
  width: var(--blog-fast-zone);
  border-left: 1px solid var(--blog-fast-axis);
  border-right: 1px dashed color-mix(in srgb, var(--blog-accent) 70%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--foreground) 9%, transparent), color-mix(in srgb, var(--foreground) 1.5%, transparent));
}
.blog-fast-head { grid-area: head; display: grid; grid-template-columns: var(--blog-fast-zone) minmax(0, 1fr); padding: 14px 0 18px; }
html.reader-document.memo-document body.blog-page .blog-article .blog-fast-region { padding: 0 16px; font-family: var(--font-serif); font-size: 20px; line-height: 1.2; }
html.reader-document.memo-document body.blog-page .blog-article .blog-fast-region.is-zone { color: var(--blog-accent); }
html.reader-document.memo-document body.blog-page .blog-article .blog-fast-region.is-slow { color: color-mix(in srgb, var(--foreground) 55%, transparent); }
html.reader-document.memo-document body.blog-page :is(.blog-fast-ytitle, .blog-fast-xtitle, .blog-fast-tick) { color: var(--muted-foreground); font-size: 15px; white-space: nowrap; }
.blog-fast-ytitle { grid-area: ytitle; align-self: center; justify-self: center; writing-mode: vertical-rl; transform: rotate(180deg); }
.blog-fast-xaxis { grid-area: xaxis; position: relative; height: 22px; margin-top: 8px; }
.blog-fast-tick { position: absolute; left: var(--blog-fast-zone); transform: translateX(-50%); }
.blog-fast-xtitle { position: absolute; right: 0; }
.blog-fast-plot {
  grid-area: plot;
  position: relative;
  aspect-ratio: 2.25;
  border-bottom: 1px solid var(--blog-fast-axis);
}
.blog-fast-curve { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.blog-fast-curve path { fill: none; stroke: color-mix(in srgb, var(--memo-tau-name) 55%, transparent); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* Co-designed inference and harness: a dashed arrow from the frontier into the zone, at the
   frontier's accuracy. The box runs from the arrow's tip to the frontier point and clips its
   run: the head and the dashes, which slide out of the frontier point together as it draws. */
.blog-fast-arrow {
  position: absolute;
  top: calc(var(--blog-fast-y) - 5px);
  right: 17.2%;
  left: calc(var(--blog-fast-us) + 10px);
  height: 11px;
  overflow: hidden;
}
.blog-fast-arrow-run { position: absolute; inset: 0; }
.blog-fast-arrow-run::before {
  position: absolute;
  top: 1px;
  left: 0;
  width: 9px;
  height: 9px;
  background: var(--blog-accent);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  content: "";
}
.blog-fast-arrow-run::after {
  position: absolute;
  top: 5px;
  right: 0;
  left: 2px;
  height: 1px;
  background: repeating-linear-gradient(270deg, var(--blog-accent) 0 5px, transparent 5px 9px);
  content: "";
}
.blog-fast-pt { position: absolute; width: 0; height: 0; }
.blog-fast-pt::before { position: absolute; top: -4px; left: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--memo-tau-point); content: ""; }
.blog-fast-pt.is-small { top: 77.3%; left: 8%; }
.blog-fast-pt.is-frontier { top: var(--blog-fast-y); left: 84%; }
.blog-fast-pt.is-avartha { top: var(--blog-fast-y); left: var(--blog-fast-us); }
/* Avartha's point in the landing page's pearl, with its glow. */
.blog-fast-pt.is-avartha::before {
  top: -8px;
  left: -8px;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 35% 30%, #fffdfa, #e6dfd0 55%, #aca38f);
  box-shadow: 0 0 18px 5px color-mix(in srgb, var(--blog-accent) 40%, transparent);
}
.blog-fast-label { position: absolute; display: grid; gap: 3px; line-height: 1.3; white-space: nowrap; }
html.reader-document.memo-document body.blog-page .blog-article .blog-fast-label b { color: color-mix(in srgb, var(--foreground) 88%, transparent); font-size: 15px; font-weight: 400; }
html.reader-document.memo-document body.blog-page .blog-article .blog-fast-label small { color: var(--muted-foreground); font-size: 13px; text-wrap: balance; }
/* Avartha's name sits above its point, clear of the curve below it. */
.blog-fast-label.is-avartha { bottom: calc(100% - var(--blog-fast-y) + 5%); left: var(--blog-fast-us); transform: translateX(-50%); text-align: center; }
html.reader-document.memo-document body.blog-page .blog-article .blog-fast-label.is-avartha small { color: var(--blog-accent); }
/* The landing page's wordmark, drawn as a mask in the metal, so it follows the theme; a glint
   crosses it once as Avartha arrives. Its name stays as text for a page without styles. */
html.reader-document.memo-document body.reader-page.blog-page .blog-article .blog-fast-wordmark {
  display: block;
  justify-self: center;
  width: 88px;
  aspect-ratio: 737.77 / 207.04;
  margin-bottom: 4px;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  background-image: linear-gradient(110deg, transparent 38%, rgb(255 255 255 / .85) 50%, transparent 62%), var(--blog-accent-metal);
  background-position: 130% 0, 0 0;
  background-repeat: no-repeat;
  background-size: 220% 100%, 100% 100%;
  -webkit-mask: url("/assets/shared/brand/avartha-wordmark-champagne.svg") center / contain no-repeat;
  mask: url("/assets/shared/brand/avartha-wordmark-champagne.svg") center / contain no-repeat;
}
@media (forced-colors: active) {
  html.reader-document.memo-document body.reader-page.blog-page .blog-article .blog-fast-wordmark { forced-color-adjust: none; background: CanvasText; }
}
.blog-fast-label.is-codesign { bottom: calc(100% - var(--blog-fast-y) + 2.5%); left: var(--blog-fast-say); transform: translateX(-50%); text-align: center; text-wrap: balance; }
html.reader-document.memo-document body.blog-page .blog-article .blog-fast-label.is-codesign { color: var(--blog-accent); font-size: 13px; }
.blog-fast-label.is-frontier { top: calc(var(--blog-fast-y) + 6%); right: 15%; text-align: right; }
.blog-fast-label.is-small { top: 72%; left: 11.5%; }
html.reader-document.memo-document body.blog-page .blog-article .blog-fast-label.is-small small { max-width: 8.5em; white-space: normal; }
/* As on the slide, the way into the zone comes after the trade-off. Once the figure scrolls in,
   the arrow runs out of the frontier point, its label fading in on the way; as its head reaches
   the zone, Avartha's point lights with a ring of light, and the wordmark rises in and glints.
   A figure already on screen at load is never armed, so it stays drawn as rendered. */
@keyframes blog-fast-reach { from { translate: 100% 0; } to { translate: 0 0; } }
@keyframes blog-fast-light { 0% { opacity: 0; scale: .2; } 55% { opacity: 1; scale: 1.3; } 100% { opacity: 1; scale: 1; } }
@keyframes blog-fast-ping { from { opacity: .8; scale: .6; } to { opacity: 0; scale: 3.2; } }
@keyframes blog-fast-rise { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: none; } }
@media (prefers-reduced-motion: no-preference) {
  .blog-fast.is-armed :is(.blog-fast-pt.is-avartha, .blog-fast-label.is-avartha, .blog-fast-label.is-codesign) { opacity: 0; }
  .blog-fast.is-armed .blog-fast-arrow-run { translate: 100% 0; }
  .blog-fast.is-armed.is-in .blog-fast-arrow-run { animation: blog-fast-reach 1.9s cubic-bezier(.6, 0, .3, 1) .5s both; }
  .blog-fast.is-armed.is-in .blog-fast-label.is-codesign { animation: blog-fade .8s ease 1s both; }
  .blog-fast.is-armed.is-in .blog-fast-pt.is-avartha { animation: blog-fast-light .9s cubic-bezier(.2, .7, .2, 1) 2.25s both; }
  .blog-fast.is-armed.is-in .blog-fast-pt.is-avartha::after {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 16px;
    height: 16px;
    border: 1px solid var(--blog-accent);
    border-radius: 50%;
    animation: blog-fast-ping 1.3s cubic-bezier(.2, .7, .2, 1) 2.3s both;
    content: "";
  }
  .blog-fast.is-armed.is-in .blog-fast-label.is-avartha { animation: blog-fast-rise 1s cubic-bezier(.2, .7, .2, 1) 2.4s both; }
  html.reader-document.memo-document body.reader-page.blog-page .blog-article .blog-fast.is-armed.is-in .blog-fast-wordmark { animation: blog-shine 2.4s cubic-bezier(.45, 0, .2, 1) 2.9s both; }
}
/* Phones: a wider zone and a taller plot, so every label wraps inside its own region. */
@media (max-width: 640px) {
  .blog-fast { --blog-fast-zone: 40%; --blog-fast-us: 20%; --blog-fast-say: 64%; column-gap: 6px; padding: 16px 14px 12px 8px; border-radius: 12px; }
  .blog-fast-head { padding: 10px 0 14px; }
  .blog-fast-plot { aspect-ratio: 1 / 1.1; }
  html.reader-document.memo-document body.blog-page .blog-article .blog-fast-region { padding: 0 10px; font-size: 15px; }
  html.reader-document.memo-document body.blog-page .blog-article .blog-fast-label b { font-size: 13px; }
  html.reader-document.memo-document body.blog-page .blog-article :is(.blog-fast-label small, .blog-fast-label.is-codesign) { font-size: 11px; }
  html.reader-document.memo-document body.reader-page.blog-page .blog-article .blog-fast-wordmark { width: 68px; }
  html.reader-document.memo-document body.blog-page .blog-article :is(.blog-fast-ytitle, .blog-fast-xtitle, .blog-fast-tick) { font-size: 13px; }
  .blog-fast-label { white-space: normal; }
  html.reader-document.memo-document body.blog-page .blog-article .blog-fast-label.is-avartha small { max-width: 9em; }
  .blog-fast-label.is-codesign { width: 11em; }
  .blog-fast-label.is-frontier { right: 4%; }
  html.reader-document.memo-document body.blog-page .blog-article .blog-fast-label.is-frontier small { max-width: 12.5em; }
  .blog-fast-label.is-small { max-width: calc(var(--blog-fast-zone) - 11.5% - 6px); }
}