@master/internal-site 0.0.0-stage → 0.1.0

package/src/styles/docs-shell/docs.css

@@ -0,0 +1,79 @@
+/*
+ * The documentation frame under the sticky header: a sticky sidebar, the article column and the page's contents rail.
+ * Chrome stays on the canvas; hairlines separate the rails.
+ *
+ * The article has two widths on one start edge. Running text keeps the reading measure (`--docs-text`); steps, tabs,
+ * the pager and framed surfaces span the wide column (`--docs-wide`), and framed surfaces hang past both of its
+ * edges by the prose bleed. Where the contents rail shows, a page with contents gives the rail the room the wide column
+ * would take, so its wide column is the text column. The article and the rail centre together: every page starts its
+ * column on the same edge.
+ */
+@layer components {
+  .ui-docs, .ui-docs-main { --docs-header: calc(3.75rem + env(safe-area-inset-top)); --docs-gutter: max(1.25rem, env(safe-area-inset-left), env(safe-area-inset-right)); --docs-rail: 15.75rem;
+    --docs-text: 41rem; --docs-wide: calc(var(--docs-text) + var(--docs-rail)); }
+  @media (--sm) { .ui-docs, .ui-docs-main { --docs-gutter: 2.5rem; } }
+  /* Beside the sidebar the gutter opens from 40px to 80px as the window grows. */
+  @media (--md) { .ui-docs, .ui-docs-main { --docs-gutter: clamp(2.5rem, (100vw - 64rem) / 4 + 2.5rem, 5rem); } }
+  .ui-docs { display: flex; width: 100%; background: var(--ui-surface-canvas); }
+
+  .ui-docs .ui-sidebar {
+    position: sticky; top: var(--docs-header); flex: none; align-self: start; width: 17.25rem; height: calc(100dvh - var(--docs-header));
+    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ui-line-divider) transparent;
+    box-shadow: inset -1px 0 0 var(--ui-line-hair);
+  }
+  /* The first group caption stands level with the page kicker and the contents caption. */
+  @media (--md) { .ui-docs .ui-sidebar { padding-top: calc(3.5rem - .5rem); } }
+  /* The rail clips its overflow, so focus rings inside it sit on the element's edge. */
+  .ui-docs .ui-sidebar .ui-nav-link:focus-visible { outline-offset: -2px; }
+  @media (width < 64rem) { .ui-docs .ui-sidebar { display: none; } }
+  .ui-sidebar .ui-nav-link { overflow-wrap: anywhere; }
+  .ui-sidebar .ui-nav-link > small { margin-left: .5em; color: var(--ui-text-muted); font-size: .75rem; font-weight: var(--ui-weight-regular); }
+  /* A disabled entry renders as a button. */
+  .ui-nav-link:is(button) { appearance: none; width: 100%; border: 0; background: none; color: var(--ui-text-disabled); font: inherit; font-size: var(--ui-text-small); text-align: start; cursor: not-allowed; }
+  @media (pointer: coarse) { .ui-nav-link { min-height: 2.75rem; } }
+
+  .ui-docs-main { container: docs-main / inline-size; display: flex; flex: 1; flex-direction: column; min-width: 0; }
+  .ui-docs-body { display: flex; justify-content: center; width: 100%; }
+  .ui-docs-article { flex: 0 1 auto; width: 100%; min-width: 0; max-width: calc(var(--docs-wide) + var(--docs-gutter) * 2); padding: var(--ui-space-xl) var(--docs-gutter) var(--ui-space-3xl); }
+  @media (--sm) { .ui-docs-article { padding-bottom: 5rem; } }
+  @media (--md) { .ui-docs-article { padding-top: 3.5rem; padding-bottom: 6rem; } }
+  /* Where the rail shows, a page with contents gives it the wide column's room. */
+  @media (width >= 80rem) { .ui-docs-article[data-aside] { max-width: calc(var(--docs-text) + var(--docs-gutter) * 2); } }
+
+  /* The page head (`ui-pagehead`): an integration's mark beside the title, about a title and a half tall so it never
+     squeezes the heading; on a phone it leads, smaller. */
+  .ui-pagehead-title { display: flex; align-items: center; gap: var(--ui-space-lg); }
+  .ui-pagehead-title > h1 { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+  .ui-pagehead-title > h1:lang(zh) { letter-spacing: 0; }
+  .ui-pagehead-icon { display: grid; flex: none; place-content: center; width: 3.5rem; height: 3.5rem; }
+  @media (width < 37.5rem) { .ui-pagehead-title { flex-direction: column-reverse; align-items: start; gap: var(--ui-space-md); } .ui-pagehead-icon { width: 3rem; height: 3rem; } }
+  .ui-pagehead-unfinished { margin-left: .5em; font-size: .5em; vertical-align: top; }
+  a.ui-pagehead-kicker { display: inline-flex; align-items: center; gap: var(--ui-space-3xs); width: fit-content; text-decoration: none; transition: color var(--ui-duration-quick); }
+  a.ui-pagehead-kicker:hover { color: var(--ui-text-strong); }
+  a.ui-pagehead-kicker:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; border-radius: var(--ui-radius-xs); }
+  .ui-pagehead-kicker > svg { width: 12px; height: 12px; margin-left: -2px; stroke: currentColor; stroke-width: 2; }
+  /* Han text breaks between any two characters: break at spaces and punctuation, and balance the lines. */
+  .ui-pagehead > p:lang(zh) { text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
+  .ui-pagehead > .ui-callout { margin-top: var(--ui-space-xs); }
+  .ui-pagehead[data-align="center"] { justify-items: center; text-align: center; }
+
+  /* The pager: a lone next document keeps to the end column. */
+  .ui-pager > a[rel="next"]:only-child { grid-column: 2; }
+  .ui-pager > a { min-width: 0; overflow-wrap: anywhere; }
+
+  /* The contents rail stands still beside the article; a long list scrolls inside it. */
+  :is(.ui-docs-body > .ui-toc, .ui-docs-body > site-island > .ui-toc) {
+    position: sticky; top: var(--docs-header); display: flex; flex: none; flex-direction: column; align-self: start; width: var(--docs-rail); max-height: calc(100dvh - var(--docs-header));
+    padding: 3.5rem var(--ui-space-lg) var(--ui-space-xl) 0;
+  }
+  :is(.ui-docs-body > .ui-toc, .ui-docs-body > site-island > .ui-toc) > ol { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
+  @media (width < 80rem) { :is(.ui-docs-body > .ui-toc, .ui-docs-body > site-island > .ui-toc) { display: none; } }
+  @container docs-main (width < 48rem) { .ui-toc[data-rail] { display: none; } }
+
+  @media print {
+    .ui-docs .ui-sidebar, .ui-toc { display: none; }
+    .ui-docs-main, .ui-docs-body { display: block; max-width: none; }
+    .ui-docs-article { max-width: none; padding: 3.75rem 1.875rem; }
+  }
+
+}

package/src/styles/docs-shell/documentation-search.css

@@ -0,0 +1,42 @@
+/*
+ * The documentation search (`ui-dialog` with `ui-dialog-search`, `ui-results` and `ui-dialog-foot`): a floating sheet
+ * near the top of the viewport whose results scroll between the field and the key hints; a full screen on phones.
+ */
+@layer components {
+  html:has(.ui-dialog[data-variant="search"][open]) { overflow: hidden; scrollbar-gutter: stable; }
+  .ui-dialog[data-variant="search"] { flex-direction: column; width: min(42.5rem, calc(100% - 2rem)); max-height: min(72dvh, 42rem); margin: min(14dvh, 8rem) auto auto; container: search / inline-size; }
+  .ui-dialog[data-variant="search"][open] { display: flex; }
+  .ui-dialog[data-variant="search"] .ui-dialog-search { flex: none; }
+  .ui-dialog-search > svg { flex: none; color: var(--ui-text-muted); }
+  .ui-dialog-search input { appearance: none; padding: .5rem 0; }
+  .ui-dialog-search input::placeholder { color: var(--ui-text-muted); }
+  .ui-dialog-search input::-webkit-search-cancel-button { display: none; }
+  .ui-dialog-close > span:last-child { display: none; }
+  .ui-dialog-close > .ui-kbd { box-shadow: none; background: none; }
+  .ui-dialog[data-variant="search"] > .ui-dialog-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
+  .ui-dialog-status { margin: 0; padding: var(--ui-space-sm) var(--ui-space-md) 0; color: var(--ui-text-muted); @apply --ui-label-type; }
+  .ui-dialog-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-xs); padding: var(--ui-space-sm) var(--ui-space-md) var(--ui-space-lg); }
+  .ui-dialog-note > p { width: 100%; margin: 0; color: var(--ui-text-body); font-size: .8125rem; line-height: 1.6; }
+  .ui-dialog-note > .ui-button code { font: var(--ui-weight-regular) .75rem/1 var(--font-family-mono); }
+  .ui-dialog-note > .ui-button svg { width: 14px; height: 14px; color: var(--ui-text-muted); }
+  .ui-dialog-note[data-align="center"] { flex-direction: column; padding-block: var(--ui-space-xl); color: var(--ui-text-muted); text-align: center; }
+  .ui-dialog-note[data-align="center"] > b { color: var(--ui-text-strong); font-size: var(--ui-text-small); font-weight: var(--ui-weight-strong); }
+  .ui-results:empty { display: none; }
+  .ui-results > li > a { scroll-margin-block: var(--ui-inset); }
+  .ui-results > li > a > b { overflow-wrap: anywhere; }
+  .ui-results > li > a > span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--ui-text-body); font-size: .8125rem; line-height: 1.55; overflow-wrap: anywhere; }
+  .ui-results mark { background: none; color: var(--ui-text-strong); text-decoration: underline; text-decoration-color: var(--ui-line-mark); text-underline-offset: .2em; }
+  .ui-results > li > a:focus-visible { @apply --ui-focus-ring; outline-offset: -2px; }
+  .ui-dialog-foot { flex: none; }
+  .ui-dialog-foot > span:last-child { margin-left: auto; }
+  .ui-dialog-foot .ui-kbd svg { width: 12px; height: 12px; }
+  @media (width < 48rem) {
+    .ui-dialog[data-variant="search"] { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
+    .ui-dialog-close > .ui-kbd, .ui-dialog-foot { display: none; }
+    .ui-dialog-close > span:last-child { display: inline; }
+  }
+  @media (forced-colors: active) {
+    .ui-dialog[data-variant="search"] { border: 1px solid CanvasText; }
+    .ui-results > li > a[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
+  }
+}

package/src/styles/docs-shell/footer.css

@@ -0,0 +1,38 @@
+/*
+ * The site footer: link groups under eyebrow titles on the canvas (the license and trademark policy among them), then
+ * one quiet base row in 12px tracked type — the notice at the start, the theme and language preferences at the end. In
+ * the documentation it takes the article's wide column, from the text's start edge.
+ */
+@layer components {
+  .ui-footer { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-3xl); padding: 4rem max(1.25rem, env(safe-area-inset-right)) max(var(--ui-space-2xl), env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left)); box-shadow: inset 0 1px 0 var(--ui-line-hair); color: var(--ui-text-muted); font-size: var(--ui-text-small); }
+  @media (--sm) { .ui-footer { padding-inline: 2.5rem; } }
+  .ui-footer > * { width: 100%; max-width: 72rem; margin-inline: auto; }
+  /* The footer is an island inside the main column, so these reach it as a descendant. */
+  .ui-docs-main .ui-footer { padding-inline: var(--docs-gutter); }
+  .ui-docs-main .ui-footer > * { max-width: var(--docs-wide); }
+
+  /* Groups keep a column of their own width from the start edge; a wide footer leaves the rest to the canvas. */
+  .ui-footer-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--ui-space-2xl) var(--ui-space-xl); }
+  /* Two columns only while each can hold a link; enlarged text falls back to the intrinsic single column. */
+  @container (18rem <= width < 30rem) { .ui-footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+  .ui-footer-nav > * { min-width: 0; }
+  .ui-footer-group > h2 { margin: 0 0 var(--ui-space-md); color: var(--ui-text-strong); @apply --ui-eyebrow-type; }
+  .ui-footer-group > ul { display: grid; gap: var(--ui-space-sm); margin: 0; padding: 0; list-style: none; }
+  .ui-footer-group li { min-width: 0; line-height: 1.25rem; }
+  .ui-footer a { color: var(--ui-text-body); text-decoration: none; transition: color var(--ui-duration-quick); }
+  .ui-footer a:hover { color: var(--ui-text-strong); }
+  .ui-footer :is(a, button):focus-visible { @apply --ui-focus-ring; outline-offset: 2px; border-radius: var(--ui-radius-xs); }
+  .ui-footer-group button { padding: 0; border: 0; background: none; color: var(--ui-text-disabled); font: inherit; cursor: not-allowed; }
+
+  /* Every word in the base row is one size, 12px, tracked open so the small type keeps its air. */
+  .ui-footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-xs) var(--ui-space-lg); padding-top: var(--ui-space-lg); box-shadow: inset 0 1px 0 var(--ui-line-hair); font-size: var(--ui-text-label); line-height: 1.25rem; letter-spacing: .04em; }
+  .ui-footer-notice { margin: 0 auto 0 0; }
+  .ui-footer-preference { position: relative; display: inline-flex; color: var(--ui-text-muted); align-items: center; gap: var(--ui-space-3xs); border-radius: var(--ui-radius-xs); cursor: pointer; transition: color var(--ui-duration-quick); }
+  .ui-footer-preference:hover { color: var(--ui-text-strong); }
+  .ui-footer-preference > svg { flex: none; width: 12px; height: 12px; }
+  /* The leading icon names the preference in place of a label; the value follows it. */
+  .ui-footer-preference > svg:first-child { width: 14px; height: 14px; margin-right: 2px; }
+  @media (width < 64rem) { .ui-footer-preference { display: none; } }
+  @media (pointer: coarse) { .ui-footer-group a { display: inline-flex; align-items: center; min-height: 2.75rem; } .ui-footer-group > ul { gap: 0; } .ui-footer-group > h2 { margin-bottom: var(--ui-space-xs); } }
+  @media print { .ui-footer { display: none; } }
+}

