/*! @frontierjs/css — bundled. Source: src/. */
@layer reset, tokens, themes, tones, base, layout, components, patterns, utilities, a11y;

/* src/foundation/reset.css */
@layer reset {
  a:where([class]) {
    text-decoration: none;
  }

  body {
    margin: 0;
  }

  button:-webkit-any(.badge, .pill) {
    appearance: none;
    cursor: pointer;
  }

  button:-moz-any(.badge, .pill) {
    appearance: none;
    cursor: pointer;
  }

  button:is(.badge, .pill) {
    appearance: none;
    cursor: pointer;
  }
}

/* src/foundation/tokens.css */
@layer tokens {
  *, *:before, *:after {
    box-sizing: border-box;
  }

  :root, :host {
    interpolate-size: allow-keywords;
    --color-primary: #0d83dd;
    --color-secondary: #1f2937;
    --color-muted: #6b7280;
    --color-info: #2ea2c9;
    --color-success: #16a34a;
    --color-warning: #d4b609;
    --color-danger: #f4403a;
    --surface: #fff;
    --surface-raised: #fff;
    --surface-sunken: #f5f5f5;
    --ink: #1c1b18;
    --ink-soft: #5a564e;
    --ink-mute: #757067;
    --rule: #e7e3d8;
    --rule-strong: #d4cfc0;
    --control-padding-block: var(--space-sm);
    --btn-radius: 6px;
    --card-radius: 8px;
    --field-radius: 6px;
    --pill-radius: 9999px;
    --border-width: 1px;
    --surface-shadow: none;
    --btn-font-weight: 600;
    --btn-text-transform: none;
    --btn-letter-spacing: normal;
    --pill-font-weight: 600;
    --pill-text-transform: none;
    --pill-letter-spacing: normal;
    --badge-font-weight: 600;
    --badge-text-transform: uppercase;
    --badge-letter-spacing: .04em;
    --label-font-weight: 600;
    --label-text-transform: uppercase;
    --label-letter-spacing: .04em;
    --motion-fast: .12s;
    --motion-base: .15s;
    --motion-enter: .16s;
    --motion-slow: .2s;
    --motion-spin: .6s;
    --motion-shimmer: 1.4s;
    --motion-ease: ease;
    --motion-ease-out: ease-out;
    --motion-ease-enter: cubic-bezier(.16, 1, .3, 1);
    --container-max: 1280px;
    --container-narrow: 768px;
    --container-pad: 1rem;
    --topbar-height: 3.5rem;
    --sidebar-width: 15rem;
    --screen-pad: 1.5rem;
    --tone-l-min: 0;
    --tone-l-max: .46;
    --shadow-sm: 0 1px 2px #0000000f;
    --shadow-md: 0 1px 3px #0000000f, 0 1px 2px #0000000a;
    --shadow-lg: 0 1px 3px #0000001a, 0 4px 12px #0000000f;
    --scrim: #00000073;
    --ring-width: 2px;
    --ring-offset: 2px;
    --font-primary: system-ui, sans-serif;
    --font-mono: ui-monospace, monospace;
    --text-2xs: .6875rem;
    --text-xs: .75rem;
    --text-sm: .8125rem;
    --text-md: .875rem;
    --text-lg: 1rem;
    --text-xl: 1.125rem;
    --text-2xl: 1.375rem;
    --text-3xl: 1.75rem;
    --text-4xl: 2.25rem;
    --leading-display: 1.1;
    --leading-heading: 1.2;
    --leading-snug: 1.45;
    --leading-normal: 1.5;
    --leading-body: 1.55;
    --leading-relaxed: 1.6;
  }

  @property --density {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
  }

  .dense {
    --density: .8;
  }

  .roomy {
    --density: 1.25;
  }

  @container fjs (inline-size < 30rem) {
    * {
      --density: .9;
    }
  }

  @container fjs (inline-size < 20rem) {
    * {
      --density: .8;
    }
  }

  *, *:before, *:after {
    --space-3xs: calc(var(--space-3xs-base, .125rem) * var(--density));
    --space-2xs: calc(var(--space-2xs-base, .25rem) * var(--density));
    --space-xs: calc(var(--space-xs-base, .375rem) * var(--density));
    --space-sm: calc(var(--space-sm-base, .5rem) * var(--density));
    --space-md: calc(var(--space-md-base, .625rem) * var(--density));
    --space-lg: calc(var(--space-lg-base, .75rem) * var(--density));
    --space-xl: calc(var(--space-xl-base, .875rem) * var(--density));
    --space-2xl: calc(var(--space-2xl-base, 1rem) * var(--density));
    --space-3xl: calc(var(--space-3xl-base, 1.25rem) * var(--density));
    --space-4xl: calc(var(--space-4xl-base, 1.5rem) * var(--density));
    --space-5xl: calc(var(--space-5xl-base, 2rem) * var(--density));
    --space-6xl: calc(var(--space-6xl-base, 3rem) * var(--density));
  }

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

    .spinner, .btn.loading:after {
      animation-duration: 1.6s !important;
      animation-iteration-count: infinite !important;
    }
  }
}

/* src/themes/default.css */
@layer themes {
  .theme-default {
    --color-primary: #2563eb;
    --color-secondary: #0f172a;
    --color-muted: #64748b;
    --color-info: #0369a1;
    --color-success: #15803d;
    --color-warning: #b45309;
    --color-danger: #dc2626;
    --app-bg: #eef2f7;
    --surface: #fff;
    --surface-raised: #fff;
    --surface-sunken: #f2f5f8;
    --ink: #0f172a;
    --ink-soft: #475569;
    --ink-mute: #5f6e84;
    --rule: #dfe5ec;
    --rule-strong: #c6d0dc;
    --topbar-bg: #fff;
    --surface-shadow: 0 1px 2px #0f172a0a;
    --shadow-sm: 0 1px 2px #0f172a0f;
    --shadow-md: 0 1px 3px #0f172a14, 0 4px 10px #0f172a0a;
    --shadow-lg: 0 2px 6px #0f172a14, 0 12px 28px #0f172a1a;
    --btn-radius: 8px;
    --card-radius: 10px;
    --field-radius: 8px;
    --heading-font-weight: 600;
    --text-4xl: 2rem;
  }
}

/* src/themes/sunset.css */
@layer themes {
  .theme-sunset {
    --color-primary: #f98e2e;
    --color-secondary: #9a3412;
    --color-muted: #a8a29e;
    --color-info: #c2410c;
    --color-success: #84cc16;
    --color-warning: #facc15;
    --color-danger: #dc2626;
  }
}

/* src/themes/forest.css */
@layer themes {
  .theme-forest {
    --color-primary: #16a34a;
    --color-secondary: #166534;
    --color-muted: #64748b;
    --color-info: #0891b2;
    --color-success: #15803d;
    --color-warning: #ca8a04;
    --color-danger: #b91c1c;
  }
}

/* src/themes/midnight.css */
@layer themes {
  .theme-midnight {
    --color-primary: #8b5cf6;
    --color-secondary: #4338ca;
    --color-muted: #94a3b8;
    --color-info: #06b6d4;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
  }
}

/* src/themes/dark.css */
@layer themes {
  .theme-dark {
    --buncss-light: ;
    --buncss-dark: initial;
    color-scheme: dark;
    --tone-l-min: .74;
    --tone-l-max: 1;
    --surface: #1a1a1a;
    --surface-raised: #252525;
    --surface-sunken: #0f0f0f;
    --ink: #f5f5f5;
    --ink-soft: #c5c5c5;
    --ink-mute: #8c8c8c;
    --rule: #2d2d2d;
    --rule-strong: #404040;
    --shadow-sm: 0 1px 2px #0006;
    --shadow-md: 0 1px 3px #00000073, 0 1px 2px #0000004d;
    --shadow-lg: 0 1px 3px #00000080, 0 4px 12px #0006;
  }
}

/* src/themes/elite.css */
@layer themes {
  .theme-elite {
    --color-primary: #9fc612;
    --color-secondary: #1d3b4c;
    --color-muted: #6b7280;
    --color-info: #1d3b4c;
    --color-success: #3a7d1e;
    --color-warning: #ca8a04;
    --color-danger: #b22222;
    --btn-radius: 0;
    --card-radius: 0;
    --field-radius: 0;
    --btn-font-weight: 700;
    --btn-text-transform: uppercase;
    --btn-letter-spacing: .1em;
    --badge-font-weight: 700;
    --badge-letter-spacing: .08em;
    --pill-text-transform: uppercase;
    --pill-letter-spacing: .05em;
    --shadow-md: 0 1px 3px #00000014, 0 4px 12px #0000000a;
    --font-primary: "Montserrat", system-ui, sans-serif;
    --font-display: "Montserrat", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", monospace;
  }
}

/* src/themes/basecamp.css */
@layer themes {
  .theme-basecamp {
    --buncss-light: ;
    --buncss-dark: initial;
    color-scheme: dark;
    --tone-l-min: .74;
    --tone-l-max: 1;
    --color-primary: #5a8ef8;
    --color-secondary: #9d87f5;
    --color-muted: #636882;
    --color-info: #1ec8d4;
    --color-success: #2dd4a0;
    --color-warning: #f5b540;
    --color-danger: #f06b6b;
    --surface: #151820;
    --surface-raised: #1b1f2c;
    --surface-sunken: #0b0d14;
    --topbar-bg: #0e1019;
    --sidebar-bg: #0e1019;
    --dialog-bg: #12151f;
    --ink: #dde1ed;
    --ink-soft: #a0a7cf;
    --ink-mute: #7c86af;
    --rule: #ffffff12;
    --rule-strong: #ffffff21;
    --shadow-sm: 0 1px 2px #00000080;
    --shadow-md: 0 2px 6px #00000080, 0 1px 2px #0006;
    --shadow-lg: 0 8px 32px #0000008c, 0 0 0 1px #ffffff0a;
  }
}

/* src/themes/notebook.css */
@layer themes {
  .theme-notebook {
    --surface: #f4f1e8;
    --surface-raised: #fffdf7;
    --surface-sunken: #e7e2d5;
    --ink: #202522;
    --ink-soft: #474e49;
    --ink-mute: #60655f;
    --color-primary: #315f72;
    --color-secondary: #536b4f;
    --color-info: #477f91;
    --color-success: #557a4d;
    --color-warning: #b08335;
    --color-danger: #a94b43;
  }
}

