/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer theme, legacy, components, utilities;
@layer theme {
  :root, :host {
    --spacing: 4px;
    --tracking-tight: -0.025em;
    --color-canvas: var(--neutral-50);
    --color-surface: var(--neutral-0);
    --color-surface-subtle: var(--brand-50);
    --color-surface-muted: var(--neutral-100);
    --color-fg: var(--neutral-900);
    --color-fg-soft: var(--neutral-700);
    --color-fg-muted: var(--neutral-550);
    --color-fg-accent: var(--brand-900);
    --color-fg-on-accent: var(--neutral-0);
    --color-fg-faint: var(--neutral-300);
    --color-link: var(--brand-800);
    --color-brand: var(--brand-900);
    --color-brand-hover: var(--brand-800);
    --color-fg-on-brand: var(--neutral-0);
    --color-fg-on-brand-soft: var(--brand-100);
    --color-border: var(--neutral-200);
    --color-border-strong: var(--neutral-300);
    --color-control-border: var(--neutral-450);
    --color-control-border-hover: var(--neutral-500);
    --color-focus: var(--brand-700);
    --color-accent: var(--brand-900);
    --color-accent-hover: var(--brand-800);
    --color-accent-pressed: var(--brand-700);
    --color-accent-subtle: var(--brand-100);
    --color-fg-success: var(--green-700);
    --color-success-subtle: var(--green-50);
    --color-fg-warning: var(--amber-700);
    --color-warning-subtle: var(--amber-50);
    --color-fg-danger: var(--red-700);
    --color-danger: var(--red-700);
    --color-danger-hover: var(--red-800);
    --color-danger-subtle: var(--red-50);
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
    --text-2xs: 11px;
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 15px;
    --text-lg: 17px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 30px;
    --text-4xl: 36px;
    --text-5xl: 48px;
    --text-6xl: 60px;
    --text-input-touch: 16px;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-pill: 999px;
    --radius-control: var(--radius-lg);
    --radius-card: var(--radius-xl);
    --shadow-xs: 0 1px 2px  rgba(var(--brand-shadow-rgb), 0.04);
    --shadow-sm: 0 1px 3px  rgba(var(--brand-shadow-rgb), 0.06),
               0 1px 2px  rgba(var(--brand-shadow-rgb), 0.04);
    --shadow-md: 0 4px 12px rgba(var(--brand-shadow-rgb), 0.06);
    --shadow-lg: 0 12px 32px rgba(var(--brand-shadow-rgb), 0.08);
    --shadow-appnav: 0 1px 2px rgba(var(--brand-shadow-rgb), 0.06), 0 8px 24px rgba(var(--brand-shadow-rgb), 0.14);
    --shadow-action: 0 6px 18px rgba(var(--brand-shadow-rgb), 0.28);
    --shadow-header: 0 1px 2px rgba(var(--brand-shadow-rgb), 0.10), 0 6px 16px rgba(var(--brand-shadow-rgb), 0.16);
    --breakpoint-sm: 40rem;
    --breakpoint-lg: 64rem;
  }
  :root {
    --brand-950: #0c2b42;
    --brand-900: #10507b;
    --brand-800: #0d4163;
    --brand-700: #0b3551;
    --brand-600: #1b6aa0;
    --brand-500: #2178b3;
    --brand-300: #8cc6ec;
    --brand-100: #dbeefa;
    --brand-50: #f1f7fb;
    --brand-shadow-rgb: 16, 80, 123;
    --neutral-0: #ffffff;
    --neutral-50: #fafbfc;
    --neutral-100: #f3f4f6;
    --neutral-200: #e5e7eb;
    --neutral-300: #d1d5db;
    --neutral-400: #9ca3af;
    --neutral-450: #868e9a;
    --neutral-500: #6b7280;
    --neutral-550: #636b78;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;
    --night-950: #0b141b;
    --night-900: #121e28;
    --night-800: #1a2b38;
    --night-750: #1f3140;
    --night-700: #243646;
    --night-600: #2f4558;
    --night-550: #3a5163;
    --night-500: #5b7690;
    --night-400: #7590a6;
    --night-300: #93a7b7;
    --night-200: #c2d1dd;
    --night-100: #e8eff5;
    --green-950: #0f2a1f;
    --green-700: #2f7a5a;
    --green-300: #7fd0a5;
    --green-50: #ecf5f0;
    --amber-950: #2e2210;
    --amber-700: #8a5715;
    --amber-300: #e8b86a;
    --amber-50: #fbf3e6;
    --red-950: #3a1616;
    --red-800: #8e2a2a;
    --red-700: #a83232;
    --red-600: #b83636;
    --red-300: #f19c9c;
    --red-50: #fbeded;
    --sheet-head: #e8eef5;
    --sheet-counter: #10507b;
    --sheet-ok: #e2f2d3;
    --sheet-closed: #ffe95c;
    --sheet-school: #f7c6c6;
    --sheet-warn: #fed7aa;
    --sheet-warn-ink: #9a3412;
    --sheet-alert: #fecaca;
    --sheet-alert-ink: #991b1b;
    --sheet-rule: #b9bec3;
    --sheet-rule-day: #3a3f44;
    --tile-sky: #bae6fd;
    --tile-violet: #ddd6fe;
    --tile-mint: #a7f3d0;
    --tile-pink: #fbcfe8;
    --space-0-5: calc(var(--spacing) * 0.5);
    --space-1: calc(var(--spacing) * 1);
    --space-2: calc(var(--spacing) * 2);
    --space-3: calc(var(--spacing) * 3);
    --space-4: calc(var(--spacing) * 4);
    --space-5: calc(var(--spacing) * 5);
    --space-6: calc(var(--spacing) * 6);
    --space-8: calc(var(--spacing) * 8);
    --space-10: calc(var(--spacing) * 10);
    --space-12: calc(var(--spacing) * 12);
    --space-16: calc(var(--spacing) * 16);
    --space-20: calc(var(--spacing) * 20);
    --space-24: calc(var(--spacing) * 24);
    --border-subtle: 1px solid var(--color-border);
    --border-control: 1px solid var(--color-control-border);
    --tap-min: 44px;
    --control-h-sm: 44px;
    --control-h-lg: 56px;
    --chip-h: 32px;
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 32px;
    --icon-stroke: 1.75;
    --outline-w: 2px;
    --indicator-h: 3px;
    --list-icon-box: 32px;
    --empty-icon-box: 56px;
    --avatar: 36px;
    --avatar-sm: 28px;
    --avatar-lg: 44px;
    --switch-w: 44px;
    --switch-h: 26px;
    --switch-knob: 20px;
    --scrollbar-size: 10px;
    --measure: 32em;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --shell-max-w: 900px;
    --solo-max-w: 600px;
    --form-max-w: 640px;
    --doc-max-w: 760px;
    --doc-label-w: 190px;
    --doc-table-min-w: 520px;
    --site-max-w: 1120px;
    --device-w: 280px;
    --device-bezel: var(--neutral-900);
    --doc-frame-h: 640px;
    --header-h: 64px;
    --header-offset: calc(var(--header-h) + var(--safe-top));
    --logo-h: 40px;
    --appnav-item-h: 52px;
    --appnav-pad: var(--space-1);
    --appnav-h-mobile: calc(var(--appnav-item-h) + 2 * var(--appnav-pad) + 2px);
    --appnav-bar-h: calc(var(--tap-min) + 2 * var(--appnav-pad) + 1px);
    --appnav-offset: max(var(--space-3), var(--safe-bottom));
    --appnav-bg: var(--color-surface);
    @supports (color: color-mix(in lab, red, red)) {
      --appnav-bg: color-mix(in srgb, var(--color-surface) 92%, transparent);
    }
    --appnav-blur: 20px;
    --appnav-saturate: 180%;
    --header-lift: initial;
    --header-hide: initial;
    --header-dock: initial;
    --header-brand-dx: initial;
    --appnav-dock-left: initial;
    --appnav-dock-right: initial;
    --header-snap: 0s;
    --header-dock-scale: 0.8;
    --appnav-label-max: 8em;
    --badging-col-w: 480px;
    --badging-top-tablet: 40px;
    --badging-top-desk: 56px;
    --badging-pin-h: 72px;
    --badging-hello: 27px;
    --badging-change-w: 44px;
    --badging-change-label-w: 100px;
    --badging-identity-fade: 0.42s;
    --badging-logo-w: 132px;
    --badging-logo-h: 44px;
    --badging-clock: 68px;
    --badging-clock-sm: 52px;
    --badging-tray-h: 96px;
    --badging-tile-min: 52px;
    --badging-tile-icon: 36px;
    --badging-round: 72px;
    --badging-center: 64px;
    --badging-message-w: 112px;
    --badging-dot: 12px;
    --badging-count: 19px;
    --badging-actions-h: 116px;
    --badging-access-w: 260px;
    --badging-lift: 17px;
    --picto-xl: 68px;
    --picto-lg: 58px;
    --picto-eye: 56px;
    --picto-md: 52px;
    --picto-action: 60px;
    --picto-stage-w: 118px;
    --picto-stage-h: 72px;
    --picto-glow: drop-shadow(0 8px 16px rgba(var(--brand-shadow-rgb), 0.14));
    --picto-glow-lift: drop-shadow(0 10px 18px rgba(var(--brand-shadow-rgb), 0.18));
    --picto-particle-glow: 0 0 14px rgba(var(--brand-shadow-rgb), 0.16);
    --unlock-panel-w: 340px;
    --unlock-wordmark-w: 168px;
    --unlock-stage: 96px;
    --unlock-lock: 84px;
    --unlock-veil-in: 0.34s;
    --unlock-arrival-hold: 0.12s;
    --unlock-arrival-fade: 0.45s;
    --unlock-arrival-greet: 0.5s;
    --unlock-arrival-greet-delay: 0.27s;
    --desk-kpi-min: 88px;
    --desk-person-min: 120px;
    --register-aside-w: 320px;
    --popover-w: 420px;
    --tooltip-w: 260px;
    --plan-max-w: 1280px;
    --plan-gutter: var(--space-3);
    --plan-emp-w: 184px;
    --plan-sum-w: 148px;
    --plan-day-min: 120px;
    --plan-cell-min: 72px;
    --plan-axis-head-w: 72px;
    --plan-dot: 20px;
    --plan-half-dot: 16px;
    --plan-mday-min: 64px;
    --plan-mday-av: 18px;
    --prefs-abbr-w: 64px;
    --zone-map-h: 260px;
    --export-frame-h: 260px;
    --zone-pin: 16px;
    --site-dot: 10px;
    --repeat-num-w: 96px;
    --swatch: 30px;
    --suggest-max-h: 240px;
    --option-min: 88px;
    --picker-max-h: 420px;
    --pin-field-min: 180px;
    --modal-sm-w: 360px;
    --modal-w: 600px;
    --modal-wide-w: 760px;
    --modal-gutter: var(--space-3);
    --modal-gutter-x: var(--space-3);
    --modal-gutter-y: var(--space-4);
    --radius-modal: 16px;
    --modal-title: var(--text-xl);
    --modal-veil-mix: 55%;
    --modal-veil-soft-mix: 42%;
    --modal-veil: var(--neutral-950);
    @supports (color: color-mix(in lab, red, red)) {
      --modal-veil: color-mix(in srgb, var(--neutral-950) var(--modal-veil-mix), transparent);
    }
    --modal-veil-soft: var(--neutral-950);
    @supports (color: color-mix(in lab, red, red)) {
      --modal-veil-soft: color-mix(in srgb, var(--neutral-950) var(--modal-veil-soft-mix), transparent);
    }
    --modal-veil-on-brand: var(--neutral-950);
    @supports (color: color-mix(in lab, red, red)) {
      --modal-veil-on-brand: color-mix(in srgb, var(--neutral-950) var(--modal-veil-mix), var(--color-brand));
    }
    --modal-veil-soft-on-brand: var(--neutral-950);
    @supports (color: color-mix(in lab, red, red)) {
      --modal-veil-soft-on-brand: color-mix(in srgb, var(--neutral-950) var(--modal-veil-soft-mix), var(--color-brand));
    }
    --modal-veil-stacked-on-brand: var(--neutral-950);
    @supports (color: color-mix(in lab, red, red)) {
      --modal-veil-stacked-on-brand: color-mix(in srgb, var(--neutral-950) var(--modal-veil-soft-mix), var(--modal-veil-on-brand));
    }
    --modal-veil-on-canvas: var(--neutral-950);
    @supports (color: color-mix(in lab, red, red)) {
      --modal-veil-on-canvas: color-mix(in srgb, var(--neutral-950) var(--modal-veil-mix), var(--color-canvas));
    }
    --modal-veil-soft-on-canvas: var(--neutral-950);
    @supports (color: color-mix(in lab, red, red)) {
      --modal-veil-soft-on-canvas: color-mix(in srgb, var(--neutral-950) var(--modal-veil-soft-mix), var(--color-canvas));
    }
    --modal-veil-stacked-on-canvas: var(--neutral-950);
    @supports (color: color-mix(in lab, red, red)) {
      --modal-veil-stacked-on-canvas: color-mix(in srgb, var(--neutral-950) var(--modal-veil-soft-mix), var(--modal-veil-on-canvas));
    }
    --modal-cap-min: 8px;
    --modal-cap-h: max(var(--safe-top), var(--modal-cap-min));
    --modal-blur: 2px;
    --modal-drop: 100px;
    --modal-fade: 0.15s;
    --modal-move: 0.3s;
    --confirm-pop: 0.18s;
    --confirm-rise: 8px;
    --toast-w: 720px;
    --toast-in: 0.24s;
    --toast-rise: 12px;
    --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --z-raised: 3;
    --z-toolbar: 10;
    --z-header: 20;
    --z-appnav: 30;
    --z-header-docked: 35;
    --z-header-cap: 36;
    --z-dropdown: 40;
    --z-popover: 70;
    --z-modal: 900;
    --z-modal-panel: 910;
    --z-modal-cap: 920;
    --z-cinematic: 980;
    --z-toast: 1000;
    --z-tooltip: 1200;
    --z-session-lock: 2000;
    --duration-fast: 0.12s;
    --duration-base: 0.2s;
    --duration-header: 0.26s;
    --ease-header: cubic-bezier(0, 0, 0.58, 1);
    --press-scale: 0.98;
    --tracking-tight: -0.01em;
    --tracking-caps: 0.04em;
    --disabled-opacity: 0.5;
    --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus);
  }
  @media (min-width: 640px) {
    :root {
      --header-h: 80px;
      --logo-h: 48px;
      --plan-gutter: var(--space-4);
      --plan-emp-w: 136px;
      --plan-sum-w: 116px;
      --plan-mday-min: 96px;
      --plan-mday-av: 24px;
      --modal-gutter-x: var(--space-8);
      --modal-gutter-y: var(--space-12);
      --radius-modal: 22px;
      --export-frame-h: 420px;
      --modal-title: var(--text-2xl);
    }
  }
  @media (min-width: 1024px) {
    :root {
      --plan-emp-w: 184px;
      --plan-sum-w: 148px;
    }
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --color-canvas: var(--night-950);
      --color-surface: var(--night-900);
      --color-surface-subtle: var(--night-800);
      --color-surface-muted: var(--night-750);
      --color-fg: var(--night-100);
      --color-fg-soft: var(--night-200);
      --color-fg-muted: var(--night-300);
      --color-fg-accent: var(--brand-300);
      --color-fg-on-accent: var(--neutral-0);
      --color-fg-faint: var(--night-550);
      --color-link: var(--brand-300);
      --color-brand: var(--brand-950);
      --color-brand-hover: var(--brand-900);
      --color-fg-on-brand: var(--neutral-0);
      --color-fg-on-brand-soft: var(--brand-100);
      --color-border: var(--night-700);
      --color-border-strong: var(--night-600);
      --color-control-border: var(--night-500);
      --color-control-border-hover: var(--night-400);
      --color-focus: var(--brand-300);
      --color-accent: var(--brand-500);
      --color-accent-hover: var(--brand-600);
      --color-accent-pressed: var(--brand-800);
      --color-accent-subtle: var(--brand-950);
      --color-fg-success: var(--green-300);
      --color-success-subtle: var(--green-950);
      --color-fg-warning: var(--amber-300);
      --color-warning-subtle: var(--amber-950);
      --color-fg-danger: var(--red-300);
      --color-danger: var(--red-600);
      --color-danger-hover: var(--red-700);
      --color-danger-subtle: var(--red-950);
    }
  }
  :root[data-theme="dark"] {
    --color-canvas: var(--night-950);
    --color-surface: var(--night-900);
    --color-surface-subtle: var(--night-800);
    --color-surface-muted: var(--night-750);
    --color-fg: var(--night-100);
    --color-fg-soft: var(--night-200);
    --color-fg-muted: var(--night-300);
    --color-fg-accent: var(--brand-300);
    --color-fg-on-accent: var(--neutral-0);
    --color-fg-faint: var(--night-550);
    --color-link: var(--brand-300);
    --color-brand: var(--brand-950);
    --color-brand-hover: var(--brand-900);
    --color-fg-on-brand: var(--neutral-0);
    --color-fg-on-brand-soft: var(--brand-100);
    --color-border: var(--night-700);
    --color-border-strong: var(--night-600);
    --color-control-border: var(--night-500);
    --color-control-border-hover: var(--night-400);
    --color-focus: var(--brand-300);
    --color-accent: var(--brand-500);
    --color-accent-hover: var(--brand-600);
    --color-accent-pressed: var(--brand-800);
    --color-accent-subtle: var(--brand-950);
    --color-fg-success: var(--green-300);
    --color-success-subtle: var(--green-950);
    --color-fg-warning: var(--amber-300);
    --color-warning-subtle: var(--amber-950);
    --color-fg-danger: var(--red-300);
    --color-danger: var(--red-600);
    --color-danger-hover: var(--red-700);
    --color-danger-subtle: var(--red-950);
  }
  @media print {
    .sheet__table .sheet__th, .sheet__table .sheet__th-group, .sheet__table .sheet__total {
      background: var(--sheet-tint) !important;
      print-color-adjust: exact;
    }
    .sheet__table .sheet__total--counter {
      background: var(--sheet-ok) !important;
    }
    .sheet__table .sheet__th--counter, .sheet__table .sheet__th-group--counter {
      background: var(--sheet-counter) !important;
      color: var(--neutral-0) !important;
    }
    .sheet__table .sheet__abs {
      background: var(--sheet-abs) !important;
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--sheet-abs) 22%, var(--neutral-0)) !important;
      }
      color: var(--sheet-abs) !important;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in srgb, var(--sheet-abs) 55%, var(--neutral-950)) !important;
      }
      print-color-adjust: exact;
    }
    .sheet__table .sheet__row--blank > td, .sheet__table .sheet__row--blank > .sheet__half, .sheet__table .sheet__day--closed, .sheet__legend .sheet__key--closed {
      background: var(--sheet-closed) !important;
      print-color-adjust: exact;
    }
    .sheet__table td.sheet__date--school, .sheet__legend .sheet__key--school {
      background: var(--sheet-school) !important;
      print-color-adjust: exact;
    }
    .sheet__table .sheet__total--warn, .sheet__legend .sheet__key--warn {
      background: var(--sheet-warn) !important;
      color: var(--sheet-warn-ink) !important;
      print-color-adjust: exact;
    }
    .sheet__table .sheet__total--alert, .sheet__legend .sheet__key--alert {
      background: var(--sheet-alert) !important;
      color: var(--sheet-alert-ink) !important;
      print-color-adjust: exact;
    }
  }
}
@layer components {
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/css/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/css/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'Montserrat Alternates';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url('/css/fonts/montserrat-alternates-200-latin.woff2') format('woff2');
  }
  :where(.ui), :where(.ui) *:not(:where(svg, svg *, img, video, canvas, iframe, [data-ui-foreign], [data-ui-foreign] *)), :where(.ui)::before, :where(.ui)::after, :where(.ui) *::before, :where(.ui) *::after {
    all: revert;
  }
  :where(.ui), :where(.ui) *, :where(.ui) *::before, :where(.ui) *::after {
    box-sizing: border-box;
  }
  :where(.ui) {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    line-height: var(--leading-normal);
    letter-spacing: normal;
    text-transform: none;
    text-align: start;
    text-indent: 0;
    white-space: normal;
    word-spacing: normal;
    color: var(--color-fg);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :where(.ui):where(:root:not([data-theme="light"]) *) {
      color-scheme: dark;
    }
  }
  :where(.ui):where(:root[data-theme="dark"] *) {
    color-scheme: dark;
  }
  :where(body.ui-page) {
    box-sizing: border-box;
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--color-canvas);
  }
  :where(html:has(> body.ui-page)) {
    background: var(--color-canvas);
  }
  :where(.ui) :where(img, svg) {
    display: block;
    max-width: 100%;
    vertical-align: baseline;
  }
  :where(.ui) :where(svg) {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  :where(.ui) :where(button, input, select, textarea) {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
  }
  :where(.ui) :where(button) {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
  }
  :where(.ui) :where(fieldset) {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
  }
  :where(.ui) :where(legend) {
    padding: 0;
    margin-bottom: var(--space-2);
  }
  :where(.ui)[hidden], :where(.ui) [hidden] {
    display: none !important;
  }
  :where(.ui) [draggable="true"] {
    -webkit-user-drag: element;
    user-select: none;
  }
  :where(.ui) :where(h1, h2, h3, h4) {
    margin: 0;
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
  }
  :where(.ui) :where(h1) {
    font-size: var(--text-2xl);
  }
  :where(.ui) :where(h2) {
    font-size: var(--text-xl);
  }
  :where(.ui) :where(h3) {
    font-size: var(--text-lg);
  }
  :where(.ui) :where(h4) {
    font-size: var(--text-base);
  }
  :where(.ui) :where(p, ul, ol, dl, dd, figure) {
    margin: 0;
  }
  :where(.ui) :where(ul, ol) {
    padding: 0;
    list-style: none;
  }
  :where(.ui) :where(p + p) {
    margin-top: var(--space-3);
  }
  :where(.ui) :where(strong) {
    font-weight: var(--font-weight-semibold);
  }
  :where(.ui) :where(small) {
    font-size: var(--text-xs);
  }
  :where(.ui) :where(code) {
    font-family: var(--font-mono);
    font-size: 0.92em;
  }
  :where(.ui) :where(a) {
    color: var(--color-link);
    text-decoration: none;
    text-underline-offset: var(--outline-w);
  }
  @media (hover: hover) {
    :where(.ui) :where(a:hover) {
      text-decoration: underline;
    }
  }
  :where(.ui) :where(:focus) {
    outline: none;
  }
  :where(.ui) :where(:focus-visible) {
    outline: var(--outline-w) solid var(--color-focus);
    outline-offset: var(--outline-w);
    border-radius: var(--radius-sm);
  }
  :where(.ui) :where(button, input, select, textarea, a, summary):focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }
  :where(.ui) ::selection {
    background: var(--color-accent-subtle);
    color: var(--color-fg-accent);
  }
  :where(.ui) ::placeholder {
    color: var(--color-fg-muted);
    opacity: 1;
  }
  :where(.ui) :where(input, select, textarea) {
    font-size: var(--text-input-touch);
  }
  @media (min-width: 1024px) {
    :where(.ui) :where(input, select, textarea) {
      font-size: var(--text-base);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    :where(.ui), :where(.ui) *, :where(.ui) *::before, :where(.ui) *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }
  .app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
    background: var(--color-brand);
    color: var(--color-fg-on-brand);
    padding-top: var(--safe-top);
    transform: translateY(calc(-1 * var(--header-lift)));
  }
  .app-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: var(--space-2);
    align-items: center;
    max-width: var(--shell-max-w);
    min-height: var(--header-h);
    margin: 0 auto;
    padding: 0 max(var(--space-4), var(--safe-right)) 0 max(var(--space-4), var(--safe-left));
  }
  .app-header__brand {
    grid-column: 2;
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    border-radius: var(--radius-md);
    color: var(--color-fg-on-brand);
  }
  .app-header__picto {
    position: absolute;
    top: 50%;
    right: 100%;
    display: inline-flex;
    width: var(--icon-lg);
    height: var(--icon-lg);
    margin-right: var(--space-2);
    transform: translateY(-50%);
  }
  .app-header__picto svg {
    width: var(--icon-lg);
    height: var(--icon-lg);
  }
  .app-header__logo {
    width: auto;
    height: var(--logo-h);
  }
  .app-header__back, .app-header__action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-min);
    height: var(--tap-min);
    border-radius: var(--radius-md);
    color: var(--color-fg-on-brand);
  }
  .app-header__back {
    grid-column: 1;
    justify-self: start;
    margin-left: calc(-1 * var(--space-3));
  }
  .app-header__actions {
    grid-column: 3;
    justify-self: end;
    display: flex;
    gap: var(--space-1);
    margin-right: calc(-1 * var(--space-3));
  }
  .app-header__back svg, .app-header__action svg {
    width: var(--icon-lg);
    height: var(--icon-lg);
  }
  .app-header__action[aria-current="page"] {
    background: var(--color-brand-hover);
  }
  .app-header__nav {
    display: none;
  }
  @media (min-width: 1024px) {
    .app-header__nav {
      display: flex;
      gap: var(--space-1);
    }
  }
  .app-header__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-fg-on-brand-soft);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
  }
  .app-header__link[aria-current="page"] {
    color: var(--color-fg-on-brand);
    text-decoration: underline;
    text-decoration-thickness: var(--outline-w);
  }
  .app-header--site .app-header__inner {
    grid-template-columns: auto minmax(0, 1fr);
    max-width: var(--site-max-w);
  }
  .app-header--site .app-header__brand {
    grid-column: 1;
  }
  .app-header--site .app-header__actions {
    grid-column: 2;
    align-items: center;
    gap: var(--space-2);
    margin-right: 0;
  }
  .app-header__cta {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: 0 var(--space-4);
    border-radius: var(--radius-control);
    background: var(--color-fg-on-brand);
    color: var(--color-brand);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
  }
  .app-header__count {
    position: absolute;
    top: var(--space-1);
    right: var(--space-0-5);
    min-width: var(--space-5);
    padding: 0 var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--color-danger);
    color: var(--color-fg-on-accent);
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--space-5);
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  @media (hover: hover) {
    .app-header a:hover {
      text-decoration: none;
    }
    .app-header__back:hover, .app-header__action:hover, .app-header__link:hover {
      background: var(--color-brand-hover);
    }
    .app-header__link:hover {
      color: var(--color-fg-on-brand);
    }
    .app-header__cta:hover {
      background: var(--color-fg-on-brand-soft);
    }
  }
  .app-header a:focus-visible, .app-header button:focus-visible {
    box-shadow: 0 0 0 var(--outline-w) var(--color-fg-on-brand);
  }
  .app-header .app-header__cta:focus-visible {
    box-shadow: 0 0 0 var(--outline-w) var(--color-brand), 0 0 0 calc(2 * var(--outline-w)) var(--color-fg-on-brand);
  }
  .app-header__inner {
    opacity: calc(1 - 1.6 * var(--header-hide));
    clip-path: inset(calc(var(--header-h) * var(--header-hide)) 0 0 0);
  }
  .app-header__brand {
    transform: translateY(calc(-1 * var(--space-2) * var(--header-hide)));
  }
  .app-header.is-scrolled {
    box-shadow: var(--shadow-header);
  }
  :root.is-header-snapping {
    --header-snap: var(--duration-header);
  }
  :root.is-header-snapping .app-header {
    transition: transform var(--duration-header) var(--ease-header), box-shadow var(--duration-base) ease;
  }
  :root.is-header-snapping .app-header__inner {
    transition: opacity var(--duration-header) ease, clip-path var(--duration-header) var(--ease-header);
  }
  :root.is-header-snapping .app-header__brand {
    transition: transform var(--duration-header) var(--ease-header);
  }
  .app-header__ink {
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
    -webkit-mask: url("/img/la-badgeuse-wordmark.png?v=4") center / contain no-repeat;
    mask: url("/img/la-badgeuse-wordmark.png?v=4") center / contain no-repeat;
  }
  .app-header__ink--planning {
    -webkit-mask-image: url("/img/le-planning-wordmark.png?v=2");
    mask-image: url("/img/le-planning-wordmark.png?v=2");
  }
  @media (min-width: 640px) {
    .app-header.is-docked {
      z-index: var(--z-header-docked);
    }
    .app-header.is-docked .app-header__inner {
      transform: translateY(calc((var(--header-h) + var(--appnav-bar-h) - 1px) / 2 * var(--header-dock)));
      pointer-events: none;
    }
    .app-header.is-docked :is(.app-header__back, .app-header__brand, .app-header__actions > *) {
      pointer-events: auto;
    }
    .app-header.is-docked .app-header__brand {
      transform-origin: left center;
      transform: translateX(calc(var(--header-brand-dx) * var(--header-dock))) scale(calc(1 - (1 - var(--header-dock-scale)) * var(--header-dock)));
    }
    .app-header.is-docked :is(.app-header__back, .app-header__brand) {
      color: var(--color-fg-accent);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in srgb, var(--color-fg-accent) calc(100% * var(--header-dock)), var(--color-fg-on-brand));
      }
    }
    .app-header.is-docked .app-header__action {
      color: var(--color-fg-muted);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in srgb, var(--color-fg-muted) calc(100% * var(--header-dock)), var(--color-fg-on-brand));
      }
    }
    .app-header.is-docked .app-header__action[aria-current="page"] {
      background: var(--color-accent-subtle);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--color-accent-subtle) calc(100% * var(--header-dock)), var(--color-brand-hover));
      }
      color: var(--color-fg-accent);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in srgb, var(--color-fg-accent) calc(100% * var(--header-dock)), var(--color-fg-on-brand));
      }
    }
    .app-header.is-docked .app-header__logo {
      opacity: calc(1 - var(--header-dock));
    }
    .app-header.is-docked .app-header__ink {
      opacity: var(--header-dock);
    }
    .app-header.is-docked a:focus-visible, .app-header.is-docked button:focus-visible {
      box-shadow: var(--focus-ring);
    }
  }
  @media (min-width: 640px) and (hover: hover) {
    .app-header.is-docked .app-header__back:hover, .app-header.is-docked .app-header__action:hover {
      background: var(--color-accent-subtle);
    }
  }
  @media (max-width: 639.98px) {
    .app-header.is-gone {
      display: none;
    }
  }
  .header-cap {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--z-header-cap);
    height: var(--safe-top);
    background: var(--color-surface);
    pointer-events: none;
    visibility: hidden;
  }
  @media (min-width: 640px) {
    .app-header.is-gone + .header-cap {
      visibility: visible;
    }
  }
  body.ui-page:has(> .app-header) {
    padding-top: var(--header-offset);
  }
  html:has(> body.ui-page > .app-header) {
    scroll-padding-top: var(--header-offset);
  }
  @media screen and (max-width: 639.98px) {
    body.ui-page:has(> .app-header):where(:has(#badgeuse-page)) {
      min-height: calc(100vh + var(--header-h) + var(--space-4));
      min-height: calc(100lvh + var(--header-h) + var(--space-4));
    }
  }
  .appnav {
    position: fixed;
    left: max(var(--space-3), var(--safe-left));
    right: max(var(--space-3), var(--safe-right));
    bottom: var(--appnav-offset);
    z-index: var(--z-appnav);
    padding: var(--appnav-pad);
    border: var(--border-subtle);
    border-radius: var(--radius-pill);
    background: var(--appnav-bg);
    -webkit-backdrop-filter: blur(var(--appnav-blur)) saturate(var(--appnav-saturate));
    backdrop-filter: blur(var(--appnav-blur)) saturate(var(--appnav-saturate));
    box-shadow: var(--shadow-appnav);
  }
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .appnav {
      background: var(--color-surface);
    }
  }
  @media (prefers-reduced-transparency: reduce) {
    .appnav {
      background: var(--color-surface);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
  .appnav__inner {
    display: flex;
    gap: var(--appnav-pad);
    max-width: var(--shell-max-w);
    margin: 0 auto;
  }
  .appnav__item {
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--appnav-item-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-0-5);
    padding: 0 var(--space-0-5);
    border-radius: var(--radius-pill);
    color: var(--color-fg-muted);
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
  }
  @media (hover: hover) {
    .appnav__item:hover {
      color: var(--color-link);
      text-decoration: none;
    }
  }
  .appnav__item.is-active {
    background: var(--color-accent-subtle);
    color: var(--color-fg-accent);
    font-weight: var(--font-weight-semibold);
  }
  .appnav__icon {
    display: inline-flex;
  }
  .appnav__icon svg {
    width: var(--icon-lg);
    height: var(--icon-lg);
  }
  .appnav__label {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.ui-page:has(> .appnav) {
    padding-bottom: calc(var(--appnav-h-mobile) + var(--appnav-offset) + var(--space-4));
  }
  @media (min-width: 640px) {
    .appnav {
      top: var(--header-offset);
      left: 0;
      right: 0;
      bottom: auto;
      padding: var(--appnav-pad) var(--space-4);
      border: 0;
      border-bottom: var(--border-subtle);
      border-radius: 0;
      background: var(--color-surface);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      box-shadow: none;
    }
    .appnav__inner {
      gap: var(--space-1);
      justify-content: center;
      padding-left: calc(var(--appnav-dock-left) * var(--header-dock));
      padding-right: calc(var(--appnav-dock-right) * var(--header-dock));
    }
    .appnav__item {
      flex: 0 0 auto;
      flex-direction: row;
      gap: var(--space-2);
      min-height: var(--tap-min);
      padding: 0 var(--space-4);
      font-size: var(--text-sm);
    }
    .appnav {
      transform: translateY(calc(-1 * var(--header-lift)));
    }
    .appnav.is-dock-tight.is-docked .appnav__item {
      gap: calc(var(--space-2) * (1 - var(--header-dock)));
    }
    .appnav.is-dock-tight.is-docked .appnav__label {
      max-width: calc(var(--appnav-label-max) * (1 - var(--header-dock)));
      opacity: calc(1 - 2 * var(--header-dock));
    }
    .appnav__icon svg {
      width: var(--icon-md);
      height: var(--icon-md);
    }
    body.ui-page:has(> .appnav) {
      padding-top: calc(var(--header-offset) + var(--appnav-bar-h));
      padding-bottom: 0;
    }
    html:has(> body.ui-page > .appnav) {
      scroll-padding-top: calc(var(--header-offset) + var(--appnav-bar-h));
    }
  }
  .hello {
    display: inline-flex;
    align-items: baseline;
    min-width: 0;
    max-width: 100%;
    color: var(--color-fg-accent);
    font-weight: var(--font-weight-regular);
    letter-spacing: 0;
    line-height: var(--leading-tight);
  }
  .hello__b {
    flex: none;
    display: inline-block;
    width: 1.2727em;
    height: 1.4954em;
    margin-bottom: -0.0919em;
    background: currentColor;
    -webkit-mask: url("/img/la-badgeuse-b.png") left bottom / 100% 100% no-repeat;
    mask: url("/img/la-badgeuse-b.png") left bottom / 100% 100% no-repeat;
  }
  .hello__rest {
    flex: none;
    margin-left: -0.02em;
    font-family: "Montserrat Alternates", var(--font-sans);
    font-weight: 200;
    letter-spacing: -0.1em;
  }
  .hello__name {
    min-width: 0;
    margin-left: 0.32em;
    overflow: hidden;
    color: var(--color-fg);
    font-size: 1.04em;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-tight);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .shell {
    max-width: var(--shell-max-w);
    margin: 0 auto;
    padding: var(--space-5) max(var(--space-4), var(--safe-right)) var(--space-8) max(var(--space-4), var(--safe-left));
  }
  .shell > * + * {
    margin-top: var(--space-5);
  }
  .page-header__eyebrow {
    margin-bottom: var(--space-1);
    color: var(--color-fg-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }
  .page-header__title {
    font-size: var(--text-2xl);
    text-wrap: balance;
  }
  .page-header__sub {
    margin-top: var(--space-1);
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
  }
  .page-header--actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-3);
    align-items: center;
  }
  .page-header--actions > :not(.page-header__actions) {
    grid-column: 1;
  }
  .page-header__actions {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    gap: var(--space-2);
  }
  .section-title {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-fg-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
  }
  .section-title + * {
    margin-top: var(--space-2);
  }
  .subnav {
    display: flex;
    gap: var(--space-5);
    margin-inline: calc(-1 * var(--space-4));
    padding-inline: var(--space-4);
    scroll-padding-inline: var(--space-4);
    border-bottom: var(--border-subtle);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .subnav::-webkit-scrollbar {
    display: none;
  }
  .subnav__item {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap-min);
    min-height: var(--control-h-sm);
    color: var(--color-fg-muted);
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    text-decoration: none;
    scroll-snap-align: start;
    transition: color var(--duration-fast) ease;
  }
  @media (hover: hover) {
    .subnav__item:hover {
      color: var(--color-fg);
      text-decoration: none;
    }
  }
  .subnav__item.is-active {
    color: var(--color-fg);
    font-weight: var(--font-weight-semibold);
  }
  .subnav__item.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: var(--indicator-h);
    border-radius: var(--indicator-h);
    background: var(--color-accent);
  }
  .subnav__item:focus-visible {
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 var(--outline-w) var(--color-focus);
  }
  @media (min-width: 640px) {
    .subnav {
      margin-inline: 0;
      padding-inline: 0;
      scroll-padding-inline: 0;
    }
  }
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: var(--color-accent);
    color: var(--color-fg-on-accent);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, transform var(--duration-fast) ease;
  }
  .btn:disabled:not([aria-busy="true"]) {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
  }
  .btn--secondary {
    background: var(--color-surface);
    border-color: var(--color-control-border);
    color: var(--color-fg);
  }
  .btn--ghost {
    background: transparent;
    color: var(--color-link);
  }
  .btn--danger {
    background: var(--color-danger);
  }
  @media (hover: hover) {
    .btn:hover {
      text-decoration: none;
    }
    .btn:not(:disabled):hover {
      background: var(--color-accent-hover);
    }
    .btn--secondary:not(:disabled):hover {
      background: var(--color-canvas);
      border-color: var(--color-control-border-hover);
    }
    .btn--ghost:not(:disabled):hover {
      background: var(--color-surface-subtle);
    }
    .btn--danger:not(:disabled):hover {
      background: var(--color-danger-hover);
    }
  }
  .btn:not(:disabled):active {
    background: var(--color-accent-pressed);
    transform: scale(var(--press-scale));
  }
  .btn--secondary:not(:disabled):active {
    background: var(--color-surface-muted);
  }
  .btn--ghost:not(:disabled):active {
    background: var(--color-accent-subtle);
  }
  .btn--danger:not(:disabled):active {
    background: var(--color-danger-hover);
  }
  .btn--sm {
    min-height: var(--control-h-sm);
    padding: var(--space-1) var(--space-3);
  }
  .btn--lg {
    min-height: var(--control-h-lg);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
  }
  .btn--block {
    display: flex;
    width: 100%;
  }
  .btn--icon {
    flex: none;
    width: var(--tap-min);
    padding: 0;
  }
  .btn--lg.btn--icon {
    width: var(--control-h-lg);
  }
  .btn svg {
    flex: none;
    width: var(--icon-sm);
    height: var(--icon-sm);
  }
  .btn--icon svg, .btn--lg svg {
    width: var(--icon-md);
    height: var(--icon-md);
  }
  .btn[aria-busy="true"] {
    cursor: progress;
    pointer-events: none;
  }
  .btn[aria-busy="true"]::before {
    content: "";
    flex: none;
    width: var(--icon-sm);
    height: var(--icon-sm);
    border: var(--outline-w) solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-pill);
    animation: ui-spin 0.7s linear infinite;
  }
  .btn[aria-busy="true"] svg {
    display: none;
  }
  @keyframes ui-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }
  .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .field + .field, .field + .check, .check + .field {
    margin-top: var(--space-4);
  }
  .field__label {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-fg-soft);
  }
  .field__hint {
    font-size: var(--text-xs);
    color: var(--color-fg-muted);
  }
  .field__error {
    font-size: var(--text-xs);
    color: var(--color-fg-danger);
  }
  .field__control {
    display: flex;
    gap: var(--space-2);
  }
  .field__control .input {
    flex: 1 1 auto;
    min-width: 0;
  }
  .input, .select, .textarea {
    width: 100%;
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-3);
    border: var(--border-control);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-fg);
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
  }
  .input[type="date"], .input[type="time"] {
    appearance: none;
  }
  .input::-webkit-date-and-time-value {
    text-align: start;
  }
  .select {
    height: var(--tap-min);
  }
  .textarea {
    min-height: calc(var(--control-h-lg) * 1.5);
    resize: vertical;
  }
  @media (hover: hover) {
    .input:hover, .select:hover, .textarea:hover {
      border-color: var(--color-control-border-hover);
    }
  }
  .input:focus-visible, .select:focus-visible, .textarea:focus-visible {
    border-color: var(--color-accent);
  }
  .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
    border-color: var(--color-fg-danger);
  }
  .input[readonly] {
    background: var(--color-canvas);
    color: var(--color-fg-soft);
  }
  .input:disabled, .select:disabled, .textarea:disabled {
    background: var(--color-surface-muted);
    color: var(--color-fg-muted);
    cursor: not-allowed;
  }
  .input--lg {
    min-height: var(--control-h-lg);
    font-size: var(--text-lg);
  }
  .input--pin {
    text-align: center;
    font-size: var(--text-2xl);
    letter-spacing: 0.4em;
    font-variant-numeric: tabular-nums;
  }
  .check {
    --check-line: calc(var(--text-sm) * var(--leading-normal));
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    min-height: var(--tap-min);
    padding-block: calc((var(--tap-min) - var(--check-line)) / 2);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-fg-soft);
    cursor: pointer;
  }
  .check input {
    flex: none;
    width: var(--icon-md);
    height: var(--icon-md);
    margin: calc((var(--check-line) - var(--icon-md)) / 2) 0 0;
    accent-color: var(--color-accent);
  }
  .check strong {
    font-weight: var(--font-weight-medium);
    color: var(--color-fg);
  }
  .check__hint {
    display: block;
    color: var(--color-fg-muted);
  }
  .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-5);
  }
  .switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: var(--tap-min);
    padding-block: var(--space-2);
    cursor: pointer;
  }
  .switch__text {
    min-width: 0;
    font-size: var(--text-sm);
    color: var(--color-fg-soft);
  }
  .switch__text strong {
    display: block;
    font-weight: var(--font-weight-medium);
    color: var(--color-fg);
  }
  .switch__hint {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-fg-muted);
  }
  .switch__input, .switch__track {
    position: relative;
    flex: none;
    width: var(--switch-w);
    height: var(--switch-h);
    margin: 0;
    border-radius: var(--radius-pill);
    background: var(--color-control-border);
    transition: background-color var(--duration-base) ease;
  }
  .switch__input {
    appearance: none;
    cursor: pointer;
  }
  .switch__track {
    display: block;
  }
  .switch__input::before, .switch__track::before {
    content: "";
    position: absolute;
    top: calc((var(--switch-h) - var(--switch-knob)) / 2);
    left: calc((var(--switch-h) - var(--switch-knob)) / 2);
    width: var(--switch-knob);
    height: var(--switch-knob);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-base) ease;
  }
  .switch__input:checked, [aria-pressed="true"] > .switch__track {
    background: var(--color-accent);
  }
  .switch__input:checked::before, [aria-pressed="true"] > .switch__track::before {
    transform: translateX(calc(var(--switch-w) - var(--switch-h)));
  }
  .switch__input:disabled {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
  }
  .segmented {
    display: flex;
    gap: var(--space-0-5);
    padding: var(--space-0-5);
    border-radius: var(--radius-control);
    background: var(--color-surface-muted);
  }
  .segmented__item {
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--tap-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-fg-soft);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
    gap: var(--space-2);
  }
  .segmented__item svg {
    flex: none;
    width: var(--icon-sm);
    height: var(--icon-sm);
  }
  @media (hover: hover) {
    .segmented__item:hover {
      color: var(--color-fg);
      text-decoration: none;
    }
  }
  .segmented__item.is-active, .segmented__item[aria-pressed="true"], .segmented__item[aria-selected="true"] {
    background: var(--color-surface);
    color: var(--color-fg-accent);
    font-weight: var(--font-weight-semibold);
    box-shadow: var(--shadow-sm);
  }
  label.segmented__item {
    position: relative;
    cursor: pointer;
    white-space: normal;
    text-align: center;
  }
  .segmented__item > input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .segmented__item:has(> input:checked) {
    background: var(--color-surface);
    color: var(--color-fg-accent);
    font-weight: var(--font-weight-semibold);
    box-shadow: var(--shadow-sm);
  }
  .segmented__item:has(> input:focus-visible) {
    box-shadow: var(--focus-ring), var(--shadow-sm);
  }
  .segmented__item:focus-visible {
    box-shadow: var(--focus-ring), var(--shadow-sm);
  }
  .theme-choice {
    display: grid;
    gap: var(--space-2);
  }
  .theme-choice__options .segmented__item {
    flex-direction: column;
    gap: var(--space-1);
    padding-block: var(--space-2);
  }
  .theme-choice__options .segmented__item svg {
    width: var(--icon-md);
    height: var(--icon-md);
  }
  .theme-choice[aria-busy="true"] .segmented__item {
    cursor: progress;
  }
  .theme-choice__hint {
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
  }
  .theme-choice__status {
    color: var(--color-fg-danger);
    font-size: var(--text-sm);
  }
  .theme-choice__status:empty {
    display: none;
  }
  .card {
    background: var(--color-surface);
    border: var(--border-subtle);
    border-radius: var(--radius-card);
    padding: var(--space-5);
  }
  .card__title {
    font-size: var(--text-lg);
    text-wrap: balance;
  }
  .card__title + * {
    margin-top: var(--space-3);
  }
  .card__footer {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--border-subtle);
  }
  .disclosure {
    padding: 0;
  }
  .disclosure__toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--control-h-lg);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-card);
    cursor: pointer;
    list-style: none;
  }
  .disclosure__toggle::-webkit-details-marker {
    display: none;
  }
  .disclosure__title {
    font-size: var(--text-lg);
  }
  .disclosure__sub {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-fg-muted);
  }
  .disclosure__chevron {
    display: inline-flex;
    margin-left: auto;
    color: var(--color-fg-faint);
    transition: transform var(--duration-fast) ease;
  }
  .disclosure__chevron svg {
    width: var(--icon-md);
    height: var(--icon-md);
  }
  .disclosure[open] .disclosure__chevron {
    transform: rotate(90deg);
  }
  .disclosure__body {
    padding: 0 var(--space-5) var(--space-5);
  }
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-0-5) var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    color: var(--color-fg-soft);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-tight);
    white-space: nowrap;
  }
  .badge svg {
    flex: none;
    width: var(--icon-sm);
    height: var(--icon-sm);
  }
  .badge--success {
    background: var(--color-success-subtle);
    color: var(--color-fg-success);
  }
  .badge--warning {
    background: var(--color-warning-subtle);
    color: var(--color-fg-warning);
  }
  .badge--danger {
    background: var(--color-danger-subtle);
    color: var(--color-fg-danger);
  }
  .badge--info {
    background: var(--color-accent-subtle);
    color: var(--color-fg-accent);
  }
  .alert {
    padding: var(--space-3) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: var(--color-surface-muted);
    color: var(--color-fg-soft);
    font-size: var(--text-sm);
  }
  .alert__title {
    display: block;
  }
  .alert > p + p, .alert > p + form, .alert > form + form {
    margin-top: var(--space-2);
  }
  .alert--success {
    background: var(--color-success-subtle);
    color: var(--color-fg-success);
  }
  .alert--warning {
    background: var(--color-warning-subtle);
    color: var(--color-fg-warning);
  }
  .alert--danger {
    background: var(--color-danger-subtle);
    color: var(--color-fg-danger);
  }
  .alert--info {
    background: var(--color-surface-subtle);
    color: var(--color-fg-accent);
    border-color: var(--color-accent-subtle);
  }
  .list {
    background: var(--color-surface);
    border: var(--border-subtle);
    border-radius: var(--radius-card);
    overflow: hidden;
  }
  .list > li + li {
    border-top: var(--border-subtle);
  }
  .list__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--control-h-lg);
    padding: var(--space-3) var(--space-4);
    color: var(--color-fg);
    text-align: left;
    text-decoration: none;
  }
  @media (hover: hover) {
    a.list__item:hover, button.list__item:hover {
      background: var(--color-surface-subtle);
      text-decoration: none;
    }
  }
  a.list__item:active, button.list__item:active {
    background: var(--color-accent-subtle);
  }
  .list__item--solo {
    border: var(--border-subtle);
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }
  .list__item--danger, .list__item--danger .list__icon {
    color: var(--color-fg-danger);
  }
  .list__item--danger .list__icon {
    background: var(--color-danger-subtle);
  }
  .list__item:focus-visible {
    box-shadow: inset 0 0 0 var(--outline-w) var(--color-focus);
  }
  .list__icon, .icon-tile {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--list-icon-box);
    height: var(--list-icon-box);
    border-radius: var(--radius-md);
    background: var(--color-accent-subtle);
    color: var(--color-fg-accent);
  }
  .list__icon svg, .icon-tile svg, .list__chevron svg {
    width: var(--icon-md);
    height: var(--icon-md);
  }
  .list__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .list__label {
    overflow-wrap: anywhere;
  }
  .list__sub {
    font-size: var(--text-xs);
    color: var(--color-fg-muted);
  }
  .list__meta {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-fg-soft);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
  }
  .list__chevron {
    flex: none;
    color: var(--color-fg-faint);
  }
  .avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar);
    height: var(--avatar);
    border-radius: var(--radius-pill);
    --avatar-bg: var(--brand-100);
    background: var(--avatar-bg);
    color: var(--neutral-800);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0;
  }
  .avatar--sm {
    width: var(--avatar-sm);
    height: var(--avatar-sm);
    font-size: var(--text-2xs);
  }
  .avatar--lg {
    width: var(--avatar-lg);
    height: var(--avatar-lg);
    font-size: var(--text-sm);
  }
  .kv {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
  }
  .kv dt {
    color: var(--color-fg-muted);
  }
  .kv dd {
    font-variant-numeric: tabular-nums;
  }
  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-10) var(--space-4);
    text-align: center;
    color: var(--color-fg-muted);
  }
  .empty > p {
    margin: 0;
  }
  .empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--empty-icon-box);
    height: var(--empty-icon-box);
    margin-bottom: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    color: var(--color-fg-muted);
  }
  .empty__icon svg {
    width: var(--icon-lg);
    height: var(--icon-lg);
  }
  .empty__title {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-fg);
    text-wrap: balance;
  }
  .empty__text {
    max-width: var(--measure);
    font-size: var(--text-sm);
  }
  .empty__action {
    margin-top: var(--space-3);
  }
  .empty--compact {
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-4) 0;
    text-align: left;
  }
  .empty--compact .empty__icon {
    display: none;
  }
  .empty--compact .empty__title {
    font-size: var(--text-base);
  }
  .notif {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: max-content;
    align-content: start;
    gap: var(--space-4);
  }
  .notif__group {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: max-content;
    gap: var(--space-2);
  }
  .notif__legend {
    color: var(--color-fg-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }
  .notif__legend:not(:first-child) {
    margin-top: var(--space-3);
  }
  .notif [data-busy="1"] {
    cursor: progress;
  }
  .modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: 0;
    padding: 0 max(var(--modal-gutter-x), var(--safe-right)) 0 max(var(--modal-gutter-x), var(--safe-left));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--modal-veil);
  }
  .modal--center {
    padding-block: max(var(--modal-gutter-y), var(--safe-top)) max(var(--modal-gutter-y), var(--safe-bottom));
    background: var(--modal-veil-soft);
    -webkit-backdrop-filter: blur(var(--modal-blur));
    backdrop-filter: blur(var(--modal-blur));
  }
  .install-guide {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding-left: var(--space-5);
    font-size: var(--text-base);
    list-style: decimal;
  }
  .install-guide > li::marker {
    color: var(--color-fg-muted);
    font-weight: var(--font-weight-semibold);
  }
  .install-guide__note {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
  }
  .modal-cap {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--z-modal-cap);
    height: var(--modal-cap-h);
    background: var(--modal-veil-on-brand);
    pointer-events: none;
    visibility: hidden;
  }
  :root:has(.modal.ba-modal--open) .modal-cap {
    visibility: visible;
    transition: visibility 0s linear var(--modal-fade);
  }
  :root:has(.modal.ui:not(.ba-modal):not([hidden])) .modal-cap {
    visibility: visible;
    transition: none;
  }
  :root:has(.modal--center:not([hidden])) .modal-cap {
    background: var(--modal-veil-soft-on-brand);
  }
  :root:has(.modal--center:not([hidden])):has(.modal:not(.modal--center):not([hidden])) .modal-cap {
    background: var(--modal-veil-stacked-on-brand);
  }
  .modal-cap.modal-cap--canvas {
    background: var(--modal-veil-on-canvas);
  }
  :root:has(.modal--center:not([hidden])) .modal-cap.modal-cap--canvas {
    background: var(--modal-veil-soft-on-canvas);
  }
  .app-header.is-gone ~ .modal-cap {
    background: var(--modal-veil-on-canvas);
  }
  :root:has(.modal--center:not([hidden])) .app-header.is-gone ~ .modal-cap {
    background: var(--modal-veil-soft-on-canvas);
  }
  :root:has(.modal--center:not([hidden])):has(.modal:not(.modal--center):not([hidden])) .app-header.is-gone ~ .modal-cap {
    background: var(--modal-veil-stacked-on-canvas);
  }
  .modal__veil {
    position: absolute;
    inset: 0;
  }
  .modal__panel {
    position: relative;
    z-index: var(--z-modal-panel);
    display: flex;
    flex-direction: column;
    flex: none;
    width: min(var(--modal-w), 100%);
    margin-block: max(var(--modal-gutter-y), var(--safe-top)) max(var(--modal-gutter-y), var(--safe-bottom));
    --modal-surface: var(--color-surface);
    --modal-cap-top: 0px;
    --modal-cap-bottom: 0px;
    border-radius: var(--radius-modal);
    background: linear-gradient(var(--modal-surface), var(--modal-surface)) 0 var(--modal-cap-top) / 100% calc(100% - var(--modal-cap-top) - var(--modal-cap-bottom)) no-repeat;
    box-shadow: var(--shadow-lg);
  }
  .modal__panel:has(> .modal__header) {
    --modal-cap-top: var(--radius-modal);
  }
  .modal__panel:has(.modal__footer) {
    --modal-cap-bottom: var(--radius-modal);
  }
  .modal--center > .modal__panel {
    margin-block: auto;
  }
  .modal__panel--sm {
    width: min(var(--modal-sm-w), 100%);
  }
  .modal__panel--wide {
    width: min(var(--modal-wide-w), 100%);
  }
  .modal__panel[tabindex="-1"]:focus, .modal__panel[tabindex="-1"]:focus-visible {
    outline: none;
    box-shadow: var(--shadow-lg);
  }
  .modal__panel--info {
    --modal-surface: var(--color-accent-subtle);
    color: var(--color-fg-accent);
  }
  .modal__header {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-4) var(--space-3) var(--space-5);
    position: sticky;
    top: var(--modal-cap-h);
    z-index: var(--z-raised);
    border-radius: var(--radius-modal) var(--radius-modal) 0 0;
    background: var(--modal-surface);
  }
  .modal__heading {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: var(--space-1);
  }
  .modal__eyebrow {
    margin-bottom: var(--space-1);
    color: var(--color-fg-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }
  .modal__title {
    font-size: var(--modal-title);
    text-wrap: balance;
  }
  .modal__panel--info .modal__title {
    color: inherit;
  }
  .modal__sub {
    margin-top: var(--space-1);
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
  }
  .modal__close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-min);
    height: var(--tap-min);
    border: var(--border-subtle);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-fg-muted);
    box-shadow: var(--shadow-md);
    transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
  }
  .modal__close svg {
    width: var(--icon-md);
    height: var(--icon-md);
  }
  .modal__close:focus-visible {
    box-shadow: var(--focus-ring), var(--shadow-md);
  }
  @media (hover: hover) {
    .modal__close:hover {
      border-color: var(--color-border-strong);
      background: var(--color-surface-subtle);
      color: var(--color-fg);
    }
  }
  .modal__form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
  .modal__header--bar {
    align-items: center;
    padding-block: var(--space-3) var(--space-2);
  }
  .modal__header--bar .modal__heading {
    padding-top: 0;
  }
  .modal__header--bar .modal__eyebrow {
    margin-bottom: 0;
  }
  .modal__lead {
    max-width: var(--measure);
    margin-bottom: var(--space-4);
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
  }
  .modal__body {
    flex: 1 1 auto;
    padding: var(--space-2) var(--space-5) var(--space-5);
    isolation: isolate;
  }
  .modal__body--note p {
    text-align: justify;
    text-align-last: left;
  }
  .modal__panel--dense > .modal__header {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .modal__panel--dense > .modal__body {
    padding-inline: var(--space-3);
  }
  .modal__panel > .modal__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: var(--z-raised);
  }
  .modal__panel > .modal__close + .modal__body {
    padding-top: calc(var(--tap-min) + 2 * var(--space-3));
  }
  .modal__footer {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5) var(--space-4);
    border-top: var(--border-subtle);
    position: sticky;
    bottom: var(--safe-bottom);
    z-index: var(--z-raised);
    border-radius: 0 0 var(--radius-modal) var(--radius-modal);
    background: var(--modal-surface);
  }
  .modal__footer--reversed {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }
  .modal__panel--confirm {
    padding: var(--space-6) var(--space-5) var(--space-5);
    text-align: center;
    animation: modal-confirm-pop var(--confirm-pop) ease;
  }
  .modal__text {
    font-size: var(--text-lg);
    color: var(--color-fg);
    text-wrap: balance;
  }
  .modal__actions {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-2);
    margin-top: var(--space-5);
  }
  @keyframes modal-confirm-pop {
    from {
      opacity: 0;
      transform: translateY(var(--confirm-rise)) scale(var(--press-scale));
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .modal.ba-modal {
    opacity: 0;
    transition: opacity var(--modal-fade) linear;
  }
  .modal.ba-modal > .modal__panel {
    opacity: 0;
    transform: translateY(calc(-1 * var(--modal-drop)));
    transition: opacity var(--modal-move) linear, transform var(--modal-move) ease-out;
  }
  .modal.ba-modal--open, .modal.ba-modal--open > .modal__panel {
    opacity: 1;
  }
  .modal.ba-modal--open > .modal__panel {
    transform: none;
  }
  @media (max-width: 639.98px) {
    .modal--sheet {
      padding: 0;
    }
    .modal--sheet > .modal__panel {
      width: 100%;
      margin: auto 0 0;
      padding-bottom: var(--safe-bottom);
      border-radius: var(--radius-modal) var(--radius-modal) 0 0;
    }
    .modal--sheet.ba-modal:not(.ba-modal--open) > .modal__panel {
      transform: translateY(var(--modal-drop));
    }
  }
  @media (min-width: 640px) {
    .modal__header {
      padding: var(--space-6) var(--space-5) var(--space-3) var(--space-6);
    }
    .modal__body {
      padding: var(--space-2) var(--space-6) var(--space-6);
    }
    .modal__header--bar {
      padding-block: var(--space-4) var(--space-2);
    }
    .modal__panel--dense > .modal__header {
      padding-left: var(--space-6);
      padding-right: var(--space-5);
    }
    .modal__panel--dense > .modal__body {
      padding-inline: var(--space-6);
    }
    .modal__panel > .modal__close + .modal__body {
      padding-top: calc(var(--tap-min) + 2 * var(--space-3));
    }
    .modal__footer {
      padding: var(--space-3) var(--space-6) var(--space-5);
    }
    .modal__actions {
      flex-direction: row;
      justify-content: center;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .modal.ba-modal, .modal.ba-modal > .modal__panel {
      transition: none;
    }
    .modal__panel--confirm {
      animation: none;
    }
  }
  .ba-toast-container {
    all: revert;
    position: fixed;
    top: calc(var(--header-offset) + var(--space-2));
    right: max(var(--space-3), var(--safe-right));
    left: max(var(--space-3), var(--safe-left));
    z-index: var(--z-toast);
    transform: translateY(calc(-1 * var(--header-lift)));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    pointer-events: none;
  }
  :root.is-header-snapping .ba-toast-container {
    transition: transform var(--duration-header) var(--ease-header);
  }
  .ba-toast, .ba-toast * {
    all: revert;
    box-sizing: border-box;
  }
  .ba-toast {
    width: min(var(--toast-w), 100%);
    padding: var(--space-4);
    border: var(--border-subtle);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-fg-accent);
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    pointer-events: auto;
    animation: toast-in var(--toast-in) var(--ease-out-soft);
  }
  .ba-toast--success {
    color: var(--color-fg-success);
  }
  .ba-toast--warning {
    color: var(--color-fg-warning);
  }
  .ba-toast--danger {
    color: var(--color-fg-danger);
  }
  .ba-toast button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-min);
    margin-top: var(--space-3);
    padding: 0 var(--space-5);
    border: 0;
    border-radius: var(--radius-control);
    background: var(--color-accent);
    color: var(--color-fg-on-accent);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
  }
  @media (hover: hover) {
    .ba-toast button:hover {
      background: var(--color-accent-hover);
    }
  }
  .ba-toast button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }
  @keyframes toast-in {
    from {
      opacity: 0;
      transform: translateY(calc(-1 * var(--toast-rise)));
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ba-toast {
      animation: none;
    }
  }
  .hint {
    color: var(--color-fg-muted);
  }
  .hint__panel {
    max-width: min(var(--modal-sm-w), calc(100vw - 2 * var(--space-4)));
    padding: var(--space-4);
    border: var(--border-subtle);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    color: var(--color-fg);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    box-shadow: var(--shadow-lg);
  }
  .hint__text {
    text-wrap: pretty;
  }
  .hint__panel::backdrop {
    background: var(--modal-veil-soft);
  }
  .hint__close {
    margin-top: var(--space-3);
  }
  @supports not selector(:popover-open) {
    .hint, .hint__close {
      display: none;
    }
    .hint__panel {
      padding: var(--space-2) var(--space-3);
      border: 0;
      background: var(--color-surface-subtle);
      color: var(--color-fg-soft);
      box-shadow: none;
    }
  }
  .zone-map {
    position: relative;
    height: var(--zone-map-h);
    border: var(--border-subtle);
    border-radius: var(--radius-control);
    overflow: hidden;
    background: var(--color-surface-muted);
    user-select: none;
  }
  .zone-map__tiles {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--color-surface-muted);
  }
  .zone-map__pin {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: var(--z-raised);
    width: var(--zone-pin);
    height: var(--zone-pin);
    border: var(--outline-w) solid var(--color-surface);
    border-radius: var(--radius-pill);
    background: var(--color-danger);
    box-shadow: var(--shadow-md);
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .zone-map__zoom {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    z-index: var(--z-raised);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .zone-map__zoom-btn {
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
  }
  .zone-map__attribution {
    position: absolute;
    right: var(--space-1);
    bottom: var(--space-1);
    z-index: var(--z-raised);
    padding: 0 var(--space-1);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-fg-muted);
    font-size: var(--text-xs);
    pointer-events: none;
  }
  .lookup {
    position: relative;
  }
  .suggestions {
    position: absolute;
    top: calc(100% + var(--space-1));
    right: 0;
    left: 0;
    z-index: var(--z-dropdown);
    max-height: var(--suggest-max-h);
    padding: var(--space-1);
    overflow-y: auto;
    border: var(--border-subtle);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
  }
  .suggestions > li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
  }
  .suggestions > li > strong {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    overflow-wrap: anywhere;
  }
  .suggestions > li > span {
    color: var(--color-fg-muted);
    font-size: var(--text-xs);
    overflow-wrap: anywhere;
  }
  .suggestions > li.is-active {
    background: var(--color-accent-subtle);
  }
  @media (hover: hover) {
    .suggestions > li:hover {
      background: var(--color-accent-subtle);
    }
  }
  .copy-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
  }
  .copy-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--chip-h);
    padding: 0 var(--space-1) 0 var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-fg);
    font: inherit;
    font-size: var(--text-sm);
    line-height: var(--leading-tight);
    text-align: left;
    cursor: copy;
  }
  .copy-chip__label {
    color: var(--color-fg-muted);
    font-size: var(--text-xs);
  }
  .copy-chip__value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-semibold);
  }
  .copy-chip__icon {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: var(--icon-lg);
    height: var(--icon-lg);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    color: var(--color-fg-muted);
  }
  .copy-chip__icon svg {
    width: var(--icon-sm);
    height: var(--icon-sm);
  }
  .copy-chip__icon svg + svg, .copy-chip[data-copied] .copy-chip__icon svg:first-child {
    display: none;
  }
  .copy-chip[data-copied] .copy-chip__icon svg + svg {
    display: block;
  }
  .copy-chip[data-copied] {
    border-color: var(--color-fg-success);
    background: var(--color-success-subtle);
  }
  .copy-chip[data-copied] .copy-chip__icon {
    background: var(--color-fg-success);
    color: var(--color-surface);
  }
  @media (hover: hover) {
    .copy-chip:not(.copy-chip--static):hover {
      border-color: var(--color-accent);
      background: var(--color-surface-subtle);
    }
    .copy-chip:not(.copy-chip--static):hover .copy-chip__icon {
      color: var(--color-link);
    }
  }
  .copy-chip:not(.copy-chip--static):active {
    background: var(--color-accent-subtle);
  }
  .copy-chip--static {
    padding-right: var(--space-3);
    border-style: dashed;
    cursor: default;
  }
  @media (pointer: coarse) {
    .copy-chip {
      min-height: var(--tap-min);
    }
  }
  .title-with-icon {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .switch > .icon-tile + .switch__text {
    flex: 1 1 auto;
  }
  .doc {
    max-width: var(--doc-max-w);
  }
  .doc__version {
    margin-top: var(--space-2);
    color: var(--color-fg-muted);
    font-size: var(--text-xs);
  }
  .doc__toc ol {
    padding-left: var(--space-5);
    list-style: decimal;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
  }
  @media (min-width: 640px) {
    .doc__toc ol {
      columns: 2;
      column-gap: var(--space-6);
    }
  }
  .doc__toc li {
    break-inside: avoid;
  }
  .doc__toc a {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
  }
  .doc__section {
    padding-top: var(--space-5);
    border-top: var(--border-subtle);
    scroll-margin-top: var(--space-4);
  }
  .doc__section > * + * {
    margin-top: var(--space-3);
  }
  .doc__section h2 {
    text-wrap: balance;
  }
  .doc__section p, .doc__section li, .doc__section dd {
    line-height: var(--leading-relaxed);
  }
  .doc__section a, .doc__prose a, .site-footer__contact a {
    text-decoration: underline;
  }
  .site-footer__contact a {
    white-space: nowrap;
  }
  .doc__section code, .doc__prose code {
    padding: 0 var(--space-1);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
  }
  .doc__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-left: var(--space-5);
    list-style: disc;
  }
  .doc__list--negative li::marker {
    color: var(--color-fg-danger);
  }
  .doc__callout {
    padding: var(--space-4);
    border-left: var(--space-1) solid var(--color-brand);
    border-radius: var(--radius-control);
    background: var(--color-surface-subtle);
  }
  .doc__callout > * + * {
    margin-top: var(--space-2);
  }
  .doc .subnav {
    flex-wrap: wrap;
    column-gap: var(--space-5);
    margin-inline: 0;
    padding-inline: 0;
    overflow-x: visible;
  }
  .doc__prose > * + * {
    margin-top: var(--space-4);
  }
  .doc__prose p, .doc__prose li {
    line-height: var(--leading-relaxed);
  }
  .doc__prose h2 {
    margin-top: var(--space-10);
    padding-top: var(--space-5);
    border-top: var(--border-subtle);
    text-wrap: balance;
  }
  .doc__prose h3 {
    margin-top: var(--space-6);
    font-size: var(--text-base);
  }
  .doc__prose ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-left: var(--space-5);
    list-style: disc;
  }
  .doc__code {
    overflow-x: auto;
    padding: var(--space-4);
    border-radius: var(--radius-control);
    background: var(--color-surface-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
  }
  .doc__prose .doc__code code {
    padding: 0;
    background: none;
  }
  .doc__card > * + * {
    margin-top: var(--space-2);
  }
  .doc__prose .doc__card h3 {
    margin-top: 0;
    font-size: var(--text-lg);
  }
  .doc__facts > div {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3) 0;
    border-bottom: var(--border-subtle);
  }
  .doc__facts > div:first-child {
    padding-top: 0;
  }
  .doc__facts > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
  @media (min-width: 640px) {
    .doc__facts > div {
      grid-template-columns: var(--doc-label-w) minmax(0, 1fr);
      gap: var(--space-4);
    }
  }
  .doc__facts dt {
    font-weight: var(--font-weight-semibold);
  }
  .doc__table-scroll {
    overflow-x: auto;
    border: var(--border-subtle);
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }
  .doc__table {
    width: 100%;
    min-width: var(--doc-table-min-w);
    border-collapse: collapse;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
  }
  .doc__table caption {
    padding: var(--space-3) var(--space-4) 0;
    color: var(--color-fg-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-align: left;
    text-transform: uppercase;
  }
  .doc__table th, .doc__table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-subtle);
    text-align: left;
    vertical-align: top;
  }
  .doc__table thead th {
    color: var(--color-fg-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    white-space: nowrap;
  }
  .doc__table tbody th {
    font-weight: var(--font-weight-semibold);
  }
  .doc__table tbody tr:last-child th, .doc__table tbody tr:last-child td {
    border-bottom: 0;
  }
  .doc__note {
    padding: var(--space-4);
    border-radius: var(--radius-control);
    background: var(--color-surface-muted);
    color: var(--color-fg-soft);
    font-size: var(--text-sm);
  }
  .doc__nowrap {
    white-space: nowrap;
  }
  .login {
    max-width: var(--solo-max-w);
  }
  .login__note {
    color: var(--color-fg-soft);
    font-size: var(--text-sm);
  }
  .login__note a {
    text-decoration: underline;
  }
  .register {
    max-width: var(--form-max-w);
  }
  .register__progress {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .register__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .register__step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    color: var(--color-fg-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-tight);
  }
  .register__step-index {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--avatar-sm);
    height: var(--avatar-sm);
    border: var(--border-control);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
  }
  .register__step-index svg {
    width: var(--icon-sm);
    height: var(--icon-sm);
  }
  .register__step-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    min-width: 0;
  }
  .register__step-text strong {
    color: var(--color-fg-soft);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
  }
  .register__step-text > span {
    display: none;
  }
  @media (min-width: 640px) {
    .register__step-text > span {
      display: block;
    }
  }
  .register__step.is-active .register__step-index {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-fg-on-accent);
  }
  .register__step.is-active strong {
    color: var(--color-fg);
  }
  .register__step.is-complete .register__step-index {
    border-color: transparent;
    background: var(--color-accent-subtle);
    color: var(--color-fg-accent);
  }
  .register__progress-note {
    color: var(--color-fg-muted);
    font-size: var(--text-xs);
  }
  .register__price {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-control);
    background: var(--color-surface-subtle);
    color: var(--color-fg-soft);
    font-size: var(--text-sm);
  }
  .register__was {
    color: var(--color-fg-muted);
  }
  .register__invite > * + * {
    margin-top: var(--space-1);
  }
  .register__login {
    color: var(--color-fg-soft);
    font-size: var(--text-sm);
  }
  .register__login a, .register__invite a, .register__terms a {
    text-decoration: underline;
  }
  .register__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
  .register__form > .field, .register__form > .form-actions, .register__employee > .field, .register__pair > .field {
    margin-top: 0;
  }
  .register__pair {
    display: grid;
    gap: inherit;
  }
  @media (min-width: 640px) {
    .register__pair {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--space-4);
    }
  }
  .register__optional {
    color: var(--color-fg-muted);
    font-weight: var(--font-weight-regular);
  }
  .register__code:not(:placeholder-shown) {
    text-transform: uppercase;
  }
  .register__company {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-1);
    padding: var(--space-3) var(--space-4);
    border: var(--border-subtle);
    border-radius: var(--radius-control);
    background: var(--color-surface-subtle);
  }
  .register__company-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--color-fg-soft);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
  }
  .register__company-text strong {
    color: var(--color-fg);
    font-weight: var(--font-weight-semibold);
  }
  .register__agreement {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-2);
  }
  .register__map {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }
  .modules-choice {
    display: grid;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .modules-choice > legend {
    margin-bottom: var(--space-1);
    padding: 0;
  }
  .modules-choice .check > span {
    display: grid;
  }
  .register__terms {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .register__terms > .check {
    flex: 1 1 auto;
    min-width: 0;
  }
  .register__employees {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
  .register__employee {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .register__employee + .register__employee {
    padding-top: var(--space-5);
    border-top: var(--border-subtle);
  }
  .register__employee-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: var(--tap-min);
  }
  .register__employee-title {
    font-weight: var(--font-weight-semibold);
  }
  .register__add {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .register__summary > div {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3) 0;
    border-bottom: var(--border-subtle);
  }
  .register__summary > div:first-child {
    padding-top: 0;
  }
  .register__summary > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
  @media (min-width: 640px) {
    .register__summary > div {
      grid-template-columns: var(--doc-label-w) minmax(0, 1fr);
      gap: var(--space-4);
    }
  }
  .register__summary dt {
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
  }
  .register__summary dd {
    font-weight: var(--font-weight-semibold);
  }
  .register__summary-note {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-fg-soft);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-regular);
  }
  .register__note {
    color: var(--color-fg-soft);
    font-size: var(--text-sm);
  }
  .register__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .register__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .register__link-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .register__link-head > span {
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
  }
  .register__pin {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    color: var(--color-fg-soft);
    font-size: var(--text-sm);
  }
  .register__pin strong {
    color: var(--color-fg);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-caps);
    font-variant-numeric: tabular-nums;
  }
  .register__url {
    display: block;
    padding: var(--space-3);
    border-radius: var(--radius-control);
    background: var(--color-surface-muted);
    color: var(--color-fg);
    font-size: var(--text-sm);
    word-break: break-all;
  }
  .site-footer {
    border-top: var(--border-subtle);
    background: var(--color-surface);
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
    text-align: center;
  }
  .site-footer__inner {
    max-width: var(--doc-max-w);
    margin: 0 auto;
    padding: var(--space-6) max(var(--space-4), var(--safe-right)) max(var(--space-6), var(--safe-bottom)) max(var(--space-4), var(--safe-left));
  }
  .site-footer__inner > * + * {
    margin-top: var(--space-2);
  }
  .site-footer__links {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .site-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    color: var(--color-fg-soft);
    text-decoration: underline;
  }
  .site-footer__links .site-footer__sep {
    display: none;
  }
  @media (min-width: 640px) {
    .site-footer__links {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
    }
    .site-footer__links .site-footer__sep {
      display: inline;
      padding: 0 var(--space-2);
    }
  }
  .site-footer__hosting {
    font-size: var(--text-xs);
    text-wrap: balance;
  }
  .home {
    background: var(--color-surface);
  }
  .home__band {
    padding: var(--space-12) 0;
  }
  .home__band--tint {
    background: var(--color-surface-subtle);
  }
  .home__band--brand {
    background: var(--color-brand);
    color: var(--color-fg-on-brand);
  }
  .home__wrap {
    max-width: var(--site-max-w);
    margin: 0 auto;
    padding: 0 max(var(--space-4), var(--safe-right)) 0 max(var(--space-4), var(--safe-left));
  }
  .home__head > * + *, .home__copy > * + * {
    margin-top: var(--space-4);
  }
  .home__eyebrow {
    color: var(--color-link);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }
  .home__heading {
    font-size: var(--text-2xl);
    text-wrap: balance;
  }
  .home__intro {
    max-width: var(--doc-max-w);
    color: var(--color-fg-muted);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
  }
  .home__text {
    color: var(--color-fg-soft);
    line-height: var(--leading-relaxed);
  }
  .home__aside {
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
  }
  .home__text a, .home__aside a, .home__answer a {
    text-decoration: underline;
  }
  .home__band--brand .home__eyebrow, .home__band--brand .home__text {
    color: var(--color-fg-on-brand-soft);
  }
  .home__checks {
    display: grid;
    gap: var(--space-3);
  }
  .home__checks li {
    display: grid;
    grid-template-columns: var(--icon-md) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
  }
  .home__checks svg {
    width: var(--icon-md);
    height: var(--icon-md);
    color: var(--color-link);
  }
  .home__note {
    display: grid;
    grid-template-columns: var(--icon-md) minmax(0, 1fr);
    gap: var(--space-3);
    max-width: var(--doc-max-w);
    padding: var(--space-4);
    border: var(--border-subtle);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-fg-soft);
    font-size: var(--text-sm);
  }
  .home__note svg {
    width: var(--icon-md);
    height: var(--icon-md);
    color: var(--color-link);
  }
  .home__split {
    display: grid;
    gap: var(--space-10);
  }
  .home__stack > * + * {
    margin-top: var(--space-8);
  }
  .home__hero-inner {
    display: grid;
    gap: var(--space-10);
  }
  .home__hero-copy > * + * {
    margin-top: var(--space-5);
  }
  .home__title {
    font-size: var(--text-4xl);
    text-wrap: balance;
  }
  .home__lead {
    max-width: var(--doc-max-w);
    color: var(--color-fg-on-brand-soft);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
  }
  .home__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .home__hero .btn {
    background: var(--color-fg-on-brand);
    color: var(--color-brand);
  }
  .home__hero .btn--secondary {
    border-color: var(--color-fg-on-brand-soft);
    background: transparent;
    color: var(--color-fg-on-brand);
  }
  .home__hero .btn:not(:disabled):active {
    background: var(--color-fg-on-brand-soft);
  }
  .home__hero .btn--secondary:not(:disabled):active {
    background: var(--color-brand-hover);
  }
  .home__hero :focus-visible {
    box-shadow: 0 0 0 var(--outline-w) var(--color-brand), 0 0 0 calc(2 * var(--outline-w)) var(--color-fg-on-brand);
  }
  .home__proofs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    color: var(--color-fg-on-brand-soft);
    font-size: var(--text-sm);
  }
  .home__proofs li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }
  .home__proofs svg {
    flex: none;
    width: var(--icon-sm);
    height: var(--icon-sm);
  }
  .home__hero-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
  }
  .home__label {
    color: var(--color-fg-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }
  .home__hero .home__label {
    color: var(--color-fg-on-brand-soft);
  }
  .home__device {
    width: min(100%, var(--device-w));
    padding: var(--space-2);
    border-radius: calc(3 * var(--radius-xl));
    background: var(--device-bezel);
    box-shadow: var(--shadow-lg);
  }
  .home__device-screen {
    overflow: hidden;
    aspect-ratio: 720 / 1566;
    border-radius: calc(3 * var(--radius-xl) - var(--space-2));
    background: var(--color-canvas);
  }
  .home__device-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .product-preview__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-min);
    padding: 0 var(--space-4);
    border: var(--border-subtle);
    border-color: var(--color-fg-on-brand-soft);
    border-radius: var(--radius-pill);
    color: var(--color-fg-on-brand);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
  }
  .product-preview__toggle:focus-visible {
    box-shadow: 0 0 0 var(--outline-w) var(--color-brand), 0 0 0 calc(2 * var(--outline-w)) var(--color-fg-on-brand);
  }
  .home__hero-caption {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    color: var(--color-fg-on-brand-soft);
    font-size: var(--text-sm);
  }
  .home__hero-caption strong {
    color: var(--color-fg-on-brand);
  }
  .home__signal {
    padding: var(--space-8) 0;
    border-bottom: var(--border-subtle);
  }
  .home__signal-inner {
    display: grid;
    gap: var(--space-2);
  }
  .home__signal-text {
    font-size: var(--text-lg);
  }
  .home__signal-claim {
    color: var(--color-link);
    font-size: var(--text-xl);
  }
  .home__signal-sub {
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
  }
  .home__figure > * + * {
    margin-top: var(--space-3);
  }
  .home__frame {
    overflow: hidden;
    border: var(--border-subtle);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
  }
  .home__frame-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-subtle);
    background: var(--color-canvas);
  }
  .home__frame-dot {
    flex: none;
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
  }
  .home__frame-title {
    min-width: 0;
    margin-left: var(--space-2);
    overflow: hidden;
    color: var(--color-fg-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .home__frame-pdf {
    display: none;
    width: 100%;
    height: var(--doc-frame-h);
    border: 0;
  }
  .home__frame-img {
    display: block;
    width: 100%;
    height: auto;
  }
  .home__caption {
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
  }
  .home__caption strong {
    color: var(--color-fg);
  }
  .home__steps li {
    display: grid;
    grid-template-columns: var(--avatar) minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-5) 0;
    border-top: var(--border-subtle);
  }
  .home__steps li:last-child {
    border-bottom: var(--border-subtle);
  }
  .home__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar);
    height: var(--avatar);
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-fg-on-accent);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
  }
  .home__step-title {
    font-size: var(--text-lg);
  }
  .home__step-text {
    margin-top: var(--space-1);
    color: var(--color-fg-muted);
  }
  .home__cards {
    display: grid;
    gap: var(--space-4);
  }
  .home__card > * + *, .home__module > * + * {
    margin-top: var(--space-3);
  }
  .home__module > * + * {
    margin-top: var(--space-5);
  }
  .home__card-title {
    font-size: var(--text-lg);
  }
  .home__card-text, .home__tagline {
    color: var(--color-fg-muted);
  }
  .home__tagline {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
  }
  .home__module-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .home__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--tap-min);
    height: var(--tap-min);
    border-radius: var(--radius-control);
    background: var(--color-accent-subtle);
    color: var(--color-fg-accent);
  }
  .home__icon svg {
    width: var(--icon-lg);
    height: var(--icon-lg);
  }
  .home__pill {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-accent-subtle);
    color: var(--color-fg-accent);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
  }
  .home__quote {
    padding-left: var(--space-5);
    border-left: var(--indicator-h) solid var(--color-accent);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
  }
  .home__pricing {
    display: grid;
    gap: var(--space-10);
  }
  .home__highlight {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-tight);
  }
  .home__was {
    text-decoration: line-through;
  }
  .home__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
  }
  .home__facts > div {
    padding: var(--space-3);
    border: var(--border-subtle);
    border-color: var(--color-brand-hover);
    border-radius: var(--radius-control);
    text-align: center;
  }
  .home__facts dt {
    color: var(--color-fg-on-brand-soft);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }
  .home__facts dd {
    font-weight: var(--font-weight-semibold);
  }
  .home__price-card {
    padding: var(--space-6);
    color: var(--color-fg);
    box-shadow: var(--shadow-lg);
  }
  .home__price-card > * + * {
    margin-top: var(--space-3);
  }
  .home__price-title {
    font-size: var(--text-xl);
  }
  .home__price-scope, .home__price-detail {
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
  }
  .home__price-was {
    color: var(--color-fg-muted);
    text-decoration: line-through;
  }
  .home__price {
    font-size: var(--text-4xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
  }
  .home__price-card > .home__included {
    padding-top: var(--space-5);
    border-top: var(--border-subtle);
  }
  .home__price-card > .home__invite {
    margin-top: var(--space-5);
    padding: var(--space-4);
    border-radius: var(--radius-control);
    background: var(--color-surface-subtle);
  }
  .home__price-actions {
    display: grid;
    gap: var(--space-3);
  }
  .home__price-card > .home__price-actions {
    margin-top: var(--space-5);
  }
  .home__faq {
    display: grid;
    gap: var(--space-8);
  }
  .home__faq-list {
    display: grid;
    gap: var(--space-3);
  }
  .home__faq-list .disclosure__title {
    font-size: var(--text-base);
  }
  .home__answer {
    color: var(--color-fg-soft);
    line-height: var(--leading-relaxed);
  }
  .home__answer strong {
    color: var(--color-fg);
  }
  @media (min-width: 640px) {
    .home__heading {
      font-size: var(--text-3xl);
    }
    .home__actions {
      flex-direction: row;
      flex-wrap: wrap;
    }
    .home__cards--4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 1024px) {
    .home__band {
      padding: var(--space-20) 0;
    }
    .home__heading {
      font-size: var(--text-4xl);
    }
    .home__title {
      font-size: var(--text-5xl);
    }
    .home__hero-inner {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      align-items: center;
      gap: var(--space-16);
    }
    .home__split, .home__pricing {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--space-16);
      align-items: start;
    }
    .home__split--center {
      align-items: center;
    }
    .home__signal-inner {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      column-gap: var(--space-10);
    }
    .home__signal-claim {
      grid-column: 2;
      grid-row: 1 / span 2;
    }
    .home__cards--2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .home__cards--3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .home__cards--4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .home__frame-pdf {
      display: block;
    }
    .home__frame-img--fallback {
      display: none;
    }
    .home__faq {
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
      gap: var(--space-16);
      align-items: start;
    }
  }
  @media (hover: hover) {
    .home__hero .btn:not(:disabled):hover {
      background: var(--color-fg-on-brand-soft);
    }
    .home__hero .btn--secondary:not(:disabled):hover, .product-preview__toggle:hover {
      background: var(--color-brand-hover);
    }
  }
}
@layer utilities;