package/src/styles/docs-shell/header.css

@@ -0,0 +1,69 @@
+/*
+ * The site header (`ui-header`, styles/system/shell.css) placed for the site: it sticks above documentation pages and
+ * overlays the homepage and blog as a stickable header that slides away while reading down (`data-tucked`) and is
+ * transparent at the top of the page (`data-background="transparent"`).
+ */
+@layer components {
+  .ui-header { padding-top: env(safe-area-inset-top); padding-inline: max(var(--ui-space-xl), env(safe-area-inset-left)) max(var(--ui-space-xl), env(safe-area-inset-right)); height: calc(3.75rem + env(safe-area-inset-top)); box-sizing: border-box; }
+  .ui-header[data-variant="stickable"] { position: fixed; inset: 0 0 auto; width: 100%; transition: translate var(--ui-duration-base) var(--ui-ease), background-color var(--ui-duration-base), box-shadow var(--ui-duration-base); }
+  .ui-header[data-tucked] { translate: 0 -100%; }
+  /* A focused control stays on screen after the header has tucked away, revealed at once. */
+  .ui-header:focus-within { translate: none; transition-duration: 0s; }
+  .ui-header[data-background="transparent"] { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
+  /* Without scripts the header never leaves its transparent top state, so it scrolls away instead of covering content. */
+  @media (scripting: none) { .ui-header[data-background="transparent"] { position: absolute; } }
+  @media (prefers-reduced-motion: reduce) { .ui-header, .ui-header[data-variant="stickable"] { transition: none; } }
+  @media print { .ui-header { display: none; } }
+
+  .ui-header-brand { display: inline-flex; align-items: center; min-height: 2.75rem; border-radius: var(--ui-radius-sm); }
+  .ui-header-brand:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; }
+  /* The version chip opens the native version list laid over it. */
+  .ui-header .ui-version { position: relative; cursor: pointer; }
+  .ui-header .ui-version > svg { width: 12px; height: 12px; color: var(--ui-text-muted); }
+  .ui-header .ui-version:hover { color: var(--ui-text-strong); }
+  .ui-header-nav > a > .ui-badge { margin-left: var(--ui-space-2xs); }
+  .ui-header-end > .ui-button[data-disabled] { color: var(--ui-text-disabled); pointer-events: none; }
+  /* The community and preference icons are words in the bar, not buttons: ink under the pointer, no material. */
+  .ui-header-end > .ui-button[data-shape="icon"] { width: 2.25rem; min-height: 2.25rem; }
+  .ui-header-end > .ui-button > svg, .ui-header-menu > svg, .ui-dialog-bar > .ui-button > svg { width: 1.125rem; height: 1.125rem; }
+  .ui-header-end > .ui-button[data-variant="quiet"]:where(:hover):not(:disabled) { background: transparent; box-shadow: none; }
+
+  /* Icon-only controls name themselves with an ink tooltip under the pointer or keyboard focus. */
+  .ui-header-end > :is(a, button, label) { position: relative; }
+  .ui-header-end > * > .ui-tooltip { top: calc(100% + 8px); left: 50%; translate: -50% 0; opacity: 0; visibility: hidden; transition: opacity var(--ui-duration-quick), visibility 0s linear var(--ui-duration-quick); }
+  .ui-header-end > :is(:hover, :focus-visible, :has(:focus-visible)) > .ui-tooltip { opacity: 1; visibility: visible; transition-delay: 400ms, 400ms; }
+  .ui-header-end > :last-child > .ui-tooltip { left: auto; right: 0; translate: none; }
+  .ui-header-end > :last-child > .ui-tooltip::before { left: auto; right: calc(1rem - 4px); translate: none; }
+  @media (hover: none) { .ui-header-end > * > .ui-tooltip { display: none; } }
+
+  /* Search: a quiet hairline pill that leads the end group — the glass and its shortcut, ink under the pointer. */
+  /* The round end takes a little more room than the glass's side; the gap to the first icon matches the icons' own spacing. */
+  .ui-header-search { appearance: none; display: inline-flex; align-items: center; gap: .4375rem; height: 1.875rem; margin-right: var(--ui-space-xs); padding: 0 .8125rem 0 .6875rem; border: 0; border-radius: var(--ui-radius-pill);
+    background: transparent; color: var(--ui-text-muted); box-shadow: inset 0 0 0 1px var(--ui-line-contour); font: var(--ui-weight-regular) .75rem/1 var(--font-family-sans); cursor: pointer;
+    transition: color var(--ui-duration-quick), box-shadow var(--ui-duration-quick), background-color var(--ui-duration-quick); }
+  .ui-header-search:hover { color: var(--ui-text-strong); background: var(--ui-surface-chip); box-shadow: inset 0 0 0 1px var(--ui-line-strong); }
+  .ui-header-search:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; }
+  .ui-header-search > svg { flex: none; width: 1rem; height: 1rem; }
+  .ui-header-search > .ui-kbd { min-width: 0; height: auto; padding: 0; background: none; color: inherit; box-shadow: none; font: var(--ui-weight-regular) .6875rem/1 var(--font-family-sans); letter-spacing: .04em; }
+
+  /* The compact header: the menu at the start, the brand centred, search at the end. */
+  .ui-header-menu { display: none; }
+  @media (width < 64rem) {
+    .ui-header { gap: var(--ui-space-xs); padding-inline: max(var(--ui-space-xs), env(safe-area-inset-left)) max(var(--ui-space-xs), env(safe-area-inset-right)); }
+    .ui-header-menu { display: inline-flex; }
+    .ui-header-brand { margin-inline: auto; }
+    .ui-header > :is(.ui-version, .ui-header-nav), .ui-header-end > :not(.ui-header-search) { display: none; }
+    .ui-header-end { margin-left: 0; }
+    /* On a phone search is a plain glass in a full target. */
+    .ui-header-search { justify-content: center; width: 2.375rem; height: 2.375rem; margin: 0; padding: 0; border-radius: var(--ui-radius-md); box-shadow: none; }
+    .ui-header-search:hover { background: transparent; box-shadow: none; }
+    .ui-header-search > svg { width: 1.125rem; height: 1.125rem; }
+    .ui-header-search > .ui-kbd { display: none; }
+    /* The menu and search buttons keep the brand centred between equal ends. */
+    .ui-header:not(:has(.ui-header-search)) .ui-header-end { width: 2.375rem; }
+  }
+  @media (width >= 64rem) {
+    /* The homepage's wide header leaves search out. */
+    .ui-header-search[data-compact] { display: none; }
+  }
+}