/* src/themes/press.css */
@layer themes {
  .theme-press {
    --color-primary: #1b1714;
    --color-secondary: #af3d28;
    --color-muted: #696358;
    --color-info: #2c5f7c;
    --color-success: #2f6b3a;
    --color-warning: #875b08;
    --color-danger: #a12318;
    --surface: #f7f4ec;
    --surface-raised: #fffefa;
    --surface-sunken: #e8e2d4;
    --ink: #16130f;
    --ink-soft: #4a453c;
    --ink-mute: #696358;
    --rule: #2a251d;
    --rule-strong: #16130f;
    --border-width: 2px;
    --btn-radius: 0;
    --card-radius: 0;
    --field-radius: 0;
    --btn-font-weight: 700;
    --btn-text-transform: uppercase;
    --btn-letter-spacing: .12em;
    --badge-font-weight: 700;
    --badge-text-transform: uppercase;
    --badge-letter-spacing: .1em;
    --pill-font-weight: 500;
    --pill-text-transform: none;
    --pill-letter-spacing: .01em;
    --font-primary: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --font-display: "Iowan Old Style", Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --text-2xs: .625rem;
    --text-xs: .6875rem;
    --text-sm: .75rem;
    --text-md: .8125rem;
    --text-lg: .9375rem;
    --text-xl: 1.125rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2.125rem;
    --text-4xl: 3rem;
    --leading-display: .95;
    --leading-heading: 1.08;
    --leading-snug: 1.4;
    --leading-normal: 1.5;
    --leading-body: 1.6;
    --leading-relaxed: 1.7;
    --density: 1.15;
    --space-4xl-base: 1.75rem;
    --space-5xl-base: 2.5rem;
    --space-6xl-base: 4rem;
    --motion-fast: 80ms;
    --motion-base: 90ms;
    --motion-enter: .1s;
    --motion-slow: .12s;
    --motion-ease: linear;
    --motion-ease-out: linear;
    --motion-ease-enter: linear;
    --label-font-weight: 700;
    --label-letter-spacing: .1em;
    --heading-font-weight: 700;
    --shadow-sm: 2px 2px 0 #16130f;
    --shadow-md: 3px 3px 0 #16130f;
    --shadow-lg: 6px 6px 0 #16130f;
    --surface-shadow: 2px 2px 0 #16130f;
    --ring: #16130f;
    --ring-width: 3px;
    --ring-offset: 0px;
    --ring-style: double;
    --container-max: 1080px;
    --container-narrow: 680px;
    --container-pad: 1.5rem;
    --topbar-height: 3rem;
    --sidebar-width: 14rem;
    --screen-pad: 2rem;
  }
}

/* src/themes/field.css */
@layer themes {
  .theme-field {
    --buncss-light: ;
    --buncss-dark: initial;
    color-scheme: dark;
    --tone-l-min: .72;
    --tone-l-max: 1;
    --surface: #141715;
    --surface-raised: #1b201c;
    --surface-sunken: #0c0e0d;
    --ink: #e4dcc4;
    --ink-soft: #b3ab93;
    --ink-mute: #8e876f;
    --rule: #2c312d;
    --rule-strong: #434942;
    --color-primary: #4fa8a0;
    --color-secondary: #a79ae4;
    --color-info: #5e93bf;
    --color-success: #93a83f;
    --color-warning: #d2762e;
    --color-danger: #dc6a58;
    --color-muted: #8c8778;
    --font-primary: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --heading-letter-spacing: .08em;
    --btn-font-weight: 600;
    --btn-text-transform: uppercase;
    --btn-letter-spacing: .1em;
    --badge-font-weight: 600;
    --badge-text-transform: uppercase;
    --badge-letter-spacing: .1em;
    --btn-radius: 2px;
    --card-radius: 2px;
    --field-radius: 2px;
    --shadow-sm: 0 1px 2px #00000080;
    --shadow-md: 0 1px 3px #0000008c, 0 1px 2px #0006;
    --shadow-lg: 0 1px 3px #0009, 0 10px 30px -20px #000000e6;
  }
}

/* src/themes/dracula.css */
@layer themes {
  .theme-dracula {
    --buncss-light: ;
    --buncss-dark: initial;
    color-scheme: dark;
    --tone-l-min: .74;
    --tone-l-max: 1;
    --color-primary: #bd93f9;
    --color-secondary: #ff79c6;
    --color-muted: #6272a4;
    --color-info: #8be9fd;
    --color-success: #50fa7b;
    --color-warning: #ffb86c;
    --color-danger: #f55;
    --surface: #282a36;
    --surface-raised: #343746;
    --surface-sunken: #21222c;
    --topbar-bg: #21222c;
    --sidebar-bg: #21222c;
    --dialog-bg: #2c2e3b;
    --ink: #f8f8f2;
    --ink-soft: #adc7ff;
    --ink-mute: #8a9fe3;
    --rule: #44475a;
    --rule-strong: #565a72;
    --shadow-sm: 0 1px 2px #00000073;
    --shadow-md: 0 2px 6px #00000080, 0 1px 2px #00000059;
    --shadow-lg: 0 8px 28px #0000008c, 0 0 0 1px #ffffff0a;
  }
}

/* src/themes/twilight.css */
@layer themes {
  .theme-twilight {
    --buncss-light: ;
    --buncss-dark: initial;
    color-scheme: dark;
    --tone-l-min: .74;
    --tone-l-max: 1;
    --color-primary: #cda869;
    --color-secondary: #9b859d;
    --color-muted: #5f5a60;
    --color-info: #7587a6;
    --color-success: #8f9d6a;
    --color-warning: #f9ee98;
    --color-danger: #cf6a4c;
    --surface: #1e1c1a;
    --surface-raised: #282624;
    --surface-sunken: #141210;
    --topbar-bg: #141210;
    --sidebar-bg: #141210;
    --dialog-bg: #232120;
    --ink: #f8f8f8;
    --ink-soft: #b7adb8;
    --ink-mute: #938c94;
    --rule: #ffffff14;
    --rule-strong: #ffffff26;
    --shadow-sm: 0 1px 2px #00000080;
    --shadow-md: 0 2px 6px #0000008c, 0 1px 2px #0006;
    --shadow-lg: 0 8px 28px #0009, 0 0 0 1px #ffffff0d;
  }
}

/* src/foundation/tones.css */
@layer tones {
  @property --bg-mix {
    syntax: "*";
    inherits: false
  }

  @property --on-bg-mix {
    syntax: "*";
    inherits: false
  }

  .primary {
    --bg-mix: var(--color-primary);
  }

  .secondary {
    --bg-mix: var(--color-secondary);
  }

  .muted {
    --bg-mix: var(--color-muted);
  }

  .info {
    --bg-mix: var(--color-info);
  }

  .success {
    --bg-mix: var(--color-success);
  }

  .warning {
    --bg-mix: var(--color-warning);
  }

  .danger {
    --bg-mix: var(--color-danger);
  }

  @property --tone-ink {
    syntax: "*";
    inherits: false
  }

  @property --tint-surface {
    syntax: "*";
    inherits: false
  }

  @property --tint-rule {
    syntax: "*";
    inherits: false
  }

  @property --tint-ink {
    syntax: "*";
    inherits: false
  }

  *, *:before, *:after {
    --tone-ink: oklch(from var(--bg-mix) clamp(var(--tone-l-min), l, var(--tone-l-max)) c h);
    --tint-surface: color-mix(in srgb, var(--bg-mix) 10%, var(--surface));
    --tint-rule: color-mix(in srgb, var(--bg-mix) 30%, var(--surface));
    --tint-ink: oklch(from color-mix(in srgb, var(--bg-mix) 55%, var(--ink)) clamp(var(--tone-l-min), l, var(--tone-l-max)) c h);
  }
}

/* src/foundation/chip.css */
@layer base {
  :where(.chip, .btn, .pill, .badge, .pagination-link, .tooltip, .avatar, .step-marker) {
    --fill: color(from var(--tone-fill) xyz-d65 calc(x * max(min(1, .1783 / y), clamp(0, (y - .35) * infinity, 1))) calc(y * max(min(1, .1783 / y), clamp(0, (y - .35) * infinity, 1))) calc(z * max(min(1, .1783 / y), clamp(0, (y - .35) * infinity, 1))));
    --on-fill: var(--on-bg-mix, color(from var(--tone-fill) xyz-d65 calc(clamp(0, (.35 - y) * infinity, 1) * .9505) clamp(0, (.35 - y) * infinity, 1) calc(clamp(0, (.35 - y) * infinity, 1) * 1.089)));
    display: inline-flex;
    justify-content: center;
    align-items:  center;
    gap: var(--space-xs);
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
  }
}

/* src/foundation/surface.css */
@layer base {
  :where(.surface, .card, .tile, .alert, .toast, .dialog, .popover, .drawer) {
    --surface-tint-bg: var(--tint-surface);
    --surface-tint-border: var(--tint-rule);
    --surface-tint-color: var(--tint-ink);
    --surface-bg: var(--surface-tint-bg, var(--surface-ground, var(--surface)));
    --surface-border: var(--surface-tint-border, var(--rule));
    --surface-color: var(--surface-tint-color, var(--ink));
    display: block;
    background: var(--surface-bg);
    color: var(--surface-color);
    border: var(--border-width) solid var(--surface-border);
    border-radius: var(--card-radius);
    font-family: var(--font-primary);
    box-shadow: var(--surface-shadow);
    transition: background var(--motion-fast), border-color var(--motion-fast);
  }

  :where(.surface, .card, .tile, .alert, .toast, .dialog, .popover, .drawer).raised {
    --surface-bg: var(--surface-tint-bg, var(--surface-raised));
    --surface-border: transparent;
    box-shadow: var(--shadow-md);
  }

  :where(.surface, .card, .tile, .alert, .toast, .dialog, .popover, .drawer).outlined {
    --surface-bg: transparent;
    --surface-border: var(--surface-tint-border, var(--rule-strong));
    box-shadow: none;
  }

  :where(.surface, .card, .tile, .alert, .toast, .dialog, .popover, .drawer).ghost {
    --surface-bg: transparent;
    --surface-border: transparent;
    box-shadow: none;
  }

  :where(a, button):where(.surface, .card, .tile) {
    cursor: pointer;
    transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast);
  }

  @media (hover: hover) {
    :where(a, button):where(.surface, .card, .tile):hover {
      --surface-border: color-mix(in srgb, var(--bg-mix, var(--color-primary)) 55%, var(--surface-tint-border, var(--rule)));
      transform: translateY(-1px);
    }
  }

  :where(a, button):where(.surface, .card, .tile):active {
    transform: none;
  }

  dialog:where(.dialog, .drawer, .surface):not([open]) {
    display: none;
  }

  .surface-header, .surface-footer {
    display: flex;
    align-items:  center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-3xl);
  }

  .surface-header {
    border-bottom: var(--border-width) solid var(--surface-border);
    color: var(--surface-color);
    justify-content: space-between;
    font-weight: 600;
  }

  .surface-footer {
    border-top: var(--border-width) solid var(--surface-border);
    background: color-mix(in srgb, var(--ink) 3%, transparent);
    justify-content: flex-end;
  }

  .surface-body {
    padding: var(--space-2xl) var(--space-3xl);
    line-height: 1.55;
  }

  .surface-body > p {
    margin: 0 0 10px;
  }

  .surface-body > p:last-child {
    margin-bottom: 0;
  }
}

