@nafisazizir/ziiz 0.1.0

package/theme.css

@@ -0,0 +1,1400 @@
+/* ziiz design layer: ramp tokens, Tailwind theme mapping, base styles,
+   materials, type roles and the prose layer. Import-free on purpose (only
+   Tailwind directives and plain CSS), so a consuming app can pull in the whole
+   design system with a single `@import "@nafisazizir/ziiz/theme.css"` without
+   re-bundling Tailwind, animation presets or the shadcn slot bridge (that
+   lives in ./shadcn.css). */
+
+@custom-variant dark (&:is(.dark *));
+
+/* Font contract: the app sets --font-sans and --font-mono on html or :root
+   (next/font's variable class, or a plain declaration next to @font-face).
+   The type roles below only ever reference these two. Neither is redeclared
+   here, so an app that sets nothing falls back to Tailwind's default stacks
+   instead of a self-referencing variable and the browser's serif. */
+@theme inline {
+  --font-heading: var(--font-sans);
+
+  /* Multiplicative radius scale off --radius; materials pin onto it. */
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+/* ziiz theme tokens */
+@theme inline {
+  --shadow-2xs: var(--ds-shadow-2xs);
+  --shadow-xs: var(--ds-shadow-xs);
+  --shadow-sm: var(--ds-shadow-small);
+  --shadow-md: var(--ds-shadow-medium);
+  --shadow-lg: var(--ds-shadow-large);
+  --shadow-xl: var(--ds-shadow-xl);
+  --shadow-2xl: var(--ds-shadow-2xl);
+
+  /* The ramp is the whole palette. Stock Tailwind colors (sky-*, yellow-*,
+     *-50, *-950 outside gray, ...) are wiped so an off-ramp class fails to
+     compile instead of silently painting. white/black survive for overlays
+     and content that must be literal (QR codes, mix-blend). */
+  --color-*: initial;
+  --color-white: var(--ds-white);
+  --color-black: var(--ds-black);
+
+  --color-background-100: var(--ds-background-100);
+  --color-background-200: var(--ds-background-200);
+
+  --color-gray-100: var(--ds-gray-100);
+  --color-gray-200: var(--ds-gray-200);
+  --color-gray-300: var(--ds-gray-300);
+  --color-gray-400: var(--ds-gray-400);
+  --color-gray-500: var(--ds-gray-500);
+  --color-gray-600: var(--ds-gray-600);
+  --color-gray-700: var(--ds-gray-700);
+  --color-gray-800: var(--ds-gray-800);
+  --color-gray-900: var(--ds-gray-900);
+  --color-gray-950: var(--ds-gray-950);
+  --color-gray-1000: var(--ds-gray-1000);
+
+  --color-gray-alpha-100: var(--ds-gray-alpha-100);
+  --color-gray-alpha-200: var(--ds-gray-alpha-200);
+  --color-gray-alpha-300: var(--ds-gray-alpha-300);
+  --color-gray-alpha-400: var(--ds-gray-alpha-400);
+  --color-gray-alpha-500: var(--ds-gray-alpha-500);
+  --color-gray-alpha-600: var(--ds-gray-alpha-600);
+  --color-gray-alpha-700: var(--ds-gray-alpha-700);
+  --color-gray-alpha-800: var(--ds-gray-alpha-800);
+  --color-gray-alpha-900: var(--ds-gray-alpha-900);
+  --color-gray-alpha-1000: var(--ds-gray-alpha-1000);
+
+  --color-blue-100: var(--ds-blue-100);
+  --color-blue-200: var(--ds-blue-200);
+  --color-blue-300: var(--ds-blue-300);
+  --color-blue-400: var(--ds-blue-400);
+  --color-blue-500: var(--ds-blue-500);
+  --color-blue-600: var(--ds-blue-600);
+  --color-blue-700: var(--ds-blue-700);
+  --color-blue-800: var(--ds-blue-800);
+  --color-blue-900: var(--ds-blue-900);
+  --color-blue-1000: var(--ds-blue-1000);
+
+  --color-red-100: var(--ds-red-100);
+  --color-red-200: var(--ds-red-200);
+  --color-red-300: var(--ds-red-300);
+  --color-red-400: var(--ds-red-400);
+  --color-red-500: var(--ds-red-500);
+  --color-red-600: var(--ds-red-600);
+  --color-red-700: var(--ds-red-700);
+  --color-red-800: var(--ds-red-800);
+  --color-red-900: var(--ds-red-900);
+  --color-red-1000: var(--ds-red-1000);
+
+  --color-amber-100: var(--ds-amber-100);
+  --color-amber-200: var(--ds-amber-200);
+  --color-amber-300: var(--ds-amber-300);
+  --color-amber-400: var(--ds-amber-400);
+  --color-amber-500: var(--ds-amber-500);
+  --color-amber-600: var(--ds-amber-600);
+  --color-amber-700: var(--ds-amber-700);
+  --color-amber-800: var(--ds-amber-800);
+  --color-amber-900: var(--ds-amber-900);
+  --color-amber-1000: var(--ds-amber-1000);
+
+  --color-green-100: var(--ds-green-100);
+  --color-green-200: var(--ds-green-200);
+  --color-green-300: var(--ds-green-300);
+  --color-green-400: var(--ds-green-400);
+  --color-green-500: var(--ds-green-500);
+  --color-green-600: var(--ds-green-600);
+  --color-green-700: var(--ds-green-700);
+  --color-green-800: var(--ds-green-800);
+  --color-green-900: var(--ds-green-900);
+  --color-green-1000: var(--ds-green-1000);
+
+  --color-teal-100: var(--ds-teal-100);
+  --color-teal-200: var(--ds-teal-200);
+  --color-teal-300: var(--ds-teal-300);
+  --color-teal-400: var(--ds-teal-400);
+  --color-teal-500: var(--ds-teal-500);
+  --color-teal-600: var(--ds-teal-600);
+  --color-teal-700: var(--ds-teal-700);
+  --color-teal-800: var(--ds-teal-800);
+  --color-teal-900: var(--ds-teal-900);
+  --color-teal-1000: var(--ds-teal-1000);
+
+  --color-purple-100: var(--ds-purple-100);
+  --color-purple-200: var(--ds-purple-200);
+  --color-purple-300: var(--ds-purple-300);
+  --color-purple-400: var(--ds-purple-400);
+  --color-purple-500: var(--ds-purple-500);
+  --color-purple-600: var(--ds-purple-600);
+  --color-purple-700: var(--ds-purple-700);
+  --color-purple-800: var(--ds-purple-800);
+  --color-purple-900: var(--ds-purple-900);
+  --color-purple-1000: var(--ds-purple-1000);
+
+  --color-pink-100: var(--ds-pink-100);
+  --color-pink-200: var(--ds-pink-200);
+  --color-pink-300: var(--ds-pink-300);
+  --color-pink-400: var(--ds-pink-400);
+  --color-pink-500: var(--ds-pink-500);
+  --color-pink-600: var(--ds-pink-600);
+  --color-pink-700: var(--ds-pink-700);
+  --color-pink-800: var(--ds-pink-800);
+  --color-pink-900: var(--ds-pink-900);
+  --color-pink-1000: var(--ds-pink-1000);
+}
+
+:root {
+  --radius: 0.875rem;
+  --ds-black: oklch(0 0 0);
+  --ds-white: oklch(1 0 0);
+  --ds-background-100: oklch(1 0 0);
+  --ds-background-200: oklch(0.984 0 0);
+  --ds-gray-100: oklch(0.961 0 0);
+  --ds-gray-200: oklch(0.94 0 0);
+  --ds-gray-300: oklch(0.925 0 0);
+  --ds-gray-400: oklch(0.937 0 0);
+  --ds-gray-500: oklch(0.836 0 0);
+  --ds-gray-600: oklch(0.732 0 0);
+  --ds-gray-700: oklch(0.65 0 0);
+  --ds-gray-800: oklch(0.59 0 0);
+  --ds-gray-900: oklch(0.51 0 0);
+  --ds-gray-950: oklch(0.3 0 0);
+  --ds-gray-1000: oklch(0 0 0);
+  --ds-gray-alpha-100: oklch(0 0 0 / 0.05);
+  --ds-gray-alpha-200: oklch(0 0 0 / 0.081);
+  --ds-gray-alpha-300: oklch(0 0 0 / 0.1);
+  --ds-gray-alpha-400: oklch(0 0 0 / 0.08);
+  --ds-gray-alpha-500: oklch(0 0 0 / 0.21);
+  --ds-gray-alpha-600: oklch(0 0 0 / 0.24);
+  --ds-gray-alpha-700: oklch(0 0 0 / 0.44);
+  --ds-gray-alpha-800: oklch(0 0 0 / 0.51);
+  --ds-gray-alpha-900: oklch(0 0 0 / 0.6);
+  --ds-gray-alpha-1000: oklch(0 0 0 / 1);
+  --ds-blue-100: oklch(97.32% 0.0141 251.56);
+  --ds-blue-200: oklch(96.29% 0.0195 250.59);
+  --ds-blue-300: oklch(94.58% 0.0293 249.85);
+  --ds-blue-400: oklch(91.58% 0.0473 245.12);
+  --ds-blue-500: oklch(82.75% 0.0979 248.48);
+  --ds-blue-600: oklch(73.08% 0.1583 248.13);
+  --ds-blue-700: oklch(57.61% 0.2508 258.23);
+  --ds-blue-800: oklch(51.51% 0.2399 257.85);
+  --ds-blue-900: oklch(53.18% 0.2399 256.99);
+  --ds-blue-1000: oklch(26.67% 0.1099 254.34);
+  --ds-red-100: oklch(96.5% 0.0223 13.09);
+  --ds-red-200: oklch(95.41% 0.0299 14.25);
+  --ds-red-300: oklch(94.33% 0.0369 15.01);
+  --ds-red-400: oklch(91.51% 0.0471 19.8);
+  --ds-red-500: oklch(84.47% 0.1018 17.71);
+  --ds-red-600: oklch(71.12% 0.1881 21.22);
+  --ds-red-700: oklch(62.56% 0.2524 23.03);
+  --ds-red-800: oklch(58.19% 0.2482 25.15);
+  --ds-red-900: oklch(54.99% 0.232 25.29);
+  --ds-red-1000: oklch(24.8% 0.1041 18.86);
+  --ds-amber-100: oklch(97.48% 0.0331 85.79);
+  --ds-amber-200: oklch(96.81% 0.0495 90.24);
+  --ds-amber-300: oklch(95.93% 0.0636 90.52);
+  --ds-amber-400: oklch(91.02% 0.1322 88.25);
+  --ds-amber-500: oklch(86.55% 0.1583 79.63);
+  --ds-amber-600: oklch(80.25% 0.1953 73.59);
+  --ds-amber-700: oklch(81.87% 0.1969 76.46);
+  --ds-amber-800: oklch(77.21% 0.1991 64.28);
+  --ds-amber-900: oklch(52.79% 0.1496 54.65);
+  --ds-amber-1000: oklch(30.83% 0.099 45.48);
+  --ds-green-100: oklch(97.59% 0.0289 145.42);
+  --ds-green-200: oklch(96.92% 0.037 147.15);
+  --ds-green-300: oklch(94.6% 0.0674 144.23);
+  --ds-green-400: oklch(91.49% 0.0976 146.24);
+  --ds-green-500: oklch(85.45% 0.1627 146.3);
+  --ds-green-600: oklch(80.25% 0.214 145.18);
+  --ds-green-700: oklch(64.58% 0.1746 147.27);
+  --ds-green-800: oklch(57.81% 0.1507 147.5);
+  --ds-green-900: oklch(51.75% 0.1453 147.65);
+  --ds-green-1000: oklch(29.15% 0.1197 147.38);
+  --ds-teal-100: oklch(97.72% 0.0359 186.7);
+  --ds-teal-200: oklch(97.06% 0.0347 180.66);
+  --ds-teal-300: oklch(94.92% 0.0478 182.07);
+  --ds-teal-400: oklch(92.76% 0.0718 183.78);
+  --ds-teal-500: oklch(86.88% 0.1344 182.42);
+  --ds-teal-600: oklch(81.5% 0.161 178.96);
+  --ds-teal-700: oklch(64.92% 0.1572 181.95);
+  --ds-teal-800: oklch(57.53% 0.1392 181.66);
+  --ds-teal-900: oklch(52.08% 0.1251 182.93);
+  --ds-teal-1000: oklch(32.11% 0.0788 179.82);
+  --ds-purple-100: oklch(96.65% 0.0244 312.19);
+  --ds-purple-200: oklch(96.73% 0.0228 309.8);
+  --ds-purple-300: oklch(94.85% 0.0364 310.15);
+  --ds-purple-400: oklch(91.77% 0.0614 312.82);
+  --ds-purple-500: oklch(81.26% 0.1409 310.8);
+  --ds-purple-600: oklch(72.07% 0.2083 308.19);
+  --ds-purple-700: oklch(55.5% 0.3008 306.12);
+  --ds-purple-800: oklch(48.58% 0.2638 305.73);
+  --ds-purple-900: oklch(47.18% 0.2579 304);
+  --ds-purple-1000: oklch(23.96% 0.13 305.66);
+  --ds-pink-100: oklch(95.69% 0.0359 344.62);
+  --ds-pink-200: oklch(95.71% 0.0321 353.14);
+  --ds-pink-300: oklch(93.83% 0.0451 356.29);
+  --ds-pink-400: oklch(91.12% 0.0573 358.82);
+  --ds-pink-500: oklch(84.28% 0.0915 356.99);
+  --ds-pink-600: oklch(74.33% 0.1547 0.24);
+  --ds-pink-700: oklch(63.52% 0.238 1.01);
+  --ds-pink-800: oklch(59.51% 0.2339 4.21);
+  --ds-pink-900: oklch(53.5% 0.2058 2.84);
+  --ds-pink-1000: oklch(26% 0.0977 359);
+  --ds-shadow-background-border: 0 0 0 1px var(--ds-background-200);
+
+  --ds-shadow-border-base: 0 0 0 1px rgba(0, 0, 0, 0.08);
+  --ds-shadow-border-inset: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+
+  --ds-shadow-border:
+    var(--ds-shadow-border-base), var(--ds-shadow-background-border);
+
+  --ds-shadow-2xs: 0px 1px 1px rgba(0, 0, 0, 0.02);
+  --ds-shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.04);
+  --ds-shadow-small: 0px 2px 2px rgba(0, 0, 0, 0.04);
+  --ds-shadow-border-small:
+    var(--ds-shadow-border-base), var(--ds-shadow-small),
+    var(--ds-shadow-background-border);
+
+  --ds-shadow-medium:
+    0px 2px 2px rgba(0, 0, 0, 0.04), 0px 8px 8px -8px rgba(0, 0, 0, 0.04);
+  --ds-shadow-border-medium:
+    var(--ds-shadow-border-base), var(--ds-shadow-medium),
+    var(--ds-shadow-background-border);
+
+  --ds-shadow-large:
+    0px 2px 2px rgba(0, 0, 0, 0.04), 0px 8px 16px -4px rgba(0, 0, 0, 0.04);
+  --ds-shadow-border-large:
+    var(--ds-shadow-border-base), var(--ds-shadow-large),
+    var(--ds-shadow-background-border);
+
+  --ds-shadow-tooltip:
+    var(--ds-shadow-border-base), 0px 1px 1px rgba(0, 0, 0, 0.02),
+    0px 4px 8px rgba(0, 0, 0, 0.04), var(--ds-shadow-background-border);
+
+  --ds-shadow-xl:
+    0px 1px 1px rgba(0, 0, 0, 0.02), 0px 4px 8px -4px rgba(0, 0, 0, 0.04);
+
+  --ds-shadow-2xl:
+    0px 1px 1px rgba(0, 0, 0, 0.02), 0px 4px 8px -4px rgba(0, 0, 0, 0.04),
+    0px 16px 24px -8px rgba(0, 0, 0, 0.06);
+
+  --ds-shadow-menu:
+    var(--ds-shadow-border-base), 0px 1px 1px rgba(0, 0, 0, 0.02),
+    0px 4px 8px -4px rgba(0, 0, 0, 0.04),
+    0px 16px 24px -8px rgba(0, 0, 0, 0.06), var(--ds-shadow-background-border);
+
+  --ds-shadow-modal:
+    var(--ds-shadow-border-base), 0px 1px 1px rgba(0, 0, 0, 0.02),
+    0px 8px 16px -4px rgba(0, 0, 0, 0.04),
+    0px 24px 32px -8px rgba(0, 0, 0, 0.06), var(--ds-shadow-background-border);
+
+  --ds-focus-ring:
+    0 0 0 2px var(--ds-background-100), 0 0 0 4px var(--ds-blue-700);
+
+  --ds-shadow-fullscreen:
+    var(--ds-shadow-border-base), 0px 1px 1px rgba(0, 0, 0, 0.02),
+    0px 8px 16px -4px rgba(0, 0, 0, 0.04),
+    0px 24px 32px -8px rgba(0, 0, 0, 0.06), var(--ds-shadow-background-border);
+}
+
+.dark {
+  --ds-background-100: oklch(0 0 0);
+  --ds-background-200: oklch(0.027 0 0);
+  --ds-gray-100: oklch(0.218 0 0);
+  --ds-gray-200: oklch(0.239 0 0);
+  --ds-gray-300: oklch(0.281 0 0);
+  --ds-gray-400: oklch(0.301 0 0);
+  --ds-gray-500: oklch(0.39 0 0);
+  --ds-gray-600: oklch(0.623 0 0);
+  --ds-gray-700: oklch(0.65 0 0);
+  --ds-gray-800: oklch(0.59 0 0);
+  --ds-gray-900: oklch(0.706 0 0);
+  --ds-gray-950: oklch(0.85 0 0);
+  --ds-gray-1000: oklch(1 0 0);
+  --ds-gray-alpha-100: oklch(1 0 0 / 0.07);
+  --ds-gray-alpha-200: oklch(1 0 0 / 0.09);
+  --ds-gray-alpha-300: oklch(1 0 0 / 0.13);
+  --ds-gray-alpha-400: oklch(1 0 0 / 0.14);
+  --ds-gray-alpha-500: oklch(1 0 0 / 0.24);
+  --ds-gray-alpha-600: oklch(1 0 0 / 0.51);
+  --ds-gray-alpha-700: oklch(1 0 0 / 0.54);
+  --ds-gray-alpha-800: oklch(1 0 0 / 0.47);
+  --ds-gray-alpha-900: oklch(1 0 0 / 0.61);
+  --ds-gray-alpha-1000: oklch(1 0 0 / 1);
+  --ds-blue-100: oklch(22.17% 0.069 259.89);
+  --ds-blue-200: oklch(25.45% 0.0811 255.8);
+  --ds-blue-300: oklch(30.86% 0.1022 255.21);
+  --ds-blue-400: oklch(34.1% 0.121 254.74);
+  --ds-blue-500: oklch(38.5% 0.1403 254.4);
+  --ds-blue-600: oklch(64.94% 0.1982 251.81);
+  --ds-blue-700: oklch(57.61% 0.2321 258.23);
+  --ds-blue-800: oklch(51.51% 0.2307 257.85);
+  --ds-blue-900: oklch(71.7% 0.1648 250.79);
+  --ds-blue-1000: oklch(96.75% 0.0179 242.42);
+  --ds-red-100: oklch(22.1% 0.0657 15.11);
+  --ds-red-200: oklch(25.93% 0.0834 19.02);
+  --ds-red-300: oklch(31.47% 0.1105 20.96);
+  --ds-red-400: oklch(35.27% 0.1273 21.23);
+  --ds-red-500: oklch(40.68% 0.1479 23.16);
+  --ds-red-600: oklch(62.56% 0.2277 23.03);
+  --ds-red-700: oklch(62.56% 0.2234 23.03);
+  --ds-red-800: oklch(58.01% 0.227 25.12);
+  --ds-red-900: oklch(69.96% 0.2136 22.03);
+  --ds-red-1000: oklch(95.6% 0.0293 6.61);
+  --ds-amber-100: oklch(22.46% 0.0538 76.04);
+  --ds-amber-200: oklch(24.95% 0.0642 64.78);
+  --ds-amber-300: oklch(32.34% 0.0837 63.83);
+  --ds-amber-400: oklch(35.53% 0.0903 66.3);
+  --ds-amber-500: oklch(41.55% 0.1044 67.98);
+  --ds-amber-600: oklch(75.04% 0.1737 74.49);
+  --ds-amber-700: oklch(81.87% 0.1969 76.46);
+  --ds-amber-800: oklch(77.21% 0.1991 64.28);
+  --ds-amber-900: oklch(77.21% 0.1991 64.28);
+  --ds-amber-1000: oklch(96.7% 0.0418 84.59);
+  --ds-green-100: oklch(23.09% 0.0716 149.68);
+  --ds-green-200: oklch(27.12% 0.0895 150.09);
+  --ds-green-300: oklch(29.84% 0.096 149.25);
+  --ds-green-400: oklch(34.39% 0.1039 147.78);
+  --ds-green-500: oklch(44.19% 0.1484 147.2);
+  --ds-green-600: oklch(58.11% 0.1815 146.55);
+  --ds-green-700: oklch(64.58% 0.199 147.27);
+  --ds-green-800: oklch(57.81% 0.1776 147.5);
+  --ds-green-900: oklch(73.1% 0.2158 148.29);
+  --ds-green-1000: oklch(96.76% 0.056 154.18);
+  --ds-teal-100: oklch(22.1% 0.0544 178.74);
+  --ds-teal-200: oklch(25.06% 0.062 178.76);
+  --ds-teal-300: oklch(31.5% 0.0767 180.99);
+  --ds-teal-400: oklch(32.43% 0.0763 180.13);
+  --ds-teal-500: oklch(43.35% 0.1055 180.97);
+  --ds-teal-600: oklch(60.71% 0.1485 180.24);
+  --ds-teal-700: oklch(64.92% 0.1403 181.95);
+  --ds-teal-800: oklch(57.53% 0.1392 181.66);
+  --ds-teal-900: oklch(74.56% 0.1765 182.8);
+  --ds-teal-1000: oklch(96.46% 0.056 180.29);
+  --ds-purple-100: oklch(22.34% 0.0779 316.87);
+  --ds-purple-200: oklch(25.91% 0.0921 314.41);
+  --ds-purple-300: oklch(31.98% 0.1219 312.41);
+  --ds-purple-400: oklch(35.93% 0.1504 309.78);
+  --ds-purple-500: oklch(40.99% 0.1721 307.92);
+  --ds-purple-600: oklch(55.5% 0.2191 306.12);
+  --ds-purple-700: oklch(55.5% 0.2186 306.12);
+  --ds-purple-800: oklch(48.58% 0.2102 305.73);
+  --ds-purple-900: oklch(69.87% 0.2037 309.51);
+  --ds-purple-1000: oklch(96.1% 0.0304 316.46);
+  --ds-pink-100: oklch(22.67% 0.0628 354.73);
+  --ds-pink-200: oklch(26.2% 0.0859 356.68);
+  --ds-pink-300: oklch(31.15% 0.1067 355.93);
+  --ds-pink-400: oklch(32.13% 0.1174 356.71);
+  --ds-pink-500: oklch(37.01% 0.1453 358.39);
+  --ds-pink-600: oklch(50.33% 0.2089 4.33);
+  --ds-pink-700: oklch(63.52% 0.2346 1.01);
+  --ds-pink-800: oklch(59.51% 0.2429 4.21);
+  --ds-pink-900: oklch(69.36% 0.2223 3.91);
+  --ds-pink-1000: oklch(95.74% 0.0326 350.08);
+
+  --ds-shadow-background-border: 0 0 0 1px var(--ds-background-200);
+
+  --ds-shadow-border-base: 0 0 0 1px rgba(255, 255, 255, 0.145);
+  --ds-shadow-border-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.145);
+
+  --ds-shadow-border:
+    var(--ds-shadow-border-base), var(--ds-shadow-background-border);
+
+  --ds-shadow-2xs: 0px 1px 1px rgba(0, 0, 0, 0.08);
+  --ds-shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.16);
+  --ds-shadow-small: 0px 1px 2px rgba(0, 0, 0, 0.16);
+  --ds-shadow-border-small:
+    var(--ds-shadow-border-base), var(--ds-shadow-small),
+    var(--ds-shadow-background-border);
+
+  --ds-shadow-medium:
+    0px 2px 2px rgba(0, 0, 0, 0.16), 0px 8px 8px -8px rgba(0, 0, 0, 0.16);
+  --ds-shadow-border-medium:
+    var(--ds-shadow-border-base), var(--ds-shadow-medium),
+    var(--ds-shadow-background-border);
+
+  --ds-shadow-large:
+    0px 2px 2px rgba(0, 0, 0, 0.16), 0px 8px 16px -4px rgba(0, 0, 0, 0.16);
+  --ds-shadow-border-large:
+    var(--ds-shadow-border-base), var(--ds-shadow-large),
+    var(--ds-shadow-background-border);
+
+  --ds-shadow-tooltip:
+    var(--ds-shadow-border-base), 0px 1px 1px rgba(0, 0, 0, 0.08),
+    0px 4px 8px rgba(0, 0, 0, 0.16), var(--ds-shadow-background-border);
+
+  --ds-shadow-xl:
+    0px 1px 1px rgba(0, 0, 0, 0.08), 0px 4px 8px -4px rgba(0, 0, 0, 0.16);
+
+  --ds-shadow-2xl:
+    0px 1px 1px rgba(0, 0, 0, 0.08), 0px 4px 8px -4px rgba(0, 0, 0, 0.16),
+    0px 16px 24px -8px rgba(0, 0, 0, 0.24);
+
+  --ds-shadow-menu:
+    var(--ds-shadow-border-base), 0px 1px 1px rgba(0, 0, 0, 0.08),
+    0px 4px 8px -4px rgba(0, 0, 0, 0.16),
+    0px 16px 24px -8px rgba(0, 0, 0, 0.24), var(--ds-shadow-background-border);
+
+  --ds-shadow-modal:
+    var(--ds-shadow-border-base), 0px 1px 1px rgba(0, 0, 0, 0.08),
+    0px 8px 16px -4px rgba(0, 0, 0, 0.16),
+    0px 24px 32px -8px rgba(0, 0, 0, 0.24), var(--ds-shadow-background-border);
+
+  --ds-shadow-fullscreen:
+    var(--ds-shadow-border-base), 0px 1px 1px rgba(0, 0, 0, 0.08),
+    0px 8px 16px -4px rgba(0, 0, 0, 0.16),
+    0px 24px 32px -8px rgba(0, 0, 0, 0.24), var(--ds-shadow-background-border);
+
+  --ds-focus-ring:
+    0 0 0 2px var(--ds-background-100), 0 0 0 4px var(--ds-blue-900);
+}
+
+/* Shiki syntax highlighting palette */
+:root {
+  --shiki-color-text: var(--ds-gray-1000);
+  --shiki-color-background: var(--ds-background-100);
+  --shiki-token-constant: var(--ds-blue-900);
+  --shiki-token-string: var(--ds-green-900);
+  --shiki-token-comment: var(--ds-gray-900);
+  --shiki-token-keyword: var(--ds-pink-900);
+  --shiki-token-parameter: var(--ds-amber-900);
+  --shiki-token-function: var(--ds-purple-900);
+  --shiki-token-string-expression: var(--ds-green-900);
+  --shiki-token-punctuation: var(--ds-gray-1000);
+  --shiki-token-link: var(--ds-green-900);
+}
+
+@layer base {
+  * {
+    @apply border-gray-alpha-400 outline-gray-600/50;
+  }
+  body {
+    @apply bg-background-100 text-gray-1000;
+  }
+  ::selection {
+    background-color: var(--ds-gray-1000);
+    color: var(--ds-background-100);
+  }
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+  html {
+    @apply font-sans;
+    font-optical-sizing: auto;
+    font-feature-settings: "ss03" 1 /* round quotes & commas */;
+  }
+}
+
+/* Material */
+
+@utility material-base {
+  box-shadow: var(--ds-shadow-border);
+  @apply rounded-md bg-background-100;
+}
+
+@utility material-small {
+  box-shadow: var(--ds-shadow-border-small);
+  @apply rounded-md bg-background-100;
+}
+
+@utility material-medium {
+  box-shadow: var(--ds-shadow-border-medium);
+  @apply rounded-xl bg-background-100;
+}
+
+@utility material-large {
+  box-shadow: var(--ds-shadow-border-large);
+  @apply rounded-xl bg-background-100;
+}
+
+@utility material-tooltip {
+  box-shadow: var(--ds-shadow-tooltip);
+  @apply rounded-md bg-background-100;
+}
+
+@utility material-menu {
+  box-shadow: var(--ds-shadow-menu);
+  @apply rounded-md bg-background-100;
+}
+
+@utility material-modal {
+  box-shadow: var(--ds-shadow-modal);
+  @apply rounded-xl bg-background-100;
+}
+
+@utility material-fullscreen {
+  box-shadow: var(--ds-shadow-fullscreen);
+  @apply rounded-xl bg-background-100;
+}
+
+/* Typography Heading */
+
+@utility text-heading-72 {
+  @apply font-sans text-[72px] leading-[72px] font-[450] tracking-[-4.32px];
+}
+
+@utility text-heading-64 {
+  @apply font-sans text-[64px] leading-[64px] font-[450] tracking-[-2.56px];
+}
+
+@utility text-heading-56 {
+  @apply font-sans text-[56px] leading-[56px] font-[450] tracking-[-2.24px];
+}
+
+@utility text-heading-48 {
+  @apply font-sans text-[48px] leading-[56px] font-[450] tracking-[-1.92px];
+}
+
+@utility text-heading-40 {
+  @apply font-sans text-[40px] leading-[48px] font-[450] tracking-[-1.6px];
+}
+
+@utility text-heading-32 {
+  @apply font-sans text-[32px] leading-[40px] font-[450] tracking-[-1.28px] [&>strong]:font-medium [&>strong]:text-gray-900;
+}
+
+@utility text-heading-24 {
+  @apply font-sans text-[24px] leading-[32px] font-[450] tracking-[-0.96px] [&>strong]:font-medium [&>strong]:text-gray-900;
+}
+
+@utility text-heading-20 {
+  @apply font-sans text-[20px] leading-[26px] font-[450] tracking-[-0.4px] [&>strong]:font-medium [&>strong]:text-gray-900;
+}
+
+@utility text-heading-16 {
+  @apply font-sans text-[16px] leading-[24px] font-[450] tracking-[-0.32px] [&>strong]:font-medium [&>strong]:text-gray-900;
+}
+
+@utility text-heading-14 {
+  @apply font-sans text-[14px] leading-[20px] font-[450] tracking-[-0.28px];
+}
+
+/* Typography Button */
+
+@utility text-button-16 {
+  @apply font-sans text-[16px] leading-[20px] font-[450];
+}
+
+@utility text-button-14 {
+  @apply font-sans text-[14px] leading-[20px] font-[450];
+}
+
+@utility text-button-12 {
+  @apply font-sans text-[12px] leading-[16px] font-[450];
+}
+
+/* Typography Label */
+
+@utility text-label-20 {
+  @apply font-sans text-[20px] leading-[32px] font-normal;
+}
+
+@utility text-label-18 {
+  @apply font-sans text-[18px] leading-[20px] font-normal;
+}
+
+@utility text-label-16 {
+  @apply font-sans text-[16px] leading-[20px] font-normal [&>strong]:font-medium [&>strong]:text-gray-1000;
+}
+
+@utility text-label-16-mono {
+  @apply font-mono text-[16px] leading-[20px] font-normal;
+}
+
+@utility text-label-14 {
+  @apply font-sans text-[14px] leading-[20px] font-normal [&>strong]:font-medium [&>strong]:text-gray-1000;
+}
+
+@utility text-label-14-mono {
+  @apply font-mono text-[14px] leading-[20px] font-normal;
+}
+
+@utility text-label-13 {
+  @apply font-sans text-[13px] leading-[16px] font-normal [&>strong]:font-medium [&>strong]:text-gray-1000;
+}
+
+@utility text-label-13-mono {
+  @apply font-mono text-[13px] leading-[20px] font-normal;
+}
+
+@utility text-label-12 {
+  @apply font-sans text-[12px] leading-[16px] font-normal [&>strong]:font-medium [&>strong]:text-gray-1000;
+}
+
+@utility text-label-12-mono {
+  @apply font-mono text-[12px] leading-[16px] font-normal;
+}
+
+/* Typography Copy */
+
+@utility text-copy-24 {
+  @apply font-sans text-[24px] leading-[36px] font-normal [&>strong]:font-medium [&>strong]:text-gray-1000;
+}
+
+@utility text-copy-20 {
+  @apply font-sans text-[20px] leading-[36px] font-normal [&>strong]:font-medium [&>strong]:text-gray-1000;
+}
+
+@utility text-copy-18 {
+  @apply font-sans text-[18px] leading-[28px] font-normal [&>strong]:font-medium [&>strong]:text-gray-1000;
+}
+
+@utility text-copy-16 {
+  @apply font-sans text-[16px] leading-[24px] font-normal [&>strong]:font-medium [&>strong]:text-gray-1000;
+}
+
+@utility text-copy-14 {
+  @apply font-sans text-[14px] leading-[20px] font-normal [&>strong]:font-medium [&>strong]:text-gray-1000;
+}
+
+@utility text-copy-14-mono {
+  @apply font-mono text-[14px] leading-[20px] font-normal [&>strong]:font-medium [&>strong]:text-gray-1000;
+}
+
+@utility text-copy-13 {
+  @apply font-sans text-[13px] leading-[18px] font-normal [&>strong]:font-medium [&>strong]:text-gray-1000;
+}
+
+@utility text-copy-13-mono {
+  @apply font-mono text-[13px] leading-[18px] font-normal;
+}
+
+/* Prose. shadcn's typeset, rebound onto ziiz. Structure and selectors are
+   shadcn's verbatim (`.typeset *` narrowed with :where(), `.not-typeset` opts
+   out). What changes: every element binds to a named type role instead of
+   an em scale, colors come from the ramp, and rhythm is rem, not em, because
+   the roles are fixed px. A role is never overridden: no weight, size or
+   leading is set on an element that carries one. Rhythm follows the Vercel
+   blog article; body copy stays Copy 16 on Color 9, as the docs pages set
+   it. Diff this file against shadcn/typeset to see it. */
+
+@layer components {
+  .typeset {
+    /* Rhythm. --typeset-flow is the gap between blocks, --typeset-section
+       the gap above a section heading; the rest derives from these two. */
+    --typeset-flow: 1.5rem;
+    --typeset-section: 4.5rem;
+  }
+}
+
+@layer components {
+  .typeset {
+    @apply text-copy-16 text-gray-900;
+    overflow-wrap: break-word;
+    margin-trim: block-start;
+    text-wrap: pretty;
+
+    --typeset-muted: var(--ds-gray-900);
+    --typeset-rule: var(--ds-gray-alpha-400);
+  }
+
+  .typeset
+    *:not(
+      :where(
+        .not-typeset,
+        [data-not-typeset],
+        .not-typeset *,
+        [data-not-typeset] *
+      )
+    ) {
+    /* Paragraphs. */
+    &:where(p) {
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+    }
+
+    /* Headings. */
+    &:where(h1, h2, h3, h4, h5, h6) {
+      @apply text-gray-1000;
+      margin-block-end: 0;
+      text-wrap: balance;
+    }
+    &:where(h1) {
+      @apply text-heading-40;
+      margin-block-start: var(--typeset-section);
+    }
+    &:where(h2) {
+      @apply text-heading-32;
+      margin-block-start: var(--typeset-section);
+    }
+    /* Smaller steps are fractions of the section gap, so one knob moves them
+       all: 64, 48 and 32px at the default 72. */
+    &:where(h3) {
+      @apply text-heading-24;
+      margin-block-start: calc(var(--typeset-section) * 8 / 9);
+    }
+    &:where(h4) {
+      @apply text-heading-20;
+      margin-block-start: calc(var(--typeset-section) * 2 / 3);
+    }
+    &:where(h5) {
+      @apply text-heading-16;
+      margin-block-start: calc(var(--typeset-section) * 4 / 9);
+    }
+    &:where(h6) {
+      @apply text-heading-14;
+      margin-block-start: calc(var(--typeset-section) * 4 / 9);
+    }
+    /* Anchors. Clears the sticky site header. */
+    &:where([id]) {
+      scroll-margin-block-start: 6rem;
+    }
+
+    /* Headings own the space below them. The article keeps one gap
+       everywhere, so this is the flow gap, not a tighter one. */
+    &:where(h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + *) {
+      margin-block-start: var(--typeset-flow);
+    }
+
+    /* Links. */
+    &:where(a) {
+      color: var(--ds-gray-1000);
+      text-decoration-line: underline;
+      text-decoration-color: var(--ds-gray-700);
+      text-decoration-thickness: 1px;
+      text-underline-offset: 4px;
+    }
+    &:where(a:hover) {
+      text-decoration-color: currentColor;
+    }
+    &:where(a:focus-visible) {
+      outline: 2px solid var(--ds-gray-600);
+      outline-offset: 4px;
+      border-radius: 0.125em;
+    }
+
+    /* Inline semantics. */
+    /* The Copy roles' Strong modifier, spelled out because the role sits on
+       the container, not on each paragraph. */
+    &:where(strong, b) {
+      @apply font-medium text-gray-1000;
+    }
+    &:where(mark) {
+      background-color: var(--ds-blue-200);
+      color: var(--ds-blue-900);
+      padding: 0.05em 0.15em;
+      border-radius: 0.2em;
+    }
+    &:where(abbr[title]) {
+      text-decoration-line: underline;
+      text-decoration-style: dotted;
+      text-underline-offset: 0.2em;
+      cursor: help;
+    }
+    &:where(del, s) {
+      color: var(--typeset-muted);
+      text-decoration-line: line-through;
+    }
+    &:where(sup, sub) {
+      font-size: 0.75em;
+      line-height: 0;
+      position: relative;
+      vertical-align: baseline;
+    }
+    &:where(sup) {
+      top: -0.5em;
+    }
+    &:where(sub) {
+      bottom: -0.25em;
+    }
+    &:where(sup a) {
+      text-decoration-line: none;
+    }
+
+    /* Lists. */
+    &:where(ul) {
+      list-style-type: disc;
+    }
+    &:where(ol) {
+      list-style-type: decimal;
+    }
+    &:where(ul ul) {
+      list-style-type: circle;
+    }
+    &:where(ul ul ul) {
+      list-style-type: square;
+    }
+    &:where(ol[type="a" i]) {
+      list-style-type: lower-alpha;
+    }
+    &:where(ol[type="i" i]) {
+      list-style-type: lower-roman;
+    }
+    &:where(ol[type="A" s]) {
+      list-style-type: upper-alpha;
+    }
+    &:where(ol[type="I" s]) {
+      list-style-type: upper-roman;
+    }
+    &:where(ul, ol) {
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+      padding-inline-start: 1.25rem;
+    }
+    &:where(li) {
+      margin-block-start: 0.5rem;
+      padding-inline-start: 0.5rem;
+    }
+    &:where(li > p, li > ul, li > ol) {
+      margin-block-start: 0.5rem;
+    }
+    &:where(ul > li)::marker {
+      color: var(--ds-gray-600);
+    }
+    &:where(ol > li)::marker {
+      color: var(--ds-gray-600);
+    }
+
+    /* GFM task lists. */
+    &:where(ul.contains-task-list) {
+      list-style-type: none;
+      padding-inline-start: 0.25em;
+    }
+    &:where(li.task-list-item > input[type="checkbox"]) {
+      margin-inline-end: 0.5em;
+      vertical-align: -0.1em;
+      accent-color: var(--ds-gray-1000);
+    }
+
+    /* Disclosures, shaped like the Accordion component: the summary as the
+       trigger with the chevron at the end, the content flush beneath. Type
+       stays the body role throughout and rows carry no hairline. The
+       component is the source of truth for the shape; mirror it here when
+       it changes. Adjacent details stack into one accordion. */
+    &:where(details) {
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+    }
+    &:where(details + details) {
+      margin-block-start: 0;
+    }
+    &:where(details[open]) {
+      padding-block-end: 1rem;
+    }
+    &:where(summary) {
+      @apply rounded-md text-gray-1000;
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 1rem;
+      padding-block: 1rem;
+      border: 1px solid transparent;
+      list-style: none;
+      cursor: pointer;
+      outline: none;
+    }
+    &:where(summary)::-webkit-details-marker {
+      display: none;
+    }
+    &:where(summary:hover) {
+      text-decoration-line: underline;
+    }
+    &:where(summary:focus-visible) {
+      border-color: var(--ds-gray-600);
+      box-shadow: 0 0 0 3px
+        color-mix(in oklab, var(--ds-gray-600) 50%, transparent);
+    }
+    &:where(summary)::after {
+      content: "";
+      flex-shrink: 0;
+      width: 1rem;
+      height: 1rem;
+      margin-inline-start: auto;
+      background-color: var(--ds-gray-900);
+      mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E")
+        center / contain no-repeat;
+    }
+    &:where(details[open] > summary)::after {
+      transform: rotate(180deg);
+    }
+    &:where(details > :not(summary)) {
+      margin-block-start: 1rem;
+    }
+    &:where(details > summary + *) {
+      margin-block-start: 0;
+    }
+
+    /* Keyboard keys. */
+    /* Keyboard keys, matching the ui Kbd component. */
+    &:where(kbd) {
+      @apply inline-flex h-5 min-w-5 items-center justify-center rounded-[min(var(--radius-sm),6px)] bg-gray-100 px-1 text-label-12 text-gray-900;
+    }
+
+    /* Definition lists. */
+    &:where(dl) {
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+    }
+    &:where(dt) {
+      @apply text-gray-1000;
+      margin-block-start: var(--typeset-flow);
+    }
+    &:where(dt + dt) {
+      margin-block-start: 0.25em;
+    }
+    &:where(dd) {
+      margin-block-start: 0.25em;
+      margin-inline-start: 0;
+      padding-inline-start: 1em;
+      color: var(--typeset-muted);
+    }
+
+    /* Inline code. */
+    &:where(:not(pre) > code) {
+      @apply rounded-[min(var(--radius-sm),6px)] bg-gray-100 text-copy-13-mono;
+      padding: 0.125rem 0.25rem;
+    }
+
+    /* Code blocks. */
+    &:where(pre) {
+      @apply rounded-lg bg-background-200 text-copy-13-mono text-gray-1000;
+      border: 1px solid var(--typeset-rule);
+      tab-size: 2;
+      direction: ltr;
+      padding: 1rem;
+      overflow-x: auto;
+      margin-block-start: calc(var(--typeset-flow) + 0.25rem);
+      margin-block-end: 0;
+    }
+    &:where(pre code) {
+      background-color: transparent;
+      font: inherit;
+      padding: 0;
+      border-radius: 0;
+    }
+
+    /* Blockquote: a pull quote, as the article sets it. No bar; the quote
+       sits on Heading 24 with hanging curly quotes drawn here, so markdown
+       needs no extra markup, and a trailing <footer> carries the attribution
+       on Copy 14, with <cite> for the name. */
+    &:where(blockquote) {
+      @apply text-heading-24 text-gray-1000;
+      display: grid;
+      gap: 1rem;
+      margin-block-start: calc(var(--typeset-section) / 2);
+      margin-block-end: 0;
+      margin-inline: 0;
+    }
+    &:where(blockquote + *) {
+      margin-block-start: calc(var(--typeset-section) / 2);
+    }
+    &:where(blockquote > *) {
+      margin-block-start: 0;
+    }
+    &:where(blockquote > p) {
+      position: relative;
+    }
+    &:where(blockquote > p:first-of-type)::before {
+      content: "\201C";
+      position: absolute;
+      inset-inline-start: -0.75rem;
+    }
+    &:where(blockquote > p:last-of-type)::after {
+      content: "\201D";
+    }
+    &:where(blockquote > footer) {
+      @apply text-copy-14 text-gray-900;
+    }
+    &:where(blockquote cite) {
+      @apply text-gray-1000;
+      font-style: normal;
+    }
+
+    /* Dividers. */
+    &:where(hr) {
+      border: 0;
+      border-block-start: 1px solid var(--typeset-rule);
+      margin-block: var(--typeset-section);
+    }
+
+    /* GFM footnotes. */
+    &:where(.footnotes, [data-footnotes]) {
+      @apply text-copy-14;
+      margin-block-start: var(--typeset-section);
+      border-block-start: 1px solid var(--typeset-rule);
+      padding-block-start: var(--typeset-flow);
+      color: var(--typeset-muted);
+    }
+
+    /* Math. */
+    &:where(math[display="block"]) {
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+      overflow-x: auto;
+      overflow-y: hidden;
+      padding-block: 0.25em;
+    }
+
+    /* Media. */
+    &:where(img, video) {
+      @apply rounded-lg;
+      max-width: 100%;
+      height: auto;
+      margin-block-start: calc(var(--typeset-flow) + 0.25rem);
+      margin-block-end: 0;
+    }
+    &:where(p img) {
+      margin-block-start: 0;
+    }
+    &:where(figure) {
+      margin-block-start: 2.5rem;
+      margin-block-end: 0;
+      margin-inline: 0;
+    }
+    &:where(figure + *) {
+      margin-block-start: 2.5rem;
+    }
+    &:where(figcaption, caption) {
+      @apply text-copy-14;
+      color: var(--typeset-muted);
+      text-align: center;
+      margin-block-start: 1rem;
+    }
+    &:where(caption) {
+      caption-side: bottom;
+    }
+
+    /* The docs' CodeBlock figure takes the pre's flow margin; its chrome is
+       defined below, outside the typeset, so it renders the same anywhere. */
+    &:where([data-slot="code-block"]) {
+      margin-block-start: calc(var(--typeset-flow) + 0.25rem);
+    }
+    &:where([data-slot="code-block"] + *) {
+      margin-block-start: var(--typeset-flow);
+    }
+
+    /* Heading anchors, as the docs' heading map renders them. */
+    &:where([data-heading-anchor]) {
+      margin-inline-start: 0.4em;
+      color: var(--ds-gray-700);
+      text-decoration: none;
+      opacity: 0;
+      transition: opacity 150ms;
+    }
+    &:where(:is(h1, h2, h3, h4, h5, h6):hover [data-heading-anchor]),
+    &:where([data-heading-anchor]:focus-visible) {
+      opacity: 1;
+    }
+
+    /* Keyboard focus on scroll regions. */
+    &:where(:is(.typeset-scroll, pre):focus-visible) {
+      outline: 2px solid var(--ds-gray-600);
+      outline-offset: 4px;
+    }
+
+    /* Tables. Mirrors components/ui/table.tsx: Heading 14 header cells,
+       Label 14 body cells, middle alignment, row hover, tinted footer, no
+       trailing rule. Padding is roomier than the component (12px / 16px vs
+       8px) because prose tables read, they don't scan. Separators sit on cells, not
+       tr:last-child: append-safe. Bare tables stay real tables (keep their
+       semantics) and wrap to fit. */
+    &:where(table) {
+      @apply text-label-14;
+      max-width: 100%;
+      font-variant-numeric: tabular-nums;
+      border-collapse: separate;
+      border-spacing: 0;
+      margin-block-start: calc(var(--typeset-flow) + 0.25rem);
+      margin-block-end: 0;
+    }
+
+    /* Horizontal scroll for any wide block. Wrap it and the wrapper owns the
+       flow margin. Tables shrink to fit, so widen the table to make it scroll
+       instead of compress. */
+    &:where(.typeset-scroll) {
+      overflow-x: auto;
+      margin-block-start: calc(var(--typeset-flow) + 0.25rem);
+    }
+    &:where(.typeset-scroll > *) {
+      margin-block-start: 0;
+    }
+    &:where(.typeset-scroll table) {
+      width: max-content;
+      max-width: none;
+    }
+    &:where(thead th) {
+      @apply text-heading-14 text-gray-1000;
+      height: 2.75rem;
+      padding: 0 1rem;
+      text-align: start;
+      vertical-align: middle;
+      white-space: nowrap;
+    }
+    &:where(:is(tbody, tfoot) :is(td, th)) {
+      padding: 0.75rem 1rem;
+      text-align: start;
+      vertical-align: middle;
+      border-block-start: 1px solid var(--typeset-rule);
+    }
+    &:where(tbody th, tfoot th) {
+      @apply text-gray-1000;
+    }
+    &:where(tbody tr) {
+      transition: background-color 150ms;
+    }
+    &:where(tbody tr:hover) {
+      @apply bg-gray-alpha-100;
+    }
+    &:where(tfoot) {
+      @apply bg-gray-100/50;
+    }
+    &:where(th[align="center"], td[align="center"]) {
+      text-align: center;
+    }
+    &:where(th[align="right"], td[align="right"]) {
+      text-align: end;
+    }
+
+    /* Blocks inside list items keep the list's tighter rhythm. */
+    &:where(li > blockquote, li > table, li > figure, li > pre) {
+      margin-block-start: 0.5rem;
+    }
+
+    @media print {
+      &:where(pre, table, blockquote, figure) {
+        break-inside: avoid;
+      }
+      &:where(h1, h2, h3, h4) {
+        break-after: avoid;
+      }
+    }
+
+    /* Forced colors strips the code background, so give it a border. */
+    @media (forced-colors: active) {
+      &:where(:not(pre) > code) {
+        border: 1px solid;
+      }
+    }
+  }
+
+  /* First child adds no space above. Last so it wins ties. List items are
+     left out: a block inside one usually follows inline text, which CSS
+     cannot see, so it keeps the item gap. Sections are added: a body often
+     nests one per heading, and its first child should open flush. */
+  .typeset
+    > :where(:first-child):not(
+      :where(
+        .not-typeset,
+        [data-not-typeset],
+        .not-typeset *,
+        [data-not-typeset] *
+      )
+    ),
+  .typeset
+    > :where(:first-child)
+    > :where(:first-child):not(
+      :where(
+        .not-typeset,
+        [data-not-typeset],
+        .not-typeset *,
+        [data-not-typeset] *
+      )
+    ),
+  .typeset
+    :where(
+      section > :first-child,
+      blockquote > :first-child,
+      td > :first-child,
+      th > :first-child,
+      dd > :first-child,
+      figure > :first-child,
+      figure > picture > img
+    ):not(
+      :where(
+        .not-typeset,
+        [data-not-typeset],
+        .not-typeset *,
+        [data-not-typeset] *
+      )
+    ) {
+    margin-block-start: 0;
+  }
+}
+
+/* Code block chrome: the figure the docs' CodeBlock renders around a pre,
+   with an optional title bar and a copy button. Independent of .typeset so a
+   block inside a preview or a not-typeset region looks the same as one in an
+   article. Matches the typeset's bare pre. */
+@layer components {
+  /* The block's metrics. On :root so the chrome around a block (a preview's
+     reveal, say) can line up with the rows inside it. */
+  :root {
+    --code-block-pad: 1rem;
+    --code-block-line: 18px;
+    --code-block-title-height: 2.5rem;
+    --code-block-copy-size: 2rem;
+    --code-block-copy-gutter: 3rem;
+    --code-block-border: 1px;
+  }
+  [data-slot="code-block"] {
+    position: relative;
+  }
+  [data-slot="code-block"] :where(pre) {
+    @apply rounded-lg bg-background-200 text-copy-13-mono text-gray-1000;
+    border: var(--code-block-border) solid var(--ds-gray-alpha-400);
+    tab-size: 2;
+    direction: ltr;
+    padding: var(--code-block-pad) var(--code-block-copy-gutter)
+      var(--code-block-pad) var(--code-block-pad);
+    overflow-x: auto;
+    margin: 0;
+  }
+  [data-slot="code-block"] :where(pre code) {
+    background-color: transparent;
+    font: inherit;
+    padding: 0;
+    border-radius: 0;
+  }
+  [data-slot="code-block"][data-titled] {
+    @apply rounded-lg bg-background-200;
+    border: var(--code-block-border) solid var(--ds-gray-alpha-400);
+    overflow: hidden;
+  }
+  [data-slot="code-block"][data-titled] :where(pre) {
+    border: 0;
+    border-radius: 0;
+    /* The copy button sits in the title bar, so the code keeps the full
+       width instead of reserving a gutter for it. */
+    padding-inline-end: var(--code-block-pad);
+  }
+  [data-slot="code-block"] > figcaption {
+    @apply text-label-13-mono;
+    display: flex;
+    align-items: center;
+    height: var(--code-block-title-height);
+    margin: 0;
+    padding-inline: var(--code-block-pad) var(--code-block-copy-gutter);
+    border-block-end: var(--code-block-border) solid var(--ds-gray-alpha-400);
+    color: var(--ds-gray-900);
+    text-align: start;
+  }
+  [data-slot="code-block"] [data-copy-button] {
+    position: absolute;
+    inset-inline-end: 0.5rem;
+    inset-block-start: calc(
+      var(--code-block-border) + var(--code-block-pad) +
+        (var(--code-block-line) - var(--code-block-copy-size)) / 2
+    );
+  }
+  /* Floating over the code, the button carries the code's own surface so a
+     long first line scrolls under it instead of through it. */
+  [data-slot="code-block"]:not([data-titled]) [data-copy-button] {
+    background-color: var(--shiki-color-background, var(--ds-background-200));
+  }
+  [data-slot="code-block"][data-titled] [data-copy-button] {
+    inset-block-start: calc(
+      (var(--code-block-title-height) - var(--code-block-copy-size)) / 2
+    );
+  }
+
+  /* Line numbers. Shiki wraps every row in a .line span, so the numbers are
+     a counter rather than markup: nothing to select, nothing to copy. The
+     gutter is sticky against the pre's scrollport, so it holds its place
+     while a long line scrolls under it. */
+  [data-slot="code-block"][data-line-numbers] {
+    --code-block-gutter: 3.5rem;
+  }
+  [data-slot="code-block"][data-line-numbers] :where(pre) {
+    /* The gutter and each row carry the inline padding instead. */
+    padding-inline: 0;
+  }
+  [data-slot="code-block"][data-line-numbers] :where(pre code) {
+    display: grid;
+    counter-reset: line;
+  }
+  [data-slot="code-block"][data-line-numbers] :where(pre code > .line) {
+    padding-inline-end: var(--code-block-copy-gutter);
+  }
+  [data-slot="code-block"][data-line-numbers][data-titled]
+    :where(pre code > .line) {
+    padding-inline-end: var(--code-block-pad);
+  }
+  [data-slot="code-block"][data-line-numbers] :where(pre code > .line)::before {
+    content: counter(line);
+    counter-increment: line;
+    position: sticky;
+    inset-inline-start: 0;
+    display: inline-block;
+    width: var(--code-block-gutter);
+    padding-inline-end: var(--code-block-pad);
+    background-color: var(--shiki-color-background, var(--ds-background-200));
+    color: var(--ds-gray-700);
+    text-align: end;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  /* A code block set into another surface (the source under a component
+     preview) is flush: the panel already draws the frame and clips the
+     corners, so the figure drops its own, and a long source scrolls in
+     place instead of stretching the panel. */
+  [data-slot="component-preview-source"] [data-slot="code-block"],
+  [data-slot="component-preview-source"] [data-slot="code-block"][data-titled],
+  [data-slot="component-preview-source"] [data-slot="code-block"] :where(pre) {
+    border-width: 0;
+    border-radius: 0;
+  }
+  [data-slot="component-preview-source"] [data-slot="code-block"] :where(pre) {
+    /* Twenty rows and the block's own padding, so the resting view ends on
+       a whole line rather than halfway through one. */
+    max-height: calc(20 * var(--code-block-line) + 2 * var(--code-block-pad));
+  }
+
+  /* Closed, the source is a three-row teaser: the scrim covers the whole of
+     it and fades into the code's own surface, and View Code sits centred on
+     top. Copying waits until there is something to look at. */
+  [data-slot="component-preview-source"] {
+    --code-collapsed-height: calc(
+      3 * var(--code-block-line) + 2 * var(--code-block-pad)
+    );
+    /* Three rows is too short for a footer: View Code sits in the middle of
+       the fade, over it. */
+    --code-reveal-align: center;
+    --code-reveal-pad: 0;
+  }
+  [data-slot="component-preview-source"] [data-slot="code-collapsible-scrim"] {
+    inset: 0;
+    height: auto;
+    border-radius: 0;
+    background-image: linear-gradient(
+      to top,
+      var(--shiki-color-background, var(--ds-background-200)),
+      color-mix(
+          in oklab,
+          var(--shiki-color-background, var(--ds-background-200)) 60%,
+          transparent
+        )
+        50%,
+      transparent
+    );
+  }
+  /* The teaser keeps the block's own bottom padding: the rows past the
+     third are held back rather than clipped mid-glyph. */
+  [data-slot="component-preview-source"]
+    [data-state="closed"]
+    :where(pre code > .line:nth-child(n + 4)) {
+    visibility: hidden;
+  }
+  [data-slot="component-preview-source"]
+    [data-state="closed"]
+    [data-copy-button] {
+    /* visibility, not display: the button's own utilities set that. */
+    visibility: hidden;
+  }
+  [data-slot="component-preview-source"]
+    [data-state="open"]
+    [data-slot="code-collapsible-footer"] {
+    margin-block: var(--code-block-pad);
+  }
+}
+
+@utility extend-touch-target {
+  @media (pointer: coarse) {
+    @apply relative touch-manipulation after:absolute after:-inset-2;
+  }
+}