/* An essay's page. */

/* Three columns on a wide screen: contents | text | notes. Figures stay inside the text column. */
:root { --toc: 196px; --col: 680px; --note: 216px; --gap: 56px; }
.page { display: grid; grid-template-columns: var(--toc) minmax(0, var(--col)) var(--note); column-gap: var(--gap);
  max-width: calc(var(--toc) + var(--col) + var(--note) + 2 * var(--gap)); margin: 0 auto; padding: 0 32px; box-sizing: content-box; }
.main { grid-column: 2; min-width: 0; }
.rail { grid-column: 1; grid-row: 1; }

.phead { padding: 88px 0 34px; }
.phead h1 { margin-top: 18px; font-size: 56px; line-height: 1.02; letter-spacing: -.028em; }
.phead__sub { margin-top: 14px; font-size: 21px; font-style: italic; color: var(--ink-2); }
.phead__meta { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 30px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 16px; line-height: 1.6; font-style: italic; color: var(--ink-3); font-variant-numeric: lining-nums; }
.phead__meta > span { white-space: nowrap; }
.phead__meta > .phead__by { white-space: normal; }
.phead__meta b { font-weight: 400; color: var(--ink-2); }
.phead__by a { color: var(--ink-2); text-decoration-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.phead__by a:hover { color: var(--ink); text-decoration-color: var(--accent); }
.phead__tags { display: flex; gap: 14px; }
.phead__meta .tag { color: var(--ink-2); text-decoration: none; }
.phead__meta .tag::before { content: "#"; color: var(--ink-3); margin-right: 1px; }
.phead__meta a.tag:hover { text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: .2em; }
.phead__top { display: flex; justify-content: space-between; gap: 16px; }
.phead__lang a { text-decoration: none; }
.phead__lang a[aria-current] { color: var(--ink); }

/* TL;DR: the label sits in its own narrow column beside the summary. */
.abstract { display: grid; grid-template-columns: 92px minmax(0, 1fr); margin-top: 0; padding: 20px 0 26px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair); }
.abstract__h { margin: 0; padding-top: .12em; font: 400 15px/1.5 var(--serif); font-variant-caps: all-small-caps; letter-spacing: .09em; color: var(--accent); }
.abstract__body p { font-size: 16px; line-height: 1.66; }
.abstract__body p + p { margin-top: .75em; }

/* Contents rail. The section you are reading is ink; its subsections open beneath it. */
.rail__in { position: sticky; top: calc(var(--top) + 36px); max-height: calc(100vh - var(--top) - 56px); overflow-y: auto; padding: 0 4px 24px 0; scrollbar-width: none; }
.rail__in::-webkit-scrollbar { display: none; }
.rail .lbl { margin-bottom: 14px; }
.toc, .toc ol { list-style: none; margin: 0; padding: 0; }
.toc a { display: grid; grid-template-columns: 22px 1fr; padding: 4px 0; font-size: 13.5px; line-height: 1.38; color: var(--ink-3); text-decoration: none; transition: color .2s; }
.toc a:hover { color: var(--ink); }
.toc a span:first-child { font-style: italic; }
.toc li[aria-current] > a { color: var(--ink); }
.toc ol { display: none; margin: 2px 0 6px 22px; }
.toc li[aria-current] > ol { display: block; }
.toc ol a { grid-template-columns: 1fr; padding: 3px 0; font-size: 12.5px; }

/* Narrow screens fold the contents into the page. */
.contents { display: none; border-bottom: 1px solid var(--hair); }
.contents summary { display: flex; justify-content: space-between; padding: 14px 0; cursor: pointer; list-style: none; color: var(--ink-2); }
.contents summary::-webkit-details-marker { display: none; }
.contents summary::after { content: "+"; }
.contents[open] summary::after { content: "\2212"; }
.contents .toc { padding-bottom: 16px; }
.contents .toc a { font-size: 15px; grid-template-columns: 30px 1fr; color: var(--ink); }
.contents .toc ol { display: none !important; }

.prose { padding-top: 48px; font-size: 17px; line-height: 1.72; }
.prose > p, .prose > ul, .prose > ol { margin: 0 0 1.05em; }
.prose h2 { position: relative; margin: 3em 0 1em; font-size: 31px; line-height: 1.16; letter-spacing: -.016em; scroll-margin-top: 80px; }
.prose h2::before { content: attr(data-n); position: absolute; right: calc(100% + 22px); top: .04em; font-style: italic; color: var(--ink-3); }
.prose h3 { margin: 2.1em 0 .7em; font-size: 20.5px; line-height: 1.28; font-style: italic; scroll-margin-top: 80px; }
.prose strong { font-weight: 600; }
.prose code { font: 14px ui-monospace, Menlo, monospace; }
.prose .post-figure figcaption { color: var(--ink-2); }

