@invisibleloop/pulse 0.20.11 → 0.20.20

package/examples/public/pulse-ui.css

@@ -1,3028 +0,0 @@
-/**
- * Pulse UI — Component stylesheet
- *
- * Import this file in your page spec:
- *   meta: { styles: ['/pulse-ui.css', '/app.css'] }
- *
- * Theming: override these custom properties in :root in your app.css.
- * Do not edit this file — extend via new CSS modifier classes only.
- *
- * Token fallback chain: project token → ui default
- * e.g. --ui-accent falls back to --accent, then to a hardcoded default.
- */
-
-/* ─── UI tokens ─────────────────────────────────────────────────────────────
-   All component styles reference --ui-* tokens only.
-   Override these in :root to retheme the entire library at once.          */
-:root {
-  --ui-bg:           var(--bg,            #0d0d10);
-  --ui-surface:      var(--surface,       #111116);
-  --ui-surface-2:    var(--surface-2,     #18181f);
-  --ui-border:       var(--border,        #38383f);
-  --ui-text:         var(--text,          #e2e2ea);
-  --ui-muted:        var(--muted,         #9090a0);
-  --ui-accent:       var(--accent,        #9b8dff);
-  --ui-accent-hover: var(--accent-hover,  #b5aaff);
-  --ui-accent-dim:   var(--accent-dim,    rgba(155,141,255,.12));
-  --ui-accent-text:  var(--accent-text,   #0d0a20);
-  /* Inline code in dark theme — accent passes WCAG AA on surface-2 by default */
-  --ui-code-color:   var(--code-color,    var(--ui-accent));
-  --ui-green:        var(--green,         #3dd68c);
-  --ui-green-dim:    rgba(61, 214, 140, .12);
-  --ui-red:          var(--red,           #ff6b6b);
-  --ui-red-dim:      rgba(255, 107, 107,  .12);
-  --ui-yellow:       #f5a623;
-  --ui-yellow-dim:   rgba(245, 166,  35,  .12);
-  --ui-blue:         #60a5fa;
-  --ui-blue-dim:     rgba( 96, 165, 250,  .12);
-  --ui-radius:       var(--radius,        8px);
-  --ui-radius-sm:    4px;
-  --ui-font:         var(--font,          system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
-  --ui-font-display: var(--font-display,  var(--ui-font));
-  --ui-mono:         var(--mono,          'Fira Code', 'Cascadia Code', monospace);
-  --ui-letter-spacing-display: var(--letter-spacing-display, -0.025em);
-
-  /* Touch target minimum per WCAG 2.5.5 */
-  --ui-touch-min: 44px;
-
-  /* ── Spacing scale ── */
-  --ui-space-1:  0.25rem;   /*  4px */
-  --ui-space-2:  0.5rem;    /*  8px */
-  --ui-space-3:  0.75rem;   /* 12px */
-  --ui-space-4:  1rem;      /* 16px */
-  --ui-space-5:  1.25rem;   /* 20px */
-  --ui-space-6:  1.5rem;    /* 24px */
-  --ui-space-8:  2rem;      /* 32px */
-  --ui-space-10: 2.5rem;    /* 40px */
-  --ui-space-12: 3rem;      /* 48px */
-  --ui-space-16: 4rem;      /* 64px */
-  --ui-space-20: 5rem;      /* 80px */
-  --ui-space-24: 6rem;      /* 96px */
-
-  /* ── Type scale ── */
-  --ui-text-xs:   0.75rem;    /* 12px */
-  --ui-text-sm:   0.875rem;   /* 14px */
-  --ui-text-base: 1rem;       /* 16px */
-  --ui-text-lg:   1.125rem;   /* 18px */
-  --ui-text-xl:   1.25rem;    /* 20px */
-  --ui-text-2xl:  1.5rem;     /* 24px */
-  --ui-text-3xl:  1.875rem;   /* 30px */
-  --ui-text-4xl:  2.25rem;    /* 36px */
-}
-
-/* ─── Base reset ─────────────────────────────────────────────────────────────
-   Apply the dark background and text colour to the document root so the page
-   background matches the component surface colours out of the box.
-   Projects can opt into a light theme via meta.theme: 'light' (sets
-   data-theme="light" on <body>) or override :root tokens in app.css.      */
-*, *::before, *::after { box-sizing: border-box; }
-h1, h2, h3, h4, h5, h6, p, ul, ol, li { margin: 0; }
-ul, ol { list-style: none; }
-
-html, body {
-  margin:           0;
-  background-color: var(--ui-bg);
-  color:            var(--ui-text);
-  font-family:      var(--ui-font);
-  min-height:       100dvh;
-}
-
-/* ─── Focus style ────────────────────────────────────────────────────────────
-   Applied via :focus-visible to avoid showing on mouse click.
-   All interactive components inherit this.                                 */
-.ui-btn:focus-visible,
-.ui-input:focus-visible,
-.ui-select:focus-visible,
-.ui-textarea:focus-visible {
-  outline: 2px solid var(--ui-accent);
-  outline-offset: 2px;
-}
-
-/* ─── Button ─────────────────────────────────────────────────────────────── */
-.ui-btn {
-  box-sizing:      border-box;
-  display:         inline-flex;
-  align-items:     center;
-  justify-content: center;
-  gap:             .45rem;
-  padding:         0 1.2rem;
-  height:          var(--ui-touch-min);
-  min-width:       var(--ui-touch-min);
-  border:          1px solid transparent;
-  border-radius:   var(--ui-radius);
-  font-family:     var(--ui-font);
-  font-size:       .9rem;
-  font-weight:     600;
-  line-height:     1;
-  text-decoration: none;
-  white-space:     nowrap;
-  cursor:          pointer;
-  transition:      background .15s, color .15s, border-color .15s, opacity .15s;
-  -webkit-font-smoothing: antialiased;
-}
-
-/* Variants */
-.ui-btn--primary {
-  background: var(--ui-accent);
-  color:      var(--ui-bg);
-}
-.ui-btn--primary:hover:not(.ui-btn--disabled):not([disabled]) {
-  background: var(--ui-accent-hover);
-}
-
-.ui-btn--secondary {
-  background:   var(--ui-surface-2);
-  color:        var(--ui-text);
-  border-color: var(--ui-muted);
-}
-.ui-btn--secondary:hover:not(.ui-btn--disabled):not([disabled]) {
-  background:   var(--ui-surface);
-  border-color: var(--ui-text);
-}
-
-.ui-btn--ghost {
-  background: transparent;
-  color:      var(--ui-muted);
-  border:     none;
-}
-.ui-btn--ghost:hover:not(.ui-btn--disabled):not([disabled]) {
-  background: var(--ui-surface-2);
-  color:      var(--ui-text);
-}
-
-/* ghost-light — use on dark section backgrounds (e.g. navy hero, section--dark).
-   Renders with light/white text and a subtle light border so it remains legible
-   regardless of whether the surrounding theme is light or dark.               */
-.ui-btn--ghost-light {
-  background:   transparent;
-  color:        rgba(255, 255, 255, 0.9);
-  border:       1px solid rgba(255, 255, 255, 0.35);
-}
-.ui-btn--ghost-light:hover:not(.ui-btn--disabled):not([disabled]) {
-  background:   rgba(255, 255, 255, 0.1);
-  border-color: rgba(255, 255, 255, 0.65);
-  color:        #ffffff;
-}
-
-.ui-btn--danger {
-  background: var(--ui-red-dim);
-  color:      var(--ui-red);
-  border-color: var(--ui-red);
-}
-.ui-btn--danger:hover:not(.ui-btn--disabled):not([disabled]) {
-  background: var(--ui-red);
-  color:      var(--ui-bg);
-}
-
-/* Sizes */
-.ui-btn--sm {
-  height:    36px;
-  padding:   0 .85rem;
-  font-size: .82rem;
-  min-width: 36px;
-}
-.ui-btn--lg {
-  height:    52px;
-  padding:   0 1.75rem;
-  font-size: 1rem;
-}
-
-/* Modifiers */
-.ui-btn--full   { width: 100%; }
-.ui-btn--disabled,
-.ui-btn[disabled] {
-  opacity: .45;
-  cursor:  not-allowed;
-  pointer-events: none;
-}
-
-.ui-btn-icon {
-  display:     inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-/* ─── Badge ──────────────────────────────────────────────────────────────── */
-.ui-badge {
-  display:        inline-flex;
-  align-items:    center;
-  align-self:     flex-start;
-  padding:        .3em .55em;
-  border-radius:  var(--ui-radius-sm);
-  font-family:    var(--ui-font);
-  font-size:      .72rem;
-  font-weight:    600;
-  line-height:    1;
-  white-space:    nowrap;
-  letter-spacing: .02em;
-}
-
-.ui-badge--default { background: var(--ui-surface-2); color: var(--ui-muted);  }
-.ui-badge--success { background: var(--ui-green-dim); color: var(--ui-green);  }
-.ui-badge--warning { background: var(--ui-yellow-dim);color: var(--ui-yellow); }
-.ui-badge--error   { background: var(--ui-red-dim);   color: var(--ui-red);    }
-.ui-badge--info    { background: var(--ui-blue-dim);  color: var(--ui-blue);   }
-
-/* ─── Card ───────────────────────────────────────────────────────────────── */
-.ui-card {
-  background:    var(--ui-surface);
-  border:        1px solid var(--ui-border);
-  border-radius: var(--ui-radius);
-  overflow:      hidden;
-}
-
-.ui-card-header {
-  padding:       1rem 1.25rem;
-  border-bottom: 1px solid var(--ui-border);
-}
-
-.ui-card-title {
-  margin:      0;
-  font-size:   .95rem;
-  font-weight: 600;
-  color:       var(--ui-text);
-  line-height: 1.4;
-}
-
-.ui-card-body { padding: 1.25rem; }
-
-.ui-card--flush .ui-card-body { padding: 0; }
-
-/* Card variants */
-.ui-card--elevated {
-  box-shadow: 0 4px 24px rgba(0,0,0,.22), 0 1px 4px rgba(0,0,0,.12);
-  border-color: transparent;
-}
-.ui-card--bordered {
-  box-shadow:   none;
-  border-width: 2px;
-}
-.ui-card--flat {
-  box-shadow:  none;
-  border-color: transparent;
-}
-.ui-card--glass {
-  background:      rgba(255,255,255,.06);
-  border-color:    rgba(255,255,255,.12);
-  box-shadow:      0 4px 24px rgba(0,0,0,.18);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-}
-[data-theme="light"] .ui-card--glass {
-  background:   rgba(255,255,255,.72);
-  border-color: rgba(0,0,0,.08);
-}
-.ui-card--tinted {
-  background:  var(--ui-accent-dim, rgba(99,102,241,.1));
-  border-color: var(--ui-accent-dim, rgba(99,102,241,.2));
-  box-shadow:  none;
-}
-
-.ui-card-footer {
-  padding:    1rem 1.25rem;
-  border-top: 1px solid var(--ui-border);
-  background: var(--ui-surface-2);
-}
-
-/* ============================================================
-   Fieldset
-   ============================================================ */
-
-.ui-fieldset {
-  border:        1px solid var(--ui-border);
-  border-radius: var(--ui-radius);
-  padding:       0;
-  margin:        0;
-}
-
-.ui-fieldset-legend {
-  margin-left:     1rem;
-  padding:         0 0.375rem;
-  font-size:       0.75rem;
-  font-weight:     600;
-  letter-spacing:  0.06em;
-  text-transform:  uppercase;
-  color:           var(--ui-muted);
-  line-height:     1;
-}
-
-.ui-fieldset-body {
-  display:        flex;
-  flex-direction: column;
-  gap:            1rem;
-  padding:        1.25rem;
-}
-
-.ui-fieldset--gap-xs .ui-fieldset-body { gap: 0.375rem; }
-.ui-fieldset--gap-sm .ui-fieldset-body { gap: 0.625rem; }
-.ui-fieldset--gap-lg .ui-fieldset-body { gap: 1.5rem;   }
-
-/* ─── Form fields (shared base) ──────────────────────────────────────────── */
-.ui-field {
-  display:        flex;
-  flex-direction: column;
-  gap:            .4rem;
-}
-
-.ui-label {
-  font-family: var(--ui-font);
-  font-size:   .85rem;
-  font-weight: 600;
-  color:       var(--ui-text);
-  line-height: 1.4;
-}
-
-.ui-required {
-  color:       var(--ui-red);
-  margin-left: .15rem;
-}
-
-.ui-hint {
-  font-size:   .8rem;
-  color:       var(--ui-muted);
-  margin:      0;
-  line-height: 1.5;
-}
-
-.ui-error {
-  font-size:   .8rem;
-  color:       var(--ui-red);
-  margin:      0;
-  line-height: 1.5;
-}
-
-/* ─── Input ──────────────────────────────────────────────────────────────── */
-.ui-input {
-  width:         100%;
-  height:        var(--ui-touch-min);
-  padding:       0 .85rem;
-  background:    var(--ui-surface);
-  border:        1px solid var(--ui-border);
-  border-radius: var(--ui-radius);
-  font-family:   var(--ui-font);
-  font-size:     .9rem;
-  color:         var(--ui-text);
-  transition:    border-color .15s;
-  appearance:    none;
-  -webkit-appearance: none;
-}
-
-/* iOS Safari auto-zooms the page when a focused input's font-size is under
-   16px, forcing the user to pinch back out afterwards. On touch devices form
-   controls must never go below 16px — desktop keeps the compact .9rem. */
-@media (pointer: coarse) {
-  .ui-input,
-  .ui-textarea,
-  .ui-select,
-  .ui-search-input {
-    font-size: max(1rem, 16px);
-  }
-}
-
-.ui-input::placeholder { color: var(--ui-muted); }
-
-.ui-input:hover:not(:disabled) { border-color: var(--ui-muted); }
-
-.ui-input:disabled {
-  opacity: .5;
-  cursor:  not-allowed;
-}
-
-.ui-field--error .ui-input {
-  border-color: var(--ui-red);
-}
-
-/* ─── Search ─────────────────────────────────────────────────────────────── */
-.ui-search-wrap {
-  position: relative;
-  display:  flex;
-  align-items: center;
-}
-
-.ui-search-icon {
-  position:    absolute;
-  left:        .75rem;
-  display:     flex;
-  align-items: center;
-  color:       var(--ui-muted);
-  pointer-events: none;
-}
-
-.ui-search-input {
-  width:         100%;
-  height:        var(--ui-touch-min);
-  padding:       0 2.5rem 0 2.5rem;
-  background:    var(--ui-surface);
-  border:        1px solid var(--ui-border);
-  border-radius: var(--ui-radius);
-  font-family:   var(--ui-font);
-  font-size:     .9rem;
-  color:         var(--ui-text);
-  transition:    border-color .15s;
-  appearance:    none;
-  -webkit-appearance: none;
-}
-
-.ui-search-input::placeholder { color: var(--ui-muted); }
-
-.ui-search-input:hover:not(:disabled) { border-color: var(--ui-muted); }
-
-.ui-search-input:disabled { opacity: .5; cursor: not-allowed; }
-
-/* Hide native browser cancel button — the component provides its own */
-.ui-search-input::-webkit-search-cancel-button { display: none; }
-
-.ui-search-clear {
-  position:    absolute;
-  right:       .5rem;
-  display:     flex;
-  align-items: center;
-  justify-content: center;
-  width:       1.75rem;
-  height:      1.75rem;
-  padding:     0;
-  background:  transparent;
-  border:      none;
-  border-radius: var(--ui-radius-sm);
-  color:       var(--ui-muted);
-  cursor:      pointer;
-  transition:  color .15s, background .15s;
-}
-
-.ui-search-clear:hover { color: var(--ui-text); background: var(--ui-surface-2); }
-
-/* ─── Select ─────────────────────────────────────────────────────────────── */
-.ui-select-wrap {
-  position: relative;
-  display:  flex;
-}
-
-.ui-select {
-  width:         100%;
-  height:        var(--ui-touch-min);
-  padding:       0 2.5rem 0 .85rem;
-  background:    var(--ui-surface);
-  border:        1px solid var(--ui-border);
-  border-radius: var(--ui-radius);
-  font-family:   var(--ui-font);
-  font-size:     .9rem;
-  color:         var(--ui-text);
-  cursor:        pointer;
-  appearance:    none;
-  -webkit-appearance: none;
-  transition:    border-color .15s;
-}
-
-.ui-select:hover:not(:disabled) { border-color: var(--ui-muted); }
-
-.ui-select:disabled {
-  opacity: .5;
-  cursor:  not-allowed;
-}
-
-.ui-field--error .ui-select { border-color: var(--ui-red); }
-
-.ui-select-chevron {
-  position:        absolute;
-  right:           .85rem;
-  top:             50%;
-  transform:       translateY(-50%);
-  pointer-events:  none;
-  color:           var(--ui-muted);
-  display:         flex;
-  align-items:     center;
-}
-
-/* ─── Textarea ───────────────────────────────────────────────────────────── */
-.ui-textarea {
-  width:         100%;
-  padding:       .65rem .85rem;
-  background:    var(--ui-surface);
-  border:        1px solid var(--ui-border);
-  border-radius: var(--ui-radius);
-  font-family:   var(--ui-font);
-  font-size:     .9rem;
-  color:         var(--ui-text);
-  resize:        vertical;
-  transition:    border-color .15s;
-  min-height:    calc(var(--ui-touch-min) * 2);
-  appearance:    none;
-}
-
-.ui-textarea::placeholder { color: var(--ui-muted); }
-
-.ui-textarea:hover:not(:disabled) { border-color: var(--ui-muted); }
-
-.ui-textarea:disabled {
-  opacity: .5;
-  cursor:  not-allowed;
-}
-
-.ui-field--error .ui-textarea { border-color: var(--ui-red); }
-
-/* ─── Alert ──────────────────────────────────────────────────────────────── */
-.ui-alert {
-  display:       flex;
-  align-items:   flex-start;
-  gap:           .75rem;
-  padding:       .85rem 1rem;
-  border-radius: var(--ui-radius);
-  border:        1px solid transparent;
-  font-size:     .88rem;
-  line-height:   1.6;
-}
-
-.ui-alert--info    { background: var(--ui-blue-dim);  border-color: var(--ui-blue);   color: var(--ui-blue);  }
-.ui-alert--success { background: var(--ui-green-dim); border-color: var(--ui-green);  color: var(--ui-green); }
-.ui-alert--warning { background: var(--ui-yellow-dim);border-color: var(--ui-yellow); color: var(--ui-yellow);}
-.ui-alert--error   { background: var(--ui-red-dim);   border-color: var(--ui-red);    color: var(--ui-red);   }
-
-.ui-alert-icon {
-  display:     flex;
-  align-items: center;
-  flex-shrink: 0;
-  margin-top:  .1rem;
-}
-
-.ui-alert-body { color: var(--ui-text); }
-
-.ui-alert-title { font-weight: 600; }
-
-/* ─── Stat ───────────────────────────────────────────────────────────────── */
-.ui-stat {
-  display:        flex;
-  flex-direction: column;
-  gap:            .3rem;
-}
-
-.ui-stat-label {
-  font-size:   .8rem;
-  color:       var(--ui-muted);
-  font-weight: 500;
-  margin:      0;
-}
-
-.ui-stat-value {
-  font-size:   2rem;
-  font-weight: 700;
-  color:       var(--ui-text);
-  line-height: 1;
-  margin:      0;
-  letter-spacing: -.02em;
-}
-
-.ui-stat-change {
-  display:     inline-flex;
-  align-items: center;
-  gap:         .3rem;
-  font-size:   .8rem;
-  font-weight: 600;
-  margin:      0;
-}
-
-.ui-stat-change--up      { color: var(--ui-green);  }
-.ui-stat-change--down    { color: var(--ui-red);    }
-.ui-stat-change--neutral { color: var(--ui-muted);  }
-
-.ui-stat--center { align-items: center; text-align: center; }
-.ui-stat--center .ui-stat-change { margin-inline: auto; }
-
-/* Stat sizes */
-.ui-stat--sm .ui-stat-value { font-size: 1.25rem; letter-spacing: -.01em; }
-.ui-stat--sm .ui-stat-label { font-size: .72rem; }
-.ui-stat--lg .ui-stat-value { font-size: 3.5rem; letter-spacing: -.04em; line-height: .9; }
-.ui-stat--lg .ui-stat-label { font-size: .9rem; }
-
-/* ─── Avatar ─────────────────────────────────────────────────────────────── */
-.ui-avatar {
-  display:         inline-flex;
-  align-items:     center;
-  justify-content: center;
-  border-radius:   50%;
-  overflow:        hidden;
-  background:      var(--ui-accent-dim);
-  color:           var(--ui-accent);
-  font-family:     var(--ui-font);
-  font-weight:     700;
-  flex-shrink:     0;
-  object-fit:      cover;
-}
-
-.ui-avatar--sm { width: 28px; height: 28px; font-size: .65rem; }
-.ui-avatar--md { width: 40px; height: 40px; font-size: .85rem; }
-.ui-avatar--lg { width: 56px; height: 56px; font-size: 1.1rem; }
-.ui-avatar--xl { width: 80px; height: 80px; font-size: 1.5rem; }
-
-/* ─── Empty state ────────────────────────────────────────────────────────── */
-.ui-empty {
-  display:        flex;
-  flex-direction: column;
-  align-items:    center;
-  text-align:     center;
-  gap:            .75rem;
-  padding:        3rem 1.5rem;
-}
-
-.ui-empty-title {
-  font-size:   1.05rem;
-  font-weight: 600;
-  color:       var(--ui-text);
-  margin:      0;
-}
-
-.ui-empty-desc {
-  font-size:  .88rem;
-  color:      var(--ui-muted);
-  max-width:  36ch;
-  margin:     0;
-  line-height: 1.6;
-}
-
-/* ─── Table ──────────────────────────────────────────────────────────────── */
-.ui-table-wrap {
-  overflow-x:    auto;
-  border:        1px solid var(--ui-border);
-  border-radius: var(--ui-radius);
-  /* Explicit outline for keyboard-scrollable region */
-}
-
-.ui-table-wrap:focus-visible {
-  outline: 2px solid var(--ui-accent);
-  outline-offset: 2px;
-}
-
-.ui-table {
-  width:           100%;
-  border-collapse: collapse;
-  font-size:       .88rem;
-}
-
-.ui-table-caption {
-  caption-side: top;
-  text-align:   left;
-  padding:      .75rem 1rem;
-  font-size:    .8rem;
-  font-weight:  600;
-  color:        var(--ui-muted);
-  text-transform: uppercase;
-  letter-spacing: .06em;
-  border-bottom: 1px solid var(--ui-border);
-}
-
-.ui-table thead th {
-  padding:        .65rem 1rem;
-  text-align:     left;
-  font-size:      .78rem;
-  font-weight:    600;
-  color:          var(--ui-muted);
-  text-transform: uppercase;
-  letter-spacing: .06em;
-  border-bottom:  1px solid var(--ui-border);
-  background:     var(--ui-surface-2);
-  white-space:    nowrap;
-}
-
-.ui-table tbody td {
-  padding:       .75rem 1rem;
-  border-bottom: 1px solid var(--ui-border);
-  color:         var(--ui-text);
-  vertical-align: top;
-  line-height:   1.5;
-}
-
-.ui-table tbody tr:last-child td { border-bottom: none; }
-
-.ui-table tbody tr:nth-child(even) { background: var(--ui-surface-2); }
-
-/* ─── Container ──────────────────────────────────────────────────────────── */
-.ui-container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
-.ui-container--sm { max-width: 640px;  }
-.ui-container--md { max-width: 768px;  }
-.ui-container--lg { max-width: 1100px; }
-.ui-container--xl { max-width: 1280px; }
-
-/* ─── Section ────────────────────────────────────────────────────────────── */
-.ui-section        { padding-top: 5rem; padding-bottom: 5rem; }
-.ui-section--sm    { padding-top: 3rem; padding-bottom: 3rem; }
-.ui-section--lg    { padding-top: 7rem; padding-bottom: 7rem; }
-.ui-section--alt   { background: var(--ui-surface,   var(--surface,   #111116)); }
-.ui-section--dark  { background: var(--ui-surface-2, var(--surface-2, #18181f)); }
-
-/* In light theme, --ui-surface-2 resolves to a light grey — not "dark".
-   Override so section--dark always renders a genuinely dark background that
-   contrasts with the page, regardless of the active theme.                  */
-[data-theme="light"] .ui-section--dark,
-.ui-theme-light .ui-section--dark {
-  background:  var(--ui-dark-bg,  #1a1a2e);
-  color:       var(--ui-dark-text, #e2e2ea);
-}
-/* Ensure text children inherit the light colour in the dark section */
-[data-theme="light"] .ui-section--dark .ui-section-title,
-[data-theme="light"] .ui-section--dark .ui-section-eyebrow,
-[data-theme="light"] .ui-section--dark .ui-section-subtitle,
-.ui-theme-light .ui-section--dark .ui-section-title,
-.ui-theme-light .ui-section--dark .ui-section-eyebrow,
-.ui-theme-light .ui-section--dark .ui-section-subtitle {
-  color: inherit;
-}
-/* Ghost button inside a dark section on a light-theme page */
-[data-theme="light"] .ui-section--dark .ui-btn--ghost,
-.ui-theme-light .ui-section--dark .ui-btn--ghost {
-  color:        var(--ui-dark-text, #e2e2ea);
-  border-color: rgba(226, 226, 234, 0.35);
-}
-[data-theme="light"] .ui-section--dark .ui-btn--ghost:hover:not(.ui-btn--disabled):not([disabled]),
-.ui-theme-light .ui-section--dark .ui-btn--ghost:hover:not(.ui-btn--disabled):not([disabled]) {
-  background:   rgba(226, 226, 234, 0.1);
-  border-color: rgba(226, 226, 234, 0.65);
-  color:        var(--ui-dark-text, #e2e2ea);
-}
-
-/* diagonal — tapered bottom edge; follow with a section that starts flush */
-.ui-section--diagonal {
-  background: var(--ui-surface, var(--surface, #111116));
-  padding-bottom: calc(5rem + 3.5rem);
-  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5rem), 0 100%);
-}
-/* paper — subtle dot-grid texture on a raised surface */
-.ui-section--paper {
-  position: relative;
-  background-color: var(--ui-surface, var(--surface, #111116));
-  background-image: radial-gradient(circle, var(--ui-border) 1px, transparent 0);
-  background-size: 22px 22px;
-}
-/* spotlight — accent glow from center top */
-.ui-section--spotlight {
-  background: radial-gradient(ellipse 70% 60% at 50% 30%, var(--ui-accent-dim, rgba(155,141,255,.15)), var(--ui-surface, #111116) 80%);
-}
-
-/* ─── Grid ───────────────────────────────────────────────────────────────── */
-.ui-grid { display: grid; gap: 2rem; }
-
-.ui-grid--cols-1 { grid-template-columns: 1fr; }
-.ui-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
-.ui-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
-.ui-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
-
-.ui-grid--gap-sm { gap: 1rem; }
-.ui-grid--gap-lg { gap: 3rem; }
-
-/* ─── Stack ──────────────────────────────────────────────────────────────── */
-.ui-stack { display: flex; flex-direction: column; gap: 1rem; }
-
-.ui-stack--gap-xs { gap: .25rem; }
-.ui-stack--gap-sm { gap: .5rem;  }
-.ui-stack--gap-lg { gap: 2rem;   }
-.ui-stack--gap-xl { gap: 3rem;   }
-
-.ui-stack--align-start  { align-items: flex-start; }
-.ui-stack--align-center { align-items: center;      }
-.ui-stack--align-end    { align-items: flex-end;    }
-
-/* ─── Cluster ────────────────────────────────────────────────────────────── */
-.ui-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
-
-.ui-cluster--gap-xs { gap: .25rem; }
-.ui-cluster--gap-sm { gap: .5rem;  }
-.ui-cluster--gap-lg { gap: 2rem;   }
-
-.ui-cluster--justify-center  { justify-content: center;        }
-.ui-cluster--justify-end     { justify-content: flex-end;      }
-.ui-cluster--justify-between { justify-content: space-between; }
-
-.ui-cluster--align-start { align-items: flex-start; }
-.ui-cluster--align-end   { align-items: flex-end;   }
-
-.ui-cluster--nowrap { flex-wrap: nowrap; }
-
-/* ─── Divider ────────────────────────────────────────────────────────────── */
-hr.ui-divider {
-  border:        none;
-  border-top:    1px solid var(--ui-border, var(--border, #222228));
-  margin:        0;
-}
-
-.ui-divider--label {
-  display:     flex;
-  align-items: center;
-  gap:         .75rem;
-}
-
-.ui-divider-line {
-  flex:           1;
-  height:         1px;
-  background:     var(--ui-border, var(--border, #222228));
-  display:        block;
-}
-
-.ui-divider-text {
-  font-size:      .8rem;
-  color:          var(--ui-muted, var(--muted, #9090a0));
-  white-space:    nowrap;
-  flex-shrink:    0;
-}
-
-/* ─── Media ──────────────────────────────────────────────────────────────── */
-.ui-media {
-  display:               grid;
-  grid-template-columns: 1fr 1fr;
-  gap:                   3rem;
-  align-items:           center;
-}
-
-.ui-media--reverse      { direction: rtl; }
-.ui-media--reverse > *  { direction: ltr; }
-
-.ui-media--align-start  { align-items: flex-start; }
-
-.ui-media--gap-sm { gap: 1.5rem; }
-.ui-media--gap-lg { gap: 5rem;   }
-
-.ui-media-image   { min-width: 0; }
-.ui-media-content { min-width: 0; }
-
-.ui-media-image img {
-  width:         100%;
-  height:        auto;
-  border-radius: var(--ui-radius, 8px);
-  display:       block;
-}
-
-/* ─── Hero ───────────────────────────────────────────────────────────────── */
-.ui-hero { padding: 5rem 1.5rem; text-align: center; }
-.ui-hero--left { text-align: left; }
-.ui-hero--sm   { padding-top: 2.5rem; padding-bottom: 0; }
-.ui-hero-inner { max-width: 720px; margin: 0 auto; }
-.ui-hero--left .ui-hero-inner { margin: 0; }
-
-.ui-hero-eyebrow {
-  font-size: .78rem;
-  font-weight: 600;
-  letter-spacing: .08em;
-  text-transform: uppercase;
-  color: var(--ui-accent, var(--accent, #9b8dff));
-  margin: 0 0 .75rem;
-}
-
-.ui-hero-title {
-  font-size: clamp(2.2rem, 6vw, 3.5rem);
-  font-weight: 800;
-  line-height: 1.1;
-  letter-spacing: var(--ui-letter-spacing-display, -.02em);
-  font-family: var(--ui-font-display, var(--ui-font));
-  color: var(--ui-text, var(--text, #e2e2ea));
-  margin: 0 0 1.25rem;
-}
-
-.ui-hero-subtitle {
-  font-size: 1.125rem;
-  color: var(--ui-muted, var(--muted, #9090a0));
-  line-height: 1.65;
-  margin: 0 0 2rem;
-}
-
-.ui-hero-actions {
-  display: flex;
-  gap: .75rem;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-.ui-hero--left .ui-hero-actions { justify-content: flex-start; }
-
-/* Split (text + image, 50/50) */
-.ui-hero--split { text-align: left; }
-.ui-hero--split .ui-hero-inner {
-  max-width: 1100px;
-  margin: 0 auto;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 3rem;
-  align-items: center;
-}
-.ui-hero--split .ui-hero-actions { justify-content: flex-start; }
-.ui-hero--split .ui-hero-media { display: flex; align-items: center; justify-content: center; }
-.ui-hero--split .ui-hero-media img { width: 100%; height: auto; border-radius: var(--ui-radius, 8px); display: block; }
-.ui-hero--media-left .ui-hero-media { order: -1; }
-
-/* Asymmetric (text 60%, image 40%) */
-.ui-hero--asymmetric { text-align: left; }
-.ui-hero--asymmetric .ui-hero-inner {
-  max-width: 1100px;
-  margin: 0 auto;
-  display: grid;
-  grid-template-columns: 3fr 2fr;
-  gap: 3rem;
-  align-items: center;
-}
-.ui-hero--asymmetric .ui-hero-actions { justify-content: flex-start; }
-.ui-hero--asymmetric .ui-hero-media { display: flex; align-items: center; justify-content: center; }
-.ui-hero--asymmetric .ui-hero-media img { width: 100%; height: auto; border-radius: var(--ui-radius, 8px); display: block; }
-.ui-hero--asymmetric.ui-hero--media-left .ui-hero-media { order: -1; }
-.ui-hero--asymmetric.ui-hero--media-left .ui-hero-inner { grid-template-columns: 2fr 3fr; }
-
-/* Overlap (image fills section, text overlaid) */
-.ui-hero--overlap {
-  position: relative;
-  min-height: 60vh;
-  overflow: hidden;
-  padding: 0;
-  display: flex;
-  align-items: flex-end;
-  text-align: left;
-}
-.ui-hero--overlap .ui-hero-overlap-media {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-}
-.ui-hero--overlap .ui-hero-overlap-media img,
-.ui-hero--overlap .ui-hero-overlap-media video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-.ui-hero--overlap .ui-hero-inner {
-  position: relative;
-  z-index: 1;
-  width: 100%;
-  max-width: none;
-  padding: 4rem 2rem;
-  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.3) 60%, transparent 100%);
-}
-.ui-hero--overlap .ui-hero-content { max-width: 600px; }
-.ui-hero--overlap .ui-hero-eyebrow { color: rgba(255,255,255,.75); }
-.ui-hero--overlap .ui-hero-title   { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
-.ui-hero--overlap .ui-hero-subtitle{ color: rgba(255,255,255,.8); }
-.ui-hero--overlap .ui-hero-actions { justify-content: flex-start; }
-
-/* ─── Feature ────────────────────────────────────────────────────────────── */
-.ui-feature { display: flex; flex-direction: column; gap: .75rem; }
-.ui-feature-image { width: 100%; border-radius: var(--ui-radius-sm); overflow: hidden; }
-.ui-feature-image img { width: 100%; height: auto; display: block; }
-
-.ui-feature-icon {
-  display:    block;
-  flex-shrink: 0;
-  line-height: 1;
-}
-
-.ui-feature-title { font-size: 1rem; font-weight: 600; color: var(--ui-text, var(--text, #e2e2ea)); margin: 0; }
-.ui-feature-desc  { font-size: .9rem; color: var(--ui-muted, var(--muted, #9090a0)); line-height: 1.6; margin: 0; }
-
-.ui-feature--center               { align-items: center; text-align: center; }
-
-/* ─── Accordion ──────────────────────────────────────────────────────────── */
-.ui-accordion { display: flex; flex-direction: column; gap: .5rem; width: 100%; }
-
-.ui-accordion-item {
-  background:     var(--ui-surface, var(--surface, #111116));
-  border:         1px solid var(--ui-border, var(--border, #222228));
-  border-radius:  var(--ui-radius, 8px);
-  overflow:       hidden;
-}
-
-.ui-accordion-summary {
-  display:       flex;
-  justify-content: space-between;
-  align-items:   center;
-  padding:       1rem 1.25rem;
-  cursor:        pointer;
-  font-size:     .95rem;
-  font-weight:   500;
-  color:         var(--ui-text, var(--text, #e2e2ea));
-  list-style:    none;
-  user-select:   none;
-  gap:           1rem;
-}
-.ui-accordion-summary::-webkit-details-marker { display: none; }
-.ui-accordion-summary:hover { color: var(--ui-accent, var(--accent, #9b8dff)); }
-
-.ui-accordion-icon {
-  width:       16px;
-  height:      16px;
-  position:    relative;
-  flex-shrink: 0;
-}
-.ui-accordion-icon::before,
-.ui-accordion-icon::after {
-  content:       '';
-  position:      absolute;
-  background:    currentColor;
-  border-radius: 2px;
-  transition:    transform .2s;
-}
-.ui-accordion-icon::before { width: 10px; height: 1.5px; top: 7px; left: 3px; }
-.ui-accordion-icon::after  { width: 1.5px; height: 10px; top: 3px; left: 7px; }
-.ui-accordion-item[open] .ui-accordion-icon::after { transform: rotate(90deg); }
-
-.ui-accordion-body { padding: 0 1.25rem 1rem; }
-.ui-accordion-body p { font-size: .9rem; color: var(--ui-muted, var(--muted, #9090a0)); line-height: 1.7; margin: 0; }
-
-/* ─── Tooltip ────────────────────────────────────────────────────────────── */
-.ui-tooltip {
-  position: relative;
-  display:  inline-block;
-}
-
-.ui-tooltip::after {
-  content:        attr(data-tip);
-  position:       absolute;
-  bottom:         calc(100% + 8px);
-  left:           50%;
-  transform:      translateX(-50%) translateY(4px);
-  background:     var(--ui-surface-2, var(--surface-2, #1a1a26));
-  color:          var(--ui-text, var(--text, #e2e2ea));
-  font-size:      .78rem;
-  font-weight:    500;
-  line-height:    1.4;
-  white-space:    nowrap;
-  padding:        .35rem .7rem;
-  border-radius:  6px;
-  border:         1px solid var(--ui-border, var(--border, #2a2a38));
-  pointer-events: none;
-  opacity:        0;
-  transition:     opacity .15s, transform .15s;
-  z-index:        var(--ui-z-tooltip, 200);
-}
-
-.ui-tooltip::before {
-  content:          '';
-  position:         absolute;
-  bottom:           calc(100% + 2px);
-  left:             50%;
-  transform:        translateX(-50%);
-  border:           5px solid transparent;
-  border-top-color: var(--ui-border, var(--border, #2a2a38));
-  pointer-events:   none;
-  opacity:          0;
-  transition:       opacity .15s;
-  z-index:          var(--ui-z-tooltip, 200);
-}
-
-.ui-tooltip:hover::after,
-.ui-tooltip:focus-within::after {
-  opacity:   1;
-  transform: translateX(-50%) translateY(0);
-}
-.ui-tooltip:hover::before,
-.ui-tooltip:focus-within::before { opacity: 1; }
-
-/* bottom */
-.ui-tooltip--bottom::after  { bottom: auto; top: calc(100% + 8px); transform: translateX(-50%) translateY(-4px); }
-.ui-tooltip--bottom::before { bottom: auto; top: calc(100% + 2px); border-top-color: transparent; border-bottom-color: var(--ui-border, var(--border, #2a2a38)); }
-.ui-tooltip--bottom:hover::after,
-.ui-tooltip--bottom:focus-within::after { transform: translateX(-50%) translateY(0); }
-
-/* left */
-.ui-tooltip--left::after  { bottom: auto; top: 50%; left: auto; right: calc(100% + 8px); transform: translateY(-50%) translateX(4px); }
-.ui-tooltip--left::before { bottom: auto; top: 50%; left: auto; right: calc(100% + 2px); transform: translateY(-50%); border-top-color: transparent; border-left-color: var(--ui-border, var(--border, #2a2a38)); }
-.ui-tooltip--left:hover::after,
-.ui-tooltip--left:focus-within::after  { transform: translateY(-50%) translateX(0); }
-
-/* right */
-.ui-tooltip--right::after  { bottom: auto; top: 50%; left: calc(100% + 8px); transform: translateY(-50%) translateX(-4px); }
-.ui-tooltip--right::before { bottom: auto; top: 50%; left: calc(100% + 2px); transform: translateY(-50%); border-top-color: transparent; border-right-color: var(--ui-border, var(--border, #2a2a38)); }
-.ui-tooltip--right:hover::after,
-.ui-tooltip--right:focus-within::after { transform: translateY(-50%) translateX(0); }
-
-/* ─── Modal ──────────────────────────────────────────────────────────────── */
-.ui-modal {
-  position:      fixed;
-  inset:         0;
-  margin:        auto;
-  width:         min(560px, calc(100vw - 2rem));
-  max-height:    min(80vh, calc(100dvh - 2rem));
-  padding:       0;
-  background:    var(--ui-surface, var(--surface, #13131e));
-  border:        1px solid var(--ui-border, var(--border, #2a2a38));
-  border-radius: var(--ui-radius, 12px);
-  overflow:      hidden;
-  box-shadow:    0 20px 60px rgba(0, 0, 0, .5);
-}
-
-.ui-modal--sm { width: min(400px, calc(100vw - 2rem)); }
-.ui-modal--lg { width: min(760px, calc(100vw - 2rem)); }
-.ui-modal--xl { width: min(1000px, calc(100vw - 2rem)); }
-
-.ui-modal::backdrop {
-  background:     rgba(0, 0, 0, .6);
-  backdrop-filter: blur(2px);
-}
-
-.ui-modal-inner {
-  display:        flex;
-  flex-direction: column;
-  max-height:     inherit;
-  margin:         0;
-  border:         none;
-  padding:        0;
-  background:     transparent;
-}
-
-.ui-modal-header {
-  display:       flex;
-  align-items:   center;
-  gap:           1rem;
-  padding:       1.25rem 1.5rem;
-  border-bottom: 1px solid var(--ui-border, var(--border, #2a2a38));
-  flex-shrink:   0;
-}
-
-.ui-modal-title {
-  flex:        1;
-  font-size:   1.1rem;
-  font-weight: 700;
-  color:       var(--ui-text, var(--text, #e2e2ea));
-  margin:      0;
-}
-
-.ui-modal-close {
-  display:         flex;
-  align-items:     center;
-  justify-content: center;
-  width:           32px;
-  height:          32px;
-  padding:         0;
-  background:      transparent;
-  border:          none;
-  border-radius:   6px;
-  color:           var(--ui-muted, var(--muted, #9090a0));
-  cursor:          pointer;
-  transition:      color .15s, background .15s;
-  flex-shrink:     0;
-}
-.ui-modal-close:hover {
-  color:      var(--ui-text, var(--text, #e2e2ea));
-  background: var(--ui-surface-2, var(--surface-2, #1a1a26));
-}
-
-.ui-modal-body {
-  flex:       1;
-  overflow-y: auto;
-  padding:    1.5rem;
-  color:      var(--ui-text, var(--text, #e2e2ea));
-}
-
-.ui-modal-footer {
-  display:         flex;
-  align-items:     center;
-  justify-content: flex-end;
-  gap:             .75rem;
-  padding:         1rem 1.5rem;
-  border-top:      1px solid var(--ui-border, var(--border, #2a2a38));
-  flex-shrink:     0;
-}
-
-/* ─── Nav ────────────────────────────────────────────────────────────────── */
-.ui-nav {
-  position:      relative;
-  background:    var(--ui-bg, var(--bg, #0d0d10));
-  border-bottom: 1px solid var(--ui-border, var(--border, #222228));
-  padding-inline: 1.5rem;
-}
-
-.ui-nav--sticky {
-  position:           sticky;
-  top:                0;
-  z-index:            100;
-  backdrop-filter:    blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  background:         var(--ui-nav-sticky-bg, rgba(13, 13, 16, .85));
-}
-
-.ui-nav-inner {
-  max-width: 1100px;
-  margin:    0 auto;
-  padding:   .875rem 0;
-  display:   flex;
-  align-items: center;
-  gap:       2rem;
-}
-
-.ui-nav-logo {
-  font-size:       1rem;
-  font-weight:     700;
-  color:           var(--ui-text, var(--text, #e2e2ea));
-  text-decoration: none;
-  display:         flex;
-  align-items:     center;
-  gap:             .5rem;
-  flex-shrink:     0;
-}
-.ui-nav-logo:hover { color: var(--ui-accent, var(--accent, #9b8dff)); }
-
-.ui-nav-links { display: flex; gap: 1.5rem; align-items: center; flex: 1; }
-.ui-nav-utility { flex: 0; margin-left: auto; }
-
-.ui-nav-link {
-  font-size:       .875rem;
-  color:           var(--ui-muted, var(--muted, #9090a0));
-  text-decoration: none;
-  transition:      color .15s;
-  min-height:      44px;
-  display:         flex;
-  align-items:     center;
-}
-.ui-nav-link:hover { color: var(--ui-text, var(--text, #e2e2ea)); }
-
-.ui-nav-action { margin-left: auto; }
-
-.ui-nav--burger-left .ui-nav-burger { order: -1; margin-left: 0; margin-right: auto; }
-
-.ui-nav-burger {
-  display:         none;
-  margin-left:     auto;
-  padding:         .35rem;
-  background:      none;
-  border:          none;
-  color:           var(--ui-text, var(--text, #e2e2ea));
-  cursor:          pointer;
-  align-items:     center;
-  justify-content: center;
-  border-radius:   var(--ui-radius-sm, 6px);
-  transition:      background .15s;
-}
-.ui-nav-burger:hover { background: var(--ui-surface, var(--surface, #111116)); }
-.ui-nav-burger-close { display: none; }
-.ui-nav--open .ui-nav-burger-open  { display: none; }
-.ui-nav--open .ui-nav-burger-close { display: block; }
-
-.ui-nav-mobile {
-  display:       none;
-  position:      absolute;
-  top:           100%;
-  left:          0;
-  right:         0;
-  z-index:       99;
-  background:    var(--ui-bg, var(--bg, #0d0d10));
-  border-bottom: 1px solid var(--ui-border, var(--border, #222228));
-  padding:       1rem 1.5rem;
-  flex-direction: column;
-  gap:           .25rem;
-}
-.ui-nav--open .ui-nav-mobile { display: flex; }
-
-.ui-nav-mobile nav {
-  display:        flex;
-  flex-direction: column;
-}
-.ui-nav-mobile .ui-nav-link {
-  padding: .6rem 0;
-  border-bottom: 1px solid var(--ui-border, var(--border, #222228));
-}
-.ui-nav-mobile .ui-nav-link:last-child { border-bottom: none; }
-.ui-nav-mobile-action { padding-top: .75rem; }
-.ui-nav-mobile-section {
-  font-size:      .7rem;
-  font-weight:    600;
-  text-transform: uppercase;
-  letter-spacing: .08em;
-  color:          var(--ui-muted, var(--muted, #6b6b80));
-  margin:         .75rem 0 .25rem;
-  padding:        0;
-}
-
-/* ─── Mega nav ───────────────────────────────────────────────────────────── */
-.ui-nav-mega-wrap { position: relative; }
-
-.ui-nav-mega-trigger {
-  background: none;
-  border: none;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: .3rem;
-  padding: 0;
-  font: inherit;
-  font-size: .875rem;
-}
-
-.ui-nav-mega-chevron { transition: transform .2s ease; flex-shrink: 0; }
-.ui-nav-mega-wrap--open .ui-nav-mega-chevron { transform: rotate(180deg); }
-
-.ui-nav-mega-panel {
-  position: absolute;
-  top: calc(100% + .875rem);
-  left: 50%;
-  transform: translateX(-50%);
-  background: var(--ui-bg, var(--bg, #0d0d10));
-  border: 1px solid var(--ui-border, var(--border, #232329));
-  border-radius: var(--ui-radius, 8px);
-  box-shadow: 0 8px 40px rgba(0,0,0,.35);
-  padding: 1.5rem;
-  z-index: 200;
-  min-width: 360px;
-}
-.ui-nav-mega-panel[hidden] { display: none !important; }
-
-.ui-nav-mega-inner { display: flex; gap: 2rem; }
-
-.ui-nav-mega-col { flex: 1; min-width: 140px; }
-
-.ui-nav-mega-heading {
-  font-size: .7rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: .08em;
-  color: var(--ui-muted, var(--muted, #6b6b80));
-  margin: 0 0 .5rem;
-  padding: 0 .5rem;
-}
-
-.ui-nav-mega-item {
-  display: flex;
-  flex-direction: column;
-  gap: .15rem;
-  padding: .5rem;
-  border-radius: calc(var(--ui-radius, 8px) * .65);
-  transition: background .15s;
-}
-.ui-nav-mega-item:hover { background: var(--ui-surface, var(--surface, #111116)); }
-.ui-nav-mega-item-label {
-  font-size: .875rem;
-  font-weight: 500;
-  color: var(--ui-text, var(--text, #e2e2ea));
-  text-decoration: none;
-}
-.ui-nav-mega-item-label:hover { color: var(--ui-accent, var(--accent, #9b8dff)); }
-.ui-nav-mega-item-desc  { font-size: .75rem; color: var(--ui-muted, var(--muted, #6b6b80)); }
-
-[data-theme="light"] .ui-nav-mega-panel { box-shadow: 0 8px 40px rgba(0,0,0,.12); }
-
-/* ─── App Badge ──────────────────────────────────────────────────────────── */
-.ui-app-badge {
-  display:         inline-flex;
-  align-items:     center;
-  gap:             .625rem;
-  background:      var(--ui-text, var(--text, #e2e2ea));
-  color:           var(--ui-bg, var(--bg, #0d0d10));
-  border-radius:   10px;
-  padding:         .625rem 1.25rem;
-  text-decoration: none;
-  transition:      opacity .15s;
-  min-width:       148px;
-}
-.ui-app-badge:hover { opacity: .85; }
-
-.ui-app-badge-text  { display: flex; flex-direction: column; gap: .05rem; }
-.ui-app-badge-line1 { font-size: .65rem; font-weight: 400; line-height: 1; }
-.ui-app-badge-line2 { font-size: .95rem; font-weight: 700; line-height: 1; }
-
-/* ─── Mobile ─────────────────────────────────────────────────────────────── */
-@media (max-width: 640px) {
-  .ui-btn--lg {
-    height:    48px;
-    padding:   0 1.25rem;
-    font-size: .95rem;
-  }
-
-  .ui-stat-value { font-size: 1.6rem; }
-
-  /* Full-width buttons in narrow containers */
-  .ui-btn--full { font-size: .9rem; }
-
-  /* Layout */
-  .ui-section     { padding-top: 3rem; padding-bottom: 3rem; }
-  .ui-section--sm { padding-top: 2rem; padding-bottom: 2rem; }
-  .ui-section--lg { padding-top: 4rem; padding-bottom: 4rem; }
-
-  .ui-grid--cols-2,
-  .ui-grid--cols-3,
-  .ui-grid--cols-4 { grid-template-columns: 1fr; }
-
-  .ui-media { grid-template-columns: 1fr; }
-  .ui-media--reverse { direction: ltr; }
-
-  .ui-hero { padding: 3rem 1.25rem; }
-  .ui-hero-title { font-size: 2rem; }
-  .ui-hero-subtitle { font-size: 1rem; }
-  .ui-hero--split .ui-hero-inner { grid-template-columns: 1fr; }
-  .ui-hero--media-left .ui-hero-media { order: 0; }
-
-  .ui-nav-links  { display: none; }
-  .ui-nav-burger { display: flex; }
-  .ui-nav-inner  { gap: .75rem; }
-}
-
-/* ─── Utilities ──────────────────────────────────────────────────────────────
-   Single-purpose helpers for spacing, typography, and layout.
-   Use these in page HTML instead of writing custom CSS for common patterns.
-   Prefix: u-  (distinct from component classes which use ui-)              */
-
-/* Screen-reader only — visually hidden but accessible to assistive tech */
-/* u-visually-hidden is an alias — use either */
-.ui-sr-only,
-.u-visually-hidden {
-  position: absolute;
-  width: 1px; height: 1px;
-  padding: 0; margin: -1px;
-  overflow: hidden;
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* Spacing scale: 1=4px 2=8px 3=12px 4=16px 5=20px 6=24px 8=32px 10=40px 12=48px 16=64px */
-
-/* Margin top */
-.u-mt-0  { margin-top: 0; }
-.u-mt-1  { margin-top: .25rem; }
-.u-mt-2  { margin-top: .5rem; }
-.u-mt-3  { margin-top: .75rem; }
-.u-mt-4  { margin-top: 1rem; }
-.u-mt-5  { margin-top: 1.25rem; }
-.u-mt-6  { margin-top: 1.5rem; }
-.u-mt-8  { margin-top: 2rem; }
-.u-mt-10 { margin-top: 2.5rem; }
-.u-mt-12 { margin-top: 3rem; }
-.u-mt-16 { margin-top: 4rem; }
-
-/* Margin bottom */
-.u-mb-0  { margin-bottom: 0; }
-.u-mb-1  { margin-bottom: .25rem; }
-.u-mb-2  { margin-bottom: .5rem; }
-.u-mb-3  { margin-bottom: .75rem; }
-.u-mb-4  { margin-bottom: 1rem; }
-.u-mb-5  { margin-bottom: 1.25rem; }
-.u-mb-6  { margin-bottom: 1.5rem; }
-.u-mb-8  { margin-bottom: 2rem; }
-.u-mb-10 { margin-bottom: 2.5rem; }
-.u-mb-12 { margin-bottom: 3rem; }
-.u-mb-16 { margin-bottom: 4rem; }
-
-/* Margin left / right / auto */
-.u-ml-auto { margin-left: auto; }
-.u-mr-auto { margin-right: auto; }
-.u-mx-auto { margin-left: auto; margin-right: auto; }
-
-/* Padding */
-.u-p-0  { padding: 0; }
-.u-p-1  { padding: .25rem; }
-.u-p-2  { padding: .5rem; }
-.u-p-3  { padding: .75rem; }
-.u-p-4  { padding: 1rem; }
-.u-p-5  { padding: 1.25rem; }
-.u-p-6  { padding: 1.5rem; }
-.u-p-8  { padding: 2rem; }
-
-.u-px-0 { padding-left: 0;      padding-right: 0; }
-.u-px-2 { padding-left: .5rem;  padding-right: .5rem; }
-.u-px-3 { padding-left: .75rem; padding-right: .75rem; }
-.u-px-4 { padding-left: 1rem;   padding-right: 1rem; }
-.u-px-5 { padding-left: 1.25rem;padding-right: 1.25rem; }
-.u-px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
-.u-px-8 { padding-left: 2rem;   padding-right: 2rem; }
-
-.u-py-0 { padding-top: 0;      padding-bottom: 0; }
-.u-py-2 { padding-top: .5rem;  padding-bottom: .5rem; }
-.u-py-3 { padding-top: .75rem; padding-bottom: .75rem; }
-.u-py-4 { padding-top: 1rem;   padding-bottom: 1rem; }
-.u-py-5 { padding-top: 1.25rem;padding-bottom: 1.25rem; }
-.u-py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
-.u-py-8 { padding-top: 2rem;   padding-bottom: 2rem; }
-
-/* Typography — size */
-.u-text-xs   { font-size: .75rem;  line-height: 1.4; }
-.u-text-sm   { font-size: .875rem; line-height: 1.5; }
-.u-text-base { font-size: 1rem;    line-height: 1.6; }
-.u-text-lg   { font-size: 1.125rem;line-height: 1.5; }
-.u-text-xl   { font-size: 1.25rem; line-height: 1.4; }
-.u-text-2xl  { font-size: 1.5rem;  line-height: 1.3; }
-.u-text-3xl  { font-size: 1.875rem;line-height: 1.2; }
-.u-text-4xl  { font-size: 2.25rem; line-height: 1.15; }
-.u-text-5xl  { font-size: 3rem;    line-height: 1.1;  }
-.u-text-6xl  { font-size: 4rem;    line-height: 1.05; }
-.u-text-7xl  { font-size: 5rem;    line-height: 1;    }
-
-/* Typography — weight */
-.u-font-normal   { font-weight: 400; }
-.u-font-medium   { font-weight: 500; }
-.u-font-semibold { font-weight: 600; }
-.u-font-bold     { font-weight: 700; }
-
-/* Typography — alignment */
-.u-text-left    { text-align: left; }
-.u-text-center  { text-align: center; }
-.u-text-right   { text-align: right; }
-.u-text-balance { text-wrap: balance; }
-
-/* Typography — color (uses tokens so theme overrides apply) */
-.u-text-default { color: var(--ui-text); }
-.u-text-muted   { color: var(--ui-muted); }
-.u-text-accent  { color: var(--ui-accent); }
-.u-text-green   { color: var(--ui-green); }
-.u-text-red     { color: var(--ui-red); }
-.u-text-yellow  { color: var(--ui-yellow); }
-.u-text-blue    { color: var(--ui-blue); }
-
-/* Typography — line height */
-.u-leading-tight   { line-height: 1.25; }
-.u-leading-snug    { line-height: 1.375; }
-.u-leading-normal  { line-height: 1.5; }
-.u-leading-relaxed { line-height: 1.625; }
-.u-leading-loose   { line-height: 2; }
-
-/* Width */
-.u-w-full   { width: 100%; }
-.u-w-auto   { width: auto; }
-.u-max-w-xs { max-width: 320px; }
-.u-max-w-sm { max-width: 480px; }
-.u-max-w-md { max-width: 640px; }
-.u-max-w-lg { max-width: 800px; }
-.u-max-w-xl { max-width: 1024px; }
-.u-max-w-prose { max-width: 65ch; }
-
-/* Display */
-.u-block        { display: block; }
-.u-inline       { display: inline; }
-.u-inline-block { display: inline-block; }
-.u-hidden       { display: none; }
-
-/* Flexbox */
-.u-flex         { display: flex; }
-.u-flex-col     { display: flex; flex-direction: column; }
-.u-flex-wrap    { flex-wrap: wrap; }
-.u-flex-1       { flex: 1; }
-.u-shrink-0     { flex-shrink: 0; }
-
-.u-items-start    { align-items: flex-start; }
-.u-items-center   { align-items: center; }
-.u-items-end      { align-items: flex-end; }
-.u-items-stretch  { align-items: stretch; }
-
-.u-justify-start   { justify-content: flex-start; }
-.u-justify-center  { justify-content: center; }
-.u-justify-end     { justify-content: flex-end; }
-.u-justify-between { justify-content: space-between; }
-
-.u-gap-1 { gap: .25rem; }
-.u-gap-2 { gap: .5rem; }
-.u-gap-3 { gap: .75rem; }
-.u-gap-4 { gap: 1rem; }
-.u-gap-5 { gap: 1.25rem; }
-.u-gap-6 { gap: 1.5rem; }
-.u-gap-8 { gap: 2rem; }
-
-/* Border radius */
-.u-rounded    { border-radius: var(--ui-radius-sm); }
-.u-rounded-md { border-radius: var(--ui-radius); }
-.u-rounded-lg { border-radius: calc(var(--ui-radius) * 1.5); }
-.u-rounded-xl { border-radius: calc(var(--ui-radius) * 2); }
-.u-rounded-full { border-radius: 9999px; }
-
-/* Border */
-.u-border      { border: 1px solid var(--ui-border); }
-.u-border-t    { border-top: 1px solid var(--ui-border); }
-.u-border-b    { border-bottom: 1px solid var(--ui-border); }
-
-/* Background */
-.u-bg-surface  { background: var(--ui-surface); }
-.u-bg-surface2 { background: var(--ui-surface-2); }
-.u-bg-accent   { background: var(--ui-accent); }
-
-/* Overflow */
-.u-overflow-hidden { overflow: hidden; }
-.u-overflow-auto   { overflow: auto; }
-
-/* Position */
-.u-relative { position: relative; }
-.u-absolute { position: absolute; }
-
-/* Opacity */
-.u-opacity-50  { opacity: .5; }
-.u-opacity-75  { opacity: .75; }
-
-/* Numeric formatting */
-.u-tabular-nums { font-variant-numeric: tabular-nums; }
-
-/* ─── Section header ─────────────────────────────────────────────────────────
-   Optional heading block prepended to section() when eyebrow/title/subtitle
-   props are supplied. Sits above the content slot.                           */
-.ui-section-header                { width: 100%; max-width: 1100px; margin: 0 auto 2.5rem; padding-left: 1.5rem; padding-right: 1.5rem; }
-.ui-section-header--center        { text-align: center; }
-.ui-section-header--gap-none      { margin-bottom: 0; }
-.ui-section-header--gap-sm        { margin-bottom: 1.25rem; }
-.ui-section-header--gap-lg        { margin-bottom: 4rem; }
-
-.ui-section-eyebrow {
-  display:        block;
-  font-size:      .75rem;
-  font-weight:    600;
-  letter-spacing: .08em;
-  text-transform: uppercase;
-  color:          var(--ui-accent);
-  margin:         0 0 2rem;
-}
-
-.ui-section-title {
-  font-size:      2rem;
-  font-weight:    700;
-  line-height:    1.15;
-  letter-spacing: var(--ui-letter-spacing-display, -0.025em);
-  font-family:    var(--ui-font-display, var(--ui-font));
-  color:          var(--ui-text);
-  margin:         0 0 1.25rem;
-}
-
-.ui-section-subtitle {
-  font-size:  1rem;
-  color:      var(--ui-muted);
-  line-height: 1.65;
-  margin:     0;
-  max-width:  58ch;
-}
-
-.ui-section-header--center .ui-section-subtitle { margin-left: auto; margin-right: auto; }
-
-@media (max-width: 640px) {
-  .ui-section-title    { font-size: 1.5rem; }
-  .ui-section-header   { margin-bottom: 2rem; }
-}
-
-/* ─── CTA ────────────────────────────────────────────────────────────────────
-   Call-to-action block. Sits inside section() + container().                */
-.ui-cta        { text-align: center; }
-.ui-cta--left  { text-align: left; }
-
-.ui-cta-eyebrow {
-  display:        block;
-  font-size:      .75rem;
-  font-weight:    600;
-  letter-spacing: .08em;
-  text-transform: uppercase;
-  color:          var(--ui-accent);
-  margin:         0 0 .75rem;
-}
-
-.ui-cta-title {
-  font-size:   2.5rem;
-  font-weight: 700;
-  line-height: 1.1;
-  color:       var(--ui-text);
-  margin:      0 0 1rem;
-}
-
-.ui-cta-subtitle {
-  font-size:   1.05rem;
-  color:       var(--ui-muted);
-  line-height: 1.65;
-  max-width:   56ch;
-  margin:      0 auto 2rem;
-}
-
-.ui-cta--left .ui-cta-subtitle { margin-left: 0; }
-
-.ui-cta-actions {
-  display:         flex;
-  gap:             1rem;
-  flex-wrap:       wrap;
-  justify-content: center;
-}
-
-.ui-cta--left .ui-cta-actions { justify-content: flex-start; }
-
-@media (max-width: 640px) {
-  .ui-cta-title   { font-size: 1.75rem; }
-  .ui-cta-actions { flex-direction: column; align-items: stretch; }
-}
-
-/* ─── Code Window ────────────────────────────────────────────────────────────
-   macOS-style window chrome around a <pre><code> block.                     */
-.ui-code-window {
-  background:    var(--ui-surface-2);
-  border:        1px solid var(--ui-border);
-  border-radius: var(--ui-radius);
-  overflow:      hidden;
-}
-
-.ui-code-window-chrome {
-  display:         flex;
-  align-items:     center;
-  gap:             .4rem;
-  padding:         .6rem 1rem;
-  background:      var(--ui-surface);
-  border-bottom:   1px solid var(--ui-border);
-}
-
-.ui-code-window-dot {
-  width:         10px;
-  height:        10px;
-  border-radius: 50%;
-  flex-shrink:   0;
-}
-
-.ui-code-window-dot:nth-child(1) { background: #ff5f57; }
-.ui-code-window-dot:nth-child(2) { background: #febc2e; }
-.ui-code-window-dot:nth-child(3) { background: #28c840; }
-
-.ui-code-window-filename {
-  font-size:   .75rem;
-  font-family: var(--ui-mono);
-  color:       var(--ui-muted);
-  margin-left: .35rem;
-}
-
-.ui-code-window-lang {
-  font-size:   .7rem;
-  font-family: var(--ui-mono);
-  color:       var(--ui-muted);
-  margin-left: auto;
-}
-
-.ui-code-window-pre {
-  margin:      0;
-  padding:     1.25rem 1.5rem;
-  overflow-x:  auto;
-  font-family: var(--ui-mono);
-  font-size:   .85rem;
-  line-height: 1.7;
-  color:       var(--ui-text);
-  tab-size:    2;
-}
-
-.ui-code-window-code { font-family: inherit; }
-
-/* ─── Phone Frame ────────────────────────────────────────────────────────────
-   Realistic CSS mobile phone frame — body, dynamic island, side buttons,
-   home indicator. Drop any HTML into the content slot.                       */
-.ui-phone {
-  position: relative;
-  display: inline-flex;
-  width: 260px;
-  background: linear-gradient(160deg, #1e1e28 0%, #141418 100%);
-  border-radius: 3rem;
-  border: 1.5px solid rgba(255, 255, 255, 0.1);
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.8),
-    0 2px 0 1px rgba(255, 255, 255, 0.05) inset,
-    0 48px 96px rgba(0, 0, 0, 0.55),
-    0 12px 32px rgba(0, 0, 0, 0.4);
-  padding: 12px;
-}
-
-/* Side buttons */
-.ui-phone-btn {
-  position: absolute;
-  background: linear-gradient(90deg, #1a1a22 0%, #26262e 100%);
-  border-radius: 2px;
-}
-.ui-phone-btn--mute     { left: -3px; top: 88px;  width: 3px; height: 28px; }
-.ui-phone-btn--vol-up   { left: -3px; top: 128px; width: 3px; height: 48px; }
-.ui-phone-btn--vol-down { left: -3px; top: 186px; width: 3px; height: 48px; }
-.ui-phone-btn--power    { right: -3px; top: 140px; width: 3px; height: 64px; }
-
-/* Phone inner — holds screen + chrome */
-.ui-phone-inner {
-  width: 100%;
-  background: #000;
-  border-radius: 2.5rem;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Dynamic island */
-.ui-phone-island {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 32px;
-  background: #000;
-}
-.ui-phone-camera {
-  display: block;
-  width: 10px;
-  height: 10px;
-  background: radial-gradient(circle at 35% 35%, #2a2a3a, #0a0a0a);
-  border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
-}
-
-/* Screen */
-.ui-phone-screen {
-  flex: 1;
-  overflow: hidden;
-}
-
-/* Home indicator */
-.ui-phone-home {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 24px;
-  background: #000;
-}
-.ui-phone-home::after {
-  content: '';
-  display: block;
-  width: 80px;
-  height: 4px;
-  background: rgba(255, 255, 255, 0.25);
-  border-radius: 2px;
-}
-
-/* Hover tilt — enabled by .ui-phone--tilt */
-.ui-phone--tilt {
-  transform-style: preserve-3d;
-  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
-  will-change: transform;
-}
-.ui-phone--tilt:hover {
-  transform: perspective(900px) rotateY(-8deg) rotateX(3deg);
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.8),
-    0 2px 0 1px rgba(255, 255, 255, 0.07) inset,
-    8px 56px 120px rgba(0, 0, 0, 0.65),
-    4px 16px 40px rgba(0, 0, 0, 0.5);
-}
-
-/* ─── Footer ─────────────────────────────────────────────────────────────────
-   Site footer — logo, nav links, legal text. Stacks on mobile.              */
-.ui-footer {
-  padding:    3rem 1.5rem;
-  border-top: 1px solid var(--ui-border);
-}
-
-.ui-footer-inner {
-  max-width:   1200px;
-  margin:      0 auto;
-  display:     flex;
-  align-items: center;
-  gap:         2rem;
-  flex-wrap:   wrap;
-}
-
-.ui-footer-logo {
-  font-size:       1rem;
-  font-weight:     600;
-  color:           var(--ui-text);
-  text-decoration: none;
-  flex-shrink:     0;
-  transition:      color .15s;
-}
-
-.ui-footer-logo:hover  { color: var(--ui-accent); }
-.ui-footer-logo:focus-visible {
-  outline:        2px solid var(--ui-accent);
-  outline-offset: 2px;
-  border-radius:  2px;
-}
-
-.ui-footer-links {
-  display:   flex;
-  gap:       1.5rem;
-  flex-wrap: wrap;
-  flex:      1;
-}
-
-.ui-footer-link {
-  font-size:       .875rem;
-  color:           var(--ui-muted);
-  text-decoration: none;
-  transition:      color .15s;
-}
-
-.ui-footer-link:hover { color: var(--ui-text); }
-.ui-footer-link:focus-visible {
-  outline:        2px solid var(--ui-accent);
-  outline-offset: 2px;
-  border-radius:  2px;
-}
-
-.ui-footer-legal {
-  font-size: .8rem;
-  color:     var(--ui-muted);
-  margin:    0 0 0 auto;
-}
-
-@media (max-width: 640px) {
-  .ui-footer-inner  { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
-  .ui-footer-legal  { margin-left: 0; }
-  .ui-footer-links  { gap: 1rem; }
-}
-
-/* ─── Footer — Rich variant ─────────────────────────────────────────────── */
-.ui-footer--rich {
-  padding:    0;
-  border-top: none;
-}
-
-.ui-footer--rich .ui-footer-top {
-  display:        flex;
-  justify-content: space-between;
-  align-items:    flex-start;
-  gap:            2rem;
-  padding:        3rem 2rem 2rem;
-  flex-wrap:      wrap;
-}
-
-.ui-footer--rich .ui-footer-logo {
-  font-size:  1.5rem;
-}
-
-.ui-footer--rich .ui-footer-subscribe {
-  max-width: 480px;
-  flex:      1;
-}
-
-.ui-footer-columns {
-  display:        grid;
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  gap:            2rem;
-  padding:        2rem 2rem;
-  border-top:     1px solid currentcolor;
-  opacity-on-border: 0.15;
-}
-
-.ui-footer-col-title {
-  font-size:      0.6875rem;
-  font-weight:    600;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  margin:         0 0 1rem;
-  color:          var(--ui-muted, currentcolor);
-}
-
-.ui-footer-col-links {
-  list-style: none;
-  margin:     0;
-  padding:    0;
-  display:    flex;
-  flex-direction: column;
-  gap:        0.6rem;
-}
-
-.ui-footer-col-links a {
-  display:         block;
-  padding:         0.3rem 0;
-  min-height:      24px;
-  font-size:       0.9375rem;
-  color:           var(--ui-muted, inherit);
-  text-decoration: none;
-  transition:      color 0.15s;
-}
-.ui-footer-col-links a:hover { color: var(--ui-text, currentcolor); }
-
-.ui-footer-wordmark {
-  padding:         1rem 1.5rem 0;
-  overflow:        hidden;
-}
-.ui-footer-wordmark::after {
-  content:         attr(data-wordmark);
-  display:         block;
-  font-size:       clamp(4rem, 16vw, 14rem);
-  font-weight:     700;
-  letter-spacing:  -0.03em;
-  line-height:     0.9;
-  word-break:      break-all;
-}
-
-.ui-footer-legal-row {
-  display:     flex;
-  gap:         1.5rem;
-  align-items: center;
-  flex-wrap:   wrap;
-  padding:     1.5rem 2rem;
-  font-size:   0.8125rem;
-  color:       var(--ui-muted, currentcolor);
-  border-top:  1px solid var(--ui-border, currentcolor);
-}
-
-.ui-footer-legal-row a {
-  color:           inherit;
-  text-decoration: none;
-}
-.ui-footer-legal-row a:hover { text-decoration: underline; }
-
-@media (max-width: 640px) {
-  .ui-footer--rich .ui-footer-top { flex-direction: column; }
-  .ui-footer-columns { grid-template-columns: repeat(2, 1fr); }
-}
-
-/* ─── Icon wrapper ───────────────────────────────────────────────────────────
-   Wraps any icon in a tinted background shape.
-   bg: 'circle' → border-radius: 50%  |  bg: 'square' → var(--ui-radius)       */
-
-.ui-icon-wrap {
-  display:         inline-flex;
-  align-items:     center;
-  justify-content: center;
-  padding:         .55em;
-  flex-shrink:     0;
-  line-height:     1;
-}
-
-.ui-icon-wrap--circle { border-radius: 50%; }
-.ui-icon-wrap--square { border-radius: var(--ui-radius); }
-
-.ui-icon-wrap--accent  { background: var(--ui-accent-dim);  color: var(--ui-accent);  }
-.ui-icon-wrap--success { background: var(--ui-green-dim);   color: var(--ui-green);   }
-.ui-icon-wrap--warning { background: var(--ui-yellow-dim);  color: var(--ui-yellow);  }
-.ui-icon-wrap--error   { background: var(--ui-red-dim);     color: var(--ui-red);     }
-.ui-icon-wrap--muted   { background: var(--ui-surface-2);   color: var(--ui-muted);   }
-
-/* ─── Switch ─────────────────────────────────────────────────────────────── */
-.ui-switch-input {
-  position: absolute;
-  width:    1px;
-  height:   1px;
-  padding:  0;
-  margin:   -1px;
-  overflow: hidden;
-  clip:     rect(0,0,0,0);
-  border:   0;
-}
-
-.ui-switch-label {
-  display:     inline-flex;
-  align-items: center;
-  gap:         .65rem;
-  cursor:      pointer;
-  user-select: none;
-}
-
-.ui-switch-label--disabled {
-  opacity: .5;
-  cursor:  not-allowed;
-}
-
-.ui-switch-track {
-  position:       relative;
-  display:        inline-flex;
-  align-items:    center;
-  width:          3rem;
-  height:         1.75rem;
-  border-radius:  999px;
-  background:     var(--ui-border);
-  transition:     background .2s;
-  flex-shrink:    0;
-}
-
-.ui-switch-thumb {
-  position:      absolute;
-  left:          .2rem;
-  width:         1.35rem;
-  height:        1.35rem;
-  border-radius: 50%;
-  background:    #fff;
-  box-shadow:    0 1px 3px rgba(0,0,0,.3);
-  transition:    transform .2s cubic-bezier(.34,1.56,.64,1), background .2s;
-}
-
-.ui-switch-input:checked + .ui-switch-track {
-  background: var(--ui-accent);
-}
-
-.ui-switch-input:checked + .ui-switch-track .ui-switch-thumb {
-  transform: translateX(1.25rem);
-}
-
-.ui-switch-input:focus-visible + .ui-switch-track {
-  outline:        2px solid var(--ui-accent);
-  outline-offset: 2px;
-}
-
-.ui-switch-text {
-  font-family: var(--ui-font);
-  font-size:   .9rem;
-  color:       var(--ui-text);
-  line-height: 1.4;
-}
-
-/* ─── Radio ──────────────────────────────────────────────────────────────── */
-.ui-radio-group {
-  border:        1px solid var(--ui-border);
-  border-radius: var(--ui-radius);
-  padding:       0;
-  margin:        0;
-}
-
-.ui-radio-group-body {
-  display:        flex;
-  flex-direction: column;
-  gap:            var(--radio-gap, .75rem);
-  padding:        1.25rem;
-}
-
-/* ─── Checkbox ───────────────────────────────────────────────────────────── */
-.ui-checkbox {
-  display:     inline-flex;
-  align-items: flex-start;
-  gap:         .6rem;
-  cursor:      pointer;
-  user-select: none;
-}
-
-.ui-checkbox--disabled {
-  opacity: .5;
-  cursor:  not-allowed;
-}
-
-.ui-checkbox-input {
-  position: absolute;
-  width:    1px;
-  height:   1px;
-  padding:  0;
-  margin:   -1px;
-  overflow: hidden;
-  clip:     rect(0,0,0,0);
-  border:   0;
-}
-
-.ui-checkbox-box {
-  position:        relative;
-  display:         inline-flex;
-  align-items:     center;
-  justify-content: center;
-  width:           1.125rem;
-  height:          1.125rem;
-  border-radius:   .25rem;
-  border:          2px solid var(--ui-border);
-  background:      var(--ui-surface);
-  flex-shrink:     0;
-  margin-top:      .125rem;
-  transition:      border-color .15s, background .15s;
-}
-
-.ui-checkbox-box::after {
-  content:          '';
-  position:         absolute;
-  width:            .3rem;
-  height:           .55rem;
-  border-right:     2px solid var(--ui-bg);
-  border-bottom:    2px solid var(--ui-bg);
-  transform:        rotate(45deg) scale(0);
-  transform-origin: center;
-  margin-top:       -.1rem;
-  opacity:          0;
-  transition:       opacity .1s, transform .15s cubic-bezier(.34, 1.56, .64, 1);
-}
-
-.ui-checkbox-input:checked + .ui-checkbox-box {
-  border-color: var(--ui-accent);
-  background:   var(--ui-accent);
-}
-
-.ui-checkbox-input:checked + .ui-checkbox-box::after {
-  opacity:   1;
-  transform: rotate(45deg) scale(1);
-}
-
-.ui-checkbox-input:focus-visible + .ui-checkbox-box {
-  outline:        2px solid var(--ui-accent);
-  outline-offset: 2px;
-}
-
-.ui-checkbox--error .ui-checkbox-box {
-  border-color: var(--ui-red);
-}
-
-.ui-checkbox-label {
-  font-family: var(--ui-font);
-  font-size:   .9rem;
-  color:       var(--ui-text);
-  line-height: 1.4;
-}
-
-/* ─── Radio ──────────────────────────────────────────────────────────────── */
-.ui-radio {
-  display:     inline-flex;
-  align-items: center;
-  gap:         .6rem;
-  cursor:      pointer;
-  user-select: none;
-}
-
-.ui-radio--disabled {
-  opacity: .5;
-  cursor:  not-allowed;
-}
-
-.ui-radio-input {
-  position: absolute;
-  width:    1px;
-  height:   1px;
-  padding:  0;
-  margin:   -1px;
-  overflow: hidden;
-  clip:     rect(0,0,0,0);
-  border:   0;
-}
-
-.ui-radio-dot {
-  position:      relative;
-  display:       inline-flex;
-  align-items:   center;
-  justify-content: center;
-  width:         1.25rem;
-  height:        1.25rem;
-  border-radius: 50%;
-  border:        2px solid var(--ui-border);
-  background:    var(--ui-surface);
-  flex-shrink:   0;
-  transition:    border-color .15s, background .15s;
-}
-
-.ui-radio-dot::after {
-  content:       '';
-  width:         .5rem;
-  height:        .5rem;
-  border-radius: 50%;
-  background:    var(--ui-bg);
-  opacity:       0;
-  transform:     scale(0);
-  transition:    opacity .15s, transform .2s cubic-bezier(.34,1.56,.64,1);
-}
-
-.ui-radio-input:checked + .ui-radio-dot {
-  border-color: var(--ui-accent);
-  background:   var(--ui-accent);
-}
-
-.ui-radio-input:checked + .ui-radio-dot::after {
-  opacity:   1;
-  transform: scale(1);
-}
-
-.ui-radio-input:focus-visible + .ui-radio-dot {
-  outline:        2px solid var(--ui-accent);
-  outline-offset: 2px;
-}
-
-.ui-radio-label {
-  font-family: var(--ui-font);
-  font-size:   .9rem;
-  color:       var(--ui-text);
-  line-height: 1.4;
-}
-
-.ui-radio-group--error .ui-radio-dot {
-  border-color: var(--ui-red);
-}
-
-/* ─── Rating ─────────────────────────────────────────────────────────────── */
-.ui-rating {
-  display:     inline-flex;
-  align-items: center;
-  gap:         .1em;
-  font-size:   var(--rating-size, 1.5rem);
-  color:       var(--ui-muted);
-  line-height: 1;
-}
-
-/* Read-only stars */
-.ui-rating-star--filled,
-.ui-rating-star--half { color: var(--ui-yellow); }
-
-/* Interactive stars container — row-reverse makes high→low DOM order appear as 1…max */
-.ui-rating-stars {
-  display:        inline-flex;
-  flex-direction: row-reverse;
-  gap:            .1em;
-  font-size:      var(--rating-size, 1.5rem);
-  line-height:    1;
-}
-
-/* Each input is nested inside its label — hidden but in the tab order */
-.ui-rating-input {
-  position: absolute;
-  width:    1px;
-  height:   1px;
-  padding:  0;
-  margin:   -1px;
-  overflow: hidden;
-  clip:     rect(0,0,0,0);
-  border:   0;
-}
-
-/* Star labels — only flex items, no invisible elements between them */
-.ui-rating-stars .ui-rating-star {
-  color:       var(--ui-muted);
-  cursor:      pointer;
-  transition:  color .1s;
-  user-select: none;
-}
-
-/* Checked: colour the label containing the checked input + all DOM-subsequent
-   labels (= visually lower-numbered stars due to row-reverse) */
-.ui-rating-stars .ui-rating-star:has(input:checked),
-.ui-rating-stars .ui-rating-star:has(input:checked) ~ .ui-rating-star {
-  color: var(--ui-yellow);
-}
-
-/* Hover: reset everything, then re-highlight up to the hovered star */
-.ui-rating-stars:hover .ui-rating-star { color: var(--ui-muted); }
-.ui-rating-stars .ui-rating-star:hover,
-.ui-rating-stars .ui-rating-star:hover ~ .ui-rating-star { color: var(--ui-yellow); }
-
-/* Focus ring on the label when its input is keyboard-focused */
-.ui-rating-star:focus-within {
-  outline:        2px solid var(--ui-accent);
-  outline-offset: 2px;
-  border-radius:  2px;
-}
-
-/* Disabled */
-fieldset[disabled] .ui-rating-star {
-  cursor:  not-allowed;
-  opacity: .5;
-}
-fieldset[disabled] .ui-rating-stars:hover .ui-rating-star { color: revert; }
-fieldset[disabled] .ui-rating-stars .ui-rating-star:hover,
-fieldset[disabled] .ui-rating-stars .ui-rating-star:hover ~ .ui-rating-star { color: revert; }
-
-/* ─── Spinner ────────────────────────────────────────────────────────────── */
-@keyframes ui-spin {
-  to { transform: rotate(360deg); }
-}
-
-.ui-spinner {
-  display:       inline-block;
-  width:         var(--spinner-size, 1.5rem);
-  height:        var(--spinner-size, 1.5rem);
-  border:        2px solid color-mix(in srgb, var(--spinner-color, var(--ui-accent)) 20%, transparent);
-  border-top-color: var(--spinner-color, var(--ui-accent));
-  border-radius: 50%;
-  animation:     ui-spin .7s linear infinite;
-  flex-shrink:   0;
-}
-
-/* ─── Progress ───────────────────────────────────────────────────────────── */
-.ui-progress { width: 100%; }
-
-.ui-progress-header {
-  display:         flex;
-  justify-content: space-between;
-  align-items:     baseline;
-  margin-bottom:   .4rem;
-  gap:             1rem;
-}
-
-.ui-progress-label {
-  font-size:   .8rem;
-  font-weight: 600;
-  color:       var(--ui-text);
-}
-
-.ui-progress-value {
-  font-size:  .8rem;
-  color:      var(--ui-muted);
-  font-variant-numeric: tabular-nums;
-}
-
-.ui-progress-track {
-  width:         100%;
-  height:        var(--progress-height, .5rem);
-  background:    var(--ui-border);
-  border-radius: 999px;
-  overflow:      hidden;
-}
-
-.ui-progress-fill {
-  height:        100%;
-  border-radius: 999px;
-  transition:    width .3s ease;
-}
-
-/* Variants */
-.ui-progress--accent  .ui-progress-fill { background: var(--ui-accent);  }
-.ui-progress--success .ui-progress-fill { background: var(--ui-green);   }
-.ui-progress--warning .ui-progress-fill { background: var(--ui-yellow);  }
-.ui-progress--error   .ui-progress-fill { background: var(--ui-red);     }
-
-/* Indeterminate — animates a fill bar back and forth */
-@keyframes ui-progress-indeterminate {
-  0%   { transform: translateX(-100%) scaleX(.4); }
-  50%  { transform: translateX( 60%)  scaleX(.6); }
-  100% { transform: translateX( 200%) scaleX(.4); }
-}
-
-.ui-progress--indeterminate .ui-progress-fill {
-  width:            50%;
-  animation:        ui-progress-indeterminate 1.4s ease infinite;
-  transform-origin: left center;
-}
-
-/* ─── Slider ─────────────────────────────────────────────────────────────── */
-.ui-slider {
-  width: 100%;
-  height: var(--ui-touch-min);
-  -webkit-appearance: none;
-  appearance: none;
-  background: transparent;
-  cursor: pointer;
-  padding: 0;
-  margin: 0;
-}
-.ui-slider::-webkit-slider-runnable-track {
-  height: 4px;
-  border-radius: 999px;
-  background: linear-gradient(
-    to right,
-    var(--ui-accent) 0% var(--slider-fill, 50%),
-    var(--ui-border) var(--slider-fill, 50%) 100%
-  );
-}
-.ui-slider::-moz-range-track {
-  height: 4px;
-  border-radius: 999px;
-  background: var(--ui-border);
-}
-.ui-slider::-moz-range-progress {
-  height: 4px;
-  border-radius: 999px;
-  background: var(--ui-accent);
-}
-.ui-slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: var(--ui-accent);
-  margin-top: -8px;
-  box-shadow: 0 1px 4px rgba(0,0,0,.3);
-  transition: transform .15s;
-}
-.ui-slider::-moz-range-thumb {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: var(--ui-accent);
-  border: none;
-  box-shadow: 0 1px 4px rgba(0,0,0,.3);
-}
-.ui-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
-.ui-slider:focus-visible { outline: none; }
-.ui-slider:focus-visible::-webkit-slider-thumb {
-  outline: 2px solid var(--ui-accent);
-  outline-offset: 3px;
-}
-.ui-slider:disabled { opacity: .5; cursor: not-allowed; }
-
-.ui-label--row {
-  display:         flex;
-  justify-content: space-between;
-  align-items:     baseline;
-}
-.ui-slider-output {
-  font-size:            .8125rem;
-  color:                var(--ui-muted);
-  font-variant-numeric: tabular-nums;
-  min-width:            3ch;
-  text-align:           right;
-}
-
-/* ─── File Upload ────────────────────────────────────────────────────────── */
-
-.ui-upload {
-  position:        relative;
-  display:         flex;
-  align-items:     center;
-  justify-content: center;
-  padding:         2rem 1.5rem;
-  background:      var(--ui-surface);
-  border:          1.5px dashed var(--ui-border);
-  border-radius:   var(--ui-radius);
-  cursor:          pointer;
-  transition:      border-color .15s, background .15s;
-  outline:         none;
-  user-select:     none;
-}
-
-.ui-upload:hover:not(.ui-upload--disabled),
-.ui-upload:focus-visible {
-  border-color: var(--ui-accent);
-  background:   color-mix(in srgb, var(--ui-accent) 5%, var(--ui-surface));
-}
-
-.ui-upload--active {
-  border-color: var(--ui-accent);
-  background:   color-mix(in srgb, var(--ui-accent) 8%, var(--ui-surface));
-}
-
-.ui-upload--error    { border-color: var(--ui-red); }
-.ui-upload--selected { border-color: var(--ui-accent); }
-.ui-upload--selected .ui-upload-text { color: var(--ui-text); font-weight: 500; }
-
-.ui-upload--disabled {
-  opacity: .5;
-  cursor:  not-allowed;
-}
-
-.ui-upload-body {
-  display:         flex;
-  flex-direction:  column;
-  align-items:     center;
-  gap:             .6rem;
-  pointer-events:  none;
-}
-
-.ui-upload-icon { color: var(--ui-muted); display: block; }
-
-.ui-upload:hover:not(.ui-upload--disabled) .ui-upload-icon,
-.ui-upload--active .ui-upload-icon { color: var(--ui-accent); }
-
-.ui-upload-text {
-  font-size:   .875rem;
-  color:       var(--ui-muted);
-  text-align:  center;
-  line-height: 1.5;
-}
-
-.ui-upload-browse {
-  color:                 var(--ui-accent);
-  text-decoration:       underline;
-  text-underline-offset: 2px;
-}
-
-.ui-upload-input {
-  display: none;
-}
-
-/* ─── Segmented ─────────────────────────────────────────────────────────── */
-.ui-segmented {
-  display:       inline-flex;
-  background:    var(--ui-surface-2);
-  border-radius: var(--ui-radius);
-  padding:       3px;
-  gap:           2px;
-}
-.ui-segmented-input {
-  position: absolute;
-  width: 1px; height: 1px;
-  padding: 0; margin: -1px;
-  overflow: hidden; clip: rect(0,0,0,0); border: 0;
-}
-.ui-segmented-label {
-  display:       inline-flex;
-  align-items:   center;
-  padding:       .4rem .9rem;
-  border-radius: calc(var(--ui-radius) - 2px);
-  font-size:     .85rem;
-  font-weight:   500;
-  color:         var(--ui-muted);
-  cursor:        pointer;
-  user-select:   none;
-  white-space:   nowrap;
-  transition:    background .15s, color .15s, box-shadow .15s;
-}
-.ui-segmented--sm .ui-segmented-label { font-size: .75rem; padding: .25rem .65rem; }
-.ui-segmented--lg .ui-segmented-label { font-size: .95rem; padding: .55rem 1.1rem; }
-.ui-segmented-input:checked + .ui-segmented-label {
-  background:  var(--ui-surface);
-  color:       var(--ui-text);
-  box-shadow:  0 1px 3px rgba(0,0,0,.25);
-}
-.ui-segmented-input:focus-visible + .ui-segmented-label {
-  outline:        2px solid var(--ui-accent);
-  outline-offset: 1px;
-}
-
-/* ─── Breadcrumbs ────────────────────────────────────────────────────────── */
-.ui-breadcrumbs-list {
-  display:     flex;
-  flex-wrap:   wrap;
-  align-items: center;
-  gap:         .25rem;
-  list-style:  none;
-  padding:     0;
-  margin:      0;
-  font-size:   .85rem;
-}
-.ui-breadcrumbs-item {
-  display:     flex;
-  align-items: center;
-  gap:         .25rem;
-}
-.ui-breadcrumbs-link {
-  color:           var(--ui-muted);
-  text-decoration: none;
-  transition:      color .15s;
-}
-.ui-breadcrumbs-link:hover { color: var(--ui-text); }
-.ui-breadcrumbs-current    { color: var(--ui-text); }
-.ui-breadcrumbs-sep        { color: var(--ui-border); user-select: none; }
-
-/* ─── Stepper ────────────────────────────────────────────────────────────── */
-.ui-stepper {
-  display:     flex;
-  align-items: flex-start;
-  width:       100%;
-}
-.ui-stepper-item {
-  flex:            1;
-  display:         flex;
-  flex-direction:  column;
-  align-items:     center;
-  position:        relative;
-}
-.ui-stepper-item:not(:last-child)::after {
-  content:  '';
-  position: absolute;
-  top:      13px;
-  left:     50%;
-  width:    100%;
-  height:   2px;
-  background: var(--ui-border);
-}
-.ui-stepper-item--complete:not(:last-child)::after { background: var(--ui-accent); }
-.ui-stepper-dot {
-  position:        relative;
-  z-index:         1;
-  width:           28px;
-  height:          28px;
-  border-radius:   50%;
-  display:         flex;
-  align-items:     center;
-  justify-content: center;
-  font-size:       .75rem;
-  font-weight:     700;
-  background:      var(--ui-surface-2);
-  border:          2px solid var(--ui-border);
-  color:           var(--ui-muted);
-  transition:      background .2s, border-color .2s, color .2s;
-}
-.ui-stepper-item--complete .ui-stepper-dot {
-  background:   var(--ui-accent);
-  border-color: var(--ui-accent);
-  color:        var(--ui-bg);
-}
-.ui-stepper-item--active .ui-stepper-dot {
-  border-color: var(--ui-accent);
-  color:        var(--ui-accent);
-}
-.ui-stepper-label {
-  margin-top: .5rem;
-  font-size:  .72rem;
-  color:      var(--ui-muted);
-  text-align: center;
-  line-height: 1.3;
-  padding:    0 .25rem;
-}
-.ui-stepper-item--active   .ui-stepper-label { color: var(--ui-text); font-weight: 600; }
-.ui-stepper-item--complete .ui-stepper-label { color: var(--ui-muted); }
-
-/* ─── Image ──────────────────────────────────────────────────────────────── */
-.ui-image {
-  display: block;
-}
-.ui-image-crop {
-  overflow:      hidden;
-  border-radius: var(--ui-radius);
-}
-.ui-image-wrap {
-  display:       block;
-  overflow:      hidden;
-  border-radius: var(--ui-radius);
-}
-.ui-image-img--cover {
-  display:    block;
-  width:      100%;
-  height:     100%;
-  object-fit: cover;
-}
-.ui-image-img {
-  display:   block;
-  max-width: 100%;
-  height:    auto;
-}
-.ui-image--rounded .ui-image-crop { border-radius: var(--ui-radius-lg, 1rem); }
-.ui-image--rounded .ui-image-wrap  { border-radius: var(--ui-radius-lg, 1rem); }
-.ui-image--pill    .ui-image-crop  { border-radius: 999px; }
-.ui-image--pill    .ui-image-wrap  { border-radius: 999px; }
-.ui-image-caption {
-  margin:      .5rem 0 0;
-  font-size:   .8rem;
-  color:       var(--ui-muted);
-  line-height: 1.5;
-}
-
-/* ─── Pullquote ──────────────────────────────────────────────────────────── */
-.ui-pullquote {
-  border-left: 3px solid var(--ui-accent);
-  padding:     .75rem 0 .75rem 1.5rem;
-  margin:      0;
-}
-.ui-pullquote blockquote { margin: 0; padding: 0; }
-.ui-pullquote-text {
-  font-size:   1.15rem;
-  line-height: 1.6;
-  color:       var(--ui-text);
-  font-style:  italic;
-  margin:      0;
-}
-.ui-pullquote--lg .ui-pullquote-text { font-size: 1.5rem; }
-.ui-pullquote-cite {
-  display:    block;
-  margin-top: .75rem;
-  font-size:  .85rem;
-  color:      var(--ui-muted);
-  font-style: normal;
-}
-
-/* Editorial variant — centred large serif, no left border */
-.ui-pullquote--editorial {
-  border-left: none;
-  padding:     4rem 1.5rem;
-  text-align:  center;
-}
-.ui-pullquote--editorial .ui-pullquote-text {
-  font-size:      clamp(1.5rem, 3.5vw, 2.25rem);
-  line-height:    1.4;
-  font-style:     italic;
-  font-weight:    400;
-  max-width:      640px;
-  margin-left:    auto;
-  margin-right:   auto;
-}
-.ui-pullquote--editorial.ui-pullquote--lg .ui-pullquote-text {
-  font-size: clamp(1.75rem, 4vw, 3rem);
-}
-.ui-pullquote--editorial .ui-pullquote-cite {
-  text-align:  center;
-  margin-top:  1.25rem;
-  font-size:   0.9375rem;
-}
-
-/* ─── Prose ──────────────────────────────────────────────────────────────────
-   Typography wrapper for rich text: CMS output, markdown-rendered HTML,
-   blog/article bodies. Styles all descendant elements without class names.   */
-.ui-prose {
-  color:       var(--ui-text);
-  line-height: 1.75;
-  font-size:   1rem;
-}
-.ui-prose--sm { font-size: .875rem; }
-.ui-prose--lg { font-size: 1.125rem; }
-
-.ui-prose h1,
-.ui-prose h2,
-.ui-prose h3,
-.ui-prose h4,
-.ui-prose h5,
-.ui-prose h6 {
-  color:         var(--ui-text);
-  font-weight:   700;
-  line-height:   1.3;
-  margin-top:    2em;
-  margin-bottom: .6em;
-}
-.ui-prose h1 { font-size: 2rem;    }
-.ui-prose h2 { font-size: 1.5rem;  }
-.ui-prose h3 { font-size: 1.25rem; font-weight: 600; }
-.ui-prose h4 { font-size: 1rem;    font-weight: 600; }
-.ui-prose h5 { font-size: .875rem; font-weight: 600; }
-.ui-prose h6 { font-size: .875rem; font-weight: 600; color: var(--ui-muted); }
-
-.ui-prose :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
-
-.ui-prose p  { margin-bottom: 1.25em; }
-.ui-prose p:last-child { margin-bottom: 0; }
-
-.ui-prose a {
-  color:           var(--ui-accent);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-.ui-prose a:hover { color: var(--ui-accent-hover); }
-
-.ui-prose strong { font-weight: 700; }
-.ui-prose em     { font-style: italic; }
-
-.ui-prose ul,
-.ui-prose ol {
-  padding-left:  1.5em;
-  margin-bottom: 1.25em;
-}
-.ui-prose ul { list-style-type: disc;    }
-.ui-prose ol { list-style-type: decimal; }
-.ui-prose ul ul { list-style-type: circle; }
-.ui-prose ul.contains-task-list { list-style: none; padding-left: 0; }
-.ui-prose li.task-list-item input[type="checkbox"] { margin-right: .4em; }
-.ui-prose li { margin-bottom: .375em; }
-.ui-prose li > ul,
-.ui-prose li > ol { margin-top: .375em; margin-bottom: .375em; }
-
-.ui-prose blockquote {
-  border-left: 3px solid var(--ui-border);
-  padding:     .5em 0 .5em 1.25em;
-  margin:      1.5em 0;
-  color:       var(--ui-muted);
-  font-style:  italic;
-}
-.ui-prose blockquote p { margin-bottom: 0; }
-
-.ui-prose code {
-  background:    var(--ui-surface-2);
-  color:         var(--ui-code-color);
-  padding:       .1em .35em;
-  border-radius: var(--ui-radius-sm);
-  font-size:     .875em;
-  font-family:   var(--ui-mono);
-}
-.ui-prose pre {
-  background:    var(--ui-surface-2);
-  border:        1px solid var(--ui-border);
-  border-radius: var(--ui-radius);
-  padding:       1em 1.25em;
-  overflow-x:    auto;
-  margin-bottom: 1.25em;
-  font-family:   var(--ui-mono);
-  font-size:     .875em;
-  line-height:   1.7;
-}
-.ui-prose pre code {
-  background: none;
-  color:      inherit;
-  padding:    0;
-  font-size:  inherit;
-}
-
-.ui-prose hr {
-  border:     none;
-  border-top: 1px solid var(--ui-border);
-  margin:     2em 0;
-}
-
-.ui-prose img {
-  max-width:     100%;
-  border-radius: var(--ui-radius);
-  height:        auto;
-}
-.ui-prose figure { margin: 1.5em 0; }
-.ui-prose figcaption {
-  font-size: .875em;
-  color:     var(--ui-muted);
-  margin-top: .5em;
-  text-align: center;
-}
-
-.ui-prose table {
-  width:           100%;
-  border-collapse: collapse;
-  margin-bottom:   1.25em;
-  font-size:       .9375em;
-}
-.ui-prose th {
-  text-align:    left;
-  padding:       .5em .75em;
-  border-bottom: 2px solid var(--ui-border);
-  font-weight:   600;
-  color:         var(--ui-text);
-}
-.ui-prose td {
-  padding:       .5em .75em;
-  border-bottom: 1px solid var(--ui-border);
-  color:         var(--ui-text);
-}
-
-/* ─── Syntax highlighting tokens ────────────────────────────────────────────
-   Used by ui-prose pre code blocks rendered via @invisibleloop/pulse/md.
-   Dark theme defaults; light theme overrides below.                          */
-:root {
-  --tok-kw:    #c792ea;
-  --tok-str:   #c3e88d;
-  --tok-cmt:   #7a8a9a;
-  --tok-num:   #f78c6c;
-  --tok-fn:    #82aaff;
-  --tok-op:    #89ddff;
-  --tok-punct: #7e8899;
-}
-.tok-kw    { color: var(--tok-kw);    }
-.tok-str   { color: var(--tok-str);   }
-.tok-cmt   { color: var(--tok-cmt);   font-style: italic; }
-.tok-num   { color: var(--tok-num);   }
-.tok-fn    { color: var(--tok-fn);    }
-.tok-op    { color: var(--tok-op);    }
-.tok-punct { color: var(--tok-punct); }
-
-/* ─── Light theme ────────────────────────────────────────────────────────────
-   Apply to any ancestor element: <body data-theme="light"> or .ui-theme-light
-   All --ui-* tokens are overridden; component markup stays identical.        */
-[data-theme="light"],
-.ui-theme-light {
-  --ui-bg:              var(--bg,           #ffffff);
-  --ui-surface:         var(--surface,      #f8f8fc);
-  --ui-surface-2:       var(--surface-2,    #f0f0f8);
-  --ui-border:          var(--border,       #d8d8e8);
-  --ui-text:            var(--text,         #111118);
-  --ui-muted:           var(--muted,        #60607a);
-  --ui-accent:          var(--accent,       #6b5ce7);
-  --ui-accent-hover:    var(--accent-hover, #5847d6);
-  --ui-accent-dim:      var(--accent-dim,   rgba(107, 92, 231, .12));
-  --ui-accent-text:     var(--accent-text,  #ffffff);
-  /* Inline code uses a slightly darker accent so it passes WCAG AA on --ui-surface-2 */
-  --ui-code-color:      var(--code-color,   #4a3db5);
-  --ui-green:           var(--green,        #166534);
-  --ui-green-dim:       rgba(22, 163, 74,  .12);
-  --ui-red:             var(--red,          #991b1b);
-  --ui-red-dim:         rgba(220,  38,  38, .12);
-  --ui-yellow:          #92400e;
-  --ui-yellow-dim:      rgba(217, 119,   6, .12);
-  --ui-blue:            #1e40af;
-  --ui-blue-dim:        rgba( 30,  64, 175, .12);
-  --ui-nav-sticky-bg:   rgba(255, 255, 255, .85);
-  --ui-muted-bg:        var(--muted-bg,     rgba(0, 0, 0, .04));
-  --ui-shadow:          var(--shadow,       0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06));
-  --tok-kw:             #7c3aed;
-  --tok-str:            #15803d;
-  --tok-cmt:            #6b7280;
-  --tok-num:            #c2410c;
-  --tok-fn:             #1d4ed8;
-  --tok-op:             #0891b2;
-  --tok-punct:          #6b7280;
-}
-
-/* ─── Vibe presets ────────────────────────────────────────────────────────────
-   meta.vibe sets data-vibe on <body>. Each vibe adjusts geometry and type
-   tokens without touching colour — pair with a custom theme.css for full
-   personality. All agents: set meta.vibe to get instant personality.
-
-   warm        — rounded, friendly, inviting (local businesses, wellness)
-   editorial   — sharp, serif display, tight tracking (blogs, publications)
-   playful     — very rounded, loose, energetic (kids, lifestyle, food)
-   minimal     — razor-sharp, no shadows, refined (portfolios, luxury)
-   bold        — impact headings, strong presence (agencies, startups)
-   brutalist   — zero radius, oversized type, raw (art, fashion, counter-culture)
-   retro       — slab serif, medium radius, warm (vintage, craft, nostalgia)
-   corporate   — conservative geometry, tight tracking (B2B, finance, legal)
-   neon        — futuristic mono headline, glow-ready (tech, gaming, crypto)
-   paper       — organic radius, soft shadows, tactile (journals, bookshops)    */
-
-[data-vibe="warm"] {
-  --ui-radius:                 14px;
-  --ui-radius-sm:              8px;
-  --ui-letter-spacing-display: -0.01em;
-}
-
-[data-vibe="editorial"] {
-  --ui-radius:                 0px;
-  --ui-radius-sm:              0px;
-  --ui-font-display:           Georgia, 'Times New Roman', serif;
-  --ui-letter-spacing-display: -0.04em;
-}
-
-[data-vibe="playful"] {
-  --ui-radius:                 22px;
-  --ui-radius-sm:              14px;
-  --ui-letter-spacing-display:  0em;
-}
-
-[data-vibe="minimal"] {
-  --ui-radius:                 2px;
-  --ui-radius-sm:              1px;
-  --ui-letter-spacing-display:  0.02em;
-}
-
-[data-vibe="bold"] {
-  --ui-radius:                 6px;
-  --ui-letter-spacing-display: -0.05em;
-}
-
-[data-vibe="brutalist"] {
-  --ui-radius:                 0px;
-  --ui-radius-sm:              0px;
-  --ui-font-display:           'Arial Black', 'Impact', sans-serif;
-  --ui-letter-spacing-display: -0.02em;
-}
-
-[data-vibe="retro"] {
-  --ui-radius:                 8px;
-  --ui-radius-sm:              4px;
-  --ui-font-display:           'Rockwell', 'Courier New', Georgia, serif;
-  --ui-letter-spacing-display:  0.01em;
-}
-
-[data-vibe="corporate"] {
-  --ui-radius:                 4px;
-  --ui-radius-sm:              2px;
-  --ui-letter-spacing-display: -0.01em;
-}
-
-[data-vibe="neon"] {
-  --ui-radius:                 3px;
-  --ui-radius-sm:              2px;
-  --ui-font-display:           'Courier New', 'Lucida Console', monospace;
-  --ui-letter-spacing-display: -0.03em;
-}
-
-[data-vibe="paper"] {
-  --ui-radius:                 10px;
-  --ui-radius-sm:              6px;
-  --ui-font-display:           Georgia, 'Palatino Linotype', serif;
-  --ui-letter-spacing-display: -0.02em;
-}
-
-/* Stat suffix — icon/rating appended to the value */
-.ui-stat-suffix {
-  display:     inline-flex;
-  align-items: center;
-  margin-left: 0.2em;
-  font-size:   0.6em;
-  vertical-align: middle;
-  line-height: 0;
-}
-