/* GENERATED by build.py from the PRC kit — edit brand.css, not this file. */
/* ═══════════════════════════════════════════════════════════════════
   ACECSS COMPONENTS — AceCSS UI kit
   Version 1.3.0 · MIT License · (c) 2026 Kosowwwa LLC

   Framework-free CSS for the AceCSS look: buttons, segmented controls,
   inputs, selects, textareas, checkboxes, switches, badges and
   selectable cards, so every AceCSS project can share the same components.

   USAGE
     <link rel="stylesheet" href="ace.css">
     <button class="ace-btn ace-btn--primary">Save</button>

   Everything is prefixed `ace-` so it can't clash with Tailwind,
   Bootstrap or your own classes. Load it AFTER any CSS reset / framework
   (Tailwind preflight, @tailwindcss/forms).

   DARK MODE
     Add `class="dark"` or `data-theme="dark"` to <html> (or any
     ancestor). Add `class="ace-auto-dark"` to <html> to follow the OS
     setting instead.

   THEMING
     Override the --ace-* tokens below, e.g.
       :root { --ace-primary: #05df72; --ace-radius: 12px; }
   ═══════════════════════════════════════════════════════════════════ */


/* ───────────────────────────── 1. TOKENS ─────────────────────────── */
:root {
  /* Brand — coral #fc5731 in BOTH modes; the brand is not mode-dependent. */
  --ace-primary: #fc5731;
  --ace-primary-foreground: #ffffff;
  --ace-attention: #d97706;          /* amber-600 — "pending" */
  --ace-destructive: #dc2626;        /* red-600 */
  --ace-destructive-foreground: #ffffff;
  --ace-destructive-text: #dc2626;   /* red label on a neutral button */

  /* Surfaces & text */
  --ace-background: #ffffff;
  --ace-page: #fafafa;
  --ace-foreground: #111827;
  --ace-muted-foreground: #6b7280;
  --ace-border: #e5e7eb;
  --ace-input: #e5e7eb;
  --ace-ring: var(--ace-primary);
  --ace-invalid-ring: 20%;          /* error focus-ring strength */

  /* Raised neutral surface (secondary buttons, fields, neutral badges) */
  --ace-surface-from: #ffffff;
  --ace-surface-to: #f8f8f9;
  --ace-surface-hover-from: #fafafa;
  --ace-surface-hover-to: #f1f1f3;
  --ace-surface-ring: var(--ace-input);
  --ace-surface-highlight: #ffffff;

  /* Status tones (badges) — dark enough for white text ≥ 4.5:1 */
  --ace-tone-success: #047857;  /* emerald-700 */
  --ace-tone-warning: #b45309;  /* amber-700 */
  --ace-tone-danger: #b91c1c;   /* red-700 */
  --ace-tone-info: #2563eb;     /* blue-600 */

  /* Shape & type */
  --ace-radius: 8px;
  --ace-radius-sm: 6px;
  --ace-font: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ace-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --ace-transition: 0.2s ease;
}

/* Dark tokens — applied by .dark / [data-theme="dark"] on an ancestor */
.dark,
[data-theme="dark"] {
  --ace-attention: #b45309;          /* one step deeper on dark */
  --ace-destructive-text: #f87171;   /* red-400 keeps ~5:1 on zinc */
  --ace-invalid-ring: 40%;

  --ace-background: #18181b;
  --ace-page: #09090b;
  --ace-foreground: #fafafa;
  --ace-muted-foreground: #a1a1aa;
  --ace-border: #3f3f46;
  --ace-input: #3f3f46;

  --ace-surface-from: #2a2a2e;
  --ace-surface-to: #222225;
  --ace-surface-hover-from: #323236;
  --ace-surface-hover-to: #29292c;
  --ace-surface-ring: #3f3f46;
  --ace-surface-highlight: rgb(255 255 255 / 0.06);

  color-scheme: dark;
}

/* Opt-in: follow the operating system */
@media (prefers-color-scheme: dark) {
  .ace-auto-dark:not([data-theme="light"]) {
    --ace-attention: #b45309;
    --ace-destructive-text: #f87171;
    --ace-invalid-ring: 40%;
    --ace-background: #18181b;
    --ace-page: #09090b;
    --ace-foreground: #fafafa;
    --ace-muted-foreground: #a1a1aa;
    --ace-border: #3f3f46;
    --ace-input: #3f3f46;
    --ace-surface-from: #2a2a2e;
    --ace-surface-to: #222225;
    --ace-surface-hover-from: #323236;
    --ace-surface-hover-to: #29292c;
    --ace-surface-ring: #3f3f46;
    --ace-surface-highlight: rgb(255 255 255 / 0.06);
    color-scheme: dark;
  }
}


/* ───────────────────────────── 2. BUTTONS ────────────────────────── */
/* Base: layout, size md (40px), focus + disabled. Pair with a variant. */
.ace-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  margin: 0;
  border: 0;
  border-radius: var(--ace-radius);
  font-family: var(--ace-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity var(--ace-transition), box-shadow var(--ace-transition),
    background-image var(--ace-transition), background-color var(--ace-transition);
}
.ace-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  pointer-events: none;
}
.ace-btn:focus-visible { outline: none; }
.ace-btn:disabled,
.ace-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

/* Sizes */
.ace-btn.ace-btn--sm   { height: 36px; padding: 0 12px; }
.ace-btn.ace-btn--lg   { height: 44px; padding: 0 32px; }
.ace-btn.ace-btn--icon { width: 40px; padding: 0; }
.ace-btn.ace-btn--sm.ace-btn--icon { width: 36px; }
.ace-btn.ace-btn--lg.ace-btn--icon { width: 44px; }
/* Toolbar / filter bar: every control in one bar is 36px with a 12px label */
.ace-btn.ace-btn--toolbar { height: 36px; padding: 0 12px; font-size: 12px; }
.ace-btn.ace-btn--toolbar.ace-btn--icon { width: 36px; padding: 0; }
.ace-btn.ace-btn--block { display: flex; width: 100%; }

/* PRIMARY — main action (Save, Create, Book, Sign in).
   Brand gradient, 1px darker ring, 1px inner top highlight. Every colour
   derives from --ace-btn-tone, so other tones are a one-line swap: the
   DANGER button and the named colours below are this exact construction
   in another tone.

   --ace-tone (public) recolours PRIMARY buttons: set it on one button
   (style="--ace-tone:#FF0022") or on a whole section. Danger, attention
   and the named colours ignore it on purpose, so a Delete button inside
   a blue section stays red. --ace-tone-fg sets the label colour for light
   tones; pick a tone dark enough for white text (>= 4.5:1). */
.ace-btn:is(.ace-btn--primary, .ace-btn--danger, .ace-btn--blue, .ace-btn--green, .ace-btn--purple, .ace-btn--pink, .ace-btn--black) {
  --ace-btn-tone: var(--ace-tone, var(--ace-primary));
  --ace-btn-fg: var(--ace-tone-fg, var(--ace-primary-foreground));
  --ace-btn-ring: color-mix(in oklch, var(--ace-btn-tone), black 10%);
  --ace-btn-light: color-mix(in oklch, var(--ace-btn-tone), white 30%);
  --ace-btn-from: color-mix(in oklch, var(--ace-btn-tone), white 15%);
  color: var(--ace-btn-fg);
  background-color: var(--ace-btn-light);
  background-image: linear-gradient(to bottom, var(--ace-btn-from), var(--ace-btn-tone));
  box-shadow:
    0 0 0 1px var(--ace-btn-ring),
    inset 0 1px 0 0 var(--ace-btn-light),
    var(--ace-shadow-xs);
}
.ace-btn:is(.ace-btn--primary, .ace-btn--danger, .ace-btn--blue, .ace-btn--green, .ace-btn--purple, .ace-btn--pink, .ace-btn--black):hover {
  color: var(--ace-btn-fg);
  background-image: linear-gradient(to bottom, var(--ace-btn-light), var(--ace-btn-tone));
}
.ace-btn:is(.ace-btn--primary, .ace-btn--danger, .ace-btn--blue, .ace-btn--green, .ace-btn--purple, .ace-btn--pink, .ace-btn--black):active {
  background-image: linear-gradient(to bottom, var(--ace-btn-tone), var(--ace-btn-tone));
}
.ace-btn:is(.ace-btn--primary, .ace-btn--danger, .ace-btn--blue, .ace-btn--green, .ace-btn--purple, .ace-btn--pink, .ace-btn--black):focus-visible {
  box-shadow:
    0 0 0 1px var(--ace-btn-ring),
    inset 0 1px 0 0 var(--ace-btn-light),
    0 0 0 4px color-mix(in oklch, var(--ace-btn-tone), transparent 70%);
}

/* ATTENTION — the primary look in amber, for a switched-on toggle that
   flags something pending ("Only with pending"). Use with --primary. */