package/src/styles/docs-shell/materials.css

@@ -0,0 +1,25 @@
+/*
+ * Site utility tokens. The design system lives in styles/system (--ui-* roles, ui-* components);
+ * these @theme names only expose that ladder to Master CSS utilities used in content and on the homepage
+ * (bg-surface-canvas, b-line-contour, shadow-raised …). Values always resolve to the system roles.
+ */
+@theme {
+  --color-surface-canvas: var(--ui-surface-canvas);
+  --color-surface-shell: var(--ui-surface-tray);
+  --color-surface-ink: var(--ui-surface-ink);
+  --color-text-subtle: var(--ui-text-muted);
+  --color-line-contour: var(--ui-line-contour);
+  /* Media uses a quiet 10% black/white perimeter in the active theme. */
+  --opacity-media-ring: 0.1;
+  --color-line-media: light-dark(color(srgb 0 0 0 / var(--opacity-media-ring)), color(srgb 1 1 1 / var(--opacity-media-ring)));
+}
+
+@theme {
+  --shadow-edge: inset 0 1px 0 var(--ui-highlight);
+  --shadow-contact: 0 1px 1px -.5px var(--ui-shade-1), 0 2px 2px -1px var(--ui-shade-2), 0 4px 4px -2px var(--ui-shade-3);
+  --shadow-raised: var(--ui-elevation-rise-1);
+  --shadow-floating-contact: 0 1px 1px -.5px var(--ui-shade-1), 0 3px 3px -1.5px var(--ui-shade-2), 0 6px 6px -3px var(--ui-shade-3), 0 12px 12px -6px var(--ui-shade-4), 0 24px 24px -12px var(--ui-shade-4), 0 48px 48px -24px var(--ui-shade-5);
+  --shadow-floating: var(--ui-elevation-rise-3);
+  --shadow-pressed-contact: inset 0 1px 2px light-dark(oklch(18% 0 none / .07), oklch(0% 0 none / .5));
+  --shadow-pressed: var(--ui-elevation-sink);
+}

