v0.9.11defuss-shadcn
Theme
Design your own

defuss-shadcn / Papers / Paper Gallery / paper-math-interactive

Built with: CSS

Interactive MathTPL

A paper whose formulas answer back. The model is a Formula Rendering element with selectable terms, linked to its symbol table; the reader changes the model in a Formula Editing field and the numbered equation follows; and a Compute & Explain panel differentiates it, with the steps the engine reports and the condition the division needs.

On this page (2)

§Reading a growth curve

Select a symbol - in the formula, on its button or in the table. Edit the model in section 2 and equation (2) follows. In section 3, press Differentiate: the Compute Engine runs in a worker and reports six rules; step through them.

§CSS view file

/* -- Paper -------------------------------------------------------------------
   A modern research-paper project page (the layout of the Nerfies / InternVL
   project pages) in the system's own tokens: a centered reading column for
   prose, figures and tables that may break out wider, a serif title, linked
   authors with affiliation marks, resource buttons, an abstract, numbered
   sections, captioned figures, findings, key numbers, BibTeX and a footer.
   CSS-only; the column is a named grid, so any child can opt into the wide
   track with .paper-wide. */
@layer components {
  :where(.paper, .paper *, .paper *::before, .paper *::after) {
    box-sizing: border-box;
  }
  .paper {
    --paper-measure: 46rem;
    --paper-wide: 64rem;
    --paper-gap: 2.5rem;
    display: grid;
    grid-template-columns:
      [full-start] minmax(1rem, 1fr)
      [wide-start] minmax(0, calc((var(--paper-wide) - var(--paper-measure)) / 2))
      [content-start] min(100% - 2rem, var(--paper-measure))
      [content-end] minmax(0, calc((var(--paper-wide) - var(--paper-measure)) / 2))
      [wide-end] minmax(1rem, 1fr)
      [full-end];
    row-gap: var(--paper-gap);
    padding-block: 3.5rem 0;
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.7;
    container-type: inline-size;
    & > * {
      grid-column: content;
      min-inline-size: 0;
    }
    & > .paper-wide,
    & > .paper-hero,
    & > .paper-teaser {
      grid-column: wide;
    }
    & > .paper-footer {
      grid-column: full;
    }
    & :is(p, li) {
      text-wrap: pretty;
    }
    & a:not(.btn) {
      color: inherit;
      text-decoration: underline;
      text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
      text-underline-offset: 0.2em;
    }
    & a:not(.btn):hover {
      text-decoration-color: currentColor;
    }
  }
  /* -- the title block ------------------------------------------------------ */
  .paper-hero {
    display: grid;
    justify-items: center;
    gap: 1rem;
    text-align: center;
  }
  .paper-venue {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--muted-foreground);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
  }
  .paper-title {
    max-inline-size: 22em;
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.875rem, 4.6cqi, 3.25rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .paper-title-sub {
    display: block;
    margin-block-start: 0.35em;
    color: var(--muted-foreground);
    font-size: 0.55em;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.3;
  }
  .paper-authors,
  .paper-affiliations {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .paper-authors {
    font-size: 1.125rem;
    font-weight: 500;
    & sup {
      margin-inline-start: 0.1em;
      color: var(--muted-foreground);
      font-size: 0.65em;
    }
  }
  .paper-affiliations {
    color: var(--muted-foreground);
    font-size: 0.875rem;
    & sup {
      margin-inline-end: 0.15em;
      font-size: 0.75em;
    }
  }
  .paper-note {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
  }
  .paper-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-block-start: 0.5rem;
    & .btn {
      border-radius: 999px;
    }
  }
  /* -- a news line under the title ------------------------------------------ */
  .paper-news {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0;
    padding: 0.875rem 1.125rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in oklab, var(--muted) 60%, var(--background));
    font-size: 0.9375rem;
    line-height: 1.55;
    & .badge {
      flex: none;
    }
  }
  /* -- figures ---------------------------------------------------------------- */
  .paper-teaser,
  .paper-figure {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    & > :is(img, video, svg, .diagram) {
      inline-size: 100%;
      max-inline-size: 100%;
      border-radius: var(--radius-lg);
    }
    & > :is(img, video) {
      display: block;
      block-size: auto;
      border: 1px solid var(--border);
      background: var(--muted);
    }
  }
  /* a figure or table that may split (data-break-inside="allow") is a
     block: in a grid Chromium ignores the caption's keep, and a caption stood
     alone at the head of the next column (Typography's caption rule) - the
     grid's gap becomes a margin */
  .paper :is(.paper-figure, .paper-table)[data-break-inside="allow"] {
    display: block;
    & > :not(:first-child) {
      margin-block-start: 0.75rem;
    }
    & > figcaption:last-child {
      break-before: avoid;
    }
  }
  .paper-teaser > figcaption,
  .paper-figure > figcaption,
  .paper-table-caption {
    color: var(--muted-foreground);
    font-size: 0.875rem;
    line-height: 1.55;
    text-align: center;
    text-align-last: auto; /* a justified section around the figure must not pull the last line left */
    text-wrap: balance;
    & b {
      color: var(--foreground);
      font-weight: 600;
    }
  }
  /* a numbered display equation: the formula (a Formula Rendering element) centered in the column, its number at
     the end edge - a reference writes the number in the text, like a section's .paper-num */
  .paper-equation {
    display: grid;
    grid-template-columns: minmax(2.5rem, 1fr) minmax(0, auto) minmax(2.5rem, 1fr);
    align-items: center;
    margin-block: 1.25rem;
    & > :first-child {
      grid-column: 2;
      min-inline-size: 0;
    }
    & > .paper-equation-num {
      grid-column: 3;
      justify-self: end;
      color: var(--muted-foreground);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
  }
  /* -- abstract and sections ------------------------------------------------- */
  .paper-abstract {
    display: grid;
    gap: 0.75rem;
    padding: 1.5rem 1.75rem;
    border-inline-start: 3px solid var(--primary);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    background: color-mix(in oklab, var(--muted) 50%, var(--background));
    & > h2 {
      margin: 0;
      font-family: var(--font-serif);
      font-size: 1.375rem;
      font-weight: 500;
    }
    & > p {
      margin: 0;
      text-align: justify;
      hyphens: auto;
    }
  }
  .paper-section {
    display: grid;
    gap: 1rem;
    & > h2 {
      display: flex;
      align-items: baseline;
      gap: 0.75rem;
      margin: 0;
      padding-block-end: 0.5rem;
      border-block-end: 1px solid var(--border);
      font-family: var(--font-serif);
      font-size: 1.75rem;
      font-weight: 500;
      line-height: 1.25;
      letter-spacing: -0.01em;
      text-wrap: balance;
    }
    & > h3 {
      margin: 0.5rem 0 0;
      font-size: 1.0625rem;
      font-weight: 600;
    }
    & > p {
      margin: 0;
    }
    & > :is(ul, ol):not([class]) {
      margin: 0;
      padding-inline-start: 1.25rem;
    }
  }
  /* a block in a section keeps more room from the text than one paragraph
     from the next: the grid gap plus this margin (1.75rem in all).
     VERIFIED: (full-paper viewport probe 2026-10-07) no horizontal overflow
     at 1280 and 390 px with every section typeset; paper.e2e pins the
     variants and the two-column composition. */
  .paper-section
    > :is(
      figure,
      table,
      blockquote,
      pre,
      hr,
      .separator,
      .paper-table,
      .paper-figure,
      .paper-numbers,
      .paper-quote,
      .paper-code,
      .paper-findings,
      .typeset-group,
      .chart,
      .diagram,
      .mockup-code,
      .iframe,
      .data-grid,
      .data-tree,
      .session,
      .table-container
    ) {
    margin-block: 0.75rem;
  }
  /* a section set as Typography's .typeset (Book page): the setting's own
     rhythm - Einzug, a lead, the gap around every block - replaces the grid
     gap, at the paper's measure */
  .paper-section.typeset {
    --typeset-measure: none;
    display: block;
    & > h2 {
      margin-block: 0 1rem;
    }
    & > h3 {
      margin-block: var(--typeset-gap, 1.5em) 0.5em;
    }
    & > p {
      margin-block: 0 1em;
    }
    &[data-indent] > p {
      margin-block: 0;
    }
    &
      > :is(
        figure,
        table,
        blockquote,
        pre,
        hr,
        .separator,
        .paper-table,
        .paper-figure,
        .paper-numbers,
        .paper-quote,
        .paper-code,
        .paper-findings,
        .typeset-group,
        .chart,
        .diagram,
        .mockup-code,
        .iframe,
        .data-grid,
        .data-tree,
        .session,
        .table-container,
        ul,
        ol
      ) {
      margin-block: var(--typeset-gap, 1.5em); /* Typography's knob, with its default */
    }
  }
  /* inside a section, .paper-wide breaks out of the reading column to the
     wide track (100cqi = the paper's width - it is the container) */
  .paper-section > .paper-wide {
    margin-inline: calc((100% - min(var(--paper-wide), 100cqi - 2rem)) / 2);
  }
  /* the number ends in a no-break space (`1 `): Chromium titles a PDF bookmark with the laid-out text, and
     a space after the number's flex item is dropped there ("1Contribution"). The word spacing takes the space's
     width back (1ch - the number is monospace), so the flex gap alone still sets the distance; a number written
     without it reads as before. */
  .paper-num {
    color: var(--muted-foreground);
    font-family: var(--font-mono);
    font-size: 0.75em;
    font-weight: 500;
    word-spacing: -1ch;
  }
  /* -- findings: a row of numbered cards ------------------------------------- */
  .paper-findings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: paper-finding;
    /* a card of flowing text: inline code and links stay inline */
    & > li {
      display: block;
      padding: 1.125rem 1.25rem;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--card);
      color: var(--card-foreground);
      font-size: 0.9375rem;
      line-height: 1.55;
      counter-increment: paper-finding;
    }
    & > li::before {
      display: block;
      margin-block-end: 0.375rem;
      content: "Finding " counter(paper-finding);
      color: var(--muted-foreground);
      font-family: var(--font-mono);
      font-size: 0.75rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    & strong {
      font-weight: 600;
    }
    /* the leading phrase is the card's title */
    & > li > strong:first-child {
      display: block;
      margin-block-end: 0.25rem;
    }
    /* a tag leads its card on a line of its own */
    & > li > .paper-tag:first-child {
      display: table;
      margin-block-end: 0.5rem;
    }
  }
  /* -- table of contents: a numbered outline in columns --------------------- */
  .paper-toc {
    display: grid;
    gap: 0.75rem;
    padding: 1.125rem 1.25rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    color: var(--card-foreground);
    & > h2 {
      margin: 0;
      color: var(--muted-foreground);
      font: 600 0.75rem/1.2 var(--font-mono);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    & ol {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    & > ol {
      columns: 2 15rem;
      column-gap: 2rem;
    }
    & li {
      break-inside: avoid;
      padding-block: 0.125rem;
      font-size: 0.9375rem;
      line-height: 1.45;
    }
    & li li {
      padding-inline-start: 1.5rem;
      font-size: 0.875rem;
    }
    & a {
      display: flex;
      gap: 0.5rem;
      text-decoration: none;
    }
    & a:hover,
    & a:focus-visible {
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
    & .paper-num {
      flex: none;
      min-inline-size: 1.75rem;
      font-size: 0.8125rem;
    }
  }
  /* headings land below a sticky header when the ToC jumps to them */
  .paper :is(h2, h3)[id] {
    scroll-margin-block-start: 5rem;
  }
  /* -- epistemic tags (VAE-DIALECT): verified, hypothesis, unknown ---------- */
  /* solid chips in three chart colors at distinct steps; the text takes the
     contrasting end of the fill's own lightness, so every theme reads */
  .paper-tag {
    --paper-tag: var(--chart-2);
    display: inline-block;
    margin-inline-end: 0.375rem;
    padding: 0.0625rem 0.4375rem;
    border: 1px solid var(--paper-tag);
    border-radius: var(--radius-sm);
    background: var(--paper-tag);
    color: var(--background);
    font: 700 0.6875rem/1.5 var(--font-mono);
    letter-spacing: 0.04em;
    vertical-align: 0.1em;
    white-space: nowrap;
    text-indent: 0; /* an inline-block inherits a paragraph's text-indent and indents its own first line */
    &[data-tag="verified"] {
      --paper-tag: var(--chart-2);
      color: #fff;
    }
    &[data-tag="hypothesis"] {
      --paper-tag: var(--chart-1);
    }
    &[data-tag="unknown"] {
      --paper-tag: var(--chart-5);
    }
  }
  @supports (color: oklch(from red l c h)) {
    .paper-tag {
      /* light fill → near-black text, dark fill → white text */
      color: oklch(from var(--paper-tag) clamp(0.12, (0.64 - l) * 100, 0.99) 0 0);
      /* VERIFIED is always white on its fill; a light theme's fill is
         darkened to L 0.55, where white bold text keeps ≥ 4.5:1 */
      &[data-tag="verified"] {
        --paper-tag: oklch(from var(--chart-2) min(l, 0.55) c h);
        color: #fff;
      }
    }
  }
  .paper-tags > li::before {
    content: none;
  }
  /* -- a code record, a quotation, a chart figure ---------------------------- */
  .paper-code {
    margin: 0;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--muted);
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.65;
  }
  /* a record that may split wraps: it cannot scroll and split at once
     (Typography's caption rule) */
  .paper [data-break-inside="allow"] .paper-code {
    overflow-x: visible;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  /* paper has no horizontal scroll: in print a long line wraps */
  @media print {
    .paper-code {
      overflow-x: visible;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
  }
  .paper-quote {
    margin: 0;
    padding: 0.75rem 1.25rem;
    border-inline-start: 3px solid var(--border);
    color: var(--muted-foreground);
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    font-style: italic;
    line-height: 1.6;
    & p {
      margin: 0;
    }
    /* a longer quotation: paragraphs, inline code, an attribution */
    & p + p {
      margin-block-start: 0.875rem;
    }
    & strong {
      color: var(--foreground);
      font-weight: 600;
    }
    & code {
      font-style: normal;
    }
    & > footer {
      margin-block-start: 1rem;
      color: var(--muted-foreground);
      font-family: var(--font-mono);
      font-size: 0.8125rem;
      font-style: normal;
      letter-spacing: 0.02em;
    }
  }
  .paper-chart {
    inline-size: 100%;
    block-size: 20rem;
  }
  /* -- key numbers: Statistic tiles ------------------------------------------ */
  .paper-numbers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
    & > .statistic {
      padding: 1rem 1.125rem;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--card);
    }
    & .statistic-value {
      font-variant-numeric: tabular-nums;
    }
  }
  /* -- tables ----------------------------------------------------------------- */
  .paper-table {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    overflow-x: auto;
    & table {
      inline-size: 100%;
      font-variant-numeric: tabular-nums;
    }
    /* booktabs: a heavy rule above and below, a light one under the head */
    & table {
      border-collapse: collapse;
      border-block: 1.5px solid var(--foreground);
    }
    & thead th {
      border-block-end: 1px solid var(--border);
      font-weight: 600;
    }
    & :is(td, th) {
      padding: 0.5rem 0.75rem;
      text-align: start;
    }
    & :is(td, th)[data-num] {
      text-align: end;
    }
    & tr[data-best] > td {
      font-weight: 600;
    }
  }
  /* -- BibTeX ------------------------------------------------------------------ */
  .paper-bibtex {
    display: grid;
    gap: 0.75rem;
    & > h2 {
      margin: 0;
      font-family: var(--font-serif);
      font-size: 1.375rem;
      font-weight: 500;
    }
    /* a plain <pre> - the BibTeX component brings its own frame */
    & > pre {
      margin: 0;
      padding: 1.125rem 1.25rem;
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--muted);
      color: var(--foreground);
      font-family: var(--font-mono);
      font-size: 0.8125rem;
      line-height: 1.6;
      tab-size: 2;
    }
  }
  /* -- footer ------------------------------------------------------------------ */
  .paper-footer {
    margin-block-start: 1.5rem;
    padding: 2rem 1rem 2.5rem;
    border-block-start: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    text-align: center;
    text-wrap: balance;
    & p {
      max-inline-size: var(--paper-measure);
      margin: 0 auto;
    }
    & p + p {
      margin-block-start: 0.5rem;
    }
  }
  /* -- narrow: the title block keeps its rhythm, prose loses the justify ------ */
  @container (max-width: 36rem) {
    .paper-abstract {
      padding: 1.125rem 1.25rem;
      & > p {
        text-align: start;
      }
    }
    .paper-section > h2 {
      font-size: 1.4rem;
    }
  }
  /* -- variants: the same parts in two other house styles ------------------
     classic - a printed journal: serif throughout, a narrower justified
       column, centered small-caps section heads without rules, a plain
       abstract set in from both sides;
     minimal - a lab note: everything flush start, a sans title, no tinted
       abstract and no rules under the section heads.
     A two-column body composes Typography's .typeset (data-columns) in the
     wide track - the paper needs no column mode of its own. */
  .paper[data-variant="classic"] {
    --paper-measure: 40rem;
    font-family: var(--font-serif);
    & :is(.paper-section, .paper-abstract) > p {
      text-align: justify;
      hyphens: auto;
    }
    & .paper-title {
      font-weight: 400;
      letter-spacing: 0;
    }
    & .paper-section > h2 {
      justify-content: center;
      padding-block-end: 0;
      border-block-end: 0;
      font-size: 1.125rem;
      font-weight: 600;
      font-variant-caps: small-caps;
      letter-spacing: 0.06em;
    }
    & .paper-abstract {
      padding: 0 2.5rem;
      border: 0;
      border-radius: 0;
      background: none;
      font-size: 0.9375rem;
      & > h2 {
        justify-self: center;
        font-size: 1rem;
        font-weight: 600;
        font-variant-caps: small-caps;
        letter-spacing: 0.06em;
      }
    }
  }
  /* a narrow page keeps the classic abstract's full width */
  @container (width < 32rem) {
    .paper[data-variant="classic"] .paper-abstract {
      padding-inline: 0;
    }
  }
  .paper[data-variant="minimal"] {
    & .paper-hero {
      justify-items: start;
      text-align: start;
    }
    & :is(.paper-venue, .paper-authors, .paper-affiliations, .paper-links) {
      justify-content: flex-start;
    }
    & .paper-title {
      font-family: var(--font-sans);
      font-weight: 650;
      letter-spacing: -0.03em;
    }
    & .paper-abstract {
      padding: 1rem 0 0;
      border: 0;
      border-block-start: 1px solid var(--border);
      border-radius: 0;
      background: none;
      & > h2 {
        font-family: var(--font-sans);
        font-size: 1rem;
        font-weight: 600;
      }
    }
    & .paper-section > h2 {
      padding-block-end: 0;
      border-block-end: 0;
      font-family: var(--font-sans);
      font-size: 1.375rem;
      font-weight: 600;
    }
  }
  /* -- print profiles: DIN A4 or US Letter ----------------------------------
     data-print="a4|letter" names the page the paper prints on: the sheet and
     its margins (@page), and a print scale (--paper-print-scale, 0.8): the
     16px body prints at 9.6pt, and two columns of 18rem fit the 170mm text
     width of A4 - at scale 1 the sections print in one column. Named pages
     apply only where an element names them, so all.css never changes the
     print dialog of a page without a profile. data-binding="inner" mirrors
     the margins for a bound duplex print: the inner margin (left on a right
     page, right on a left page) is 10mm (0.5in) wider than the outer one,
     with the same text width. The page names carry the paper- prefix -
     @page names are global, like keyframes. Every page but the title page
     carries its number at the foot, centered in the bottom margin (a page
     margin box: the paper itself cannot reach the margin).
     VERIFIED: (paper.e2e "print") a printed PDF is A4 / Letter without a
     format argument; the bound pages' text shifts by the margin difference;
     (Chromium PDF probe 2026-10-12) the margin box prints a number on every
     page of a named page but its first. */
  @page paper-a4 {
    size: A4;
    margin: 20mm;
    @bottom-center {
      content: counter(page);
      color: var(--muted-foreground);
      font: 500 8pt var(--font-sans);
      font-variant-numeric: tabular-nums;
    }
  }
  @page paper-a4:first {
    @bottom-center {
      content: none;
    }
  }
  @page paper-a4-inner {
    size: A4;
    margin: 20mm;
    @bottom-center {
      content: counter(page);
      color: var(--muted-foreground);
      font: 500 8pt var(--font-sans);
      font-variant-numeric: tabular-nums;
    }
  }
  @page paper-a4-inner:first {
    @bottom-center {
      content: none;
    }
  }
  @page paper-a4-inner:right {
    margin-left: 25mm;
    margin-right: 15mm;
  }
  @page paper-a4-inner:left {
    margin-left: 15mm;
    margin-right: 25mm;
  }
  @page paper-letter {
    size: letter;
    margin: 1in;
    @bottom-center {
      content: counter(page);
      color: var(--muted-foreground);
      font: 500 8pt var(--font-sans);
      font-variant-numeric: tabular-nums;
    }
  }
  @page paper-letter:first {
    @bottom-center {
      content: none;
    }
  }
  @page paper-letter-inner {
    size: letter;
    margin: 1in;
    @bottom-center {
      content: counter(page);
      color: var(--muted-foreground);
      font: 500 8pt var(--font-sans);
      font-variant-numeric: tabular-nums;
    }
  }
  @page paper-letter-inner:first {
    @bottom-center {
      content: none;
    }
  }
  @page paper-letter-inner:right {
    margin-left: 1.25in;
    margin-right: 0.75in;
  }
  @page paper-letter-inner:left {
    margin-left: 0.75in;
    margin-right: 1.25in;
  }
  .paper[data-print="a4"] {
    page: paper-a4;
    &[data-binding="inner"] {
      page: paper-a4-inner;
    }
  }
  .paper[data-print="letter"] {
    page: paper-letter;
    &[data-binding="inner"] {
      page: paper-letter-inner;
    }
  }
  /* A printed page has one text width, so the grid's tracks (content, wide,
     full) carry nothing there: in print the paper is a block and its parts
     fill the text width, the grid gap turned into margins. A grid would also
     lose text - VERIFIED: (Chromium PDF probe 2026-10-12) a two-column section
     that is a grid item and runs over several pages set its last lines as a
     one-line row of columns past the second, clipped at the page edge; as a
     block every section flows. Its colors print as designed (exact): a print
     dialog drops background graphics by default, and the text chosen for a
     fill - a chat bubble, a code window, an epistemic tag, a filled button -
     printed pale grey on white paper. */
  /* The keeps: a heading stays with the block below it, the teaser with its
     caption, the key numbers in one piece, the end ornament and the footer
     with what precedes them. The page margin is the top space, and a tighter
     gap lets the title block and its teaser share the first page. The table
     of contents stays on screen: its links do nothing on paper, and Chromium
     prints no page number a line could point to - VERIFIED: (Chromium 153 PDF
     probe 2026-10-12) a target-counter() after a contents line printed nothing. */
  @media print {
    .paper[data-print] {
      --paper-gap: 1.75rem;
      zoom: var(--paper-print-scale, 0.8);
      display: block;
      padding-block-start: 0;
      print-color-adjust: exact;
      & > :not(.typeset-break) + :not(.typeset-break) {
        margin-block-start: var(--paper-gap);
      }
      & .paper-section > .paper-wide {
        margin-inline: 0;
      }
      /* a caption never breaks alone to the next column or page: a figure
         prints whole (one that may split keeps its caption - below); BibTeX
         keeps its top caption with its list itself */
      & figure:not([data-break-inside="allow"], .bibtex) {
        break-inside: avoid;
      }
      & > .paper-toc {
        display: none;
      }
      & > :is(.paper-abstract, .paper-bibtex) > h2 {
        break-after: avoid;
      }
      & :is(.paper-teaser, .paper-numbers, .paper-equation) {
        break-inside: avoid;
      }
      & > :is(.separator, .paper-footer) {
        break-before: avoid;
      }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .paper a:not(.btn) {
      transition: none;
    }
  }
  @media (prefers-contrast: more) {
    .paper-news,
    .paper-findings > li,
    .paper-numbers > .statistic,
    .paper-bibtex pre,
    .paper-section > h2 {
      border-color: var(--foreground);
    }
    .paper :is(.paper-venue, .paper-affiliations, .paper-note, .paper-title-sub, figcaption, .paper-footer) {
      color: var(--foreground);
    }
  }
  @media (forced-colors: active) {
    .paper-abstract {
      border-inline-start-color: CanvasText;
    }
    .paper-news,
    .paper-findings > li,
    .paper-numbers > .statistic,
    .paper-bibtex pre {
      border-color: CanvasText;
    }
  }
}

Comments, ideas or improvements? Edit this page's source on GitHub