.ace-btn.ace-btn--primary.ace-btn--attention { --ace-btn-tone: var(--ace-attention); --ace-btn-fg: #fff; }

/* SECONDARY — everything that isn't the main action (Cancel, Edit,
   Filter, Export). Raised neutral surface. */
.ace-btn.ace-btn--secondary {
  color: var(--ace-foreground);
  background-color: var(--ace-surface-to);
  background-image: linear-gradient(to bottom, var(--ace-surface-from), var(--ace-surface-to));
  box-shadow:
    0 0 0 1px var(--ace-surface-ring),
    inset 0 1px 0 0 var(--ace-surface-highlight),
    var(--ace-shadow-xs);
}
.ace-btn.ace-btn--secondary:hover {
  color: var(--ace-foreground);
  background-image: linear-gradient(to bottom, var(--ace-surface-hover-from), var(--ace-surface-hover-to));
}
.ace-btn.ace-btn--secondary:active {
  background-image: linear-gradient(to bottom, var(--ace-surface-hover-to), var(--ace-surface-hover-to));
}
.ace-btn.ace-btn--secondary:focus-visible {
  box-shadow:
    0 0 0 1px var(--ace-surface-ring),
    inset 0 1px 0 0 var(--ace-surface-highlight),
    0 0 0 4px color-mix(in oklch, var(--ace-ring), transparent 75%);
}

/* DESTRUCTIVE TRIGGER — page/row-level Delete, Reject, Remove:
   the secondary surface with a red label. Use with --secondary. */
.ace-btn.ace-btn--secondary.ace-btn--destructive,
.ace-btn.ace-btn--secondary.ace-btn--destructive:hover {
  color: var(--ace-destructive-text);
}

/* DANGER — the primary construction in red (gradient, ring, top
   highlight, same hover / active / focus). ONLY for the confirm button
   inside a destructive dialog ("Yes, delete").
   The tone is the destructive red + 10% black: the gradient lightens the
   top, and plain red-600 would drop the white label to ~4.2:1 mid-button.
   At +10% black it stays >= 4.6:1 top to bottom (5.2:1 behind the text). */
.ace-btn.ace-btn--danger {
  --ace-btn-tone: color-mix(in oklch, var(--ace-destructive), black 10%);
  --ace-btn-fg: var(--ace-destructive-foreground);
}

/* NAMED COLOURS — filled buttons in a fixed palette:
   <button class="ace-btn ace-btn--blue">. Each shade is measured so the
   white label stays >= 4.5:1 from the top of the gradient to the bottom
   (blue-700, green-800, violet-700, pink-700, zinc-900). For any other
   colour use --ace-tone on a primary button instead. */
.ace-btn.ace-btn--blue   { --ace-btn-tone: #1d4ed8; --ace-btn-fg: #fff; }
.ace-btn.ace-btn--green  { --ace-btn-tone: #166534; --ace-btn-fg: #fff; }
.ace-btn.ace-btn--purple { --ace-btn-tone: #6d28d9; --ace-btn-fg: #fff; }
.ace-btn.ace-btn--pink   { --ace-btn-tone: #be185d; --ace-btn-fg: #fff; }
.ace-btn.ace-btn--black  { --ace-btn-tone: #18181b; --ace-btn-fg: #fff; }
/* Near-black disappears on a dark page: lift it to zinc-700 there. */
.dark .ace-btn.ace-btn--black,
[data-theme="dark"] .ace-btn.ace-btn--black { --ace-btn-tone: #3f3f46; }
@media (prefers-color-scheme: dark) {
  .ace-auto-dark:not([data-theme="light"]) .ace-btn.ace-btn--black { --ace-btn-tone: #3f3f46; }
}

/* Hover-only surface — items that rest flat (sidebar links, list rows)
   but lift like a secondary button when pointed at. */
.ace-hover-surface {
  border-radius: var(--ace-radius);
  transition: box-shadow var(--ace-transition), background-image var(--ace-transition);
}
.ace-hover-surface:hover {
  background-color: var(--ace-surface-to);
  background-image: linear-gradient(to bottom, var(--ace-surface-from), var(--ace-surface-to));
  box-shadow:
    0 0 0 1px var(--ace-surface-ring),
    inset 0 1px 0 0 var(--ace-surface-highlight),
    var(--ace-shadow-xs);
}

/* Loading state: <button class="ace-btn ace-btn--primary" aria-busy="true"> */
.ace-btn[aria-busy="true"] {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.ace-btn[aria-busy="true"]::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-color: var(--ace-foreground) transparent var(--ace-foreground) var(--ace-foreground);
  animation: ace-spin 0.7s linear infinite;
}
.ace-btn:is(.ace-btn--primary, .ace-btn--danger, .ace-btn--blue, .ace-btn--green, .ace-btn--purple, .ace-btn--pink, .ace-btn--black)[aria-busy="true"]::after {
  /* follows the label colour, so it shows on light --ace-tone buttons too */
  border-color: var(--ace-btn-fg) transparent var(--ace-btn-fg) var(--ace-btn-fg);
}
@keyframes ace-spin { to { transform: rotate(360deg); } }


/* ───────────────────────── 3. SEGMENTED CONTROL ──────────────────── */
/* A single-choice group that reads as one control. Children are normal
   .ace-btn buttons: active = --primary, the rest = --secondary.
   Mark the active one with aria-pressed="true". */
.ace-segmented {
  display: inline-flex;
  isolation: isolate;
}
.ace-segmented.ace-segmented--block { display: flex; width: 100%; }
.ace-segmented.ace-segmented--block > .ace-btn { flex: 1; }
.ace-segmented > .ace-btn {
  position: relative;
  border-radius: 0;
}
.ace-segmented > .ace-btn:first-child {
  border-top-left-radius: var(--ace-radius);
  border-bottom-left-radius: var(--ace-radius);
}
.ace-segmented > .ace-btn:last-child {
  border-top-right-radius: var(--ace-radius);
  border-bottom-right-radius: var(--ace-radius);
}
/* Lift the active segment so its ring shows on both sides */
.ace-segmented > .ace-btn[aria-pressed="true"],
.ace-segmented > .ace-btn:focus-visible { z-index: 1; }
.ace-segmented.ace-segmented--xs > .ace-btn { height: 24px; padding: 0 8px; font-size: 10px; }
.ace-segmented.ace-segmented--sm > .ace-btn { height: 36px; padding: 0 12px; font-size: 12px; }


/* ─────────────────────────── 4. FORM FIELDS ──────────────────────── */
/* Field wrapper: label → control → hint/error, stacked */
.ace-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-family: var(--ace-font);
}

.ace-label {
  display: block;
  font-family: var(--ace-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--ace-foreground);
  user-select: none;
}
.ace-label .ace-required,
.ace-required { color: var(--ace-destructive); }

.ace-hint,
.ace-error {
  margin: 0;
  font-family: var(--ace-font);
  font-size: 12px;
  line-height: 1.4;
}
.ace-hint  { color: var(--ace-muted-foreground); }
.ace-error { color: var(--ace-destructive-text); }

/* Shared field surface — same family as the secondary button.
   The edge is a real 1px border so the error state can recolour it. */
.ace-input,
.ace-textarea,
.ace-select,
.ace-input-group {
  display: flex;
  width: 100%;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid var(--ace-input);
  border-radius: var(--ace-radius);
  font-family: var(--ace-font);
  font-size: 16px; /* ≥16px stops iOS Safari zooming on focus */
  line-height: 1.4;
  color: var(--ace-foreground);
  background-color: var(--ace-surface-to);
  background-image: linear-gradient(to bottom, var(--ace-surface-from), var(--ace-surface-to));
  box-shadow: inset 0 1px 0 0 var(--ace-surface-highlight), var(--ace-shadow-xs);
  transition: color var(--ace-transition), box-shadow var(--ace-transition),
    border-color var(--ace-transition);
  -webkit-appearance: none;
  appearance: none;
}
@media (min-width: 768px) {
  .ace-input,
  .ace-textarea,
  .ace-select,
  .ace-input-group { font-size: 14px; }
}

.ace-input,
.ace-select { height: 36px; padding: 4px 12px; }
.ace-input.ace-input--lg,
.ace-select.ace-select--lg { height: 40px; }

.ace-textarea {
  min-height: 80px;
  padding: 8px 12px;
  resize: vertical;
}

.ace-input::placeholder,
.ace-textarea::placeholder,
.ace-input-group input::placeholder { color: var(--ace-muted-foreground); opacity: 1; }

.ace-input::selection,
.ace-textarea::selection {
  background: var(--ace-primary);
  color: var(--ace-primary-foreground);
}

/* File input button */
.ace-input[type="file"] { padding-top: 3px; padding-bottom: 3px; }
.ace-input::file-selector-button {
  height: 28px;
  margin-right: 8px;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 500;
  color: var(--ace-foreground);
}

/* Focus: brand border + 3px translucent brand ring */
.ace-input:focus,
.ace-textarea:focus,
.ace-select:focus,
.ace-input-group:focus-within {
  outline: none;
  border-color: var(--ace-ring);
  box-shadow:
    inset 0 1px 0 0 var(--ace-surface-highlight),
    0 0 0 3px color-mix(in srgb, var(--ace-ring) 50%, transparent);
}

/* Error: add .is-invalid or aria-invalid="true" */
.ace-input.is-invalid, .ace-input[aria-invalid="true"],
.ace-textarea.is-invalid, .ace-textarea[aria-invalid="true"],
.ace-select.is-invalid, .ace-select[aria-invalid="true"],
.ace-input-group.is-invalid {
  border-color: var(--ace-destructive);
}
.ace-input.is-invalid:focus, .ace-input[aria-invalid="true"]:focus,
.ace-textarea.is-invalid:focus, .ace-textarea[aria-invalid="true"]:focus,
.ace-select.is-invalid:focus, .ace-select[aria-invalid="true"]:focus,
.ace-input-group.is-invalid:focus-within {
  border-color: var(--ace-destructive);
  box-shadow:
    inset 0 1px 0 0 var(--ace-surface-highlight),
    0 0 0 3px color-mix(in srgb, var(--ace-destructive) var(--ace-invalid-ring), transparent);
}

/* Disabled */
.ace-input:disabled,
.ace-textarea:disabled,
.ace-select:disabled,
.ace-input-group.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Native <select>: chevron painted over the same gradient */
.ace-select {
  padding-right: 32px;
  line-height: 1;
  cursor: pointer;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E"),
    linear-gradient(to bottom, var(--ace-surface-from), var(--ace-surface-to));
  background-repeat: no-repeat, repeat;
  background-position: right 8px center, 0 0;
  background-size: 16px 16px, auto;
}
.ace-select[multiple],
.ace-select[size]:not([size="1"]) {
  height: auto;
  padding-right: 12px;
  background-image: linear-gradient(to bottom, var(--ace-surface-from), var(--ace-surface-to));
}

/* Native date / time pickers pick up the brand */
.ace-input[type="date"],
.ace-input[type="datetime-local"],
.ace-input[type="time"] { accent-color: var(--ace-primary); }

/* Input group — a bordered shell around an icon / prefix / suffix plus
   a borderless input (search fields, "slug + .ace.zone"). The shell
   owns the border and reacts to focus-within. */
.ace-input-group {
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  cursor: text;
}
.ace-input-group > input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  color: inherit;
}
.ace-input-group > input:focus { outline: 0; box-shadow: none; }
.ace-input-group > svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--ace-muted-foreground);
}
.ace-input-group > .ace-addon {
  flex-shrink: 0;
  color: var(--ace-muted-foreground);
  white-space: nowrap;
}


/* ───────────────────── 5. CHECKBOX, RADIO, SWITCH ────────────────── */
/* Native controls in the brand colour. Wrap in a label for a click area:
   <label class="ace-check"><input type="checkbox"> Remember me</label> */
.ace-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ace-font);
  font-size: 14px;
  color: var(--ace-foreground);
  cursor: pointer;
}
.ace-check > input[type="checkbox"],
.ace-check > input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ace-primary);
  cursor: pointer;
}
.ace-check > input:focus-visible {
  outline: 2px solid var(--ace-ring);
  outline-offset: 2px;
}
.ace-check:has(> input:disabled) { cursor: not-allowed; opacity: 0.5; }