package/src/styles/docs-shell/menu.css

@@ -0,0 +1,19 @@
+/*
+ * The compact header's menu: a `ui-dialog` that fills the viewport below 64rem (`data-variant="sheet"`), with a bar
+ * (close, brand) and a reading-width body of navigation groups, the section's chapters and the preferences.
+ */
+@layer components {
+  html:has(.ui-dialog[data-variant="sheet"][open]) { overflow: hidden; scrollbar-gutter: stable; }
+  .ui-dialog[data-variant="sheet"] { position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; overflow-y: auto; overscroll-behavior: contain; border-radius: 0; background: var(--ui-surface-canvas); box-shadow: none; }
+  .ui-dialog[data-variant="sheet"]::backdrop { background: transparent; }
+  .ui-dialog-bar { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: 2.375rem minmax(0, 1fr) 2.375rem; align-items: center; height: calc(3.75rem + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(var(--ui-space-xs), env(safe-area-inset-right)) 0 max(var(--ui-space-xs), env(safe-area-inset-left));
+    background: color-mix(in oklab, var(--ui-surface-canvas) 82%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: inset 0 -1px 0 var(--ui-line-hair); }
+  .ui-dialog-bar > .ui-header-brand { justify-self: center; }
+  .ui-dialog[data-variant="sheet"] > .ui-dialog-body { display: grid; gap: var(--ui-space-xl); max-width: 36rem; margin-inline: auto; padding: var(--ui-space-lg) max(var(--ui-space-md), env(safe-area-inset-right)) max(var(--ui-space-2xl), env(safe-area-inset-bottom)) max(var(--ui-space-md), env(safe-area-inset-left)); }
+  .ui-dialog[data-variant="sheet"] .ui-nav-link { gap: .625rem; min-height: 2.75rem; }
+  .ui-dialog[data-variant="sheet"] .ui-nav-link > svg { flex: none; color: var(--ui-text-muted); }
+  .ui-dialog[data-variant="sheet"] .ui-nav-link > svg:last-child:not(:first-child) { margin-left: auto; }
+  .ui-dialog[data-variant="sheet"] .ui-disclosure > .ui-sidebar { padding: 0 0 var(--ui-space-md); }
+  .ui-dialog-fields { display: grid; gap: var(--ui-space-md); }
+  .ui-dialog-fields > h4 { margin: 0; padding-left: .625rem; color: var(--ui-text-muted); @apply --ui-label-type; }
+}

package/src/styles/docs-shell/not-found.css

@@ -0,0 +1,10 @@
+/* The missing page: a centred page head, the search field and a way back to the Guide. */
+@layer components {
+  .ui-not-found { display: grid; grid-template-columns: minmax(0, 1fr); place-content: center; justify-items: center; gap: var(--ui-space-md); min-height: calc(100dvh - 3.75rem); max-width: 44rem; margin-inline: auto; padding: var(--ui-space-2xl) clamp(20px, 4vw, 40px); overflow-wrap: anywhere; }
+  .ui-not-found > .ui-pagehead { justify-items: center; margin-bottom: var(--ui-space-sm); text-align: center; }
+  /* Centred short copy balances its lines, so a phrase never ends on one stranded character. */
+  .ui-not-found :is(h1, p) { text-wrap: balance; overflow-wrap: anywhere; }
+  .ui-not-found:lang(zh) :is(h1, p) { word-break: keep-all; }
+  /* The trigger arrives inside an island, so it is reached as a descendant. */
+  .ui-not-found .ui-search-trigger { width: min(100%, 20rem); }
+}

package/src/styles/docs-shell/page-content.css

@@ -0,0 +1,37 @@
+/*
+ * The page's contents (`ui-toc`, styles/system/shell.css) as the site uses them: the documentation rail (docs.css
+ * places it), the narrow-screen disclosure under the page head, and a blog post's margin contents. Sections nest
+ * their subsections; the entry being read carries `aria-current="location"`.
+ */
+@layer components {
+  .ui-toc a { overflow-wrap: anywhere; text-wrap: pretty; }
+  .ui-toc a code { font-family: var(--font-family-mono); font-size: .9em; }
+  /* A section whose subsection is being read keeps a step of ink. */
+  .ui-toc li:has(> ol [aria-current="location"]) > a { color: var(--ui-text-body); }
+  /* A long list folds: every section stays listed, only the one being read opens its subsections. */
+  .ui-toc ol[data-fold] > li:not(:has([aria-current="location"])) > ol { display: none; }
+  .ui-toc-actions > a:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; border-radius: var(--ui-radius-xs); }
+  .ui-toc-actions > a { text-decoration: none; transition: color var(--ui-duration-quick); }
+  .ui-toc-actions > a:hover { color: var(--ui-text-strong); }
+  /* The rail scrolls and clips, so its rings sit inside the entry. */
+  .ui-toc[data-rail] a:focus-visible { outline-offset: -2px; }
+  @media (pointer: coarse) {
+    .ui-toc { --toc-row-padding: .8125rem; }
+    .ui-toc a { min-height: 2.75rem; }
+    .ui-toc-actions > a { min-height: 2.75rem; }
+  }
+  @media (forced-colors: active) { .ui-toc a[aria-current="location"] { text-decoration: underline; } }
+  @media print { .ui-toc { display: none; } }
+
+  /* Narrow screens: the same contents, closed between hairlines under the page head. */
+  [data-contents-disclosure] { margin-block: 0 var(--ui-space-xl); }
+  [data-contents-disclosure] > .ui-toc { padding: 0 0 var(--ui-space-md); }
+  @media (width >= 80rem) { [data-contents-disclosure] { display: none; } }
+  /* Hidden beside the rail, the disclosure no longer closes the text before the next section, so that heading takes its own hairline again. The page head
+     already parts the page from its first section, and the blog switches its disclosure by its own width. */
+  @media (width >= 80rem) {
+    .ui-docs-article > [data-contents-disclosure]:not(:first-child, .ui-pagehead + *) + h2, .ui-docs-article > [data-contents-disclosure]:not(:first-child, .ui-pagehead + *) + a[id]:empty + h2,
+    .ui-docs-article > [data-contents-disclosure]:not(:first-child, .ui-pagehead + *) + hr + h2, .ui-docs-article > [data-contents-disclosure]:not(:first-child, .ui-pagehead + *) + hr + a[id]:empty + h2 { --section-rule: block; }
+  }
+  @media print { [data-contents-disclosure] { display: none; } }
+}

package/src/styles/docs-shell/prose.css

@@ -0,0 +1,89 @@
+/*
+ * The reading column (`ui-prose`, styles/system/prose.css) as the site's documents use it.
+ *
+ * Wide surfaces bleed past the text column by `--prose-bleed`, so prose keeps its measure while code, examples,
+ * tables, figures and media gain room. They bleed as direct children or through up to two class-less wrappers
+ * (data-only divs, sections and island hosts); demos bleed the same way from their own styles. The rest adds what
+ * Markdown and the site's content bring to the flow: media, Han typesetting, link marks and paper.
+ */
+@layer components {
+  .ui-prose { --prose-bleed: 0rem; --bleed: var(--prose-bleed); }
+  @media (width >= 52rem) { .ui-prose { --prose-bleed: 2rem; } }
+  @media print { .ui-prose { --prose-bleed: 0rem; } }
+  /* A documentation article sets running text on its reading measure; everything else takes the wide column. */
+  .ui-prose.ui-docs-article { --measure: var(--docs-text); }
+  /* A surface hangs by up to 2rem but always leaves a 1rem gutter to the window. */
+  @media (width >= 52rem) { .ui-prose.ui-docs-article { --prose-bleed: min(2rem, var(--docs-gutter) - 1rem); } }
+
+  :is(.ui-tray, .ui-code, .ui-table, .ui-params, .ui-prompt, .ui-tree, figure, img, video, iframe, picture, p:has(> img:only-child, > video:only-child, > picture:only-child, > a:only-child > img:only-child)):is(
+    .ui-prose > :is(div, section, site-island):not([class]) > *,
+    .ui-prose > :is(div, section, site-island):not([class]) > :is(div, site-island):not([class]) > *
+  ),
+  :is(figure, img, video, iframe, picture, p:has(> img:only-child, > video:only-child, > picture:only-child, > a:only-child > img:only-child)):is(.ui-prose > *) {
+    margin-inline: calc(var(--prose-bleed) * -1);
+  }
+  /* A component that wraps its surface in an unclassed element keeps the article's line of air around it, as a direct
+     child would (the margins collapse through the wrapper). */
+  :is(.ui-tray, .ui-code, .ui-table, .ui-params, .ui-prompt, .ui-tree):is(
+    .ui-prose > :is(div, section, site-island):not([class]) > *,
+    .ui-prose > :is(div, section, site-island):not([class]) > :is(div, site-island):not([class]) > *
+  ) { margin-block: var(--line); }
+  /* Document steps reach the hanging edge on the end side, so their code ends where every other surface ends. */
+  .ui-docs-article > .ui-steps[data-variant="document"] { margin-right: calc(var(--prose-bleed) * -1); }
+  /* A result shown after a step (a preview) hangs on both sides like any surface; the rail runs on into it. */
+  .ui-docs-article > .ui-steps[data-variant="document"] > :not(li) { margin: 0 0 0 calc(var(--prose-bleed) * -1); }
+  :is(img, video, iframe):is(.ui-prose > *, .ui-prose > :is(div, section, site-island):not([class]) > *) { width: calc(100% + var(--prose-bleed) * 2); max-width: none; }
+  /* A table its author wrapped in a scroll region bleeds as the region. */
+  .ui-prose > [role="region"]:has(> :is(.ui-table, table)) { margin: var(--ui-space-xl) calc(var(--prose-bleed) * -1); }
+  .ui-prose > [role="region"][tabindex]:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; border-radius: var(--ui-radius-xs); }
+
+  /* Media: whole pictures on the code panels' corner, with the quiet perimeter every image keeps — except an
+     illustration, which is a tray's stage and is told apart by its tone alone. */
+  .ui-prose :is(img, video):not(:where(.site-demo *, [data-demo-container] *)) { height: auto; }
+  .ui-prose :is(img, video):not(:where(.site-demo *, [data-demo-container] *, .document-illustration *, :focus-visible)) { outline: 1px solid var(--color-line-media); outline-offset: -1px; }
+  :is(figure, p, a, picture):is(.ui-prose > *) :is(img, video):not(:where(.site-demo *, [data-demo-container] *)), :is(img, video):is(.ui-prose > *) { display: block; width: 100%; max-width: none; border-radius: var(--ui-radius-xl); }
+  :is(a, picture):is(.ui-prose > *) { display: block; }
+
+  /* Running text */
+  .ui-prose > :is(p, ul, ol, h2, h3, h4) { overflow-wrap: anywhere; }
+  .ui-prose > :is(p, ul, ol) { text-wrap: pretty; }
+  .ui-prose :is(h4, a[id]:not([href])) { scroll-margin-top: 5rem; }
+  /* In-page links move focus to their heading; its ring stands clear of the text. */
+  .ui-prose > :is(h2, h3):focus-visible { @apply --ui-focus-ring; outline-offset: .25rem; border-radius: var(--ui-radius-xs); }
+  /* A single token (`data-token`, set by the inline code renderer) moves to the next line whole. */
+  .ui-prose > :is(p, ul, ol) code[data-token] { display: inline-block; max-width: 100%; line-height: 1.5; vertical-align: baseline; }
+  /* A run of inline code that wraps keeps its chip on both lines instead of an open cut. */
+  .ui-inline-code { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
+  .ui-prose > :is(p, ul, ol) del { text-decoration-color: var(--ui-status-danger); }
+  .ui-prose > details:not([class]) { max-width: var(--measure); margin-block: var(--ui-space-xl); border-block: 1px solid var(--ui-line-hair); }
+  .ui-prose > details:not([class]) > summary { padding: var(--ui-space-sm) 0; color: var(--ui-text-strong); font-weight: var(--ui-weight-strong); font-size: var(--ui-text-small); cursor: pointer; }
+  .ui-prose > details:not([class]) > summary:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; border-radius: var(--ui-radius-xs); }
+
+  /* Han text keeps the body's double leading; its headings keep their natural spacing. */
+  .ui-prose:lang(zh) { text-autospace: normal; }
+  .ui-prose:lang(zh) > :is(h2, h3, h4) { letter-spacing: 0; }
+
+  /* Phones have no margin for the heading anchor: it follows the heading instead. */
+  /* Narrow screens put the anchor after the heading, so the heading leaves it room inside the column. */
+  @media (width < 40rem) { .ui-prose > :is(h2, h3):has(> .ui-anchor) { max-width: calc(100% - 1.875rem); } .ui-prose > :is(h2, h3) > .ui-anchor { right: auto; left: 100%; translate: .375rem -50%; } .ui-prose > h2:has(> .ui-anchor) { --rule-end: -1.875rem; } }
+
+  .ui-prose ::selection { background: color-mix(in oklab, var(--ui-text-strong) 16%, transparent); }
+
+  @media (forced-colors: active) { .ui-prose > hr { height: 0; border-top: 1px solid CanvasText; background: none; } }
+}
+
+/* A link's mark after it (`Link` with `indicate`): an arrow for another site, a hash for this page. */
+/* The mark rides in the link's end margin out of flow: it can never wrap away from the word, or take a line of its own
+   before the punctuation that follows the link, and the link's underline does not reach it. */
+a[data-indicate] { margin-inline-end: .4em; }
+a[data-indicate]::after { position: absolute; margin-left: .06em; color: var(--ui-text-muted); font-size: .7em; line-height: 1; text-decoration: none; }
+a[data-indicate="external"]::after { content: "↗"; }
+a[data-indicate="hash"]::after { content: "#"; }
+.ui-prose :is(td, th) a[href^="#"] { white-space: nowrap; }
+
+/* Paper is white whatever the screen's scheme; an outside link keeps its destination in place of the arrow. */
+@media print {
+  :root:has(.ui-prose) > body { background-color: #fff; }
+  .ui-prose { color-scheme: light; }
+  .ui-prose > :is(p, ul, ol) a[href^="http"]::after { display: inline-block; max-width: 100%; margin: 0; color: #555; font-size: .8em; vertical-align: baseline; content: " (" attr(href) ")"; overflow-wrap: anywhere; }
+}

package/src/styles/docs-shell/segments.css

@@ -0,0 +1,13 @@
+@layer components {
+  /* Related views switch with the system's segmented control; the panels keep their own frames. */
+  .segment-views, .segment-panel { min-width: 0; }
+  .segment-views > .ui-segmented { margin-bottom: var(--ui-space-sm); }
+  .segment-panel-label { display: none; }
+  .segment-panel:focus-visible { @apply --ui-focus-ring; outline-offset: 3px; border-radius: var(--ui-radius-sm); }
+  @media (scripting: none), print {
+    .segment-views > .ui-segmented { display: none; }
+    .segment-panel[hidden] { display: block !important; }
+    .segment-panel + .segment-panel { margin-top: var(--ui-space-xl); }
+    .segment-panel-label { display: block; margin-bottom: var(--ui-space-md); color: var(--ui-text-strong); font-size: var(--ui-text-small); font-weight: var(--ui-weight-medium); }
+  }
+}

package/src/styles/docs-shell/steps.css

@@ -0,0 +1,39 @@
+/*
+ * Document steps (`StepSection`) on `ui-steps` (styles/system/data.css): a step's content holds an authored heading,
+ * its text and, in a row step, the code beside it once the column has room.
+ */
+@layer components {
+  .ui-steps[data-variant="document"] { container-type: inline-size; margin-block: var(--ui-space-xl) var(--line, var(--ui-space-xl)); }
+  .ui-steps-content, .ui-steps-text, .ui-steps-source { min-width: 0; }
+  .ui-steps-content { display: grid; align-content: start; gap: var(--ui-space-md); }
+  .ui-steps-content[data-columns] { gap: var(--ui-space-md) var(--ui-space-xl); }
+  .ui-steps-content :is(h2, h3, h4) {
+    position: static; width: auto; margin: .125rem 0 var(--ui-space-2xs);
+    color: var(--ui-text-strong); font-size: var(--ui-text-base); font-weight: var(--ui-weight-medium); line-height: 1.5rem; letter-spacing: -.006em;
+  }
+  .ui-steps-content :is(h2, h3, h4) > .ui-anchor { display: none; }
+  .ui-steps-content > :is(h2, h3, h4), .ui-steps-text > :is(h2, h3, h4) { margin-bottom: calc(var(--ui-space-md) * -1 + var(--ui-space-2xs)); }
+  .ui-steps-content :is(h2, h3, h4) + p { margin-top: 0; }
+  .ui-steps-content :is(p, li) { font-size: var(--ui-text-small); line-height: var(--ui-leading-small); }
+  .ui-steps-content :is(p, ul, ol) { margin-block: 0; }
+  .ui-steps-text { display: grid; align-content: start; gap: var(--ui-space-md); }
+  /* Several files under one step part by a small gap, never contour against contour. */
+  .ui-steps-source { display: grid; align-content: start; gap: var(--ui-space-sm); }
+  /* A note inside a step is part of its text: the icon leads a muted paragraph, without a frame of its own in the narrow column. */
+  .ui-steps-content .ui-callout { padding: 0; background: none; box-shadow: none; color: var(--ui-text-muted); }
+  /* Only reset panels placed by the step grid; nested trays own their internal spacing. */
+  :is(.ui-steps-content, .ui-steps-text, .ui-steps-source) > :is(.ui-code, .ui-tray) { margin: 0; }
+  :is(.ui-steps-content, .ui-steps-text, .ui-steps-source) > :is(.ui-code, p):first-child { margin-top: 0; }
+  :is(.ui-steps-content, .ui-steps-text, .ui-steps-source) > :is(.ui-code, p):last-child { margin-bottom: 0; }
+
+  @container (width < 20rem) {
+    .ui-steps[data-variant="document"] > li { grid-template-columns: minmax(0, 1fr); }
+    .ui-steps[data-variant="document"] > li::before, .ui-steps[data-variant="document"] > li::after { display: none; }
+  }
+
+  /* A row step reads beside its code once the list has room for both (46rem): the text on two fifths, the code on three.
+     Narrower, the code stacks under its text at full width rather than scrolling in a sliver. */
+  @container (min-width: 46rem) {
+    .ui-steps-content[data-columns] { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
+  }
+}

package/src/styles/docs-shell/syntax-theme.css

@@ -0,0 +1,18 @@
+/*
+ * Documentation code takes its syntax colors from the system's --ui-code-* roles (styles/system/tokens.css), which
+ * Shiki writes into each token's inline style. The homepage's editor figures still alias these @theme names.
+ */
+@theme static {
+  --color-code-function: var(--ui-code-function);
+  --color-code-keyword: var(--ui-code-keyword);
+  --color-code-number: var(--ui-code-number);
+  --color-code-property: var(--ui-code-property);
+  --color-code-string: var(--ui-code-string);
+  --color-code-surface: light-dark(var(--color-zinc-0), var(--color-zinc-95));
+}
+
+@layer components {
+  .shiki {
+    color: var(--ui-code-text);
+  }
+}

package/src/styles/docs-shell/theme.css

@@ -0,0 +1,68 @@
+@import './materials.css';
+@import './syntax-theme.css';
+
+@mixin --site-light { &:where(.light, .light *) { @contents; } }
+@mixin --site-dark { &:where(.dark, .dark *) { @contents; } }
+
+.light { color-scheme: light; }
+.dark { color-scheme: dark; }
+
+@theme {
+  --font-sans: "Geist", "Noto Sans TC";
+  --font-mono: "IBM Plex Mono";
+  --font-feature-sans: "ss02", "ss03", "ss04", "ss06", "ss07", "ss08";
+  --font-feature-mono: "cv01", "cv02", "cv29";
+  --radius-card: 0.75rem;
+  --radius-panel: 1rem;
+}
+
+@keyframes slide-to-right {
+    from {
+      transform: translateX(-100%);
+    }
+
+    to {
+      transform: translateX(100%);
+    }
+  }
+
+/* Color roles follow the system scheme until the theme class arrives, like the preset's own tokens. */
+@theme {
+  --stripe-image: linear-gradient(135deg, var(--color-line-subtle) 4.5%, transparent 0, transparent 50%, var(--color-line-subtle) 0, var(--color-line-subtle) 54.5%, transparent 0);
+  --tiny-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='black' fill-opacity='0.1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
+  --color-primary: light-dark(var(--color-yellow-40), var(--color-yellow-50));
+  --color-accent: light-dark(var(--color-zinc-90), var(--color-zinc-5));
+  --color-focus: light-dark(var(--color-zinc-90), var(--color-zinc-5));
+  --color-text-success: light-dark(var(--color-green-70), var(--color-green-40));
+  --color-text-danger: light-dark(var(--color-red-60), var(--color-red-30));
+  --color-info: light-dark(var(--color-cyan-40), var(--color-cyan-50));
+  --color-text-info: light-dark(var(--color-cyan-70), var(--color-cyan-40));
+}
+
+@layer defaults {
+  .light {
+    --stripe-image: linear-gradient(135deg, var(--color-line-subtle) 4.5%, transparent 0, transparent 50%, var(--color-line-subtle) 0, var(--color-line-subtle) 54.5%, transparent 0);
+    --tiny-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='black' fill-opacity='0.1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
+    --color-primary: var(--color-yellow-40);
+    --color-accent: var(--color-zinc-90);
+    --color-focus: var(--color-zinc-90);
+    --color-text-success: var(--color-green-70);
+    --color-text-danger: var(--color-red-60);
+    --color-info: var(--color-cyan-40);
+    --color-text-info: var(--color-cyan-70);
+  }
+}
+
+@layer defaults {
+  .dark {
+    --stripe-image: linear-gradient(135deg, var(--color-line-subtle) 4.5%, transparent 0, transparent 50%, var(--color-line-subtle) 0, var(--color-line-subtle) 54.5%, transparent 0);
+    --tiny-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='white' fill-opacity='0.1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
+    --color-primary: var(--color-yellow-50);
+    --color-accent: var(--color-zinc-5);
+    --color-focus: var(--color-zinc-5);
+    --color-text-success: var(--color-green-40);
+    --color-text-danger: var(--color-red-30);
+    --color-info: var(--color-cyan-50);
+    --color-text-info: var(--color-cyan-40);
+  }
+}

package/src/styles/docs-shell/wrapper.css

@@ -0,0 +1,10 @@
+@layer components {
+.app-wrapper {
+    margin-inline: auto;
+    padding-inline: 1.25rem;
+
+    @media (--sm) {
+      padding-inline: 2.5rem;
+    }
+  }
+}

package/src/styles/document-comparison.css

@@ -0,0 +1,7 @@
+/* A two-column reading comparison inside the shared table: fixed columns, long syntax wraps. */
+@layer components {
+  .document-comparison table { table-layout: fixed; }
+  .document-comparison :is(th, td) { white-space: normal; overflow-wrap: anywhere; }
+  .document-comparison :is(th, td):first-child { width: 40%; }
+  .document-comparison code { white-space: normal; }
+}

package/src/styles/documentation-illustration.css

@@ -0,0 +1,34 @@
+/* One accessible illustration: the bitmap for the current scheme fills the tray's 18px frame. */
+@layer components {
+  .document-illustration { overflow: hidden; border-radius: var(--ui-radius-xl); }
+  .document-illustration img { display: block; width: 100%; height: auto; margin: 0; }
+  .document-illustration img[data-scheme="dark"] { display: none; }
+  .ui-tray[data-illustration-expandable] .ui-tray-title { flex: 1; }
+  .document-illustration-expand { flex: none; }
+  .document-illustration-expand[data-scheme="dark"] { display: none; }
+  /* A quiet caption-level entry, independent of the demo's generated-code panel. */
+  .ui-tray > .ui-disclosure[data-variant="text-description"] { margin-top: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
+  .ui-tray > .ui-disclosure[data-variant="text-description"] > summary { width: fit-content; max-width: calc(100% - 2 * var(--ui-space-sm)); min-height: 2rem; margin-inline: var(--ui-space-sm); padding: 0; gap: var(--ui-space-2xs); color: var(--ui-text-muted); font-size: var(--ui-text-label); font-weight: var(--ui-weight-regular); }
+  .ui-tray > .ui-disclosure[data-variant="text-description"] > summary::before { width: 12px; height: 12px; }
+  .ui-tray > .ui-disclosure[data-variant="text-description"] > summary:hover { color: var(--ui-text-strong); }
+  .ui-tray > .ui-disclosure[data-variant="text-description"] > .ui-disclosure-body { margin-inline: 0; padding-top: var(--ui-space-xs); }
+  /* The text description reads at caption size inside the tray. */
+  .ui-tray-caption > ol { margin: 0; padding-left: 1.25em; }
+  .ui-tray-caption > ol > li + li { margin-top: var(--ui-space-2xs); }
+  .ui-tray-caption strong { color: var(--ui-text-body); font-weight: var(--ui-weight-strong); }
+  .dark .document-illustration img[data-scheme="light"] { display: none; }
+  .dark .document-illustration img[data-scheme="dark"] { display: block; }
+  .dark .document-illustration-expand[data-scheme="light"] { display: none; }
+  .dark .document-illustration-expand[data-scheme="dark"] { display: inline-flex; }
+  @media screen and (prefers-color-scheme: dark) {
+    :root:not(.light, .dark) .document-illustration img[data-scheme="light"] { display: none; }
+    :root:not(.light, .dark) .document-illustration img[data-scheme="dark"] { display: block; }
+    :root:not(.light, .dark) .document-illustration-expand[data-scheme="light"] { display: none; }
+    :root:not(.light, .dark) .document-illustration-expand[data-scheme="dark"] { display: inline-flex; }
+  }
+  @media print {
+    .document-illustration img[data-scheme="light"] { display: block !important; }
+    .document-illustration img[data-scheme="dark"] { display: none !important; }
+    .document-illustration-expand { display: none !important; }
+  }
+}