/* Citations become a small number in the text and a note in the right margin. */
.prose a.citation { display: none; }
.cn { margin: 0 .04em 0 .1em; padding: 0 .08em; border: 0; background: none; font: 500 10.5px/1 var(--sans); color: var(--ink-3); vertical-align: super; cursor: pointer; font-variant-numeric: tabular-nums; }
.cn:hover, .cn.is-hot { color: var(--accent); }
/* A note sits in a justified paragraph but is set ragged; its short lines would open wide gaps. */
.note { display: none; margin: -.4em 0 1.2em; padding: 10px 0 10px 14px; border-left: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.note.is-open { display: block; box-shadow: inset 0 1px 0 var(--hair), inset 0 -1px 0 var(--hair); padding-left: 0; }
.note a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: .18em; }
.note__i { margin-right: .5em; font: 500 11px/1 var(--sans); color: var(--ink-3); }
.note__by { display: block; margin-top: 2px; font: 400 12px/1.45 var(--sans); color: var(--ink-3); }

.refs { margin-top: 72px; }
.refs h2 { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--ink); font-size: 22px; font-weight: 400; }
.refs ol { margin: 0; padding: 0; list-style: none; counter-reset: r; }
/* Each reference is its title, linked, over one quiet line of who, where and when. */
.refs li { counter-increment: r; display: grid; grid-template-columns: 30px 1fr; gap: 3px 14px; padding: 11px 0; line-height: 1.45; scroll-margin-top: 90px; transition: background .4s; }
.refs li::before { content: counter(r); grid-row: span 2; font: 500 11px/2 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.refs__t { grid-column: 2; min-width: 0; overflow-wrap: anywhere; font-size: 15px; color: var(--ink); }
a.refs__t { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .2s; }
a.refs__t:hover { text-decoration-color: var(--ink-3); }
.refs__m { grid-column: 2; min-width: 0; overflow-wrap: anywhere; font-size: 13px; color: var(--ink-3); }
.refs li:target { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.after { margin: 80px 0 64px; }
.after a { font-size: 22px; font-style: italic; text-decoration: none; }
.after a:hover { text-decoration: underline; text-decoration-thickness: 1px; }

@media (min-width: 1240px) {
  .top__mid { opacity: 0 !important; }
  .cn { cursor: default; }
  .note, .note.is-open { display: block; float: right; clear: right; position: relative; width: var(--note);
    margin: .25em calc(-1 * (var(--note) + var(--gap))) 1em 0; padding: 0; box-shadow: none; font-size: 13.5px; transition: color .2s; }
  .note__i { position: absolute; right: calc(100% + 8px); top: .32em; margin: 0; }
  .note.is-hot, .note.is-hot .note__by { color: var(--ink); }
  .note.is-hot .note__i { color: var(--accent); }
}
@media (max-width: 1239px) {
  .page { grid-template-columns: var(--toc) minmax(0, var(--col)); max-width: calc(var(--toc) + var(--col) + var(--gap)); }
}
@media (max-width: 999px) {
  .page { display: block; max-width: var(--col); padding: 0 28px; }
  .rail { display: none; }
  .contents { display: block; }
}
@media (max-width: 760px) {
  .page { padding: 0 16px; }
  .phead { padding-top: 48px; }
  .phead h1 { font-size: 37px; }
  .phead__sub { font-size: 18px; }
  .prose { font-size: 16.5px; }
  .prose h2 { font-size: 25px; }
  .abstract { grid-template-columns: 1fr; }
  .abstract__h { padding: 0 0 10px; }
  .prose h2::before { position: static; display: block; margin-bottom: 4px; font-size: 18px; }
  .refs li { grid-template-columns: 24px 1fr; gap: 3px 10px; }
}

/* Production notes: one more line of the header's details, opened in place. */
.made { margin-top: 4px; font-size: 16px; line-height: 1.6; font-style: italic; color: var(--ink-3); }
.made summary { display: inline; cursor: pointer; list-style: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, var(--ink) 22%, transparent); transition: color .2s, text-decoration-color .2s; }
.made summary::-webkit-details-marker { display: none; }
.made summary::after { content: "+"; display: inline-block; margin-left: .35em; font-style: normal; text-decoration: none; }
.made[open] summary::after { content: "\2212"; }
.made summary:hover, .made[open] summary { color: var(--ink-2); text-decoration-color: var(--ink-3); }
.made__body { max-width: 600px; padding-top: 8px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.made__body p + p { margin-top: .6em; }

/* What the essays' text needs beyond paragraphs and headings. ------------- */
/* Three accents from the homepage painting: its greyed sky blue, which runs
   through the whole day, for the small marks on the page and the figures' main
   colour; sunrise amber and sunset rose for the figures' second and third. */
:root { --accent: #3e5a78; --accent-2: #a8742e; --accent-3: #a8505e; --global-theme-color: var(--accent); }
/* The figures' names for the page's colours. */
:root { --global-card-bg-color: #f4f3ef; --global-code-bg-color: #e2e1db; --global-callout-bg: #e2e1db; --global-hover-color: var(--ink); --global-hover-text-color: var(--paper); }
html[lang="zh-CN"] { --serif: "Iowan Old Style", "Songti SC", "Noto Serif SC", "Source Han Serif SC", STSong, Georgia, serif; }

/* Some figures were drawn expecting every text element to take the serif and
   the body colour; with no specificity, the figures' own rules still win. */
:where(.prose) :where(p, h1, h2, h3, h4, h5, h6, em, div, li, span, strong) { color: var(--global-text-color); font-family: var(--serif); }

.prose > ul, .prose > ol { padding-left: 1.3em; }

/* Text set justified, as in a book; hyphenation keeps the spacing even in English. */
.prose > p, .prose > ul > li, .prose > ol > li, .abstract__body p, .made__body p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 3 3; }
html[lang="zh-CN"] :is(.prose > p, .prose > ul > li, .prose > ol > li, .abstract__body p, .made__body p) { text-justify: inter-character; }
/* A phone's line is too short to justify English without wide gaps; Chinese stays justified. */
@media (max-width: 600px) { html[lang="en"] :is(.prose > p, .prose > ul > li, .prose > ol > li, .abstract__body p, .made__body p) { text-align: left; } }
.prose a:not(.citation) { text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.prose a:not(.citation):hover { text-decoration-color: var(--accent); }
.prose li + li { margin-top: .35em; }
.prose > ul > li::marker, .prose > ol > li::marker { color: var(--ink-3); }
.prose h4 { margin: 1.8em 0 .5em; font-size: 17px; font-weight: 400; font-style: italic; color: var(--ink-2); }
.prose hr { margin: 3em 0; border: 0; border-top: 1px solid var(--hair); }
.prose > blockquote, .prose > details, .prose > pre { margin: 0 0 1.05em; }
.prose > blockquote { padding: 0; margin-left: 0; margin-right: 0; font-style: italic; color: var(--ink-2); }
.prose > blockquote p { color: var(--ink-2); }
.prose > blockquote > :last-child { margin-bottom: 0; }
.prose > blockquote.block-tip, .prose > blockquote.block-warning, .prose > blockquote.block-danger { padding: 12px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); font-style: normal; }
.prose :not(pre) > code { font-size: .84em; overflow-wrap: anywhere; }
.prose pre { overflow-x: auto; padding: 14px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); font-size: 13px; line-height: 1.6; }
.prose pre code { font-size: inherit; }

.post-figure figcaption a { text-decoration-color: var(--ink-3); }
/* A raster figure's edges fade into the page, so a picture never sits on it as a hard-edged card. */
.post-figure--soft-image .post-figure__media { position: relative; overflow: hidden; border-radius: 1.15rem; isolation: isolate; }
.post-figure--soft-image .post-figure__media::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: inset 0 0 1.45rem .4rem color-mix(in srgb, var(--paper) 52%, transparent); pointer-events: none; }
.post-figure--soft-image .post-figure__media img { display: block; width: 100%; height: auto; border-radius: inherit; }

/* Tables: article.css draws them; these fix the column widths the essays rely on. */
.post-table table { table-layout: fixed; }
.post-table :is(th, td):first-child { width: 31%; }
.post-table--keyed td:first-child { white-space: normal; }
.post-table--scroll { overflow-x: auto; }
.post-table--wide table { min-width: var(--post-table-min-width, 680px); }
@media (max-width: 720px) { .post-table :is(th, td):first-child { width: 36%; } }

.post-table.gpu-overview-table :is(th, td):nth-child(1) { width: 22%; }
.post-table.gpu-overview-table :is(th, td):nth-child(2) { width: 24%; }
.post-table.gpu-overview-table :is(th, td):nth-child(3) { width: 23%; }
.post-table.gpu-overview-table :is(th, td):nth-child(4) { width: 31%; }
.post-table.agent-complaint-table { --post-table-min-width: 560px; }
.post-table.agent-complaint-table :is(th, td):nth-child(1) { width: 44%; }
.post-table.agent-complaint-table :is(th, td):nth-child(2) { width: 28%; }
.post-table.agent-complaint-table :is(th, td):nth-child(3) { width: 28%; }
.post-table.ui-eval-table :is(th, td):nth-child(1) { width: 22%; }
.post-table.ui-eval-table :is(th, td):nth-child(n+2) { width: 26%; }
.post-table.gpu-runtime-table :is(th, td):nth-child(1) { width: 20%; }
.post-table.gpu-runtime-table :is(th, td):nth-child(2) { width: 16%; }
.post-table.gpu-runtime-table :is(th, td):nth-child(3) { width: 18%; }
.post-table.gpu-runtime-table :is(th, td):nth-child(4), .post-table.gpu-runtime-table :is(th, td):nth-child(5) { width: 23%; }
.post-table.gpu-execution-map-table :is(th, td):nth-child(1) { width: 26%; }
.post-table.gpu-execution-map-table :is(th, td):nth-child(2) { width: 25%; }
.post-table.gpu-execution-map-table :is(th, td):nth-child(3) { width: 49%; }
.post-table.gpu-parallel-axis-table { --post-table-min-width: 680px; }
.post-table.gpu-parallel-axis-table :is(th, td):nth-child(1) { width: 27%; }
.post-table.gpu-parallel-axis-table :is(th, td):nth-child(2) { width: 32%; }
.post-table.gpu-parallel-axis-table :is(th, td):nth-child(3) { width: 41%; }
.post-table.gpu-ledger-table :is(th, td):nth-child(1) { width: 18%; }
.post-table.gpu-ledger-table :is(th, td):nth-child(2) { width: 50%; }
.post-table.gpu-ledger-table :is(th, td):nth-child(3) { width: 32%; }

/* The model comparison table: the same hairlines, and on phones one block per model. */
.models-at-a-glance-table { margin: 1.8em 0; }
.models-at-a-glance-table table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13.5px; line-height: 1.48; }
.models-at-a-glance-table th, .models-at-a-glance-table td { padding: 11px 8px; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.models-at-a-glance-table th { border-bottom-color: var(--ink); font-weight: 600; line-height: 1.3; vertical-align: bottom; }
.models-at-a-glance-table :is(th, td):first-child { padding-left: 0; }
.models-at-a-glance-table :is(th, td):last-child { padding-right: 0; }
.models-at-a-glance-table :is(th, td):nth-child(1) { width: 18%; white-space: nowrap; }
.models-at-a-glance-table :is(th, td):nth-child(2) { width: 13%; white-space: nowrap; }
.models-at-a-glance-table :is(th, td):nth-child(3) { width: 11%; }
.models-at-a-glance-table :is(th, td):nth-child(4) { width: 16%; }
.models-at-a-glance-table :is(th, td):nth-child(5) { width: 13.5%; }
.models-at-a-glance-table :is(th, td):nth-child(6) { width: 16%; }
.models-at-a-glance-table :is(th, td):nth-child(7) { width: 12.5%; }
.models-at-a-glance-table .parameter-total, .models-at-a-glance-table .parameter-active { display: block; white-space: nowrap; }
:where(.prose) .models-at-a-glance-table .parameter-active { margin-top: 2px; font-size: 12px; color: var(--ink-3); }
@media (max-width: 720px) {
  .models-at-a-glance-table table, .models-at-a-glance-table tbody, .models-at-a-glance-table tr, .models-at-a-glance-table td { display: block; width: 100%; }
  .models-at-a-glance-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .models-at-a-glance-table tbody tr { padding: 6px 0 10px; border-bottom: 1px solid var(--ink); }
  .models-at-a-glance-table td, .models-at-a-glance-table :is(th, td):nth-child(n) { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); column-gap: .9rem; width: 100%; padding: 6px 0; border-bottom: 0; white-space: normal; }
  .models-at-a-glance-table td > * { grid-column: 2; }
  .models-at-a-glance-table td::before { grid-row: 1 / span 2; font-style: italic; color: var(--ink-3); }
  .models-at-a-glance-table td:nth-child(1) { display: block; padding: 8px 0 4px; font-size: 17px; }
  .models-at-a-glance-table td:nth-child(2)::before { content: "Parameters"; }
  .models-at-a-glance-table td:nth-child(3)::before { content: "Position"; }
  .models-at-a-glance-table td:nth-child(4)::before { content: "Attention"; }
  .models-at-a-glance-table td:nth-child(5)::before { content: "MLP / MoE"; }
  .models-at-a-glance-table td:nth-child(6)::before { content: "Normalization"; }
  .models-at-a-glance-table td:nth-child(7)::before { content: "Other techniques"; }
}

.toc li[aria-current] > a span:first-child { color: var(--accent); }
.top__fill { background: var(--accent); }