/* Switch: <label class="ace-switch"><input type="checkbox" role="switch"> Label</label> */
.ace-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ace-font);
  font-size: 14px;
  color: var(--ace-foreground);
  cursor: pointer;
}
.ace-switch > input {
  position: relative;
  width: 36px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  border-radius: 999px;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background: var(--ace-input);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ace-foreground) 6%, transparent);
  transition: background-color var(--ace-transition);
}
.ace-switch > input::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
  transition: transform var(--ace-transition);
}
.ace-switch > input:checked { background: var(--ace-primary); }
.ace-switch > input:checked::before { transform: translateX(16px); }
.ace-switch > input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ace-ring) 40%, transparent);
}
.ace-switch:has(> input:disabled) { cursor: not-allowed; opacity: 0.5; }


/* ──────────────────────────── 6. BADGES ──────────────────────────── */
/* Non-interactive labels: the button construction at badge size.
   --secondary/--neutral for categories, solid tones for statuses
   whose colour carries meaning. */
.ace-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--ace-radius-sm);
  font-family: var(--ace-font);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  /* default = neutral */
  color: color-mix(in srgb, var(--ace-foreground) 80%, transparent);
  background-color: var(--ace-surface-to);
  background-image: linear-gradient(to bottom, var(--ace-surface-from), var(--ace-surface-to));
  box-shadow:
    0 0 0 1px var(--ace-surface-ring),
    inset 0 1px 0 0 var(--ace-surface-highlight),
    0 1px 1px 0 rgb(0 0 0 / 0.05);
}
.ace-badge.ace-badge--md { height: 22px; padding: 0 8px; font-size: 12px; }
.ace-badge svg { width: 12px; height: 12px; }

.ace-badge.ace-badge--primary,
.ace-badge.ace-badge--success,
.ace-badge.ace-badge--warning,
.ace-badge.ace-badge--danger,
.ace-badge.ace-badge--info {
  --ace-badge-from: color-mix(in oklch, var(--ace-badge-tone), white 8%);
  --ace-badge-ring: color-mix(in oklch, var(--ace-badge-tone), black 12%);
  --ace-badge-highlight: color-mix(in oklch, var(--ace-badge-tone), white 28%);
  color: #fff;
  background-color: var(--ace-badge-tone);
  background-image: linear-gradient(to bottom, var(--ace-badge-from), var(--ace-badge-tone));
  box-shadow:
    0 0 0 1px var(--ace-badge-ring),
    inset 0 1px 0 0 var(--ace-badge-highlight),
    0 1px 1px 0 rgb(0 0 0 / 0.06);
}
/* Plain coral is only 3.2:1 with white — the badge uses brand + 20% black */
.ace-badge.ace-badge--primary { --ace-badge-tone: color-mix(in oklch, var(--ace-primary), black 20%); }
.ace-badge.ace-badge--success { --ace-badge-tone: var(--ace-tone-success); }
.ace-badge.ace-badge--warning { --ace-badge-tone: var(--ace-tone-warning); }
.ace-badge.ace-badge--danger  { --ace-badge-tone: var(--ace-tone-danger); }
.ace-badge.ace-badge--info    { --ace-badge-tone: var(--ace-tone-info); }


/* ───────────────────────── 7. CHOICE CARD ────────────────────────── */
/* Selectable card (vehicle, plan, role): the secondary surface; when
   chosen a 2px brand ring. Use on a <button> or <label>.
   <button class="ace-btn ace-btn--secondary ace-choice-card is-selected"> */
.ace-btn.ace-choice-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  height: auto;
  padding: 14px 16px;
  text-align: left;
  white-space: normal;
  line-height: 1.4;
}
.ace-btn.ace-choice-card.is-selected,
.ace-btn.ace-choice-card[aria-pressed="true"],
.ace-btn.ace-choice-card:has(> input:checked) {
  box-shadow:
    0 0 0 2px var(--ace-primary),
    inset 0 1px 0 0 var(--ace-surface-highlight),
    var(--ace-shadow-xs);
}
.ace-btn.ace-choice-card:has(> input:focus-visible) {
  box-shadow:
    0 0 0 1px var(--ace-surface-ring),
    0 0 0 4px color-mix(in oklch, var(--ace-ring), transparent 75%);
}
.ace-btn.ace-choice-card.is-selected:has(> input:focus-visible),
.ace-btn.ace-choice-card:has(> input:checked:focus-visible) {
  box-shadow:
    0 0 0 2px var(--ace-primary),
    0 0 0 5px color-mix(in oklch, var(--ace-ring), transparent 75%);
}
.ace-choice-card > input[type="radio"],
.ace-choice-card > input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}


/* ─────────────────────────── 8. DATE PICKER ──────────────────────── */
/* Single-date and range picker. Behaviour lives in ace-datepicker.js;
   this file only styles the data-* state the script sets.

   The selection is the brand colour end to end. Plain coral only reaches
   3.2:1 with white text, so selected surfaces use darker steps of the
   same hue, mixed in oklch like the primary button's ring:
     band  brand + 15% black  → in-between days      (white text 4.8:1)
     edge  brand + 20→30% black gradient → start / end / single (5.5:1+) */
:root {
  --ace-dp-brand: var(--ace-primary);
  --ace-dp-band: color-mix(in oklch, var(--ace-dp-brand), black 15%);
  --ace-dp-edge-from: color-mix(in oklch, var(--ace-dp-brand), black 20%);
  --ace-dp-edge-to: color-mix(in oklch, var(--ace-dp-brand), black 30%);
  --ace-dp-edge-ring: color-mix(in oklch, var(--ace-dp-brand), black 38%);
  --ace-dp-preview: color-mix(in oklch, var(--ace-dp-brand), transparent 78%);
  --ace-dp-preview-edge: color-mix(in oklch, var(--ace-dp-brand), transparent 62%);
  --ace-dp-hover: color-mix(in oklch, var(--ace-dp-brand), transparent 88%);
  --ace-popover: #ffffff;
  --ace-popover-border: #f3f4f6;      /* gray-100 */
  --ace-popover-shadow: 0 20px 25px -5px rgb(229 231 235 / 0.5), 0 8px 10px -6px rgb(229 231 235 / 0.5);
  --ace-weekday: #9ca3af;             /* gray-400 */
}
.dark,
[data-theme="dark"] {
  --ace-popover: #18181b;             /* zinc-900 */
  --ace-popover-border: #27272a;      /* zinc-800 */
  --ace-popover-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.6), 0 8px 10px -6px rgb(0 0 0 / 0.6);
  --ace-weekday: #71717a;             /* zinc-500 */
}
@media (prefers-color-scheme: dark) {
  .ace-auto-dark:not([data-theme="light"]) {
    --ace-popover: #18181b;
    --ace-popover-border: #27272a;
    --ace-popover-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.6), 0 8px 10px -6px rgb(0 0 0 / 0.6);
    --ace-weekday: #71717a;
  }
}

.ace-datepicker { position: relative; display: block; width: 100%; }

/* Single date: typed DD/MM/YYYY field + calendar toggle (an input group) */
.ace-date-toggle {
  display: inline-flex;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--ace-muted-foreground);
  cursor: pointer;
}
.ace-date-toggle:hover { color: var(--ace-foreground); }
.ace-date-toggle:focus-visible { outline: 2px solid var(--ace-ring); outline-offset: 2px; border-radius: 4px; }
.ace-date-toggle svg { width: 16px; height: 16px; }

/* Range: the whole field is one button */
.ace-input-group.ace-date-trigger {
  justify-content: flex-start;
  text-align: left;
  cursor: pointer;
}
.ace-date-trigger:focus-visible {
  outline: none;
  border-color: var(--ace-ring);
  box-shadow:
    inset 0 1px 0 0 var(--ace-surface-highlight),
    0 0 0 3px color-mix(in srgb, var(--ace-ring) 50%, transparent);
}
.ace-date-trigger > svg { width: 14px; height: 14px; }
.ace-date-trigger .ace-date-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ace-date-trigger .ace-date-label.is-empty { color: var(--ace-muted-foreground); }
.ace-input-group.ace-date-trigger:disabled { cursor: not-allowed; opacity: 0.5; }

/* Popover */
.ace-dp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1099;
  background: rgb(0 0 0 / 0.3);
}
.ace-dp {
  position: fixed;
  z-index: 1100;
  box-sizing: border-box;
  width: 300px;
  max-width: calc(100vw - 16px);
  padding: 16px;
  border: 1px solid var(--ace-popover-border);
  border-radius: 16px;
  background: var(--ace-popover);
  box-shadow: var(--ace-popover-shadow);
  font-family: var(--ace-font);
  color: var(--ace-foreground);
  animation: ace-dp-in 0.15s ease-out;
}
.ace-dp.ace-dp--range {
  width: 320px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: none;
}
@keyframes ace-dp-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.ace-dp-head,
.ace-dp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ace-dp-head { margin-bottom: 12px; }
.ace-dp-nav { margin-bottom: 8px; }
.ace-dp--range .ace-dp-nav { margin-bottom: 12px; }
.ace-dp-title { font-size: 14px; font-weight: 600; text-transform: capitalize; }
.ace-dp-month { font-size: 13px; font-weight: 600; text-transform: capitalize; }
.ace-dp .ace-btn.ace-dp-navbtn {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--ace-radius-sm);
}
.ace-dp .ace-btn.ace-dp-navbtn svg { width: 14px; height: 14px; }
.ace-dp .ace-btn.ace-dp-yearbtn { height: 32px; padding: 0 12px; gap: 6px; font-size: 12px; }
.ace-dp .ace-btn.ace-dp-yearbtn svg { width: 12px; height: 12px; }

