npm - @orbytes/astrolab - Versions diffs - 0.3.0 → 0.4.0-next.2 - Mend

@orbytes/astrolab 0.3.0 → 0.4.0-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (82) hide show

package/README.md +261 -116
package/bin/pin-gallery.mjs +53 -19
package/defaults.mjs +72 -20
package/dist/core/virtual-module/virtual-routes.js +12 -1
package/docs/PIN-CONTRACT.md +84 -10
package/docs/PIN.md +117 -37
package/index.d.ts +41 -23
package/index.mjs +46 -91
package/package.json +7 -3
package/src/Home.astro +166 -264
package/src/LabHead.astro +37 -1047
package/src/chrome/ActionsMenu.astro +97 -0
package/src/chrome/ComponentCard.astro +76 -0
package/src/chrome/Icon.astro +21 -0
package/src/chrome/LICENSE-icons +43 -0
package/src/chrome/Nav.astro +131 -0
package/src/chrome/Panel.astro +117 -0
package/src/chrome/Properties.astro +104 -0
package/src/chrome/SectionsTree.astro +128 -0
package/src/chrome/Shell.astro +120 -0
package/src/chrome/Sprite.astro +23 -0
package/src/chrome/StoryView.astro +192 -0
package/src/chrome/Tree.astro +86 -0
package/src/chrome/ViewportControls.astro +173 -0
package/src/chrome/ViewportStage.astro +55 -0
package/src/chrome/fonts/OFL.txt +93 -0
package/src/chrome/fonts/inter-latin-wght-normal.woff2 +0 -0
package/src/chrome/icons.ts +68 -0
package/src/chrome/marks-client.ts +75 -0
package/src/chrome/model.ts +156 -0
package/src/chrome/navbar-client.ts +324 -0
package/src/chrome/params-client.ts +434 -0
package/src/chrome/pins-data.ts +63 -0
package/src/chrome/shell-client.ts +468 -0
package/src/chrome/site-data.ts +230 -0
package/src/chrome/trees.ts +257 -0
package/src/chrome/viewport-client.ts +405 -0
package/src/chrome/views/Assets.astro +125 -0
package/src/chrome/views/Pages.astro +214 -0
package/src/chrome/views/Placeholder.astro +37 -0
package/src/chrome/views/Tasks.astro +79 -0
package/src/core/LICENSE-astrobook +21 -0
package/src/core/lib/components/home.astro +4 -2
package/src/core/lib/pages/story.astro +12 -10
package/src/core/utils/kebab-case.ts +2 -2
package/src/core/virtual-module/virtual-routes.ts +20 -4
package/src/pin/board.mjs +414 -190
package/src/pin/index.mjs +67 -22
package/src/pin/tickets.mjs +6 -5
package/src/pin/toolbar.js +82 -4
package/src/shell/Browse.astro +131 -353
package/src/shell/Viewport.astro +22 -1315
package/src/shell/lab-index.ts +28 -18
package/src/shell/lab-params.ts +113 -6
package/src/shell/live-files.mjs +212 -10
package/src/shell/marks.mjs +17 -41
package/src/ui/components/app.astro +5 -7
package/src/ui/components/preview-layout.astro +17 -0
package/src/ui/components/theme-script.astro +17 -5
package/src/ui/lab.css +3754 -371
package/virtual.d.ts +13 -4
package/bin/lab-cull.mjs +0 -401
package/src/shell/CardGrid.astro +0 -297
package/src/ui/components/build-path.ts +0 -13
package/src/ui/components/build-tree.ts +0 -108
package/src/ui/components/collapse-duration.ts +0 -28
package/src/ui/components/compress-terms.ts +0 -10
package/src/ui/components/dashboard-layout.astro +0 -39
package/src/ui/components/home.astro +0 -65
package/src/ui/components/layout.astro +0 -110
package/src/ui/components/sidebar-button-fullscreen.astro +0 -38
package/src/ui/components/sidebar-button-search.astro +0 -23
package/src/ui/components/sidebar-button-theme.astro +0 -9
package/src/ui/components/sidebar-button.astro +0 -24
package/src/ui/components/sidebar-resize-handle.astro +0 -74
package/src/ui/components/sidebar-search-panel.astro +0 -41
package/src/ui/components/sidebar-search-script.ts +0 -103
package/src/ui/components/sidebar-title.astro +0 -17
package/src/ui/components/sidebar-tree-node.astro +0 -143
package/src/ui/components/sidebar-tree.astro +0 -84
package/src/ui/components/sidebar.astro +0 -29
package/src/ui/components/theme-toggle.astro +0 -63

package/src/ui/lab.css CHANGED Viewed

@@ -9,541 +9,3924 @@
    So the line runs between CHROME and PREVIEW, and it runs exactly there:
-     CHROME   the lab's own furniture — layout, sidebar, search, toolbar, the home page, the
-              folder pages, the viewport configurator. Styled HERE and nowhere else. It never
-              receives the consumer's `css` list and never receives the consumer's `head`.
-     PREVIEW  the story itself (/lab/stories/<id>) and the story rendered inside the dashboard.
-              It receives the consumer's `css` list and `head` — that is how the site's tokens
-              and fonts arrive, and seeing a component as the real site renders it is the whole
-              point of the lab.
-   ISOLATION RUNS BOTH WAYS, and that is why this file looks the way it does:
-     1. EVERY TOKEN IS `--lab-*`. The consumer owns `--color-background`, `--font-body`,
-        `--radius-pill` and the rest; a lab that read those names would wear the client's brand,
-        which is the exact thing the ruling forbids. Nothing here reads a name the consumer could
-        also define, so the two palettes cannot collide even where both stylesheets are in one
-        document (the dashboard, which must carry both).
-     2. NOTHING HERE IS A BARE ELEMENT SELECTOR that could reach a story. Every rule is anchored
-        on a chrome class, a chrome id, or a chrome custom element. `html`/`body` carry the
-        `.lab-shell` class rather than being styled as elements, and the chrome's font, colour
-        and font-size are set on the chrome's own boxes — never inherited down from `body`, which
-        on a dashboard page is shared with the preview.
-     3. NO CASCADE LAYER. The previous build put the lab's token fallbacks in
-        `@layer orbytes-lab-fallback` so the consumer would win; that was the leak, expressed as
-        a policy. The lab wins now.
-   WHAT THIS FILE IS NOT. This is the FUNCTION pass, not the design pass: plain, legible,
-   working, dark mode intact. Semantic class names (`.lab-sidebar`, `.lab-tree-row`) rather than
-   a hand-rolled utility set, precisely so the next pass is a restyle and not a rewrite. It
-   replaces the UnoCSS atomic classes the upstream `@astrobook/ui` was built from — this package
-   ships source and has no build step, so Uno was never an option here.
-   Typography ships with the package: a system font stack, no webfont, no build step, no
-   consumer dependency.
+     CHROME   the lab's own furniture — both sidebar levels, the navbar, the home page, the folder,
+              page, asset and task views, the viewport stage. Styled HERE and nowhere else. It
+              never receives the consumer's `css` list and never receives the consumer's `head`.
+     PREVIEW  the story (/lab/stories/<id>) and the site's own pages, which the chrome only ever
+              shows inside an <iframe>. They receive the consumer's CSS and head — that is how the
+              site's tokens and fonts arrive, and seeing a component as the real site renders it is
+              the whole point of the lab.
+   THE REDESIGN (2026-09-24) MADE THE LINE PHYSICAL. Until then the dashboard rendered the story
+   INLINE, beside the chrome, so one document had to carry both stylesheets and this file had to
+   survive sharing a <body> with the site. Every preview is now an <iframe> — its own document —
+   so no chrome page carries a byte of consumer CSS, and nothing here can reach a story even by
+   accident. The rules below still hold, because they are what keeps that true if an inline
+   render ever comes back:
+     1. EVERY TOKEN IS `--lab-*`. The consumer owns `--color-background`, `--font-body` and the
+        rest; a lab that read those names would wear the client's brand.
+     2. NOTHING HERE IS A BARE ELEMENT SELECTOR. Every rule is anchored on a chrome class, id or
+        attribute. `html`/`body` carry the `.lab-shell` class rather than being styled as elements.
+     3. NO CASCADE LAYER. A fallback layer that lets the consumer win was the leak, written as a
+        policy; it is deleted and stays deleted.
+   THE LOOK is the Figma file "Astrolab", frame `Desktop` (20036:40696): the Untitled UI neutral
+   ramp, Inter at 14/20, 6–12px radii, a brand violet for "you are here" and a lime footer. Every
+   value below that came from a Figma variable says so in its name's comment; the dark ramp is not
+   in the file and is derived from the same neutral scale.
+   Typography ships with the package: Inter's variable latin subset (./../chrome/fonts, SIL OFL),
+   48 KB, served by the consumer's own dev server — nothing is fetched from the network.
    ============================================================================================= */
