@bkstg/design-systems 1.0.0

package/bkstg/latest/bkstg.css

@@ -0,0 +1,1668 @@
+/* BKSTG: design system export (bkstg.css)
+ * Base: Untitled UI. Themes: backstage + backstage-light, mode light.
+ * Shape standard, typeface dm, texture drift, motion full. Edited tokens: 3. Type styles edited or added: 0. Custom colors: 2.
+ * Generated 2026-10-04 from design-system-kit (themes by Colin).
+ * Do not edit this file; edit the system in the workbench and export again.
+ * Component patterns after Untitled UI (MIT). */
+
+/* themes: backstage + backstage-light, mode light */
+:root{
+  --s:#f2f2ef;
+  --p:#ffffff;
+  --l:#dadad7;
+  --i:#191919;
+  --i2:#474747;
+  --i3:#5c5c5c;
+  --mid:#e8e8e3;
+  --pos:#4c6204;
+  --neg:#881337;
+  --good:#14532d;
+  --warn:#713f12;
+  --acc:#4d6b00;
+  --on-accent:#f2f2ef;
+  --fill:#c6f135;
+  --on-fill:#111111;
+  --danger-edge:#e3c1c9;
+  --warn-fill:#f4ebdc;
+  --data-2:#4d6b00;
+  --bar-a:#4d6b00;
+  --bar-b:#92b913;
+  --under-a:#d99aa8;
+  --under-b:#881337;
+  --warn-hatch:#b8862b;
+  --field:#ffffff;
+  --edge-soft:rgba(45,45,45,.12);
+  --ring-c:rgba(155,196,15,.40);
+  --top-a:#ffffff;
+  --card-a:#ffffff;
+  --card-b:#ffffff;
+  --shadow:0 1px 2px rgba(25,25,25,.06);
+  --tx-k:.8;
+  --dept-booking-ink:#af4800;
+  --dept-ticketing-ink:#d20a0a;
+  --dept-marketing-ink:#cb1052;
+  --dept-sponsorship-ink:#b217bb;
+  --dept-creative-ink:#0063d9;
+  --dept-production-ink:#6e3ff7;
+  --dept-operations-ink:#1c736f;
+  --dept-relations-ink:#8a6000;
+  --dept-hospitality-ink:#a65000;
+  --dept-finance-ink:#36751a;
+  --dept-fnb-ink:#8f5c11;
+  --dept-unassigned-ink:#686868;
+  --series-1:#2a6fc4;
+  --series-2:#c9531f;
+  --series-3:#0f8a5f;
+  --series-4:#a87100;
+  --series-5:#c4467a;
+}
+html[data-mode="dark"]{
+  --shadow:none;
+  --tx-k:1;
+  --dept-booking-ink:#ff8835;
+  --dept-ticketing-ink:#f87171;
+  --dept-marketing-ink:#f4709f;
+  --dept-sponsorship-ink:#e359eb;
+  --dept-creative-ink:#5fa8ff;
+  --dept-production-ink:#a78bfa;
+  --dept-operations-ink:#3fd0c9;
+  --dept-relations-ink:#ffc94d;
+  --dept-hospitality-ink:#ffb066;
+  --dept-finance-ink:#7ed957;
+  --dept-fnb-ink:#e8a33d;
+  --dept-unassigned-ink:#8a8a8a;
+  --series-1:#3987e5;
+  --series-2:#d95926;
+  --series-3:#199e70;
+  --series-4:#c98500;
+  --series-5:#d55181;
+  --s:#191919;
+  --p:#232323;
+  --l:#353535;
+  --i:#ededed;
+  --i2:#c2c2c2;
+  --i3:#a3a3a3;
+  --mid:#2d2d2d;
+  --pos:#c6f135;
+  --neg:#ff7a85;
+  --good:#6ee08a;
+  --warn:#f5c451;
+  --acc:#c6f135;
+  --on-accent:#111111;
+  --fill:#c6f135;
+  --on-fill:#111111;
+  --danger-edge:#4a2b2e;
+  --warn-fill:#2a2515;
+  --data-2:#9bc40f;
+  --bar-a:#9bc40f;
+  --bar-b:#c6f135;
+  --under-a:#8a3f47;
+  --under-b:#d9626d;
+  --warn-hatch:#f5c451;
+  --field:#111111;
+  --edge-soft:rgba(255,255,255,.12);
+  --ring-c:rgba(198,241,53,.35);
+  --top-a:#232323;
+  --card-a:#232323;
+  --card-b:#232323;
+}
+html[data-mode="light"]{
+  --s:#f2f2ef;
+  --p:#ffffff;
+  --l:#dadad7;
+  --i:#191919;
+  --i2:#474747;
+  --i3:#5c5c5c;
+  --mid:#e8e8e3;
+  --pos:#4c6204;
+  --neg:#881337;
+  --good:#14532d;
+  --warn:#713f12;
+  --acc:#4d6b00;
+  --on-accent:#f2f2ef;
+  --fill:#c6f135;
+  --on-fill:#111111;
+  --danger-edge:#e3c1c9;
+  --warn-fill:#f4ebdc;
+  --data-2:#4d6b00;
+  --bar-a:#4d6b00;
+  --bar-b:#92b913;
+  --under-a:#d99aa8;
+  --under-b:#881337;
+  --warn-hatch:#b8862b;
+  --field:#ffffff;
+  --edge-soft:rgba(45,45,45,.12);
+  --ring-c:rgba(155,196,15,.40);
+  --top-a:#ffffff;
+  --card-a:#ffffff;
+  --card-b:#ffffff;
+  --shadow:0 1px 2px rgba(25,25,25,.06);
+  --tx-k:.8;
+  --dept-booking-ink:#af4800;
+  --dept-ticketing-ink:#d20a0a;
+  --dept-marketing-ink:#cb1052;
+  --dept-sponsorship-ink:#b217bb;
+  --dept-creative-ink:#0063d9;
+  --dept-production-ink:#6e3ff7;
+  --dept-operations-ink:#1c736f;
+  --dept-relations-ink:#8a6000;
+  --dept-hospitality-ink:#a65000;
+  --dept-finance-ink:#36751a;
+  --dept-fnb-ink:#8f5c11;
+  --dept-unassigned-ink:#686868;
+  --series-1:#2a6fc4;
+  --series-2:#c9531f;
+  --series-3:#0f8a5f;
+  --series-4:#a87100;
+  --series-5:#c4467a;
+}
+
+:root{
+  --font-system:ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
+  --font-grotesk:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
+  --font-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
+  --font-monoface:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
+  --font-condensed:"Avenir Next Condensed","Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
+  --font-rounded:ui-rounded,"SF Pro Rounded","Nunito","Varela Round",system-ui,sans-serif;
+  --font-humanist:Seravek,"Gill Sans","Gill Sans MT",Optima,Candara,Verdana,sans-serif;
+  --font-dm:"DM Sans",ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
+  --font-dmmono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
+}
+:root{
+  --ts-display-size:3rem;      --ts-display-weight:800; --ts-display-lh:1.05; --ts-display-ls:-.03em; --ts-display-case:none; --ts-display-font:var(--font-body, var(--font-system));
+  --ts-h1-size:2rem;           --ts-h1-weight:700;      --ts-h1-lh:1.15;      --ts-h1-ls:-.02em;      --ts-h1-case:none;      --ts-h1-font:var(--font-body, var(--font-system));
+  --ts-h2-size:1.5rem;         --ts-h2-weight:700;      --ts-h2-lh:1.2;       --ts-h2-ls:-.01em;      --ts-h2-case:none;      --ts-h2-font:var(--font-body, var(--font-system));
+  --ts-h3-size:1.1rem;         --ts-h3-weight:700;      --ts-h3-lh:1.3;       --ts-h3-ls:var(--ls-body,0); --ts-h3-case:none; --ts-h3-font:var(--font-body, var(--font-system));
+  --ts-lead-size:1.05rem;      --ts-lead-weight:400;    --ts-lead-lh:1.6;     --ts-lead-ls:var(--ls-body,0); --ts-lead-case:none; --ts-lead-font:var(--font-body, var(--font-system));
+  --ts-body-size:15px;         --ts-body-weight:400;    --ts-body-lh:1.5;     --ts-body-ls:var(--ls-body,0); --ts-body-case:none; --ts-body-font:var(--font-body, var(--font-system));
+  --ts-small-size:.875rem;     --ts-small-weight:400;   --ts-small-lh:1.5;    --ts-small-ls:var(--ls-body,0); --ts-small-case:none; --ts-small-font:var(--font-body, var(--font-system));
+  --ts-caption-size:.8125rem;  --ts-caption-weight:400; --ts-caption-lh:1.45; --ts-caption-ls:var(--ls-body,0); --ts-caption-case:none; --ts-caption-font:var(--font-body, var(--font-system));
+  --ts-label-size:.875rem;     --ts-label-weight:600;   --ts-label-lh:1.5;    --ts-label-ls:var(--ls-body,0); --ts-label-case:none; --ts-label-font:var(--font-body, var(--font-system));
+  --ts-eyebrow-size:.625rem;   --ts-eyebrow-weight:600; --ts-eyebrow-lh:1.2;  --ts-eyebrow-ls:.14em;  --ts-eyebrow-case:uppercase; --ts-eyebrow-font:var(--font-label, var(--font-body, var(--font-system)));
+}
+body{margin:0;background:var(--s);color:var(--i);font:var(--ts-body-weight) var(--ts-body-size)/var(--ts-body-lh) var(--ts-body-font);letter-spacing:var(--ts-body-ls);text-transform:var(--ts-body-case)}
+html{font-size:calc(100% * var(--type-k, 1))}
+:root{
+  --dept-booking:#ff8835;
+  --dept-booking-ink:#ff8835;
+  --dept-ticketing:#f87171;
+  --dept-ticketing-ink:#f87171;
+  --dept-marketing:#f4709f;
+  --dept-marketing-ink:#f4709f;
+  --dept-sponsorship:#e359eb;
+  --dept-sponsorship-ink:#e359eb;
+  --dept-creative:#5fa8ff;
+  --dept-creative-ink:#5fa8ff;
+  --dept-production:#a78bfa;
+  --dept-production-ink:#a78bfa;
+  --dept-operations:#3fd0c9;
+  --dept-operations-ink:#3fd0c9;
+  --dept-relations:#ffc94d;
+  --dept-relations-ink:#ffc94d;
+  --dept-hospitality:#ffb066;
+  --dept-hospitality-ink:#ffb066;
+  --dept-finance:#7ed957;
+  --dept-finance-ink:#7ed957;
+  --dept-fnb:#e8a33d;
+  --dept-fnb-ink:#e8a33d;
+  --dept-unassigned:#8a8a8a;
+  --dept-unassigned-ink:#8a8a8a;
+}
+html{ --font-body:var(--font-dm);
+  --font-label:var(--font-dmmono);
+  --ls-body:-.005em; }
+:root{
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  --tx-drift:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221024%22%20height%3D%221024%22%3E%3Cfilter%20id%3D%22n%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.6%22%20numOctaves%3D%222%22%20seed%3D%228%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22linear%22%20slope%3D%221%22%20intercept%3D%220%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%221024%22%20height%3D%221024%22%20filter%3D%22url%28%23n%29%22%2F%3E%3C%2Fsvg%3E");
+}
+body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-repeat:repeat;opacity:calc(var(--tx-o,0) * var(--tx-k,1));background-image:none}
+html body::before{ background-image:var(--tx-drift);
+  background-size:1024px 1024px;
+  --tx-o:.152;
+  animation:tx-drift 300s linear infinite; }
+html body::before{ animation:none; }
+@media (prefers-reduced-motion: reduce){
+*, *::before, *::after{animation:none!important;transition:none!important}
+}
+
+/* ── base: Untitled UI ── */
+/* bases/untitled.css: the Untitled UI flavor. Load after tokens.css, before components.css.
+ * Untitled UI React's free set is MIT (its PRO tier is a separate license and is not used). Sizes, shadows
+ * and states follow its source (components/base/*, styles/theme.css); colors come from the active theme.
+ * Every base sets the same component tokens, so any base works under the same components and React. */
+:root{
+  /* this base's heading sizes, on the kit's type styles (tokens.css); the type editor sits on top */
+  --ts-display-size:3.5rem;
+  --ts-h1-size:2.25rem;
+  --ts-h2-size:1.75rem;
+  --base:untitled;
+  /* Untitled UI's most used semantic names, pointed at the theme */
+  --color-text-primary:var(--i);
+  --color-text-secondary:var(--i2);
+  --color-text-tertiary:var(--i3);
+  --color-text-placeholder:var(--i3);
+  --color-text-brand-primary:var(--pos);
+  --color-text-error-primary:var(--neg);
+  --color-text-success-primary:var(--good);
+  --color-text-warning-primary:var(--warn);
+  --color-bg-primary:var(--s);
+  --color-bg-secondary:var(--p);
+  --color-bg-tertiary:var(--mid);
+  --color-bg-primary_hover:var(--mid);
+  --color-bg-brand-solid:var(--fill);
+  --color-bg-error-solid:var(--neg);
+  --color-bg-overlay:rgba(0,0,0,.7);
+  --color-border-primary:var(--input-border);
+  --color-border-secondary:var(--l);
+  --color-border-brand:var(--pos);
+  --color-border-error:var(--neg);
+  --color-fg-primary:var(--i);
+  --color-fg-secondary:var(--i2);
+  --color-fg-quaternary:var(--i3);
+  --color-focus-ring:var(--pos);
+  /* Untitled UI's shadow scale, verbatim */
+  --shadow-xs:0 1px 2px rgba(0,0,0,.05);
+  --shadow-sm:0 1px 3px rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
+  --shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.06);
+  --shadow-lg:0 12px 16px -4px rgba(0,0,0,.08),0 4px 6px -2px rgba(0,0,0,.03),0 2px 2px -1px rgba(0,0,0,.04);
+  --shadow-xl:0 20px 24px -4px rgba(0,0,0,.08),0 8px 8px -4px rgba(0,0,0,.03),0 3px 3px -1.5px rgba(0,0,0,.04);
+  --shadow-2xl:0 24px 48px -12px rgba(0,0,0,.18),0 4px 4px -2px rgba(0,0,0,.04);
+  /* shadow-xs-skeuomorphic: the inset edge on Untitled UI's buttons */
+  --shadow-skeuomorphic:0 0 0 1px rgba(0,0,0,.18) inset,0 -2px 0 0 rgba(0,0,0,.05) inset,0 1px 2px rgba(0,0,0,.05);
+}
+
+/* Component tokens: value; then @edit type [min max step]. The workbench edits these per system. */
+:root{
+  /* shared: focus is a 2px outline, offset 2px */
+  --focus-color:var(--pos);
+  --focus-width:2px;
+  --focus-offset:2px;
+  --disabled-opacity:.5;
+  /* Field edges: --i3 blended 80% toward --field, the softest blend that keeps 3:1 against every
+     ground in all 28 themes (check-kit.mjs measures it); 70% drops Newsprint to 2.58. */
+  --input-border:color-mix(in srgb,var(--i3) 80%,var(--field));
+
+  /* button, md: px-3.5 py-2.5 text-sm font-semibold rounded-lg, skeuomorphic shadow, 100ms linear */
+  --btn-radius:var(--r-md,8px);
+  --btn-h:40px;
+  --btn-pad-x:14px;
+  --btn-font-size:.875rem;
+  --btn-font-weight:600;
+  --btn-primary-bg:var(--fill);
+  --btn-primary-fg:var(--on-fill);
+  /* a darker edge so a light fill still shows a boundary on a light panel (lime on white is 1.31:1) */
+  --btn-primary-border:color-mix(in srgb,var(--on-fill) 14%,var(--fill));
+  --btn-primary-bg-hover:color-mix(in srgb,var(--fill) 88%,var(--on-fill));
+  --btn-secondary-bg:var(--s);
+  --btn-secondary-fg:var(--i2);
+  --btn-secondary-border:var(--input-border);
+  --btn-secondary-bg-hover:var(--mid);
+  --btn-shadow:var(--shadow-skeuomorphic);
+  --btn-hover-lift:0px;
+  --btn-press-scale:.98;
+  --btn-dur:100ms;
+  --btn-ease:linear;
+
+  /* input, md: px-3 py-2 text-md rounded-lg shadow-xs; focus is a solid 2px brand ring */
+  --input-h:40px;
+  --input-pad-x:12px;
+  --input-radius:var(--r-md,8px);
+  --input-bg:var(--s);
+  --input-border-hover:var(--i2);
+  --input-shadow:var(--shadow-xs);
+  --input-ring:var(--focus-color);
+  --input-ring-width:1px;
+  --input-dur:100ms;
+
+  /* toggle, md: 44 x 24, p-0.5, white thumb with shadow-sm, 150ms linear */
+  --switch-w:44px;
+  --switch-h:24px;
+  --switch-pad:2px;
+  --switch-off-bg:var(--mid);
+  --switch-on-bg:var(--fill);
+  --switch-thumb-off:var(--i3);
+  --switch-thumb-on:var(--on-fill);
+  --switch-thumb-shadow:var(--shadow-sm);
+  --switch-dur:150ms;
+  --switch-ease:linear;
+
+  /* tabs */
+  --tabs-gap:4px;
+  --tabs-indicator:var(--pos);
+  --tabs-indicator-h:2px;
+  --tabs-pill-bg:var(--mid);
+  --tabs-dur:100ms;
+  --tabs-ease:linear;
+
+  /* modal: rounded-2xl, shadow-xl, overlay at 70% with a blur */
+  --dialog-w:480px;
+  --dialog-radius:var(--r-xl,16px);
+  --dialog-backdrop:rgba(0,0,0,.7);
+  --dialog-blur:6px;
+  --dialog-enter-scale:.95;
+  --dialog-shadow:var(--shadow-xl);
+  --dialog-dur:200ms;
+  --dialog-ease:ease-out;
+
+  /* badge */
+  --badge-h:22px;
+  --badge-pad-x:8px;
+  --badge-radius:999px;
+  --badge-font-size:.75rem;
+  --badge-font-weight:500;
+  --badge-tint:12%;
+  --badge-neutral-bg:var(--mid);
+  --badge-ink:75%;
+
+  /* tag */
+  --tag-h:24px;
+  --tag-pad-x:8px;
+  --tag-radius:var(--r-sm,6px);
+  --tag-bg:var(--s);
+  --tag-fg:var(--i2);
+  --tag-border:var(--input-border);
+
+  /* avatar */
+  --avatar-size-base:40px;
+  --avatar-size:var(--avatar-size-base);
+  --avatar-radius:999px;
+  --avatar-bg:var(--mid);
+  --avatar-fg:var(--i2);
+  --avatar-ring:var(--p);
+
+  /* tooltip: inverted, dark on light and light on dark */
+  --tooltip-bg:var(--i);
+  --tooltip-fg:var(--s);
+  --tooltip-radius:8px;
+  --tooltip-font-size:.75rem;
+  --tooltip-delay:300ms;
+  --tooltip-dur:150ms;
+
+  /* progress: the fill is the primary color, not the button fill (lime on a pale track is about 1.1:1) */
+  --progress-h:8px;
+  --progress-radius:999px;
+  --progress-track:var(--on-fill); /* edited */
+  --progress-fill:var(--fill); /* edited */
+  --progress-dur:400ms; /* edited */
+  --progress-ease:ease-out;
+
+  /* spinner */
+  --spinner-size:24px;
+  --spinner-width:2px;
+  --spinner-color:var(--pos);
+  --spinner-track:var(--mid);
+  --spinner-dur:1000ms;
+
+  /* skeleton */
+  --skeleton-bg:var(--mid);
+  --skeleton-shine:color-mix(in srgb,var(--i) 8%,var(--mid));
+  --skeleton-radius:var(--r-sm,6px);
+  --skeleton-dur:1.6s;
+
+  /* alert */
+  --alert-pad:16px;
+  --alert-radius:12px;
+  --alert-tint:8%;
+  --alert-edge:35%;
+
+  /* application navigation (sidebar) */
+  /* app sidebar with a flyout (ui-sidebar) */
+  --sidebar-w:240px;
+  --sidebar-rail-w:52px;
+  --sidebar-item-h:34px;
+  --sidebar-radius:var(--r-sm,8px);
+  --sidebar-bg:var(--p);
+  --sidebar-border:var(--l);
+  --sidebar-fg:var(--i2);
+  --sidebar-head-fg:var(--i3);
+  --sidebar-hover-bg:var(--mid);
+  --sidebar-hover-fg:var(--i);
+  --sidebar-current-bg:var(--fill);
+  --sidebar-current-fg:var(--on-fill);
+  --sidebar-scrim:rgba(0,0,0,.4);
+  --sidebar-dur:var(--dur-base,200ms);
+  --sidebar-ease:var(--ease-standard,ease);
+  --sidenav-w:296px;
+  --sidenav-bg:var(--p);
+  --sidenav-fg:var(--i2);
+  --sidenav-active-bg:var(--mid);
+  --sidenav-active-fg:var(--i);
+  --sidenav-radius:var(--r-sm,6px);
+
+  /* metric */
+  --metric-value-size:2.25rem;
+  --metric-value-weight:600;
+
+  /* chart: the line is the primary color, which holds 3:1 on panels in every theme */
+  --chart-h:200px;
+  --chart-line:var(--pos);
+  --chart-stroke:2px;
+  --chart-area-opacity:.12;
+  --chart-grid:var(--l);
+
+  /* table */
+  --table-radius:12px;
+  --table-head-bg:var(--mid);
+  --table-head-fg:var(--i2);
+  --table-row-hover:var(--mid);
+
+  /* checkbox and radio: a step larger, to sit with this base's 40px controls */
+  --check-size:20px;
+  --check-radius:6px;
+  --check-on-bg:var(--fill);
+  --check-on-fg:var(--on-fill);
+  /* the checked box's edge: the fill moved toward body ink, so the box stays outlined on a panel in light and dark
+     themes alike (a lime fill alone is about 1.3:1 on white) */
+  --check-on-border:color-mix(in srgb,var(--i) 40%,var(--fill));
+  --radio-dot:8px;
+  --check-dur:120ms;
+  --check-ease:ease-out;
+
+  /* button group */
+  --btngroup-border:var(--input-border);
+  --btngroup-fg:var(--i2);
+  --btngroup-active-bg:var(--mid);
+  --btngroup-active-fg:var(--i);
+
+  /* dropdown menu: rounded-lg with a soft large shadow; roomier items */
+  --menu-w:200px;
+  --menu-radius:var(--r-lg,10px);
+  --menu-pad:4px;
+  --menu-item-pad:8px 10px;
+  --menu-item-radius:6px;
+  --menu-item-hover:var(--mid);
+  /* a destructive item: the critical color moved a little toward body ink, so it reads at 4.5:1 when highlighted */
+  --menu-danger-fg:color-mix(in srgb,var(--neg) 85%,var(--i));
+  --menu-shadow:var(--shadow-lg);
+  --menu-dur:120ms;
+
+  /* slider: the filled part is the primary color, which holds 3:1 on the track */
+  --slider-h:8px;
+  --slider-thumb:24px;
+  --slider-track:var(--mid);
+  --slider-fill:var(--pos);
+  --slider-thumb-bg:var(--p);
+  --slider-thumb-border:2px;
+  --slider-thumb-shadow:var(--shadow-md);
+
+  /* text editor */
+  --editor-min-h:140px;
+  --editor-toolbar-bg:var(--p);
+  --editor-tool-on:var(--mid);
+
+  /* video player: the controls sit on the picture, so they are light on a dark scrim in every theme */
+  --video-radius:var(--r-lg,10px);
+  --video-bg:black;
+  --video-fg:white;
+  --video-scrim:rgba(0,0,0,.65);
+
+  /* empty state, inline call to action, page header, pagination */
+  --empty-pad:40px 16px;
+  --empty-icon-bg:var(--mid);
+  --cta-bg:color-mix(in srgb,var(--pos) 6%,var(--p));
+  --cta-border:var(--l);
+  --pagehead-title-size:var(--ts-h2-size);
+  --pagination-current-bg:var(--mid);
+
+  /* progress steps: done steps take the button fill, the current one rings in the primary color */
+  --steps-marker:32px;
+  --steps-done-bg:var(--fill);
+  --steps-done-fg:var(--on-fill);
+  --steps-current:var(--pos);
+
+  /* calendar and date picker */
+  --cal-cell:40px;
+  --cal-radius:999px;
+  --cal-selected-bg:var(--fill);
+  --cal-selected-fg:var(--on-fill);
+  --cal-today:var(--pos);
+
+  /* code snippet: a quiet panel; comments in secondary text */
+  --code-bg:color-mix(in srgb,var(--mid) 60%,var(--p));
+  --code-fg:var(--i);
+
+  /* command menu, file drop zone, filter chips, tree */
+  --command-w:560px;
+  --dropzone-border:var(--input-border);
+  --dropzone-active:var(--pos);
+  --chip-on-bg:var(--fill);
+  --chip-on-fg:var(--on-fill);
+  --tree-selected-bg:var(--mid);
+
+  /* messaging: your messages take the button fill */
+  --chat-h:420px;
+  --chat-radius:16px;
+  --chat-in-bg:var(--mid);
+  --chat-in-fg:var(--i);
+  --chat-out-bg:var(--fill);
+  --chat-out-fg:var(--on-fill);
+
+  /* slide-out panel: opens like the dialog, with its motion and backdrop */
+  --sheet-w:440px;
+
+  /* marketing sections: the band's padding and width, heading sizes */
+  --section-pad-y:80px;
+  --section-max:1216px;
+  --section-title-size:var(--ts-h1-size);
+  --hero-title-size:var(--ts-display-size);
+  /* an eyebrow over a title: the primary color moved toward body ink, so small caps hold 4.5:1 */
+  --eyebrow-fg:color-mix(in srgb,var(--pos) 70%,var(--i));
+  --mk-card-bg:var(--p);
+  --sitenav-bg:var(--p);
+  --stat-rule:var(--pos);
+  --quote-mark:var(--pos);
+  /* pricing: the featured plan's edge in the primary color, which holds 3:1 on a panel */
+  --plan-featured:var(--pos);
+  --plan-check:var(--pos);
+  /* call-to-action band and footer: inverted, dark on light and light on dark */
+  --ctaband-bg:var(--i);
+  --ctaband-fg:var(--s);
+  --footer-bg:var(--i);
+  --footer-fg:var(--s);
+  --footer-muted:color-mix(in srgb,var(--s) 72%,var(--i));
+
+  /* banners, device frames, design annotations */
+  --banner-bg:var(--i);
+  --banner-fg:var(--s);
+  --device-body:color-mix(in srgb,var(--i) 88%,var(--s));
+  --annot-bg:var(--pos);
+  --annot-fg:var(--s);
+
+  /* motion: the shared timing every animation reads (motion.js, the playground, and the exported GSAP and Motion code).
+     Colin's Motion setting decides how much of it plays: Full all of it, Calm short fades only, Still none */
+  --dur-fast:150ms;
+  --dur-base:300ms;
+  --dur-slow:600ms;
+  --ease-standard:cubic-bezier(.4,0,.2,1);
+  --ease-enter:cubic-bezier(.22,1,.36,1);
+  --ease-exit:cubic-bezier(.4,0,1,1);
+  --motion-distance:20px;
+  --motion-stagger:80ms;
+}
+
+
+/* ── type styles: the kit's, unchanged (.ui-t-<style> in components.css applies one to any element) ── */
+/* ── components ── */
+/* The hidden attribute always wins. A component's own display (flex, grid ...) would otherwise override
+   the browser's [hidden], and a "hidden" badge or alert would still show. */
+[class^="ui-"][hidden],[class*=" ui-"][hidden]{display:none!important}
+
+/* ── ui-btn ── */
+.ui-btn{
+  --_bg:var(--btn-secondary-bg);--_fg:var(--btn-secondary-fg);--_bd:var(--btn-secondary-border);--_bg-h:var(--btn-secondary-bg-hover);
+  display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--btn-h);padding:0 var(--btn-pad-x);
+  font:inherit;font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);line-height:1;white-space:nowrap;text-decoration:none;
+  color:var(--_fg);background:var(--_bg);border:1px solid var(--_bd);border-radius:var(--btn-radius);box-shadow:var(--btn-shadow);cursor:pointer;
+  transition:background-color var(--btn-dur) var(--btn-ease),border-color var(--btn-dur) var(--btn-ease),color var(--btn-dur) var(--btn-ease),transform var(--btn-dur) var(--btn-ease),box-shadow var(--btn-dur) var(--btn-ease);
+}
+.ui-btn:hover,.ui-btn.is-hover{background:var(--_bg-h);transform:translateY(calc(-1 * var(--btn-hover-lift)))}
+.ui-btn:active,.ui-btn.is-active{transform:scale(var(--btn-press-scale))}
+.ui-btn:focus-visible,.ui-btn.is-focus{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}
+.ui-btn:disabled,.ui-btn[aria-disabled="true"],.ui-btn.is-disabled{opacity:var(--disabled-opacity);cursor:not-allowed;transform:none;pointer-events:none}
+.ui-btn svg{width:16px;height:16px;flex:none}
+.ui-btn--primary{--_bg:var(--btn-primary-bg);--_fg:var(--btn-primary-fg);--_bd:var(--btn-primary-border);--_bg-h:var(--btn-primary-bg-hover)}
+.ui-btn--ghost{--_bg:transparent;--_bd:transparent;--_fg:var(--i2);--_bg-h:var(--mid);box-shadow:none}
+.ui-btn--ghost:hover,.ui-btn--ghost.is-hover{color:var(--i)}
+/* text on a --neg fill uses the ground color: the same pair the contrast checker already holds at 4.5:1 */
+.ui-btn--destructive{--_bg:var(--neg);--_fg:var(--s);--_bd:var(--neg);--_bg-h:color-mix(in srgb,var(--neg) 88%,var(--s))}
+.ui-btn--link{--_bg:transparent;--_bd:transparent;--_fg:var(--pos);--_bg-h:transparent;height:auto;padding:0;box-shadow:none;text-decoration:underline;text-underline-offset:3px}
+.ui-btn--sm{height:calc(var(--btn-h) - 6px);padding:0 calc(var(--btn-pad-x) - 4px);font-size:.82rem}
+.ui-btn--lg{height:calc(var(--btn-h) + 8px);padding:0 calc(var(--btn-pad-x) + 6px);font-size:1rem}
+.ui-btn--icon{width:var(--btn-h);padding:0}
+.ui-btn[aria-busy="true"]{pointer-events:none}
+.ui-btn[aria-busy="true"]::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:ui-spin .7s linear infinite}
+@keyframes ui-spin{to{transform:rotate(360deg)}}
+/* ── end ui-btn ── */
+
+/* ── ui-input ── */
+.ui-field{display:grid;gap:6px;min-width:0}
+.ui-label{font-size:var(--ts-label-size);color:var(--i);font-weight:var(--ts-label-weight);line-height:var(--ts-label-lh);letter-spacing:var(--ts-label-ls);text-transform:var(--ts-label-case);font-family:var(--ts-label-font)}
+.ui-hint{font-size:var(--ts-caption-size);color:var(--i3);font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-error{font-size:var(--ts-caption-size);color:var(--neg);font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-input{width:100%;box-shadow:var(--input-shadow);height:var(--input-h);padding:0 var(--input-pad-x);font-size:var(--ts-body-size);color:var(--i);background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);transition:border-color var(--input-dur) ease,box-shadow var(--input-dur) ease;font-weight:var(--ts-body-weight);line-height:var(--ts-body-lh);letter-spacing:var(--ts-body-ls);text-transform:var(--ts-body-case);font-family:var(--ts-body-font)}
+.ui-input::placeholder{color:var(--i3);opacity:1}
+.ui-input:hover,.ui-input.is-hover{border-color:var(--input-border-hover)}
+.ui-input:focus,.ui-input.is-focus{outline:none;border-color:var(--focus-color);box-shadow:var(--input-shadow),0 0 0 var(--input-ring-width) var(--input-ring)}
+.ui-input[aria-invalid="true"]{border-color:var(--neg)}
+.ui-input[aria-invalid="true"]:focus{box-shadow:var(--input-shadow),0 0 0 var(--input-ring-width) color-mix(in srgb,var(--neg) 28%,transparent)}
+.ui-input:disabled,.ui-input.is-disabled{opacity:var(--disabled-opacity);cursor:not-allowed}
+textarea.ui-input{height:auto;min-height:96px;padding:10px var(--input-pad-x);line-height:1.5;resize:vertical}
+/* ── end ui-input ── */
+
+/* ── ui-select ── */
+.ui-select{position:relative;display:block;min-width:0}
+.ui-select .ui-input{appearance:none;padding-right:38px;cursor:pointer}
+.ui-select::after{content:"";position:absolute;right:15px;top:50%;width:7px;height:7px;border-right:1.5px solid var(--i3);border-bottom:1.5px solid var(--i3);transform:translateY(-70%) rotate(45deg);pointer-events:none;transition:border-color var(--input-dur) ease}
+.ui-select:hover::after,.ui-select:focus-within::after{border-color:var(--i)}
+.ui-select option{background:var(--p);color:var(--i)}
+/* ── end ui-select ── */
+
+/* ── ui-switch ── */
+.ui-switch-row{display:inline-flex;align-items:center;gap:10px;cursor:pointer;color:var(--i)}
+.ui-switch{
+  appearance:none;flex:none;position:relative;width:var(--switch-w);height:var(--switch-h);margin:0;cursor:pointer;
+  background:var(--switch-off-bg);border:1px solid var(--input-border);border-radius:999px;
+  transition:background-color var(--switch-dur) var(--switch-ease),border-color var(--switch-dur) var(--switch-ease);
+}
+.ui-switch::before{
+  content:"";position:absolute;top:50%;left:var(--switch-pad);height:calc(var(--switch-h) - 2 * var(--switch-pad) - 2px);aspect-ratio:1;
+  border-radius:999px;background:var(--switch-thumb-off);box-shadow:var(--switch-thumb-shadow);transform:translateY(-50%);
+  transition:transform var(--switch-dur) var(--switch-ease),background-color var(--switch-dur) ease,aspect-ratio var(--switch-dur) var(--switch-ease);
+}
+.ui-switch:checked{background:var(--switch-on-bg);border-color:var(--switch-on-bg)}
+.ui-switch:checked::before{background:var(--switch-thumb-on);transform:translate(calc(var(--switch-w) - var(--switch-h)),-50%)}
+.ui-switch:active::before,.ui-switch.is-active::before{aspect-ratio:1.25}
+.ui-switch:checked:active::before,.ui-switch:checked.is-active::before{transform:translate(calc(var(--switch-w) - var(--switch-h) - .25 * (var(--switch-h) - 2 * var(--switch-pad) - 2px)),-50%)}
+.ui-switch:hover,.ui-switch.is-hover{border-color:var(--input-border-hover)}
+.ui-switch:checked:hover,.ui-switch:checked.is-hover{border-color:var(--switch-on-bg)}
+.ui-switch:focus-visible,.ui-switch.is-focus{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}
+.ui-switch:disabled,.ui-switch.is-disabled{opacity:var(--disabled-opacity);cursor:not-allowed}
+/* ── end ui-switch ── */
+
+/* ── ui-tabs ── */
+.ui-tabs{display:grid;gap:14px;min-width:0}
+.ui-tablist{position:relative;display:flex;gap:var(--tabs-gap);border-bottom:1px solid var(--l);overflow-x:auto;scrollbar-width:none}
+.ui-tab{position:relative;z-index:1;font-size:var(--ts-small-size);font-weight:600;padding:10px 12px;border:0;background:transparent;color:var(--i3);cursor:pointer;white-space:nowrap;border-radius:var(--r-sm,8px) var(--r-sm,8px) 0 0;transition:color var(--tabs-dur) var(--tabs-ease);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-tab:hover,.ui-tab.is-hover{color:var(--i)}
+.ui-tab[aria-selected="true"]{color:var(--i)}
+.ui-tab:focus-visible,.ui-tab.is-focus{outline:var(--focus-width) solid var(--focus-color);outline-offset:calc(-1 * var(--focus-width))}
+.ui-tab:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}
+/* the indicator slides: components.js sets --x and --w from the selected tab */
+.ui-tab-indicator{position:absolute;left:0;bottom:-1px;height:var(--tabs-indicator-h);width:var(--w,0);transform:translateX(var(--x,0));background:var(--tabs-indicator);border-radius:2px;transition:transform var(--tabs-dur) var(--tabs-ease),width var(--tabs-dur) var(--tabs-ease)}
+.ui-tabs--pill .ui-tablist{border:1px solid var(--l);border-radius:var(--r-md,10px);padding:4px;background:var(--field);width:max-content;max-width:100%}
+.ui-tabs--pill .ui-tab{border-radius:var(--r-sm,8px);padding:7px 14px}
+.ui-tabs--pill .ui-tab-indicator{top:4px;bottom:4px;height:auto;background:var(--tabs-pill-bg);border-radius:var(--r-sm,8px);box-shadow:var(--shadow-xs)}
+.ui-tabpanel{min-width:0;color:var(--i2)}
+.ui-tabpanel:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:4px;border-radius:4px}
+/* ── end ui-tabs ── */
+
+/* ── ui-dialog ── */
+.ui-dialog{
+  width:min(var(--dialog-w),calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:0;overflow:auto;
+  color:var(--i);background:var(--p);border:1px solid var(--l);border-radius:var(--dialog-radius);box-shadow:var(--dialog-shadow);
+  opacity:0;transform:translateY(8px) scale(var(--dialog-enter-scale));
+  transition:opacity var(--dialog-dur) var(--dialog-ease),transform var(--dialog-dur) var(--dialog-ease),overlay var(--dialog-dur) allow-discrete,display var(--dialog-dur) allow-discrete;
+}
+.ui-dialog[open]{opacity:1;transform:none}
+@starting-style{.ui-dialog[open]{opacity:0;transform:translateY(8px) scale(var(--dialog-enter-scale))}}
+.ui-dialog::backdrop{background:var(--dialog-backdrop);backdrop-filter:blur(var(--dialog-blur));opacity:0;transition:opacity var(--dialog-dur) ease,overlay var(--dialog-dur) allow-discrete,display var(--dialog-dur) allow-discrete}
+.ui-dialog[open]::backdrop{opacity:1}
+@starting-style{.ui-dialog[open]::backdrop{opacity:0}}
+html:has(.ui-dialog[open]){overflow:hidden}
+.ui-dialog-head{display:flex;align-items:flex-start;gap:12px;padding:20px 20px 0}
+.ui-dialog-title{flex:1;margin:0;font-size:var(--ts-h3-size);color:var(--i);font-weight:var(--ts-h3-weight);line-height:var(--ts-h3-lh);letter-spacing:var(--ts-h3-ls);text-transform:var(--ts-h3-case);font-family:var(--ts-h3-font)}
+.ui-dialog-desc{margin:6px 0 0;font-size:var(--ts-small-size);color:var(--i2);font-weight:var(--ts-small-weight);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-dialog-body{padding:14px 20px;color:var(--i2)}
+.ui-dialog-foot{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding:0 20px 20px}
+.ui-dialog-close{flex:none;display:grid;place-items:center;width:32px;height:32px;margin:-6px -8px 0 0;border:0;border-radius:var(--r-sm,8px);background:transparent;color:var(--i3);cursor:pointer;transition:background-color var(--btn-dur) ease,color var(--btn-dur) ease}
+.ui-dialog-close:hover{background:var(--mid);color:var(--i)}
+.ui-dialog-close:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}
+/* ── end ui-dialog ── */
+
+/* ── ui-badge ── */
+/* tones tint the panel with their own color. Text is the tone moved toward body ink (--badge-ink), which
+   adds contrast in light and dark alike: on the tint alone, Colin's status colors fall under 4.5:1 in
+   13 themes. check-kit holds the text at 4.5:1. */
+.ui-badge{--_tone:var(--i2);--_bg:var(--badge-neutral-bg);
+  display:inline-flex;align-items:center;gap:6px;height:var(--badge-h);padding:0 var(--badge-pad-x);font-size:var(--badge-font-size);font-weight:var(--badge-font-weight);line-height:1;white-space:nowrap;
+  color:color-mix(in srgb,var(--_tone) var(--badge-ink),var(--i));background:var(--_bg);border:1px solid color-mix(in srgb,var(--_tone) 30%,transparent);border-radius:var(--badge-radius)}
+.ui-badge--ok{--_tone:var(--good);--_bg:color-mix(in srgb,var(--good) var(--badge-tint),var(--p))}
+.ui-badge--warn{--_tone:var(--warn);--_bg:color-mix(in srgb,var(--warn) var(--badge-tint),var(--p))}
+.ui-badge--critical{--_tone:var(--neg);--_bg:color-mix(in srgb,var(--neg) var(--badge-tint),var(--p))}
+.ui-badge--brand{--_tone:var(--on-fill);--_bg:var(--fill);border-color:var(--fill);color:var(--on-fill)}
+.ui-badge--outline{--_bg:transparent;border-color:var(--input-border)}
+.ui-badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
+/* ── end ui-badge ── */
+
+/* ── ui-tag ── */
+.ui-tags{display:flex;flex-wrap:wrap;gap:6px}
+.ui-tag{display:inline-flex;align-items:center;gap:4px;height:var(--tag-h);padding:0 4px 0 var(--tag-pad-x);font-size:var(--ts-caption-size);font-weight:500;color:var(--tag-fg);background:var(--tag-bg);border:1px solid var(--tag-border);border-radius:var(--tag-radius);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-tag:not(:has(.ui-tag-remove)){padding-right:var(--tag-pad-x)}
+.ui-tag-remove{display:grid;place-items:center;width:18px;height:18px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--i3);cursor:pointer;transition:background-color var(--btn-dur) ease,color var(--btn-dur) ease}
+.ui-tag-remove:hover,.ui-tag-remove.is-hover{background:var(--mid);color:var(--i)}
+.ui-tag-remove:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:1px}
+.ui-tag-remove svg{width:12px;height:12px}
+/* ── end ui-tag ── */
+
+/* ── ui-avatar ── */
+.ui-avatar{position:relative;display:inline-grid;place-items:center;flex:none;width:var(--avatar-size);height:var(--avatar-size);border-radius:var(--avatar-radius);background:var(--avatar-bg);color:var(--avatar-fg);font-size:calc(var(--avatar-size) * .38);font-weight:600;line-height:1;user-select:none}
+.ui-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
+.ui-avatar--sm{--avatar-size:calc(var(--avatar-size-base) * .75)}
+.ui-avatar--lg{--avatar-size:calc(var(--avatar-size-base) * 1.25)}
+.ui-avatar-status{position:absolute;right:0;bottom:0;width:30%;height:30%;min-width:8px;min-height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 2px var(--avatar-ring)}
+.ui-avatar-group{display:inline-flex}
+.ui-avatar-group .ui-avatar{box-shadow:0 0 0 2px var(--avatar-ring)}
+.ui-avatar-group .ui-avatar + .ui-avatar{margin-left:calc(var(--avatar-size) * -.2)}
+/* ── end ui-avatar ── */
+
+/* ── ui-tooltip ── */
+/* shows on hover and on keyboard focus; Escape hides it (WCAG 1.4.13), components.js */
+.ui-tooltip-wrap{position:relative;display:inline-flex}
+.ui-tooltip{position:absolute;z-index:70;left:50%;bottom:calc(100% + 8px);width:max-content;max-width:240px;padding:6px 10px;font-size:var(--tooltip-font-size);font-weight:500;line-height:1.4;color:var(--tooltip-fg);background:var(--tooltip-bg);border-radius:var(--tooltip-radius);box-shadow:var(--shadow-md);pointer-events:none;
+  opacity:0;transform:translate(-50%,4px);transition:opacity var(--tooltip-dur) ease,transform var(--tooltip-dur) ease;transition-delay:0s}
+.ui-tooltip-wrap[data-side="bottom"] .ui-tooltip{bottom:auto;top:calc(100% + 8px);transform:translate(-50%,-4px)}
+.ui-tooltip-wrap:hover:not(.is-dismissed) .ui-tooltip,.ui-tooltip-wrap:focus-within:not(.is-dismissed) .ui-tooltip,.ui-tooltip-wrap.is-hover .ui-tooltip{opacity:1;transform:translate(-50%,0);transition-delay:var(--tooltip-delay)}
+/* ── end ui-tooltip ── */
+
+/* ── ui-progress ── */
+.ui-progress{position:relative;width:100%;height:var(--progress-h);overflow:hidden;background:var(--progress-track);border-radius:var(--progress-radius)}
+.ui-progress-bar{height:100%;width:var(--value,0%);background:var(--progress-fill);border-radius:inherit;transition:width var(--progress-dur) var(--progress-ease)}
+.ui-progress--indeterminate .ui-progress-bar{width:40%;animation:ui-progress-slide 1.4s ease-in-out infinite}
+@keyframes ui-progress-slide{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
+.ui-progress-label{display:flex;justify-content:space-between;font-size:var(--ts-caption-size);color:var(--i2);margin-bottom:6px;font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+/* ── end ui-progress ── */
+
+/* ── ui-spinner ── */
+.ui-spinner{display:inline-block;flex:none;width:var(--spinner-size);height:var(--spinner-size);border-radius:50%;border:var(--spinner-width) solid var(--spinner-track);border-top-color:var(--spinner-color);animation:ui-spin var(--spinner-dur) linear infinite}
+.ui-spinner--sm{width:calc(var(--spinner-size) * .7);height:calc(var(--spinner-size) * .7)}
+.ui-spinner--lg{width:calc(var(--spinner-size) * 1.6);height:calc(var(--spinner-size) * 1.6)}
+/* text for screen readers only */
+.ui-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+/* ── end ui-spinner ── */
+
+/* ── ui-skeleton ── */
+/* a placeholder while content loads; add .ambient so Colin's Calm motion level stops the shimmer */
+.ui-skeleton{display:block;height:1em;border-radius:var(--skeleton-radius);background:linear-gradient(90deg,var(--skeleton-bg) 0%,var(--skeleton-shine) 50%,var(--skeleton-bg) 100%);background-size:200% 100%;animation:ui-shimmer var(--skeleton-dur) ease-in-out infinite}
+.ui-skeleton--circle{border-radius:50%}
+@keyframes ui-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
+/* ── end ui-skeleton ── */
+
+/* ── ui-alert ── */
+.ui-alert{--_tone:var(--pos);
+  display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:start;padding:var(--alert-pad);color:var(--i);
+  background:color-mix(in srgb,var(--_tone) var(--alert-tint),var(--p));border:1px solid color-mix(in srgb,var(--_tone) var(--alert-edge),var(--p));border-radius:var(--alert-radius)}
+.ui-alert--ok{--_tone:var(--good)}
+.ui-alert--warn{--_tone:var(--warn)}
+.ui-alert--critical{--_tone:var(--neg)}
+.ui-alert-icon{grid-row:span 2;width:20px;height:20px;color:var(--_tone);margin-top:1px}
+.ui-alert-title{margin:0;font-size:var(--ts-small-size);font-weight:700;color:var(--i);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-alert-body{grid-column:2;margin:0;font-size:var(--ts-small-size);color:var(--i2);font-weight:var(--ts-small-weight);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-alert-close{grid-row:1;grid-column:3;display:grid;place-items:center;width:28px;height:28px;margin:-4px -6px 0 0;border:0;border-radius:var(--r-sm,8px);background:transparent;color:var(--i3);cursor:pointer}
+.ui-alert-close:hover{background:color-mix(in srgb,var(--_tone) 14%,transparent);color:var(--i)}
+.ui-alert-close:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:1px}
+/* an alert written without an icon uses the full width */
+.ui-alert:not(:has(.ui-alert-icon)){grid-template-columns:1fr auto}
+.ui-alert:not(:has(.ui-alert-icon)) .ui-alert-body{grid-column:1}
+.ui-alert:not(:has(.ui-alert-icon)) .ui-alert-close{grid-column:2}
+/* ── end ui-alert ── */
+
+/* ── ui-sidenav ── */
+.ui-sidenav{display:flex;flex-direction:column;gap:6px;width:var(--sidenav-w);min-height:100%;padding:16px 12px;background:var(--sidenav-bg);border-right:1px solid var(--l)}
+.ui-sidenav-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 10px;font-weight:700;color:var(--i)}
+.ui-sidenav-list{display:grid;gap:2px;margin:0;padding:0;list-style:none}
+.ui-sidenav-link{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--sidenav-radius);font-size:var(--ts-small-size);font-weight:600;color:var(--sidenav-fg);text-decoration:none;transition:background-color var(--btn-dur) ease,color var(--btn-dur) ease;line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-sidenav-link svg{width:18px;height:18px;flex:none;color:var(--i3)}
+.ui-sidenav-link:hover,.ui-sidenav-link.is-hover{background:var(--mid);color:var(--i)}
+.ui-sidenav-link[aria-current="page"]{background:var(--sidenav-active-bg);color:var(--sidenav-active-fg)}
+.ui-sidenav-link[aria-current="page"] svg{color:var(--sidenav-active-fg)}
+.ui-sidenav-link:focus-visible,.ui-sidenav-link.is-focus{outline:var(--focus-width) solid var(--focus-color);outline-offset:-2px}
+.ui-sidenav-link .ui-badge{margin-left:auto}
+.ui-sidenav-spacer{flex:1}
+.ui-sidenav-user{display:flex;align-items:center;gap:10px;margin-top:6px;padding:10px;border:1px solid var(--l);border-radius:var(--sidenav-radius);min-width:0}
+.ui-sidenav-user span:last-child{display:grid;min-width:0;font-size:var(--ts-caption-size);font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-sidenav-user strong{color:var(--i);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.ui-sidenav-user small{color:var(--i3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+/* ── end ui-sidenav ── */
+
+/* ── ui-sidebar: the app sidebar with a flyout, after the BKSTG workbench's own. Wide: it collapses to an
+   icon rail (the toggle at the top). Narrow (the app shell .ui-app under 720px): it slides over the page as
+   a drawer, opened from the bar's menu button; Escape or a tap outside closes it. Sections have a tiny
+   heading; a group opens in place (in the rail, opening a group widens the sidebar first). The current page
+   uses the button fill, so it reads as the primary color in every theme. Behavior: components.js. ── */
+.ui-app{container-type:inline-size;position:relative;display:flex;min-height:100%;background:var(--s)}
+.ui-app-main{display:flex;flex-direction:column;flex:1;min-width:0}
+.ui-app-bar{display:none;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--sidebar-border);background:var(--sidebar-bg)}
+.ui-sidebar{display:flex;flex-direction:column;gap:2px;flex:none;width:var(--sidebar-w);padding:8px;overflow:hidden auto;background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border);transition:width var(--sidebar-dur) var(--sidebar-ease)}
+.ui-sidebar[data-state="collapsed"]{width:var(--sidebar-rail-w)}
+.ui-sidebar-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--sidebar-item-h);padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid var(--sidebar-border)}
+.ui-sidebar-brand{display:flex;align-items:center;gap:8px;min-width:0;padding-left:6px;font-weight:700;color:var(--i);white-space:nowrap;overflow:hidden}
+.ui-sidebar-toggle,.ui-sidebar-open{display:grid;place-items:center;flex:none;width:var(--sidebar-item-h);height:var(--sidebar-item-h);padding:0;border:0;border-radius:var(--sidebar-radius);background:transparent;color:var(--sidebar-fg);cursor:pointer}
+.ui-sidebar-toggle svg,.ui-sidebar-open svg{width:18px;height:18px}
+.ui-sidebar-item{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--sidebar-item-h);padding:0 9px;border:0;border-radius:var(--sidebar-radius);background:transparent;color:var(--sidebar-fg);font:inherit;font-size:var(--ts-small-size);font-weight:600;line-height:1.2;text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--sidebar-dur) var(--sidebar-ease),color var(--sidebar-dur) var(--sidebar-ease)}
+.ui-sidebar-item svg{flex:none;width:18px;height:18px}
+.ui-sidebar-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
+.ui-sidebar-count{margin-left:auto;font-size:var(--ts-caption-size);font-weight:600}
+.ui-sidebar-chev{display:grid;margin-left:auto;transition:transform var(--sidebar-dur) var(--sidebar-ease)}
+.ui-sidebar-chev svg{width:14px;height:14px}
+.ui-sidebar-item[aria-expanded="true"] .ui-sidebar-chev{transform:rotate(180deg)}
+.ui-sidebar-item:hover,.ui-sidebar-item.is-hover,.ui-sidebar-toggle:hover,.ui-sidebar-open:hover{background:var(--sidebar-hover-bg);color:var(--sidebar-hover-fg)}
+.ui-sidebar-item[aria-current="page"]{background:var(--sidebar-current-bg);color:var(--sidebar-current-fg)}
+.ui-sidebar-item:focus-visible,.ui-sidebar-item.is-focus,.ui-sidebar-toggle:focus-visible,.ui-sidebar-open:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:-2px}
+.ui-sidebar-group{display:grid;gap:2px}
+.ui-sidebar-group-body{display:grid;gap:2px;padding:2px 0 4px 28px}
+.ui-sidebar-group-body[hidden]{display:none}
+.ui-sidebar-head{margin:10px 0 2px;padding:8px 9px 0;border-top:1px solid var(--sidebar-border);color:var(--sidebar-head-fg);font-size:var(--ts-eyebrow-size);font-weight:var(--ts-eyebrow-weight);line-height:var(--ts-eyebrow-lh);letter-spacing:var(--ts-eyebrow-ls);text-transform:var(--ts-eyebrow-case);font-family:var(--ts-eyebrow-font)}
+.ui-sidebar-foot{display:grid;gap:2px;margin-top:auto;padding-top:8px}
+/* the rail: icons only, each still named (aria-label on the link, title for a pointer) */
+.ui-sidebar[data-state="collapsed"] :is(.ui-sidebar-chev,.ui-sidebar-brand,.ui-sidebar-group-body){display:none}
+.ui-sidebar[data-state="collapsed"] :is(.ui-sidebar-label,.ui-sidebar-count){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
+.ui-sidebar[data-state="collapsed"] .ui-sidebar-top{justify-content:center}
+.ui-sidebar[data-state="collapsed"] .ui-sidebar-item{justify-content:center;width:var(--sidebar-item-h);padding:0}
+.ui-sidebar[data-state="collapsed"] .ui-sidebar-head{height:0;margin:6px 0;padding:0;overflow:hidden}
+/* narrow: a drawer over the page, and the bar that opens it */
+@container (max-width:720px){
+  .ui-app-bar{display:flex}
+  .ui-sidebar,.ui-sidebar[data-state="collapsed"]{position:absolute;inset:0 auto 0 0;z-index:20;width:min(var(--sidebar-w),86cqw);transform:translateX(-100%);visibility:hidden;transition:transform var(--sidebar-dur) var(--sidebar-ease),visibility 0s linear var(--sidebar-dur)}
+  .ui-sidebar[data-state="expanded"]{transform:none;visibility:visible;box-shadow:0 0 0 100vmax var(--sidebar-scrim);transition:transform var(--sidebar-dur) var(--sidebar-ease),visibility 0s}
+}
+/* ── end ui-sidebar ── */
+
+/* ── ui-metric ── */
+.ui-metric{display:grid;gap:4px;min-width:0}
+.ui-metric-label{font-size:var(--ts-small-size);font-weight:500;color:var(--i2);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-metric-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
+/* proportional figures: equal-width (tabular) digits make some faces, DM Sans among them, set the comma as wide
+   as a digit, so 18,880 read as "18 , 880". Tables keep tabular digits, where columns need to line up. */
+.ui-metric-value{font-size:var(--metric-value-size);font-weight:var(--metric-value-weight);line-height:1.1;letter-spacing:-.02em;color:var(--i);font-variant-numeric:proportional-nums}
+.ui-metric-delta{display:inline-flex;align-items:center;gap:2px;font-size:var(--ts-caption-size);font-weight:600;color:var(--good);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-metric-delta--down{color:var(--neg)}
+/* the change's color says good or bad, not up or down: by default up is good; goodWhen="down" (refunds, churn,
+   costs) flips it. The words say both: "down 2%, better" */
+.ui-metric-delta--good{color:var(--good)}.ui-metric-delta--bad{color:var(--neg)}
+.ui-metric-delta svg{width:16px;height:16px}
+/* ── end ui-metric ── */
+
+/* ── ui-chart ── */
+/* a line chart drawn from data by components.js (data-ui-chart) or react/LineChart.jsx */
+.ui-chart{position:relative;min-width:0;container-type:inline-size}
+.ui-chart svg{display:block;width:100%;height:var(--chart-h);overflow:visible}
+.ui-chart-grid{stroke:var(--chart-grid);stroke-width:1}
+.ui-chart-area{fill:var(--chart-line);opacity:var(--chart-area-opacity)}
+.ui-chart-line{fill:none;stroke:var(--chart-line);stroke-width:var(--chart-stroke);stroke-linejoin:round;stroke-linecap:round}
+.ui-chart-axis{display:flex;justify-content:space-between;margin-top:8px;font-size:var(--ts-caption-size);color:var(--i3);font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+/* a narrow chart shows every other label, so they never run together */
+@container (max-width:360px){.ui-chart-axis span:nth-child(even){visibility:hidden}}
+.ui-chart-marker{position:absolute;top:0;width:1px;background:var(--i3);pointer-events:none}
+.ui-chart-tip{position:absolute;padding:4px 8px;font-size:var(--ts-caption-size);font-weight:600;white-space:nowrap;color:var(--tooltip-fg);background:var(--tooltip-bg);border-radius:var(--tooltip-radius);pointer-events:none;box-shadow:var(--shadow-md);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+/* ── end ui-chart ── */
+
+/* ── ui-table ── */
+.ui-table-wrap{overflow-x:auto;border:1px solid var(--l);border-radius:var(--table-radius);background:var(--p)}
+.ui-table{width:100%;border-collapse:collapse;font-size:var(--ts-small-size);font-weight:var(--ts-small-weight);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-table caption{padding:14px 16px;text-align:left;font-weight:700;color:var(--i)}
+.ui-table th{padding:10px 16px;text-align:left;font-size:var(--ts-caption-size);font-weight:600;color:var(--table-head-fg);background:var(--table-head-bg);border-bottom:1px solid var(--l);white-space:nowrap;line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-table td{padding:12px 16px;color:var(--i2);border-bottom:1px solid var(--l)}
+.ui-table tbody tr:last-child td{border-bottom:0}
+.ui-table tbody tr{transition:background-color var(--btn-dur) ease}
+.ui-table tbody tr:hover,.ui-table tbody tr.is-hover{background:var(--table-row-hover)}
+.ui-table td.ui-table-strong{color:var(--i);font-weight:600}
+.ui-table .ui-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
+/* ── end ui-table ── */
+
+/* ── ui-feed ── */
+.ui-feed{display:grid;gap:0;margin:0;padding:0;list-style:none}
+.ui-feed-item{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--l)}
+.ui-feed-item:last-child{border-bottom:0}
+.ui-feed-item > .ui-avatar{grid-row:span 2}
+.ui-feed-text{margin:0;font-size:var(--ts-small-size);color:var(--i2);font-weight:var(--ts-small-weight);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-feed-text strong{color:var(--i);font-weight:600}
+.ui-feed-time{font-size:var(--ts-caption-size);color:var(--i3);font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+/* ── end ui-feed ── */
+
+/* ── ui-check ── */
+/* checkbox and radio: real inputs, drawn with appearance:none, so forms, Space and labels all still work */
+.ui-choices{display:grid;gap:12px;margin:0;padding:0;border:0;min-width:0}
+.ui-choices > legend{padding:0;margin-bottom:10px}
+.ui-check-row{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:var(--ts-small-size);color:var(--i);font-weight:var(--ts-small-weight);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-check-text{display:grid;gap:2px;min-width:0}
+.ui-check-text small{font-size:var(--ts-caption-size);color:var(--i3);font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-check,.ui-radio{
+  appearance:none;flex:none;display:inline-grid;place-content:center;width:var(--check-size);height:var(--check-size);margin:calc((1.45em - var(--check-size)) / 2) 0 0;
+  background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--check-radius);box-shadow:var(--input-shadow);cursor:pointer;
+  transition:background-color var(--check-dur) var(--check-ease),border-color var(--check-dur) var(--check-ease);
+}
+.ui-radio{border-radius:50%}
+.ui-check::before,.ui-radio::before{content:"";width:calc(var(--check-size) * .62);height:calc(var(--check-size) * .62);background:var(--check-on-fg);transform:scale(0);transition:transform var(--check-dur) var(--check-ease)}
+.ui-check::before{clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}
+.ui-radio::before{width:var(--radio-dot);height:var(--radio-dot);border-radius:50%}
+.ui-check:checked,.ui-check:indeterminate,.ui-radio:checked{background:var(--check-on-bg);border-color:var(--check-on-border)}
+.ui-check:checked::before,.ui-radio:checked::before{transform:scale(1)}
+.ui-check:indeterminate::before{clip-path:inset(38% 8% round 2px);transform:scale(1)}
+.ui-check:hover,.ui-check.is-hover,.ui-radio:hover,.ui-radio.is-hover{border-color:var(--input-border-hover)}
+.ui-check:checked:hover,.ui-radio:checked:hover{border-color:var(--check-on-border)}
+.ui-check:focus-visible,.ui-check.is-focus,.ui-radio:focus-visible,.ui-radio.is-focus{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}
+.ui-check:disabled,.ui-check.is-disabled,.ui-radio:disabled,.ui-radio.is-disabled{opacity:var(--disabled-opacity);cursor:not-allowed}
+.ui-check-row:has(:disabled){cursor:not-allowed;color:var(--i3)}
+/* ── end ui-check ── */
+
+/* ── ui-btngroup ── */
+/* a row of joined buttons. Toggle buttons carry aria-pressed; with data-ui-single, components.js keeps one pressed */
+.ui-btngroup{display:inline-flex;max-width:100%;overflow-x:auto;scrollbar-width:none;background:var(--btn-secondary-bg);border:1px solid var(--btngroup-border);border-radius:var(--btn-radius);box-shadow:var(--btn-shadow)}
+.ui-btngroup-item{
+  display:inline-flex;align-items:center;gap:8px;flex:none;height:calc(var(--btn-h) - 2px);padding:0 calc(var(--btn-pad-x) - 2px);
+  font:inherit;font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);line-height:1;white-space:nowrap;color:var(--btngroup-fg);
+  background:transparent;border:0;border-left:1px solid var(--btngroup-border);cursor:pointer;
+  transition:background-color var(--btn-dur) var(--btn-ease),color var(--btn-dur) var(--btn-ease);
+}
+.ui-btngroup-item:first-child{border-left:0}
+.ui-btngroup-item svg{width:16px;height:16px;flex:none}
+.ui-btngroup-item:hover,.ui-btngroup-item.is-hover{background:var(--btn-secondary-bg-hover);color:var(--i)}
+.ui-btngroup-item[aria-pressed="true"]{background:var(--btngroup-active-bg);color:var(--btngroup-active-fg)}
+.ui-btngroup-item:focus-visible,.ui-btngroup-item.is-focus{outline:var(--focus-width) solid var(--focus-color);outline-offset:calc(-1 * var(--focus-width));position:relative}
+.ui-btngroup-item:disabled,.ui-btngroup-item.is-disabled{opacity:var(--disabled-opacity);cursor:not-allowed}
+/* ── end ui-btngroup ── */
+
+/* ── ui-menu ── */
+/* a dropdown menu. components.js opens it from a button with aria-haspopup="menu", moves focus with the arrow
+   keys, Home and End, closes on Escape, Tab or a click outside, and returns focus to the button */
+.ui-menu-wrap{position:relative;display:inline-flex}
+.ui-menu-trigger svg:last-child{transition:transform var(--menu-dur) ease}
+.ui-menu-trigger[aria-expanded="true"] svg:last-child{transform:rotate(180deg)}
+.ui-menu{
+  position:absolute;z-index:60;top:calc(100% + 6px);left:0;display:grid;width:max-content;min-width:max(100%,var(--menu-w));max-width:min(320px,calc(100vw - 32px));
+  padding:var(--menu-pad);color:var(--i);background:var(--p);border:1px solid var(--l);border-radius:var(--menu-radius);box-shadow:var(--menu-shadow);
+  transition:opacity var(--menu-dur) ease,transform var(--menu-dur) ease;
+}
+@starting-style{.ui-menu{opacity:0;transform:translateY(-4px)}}
+.ui-menu-wrap[data-align="end"] .ui-menu{left:auto;right:0}
+.ui-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:var(--menu-item-pad);font-size:var(--ts-small-size);text-align:left;text-decoration:none;color:var(--i);background:transparent;border:0;border-radius:var(--menu-item-radius);cursor:pointer;font-weight:var(--ts-small-weight);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-menu-item svg{width:16px;height:16px;flex:none;color:var(--i3)}
+.ui-menu-item:hover,.ui-menu-item:focus,.ui-menu-item.is-hover{background:var(--menu-item-hover);outline:none}
+.ui-menu-item:focus-visible,.ui-menu-item.is-focus{outline:var(--focus-width) solid var(--focus-color);outline-offset:calc(-1 * var(--focus-width))}
+.ui-menu-item[aria-disabled="true"]{opacity:var(--disabled-opacity);cursor:not-allowed}
+.ui-menu-item--danger,.ui-menu-item--danger svg{color:var(--menu-danger-fg)}
+.ui-menu-hint{margin-left:auto;padding-left:16px;font-size:var(--ts-caption-size);color:var(--i3);font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-menu-label{padding:6px 8px 4px;font-size:var(--ts-caption-size);font-weight:600;color:var(--i3);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-menu-sep{height:1px;margin:4px calc(-1 * var(--menu-pad));background:var(--l)}
+/* ── end ui-menu ── */
+
+/* ── ui-slider ── */
+/* a native range input. The filled part of the track reads --value, which components.js (or React) sets */
+.ui-slider-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:var(--ts-small-size);font-weight:var(--ts-small-weight);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-slider-head output{color:var(--i2);font-variant-numeric:tabular-nums}
+.ui-slider{
+  --_track:linear-gradient(to right,var(--slider-fill) var(--value,50%),var(--slider-track) var(--value,50%));
+  appearance:none;display:block;width:100%;height:max(var(--slider-thumb),24px);margin:0;background:transparent;cursor:pointer;
+}
+.ui-slider::-webkit-slider-runnable-track{height:var(--slider-h);border-radius:999px;background:var(--_track)}
+.ui-slider::-moz-range-track{height:var(--slider-h);border-radius:999px;background:var(--_track)}
+.ui-slider::-webkit-slider-thumb{
+  appearance:none;width:var(--slider-thumb);height:var(--slider-thumb);margin-top:calc((var(--slider-h) - var(--slider-thumb)) / 2);
+  background:var(--slider-thumb-bg);border:var(--slider-thumb-border) solid var(--slider-fill);border-radius:50%;box-shadow:var(--slider-thumb-shadow);
+  transition:transform var(--btn-dur) ease;
+}
+.ui-slider::-moz-range-thumb{box-sizing:border-box;width:var(--slider-thumb);height:var(--slider-thumb);background:var(--slider-thumb-bg);border:var(--slider-thumb-border) solid var(--slider-fill);border-radius:50%;box-shadow:var(--slider-thumb-shadow)}
+.ui-slider:active::-webkit-slider-thumb{transform:scale(1.1)}
+.ui-slider:focus-visible{outline:none}
+.ui-slider:focus-visible::-webkit-slider-thumb{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}
+.ui-slider:focus-visible::-moz-range-thumb{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}
+.ui-slider.is-focus::-webkit-slider-thumb{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}
+.ui-slider:disabled,.ui-slider.is-disabled{opacity:var(--disabled-opacity);cursor:not-allowed}
+.ui-slider-scale{display:flex;justify-content:space-between;margin-top:4px;font-size:var(--ts-caption-size);color:var(--i3);font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+/* ── end ui-slider ── */
+
+/* ── ui-editor ── */
+/* a rich text field: a toolbar (role="toolbar", arrow keys move between tools) over an editable area.
+   components.js runs the tools with the browser's editing commands. Clean the HTML on the server before storing it. */
+.ui-editor{display:grid;min-width:0;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);box-shadow:var(--input-shadow);overflow:hidden;transition:border-color var(--input-dur) ease,box-shadow var(--input-dur) ease}
+.ui-editor:hover{border-color:var(--input-border-hover)}
+.ui-editor:focus-within{border-color:var(--focus-color);box-shadow:var(--input-shadow),0 0 0 var(--input-ring-width) var(--input-ring)}
+.ui-editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:6px;background:var(--editor-toolbar-bg);border-bottom:1px solid var(--l)}
+.ui-editor-tool{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--r-sm,6px);background:transparent;color:var(--i2);cursor:pointer;transition:background-color var(--btn-dur) ease,color var(--btn-dur) ease}
+.ui-editor-tool svg{width:16px;height:16px}
+.ui-editor-tool:hover,.ui-editor-tool.is-hover{background:var(--mid);color:var(--i)}
+.ui-editor-tool[aria-pressed="true"]{background:var(--editor-tool-on);color:var(--i)}
+.ui-editor-tool:focus-visible,.ui-editor-tool.is-focus{outline:var(--focus-width) solid var(--focus-color);outline-offset:-2px}
+.ui-editor-sep{width:1px;height:20px;margin:0 4px;background:var(--l)}
+.ui-editor-area{min-height:var(--editor-min-h);padding:12px var(--input-pad-x);font-size:var(--ts-body-size);line-height:1.6;color:var(--i);outline:none;overflow-wrap:anywhere;font-weight:var(--ts-body-weight);letter-spacing:var(--ts-body-ls);text-transform:var(--ts-body-case);font-family:var(--ts-body-font)}
+.ui-editor-area:empty::before{content:attr(data-placeholder);color:var(--i3)}
+.ui-editor-area > :first-child{margin-top:0}
+.ui-editor-area p{margin:0 0 .6em}
+.ui-editor-area ul,.ui-editor-area ol{margin:0 0 .6em;padding-left:1.4em}
+.ui-editor-area blockquote{margin:0 0 .6em;padding-left:12px;border-left:3px solid var(--l);color:var(--i2)}
+.ui-editor-foot{display:flex;justify-content:space-between;gap:12px;padding:6px var(--input-pad-x);font-size:var(--ts-caption-size);color:var(--i3);border-top:1px solid var(--l);font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+/* ── end ui-editor ── */
+
+/* ── ui-video ── */
+/* a <video> with its own controls, wired by components.js ([data-ui-video]). The controls sit on a dark scrim in
+   every theme, because they sit on the picture, not on the page */
+.ui-video{position:relative;overflow:hidden;min-width:0;background:var(--video-bg);border-radius:var(--video-radius);color:var(--video-fg)}
+.ui-video video{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover}
+.ui-video-big{position:absolute;inset:0;margin:auto;display:grid;place-items:center;width:64px;height:64px;padding:0;border:0;border-radius:50%;color:var(--video-fg);background:var(--video-scrim);cursor:pointer;transition:opacity var(--btn-dur) ease,transform var(--btn-dur) ease}
+.ui-video-big svg{width:28px;height:28px;margin-left:3px}
+.ui-video-big:hover{transform:scale(1.06)}
+.ui-video[data-playing] .ui-video-big{opacity:0;pointer-events:none}
+.ui-video-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;padding:24px 10px 8px;background:linear-gradient(transparent,var(--video-scrim));transition:opacity .25s ease}
+.ui-video[data-playing][data-idle] .ui-video-bar{opacity:0}
+.ui-video-btn{display:grid;place-items:center;flex:none;width:32px;height:32px;padding:0;border:0;border-radius:var(--r-sm,6px);background:transparent;color:inherit;cursor:pointer}
+.ui-video-btn svg{width:18px;height:18px}
+.ui-video-btn:hover{background:color-mix(in srgb,var(--video-fg) 18%,transparent)}
+.ui-video-big:focus-visible,.ui-video-btn:focus-visible{outline:2px solid var(--video-fg);outline-offset:1px}
+.ui-video-time{flex:none;font-size:var(--ts-caption-size);font-variant-numeric:tabular-nums;font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-video .ui-slider{--slider-track:color-mix(in srgb,var(--video-fg) 35%,transparent);--slider-fill:var(--video-fg);--slider-thumb-bg:var(--video-fg);--slider-thumb:14px;--slider-h:4px;flex:1;min-width:40px}
+.ui-video .ui-slider:focus-visible::-webkit-slider-thumb{outline-color:var(--video-fg)}
+.ui-video .ui-slider:focus-visible::-moz-range-thumb{outline-color:var(--video-fg)}
+/* ── end ui-video ── */
+
+/* ── ui-breadcrumb ── */
+/* nav[aria-label] > ol: each step a link, the last one the current page (aria-current, not a link) */
+.ui-breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0;padding:0;list-style:none;font-size:var(--ts-caption-size);font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-breadcrumb li{display:inline-flex;align-items:center;gap:6px;min-width:0;color:var(--i3)}
+.ui-breadcrumb li + li::before{content:"";width:6px;height:6px;border-right:1.5px solid var(--i3);border-top:1.5px solid var(--i3);transform:rotate(45deg);opacity:.8}
+.ui-breadcrumb a{color:var(--i2);text-decoration:none;border-radius:4px;transition:color var(--btn-dur) ease}
+.ui-breadcrumb a:hover,.ui-breadcrumb a.is-hover{color:var(--i);text-decoration:underline;text-underline-offset:3px}
+.ui-breadcrumb a:focus-visible,.ui-breadcrumb a.is-focus{outline:var(--focus-width) solid var(--focus-color);outline-offset:2px}
+.ui-breadcrumb [aria-current="page"]{color:var(--i);font-weight:600}
+.ui-breadcrumb svg{width:15px;height:15px;flex:none}
+/* ── end ui-breadcrumb ── */
+
+/* ── ui-cardhead ── */
+.ui-cardhead{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 16px;padding:16px 18px;border-bottom:1px solid var(--l)}
+.ui-cardhead-text{flex:1 1 200px;min-width:0}
+.ui-cardhead-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:var(--ts-h3-size);color:var(--i);font-weight:var(--ts-h3-weight);line-height:var(--ts-h3-lh);letter-spacing:var(--ts-h3-ls);text-transform:var(--ts-h3-case);font-family:var(--ts-h3-font)}
+.ui-cardhead-desc{margin:4px 0 0;font-size:var(--ts-small-size);color:var(--i2);font-weight:var(--ts-small-weight);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-cardhead-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
+/* ── end ui-cardhead ── */
+
+/* ── ui-divider ── */
+/* a rule, or a rule with a word or a button in the middle */
+.ui-divider{display:flex;align-items:center;gap:12px;margin:0;border:0;font-size:var(--ts-caption-size);font-weight:500;color:var(--i3);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-divider::before,.ui-divider::after{content:"";flex:1;height:1px;background:var(--l)}
+hr.ui-divider{display:block;height:1px;background:var(--l)}
+hr.ui-divider::before,hr.ui-divider::after{content:none}
+.ui-divider--start::before{flex:0 0 16px}
+/* ── end ui-divider ── */
+
+/* ── ui-empty ── */
+.ui-empty{display:grid;justify-items:center;gap:6px;padding:var(--empty-pad);text-align:center}
+.ui-empty-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:8px;border-radius:var(--r-md,10px);color:var(--i2);background:var(--empty-icon-bg);box-shadow:0 0 0 8px color-mix(in srgb,var(--empty-icon-bg) 45%,transparent)}
+.ui-empty-icon svg{width:22px;height:22px}
+.ui-empty-title{margin:0;font-size:var(--ts-h3-size);color:var(--i);font-weight:var(--ts-h3-weight);line-height:var(--ts-h3-lh);letter-spacing:var(--ts-h3-ls);text-transform:var(--ts-h3-case);font-family:var(--ts-h3-font)}
+.ui-empty-text{max-width:360px;margin:0;font-size:var(--ts-small-size);color:var(--i2);font-weight:var(--ts-small-weight);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-empty-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
+/* ── end ui-empty ── */
+
+/* ── ui-cta ── */
+/* an inline call to action: a short pitch and its buttons, set off from the content around it */
+.ui-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:18px 20px;color:var(--i);background:var(--cta-bg);border:1px solid var(--cta-border);border-radius:var(--r-lg,13px)}
+.ui-cta-text{flex:1 1 240px;min-width:0}
+.ui-cta-title{margin:0;font-size:var(--ts-h3-size);font-weight:var(--ts-h3-weight);line-height:var(--ts-h3-lh);letter-spacing:var(--ts-h3-ls);text-transform:var(--ts-h3-case);font-family:var(--ts-h3-font)}
+.ui-cta-body{margin:4px 0 0;font-size:var(--ts-small-size);color:var(--i2);font-weight:var(--ts-small-weight);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-cta-actions{display:flex;flex-wrap:wrap;gap:8px}
+.ui-cta--fill{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
+.ui-cta--fill .ui-cta-body{color:var(--on-fill);opacity:.85}
+/* ── end ui-cta ── */
+
+/* ── ui-pagehead ── */
+.ui-pagehead{display:grid;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--l)}
+.ui-pagehead-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px}
+.ui-pagehead-text{flex:1 1 260px;min-width:0}
+.ui-pagehead-title{margin:0;font-size:var(--pagehead-title-size);color:var(--i);font-weight:var(--ts-h2-weight);line-height:var(--ts-h2-lh);letter-spacing:var(--ts-h2-ls);text-transform:var(--ts-h2-case);font-family:var(--ts-h2-font)}
+.ui-pagehead-desc{margin:6px 0 0;font-size:var(--ts-body-size);color:var(--i2);font-weight:var(--ts-body-weight);line-height:var(--ts-body-lh);letter-spacing:var(--ts-body-ls);text-transform:var(--ts-body-case);font-family:var(--ts-body-font)}
+.ui-pagehead-actions{display:flex;flex-wrap:wrap;gap:8px}
+/* ── end ui-pagehead ── */
+
+/* ── ui-pagination ── */
+/* numbered pages with Previous and Next; in a narrow container the numbers give way to "Page 2 of 10" */
+.ui-pagination{display:flex;align-items:center;gap:8px;container-type:inline-size;min-width:0}
+.ui-pagination-pages{display:flex;flex:1;justify-content:center;gap:2px;margin:0;padding:0;list-style:none}
+.ui-page{display:grid;place-items:center;min-width:36px;height:36px;padding:0 8px;font-size:var(--ts-small-size);font-weight:600;color:var(--i2);background:transparent;border:0;border-radius:var(--r-sm,8px);cursor:pointer;text-decoration:none;line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-page:hover,.ui-page.is-hover{background:var(--mid);color:var(--i)}
+.ui-page[aria-current="page"]{background:var(--pagination-current-bg);color:var(--i)}
+.ui-page:focus-visible,.ui-page.is-focus{outline:var(--focus-width) solid var(--focus-color);outline-offset:-2px}
+.ui-page-gap{display:grid;place-items:center;min-width:28px;color:var(--i3)}
+.ui-pagination-info{display:none;flex:1;text-align:center;font-size:var(--ts-small-size);color:var(--i2);font-weight:var(--ts-small-weight);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+@container (max-width:460px){.ui-pagination-pages{display:none}.ui-pagination-info{display:block}}
+/* ── end ui-pagination ── */
+
+/* ── ui-steps ── */
+/* ol.ui-steps > li.ui-step[data-state=complete|current|upcoming]; the current step also carries aria-current="step" */
+.ui-steps{display:flex;gap:0;margin:0;padding:0;list-style:none;counter-reset:ui-step}
+.ui-step{position:relative;flex:1;display:grid;justify-items:center;gap:4px;min-width:0;padding:0 6px;text-align:center;counter-increment:ui-step}
+.ui-step::before{content:"";position:absolute;top:calc(var(--steps-marker) / 2);left:calc(-50% + var(--steps-marker) / 2 + 6px);right:calc(50% + var(--steps-marker) / 2 + 6px);height:2px;background:var(--l);border-radius:2px}
+.ui-step:first-child::before{content:none}
+.ui-step[data-state="complete"]::before,.ui-step[data-state="current"]::before{background:var(--steps-current)}
+.ui-step-marker{display:grid;place-items:center;width:var(--steps-marker);height:var(--steps-marker);border-radius:50%;font-size:var(--ts-caption-size);font-weight:700;color:var(--i3);background:var(--p);border:2px solid var(--l);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-step-marker::before{content:counter(ui-step)}
+.ui-step[data-state="current"] .ui-step-marker{color:var(--i);border-color:var(--steps-current);box-shadow:0 0 0 4px color-mix(in srgb,var(--steps-current) 22%,transparent)}
+.ui-step[data-state="complete"] .ui-step-marker{color:var(--steps-done-fg);background:var(--steps-done-bg);border-color:var(--steps-done-bg)}
+.ui-step[data-state="complete"] .ui-step-marker::before{content:"";width:9px;height:5px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-1px) rotate(-45deg)}
+.ui-step-label{font-size:var(--ts-small-size);font-weight:600;color:var(--i);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-step[data-state="upcoming"] .ui-step-label{color:var(--i2)}
+.ui-step-desc{font-size:var(--ts-caption-size);color:var(--i3);font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-steps--vertical{flex-direction:column;gap:18px}
+.ui-steps--vertical .ui-step{grid-template-columns:auto 1fr;justify-items:start;text-align:left;column-gap:12px;padding:0}
+.ui-steps--vertical .ui-step-marker{grid-row:span 2}
+.ui-steps--vertical .ui-step::before{top:auto;bottom:calc(100% + 2px);left:calc(var(--steps-marker) / 2 - 1px);right:auto;width:2px;height:16px}
+/* ── end ui-steps ── */
+
+/* ── ui-sectionhead ── */
+.ui-sectionhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 18px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--l)}
+.ui-sectionhead-text{flex:1 1 220px;min-width:0}
+.ui-sectionhead-title{margin:0;font-size:var(--ts-h3-size);color:var(--i);font-weight:var(--ts-h3-weight);line-height:var(--ts-h3-lh);letter-spacing:var(--ts-h3-ls);text-transform:var(--ts-h3-case);font-family:var(--ts-h3-font)}
+.ui-sectionhead-desc{margin:4px 0 0;font-size:var(--ts-small-size);color:var(--i2);font-weight:var(--ts-small-weight);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-sectionhead-actions{display:flex;flex-wrap:wrap;gap:8px}
+/* ── end ui-sectionhead ── */
+
+/* ── ui-sectionfoot ── */
+.ui-sectionfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding-top:16px;margin-top:20px;border-top:1px solid var(--l)}
+.ui-sectionfoot-note{margin:0;font-size:var(--ts-caption-size);color:var(--i3);font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-sectionfoot-actions{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
+/* ── end ui-sectionfoot ── */
+
+/* ── ui-calendar ── */
+/* a month as a grid (role="grid"): arrow keys move a day, Page Up/Down a month, Home/End the week; components.js */
+.ui-calendar{display:grid;gap:8px;width:max-content;max-width:100%;padding:12px;background:var(--p);border:1px solid var(--l);border-radius:var(--r-lg,13px)}
+.ui-calendar-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
+.ui-calendar-title{margin:0;font-size:var(--ts-body-size);font-weight:700;color:var(--i);line-height:var(--ts-body-lh);letter-spacing:var(--ts-body-ls);text-transform:var(--ts-body-case);font-family:var(--ts-body-font)}
+.ui-calendar table{border-collapse:collapse}
+.ui-calendar th{width:var(--cal-cell);height:28px;font-size:var(--ts-caption-size);font-weight:600;color:var(--i3);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-calendar td{padding:1px;text-align:center}
+.ui-day{position:relative;display:grid;place-items:center;width:var(--cal-cell);height:var(--cal-cell);padding:0;font-size:var(--ts-small-size);color:var(--i);background:transparent;border:0;border-radius:var(--cal-radius);cursor:pointer;font-variant-numeric:tabular-nums;font-weight:var(--ts-small-weight);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-day:hover,.ui-day.is-hover{background:var(--mid)}
+.ui-day[data-outside]{color:var(--i3)}
+.ui-day[aria-current="date"]{box-shadow:inset 0 0 0 2px var(--cal-today)}
+.ui-day[aria-selected="true"]{color:var(--cal-selected-fg);background:var(--cal-selected-bg)}
+.ui-day[data-event]::after{content:"";position:absolute;bottom:4px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
+.ui-day:focus-visible,.ui-day.is-focus{outline:var(--focus-width) solid var(--focus-color);outline-offset:1px;z-index:1}
+.ui-day:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}
+/* ── end ui-calendar ── */
+
+/* ── ui-datepicker ── */
+/* a button that shows the chosen date and opens a calendar under it; Escape or a choice closes it */
+.ui-datepicker{position:relative;display:inline-block;min-width:0}
+.ui-datepicker-btn{display:flex;align-items:center;gap:8px;width:100%;min-width:200px;text-align:left;cursor:pointer}
+.ui-datepicker-btn svg{width:16px;height:16px;flex:none;color:var(--i3)}
+.ui-datepicker-btn[data-empty]{color:var(--i3)}
+.ui-datepicker-pop{position:absolute;z-index:60;top:calc(100% + 6px);left:0;box-shadow:var(--menu-shadow)}
+.ui-datepicker[data-align="end"] .ui-datepicker-pop{left:auto;right:0}
+.ui-datepicker-pop .ui-calendar{box-shadow:none}
+/* ── end ui-datepicker ── */
+
+/* ── ui-code ── */
+.ui-code{margin:0;min-width:0;overflow:hidden;background:var(--code-bg);border:1px solid var(--l);border-radius:var(--r-md,10px)}
+.ui-code-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px 6px 14px;border-bottom:1px solid var(--l)}
+.ui-code-lang{color:var(--i2);font-size:var(--ts-eyebrow-size);font-weight:var(--ts-eyebrow-weight);line-height:var(--ts-eyebrow-lh);letter-spacing:var(--ts-eyebrow-ls);text-transform:var(--ts-eyebrow-case);font-family:var(--ts-eyebrow-font)}
+.ui-code pre{margin:0;padding:14px;overflow-x:auto;font:.84rem/1.6 ui-monospace,"DM Mono",SFMono-Regular,Menlo,Consolas,monospace;color:var(--code-fg);tab-size:2}
+.ui-code .ui-code-muted{color:var(--i2)}
+/* ── end ui-code ── */
+
+/* ── ui-colorpick ── */
+.ui-colorpick{display:grid;gap:10px;min-width:0}
+.ui-swatches{display:flex;flex-wrap:wrap;gap:8px}
+.ui-swatch{width:28px;height:28px;padding:0;border:2px solid var(--p);border-radius:50%;box-shadow:0 0 0 1px var(--input-border);cursor:pointer}
+.ui-swatch[aria-checked="true"]{box-shadow:0 0 0 2px var(--i)}
+.ui-swatch:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:3px}
+.ui-colorpick-row{display:flex;align-items:center;gap:8px}
+.ui-colorpick-row input[type="color"]{flex:none;width:40px;height:var(--input-h);padding:3px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);cursor:pointer}
+.ui-colorpick-row .ui-input{flex:1;min-width:0;font-family:ui-monospace,"DM Mono",SFMono-Regular,Menlo,monospace;text-transform:uppercase}
+/* ── end ui-colorpick ── */
+
+/* ── ui-command ── */
+/* a command menu in a dialog: type to filter, arrows to move, Enter to run (a combobox over a listbox) */
+.ui-command{width:min(var(--command-w),calc(100vw - 32px))}
+.ui-command-search{display:flex;align-items:center;gap:10px;padding:4px 14px;border-bottom:1px solid var(--l)}
+.ui-command-search svg{width:18px;height:18px;flex:none;color:var(--i3)}
+.ui-command-search input{flex:1;min-width:0;height:48px;font-size:var(--ts-body-size);color:var(--i);background:transparent;border:0;outline:none;font-weight:var(--ts-body-weight);line-height:var(--ts-body-lh);letter-spacing:var(--ts-body-ls);text-transform:var(--ts-body-case);font-family:var(--ts-body-font)}
+.ui-command-search input::placeholder{color:var(--i3)}
+.ui-command-list{max-height:min(360px,60dvh);overflow-y:auto;padding:6px}
+.ui-command-group{padding:8px 8px 4px;font-size:var(--ts-caption-size);font-weight:600;color:var(--i3);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-command-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--menu-item-radius);font-size:var(--ts-small-size);color:var(--i);cursor:pointer;font-weight:var(--ts-small-weight);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-command-item svg{width:16px;height:16px;flex:none;color:var(--i3)}
+.ui-command-item[aria-selected="true"]{background:var(--menu-item-hover)}
+.ui-command-item kbd{margin-left:auto;font-size:var(--ts-caption-size);color:var(--i3);font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-command-empty{padding:24px;text-align:center;font-size:var(--ts-small-size);color:var(--i3);font-weight:var(--ts-small-weight);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-command-foot{display:flex;gap:14px;padding:8px 14px;font-size:var(--ts-caption-size);color:var(--i3);border-top:1px solid var(--l);font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;font:600 .72rem/1 inherit;color:var(--i2);background:var(--mid);border:1px solid var(--l);border-radius:5px}
+/* ── end ui-command ── */
+
+/* ── ui-dropzone ── */
+/* a label around a file input: click or drop; the chosen files list under it (components.js reads them, never uploads) */
+.ui-dropzone{position:relative;display:grid;justify-items:center;gap:6px;padding:24px 16px;text-align:center;color:var(--i2);background:var(--input-bg);border:1.5px dashed var(--dropzone-border);border-radius:var(--r-lg,13px);cursor:pointer;transition:border-color var(--input-dur) ease,background-color var(--input-dur) ease}
+.ui-dropzone input{position:absolute;width:1px;height:1px;opacity:0}
+.ui-dropzone:hover,.ui-dropzone.is-drag,.ui-dropzone.is-hover{border-color:var(--dropzone-active);background:color-mix(in srgb,var(--dropzone-active) 6%,var(--input-bg))}
+.ui-dropzone:focus-within,.ui-dropzone.is-focus{outline:var(--focus-width) solid var(--focus-color);outline-offset:2px}
+.ui-dropzone-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-md,10px);background:var(--mid);color:var(--i2)}
+.ui-dropzone-icon svg{width:20px;height:20px}
+.ui-dropzone strong{color:var(--i)}
+.ui-dropzone small{font-size:var(--ts-caption-size);color:var(--i3);font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-files{display:grid;gap:8px;margin:10px 0 0;padding:0;list-style:none}
+.ui-file{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 12px;padding:10px 12px;border:1px solid var(--l);border-radius:var(--r-md,10px);background:var(--p)}
+.ui-file > svg{grid-row:span 2;width:20px;height:20px;color:var(--i3)}
+.ui-file-name{min-width:0;overflow:hidden;font-size:var(--ts-small-size);font-weight:600;color:var(--i);white-space:nowrap;text-overflow:ellipsis;line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-file-size{grid-column:2;font-size:var(--ts-caption-size);color:var(--i3);font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-file .ui-tag-remove{grid-row:1 / span 2;grid-column:3}
+/* ── end ui-dropzone ── */
+
+/* ── ui-filters ── */
+/* a filter bar: search, chips that toggle (aria-pressed), and the active filters as removable tags */
+.ui-filters{display:grid;gap:10px;min-width:0}
+.ui-filters-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
+.ui-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;font-size:var(--ts-caption-size);font-weight:600;color:var(--i2);background:var(--p);border:1px solid var(--input-border);border-radius:999px;cursor:pointer;transition:background-color var(--btn-dur) ease,color var(--btn-dur) ease;line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-chip:hover,.ui-chip.is-hover{color:var(--i);background:var(--mid)}
+.ui-chip[aria-pressed="true"]{color:var(--chip-on-fg);background:var(--chip-on-bg);border-color:var(--chip-on-bg)}
+.ui-chip:focus-visible,.ui-chip.is-focus{outline:var(--focus-width) solid var(--focus-color);outline-offset:2px}
+.ui-chip svg{width:14px;height:14px}
+/* ── end ui-filters ── */
+
+/* ── ui-chat ── */
+/* messages (role="log", read out as they arrive) and a composer; Enter sends, Shift+Enter adds a line */
+.ui-chat{display:grid;grid-template-rows:1fr auto;min-width:0;max-height:var(--chat-h);background:var(--p);border:1px solid var(--l);border-radius:var(--r-lg,13px);overflow:hidden}
+.ui-chat-log{display:grid;align-content:start;gap:12px;padding:16px;overflow-y:auto}
+.ui-msg{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;max-width:80%}
+.ui-msg > .ui-avatar{grid-row:span 2;align-self:end}
+.ui-msg-bubble{padding:9px 13px;font-size:var(--ts-small-size);line-height:1.45;color:var(--chat-in-fg);background:var(--chat-in-bg);border-radius:var(--chat-radius) var(--chat-radius) var(--chat-radius) 4px;overflow-wrap:anywhere;font-weight:var(--ts-small-weight);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-msg-meta{font-size:var(--ts-caption-size);color:var(--i3);font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-msg--out{justify-self:end;grid-template-columns:minmax(0,1fr)}
+.ui-msg--out .ui-msg-bubble{color:var(--chat-out-fg);background:var(--chat-out-bg);border-radius:var(--chat-radius) var(--chat-radius) 4px var(--chat-radius)}
+.ui-msg--out .ui-msg-meta{justify-self:end}
+.ui-chat-compose{display:flex;align-items:flex-end;gap:8px;padding:10px;border-top:1px solid var(--l)}
+.ui-chat-compose textarea.ui-input{min-height:40px;height:40px;max-height:120px;padding-top:9px;resize:none}
+/* ── end ui-chat ── */
+
+/* ── ui-sheet ── */
+/* a slide-out panel: a <dialog> on the right edge, opened like a dialog ([data-ui-open]), Escape and the backdrop close it */
+.ui-sheet{position:fixed;inset:0 0 0 auto;width:min(var(--sheet-w),100vw);max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;display:flex;flex-direction:column;color:var(--i);background:var(--p);border:0;border-left:1px solid var(--l);box-shadow:var(--dialog-shadow);
+  transform:translateX(100%);transition:transform var(--dialog-dur) var(--dialog-ease),overlay var(--dialog-dur) allow-discrete,display var(--dialog-dur) allow-discrete}
+.ui-sheet:not([open]){display:none}
+.ui-sheet[open]{transform:none}
+@starting-style{.ui-sheet[open]{transform:translateX(100%)}}
+.ui-sheet::backdrop{background:var(--dialog-backdrop);opacity:0;transition:opacity var(--dialog-dur) ease,overlay var(--dialog-dur) allow-discrete,display var(--dialog-dur) allow-discrete}
+.ui-sheet[open]::backdrop{opacity:1}
+@starting-style{.ui-sheet[open]::backdrop{opacity:0}}
+.ui-sheet-head{display:flex;align-items:flex-start;gap:12px;padding:18px 20px;border-bottom:1px solid var(--l)}
+.ui-sheet-title{flex:1;margin:0;font-size:var(--ts-h3-size);font-weight:var(--ts-h3-weight);line-height:var(--ts-h3-lh);letter-spacing:var(--ts-h3-ls);text-transform:var(--ts-h3-case);font-family:var(--ts-h3-font)}
+.ui-sheet-body{flex:1;overflow-y:auto;padding:18px 20px;color:var(--i2)}
+.ui-sheet-foot{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding:14px 20px;border-top:1px solid var(--l)}
+/* ── end ui-sheet ── */
+
+/* ── ui-tree ── */
+/* a tree (role="tree"): Up and Down move, Right opens or steps in, Left closes or steps out, Enter selects */
+.ui-tree,.ui-tree ul{margin:0;padding:0;list-style:none}
+.ui-tree ul{padding-left:18px}
+.ui-tree [role="treeitem"]{outline:none}
+.ui-tree-row{display:flex;align-items:center;gap:6px;min-height:32px;padding:0 8px;border-radius:var(--r-sm,8px);font-size:var(--ts-small-size);color:var(--i);cursor:pointer;font-weight:var(--ts-small-weight);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-tree-row:hover{background:var(--mid)}
+.ui-tree-row svg{width:16px;height:16px;flex:none;color:var(--i3)}
+.ui-tree-caret{display:grid;place-items:center;width:16px;height:16px;flex:none;color:var(--i3);transition:transform .15s}
+.ui-tree-caret::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}
+[aria-expanded="true"] > .ui-tree-row .ui-tree-caret{transform:rotate(90deg)}
+.ui-tree-leaf{width:16px;flex:none}
+[aria-expanded="false"] > ul{display:none}
+[aria-selected="true"] > .ui-tree-row{color:var(--i);background:var(--tree-selected-bg);font-weight:600}
+[role="treeitem"]:focus-visible > .ui-tree-row{outline:var(--focus-width) solid var(--focus-color);outline-offset:-2px}
+/* ── end ui-tree ── */
+
+/* ── ui-section ── */
+/* Marketing sections share this: a band with its own width, a heading block (eyebrow, title, lead), and layouts that
+   follow the band's own width (container queries), so a section works in a narrow card and a full page alike */
+.ui-section{container-type:inline-size;padding:var(--section-pad-y) 20px;color:var(--i)}
+.ui-section-inner{max-width:var(--section-max);margin:0 auto;display:grid;gap:32px}
+.ui-section-head{display:grid;gap:10px;max-width:720px}
+.ui-section-head--center{justify-items:center;margin:0 auto;text-align:center}
+.ui-eyebrow{color:var(--eyebrow-fg);font-size:var(--ts-eyebrow-size);font-weight:var(--ts-eyebrow-weight);line-height:var(--ts-eyebrow-lh);letter-spacing:var(--ts-eyebrow-ls);text-transform:var(--ts-eyebrow-case);font-family:var(--ts-eyebrow-font)}
+.ui-section-title{margin:0;font-size:var(--section-title-size);font-weight:var(--ts-h1-weight);line-height:var(--ts-h1-lh);letter-spacing:var(--ts-h1-ls);text-transform:var(--ts-h1-case);font-family:var(--ts-h1-font)}
+.ui-section-lead{margin:0;font-size:var(--ts-lead-size);color:var(--i2);font-weight:var(--ts-lead-weight);line-height:var(--ts-lead-lh);letter-spacing:var(--ts-lead-ls);text-transform:var(--ts-lead-case);font-family:var(--ts-lead-font)}
+.ui-section--alt{background:var(--p)}
+.ui-cols{display:grid;gap:20px}
+@container (min-width:640px){.ui-cols--2,.ui-cols--3,.ui-cols--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
+@container (min-width:900px){.ui-cols--3{grid-template-columns:repeat(3,minmax(0,1fr))}.ui-cols--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
+.ui-mk-card{display:grid;align-content:start;gap:10px;min-width:0;padding:22px;background:var(--mk-card-bg);border:1px solid var(--l);border-radius:var(--r-lg,13px)}
+.ui-mk-card h3{margin:0;font-size:var(--ts-h3-size);font-weight:var(--ts-h3-weight);line-height:var(--ts-h3-lh);letter-spacing:var(--ts-h3-ls);text-transform:var(--ts-h3-case);font-family:var(--ts-h3-font)}
+.ui-mk-card p{margin:0;color:var(--i2);line-height:1.55}
+.ui-feature-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md,10px);color:var(--on-fill);background:var(--fill)}
+.ui-feature-icon svg{width:22px;height:22px}
+/* an image's place, drawn from the theme until a real picture goes in */
+.ui-media{display:grid;place-items:center;min-height:120px;aspect-ratio:16/10;border-radius:var(--r-lg,13px);color:var(--i3);font-size:var(--ts-caption-size);background:linear-gradient(135deg,color-mix(in srgb,var(--pos) 22%,var(--mid)),var(--mid) 55%,color-mix(in srgb,var(--fill) 35%,var(--mid)));font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-media--square{aspect-ratio:1}
+/* ── end ui-section ── */
+
+/* ── ui-sitenav ── */
+/* a site header: brand, links, actions; under 760px of its own width the links fold into a menu button */
+.ui-sitenav{container-type:inline-size;position:relative;background:var(--sitenav-bg);border-bottom:1px solid var(--l)}
+.ui-sitenav-bar{display:flex;align-items:center;gap:20px;max-width:var(--section-max);height:64px;margin:0 auto;padding:0 20px}
+.ui-sitenav-brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.01em;color:var(--i);text-decoration:none}
+.ui-sitenav-links{display:flex;gap:2px;margin:0;padding:0;list-style:none}
+.ui-sitenav-links a{display:block;padding:8px 12px;border-radius:var(--r-sm,8px);font-size:var(--ts-small-size);font-weight:600;color:var(--i2);text-decoration:none;line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-sitenav-links a:hover,.ui-sitenav-links a[aria-current="page"]{color:var(--i);background:var(--mid)}
+.ui-sitenav-links a:focus-visible,.ui-sitenav-toggle:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:2px}
+.ui-sitenav-actions{display:flex;gap:8px;margin-left:auto}
+.ui-sitenav-toggle{display:none}
+.ui-sitenav-panel{display:grid;gap:4px;padding:8px 16px 16px;border-top:1px solid var(--l)}
+.ui-sitenav-panel[hidden]{display:none}
+.ui-sitenav-panel a{padding:12px 8px;border-radius:var(--r-sm,8px);font-weight:600;color:var(--i);text-decoration:none}
+.ui-sitenav-panel a:hover{background:var(--mid)}
+@container (max-width:760px){.ui-sitenav-links,.ui-sitenav-actions{display:none}.ui-sitenav-toggle{display:inline-flex;margin-left:auto}}
+@container (min-width:761px){.ui-sitenav-panel{display:none!important}}
+/* ── end ui-sitenav ── */
+
+/* ── ui-hero ── */
+.ui-hero{display:grid;gap:28px;align-items:center}
+.ui-hero-text{display:grid;gap:16px;justify-items:start}
+.ui-hero-title{margin:0;font-size:var(--hero-title-size);font-weight:var(--ts-display-weight);line-height:var(--ts-display-lh);letter-spacing:var(--ts-display-ls);text-transform:var(--ts-display-case);font-family:var(--ts-display-font)}
+.ui-hero-lead{margin:0;max-width:560px;font-size:calc(var(--ts-lead-size) * 1.1);color:var(--i2);font-weight:var(--ts-lead-weight);line-height:var(--ts-lead-lh);letter-spacing:var(--ts-lead-ls);text-transform:var(--ts-lead-case);font-family:var(--ts-lead-font)}
+.ui-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
+.ui-hero--center{justify-items:center;text-align:center}
+.ui-hero--center .ui-hero-text{justify-items:center}
+@container (min-width:900px){.ui-hero--split{grid-template-columns:1.1fr 1fr}}
+@container (max-width:480px){.ui-hero-title{font-size:calc(var(--hero-title-size) * .72)}}
+/* ── end ui-hero ── */
+
+/* ── ui-stats ── */
+.ui-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
+@container (min-width:760px){.ui-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
+.ui-stat{display:grid;gap:4px;padding-left:16px;border-left:3px solid var(--stat-rule)}
+.ui-stat-value{font-size:var(--section-title-size);font-weight:800;letter-spacing:-.02em;color:var(--i);font-variant-numeric:proportional-nums}
+.ui-stat-label{font-weight:600;color:var(--i)}
+.ui-stat-note{font-size:var(--ts-small-size);color:var(--i2);font-weight:var(--ts-small-weight);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+/* ── end ui-stats ── */
+
+/* ── ui-logocloud ── */
+.ui-logocloud{display:grid;gap:18px;justify-items:center;text-align:center}
+.ui-logocloud p{margin:0;font-size:var(--ts-small-size);font-weight:600;color:var(--i2);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-logocloud ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 34px;margin:0;padding:0;list-style:none;color:var(--i2)}
+.ui-logocloud li{display:flex;align-items:center;gap:8px;font-weight:700;font-size:var(--ts-lead-size)}
+/* ── end ui-logocloud ── */
+
+/* ── ui-quote ── */
+.ui-quote{display:grid;gap:18px;margin:0;padding:24px;background:var(--mk-card-bg);border:1px solid var(--l);border-radius:var(--r-lg,13px)}
+.ui-quote blockquote{position:relative;margin:0;padding-top:28px;font-size:calc(var(--ts-lead-size) * 1.05);line-height:1.55;color:var(--i)}
+.ui-quote blockquote::before{content:"\201C";position:absolute;top:-14px;left:-2px;font:800 3.6rem/1 Georgia,serif;color:var(--quote-mark)}
+.ui-quote figcaption{display:flex;align-items:center;gap:12px}
+.ui-quote figcaption span{display:grid;font-size:var(--ts-small-size);color:var(--i2)}
+.ui-quote figcaption strong{color:var(--i)}
+.ui-quote--large blockquote{font-size:var(--ts-h2-size);font-weight:600;letter-spacing:-.01em}
+/* ── end ui-quote ── */
+
+/* ── ui-person ── */
+.ui-person{display:grid;gap:10px;min-width:0;text-align:left}
+.ui-person h3{margin:4px 0 0;font-size:var(--ts-h3-size);font-weight:var(--ts-h3-weight);line-height:var(--ts-h3-lh);letter-spacing:var(--ts-h3-ls);text-transform:var(--ts-h3-case);font-family:var(--ts-h3-font)}
+.ui-person p{margin:0;font-size:var(--ts-small-size);color:var(--i2);font-weight:var(--ts-small-weight);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-person .ui-person-role{color:var(--eyebrow-fg);font-weight:600}
+/* ── end ui-person ── */
+
+/* ── ui-post ── */
+.ui-post{display:grid;gap:12px;min-width:0;color:inherit;text-decoration:none}
+.ui-post-meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:var(--ts-caption-size);color:var(--i2);font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-post h3{margin:0;font-size:var(--ts-h3-size);font-weight:var(--ts-h3-weight);line-height:var(--ts-h3-lh);letter-spacing:var(--ts-h3-ls);text-transform:var(--ts-h3-case);font-family:var(--ts-h3-font)}
+.ui-post p{margin:0;color:var(--i2);line-height:1.55}
+.ui-post:hover h3{text-decoration:underline;text-underline-offset:3px}
+.ui-post:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:4px;border-radius:var(--r-lg,13px)}
+/* ── end ui-post ── */
+
+/* ── ui-jobs ── */
+.ui-jobs{display:grid;margin:0;padding:0;list-style:none;border-top:1px solid var(--l)}
+.ui-job{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:18px 0;border-bottom:1px solid var(--l)}
+.ui-job-title{flex:1 1 240px;min-width:0;display:grid;gap:4px}
+.ui-job-title a{font-weight:700;color:var(--i);text-decoration:none}
+.ui-job-title a:hover{text-decoration:underline;text-underline-offset:3px}
+.ui-job-title a:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:2px}
+.ui-job-title span{font-size:var(--ts-small-size);color:var(--i2);font-weight:var(--ts-small-weight);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-job-tags{display:flex;flex-wrap:wrap;gap:6px}
+/* ── end ui-jobs ── */
+
+/* ── ui-faq ── */
+/* native <details>: no script, the keyboard and screen readers already know it */
+.ui-faq{display:grid;border-top:1px solid var(--l)}
+.ui-faq details{border-bottom:1px solid var(--l)}
+.ui-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 2px;font-weight:700;color:var(--i);cursor:pointer;list-style:none}
+.ui-faq summary::-webkit-details-marker{display:none}
+.ui-faq summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--i2);border-bottom:2px solid var(--i2);transform:rotate(45deg);transition:transform var(--btn-dur) ease}
+.ui-faq details[open] summary::after{transform:rotate(-135deg)}
+.ui-faq summary:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:2px;border-radius:4px}
+.ui-faq details > div{padding:0 2px 18px;color:var(--i2);line-height:1.6}
+/* ── end ui-faq ── */
+
+/* ── ui-pricing ── */
+.ui-plans{display:grid;gap:18px;align-items:stretch}
+@container (min-width:760px){.ui-plans{grid-template-columns:repeat(3,minmax(0,1fr))}}
+.ui-plan{display:grid;grid-template-rows:auto auto auto 1fr auto;gap:14px;min-width:0;padding:24px;background:var(--mk-card-bg);border:1px solid var(--l);border-radius:var(--r-lg,13px)}
+.ui-plan--featured{border:2px solid var(--plan-featured);box-shadow:var(--shadow-lg)}
+.ui-plan h3{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:var(--ts-h3-size);font-weight:var(--ts-h3-weight);line-height:var(--ts-h3-lh);letter-spacing:var(--ts-h3-ls);text-transform:var(--ts-h3-case);font-family:var(--ts-h3-font)}
+.ui-plan-price{display:flex;align-items:baseline;gap:6px}
+.ui-plan-price strong{font-size:2.4rem;font-weight:800;letter-spacing:-.03em;color:var(--i)}
+.ui-plan-price span{color:var(--i2)}
+.ui-plan > p{margin:0;color:var(--i2)}
+.ui-plan ul{display:grid;align-content:start;gap:10px;margin:0;padding:0;list-style:none;color:var(--i)}
+.ui-plan li{display:flex;gap:10px;align-items:flex-start}
+.ui-plan li::before{content:"";flex:none;width:12px;height:7px;margin-top:6px;border-left:2px solid var(--plan-check);border-bottom:2px solid var(--plan-check);transform:rotate(-45deg)}
+.ui-plan .ui-btn{width:100%}
+/* ── end ui-pricing ── */
+
+/* ── ui-cta-band ── */
+.ui-cta-band{display:grid;gap:18px;padding:40px 28px;text-align:center;justify-items:center;color:var(--ctaband-fg);background:var(--ctaband-bg);border-radius:var(--r-lg,13px)}
+.ui-cta-band h2{margin:0;font-size:var(--section-title-size);font-weight:800;letter-spacing:-.02em;line-height:1.15}
+.ui-cta-band p{margin:0;max-width:560px;font-size:var(--ts-lead-size);opacity:.85;font-weight:var(--ts-lead-weight);line-height:var(--ts-lead-lh);letter-spacing:var(--ts-lead-ls);text-transform:var(--ts-lead-case);font-family:var(--ts-lead-font)}
+.ui-cta-band .ui-btn{--btn-secondary-bg:transparent;--btn-secondary-fg:var(--ctaband-fg);--btn-secondary-border:color-mix(in srgb,var(--ctaband-fg) 50%,transparent);--btn-secondary-bg-hover:color-mix(in srgb,var(--ctaband-fg) 12%,transparent)}
+.ui-cta-band .ui-btn--primary{--btn-primary-bg:var(--ctaband-fg);--btn-primary-fg:var(--ctaband-bg);--btn-primary-border:var(--ctaband-fg);--btn-primary-bg-hover:color-mix(in srgb,var(--ctaband-fg) 88%,var(--ctaband-bg))}
+.ui-cta-band .ui-hero-actions{justify-content:center}
+/* ── end ui-cta-band ── */
+
+/* ── ui-newsletter ── */
+.ui-newsletter{display:grid;gap:18px;align-items:center}
+@container (min-width:760px){.ui-newsletter{grid-template-columns:1fr minmax(0,420px)}}
+.ui-newsletter form{display:grid;gap:8px}
+.ui-newsletter-row{display:flex;flex-wrap:wrap;gap:8px}
+.ui-newsletter-row .ui-input{flex:1 1 200px;width:auto}
+.ui-newsletter small{font-size:var(--ts-caption-size);color:var(--i2);font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+/* ── end ui-newsletter ── */
+
+/* ── ui-contact ── */
+.ui-contact{display:grid;gap:28px}
+@container (min-width:860px){.ui-contact{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}
+.ui-contact-ways{display:grid;gap:20px;margin:0;padding:0;list-style:none}
+.ui-contact-ways li{display:grid;grid-template-columns:auto 1fr;gap:2px 14px}
+.ui-contact-ways .ui-feature-icon{grid-row:span 2;width:40px;height:40px}
+.ui-contact-ways strong{color:var(--i)}
+.ui-contact-ways span,.ui-contact-ways a{color:var(--i2)}
+.ui-contact form{display:grid;gap:14px}
+.ui-contact-2{display:grid;gap:14px}
+@container (min-width:520px){.ui-contact-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
+/* ── end ui-contact ── */
+
+/* ── ui-prose ── */
+/* long-form text: a readable measure and rhythm for the elements an article uses */
+.ui-prose{max-width:68ch;color:var(--i2);font-size:var(--ts-lead-size);line-height:1.75;font-weight:var(--ts-lead-weight);letter-spacing:var(--ts-lead-ls);text-transform:var(--ts-lead-case);font-family:var(--ts-lead-font)}
+.ui-prose > * + *{margin-top:1.1em}
+.ui-prose h2,.ui-prose h3{margin-top:1.8em;color:var(--i);line-height:1.25;letter-spacing:-.01em}
+.ui-prose h2{font-size:var(--ts-h2-size);font-weight:var(--ts-h2-weight);line-height:var(--ts-h2-lh);letter-spacing:var(--ts-h2-ls);text-transform:var(--ts-h2-case);font-family:var(--ts-h2-font)}.ui-prose h3{font-size:var(--ts-h3-size);font-weight:var(--ts-h3-weight);line-height:var(--ts-h3-lh);letter-spacing:var(--ts-h3-ls);text-transform:var(--ts-h3-case);font-family:var(--ts-h3-font)}
+.ui-prose p,.ui-prose ul,.ui-prose ol,.ui-prose blockquote,.ui-prose figure{margin-bottom:0}
+.ui-prose a{color:var(--i);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--pos)}
+.ui-prose strong{color:var(--i)}
+.ui-prose ul,.ui-prose ol{padding-left:1.3em}
+.ui-prose li + li{margin-top:.4em}
+.ui-prose blockquote{margin-left:0;padding-left:18px;border-left:3px solid var(--quote-mark);font-style:italic;color:var(--i)}
+.ui-prose figure{margin-left:0;margin-right:0}
+.ui-prose figcaption{margin-top:8px;font-size:var(--ts-caption-size);color:var(--i2);font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+/* ── end ui-prose ── */
+
+/* ── ui-footer ── */
+.ui-footer{container-type:inline-size;padding:48px 20px 28px;color:var(--footer-fg);background:var(--footer-bg)}
+.ui-footer-inner{display:grid;gap:32px;max-width:var(--section-max);margin:0 auto}
+.ui-footer-top{display:grid;gap:28px}
+@container (min-width:760px){.ui-footer-top{grid-template-columns:1.3fr repeat(3,minmax(0,1fr))}}
+.ui-footer-brand{display:grid;gap:10px;align-content:start}
+.ui-footer-brand strong{font-size:var(--ts-h3-size)}
+.ui-footer-brand p,.ui-footer small{margin:0;color:var(--footer-muted)}
+.ui-footer h2{margin:0 0 10px;color:var(--footer-muted);font-size:var(--ts-eyebrow-size);font-weight:var(--ts-eyebrow-weight);line-height:var(--ts-eyebrow-lh);letter-spacing:var(--ts-eyebrow-ls);text-transform:var(--ts-eyebrow-case);font-family:var(--ts-eyebrow-font)}
+.ui-footer ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
+.ui-footer a{color:var(--footer-fg);text-decoration:none}
+.ui-footer a:hover{text-decoration:underline;text-underline-offset:3px}
+.ui-footer a:focus-visible{outline:2px solid var(--footer-fg);outline-offset:2px;border-radius:2px}
+.ui-footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:20px;border-top:1px solid color-mix(in srgb,var(--footer-fg) 18%,transparent)}
+/* ── end ui-footer ── */
+
+/* ── ui-auth ── */
+/* a sign-in or sign-up card: brand, heading, fields, one main action; password rules shown as they are met */
+.ui-auth{display:grid;gap:18px;width:min(400px,100%);margin:0 auto;padding:28px 24px;background:var(--p);border:1px solid var(--l);border-radius:var(--r-lg,13px);box-shadow:var(--shadow-sm)}
+.ui-auth-head{display:grid;gap:6px;justify-items:center;text-align:center}
+.ui-auth-head h1{margin:6px 0 0;font-size:var(--ts-h2-size);font-weight:var(--ts-h2-weight);line-height:var(--ts-h2-lh);letter-spacing:var(--ts-h2-ls);text-transform:var(--ts-h2-case);font-family:var(--ts-h2-font)}
+.ui-auth-head p{margin:0;color:var(--i2)}
+.ui-auth form{display:grid;gap:14px}
+.ui-auth .ui-btn{width:100%}
+.ui-auth-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;font-size:var(--ts-small-size);font-weight:var(--ts-small-weight);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-auth-foot{margin:0;text-align:center;font-size:var(--ts-small-size);color:var(--i2);font-weight:var(--ts-small-weight);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-auth a{color:var(--i);font-weight:600;text-underline-offset:3px}
+.ui-password{position:relative}
+.ui-password .ui-input{padding-right:76px}
+.ui-password button{position:absolute;right:4px;top:50%;transform:translateY(-50%);height:calc(var(--input-h) - 8px);padding:0 10px;font-size:var(--ts-caption-size);font-weight:600;color:var(--i2);background:transparent;border:0;border-radius:var(--r-sm,8px);cursor:pointer;line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-password button:hover{background:var(--mid);color:var(--i)}
+.ui-password button:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:0}
+.ui-rules{display:grid;gap:6px;margin:0;padding:0;list-style:none;font-size:var(--ts-caption-size);color:var(--i2);font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-rules li{display:flex;align-items:center;gap:8px}
+.ui-rules li::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--input-border)}
+.ui-rules li[data-met]{color:var(--i)}
+.ui-rules li[data-met]::before{border-color:var(--steps-done-bg);background:var(--steps-done-bg)}
+/* ── end ui-auth ── */
+
+/* ── ui-toc ── */
+/* a table of contents beside long text; the section in view is marked aria-current="true" */
+.ui-toc{display:grid;gap:2px;align-content:start;font-size:var(--ts-small-size);font-weight:var(--ts-small-weight);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-toc h2{margin:0 0 6px;color:var(--i2);font-size:var(--ts-eyebrow-size);font-weight:var(--ts-eyebrow-weight);line-height:var(--ts-eyebrow-lh);letter-spacing:var(--ts-eyebrow-ls);text-transform:var(--ts-eyebrow-case);font-family:var(--ts-eyebrow-font)}
+.ui-toc a{display:block;padding:6px 10px;border-left:2px solid var(--l);color:var(--i2);text-decoration:none}
+.ui-toc a:hover{color:var(--i)}
+.ui-toc a[aria-current="true"]{color:var(--i);border-left-color:var(--steps-current);font-weight:600}
+.ui-toc a:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:2px}
+/* ── end ui-toc ── */
+
+/* ── ui-banner ── */
+/* an announcement across the top of a page or section; a close button ([data-ui-banner-close]) hides it */
+.ui-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;padding:10px 48px 10px 16px;position:relative;font-size:var(--ts-small-size);text-align:center;color:var(--banner-fg);background:var(--banner-bg);font-weight:var(--ts-small-weight);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-banner a{color:inherit;font-weight:700;text-underline-offset:3px}
+.ui-banner a:focus-visible,.ui-banner-close:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:3px}
+.ui-banner-close{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:30px;height:30px;padding:0;color:inherit;background:transparent;border:0;border-radius:var(--r-sm,8px);cursor:pointer}
+.ui-banner-close:hover{background:color-mix(in srgb,currentColor 14%,transparent)}
+.ui-banner-close svg{width:16px;height:16px}
+.ui-banner--fill{color:var(--on-fill);background:var(--fill)}
+.ui-banner--subtle{color:var(--i);background:var(--mid);border-bottom:1px solid var(--l)}
+.ui-banner--card{justify-content:flex-start;text-align:left;padding:16px 52px 16px 18px;border-radius:var(--r-lg,13px)}
+/* ── end ui-banner ── */
+
+/* ── ui-device ── */
+/* frames for showing work: a browser window, a laptop and a phone; put an image or any content inside */
+.ui-device{position:relative;min-width:0;margin:0}
+.ui-device-screen{display:grid;overflow:hidden;background:var(--s)}
+.ui-device-screen > img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
+.ui-device--browser{border:1px solid var(--l);border-radius:var(--r-md,10px);overflow:hidden;background:var(--p);box-shadow:var(--shadow-lg)}
+.ui-device-chrome{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;background:var(--mid);border-bottom:1px solid var(--l)}
+.ui-device-chrome i{width:9px;height:9px;border-radius:50%;background:var(--i3);opacity:.5}
+.ui-device-chrome span{flex:1;margin-left:8px;height:16px;max-width:240px;border-radius:999px;background:var(--p)}
+.ui-device--browser .ui-device-screen{aspect-ratio:16/10}
+.ui-device--laptop .ui-device-screen{aspect-ratio:16/10;border:10px solid var(--device-body);border-bottom-width:14px;border-radius:12px 12px 0 0}
+.ui-device--laptop::after{content:"";display:block;height:12px;margin:0 -7%;background:var(--device-body);border-radius:0 0 10px 10px;box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}
+.ui-device--phone{width:min(240px,100%)}
+.ui-device--phone .ui-device-screen{aspect-ratio:9/19.5;border:9px solid var(--device-body);border-radius:34px}
+.ui-device--phone::before{content:"";position:absolute;z-index:1;top:16px;left:50%;width:64px;height:16px;margin-left:-32px;border-radius:999px;background:var(--device-body)}
+.ui-device figcaption{margin-top:12px;font-size:var(--ts-caption-size);text-align:center;color:var(--i2);font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+/* ── end ui-device ── */
+
+/* ── ui-annot ── */
+/* design annotations: numbered pins on a picture, each matched to a note; pins are buttons that show their note */
+.ui-annot{display:grid;gap:16px;min-width:0}
+.ui-annot{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
+.ui-annot-canvas{position:relative;min-width:0}
+.ui-annot-pin{position:absolute;display:grid;place-items:center;width:26px;height:26px;margin:-13px 0 0 -13px;padding:0;font:700 .78rem/1 inherit;color:var(--annot-fg);background:var(--annot-bg);border:2px solid var(--p);border-radius:50%;box-shadow:var(--shadow-md);cursor:pointer}
+.ui-annot-pin[aria-pressed="true"]{outline:3px solid var(--annot-bg);outline-offset:2px}
+.ui-annot-pin:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:2px}
+.ui-annot-notes{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:annot}
+.ui-annot-notes li{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;padding:10px 12px;border:1px solid var(--l);border-radius:var(--r-md,10px);background:var(--p);counter-increment:annot}
+.ui-annot-notes li::before{content:counter(annot);grid-row:span 2;display:grid;place-items:center;width:22px;height:22px;font:700 .72rem/1 inherit;color:var(--annot-fg);background:var(--annot-bg);border-radius:50%}
+.ui-annot-notes li[data-active]{border-color:var(--annot-bg);box-shadow:0 0 0 1px var(--annot-bg)}
+.ui-annot-notes strong{color:var(--i)}
+.ui-annot-notes span{font-size:var(--ts-small-size);color:var(--i2);font-weight:var(--ts-small-weight);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+/* a spec line: a measured distance between two edges */
+.ui-annot-spec{position:absolute;display:flex;align-items:center;justify-content:center;border:0 dashed var(--annot-bg);font:600 .7rem/1 ui-monospace,monospace;color:var(--annot-bg)}
+.ui-annot-spec--h{height:0;border-top-width:1.5px}
+.ui-annot-spec--v{width:0;border-left-width:1.5px}
+.ui-annot-spec span{padding:2px 5px;background:var(--p);border-radius:4px}
+/* ── end ui-annot ── */
+
+/* ── ui-motion ── */
+/* motion.js reveals: an element waiting to reveal is hidden only once the script is running (html.ui-motion-ready),
+   and never under Still or the device's reduce-motion setting, so nothing can stay invisible */
+html.ui-motion-ready:not([data-motion="still"]) [data-reveal]:not([data-revealed]):not([data-reveal-trigger="hover"]){opacity:0}
+@media (prefers-reduced-motion:reduce){html.ui-motion-ready [data-reveal]:not([data-revealed]){opacity:1}}
+/* split text: each piece in a clipping box, so a line or word can rise into view */
+.ui-split{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
+.ui-split-in{display:inline-block}
+/* ── end ui-motion ── */
+
+/* Type styles as classes: .ui-t-<style> gives any element one of the kit's ten styles (tokens.css --ts-*) */
+.ui-t-display{font-size:var(--ts-display-size);font-weight:var(--ts-display-weight);line-height:var(--ts-display-lh);letter-spacing:var(--ts-display-ls);text-transform:var(--ts-display-case);font-family:var(--ts-display-font)}
+.ui-t-h1{font-size:var(--ts-h1-size);font-weight:var(--ts-h1-weight);line-height:var(--ts-h1-lh);letter-spacing:var(--ts-h1-ls);text-transform:var(--ts-h1-case);font-family:var(--ts-h1-font)}
+.ui-t-h2{font-size:var(--ts-h2-size);font-weight:var(--ts-h2-weight);line-height:var(--ts-h2-lh);letter-spacing:var(--ts-h2-ls);text-transform:var(--ts-h2-case);font-family:var(--ts-h2-font)}
+.ui-t-h3{font-size:var(--ts-h3-size);font-weight:var(--ts-h3-weight);line-height:var(--ts-h3-lh);letter-spacing:var(--ts-h3-ls);text-transform:var(--ts-h3-case);font-family:var(--ts-h3-font)}
+.ui-t-lead{font-size:var(--ts-lead-size);font-weight:var(--ts-lead-weight);line-height:var(--ts-lead-lh);letter-spacing:var(--ts-lead-ls);text-transform:var(--ts-lead-case);font-family:var(--ts-lead-font)}
+.ui-t-body{font-size:var(--ts-body-size);font-weight:var(--ts-body-weight);line-height:var(--ts-body-lh);letter-spacing:var(--ts-body-ls);text-transform:var(--ts-body-case);font-family:var(--ts-body-font)}
+.ui-t-small{font-size:var(--ts-small-size);font-weight:var(--ts-small-weight);line-height:var(--ts-small-lh);letter-spacing:var(--ts-small-ls);text-transform:var(--ts-small-case);font-family:var(--ts-small-font)}
+.ui-t-caption{font-size:var(--ts-caption-size);font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);letter-spacing:var(--ts-caption-ls);text-transform:var(--ts-caption-case);font-family:var(--ts-caption-font)}
+.ui-t-label{font-size:var(--ts-label-size);font-weight:var(--ts-label-weight);line-height:var(--ts-label-lh);letter-spacing:var(--ts-label-ls);text-transform:var(--ts-label-case);font-family:var(--ts-label-font)}
+.ui-t-eyebrow{font-size:var(--ts-eyebrow-size);font-weight:var(--ts-eyebrow-weight);line-height:var(--ts-eyebrow-lh);letter-spacing:var(--ts-eyebrow-ls);text-transform:var(--ts-eyebrow-case);font-family:var(--ts-eyebrow-font)}
+
+/* ── ui-viz: the kit's charts (charts.js + charts-core.mjs draw them; React: Chart.jsx). Structure only: colors are
+   the series (--series-1..5), the primary (--chart-line) or a tone; fills sit 2px apart in the card's color. ── */
+.ui-viz{position:relative;display:grid;gap:10px;min-width:0;margin:0;--viz-h:220px}
+.ui-viz--spark{--viz-h:40px;gap:0}
+.ui-viz--bar,.ui-viz--line,.ui-viz--area{--viz-h:220px}
+.ui-viz--horizontal{--viz-h:200px}
+.ui-viz--donut,.ui-viz--pie,.ui-viz--ring{justify-items:center}.ui-viz--donut .ui-viz-legend,.ui-viz--pie .ui-viz-legend{justify-content:center}
+.ui-viz--meter{gap:8px}
+.ui-viz--gauge{justify-items:center}.ui-viz--heatmap,.ui-viz--funnel{gap:8px}
+.ui-viz-round--gauge{margin:0 auto}.ui-viz-middle--gauge{place-content:end center;padding-bottom:2px}
+.ui-viz-cell{transition:opacity var(--dur-fast,120ms) ease}.ui-viz-plot:hover .ui-viz-cell:not(:hover){opacity:.7}
+.ui-viz-tick--strong{fill:var(--i2);font-weight:600}
+.ui-viz-ramp{display:flex;align-items:center;gap:4px;font-size:var(--ts-caption-size);color:var(--i3)}
+.ui-viz-ramp i{width:16px;height:10px;border-radius:2px}.ui-viz-ramp span:first-child{margin-right:4px}.ui-viz-ramp span:last-child{margin-left:4px}
+.ui-viz-plot{position:relative;min-width:0}
+.ui-viz-svg{display:block;max-width:100%;overflow:visible}
+.ui-viz-grid{stroke:var(--chart-grid);stroke-width:1}
+.ui-viz-tick{fill:var(--i3);font-family:var(--ts-caption-font);font-size:var(--ts-caption-size);font-weight:var(--ts-caption-weight)}
+.ui-viz-line{stroke-width:var(--chart-stroke);stroke-linejoin:round;stroke-linecap:round}
+.ui-viz--spark .ui-viz-line{stroke-width:calc(var(--chart-stroke) * .9)}
+.ui-viz-area{opacity:calc(var(--chart-area-opacity) * 1.6)}
+.ui-viz-track{stroke:var(--mid)}
+.ui-viz-trackbar{fill:var(--mid)}
+.ui-viz-cross{stroke:var(--i3);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}
+.ui-viz-cross[hidden]{display:none}
+.ui-viz-plot:hover .ui-viz-bar:not(:hover),.ui-viz-plot:hover .ui-viz-seg:not(:hover),.ui-viz-plot:hover .ui-viz-sweep:not(:hover){opacity:.62}
+.ui-viz-mark{transition:opacity var(--dur-fast,120ms) ease}
+.ui-viz-round{position:relative;margin:0 auto}
+.ui-viz-middle{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:2px;text-align:center;pointer-events:none}
+.ui-viz-middle strong{font-size:var(--ts-h2-size);font-weight:var(--ts-h2-weight);line-height:1;letter-spacing:var(--ts-h2-ls);color:var(--i);font-variant-numeric:tabular-nums}
+.ui-viz-middle span{font-size:var(--ts-caption-size);color:var(--i3)}
+.ui-viz-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;list-style:none;font-size:var(--ts-caption-size);font-weight:var(--ts-caption-weight);line-height:var(--ts-caption-lh);color:var(--i2)}
+.ui-viz-legend li{display:flex;align-items:center;gap:6px}
+.ui-viz-key{flex:none;width:10px;height:10px;border-radius:3px}
+.ui-viz-tip{position:absolute;z-index:2;padding:4px 8px;font-size:var(--ts-caption-size);font-weight:600;line-height:var(--ts-caption-lh);white-space:nowrap;color:var(--tooltip-fg);background:var(--tooltip-bg);border-radius:var(--tooltip-radius);box-shadow:var(--shadow-md);pointer-events:none}
+.ui-viz-error{margin:0;padding:12px;border:1px dashed var(--neg);border-radius:var(--r-sm,8px);font-size:var(--ts-small-size);color:var(--neg)}
+
+/* ── ui-compare: two (or more) values against each other; the first is the one that matters (primary), the rest
+   are the baseline (dim ink). The difference is written out, never only drawn. ── */
+.ui-compare{display:grid;gap:10px;min-width:0}
+.ui-compare-row{display:grid;grid-template-columns:minmax(80px,auto) minmax(0,1fr) auto;align-items:center;gap:12px}
+.ui-compare-label{font-size:var(--ts-small-size);color:var(--i2)}
+.ui-compare-bar{height:10px;border-radius:999px;background:var(--mid);overflow:hidden}
+.ui-compare-bar > span{display:block;height:100%;width:var(--value,0%);border-radius:inherit;background:var(--i3)}
+.ui-compare-row:first-child .ui-compare-bar > span{background:var(--chart-line)}
+.ui-compare-value{font-weight:700;color:var(--i);font-variant-numeric:tabular-nums}
+.ui-compare-diff{margin:2px 0 0;font-size:var(--ts-caption-size);color:var(--i2)}
+/* ── ui-timeline: milestones in order; the dot and the words both say done, current or upcoming ── */
+.ui-timeline{display:grid;margin:0;padding:0;list-style:none}
+.ui-timeline-item{position:relative;display:grid;grid-template-columns:auto 1fr;gap:12px;padding:0 0 18px}
+.ui-timeline-item:not(:last-child)::before{content:"";position:absolute;left:5px;top:16px;bottom:0;width:2px;background:var(--l)}
+.ui-timeline-dot{width:12px;height:12px;margin-top:5px;border-radius:50%;border:2px solid var(--i3);background:var(--p);box-sizing:border-box}
+.ui-timeline-item[data-state="done"] .ui-timeline-dot{border-color:var(--good);background:var(--good)}
+.ui-timeline-item[data-state="current"] .ui-timeline-dot{border-color:var(--pos);background:var(--pos)}
+.ui-timeline-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-weight:600;color:var(--i)}
+.ui-timeline-text{margin:4px 0 2px;color:var(--i2)}
+.ui-timeline-time{font-size:var(--ts-caption-size);color:var(--i3)}
+/* ── ui-statgrid: a compact grid of figures for dashboards (marketing pages use ui-stats) ── */
+.ui-statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;margin:0;overflow:hidden;background:var(--l);border:1px solid var(--l);border-radius:var(--r-lg,13px)}
+.ui-statgrid > div{display:grid;gap:4px;align-content:start;padding:14px 16px;background:var(--p)}
+.ui-statgrid dt{font-size:var(--ts-caption-size);color:var(--i2)}
+.ui-statgrid dd{margin:0;font-size:var(--ts-h2-size);font-weight:700;line-height:1.1;color:var(--i);font-variant-numeric:tabular-nums}
+.ui-statgrid small{font-size:var(--ts-caption-size);color:var(--i3)}