/* src/foundation/layout.css */
@layer layout {
  .stack {
    display: flex;
    gap: var(--space-2xl);
    flex-direction: column;
  }

  .cluster {
    display: flex;
    align-items:  center;
    gap: var(--space-sm);
    flex-wrap: wrap;
  }

  .group {
    display: flex;
    align-items:  center;
    gap: var(--space-sm);
    flex-wrap: nowrap;
    min-width: 0;
  }

  .center {
    display: grid;
    place-items:  center;
  }

  .split {
    display: flex;
    justify-content: space-between;
    align-items:  center;
    gap: var(--space-2xl);
  }

  .container {
    padding-inline: var(--container-pad);
    max-width: var(--container-max);
    width: 100%;
    margin-inline-start: auto;
    margin-inline-end: auto;
  }

  .container.narrow {
    max-width: var(--container-narrow);
  }

  .container.wide {
    max-width: none;
  }

  @media (min-width: 768px) {
    .container {
      --container-pad: 1.5rem;
    }
  }

  @media (min-width: 1280px) {
    .container {
      --container-pad: 2rem;
    }
  }
}

/* src/components/frame.css */
@layer components {
  .app {
    min-block-size: 100vh;
    background: var(--app-bg, var(--surface-sunken));
    color: var(--ink);
    font-family: var(--font-primary);
    -webkit-font-smoothing: antialiased;
    min-block-size: 100dvh;
    margin: 0;
  }

  .shell {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "topbar  topbar" "sidebar screen";
    min-block-size: 100vh;
    min-block-size: 100dvh;
  }

  .shell.sidebar-first {
    grid-template-areas: "sidebar topbar" "sidebar screen";
  }

  .shell.viewport {
    block-size: 100vh;
    overflow: hidden;
    block-size: 100dvh;
    min-block-size: 0;
  }

  .shell.viewport > .sidebar, .shell.viewport > .screen {
    overflow-y: auto;
  }

  .topbar {
    grid-area: topbar;
    display: flex;
    justify-content: space-between;
    align-items:  center;
    gap: var(--space-2xl);
    min-block-size: var(--topbar-height);
    padding-block: var(--space-xs);
    padding-inline: var(--space-2xl);
    background: var(--topbar-bg, var(--surface));
    border-block-end: var(--border-width) solid var(--rule);
    position: sticky;
    z-index: 20;
    top: 0;
  }

  .sidebar {
    grid-area: sidebar;
    inline-size: var(--sidebar-width);
    padding: var(--space-2xl) var(--space-lg);
    background: var(--sidebar-bg, var(--surface));
    border-inline-end: var(--border-width) solid var(--rule);
  }

  .screen {
    grid-area: screen;
    padding: var(--screen-pad);
    min-inline-size: 0;
  }

  .pane {
    margin-block-end: 2rem;
  }

  .pane:last-child {
    margin-block-end: 0;
  }

  .view {
    display: block;
  }

  .view[hidden] {
    display: none;
  }

  @media (max-width: 767px) {
    .shell, .shell.sidebar-first {
      grid-template-columns: 1fr;
      grid-template-areas: "topbar" "screen";
    }

    .shell > .sidebar {
      display: none;
    }

    .screen {
      padding: var(--space-2xl);
    }
  }

  .sidebar-toggle {
    display: none;
  }

  @media (max-width: 767px) {
    .sidebar-toggle {
      display: revert;
    }
  }
}

/* src/components/typography.css */
@layer components {
  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display, var(--font-primary));
    color: var(--ink);
    line-height: var(--leading-heading);
    text-wrap: balance;
    margin: 0;
  }

  h1, .h1 {
    font-size: var(--text-4xl);
    font-weight: var(--heading-font-weight, 700);
    letter-spacing: var(--heading-letter-spacing, -.02em);
    line-height: var(--leading-display);
  }

  h2, .h2 {
    font-size: var(--text-3xl);
    font-weight: var(--heading-font-weight, 700);
    letter-spacing: var(--heading-letter-spacing, -.015em);
    line-height: var(--leading-heading);
  }

  h3, .h3 {
    font-size: var(--text-2xl);
    font-weight: var(--heading-font-weight, 600);
    letter-spacing: var(--heading-letter-spacing, normal);
  }

  h4, .h4 {
    font-size: var(--text-xl);
    font-weight: var(--heading-font-weight, 600);
    letter-spacing: var(--heading-letter-spacing, normal);
  }

  h5, .h5 {
    font-size: var(--text-lg);
    font-weight: var(--heading-font-weight, 600);
    letter-spacing: var(--heading-letter-spacing, normal);
  }

  h6, .h6 {
    font-size: var(--text-md);
    font-weight: var(--heading-font-weight, 600);
    text-transform: uppercase;
    letter-spacing: var(--heading-letter-spacing, .05em);
  }

  .link {
    color: var(--bg-mix, var(--color-primary));
    text-decoration: none;
    cursor: pointer;
  }

  .link:hover {
    text-decoration: underline;
  }

  .link:focus-visible {
    border-radius: 2px;
  }
}

/* src/components/code.css */
@layer components {
  kbd, .kbd {
    display: inline-flex;
    font-family: var(--font-mono);
    color: var(--ink);
    background: var(--surface-sunken);
    border: var(--border-width) solid var(--rule-strong);
    border-block-end-width: calc(var(--border-width) * 2);
    border-radius: 4px;
    justify-content: center;
    align-items:  center;
    min-inline-size: 1.5em;
    padding: .125em .375em;
    font-size: .8125em;
    font-weight: 500;
    line-height: 1.4;
  }

  code, .code-inline {
    font-family: var(--font-mono);
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    color: var(--ink);
    border-radius: 4px;
    padding: .125em .375em;
    font-size: .875em;
  }

  .code {
    display: block;
    overflow-x: auto;
    padding: var(--space-xl) var(--space-2xl);
    background: var(--code-bg, var(--surface-sunken));
    border: var(--border-width) solid var(--rule);
    border-radius: var(--card-radius);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--code-text, var(--ink));
    white-space: pre;
    tab-size: 2;
    --code-pad: var(--space-2xl);
    margin: 0;
  }

  pre code, pre .code-inline, .code > code, .code .code-inline {
    font-size: inherit;
    background: none;
    border-radius: 0;
    padding: 0;
  }

  code[language] {
    display: block;
    white-space: pre;
    overflow-x: auto;
    tab-size: 2;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--code-ink, var(--ink));
    background: none;
    border-radius: 0;
    padding: 0;
  }

  pre code[language] {
    font-size: inherit;
    line-height: inherit;
  }

  code[language] :-webkit-any(b, i, em, strong, sup, label, u, ins, del, dfn, mark, span) {
    font-weight: inherit;
    font-style: normal;
    font-size: inherit;
    text-decoration: none;
    vertical-align: baseline;
    color: inherit;
    background: none;
  }

  code[language] :-moz-any(b, i, em, strong, sup, label, u, ins, del, dfn, mark, span) {
    font-weight: inherit;
    font-style: normal;
    font-size: inherit;
    text-decoration: none;
    vertical-align: baseline;
    color: inherit;
    background: none;
  }

  code[language] :is(b, i, em, strong, sup, label, u, ins, del, dfn, mark, span) {
    font-weight: inherit;
    font-style: normal;
    font-size: inherit;
    text-decoration: none;
    vertical-align: baseline;
    color: inherit;
    background: none;
  }

  code[language] sup {
    color: var(--code-comment, var(--ink-mute));
  }

  code[language] i {
    color: var(--code-punct, var(--ink-soft));
  }

  code[language] b {
    color: var(--code-name, oklch(from var(--color-primary) clamp(var(--tone-l-min), l, var(--tone-l-max)) c h));
  }

  code[language] em {
    color: var(--code-value, oklch(from var(--color-success) clamp(var(--tone-l-min), l, var(--tone-l-max)) c h));
  }

  code[language] strong {
    color: var(--code-keyword, oklch(from var(--color-primary) clamp(var(--tone-l-min), l, var(--tone-l-max)) c calc(h + 75)));
  }

  code[language] label {
    color: var(--code-special, oklch(from var(--color-danger) clamp(var(--tone-l-min), l, var(--tone-l-max)) c h));
    font-weight: 600;
  }

  code[language] mark {
    background: var(--code-marked, color-mix(in srgb, var(--color-warning) 25%, transparent));
    border-radius: 3px;
    margin: -.15em -.3em;
    padding: .15em .3em;
  }

  code[language] u {
    text-decoration: underline wavy var(--code-error, var(--color-danger));
    text-decoration-thickness: .1em;
    text-underline-offset: .25em;
  }

  code[language] :-webkit-any(ins, del, dfn) {
    display: block;
    margin-inline: calc(var(--code-pad, 0px) * -1);
    padding-inline: var(--code-pad, 0px);
    border-inline-start: 2px solid var(--code-line-rule);
    background: var(--code-line-bg);
    inline-size: max-content;
    min-inline-size: 100%;
  }

  code[language] :-moz-any(ins, del, dfn) {
    display: block;
    margin-inline: calc(var(--code-pad, 0px) * -1);
    padding-inline: var(--code-pad, 0px);
    border-inline-start: 2px solid var(--code-line-rule);
    background: var(--code-line-bg);
    inline-size: max-content;
    min-inline-size: 100%;
  }

  code[language] :is(ins, del, dfn) {
    display: block;
    margin-inline: calc(var(--code-pad, 0px) * -1);
    padding-inline: var(--code-pad, 0px);
    border-inline-start: 2px solid var(--code-line-rule);
    background: var(--code-line-bg);
    inline-size: max-content;
    min-inline-size: 100%;
  }

  code[language] ins {
    --code-line-rule: var(--code-ins, var(--color-success));
    --code-line-bg: color-mix(in srgb, var(--code-ins, var(--color-success)) 14%, transparent);
  }

  code[language] del {
    --code-line-rule: var(--code-del, var(--color-danger));
    --code-line-bg: color-mix(in srgb, var(--code-del, var(--color-danger)) 14%, transparent);
  }

  code[language] dfn {
    --code-line-rule: var(--code-note, var(--color-primary));
    --code-line-bg: color-mix(in srgb, var(--code-note, var(--color-primary)) 14%, transparent);
  }

  code[language]:has( > span) {
    counter-reset: code-line 0;
  }

  code[language] > span {
    counter-increment: code-line 1;
  }

  code[language] > span:before {
    content: counter(code-line);
    display: inline-block;
    text-align: end;
    color: var(--code-gutter, var(--ink-mute));
    user-select: none;
    inline-size: 2.5em;
    margin-inline-end: 1em;
  }
}

