v0.9.11defuss-shadcn
Theme
Design your own

defuss-shadcn / Papers / Paper Gallery / paper-diff

Built with: CSS

Before and AfterTPL

When the evidence is a change, the paper shows it as a Diff: the before over the after, a divider to drag between them. Both stories are real - the move of 228 component folders into the sidebar's sections, and the code window that printed a dark terminal on a light page in the technical report on the Modern Paper page.

On this page (4)

§Two changes, two Diff figures

Each figure is a Diff of two Code Mockup windows in the theme's muted surface (data-variant='muted' - the default window is a dark terminal in both themes). Drag a divider, or focus it and use the arrow keys. Printed, a Diff has no divider to drag: both sides print in full, side by side.

§Print layout

§Printed: both sides in full

The preview boots in the Print device: an A4 sheet whose print styles apply. Paper has no divider to drag, so the Diff prints the before and the after side by side, each with its label; the divider and the knob are gone. Switch to Full to compare by dragging.

§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