/* Year dropdown */
.ace-dp-year { position: relative; }
.ace-dp-years {
  position: absolute;
  right: 0;
  z-index: 1;
  margin-top: 4px;
  max-height: 192px;
  overflow: auto;
  padding: 4px 0;
  border: 1px solid var(--ace-popover-border);
  border-radius: 12px;
  background: var(--ace-popover);
  box-shadow: var(--ace-popover-shadow);
}
.ace-dp-years button {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 16px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
  color: var(--ace-muted-foreground);
  cursor: pointer;
}
.ace-dp-years button:hover { background: var(--ace-surface-hover-to); }
.ace-dp-years button[aria-selected="true"] {
  font-weight: 600;
  color: var(--ace-foreground);
  background: color-mix(in srgb, var(--ace-primary) 10%, transparent);
}
.ace-dp-years button svg { width: 12px; height: 12px; color: var(--ace-primary); }
.ace-dp-years button .ace-dp-check { display: inline-block; width: 12px; }

/* Weekdays + grid */
.ace-dp-weekdays,
.ace-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.ace-dp-weekdays { margin-bottom: 4px; }
.ace-dp-weekdays > div {
  padding: 4px 0;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--ace-weekday);
}
.ace-dp-grid { row-gap: 4px; }

/* Cell wrapper: carries the range band so it runs edge to edge */
.ace-dp-cell {
  position: relative;
  display: flex;
  height: 36px;
  align-items: center;
  justify-content: center;
}
.ace-dp-cell[data-band] { background: var(--ace-dp-band-color); }
.ace-dp-cell[data-band="range"] { --ace-dp-band-color: var(--ace-dp-band); }
.ace-dp-cell[data-band="preview"] { --ace-dp-band-color: var(--ace-dp-preview); }
.ace-dp-cell[data-band-edge="start"] {
  background: linear-gradient(to right, transparent 50%, var(--ace-dp-band-color) 50%);
}
.ace-dp-cell[data-band-edge="end"] {
  background: linear-gradient(to left, transparent 50%, var(--ace-dp-band-color) 50%);
}
.ace-dp-cell[data-band-edge="both"],
.ace-dp-cell[data-band-edge="start"]:nth-child(7n),
.ace-dp-cell[data-band-edge="end"]:nth-child(7n + 1) { background: transparent; }
.ace-dp-cell[data-band]:not([data-band-edge]):nth-child(7n + 1) {
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
}
.ace-dp-cell[data-band]:not([data-band-edge]):nth-child(7n) {
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}

/* Day button */
.ace-dp-day {
  position: relative;
  display: flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ace-foreground);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.ace-dp-day[data-outside] { color: var(--ace-muted-foreground); }
.ace-dp-day:hover:not(:disabled):not([data-selected]):not([data-in-range]) {
  background-color: var(--ace-dp-hover);
}
.ace-dp-day:focus-visible { outline: 2px solid var(--ace-ring); outline-offset: 2px; }
.ace-dp-day:disabled {
  cursor: not-allowed;
  color: var(--ace-muted-foreground);
  opacity: 0.45;
  text-decoration: line-through;
}
/* Today: semibold + a dot under the number */
.ace-dp-day[data-today] { font-weight: 600; }
.ace-dp-day[data-today]::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 4px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 9999px;
  background: var(--ace-dp-brand);
}
/* In-between days: white on the band */
.ace-dp-day[data-in-range] { color: #fff; font-weight: 500; }
.ace-dp-day[data-in-range]:hover:not(:disabled) { background-color: rgb(255 255 255 / 0.16); }
/* Selected day / range ends: raised brand pill (primary button construction) */
.ace-dp-day[data-selected] {
  color: #fff;
  font-weight: 600;
  background-color: var(--ace-dp-edge-to);
  background-image: linear-gradient(to bottom, var(--ace-dp-edge-from), var(--ace-dp-edge-to));
  box-shadow:
    0 0 0 1px var(--ace-dp-edge-ring),
    inset 0 1px 0 0 rgb(255 255 255 / 0.18),
    0 1px 2px 0 rgb(0 0 0 / 0.12);
}
.ace-dp-day[data-selected]:focus-visible,
.ace-dp-day[data-in-range]:focus-visible { outline-color: var(--ace-foreground); }
.ace-dp-day[data-selected][data-today]::after,
.ace-dp-day[data-in-range][data-today]::after { background: #fff; }
/* Hover preview of the end date while picking */
.ace-dp-day[data-preview-end] {
  background-color: var(--ace-dp-preview-edge);
  box-shadow: inset 0 0 0 1.5px var(--ace-dp-brand);
}

/* Range footer: pick-up / return times + Clear / Close */
.ace-dp-foot {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ace-popover-border);
}
.ace-dp-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ace-dp-times > div { min-width: 0; }
.ace-dp-times label {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ace-weekday);
}
.ace-dp-times .ace-input-group { height: 36px; padding: 0 8px 0 10px; font-size: 13px; }
.ace-dp-times .ace-input-group > svg { width: 14px; height: 14px; }
.ace-dp-times input { font-variant-numeric: tabular-nums; }
.ace-dp-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}
.ace-dp-actions .ace-btn { height: 32px; }


/* ─────────────────────────── 9. CUSTOM SELECT ────────────────────── */
/* Custom dropdown. ace-select.js
   upgrades <select class="ace-select" data-ace-select> in place: the
   native select stays underneath (hidden) and remains the form value,
   so `name`, `required`, `change` events and FormData keep working.
   Add data-search for the type-to-filter version (long lists). */
:root {
  --ace-menu-border: #e5e7eb;          /* gray-200 */
  --ace-menu-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --ace-menu-hover: #f3f4f6;           /* shadcn accent */
  --ace-menu-sublabel: #9ca3af;        /* gray-400 */
}
.dark,
[data-theme="dark"] {
  --ace-menu-border: #3f3f46;          /* zinc-700 */
  --ace-menu-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
  --ace-menu-hover: #27272a;           /* zinc-800 */
  --ace-menu-sublabel: #71717a;        /* zinc-500 */
}
@media (prefers-color-scheme: dark) {
  .ace-auto-dark:not([data-theme="light"]) {
    --ace-menu-border: #3f3f46;
    --ace-menu-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
    --ace-menu-hover: #27272a;
    --ace-menu-sublabel: #71717a;
  }
}

/* The native select, kept for the form but out of sight */
.ace-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  border: 0 !important;
  white-space: nowrap !important;
}
.ace-select-wrap { position: relative; display: block; width: 100%; min-width: 0; }

/* Trigger: a <button> (or <input> with data-search) wearing .ace-select */
button.ace-select,
input.ace-select {
  align-items: center;
  text-align: left;
  line-height: 1.4;
}
.ace-select .ace-select-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ace-select .ace-select-value.is-placeholder,
input.ace-select::placeholder { color: var(--ace-muted-foreground); opacity: 1; }
input.ace-select { cursor: text; }
input.ace-select[aria-expanded="true"] { cursor: text; }
.ace-select-wrap.has-clear input.ace-select { padding-right: 52px; }
.ace-select-clear {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 28px;
  display: flex;
  align-items: center;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--ace-muted-foreground);
  cursor: pointer;
}
.ace-select-clear:hover { color: var(--ace-foreground); }
.ace-select-clear[hidden] { display: none; }
.ace-select-clear svg { width: 14px; height: 14px; }

/* Dropdown panel */
.ace-menu {
  position: fixed;
  z-index: 1100;
  box-sizing: border-box;
  max-height: 224px;
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--ace-menu-border);
  border-radius: 12px;
  background: var(--ace-popover);
  box-shadow: var(--ace-menu-shadow);
  font-family: var(--ace-font);
  animation: ace-dp-in 0.12s ease-out;
}
.ace-menu-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ace-foreground);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.1s;
}
.ace-menu-item:hover { background: var(--ace-menu-hover); }
/* Keyboard / pointer highlight: brand tint */
.ace-menu-item[data-active] { background: color-mix(in srgb, var(--ace-primary) 10%, transparent); }
/* The current value */
.ace-menu-item[aria-selected="true"] { font-weight: 600; color: var(--ace-primary); }
.ace-menu-item[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; background: none; }
.ace-menu-item .ace-menu-label,
.ace-menu-item .ace-menu-sublabel {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ace-menu-item .ace-menu-sublabel {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 400;
  color: var(--ace-menu-sublabel);
}
.ace-menu-group {
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ace-menu-sublabel);
  cursor: default;
}
.ace-menu-empty {
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ace-menu-sublabel);
}


/* ─────────────────────────── 10. HERO BUTTON ─────────────────────── */
/* Sparkle call-to-action button. One per page, for the main call to action in a hero.

     <button class="ace-hero-btn">Book a demo</button>

   CSS alone gives the dark pill, the sparkle icon (if present, see
   below), the brand-colour hover with glow, ring and scale, and the
   twinkling stars. ace-hero.js adds the icon automatically, a dashed
   spark line running round the edge, and particles streaming out on
   hover. The colour follows --ace-primary, or --ace-tone if set. */
.ace-hero-btn {
  --ace-hero-tone: var(--ace-tone, var(--ace-primary));
  --ace-hero-bg: #1d1d1d;
  --ace-hero-fg: #a3a3a3;            /* idle label: ~6:1 on #1d1d1d */
  --ace-hero-scale: 1;
  --ace-hero-wide: transparent;
  --ace-hero-inset: rgb(255 255 255 / 0.04);
  --ace-hero-ring: 0px;
  --ace-hero-dots: 0;

  appearance: none;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 192px;
  margin: 0;
  padding: 16px 28px 16px 22px;
  border: 0;
  border-radius: 29px;
  outline: none;
  overflow: visible;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--ace-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0.005em;
  white-space: nowrap;
  color: var(--ace-hero-fg);
  background-color: var(--ace-hero-bg);
  -webkit-tap-highlight-color: transparent;
  transform: scale(var(--ace-hero-scale)) translateZ(0);
  box-shadow:
    0 0 120px var(--ace-hero-wide),
    0 4px 12px rgb(0 0 0 / 0.05),
    0 1px 2px rgb(0 0 0 / 0.1),
    inset 0 1px 1px var(--ace-hero-inset),
    0 0 0 var(--ace-hero-ring) color-mix(in srgb, var(--ace-hero-tone) 40%, transparent);
  transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s, color 0.3s;
}
/* Blurred brand glow under the button, shown on hover */
.ace-hero-btn::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 15%;
  right: 15%;
  bottom: -12px;
  height: 24px;
  border-radius: 29px;
  background: var(--ace-hero-tone);
  filter: blur(16px);
  opacity: 0;
  transition: opacity 0.4s;
  transform: translateZ(0);
}
.ace-hero-label { position: relative; z-index: 1; display: block; }
/* Idle: the label fades into the button towards the right */
.ace-hero-label::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(to right, transparent, var(--ace-hero-bg));
  opacity: 0.4;
  transition: opacity 0.4s;
}

