@layer kit.reset, kit.tokens, kit.base, kit.layout, kit.components, kit.utilities;
@layer kit.tokens {
  :root { color-scheme: light dark; }
  [data-mode="light"] { color-scheme: light; }
  [data-mode="dark"] { color-scheme: dark; }
}
@layer kit.tokens {
  :root {
    --kit-space-050: 0.125rem;
    --kit-space-100: 0.25rem;
    --kit-space-150: 0.375rem;
    --kit-space-200: 0.5rem;
    --kit-space-300: 0.75rem;
    --kit-space-400: 1rem;
    --kit-space-500: 1.25rem;
    --kit-space-600: 1.5rem;
    --kit-space-800: 2rem;
    --kit-space-1000: 2.5rem;
    --kit-space-1200: 3rem;
    --kit-space-1600: 4rem;
  }
  :root,
  [data-density="comfortable"] {
    --kit-space-inset: var(--kit-space-500);
    --kit-space-inset-tight: var(--kit-space-300);
    --kit-space-stack: var(--kit-space-400);
    --kit-space-stack-tight: var(--kit-space-100);
    --kit-space-inline: var(--kit-space-200);
    --kit-space-section: var(--kit-space-600);
  }
  [data-density="compact"] {
    --kit-space-inset: var(--kit-space-400);
    --kit-space-inset-tight: var(--kit-space-200);
    --kit-space-stack: var(--kit-space-300);
    --kit-space-stack-tight: var(--kit-space-100);
    --kit-space-inline: var(--kit-space-200);
    --kit-space-section: var(--kit-space-400);
  }
}
@layer kit.tokens {
  :root {
    --kit-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --kit-font-display: var(--kit-font-sans);
    --kit-font-mono: ui-monospace, Consolas, "SF Mono", monospace;
    --kit-font-serif: Georgia, "Times New Roman", serif;
    --kit-font-script: var(--kit-font-display);
  }
  :root {
    --kit-font-size-100: 0.6875rem;
    --kit-font-size-200: 0.75rem;
    --kit-font-size-300: 0.8125rem;
    --kit-font-size-400: 0.875rem;
    --kit-font-size-500: 1rem;
    --kit-font-size-600: 1.25rem;
    --kit-font-size-700: 1.5rem;
    --kit-font-size-800: 2rem;
    --kit-font-size-900: 2.5rem;
    --kit-line-height-100: 1.45;
    --kit-line-height-200: 1.5;
    --kit-line-height-300: 1.5;
    --kit-line-height-400: 1.5;
    --kit-line-height-500: 1.5;
    --kit-line-height-600: 1.4;
    --kit-line-height-700: 1.3;
    --kit-line-height-800: 1.2;
    --kit-line-height-900: 1.15;
    --kit-line-height-none: 1;
    --kit-underline-offset: 0.15em;
    --kit-underline-thickness: from-font;
    --kit-hanging-quote: 0.38em;
    --kit-font-weight-regular: 400;
    --kit-font-weight-medium: 500;
    --kit-font-weight-semibold: 600;
    --kit-font-weight-bold: 700;
    --kit-letter-spacing-tight: -0.01em;
    --kit-letter-spacing-normal: 0;
    --kit-letter-spacing-wide: 0.06em;
  }
}
@layer kit.tokens {
  :root,
  [data-density="comfortable"] {
    --kit-control-height-sm: 2rem;
    --kit-control-height-md: 2.25rem;
    --kit-control-height-lg: 2.75rem;
    --kit-control-padding-x-sm: var(--kit-space-200);
    --kit-control-padding-x-md: var(--kit-space-300);
    --kit-control-padding-x-lg: var(--kit-space-400);
  }
  [data-density="compact"] {
    --kit-control-height-sm: 1.75rem;
    --kit-control-height-md: 2rem;
    --kit-control-height-lg: 2.5rem;
    --kit-control-padding-x-sm: var(--kit-space-150);
    --kit-control-padding-x-md: var(--kit-space-200);
    --kit-control-padding-x-lg: var(--kit-space-300);
  }
  :root {
    --kit-control-font-size-sm: var(--kit-font-size-300);
    --kit-control-font-size-md: var(--kit-font-size-400);
    --kit-control-font-size-lg: var(--kit-font-size-400);
    --kit-control-mark-size: 1.125rem;
    --kit-control-font-size-field: var(--kit-font-size-400);
    --kit-table-cell-padding-y: var(--kit-space-100);
  }
  :root,
  [data-density="comfortable"] {
    --kit-table-row-height: calc(var(--kit-control-height-md) + (2 * var(--kit-table-cell-padding-y)));
    --kit-table-cell-padding-x: var(--kit-space-300);
  }
  [data-density="compact"] {
    --kit-table-row-height: calc(var(--kit-control-height-md) + (2 * var(--kit-table-cell-padding-y)));
    --kit-table-cell-padding-x: var(--kit-space-200);
  }
  @media (pointer: coarse) {
    :root,
    [data-density="comfortable"],
    [data-density="compact"] {
      --kit-control-height-sm: max(44px, 2rem);
      --kit-control-height-md: max(44px, 2.25rem);
      --kit-control-height-lg: max(48px, 2.75rem);
      --kit-control-font-size-field: max(16px, var(--kit-font-size-400));
    }
  }
}
@layer kit.tokens {
  :root {
    --kit-radius-100: 0.25rem;
    --kit-radius-200: 0.375rem;
    --kit-radius-300: 0.5rem;
    --kit-radius-400: 0.75rem;
    --kit-radius-full: 9999px;
    --kit-radius-mark: var(--kit-radius-100);
    --kit-radius-control: var(--kit-radius-200);
    --kit-radius-surface: var(--kit-radius-300);
    --kit-radius-surface-lg: var(--kit-radius-400);
  }
}
@layer kit.tokens {
  :root {
    --kit-border-width-hairline: 1px;
    --kit-border-width-emphasis: 2px;
  }
}
@layer kit.tokens {
  :root {
    --kit-color-focus: light-dark(#2f6feb, #2f6feb);
    --kit-color-focus-halo: light-dark(#ffffff, #10131a);
    --kit-focus-width: 2px;
    --kit-focus-offset: 0px;
    --kit-focus-halo-width: 2px;
    --kit-focus-halo:
      0 0 0 calc(var(--kit-focus-width) + var(--kit-focus-halo-width)) var(--kit-color-focus-halo);
  }
}
@layer kit.tokens {
  :root {
    --kit-shadow-contact: light-dark(rgba(16, 24, 40, 0.06), rgba(0, 0, 0, 0.50));
    --kit-shadow-ambient: light-dark(rgba(16, 24, 40, 0.10), rgba(0, 0, 0, 0.55));
    --kit-shadow-ambient-strong: light-dark(rgba(16, 24, 40, 0.14), rgba(0, 0, 0, 0.60));
    --kit-shadow-ambient-deep: light-dark(rgba(16, 24, 40, 0.20), rgba(0, 0, 0, 0.65));
    --kit-shadow-rim: light-dark(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.07));
    --kit-shadow-rim-inset: light-dark(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.05));
    --kit-shadow-rim-control: light-dark(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.16));
    --kit-shadow-edge: light-dark(rgba(16, 24, 40, 0.10), rgba(0, 0, 0, 0.55));
    --kit-shadow-edge-inner: light-dark(rgba(16, 24, 40, 0.07), rgba(0, 0, 0, 0.45));
    --kit-elevation-0: none;
    --kit-elevation-1: 0 1px 2px var(--kit-shadow-contact), 0 1px 3px -1px var(--kit-shadow-ambient), inset 0 1px 0 var(--kit-shadow-rim);
    --kit-elevation-2: 0 2px 4px var(--kit-shadow-contact), 0 8px 16px -6px var(--kit-shadow-ambient-strong), inset 0 1px 0 var(--kit-shadow-rim);
    --kit-elevation-3: 0 4px 8px var(--kit-shadow-contact), 0 24px 48px -16px var(--kit-shadow-ambient-deep), inset 0 1px 0 var(--kit-shadow-rim);
    --kit-elevation-inset: inset 0 1px 2px var(--kit-shadow-ambient), inset 0 -1px 0 var(--kit-shadow-rim-inset);
    --kit-elevation-cap:
      inset 0 1px 0 var(--kit-shadow-rim-control),
      inset 0 -1px 0 var(--kit-shadow-edge-inner),
      0 1.5px 0 var(--kit-shadow-edge);
  }
}
@layer kit.tokens {
  :root {
    --kit-duration-0: 0ms;
    --kit-duration-1: 120ms;
    --kit-duration-2: 180ms;
    --kit-duration-3: 280ms;
    --kit-duration-spring: 240ms;
    --kit-period-spin: 850ms;
    --kit-period-skeleton: 1400ms;
    --kit-period-pulse: 1600ms;
    --kit-period-progress: 1250ms;
    --kit-period-flow: 1000ms;
    --kit-dwell-toast: 6000ms;
    --kit-delay-hint: 500ms;
    --kit-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --kit-easing-entrance: cubic-bezier(0, 0, 0.2, 1);
    --kit-easing-exit: cubic-bezier(0.4, 0, 1, 1);
    --kit-easing-linear: linear;
    --kit-animation-play-state: running;
    --kit-scroll-behavior: smooth;
    --kit-easing-spring: linear(0, 0.048, 0.149, 0.266, 0.38, 0.484, 0.575, 0.656, 0.721, 0.774, 0.818, 0.854, 0.883, 0.907, 0.927, 0.942, 0.955, 0.966, 0.974, 0.981, 0.987, 0.991, 0.995, 0.998, 1);
  }
  @media (prefers-reduced-motion: reduce) {
    :root {
      --kit-duration-1: 1ms;
      --kit-duration-2: 1ms;
      --kit-duration-3: 1ms;
      --kit-duration-spring: 1ms;
      --kit-animation-play-state: paused;
      --kit-scroll-behavior: auto;
    }
  }
  :root[data-motion="reduced"] {
    --kit-duration-1: 1ms;
    --kit-duration-2: 1ms;
    --kit-duration-3: 1ms;
    --kit-duration-spring: 1ms;
    --kit-animation-play-state: paused;
    --kit-scroll-behavior: auto;
  }
}
@layer kit.tokens {
  :root {
    --kit-layer-base: 0;
    --kit-layer-raised: 10;
    --kit-layer-sticky: 20;
    --kit-layer-dropdown: 30;
    --kit-layer-overlay: 40;
    --kit-layer-modal: 50;
    --kit-layer-toast: 60;
    --kit-layer-tooltip: 70;
  }
}
@layer kit.tokens {
  :root {
    --kit-breakpoint-sm: 480px;
    --kit-breakpoint-md: 768px;
    --kit-breakpoint-lg: 1280px;
    --kit-width-prose: 65ch;
    --kit-width-form: 28rem;
    --kit-width-content: 67.5rem;
    --kit-width-sidebar: 15.5rem;
    --kit-height-viewport: 100dvh;
    --kit-height-sheet-max: min(90dvh, 40rem);
  }
}
@layer kit.tokens {
  :root {
    --kit-icon-size-sm: 0.875rem;
    --kit-icon-size-md: 1rem;
    --kit-icon-size-lg: 1.25rem;
    --kit-icon-stroke: 2;
  }
}
@layer kit.tokens {
  :root,
  [data-brand="neutral"] {
    --kit-color-surface: light-dark(#eef0f4, #0f1319);
    --kit-color-surface-raised: light-dark(#ffffff, #1b1f27);
    --kit-color-surface-sunken: light-dark(#e2e5eb, #0a0d12);
    --kit-color-content: light-dark(#1b1f27, #e7eaf0);
    --kit-color-content-muted: light-dark(#5b6472, #9aa4b2);
    --kit-color-content-accent: light-dark(#1f4fc4, #7fa9f7);
    --kit-color-content-disabled: light-dark(#9aa3b0, #5d6673);
    --kit-color-accent: light-dark(#2f6feb, #2f6feb);
    --kit-color-focus: light-dark(#2f6feb, #2f6feb);
    --kit-color-accent-hover: light-dark(#1f4fc4, #1f4fc4);
    --kit-color-on-accent: light-dark(#ffffff, #ffffff);
    --kit-color-scrim: light-dark(rgba(12, 16, 24, 0.45), rgba(0, 0, 0, 0.65));
    --kit-color-border: light-dark(#ced1d6, #343b46);
    --kit-color-border-interactive: light-dark(#6f7683, #8a919e);
    --kit-color-border-strong: light-dark(#454d5b, #b3bac6);
    --kit-color-success-surface: light-dark(#eafaf0, #14301f);
    --kit-color-success-content: light-dark(#1f6b3a, #aee3c2);
    --kit-color-success-border: light-dark(#3f8a5e, #4f9a75);
    --kit-color-warning-surface: light-dark(#fdf3e6, #33260f);
    --kit-color-warning-content: light-dark(#8a5a1f, #e8bd80);
    --kit-color-warning-border: light-dark(#a0742f, #a97d2c);
    --kit-color-danger-fill: light-dark(#a32320, #c82b27);
    --kit-color-danger-fill-hover: light-dark(#8c1e1b, #a32320);
    --kit-color-on-danger: light-dark(#ffffff, #ffffff);
    --kit-color-danger-surface: light-dark(#fdecec, #3a1f1f);
    --kit-color-danger-content: light-dark(#8a1f1f, #f5b5b5);
    --kit-color-danger-border: light-dark(#c25c5e, #c25c5e);
    --kit-color-info-surface: light-dark(#e7eefb, #121f36);
    --kit-color-info-content: light-dark(#1d4585, #a3c2f5);
    --kit-color-info-border: light-dark(#5b82c4, #5b82c4);
  }
}
@layer kit.tokens {
  [data-brand="abacus"] {
    --kit-color-surface: light-dark(#f4f0e8, #14181f);
    --kit-color-surface-raised: light-dark(#ffffff, #1f242e);
    --kit-color-surface-sunken: light-dark(#eae4d6, #0b0e14);
    --kit-color-content: light-dark(#14181f, #f5f1e8);
    --kit-color-content-muted: light-dark(#4a5260, #b8bcc4);
    --kit-color-content-accent: light-dark(#8a4500, #ffa040);
    --kit-color-content-disabled: light-dark(#9aa3b0, #5d6673);
    --kit-color-accent: light-dark(#ff7f00, #ff7f00);
    --kit-color-focus: light-dark(#cd6600, #ff7f00);
    --kit-color-accent-hover: light-dark(#e5650a, #ffa040);
    --kit-color-on-accent: light-dark(#0b0e14, #0b0e14);
    --kit-color-scrim: light-dark(rgba(11, 14, 20, 0.45), rgba(0, 0, 0, 0.65));
    --kit-color-border: light-dark(#ced2d7, #323844);
    --kit-color-border-interactive: light-dark(#6f7683, #8a919e);
    --kit-color-border-strong: light-dark(#4a5260, #b8bcc4);
    --kit-color-success-surface: light-dark(#eafaf0, #14301f);
    --kit-color-success-content: light-dark(#1f6b3a, #aee3c2);
    --kit-color-success-border: light-dark(#3f8a5e, #4f9a75);
    --kit-color-warning-surface: light-dark(#fdf3e6, #33260f);
    --kit-color-warning-content: light-dark(#8a5a1f, #e8bd80);
    --kit-color-warning-border: light-dark(#a0742f, #a97d2c);
    --kit-color-danger-fill: light-dark(#a32320, #c82b27);
    --kit-color-danger-fill-hover: light-dark(#8c1e1b, #a32320);
    --kit-color-on-danger: light-dark(#ffffff, #ffffff);
    --kit-color-danger-surface: light-dark(#fdecec, #3a1f1f);
    --kit-color-danger-content: light-dark(#8a1f1f, #f5b5b5);
    --kit-color-danger-border: light-dark(#c25c5e, #c25c5e);
    --kit-color-info-surface: light-dark(#e7eefb, #121f36);
    --kit-color-info-content: light-dark(#1d4585, #a3c2f5);
    --kit-color-info-border: light-dark(#5b82c4, #5b82c4);
  }
}
@layer kit.tokens {
  [data-brand="minimal"] {
    --kit-color-surface: light-dark(#f7f7f8, #121212);
    --kit-color-surface-raised: light-dark(#ffffff, #1b1b1d);
    --kit-color-surface-sunken: light-dark(#ededee, #0a0a0b);
    --kit-color-content: light-dark(#111113, #ededee);
    --kit-color-content-muted: light-dark(#585860, #a4a4ad);
    --kit-color-content-accent: light-dark(#26262b, #d6d6dc);
    --kit-color-content-disabled: light-dark(#9a9aa3, #5c5c64);
    --kit-color-accent: light-dark(#26262b, #e4e4e9);
    --kit-color-focus: light-dark(#26262b, #e4e4e9);
    --kit-color-accent-hover: light-dark(#111113, #ffffff);
    --kit-color-on-accent: light-dark(#ffffff, #111113);
    --kit-color-scrim: light-dark(rgba(17, 17, 19, 0.45), rgba(0, 0, 0, 0.65));
    --kit-color-border: light-dark(#d7d7da, #323236);
    --kit-color-border-interactive: light-dark(#6e6e77, #8b8b95);
    --kit-color-border-strong: light-dark(#44444b, #b4b4bd);
    --kit-color-success-surface: light-dark(#eef4f0, #16241d);
    --kit-color-success-content: light-dark(#2a5f45, #a9cebb);
    --kit-color-success-border: light-dark(#4e7a65, #4c7360);
    --kit-color-warning-surface: light-dark(#f6f1e8, #2a2418);
    --kit-color-warning-content: light-dark(#6f5526, #ddc08c);
    --kit-color-warning-border: light-dark(#7d6a3f, #7d6a3f);
    --kit-color-danger-fill: light-dark(#8f3634, #b04240);
    --kit-color-danger-fill-hover: light-dark(#7a2d2b, #8f3634);
    --kit-color-on-danger: light-dark(#ffffff, #ffffff);
    --kit-color-danger-surface: light-dark(#f7eded, #2a1a1a);
    --kit-color-danger-content: light-dark(#7d2a2a, #e3aaaa);
    --kit-color-danger-border: light-dark(#b07272, #8a5555);
    --kit-color-info-surface: light-dark(#ecf0f5, #171d26);
    --kit-color-info-content: light-dark(#33506e, #adc2da);
    --kit-color-info-border: light-dark(#7189a5, #5a6e85);
  }
}
@layer kit.tokens {
  [data-theme="ironmechs"] {
    --kit-color-surface: light-dark(#ffffff, #14110d);
    --kit-color-surface-raised: light-dark(#faf8f4, #1f1a12);
    --kit-color-surface-sunken: light-dark(#f1ece2, #0a0805);
    --kit-color-content: light-dark(#14110d, #faf8f4);
    --kit-color-content-muted: light-dark(#3a332b, #c0b8aa);
    --kit-color-content-accent: light-dark(#8a3d00, #ffb166);
    --kit-color-accent: light-dark(#ff7f00, #ff8e1a);
    --kit-color-focus: light-dark(#cd6600, #ff8e1a);
    --kit-color-accent-hover: light-dark(#d45f00, #ffb166);
    --kit-color-on-accent: light-dark(#0b0e14, #0b0e14);
    --kit-color-border: light-dark(#1f1a12, #faf8f4);
    --kit-color-border-interactive: light-dark(#1f1a12, #c0b8aa);
    --kit-color-border-strong: light-dark(#14110d, #ffffff);
  }
}
@layer kit.tokens {
  [data-theme="meadow"] {
    --kit-color-surface: light-dark(#eceee4, #121711);
    --kit-color-surface-raised: light-dark(#ffffff, #1b231a);
    --kit-color-surface-sunken: light-dark(#e0e3d7, #0b0f0a);
    --kit-color-content: light-dark(#1a231b, #eaf2e9);
    --kit-color-content-muted: light-dark(#4c5a4e, #adbcac);
    --kit-color-content-accent: light-dark(#255c31, #93d6a1);
    --kit-color-accent: light-dark(#357f45, #357f45);
    --kit-color-focus: light-dark(#357f45, #357f45);
    --kit-color-accent-hover: light-dark(#2c6e3a, #2c6e3a);
    --kit-color-on-accent: light-dark(#ffffff, #ffffff);
    --kit-color-border: light-dark(#cdd0c6, #2e392b);
    --kit-color-border-interactive: light-dark(#697863, #8ea08c);
    --kit-color-border-strong: light-dark(#40503c, #b6c7b4);
  }
}
@layer kit.tokens {
  @font-face {
    font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap;
    src: local("Archivo"), local("Archivo-Regular"), url("fonts/archivo-400.woff2") format("woff2");
  }
  @font-face {
    font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap;
    src: local("Archivo SemiBold"), local("Archivo-SemiBold"), url("fonts/archivo-600.woff2") format("woff2");
  }
  @font-face {
    font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap;
    src: local("Archivo Bold"), local("Archivo-Bold"), url("fonts/archivo-700.woff2") format("woff2");
  }
  @font-face {
    font-family: "Rubik"; font-style: normal; font-weight: 400; font-display: swap;
    src: local("Rubik"), local("Rubik-Regular"), url("fonts/rubik-400.woff2") format("woff2");
  }
  @font-face {
    font-family: "Rubik"; font-style: normal; font-weight: 500; font-display: swap;
    src: local("Rubik Medium"), local("Rubik-Medium"), url("fonts/rubik-500.woff2") format("woff2");
  }
  @font-face {
    font-family: "Rubik"; font-style: normal; font-weight: 700; font-display: swap;
    src: local("Rubik Bold"), local("Rubik-Bold"), url("fonts/rubik-700.woff2") format("woff2");
  }
  @font-face {
    font-family: "Cousine"; font-style: normal; font-weight: 400; font-display: swap;
    src: local("Cousine"), local("Cousine-Regular"), url("fonts/cousine-400.woff2") format("woff2");
  }
  @font-face {
    font-family: "Cousine"; font-style: normal; font-weight: 700; font-display: swap;
    src: local("Cousine Bold"), local("Cousine-Bold"), url("fonts/cousine-700.woff2") format("woff2");
  }
  @font-face {
    font-family: "Libre Baskerville"; font-style: normal; font-weight: 400; font-display: swap;
    src: local("Libre Baskerville"), local("LibreBaskerville-Regular"), url("fonts/libre-baskerville-400.woff2") format("woff2");
  }
  @font-face {
    font-family: "Libre Baskerville"; font-style: normal; font-weight: 700; font-display: swap;
    src: local("Libre Baskerville Bold"), local("LibreBaskerville-Bold"), url("fonts/libre-baskerville-700.woff2") format("woff2");
  }
  @font-face {
    font-family: "Rubik Fallback";
    src: local("Arial"), local("Liberation Sans");
    size-adjust: 104.90%;
    ascent-override: 89.13%;
    descent-override: 23.83%;
    line-gap-override: 0%;
  }
  @font-face {
    font-family: "Archivo Fallback";
    src: local("Arial"), local("Liberation Sans");
    size-adjust: 98.39%;
    ascent-override: 89.23%;
    descent-override: 21.34%;
    line-gap-override: 0%;
  }
  @font-face {
    font-family: "Cousine Fallback";
    src: local("Consolas"), local("Liberation Mono");
    size-adjust: 109.15%;
    ascent-override: 76.32%;
    descent-override: 27.49%;
    line-gap-override: 0%;
  }
  @font-face {
    font-family: "Libre Baskerville Fallback";
    src: local("Georgia"), local("Liberation Serif");
    size-adjust: 115.68%;
    ascent-override: 83.85%;
    descent-override: 23.34%;
    line-gap-override: 0%;
  }
}
@layer kit.tokens {
  [data-palette="abacus"] {
    --kit-font-display: "Archivo", "Archivo Fallback", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --kit-font-sans: "Rubik", "Rubik Fallback", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --kit-font-mono: "Cousine", "Cousine Fallback", ui-monospace, Consolas, "SF Mono", monospace;
    --kit-font-serif: "Libre Baskerville", "Libre Baskerville Fallback", Georgia, "Times New Roman", serif;
    --kit-font-script: var(--kit-font-display);
  }
}
@layer kit.tokens {
  :root, [data-brand], [data-theme] {
    --kit-color-accent-tint: color-mix(in oklab, var(--kit-color-accent) 8%, transparent);
    --kit-color-surface-hover: color-mix(in oklab, var(--kit-color-content) 5%, var(--kit-color-surface-raised));
    --kit-color-surface-pressed: color-mix(in oklab, var(--kit-color-content) 9%, var(--kit-color-surface-raised));
  }
}
@layer kit.tokens {
  :root {
    --kit-color-chart-1: light-dark(#2366b4, #0c84fa);
    --kit-color-chart-2: light-dark(#f0530a, #fc5400);
    --kit-color-chart-3: light-dark(#0394a6, #1edff9);
    --kit-color-chart-4: light-dark(#9c007f, #e670c5);
    --kit-color-chart-5: light-dark(#7f64ec, #a497fd);
    --kit-color-chart-6: light-dark(#21652e, #5fc16d);
    --kit-color-chart-other: light-dark(#44484d, #80828f);
    --kit-color-chart-ramp-viridis-1: #fde725;
    --kit-color-chart-ramp-viridis-2: #90d743;
    --kit-color-chart-ramp-viridis-3: #35b779;
    --kit-color-chart-ramp-viridis-4: #21918c;
    --kit-color-chart-ramp-viridis-5: #31688e;
    --kit-color-chart-ramp-viridis-6: #443983;
    --kit-color-chart-ramp-viridis-7: #440154;
    --kit-color-chart-ramp-blue-1: #e8f3ff;
    --kit-color-chart-ramp-blue-2: #bad8f8;
    --kit-color-chart-ramp-blue-3: #85b9ef;
    --kit-color-chart-ramp-blue-4: #5197db;
    --kit-color-chart-ramp-blue-5: #1f74bf;
    --kit-color-chart-ramp-blue-6: #005494;
    --kit-color-chart-ramp-blue-7: #003664;
    --kit-chart-dash-1: none;
    --kit-chart-dash-2: 7 3;
    --kit-chart-dash-3: 1 3;
    --kit-chart-dash-4: 9 3 1 3;
    --kit-chart-dash-5: 4 3;
    --kit-chart-dash-6: 12 4;
    --kit-chart-dash-other: 2 2;
  }
  :root, [data-brand], [data-theme] {
    --kit-color-chart-seq-1: color-mix(in oklab, var(--kit-color-accent) 20%, transparent);
    --kit-color-chart-seq-2: color-mix(in oklab, var(--kit-color-accent) 40%, transparent);
    --kit-color-chart-seq-3: color-mix(in oklab, var(--kit-color-accent) 60%, transparent);
    --kit-color-chart-seq-4: color-mix(in oklab, var(--kit-color-accent) 80%, transparent);
    --kit-color-chart-seq-5: color-mix(in oklab, var(--kit-color-accent) 100%, transparent);
    --kit-chart-pattern-1: none;
    --kit-chart-pattern-2: repeating-linear-gradient(45deg, var(--kit-color-surface-raised) 0 1.5px, transparent 1.5px 6px);
    --kit-chart-pattern-3: radial-gradient(circle, var(--kit-color-surface-raised) 1.6px, transparent 2px) 0 0 / 7px 7px;
    --kit-chart-pattern-4: repeating-linear-gradient(0deg, var(--kit-color-surface-raised) 0 1.5px, transparent 1.5px 6px);
    --kit-chart-pattern-5: repeating-linear-gradient(-45deg, var(--kit-color-surface-raised) 0 1.5px, transparent 1.5px 6px);
    --kit-chart-pattern-6: repeating-linear-gradient(90deg, var(--kit-color-surface-raised) 0 1.5px, transparent 1.5px 6px);
    --kit-chart-pattern-other: radial-gradient(circle, var(--kit-color-surface-raised) 0.9px, transparent 1.2px) 0 0 / 3.5px 3.5px;
  }
}
@layer kit.tokens {
  :root {
    --kit-color-syntax-keyword: light-dark(#5523a5, #d8b5ff);
    --kit-color-syntax-entity: light-dark(#8c0175, #ed6ece);
    --kit-color-syntax-function: light-dark(#0061c7, #539dff);
    --kit-color-syntax-param: light-dark(#00464f, #90efff);
    --kit-color-syntax-number: light-dark(#b51a00, #fa634a);
    --kit-color-syntax-string: light-dark(#006621, #61e477);
    --kit-color-syntax-comment: light-dark(#5e646b, #858c93);
  }
}
@layer kit.tokens {
  :root {
    --kit-color-terminal-surface: #0b0e15;
    --kit-color-terminal-surface-raised: #151a24;
    --kit-color-terminal-border: #2a3140;
    --kit-color-terminal-content: #d6dde8;
    --kit-color-terminal-content-muted: #97a3b8;
    --kit-color-terminal-success: #5ad07a;
    --kit-color-terminal-info: #4fd6e0;
    --kit-color-terminal-warning: #ffcf5a;
    --kit-color-terminal-danger: #ff6b6b;
  }
}
@layer kit.reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, pre { margin: 0; }
  body {
    background: var(--kit-color-surface);
    color: var(--kit-color-content);
    font-family: var(--kit-font-sans);
    font-size: var(--kit-font-size-400);
    line-height: var(--kit-line-height-400);
    -webkit-text-size-adjust: 100%;
  }
  img, svg, video, canvas, audio, iframe, embed, object { display: block; max-width: 100%; }
  img, video { height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; }
  :focus-visible {
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: var(--kit-focus-offset);
    box-shadow: var(--kit-focus-halo);
  }
  :target { scroll-margin-block: var(--kit-space-800); }
  :root { scroll-behavior: var(--kit-scroll-behavior); }
  hr {
    border: 0;
    border-top: var(--kit-border-width-hairline) solid var(--kit-color-border);
    margin-block: var(--kit-space-section);
  }
  ::selection {
    background: color-mix(in oklab, var(--kit-color-accent) 24%, transparent);
  }
}
@layer kit.base {
  :where(.kit-display) {
    font-family: var(--kit-font-display);
    font-size: var(--kit-font-size-900);
    line-height: var(--kit-line-height-900);
    font-weight: var(--kit-font-weight-semibold);
    letter-spacing: var(--kit-letter-spacing-tight);
  }
  :where(h1, .kit-heading-1) {
    font-family: var(--kit-font-display);
    font-size: var(--kit-font-size-800);
    line-height: var(--kit-line-height-800);
    font-weight: var(--kit-font-weight-semibold);
    letter-spacing: var(--kit-letter-spacing-tight);
    text-wrap: balance;
  }
  :where(h2, .kit-heading-2) {
    font-family: var(--kit-font-display);
    font-size: var(--kit-font-size-700);
    line-height: var(--kit-line-height-700);
    font-weight: var(--kit-font-weight-semibold);
    letter-spacing: var(--kit-letter-spacing-tight);
    text-wrap: balance;
  }
  :where(h3, .kit-heading-3) {
    font-family: var(--kit-font-sans);
    font-size: var(--kit-font-size-600);
    line-height: var(--kit-line-height-600);
    font-weight: var(--kit-font-weight-semibold);
    text-wrap: balance;
  }
  :where(h4, h5, h6, .kit-heading-4) {
    font-family: var(--kit-font-sans);
    font-size: var(--kit-font-size-500);
    line-height: var(--kit-line-height-500);
    font-weight: var(--kit-font-weight-semibold);
  }
  :where(.kit-body) {
    font-size: var(--kit-font-size-400);
    line-height: var(--kit-line-height-400);
  }
  :where(.kit-body-large, .kit-lead) {
    font-size: var(--kit-font-size-500);
    line-height: var(--kit-line-height-500);
    color: var(--kit-color-content-muted);
    text-wrap: pretty;
  }
  :where(.kit-caption) {
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-200);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-label) {
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
    font-weight: var(--kit-font-weight-medium);
  }
  :where(.kit-eyebrow) {
    font-size: var(--kit-font-size-100);
    line-height: var(--kit-line-height-100);
    font-weight: var(--kit-font-weight-semibold);
    letter-spacing: var(--kit-letter-spacing-wide);
    text-transform: uppercase;
    color: var(--kit-color-content-muted);
  }
  :where(a, ins, u, abbr[title], .kit-underline) {
    text-decoration-skip-ink: auto;
  }
  :where(.kit-underline-solid) {
    text-decoration-skip-ink: none;
  }
  :where(.kit-underline-double) {
    text-decoration-line: underline;
    text-decoration-style: double;
    text-underline-offset: var(--kit-underline-offset);
  }
  :where(q) {
    quotes: auto;
  }
  :where(.kit-data) {
    font-family: var(--kit-font-mono);
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
    font-variant-numeric: tabular-nums;
  }
  :where(code, .kit-code) {
    font-family: var(--kit-font-mono);
    font-size: 0.9em;
    background: var(--kit-color-surface-sunken);
    border-radius: var(--kit-radius-mark);
    padding: 0.1em var(--kit-space-100);
  }
  :where(pre) {
    font-family: var(--kit-font-mono);
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
    overflow-x: auto;
  }
  :where(pre) code { background: none; padding: 0; font-size: inherit; }
  :where(kbd) {
    font-family: var(--kit-font-mono);
    font-size: 0.9em;
    background: var(--kit-color-surface-sunken);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border-strong);
    border-block-end-width: var(--kit-border-width-emphasis);
    border-radius: var(--kit-radius-mark);
    padding: 0.1em var(--kit-space-100);
  }
  :where(kbd:has(kbd)) {
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
  }
  @media (forced-colors: active) {
    :where(kbd) { border-color: CanvasText; }
  }
  :where(a, .kit-link) {
    color: var(--kit-color-content-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: from-font;
  }
  :where(.kit-prose) {
    font-size: var(--kit-font-size-500);
    line-height: var(--kit-line-height-500);
    text-wrap: pretty;
  }
  :where(.kit-prose) > * + * { margin-block-start: var(--kit-space-stack); }
  :where(.kit-measure) { max-width: var(--kit-width-prose); }
  :where(strong, b) { font-weight: var(--kit-font-weight-semibold); }
  :where(small) { font-size: var(--kit-font-size-200); }
  :where(.kit-muted) { color: var(--kit-color-content-muted); }
  :where(.kit-truncate) { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}
@layer kit.base {
  :where(ul, ol) {
    padding-inline-start: var(--kit-space-600);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kit-space-stack-tight);
  }
  :where(ul) { list-style: disc; }
  :where(ol) { list-style: decimal; }
  :where(ul, ol) ::marker {
    color: var(--kit-color-content-muted);
    font-variant-numeric: tabular-nums;
  }
  :where(ul, ol) :where(ul, ol) {
    margin-block-start: var(--kit-space-stack-tight);
    padding-inline-start: var(--kit-space-500);
  }
  :where(ul) :where(ul) { list-style: circle; }
  :where(ul) :where(ul) :where(ul) { list-style: square; }
  :where(ol) :where(ol) { list-style: lower-alpha; }
  :where(ol) :where(ol) :where(ol) { list-style: lower-roman; }
  :where(.kit-list-loose) { gap: var(--kit-space-stack); }
  :where(.kit-list-plain) {
    list-style: none;
    padding-inline-start: 0;
  }
  :where(dl) { display: grid; gap: var(--kit-space-stack); }
  :where(dt) {
    font-size: var(--kit-font-size-100);
    line-height: var(--kit-line-height-100);
    font-weight: var(--kit-font-weight-semibold);
    letter-spacing: var(--kit-letter-spacing-wide);
    text-transform: uppercase;
    color: var(--kit-color-content-muted);
  }
  :where(dd) { margin: 0; }
  :where(dd) + :where(dt) { margin-block-start: var(--kit-space-stack-tight); }
  :where(.kit-list-facts) { gap: var(--kit-space-stack-tight); }
  @container (min-width: 28rem) {
    :where(.kit-list-facts) {
      grid-template-columns: minmax(8rem, max-content) 1fr;
      align-items: baseline;
      column-gap: var(--kit-space-inline);
    }
    :where(.kit-list-facts) :where(dt) { grid-column: 1; }
    :where(.kit-list-facts) :where(dd) { grid-column: 2; }
    :where(.kit-list-facts) :where(dd) + :where(dt) { margin-block-start: 0; }
  }
}
@layer kit.base {
  :where(math) {
    font-family: math, var(--kit-font-serif);
    font-size: 1.05em;
  }
  :where(math[display="block"]) {
    display: block;
    margin-block: var(--kit-space-stack);
    max-inline-size: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
  }
  :where(math:not([display="block"])) {
    display: inline math;
    vertical-align: middle;
  }
}
@layer kit.layout {
  :where(.kit-stack) {
    display: grid;
    gap: var(--kit-layout-gap, var(--kit-space-stack));
  }
  :where(.kit-cluster) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kit-layout-gap, var(--kit-space-inline));
  }
  :where(.kit-grid) {
    display: grid;
    gap: var(--kit-layout-gap, var(--kit-space-stack));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--kit-layout-min, 16rem)), 1fr));
  }
  :where(.kit-container) {
    max-width: var(--kit-width-content);
    margin-inline: auto;
    padding-inline: var(--kit-space-inset);
  }
  :where(.kit-split) {
    display: grid;
    gap: var(--kit-layout-gap, var(--kit-space-section));
    grid-template-columns: 1fr;
  }
  @media (min-width: 768px) {
    :where(.kit-split) { grid-template-columns: var(--kit-layout-split, 2fr 1fr); }
  }
  :where(.kit-contain) { container-type: inline-size; }
  :where(.kit-shrink) { min-width: 0; }
}
@layer kit.layout {
  :where(.kit-shell) {
    --kit-shell-header: 3.5rem;
    display: grid;
    grid-template-rows: auto 1fr;
    min-block-size: var(--kit-height-viewport);
    background: var(--kit-color-surface);
    color: var(--kit-color-content);
  }
  :where(.kit-shell-header) {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--kit-layer-sticky);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--kit-space-inline);
    min-block-size: var(--kit-shell-header);
    padding-inline: var(--kit-space-inset);
    border-block-end: var(--kit-border-width-hairline) solid var(--kit-color-border);
    background: var(--kit-color-surface-raised);
  }
  :where(.kit-shell-nav) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--kit-space-inline);
    min-inline-size: 0;
  }
  :where(.kit-shell-nav)[data-align="end"] {
    margin-inline-start: auto;
  }
  :where(.kit-shell-main) {
    container-type: inline-size;
    inline-size: 100%;
    max-inline-size: var(--kit-width-content);
    margin-inline: auto;
    padding-inline: var(--kit-space-inset);
    padding-block: var(--kit-space-section);
    min-inline-size: 0;
  }
  :where(.kit-shell-main)[data-width="full"] {
    max-inline-size: none;
  }
  :where(.kit-auth-shell) {
    display: grid;
    place-items: center;
    min-block-size: var(--kit-height-viewport);
    padding: var(--kit-space-inset);
    background: var(--kit-color-surface-sunken);
  }
  :where(.kit-auth-shell) > * {
    inline-size: 100%;
    max-inline-size: var(--kit-width-form);
  }
  :where(.kit-shell)[data-sidebar] {
    grid-template-columns: var(--kit-width-sidebar) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  :where(.kit-shell)[data-sidebar] > :where(.kit-shell-header) {
    grid-column: 1 / -1;
  }
  :where(.kit-shell-side) {
    grid-column: 1;
    padding: var(--kit-space-inset-tight);
    border-inline-end: var(--kit-border-width-hairline) solid var(--kit-color-border);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  :where(.kit-shell)[data-sidebar] > :where(.kit-shell-main) {
    grid-column: 2;
    margin-inline: 0;
    max-inline-size: none;
  }
  @media (max-width: 480px) {
    :where(.kit-shell-header),
    :where(.kit-shell-main) {
      padding-inline: var(--kit-space-inset-tight);
    }
  }
  @media (max-width: 768px) {
    :where(.kit-shell)[data-sidebar] {
      grid-template-columns: minmax(0, 1fr);
    }
    :where(.kit-shell-side) {
      grid-column: 1;
      border-inline-end: 0;
      border-block-end: var(--kit-border-width-hairline) solid var(--kit-color-border);
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scrollbar-gutter: stable;
    }
    :where(.kit-shell-side) :where(.kit-nav)[data-orientation="vertical"] {
      grid-auto-flow: column;
      grid-auto-columns: max-content;
    }
    :where(.kit-shell)[data-sidebar] > :where(.kit-shell-main) {
      grid-column: 1;
    }
  }
}
@layer kit.layout {
  :where(.kit-scroll, .kit-scroll-x, .kit-scroll-both, .kit-tabs, .kit-dialog-body) {
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    min-inline-size: 0;
    min-block-size: 0;
    position: relative;
  }
  :where(.kit-scroll, .kit-scroll-x, .kit-scroll-both, .kit-tabs, .kit-dialog-body)::-webkit-scrollbar { width: 8px; height: 8px; }
  :where(.kit-scroll, .kit-scroll-x, .kit-scroll-both, .kit-tabs, .kit-dialog-body)::-webkit-scrollbar-track,
  :where(.kit-scroll, .kit-scroll-x, .kit-scroll-both, .kit-tabs, .kit-dialog-body)::-webkit-scrollbar-corner { background: transparent; }
  :where(.kit-scroll, .kit-scroll-x, .kit-scroll-both, .kit-tabs, .kit-dialog-body)::-webkit-scrollbar-thumb {
    background-color: color-mix(in oklab, var(--kit-color-content) 22%, transparent);
    border-radius: var(--kit-radius-full);
  }
  @media (hover: hover) {
    :where(.kit-scroll, .kit-scroll-x, .kit-scroll-both, .kit-tabs, .kit-dialog-body)::-webkit-scrollbar-thumb:hover {
      background-color: color-mix(in oklab, var(--kit-color-content) 40%, transparent);
    }
  }
  @supports (-moz-appearance: none) {
    :where(.kit-scroll, .kit-scroll-x, .kit-scroll-both, .kit-tabs, .kit-dialog-body) {
      scrollbar-width: thin;
      scrollbar-color: color-mix(in oklab, var(--kit-color-content) 22%, transparent) transparent;
    }
  }
  :where(.kit-dialog-body) { overflow: auto; }
  :where(.kit-scroll) { overflow-y: auto; overflow-x: hidden; }
  :where(.kit-scroll-x, .kit-tabs) { overflow-x: auto; overflow-y: hidden; scrollbar-gutter: auto; }
  :where(.kit-scroll-both) { overflow: auto; }
  :where(.kit-scroll-inset)::-webkit-scrollbar-track { margin-block: var(--kit-space-500); }
  :where(.kit-scroll-cued) {
    --_cue-surface: var(--kit-color-surface-raised);
    background:
      linear-gradient(var(--_cue-surface) 30%, transparent) top / 100% var(--kit-space-600) no-repeat local,
      linear-gradient(transparent, var(--_cue-surface) 70%) bottom / 100% var(--kit-space-600) no-repeat local,
      radial-gradient(farthest-side at 50% 0, var(--kit-shadow-ambient), transparent) top / 100% var(--kit-space-200) no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%, var(--kit-shadow-ambient), transparent) bottom / 100% var(--kit-space-200) no-repeat scroll;
    background-color: var(--_cue-surface);
  }
  :where(.kit-scroll-cued-x) {
    --_cue-surface: var(--kit-color-surface-raised);
    background:
      linear-gradient(to right, var(--_cue-surface) 30%, transparent) left / var(--kit-space-600) 100% no-repeat local,
      linear-gradient(to left, var(--_cue-surface) 30%, transparent) right / var(--kit-space-600) 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, var(--kit-shadow-ambient), transparent) left / var(--kit-space-200) 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, var(--kit-shadow-ambient), transparent) right / var(--kit-space-200) 100% no-repeat scroll;
    background-color: var(--_cue-surface);
  }
  :where(.kit-scroll-sticky) {
    position: sticky;
    top: 0;
    z-index: var(--kit-layer-sticky);
    background: var(--kit-color-surface-raised);
  }
  :where(.kit-scroll-snap-x) {
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--kit-space-inset);
  }
  :where(.kit-scroll-snap-x) > * { scroll-snap-align: start; }
}
@layer kit.components {
  :where(.kit-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kit-space-inline);
    text-decoration: none;
    min-height: var(--kit-control-height-md);
    padding-inline: calc(var(--kit-control-padding-x-md) + var(--kit-space-100));
    padding-block: var(--kit-space-100);
    font-family: var(--kit-font-sans);
    font-size: var(--kit-control-font-size-md);
    font-weight: var(--kit-font-weight-medium);
    line-height: var(--kit-line-height-none);
    text-align: center;
    text-wrap: balance;
    --_ink: var(--kit-color-content);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border-interactive);
    border-radius: var(--kit-radius-control);
    background: var(--kit-color-surface-raised);
    color: var(--kit-color-content);
    cursor: pointer;
    box-shadow: var(--kit-elevation-cap);
    transition:
      background-color var(--kit-duration-1) var(--kit-easing-standard),
      border-color var(--kit-duration-1) var(--kit-easing-standard),
      color var(--kit-duration-1) var(--kit-easing-standard),
      transform var(--kit-duration-1) var(--kit-easing-spring);
  }
  :where(.kit-button)[data-size="sm"] {
    min-height: var(--kit-control-height-sm);
    padding-inline: calc(var(--kit-control-padding-x-sm) + var(--kit-space-100));
    font-size: var(--kit-control-font-size-sm);
  }
  :where(.kit-button)[data-size="lg"] {
    min-height: var(--kit-control-height-lg);
    padding-inline: calc(var(--kit-control-padding-x-lg) + var(--kit-space-100));
    font-size: var(--kit-control-font-size-lg);
  }
  :where(.kit-button)[data-variant="primary"] {
    background: var(--kit-color-accent);
    border-color: var(--kit-color-accent);
    color: var(--kit-color-on-accent);
    --_ink: var(--kit-color-on-accent);
  }
  :where(.kit-button)[data-variant="ghost"] {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
  :where(.kit-button)[data-variant="danger"] {
    background: var(--kit-color-danger-fill);
    border-color: var(--kit-color-danger-fill);
    color: var(--kit-color-on-danger);
    --_ink: var(--kit-color-on-danger);
  }
  @media (hover: hover) {
    :where(.kit-button):hover { background: var(--kit-color-surface-hover); }
    :where(.kit-button)[data-variant="primary"]:hover { background: var(--kit-color-accent-hover); border-color: var(--kit-color-accent-hover); }
    :where(.kit-button)[data-variant="ghost"]:hover { background: var(--kit-color-surface-hover); border-color: transparent; }
    :where(.kit-button)[data-variant="danger"]:hover { background: var(--kit-color-danger-fill-hover); border-color: var(--kit-color-danger-fill-hover); }
  }
  :where(.kit-button):active {
    background: var(--kit-color-surface-pressed);
    box-shadow: var(--kit-elevation-inset);
    transform: translateY(1.5px);
  }
  :where(.kit-button)[data-variant="primary"]:active { background: var(--kit-color-accent-hover); border-color: var(--kit-color-accent-hover); }
  :where(.kit-button)[data-variant="danger"]:active { background: var(--kit-color-danger-fill-hover); border-color: var(--kit-color-danger-fill-hover); }
  :where(.kit-button)[aria-pressed="true"] {
    background: var(--kit-color-accent-tint);
    border-color: var(--kit-color-border-strong);
    color: var(--kit-color-content);
  }
  :where(.kit-button):disabled,
  :where(.kit-button)[aria-disabled="true"]:not([aria-busy="true"]) {
    color: var(--kit-color-content-disabled);
    background: var(--kit-color-surface-sunken);
    border-color: var(--kit-color-border);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
  :where(.kit-button):disabled { pointer-events: none; }
  :where(.kit-button)[aria-busy="true"]:not(:has(.kit-button-faces)) {
    cursor: progress;
    color: transparent;
    position: relative;
  }
  :where(.kit-button)[aria-busy="true"]:not(:has(.kit-button-faces))::after {
    content: "";
    position: absolute;
    inset-block-start: calc(50% - var(--kit-icon-size-md) / 2);
    inset-inline-start: calc(50% - var(--kit-icon-size-md) / 2);
    width: var(--kit-icon-size-md);
    height: var(--kit-icon-size-md);
    border: 2px solid var(--_ink);
    border-top-color: transparent;
    border-radius: var(--kit-radius-full);
    animation: kit-spin var(--kit-period-spin) var(--kit-easing-linear) infinite;
    animation-play-state: var(--kit-animation-play-state);
  }
  @keyframes kit-spin { to { transform: rotate(1turn); } }
  :where(.kit-button-faces) { display: grid; place-items: center; }
  :where(.kit-button-face) {
    grid-area: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kit-space-inline);
    white-space: nowrap;
    opacity: 0;
    translate: 0 3px;
    filter: blur(3px);
    transition:
      opacity var(--kit-duration-2) var(--kit-easing-standard),
      translate var(--kit-duration-2) var(--kit-easing-standard),
      filter var(--kit-duration-2) var(--kit-easing-standard);
  }
  :where(.kit-button:not([data-state]), .kit-button[data-state="idle"]) :where([data-face="idle"]),
  :where(.kit-button[data-state="pending"]) :where([data-face="pending"]),
  :where(.kit-button[data-state="success"]) :where([data-face="success"]),
  :where(.kit-button[data-state="error"]) :where([data-face="error"]) {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
  :where(.kit-button)[data-shape="icon"] {
    padding-inline: 0;
    inline-size: var(--kit-control-height-md);
    flex: none;
  }
  :where(.kit-button)[data-shape="icon"][data-size="sm"] { inline-size: var(--kit-control-height-sm); }
  :where(.kit-button)[data-shape="icon"][data-size="lg"] { inline-size: var(--kit-control-height-lg); }
  :where(.kit-button)[data-shape="block"] { display: flex; inline-size: 100%; }
  :where(.kit-button-group) { display: inline-flex; }
  :where(.kit-button-group) > :where(.kit-button) { border-radius: 0; }
  :where(.kit-button-group) > :where(.kit-button) + :where(.kit-button) { margin-inline-start: calc(var(--kit-border-width-hairline) * -1); }
  :where(.kit-button-group) > :where(.kit-button):first-child { border-start-start-radius: var(--kit-radius-control); border-end-start-radius: var(--kit-radius-control); }
  :where(.kit-button-group) > :where(.kit-button):last-child { border-start-end-radius: var(--kit-radius-control); border-end-end-radius: var(--kit-radius-control); }
  :where(.kit-button-group) > :where(.kit-button):is(:focus-visible, [aria-pressed="true"]) { position: relative; z-index: 1; }
  :where(.kit-button):focus-visible {
    box-shadow: var(--kit-elevation-cap), var(--kit-focus-halo);
  }
  :where(.kit-button):active:focus-visible {
    box-shadow: var(--kit-elevation-inset), var(--kit-focus-halo);
  }
}
@layer kit.components {
  :where(.kit-button)[data-kit-press] {
    --_press-travel: var(--kit-space-100);
    box-shadow: var(--kit-elevation-cap), 0 var(--_press-travel) 0 var(--kit-color-border-strong);
    translate: 0 0;
    transition:
      box-shadow var(--kit-duration-1) var(--kit-easing-standard),
      translate var(--kit-duration-1) var(--kit-easing-spring);
  }
  :where(.kit-button)[data-kit-press][data-variant="ghost"] {
    box-shadow: var(--kit-elevation-cap), 0 var(--_press-travel) 0 var(--kit-color-border-strong);
  }
  :where(.kit-button)[data-kit-press][data-kit-pressed] {
    translate: 0 var(--_press-travel);
    box-shadow: var(--kit-elevation-inset), 0 0 0 var(--kit-color-border-strong);
    background: var(--kit-color-surface-pressed);
  }
  :where(.kit-button)[data-kit-press][data-kit-pressed][data-variant="primary"] {
    background: var(--kit-color-accent-hover);
    border-color: var(--kit-color-accent-hover);
  }
  :where(.kit-button)[data-kit-press][data-kit-pressed][data-variant="danger"] {
    background: var(--kit-color-danger-fill-hover);
    border-color: var(--kit-color-danger-fill-hover);
  }
  :where(.kit-button)[data-kit-press][data-kit-pressed][data-variant="ghost"] {
    background: var(--kit-color-surface-pressed);
  }
  :where(.kit-button)[data-kit-press]:active { transform: none; }
  :where(.kit-button)[data-kit-press]:active:not([data-kit-pressed]) {
    box-shadow: var(--kit-elevation-inset), 0 0 0 var(--kit-color-border-strong);
    translate: 0 var(--_press-travel);
  }
  :where(.kit-button)[data-kit-press][data-kit-hold] {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
  }
  :where(.kit-button)[data-kit-press]:disabled,
  :where(.kit-button)[data-kit-press][aria-disabled="true"]:not([aria-busy="true"]) {
    box-shadow: none;
    translate: 0 0;
  }
  :where(.kit-button)[data-kit-press]:focus-visible {
    box-shadow: var(--kit-elevation-cap), 0 var(--_press-travel) 0 var(--kit-color-border-strong), var(--kit-focus-halo);
  }
  :where(.kit-button)[data-kit-press][data-kit-pressed]:focus-visible {
    box-shadow: var(--kit-elevation-inset), 0 0 0 var(--kit-color-border-strong), var(--kit-focus-halo);
  }
  @media (forced-colors: active) {
    :where(.kit-button)[data-kit-press][data-kit-pressed] {
      background: Highlight;
      color: HighlightText;
      border-color: Highlight;
      forced-color-adjust: none;
    }
  }
}
@layer kit.components {
  :where(.kit-spinner) {
    inline-size: var(--kit-icon-size-md);
    block-size: var(--kit-icon-size-md);
    flex: none;
    color: inherit;
    animation: kit-spin var(--kit-period-spin) var(--kit-easing-linear) infinite;
    animation-play-state: var(--kit-animation-play-state);
  }
  @keyframes kit-spin { to { rotate: 1turn; } }
}
@layer kit.components {
  :where(.kit-icon) {
    --_size: var(--kit-icon-size-md);
    inline-size: var(--_size);
    block-size: var(--_size);
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--kit-icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  :where(.kit-icon)[data-size="sm"] { --_size: var(--kit-icon-size-sm); }
  :where(.kit-icon)[data-size="lg"] { --_size: var(--kit-icon-size-lg); }
  :where(.kit-icon)[data-fill="solid"] {
    fill: currentColor;
    stroke: none;
  }
  :where(.kit-icon-lead) {
    align-self: flex-start;
    margin-block-start: calc((1lh - var(--_size, var(--kit-icon-size-md))) / 2);
  }
}
@layer kit.components {
  :where(.kit-clamp) {
    --kit-clamp-lines: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--kit-clamp-lines);
    overflow: hidden;
    max-block-size: calc(var(--kit-clamp-lines) * 1lh);
    transition: max-block-size var(--kit-duration-2) var(--kit-easing-standard);
  }
  :where(.kit-expandable) {
    interpolate-size: allow-keywords;
  }
  :where(.kit-expandable:has([aria-expanded="true"])) :where(.kit-clamp) {
    -webkit-line-clamp: unset;
    max-block-size: max-content;
  }
  :where(.kit-expand-less) { display: none; }
  :where([aria-expanded="true"]) :where(.kit-expand-more) { display: none; }
  :where([aria-expanded="true"]) :where(.kit-expand-less) { display: inline; }
  :where(.kit-clamp-inline) {
    display: block;
    -webkit-line-clamp: unset;
  }
  :where(.kit-clamp-toggle) {
    float: inline-end;
    margin-block-start: calc((var(--kit-clamp-lines) - 1) * 1lh);
    margin-inline-start: var(--kit-space-inline);
    padding: 0 var(--kit-space-100);
    min-block-size: var(--kit-space-600);
    min-inline-size: var(--kit-space-600);
    border: 0;
    background: none;
    color: var(--kit-color-content-accent);
    font: inherit;
    cursor: pointer;
    border-radius: var(--kit-radius-mark);
  }
  @media (hover: hover) {
    :where(.kit-clamp-toggle):hover { background: var(--kit-color-surface-hover); }
  }
  :where(.kit-clamp-inline) { position: relative; }
  :where(.kit-expandable:has([aria-expanded="true"])) :where(.kit-clamp-inline) {
    padding-block-end: calc(1lh + var(--kit-space-100));
  }
  :where(.kit-expandable:has([aria-expanded="true"])) :where(.kit-clamp-toggle) {
    float: none;
    margin: 0;
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
  }
}
@layer kit.components {
  :where(.kit-field) {
    display: grid;
    gap: var(--kit-space-100);
    inline-size: 100%;
  }
  :where(.kit-field)[data-width="xs"] { inline-size: 8ch; }
  :where(.kit-field)[data-width="sm"] { inline-size: 14ch; }
  :where(.kit-field)[data-width="md"] { inline-size: 24ch; }
  :where(.kit-field-label) {
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
    font-weight: var(--kit-font-weight-medium);
    color: var(--kit-color-content);
  }
  :where(.kit-field-optional) {
    font-size: var(--kit-font-size-200);
    font-weight: var(--kit-font-weight-regular);
    color: var(--kit-color-content-muted);
  }
  :where(
    .kit-input,
    input:where([type="text"], [type="email"], [type="password"], [type="search"], [type="tel"],
                [type="url"], [type="number"], [type="date"], [type="time"], [type="datetime-local"],
                [type="month"], [type="week"]),
    textarea,
    select
  ) {
    inline-size: 100%;
    min-block-size: var(--kit-control-height-md);
    padding-inline: var(--kit-control-padding-x-md);
    padding-block: var(--kit-space-100);
    font-family: inherit;
    font-size: var(--kit-control-font-size-field);
    line-height: var(--kit-line-height-400);
    color: var(--kit-color-content);
    background: var(--kit-color-surface-raised);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border-interactive);
    border-radius: var(--kit-radius-control);
    box-shadow: var(--kit-elevation-inset);
    transition:
      border-color var(--kit-duration-1) var(--kit-easing-standard),
      background-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-field)[data-size="sm"] :where(.kit-input, input, textarea, select) {
    min-block-size: var(--kit-control-height-sm);
    padding-inline: var(--kit-control-padding-x-sm);
  }
  :where(.kit-field)[data-size="lg"] :where(.kit-input, input, textarea, select) {
    min-block-size: var(--kit-control-height-lg);
    padding-inline: var(--kit-control-padding-x-lg);
  }
  :where(textarea) {
    resize: vertical;
    min-block-size: calc(var(--kit-control-height-md) * 2);
    padding-block: var(--kit-space-200);
  }
  :where(.kit-input, input, textarea)::placeholder {
    color: var(--kit-color-content-muted);
    opacity: 1;
  }
  @media (hover: hover) {
    :where(.kit-input, input, textarea, select):hover:not(:disabled, [readonly]) {
      border-color: var(--kit-color-border-strong);
    }
  }
  :where(.kit-input, input, textarea):where([readonly]) {
    background: var(--kit-color-surface);
    box-shadow: none;
    border-color: var(--kit-color-border);
  }
  :where(.kit-input, input, textarea, select):disabled {
    color: var(--kit-color-content-disabled);
    background: var(--kit-color-surface-sunken);
    border-color: var(--kit-color-border);
    box-shadow: none;
    cursor: not-allowed;
  }
  :where(.kit-input, input, textarea, select):where([aria-invalid="true"], :user-invalid) {
    border-color: var(--kit-color-danger-border);
  }
  :where(.kit-field-help) {
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-200);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-field-error) {
    display: flex;
    align-items: flex-start;
    gap: var(--kit-space-inline);
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-200);
    color: var(--kit-color-danger-content);
  }
  :where(.kit-field-error) :where(.kit-icon) {
    color: var(--kit-color-danger-content);
    margin-block-start: calc((1lh - var(--kit-icon-size-sm)) / 2);
  }
  :where(.kit-input, .kit-textarea):focus-visible {
    box-shadow: var(--kit-elevation-inset), var(--kit-focus-halo);
  }
}
@layer kit.components {
  :where(.kit-choice) {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--kit-space-inline);
    align-items: start;
    min-block-size: var(--kit-space-600);
    cursor: pointer;
  }
  :where(.kit-choice):has(:disabled) {
    cursor: not-allowed;
    color: var(--kit-color-content-disabled);
  }
  :where(.kit-choice-label) {
    font-size: var(--kit-font-size-400);
    line-height: var(--kit-line-height-400);
  }
  :where(.kit-checkbox, .kit-radio),
  :where(.kit-choice) > :where(input[type="checkbox"]:not([role="switch"]), input[type="radio"]) {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    inline-size: var(--kit-control-mark-size);
    block-size: var(--kit-control-mark-size);
    margin: 0;
    display: inline-grid;
    place-content: center;
    border: var(--kit-border-width-hairline) solid var(--kit-color-border-interactive);
    background: var(--kit-color-surface-raised);
    box-shadow: var(--kit-elevation-inset);
    cursor: inherit;
    transition:
      background-color var(--kit-duration-1) var(--kit-easing-standard),
      border-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-checkbox),
  :where(.kit-choice) > :where(input[type="checkbox"]:not([role="switch"])) { border-radius: var(--kit-radius-mark); }
  :where(.kit-radio),
  :where(.kit-choice) > :where(input[type="radio"]) { border-radius: var(--kit-radius-full); }
  :where(.kit-checkbox, .kit-radio)::before,
  :where(.kit-choice) > :where(input[type="checkbox"]:not([role="switch"]), input[type="radio"])::before {
    content: "";
    inline-size: calc(var(--kit-control-mark-size) - 6px);
    block-size: calc(var(--kit-control-mark-size) - 6px);
    background: var(--kit-color-on-accent);
    scale: 0;
    transition: scale var(--kit-duration-1) var(--kit-easing-spring);
  }
  :where(.kit-checkbox)::before,
  :where(.kit-choice) > :where(input[type="checkbox"]:not([role="switch"]))::before {
    clip-path: polygon(14% 44%, 0 58%, 43% 100%, 100% 16%, 86% 2%, 43% 72%);
  }
  :where(.kit-radio)::before,
  :where(.kit-choice) > :where(input[type="radio"])::before {
    border-radius: var(--kit-radius-full);
    inline-size: calc(var(--kit-control-mark-size) - 10px);
    block-size: calc(var(--kit-control-mark-size) - 10px);
  }
  :where(.kit-checkbox, .kit-radio):checked,
  :where(.kit-choice) > :where(input[type="checkbox"]:not([role="switch"]), input[type="radio"]):checked {
    background: var(--kit-color-accent);
    border-color: var(--kit-color-accent);
    box-shadow: none;
  }
  :where(.kit-checkbox, .kit-radio):checked::before,
  :where(.kit-choice) > :where(input[type="checkbox"]:not([role="switch"]), input[type="radio"]):checked::before { scale: 1; }
  :where(.kit-checkbox):indeterminate,
  :where(.kit-choice) > :where(input[type="checkbox"]:not([role="switch"])):indeterminate {
    background: var(--kit-color-accent);
    border-color: var(--kit-color-accent);
    box-shadow: none;
  }
  :where(.kit-checkbox):indeterminate::before,
  :where(.kit-choice) > :where(input[type="checkbox"]:not([role="switch"])):indeterminate::before {
    scale: 1;
    clip-path: polygon(6% 40%, 94% 40%, 94% 60%, 6% 60%);
  }
  @media (hover: hover) {
    :where(.kit-choice):hover > :where(input:not(:disabled, :checked)) {
      border-color: var(--kit-color-border-strong);
    }
  }
  :where(.kit-checkbox, .kit-radio):disabled,
  :where(.kit-choice) > :where(input):disabled {
    background: var(--kit-color-surface-sunken);
    border-color: var(--kit-color-border);
    box-shadow: none;
    cursor: not-allowed;
  }
  :where(.kit-choice) > :where(input):disabled:checked { background: var(--kit-color-content-disabled); border-color: var(--kit-color-content-disabled); }
  :where(.kit-choice) > :where(input) {
    margin-block-start: calc((1lh - var(--kit-control-mark-size)) / 2);
  }
  :where(.kit-switch),
  :where(.kit-choice) > :where(input[role="switch"]) {
    --_travel: calc(2rem - (2 * var(--kit-border-width-hairline)) - (var(--kit-control-mark-size) - 4px));
    --_dir: 1;
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    position: relative;
    inline-size: 2rem;
    block-size: var(--kit-control-mark-size);
    margin: 0;
    border: var(--kit-border-width-hairline) solid var(--kit-color-border-interactive);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-surface-sunken);
    cursor: inherit;
    transition:
      background-color var(--kit-duration-1) var(--kit-easing-standard),
      border-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-switch):dir(rtl),
  :where(.kit-choice) > :where(input[role="switch"]):dir(rtl) { --_dir: -1; }
  :where(.kit-switch)::before,
  :where(.kit-choice) > :where(input[role="switch"])::before {
    content: "";
    position: absolute;
    inset-block: 0;
    margin-block: auto;
    inset-inline-start: 0;
    inline-size: calc(var(--kit-control-mark-size) - 4px);
    block-size: calc(var(--kit-control-mark-size) - 4px);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-content-muted);
    clip-path: none;
    scale: 1;
    translate: 0;
    transition:
      translate var(--kit-duration-1) var(--kit-easing-standard),
      background-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-switch):checked,
  :where(.kit-choice) > :where(input[role="switch"]):checked {
    background: var(--kit-color-accent);
    border-color: var(--kit-color-accent);
  }
  :where(.kit-switch):checked::before,
  :where(.kit-choice) > :where(input[role="switch"]):checked::before {
    translate: calc(var(--_travel) * var(--_dir));
    background: var(--kit-color-on-accent);
  }
  :where(.kit-choice-group) {
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--kit-space-200);
  }
  :where(.kit-choice-group) > :where(legend) {
    padding: 0;
    margin-block-end: var(--kit-space-100);
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
    font-weight: var(--kit-font-weight-medium);
  }
  :where(.kit-choice-group) :where(.kit-choice-group) {
    padding-inline-start: calc(var(--kit-control-mark-size) + var(--kit-space-inline));
  }
  :where(.kit-checkbox, .kit-radio, .kit-switch):focus-visible {
    box-shadow: var(--kit-elevation-inset), var(--kit-focus-halo);
  }
  @media (forced-colors: active) {
    :where(.kit-checkbox, .kit-radio, .kit-switch),
    :where(.kit-choice) > :where(input) {
      border-color: CanvasText;
      background: Canvas;
      box-shadow: none;
    }
    :where(.kit-checkbox, .kit-radio, .kit-switch):checked,
    :where(.kit-choice) > :where(input):checked,
    :where(.kit-choice) > :where(input):indeterminate {
      background: Highlight;
      border-color: Highlight;
    }
    :where(.kit-choice) > :where(input)::before { background: HighlightText; }
    :where(.kit-choice) > :where(input[role="switch"])::before { background: CanvasText; clip-path: none; }
    :where(.kit-choice) > :where(input):disabled { border-color: GrayText; }
  }
}
@layer kit.components {
  :where(.kit-select, select:not([multiple], [size])) {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: var(--kit-space-600);
    --_caret: var(--kit-color-content-muted);
    background-image:
      linear-gradient(45deg, transparent 50%, var(--_caret) 50%),
      linear-gradient(135deg, var(--_caret) 50%, transparent 50%);
    background-size: 5px 5px;
    background-repeat: no-repeat;
    background-position: calc(100% - var(--kit-space-400)) center, calc(100% - var(--kit-space-300)) center;
  }
  :where(.kit-select, select:not([multiple], [size])):dir(rtl) {
    background-position: var(--kit-space-300) center, var(--kit-space-400) center;
    background-image:
      linear-gradient(135deg, transparent 50%, var(--_caret) 50%),
      linear-gradient(45deg, var(--_caret) 50%, transparent 50%);
  }
  :where(.kit-select, select):disabled { --_caret: var(--kit-color-content-disabled); }
  :where(.kit-select, select):has(option[value=""]:checked) {
    color: var(--kit-color-content-muted);
  }
  :where(select) > :where(option) {
    background: var(--kit-color-surface-raised);
    color: var(--kit-color-content);
  }
  :where(select) > :where(optgroup) {
    font-weight: var(--kit-font-weight-semibold);
    color: var(--kit-color-content-muted);
  }
  :where(select[multiple], select[size]) {
    padding-inline-end: var(--kit-control-padding-x-md);
    background-image: none;
    block-size: auto;
  }
  @supports (appearance: base-select) {
    :where(select:not([multiple], [size])),
    :where(select:not([multiple], [size]))::picker(select) {
      appearance: base-select;
    }
    :where(select:not([multiple], [size])) {
      background-image: none;
      padding-inline-end: var(--kit-control-padding-x-md);
      gap: var(--kit-space-200);
      align-items: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    :where(.kit-field)[data-size="sm"] :where(select:not([multiple], [size])) { padding-inline-end: var(--kit-control-padding-x-sm); }
    :where(select:not([multiple], [size]))::picker-icon {
      content: "";
      inline-size: var(--kit-icon-size-sm);
      block-size: var(--kit-icon-size-sm);
      margin-inline-start: auto;
      flex: none;
      background-color: var(--_caret, var(--kit-color-content-muted));
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
      transition: rotate var(--kit-duration-1) var(--kit-easing-standard);
    }
    :where(select:not([multiple], [size])):open::picker-icon { rotate: 180deg; }
    :where(select:not([multiple], [size]))::picker(select) {
      margin-block: var(--kit-space-100);
      padding: var(--kit-space-100);
      border: var(--kit-border-width-hairline) solid var(--kit-color-border);
      border-radius: var(--kit-radius-surface);
      background: var(--kit-color-surface-raised);
      color: var(--kit-color-content);
      box-shadow: var(--kit-elevation-2);
      min-inline-size: anchor-size(inline);
      max-block-size: min(22rem, 60dvh);
      overflow-y: auto;
      position-try-order: most-block-size;
      scrollbar-width: thin;
      scrollbar-color: color-mix(in oklab, var(--kit-color-content) 22%, transparent) transparent;
      scrollbar-gutter: stable;
      overscroll-behavior: contain;
      opacity: 0;
      translate: 0 -4px;
      transition:
        opacity var(--kit-duration-1) var(--kit-easing-standard),
        translate var(--kit-duration-1) var(--kit-easing-standard),
        display var(--kit-duration-1) allow-discrete,
        overlay var(--kit-duration-1) allow-discrete;
    }
    :where(select:not([multiple], [size])):open::picker(select) { opacity: 1; translate: 0 0; }
    @starting-style {
      :where(select:not([multiple], [size])):open::picker(select) { opacity: 0; translate: 0 -4px; }
    }
    :where(select:not([multiple], [size])) :where(option) {
      display: flex;
      align-items: center;
      gap: var(--kit-space-inline);
      min-block-size: var(--kit-space-800);
      padding-inline: var(--kit-space-300);
      border-radius: var(--kit-radius-100);
      font-size: var(--kit-font-size-400);
      line-height: var(--kit-line-height-400);
      color: var(--kit-color-content);
      background: none;
      transition: background-color var(--kit-duration-1) var(--kit-easing-standard);
    }
    :where(select:not([multiple], [size])) :where(option):focus-visible,
    :where(select:not([multiple], [size])) :where(option):focus { background: var(--kit-color-surface-hover); outline: none; }
    :where(select:not([multiple], [size])) :where(option):disabled { color: var(--kit-color-content-disabled); }
    :where(select:not([multiple], [size])) :where(option)::checkmark {
      content: "";
      order: 1;
      margin-inline-start: auto;
      inline-size: var(--kit-icon-size-sm);
      block-size: var(--kit-icon-size-sm);
      background-color: var(--kit-color-content-accent);
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
      opacity: 0;
      scale: 0.7;
      transition: opacity var(--kit-duration-1) var(--kit-easing-standard), scale var(--kit-duration-1) var(--kit-easing-standard);
    }
    :where(select:not([multiple], [size])) :where(option):checked::checkmark { opacity: 1; scale: 1; }
    :where(select:not([multiple], [size])) :where(optgroup) {
      padding-block-start: var(--kit-space-100);
    }
    :where(select:not([multiple], [size])) :where(optgroup) > :where(legend),
    :where(select:not([multiple], [size])) :where(optgroup)::before {
      padding: var(--kit-space-150) var(--kit-space-300) var(--kit-space-100);
      font-size: var(--kit-font-size-200);
      font-weight: var(--kit-font-weight-semibold);
      color: var(--kit-color-content-muted);
    }
    @media (forced-colors: active) {
      :where(select:not([multiple], [size]))::picker-icon,
      :where(select:not([multiple], [size])) :where(option)::checkmark { background-color: CanvasText; }
      :where(select:not([multiple], [size])) :where(option):focus { background: Highlight; color: HighlightText; }
    }
  }
  :where(select)[data-width="xs"] { inline-size: 8ch; }
  :where(select)[data-width="sm"] { inline-size: 14ch; }
  :where(select)[data-width="md"] { inline-size: 24ch; }
}
@layer kit.components {
  :where(.kit-fieldset) {
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
    display: grid;
    gap: var(--kit-space-stack-tight);
  }
  :where(.kit-fieldset) > :where(legend) {
    grid-column: 1 / -1;
    padding: 0;
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
    font-weight: var(--kit-font-weight-medium);
    color: var(--kit-color-content);
  }
  :where(.kit-field-row) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--kit-field-row-min, 12rem), 1fr));
    gap: var(--kit-space-inline);
    align-items: start;
  }
  @supports (grid-template-rows: subgrid) {
    :where(.kit-field-row) {
      grid-template-rows: auto auto auto;
    }
    :where(.kit-field-row) > :where(.kit-field) {
      grid-row: span 3;
      grid-template-rows: subgrid;
    }
  }
  :where(.kit-control-row) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--kit-space-200);
    margin: 0;
  }
  :where(.kit-control-row, .kit-toolbar-actions, .kit-toolbar-filters, .kit-toolbar-filter-set,
         .kit-toolbar-search, .kit-view-switch, .kit-filter-range, .kit-columns-actions,
         .kit-pagination-jump, .kit-pagination-size)
    > :where(label:not(.kit-field, .kit-input-group, .kit-choice)),
  :where(.kit-inline-field) {
    display: inline-flex;
    align-items: center;
    gap: var(--kit-space-200);
    margin: 0;
    white-space: nowrap;
    font-size: var(--kit-font-size-300);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-control-row, .kit-toolbar-actions, .kit-toolbar-filters, .kit-toolbar-filter-set,
         .kit-toolbar-search, .kit-view-switch, .kit-filter-range, .kit-columns-actions,
         .kit-pagination-jump, .kit-pagination-size)
    > :where(label:not(.kit-field, .kit-input-group, .kit-choice))
    > :where(.kit-input, select, textarea,
           input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"])),
  :where(.kit-control-row, .kit-toolbar-actions, .kit-toolbar-filters, .kit-toolbar-filter-set,
         .kit-toolbar-search, .kit-view-switch, .kit-filter-range, .kit-columns-actions,
         .kit-pagination-jump, .kit-pagination-size)
    > :where(.kit-input, select, textarea,
           input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"])),
  :where(.kit-inline-field) > :where(.kit-input, select, textarea,
           input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"])) {
    inline-size: auto;
  }
  :where(.kit-control-row, .kit-toolbar-actions, .kit-toolbar-filters, .kit-toolbar-filter-set,
         .kit-toolbar-search, .kit-view-switch, .kit-filter-range, .kit-columns-actions,
         .kit-pagination-jump, .kit-pagination-size):has(> .kit-field) { --_row-display: grid; }
  :where(.kit-control-row, .kit-toolbar-actions, .kit-toolbar-filters, .kit-toolbar-filter-set,
         .kit-toolbar-search, .kit-view-switch, .kit-filter-range, .kit-columns-actions,
         .kit-pagination-jump, .kit-pagination-size):has(> .kit-field):not([popover]) { display: grid; }
  :where(.kit-control-row, .kit-toolbar-actions, .kit-toolbar-filters, .kit-toolbar-filter-set,
         .kit-toolbar-search, .kit-view-switch, .kit-filter-range, .kit-columns-actions,
         .kit-pagination-jump, .kit-pagination-size):has(> .kit-field):not(:popover-open) {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    grid-template-rows: repeat(4, auto);
    column-gap: var(--kit-space-200);
    row-gap: 0;
    justify-content: start;
    align-items: center;
  }
  :where(.kit-control-row, .kit-toolbar-actions, .kit-toolbar-filters, .kit-toolbar-filter-set,
         .kit-toolbar-search, .kit-view-switch, .kit-filter-range, .kit-columns-actions,
         .kit-pagination-jump, .kit-pagination-size):has(> .kit-field):not(:popover-open) > :where(.kit-field) {
    grid-row: 1 / span 4;
    grid-template-rows: subgrid;
    align-self: stretch;
  }
  :where(.kit-control-row, .kit-toolbar-actions, .kit-toolbar-filters, .kit-toolbar-filter-set,
         .kit-toolbar-search, .kit-view-switch, .kit-filter-range, .kit-columns-actions,
         .kit-pagination-jump, .kit-pagination-size):has(> .kit-field):not(:popover-open) > :where(:not(.kit-field)) {
    grid-row: 2;
  }
  @container (max-width: 30rem) {
    :where(.kit-control-row, .kit-toolbar-actions, .kit-toolbar-filters, .kit-toolbar-filter-set,
         .kit-toolbar-search, .kit-view-switch, .kit-filter-range, .kit-columns-actions,
         .kit-pagination-jump, .kit-pagination-size):has(> .kit-field):not(:popover-open) {
      grid-auto-flow: row;
      grid-auto-columns: auto;
      grid-template-rows: none;
      row-gap: var(--kit-space-300);
      justify-items: start;
    }
    :where(.kit-control-row, .kit-toolbar-actions, .kit-toolbar-filters, .kit-toolbar-filter-set,
         .kit-toolbar-search, .kit-view-switch, .kit-filter-range, .kit-columns-actions,
         .kit-pagination-jump, .kit-pagination-size):has(> .kit-field):not(:popover-open) > :where(*) { grid-row: auto; }
    :where(.kit-control-row, .kit-toolbar-actions, .kit-toolbar-filters, .kit-toolbar-filter-set,
         .kit-toolbar-search, .kit-view-switch, .kit-filter-range, .kit-columns-actions,
         .kit-pagination-jump, .kit-pagination-size):has(> .kit-field):not(:popover-open) > :where(.kit-field) { grid-template-rows: none; }
  }
  :where(.kit-control-row, .kit-toolbar-actions, .kit-toolbar-filters, .kit-toolbar-filter-set,
         .kit-toolbar-search, .kit-view-switch, .kit-filter-range, .kit-columns-actions,
         .kit-pagination-jump, .kit-pagination-size) > :where(.kit-field) { row-gap: 0; }
  :where(.kit-control-row, .kit-toolbar-actions, .kit-toolbar-filters, .kit-toolbar-filter-set,
         .kit-toolbar-search, .kit-view-switch, .kit-filter-range, .kit-columns-actions,
         .kit-pagination-jump, .kit-pagination-size) > :where(.kit-field) > :where(.kit-field-label) {
    grid-row: 1;
    align-self: end;
    margin-block-end: var(--kit-space-100);
  }
  :where(.kit-control-row, .kit-toolbar-actions, .kit-toolbar-filters, .kit-toolbar-filter-set,
         .kit-toolbar-search, .kit-view-switch, .kit-filter-range, .kit-columns-actions,
         .kit-pagination-jump, .kit-pagination-size) > :where(.kit-field) > :where(:not(.kit-field-label, .kit-field-help, .kit-field-error)) {
    grid-row: 2;
    align-self: center;
  }
  :where(.kit-control-row, .kit-toolbar-actions, .kit-toolbar-filters, .kit-toolbar-filter-set,
         .kit-toolbar-search, .kit-view-switch, .kit-filter-range, .kit-columns-actions,
         .kit-pagination-jump, .kit-pagination-size) > :where(.kit-field) > :where(.kit-field-help) {
    grid-row: 3;
    margin-block-start: var(--kit-space-100);
  }
  :where(.kit-control-row, .kit-toolbar-actions, .kit-toolbar-filters, .kit-toolbar-filter-set,
         .kit-toolbar-search, .kit-view-switch, .kit-filter-range, .kit-columns-actions,
         .kit-pagination-jump, .kit-pagination-size) > :where(.kit-field) > :where(.kit-field-error) {
    grid-row: 4;
    margin-block-start: var(--kit-space-100);
  }
  :where(.kit-field-control) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kit-space-200);
    min-inline-size: 0;
  }
  :where(.kit-field-control) > :where(.kit-input, select, textarea, .kit-input-group,
      input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"])) {
    flex: 1 1 auto;
    inline-size: auto;
    min-inline-size: 0;
  }
  :where(.kit-input-group) {
    display: flex;
    align-items: stretch;
    inline-size: 100%;
    min-block-size: var(--kit-control-height-md);
    background: var(--kit-color-surface-raised);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border-interactive);
    border-radius: var(--kit-radius-control);
    box-shadow: var(--kit-elevation-inset);
    transition: border-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-input-group) > :where(input, select, textarea, .kit-input) {
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    min-block-size: auto;
    inline-size: 100%;
    min-inline-size: 0;
  }
  :where(.kit-input-group):has(:focus-visible) {
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: var(--kit-focus-offset);
    border-color: var(--kit-color-border-strong);
  }
  :where(.kit-input-group) > :where(input, select, textarea):focus-visible {
    outline: none;
  }
  :where(.kit-input-addon) {
    display: flex;
    align-items: center;
    padding-inline: var(--kit-control-padding-x-md);
    color: var(--kit-color-content-muted);
    font-size: var(--kit-control-font-size-field);
    white-space: nowrap;
    user-select: none;
  }
  :where(.kit-input-addon)[data-position="start"] { padding-inline-end: 0; }
  :where(.kit-input-addon)[data-position="end"] { padding-inline-start: 0; }
  :where(.kit-input-group):has(:disabled) {
    background: var(--kit-color-surface-sunken);
    border-color: var(--kit-color-border);
    box-shadow: none;
  }
  :where(.kit-input-group):has([aria-invalid="true"], :user-invalid) {
    border-color: var(--kit-color-danger-border);
  }
  :where(.kit-form-actions) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kit-space-inline);
    margin-block-start: var(--kit-space-section);
    justify-content: flex-end;
  }
  :where(.kit-form-actions)[data-align="start"] { justify-content: flex-start; }
  :where(.kit-form-actions)[data-align="between"] { justify-content: space-between; }
  @container (max-width: 24rem) {
    :where(.kit-form-actions) > :where(.kit-button) { flex: 1 1 100%; }
  }
  :where(.kit-input-group) > :where(input, select, textarea):focus-visible {
    box-shadow: var(--kit-elevation-inset), var(--kit-focus-halo);
  }
}
@layer kit.components {
  :where(.kit-password-toggle) {
    flex: none;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    min-block-size: 0;
    border-start-end-radius: var(--kit-radius-control);
    border-end-end-radius: var(--kit-radius-control);
    color: var(--kit-color-content-muted);
    font-size: var(--kit-font-size-200);
    font-weight: var(--kit-font-weight-medium);
    white-space: nowrap;
  }
  @media (hover: hover) {
    :where(.kit-password-toggle):not(:disabled):hover {
      background: var(--kit-color-surface-hover);
      color: var(--kit-color-content);
    }
  }
  :where(.kit-input-group):has(> .kit-password-toggle:focus-visible) {
    outline: none;
  }
  :where(.kit-input-group)[data-kit-password-shown] > :where(input) {
    font-family: var(--kit-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--kit-control-font-size-field);
  }
  :where(.kit-password-toggle):disabled {
    color: var(--kit-color-content-disabled);
    cursor: not-allowed;
  }
}
@layer kit.components {
  @property --kit-otp-length {
    syntax: '<integer>';
    inherits: true;
    initial-value: 6;
  }
  :where(.kit-otp) {
    inline-size: fit-content;
    max-inline-size: 100%;
  }
  :where(.kit-otp-cells) {
    --_cell: 2.75ch;
    --_gap: calc(var(--_cell) - 1ch);
    --_slack: calc(var(--_gap) / 2);
    --_to: to right;
    font-family: var(--kit-font-mono);
    font-size: var(--kit-control-font-size-field);
    font-variant-numeric: tabular-nums;
    font-variant-ligatures: none;
    letter-spacing: var(--_gap);
    text-indent: var(--_slack);
    text-align: start;
    inline-size: calc(
      var(--_cell) * var(--kit-otp-length)
      + var(--_slack)
      + var(--kit-control-padding-x-md) * 2
    );
    background-image: repeating-linear-gradient(
      var(--_to),
      transparent 0 calc(var(--_cell) - var(--kit-border-width-hairline)),
      var(--kit-color-border) 0 var(--_cell)
    );
    background-origin: content-box;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: calc(
      var(--_cell) * (var(--kit-otp-length) - 1) + var(--kit-border-width-hairline)
    ) 100%;
  }
  :where(.kit-otp-cells):dir(rtl) {
    --_to: to left;
    background-position: 100% 0;
  }
  :where(.kit-otp-input) {
    caret-color: var(--kit-color-accent);
  }
  :where(.kit-otp-display) {
    display: block;
    margin: 0;
    padding-inline: var(--kit-control-padding-x-md);
    padding-block: var(--kit-space-100);
    min-block-size: var(--kit-control-height-md);
    color: var(--kit-color-content);
    user-select: text;
  }
  :where(.kit-otp-display)[data-size="lg"] {
    font-size: var(--kit-font-size-600);
    min-block-size: var(--kit-control-height-lg);
  }
  :where(.kit-otp-countdown) {
    display: flex;
    align-items: center;
    gap: var(--kit-space-inline);
    margin: 0;
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-200);
    color: var(--kit-color-content-muted);
    font-variant-numeric: tabular-nums;
  }
  :where(.kit-otp-countdown)[data-state="rotating"] {
    color: var(--kit-color-content);
  }
  :where(.kit-otp-countdown)[data-state="idle"] {
    visibility: hidden;
  }
}
@layer kit.components {
  :where(.kit-qr) {
    --kit-qr-size: 13rem;
    display: grid;
    gap: var(--kit-space-stack-tight);
    justify-items: start;
    margin: 0;
    inline-size: fit-content;
    max-inline-size: 100%;
  }
  :where(.kit-qr-well) {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: var(--kit-qr-size);
    max-inline-size: 100%;
    aspect-ratio: 1;
    padding: var(--kit-space-200);
    background: var(--kit-color-surface-raised);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-surface);
    box-sizing: border-box;
  }
  :where(.kit-qr-picture) {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    image-rendering: pixelated;
    object-fit: contain;
  }
  :where(.kit-qr-payload) {
    margin: 0;
    max-inline-size: var(--kit-qr-size);
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-200);
    color: var(--kit-color-content-muted);
    overflow-wrap: anywhere;
  }
  :where(.kit-qr)[data-state="loading"] > :where(.kit-qr-well) > :where(.kit-qr-picture),
  :where(.kit-qr)[data-state="failed"] > :where(.kit-qr-well) > :where(.kit-qr-picture) {
    visibility: hidden;
  }
  :where(.kit-qr-well) > :where(.kit-qr-note) {
    position: absolute;
    inset: 0;
    display: none;
    place-content: center;
    gap: var(--kit-space-100);
    justify-items: center;
    padding: var(--kit-space-200);
    text-align: center;
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-200);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-qr)[data-state="loading"] :where(.kit-qr-note)[data-for="loading"],
  :where(.kit-qr)[data-state="failed"] :where(.kit-qr-note)[data-for="failed"] {
    display: grid;
  }
  :where(.kit-qr)[data-state="failed"] :where(.kit-qr-note)[data-for="failed"] {
    color: var(--kit-color-danger-content);
  }
}
@layer kit.components {
  :where(.kit-combobox) {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--kit-space-100);
    padding-inline: var(--kit-space-100) var(--kit-control-padding-x-md);
    cursor: text;
  }
  :where(.kit-combobox) > :where(.kit-combobox-input) {
    flex: 1 1 6rem;
    min-inline-size: 4rem;
    padding-inline: var(--kit-space-200);
    text-overflow: ellipsis;
  }
  :where(.kit-combobox-icon) {
    flex: none;
    inline-size: var(--kit-icon-size-sm);
    block-size: var(--kit-icon-size-sm);
    background-color: var(--kit-color-content-muted);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: rotate var(--kit-duration-1) var(--kit-easing-standard);
    pointer-events: none;
  }
  :where(.kit-combobox)[data-state="open"] :where(.kit-combobox-icon) { rotate: 180deg; }
  :where(.kit-combobox-source) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
  }
  :where(.kit-combobox)[data-invalid] { border-color: var(--kit-color-danger-border); }
  :where(.kit-combobox-chips) {
    display: flex;
    flex-wrap: wrap;
    flex: 0 1 auto;
    gap: var(--kit-space-100);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  :where(.kit-combobox-chips):empty { display: none; }
  :where(.kit-combobox-chip) {
    display: inline-flex;
    align-items: center;
    gap: var(--kit-space-050);
    min-block-size: var(--kit-space-600);
    padding-inline: var(--kit-space-200) var(--kit-space-050);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-accent-tint);
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-none);
    color: var(--kit-color-content);
  }
  :where(.kit-combobox-chip)[data-armed] {
    border-color: var(--kit-color-danger-border);
    background: var(--kit-color-danger-surface);
  }
  :where(.kit-combobox-chip-remove) {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: var(--kit-space-500);
    block-size: var(--kit-space-500);
    border-radius: var(--kit-radius-full);
    color: var(--kit-color-content-muted);
    cursor: pointer;
  }
  :where(.kit-combobox-chip-remove)::before {
    content: "";
    inline-size: var(--kit-icon-size-sm);
    block-size: var(--kit-icon-size-sm);
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 80% no-repeat;
  }
  @media (hover: hover) {
    :where(.kit-combobox-chip-remove):hover { background: var(--kit-color-surface-hover); color: var(--kit-color-content); }
  }
  :where(.kit-listbox-popover) {
    position: fixed;
    inset: auto;
    margin: 0;
    margin-block: var(--kit-space-100);
    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-block;
    position-try-order: most-block-size;
    position-visibility: anchors-visible;
    overflow: visible;
    min-inline-size: anchor-size(inline);
    max-inline-size: min(32rem, calc(100vw - var(--kit-space-600)));
    padding: var(--kit-space-100);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-surface);
    background: var(--kit-color-surface-raised);
    color: var(--kit-color-content);
    box-shadow: var(--kit-elevation-2);
    opacity: 0;
    translate: 0 -4px;
    transition:
      opacity var(--kit-duration-1) var(--kit-easing-standard),
      translate var(--kit-duration-1) var(--kit-easing-standard),
      display var(--kit-duration-1) allow-discrete,
      overlay var(--kit-duration-1) allow-discrete;
  }
  :where(.kit-listbox-popover):popover-open { opacity: 1; translate: 0 0; }
  @starting-style {
    :where(.kit-listbox-popover):popover-open { opacity: 0; translate: 0 -4px; }
  }
  :where(.kit-listbox) {
    display: grid;
    align-content: start;
    max-block-size: calc(var(--kit-space-800) * 8 + var(--kit-space-100));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklab, var(--kit-color-content) 22%, transparent) transparent;
    scrollbar-gutter: stable;
  }
  :where(.kit-listbox-option) {
    display: flex;
    align-items: center;
    gap: var(--kit-space-inline);
    min-block-size: var(--kit-space-800);
    padding-inline: var(--kit-space-300);
    border-radius: var(--kit-radius-100);
    font-size: var(--kit-font-size-400);
    line-height: var(--kit-line-height-400);
    color: var(--kit-color-content);
    background: none;
    cursor: pointer;
    transition: background-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-listbox-option)[data-active] { background: var(--kit-color-surface-hover); }
  :where(.kit-listbox-option)[aria-disabled="true"] { color: var(--kit-color-content-disabled); cursor: not-allowed; }
  :where(.kit-listbox-option-hint) {
    font-size: var(--kit-font-size-300);
    color: var(--kit-color-content-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :where(.kit-listbox-option-label) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :where(.kit-listbox-option)::after {
    content: "";
    flex: none;
    order: 1;
    margin-inline-start: auto;
    inline-size: var(--kit-icon-size-sm);
    block-size: var(--kit-icon-size-sm);
    background-color: var(--kit-color-content-accent);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0;
    scale: 0.7;
    transition: opacity var(--kit-duration-1) var(--kit-easing-standard), scale var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-listbox-option)[aria-selected="true"]::after { opacity: 1; scale: 1; }
  :where(.kit-listbox-group) {
    padding: var(--kit-space-150) var(--kit-space-300) var(--kit-space-100);
    font-size: var(--kit-font-size-200);
    font-weight: var(--kit-font-weight-semibold);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-listbox-empty) {
    padding: var(--kit-space-200) var(--kit-space-300);
    font-size: var(--kit-font-size-300);
    color: var(--kit-color-content-muted);
  }
  @media (forced-colors: active) {
    :where(.kit-combobox-icon), :where(.kit-listbox-option)::after { background-color: CanvasText; }
    :where(.kit-listbox-option)[data-active] { background: Highlight; color: HighlightText; }
    :where(.kit-combobox-chip) { border-color: CanvasText; }
  }
}
@layer kit.components {
  :where(.kit-date-field) {
    align-items: center;
    padding-inline: var(--kit-control-padding-x-md);
    font-size: var(--kit-control-font-size-field);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: text;
  }
  :where(.kit-date-field):has(:where(.kit-segment):focus) {
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: var(--kit-focus-offset);
    border-color: var(--kit-color-border-strong);
  }
  :where(.kit-segment) {
    display: inline-block;
    padding-inline: var(--kit-space-050);
    border-radius: var(--kit-radius-mark);
    text-align: center;
    color: var(--kit-color-content);
    caret-color: transparent;
    outline: none;
    transition: background-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-segment)[data-part="year"] { min-inline-size: calc(4ch + 2 * var(--kit-space-050)); }
  :where(.kit-segment):where([data-part="month"], [data-part="day"], [data-part="hour"], [data-part="minute"], [data-part="second"]) {
    min-inline-size: calc(2ch + 2 * var(--kit-space-050));
  }
  :where(.kit-segment)[data-part="dayPeriod"] { display: inline-grid; }
  :where(.kit-segment)[data-part="dayPeriod"] > * { grid-area: 1 / 1; }
  :where(.kit-segment-sizer) { visibility: hidden; }
  :where(.kit-date-field) > :where(.kit-input-addon) { padding-inline-start: var(--kit-space-200); }
  :where(.kit-segment):not([aria-valuenow], [data-typing]) { color: var(--kit-color-content-muted); }
  :where(.kit-segment):focus { background: var(--kit-color-accent-tint); color: var(--kit-color-content); }
  :where(.kit-segment-literal) {
    color: var(--kit-color-content-muted);
    white-space: pre;
    user-select: none;
  }
  :where(.kit-date-field-button) {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: var(--kit-control-height-sm);
    block-size: var(--kit-control-height-sm);
    margin-inline: auto calc(var(--kit-space-200) * -1);
    padding: 0;
    border: 0;
    border-radius: var(--kit-radius-100);
    background: transparent;
    color: var(--kit-color-content-muted);
    cursor: pointer;
    transition: background-color var(--kit-duration-1) var(--kit-easing-standard), color var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-date-field-button) > :where(.kit-icon) { --_size: var(--kit-icon-size-sm); }
  @media (hover: hover) {
    :where(.kit-date-field-button):hover:not([aria-disabled="true"]) { background: var(--kit-color-surface-hover); color: var(--kit-color-content); }
  }
  :where(.kit-date-field-button):focus-visible {
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: calc(var(--kit-focus-width) * -1);
  }
  :where(.kit-date-field-button)[aria-disabled="true"] { color: var(--kit-color-content-disabled); cursor: not-allowed; }
  :where(.kit-date-field-button)[aria-expanded="true"] { background: var(--kit-color-surface-pressed); color: var(--kit-color-content); }
  :where(.kit-date-field)[aria-disabled="true"] {
    background: var(--kit-color-surface-sunken);
    border-color: var(--kit-color-border);
    box-shadow: none;
    cursor: not-allowed;
  }
  :where(.kit-date-field)[aria-disabled="true"] :where(.kit-segment, .kit-segment-literal) { color: var(--kit-color-content-disabled); }
  :where(.kit-date-field)[data-invalid] { border-color: var(--kit-color-danger-border); }
  :where(.kit-date-source) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
  }
  @media (forced-colors: active) {
    :where(.kit-segment):focus { background: Highlight; color: HighlightText; forced-color-adjust: none; }
  }
}
@layer kit.components {
  :where(.kit-duration-input) {
    align-items: stretch;
    font-variant-numeric: tabular-nums;
  }
  :where(.kit-duration-input) > :where(input) { text-align: center; }
  :where(.kit-duration-step) {
    display: inline-grid;
    place-items: center;
    flex: none;
    padding-inline: var(--kit-space-200);
    color: var(--kit-color-content-muted);
    cursor: pointer;
    user-select: none;
    transition: color var(--kit-duration-1) var(--kit-easing-standard);
  }
  @media (hover: hover) {
    :where(.kit-duration-step):not([aria-disabled="true"]):hover { color: var(--kit-color-content); }
  }
  :where(.kit-duration-step)[aria-disabled="true"] { color: var(--kit-color-content-disabled); cursor: not-allowed; }
  :where(.kit-duration-input)[data-invalid] { border-color: var(--kit-color-danger-border); }
}
@layer kit.components {
  :where(.kit-number-field) {
    align-items: stretch;
    font-variant-numeric: tabular-nums;
  }
  :where(.kit-number-field):has(> .kit-number-step) > :where(input) { text-align: center; }
  :where(.kit-number-step) {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: var(--kit-control-height-md);
    padding-inline: 0;
    color: var(--kit-color-content-muted);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--kit-duration-1) var(--kit-easing-standard),
                color var(--kit-duration-1) var(--kit-easing-standard);
  }
  @media (hover: hover) {
    :where(.kit-number-step):not([aria-disabled="true"]):hover {
      background: var(--kit-color-surface-hover);
      color: var(--kit-color-content);
    }
  }
  :where(.kit-number-step)[aria-disabled="true"] {
    color: var(--kit-color-content-disabled);
    cursor: not-allowed;
  }
  :where(.kit-number-field) > :where(.kit-number-step):first-child {
    border-start-start-radius: var(--kit-radius-control);
    border-end-start-radius: var(--kit-radius-control);
  }
  :where(.kit-number-field) > :where(.kit-number-step):last-child {
    border-start-end-radius: var(--kit-radius-control);
    border-end-end-radius: var(--kit-radius-control);
  }
  :where(.kit-number-field)[data-scrub],
  :where(.kit-scrub) {
    cursor: ew-resize;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }
  :where(.kit-number-field)[data-scrub] > :where(input) { cursor: ew-resize; }
  :where(.kit-number-field)[data-scrub] > :where(input):focus { cursor: text; user-select: text; }
  :where(.kit-number-scrub) {
    display: inline-grid;
    place-items: center;
    flex: none;
    padding-inline-start: var(--kit-space-200);
    color: var(--kit-color-content-muted);
    pointer-events: none;
  }
  :where(.kit-number-scrub) > :where(.kit-icon) { --_size: var(--kit-icon-size-sm); }
  :where(.kit-number-field)[data-scrub]:has(> input:disabled) > :where(.kit-number-scrub) {
    color: var(--kit-color-content-disabled);
  }
  html[data-kit-scrubbing] * { cursor: ew-resize; }
  :where(.kit-number-field)[data-scrubbing] > :where(input) {
    caret-color: transparent;
    color: var(--kit-color-content-accent);
  }
  :where(.kit-number-field)[data-compact] {
    inline-size: auto;
    min-inline-size: 0;
  }
  :where(.kit-number-field)[data-compact] > :where(input) {
    field-sizing: content;
    inline-size: auto;
    min-inline-size: 4ch;
    text-align: end;
  }
  :where(.kit-field)[data-compact] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--kit-space-200);
  }
  :where(.kit-field)[data-compact] > :where(.kit-field-label) { margin: 0; }
  :where(.kit-inspector) {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--kit-space-200);
    align-items: center;
  }
  :where(.kit-inspector) > :where(.kit-field)[data-compact] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
  }
  :where(.kit-inspector) > :where(:not(.kit-field)) { grid-column: 1 / -1; }
  @media (forced-colors: active) {
    :where(.kit-number-step) { color: CanvasText; }
    :where(.kit-number-step)[aria-disabled="true"] { color: GrayText; }
  }
}
@layer kit.components {
  :where(input[type="number"]) {
    appearance: textfield;
    -moz-appearance: textfield;
    font-variant-numeric: tabular-nums;
  }
  :where(input[type="number"])::-webkit-inner-spin-button,
  :where(input[type="number"])::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
  }
  :where(input[type="search"])::-webkit-search-cancel-button,
  :where(input[type="search"])::-webkit-search-decoration {
    appearance: none;
  }
  :where(input[type="file"]) {
    inline-size: 100%;
    min-block-size: var(--kit-control-height-md);
    font-family: inherit;
    font-size: var(--kit-control-font-size-field);
    color: var(--kit-color-content);
  }
  :where(input[type="file"])::file-selector-button {
    margin-inline-end: var(--kit-space-300);
    min-block-size: var(--kit-control-height-sm);
    padding-inline: calc(var(--kit-control-padding-x-md) + var(--kit-space-100));
    font-family: inherit;
    font-size: var(--kit-control-font-size-sm);
    font-weight: var(--kit-font-weight-medium);
    color: var(--kit-color-content);
    background: var(--kit-color-surface-raised);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border-interactive);
    border-radius: var(--kit-radius-control);
    box-shadow: var(--kit-elevation-cap);
    cursor: pointer;
    transition: background-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  @media (hover: hover) {
    :where(input[type="file"])::file-selector-button:hover { background: var(--kit-color-surface-hover); }
  }
  :where(input[type="file"]):disabled::file-selector-button {
    color: var(--kit-color-content-disabled);
    background: var(--kit-color-surface-sunken);
    border-color: var(--kit-color-border);
    box-shadow: none;
    cursor: not-allowed;
  }
  :where(input[type="date"], input[type="time"], input[type="datetime-local"],
         input[type="month"], input[type="week"])::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--kit-duration-1) var(--kit-easing-standard);
  }
  @media (hover: hover) {
    :where(input[type="date"], input[type="time"], input[type="datetime-local"],
           input[type="month"], input[type="week"]):hover::-webkit-calendar-picker-indicator {
      opacity: 1;
    }
  }
  :where(input[type="date"], input[type="time"], input[type="datetime-local"],
         input[type="month"], input[type="week"]) {
    font-variant-numeric: tabular-nums;
  }
  :where(input[type="color"]) {
    inline-size: var(--kit-space-1200);
    min-block-size: var(--kit-control-height-md);
    padding: var(--kit-space-050);
    background: var(--kit-color-surface-raised);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border-interactive);
    border-radius: var(--kit-radius-control);
    box-shadow: var(--kit-elevation-inset);
    cursor: pointer;
  }
  :where(input[type="color"])::-webkit-color-swatch-wrapper { padding: 0; }
  :where(input[type="color"])::-webkit-color-swatch {
    border: 0;
    border-radius: var(--kit-radius-mark);
  }
  :where(input[type="color"])::-moz-color-swatch {
    border: 0;
    border-radius: var(--kit-radius-mark);
  }
  :where(input[type="color"]):disabled {
    cursor: not-allowed;
    background: var(--kit-color-surface-sunken);
    border-color: var(--kit-color-border);
    box-shadow: none;
  }
  :where(input[type="file"], input[type="color"]):focus-visible {
    box-shadow: var(--kit-elevation-cap), var(--kit-focus-halo);
  }
}
@layer kit.components {
  @property --kit-range-progress {
    syntax: "<number>";
    initial-value: 0;
    inherits: true;
  }
  @property --kit-range-ticks {
    syntax: "<integer>";
    initial-value: 0;
    inherits: true;
  }
  :where(input[type="range"]) {
    --_track: var(--kit-space-100);
    --_thumb: var(--kit-space-500);
    --_span: calc(100% - var(--_thumb));
    --_stop: calc(var(--kit-range-progress) * (100% - var(--_thumb) / 2));
    --_to: to right;
    --_mark: calc(2px * min(var(--kit-range-ticks), 1));
    --_period: calc((100% - var(--_mark)) / max(var(--kit-range-ticks), 1));
    appearance: none;
    -webkit-appearance: none;
    inline-size: 100%;
    block-size: var(--kit-space-600);
    margin: 0;
    background-color: transparent;
    cursor: pointer;
    background-image:
      repeating-linear-gradient(var(--_to),
        var(--kit-color-border-strong) 0 var(--_mark),
        transparent var(--_mark) var(--_period));
    background-size: calc(var(--_span) + var(--_mark)) var(--kit-space-150);
    background-position: calc(var(--_thumb) / 2 - var(--_mark) / 2) 100%;
    background-repeat: no-repeat;
  }
  :where(input[type="range"]):dir(rtl) { --_to: to left; }
  :where(input[type="range"]):disabled { cursor: not-allowed; }
  :where(input[type="range"])::-webkit-slider-runnable-track {
    block-size: var(--_track);
    border-radius: var(--kit-radius-full);
    background: linear-gradient(var(--_to),
      var(--kit-color-accent) 0 var(--_stop),
      var(--kit-color-surface-sunken) var(--_stop) 100%);
    box-shadow: var(--kit-elevation-inset);
  }
  :where(input[type="range"])::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    inline-size: var(--_thumb);
    block-size: var(--_thumb);
    margin-block-start: calc((var(--_track) - var(--_thumb)) / 2);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border-interactive);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-surface-raised);
    box-shadow: var(--kit-elevation-cap);
    cursor: inherit;
    transition: scale var(--kit-duration-1) var(--kit-easing-standard),
                background-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  @media (hover: hover) {
    :where(input[type="range"]):hover::-webkit-slider-thumb { background: var(--kit-color-surface-hover); }
  }
  :where(input[type="range"]):active::-webkit-slider-thumb { scale: 1.1; }
  :where(input[type="range"]):disabled::-webkit-slider-runnable-track {
    background: linear-gradient(var(--_to),
      var(--kit-color-border-strong) 0 var(--_stop),
      var(--kit-color-surface-sunken) var(--_stop) 100%);
    box-shadow: none;
  }
  :where(input[type="range"]):disabled::-webkit-slider-thumb {
    background: var(--kit-color-surface-sunken);
    border-color: var(--kit-color-border);
    box-shadow: none;
    cursor: not-allowed;
  }
  :where(input[type="range"])::-moz-range-track {
    block-size: var(--_track);
    border-radius: var(--kit-radius-full);
    background: linear-gradient(var(--_to),
      var(--kit-color-accent) 0 var(--_stop),
      var(--kit-color-surface-sunken) var(--_stop) 100%);
    box-shadow: var(--kit-elevation-inset);
  }
  :where(input[type="range"])::-moz-range-thumb {
    inline-size: var(--_thumb);
    block-size: var(--_thumb);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border-interactive);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-surface-raised);
    box-shadow: var(--kit-elevation-cap);
    cursor: inherit;
    transition: scale var(--kit-duration-1) var(--kit-easing-standard),
                background-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  @media (hover: hover) {
    :where(input[type="range"]):hover::-moz-range-thumb { background: var(--kit-color-surface-hover); }
  }
  :where(input[type="range"]):active::-moz-range-thumb { scale: 1.1; }
  :where(input[type="range"]):disabled::-moz-range-track {
    background: linear-gradient(var(--_to),
      var(--kit-color-border-strong) 0 var(--_stop),
      var(--kit-color-surface-sunken) var(--_stop) 100%);
    box-shadow: none;
  }
  :where(input[type="range"]):disabled::-moz-range-thumb {
    background: var(--kit-color-surface-sunken);
    border-color: var(--kit-color-border);
    box-shadow: none;
    cursor: not-allowed;
  }
  @media (forced-colors: active) {
    :where(input[type="range"])::-webkit-slider-runnable-track {
      background: Canvas;
      border: var(--kit-border-width-hairline) solid CanvasText;
      box-shadow: none;
    }
    :where(input[type="range"])::-moz-range-track {
      background: Canvas;
      border: var(--kit-border-width-hairline) solid CanvasText;
      box-shadow: none;
    }
    :where(input[type="range"])::-webkit-slider-thumb { background: CanvasText; border-color: CanvasText; }
    :where(input[type="range"])::-moz-range-thumb { background: CanvasText; border-color: CanvasText; }
    :where(input[type="range"]):disabled::-webkit-slider-thumb { background: GrayText; border-color: GrayText; }
    :where(input[type="range"]):disabled::-moz-range-thumb { background: GrayText; border-color: GrayText; }
  }
}
@layer kit.components {
  @property --kit-range-start {
    syntax: "<number>";
    initial-value: 0;
    inherits: true;
  }
  :where(.kit-slider) {
    --_track: var(--kit-space-150);
    --_thumb: var(--kit-space-500);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--kit-space-300);
    inline-size: 100%;
    touch-action: pan-y;
  }
  :where(.kit-slider)[data-orientation="vertical"] {
    grid-template-columns: auto;
    justify-items: center;
    inline-size: auto;
    touch-action: pan-x;
  }
  :where(.kit-slider-track) {
    position: relative;
    block-size: var(--kit-control-height-md);
    display: grid;
    align-items: center;
    cursor: pointer;
  }
  :where(.kit-slider-track)::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    block-size: var(--_track);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-surface-sunken);
    box-shadow: var(--kit-elevation-inset);
  }
  :where(.kit-slider-fill) {
    position: absolute;
    inset-inline-start: calc(var(--kit-range-start) * 100%);
    inline-size: calc((var(--kit-range-progress) - var(--kit-range-start)) * 100%);
    block-size: var(--_track);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-accent);
  }
  :where(.kit-slider)[data-orientation="vertical"] > :where(.kit-slider-track) {
    block-size: 12rem;
    inline-size: var(--kit-control-height-md);
  }
  :where(.kit-slider)[data-orientation="vertical"] :where(.kit-slider-track)::before {
    inset-inline: auto;
    inset-block: 0;
    inline-size: var(--_track);
    block-size: auto;
    justify-self: center;
  }
  :where(.kit-slider)[data-orientation="vertical"] > :where(.kit-slider-track) > :where(.kit-slider-fill) {
    inset-inline-start: auto;
    inset-block-end: calc(var(--kit-range-start) * 100%);
    block-size: calc((var(--kit-range-progress) - var(--kit-range-start)) * 100%);
    inline-size: var(--_track);
    justify-self: center;
  }
  :where(.kit-slider-thumb) {
    position: absolute;
    inset-inline-start: calc(var(--_at, 0) * 100%);
    margin-inline-start: calc(var(--_thumb) / -2);
    inline-size: var(--_thumb);
    block-size: var(--_thumb);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border-interactive);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-surface-raised);
    box-shadow: var(--kit-elevation-cap);
    pointer-events: none;
    transition: scale var(--kit-duration-1) var(--kit-easing-standard),
                background-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-slider)[data-orientation="vertical"] :where(.kit-slider-thumb) {
    inset-inline-start: auto;
    justify-self: center;
    inset-block-end: calc(var(--_at, 0) * 100%);
    margin-inline-start: 0;
    margin-block-end: calc(var(--_thumb) / -2);
  }
  @media (hover: hover) {
    :where(.kit-slider):not([data-disabled]) :where(.kit-slider-track):hover > :where(.kit-slider-thumb) {
      background: var(--kit-color-surface-hover);
    }
  }
  :where(.kit-slider)[data-dragging] :where(.kit-slider-thumb)[data-focus] { scale: 1.1; }
  :where(.kit-slider):has(:focus-visible) :where(.kit-slider-thumb)[data-focus] {
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: var(--kit-focus-offset);
    box-shadow: var(--kit-elevation-cap), var(--kit-focus-halo);
  }
  :where(.kit-slider-thumb)[data-at-detent] { border-color: var(--kit-color-accent); }
  :where(.kit-slider-ticks) {
    position: absolute;
    inset-inline: 0;
    block-size: var(--_track);
    pointer-events: none;
  }
  :where(.kit-slider-tick) {
    position: absolute;
    inset-inline-start: calc(var(--_at, 0) * 100%);
    inset-block: 0;
    inline-size: var(--kit-border-width-emphasis);
    margin-inline-start: calc(var(--kit-border-width-emphasis) / -2);
    background: var(--kit-color-border-strong);
    border-radius: var(--kit-radius-full);
  }
  :where(.kit-slider-tick-label) {
    position: absolute;
    inset-block-start: calc(100% + var(--kit-space-100));
    inset-inline-start: 50%;
    translate: -50% 0;
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-200);
    color: var(--kit-color-content-muted);
    white-space: nowrap;
  }
  :where(.kit-slider-ticks)[data-when="active"] {
    opacity: 0;
    transition: opacity var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-slider):is([data-dragging], :hover, :focus-within) :where(.kit-slider-ticks)[data-when="active"] { opacity: 1; }
  :where(.kit-slider-ghost) {
    position: absolute;
    inset-inline-start: calc(var(--_at, 0) * 100%);
    inset-block: calc(var(--kit-space-100) * -1);
    inline-size: 0;
    border-inline-start: var(--kit-border-width-emphasis) dashed var(--kit-color-content);
    pointer-events: none;
  }
  :where(.kit-slider)[data-orientation="vertical"] :where(.kit-slider-ghost) {
    inset-inline: calc(var(--kit-space-100) * -1);
    inset-block: auto;
    inset-block-end: calc(var(--_at, 0) * 100%);
    block-size: 0;
    border-inline-start: 0;
    border-block-start: var(--kit-border-width-emphasis) dashed var(--kit-color-content);
  }
  :where(.kit-slider-readout) {
    font-size: var(--kit-control-font-size-field);
    font-variant-numeric: tabular-nums;
    color: var(--kit-color-content-muted);
    white-space: nowrap;
    display: inline-grid;
    justify-items: end;
    min-inline-size: 4ch;
    text-align: end;
  }
  :where(.kit-slider-readout) > * { grid-area: 1 / 1; }
  :where(.kit-slider-readout-sizer) {
    display: grid;
    visibility: hidden;
  }
  :where(.kit-slider-readout-sizer) > * { grid-area: 1 / 1; }
  :where(.kit-slider-readout)[data-when="active"] { opacity: 0; transition: opacity var(--kit-duration-1) var(--kit-easing-standard); }
  :where(.kit-slider):is([data-dragging], [data-previewing], :hover, :focus-within) :where(.kit-slider-readout)[data-when="active"] { opacity: 1; }
  :where(.kit-slider)[data-previewing] :where(.kit-slider-readout) { color: var(--kit-color-content); }
  :where(.kit-slider) > :where(input[type="range"]) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
  }
  :where(.kit-slider)[data-disabled] :where(.kit-slider-track) { cursor: not-allowed; }
  :where(.kit-slider)[data-disabled] :where(.kit-slider-fill) { background: var(--kit-color-border-strong); }
  :where(.kit-slider)[data-disabled] :where(.kit-slider-thumb) {
    background: var(--kit-color-surface-sunken);
    border-color: var(--kit-color-border);
    box-shadow: none;
  }
  :where(.kit-slider)[data-disabled] :where(.kit-slider-readout) { color: var(--kit-color-content-disabled); }
  :where(.kit-slider)[data-readonly] :where(.kit-slider-track) { cursor: default; }
  @media (forced-colors: active) {
    :where(.kit-slider-track)::before { background: Canvas; border: var(--kit-border-width-hairline) solid CanvasText; }
    :where(.kit-slider-fill) { background: Highlight; }
    :where(.kit-slider-thumb) { background: CanvasText; border-color: CanvasText; }
    :where(.kit-slider)[data-disabled] :where(.kit-slider-thumb) { background: GrayText; border-color: GrayText; }
    :where(.kit-slider-tick) { background: CanvasText; }
    :where(.kit-slider-ghost) { border-color: Highlight; }
  }
}
@layer kit.components {
  :where(progress) {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    inline-size: 100%;
    block-size: var(--kit-space-300);
    padding: var(--kit-space-050);
    border: 0;
    border-radius: var(--kit-radius-100);
    background: var(--kit-color-surface-sunken);
    box-shadow: var(--kit-elevation-inset);
    user-select: none;
    overflow: hidden;
  }
  :where(progress)::-webkit-progress-bar {
    background: transparent;
    border-radius: inherit;
  }
  :where(progress)::-webkit-progress-value {
    border-radius: calc(var(--kit-radius-100) - var(--kit-space-050));
    background: var(--kit-color-accent);
    box-shadow: inset 0 1px 0 color-mix(in oklab, var(--kit-color-on-accent) 35%, transparent),
                inset 0 -1px 0 color-mix(in oklab, var(--kit-color-content) 20%, transparent);
    transition: width var(--kit-duration-2) var(--kit-easing-standard);
  }
  :where(progress)::-moz-progress-bar {
    border-radius: calc(var(--kit-radius-100) - var(--kit-space-050));
    background: var(--kit-color-accent);
    box-shadow: inset 0 1px 0 color-mix(in oklab, var(--kit-color-on-accent) 35%, transparent),
                inset 0 -1px 0 color-mix(in oklab, var(--kit-color-content) 20%, transparent);
    transition: inline-size var(--kit-duration-2) var(--kit-easing-standard);
  }
  @keyframes kit-progress-sliver {
    from { inset-inline-start: 0; }
    to { inset-inline-start: 100%; }
  }
  :where(progress):indeterminate {
    position: relative;
  }
  :where(progress):indeterminate::after {
    content: "";
    position: absolute;
    inset-block: var(--kit-space-050);
    inline-size: 40%;
    border-radius: calc(var(--kit-radius-100) - var(--kit-space-050));
    background: var(--kit-color-accent);
    translate: -40% 0;
    animation: kit-progress-sliver var(--kit-period-progress) var(--kit-easing-standard) infinite;
    animation-play-state: var(--kit-animation-play-state);
  }
  :where(progress):indeterminate::-webkit-progress-value { background: transparent; box-shadow: none; }
  :where(progress):indeterminate::-moz-progress-bar { background: transparent; box-shadow: none; }
  :where(.kit-progress) {
    display: grid;
    gap: var(--kit-space-200);
  }
  :where(.kit-progress-row) {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kit-space-300);
  }
  :where(.kit-progress-label) {
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
    font-weight: var(--kit-font-weight-medium);
    color: var(--kit-color-content);
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :where(.kit-progress-value) {
    flex: none;
    font-family: var(--kit-font-mono);
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-200);
    font-variant-numeric: tabular-nums;
    color: var(--kit-color-content-muted);
    text-align: end;
    min-inline-size: 4ch;
  }
  :where(.kit-progress-value)[data-state="over"] { color: var(--kit-color-danger-content); }
  :where(meter) {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    inline-size: 100%;
    block-size: var(--kit-space-200);
    margin-block: var(--kit-space-050);
    padding: 0;
    border: 0;
    border-radius: calc(var(--kit-radius-100) - var(--kit-space-050));
    background: var(--kit-color-surface-sunken);
    box-shadow: var(--kit-elevation-inset),
                0 0 0 var(--kit-space-050) var(--kit-color-surface-sunken);
    user-select: none;
    overflow: hidden;
  }
  :where(meter)::-webkit-meter-inner-element { display: block; block-size: 100%; }
  :where(meter)::-webkit-meter-bar { background: transparent; border: 0; border-radius: inherit; block-size: 100%; }
  :where(meter)::-webkit-meter-optimum-value {
    border-radius: inherit;
    background: var(--kit-color-success-border);
    transition: width var(--kit-duration-2) var(--kit-easing-standard);
  }
  :where(meter)::-webkit-meter-suboptimum-value {
    border-radius: inherit;
    background: var(--kit-color-warning-border);
    transition: width var(--kit-duration-2) var(--kit-easing-standard);
  }
  :where(meter)::-webkit-meter-even-less-good-value {
    border-radius: inherit;
    background: var(--kit-color-danger-border);
    transition: width var(--kit-duration-2) var(--kit-easing-standard);
  }
  :where(meter):not([low]):not([high]):not([optimum])::-webkit-meter-optimum-value {
    background: var(--kit-color-accent);
  }
  :where(meter)::-moz-meter-bar {
    border-radius: inherit;
    background: var(--kit-color-accent);
    transition: inline-size var(--kit-duration-2) var(--kit-easing-standard);
  }
  :where(meter):-moz-meter-optimum::-moz-meter-bar { background: var(--kit-color-success-border); }
  :where(meter):-moz-meter-sub-optimum::-moz-meter-bar { background: var(--kit-color-warning-border); }
  :where(meter):-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--kit-color-danger-border); }
  :where(meter):not([low]):not([high]):not([optimum])::-moz-meter-bar { background: var(--kit-color-accent); }
  @media (forced-colors: active) {
    :where(progress), :where(meter) {
      border: var(--kit-border-width-hairline) solid CanvasText;
      background: Canvas;
      box-shadow: none;
    }
    :where(progress)::-webkit-progress-value { background: Highlight; box-shadow: none; }
    :where(progress)::-moz-progress-bar { background: Highlight; box-shadow: none; }
    :where(progress):indeterminate::after { background: Highlight; }
    :where(meter)::-webkit-meter-optimum-value { background: Highlight; }
    :where(meter)::-moz-meter-bar { background: Highlight; }
    :where(meter) { outline: var(--kit-space-050) solid CanvasText; outline-offset: 0; }
  }
}
@layer kit.components {
  :where(.kit-upload) {
    display: grid;
    gap: var(--kit-space-stack);
  }
  :where(.kit-upload-drop) {
    display: grid;
    justify-items: center;
    gap: var(--kit-space-100);
    padding: var(--kit-space-600) var(--kit-space-400);
    text-align: center;
    border: var(--kit-border-width-hairline) dashed var(--kit-color-border-strong);
    border-radius: var(--kit-radius-surface);
    background: var(--kit-color-surface-sunken);
    color: var(--kit-color-content);
    cursor: pointer;
    transition: background-color var(--kit-duration-1) var(--kit-easing-standard),
                border-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-upload-drop):has(> .kit-upload-input:focus-visible) {
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: var(--kit-focus-offset);
    box-shadow: var(--kit-focus-halo);
  }
  @media (hover: hover) {
    :where(.kit-upload-drop):hover { background: var(--kit-color-surface-hover); }
  }
  :where(.kit-upload-drop)[data-over] {
    border-color: var(--kit-color-accent);
    background: var(--kit-color-accent-tint);
  }
  :where(.kit-upload-drop)[data-over="invalid"] {
    border-color: var(--kit-color-danger-border);
    background: var(--kit-color-danger-surface);
  }
  :where(.kit-upload-title) {
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
    font-weight: var(--kit-font-weight-medium);
  }
  :where(.kit-upload-hint) {
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-200);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-upload-input) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    min-block-size: 0;
    min-inline-size: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    outline: none;
  }
  :where(.kit-upload-list) {
    display: grid;
    gap: var(--kit-space-150);
  }
  :where(.kit-upload-list):empty { display: none; }
  :where(.kit-upload-file) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--kit-space-300);
    padding: var(--kit-space-200) var(--kit-space-300);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-control);
    background: var(--kit-color-surface-raised);
  }
  :where(.kit-upload-file-body) {
    display: grid;
    gap: var(--kit-space-100);
    min-inline-size: 0;
  }
  :where(.kit-upload-name) {
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
    min-inline-size: 0;
    overflow: hidden;
    white-space: nowrap;
  }
  :where(.kit-upload-meta) {
    font-family: var(--kit-font-mono);
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-200);
    font-variant-numeric: tabular-nums;
    color: var(--kit-color-content-muted);
  }
  :where(.kit-upload-file)[data-state="error"] { border-color: var(--kit-color-danger-border); }
  :where(.kit-upload-file)[data-state="error"] :where(.kit-upload-meta) { color: var(--kit-color-danger-content); }
  :where(.kit-upload-file)[data-state="done"] :where(.kit-upload-meta) { color: var(--kit-color-success-content); }
  :where(.kit-upload-icon) {
    color: var(--kit-color-content-muted);
  }
  :where(.kit-upload-file)[data-state="done"] :where(.kit-upload-icon) { color: var(--kit-color-success-content); }
  :where(.kit-upload-file)[data-state="error"] :where(.kit-upload-icon) { color: var(--kit-color-danger-content); }
  :where(.kit-upload-file) :where(.kit-progress) { gap: var(--kit-space-100); }
  :where(.kit-upload-actions) {
    display: flex;
    align-items: center;
    gap: var(--kit-space-100);
  }
  :where(.kit-upload-error):where([hidden]) { display: none; }
  @media (forced-colors: active) {
    :where(.kit-upload-drop) { border-color: ButtonBorder; }
    :where(.kit-upload-drop)[data-over] { border-color: Highlight; }
    :where(.kit-upload-file) { border-color: ButtonBorder; }
  }
}
@layer kit.components {
  :where(.kit-password-strength) {
    display: grid;
    gap: var(--kit-space-100);
  }
  :where(.kit-password-strength-word) {
    margin: 0;
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
    font-weight: var(--kit-font-weight-medium);
    color: var(--kit-color-content);
    text-wrap: pretty;
  }
  :where(.kit-password-strength-hint) {
    font-weight: var(--kit-font-weight-regular);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-password-strength-word):empty::before {
    content: "\200b";
  }
}
@layer kit.components {
  :where(.kit-steps) {
    --_gap: var(--kit-space-300);
    --_gap-block: var(--kit-space-600);
    --_mark: var(--kit-space-800);
    --_air: var(--kit-space-200);
    --_air-block: var(--kit-space-100);
    display: grid;
    gap: var(--kit-space-200);
    container-type: inline-size;
  }
  :where(.kit-steps-count) {
    margin: 0;
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-200);
    font-variant-numeric: tabular-nums;
    color: var(--kit-color-content-muted);
  }
  :where(.kit-steps) > :where(ol) {
    display: flex;
    gap: var(--_gap);
    margin: 0;
    padding: 0;
  }
  :where(.kit-step) {
    position: relative;
    flex: 1 1 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: var(--kit-space-200);
    min-inline-size: 0;
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-step):not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--_mark) + var(--_air));
    inset-inline-end: calc((var(--_gap) - var(--_air)) * -1);
    inset-block-start: calc((var(--_mark) - var(--kit-border-width-emphasis)) / 2);
    block-size: var(--kit-border-width-emphasis);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-border);
  }
  :where(.kit-step)[data-state="done"]::after { background: var(--kit-color-accent); }
  :where(.kit-step-mark) {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: var(--_mark);
    block-size: var(--_mark);
    border: var(--kit-border-width-emphasis) solid var(--kit-color-border-strong);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-surface);
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-200);
    font-variant-numeric: tabular-nums;
    font-weight: var(--kit-font-weight-medium);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-step-label) {
    display: grid;
    justify-items: start;
    gap: var(--kit-space-050);
    min-inline-size: 0;
    max-inline-size: 100%;
  }
  :where(.kit-step-eyebrow) {
    font-size: var(--kit-font-size-100);
    line-height: var(--kit-line-height-100);
    font-weight: var(--kit-font-weight-semibold);
    letter-spacing: var(--kit-letter-spacing-wide);
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--kit-color-content-muted);
  }
  :where(.kit-step-title) {
    display: block;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :where(.kit-steps):not([data-status-text]) :where(.kit-step-status) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    min-block-size: 0;
    padding: 0;
    border: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  :where(.kit-step)[data-state="current"],
  :where(.kit-step)[data-state="loading"] {
    color: var(--kit-color-content);
    font-weight: var(--kit-font-weight-medium);
  }
  :where(.kit-step)[data-state="current"] > :where(.kit-step-mark),
  :where(.kit-step)[data-state="loading"] > :where(.kit-step-mark) {
    border-color: var(--kit-color-accent);
    color: var(--kit-color-content-accent);
  }
  :where(.kit-step)[data-state="done"] { color: var(--kit-color-content); }
  :where(.kit-step)[data-state="done"] > :where(.kit-step-mark) {
    border-color: var(--kit-color-accent);
    background: var(--kit-color-accent);
    color: transparent;
  }
  :where(.kit-step)[data-state="done"] > :where(.kit-step-mark)::after {
    content: "";
    position: absolute;
    inline-size: var(--kit-icon-size-sm);
    block-size: var(--kit-icon-size-sm);
    background: var(--kit-color-on-accent);
    clip-path: polygon(14% 44%, 0 58%, 43% 100%, 100% 16%, 86% 2%, 43% 72%);
  }
  :where(.kit-step) :where(a) {
    color: inherit;
    text-decoration: none;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @media (hover: hover) {
    :where(.kit-step) :where(a):hover { text-decoration: underline; }
  }
  :where(.kit-steps)[data-orientation="vertical"] > :where(ol) {
    display: grid;
    gap: var(--_gap-block);
  }
  :where(.kit-steps)[data-orientation="vertical"] :where(.kit-step) {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: stretch;
    align-items: start;
    gap: var(--_air);
  }
  :where(.kit-steps)[data-orientation="vertical"] :where(.kit-step) > :where(:not(.kit-step-mark)) {
    display: grid;
    align-content: center;
    min-block-size: var(--_mark);
  }
  :where(.kit-steps)[data-orientation="vertical"] :where(.kit-step):not(:last-child)::after {
    inset-inline-start: calc((var(--_mark) - var(--kit-border-width-emphasis)) / 2);
    inset-inline-end: auto;
    inset-block-start: calc(var(--_mark) + var(--_air-block));
    inset-block-end: calc((var(--_gap-block) - var(--_air-block)) * -1);
    inline-size: var(--kit-border-width-emphasis);
    block-size: auto;
  }
  @container (max-width: 30rem) {
    :where(.kit-steps):not([data-orientation="vertical"]) :where(.kit-step):not([data-state="current"]):not([data-state="loading"]) > :where(:not(.kit-step-mark)) {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }
  @media (forced-colors: active) {
    :where(.kit-step)[data-state="done"] > :where(.kit-step-mark) { background: Highlight; border-color: Highlight; }
    :where(.kit-step)[data-state="done"] > :where(.kit-step-mark)::after { background: HighlightText; }
    :where(.kit-step)[data-state="current"] > :where(.kit-step-mark),
    :where(.kit-step)[data-state="loading"] > :where(.kit-step-mark) { border-color: Highlight; }
    :where(.kit-step):not(:last-child)::after { background: CanvasText; }
    :where(.kit-step)[data-state="done"]::after { background: Highlight; }
  }
}
@layer kit.components {
  :where(.kit-table, table) {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--kit-font-size-400);
    line-height: var(--kit-line-height-400);
    color: var(--kit-color-content);
  }
  :where(.kit-table, table) > :where(caption) {
    text-align: start;
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
    font-weight: var(--kit-font-weight-medium);
    color: var(--kit-color-content-muted);
    padding-block-end: var(--kit-space-200);
  }
  :where(.kit-table, table) :where(th, td) {
    text-align: start;
    vertical-align: middle;
    padding-inline: var(--kit-table-cell-padding-x);
    padding-block: var(--kit-table-cell-padding-y);
    block-size: var(--kit-table-row-height);
  }
  :where(.kit-table, table) :where(th, td):has(> :where(input, select, textarea, button)) {
    padding-block: 0;
  }
  :where(.kit-table, table) :where(th) {
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
    font-weight: var(--kit-font-weight-medium);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-table, table) :where(th, td)[data-cell="number"] {
    text-align: end;
    font-variant-numeric: tabular-nums;
  }
  :where(.kit-table, table) :where(th, td):is([data-cell="date"], [data-cell="code"]) {
    text-align: start;
    font-variant-numeric: tabular-nums;
  }
  :where(.kit-table, table) > :where(tbody) > :where(tr) + :where(tr) > :where(th, td) {
    border-block-start: var(--kit-border-width-hairline) solid var(--kit-color-border);
  }
  :where(.kit-table, table) > :where(thead) > :where(tr) > :where(th, td) {
    border-block-end: var(--kit-border-width-hairline) solid var(--kit-color-border-strong);
  }
  :where(.kit-table, table) > :where(tfoot) > :where(tr) > :where(th, td) {
    border-block-start: var(--kit-border-width-hairline) solid var(--kit-color-border-strong);
  }
  :where(.kit-table, table)[data-rules="all"] :where(th, td) + :where(th, td) {
    border-inline-start: var(--kit-border-width-hairline) solid
      color-mix(in oklab, var(--kit-color-border) 55%, transparent);
  }
  :where(.kit-table, table)[data-align="top"] :where(th, td) { vertical-align: top; }
  :where(.kit-table-sort) {
    display: inline-flex;
    align-items: center;
    gap: var(--kit-space-100);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }
  :where(.kit-table-sort) > :where(svg) {
    inline-size: var(--kit-icon-size-sm);
    block-size: var(--kit-icon-size-sm);
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: var(--kit-icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  :where(th)[aria-sort="none"] :where(.kit-table-sort) > :where(svg) { opacity: 0.4; }
  :where(th):is([aria-sort="ascending"], [aria-sort="descending"]) { color: var(--kit-color-content); }
  :where(th)[data-cell="number"] :where(.kit-table-sort) { flex-direction: row-reverse; }
  @media (hover: hover) {
    :where(.kit-table-sort):hover { color: var(--kit-color-content); }
  }
  :where(.kit-table, table)[data-sticky~="header"] > :where(thead) > :where(tr) > :where(th, td) {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    background: var(--kit-color-surface-raised);
    border-block-end: 0;
    box-shadow:
      inset 0 calc(-1 * var(--kit-border-width-hairline)) 0 var(--kit-color-border-strong),
      0 4px 6px -4px var(--kit-shadow-ambient);
  }
  :where(.kit-table, table)[data-sticky~="first"] :where(th, td):first-child {
    position: sticky;
    inset-inline-start: 0;
    background-color: var(--kit-color-surface-raised);
    background-image: linear-gradient(var(--_row, transparent), var(--_row, transparent));
    box-shadow: inset calc(-1 * var(--kit-border-width-hairline)) 0 0 var(--kit-color-border);
  }
  :where(.kit-table, table)[data-sticky~="first"] > :where(thead) > :where(tr) > :where(th):first-child {
    z-index: 2;
  }
  :where(.kit-table, table)[data-layout="fixed"] { table-layout: fixed; }
  :where(.kit-table, table) :where(td, th)[data-truncate] {
    max-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :where(.kit-table, table) > :where(tbody) > :where(tr) {
    --_row: transparent;
    background: var(--_row);
    transition: background-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  @media (hover: hover) {
    :where(.kit-table, table) > :where(tbody) > :where(tr):hover { --_row: var(--kit-color-surface-hover); }
  }
  :where(.kit-table, table) > :where(tbody) > :where(tr):focus-within { --_row: var(--kit-color-surface-hover); }
  :where(.kit-table, table) > :where(tbody) > :where(tr):has(:where(input[type="checkbox"]):checked) {
    --_row: var(--kit-color-accent-tint);
  }
  :where(.kit-table, table) :where(th, td)[data-cell="select"] {
    inline-size: 1%;
    padding: 0;
    white-space: nowrap;
  }
  :where(.kit-table, table) :where(th, td)[data-cell="select"] > :where(label) {
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 100%;
    min-block-size: var(--kit-space-600);
    padding-inline: var(--kit-table-cell-padding-x);
    cursor: pointer;
  }
  :where(.kit-table, table) :where(th, td)[data-cell="actions"] {
    inline-size: 1%;
    white-space: nowrap;
  }
  @media (hover: hover) {
    :where(.kit-table, table)[data-actions="hover"] > :where(tbody) > :where(tr) > :where(td)[data-cell="actions"] > * {
      opacity: 0;
      transition: opacity var(--kit-duration-1) var(--kit-easing-standard);
    }
    :where(.kit-table, table)[data-actions="hover"] > :where(tbody) > :where(tr):is(:hover, :focus-within) > :where(td)[data-cell="actions"] > * {
      opacity: 1;
    }
  }
  :where(.kit-table-bulk) {
    display: flex;
    align-items: center;
    gap: var(--kit-space-300);
    flex-wrap: wrap;
    padding: var(--kit-space-200) var(--kit-space-300);
    background: var(--kit-color-accent-tint);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-control);
    font-size: var(--kit-font-size-300);
  }
  :where(.kit-table-bulk-count) {
    font-weight: var(--kit-font-weight-medium);
    font-variant-numeric: tabular-nums;
    color: var(--kit-color-content);
  }
  :where(.kit-table-bulk-spacer) { flex: 1; }
  @media (forced-colors: active) {
    :where(.kit-table, table) > :where(tbody) > :where(tr):has(:where(input[type="checkbox"]):checked) {
      background: Highlight;
      color: HighlightText;
      forced-color-adjust: none;
    }
    :where(.kit-table-bulk) { border-color: CanvasText; }
  }
}
@layer kit.components {
  :where(.kit-table, table) :where(th, td)[data-cell="check"] {
    inline-size: 1%;
    white-space: nowrap;
  }
  :where(.kit-table, table) :where(td)[data-cell="check"] {
    padding: 0;
  }
  :where(.kit-table, table) :where(td)[data-cell="check"] > :where(label, .kit-authz-locked) {
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 100%;
    min-block-size: var(--kit-space-600);
    padding-inline: var(--kit-table-cell-padding-x);
  }
  :where(.kit-table, table) :where(td)[data-cell="check"] > :where(label) {
    cursor: pointer;
  }
  :where(.kit-authz-locked) {
    color: var(--kit-color-warning-content);
  }
  :where(.kit-table, table).kit-authz > :where(tbody) > :where(tr) {
    --_row: transparent;
  }
  :where(.kit-table, table).kit-authz > :where(tbody) > :where(tr)[data-protected] {
    --_row: var(--kit-color-surface-sunken);
  }
  @media (hover: hover) {
    :where(.kit-table, table).kit-authz > :where(tbody) > :where(tr):hover {
      --_row: var(--kit-color-surface-hover);
    }
  }
  :where(.kit-table, table).kit-authz > :where(tbody) > :where(tr):focus-within {
    --_row: var(--kit-color-surface-hover);
  }
  :where(code.kit-authz-key) {
    display: block;
    background: none;
    padding: 0;
    font-size: var(--kit-font-size-200);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-authz) :where(th[scope="row"]) {
    font-weight: var(--kit-font-weight-medium);
    white-space: nowrap;
  }
  :where(.kit-authz-effects) {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  :where(.kit-authz-effect) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--kit-space-inline);
    padding-block: var(--kit-space-150);
    font-size: var(--kit-font-size-300);
  }
  :where(.kit-authz-effect) + :where(.kit-authz-effect) {
    border-block-start: var(--kit-border-width-hairline) solid var(--kit-color-border);
  }
  :where(.kit-authz-effect) > :where(code.kit-authz-key) {
    display: inline;
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  :where(.kit-authz-effect)[data-kit-authz-effect="denied"] > :where(code.kit-authz-key) {
    text-decoration: line-through;
    text-decoration-color: var(--kit-color-danger-content);
  }
  :where(.kit-authz-self) {
    display: grid;
    gap: var(--kit-space-150);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  :where(.kit-authz-self) > :where(li) {
    display: flex;
    align-items: center;
    gap: var(--kit-space-inline);
    font-size: var(--kit-font-size-300);
  }
  @media (forced-colors: active) {
    :where(.kit-table, table).kit-authz > :where(tbody) > :where(tr)[data-protected] > :where(th, td) {
      border-block-end: var(--kit-border-width-emphasis) solid CanvasText;
    }
    :where(.kit-authz-locked) { color: CanvasText; }
  }
}
@layer kit.components {
  :where(.kit-panel) {
    --_surface: var(--kit-color-surface-raised);
    display: grid;
    gap: var(--kit-space-stack);
    padding: var(--kit-space-inset);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-surface);
    background: var(--_surface);
    color: var(--kit-color-content);
    box-shadow: var(--kit-elevation-1);
    min-inline-size: 0;
  }
  :where(.kit-panel):has(> :where(.kit-panel-head, .kit-panel-foot)) {
    padding: 0;
    gap: 0;
  }
  :where(.kit-panel-head) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kit-space-inline);
    padding: var(--kit-space-inset-tight) var(--kit-space-inset);
    border-block-end: var(--kit-border-width-hairline) solid var(--kit-color-border);
    font-weight: var(--kit-font-weight-medium);
  }
  :where(.kit-panel-body) {
    display: grid;
    gap: var(--kit-space-stack);
    padding: var(--kit-space-inset);
    min-inline-size: 0;
  }
  :where(.kit-panel-foot) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--kit-space-inline);
    padding: var(--kit-space-inset-tight) var(--kit-space-inset);
    border-block-start: var(--kit-border-width-hairline) solid var(--kit-color-border);
  }
  :where(.kit-panel)[data-variant="quiet"] {
    box-shadow: none;
  }
  :where(.kit-panel)[data-variant="flush"] {
    padding: 0;
  }
  :where(.kit-panel)[data-variant="bare"] {
    border: 0;
    background: none;
    box-shadow: none;
    padding: 0;
  }
  :where(.kit-panel) :where(.kit-panel) {
    --_surface: var(--kit-color-surface);
    box-shadow: none;
  }
  @media (forced-colors: active) {
    :where(.kit-panel),
    :where(.kit-panel)[data-variant="bare"] {
      border: var(--kit-border-width-hairline) solid CanvasText;
    }
  }
}
@layer kit.components {
  :where(.kit-skip-link) {
    position: absolute;
    inset-inline-start: var(--kit-space-inset);
    inset-block-start: var(--kit-space-inset);
    z-index: var(--kit-layer-modal);
    padding: var(--kit-space-200) var(--kit-space-inset-tight);
    border-radius: var(--kit-radius-control);
    background: var(--kit-color-surface-raised);
    color: var(--kit-color-content-accent);
    transform: translateY(calc(-100% - var(--kit-space-inset)));
    transition: transform var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-skip-link):focus {
    transform: translateY(0);
    box-shadow: var(--kit-elevation-2);
  }
  :where(.kit-nav) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--kit-space-050);
    min-inline-size: 0;
  }
  :where(.kit-nav) :where(a) {
    display: inline-flex;
    align-items: center;
    gap: var(--kit-space-inline);
    min-block-size: var(--kit-space-800);
    padding-inline: var(--kit-space-inset-tight);
    border-radius: var(--kit-radius-control);
    color: var(--kit-color-content-muted);
    text-decoration: none;
    white-space: nowrap;
  }
  @media (hover: hover) {
    :where(.kit-nav) :where(a):hover {
      background: var(--kit-color-surface-hover);
      color: var(--kit-color-content);
    }
  }
  :where(.kit-nav) :where(a)[aria-current="page"] {
    position: relative;
    background: var(--kit-color-accent-tint);
    color: var(--kit-color-content-accent);
    font-weight: var(--kit-font-weight-medium);
  }
  :where(.kit-nav) :where(a)[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset-inline: var(--kit-space-inset-tight);
    inset-block-end: 0;
    block-size: var(--kit-border-width-emphasis);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-accent);
  }
  :where(.kit-nav)[data-orientation="vertical"] {
    display: grid;
    gap: var(--kit-space-050);
  }
  :where(.kit-nav)[data-orientation="vertical"] :where(a) {
    justify-content: flex-start;
  }
  :where(.kit-nav)[data-orientation="vertical"] :where(a)[aria-current="page"]::after {
    inset-inline: auto;
    inset-inline-start: 0;
    inset-block: var(--kit-space-100);
    inline-size: var(--kit-border-width-emphasis);
    block-size: auto;
  }
  :where(.kit-nav-menu) {
    position: relative;
  }
  :where(.kit-nav-menu) > :where(summary) {
    display: inline-flex;
    align-items: center;
    gap: var(--kit-space-inline);
    min-block-size: var(--kit-space-800);
    padding-inline: var(--kit-space-inset-tight);
    border-radius: var(--kit-radius-control);
    color: var(--kit-color-content-muted);
    cursor: pointer;
    list-style: none;
  }
  :where(.kit-nav-menu) > :where(summary)::-webkit-details-marker { display: none; }
  @media (hover: hover) {
    :where(.kit-nav-menu) > :where(summary):hover {
      background: var(--kit-color-surface-hover);
      color: var(--kit-color-content);
    }
  }
  :where(.kit-nav-menu)[open] > :where(summary) {
    background: var(--kit-color-surface-hover);
    color: var(--kit-color-content);
  }
  :where(.kit-nav-menu) > :where(summary) :where(.kit-icon) {
    transition: rotate var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-nav-menu)[open] > :where(summary) :where(.kit-icon) {
    rotate: 180deg;
  }
  :where(.kit-nav-menu) > :where(.kit-menu) {
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-surface);
    background: var(--kit-color-surface-raised);
    box-shadow: var(--kit-elevation-2);
    position: absolute;
    inset-block-start: calc(100% + var(--kit-space-100));
    inset-inline-start: 0;
    z-index: var(--kit-layer-dropdown);
  }
  :where(.kit-nav-menu)[data-align="end"] > :where(.kit-menu) {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
  @media (forced-colors: active) {
    :where(.kit-nav) :where(a)[aria-current="page"]::after { background: Highlight; }
    :where(.kit-skip-link) { border: var(--kit-border-width-hairline) solid CanvasText; }
  }
}
@layer kit.components {
  :where(.kit-page-head) {
    display: grid;
    gap: var(--kit-space-stack-tight);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    margin-block-end: var(--kit-space-section);
  }
  :where(.kit-page-head) > :where(.kit-page-title) {
    grid-column: 1;
    margin: 0;
    font-size: var(--kit-font-size-600);
    line-height: var(--kit-line-height-600);
    font-weight: var(--kit-font-weight-semibold);
    text-wrap: balance;
  }
  :where(.kit-page-head) > :where(.kit-page-sub) {
    grid-column: 1;
    margin: 0;
    color: var(--kit-color-content-muted);
    text-wrap: pretty;
    max-inline-size: var(--kit-width-prose);
  }
  :where(.kit-page-head) > :where(.kit-page-actions) {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--kit-space-inline);
  }
  @container (max-width: 34rem) {
    :where(.kit-page-head) {
      grid-template-columns: minmax(0, 1fr);
    }
    :where(.kit-page-head) > :where(.kit-page-actions) {
      grid-column: 1;
      grid-row: auto;
      justify-content: flex-start;
    }
  }
  :where(.kit-page-head)[data-size="lead"] {
    gap: var(--kit-space-stack);
    margin-block-end: var(--kit-space-section);
  }
  :where(.kit-page-head)[data-size="lead"] > :where(.kit-page-title) {
    font-size: var(--kit-font-size-700);
    line-height: var(--kit-line-height-700);
    letter-spacing: var(--kit-letter-spacing-tight);
  }
  :where(.kit-page-head)[data-size="lead"] > :where(.kit-page-sub) {
    font-size: var(--kit-font-size-500);
    line-height: var(--kit-line-height-500);
  }
}
@layer kit.components {
  :where(.kit-tree, .kit-tree-list) {
    --kit-tree-indent: calc(var(--kit-icon-size-md) + var(--kit-space-inline));
    --kit-tree-row-height: var(--kit-space-800);
    --kit-tree-expander-size: var(--kit-space-600);
    --kit-tree-row-padding: var(--kit-space-100);
    --kit-tree-guide-offset: calc(var(--kit-tree-row-padding) + (var(--kit-tree-expander-size) / 2));
    display: block;
    color: var(--kit-color-content);
    font-size: var(--kit-font-size-400);
    line-height: var(--kit-line-height-400);
  }
  @media (pointer: coarse) {
    :where(.kit-tree, .kit-tree-list) {
      --kit-tree-row-height: max(44px, var(--kit-space-800));
    }
  }
  :where(.kit-tree, .kit-tree-list, .kit-tree-group) {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  :where(.kit-tree-group) {
    margin-inline-start: var(--kit-tree-guide-offset);
    padding-inline-start: calc(
      var(--kit-tree-indent) - var(--kit-tree-guide-offset) - var(--kit-border-width-hairline)
    );
    border-inline-start: var(--kit-border-width-hairline) solid var(--kit-color-border);
  }
  :where(.kit-tree, .kit-tree-list)[data-guides="off"] :where(.kit-tree-group) {
    border-inline-start-color: transparent;
  }
  @media (hover: hover) {
    :where(.kit-tree, .kit-tree-list):not([data-guides="off"]) :where(.kit-tree-group):has(:where(.kit-tree-row):hover) {
      border-inline-start-color: var(--kit-color-border-strong);
    }
  }
  :where(.kit-tree, .kit-tree-list):not([data-guides="off"]) :where(.kit-tree-group):has(:where(.kit-tree-row):focus-visible) {
    border-inline-start-color: var(--kit-color-border-strong);
  }
  :where(.kit-tree-row) {
    display: flex;
    align-items: center;
    gap: var(--kit-space-inline);
    min-block-size: var(--kit-tree-row-height);
    padding-inline: var(--kit-tree-row-padding);
    border-radius: var(--kit-radius-control);
    color: inherit;
    text-decoration: none;
    cursor: default;
    user-select: none;
    list-style: none;
    transition: background-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-tree-row)::-webkit-details-marker { display: none; }
  :where(summary.kit-tree-row) { cursor: pointer; }
  @media (hover: hover) {
    :where(.kit-tree-row):hover { background: var(--kit-color-surface-hover); }
  }
  :where([aria-selected="true"]) > :where(.kit-tree-row),
  :where(.kit-tree-row)[aria-selected="true"] {
    background: var(--kit-color-accent-tint);
    color: var(--kit-color-content-accent);
  }
  :where(.kit-tree-node):focus-visible,
  :where(.kit-tree-row):focus-visible {
    outline: none;
  }
  :where(.kit-tree-node):focus-visible > :where(.kit-tree-row),
  :where(.kit-tree-row):focus-visible {
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: var(--kit-focus-offset);
    box-shadow: 0 0 0 var(--kit-focus-offset) var(--kit-focus-halo);
  }
  :where(.kit-tree-node)[aria-selected="true"]:focus-visible > :where(.kit-tree-row) {
    background: color-mix(in oklab, var(--kit-color-accent-tint), var(--kit-color-accent) 12%);
  }
  :where(.kit-tree-node)[aria-disabled="true"] > :where(.kit-tree-row) {
    color: var(--kit-color-content-disabled);
    cursor: not-allowed;
  }
  :where(.kit-tree-expander, .kit-table-expander) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: var(--kit-tree-expander-size, var(--kit-space-600));
    block-size: var(--kit-tree-expander-size, var(--kit-space-600));
    padding: 0;
    border: 0;
    background: none;
    color: var(--kit-color-content-muted);
    border-radius: var(--kit-radius-mark);
    cursor: pointer;
    transition: background-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  @media (hover: hover) {
    :where(.kit-tree-expander, .kit-table-expander):hover {
      background: var(--kit-color-surface-pressed);
      color: var(--kit-color-content);
    }
  }
  :where(.kit-tree-expander, .kit-table-expander) > :where(svg) {
    inline-size: var(--kit-icon-size-md);
    block-size: var(--kit-icon-size-md);
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--kit-icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    rotate: calc(var(--_open, 0) * 90deg);
    transition: rotate var(--kit-duration-2) var(--kit-easing-standard);
  }
  :where(.kit-tree-expander, .kit-table-expander):dir(rtl) > :where(svg) { scale: -1 1; }
  :where(.kit-tree-branch)[open] > :where(.kit-tree-row) :where(.kit-tree-expander) > :where(svg),
  :where([aria-expanded="true"]) > :where(.kit-tree-row) :where(.kit-tree-expander) > :where(svg),
  :where([aria-expanded="true"]) :where(.kit-table-expander) > :where(svg) {
    --_open: 1;
  }
  :where(.kit-tree-spacer) {
    flex: none;
    inline-size: var(--kit-tree-expander-size, var(--kit-space-600));
    block-size: var(--kit-tree-expander-size, var(--kit-space-600));
  }
  :where(.kit-tree, .kit-tree-list)[data-expander="icon"] :where(.kit-tree-expander) > :where(svg),
  :where(.kit-tree, .kit-tree-list)[data-expander="icon"] :where(.kit-tree-expander) > :where(.kit-tree-icon) {
    transform: none;
  }
  :where(.kit-tree, .kit-tree-list)[data-expander="icon"] :where(.kit-tree-spacer) {
    display: grid;
    place-items: center;
  }
  :where(.kit-tree-icon) {
    flex: none;
    inline-size: var(--kit-icon-size-md);
    block-size: var(--kit-icon-size-md);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-tree-icon) > :where([data-when="open"]) { display: none; }
  :where(details[open]) > :where(summary) :where(.kit-tree-icon) > :where([data-when="open"]),
  :where([aria-expanded="true"]) > :where(.kit-tree-row) :where(.kit-tree-icon) > :where([data-when="open"]) {
    display: revert;
  }
  :where(details[open]) > :where(summary) :where(.kit-tree-icon) > :where([data-when="closed"]),
  :where([aria-expanded="true"]) > :where(.kit-tree-row) :where(.kit-tree-icon) > :where([data-when="closed"]) {
    display: none;
  }
  :where(.kit-tree-label) {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :where(.kit-tree-label) :where(mark) {
    background: none;
    color: inherit;
    font-weight: var(--kit-font-weight-semibold);
  }
  :where(.kit-tree-meta) {
    flex: none;
    margin-inline-start: auto;
    padding-inline-start: var(--kit-space-inline);
    color: var(--kit-color-content-muted);
    font-size: var(--kit-font-size-200);
    font-variant-numeric: tabular-nums;
  }
  :where([aria-selected="true"]) > :where(.kit-tree-row) > :where(.kit-tree-meta) {
    color: inherit;
    opacity: 0.75;
  }
  :where(.kit-tree-actions) {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--kit-space-100);
  }
  @media (hover: hover) {
    :where(.kit-tree, .kit-tree-list)[data-actions="hover"] :where(.kit-tree-actions) {
      opacity: 0;
      transition: opacity var(--kit-duration-1) var(--kit-easing-standard);
    }
    :where(.kit-tree, .kit-tree-list)[data-actions="hover"] :where(.kit-tree-row):is(:hover, :focus-within) :where(.kit-tree-actions) {
      opacity: 1;
    }
  }
  :where(.kit-tree) {
    interpolate-size: allow-keywords;
  }
  :where(.kit-tree-node) > :where(.kit-tree-group) {
    overflow: hidden;
    max-block-size: max-content;
    transition: max-block-size var(--kit-duration-2) var(--kit-easing-standard);
  }
  :where(.kit-tree-node)[aria-expanded="false"] > :where(.kit-tree-group) {
    max-block-size: 0;
  }
  :where(.kit-tree-node)[aria-busy="true"] > :where(.kit-tree-row) {
    color: var(--kit-color-content-muted);
    cursor: progress;
  }
  :where(.kit-tree-node)[aria-busy="true"] > :where(.kit-tree-row) :where(.kit-tree-expander) > :where(svg) {
    opacity: 0.4;
  }
  :where(.kit-tree-hint) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  @media (forced-colors: active) {
    :where(.kit-tree-group) { border-inline-start-color: CanvasText; }
    :where([aria-selected="true"]) > :where(.kit-tree-row) {
      background: Highlight;
      color: HighlightText;
      forced-color-adjust: none;
    }
    :where(.kit-tree-node):focus-visible > :where(.kit-tree-row),
    :where(.kit-tree-row):focus-visible {
      outline-color: CanvasText;
    }
  }
}
@layer kit.components {
  :where(.kit-org-chart) {
    --kit-org-link: var(--kit-space-800);
    --kit-org-gap: var(--kit-space-600);
    --kit-org-card-inline: 12rem;
    --kit-org-elbow: var(--kit-radius-mark);
    --kit-org-line: var(--kit-border-width-hairline) solid var(--kit-color-border);
    display: block;
    inline-size: max-content;
    margin: 0;
    padding: 0;
  }
  :where(.kit-org-chart) :where(li),
  :where(.kit-org-chart) :where(.kit-tree-branch) {
    display: grid;
    justify-items: center;
    min-inline-size: 0;
  }
  :where(.kit-org-chart) :where(.kit-tree-group) {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    inline-size: max-content;
    column-gap: var(--kit-org-gap);
    align-items: start;
    justify-items: center;
    margin-inline: 0;
    padding-inline: 0;
    border-inline-start: 0;
    padding-block-start: calc(var(--kit-org-link) / 2);
    position: relative;
  }
  :where(.kit-org-chart)[data-layout="compact"] :where(.kit-tree-group) {
    grid-auto-columns: max-content;
  }
  :where(.kit-org-chart) :where(.kit-tree-node)[aria-expanded="false"] > :where(.kit-tree-group) {
    display: none;
  }
  :where(.kit-org-chart) :where(.kit-tree-group)::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    block-size: calc(var(--kit-org-link) / 2);
    border-inline-start: var(--kit-org-line);
  }
  :where(.kit-org-chart) :where(.kit-tree-group) > :where(li) {
    position: relative;
    padding-block-start: calc(var(--kit-org-link) / 2);
  }
  :where(.kit-org-chart) :where(.kit-tree-group) > :where(li)::before,
  :where(.kit-org-chart) :where(.kit-tree-group) > :where(li)::after {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inline-size: 50%;
    block-size: calc(var(--kit-org-link) / 2);
    border-block-start: var(--kit-org-line);
  }
  :where(.kit-org-chart) :where(.kit-tree-group) > :where(li)::before { inset-inline-end: 50%; }
  :where(.kit-org-chart) :where(.kit-tree-group) > :where(li)::after {
    inset-inline-start: 50%;
    border-inline-start: var(--kit-org-line);
    border-start-start-radius: var(--kit-org-elbow);
  }
  :where(.kit-org-chart) :where(.kit-tree-group) > :where(li):first-child::before {
    border-block-start: 0;
  }
  :where(.kit-org-chart) :where(.kit-tree-group) > :where(li):last-child::after {
    display: none;
  }
  :where(.kit-org-chart) :where(.kit-tree-group) > :where(li):last-child::before {
    border-inline-end: var(--kit-org-line);
    border-start-end-radius: var(--kit-org-elbow);
  }
  :where(.kit-org-chart) :where(.kit-tree-group) > :where(li):only-child::before {
    border-start-end-radius: 0;
  }
  :where(.kit-org-chart) :where(.kit-tree-row) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "avatar label"
      "avatar meta";
    align-items: center;
    column-gap: var(--kit-space-inline);
    inline-size: var(--kit-org-card-inline);
    min-block-size: 0;
    padding: var(--kit-space-inset-tight);
    border: var(--kit-org-line);
    border-radius: var(--kit-radius-surface);
    background: var(--kit-color-surface-raised);
    box-shadow: var(--kit-elevation-1);
    text-align: start;
    position: relative;
  }
  :where(.kit-org-chart) :where(.kit-tree-label) {
    grid-area: label;
    font-weight: var(--kit-font-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :where(.kit-org-chart) :where(.kit-tree-meta) {
    grid-area: meta;
    font-size: var(--kit-font-size-300);
    color: var(--kit-color-content-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :where(.kit-org-chart) :where(.kit-org-avatar) {
    grid-area: avatar;
    display: grid;
    place-items: center;
    position: relative;
    inline-size: var(--kit-space-1000);
    block-size: var(--kit-space-1000);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-accent-tint);
    color: var(--kit-color-content-accent);
    font-size: var(--kit-font-size-200);
    font-weight: var(--kit-font-weight-semibold);
    text-transform: uppercase;
    overflow: hidden;
    flex: none;
  }
  :where(.kit-org-chart) :where(.kit-org-avatar) > :where(img) {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: inherit;
  }
  :where(.kit-org-chart) :where(.kit-tree-expander) {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 50%;
    translate: -50% 50%;
    background: var(--kit-color-surface-raised);
    border: var(--kit-org-line);
    border-radius: var(--kit-radius-full);
  }
  :where(.kit-org-chart) :where(.kit-tree-expander) > :where(svg) {
    rotate: calc(90deg + var(--_open, 0) * 90deg);
  }
  :where(.kit-org-chart) :where(.kit-tree-spacer) { display: none; }
  :where(.kit-org-chart)[data-orientation="sideways"] :where(li),
  :where(.kit-org-chart)[data-orientation="sideways"] :where(.kit-tree-branch) {
    grid-auto-flow: column;
    align-items: center;
    justify-items: start;
  }
  :where(.kit-org-chart)[data-orientation="sideways"] :where(.kit-tree-group) {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-auto-rows: 1fr;
    inline-size: auto;
    column-gap: 0;
    row-gap: var(--kit-org-gap);
    align-items: center;
    justify-items: start;
    padding-block-start: 0;
    padding-inline-start: calc(var(--kit-org-link) / 2);
  }
  :where(.kit-org-chart)[data-orientation="sideways"][data-layout="compact"] :where(.kit-tree-group) {
    grid-auto-rows: max-content;
  }
  :where(.kit-org-chart)[data-orientation="sideways"] :where(.kit-tree-group)::before {
    inset-block-start: 50%;
    inset-inline-start: 0;
    inline-size: calc(var(--kit-org-link) / 2);
    block-size: 0;
    border-inline-start: 0;
    border-block-start: var(--kit-org-line);
  }
  :where(.kit-org-chart)[data-orientation="sideways"] :where(.kit-tree-group) > :where(li) {
    padding-block-start: 0;
    padding-inline-start: calc(var(--kit-org-link) / 2);
  }
  :where(.kit-org-chart)[data-orientation="sideways"] :where(.kit-tree-group) > :where(li)::before,
  :where(.kit-org-chart)[data-orientation="sideways"] :where(.kit-tree-group) > :where(li)::after {
    inset-block-start: auto;
    inset-inline-start: 0;
    inset-inline-end: auto;
    inline-size: calc(var(--kit-org-link) / 2);
    block-size: 50%;
    border-block-start: 0;
    border-inline-start: var(--kit-org-line);
    border-start-start-radius: 0;
    border-start-end-radius: 0;
  }
  :where(.kit-org-chart)[data-orientation="sideways"] :where(.kit-tree-group) > :where(li)::before {
    inset-block-end: 50%;
  }
  :where(.kit-org-chart)[data-orientation="sideways"] :where(.kit-tree-group) > :where(li)::after {
    inset-block-start: 50%;
    border-block-start: var(--kit-org-line);
    border-start-start-radius: var(--kit-org-elbow);
  }
  :where(.kit-org-chart)[data-orientation="sideways"] :where(.kit-tree-group) > :where(li):first-child::before {
    border-inline-start: 0;
  }
  :where(.kit-org-chart)[data-orientation="sideways"] :where(.kit-tree-group) > :where(li):last-child::after {
    display: none;
  }
  :where(.kit-org-chart)[data-orientation="sideways"] :where(.kit-tree-group) > :where(li):last-child::before {
    border-block-end: var(--kit-org-line);
    border-end-start-radius: var(--kit-org-elbow);
  }
  :where(.kit-org-chart)[data-orientation="sideways"] :where(.kit-tree-group) > :where(li):only-child::before {
    border-end-start-radius: 0;
  }
  :where(.kit-org-chart)[data-orientation="sideways"] :where(.kit-tree-expander) {
    inset-block-end: auto;
    inset-block-start: 50%;
    inset-inline-start: auto;
    inset-inline-end: 0;
    translate: 50% -50%;
  }
  :where(.kit-org-chart)[data-orientation="sideways"] :where(.kit-tree-expander) > :where(svg) {
    rotate: calc(var(--_open, 0) * 90deg);
  }
  :where(.kit-org) {
    padding: var(--kit-space-inset-tight);
    min-inline-size: 0;
  }
  @media (forced-colors: active) {
    :where(.kit-org-chart) {
      --kit-org-line: var(--kit-border-width-hairline) solid CanvasText;
    }
    :where(.kit-org-chart) :where(.kit-tree-row) {
      border: var(--kit-border-width-hairline) solid CanvasText;
    }
    :where(.kit-org-chart) :where(.kit-org-avatar) {
      border: var(--kit-border-width-hairline) solid CanvasText;
    }
  }
}
@layer kit.components {
  :where(.kit-table, table) :where(tr)[data-kit-level] { --kit-tree-level: 1; }
  :where(.kit-table, table) :where(tr)[data-kit-level="2"] { --kit-tree-level: 2; }
  :where(.kit-table, table) :where(tr)[data-kit-level="3"] { --kit-tree-level: 3; }
  :where(.kit-table, table) :where(tr)[data-kit-level="4"] { --kit-tree-level: 4; }
  :where(.kit-table, table) :where(tr)[data-kit-level="5"] { --kit-tree-level: 5; }
  :where(.kit-table, table) :where(tr)[data-kit-level="6"] { --kit-tree-level: 6; }
  :where(.kit-table, table) :where(tr)[data-kit-level="7"] { --kit-tree-level: 7; }
  :where(.kit-table, table) :where(tr)[data-kit-level="8"] { --kit-tree-level: 8; }
  :where(.kit-table, table) :where(tr)[data-kit-level]:not(
    [data-kit-level="1"], [data-kit-level="2"], [data-kit-level="3"], [data-kit-level="4"],
    [data-kit-level="5"], [data-kit-level="6"], [data-kit-level="7"], [data-kit-level="8"]
  ) { --kit-tree-level: 9; }
  :where(.kit-table, table) :where(th, td)[data-cell="tree"] {
    --kit-tree-indent: calc(var(--kit-icon-size-md) + var(--kit-space-inline));
    --kit-tree-expander-size: var(--kit-space-600);
    padding-inline-start: calc(
      var(--kit-table-cell-padding-x) + ((var(--kit-tree-level, 1) - 1) * var(--kit-tree-indent))
    );
  }
  :where(.kit-table, table) :where(td)[data-cell="tree"] > :where(.kit-table-tree-cell) {
    display: flex;
    align-items: center;
    gap: var(--kit-space-inline);
    min-inline-size: 0;
  }
  :where(.kit-table, table) :where(td)[data-cell="tree"] :where(.kit-tree-spacer) {
    inline-size: var(--kit-tree-expander-size);
    block-size: var(--kit-tree-expander-size);
  }
  :where(.kit-table, table) :where(tr)[data-cell-row="group"] {
    font-weight: var(--kit-font-weight-medium);
  }
  :where(.kit-table, table) :where(tr)[data-cell-row="group"]:not(:has(:where(input[type="checkbox"]):checked)) {
    --_row: var(--kit-color-surface-sunken);
  }
  :where(.kit-table, table) :where(tbody)[data-kit-group][data-state="closed"] > :where(tr):not([data-cell-row="group"]) {
    display: none;
  }
  :where(.kit-table-rollup) {
    margin-inline-start: var(--kit-space-inline);
    font-variant-numeric: tabular-nums;
  }
  :where(.kit-table, table) :where(tr)[data-cell-row="total"] > :where(th, td) {
    font-weight: var(--kit-font-weight-medium);
    font-variant-numeric: tabular-nums;
  }
  :where(.kit-table, table) :where(tr)[data-cell-row="total"][data-variant="subtotal"] > :where(th, td) {
    color: var(--kit-color-content-muted);
    border-block-start: var(--kit-border-width-hairline) solid var(--kit-color-border);
  }
  :where(.kit-table, table) :where(tfoot) :where(tr)[data-cell-row="total"][data-variant="total"] > :where(th, td) {
    font-weight: var(--kit-font-weight-semibold);
    color: var(--kit-color-content);
  }
  :where(.kit-table, table) :where(tr)[data-cell-row="detail"] > :where(td) {
    padding-block-start: 0;
    padding-inline-start: calc(
      var(--kit-table-cell-padding-x) + ((var(--kit-tree-level, 1) - 1) * var(--kit-tree-indent, 24px))
    );
    border-block-start: 0;
    color: var(--kit-color-content-muted);
    font-size: var(--kit-font-size-300);
  }
  :where(.kit-table, table)[role="treegrid"] {
    outline: none;
  }
  :where(.kit-table, table)[role="treegrid"] > :where(tbody) > :where(tr):focus-visible {
    outline: none;
  }
  :where(.kit-table, table)[role="treegrid"] > :where(tbody) > :where(tr):focus-visible > :where(th, td) {
    outline: none;
    box-shadow:
      inset 0 var(--kit-focus-width) 0 var(--kit-color-focus),
      inset 0 calc(-1 * var(--kit-focus-width)) 0 var(--kit-color-focus),
      var(--kit-focus-halo);
    --_row: var(--kit-color-surface-hover);
  }
  :where(.kit-table, table)[role="treegrid"] > :where(tbody) > :where(tr):focus-visible > :where(th, td):first-child {
    box-shadow:
      inset 0 var(--kit-focus-width) 0 var(--kit-color-focus),
      inset 0 calc(-1 * var(--kit-focus-width)) 0 var(--kit-color-focus),
      inset var(--kit-focus-width) 0 0 var(--kit-color-focus),
      var(--kit-focus-halo);
  }
  :where(.kit-table, table)[role="treegrid"] > :where(tbody) > :where(tr):focus-visible > :where(th, td):last-child {
    box-shadow:
      inset 0 var(--kit-focus-width) 0 var(--kit-color-focus),
      inset 0 calc(-1 * var(--kit-focus-width)) 0 var(--kit-color-focus),
      inset calc(-1 * var(--kit-focus-width)) 0 0 var(--kit-color-focus),
      var(--kit-focus-halo);
  }
  @media (forced-colors: active) {
    :where(.kit-table, table)[role="treegrid"] > :where(tbody) > :where(tr):focus-visible > :where(th, td) {
      box-shadow: none;
      outline: var(--kit-focus-width) solid CanvasText;
      outline-offset: calc(-1 * var(--kit-focus-width));
    }
  }
}
@layer kit.components {
  :where(td, th)[data-editable] {
    position: relative;
    cursor: text;
  }
  :where(td, th)[data-editable][data-editor="select"],
  :where(td, th)[data-editable][data-editor="checkbox"] {
    cursor: pointer;
  }
  @media (hover: hover) {
    :where(td, th)[data-editable]:hover {
      --_row: var(--kit-color-surface-hover);
    }
  }
  :where(td, th)[data-editable][data-state]::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--kit-border-width-emphasis);
    background: var(--_state, var(--kit-color-border-strong));
  }
  :where(td, th)[data-editable][data-state="dirty"] { --_state: var(--kit-color-accent); }
  :where(td, th)[data-editable][data-state="saving"] { --_state: var(--kit-color-content-muted); }
  :where(td, th)[data-editable][data-state="saved"] { --_state: var(--kit-color-success-border); }
  :where(td, th)[data-editable][data-state="invalid"] { --_state: var(--kit-color-warning-border); }
  :where(td, th)[data-editable][data-state="failed"] { --_state: var(--kit-color-danger-border); }
  :where(td, th)[data-editable][data-state="invalid"],
  :where(td, th)[data-editable][data-state="failed"] {
    --_row: var(--kit-color-danger-surface);
  }
  :where(table)[data-kit-mode="cell"] > :where(tbody) > :where(tr):focus-visible > :where(th, td) {
    box-shadow: none;
    --_row: initial;
  }
  :where(table)[data-kit-mode="cell"] :where(th, td):focus-visible {
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: var(--kit-focus-offset);
    box-shadow: var(--kit-focus-halo);
    --_row: var(--kit-color-surface-hover);
  }
  :where(.kit-grid-editor) {
    inline-size: 100%;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-variant-numeric: inherit;
    text-align: inherit;
  }
  :where(.kit-grid-editor):focus-visible {
    outline: none;
  }
  :where(td, th)[data-editing="true"] {
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: var(--kit-focus-offset);
    box-shadow: var(--kit-focus-halo);
    --_row: var(--kit-color-surface-raised);
  }
  :where(.kit-grid-editor)[type="checkbox"] {
    inline-size: auto;
  }
  :where(td, th)[data-editable] > :where(.kit-field-error) {
    display: block;
    margin-block-start: var(--kit-space-050);
    white-space: normal;
    text-wrap: pretty;
  }
  @media (forced-colors: active) {
    :where(td, th)[data-editable][data-state]::before {
      background: CanvasText;
      forced-color-adjust: none;
    }
    :where(td, th)[data-editable][data-state="invalid"]::before,
    :where(td, th)[data-editable][data-state="failed"]::before {
      background: Highlight;
    }
    :where(table)[data-kit-mode="cell"] :where(th, td):focus-visible {
      outline-color: Highlight;
    }
  }
}
@layer kit.components {
  :where(.kit-reorder) {
    --_grip: var(--kit-space-600);
    display: grid;
    gap: var(--kit-space-050);
    margin: 0;
    padding: 0;
  }
  @media (pointer: coarse) {
    :where(.kit-reorder) { --_grip: max(44px, var(--kit-space-600)); }
  }
  :where(.kit-reorder-item) {
    display: flex;
    align-items: center;
    gap: var(--kit-space-inline);
    min-block-size: var(--kit-space-800);
    padding-inline: var(--kit-space-100);
    border-radius: var(--kit-radius-control);
    background: var(--kit-color-surface);
    color: var(--kit-color-content);
    transition: transform var(--kit-duration-2) var(--kit-easing-standard),
                background-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  @media (hover: hover) {
    :where(.kit-reorder-item):hover { background: var(--kit-color-surface-hover); }
  }
  :where(.kit-reorder-item):focus-visible {
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: var(--kit-focus-offset);
    box-shadow: var(--kit-focus-halo);
  }
  :where(.kit-reorder-item)[data-state="grabbed"],
  :where(.kit-reorder-item)[data-state="dragging"] {
    background: var(--kit-color-surface-raised);
    box-shadow: var(--kit-elevation-2);
    position: relative;
    z-index: 1;
    transition: background-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-reorder-item)[data-state="grabbed"] {
    outline: var(--kit-focus-width) solid var(--kit-color-accent);
    outline-offset: var(--kit-focus-offset);
  }
  :where(.kit-reorder)[data-state="saving"] {
    cursor: progress;
  }
  :where(.kit-reorder)[data-state="saving"] :where(.kit-reorder-item) {
    color: var(--kit-color-content-muted);
  }
  :where(.kit-reorder-grip) {
    flex: none;
    inline-size: var(--_grip);
    block-size: var(--_grip);
    border-radius: var(--kit-radius-control);
    background-image: radial-gradient(circle, var(--kit-color-content-muted) 1px, transparent 1px);
    background-size: 4px 4px;
    background-position: center;
    background-repeat: repeat;
    mask-image: linear-gradient(black, black);
    mask-size: 10px 14px;
    mask-position: center;
    mask-repeat: no-repeat;
    cursor: grab;
    touch-action: none;
  }
  :where(.kit-reorder-item)[data-state="dragging"] :where(.kit-reorder-grip),
  :where(.kit-reorder-item)[data-state="grabbed"] :where(.kit-reorder-grip) {
    cursor: grabbing;
  }
  @media (hover: hover) {
    :where(.kit-reorder-grip):hover { background-color: var(--kit-color-surface-sunken); }
  }
  :where(.kit-reorder-label) {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :where(.kit-reorder-meta) {
    flex: none;
    color: var(--kit-color-content-muted);
    font-size: var(--kit-font-size-200);
    font-variant-numeric: tabular-nums;
  }
  :where(.kit-reorder-move) {
    flex: none;
    display: flex;
    gap: var(--kit-space-050);
  }
  :where(.kit-reorder-move) > :where([data-dir]) {
    display: inline-grid;
    place-items: center;
    inline-size: var(--_grip);
    block-size: var(--_grip);
    border-radius: var(--kit-radius-control);
    color: var(--kit-color-content-muted);
    cursor: pointer;
  }
  @media (hover: hover) {
    :where(.kit-reorder-move) > :where([data-dir]):hover {
      background: var(--kit-color-surface-sunken);
      color: var(--kit-color-content);
    }
  }
  :where(.kit-reorder-move) > :where([data-dir])[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
  }
  @media (forced-colors: active) {
    :where(.kit-reorder-item)[data-state="grabbed"],
    :where(.kit-reorder-item)[data-state="dragging"] {
      outline: var(--kit-focus-width) solid Highlight;
    }
    :where(.kit-reorder-grip) {
      border: var(--kit-border-width-hairline) solid CanvasText;
      forced-color-adjust: none;
    }
  }
}
@layer kit.components {
  :where(.kit-dialog, dialog) {
    padding: 0;
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-surface-lg);
    background: var(--kit-color-surface-raised);
    color: var(--kit-color-content);
    box-shadow: var(--kit-elevation-3);
    inline-size: min(var(--_dialog-width, 32rem), calc(100% - var(--kit-space-800)));
    max-block-size: calc(100% - var(--kit-space-800));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    opacity: 0;
    scale: 0.98;
    transition:
      opacity var(--kit-duration-2) var(--kit-easing-standard),
      scale var(--kit-duration-2) var(--kit-easing-standard),
      display var(--kit-duration-2) allow-discrete,
      overlay var(--kit-duration-2) allow-discrete;
  }
  :where(.kit-dialog, dialog)[open] { opacity: 1; scale: 1; }
  :where(.kit-dialog, dialog):modal { overflow: clip; }
  :where(.kit-dialog, dialog):not([open]) { display: none; }
  @starting-style {
    :where(.kit-dialog, dialog)[open] { opacity: 0; scale: 0.98; }
  }
  :where(.kit-dialog, dialog)[data-size="sm"] { --_dialog-width: 24rem; }
  :where(.kit-dialog, dialog)[data-size="lg"] { --_dialog-width: 48rem; }
  :where(.kit-dialog, dialog)::backdrop {
    background: var(--kit-color-scrim);
    opacity: 0;
    transition:
      opacity var(--kit-duration-2) var(--kit-easing-standard),
      display var(--kit-duration-2) allow-discrete,
      overlay var(--kit-duration-2) allow-discrete;
  }
  :where(.kit-dialog, dialog)[open]::backdrop { opacity: 1; }
  @starting-style {
    :where(.kit-dialog, dialog)[open]::backdrop { opacity: 0; }
  }
  :where(.kit-dialog-header) {
    display: flex;
    align-items: start;
    gap: var(--kit-space-300);
    padding: var(--kit-space-400) var(--kit-space-500) var(--kit-space-300);
  }
  :where(.kit-dialog-title) {
    margin: 0;
    font-size: var(--kit-font-size-600);
    line-height: var(--kit-line-height-600);
    font-weight: var(--kit-font-weight-medium);
    letter-spacing: var(--kit-letter-spacing-tight);
  }
  :where(.kit-dialog-body) {
    padding: 0 var(--kit-space-500) var(--kit-space-400);
    display: grid;
    gap: var(--kit-space-stack);
    align-content: start;
  }
  :where(.kit-dialog-footer) {
    display: flex;
    justify-content: flex-end;
    gap: var(--kit-space-inline);
    flex-wrap: wrap;
    padding: var(--kit-space-300) var(--kit-space-500) var(--kit-space-400);
    border-block-start: var(--kit-border-width-hairline) solid var(--kit-color-border);
  }
  :where(.kit-dialog-close) {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: var(--kit-space-600);
    block-size: var(--kit-space-600);
    border: 0;
    background: none;
    border-radius: var(--kit-radius-control);
    color: var(--kit-color-content-muted);
    cursor: pointer;
    transition: background-color var(--kit-duration-1) var(--kit-easing-standard),
                color var(--kit-duration-1) var(--kit-easing-standard);
  }
  @media (hover: hover) {
    :where(.kit-dialog-close):hover {
      background: var(--kit-color-surface-hover);
      color: var(--kit-color-content);
    }
  }
  :where(.kit-dialog, dialog) > :where(form):only-child {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-block-size: 0;
  }
  html:has(dialog:modal) {
    overflow: hidden;
    padding-inline-end: var(--kit-scrollbar-width, 0px);
  }
  @media (forced-colors: active) {
    :where(.kit-dialog, dialog) {
      border: var(--kit-border-width-emphasis) solid CanvasText;
      box-shadow: none;
    }
    :where(.kit-dialog, dialog)::backdrop { background: Canvas; }
  }
}
@layer kit.components {
  :where(.kit-popover-anchor) {
    anchor-scope: --kit-popover;
    display: inline-block;
  }
  :where(.kit-popover-anchor) > :where([popovertarget], .kit-popover-trigger) {
    anchor-name: --kit-popover;
  }
  :where(.kit-popover) {
    position: absolute;
    inset: auto;
    margin: 0;
    position-anchor: --kit-popover;
    position-area: block-end;
    margin-block-start: var(--kit-space-200);
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    position-try-order: most-block-size;
    position-visibility: anchors-visible;
    overflow: visible;
    inline-size: max-content;
    max-inline-size: min(20rem, calc(100vw - var(--kit-space-800)));
    padding: var(--kit-space-300) var(--kit-space-400);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-surface);
    background: var(--kit-color-surface-raised);
    color: var(--kit-color-content);
    box-shadow: var(--kit-elevation-2);
    font-size: var(--kit-font-size-400);
    line-height: var(--kit-line-height-400);
    opacity: 0;
    translate: 0 -4px;
    transition:
      opacity var(--kit-duration-1) var(--kit-easing-standard),
      translate var(--kit-duration-1) var(--kit-easing-standard),
      display var(--kit-duration-1) allow-discrete,
      overlay var(--kit-duration-1) allow-discrete;
  }
  :where(.kit-popover):popover-open { opacity: 1; translate: 0 0; }
  @starting-style {
    :where(.kit-popover):popover-open { opacity: 0; translate: 0 -4px; }
  }
  :where(.kit-popover)[data-side="block-start"] {
    position-area: block-start;
    margin-block: 0 var(--kit-space-200);
  }
  :where(.kit-popover)[data-side="inline-start"] {
    position-area: inline-start;
    margin-block-start: 0;
    margin-inline-end: var(--kit-space-200);
  }
  :where(.kit-popover)[data-side="inline-end"] {
    position-area: inline-end;
    margin-block-start: 0;
    margin-inline-start: var(--kit-space-200);
  }
  :where(.kit-popover)[data-align="start"] { position-area: block-end span-inline-end; }
  :where(.kit-popover)[data-align="start"][data-side="block-start"] { position-area: block-start span-inline-end; }
  :where(.kit-popover)[data-align="end"] { position-area: block-end span-inline-start; }
  :where(.kit-popover)[data-align="end"][data-side="block-start"] { position-area: block-start span-inline-start; }
  @media (forced-colors: active) {
    :where(.kit-popover) {
      border: var(--kit-border-width-emphasis) solid CanvasText;
      box-shadow: none;
    }
  }
}
@layer kit.components {
  :where(.kit-calendar) {
    display: grid;
    inline-size: fit-content;
    max-inline-size: 100%;
    gap: var(--kit-space-200);
    isolation: isolate;
    color: var(--kit-color-content);
    font-variant-numeric: tabular-nums;
  }
  :where(.kit-calendar-header) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kit-space-200);
  }
  :where(.kit-calendar-heading) { display: flex; justify-content: center; min-inline-size: 0; }
  :where(.kit-calendar-zoom) {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--kit-control-height-sm);
    padding-inline: var(--kit-space-200);
    border: 0;
    border-radius: var(--kit-radius-100);
    background: transparent;
    color: var(--kit-color-content);
    font: inherit;
    font-size: var(--kit-font-size-400);
    font-weight: var(--kit-font-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  @media (hover: hover) {
    :where(.kit-calendar-zoom):not(:disabled):hover { background: var(--kit-color-surface-hover); }
  }
  :where(.kit-calendar-zoom):focus-visible {
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: var(--kit-focus-offset);
  }
  :where(.kit-calendar-zoom):disabled { cursor: default; }
  :where(.kit-month-grid) {
    inline-size: calc(var(--kit-control-height-md) * 7);
    border-collapse: collapse;
    table-layout: fixed;
  }
  :where(.kit-month-grid) > :where(caption) {
    padding-block-end: var(--kit-space-200);
    font-size: var(--kit-font-size-300);
    font-weight: var(--kit-font-weight-semibold);
    text-align: center;
  }
  :where(.kit-month-grid) :where(th, td) { border: 0; }
  :where(.kit-month-grid) > :where(tbody) > :where(tr) { background: none; }
  :where(.kit-month-grid) :where(th) {
    inline-size: var(--kit-control-height-md);
    block-size: var(--kit-space-800);
    padding: 0;
    font-size: var(--kit-font-size-200);
    font-weight: var(--kit-font-weight-regular);
    color: var(--kit-color-content-muted);
    text-align: center;
  }
  :where(.kit-month-grid) :where(td) {
    inline-size: var(--kit-control-height-md);
    block-size: var(--kit-control-height-md);
    padding: 0;
    font-size: var(--kit-font-size-300);
    text-align: center;
    cursor: pointer;
    outline: none;
  }
  :where(.kit-month-grid)[data-zoom] :where(td) {
    inline-size: calc(var(--kit-control-height-md) * 7 / 3);
    block-size: calc((var(--kit-space-800) + var(--kit-control-height-md) * 6) / 4);
  }
  :where(.kit-calendar-day) {
    display: grid;
    place-items: center;
    inline-size: 100%;
    block-size: 100%;
    border-radius: var(--kit-radius-control);
    transition: background-color var(--kit-duration-1) var(--kit-easing-standard), color var(--kit-duration-1) var(--kit-easing-standard);
  }
  @media (hover: hover) {
    :where(.kit-month-grid) :where(td:is([data-date], [data-month], [data-year]):not([aria-disabled="true"], [data-range])):hover > :where(.kit-calendar-day) {
      background: var(--kit-color-surface-hover);
    }
  }
  :where(.kit-month-grid) :where(td[data-outside]) { color: var(--kit-color-content-muted); }
  :where(.kit-month-grid) :where(td[aria-disabled="true"]) { color: var(--kit-color-content-disabled); cursor: not-allowed; }
  :where(.kit-month-grid) :where(td[aria-current="date"]) > :where(.kit-calendar-day) {
    box-shadow: inset 0 0 0 var(--kit-border-width-emphasis) var(--kit-color-border-strong);
  }
  :where(.kit-month-grid) :where(td[data-range]) { background: var(--kit-color-accent-tint); }
  :where(.kit-month-grid) :where(td[data-range="start"], td[data-range="both"], td[data-range]:first-child) {
    border-start-start-radius: var(--kit-radius-control);
    border-end-start-radius: var(--kit-radius-control);
  }
  :where(.kit-month-grid) :where(td[data-range="end"], td[data-range="both"], td[data-range]:last-child) {
    border-start-end-radius: var(--kit-radius-control);
    border-end-end-radius: var(--kit-radius-control);
  }
  :where(.kit-month-grid) :where(td:is([data-range="start"], [data-range="end"], [data-range="both"])) > :where(.kit-calendar-day) {
    background: var(--kit-color-accent);
    color: var(--kit-color-on-accent);
  }
  :where(.kit-month-grid) :where(td[data-range][data-preview]) { background: var(--kit-color-surface-hover); }
  :where(.kit-month-grid) :where(td[data-preview]:is([data-range="end"], [data-range="start"])):not([data-pending]) > :where(.kit-calendar-day) {
    background: var(--kit-color-accent-tint);
    color: var(--kit-color-content);
  }
  :where(.kit-month-grid) :where(td[data-pending]) > :where(.kit-calendar-day) {
    background: var(--kit-color-accent);
    color: var(--kit-color-on-accent);
  }
  :where(.kit-month-grid) :where(td:is([data-date], [data-month], [data-year])):focus-visible {
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: calc(var(--kit-focus-width) * -1);
    border-radius: var(--kit-radius-control);
  }
  :where(.kit-calendar-popover) {
    position-area: block-end span-inline-end;
    max-inline-size: calc(100vw - var(--kit-space-600));
    padding: var(--kit-space-300);
  }
  @media (forced-colors: active) {
    :where(.kit-month-grid) :where(td:is([data-range="start"], [data-range="end"], [data-range="both"], [data-pending])) > :where(.kit-calendar-day) {
      background: Highlight;
      color: HighlightText;
      forced-color-adjust: none;
    }
    :where(.kit-month-grid) :where(td[data-range]) { background: Canvas; outline: var(--kit-border-width-hairline) solid Highlight; outline-offset: calc(var(--kit-border-width-hairline) * -1); }
    :where(.kit-month-grid) :where(td[aria-current="date"]) > :where(.kit-calendar-day) { box-shadow: inset 0 0 0 var(--kit-border-width-emphasis) CanvasText; }
  }
}
@layer kit.components {
  :where(.kit-calendar-view) {
    --kit-calendar-column-min: calc(var(--kit-space-1600) + var(--kit-space-600));
    --kit-calendar-cell-min: calc(var(--kit-space-1200) + var(--kit-space-inset));
    inline-size: 100%;
    min-inline-size: calc(var(--kit-calendar-column-min) * 7);
    table-layout: fixed;
    border-collapse: collapse;
  }
  :where(.kit-calendar-view) > :where(caption) {
    font-size: var(--kit-font-size-400);
    line-height: var(--kit-line-height-400);
    font-weight: var(--kit-font-weight-semibold);
    color: var(--kit-color-content);
    text-align: start;
    padding-block-end: var(--kit-space-200);
  }
  :where(.kit-calendar-view) > :where(tbody) > :where(tr) { background: none; }
  :where(.kit-calendar-view) :where(th, td) {
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    padding: var(--kit-space-150);
    text-align: start;
    vertical-align: top;
  }
  :where(.kit-calendar-view) > :where(thead) > :where(tr) > :where(th) {
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-200);
    font-weight: var(--kit-font-weight-medium);
    color: var(--kit-color-content-muted);
    block-size: auto;
  }
  :where(.kit-calendar-view) > :where(tbody) > :where(tr) > :where(td) {
    block-size: var(--kit-calendar-cell-min);
  }
  :where(.kit-calendar-view) :where(td[data-outside]) { background: var(--kit-color-surface-sunken); }
  :where(.kit-calendar-view) :where(td[data-outside]) :where(.kit-calendar-date) { color: var(--kit-color-content-muted); }
  :where(.kit-calendar-date) {
    display: inline-block;
    min-inline-size: var(--kit-space-600);
    padding-inline: var(--kit-space-100);
    border-radius: var(--kit-radius-full);
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-400);
    font-weight: var(--kit-font-weight-medium);
    color: var(--kit-color-content);
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  :where(.kit-calendar-view) :where(td[aria-current="date"]) :where(.kit-calendar-date) {
    background: var(--kit-color-accent-tint);
    color: var(--kit-color-content-accent);
    font-weight: var(--kit-font-weight-semibold);
  }
  :where(.kit-calendar-events) {
    list-style: none;
    margin: 0;
    margin-block-start: var(--kit-space-100);
    padding: 0;
    display: grid;
    gap: var(--kit-space-050);
  }
  :where(.kit-calendar-event) {
    display: block;
    padding: var(--kit-space-050) var(--kit-space-150);
    border-inline-start: var(--kit-border-width-emphasis) solid transparent;
    border-radius: var(--kit-radius-100);
    background: var(--kit-color-surface-sunken);
    color: var(--kit-color-content);
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-300);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media (hover: hover) {
    :where(.kit-calendar-event):hover { background: var(--kit-color-surface-hover); text-decoration: underline; }
  }
  :where(.kit-calendar-event)[data-state~="overdue"] {
    border-inline-start-color: var(--kit-color-danger-border);
    color: var(--kit-color-danger-content);
  }
  :where(.kit-calendar-event)[data-state~="done"] {
    color: var(--kit-color-content-muted);
    text-decoration: line-through;
  }
  :where(.kit-calendar-overflow) { margin-block-start: var(--kit-space-050); }
  :where(.kit-calendar-overflow) > :where(summary) {
    display: block;
    padding: var(--kit-space-050) var(--kit-space-150);
    border-radius: var(--kit-radius-100);
    color: var(--kit-color-content-muted);
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-300);
    cursor: pointer;
    list-style: none;
  }
  :where(.kit-calendar-overflow) > :where(summary)::-webkit-details-marker { display: none; }
  @media (hover: hover) {
    :where(.kit-calendar-overflow) > :where(summary):hover { background: var(--kit-color-surface-hover); color: var(--kit-color-content); }
  }
  :where(.kit-calendar-overflow) > :where(summary) + :where(.kit-calendar-events) { margin-block-start: var(--kit-space-050); }
  @media (forced-colors: active) {
    :where(.kit-calendar-event)[data-state~="overdue"] { border-inline-start-color: Highlight; }
    :where(.kit-calendar-view) :where(td[aria-current="date"]) :where(.kit-calendar-date) {
      background: Highlight;
      color: HighlightText;
      forced-color-adjust: none;
    }
  }
}
@layer kit.components {
  @property --kit-swatch {
    syntax: "<color>";
    initial-value: transparent;
    inherits: true;
  }
  :where(.kit-color-swatch),
  :where(.kit-color-swatches) :where(input[type="radio"]),
  :where(.kit-color-presets) > :where([role="option"]) {
    --_size: var(--kit-space-600);
    --_ink: oklch(from var(--kit-swatch) clamp(0, (0.62 - l) * 1000, 1) 0 0);
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    display: inline-grid;
    place-content: center;
    inline-size: var(--_size);
    block-size: var(--_size);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--kit-radius-mark);
    box-shadow: inset 0 0 0 var(--kit-border-width-hairline) var(--kit-color-border);
    background-image:
      linear-gradient(var(--kit-swatch), var(--kit-swatch)),
      repeating-conic-gradient(var(--kit-color-surface-sunken) 0% 25%, var(--kit-color-surface) 0% 50%);
    background-size: auto, var(--kit-space-200) var(--kit-space-200);
    forced-color-adjust: none;
  }
  :where(.kit-color-swatch)[data-size="sm"],
  :where(.kit-color-swatches)[data-size="sm"] :where(input[type="radio"]) { --_size: var(--kit-space-500); }
  :where(.kit-color-swatch)[data-size="lg"],
  :where(.kit-color-swatches)[data-size="lg"] :where(input[type="radio"]) { --_size: var(--kit-space-800); }
  :where(.kit-color-swatch)[data-shape="circle"],
  :where(.kit-color-swatches)[data-shape="circle"] :where(input[type="radio"]) { border-radius: var(--kit-radius-full); }
  :where(.kit-color-swatch)[data-empty] {
    background-image: linear-gradient(135deg,
      transparent calc(50% - 1px), var(--kit-color-content-muted) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
    background-color: var(--kit-color-surface-raised);
  }
  :where(.kit-color-swatches) {
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--kit-space-200);
    align-items: center;
  }
  :where(.kit-color-swatches) > :where(legend) {
    flex: 1 0 100%;
    padding: 0;
    margin-block-end: var(--kit-space-100);
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
    font-weight: var(--kit-font-weight-medium);
    color: var(--kit-color-content);
  }
  :where(.kit-color-swatches) > :where(label) {
    display: inline-flex;
    align-items: center;
    gap: var(--kit-space-200);
    margin: 0;
    font-size: var(--kit-font-size-300);
    cursor: pointer;
  }
  :where(.kit-color-swatches) :where(input[type="radio"]) { cursor: pointer; }
  :where(.kit-color-swatches) :where(input[type="radio"])::before,
  :where(.kit-color-presets) > :where([role="option"])::before {
    content: "";
    inline-size: calc(var(--_size) - 10px);
    block-size: calc(var(--_size) - 10px);
    background: var(--_ink);
    clip-path: polygon(14% 44%, 0 58%, 43% 100%, 100% 16%, 86% 2%, 43% 72%);
    scale: 0;
    transition: scale var(--kit-duration-1) var(--kit-easing-spring);
  }
  :where(.kit-color-swatches) :where(input[type="radio"]):checked,
  :where(.kit-color-presets) > :where([role="option"])[aria-selected="true"] {
    box-shadow: inset 0 0 0 var(--kit-border-width-emphasis) var(--kit-color-border-strong);
  }
  :where(.kit-color-swatches) :where(input[type="radio"]):checked::before,
  :where(.kit-color-presets) > :where([role="option"])[aria-selected="true"]::before { scale: 1; }
  :where(.kit-color-swatch),
  :where(.kit-color-swatches) :where(input[type="radio"]),
  :where(.kit-color-presets) > :where([role="option"]) {
    transition: scale var(--kit-duration-1) var(--kit-easing-standard),
                box-shadow var(--kit-duration-1) var(--kit-easing-standard);
  }
  @media (hover: hover) {
    :where(.kit-color-swatches) :where(input[type="radio"]):not(:disabled):hover,
    :where(.kit-color-presets) > :where([role="option"]):not([aria-disabled="true"]):hover { scale: 1.08; }
  }
  :where(.kit-color-swatches) :where(input[type="radio"]):focus-visible,
  :where(.kit-color-presets) > :where([role="option"]):focus-visible {
    box-shadow: inset 0 0 0 var(--kit-border-width-hairline) var(--kit-color-border), var(--kit-focus-halo);
  }
  :where(.kit-color-swatches) :where(input[type="radio"]):checked:focus-visible,
  :where(.kit-color-presets) > :where([role="option"])[aria-selected="true"]:focus-visible {
    box-shadow: inset 0 0 0 var(--kit-border-width-emphasis) var(--kit-color-border-strong), var(--kit-focus-halo);
  }
  :where(.kit-color-swatches) :where(input[type="radio"]):disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
  :where(.kit-color) { align-items: center; }
  :where(.kit-color-trigger) {
    display: inline-grid;
    place-items: center;
    flex: none;
    padding-inline: var(--kit-control-padding-x-md) var(--kit-space-200);
    border-radius: var(--kit-radius-control);
    cursor: pointer;
    transition: background-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  @media (hover: hover) {
    :where(.kit-color-trigger):not([aria-disabled="true"]):hover { background: var(--kit-color-surface-hover); }
  }
  :where(.kit-color-trigger):focus-visible {
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: calc(var(--kit-focus-width) * -1);
  }
  :where(.kit-color-trigger)[aria-expanded="true"] { background: var(--kit-color-surface-pressed); }
  :where(.kit-color-trigger)[aria-disabled="true"] { cursor: not-allowed; opacity: 0.6; }
  :where(.kit-color-field) {
    font-family: var(--kit-font-mono);
    font-size: var(--kit-control-font-size-field);
    font-variant-numeric: tabular-nums;
    padding-inline-start: 0;
  }
  :where(.kit-color-contrast) {
    display: grid;
    gap: var(--kit-space-050);
    font-variant-numeric: tabular-nums;
  }
  :where(.kit-color-contrast) > :where(span) {
    display: flex;
    align-items: center;
    gap: var(--kit-space-200);
  }
  :where(.kit-color-sample) {
    flex: none;
    display: inline-grid;
    place-items: center;
    inline-size: var(--kit-space-600);
    block-size: var(--kit-space-500);
    border-radius: var(--kit-radius-mark);
    box-shadow: inset 0 0 0 var(--kit-border-width-hairline) var(--kit-color-border);
    background: var(--_bg);
    color: var(--_fg);
    font-size: var(--kit-font-size-200);
    forced-color-adjust: none;
  }
  :where(.kit-color-panel) {
    position-area: block-end span-inline-end;
    inline-size: 16rem;
    max-inline-size: calc(100vw - var(--kit-space-600));
    padding: var(--kit-space-300);
    display: grid;
    gap: var(--kit-space-300);
  }
  :where(.kit-color-area) {
    --_data-white: #ffffff;
    --_data-black: #000000;
    --_data-hue: hsl(var(--_h, 0) 100% 50%);
    --_to: to right;
    --_thumb: var(--kit-space-500);
    position: relative;
    block-size: 9rem;
    border-radius: var(--kit-radius-control);
    box-shadow: inset 0 0 0 var(--kit-border-width-hairline) var(--kit-color-border);
    background-image:
      linear-gradient(to top, var(--_data-black), transparent),
      linear-gradient(var(--_to), var(--_data-white), var(--_data-hue));
    touch-action: none;
    cursor: crosshair;
    forced-color-adjust: none;
  }
  :where(.kit-color-area):dir(rtl) { --_to: to left; }
  :where(.kit-color-area):has(:focus-visible) {
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: var(--kit-focus-width);
  }
  :where(.kit-color-area)[data-dragging] { cursor: grabbing; }
  :where(.kit-color-axis) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
  }
  :where(.kit-color-thumb) {
    --_data-ring: #ffffff;
    --_data-edge: rgb(0 0 0 / 0.5);
    position: absolute;
    inset-inline-start: calc(var(--_x, 0) * 100%);
    inset-block-start: calc((1 - var(--_y, 0)) * 100%);
    inline-size: var(--_thumb);
    block-size: var(--_thumb);
    margin-inline-start: calc(var(--_thumb) / -2);
    margin-block-start: calc(var(--_thumb) / -2);
    border: var(--kit-border-width-emphasis) solid var(--_data-ring);
    border-radius: var(--kit-radius-full);
    background-image:
      linear-gradient(var(--_color, transparent), var(--_color, transparent)),
      repeating-conic-gradient(var(--kit-color-surface-sunken) 0% 25%, var(--kit-color-surface) 0% 50%);
    background-size: auto, var(--kit-space-150) var(--kit-space-150);
    box-shadow: 0 0 0 var(--kit-border-width-hairline) var(--_data-edge),
                inset 0 0 0 var(--kit-border-width-hairline) var(--_data-edge);
    pointer-events: none;
    forced-color-adjust: none;
    transition: scale var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-color-area)[data-dragging] > :where(.kit-color-thumb) { scale: 1.15; }
  :where(.kit-color-slider) {
    --_data-hue-start: hsl(0 100% 50%);
    --_track: var(--kit-space-300);
    --_thumb: var(--kit-space-500);
    --_data-ring: #ffffff;
    --_data-edge: rgb(0 0 0 / 0.5);
    --_data-current: hsl(var(--_h, 0) 100% 50%);
  }
  :where(.kit-color-slider)::-webkit-slider-runnable-track {
    block-size: var(--_track);
    border-radius: var(--kit-radius-full);
    background: linear-gradient(var(--_to) in hsl longer hue,
      var(--_data-hue-start) calc(var(--_thumb) / 2),
      var(--_data-hue-start) calc(100% - var(--_thumb) / 2));
    box-shadow: inset 0 0 0 var(--kit-border-width-hairline) var(--kit-color-border);
    forced-color-adjust: none;
  }
  :where(.kit-color-slider)::-moz-range-track {
    block-size: var(--_track);
    border-radius: var(--kit-radius-full);
    background: linear-gradient(var(--_to) in hsl longer hue,
      var(--_data-hue-start) calc(var(--_thumb) / 2),
      var(--_data-hue-start) calc(100% - var(--_thumb) / 2));
    box-shadow: inset 0 0 0 var(--kit-border-width-hairline) var(--kit-color-border);
    forced-color-adjust: none;
  }
  :where(.kit-color-slider)[data-channel="alpha"]::-webkit-slider-runnable-track {
    background-image:
      linear-gradient(var(--_to),
        transparent calc(var(--_thumb) / 2),
        var(--_opaque, transparent) calc(100% - var(--_thumb) / 2)),
      repeating-conic-gradient(var(--kit-color-surface-sunken) 0% 25%, var(--kit-color-surface) 0% 50%);
    background-size: auto, var(--kit-space-150) var(--kit-space-150);
  }
  :where(.kit-color-slider)[data-channel="alpha"]::-moz-range-track {
    background-image:
      linear-gradient(var(--_to),
        transparent calc(var(--_thumb) / 2),
        var(--_opaque, transparent) calc(100% - var(--_thumb) / 2)),
      repeating-conic-gradient(var(--kit-color-surface-sunken) 0% 25%, var(--kit-color-surface) 0% 50%);
    background-size: auto, var(--kit-space-150) var(--kit-space-150);
  }
  :where(.kit-color-slider)[data-channel="alpha"]::-webkit-slider-thumb {
    background-image:
      linear-gradient(var(--_color, transparent), var(--_color, transparent)),
      repeating-conic-gradient(var(--kit-color-surface-sunken) 0% 25%, var(--kit-color-surface) 0% 50%);
    background-size: auto, var(--kit-space-150) var(--kit-space-150);
  }
  :where(.kit-color-slider)[data-channel="alpha"]::-moz-range-thumb {
    background-image:
      linear-gradient(var(--_color, transparent), var(--_color, transparent)),
      repeating-conic-gradient(var(--kit-color-surface-sunken) 0% 25%, var(--kit-color-surface) 0% 50%);
    background-size: auto, var(--kit-space-150) var(--kit-space-150);
  }
  :where(.kit-color-slider)::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    inline-size: var(--_thumb);
    block-size: var(--_thumb);
    margin-block-start: calc((var(--_track) - var(--_thumb)) / 2);
    border: var(--kit-border-width-emphasis) solid var(--_data-ring);
    border-radius: var(--kit-radius-full);
    background: var(--_data-current);
    box-shadow: 0 0 0 var(--kit-border-width-hairline) var(--_data-edge);
    forced-color-adjust: none;
  }
  :where(.kit-color-slider)::-moz-range-thumb {
    inline-size: var(--_thumb);
    block-size: var(--_thumb);
    border: var(--kit-border-width-emphasis) solid var(--_data-ring);
    border-radius: var(--kit-radius-full);
    background: var(--_data-current);
    box-shadow: 0 0 0 var(--kit-border-width-hairline) var(--_data-edge);
    forced-color-adjust: none;
  }
  :where(.kit-color-presets) {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--kit-space-600));
    gap: var(--kit-space-200);
    justify-content: start;
    max-block-size: 8rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  :where(.kit-color-presets) > :where([role="option"]) { cursor: pointer; }
  :where(.kit-color-actions) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kit-space-200);
    align-items: center;
  }
  @media (forced-colors: active) {
    :where(.kit-color-swatches) :where(input[type="radio"]):checked,
    :where(.kit-color-presets) > :where([role="option"])[aria-selected="true"] {
      box-shadow: inset 0 0 0 var(--kit-border-width-emphasis) Highlight;
    }
    :where(.kit-color-area) { box-shadow: inset 0 0 0 var(--kit-border-width-hairline) CanvasText; }
    :where(.kit-color-trigger)[aria-expanded="true"] { background: Highlight; }
  }
}
@layer kit.components {
  :where(.kit-menu) {
    padding: var(--kit-space-100);
    min-inline-size: 11rem;
  }
  :where(.kit-menu) :where(ul, ol) {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
  }
  :where(.kit-menu-item) {
    display: flex;
    align-items: center;
    gap: var(--kit-space-inline);
    inline-size: 100%;
    min-block-size: var(--kit-space-800);
    padding-inline: var(--kit-space-300);
    border: 0;
    background: none;
    border-radius: var(--kit-radius-100);
    font: inherit;
    font-size: var(--kit-font-size-400);
    line-height: var(--kit-line-height-400);
    color: var(--kit-color-content);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  @media (hover: hover) {
    :where(.kit-menu-item):hover { background: var(--kit-color-surface-hover); }
  }
  :where(.kit-menu-item):focus-visible { background: var(--kit-color-surface-hover); }
  :where(.kit-menu-item)[data-variant="danger"] { color: var(--kit-color-danger-content); }
  :where(.kit-menu-item):disabled,
  :where(.kit-menu-item)[aria-disabled="true"] {
    color: var(--kit-color-content-disabled);
    cursor: not-allowed;
    background: none;
  }
  :where(.kit-menu-item)[role="menuitemcheckbox"],
  :where(.kit-menu-item)[aria-checked] {
    padding-inline-start: var(--kit-space-200);
  }
  :where(.kit-menu-item)[aria-checked]::before {
    content: "";
    inline-size: var(--kit-control-mark-size);
    block-size: var(--kit-control-mark-size);
    flex: none;
    background: currentColor;
    clip-path: polygon(14% 47%, 4% 57%, 39% 90%, 96% 22%, 86% 13%, 38% 70%);
    opacity: 0;
  }
  :where(.kit-menu-item)[aria-checked="true"]::before { opacity: 1; }
  :where(.kit-menu-separator) {
    border: 0;
    block-size: var(--kit-border-width-hairline);
    background: var(--kit-color-border);
    margin-block: var(--kit-space-100);
  }
  :where(.kit-menu-section) {
    padding: var(--kit-space-150) var(--kit-space-300) var(--kit-space-100);
    margin: 0;
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-200);
    font-weight: var(--kit-font-weight-medium);
    color: var(--kit-color-content-muted);
    text-transform: uppercase;
    letter-spacing: var(--kit-letter-spacing-wide);
  }
  :where(.kit-menu)[data-scroll] {
    max-block-size: 60vh;
  }
  @media (forced-colors: active) {
    :where(.kit-menu-item):is(:hover, :focus-visible) {
      background: Highlight;
      color: HighlightText;
      forced-color-adjust: none;
    }
    :where(.kit-menu-separator) { background: CanvasText; }
  }
  :where(.kit-context-anchor) {
    position: fixed;
    inline-size: 0;
    block-size: 0;
    anchor-name: --kit-popover;
    pointer-events: none;
  }
  :where(.kit-menu)[data-kit-context] {
    position: fixed;
    margin-block-start: 0;
    position-area: block-end span-inline-end;
    position-try-order: normal;
  }
  :where(.kit-menu)[role="menu"] :where(.kit-menu-item):focus {
    background: var(--kit-color-surface-hover);
  }
}
@layer kit.components {
  :where(.kit-tooltip) {
    pointer-events: none;
    max-inline-size: 16rem;
    padding: var(--kit-space-150) var(--kit-space-300);
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
    background: var(--kit-color-content);
    color: var(--kit-color-surface-raised);
    border-color: transparent;
    box-shadow: var(--kit-elevation-2);
  }
  :where(.kit-tooltip):popover-open {
    transition-delay:
      var(--kit-delay-hint),
      var(--kit-delay-hint),
      0s,
      0s;
  }
  @media (forced-colors: active) {
    :where(.kit-tooltip) {
      background: Canvas;
      color: CanvasText;
      border: var(--kit-border-width-hairline) solid CanvasText;
    }
  }
}
@layer kit.components {
  :where(.kit-badge) {
    display: inline-flex;
    align-items: center;
    gap: var(--kit-space-100);
    min-block-size: var(--kit-space-500);
    padding-inline: var(--kit-space-200);
    border-radius: var(--kit-radius-full);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border-strong);
    background: var(--kit-color-surface-sunken);
    color: var(--kit-color-content-muted);
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-200);
    font-weight: var(--kit-font-weight-medium);
    white-space: nowrap;
    --_hue: currentColor;
  }
  :where(.kit-badge)[data-status="info"] {
    background: var(--kit-color-info-surface);
    border-color: var(--kit-color-info-border);
    color: var(--kit-color-info-content);
  }
  :where(.kit-badge)[data-status="success"] {
    background: var(--kit-color-success-surface);
    border-color: var(--kit-color-success-border);
    color: var(--kit-color-success-content);
  }
  :where(.kit-badge)[data-status="warning"] {
    background: var(--kit-color-warning-surface);
    border-color: var(--kit-color-warning-border);
    color: var(--kit-color-warning-content);
  }
  :where(.kit-badge)[data-status="danger"] {
    background: var(--kit-color-danger-surface);
    border-color: var(--kit-color-danger-border);
    color: var(--kit-color-danger-content);
  }
  :where(.kit-badge)[data-status="accent"] {
    background: var(--kit-color-accent-tint);
    border-color: var(--kit-color-border-strong);
    color: var(--kit-color-content);
  }
  :where(.kit-badge)[data-category] {
    --_hue: var(--kit-badge-color, var(--kit-color-accent));
    background: color-mix(in oklab, var(--_hue) 14%, var(--kit-color-surface-raised));
    border-color: color-mix(in oklab, var(--_hue) 38%, var(--kit-color-border));
    color: var(--kit-color-content);
  }
  :where(.kit-badge)[data-shape="square"] { border-radius: var(--kit-radius-mark); }
  :where(.kit-badge-dot) {
    inline-size: var(--kit-space-150);
    block-size: var(--kit-space-150);
    border-radius: var(--kit-radius-full);
    background: var(--_hue);
    flex: none;
  }
  :where(.kit-badge-dot)[data-pulse] {
    box-shadow: 0 0 0 2px var(--kit-color-surface-raised), 0 0 6px var(--_hue);
    animation: kit-badge-pulse var(--kit-period-pulse) var(--kit-easing-standard) infinite;
    animation-play-state: var(--kit-animation-play-state);
  }
  @keyframes kit-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--kit-color-surface-raised), 0 0 3px var(--_hue); }
    50%      { box-shadow: 0 0 0 2px var(--kit-color-surface-raised), 0 0 9px var(--_hue); }
  }
  :where(.kit-badge-dismiss) {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--kit-space-400);
    block-size: var(--kit-space-400);
    margin-inline-end: calc(-1 * var(--kit-space-100));
    padding: 0;
    border: 0;
    background: none;
    border-radius: var(--kit-radius-full);
    color: inherit;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--kit-duration-1) var(--kit-easing-standard);
  }
  @media (hover: hover) {
    :where(.kit-badge-dismiss):hover { opacity: 1; }
  }
  :where(.kit-count) {
    display: inline-grid;
    place-items: center;
    min-inline-size: var(--kit-space-500);
    block-size: var(--kit-space-500);
    padding-inline: var(--kit-space-100);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-accent);
    color: var(--kit-color-on-accent);
    font-size: var(--kit-font-size-100);
    font-weight: var(--kit-font-weight-bold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  :where(.kit-count)[data-variant="quiet"] {
    background: var(--kit-color-surface-raised);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border-strong);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-count)[data-attached] {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    translate: 35% -35%;
  }
  :where(.kit-stamp) {
    position: absolute;
    inset-block-start: var(--kit-space-300);
    inset-inline-end: var(--kit-space-300);
    rotate: -8deg;
    padding: var(--kit-space-050) var(--kit-space-200);
    border: var(--kit-border-width-emphasis) solid currentColor;
    border-radius: var(--kit-radius-mark);
    color: var(--kit-color-content-muted);
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
    font-weight: var(--kit-font-weight-bold);
    letter-spacing: var(--kit-letter-spacing-wide);
    text-transform: uppercase;
    opacity: 0.85;
    pointer-events: none;
  }
  :where(.kit-stamp)[data-status="success"] { color: var(--kit-color-success-content); }
  :where(.kit-stamp)[data-status="warning"] { color: var(--kit-color-warning-content); }
  :where(.kit-stamp)[data-status="danger"]  { color: var(--kit-color-danger-content); }
  :where(.kit-stamp)[data-status="info"]    { color: var(--kit-color-info-content); }
  @media (forced-colors: active) {
    :where(.kit-badge) { border-color: CanvasText; }
    :where(.kit-count) { border: var(--kit-border-width-hairline) solid CanvasText; }
    :where(.kit-stamp) { opacity: 1; color: CanvasText; }
    :where(.kit-badge-dot) { box-shadow: none; }
  }
}
@layer kit.components {
  :where(.kit-alert) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--kit-space-300);
    align-items: start;
    padding: var(--kit-space-300) var(--kit-space-400);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-control);
    background: var(--kit-color-surface-sunken);
    color: var(--kit-color-content);
    font-size: var(--kit-font-size-400);
    line-height: var(--kit-line-height-400);
  }
  :where(.kit-alert)[data-status="info"] {
    background: var(--kit-color-info-surface);
    border-color: var(--kit-color-info-border);
    color: var(--kit-color-info-content);
  }
  :where(.kit-alert)[data-status="success"] {
    background: var(--kit-color-success-surface);
    border-color: var(--kit-color-success-border);
    color: var(--kit-color-success-content);
  }
  :where(.kit-alert)[data-status="warning"] {
    background: var(--kit-color-warning-surface);
    border-color: var(--kit-color-warning-border);
    color: var(--kit-color-warning-content);
  }
  :where(.kit-alert)[data-status="danger"] {
    background: var(--kit-color-danger-surface);
    border-color: var(--kit-color-danger-border);
    color: var(--kit-color-danger-content);
  }
  :where(.kit-alert) > :where(.kit-icon) {
    color: inherit;
    margin-block-start: calc((1lh - var(--kit-icon-size-md)) / 2);
  }
  :where(.kit-alert-text) {
    display: grid;
    gap: var(--kit-space-100);
    min-inline-size: 0;
  }
  :where(.kit-alert-title) {
    margin: 0;
    font-size: var(--kit-font-size-400);
    line-height: var(--kit-line-height-400);
    font-weight: var(--kit-font-weight-medium);
  }
  :where(.kit-alert-body) { margin: 0; }
  :where(.kit-alert-actions) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kit-space-inline);
    margin-block-start: var(--kit-space-100);
  }
  :where(.kit-alert-close) {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--kit-space-600);
    block-size: var(--kit-space-600);
    padding: 0;
    border: 0;
    background: none;
    border-radius: var(--kit-radius-control);
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--kit-duration-1) var(--kit-easing-standard),
                background-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  @media (hover: hover) {
    :where(.kit-alert-close):hover {
      opacity: 1;
      background: color-mix(in oklab, currentColor 10%, transparent);
    }
  }
  :where(.kit-alert-stack) {
    display: grid;
    gap: var(--kit-space-200);
  }
  @media (forced-colors: active) {
    :where(.kit-alert) {
      border-color: CanvasText;
    }
  }
}
@layer kit.components {
  :where(.kit-toast-host) {
    position: fixed;
    inset: auto;
    margin: 0;
    inset-block-end: var(--kit-space-400);
    inset-inline: 0;
    margin-inline: auto;
    inline-size: 24rem;
    max-inline-size: calc(100vw - 2 * var(--kit-space-400));
    display: flex;
    flex-direction: column;
    gap: var(--kit-space-200);
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
    pointer-events: none;
  }
  :where(.kit-toast) {
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--kit-space-300);
    align-items: start;
    padding: var(--kit-space-300) var(--kit-space-400);
    background: var(--kit-color-surface-raised);
    color: var(--kit-color-content);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-surface);
    box-shadow: var(--kit-elevation-3);
    font-size: var(--kit-font-size-400);
    line-height: var(--kit-line-height-400);
  }
  :where(.kit-toast-icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: var(--kit-space-500);
    block-size: var(--kit-space-500);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-surface-sunken);
    color: var(--kit-color-content-muted);
    margin-block-start: calc((1lh - var(--kit-space-500)) / 2);
  }
  :where(.kit-toast)[data-status="info"] > :where(.kit-toast-icon) {
    background: var(--kit-color-info-surface);
    color: var(--kit-color-info-content);
  }
  :where(.kit-toast)[data-status="success"] > :where(.kit-toast-icon) {
    background: var(--kit-color-success-surface);
    color: var(--kit-color-success-content);
  }
  :where(.kit-toast)[data-status="warning"] > :where(.kit-toast-icon) {
    background: var(--kit-color-warning-surface);
    color: var(--kit-color-warning-content);
  }
  :where(.kit-toast)[data-status="danger"] > :where(.kit-toast-icon) {
    background: var(--kit-color-danger-surface);
    color: var(--kit-color-danger-content);
  }
  :where(.kit-toast-text) {
    display: grid;
    gap: var(--kit-space-100);
    min-inline-size: 0;
  }
  :where(.kit-toast-title) {
    margin: 0;
    font-weight: var(--kit-font-weight-medium);
  }
  :where(.kit-toast-body) {
    margin: 0;
    color: var(--kit-color-content-muted);
  }
  :where(.kit-toast-actions) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kit-space-inline);
    margin-block-start: var(--kit-space-100);
  }
  :where(.kit-toast-close) {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--kit-space-600);
    block-size: var(--kit-space-600);
    padding: 0;
    border: 0;
    background: none;
    border-radius: var(--kit-radius-control);
    color: var(--kit-color-content-muted);
    cursor: pointer;
    transition: color var(--kit-duration-1) var(--kit-easing-standard),
                background-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  @media (hover: hover) {
    :where(.kit-toast-close):hover {
      color: var(--kit-color-content);
      background: var(--kit-color-surface-hover);
    }
  }
  :where(.kit-toast-timer) {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    block-size: var(--kit-border-width-emphasis);
    inline-size: 100%;
    background: var(--kit-color-border-strong);
    animation: kit-toast-countdown var(--kit-dwell-toast) var(--kit-easing-linear) forwards;
    animation-play-state: var(--kit-animation-play-state);
    transform-origin: left center;
  }
  :where(.kit-toast):is(:hover, :focus-within) > :where(.kit-toast-timer) {
    animation-play-state: paused;
  }
  @keyframes kit-toast-countdown {
    to { scale: 0 1; }
  }
  :where(.kit-toast):has(.kit-toast-actions) > :where(.kit-toast-timer) { display: none; }
  :where(.kit-toast) {
    transition: opacity var(--kit-duration-2) var(--kit-easing-standard),
                translate var(--kit-duration-2) var(--kit-easing-standard);
  }
  @starting-style {
    :where(.kit-toast) { opacity: 0; translate: 0 var(--kit-space-300); }
  }
  :where(.kit-toast)[data-leaving] {
    opacity: 0;
    translate: 0 var(--kit-space-200);
  }
  @media (forced-colors: active) {
    :where(.kit-toast) { border-color: CanvasText; }
    :where(.kit-toast-timer) { background: CanvasText; }
  }
}
@layer kit.components {
  :where(.kit-empty) {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: var(--kit-space-300);
    padding: var(--kit-space-800) var(--kit-space-400);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-empty-icon) {
    display: grid;
    place-items: center;
    inline-size: var(--kit-space-1000);
    block-size: var(--kit-space-1000);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-surface-sunken);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-empty-title) {
    margin: 0;
    font-size: var(--kit-font-size-500);
    line-height: var(--kit-line-height-500);
    font-weight: var(--kit-font-weight-medium);
    color: var(--kit-color-content);
  }
  :where(.kit-empty-body) {
    margin: 0;
    max-inline-size: 42ch;
  }
  :where(.kit-empty-actions) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--kit-space-inline);
    margin-block-start: var(--kit-space-100);
  }
  :where(.kit-empty)[data-kind="none"] {
    padding-block: var(--kit-space-600);
  }
  :where(.kit-empty)[data-size="compact"] {
    padding: var(--kit-space-500) var(--kit-space-300);
    gap: var(--kit-space-200);
  }
  :where(.kit-empty)[data-size="compact"] > :where(.kit-empty-icon) {
    inline-size: var(--kit-space-800);
    block-size: var(--kit-space-800);
  }
  :where(.kit-empty)[data-size="compact"] > :where(.kit-empty-title) {
    font-size: var(--kit-font-size-400);
    line-height: var(--kit-line-height-400);
  }
  @media (forced-colors: active) {
    :where(.kit-empty-icon) {
      border: var(--kit-border-width-hairline) solid CanvasText;
    }
  }
}
@layer kit.components {
  :where(.kit-skeleton) {
    display: block;
    border-radius: var(--kit-radius-mark);
    background:
      linear-gradient(100deg,
        var(--kit-color-surface-sunken) 30%,
        color-mix(in oklab, var(--kit-color-content) 12%, var(--kit-color-surface-sunken)) 50%,
        var(--kit-color-surface-sunken) 70%);
    background-size: 220% 100%;
    animation: kit-skeleton var(--kit-period-skeleton) var(--kit-easing-linear) infinite;
    animation-play-state: var(--kit-animation-play-state);
  }
  @keyframes kit-skeleton {
    from { background-position: 180% 0; }
    to   { background-position: -80% 0; }
  }
  :where(.kit-skeleton-text) {
    block-size: 0.8em;
    margin-block: 0.25em;
  }
  :where(.kit-skeleton-circle) {
    border-radius: var(--kit-radius-full);
  }
  @media (forced-colors: active) {
    :where(.kit-skeleton) {
      background: Canvas;
      border: var(--kit-border-width-hairline) solid GrayText;
    }
  }
}
@layer kit.components {
  :where(.kit-tabs) {
    display: flex;
    align-items: stretch;
    gap: var(--kit-space-100);
    border-block-end: var(--kit-border-width-hairline) solid var(--kit-color-border);
    padding-block: calc(var(--kit-focus-width) + var(--kit-focus-halo-width) + var(--kit-border-width-hairline));
    scroll-padding-inline: var(--kit-space-600);
  }
  @property --kit-tabs-fade-start { syntax: "<number>"; inherits: false; initial-value: 0; }
  @property --kit-tabs-fade-end   { syntax: "<number>"; inherits: false; initial-value: 0; }
  @keyframes kit-tabs-fade-start { from { --kit-tabs-fade-start: 0; } to { --kit-tabs-fade-start: 1; } }
  @keyframes kit-tabs-fade-end   { from { --kit-tabs-fade-end: 1; }   to { --kit-tabs-fade-end: 0; } }
  :where(.kit-tabs) {
    --kit-tabs-fade-width: var(--kit-space-600);
    --kit-tabs-fade-direction: to right;
    mask-image: linear-gradient(var(--kit-tabs-fade-direction),
      transparent 0,
      black calc(var(--kit-tabs-fade-start) * var(--kit-tabs-fade-width)),
      black calc(100% - var(--kit-tabs-fade-end) * var(--kit-tabs-fade-width)),
      transparent 100%);
    animation: kit-tabs-fade-start linear both, kit-tabs-fade-end linear both;
    animation-timeline: scroll(self inline), scroll(self inline);
    animation-range: 0 var(--kit-tabs-fade-width),
                     calc(100% - var(--kit-tabs-fade-width)) 100%;
  }
  :where(.kit-tabs):dir(rtl) { --kit-tabs-fade-direction: to left; }
  :where(.kit-tabs) > :where(.kit-tab) {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--kit-space-150);
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--kit-control-font-size-md);
    font-weight: var(--kit-font-weight-medium);
    color: var(--kit-color-content-muted);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    padding: var(--kit-space-200) var(--kit-space-300);
    border-radius: var(--kit-radius-control) var(--kit-radius-control) 0 0;
    border-block-end: var(--kit-border-width-emphasis) solid transparent;
    margin-block-end: calc(-1 * var(--kit-border-width-hairline));
    transition: color var(--kit-duration-1) var(--kit-easing-standard),
                background-color var(--kit-duration-1) var(--kit-easing-standard),
                border-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-tabs) > :where(.kit-tab):hover {
    color: var(--kit-color-content);
    background-color: var(--kit-color-surface-hover);
  }
  :where(.kit-tabs) > :where(.kit-tab)[aria-selected="true"],
  :where(.kit-tabs) > :where(.kit-tab)[aria-current]:not([aria-current="false"]) {
    color: var(--kit-color-content);
    border-block-end-color: var(--kit-color-accent);
  }
  :where(.kit-tabs) > :where(.kit-tab):disabled,
  :where(.kit-tabs) > :where(.kit-tab)[aria-disabled="true"] {
    color: var(--kit-color-content-disabled);
    cursor: not-allowed;
    background: none;
  }
  :where(.kit-tabs) > :where(.kit-tab) > :where(.kit-badge, .kit-count) {
    margin-inline-start: var(--kit-space-050);
  }
  :where(.kit-tabpanel) {
    padding-block-start: var(--kit-space-400);
  }
  [data-density="compact"] :where(.kit-tabs) > :where(.kit-tab) {
    padding: var(--kit-space-150) var(--kit-space-200);
    font-size: var(--kit-control-font-size-sm);
  }
  @media (forced-colors: active) {
    :where(.kit-tabs) { mask-image: none; }
    :where(.kit-tabs) > :where(.kit-tab)[aria-selected="true"],
    :where(.kit-tabs) > :where(.kit-tab)[aria-current]:not([aria-current="false"]) {
      border-block-end-color: Highlight;
      color: Highlight;
    }
  }
}
@layer kit.components {
  :where(.kit-segmented) {
    display: inline-flex;
    gap: var(--kit-space-050);
    padding: var(--kit-space-050);
    background: var(--kit-color-surface-sunken);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-control);
  }
  :where(.kit-segmented) > :where(label) {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kit-space-150);
    min-block-size: var(--kit-control-height-sm);
    padding-inline: var(--kit-space-300);
    border-radius: calc(var(--kit-radius-control) - var(--kit-space-050));
    font-size: var(--kit-control-font-size-sm);
    font-weight: var(--kit-font-weight-medium);
    color: var(--kit-color-content-muted);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--kit-duration-1) var(--kit-easing-standard),
                color var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-segmented) :where(input[type="radio"]) {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  :where(.kit-segmented) > :where(label):hover {
    color: var(--kit-color-content);
  }
  :where(.kit-segmented) > :where(label):has(:checked) {
    background: var(--kit-color-surface-raised);
    color: var(--kit-color-content);
    box-shadow: var(--kit-elevation-1);
  }
  :where(.kit-segmented) > :where(label):has(:focus-visible) {
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: var(--kit-focus-offset);
  }
  :where(.kit-segmented) > :where(label):has(:disabled) {
    color: var(--kit-color-content-disabled);
    cursor: not-allowed;
  }
  :where(.kit-segmented) > :where(label):has(:disabled):hover {
    color: var(--kit-color-content-disabled);
  }
  :where(.kit-segmented)[data-fill="true"] {
    display: flex;
  }
  :where(.kit-segmented)[data-fill="true"] > :where(label) {
    flex: 1;
  }
  [data-density="compact"] :where(.kit-segmented) > :where(label) {
    padding-inline: var(--kit-space-200);
  }
  :where(.kit-segmented) > :where(label):has(:checked):has(:focus-visible) {
    box-shadow: var(--kit-elevation-1), var(--kit-focus-halo);
  }
  @media (forced-colors: active) {
    :where(.kit-segmented) > :where(label):has(:checked) {
      border: var(--kit-border-width-hairline) solid Highlight;
      color: Highlight;
    }
  }
}
@layer kit.components {
  :where(.kit-pagination) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--kit-space-300) var(--kit-space-400);
    justify-content: space-between;
    margin-block-start: var(--kit-space-500);
  }
  :where(.kit-pagination-steps) {
    display: flex;
    align-items: center;
    gap: var(--kit-space-100);
    flex-wrap: wrap;
  }
  :where(.kit-pagination-pages) {
    display: flex;
    align-items: center;
    gap: var(--kit-space-050);
  }
  :where(.kit-pagination-pages) > :where(.kit-button) {
    min-inline-size: var(--kit-control-height-sm);
    padding-inline: var(--kit-space-200);
    font-variant-numeric: tabular-nums;
  }
  :where(.kit-pagination-pages) > :where(.kit-button)[aria-current="page"] {
    background: var(--kit-color-accent-tint);
    border-color: var(--kit-color-accent);
    color: var(--kit-color-content);
  }
  :where(.kit-pagination-jump) {
    display: flex;
    align-items: center;
    gap: var(--kit-space-200);
    margin: 0;
    font-size: var(--kit-font-size-300);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-pagination-jump) :where(input) {
    inline-size: 4.5rem;
    text-align: center;
  }
  :where(.kit-pagination-size) :where(.kit-select) {
    inline-size: 9ch;
  }
  :where(.kit-pagination-size) {
    display: flex;
    align-items: center;
    gap: var(--kit-space-200);
    margin: 0;
    font-size: var(--kit-font-size-300);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-pagination-status) {
    margin: 0;
    font-size: var(--kit-font-size-300);
    color: var(--kit-color-content-muted);
    font-variant-numeric: tabular-nums;
  }
  :where(.kit-pagination-note) {
    margin: 0;
    padding-inline-start: var(--kit-space-300);
    border-inline-start: var(--kit-border-width-emphasis) solid var(--kit-color-border);
    font-size: var(--kit-font-size-300);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-pagination)[data-mode="more"] {
    flex-direction: column;
    align-items: center;
    gap: var(--kit-space-200);
  }
  @media (forced-colors: active) {
    :where(.kit-pagination-pages) > :where(.kit-button)[aria-current="page"] {
      border-color: Highlight;
      color: Highlight;
    }
    :where(.kit-pagination-note) {
      border-inline-start-color: CanvasText;
    }
  }
  :where(.kit-pagination) :where([aria-disabled="true"]) {
    opacity: 0.45;
    pointer-events: none;
  }
  [data-density="compact"] :where(.kit-pagination) {
    gap: var(--kit-space-200) var(--kit-space-300);
    margin-block-start: var(--kit-space-400);
  }
}
@layer kit.components {
  :where(.kit-breadcrumb) {
    margin-block-end: var(--kit-space-300);
  }
  :where(.kit-breadcrumb) > :where(ol) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kit-space-050) var(--kit-space-200);
    margin: 0;
    font-size: var(--kit-font-size-300);
  }
  :where(.kit-breadcrumb) :where(li) {
    display: flex;
    align-items: center;
    gap: var(--kit-space-200);
    min-inline-size: 0;
  }
  :where(.kit-breadcrumb) {
    --kit-breadcrumb-separator: "/";
  }
  :where(.kit-breadcrumb) :where(li):not(:first-child)::before {
    content: var(--kit-breadcrumb-separator);
    color: var(--kit-color-content-muted);
    opacity: 0.6;
  }
  :where(.kit-breadcrumb) :where(a) {
    color: var(--kit-color-content-muted);
    text-decoration: none;
    border-radius: var(--kit-radius-mark);
  }
  :where(.kit-breadcrumb) :where(a):hover {
    color: var(--kit-color-content);
    text-decoration: underline;
  }
  :where(.kit-breadcrumb) :where(a):focus-visible {
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: var(--kit-focus-offset);
  }
  :where(.kit-breadcrumb) :where([aria-current="page"]) {
    color: var(--kit-color-content);
    font-weight: var(--kit-font-weight-medium);
  }
  :where(.kit-breadcrumb) :where([data-truncate]) {
    max-inline-size: var(--kit-breadcrumb-crumb-max, 20ch);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @media (forced-colors: active) {
    :where(.kit-breadcrumb) :where(li):not(:first-child)::before {
      color: CanvasText;
      opacity: 1;
    }
    :where(.kit-breadcrumb) :where([aria-current="page"]) {
      color: Highlight;
    }
  }
}
@layer kit.components {
  :where(.kit-toolbar) {
    display: grid;
    gap: var(--kit-space-300);
    margin-block-end: var(--kit-space-400);
    container-type: inline-size;
    container-name: kit-toolbar;
  }
  :where(.kit-toolbar-actions),
  :where(.kit-toolbar-filters) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--kit-space-200);
    margin: 0;
  }
  :where(.kit-toolbar-spacer) { flex: 1 1 auto; }
  :where(.kit-toolbar-search) {
    display: flex;
    align-items: center;
    gap: var(--kit-space-200);
    flex-wrap: wrap;
    margin: 0;
    flex: 1 1 16rem;
    min-inline-size: 0;
    max-inline-size: 28rem;
  }
  :where(.kit-toolbar-search) > :where(input) { flex: 1 1 auto; min-inline-size: 0; }
  :where(.kit-toolbar-search) > :where(.kit-input-group) { flex: 1 1 10rem; min-inline-size: 0; }
  :where(.kit-toolbar-count) {
    font-size: var(--kit-font-size-300);
    color: var(--kit-color-content-muted);
    white-space: nowrap;
  }
  :where(.kit-toolbar-filter-set) {
    align-items: center;
    flex-wrap: wrap;
    gap: var(--kit-space-200);
  }
  :where(.kit-toolbar-filter-set):popover-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    inline-size: min(22rem, calc(100cqi - var(--kit-space-600)));
    padding: var(--kit-space-400);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-surface);
    background: var(--kit-color-surface-raised);
    box-shadow: var(--kit-elevation-3);
  }
  @container kit-toolbar (min-width: 40rem) {
    :where(.kit-toolbar-filter-set) {
      display: var(--_row-display, flex);
      position: static;
      inset: auto;
      margin: 0;
      inline-size: auto;
      block-size: auto;
      max-inline-size: none;
      max-block-size: none;
      flex-direction: row;
      align-items: center;
      padding: 0;
      border: 0;
      background: none;
      box-shadow: none;
      overflow: visible;
    }
    :where(.kit-toolbar-filter-trigger) { display: none; }
  }
  [data-density="compact"] :where(.kit-toolbar) {
    gap: var(--kit-space-200);
    margin-block-end: var(--kit-space-300);
  }
  @media (forced-colors: active) {
    :where(.kit-toolbar-filter-set):popover-open {
      border-color: CanvasText;
    }
  }
}
@layer kit.components {
  :where(.kit-filter-range) {
    display: inline-flex;
    align-items: center;
    gap: var(--kit-space-200);
    flex-wrap: wrap;
  }
  :where(.kit-filter-range) :where(input) {
    min-inline-size: 9rem;
  }
  :where(.kit-filter-range-presets) {
    display: inline-flex;
    align-items: center;
    gap: var(--kit-space-050);
  }
  :where(.kit-filter-active) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--kit-space-150);
    font-size: var(--kit-font-size-300);
  }
  :where(.kit-filter-active-label) {
    color: var(--kit-color-content-muted);
    white-space: nowrap;
  }
  :where(.kit-filter-chip) {
    display: inline-flex;
    align-items: center;
    gap: var(--kit-space-150);
    padding: var(--kit-space-050) var(--kit-space-200);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-accent-tint);
    color: var(--kit-color-content);
    text-decoration: none;
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-none);
    min-block-size: var(--kit-space-600);
    transition: background-color var(--kit-duration-1) var(--kit-easing-standard),
                border-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-filter-chip) > :where(.kit-filter-chip-key) {
    color: var(--kit-color-content-muted);
  }
  :where(.kit-filter-chip):hover {
    background: var(--kit-color-danger-surface);
    border-color: var(--kit-color-danger-border);
  }
  :where(.kit-filter-chip) > :where(.kit-icon) {
    inline-size: var(--kit-icon-size-sm);
    block-size: var(--kit-icon-size-sm);
    opacity: 0.6;
  }
  :where(.kit-filter-chip):hover > :where(.kit-icon) { opacity: 1; }
  :where(.kit-filter-clear) {
    margin-inline-start: var(--kit-space-100);
  }
  @media (forced-colors: active) {
    :where(.kit-filter-chip) {
      border-color: CanvasText;
    }
    :where(.kit-filter-chip):hover {
      border-color: Highlight;
      color: Highlight;
    }
  }
}
@layer kit.components {
  :where(.kit-view-switch) {
    display: inline-flex;
    align-items: center;
    gap: var(--kit-space-200);
    margin: 0;
    font-size: var(--kit-font-size-300);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-view-switch) :where(select) { inline-size: 14rem; }
  :where(.kit-view-save) {
    display: flex;
    align-items: center;
    gap: var(--kit-space-200);
    margin: 0;
  }
  :where(.kit-view-list) {
    display: grid;
    gap: var(--kit-space-050);
    margin: 0;
    padding: 0;
    list-style: none;
    min-inline-size: 18rem;
  }
  :where(.kit-view-list) > :where(li) {
    display: flex;
    align-items: center;
    gap: var(--kit-space-200);
    padding: var(--kit-space-150) var(--kit-space-200);
    border-radius: var(--kit-radius-control);
  }
  :where(.kit-view-list) > :where(li):hover { background: var(--kit-color-surface-hover); }
  :where(.kit-view-name) {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    color: var(--kit-color-content);
  }
  :where(.kit-view-list) :where([aria-current="true"]) > :where(.kit-view-name) {
    font-weight: var(--kit-font-weight-medium);
  }
  :where(.kit-columns) {
    display: grid;
    gap: var(--kit-space-050);
    margin: 0;
    min-inline-size: 14rem;
    max-block-size: 18rem;
    overflow-y: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
  }
  :where(.kit-columns-actions) {
    display: flex;
    align-items: center;
    gap: var(--kit-space-200);
    margin-block-start: var(--kit-space-200);
    padding-block-start: var(--kit-space-200);
    border-block-start: var(--kit-border-width-hairline) solid var(--kit-color-border);
  }
  :where(.kit-columns-actions) > :where(.kit-view-spacer) { flex: 1 1 auto; }
}
@layer kit.components {
  :where(.kit-chart) :where([data-series="1"]) { --_chart-color: var(--kit-color-chart-1); --_chart-pattern: var(--kit-chart-pattern-1); --_chart-dash: var(--kit-chart-dash-1); --_chart-texture: none; }
  :where(.kit-chart) :where([data-series="2"]) { --_chart-color: var(--kit-color-chart-2); --_chart-pattern: var(--kit-chart-pattern-2); --_chart-dash: var(--kit-chart-dash-2); --_chart-texture: url("#kit-chart-pattern-2"); }
  :where(.kit-chart) :where([data-series="3"]) { --_chart-color: var(--kit-color-chart-3); --_chart-pattern: var(--kit-chart-pattern-3); --_chart-dash: var(--kit-chart-dash-3); --_chart-texture: url("#kit-chart-pattern-3"); }
  :where(.kit-chart) :where([data-series="4"]) { --_chart-color: var(--kit-color-chart-4); --_chart-pattern: var(--kit-chart-pattern-4); --_chart-dash: var(--kit-chart-dash-4); --_chart-texture: url("#kit-chart-pattern-4"); }
  :where(.kit-chart) :where([data-series="5"]) { --_chart-color: var(--kit-color-chart-5); --_chart-pattern: var(--kit-chart-pattern-5); --_chart-dash: var(--kit-chart-dash-5); --_chart-texture: url("#kit-chart-pattern-5"); }
  :where(.kit-chart) :where([data-series="6"]) { --_chart-color: var(--kit-color-chart-6); --_chart-pattern: var(--kit-chart-pattern-6); --_chart-dash: var(--kit-chart-dash-6); --_chart-texture: url("#kit-chart-pattern-6"); }
  :where(.kit-chart) :where([data-series="other"]) {
    --_chart-color: var(--kit-color-chart-other);
    --_chart-pattern: var(--kit-chart-pattern-other);
    --_chart-always: var(--kit-chart-pattern-other);
    --_chart-dash: var(--kit-chart-dash-other);
    --_chart-texture: url("#kit-chart-pattern-other");
    --_chart-texture-always: url("#kit-chart-pattern-other");
  }
  :where(.kit-chart) :where([data-status="success"]) { --_chart-color: var(--kit-color-success-border); --_chart-pattern: none; --_chart-texture: none; }
  :where(.kit-chart) :where([data-status="info"])    { --_chart-color: var(--kit-color-info-border);    --_chart-pattern: none; --_chart-texture: none; }
  :where(.kit-chart) :where([data-status="warning"]) { --_chart-color: var(--kit-color-warning-border); --_chart-pattern: var(--kit-chart-pattern-3); --_chart-texture: url("#kit-chart-pattern-3"); }
  :where(.kit-chart) :where([data-status="danger"])  { --_chart-color: var(--kit-color-danger-border);  --_chart-pattern: var(--kit-chart-pattern-2); --_chart-texture: url("#kit-chart-pattern-2"); }
  :where(.kit-chart) :where([data-level="1"]) { --_chart-color: var(--kit-color-chart-seq-1); --_chart-pattern: none; }
  :where(.kit-chart) :where([data-level="2"]) { --_chart-color: var(--kit-color-chart-seq-2); --_chart-pattern: none; }
  :where(.kit-chart) :where([data-level="3"]) { --_chart-color: var(--kit-color-chart-seq-3); --_chart-pattern: none; }
  :where(.kit-chart) :where([data-level="4"]) { --_chart-color: var(--kit-color-chart-seq-4); --_chart-pattern: none; }
  :where(.kit-chart) :where([data-level="5"]) { --_chart-color: var(--kit-color-chart-seq-5); --_chart-pattern: none; }
  :where(.kit-chart .kit-chart-mark) {
    background: var(--_chart-always, none), var(--_chart-color, transparent);
  }
  :where(.kit-chart svg .kit-chart-mark) {
    fill: var(--_chart-color, transparent);
  }
  :where(.kit-chart .kit-chart-line) {
    fill: none;
    stroke: var(--_chart-color, currentColor);
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  :where(.kit-chart svg .kit-chart-texture) {
    fill: var(--_chart-texture-always, none);
    pointer-events: none;
  }
  :where(.kit-chart[data-pattern]) :where(.kit-chart-mark) {
    background: var(--_chart-pattern, none), var(--_chart-color, transparent);
  }
  :where(.kit-chart[data-pattern]) :where(svg .kit-chart-texture) { fill: var(--_chart-texture, none); }
  :where(.kit-chart[data-pattern]) :where(.kit-chart-line) { stroke-dasharray: var(--_chart-dash, none); }
  @media print {
    :where(.kit-chart) :where(.kit-chart-mark) {
      background: var(--_chart-pattern, none), var(--_chart-color, transparent);
      print-color-adjust: exact;
    }
    :where(.kit-chart) :where(svg .kit-chart-texture) { fill: var(--_chart-texture, none); }
    :where(.kit-chart) :where(.kit-chart-line) { stroke-dasharray: var(--_chart-dash, none); }
  }
  @media (prefers-contrast: more) {
    :where(.kit-chart) :where(.kit-chart-mark) { background: var(--_chart-pattern, none), var(--_chart-color, transparent); }
    :where(.kit-chart) :where(svg .kit-chart-texture) { fill: var(--_chart-texture, none); }
    :where(.kit-chart) :where(.kit-chart-line) { stroke-dasharray: var(--_chart-dash, none); }
  }
  :where(.kit-chart-legend) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kit-space-100) var(--kit-space-400);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--kit-font-size-300);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-chart-legend) > :where(li) {
    display: inline-flex;
    align-items: center;
    gap: var(--kit-space-150);
  }
  :where(.kit-chart-legend) :where(.kit-chart-mark) {
    inline-size: 0.875rem;
    block-size: 0.875rem;
    border-radius: var(--kit-radius-mark);
    flex: none;
  }
  @media (forced-colors: active) {
    :where(.kit-chart) :where(.kit-chart-mark) { outline: 1px solid CanvasText; outline-offset: -1px; }
  }
}
@layer kit.components {
  :where(.kit-backdrop-host) {
    position: relative;
    isolation: isolate;
  }
  :where(.kit-backdrop-content) {
    position: relative;
    z-index: 1;
  }
  :where(.kit-backdrop) {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: clip;
    border-radius: inherit;
    contain: layout paint;
  }
  :where(.kit-backdrop[data-backdrop="starfield"]) {
    --kit-backdrop-strength: 1;
    --kit-backdrop-star-size: 3px;
    --kit-backdrop-tint: 60%;
    --kit-backdrop-star-pale: oklch(from var(--kit-color-content) l c h / calc(l * l * l * var(--kit-backdrop-strength)));
    --kit-backdrop-star-cyan: oklch(from color-mix(in oklab, var(--kit-color-chart-3) var(--kit-backdrop-tint), var(--kit-color-content)) l c h / calc(l * l * l * var(--kit-backdrop-strength)));
    --kit-backdrop-star-rose: oklch(from color-mix(in oklab, var(--kit-color-chart-4) var(--kit-backdrop-tint), var(--kit-color-content)) l c h / calc(l * l * l * var(--kit-backdrop-strength)));
    --kit-backdrop-star-warm: oklch(from color-mix(in oklab, var(--kit-color-chart-2) var(--kit-backdrop-tint), var(--kit-color-content)) l c h / calc(l * l * l * var(--kit-backdrop-strength)));
    --kit-backdrop-star-cool: oklch(from color-mix(in oklab, var(--kit-color-chart-1) var(--kit-backdrop-tint), var(--kit-color-content)) l c h / calc(l * l * l * var(--kit-backdrop-strength)));
    --kit-backdrop-dot-pale: radial-gradient(circle closest-side, var(--kit-backdrop-star-pale) 0%, var(--kit-backdrop-star-pale) 32%, transparent 100%);
    --kit-backdrop-dot-cyan: radial-gradient(circle closest-side, var(--kit-backdrop-star-cyan) 0%, var(--kit-backdrop-star-cyan) 32%, transparent 100%);
    --kit-backdrop-dot-rose: radial-gradient(circle closest-side, var(--kit-backdrop-star-rose) 0%, var(--kit-backdrop-star-rose) 32%, transparent 100%);
    --kit-backdrop-dot-warm: radial-gradient(circle closest-side, var(--kit-backdrop-star-warm) 0%, var(--kit-backdrop-star-warm) 32%, transparent 100%);
    --kit-backdrop-dot-cool: radial-gradient(circle closest-side, var(--kit-backdrop-star-cool) 0%, var(--kit-backdrop-star-cool) 32%, transparent 100%);
    --kit-backdrop-star-xs: calc(var(--kit-backdrop-star-size) * 0.7) calc(var(--kit-backdrop-star-size) * 0.7);
    --kit-backdrop-star-sm: var(--kit-backdrop-star-size) var(--kit-backdrop-star-size);
    --kit-backdrop-star-md: calc(var(--kit-backdrop-star-size) * 1.45) calc(var(--kit-backdrop-star-size) * 1.45);
    --kit-backdrop-star-lg: calc(var(--kit-backdrop-star-size) * 2.1) calc(var(--kit-backdrop-star-size) * 2.1);
    background-color: var(--kit-color-surface-sunken);
    background-repeat: no-repeat;
      background-image:
        var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-cyan), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale),
        var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-cool), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-rose),
        var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-rose), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-warm), var(--kit-backdrop-dot-pale),
        var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-warm),
        var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-cyan), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-cool), var(--kit-backdrop-dot-pale),
        var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-cool), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale),
        var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-cyan), var(--kit-backdrop-dot-pale),
        var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-cool), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale),
        var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale),
        var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale),
        var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-cool),
        var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-cool),
        var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-cyan);
      background-position:
        29.29% 43.51%, 83.21% 35.66%, 61.69% 96.69%, 3.54% 87.90%, 35.50% 88.82%, 3.62% 3.27%,
        63.20% 2.56%, 12.51% 57.63%, 83.37% 81.83%, 46.12% 15.45%, 17.22% 81.36%, 95.88% 2.87%,
        97.28% 53.35%, 48.06% 52.80%, 27.01% 12.22%, 70.66% 61.64%, 98.38% 79.41%, 51.25% 86.08%,
        3.35% 38.91%, 56.31% 68.36%, 76.45% 5.64%, 12.14% 24.62%, 87.35% 15.16%, 57.37% 39.64%,
        68.57% 30.42%, 22.51% 60.56%, 59.71% 22.61%, 1.23% 59.77%, 88.93% 65.20%, 41.40% 34.55%,
        35.90% 5.36%, 74.34% 94.99%, 45.28% 70.85%, 96.14% 23.13%, 81.14% 54.33%, 33.36% 59.62%,
        26.38% 78.52%, 74.45% 75.83%, 68.09% 75.99%, 45.47% 96.43%, 91.36% 48.62%, 90.60% 94.89%,
        50.65% 7.47%, 13.46% 3.18%, 71.45% 45.24%, 87.02% 2.09%, 35.24% 23.11%, 71.00% 15.21%,
        50.12% 30.37%, 24.18% 31.24%, 99.20% 65.47%, 66.54% 51.34%, 15.04% 40.14%, 12.03% 99.00%,
        59.40% 82.04%, 41.47% 85.56%, 98.05% 40.38%, 19.03% 16.31%, 91.86% 29.02%, 32.23% 76.31%,
        92.86% 81.92%, 9.31% 81.15%;
      background-size:
        var(--kit-backdrop-star-sm), var(--kit-backdrop-star-md), var(--kit-backdrop-star-lg), var(--kit-backdrop-star-xs),
        var(--kit-backdrop-star-md), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-md), var(--kit-backdrop-star-sm),
        var(--kit-backdrop-star-sm), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-md), var(--kit-backdrop-star-xs),
        var(--kit-backdrop-star-lg), var(--kit-backdrop-star-lg), var(--kit-backdrop-star-xs), var(--kit-backdrop-star-xs),
        var(--kit-backdrop-star-md), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-md), var(--kit-backdrop-star-xs),
        var(--kit-backdrop-star-xs), var(--kit-backdrop-star-md), var(--kit-backdrop-star-xs), var(--kit-backdrop-star-sm),
        var(--kit-backdrop-star-sm), var(--kit-backdrop-star-xs), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-sm),
        var(--kit-backdrop-star-xs), var(--kit-backdrop-star-lg), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-sm),
        var(--kit-backdrop-star-sm), var(--kit-backdrop-star-lg), var(--kit-backdrop-star-xs), var(--kit-backdrop-star-xs),
        var(--kit-backdrop-star-md), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-xs),
        var(--kit-backdrop-star-md), var(--kit-backdrop-star-xs), var(--kit-backdrop-star-lg), var(--kit-backdrop-star-xs),
        var(--kit-backdrop-star-sm), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-sm),
        var(--kit-backdrop-star-xs), var(--kit-backdrop-star-md), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-xs),
        var(--kit-backdrop-star-xs), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-md), var(--kit-backdrop-star-sm),
        var(--kit-backdrop-star-md), var(--kit-backdrop-star-md), var(--kit-backdrop-star-xs), var(--kit-backdrop-star-md),
        var(--kit-backdrop-star-sm), var(--kit-backdrop-star-sm);
  }
  :where(.kit-backdrop[data-backdrop="starfield"])::before,
  :where(.kit-backdrop[data-backdrop="starfield"])::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
  }
  :where(.kit-backdrop[data-backdrop="starfield"])::before {
    animation: kit-backdrop-twinkle-swell calc(var(--kit-period-pulse) * 2) var(--kit-easing-linear) infinite;
    animation-play-state: var(--kit-animation-play-state);
      background-image:
        var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-cool), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale),
        var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale),
        var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-warm), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale),
        var(--kit-backdrop-dot-cool), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-cool), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale),
        var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-cool), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale),
        var(--kit-backdrop-dot-warm), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-cool), var(--kit-backdrop-dot-pale),
        var(--kit-backdrop-dot-warm), var(--kit-backdrop-dot-warm), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale),
        var(--kit-backdrop-dot-cyan);
      background-position:
        23.16% 95.20%, 59.21% 52.17%, 97.19% 97.13%, 30.59% 28.87%, 60.98% 66.70%, 5.33% 70.35%,
        41.30% 55.53%, 79.25% 88.21%, 82.29% 23.90%, 19.60% 47.09%, 76.92% 26.02%, 63.92% 27.90%,
        36.50% 51.97%, 6.50% 98.77%, 7.26% 48.59%, 52.42% 40.54%, 81.95% 66.24%, 8.41% 35.04%,
        29.13% 94.72%, 61.74% 16.04%, 27.68% 64.28%, 51.45% 72.25%, 98.65% 13.91%, 45.39% 0.48%,
        88.52% 77.05%, 10.58% 69.92%, 2.18% 23.08%, 63.28% 43.70%, 68.38% 97.82%, 9.98% 11.32%,
        44.80% 58.85%, 31.38% 0.67%, 76.65% 49.17%, 18.06% 62.06%, 80.81% 13.64%, 42.65% 41.06%;
      background-size:
        var(--kit-backdrop-star-md), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-sm),
        var(--kit-backdrop-star-xs), var(--kit-backdrop-star-xs), var(--kit-backdrop-star-xs), var(--kit-backdrop-star-sm),
        var(--kit-backdrop-star-md), var(--kit-backdrop-star-lg), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-lg),
        var(--kit-backdrop-star-sm), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-xs),
        var(--kit-backdrop-star-xs), var(--kit-backdrop-star-md), var(--kit-backdrop-star-lg), var(--kit-backdrop-star-lg),
        var(--kit-backdrop-star-xs), var(--kit-backdrop-star-md), var(--kit-backdrop-star-xs), var(--kit-backdrop-star-xs),
        var(--kit-backdrop-star-xs), var(--kit-backdrop-star-md), var(--kit-backdrop-star-xs), var(--kit-backdrop-star-xs),
        var(--kit-backdrop-star-sm), var(--kit-backdrop-star-md), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-sm),
        var(--kit-backdrop-star-sm), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-lg);
  }
  :where(.kit-backdrop[data-backdrop="starfield"])::after {
    animation: kit-backdrop-twinkle-blink calc(var(--kit-period-progress) * 3) var(--kit-easing-linear) infinite;
    animation-play-state: var(--kit-animation-play-state);
      background-image:
        var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-rose), var(--kit-backdrop-dot-rose), var(--kit-backdrop-dot-pale),
        var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-rose),
        var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-cool),
        var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-warm), var(--kit-backdrop-dot-rose), var(--kit-backdrop-dot-cool), var(--kit-backdrop-dot-pale),
        var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-cool),
        var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale), var(--kit-backdrop-dot-pale),
        var(--kit-backdrop-dot-cyan), var(--kit-backdrop-dot-cool);
      background-position:
        56.32% 31.29%, 76.02% 14.74%, 81.33% 44.97%, 56.51% 3.60%, 35.23% 99.98%, 40.27% 75.91%,
        55.75% 87.63%, 24.94% 51.11%, 20.92% 6.82%, 67.81% 39.03%, 50.35% 0.16%, 54.26% 17.75%,
        69.14% 88.91%, 24.96% 39.12%, 83.67% 98.10%, 25.20% 4.63%, 70.72% 53.29%, 67.40% 1.23%,
        57.06% 99.25%, 16.67% 94.30%, 64.60% 86.75%, 94.64% 70.90%, 86.70% 31.84%, 47.34% 41.56%,
        7.45% 0.61%, 49.34% 99.55%, 64.11% 55.82%, 17.81% 0.26%, 22.48% 78.99%, 76.94% 37.05%,
        51.82% 22.71%, 6.50% 23.35%;
      background-size:
        var(--kit-backdrop-star-sm), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-sm),
        var(--kit-backdrop-star-sm), var(--kit-backdrop-star-md), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-md),
        var(--kit-backdrop-star-sm), var(--kit-backdrop-star-xs), var(--kit-backdrop-star-md), var(--kit-backdrop-star-xs),
        var(--kit-backdrop-star-md), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-lg), var(--kit-backdrop-star-sm),
        var(--kit-backdrop-star-sm), var(--kit-backdrop-star-xs), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-xs),
        var(--kit-backdrop-star-md), var(--kit-backdrop-star-md), var(--kit-backdrop-star-md), var(--kit-backdrop-star-sm),
        var(--kit-backdrop-star-md), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-xs),
        var(--kit-backdrop-star-xs), var(--kit-backdrop-star-xs), var(--kit-backdrop-star-sm), var(--kit-backdrop-star-sm);
  }
  @keyframes kit-backdrop-twinkle-swell {
    0%, 100% { opacity: 1; }
    38% { opacity: 0.16; }
    64% { opacity: 0.58; }
  }
  @keyframes kit-backdrop-twinkle-blink {
    0%, 100% { opacity: 1; }
    21% { opacity: 0.85; }
    47% { opacity: 0.09; }
    72% { opacity: 0.7; }
  }
  @media (prefers-contrast: more) {
    :where(.kit-backdrop[data-backdrop="starfield"]) { --kit-backdrop-strength: 0; }
  }
  @media (forced-colors: active) {
    :where(.kit-backdrop) {
      background: Canvas;
      forced-color-adjust: none;
    }
    :where(.kit-backdrop)::before,
    :where(.kit-backdrop)::after { display: none; }
  }
  @media print {
    :where(.kit-backdrop) { display: none; }
  }
}
@layer kit.components {
  :where(.kit-sketch) {
    --_stroke: 2px;
    display: grid;
    gap: var(--kit-space-stack);
    min-inline-size: 0;
  }
  :where(.kit-sketch-tools) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kit-space-200);
  }
  :where(.kit-sketch-content) {
    position: relative;
    isolation: isolate;
    min-inline-size: 0;
  }
  :where(.kit-sketch-content) > :where(img, video) {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }
  :where(.kit-sketch-layer) {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
    pointer-events: none;
  }
  :where(.kit-sketch)[data-kit-sketch-armed="true"] :where(.kit-sketch-layer) {
    pointer-events: auto;
    touch-action: none;
    cursor: crosshair;
  }
  :where(.kit-sketch)[data-kit-sketch-tool="erase"] :where(.kit-sketch-layer) {
    cursor: cell;
  }
  :where(.kit-sketch-mark) {
    --_ink: var(--kit-color-chart-1);
    fill: none;
    stroke: var(--_ink);
    stroke-width: var(--_stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
    transition: opacity var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-sketch-mark)[data-color="2"] { --_ink: var(--kit-color-chart-2); }
  :where(.kit-sketch-mark)[data-color="3"] { --_ink: var(--kit-color-chart-3); }
  :where(.kit-sketch-mark)[data-color="4"] { --_ink: var(--kit-color-chart-4); }
  :where(.kit-sketch-mark)[data-color="5"] { --_ink: var(--kit-color-chart-5); }
  :where(.kit-sketch-mark)[data-kind="box"] {
    fill: color-mix(in oklab, var(--_ink) 16%, transparent);
  }
  :where(.kit-sketch-mark)[data-wet="true"] {
    opacity: 0.7;
  }
  :where(.kit-sketch-mark)[data-doomed="true"] {
    opacity: 0.35;
  }
  @media (forced-colors: active) {
    :where(.kit-sketch-mark) {
      stroke: CanvasText;
    }
    :where(.kit-sketch-mark)[data-kind="box"] {
      fill: none;
      stroke-dasharray: 4 3;
    }
    :where(.kit-sketch-mark)[data-doomed="true"] {
      stroke: Highlight;
    }
  }
  :where(.kit-sketch-list) {
    display: grid;
    gap: var(--kit-space-100);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  :where(.kit-sketch-list) > :where(li) {
    display: flex;
    align-items: center;
    gap: var(--kit-space-inline);
    min-block-size: var(--kit-space-800);
    padding-inline: var(--kit-space-200);
    border-radius: var(--kit-radius-control);
    background: var(--kit-color-surface);
    font-size: var(--kit-font-size-300);
  }
  :where(.kit-sketch-swatch) {
    --_ink: var(--kit-color-chart-1);
    flex: none;
    inline-size: var(--kit-space-300);
    block-size: var(--kit-space-300);
    border-radius: var(--kit-radius-full);
    background: var(--_ink);
  }
  :where(.kit-sketch-swatch)[data-color="2"] { --_ink: var(--kit-color-chart-2); }
  :where(.kit-sketch-swatch)[data-color="3"] { --_ink: var(--kit-color-chart-3); }
  :where(.kit-sketch-swatch)[data-color="4"] { --_ink: var(--kit-color-chart-4); }
  :where(.kit-sketch-swatch)[data-color="5"] { --_ink: var(--kit-color-chart-5); }
  @media (forced-colors: active) {
    :where(.kit-sketch-swatch) {
      border: var(--kit-border-width-hairline) solid CanvasText;
      forced-color-adjust: none;
    }
  }
}
@layer kit.components {
  :where(.kit-nodegraph) {
    --kit-nodegraph-grid-fine: 24;
    --kit-nodegraph-grid-coarse: 120;
    --kit-nodegraph-dot: 1px;
    --kit-nodegraph-fine-opacity: 0.55;
    --kit-nodegraph-height: clamp(18rem, 56vh, 34rem);
    --kit-nodegraph-ink: var(--kit-color-border);
    --kit-nodegraph-dot-ink: color-mix(in oklab, var(--kit-color-content-muted) 60%, var(--kit-color-surface-sunken));
    position: relative;
    isolation: isolate;
    display: grid;
    min-inline-size: 0;
    container-type: inline-size;
    container-name: kit-nodegraph;
  }
  :where(.kit-nodegraph-viewport) {
    position: relative;
    z-index: 0;
    block-size: var(--kit-nodegraph-height);
    min-inline-size: 0;
    background: var(--kit-color-surface-sunken);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-surface);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  :where(.kit-nodegraph-viewport):focus-visible {
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: calc(var(--kit-focus-offset) * -1 - var(--kit-focus-width));
    box-shadow: var(--kit-focus-halo);
  }
  :where(.kit-nodegraph[data-kit-nodegraph-enhanced="true"]) :where(.kit-nodegraph-viewport) {
    overflow: hidden;
    touch-action: none;
    cursor: grab;
  }
  :where(.kit-nodegraph-viewport)[data-panning="true"] { cursor: grabbing; }
  :where(.kit-nodegraph-world) {
    position: relative;
    inline-size: var(--kit-nodegraph-board-inline, 1200px);
    block-size: var(--kit-nodegraph-board-block, 720px);
    transform-origin: 0 0;
    will-change: transform;
    isolation: isolate;
  }
  :where(.kit-nodegraph[data-kit-nodegraph-enhanced="true"]) :where(.kit-nodegraph-world) {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
  }
  :where(.kit-nodegraph-world) > :where(.kit-backdrop) { --kit-backdrop-strength: 0.45; }
  :where(.kit-nodegraph-layers) {
    position: relative;
    z-index: 1;
    isolation: isolate;
    inline-size: 100%;
    block-size: 100%;
  }
  :where(.kit-nodegraph-grid) {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 1px;
    block-size: 1px;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
    color: var(--kit-nodegraph-ink);
  }
  :where(.kit-nodegraph[data-grid="off"]) :where(.kit-nodegraph-grid) { display: none; }
  :where(.kit-nodegraph-grid-dot) {
    fill: var(--kit-nodegraph-dot-ink);
    r: calc(var(--kit-nodegraph-dot) / var(--kit-nodegraph-grid-k, 1));
  }
  :where(.kit-nodegraph-grid-dot)[data-level="coarse"] {
    r: calc(var(--kit-nodegraph-dot) * 1.5 / var(--kit-nodegraph-grid-k, 1));
  }
  :where(.kit-nodegraph-grid-line) {
    fill: none;
    stroke: currentcolor;
    stroke-width: var(--kit-border-width-hairline);
    vector-effect: non-scaling-stroke;
  }
  :where(.kit-nodegraph-grid-fill)[data-level="fine"] {
    opacity: var(--kit-nodegraph-fine-opacity);
    transition: opacity var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-nodegraph-origin) {
    fill: none;
    stroke: var(--kit-color-content-accent);
    stroke-width: 1.5px;
  }
  :where(.kit-nodegraph-origin) > * { vector-effect: non-scaling-stroke; }
  :where(.kit-nodegraph-origin-ring) { fill: var(--kit-color-surface-sunken); }
  :where(.kit-nodegraph-content) {
    position: absolute;
    inset: 0;
    z-index: 1;
    isolation: isolate;
    overflow: visible;
  }
  :where(.kit-nodegraph-item) {
    position: absolute;
    z-index: 1;
    display: grid;
    align-content: center;
    gap: var(--kit-space-050);
    padding: var(--kit-space-150) var(--kit-space-200);
    background: var(--kit-color-surface-raised);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-control);
    box-shadow: var(--kit-elevation-1);
    color: var(--kit-color-content);
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-200);
    overflow: hidden;
  }
  :where(.kit-nodegraph-item)[data-moving="true"] {
    z-index: 2;
    box-shadow: var(--kit-elevation-2);
    border-color: var(--kit-color-accent);
  }
  :where(.kit-nodegraph-item-title) {
    font-weight: var(--kit-font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  :where(.kit-nodegraph-item-meta) {
    color: var(--kit-color-content-muted);
    font-family: var(--kit-font-mono);
    font-size: var(--kit-font-size-100);
    font-variant-numeric: tabular-nums;
  }
  :where(.kit-nodegraph-screen) {
    position: absolute;
    z-index: 2;
    translate: -50% -50%;
    transform-origin: 50% 50%;
  }
  :where(.kit-nodegraph-hit) {
    position: absolute;
    inset: 50% auto auto 50%;
    inline-size: var(--kit-nodegraph-hit-size, 24px);
    block-size: var(--kit-nodegraph-hit-size, 24px);
    translate: -50% -50%;
    border-radius: var(--kit-radius-full);
    background: transparent;
  }
  :where(.kit-nodegraph-furniture) {
    position: absolute;
    z-index: 2;
    inset-block-end: var(--kit-space-300);
    inset-inline-end: var(--kit-space-300);
    display: grid;
    justify-items: end;
    gap: var(--kit-space-200);
    pointer-events: none;
  }
  :where(.kit-nodegraph-furniture) > * { pointer-events: auto; }
  :where(.kit-nodegraph-tools) {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--kit-space-100);
    padding: var(--kit-space-100);
    background: var(--kit-color-surface-raised);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-control);
    box-shadow: var(--kit-elevation-1);
    max-inline-size: 100%;
  }
  :where(.kit-nodegraph-tool-group) {
    display: flex;
    align-items: center;
    gap: var(--kit-space-050);
  }
  :where(.kit-nodegraph-tool-separator) {
    inline-size: var(--kit-border-width-hairline);
    align-self: stretch;
    background: var(--kit-color-border);
    margin-inline: var(--kit-space-050);
  }
  :where(.kit-nodegraph-readout) {
    min-inline-size: 4.25ch;
    text-align: center;
    font-family: var(--kit-font-mono);
    font-size: var(--kit-font-size-200);
    font-variant-numeric: tabular-nums;
    color: var(--kit-color-content-muted);
  }
  :where(.kit-nodegraph-minimap) {
    inline-size: clamp(6.5rem, 26cqi, 13rem);
    aspect-ratio: 16 / 10;
    background: color-mix(in oklab, var(--kit-color-surface-raised) 88%, transparent);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-control);
    box-shadow: var(--kit-elevation-1);
    overflow: hidden;
    cursor: crosshair;
    touch-action: none;
  }
  :where(.kit-nodegraph-minimap) > svg { display: block; inline-size: 100%; block-size: 100%; }
  :where(.kit-nodegraph-minimap-edge) {
    stroke: var(--kit-color-border-interactive);
    stroke-width: 0.6px;
    vector-effect: non-scaling-stroke;
    opacity: 0.55;
  }
  :where(.kit-nodegraph-minimap-node) {
    fill: var(--kit-color-content-muted);
    opacity: 0.85;
  }
  :where(.kit-nodegraph-minimap-node)[data-hue="1"] { fill: var(--kit-color-chart-1); }
  :where(.kit-nodegraph-minimap-node)[data-hue="2"] { fill: var(--kit-color-chart-2); }
  :where(.kit-nodegraph-minimap-node)[data-hue="3"] { fill: var(--kit-color-chart-3); }
  :where(.kit-nodegraph-minimap-node)[data-hue="4"] { fill: var(--kit-color-chart-4); }
  :where(.kit-nodegraph-minimap-node)[data-hue="5"] { fill: var(--kit-color-chart-5); }
  :where(.kit-nodegraph-minimap-node)[data-hue="6"] { fill: var(--kit-color-chart-6); }
  :where(.kit-nodegraph-minimap-halo) {
    fill: none;
    stroke: var(--kit-color-surface-raised);
    stroke-width: 4.5px;
    vector-effect: non-scaling-stroke;
  }
  :where(.kit-nodegraph-minimap-view) {
    fill: color-mix(in oklab, var(--kit-color-accent) 14%, transparent);
    stroke: var(--kit-color-accent);
    stroke-width: 1.5px;
    vector-effect: non-scaling-stroke;
  }
  @container kit-nodegraph (max-width: 26rem) {
    :where(.kit-nodegraph-minimap) { display: none; }
  }
  :where(.kit-nodegraph-hint) {
    margin: 0;
    padding-block-start: var(--kit-space-150);
    color: var(--kit-color-content-muted);
    font-size: var(--kit-font-size-200);
  }
  :where(.kit-nodegraph-hint) kbd { white-space: nowrap; }
  @media (forced-colors: active) {
    :where(.kit-nodegraph-grid) { color: GrayText; }
    :where(.kit-nodegraph-item) { border-color: CanvasText; }
    :where(.kit-nodegraph-minimap-view) { stroke: Highlight; fill: none; }
    :where(.kit-nodegraph-minimap-halo) { stroke: Canvas; }
    :where(.kit-nodegraph-viewport) { border-color: CanvasText; }
  }
}
@layer kit.components {
  :where(.kit-nodegraph-node) {
    --kit-nodegraph-port-base: 14px;
    --kit-nodegraph-port-floor: 9px;
    --_mark: var(--kit-nodegraph-port-base);
    position: absolute;
    z-index: 1;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-inline-size: 10rem;
    inline-size: max-content;
    background: var(--kit-color-surface-raised);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-surface);
    box-shadow: var(--kit-elevation-1);
    color: var(--kit-color-content);
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-200);
    overflow: visible;
    user-select: none;
  }
  :where(.kit-nodegraph-node-content, .kit-nodegraph-node-footer) { user-select: text; }
  :where(.kit-nodegraph-node):focus-visible {
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: var(--kit-focus-offset);
    box-shadow: var(--kit-elevation-1), var(--kit-focus-halo);
  }
  :where(.kit-nodegraph-node)[data-moving="true"] {
    z-index: 2;
    box-shadow: var(--kit-elevation-2);
  }
  :where(.kit-nodegraph-node-header) {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--kit-space-150);
    min-block-size: var(--kit-space-800);
    padding-block: var(--kit-space-100);
    padding-inline: var(--kit-space-300) var(--kit-space-100);
    background: color-mix(in oklab, var(--kit-color-content) 3%, var(--kit-color-surface-raised));
    border-block-end: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
    cursor: grab;
    user-select: none;
    touch-action: none;
  }
  :where(.kit-nodegraph-node)[data-moving="true"] :where(.kit-nodegraph-node-header) { cursor: grabbing; }
  :where(.kit-nodegraph-node):is([data-hue="1"], [data-hue="2"], [data-hue="3"], [data-hue="4"], [data-hue="5"], [data-hue="6"]) :where(.kit-nodegraph-node-header) {
    background: color-mix(in oklab, var(--_chart) 14%, var(--kit-color-surface-raised));
  }
  :where(.kit-nodegraph-node-icon) { flex: none; color: var(--kit-color-content-muted); }
  :where(.kit-nodegraph-node-title) {
    flex: 1 1 auto;
    min-inline-size: 0;
    font-weight: var(--kit-font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  :where(.kit-nodegraph-node-kind) {
    flex: none;
    color: var(--kit-color-content-muted);
    font-family: var(--kit-font-mono);
    font-size: var(--kit-font-size-100);
  }
  :where(.kit-nodegraph-node-header) > :where(.kit-badge) {
    flex: none;
    min-block-size: var(--kit-space-400);
    padding-inline: var(--kit-space-150);
    font-size: var(--kit-font-size-100);
  }
  :where(.kit-nodegraph-node-caret) { flex: none; }
  :where(.kit-nodegraph-node):not([data-kit-nodegraph-node-enhanced]) :where(.kit-nodegraph-node-caret) { visibility: hidden; }
  :where(.kit-nodegraph-node)[data-collapsed="true"] :where(.kit-nodegraph-node-caret) :where(svg) { rotate: -90deg; }
  :where(.kit-nodegraph-node-caret):dir(rtl) :where(svg) { scale: -1 1; }
  :where(.kit-nodegraph-node)[data-collapsed="true"] :where(.kit-nodegraph-node-header) {
    border-block-end-color: transparent;
    border-end-start-radius: inherit;
    border-end-end-radius: inherit;
  }
  :where(.kit-nodegraph-node)[data-collapsed="true"] > :where(.kit-nodegraph-node-body, .kit-nodegraph-node-footer, .kit-nodegraph-node-perimeter) {
    display: none;
  }
  :where(.kit-nodegraph-node)[data-suppressed="true"] {
    border-style: dashed;
    border-color: var(--kit-color-border-strong);
  }
  :where(.kit-nodegraph-node)[data-suppressed="true"] > :where(.kit-nodegraph-node-body, .kit-nodegraph-node-perimeter),
  :where(.kit-nodegraph-node)[data-suppressed="true"] > :where(.kit-nodegraph-node-header) > :where(.kit-nodegraph-node-icon, .kit-nodegraph-node-title, .kit-nodegraph-node-kind) {
    opacity: 0.64;
  }
  :where(.kit-nodegraph-node)[data-suppressed="true"] > :where(.kit-nodegraph-node-header) > :where(.kit-nodegraph-node-kind) {
    color: var(--kit-color-content);
  }
  :where(.kit-nodegraph-node)[data-suppressed="true"] > :where(.kit-nodegraph-node-body, .kit-nodegraph-node-perimeter):has(:focus-visible) {
    opacity: 1;
  }
  :where(.kit-nodegraph-node)::before {
    content: none;
    position: absolute;
    inset: calc(var(--kit-border-width-hairline) * -1);
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
      0 0 0 2px var(--_glow),
      0 0 12px 3px color-mix(in oklab, var(--_glow) 38%, transparent);
  }
  :where(.kit-nodegraph-node)[data-status="info"]    { --_glow: var(--kit-color-info-border); }
  :where(.kit-nodegraph-node)[data-status="success"] { --_glow: var(--kit-color-success-content); }
  :where(.kit-nodegraph-node)[data-status="warning"] { --_glow: var(--kit-color-warning-content); }
  :where(.kit-nodegraph-node)[data-status="danger"]  { --_glow: var(--kit-color-danger-content); }
  :where(.kit-nodegraph-node):is([data-status="info"], [data-status="success"], [data-status="warning"], [data-status="danger"])::before {
    content: "";
  }
  :where(.kit-nodegraph-node)[data-status="info"]::before {
    animation: kit-nodegraph-node-pulse var(--kit-period-pulse) var(--kit-easing-standard) infinite;
    animation-play-state: var(--kit-animation-play-state);
  }
  @keyframes kit-nodegraph-node-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
  }
  :where(.kit-nodegraph-node):is(:focus-visible, :has(:focus-visible))::before {
    content: none;
  }
  :where(.kit-nodegraph-node-body) {
    display: grid;
    flex: 1 1 auto;
    align-content: start;
    padding-block: var(--kit-space-100);
  }
  :where(.kit-nodegraph-node-row) {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--kit-space-200);
    min-block-size: var(--kit-space-600);
    padding-inline: var(--kit-space-600);
  }
  :where(.kit-nodegraph-port-label) {
    min-inline-size: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  :where(.kit-nodegraph-node-row) > :where(.kit-nodegraph-port-label)[data-side="r"] {
    margin-inline-start: auto;
    text-align: end;
  }
  :where(.kit-nodegraph-node-content) {
    display: grid;
    gap: var(--kit-space-150);
    padding: var(--kit-space-150) var(--kit-space-300);
  }
  :where(.kit-nodegraph-node-footer) {
    margin: 0;
    padding: var(--kit-space-150) var(--kit-space-300);
    border-block-start: var(--kit-border-width-hairline) solid var(--kit-color-border);
    color: var(--kit-color-content-muted);
    font-size: var(--kit-font-size-100);
  }
  :where(.kit-nodegraph-node-footer):empty { display: none; }
  :where(.kit-nodegraph-node-footer)[data-tone="danger"]  { color: var(--kit-color-danger-content); }
  :where(.kit-nodegraph-node-footer)[data-tone="warning"] { color: var(--kit-color-warning-content); }
  :where(.kit-nodegraph-node-perimeter) {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }
  :where(.kit-nodegraph-node-perimeter) > * { pointer-events: auto; }
  :where(.kit-nodegraph-port) {
    --_turn: 0deg;
    --_edge: calc(var(--kit-border-width-hairline) / -2);
    --_chart: var(--kit-nodegraph-port-ink, var(--kit-color-content-muted));
    --_hue: var(--_chart);
    --_arrow: calc(var(--_mark) * 0.4);
    --_arrow-at: calc(var(--_mark) * 0.5 + var(--_arrow) * 0.5 + max(2px, var(--_mark) * 0.14));
    --_flip: 180deg;
    --kit-nodegraph-screen-base: var(--kit-nodegraph-port-base);
    --kit-nodegraph-screen-floor: var(--kit-nodegraph-port-floor);
    display: grid;
    place-items: center;
    inline-size: var(--kit-nodegraph-hit-size, 24px);
    block-size: var(--kit-nodegraph-hit-size, 24px);
    border-radius: var(--kit-radius-full);
    cursor: crosshair;
  }
  :where(.kit-nodegraph-port):focus-visible {
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: var(--kit-focus-offset);
    box-shadow: var(--kit-focus-halo);
  }
  :where(.kit-nodegraph-port)[data-side="l"] { --_turn: 180deg; inset-inline-start: var(--_edge);           inset-block-start: 50%; }
  :where(.kit-nodegraph-port)[data-side="r"] { --_turn: 0deg;   inset-inline-start: calc(100% - var(--_edge)); inset-block-start: 50%; }
  :where(.kit-nodegraph-port)[data-side="t"] { --_turn: 270deg; inset-block-start: var(--_edge);           inset-inline-start: calc(var(--kit-nodegraph-port-at, 0.5) * 100%); }
  :where(.kit-nodegraph-port)[data-side="b"] { --_turn: 90deg;  inset-block-start: calc(100% - var(--_edge)); inset-inline-start: calc(var(--kit-nodegraph-port-at, 0.5) * 100%); }
  :where(.kit-nodegraph-node-perimeter) > :where(.kit-nodegraph-port):is([data-side="l"], [data-side="r"]) {
    inset-block-start: calc(var(--kit-nodegraph-port-at, 0.5) * 100%);
  }
  :where(.kit-nodegraph-port):dir(rtl) { translate: 50% -50%; }
  :where(.kit-nodegraph-port)[data-side="l"]:dir(rtl) { --_turn: 0deg; }
  :where(.kit-nodegraph-port)[data-side="r"]:dir(rtl) { --_turn: 180deg; }
  :where(.kit-nodegraph-port)[data-direction="out"]  { --_flip: 0deg; }
  :where(.kit-nodegraph-node, .kit-nodegraph-port)[data-hue="1"] { --_chart: var(--kit-color-chart-1); }
  :where(.kit-nodegraph-node, .kit-nodegraph-port)[data-hue="2"] { --_chart: var(--kit-color-chart-2); }
  :where(.kit-nodegraph-node, .kit-nodegraph-port)[data-hue="3"] { --_chart: var(--kit-color-chart-3); }
  :where(.kit-nodegraph-node, .kit-nodegraph-port)[data-hue="4"] { --_chart: var(--kit-color-chart-4); }
  :where(.kit-nodegraph-node, .kit-nodegraph-port)[data-hue="5"] { --_chart: var(--kit-color-chart-5); }
  :where(.kit-nodegraph-node, .kit-nodegraph-port)[data-hue="6"] { --_chart: var(--kit-color-chart-6); }
  :where(.kit-nodegraph-port-glyph) {
    position: relative;
    display: block;
    inline-size: var(--_mark);
    block-size: var(--_mark);
    rotate: var(--_turn);
    scale: inherit;
    pointer-events: none;
  }
  :where(.kit-nodegraph-port-glyph)::before,
  :where(.kit-nodegraph-port-glyph)::after {
    content: "";
    position: absolute;
    inset: 0;
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
  }
  :where(.kit-nodegraph-port-glyph)::before { background: var(--kit-color-surface-raised); }
  :where(.kit-nodegraph-port-glyph)::after { background: var(--_hue); }
  :where(.kit-nodegraph-port)[data-connected="true"] :where(.kit-nodegraph-port-glyph)::before {
    background: color-mix(in oklab, var(--_hue) 50%, var(--kit-color-surface-raised));
  }
  :where(.kit-nodegraph-port)::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: var(--_arrow);
    block-size: var(--_arrow);
    transform:
      translate(calc(cos(var(--_turn)) * var(--_arrow-at) * -1), calc(sin(var(--_turn)) * var(--_arrow-at) * -1))
      rotate(calc(var(--_turn) + var(--_flip)));
    scale: inherit;
    background: var(--_hue);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    pointer-events: none;
  }
  :where(.kit-nodegraph-port)[data-direction="bidi"]::after {
    inline-size: calc(var(--_arrow) * 1.5);
    clip-path: polygon(0 50%, 32% 0, 68% 0, 100% 50%, 68% 100%, 32% 100%);
  }
  :where(.kit-nodegraph-port):not([data-direction="in"], [data-direction="out"], [data-direction="bidi"])::after {
    content: none;
  }
  :where(.kit-nodegraph-port)::before {
    content: none;
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: calc(var(--_mark) * 1.42);
    block-size: calc(var(--_mark) * 1.42);
    scale: inherit;
    border-radius: var(--kit-radius-full);
    pointer-events: none;
  }
  :where(.kit-nodegraph-port)[data-required="true"]:not([data-connected="true"])::before {
    content: "";
    border: 1.5px dashed var(--kit-color-warning-content);
  }
  :where(.kit-nodegraph-port)[data-flag="error"]::before {
    content: "";
    border: 2px solid var(--kit-color-danger-content);
  }
  :where(.kit-nodegraph-port) > :where(.kit-nodegraph-port-label) {
    position: absolute;
    inset-inline-start: 50%;
    translate: -50% 0;
    padding: var(--kit-space-050) var(--kit-space-150);
    background: var(--kit-color-surface-raised);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border-strong);
    border-radius: var(--kit-radius-mark);
    box-shadow: var(--kit-elevation-1);
    color: var(--kit-color-content);
    font-size: var(--kit-font-size-100);
    line-height: var(--kit-line-height-100);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
  }
  :where(.kit-nodegraph-port)[data-side="t"] > :where(.kit-nodegraph-port-label) { inset-block-end: calc(100% + var(--kit-space-100)); }
  :where(.kit-nodegraph-port)[data-side="b"] > :where(.kit-nodegraph-port-label) { inset-block-start: calc(100% + var(--kit-space-100)); }
  :where(.kit-nodegraph-port)[data-side="l"] > :where(.kit-nodegraph-port-label),
  :where(.kit-nodegraph-port)[data-side="r"] > :where(.kit-nodegraph-port-label) { inset-block-end: calc(100% + var(--kit-space-100)); }
  :where(.kit-nodegraph-port):dir(rtl) > :where(.kit-nodegraph-port-label) { translate: 50% 0; }
  :where(.kit-nodegraph-port):is(:hover, :focus-visible) > :where(.kit-nodegraph-port-label) { opacity: 1; }
  :where(.kit-nodegraph-port) > :where(.kit-nodegraph-port-glyph)::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='44'/%3E%3C/svg%3E"); }
  :where(.kit-nodegraph-port) > :where(.kit-nodegraph-port-glyph)::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='38' fill='none' stroke='currentColor' stroke-width='12'/%3E%3C/svg%3E"); }
  :where(.kit-nodegraph-port)[data-kind="exec"] > :where(.kit-nodegraph-port-glyph)::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='34.5' fill='none' stroke='currentColor' stroke-width='19'/%3E%3C/svg%3E"); }
  :where(.kit-nodegraph-port)[data-termination="mate"][data-gender="male"] > :where(.kit-nodegraph-port-glyph)::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M6 19L58 19L96 50L58 81L6 81Z'/%3E%3C/svg%3E"); }
  :where(.kit-nodegraph-port)[data-termination="mate"][data-gender="male"] > :where(.kit-nodegraph-port-glyph)::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M6 19L58 19L96 50L58 81L6 81ZM18 31L53.73 31L77.02 50L53.73 69L18 69Z'/%3E%3C/svg%3E"); }
  :where(.kit-nodegraph-port)[data-termination="mate"][data-gender="male"][data-kind="exec"] > :where(.kit-nodegraph-port-glyph)::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M6 19L58 19L96 50L58 81L6 81ZM25 38L51.23 38L65.94 50L51.23 62L25 62Z'/%3E%3C/svg%3E"); }
  :where(.kit-nodegraph-port)[data-termination="mate"][data-gender="female"] > :where(.kit-nodegraph-port-glyph)::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='54' cy='50' r='30.5'/%3E%3C/svg%3E"); }
  :where(.kit-nodegraph-port)[data-termination="mate"][data-gender="female"] > :where(.kit-nodegraph-port-glyph)::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M77.14 77.58A36 36 0 1 1 77.14 22.42' fill='none' stroke='currentColor' stroke-width='12'/%3E%3C/svg%3E"); }
  :where(.kit-nodegraph-port)[data-termination="mate"][data-gender="female"][data-kind="exec"] > :where(.kit-nodegraph-port-glyph)::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='54' cy='50' r='23.5'/%3E%3C/svg%3E"); }
  :where(.kit-nodegraph-port)[data-termination="mate"][data-gender="female"][data-kind="exec"] > :where(.kit-nodegraph-port-glyph)::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M74.89 74.9A32.5 32.5 0 1 1 74.89 25.1' fill='none' stroke='currentColor' stroke-width='19'/%3E%3C/svg%3E"); }
  :where(.kit-nodegraph-port)[data-termination="solder"] > :where(.kit-nodegraph-port-glyph)::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M26 6A62 44 0 0 1 26 94Z'/%3E%3C/svg%3E"); }
  :where(.kit-nodegraph-port)[data-termination="solder"] > :where(.kit-nodegraph-port-glyph)::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M26 6A62 44 0 0 1 26 94ZM38 18.94A50 32 0 0 1 38 81.06Z'/%3E%3C/svg%3E"); }
  :where(.kit-nodegraph-port)[data-termination="solder"][data-kind="exec"] > :where(.kit-nodegraph-port-glyph)::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M26 6A62 44 0 0 1 26 94ZM45 27.57A43 25 0 0 1 45 72.43Z'/%3E%3C/svg%3E"); }
  :where(.kit-nodegraph-port)[data-termination="crimp"] > :where(.kit-nodegraph-port-glyph)::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M38 22H62A28 28 0 0 1 62 78H38A28 28 0 0 1 38 22Z'/%3E%3C/svg%3E"); }
  :where(.kit-nodegraph-port)[data-termination="crimp"] > :where(.kit-nodegraph-port-glyph)::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M38 22H62A28 28 0 0 1 62 78H38A28 28 0 0 1 38 22ZM38 34H62A16 16 0 0 1 62 66H38A16 16 0 0 1 38 34Z'/%3E%3C/svg%3E"); }
  :where(.kit-nodegraph-port)[data-termination="crimp"][data-kind="exec"] > :where(.kit-nodegraph-port-glyph)::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M38 22H62A28 28 0 0 1 62 78H38A28 28 0 0 1 38 22ZM38 41H62A9 9 0 0 1 62 59H38A9 9 0 0 1 38 41Z'/%3E%3C/svg%3E"); }
  :where(.kit-nodegraph-port)[data-termination="screw"] > :where(.kit-nodegraph-port-glyph)::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M12 12L88 12L88 88L12 88Z'/%3E%3C/svg%3E"); }
  :where(.kit-nodegraph-port)[data-termination="screw"] > :where(.kit-nodegraph-port-glyph)::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M12 12L88 12L88 88L12 88ZM24 24L76 24L76 76L24 76Z'/%3E%3Cpath d='M26.12 78.12L78.12 26.12L73.88 21.88L21.88 73.88Z'/%3E%3C/svg%3E"); }
  :where(.kit-nodegraph-port)[data-termination="screw"][data-kind="exec"] > :where(.kit-nodegraph-port-glyph)::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M12 12L88 12L88 88L12 88ZM31 31L69 31L69 69L31 69Z'/%3E%3Cpath d='M34.36 72.36L72.36 34.36L65.64 27.64L27.64 65.64Z'/%3E%3C/svg%3E"); }
  :where(.kit-nodegraph-port)[data-termination="pin"] > :where(.kit-nodegraph-port-glyph)::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='60' cy='34' r='33'/%3E%3Cpath d='M37.48 54.28L12.88 95.17L15.12 96.83L47.12 61.43Z'/%3E%3C/svg%3E"); }
  :where(.kit-nodegraph-port)[data-termination="pin"] > :where(.kit-nodegraph-port-glyph)::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='60' cy='34' r='27' fill='none' stroke='currentColor' stroke-width='12'/%3E%3Cpath d='M37.48 54.28L12.88 95.17L15.12 96.83L47.12 61.43Z'/%3E%3C/svg%3E"); }
  :where(.kit-nodegraph-port)[data-termination="pin"][data-kind="exec"] > :where(.kit-nodegraph-port-glyph)::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='60' cy='34' r='23.5' fill='none' stroke='currentColor' stroke-width='19'/%3E%3Cpath d='M37.48 54.28L12.88 95.17L15.12 96.83L47.12 61.43Z'/%3E%3C/svg%3E"); }
  @media (forced-colors: active) {
    :where(.kit-nodegraph-node) { border-color: CanvasText; }
    :where(.kit-nodegraph-node)::before { box-shadow: none; outline: 2px solid Highlight; }
    :where(.kit-nodegraph-port-glyph)::before { background: Canvas; }
    :where(.kit-nodegraph-port-glyph)::after,
    :where(.kit-nodegraph-port)::after { background: CanvasText; }
    :where(.kit-nodegraph-port)[data-connected="true"] :where(.kit-nodegraph-port-glyph)::before { background: Highlight; }
  }
}
@layer kit.components {
  :where(.kit-nodegraph) {
    --kit-nodegraph-wire-ink: var(--kit-color-content-muted);
    --kit-nodegraph-wire-power: var(--kit-color-danger-content);
    --kit-nodegraph-wire-gnd: var(--kit-color-content);
    --kit-nodegraph-wire-signal: var(--kit-color-warning-content);
    --kit-nodegraph-wire-weight: 2px;
    --kit-nodegraph-wire-weight-exec: 3.5px;
    --kit-nodegraph-wire-catch: 14px;
  }
  :where(.kit-nodegraph-wires) {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
  }
  :where(.kit-nodegraph-wire-overlay) {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
  }
  :where(.kit-nodegraph-wire) {
    --_wire: var(--kit-nodegraph-wire-ink);
    --_weight: var(--kit-nodegraph-wire-weight);
  }
  :where(.kit-nodegraph-wire)[data-kind="exec"] { --_weight: var(--kit-nodegraph-wire-weight-exec); }
  :where(.kit-nodegraph-wire-path) {
    fill: none;
    stroke: var(--_wire);
    stroke-width: var(--_weight);
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  :where(.kit-nodegraph-wire)[data-style="optional"] :where(.kit-nodegraph-wire-path) { stroke-dasharray: 7 5; }
  :where(.kit-nodegraph-wire)[data-style="weak"] :where(.kit-nodegraph-wire-path) { stroke-dasharray: 1 5; }
  :where(.kit-nodegraph-wire)[data-style="modulation"] :where(.kit-nodegraph-wire-path) { stroke-dasharray: 12 4 2 4; }
  :where(.kit-nodegraph-wire-arrow) {
    fill: var(--_wire);
    stroke: none;
  }
  :where(.kit-nodegraph-wire-hit) {
    fill: none;
    stroke: transparent;
    stroke-width: var(--kit-nodegraph-wire-catch);
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    pointer-events: stroke;
    cursor: pointer;
    outline: none;
  }
  :where(.kit-nodegraph-wire)[data-selected="true"] :where(.kit-nodegraph-wire-hit) {
    stroke: color-mix(in oklab, var(--kit-color-accent) 26%, transparent);
  }
  :where(.kit-nodegraph-wire-hit):focus-visible {
    stroke: color-mix(in oklab, var(--kit-color-focus) 45%, transparent);
  }
  :where(.kit-nodegraph-wire)[data-reconnecting="true"] { opacity: 0.35; }
  :where(.kit-nodegraph-wire)[data-animated="true"] :where(.kit-nodegraph-wire-path) {
    stroke-dasharray: 8 6;
    animation: kit-nodegraph-wire-flow var(--kit-period-flow) var(--kit-easing-linear) infinite;
    animation-play-state: var(--kit-animation-play-state, running);
  }
  @keyframes kit-nodegraph-wire-flow { to { stroke-dashoffset: -28; } }
  @container style(--kit-animation-play-state: paused) {
    :where(.kit-nodegraph-wire)[data-animated="true"] :where(.kit-nodegraph-wire-path) {
      animation: none;
      stroke-dasharray: none;
    }
  }
  :where(.kit-nodegraph-wire-ghost) {
    fill: none;
    stroke: var(--_wire, var(--kit-color-accent));
    stroke-width: var(--kit-nodegraph-wire-weight);
    stroke-dasharray: 5 4;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }
  :where(.kit-nodegraph-wire-label) {
    padding: 0 var(--kit-space-100);
    background: var(--kit-color-surface-raised);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-mark);
    color: var(--kit-color-content);
    font-size: var(--kit-font-size-100);
    line-height: var(--kit-line-height-100);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
  }
  :where(.kit-nodegraph-wire-label)[data-stacked="true"] {
    --_gap: var(--kit-space-150);
    transform-origin: 50% calc(var(--_gap) * -1);
    translate: -50% var(--_gap);
  }
  :where(.kit-nodegraph-wire-warn) {
    display: grid;
    place-items: center;
    inline-size: 18px;
    block-size: 18px;
    pointer-events: auto;
    cursor: help;
  }
  :where(.kit-nodegraph-wire-warn-glyph) {
    display: grid;
    place-items: end center;
    inline-size: 100%;
    block-size: 100%;
    padding-block-end: 1px;
    background: var(--kit-color-warning-content);
    color: var(--kit-color-surface-raised);
    clip-path: polygon(50% 2%, 98% 96%, 2% 96%);
    font-size: var(--kit-font-size-100);
    font-weight: var(--kit-font-weight-bold);
    line-height: 1.2;
  }
  :where(.kit-nodegraph-wire-warn-text) {
    position: absolute;
    inset-block-start: calc(100% + var(--kit-space-100));
    inset-inline: -20rem;
    margin-inline: auto;
    inline-size: max-content;
    max-inline-size: 16rem;
    padding: var(--kit-space-050) var(--kit-space-150);
    background: var(--kit-color-warning-surface);
    border: var(--kit-border-width-hairline) solid var(--kit-color-warning-border);
    border-radius: var(--kit-radius-mark);
    box-shadow: var(--kit-elevation-1);
    color: var(--kit-color-warning-content);
    font-size: var(--kit-font-size-100);
    line-height: var(--kit-line-height-100);
    opacity: 0;
    pointer-events: none;
  }
  :where(.kit-nodegraph-wire-warn):hover > :where(.kit-nodegraph-wire-warn-text),
  :where(.kit-nodegraph-wire-warn)[data-open="true"] > :where(.kit-nodegraph-wire-warn-text) { opacity: 1; }
  :where(.kit-nodegraph-wire-end) {
    --_mark: 14px;
    --kit-nodegraph-screen-base: 14px;
    --kit-nodegraph-screen-floor: 9px;
    --_chart: var(--_wire, var(--kit-nodegraph-wire-ink));
    pointer-events: none;
    cursor: default;
  }
  :where(.kit-nodegraph-wire-end):dir(rtl) { translate: -50% -50%; }
  :where(.kit-nodegraph-wire-end) > :where(.kit-nodegraph-port-glyph) {
    transform: translateX(calc(var(--_mark) * -1.25));
  }
  :where(.kit-nodegraph-wire-handle) {
    display: grid;
    place-items: center;
    inline-size: var(--kit-nodegraph-hit-size, 24px);
    block-size: var(--kit-nodegraph-hit-size, 24px);
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
  }
  :where(.kit-nodegraph-wire-handle)::before {
    content: "";
    box-sizing: border-box;
    inline-size: 12px;
    block-size: 12px;
  }
  :where(.kit-nodegraph-wire-handle)[data-end="from"]::before {
    border: 2px solid var(--kit-color-accent);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-surface-raised);
  }
  :where(.kit-nodegraph-wire-handle)[data-end="to"]::before {
    inline-size: 10px;
    block-size: 10px;
    rotate: 45deg;
    border: 1.5px solid var(--kit-color-surface-raised);
    background: var(--kit-color-accent);
  }
  :where(.kit-nodegraph-wire-remove) {
    --_gap: var(--kit-space-200);
    position: absolute;
    transform-origin: 50% calc(100% + var(--_gap));
    translate: -50% calc(-100% - var(--_gap));
    pointer-events: auto;
    box-shadow: var(--kit-elevation-1);
  }
  :where(.kit-nodegraph-wire-bend) {
    display: grid;
    place-items: center;
    inline-size: var(--kit-nodegraph-hit-size, 24px);
    block-size: var(--kit-nodegraph-hit-size, 24px);
    opacity: 0;
    pointer-events: none;
    cursor: grab;
    touch-action: none;
  }
  :where(.kit-nodegraph-wire-bend)::before {
    content: "";
    box-sizing: border-box;
    inline-size: 9px;
    block-size: 9px;
    border: 2px solid var(--kit-color-accent);
    background: var(--kit-color-surface-raised);
  }
  :where(.kit-nodegraph-wire-bend)[data-show="true"] {
    opacity: 1;
    pointer-events: auto;
  }
  :where(.kit-nodegraph-wire-bend):focus-visible {
    opacity: 1;
    pointer-events: auto;
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: var(--kit-focus-offset);
    border-radius: var(--kit-radius-full);
    box-shadow: var(--kit-focus-halo);
  }
  :where(.kit-nodegraph-wire)[data-bending="true"] :where(.kit-nodegraph-wire-path) { stroke-dasharray: 6 4; }
  :where(.kit-nodegraph-wire-cut) {
    fill: none;
    stroke: var(--kit-color-danger-content);
    stroke-width: 2px;
    stroke-dasharray: 6 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  :where(.kit-nodegraph-wire)[data-cut="true"] :where(.kit-nodegraph-wire-path) {
    stroke: var(--kit-color-danger-content);
    stroke-dasharray: 3 5;
    opacity: 0.6;
  }
  :where(.kit-nodegraph[data-kit-nodegraph-cutting]) :where(.kit-nodegraph-minimap, .kit-nodegraph-tools) { pointer-events: none; }
  :where(.kit-nodegraph[data-kit-nodegraph-cutting]) :where(.kit-nodegraph-viewport) { cursor: crosshair; }
  :where(.kit-nodegraph-node-remove) {
    --_gap: var(--kit-space-150);
    position: absolute;
    transform-origin: calc(var(--_gap) * -1) calc(100% + var(--_gap));
    translate: var(--_gap) calc(-100% - var(--_gap));
    pointer-events: auto;
    box-shadow: var(--kit-elevation-1);
  }
  :where(.kit-nodegraph-wire-reason, .kit-nodegraph-wire-notice) {
    --_tone-surface: var(--kit-color-danger-surface);
    --_tone-border: var(--kit-color-danger-border);
    --_tone-ink: var(--kit-color-danger-content);
    background: var(--_tone-surface);
    border: var(--kit-border-width-hairline) solid var(--_tone-border);
    color: var(--_tone-ink);
  }
  :where(.kit-nodegraph-wire-reason, .kit-nodegraph-wire-notice)[data-tone="warning"] {
    --_tone-surface: var(--kit-color-warning-surface);
    --_tone-border: var(--kit-color-warning-border);
    --_tone-ink: var(--kit-color-warning-content);
  }
  :where(.kit-nodegraph-wire-reason, .kit-nodegraph-wire-notice)[data-tone="info"] {
    --_tone-surface: var(--kit-color-info-surface);
    --_tone-border: var(--kit-color-info-border);
    --_tone-ink: var(--kit-color-info-content);
  }
  :where(.kit-nodegraph-wire-reason) {
    --_gap: var(--kit-space-300);
    transform-origin: 50% calc(100% + var(--_gap));
    translate: -50% calc(-100% - var(--_gap));
    padding: var(--kit-space-050) var(--kit-space-150);
    border-radius: var(--kit-radius-mark);
    box-shadow: var(--kit-elevation-1);
    font-size: var(--kit-font-size-100);
    line-height: var(--kit-line-height-100);
    white-space: nowrap;
    pointer-events: none;
  }
  :where(.kit-nodegraph-wire-reason)[hidden] { display: none; }
  :where(.kit-nodegraph-wire-notice) {
    --_gap: var(--kit-space-400);
    transform-origin: calc(var(--_gap) * -1) 50%;
    translate: var(--_gap) -50%;
    display: grid;
    justify-items: start;
    gap: var(--kit-space-150);
    inline-size: max-content;
    max-inline-size: 18rem;
    padding: var(--kit-space-200) var(--kit-space-300);
    border-radius: var(--kit-radius-control);
    box-shadow: var(--kit-elevation-2);
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-200);
    pointer-events: auto;
  }
  :where(.kit-nodegraph-wire-notice-text) { margin: 0; }
  :where(.kit-nodegraph-wire-notice)[data-side="start"] { transform-origin: calc(100% + var(--_gap)) 50%; translate: calc(-100% - var(--_gap)) -50%; }
  :where(.kit-nodegraph-wire-notice)[data-side="end"] { transform-origin: calc(var(--_gap) * -1) 50%; translate: var(--_gap) -50%; }
  :where(.kit-nodegraph-wire-notice)[data-side="top"] { transform-origin: 50% calc(100% + var(--_gap)); translate: -50% calc(-100% - var(--_gap)); }
  :where(.kit-nodegraph-wire-notice)[data-side="bottom"] { transform-origin: 50% calc(var(--_gap) * -1); translate: -50% var(--_gap); }
  :where(.kit-nodegraph-wire-light) {
    fill: color-mix(in oklab, var(--kit-color-accent) 14%, transparent);
    stroke: var(--kit-color-accent);
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
  }
  :where(.kit-nodegraph-wire-light)[data-outcome="warn"] {
    fill: color-mix(in oklab, var(--kit-color-warning-content) 12%, transparent);
    stroke: var(--kit-color-warning-content);
    stroke-dasharray: 4 3;
  }
  :where(.kit-nodegraph-wire-light)[data-outcome="armed"] {
    fill: color-mix(in oklab, var(--kit-color-accent) 30%, transparent);
  }
  :where(.kit-nodegraph-wire-light)[data-outcome="snap"] {
    fill: none;
    stroke-width: 3px;
  }
  :where(.kit-nodegraph-wire-veil) {
    fill: color-mix(in oklab, var(--kit-color-surface-sunken) 62%, transparent);
    stroke: none;
  }
  :where(.kit-nodegraph[data-kit-nodegraph-wiring]) :where(.kit-nodegraph-minimap, .kit-nodegraph-tools) { pointer-events: none; }
  :where(.kit-nodegraph[data-kit-nodegraph-wiring]) :where(.kit-nodegraph-viewport) { cursor: crosshair; }
  @media (forced-colors: active) {
    :where(.kit-nodegraph-wire-path, .kit-nodegraph-wire-ghost) { stroke: CanvasText; }
    :where(.kit-nodegraph-wire-arrow) { fill: CanvasText; }
    :where(.kit-nodegraph-wire-hit):focus-visible,
    :where(.kit-nodegraph-wire)[data-selected="true"] :where(.kit-nodegraph-wire-hit) { stroke: Highlight; }
    :where(.kit-nodegraph-wire-light) { stroke: Highlight; fill: none; }
    :where(.kit-nodegraph-wire-cut) { stroke: Highlight; }
    :where(.kit-nodegraph-wire)[data-cut="true"] :where(.kit-nodegraph-wire-path) { stroke: GrayText; opacity: 1; }
    :where(.kit-nodegraph-wire-bend)::before { border-color: Highlight; background: Canvas; }
  }
}
@layer kit.components {
  :where(.kit-view-cube) {
    --kit-view-cube-size: 108px;
    --kit-view-cube-duration: var(--kit-duration-3);
    --kit-view-cube-face: var(--kit-color-surface-raised);
    --kit-view-cube-edge: color-mix(in srgb, var(--kit-color-surface-raised) 90%, var(--kit-color-content));
    --kit-view-cube-corner: color-mix(in srgb, var(--kit-color-surface-raised) 80%, var(--kit-color-content));
    --kit-view-cube-seam: color-mix(in srgb, var(--kit-color-content) 20%, transparent);
    display: grid;
    gap: var(--kit-space-stack);
    justify-items: start;
    min-inline-size: 0;
    isolation: isolate;
    color: var(--kit-color-content);
  }
  :where(.kit-view-cube-stage) {
    position: relative;
    inline-size: calc(var(--kit-view-cube-size) * 2.15);
    block-size: calc(var(--kit-view-cube-size) * 2.15);
    perspective: calc(var(--kit-view-cube-size) * 7);
    touch-action: none;
    cursor: grab;
    border-radius: var(--kit-radius-surface);
    background: var(--kit-color-surface-sunken);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
  }
  :where(.kit-view-cube[data-kit-view-cube-dragging] .kit-view-cube-stage) { cursor: grabbing; }
  :where(.kit-view-cube-cube) {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform-style: preserve-3d;
  }
  :where(.kit-view-cube[data-kit-view-cube-moving] .kit-view-cube-cube) {
    transition: transform var(--kit-view-cube-duration) var(--kit-easing-standard);
  }
  :where(.kit-view-cube-region) {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 0;
    block-size: 0;
    appearance: none;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    transform-style: preserve-3d;
    cursor: pointer;
    --kit-view-cube-tint: var(--kit-view-cube-face);
  }
  :where(.kit-view-cube-region[data-kind="edge"]) { --kit-view-cube-tint: var(--kit-view-cube-edge); }
  :where(.kit-view-cube-region[data-kind="corner"]) { --kit-view-cube-tint: var(--kit-view-cube-corner); }
  :where(.kit-view-cube-sub) {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 0;
    block-size: 0;
    transform-style: preserve-3d;
    transition: transform var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-view-cube-plane) {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    box-sizing: border-box;
    background: var(--kit-view-cube-tint);
    box-shadow: inset 0 0 0 var(--kit-border-width-hairline) var(--kit-view-cube-seam);
    transition: background-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-view-cube-plane[data-tone="top"]) {
    background: color-mix(in srgb, var(--kit-view-cube-tint) 86%, var(--kit-color-surface));
  }
  :where(.kit-view-cube-plane[data-tone="bottom"]) {
    background: color-mix(in srgb, var(--kit-view-cube-tint) 78%, var(--kit-color-content));
  }
  :where(.kit-view-cube-plane[data-tone="side"]) {
    background: color-mix(in srgb, var(--kit-view-cube-tint) 92%, var(--kit-color-content));
  }
  :where(.kit-view-cube-region:hover),
  :where(.kit-view-cube-region[data-kit-view-cube-hot]) { --kit-view-cube-tint: var(--kit-color-accent); }
  :where(.kit-view-cube-region:hover .kit-view-cube-sub),
  :where(.kit-view-cube-region[data-kit-view-cube-hot] .kit-view-cube-sub) {
    transform: scale3d(1.26, 1.26, 1.26);
  }
  :where(.kit-view-cube-region:active .kit-view-cube-sub) { transform: scale3d(1.14, 1.14, 1.14); }
  :where(.kit-view-cube[data-kit-view-cube-instant]) :where(.kit-view-cube-sub),
  :where(.kit-view-cube[data-kit-view-cube-instant]) :where(.kit-view-cube-plane),
  :where(.kit-view-cube[data-kit-view-cube-instant]) :where(.kit-view-cube-tip),
  :where(.kit-view-cube[data-kit-view-cube-instant]) :where(.kit-view-cube-control) {
    transition: none;
  }
  :where(.kit-view-cube-region[data-kit-view-cube-near] .kit-view-cube-plane) {
    box-shadow: inset 0 0 0 var(--kit-border-width-emphasis) var(--kit-color-accent);
  }
  :where(.kit-view-cube-region[aria-current="true"] .kit-view-cube-plane) {
    background: color-mix(in srgb, var(--kit-view-cube-tint) 84%, var(--kit-color-accent));
    box-shadow: inset 0 0 0 var(--kit-border-width-emphasis) var(--kit-color-accent);
  }
  :where(.kit-view-cube-region):focus-visible {
    outline: none;
    box-shadow: none;
  }
  :where(.kit-view-cube-region):focus-visible .kit-view-cube-plane {
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: calc(-1 * var(--kit-focus-width));
  }
  :where(.kit-view-cube-labels) {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 0;
    block-size: 0;
    transform-style: preserve-3d;
    pointer-events: none;
  }
  :where(.kit-view-cube-label) {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    pointer-events: none;
    backface-visibility: hidden;
  }
  :where(.kit-view-cube-label) > span {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    display: block;
    white-space: nowrap;
    transform-origin: 50% 50%;
    font-weight: var(--kit-font-weight-medium);
    text-transform: uppercase;
    color: var(--kit-color-content-muted);
  }
  :where(.kit-view-cube-tip) {
    position: absolute;
    inset-block-end: var(--kit-space-200);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    margin: 0;
    max-inline-size: calc(100% - var(--kit-space-400));
    padding: var(--kit-space-100) var(--kit-space-300);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-content);
    color: var(--kit-color-surface);
    font-size: var(--kit-font-size-100);
    font-weight: var(--kit-font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-view-cube-tip[data-kit-view-cube-shown]) { opacity: 1; }
  :where(.kit-view-cube-toolbar) {
    display: flex;
    gap: var(--kit-space-100);
  }
  :where(.kit-view-cube-control) {
    display: inline-grid;
    place-items: center;
    inline-size: var(--kit-control-height-sm);
    block-size: var(--kit-control-height-sm);
    padding: 0;
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-control);
    background: var(--kit-color-surface-raised);
    color: var(--kit-color-content);
    cursor: pointer;
    transition: background-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-view-cube-control:hover) { background: var(--kit-color-surface-hover); }
  :where(.kit-view-cube-control:active) { background: var(--kit-color-surface-pressed); }
  :where(.kit-icon[data-kit-view-cube-mirrored]) { transform: scaleX(-1); }
  :where(.kit-view-cube-triad),
  :where(.kit-view-cube-compass-wrap) {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 0;
    block-size: 0;
    transform-style: preserve-3d;
    pointer-events: none;
  }
  :where(.kit-view-cube-axis) {
    position: absolute;
    block-size: 3px;
    border-radius: var(--kit-radius-full);
    transform-origin: 0 50%;
  }
  :where(.kit-view-cube-axis-cap) {
    position: absolute;
    display: grid;
    place-items: center;
    inline-size: 15px;
    block-size: 15px;
    margin-inline-start: -7.5px;
    margin-block-start: -7.5px;
    border-radius: var(--kit-radius-full);
    font-size: var(--kit-font-size-100);
    font-weight: var(--kit-font-weight-medium);
    color: var(--kit-color-on-accent);
  }
  :where(.kit-view-cube-axis[data-axis="X"]),
  :where(.kit-view-cube-axis-cap[data-axis="X"]) { background: var(--kit-color-chart-1); }
  :where(.kit-view-cube-axis[data-axis="Y"]),
  :where(.kit-view-cube-axis-cap[data-axis="Y"]) { background: var(--kit-color-chart-2); }
  :where(.kit-view-cube-axis[data-axis="Z"]),
  :where(.kit-view-cube-axis-cap[data-axis="Z"]) { background: var(--kit-color-chart-3); }
  :where(.kit-view-cube-compass) {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 0;
    block-size: 0;
    transform-style: preserve-3d;
  }
  :where(.kit-view-cube-compass) > span {
    position: absolute;
    display: block;
    inline-size: 14px;
    margin-inline-start: -7px;
    margin-block-start: -6px;
    text-align: center;
    font-size: var(--kit-font-size-100);
    font-weight: var(--kit-font-weight-medium);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-view-cube-compass) > span[data-point="N"] { color: var(--kit-color-content-accent); }
  :where(.kit-view-cube-readout) {
    margin: 0;
    font-family: var(--kit-font-mono);
    font-size: var(--kit-font-size-200);
    font-variant-numeric: tabular-nums;
    color: var(--kit-color-content-muted);
  }
  :where(.kit-view-cube-picker) {
    display: grid;
    gap: var(--kit-space-stack-tight);
    font-size: var(--kit-font-size-300);
  }
  @media (forced-colors: active) {
    :where(.kit-view-cube-plane) {
      background: Canvas;
      box-shadow: inset 0 0 0 1px CanvasText;
      forced-color-adjust: none;
    }
    :where(.kit-view-cube-region[data-kit-view-cube-near] .kit-view-cube-plane),
    :where(.kit-view-cube-region[aria-current="true"] .kit-view-cube-plane) {
      background: Highlight;
      box-shadow: inset 0 0 0 2px HighlightText;
    }
    :where(.kit-view-cube-label) > span { color: CanvasText; }
    :where(.kit-view-cube-tip) { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  }
}
@layer kit.components {
  :where(.kit-editor) {
    gap: var(--kit-space-stack-tight);
  }
  :where(.kit-editor-bar) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kit-space-100);
    margin: 0;
    container-type: inline-size;
    container-name: kit-editor-bar;
  }
  :where(.kit-editor-marker) {
    font-family: var(--kit-font-mono);
    font-size: var(--kit-font-size-200);
  }
  :where(.kit-editor-marker) > :where(.kit-icon) { --_size: var(--kit-icon-size-sm); }
  .kit-editor-bar .kit-editor-marker {
    padding-inline: var(--kit-space-200);
    gap: var(--kit-space-100);
  }
  :where(.kit-editor-marker-label) { white-space: nowrap; }
  @container kit-editor-bar (width < 30rem) {
    .kit-editor-bar .kit-editor-marker {
      padding-inline: 0;
      inline-size: var(--kit-control-height-sm);
      flex: none;
    }
    :where(.kit-editor-marker-label) {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      margin: -1px;
      padding: 0;
      border: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }
  :where(.kit-editor-bar) > :where(.kit-editor-bar-separator) {
    inline-size: var(--kit-border-width-hairline);
    align-self: stretch;
    margin-block: 0;
    margin-inline: var(--kit-space-050);
    background: var(--kit-color-border);
    border: 0;
  }
  :where(.kit-editor-input) {
    font-family: var(--kit-font-mono);
    font-size: var(--kit-control-font-size-field);
    line-height: var(--kit-line-height-400);
    tab-size: 2;
  }
  :where(.kit-editor)[data-height="body"] :where(.kit-editor-input) { min-block-size: 12rem; }
  :where(.kit-editor)[data-height="note"] :where(.kit-editor-input) { min-block-size: calc(var(--kit-control-height-md) * 2); }
  :where(.kit-editor-preview) {
    min-block-size: calc(var(--kit-control-height-md) * 2);
    padding: var(--kit-space-200) var(--kit-control-padding-x-md);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-control);
    background: var(--kit-color-surface-raised);
    color: var(--kit-color-content);
  }
  :where(.kit-editor-preview):empty::before {
    content: attr(data-kit-empty);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-editor-foot) {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kit-space-inline);
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-200);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-editor)[data-length="near"] :where(.kit-editor-count) { color: var(--kit-color-warning-content); }
  :where(.kit-editor)[data-length="over"] :where(.kit-editor-count) { color: var(--kit-color-danger-content); }
  :where(.kit-editor-shortcut) {
    font-family: var(--kit-font-mono);
    font-size: var(--kit-font-size-200);
    color: var(--kit-color-content-muted);
  }
}
@layer kit.components {
  :where(.kit-code-editor) {
    gap: var(--kit-space-stack-tight);
  }
  :where(.kit-code-stack) {
    --_code-font: var(--kit-font-mono);
    --_code-size: var(--kit-control-font-size-field);
    --_code-leading: var(--kit-line-height-400);
    --_code-pad-block: var(--kit-space-200);
    --_code-pad-inline: var(--kit-control-padding-x-md);
    --_code-edge: var(--kit-border-width-hairline);
    --_code-tab: 2;
    position: relative;
    display: grid;
    isolation: isolate;
  }
  :where(.kit-code-ink),
  :where(.kit-code-input) {
    grid-area: 1 / 1;
    margin: 0;
    font-family: var(--_code-font);
    font-size: var(--_code-size);
    line-height: var(--_code-leading);
    letter-spacing: 0;
    tab-size: var(--_code-tab);
    padding: var(--_code-pad-block) var(--_code-pad-inline);
    border: var(--_code-edge) solid transparent;
    border-radius: var(--kit-radius-control);
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
    box-sizing: border-box;
  }
  :where(.kit-code-ink) {
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    color: var(--kit-color-content);
    background: var(--kit-color-surface-raised);
    border-color: var(--kit-color-border-interactive);
    box-shadow: var(--kit-elevation-inset);
  }
  :where(.kit-code-ink) > code {
    all: unset;
    display: block;
    font: inherit;
    letter-spacing: inherit;
    tab-size: inherit;
    white-space: inherit;
    will-change: transform;
  }
  :where(.kit-code-input) {
    z-index: 1;
    position: relative;
    color: transparent;
    background: transparent;
    caret-color: var(--kit-color-content);
    border-color: transparent;
    box-shadow: none;
    resize: vertical;
    min-block-size: calc(var(--kit-control-height-md) * 3);
  }
  :where(.kit-code-input)::selection { color: transparent; }
  :where(.kit-code-stack):has(:where(.kit-code-input):focus-visible) :where(.kit-code-ink) {
    box-shadow: var(--kit-elevation-inset), var(--kit-focus-halo);
    border-color: var(--kit-color-focus);
  }
  @media (hover: hover) {
    :where(.kit-code-stack):has(:where(.kit-code-input):hover:not(:disabled, [readonly])) :where(.kit-code-ink) {
      border-color: var(--kit-color-border-strong);
    }
  }
  :where(.kit-code-stack):has(:where(.kit-code-input)[readonly]) :where(.kit-code-ink) {
    background: var(--kit-color-surface);
    box-shadow: none;
    border-color: var(--kit-color-border);
  }
  :where(.kit-code-editor)[data-wrap="soft"] :where(.kit-code-ink),
  :where(.kit-code-editor)[data-wrap="soft"] :where(.kit-code-input) {
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }
  :where(.kit-token-keyword)  { color: var(--kit-color-syntax-keyword); }
  :where(.kit-token-entity)   { color: var(--kit-color-syntax-entity); }
  :where(.kit-token-function) { color: var(--kit-color-syntax-function); }
  :where(.kit-token-param)    { color: var(--kit-color-syntax-param); }
  :where(.kit-token-number)   { color: var(--kit-color-syntax-number); }
  :where(.kit-token-string)   { color: var(--kit-color-syntax-string); }
  :where(.kit-token-comment)  { color: var(--kit-color-syntax-comment); }
  @media (forced-colors: active) {
    :where([class*="kit-token-"]) { color: CanvasText; }
    :where(.kit-code-input) { caret-color: CanvasText; }
  }
  :where(.kit-code-foot) {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kit-space-inline);
    font-family: var(--kit-font-mono);
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-200);
    color: var(--kit-color-content-muted);
  }
}
@layer kit.components {
  @property --kit-timeline-start {
    syntax: "<number>";
    initial-value: 0;
    inherits: false;
  }
  @property --kit-timeline-span {
    syntax: "<number>";
    initial-value: 0;
    inherits: false;
  }
  @property --kit-timeline-value {
    syntax: "<number>";
    initial-value: 0;
    inherits: false;
  }
  @property --kit-timeline-position {
    syntax: "<number>";
    initial-value: 0;
    inherits: true;
  }
  :where(.kit-timeline) {
    --_lane: var(--kit-space-500);
    --_rule: var(--kit-border-width-hairline);
    display: grid;
    gap: var(--kit-space-200);
    color: var(--kit-color-content);
    touch-action: pan-y;
  }
  :where(.kit-timeline-scale) {
    position: relative;
    block-size: var(--kit-space-600);
    border-block-end: var(--_rule) solid var(--kit-color-border);
    font-size: var(--kit-font-size-100);
    color: var(--kit-color-content-muted);
    font-variant-numeric: tabular-nums;
    margin-block-end: var(--kit-space-050);
    overflow: hidden;
  }
  :where(.kit-timeline-scale):has(> .kit-timeline-flag) { block-size: var(--kit-space-800); }
  :where(.kit-timeline-tick) {
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--kit-timeline-start) * 100%);
    padding-inline-start: var(--kit-space-100);
    border-inline-start: var(--_rule) solid var(--kit-color-border);
    display: flex;
    align-items: flex-end;
    white-space: nowrap;
    pointer-events: none;
  }
  :where(.kit-timeline-tick)[data-tick="minor"] {
    inset-block: auto 0;
    block-size: var(--kit-space-150);
    padding-inline: 0;
  }
  :where(.kit-timeline-tick)[data-tick="end"] {
    inset-inline: auto 0;
    border-inline-start: none;
    border-inline-end: var(--_rule) solid var(--kit-color-border);
    padding-inline: 0 var(--kit-space-100);
  }
  :where(.kit-timeline-flag) {
    --_pill: var(--kit-timeline-flag-size, 3.25rem);
    position: absolute;
    inset-block-start: 0;
    inline-size: var(--_pill);
    inset-inline-start: clamp(
      calc(var(--_pill) / 2),
      calc(var(--kit-timeline-position) * 100%),
      calc(100% - var(--_pill) / 2)
    );
    translate: -50% 0;
    display: grid;
    place-items: center;
    block-size: var(--kit-space-500);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-danger-fill);
    color: var(--kit-color-on-danger);
    font-size: var(--kit-font-size-100);
    font-variant-numeric: tabular-nums;
    line-height: var(--kit-line-height-none);
    pointer-events: none;
  }
  :where(.kit-timeline-window) {
    position: relative;
    display: grid;
    gap: var(--kit-space-100);
    min-block-size: var(--_lane);
    isolation: isolate;
  }
  :where(.kit-timeline-lane) {
    position: relative;
    block-size: var(--kit-timeline-lane-size, var(--_lane));
    background: var(--kit-color-surface-sunken);
    border-radius: var(--kit-radius-mark);
  }
  :where(.kit-timeline-row) {
    display: grid;
    grid-template-columns: minmax(6rem, 12rem) 1fr;
    gap: var(--kit-space-inline);
    align-items: center;
  }
  :where(.kit-timeline-row, .kit-timeline-track) > :where(.kit-timeline-label) {
    font-size: var(--kit-font-size-200);
    font-weight: var(--kit-font-weight-medium);
    color: var(--kit-color-content-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-inline-size: 0;
    padding-inline-end: var(--kit-space-100);
  }
  :where(.kit-timeline-tracks) {
    display: grid;
    grid-template-columns: var(--kit-timeline-labels, clamp(4.5rem, 20%, 9rem)) minmax(0, 1fr);
    column-gap: var(--kit-space-inline);
    row-gap: var(--kit-space-100);
    align-items: center;
  }
  :where(.kit-timeline-tracks) > :where(.kit-timeline-track) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
  }
  :where(.kit-timeline-tracks) > :where(.kit-timeline-track)[hidden] { display: none; }
  :where(.kit-timeline-tracks) > :where(.kit-timeline-scale) { grid-column: 2; }
  :where(.kit-timeline-lane)[data-empty] {
    background: none;
    outline: var(--_rule) dashed var(--kit-color-border);
    outline-offset: calc(-1 * var(--_rule));
  }
  :where(.kit-timeline-mark) {
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--kit-timeline-start) * 100%);
    inline-size: calc(var(--kit-timeline-span) * 100%);
    min-inline-size: var(--kit-space-300);
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0 var(--kit-space-100);
    display: flex;
    align-items: center;
    border: var(--_rule) solid var(--kit-color-accent);
    border-radius: var(--kit-radius-100);
    background: var(--kit-color-accent-tint);
    color: var(--kit-color-content-accent);
    font: inherit;
    font-size: var(--kit-font-size-100);
    line-height: 1;
    text-align: start;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
      background-color var(--kit-duration-1) var(--kit-easing-standard),
      border-color var(--kit-duration-1) var(--kit-easing-standard),
      color var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-timeline-mark):hover {
    background: var(--kit-color-accent);
    border-color: var(--kit-color-accent);
    color: var(--kit-color-on-accent);
  }
  :where(.kit-timeline-mark):active {
    background: var(--kit-color-accent-hover);
    border-color: var(--kit-color-accent-hover);
  }
  :where(.kit-timeline-mark) > :where(time, span) {
    display: block;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :where(.kit-timeline-mark)[data-shape="bar"] {
    container: kit-timeline-mark / inline-size;
  }
  @container kit-timeline-mark (max-width: 3rem) {
    :where(.kit-timeline-mark) > :where(time, span) { opacity: 0; }
  }
  :where(.kit-timeline-mark)::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 50%;
    block-size: max(100%, var(--kit-space-600));
    translate: 0 -50%;
  }
  :where(.kit-timeline-mark)[data-shape="point"] {
    inline-size: var(--kit-space-300);
    min-inline-size: var(--kit-space-300);
    aspect-ratio: 1;
    inset-block: 50% auto;
    padding: 0;
    border-radius: calc(var(--kit-radius-mark) / 2);
    background: var(--kit-color-accent);
    rotate: 45deg;
    translate: -50% -50%;
  }
  :where(.kit-timeline-mark)[data-shape="point"]::after {
    rotate: -45deg;
    inline-size: var(--kit-space-600);
    inset-inline-start: 50%;
    translate: -50% -50%;
  }
  :where(.kit-timeline-mark)[data-shape="column"] {
    inset-block: auto 0;
    block-size: max(var(--kit-space-050), calc(var(--kit-timeline-value) * 100%));
    border-radius: var(--kit-radius-mark) var(--kit-radius-mark) 0 0;
    background: var(--kit-color-accent);
  }
  :where(.kit-timeline-window)[data-layout="grid"] {
    grid-auto-flow: row;
    gap: var(--kit-space-050);
  }
  :where(.kit-timeline-cells) {
    display: grid;
    grid-template-columns: repeat(var(--kit-timeline-cells, 7), minmax(0, 1fr));
    gap: var(--kit-space-050);
  }
  :where(.kit-timeline-mark)[data-shape="cell"] {
    position: static;
    inline-size: auto;
    min-inline-size: 0;
    aspect-ratio: 1;
    padding: 0;
    border-radius: var(--kit-radius-mark);
    background: var(--kit-color-chart-seq-1);
    border-color: var(--kit-color-border);
  }
  :where(.kit-timeline-mark)[data-shape="cell"]::after { inset: 0; }
  :where(.kit-timeline-now) {
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--kit-timeline-position) * 100%);
    inline-size: max(2px, var(--kit-border-width-emphasis));
    margin-inline-start: -1px;
    background: var(--kit-color-danger-fill);
    pointer-events: none;
    z-index: 1;
  }
  :where(.kit-timeline-scale):has(> .kit-timeline-flag) > :where(.kit-timeline-now) {
    inset-block-start: var(--kit-space-500);
  }
  :where(.kit-timeline-track) :where(.kit-timeline-now) {
    inset-block: calc(var(--kit-space-100) / -2);
  }
  :where(.kit-transport) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--kit-space-inline);
    align-items: center;
    container: kit-transport / inline-size;
  }
  @container kit-transport (max-width: 26rem) {
    :where(.kit-transport:not(.kit-timeline-panel)) > :where(.kit-transport-controls) { grid-column: 1; grid-row: 1; }
    :where(.kit-transport:not(.kit-timeline-panel)) > :where(.kit-transport-readout) { grid-column: 2 / -1; grid-row: 1; justify-self: end; }
    :where(.kit-transport:not(.kit-timeline-panel)) > :where(.kit-transport-window, .kit-transport-seek) { grid-column: 1 / -1; grid-row: 2; }
  }
  :where(.kit-transport-controls) {
    display: flex;
    align-items: center;
    gap: 0;
  }
  :where(.kit-transport-controls) > :where(.kit-button) + :where(.kit-button) {
    margin-inline-start: calc(-1 * var(--kit-border-width-hairline));
  }
  :where(.kit-transport-controls) > :where(.kit-button):not(:first-child) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }
  :where(.kit-transport-controls) > :where(.kit-button):not(:last-child) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }
  :where(.kit-transport-controls) > :where(.kit-button):hover,
  :where(.kit-transport-controls) > :where(.kit-button):focus-visible,
  :where(.kit-transport-controls) > :where(.kit-button)[aria-pressed="true"] {
    position: relative;
    z-index: 1;
  }
  :where(.kit-transport-controls) > :where(.kit-button)[data-transport="play"] {
    inline-size: calc(var(--kit-control-height-sm) + var(--kit-space-300));
  }
  :where(.kit-transport-readout) {
    margin: 0;
    font-size: var(--kit-font-size-200);
    font-variant-numeric: tabular-nums;
    color: var(--kit-color-content-muted);
    white-space: nowrap;
    display: grid;
    grid-template-areas: "now";
    justify-items: start;
  }
  :where(.kit-transport-readout) > * { grid-area: now; }
  :where(.kit-transport-sizer) {
    visibility: hidden;
    pointer-events: none;
  }
  :where(.kit-transport-seek) {
    inline-size: 100%;
    min-inline-size: 0;
    margin: 0;
    touch-action: pan-y;
  }
  :where(.kit-transport-window) {
    position: relative;
    display: grid;
    min-inline-size: 0;
  }
  :where(.kit-transport-window) > :where(.kit-timeline-marks) {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: var(--kit-space-150);
    pointer-events: none;
  }
  :where(.kit-timeline-marks) > :where(.kit-timeline-chapter) {
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--kit-timeline-start) * 100%);
    inline-size: max(2px, calc(var(--kit-timeline-span) * 100%));
    background: var(--kit-color-border-strong);
    border-radius: var(--kit-radius-full);
  }
  :where(.kit-transport-window) > :where(.kit-transport-buffered) {
    position: absolute;
    inset-block-start: 50%;
    translate: 0 -50%;
    inset-inline-start: 0;
    inline-size: calc(var(--kit-transport-buffered, 0) * 100%);
    block-size: var(--kit-space-100);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-border);
    pointer-events: none;
  }
  :where(.kit-transport)[data-state~="scrubbing"] :where(.kit-transport-readout) {
    color: var(--kit-color-content-accent);
  }
  :where(.kit-transport) [data-when] { display: none; }
  :where(.kit-transport)[data-state~="playing"] [data-when="playing"] { display: contents; }
  :where(.kit-transport):not([data-state~="playing"]) [data-when="paused"] { display: contents; }
  :where(.kit-timeline-panel) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-surface);
    background: var(--kit-color-surface);
    color: var(--kit-color-content);
  }
  :where(.kit-timeline-panel) > :where(.kit-timeline-head) {
    display: flex;
    align-items: center;
    gap: var(--kit-space-inline);
    flex-wrap: wrap;
    padding: var(--kit-space-150) var(--kit-space-inset-tight);
    border-block-end: var(--kit-border-width-hairline) solid var(--kit-color-border);
  }
  :where(.kit-timeline-title) {
    margin: 0;
    font-size: var(--kit-font-size-300);
    font-weight: var(--kit-font-weight-medium);
    line-height: var(--kit-line-height-none);
    color: var(--kit-color-content);
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :where(.kit-timeline-meta) {
    margin: 0;
    font-size: var(--kit-font-size-100);
    font-variant-numeric: tabular-nums;
    color: var(--kit-color-content-muted);
    white-space: nowrap;
  }
  :where(.kit-timeline-head) > :where(.kit-timeline-spacer) { flex: 1 1 var(--kit-space-600); }
  :where(.kit-timeline-actions) {
    display: flex;
    align-items: center;
    gap: var(--kit-space-300);
    min-inline-size: 0;
  }
  @container kit-transport (max-width: 30rem) {
    :where(.kit-timeline-panel) :where(.kit-timeline-meta) { display: none; }
    :where(.kit-timeline-panel) :where(.kit-timeline-actions) {
      order: 1;
      flex-basis: 100%;
      justify-content: space-between;
    }
  }
  :where(.kit-timeline-panel) > :where(.kit-timeline-body) {
    display: grid;
    gap: var(--kit-space-200);
    padding: var(--kit-space-inset-tight);
    min-inline-size: 0;
  }
  :where(.kit-timeline-body)[hidden] { display: none; }
  :where(.kit-timeline-body) > :where(.kit-transport-window) {
    display: grid;
    grid-template-columns: var(--kit-timeline-labels, clamp(4.5rem, 20%, 9rem)) minmax(0, 1fr);
    column-gap: var(--kit-space-inline);
    align-items: center;
  }
  :where(.kit-timeline-body) > :where(.kit-transport-window) > * { grid-column: 2; }
  :where(.kit-timeline-body) > :where(.kit-transport-window)[data-gutter="none"] {
    grid-template-columns: minmax(0, 1fr);
  }
  :where(.kit-timeline-body) > :where(.kit-transport-window)[data-gutter="none"] > * { grid-column: 1; }
  :where(.kit-timeline-chevron) > :where(.kit-icon) {
    transition: rotate var(--kit-duration-2) var(--kit-easing-standard);
  }
  :where(.kit-timeline-chevron)[aria-expanded="false"] > :where(.kit-icon) { rotate: -90deg; }
  :where(.kit-transport-readout) :where([data-transport="now"]) {
    color: var(--kit-color-content);
    font-weight: var(--kit-font-weight-medium);
  }
  :where(.kit-timeline-panel)[data-state~="scrubbing"] :where([data-transport="now"]) {
    color: var(--kit-color-content-accent);
  }
}
@layer kit.components {
  :where(.kit-figure) {
    display: grid;
    gap: var(--kit-space-200);
    margin: 0;
    min-inline-size: 0;
  }
  :where(.kit-figure) > :where(img, video, svg, canvas, picture > img) {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
    border-radius: var(--kit-radius-surface);
  }
  :where(.kit-figure)[data-ratio] > :where(img, video) {
    aspect-ratio: var(--kit-media-ratio, 16 / 9);
    object-fit: cover;
    inline-size: 100%;
  }
  :where(.kit-figure) > :where(figcaption), :where(.kit-figure-caption) {
    color: var(--kit-color-content-muted);
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
  }
  :where(.kit-figure)[data-align="center"] { justify-items: center; text-align: center; }
  :where(.kit-figure)[data-align="end"] { justify-items: end; text-align: end; }
  :where(.kit-figure)[data-align="full"] > :where(img, video) { inline-size: 100%; }
  :where(.kit-figure-grid) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--kit-width-sidebar)), 1fr));
    gap: var(--kit-space-stack);
  }
  :where(.kit-media), :where(.kit-figure) > :where(video, audio) {
    display: block;
    inline-size: 100%;
    border-radius: var(--kit-radius-surface);
  }
  :where(video.kit-media), :where(.kit-figure) > :where(video) { background: var(--kit-color-surface-sunken); }
}
@layer kit.components {
  :where(video) {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
    border-radius: var(--kit-radius-surface);
    background: var(--kit-color-surface-sunken);
    overflow: hidden;
  }
  :where(audio) {
    display: block;
    inline-size: 100%;
    border-radius: var(--kit-radius-control);
    background: var(--kit-color-surface-sunken);
  }
  :where(video) { object-fit: contain; }
  :where(video)[data-kit-media="cover"] { object-fit: cover; }
  :where(video):focus-visible,
  :where(audio):focus-visible {
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: var(--kit-focus-offset);
    box-shadow: var(--kit-focus-halo);
  }
  :where(video)::cue {
    background: var(--kit-color-scrim);
    font-family: var(--kit-font-sans);
    line-height: var(--kit-line-height-300);
  }
  :where(video)::-webkit-media-controls-panel {
    background-image: linear-gradient(
      to top,
      color-mix(in oklab, var(--kit-color-accent) 20%, var(--kit-color-scrim)) 0,
      color-mix(in oklab, var(--kit-color-accent) 12%, var(--kit-color-scrim)) 2.5rem,
      transparent 4rem
    );
  }
  :where(video)::-webkit-media-controls-current-time-display,
  :where(video)::-webkit-media-controls-time-remaining-display {
    font-family: var(--kit-font-mono);
    font-variant-numeric: tabular-nums;
  }
}
@layer kit.components {
  @property --kit-xy-x {
    syntax: "<number>";
    initial-value: 0;
    inherits: true;
  }
  @property --kit-xy-y {
    syntax: "<number>";
    initial-value: 0;
    inherits: true;
  }
  @property --kit-xy-cells {
    syntax: "<integer>";
    initial-value: 0;
    inherits: true;
  }
  :where(.kit-xy-pad) {
    --kit-xy-ratio: 1;
    --kit-xy-size: 16rem;
    --_thumb: var(--kit-space-500);
    display: grid;
    justify-items: start;
    gap: var(--kit-space-150);
    inline-size: 100%;
  }
  :where(.kit-xy-pad-area) {
    --_to: to right;
    position: relative;
    inline-size: 100%;
    max-inline-size: var(--kit-xy-size);
    aspect-ratio: var(--kit-xy-ratio);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-control);
    background: var(--kit-color-surface-sunken);
    box-shadow: var(--kit-elevation-inset);
    cursor: crosshair;
    touch-action: none;
  }
  :where(.kit-xy-pad-area):dir(rtl) { --_to: to left; }
  :where(.kit-xy-pad-area):has(:focus-visible) {
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: var(--kit-focus-offset);
    box-shadow: var(--kit-elevation-inset), var(--kit-focus-halo);
  }
  :where(.kit-xy-pad-area)[data-dragging] { cursor: grabbing; }
  :where(.kit-xy-pad)[data-dragging] :where(.kit-xy-pad-area) { cursor: grabbing; }
  :where(.kit-xy-pad-grid) {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image:
      repeating-linear-gradient(var(--_to),
        var(--kit-color-border) 0 var(--kit-border-width-hairline),
        transparent var(--kit-border-width-hairline) calc(100% / var(--kit-xy-cells))),
      repeating-linear-gradient(to bottom,
        var(--kit-color-border) 0 var(--kit-border-width-hairline),
        transparent var(--kit-border-width-hairline) calc(100% / var(--kit-xy-cells)));
  }
  :where(.kit-xy-pad-crosshair) {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
  }
  :where(.kit-xy-pad-crosshair)::before,
  :where(.kit-xy-pad-crosshair)::after {
    content: "";
    position: absolute;
    background: var(--kit-color-border-strong);
    opacity: 0.55;
  }
  :where(.kit-xy-pad-crosshair)::before {
    inset-block: 0;
    inset-inline-start: calc(var(--kit-xy-x) * 100%);
    inline-size: var(--kit-border-width-hairline);
  }
  :where(.kit-xy-pad-crosshair)::after {
    inset-inline: 0;
    inset-block-start: calc(var(--kit-xy-y) * 100%);
    block-size: var(--kit-border-width-hairline);
  }
  :where(.kit-xy-pad-thumb) {
    position: absolute;
    inset-inline-start: calc(var(--kit-xy-x) * 100%);
    inset-block-start: calc(var(--kit-xy-y) * 100%);
    margin-inline-start: calc(var(--_thumb) / -2);
    margin-block-start: calc(var(--_thumb) / -2);
    inline-size: var(--_thumb);
    block-size: var(--_thumb);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border-interactive);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-accent);
    box-shadow: var(--kit-elevation-cap);
    pointer-events: none;
    transition: scale var(--kit-duration-1) var(--kit-easing-standard),
                background-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  @media (hover: hover) {
    :where(.kit-xy-pad):not([data-disabled]) :where(.kit-xy-pad-area):hover > :where(.kit-xy-pad-thumb) {
      background: var(--kit-color-accent-hover);
    }
  }
  :where(.kit-xy-pad)[data-dragging] :where(.kit-xy-pad-thumb) { scale: 1.15; }
  :where(.kit-xy-pad-readout) {
    font-size: var(--kit-control-font-size-field);
    font-variant-numeric: tabular-nums;
    color: var(--kit-color-content-muted);
    white-space: nowrap;
  }
  :where(.kit-xy-pad-readout)[data-when="active"] {
    opacity: 0;
    transition: opacity var(--kit-duration-1) var(--kit-easing-standard);
  }
  :where(.kit-xy-pad):is([data-dragging], :hover, :focus-within) :where(.kit-xy-pad-readout)[data-when="active"] { opacity: 1; }
  :where(.kit-xy-pad) > :where(input[type="range"].kit-xy-pad-axis) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
  }
  :where(.kit-xy-pad)[data-disabled] :where(.kit-xy-pad-area) { cursor: not-allowed; }
  :where(.kit-xy-pad)[data-disabled] :where(.kit-xy-pad-thumb) {
    background: var(--kit-color-surface-sunken);
    border-color: var(--kit-color-border);
    box-shadow: none;
  }
  :where(.kit-xy-pad)[data-disabled] :where(.kit-xy-pad-readout) { color: var(--kit-color-content-disabled); }
  :where(.kit-xy-pad)[data-readonly] :where(.kit-xy-pad-area) { cursor: default; }
  :where(.kit-xy-pad) :where(.kit-inspector) {
    inline-size: 100%;
    max-inline-size: var(--kit-xy-size);
    grid-template-columns: 1fr minmax(0, auto);
    gap: var(--kit-space-150) var(--kit-space-200);
  }
  :where(.kit-xy-pad) :where(.kit-inspector) > :where(.kit-field)[data-compact] > :where(.kit-field-label) {
    font-size: var(--kit-font-size-200);
    color: var(--kit-color-content-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  :where(.kit-xy-pad) :where(.kit-inspector) :where(select) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }
  @media (forced-colors: active) {
    :where(.kit-xy-pad-area) { background: Canvas; border-color: CanvasText; }
    :where(.kit-xy-pad-thumb) { background: Highlight; border-color: CanvasText; }
    :where(.kit-xy-pad)[data-disabled] :where(.kit-xy-pad-thumb) { background: GrayText; border-color: GrayText; }
    :where(.kit-xy-pad-crosshair)::before,
    :where(.kit-xy-pad-crosshair)::after { background: CanvasText; opacity: 1; }
  }
}
@layer kit.components {
  :where(.kit-easing) {
    --_dot: var(--kit-space-400);
    --_rail: var(--kit-space-150);
    display: grid;
    gap: var(--kit-space-stack);
    color: var(--kit-color-content);
  }
  :where(.kit-easing-plot) {
    inline-size: 100%;
    max-inline-size: var(--kit-easing-size, 15rem);
    aspect-ratio: var(--kit-easing-ratio, 0.6667);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-control);
    background: var(--kit-color-surface-sunken);
    box-shadow: var(--kit-elevation-inset);
    touch-action: none;
    cursor: crosshair;
  }
  :where(.kit-easing-plot) > svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }
  :where(.kit-easing-plot) :is(path, line, rect, circle) { vector-effect: non-scaling-stroke; }
  :where(.kit-easing-unit) {
    fill: var(--kit-color-surface);
    stroke: var(--kit-color-border);
    stroke-width: 1px;
  }
  :where(.kit-easing-guides) line {
    stroke: var(--kit-color-border);
    stroke-width: 1px;
    stroke-dasharray: 2 3;
  }
  :where(.kit-easing-arm) {
    stroke: var(--kit-color-border-strong);
    stroke-width: 1px;
  }
  :where(.kit-easing-curve) {
    fill: none;
    stroke: var(--kit-color-accent);
    stroke-width: 2px;
    stroke-linecap: round;
  }
  :where(.kit-easing-handle) {
    fill: var(--kit-color-surface-raised);
    stroke: var(--kit-color-accent);
    stroke-width: 2px;
  }
  @media (hover: hover) {
    :where(.kit-easing-plot):hover :where(.kit-easing-handle) { fill: var(--kit-color-accent-tint); }
  }
  :where(.kit-easing):has(:focus-visible) :where(.kit-easing-plot) {
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: var(--kit-focus-offset);
  }
  :where(.kit-easing)[data-dragging] :where(.kit-easing-plot) { cursor: grabbing; }
  :where(.kit-easing-preview) {
    display: grid;
    gap: var(--kit-space-150);
    justify-items: start;
  }
  :where(.kit-easing-rails) {
    display: grid;
    gap: var(--kit-space-150);
    inline-size: 100%;
  }
  :where(.kit-easing-rail-row) {
    display: grid;
    grid-template-columns: minmax(0, 8rem) 1fr;
    align-items: center;
    gap: var(--kit-space-inline);
  }
  :where(.kit-easing-rail-label) {
    font-size: var(--kit-font-size-200);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-easing-rail) {
    position: relative;
    display: block;
    inline-size: 100%;
    block-size: var(--_dot);
  }
  :where(.kit-easing-rail)::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(50% - var(--_rail) / 2);
    block-size: var(--_rail);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-surface-sunken);
    box-shadow: var(--kit-elevation-inset);
  }
  :where(.kit-easing-travel) {
    --_dir: 1;
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: calc(100% - var(--_dot));
    pointer-events: none;
    translate: calc(var(--_at, 0) * var(--_dir) * 100%) 0;
    transition: translate var(--_run-duration, var(--kit-duration-2)) var(--_run-easing, var(--kit-easing-standard));
  }
  :where(.kit-easing-travel):dir(rtl) { --_dir: -1; }
  :where(.kit-easing-rail)[data-reference] > :where(.kit-easing-travel) {
    transition-timing-function: var(--kit-easing-standard);
  }
  :where(.kit-easing-dot) {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: calc(50% - var(--_dot) / 2);
    inline-size: var(--_dot);
    block-size: var(--_dot);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-accent);
    box-shadow: var(--kit-elevation-cap);
  }
  :where(.kit-easing-rail)[data-reference] :where(.kit-easing-dot) {
    background: var(--kit-color-surface-raised);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border-strong);
  }
  :where(.kit-easing-badge) {
    font-size: var(--kit-font-size-200);
    font-family: var(--kit-font-mono);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-easing-badge)[data-match] { color: var(--kit-color-success-content); }
  :where(.kit-easing)[data-duration-unresolved] :where(.kit-easing-badge)::after {
    content: " · the named duration is not defined; previewing at --kit-duration-2";
    color: var(--kit-color-warning-content);
  }
  :where(.kit-easing)[data-disabled] :where(.kit-easing-plot) { cursor: not-allowed; }
  :where(.kit-easing)[data-disabled] :where(.kit-easing-curve) { stroke: var(--kit-color-border-strong); }
  :where(.kit-easing)[data-disabled] :where(.kit-easing-dot) { background: var(--kit-color-border-strong); }
  :where(.kit-easing) :where(.kit-inspector) {
    inline-size: 100%;
    max-inline-size: var(--kit-easing-size, 15rem);
    grid-template-columns: 1fr minmax(0, auto);
    gap: var(--kit-space-150) var(--kit-space-200);
  }
  :where(.kit-easing) :where(.kit-inspector) > :where(.kit-field)[data-compact] > :where(.kit-field-label) {
    font-size: var(--kit-font-size-200);
    color: var(--kit-color-content-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  :where(.kit-easing) :where(.kit-inspector) :where(select) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }
  @media (forced-colors: active) {
    :where(.kit-easing-plot) { background: Canvas; border-color: CanvasText; }
    :where(.kit-easing-unit) { fill: Canvas; stroke: CanvasText; }
    :where(.kit-easing-guides) line,
    :where(.kit-easing-arm) { stroke: CanvasText; }
    :where(.kit-easing-curve) { stroke: Highlight; }
    :where(.kit-easing-handle) { fill: Canvas; stroke: Highlight; }
    :where(.kit-easing-dot) { background: Highlight; }
    :where(.kit-easing-rail)::before { background: Canvas; border: var(--kit-border-width-hairline) solid CanvasText; }
  }
}
@layer kit.components {
  :where(.kit-spring) {
    --_dot: var(--kit-space-400);
    --_rail: var(--kit-space-150);
    display: grid;
    gap: var(--kit-space-stack);
    color: var(--kit-color-content);
  }
  :where(.kit-spring-plot) {
    inline-size: 100%;
    max-inline-size: var(--kit-spring-size, 22rem);
    aspect-ratio: 5 / 3;
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-control);
    background: var(--kit-color-surface-sunken);
    box-shadow: var(--kit-elevation-inset);
  }
  :where(.kit-spring-plot) > svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }
  :where(.kit-spring-plot) :is(path, line) { vector-effect: non-scaling-stroke; }
  :where(.kit-spring-target) {
    stroke: var(--kit-color-border-strong);
    stroke-width: 1px;
    stroke-dasharray: 3 3;
  }
  :where(.kit-spring-cut) {
    stroke: var(--kit-color-border);
    stroke-width: 1px;
  }
  :where(.kit-spring-trace) {
    fill: none;
    stroke: var(--kit-color-accent);
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  :where(.kit-spring)[data-undamped] :where(.kit-spring-plot) {
    border-color: var(--kit-color-warning-border);
    background: var(--kit-color-warning-surface);
  }
  :where(.kit-spring-readout) {
    margin: 0;
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-200);
    color: var(--kit-color-content-muted);
    max-inline-size: 72ch;
  }
  :where(.kit-spring)[data-undamped] :where(.kit-spring-readout) { color: var(--kit-color-warning-content); }
  :where(.kit-spring-output) {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    padding: var(--kit-space-200) var(--kit-space-300);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-control);
    background: var(--kit-color-surface-sunken);
    font-family: var(--kit-font-mono);
    font-size: var(--kit-font-size-200);
    color: var(--kit-color-content);
    white-space: pre;
  }
  :where(.kit-spring-output):empty { display: none; }
  :where(.kit-spring-preview) {
    display: grid;
    gap: var(--kit-space-150);
    justify-items: start;
  }
  :where(.kit-spring-rails) {
    display: grid;
    gap: var(--kit-space-150);
    inline-size: 100%;
  }
  :where(.kit-spring-rail-row) {
    display: grid;
    grid-template-columns: minmax(0, 8rem) 1fr;
    align-items: center;
    gap: var(--kit-space-inline);
  }
  :where(.kit-spring-rail-label) {
    font-size: var(--kit-font-size-200);
    color: var(--kit-color-content-muted);
  }
  :where(.kit-spring-rail) {
    position: relative;
    display: block;
    inline-size: 100%;
    block-size: var(--_dot);
  }
  :where(.kit-spring-rail)::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(50% - var(--_rail) / 2);
    block-size: var(--_rail);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-surface-sunken);
    box-shadow: var(--kit-elevation-inset);
  }
  :where(.kit-spring-travel) {
    --_dir: 1;
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: calc(100% - var(--_dot));
    pointer-events: none;
    translate: calc(var(--_at, 0) * var(--_dir) * 100%) 0;
    transition: translate var(--_run-duration, var(--kit-duration-spring)) var(--_run-easing, var(--kit-easing-spring));
  }
  :where(.kit-spring-travel):dir(rtl) { --_dir: -1; }
  :where(.kit-spring-rail)[data-reference] > :where(.kit-spring-travel) {
    transition-duration: var(--kit-duration-spring);
    transition-timing-function: var(--kit-easing-spring);
  }
  :where(.kit-spring-dot) {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: calc(50% - var(--_dot) / 2);
    inline-size: var(--_dot);
    block-size: var(--_dot);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-accent);
    box-shadow: var(--kit-elevation-cap);
  }
  :where(.kit-spring-rail)[data-reference] :where(.kit-spring-dot) {
    background: var(--kit-color-surface-raised);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border-strong);
  }
  :where(.kit-spring)[data-disabled] :where(.kit-spring-trace) { stroke: var(--kit-color-border-strong); }
  :where(.kit-spring)[data-disabled] :where(.kit-spring-dot) { background: var(--kit-color-border-strong); }
  :where(.kit-spring) :where(.kit-inspector) {
    inline-size: 100%;
    max-inline-size: var(--kit-spring-size, 22rem);
    grid-template-columns: 1fr minmax(0, auto);
    gap: var(--kit-space-150) var(--kit-space-200);
  }
  :where(.kit-spring) :where(.kit-inspector) > :where(.kit-field)[data-compact] > :where(.kit-field-label) {
    font-size: var(--kit-font-size-200);
    color: var(--kit-color-content-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  :where(.kit-spring) :where(.kit-inspector) :where(.kit-number-field):has(> :where(input[readonly])) {
    background: var(--kit-color-surface);
    border-color: var(--kit-color-border);
    box-shadow: none;
  }
  :where(.kit-spring) :where(.kit-inspector) :where(select) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }
  @media (forced-colors: active) {
    :where(.kit-spring-plot) { background: Canvas; border-color: CanvasText; }
    :where(.kit-spring-target),
    :where(.kit-spring-cut) { stroke: CanvasText; }
    :where(.kit-spring-trace) { stroke: Highlight; }
    :where(.kit-spring-dot) { background: Highlight; }
    :where(.kit-spring-rail)::before { background: Canvas; border: var(--kit-border-width-hairline) solid CanvasText; }
    :where(.kit-spring-output) { background: Canvas; border-color: CanvasText; }
  }
}
@layer kit.components {
  :where(.kit-notif-bell) {
    position: relative;
  }
  :where(.kit-notif-panel) {
    inline-size: min(22rem, 90vw);
    max-inline-size: min(22rem, 90vw);
    max-block-size: min(70dvh, 36rem);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  :where(.kit-notif-panel):not(:popover-open) { display: none; }
  :where(.kit-notif-head) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kit-space-inline);
    padding: var(--kit-space-200) var(--kit-space-300);
    border-block-end: var(--kit-border-width-hairline) solid var(--kit-color-border);
  }
  :where(.kit-notif-heading) {
    margin: 0;
    font-size: var(--kit-font-size-400);
    line-height: var(--kit-line-height-400);
    font-weight: var(--kit-font-weight-semibold);
    color: var(--kit-color-content);
  }
  :where(.kit-notif-filter) {
    padding-inline: var(--kit-space-300);
    flex: none;
  }
  :where(.kit-notif-scroll) {
    flex: 1 1 auto;
    min-block-size: 0;
  }
  :where(.kit-notif-foot) {
    padding: var(--kit-space-200) var(--kit-space-300);
    border-block-start: var(--kit-border-width-hairline) solid var(--kit-color-border);
  }
  :where(.kit-notif-list) {
    gap: 0;
    padding: 0;
    margin: 0;
  }
  :where(.kit-notif-item) {
    --_marker-size: var(--kit-space-150);
    display: grid;
    grid-template-columns: var(--kit-space-400) minmax(0, 1fr);
    column-gap: var(--kit-space-150);
    row-gap: var(--kit-space-050);
    align-items: start;
    padding: var(--kit-space-200) var(--kit-space-300);
    text-decoration: none;
    color: var(--kit-color-content);
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
    --_row: transparent;
    background: var(--_row);
    transition: background-color var(--kit-duration-1) var(--kit-easing-standard);
  }
  @media (hover: hover) {
    :where(.kit-notif-item):hover { --_row: var(--kit-color-surface-hover); }
  }
  :where(.kit-notif-item):focus-visible { --_row: var(--kit-color-surface-hover); }
  :where(.kit-notif-title),
  :where(.kit-notif-body),
  :where(.kit-notif-meta) {
    grid-column: 2;
    margin: 0;
    min-inline-size: 0;
  }
  :where(.kit-notif-title) {
    font-weight: var(--kit-font-weight-regular);
    color: var(--kit-color-content);
    text-wrap: pretty;
  }
  :where(.kit-notif-body) {
    color: var(--kit-color-content-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  :where(.kit-notif-meta) {
    color: var(--kit-color-content-muted);
    font-size: var(--kit-font-size-200);
    line-height: var(--kit-line-height-200);
    display: flex;
    flex-wrap: wrap;
    gap: var(--kit-space-100);
    font-variant-numeric: tabular-nums;
  }
  :where(.kit-notif-marker) {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    align-self: start;
    inline-size: var(--_marker-size);
    block-size: var(--_marker-size);
    border-radius: var(--kit-radius-full);
    background: var(--kit-color-accent);
    margin-block-start: calc((1lh - var(--_marker-size)) / 2);
  }
  :where(.kit-notif-item)[data-read="false"] :where(.kit-notif-title) {
    font-weight: var(--kit-font-weight-semibold);
  }
  @media (forced-colors: active) {
    :where(.kit-notif-marker) {
      background: Highlight;
      forced-color-adjust: none;
    }
    :where(.kit-notif-head) { border-block-end-color: CanvasText; }
    :where(.kit-notif-foot) { border-block-start-color: CanvasText; }
  }
  [data-density="compact"] :where(.kit-notif-item) {
    padding-block: var(--kit-space-150);
  }
  [data-density="comfortable"] :where(.kit-notif-item) {
    padding-block: var(--kit-space-300);
  }
}
@layer kit.components {
  :where(.kit-log) {
    --kit-log-follow-lines: 1.5;
    --kit-log-surface: var(--kit-color-surface-sunken);
    --kit-log-surface-raised: var(--kit-color-surface-raised);
    --kit-log-border: var(--kit-color-border);
    --kit-log-content: var(--kit-color-content);
    --kit-log-content-muted: var(--kit-color-content-muted);
    --kit-log-shadow: none;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "bar" "stream";
    block-size: 20rem;
    min-block-size: 0;
    position: relative;
    border: var(--kit-border-width-hairline) solid var(--kit-log-border);
    border-radius: var(--kit-radius-surface);
    background: var(--kit-log-surface);
    color: var(--kit-log-content);
    box-shadow: var(--kit-log-shadow);
    overflow: hidden;
  }
  :where(.kit-log)[data-terminal] {
    color-scheme: dark;
    --kit-log-surface: var(--kit-color-terminal-surface);
    --kit-log-surface-raised: var(--kit-color-terminal-surface-raised);
    --kit-log-border: var(--kit-color-terminal-border);
    --kit-log-content: var(--kit-color-terminal-content);
    --kit-log-content-muted: var(--kit-color-terminal-content-muted);
    --kit-log-shadow: var(--kit-elevation-3);
  }
  :where(.kit-log-bar) {
    grid-area: bar;
    padding: var(--kit-space-200) var(--kit-space-300);
    border-block-end: var(--kit-border-width-hairline) solid var(--kit-log-border);
    background: var(--kit-log-surface-raised);
    font-family: var(--kit-font-sans);
    font-size: var(--kit-font-size-300);
    container-type: inline-size;
    container-name: kit-toolbar;
  }
  :where(.kit-log-mark) {
    flex: none;
    color: var(--kit-log-content-muted);
  }
  :where(.kit-log-title) {
    font-weight: var(--kit-font-weight-medium);
    color: var(--kit-log-content);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  :where(.kit-log-lines) {
    grid-area: stream;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-content: start;
    column-gap: var(--kit-space-300);
    row-gap: 0;
    margin: 0;
    padding: var(--kit-space-200) var(--kit-space-300);
    list-style: none;
    font-family: var(--kit-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
    overscroll-behavior: contain;
  }
  :where(.kit-log-lines):focus-visible {
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: calc(var(--kit-focus-offset) * -1);
  }
  :where(.kit-log-line) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: auto;
    align-items: baseline;
  }
  :where(.kit-log-line)::before {
    grid-row: 1;
    grid-column: 1;
    content: attr(data-time);
    color: var(--kit-log-content-muted);
    white-space: nowrap;
  }
  :where(.kit-log-line)::after {
    grid-row: 1;
    grid-column: 2;
    content: var(--_word, "");
    inline-size: 4ch;
    color: var(--_ink, var(--kit-log-content-muted));
    font-weight: var(--kit-font-weight-medium);
    white-space: nowrap;
  }
  :where(.kit-log-line)[data-level="success"] {
    --_word: "OK";
    --_ink: light-dark(var(--kit-color-success-content), var(--kit-color-terminal-success));
  }
  :where(.kit-log-line)[data-level="info"] {
    --_word: "INFO";
    --_ink: light-dark(var(--kit-color-info-content), var(--kit-color-terminal-info));
  }
  :where(.kit-log-line)[data-level="warning"] {
    --_word: "WARN";
    --_ink: light-dark(var(--kit-color-warning-content), var(--kit-color-terminal-warning));
  }
  :where(.kit-log-line)[data-level="danger"] {
    --_word: "ERR";
    --_ink: light-dark(var(--kit-color-danger-content), var(--kit-color-terminal-danger));
  }
  :where(.kit-log-line)[data-level="neutral"] { --_word: ""; --_ink: var(--kit-log-content-muted); }
  :where(.kit-log-msg) {
    grid-row: 1;
    grid-column: 3;
    min-inline-size: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    padding-inline-start: 2ch;
    text-indent: -2ch;
  }
  :where(.kit-log)[data-wrap="off"] :where(.kit-log-lines) { overflow-x: auto; }
  :where(.kit-log)[data-wrap="off"] :where(.kit-log-msg) {
    white-space: pre;
    overflow-wrap: normal;
    padding-inline-start: 0;
    text-indent: 0;
  }
  :where(.kit-log)[data-level-filter="success"] :where(.kit-log-line):not([data-level="success"]),
  :where(.kit-log)[data-level-filter="info"] :where(.kit-log-line):not([data-level="info"]),
  :where(.kit-log)[data-level-filter="warning"] :where(.kit-log-line):not([data-level="warning"]),
  :where(.kit-log)[data-level-filter="danger"] :where(.kit-log-line):not([data-level="danger"]),
  :where(.kit-log)[data-level-filter="neutral"] :where(.kit-log-line):not([data-level="neutral"]) {
    display: none;
  }
  :where(.kit-log-jump) {
    grid-area: stream;
    place-self: end end;
    margin-block-end: var(--kit-space-300);
    margin-inline-end: var(--kit-space-500);
    z-index: var(--kit-layer-raised);
    display: none;
    opacity: 0;
    translate: 0 var(--kit-space-200);
    transition:
      opacity var(--kit-duration-2) var(--kit-easing-entrance),
      translate var(--kit-duration-2) var(--kit-easing-entrance),
      display var(--kit-duration-2) allow-discrete;
  }
  :where(.kit-log)[data-following="false"] > :where(.kit-log-jump) {
    display: inline-flex;
    opacity: 1;
    translate: 0 0;
  }
  @starting-style {
    :where(.kit-log)[data-following="false"] > :where(.kit-log-jump) {
      opacity: 0;
      translate: 0 var(--kit-space-200);
    }
  }
  :where(.kit-log-jump-count) {
    font-variant-numeric: tabular-nums;
  }
  :where(.kit-log-dropped),
  :where(.kit-log-end) {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--kit-space-300);
    margin-block: var(--kit-space-100);
    color: var(--kit-log-content-muted);
    font-size: var(--kit-font-size-200);
  }
  :where(.kit-log-dropped)::after,
  :where(.kit-log-end)::before,
  :where(.kit-log-end)::after {
    content: "";
    flex: 1 1 auto;
    block-size: var(--kit-border-width-hairline);
    background: var(--kit-log-border);
  }
  :where(.kit-log-empty) {
    grid-area: stream;
    display: grid;
    align-content: center;
    min-inline-size: 0;
  }
  :where(.kit-log-empty)[data-kind="no-match"] { display: none; }
  :where(.kit-log):has(.kit-log-line) > :where(.kit-log-empty) { display: none; }
  :where(.kit-log)[data-level-filter] > :where(.kit-log-empty)[data-kind="empty"] { display: none; }
  :where(.kit-log)[data-level-filter="success"]:not(:has(.kit-log-line[data-level="success"])) > :where(.kit-log-empty)[data-kind="no-match"],
  :where(.kit-log)[data-level-filter="info"]:not(:has(.kit-log-line[data-level="info"])) > :where(.kit-log-empty)[data-kind="no-match"],
  :where(.kit-log)[data-level-filter="warning"]:not(:has(.kit-log-line[data-level="warning"])) > :where(.kit-log-empty)[data-kind="no-match"],
  :where(.kit-log)[data-level-filter="danger"]:not(:has(.kit-log-line[data-level="danger"])) > :where(.kit-log-empty)[data-kind="no-match"],
  :where(.kit-log)[data-level-filter="neutral"]:not(:has(.kit-log-line[data-level="neutral"])) > :where(.kit-log-empty)[data-kind="no-match"] {
    display: grid;
  }
  :where(.kit-log):has(> .kit-log-prompt) {
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "bar" "stream" "prompt";
  }
  :where(.kit-log-prompt) {
    grid-area: prompt;
    display: flex;
    align-items: center;
    gap: var(--kit-space-200);
    padding: var(--kit-space-200) var(--kit-space-300);
    border-block-start: var(--kit-border-width-hairline)
      solid var(--kit-log-border, var(--kit-color-border));
    background: var(--kit-log-surface-raised, var(--kit-color-surface-raised));
  }
  :where(.kit-log-ps1) {
    display: inline-flex;
    align-items: center;
    font-family: var(--kit-font-mono);
    color: var(--kit-log-content-muted, var(--kit-color-content-muted));
    flex: none;
  }
  :where(.kit-log-prompt) > :where(.kit-input) {
    flex: 1 1 auto;
    min-inline-size: 0;
    font-family: var(--kit-font-mono);
  }
  @media (forced-colors: active) {
    :where(.kit-log) { border-color: CanvasText; }
    :where(.kit-log)[data-terminal] { box-shadow: none; }
    :where(.kit-log-bar) { border-block-end-color: CanvasText; }
    :where(.kit-log-prompt) { border-block-start-color: CanvasText; }
    :where(.kit-log-dropped)::after,
    :where(.kit-log-end)::before,
    :where(.kit-log-end)::after { background: CanvasText; }
  }
  [data-density="compact"] :where(.kit-log-lines) { padding: var(--kit-space-100) var(--kit-space-200); }
  [data-density="compact"] :where(.kit-log-bar) { padding: var(--kit-space-100) var(--kit-space-200); }
}
@layer kit.components {
  ::target-text {
    background-color: color-mix(in oklab, var(--kit-color-accent) 24%, transparent);
    color: var(--kit-color-content);
  }
  :root {
    --kit-mark-mix-1: 26%;
    --kit-mark-mix-2: 30%;
    --kit-mark-mix-3: 30%;
    --kit-mark-mix-4: 24%;
    --kit-mark-mix-5: 26%;
    --kit-mark-1: color-mix(in oklab, var(--kit-color-chart-1) var(--kit-mark-mix-1), transparent);
    --kit-mark-2: color-mix(in oklab, var(--kit-color-chart-2) var(--kit-mark-mix-2), transparent);
    --kit-mark-3: color-mix(in oklab, var(--kit-color-chart-3) var(--kit-mark-mix-3), transparent);
    --kit-mark-4: color-mix(in oklab, var(--kit-color-chart-4) var(--kit-mark-mix-4), transparent);
    --kit-mark-5: color-mix(in oklab, var(--kit-color-chart-5) var(--kit-mark-mix-5), transparent);
  }
  ::highlight(kit-mark-1) { background-color: var(--kit-mark-1); color: var(--kit-color-content); }
  ::highlight(kit-mark-2) { background-color: var(--kit-mark-2); color: var(--kit-color-content); }
  ::highlight(kit-mark-3) { background-color: var(--kit-mark-3); color: var(--kit-color-content); }
  ::highlight(kit-mark-4) { background-color: var(--kit-mark-4); color: var(--kit-color-content); }
  ::highlight(kit-mark-5) { background-color: var(--kit-mark-5); color: var(--kit-color-content); }
  ::highlight(kit-mark-active) {
    text-decoration: underline;
    text-decoration-thickness: var(--kit-border-width-emphasis);
    text-underline-offset: 0.18em;
    text-decoration-color: var(--kit-color-accent);
  }
  :where(.kit-mark) {
    background-color: var(--kit-mark-1);
    color: var(--kit-color-content);
    border-radius: var(--kit-radius-100);
    padding-inline: 0.08em;
  }
  :where(.kit-mark)[data-color="2"] { background-color: var(--kit-mark-2); }
  :where(.kit-mark)[data-color="3"] { background-color: var(--kit-mark-3); }
  :where(.kit-mark)[data-color="4"] { background-color: var(--kit-mark-4); }
  :where(.kit-mark)[data-color="5"] { background-color: var(--kit-mark-5); }
  :where(.kit-selection-anchor) {
    position: fixed;
    inline-size: 0;
    block-size: 0;
    pointer-events: none;
  }
  :where(.kit-selection-tool)[data-kit-selection] {
    position: fixed;
    position-area: block-start;
    margin-block: 0 var(--kit-space-150);
    position-try-fallbacks: flip-block;
    position-try-order: normal;
    padding: var(--kit-space-100);
    gap: var(--kit-space-050);
    align-items: center;
    inline-size: max-content;
    max-inline-size: calc(100vw - var(--kit-space-400));
    flex-wrap: wrap;
  }
  :where(.kit-selection-tool)[data-kit-selection]:popover-open {
    display: flex;
  }
  :where(.kit-selection-tool) :where(.kit-selection-swatches) {
    display: flex;
    gap: var(--kit-space-050);
    align-items: center;
  }
  :where(.kit-selection-swatch) {
    --_tint: var(--kit-mark-1);
    inline-size: var(--kit-space-600);
    block-size: var(--kit-space-600);
    padding: 0;
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-100);
    background: linear-gradient(var(--_tint), var(--_tint)), var(--kit-color-surface-raised);
    cursor: pointer;
  }
  :where(.kit-selection-swatch)[data-color="2"] { --_tint: var(--kit-mark-2); }
  :where(.kit-selection-swatch)[data-color="3"] { --_tint: var(--kit-mark-3); }
  :where(.kit-selection-swatch)[data-color="4"] { --_tint: var(--kit-mark-4); }
  :where(.kit-selection-swatch)[data-color="5"] { --_tint: var(--kit-mark-5); }
  :where(.kit-selection-swatch)[aria-pressed="true"] {
    border-color: var(--kit-color-accent);
    border-width: var(--kit-border-width-emphasis);
  }
  :where(.kit-mark-list) {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--kit-space-100);
  }
  :where(.kit-mark-list-item) {
    display: flex;
    align-items: start;
    gap: var(--kit-space-inline);
    padding: var(--kit-space-150) var(--kit-space-200);
    border: var(--kit-border-width-hairline) solid var(--kit-color-border);
    border-radius: var(--kit-radius-control);
    background: var(--kit-color-surface-raised);
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
  }
  :where(.kit-mark-list-item) :where(.kit-mark-swatch) {
    --_tint: var(--kit-mark-1);
    flex: none;
    inline-size: var(--kit-space-300);
    block-size: var(--kit-space-500);
    border-radius: var(--kit-radius-100);
    background: linear-gradient(var(--_tint), var(--_tint)), var(--kit-color-surface-raised);
    margin-block-start: 0.15em;
  }
  :where(.kit-mark-list-item)[data-color="2"] :where(.kit-mark-swatch) { --_tint: var(--kit-mark-2); }
  :where(.kit-mark-list-item)[data-color="3"] :where(.kit-mark-swatch) { --_tint: var(--kit-mark-3); }
  :where(.kit-mark-list-item)[data-color="4"] :where(.kit-mark-swatch) { --_tint: var(--kit-mark-4); }
  :where(.kit-mark-list-item)[data-color="5"] :where(.kit-mark-swatch) { --_tint: var(--kit-mark-5); }
  :where(.kit-mark-quote) {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }
  :where(.kit-mark-list-item)[data-orphan] {
    border-style: dashed;
    color: var(--kit-color-content-muted);
  }
  :where(.kit-mark-list-item)[data-orphan] :where(.kit-mark-swatch) {
    background: repeating-linear-gradient(45deg, var(--kit-color-border) 0 2px, transparent 2px 5px);
  }
  @media (forced-colors: active) {
    :where(.kit-mark) {
      background-color: Mark;
      color: MarkText;
      forced-color-adjust: none;
    }
    :where(.kit-selection-swatch)[aria-pressed="true"] {
      border-color: Highlight;
    }
    :where(.kit-mark-list-item) {
      border-color: CanvasText;
    }
  }
}
@layer kit.components {
  :where(.kit-changelog) {
    --_mark: var(--kit-space-300);
    --_gap: var(--kit-space-section);
    --_air: var(--kit-space-400);
    container-type: inline-size;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--_gap);
  }
  :where(.kit-changelog-entry) {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--_air);
    row-gap: var(--kit-space-200);
    align-items: start;
  }
  :where(.kit-changelog-entry) > :where(.kit-changelog-mark) {
    grid-row: 1 / -1;
    inline-size: var(--_mark);
    block-size: var(--_mark);
    border-radius: 50%;
    background: var(--kit-color-border-interactive);
    margin-block-start: 0.35em;
  }
  :where(.kit-changelog-entry):not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-start: calc((var(--_mark) - var(--kit-border-width-emphasis)) / 2);
    inset-block-start: calc(var(--_mark) + 0.35em + var(--kit-space-100));
    inset-block-end: calc((var(--_gap) + 0.35em) * -1);
    inline-size: var(--kit-border-width-emphasis);
    background: var(--kit-color-border);
  }
  :where(.kit-changelog-entry)[aria-current] > :where(.kit-changelog-mark) {
    background: var(--kit-color-accent);
    box-shadow: 0 0 0 var(--kit-border-width-emphasis) var(--kit-color-surface);
  }
  :where(.kit-changelog-head) {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--kit-space-inline);
  }
  :where(.kit-changelog-version) {
    font-family: var(--kit-font-mono);
    font-size: var(--kit-font-size-400);
    line-height: var(--kit-line-height-400);
    font-weight: var(--kit-font-weight-medium);
    color: var(--kit-color-content);
  }
  :where(.kit-changelog-date) {
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
    color: var(--kit-color-content-muted);
    font-variant-numeric: tabular-nums;
  }
  :where(.kit-changelog-headline) {
    grid-column: 2;
    margin: 0;
    font-size: var(--kit-font-size-400);
    line-height: var(--kit-line-height-400);
    color: var(--kit-color-content);
    max-inline-size: 72ch;
  }
  :where(.kit-changelog-details) {
    grid-column: 2;
    margin: 0;
    padding-inline-start: var(--kit-space-500);
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
    color: var(--kit-color-content-muted);
    max-inline-size: 76ch;
  }
  :where(.kit-changelog-details) > li + li { margin-block-start: var(--kit-space-100); }
  :where(.kit-changelog-details-toggle) {
    grid-column: 2;
    justify-self: start;
  }
  :where(.kit-changelog-kind) {
    align-self: center;
  }
  @container (max-width: 30rem) {
    :where(.kit-changelog) {
      --_air: var(--kit-space-200);
    }
    :where(.kit-changelog-details) {
      padding-inline-start: var(--kit-space-400);
    }
  }
  @media (forced-colors: active) {
    :where(.kit-changelog-entry) > :where(.kit-changelog-mark) { background: CanvasText; }
    :where(.kit-changelog-entry)[aria-current] > :where(.kit-changelog-mark) {
      background: Highlight;
      forced-color-adjust: none;
    }
    :where(.kit-changelog-entry):not(:last-child)::after { background: CanvasText; }
  }
}
@layer kit.components {
  :where(.kit-comments) {
    display: grid;
    gap: var(--kit-space-stack);
    color: var(--kit-color-content);
  }
  :where(.kit-comments-title) {
    display: flex;
    align-items: center;
    gap: var(--kit-space-inline);
    margin: 0;
  }
  :where(.kit-comment-list) {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--kit-space-stack);
  }
  :where(.kit-comment-list) > li { min-inline-size: 0; }
  :where(.kit-comment-list)[data-depth="1"] {
    margin-block-start: var(--kit-space-stack);
    padding-inline-start: var(--kit-space-400);
    border-inline-start: var(--kit-border-width-hairline) solid var(--kit-color-border);
  }
  :where(.kit-comment-list):empty { display: none; }
  :where(.kit-comment) {
    display: grid;
    gap: var(--kit-space-stack-tight);
    min-inline-size: 0;
    border-radius: var(--kit-radius-control);
    background: transparent;
  }
  :where(.kit-comment):focus-visible {
    outline: var(--kit-focus-width) solid var(--kit-color-focus);
    outline-offset: var(--kit-focus-offset);
  }
  :where(.kit-comment-head) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--kit-space-inline);
    min-inline-size: 0;
  }
  :where(.kit-comment-author) {
    font-weight: var(--kit-font-weight-medium);
    overflow-wrap: anywhere;
  }
  :where(.kit-comment-time) {
    color: var(--kit-color-content-muted);
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
    font-variant-numeric: tabular-nums;
  }
  :where(.kit-comment-body) {
    min-inline-size: 0;
    overflow-wrap: anywhere;
    transition: opacity var(--kit-duration-2) var(--kit-easing-standard);
  }
  :where(.kit-comment-body) :where(img, video, canvas, svg, iframe) {
    max-inline-size: 100%;
    block-size: auto;
  }
  :where(.kit-comment-body) :where(pre, table) {
    max-inline-size: 100%;
    display: block;
    overflow-x: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  :where(.kit-comment-body) table { inline-size: max-content; }
  :where(.kit-comment-body) [class*="kit-"]:not(.kit-mention):not([class*="kit-comment"]) {
    all: revert-layer;
  }
  :where(.kit-comment-body)[data-format="plain"] {
    white-space: pre-wrap;
    word-break: break-word;
  }
  :where(.kit-comment-body)[data-format="plain"] > * + * { margin-block-start: 0; }
  :where(.kit-comment-actions) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kit-space-inline);
  }
  :where(.kit-comment)[data-pending] {
    opacity: 0.55;
    transition: opacity var(--kit-duration-2) var(--kit-easing-standard);
  }
  :where(.kit-comment)[data-resolved] {
    background: var(--kit-color-surface-sunken);
    padding: var(--kit-space-300);
  }
  :where(.kit-comment)[data-resolved] > :where(.kit-comment-body) { opacity: 0.6; }
  :where(.kit-comment)[data-resolved] :where(.kit-comment-actions) > :not([data-action="reopen"]) {
    display: none;
  }
  :where(.kit-comment)[data-deleted] > :where(.kit-comment-body) {
    color: var(--kit-color-content-disabled);
    font-style: italic;
  }
  :where(.kit-comment)[data-deleted] > :where(.kit-comment-actions) { display: none; }
  :where(.kit-mention) {
    color: var(--kit-color-content-accent);
    background: var(--kit-color-accent-tint);
    border-radius: var(--kit-radius-mark);
    padding-inline: 0.15em;
    font-weight: var(--kit-font-weight-medium);
    overflow-wrap: break-word;
  }
  :where(.kit-comment-composer) {
    display: grid;
    gap: var(--kit-space-stack-tight);
    min-inline-size: 0;
  }
  :where(.kit-comment-input) {
    min-block-size: calc(var(--kit-control-height-md) * 2);
    resize: vertical;
  }
  :where(.kit-comment-hint) {
    margin: 0;
    color: var(--kit-color-content-muted);
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
  }
  :where(.kit-comment-error) {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--kit-space-inline);
    color: var(--kit-color-danger-content);
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
  }
  :where(.kit-comment-composer)[data-state="error"] :where(.kit-comment-input) {
    border-color: var(--kit-color-danger-border);
  }
  :where(.kit-comment-composer-bar) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kit-space-inline);
  }
  :where(.kit-comment-count) {
    color: var(--kit-color-content-muted);
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
    font-variant-numeric: tabular-nums;
  }
  :where(.kit-comment-composer)[data-length="near"] :where(.kit-comment-count) {
    color: var(--kit-color-warning-content);
  }
  :where(.kit-comment-composer)[data-length="over"] :where(.kit-comment-count) {
    color: var(--kit-color-danger-content);
    font-weight: var(--kit-font-weight-medium);
  }
  :where(.kit-comment-composer)[data-draft] :where(.kit-comment-hint)::after {
    content: " · Draft saved";
    color: var(--kit-color-content-muted);
  }
  :where(.kit-comment-composer)[aria-busy="true"] :where(.kit-comment-input) {
    color: var(--kit-color-content-muted);
  }
  :where(.kit-comment-readonly) {
    margin: 0;
    padding: var(--kit-space-300);
    border-radius: var(--kit-radius-control);
    background: var(--kit-color-surface-sunken);
    color: var(--kit-color-content-muted);
    font-size: var(--kit-font-size-300);
    line-height: var(--kit-line-height-300);
  }
  :where(.kit-comment-new) {
    display: flex;
    justify-content: center;
  }
  :where(.kit-comments)[data-composer="pinned"] {
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-block-size: 0;
  }
  :where(.kit-comments)[data-composer="pinned"] > :where(.kit-comment-list) {
    overflow-y: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    padding-inline-end: var(--kit-space-100);
  }
  :where(.kit-comments)[data-composer="pinned"] > :where(.kit-comment-composer) {
    background: var(--kit-color-surface-raised);
    padding-block-start: var(--kit-space-200);
    border-block-start: var(--kit-border-width-hairline) solid var(--kit-color-border);
  }
  :where(.kit-comments)[data-attribution="none"] :where(.kit-comment-head) { display: none; }
  :where(.kit-comments)[data-attribution="none"] :where(.kit-comment-list) {
    gap: var(--kit-space-stack-tight);
  }
  :where(.kit-comments)[data-attribution="none"] :where(.kit-comment) {
    padding: 0;
    background: transparent;
  }
  @media (forced-colors: active) {
    :where(.kit-comment)[data-resolved] {
      border: var(--kit-border-width-hairline) solid CanvasText;
    }
    :where(.kit-mention) {
      border-block-end: var(--kit-border-width-emphasis) solid LinkText;
      border-radius: 0;
    }
  }
}
@layer kit.utilities {
  :where(.kit-visually-hidden) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  :where([hidden]:not([hidden="until-found"])) {
    display: none;
  }
}
@layer kit.utilities {
  :where(.kit-separator) {
    border: 0;
    margin: 0;
    background: var(--kit-color-border);
    block-size: max(var(--kit-border-width-hairline), 1px);
    inline-size: 100%;
    flex: none;
  }
  :where(.kit-separator)[data-orientation="vertical"] {
    block-size: auto;
    align-self: stretch;
    inline-size: max(var(--kit-border-width-hairline), 1px);
    min-block-size: 1lh;
  }
  @media (forced-colors: active) {
    :where(.kit-separator) {
      background: CanvasText;
      forced-color-adjust: none;
    }
  }
}
@layer kit.utilities {
  :where(.kit-tabular-nums) {
    font-variant-numeric: tabular-nums;
  }
  :where(.kit-quote) {
    hanging-punctuation: first;
  }
  @supports not (hanging-punctuation: first) {
    :where(.kit-quote) {
      text-indent: calc(-1 * var(--kit-hanging-quote));
    }
  }
}
@layer kit.utilities {
  :where(.kit-strike) {
    text-decoration-line: line-through;
    text-decoration-color: currentcolor;
    text-decoration-thickness: var(--kit-underline-thickness);
  }
  :where(.kit-strike-underline) {
    text-decoration-line: underline line-through;
    text-decoration-color: currentcolor;
    text-decoration-thickness: var(--kit-underline-thickness);
    text-underline-offset: var(--kit-underline-offset);
  }
  :where(.kit-wordart-glow, .kit-wordart-pop) {
    --_ink: var(--kit-wordart-color, var(--kit-color-accent));
  }
  :where(.kit-wordart-glow) {
    text-shadow: 0 0 0.12em var(--_ink), 0 0 0.35em var(--_ink);
  }
  :where(.kit-wordart-pop) {
    --_ink-deep: color-mix(in oklab, var(--_ink) 70%, var(--kit-color-content));
    text-shadow: 0.045em 0.045em 0 var(--_ink), 0.09em 0.09em 0 var(--_ink-deep);
  }
  :where(.kit-wordart-angled) {
    display: inline-block;
    rotate: -4deg;
  }
  @supports (-webkit-text-stroke-width: 1px) and (-webkit-text-fill-color: currentcolor) {
    :where(.kit-wordart-outline) {
      -webkit-text-stroke-width: 0.045em;
      -webkit-text-stroke-color: currentcolor;
      -webkit-text-fill-color: transparent;
    }
  }
  @media (prefers-contrast: more) {
    :where(.kit-wordart-glow) {
      text-shadow: none;
    }
    :where(.kit-wordart-outline) {
      -webkit-text-stroke-width: 0;
      -webkit-text-fill-color: currentcolor;
    }
  }
  @media (forced-colors: active) {
    :where(.kit-wordart-glow, .kit-wordart-pop) {
      text-shadow: none;
    }
    :where(.kit-wordart-outline) {
      -webkit-text-stroke-width: 0;
      -webkit-text-fill-color: CanvasText;
    }
  }
}