/* src/components/icon.css */
@layer components {
  .icon {
    inline-size: var(--icon-size, 1.15em);
    block-size: var(--icon-size, 1.15em);
    flex-shrink: 0;
  }

  :where(.btn, .square, .pill-close, .empty-icon, .alert-icon, .navlink, .navlist-label, .field-addon, .pagination-link, .tab, .link, .item, .list-row, .row-actions, .step-label, .breadcrumb li, .tile-delta, .badge, .pill, .chip, .topbar, .surface-header, .disclosure-summary) > :where(svg, img, [class^="i-heroicons"], [class*=" i-heroicons"]) {
    inline-size: var(--icon-size, 1.15em);
    block-size: var(--icon-size, 1.15em);
    flex-shrink: 0;
  }

  .pill-close {
    --icon-size: .85em;
  }

  .empty-icon {
    --icon-size: 2rem;
  }
}

/* src/components/buttons.css */
@layer components {
  .btn {
    padding: var(--control-padding-block) var(--space-xl);
    border-radius: var(--btn-radius);
    font-size: var(--text-md);
    cursor: pointer;
    transition: background-color var(--motion-base), border-color var(--motion-base), color var(--motion-base), box-shadow var(--motion-base), filter var(--motion-base);
    --tone-fill: var(--bg-mix, var(--color-primary));
    background: var(--fill, var(--tone-fill));
    color: var(--on-fill, white);
    border: var(--border-width) solid transparent;
    line-height: 1.25rem;
    font-family: var(--font-primary);
    font-weight: var(--btn-font-weight);
    text-transform: var(--btn-text-transform);
    letter-spacing: var(--btn-letter-spacing);
    box-shadow: var(--shadow-sm);
  }

  .btn:hover {
    filter: brightness(1.05);
  }

  .btn:disabled, .btn.disabled {
    opacity: .6;
    cursor: not-allowed;
  }

  .btn:-webkit-any(.outlined, .link) {
    --accent-ink: oklch(from var(--color-primary) clamp(var(--tone-l-min), l, var(--tone-l-max)) c h);
    --btn-ink: var(--tone-ink, var(--accent-ink));
  }

  .btn:-moz-any(.outlined, .link) {
    --accent-ink: oklch(from var(--color-primary) clamp(var(--tone-l-min), l, var(--tone-l-max)) c h);
    --btn-ink: var(--tone-ink, var(--accent-ink));
  }

  .btn:is(.outlined, .link) {
    --accent-ink: oklch(from var(--color-primary) clamp(var(--tone-l-min), l, var(--tone-l-max)) c h);
    --btn-ink: var(--tone-ink, var(--accent-ink));
  }

  .btn.ghost {
    --btn-ink: var(--tone-ink, var(--ink-soft));
  }

  .btn.outlined {
    background: var(--surface);
    color: var(--btn-ink);
    border-color: var(--btn-ink);
    box-shadow: none;
  }

  .btn.raised {
    box-shadow: var(--shadow-md);
  }

  .btn.ghost {
    color: var(--btn-ink);
    box-shadow: none;
    background: none;
    border-color: #0000;
  }

  .btn.ghost:hover {
    background: color-mix(in srgb, var(--bg-mix, var(--ink)) 8%, transparent);
    filter: none;
  }

  .btn.link {
    color: var(--btn-ink);
    box-shadow: none;
    background: none;
    padding-left: 0;
    padding-right: 0;
  }

  .btn.link:hover {
    text-decoration: underline;
    filter: none;
  }

  .btn.loading {
    position: relative;
    color: #0000;
    pointer-events: none;
  }

  .btn.loading:after {
    content: "";
    position: absolute;
    border: 2px solid color-mix(in srgb, var(--on-fill, white) 30%, transparent);
    border-block-start-color: var(--on-fill, white);
    animation: fjs-spin var(--motion-spin) linear infinite;
    border-radius: 50%;
    block-size: 1em;
    inline-size: 1em;
    margin: auto;
    inset: 0;
  }

  .btn.loading:-webkit-any(.outlined, .link):after {
    border-color: color-mix(in srgb, var(--btn-ink) 30%, transparent);
    border-block-start-color: var(--btn-ink);
  }

  .btn.loading:-moz-any(.outlined, .link):after {
    border-color: color-mix(in srgb, var(--btn-ink) 30%, transparent);
    border-block-start-color: var(--btn-ink);
  }

  .btn.loading:is(.outlined, .link):after {
    border-color: color-mix(in srgb, var(--btn-ink) 30%, transparent);
    border-block-start-color: var(--btn-ink);
  }

  .btn.square {
    aspect-ratio: 1;
    gap: 0;
    padding: .45em;
  }
}

/* src/components/pills.css */
@layer components {
  .pill {
    padding: var(--space-3xs) var(--space-sm);
    border-radius: var(--pill-radius);
    font-size: var(--text-xs);
    --tone-fill: var(--bg-mix, var(--color-muted));
    background: var(--fill, var(--tone-fill));
    color: var(--on-fill, white);
    border: var(--border-width) solid transparent;
    line-height: 1rem;
    font-family: var(--font-primary);
    font-weight: var(--pill-font-weight);
    text-transform: var(--pill-text-transform);
    letter-spacing: var(--pill-letter-spacing);
  }

  .pill.removable {
    gap: var(--space-2xs);
    padding-right: 3px;
  }

  .pill-close {
    display: inline-flex;
    color: inherit;
    font: inherit;
    cursor: pointer;
    opacity: .7;
    transition: opacity var(--motion-fast), background var(--motion-fast);
    background: none;
    border: none;
    border-radius: 999px;
    justify-content: center;
    align-items:  center;
    width: 1.35em;
    height: 1.35em;
    padding: 0;
    line-height: 1;
  }

  .pill-close:hover {
    opacity: 1;
    background: color-mix(in srgb, currentColor 22%, transparent);
  }

  .pill-close:focus-visible {
    opacity: 1;
  }
}

/* src/components/badges.css */
@layer components {
  .badge {
    padding: var(--space-3xs) var(--space-sm);
    border-radius: var(--badge-radius, var(--btn-radius));
    font-size: var(--text-xs);
    --tone-fill: var(--bg-mix, var(--color-muted));
    background: var(--fill, var(--tone-fill));
    color: var(--on-fill, white);
    line-height: 1rem;
    font-family: var(--font-primary);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    letter-spacing: var(--badge-letter-spacing);
  }
}

/* src/components/cards.css */
@layer components {
  .card {
    padding: var(--space-3xl);
  }

  .card > .surface-header {
    margin: calc(var(--space-3xl) * -1) calc(var(--space-3xl) * -1) var(--space-2xl);
  }

  .card > .surface-footer {
    margin: var(--space-2xl) calc(var(--space-3xl) * -1) calc(var(--space-3xl) * -1);
  }
}

/* src/components/tiles.css */
@layer components {
  .tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--tile-min, 12rem), 1fr));
    gap: var(--space-2xl);
  }

  .tile {
    padding: var(--space-2xl) var(--space-3xl);
  }

  .tile-label {
    font-size: var(--text-sm);
    font-weight: var(--label-font-weight);
    color: var(--ink-mute);
    text-transform: var(--label-text-transform);
    letter-spacing: var(--label-letter-spacing);
  }

  .tile-value {
    font-size: var(--text-3xl);
    color: var(--surface-color);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.15;
  }

  .tile-delta {
    display: inline-flex;
    align-items:  center;
    gap: var(--space-2xs);
    font-size: var(--text-sm);
    color: var(--bg-mix, var(--ink-mute));
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }
}

/* src/components/avatar.css */
@layer components {
  .avatar {
    --avatar-size: 2.25rem;
    --tone-fill: var(--bg-mix, var(--color-muted));
    inline-size: var(--avatar-size);
    block-size: var(--avatar-size);
    border-radius: var(--avatar-radius, 999px);
    overflow: hidden;
    background: var(--fill, var(--tone-fill));
    color: var(--on-fill, white);
    font-family: var(--font-primary);
    font-size: calc(var(--avatar-size) * .4);
    user-select: none;
    flex-shrink: 0;
    font-weight: 600;
    line-height: 1;
  }

  img.avatar {
    object-fit: cover;
    object-position: center;
    background: var(--surface-sunken);
  }

  .avatars {
    display: flex;
    align-items:  center;
  }

  .avatars :where(.avatar) {
    box-shadow: 0 0 0 2px var(--avatar-ring, var(--surface));
  }

  .avatars > :-webkit-any(.avatar, :has( > .avatar)) + :-webkit-any(.avatar, :has( > .avatar)) {
    margin-inline-start: calc(var(--avatar-overlap, .625rem) * -1);
  }

  .avatars > :-moz-any(.avatar, :has( > .avatar)) + :-moz-any(.avatar, :has( > .avatar)) {
    margin-inline-start: calc(var(--avatar-overlap, .625rem) * -1);
  }

  .avatars > :is(.avatar, :has( > .avatar)) + :is(.avatar, :has( > .avatar)) {
    margin-inline-start: calc(var(--avatar-overlap, .625rem) * -1);
  }
}

/* src/components/feedback.css */
@layer components {
  .spinner {
    display: inline-block;
    border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
    animation: fjs-spin var(--motion-spin) linear infinite;
    vertical-align: -.125em;
    border-block-start-color: currentColor;
    border-radius: 50%;
    block-size: 1em;
    inline-size: 1em;
  }

  @keyframes fjs-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .progress {
    appearance: none;
    overflow: hidden;
    background: var(--surface-sunken);
    color: var(--bg-mix, var(--color-primary));
    border: none;
    border-radius: 999px;
    block-size: .5rem;
    inline-size: 100%;
  }

  .progress::-webkit-progress-bar {
    background: var(--surface-sunken);
    border-radius: 999px;
  }

  .progress::-webkit-progress-value {
    background: var(--bg-mix, var(--color-primary));
    transition: inline-size var(--motion-slow) var(--motion-ease);
    border-radius: 999px;
  }

  .progress::-moz-progress-bar {
    background: var(--bg-mix, var(--color-primary));
    border-radius: 999px;
  }

  .skeleton {
    background: linear-gradient(90deg, var(--surface-sunken) 25%, color-mix(in srgb, var(--ink) 8%, var(--surface-sunken)) 37%, var(--surface-sunken) 63%);
    animation: fjs-shimmer var(--motion-shimmer) var(--motion-ease) infinite;
    border-radius: var(--btn-radius);
    color: #0000;
    user-select: none;
    background-size: 400% 100%;
  }

  .skeleton.text {
    border-radius: 999px;
    block-size: .75em;
    margin-block-start: .3em;
    margin-block-end: .3em;
  }

  .skeleton.circle {
    aspect-ratio: 1;
    border-radius: 50%;
  }

  @keyframes fjs-shimmer {
    from {
      background-position: 100%;
    }

    to {
      background-position: 0;
    }
  }

  .empty {
    display: grid;
    text-align: center;
    align-content:  center;
    justify-items: center;
    gap: var(--space-sm);
    padding: var(--space-6xl) var(--space-4xl);
    color: var(--ink-soft);
  }

  .empty-icon {
    font-size: var(--icon-size);
    color: var(--ink-mute);
    line-height: 1;
  }

  .empty-title {
    font-size: var(--text-xl);
    color: var(--ink);
    margin: 0;
    font-weight: 600;
  }

  .empty-text {
    text-wrap: pretty;
    max-inline-size: 42ch;
    margin: 0;
    line-height: 1.55;
  }

  .empty-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-block-start: .5rem;
  }
}

