@heycys/gallery 0.0.0-stage → 0.1.0

package/kit/report.css

@@ -0,0 +1,2821 @@
+/* The kit's values: colors (light and dark, through light-dark()), the chart series, fonts, the
+   type scale, widths and gaps, and each component's own colors. Read by every other file, and by
+   tokens.js (DocTokens) for scripts: there is no second palette. */
+
+/* Segoe UI as the system has it, its line placed on its glyphs (Windows): the same faces, nothing to
+   download, their ascent and descent rewritten so a line's ink sits in the middle of its line box, as
+   Feishu's first Windows font (Tahoma) has it; Segoe UI's own leaves room above its letters, and the
+   Chinese text, on the same baseline, sat a pixel low in a selected block's fill and a colored one's
+   background. Absent elsewhere (macOS, Linux): the stack goes on to the next family. */
+@font-face { font-family: "Doc Segoe"; src: local("Segoe UI"), local("SegoeUI"); font-weight: 400; ascent-override: 100%; descent-override: 25%; line-gap-override: 0%; }
+@font-face { font-family: "Doc Segoe"; src: local("Segoe UI Italic"), local("SegoeUI-Italic"); font-weight: 400; font-style: italic; ascent-override: 100%; descent-override: 25%; line-gap-override: 0%; }
+@font-face { font-family: "Doc Segoe"; src: local("Segoe UI Semibold"), local("SegoeUI-Semibold"); font-weight: 600; ascent-override: 100%; descent-override: 25%; line-gap-override: 0%; }
+@font-face { font-family: "Doc Segoe"; src: local("Segoe UI Semibold Italic"), local("SegoeUI-SemiboldItalic"); font-weight: 600; font-style: italic; ascent-override: 100%; descent-override: 25%; line-gap-override: 0%; }
+@font-face { font-family: "Doc Segoe"; src: local("Segoe UI Bold"), local("SegoeUI-Bold"); font-weight: 700; ascent-override: 100%; descent-override: 25%; line-gap-override: 0%; }
+@font-face { font-family: "Doc Segoe"; src: local("Segoe UI Bold Italic"), local("SegoeUI-BoldItalic"); font-weight: 700; font-style: italic; ascent-override: 100%; descent-override: 25%; line-gap-override: 0%; }
+
+:root {
+  color-scheme: light dark;
+  --doc-bg: light-dark(#fcfcfc, #181818);
+  --doc-surface: light-dark(#ffffff, #202020);
+  --doc-text: light-dark(#1d1d1f, #f3f3f3);
+  --doc-muted: light-dark(#6e6e73, #a1a1a6);
+  --doc-border: light-dark(rgb(29 29 31 / 12%), rgb(243 243 243 / 13%));
+  --doc-grid: light-dark(rgb(29 29 31 / 8%), rgb(243 243 243 / 8%));
+  --doc-accent: light-dark(#2678d8, #72adf0);
+  --doc-accent-soft: light-dark(#eaf3fd, #172a3d);
+  --doc-list-marker: light-dark(rgb(20 86 240), rgb(76 136 255)); /* list numbers and bullets: Feishu's blue */
+  --doc-success: var(--doc-series-3);
+  --doc-warning: var(--doc-series-2);
+  /* Cursor Canvas category red; the other Gallery series colors stay unchanged. */
+  --doc-danger: var(--doc-series-5);
+  --doc-info: var(--doc-series-1);
+  --doc-neutral: var(--doc-muted);
+  --doc-series-1: light-dark(#3c9bc9, #73bde0);
+  --doc-series-2: light-dark(#ed8d5a, #f2aa82);
+  --doc-series-3: light-dark(#6e9f69, #447542);
+  --doc-series-4: light-dark(#927ab8, #b4a0d2);
+  --doc-series-5: light-dark(#c04848, #fc6b83);
+  --doc-series-6: light-dark(#65bdba, #89d1ce);
+  /* System UI fonts: Apple's, then Segoe UI with its line on its glyphs on Windows (Doc Segoe,
+     above), then Chinese ones. */
+  --doc-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Doc Segoe", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  --doc-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "PT Mono", "Liberation Mono", monospace;
+  /* Links in the text: the muted gray in every block, on a thin line of Notion's gray always shown. */
+  --doc-link: var(--doc-muted);
+  --doc-link-line: light-dark(rgb(55 53 47 / 40%), rgb(255 255 255 / 28.2%));
+  /* Inline code (as Notion): red text on a faint fill. */
+  --doc-code-inline: light-dark(#cf5148, #e8776d);
+  --doc-code-inline-fill: var(--doc-hover);
+  /* 712px: 44 characters of body text (16px) to a line of Chinese. */
+  --doc-content-max-width: 712px;
+  --doc-compact-figure-max-width: 520px;
+  --doc-page-gutter: 20px;
+  --doc-wide-gutter: clamp(12px, 2.5vw, 40px);
+  /* A detail card (dialog.css): the room on each side of its text, how far it stays from the
+     window's sides (a reader's card goes up to them), the room above and below it, where a press
+     closes it, and its scrollbar's width. */
+  --doc-dialog-side: 40px;
+  --doc-dialog-edge: 0px;
+  --doc-dialog-block-gutter: 40px;
+  --doc-dialog-scrollbar: 10px;
+  /* The gap above and below a block, one name per distinct gap (docs/render.md says which block
+     takes which). A component (a card, a table, a callout, a row of columns, a widget) and a divider
+     stand 20px from the text around them. */
+  --doc-component-gap: 20px;
+  /* A block set apart (a highlight panel and the opening summary, a code block, a Sheet frame, a quote,
+     the end of a list): 16px. */
+  --doc-block-gap: 16px;
+  /* Media blocks (an image, a bookmark, an embed) stand as far from the text around them as a line
+     of text from the next (notion-lite's 8px each side): 14px and the text's own half-leading. */
+  --doc-media-gap: 14px;
+  --doc-column-gap: 20px;
+  --doc-body-font-size: 16px;
+  --doc-body-line-height: 26px;
+  --doc-paragraph-gap: 12px; /* between two paragraphs */
+  /* Blocks that come several together stand closer, a group rather than loose panels: disclosures,
+     code blocks and formula blocks, 8px apart. */
+  --doc-group-gap: 8px;
+  /* Between the items of a list, from an item to the list it holds, from a list to one right after it. */
+  --doc-list-gap: 5px;
+  --doc-small-font-size: 13px;
+  --doc-small-line-height: 18px;
+  --doc-note-font-size: 14px;
+  --doc-note-line-height: 20px;
+  /* The report's title, above the scale of the headings in its text. */
+  --doc-title-font-size: 28px;
+  --doc-title-line-height: 36px;
+  /* Four heading levels (as Feishu); the fourth is body-sized, set apart by its weight. */
+  --doc-h1-font-size: 26px;
+  --doc-h1-line-height: 36px;
+  --doc-h2-font-size: 22px;
+  --doc-h2-line-height: 31px;
+  --doc-h3-font-size: 20px;
+  --doc-h3-line-height: 28px;
+  --doc-h4-font-size: 16px;
+  --doc-h4-line-height: 24px;
+  /* A card's title. */
+  --doc-card-title-font-size: 18px;
+  --doc-card-title-line-height: 25px;
+  --doc-table-font-size: 15px;
+  --doc-table-line-height: 20px;
+  --doc-table-radius: 8px;
+  /* A sortable header's arrow (table.css): light where the pointer shows it, darker on the sorted column. */
+  --doc-table-sort-arrow: light-dark(rgb(55 53 47 / 28%), rgb(255 255 255 / 28%));
+  --doc-table-sort-arrow-active: light-dark(rgb(55 53 47 / 72%), rgb(255 255 255 / 72%));
+  /* Notion's neutral fills and line, written once: under the pointer, pressed, and the hairline (a table's lines, a Sheet's frame, an embed's).
+     The dark hairline is a light veil, Notion's #383836 on the page's background: on the palette's
+     gray (#383836 too: a table's header cells, a gray highlight block around it) or any other fill
+     it is that much lighter, so it never vanishes into one. */
+  --doc-hover: light-dark(rgb(33 27 23 / 5%), rgb(255 255 255 / 5.5%));
+  --doc-press: light-dark(rgb(33 27 23 / 10%), rgb(255 255 255 / 11%));
+  --doc-hairline: light-dark(#e6e5e3, rgb(255 255 240 / 13.9%));
+  /* A table's frame in a block with a fill of its own (table.css): the hairline as it lies on the
+     palette's gray, opaque. The frame lies over the table's body, whose fill is the page's, where the
+     veil comes out the gray of a block around it. */
+  --doc-table-frame-filled: light-dark(#e6e5e3, #545450);
+  /* A flowchart's arrows and the circle behind a step's number (flowchart.css): neutral greys. */
+  --doc-flow-line: light-dark(rgb(55 53 47 / 38%), rgb(255 255 255 / 34%));
+  --doc-flow-badge: light-dark(rgb(55 53 47 / 8%), rgb(255 255 255 / 10%));
+  /* The thin scrollbars the kit draws over a table's frame (tables.js). */
+  --doc-scrollbar-thumb: light-dark(rgb(29 29 31 / 24%), rgb(243 243 243 / 26%));
+  --doc-scrollbar-thumb-active: light-dark(rgb(29 29 31 / 42%), rgb(243 243 243 / 44%));
+  /* Code blocks in Notion's look (its panel, monospace, toolbar and Prism colors), independent of
+     chart categories. The room above and below the words of a code block's title and a disclosure's
+     (their header row: code.css, details.css), one design for the two. */
+  --doc-block-title-padding: 5px;
+  --doc-code-font: "SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace;
+  --doc-code-foreground: light-dark(#2c2c2b, #f0efed);
+  --doc-code-background: light-dark(rgb(66 35 3 / 3%), rgb(252 252 252 / 3%));
+  --doc-caption: light-dark(#7d7a75, #ada9a3); /* a picture's caption (Notion's) */
+  --doc-code-chrome: #8e8b86;
+  --doc-code-pressed: light-dark(rgb(31 35 41 / 12%), rgb(255 255 255 / 12%));
+  --doc-code-toolbar-shadow: 0 8px 12px rgb(25 25 25 / 2.7%), 0 2px 6px rgb(25 25 25 / 2.7%), 0 0 0 1px light-dark(rgb(42 28 0 / 7%), #383836);
+  --doc-code-separator: light-dark(#f0efed, #2c2c2b);
+  --doc-code-line-number: light-dark(rgb(55 53 47 / 35%), rgb(255 255 255 / 28%));
+  --doc-code-line-fold: light-dark(rgb(55 53 47 / 30%), rgb(255 255 255 / 24%)); /* fainter than the block's own arrow (chrome) */
+  --doc-code-fold-more: light-dark(rgb(55 53 47 / 8%), rgb(255 255 255 / 9%));
+  --doc-code-fold-more-hover: light-dark(rgb(55 53 47 / 14%), rgb(255 255 255 / 15%));
+  --doc-code-scrollbar: light-dark(#d3d1cb, rgb(255 255 255 / 20%));
+  /* The colors Shiki's CSS-variables theme reads (code.js; the 12 of them it has rules for). */
+  --doc-code-token-comment: light-dark(#708090, #998066);
+  --doc-code-token-string: light-dark(#669900, #bde052);
+  --doc-code-token-string-expression: var(--doc-code-token-string);
+  --doc-code-token-keyword: light-dark(#0077aa, #66a2cc);
+  --doc-code-token-function: light-dark(#dd4a68, #ecec93);
+  --doc-code-token-constant: light-dark(#990055, #d1949e);
+  --doc-code-token-parameter: var(--doc-code-foreground);
+  --doc-code-token-punctuation: light-dark(#999999, rgb(240 239 237 / 70%));
+  --doc-code-token-link: light-dark(#9a6e3a, #f5b83d);
+  --doc-code-token-inserted: var(--doc-diff-added);
+  --doc-code-token-deleted: var(--doc-diff-removed);
+  --doc-code-token-changed: var(--doc-code-token-function);
+  --doc-diff-added: light-dark(#1a7f37, #3fb950);
+  --doc-diff-removed: light-dark(#cf222e, #f85149);
+  --doc-diff-added-fill: light-dark(rgb(46 160 67 / 10%), rgb(46 160 67 / 15%));
+  --doc-diff-removed-fill: light-dark(rgb(248 81 73 / 10%), rgb(248 81 73 / 15%));
+  --doc-diff-added-strip: light-dark(rgb(46 160 67 / 55%), rgb(63 185 80 / 55%));
+  --doc-diff-removed-strip: light-dark(rgb(248 81 73 / 55%), rgb(248 81 73 / 55%));
+  --doc-chart-axis-font-size: 13px;
+  --doc-table-fill: var(--doc-bg);
+}
+
+:root[data-doc-theme="light"] { color-scheme: light; }
+:root[data-doc-theme="dark"] { color-scheme: dark; }
+
+/* The kit's words a stylesheet shows (--doc-word-<key>: an empty code block's title), written here
+   from its table (src/render/kit/words.js, STYLE_WORDS) by kit-build.mjs: Chinese, and English where
+   Gallery says its UI is (data-ge-language="en") or, in a file of its own, the page's lang is en. */
+:root { --doc-word-code-title: "代码块"; }
+:root[data-ge-language="en"], :root:not([data-ge-language])[lang|="en" i] { --doc-word-code-title: "Code"; }
+
+@media (max-width: 640px) {
+  :root { --doc-page-gutter: 12px; }
+}
+
+/* The document itself: the body's type and colors, holding the first paint until the page is
+   ready, links and inline code, the inline text colors and highlights, the screen-reader-only
+   helper, and reduced motion. */
+
+* { box-sizing: border-box; }
+
+/* The corner radius of the box a block draws inside itself (a file's row, a bookmark's card, an
+   embed's frame), which the page editor's selection wraps, and how far past it the selection lies
+   (a file's row 4px; a callout's square box 6px, its selection round by as much); not passed down
+   to what is in the block. */
+@property --doc-box-radius { syntax: "<length>"; inherits: false; initial-value: 0px; }
+@property --doc-box-reach { syntax: "<length>"; inherits: false; initial-value: 0px; }
+
+/* Scrollbars as Notion's: a thumb on a transparent track, in either theme (Chrome's dark default
+   drew a gray track). Inherited, so every scrolling part of the page has it unless it says otherwise.
+   The page has no sideways to scroll, what is wide scrolling in itself: a touchpad going sideways
+   moves nothing and goes on to the browser, for its swipe back and forward. Past its top or end the
+   page springs back. */
+html { background: var(--doc-bg); scrollbar-color: var(--doc-code-scrollbar) transparent; }
+@media screen { html { overflow-x: hidden; } }
+
+body {
+  min-width: 320px;
+  margin: 0;
+  color: var(--doc-text);
+  background: var(--doc-bg);
+  font-family: var(--doc-font);
+  font-size: var(--doc-body-font-size);
+  line-height: var(--doc-body-line-height);
+}
+
+/* Hold the first paint until ui.js marks the page ready: by then the reader's theme and width
+   are applied and the report's scripts have set up Sheets, charts, tables and formulas, so the
+   page never flashes an intermediate state. If that never happens, reveal it anyway. */
+:root:not([data-doc-ready]) body:has(> .doc-page) {
+  visibility: hidden;
+  animation: doc-reveal 0s linear 1.2s forwards;
+}
+@keyframes doc-reveal { to { visibility: visible; } }
+
+button, input, select, textarea { font: inherit; }
+
+/* A link is gray with a thin line under it, clear of Chinese characters, under the pointer as anywhere. */
+a { color: var(--doc-link); text-decoration: underline .05em var(--doc-link-line); text-underline-offset: .2em; }
+/* Underlined text: the line clear of Chinese characters, in inline code's red. */
+u { text-decoration: underline 2px var(--doc-code-inline); text-underline-offset: .3em; text-decoration-skip-ink: none; }
+/* An underline's line in another color than the red, or thinner or heavier than its 2px (the page
+   editor's format bar sets them; "plain" is the text's own color). */
+.doc-underline-orange { text-decoration-color: light-dark(#d27b2d, #e0955a); }
+.doc-underline-blue { text-decoration-color: light-dark(#337ea9, #6ea8d8); }
+.doc-underline-purple { text-decoration-color: light-dark(#9065b0, #b28ad6); }
+.doc-underline-plain { text-decoration-color: currentColor; }
+.doc-underline-thin { text-decoration-thickness: 1px; }
+.doc-underline-thick { text-decoration-thickness: 3px; }
+
+/* Inline code (as Notion): no margin of its own, the text's own spaces part it from the words
+   beside it (the editor types one there, as between Chinese and Latin text). The code of a code
+   block or a diff is none (code.css draws it); the exclusion weighs nothing, so inline code keeps the
+   weight of a bare `code`. */
+code:where(:not(:is(.doc-code > pre, .doc-diff-body) code)) {
+  position: relative;
+  margin: 0;
+  bottom: .065em;
+  padding: .2em .4em;
+  border-radius: 4px;
+  color: var(--doc-code-inline);
+  background: var(--doc-code-inline-fill);
+  font-family: var(--doc-mono);
+  font-size: 85%;
+  line-height: normal;
+}
+
+/* A number range (3–13, 1–3B, 22.8%–23.7%) is one word: the line never breaks at its dash
+   (runtime/spacing.js holds it in this span as the page renders). */
+.doc-range { white-space: nowrap; }
+
+/* Inline text colors and highlights (<span class="doc-text-red">): Notion's nine colors
+   (its text and background colors, light and dark). The page editor's selection toolbar writes
+   these classes; both follow the light/dark theme. A text color is also --doc-ink, for a
+   component that takes it over (a code block's plain text, a list item's marker, a formula block).
+   A background is --doc-fill, and its deep shade --doc-fill-deep (its color's text color),
+   for a line a component draws along its fill (a callout's). */
+/* The fill a color class sets is its host's own, not passed down to what stands in it: a table's cell
+   takes its own fill or the table's (table.css), never that of the panel or disclosure around it;
+   a callout without a color its own default's, never the line of the panel it stands in. */
+@property --doc-fill { syntax: "*"; inherits: false; }
+@property --doc-fill-deep { syntax: "*"; inherits: false; }
+.doc-text-gray { --doc-ink: var(--doc-muted); color: var(--doc-ink); }
+.doc-text-brown { --doc-ink: light-dark(#9f765a, #ba856f); color: var(--doc-ink); }
+.doc-text-orange { --doc-ink: light-dark(#d27b2d, #c77d48); color: var(--doc-ink); }
+.doc-text-yellow { --doc-ink: light-dark(#cb9434, #ca9849); color: var(--doc-ink); }
+.doc-text-green { --doc-ink: light-dark(#50946e, #529e72); color: var(--doc-ink); }
+.doc-text-blue { --doc-ink: light-dark(#387dc9, #5e87c9); color: var(--doc-ink); }
+.doc-text-purple { --doc-ink: light-dark(#9a6bb4, #9d68d3); color: var(--doc-ink); }
+.doc-text-pink { --doc-ink: light-dark(#c14c8a, #d15796); color: var(--doc-ink); }
+.doc-text-red { --doc-ink: light-dark(#cf5148, #df5452); color: var(--doc-ink); }
+/* What every host of a color class has: the fill, as its background. Its corners are its host's own, one declaration
+   each (a span here, a paragraph and heading below, a list item in flow.css, a card or a disclosure in its own
+   stylesheet); a block that takes no corners is square, and says nothing. */
+:is(.doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-highlight-yellow, .doc-highlight-green, .doc-highlight-blue, .doc-highlight-purple, .doc-highlight-pink, .doc-highlight-red) { background: var(--doc-fill); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
+span:is(.doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-highlight-yellow, .doc-highlight-green, .doc-highlight-blue, .doc-highlight-purple, .doc-highlight-pink, .doc-highlight-red) { border-radius: 3px; }
+.doc-highlight-gray { --doc-fill: light-dark(#f0efed, #383836); --doc-fill-deep: var(--doc-muted); }
+.doc-highlight-brown { --doc-fill: light-dark(#f5ede9, #45362d); --doc-fill-deep: light-dark(#9f765a, #ba856f); }
+.doc-highlight-orange { --doc-fill: light-dark(#fbebde, #53361f); --doc-fill-deep: light-dark(#d27b2d, #c77d48); }
+.doc-highlight-yellow { --doc-fill: light-dark(#f9f3dc, #504425); --doc-fill-deep: light-dark(#cb9434, #ca9849); }
+.doc-highlight-green { --doc-fill: light-dark(#e8f1ec, #263d30); --doc-fill-deep: light-dark(#50946e, #529e72); }
+.doc-highlight-blue { --doc-fill: light-dark(#e5f2fc, #233850); --doc-fill-deep: light-dark(#387dc9, #5e87c9); }
+.doc-highlight-purple { --doc-fill: light-dark(#f3ebf9, #3c2d47); --doc-fill-deep: light-dark(#9a6bb4, #9d68d3); }
+.doc-highlight-pink { --doc-fill: light-dark(#fae9f1, #4e2b3c); --doc-fill-deep: light-dark(#c14c8a, #d15796); }
+.doc-highlight-red { --doc-fill: light-dark(#fce9e7, #502c29); --doc-fill-deep: light-dark(#cf5148, #df5452); }
+
+/* A block's color (颜色 in the page editor's block menu, Notion's block colors): the same classes on
+   a paragraph or heading color its whole text, or put a background behind the whole block. The
+   background reaches 2px past the block, round by 4px, which is just where the editor's light blue
+   of a selected text block lies (Feishu's), and takes no room: nothing moves when a block is given
+   one (padding and margins once made a heading shift and a paragraph's fill outgrow its selection). */
+:is(p, h1, h2, h3, h4):is(.doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-highlight-yellow, .doc-highlight-green, .doc-highlight-blue, .doc-highlight-purple, .doc-highlight-pink, .doc-highlight-red) { border-radius: 2px; box-shadow: 0 0 0 2px var(--doc-fill); }
+
+/* A component that failed to start or draw, told next to it to who writes the page (the kit's runtime;
+   never in an export or a presentation, nor on paper). */
+.doc-kit-error {
+  margin: 8px 0;
+  padding: 8px 12px;
+  border-radius: 6px;
+  color: light-dark(#a1352b, #f19c92);
+  background: light-dark(#fce9e7, #3b2321);
+  font: 13px/1.5 var(--doc-mono);
+  white-space: pre-wrap;
+}
+@media print {
+  .doc-kit-error { display: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
+}
+
+/* The page: the reading column (or full width) and the report's header (kicker, title, a
+   line under the title). */
+
+.doc-page {
+  container-type: inline-size;
+  width: min(
+    var(--doc-content-max-width),
+    calc(100% - (2 * var(--doc-page-gutter)))
+  );
+  margin: 0 auto;
+  /* Top room for the shared controls is fixed, so the page never moves when they appear. Below the
+     last block, room to scroll it up toward the middle of the window (Notion's 30vh), 64px at least. */
+  padding: 52px 0 max(64px, 30vh);
+  /* A run with no place to break (a long path or URL in prose, a callout or inline code) breaks
+     where it would leave its line, as a cell's, a caption's and a code block's already do: unbroken,
+     it widened the page past a 360px window. break-word, not anywhere: a word still counts whole
+     for min-content, so a table's columns and a card's least width stay as they were. */
+  overflow-wrap: break-word;
+}
+
+:root[data-doc-width="full"] .doc-page {
+  width: calc(100% - (2 * var(--doc-wide-gutter)));
+  max-width: none;
+}
+
+/* The page's icon (Notion's): above the title, left-aligned with its text, as large as Notion's
+   for its title (78px for 40px there). An emoji, an icon of the MingCute or Tabler set in a color
+   (data-icon) or an image of the report's folder; the preview, a build and an export show each as a
+   picture inside (render/emoji.mjs): an emoji's Twemoji image, the icon's SVG in the color below
+   (Notion's ten, light and dark), the image covering its box, 4 round. Written as the emoji itself, the
+   system's font shows it. */
+.doc-icon {
+  width: max-content;
+  margin: 0 0 12px;
+  font-size: 56px;
+  line-height: 1;
+  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
+}
+.doc-icon > img,
+.doc-icon > svg { display: block; width: 56px; height: 56px; }
+.doc-icon > img:not([alt]),
+.doc-icon > img[alt=""] { object-fit: cover; border-radius: 4px; }
+.doc-icon[data-icon]:empty { width: 56px; height: 56px; }
+/* The ten colors: shared/emoji/icon-value.mjs ICON_COLOR_VALUES, which tests/unit/icons.mjs holds these rules to. */
+.doc-icon[data-icon$="_gray.svg"] { color: light-dark(#55534E, #D3D3D3); }
+.doc-icon[data-icon$="_lightgray.svg"] { color: light-dark(#A6A299, #7F7F7F); }
+.doc-icon[data-icon$="_brown.svg"] { color: light-dark(#9F6B53, #AA755F); }
+.doc-icon[data-icon$="_yellow.svg"] { color: light-dark(#CB912F, #CA8E1B); }
+.doc-icon[data-icon$="_orange.svg"] { color: light-dark(#D9730D, #D87620); }
+.doc-icon[data-icon$="_green.svg"] { color: light-dark(#448361, #2D9964); }
+.doc-icon[data-icon$="_blue.svg"] { color: light-dark(#337EA9, #2E7CD1); }
+.doc-icon[data-icon$="_purple.svg"] { color: light-dark(#9065B0, #8D5BC1); }
+.doc-icon[data-icon$="_pink.svg"] { color: light-dark(#C14C8A, #C94079); }
+.doc-icon[data-icon$="_red.svg"] { color: light-dark(#D44C47, #CD4945); }
+
+.doc-kicker {
+  margin: 0 0 8px;
+  color: var(--doc-muted);
+  font-size: var(--doc-small-font-size);
+  font-weight: 600;
+  line-height: var(--doc-small-line-height);
+}
+
+/* The title keeps one gap below it, whatever comes next, in the header or after it (a line under it,
+   body text, a card, a section): its margin collapses with the next block's, through the header. */
+.doc-title {
+  margin: 0 0 32px;
+  font-size: var(--doc-title-font-size);
+  font-weight: 600;
+  line-height: var(--doc-title-line-height);
+  letter-spacing: -.025em;
+}
+
+/* A line under the title (any brief note) is a paragraph like
+   any in the body (small text: .doc-note), with the same gaps: the header adds none. */
+.doc-header > .doc-title ~ p { margin: 0 0 var(--doc-paragraph-gap); }
+
+@media (max-width: 760px) {
+  .doc-page { padding-top: 60px; }
+}
+
+@media print {
+  .doc-page,
+  :root[data-doc-width="full"] .doc-page { width: 100%; padding-top: 0; padding-bottom: 64px; }
+}
+
+/* The display settings at the top right (ui.js), as Notion's: one quiet button (no frame, a light
+   fill under the pointer) opening a menu card of the reader's choices for this report: its look
+   (the system's, light or dark, the chosen one checked), full width (a switch), and a copy of the
+   view as it is now. And the kit's plain button. */
+
+.doc-display {
+  /* A row under the pointer, the button while its menu is open. */
+  position: fixed;
+  z-index: 1000;
+  top: max(10px, env(safe-area-inset-top));
+  right: max(16px, env(safe-area-inset-right));
+}
+/* Where the page's side is narrower than the button and its inset (46px: below 804px, the 712px
+   reading column and twice that; at full width, whose gutter is at most 40px), a fixed button would
+   lie over the text as the page scrolls under it: there it stays in the room the page keeps above its
+   header (.doc-page's padding-top, page.css) and scrolls away with the page. The width a media
+   query reads counts the window's scrollbar, which the page's side has not: up to 17px more (a
+   classic scrollbar, Windows). */
+@media (max-width: 820px) {
+  .doc-display { position: absolute; }
+}
+:root[data-doc-width="full"] .doc-display { position: absolute; }
+
+.doc-display-button {
+  display: grid;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  place-items: center;
+  border: 0;
+  border-radius: 6px;
+  color: var(--doc-muted);
+  background: transparent;
+  cursor: pointer;
+  transition: color 100ms ease-in-out, background-color 100ms ease-in-out;
+}
+
+.doc-display-button:hover,
+.doc-display-button[aria-expanded="true"] {
+  color: var(--doc-text);
+  background: var(--doc-hover);
+}
+
+.doc-display-button:active { background: var(--doc-press); }
+
+.doc-display-button:focus-visible {
+  outline: 2px solid var(--doc-accent);
+  outline-offset: -2px;
+}
+
+.doc-display-button svg {
+  width: 20px;
+  height: 20px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* The menu card: radius 10, Notion's popup surface and shadow, sections of rows split by a hairline. */
+.doc-display-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  width: 232px;
+  max-width: calc(100vw - 24px);
+  overflow: hidden;
+  border-radius: 10px;
+  color: var(--doc-text);
+  background: light-dark(#ffffff, #252525);
+  box-shadow:
+    0 0 0 1px light-dark(rgb(42 28 0 / 7%), #383836),
+    0 20px 24px light-dark(rgb(25 25 25 / 5%), rgb(0 0 0 / 20%)),
+    0 5px 8px light-dark(rgb(25 25 25 / 2.7%), rgb(0 0 0 / 12%));
+  font: 14px/1.2 var(--doc-font);
+  transition: opacity 120ms ease-out, translate 120ms ease-out;
+}
+
+@starting-style {
+  .doc-display-menu { opacity: 0; translate: 0 -4px; }
+}
+
+.doc-display-section {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: 4px;
+}
+
+.doc-display-section + .doc-display-section::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  inset-inline: 12px;
+  height: 1px;
+  background: light-dark(rgb(42 28 0 / 7%), rgb(255 255 243 / 8%));
+}
+
+.doc-display-header {
+  padding: 6px 8px 4px;
+  color: var(--doc-muted);
+  font-size: 12px;
+  font-weight: 500;
+  user-select: none;
+}
+
+.doc-display-item {
+  display: flex;
+  width: 100%;
+  min-height: 28px;
+  padding: 0 8px;
+  align-items: center;
+  gap: 8px;
+  border: 0;
+  border-radius: 6px;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 20ms ease-in;
+}
+
+/* Under the pointer, or reached with the keys: one light fill, as Notion's rows. */
+.doc-display-item:hover,
+.doc-display-item:focus-visible { background: var(--doc-hover); }
+
+.doc-display-item:focus { outline: none; }
+
+.doc-display-item:active { background: var(--doc-press); }
+
+.doc-display-item:disabled { opacity: .5; cursor: progress; }
+
+.doc-display-icon {
+  display: grid;
+  flex: none;
+  width: 20px;
+  height: 20px;
+  place-items: center;
+  color: var(--doc-muted);
+}
+
+.doc-display-item svg {
+  width: 18px;
+  height: 18px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.doc-display-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The look chosen: a check at the right. */
+.doc-display-item .doc-display-check { flex: none; width: 16px; height: 16px; stroke-width: 1.8; visibility: hidden; }
+.doc-display-item[aria-checked="true"] .doc-display-check { visibility: visible; }
+
+/* Full width: a switch, as Notion's (26 × 14, a 14px knob). */
+.doc-display-switch {
+  display: flex;
+  flex: none;
+  width: 26px;
+  height: 14px;
+  padding: 2px;
+  box-sizing: content-box;
+  border-radius: 44px;
+  background: light-dark(rgb(135 131 120 / 30%), rgb(202 204 206 / 30%));
+  transition: background-color 200ms;
+}
+
+.doc-display-switch > span {
+  width: 14px;
+  height: 14px;
+  border-radius: 44px;
+  background: #ffffff;
+  transition: transform 200ms ease-out;
+}
+
+.doc-display-item[aria-checked="true"] .doc-display-switch { background: var(--doc-accent); }
+.doc-display-item[aria-checked="true"] .doc-display-switch > span { transform: translateX(12px); }
+
+.doc-button {
+  display: inline-flex;
+  min-height: 36px;
+  align-items: center;
+  justify-content: center;
+  padding: 7px 12px;
+  border: 1px solid var(--doc-border);
+  border-radius: 8px;
+  color: var(--doc-text);
+  background: var(--doc-surface);
+  font-weight: 500;
+  line-height: 20px;
+  cursor: pointer;
+  transition: background-color 100ms ease, border-color 100ms ease;
+}
+
+.doc-button:hover {
+  border-color: color-mix(in srgb, var(--doc-text) 22%, transparent);
+  background: color-mix(in srgb, var(--doc-text) 5%, var(--doc-surface));
+}
+
+.doc-button:focus-visible {
+  outline: 2px solid var(--doc-accent);
+  outline-offset: 2px;
+}
+
+@media print {
+  .doc-display { display: none; }
+}
+
+/* 选项卡区块 (sheets.js), as Notion's tabs: a frame 16px round (1px, Notion's line) holding a row of
+   pill tabs and the panel shown, 16px in; or, with .doc-sheet-shell--plain, no frame and no room
+   inside it (the tabs and the panel at the flow's edge). A tab is a pill 32px high, its name 14px:
+   gray, a light fill under the pointer; the one shown in the text's color on that fill. Nothing
+   beside the page (notion-lite's tabs: no copy of the tabs at the window's edge). */
+
+.doc-sheet-shell {
+  margin: var(--doc-block-gap) 0;
+  border: 1px solid var(--doc-hairline);
+  border-radius: 16px;
+}
+.doc-sheet-shell--plain { border: 0; border-radius: 0; }
+
+.doc-sheet-tabs {
+  display: flex;
+  max-width: 100%;
+  gap: 4px;
+  margin: 16px 16px 14px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.doc-sheet-tabs::-webkit-scrollbar { display: none; }
+.doc-sheet-shell--plain > .doc-sheet-tabs { margin: 0 0 14px; }
+
+.doc-sheet-tab {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  height: 32px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 9999px;
+  color: light-dark(#8e8b86, #9b9a97);
+  background: transparent;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.2;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 100ms ease-in-out;
+}
+.doc-sheet-tab:hover { background: var(--doc-hover); }
+.doc-sheet-tab:active { background: var(--doc-press); }
+.doc-sheet-tab[aria-selected="true"] { color: var(--doc-text); background: var(--doc-hover); }
+.doc-sheet-tab[aria-selected="true"]:hover { background: light-dark(rgb(33 27 23 / 7.5%), rgb(255 255 255 / 8%)); }
+.doc-sheet-tab:focus-visible { outline: 2px solid var(--doc-accent); outline-offset: 1px; }
+
+.doc-sheet-shell > [data-doc-sheet] { padding: 0 16px 16px; }
+.doc-sheet-shell--plain > [data-doc-sheet] { padding: 0; }
+.doc-sheet-shell > [data-doc-sheet][hidden] { display: none; }
+
+/* A tab's emoji (data-tab-icon, the page editor's 编辑图标), before its name. */
+.doc-sheet-tab[data-tab-icon]::before { content: attr(data-tab-icon); margin-inline-end: 6px; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
+/* Its picture, as the page's icon and a highlight block's (Twemoji, never the system's font): the
+   preview, a build and an export give it as --doc-tab-icon (render/emoji.mjs). */
+.doc-sheet-tab[data-tab-icon][style*="--doc-tab-icon"]::before { content: ""; display: inline-block; flex: none; width: 1.125em; height: 1.125em; background: var(--doc-tab-icon) center / contain no-repeat; }
+
+/* A report's state widgets (state.js): fields, filter buttons, lists of what the reader kept. */
+
+/* Labelled fields, one below another: a whole block of the report's controls. */
+.doc-state-fields {
+  display: grid;
+  gap: 6px;
+  margin-block: var(--doc-component-gap);
+}
+
+.doc-state-fields > label {
+  margin-top: 4px;
+  color: var(--doc-muted);
+  font-size: var(--doc-note-font-size);
+  line-height: var(--doc-note-line-height);
+}
+
+.doc-state-fields > label:first-child { margin-top: 0; }
+
+.doc-state-field {
+  width: 100%;
+  min-height: 38px;
+  padding: 8px 10px;
+  border: 1px solid var(--doc-border);
+  border-radius: 8px;
+  color: var(--doc-text);
+  background: var(--doc-bg);
+  line-height: 20px;
+  resize: vertical;
+}
+
+.doc-state-field:focus-visible {
+  outline: 2px solid var(--doc-accent);
+  outline-offset: 2px;
+}
+
+.doc-state-actions,
+.doc-filter-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.doc-filter-row { margin-block: var(--doc-component-gap); }
+
+/* A filter: its buttons and what they filter, one block (the page editor's 整体块). */
+.doc-filter { margin-block: var(--doc-component-gap); }
+.doc-filter > .doc-filter-row { margin-block: 0; }
+.doc-filter > :last-child { margin-bottom: 0; }
+
+.doc-state-actions { margin-top: 10px; }
+
+.doc-filter-button {
+  min-height: 30px;
+  padding: 4px 10px;
+  border: 1px solid var(--doc-border);
+  border-radius: 999px;
+  color: var(--doc-muted);
+  background: transparent;
+  font-size: var(--doc-small-font-size);
+  cursor: pointer;
+}
+
+.doc-filter-button:hover,
+.doc-filter-button:is(.is-active, [aria-pressed="true"]) {
+  color: var(--doc-text);
+  border-color: color-mix(in srgb, var(--doc-accent) 48%, var(--doc-border));
+  background: var(--doc-accent-soft);
+}
+
+.doc-filter-button:focus-visible {
+  outline: 2px solid var(--doc-accent);
+  outline-offset: 2px;
+}
+
+.doc-state-list {
+  display: grid;
+  gap: 8px;
+  margin: 12px 0 var(--doc-component-gap);
+  padding: 0;
+  list-style: none;
+}
+
+.doc-state-list li {
+  padding: 9px 10px;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--doc-text) 5%, var(--doc-surface));
+}
+
+/* 公式 (math.js, KaTeX): inline formulas and formula blocks. */
+
+/* An inline formula keeps a hair of optical room (.08em) at each side, a margin and not a space: the
+   spaces around it are real text. It wraps with its line as TeX's does: between KaTeX's pieces, after
+   a relation or an operator (each piece kept whole: katex.css), never off the line's end. */
+.doc-math-inline { margin-inline: .08em; }
+/* A formula and the closing punctuation right after it (，。、）…: runtime/spacing.js puts them in this
+   span, or the bold, link or colored run the formula ends and the marks) are not parted by a line's
+   end, so the mark never starts a line: the one place the span holds is between its own children.
+   Inside them the line breaks as anywhere: between the formula's pieces, as above, and in the run's
+   words before it, which would otherwise make one unbreakable line wider than the page; at a word's
+   end only (overflow-wrap: normal), as a cell that breaks a line anywhere it must would part the
+   run's end from the marks. */
+.doc-math-tie { white-space: nowrap; }
+.doc-math-tie > :not(.doc-math-inline):not(.katex):not(.doc-math-joiner) { white-space: normal; overflow-wrap: normal; }
+/* The formula's boxes are held too: Chrome breaks after an inline-block (KaTeX's last box) by the
+   white-space of its parent, so a .katex-html that wraps would leave the mark at the start of the next
+   line. It wraps only at the zero-width spaces between its boxes (.doc-math-break, spacing.js).
+   After a wrapper's end Chrome breaks by the wrapper's white-space (normal, above): a word joiner
+   (U+2060, no line breaks beside it) drawn before the marks holds that place, generated content of
+   an empty span (spacing.js), so that no copy of the text holds it; held as the span is, so that a
+   line that breaks anywhere it must (a table cell's, overflow-wrap) does not break there either: a
+   formula and its mark wider than the line reach past it rather than part. */
+.doc-math-tie .katex-html { white-space: nowrap; }
+.doc-math-break { white-space: normal; }
+.doc-math-joiner::before { content: "\2060"; }
+
+/* Formula blocks often come several together: a group gap apart (their own 8px inside), as disclosures are.
+   The block's own size (1.08em) is its text's metrics: the line height (1.8 of it) and the strut the
+   formula stands on; the formula's own size is set at .katex below. */
+.doc-math-block {
+  max-width: 100%;
+  margin: var(--doc-group-gap) 0;
+  padding: 8px 0;
+  overflow-x: auto;
+  color: var(--doc-text);
+  font-size: 1.08em;
+  line-height: 1.8;
+  text-align: center;
+}
+
+/* A formula wider than the page scrolls sideways under a thumb as a table's (styles/table.css): 6px,
+   round, 3px in from the bottom edge, shown while the pointer is over it; no track, no buttons.
+   The page's scrollbar color (base.css, inherited) is set back, or Chrome draws its own bar. */
+.doc-math-block { scrollbar-color: auto; }
+.doc-math-block::-webkit-scrollbar { height: 12px; background: transparent; }
+.doc-math-block::-webkit-scrollbar-button { display: none; }
+.doc-math-block::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: transparent padding-box; }
+.doc-math-block:hover::-webkit-scrollbar-thumb { background-color: var(--doc-scrollbar-thumb); }
+.doc-math-block::-webkit-scrollbar-thumb:hover { background-color: var(--doc-scrollbar-thumb-active); }
+@supports not selector(::-webkit-scrollbar) {
+  .doc-math-block { scrollbar-width: thin; scrollbar-color: var(--doc-scrollbar-thumb) transparent; }
+}
+
+/* KaTeX's own size for formulas in text (as Notion), on the text's line. */
+.doc-math-inline .katex { font-size: 1.21em; line-height: 1; }
+.doc-math-block .katex-display { width: max-content; min-width: 100%; margin: 0; }
+/* A block formula is drawn at 1.08em of the block (KaTeX's 1.21em is set back), and the block is itself
+   1.08em of the text: 1.1664em of the text, 18.66px at the body size, a little smaller than the 1.21em of
+   a formula in a line. The two multiply and are kept so: the block's own size is its line height and
+   its strut, and one step of 1.1664em instead (the block at 1em) draws the same formula but makes
+   every formula block 2.3px lower (kit-diff). */
+.doc-math-block .katex { font-size: 1.08em; }
+
+/* A formula block's color (颜色 in the page editor's block menu, base.css's classes): a background
+   with room at its sides, or the color of its text. */
+.doc-math-block:is(.doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-highlight-yellow, .doc-highlight-green, .doc-highlight-blue, .doc-highlight-purple, .doc-highlight-pink, .doc-highlight-red) { padding-inline: 12px; border-radius: 10px; }
+.doc-math-block:is(.doc-text-gray, .doc-text-brown, .doc-text-orange, .doc-text-yellow, .doc-text-green, .doc-text-blue, .doc-text-purple, .doc-text-pink, .doc-text-red) { color: var(--doc-ink); }
+
+/* A link shown as its page's icon and title (图标视图, 页面块: shared/components/mention.mjs): the
+   link's color and line as any link's (base.css), the icon before the title, a little taller than
+   a capital and on the text's middle, rounded a little, the line under the title alone; an empty
+   icon is a globe drawn in the link's color. */
+.doc-link-mention-icon {
+  display: inline-block;
+  width: 1.125em;
+  height: 1.125em;
+  margin-inline-end: .3em;
+  vertical-align: -.2em;
+  border-radius: 3px;
+  object-fit: contain;
+}
+span.doc-link-mention-icon {
+  border-radius: 0;
+  background: currentColor;
+  opacity: .85;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='10' cy='10' r='7.25'/%3E%3Cpath d='M2.75 10h14.5M10 2.75c-1.9 2-2.85 4.4-2.85 7.25S8.1 15.25 10 17.25M10 2.75c1.9 2 2.85 4.4 2.85 7.25s-.95 5.25-2.85 7.25'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='10' cy='10' r='7.25'/%3E%3Cpath d='M2.75 10h14.5M10 2.75c-1.9 2-2.85 4.4-2.85 7.25S8.1 15.25 10 17.25M10 2.75c1.9 2 2.85 4.4 2.85 7.25s-.95 5.25-2.85 7.25'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+/* A page block: the address is a document's. An empty icon is a page, as a page with none has in the
+   workbench's tree, and the pointer lights it up as Notion's page mention, a whole to click on. */
+.doc-link-mention[href]:not([href^="http" i]) > span.doc-link-mention-icon {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.75 2.75h5.5l3.5 3.5v9.5a1.5 1.5 0 0 1-1.5 1.5h-7.5a1.5 1.5 0 0 1-1.5-1.5V4.25a1.5 1.5 0 0 1 1.5-1.5z'/%3E%3Cpath d='M11 2.75v3c0 .41.34.75.75.75h3'/%3E%3Cpath d='M7.25 10h5.5M7.25 13h3.5'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.75 2.75h5.5l3.5 3.5v9.5a1.5 1.5 0 0 1-1.5 1.5h-7.5a1.5 1.5 0 0 1-1.5-1.5V4.25a1.5 1.5 0 0 1 1.5-1.5z'/%3E%3Cpath d='M11 2.75v3c0 .41.34.75.75.75h3'/%3E%3Cpath d='M7.25 10h5.5M7.25 13h3.5'/%3E%3C/svg%3E");
+}
+.doc-link-mention[href]:not([href^="http" i]):hover {
+  border-radius: 1px;
+  background: rgb(148 148 148 / 15%);
+  box-shadow: 0 0 0 3px rgb(148 148 148 / 15%);
+}
+/* A page block whose document is not there (render/page-chips.mjs): its words, gray, no line. */
+.doc-link-mention[data-doc-gone] { color: var(--doc-muted); text-decoration: none; }
+
+/* One left empty (no address yet: the editor's gray 链接 or 页面) shows to no reader. */
+.doc-link-mention:empty { display: none; }
+
+/* 代码块 (code.js): div.doc-code, Feishu's code block in Notion's look. A soft panel holding a
+   header (the kit's fold arrow, the block's title, an excerpt's range of lines, the kit's toolbar
+   shown while the pointer is over the block: its language, copy and wrap) above its code (the pre),
+   its lines numbered and its long lines wrapped. Folded (doc-code--folded) it shows its header
+   alone; doc-code--nowrap scrolls its long lines instead. A diff (.doc-diff) looks the same,
+   its lines drawn in .doc-diff-body, its header showing its counts. The code's frame height is a
+   size (--doc-code-height, sizes.css). */
+
+:is(.doc-code, .doc-diff) {
+  position: relative;
+  display: grid;
+  /* The arrow, the title (as wide as its text, cut first, when a range follows it), the range, the
+     room left (12px at least: the header's right edge), the toolbar. */
+  grid-template-columns: 28px minmax(0, max-content) auto minmax(12px, 1fr) auto;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  margin: var(--doc-block-gap) 0;
+  border-radius: 10px;
+  color: var(--doc-code-foreground);
+  background: var(--doc-code-background);
+  /* A line number's size, and the room around it (the editor's gutter reads the same ones). */
+  --doc-code-number-size: 12px;
+  --doc-code-number-inset: 6px;
+  --doc-code-number-gap: 12px;
+  /* A line's height, and the least a line takes (the editor's gutter and open code read it too). */
+  --doc-code-line-height: 20px;
+}
+/* Code blocks often come several together: a group gap apart, as disclosures (details.css). */
+:is(.doc-code, .doc-diff):has(+ :is(.doc-code, .doc-diff)) { margin-bottom: var(--doc-group-gap); }
+:is(.doc-code, .doc-diff) + :is(.doc-code, .doc-diff) { margin-top: var(--doc-group-gap); }
+
+/* The header: the arrow (Feishu's: no fill under the pointer, a short one while pressed), the
+   title, the toolbar. */
+.doc-code-fold {
+  grid-area: 1 / 1;
+  justify-self: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  color: var(--doc-code-chrome);
+  background: transparent;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity .2s ease;
+}
+.doc-code-fold svg { width: 12px; height: 12px; fill: currentColor; transition: transform .2s ease-out; }
+.doc-code-fold:active { background: var(--doc-code-pressed); }
+:is(.doc-code, .doc-diff):hover > .doc-code-fold,
+.doc-code-fold:focus-visible,
+.doc-code--folded > .doc-code-fold { opacity: 1; }
+.doc-code--folded > .doc-code-fold svg { transform: rotate(-90deg); }
+
+/* The title takes the header's room up to the toolbar (the place to click into it in the page editor),
+   or, beside a range, as much as its words: body text's size and line (a disclosure's title too,
+   details.css). */
+.doc-code-title {
+  grid-area: 1 / 2 / 2 / 5;
+  min-width: 0;
+  min-height: var(--doc-body-line-height);
+  padding: var(--doc-block-title-padding) 0;
+  overflow: hidden;
+  color: var(--doc-caption);
+  font-family: var(--doc-font);
+  font-size: var(--doc-body-font-size);
+  line-height: var(--doc-body-line-height);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+/* An empty title shows the kit's word for a code block, 代码块 or Code (words.js: the UI's language in
+   Gallery, the page's lang in a file of its own; tokens.css holds it). */
+.doc-code-title:empty::before { content: var(--doc-word-code-title); }
+.doc-code:has(> .doc-code-range) > .doc-code-title { grid-column-end: 3; }
+
+/* An excerpt's lines (data-line-start), beside its title: 第 120–139 行 (code.js, from its first
+   line's number and its count), after a dot, in its line numbers' color, never cut: the title's
+   size and line, one line of one size. */
+.doc-code-range {
+  grid-area: 1 / 3;
+  padding: var(--doc-block-title-padding) 0;
+  color: var(--doc-code-line-number);
+  font-family: var(--doc-font);
+  font-size: var(--doc-body-font-size);
+  line-height: var(--doc-body-line-height);
+  white-space: nowrap;
+}
+.doc-code-range::before { content: "·"; margin: 0 6px; }
+
+.doc-code-tools {
+  grid-area: 1 / 5;
+  display: flex;
+  padding: 0 6px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .2s ease;
+}
+:is(.doc-code, .doc-diff):hover > .doc-code-tools,
+.doc-code-tools:focus-within,
+.doc-code--folded > .doc-code-tools,
+.doc-diff > .doc-code-tools { opacity: 1; pointer-events: auto; }
+.doc-code-toolbar {
+  display: flex;
+  align-items: center;
+  padding: 2px;
+  border-radius: 6px;
+  background: var(--doc-surface);
+  box-shadow: var(--doc-code-toolbar-shadow);
+}
+.doc-code-language,
+.doc-diff-stats {
+  padding: 0 6px;
+  color: var(--doc-code-chrome);
+  font-family: var(--doc-font);
+  font-size: 12px;
+  line-height: 24px;
+  white-space: nowrap;
+}
+.doc-code-separator { width: 1px; height: 16px; margin: 0 4px; border-radius: 2px; background: var(--doc-code-separator); }
+:is(.doc-code-copy, .doc-code-wrap) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  color: var(--doc-code-chrome);
+  background: transparent;
+  cursor: pointer;
+  transition: background .1s ease-in-out;
+}
+:is(.doc-code-copy, .doc-code-wrap) svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
+:is(.doc-code-copy, .doc-code-wrap):hover { background: var(--doc-hover); }
+
+/* Folded, its language and copy show at the right all the time, alone, with no bar (Feishu's; its
+   language is not picked then). */
+.doc-code--folded .doc-code-toolbar { background: none; box-shadow: none; }
+.doc-code--folded :is(.doc-code-separator, .doc-code-wrap) { display: none; }
+
+/* The code: Notion's monospace at 85%, lines numbered in a gutter of their own. */
+.doc-code > pre,
+.doc-diff-body {
+  grid-area: 2 / 1 / 3 / -1;
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+  /* Its frame's height, set on the block, else 40 lines (with its padding): past it the code scrolls,
+     its padding below the last line kept as when it does not (the room to edit that line). */
+  max-height: var(--doc-code-height, calc(40 * var(--doc-code-line-height) + 20px));
+  margin: 0;
+  overflow: auto;
+  border: 0;
+  border-radius: 0 0 10px 10px;
+  color: inherit;
+  background: transparent;
+  font-family: var(--doc-code-font);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: var(--doc-code-line-height);
+  tab-size: 2;
+  scrollbar-color: var(--doc-code-scrollbar) transparent;
+  scrollbar-width: thin;
+}
+/* Its padding: a code block's, and a diff's (whose lines hold the right one, so that their fills reach its edge).
+   What scrolls into view in a frame that scrolls keeps that room clear of its edges (scroll-padding, as
+   a detail card's content: dialog.css): the caret on the last line takes the code to its very end, the
+   room under that line shown, where the browser stopped with the line against the frame's bottom edge
+   (4px more: the caret's box is a little short of its line). */
+.doc-code > pre { padding: 2px 22px 18px 6px; scroll-padding-block: 2px 22px; }
+.doc-diff-body { padding: 0 0 12px; scroll-padding-block: 0 16px; }
+.doc-code--folded > :is(pre, .doc-diff-body) { display: none; }
+/* Its code is in the block's font, not the browser's monospace for a code element. */
+:is(.doc-code > pre, .doc-diff-body) code { font: inherit; }
+
+.doc-code-lines { display: block; min-width: 100%; white-space: normal; }
+.doc-code-line { display: flex; min-height: var(--doc-code-line-height); }
+.doc-code-line[data-line-number]::before {
+  content: attr(data-line-number);
+  box-sizing: content-box;
+  flex-shrink: 0;
+  color: var(--doc-code-line-number);
+  font-size: var(--doc-code-number-size);
+  font-variant-numeric: tabular-nums;
+  user-select: none;
+}
+.doc-code-content { flex: 1; min-width: 0; padding-inline: 2px; white-space: pre-wrap; word-break: break-word; }
+.doc-code--nowrap .doc-code-lines { width: max-content; }
+.doc-code--nowrap .doc-code-content { white-space: pre; }
+
+/* Folding a line's structure (Feishu's): a code block's lines keep a column left of their numbers,
+   under the block's own fold arrow (their centers 14px from its edge, as the header's), for the
+   arrows of the lines that start one: rounded, faint (fainter than the block's own arrow), shown while
+   the pointer is over the block (a folded one always, turned); no fill under the pointer, a short
+   one while pressed. A folded line's structure is hidden and "…" follows it. */
+.doc-code > pre .doc-code-line { position: relative; padding-left: 16px; }
+/* Its numbers left-aligned on the line its title's text starts on (28px from its edge), as wide as
+   its last one (--doc-code-digits, code.js), 12px from the code; without numbers, the code there.
+   A diff's are right-aligned in 3 digits (below). */
+.doc-code > pre .doc-code-line[data-line-number]::before { min-width: calc(var(--doc-code-digits, 1) * 1ch); padding: 0 var(--doc-code-number-gap) 0 var(--doc-code-number-inset); text-align: left; }
+.doc-code[data-line-numbers="false"] > pre .doc-code-line { padding-left: 20px; }
+.doc-code-line-fold {
+  position: absolute;
+  left: 0;
+  top: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  color: var(--doc-code-line-fold);
+  background: transparent;
+  cursor: pointer;
+  visibility: hidden;
+}
+.doc-code-line-fold svg { width: 10px; height: 10px; fill: currentColor; transition: transform .2s ease-out; }
+.doc-code-line-fold:active { background: var(--doc-code-pressed); }
+.doc-code:hover .doc-code-line-fold,
+.doc-code-line-fold:focus-visible,
+.doc-code-line--folded > .doc-code-line-fold { visibility: visible; }
+.doc-code-line--folded > .doc-code-line-fold svg { transform: rotate(-90deg); }
+.doc-code-line--hidden { display: none; }
+.doc-code-line--folded > .doc-code-content { flex: 0 1 auto; }
+.doc-code-line-more {
+  flex: none;
+  width: 24px;
+  height: 16px;
+  margin: 2px 0 0 6px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2'%3E%3Ccircle cx='1' cy='1' r='1' fill='%238e8b86'/%3E%3Ccircle cx='6' cy='1' r='1' fill='%238e8b86'/%3E%3Ccircle cx='11' cy='1' r='1' fill='%238e8b86'/%3E%3C/svg%3E") center / 12px 2px no-repeat, var(--doc-code-fold-more);
+  cursor: pointer;
+}
+.doc-code-line-more:hover { background-color: var(--doc-code-fold-more-hover); }
+
+/* A diff: its counts always in its header, as plain text; copying under the pointer; its lines'
+   fills soft, a thin strip at their left. */
+.doc-diff .doc-code-toolbar { background: none; box-shadow: none; }
+.doc-diff .doc-code-separator { display: none; }
+.doc-diff .doc-code-copy { opacity: 0; transition: opacity .2s ease, background .1s ease-in-out; }
+.doc-diff:hover .doc-code-copy, .doc-diff .doc-code-copy:focus-visible { opacity: 1; }
+.doc-code-line.has-accent { border-left: 2px solid transparent; }
+.doc-code-line--added { background: var(--doc-diff-added-fill); }
+.doc-code-line--removed { background: var(--doc-diff-removed-fill); }
+.doc-code-line--added.has-accent { border-left-color: var(--doc-diff-added-strip); }
+.doc-code-line--removed.has-accent { border-left-color: var(--doc-diff-removed-strip); }
+.doc-code-line--added.has-colored-number::before, .doc-diff-added { color: var(--doc-diff-added); }
+.doc-code-line--removed.has-colored-number::before, .doc-diff-removed { color: var(--doc-diff-removed); }
+.doc-diff-body > .doc-code-lines { box-sizing: border-box; }
+.doc-diff-body .doc-code-line { box-sizing: border-box; padding-right: 22px; }
+.doc-diff-body .doc-code-line[data-line-number]::before { min-width: 3ch; padding: 0 12px 0 8px; text-align: right; }
+.doc-diff-stats { display: inline-flex; gap: 6px; font-variant-numeric: tabular-nums; }
+.doc-diff-stats[hidden] { display: none; }
+.doc-diff-stats[hidden] + .doc-code-separator { display: none; }
+
+/* A narrow screen (the kit's narrowest breakpoint): a code block shows its code whole, its lines
+   wrapped (a frame height of its own, a size, still holds: sizes.css), its title wraps rather than
+   being cut, and its toolbar lies over the header's right end when it shows (the pointer or the focus
+   in the block), taking no room from the title; a folded block's too. */
+@media (max-width: 420px) {
+  .doc-code > pre { max-height: var(--doc-code-height, none); }
+  .doc-code-title { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
+  .doc-code > .doc-code-tools { position: absolute; top: 4px; right: 0; }
+  .doc-code--folded:not(:hover) > .doc-code-tools:not(:focus-within) { opacity: 0; pointer-events: none; }
+}
+
+/* A code block's color (颜色 in the page editor's block menu, base.css's classes): its background, or
+   the color of the code the highlighter leaves plain. */
+.doc-code:is(.doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-highlight-yellow, .doc-highlight-green, .doc-highlight-blue, .doc-highlight-purple, .doc-highlight-pink, .doc-highlight-red) { --doc-code-background: var(--doc-fill); }
+.doc-code:is(.doc-text-gray, .doc-text-brown, .doc-text-orange, .doc-text-yellow, .doc-text-green, .doc-text-blue, .doc-text-purple, .doc-text-pink, .doc-text-red) { --doc-code-foreground: var(--doc-ink); }
+
+/* A highlight block (高亮块: Notion's callout, notion-lite's look): a group of blocks set apart,
+   10px round, 12px in, a light gray background by default (Notion's callout gray).
+   A color class on it (the editor's 颜色: base.css) gives it that background, or colors its text
+   and draws it with a thin border instead. An icon (.doc-icon: an emoji, an icon of a set, an
+   image, as the page's) may come first: it stands left of the blocks, 24px, on their first line,
+   the blocks 8px right of it. Its text reads as in any flow; it is for content the reading task
+   needs to stand out. The opening summary is one, first on the page: the same look, the same
+   blocks inside. */
+:is(.doc-summary, .doc-panel) {
+  position: relative;
+  margin-block: var(--doc-block-gap);
+  padding: 12px;
+  border: 1px solid transparent;
+  border-radius: 10px;
+}
+:where(.doc-summary, .doc-panel) { background: light-dark(#f1f1ef, #383836); }
+:is(.doc-summary, .doc-panel):is(.doc-text-gray, .doc-text-brown, .doc-text-orange, .doc-text-yellow, .doc-text-green, .doc-text-blue, .doc-text-purple, .doc-text-pink, .doc-text-red) { border-color: light-dark(rgb(42 28 0 / 9%), rgb(255 255 243 / 9%)); background: none; }
+
+/* Its icon, on the first line of its first block (a heading's own line height). */
+:is(.doc-summary, .doc-panel):has(> .doc-icon) { --doc-panel-line: var(--doc-body-line-height); padding-left: 44px; }
+:is(.doc-summary, .doc-panel):has(> .doc-icon + h2) { --doc-panel-line: var(--doc-h2-line-height); }
+:is(.doc-summary, .doc-panel):has(> .doc-icon + h3) { --doc-panel-line: var(--doc-h3-line-height); }
+:is(.doc-summary, .doc-panel):has(> .doc-icon + h4) { --doc-panel-line: var(--doc-h4-line-height); }
+/* Its icon alone (no block yet): a line high, so the icon stands inside it (its padding and border around the line). */
+:is(.doc-summary, .doc-panel):has(> .doc-icon:only-child) { min-height: calc(var(--doc-panel-line) + 26px); }
+:is(.doc-summary, .doc-panel) > .doc-icon {
+  position: absolute;
+  left: 12px;
+  top: calc(12px + (var(--doc-panel-line) - 24px) / 2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin: 0;
+  font-size: 21px;
+  line-height: 1;
+}
+:is(.doc-summary, .doc-panel) > .doc-icon > :is(img, svg) { width: 22px; height: 22px; }
+:is(.doc-summary, .doc-panel) > .doc-icon > img[alt=""] { width: 24px; height: 24px; border-radius: 3px; }
+:is(.doc-summary, .doc-panel) > .doc-icon[data-icon]:empty { width: 24px; height: 24px; }
+
+/* Its text keeps the flow's gaps (flow.css), and a text, code or formula block at its edges takes none (these rules
+   weigh as much as a component's own margin and stand before the components' files, which win): a
+   card, a table, a callout or a disclosure first or last in it keeps its own margins, a panel's
+   inside being the one place a component is spaced as it is among text. A column's, a disclosure's
+   and a detail card's edges take none whatever the block (flow.css). */
+:is(.doc-summary, .doc-panel) > :where(:first-child, .doc-icon + *) { margin-top: 0; }
+:is(.doc-summary, .doc-panel) > :where(:last-child) { margin-bottom: 0; }
+
+/* ---------- body text in flows ----------
+   A flow is the page itself, a Sheet panel, the content of a section, the opening
+   summary, a highlight panel, a disclosure, a dialog or a column, and of a plain <div> (no class) grouping
+   blocks inside any of them but the page and a panel. The text blocks of a flow (its own
+   paragraphs, headings, lists, quotes and rules) read the same wherever they sit, and the rules
+   stop at them: the inside of a card, table, callout or report widget keeps its own styles, so a
+   component looks the same in any flow too. The flows are the components' descriptions' (flow,
+   and the parts edited as flow: src/shared/components/): the one list of them is the selector
+   below, which every rule of the flow nests in (&), and a unit test holds it to the descriptions.
+   The rules have no weight (:where, and & has none of its own), so any component or report class
+   wins. */
+
+:where(.doc-page, .doc-section, .doc-summary, .doc-panel, .doc-details-content, .doc-dialog-content, [data-doc-sheet], .doc-column, :is(.doc-section, .doc-summary, .doc-panel, .doc-details-content, .doc-dialog-content, .doc-column) > div:not([class])) {
+  & > :where(p),
+  & > :where(ul, ol, blockquote) :where(p) {
+    margin: 0 0 var(--doc-paragraph-gap);
+  }
+
+  /* The four heading levels (in the flow, or held by one of its list items). */
+  & > :where(h1, h2, h3, h4),
+  & > :where(ul, ol) :where(li) > :where(h1, h2, h3, h4) {
+    color: var(--doc-text);
+    font-weight: 600;
+    letter-spacing: -.025em;
+  }
+  & > :where(h1),
+  & > :where(ul, ol) :where(li) > :where(h1) {
+    margin: 26px 0 10px;
+    font-size: var(--doc-h1-font-size);
+    line-height: var(--doc-h1-line-height);
+  }
+  & > :where(h2),
+  & > :where(ul, ol) :where(li) > :where(h2) {
+    margin: 22px 0 8px;
+    font-size: var(--doc-h2-font-size);
+    line-height: var(--doc-h2-line-height);
+  }
+  & > :where(h3),
+  & > :where(ul, ol) :where(li) > :where(h3) {
+    margin: 20px 0 8px;
+    font-size: var(--doc-h3-font-size);
+    line-height: var(--doc-h3-line-height);
+  }
+  & > :where(h4),
+  & > :where(ul, ol) :where(li) > :where(h4) {
+    margin: 16px 0 8px;
+    font-size: var(--doc-h4-font-size);
+    line-height: var(--doc-h4-line-height);
+  }
+  & > :where(ul, ol) {
+    margin: 10px 0 var(--doc-block-gap);
+    padding-inline-start: 1.625em;
+  }
+  /* One gap between any two items, as Notion's and Feishu's: between items of a level, from an item
+     to the first it holds, from the last it holds to the next item, and from a list to a list right
+     after it (two lists side by side read as one). */
+  & > :where(ul, ol) :where(li + li) { margin-top: var(--doc-list-gap); }
+  & > :where(ul, ol) :where(li > :is(ul, ol)) { margin: var(--doc-list-gap) 0 0; padding-inline-start: 1.5625em; }
+  /* The other blocks an item holds after its text (notion-lite's children of a list item: a paragraph,
+     a heading, an image, a code block…): under its text, at its left edge (the markers hang outside
+     the item), the list's one gap above each and none below; a component's own class keeps its look. */
+  & > :where(ul, ol) :where(li) > :where(p, h1, h2, h3, h4, div, figure, blockquote, details, table, pre, hr) { margin-top: var(--doc-list-gap); margin-bottom: 0; }
+  & > :where(ul, ol):where(:has(+ :is(ul, ol))) { margin-bottom: 0; }
+  & > :where(ul, ol) + :where(ul, ol) { margin-top: var(--doc-list-gap); }
+  /* The lists the kit draws the markers of (& in the rules inside): a list without a class of its own
+     straight in the flow, or straight in a flowchart's step (what a step holds after its title is its
+     content, a list there counted from the first depth again, as in a highlight block: flowchart.css),
+     and the lists their items hold, by depth; no depth goes on through a flowchart (an ol of its
+     class), whose steps' lists start again. */
+  & > :where(ul:not([class]), ol:not([class])), & :where(ol.doc-flow > li) > :where(ul:not([class]), ol:not([class])) {
+    &, & :where(li > :is(ul, ol)) { list-style: none; }
+    & :where(li) { position: relative; }
+    /* Lists (Feishu's): their markers the kit's, blue, left of the text: numbers 1., a., i. by depth,
+       each list from its start (or an item's value), right-aligned 6px from the text; bullets a dot, a
+       ring, a square by depth, 16px left of the text, on the middle of the first line. A list with a
+       class of its own keeps the browser's markers. */
+    & :where(li)::before {
+      position: absolute;
+      right: 100%;
+      color: var(--doc-list-marker);
+      font-variant-numeric: tabular-nums;
+      white-space: nowrap;
+      user-select: none;
+    }
+    :where(&:is(ol) > li, & li > ol:not(.doc-flow) > li)::before { margin-right: 4px; padding: 0 2px; border-radius: 2px; }
+    :where(&:is(ul) > li, & li > ul > li)::before {
+      content: "";
+      top: calc(.5lh - 2.75px);
+      width: 5.5px; /* Feishu's bullet glyphs (Arial 16px at 1.375): 5.4px */
+      height: 5.5px;
+      margin-right: 13.25px; /* its middle 16px left of the text */
+      border-radius: 50%;
+      background: currentColor;
+    }
+    :where(&:is(ol) > li)::before { content: counter(list-item) "."; }
+    :where(& > li > :is(ul, ol:not(.doc-flow)):is(ol) > li)::before { content: counter(list-item, lower-alpha) "."; }
+    :where(& > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)):is(ol) > li)::before { content: counter(list-item, lower-roman) "."; }
+    :where(& > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)):is(ol) > li)::before { content: counter(list-item) "."; }
+    :where(& > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)):is(ol) > li)::before { content: counter(list-item, lower-alpha) "."; }
+    :where(& > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)):is(ol) > li)::before { content: counter(list-item, lower-roman) "."; }
+    :where(& > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)):is(ol) > li)::before { content: counter(list-item) "."; }
+    :where(& > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)):is(ol) > li)::before { content: counter(list-item, lower-alpha) "."; }
+    :where(& > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)):is(ol) > li)::before { content: counter(list-item, lower-roman) "."; }
+    :where(& > li > :is(ul, ol:not(.doc-flow)):is(ul) > li)::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
+    :where(& > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)):is(ul) > li)::before { top: calc(.5lh - 2.5px); width: 5px; height: 5px; margin-right: 13.5px; border-radius: 1px; }
+    :where(& > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)):is(ul) > li)::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
+    :where(& > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)):is(ul) > li)::before { top: calc(.5lh - 2.5px); width: 5px; height: 5px; margin-right: 13.5px; border-radius: 1px; }
+    :where(& > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)):is(ul) > li)::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
+    :where(& > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)) > li > :is(ul, ol:not(.doc-flow)):is(ul) > li)::before { top: calc(.5lh - 2.5px); width: 5px; height: 5px; margin-right: 13.5px; border-radius: 1px; }
+    /* A numbered list giving an item a number of its own (<li value>): the browser's numbers, which count
+       on from it (the kit's do not), in the same blue. */
+    :where(&:is(ol):has(> li[value]), & li > ol:has(> li[value])) { list-style: decimal; }
+    :where(&:is(ol):has(> li[value]), & li > ol:has(> li[value])) > li::before { content: none; }
+    :where(&:is(ol):has(> li[value]), & li > ol:has(> li[value])) > li::marker { color: var(--doc-list-marker); }
+  }
+
+  & > :where(p, ul, ol, blockquote, h1, h2, h3, h4) :where(strong) { font-weight: 600; }
+
+  /* A quote and a divider (in the flow, or held by one of its list items: the same look, there the
+     list's one gap above it and none below, as any block an item holds, none at its sides). */
+  & > :where(blockquote) { margin: var(--doc-block-gap) 0; }
+  & > :where(blockquote),
+  & > :where(ul, ol) :where(li) > :where(blockquote) {
+    margin-inline: 0;
+    padding: 2px 0 2px 14px;
+    border-left: 3px solid var(--doc-border);
+    color: var(--doc-muted);
+  }
+
+  & > :where(blockquote) > :where(:last-child),
+  & > :where(ul, ol) :where(li) > :where(blockquote) > :where(:last-child) { margin-bottom: 0; }
+  & > :where(hr) { margin: var(--doc-component-gap) 0; }
+  & > :where(hr),
+  & > :where(ul, ol) :where(li) > :where(hr) { margin-inline: 0; border: 0; border-top: 1px solid var(--doc-border); }
+}
+
+/* The edges of a container of blocks: a column's, a disclosure's content's and a detail card's first
+   block takes no gap above it and its last none below, whatever the block (a highlight panel's are
+   its own: highlight.css, where a component keeps its margins). A Sheet panel's last block takes none
+   below it: a framed panel's room under its blocks is its padding alone (sheets.css), so a paragraph
+   typed into an empty tab leaves its bottom where the tab's placeholder had it. Its first keeps its
+   own under the tabs (notion-lite's heading in a tab keeps its top margin; a paragraph's falls into
+   the tabs' margin). */
+:is(.doc-column, .doc-details-content, .doc-dialog-content) > :first-child { margin-top: 0; }
+:is(.doc-column, .doc-details-content, .doc-dialog-content, [data-doc-sheet]) > :last-child { margin-bottom: 0; }
+/* A text block the reader left empty (a line of space, as in Notion) is one line high: a callout's
+   text and a disclosure's title too. */
+.doc-page :where(p, h1, h2, h3, h4, li, .doc-callout, .doc-details-summary-label):empty::after { content: "\200b"; }
+
+/* An item's color (颜色 in the page editor's block menu, notion-lite's: base.css's classes): a text
+   color is its marker's too, and the items it holds take both; a background lies behind it, its
+   marker and the items it holds, 2px past them as a paragraph's (base.css), its part left of the
+   item a second shadow as far out as the list's indent, so that nothing moves. */
+li:is(.doc-text-gray, .doc-text-brown, .doc-text-orange, .doc-text-yellow, .doc-text-green, .doc-text-blue, .doc-text-purple, .doc-text-pink, .doc-text-red) { --doc-list-marker: var(--doc-ink); }
+li:is(.doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-highlight-yellow, .doc-highlight-green, .doc-highlight-blue, .doc-highlight-purple, .doc-highlight-pink, .doc-highlight-red) { border-radius: 4px; box-shadow: 0 0 0 2px var(--doc-fill), -1.625em 0 0 2px var(--doc-fill); }
+
+/* Body text may stand straight in the page or a Sheet panel, before, between or instead of
+   sections (the flow rules above take its known text elements, never a component). The gap below
+   the header is the title's own (page.css), whatever comes first. */
+
+/* 小字: small text, a block of its own in any flow, as far from the block above as from the one below. */
+.doc-note {
+  margin: var(--doc-paragraph-gap) 0;
+  color: var(--doc-muted);
+  font-size: var(--doc-note-font-size);
+  line-height: var(--doc-note-line-height);
+}
+/* What follows a tab in it (span.doc-tab: the page editor's Tab) stands at the line's right end,
+   as a scope on the left and a unit on the right. */
+.doc-note:has(> .doc-tab) { display: flow-root; }
+.doc-note > .doc-tab { float: right; margin-inline-start: 16px; }
+
+/* 待办事项 (Notion's to-do): ul.doc-todo, a list whose items each have a box where a bullet would
+   be, 16px square with 2px corners, a 1.5px line in the text's color, its middle on the first
+   line's, its right edge 6px left of the text (as the numbers'). A checked item (li[data-checked])
+   has it filled blue with a white check (Notion's), and its own text struck through, the line half
+   the text's color, the text at 65%; the lists it holds keep their look. The list's spacing is any
+   list's (flow.css). The page editor checks an item with a click on its box (or Ctrl+Enter); a
+   report read elsewhere shows it as it is. */
+ul.doc-todo { list-style: none; }
+ul.doc-todo > li { position: relative; }
+ul.doc-todo > li::before {
+  content: "";
+  position: absolute;
+  right: 100%;
+  top: calc(.5lh - 8px);
+  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+  margin-right: 6px;
+  border: 1.5px solid currentColor;
+  border-radius: 2px;
+}
+ul.doc-todo > li[data-checked]::before {
+  border: 0;
+  background: #2783de url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' d='m3.25 8.4 3.2 3.2 6.3-7.2'/%3E%3C/svg%3E") center / 14px no-repeat;
+}
+ul.doc-todo > li[data-checked] {
+  color: color-mix(in srgb, currentColor 65%, transparent);
+  text-decoration: line-through color-mix(in srgb, currentColor 50%, transparent);
+}
+/* The lists a checked item holds: as they are (a decoration reaches every block inside its
+   element, but not an inline block). */
+ul.doc-todo > li[data-checked] > :is(ul, ol) { display: inline-block; width: 100%; vertical-align: top; color: var(--doc-text); }
+
+/* 流程图: ol.doc-flow, a list whose items are the steps of a process (the page editor's 步骤流程图).
+   Each step is a node, a container as a highlight block is, drawn as a card: 8px round with a
+   hairline border on the surface's white, its number (the list's own count, from its start; a number
+   of three digits a pill) in a 20px grey circle on the middle of its first line, or its icon there
+   instead (a lead div.doc-icon, as a highlight block's: an emoji, an icon of a set in its color, a
+   picture; 20px), and its blocks: its first a paragraph, its title, bold as the file writes it
+   (<p><strong>…</strong></p>: the kit puts no weight on the paragraph itself, so a title the reader
+   un-bolded reads as body text), the blocks after it its content, ordinary blocks at the body's weight
+   (a heading its own) under the title as a list item's (flow.css: the list's gap above each; a
+   component 8px, and nothing under the last, the card's padding the room there): a paragraph, a
+   heading, a quote, a picture, a code block, a list of any kind, its markers the kit's, counted from
+   the first depth again (flow.css), a flowchart (cards in a card). A step written the short way, its
+   own words before its blocks (<li>收集数据<p>…</p></li>, until the editor rewrites it as a node), is
+   drawn the same: its own words its title at the title's weight, its blocks its content.
+   The steps stand in rows (runtime/flowchart.js works them out and writes them into a stylesheet of
+   its own, keyed by the list's data-doc-flow-key): each row fills the flowchart's width, a step's
+   share of it its weight among the row's (--doc-flow-ratio), 28px between two steps of a row and
+   34px between two rows; without the kit's rules, one step a row (the column below), which is also
+   what a flowchart of one step a row is. Its layout has no print rule of its own: printed, the kit
+   works the rows out again at the paper's width (runtime/flowchart.js, as the browser lays the page
+   out for paper; the workbench's PDF lays the page out at the paper's width before it prints), so a
+   flowchart prints as a screen as wide as the paper shows it. On paper the kit keeps a flowchart
+   that fits on a page on one, so no arrow from a row's end stands at a page's foot pointing at
+   nothing or is cut by its edge; one taller than a page breaks between its rows where it stands, and
+   printed by the browser the kit leaves out the arrow such a break parts from the row it leads to.
+   An arrow, a 1.5px line and an open chevron in a neutral grey, leads from each step to the next: a
+   step's ::after, a fill clipped (or masked) to the arrow's outline, never text, so nothing selects or
+   edits it. Down the number's column from a step to the one under it (the default here), across on
+   the titles' line to the next step of its row, or, from a row's last step, turning: down half the
+   gap between the rows, across, and down into the next row's first step, its corners 6px round (the
+   runtime's rules choose; the outlines are custom properties of the arrow). A word too long for
+   its card breaks inside it (overflow-wrap), whatever the layout. A step's color (颜色, as a list
+   item takes it): a background fills its card; a text color its words (its content's too), its
+   number and its border. Its margins have no weight (:where), so a container's own trim wins (the
+   first and last block of a highlight panel, flow.css's columns and disclosures), as for every text
+   block.
+   The page editor reads the corners of a step's card, and of the whole flowchart (its cards'), to
+   wrap its selection and frame around them (--doc-box-radius, base.css). */
+
+/* The middle of a step's first line from its words' top: worked out on the step (its own line
+   height), its number, its icon and its arrow across placed by it. */
+@property --doc-flow-mid { syntax: "<length>"; inherits: true; initial-value: 13px; }
+
+:where(ol.doc-flow) { margin: var(--doc-block-gap) 0; }
+/* Selected whole in the page editor, its fill has its cards' corners. */
+ol.doc-flow {
+  --doc-box-radius: 8px;
+  --doc-box-reach: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 34px;
+  padding: 0;
+  list-style: none;
+}
+ol.doc-flow > li {
+  --doc-flow-mid: .5lh;
+  --doc-box-radius: 8px;
+  --doc-box-reach: 4px;
+  position: relative;
+  box-sizing: border-box;
+  min-width: 0;
+  margin: 0;
+  padding: 9px 13px 9px 41px;
+  border: 1px solid var(--doc-border);
+  border-radius: 8px;
+  background: var(--doc-surface);
+  box-shadow: none;
+  font-weight: 600; /* a step written the short way: its own words its title */
+  overflow-wrap: anywhere;
+  break-inside: avoid;
+}
+/* An empty step is a line high, as an empty item is (flow.css: its ::after is its arrow here), and so
+   is an empty title, its <strong> waiting for words (<p><strong></strong></p>: an empty paragraph is
+   a line high already, flow.css, but one holding an empty element would be none). */
+ol.doc-flow > li:empty { min-height: calc(1lh + 20px); }
+ol.doc-flow > li > p:has(> strong:only-child:empty)::after { content: "\200b"; }
+/* Its number: the ol's count (its start, an item's value), in a circle on the first line's middle, its
+   right edge 8px left of the words (a longer number a pill growing to the left). Its place and size
+   are its own wherever the flowchart stands (a list's markers, flow.css, never reach it). */
+ol.doc-flow > li::before {
+  content: counter(list-item);
+  position: absolute;
+  top: calc(9px + var(--doc-flow-mid) - 10px);
+  right: calc(100% - 33px);
+  left: auto;
+  box-sizing: border-box;
+  width: auto;
+  min-width: 20px;
+  height: 20px;
+  margin: 0;
+  padding: 0 3px;
+  border-radius: 10px;
+  background: var(--doc-flow-badge);
+  color: var(--doc-muted);
+  font-size: 12px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  line-height: 20px;
+  text-align: center;
+  user-select: none;
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+/* Taken off for a moment by the kit as items move, so the browser counts them again (runtime/flowchart.js). */
+ol.doc-flow[data-doc-flow-recount] > li::before { content: none; }
+/* Its icon, first in it (as a highlight block's), in its number's place: 20px on the first line's
+   middle, the number gone (an icon of the numbers, Tabler's, shows its own and is counted by
+   nothing). An emoji and a picture a little inside it, an icon of a set the whole of it. */
+ol.doc-flow > li:has(> .doc-icon)::before { content: none; }
+ol.doc-flow > li > .doc-icon {
+  position: absolute;
+  top: calc(9px + var(--doc-flow-mid) - 10px);
+  left: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  font-size: 16px;
+  line-height: 1;
+  user-select: none;
+}
+ol.doc-flow > li > .doc-icon > img { width: 18px; height: 18px; }
+ol.doc-flow > li > .doc-icon > svg,
+ol.doc-flow > li > .doc-icon > img[alt=""] { width: 20px; height: 20px; }
+ol.doc-flow > li > .doc-icon > img[alt=""] { border-radius: 3px; }
+ol.doc-flow > li > .doc-icon[data-icon]:empty { width: 20px; height: 20px; }
+/* The arrow to the next step: down from under this card to the one under it, the numbers' column, 4px
+   clear of each card (34px between them); its outline (a shaft 1.5px thick and an open chevron at
+   45°, its arms --doc-flow-arm long) is a polygon the ::after's fill is clipped to. Across and
+   turning: the kit's rules (runtime/flowchart.js), with the outlines below. */
+ol.doc-flow > li:has(~ li)::after {
+  /* The chevron's arms' length; the outlines of an arrow across (a polygon the box is clipped to: a
+     shaft 1.5px thick and an open chevron at 45°, its tip at the right) and of a turning one, which
+     the kit's rules give the arrows that go so (runtime/flowchart.js): down from the top right, a 6px
+     corner, across, a 6px corner, down to the tip at the bottom left, as two mask layers drawn in CSS
+     pixels (no viewBox: nothing in them scaled, so no piece lands a fraction of a pixel off another,
+     as pieces of fractional size did, their joints showing as breaks at the corners). The right one
+     is the box less its first 11px, its path held at its right edge (a nested svg at x 100%): the
+     line down, the corner and the whole line across, cut where the layer starts; the left one, 13px
+     wide, the line across from 1.5px past that cut, the corner, the line down a pixel into the
+     arrow's shaft and the arrow: every joint inside a stroke that covers it whole. */
+  --doc-flow-arm: 4px;
+  --doc-flow-right: polygon(0 calc(50% - .75px), calc(100% - 2.87px) calc(50% - .75px), calc(100% - 1.59px - var(--doc-flow-arm)) calc(50% - var(--doc-flow-arm) + .53px), calc(100% - .53px - var(--doc-flow-arm)) calc(50% - var(--doc-flow-arm) - .53px), 100% 50%, calc(100% - .53px - var(--doc-flow-arm)) calc(50% + var(--doc-flow-arm) + .53px), calc(100% - 1.59px - var(--doc-flow-arm)) calc(50% + var(--doc-flow-arm) - .53px), calc(100% - 2.87px) calc(50% + .75px), 0 calc(50% + .75px));
+  --doc-flow-turn:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Csvg x='100%25' overflow='visible'%3E%3Cpath d='M-5 0V7A6 6 0 0 1-11 13H-9999' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E%3C/svg%3E") right 0 top 0 / calc(100% - 11px) 26px no-repeat,
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='26'%3E%3Cpath d='M12.5 13H11A6 6 0 0 0 5 19V20' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M4.25 19V23.13L1.53 20.41L.47 21.47L5 26L9.53 21.47L8.47 20.41L5.75 23.13V19z'/%3E%3C/svg%3E") left 0 top 0 / 13px 26px no-repeat;
+  content: "";
+  position: absolute;
+  top: calc(100% + 5px);
+  left: 18px;
+  width: 10px;
+  height: 26px;
+  background: var(--doc-flow-line);
+  clip-path: polygon(calc(50% - .75px) 0, calc(50% - .75px) calc(100% - 2.87px), calc(50% - var(--doc-flow-arm) + .53px) calc(100% - 1.59px - var(--doc-flow-arm)), calc(50% - var(--doc-flow-arm) - .53px) calc(100% - .53px - var(--doc-flow-arm)), 50% 100%, calc(50% + var(--doc-flow-arm) + .53px) calc(100% - .53px - var(--doc-flow-arm)), calc(50% + var(--doc-flow-arm) - .53px) calc(100% - 1.59px - var(--doc-flow-arm)), calc(50% + .75px) calc(100% - 2.87px), calc(50% + .75px) 0);
+  pointer-events: none;
+  user-select: none;
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+/* A turning arrow as an outline the box is clipped to, as the arrows across and down are, where the
+   browser takes shape() (its corners arcs, its line across as long as the box): a mask image is
+   resampled where the box stands between pixels, its same ink spread over a row or two more, so the
+   turn read heavier than the arrow across beside it (the user, 2026-10-26: the same colour, measured,
+   only drawn softer). The line down from the top right (its centre 5px in), a 6px corner, the line
+   across 13px down, a 6px corner, the line down 5px in from the left and the arrow's chevron at the
+   bottom, 1.5px thick: the outer edge down and round, the inner edge back. The kit's rules give it to
+   the arrows that turn (runtime/flowchart.js), the mask above staying where shape() is not taken. */
+@supports (clip-path: shape(from 0 0, line to 1px 1px)) {
+  ol.doc-flow > li:has(~ li)::after {
+    --doc-flow-turn-mask: none;
+    --doc-flow-turn-shape: shape(from calc(100% - 4.25px) 0, line to calc(100% - 4.25px) 7px, arc to calc(100% - 11px) 13.75px of 6.75px cw, line to 11px 13.75px, arc to 5.75px 19px of 5.25px ccw, line to 5.75px calc(100% - 2.87px), line to calc(5px + var(--doc-flow-arm) - .53px) calc(100% - 1.59px - var(--doc-flow-arm)), line to calc(5px + var(--doc-flow-arm) + .53px) calc(100% - .53px - var(--doc-flow-arm)), line to 5px 100%, line to calc(5px - var(--doc-flow-arm) - .53px) calc(100% - .53px - var(--doc-flow-arm)), line to calc(5px - var(--doc-flow-arm) + .53px) calc(100% - 1.59px - var(--doc-flow-arm)), line to 4.25px calc(100% - 2.87px), line to 4.25px 19px, arc to 11px 12.25px of 6.75px cw, line to calc(100% - 11px) 12.25px, arc to calc(100% - 5.75px) 7px of 5.25px ccw, line to calc(100% - 5.75px) 0, close);
+  }
+}
+/* Its blocks: its title first (no gap above it, after its icon too: on the number's line), then its
+   content, at the body's weight (a heading its own, a title's <strong> bold: flow.css), spaced as a
+   list item's blocks are (flow.css); a component in it (a picture, a table, code, a callout, a
+   disclosure, a formula block, a flowchart) 8px under what comes before it and none below, whatever
+   its own margins, and its last block, whatever it is, none below it: the card's padding is the
+   room under its content, as a highlight panel's is. (Written the short way, its first block is its
+   content's, under its own words: the kit's rules give it the list's gap above it again.) */
+ol.doc-flow > li > :where(p, ul, ol, div, figure, blockquote, details, table, pre) { font-weight: 400; }
+ol.doc-flow > li > :where(:first-child, .doc-icon + *) { margin-top: 0; }
+ol.doc-flow > li > :is(div:not(.doc-icon), figure, details, table, pre, ol.doc-flow) { margin-top: 8px; margin-bottom: 0; }
+ol.doc-flow > li > :where(:last-child) { margin-bottom: 0; }
+
+/* A step's color (颜色 in the page editor's block menu, base.css's classes): a background fills its
+   card; a text color its words (its content's, a block's own color still its own), its number (a
+   tint of it behind) and its border (a lighter shade). */
+ol.doc-flow > li:is(.doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-highlight-yellow, .doc-highlight-green, .doc-highlight-blue, .doc-highlight-purple, .doc-highlight-pink, .doc-highlight-red) { background: var(--doc-fill); }
+ol.doc-flow > li:is(.doc-text-gray, .doc-text-brown, .doc-text-orange, .doc-text-yellow, .doc-text-green, .doc-text-blue, .doc-text-purple, .doc-text-pink, .doc-text-red) { border-color: color-mix(in srgb, var(--doc-ink) 35%, transparent); }
+ol.doc-flow > li:is(.doc-text-gray, .doc-text-brown, .doc-text-orange, .doc-text-yellow, .doc-text-green, .doc-text-blue, .doc-text-purple, .doc-text-pink, .doc-text-red)::before { background: color-mix(in srgb, var(--doc-ink) 14%, transparent); color: var(--doc-ink); }
+
+/* Sizes a card, table, code block or column may carry, as custom properties in its style attribute
+   (the reader sets them in the preview; an author may for a deliberate layout):
+     --doc-span          its width as a share of the width it stands in: the reading width, or
+                            its column's (.5 is half, 1 all of it; past 1 a table is that much
+                            wider and scrolls sideways in its wrapper); a picture's as a share of
+                            the reading width wherever it stands, at most the width it stands in
+                            (1: all of that), as notion-lite keeps a picture's own width in pixels:
+                            moved into a column it keeps its size, never wider than the column
+     --doc-chart-height  a chart card's plot height, in px
+     --doc-table-height  how tall a table's scroll area grows, in px (or none: all rows); unset,
+                            a long table of data at most 72vh or 720px, a short one or one mostly
+                            of words whole (table.css)
+     --doc-code-height   a code block's frame height, in px (on the pre or its code card):
+                            longer code scrolls inside it
+     --doc-column-ratio  a column's share of its row, less the gaps (columns.css)
+   Unset, the kit's defaults apply. A width is the block's own, never inherited by blocks inside it. */
+@property --doc-span { syntax: "*"; inherits: false; }
+@property --doc-column-ratio { syntax: "*"; inherits: false; }
+:where(.doc-figure, .doc-table-wrap, .doc-image, .doc-embed) {
+  /* Only valid while --doc-span is set, so var() fallbacks below give the defaults. */
+  --doc-span-width: calc(var(--doc-span) * 100%);
+}
+/* The reading width is the page's (100cqw: .doc-page is the one container of the kit, page.css). */
+:where(.doc-image) { --doc-span-width: min(100%, calc(var(--doc-span) * 100cqw)); }
+
+/* 分栏: blocks side by side (Feishu's columns). A .doc-columns holds 2 to 5 .doc-column, each
+   a flow of blocks like a section's. A column's width is its share of the row less the gaps
+   (--doc-column-ratio, the shares of a row adding up to 1); none written, the columns are
+   equal. Blocks in a column keep no outer margin at its top or bottom. On a narrow screen the
+   columns stack, each the row's width. */
+.doc-columns {
+  display: flex;
+  gap: var(--doc-column-gap);
+  margin-block: var(--doc-component-gap);
+}
+
+.doc-column {
+  flex: calc(100 * var(--doc-column-ratio, 1)) 1 0%;
+  min-width: 0;
+}
+
+@media (max-width: 640px) {
+  .doc-columns { flex-direction: column; }
+  .doc-column { flex: none; }
+}
+
+/* 卡片块: a card holding a figure (a chart, chart.css, or a drawing of the report's own), its title
+   and caption, framed once: a border, round corners and the surface, inset at its sides
+   (data-surface="bounded", which older files write, says the same). Its width and plot height are sizes (sizes.css); .doc-figure--compact centers it. A
+   picture block is no card (figure.doc-image, image.css): it has no frame. */
+
+.doc-figure {
+  width: var(--doc-span-width, auto);
+  min-width: 0;
+  max-width: 100%;
+  margin: var(--doc-component-gap) 0;
+  padding: 20px 24px 16px;
+  border: 1px solid var(--doc-border);
+  border-radius: 10px;
+  background: var(--doc-surface);
+}
+
+.doc-figure--compact {
+  width: var(--doc-span-width, min(100%, var(--doc-compact-figure-max-width)));
+  margin-inline: auto;
+}
+
+/* A card's title (its own heading, straight in it) takes the heading scale; the headings of a drawing
+   inside it are the drawing's. */
+.doc-figure > :where(h2, h3) { margin: 0; font-weight: 600; letter-spacing: -.025em; }
+
+.doc-figure > h2 {
+  font-size: var(--doc-h2-font-size);
+  line-height: var(--doc-h2-line-height);
+}
+
+.doc-figure > h3 {
+  font-size: var(--doc-card-title-font-size);
+  line-height: var(--doc-card-title-line-height);
+}
+
+/* A card's caption: the kit's p.doc-figure-caption, or a <figcaption> of the report's own figure,
+   which the intake makes a card as it stands (natural.mjs), read the same. */
+.doc-figure-caption,
+.doc-figure > :where(figcaption) {
+  margin: 5px 0 0;
+  color: var(--doc-muted);
+  font-size: var(--doc-small-font-size);
+  line-height: var(--doc-small-line-height);
+}
+
+/* The room between a card's header (its title, a caption under it) and what it holds: 12px below the
+   header's last line, whatever follows, a chart (whose own 12px it shares: the margins collapse, a
+   card's children standing in its block flow) or a drawing of the report's own with no margin of its
+   own, an inline <svg> too; a drawing's own larger margin stays its own. A caption right under the
+   title keeps its 5px (the title's 12px and its -7px collapse to 5px); nothing after the last child.
+   After the caption's rule, which weighs the same. */
+.doc-figure > :where(h2, h3, .doc-figure-caption, figcaption):not(:last-child) { margin-bottom: 12px; }
+.doc-figure > :where(h2, h3) + :where(.doc-figure-caption, figcaption) { margin-top: -7px; }
+
+@media (max-width: 760px) {
+  /* A card at the reading width. */
+  .doc-figure { width: auto; }
+}
+
+@media (max-width: 420px) {
+  .doc-figure { padding: 18px 16px 14px; }
+}
+
+/* The media blocks (图片 image.css, 文件 file.css, 网页书签 bookmark.css, 嵌入 embed.css): each a
+   figure with its content and a caption under it, which they share: the caption is 14px, gray, as
+   close to the block as Notion's (notion-lite's media.css: 6px above and below, 2px in from the left)
+   and shown only with text (an empty <figcaption> is always written), and a figure left empty (the
+   page editor's placeholder, kept in the file) is nothing to readers. An image's caption is centered
+   (image.css: Feishu's). A new media block is one more name in these lists. */
+:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed) > figcaption {
+  padding: 6px 0 6px 2px;
+  color: var(--doc-caption);
+  font-size: 14px;
+  line-height: 1.4;
+  overflow-wrap: break-word;
+}
+:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed) > figcaption:empty { display: none; }
+figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { display: none; }
+
+/* 图片 (Notion's image block): a picture of the report's folder and its caption under it.
+   Its width is the picture's own, at most the width it stands in, or --doc-span (sizes.css: a
+   share of the reading width, at most the width it stands in; the picture then fills it). Without a span it is at most 80% of the
+   window's height, its width following, so a tall picture (a scan, a phone's screenshot) shows
+   whole on a screen; a picture wider than tall reaches that only on a short window. Centered;
+   .doc-image--left and .doc-image--right put it at that side. The caption is as wide as the
+   picture (it takes no width of its own): 14px, gray, shown only with text (an empty <figcaption>
+   is always written). */
+:where(.doc-image) {
+  /* Only valid while --doc-span is set (--doc-span-width, sizes.css), so the fallbacks below give the picture's own width. */
+  --doc-image-fill: calc(var(--doc-span) * 0% + 100%);
+}
+
+.doc-image {
+  width: var(--doc-span-width, fit-content);
+  min-width: 0;
+  max-width: 100%;
+  margin: var(--doc-media-gap) auto;
+}
+.doc-image--left { margin-inline: 0 auto; }
+.doc-image--right { margin-inline: auto 0; }
+
+.doc-image > img {
+  display: block;
+  width: var(--doc-image-fill, auto);
+  max-width: 100%;
+  /* A picture the reader sized is as tall as its width makes it: with a span the fill is a
+     percentage, which against the figure's height (its content's) is no limit. */
+  max-height: var(--doc-image-fill, 80vh);
+  height: auto;
+  /* A width of the source's own on the picture (style="width: 300px") meets that height limit
+     without its shape changing: the picture is drawn whole inside the box, never stretched. */
+  object-fit: contain;
+  border-radius: 2px;
+}
+
+/* Centered under the picture (Feishu's), the rest of its caption the media blocks' (media.css). */
+.doc-image > figcaption {
+  contain: inline-size; /* as wide as the picture, never wider */
+  padding-inline: 2px;
+  text-align: center;
+}
+
+@media print {
+  .doc-image { break-inside: avoid; }
+}
+
+/* 文件 (Notion's file block): one file of the report's folder as a row the reader clicks to save
+   it: Notion's page-with-an-arrow icon, the file's name (cut with an ellipsis), its size in small
+   gray type and a download mark at the right end; the row lights up under the pointer. Its caption
+   under it as media.css has it. */
+/* Its name as far from the text around it as a line of text from the next (notion-lite's file row
+   is as tall as a line of text): the media gap less its row's own padding; its row 10px round as a
+   code block (--doc-box-radius: what the editor's selection wraps). */
+.doc-file {
+  --doc-box-radius: 10px;
+  --doc-box-reach: 4px; /* the editor's selection 4px past its row (notion-lite's): two files' fills never meet */
+  min-width: 0;
+  margin: calc(var(--doc-media-gap) - 4px) 0;
+}
+
+.doc-file-link {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 4px 2px 2px;
+  border-radius: 10px;
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 20ms ease-in;
+}
+.doc-file-link:hover { background: var(--doc-hover); }
+.doc-file-link:active { background: var(--doc-press); }
+.doc-file-link::before,
+.doc-file-link::after {
+  content: "";
+  flex-shrink: 0;
+  background: currentColor;
+  mask: var(--doc-file-icon) center / 20px no-repeat;
+}
+.doc-file-link::before { --doc-file-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.25%202.75h4.5l4.5%204.5v8.5a1.5%201.5%200%200%201-1.5%201.5h-7.5a1.5%201.5%200%200%201-1.5-1.5v-11.5a1.5%201.5%200%200%201%201.5-1.5z%22%2F%3E%3Cpath%20d%3D%22M10.75%202.75v3a1.5%201.5%200%200%200%201.5%201.5h3%22%2F%3E%3Cpath%20d%3D%22M10%2014v-4.75M7.9%2011.1%2010%209l2.1%202.1%22%2F%3E%3C%2Fsvg%3E"); width: 22px; height: 22px; }
+.doc-file-link::after { --doc-file-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227.25%22%2F%3E%3Cpath%20d%3D%22M10%206.5v6.25M7.4%2010.2%2010%2012.8l2.6-2.6%22%2F%3E%3C%2Fsvg%3E"); width: 24px; height: 24px; margin-inline-start: auto; background: var(--doc-caption); }
+.doc-file-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.doc-file-size {
+  flex-shrink: 0;
+  margin-inline-start: 2px;
+  color: var(--doc-caption);
+  font-size: 12px;
+  line-height: 16px;
+  white-space: nowrap;
+}
+
+/* A file's color (颜色 in the page editor's block menu, base.css's classes): its background (the figure's, the caption in it), round as its row; its text the text color. */
+.doc-file:is(.doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-highlight-yellow, .doc-highlight-green, .doc-highlight-blue, .doc-highlight-purple, .doc-highlight-pink, .doc-highlight-red) { border-radius: 10px; }
+
+@media print {
+  .doc-file-link::after { display: none; }
+}
+
+/* 网页书签 (Notion's bookmark block, its classic card): a web page as a card, 10px round with a thin
+   border, lighting up under the pointer. At the left its title (one line), description (two lines,
+   gray) and address with the page's icon; at the right its cover filling the card's height. Where
+   the card is narrower than about 360px the cover goes (it wraps above, with no height). Its
+   caption under it as media.css has it. */
+/* Set apart from the blocks around it as an image is; its card's corners what the editor's selection
+   wraps (--doc-box-radius). */
+.doc-bookmark {
+  --doc-box-radius: 10px;
+  min-width: 0;
+  margin: var(--doc-media-gap) 0;
+}
+
+.doc-bookmark-card {
+  display: flex;
+  flex-wrap: wrap-reverse;
+  align-items: stretch;
+  overflow: hidden;
+  border: 1px solid light-dark(rgb(28 19 1 / 11%), rgb(255 255 235 / 10%));
+  border-radius: 10px;
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 20ms ease-in;
+}
+.doc-bookmark-card:hover { background: var(--doc-hover); }
+.doc-bookmark-card:active { background: var(--doc-press); }
+
+.doc-bookmark-text {
+  display: block;
+  flex: 4 1 180px;
+  min-width: 0;
+  padding: 12px 14px 14px;
+  overflow: hidden;
+}
+.doc-bookmark-title {
+  display: block;
+  min-height: 24px;
+  margin-bottom: 2px;
+  overflow: hidden;
+  font-size: 14px;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.doc-bookmark-description {
+  display: block;
+  height: 32px;
+  overflow: hidden;
+  color: var(--doc-caption);
+  font-size: 12px;
+  line-height: 16px;
+}
+.doc-bookmark-url {
+  display: flex;
+  margin-top: 6px;
+}
+.doc-bookmark-icon {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  margin-inline-end: 6px;
+}
+.doc-bookmark-href {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.doc-bookmark-cover {
+  position: relative;
+  display: block;
+  flex: 1 1 180px;
+}
+.doc-bookmark-cover > img {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 2px;
+}
+
+/* A bookmark's color (颜色 in the page editor's block menu, base.css's classes): its background (the figure's, behind its card and the caption), round as its card; its text the text color. */
+.doc-bookmark:is(.doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-highlight-yellow, .doc-highlight-green, .doc-highlight-blue, .doc-highlight-purple, .doc-highlight-pink, .doc-highlight-red) { border-radius: 10px; }
+
+@media print {
+  .doc-bookmark-card { break-inside: avoid; }
+}
+
+/* 嵌入 (Notion's embed block): a web page, or an HTML or PDF file of the report's folder, in a frame
+   as wide as the text, --doc-embed-height tall (320px; a file's 500px, in a thin round border
+   as Notion's HTML file). Its caption under it as media.css has it. */
+/* Set apart from the blocks around it as an image is; its frame 6px round, which the editor's
+   selection wraps (--doc-box-radius). */
+.doc-embed {
+  --doc-box-radius: 6px;
+  width: var(--doc-span-width, auto); /* sizes.css */
+  min-width: 0;
+  margin: var(--doc-media-gap) auto;
+}
+
+.doc-embed > .doc-embed-frame {
+  display: block;
+  width: 100%;
+  height: var(--doc-embed-height, 320px);
+  border: 0;
+  border-radius: 6px;
+  background: var(--doc-surface);
+}
+.doc-embed--file > .doc-embed-frame {
+  height: var(--doc-embed-height, 500px);
+  border: 1px solid var(--doc-hairline);
+  border-radius: 6px;
+}
+
+@media print {
+  .doc-embed { break-inside: avoid; }
+}
+
+/* A chart host (charts.js): room before its type draws, the line a chart drawn from a table says when
+   it draws nothing, its svg, and the axis look a report's own chart takes by class (a group of class
+   "axis", as d3.axisBottom draws). */
+
+.doc-chart {
+  position: relative;
+  min-width: 0;
+  margin-top: 12px;
+}
+
+/* Room for a chart not drawn yet (nothing in its host but its data); drawn, it is as tall as what
+   its type drew (a card follows its chart's height, also one set shorter or scaled down in a narrow
+   card), an svg of it or the HTML of a part (its own buttons beside its svg). */
+.doc-chart:not(:has(> :not(script))) { min-height: 280px; }
+
+/* A chart drawn from a table with nothing to draw (charts/from-table.js): a muted line saying why,
+   in place of the plot. */
+.doc-chart-message {
+  padding: 28px 0;
+  color: var(--doc-muted);
+  font-size: var(--doc-small-font-size);
+  line-height: var(--doc-small-line-height);
+  text-align: center;
+}
+
+.doc-chart > svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  overflow: visible;
+}
+
+.doc-chart .axis text {
+  fill: var(--doc-muted);
+  font-family: var(--doc-font);
+  font-size: var(--doc-chart-axis-font-size);
+}
+.doc-chart .axis path,
+.doc-chart .axis line { stroke: var(--doc-border); }
+
+/* 详情卡片 (dialogs.js): a link that opens a detail card, and the card: a modal dialog whose content
+   region is a flow, the page's text at the page's width. */
+
+/* The link reads as a button in the text: a rounded fill around the words, which keep the text's
+   color, and a small open icon after them; its line breaks keep the fill on each piece. */
+.doc-dialog-trigger {
+  display: inline;
+  margin: 0 1px;
+  padding: 1px 5px 1px 6px;
+  border: 0;
+  border-radius: 6px;
+  color: inherit;
+  background: color-mix(in srgb, currentColor 8%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 9%, transparent);
+  font: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  text-align: inherit;
+  text-decoration: none;
+  vertical-align: baseline;
+  cursor: pointer;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+  transition: background-color 0.12s ease;
+}
+
+/* The icon never stands alone on a line, apart from the last word (agent-sim-2026-10-28: a link
+   ending at the line's end at 1024px put it on the next): an inline box, not an inline-block (a
+   line may break before one), holding a word joiner (U+2060, no break on either side of it), its
+   0.72em of room its padding, the icon a mask of that size at its right. */
+.doc-dialog-trigger::after {
+  content: "\2060";
+  display: inline;
+  margin-left: 0.3em;
+  padding-left: 0.72em;
+  background: currentColor;
+  opacity: 0.45;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 2.5h4v4M13.5 2.5 9 7M6.5 13.5h-4v-4M2.5 13.5 7 9'/%3E%3C/svg%3E") right center / 0.72em 0.72em no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 2.5h4v4M13.5 2.5 9 7M6.5 13.5h-4v-4M2.5 13.5 7 9'/%3E%3C/svg%3E") right center / 0.72em 0.72em no-repeat;
+}
+
+.doc-dialog-trigger:hover { background: color-mix(in srgb, currentColor 13%, transparent); }
+.doc-dialog-trigger:hover::after { opacity: 0.75; }
+
+.doc-dialog-trigger:focus-visible {
+  outline: 2px solid var(--doc-accent);
+  outline-offset: 1px;
+}
+
+/* The page under it keeps still (html.doc-dialog-open), its scrollbar's room kept where it had one
+   (.doc-dialog-gutter): nothing on it moves as a card opens or closes. */
+@media screen {
+  :root.doc-dialog-open { overflow: hidden; }
+  :root.doc-dialog-open.doc-dialog-gutter { scrollbar-gutter: stable; }
+}
+
+/* The reading column and 40px on each side of it, up to the page's sides (their edge while the page
+   is edited, dialog/): 100% is the window less a scrollbar's room kept, as it is for the page. Height
+   follows the content; long content stops at the viewport gutters and scrolls inside. A modal
+   dialog is fixed with inset 0, so `auto` would stretch it; `fit-content` matches the UA default. */
+.doc-dialog {
+  width: min(
+    calc(var(--doc-content-max-width) + (2 * var(--doc-dialog-side))),
+    calc(100% - (2 * var(--doc-dialog-edge)))
+  );
+  height: fit-content;
+  min-width: 0;
+  max-width: none;
+  min-height: 0;
+  max-height: calc(100dvh - (2 * var(--doc-dialog-block-gutter)));
+  margin: auto;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: 12px;
+  color: var(--doc-text);
+  background: var(--doc-surface);
+  box-shadow: 0 0 0 1px var(--doc-border), 0 6px 14px rgb(15 15 15 / 8%), 0 18px 48px rgb(15 15 15 / 18%);
+}
+
+/* It comes up from a little below, the backdrop fading in. */
+.doc-dialog[open] {
+  display: flex;
+  flex-direction: column;
+  animation: doc-dialog-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.doc-dialog::backdrop { background: rgb(15 15 15 / 36%); }
+.doc-dialog[open]::backdrop { animation: doc-dialog-fade 0.16s ease-out; }
+:root[data-doc-theme="dark"] .doc-dialog::backdrop { background: rgb(0 0 0 / 55%); }
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-doc-theme="light"]) .doc-dialog::backdrop { background: rgb(0 0 0 / 55%); }
+}
+
+@keyframes doc-dialog-in {
+  from { opacity: 0; transform: translateY(8px) scale(0.985); }
+}
+
+@keyframes doc-dialog-fade {
+  from { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .doc-dialog[open], .doc-dialog[open]::backdrop { animation: none; }
+}
+
+.doc-dialog-panel {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+/* Its text is the page's at any window: the reading column, and on a window narrower than the card
+   as far from the window's side as the page's text (--doc-dialog-inset: the page's gutter, less
+   what stands between the card and that side). Room for what it holds from the start (a card just
+   made holds a heading and an empty line), no more than the card may be high. What is scrolled into view keeps the content's padding
+   clear of the card's edges (scroll-padding, which the browser's caret following and
+   scrollIntoView both keep): the caret in the last block, or a block made at the end, takes the
+   content to its very end, the padding under it shown, where the browser stopped with that block
+   against the card's bottom edge. 8px more below than the padding: the caret's box is its glyphs',
+   a few pixels short of its line (the scroll stops at the end all the same). */
+.doc-dialog-content {
+  --doc-dialog-inset: max(
+    calc(var(--doc-page-gutter) - var(--doc-dialog-edge)),
+    calc((100% - var(--doc-content-max-width)) / 2)
+  );
+  min-width: 0;
+  min-height: min(160px, calc(100dvh - (2 * var(--doc-dialog-block-gutter))));
+  max-width: 100%;
+  flex: 1 1 auto;
+  padding: 32px var(--doc-dialog-inset) 40px;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scroll-padding-block: 32px 48px;
+}
+
+/* It takes the focus as it opens, to be scrolled by keys (dialogs.js); nothing to show for that. */
+.doc-dialog-content:focus { outline: 0; }
+
+/* A long card keeps its text's width: its scrollbar is of a known width and always has its room,
+   taken from the padding on its side, so the text is the same with it, without it and as a card
+   grows past the window's height. A touch screen's floats over the text and takes none. The page's
+   scrollbar color (base.css, inherited) is set back, or Chrome draws its own bar. */
+@media (hover: hover) and (pointer: fine) {
+  @supports selector(::-webkit-scrollbar) {
+    .doc-dialog-content {
+      padding-right: calc(var(--doc-dialog-inset) - var(--doc-dialog-scrollbar));
+      scrollbar-color: auto;
+      scrollbar-gutter: stable;
+    }
+    .doc-dialog-content::-webkit-scrollbar { width: var(--doc-dialog-scrollbar); background: transparent; }
+    .doc-dialog-content::-webkit-scrollbar-button { display: none; }
+    .doc-dialog-content::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: var(--doc-scrollbar-thumb) padding-box; }
+    .doc-dialog-content::-webkit-scrollbar-thumb:hover { background-color: var(--doc-scrollbar-thumb-active); }
+  }
+}
+
+@media print {
+  .doc-dialog, .doc-dialog[open] { display: none; }
+}
+
+@media (max-width: 640px) {
+  .doc-dialog-content { padding-block: 20px 28px; scroll-padding-block: 20px 36px; }
+}
+
+/* 图片放大 (runtime/zoom.js): a picture opened large over the page. Notion's viewer, as the page
+   editor's (editor/components/image/viewer.mjs): the page dimmed under a dark veil in either theme,
+   the picture in the middle at the size the runtime works out (fitted to the window, never past its
+   own), its caption under it in light gray, a close button at the top right drawn as the viewer's bar
+   is (a dark square, a white cross, a lighter fill under the pointer; no blue: its focus ring, once
+   Tab reaches it, is white). The page under it keeps still (html.doc-zoom-open), its scrollbar's room kept where it
+   had one (.doc-zoom-gutter). A picture that opens shows the zoom-in cursor
+   (html.doc-zoom-hover, set while the pointer is on one). It fades in, the picture growing a
+   little, not with reduced motion; it never prints. A picture that opens is a tab stop while the page
+   is read, its focus ring the kit's. */
+
+:root.doc-zoom-hover .doc-page img:hover { cursor: zoom-in; }
+
+/* A picture that opens, reached from the keyboard (the runtime's data-doc-zoom: a tab stop while the
+   page is read): the kit's focus ring, as a disclosure's summary has; none from the pointer. */
+.doc-page img[data-doc-zoom]:focus-visible { outline: 2px solid var(--doc-accent); outline-offset: 2px; }
+
+@media screen {
+  :root.doc-zoom-open { overflow: hidden; }
+  :root.doc-zoom-open.doc-zoom-gutter { scrollbar-gutter: stable; }
+}
+
+/* The whole window, the veil its own background (a click on it closes the viewer: a click on the
+   ::backdrop of a dialog as large as the window never comes). */
+.doc-zoom {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  max-width: none;
+  height: 100dvh;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  color: rgb(255 255 255 / 80%);
+  background: rgb(15 15 15 / 80%);
+  overscroll-behavior: contain;
+}
+.doc-zoom::backdrop { background: transparent; }
+.doc-zoom:focus { outline: none; } /* it takes the focus as it opens: no ring around the window */
+
+.doc-zoom[open] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  animation: doc-zoom-fade 0.15s ease-out;
+}
+
+.doc-zoom-picture {
+  display: block;
+  max-width: none;
+  flex: none;
+  object-fit: contain;
+  border-radius: 2px;
+  user-select: none;
+  animation: doc-zoom-grow 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+/* The caption's words as the page shows them (its marks, formulas, links), on one line or a few. */
+.doc-zoom-caption {
+  max-width: min(var(--doc-content-max-width), calc(100vw - 32px));
+  flex: none;
+  font: var(--doc-note-font-size) / var(--doc-note-line-height) var(--doc-font);
+  text-align: center;
+  overflow-wrap: break-word;
+}
+.doc-zoom-caption a { color: inherit; text-decoration: underline; }
+
+.doc-zoom-close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  color: #fff;
+  background: rgb(0 0 0 / 62%);
+  font-size: 0;
+  cursor: pointer;
+  transition: background-color 20ms ease-in;
+}
+.doc-zoom-close::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: currentColor;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m11 11 10 10M21 11 11 21'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m11 11 10 10M21 11 11 21'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
+}
+.doc-zoom-close:hover { background: rgb(40 40 40 / 80%); }
+.doc-zoom-close:focus { outline: none; }
+.doc-zoom-close:focus-visible { outline: 2px solid rgb(255 255 255 / 80%); outline-offset: 2px; }
+
+@keyframes doc-zoom-fade {
+  from { opacity: 0; }
+}
+
+@keyframes doc-zoom-grow {
+  from { transform: scale(0.96); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .doc-zoom[open], .doc-zoom-picture { animation: none; }
+}
+
+@media print {
+  .doc-zoom { display: none !important; }
+}
+
+/* 表格 (tables.js): the frame (.doc-table-wrap) and the scrollbars the kit draws over it, the
+   table, its sort controls, a sticky first column, and the scope line above it. Its width and
+   scroll height are sizes (sizes.css). A table is lines on the page (Notion's and Feishu's): the
+   frame's rounded line around it and one line between every two rows and every two columns, all
+   one color (--doc-hairline); no fills of its own. A header cell (th) looks as any other: its
+   gray and its bold are looks it was given (the page editor's 标题行 and 标题列 give them), it only
+   sticks. The frame and the table are one: the table fills the frame to its edge, the frame's
+   line drawn over it. The line is drawn once wherever it lies: in dark it is a light veil over what
+   is under it (tokens.css), so that it shows on a gray header cell and beside a gray highlight
+   block as on the page, and a line drawn over another would be lighter there. In a block with a
+   fill of its own (a highlight block, one of the palette's colors) the frame is opaque, the line as
+   it lies on the palette's gray (--doc-table-frame-filled): beside the body rows the veil over
+   the table's fill (the page's) would be the gray of the block around it. */
+
+.doc-table-wrap {
+  --doc-table-frame: var(--doc-hairline);
+  position: relative;
+  align-self: start;
+  /* A share over 1 keeps the wrapper at the reading width; the table is that much wider and
+     scrolls inside it (tables.js). */
+  width: var(--doc-span-width, fit-content);
+  max-width: 100%;
+  max-height: var(--doc-table-height, min(72vh, 720px));
+  margin-block: var(--doc-component-gap);
+  overflow: auto;
+  /* Its line: an outline on its inner edge, painted over the table, where the last cells draw none of
+     their own (below; once the kit runs, its layer draws it instead, over cells that stick too:
+     .doc-scrollbars-frame); its rounded corners clip the table. */
+  outline: 1px solid var(--doc-table-frame);
+  outline-offset: -1px;
+  border-radius: var(--doc-table-radius);
+  background: var(--doc-table-fill);
+  /* Sideways it never bounces past its ends (a touchpad's, which pulled the table off the frame's
+     edge) nor hands the scroll on (to the browser's back and forward). Down, only a frame that
+     scrolls down (below) is held so, the wheel past its ends handed on to the page by the kit
+     (tables/scrollbars.js): any other hands it to the page as the browser does. */
+  overscroll-behavior-inline: none;
+  isolation: isolate;
+  /* No scrollbar of the system's takes room from the columns: the kit draws its own over the frame. */
+  scrollbar-width: none;
+}
+.doc-table-wrap::-webkit-scrollbar { display: none; } /* WebKit without scrollbar-width */
+/* A short table, or one mostly of words (data-doc-whole, tables/whole.js), is shown whole: its
+   frame as tall as its rows, read with the page. A long table of data keeps the kit's height above,
+   its rows scrolling under the header row that stays; a height written on the frame
+   (--doc-table-height, the reader's) holds either way. */
+.doc-table-wrap[data-doc-whole] { max-height: var(--doc-table-height, none); }
+.doc-table-wrap:has(> .doc-scrollbars[data-y]) { overscroll-behavior-block: none; }
+
+/* The frame's scrollbars (tables.js): a layer stuck at the frame's top-left that takes no room,
+   with a rail along the right edge and one along the bottom for each axis that overflows
+   (data-y, data-x), each thumb 3px in from the frame's edge. tables.js sets each rail's place
+   (the part of the edge that scrolls: below the header, between the rounded corners) and its
+   track, thumb size and thumb offset (--doc-scrollbar-*). They show while the pointer is
+   over the frame or it scrolls. */
+.doc-scrollbars {
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: 6;
+  width: 0;
+  height: 0;
+}
+.doc-scrollbar {
+  position: absolute;
+  display: none;
+  opacity: 0;
+  transition: opacity 160ms ease;
+}
+.doc-scrollbars[data-y] > .doc-scrollbar--y,
+.doc-scrollbars[data-x] > .doc-scrollbar--x { display: block; }
+.doc-table-wrap:hover > .doc-scrollbars > .doc-scrollbar,
+.doc-scrollbars[data-active] > .doc-scrollbar,
+.doc-scrollbar[data-drag] { opacity: 1; }
+.doc-scrollbar--y { width: 12px; height: var(--doc-scrollbar-track); }
+.doc-scrollbar--x { width: var(--doc-scrollbar-track); height: 12px; }
+.doc-scrollbar-thumb {
+  position: absolute;
+  border-radius: 999px;
+  background: var(--doc-scrollbar-thumb);
+  transition: background-color 120ms ease;
+}
+.doc-scrollbar--y > .doc-scrollbar-thumb {
+  top: 0;
+  right: 3px; /* clear of the edge, where the page editor's handles of the frame's edges are */
+  width: 6px;
+  height: var(--doc-scrollbar-thumb-size);
+  transform: translateY(var(--doc-scrollbar-thumb-at));
+}
+.doc-scrollbar--x > .doc-scrollbar-thumb {
+  bottom: 3px;
+  left: 0;
+  width: var(--doc-scrollbar-thumb-size);
+  height: 6px;
+  transform: translateX(var(--doc-scrollbar-thumb-at));
+}
+.doc-scrollbar:is(:hover, [data-drag]) > .doc-scrollbar-thumb { background: var(--doc-scrollbar-thumb-active); }
+/* The frame's line above everything in the frame (a header row or column that sticks over the
+   outline too): as big as the frame (tables.js), on the layer stuck at its top-left. */
+.doc-scrollbars-frame {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  border: 1px solid var(--doc-table-frame);
+  border-radius: var(--doc-table-radius);
+  pointer-events: none;
+}
+/* Where the layer draws the frame's line, the frame's outline (before the kit runs, and on paper,
+   where the layer is hidden) is not drawn under it. */
+.doc-table-wrap:has(> .doc-scrollbars) { outline-color: transparent; }
+/* In a block with a fill of its own (a highlight block, its gray its own unless it is given a text
+   color; any block of the palette's background colors) the frame's line is opaque (above). */
+:is(:is(.doc-summary, .doc-panel):not(.doc-text-gray, .doc-text-brown, .doc-text-orange, .doc-text-yellow, .doc-text-green, .doc-text-blue, .doc-text-purple, .doc-text-pink, .doc-text-red), .doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-highlight-yellow, .doc-highlight-green, .doc-highlight-blue, .doc-highlight-purple, .doc-highlight-pink, .doc-highlight-red) .doc-table-wrap { --doc-table-frame: var(--doc-table-frame-filled); }
+/* A frame that scrolls sideways and is not at its end fades out at its right edge (data-more,
+   tables.js): the columns go on past it, which its rails, shown only under the pointer, do not say.
+   Drawn over the cells by the frame's line layer, taking no room. */
+.doc-scrollbars-frame::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 28px;
+  border-radius: 0 calc(var(--doc-table-radius) - 1px) calc(var(--doc-table-radius) - 1px) 0;
+  background: linear-gradient(to right, transparent, var(--doc-table-fill));
+  opacity: 0;
+  transition: opacity 160ms ease;
+}
+.doc-scrollbars[data-more] > .doc-scrollbars-frame::after { opacity: 1; }
+
+/* Each cell draws its own lines, on its right and at its bottom (separate borders: a cell that sticks
+   while the frame scrolls takes its lines along, a merged cell has them where it ends); in a frame
+   the frame's line is the last ones (below). A table outside a frame draws its top and left edges
+   itself. */
+.doc-table {
+  width: auto;
+  max-width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  background: var(--doc-table-fill);
+  font-size: var(--doc-table-font-size);
+  font-weight: 400;
+  line-height: var(--doc-table-line-height);
+}
+
+:not(.doc-table-wrap) > .doc-table { border-top: 1px solid var(--doc-hairline); border-left: 1px solid var(--doc-hairline); }
+/* Keys moving into a frame that scrolls: the accent's line in place of its own. */
+.doc-table-wrap:focus-visible { outline: 2px solid var(--doc-accent); outline-offset: -2px; }
+
+.doc-table th,
+.doc-table td {
+  padding: 10px 9px; /* Notion's 9px at the sides */
+  border: 0 solid var(--doc-hairline);
+  border-right-width: 1px;
+  border-bottom-width: 1px;
+  font-weight: 400; /* a th's too: its bold is a look (.doc-bold) */
+  overflow-wrap: anywhere;
+  text-align: left;
+  vertical-align: top;
+  white-space: normal;
+  word-break: break-word;
+}
+/* A cell left empty is one line high, as a text block left empty is (flow.css): a row of empty cells
+   is as tall as a row of words from the first paint on, not flat until the page editor makes the
+   cells editable (an empty editable cell is a line high). */
+.doc-table :is(td, th):empty::after { content: "\200b"; }
+
+/* In a frame the last column's lines and the last row's are the frame's line, which lies over them:
+   theirs are not drawn (the row's last cell, at the frame's right edge, unless a cell of the last
+   column above reaches down past its row: such a table keeps them; the footer's last row, or the
+   body's). Where a cell spans rows only the table's slots say which cells lie on those edges (one
+   spanning down to the last row lies on the bottom one; below one spanning in the last column a row
+   ends inside): the kit marks them (data-doc-edge, tables/edges.js). */
+.doc-table-wrap > .doc-table:not(:has(> * > tr > :last-child[rowspan]:not([rowspan="1"]))) > * > tr > :last-child,
+.doc-table-wrap > .doc-table > * > tr > [data-doc-edge~="right"] { border-right-color: transparent; }
+.doc-table-wrap > .doc-table > tfoot > tr:last-child > *,
+.doc-table-wrap > .doc-table:not(:has(> tfoot)) > tbody:last-of-type > tr:last-child > *,
+.doc-table-wrap > .doc-table:not(:has(> :is(tbody, tfoot))) > thead > tr:last-child > *,
+.doc-table-wrap > .doc-table > * > tr > [data-doc-edge~="bottom"] { border-bottom-color: transparent; }
+
+/* A list in a cell (the page editor's 单元格里的列表): the browser's markers, its items close
+   together, nothing above or below it at the cell's edges. */
+.doc-table :is(td, th) > :is(ul, ol) { margin: 2px 0; padding-inline-start: 1.4em; }
+.doc-table :is(td, th) > ul { list-style: disc; }
+.doc-table :is(td, th) > ol { list-style: decimal; }
+.doc-table :is(td, th) > :is(ul, ol):first-child { margin-top: 0; }
+.doc-table :is(td, th) > :is(ul, ol):last-child { margin-bottom: 0; }
+.doc-table :is(td, th) > :is(ul, ol) > li + li { margin-top: 2px; }
+
+.doc-table--auto { table-layout: fixed; max-width: none; }
+.doc-table [data-column-kind="compact"] { white-space: nowrap; word-break: normal; }
+.doc-table [data-column-kind="narrative"] { overflow-wrap: break-word; word-break: normal; }
+.doc-table [data-column-kind="token-heavy"],
+.doc-table [data-column-wrap] { white-space: normal; overflow-wrap: anywhere; word-break: normal; }
+.doc-table [data-column-kind] code { white-space: inherit; }
+/* Words kept whole (keep-all: a line breaks at a space or a punctuation mark, never between the
+   characters of a Chinese word): a header's (标准差, 区间, a unit in brackets: （%）) and a short
+   field's that wraps (卷数 beside columns of prose: 六十卷、 / 目录一卷; tables/layout.js), where its
+   column holds its longest word (data-column-wrap="words"); a narrower one breaks between characters
+   as Chinese text does, never before a closing mark. A header the kit marks nothing on (it fits, or
+   the browser lays the table out) keeps them whole too. */
+.doc-table th:not([data-column-wrap]),
+.doc-table [data-column-wrap="words"] { word-break: keep-all; }
+/* Inline code in a cell breaks only after a slash or at a space (a path at its folders, never at a
+   hyphen or inside a word): its runs (tables/cells.js, as the page renders; not while the page
+   editor edits the cell) each kept on one line, a break allowed between them. A column the kit sizes
+   is at least as wide as its code's longest run, up to 320px of it (tables/layout.js), and a table
+   the browser lays out (merged cells) makes room for it itself; a number range held on one line
+   (.doc-range, runtime/spacing.js) alike. Only a run or a range wider than its column (past 320px,
+   half a narrow screen, or in a column the reader sized: data-run-wrap, layout.js) breaks where the
+   column ends (a range at its dash): code first between its names, at the <wbr> cells.js puts after
+   a dot, before underscores and where a lowercase letter meets a capital (window.|__demo,
+   request|Animation|Frame), anywhere only in a name wider than the column. */
+.doc-table code { overflow-wrap: break-word; word-break: normal; }
+.doc-code-run { white-space: nowrap; }
+.doc-code-run wbr { display: none; } /* Chrome breaks at a <wbr> even in nowrap */
+.doc-table [data-run-wrap] .doc-code-run { white-space: normal; overflow-wrap: anywhere; }
+.doc-table [data-run-wrap] .doc-code-run wbr { display: inline; }
+.doc-table [data-run-wrap] .doc-range { white-space: normal; }
+
+/* The header row stays at the top of a frame that scrolls down, the first column (a sticky first
+   column, .doc-table--sticky-first, or a header column: each body row's first cell a th
+   scope="row") at its left when it scrolls sideways, the cell where they meet at both: over the cells
+   beneath them, so filled (a cell's own fill, always opaque, or the table's when it has none), their
+   lines their own. The first column's fill is the kit's to decide, so it is the one declaration here
+   that wins over a style attribute (!important: nothing else beats one): a source style that makes
+   a cell see-through (a translucent or transparent background) would show the cells passing
+   beneath it. */
+.doc-table > thead th {
+  position: sticky;
+  top: 0;
+  z-index: 4;
+  background: var(--doc-fill, var(--doc-table-fill));
+}
+.doc-table--sticky-first :is(th, td):first-child,
+.doc-table > tbody > tr > th[scope="row"]:first-child {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  background: var(--doc-fill, var(--doc-table-fill)) !important;
+}
+.doc-table--sticky-first th:first-child { z-index: 5; }
+.doc-table:has(> tbody > tr > th[scope="row"]:first-child) > thead > tr > th:first-child {
+  left: 0;
+  z-index: 5;
+}
+
+.doc-table .number { text-align: center; font-variant-numeric: tabular-nums; }
+
+/* A cell's look (the page editor's table tools write these classes on its td or th): a text color
+   (base.css), a fill over the whole cell (base.css's: a cell is square, and one that sticks wears it too, above), bold words (the words
+   typed in it later too), and an alignment over the kit's own (a numeric column's centre), a vertical one (the kit's: top). A header
+   row's and column's look is these: .doc-highlight-gray and .doc-bold. */
+.doc-table :is(td, th).doc-bold { font-weight: 600; }
+.doc-table :is(td, th).doc-align-left { text-align: left; }
+.doc-table :is(td, th).doc-align-center { text-align: center; }
+.doc-table :is(td, th).doc-align-right { text-align: right; }
+.doc-table :is(td, th).doc-valign-top { vertical-align: top; }
+.doc-table :is(td, th).doc-valign-middle { vertical-align: middle; }
+.doc-table :is(td, th).doc-valign-bottom { vertical-align: bottom; }
+
+/* A sortable header's control (sort.js): a small button after the header's words, holding no text
+   and taking no room (width 0), so a header is as wide with it as without it and its words stay its
+   own. Its arrow hangs in the cell's right padding (3px off the words, then its 6px drawn, of the 9px): a small triangle with
+   round corners (the disclosure's arrow's shape), pointing down, or up for an ascending sort
+   (data-doc-sort-arrow="asc", sort.js). It shows while the pointer is over the header, light gray, darker
+   under the pointer and on the column the rows are sorted by. Only a press on it, a little around
+   the arrow, sorts: not one on the header's words. */
+.doc-table-sort-button {
+  position: relative;
+  display: inline-block;
+  width: 0;
+  height: var(--doc-table-line-height);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  vertical-align: top;
+  background: transparent;
+  cursor: pointer;
+}
+/* Where a press takes: around the arrow, as tall as the line. */
+.doc-table-sort-button::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 13px;
+  height: 100%;
+  border-radius: 4px;
+}
+.doc-table-sort-button::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 3px;
+  width: 7px;
+  height: 7px;
+  background: var(--doc-table-sort-arrow);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.25h6L5 7.25z' fill='black' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
+  transform: translateY(-50%);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 100ms ease, background-color 100ms ease;
+}
+.doc-table-sort-button[data-doc-sort-arrow="asc"]::after { transform: translateY(-50%) rotate(180deg); }
+.doc-table-sort-button:focus-visible { outline: none; }
+.doc-table-sort-button:focus-visible::before { outline: 2px solid var(--doc-accent); }
+
+.doc-table th:hover > .doc-table-sort-button::after,
+.doc-table th:is([aria-sort="ascending"], [aria-sort="descending"]) > .doc-table-sort-button::after,
+.doc-table-sort-button:focus-visible::after { opacity: 1; }
+.doc-table th:is([aria-sort="ascending"], [aria-sort="descending"]) > .doc-table-sort-button::after,
+.doc-table-sort-button:hover::after { background: var(--doc-table-sort-arrow-active); }
+
+/* A table's scope line, as older files write it right above the frame (a new report writes small
+   text, p.doc-note, its unit after a span.doc-tab): read as small text, its words, code and
+   bold in one line. After a plain span (no class: <span>scope</span><span>unit</span>, or the unit
+   bold, <strong>unit</strong>) the last plain element stands at the line's right end, as small text's
+   tab does, and plain spans between keep 18px apart. */
+.doc-table-meta {
+  display: flow-root;
+  margin: 8px 0 12px;
+  color: var(--doc-muted);
+  font-size: var(--doc-note-font-size);
+  line-height: var(--doc-note-line-height);
+}
+
+.doc-table-meta > span:not([class]) + span:not([class]):not(:last-child) { margin-inline-start: 18px; }
+.doc-table-meta > span:not([class]) + :not([class]):last-child { float: right; margin-inline-start: 18px; white-space: nowrap; }
+.doc-table-meta + .doc-table-wrap { margin-top: 0; }
+
+@media (max-width: 760px) {
+  /* A table with a width of its own is at least as wide as the reading width. */
+  :where(.doc-table-wrap) { --doc-span-width: calc(max(var(--doc-span), 1) * 100%); }
+}
+
+/* On paper a table is whole: no scroll area, nothing clipped, no scrollbars or fading edge (a height
+   written on a frame shown whole too). */
+@media print {
+  .doc-table-wrap, .doc-table-wrap[data-doc-whole] { max-height: none; overflow: visible; }
+  .doc-scrollbars { display: none; }
+  .doc-table-wrap:has(> .doc-scrollbars) { outline-color: var(--doc-table-frame); }
+}
+
+@media (max-width: 640px) {
+  /* The unit on a line of its own under the scope; the words of the line stay one text. */
+  .doc-table-meta > span:not([class]) + :not([class]):last-child { display: block; float: none; margin: 4px 0 0; }
+}
+
+/* 提示块: inline text set apart on a fill, with a line at its left in that fill's deep shade. Its
+   color is the background it is given (颜色 in the page editor's block menu, base.css's classes:
+   --doc-fill and --doc-fill-deep), and with none the palette's blue (src/shared/colors.mjs),
+   the same as one given that blue. A text color colors its words only. Its corners are square;
+   the editor's selection lies 6px past it, round (--doc-box-reach: what it wraps, base.css). */
+
+.doc-callout {
+  --doc-box-reach: 6px;
+  margin-block: var(--doc-component-gap);
+  padding: 12px 14px;
+  border-left: 3px solid var(--doc-fill-deep, light-dark(#387dc9, #5e87c9));
+  background: var(--doc-fill, light-dark(#e5f2fc, #233850));
+  line-height: 1.6;
+}
+
+/* 折叠列表: a disclosure, its title row with an arrow, and its content region, a flow. It is drawn
+   as a code block is (code.css), one design for the two: a soft panel 10px round, a header of the
+   arrow (the code block's triangle, in a 28px column, always shown: it is what opens the block) and
+   the title (body text's size and line, --doc-block-title-padding above and below, as the code
+   block's), the content under the title's start. The room around the title's words is the title's own (notion-lite's toggle: the
+   padding on the text one edits, its button alone opening and closing it), so in the page editor a
+   press there is in the title, as a press beside a code block's title is in that one. */
+
+.doc-details {
+  min-width: 0;
+  max-width: 100%;
+  margin-block: var(--doc-paragraph-gap); /* as a paragraph's: a disclosure stands among text */
+  border: 0;
+  border-radius: 10px;
+  background: var(--doc-code-background);
+}
+/* Disclosures often come several together: a group gap apart, a group rather than loose panels. */
+.doc-details:has(+ .doc-details) { margin-bottom: var(--doc-group-gap); }
+.doc-details + .doc-details { margin-top: var(--doc-group-gap); }
+
+.doc-details > summary {
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr);
+  align-items: start;
+  margin: 0;
+  padding: 0;
+  border-radius: 10px;
+  cursor: pointer;
+  background: transparent;
+  font-size: var(--doc-body-font-size);
+  font-weight: 500;
+  line-height: var(--doc-body-line-height);
+  list-style: none;
+  text-align: left;
+}
+
+.doc-details > summary::-webkit-details-marker { display: none; }
+.doc-details-summary-label {
+  min-width: 0;
+  padding: var(--doc-block-title-padding) 16px var(--doc-block-title-padding) 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.doc-details-summary-label code {
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+/* The code block's fold arrow: a small filled triangle, pointing right while the block is closed,
+   in the middle of the title's first line (below the room above its words). */
+.doc-details > summary::before {
+  justify-self: center;
+  width: 12px;
+  height: 12px;
+  margin-top: calc(var(--doc-block-title-padding) + (var(--doc-body-line-height) - 12px) / 2);
+  content: "";
+  background: var(--doc-code-chrome);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.25 4.5h5.5L6 8z' fill='black' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
+  transform: rotate(-90deg);
+  transition: transform .2s ease-out;
+}
+
+.doc-details[open] > summary::before { transform: rotate(0); }
+/* Its color (颜色 in the page editor's block menu, notion-lite's toggle: base.css's classes): a
+   background in place of its own panel's, or the text of its title and its blocks (they take it as
+   theirs, a heading's own color aside). */
+.doc-details:is(.doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-highlight-yellow, .doc-highlight-green, .doc-highlight-blue, .doc-highlight-purple, .doc-highlight-pink, .doc-highlight-red) { background: var(--doc-fill); }
+.doc-details > summary:focus-visible { outline: 2px solid var(--doc-accent); outline-offset: 2px; }
+.doc-details-content {
+  min-width: 0;
+  max-width: 100%;
+  margin: 0;
+  padding: 2px 16px 14px 28px;
+}
+.doc-details-content > *,
+.doc-details-content .doc-table-wrap {
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* An instance of a component package stands apart from what is around it as a block set apart does,
+   whatever state it is in. One with no package here (src/shared/components/installed.mjs) shows what
+   it holds as it stands, the kit marking it (data-doc-fallback). Its component's styles are not
+   there, so this is all the look it has, and what reads by itself reads: a title, paragraphs, lists,
+   a table, what a script of data holds as the kit draws it (doc-component-data: a table, keys beside
+   their values, a list), what is wider than the page scrolling in it. In the preview a note above it
+   says why, to who writes the page (data-doc-dev: no export takes it, nor a presentation or paper). */
+
+[data-doc-component] {
+  margin: var(--doc-block-gap) 0;
+}
+[data-doc-fallback] {
+  overflow-x: auto;
+}
+[data-doc-fallback] :where(img, svg, video, iframe) {
+  max-width: 100%;
+}
+[data-doc-fallback] :where(img, video) {
+  height: auto;
+}
+[data-doc-fallback] :where(h1, h2, h3, h4) {
+  margin: 12px 0 6px;
+  color: var(--doc-text);
+  font-size: var(--doc-h4-font-size);
+  line-height: var(--doc-h4-line-height);
+  font-weight: 600;
+}
+[data-doc-fallback] :where(p, ul, ol, dl, table) {
+  margin: 0 0 8px;
+}
+[data-doc-fallback] :where(ul, ol) {
+  padding-inline-start: 1.625em;
+}
+[data-doc-fallback] :where(table) {
+  border-collapse: collapse;
+}
+[data-doc-fallback] :where(th, td) {
+  padding: 4px 8px;
+  border: 1px solid var(--doc-border);
+  text-align: start;
+}
+.doc-component-data :where(ul, dl, table) {
+  margin: 0;
+}
+.doc-component-data :where(dt, dd, td) {
+  overflow-wrap: break-word;
+}
+/* A head and a cell of a few words keep them on one line: what is wider than the page scrolls. */
+.doc-component-data :where(th, .doc-component-short) {
+  white-space: nowrap;
+}
+/* A value alone is itself, no item of a list; a list of values alone below the top a line of them. */
+ul.doc-component-one, .doc-component-data ul.doc-component-line {
+  padding: 0;
+  list-style: none;
+}
+.doc-component-data .doc-component-line > li {
+  display: inline;
+}
+.doc-component-data .doc-component-line > li + li::before {
+  content: " · ";
+  color: var(--doc-muted);
+}
+:where(dl.doc-component-data, .doc-component-data dl) {
+  display: grid;
+  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
+  gap: 4px 16px;
+}
+.doc-component-data dt {
+  color: var(--doc-muted);
+}
+.doc-component-data dd {
+  margin: 0;
+}
+.doc-component-data .doc-component-more {
+  color: var(--doc-muted);
+  font-size: var(--doc-small-font-size);
+}
+.doc-component-data dl > .doc-component-more, dl.doc-component-data > .doc-component-more {
+  grid-column: 1 / -1;
+}
+.doc-component-note {
+  margin-bottom: 6px;
+  color: var(--doc-muted);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+/* On paper what it holds is whole, as a table is (table.css). */
+@media print {
+  [data-doc-fallback] { overflow-x: visible; }
+  .doc-component-note { display: none; }
+}