.ace-hero-btn:hover,
.ace-hero-btn:focus-visible {
  --ace-hero-scale: 1.1;
  --ace-hero-wide: color-mix(in srgb, var(--ace-hero-tone) 60%, transparent);
  --ace-hero-inset: rgb(255 255 255 / 0.35);
  --ace-hero-ring: 4px;
  --ace-hero-dots: 0.7;
  color: #fff;
  background-color: var(--ace-hero-tone);
}
.ace-hero-btn:hover::before,
.ace-hero-btn:focus-visible::before { opacity: 1; }
.ace-hero-btn:hover .ace-hero-label::before,
.ace-hero-btn:focus-visible .ace-hero-label::before { opacity: 0; }
.ace-hero-btn:hover:active { --ace-hero-scale: 1.05; }
.ace-hero-btn:disabled { cursor: not-allowed; opacity: 0.5; transform: none; }

/* Sparkle icon: three stars that twinkle in turn on hover */
.ace-hero-icon {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 26px;
  fill: currentColor;
  overflow: visible;
  pointer-events: none;
}
.ace-hero-icon path { transform: translateZ(0); }
.ace-hero-icon path:nth-child(1) { opacity: 0.25; transform-origin: 25% 14.58%; }
.ace-hero-icon path:nth-child(2) { opacity: 1;    transform-origin: 60.42% 50%; }
.ace-hero-icon path:nth-child(3) { opacity: 0.5;  transform-origin: 25% 85.42%; }
.ace-hero-btn:hover .ace-hero-icon path:nth-child(1),
.ace-hero-btn:focus-visible .ace-hero-icon path:nth-child(1) { animation: ace-hero-star-1 2s ease-in-out infinite; }
.ace-hero-btn:hover .ace-hero-icon path:nth-child(2),
.ace-hero-btn:focus-visible .ace-hero-icon path:nth-child(2) { animation: ace-hero-star-2 2s ease-in-out infinite; }
.ace-hero-btn:hover .ace-hero-icon path:nth-child(3),
.ace-hero-btn:focus-visible .ace-hero-icon path:nth-child(3) { animation: ace-hero-star-3 2s ease-in-out infinite; }
@keyframes ace-hero-star-1 {
  0%, 15%   { transform: scale(1);   opacity: 0.25; }
  30%       { transform: scale(1.5); opacity: 0.5; }
  45%, 100% { transform: scale(1);   opacity: 0.25; }
}
@keyframes ace-hero-star-2 {
  0%        { transform: scale(1);    opacity: 1; }
  15%, 30%  { transform: scale(0.5);  opacity: 0.25; }
  45%       { transform: scale(1.15); opacity: 1; }
  62%, 100% { transform: scale(1);    opacity: 1; }
}
@keyframes ace-hero-star-3 {
  0%        { transform: scale(1);    opacity: 0.5; }
  15%       { transform: scale(1.25); opacity: 1; }
  30%, 100% { transform: scale(1);    opacity: 0.5; }
}

/* Added by ace-hero.js: dashed spark line round the edge … */
.ace-hero-stroke {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: hard-light;
}
.ace-hero-stroke svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: color-mix(in oklch, var(--ace-hero-tone), white 30%);
  stroke-width: 0.75px;
  stroke-dasharray: 1.5 14;
  stroke-dashoffset: 22;
  opacity: 0;
}
.ace-hero-stroke svg + svg { stroke-width: 1px; stroke-opacity: 0.5; filter: blur(3px); }
.ace-hero-btn:hover .ace-hero-stroke svg,
.ace-hero-btn:focus-visible .ace-hero-stroke svg { animation: ace-hero-stroke 2s linear infinite; }
@keyframes ace-hero-stroke {
  0%       { opacity: 0; }
  25%, 75% { opacity: 1; }
  95%, 100% { stroke-dashoffset: 6; opacity: 0; }
}

/* … and particles streaming out from every side */
.ace-hero-dots {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: var(--ace-hero-dots);
  transition: opacity 0.15s;
}
.ace-hero-dots i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
  background: color-mix(in oklch, var(--ace-hero-tone), white 25%);
  transform: scale(0);
  animation: ace-hero-dot var(--d) linear var(--delay) infinite paused;
}
.ace-hero-btn:hover .ace-hero-dots i,
.ace-hero-btn:focus-visible .ace-hero-dots i { animation-play-state: running; }
@keyframes ace-hero-dot {
  0%   { transform: translate(0, 0) scale(0); }
  15%  { transform: translate(calc(var(--dx) * 0.15), calc(var(--dy) * 0.15)) scale(1); }
  60%  { transform: translate(calc(var(--dx) * 0.6), calc(var(--dy) * 0.6)) scale(1); }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); }
}

/* Dark pages: lift the resting button off the background */
.dark .ace-hero-btn,
[data-theme="dark"] .ace-hero-btn { --ace-hero-bg: #27272a; --ace-hero-inset: rgb(255 255 255 / 0.08); }
@media (prefers-color-scheme: dark) {
  .ace-auto-dark:not([data-theme="light"]) .ace-hero-btn { --ace-hero-bg: #27272a; --ace-hero-inset: rgb(255 255 255 / 0.08); }
}

/* Visitors who asked for less motion get the colours, not the movement */
@media (prefers-reduced-motion: reduce) {
  .ace-hero-btn { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
  .ace-hero-btn:hover, .ace-hero-btn:focus-visible { --ace-hero-scale: 1; --ace-hero-dots: 0; }
  .ace-hero-btn .ace-hero-icon path,
  .ace-hero-btn .ace-hero-stroke svg { animation: none !important; }
}

/* ═══════════════ NAVBARS (from src/navbar.css) ═══════════════ */
/* AceCSS's own components, kept in src/ and appended to ace.css by
   build.py after the kit sections. Edit this file, not ace.css. */


/* ──────────────────────────────── 11. NAVBAR ─────────────────────── */
/* Floating glass pill navbar: sticky, blurred and tinted, with a pill
   that slides under the hovered link, a raised shadow once the page
   scrolls, and a menu that unfolds inside the pill on small screens.

     <header class="ace-navbar">
       <nav class="ace-navbar-bar" aria-label="Main">
         <div class="ace-navbar-row">
           <a class="ace-navbar-brand" href="/">
             <span class="ace-navbar-logo">…svg…</span>Acme
           </a>
           <ul class="ace-navbar-links">
             <li><a href="/models">Models</a></li>
             …
           </ul>
           <div class="ace-navbar-actions">
             <a class="ace-navbar-link ace-navbar-secondary" href="/signin">Sign in</a>
             <a class="ace-navbar-cta" href="/signup">Get started</a>
             <button class="ace-navbar-toggle" type="button" aria-label="Menu"></button>
           </div>
         </div>
       </nav>
     </header>
     <script src="ace-navbar.js" defer></script>

   CSS alone gives the glass bar and the layout. ace-navbar.js adds the
   hover pill, the scrolled shadow and the mobile menu (built from the
   links and .ace-navbar-secondary items). Colours follow
   --ace-foreground / --ace-background, so dark mode works the same way
   as the rest of AceCSS (.dark, [data-theme="dark"], .ace-auto-dark).
   For refraction of the real page behind the bar, use
   .ace-navbar-liquid (section 12) instead. */
.ace-navbar {
  --ace-nav-ink: var(--ace-foreground, #0c0a09);
  --ace-nav-halo: var(--ace-background, #ffffff);
  --ace-nav-glass: color-mix(in srgb, var(--ace-background, #fbfaf9) 94%, transparent);
  --ace-nav-cta-bg: var(--ace-nav-ink);
  --ace-nav-cta-fg: var(--ace-nav-halo);
  --ace-nav-ease: cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quint */
  --ace-nav-max: 64rem;
  --ace-nav-shadow: 0 2px 6px -2px rgb(12 10 9 / 0.08), 0 12px 32px -14px rgb(12 10 9 / 0.15);
  --ace-nav-shadow-raised: 0 4px 10px -3px rgb(12 10 9 / 0.1), 0 18px 40px -16px rgb(12 10 9 / 0.2);
  --ace-nav-rim: inset 0 1px 0 rgb(255 255 255 / 0.95), inset 0 0 0 1px rgb(255 255 255 / 0.5);
  --ace-nav-grain: 0.03;
  --ace-nav-radius: 28px;
  /* Liquid glass (ace-navbar.js) */
  --ace-nav-specular: 1;             /* rim highlight strength */
  --ace-nav-bezel: 16;               /* px: width of the curved rim */
  --ace-nav-reach: 20;               /* px: how far past the edge the rim pulls content from (Chromium) */
  --ace-nav-frost: 10;               /* px: backdrop blur under the lens (Chromium) */
  --ace-nav-fringe: 0.12;            /* colour fringe where the rim bends most (Chromium) */

  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  box-sizing: border-box;
  overflow-x: clip;                  /* the lens backdrop reaches past the bar */
  padding: 12px 12px 0;
  font-family: var(--ace-font, 'Inter', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 640px) {
  .ace-navbar { padding: 16px 16px 0; }
}
.ace-navbar *,
.ace-navbar *::before,
.ace-navbar *::after { box-sizing: border-box; }

/* ── The glass pill ── */
.ace-navbar-bar {
  position: relative;
  width: 100%;
  max-width: var(--ace-nav-max);
  margin: 0 auto;
  border-radius: var(--ace-nav-radius);
  box-shadow: var(--ace-nav-shadow);
  transition: box-shadow 0.5s var(--ace-nav-ease);
}
.ace-navbar.is-scrolled .ace-navbar-bar { box-shadow: var(--ace-nav-shadow-raised); }

/* Blur + tint + rim highlight */
.ace-navbar-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--ace-nav-glass);
  box-shadow: var(--ace-nav-rim);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
}
/* Liquid glass (ace-navbar.js): the canvas paints the tint, thinner over
   the rim, the grain and the light on the rim. In Chromium the backdrop
   layer reaches past the bar and an SVG lens bends that content in
   across the rim, clipped back to the bar's shape. */
.ace-navbar-glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s var(--ace-nav-ease);
}
.ace-navbar-bar.has-glass .ace-navbar-glass { opacity: 1; }
.ace-navbar-bar.has-glass::before {
  background: transparent;
  box-shadow: none;
}
.ace-navbar-bar.has-glass::after { display: none; }   /* grain is in the canvas */
.ace-navbar-bar.has-lens::before {
  inset: calc(var(--ace-nav-reach-px) * -1);
  border-radius: 0;
  clip-path: inset(var(--ace-nav-reach-px) round var(--ace-nav-radius));
  backdrop-filter: var(--ace-nav-lens) saturate(1.5);
}
.ace-navbar-probe {
  position: absolute;
  width: 0;
  height: 0;
  background: var(--ace-nav-glass);
  pointer-events: none;
}
/* Film grain (no-JS fallback). No mix-blend-mode here: it would isolate
   the bar and stop backdrop-filter seeing the page in Chrome. */
.ace-navbar-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--ace-nav-grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ace-navbar-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 56px;
  padding: 0 10px 0 14px;
}

/* Text halo keeps labels readable over busy backgrounds */
.ace-navbar-row a:not(.ace-navbar-cta),
.ace-navbar-menu a {
  text-shadow:
    0 0 6px color-mix(in srgb, var(--ace-nav-halo) 90%, transparent),
    0 0 14px color-mix(in srgb, var(--ace-nav-halo) 60%, transparent);
}

/* ── Brand ── */
.ace-navbar-brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ace-nav-ink);
  text-decoration: none;
  outline: none;
}
.ace-navbar-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: var(--ace-nav-halo);
  background: var(--ace-nav-ink);
  box-shadow:
    0 1px 2px rgb(12 10 9 / 0.2),
    0 2px 6px -2px rgb(12 10 9 / 0.15),
    inset 0 1px 0 rgb(255 255 255 / 0.18);
}
.ace-navbar-logo::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0.14), transparent);
}
.ace-navbar-logo svg { position: relative; width: 14px; height: 14px; fill: currentColor; }