/* src/components/alerts.css */
@layer components {
  .alert {
    display: flex;
    align-items:  flex-start;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-2xl);
  }

  .alert-icon {
    font-size: var(--text-lg);
    flex-shrink: 0;
    line-height: 1.4;
  }

  .alert-content {
    flex: 1;
    min-inline-size: 0;
    line-height: 1.5;
  }

  .alert-content > strong {
    display: block;
    margin-bottom: 2px;
  }

  .alert-content > p {
    text-wrap: pretty;
    margin: 0;
  }
}

/* src/components/overlays.css */
@layer components {
  dialog.dialog, dialog.drawer, [popover].popover, .toast {
    transition: opacity var(--overlay-time, var(--motion-enter)) var(--overlay-ease, var(--motion-ease-enter)), transform var(--overlay-time, var(--motion-enter)) var(--overlay-ease, var(--motion-ease-enter)), background var(--motion-fast), border-color var(--motion-fast), display var(--overlay-time, var(--motion-enter)) allow-discrete, overlay var(--overlay-time, var(--motion-enter)) allow-discrete;
  }

  dialog.dialog, dialog.drawer {
    opacity: 0;
    transform: var(--overlay-from, scale(.97));
  }

  dialog.dialog[open], dialog.drawer[open] {
    opacity: 1;
    transform: none;
  }

  @starting-style {
    dialog.dialog[open], dialog.drawer[open] {
      opacity: 0;
      transform: var(--overlay-from, scale(.97));
    }
  }

  dialog.dialog::backdrop {
    opacity: 0;
    transition: opacity var(--overlay-time, var(--motion-enter)) var(--overlay-ease, var(--motion-ease-enter)), display var(--overlay-time, var(--motion-enter)) allow-discrete, overlay var(--overlay-time, var(--motion-enter)) allow-discrete;
  }

  dialog.drawer::backdrop {
    opacity: 0;
    transition: opacity var(--overlay-time, var(--motion-enter)) var(--overlay-ease, var(--motion-ease-enter)), display var(--overlay-time, var(--motion-enter)) allow-discrete, overlay var(--overlay-time, var(--motion-enter)) allow-discrete;
  }

  dialog.dialog[open]::backdrop {
    opacity: 1;
  }

  dialog.drawer[open]::backdrop {
    opacity: 1;
  }

  @starting-style {
    dialog.dialog[open]::backdrop, dialog.drawer[open]::backdrop {
      opacity: 0;
    }
  }

  [popover].popover {
    opacity: 0;
    transform: var(--overlay-from, translateY(-4px));
  }

  [popover].popover:popover-open {
    opacity: 1;
    transform: none;
  }

  @starting-style {
    [popover].popover:popover-open {
      opacity: 0;
      transform: var(--overlay-from, translateY(-4px));
    }
  }

  .toast {
    opacity: 1;
    transform: none;
  }

  @starting-style {
    .toast {
      opacity: 0;
      transform: var(--overlay-from, translateY(8px));
    }
  }

  .toast[hidden] {
    display: none;
    opacity: 0;
    transform: var(--overlay-from, translateY(8px));
  }
}

/* src/components/toasts.css */
@layer components {
  .toast {
    position: fixed;
    padding: var(--space-lg) var(--space-2xl);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    --overlay-from: translateY(8px);
    min-width: 240px;
    max-width: 360px;
    bottom: 1rem;
    right: 1rem;
  }

  .toast-stack {
    position: fixed;
    display: flex;
    gap: var(--space-sm);
    z-index: 100;
    pointer-events: none;
    flex-direction: column-reverse;
    bottom: 1rem;
    right: 1rem;
  }

  .toast-stack > .toast {
    position: static;
    pointer-events: auto;
  }
}

/* src/components/popovers.css */
@layer components {
  .popover-anchor {
    position: relative;
    display: inline-flex;
    align-items:  center;
  }

  .popover-anchor > .popover:not([popover]) {
    top: calc(100% + var(--space-2xs));
  }

  .popover-anchor > .popover:not([popover]):not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: 0;
  }

  .popover-anchor > .popover:not([popover]):not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: 0;
  }

  .popover-anchor > .popover:not([popover]):not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: 0;
  }

  .popover-anchor > .popover:not([popover]):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 0;
  }

  .popover-anchor > .popover:not([popover]):-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 0;
  }

  .popover-anchor > .popover:not([popover]):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 0;
  }

  .popover-anchor > .popover.align-end:not([popover]):not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: auto;
    right: 0;
  }

  .popover-anchor > .popover.align-end:not([popover]):not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: auto;
    right: 0;
  }

  .popover-anchor > .popover.align-end:not([popover]):not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: auto;
    right: 0;
  }

  .popover-anchor > .popover.align-end:not([popover]):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
    right: auto;
  }

  .popover-anchor > .popover.align-end:not([popover]):-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
    right: auto;
  }

  .popover-anchor > .popover.align-end:not([popover]):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
    right: auto;
  }

  .popover {
    position: absolute;
    padding: var(--space-md) var(--space-lg);
    box-shadow: var(--shadow-md);
    font-size: var(--text-sm);
    z-index: 50;
    --overlay-from: translateY(-4px);
    max-width: 280px;
  }

  .popover:not([popover]) {
    animation: popover-in var(--motion-fast) var(--motion-ease-out);
  }

  [popover].popover {
    border: var(--border-width) solid var(--surface-border);
    inset: unset;
    position: fixed;
    margin: 0;
  }

  [popover].popover::backdrop {
    background: none;
  }

  @keyframes popover-in {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* src/components/tooltips.css */
@layer components {
  .tooltip-anchor {
    position: relative;
    display: inline-flex;
    align-items:  center;
  }

  .tooltip {
    --tone-fill: var(--bg-mix, var(--color-secondary));
    position: absolute;
    z-index: 60;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--btn-radius);
    background: var(--fill, var(--tone-fill));
    color: var(--on-fill, white);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-fast) var(--motion-ease);
    line-height: 1.35;
    bottom: calc(100% + .5rem);
    translate: -50%;
  }

  .tooltip:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: 50%;
  }

  .tooltip:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: 50%;
  }

  .tooltip:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: 50%;
  }

  .tooltip:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 50%;
  }

  .tooltip:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 50%;
  }

  .tooltip:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 50%;
  }

  .tooltip:after {
    content: "";
    position: absolute;
    border: 4px solid #0000;
    border-block-start-color: var(--fill, var(--tone-fill));
    top: 100%;
    translate: -50%;
  }

  .tooltip:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: 50%;
  }

  .tooltip:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: 50%;
  }

  .tooltip:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: 50%;
  }

  .tooltip:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: 50%;
  }

  .tooltip:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: 50%;
  }

  .tooltip:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: 50%;
  }

  .tooltip-anchor:hover > .tooltip, .tooltip-anchor:focus-within > .tooltip {
    opacity: 1;
  }

  .tooltip[hidden] {
    display: none;
  }

  .tooltip.bottom {
    top: calc(100% + .5rem);
    bottom: auto;
  }

  .tooltip.bottom:after {
    border-block-start-color: #0000;
    border-block-end-color: var(--fill, var(--tone-fill));
    top: auto;
    bottom: 100%;
  }

  .tooltip.start, .tooltip.end {
    top: 50%;
    bottom: auto;
  }

  .tooltip.start:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: auto;
  }

  .tooltip.start:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: auto;
  }

  .tooltip.start:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: auto;
  }

  .tooltip.end:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: auto;
  }

  .tooltip.end:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: auto;
  }

  .tooltip.end:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: auto;
  }

  .tooltip.start:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: auto;
  }

  .tooltip.start:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: auto;
  }

  .tooltip.start:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: auto;
  }

  .tooltip.end:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: auto;
  }

  .tooltip.end:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: auto;
  }

  .tooltip.end:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: auto;
  }

  .tooltip.start {
    translate: 0 -50%;
  }

  .tooltip.start:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    right: calc(100% + .5rem);
  }

  .tooltip.start:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    right: calc(100% + .5rem);
  }

  .tooltip.start:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    right: calc(100% + .5rem);
  }

  .tooltip.start:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: calc(100% + .5rem);
  }

  .tooltip.start:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: calc(100% + .5rem);
  }

  .tooltip.start:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: calc(100% + .5rem);
  }

  .tooltip.end {
    translate: 0 -50%;
  }

  .tooltip.end:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: calc(100% + .5rem);
  }

  .tooltip.end:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: calc(100% + .5rem);
  }

  .tooltip.end:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: calc(100% + .5rem);
  }

  .tooltip.end:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: calc(100% + .5rem);
  }

  .tooltip.end:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: calc(100% + .5rem);
  }

  .tooltip.end:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: calc(100% + .5rem);
  }

  .tooltip.start:after, .tooltip.end:after {
    border-block-start-color: #0000;
    top: 50%;
  }

  .tooltip.start:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: auto;
  }

  .tooltip.start:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: auto;
  }

  .tooltip.start:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: auto;
  }

  .tooltip.end:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: auto;
  }

  .tooltip.end:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: auto;
  }

  .tooltip.end:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: auto;
  }

  .tooltip.start:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: auto;
  }

  .tooltip.start:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: auto;
  }

  .tooltip.start:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: auto;
  }

  .tooltip.end:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: auto;
  }

  .tooltip.end:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: auto;
  }

  .tooltip.end:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: auto;
  }

  .tooltip.start:after {
    border-inline-start-color: var(--fill, var(--tone-fill));
    translate: 0 -50%;
  }

  .tooltip.start:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: 100%;
  }

  .tooltip.start:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: 100%;
  }

  .tooltip.start:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: 100%;
  }

  .tooltip.start:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: 100%;
  }

  .tooltip.start:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: 100%;
  }

  .tooltip.start:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: 100%;
  }

  .tooltip.end:after {
    border-inline-end-color: var(--fill, var(--tone-fill));
    translate: 0 -50%;
  }

  .tooltip.end:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    right: 100%;
  }

  .tooltip.end:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    right: 100%;
  }

  .tooltip.end:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    right: 100%;
  }

  .tooltip.end:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    left: 100%;
  }

  .tooltip.end:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    left: 100%;
  }

  .tooltip.end:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    left: 100%;
  }

  .tooltip.wrap {
    white-space: normal;
    text-align: center;
    max-inline-size: 16rem;
  }
}