+@font-face {
+  font-family: "Lab Inter";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("../chrome/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
 /* ---------------------------------------------------------------------------------------------
    Tokens. Light is the default; `.dark` on <html> is set by the theme script before paint
-   (src/ui/components/theme-script.astro) and is the hook LabHead's own styles key off too.
+   (./components/theme-script.astro).
    --------------------------------------------------------------------------------------------- */
 :root {
-  --lab-font-body:
-    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji";
+  --lab-font: "Lab Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   --lab-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-  /* The chrome has one face today. The name exists so phase 2 can split display from body
-     without touching every rule that asks for it. */
-  --lab-font-heading: var(--lab-font-body);
-  --lab-color-bg: #ffffff;
-  --lab-color-bg-sunken: #f9fafb;
-  --lab-color-surface: #f4f4f5;
-  --lab-color-surface-raised: #ffffff;
-  --lab-color-border: #e4e4e7;
-  --lab-color-border-strong: #d4d4d8;
-  --lab-color-text: #3f3f46;
-  --lab-color-text-strong: #18181b;
-  --lab-color-text-muted: #71717a;
-  --lab-color-text-faint: #a1a1aa;
-  --lab-color-accent: #2563eb;
-  --lab-color-accent-text: #ffffff;
-  /* The accent that reads on the INVERTED active tree row, where the ground flips to the other
-     theme's. LabHead.astro's live pill is the only thing that needs it. */
-  --lab-color-accent-inverse: #60a5fa;
-  --lab-color-focus: #18181b;
-  /* The inverted active row in the tree. */
-  --lab-color-active-bg: #27272a;
-  --lab-color-active-text: #ffffff;
-  --lab-radius: 4px;
-  --lab-radius-pill: 100px;
-  --lab-radius-square: 0;
-  --lab-transition: 150ms ease;
-  --lab-sidebar-width: attr(data-sidebar-width px, 300px);
+  --lab-bg-primary: #ffffff; /* Colors/Background/bg-primary */
+  --lab-bg-secondary: #fafafa; /* Colors/Background/bg-secondary */
+  --lab-bg-hover: #f5f5f5;
+  --lab-bg-sunken: #f0f0f0;
+  --lab-bg-active: #f9f5ff; /* Component colors/Utility/Brand/utility-brand-50 */
+  --lab-border-primary: #d4d4d4; /* Colors/Border/border-primary */
+  --lab-border-secondary: #e5e5e5; /* Colors/Border/border-secondary */
+  --lab-text-primary: #171717; /* Colors/Text/text-primary (900) */
+  --lab-text-secondary: #404040; /* Colors/Text/text-secondary (700) */
+  --lab-text-tertiary: #525252; /* Colors/Text/text-tertiary (600) */
+  --lab-text-quaternary: #737373; /* Colors/Text/text-quaternary (500) */
+  --lab-text-placeholder: #737373; /* Colors/Text/text-placeholder */
+  --lab-fg-quaternary: #a3a3a3; /* Colors/Foreground/fg-quaternary (400) — icons at rest */
+  --lab-fg-muted: #d4d4d4; /* Component colors/Utility/Neutral/utility-neutral-300 — separators */
+  --lab-fg-brand: #9e77ed; /* Colors/Foreground/fg-brand-secondary_alt — the active icon */
+  --lab-text-brand-primary: #42307d; /* Colors/Text/text-brand-primary (900) — the active label */
+  --lab-text-brand-secondary: #6941c6; /* Colors/Text/text-brand-secondary (700) — breadcrumb */
+  --lab-brand-solid: #7f56d9;
+  --lab-brand-solid-hover: #6941c6;
+  --lab-coffee-bg: #ecfccb; /* Colors/Lime/100 */
+  --lab-coffee-text: #3f6212; /* Colors/Lime/800 */
+  --lab-coffee-icon: #65a30d; /* Colors/Lime/600 */
+  /* Status. Live is the lab's one claim that matters, so it is the one green on the screen. */
+  --lab-success-bg: #ecfdf3;
+  --lab-success-border: #abefc6;
+  --lab-success-text: #067647;
+  --lab-success-dot: #17b26a;
+  --lab-info-bg: #eff8ff;
+  --lab-info-border: #b2ddff;
+  --lab-info-text: #175cd3;
+  --lab-info-dot: #2e90fa;
+  --lab-warning-bg: #fffaeb;
+  --lab-warning-border: #fedf89;
+  --lab-warning-text: #b54708;
+  --lab-warning-dot: #f79009;
+  --lab-error-bg: #fef3f2;
+  --lab-error-border: #fecdca;
+  --lab-error-text: #b42318;
+  --lab-error-dot: #f04438;
+  --lab-neutral-bg: #fafafa;
+  --lab-neutral-border: #e5e5e5;
+  --lab-neutral-text: #404040;
+  --lab-shadow-xs: 0 1px 2px rgba(10, 13, 18, 0.05); /* Shadows/shadow-xs */
+  --lab-shadow-sm: 0 1px 3px rgba(10, 13, 18, 0.1), 0 1px 2px -1px rgba(10, 13, 18, 0.1);
+  --lab-shadow-lg: 0 12px 16px -4px rgba(10, 13, 18, 0.08), 0 4px 6px -2px rgba(10, 13, 18, 0.03);
+  --lab-focus-ring: 0 0 0 2px var(--lab-bg-primary), 0 0 0 4px var(--lab-fg-brand);
+  --lab-radius-xs: 4px;
+  --lab-radius-sm: 6px; /* radius-sm */
+  --lab-radius-md: 8px; /* radius-md */
+  --lab-radius-lg: 10px;
+  --lab-radius-xl: 12px; /* radius-xl */
+  --lab-radius-full: 9999px;
+  --lab-space-xs: 4px; /* spacing-xs */
+  --lab-space-sm: 6px; /* spacing-sm */
+  --lab-space-md: 8px; /* spacing-md */
+  --lab-space-lg: 12px; /* spacing-lg */
+  --lab-space-xl: 16px; /* spacing-xl */
+  --lab-space-2xl: 20px; /* spacing-2xl */
+  --lab-space-3xl: 24px;
+  --lab-l1-w: 280px;
+  --lab-l1-rail: 64px; /* the file's own rail variant; 68 with level 1's 4px padding */
+  --lab-l2-w: 280px;
+  --lab-navbar-h: 60px;
+  --lab-ease: 160ms cubic-bezier(0.2, 0, 0, 1);
 }
 :root.dark {
-  --lab-color-bg: #18181b;
-  --lab-color-bg-sunken: #111113;
-  --lab-color-surface: #1f1f23;
-  --lab-color-surface-raised: #27272a;
-  --lab-color-border: #3f3f46;
-  --lab-color-border-strong: #52525b;
-  --lab-color-text: #d4d4d8;
-  --lab-color-text-strong: #fafafa;
-  --lab-color-text-muted: #a1a1aa;
-  --lab-color-text-faint: #71717a;
-  --lab-color-accent: #60a5fa;
-  --lab-color-accent-text: #09090b;
-  --lab-color-accent-inverse: #2563eb;
-  --lab-color-focus: #fafafa;
-  --lab-color-active-bg: #e4e4e7;
-  --lab-color-active-text: #18181b;
+  --lab-bg-primary: #0f0f0f;
+  --lab-bg-secondary: #171717;
+  --lab-bg-hover: #222222;
+  --lab-bg-sunken: #0a0a0a;
+  --lab-bg-active: #231b36;
+  --lab-border-primary: #404040;
+  --lab-border-secondary: #292929;
+  --lab-text-primary: #fafafa;
+  --lab-text-secondary: #d4d4d4;
+  --lab-text-tertiary: #b5b5b5;
+  --lab-text-quaternary: #a3a3a3;
+  --lab-text-placeholder: #8a8a8a;
+  --lab-fg-quaternary: #7a7a7a;
+  --lab-fg-muted: #525252;
+  --lab-fg-brand: #b692f6;
+  --lab-text-brand-primary: #e9d7fe;
+  --lab-text-brand-secondary: #d6bbfb;
+  --lab-brand-solid: #7f56d9;
+  --lab-brand-solid-hover: #9e77ed;
+  --lab-coffee-bg: #1a2e05;
+  --lab-coffee-text: #d9f99d;
+  --lab-coffee-icon: #a3e635;
+  --lab-success-bg: #053321;
+  --lab-success-border: #085d3a;
+  --lab-success-text: #75e0a7;
+  --lab-info-bg: #102a56;
+  --lab-info-border: #194185;
+  --lab-info-text: #84caff;
+  --lab-warning-bg: #4e1d09;
+  --lab-warning-border: #93370d;
+  --lab-warning-text: #fec84b;
+  --lab-error-bg: #55160c;
+  --lab-error-border: #912018;
+  --lab-error-text: #fda29b;
+  --lab-neutral-bg: #1f1f1f;
+  --lab-neutral-border: #333333;
+  --lab-neutral-text: #d4d4d4;
+  --lab-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --lab-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
+  --lab-shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.7);
 }
 /* ---------------------------------------------------------------------------------------------
-   The document frame. Structure only — no font, no colour, nothing that would inherit into a
-   story rendered in <main> on a dashboard page.
+   The document. `.lab-shell` sits on <html> and <body> of every chrome page and nowhere else.
    --------------------------------------------------------------------------------------------- */
 html.lab-shell {
   height: 100%;
-  max-height: 100vh;
-  overflow: hidden;
+  color-scheme: light;
   -webkit-text-size-adjust: 100%;
 }
+:root.dark.lab-shell {
+  color-scheme: dark;
+}
 body.lab-shell {
+  height: 100%;
   margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-  justify-content: flex-start;
-  min-height: 100%;
-  max-height: 100%;
+  overflow: hidden;
+  background-color: var(--lab-bg-secondary);
+  color: var(--lab-text-primary);
+  font-family: var(--lab-font);
+  font-size: 14px;
+  line-height: 20px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
-.lab-main {
-  flex: 1;
-  min-width: 0;
-  overflow: auto;
+.lab-shell *,
+.lab-shell *::before,
+.lab-shell *::after {
   box-sizing: border-box;
 }
-/* Box-sizing is scoped to the chrome for the same reason: on a dashboard page a `*` selector
-   would cross into the story. */
-.lab-chrome,
-.lab-chrome *,
-.lab-chrome *::before,
-.lab-chrome *::after {
-  box-sizing: border-box;
+/* `hidden` means hidden, whatever display a chrome class gives the element. */
+.lab-shell [hidden] {
+  display: none !important;
 }
-/* The chrome's own typographic ground. Declared on the chrome boxes, not on `body`, because the
-   consumer's `body { font-family; font-size }` is in the same document on a dashboard page — a
-   class here beats an element selector there, and nothing inherits into the preview from us. */
-.lab-chrome {
-  font-family: var(--lab-font-body);
-  font-size: 14px;
-  line-height: 1.45;
-  color: var(--lab-color-text);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+/* Cross-document view transitions: the old page stays painted until the new one is ready, so a
+   click in the tree never flashes white. No script — the browser does it, where it can. */
+@view-transition {
+  navigation: auto;
+}
+.lab-icon {
+  display: block;
+  flex: none;
+  width: 20px;
+  height: 20px;
+}
+.lab-icon--sm {
+  width: 16px;
+  height: 16px;
 }
-.lab-sr-only {
+.lab-visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
-  padding: 0;
-  margin: -1px;
   overflow: hidden;
-  clip-path: inset(50%);
+  clip: rect(0 0 0 0);
   white-space: nowrap;
-  border: 0;
 }
-.lab-focus-ring:focus-visible {
-  outline: 2px solid var(--lab-color-focus);
-  outline-offset: -1px;
-  z-index: 20;
+.lab-focusable:focus-visible,
+.lab-shell a:focus-visible,
+.lab-shell button:focus-visible,
+.lab-shell summary:focus-visible,
+.lab-shell input:focus-visible,
+.lab-shell select:focus-visible {
+  outline: none;
+  box-shadow: var(--lab-focus-ring);
+}
+.lab-shell code,
+.lab-mono {
+  font-family: var(--lab-font-mono);
+  font-size: 0.92em;
 }
 /* ---------------------------------------------------------------------------------------------
-   Sidebar. `#astrobook-sidebar` is a DOM contract, not a style choice: LabHead.astro's collapse
-   script and pill decorator both query it by that id. Same for the resize-handle element.
+   The frame: level 1 (the main nav), level 2 (the panel), and main.
+   State lives on <html>, set before paint by the inline script in ../chrome/Shell.astro so a
+   collapsed sidebar never flashes open:
+     data-lab-l1="rail"      level 1 is the 64px icon rail
+     data-lab-l2="closed"    level 2 is gone; the stage gets its width
+     data-lab-peek           level 2 is closed but showing over the stage, below the navbar, for
+                             as long as the pointer stays on it — it overlays rather than pushes,
+                             because pushing would resize the preview and trip its breakpoints
+     data-lab-sort="name"    the Sections tree is sorted by name rather than by slot
    --------------------------------------------------------------------------------------------- */
-#astrobook-sidebar {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  width: var(--lab-sidebar-width, 300px);
-  min-width: 100px;
-  max-width: calc(100vw - 100px);
-  border-right: 1px solid var(--lab-color-border);
-  background-color: var(--lab-color-bg-sunken);
+/* The sidebars' own tokens (Figma `Astrolab`, 2026-09-24): the floating surfaces' edge and
+   shadow, the rail's hover on a group it holds, and the Sections tree's slot badge. Dark values
+   are the file's own Dark mode where it defines them. */
+:root {
+  --lab-border-secondary-alt: rgba(0, 0, 0, 0.1); /* Colors/Border/border-secondary_alt */
+  --lab-shadow-lg-3: 0 12px 16px -4px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03),
+    0 2px 2px -1px rgba(0, 0, 0, 0.04); /* Shadows/shadow-lg */
+  --lab-shadow-xl: 0 20px 24px -4px rgba(0, 0, 0, 0.08), 0 8px 8px -4px rgba(0, 0, 0, 0.03),
+    0 3px 3px -1.5px rgba(0, 0, 0, 0.04); /* Shadows/shadow-xl */
+  --lab-bg-active-hover: #f4ebff; /* Component colors/Utility/Brand/utility-brand-100 */
+  --lab-tip-bg: #0a0a0a; /* Colors/Background/bg-primary-solid */
+  --lab-tip-text: #ffffff;
+  --lab-tip-sub: #d4d4d4; /* tooltip-supporting-text */
+  --lab-slot-bg: #f0fdf4; /* utility-green-50 */
+  --lab-slot-border: #bbf7d0; /* utility-green-200 */
+  --lab-slot-text: #15803d; /* utility-green-700 */
+  --lab-slot-none-bg: #fafafa; /* utility-neutral-50 */
+  --lab-slot-none-border: #e5e5e5; /* utility-neutral-200 */
+  --lab-slot-none-text: #404040; /* utility-neutral-700 */
+  --lab-slot-here-bg: #f9f5ff; /* utility-brand-50 */
+  --lab-slot-here-border: #e9d7fe; /* utility-brand-200 */
+  --lab-slot-here-text: #7f56d9; /* utility-brand-600 */
 }
-:root[data-sidebar-resizing] {
-  cursor: ew-resize;
-  user-select: none;
+:root.dark {
+  --lab-border-secondary-alt: rgba(255, 255, 255, 0.1);
+  --lab-shadow-lg-3: 0 16px 32px -8px rgba(0, 0, 0, 0.7);
+  --lab-shadow-xl: 0 20px 40px -8px rgba(0, 0, 0, 0.75);
+  --lab-bg-active-hover: #2c1c5f;
+  --lab-tip-bg: #fafafa;
+  --lab-tip-text: #0a0a0a;
+  --lab-tip-sub: #404040;
+  --lab-slot-bg: #052e16;
+  --lab-slot-border: #166534;
+  --lab-slot-text: #86efac;
+  --lab-slot-none-bg: #171717;
+  --lab-slot-none-border: #404040;
+  --lab-slot-none-text: #d4d4d4;
+  --lab-slot-here-bg: #2c1c5f;
+  --lab-slot-here-border: #53389e;
+  --lab-slot-here-text: #d6bbfb;
+}
+/* In the dark sidebars the file's Dark mode keeps "you are here" as a violet fill and turns the
+   brand-coloured text neutral (Figma `Lab / Story / dark`). Scoped to the two sidebars, so the
+   navbar and the views keep the lab-wide tokens. */
+:root.dark .lab-l1,
+:root.dark .lab-l2 {
+  --lab-bg-active: #2c1c5f; /* utility-brand-50, dark */
+  --lab-text-brand-primary: #fafafa; /* text-brand-primary (900), dark */
+  --lab-text-brand-secondary: #d4d4d4; /* text-brand-secondary (700), dark */
+}
+/* The coffee footer is lime primitives in the file, so it stays a light slab in the dark sidebar —
+   left that way on purpose while its link waits on a decision. */
+:root.dark .lab-l2__footer {
+  --lab-coffee-bg: #ecfccb;
+  --lab-coffee-text: #3f6212;
+  --lab-coffee-icon: #65a30d;
+}
+.lab-app {
+  display: flex;
+  height: 100vh;
+  height: 100dvh;
+  min-width: 0;
 }
-astrobook-sidebar-resize-handle {
+/* ---- level 1 ------------------------------------------------------------------------------ */
+.lab-l1 {
   position: relative;
-  left: -2px;
-  display: block;
-  width: 4px;
+  z-index: 4;
   flex: none;
-  cursor: ew-resize;
-  transition: background-color var(--lab-transition);
+  display: flex;
+  padding: var(--lab-space-xs) 0 var(--lab-space-xs) var(--lab-space-xs);
 }
-astrobook-sidebar-resize-handle:hover {
-  background-color: var(--lab-color-border-strong);
+.lab-l1__card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: var(--lab-l1-w);
+  height: 100%;
+  background-color: var(--lab-bg-primary);
+  border-right: 1px solid var(--lab-border-secondary);
+  border-radius: var(--lab-radius-xl);
+  transition: width var(--lab-ease);
 }
-.lab-sidebar__nav {
+.lab-l1__top {
+  min-height: 0;
   display: flex;
   flex-direction: column;
-  min-height: 100%;
-  max-height: 100%;
-  overflow-y: hidden;
-  padding: 0;
-  margin: 0;
 }
-.lab-sidebar__header {
+.lab-l1__header {
   display: flex;
   align-items: center;
-  gap: 0.125rem;
-  padding: 0.75rem 0.5rem;
-  border-bottom: 1px solid var(--lab-color-border);
+  gap: var(--lab-space-md);
+  padding: var(--lab-space-xl) var(--lab-space-lg) var(--lab-space-xl) var(--lab-space-2xl);
 }
-.lab-sidebar__title {
+.lab-brand {
+  display: flex;
+  align-items: center;
+  gap: var(--lab-space-md);
   min-width: 0;
-  flex: 0 1 auto;
+  flex: 1;
+  color: var(--lab-text-primary);
+  text-decoration: none;
+  border-radius: var(--lab-radius-sm);
+}
+/* The logo is a placeholder until one is designed. */
+.lab-brand__mark {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--lab-radius-sm);
+  background: linear-gradient(26.5deg, #53389e 8%, #6941c6 92%);
+  box-shadow: var(--lab-shadow-xs), inset 0 -0.5px 0.5px rgba(0, 0, 0, 0.1);
+}
+.lab-brand__mark::after {
+  content: "";
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.25) 70%);
+}
+.lab-brand__name {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
-  padding: 0.35rem 0.5rem;
-  border-radius: var(--lab-radius);
-  font-weight: 600;
-  color: var(--lab-color-text-muted);
-  text-decoration: none;
-  transition: color var(--lab-transition);
 }
-.lab-sidebar__title:hover {
-  color: var(--lab-color-text-strong);
+.lab-l1__nav {
+  display: flex;
+  flex-direction: column;
+  padding: 0 var(--lab-space-xl);
+  overflow-y: auto;
+  scrollbar-width: none;
 }
-.lab-sidebar__spacer {
-  flex: 1 1 auto;
+.lab-l1__footer {
+  display: flex;
+  flex-direction: column;
+  padding: 0 var(--lab-space-xl) var(--lab-space-2xl);
+}
+.lab-divider {
+  height: 1px;
+  margin: 0;
+  border: 0;
+  background-color: var(--lab-border-secondary);
+}
+.lab-l1__nav .lab-divider {
+  margin: 0;
 }
-/* The button class name is a DOM contract too: LabHead.astro creates the collapse, cull,
-   viewport, staging and code buttons and sets `className = "astrobook-sidebar-button"` on each,
-   so every injected control inherits this shape without knowing anything about the stylesheet. */
-.astrobook-sidebar-button {
+/* One row of level 1. Figma `_Nav item base`: 8px padding, 12px between text and trailing icon,
+   8px between icon and text, a 36px row, 1px of air above and below. */
+.lab-nav-item {
+  position: relative;
   display: flex;
   align-items: center;
-  justify-content: center;
-  flex: none;
-  width: 2rem;
-  height: 2rem;
-  padding: 0.375rem;
+  gap: var(--lab-space-md);
+  width: 100%;
+  min-height: 36px;
+  margin: 1px 0;
+  padding: var(--lab-space-md);
   border: 0;
-  border-radius: var(--lab-radius);
+  border-radius: var(--lab-radius-sm);
   background: transparent;
-  color: var(--lab-color-text-muted);
+  color: var(--lab-text-secondary);
   font: inherit;
-  font-size: 1rem;
+  font-weight: 600;
+  text-align: left;
   text-decoration: none;
   cursor: pointer;
-  transition:
-    color var(--lab-transition),
-    background-color var(--lab-transition);
+  list-style: none;
+  transition: background-color var(--lab-ease), color var(--lab-ease);
 }
-.astrobook-sidebar-button:hover {
-  color: var(--lab-color-text-strong);
-  background-color: var(--lab-color-surface);
+.lab-nav-item::-webkit-details-marker {
+  display: none;
 }
-.astrobook-sidebar-button[data-active] {
-  color: var(--lab-color-text-strong);
-  background-color: var(--lab-color-surface);
+.lab-nav-item > .lab-icon {
+  color: var(--lab-fg-quaternary);
+  transition: color var(--lab-ease);
 }
-.astrobook-sidebar-button svg {
-  display: block;
-  width: 1rem;
-  height: 1rem;
+.lab-nav-item__label {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-/* ---------------------------------------------------------------------------------------------
-   Search. The ids are the contract (LabHead widens matches by appending terms to
-   `data-search-text`, and opens the panel on ⌘K by clicking the toggle).
-   --------------------------------------------------------------------------------------------- */
-#astrobook-search-panel {
-  interpolate-size: allow-keywords;
-  height: 0;
-  overflow: clip;
-  border-bottom: 1px solid transparent;
-  transition: height var(--lab-transition);
+.lab-nav-item__count {
+  flex: none;
+  min-width: 22px;
+  padding: 0 7px;
+  border-radius: var(--lab-radius-full);
+  background-color: var(--lab-bg-hover);
+  border: 1px solid var(--lab-border-secondary);
+  color: var(--lab-text-secondary);
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+  text-align: center;
 }
-#astrobook-search-panel[data-open] {
-  height: max-content;
-  border-bottom-color: var(--lab-color-border);
+.lab-nav-item:hover {
+  background-color: var(--lab-bg-hover);
+  color: var(--lab-text-primary);
 }
-.lab-search__row {
-  display: flex;
-  align-items: center;
-  padding: 0.5rem;
+.lab-nav-item:hover > .lab-icon {
+  color: var(--lab-text-quaternary);
 }
-.lab-search__field {
-  position: relative;
-  display: flex;
-  flex: 1;
-  align-items: center;
+.lab-nav-item[aria-current="page"],
+.lab-nav-item[aria-current="true"] {
+  background-color: var(--lab-bg-active);
+  color: var(--lab-text-brand-primary);
 }
-.lab-search__icon {
-  position: absolute;
-  left: 0.5rem;
-  display: block;
-  width: 0.875rem;
-  height: 0.875rem;
-  pointer-events: none;
-  color: var(--lab-color-text-faint);
+.lab-nav-item[aria-current="page"] > .lab-icon,
+.lab-nav-item[aria-current="true"] > .lab-icon {
+  color: var(--lab-fg-brand);
 }
-#astrobook-search-input {
-  width: 100%;
-  padding: 0.3rem 0.5rem 0.3rem 1.75rem;
-  border: 1px solid var(--lab-color-border);
-  border-radius: var(--lab-radius);
-  background-color: var(--lab-color-surface-raised);
-  font-family: var(--lab-font-body);
-  font-size: 0.875rem;
-  color: var(--lab-color-text-strong);
-  outline: none;
+.lab-nav-item[aria-disabled="true"] {
+  cursor: default;
 }
-#astrobook-search-input::placeholder {
-  color: var(--lab-color-text-faint);
+/* Group headers (Site, Tasks) read one step stronger than their items. */
+.lab-nav-group > .lab-nav-item {
+  color: var(--lab-text-primary);
 }
-#astrobook-search-input:focus {
-  border-color: var(--lab-color-border-strong);
+.lab-nav-group__chevron {
+  width: 16px;
+  height: 16px;
+  color: var(--lab-fg-quaternary);
+  transform: rotate(180deg);
+  transition: transform var(--lab-ease);
 }
-/* ---------------------------------------------------------------------------------------------
-   The tree. Every selector below is one LabHead.astro also queries — see its DOM contract block.
-   --------------------------------------------------------------------------------------------- */
-astrobook-sidebar-tree {
+.lab-nav-group[data-collapsed] .lab-nav-group__chevron {
+  transform: rotate(0deg);
+}
+.lab-nav-group__items {
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  overflow-y: auto;
-  padding: 0.75rem 0.5rem 2rem;
+  padding-bottom: 2px;
 }
-astrobook-sidebar-node {
-  display: contents;
+.lab-nav-group[data-collapsed] > .lab-nav-group__items {
+  display: none;
 }
-.astrobook-sidebar-link {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  list-style: none;
-  padding: 0.25rem 0.5rem;
-  border-radius: var(--lab-radius);
-  font-size: 0.875rem;
-  text-decoration: none;
-  cursor: pointer;
-  user-select: none;
-  transition:
-    color var(--lab-transition),
-    background-color var(--lab-transition);
+/* The group header is a toggle, not a place: it never takes the active fill, even when the page
+   is one of its items (that item carries it). aria-current stays on it for the rail, where the
+   header IS the only visible trace of the group. */
+.lab-l1__nav .lab-nav-group > .lab-nav-item[aria-current="true"] {
+  background-color: transparent;
+  color: var(--lab-text-primary);
+}
+.lab-l1__nav .lab-nav-group > .lab-nav-item[aria-current="true"] > .lab-icon {
+  color: var(--lab-fg-quaternary);
 }
-.astrobook-sidebar-link::-webkit-details-marker {
+.lab-l1__nav .lab-nav-group > .lab-nav-item:hover {
+  background-color: var(--lab-bg-hover);
+}
+.lab-l1-btn__expand,
+:root[data-lab-l1="rail"] .lab-l1-btn__collapse {
   display: none;
 }
-/* Folder and module rows. */
-.lab-tree-row--group {
-  color: var(--lab-color-text-muted);
+:root[data-lab-l1="rail"] .lab-l1-btn__expand {
+  display: block;
 }
-.lab-tree-row--group:hover {
-  color: var(--lab-color-text-strong);
-  background-color: var(--lab-color-surface);
+:root[data-lab-l1="rail"] .lab-tip__title .lab-l1-btn__expand {
+  display: inline;
 }
-/* Story rows. The two state classes are toggled by the inline script in sidebar-tree.astro and
-   are styled by LabHead.astro as well — do not rename either. */
-.astrobook-sidebar-story-link-inactive {
-  color: var(--lab-color-text);
+/* The header's two buttons — collapse, then the lab's theme — are 32px ghost buttons with a 16px
+   icon at text-quaternary, not the kit's paler fg-quaternary: an icon-only control needs 3:1. */
+.lab-icon-btn.lab-l1__btn {
+  color: var(--lab-text-quaternary);
 }
-.astrobook-sidebar-story-link-inactive:hover {
-  color: var(--lab-color-text-strong);
-  background-color: var(--lab-color-surface);
+.lab-icon-btn.lab-l1__btn:hover {
+  color: var(--lab-text-secondary);
 }
-.astrobook-sidebar-story-link-active,
-.astrobook-sidebar-story-link-active:hover {
-  color: var(--lab-color-active-text);
-  background-color: var(--lab-color-active-bg);
+.lab-icon-btn.lab-l1__btn .lab-icon {
+  width: 16px;
+  height: 16px;
 }
-.lab-tree-icon {
-  display: block;
-  flex: none;
-  width: 0.875rem;
-  height: 0.875rem;
-  color: var(--lab-color-text-faint);
+/* The moon is a toggle for the lab's dark mode. It stays a ghost button either way. */
+.lab-icon-btn.lab-theme-btn[aria-pressed="true"] {
+  background-color: transparent;
+  color: var(--lab-text-quaternary);
 }
-.astrobook-sidebar-story-link-active .lab-tree-icon {
-  color: inherit;
+.lab-icon-btn.lab-theme-btn:hover {
+  background-color: var(--lab-bg-hover);
+  color: var(--lab-text-secondary);
+}
+/* ---- tooltips (Figma `Tooltip`, with supporting text) ------------------------------------- */
+/* A shortcut tooltip that shows at once on hover or keyboard focus — `title` takes a second and
+   cannot hold three lines. The tooltip is inside its button, which names itself with aria-label
+   and points at the tooltip with aria-describedby. */
+.lab-tipped {
+  position: relative;
 }
-.lab-tree-children {
+.lab-tip {
+  position: absolute;
+  z-index: 20;
   display: flex;
   flex-direction: column;
   gap: 2px;
-  padding-left: 0.75rem;
+  width: max-content;
+  max-width: 296px;
+  padding: var(--lab-space-lg);
+  border-radius: var(--lab-radius-md);
+  background-color: var(--lab-tip-bg);
+  box-shadow: var(--lab-shadow-lg-3);
+  color: var(--lab-tip-sub);
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  pointer-events: none;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 120ms ease, visibility 0s linear 120ms;
 }
-/* The collapse animation, lifted verbatim in behaviour from upstream's scoped block so the
-   chevron and the details height still move together. */
-details[data-astrobook-collapsible] {
-  --lab-collapse-ease: cubic-bezier(0, 0, 0.2, 1);
-  interpolate-size: allow-keywords;
+.lab-tip__title {
+  color: var(--lab-tip-text);
+  font-weight: 600;
 }
-details[data-astrobook-collapsible]::details-content {
-  height: 0;
-  overflow: clip;
-  transition:
-    height var(--collapse-duration, 150ms) var(--lab-collapse-ease),
-    content-visibility var(--collapse-duration, 150ms) var(--lab-collapse-ease) allow-discrete;
+/* The arrow: a 6px notch on the side facing the button. */
+.lab-tip::before {
+  content: "";
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background-color: inherit;
+  transform: rotate(45deg);
+  border-radius: 1px;
 }
-details[data-astrobook-collapsible][open]::details-content {
-  height: auto;
+.lab-tipped:hover > .lab-tip,
+.lab-tipped:focus-visible > .lab-tip {
+  visibility: visible;
+  opacity: 1;
+  transition-delay: 300ms, 300ms;
+  transition-duration: 120ms, 0s;
 }
-[data-astrobook-chevron] {
-  transform: rotate(-90deg);
-  transition: transform var(--collapse-duration, 150ms) var(--lab-collapse-ease);
+/* Below its button, arrow up (level 1 open). */
+.lab-tip--l1 {
+  top: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
 }
-details[data-astrobook-collapsible][open] > summary > [data-astrobook-chevron] {
-  transform: rotate(0deg);
+.lab-tip--l1::before {
+  top: -4px;
+  left: calc(50% - 5px);
 }
-/* ---------------------------------------------------------------------------------------------
-   Theme toggle (vendored — see components/theme-script.astro for why the dependency went).
-   --------------------------------------------------------------------------------------------- */
-.lab-theme-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+/* Right of its button, arrow left (the rail's expand button, the navbar's panel button). */
+:root[data-lab-l1="rail"] .lab-tip--l1,
+.lab-tip--panel {
+  top: 0;
+  left: calc(100% + 10px);
+  transform: none;
 }
-.lab-theme-toggle .lab-theme-icon--dark {
-  display: none;
+:root[data-lab-l1="rail"] .lab-tip--l1::before,
+.lab-tip--panel::before {
+  top: 11px;
+  left: -4px;
 }
-:root.dark .lab-theme-toggle .lab-theme-icon--light {
+/* The navbar's own "open the panel" button exists only while the panel is closed. */
+.lab-navbar .lab-navbar__panel-btn {
   display: none;
 }
-:root.dark .lab-theme-toggle .lab-theme-icon--dark {
-  display: block;
+:root[data-lab-l2="closed"] .lab-navbar .lab-navbar__panel-btn {
+  display: inline-grid;
 }
-/* ---------------------------------------------------------------------------------------------
-   The built-in splash. Reachable only when a consumer leaves `home` at its default; this package
-   always passes its own (src/Home.astro), so this is the fallback path, kept working.
-   --------------------------------------------------------------------------------------------- */
-.lab-splash {
-  display: flex;
+.lab-nav-group__items .lab-nav-item {
+  padding-left: 36px;
+}
+/* The header's own buttons (theme, collapse): the tertiary icon button. */
+.lab-icon-btn {
+  flex: none;
+  display: inline-grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--lab-radius-md);
+  background: transparent;
+  color: var(--lab-fg-quaternary);
+  cursor: pointer;
+  text-decoration: none;
+  transition: background-color var(--lab-ease), color var(--lab-ease);
+}
+.lab-icon-btn:hover {
+  background-color: var(--lab-bg-hover);
+  color: var(--lab-text-secondary);
+}
+.lab-icon-btn[aria-pressed="true"] {
+  background-color: var(--lab-bg-active);
+  color: var(--lab-fg-brand);
+}
+.lab-icon-btn .lab-icon {
+  width: 18px;
+  height: 18px;
+}
+/* ---- level 1 as a rail -------------------------------------------------------------------- */
+/* Figma `Lab / Rail + flyout`: a 64px card (68 with level 1's padding), bordered all round and
+   lifted, with the logomark, the theme moon and the expand button stacked in its header. */
+:root[data-lab-l1="rail"] .lab-l1__card {
+  width: var(--lab-l1-rail);
+  border: 1px solid var(--lab-border-secondary);
+  box-shadow: var(--lab-shadow-xs);
+}
+:root[data-lab-l1="rail"] .lab-l1__header {
   flex-direction: column;
+  gap: var(--lab-space-lg);
+  padding: var(--lab-space-2xl) 0;
+}
+:root[data-lab-l1="rail"] .lab-brand {
+  flex: none;
+}
+/* Under the logomark the moon comes first, then the expand button. */
+:root[data-lab-l1="rail"] .lab-l1__header .lab-theme-btn {
+  order: 1;
+}
+:root[data-lab-l1="rail"] .lab-l1__header [data-lab-l1-btn] {
+  order: 2;
+}
+:root[data-lab-l1="rail"] .lab-l1 .lab-brand__name,
+:root[data-lab-l1="rail"] .lab-l1 .lab-nav-item__label,
+:root[data-lab-l1="rail"] .lab-l1 .lab-nav-item__count,
+:root[data-lab-l1="rail"] .lab-l1 .lab-nav-group__chevron {
+  display: none;
+}
+:root[data-lab-l1="rail"] .lab-l1__nav,
+:root[data-lab-l1="rail"] .lab-l1__footer {
   align-items: center;
+  padding-left: var(--lab-space-lg);
+  padding-right: var(--lab-space-lg);
+  overflow: visible;
+}
+:root[data-lab-l1="rail"] .lab-l1__footer {
+  padding-bottom: var(--lab-space-xl);
+}
+:root[data-lab-l1="rail"] .lab-l1__nav,
+:root[data-lab-l1="rail"] .lab-l1__footer {
+  gap: 2px;
+}
+:root[data-lab-l1="rail"] .lab-l1 .lab-nav-item {
   justify-content: center;
-  height: 100%;
-  width: 100%;
-  padding: 1.5rem;
-  background-color: var(--lab-color-bg);
+  width: 36px;
+  margin: 0;
+  padding: var(--lab-space-md);
 }
-.lab-splash__title {
+/* The rail has no dividers between its groups — the icons carry the grouping. */
+:root[data-lab-l1="rail"] .lab-l1__nav > .lab-divider {
+  display: none;
+}
+/* In the rail a group is its icon; its items open as a flyout beside it, on hover or on focus,
+   with no script. The flyout is the same list the expanded nav shows, repositioned, under the
+   group's name so it reads as the group rather than as a context menu for the icon. */
+:root[data-lab-l1="rail"] .lab-nav-group {
+  position: relative;
+}
+/* In the rail the group's own header marks where you are, since its items are out of sight. */
+:root[data-lab-l1="rail"] .lab-l1__nav .lab-nav-group > .lab-nav-item[aria-current="true"] {
+  background-color: var(--lab-bg-active);
+}
+/* ...and still answers the pointer: one step deeper on hover, since it is already tinted. */
+:root[data-lab-l1="rail"] .lab-l1__nav .lab-nav-group > .lab-nav-item[aria-current="true"]:hover {
+  background-color: var(--lab-bg-active-hover);
+}
+:root[data-lab-l1="rail"] .lab-l1__nav .lab-nav-group > .lab-nav-item[aria-current="true"] > .lab-icon {
+  color: var(--lab-fg-brand);
+}
+.lab-nav-group__flyout-label {
+  display: none;
   margin: 0;
-  font-size: 2rem;
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  text-align: center;
-  color: var(--lab-color-text-strong);
+  padding: var(--lab-space-sm) var(--lab-space-md) 2px;
+  color: var(--lab-text-quaternary);
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 600;
 }
-.lab-splash__subtitle {
-  margin: 0.75rem 0 0;
-  font-size: 1rem;
-  text-align: center;
-  color: var(--lab-color-text-muted);
+:root[data-lab-l1="rail"] .lab-nav-group__flyout-label {
+  display: block;
 }
-.lab-splash__badges {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 0.75rem;
-  margin-top: 1.5rem;
+/* 8px right of the rail's edge: the group is 36px wide, centred in the 62px inside the card. */
+:root[data-lab-l1="rail"] .lab-nav-group > .lab-nav-group__items,
+:root[data-lab-l1="rail"] .lab-nav-group[data-collapsed] > .lab-nav-group__items {
+  display: none;
+  position: absolute;
+  top: -5px;
+  left: calc(100% + 13px + 1px + 8px);
+  z-index: 10;
+  min-width: 216px;
+  padding: var(--lab-space-xs);
+  background-color: var(--lab-bg-primary);
+  border: 1px solid var(--lab-border-secondary-alt);
+  border-radius: var(--lab-radius-md);
+  box-shadow: var(--lab-shadow-lg-3);
 }
-.lab-splash__badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.25rem 0.75rem;
-  border: 1px solid var(--lab-color-border);
-  border-radius: var(--lab-radius-pill);
-  font-family: var(--lab-font-mono);
-  font-size: 0.8125rem;
-  color: var(--lab-color-text-muted);
-  text-decoration: none;
-  transition:
-    color var(--lab-transition),
-    border-color var(--lab-transition);
+/* A bridge across the gap, so the pointer can travel from the icon to the flyout. */
+:root[data-lab-l1="rail"] .lab-nav-group__items::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -24px;
+  width: 24px;
+}
+:root[data-lab-l1="rail"] .lab-nav-group:hover > .lab-nav-group__items,
+:root[data-lab-l1="rail"] .lab-nav-group:focus-within > .lab-nav-group__items {
+  display: flex;
 }
-.lab-splash__badge:hover {
-  color: var(--lab-color-text-strong);
-  border-color: var(--lab-color-border-strong);
+:root[data-lab-l1="rail"] .lab-l1 .lab-nav-group__items .lab-nav-item {
+  justify-content: flex-start;
+  width: 100%;
+  margin: 1px 0;
+  padding: var(--lab-space-md) var(--lab-space-md);
 }
-.lab-splash__badge svg {
+:root[data-lab-l1="rail"] .lab-l1 .lab-nav-group__items .lab-nav-item__label {
   display: block;
-  width: 0.875rem;
-  height: 0.875rem;
+}
+/* Rail tooltips for the ungrouped items — a CSS tooltip, because `title` takes a second to show. */
+:root[data-lab-l1="rail"] .lab-l1 [data-tip]:hover::after {
+  content: attr(data-tip);
+  position: absolute;
+  top: 50%;
+  left: calc(100% + 10px);
+  z-index: 10;
+  transform: translateY(-50%);
+  padding: 6px 10px;
+  border-radius: var(--lab-radius-md);
+  background-color: var(--lab-text-primary);
+  color: var(--lab-bg-primary);
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 600;
+  white-space: nowrap;
+  pointer-events: none;
+}
+:root[data-lab-l1="rail"] .lab-nav-group:hover > .lab-nav-item[data-tip]::after {
+  display: none;
+}
+/* ---- level 2 ------------------------------------------------------------------------------ */
+.lab-l2 {
+  position: relative;
+  z-index: 3;
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  width: var(--lab-l2-w);
+  height: 100%;
+  background-color: var(--lab-bg-secondary);
+  border-right: 1px solid var(--lab-border-secondary);
+}
+/* The tighter padding, 12 / 8, from the design pass (2026-09-24): the header's contents sit 12px
+   from the panel's edges, the tree 8px (plus its own 4). */
+.lab-l2__header {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--lab-space-lg);
+  padding: var(--lab-space-md) var(--lab-space-lg);
+}
+.lab-l2__crumbs-row {
+  display: flex;
+  align-items: center;
+  gap: var(--lab-space-md);
+  min-height: 20px;
+  padding-top: var(--lab-space-xl);
+}
+.lab-l2__body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0 var(--lab-space-md) var(--lab-space-xl);
+  scrollbar-width: thin;
+}
+.lab-l2__footer {
+  flex: none;
+  padding: var(--lab-space-2xl) var(--lab-space-xl);
+  background-color: var(--lab-coffee-bg);
+}
+.lab-coffee {
+  color: var(--lab-coffee-text);
+}
+.lab-coffee > .lab-icon,
+.lab-coffee:hover > .lab-icon {
+  color: var(--lab-coffee-icon);
+}
+.lab-coffee:hover {
+  background-color: color-mix(in srgb, var(--lab-coffee-icon) 14%, transparent);
+  color: var(--lab-coffee-text);
+}
+:root[data-lab-l2="closed"] .lab-l2 {
+  display: none;
+}
+/* Peek: the closed panel, shown over the STAGE for as long as the pointer is on it — below the
+   navbar, never over it, so the navbar's own panel button stays in reach (Figma `Lab / Peek`).
+   --lab-peek-top is the navbar's measured height (../chrome/shell-client.ts); it floats over a
+   stage of the same grey, so it keeps its border and lifts with shadow-xl. */
+:root[data-lab-l2="closed"][data-lab-peek] .lab-l2 {
+  display: flex;
+  position: absolute;
+  top: var(--lab-peek-top, var(--lab-navbar-h));
+  bottom: 0;
+  left: calc(var(--lab-l1-w) + var(--lab-space-xs));
+  height: auto;
+  box-shadow: var(--lab-shadow-xl);
+  animation: lab-peek-in var(--lab-ease);
+}
+:root[data-lab-l2="closed"][data-lab-l1="rail"][data-lab-peek] .lab-l2 {
+  left: calc(var(--lab-l1-rail) + var(--lab-space-xs));
+}
+@keyframes lab-peek-in {
+  from {
+    opacity: 0;
+    transform: translateX(-12px);
+  }
+}
+/* The strip along the stage's left edge that opens the peek. Only exists while level 2 is closed,
+   and like the peek it starts under the navbar. */
+.lab-peek-zone {
+  display: none;
+  position: absolute;
+  top: var(--lab-peek-top, var(--lab-navbar-h));
+  bottom: 0;
+  left: 0;
+  z-index: 3;
+  width: 10px;
+}
+:root[data-lab-l2="closed"] .lab-peek-zone {
+  display: block;
+}
+/* ---- breadcrumbs (Figma `Breadcrumbs`) ----------------------------------------------------- */
+.lab-crumbs {
+  display: flex;
+  align-items: center;
+  gap: var(--lab-space-md);
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.lab-crumbs__item {
+  display: flex;
+  align-items: center;
+  gap: var(--lab-space-md);
+  min-width: 0;
+  color: var(--lab-text-quaternary);
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.lab-crumbs__item + .lab-crumbs__item::before {
+  content: "";
+  flex: none;
+  width: 16px;
+  height: 16px;
+  background-color: var(--lab-fg-muted);
+  -webkit-mask: var(--lab-chevron-right) center / 16px no-repeat;
+  mask: var(--lab-chevron-right) center / 16px no-repeat;
+}
+.lab-crumbs__item a {
+  display: flex;
+  color: inherit;
+  text-decoration: none;
+  border-radius: var(--lab-radius-xs);
+}
+.lab-crumbs__item a:hover {
+  color: var(--lab-text-secondary);
+}
+.lab-crumbs__item .lab-icon {
+  color: var(--lab-fg-quaternary);
+}
+.lab-crumbs__item:last-child {
+  color: var(--lab-text-brand-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+:root {
+  --lab-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4-4-4-4'/%3E%3C/svg%3E");
+}
+/* Level 2's own hide / keep-open button. It overhangs the 20px crumbs row rather than growing it,
+   so the header keeps the design's rhythm. */
+.lab-l2__close {
+  margin: -6px -6px -6px auto;
+}
+.lab-l2__close .lab-icon {
+  width: 16px;
+  height: 16px;
+}
+.lab-l2__close-dock,
+:root[data-lab-peek] .lab-l2__close-hide {
+  display: none;
+}
+:root[data-lab-peek] .lab-l2__close-dock {
+  display: block;
+}
+/* ---- inputs (Figma `Input`) ---------------------------------------------------------------- */
+.lab-input {
+  display: flex;
+  align-items: center;
+  gap: var(--lab-space-md);
+  padding: var(--lab-space-md) var(--lab-space-md) var(--lab-space-md) var(--lab-space-lg);
+  background-color: var(--lab-bg-primary);
+  border: 1px solid var(--lab-border-primary);
+  border-radius: var(--lab-radius-md);
+  box-shadow: var(--lab-shadow-xs);
+  color: var(--lab-fg-quaternary);
+  transition: border-color var(--lab-ease), box-shadow var(--lab-ease);
+}
+.lab-input:focus-within {
+  border-color: var(--lab-fg-brand);
+  box-shadow: var(--lab-shadow-xs), 0 0 0 3px color-mix(in srgb, var(--lab-fg-brand) 22%, transparent);
+}
+.lab-input__field {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--lab-text-primary);
+  font: inherit;
+}
+.lab-shell .lab-input__field:focus-visible {
+  box-shadow: none;
+}
+.lab-input__field::placeholder {
+  color: var(--lab-text-placeholder);
+  opacity: 1;
+}
+.lab-input__field::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+.lab-input__kbd {
+  flex: none;
+  padding: 0 5px;
+  border: 1px solid var(--lab-border-secondary);
+  border-radius: var(--lab-radius-xs);
+  color: var(--lab-text-quaternary);
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+}
+.lab-input:focus-within .lab-input__kbd {
+  display: none;
+}
+.lab-input .lab-icon-btn {
+  width: 24px;
+  height: 24px;
+  margin: -4px -2px -4px 0;
+}
+.lab-input .lab-icon-btn .lab-icon {
+  width: 16px;
+  height: 16px;
+}
+/* ---- menus (popover) -----------------------------------------------------------------------
+   Figma `Astrolab` › Menu: every navbar dropdown, the sidebars' filter and sort menus, and the one
+   hover panel (Properties). A row is 6px in from the menu's edge with 8px of padding inside, a 16px
+   leading slot (`__mark`: an icon, a tick or a checkbox), the label (`__text`), and a trailing hint
+   or chevron. Section labels are text-tertiary, not violet, because violet means "you are here";
+   row hover is bg-hover, because the kit's #fafafa is invisible on a white menu. */
+.lab-menu {
+  margin: 0;
+  min-width: 220px;
+  max-width: 320px;
+  padding: var(--lab-space-xs) 0;
+  border: 1px solid var(--lab-border-secondary);
+  border-radius: var(--lab-radius-md);
+  background-color: var(--lab-bg-primary);
+  color: var(--lab-text-primary);
+  box-shadow: var(--lab-shadow-lg);
+  font-family: var(--lab-font);
+  font-size: 14px;
+  line-height: 20px;
+  inset: auto;
+}
+.lab-menu__label {
+  margin: 0;
+  padding: var(--lab-space-sm) var(--lab-space-xl) 2px;
+  color: var(--lab-text-tertiary);
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 600;
+}
+.lab-menu__item {
+  display: flex;
+  align-items: center;
+  gap: var(--lab-space-md);
+  width: calc(100% - 12px);
+  margin: 1px 6px;
+  padding: var(--lab-space-md) var(--lab-space-sm) var(--lab-space-md) 10px;
+  border: 0;
+  border-radius: var(--lab-radius-sm);
+  background: transparent;
+  color: var(--lab-text-secondary);
+  font: inherit;
+  font-weight: 600;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+}
+.lab-menu__item:hover {
+  background-color: var(--lab-bg-hover);
+  color: var(--lab-text-primary);
+}
+.lab-menu__item[aria-disabled="true"] {
+  cursor: default;
+  opacity: 0.6;
+}
+.lab-menu__item[aria-disabled="true"]:hover {
+  background-color: transparent;
+}
+.lab-menu__item > .lab-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--lab-fg-quaternary);
+}
+.lab-menu__item[aria-checked="true"] {
+  color: var(--lab-text-primary);
+}
+/* A tick on the right — the sidebars' filter menus. */
+.lab-menu__item .lab-menu__tick {
+  margin-left: auto;
+  color: var(--lab-fg-brand);
+  visibility: hidden;
+}
+.lab-menu__item[aria-checked="true"] .lab-menu__tick {
+  visibility: visible;
+}
+/* The 16px leading slot. A tick in it marks the current choice (menuitemradio); a checkbox box in
+   it marks a switch (menuitemcheckbox); anything else is the row's icon. */
+.lab-menu__mark {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  color: var(--lab-text-quaternary);
+}
+.lab-menu__mark > .lab-icon {
+  width: 16px;
+  height: 16px;
+}
+.lab-menu__mark .lab-menu__tick {
+  margin: 0;
+}
+.lab-menu__text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.lab-menu__sub {
+  color: var(--lab-text-quaternary);
+  font-weight: 500;
+}
+.lab-menu__hint {
+  flex: none;
+  margin-left: auto;
+  padding-right: var(--lab-space-xs);
+  color: var(--lab-text-quaternary);
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+.lab-menu__trail {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  color: var(--lab-text-quaternary);
+}
+.lab-menu hr {
+  height: 1px;
+  margin: var(--lab-space-xs) 0;
+  border: 0;
+  background-color: var(--lab-border-secondary);
+}
+.lab-menu__note {
+  margin: 0;
+  padding: var(--lab-space-md) var(--lab-space-xl);
+  color: var(--lab-text-quaternary);
+  font-size: 12px;
+  line-height: 18px;
+}
+/* The checkbox a switch row draws in its slot (Figma `_Checkbox base`, sm), for rows that are
+   buttons with role="menuitemcheckbox" rather than real inputs. */
+.lab-menu__box {
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--lab-border-primary);
+  border-radius: var(--lab-radius-xs);
+  background-color: var(--lab-bg-primary);
+}
+.lab-menu__item[aria-checked="true"] .lab-menu__box {
+  border-color: var(--lab-brand-solid);
+  background: var(--lab-brand-solid) no-repeat center / 12px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
+}
+/* The real checkboxes in the Properties panel — the responsive marks. */
+.lab-checkbox {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--lab-brand-solid);
+  cursor: pointer;
+}
+.lab-menu__item:has(.lab-checkbox:disabled) {
+  cursor: default;
+  opacity: 0.7;
+}
+.lab-menu--variants {
+  width: 256px;
+}
+.lab-menu--presets {
+  width: 304px;
+}
+/* The design's 312px, grown to fit "Copy link to this exact size" and its size beside it. */
+.lab-menu--actions {
+  width: max-content;
+  min-width: 312px;
+  max-width: 360px;
+}
+.lab-menu--components {
+  width: 288px;
+}
+/* The zoom row in the presets menu (Figma `Story tab`, Type=Tab): a segmented choice. It fills the
+   menu between its 12px margins and splits that into seven equal segments. Sized by its labels
+   instead, it came to 283px, which with both margins is 5px more than the 304px menu holds, so the
+   menu scrolled sideways. */
+.lab-zoom {
+  display: flex;
+  gap: 2px;
+  margin: 0 var(--lab-space-lg) var(--lab-space-md);
+  padding: 2px;
+  border: 1px solid var(--lab-border-secondary);
+  border-radius: var(--lab-radius-md);
+  background-color: var(--lab-bg-secondary);
+}
+.lab-zoom__btn {
+  flex: 1 1 0;
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  padding: var(--lab-space-sm) 0;
+  border: 1px solid transparent;
+  border-radius: var(--lab-radius-sm);
+  background: transparent;
+  color: var(--lab-text-quaternary);
+  font: inherit;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+}
+.lab-zoom__btn:hover {
+  color: var(--lab-text-secondary);
+}
+.lab-zoom__btn[aria-checked="true"] {
+  border-color: var(--lab-border-primary);
+  background-color: var(--lab-bg-primary);
+  box-shadow: var(--lab-shadow-xs);
+  color: var(--lab-text-secondary);
+}
+/* ---- the Properties panel (Figma `Menu`, Type=Properties) -----------------------------------
+   Not a menu: the eye's hover panel, a manual popover placed by ../chrome/navbar-client.ts. */
+.lab-props {
+  width: 288px;
+}
+.lab-props__facts {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: var(--lab-space-xs) var(--lab-space-xl) var(--lab-space-md);
+}
+.lab-props__fact {
+  display: flex;
+  align-items: center;
+  gap: var(--lab-space-md);
+  margin: 0;
+  color: var(--lab-text-tertiary);
+}
+.lab-props__dot {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  background: radial-gradient(circle, var(--lab-fg-quaternary) 3.5px, transparent 4px);
+}
+.lab-props__dot--live {
+  background: radial-gradient(circle, var(--lab-success-dot) 3.5px, transparent 4px);
+}
+.lab-props__pin {
+  color: var(--lab-pin-open);
+}
+.lab-props__source {
+  margin: 0;
+  padding: var(--lab-space-xs) var(--lab-space-xl) var(--lab-space-md);
+  color: var(--lab-text-tertiary);
+  overflow-wrap: anywhere;
+}
+.lab-props__note {
+  margin: 0;
+  padding: var(--lab-space-md) var(--lab-space-xl);
+  color: var(--lab-text-quaternary);
+  font-size: 12px;
+  line-height: 18px;
+}
+/* ---------------------------------------------------------------------------------------------
+   The tree (Figma `Tree view`, sm, as condensed on 2026-09-24): no icons, 12px text, 30px rows
+   with no gap between them, a 16px connector column per level, connector lines in neutral-300
+   with a curved end on the last child.
+   --------------------------------------------------------------------------------------------- */
+.lab-tree,
+.lab-tree__group {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.lab-tree {
+  padding: var(--lab-space-xs);
+}
+.lab-tree__node {
+  position: relative;
+  --lab-indent: calc(var(--lab-d, 0) * 24px);
+}
+.lab-tree__node > details > summary {
+  list-style: none;
+}
+.lab-tree__node > details > summary::-webkit-details-marker {
+  display: none;
+}
+.lab-tree__row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--lab-space-sm);
+  min-height: 30px;
+  padding: var(--lab-space-sm) var(--lab-space-md);
+  padding-left: calc(var(--lab-space-md) + var(--lab-indent));
+  border-radius: var(--lab-radius-sm);
+  color: var(--lab-text-tertiary);
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--lab-ease), color var(--lab-ease);
+}
+.lab-tree__row:hover {
+  background-color: var(--lab-bg-hover);
+  color: var(--lab-text-primary);
+}
+.lab-tree__row[aria-current="page"] {
+  background-color: var(--lab-bg-active);
+  color: var(--lab-text-brand-primary);
+}
+.lab-tree__row[aria-current="page"] > .lab-icon {
+  color: var(--lab-fg-brand);
+}
+.lab-tree__row[aria-disabled="true"] {
+  color: var(--lab-text-quaternary);
+  cursor: default;
+}
+.lab-tree__row > .lab-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--lab-fg-quaternary);
+}
+.lab-tree__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* A group row whose label is also a page (Pages › Services): the label is the link, the rest of
+   the row toggles. */
+.lab-tree__label > a {
+  color: inherit;
+  text-decoration: none;
+}
+.lab-tree__label > a::after {
+  content: "";
+  position: absolute;
+  inset: 0 32px 0 0;
+}
+.lab-tree__chevron {
+  width: 16px;
+  height: 16px;
+  color: var(--lab-fg-quaternary);
+  transition: transform var(--lab-ease);
+}
+details:not([open]) > summary .lab-tree__chevron {
+  transform: rotate(-90deg);
+}
+/* The status dot — the tree's one-glyph version of the live / used-by pills. */
+.lab-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+.lab-dot--live {
+  background-color: var(--lab-success-dot);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lab-success-dot) 18%, transparent);
+}
+.lab-dot--used {
+  border: 2px solid var(--lab-info-dot);
+}
+.lab-dot--open {
+  background-color: var(--lab-brand-solid);
+}
+.lab-dot--muted {
+  border: 1.5px dashed var(--lab-fg-quaternary);
+}
+.lab-tree__count {
+  flex: none;
+  color: var(--lab-text-quaternary);
+  font-size: 12px;
+  font-weight: 500;
+}
+/* Connectors. Each child draws the line of its own level in the 16px column its parent's icon
+   sits over; the last child ends it in a curve that turns towards its own row. */
+.lab-tree__group > .lab-tree__node::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(var(--lab-space-md) + var(--lab-indent) - 24px + 7.5px);
+  width: 1px;
+  background-color: var(--lab-fg-muted);
+  pointer-events: none;
+}
+.lab-tree__group > .lab-tree__node:last-child::before {
+  bottom: auto;
+  height: 15px;
+  width: 9px;
+  background: none;
+  border-left: 1px solid var(--lab-fg-muted);
+  border-bottom: 1px solid var(--lab-fg-muted);
+  border-bottom-left-radius: 8px;
+}
+.lab-tree__empty {
+  margin: var(--lab-space-md) var(--lab-space-md);
+  color: var(--lab-text-quaternary);
+}
+/* Search: rows that do not match are hidden by the tree script; this is the hook. */
+.lab-tree [data-lab-hidden] {
+  display: none;
+}
+.lab-tree mark {
+  background: transparent;
+  color: var(--lab-text-brand-secondary);
+}
+/* ---- the Sections tree (Figma `Sections tree`, ../chrome/SectionsTree.astro) ---------------- */
+/* The count and the Sort by button, above the rows. */
+.lab-stree-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--lab-space-xs) var(--lab-space-xs) var(--lab-space-xs) calc(var(--lab-space-xs) + var(--lab-space-md));
+}
+.lab-stree-head__count {
+  color: var(--lab-text-quaternary);
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+}
+.lab-stree-head__sort {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--lab-space-xs);
+  height: 28px;
+  padding: 0 var(--lab-space-sm) 0 var(--lab-space-md);
+  border: 0;
+  border-radius: var(--lab-radius-sm);
+  background: transparent;
+  color: var(--lab-text-quaternary);
+  font: inherit;
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+  cursor: pointer;
+}
+.lab-stree-head__sort b {
+  color: var(--lab-text-secondary);
+  font-weight: 600;
+}
+.lab-stree-head__sort .lab-icon {
+  width: 12px;
+  height: 12px;
+  transition: transform var(--lab-ease);
+}
+.lab-stree-head__sort:hover,
+.lab-stree-head:has(+ .lab-menu:popover-open) .lab-stree-head__sort {
+  background-color: var(--lab-bg-sunken);
+}
+.lab-stree-head:has(+ .lab-menu:popover-open) .lab-stree-head__sort .lab-icon {
+  transform: rotate(180deg);
+}
+.lab-stree-head__by-name,
+:root[data-lab-sort="name"] .lab-stree-head__by-slot {
+  display: none;
+}
+:root[data-lab-sort="name"] .lab-stree-head__by-name {
+  display: inline;
+}
+/* The sort menu (Figma `Menu`, Type=Sort): 200px, the tick leading its row. */
+.lab-menu.lab-menu--sort {
+  min-width: 200px;
+  width: 200px;
+  padding: var(--lab-space-xs) 0;
+  border-color: var(--lab-border-secondary-alt);
+  box-shadow: var(--lab-shadow-lg-3);
+}
+.lab-menu--sort .lab-menu__item {
+  width: calc(100% - 12px);
+  margin: 1px var(--lab-space-sm);
+  padding: var(--lab-space-md) var(--lab-space-sm) var(--lab-space-md) 10px;
+  color: var(--lab-text-secondary);
+  font-weight: 600;
+}
+.lab-menu--sort .lab-menu__item .lab-menu__tick {
+  order: -1;
+  margin-left: 0;
+}
+/* The rows. A remembered "Name" sort is drawn by `order` from the first paint; the script then
+   moves the rows to match (../chrome/shell-client.ts). */
+.lab-stree > li {
+  order: var(--lab-o-slot, 0);
+}
+:root[data-lab-sort="name"] .lab-stree > li {
+  order: var(--lab-o-name, 0);
+}
+.lab-stree__heading {
+  margin: var(--lab-space-xs) 0;
+  padding: var(--lab-space-lg) 0 var(--lab-space-xs) var(--lab-space-md);
+  border-top: 1px solid var(--lab-border-secondary);
+  color: var(--lab-text-quaternary);
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+}
+.lab-stree .lab-tree__row {
+  gap: var(--lab-space-sm);
+}
+/* The row you are on reads violet, without a fill — the badge carries "you are here". */
+.lab-stree .lab-tree__row[aria-current="page"] {
+  background-color: transparent;
+  color: var(--lab-text-brand-secondary);
+}
+.lab-stree .lab-tree__row[aria-current="page"]:hover {
+  background-color: var(--lab-bg-hover);
+}
+/* A section's versions: the connector runs straight down the badge column, no curve. */
+.lab-stree .lab-tree__group > .lab-tree__node::before,
+.lab-stree .lab-tree__group > .lab-tree__node:last-child::before {
+  top: 0;
+  bottom: 0;
+  height: auto;
+  width: 1px;
+  border: 0;
+  border-radius: 0;
+  background-color: var(--lab-fg-muted);
+}
+.lab-stree .lab-tree__group > .lab-tree__node > .lab-tree__row {
+  gap: var(--lab-space-md);
+}
+/* The slot badge (Figma `Slot badge`): green with its slot, a grey dash when no page mounts it,
+   violet on the row you are on. Two digits widen it. */
+.lab-slot {
+  flex: none;
+  display: inline-grid;
+  place-items: center;
+  min-width: 20px;
+  height: 16px;
+  padding: 0 3px;
+  border: 1px solid var(--lab-slot-border);
+  border-radius: var(--lab-radius-xs);
+  background-color: var(--lab-slot-bg);
+  color: var(--lab-slot-text);
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.lab-slot[data-state="unslotted"] {
+  border-color: var(--lab-slot-none-border);
+  background-color: var(--lab-slot-none-bg);
+  color: var(--lab-slot-none-text);
+}
+.lab-slot[data-state="current"] {
+  border-color: var(--lab-slot-here-border);
+  background-color: var(--lab-slot-here-bg);
+  color: var(--lab-slot-here-text);
+}
+/* ---------------------------------------------------------------------------------------------
+   Main: the navbar above, the content below.
+   --------------------------------------------------------------------------------------------- */
+.lab-main {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.lab-navbar {
+  flex: none;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--lab-space-md) var(--lab-space-lg);
+  min-height: var(--lab-navbar-h);
+  padding: var(--lab-space-md) var(--lab-space-2xl);
+  border-bottom: 1px solid var(--lab-border-secondary);
+  background-color: var(--lab-bg-primary);
+}
+.lab-navbar__panel-btn {
+  margin-left: calc(-1 * var(--lab-space-sm));
+}
+.lab-navbar__id {
+  display: flex;
+  align-items: center;
+  gap: var(--lab-space-md) var(--lab-space-lg);
+  flex-wrap: wrap;
+  min-width: 0;
+  flex: 1 1 280px;
+}
+.lab-navbar__title {
+  margin: 0;
+  min-width: 0;
+  color: var(--lab-text-primary);
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.lab-navbar__title small {
+  margin-left: var(--lab-space-sm);
+  color: var(--lab-text-quaternary);
+  font-size: 14px;
+  font-weight: 500;
+}
+.lab-navbar__meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--lab-space-sm);
+  color: var(--lab-text-quaternary);
+}
+.lab-navbar__tools {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--lab-space-md);
+}
+.lab-navbar__sep {
+  width: 1px;
+  height: 24px;
+  background-color: var(--lab-border-secondary);
+}
+/* ---- the navbar of a component or a page (Figma `Astrolab` › Lab / Components › Navbar) --------
+   One grid, `.lab-nb`, laid out by a container query on the navbar's own width — the sidebars
+   change the main area, never the viewport, so a media query would read the wrong number.
+   ONE row, 59px, when the navbar is 1040px wide or more:
+     identity · variants · previous / next · device switch + Viewport field · Comment · Parameters · ⋯
+   otherwise TWO rows, 99px, the viewport row always last:
+     identity · variants · previous / next · ⋯  /  device switch + Viewport field | Comment · Parameters
+   and under 552px THREE or FOUR rows — "The narrow navbar", after the Viewport field's rules.
+   The query's number is the navbar's content box: 1040 less its 16px side padding. Row 1 needs
+   about 468px and row 2 about 480 to 520px (Parameters is the difference), so the two rows hold
+   down to a 552px navbar. Where row 2 still runs out (the long "phone landscape" band, the panel
+   button taking its 44px), Comment and Parameters wrap under the viewport group, to the right,
+   rather than overflow. Every control is 32px tall; the device switch's outer border makes the
+   one-row bar 34px of content, which is where 59 comes from.
+   The page must never scroll sideways. Every layout fits down to a navbar of about 200px (measured
+   2026-09-24); below that nothing can, and the navbar clips its right edge instead
+   (`overflow-x: clip` — the menus and the Properties panel are popovers in the top layer, so they
+   are not clipped with it). */
+.lab-navbar:has(> .lab-nb) {
+  container: lab-navbar / inline-size;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+  gap: var(--lab-space-lg);
+  min-height: 0;
+  padding: var(--lab-space-lg) var(--lab-space-xl);
+  overflow-x: clip;
+}
+.lab-navbar:has(> .lab-nb) .lab-navbar__panel-btn {
+  margin-left: 0;
+}
+.lab-nb {
+  flex: 1;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  grid-template-areas:
+    "id variants actions"
+    "tools tools tools";
+  align-items: center;
+  gap: var(--lab-space-md);
+}
+@container lab-navbar (min-width: 1008px) {
+  .lab-nb {
+    grid-template-columns: minmax(0, 1fr) auto auto auto;
+    grid-template-areas: "id variants tools actions";
+    column-gap: var(--lab-space-lg);
+  }
+  .lab-nb .lab-nb__id {
+    padding-right: 0;
+  }
+  .lab-nb .lab-nb__tools {
+    column-gap: var(--lab-space-lg);
+  }
+}
+.lab-nb__id {
+  grid-area: id;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--lab-space-xs) 10px;
+  min-width: 0;
+  padding-right: var(--lab-space-xs);
+}
+.lab-nb__line {
+  display: flex;
+  align-items: center;
+  gap: var(--lab-space-md);
+  min-width: 0;
+  max-width: 100%;
+}
+.lab-nb__name {
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--lab-text-primary);
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* The version (`V1`) or, on a page, the route (`/services/web-design`). */
+.lab-nb__tag {
+  flex: none;
+  padding: 0 var(--lab-space-sm);
+  border: 1px solid var(--lab-border-primary);
+  border-radius: var(--lab-radius-sm);
+  color: var(--lab-text-tertiary);
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+.lab-nb__tag--route {
+  flex-shrink: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background-color: var(--lab-bg-secondary);
+}
+/* A page's second identity line: its source file, then the components it mounts. */
+.lab-nb__facts {
+  display: flex;
+  align-items: center;
+  gap: var(--lab-space-md);
+  min-width: 0;
+  max-width: 100%;
+  color: var(--lab-text-quaternary);
+  font-size: 12px;
+  line-height: 18px;
+}
+.lab-nb__source {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--lab-space-xs);
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.lab-nb__source .lab-icon {
+  width: 14px;
+  height: 14px;
+}
+/* The components chip: 22px to look at, 32px to hit. */
+.lab-nb__chip {
+  position: relative;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--lab-space-xs);
+  padding: 1px var(--lab-space-xs) 1px var(--lab-space-sm);
+  border: 1px solid var(--lab-border-primary);
+  border-radius: var(--lab-radius-sm);
+  background: transparent;
+  color: var(--lab-text-secondary);
+  font: inherit;
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.lab-nb__chip::after {
+  content: "";
+  position: absolute;
+  inset: -5px 0;
+}
+.lab-nb__chip:hover {
+  background-color: var(--lab-bg-secondary);
+}
+.lab-nb__chip .lab-icon {
+  width: 12px;
+  height: 12px;
+  color: var(--lab-text-quaternary);
+}
+.lab-nb__variants {
+  grid-area: variants;
+  display: flex;
+  align-items: center;
+  gap: var(--lab-space-md);
+}
+.lab-nb__step {
+  display: flex;
+}
+/* On two rows the space between the viewport group and the overlays is space-between's, so the gap
+   is only the least it may be before the overlays wrap: 8, which is what keeps Parameters on the row
+   at 552px. The one-row bar sizes this to its content, where the gap is the spacing, and sets 12. */
+.lab-nb__tools {
+  grid-area: tools;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--lab-space-md);
+  min-width: 0;
+}
+.lab-nb__viewport {
+  display: flex;
+  align-items: center;
+  gap: var(--lab-space-md);
+}
+/* margin-left: auto keeps the pair at the right when it wraps onto a line of its own. */
+.lab-nb__overlays {
+  display: flex;
+  align-items: center;
+  gap: var(--lab-space-xs);
+  margin-left: auto;
+}
+.lab-nb__actions {
+  grid-area: actions;
+  display: flex;
+}
+/* The navbar's buttons (Figma `Tool button`): 32px, ghost at rest. Icons at rest are
+   text-quaternary (#737373, 4.7:1) rather than the kit's #a3a3a3 — an icon-only button needs 3:1.
+   Outline for a standalone action, Pressed for a toggle that is on, and the blue Pins pressed for
+   Comment while pin mode is on, because pins are blue. */
+.lab-tool {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--lab-space-xs);
+  height: 32px;
+  padding: 7px;
+  border: 1px solid transparent;
+  border-radius: var(--lab-radius-md);
+  background: transparent;
+  color: var(--lab-text-quaternary);
+  font: inherit;
+  font-weight: 600;
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color var(--lab-ease), color var(--lab-ease), border-color var(--lab-ease);
+}
+.lab-tool .lab-icon {
+  width: 16px;
+  height: 16px;
+}
+.lab-tool__label {
+  padding: 0 2px;
+  color: var(--lab-text-tertiary);
+}
+.lab-tool:hover {
+  background-color: var(--lab-bg-secondary);
+  color: var(--lab-text-secondary);
+}
+.lab-tool:hover .lab-tool__label {
+  color: var(--lab-text-secondary);
+}
+.lab-tool--icon {
+  width: 32px;
+  padding: 0;
+}
+.lab-tool--outline {
+  border-color: var(--lab-border-primary);
+  background-color: var(--lab-bg-primary);
+  box-shadow: var(--lab-shadow-xs);
+}
+.lab-tool--outline .lab-tool__label {
+  color: var(--lab-text-secondary);
+}
+.lab-tool[aria-pressed="true"],
+.lab-tool[data-pinned] {
+  border-color: var(--lab-border-secondary);
+  background-color: var(--lab-bg-hover);
+  color: var(--lab-text-secondary);
+}
+.lab-tool[aria-pressed="true"]:hover,
+.lab-tool[data-pinned]:hover {
+  border-color: var(--lab-border-primary);
+}
+.lab-tool--pins[aria-pressed="true"] {
+  border-color: var(--lab-pins-border);
+  background-color: var(--lab-pins-bg);
+  color: var(--lab-pins-text);
+}
+.lab-tool--pins[aria-pressed="true"] .lab-tool__label {
+  color: var(--lab-pins-text);
+}
+.lab-tool--pins[aria-pressed="true"]:hover {
+  border-color: var(--lab-pins-border);
+  background-color: var(--lab-pins-bg-hover);
+}
+.lab-tool:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+.lab-tool:disabled:hover {
+  background-color: transparent;
+}
+/* The variant dropdown (Figma `Story tab`, Type=Dropdown) — at every count. */
+.lab-variant-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--lab-space-sm);
+  max-width: 260px;
+  height: 32px;
+  padding: var(--lab-space-sm) 10px var(--lab-space-sm) var(--lab-space-lg);
+  border: 1px solid var(--lab-border-primary);
+  border-radius: var(--lab-radius-md);
+  background-color: var(--lab-bg-primary);
+  box-shadow: var(--lab-shadow-xs);
+  color: var(--lab-text-secondary);
+  font: inherit;
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.lab-variant-btn:hover {
+  background-color: var(--lab-bg-secondary);
+}
+.lab-variant-btn__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.lab-variant-btn__count {
+  color: var(--lab-text-quaternary);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+.lab-variant-btn .lab-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--lab-text-quaternary);
+}
+/* The device switch (Figma `Device switch`): four 34 × 32 segments. The active one is violet —
+   "you are here"; a width that is none of the four presses none. */
+.lab-devsw {
+  flex: none;
+  display: inline-flex;
+  border: 1px solid var(--lab-border-primary);
+  border-radius: var(--lab-radius-md);
+  background-color: var(--lab-bg-primary);
+  box-shadow: var(--lab-shadow-xs);
+  overflow: hidden;
+}
+.lab-devsw__btn {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-right: 1px solid var(--lab-border-primary);
+  background: transparent;
+  color: var(--lab-text-quaternary);
+  cursor: pointer;
+}
+.lab-devsw__btn:last-child {
+  border-right: 0;
+}
+.lab-devsw__btn:hover {
+  background-color: var(--lab-bg-secondary);
+  color: var(--lab-text-secondary);
+}
+.lab-devsw__btn[aria-pressed="true"] {
+  background-color: var(--lab-bg-active);
+  color: var(--lab-brand-solid);
+}
+:root.dark .lab-devsw__btn[aria-pressed="true"] {
+  color: var(--lab-fg-brand);
+}
+.lab-shell .lab-devsw__btn:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--lab-fg-brand);
+}
+/* The Viewport field (Figma `Viewport field`): W × H typed in place, then the band and zoom as the
+   button that opens the presets. While a frame edge is dragged the numbers follow it, in violet. */
+.lab-vpf {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--lab-space-xs);
+  height: 32px;
+  padding-left: 10px;
+  border: 1px solid var(--lab-border-primary);
+  border-radius: var(--lab-radius-md);
+  background-color: var(--lab-bg-primary);
+  box-shadow: var(--lab-shadow-xs);
+  overflow: hidden;
+  color: var(--lab-text-secondary);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  transition: border-color var(--lab-ease), box-shadow var(--lab-ease);
+}
+.lab-vpf:has(.lab-vpf__num:focus) {
+  border-color: var(--lab-fg-brand);
+  box-shadow: var(--lab-shadow-xs), 0 0 0 3px color-mix(in srgb, var(--lab-fg-brand) 22%, transparent);
+}
+.lab-vpf__num {
+  width: 36px;
+  padding: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--lab-text-secondary);
+  font: inherit;
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+.lab-vpf__num--w {
+  text-align: right;
+}
+.lab-vpf__num::-webkit-outer-spin-button,
+.lab-vpf__num::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.lab-shell .lab-vpf__num:focus-visible {
+  box-shadow: none;
+  color: var(--lab-text-brand-secondary);
+}
+.lab-vpf[data-dragging] .lab-vpf__num {
+  color: var(--lab-text-brand-secondary);
+}
+.lab-vpf__x {
+  color: var(--lab-text-quaternary);
+}
+.lab-vpf__menu {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--lab-space-sm);
+  height: 100%;
+  padding: 0 var(--lab-space-md) 0 10px;
+  border: 0;
+  border-left: 1px solid var(--lab-border-secondary);
+  background: transparent;
+  font: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.lab-vpf__menu:hover {
+  background-color: var(--lab-bg-secondary);
+}
+.lab-shell .lab-vpf__menu:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--lab-fg-brand);
+}
+.lab-vpf__band {
+  color: var(--lab-text-secondary);
+  font-weight: 600;
+}
+.lab-vpf__zoom {
+  color: var(--lab-text-quaternary);
+  font-weight: 500;
+}
+.lab-vpf__menu .lab-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--lab-text-quaternary);
+}
+/* ---- the narrow navbar (no Figma frame: the design stops at two rows) --------------------------
+   Under 520px of content box — a navbar under 552px — row 1's variants and ⋯ squeeze the name to
+   nothing and row 2 is wider than the bar. So the identity gets a row of its own, with ⋯:
+     identity · ⋯  /  variants · previous / next | Comment · Parameters  /  device switch + Viewport field
+   THREE rows, and FOUR under about 400px, where the device switch and the Viewport field stop fitting
+   side by side and stack. Nothing is folded into a menu: the four device icons stay in view (the
+   ruling that condensed the viewport group kept them), and so does every other control. Comment
+   drops its word and keeps its icon, its tooltip and its accessible name, which is what lets the
+   variants row hold at 300px. The name, the variant and the band shorten with an ellipsis; the
+   name's title carries it in full. */
+@container lab-navbar (width < 520px) {
+  .lab-nb {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      "id actions"
+      "variants overlays"
+      "viewport viewport";
+  }
+  /* Its two halves become grid items of their own; nothing reads this element's box. */
+  .lab-nb__tools {
+    display: contents;
+  }
+  .lab-nb__viewport {
+    grid-area: viewport;
+    flex-wrap: wrap;
+    min-width: 0;
+  }
+  .lab-nb__overlays {
+    grid-area: overlays;
+  }
+  .lab-nb__variants,
+  .lab-variant-btn,
+  .lab-vpf__menu {
+    min-width: 0;
+  }
+  .lab-vpf {
+    flex-shrink: 1;
+    min-width: 0;
+  }
+  .lab-vpf__band {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .lab-tool--pins .lab-tool__label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
+}
+.lab-content {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+/* A listing's content (Figma `Lab / Listing`): Main's own padding, 32 on top and at the sides,
+   48 at the foot. No dot grid — a listing is a page of cards, not a stage. */
+.lab-page {
+  max-width: 1280px;
+  padding: 32px 32px 48px;
+}
+/* ---- the listing title bar (Figma `Navbar`, listing: one row, title · counts · filter chips) -- */
+.lab-navbar.lab-navbar--listing {
+  min-height: 0;
+  padding: var(--lab-space-lg) var(--lab-space-xl);
+}
+.lab-listing-bar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--lab-space-md) var(--lab-space-lg);
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 38px;
+}
+.lab-listing-bar__title {
+  margin: 0;
+  color: var(--lab-text-primary);
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.lab-listing-bar__counts {
+  margin: 0;
+  min-width: 0;
+  color: var(--lab-text-quaternary);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.lab-listing-bar > .lab-chips,
+.lab-listing-bar__end {
+  margin-left: auto;
+}
+/* Filter chips: a segmented control whose choices set the same filter as level 2's menu. */
+.lab-chips {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--lab-border-secondary);
+  border-radius: var(--lab-radius-md);
+  background-color: var(--lab-bg-secondary);
+}
+.lab-chip {
+  display: inline-flex;
+  align-items: center;
+  height: 32px;
+  padding: var(--lab-space-sm) 10px;
+  border: 1px solid transparent;
+  border-radius: var(--lab-radius-sm);
+  background: transparent;
+  color: var(--lab-text-quaternary);
+  font: inherit;
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color var(--lab-ease), color var(--lab-ease);
+}
+.lab-chip:hover {
+  color: var(--lab-text-secondary);
+}
+.lab-chip[aria-checked="true"] {
+  border-color: var(--lab-border-primary);
+  background-color: var(--lab-bg-primary);
+  box-shadow: var(--lab-shadow-xs);
+  color: var(--lab-text-secondary);
+}
+/* What waits on you — the review count on Tasks. Amber, the design's colour for it. */
+.lab-pill.lab-pill--waiting {
+  border-color: var(--lab-warning-border);
+  background-color: var(--lab-warning-bg);
+  color: var(--lab-warning-text);
+}
+.lab-pill.lab-pill--waiting::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--lab-warning-dot);
+}
+/* ---- the Tasks views' layout (no level 2 — main takes the width beside level 1) ------------ */
+/* In the lab the board scrolls sideways inside itself, which makes the board — not the page — the
+   sticky container of its column heads. Their offset below the page's toolbar then pushed every
+   head ~70px down its own column; inside the board they stick at its top. */
+.pin-board.pin-board--lab .board .col-head {
+  top: 0;
+}
+.lab-page__head {
+  margin-bottom: var(--lab-space-3xl);
+}
+.lab-page__title {
+  margin: 0 0 var(--lab-space-xs);
+  color: var(--lab-text-primary);
+  font-size: 24px;
+  line-height: 32px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+.lab-page__lede {
+  max-width: 68ch;
+  margin: 0;
+  color: var(--lab-text-tertiary);
+  font-size: 15px;
+  line-height: 24px;
+}
+.lab-section-title {
+  display: flex;
+  align-items: baseline;
+  gap: var(--lab-space-md);
+  margin: var(--lab-space-3xl) 0 var(--lab-space-lg);
+  color: var(--lab-text-primary);
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+}
+.lab-section-title small {
+  color: var(--lab-text-quaternary);
+  font-size: 14px;
+  font-weight: 500;
+}
+.lab-section-title a {
+  color: inherit;
+  text-decoration: none;
+}
+.lab-section-title a:hover {
+  color: var(--lab-text-brand-secondary);
+}
+/* ---- buttons ------------------------------------------------------------------------------- */
+.lab-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--lab-space-xs);
+  min-height: 36px;
+  padding: var(--lab-space-md) var(--lab-space-lg);
+  border: 1px solid var(--lab-border-primary);
+  border-radius: var(--lab-radius-md);
+  background-color: var(--lab-bg-primary);
+  box-shadow: var(--lab-shadow-xs);
+  color: var(--lab-text-secondary);
+  font: inherit;
+  font-weight: 600;
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color var(--lab-ease), color var(--lab-ease), border-color var(--lab-ease);
+}
+.lab-btn:hover {
+  background-color: var(--lab-bg-hover);
+  color: var(--lab-text-primary);
+}
+.lab-btn > .lab-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--lab-fg-quaternary);
+}
+.lab-btn--icon {
+  width: 36px;
+  padding: 0;
+}
+.lab-btn--sm {
+  min-height: 32px;
+  padding: var(--lab-space-sm) var(--lab-space-md);
+  font-size: 13px;
+}
+.lab-btn--sm.lab-btn--icon {
+  width: 32px;
+  padding: 0;
+}
+.lab-btn[aria-pressed="true"],
+.lab-btn[data-active] {
+  background-color: var(--lab-bg-active);
+  border-color: color-mix(in srgb, var(--lab-fg-brand) 55%, var(--lab-border-primary));
+  color: var(--lab-text-brand-primary);
+}
+.lab-btn[aria-pressed="true"] > .lab-icon,
+.lab-btn[data-active] > .lab-icon {
+  color: var(--lab-fg-brand);
+}
+.lab-btn:disabled,
+.lab-btn[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+/* A row of joined buttons — the device switch. */
+.lab-seg {
+  display: inline-flex;
+  border: 1px solid var(--lab-border-primary);
+  border-radius: var(--lab-radius-md);
+  box-shadow: var(--lab-shadow-xs);
+  overflow: hidden;
+  background-color: var(--lab-bg-primary);
+}
+.lab-seg > .lab-btn {
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+.lab-seg > .lab-btn + .lab-btn {
+  border-left: 1px solid var(--lab-border-primary);
+}
+.lab-seg > .lab-btn[data-active] {
+  background-color: var(--lab-bg-hover);
+  color: var(--lab-text-primary);
+}
+.lab-seg > .lab-btn[data-active] > .lab-icon {
+  color: var(--lab-text-secondary);
+}
+.lab-select {
+  min-height: 36px;
+  padding: var(--lab-space-md) 32px var(--lab-space-md) var(--lab-space-lg);
+  border: 1px solid var(--lab-border-primary);
+  border-radius: var(--lab-radius-md);
+  background: var(--lab-bg-primary) no-repeat right 10px center / 16px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a3a3a3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
+  box-shadow: var(--lab-shadow-xs);
+  color: var(--lab-text-secondary);
+  font: inherit;
+  font-weight: 600;
+  appearance: none;
+  cursor: pointer;
+}
+.lab-select--sm {
+  min-height: 32px;
+  padding-top: var(--lab-space-sm);
+  padding-bottom: var(--lab-space-sm);
+  font-size: 13px;
+}
+/* ---- pills (Figma/Untitled `Badge`, sm) ---------------------------------------------------- */
+.lab-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--lab-space-xs);
+  padding: 1px 8px;
+  border: 1px solid var(--lab-neutral-border);
+  border-radius: var(--lab-radius-full);
+  background-color: var(--lab-neutral-bg);
+  color: var(--lab-neutral-text);
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+.lab-pill--live {
+  border-color: var(--lab-success-border);
+  background-color: var(--lab-success-bg);
+  color: var(--lab-success-text);
+}
+.lab-pill--live::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--lab-success-dot);
+}
+.lab-pill--used {
+  border-color: var(--lab-info-border);
+  background-color: var(--lab-info-bg);
+  color: var(--lab-info-text);
+}
+.lab-pill--responsive {
+  border-color: var(--lab-info-border);
+  background-color: var(--lab-info-bg);
+  color: var(--lab-info-text);
+}
+.lab-pill--unresponsive {
+  border-style: dashed;
+  border-color: var(--lab-warning-border);
+  background-color: var(--lab-warning-bg);
+  color: var(--lab-warning-text);
+}
+.lab-pill--error {
+  border-color: var(--lab-error-border);
+  background-color: var(--lab-error-bg);
+  color: var(--lab-error-text);
+}
+.lab-pill--brand {
+  border-color: color-mix(in srgb, var(--lab-fg-brand) 40%, transparent);
+  background-color: var(--lab-bg-active);
+  color: var(--lab-text-brand-secondary);
+}
+.lab-pill--mono {
+  font-family: var(--lab-font-mono);
+  font-size: 11.5px;
+}
+/* ---- stat cards (the home page) ------------------------------------------------------------ */
+.lab-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: var(--lab-space-xl);
+}
+.lab-stat {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lab-space-lg);
+  padding: var(--lab-space-2xl);
+  background-color: var(--lab-bg-primary);
+  border: 1px solid var(--lab-border-secondary);
+  border-radius: var(--lab-radius-xl);
+  box-shadow: var(--lab-shadow-xs);
+  color: var(--lab-text-primary);
+  text-decoration: none;
+  transition: border-color var(--lab-ease), box-shadow var(--lab-ease);
+}
+.lab-stat:hover {
+  border-color: var(--lab-border-primary);
+  box-shadow: var(--lab-shadow-sm);
+}
+.lab-stat__head {
+  display: flex;
+  align-items: center;
+  gap: var(--lab-space-md);
+  color: var(--lab-text-tertiary);
+  font-weight: 600;
+}
+.lab-stat__head .lab-icon {
+  color: var(--lab-fg-quaternary);
+}
+.lab-stat__value {
+  font-size: 30px;
+  line-height: 38px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+.lab-stat__foot {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--lab-space-sm);
+}
+/* ---- the "on this page" slot list (the home page) ------------------------------------------ */
+.lab-slots {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background-color: var(--lab-bg-primary);
+  border: 1px solid var(--lab-border-secondary);
+  border-radius: var(--lab-radius-xl);
+  box-shadow: var(--lab-shadow-xs);
+  overflow: hidden;
+}
+.lab-slots__row {
+  display: grid;
+  grid-template-columns: 32px minmax(160px, 260px) 1fr;
+  align-items: center;
+  gap: var(--lab-space-lg);
+  padding: var(--lab-space-md) var(--lab-space-xl);
+}
+.lab-slots__row + .lab-slots__row {
+  border-top: 1px solid var(--lab-border-secondary);
+}
+.lab-slots__n {
+  color: var(--lab-text-quaternary);
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+}
+.lab-slots__name {
+  display: flex;
+  align-items: baseline;
+  gap: var(--lab-space-sm);
+  min-width: 0;
+  color: var(--lab-text-primary);
+  font-weight: 600;
+  text-decoration: none;
+}
+a.lab-slots__name:hover {
+  color: var(--lab-text-brand-secondary);
+}
+.lab-slots__name--bare {
+  color: var(--lab-text-tertiary);
+  font-weight: 500;
+}
+.lab-slots__file {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--lab-text-quaternary);
+  font-size: 12px;
+}
+/* ---- story and page cards ------------------------------------------------------------------ */
+.lab-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--lab-space-2xl);
+}
+.lab-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background-color: var(--lab-bg-primary);
+  border: 1px solid var(--lab-border-secondary);
+  border-radius: var(--lab-radius-xl);
+  box-shadow: var(--lab-shadow-xs);
+  overflow: hidden;
+  transition: border-color var(--lab-ease), box-shadow var(--lab-ease);
+}
+.lab-card:hover,
+.lab-card:focus-within {
+  border-color: var(--lab-border-primary);
+  box-shadow: var(--lab-shadow-sm);
+}
+.lab-card[data-lab-hidden] {
+  display: none;
+}
+.lab-card__main {
+  display: flex;
+  flex-direction: column;
+  color: inherit;
+  text-decoration: none;
+}
+.lab-card__main::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: inherit;
+}
+.lab-card__thumb {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  aspect-ratio: 16 / 10;
+  background-color: var(--lab-bg-sunken);
+  border-bottom: 1px solid var(--lab-border-secondary);
+}
+.lab-card__thumb iframe,
+.lab-card__thumb img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 0;
+  transform-origin: 0 0;
+  pointer-events: none;
+  background-color: #fff;
+}
+.lab-card__thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  background: repeating-conic-gradient(var(--lab-bg-sunken) 0 25%, var(--lab-bg-primary) 0 50%) 0 0 / 16px 16px;
+}
+.lab-card__thumb--note {
+  display: grid;
+  place-items: center;
+  padding: var(--lab-space-xl);
+  color: var(--lab-text-quaternary);
+  font-size: 13px;
+  text-align: center;
+}
+.lab-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lab-space-sm);
+  padding: var(--lab-space-lg) var(--lab-space-xl) var(--lab-space-xl);
+}
+.lab-card__name {
+  display: flex;
+  align-items: baseline;
+  gap: var(--lab-space-sm);
+  min-width: 0;
+  color: var(--lab-text-primary);
+  font-weight: 600;
+}
+.lab-card__name span:first-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.lab-card__version {
+  flex: none;
+  color: var(--lab-text-quaternary);
+  font-size: 12px;
+  font-weight: 500;
+}
+.lab-card__sub {
+  color: var(--lab-text-tertiary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.lab-card__pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--lab-space-xs);
+  margin-top: var(--lab-space-xs);
+}
+/* VS Code and staging, over the thumbnail's corner, above the card's own link. */
+.lab-card__links {
+  position: absolute;
+  top: var(--lab-space-md);
+  right: var(--lab-space-md);
+  z-index: 2;
+  display: flex;
+  gap: var(--lab-space-xs);
+  opacity: 0;
+  transition: opacity var(--lab-ease);
+}
+.lab-card:hover .lab-card__links,
+.lab-card:focus-within .lab-card__links {
+  opacity: 1;
+}
+.lab-card__links .lab-icon-btn {
+  width: 28px;
+  height: 28px;
+  background-color: var(--lab-bg-primary);
+  border: 1px solid var(--lab-border-secondary);
+  box-shadow: var(--lab-shadow-xs);
+}
+.lab-card__links .lab-icon-btn .lab-icon {
+  width: 16px;
+  height: 16px;
+}
+.lab-empty {
+  padding: 48px var(--lab-space-3xl);
+  border: 1px dashed var(--lab-border-primary);
+  border-radius: var(--lab-radius-xl);
+  color: var(--lab-text-quaternary);
+  text-align: center;
+}
+.lab-empty strong {
+  display: block;
+  margin-bottom: var(--lab-space-xs);
+  color: var(--lab-text-primary);
+  font-size: 16px;
+  line-height: 24px;
+}
+/* ---------------------------------------------------------------------------------------------
+   The viewport stage — the story or page in an <iframe> whose logical size you set. Zoom is a
+   transform on the wrapper, so the frame's own width (and so its breakpoints) never changes.
+   --------------------------------------------------------------------------------------------- */
+.lab-vp {
+  position: absolute;
+  inset: 0;
+}
+/* The preview's own light/dark, apart from the chrome's (decided 2026-09-24). The iframe's
+   color-scheme is what `prefers-color-scheme` reads inside it, so it is pinned here — or a dark
+   chrome would quietly turn every preview dark — and the preview theme switch sets it. */
+.lab-vp-wrapper iframe,
+.lab-card__thumb iframe {
+  color-scheme: light;
+}
+.lab-vp-wrapper iframe[data-theme="dark"] {
+  color-scheme: dark;
+}
+/* The live size while a handle is being dragged. */
+.lab-vp-live {
+  position: absolute;
+  right: 22px;
+  bottom: 22px;
+  z-index: 2;
+  display: none;
+  padding: 2px 8px;
+  border-radius: var(--lab-radius-sm);
+  background-color: var(--lab-text-primary);
+  color: var(--lab-bg-primary);
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+}
+.lab-vp[data-dragging] .lab-vp-live {
+  display: block;
+}
+.lab-vp-stage {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  overflow: auto;
+  background-color: var(--lab-bg-secondary);
+  background-image: radial-gradient(color-mix(in srgb, var(--lab-fg-quaternary) 45%, transparent) 1px, transparent 1px);
+  background-size: 16px 16px;
+}
+.lab-vp-box {
+  position: relative;
+  flex: none;
+  margin: auto;
+  padding: var(--lab-space-xl);
+  box-sizing: content-box;
+  overflow: hidden;
+}
+.lab-vp-wrapper {
+  position: relative;
+  transform-origin: 0 0;
+  border-radius: 2px;
+  outline: 1px solid var(--lab-border-primary);
+  background-color: #fff;
+  box-shadow: var(--lab-shadow-lg);
+}
+.lab-vp-wrapper iframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background-color: #fff;
+}
+.lab-vp[data-dragging] .lab-vp-stage {
+  user-select: none;
+}
+.lab-vp-handle {
+  position: absolute;
+  touch-action: none;
+}
+.lab-vp-handle::after {
+  content: "";
+  position: absolute;
+  border-radius: var(--lab-radius-full);
+  background-color: var(--lab-text-quaternary);
+  transition: background-color var(--lab-ease);
+}
+.lab-vp-handle:hover::after,
+.lab-vp[data-dragging="x"] .lab-vp-handle--e::after,
+.lab-vp[data-dragging="y"] .lab-vp-handle--s::after,
+.lab-vp[data-dragging="xy"] .lab-vp-handle--se::after {
+  background-color: var(--lab-fg-brand);
+}
+.lab-vp-handle--e {
+  top: 16px;
+  right: 0;
+  bottom: 16px;
+  width: 16px;
+  cursor: ew-resize;
+}
+.lab-vp-handle--e::after {
+  top: 50%;
+  left: 5px;
+  width: 5px;
+  height: 40px;
+  transform: translateY(-50%);
+}
+.lab-vp-handle--s {
+  left: 16px;
+  right: 16px;
+  bottom: 0;
+  height: 16px;
+  cursor: ns-resize;
+}
+.lab-vp-handle--s::after {
+  left: 50%;
+  top: 5px;
+  width: 40px;
+  height: 5px;
+  transform: translateX(-50%);
+}
+.lab-vp-handle--se {
+  right: 0;
+  bottom: 0;
+  width: 20px;
+  height: 20px;
+  cursor: nwse-resize;
+}
+.lab-vp-handle--se::after {
+  top: 4px;
+  left: 4px;
+  width: 9px;
+  height: 9px;
+}
+/* ---- the pins on the frame, and the Comment hint --------------------------------------------
+   Figma `Pin`: 24px at every zoom, its bottom-left corner the anchor, set on the element's top-left.
+   Open pins are blue and resolved pins grey (ruled). The number and the ring are bg-primary, which
+   passes on the blue in both themes where white would not in dark. Drawn by
+   ../chrome/navbar-client.ts, in the chrome over the frame — never inside it. */
+:root {
+  --lab-pin-open: #2563eb; /* Component colors/Utility/Blue/utility-blue-600 */
+  --lab-pin-resolved: #737373; /* Colors/Foreground/fg-quaternary_hover */
+  --lab-pins-bg: #eff6ff; /* utility-blue-50 — Comment while pin mode is on */
+  --lab-pins-bg-hover: #dbeafe; /* utility-blue-100 */
+  --lab-pins-border: #bfdbfe; /* utility-blue-200 */
+  --lab-pins-text: #1d4ed8; /* utility-blue-700 */
+}
+:root.dark {
+  --lab-pin-open: #60a5fa; /* utility-blue-600, Dark mode */
+  --lab-pin-resolved: #a3a3a3;
+  --lab-pins-bg: #172554;
+  --lab-pins-bg-hover: #1e3a8a;
+  --lab-pins-border: #1e40af;
+  --lab-pins-text: #93c5fd;
+}
+.lab-vp-pins {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+.lab-pin {
+  position: absolute;
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--lab-bg-primary);
+  border-radius: 12px 12px 12px 2px;
+  background-color: var(--lab-pin-open);
+  color: var(--lab-bg-primary);
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  text-decoration: none;
+  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+  pointer-events: auto;
+  cursor: pointer;
+}
+.lab-pin[data-state="resolved"] {
+  background-color: var(--lab-pin-resolved);
+}
+/* While Comment is picking: what a click does, and how to stop. */
+.lab-vp-hint {
+  position: absolute;
+  top: var(--lab-space-sm);
+  left: 50%;
+  z-index: 3;
+  margin: 0;
+  padding: 3px var(--lab-space-lg);
+  border-radius: var(--lab-radius-full);
+  background-color: var(--lab-text-primary);
+  color: var(--lab-bg-primary);
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 600;
+  white-space: nowrap;
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+/* ---- the parameters drawer ---------------------------------------------------------------------
+   On the stage's right edge, present only when the story registered parameters through
+   @orbytes/astrolab/params. Built from the Figma components Parameters drawer (20074:3489), Drawer
+   group (20072:259700) and Param row (20072:259490); the markup is ../chrome/params-client.ts.
+   It overlays the canvas and never resizes it — resizing would change the preview's width and trip
+   its breakpoints. Every rule here is anchored on .lab-params. */
+.lab-params {
+  --lab-params-shadow: 0 20px 24px -4px rgba(0, 0, 0, 0.08), 0 8px 8px -4px rgba(0, 0, 0, 0.03),
+    0 3px 3px -1.5px rgba(0, 0, 0, 0.04); /* Shadows/shadow-xl */
+  --lab-params-track: #e5e5e5; /* Colors/Background/bg-quaternary — the slider's empty track */
+  --lab-params-switch-off: #f5f5f5; /* Colors/Background/bg-tertiary — a switch that is off */
+  --lab-params-swatch-edge: rgba(0, 0, 0, 0.1); /* Component colors/Alpha/alpha-black-10 */
+  --lab-params-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a3a3a3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  width: 340px;
+  max-width: 100%;
+  background-color: var(--lab-bg-primary);
+  border-left: 1px solid var(--lab-border-secondary);
+  box-shadow: var(--lab-params-shadow);
+  color: var(--lab-text-secondary);
+  font-size: 14px;
+  line-height: 20px;
+}
+:root.dark .lab-params {
+  --lab-params-shadow: var(--lab-shadow-lg);
+  --lab-params-track: #333333;
+  --lab-params-switch-off: #262626;
+  --lab-params-swatch-edge: rgba(255, 255, 255, 0.14);
+}
+.lab-params[hidden] {
+  display: none;
+}
+/* The header: title, the control count, close. */
+.lab-params .vpp__header {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--lab-space-md);
+  padding: var(--lab-space-lg) var(--lab-space-lg) var(--lab-space-lg) var(--lab-space-xl);
+  border-bottom: 1px solid var(--lab-border-secondary);
+}
+.lab-params .vpp__heading {
+  display: flex;
+  align-items: center;
+  gap: var(--lab-space-md);
+  min-width: 0;
+}
+.lab-params .vpp__heading-title {
+  margin: 0;
+  color: var(--lab-text-primary);
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+}
+.lab-params .vpp__count {
+  padding: 2px 8px;
+  border: 1px solid var(--lab-neutral-border);
+  border-radius: var(--lab-radius-full);
+  background-color: var(--lab-neutral-bg);
+  color: var(--lab-neutral-text);
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+/* Close, Reset and Copy: the ghost tool button, 32 × 32. At rest the icon is #737373 (4.7:1), not
+   the lighter fg-quaternary — an icon-only button needs 3:1. */
+.lab-params .vpp__icon-btn {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--lab-radius-md);
+  background: transparent;
+  color: var(--lab-text-quaternary);
+  cursor: pointer;
+  transition: background-color var(--lab-ease), color var(--lab-ease);
+}
+.lab-params .vpp__icon-btn:hover {
+  background-color: var(--lab-bg-hover);
+  color: var(--lab-text-secondary);
+}
+/* The body scrolls; the header and footer stay put. */
+.lab-params .vpp__scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 0 var(--lab-space-xl);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+/* One registered group — a <details>. */
+.lab-params .vpp__group {
+  position: relative;
+  padding: var(--lab-space-lg) 0;
+}
+.lab-params .vpp__group + .vpp__group {
+  border-top: 1px solid var(--lab-border-secondary);
+}
+.lab-params .vpp__summary {
+  display: flex;
+  align-items: center;
+  gap: var(--lab-space-md);
+  min-height: 32px;
+  border-radius: var(--lab-radius-sm);
+  list-style: none;
+  cursor: pointer;
+}
+.lab-params .vpp__summary::-webkit-details-marker {
+  display: none;
+}
+.lab-params .vpp__group[open] > .vpp__summary {
+  padding-right: 72px; /* room for Reset and Copy, which sit over this row */
+}
+/* With a source link the header row is 38 tall: the title on top, the link tucked under it. */
+.lab-params .vpp__group[open][data-source] > .vpp__summary {
+  min-height: 38px;
+}
+.lab-params .vpp__group[open][data-source] .vpp__title {
+  align-self: flex-start;
+}
+.lab-params .vpp__chev {
+  color: var(--lab-fg-quaternary);
+  transition: transform var(--lab-ease);
+}
+.lab-params .vpp__group:not([open]) .vpp__chev {
+  transform: rotate(-90deg);
+}
+.lab-params .vpp__title {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--lab-text-primary);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+.lab-params .vpp__summary-count {
+  flex: none;
+  color: var(--lab-text-quaternary);
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+}
+.lab-params .vpp__group[open] .vpp__summary-count {
+  display: none;
+}
+.lab-params .vpp__source {
+  position: relative;
+  display: block;
+  width: fit-content;
+  max-width: calc(100% - 96px);
+  margin: -18px 0 0 24px;
+  overflow: hidden;
+  color: var(--lab-text-brand-secondary);
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.lab-params .vpp__source:hover {
+  text-decoration: underline;
+}
+.lab-params .vpp__actions {
+  position: absolute;
+  top: var(--lab-space-lg);
+  right: 0;
+  display: flex;
+}
+.lab-params .vpp__group[data-source] > .vpp__actions {
+  top: calc(var(--lab-space-lg) + 3px); /* centred on the 38px header row */
+}
+.lab-params .vpp__note {
+  margin: var(--lab-space-md) 0 0;
+  padding-left: 24px;
+  color: var(--lab-text-tertiary);
+  font-size: 12px;
+  line-height: 18px;
+}
+.lab-params .vpp__controls {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lab-space-md);
+  margin-top: var(--lab-space-md);
+  padding-top: var(--lab-space-xs);
+}
+.lab-params .vpp__status {
+  margin: var(--lab-space-md) 0 0;
+  color: var(--lab-text-tertiary);
+  font-size: 12px;
+  line-height: 18px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+/* One row per control: the label on the left, the control in a fixed 144px column so every
+   control starts on one edge. The label wraps rather than truncates. */
+.lab-params .vpp__row {
+  display: flex;
+  align-items: center;
+  gap: var(--lab-space-lg);
+  min-height: 32px;
+}
+.lab-params .vpp__label {
+  display: flex;
+  flex: 1 1 0;
+  align-items: center;
+  gap: var(--lab-space-xs);
+  min-width: 0;
+}
+.lab-params .vpp__label-text {
+  max-width: 136px;
+  color: var(--lab-text-secondary);
+  overflow-wrap: anywhere;
+}
+.lab-params .vpp__help {
+  width: 12px;
+  height: 12px;
+  color: var(--lab-fg-quaternary);
+}
+.lab-params .vpp__control {
+  display: flex;
+  flex: none;
+  align-items: center;
+  width: 144px;
+}
+.lab-params .vpp__row--range .vpp__control {
+  gap: var(--lab-space-md);
+}
+/* Slider — unitless tuning values only. Track 6px, fill brand, a 16px handle. */
+.lab-params .vpp__range {
+  flex: 1 1 0;
+  min-width: 0;
+  height: 20px;
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+}
+.lab-params .vpp__range::-webkit-slider-runnable-track {
+  height: 6px;
+  border-radius: var(--lab-radius-full);
+  background: linear-gradient(
+    to right,
+    var(--lab-brand-solid) var(--lab-params-fill, 0%),
+    var(--lab-params-track) var(--lab-params-fill, 0%)
+  );
+}
+.lab-params .vpp__range::-webkit-slider-thumb {
+  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+  margin-top: -5px;
+  border: 2px solid var(--lab-brand-solid);
+  border-radius: 50%;
+  background-color: #ffffff;
+  box-shadow: var(--lab-shadow-sm);
+  -webkit-appearance: none;
+  appearance: none;
+}
+.lab-params .vpp__range::-moz-range-track {
+  height: 6px;
+  border-radius: var(--lab-radius-full);
+  background-color: var(--lab-params-track);
+}
+.lab-params .vpp__range::-moz-range-progress {
+  height: 6px;
+  border-radius: var(--lab-radius-full);
+  background-color: var(--lab-brand-solid);
+}
+.lab-params .vpp__range::-moz-range-thumb {
+  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--lab-brand-solid);
+  border-radius: 50%;
+  background-color: #ffffff;
+  box-shadow: var(--lab-shadow-sm);
+}
+.lab-params .vpp__range:focus-visible {
+  box-shadow: none;
+}
+.lab-params .vpp__range:focus-visible::-webkit-slider-thumb {
+  box-shadow: var(--lab-focus-ring);
+}
+.lab-params .vpp__range:focus-visible::-moz-range-thumb {
+  box-shadow: var(--lab-focus-ring);
+}
+.lab-params .vpp__readout {
+  min-width: 40px;
+  color: var(--lab-text-primary);
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  white-space: nowrap;
+}
+/* The outline field every other control sits in: 32px, border-primary, radius 8, shadow-xs. */
+.lab-params .vpp__field,
+.lab-params .vpp__select {
+  box-sizing: border-box;
+  flex: 1 1 0;
+  min-width: 0;
+  height: 32px;
+  border: 1px solid var(--lab-border-primary);
+  border-radius: var(--lab-radius-md);
+  background-color: var(--lab-bg-primary);
+  box-shadow: var(--lab-shadow-xs);
+  color: var(--lab-text-primary);
+  font: inherit;
+  transition: border-color var(--lab-ease), box-shadow var(--lab-ease);
+}
+.lab-params .vpp__field {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+.lab-params .vpp__field:focus-within,
+.lab-params .vpp__select:focus-visible {
+  border-color: var(--lab-fg-brand);
+  box-shadow: var(--lab-shadow-xs), 0 0 0 3px color-mix(in srgb, var(--lab-fg-brand) 22%, transparent);
+}
+.lab-params .vpp__select {
+  padding: 0 30px 0 12px;
+  background: var(--lab-bg-primary) var(--lab-params-chevron) no-repeat right 10px center / 16px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+}
+/* Number + unit — every size. The value is typed (↑ / ↓ step it); the unit is a select joined
+   on its right. */
+.lab-params .vpp__number {
+  flex: 1 1 0;
+  min-width: 0;
+  height: 100%;
+  padding: 0 8px 0 12px;
+  border: 0;
+  background: transparent;
+  color: var(--lab-text-primary);
+  font: inherit;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.lab-params .vpp__number::-webkit-inner-spin-button,
+.lab-params .vpp__number::-webkit-outer-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}
+.lab-params .vpp__number:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+.lab-params .vpp__unit {
+  flex: none;
+  width: 64px;
+  height: 100%;
+  padding: 0 22px 0 10px;
+  border: 0;
+  border-left: 1px solid var(--lab-border-primary);
+  border-radius: 0;
+  background: transparent var(--lab-params-chevron) no-repeat right 6px center / 16px;
+  color: var(--lab-text-secondary);
+  font: inherit;
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+}
+.lab-params .vpp__unit:focus-visible {
+  outline: none;
+  box-shadow: none;
+  background-color: var(--lab-bg-hover);
+}
+.lab-params .vpp__unit:disabled {
+  background-image: none;
+  color: var(--lab-text-secondary);
+  opacity: 1;
+  cursor: default;
+}
+/* Colour — the native picker drawn as a 20px swatch, and the hex beside it. */
+.lab-params .vpp__field--color {
+  gap: var(--lab-space-md);
+  padding: 0 10px 0 6px;
+  cursor: pointer;
+}
+.lab-params .vpp__swatch {
+  box-sizing: border-box;
+  flex: none;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 1px solid var(--lab-params-swatch-edge);
+  border-radius: var(--lab-radius-full);
+  background: none;
+  overflow: hidden;
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+}
+.lab-params .vpp__swatch::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+.lab-params .vpp__swatch::-webkit-color-swatch {
+  border: 0;
+  border-radius: var(--lab-radius-full);
+}
+.lab-params .vpp__swatch::-moz-color-swatch {
+  border: 0;
+  border-radius: var(--lab-radius-full);
+}
+.lab-params .vpp__swatch:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+.lab-params .vpp__hex {
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--lab-text-primary);
+  font-variant-numeric: tabular-nums;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+/* Toggle — <input type="checkbox" role="switch">, the kit's switch at sm: 36 × 20. */
+.lab-params .vpp__switch {
+  position: relative;
+  box-sizing: border-box;
+  flex: none;
+  width: 36px;
+  height: 20px;
+  margin: 0;
+  border: 0.5px solid var(--lab-border-secondary);
+  border-radius: var(--lab-radius-full);
+  background-color: var(--lab-params-switch-off);
+  cursor: pointer;
+  transition: background-color var(--lab-ease);
+  -webkit-appearance: none;
+  appearance: none;
+}
+.lab-params .vpp__switch::before {
+  content: "";
+  position: absolute;
+  top: 1.5px;
+  left: 1.5px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #ffffff;
+  box-shadow: var(--lab-shadow-sm);
+  transition: transform var(--lab-ease);
+}
+.lab-params .vpp__switch:checked {
+  border-color: transparent;
+  background-color: var(--lab-brand-solid);
+}
+.lab-params .vpp__switch:checked::before {
+  transform: translateX(16px);
+}
+/* The footer: one line saying what the last action did. Hidden until there is something to say. */
+.lab-params .vpp__footer {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--lab-space-md);
+  padding: 10px var(--lab-space-xl);
+  border-top: 1px solid var(--lab-border-secondary);
+}
+.lab-params .vpp__footer[hidden] {
+  display: none;
+}
+.lab-params .vpp__footer-line {
+  flex: 1 1 0;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--lab-text-quaternary);
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* ---- the asset grid ------------------------------------------------------------------------ */
+.lab-asset {
+  scroll-margin-top: var(--lab-space-3xl);
+}
+.lab-asset:target {
+  border-color: var(--lab-fg-brand);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lab-fg-brand) 25%, transparent);
+}
+.lab-asset .lab-card__thumb {
+  aspect-ratio: 4 / 3;
+}
+.lab-kv {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 2px var(--lab-space-md);
+  margin: 0;
+  color: var(--lab-text-quaternary);
+  font-size: 12px;
+  line-height: 18px;
+}
+.lab-kv dt {
+  font-weight: 500;
+}
+.lab-kv dd {
+  margin: 0;
+  min-width: 0;
+  color: var(--lab-text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* ---- placeholder pages (Support, Settings) ------------------------------------------------- */
+.lab-placeholder {
+  display: grid;
+  place-items: center;
+  min-height: 100%;
+  padding: 48px;
+}
+.lab-placeholder__box {
+  max-width: 440px;
+  text-align: center;
+  color: var(--lab-text-tertiary);
+}
+.lab-placeholder__icon {
+  display: inline-grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  margin-bottom: var(--lab-space-xl);
+  border: 1px solid var(--lab-border-secondary);
+  border-radius: var(--lab-radius-lg);
+  background-color: var(--lab-bg-primary);
+  box-shadow: var(--lab-shadow-xs);
+  color: var(--lab-text-quaternary);
+}
+.lab-placeholder h1 {
+  margin: 0 0 var(--lab-space-md);
+  color: var(--lab-text-primary);
+  font-size: 18px;
+  line-height: 28px;
+  font-weight: 600;
+}
+.lab-placeholder p {
+  margin: 0;
+}
+/* ---- small screens ------------------------------------------------------------------------- */
+@media (max-width: 1023px) {
+  .lab-page {
+    padding: var(--lab-space-2xl);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .lab-shell *,
+  .lab-shell *::before,
+  .lab-shell *::after {
+    transition-duration: 0ms !important;
+    animation-duration: 0ms !important;
+  }
 }