@heycys/gallery 0.1.0 → 0.1.2

package/kit/report.css

@@ -6,7 +6,9 @@
    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. */
+   background. PingFang SC stands before it in --doc-font: where the system has PingFang SC (macOS,
+   iOS, a Windows it was installed on) the whole text is set in it and this alias is not reached.
+   Where Segoe UI is absent (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%; }
@@ -16,15 +18,19 @@
 
 :root {
   color-scheme: light dark;
-  --doc-bg: light-dark(#fcfcfc, #181818);
+  /* The page: #2d2d2d on white in light, #262626 where the platform is Apple's (below), its own pair in dark; the lines below are the text at a strength. */
+  --doc-bg: light-dark(#ffffff, #181818);
   --doc-surface: light-dark(#ffffff, #202020);
-  --doc-text: light-dark(#1d1d1f, #f3f3f3);
+  --doc-text: light-dark(#2d2d2d, #f3f3f3); /* the text: #2d2d2d, and #262626 on an Apple platform (the user's of 2026-11-08, below) */
   --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-border: light-dark(rgb(44 44 43 / 12%), rgb(243 243 243 / 13%));
+  --doc-grid: light-dark(rgb(44 44 43 / 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 */
+  /* List numbers and bullets: a blue of their own (the user's #2e7cd1 of 2026-11-07, a purer blue than the palette's
+     #387dc9 that links take; in dark the same hue at the dark palette's lightness, where the palette's #5e87c9 leans
+     gray), quieter than Feishu's, whose place and shapes they keep. */
+  --doc-list-marker: light-dark(#2e7cd1, #5492d4);
   --doc-success: var(--doc-series-3);
   --doc-warning: var(--doc-series-2);
   /* Cursor Canvas category red; the other Gallery series colors stay unchanged. */
@@ -37,13 +43,20 @@
   --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";
+  /* PingFang SC first (the user's feedback of 2026-11-06, notes/建议1.txt): where the system has it
+     (macOS, iOS) the whole text, Chinese, Latin and figures, is set in it, whatever the page's lang;
+     elsewhere the system's UI fonts as before: Apple's, then Segoe UI with its line on its glyphs on
+     Windows (Doc Segoe, above), then Microsoft YaHei for Chinese. */
+  --doc-font: "PingFang SC", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Doc Segoe", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", "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%));
+  /* Links in the text: the palette's blue (colors.mjs, .doc-text-blue: the format bar's 蓝色) in every block, with
+     no line but under the pointer, a thin one of the same blue there (the user's of 2026-11-07, Feishu's way). A link
+     shown with its icon and a page block (mention.css) keep Notion's look: the muted gray on a thin line of Notion's
+     gray always shown. */
+  --doc-link: light-dark(#387dc9, #5e87c9);
+  --doc-link-line: currentColor;
+  --doc-mention: var(--doc-muted);
+  --doc-mention-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);
@@ -52,12 +65,16 @@
   --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;
+  /* A detail card (dialog.css), a little smaller than the workbench's settings dialogs (写作偏好's
+     880 by 86% of the window, at most 900): its width, its height (80% of the window, at most 760px;
+     the window is the page's own, or in a workbench the workbench's, whose height the editor's
+     session gives as --doc-dialog-window-height: src/editor/page/session.mjs), the least room between
+     it and the window's sides, where a press closes it, the least room on each side of its text (the
+     reading column, centred where the card is wider), and its scrollbar's width. */
+  --doc-dialog-width: 760px;
+  --doc-dialog-height: min(calc(0.8 * var(--doc-dialog-window-height, 100dvh)), 760px);
+  --doc-dialog-margin: 24px;
+  --doc-dialog-pad: 48px;
   --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
@@ -118,8 +135,8 @@
   --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%));
+  --doc-scrollbar-thumb: light-dark(rgb(44 44 43 / 24%), rgb(243 243 243 / 26%));
+  --doc-scrollbar-thumb-active: light-dark(rgb(44 44 43 / 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. */
@@ -158,11 +175,87 @@
   --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);
+  /* Cards (docs/render.md, Design defaults, "Cards"): a custom page's ground and the board's frame around each card
+     (board.css), and the language Gallery's own blocks draw their faces in, which an Agent's block uses
+     too (references/pages-and-data.md). One accent, Gallery's own blue (the list markers'), used
+     sparingly: an icon's chip, a ring or bar toward a target, a day done; green and red only for a state
+     that is good or bad; everything else the text and its muted gray. Dark is its own pair of surfaces
+     (a ground, a card a step lighter with a faint top edge), never the light one inverted. */
+  --gallery-page-fill: light-dark(#f8f8f7, #181818);
+  --gallery-card-fill: light-dark(#ffffff, #212121);
+  --gallery-card-line: light-dark(rgb(28 25 20 / 9%), rgb(255 255 255 / 8%));
+  --gallery-card-radius: 14px;
+  --gallery-card-pad: 18px;
+  --gallery-card-shadow: 0 1px 2px light-dark(rgb(28 25 20 / 4.5%), rgb(0 0 0 / 24%)), 0 8px 20px -10px light-dark(rgb(28 25 20 / 10%), rgb(0 0 0 / 45%)), inset 0 1px 0 light-dark(rgb(255 255 255 / 0%), rgb(255 255 255 / 4.5%));
+  --gallery-accent: light-dark(#2e7cd1, #5c9ad9);
+  --gallery-accent-soft: light-dark(rgb(46 124 209 / 9%), rgb(92 154 217 / 15%));
+  --gallery-good: light-dark(#2b8a4e, #5dbb7c);
+  --gallery-good-soft: light-dark(rgb(43 138 78 / 10%), rgb(93 187 124 / 14%));
+  --gallery-bad: light-dark(#c8473d, #f07d72);
+  --gallery-bad-soft: light-dark(rgb(200 71 61 / 9%), rgb(240 125 114 / 14%));
+  --gallery-neutral-soft: light-dark(rgb(33 27 23 / 5.5%), rgb(255 255 255 / 7%));
+  /* What a ring, a bar or an empty day stands on: the track. */
+  --gallery-track: light-dark(rgb(33 27 23 / 7%), rgb(255 255 255 / 8%));
+  /* A card's head: its icon in a tinted rounded square (the chip), its title, a quiet meta text. */
+  --gallery-chip-size: 26px;
+  --gallery-chip-radius: 8px;
+  --gallery-chip-icon: 15px;
+  --gallery-title-size: 14px;
+  --gallery-title-line: 20px;
+  --gallery-meta-size: 12px;
+  /* The rows of a card's face stand this far apart. */
+  --gallery-face-gap: 10px;
+  /* A card's ink: the document's text in light; in dark a softer white than the document's #f3f3f3 (which
+     on a card's #212121 makes Chinese words look heavy and lit), a step brighter for its titles and big
+     numbers. The muted gray stays the document's. */
+  --gallery-text: light-dark(var(--doc-text), rgb(255 255 255 / 82%));
+  --gallery-text-strong: light-dark(var(--doc-text), rgb(255 255 255 / 90%));
+  /* A big number: its weight and tracking, figures of one width; its unit a smaller muted word after it,
+     this far from it (of the unit's own size), the same in every block. Two sizes: the hero, a card's one
+     main number (a countdown's days, a streak, a temperature, a heatmap's total), and the figure, a
+     number among others (the stats' cells, a ring's middle on a large ring). */
+  --gallery-numeral-weight: 600;
+  --gallery-numeral-tracking: -.025em;
+  --gallery-unit-size: .4em;
+  --gallery-unit-gap: .3em;
+  --gallery-hero-size: 40px;
+  --gallery-figure-size: 28px;
 }
 
 :root[data-doc-theme="light"] { color-scheme: light; }
 :root[data-doc-theme="dark"] { color-scheme: dark; }
 
+/* The document's look (字体与布局: its doc.json's look, which the render puts on <html> as
+   data-doc-font, data-doc-size, data-doc-spacing and data-doc-measure; src/shared/document-look.mjs),
+   written here by kit-build.mjs from the values above (src/render/look-css.mjs): a rule of those
+   attributes giving the tokens their values for the serif or the mixed font (--doc-font the serif,
+   --doc-sans-font what it was; --doc-heading-font the serif), a size, a spacing and a width, in pixels,
+   and --doc-space, the factor the gaps are taken at, for a margin a stylesheet writes
+   in pixels of its own (calc(26px * var(--doc-space, 1)): a heading's, the title's). With none of
+   them, as a document without a look is, nothing here applies. */
+:root[data-doc-font="serif"] { --doc-sans-font: "PingFang SC", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Doc Segoe", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", "Microsoft YaHei", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --doc-font: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Songti SC", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", SimSun, serif; }
+:root[data-doc-font="mixed"] { --doc-heading-font: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Songti SC", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", SimSun, serif; }
+:root[data-doc-size="small"] { --doc-body-font-size: 15px; --doc-body-line-height: 24px; --doc-small-font-size: 12px; --doc-small-line-height: 17px; --doc-note-font-size: 13px; --doc-note-line-height: 19px; --doc-title-font-size: 26px; --doc-title-line-height: 34px; --doc-h1-font-size: 24px; --doc-h1-line-height: 33px; --doc-h2-font-size: 21px; --doc-h2-line-height: 29px; --doc-h3-font-size: 19px; --doc-h3-line-height: 27px; --doc-h4-font-size: 15px; --doc-h4-line-height: 23px; --doc-card-title-font-size: 17px; --doc-card-title-line-height: 24px; --doc-table-font-size: 14px; --doc-table-line-height: 19px; }
+:root[data-doc-size="large"] { --doc-body-font-size: 18px; --doc-body-line-height: 29px; --doc-small-font-size: 15px; --doc-small-line-height: 21px; --doc-note-font-size: 16px; --doc-note-line-height: 23px; --doc-title-font-size: 32px; --doc-title-line-height: 41px; --doc-h1-font-size: 29px; --doc-h1-line-height: 40px; --doc-h2-font-size: 25px; --doc-h2-line-height: 35px; --doc-h3-font-size: 23px; --doc-h3-line-height: 32px; --doc-h4-font-size: 18px; --doc-h4-line-height: 27px; --doc-card-title-font-size: 20px; --doc-card-title-line-height: 28px; --doc-table-font-size: 17px; --doc-table-line-height: 23px; }
+:root[data-doc-spacing="compact"] { --doc-body-line-height: 24px; --doc-small-line-height: 17px; --doc-note-line-height: 19px; --doc-title-line-height: 34px; --doc-h1-line-height: 34px; --doc-h2-line-height: 29px; --doc-h3-line-height: 26px; --doc-h4-line-height: 22px; --doc-card-title-line-height: 24px; --doc-table-line-height: 19px; --doc-component-gap: 15px; --doc-block-gap: 12px; --doc-media-gap: 11px; --doc-paragraph-gap: 9px; --doc-group-gap: 6px; --doc-list-gap: 4px; --doc-space: 0.75; }
+:root[data-doc-spacing="loose"] { --doc-body-line-height: 28px; --doc-small-line-height: 19px; --doc-note-line-height: 21px; --doc-title-line-height: 38px; --doc-h1-line-height: 38px; --doc-h2-line-height: 33px; --doc-h3-line-height: 30px; --doc-h4-line-height: 26px; --doc-card-title-line-height: 26px; --doc-table-line-height: 21px; --doc-component-gap: 25px; --doc-block-gap: 20px; --doc-media-gap: 18px; --doc-paragraph-gap: 15px; --doc-group-gap: 10px; --doc-list-gap: 6px; --doc-space: 1.25; }
+:root[data-doc-measure="narrow"] { --doc-content-max-width: 648px; }
+:root[data-doc-measure="wide"] { --doc-content-max-width: 776px; }
+:root[data-doc-size="small"][data-doc-spacing="compact"] { --doc-body-line-height: 23px; --doc-small-line-height: 16px; --doc-note-line-height: 18px; --doc-title-line-height: 32px; --doc-h1-line-height: 32px; --doc-h2-line-height: 28px; --doc-h3-line-height: 25px; --doc-h4-line-height: 21px; --doc-card-title-line-height: 22px; --doc-table-line-height: 18px; }
+:root[data-doc-size="small"][data-doc-spacing="loose"] { --doc-body-line-height: 26px; --doc-small-line-height: 18px; --doc-note-line-height: 20px; --doc-title-line-height: 35px; --doc-h1-line-height: 35px; --doc-h2-line-height: 31px; --doc-h3-line-height: 28px; --doc-h4-line-height: 24px; --doc-card-title-line-height: 25px; --doc-table-line-height: 20px; }
+:root[data-doc-size="large"][data-doc-spacing="compact"] { --doc-body-line-height: 27px; --doc-small-line-height: 20px; --doc-note-line-height: 21px; --doc-title-line-height: 39px; --doc-h1-line-height: 38px; --doc-h2-line-height: 33px; --doc-h3-line-height: 30px; --doc-h4-line-height: 25px; --doc-card-title-line-height: 26px; --doc-table-line-height: 22px; }
+:root[data-doc-size="large"][data-doc-spacing="loose"] { --doc-body-line-height: 32px; --doc-small-line-height: 22px; --doc-note-line-height: 24px; --doc-title-line-height: 43px; --doc-h1-line-height: 43px; --doc-h2-line-height: 37px; --doc-h3-line-height: 34px; --doc-h4-line-height: 29px; --doc-card-title-line-height: 29px; --doc-table-line-height: 24px; }
+
+/* The text on an Apple platform (macOS, iOS, iPadOS: runtime/index.js sets data-doc-platform when the page opens, so an exported file
+   judges on its reader's machine): a shade darker, as its type is drawn thinner there; base.css smooths it. Dark is the same. */
+:root[data-doc-platform="mac"] { --doc-text: light-dark(#262626, #f3f3f3); }
+/* 衬线体: the kit's own controls (the display menu, a code block's language, a diff's counts) keep the
+   sans, --doc-font itself given it back on them, for what in them names --doc-font again (the display
+   menu's card, controls.css) takes it there. 混合体: the title and every heading in the serif, of no
+   weight (:where), so a document's own rule for its headings wins as the text's font they inherit does not. */
+:root[data-doc-font="serif"] :is(.doc-display, .doc-code-language, .doc-diff-stats) { --doc-font: var(--doc-sans-font); font-family: var(--doc-font); }
+:where(:root[data-doc-font="mixed"] :is(.doc-title, h1, h2, h3, h4)) { font-family: var(--doc-heading-font); }
+
 /* 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. */
@@ -170,7 +263,7 @@
 :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; }
+  :root { --doc-page-gutter: 12px; --doc-dialog-margin: 12px; --doc-dialog-pad: 16px; }
 }
 
 /* The document itself: the body's type and colors, holding the first paint until the page is
@@ -203,11 +296,14 @@ body {
   font-size: var(--doc-body-font-size);
   line-height: var(--doc-body-line-height);
 }
+/* On an Apple platform (runtime/index.js) the type is smoothed as the system's own apps' is; the workbench's frame has it, a document in its iframe does not inherit it. */
+:root[data-doc-platform="mac"] body { -webkit-font-smoothing: antialiased; }
 
 /* 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) {
+   page never flashes an intermediate state. If that never happens, reveal it anyway. A custom page
+   (main.gallery-page) is held the same way, until its board has placed its cards (board/). */
+:root:not([data-doc-ready]) body:has(> :is(.doc-page, .gallery-page)) {
   visibility: hidden;
   animation: doc-reveal 0s linear 1.2s forwards;
 }
@@ -215,8 +311,11 @@ body {
 
 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; }
+/* A link is the palette's blue with no line under it, a thin one (1px, clear of Chinese characters) only while the
+   pointer is on it. The pointer's rule weighs what `a` weighs, so a link of a look of its own (a bookmark, a file,
+   a detail card's, one shown with its icon: their classes) never takes the line from it. */
+a { color: var(--doc-link); text-decoration: none; text-underline-offset: .2em; }
+a:where(:hover) { text-decoration: underline 1px var(--doc-link-line); }
 /* 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
@@ -249,17 +348,27 @@ code:where(:not(:is(.doc-code > pre, .doc-diff-body) code)) {
    (runtime/spacing.js holds it in this span as the page renders). */
 .doc-range { white-space: nowrap; }
 
+/* A long run (a path, a URL, a long identifier: more than 20 characters with no place to break inside
+   it, src/shared/long-runs.mjs) breaks where its line ends, an ordinary word staying whole:
+   runtime/spacing.js holds it in this span as the page renders (the page editor marks a block
+   holding one: editor/page/long-runs.mjs). Punctuation keeps its rules (no line starts with ，。）). */
+.doc-long-run { word-break: break-all; }
+
 /* 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). */
+   for a line a component draws along its fill (a callout's). Words in a line (a span: the format
+   bar's 背景颜色, an Agent's <mark>) take --doc-mark instead, a step deeper than a block's fill and
+   square: Notion keeps its inline colors apart from its block colors, Feishu's highlight on words
+   is deeper than its block backgrounds, and the user found the words' fill too faint (2026-11-06). */
 /* 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; }
+@property --doc-mark { 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); }
@@ -270,19 +379,20 @@ code:where(:not(:is(.doc-code > pre, .doc-diff-body) code)) {
 .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. */
+   each (a paragraph and heading below, a list item in flow.css, a card or a disclosure in its own
+   stylesheet); a span and a block that takes no corners are square, and say 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); }
+/* Words in a line take the words' fill, deeper than a block's (Notion's inline colors are their own). */
+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) { background: var(--doc-mark); }
+.doc-highlight-gray { --doc-fill: light-dark(#f0efed, #383836); --doc-fill-deep: var(--doc-muted); --doc-mark: light-dark(#e0dfdd, #454542); }
+.doc-highlight-brown { --doc-fill: light-dark(#f5ede9, #45362d); --doc-fill-deep: light-dark(#9f765a, #ba856f); --doc-mark: light-dark(#efdbce, #534034); }
+.doc-highlight-orange { --doc-fill: light-dark(#fbebde, #53361f); --doc-fill-deep: light-dark(#d27b2d, #c77d48); --doc-mark: light-dark(#fbddc5, #654025); }
+.doc-highlight-yellow { --doc-fill: light-dark(#f9f3dc, #504425); --doc-fill-deep: light-dark(#cb9434, #ca9849); --doc-mark: light-dark(#f8eab6, #614f26); }
+.doc-highlight-green { --doc-fill: light-dark(#e8f1ec, #263d30); --doc-fill-deep: light-dark(#50946e, #529e72); --doc-mark: light-dark(#cfead9, #2c4b3a); }
+.doc-highlight-blue { --doc-fill: light-dark(#e5f2fc, #233850); --doc-fill-deep: light-dark(#387dc9, #5e87c9); --doc-mark: light-dark(#cde5fb, #294564); }
+.doc-highlight-purple { --doc-fill: light-dark(#f3ebf9, #3c2d47); --doc-fill-deep: light-dark(#9a6bb4, #9d68d3); --doc-mark: light-dark(#ebdaf6, #4b3859); }
+.doc-highlight-pink { --doc-fill: light-dark(#fae9f1, #4e2b3c); --doc-fill-deep: light-dark(#c14c8a, #d15796); --doc-mark: light-dark(#f8d7e6, #5d3548); }
+.doc-highlight-red { --doc-fill: light-dark(#fce9e7, #502c29); --doc-fill-deep: light-dark(#cf5148, #df5452); --doc-mark: light-dark(#fed7d1, #663632); }
 
 /* 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
@@ -306,6 +416,55 @@ span:is(.doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-h
   .doc-kit-error { display: none; }
 }
 
+/* A block online that waits for the reader's consent (the kit's runtime, net.js): a line and a button
+   after it in a document, over its card on a custom page (the card is the board's, position: relative),
+   its fill the card's so that what the block drew underneath does not show through. Never in a file,
+   an export or on paper (data-doc-dev). */
+.doc-net-consent {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  margin: 8px 0;
+  padding: 8px 12px;
+  border-radius: 6px;
+  color: var(--doc-muted);
+  background: var(--doc-surface);
+  font: 13px/1.5 var(--doc-font);
+}
+/* 允许 is the card's one action: a button with no line, the pale blue fill of a primary (the editor's look.mjs
+   BUTTONS and the workbench's, from the document's own accent), a deeper one under the pointer and pressed. */
+.doc-net-consent-allow {
+  padding: 4px 10px;
+  border: 0;
+  border-radius: 6px;
+  color: color-mix(in srgb, var(--doc-accent) 80%, var(--doc-text));
+  background: color-mix(in srgb, var(--doc-accent) 14%, transparent);
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  overflow-wrap: anywhere;
+  transition: background-color 20ms ease-in;
+}
+.doc-net-consent-allow:is(:hover, :focus-visible) { outline: none; background: color-mix(in srgb, var(--doc-accent) 22%, transparent); }
+.doc-net-consent-allow:active { background: color-mix(in srgb, var(--doc-accent) 30%, transparent); }
+.gallery-card > .doc-net-consent {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: center;
+  margin: 0;
+  padding: 12px;
+  border-radius: inherit;
+  text-align: center;
+  background: var(--gallery-card-fill, var(--doc-surface));
+}
+@media print {
+  .doc-net-consent { display: none; }
+}
+
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
 }
@@ -326,7 +485,11 @@ span:is(.doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-h
   /* 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. */
+     for min-content. The page's words are whole at a line's end (word-break: normal), in a Chinese
+     page as in an English one; a long run (more than 20 characters with no place to break inside it,
+     src/shared/long-runs.mjs) breaks where its line ends instead of going whole to the next one: the
+     kit holds it in a span that breaks anywhere (.doc-long-run, base.css; runtime/spacing.js), the
+     page editor marks a block holding one (page/long-runs.mjs). */
   overflow-wrap: break-word;
 }
 
@@ -376,7 +539,7 @@ span:is(.doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-h
 /* 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;
+  margin: 0 0 calc(32px * var(--doc-space, 1));
   font-size: var(--doc-title-font-size);
   font-weight: 600;
   line-height: var(--doc-title-line-height);
@@ -433,7 +596,9 @@ span:is(.doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-h
   transition: color 100ms ease-in-out, background-color 100ms ease-in-out;
 }
 
-.doc-display-button:hover,
+/* An icon button: the icon darkens under the pointer, the gray only while it is pressed or its menu is open. */
+.doc-display-button:hover { color: var(--doc-text); }
+
 .doc-display-button[aria-expanded="true"] {
   color: var(--doc-text);
   background: var(--doc-hover);
@@ -617,6 +782,122 @@ span:is(.doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-h
   .doc-display { display: none; }
 }
 
+/* A choice (runtime/choice.js): the menu card a <select> and DocKit.choose open instead of the browser's
+   popup, and the quiet look a <select> has where nobody gave it one. The card is the display menu's
+   (controls.css): radius 10, Notion's popup surface and shadow, rows of 28px that take one light fill
+   under the pointer or the keys, the chosen row checked at its right (no empty column before the words
+   on the others), as wide as its rows (the trigger's width at least, 320px at most, its words cut by an
+   ellipsis past that). It stands in the top layer (a popover, so no z-index of the page covers it);
+   z-index is for a browser without popovers. */
+
+.doc-choice {
+  position: fixed;
+  inset: auto;
+  left: 0;
+  top: 0;
+  z-index: 1100;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: min(320px, calc(100vw - 16px));
+  margin: 0;
+  padding: 4px 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  border: 0;
+  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);
+  user-select: none;
+  transition: opacity 120ms ease-out;
+}
+
+@starting-style {
+  .doc-choice { opacity: 0; }
+}
+
+.doc-choice-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 28px;
+  margin: 0 4px 1px;
+  padding: 0 8px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 20ms ease-in;
+}
+
+/* Under the pointer, or reached with the keys: one light fill, as every menu's rows. */
+.doc-choice-row.is-active { background: var(--doc-hover); }
+.doc-choice-row:active { background: var(--doc-press); }
+.doc-choice-row[aria-disabled="true"] { opacity: .45; cursor: default; }
+.doc-choice-row[aria-disabled="true"]:active { background: transparent; }
+
+.doc-choice-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The chosen row: a check at its right. */
+.doc-choice-check {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.7;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* An <optgroup>'s name: a small heading, no row. */
+.doc-choice-group {
+  padding: 6px 12px 2px;
+  color: var(--doc-muted);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.doc-choice-group:not(:first-child) { margin-top: 4px; }
+
+/* A <select> nobody styled: no frame, a light fill that darkens under the pointer, the browser's own
+   arrow at its right (kept whatever the page sets as border or background, which a drawn arrow would
+   lose). A class's or a block's own rule outweighs this (it has no weight); a list box (multiple) is
+   the browser's. */
+:where(select:not([multiple], [size])) {
+  min-height: 28px;
+  padding: 0 4px 0 8px;
+  border: 0;
+  border-radius: 6px;
+  color: var(--doc-text);
+  background-color: var(--doc-hover);
+  font: inherit;
+  cursor: pointer;
+}
+
+:where(select:not([multiple], [size]):hover) { background-color: var(--doc-press); }
+
+:where(select:not([multiple], [size]):focus-visible) {
+  outline: 2px solid var(--doc-accent);
+  outline-offset: 2px;
+}
+
+/* On paper a <select> is the words of its chosen option, no arrow, and the menu is never there. */
+@media print {
+  select { appearance: none; background-image: none; }
+  .doc-choice { 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:
@@ -833,10 +1114,12 @@ span:is(.doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-h
 .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. */
+/* A link shown as its page's icon and title (图标视图, 页面块: shared/components/mention.mjs): Notion's
+   look, not a text link's blue (base.css): the muted gray on a thin line always shown, under the pointer
+   too (--doc-mention, --doc-mention-line), 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 { color: var(--doc-mention); text-decoration: underline .05em var(--doc-mention-line); text-underline-offset: .2em; }
 .doc-link-mention-icon {
   display: inline-block;
   width: 1.125em;
@@ -855,10 +1138,10 @@ span.doc-link-mention-icon {
 }
 
 /* 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. */
+   workbench's tree (Lucide's file-text), 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");
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M10 9H8M16 13H8M16 17H8'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M10 9H8M16 13H8M16 17H8'/%3E%3C/svg%3E");
 }
 .doc-link-mention[href]:not([href^="http" i]):hover {
   border-radius: 1px;
@@ -965,6 +1248,9 @@ span.doc-link-mention-icon {
 }
 .doc-code-range::before { content: "·"; margin: 0 6px; }
 
+/* The toolbar shows only while the pointer is over the block or the focus is in it (notion-lite's
+   code actions), folded or not; a diff's counts always (what changed, not a control: its copy shows
+   under the pointer, below). */
 .doc-code-tools {
   grid-area: 1 / 5;
   display: flex;
@@ -975,7 +1261,6 @@ span.doc-link-mention-icon {
 }
 :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;
@@ -1013,8 +1298,8 @@ span.doc-link-mention-icon {
 :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). */
+/* Folded, its toolbar is its language and copy alone, with no bar (Feishu's look; its language is
+   not picked then), shown under the pointer as an open block's. */
 .doc-code--folded .doc-code-toolbar { background: none; box-shadow: none; }
 .doc-code--folded :is(.doc-code-separator, .doc-code-wrap) { display: none; }
 
@@ -1140,13 +1425,12 @@ span.doc-link-mention-icon {
 
 /* 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. */
+   being cut, and its toolbar lies over the header's right end when it shows (the pointer over the
+   block or the focus in it), taking no room from the title. */
 @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
@@ -1199,24 +1483,26 @@ span.doc-link-mention-icon {
 /* 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; }
+   inside being the one place a component is spaced as it is among text. A callout's blocks are
+   spaced as a panel's, by the same rules (callout.css: one kind of block, its own look). A column's,
+   a disclosure's and a detail card's edges take none whatever the block (flow.css). */
+:is(.doc-summary, .doc-panel, .doc-callout) > :where(:first-child, .doc-icon + *) { margin-top: 0; }
+:is(.doc-summary, .doc-panel, .doc-callout) > :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
+   summary, a highlight panel, a callout, a disclosure, a dialog, a column or a slot of an instance of a component
+   package (data-doc-slot), 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
+   stop at them: the inside of a card, table 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(.doc-page, .doc-section, .doc-summary, .doc-panel, .doc-callout, .doc-details-content, .doc-dialog-content, [data-doc-sheet], .doc-column, [data-doc-slot], :is(.doc-section, .doc-summary, .doc-panel, .doc-callout, .doc-details-content, .doc-dialog-content, .doc-column, [data-doc-slot]) > div:not([class])) {
   & > :where(p),
   & > :where(ul, ol, blockquote) :where(p) {
     margin: 0 0 var(--doc-paragraph-gap);
@@ -1231,30 +1517,30 @@ span.doc-link-mention-icon {
   }
   & > :where(h1),
   & > :where(ul, ol) :where(li) > :where(h1) {
-    margin: 26px 0 10px;
+    margin: calc(26px * var(--doc-space, 1)) 0 calc(10px * var(--doc-space, 1));
     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;
+    margin: calc(22px * var(--doc-space, 1)) 0 calc(8px * var(--doc-space, 1));
     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;
+    margin: calc(20px * var(--doc-space, 1)) 0 calc(8px * var(--doc-space, 1));
     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;
+    margin: calc(16px * var(--doc-space, 1)) 0 calc(8px * var(--doc-space, 1));
     font-size: var(--doc-h4-font-size);
     line-height: var(--doc-h4-line-height);
   }
   & > :where(ul, ol) {
-    margin: 10px 0 var(--doc-block-gap);
+    margin: calc(10px * var(--doc-space, 1)) 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
@@ -1276,7 +1562,7 @@ span.doc-link-mention-icon {
   & > :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,
+    /* Lists (Feishu's place and shapes): their markers the kit's, in their own blue (--doc-list-marker), 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. */
@@ -1320,7 +1606,7 @@ span.doc-link-mention-icon {
     :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; }
+  & > :where(p, ul, ol, blockquote, h1, h2, h3, h4) :where(strong) { font-weight: 700; }
 
   /* 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). */
@@ -1349,8 +1635,8 @@ span.doc-link-mention-icon {
    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. */
+/* A text block the reader left empty (a line of space, as in Notion) is one line high: a disclosure's
+   title too, and a callout the file has empty (an empty one of the editor's before 2026-11-07). */
 .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
@@ -1476,7 +1762,7 @@ ol.doc-flow > li {
   border-radius: 8px;
   background: var(--doc-surface);
   box-shadow: none;
-  font-weight: 600; /* a step written the short way: its own words its title */
+  font-weight: 700; /* a step written the short way: its own words its title, bold as a <strong> is (flow.css) */
   overflow-wrap: anywhere;
   break-inside: avoid;
 }
@@ -2009,7 +2295,6 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
   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;
@@ -2052,20 +2337,19 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
   :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. */
+/* The card is the workbench's settings dialogs' (组件列表, 写作偏好, Notion's centred dialog), a
+   little smaller: 760 wide and 80% of the window high (at most 760), at least 24px clear of the
+   window's sides (12px on a phone), whatever it holds, centred (a modal dialog is fixed with inset 0
+   and margin auto); what it holds scrolls inside it. 100% is the window less a scrollbar's room kept,
+   as it is for the page. The same while the page is edited. No header, no line, no close button.
+   Their radius and their shadow (the workbench's --shaOutLg, light and dark). */
 .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;
+  width: min(var(--doc-dialog-width), calc(100% - (2 * var(--doc-dialog-margin))));
+  height: min(var(--doc-dialog-height), calc(100dvh - (2 * var(--doc-dialog-margin))));
   min-width: 0;
   max-width: none;
   min-height: 0;
-  max-height: calc(100dvh - (2 * var(--doc-dialog-block-gutter)));
+  max-height: none;
   margin: auto;
   padding: 0;
   overflow: hidden;
@@ -2073,26 +2357,53 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
   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%);
+  box-shadow: 0 20px 24px rgb(25 25 25 / 5%), 0 5px 8px rgb(25 25 25 / 2.7%), 0 0 0 1px rgb(42 28 0 / 7%);
 }
+:root[data-doc-theme="dark"] .doc-dialog { box-shadow: 0 0 0 1px #383836, 0 14px 28px -6px rgb(25 25 25 / 20%), 0 2px 4px -1px rgb(25 25 25 / 11.8%); }
 
-/* It comes up from a little below, the backdrop fading in. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-doc-theme="light"]) .doc-dialog { box-shadow: 0 0 0 1px #383836, 0 14px 28px -6px rgb(25 25 25 / 20%), 0 2px 4px -1px rgb(25 25 25 / 11.8%); }
+}
+
+/* Its middle is the middle of the window it stands in. In a workbench the page is a frame right of
+   the sidebar and under the top bar, and the workbench's window is the one (the workbench covers its
+   own bars, the frame's backdrop the rest: features/report/cards.ts); the editor's session gives
+   where that window's middle falls in the page's (--doc-dialog-centre-x and -y, from the frame's
+   place: src/editor/page/session.mjs), and the card goes that far from the frame's middle, as far as
+   the frame lets it stay 24px clear of the frame's sides (never cut off): where the frame is too
+   narrow or low for that, it stands nearer the frame's middle, in it where the frame has no more room
+   than the card needs. Moved by its insets, a box as wide as the frame, never by a transform, which
+   would make the card the containing block of the editor's fixed tools in it. Unsaid (a page on its
+   own, an export), its middle is the page's window's. */
+.doc-dialog:modal {
+  --doc-dialog-shift-x: clamp(-1 * var(--doc-dialog-room-x), calc(var(--doc-dialog-centre-x, 50%) - 50%), var(--doc-dialog-room-x));
+  --doc-dialog-shift-y: clamp(-1 * var(--doc-dialog-room-y), calc(var(--doc-dialog-centre-y, 50%) - 50%), var(--doc-dialog-room-y));
+  --doc-dialog-room-x: max(0px, calc((100% - min(var(--doc-dialog-width), calc(100% - (2 * var(--doc-dialog-margin))))) / 2 - var(--doc-dialog-margin)));
+  --doc-dialog-room-y: max(0px, calc((100% - min(var(--doc-dialog-height), calc(100% - (2 * var(--doc-dialog-margin))))) / 2 - var(--doc-dialog-margin)));
+  inset: var(--doc-dialog-shift-y) calc(-1 * var(--doc-dialog-shift-x)) calc(-1 * var(--doc-dialog-shift-y)) var(--doc-dialog-shift-x);
+}
+
+/* It comes up as the settings dialogs do (their pop-in: 2px from above, 0.12s), the backdrop, their
+   overlay's color (light 60%, dark 80%; the workbench's underlay outside a frame is the same, its
+   --overlay), fading in where their overlay comes at once: the workbench's underlay hears of a card
+   from the page a frame or two after it opens, and the fade, which it has too, hides that. Plain
+   colors: a ::backdrop inherits from nothing in some browsers. */
 .doc-dialog[open] {
   display: flex;
   flex-direction: column;
-  animation: doc-dialog-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
+  animation: doc-dialog-in 0.12s ease-out;
 }
 
-.doc-dialog::backdrop { background: rgb(15 15 15 / 36%); }
+.doc-dialog::backdrop { background: rgb(15 15 15 / 60%); }
 .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%); }
+:root[data-doc-theme="dark"] .doc-dialog::backdrop { background: rgb(15 15 15 / 80%); }
 
 @media (prefers-color-scheme: dark) {
-  :root:not([data-doc-theme="light"]) .doc-dialog::backdrop { background: rgb(0 0 0 / 55%); }
+  :root:not([data-doc-theme="light"]) .doc-dialog::backdrop { background: rgb(15 15 15 / 80%); }
 }
 
 @keyframes doc-dialog-in {
-  from { opacity: 0; transform: translateY(8px) scale(0.985); }
+  from { opacity: 0; transform: translateY(-2px); }
 }
 
 @keyframes doc-dialog-fade {
@@ -2112,22 +2423,17 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
   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
+/* Its text is the reading column, centred, at most 712px and at least --doc-dialog-pad (48px; 16px
+   on a phone) from the card's sides (--doc-dialog-inset). 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)
-  );
+  --doc-dialog-inset: max(var(--doc-dialog-pad), calc((100% - var(--doc-content-max-width)) / 2));
   min-width: 0;
-  min-height: min(160px, calc(100dvh - (2 * var(--doc-dialog-block-gutter))));
+  min-height: 0;
   max-width: 100%;
   flex: 1 1 auto;
   padding: 32px var(--doc-dialog-inset) 40px;
@@ -2284,8 +2590,8 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
    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
+   gray and its bold are looks it was given (the page editor's 标题行 gives them; its 标题列 none:
+   a header column only sticks), 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
@@ -2328,18 +2634,19 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
 .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. */
+/* The frame's scrollbars (tables.js): a layer stuck at the frame's top-left that takes no room (no
+   height; as wide as the frame's inside, which it never makes wider, so that the frame's line is
+   as wide as the frame in the same layout as the frame: below), 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;
+  width: 100%;
   height: 0;
 }
 .doc-scrollbar {
@@ -2377,11 +2684,14 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
 }
 .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. */
+   outline too): as big as the frame, on the layer stuck at its top-left; as wide as the layer, so
+   as the frame whenever the frame is laid out (a width read and written later by a script could
+   disagree with it for a frame), as tall as tables.js reads the frame. */
 .doc-scrollbars-frame {
   position: absolute;
   top: 0;
   left: 0;
+  width: 100%;
   box-sizing: border-box;
   border: 1px solid var(--doc-table-frame);
   border-radius: var(--doc-table-radius);
@@ -2429,6 +2739,10 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
 /* 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; }
 
+/* A cell's words break as the page's do (word-break inherited: an ordinary word whole at a line's
+   end, a long run anywhere in the span the kit holds it in, .doc-long-run, page.css), a word wider
+   than its column anywhere too (overflow-wrap); what a table keeps whole says so below: its headers,
+   a short field, inline code. */
 .doc-table th,
 .doc-table td {
   padding: 10px 9px; /* Notion's 9px at the sides */
@@ -2440,7 +2754,6 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
   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
@@ -2469,12 +2782,21 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
 .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; }
 
+/* A picture in a cell (单元格里的图片, an <img> amid its words): as wide as its width says (pixels; the
+   page editor's drag of its edge writes it), with none at most 240px, never past its cell; its height
+   by its own ratio, its middle on the line's, so a row grows with it. */
+.doc-table :is(td, th) img { max-width: 100%; height: auto; vertical-align: middle; }
+.doc-table :is(td, th) img:not([width]) { max-width: min(100%, 240px); }
+
 .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="narrative"] { overflow-wrap: break-word; }
+/* No word-break here: a compact cell that wraps (data-column-wrap="") keeps the compact rule's normal
+   above, a column of paths (token-heavy) the page's (its long runs breaking anywhere). */
 .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-wrap] { white-space: normal; overflow-wrap: anywhere; }
 .doc-table [data-column-kind] code { white-space: inherit; }
+/* A short field (compact) keeps its pieces whole (a number, （1606））: its column's floor is the widest of them (layout.js). */
 /* 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
@@ -2483,6 +2805,9 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
    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; }
+/* What a header or a short field keeps whole, a long run in it too: the span the kit holds the run in
+   (.doc-long-run, base.css) breaks as its cell does. */
+.doc-table :is(th:not([data-column-wrap]), [data-column-wrap="words"], [data-column-kind="compact"]) .doc-long-run { word-break: inherit; }
 /* 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
@@ -2532,8 +2857,8 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
 /* 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; }
+   row's look is these: .doc-highlight-gray and .doc-bold (a header column has none of its own). */
+.doc-table :is(td, th).doc-bold { font-weight: 700; }
 .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; }
@@ -2629,19 +2954,22 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
   .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). */
+/* 提示块: blocks set apart on a fill, with a line at its left in that fill's deep shade. It holds
+   blocks as a highlight block does (its paragraphs, lists, code…: they read as in any flow, flow.css,
+   its first and last taking no margin outside them, highlight.css); one written the old way, words
+   straight in it, shows them as its one paragraph. 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; its fill is that
+   color taken a little toward the page's background (the user's, 2026-11-07: a little lighter),
+   its line that color's deep shade as it is. 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;
+  background: color-mix(in srgb, var(--doc-fill, light-dark(#e5f2fc, #233850)) 70%, var(--doc-bg));
 }
 
 /* 折叠列表: a disclosure, its title row with an arrow, and its content region, a flow. It is drawn
@@ -2681,17 +3009,16 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
 }
 
 .doc-details > summary::-webkit-details-marker { display: none; }
+/* Its words whole as the page's, a long run breaking anywhere (page.css); overflow-wrap: anywhere keeps a word from widening the title's column. */
 .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,
@@ -2732,40 +3059,62 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
    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). */
+   says why, to who writes the page (data-doc-dev: no export takes it, nor a presentation or paper).
+   What its slots hold (data-doc-slot) is the document's blocks, which read as in any flow (flow.css)
+   whatever state it is in: this look stops at a slot (@scope … to; a browser without @scope shows
+   it with none of this look, what it holds all there). */
 
 [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;
+/* [hidden] hides what is in an instance whatever display a block's style gave it: a control a block
+   hides where nothing is written (an export: form.hidden = !context.canEdit()) stays hidden though its
+   own rule says display: flex, which an author's rule on the class would otherwise win over the
+   browser's [hidden] { display: none }. What a slot holds is the document's blocks, which keep their
+   own rules (a Sheet panel, an empty figure the editor shows), so the rule stops at a slot. */
+@scope ([data-doc-component]) to ([data-doc-slot]) {
+  :scope [hidden] {
+    display: none !important;
+  }
 }
-[data-doc-fallback] :where(p, ul, ol, dl, table) {
-  margin: 0 0 8px;
+/* A slot holds the document's blocks: they read as in any flow (flow.css), the first and the last flush with it. */
+[data-doc-slot] > :where(:first-child) {
+  margin-top: 0;
 }
-[data-doc-fallback] :where(ul, ol) {
-  padding-inline-start: 1.625em;
+[data-doc-slot] > :where(:last-child) {
+  margin-bottom: 0;
 }
-[data-doc-fallback] :where(table) {
-  border-collapse: collapse;
+[data-doc-fallback] {
+  overflow-x: auto;
 }
-[data-doc-fallback] :where(th, td) {
-  padding: 4px 8px;
-  border: 1px solid var(--doc-border);
-  text-align: start;
+@scope ([data-doc-fallback]) to ([data-doc-slot]) {
+  :scope :where(img, svg, video, iframe) {
+    max-width: 100%;
+  }
+  :scope :where(img, video) {
+    height: auto;
+  }
+  :scope :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;
+  }
+  :scope :where(p, ul, ol, dl, table) {
+    margin: 0 0 8px;
+  }
+  :scope :where(ul, ol) {
+    padding-inline-start: 1.625em;
+  }
+  :scope :where(table) {
+    border-collapse: collapse;
+  }
+  :scope :where(th, td) {
+    padding: 4px 8px;
+    border: 1px solid var(--doc-border);
+    text-align: start;
+  }
 }
 .doc-component-data :where(ul, dl, table) {
   margin: 0;