/* src/components/drawers.css */
@layer components {
  .drawer {
    position: fixed;
    --surface-ground: var(--dialog-bg, var(--surface));
    box-shadow: var(--shadow-lg);
    border-radius: 0;
    width: 320px;
    max-width: 90vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: 0;
    inset: 0;
  }

  .drawer[open] {
    display: flex;
    flex-direction: column;
  }

  .drawer::backdrop {
    background: var(--scrim);
    backdrop-filter: blur(2px);
  }

  .drawer.from-right {
    --overlay-from: translateX(100%);
    margin-left: auto;
  }

  .drawer.from-left {
    --overlay-from: translateX(-100%);
    margin-right: auto;
  }

  .drawer.from-top, .drawer.from-bottom {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 80vh;
  }

  .drawer.from-top {
    --overlay-from: translateY(-100%);
    margin-bottom: auto;
  }

  .drawer.from-bottom {
    --overlay-from: translateY(100%);
    margin-top: auto;
  }

  .drawer {
    --overlay-from: translateX(100%);
  }
}

/* src/components/form-core.css */
@layer components {
  .field {
    --field-bg: var(--surface);
    --field-color: var(--ink);
    --field-border: var(--bg-mix, var(--rule-strong));
    display: block;
    inline-size: var(--field-inline-size, 100%);
    padding: var(--control-padding-block) var(--space-lg);
    font-size: var(--text-md);
    background: var(--field-bg);
    color: var(--field-color);
    border: var(--field-border-width, var(--border-width)) solid var(--field-border);
    border-radius: var(--field-radius);
    line-height: 1.25rem;
    font-family: var(--font-primary);
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
  }

  .field::placeholder {
    color: var(--ink-mute);
  }

  .field:focus {
    border-color: var(--bg-mix, var(--ring, var(--color-primary)));
  }

  .field:disabled {
    background: color-mix(in srgb, var(--ink) 4%, var(--surface));
    color: var(--ink-mute);
    cursor: not-allowed;
  }

  textarea.field {
    resize: vertical;
    font-family: var(--font-primary);
    min-height: 80px;
  }

  select.field {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236b7280' stroke-width='1.5'><polyline points='3,5 6,8 9,5'/></svg>");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 12px;
    padding-right: 36px;
  }

  .field-group {
    display: flex;
    gap: var(--space-xs);
    flex-direction: column;
  }

  .field-group > label {
    font-size: var(--text-sm);
    color: var(--ink-soft);
    font-weight: 500;
  }

  .field-hint {
    font-size: var(--text-xs);
    color: var(--bg-mix, var(--ink-mute));
  }

  .field-check {
    display: inline-flex;
    align-items:  center;
    gap: var(--space-sm);
    cursor: pointer;
    font-size: var(--text-md);
    color: var(--ink);
  }

  .field-check {
    --check-accent: var(--bg-mix, var(--color-primary));
  }

  .field-check input:not(.switch) {
    cursor: pointer;
    accent-color: var(--bg-mix, var(--check-accent));
    width: 16px;
    height: 16px;
    margin: 0;
  }

  .field-check .switch {
    margin: 0;
  }

  .field-check:has(input:disabled) {
    opacity: .55;
    cursor: not-allowed;
  }

  .field:user-invalid {
    --bg-mix: var(--color-danger);
  }

  .switch {
    appearance: none;
    cursor: pointer;
    background-color: var(--rule-strong);
    transition: background-color var(--motion-base) var(--motion-ease), background-position var(--motion-base) var(--motion-ease);
    background-image: radial-gradient(circle, #fff 42%, #0000 44%);
    background-position: .125rem;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    border-radius: 999px;
    flex-shrink: 0;
    block-size: 1.25rem;
    inline-size: 2.25rem;
  }

  .switch:checked {
    background-color: var(--bg-mix, var(--check-accent, var(--color-primary)));
    background-position: calc(100% - .125rem);
  }

  .switch:disabled {
    opacity: .5;
    cursor: not-allowed;
  }

  .field-row {
    display: flex;
    align-items: stretch;
  }

  .field-row > * {
    border-radius: 0;
  }

  .field-row > :first-child:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    border-top-left-radius: var(--field-radius);
    border-bottom-left-radius: var(--field-radius);
  }

  .field-row > :first-child:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    border-top-left-radius: var(--field-radius);
    border-bottom-left-radius: var(--field-radius);
  }

  .field-row > :first-child:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    border-top-left-radius: var(--field-radius);
    border-bottom-left-radius: var(--field-radius);
  }

  .field-row > :first-child:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-top-right-radius: var(--field-radius);
    border-bottom-right-radius: var(--field-radius);
  }

  .field-row > :first-child:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-top-right-radius: var(--field-radius);
    border-bottom-right-radius: var(--field-radius);
  }

  .field-row > :first-child:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-top-right-radius: var(--field-radius);
    border-bottom-right-radius: var(--field-radius);
  }

  .field-row > :last-child:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    border-top-right-radius: var(--field-radius);
    border-bottom-right-radius: var(--field-radius);
  }

  .field-row > :last-child:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    border-top-right-radius: var(--field-radius);
    border-bottom-right-radius: var(--field-radius);
  }

  .field-row > :last-child:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    border-top-right-radius: var(--field-radius);
    border-bottom-right-radius: var(--field-radius);
  }

  .field-row > :last-child:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-top-left-radius: var(--field-radius);
    border-bottom-left-radius: var(--field-radius);
  }

  .field-row > :last-child:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-top-left-radius: var(--field-radius);
    border-bottom-left-radius: var(--field-radius);
  }

  .field-row > :last-child:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-top-left-radius: var(--field-radius);
    border-bottom-left-radius: var(--field-radius);
  }

  .field-row > * + * {
    margin-inline-start: -1px;
  }

  .field-row > .field {
    flex: 1;
    min-inline-size: 0;
  }

  .field-row > .field:focus {
    position: relative;
    z-index: 1;
  }

  .field-row > .btn:focus-visible {
    position: relative;
    z-index: 1;
  }

  .field-addon {
    display: inline-flex;
    padding-inline: var(--space-lg);
    background: var(--surface-sunken);
    border: var(--border-width) solid var(--rule-strong);
    color: var(--ink-soft);
    font-family: var(--font-primary);
    font-size: var(--text-md);
    white-space: nowrap;
    align-items:  center;
  }
}

/* src/components/tables.css */
@layer components {
  .table {
    --table-bg: var(--surface);
    --table-border: var(--rule);
    --table-head-bg: var(--surface-sunken);
    background: var(--table-bg);
    border: var(--table-border-width, var(--border-width)) solid var(--table-border);
    border-radius: var(--card-radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-family: var(--font-primary);
    font-size: var(--text-md);
    color: var(--ink);
    width: 100%;
  }

  .table th {
    background: var(--table-head-bg);
    color: var(--ink-mute);
    font-size: var(--text-2xs);
    font-weight: var(--label-font-weight);
    text-transform: var(--label-text-transform);
    letter-spacing: var(--label-letter-spacing);
    text-align: left;
    padding: var(--space-md) var(--space-xl);
  }

  .table td {
    padding: var(--space-md) var(--space-xl);
    text-align: left;
  }

  .table tbody tr + tr td {
    border-top: var(--table-border-width, var(--border-width)) solid var(--table-border);
  }

  .table tbody tr {
    --row-base: var(--table-bg);
  }

  .table.striped tbody tr:nth-child(odd) {
    --row-base: var(--surface-sunken);
  }

  .table.hover tbody tr:hover {
    --row-base: color-mix(in srgb, var(--ring, var(--color-primary)) 5%, var(--table-bg));
  }

  .table.compact th, .table.compact td {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-sm);
  }

  .table tbody tr {
    --row-tint: color-mix(in srgb, var(--bg-mix) 8%, var(--row-base));
  }

  .table tbody td {
    background: var(--row-tint, var(--row-base));
  }

  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
  }

  .table-wrap > .table {
    min-width: max-content;
  }

  .table-actions {
    display: flex;
    gap: var(--space-xs);
    justify-content: flex-end;
  }
}

/* src/components/dialogs.css */
@layer components {
  .dialog {
    box-shadow: var(--shadow-lg);
    --overlay-from: scale(.97);
    width: 90%;
    max-width: 480px;
    padding: 0;
  }

  .dialog::backdrop {
    background: var(--scrim);
    backdrop-filter: blur(2px);
  }

  .dialog-close {
    font-size: var(--text-2xl);
    color: var(--ink-mute);
    cursor: pointer;
    padding: var(--space-3xs) var(--space-xs);
    background: none;
    border: none;
    border-radius: 4px;
    line-height: 1;
  }

  .dialog-close:hover {
    color: var(--ink);
    background: color-mix(in srgb, var(--ink) 8%, transparent);
  }

  .dialog {
    --surface-tint-bg: initial;
    --surface-tint-border: initial;
    --surface-tint-color: initial;
    --surface-ground: var(--dialog-bg, var(--surface));
    --dialog-header-bg: color-mix(in srgb, var(--bg-mix) 10%, var(--surface));
    --dialog-header-color: color-mix(in srgb, var(--bg-mix) 55%, var(--ink));
    --dialog-header-border: color-mix(in srgb, var(--bg-mix) 30%, var(--surface));
  }

  .dialog > .surface-header {
    background: var(--dialog-header-bg, transparent);
    color: var(--dialog-header-color, var(--surface-color));
    border-bottom-color: var(--dialog-header-border, var(--surface-border));
  }
}

/* src/patterns/bars.css */
@layer patterns {
  :where(.bar, .toolbar) {
    display: flex;
    align-items:  center;
    gap: var(--space-lg);
    padding: var(--space-sm) 0;
  }

  .bar {
    justify-content: space-between;
  }

  .toolbar, .bar.start, .toolbar.start {
    justify-content: flex-start;
  }

  .bar.center, .toolbar.center {
    justify-content: center;
  }

  .bar.end, .toolbar.end {
    justify-content: flex-end;
  }

  .bar.bordered, .toolbar.bordered {
    padding: var(--space-sm) var(--space-lg);
    border-bottom: var(--border-width) solid var(--rule);
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items:  center;
    gap: var(--space-sm);
    margin-bottom: .5rem;
  }

  hr, .divider {
    background: var(--rule);
    border: 0;
    block-size: 1px;
    inline-size: 100%;
    margin-block-start: 1.5rem;
    margin-block-end: 1.5rem;
  }

  .divider-label {
    display: flex;
    align-items:  center;
    gap: var(--space-lg);
    color: var(--ink-mute);
    font-size: var(--text-sm);
    margin: .5rem 0;
  }

  .divider-label:before, .divider-label:after {
    content: "";
    background: var(--rule);
    flex: 1;
    height: 1px;
  }

  .kicker, .navlist-label {
    font-size: var(--text-2xs);
    font-weight: var(--label-font-weight);
    text-transform: var(--label-text-transform);
    letter-spacing: var(--label-letter-spacing);
    color: var(--ink-mute);
  }
}

