styles.css

/* Generated by @syncedco/flow. Edit src/tokens.mjs or scripts/build-css.mjs, then run pnpm build. */
@layer reset, tokens, base, app, layout, components, utilities;
:root {
    color-scheme: light;

    --sf-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --sf-font-display: Fraunces, Georgia, "Times New Roman", serif;
    --sf-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    --sf-step--2: clamp(0.6944rem, 0.6866rem + 0.0348vw, 0.72rem);
    --sf-step--1: clamp(0.8333rem, 0.8129rem + 0.0907vw, 0.9rem);
    --sf-step-0: clamp(1rem, 0.9617rem + 0.1701vw, 1.125rem);
    --sf-step-1: clamp(1.2rem, 1.1369rem + 0.2806vw, 1.4063rem);
    --sf-step-2: clamp(1.44rem, 1.3427rem + 0.4324vw, 1.7578rem);
    --sf-step-3: clamp(1.728rem, 1.5843rem + 0.6385vw, 2.1973rem);
    --sf-step-4: clamp(2.0736rem, 1.8676rem + 0.9156vw, 2.7466rem);
    --sf-step-5: clamp(2.4883rem, 2.1991rem + 1.2856vw, 3.4332rem);
    --sf-step-6: clamp(2.986rem, 2.5863rem + 1.7763vw, 4.2915rem);
    --sf-step-7: clamp(3.5832rem, 3.0379rem + 2.4235vw, 5.3644rem);
    --sf-step-8: clamp(4.2998rem, 3.5634rem + 3.2731vw, 6.7055rem);
    --sf-type-caption-sm: var(--sf-step--2);
    --sf-type-caption: var(--sf-step--1);
    --sf-type-body: var(--sf-step-0);
    --sf-text-base: var(--sf-type-body);
    --sf-type-lead: var(--sf-step-1);
    --sf-type-h6: var(--sf-step-1);
    --sf-type-h5: var(--sf-step-2);
    --sf-type-h4: var(--sf-step-3);
    --sf-type-h3: var(--sf-step-4);
    --sf-type-h2: var(--sf-step-5);
    --sf-type-h1: var(--sf-step-6);
    --sf-type-title: var(--sf-step-4);
    --sf-type-display: var(--sf-step-7);
    --sf-line-height-tight: 1;
    --sf-line-height-heading: 1.08;
    --sf-line-height-body: 1.5;
    --sf-line-height-loose: 1.7;

    --sf-space-3xs: clamp(0.25rem, 0.2404rem + 0.0425vw, 0.2813rem);
    --sf-space-2xs: clamp(0.5rem, 0.4809rem + 0.085vw, 0.5625rem);
    --sf-space-xs: clamp(0.75rem, 0.7213rem + 0.1276vw, 0.8438rem);
    --sf-space-s: clamp(1rem, 0.9617rem + 0.1701vw, 1.125rem);
    --sf-space-m: clamp(1.5rem, 1.4426rem + 0.2551vw, 1.6875rem);
    --sf-space-l: clamp(2rem, 1.9235rem + 0.3401vw, 2.25rem);
    --sf-space-xl: clamp(3rem, 2.8852rem + 0.5102vw, 3.375rem);
    --sf-space-2xl: clamp(4rem, 3.8469rem + 0.6803vw, 4.5rem);
    --sf-space-3xl: clamp(6rem, 5.7704rem + 1.0204vw, 6.75rem);
    --sf-space-4xl: clamp(8rem, 7.6939rem + 1.3605vw, 9rem);
    --sf-space-3xs-2xs: clamp(0.25rem, 0.1543rem + 0.4252vw, 0.5625rem);
    --sf-space-2xs-xs: clamp(0.5rem, 0.3948rem + 0.4677vw, 0.8438rem);
    --sf-space-xs-s: clamp(0.75rem, 0.6352rem + 0.5102vw, 1.125rem);
    --sf-space-s-m: clamp(1rem, 0.7895rem + 0.9354vw, 1.6875rem);
    --sf-space-m-l: clamp(1.5rem, 1.2704rem + 1.0204vw, 2.25rem);
    --sf-space-l-xl: clamp(2rem, 1.5791rem + 1.8707vw, 3.375rem);
    --sf-space-xl-2xl: clamp(3rem, 2.5408rem + 2.0408vw, 4.5rem);
    --sf-space-2xl-3xl: clamp(4rem, 3.1582rem + 3.7415vw, 6.75rem);
    --sf-space-s-l: clamp(1rem, 0.6173rem + 1.7007vw, 2.25rem);
    --sf-space-m-xl: clamp(1.5rem, 0.926rem + 2.551vw, 3.375rem);
    --sf-space-l-2xl: clamp(2rem, 1.2347rem + 3.4014vw, 4.5rem);
    --sf-gutter: var(--sf-space-s-l);
    --sf-region: var(--sf-space-xl-2xl);
    --sf-container-max: 90rem;
    --sf-container-narrow: 48rem;
    --sf-container-wide: 108rem;
    --sf-grid-columns: 12;

    --sf-radius-none: 0;
    --sf-radius-xs: 0.25rem;
    --sf-radius-sm: 0.375rem;
    --sf-radius-md: 0.5rem;
    --sf-radius-lg: 0.75rem;
    --sf-radius-xl: 1rem;
    --sf-radius-2xl: 1.25rem;
    --sf-radius-3xl: 1.5rem;
    --sf-radius-full: 999rem;
    --sf-radius-control: var(--sf-radius-md);
    --sf-radius-panel: var(--sf-radius-lg);

    --sf-colour-neutral-0: oklch(100% 0 0);
    --sf-colour-neutral-50: oklch(98.6% 0.006 80);
    --sf-colour-neutral-100: oklch(96.4% 0.011 80);
    --sf-colour-neutral-200: oklch(90.8% 0.014 78);
    --sf-colour-neutral-300: oklch(82% 0.018 76);
    --sf-colour-neutral-400: oklch(68% 0.018 246);
    --sf-colour-neutral-500: oklch(53% 0.018 244);
    --sf-colour-neutral-600: oklch(43% 0.02 244);
    --sf-colour-neutral-700: oklch(34% 0.02 244);
    --sf-colour-neutral-800: oklch(27% 0.022 246);
    --sf-colour-neutral-850: oklch(22% 0.024 248);
    --sf-colour-neutral-900: oklch(18% 0.026 250);
    --sf-colour-neutral-950: oklch(13.5% 0.03 252);
    --sf-colour-amber-500: oklch(78% 0.15 82);
    --sf-colour-amber-700: oklch(54% 0.13 74);
    --sf-colour-orange-500: oklch(74% 0.17 48);
    --sf-colour-orange-600: oklch(68% 0.18 44);
    --sf-colour-orange-700: oklch(58% 0.17 42);
    --sf-colour-orange-800: oklch(50% 0.16 40);
    --sf-colour-orange-900: oklch(44% 0.14 40);
    --sf-colour-green-500: oklch(62% 0.13 150);
    --sf-colour-green-600: oklch(54% 0.13 150);
    --sf-colour-green-700: oklch(44% 0.12 150);
    --sf-colour-cyan-500: oklch(70% 0.12 205);
    --sf-colour-cyan-600: oklch(58% 0.12 210);
    --sf-colour-blue-600: oklch(52% 0.14 250);
    --sf-colour-red-600: oklch(56% 0.2 28);
    --sf-colour-red-700: oklch(47% 0.19 28);
    --sf-colour-background: var(--sf-colour-neutral-50);
    --sf-colour-foreground: var(--sf-colour-neutral-900);
    --sf-colour-muted: var(--sf-colour-neutral-700);
    --sf-colour-subtle: var(--sf-colour-neutral-500);
    --sf-colour-surface: var(--sf-colour-neutral-0);
    --sf-colour-surface-alt: var(--sf-colour-neutral-100);
    --sf-colour-surface-raised: var(--sf-colour-neutral-0);
    --sf-colour-surface-raised-2: var(--sf-colour-neutral-50);
    --sf-colour-surface-hover: var(--sf-colour-neutral-100);
    --sf-colour-surface-inset: var(--sf-colour-neutral-100);
    --sf-colour-border-subtle: oklch(18% 0.026 250 / 0.08);
    --sf-colour-border: oklch(18% 0.026 250 / 0.12);
    --sf-colour-border-strong: oklch(18% 0.026 250 / 0.22);
    --sf-colour-backdrop: oklch(0% 0 0 / 0.48);
    --sf-colour-primary: var(--sf-colour-orange-800);
    --sf-colour-primary-hover: var(--sf-colour-orange-900);
    --sf-colour-primary-foreground: var(--sf-colour-neutral-0);
    --sf-colour-primary-soft: oklch(50% 0.16 40 / 0.12);
    --sf-colour-primary-soft-border: oklch(50% 0.16 40 / 0.28);
    --sf-colour-link: var(--sf-colour-orange-800);
    --sf-colour-link-hover: var(--sf-colour-orange-900);
    --sf-colour-accent: var(--sf-colour-cyan-500);
    --sf-colour-accent-foreground: var(--sf-colour-neutral-950);
    --sf-colour-success: var(--sf-colour-green-500);
    --sf-colour-success-foreground: var(--sf-colour-neutral-0);
    --sf-colour-success-soft: oklch(62% 0.13 150 / 0.12);
    --sf-colour-warning: var(--sf-colour-amber-500);
    --sf-colour-warning-foreground: var(--sf-colour-neutral-950);
    --sf-colour-warning-soft: oklch(78% 0.15 82 / 0.16);
    --sf-colour-danger: var(--sf-colour-red-700);
    --sf-colour-danger-foreground: var(--sf-colour-neutral-0);
    --sf-colour-danger-soft: oklch(56% 0.2 28 / 0.12);
    --sf-colour-info: var(--sf-colour-cyan-600);
    --sf-colour-info-foreground: var(--sf-colour-neutral-0);
    --sf-colour-info-soft: oklch(70% 0.12 205 / 0.14);
    --sf-colour-categorical-1: var(--sf-colour-cyan-600);
    --sf-colour-categorical-2: var(--sf-colour-green-600);
    --sf-colour-categorical-3: var(--sf-colour-amber-500);
    --sf-colour-categorical-4: var(--sf-colour-orange-600);
    --sf-colour-categorical-5: var(--sf-colour-red-600);
    --sf-colour-categorical-6: oklch(58% 0.15 292);
    --sf-colour-ring: var(--sf-colour-orange-800);

    --sf-shadow-sm: 0 0.125rem 0.375rem oklch(0% 0 0 / 0.08);
    --sf-shadow-md: 0 0.75rem 1.75rem oklch(0% 0 0 / 0.12);
    --sf-shadow-lg: 0 1.25rem 3rem oklch(0% 0 0 / 0.16);
    --sf-shadow-xl: 0 1.75rem 4rem oklch(0% 0 0 / 0.18);
    --sf-shadow-inset: inset 0 0 0 1px var(--sf-colour-border);
    --sf-shadow-glow: 0 0 2rem oklch(68% 0.18 44 / 0.24);
    --sf-z-sticky: 20;
    --sf-z-header: 20;
    --sf-z-backdrop: 25;
    --sf-z-drawer: 30;
    --sf-z-overlay: 40;
    --sf-z-toast: 50;
    --sf-z-skip-link: 999;
    --sf-duration-fast: 150ms;
    --sf-duration-normal: 220ms;
    --sf-duration-slow: 360ms;
    --sf-ease-standard: cubic-bezier(.2, 0, 0, 1);
    --sf-ease-emphasized: cubic-bezier(.16, 1, .3, 1);

    --sf-button-radius: var(--sf-radius-md);
    --sf-button-block-size: 2.75rem;
    --sf-button-padding-inline: var(--sf-space-s);
    --sf-card-radius: var(--sf-radius-lg);
    --sf-card-padding: var(--sf-space-m-l);
    --sf-input-radius: var(--sf-radius-md);
    --sf-input-block-size: 2.75rem;
    --sf-input-padding-inline: var(--sf-space-s);
    --sf-input-border: var(--sf-colour-border);
    --sf-input-bg: var(--sf-colour-surface);
    --sf-alert-radius: var(--sf-radius-lg);
    --sf-alert-padding: var(--sf-space-s-m);
    --sf-nav-gap: var(--sf-space-xs-s);
    --sf-nav-link-radius: var(--sf-radius-sm);
    --sf-icon-size: 1em;
    --sf-icon-stroke: 2;
  }

  .sf-theme-light, [data-sf-theme="light"] {
    color-scheme: light;
    --sf-colour-background: var(--sf-colour-neutral-50);
    --sf-colour-foreground: var(--sf-colour-neutral-900);
    --sf-colour-muted: var(--sf-colour-neutral-700);
    --sf-colour-subtle: var(--sf-colour-neutral-500);
    --sf-colour-surface: var(--sf-colour-neutral-0);
    --sf-colour-surface-alt: var(--sf-colour-neutral-100);
    --sf-colour-surface-raised: var(--sf-colour-neutral-0);
    --sf-colour-surface-raised-2: var(--sf-colour-neutral-50);
    --sf-colour-surface-hover: var(--sf-colour-neutral-100);
    --sf-colour-surface-inset: var(--sf-colour-neutral-100);
    --sf-colour-border-subtle: oklch(18% 0.026 250 / 0.08);
    --sf-colour-border: oklch(18% 0.026 250 / 0.12);
    --sf-colour-border-strong: oklch(18% 0.026 250 / 0.22);
    --sf-colour-backdrop: oklch(0% 0 0 / 0.48);
    --sf-colour-link: var(--sf-colour-orange-800);
    --sf-colour-link-hover: var(--sf-colour-orange-900);
  }

  .sf-theme-dark, [data-sf-theme="dark"] {
    color-scheme: dark;
    --sf-colour-background: var(--sf-colour-neutral-950);
    --sf-colour-foreground: oklch(96% 0.008 86);
    --sf-colour-muted: oklch(78% 0.012 86);
    --sf-colour-subtle: oklch(64% 0.014 86);
    --sf-colour-surface: var(--sf-colour-neutral-900);
    --sf-colour-surface-alt: var(--sf-colour-neutral-850);
    --sf-colour-surface-raised: var(--sf-colour-neutral-850);
    --sf-colour-surface-raised-2: var(--sf-colour-neutral-800);
    --sf-colour-surface-hover: color-mix(in oklch, var(--sf-colour-neutral-850) 76%, white);
    --sf-colour-surface-inset: var(--sf-colour-neutral-950);
    --sf-colour-border-subtle: oklch(100% 0 0 / 0.08);
    --sf-colour-border: oklch(100% 0 0 / 0.14);
    --sf-colour-border-strong: oklch(100% 0 0 / 0.24);
    --sf-colour-backdrop: oklch(0% 0 0 / 0.64);
    --sf-colour-primary: var(--sf-colour-orange-500);
    --sf-colour-primary-hover: oklch(80% 0.14 50);
    --sf-colour-primary-foreground: var(--sf-colour-neutral-950);
    --sf-colour-primary-soft: oklch(74% 0.17 48 / 0.18);
    --sf-colour-primary-soft-border: oklch(74% 0.17 48 / 0.34);
    --sf-colour-link: var(--sf-colour-orange-500);
    --sf-colour-link-hover: oklch(80% 0.14 50);
    --sf-colour-success: oklch(72% 0.13 150);
    --sf-colour-success-foreground: var(--sf-colour-neutral-950);
    --sf-colour-success-soft: oklch(72% 0.13 150 / 0.16);
    --sf-colour-warning: oklch(84% 0.15 82);
    --sf-colour-warning-foreground: var(--sf-colour-neutral-950);
    --sf-colour-warning-soft: oklch(84% 0.15 82 / 0.18);
    --sf-colour-danger: oklch(70% 0.18 28);
    --sf-colour-danger-foreground: var(--sf-colour-neutral-950);
    --sf-colour-danger-soft: oklch(70% 0.18 28 / 0.16);
    --sf-colour-info: oklch(76% 0.12 205);
    --sf-colour-info-foreground: var(--sf-colour-neutral-950);
    --sf-colour-info-soft: oklch(76% 0.12 205 / 0.16);
    --sf-colour-ring: var(--sf-colour-orange-500);
    --sf-shadow-glow: 0 0 2rem oklch(74% 0.17 48 / 0.18);
  }
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  *:where(:not(dialog)) { margin: 0; }
  html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-block-size: 100%; }
  img, picture, video, canvas, svg { display: block; max-inline-size: 100%; }
  img, video { block-size: auto; }
  input, button, textarea, select { font: inherit; }
  button, input:where([type="button"], [type="submit"], [type="reset"]) { appearance: button; }
  [hidden]:where(:not([hidden="until-found"])) { display: none !important; }
}
@layer base {
  html {
    background: var(--sf-colour-background);
    color: var(--sf-colour-foreground);
    font-size: 100%;
    scroll-behavior: smooth;
  }

  body {
    background: var(--sf-colour-background);
    color: var(--sf-colour-foreground);
    font-family: var(--sf-font-sans);
    font-size: var(--sf-text-base);
    line-height: var(--sf-line-height-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  :where(h1, h2, h3, h4, h5, h6) {
    color: inherit;
    font-family: var(--sf-font-display);
    font-weight: 700;
    line-height: var(--sf-line-height-tight);
    text-wrap: balance;
  }

  :where(h1) { font-size: var(--sf-type-h1); }
  :where(h2) { font-size: var(--sf-type-h2); }
  :where(h3) { font-size: var(--sf-type-h3); }
  :where(h4) { font-size: var(--sf-type-h4); }
  :where(h5) { font-size: var(--sf-type-h5); }
  :where(h6) { font-size: var(--sf-type-h6); }
  :where(p, li, dd, figcaption) { text-wrap: pretty; }
  :where(a) {
    color: var(--sf-colour-link);
    text-decoration-color: color-mix(in oklch, currentColor 55%, transparent);
    text-decoration-skip-ink: auto;
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
  }
  :where(a:hover) { color: var(--sf-colour-link-hover); }
  :where(strong, b) { font-weight: 800; }
  :where(small) { font-size: var(--sf-step--1); }
  :where(code, kbd, samp, pre) { font-family: var(--sf-font-mono); }
  :where(:not(pre) > code, kbd) {
    background: var(--sf-colour-surface-alt);
    border: 1px solid var(--sf-colour-border);
    border-radius: var(--sf-radius-sm);
    font-size: .9em;
    padding: .1em .35em;
  }
  :where(pre) {
    background: var(--sf-colour-surface-inset);
    border: 1px solid var(--sf-colour-border);
    border-radius: var(--sf-radius-panel);
    overflow-x: auto;
    padding: var(--sf-space-s);
  }
  :where(hr) {
    border: 0;
    border-block-start: 1px solid var(--sf-colour-border);
    margin-block: var(--sf-space-l);
  }
  :where(blockquote) {
    border-inline-start: 0.25rem solid var(--sf-colour-primary);
    color: var(--sf-colour-muted);
    padding-inline-start: var(--sf-space-s);
  }
  :where(label) { cursor: pointer; }
  :where(input, textarea, select) { color: inherit; }
  :where(textarea) { resize: vertical; }
  :where(button:not(:disabled), [role="button"]:not(:disabled), a[href]) { cursor: pointer; }
  :where(button:disabled, input:disabled, textarea:disabled, select:disabled, [aria-disabled="true"]) { cursor: not-allowed; }
  :where(:focus-visible) { outline: 0.125rem solid var(--sf-colour-ring); outline-offset: .2rem; }
  :where(:target) { scroll-margin-block: var(--sf-space-l); }
  ::selection { background: color-mix(in oklch, var(--sf-colour-primary) 28%, transparent); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
    }
  }

  @media (forced-colors: active) {
    :where(:focus-visible) {
      outline: 2px solid Highlight;
      outline-offset: .2rem;
    }

    ::selection {
      background: Highlight;
      color: HighlightText;
    }
  }
}
@layer layout {
  .sf-container {
    inline-size: min(100% - (var(--sf-gutter) * 2), var(--sf-container-max));
    margin-inline: auto;
  }

  .sf-container--narrow { --sf-container-max: var(--sf-container-narrow); }
  .sf-container--wide { --sf-container-max: var(--sf-container-wide); }
  .sf-container--full { --sf-container-max: 100%; }

  .sf-rail-shell {
    --sf-rail-size: 4.25rem;
    min-block-size: 100svh;
  }

  .sf-rail-shell__body {
    min-inline-size: 0;
  }

  .sf-rail-shell__rail {
    align-items: center;
    background:
      repeating-linear-gradient(-45deg, color-mix(in oklch, var(--sf-colour-foreground) 9%, transparent) 0 .0625rem, transparent .0625rem .4375rem),
      color-mix(in oklch, var(--sf-colour-background) 92%, black);
    border-inline-end: 1px solid var(--sf-colour-border);
    display: none;
    justify-items: center;
  }

  .sf-rail-shell__mark,
  .sf-rail-shell__label {
    color: var(--sf-colour-primary);
    font-weight: 900;
  }

  .sf-rail-shell__label {
    font-family: var(--sf-font-mono);
    font-size: var(--sf-step--2);
    letter-spacing: .18em;
    text-transform: uppercase;
    transform: rotate(-90deg);
    white-space: nowrap;
  }

  .sf-rail-shell__label::before {
    background: currentColor;
    block-size: .25rem;
    border-radius: var(--sf-radius-full);
    box-shadow: 0 0 .875rem currentColor;
    content: "";
    display: inline-block;
    inline-size: .25rem;
    margin-inline-end: var(--sf-space-xs);
  }

  .sf-section { padding-block: var(--sf-section-space, var(--sf-region)); }
  .sf-section--compact { --sf-section-space: var(--sf-space-l-xl); }
  .sf-section--spacious { --sf-section-space: var(--sf-space-2xl-3xl); }

  .sf-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sf-stack-space, var(--sf-space-s));
  }

  .sf-stack--tight { --sf-stack-space: var(--sf-space-2xs-xs); }
  .sf-stack--loose { --sf-stack-space: var(--sf-space-m-xl); }

  .sf-flow > * + * { margin-block-start: var(--sf-flow-space, var(--sf-space-s)); }

  .sf-cluster {
    align-items: var(--sf-cluster-align, center);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-cluster-space, var(--sf-space-s));
    justify-content: var(--sf-cluster-justify, flex-start);
  }

  .sf-repel {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-s);
    justify-content: space-between;
  }

  .sf-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-s);
    justify-content: space-between;
  }

  .sf-app-shell {
    --sf-app-header-height: 4rem;
    --sf-app-sidebar-collapsed-width: 4.75rem;
    background: var(--sf-colour-background);
    color: var(--sf-colour-foreground);
    display: grid;
    grid-template-columns: minmax(14rem, var(--sf-app-sidebar-width, 16rem)) minmax(0, 1fr);
    min-block-size: 100dvh;
    position: relative;
    transition: grid-template-columns var(--sf-duration-normal) var(--sf-ease-standard);
  }

  .sf-app-header {
    align-items: center;
    background: var(--sf-colour-surface);
    border-block-end: 1px solid var(--sf-colour-border);
    display: flex;
    gap: var(--sf-space-s);
    grid-column: 1 / -1;
    justify-content: space-between;
    min-block-size: var(--sf-app-header-height);
    padding-inline: var(--sf-space-s-m);
    z-index: var(--sf-z-header);
  }

  .sf-app-shell[data-layout~="fixed-header"] {
    grid-template-rows: var(--sf-app-header-height) minmax(0, 1fr);
  }

  .sf-app-shell[data-layout~="fixed-header"] .sf-app-header {
    inset-block-start: 0;
    position: sticky;
  }

  .sf-app-shell[data-layout~="fixed-header"] .sf-app-sidebar {
    inset-block-start: var(--sf-app-header-height);
    max-block-size: calc(100dvh - var(--sf-app-header-height));
    min-block-size: calc(100dvh - var(--sf-app-header-height));
  }

  .sf-app-shell[data-collapsed="true"] {
    grid-template-columns: var(--sf-app-sidebar-collapsed-width) minmax(0, 1fr);
  }

  .sf-app-sidebar {
    align-self: start;
    background: var(--sf-colour-surface);
    border-inline-end: 1px solid var(--sf-colour-border);
    display: flex;
    flex-direction: column;
    gap: var(--sf-space-s);
    max-block-size: 100dvh;
    min-block-size: 100dvh;
    overflow: auto;
    padding: var(--sf-space-s);
    position: sticky;
    inset-block-start: 0;
    transition: transform var(--sf-duration-normal) var(--sf-ease-standard), inline-size var(--sf-duration-normal) var(--sf-ease-standard);
  }

  .sf-app-sidebar__brand {
    align-items: center;
    display: flex;
    gap: var(--sf-space-xs);
    padding-block-end: var(--sf-space-s);
  }

  .sf-app-sidebar > footer {
    border-block-start: 1px solid var(--sf-colour-border);
    padding-block-start: var(--sf-space-s);
  }

  .sf-app-main {
    min-inline-size: 0;
    padding: var(--sf-app-main-padding, var(--sf-space-m-l));
  }

  .sf-app-shell[data-collapsed="true"] .sf-app-sidebar {
    overflow-x: hidden;
  }

  .sf-app-shell[data-collapsed="true"] .sf-app-sidebar__brand,
  .sf-app-shell[data-collapsed="true"] .sf-app-sidebar .sf-nav__link {
    justify-content: center;
  }

  .sf-app-shell[data-collapsed="true"] [data-hide-collapsed="true"] {
    display: none;
  }

  .sf-app-backdrop {
    display: none;
  }

  @media (max-width: 48rem) {
    .sf-app-shell[data-mobile="drawer"] {
      display: block;
    }

    .sf-app-shell[data-mobile="drawer"] .sf-app-header {
      position: sticky;
      inset-block-start: 0;
    }

    .sf-app-shell[data-mobile="drawer"] .sf-app-sidebar {
      block-size: 100dvh;
      box-shadow: var(--sf-shadow-xl);
      inline-size: min(18rem, calc(100vw - var(--sf-space-l)));
      inset-block: 0;
      inset-inline-start: 0;
      max-block-size: none;
      min-block-size: 100dvh;
      position: fixed;
      transform: translateX(-100%);
      z-index: var(--sf-z-drawer);
    }

    .sf-app-shell[data-mobile="drawer"][data-sidebar-open="true"] .sf-app-sidebar {
      transform: translateX(0);
    }

    .sf-app-shell[data-mobile="drawer"][data-sidebar-open="true"] .sf-app-backdrop {
      background: var(--sf-colour-backdrop);
      display: block;
      inset: 0;
      position: fixed;
      z-index: var(--sf-z-backdrop);
    }
  }

  .sf-grid {
    display: grid;
    gap: var(--sf-grid-gap, var(--sf-gutter));
    grid-template-columns: repeat(var(--sf-grid-columns), minmax(0, 1fr));
  }

  .sf-grid--2 { --sf-grid-columns: 2; }
  .sf-grid--3 { --sf-grid-columns: 3; }
  .sf-grid--4 { --sf-grid-columns: 4; }

  .sf-auto-grid {
    display: grid;
    gap: var(--sf-grid-gap, var(--sf-gutter));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sf-auto-grid-min, 16rem)), 1fr));
  }

  .sf-auto-grid--xs { --sf-auto-grid-min: 8rem; }
  .sf-auto-grid--sm { --sf-auto-grid-min: 12rem; }
  .sf-auto-grid--lg { --sf-auto-grid-min: 20rem; }

  .sf-split {
    display: grid;
    gap: var(--sf-split-gap, var(--sf-gutter));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sf-split-min, 24rem)), 1fr));
  }

  .sf-split--reverse > :first-child { order: 2; }
  .sf-split--reverse > :last-child { order: 1; }

  .sf-centre {
    box-sizing: content-box;
    margin-inline: auto;
    max-inline-size: var(--sf-centre-size, 65ch);
  }

  .sf-centre--narrow { --sf-centre-size: 48ch; }
  .sf-centre--wide { --sf-centre-size: 80ch; }

  .sf-sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-gutter);
  }

  .sf-sidebar > :first-child {
    flex-basis: var(--sf-sidebar-width, 20rem);
    flex-grow: 1;
  }

  .sf-sidebar > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: min(100%, var(--sf-sidebar-content-min, 50%));
  }

  .sf-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-gutter);
  }

  .sf-switcher > * {
    flex-basis: calc((var(--sf-switcher-threshold, 42rem) - 100%) * 999);
    flex-grow: 1;
  }

  .sf-frame {
    aspect-ratio: var(--sf-frame-ratio, 16 / 9);
    overflow: hidden;
  }

  .sf-frame > :where(img, video, iframe) {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }

  .sf-frame--square { --sf-frame-ratio: 1; }
  .sf-frame--portrait { --sf-frame-ratio: 4 / 5; }
  .sf-frame--wide { --sf-frame-ratio: 21 / 9; }

  .sf-cover {
    display: flex;
    flex-direction: column;
    min-block-size: var(--sf-cover-min, 100svh);
    padding-block: var(--sf-region);
  }

  .sf-cover > :where(:first-child:not(.sf-cover__centre)) { margin-block-end: auto; }
  .sf-cover > :where(:last-child:not(.sf-cover__centre)) { margin-block-start: auto; }

  .sf-panel-grid {
    container-type: inline-size;
    display: grid;
    gap: var(--sf-grid-gap, var(--sf-gutter));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sf-panel-min, 18rem)), 1fr));
  }

  .sf-metric-grid,
  .sf-pipeline {
    display: grid;
    gap: var(--sf-space-s);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sf-panel-min, 11rem)), 1fr));
  }

  .sf-pipeline {
    --sf-panel-min: 10rem;
  }

  .sf-scroll-viewport,
  .sf-scroll-snap-y {
    block-size: var(--sf-scroll-viewport-size, 100svh);
    overflow-y: auto;
    scroll-padding-block: var(--sf-scroll-padding, var(--sf-space-l));
    scroll-snap-type: y proximity;
  }

  :where(.sf-scroll-viewport, .sf-scroll-snap-y)[data-snap="mandatory"] {
    --sf-scroll-snap-stop: always;
    scroll-snap-type: y mandatory;
  }
  .sf-scroll-viewport[data-size="preview"] {
    --sf-scroll-margin: 0;
    --sf-scroll-padding: 0;
    --sf-scroll-viewport-size: min(32rem, 80svh);
    --sf-scroll-panel-min: min(32rem, 80svh);
  }

  .sf-scroll-panel {
    align-content: center;
    display: grid;
    min-block-size: var(--sf-scroll-panel-min, 100svh);
    scroll-margin-block: var(--sf-scroll-margin, var(--sf-space-l));
    scroll-snap-align: start;
    scroll-snap-stop: var(--sf-scroll-snap-stop, normal);
  }

  .sf-sticky-top {
    position: sticky;
    inset-block-start: var(--sf-sticky-offset, 0);
    z-index: var(--sf-sticky-z, var(--sf-z-sticky));
  }

  .sf-media-object {
    align-items: var(--sf-media-object-align, start);
    display: grid;
    gap: var(--sf-space-s-m);
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sf-aside-rail {
    display: grid;
    gap: var(--sf-gutter);
    grid-template-columns: minmax(0, 1fr);
  }

  .sf-chapter {
    align-items: var(--sf-chapter-align, center);
    display: grid;
    gap: var(--sf-chapter-gap, var(--sf-space-xl-2xl));
    grid-template-columns: minmax(0, 1fr);
  }

  .sf-chapter__copy {
    max-inline-size: var(--sf-chapter-copy, 24rem);
  }

  @media (min-width: 48rem) {
    .sf-rail-shell {
      display: grid;
      grid-template-columns: var(--sf-rail-size) minmax(0, 1fr);
    }

    .sf-rail-shell__rail {
      block-size: 100svh;
      display: grid;
      grid-template-rows: 3.5rem repeat(var(--sf-rail-items, 5), 1fr);
      inset-block-start: 0;
      position: sticky;
    }

    .sf-aside-rail {
      grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem);
    }

    .sf-aside-rail[data-rail="start"] {
      grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr);
    }

    .sf-chapter {
      grid-template-columns: minmax(18rem, .42fr) minmax(0, 1fr);
    }
  }

  @media (max-width: 56rem) {
    .sf-app-shell {
      grid-template-columns: 1fr;
    }

    .sf-app-main {
      --sf-app-main-padding: var(--sf-space-s);
    }

    .sf-app-sidebar {
      border-block-end: 1px solid var(--sf-colour-border);
      border-inline-end: 0;
      max-block-size: none;
      min-block-size: auto;
      position: static;
    }

    .sf-app-sidebar > footer {
      margin-block-start: 0;
    }
  }

  @supports (animation-timeline: view()) {
    .sf-scroll-panel[data-view-progress] {
      view-timeline-name: --sf-panel;
      view-timeline-axis: block;
    }
  }

  @container (min-width: 42rem) {
    .sf-panel-grid[data-density="featured"] > :first-child {
      grid-column: span 2;
    }
  }
}
@layer components {
  .sf-button {
    align-items: center;
    background: var(--sf-button-bg, var(--sf-colour-primary));
    border: 1px solid var(--sf-button-border, color-mix(in oklch, var(--sf-colour-primary) 84%, black));
    border-radius: var(--sf-button-radius);
    box-shadow: var(--sf-button-shadow, var(--sf-shadow-sm));
    color: var(--sf-button-colour, var(--sf-colour-primary-foreground));
    display: inline-flex;
    font-size: var(--sf-step--1);
    font-weight: 700;
    gap: var(--sf-space-2xs);
    justify-content: center;
    min-block-size: var(--sf-button-block-size);
    padding-block: .625rem;
    padding-inline: var(--sf-button-padding-inline);
    text-decoration: none;
    transition: background-color var(--sf-duration-normal) var(--sf-ease-standard), border-color var(--sf-duration-normal) var(--sf-ease-standard), box-shadow var(--sf-duration-normal) var(--sf-ease-standard), color var(--sf-duration-normal) var(--sf-ease-standard), transform var(--sf-duration-normal) var(--sf-ease-standard);
    white-space: nowrap;
  }

  .sf-button:hover {
    background: var(--sf-button-bg-hover, var(--sf-colour-primary-hover));
    transform: translateY(-0.0625rem);
  }

  .sf-button:disabled,
  .sf-button[aria-disabled="true"] {
    opacity: .55;
    pointer-events: none;
  }

  :where(.sf-button, .sf-nav__link, .sf-card--interactive, .sf-price-card)[aria-disabled="true"],
  :where(.sf-link, .sf-link-subtle, .sf-link-plain)[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .55;
    pointer-events: none;
  }

  :where(.sf-button, .sf-nav__link)[aria-expanded="true"],
  :where(.sf-button, .sf-nav__link)[aria-pressed="true"],
  :where(.sf-button, .sf-nav__link)[aria-selected="true"],
  :where(.sf-button, .sf-nav__link)[data-state="open"] {
    background: var(--sf-colour-surface-alt);
    border-color: color-mix(in oklch, var(--sf-colour-primary) 34%, var(--sf-colour-border));
    color: var(--sf-colour-foreground);
  }

  .sf-button[aria-busy="true"],
  .sf-button[data-loading="true"] {
    cursor: progress;
    opacity: .78;
    pointer-events: none;
  }

  .sf-button:focus-visible {
    box-shadow: 0 0 0 0.25rem color-mix(in oklch, var(--sf-colour-ring) 22%, transparent);
  }

  .sf-button--default,
  .sf-button[data-variant="default"] {
    --sf-button-bg: var(--sf-colour-primary);
    --sf-button-bg-hover: var(--sf-colour-primary-hover);
    --sf-button-border: color-mix(in oklch, var(--sf-colour-primary) 84%, black);
    --sf-button-colour: var(--sf-colour-primary-foreground);
  }

  .sf-button--secondary,
  .sf-button[data-variant="secondary"] {
    --sf-button-bg: var(--sf-colour-surface-alt);
    --sf-button-bg-hover: color-mix(in oklch, var(--sf-colour-surface-alt) 86%, var(--sf-colour-primary));
    --sf-button-border: var(--sf-colour-border);
    --sf-button-colour: var(--sf-colour-foreground);
  }

  .sf-button--outline,
  .sf-button[data-variant="outline"] {
    --sf-button-bg: transparent;
    --sf-button-bg-hover: var(--sf-colour-surface-alt);
    --sf-button-border: var(--sf-colour-border);
    --sf-button-colour: var(--sf-colour-foreground);
    --sf-button-shadow: none;
  }

  .sf-button--ghost,
  .sf-button[data-variant="ghost"] {
    --sf-button-bg: transparent;
    --sf-button-bg-hover: var(--sf-colour-surface-alt);
    --sf-button-border: transparent;
    --sf-button-colour: var(--sf-colour-foreground);
    --sf-button-shadow: none;
  }

  .sf-button--link,
  .sf-button[data-variant="link"] {
    --sf-button-bg: transparent;
    --sf-button-bg-hover: transparent;
    --sf-button-border: transparent;
    --sf-button-colour: var(--sf-colour-primary);
    --sf-button-shadow: none;
    min-block-size: auto;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: .25em;
  }

  .sf-button--link:hover,
  .sf-button[data-variant="link"]:hover {
    transform: none;
  }

  .sf-button--destructive,
  .sf-button[data-variant="destructive"] {
    --sf-button-bg: var(--sf-colour-danger);
    --sf-button-bg-hover: color-mix(in oklch, var(--sf-colour-danger) 86%, black);
    --sf-button-border: color-mix(in oklch, var(--sf-colour-danger) 84%, black);
    --sf-button-colour: var(--sf-colour-primary-foreground);
  }

  .sf-button--sm,
  .sf-button[data-size="sm"] {
    --sf-button-block-size: 2.25rem;
    --sf-button-padding-inline: var(--sf-space-xs);
  }

  .sf-button--lg,
  .sf-button[data-size="lg"] {
    --sf-button-block-size: 3rem;
    --sf-button-padding-inline: var(--sf-space-m);
  }

  .sf-button--icon,
  .sf-icon-button,
  .sf-button[data-size="icon"] {
    --sf-button-block-size: 2.75rem;
    inline-size: 2.75rem;
    padding-inline: 0;
  }

  .sf-button--block,
  .sf-button[data-width="block"] {
    inline-size: 100%;
  }

  .sf-button-group {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-2xs);
  }

  .sf-spinner {
    animation: sf-spinner-rotate .75s linear infinite;
    block-size: var(--sf-spinner-size, 1em);
    border: .125em solid color-mix(in oklch, currentColor 28%, transparent);
    border-block-start-color: currentColor;
    border-radius: var(--sf-radius-full);
    display: inline-block;
    flex: 0 0 auto;
    inline-size: var(--sf-spinner-size, 1em);
  }

  .sf-spinner[data-size="sm"] { --sf-spinner-size: .875em; }
  .sf-spinner[data-size="lg"] { --sf-spinner-size: 1.5em; }

  @keyframes sf-spinner-rotate {
    to { transform: rotate(1turn); }
  }

  .sf-icon {
    block-size: var(--sf-icon-size, 1em);
    color: var(--sf-icon-colour, currentColor);
    flex: 0 0 auto;
    inline-size: var(--sf-icon-size, 1em);
    stroke-width: var(--sf-icon-stroke, 2);
    vertical-align: -0.125em;
  }

  .sf-icon--xs { --sf-icon-size: var(--sf-step--1); }
  .sf-icon--sm { --sf-icon-size: var(--sf-step-0); }
  .sf-icon--md { --sf-icon-size: var(--sf-step-1); }
  .sf-icon--lg { --sf-icon-size: var(--sf-step-2); }
  .sf-icon--xl { --sf-icon-size: var(--sf-step-3); }

  .sf-card {
    background: var(--sf-card-bg, var(--sf-colour-surface));
    border: 1px solid var(--sf-card-border, var(--sf-colour-border));
    border-radius: var(--sf-card-radius);
    box-shadow: var(--sf-card-shadow, var(--sf-shadow-sm));
    color: var(--sf-card-colour, var(--sf-colour-foreground));
    padding: var(--sf-card-padding);
  }

  .sf-card--flat {
    --sf-card-shadow: none;
  }

  .sf-card--raised {
    --sf-card-bg: var(--sf-colour-surface-raised);
    --sf-card-shadow: var(--sf-shadow-md);
  }

  .sf-card--compact {
    --sf-card-padding: var(--sf-space-s);
  }

  .sf-card--glass,
  .sf-card--technical {
    --sf-card-bg:
      linear-gradient(180deg, color-mix(in oklch, var(--sf-colour-foreground) 5%, transparent), transparent),
      color-mix(in oklch, var(--sf-colour-surface) 84%, transparent);
    --sf-card-border: var(--sf-colour-border-strong);
    --sf-card-shadow: none;
    backdrop-filter: blur(1.125rem);
  }

  .sf-card--accent {
    --sf-card-border: color-mix(in oklch, var(--sf-colour-primary) 54%, var(--sf-colour-border));
    --sf-card-shadow: 0 0 2rem color-mix(in oklch, var(--sf-colour-primary) 18%, transparent);
  }

  .sf-card--center {
    align-items: center;
    text-align: center;
  }

  .sf-card__header,
  .sf-card__body,
  .sf-card__footer {
    display: grid;
    gap: var(--sf-space-xs);
  }

  .sf-card__title {
    font-family: var(--sf-font-display);
    font-size: var(--sf-step-2);
    font-weight: 700;
    line-height: var(--sf-line-height-heading);
  }

  .sf-card__description {
    color: var(--sf-colour-muted);
  }

  .sf-card--interactive {
    transition: border-color var(--sf-duration-normal) var(--sf-ease-standard), box-shadow var(--sf-duration-normal) var(--sf-ease-standard), transform var(--sf-duration-normal) var(--sf-ease-standard);
  }

  .sf-card--interactive:hover {
    border-color: color-mix(in oklch, var(--sf-colour-primary) 32%, var(--sf-colour-border));
    box-shadow: var(--sf-shadow-md);
    transform: translateY(-0.125rem);
  }

  .sf-surface {
    background: var(--sf-surface-bg, var(--sf-colour-surface));
    border: 1px solid var(--sf-surface-border, var(--sf-colour-border));
    border-radius: var(--sf-surface-radius, var(--sf-radius-panel));
    box-shadow: var(--sf-surface-shadow, none);
    color: var(--sf-surface-colour, var(--sf-colour-foreground));
    padding: var(--sf-surface-padding, var(--sf-space-m-l));
  }

  .sf-surface--alt {
    --sf-surface-bg: var(--sf-colour-surface-alt);
  }

  .sf-surface--raised {
    --sf-surface-bg: var(--sf-colour-surface-raised);
    --sf-surface-shadow: var(--sf-shadow-md);
  }

  .sf-code-window {
    background:
      linear-gradient(180deg, color-mix(in oklch, var(--sf-colour-foreground) 5%, transparent), transparent),
      color-mix(in oklch, var(--sf-colour-surface) 86%, transparent);
    border: 1px solid var(--sf-code-window-border, color-mix(in oklch, var(--sf-colour-primary) 48%, var(--sf-colour-border)));
    border-radius: var(--sf-radius-panel);
    box-shadow: var(--sf-code-window-shadow, none);
    color: var(--sf-colour-muted);
    overflow: hidden;
  }

  .sf-code-window--glow,
  .sf-code-window[data-emphasis="glow"] {
    --sf-code-window-border: color-mix(in oklch, var(--sf-colour-primary) 62%, var(--sf-colour-border));
    --sf-code-window-shadow: 0 0 2.5rem color-mix(in oklch, var(--sf-colour-primary) 16%, transparent);
  }

  .sf-code-window__bar {
    align-items: center;
    border-block-end: 1px solid var(--sf-colour-border);
    color: var(--sf-colour-muted);
    display: grid;
    font-family: var(--sf-font-mono);
    font-size: var(--sf-step--2);
    gap: var(--sf-space-xs);
    grid-template-columns: auto 1fr auto;
    min-block-size: 2rem;
    padding-inline: var(--sf-space-xs);
  }

  .sf-code-window__bar > :last-child {
    justify-self: end;
  }

  .sf-window-dots {
    background: var(--sf-colour-danger);
    block-size: .42rem;
    border-radius: var(--sf-radius-full);
    box-shadow:
      .68rem 0 0 var(--sf-colour-warning),
      1.36rem 0 0 var(--sf-colour-success);
    display: inline-block;
    inline-size: .42rem;
    margin-inline-end: var(--sf-space-l);
  }

  .sf-code-lines {
    color: var(--sf-colour-muted);
    counter-reset: code;
    font-family: var(--sf-font-mono);
    font-size: var(--sf-code-font-size, clamp(.72rem, 1vw, .88rem));
    line-height: 1.58;
    list-style: none;
    margin: 0;
    padding: var(--sf-code-padding, var(--sf-space-s));
  }

  .sf-code-lines--compact {
    --sf-code-font-size: var(--sf-step--2);
  }

  .sf-code-lines--lg {
    --sf-code-font-size: var(--sf-step--1);
    --sf-code-padding: var(--sf-space-s-m) var(--sf-space-m);
  }

  .sf-code-lines > li {
    counter-increment: code;
    display: grid;
    gap: var(--sf-space-xs);
    grid-template-columns: 2ch minmax(0, 1fr);
  }

  .sf-code-lines > li::before {
    color: var(--sf-colour-subtle);
    content: counter(code);
    text-align: right;
  }

  .sf-code-lines code,
  .sf-code-block code {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: inherit;
    padding: 0;
    white-space: pre-wrap;
  }

  .sf-code-lines > li:nth-child(4n + 1) code,
  .sf-code-lines > li:nth-child(4n + 2) code,
  .sf-command-list__prompt {
    color: var(--sf-colour-primary);
  }

  .sf-code-token--punct { color: color-mix(in oklch, var(--sf-colour-muted) 84%, var(--sf-colour-foreground)); }
  .sf-code-token--tag { color: var(--sf-code-token-tag, oklch(78% 0.09 235)); }
  .sf-code-token--attr { color: color-mix(in oklch, var(--sf-colour-warning) 72%, var(--sf-colour-foreground)); }
  .sf-code-token--string { color: color-mix(in oklch, var(--sf-colour-success) 72%, var(--sf-colour-foreground)); }
  .sf-code-token--class { color: var(--sf-code-token-class, var(--sf-colour-primary-hover, var(--sf-colour-primary))); }
  .sf-code-token--property { color: var(--sf-code-token-property, var(--sf-colour-primary-hover, var(--sf-colour-primary))); }
  .sf-code-token--function { color: var(--sf-code-token-function, oklch(78% 0.09 235)); }
  .sf-code-token--number { color: var(--sf-code-token-number, oklch(83% 0.13 86)); }
  .sf-code-token--text { color: var(--sf-colour-foreground); }
  .sf-code-token--comment { color: var(--sf-colour-subtle); font-style: italic; }

  .sf-token-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-xs);
    padding: var(--sf-space-s) var(--sf-space-s) 0;
  }

  .sf-token-strip > * {
    background: var(--sf-token-colour, var(--sf-colour-primary));
    block-size: 1.25rem;
    border: 1px solid var(--sf-colour-border-strong);
    border-radius: var(--sf-radius-xs);
    inline-size: 2.8rem;
  }

  .sf-token-strip > :nth-child(2) { --sf-token-colour: var(--sf-colour-accent); }
  .sf-token-strip > :nth-child(3) { --sf-token-colour: var(--sf-colour-warning); }
  .sf-token-strip > :nth-child(4) { --sf-token-colour: var(--sf-colour-success); }
  .sf-token-strip > :nth-child(5) { --sf-token-colour: var(--sf-colour-foreground); }
  .sf-token-strip > :nth-child(6) { --sf-token-colour: var(--sf-colour-info); }

  .sf-token-strip[data-palette="hdr"] > :nth-child(1) { --sf-token-colour: oklch(69% 0.19 42); }
  .sf-token-strip[data-palette="hdr"] > :nth-child(2) { --sf-token-colour: oklch(84% 0.17 82); }
  .sf-token-strip[data-palette="hdr"] > :nth-child(3) { --sf-token-colour: oklch(78% 0.18 145); }
  .sf-token-strip[data-palette="hdr"] > :nth-child(4) { --sf-token-colour: oklch(78% 0.12 235); }
  .sf-token-strip[data-palette="hdr"] > :nth-child(5) { --sf-token-colour: oklch(76% 0.13 292); }
  .sf-token-strip[data-palette="hdr"] > :nth-child(6) { --sf-token-colour: oklch(98% 0.006 80); }

  .sf-marquee {
    background: color-mix(in oklch, var(--sf-colour-surface) 78%, transparent);
    border-block: 1px solid var(--sf-colour-border);
    color: var(--sf-colour-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-step--2);
    font-weight: 800;
    letter-spacing: .12em;
    overflow: hidden;
    padding-block: var(--sf-marquee-padding-block, var(--sf-space-xs));
    text-transform: uppercase;
  }

  .sf-marquee__track {
    align-items: center;
    animation: sf-marquee-scroll var(--sf-marquee-duration, 28s) linear infinite;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--sf-marquee-gap, var(--sf-space-l));
    inline-size: max-content;
    min-inline-size: 100%;
  }

  .sf-marquee__item {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: var(--sf-space-s);
    white-space: nowrap;
  }

  .sf-marquee__item::before {
    background: var(--sf-colour-primary);
    block-size: .32rem;
    border-radius: var(--sf-radius-full);
    box-shadow: 0 0 .9rem var(--sf-colour-primary);
    content: "";
    inline-size: .32rem;
  }

  @keyframes sf-marquee-scroll {
    to { transform: translateX(-50%); }
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.sf-button:hover, .sf-card--interactive:hover) {
      transform: none;
    }

    .sf-marquee__track {
      animation: none;
    }
  }

  .sf-command-list {
    display: grid;
    font-family: var(--sf-font-mono);
    font-size: var(--sf-step--1);
    gap: var(--sf-space-2xs);
    list-style: none;
    margin: 0;
    padding: var(--sf-space-s);
  }

  .sf-command-list > li {
    display: flex;
    gap: var(--sf-space-xs);
  }

  .sf-platform-card {
    align-items: center;
    display: grid;
    gap: var(--sf-space-xs);
    justify-items: center;
    min-block-size: var(--sf-platform-card-min, 11rem);
    text-align: center;
  }

  .sf-platform-card__logo {
    block-size: clamp(2rem, 4vw, 2.85rem);
    filter: drop-shadow(0 0 1.125rem color-mix(in oklch, var(--sf-colour-foreground) 18%, transparent));
    inline-size: clamp(2rem, 4vw, 2.85rem);
    object-fit: contain;
  }

  .sf-hero {
    align-items: center;
    display: grid;
    min-block-size: var(--sf-hero-min, min(42rem, 82svh));
    padding-block: var(--sf-space-2xl-3xl);
  }

  .sf-logo-cloud {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-s-m);
    justify-content: var(--sf-logo-cloud-justify, center);
  }

  .sf-logo-cloud > * {
    color: var(--sf-colour-subtle);
    font-size: var(--sf-step--1);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .sf-feature {
    display: grid;
    gap: var(--sf-space-xs);
  }

  .sf-feature__icon {
    align-items: center;
    background: var(--sf-colour-primary-soft);
    border: 1px solid var(--sf-colour-primary-soft-border);
    border-radius: var(--sf-radius-md);
    color: var(--sf-colour-primary);
    display: inline-flex;
    font-weight: 800;
    inline-size: var(--sf-feature-icon-size, 2.75rem);
    justify-content: center;
    min-block-size: var(--sf-feature-icon-size, 2.75rem);
  }

  .sf-feature__title {
    font-family: var(--sf-font-display);
    font-size: var(--sf-step-2);
    font-weight: 700;
    line-height: var(--sf-line-height-heading);
  }

  .sf-feature__text {
    color: var(--sf-colour-muted);
  }

  .sf-stats {
    display: grid;
    gap: var(--sf-grid-gap, var(--sf-gutter));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sf-stat-min, 12rem)), 1fr));
  }

  .sf-stat {
    border-block-start: 1px solid var(--sf-colour-border);
    display: grid;
    gap: var(--sf-space-2xs);
    padding-block-start: var(--sf-space-s);
  }

  .sf-stat__value {
    font-family: var(--sf-font-display);
    font-size: var(--sf-step-4);
    font-weight: 700;
    line-height: var(--sf-line-height-tight);
  }

  .sf-stat__label {
    color: var(--sf-colour-muted);
    font-size: var(--sf-step--1);
    font-weight: 700;
  }

  .sf-testimonial {
    background: var(--sf-colour-surface);
    border: 1px solid var(--sf-colour-border);
    border-radius: var(--sf-radius-panel);
    box-shadow: var(--sf-shadow-sm);
    display: grid;
    gap: var(--sf-space-s);
    padding: var(--sf-space-m-l);
  }

  .sf-testimonial__quote {
    font-family: var(--sf-font-display);
    font-size: var(--sf-step-2);
    font-weight: 700;
    line-height: var(--sf-line-height-heading);
    text-wrap: balance;
  }

  .sf-testimonial__meta {
    color: var(--sf-colour-muted);
    font-size: var(--sf-step--1);
    font-weight: 700;
  }

  .sf-pricing-grid {
    container-type: inline-size;
    display: grid;
    gap: var(--sf-grid-gap, var(--sf-gutter));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sf-pricing-min, 18rem)), 1fr));
  }

  .sf-price-card {
    background: var(--sf-colour-surface);
    border: 1px solid var(--sf-price-card-border, var(--sf-colour-border));
    border-radius: var(--sf-radius-panel);
    box-shadow: var(--sf-price-card-shadow, var(--sf-shadow-sm));
    display: grid;
    gap: var(--sf-space-s);
    padding: var(--sf-space-m-l);
  }

  .sf-price-card[data-featured="true"],
  .sf-price-card--featured {
    --sf-price-card-border: color-mix(in oklch, var(--sf-colour-primary) 44%, var(--sf-colour-border));
    --sf-price-card-shadow: var(--sf-shadow-md);
  }

  .sf-price {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-2xs);
  }

  .sf-price__value {
    font-family: var(--sf-font-display);
    font-size: var(--sf-step-5);
    font-weight: 700;
    line-height: var(--sf-line-height-tight);
  }

  .sf-price__interval {
    color: var(--sf-colour-muted);
    font-size: var(--sf-step--1);
    font-weight: 700;
  }

  .sf-faq {
    display: grid;
    gap: var(--sf-space-xs);
  }

  .sf-faq__item {
    background: var(--sf-colour-surface);
    border: 1px solid var(--sf-colour-border);
    border-radius: var(--sf-radius-lg);
    padding: var(--sf-space-s);
  }

  .sf-faq__item[open] {
    border-color: color-mix(in oklch, var(--sf-colour-primary) 30%, var(--sf-colour-border));
    box-shadow: var(--sf-shadow-sm);
  }

  .sf-faq__item > summary {
    cursor: pointer;
    font-weight: 800;
  }

  .sf-faq__item > summary:focus-visible {
    border-radius: var(--sf-radius-sm);
    outline: 0.125rem solid var(--sf-colour-ring);
    outline-offset: .2rem;
  }

  .sf-faq__item > :where(p, ul, ol) {
    color: var(--sf-colour-muted);
    margin-block-start: var(--sf-space-xs);
  }

  .sf-cta {
    align-items: center;
    background: var(--sf-colour-surface);
    border: 1px solid var(--sf-colour-border);
    border-radius: var(--sf-radius-panel);
    box-shadow: var(--sf-shadow-md);
    display: grid;
    gap: var(--sf-space-s-m);
    padding: var(--sf-space-l-xl);
  }

  @container (min-width: 48rem) {
    .sf-cta[data-layout="split"] {
      grid-template-columns: minmax(0, 1fr) auto;
    }
  }

  .sf-footer {
    border-block-start: 1px solid var(--sf-colour-border);
    color: var(--sf-colour-muted);
    padding-block: var(--sf-space-l-xl);
  }

  .sf-section-header {
    display: grid;
    gap: var(--sf-space-xs);
    max-inline-size: var(--sf-section-header-width, 54rem);
  }

  .sf-section-header[data-align="center"] {
    margin-inline: auto;
    text-align: center;
  }

  .sf-kicker {
    color: var(--sf-colour-primary);
    font-size: var(--sf-step--1);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .sf-badge {
    align-items: center;
    background: color-mix(in oklch, var(--sf-colour-primary) 12%, transparent);
    border: 1px solid color-mix(in oklch, var(--sf-colour-primary) 24%, transparent);
    border-radius: var(--sf-radius-full);
    color: var(--sf-colour-primary);
    display: inline-flex;
    font-size: var(--sf-step--1);
    font-weight: 700;
    gap: var(--sf-space-3xs);
    line-height: 1;
    padding: .45em .75em;
  }

  .sf-avatar {
    align-items: center;
    aspect-ratio: 1;
    background: color-mix(in oklch, var(--sf-colour-primary) 14%, transparent);
    border: 1px solid color-mix(in oklch, var(--sf-colour-primary) 28%, transparent);
    border-radius: var(--sf-radius-full);
    color: var(--sf-colour-primary);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--sf-step--1);
    font-weight: 800;
    inline-size: var(--sf-avatar-size, 2.25rem);
    justify-content: center;
    line-height: 1;
  }

  .sf-chart {
    --sf-chart-accent: var(--sf-colour-primary);
  }

  .sf-chart__plot {
    background: color-mix(in oklch, var(--sf-colour-surface-alt) 72%, transparent);
    border: 1px solid var(--sf-colour-border);
    border-radius: var(--sf-radius-lg);
    overflow: hidden;
    padding: var(--sf-space-xs);
  }

  .sf-chart--wide {
    --sf-chart-block-size: 14rem;
  }

  .sf-chart__svg {
    block-size: var(--sf-chart-block-size, 12rem);
    display: block;
    inline-size: 100%;
  }

  .sf-chart__grid,
  .sf-chart__axis {
    fill: none;
    stroke: var(--sf-colour-border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }

  .sf-chart__area {
    fill: color-mix(in oklch, var(--sf-chart-accent) 18%, transparent);
  }

  .sf-chart__line {
    fill: none;
    stroke: var(--sf-chart-accent);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
  }

  .sf-chart__point {
    fill: var(--sf-chart-accent);
    stroke: var(--sf-colour-surface);
    stroke-width: 2;
  }

  .sf-chart__legend {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-xs);
  }

  .sf-chart__legend-item {
    align-items: center;
    color: var(--sf-colour-muted);
    display: inline-flex;
    gap: var(--sf-space-3xs);
  }

  .sf-chart__swatch {
    aspect-ratio: 1;
    background: var(--sf-chart-accent);
    border-radius: var(--sf-radius-full);
    display: inline-block;
    inline-size: .75rem;
  }

  .sf-meter-list {
    display: grid;
    gap: var(--sf-space-xs);
  }

  .sf-meter-row {
    display: grid;
    gap: var(--sf-space-3xs);
  }

  .sf-meter {
    accent-color: var(--sf-chart-accent, var(--sf-colour-primary));
    block-size: .625rem;
    border-radius: var(--sf-radius-full);
    inline-size: 100%;
    overflow: hidden;
  }

  .sf-progress {
    accent-color: var(--sf-progress-colour, var(--sf-colour-primary));
    block-size: var(--sf-progress-size, .625rem);
    inline-size: 100%;
  }

  .sf-progress::-webkit-progress-bar {
    background: var(--sf-colour-surface-alt);
    border-radius: var(--sf-radius-full);
  }

  .sf-progress::-webkit-progress-value,
  .sf-progress::-moz-progress-bar {
    background: var(--sf-progress-colour, var(--sf-colour-primary));
    border-radius: var(--sf-radius-full);
  }

  .sf-skeleton {
    background: color-mix(in oklch, var(--sf-colour-surface-alt) 82%, var(--sf-colour-foreground));
    border-radius: var(--sf-skeleton-radius, var(--sf-radius-md));
    color: transparent;
    min-block-size: var(--sf-skeleton-block-size, 1em);
  }

  @media (prefers-reduced-motion: no-preference) {
    .sf-skeleton {
      animation: sf-skeleton-pulse 1.4s var(--sf-ease-standard) infinite alternate;
    }
  }

  @keyframes sf-skeleton-pulse {
    to { opacity: .62; }
  }

  .sf-filter-bar {
    align-items: var(--sf-filter-bar-align, center);
    background: var(--sf-colour-surface);
    border: 1px solid var(--sf-colour-border);
    border-radius: var(--sf-radius-panel);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-xs);
    padding: var(--sf-space-s);
  }

  .sf-filter-bar > :where(.sf-field, form, label) {
    flex: 1 1 min(100%, 14rem);
  }

  .sf-filter-bar > :where(.sf-button, button, a) {
    flex: 0 0 auto;
  }

  .sf-data-table {
    border-collapse: collapse;
    inline-size: 100%;
    min-inline-size: var(--sf-data-table-min, 44rem);
  }

  .sf-data-table :where(th, td) {
    border-block-end: 1px solid var(--sf-colour-border);
    padding-block: var(--sf-data-table-padding-block, var(--sf-space-xs));
    padding-inline: var(--sf-data-table-padding-inline, var(--sf-space-s));
    text-align: start;
    vertical-align: middle;
  }

  .sf-data-table :where(th) {
    background: var(--sf-colour-surface-alt);
    color: var(--sf-colour-muted);
    font-size: var(--sf-step--1);
    font-weight: 800;
  }

  .sf-data-table :where(tbody tr:hover) {
    background: color-mix(in oklch, var(--sf-colour-primary) 6%, transparent);
  }

  .sf-data-table[data-density="compact"] {
    --sf-data-table-padding-block: var(--sf-space-2xs);
    --sf-data-table-padding-inline: var(--sf-space-xs);
  }

  .sf-data-table :where(th button, .sf-table-sort) {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    display: inline-flex;
    font: inherit;
    font-weight: inherit;
    gap: var(--sf-space-3xs);
    padding: 0;
  }

  .sf-data-table th[aria-sort] :where(button, .sf-table-sort)::after {
    color: var(--sf-colour-subtle);
    content: "\2195";
    font-size: var(--sf-step--2);
  }

  .sf-data-table th[aria-sort="ascending"] :where(button, .sf-table-sort)::after { content: "\2191"; }
  .sf-data-table th[aria-sort="descending"] :where(button, .sf-table-sort)::after { content: "\2193"; }

  .sf-data-table tr[data-clickable="true"] {
    cursor: pointer;
  }

  .sf-data-table tr[data-clickable="true"]:focus-within {
    outline: 0.125rem solid var(--sf-colour-ring);
    outline-offset: -0.125rem;
  }

  @container (max-width: 38rem) {
    .sf-table-wrap[data-view="cards"] {
      border: 0;
      overflow: visible;
    }

    .sf-table-wrap[data-view="cards"] .sf-data-table,
    .sf-table-wrap[data-view="cards"] .sf-data-table :where(thead, tbody, tr, th, td) {
      display: block;
      min-inline-size: 0;
    }

    .sf-table-wrap[data-view="cards"] .sf-data-table thead {
      display: none;
    }

    .sf-table-wrap[data-view="cards"] .sf-data-table tr {
      background: var(--sf-colour-surface);
      border: 1px solid var(--sf-colour-border);
      border-radius: var(--sf-radius-panel);
      margin-block-end: var(--sf-space-xs);
      padding: var(--sf-space-xs);
    }

    .sf-table-wrap[data-view="cards"] .sf-data-table td {
      align-items: center;
      border: 0;
      display: flex;
      gap: var(--sf-space-s);
      justify-content: space-between;
      padding-block: var(--sf-space-2xs);
      padding-inline: 0;
    }

    .sf-table-wrap[data-view="cards"] .sf-data-table td::before {
      color: var(--sf-colour-muted);
      content: attr(data-label);
      font-size: var(--sf-step--1);
      font-weight: 800;
    }
  }

  .sf-status {
    align-items: center;
    background: var(--sf-status-bg, var(--sf-colour-surface-alt));
    border: 1px solid var(--sf-status-border, var(--sf-colour-border));
    border-radius: var(--sf-radius-full);
    color: var(--sf-status-colour, var(--sf-colour-foreground));
    display: inline-flex;
    font-size: var(--sf-step--1);
    font-weight: 700;
    gap: var(--sf-space-3xs);
    line-height: 1;
    min-block-size: 1.75rem;
    padding-inline: .7em;
  }

  .sf-status[data-size="sm"] {
    font-size: var(--sf-step--2);
    min-block-size: 1.35rem;
    padding-inline: .55em;
  }

  .sf-status::before {
    background: var(--sf-status-dot, currentColor);
    block-size: .42em;
    border-radius: var(--sf-radius-full);
    content: "";
    inline-size: .42em;
  }

  :where(.sf-status[data-dot="false"], .sf-status--label)::before {
    content: none;
  }

  .sf-status[data-tone="success"] {
    --sf-status-bg: var(--sf-colour-success-soft);
    --sf-status-border: color-mix(in oklch, var(--sf-colour-success) 34%, transparent);
    --sf-status-colour: var(--sf-colour-foreground);
    --sf-status-dot: var(--sf-colour-success);
  }

  .sf-status[data-tone="warning"] {
    --sf-status-bg: var(--sf-colour-warning-soft);
    --sf-status-border: color-mix(in oklch, var(--sf-colour-warning) 38%, transparent);
    --sf-status-colour: var(--sf-colour-foreground);
    --sf-status-dot: color-mix(in oklch, var(--sf-colour-warning) 60%, var(--sf-colour-foreground));
  }

  .sf-status[data-tone="danger"] {
    --sf-status-bg: var(--sf-colour-danger-soft);
    --sf-status-border: color-mix(in oklch, var(--sf-colour-danger) 34%, transparent);
    --sf-status-colour: var(--sf-colour-foreground);
    --sf-status-dot: var(--sf-colour-danger);
  }

  .sf-status[data-tone="info"] {
    --sf-status-bg: var(--sf-colour-info-soft);
    --sf-status-border: color-mix(in oklch, var(--sf-colour-info) 34%, transparent);
    --sf-status-colour: var(--sf-colour-foreground);
    --sf-status-dot: color-mix(in oklch, var(--sf-colour-info) 68%, var(--sf-colour-foreground));
  }

  .sf-data-list {
    display: grid;
  }

  .sf-data-list > * {
    align-items: center;
    border-block-end: 1px solid var(--sf-colour-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-xs);
    justify-content: space-between;
    padding-block: var(--sf-space-xs);
  }

  .sf-data-list > :last-child {
    border-block-end: 0;
  }

  .sf-empty-state {
    align-items: center;
    background: var(--sf-colour-surface-alt);
    border: 1px dashed var(--sf-colour-border-strong);
    border-radius: var(--sf-radius-panel);
    color: var(--sf-colour-muted);
    display: grid;
    gap: var(--sf-space-xs);
    justify-items: center;
    padding: var(--sf-space-l);
    text-align: center;
  }

  .sf-settings-section,
  .sf-detail-panel {
    background: var(--sf-colour-surface);
    border: 1px solid var(--sf-colour-border);
    border-radius: var(--sf-radius-panel);
    display: grid;
    gap: var(--sf-space-s);
    padding: var(--sf-space-m);
  }

  .sf-detail-panel {
    background: var(--sf-colour-surface-alt);
  }

  .sf-nav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-nav-gap);
    justify-content: space-between;
  }

  .sf-nav__list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-nav-gap);
    list-style: none;
    padding-inline-start: 0;
  }

  .sf-nav__link {
    border-radius: var(--sf-nav-link-radius);
    color: var(--sf-colour-muted);
    display: inline-flex;
    align-items: center;
    font-size: var(--sf-step--1);
    font-weight: 700;
    gap: var(--sf-space-2xs);
    padding-block: var(--sf-space-3xs);
    padding-inline: var(--sf-space-2xs);
    text-decoration: none;
    transition: background-color var(--sf-duration-fast) var(--sf-ease-standard), color var(--sf-duration-fast) var(--sf-ease-standard);
  }

  .sf-nav__link:hover,
  .sf-nav__link[aria-current="page"],
  .sf-nav__link[aria-current="true"],
  .sf-nav__link[aria-selected="true"] {
    background: var(--sf-colour-surface-alt);
    color: var(--sf-colour-foreground);
  }

  .sf-app-sidebar .sf-kicker {
    inline-size: 100%;
    text-align: start;
  }

  .sf-app-sidebar .sf-nav {
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-start;
  }

  .sf-app-sidebar .sf-nav__list {
    align-items: stretch;
    flex-direction: column;
    inline-size: 100%;
    margin-block: 0;
    padding-inline-start: var(--sf-space-2xs);
  }

  .sf-app-sidebar .sf-nav__list > li {
    inline-size: 100%;
  }

  .sf-app-sidebar .sf-nav__link {
    --sf-icon-size: var(--sf-step-0);
    gap: var(--sf-space-xs);
    inline-size: 100%;
    justify-content: flex-start;
    min-block-size: 2.5rem;
    padding-block: var(--sf-space-2xs);
    padding-inline: var(--sf-space-xs);
    text-align: start;
  }

  .sf-form {
    display: grid;
    gap: var(--sf-form-gap, var(--sf-space-s-m));
    grid-template-columns: minmax(0, 1fr);
  }

  .sf-form[data-density="compact"],
  .sf-field[data-density="compact"] {
    --sf-form-gap: var(--sf-space-xs);
    --sf-input-block-size: 2.25rem;
    --sf-input-padding-inline: var(--sf-space-xs);
  }

  .sf-fieldset {
    border: 1px solid var(--sf-colour-border);
    border-radius: var(--sf-radius-panel);
    display: grid;
    gap: var(--sf-space-s);
    padding: var(--sf-space-s-m);
  }

  .sf-fieldset > legend {
    color: var(--sf-colour-foreground);
    font-weight: 800;
    padding-inline: var(--sf-space-2xs);
  }

  .sf-field {
    display: grid;
    gap: var(--sf-space-2xs);
    grid-template-columns: minmax(0, 1fr);
  }

  .sf-label,
  .sf-field > label {
    color: var(--sf-colour-muted);
    font-size: var(--sf-step--1);
    font-weight: 700;
  }

  .sf-required,
  .sf-label[aria-required="true"],
  .sf-field > label:has(+ :required) {
    color: var(--sf-colour-foreground);
  }

  .sf-required::after,
  .sf-label[aria-required="true"]::after,
  .sf-field > label:has(+ :required)::after {
    color: var(--sf-colour-danger);
    content: " *";
  }

  .sf-help {
    color: var(--sf-colour-subtle);
    font-size: var(--sf-step--1);
    line-height: 1.4;
  }

  .sf-error {
    color: var(--sf-colour-danger);
    font-size: var(--sf-step--1);
    font-weight: 700;
    line-height: 1.4;
  }

  .sf-input,
  .sf-select,
  .sf-textarea {
    background: var(--sf-input-bg);
    border: 1px solid var(--sf-input-border);
    border-radius: var(--sf-input-radius);
    color: var(--sf-colour-foreground);
    inline-size: 100%;
    min-block-size: var(--sf-input-block-size);
    padding-inline: var(--sf-input-padding-inline);
    transition: background-color var(--sf-duration-fast) var(--sf-ease-standard), border-color var(--sf-duration-fast) var(--sf-ease-standard), box-shadow var(--sf-duration-fast) var(--sf-ease-standard);
  }

  .sf-search {
    position: relative;
  }

  .sf-search::before {
    block-size: .75em;
    border: 0.125em solid currentColor;
    border-radius: var(--sf-radius-full);
    color: var(--sf-colour-subtle);
    content: "";
    inline-size: .75em;
    inset-block-start: 50%;
    inset-inline-start: var(--sf-space-xs);
    line-height: 1;
    position: absolute;
    transform: translateY(-58%);
  }

  .sf-search::after {
    background: var(--sf-colour-subtle);
    block-size: .125em;
    content: "";
    inline-size: .45em;
    inset-block-start: 50%;
    inset-inline-start: calc(var(--sf-space-xs) + .58em);
    position: absolute;
    transform: translateY(120%) rotate(45deg);
    transform-origin: inline-start center;
  }

  .sf-search > .sf-input {
    padding-inline-start: var(--sf-space-l);
  }

  .sf-input-group {
    align-items: stretch;
    background: var(--sf-input-bg);
    border: 1px solid var(--sf-input-border);
    border-radius: var(--sf-input-radius);
    display: flex;
    inline-size: 100%;
    min-block-size: var(--sf-input-block-size);
    overflow: clip;
    transition: background-color var(--sf-duration-fast) var(--sf-ease-standard), border-color var(--sf-duration-fast) var(--sf-ease-standard), box-shadow var(--sf-duration-fast) var(--sf-ease-standard);
  }

  .sf-input-group:focus-within {
    border-color: var(--sf-colour-ring);
    box-shadow: 0 0 0 .25rem color-mix(in oklch, var(--sf-colour-ring) 18%, transparent);
    outline: .125rem solid color-mix(in oklch, var(--sf-colour-ring) 24%, transparent);
    outline-offset: 0;
  }

  .sf-input-group > :where(.sf-input, .sf-select) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    flex: 1 1 0%;
    inline-size: auto;
    min-inline-size: 0;
    outline: 0;
  }

  .sf-input-group > :where(.sf-input, .sf-select):focus-visible {
    box-shadow: none;
    outline: 0;
  }

  .sf-input-group__leading,
  .sf-input-group__trailing {
    align-items: center;
    color: var(--sf-colour-muted);
    display: inline-flex;
    flex: 0 0 auto;
    padding-inline: var(--sf-space-xs);
    white-space: nowrap;
  }

  .sf-input-group__leading { border-inline-end: 1px solid var(--sf-colour-border-subtle); }
  .sf-input-group__trailing { border-inline-start: 1px solid var(--sf-colour-border-subtle); }

  .sf-input-group__action {
    align-items: center;
    background: transparent;
    border: 0;
    border-inline-start: 1px solid var(--sf-colour-border-subtle);
    color: var(--sf-colour-foreground);
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 700;
    justify-content: center;
    padding-inline: var(--sf-space-xs);
  }

  .sf-input-group__action:hover { background: var(--sf-colour-surface-hover); }

  .sf-input-group[data-invalid="true"],
  .sf-field[data-invalid="true"] .sf-input-group {
    border-color: var(--sf-colour-danger);
    box-shadow: 0 0 0 .25rem var(--sf-colour-danger-soft);
  }

  .sf-input-group:has(:disabled) {
    background: var(--sf-colour-surface-alt);
    color: var(--sf-colour-subtle);
    opacity: .72;
  }

  .sf-file-input {
    background: var(--sf-input-bg);
    border: 1px solid var(--sf-input-border);
    border-radius: var(--sf-input-radius);
    color: var(--sf-colour-muted);
    inline-size: 100%;
    min-block-size: var(--sf-input-block-size);
    padding: var(--sf-space-3xs);
  }

  .sf-file-input::file-selector-button {
    background: var(--sf-colour-surface-alt);
    border: 1px solid var(--sf-colour-border);
    border-radius: calc(var(--sf-input-radius) - .125rem);
    color: var(--sf-colour-foreground);
    font: inherit;
    font-weight: 700;
    margin-inline-end: var(--sf-space-xs);
    min-block-size: calc(var(--sf-input-block-size) - var(--sf-space-2xs));
    padding-inline: var(--sf-space-xs);
  }

  .sf-file-input:hover { border-color: var(--sf-colour-border-strong); }
  .sf-file-input:hover::file-selector-button { background: var(--sf-colour-surface-hover); }

  .sf-file-input:focus-visible {
    border-color: var(--sf-colour-ring);
    box-shadow: 0 0 0 .25rem color-mix(in oklch, var(--sf-colour-ring) 18%, transparent);
    outline: .125rem solid color-mix(in oklch, var(--sf-colour-ring) 24%, transparent);
    outline-offset: 0;
  }

  .sf-file-input[aria-invalid="true"],
  .sf-field[data-invalid="true"] .sf-file-input {
    border-color: var(--sf-colour-danger);
    box-shadow: 0 0 0 .25rem var(--sf-colour-danger-soft);
  }

  .sf-file-input:disabled { background: var(--sf-colour-surface-alt); opacity: .72; }

  .sf-range {
    accent-color: var(--sf-colour-primary);
    inline-size: 100%;
    min-block-size: var(--sf-input-block-size);
  }

  .sf-range:focus-visible {
    outline: .125rem solid var(--sf-colour-ring);
    outline-offset: .2rem;
  }

  .sf-range[aria-invalid="true"],
  .sf-field[data-invalid="true"] .sf-range {
    accent-color: var(--sf-colour-danger);
    outline-color: var(--sf-colour-danger);
  }

  .sf-range:disabled { opacity: .55; }

  .sf-help[data-density="compact"],
  .sf-error[data-density="compact"] {
    font-size: var(--sf-step--2);
  }

  .sf-textarea {
    min-block-size: var(--sf-textarea-block-size, 8rem);
    padding-block: var(--sf-space-xs);
  }

  .sf-select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1rem) 50%, calc(100% - .7rem) 50%;
    background-repeat: no-repeat;
    background-size: .35rem .35rem, .35rem .35rem;
    padding-inline-end: var(--sf-space-l);
  }

  :where(.sf-input, .sf-select, .sf-textarea)::placeholder {
    color: var(--sf-colour-subtle);
  }

  :where(.sf-input, .sf-select, .sf-textarea):hover {
    border-color: var(--sf-colour-border-strong);
  }

  :where(.sf-input, .sf-select, .sf-textarea):focus-visible {
    border-color: var(--sf-colour-ring);
    box-shadow: 0 0 0 0.25rem color-mix(in oklch, var(--sf-colour-ring) 18%, transparent);
    outline: 0.125rem solid color-mix(in oklch, var(--sf-colour-ring) 24%, transparent);
    outline-offset: 0;
  }

  :where(.sf-input, .sf-select, .sf-textarea)[aria-invalid="true"],
  .sf-field[data-invalid="true"] :where(.sf-input, .sf-select, .sf-textarea) {
    --sf-input-border: var(--sf-colour-danger);
    border-color: var(--sf-colour-danger);
    box-shadow: 0 0 0 0.25rem var(--sf-colour-danger-soft);
  }

  .sf-field[data-invalid="true"] .sf-input-group > :where(.sf-input, .sf-select) {
    border: 0;
    box-shadow: none;
  }

  .sf-field[data-invalid="true"] :where(.sf-label, label),
  .sf-field[data-invalid="true"] .sf-help {
    color: var(--sf-colour-danger);
  }

  :where(.sf-input, .sf-select, .sf-textarea):disabled {
    background: var(--sf-colour-surface-alt);
    color: var(--sf-colour-subtle);
    opacity: .72;
  }

  :where(.sf-input, .sf-select, .sf-textarea)[aria-busy="true"],
  :where(.sf-input, .sf-select, .sf-textarea)[data-loading="true"] {
    cursor: progress;
    opacity: .78;
  }

  .sf-check {
    align-items: start;
    display: grid;
    gap: var(--sf-space-2xs);
    grid-template-columns: auto 1fr;
  }

  .sf-check > :where(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--sf-colour-primary);
    block-size: 1.1em;
    inline-size: 1.1em;
    margin-block-start: .2em;
  }

  .sf-switch {
    align-items: center;
    display: inline-grid;
    gap: var(--sf-space-xs);
    grid-template-columns: auto 1fr;
    position: relative;
  }

  .sf-switch > input[type="checkbox"] {
    block-size: .0625rem;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    inline-size: .0625rem;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  .sf-switch__control {
    background: var(--sf-colour-surface-inset);
    border: 1px solid var(--sf-colour-border-strong);
    border-radius: var(--sf-radius-full);
    block-size: 1.5rem;
    display: inline-flex;
    inline-size: 2.75rem;
    padding: .1875rem;
    transition: background-color var(--sf-duration-fast) var(--sf-ease-standard), border-color var(--sf-duration-fast) var(--sf-ease-standard);
  }

  .sf-switch__control::before {
    background: var(--sf-colour-foreground);
    border-radius: var(--sf-radius-full);
    box-shadow: var(--sf-shadow-sm);
    content: "";
    inline-size: 1rem;
    transform: translateX(0);
    transition: transform var(--sf-duration-fast) var(--sf-ease-standard);
  }

  .sf-switch > input[type="checkbox"]:checked + .sf-switch__control {
    background: var(--sf-colour-primary);
    border-color: var(--sf-colour-primary);
  }

  .sf-switch > input[type="checkbox"]:checked + .sf-switch__control::before {
    background: var(--sf-colour-primary-foreground);
    transform: translateX(1.1875rem);
  }

  .sf-switch > input[type="checkbox"]:focus-visible + .sf-switch__control {
    box-shadow: 0 0 0 .25rem color-mix(in oklch, var(--sf-colour-ring) 20%, transparent);
    outline: .125rem solid var(--sf-colour-ring);
    outline-offset: .125rem;
  }

  .sf-switch__label { color: var(--sf-colour-foreground); font-weight: 700; }

  .sf-switch:has(input:disabled),
  .sf-switch[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }

  .sf-segmented-control {
    background: var(--sf-colour-surface-alt);
    border: 1px solid var(--sf-colour-border);
    border-radius: var(--sf-radius-control);
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--sf-space-3xs);
    padding: var(--sf-space-3xs);
  }

  fieldset.sf-segmented-control { margin: 0; }

  .sf-segmented-control__option {
    cursor: pointer;
    position: relative;
  }

  .sf-segmented-control__option > input[type="radio"] {
    block-size: .0625rem;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    inline-size: .0625rem;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  .sf-segmented-control__label {
    align-items: center;
    border: 1px solid transparent;
    border-radius: calc(var(--sf-radius-control) - .125rem);
    color: var(--sf-colour-muted);
    display: inline-flex;
    font-size: var(--sf-step--1);
    font-weight: 700;
    justify-content: center;
    min-block-size: 2.25rem;
    padding-inline: var(--sf-space-xs);
  }

  .sf-segmented-control__option > input[type="radio"]:checked + .sf-segmented-control__label {
    background: var(--sf-colour-surface);
    border-color: var(--sf-colour-border);
    box-shadow: var(--sf-shadow-sm);
    color: var(--sf-colour-foreground);
  }

  .sf-segmented-control__option > input[type="radio"]:focus + .sf-segmented-control__label {
    outline: .125rem solid var(--sf-colour-ring);
    outline-offset: .125rem;
  }

  .sf-segmented-control__option:has(input:disabled) { cursor: not-allowed; opacity: .55; }

  .sf-combobox { position: relative; }

  .sf-combobox__listbox {
    background: var(--sf-colour-surface-raised);
    border: 1px solid var(--sf-colour-border);
    border-radius: var(--sf-radius-control);
    box-shadow: var(--sf-shadow-lg);
    display: grid;
    gap: var(--sf-space-3xs);
    inset-block-start: calc(100% + var(--sf-space-3xs));
    inset-inline: 0;
    list-style: none;
    max-block-size: min(18rem, 50dvh);
    overflow: auto;
    padding: var(--sf-space-2xs);
    position: absolute;
    z-index: var(--sf-z-overlay);
  }

  .sf-combobox__option {
    border-radius: var(--sf-radius-sm);
    color: var(--sf-colour-foreground);
    cursor: pointer;
    padding-block: var(--sf-space-2xs);
    padding-inline: var(--sf-space-xs);
  }

  .sf-combobox__option:hover,
  .sf-combobox__option[aria-selected="true"],
  .sf-combobox__option[data-active="true"] { background: var(--sf-colour-surface-hover); }

  .sf-combobox__empty { color: var(--sf-colour-subtle); padding: var(--sf-space-xs); }

  .sf-bulk-actions {
    align-items: center;
    background: var(--sf-colour-primary-soft);
    border: 1px solid var(--sf-colour-primary-soft-border);
    border-radius: var(--sf-radius-control);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-xs);
    justify-content: space-between;
    padding: var(--sf-space-xs);
  }

  .sf-bulk-actions__count { font-size: var(--sf-step--1); font-weight: 800; }
  .sf-bulk-actions__controls { align-items: center; display: flex; flex-wrap: wrap; gap: var(--sf-space-2xs); }

  .sf-stepper {
    counter-reset: sf-step;
    display: grid;
    gap: var(--sf-space-xs);
    list-style: none;
    padding-inline-start: 0;
  }

  .sf-stepper__step {
    align-items: center;
    color: var(--sf-colour-subtle);
    counter-increment: sf-step;
    display: grid;
    gap: var(--sf-space-xs);
    grid-template-columns: auto 1fr;
  }

  .sf-stepper__marker {
    align-items: center;
    border: 1px solid var(--sf-colour-border-strong);
    border-radius: var(--sf-radius-full);
    block-size: 2rem;
    display: inline-flex;
    font-size: var(--sf-step--1);
    font-weight: 800;
    inline-size: 2rem;
    justify-content: center;
  }

  .sf-stepper__marker:empty::before { content: counter(sf-step); }

  .sf-stepper__step[aria-current="step"] { color: var(--sf-colour-foreground); }
  .sf-stepper__step[aria-current="step"] .sf-stepper__marker { background: var(--sf-colour-primary); border-color: var(--sf-colour-primary); color: var(--sf-colour-primary-foreground); }
  .sf-stepper__step[data-complete="true"] { color: var(--sf-colour-muted); }
  .sf-stepper__step[data-complete="true"] .sf-stepper__marker { background: var(--sf-colour-success-soft); border-color: var(--sf-colour-success); color: var(--sf-colour-success); }
  .sf-stepper__label { font-weight: 700; }
  .sf-wizard-actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--sf-space-xs); justify-content: space-between; }

  .sf-alert {
    background: var(--sf-alert-bg, var(--sf-colour-info-soft));
    border: 1px solid var(--sf-alert-border, color-mix(in oklch, var(--sf-colour-info) 32%, transparent));
    border-radius: var(--sf-alert-radius);
    color: var(--sf-alert-colour, var(--sf-colour-foreground));
    display: grid;
    gap: var(--sf-space-2xs);
    padding: var(--sf-alert-padding);
  }

  .sf-alert__title {
    font-weight: 800;
  }

  .sf-alert--info,
  .sf-alert[data-variant="info"] {
    --sf-alert-bg: var(--sf-colour-info-soft);
    --sf-alert-border: color-mix(in oklch, var(--sf-colour-info) 32%, transparent);
  }

  .sf-alert--success,
  .sf-alert[data-variant="success"] {
    --sf-alert-bg: var(--sf-colour-success-soft);
    --sf-alert-border: color-mix(in oklch, var(--sf-colour-success) 32%, transparent);
  }

  .sf-alert--warning,
  .sf-alert[data-variant="warning"] {
    --sf-alert-bg: var(--sf-colour-warning-soft);
    --sf-alert-border: color-mix(in oklch, var(--sf-colour-warning) 38%, transparent);
  }

  .sf-alert--danger,
  .sf-alert[data-variant="danger"] {
    --sf-alert-bg: var(--sf-colour-danger-soft);
    --sf-alert-border: color-mix(in oklch, var(--sf-colour-danger) 34%, transparent);
  }

  .sf-dialog {
    background: var(--sf-colour-surface);
    border: 1px solid var(--sf-colour-border);
    border-radius: var(--sf-radius-panel);
    box-shadow: var(--sf-shadow-xl);
    color: var(--sf-colour-foreground);
    inline-size: min(100% - (var(--sf-gutter) * 2), var(--sf-dialog-width, 42rem));
    max-block-size: min(100% - (var(--sf-gutter) * 2), 42rem);
    overflow: auto;
    padding: 0;
  }

  .sf-dialog::backdrop,
  .sf-popover::backdrop,
  .sf-drawer::backdrop {
    background: var(--sf-colour-backdrop);
  }

  .sf-dialog__header,
  .sf-dialog__body,
  .sf-dialog__footer {
    padding: var(--sf-space-s-m);
  }

  .sf-dialog__header,
  .sf-dialog__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-s);
    justify-content: space-between;
  }

  .sf-dialog__header {
    border-block-end: 1px solid var(--sf-colour-border);
  }

  .sf-dialog__footer {
    border-block-start: 1px solid var(--sf-colour-border);
    justify-content: flex-end;
  }

  .sf-dialog[data-layout="form"] .sf-dialog__body {
    display: grid;
    gap: var(--sf-space-s);
  }

  .sf-popover,
  .sf-menu-popover,
  .sf-tooltip,
  .sf-toast,
  .sf-banner,
  .sf-drawer {
    background: var(--sf-colour-surface);
    border: 1px solid var(--sf-colour-border);
    border-radius: var(--sf-radius-panel);
    box-shadow: var(--sf-shadow-lg);
    color: var(--sf-colour-foreground);
    inset: unset;
    margin: 0;
    max-block-size: calc(100dvh - (var(--sf-space-s) * 2));
    overflow: auto;
    padding: var(--sf-space-s);
  }

  :where(.sf-popover, .sf-menu-popover, .sf-tooltip, .sf-toast, .sf-banner, .sf-drawer)[popover] {
    display: none;
  }

  :where(.sf-popover, .sf-menu-popover, .sf-tooltip, .sf-toast, .sf-banner, .sf-drawer):popover-open {
    display: grid;
    gap: var(--sf-space-xs);
    z-index: var(--sf-z-overlay);
  }

  .sf-popover {
    inline-size: min(100% - (var(--sf-gutter) * 2), var(--sf-popover-width, 22rem));
  }

  .sf-menu-popover,
  .sf-menu {
    display: grid;
    gap: var(--sf-space-2xs);
    min-inline-size: var(--sf-menu-min, 12rem);
  }

  .sf-menu :where(a, button),
  .sf-menu-popover :where(a, button) {
    background: transparent;
    border: 0;
    border-radius: var(--sf-radius-sm);
    color: inherit;
    font: inherit;
    padding-block: var(--sf-space-3xs);
    padding-inline: var(--sf-space-2xs);
    text-align: start;
    text-decoration: none;
  }

  .sf-menu :where(a, button):hover,
  .sf-menu-popover :where(a, button):hover {
    background: var(--sf-colour-surface-alt);
  }

  .sf-menu :where(a, button)[data-variant="danger"],
  .sf-menu-popover :where(a, button)[data-variant="danger"] {
    color: var(--sf-colour-danger);
  }

  .sf-menu :where(a, button)[data-variant="danger"]:hover,
  .sf-menu-popover :where(a, button)[data-variant="danger"]:hover {
    background: var(--sf-colour-danger-soft);
  }

  .sf-tooltip {
    border-radius: var(--sf-radius-md);
    box-shadow: var(--sf-shadow-md);
    font-size: var(--sf-step--1);
    inline-size: max-content;
    max-inline-size: min(22rem, calc(100vw - (var(--sf-gutter) * 2)));
    padding-block: var(--sf-space-2xs);
    padding-inline: var(--sf-space-xs);
  }

  .sf-tooltip-trigger {
    border-block-end: 0.08em dotted currentColor;
    cursor: help;
    text-decoration: none;
  }

  .sf-toast {
    block-size: auto;
    bottom: auto;
    inline-size: min(100% - (var(--sf-gutter) * 2), var(--sf-toast-width, 24rem));
    left: auto;
    position: fixed;
    right: var(--sf-space-s);
    top: var(--sf-space-s);
  }

  .sf-toast-stack {
    display: grid;
    gap: var(--sf-space-xs);
    inline-size: min(100% - (var(--sf-gutter) * 2), var(--sf-toast-width, 24rem));
    inset-block-start: var(--sf-space-s);
    inset-inline-end: var(--sf-space-s);
    position: fixed;
    z-index: var(--sf-z-toast);
  }

  .sf-banner {
    block-size: auto;
    border-radius: var(--sf-radius-lg);
    bottom: auto;
    inline-size: min(100% - (var(--sf-gutter) * 2), var(--sf-banner-width, 64rem));
    left: var(--sf-space-s);
    margin-inline: auto;
    position: fixed;
    right: var(--sf-space-s);
    top: var(--sf-space-s);
  }

  .sf-drawer {
    block-size: 100dvh;
    border-radius: 0;
    inline-size: min(100%, var(--sf-drawer-width, 24rem));
    max-block-size: 100dvh;
    overflow: auto;
    position: fixed;
    top: 0;
    bottom: 0;
  }

  .sf-drawer--left {
    left: 0;
    right: auto;
  }

  .sf-drawer--right {
    left: auto;
    right: 0;
  }

  .sf-drawer--bottom {
    block-size: auto;
    border-start-start-radius: var(--sf-radius-panel);
    border-start-end-radius: var(--sf-radius-panel);
    inline-size: 100%;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    max-block-size: min(80dvh, 42rem);
  }

  .sf-drawer--stack {
    flex-direction: column;
    gap: var(--sf-space-s);
  }

  .sf-drawer--stack:not([popover]),
  .sf-drawer--stack:popover-open {
    display: flex;
  }

  @supports (anchor-name: --sf-anchor) {
    .sf-tooltip-trigger,
    [data-sf-anchor] {
      anchor-name: var(--sf-anchor-name, --sf-anchor);
    }

    .sf-tooltip,
    .sf-popover,
    .sf-menu-popover {
      position-anchor: var(--sf-anchor-name, --sf-anchor);
      position-area: block-end span-inline-end;
      position-try-fallbacks: flip-block, flip-inline;
    }
  }

  .sf-disclosure,
  .sf-accordion {
    display: grid;
    gap: var(--sf-space-xs);
  }

  .sf-disclosure > details,
  details.sf-disclosure,
  .sf-accordion > details {
    background: var(--sf-colour-surface);
    border: 1px solid var(--sf-colour-border);
    border-radius: var(--sf-radius-lg);
    padding: var(--sf-space-s);
  }

  .sf-disclosure summary,
  .sf-accordion summary {
    cursor: pointer;
    font-weight: 800;
  }

  .sf-disclosure :where(details[open]),
  details.sf-disclosure[open],
  .sf-accordion details[open] {
    border-color: color-mix(in oklch, var(--sf-colour-primary) 30%, var(--sf-colour-border));
    box-shadow: var(--sf-shadow-sm);
  }

  .sf-tabs {
    display: grid;
    gap: var(--sf-space-s);
  }

  .sf-tab-list {
    align-items: center;
    border-block-end: 1px solid var(--sf-colour-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-2xs);
  }

  .sf-tab {
    align-items: center;
    border-block-end: 0.125rem solid transparent;
    border-radius: var(--sf-radius-full);
    color: var(--sf-colour-muted);
    display: inline-flex;
    gap: var(--sf-space-2xs);
    font-weight: 800;
    padding-block: var(--sf-space-xs);
    padding-inline: var(--sf-space-s);
    text-decoration: none;
  }

  .sf-tab[data-variant="pill"] {
    border: 1px solid transparent;
    padding-block: var(--sf-space-2xs);
  }

  .sf-tab:hover,
  .sf-tab[aria-selected="true"],
  .sf-tab[aria-current="page"],
  .sf-tab[data-state="active"] {
    border-block-end-color: var(--sf-colour-primary);
    color: var(--sf-colour-foreground);
  }

  .sf-tab[data-variant="pill"]:hover,
  .sf-tab[data-variant="pill"][aria-selected="true"],
  .sf-tab[data-variant="pill"][aria-current="page"],
  .sf-tab[data-variant="pill"][data-state="active"] {
    background: var(--sf-colour-primary-soft);
    border-color: var(--sf-colour-primary-soft-border);
    color: var(--sf-colour-primary);
  }

  .sf-tab__count {
    background: var(--sf-colour-surface-alt);
    border: 1px solid var(--sf-colour-border);
    border-radius: var(--sf-radius-full);
    color: var(--sf-colour-muted);
    font-size: var(--sf-step--2);
    line-height: 1;
    padding: .25em .55em;
  }

  .sf-tab-panel {
    background: var(--sf-colour-surface);
    border: 1px solid var(--sf-colour-border);
    border-radius: var(--sf-radius-panel);
    padding: var(--sf-space-s-m);
  }

  .sf-tabs > input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .sf-tabs > input[type="radio"] ~ .sf-tab-panels > .sf-tab-panel {
    display: none;
  }

  .sf-tabs > input[type="radio"]:nth-of-type(1):checked ~ .sf-tab-panels > .sf-tab-panel:nth-child(1),
  .sf-tabs > input[type="radio"]:nth-of-type(2):checked ~ .sf-tab-panels > .sf-tab-panel:nth-child(2),
  .sf-tabs > input[type="radio"]:nth-of-type(3):checked ~ .sf-tab-panels > .sf-tab-panel:nth-child(3),
  .sf-tabs > input[type="radio"]:nth-of-type(4):checked ~ .sf-tab-panels > .sf-tab-panel:nth-child(4),
  .sf-tabs > input[type="radio"]:nth-of-type(5):checked ~ .sf-tab-panels > .sf-tab-panel:nth-child(5) {
    display: block;
  }

  .sf-nav--mobile {
    align-items: center;
    display: flex;
    gap: var(--sf-space-s);
    justify-content: space-between;
  }

  .sf-breadcrumb,
  .sf-pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-2xs);
    list-style: none;
    padding-inline-start: 0;
  }

  .sf-breadcrumb a,
  .sf-pagination a,
  .sf-pagination [aria-current="page"] {
    border-radius: var(--sf-radius-sm);
    color: var(--sf-colour-muted);
    display: inline-flex;
    font-size: var(--sf-step--1);
    font-weight: 700;
    padding-block: var(--sf-space-3xs);
    padding-inline: var(--sf-space-2xs);
    text-decoration: none;
  }

  .sf-breadcrumb li + li::before {
    color: var(--sf-colour-subtle);
    content: "/";
    margin-inline-end: var(--sf-space-2xs);
  }

  .sf-pagination a:hover,
  .sf-pagination [aria-current="page"] {
    background: var(--sf-colour-surface-alt);
    color: var(--sf-colour-foreground);
  }

  .sf-pagination[data-layout="complete"] {
    justify-content: space-between;
    row-gap: var(--sf-space-xs);
  }

  .sf-pagination__summary {
    color: var(--sf-colour-muted);
    font-size: var(--sf-step--1);
  }

  .sf-pagination__controls,
  .sf-pagination__pages,
  .sf-pagination__jump {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-2xs);
  }

  .sf-pagination__jump { color: var(--sf-colour-muted); font-size: var(--sf-step--1); }
  .sf-pagination__jump .sf-input { inline-size: 5rem; }
  .sf-pagination__jump .sf-select { inline-size: auto; }

  @media (prefers-reduced-motion: reduce) {
    .sf-spinner { animation: none; border-color: currentColor; border-inline-end-color: transparent; }
    .sf-switch__control,
    .sf-switch__control::before { transition: none; }
  }

  @media (forced-colors: active) {
    :where(.sf-button, .sf-card, .sf-surface, .sf-alert, .sf-price-card, .sf-testimonial, .sf-faq__item, .sf-input, .sf-select, .sf-textarea, .sf-input-group, .sf-file-input, .sf-dialog, .sf-popover, .sf-tooltip, .sf-toast, .sf-banner, .sf-drawer, .sf-disclosure > details, details.sf-disclosure, .sf-accordion > details, .sf-tab-panel, .sf-combobox__listbox, .sf-bulk-actions) {
      border-color: ButtonText;
      forced-color-adjust: auto;
    }

    .sf-button {
      background: ButtonFace;
      color: ButtonText;
    }

    .sf-button--default,
    .sf-button[data-variant="default"] {
      background: Highlight;
      border-color: Highlight;
      color: HighlightText;
    }

    .sf-switch__control,
    .sf-segmented-control__label,
    .sf-stepper__marker {
      background: Canvas;
      border-color: ButtonText;
      color: ButtonText;
      forced-color-adjust: none;
    }

    .sf-switch > input[type="checkbox"]:focus-visible + .sf-switch__control,
    .sf-segmented-control__option > input[type="radio"]:focus + .sf-segmented-control__label {
      outline: .125rem solid Highlight;
      outline-offset: .125rem;
    }

    .sf-switch > input[type="checkbox"]:checked + .sf-switch__control,
    .sf-segmented-control__option > input[type="radio"]:checked + .sf-segmented-control__label,
    .sf-stepper__step[aria-current="step"] .sf-stepper__marker {
      background: Highlight;
      border-color: Highlight;
      color: HighlightText;
    }

    .sf-switch__control::before { background: ButtonText; }
    .sf-switch > input[type="checkbox"]:checked + .sf-switch__control::before { background: HighlightText; }

    .sf-stepper__step[data-complete="true"] .sf-stepper__marker {
      background: Canvas;
      border-color: LinkText;
      color: LinkText;
    }

    :where(.sf-input, .sf-select, .sf-textarea)[aria-invalid="true"],
    .sf-field[data-invalid="true"] :where(.sf-input, .sf-select, .sf-textarea) {
      border-color: Mark;
      box-shadow: none;
    }
  }
}
@layer utilities {
  .sf-text-caption { font-size: var(--sf-step--1); line-height: 1.35; }
  .sf-text-body { font-size: var(--sf-step-0); line-height: 1.5; }
  .sf-text-lead { font-size: var(--sf-step-1); line-height: 1.45; }
  .sf-text-h4 { font-size: var(--sf-step-3); line-height: 1.1; }
  .sf-text-h3 { font-size: var(--sf-step-4); line-height: 1.05; }
  .sf-text-h2 { font-size: var(--sf-step-5); line-height: 1; }
  .sf-text-h1 { font-size: var(--sf-step-6); line-height: 1; }
  .sf-text-display { font-size: var(--sf-step-7); line-height: .95; }

  .sf-text-balance { text-wrap: balance; }
  .sf-text-pretty { text-wrap: pretty; }
  .sf-text-muted { color: var(--sf-colour-muted); }
  .sf-text-subtle { color: var(--sf-colour-subtle); }
  .sf-text-primary { color: var(--sf-colour-primary); }
  .sf-text-success { color: var(--sf-colour-success); }
  .sf-text-warning { color: var(--sf-colour-warning); }
  .sf-text-danger { color: var(--sf-colour-danger); }

  .sf-font-sans { font-family: var(--sf-font-sans); }
  .sf-font-display { font-family: var(--sf-font-display); }
  .sf-font-mono { font-family: var(--sf-font-mono); }

  .sf-bg-background { background: var(--sf-colour-background); }
  .sf-bg-surface { background: var(--sf-colour-surface); }
  .sf-bg-surface-alt { background: var(--sf-colour-surface-alt); }
  .sf-bg-primary-soft { background: var(--sf-colour-primary-soft); }
  .sf-bg-success-soft { background: var(--sf-colour-success-soft); }
  .sf-bg-warning-soft { background: var(--sf-colour-warning-soft); }
  .sf-bg-danger-soft { background: var(--sf-colour-danger-soft); }

  .sf-border { border: 1px solid var(--sf-colour-border); }
  .sf-border-strong { border: 1px solid var(--sf-colour-border-strong); }
  .sf-rounded { border-radius: var(--sf-radius-md); }
  .sf-rounded-panel { border-radius: var(--sf-radius-panel); }
  .sf-rounded-full { border-radius: var(--sf-radius-full); }
  .sf-shadow-sm { box-shadow: var(--sf-shadow-sm); }
  .sf-shadow-md { box-shadow: var(--sf-shadow-md); }
  .sf-shadow-lg { box-shadow: var(--sf-shadow-lg); }
  .sf-shadow-none { box-shadow: none; }

  .sf-push-block-end { margin-block-start: auto; }
  .sf-push-block-start { margin-block-end: auto; }
  .sf-push-inline-end { margin-inline-start: auto; }
  .sf-push-inline-start { margin-inline-end: auto; }

  .sf-prose {
    max-inline-size: var(--sf-prose-width, 68ch);
  }

  .sf-prose--blog { --sf-prose-width: 72ch; }
  .sf-prose--legal { --sf-prose-width: 80ch; }

  :where(.sf-prose--blog, .sf-prose--legal) > * + * {
    margin-block-start: var(--sf-space-s);
  }

  :where(.sf-prose--blog, .sf-prose--legal) :where(h2, h3) {
    margin-block-start: var(--sf-space-l);
  }

  .sf-meta {
    align-items: center;
    color: var(--sf-colour-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--sf-step--1);
    font-weight: 700;
    gap: var(--sf-space-2xs);
  }

  .sf-figure {
    display: grid;
    gap: var(--sf-space-xs);
  }

  .sf-caption {
    color: var(--sf-colour-muted);
    font-size: var(--sf-step--1);
  }

  .sf-table-wrap {
    border: 1px solid var(--sf-colour-border);
    border-radius: var(--sf-radius-panel);
    container-type: inline-size;
    overflow-x: auto;
  }

  .sf-table-wrap table {
    border-collapse: collapse;
    inline-size: 100%;
    min-inline-size: var(--sf-table-min, 42rem);
  }

  .sf-table-wrap :where(th, td) {
    border-block-end: 1px solid var(--sf-colour-border);
    padding: var(--sf-space-xs);
    text-align: start;
  }

  .sf-table-wrap :where(th) {
    background: var(--sf-colour-surface-alt);
    font-weight: 800;
  }

  :where(.sf-visually-hidden, .sr-only) {
    block-size: 0.0625rem;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    inline-size: 0.0625rem;
    margin: -0.0625rem;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
  }

  :where(.sf-not-visually-hidden, .not-sr-only) {
    block-size: auto;
    clip: auto;
    clip-path: none;
    inline-size: auto;
    margin: 0;
    overflow: visible;
    padding: 0;
    position: static;
    white-space: normal;
  }

  .sf-skip-link {
    background: var(--sf-colour-primary);
    border-radius: var(--sf-radius-md);
    box-shadow: var(--sf-shadow-md);
    color: var(--sf-colour-primary-foreground);
    inset-block-start: var(--sf-space-s);
    inset-inline-start: var(--sf-space-s);
    opacity: 0;
    padding-block: var(--sf-space-2xs);
    padding-inline: var(--sf-space-s);
    pointer-events: none;
    position: fixed;
    text-decoration: none;
    transform: translateY(calc(-100% - var(--sf-space-m)));
    transition: opacity var(--sf-duration-fast) var(--sf-ease-standard), transform var(--sf-duration-fast) var(--sf-ease-standard);
    z-index: var(--sf-z-skip-link);
  }

  .sf-skip-link:focus-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .sf-focus-ring:focus-visible {
    outline: 0.125rem solid var(--sf-colour-ring);
    outline-offset: .2rem;
  }

  .sf-focus-ring-inset:focus-visible {
    outline: 0.125rem solid var(--sf-colour-ring);
    outline-offset: -0.125rem;
  }

  .sf-touch-target {
    min-block-size: 2.75rem;
    min-inline-size: 2.75rem;
  }

  .sf-list-reset {
    list-style: none;
    padding-inline-start: 0;
  }

  .sf-list-disc {
    list-style: disc;
    padding-inline-start: var(--sf-space-m);
  }

  .sf-list-decimal {
    list-style: decimal;
    padding-inline-start: var(--sf-space-m);
  }

  :where(.sf-link, .sf-link-subtle) {
    text-decoration: underline;
    text-decoration-color: color-mix(in oklch, currentColor 45%, transparent);
    text-decoration-skip-ink: auto;
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
  }

  .sf-link { color: var(--sf-colour-primary); }

  .sf-link:hover,
  .sf-link-subtle:hover {
    text-decoration-color: currentColor;
  }

  .sf-link-plain {
    color: inherit;
    text-decoration: none;
  }

  .sf-full-bleed {
    inline-size: 100vw;
    margin-inline-start: 50%;
    transform: translateX(-50%);
  }

  .sf-animate-fade,
  .sf-animate-rise,
  .sf-animate-scale,
  .sf-animate-slide {
    animation-duration: var(--sf-motion-duration, var(--sf-duration-slow));
    animation-fill-mode: both;
    animation-timing-function: var(--sf-motion-ease, var(--sf-ease-emphasized));
  }

  .sf-animate-fade { animation-name: sf-fade; }
  .sf-animate-rise { animation-name: sf-rise; }
  .sf-animate-scale { animation-name: sf-scale; }
  .sf-animate-slide { animation-name: sf-slide; }

  .sf-animate-stagger > * {
    animation-delay: calc(var(--sf-stagger-index, 0) * var(--sf-stagger-step, 80ms));
  }

  @keyframes sf-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes sf-rise {
    from { opacity: 0; transform: translateY(var(--sf-motion-distance, var(--sf-space-s))); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes sf-scale {
    from { opacity: 0; transform: scale(.96); }
    to { opacity: 1; transform: scale(1); }
  }

  @keyframes sf-slide {
    from { opacity: 0; transform: translateX(var(--sf-motion-distance, var(--sf-space-s))); }
    to { opacity: 1; transform: translateX(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.sf-animate-fade, .sf-animate-rise, .sf-animate-scale, .sf-animate-slide) {
      animation: none;
    }
  }
}