/* ── Centre links ── */
.ace-navbar-links {
  position: absolute;
  left: 50%;
  display: none;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  .ace-navbar-links { display: flex; }
}
.ace-navbar-links > li { position: relative; }

.ace-navbar-links a,
.ace-navbar-link {
  position: relative;
  display: block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 20px;
  color: color-mix(in srgb, var(--ace-nav-ink) 86%, transparent);
  text-decoration: none;
  outline: none;
  transition: color 0.2s;
}
.ace-navbar-link { padding: 6px 12px; }
.ace-navbar-links a:hover,
.ace-navbar-links a[aria-current="page"],
.ace-navbar-link:hover { color: var(--ace-nav-ink); }

/* Pill that slides under the hovered link (added by ace-navbar.js) */
.ace-navbar-links > .ace-navbar-pill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  background: color-mix(in srgb, var(--ace-nav-ink) 6%, transparent);
  transition:
    transform 0.35s var(--ace-nav-ease),
    width 0.35s var(--ace-nav-ease),
    opacity 0.2s;
}
.ace-navbar-pill.is-placing { transition: opacity 0.2s; }

/* ── Right side ── */
.ace-navbar-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
}
.ace-navbar-secondary { display: none; }
@media (min-width: 640px) {
  .ace-navbar-secondary { display: block; }
}

.ace-navbar-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: var(--ace-nav-cta-fg);
  background: var(--ace-nav-cta-bg);
  text-decoration: none;
  outline: none;
  isolation: isolate;
  box-shadow:
    0 0 0 1px var(--ace-nav-cta-bg),
    0 1px 2px rgb(12 10 9 / 0.2),
    0 4px 10px -3px rgb(12 10 9 / 0.2),
    inset 0 1px 0 rgb(255 255 255 / 0.2);
  transition: transform 0.2s var(--ace-nav-ease);
  -webkit-tap-highlight-color: transparent;
}
/* Top sheen at rest, flat lift on hover */
.ace-navbar-cta::before,
.ace-navbar-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  transition: opacity 0.2s, background-color 0.2s;
}
.ace-navbar-cta::before { background: linear-gradient(to bottom, rgb(255 255 255 / 0.12), transparent); }
.ace-navbar-cta::after { background-color: rgb(255 255 255 / 0); }
.ace-navbar-cta:hover::before { opacity: 0; }
.ace-navbar-cta:hover::after { background-color: rgb(255 255 255 / 0.08); }
.ace-navbar-cta:active { transform: scale(0.97); }

/* ── Hamburger ── */
.ace-navbar-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--ace-nav-ink);
  background: transparent;
  cursor: pointer;
  outline: none;
  transition: background-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.ace-navbar-toggle:hover { background: color-mix(in srgb, var(--ace-nav-ink) 6%, transparent); }
@media (min-width: 768px) {
  .ace-navbar-toggle { display: none; }
}
.ace-navbar-toggle::before,
.ace-navbar-toggle::after {
  content: '';
  position: absolute;
  left: 10px;
  width: 16px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 0.3s var(--ace-nav-ease);
}
.ace-navbar-toggle::before { top: 13px; }
.ace-navbar-toggle::after { top: 21px; }
.ace-navbar-toggle[aria-expanded="true"]::before { transform: translateY(4px) rotate(45deg); }
.ace-navbar-toggle[aria-expanded="true"]::after { transform: translateY(-4px) rotate(-45deg); }

/* ── Mobile menu: unfolds inside the pill ── */
.ace-navbar-menu {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ace-nav-ease), visibility 0.4s;
  visibility: hidden;
}
.ace-navbar-menu > div { min-height: 0; overflow: hidden; }
.ace-navbar.is-open .ace-navbar-menu { grid-template-rows: 1fr; visibility: visible; }
.ace-navbar-menu ul {
  margin: 0;
  padding: 4px 8px 10px;
  list-style: none;
  border-top: 1px solid color-mix(in srgb, var(--ace-nav-ink) 7%, transparent);
}
.ace-navbar-menu a {
  display: block;
  padding: 11px 12px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--ace-nav-ink) 86%, transparent);
  text-decoration: none;
  outline: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s, transform 0.4s var(--ace-nav-ease), background-color 0.2s, color 0.2s;
}
.ace-navbar.is-open .ace-navbar-menu a { opacity: 1; transform: none; }
.ace-navbar-menu a:hover,
.ace-navbar-menu a[aria-current="page"] {
  color: var(--ace-nav-ink);
  background: color-mix(in srgb, var(--ace-nav-ink) 6%, transparent);
}
@media (min-width: 768px) {
  .ace-navbar-menu { display: none; }
}

/* ── Focus ── */
.ace-navbar-brand:focus-visible,
.ace-navbar-links a:focus-visible,
.ace-navbar-link:focus-visible,
.ace-navbar-toggle:focus-visible,
.ace-navbar-menu a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ace-nav-ink) 30%, transparent);
  outline-offset: 2px;
}
.ace-navbar-brand:focus-visible { outline-offset: 4px; }
.ace-navbar-cta:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ace-nav-ink) 40%, transparent);
  outline-offset: 2px;
}

/* ── Dark ── */
.dark .ace-navbar,
[data-theme="dark"] .ace-navbar,
.ace-navbar.dark,
.ace-navbar[data-theme="dark"] {
  --ace-nav-glass: color-mix(in srgb, var(--ace-background, #18181b) 86%, transparent);
  --ace-nav-shadow: 0 2px 8px -2px rgb(0 0 0 / 0.4), 0 14px 36px -14px rgb(0 0 0 / 0.65);
  --ace-nav-shadow-raised: 0 4px 12px -3px rgb(0 0 0 / 0.5), 0 20px 44px -16px rgb(0 0 0 / 0.75);
  --ace-nav-rim: inset 0 1px 0 rgb(255 255 255 / 0.08), inset 0 0 0 1px rgb(255 255 255 / 0.06);
  --ace-nav-grain: 0.04;
  --ace-nav-specular: 0.45;
}
.dark .ace-navbar-logo::before,
[data-theme="dark"] .ace-navbar-logo::before { background: linear-gradient(to bottom, rgb(255 255 255 / 0.4), transparent); }
.dark .ace-navbar-cta,
[data-theme="dark"] .ace-navbar-cta {
  box-shadow:
    0 0 0 1px var(--ace-nav-cta-bg),
    0 1px 2px rgb(0 0 0 / 0.5),
    0 4px 12px -3px rgb(0 0 0 / 0.6),
    inset 0 1px 0 #fff;
}
.dark .ace-navbar-cta::before,
[data-theme="dark"] .ace-navbar-cta::before { background: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.06)); }
.dark .ace-navbar-cta:hover::after,
[data-theme="dark"] .ace-navbar-cta:hover::after { background-color: rgb(0 0 0 / 0.06); }

@media (prefers-color-scheme: dark) {
  .ace-auto-dark:not([data-theme="light"]) .ace-navbar {
    --ace-nav-glass: color-mix(in srgb, var(--ace-background, #18181b) 86%, transparent);
    --ace-nav-shadow: 0 2px 8px -2px rgb(0 0 0 / 0.4), 0 14px 36px -14px rgb(0 0 0 / 0.65);
    --ace-nav-shadow-raised: 0 4px 12px -3px rgb(0 0 0 / 0.5), 0 20px 44px -16px rgb(0 0 0 / 0.75);
    --ace-nav-rim: inset 0 1px 0 rgb(255 255 255 / 0.08), inset 0 0 0 1px rgb(255 255 255 / 0.06);
    --ace-nav-grain: 0.04;
    --ace-nav-specular: 0.45;
  }
  .ace-auto-dark:not([data-theme="light"]) .ace-navbar-logo::before { background: linear-gradient(to bottom, rgb(255 255 255 / 0.4), transparent); }
  .ace-auto-dark:not([data-theme="light"]) .ace-navbar-cta {
    box-shadow:
      0 0 0 1px var(--ace-nav-cta-bg),
      0 1px 2px rgb(0 0 0 / 0.5),
      0 4px 12px -3px rgb(0 0 0 / 0.6),
      inset 0 1px 0 #fff;
  }
  .ace-auto-dark:not([data-theme="light"]) .ace-navbar-cta::before { background: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.06)); }
  .ace-auto-dark:not([data-theme="light"]) .ace-navbar-cta:hover::after { background-color: rgb(0 0 0 / 0.06); }
}

@media (prefers-reduced-motion: reduce) {
  .ace-navbar-bar,
  .ace-navbar-glass,
  .ace-navbar-pill,
  .ace-navbar-toggle::before,
  .ace-navbar-toggle::after,
  .ace-navbar-menu,
  .ace-navbar-menu a,
  .ace-navbar-cta { transition: none; }
}