/* src/patterns/lists.css */
@layer patterns {
  .items {
    display: flex;
    gap: var(--space-2xs);
    list-style: none;
    flex-direction: column;
    margin: 0;
    padding: 0;
  }

  .item {
    display: flex;
    align-items:  center;
    gap: var(--space-sm);
  }

  .items :-webkit-any(button, a).item {
    font: inherit;
    color: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    inline-size: 100%;
  }

  .items :-moz-any(button, a).item {
    font: inherit;
    color: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    inline-size: 100%;
  }

  .items :is(button, a).item {
    font: inherit;
    color: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    inline-size: 100%;
  }

  .items :-webkit-any(button, a).item:disabled {
    opacity: .4;
    cursor: not-allowed;
  }

  .items :-moz-any(button, a).item:disabled {
    opacity: .4;
    cursor: not-allowed;
  }

  .items :is(button, a).item:disabled {
    opacity: .4;
    cursor: not-allowed;
  }

  .items :-webkit-any(button, a).item[aria-disabled="true"] {
    opacity: .4;
    cursor: not-allowed;
  }

  .items :-moz-any(button, a).item[aria-disabled="true"] {
    opacity: .4;
    cursor: not-allowed;
  }

  .items :is(button, a).item[aria-disabled="true"] {
    opacity: .4;
    cursor: not-allowed;
  }

  .items.menu .item {
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--btn-radius);
    cursor: pointer;
  }

  .items.menu .item:hover {
    background: var(--surface-sunken);
  }

  .item-text {
    display: flex;
    gap: var(--space-3xs);
    flex-direction: column;
    flex: 1;
    min-inline-size: 0;
  }

  .item-title {
    color: var(--ink);
  }

  .item-sub {
    font-size: var(--text-xs);
    color: var(--ink-mute);
  }

  .item:has(.item-lead) {
    align-items: baseline;
  }

  .item-lead {
    inline-size: var(--item-lead-size, 7ch);
    font-size: var(--text-xs);
    color: var(--ink-mute);
    flex: none;
  }

  .rows {
    display: flex;
    list-style: none;
    flex-direction: column;
    margin: 0;
    padding: 0;
  }

  .list-row {
    display: flex;
    justify-content: space-between;
    align-items:  center;
    gap: var(--space-lg);
    padding: var(--space-sm) var(--space-2xs);
  }

  .rows.divided .list-row + .list-row {
    border-top: var(--border-width) solid var(--rule);
  }

  .rows.hover .list-row:hover {
    background: var(--surface-sunken);
    border-radius: var(--btn-radius);
  }

  .row-actions {
    display: flex;
    align-items:  center;
    gap: var(--space-2xs);
    flex-shrink: 0;
  }
}

/* src/patterns/feed.css */
@layer patterns {
  .feed {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .feed > li {
    padding-bottom: var(--space-3xl);
  }

  .feed > li:last-child {
    padding-bottom: 0;
  }

  .feed-item {
    display: grid;
    grid-template-columns: .625rem 1fr;
    gap: var(--space-lg);
    position: relative;
  }

  .feed-dot {
    background: var(--bg-mix, var(--color-muted));
    border-radius: 9999px;
    flex-shrink: 0;
    width: .625rem;
    height: .625rem;
    margin-top: .3rem;
  }

  .feed > li:not(:last-child) .feed-item:after {
    content: "";
    position: absolute;
    background: var(--rule);
    width: 1px;
    top: .95rem;
    bottom: -1.25rem;
    left: .3125rem;
    transform: translateX(-50%);
  }

  .feed-content {
    min-width: 0;
    line-height: 1.5;
  }
}

/* src/patterns/disclosure.css */
@layer patterns {
  .disclosure {
    border: var(--border-width) solid var(--rule);
    border-radius: var(--card-radius);
    overflow: hidden;
  }

  .disclosure-summary {
    display: flex;
    justify-content: space-between;
    align-items:  center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    cursor: pointer;
    user-select: none;
    list-style: none;
    font-weight: 600;
  }

  .disclosure-summary::-webkit-details-marker {
    display: none;
  }

  .disclosure-summary:hover {
    background: var(--surface-sunken);
  }

  .disclosure::details-content {
    overflow: hidden;
    transition: block-size var(--overlay-time, var(--motion-enter)) var(--overlay-ease, var(--motion-ease-enter)), content-visibility var(--overlay-time, var(--motion-enter)) allow-discrete;
    block-size: 0;
  }

  .disclosure[open]::details-content {
    block-size: auto;
  }

  .disclosure-summary:after {
    content: "";
    border-right: 2px solid var(--ink-mute);
    border-bottom: 2px solid var(--ink-mute);
    transition: transform var(--motion-base) var(--motion-ease);
    flex-shrink: 0;
    width: .45rem;
    height: .45rem;
    transform: rotate(-45deg);
  }

  .disclosure[open] .disclosure-summary:after {
    transform: rotate(45deg);
  }

  .disclosure-body {
    padding: var(--space-xl);
    border-top: var(--border-width) solid var(--rule);
  }
}

/* src/patterns/facts.css */
@layer patterns {
  .facts {
    --fact-label-max: 40%;
    display: grid;
    grid-template-columns: fit-content(var(--fact-label-max)) minmax(0, 1fr);
    gap: var(--space-md) var(--space-3xl);
    font-family: var(--font-primary);
    font-size: var(--text-md);
    align-items: baseline;
    margin: 0;
    line-height: 1.5;
  }

  .facts > dt {
    color: var(--ink-mute);
    overflow-wrap: anywhere;
    font-weight: 500;
  }

  .facts > dd {
    color: var(--ink);
    overflow-wrap: anywhere;
    margin: 0;
  }

  .facts.divided {
    column-gap: 0;
  }

  .facts.divided > dt {
    padding-inline-end: var(--space-3xl);
  }

  .facts.divided > dt, .facts.divided > dd {
    border-block-start: var(--border-width) solid var(--rule);
    padding-block-start: var(--space-md);
  }

  .facts.divided > :nth-child(-n+2) {
    border-block-start: none;
    padding-block-start: 0;
  }

  @media (max-width: 639px) {
    .facts {
      grid-template-columns: 1fr;
      gap: 0;
    }

    .facts > dt {
      padding-block-start: var(--space-md);
    }

    .facts > dd {
      padding-block-end: var(--space-3xs);
    }

    .facts.divided > dd {
      border-block-start: none;
      padding-block-start: 0;
    }

    .facts.divided > :nth-child(2) {
      padding-block-start: 0;
    }
  }
}

/* src/patterns/steps.css */
@layer patterns {
  .steps {
    --step-accent: var(--bg-mix, var(--color-primary));
    --step-marker-size: 1.75rem;
    display: flex;
    align-items:  flex-start;
    gap: var(--space-sm);
    list-style: none;
    counter-reset: fjs-step;
    font-family: var(--font-primary);
    margin: 0;
    padding: 0;
  }

  .step {
    position: relative;
    display: flex;
    align-items:  center;
    gap: var(--space-xs);
    text-align: center;
    color: var(--ink-mute);
    flex-direction: column;
    flex: 1;
    min-inline-size: 0;
  }

  .step + .step:before {
    content: "";
    position: absolute;
    z-index: 0;
    background: var(--rule);
    block-size: 2px;
    inline-size: 100%;
    top: calc(var(--step-marker-size) / 2);
    translate: 0 -1px;
  }

  .step + .step:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    right: 50%;
  }

  .step + .step:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    right: 50%;
  }

  .step + .step:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    right: 50%;
  }

  .step + .step:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    left: 50%;
  }

  .step + .step:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    left: 50%;
  }

  .step + .step:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    left: 50%;
  }

  .step.complete:before {
    background: var(--step-accent);
  }

  .step-marker {
    --tone-fill: var(--step-accent);
    position: relative;
    z-index: 1;
    inline-size: var(--step-marker-size);
    block-size: var(--step-marker-size);
    background: var(--surface);
    border: 2px solid var(--rule);
    color: var(--ink-mute);
    font-size: var(--text-sm);
    transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
    border-radius: 999px;
    flex-shrink: 0;
    font-weight: 600;
    line-height: 1;
  }

  .step-marker {
    counter-increment: fjs-step;
  }

  .step-marker:before {
    content: counter(fjs-step);
  }

  .step-marker:not(:empty):before {
    content: none;
  }

  .step-label {
    font-size: var(--text-md);
    font-weight: 500;
    line-height: 1.3;
  }

  .step-hint {
    font-size: var(--text-xs);
    color: var(--ink-mute);
    line-height: 1.3;
  }

  .step.complete {
    color: var(--ink-soft);
  }

  .step.complete .step-marker {
    background: var(--fill);
    border-color: var(--fill);
    color: var(--on-fill);
  }

  .step[aria-current="step"] {
    color: var(--ink);
  }

  .step[aria-current="step"] .step-label {
    font-weight: 600;
  }

  .step[aria-current="step"] .step-marker {
    border-color: var(--step-accent);
    color: var(--ink);
    background: var(--surface);
  }

  .steps.vertical {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .steps.vertical .step {
    align-items:  flex-start;
    gap: var(--space-lg);
    text-align: start;
    padding-block: 0 var(--space-3xl);
    flex-direction: row;
  }

  .steps.vertical .step:last-child {
    padding-block-end: 0;
  }

  .steps.vertical .step + .step:before {
    content: none;
  }

  .steps.vertical .step:not(:last-child):after {
    content: "";
    position: absolute;
    z-index: 0;
    background: var(--rule);
    inline-size: 2px;
    top: calc(var(--step-marker-size) / 2);
    bottom: 0;
    translate: -1px;
  }

  .steps.vertical .step:not(:last-child):not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: calc(var(--step-marker-size) / 2);
  }

  .steps.vertical .step:not(:last-child):not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: calc(var(--step-marker-size) / 2);
  }

  .steps.vertical .step:not(:last-child):not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: calc(var(--step-marker-size) / 2);
  }

  .steps.vertical .step:not(:last-child):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: calc(var(--step-marker-size) / 2);
  }

  .steps.vertical .step:not(:last-child):-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: calc(var(--step-marker-size) / 2);
  }

  .steps.vertical .step:not(:last-child):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: calc(var(--step-marker-size) / 2);
  }

  .steps.vertical .step.complete:after {
    background: var(--step-accent);
  }

  .steps.vertical .step {
    flex-wrap: wrap;
  }

  .steps.vertical .step-label {
    flex: 1;
    padding-block-start: .3125rem;
  }

  .steps.vertical .step-hint {
    flex-basis: 100%;
    margin-inline-start: calc(var(--step-marker-size)  + .75rem);
    padding-block-start: var(--space-3xs);
  }
}

