@master/internal-site 0.0.0-stage → 0.1.1

package/src/home/HomeFooter.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import './footer.css'
+  import IconChevronDown from '@tabler/icons-svelte-runes/icons/chevron-down'
+  import IconDeviceDesktop from '@tabler/icons-svelte-runes/icons/device-desktop'
+  import IconLanguage from '@tabler/icons-svelte-runes/icons/language'
+  import IconMoon from '@tabler/icons-svelte-runes/icons/moon'
+  import IconSun from '@tabler/icons-svelte-runes/icons/sun'
+  import LanguageSelect from '@master/internal-site/components/LanguageSelect.svelte'
+  import Link from '@master/internal-site/components/Link.svelte'
+  import ThemeSelect from '@master/internal-site/components/ThemeSelect.svelte'
+  import { useThemeMode } from '@master/internal-site/contexts/theme-mode.svelte'
+  import { getSite } from '@master/internal-site/site'
+  import type { FooterNavGroup } from '../docs-shell/components/Footer.svelte'
+
+  let { navGroups, wordmark }: { navGroups: FooterNavGroup[], wordmark: string } = $props()
+
+  /** An open closing colophon, aligned to the page's drafting rails. */
+  const { i18n, locale, t } = getSite()
+  const themeMode = useThemeMode()
+  // The preference is read on the client; the server and the first paint show the default.
+  const preference = $derived(themeMode.preference ?? 'system')
+  const ThemeIcon = $derived(preference === 'light' ? IconSun : preference === 'dark' ? IconMoon : IconDeviceDesktop)
+</script>
+
+<footer class="home-footer">
+  <div aria-hidden="true" class="home-footer-drafting"></div>
+  <div class="app-wrapper home-footer-wrap">
+    <nav aria-label={t('Footer')} class="home-footer-nav">
+      {#each navGroups as group (group.name)}
+        <div class="home-footer-group">
+          <h2 class="home-footer-heading">{t(group.name)}</h2>
+          <ul class="home-footer-links">
+            {#each group.links as link (link.href)}
+              <li>
+                <Link class="home-footer-link" href={link.href}>{t(link.name)}</Link>
+              </li>
+            {/each}
+          </ul>
+        </div>
+      {/each}
+    </nav>
+    <div class="home-footer-base">
+      <div class="home-footer-meta">
+        <span class="home-footer-copyright">© {new Date().getFullYear()} Aoyue Design LLC.</span>
+      </div>
+      <div class="home-footer-preferences">
+        <label class="home-footer-select">
+          <ThemeIcon aria-hidden="true" size={15} stroke={1.5} />
+          <span>{t(preference.charAt(0).toUpperCase() + preference.slice(1))}</span>
+          <IconChevronDown aria-hidden="true" size={13} stroke={1.75} />
+          <ThemeSelect aria-label={t('Theme')} />
+        </label>
+        <label class="home-footer-select">
+          <IconLanguage aria-hidden="true" size={15} stroke={1.5} />
+          <span>{i18n.nameOfLocale[locale] ?? locale}</span>
+          <IconChevronDown aria-hidden="true" size={13} stroke={1.75} />
+          <LanguageSelect aria-label={t('Language')} />
+        </label>
+      </div>
+    </div>
+    <p aria-hidden="true" class="home-footer-mark home-lit" data-mark={wordmark}>{wordmark}</p>
+  </div>
+</footer>

package/src/home/HomeIllustration.astro

@@ -0,0 +1,17 @@
+---
+import HomeIllustrationArt from '@master/internal-site/home/HomeIllustrationArt.svelte'
+import type { HomeIllustrationId } from '@master/internal-site/home/home-illustration.ts'
+
+export type { HomeIllustrationId } from '@master/internal-site/home/home-illustration.ts'
+
+interface Props {
+  class?: string
+  icon: HomeIllustrationId
+  size?: number
+}
+
+/** Decorative, theme-specific artwork. CSS reserves its square before the image loads. */
+const { class: className, icon, size = 80 } = Astro.props
+---
+
+<HomeIllustrationArt class={className} {icon} {size} />

package/src/home/HomeIllustrationArt.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { homeIconArtwork } from '@master/internal-site/home/icons/artwork.ts'
+  import '@master/internal-site/home/icons/artwork.css'
+  import Image from '@master/internal-site/components/Image.svelte'
+  import type { HomeIllustrationId } from '@master/internal-site/home/home-illustration.ts'
+
+  /** Decorative, theme-specific artwork. CSS reserves its square before the image loads. Islands render it directly; pages use `HomeIllustration.astro`. */
+  let { class: className, icon, size = 80 }: { class?: string, icon: HomeIllustrationId, size?: number } = $props()
+  const artwork = $derived(homeIconArtwork[icon])
+</script>
+
+<span aria-hidden="true" class={['home-illustration', className]} data-home-icon={icon}>
+  <Image alt="" class="home-icon-artwork home-illustration-light" height={size} src={artwork.light} width={size} />
+  <Image alt="" class="home-icon-artwork home-illustration-dark" height={size} src={artwork.dark} width={size} />
+</span>

package/src/home/HomeLamp.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+
+  /** Hangs the page lamp over every `.home-lit` element below the hero and in the footer; without script, CSS keeps the resting light. */
+  onMount(() => {
+    const root = document.body
+    let cleanup: (() => void) | undefined
+    let disposed = false
+    // Only a failed download falls back silently to the resting light in CSS; a fault in the lamp surfaces.
+    import('./home-lamp').then(({ mountHomeLamp }) => {
+      if (!disposed) cleanup = mountHomeLamp(root)
+    }, () => undefined)
+    return () => {
+      disposed = true
+      cleanup?.()
+    }
+  })
+</script>

package/src/home/design.css

@@ -0,0 +1,532 @@
+/*
+ * Home design language: quiet precision.
+ * Semantics and usage rules live in components/DESIGN.md; components use these names,
+ * never raw palette steps. Every surface, line and text token aliases a zinc role from the preset
+ * or the site theme (styles/docs-shell/theme.css), so the homepage and the docs share one system.
+ */
+@layer components {
+  :root:has(.home-page) {
+    /* Surfaces: the site's zinc roles. A canvas ground, a recessed shell that wraps content, raised sheets on top. */
+    --home-ground: var(--color-surface-canvas);
+    --home-tray: var(--color-surface-shell);
+    --home-sheet: var(--color-surface-raised);
+    /* A well is a recess back down to the canvas, one step below the sheet around it in either scheme. */
+    --home-well: var(--color-surface-canvas);
+    --home-float: var(--color-surface-floating);
+    --home-ink: var(--color-surface-ink);
+
+    /* Lines: hairlines separate, rules divide, strong rules mark the selected state. */
+    --home-hairline: var(--color-line-contour);
+    --home-rule: var(--color-line-divider);
+    --home-rule-strong: color-mix(in oklab, var(--color-line-control) 55%, transparent);
+    --home-guide: var(--color-line-subtle);
+
+    /* Text: display and data in full strength, prose quieter, annotations faint. */
+    --home-text: var(--color-text-strong);
+    --home-text-body: var(--color-text-body);
+    --home-text-quiet: var(--color-text-muted);
+    /* Faint still reads at 4.5:1 on the ground and on sheets: it labels figures, it never hides them. */
+    --home-text-faint: color-mix(in oklab, var(--color-text-muted) 72%, var(--color-text-subtle));
+    --home-text-inverse: var(--color-text-inverse);
+
+    /* Signal: the one accent, reserved for a live state and the path a change takes. It is the logo's gold
+       (amber, hue ≈ 80), the same light as the hero silk, so the page carries one brand color. */
+    --home-signal: var(--color-amber-40);
+    --home-signal-ink: var(--color-amber-95);
+    --home-signal-glow: color-mix(in oklab, var(--color-amber-40) 32%, transparent);
+    --home-ok: light-dark(oklch(0.53 0.12 150), oklch(0.76 0.12 150));
+    --home-warn: light-dark(oklch(0.62 0.13 65), oklch(0.8 0.12 75));
+    --home-error: light-dark(oklch(0.56 0.17 25), oklch(0.72 0.15 25));
+    --home-info: light-dark(oklch(0.55 0.1 250), oklch(0.76 0.09 250));
+
+    /* Code shares the documentation palette, including the hand-rendered editor figures. */
+    --home-code-tag: var(--color-code-function);
+    --home-code-attr: var(--color-code-property);
+    --home-code-string: var(--color-code-string);
+    --home-code-property: var(--color-code-property);
+    --home-code-selector: var(--color-code-function);
+
+    /* Light: a single source above. Raised surfaces catch a 1px line of it on their top edge and sit on a contact shadow. */
+    --home-edge: var(--shadow-edge);
+    --home-contact: var(--shadow-contact);
+    --home-shade-near: light-dark(oklch(18% 0 none / 0.04), oklch(0% 0 none / 0.4));
+    --home-shade-far: light-dark(oklch(18% 0 none / 0.07), oklch(0% 0 none / 0.55));
+    --home-elevation-1: var(--home-edge), var(--home-contact);
+    --home-elevation-2: var(--home-edge), var(--home-contact), 0 10px 28px -8px light-dark(oklch(18% 0 none / 0.05), oklch(0% 0 none / 0.45));
+    --home-elevation-3: var(--home-edge), var(--home-contact), 0 24px 60px -28px light-dark(oklch(18% 0 none / 0.1), oklch(0% 0 none / 0.7));
+    /* A well is cut in with exactly one hairline; no inner blur thickens its top edge. */
+    --home-groove: inset 0 0 0 1px var(--color-line-contour);
+    --home-pressed: var(--shadow-pressed);
+    /* The same light caught on a top edge: on a sheet or glass, and on an ink surface. */
+    --home-highlight: light-dark(rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.06));
+    --home-highlight-ink: rgb(255 255 255 / 0.15);
+
+    /* Shape: a 12px inset everywhere, and radii that nest concentrically: outer = inner + inset. */
+    --home-gap: 0.75rem;
+    --home-radius-chip: 0.375rem;
+    --home-radius-well: 0.5rem;
+    --home-radius-sheet: calc(var(--home-radius-well) + var(--home-gap));
+    --home-radius-tray: calc(var(--home-radius-sheet) + var(--home-gap));
+    --home-radius-stage: var(--home-radius-tray);
+    --home-radius-control: 0.625rem;
+
+    /* Motion: one easing family; interaction is quick, explanation is calm, ambience is slow. */
+    --home-ease: cubic-bezier(0.22, 1, 0.36, 1);
+    --home-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
+    --home-quick: 160ms;
+    --home-base: 280ms;
+    --home-slow: 640ms;
+
+    /* Type: one scale. Display and section titles scale with the viewport; everything else is fixed. */
+    --home-display: clamp(2.75rem, 1.2rem + 5.4vw, 5.75rem);
+    --home-title: clamp(2.25rem, 1.55rem + 2.1vw, 3.5rem);
+    --home-lead: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
+    --home-card-title: 1.5rem;
+    --home-body: 1rem;
+    --home-caption: 0.8125rem;
+    --home-label: 0.6875rem;
+    --home-code: 0.8125rem;
+    --home-mono: var(--font-family-mono);
+
+    /* Rhythm: sections breathe the same amount, and every figure sits the same distance below its header. */
+    --home-section-space: clamp(6rem, 3rem + 7.5vw, 10.5rem);
+    --home-header-space: clamp(3rem, 2rem + 2.6vw, 5rem);
+
+    /* Depth for the 3D stages. */
+    --home-perspective: 1800px;
+
+    /*
+     * Drafting material: the site's own diagonal stripe tile (`--stripe-image`, 6% ink) as a quiet hatch
+     * for margins, reserved space and inactive surfaces, and the guide color for hairlines and marks.
+     */
+    --home-hatch: var(--stripe-image);
+    --home-hatch-size: 8px;
+    --home-mark: var(--home-rule-strong);
+
+    /*
+     * Stone: the hero's material, carried down the page wherever ink used to be. Polished obsidian in
+     * light mode, moonstone in dark mode. Outside the hero there is no silk to mirror, so the warm
+     * reflection on the lower bevel stays faint until a figure marks the stone live.
+     */
+    --stone-top: light-dark(oklch(0.31 0.004 270), oklch(0.965 0.006 88));
+    --stone-mid: light-dark(oklch(0.17 0.003 270), oklch(0.91 0.012 85));
+    --stone-bottom: light-dark(oklch(0.08 0.002 270), oklch(0.81 0.022 80));
+    /* Small stones (tour controls, handles, source chips) are a step quieter in moonstone, so only the
+       primary action and the engine stay the brightest things in a dark figure. */
+    --stone-quiet-top: light-dark(oklch(0.31 0.004 270), oklch(0.79 0.008 88));
+    --stone-quiet-mid: light-dark(oklch(0.17 0.003 270), oklch(0.71 0.012 86));
+    --stone-quiet-bottom: light-dark(oklch(0.08 0.002 270), oklch(0.62 0.02 82));
+    --stone-text: light-dark(oklch(0.97 0.008 85), oklch(0.2 0.012 70));
+    --stone-lip: light-dark(rgb(255 255 255 / 0.28), rgb(255 255 255 / 0.95));
+    --stone-rim: light-dark(rgb(255 255 255 / 0.4), rgb(255 255 255 / 1));
+    --stone-gold: light-dark(oklch(0.86 0.1 82), oklch(0.74 0.12 78));
+    --stone-mirror: light-dark(oklch(0.86 0.1 82 / 0.24), oklch(0.74 0.12 78 / 0.4));
+    --stone-sheen: light-dark(rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.9));
+    --stone-glare: light-dark(rgb(255 255 255 / 0.32), rgb(255 255 255 / 1));
+    --stone-adularescence: light-dark(transparent, oklch(0.92 0.025 240 / 0.22));
+    --stone-glint: light-dark(rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.85));
+    --stone-contact: light-dark(rgb(0 0 0 / 0.26), rgb(0 0 0 / 0.5));
+    --stone-cast: light-dark(oklch(0.25 0.02 70 / 0.32), oklch(0.02 0.005 60 / 0.65));
+    --stone-press: light-dark(rgb(0 0 0 / 0.7), oklch(0.55 0.05 80 / 0.5));
+    /* Cut type: the same stone as glyphs. A face that darkens down each line, a highlight where the lamp
+       falls and, on moonstone, a cool sheen across from it. */
+    --stone-type-top: light-dark(oklch(0.38 0.004 270), oklch(0.99 0.004 90));
+    /* A faint reflection across the upper part of each line, the way polished stone holds the sky. */
+    --stone-type-band: light-dark(oklch(0.46 0.006 80), oklch(1 0.002 90));
+    --stone-type-mid: light-dark(oklch(0.2 0.003 270), oklch(0.93 0.012 86));
+    --stone-type-bottom: light-dark(oklch(0.09 0.002 270), oklch(0.8 0.028 82));
+    --stone-type-sheen: light-dark(oklch(0.72 0.006 80 / 0.8), oklch(0.93 0.07 84));
+    --stone-type-adularescence: light-dark(transparent, oklch(0.9 0.03 240 / 0.24));
+    /* As a title arrives, one glint crosses it; on moonstone it is a wave of the cool sheen. */
+    --stone-type-glint: light-dark(oklch(0.6 0.008 80 / 0.95), oklch(0.92 0.07 250 / 0.95));
+    --stone-type-cast: light-dark(oklch(0.3 0.03 70 / 0.1), oklch(0 0 none / 0.55));
+
+    /* Silk: the hero's gold as a material for the few things below it that are made of it. */
+    --silk-shadow: light-dark(oklch(0.7 0.13 72), oklch(0.4 0.085 68));
+    --silk-body: light-dark(oklch(0.83 0.135 80), oklch(0.66 0.13 78));
+    --silk-sheen: light-dark(oklch(0.97 0.05 92), oklch(0.93 0.085 90));
+  }
+
+  /*
+   * The lamp. One light hangs above the page, a little left of center, and stays with the viewer; a
+   * pointer carries it lower. `home-lamp.ts` hands it to every lit element of the homepage and its
+   * footer as these properties, relative to the element. The defaults hang it above-left, so CSS alone
+   * still lights the stone, including stone that another lamp (the hero's, the close's) lights.
+   */
+  :where(.home-lit, .home-stone, .home-stone-type) {
+    --lit-x: 30%;
+    --lit-y: -160%;
+    --lit-angle: -20deg;
+    --cast-x: 1px;
+    --cast-y: 4px;
+    --lit-near: 0;
+  }
+
+  /*
+   * A stone surface: a bevelled face that darkens toward its base, a broad sheen from the lamp, a hot
+   * spot when the lamp comes close, a rim that catches the lamp on its near side and the warm floor on
+   * its far side, and a shadow cast away from the lamp. Every layer is a background, so the element
+   * keeps its own pseudo-elements; a component that draws its own marks on the face stacks them above
+   * `--stone-face` and keeps `--stone-edge` last.
+   */
+  .home-stone {
+    --stone-face:
+      radial-gradient(ellipse 30% 50% at clamp(12%, var(--lit-x), 88%) clamp(16%, var(--lit-y), 40%), color-mix(in oklab, var(--stone-glare) calc(var(--lit-near) * 100%), transparent), transparent) padding-box,
+      radial-gradient(ellipse 90% 75% at var(--lit-x) -10%, var(--stone-sheen), transparent 70%) padding-box,
+      radial-gradient(ellipse 60% 120% at calc(100% - var(--lit-x) * 0.6) 80%, var(--stone-adularescence), transparent 75%) padding-box,
+      linear-gradient(180deg, var(--stone-top), var(--stone-mid) 52%, var(--stone-bottom)) padding-box;
+    --stone-edge:
+      linear-gradient(var(--lit-angle), var(--stone-mirror), transparent 40%, transparent 58%, var(--stone-rim)) border-box,
+      var(--stone-mid) border-box;
+    --stone-shadow:
+      inset 0 1px 0 var(--stone-lip),
+      inset 0 -8px 12px -10px var(--stone-mirror),
+      0 1px 1px var(--stone-contact),
+      var(--cast-x) var(--cast-y) 8px -3px var(--stone-cast),
+      calc(var(--cast-x) * 2.5) calc(var(--cast-y) * 2.5) 22px -8px var(--stone-cast);
+    border: 1px solid transparent;
+    color: var(--stone-text);
+    background: var(--stone-face), var(--stone-edge);
+    box-shadow: var(--stone-shadow);
+  }
+
+  .home-stone-quiet {
+    --stone-top: var(--stone-quiet-top);
+    --stone-mid: var(--stone-quiet-mid);
+    --stone-bottom: var(--stone-quiet-bottom);
+  }
+
+  /* A stone control: a glint crosses its polished face as the pointer arrives, and pressing trades its
+     cast shadow for an inner one. */
+  .home-stone-button {
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    cursor: pointer;
+
+    &::after {
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      border-radius: inherit;
+      background: linear-gradient(105deg, transparent 38%, var(--stone-glint) 50%, transparent 62%) 100% 0 / 250% 100% no-repeat;
+      pointer-events: none;
+      content: '';
+    }
+
+    /* Moonstone answers the pointer with its sheen rather than a white glare, as on the hero. */
+    &:is(:hover, :focus-visible) {
+      --stone-adularescence: light-dark(transparent, oklch(0.9 0.035 240 / 0.45));
+    }
+
+    &:is(:hover, :focus-visible)::after {
+      background-position: 0 0;
+      transition: background-position 900ms var(--home-ease);
+    }
+
+    /* Only the press eases; at rest the shadow follows the lamp frame by frame. */
+    &:active {
+      transition: box-shadow var(--home-quick) var(--home-ease);
+      box-shadow:
+        inset 0 2px 6px var(--stone-press),
+        inset 0 -1px 0 var(--stone-mirror),
+        0 1px 1px var(--stone-contact),
+        calc(var(--cast-x) * 0.4) calc(var(--cast-y) * 0.4) 6px -3px var(--stone-cast);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--home-ink);
+      outline-offset: 2px;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  /*
+   * A frame's rim catches the same lamp: brighter on the side that faces it, a touch darker on the far
+   * side, and a warm glint that slides along the edge as the pointer carries the lamp near. It is an
+   * empty child of the frame, so moving the lamp never restyles the figure inside.
+   */
+  .home-edge-light {
+    --edge-near: light-dark(rgb(255 255 255 / 0), rgb(255 255 255 / 0.13));
+    --edge-far: light-dark(oklch(0.2 0 none / 0.05), rgb(0 0 0 / 0.3));
+    --edge-glint: light-dark(oklch(0.78 0.09 80 / 0.75), oklch(0.9 0.07 85 / 0.6));
+    position: absolute;
+    inset: 0;
+    z-index: 30;
+    padding: 1px;
+    border-radius: inherit;
+    background:
+      radial-gradient(circle 12rem at var(--lit-x) var(--lit-y), color-mix(in oklab, var(--edge-glint) calc(var(--lit-near) * 100%), transparent), transparent),
+      linear-gradient(var(--lit-angle), var(--edge-far), transparent 32%, transparent 64%, var(--edge-near));
+    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
+    pointer-events: none;
+  }
+
+  /*
+   * Cut type: section titles share the hero's stone, lit by the same lamp. Obsidian takes the lamp as a
+   * small reflection with a solid core, and a narrow glint that keeps every glyph at least 3:1 against
+   * the light ground; moonstone warms and glints more broadly. Once a title reaches the reading area,
+   * `home-lamp.ts` marks it and the glint crosses it once.
+   */
+  .home-stone-type {
+    --stone-type-sheen-size: 6rem 2.25rem;
+    --stone-type-sheen-core: 20%;
+    --stone-type-sheen-fade: 60%;
+    --stone-type-glint-width: 1.25%;
+    /* The glint starts and ends just outside the title, so its whole sweep is spent on the type. */
+    --stone-type-glint-from: 77%;
+    --stone-type-glint-to: 23%;
+    --stone-type-band-at: 27%;
+    background-image:
+      linear-gradient(105deg, transparent calc(50% - var(--stone-type-glint-width)), color-mix(in oklab, var(--stone-type-glint) 45%, transparent) calc(50% - var(--stone-type-glint-width) * 0.45), var(--stone-type-glint) 50%, color-mix(in oklab, var(--stone-type-glint) 45%, transparent) calc(50% + var(--stone-type-glint-width) * 0.45), transparent calc(50% + var(--stone-type-glint-width))),
+      radial-gradient(ellipse var(--stone-type-sheen-size) at var(--lit-x) clamp(12%, var(--lit-y), 88%), color-mix(in oklab, var(--stone-type-sheen) calc(var(--lit-near) * 100%), transparent) var(--stone-type-sheen-core), transparent var(--stone-type-sheen-fade)),
+      radial-gradient(ellipse 70% 140% at calc(100% - var(--lit-x) * 0.5) 75%, var(--stone-type-adularescence), transparent 70%),
+      linear-gradient(180deg, var(--stone-type-top) 10%, var(--stone-type-band) var(--stone-type-band-at), var(--stone-type-mid) calc(var(--stone-type-band-at) + 13%), var(--stone-type-mid) 58%, var(--stone-type-bottom) 90%);
+    background-size: 300% 100%, 100% 100%, 100% 100%, 100% 1lh;
+    background-repeat: no-repeat, no-repeat, no-repeat, repeat-y;
+    /* The glint rests past the right end once it has crossed. */
+    background-position: 0 0, 0 0, 0 0, 0 0;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    filter: drop-shadow(calc(var(--cast-x) * 0.1) calc(var(--cast-y) * 0.14) 3px var(--stone-type-cast));
+
+    .dark & {
+      --stone-type-sheen-size: 13rem 5rem;
+      --stone-type-sheen-core: 0%;
+      --stone-type-sheen-fade: 75%;
+      --stone-type-glint-width: 4%;
+      --stone-type-glint-from: 85%;
+      --stone-type-glint-to: 15%;
+    }
+
+    /* Han glyphs fill the em box, so their reflection sits higher and softer, above the upper strokes. */
+    &:lang(zh) {
+      --stone-type-band-at: 12%;
+      --stone-type-band: light-dark(oklch(0.34 0.005 80), oklch(0.97 0.004 90));
+    }
+
+    /* A reader who asks for more contrast keeps the cut stone but no light that pales the glyphs. */
+    @media (prefers-contrast: more) {
+      --stone-type-glint: transparent;
+      --stone-type-sheen: transparent;
+    }
+
+    /* On phones and 1x screens a blurred shadow only softens the glyphs. */
+    @media (width < 48rem), (resolution < 2dppx) {
+      filter: none;
+    }
+  }
+
+  @media (forced-colors: active), print {
+    /* Doubled so it outranks a component that stacks its own marks on the stone. */
+    .home-stone.home-stone {
+      border-color: currentColor;
+      color: CanvasText;
+      background: Canvas;
+      box-shadow: none;
+    }
+
+    .home-edge-light,
+    .home-stone-button::after {
+      display: none;
+    }
+
+    .home-stone-type {
+      background: none;
+      -webkit-text-fill-color: currentColor;
+      filter: none;
+    }
+  }
+
+  /* The page sits on the neutral ground, and so does the canvas around it, so the footer and overscroll match. */
+  :root:has(.home-page) {
+    background-color: var(--home-ground);
+  }
+
+  .home-page {
+    background-color: var(--home-ground);
+  }
+
+  /* Surface primitives. */
+  .home-sheet {
+    border-radius: var(--home-radius-sheet);
+    outline: 1px solid var(--home-hairline);
+    background-color: var(--home-sheet);
+    box-shadow: var(--home-elevation-1);
+  }
+
+  .home-float {
+    border-radius: var(--home-radius-well);
+    outline: 1px solid var(--home-hairline);
+    background-color: var(--home-float);
+    box-shadow: var(--home-elevation-2);
+  }
+
+  /* Glass is for things that float over the matrix: a thin translucent surface with a bright top rim. Main content stays solid. */
+  /* A barely-there dark contour defines the edge, the inner light sits on top and left, and the falloff spreads wide and soft. */
+  .home-glass {
+    border: 1px solid light-dark(oklch(24% 0.002 265 / 0.05), rgb(255 255 255 / 0.08));
+    border-bottom-color: light-dark(oklch(24% 0.002 265 / 0.07), rgb(0 0 0 / 0.4));
+    background-color: light-dark(rgb(252 252 252 / 0.6), rgb(30 30 30 / 0.55));
+    box-shadow:
+      inset 0 1px 0 light-dark(rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.05)),
+      inset 1px 0 0 light-dark(rgb(255 255 255 / 0.35), transparent),
+      0 0.5px 1px light-dark(oklch(18% 0 none / 0.02), rgb(0 0 0 / 0.3)),
+      0 3px 8px -2px light-dark(oklch(18% 0 none / 0.02), rgb(0 0 0 / 0.25)),
+      0 12px 32px -8px light-dark(oklch(18% 0 none / 0.035), rgb(0 0 0 / 0.35));
+    backdrop-filter: blur(10px) saturate(1.1);
+  }
+
+  /* Status tones for icons and short labels. */
+  .home-tone-ok {
+    color: var(--home-ok);
+  }
+
+  .home-tone-warn {
+    color: var(--home-warn);
+  }
+
+  .home-tone-error {
+    color: var(--home-error);
+  }
+
+  .home-tone-info {
+    color: var(--home-info);
+  }
+
+  /*
+   * Han characters already sit on square bodies; display tracking that tightens Latin would make them touch.
+   * Titles break only at spaces and punctuation so a word never splits, unless a line would overflow.
+   */
+  .home-page:lang(zh) :is(.home-display, .home-section-heading, .home-cta-title) {
+    letter-spacing: -0.015em;
+    word-break: keep-all;
+    overflow-wrap: anywhere;
+  }
+
+  .home-page:lang(zh) .home-section-heading {
+    max-width: 16em;
+  }
+
+  /*
+   * Han prose breaks between any two characters, so pretty wrapping still leaves a last line of two characters.
+   * Short leads and card descriptions balance their lines instead.
+   */
+  .home-page:lang(zh) :is(.home-section-body, .home-bento-card-body) {
+    text-wrap: balance;
+  }
+
+  /* Where a two-line title runs on as one sentence, Han text keeps the break between its lines but not the space. */
+  .home-page:lang(zh) .home-title-gap {
+    font-size: 0;
+  }
+
+  .home-page ::selection {
+    color: inherit;
+    background-color: color-mix(in oklab, var(--home-signal) 42%, transparent);
+  }
+
+  /* Labels: how the page names its parts. One eyebrow per section, one annotation style inside figures. */
+
+  /* Section eyebrow: an index, a short rule that draws in as the section arrives, and a plain name. */
+  .home-eyebrow {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    margin: 0;
+    font-family: var(--home-mono);
+    font-size: var(--home-label);
+    line-height: 1;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--home-text-body);
+
+    &::before {
+      order: 1;
+      width: 1.5rem;
+      height: 1px;
+      background-color: var(--home-rule-strong);
+      transform-origin: left;
+      content: '';
+    }
+
+    & > :not(.home-eyebrow-index) {
+      order: 2;
+    }
+  }
+
+  .home-eyebrow-index {
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.04em;
+    color: var(--home-text-faint);
+  }
+
+  /* Status marker: a dot that names a state; live pulses, the rest stay still. */
+  .home-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.75rem;
+    color: var(--home-text-quiet);
+
+    &::before {
+      width: 0.375rem;
+      height: 0.375rem;
+      border-radius: calc(infinity * 1px);
+      background-color: currentColor;
+      content: '';
+    }
+  }
+
+  .home-status-live::before {
+    background-color: var(--home-signal);
+    box-shadow: 0 0 0 3px var(--home-signal-glow);
+  }
+
+  /* Annotation marker: a mono caption that labels part of a figure. */
+  .home-annotation {
+    margin: 0;
+    font-family: var(--home-mono);
+    font-size: var(--home-label);
+    line-height: 1.4;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--home-text-faint);
+  }
+
+  @media (--motion-safe) {
+    @supports (animation-timeline: view()) {
+      .home-eyebrow::before {
+        animation-name: home-marker-rule;
+        animation-timing-function: linear;
+        animation-fill-mode: both;
+        animation-timeline: view();
+        animation-range: entry 20% entry 80%;
+      }
+    }
+  }
+}
+
+@keyframes home-marker-rule {
+  from {
+    scale: 0 1;
+  }
+}
+
+@keyframes home-stone-glint {
+  from {
+    background-position: var(--stone-type-glint-from) 0, 0 0, 0 0, 0 0;
+  }
+
+  to {
+    background-position: var(--stone-type-glint-to) 0, 0 0, 0 0, 0 0;
+  }
+}