/* ─────────────────────────── 12. LIQUID NAVBAR ───────────────────── */
/* The same floating navbar with real liquid glass: the page is
   photographed once (modern-screenshot) and the strip behind the bar is
   run through a WebGL lens every frame, so whatever scrolls underneath
   is magnified, bent in hard at the rim with a colour fringe, frosted
   and lit. Until the picture is ready (or without WebGL) it is frosted
   glass from backdrop-filter.

     <header class="ace-navbar-liquid" data-glass-exclude>
       <nav class="ace-navbar-liquid-bar" aria-label="Main">
         <div class="ace-navbar-liquid-row">
           <a class="ace-navbar-liquid-brand" href="/">
             <span class="ace-navbar-liquid-logo">…svg…</span>Acme
           </a>
           <ul class="ace-navbar-liquid-links">
             <li><a href="/models">Models</a></li>
             <li><a href="/pricing" aria-current="page">Pricing</a></li>
             …
           </ul>
           <div class="ace-navbar-liquid-actions">
             <a class="ace-navbar-liquid-signin" href="/signin">Sign in</a>
             <a class="ace-navbar-liquid-cta" href="/signup">Get started</a>
             <button class="ace-navbar-liquid-toggle" type="button" aria-label="Menu"></button>
           </div>
         </div>
       </nav>
     </header>
     <script src="ace-navbar-liquid.js" defer></script>

   Add data-glass-exclude to anything else that must not appear in the
   glass (other fixed overlays). Dark mode: .dark, [data-theme="dark"]
   or .ace-auto-dark on an ancestor. Extra round icon buttons (e.g. a
   theme switch) go in the actions as .ace-navbar-liquid-icon. */
.ace-navbar-liquid {
  --ace-liquid-ink: 12 10 9;
  --ace-liquid-halo: 255 255 255;
  --ace-liquid-fg: #0c0a09;
  --ace-liquid-page: #f7f6f4;
  --ace-liquid-card: #ffffff;
  --ace-liquid-line: #e7e5e4;
  --ace-liquid-muted: #78716c;
  --ace-liquid-tint: rgb(251 250 249 / 0.94);
  --ace-liquid-dark: 0;                /* read by the glass shader */
  --ace-liquid-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ace-liquid-spring: cubic-bezier(0.3, 1.25, 0.5, 1);   /* replaced by a real spring in JS */
  --ace-liquid-font: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --ace-liquid-shadow: 0 2px 6px -2px #0c0a0914, 0 12px 32px -14px #0c0a0926;
  --ace-liquid-shadow-raised: 0 4px 10px -3px #0c0a091a, 0 18px 40px -16px #0c0a0933;
  --ace-liquid-rim: inset 0 1px 0 rgb(255 255 255 / 0.95), inset 0 0 0 1px rgb(255 255 255 / 0.5);
  --ace-liquid-sheet-shadow:
    0 0 0 1px #0c0a0914, 0 1px 1px #0c0a090d, 0 4px 8px -2px #0c0a090f,
    0 16px 32px -8px #0c0a0917, 0 40px 72px -20px #0c0a091f,
    inset 0 1px 0 0 #ffffffe6;
  --ace-liquid-grain: 0.03;

  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 12px 0;
  font-family: var(--ace-liquid-font);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 640px) {
  .ace-navbar-liquid { padding: 16px 16px 0; }
}
.ace-navbar-liquid *,
.ace-navbar-liquid *::before,
.ace-navbar-liquid *::after { box-sizing: border-box; }

/* ── The bar ── */
.ace-navbar-liquid-bar {
  position: relative;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  border-radius: 9999px;
  box-shadow: var(--ace-liquid-shadow);
  transition: box-shadow 0.5s var(--ace-liquid-ease);
}
.ace-navbar-liquid.is-scrolled .ace-navbar-liquid-bar { box-shadow: var(--ace-liquid-shadow-raised); }

/* Glass layers (built by ace-navbar-liquid.js). Without JS, ::before is the frost. */
.ace-navbar-liquid-bar::before,
.ace-navbar-liquid-frost {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--ace-liquid-tint);
  box-shadow: var(--ace-liquid-rim);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
}
.ace-navbar-liquid-bar.has-glass::before { content: none; }
.ace-navbar-liquid-glass {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.ace-navbar-liquid-frost { box-shadow: none; }
.ace-navbar-liquid-rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--ace-liquid-rim);
}
/* Dark glass: a hairline of light along the top, fading toward the ends */
.ace-navbar-liquid-hairline {
  position: absolute;
  top: 0;
  left: 16%;
  right: 16%;
  z-index: 10;
  display: none;
  height: 1px;
  transform: scaleY(0.5);
  transform-origin: top;
  background: linear-gradient(to right, transparent, rgb(255 255 255 / 0.18), transparent);
}
.ace-navbar-liquid-lens {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.7s var(--ace-liquid-ease);
}
.ace-navbar-liquid-glass.is-live .ace-navbar-liquid-lens { opacity: 1; }

/* Faint grain so the glass reads as a material. No mix-blend-mode: it
   would isolate the bar and blind backdrop-filter in Chrome. */
.ace-navbar-liquid-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--ace-liquid-grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ── Row ── */
.ace-navbar-liquid-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 56px;
  padding: 0 10px 0 14px;
}
/* Halo keeps labels readable over whatever is refracted behind them */
.ace-navbar-liquid-row a:not(.ace-navbar-liquid-cta) {
  text-shadow: 0 0 6px rgb(var(--ace-liquid-halo) / 0.9), 0 0 14px rgb(var(--ace-liquid-halo) / 0.6);
}
.ace-navbar-liquid-row button { text-shadow: 0 0 6px rgb(var(--ace-liquid-halo) / 0.9); }

/* ── Brand ── */
.ace-navbar-liquid-brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgb(var(--ace-liquid-ink));
  text-decoration: none;
  outline: none;
  transition: color 0.5s;
}
.ace-navbar-liquid-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: var(--ace-liquid-page);
  background: var(--ace-liquid-fg);
  box-shadow: 0 1px 2px #0c0a0933, 0 2px 6px -2px #0c0a0926, inset 0 1px 0 #ffffff2e;
}
.ace-navbar-liquid-logo::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0.14), transparent);
}
.ace-navbar-liquid-logo svg { position: relative; width: 14px; height: 14px; fill: currentColor; }

/* ── Desktop links ── */
.ace-navbar-liquid-links {
  position: absolute;
  left: 50%;
  display: none;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  .ace-navbar-liquid-links { display: flex; }
}
.ace-navbar-liquid-links > li { position: relative; }
.ace-navbar-liquid-links a {
  position: relative;
  display: block;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.005em;
  color: rgb(var(--ace-liquid-ink) / 0.86);
  text-decoration: none;
  outline: none;
  transition: color 0.2s;
}
.ace-navbar-liquid-links a:hover { color: rgb(var(--ace-liquid-ink)); }
.ace-navbar-liquid-links a[aria-current="page"] {
  color: rgb(var(--ace-liquid-ink));
  background: rgb(var(--ace-liquid-ink) / 0.07);
  box-shadow: inset 0 0 0 1px rgb(var(--ace-liquid-ink) / 0.06);
}
/* Hover highlight: snaps in under the cursor, then springs between links */
.ace-navbar-liquid-links > .ace-navbar-liquid-pill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: 9999px;
  pointer-events: none;
  opacity: 0;
  background: rgb(var(--ace-liquid-ink) / 0.06);
  transition:
    transform 0.4s var(--ace-liquid-spring),
    width 0.4s var(--ace-liquid-spring),
    opacity 0.2s var(--ace-liquid-ease);
}
.ace-navbar-liquid-links > .ace-navbar-liquid-pill.is-snapping { transition: opacity 0.2s var(--ace-liquid-ease); }

/* ── Right side ── */
.ace-navbar-liquid-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
}
.ace-navbar-liquid-signin {
  display: none;
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 20px;
  color: rgb(var(--ace-liquid-ink) / 0.86);
  text-decoration: none;
  outline: none;
  transition: color 0.2s;
}
.ace-navbar-liquid-signin:hover { color: rgb(var(--ace-liquid-ink)); }
@media (min-width: 640px) {
  .ace-navbar-liquid-signin { display: block; }
}

.ace-navbar-liquid-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 9999px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: var(--ace-liquid-page);
  background: var(--ace-liquid-fg);
  text-decoration: none;
  outline: none;
  isolation: isolate;
  box-shadow: 0 0 0 1px var(--ace-liquid-fg), 0 1px 2px #0c0a0933, 0 4px 10px -3px #0c0a0933, inset 0 1px 0 #ffffff33;
  transition: transform 0.2s var(--ace-liquid-ease);
  -webkit-tap-highlight-color: transparent;
}
.ace-navbar-liquid-cta::before,
.ace-navbar-liquid-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  transition: opacity 0.2s, background-color 0.2s;
}
.ace-navbar-liquid-cta::before { background: linear-gradient(to bottom, rgb(255 255 255 / 0.12), transparent); }
.ace-navbar-liquid-cta::after { background-color: rgb(255 255 255 / 0); }
.ace-navbar-liquid-cta:hover::before { opacity: 0; }
.ace-navbar-liquid-cta:hover::after { background-color: rgb(255 255 255 / 0.08); }
.ace-navbar-liquid-cta:active { transform: scale(0.97); }

/* ── Round icon button (theme switch, search…) ── */
.ace-navbar-liquid-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  color: rgb(var(--ace-liquid-ink) / 0.86);
  background: transparent;
  cursor: pointer;
  outline: none;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.ace-navbar-liquid-icon:hover {
  color: rgb(var(--ace-liquid-ink));
  background: rgb(var(--ace-liquid-ink) / 0.06);
}
.ace-navbar-liquid-icon:focus-visible { outline: 2px solid rgb(var(--ace-liquid-ink) / 0.3); }
.ace-navbar-liquid-icon svg { width: 18px; height: 18px; filter: drop-shadow(0 0 4px rgb(var(--ace-liquid-halo) / 0.9)); }

/* ── Menu button ── */
.ace-navbar-liquid-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  color: rgb(var(--ace-liquid-ink));
  background: transparent;
  cursor: pointer;
  outline: none;
  transition: background-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.ace-navbar-liquid-toggle:hover { background: rgb(var(--ace-liquid-ink) / 0.06); }