/* src/patterns/tabs.css */
@layer patterns {
  .tabs {
    display: block;
  }

  .tablist {
    --tab-accent: var(--bg-mix, var(--color-primary));
    --tab-indicator-width: calc(var(--border-width)  + 1px);
    display: flex;
    gap: var(--space-2xs);
    border-block-end: var(--border-width) solid var(--rule);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .tab {
    display: inline-flex;
    align-items:  center;
    gap: var(--space-xs);
    font: inherit;
    cursor: pointer;
    padding: var(--space-sm) var(--space-xl);
    font-size: var(--text-md);
    color: var(--ink-soft);
    white-space: nowrap;
    border: none;
    border-block-end: var(--tab-indicator-width) solid transparent;
    transition: color var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast);
    background: none;
    flex-shrink: 0;
    margin-block-end: calc(var(--border-width) * -1);
    font-weight: 600;
  }

  .tab:hover {
    color: var(--ink);
  }

  .tab:focus-visible {
    border-radius: var(--btn-radius);
  }

  .tab[aria-selected="true"] {
    color: var(--tab-accent);
    border-block-end-color: var(--tab-accent);
  }

  .tab:disabled, .tab[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
  }

  .tablist.stretch .tab {
    flex: 1;
    justify-content: center;
  }

  .tablist.pills {
    gap: var(--space-xs);
    border-block-end: none;
  }

  .tablist.pills .tab {
    border-radius: var(--btn-radius);
    padding: var(--space-xs) var(--space-lg);
    border-block-end: none;
    margin-block-end: 0;
  }

  .tablist.pills .tab:hover:not([aria-selected="true"]) {
    background: var(--surface-sunken);
  }

  .tablist.pills .tab[aria-selected="true"] {
    background: color-mix(in srgb, var(--tab-accent) 12%, var(--surface));
    color: var(--tab-accent);
  }

  .tabs > .view {
    padding-block-start: var(--space-2xl);
  }

  .tabs.vertical {
    display: flex;
    align-items:  flex-start;
    gap: var(--space-4xl);
  }

  .tabs.vertical .tablist {
    align-items: stretch;
    gap: var(--space-3xs);
    border-block-end: none;
    border-inline-end: var(--border-width) solid var(--rule);
    overflow: visible;
    flex-direction: column;
    flex-shrink: 0;
    min-inline-size: 11rem;
  }

  .tabs.vertical .tab {
    border-block-end: none;
    border-inline-end: var(--tab-indicator-width) solid transparent;
    text-align: start;
    white-space: normal;
    justify-content: flex-start;
    margin-block-end: 0;
    margin-inline-end: calc(var(--border-width) * -1);
  }

  .tabs.vertical .tab[aria-selected="true"] {
    border-inline-end-color: var(--tab-accent);
  }

  .tabs.vertical > .view {
    flex: 1;
    min-inline-size: 0;
    padding-block-start: 0;
  }

  .tabs.vertical .tablist.pills {
    border-inline-end: none;
  }

  .tabs.vertical .tablist.pills .tab {
    border-inline-end: none;
    margin-inline-end: 0;
  }
}

/* src/patterns/nav.css */
@layer patterns {
  .breadcrumb > ol {
    display: flex;
    align-items:  center;
    gap: var(--space-xs);
    list-style: none;
    font-size: var(--text-md);
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
  }

  .breadcrumb li {
    display: inline-flex;
    align-items:  center;
    gap: var(--space-xs);
  }

  .breadcrumb li + li:before {
    content: var(--breadcrumb-separator, "/") / "";
    color: var(--ink-mute);
  }

  .breadcrumb [aria-current="page"] {
    color: var(--ink);
    text-decoration: none;
    cursor: default;
    font-weight: 600;
  }

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

  .pagination-link {
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--btn-radius);
    font-size: var(--text-md);
    color: var(--ink-soft);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--motion-fast), color var(--motion-fast);
    min-inline-size: 2rem;
    font-weight: 600;
  }

  .pagination-link:hover:not([aria-current="page"]):not([aria-disabled="true"]) {
    background: var(--surface-sunken);
    color: var(--ink);
  }

  .pagination-link[aria-current="page"] {
    --tone-fill: var(--bg-mix, var(--color-primary));
    background: var(--fill, var(--tone-fill));
    color: var(--on-fill, white);
    cursor: default;
  }

  .pagination-link[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
  }

  .pagination-gap {
    padding: var(--space-xs) var(--space-2xs);
    color: var(--ink-mute);
    user-select: none;
  }

  .navlist {
    display: flex;
    gap: var(--space-3xs);
    list-style: none;
    flex-direction: column;
    margin: 0;
    padding: 0;
  }

  .navlink {
    display: flex;
    align-items:  center;
    gap: var(--space-sm);
    padding: .4375rem var(--space-md);
    border-radius: var(--btn-radius);
    font-size: var(--text-md);
    color: var(--ink-soft);
    text-decoration: none;
    transition: background var(--motion-fast), color var(--motion-fast);
    font-weight: 500;
  }

  .navlink:hover {
    background: var(--surface-sunken);
    color: var(--ink);
  }

  .navlink[aria-current="page"] {
    background: color-mix(in srgb, var(--bg-mix, var(--color-primary)) 12%, var(--surface));
    color: var(--bg-mix, var(--color-primary));
    font-weight: 600;
  }

  .navlink > .pill, .navlink > .badge {
    margin-inline-start: auto;
  }

  .navlist-label {
    padding: var(--space-lg) var(--space-md) var(--space-2xs);
  }
}

/* src/patterns/prose.css */
@layer patterns {
  .prose {
    color: var(--ink-soft);
    max-inline-size: var(--measure, 64ch);
  }

  :where(.prose) :where(p, ul, ol, blockquote, pre, figure, h1, h2, h3, h4, h5, h6) {
    margin-block-start: 0;
    margin-block-end: 0;
  }

  :where(.prose) :where(ul, ol) {
    padding-inline-start: var(--space-2xl);
  }

  :where(.prose) :where(li + li) {
    margin-block-start: var(--space-xs);
  }
}

/* src/utilities.css */
@layer utilities {
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
  }

  .text-md {
    font-size: var(--text-md);
    line-height: var(--leading-body);
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--leading-relaxed);
  }

  .gap-0 {
    gap: 0;
  }

  .gap-3xs {
    gap: var(--space-3xs);
  }

  .gap-2xs {
    gap: var(--space-2xs);
  }

  .gap-xs {
    gap: var(--space-xs);
  }

  .gap-sm {
    gap: var(--space-sm);
  }

  .gap-md {
    gap: var(--space-md);
  }

  .gap-lg {
    gap: var(--space-lg);
  }

  .gap-xl {
    gap: var(--space-xl);
  }

  .gap-2xl {
    gap: var(--space-2xl);
  }

  .gap-3xl {
    gap: var(--space-3xl);
  }

  .gap-4xl {
    gap: var(--space-4xl);
  }

  .gap-5xl {
    gap: var(--space-5xl);
  }

  .gap-6xl {
    gap: var(--space-6xl);
  }

  .clamp-1, .clamp-2, .clamp-3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
  }

  .clamp-1 {
    -webkit-line-clamp: 1;
  }

  .clamp-2 {
    -webkit-line-clamp: 2;
  }

  .clamp-3 {
    -webkit-line-clamp: 3;
  }

  @supports (line-clamp: 2) {
    .clamp-1, .clamp-2, .clamp-3 {
      display: flow-root;
    }

    .clamp-1 {
      line-clamp: 1;
    }

    .clamp-2 {
      line-clamp: 2;
    }

    .clamp-3 {
      line-clamp: 3;
    }
  }

  .relative {
    position: relative;
  }

  .text-body {
    color: var(--ink);
  }

  .text-muted {
    color: var(--ink-mute);
  }

  .text-primary {
    color: var(--color-primary);
  }

  .text-info {
    color: var(--color-info);
  }

  .text-success {
    color: var(--color-success);
  }

  .text-warning {
    color: var(--color-warning);
  }

  .text-danger {
    color: var(--color-danger);
  }
}

/* src/a11y/focus.css */
@layer a11y {
  @property --ring-color {
    syntax: "*";
    inherits: false
  }

  :where(.btn, .link, .pagination-link, .view, .switch, .tab, .navlink, .disclosure-summary, .pill-close):focus-visible {
    outline: var(--ring-width) var(--ring-style) var(--ring-color, var(--ring, var(--color-primary)));
    outline-offset: var(--ring-offset);
  }

  :where(.field, .skip-link):focus {
    outline: var(--ring-width) var(--ring-style) var(--ring-color, var(--ring, var(--color-primary)));
    outline-offset: var(--ring-offset);
  }

  @property --ring-style {
    syntax: "solid | dashed | double";
    inherits: true;
    initial-value: solid;
  }

  :where(.tab, .navlink, .disclosure-summary, .pill-close):focus-visible {
    outline-offset: calc(var(--ring-offset) * -1);
  }

  :where(.field):focus {
    --ring-color: var(--bg-mix, var(--ring, var(--color-primary)));
  }

  :where(.pill-close):focus-visible {
    --ring-color: currentColor;
  }
}

/* src/a11y/a11y.css */
@layer a11y {
  .visually-hidden {
    position: absolute;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
  }

  .visually-hidden.focusable:focus, .visually-hidden.focusable:focus-within {
    position: static;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    width: auto;
    height: auto;
    margin: 0;
  }

  .skip-link {
    position: fixed;
    z-index: 1000;
    padding: var(--space-sm) var(--space-2xl);
    background: var(--surface);
    color: var(--ink);
    border: var(--border-width) solid var(--rule-strong);
    border-radius: var(--btn-radius);
    box-shadow: none;
    font-family: var(--font-primary);
    font-size: var(--text-md);
    text-decoration: none;
    transition: transform var(--motion-fast) var(--motion-ease-out);
    font-weight: 600;
    top: .5rem;
    left: .5rem;
    transform: translateY(calc(-100% - 1rem));
  }

  .skip-link:focus {
    box-shadow: var(--shadow-lg);
    transform: translateY(0);
  }
}

/* src/index.css */