@media (min-width: 768px) {
  .ace-navbar-liquid-toggle { display: none; }
}
.ace-navbar-liquid-toggle::before,
.ace-navbar-liquid-toggle::after {
  content: '';
  position: absolute;
  left: 10px;
  width: 16px;
  height: 1.5px;
  border-radius: 9999px;
  background: currentColor;
  transition: transform 0.3s var(--ace-liquid-ease), top 0.3s var(--ace-liquid-ease);
}
.ace-navbar-liquid-toggle::before { top: 13px; }
.ace-navbar-liquid-toggle::after { top: 21px; }
.ace-navbar-liquid-toggle[aria-expanded="true"]::before { top: 17px; transform: rotate(45deg); }
.ace-navbar-liquid-toggle[aria-expanded="true"]::after { top: 17px; transform: rotate(-45deg); }

/* ── Mobile sheet: a card that drops in under the bar ── */
.ace-navbar-liquid-sheet {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 8px;
  padding: 6px;
  border-radius: 16px;
  background: var(--ace-liquid-card);
  box-shadow: var(--ace-liquid-sheet-shadow);
  transform-origin: top;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(0.99);
  transition:
    opacity 0.28s var(--ace-liquid-ease),
    transform 0.28s var(--ace-liquid-ease),
    visibility 0s 0.28s;
}
.ace-navbar-liquid.is-open .ace-navbar-liquid-sheet {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.28s var(--ace-liquid-ease), transform 0.28s var(--ace-liquid-ease);
}
.ace-navbar-liquid-sheet.is-entering { transform: translateY(-6px) scale(0.98); transition: none; }
@media (min-width: 768px) {
  .ace-navbar-liquid-sheet { display: none; }
}
.ace-navbar-liquid-sheet ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ace-navbar-liquid-sheet a {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ace-liquid-muted);
  text-decoration: none;
  outline: none;
  transition: background-color 0.2s, color 0.2s;
}
.ace-navbar-liquid-sheet a:hover {
  color: var(--ace-liquid-fg);
  background: color-mix(in srgb, var(--ace-liquid-fg) 4%, transparent);
}
.ace-navbar-liquid-sheet a:focus-visible { background: color-mix(in srgb, var(--ace-liquid-fg) 5%, transparent); }
.ace-navbar-liquid-sheet a[aria-current="page"] {
  color: var(--ace-liquid-fg);
  background: color-mix(in srgb, var(--ace-liquid-fg) 6%, transparent);
}
.ace-navbar-liquid-sheet .ace-navbar-liquid-sheet-signin {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--ace-liquid-line);
}
@media (min-width: 640px) {
  .ace-navbar-liquid-sheet .ace-navbar-liquid-sheet-signin { display: none; }
}

/* ── Focus ── */
.ace-navbar-liquid-brand:focus-visible { outline: 2px solid rgb(var(--ace-liquid-ink) / 0.3); outline-offset: 4px; }
.ace-navbar-liquid-links a:focus-visible,
.ace-navbar-liquid-signin:focus-visible,
.ace-navbar-liquid-toggle:focus-visible { outline: 2px solid rgb(var(--ace-liquid-ink) / 0.3); }
.ace-navbar-liquid-cta:focus-visible { outline: 2px solid rgb(var(--ace-liquid-ink) / 0.4); outline-offset: 2px; }

/* ── Dark ── */
.dark .ace-navbar-liquid,
[data-theme="dark"] .ace-navbar-liquid {
  --ace-liquid-ink: 250 250 250;
  --ace-liquid-halo: 11 11 13;
  --ace-liquid-fg: #fafafa;
  --ace-liquid-page: #09090b;
  --ace-liquid-card: #131316;
  --ace-liquid-line: #26262b;
  --ace-liquid-muted: #a1a1aa;
  --ace-liquid-tint: rgb(40 40 43 / 0.9);
  --ace-liquid-dark: 1;
  --ace-liquid-shadow: 0 2px 8px -2px #00000066, 0 14px 36px -14px #000000a6;
  --ace-liquid-shadow-raised: 0 4px 12px -3px #00000080, 0 20px 44px -16px #000000bf;
  --ace-liquid-rim: inset 0 1px 0 rgb(255 255 255 / 0.07);
  --ace-liquid-sheet-shadow:
    0 0 0 1px #ffffff1c, 0 1px 1px #00000080, 0 4px 8px -2px #00000073,
    0 16px 32px -8px #00000099, 0 40px 72px -20px #000000bf,
    inset 0 1px 0 0 #ffffff14;
  --ace-liquid-grain: 0;
}
.dark .ace-navbar-liquid-hairline,
[data-theme="dark"] .ace-navbar-liquid-hairline { display: block; }
.dark .ace-navbar-liquid-logo::before,
[data-theme="dark"] .ace-navbar-liquid-logo::before { background: linear-gradient(to bottom, rgb(255 255 255 / 0.4), transparent); }
.dark .ace-navbar-liquid-cta,
[data-theme="dark"] .ace-navbar-liquid-cta {
  box-shadow: 0 0 0 1px var(--ace-liquid-fg), 0 1px 2px #00000080, 0 4px 12px -3px #00000099, inset 0 1px 0 #ffffff;
}
.dark .ace-navbar-liquid-cta::before,
[data-theme="dark"] .ace-navbar-liquid-cta::before { background: linear-gradient(to bottom, rgb(255 255 255 / 0), rgb(0 0 0 / 0.06)); }
.dark .ace-navbar-liquid-cta:hover::after,
[data-theme="dark"] .ace-navbar-liquid-cta:hover::after { background-color: rgb(0 0 0 / 0.06); }
.dark .ace-navbar-liquid-sheet a[aria-current="page"],
[data-theme="dark"] .ace-navbar-liquid-sheet a[aria-current="page"] {
  background: color-mix(in srgb, var(--ace-liquid-fg) 8%, transparent);
  box-shadow: inset 0 0 0 1px #ffffff0f;
}

@media (prefers-color-scheme: dark) {
  .ace-auto-dark:not([data-theme="light"]) .ace-navbar-liquid {
    --ace-liquid-ink: 250 250 250;
    --ace-liquid-halo: 11 11 13;
    --ace-liquid-fg: #fafafa;
    --ace-liquid-page: #09090b;
    --ace-liquid-card: #131316;
    --ace-liquid-line: #26262b;
    --ace-liquid-muted: #a1a1aa;
    --ace-liquid-tint: rgb(40 40 43 / 0.9);
    --ace-liquid-dark: 1;
    --ace-liquid-shadow: 0 2px 8px -2px #00000066, 0 14px 36px -14px #000000a6;
    --ace-liquid-shadow-raised: 0 4px 12px -3px #00000080, 0 20px 44px -16px #000000bf;
    --ace-liquid-rim: inset 0 1px 0 rgb(255 255 255 / 0.07);
    --ace-liquid-sheet-shadow:
      0 0 0 1px #ffffff1c, 0 1px 1px #00000080, 0 4px 8px -2px #00000073,
      0 16px 32px -8px #00000099, 0 40px 72px -20px #000000bf,
      inset 0 1px 0 0 #ffffff14;
    --ace-liquid-grain: 0;
  }
  .ace-auto-dark:not([data-theme="light"]) .ace-navbar-liquid-hairline { display: block; }
  .ace-auto-dark:not([data-theme="light"]) .ace-navbar-liquid-logo::before { background: linear-gradient(to bottom, rgb(255 255 255 / 0.4), transparent); }
  .ace-auto-dark:not([data-theme="light"]) .ace-navbar-liquid-cta {
    box-shadow: 0 0 0 1px var(--ace-liquid-fg), 0 1px 2px #00000080, 0 4px 12px -3px #00000099, inset 0 1px 0 #ffffff;
  }
  .ace-auto-dark:not([data-theme="light"]) .ace-navbar-liquid-cta::before { background: linear-gradient(to bottom, rgb(255 255 255 / 0), rgb(0 0 0 / 0.06)); }
  .ace-auto-dark:not([data-theme="light"]) .ace-navbar-liquid-cta:hover::after { background-color: rgb(0 0 0 / 0.06); }
  .ace-auto-dark:not([data-theme="light"]) .ace-navbar-liquid-sheet a[aria-current="page"] {
    background: color-mix(in srgb, var(--ace-liquid-fg) 8%, transparent);
    box-shadow: inset 0 0 0 1px #ffffff0f;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ace-navbar-liquid-bar,
  .ace-navbar-liquid-lens,
  .ace-navbar-liquid-links > .ace-navbar-liquid-pill,
  .ace-navbar-liquid-toggle::before,
  .ace-navbar-liquid-toggle::after,
  .ace-navbar-liquid-cta { transition: none; }
  .ace-navbar-liquid-sheet,
  .ace-navbar-liquid.is-open .ace-navbar-liquid-sheet,
  .ace-navbar-liquid-sheet.is-entering { transform: none; }
}

/* ═══════════════ BRAND (from brand.css) ═══════════════ */
/* ═══════════════════════════════════════════════════════════════════
   ACECSS BRAND — the only file you need to edit to re-colour AceCSS.

   build.py appends this to the end of ace.css, so these values win over
   the defaults. Every hover, ring, highlight, date-picker band and badge
   shade is derived from these tokens. You never need to touch the
   component rules.

   Starts with the original coral palette. Change it, then run:  python3 build.py
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* Main brand colour: primary buttons, focus rings, selected dates,
     the active dropdown item, checkboxes and switches. */
  --ace-primary: #fc5731;
  --ace-primary-foreground: #ffffff;

  /* "Needs attention" toggle (amber by default) */
  --ace-attention: #d97706;

  /* Destructive actions (filled Delete confirm, red labels, errors) */
  --ace-destructive: #dc2626;
  --ace-destructive-text: #dc2626;

  /* Status badge tones. Keep them dark enough for white text (≥ 4.5:1). */
  --ace-tone-success: #047857;
  --ace-tone-warning: #b45309;
  --ace-tone-danger: #b91c1c;
  --ace-tone-info: #2563eb;

  /* Shape & type */
  --ace-radius: 8px;
  --ace-radius-sm: 6px;
  --ace-font: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Dark-mode variants: only the colours that shift in dark mode */
.dark,
[data-theme="dark"] {
  --ace-attention: #b45309;
  --ace-destructive-text: #f87171;
}
@media (prefers-color-scheme: dark) {
  .ace-auto-dark:not([data-theme="light"]) {
    --ace-attention: #b45309;
    --ace-destructive-text: #f87171;
  }
}