@charset "UTF-8";
/**
 * CSS Library - Main Entry Point
 *
 * Import order follows numbered folder structure for cascade control.
 */
/* 00. Config: Layer definitions + Design tokens */
/* Fonts (Google Fonts CDN) */
@import "https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;700&family=Noto+Sans+Mono:wght@400;500&display=swap";
@layer reset, tokens, base, primitives, components.styles, components.tokens, utilities, themes;
:root {
  --ui-hue-primary: 220;
  --ui-hue-success: 142;
  --ui-hue-warning: 38;
  --ui-hue-danger: 0;
  --ui-color-neutral-50: hsl(var(--ui-hue-primary) 10% 98%);
  --ui-color-neutral-100: hsl(var(--ui-hue-primary) 10% 96%);
  --ui-color-neutral-200: hsl(var(--ui-hue-primary) 10% 90%);
  --ui-color-neutral-300: hsl(var(--ui-hue-primary) 10% 80%);
  --ui-color-neutral-400: hsl(var(--ui-hue-primary) 10% 60%);
  --ui-color-neutral-500: hsl(var(--ui-hue-primary) 10% 45%);
  --ui-color-neutral-600: hsl(var(--ui-hue-primary) 10% 35%);
  --ui-color-neutral-700: hsl(var(--ui-hue-primary) 10% 25%);
  --ui-color-neutral-800: hsl(var(--ui-hue-primary) 10% 15%);
  --ui-color-neutral-900: hsl(var(--ui-hue-primary) 10% 10%);
  --ui-color-primary-light: hsl(var(--ui-hue-primary) 85% 65%);
  --ui-color-primary: hsl(var(--ui-hue-primary) 85% 50%);
  --ui-color-primary-dark: hsl(var(--ui-hue-primary) 85% 40%);
  --ui-color-success: hsl(var(--ui-hue-success) 70% 45%);
  --ui-color-warning: hsl(var(--ui-hue-warning) 90% 50%);
  --ui-color-danger: hsl(var(--ui-hue-danger) 70% 50%);
}

:root {
  --ui-space-px: calc(var(--unit) * 0.125);
  --ui-space-quarter: calc(var(--unit) * 0.25);
  --ui-space-half: calc(var(--unit) * 0.5);
  --ui-space-0: calc(var(--unit) * 0.5);
  --ui-space-1: var(--unit);
  --ui-space-2: calc(var(--unit) * 2);
  --ui-space-3: calc(var(--unit) * 3);
  --ui-space-4: calc(var(--unit) * 4);
  --ui-space-6: calc(var(--unit) * 6);
  --ui-space-8: calc(var(--unit) * 8);
}

:root {
  --ui-font-sans: "Noto Sans", system-ui, -apple-system, sans-serif;
  --ui-font-mono: "Noto Sans Mono", ui-monospace, "Cascadia Code", monospace;
  --ui-font-size-xs: 0.75rem;
  --ui-font-size-sm: 0.875rem;
  --ui-font-size-md: 1rem;
  --ui-font-size-lg: 1.25rem;
  --ui-font-size-xl: 1.5rem;
  --ui-font-size-2xl: 1.75rem;
  --ui-font-size-3xl: 2rem;
  --ui-font-size-4xl: 2.5rem;
  --ui-leading-tight-xs: var(--ui-row-1);
  --ui-leading-tight-sm: var(--ui-row-1);
  --ui-leading-tight-md: calc(var(--unit) * 3);
  --ui-leading-tight-lg: calc(var(--unit) * 3);
  --ui-leading-xs: var(--ui-row-1);
  --ui-leading-sm: calc(var(--unit) * 3);
  --ui-leading-md: calc(var(--unit) * 3);
  --ui-leading-lg: var(--ui-row-2);
  --ui-leading-xl: var(--ui-row-2);
  --ui-leading-2xl: var(--ui-row-2);
  --ui-leading-3xl: calc(var(--unit) * 5);
  --ui-leading-4xl: calc(var(--unit) * 6);
  --ui-weight-normal: 400;
  --ui-weight-medium: 500;
  --ui-weight-semibold: 600;
  --ui-weight-bold: 700;
  --ui-tracking-display: -0.02em;
  --ui-tracking-body: 0;
  --ui-tracking-caps: 0.08em;
  --ui-heading-1-size: var(--ui-font-size-4xl);
  --ui-heading-1-line-height: var(--ui-leading-4xl);
  --ui-heading-1-weight: var(--ui-weight-bold);
  --ui-heading-1-tracking: var(--ui-tracking-display);
  --ui-heading-2-size: var(--ui-font-size-3xl);
  --ui-heading-2-line-height: var(--ui-leading-3xl);
  --ui-heading-2-weight: var(--ui-weight-bold);
  --ui-heading-2-tracking: -0.01em;
  --ui-heading-3-size: var(--ui-font-size-2xl);
  --ui-heading-3-line-height: var(--ui-leading-2xl);
  --ui-heading-3-weight: var(--ui-weight-semibold);
  --ui-heading-3-tracking: var(--ui-tracking-body);
  --ui-heading-4-size: var(--ui-font-size-xl);
  --ui-heading-4-line-height: var(--ui-leading-xl);
  --ui-heading-4-weight: var(--ui-weight-semibold);
  --ui-heading-4-tracking: var(--ui-tracking-body);
  --ui-heading-5-size: var(--ui-font-size-lg);
  --ui-heading-5-line-height: var(--ui-leading-sm);
  --ui-heading-5-weight: var(--ui-weight-medium);
  --ui-heading-5-tracking: var(--ui-tracking-body);
  --ui-body-size: var(--ui-font-size-md);
  --ui-body-line-height: var(--ui-leading-md);
  --ui-body-weight: var(--ui-weight-normal);
  --ui-body-tracking: var(--ui-tracking-body);
  --ui-body-sm-size: var(--ui-font-size-sm);
  --ui-body-sm-line-height: var(--ui-leading-sm);
  --ui-body-sm-weight: var(--ui-weight-normal);
  --ui-body-sm-tracking: var(--ui-tracking-body);
  --ui-caption-size: var(--ui-font-size-xs);
  --ui-caption-line-height: var(--ui-leading-xs);
  --ui-caption-weight: var(--ui-weight-normal);
  --ui-caption-tracking: 0.01em;
  --ui-lead-size: var(--ui-font-size-lg);
  --ui-lead-line-height: var(--ui-leading-lg);
  --ui-lead-weight: var(--ui-weight-normal);
  --ui-lead-tracking: var(--ui-tracking-body);
  --ui-eyebrow-size: var(--ui-font-size-xs);
  --ui-eyebrow-line-height: var(--ui-leading-xs);
  --ui-eyebrow-weight: var(--ui-weight-semibold);
  --ui-eyebrow-tracking: var(--ui-tracking-caps);
}

:root {
  --unit: 8px; /* 8px */
  --ui-row: calc(var(--unit) * 2);
  --ui-row-1: var(--ui-row);
  --ui-row-2: calc(var(--ui-row) * 2);
  --ui-row-3: calc(var(--ui-row) * 3);
  --ui-row-4: calc(var(--ui-row) * 4);
  --ui-row-5: calc(var(--ui-row) * 5);
  --ui-row-6: calc(var(--ui-row) * 6);
}

:root {
  --ui-radius-sm: calc(var(--unit) * 0.5);
  --ui-radius-md: var(--unit);
  --ui-radius-lg: calc(var(--unit) * 2);
  --ui-radius-full: 9999px;
}

:root {
  --ui-border-width-sm: calc(var(--unit) * 0.125);
  --ui-border-width-md: calc(var(--unit) * 0.25);
  --ui-border-width-lg: calc(var(--unit) * 0.5);
}

:root {
  --shadow-sm: 0 1px 2px hsl(var(--ui-hue-primary) 10% 20% / 0.05);
  --shadow-md: 0 4px 6px hsl(var(--ui-hue-primary) 10% 20% / 0.1);
  --shadow-lg: 0 10px 15px hsl(var(--ui-hue-primary) 10% 20% / 0.15);
}

@layer tokens {
  :root {
    --ui-z-base: 0;
    --ui-z-sticky: 100;
    --ui-z-dropdown: 200;
    --ui-z-overlay: 300;
    --ui-z-modal: 400;
    --ui-z-popover: 500;
    --ui-z-tooltip: 600;
    --ui-z-toast: 700;
    --ui-z-debug: 9999;
  }
}
@layer tokens {
  :root {
    --ui-duration-instant: 50ms;
    --ui-duration-fast: 100ms;
    --ui-duration-base: 150ms;
    --ui-duration-slow: 250ms;
    --ui-duration-slower: 400ms;
    --ui-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ui-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ui-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ui-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  }
  @media (prefers-reduced-motion: reduce) {
    :root {
      --ui-duration-instant: 0ms;
      --ui-duration-fast: 0ms;
      --ui-duration-base: 0ms;
      --ui-duration-slow: 0ms;
      --ui-duration-slower: 0ms;
    }
  }
}
:root {
  --ui-color-text: var(--ui-color-neutral-900);
  --ui-color-text-muted: var(--ui-color-neutral-500);
  --ui-color-text-inverse: var(--ui-color-neutral-50);
  --ui-color-bg: var(--ui-color-neutral-50);
  --ui-color-bg-subtle: var(--ui-color-neutral-100);
  --ui-color-bg-muted: var(--ui-color-neutral-200);
  --ui-color-border: var(--ui-color-neutral-200);
  --ui-color-border-strong: var(--ui-color-neutral-300);
  --ui-color-interactive: var(--ui-color-primary);
  --ui-color-interactive-hover: var(--ui-color-primary-dark);
  --ui-color-focus: var(--ui-color-primary-light);
}

[data-theme=dark] {
  --ui-color-text: var(--ui-color-neutral-100);
  --ui-color-text-muted: var(--ui-color-neutral-400);
  --ui-color-text-inverse: var(--ui-color-neutral-900);
  --ui-color-bg: var(--ui-color-neutral-900);
  --ui-color-bg-subtle: var(--ui-color-neutral-800);
  --ui-color-bg-muted: var(--ui-color-neutral-700);
  --ui-color-border: var(--ui-color-neutral-700);
  --ui-color-border-strong: var(--ui-color-neutral-600);
}

:root {
  --spacing-xs: var(--ui-space-1);
  --spacing-sm: var(--ui-space-2);
  --spacing-md: var(--ui-space-4);
  --spacing-lg: var(--ui-space-6);
  --spacing-xl: var(--ui-space-8);
  --spacing-gutter: var(--ui-space-4);
  --spacing-section: var(--ui-space-8);
}

:root {
  --ui-input-height: var(--ui-row-2);
  --ui-input-padding-x: var(--ui-space-2);
  --ui-input-padding-y: var(--ui-space-1);
  --ui-input-radius: var(--ui-radius-md);
  --ui-input-border-width: var(--ui-border-width-sm);
  --ui-input-bg: var(--ui-color-bg);
  --ui-input-border: var(--ui-color-border);
  --ui-input-border-focus: var(--ui-color-interactive);
  --ui-input-text: var(--ui-color-text);
  --ui-input-placeholder: var(--ui-color-text-muted);
}

/* 01. Reset styles */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
  }
}
/* 02. Base styles (typography, etc.) */
@layer base {
  .root {
    font-family: var(--ui-font-sans, Noto Sans, system-ui, -apple-system, sans-serif);
    font-size: var(--ui-font-size-md, 1rem);
    line-height: var(--ui-leading-md, calc(0.5rem * 3));
    color: var(--ui-color-text, hsl(220, 10%, 10%));
    background: var(--ui-color-bg, hsl(220, 10%, 98%));
  }
}
@layer base {
  h1 {
    margin-block-end: var(--ui-space-4);
    font-size: var(--ui-heading-1-size);
    font-weight: var(--ui-heading-1-weight);
    line-height: var(--ui-heading-1-line-height);
    letter-spacing: var(--ui-heading-1-tracking);
  }
  h2 {
    margin-block-end: var(--ui-space-3);
    font-size: var(--ui-heading-2-size);
    font-weight: var(--ui-heading-2-weight);
    line-height: var(--ui-heading-2-line-height);
    letter-spacing: var(--ui-heading-2-tracking);
  }
  h3 {
    margin-block-end: var(--ui-space-2);
    font-size: var(--ui-heading-3-size);
    font-weight: var(--ui-heading-3-weight);
    line-height: var(--ui-heading-3-line-height);
    letter-spacing: var(--ui-heading-3-tracking);
  }
  h4 {
    margin-block-end: var(--ui-space-2);
    font-size: var(--ui-heading-4-size);
    font-weight: var(--ui-heading-4-weight);
    line-height: var(--ui-heading-4-line-height);
    letter-spacing: var(--ui-heading-4-tracking);
  }
  h5,
  h6 {
    margin-block-end: var(--ui-space-1);
    font-size: var(--ui-heading-5-size);
    font-weight: var(--ui-heading-5-weight);
    line-height: var(--ui-heading-5-line-height);
    letter-spacing: var(--ui-heading-5-tracking);
  }
  p {
    margin-block-end: var(--ui-space-2);
    font-size: var(--ui-body-size);
    line-height: var(--ui-body-line-height);
    letter-spacing: var(--ui-body-tracking);
  }
  p:last-child {
    margin-block-end: 0;
  }
  strong,
  b {
    font-weight: var(--ui-weight-bold);
    line-height: 0;
  }
  small {
    font-size: var(--ui-caption-size);
    line-height: 0;
  }
  code {
    padding: 0 var(--ui-space-1);
    font-family: var(--ui-font-mono);
    font-size: var(--ui-body-sm-size);
    line-height: 0;
    vertical-align: baseline;
    background: var(--ui-color-bg-muted);
    border-radius: var(--ui-radius-sm);
  }
  pre {
    padding: var(--ui-space-2);
    margin-block-end: var(--ui-space-2);
    overflow-x: auto;
    font-family: var(--ui-font-mono);
    font-size: var(--ui-body-sm-size);
    line-height: var(--ui-body-sm-line-height);
    background: var(--ui-color-bg-muted);
    border-radius: var(--ui-radius-md);
  }
  pre code {
    padding: 0;
    background: none;
  }
  a {
    text-decoration: underline;
    color: var(--ui-color-primary);
    transition: color var(--ui-duration-fast) var(--ui-ease-default);
  }
  a:hover {
    color: var(--ui-color-primary-hover);
  }
  a:visited {
    color: var(--ui-color-primary);
  }
  @media (width < 45.625rem) {
    h1 {
      font-size: var(--ui-font-size-2xl);
      line-height: var(--ui-leading-2xl);
    }
    h2 {
      font-size: var(--ui-font-size-xl);
      line-height: var(--ui-leading-xl);
    }
    h3 {
      font-size: var(--ui-font-size-lg);
      line-height: var(--ui-leading-sm);
    }
    h4 {
      font-size: 1.125rem;
      line-height: var(--ui-leading-sm);
    }
  }
  @media (width > 67.5rem) {
    h1 {
      font-size: calc(var(--unit) * 6);
      line-height: calc(var(--unit) * 7);
    }
    h2 {
      font-size: var(--ui-font-size-4xl);
      line-height: var(--ui-leading-4xl);
    }
  }
}
/* 03. Layout primitives */
@layer primitives {
  .box {
    --_padding: var(--box-padding, 0);
    --_bg: var(--box-bg, transparent);
    --_color: var(--box-color, inherit);
    --_radius: var(--box-radius, 0);
    padding: var(--_padding);
    color: var(--_color);
    background: var(--_bg);
    border-radius: var(--_radius);
  }
  .box--p-1 {
    --_padding: var(--ui-space-1, 0.5rem);
  }
  .box--p-2 {
    --_padding: var(--ui-space-2, 1rem);
  }
  .box--p-3 {
    --_padding: var(--ui-space-3, 1.5rem);
  }
  .box--p-4 {
    --_padding: var(--ui-space-4, 2rem);
  }
  .box--bg-subtle {
    --_bg: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));
  }
  .box--bg-muted {
    --_bg: var(--ui-color-bg-muted, hsl(220, 10%, 90%));
  }
  .box--rounded {
    --_radius: var(--ui-radius-md, 0.5rem);
  }
  .box--rounded-lg {
    --_radius: var(--ui-radius-lg, 1rem);
  }
}
@layer primitives {
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--ui-space-2));
  }
  .stack--xs {
    --stack-gap: var(--ui-space-1);
  }
  .stack--sm {
    --stack-gap: var(--ui-space-2);
  }
  .stack--md {
    --stack-gap: var(--ui-space-4);
  }
  .stack--lg {
    --stack-gap: var(--ui-space-6);
  }
  .stack--xl {
    --stack-gap: var(--ui-space-8);
  }
}
@layer primitives {
  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--ui-space-2));
  }
  .cluster--xs {
    --cluster-gap: var(--ui-space-1);
  }
  .cluster--sm {
    --cluster-gap: var(--ui-space-2);
  }
  .cluster--md {
    --cluster-gap: var(--ui-space-4);
  }
  .cluster--lg {
    --cluster-gap: var(--ui-space-6);
  }
  .cluster--start {
    justify-content: flex-start;
  }
  .cluster--center {
    justify-content: center;
  }
  .cluster--end {
    justify-content: flex-end;
  }
  .cluster--between {
    justify-content: space-between;
  }
}
@layer primitives {
  .flex {
    --_gap: var(--flex-gap, var(--ui-space-2, 1rem));
    --_direction: var(--flex-direction, row);
    --_wrap: var(--flex-wrap, nowrap);
    --_align: var(--flex-align, stretch);
    --_justify: var(--flex-justify, flex-start);
    display: flex;
    flex-direction: var(--_direction);
    flex-wrap: var(--_wrap);
    align-items: var(--_align);
    justify-content: var(--_justify);
    gap: var(--_gap);
  }
  .flex--row {
    --_direction: row;
  }
  .flex--col {
    --_direction: column;
  }
  .flex--row-reverse {
    --_direction: row-reverse;
  }
  .flex--col-reverse {
    --_direction: column-reverse;
  }
  .flex--wrap {
    --_wrap: wrap;
  }
  .flex--nowrap {
    --_wrap: nowrap;
  }
  .flex--items-start {
    --_align: flex-start;
  }
  .flex--items-center {
    --_align: center;
  }
  .flex--items-end {
    --_align: flex-end;
  }
  .flex--items-baseline {
    --_align: baseline;
  }
  .flex--justify-start {
    --_justify: flex-start;
  }
  .flex--justify-center {
    --_justify: center;
  }
  .flex--justify-end {
    --_justify: flex-end;
  }
  .flex--justify-between {
    --_justify: space-between;
  }
  .flex--justify-around {
    --_justify: space-around;
  }
  .flex--gap-0 {
    --_gap: 0;
  }
  .flex--gap-1 {
    --_gap: var(--ui-space-1, 0.5rem);
  }
  .flex--gap-2 {
    --_gap: var(--ui-space-2, 1rem);
  }
  .flex--gap-3 {
    --_gap: var(--ui-space-3, 1.5rem);
  }
  .flex--gap-4 {
    --_gap: var(--ui-space-4, 2rem);
  }
}
@layer primitives {
  .center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .center--column {
    flex-direction: column;
  }
}
@layer primitives {
  .grid {
    display: grid;
    gap: var(--grid-gap, var(--ui-space-4));
    grid-template-columns: repeat(var(--grid-cols, 1), minmax(0, 1fr));
  }
  .grid--2 {
    --grid-cols: 2;
  }
  .grid--3 {
    --grid-cols: 3;
  }
  .grid--4 {
    --grid-cols: 4;
  }
  .grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 16rem), 1fr));
  }
}
@layer primitives {
  .app-shell {
    min-block-size: 100vh;
  }
}
@layer primitives {
  .sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: var(--ui-z-sticky);
    block-size: 100vh;
    inline-size: var(--sidebar-width, calc(var(--unit) * 30));
    overflow-y: auto;
    background: var(--ui-color-bg-subtle);
    box-shadow: inset calc(var(--ui-border-width-sm) * -1) 0 0 0 var(--ui-color-border);
  }
  /* Width modifiers */
  .sidebar--sm {
    --sidebar-width: calc(var(--unit) * 24);
  }
  .sidebar--md {
    --sidebar-width: calc(var(--unit) * 30);
  }
  .sidebar--lg {
    --sidebar-width: calc(var(--unit) * 40);
  }
  /* Position modifier - sidebar on end (right in LTR) */
  .sidebar--end {
    inset-inline-start: auto;
    inset-inline-end: 0;
    box-shadow: inset var(--ui-border-width-sm) 0 0 0 var(--ui-color-border);
  }
}
@layer primitives {
  .sidebar-nav {
    --_width: var(--ui-sidebar-nav-width, calc(var(--ui-unit) * 30));
    --_bg: var(--ui-sidebar-nav-bg, var(--ui-color-bg-subtle));
    --_border-color: var(--ui-sidebar-nav-border-color, var(--ui-color-border));
    --_padding: var(--ui-sidebar-nav-padding, var(--ui-space-2));
    display: flex;
    flex-direction: column;
    block-size: 100%;
    inline-size: var(--_width);
    background: var(--_bg);
  }
  .sidebar-nav__header {
    --_padding: var(--ui-sidebar-nav-header-padding, var(--ui-space-2));
    flex-shrink: 0;
    padding: var(--_padding);
    box-shadow: inset 0 calc(var(--ui-border-width-sm) * -1) 0 0 var(--_border-color);
  }
  .sidebar-nav__content {
    flex: 1;
    padding: var(--_padding);
    overflow-y: auto;
  }
  .sidebar-nav__footer {
    --_padding: var(--ui-sidebar-nav-footer-padding, var(--ui-space-2));
    flex-shrink: 0;
    padding: var(--_padding);
    box-shadow: inset 0 var(--ui-border-width-sm) 0 0 var(--_border-color);
  }
  .sidebar-nav__group {
    margin-block-end: var(--ui-space-2);
  }
  .sidebar-nav__group-label {
    --_font-size: var(--ui-sidebar-nav-group-label-size, var(--ui-size-xs));
    --_color: var(--ui-sidebar-nav-group-label-color, var(--ui-color-text-muted));
    --_weight: var(--ui-sidebar-nav-group-label-weight, var(--ui-weight-bold));
    display: block;
    padding: var(--ui-space-1) var(--ui-space-2);
    margin: 0;
    font-size: var(--_font-size);
    font-weight: var(--_weight);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--_color);
  }
  .sidebar-nav__group-items {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-half);
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .sidebar-nav__subgroup-label {
    display: block;
    padding: var(--ui-space-1) var(--ui-space-2);
    margin: 0;
    margin-block-start: var(--ui-space-1);
    font-size: var(--ui-size-xs);
    font-weight: var(--ui-weight-medium);
    color: var(--ui-color-text-muted);
  }
  .sidebar-nav__item {
    --_height: var(--ui-sidebar-nav-item-height, var(--ui-row-2));
    --_padding-inline: var(--ui-sidebar-nav-item-padding-inline, var(--ui-space-2));
    --_font-size: var(--ui-sidebar-nav-item-size, var(--ui-size-sm));
    --_color: var(--ui-sidebar-nav-item-color, var(--ui-color-text));
    --_bg: var(--ui-sidebar-nav-item-bg, transparent);
    --_radius: var(--ui-sidebar-nav-item-radius, var(--ui-radius-sm));
    display: flex;
    align-items: center;
    gap: var(--ui-space-1);
    min-block-size: var(--_height);
    padding-inline: var(--_padding-inline);
    font-size: var(--_font-size);
    font-weight: var(--_weight, normal);
    text-decoration: none;
    color: var(--_color);
    background: var(--_bg);
    border-radius: var(--_radius);
    cursor: pointer;
    transition: background var(--ui-duration-fast) var(--ui-easing-default), color var(--ui-duration-fast) var(--ui-easing-default);
  }
  .sidebar-nav__item:hover {
    --_bg: var(--ui-sidebar-nav-item-hover-bg, var(--ui-color-bg-muted));
  }
  .sidebar-nav__item:visited {
    color: var(--_color);
  }
  .sidebar-nav__item:focus-visible {
    outline: 2px solid var(--ui-color-focus);
    outline-offset: -2px;
  }
  .sidebar-nav__item--active {
    --_bg: var(--ui-sidebar-nav-item-active-bg, var(--ui-color-primary-subtle));
    --_color: var(--ui-sidebar-nav-item-active-color, var(--ui-color-primary));
    --_weight: var(--ui-sidebar-nav-item-active-weight, var(--ui-weight-medium));
  }
  .sidebar-nav__item--nested {
    --_padding-inline-start: var(--ui-sidebar-nav-item-nested-indent, var(--ui-space-4));
    padding-inline-start: var(--_padding-inline-start);
  }
  .sidebar-nav__item--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  .sidebar-nav__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    block-size: var(--ui-size-md);
    inline-size: var(--ui-size-md);
  }
  .sidebar-nav__label {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sidebar-nav__badge {
    flex-shrink: 0;
    margin-inline-start: auto;
  }
  .sidebar-nav--collapsed {
    --_width: var(--ui-sidebar-nav-width-collapsed, var(--ui-row-3));
  }
  .sidebar-nav--collapsed .sidebar-nav__label,
  .sidebar-nav--collapsed .sidebar-nav__badge,
  .sidebar-nav--collapsed .sidebar-nav__group-label,
  .sidebar-nav--collapsed .sidebar-nav__subgroup-label {
    display: none;
  }
  .sidebar-nav--collapsed .sidebar-nav__item {
    justify-content: center;
    padding-inline: var(--ui-space-1);
  }
}
@layer primitives {
  .main {
    margin-inline-start: var(--sidebar-width, calc(var(--unit) * 30));
  }
  /* When sidebar is on the end */
  .main--sidebar-end {
    margin-inline-start: 0;
    margin-inline-end: var(--sidebar-width, calc(var(--unit) * 30));
  }
  /* No sidebar */
  .main--full {
    margin-inline-start: 0;
    margin-inline-end: 0;
  }
}
@layer primitives {
  .container {
    max-inline-size: var(--container-width, calc(var(--unit) * 120));
    padding-inline: var(--ui-space-4);
  }
  .container--center {
    margin-inline: auto;
  }
  /* Size modifiers */
  .container--sm {
    --container-width: calc(var(--unit) * 80);
  }
  .container--md {
    --container-width: calc(var(--unit) * 100);
  }
  .container--lg {
    --container-width: calc(var(--unit) * 120);
  }
  .container--xl {
    --container-width: calc(var(--unit) * 160);
  }
  .container--full {
    max-inline-size: none;
  }
}
/* 04. Components */
@layer components.tokens {
  .accordion {
    --_border-color: var(--ui-accordion-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
    --_border-width: var(--ui-accordion-border-width, 1px);
    --_radius: var(--ui-accordion-radius, var(--ui-radius-md, calc(0.5rem * 1)));
  }
}
@layer components.styles {
  .accordion {
    border-radius: var(--_radius);
    outline: var(--_border-width) solid var(--_border-color);
    outline-offset: calc(var(--_border-width) * -1);
  }
  .accordion > .disclosure {
    --_border-width: 0;
    border: none;
    border-radius: 0;
  }
  .accordion > .disclosure + .disclosure {
    border-block-start: 1px solid var(--_border-color);
  }
  .accordion > .disclosure:first-child .disclosure__trigger {
    border-start-start-radius: var(--_radius);
    border-start-end-radius: var(--_radius);
  }
  .accordion > .disclosure:last-child .disclosure__trigger {
    border-end-start-radius: var(--_radius);
    border-end-end-radius: var(--_radius);
  }
  .accordion > .disclosure:last-child .disclosure__content {
    border-end-start-radius: var(--_radius);
    border-end-end-radius: var(--_radius);
  }
  .accordion--borderless {
    border: none;
  }
  .accordion--borderless > .disclosure + .disclosure {
    border-block-start: none;
  }
  .accordion--separated {
    display: flex;
    flex-direction: column;
    gap: calc(0.5rem * 1);
    border: none;
  }
  .accordion--separated > .disclosure {
    border: 1px solid var(--_border-color);
    border-radius: var(--_radius);
  }
  .accordion--separated > .disclosure + .disclosure {
    border-block-start: 1px solid var(--_border-color);
  }
}
@layer components.tokens {
  .alert {
    --_padding: var(--ui-alert-padding, var(--ui-space-2, 1rem));
    --_border-width: var(--ui-alert-border-width, var(--ui-border-width-sm, 0.0625rem));
    --_gap: var(--ui-alert-gap, var(--ui-space-1, 0.5rem));
    --_radius: var(--ui-alert-radius, var(--ui-radius-md, 0.5rem));
    --_bg: var(--ui-alert-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
    --_border-color: var(--ui-alert-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
    --_color: var(--ui-alert-color, var(--ui-color-text, hsl(220, 10%, 10%)));
    --_icon-color: var(--ui-alert-icon-color, currentcolor);
  }
  .alert--info {
    --_bg: var(--ui-alert-info-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
    --_border-color: var(--ui-alert-info-border, var(--ui-color-primary, hsl(220, 85%, 50%)));
    --_icon-color: var(--ui-alert-info-icon, var(--ui-color-primary, hsl(220, 85%, 50%)));
  }
  .alert--success {
    --_bg: var(--ui-alert-success-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
    --_border-color: var(--ui-alert-success-border, var(--ui-color-success, hsl(142, 70%, 45%)));
    --_icon-color: var(--ui-alert-success-icon, var(--ui-color-success, hsl(142, 70%, 45%)));
  }
  .alert--warning {
    --_bg: var(--ui-alert-warning-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
    --_border-color: var(--ui-alert-warning-border, var(--ui-color-warning, hsl(38, 90%, 50%)));
    --_icon-color: var(--ui-alert-warning-icon, var(--ui-color-warning, hsl(38, 90%, 50%)));
  }
  .alert--danger {
    --_bg: var(--ui-alert-danger-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
    --_border-color: var(--ui-alert-danger-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
    --_icon-color: var(--ui-alert-danger-icon, var(--ui-color-danger, hsl(0, 70%, 50%)));
  }
}
@layer components.styles {
  .alert {
    display: flex;
    align-items: flex-start;
    gap: var(--_gap);
    padding: calc(var(--_padding) - var(--_border-width));
    padding-inline: var(--_padding);
    color: var(--_color);
    background: var(--_bg);
    border: var(--_border-width) solid var(--_border-color);
    border-radius: var(--_radius);
    border-inline-start-width: calc(0.5rem * 0.5);
  }
  .alert__icon {
    flex-shrink: 0;
    color: var(--_icon-color);
  }
  .alert__content {
    flex: 1;
    min-inline-size: 0;
  }
  .alert__title {
    margin: 0;
    font-weight: var(--ui-weight-medium, 500);
    line-height: var(--ui-row-1, 1rem);
  }
  .alert__description {
    margin: 0;
    margin-block-start: calc(0.5rem * 1);
    font-size: var(--ui-font-size-sm, 0.875rem);
    line-height: var(--ui-row-1, 1rem);
    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
  }
  .alert__close {
    flex-shrink: 0;
    align-self: flex-start;
    padding: 0;
    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
    background: none;
    border: none;
    cursor: pointer;
  }
  .alert__close:hover {
    color: var(--ui-color-text, hsl(220, 10%, 10%));
  }
}
@layer components.tokens {
  .avatar {
    --_size: var(--ui-avatar-size, calc(0.5rem * 5));
    --_bg: var(--ui-avatar-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
    --_color: var(--ui-avatar-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
    --_font-size: var(--ui-avatar-font-size, var(--ui-font-size-sm, 0.875rem));
    --_radius: var(--ui-avatar-radius, 50%);
  }
  .avatar--xs {
    --_size: var(--ui-avatar-size-xs, calc(0.5rem * 3));
    --_font-size: var(--ui-avatar-font-size-xs, var(--ui-font-size-xs, 0.75rem));
  }
  .avatar--sm {
    --_size: var(--ui-avatar-size-sm, calc(0.5rem * 4));
    --_font-size: var(--ui-avatar-font-size-sm, var(--ui-font-size-xs, 0.75rem));
  }
  .avatar--lg {
    --_size: var(--ui-avatar-size-lg, calc(0.5rem * 6));
    --_font-size: var(--ui-avatar-font-size-lg, var(--ui-font-size-md, 1rem));
  }
  .avatar--xl {
    --_size: var(--ui-avatar-size-xl, calc(0.5rem * 8));
    --_font-size: var(--ui-avatar-font-size-xl, var(--ui-font-size-lg, 1.25rem));
  }
  .avatar--square {
    --_radius: var(--ui-avatar-radius-square, var(--ui-radius-md, 0.5rem));
  }
}
@layer components.styles {
  .avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    position: relative;
    block-size: var(--_size);
    inline-size: var(--_size);
    overflow: hidden;
    font-size: var(--_font-size);
    font-weight: var(--ui-weight-medium, 500);
    line-height: 1;
    text-transform: uppercase;
    color: var(--_color);
    background: var(--_bg);
    border-radius: var(--_radius);
  }
  .avatar__image {
    position: absolute;
    inset: 0;
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
    border-radius: inherit;
  }
  .avatar__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 100%;
    inline-size: 100%;
    user-select: none;
  }
  .avatar-group {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
  .avatar-group > .avatar {
    margin-inline-start: calc(var(--_size) * -0.25);
    border: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-color-bg, hsl(220, 10%, 98%));
  }
  .avatar-group > .avatar:last-child {
    margin-inline-start: 0;
  }
}
@layer components.tokens {
  .badge {
    --_height: var(--ui-badge-height, calc(var(--ui-row, 1rem) * 1.25));
    --_padding-x: var(--ui-badge-padding-x, var(--ui-space-1, 0.5rem));
    --_font-size: var(--ui-badge-font-size, var(--ui-font-size-xs, 0.75rem));
    --_font-weight: var(--ui-badge-font-weight, var(--ui-weight-medium, 500));
    --_radius: var(--ui-badge-radius, var(--ui-radius-full, 9999px));
    --_bg: var(--ui-badge-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
    --_text: var(--ui-badge-text, var(--ui-color-text, hsl(220, 10%, 10%)));
  }
  .badge--sm {
    --_height: var(--ui-badge-height-sm, var(--ui-row, 1rem));
    --_padding-x: var(--ui-badge-padding-x-sm, var(--ui-space-0, 0.25rem));
    --_font-size: var(--ui-badge-font-size-sm, calc(var(--ui-font-size-xs, 0.75rem) * 0.85));
  }
  .badge--primary {
    --_bg: var(--ui-badge-primary-bg, var(--ui-color-primary, hsl(220, 85%, 50%)));
    --_text: var(--ui-badge-primary-text, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
  }
  .badge--success {
    --_bg: var(--ui-badge-success-bg, var(--ui-color-success, hsl(142, 70%, 45%)));
    --_text: var(--ui-badge-success-text, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
  }
  .badge--warning {
    --_bg: var(--ui-badge-warning-bg, var(--ui-color-warning, hsl(38, 90%, 50%)));
    --_text: var(--ui-badge-warning-text, var(--ui-color-text, hsl(220, 10%, 10%)));
  }
  .badge--danger {
    --_bg: var(--ui-badge-danger-bg, var(--ui-color-danger, hsl(0, 70%, 50%)));
    --_text: var(--ui-badge-danger-text, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
  }
}
@layer components.styles {
  .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    block-size: var(--_height);
    padding-inline: var(--_padding-x);
    font-size: var(--_font-size);
    font-weight: var(--_font-weight);
    line-height: 1;
    white-space: nowrap;
    color: var(--_text);
    background: var(--_bg);
    border-radius: var(--_radius);
  }
}
@layer components.tokens {
  .breadcrumb {
    --_height: var(--ui-breadcrumb-height, var(--ui-row-1, 1rem));
    --_gap: var(--ui-breadcrumb-gap, calc(0.5rem * 1));
    --_separator-color: var(--ui-breadcrumb-separator-color, var(--ui-color-text-muted));
    --_link-color: var(--ui-breadcrumb-link-color, var(--ui-color-text-muted));
    --_current-color: var(--ui-breadcrumb-current-color, var(--ui-color-text));
  }
}
@layer components.styles {
  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--_gap);
    block-size: var(--_height);
    padding: 0;
    margin: 0;
    font-size: var(--ui-font-size-sm, 0.875rem);
    line-height: 1;
    list-style: none;
  }
  .breadcrumb__item {
    display: flex;
    align-items: center;
    gap: var(--_gap);
    block-size: var(--_height);
  }
  .breadcrumb__item:not(:last-child)::after {
    content: var(--ui-breadcrumb-separator, "/");
    color: var(--_separator-color);
  }
  .breadcrumb__link {
    text-decoration: none;
    color: var(--_link-color);
    transition: color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
  }
  .breadcrumb__link:hover {
    text-decoration: underline;
    color: var(--ui-color-primary);
  }
  .breadcrumb__item:last-child .breadcrumb__link,
  .breadcrumb__current {
    color: var(--_current-color);
    pointer-events: none;
  }
  .breadcrumb__item--hidden {
    display: none;
  }
  .breadcrumb__ellipsis {
    color: var(--_separator-color);
  }
}
@layer components.tokens {
  .button {
    --_height: var(--ui-button-height, var(--ui-row-2, 2rem));
    --_padding-x: var(--ui-button-padding-x, var(--ui-space-2, 1rem));
    --_font-size: var(--ui-button-font-size, var(--ui-font-size-sm, 0.875rem));
    --_font-weight: var(--ui-button-font-weight, var(--ui-weight-medium, 500));
    --_radius: var(--ui-button-radius, var(--ui-radius-md, 0.5rem));
    --_bg: var(--ui-button-bg, var(--ui-color-primary, hsl(220, 85%, 50%)));
    --_bg-hover: var(--ui-button-bg-hover, var(--ui-color-primary-dark, hsl(220, 85%, 40%)));
    --_text: var(--ui-button-text, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
  }
  .button--sm {
    --_height: var(--ui-button-height-sm, calc(var(--row, 1rem) * 1.5));
    --_font-size: var(--ui-button-font-size-sm, var(--ui-font-size-xs, 0.75rem));
  }
  .button--lg {
    --_height: var(--ui-button-height-lg, calc(var(--row, 1rem) * 2.5));
    --_padding-x: var(--ui-button-padding-x-lg, var(--ui-space-3, 1.5rem));
    --_font-size: var(--ui-button-font-size-lg, var(--ui-font-size-md, 1rem));
  }
  .button--secondary {
    --_bg: var(--ui-button-secondary-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
    --_bg-hover: var(--ui-button-secondary-bg-hover, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
    --_text: var(--ui-button-secondary-text, var(--ui-color-text, hsl(220, 10%, 10%)));
  }
  .button--ghost {
    --_bg: var(--ui-button-ghost-bg, transparent);
    --_bg-hover: var(--ui-button-ghost-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
    --_text: var(--ui-button-ghost-text, var(--ui-color-primary, hsl(220, 85%, 50%)));
  }
  .button--outline {
    --_bg: var(--ui-button-outline-bg, transparent);
    --_bg-hover: var(--ui-button-outline-bg-hover, var(--ui-color-primary, hsl(220, 85%, 50%)));
    --_text: var(--ui-button-outline-text, var(--ui-color-primary, hsl(220, 85%, 50%)));
    --_text-hover: var(--ui-button-outline-text-hover, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
    --_border: var(--ui-button-outline-border, var(--ui-border-width-sm, 0.0625rem) solid currentColor);
  }
  .button--danger {
    --_bg: var(--ui-button-danger-bg, var(--ui-color-danger, hsl(0, 70%, 50%)));
    --_bg-hover: var(--ui-button-danger-bg-hover, hsl(0, 70%, 40%));
  }
  .button--link {
    --_bg: transparent;
    --_bg-hover: transparent;
    --_text: var(--ui-button-link-text, var(--ui-color-primary, hsl(220, 85%, 50%)));
    --_text-hover: var(--ui-button-link-text-hover, var(--ui-color-primary-dark, hsl(220, 85%, 40%)));
    --_height: auto;
    --_padding-x: 0;
    --_radius: 0;
  }
  .button--icon {
    --_padding-x: 0;
  }
  .button--radius-none {
    --_radius: 0;
  }
  .button--radius-sm {
    --_radius: var(--ui-radius-sm, 0.25rem);
  }
  .button--radius-lg {
    --_radius: var(--ui-radius-lg, 1rem);
  }
  .button--radius-full {
    --_radius: 624.9375rem;
  }
}
@layer components.styles {
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-1, 0.5rem);
    block-size: var(--_height);
    padding-inline: var(--_padding-x);
    margin: 0;
    font-family: var(--ui-font-sans, Noto Sans, system-ui, -apple-system, sans-serif);
    font-size: var(--_font-size);
    font-weight: var(--_font-weight);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    color: var(--_text);
    background: var(--_bg);
    border: var(--_border, none);
    border-radius: var(--_radius);
    cursor: pointer;
    transition: background-color var(--ui-duration-base) var(--ui-ease-default), color var(--ui-duration-base) var(--ui-ease-default), transform var(--ui-duration-fast) var(--ui-ease-default);
  }
  .button:hover, .button--hover {
    color: var(--_text-hover, var(--_text));
    background: var(--_bg-hover);
  }
  .button:focus-visible, .button--focus {
    outline: var(--ui-border-width-md, 0.125rem) solid var(--ui-color-focus, hsl(220, 85%, 65%));
    outline-offset: var(--ui-border-width-md, 0.125rem);
  }
  .button:active, .button--active {
    transform: scale(0.98);
  }
  .button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .button:disabled:hover {
    background: var(--_bg);
    transform: none;
  }
  .button--icon {
    inline-size: var(--_height);
  }
  .button--block {
    inline-size: 100%;
  }
  .button--link {
    text-decoration: underline;
    text-underline-offset: var(--ui-space-quarter);
  }
  .button--link:hover {
    text-decoration-thickness: var(--ui-space-quarter);
  }
  .button__icon {
    flex-shrink: 0;
    block-size: 1em;
    inline-size: 1em;
  }
  .button__icon--start {
    order: -1;
  }
  .button__icon--end {
    order: 1;
  }
  .button--loading {
    position: relative;
    opacity: 0.7;
    pointer-events: none;
  }
  .button--loading::after {
    content: "";
    position: absolute;
    block-size: 1em;
    inline-size: 1em;
    border: 2px solid currentcolor;
    border-radius: 50%;
    animation: button-spin 0.6s linear infinite;
    border-inline-end-color: transparent;
  }
  @keyframes button-spin {
    to {
      transform: rotate(360deg);
    }
  }
}
@layer components.tokens {
  .button-group {
    --_radius: var(--ui-button-group-radius, var(--ui-radius-md, calc(0.5rem / 2)));
  }
}
@layer components.styles {
  .button-group {
    display: inline-flex;
  }
  .button-group > .button:not(:first-child, :last-child) {
    border-radius: 0;
  }
  .button-group > .button:first-child:not(:last-child) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }
  .button-group > .button:last-child:not(:first-child) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }
  .button-group > .button + .button {
    margin-inline-start: calc(0.5rem / -8);
  }
  .button-group > .button:focus-visible {
    z-index: 1;
  }
  .button-group--vertical {
    flex-direction: column;
  }
  .button-group--vertical > .button:not(:first-child, :last-child) {
    border-radius: 0;
  }
  .button-group--vertical > .button:first-child:not(:last-child) {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
  .button-group--vertical > .button:last-child:not(:first-child) {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
  }
  .button-group--vertical > .button + .button {
    margin-block-start: calc(0.5rem / -8);
    margin-inline-start: 0;
  }
  .button-group--attached > .button {
    border-inline-end-width: 0;
  }
  .button-group--attached > .button:last-child {
    border-inline-end-width: 1px;
  }
  .button-group--attached > .button + .button {
    margin-inline-start: 0;
  }
}
@layer components.tokens {
  .card {
    --_padding: var(--ui-card-padding, var(--ui-space-4));
    --_border-width: var(--ui-card-border-width, var(--ui-border-width-sm));
    --_bg: var(--ui-card-bg, var(--ui-color-bg));
    --_border-color: var(--ui-card-border-color, var(--ui-color-border));
    --_radius: var(--ui-card-radius, var(--ui-radius-md));
  }
  .card--subtle {
    --_bg: var(--ui-card-bg-subtle, var(--ui-color-bg-subtle));
  }
  .card--muted {
    --_bg: var(--ui-card-bg-muted, var(--ui-color-bg-muted));
  }
  .card--sm {
    --_padding: var(--ui-card-padding-sm, var(--ui-space-2));
  }
  .card--lg {
    --_padding: var(--ui-card-padding-lg, var(--ui-space-6));
  }
  .card--flush {
    --_padding: 0;
    --_border-width: 0;
  }
}
@layer components.styles {
  .card {
    border: var(--_border-width) solid var(--_border-color);
    border-radius: var(--_radius);
    background: var(--_bg);
    padding: calc(var(--_padding) - var(--_border-width));
    line-height: var(--ui-row-1);
  }
}
@layer components.tokens {
  .checkbox {
    --_size: var(--ui-checkbox-size, calc(0.5rem * 2));
    --_radius: var(--ui-checkbox-radius, var(--ui-radius-sm, 0.25rem));
    --_bg: var(--ui-checkbox-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
    --_bg-checked: var(--ui-checkbox-bg-checked, var(--ui-color-primary, hsl(220, 85%, 50%)));
    --_border-color: var(--ui-checkbox-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
    --_border-color-focus: var(--ui-checkbox-border-color-focus, var(--ui-color-primary, hsl(220, 85%, 50%)));
    --_check-color: var(--ui-checkbox-check-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
  }
  .checkbox--lg {
    --_size: var(--ui-checkbox-size-lg, calc(0.5rem * 3));
  }
  .checkbox--error {
    --_border-color: var(--ui-checkbox-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
    --_border-color-focus: var(--ui-checkbox-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
  }
}
@layer components.styles {
  .checkbox {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    block-size: var(--_size);
    inline-size: var(--_size);
    margin: 0;
    vertical-align: middle;
    background: var(--_bg);
    border: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
    border-radius: var(--_radius);
    cursor: pointer;
    appearance: none;
    transition: background-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
  }
  .checkbox::before {
    content: "";
    block-size: 65%;
    inline-size: 65%;
    background-color: var(--_check-color);
    opacity: 0;
    clip-path: polygon(20% 55%, 40% 75%, 80% 25%, 85% 30%, 40% 85%, 15% 60%);
    transition: opacity var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
  }
  .checkbox:hover:not(:disabled) {
    border-color: var(--_border-color-focus);
  }
  .checkbox:focus-visible {
    border-color: var(--_border-color-focus);
    outline: none;
    box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, hsl(220, 85%, 65%));
  }
  .checkbox:checked {
    background: var(--_bg-checked);
    border-color: var(--_bg-checked);
  }
  .checkbox:checked::before {
    opacity: 1;
  }
  .checkbox:indeterminate {
    background: var(--_bg-checked);
    border-color: var(--_bg-checked);
  }
  .checkbox:indeterminate::before {
    opacity: 1;
    clip-path: polygon(15% 45%, 85% 45%, 85% 55%, 15% 55%);
  }
  .checkbox:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}
@layer components.tokens {
  .code {
    --_font-size: var(--ui-code-font-size, var(--ui-font-size-sm, 0.875rem));
    --_bg: var(--ui-code-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
    --_padding-x: var(--ui-code-padding-x, var(--ui-space-1, 0.5rem));
    --_padding-y: var(--ui-code-padding-y, var(--ui-space-0, 0.25rem));
    --_radius: var(--ui-code-radius, var(--ui-radius-sm, 0.25rem));
  }
  .code--sm {
    --_font-size: var(--ui-font-size-xs, 0.75rem);
  }
  .code-block {
    --_font-size: var(--ui-code-font-size-block, var(--ui-font-size-sm, 0.875rem));
    --_bg: var(--ui-code-bg-block, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
    --_padding: var(--ui-code-padding-block, var(--ui-space-3, 1.5rem));
    --_radius: var(--ui-code-radius-block, var(--ui-radius-md, 0.5rem));
    --_border-color: var(--ui-code-border-color-block, var(--ui-color-border, hsl(220, 10%, 90%)));
  }
}
@layer components.styles {
  .code {
    padding: var(--_padding-y) var(--_padding-x);
    font-family: var(--ui-font-mono, Noto Sans Mono, ui-monospace, Cascadia Code, monospace);
    font-size: var(--_font-size);
    line-height: var(--ui-leading-tight-sm, 1rem);
    background: var(--_bg);
    border-radius: var(--_radius);
  }
  .code-block {
    display: block;
    padding: calc(var(--_padding) - var(--ui-border-width-sm, 0.0625rem));
    overflow-x: auto;
    font-family: var(--ui-font-mono, Noto Sans Mono, ui-monospace, Cascadia Code, monospace);
    font-size: var(--_font-size);
    line-height: var(--ui-leading-tight-sm, 1rem);
    white-space: pre;
    background: var(--_bg);
    border: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
    border-radius: var(--_radius);
  }
  .code-block code {
    padding: 0;
    font-size: inherit;
    background: none;
  }
}
@layer components.tokens {
  .data-list {
    --_gap: var(--ui-data-list-gap, calc(0.5rem * 2));
    --_item-gap: var(--ui-data-list-item-gap, calc(0.5rem * 1));
    --_label-color: var(--ui-data-list-label-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
    --_value-color: var(--ui-data-list-value-color, var(--ui-color-text, hsl(220, 10%, 10%)));
  }
}
@layer components.styles {
  .data-list {
    display: flex;
    flex-direction: column;
    gap: var(--_gap);
    margin: 0;
    line-height: var(--ui-row-1, 1rem);
  }
  .data-list__item {
    display: flex;
    flex-direction: column;
    gap: var(--_item-gap);
  }
  .data-list__label {
    font-size: var(--ui-font-size-sm, 0.875rem);
    font-weight: var(--ui-weight-medium, 500);
    line-height: var(--ui-row-1, 1rem);
    color: var(--_label-color);
  }
  .data-list__value {
    margin: 0;
    line-height: var(--ui-row-1, 1rem);
    color: var(--_value-color);
  }
  .data-list--horizontal .data-list__item {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(0.5rem * 2);
  }
  .data-list--horizontal .data-list__label {
    flex-shrink: 0;
  }
  .data-list--horizontal .data-list__value {
    text-align: end;
  }
  .data-list--divided .data-list__item {
    padding-block-end: var(--_gap);
    border-block-end: 1px solid var(--ui-color-border, hsl(220, 10%, 90%));
  }
  .data-list--divided .data-list__item:last-child {
    padding-block-end: 0;
    border-block-end: none;
  }
  .data-list--striped .data-list__item:nth-child(odd) {
    padding: calc(0.5rem * 1);
    background: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));
    border-radius: var(--ui-radius-sm, 0.25rem);
  }
  .data-list--sm {
    --_gap: calc(0.5rem * 1);
    --_item-gap: 0;
    font-size: var(--ui-font-size-sm, 0.875rem);
  }
  .data-list--lg {
    --_gap: calc(0.5rem * 3);
    --_item-gap: calc(0.5rem * 1);
    font-size: var(--ui-font-size-lg, 1.25rem);
  }
}
@layer components.tokens {
  .dialog {
    --_header-padding: var(--ui-dialog-header-padding, calc(0.5rem * 2) calc(0.5rem * 3));
    --_body-padding: var(--ui-dialog-body-padding, calc(0.5rem * 3));
    --_footer-padding: var(--ui-dialog-footer-padding, calc(0.5rem * 2) calc(0.5rem * 3));
    --_border-color: var(--ui-dialog-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
  }
}
@layer components.styles {
  .dialog .modal__content {
    padding: 0;
  }
  .dialog__header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: calc(0.5rem * 2);
    padding: var(--_header-padding);
    border-block-end: 1px solid var(--_border-color);
  }
  .dialog__title {
    margin: 0;
    font-size: var(--ui-font-size-lg, 1.25rem);
    font-weight: var(--ui-weight-semibold, 600);
    line-height: calc(0.5rem * 3);
  }
  .dialog__close {
    flex-shrink: 0;
    margin-inline-start: auto;
  }
  .dialog__body {
    flex: 1 1 auto;
    padding: var(--_body-padding);
    overflow-y: auto;
  }
  .dialog__footer {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    gap: calc(0.5rem * 1.5);
    padding: var(--_footer-padding);
    border-block-start: 1px solid var(--_border-color);
  }
  .dialog--borderless .dialog__header {
    border-block-end: none;
  }
  .dialog--borderless .dialog__footer {
    border-block-start: none;
  }
}
@layer components.tokens {
  .disclosure {
    --_border-color: var(--ui-disclosure-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
    --_border-width: var(--ui-disclosure-border-width, 1px);
    --_radius: var(--ui-disclosure-radius, var(--ui-radius-md, calc(0.5rem * 1)));
    --_trigger-height: var(--ui-disclosure-trigger-height, var(--ui-row-3, calc(1rem * 3)));
    --_padding-x: var(--ui-disclosure-padding-x, calc(0.5rem * 2));
    --_padding-y: var(--ui-disclosure-padding-y, calc(0.5rem * 2));
  }
}
@layer components.styles {
  .disclosure {
    box-sizing: border-box;
    border-radius: var(--_radius);
    outline: var(--_border-width) solid var(--_border-color);
    outline-offset: calc(var(--_border-width) * -1);
  }
  .disclosure:not([open]) {
    block-size: var(--_trigger-height);
  }
  .disclosure__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(0.5rem * 2);
    block-size: var(--_trigger-height);
    inline-size: 100%;
    padding-inline: var(--_padding-x);
    font-weight: var(--ui-weight-medium, 500);
    line-height: 1;
    text-align: start;
    cursor: pointer;
    list-style: none;
  }
  .disclosure__trigger::-webkit-details-marker {
    display: none;
  }
  .disclosure__trigger::marker {
    display: none;
  }
  .disclosure__trigger:hover {
    background: var(--ui-color-bg-subtle, rgba(0, 0, 0, 0.02));
  }
  .disclosure__icon {
    flex-shrink: 0;
    transition: transform var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
  }
  .disclosure[open] .disclosure__icon {
    transform: rotate(180deg);
  }
  .disclosure__content {
    padding: 0 var(--_padding-x) var(--_padding-y);
  }
  .disclosure--animate .disclosure__content {
    animation: disclosure-open var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
  }
  @keyframes disclosure-open {
    from {
      opacity: 0;
      transform: translateY(calc(0.5rem * -1));
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .disclosure--borderless {
    --_border-width: 0;
    border: none;
    border-radius: 0;
  }
  .disclosure--flush .disclosure__trigger {
    padding-inline: 0;
  }
  .disclosure--flush .disclosure__content {
    padding-inline: 0;
  }
}
@layer components.tokens {
  .divider {
    --_color: var(--ui-divider-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
    --_line-size: var(--ui-divider-line-size, 1px);
    --_height: var(--ui-divider-height, 0.5rem);
    --_gap: var(--ui-divider-gap, calc(0.5rem * 2));
  }
}
@layer components.styles {
  .divider {
    display: flex;
    align-items: center;
    block-size: var(--_height);
    margin: var(--_gap) 0;
    font-size: var(--ui-font-size-sm, 0.875rem);
    line-height: 1;
    color: var(--ui-color-text-muted);
  }
  .divider::before,
  .divider::after {
    content: "";
    flex: 1;
    block-size: var(--_line-size);
    background: var(--_color);
  }
  .divider:not(:empty) {
    --_height: var(--ui-row-1, 1rem);
  }
  .divider:not(:empty)::before {
    margin-inline-end: calc(0.5rem * 2);
  }
  .divider:not(:empty)::after {
    margin-inline-start: calc(0.5rem * 2);
  }
  .divider:empty::after {
    display: none;
  }
  .divider--vertical {
    flex-direction: column;
    align-self: stretch;
    margin: 0 var(--_gap);
    writing-mode: vertical-rl;
  }
  .divider--vertical::before,
  .divider--vertical::after {
    flex: 1;
    block-size: auto;
    inline-size: var(--_size);
  }
  .divider--start::before {
    display: none;
  }
  .divider--start:not(:empty)::after {
    margin-inline-start: calc(0.5rem * 2);
  }
  .divider--end::after {
    display: none;
  }
  .divider--end:not(:empty)::before {
    margin-inline-end: calc(0.5rem * 2);
  }
  .divider--dashed::before,
  .divider--dashed::after {
    background: repeating-linear-gradient(90deg, var(--_color) 0, var(--_color) calc(0.5rem / 2), transparent calc(0.5rem / 2), transparent 0.5rem);
  }
  .divider--vertical.divider--dashed::before,
  .divider--vertical.divider--dashed::after {
    background: repeating-linear-gradient(180deg, var(--_color) 0, var(--_color) calc(0.5rem / 2), transparent calc(0.5rem / 2), transparent 0.5rem);
  }
}
@layer components.tokens {
  .drawer {
    --_size: var(--ui-drawer-size, calc(0.5rem * 40));
    --_max-size: var(--ui-drawer-max-size, 90%);
    --_bg: var(--ui-drawer-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
    --_shadow: var(--ui-drawer-shadow, var(--shadow-lg));
    --_header-padding: var(--ui-drawer-header-padding, calc(0.5rem * 2) calc(0.5rem * 3));
    --_body-padding: var(--ui-drawer-body-padding, calc(0.5rem * 3));
    --_footer-padding: var(--ui-drawer-footer-padding, calc(0.5rem * 2) calc(0.5rem * 3));
    --_border-color: var(--ui-drawer-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
  }
  .drawer--sm {
    --_size: calc(0.5rem * 30);
  }
  .drawer--lg {
    --_size: calc(0.5rem * 50);
  }
  .drawer--full {
    --_size: 100%;
    --_max-size: 100%;
  }
}
@layer components.styles {
  .drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--ui-z-drawer, 900);
    background: var(--ui-overlay-bg, rgba(0, 0, 0, 0.5));
  }
  .drawer-overlay[data-state=open] {
    animation: drawer-overlay-in var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
  }
  .drawer-overlay[data-state=closed] {
    animation: drawer-overlay-out var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
  }
  @keyframes drawer-overlay-in {
    from {
      opacity: 0;
    }
  }
  @keyframes drawer-overlay-out {
    to {
      opacity: 0;
    }
  }
  .drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: var(--ui-z-drawer, 900);
    background: var(--_bg);
    box-shadow: var(--_shadow);
  }
  .drawer--end {
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: var(--_size);
    max-inline-size: var(--_max-size);
    box-shadow: calc(var(--ui-border-width-sm, 1px) * -1) 0 0 var(--_border-color);
  }
  .drawer--start {
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--_size);
    max-inline-size: var(--_max-size);
    box-shadow: var(--ui-border-width-sm, 1px) 0 0 var(--_border-color);
  }
  .drawer--top {
    inset-block-start: 0;
    inset-inline: 0;
    block-size: var(--_size);
    max-block-size: var(--_max-size);
    box-shadow: 0 var(--ui-border-width-sm, 1px) 0 var(--_border-color);
  }
  .drawer--bottom {
    inset-block-end: 0;
    inset-inline: 0;
    block-size: var(--_size);
    max-block-size: var(--_max-size);
    box-shadow: 0 calc(var(--ui-border-width-sm, 1px) * -1) 0 var(--_border-color);
  }
  .drawer--end[data-state=open] {
    animation: drawer-slide-in-end var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
  }
  .drawer--end[data-state=closed] {
    animation: drawer-slide-out-end var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
  }
  .drawer--start[data-state=open] {
    animation: drawer-slide-in-start var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
  }
  .drawer--start[data-state=closed] {
    animation: drawer-slide-out-start var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
  }
  .drawer--top[data-state=open] {
    animation: drawer-slide-in-top var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
  }
  .drawer--top[data-state=closed] {
    animation: drawer-slide-out-top var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
  }
  .drawer--bottom[data-state=open] {
    animation: drawer-slide-in-bottom var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
  }
  .drawer--bottom[data-state=closed] {
    animation: drawer-slide-out-bottom var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
  }
  @keyframes drawer-slide-in-end {
    from {
      transform: translateX(100%);
    }
  }
  @keyframes drawer-slide-out-end {
    to {
      transform: translateX(100%);
    }
  }
  @keyframes drawer-slide-in-start {
    from {
      transform: translateX(-100%);
    }
  }
  @keyframes drawer-slide-out-start {
    to {
      transform: translateX(-100%);
    }
  }
  @keyframes drawer-slide-in-top {
    from {
      transform: translateY(-100%);
    }
  }
  @keyframes drawer-slide-out-top {
    to {
      transform: translateY(-100%);
    }
  }
  @keyframes drawer-slide-in-bottom {
    from {
      transform: translateY(100%);
    }
  }
  @keyframes drawer-slide-out-bottom {
    to {
      transform: translateY(100%);
    }
  }
  .drawer__header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: calc(0.5rem * 2);
    padding: var(--_header-padding);
    box-shadow: inset 0 calc(var(--ui-border-width-sm, 1px) * -1) 0 var(--_border-color);
  }
  .drawer__title {
    margin: 0;
    font-size: var(--ui-font-size-lg, 1.25rem);
    font-weight: var(--ui-weight-semibold, 600);
    line-height: var(--ui-row-1, 1rem);
  }
  .drawer__description {
    margin: 0;
    font-size: var(--ui-font-size-sm, 0.875rem);
    line-height: var(--ui-row-1, 1rem);
    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
  }
  .drawer__close {
    flex-shrink: 0;
    margin-inline-start: auto;
  }
  .drawer__body {
    flex: 1 1 auto;
    padding: var(--_body-padding);
    overflow-y: auto;
    line-height: var(--ui-row-1, 1rem);
  }
  .drawer__footer {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    gap: calc(0.5rem * 2);
    padding: var(--_footer-padding);
    box-shadow: inset 0 var(--ui-border-width-sm, 1px) 0 var(--_border-color);
  }
}
@layer components.tokens {
  .field {
    --_gap: var(--ui-field-gap, 0);
  }
}
@layer components.styles {
  .field {
    display: flex;
    flex-direction: column;
    gap: var(--_gap);
  }
  .field__control {
    display: flex;
    flex-direction: column;
  }
  .field--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .field--horizontal > .field__label {
    flex: 0 0 auto;
    min-inline-size: calc(0.5rem * 15);
    padding-block-start: calc(0.5rem * 1);
  }
  .field--horizontal > .field__control {
    flex: 1 1 0;
    min-inline-size: calc(0.5rem * 20);
  }
}
@layer components.tokens {
  .form-error {
    --_color: var(--ui-form-error-color, var(--ui-color-danger));
    --_size: var(--ui-form-error-size, var(--ui-font-size-sm, 0.875rem));
    --_gap: var(--ui-form-error-gap, 0);
  }
}
@layer components.styles {
  .form-error {
    display: flex;
    align-items: flex-start;
    gap: var(--_gap);
    margin-block-start: var(--_gap);
    font-size: var(--_size);
    line-height: var(--ui-leading-tight-sm, var(--ui-row-1));
    color: var(--_color);
  }
  .form-error__icon {
    flex-shrink: 0;
  }
}
@layer components.tokens {
  .form-helper {
    --_color: var(--ui-form-helper-color, var(--ui-color-text-muted));
    --_size: var(--ui-form-helper-size, var(--ui-font-size-sm, 0.875rem));
    --_gap: var(--ui-form-helper-gap, 0);
  }
}
@layer components.styles {
  .form-helper {
    display: block;
    margin-block-start: var(--_gap);
    font-size: var(--_size);
    line-height: var(--ui-leading-tight-sm, var(--ui-row-1));
    color: var(--_color);
  }
}
@layer components.tokens {
  .heading {
    --_font-size: var(--ui-heading-font-size, var(--ui-font-size-xl, 1.5rem));
    --_line-height: var(--ui-heading-line-height, var(--ui-leading-xl, 2rem));
    --_weight: var(--ui-heading-weight, var(--ui-weight-bold, 700));
    --_color: var(--ui-heading-color, var(--ui-color-text, hsl(220, 10%, 10%)));
  }
  .heading--4xl {
    --_font-size: var(--ui-heading-font-size-4xl, var(--ui-font-size-4xl, 2.5rem));
    --_line-height: var(--ui-heading-line-height-4xl, var(--ui-leading-4xl, 3rem));
  }
  .heading--3xl {
    --_font-size: var(--ui-heading-font-size-3xl, var(--ui-font-size-3xl, 2rem));
    --_line-height: var(--ui-heading-line-height-3xl, var(--ui-leading-3xl, 2.5rem));
  }
  .heading--2xl {
    --_font-size: var(--ui-heading-font-size-2xl, var(--ui-font-size-2xl, 1.75rem));
    --_line-height: var(--ui-heading-line-height-2xl, var(--ui-leading-2xl, 2rem));
  }
  .heading--xl {
    --_font-size: var(--ui-heading-font-size-xl, var(--ui-font-size-xl, 1.5rem));
    --_line-height: var(--ui-heading-line-height-xl, var(--ui-leading-xl, 2rem));
  }
  .heading--lg {
    --_font-size: var(--ui-heading-font-size-lg, var(--ui-font-size-lg, 1.25rem));
    --_line-height: var(--ui-heading-line-height-lg, var(--ui-leading-lg, 2rem));
  }
  .heading--md {
    --_font-size: var(--ui-heading-font-size-md, var(--ui-font-size-md, 1rem));
    --_line-height: var(--ui-heading-line-height-md, var(--ui-leading-tight-md, 1.5rem));
  }
  .heading--sm {
    --_font-size: var(--ui-heading-font-size-sm, var(--ui-font-size-sm, 0.875rem));
    --_line-height: var(--ui-heading-line-height-sm, var(--ui-leading-tight-sm, 1rem));
  }
}
@layer components.styles {
  .heading {
    margin: 0;
    font-size: var(--_font-size);
    font-weight: var(--_weight);
    line-height: var(--_line-height);
    color: var(--_color);
  }
}
@layer components.tokens {
  .icon {
    --_size: var(--ui-icon-size, 1em);
    --_stroke: var(--ui-icon-stroke, 2);
  }
  .icon--xs {
    --_size: var(--ui-icon-size-xs, calc(0.5rem * 2));
  }
  .icon--sm {
    --_size: var(--ui-icon-size-sm, calc(0.5rem * 3));
  }
  .icon--md {
    --_size: var(--ui-icon-size-md, calc(0.5rem * 4));
  }
  .icon--lg {
    --_size: var(--ui-icon-size-lg, calc(0.5rem * 5));
  }
  .icon--xl {
    --_size: var(--ui-icon-size-xl, calc(0.5rem * 6));
  }
  .icon--stroke-thin {
    --_stroke: var(--ui-icon-stroke-thin, 1);
  }
  .icon--stroke-thick {
    --_stroke: var(--ui-icon-stroke-thick, 2.5);
  }
}
@layer components.styles {
  .icon {
    display: inline-block;
    flex-shrink: 0;
    block-size: var(--_size);
    inline-size: var(--_size);
    vertical-align: middle;
    color: currentcolor;
    fill: none;
    stroke: currentcolor;
    stroke-width: var(--_stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .icon--filled {
    fill: currentcolor;
    stroke: none;
  }
  .icon--spin {
    animation: icon-spin 1s linear infinite;
  }
  @keyframes icon-spin {
    to {
      transform: rotate(360deg);
    }
  }
}
@layer components.tokens {
  .input {
    --_height: var(--ui-input-height, var(--ui-row-2, 2rem));
    --_padding-x: var(--ui-input-padding-x, var(--ui-space-1, 0.5rem));
    --_font-size: var(--ui-input-font-size, var(--ui-font-size-sm, 0.875rem));
    --_radius: var(--ui-input-radius, var(--ui-radius-md, 0.5rem));
    --_bg: var(--ui-input-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
    --_border-color: var(--ui-input-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
    --_border-color-focus: var(--ui-input-border-color-focus, var(--ui-color-primary, hsl(220, 85%, 50%)));
    --_text: var(--ui-input-text, var(--ui-color-text, hsl(220, 10%, 10%)));
    --_placeholder: var(--ui-input-placeholder, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
  }
  .input--sm {
    --_height: var(--ui-input-height-sm, calc(1rem * 1.5));
    --_font-size: var(--ui-input-font-size-sm, var(--ui-font-size-xs, 0.75rem));
  }
  .input--lg {
    --_height: var(--ui-input-height-lg, calc(1rem * 2.5));
    --_padding-x: var(--ui-input-padding-x-lg, var(--ui-space-2, 1rem));
    --_font-size: var(--ui-input-font-size-lg, var(--ui-font-size-md, 1rem));
  }
  .input--filled {
    --_bg: var(--ui-input-filled-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
    --_border-color: transparent;
  }
  .input--ghost {
    --_bg: transparent;
    --_border-color: transparent;
  }
  .input--error {
    --_border-color: var(--ui-input-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
    --_border-color-focus: var(--ui-input-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
  }
  .input--success {
    --_border-color: var(--ui-input-success-border, var(--ui-color-success, hsl(142, 70%, 45%)));
    --_border-color-focus: var(--ui-input-success-border, var(--ui-color-success, hsl(142, 70%, 45%)));
  }
}
@layer components.styles {
  .input {
    display: inline-flex;
    align-items: center;
    block-size: var(--_height);
    padding-inline: var(--_padding-x);
    font-family: inherit;
    font-size: var(--_font-size);
    line-height: 1;
    color: var(--_text);
    background: var(--_bg);
    border: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
    border-radius: var(--_radius);
    transition: border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
  }
  .input::placeholder {
    color: var(--_placeholder);
  }
  .input:hover:not(:disabled, :focus) {
    border-color: var(--ui-color-border-strong, hsl(220, 10%, 80%));
  }
  .input:focus, .input--focus {
    border-color: var(--_border-color-focus);
    outline: none;
    box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, hsl(220, 85%, 65%));
  }
  .input:disabled, .input--disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .input:read-only {
    background: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));
  }
  .input--block {
    inline-size: 100%;
  }
  .input-group {
    display: inline-flex;
    align-items: stretch;
    position: relative;
  }
  .input-group .input {
    flex: 1;
  }
  .input-group--has-prefix .input {
    padding-inline-start: calc(var(--_height) + var(--ui-space-half, 0.25rem));
  }
  .input-group--has-suffix .input {
    padding-inline-end: calc(var(--_height) + var(--ui-space-half, 0.25rem));
  }
  .input-group__addon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset-block: 0;
    inline-size: var(--_height, 2rem);
    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
    pointer-events: none;
  }
  .input-group__addon--start {
    inset-inline-start: 0;
  }
  .input-group__addon--end {
    inset-inline-end: 0;
  }
  .input-group__addon--interactive {
    cursor: pointer;
    pointer-events: auto;
  }
}
@layer components.tokens {
  .label {
    --_font-size: var(--ui-label-font-size, var(--ui-font-size-sm, 0.875rem));
    --_color: var(--ui-label-color, var(--ui-color-text, hsl(220, 10%, 10%)));
    --_required-color: var(--ui-label-required-color, var(--ui-color-danger, hsl(0, 70%, 50%)));
  }
  .label--lg {
    --_font-size: var(--ui-label-font-size-lg, var(--ui-font-size-md, 1rem));
  }
}
@layer components.styles {
  .label {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-size: var(--_font-size);
    font-weight: var(--ui-weight-medium, 500);
    line-height: var(--ui-leading-tight-sm, var(--ui-row-1));
    color: var(--_color);
    cursor: pointer;
  }
  .label[aria-disabled=true] {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .label__required {
    color: var(--_required-color);
  }
  .label__optional {
    font-weight: var(--ui-weight-normal, 400);
    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
  }
}
@layer components.tokens {
  .link {
    --_color: var(--ui-link-color, var(--ui-color-primary));
    --_color-hover: var(--ui-link-color-hover, var(--ui-color-primary-hover, color-mix(in srgb, var(--_color) 85%, black)));
    --_color-visited: var(--ui-link-color-visited, var(--_color));
    --_decoration: var(--ui-link-decoration, underline);
    --_decoration-hover: var(--ui-link-decoration-hover, underline);
  }
  .link--muted {
    --_color: var(--ui-link-color-muted, var(--ui-color-text-muted));
    --_color-hover: var(--ui-link-color-muted-hover, var(--ui-color-text));
  }
  .link--subtle {
    --_decoration: none;
    --_decoration-hover: underline;
  }
}
@layer components.styles {
  .link {
    text-decoration: var(--_decoration);
    color: var(--_color);
    cursor: pointer;
    transition: color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
    text-underline-offset: calc(0.5rem / 4);
  }
  .link:hover {
    text-decoration: var(--_decoration-hover);
    color: var(--_color-hover);
  }
  .link:focus-visible {
    border-radius: calc(0.5rem / 4);
    outline: 2px solid var(--ui-color-focus, var(--ui-color-primary));
    outline-offset: calc(0.5rem / 4);
  }
  .link:visited {
    color: var(--_color-visited);
  }
  .link--disabled,
  .link[aria-disabled=true] {
    color: var(--ui-color-text-muted);
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
  }
  .link--external::after {
    content: "↗";
    display: inline-block;
    margin-inline-start: calc(0.5rem / 4);
    font-size: 0.75em;
  }
}
@layer components.tokens {
  .menu {
    --_min-width: var(--ui-menu-min-width, calc(0.5rem * 16));
    --_max-height: var(--ui-menu-max-height, calc(0.5rem * 40));
    --_padding: var(--ui-menu-padding, calc(0.5rem * 1));
    --_radius: var(--ui-menu-radius, var(--ui-radius-md, 0.5rem));
    --_bg: var(--ui-menu-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
    --_border-color: var(--ui-menu-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
    --_shadow: var(--ui-menu-shadow, var(--shadow-lg));
    --_item-padding: var(--ui-menu-item-padding, calc(0.5rem * 1) calc(0.5rem * 2));
    --_item-radius: var(--ui-menu-item-radius, var(--ui-radius-sm, 0.25rem));
    --_item-bg-hover: var(--ui-menu-item-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
  }
}
@layer components.styles {
  .menu {
    min-inline-size: var(--_min-width);
    max-block-size: var(--_max-height);
    padding: var(--_padding);
    overflow-y: auto;
    background: var(--_bg);
    border-radius: var(--_radius);
    outline: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
    box-shadow: var(--_shadow);
    outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
  }
  .menu__group {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .menu__label {
    padding: var(--_item-padding);
    font-size: var(--ui-font-size-xs, 0.75rem);
    font-weight: var(--ui-weight-medium, 500);
    line-height: var(--ui-row-1, 1rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
  }
  .menu__item {
    display: flex;
    align-items: center;
    gap: calc(0.5rem * 1);
    padding: var(--_item-padding);
    font-size: var(--ui-font-size-sm, 0.875rem);
    line-height: var(--ui-row-1, 1rem);
    text-decoration: none;
    color: var(--ui-color-text, hsl(220, 10%, 10%));
    background: transparent;
    border: none;
    border-radius: var(--_item-radius);
    cursor: pointer;
    transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
  }
  .menu__item:hover, .menu__item:focus-visible {
    background: var(--_item-bg-hover);
    outline: none;
  }
  .menu__item--danger {
    color: var(--ui-color-danger, hsl(0, 70%, 50%));
  }
  .menu__item--danger:hover, .menu__item--danger:focus-visible {
    color: var(--ui-color-danger, hsl(0, 70%, 50%));
  }
  .menu__item--disabled,
  .menu__item[aria-disabled=true] {
    opacity: 0.5;
    pointer-events: none;
  }
  .menu__item-icon {
    flex-shrink: 0;
    block-size: calc(0.5rem * 2);
    inline-size: calc(0.5rem * 2);
  }
  .menu__item-shortcut {
    margin-inline-start: auto;
    font-size: var(--ui-font-size-xs, 0.75rem);
    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
  }
  .menu__separator {
    display: flex;
    align-items: center;
    block-size: calc(0.5rem * 2);
    margin: 0;
  }
  .menu__separator::before {
    content: "";
    flex: 1;
    block-size: var(--ui-border-width-sm, 1px);
    background: var(--ui-color-border, hsl(220, 10%, 90%));
  }
  .menu__item--check,
  .menu__item--radio {
    position: relative;
    padding-inline-start: calc(0.5rem * 4);
  }
  .menu__item-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset-inline-start: calc(0.5rem * 1);
    block-size: calc(0.5rem * 2);
    inline-size: calc(0.5rem * 2);
  }
}
@layer components.tokens {
  .modal {
    --_bg: var(--ui-modal-bg, var(--ui-color-bg, white));
    --_radius: var(--ui-modal-radius, var(--ui-radius-lg, calc(0.5rem * 1.5)));
    --_shadow: var(--ui-modal-shadow, 0 calc(0.5rem * 3) calc(0.5rem * 6) rgb(0 0 0 / 0.25));
    --_padding: var(--ui-modal-padding, calc(0.5rem * 3));
    --_max-width: var(--ui-modal-max-width, calc(0.5rem * 60));
    --_max-height: var(--ui-modal-max-height, calc(100vh - 0.5rem * 8));
    --_z: var(--ui-modal-z, var(--ui-z-modal, 400));
  }
  .modal--sm {
    --_max-width: var(--ui-modal-max-width-sm, calc(0.5rem * 40));
  }
  .modal--lg {
    --_max-width: var(--ui-modal-max-width-lg, calc(0.5rem * 80));
  }
  .modal--full {
    --_max-width: calc(100vw - 0.5rem * 4);
    --_max-height: calc(100vh - 0.5rem * 4);
    --_radius: 0;
  }
}
@layer components.styles {
  .modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    z-index: var(--_z);
    padding: calc(0.5rem * 2);
  }
  .modal__content {
    display: flex;
    flex-direction: column;
    position: relative;
    inline-size: 100%;
    max-block-size: var(--_max-height);
    max-inline-size: var(--_max-width);
    padding: var(--_padding);
    overflow: hidden;
    background: var(--_bg);
    border-radius: var(--_radius);
    box-shadow: var(--_shadow);
  }
  .modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
  }
  .modal--entering .modal__content,
  .modal--visible .modal__content {
    opacity: 1;
    transform: scale(1);
  }
  .modal--exiting .modal__content,
  .modal--hidden .modal__content {
    opacity: 0;
    transform: scale(0.95);
  }
  .modal--animate .modal__content {
    transition: opacity var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease), transform var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
  }
  .modal--hidden {
    visibility: hidden;
    pointer-events: none;
  }
}
@layer components.tokens {
  .overlay {
    --_bg: var(--ui-overlay-bg, rgb(0 0 0 / 0.5));
    --_z: var(--ui-overlay-z, var(--ui-z-overlay, 300));
  }
  .overlay--light {
    --_bg: var(--ui-overlay-bg-light, rgb(255 255 255 / 0.7));
  }
  .overlay--blur {
    --_bg: var(--ui-overlay-bg-blur, rgb(0 0 0 / 0.3));
  }
}
@layer components.styles {
  .overlay {
    position: fixed;
    inset: 0;
    z-index: var(--_z);
    background: var(--_bg);
  }
  .overlay--blur {
    backdrop-filter: blur(calc(0.5rem * 0.5));
  }
  .overlay--entering,
  .overlay--visible {
    opacity: 1;
  }
  .overlay--exiting,
  .overlay--hidden {
    opacity: 0;
    pointer-events: none;
  }
  .overlay--animate {
    transition: opacity var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
  }
}
@layer components.tokens {
  .pagination {
    --_gap: var(--ui-pagination-gap, calc(0.5rem * 0.5));
    --_item-size: var(--ui-pagination-item-size, calc(0.5rem * 4));
    --_item-radius: var(--ui-pagination-item-radius, var(--ui-radius-sm, 0.25rem));
    --_item-bg: var(--ui-pagination-item-bg, transparent);
    --_item-bg-hover: var(--ui-pagination-item-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
    --_item-bg-active: var(--ui-pagination-item-bg-active, var(--ui-color-primary));
    --_item-color: var(--ui-pagination-item-color, var(--ui-color-text, hsl(220, 10%, 10%)));
    --_item-color-active: var(--ui-pagination-item-color-active, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
  }
}
@layer components.styles {
  .pagination {
    display: flex;
    align-items: center;
    gap: var(--_gap);
  }
  .pagination__list {
    display: flex;
    align-items: center;
    gap: var(--_gap);
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .pagination__item {
    display: flex;
  }
  .pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    block-size: var(--_item-size);
    min-inline-size: var(--_item-size);
    padding-inline: calc(0.5rem * 1);
    font-size: var(--ui-font-size-sm, 0.875rem);
    text-decoration: none;
    color: var(--_item-color);
    background: var(--_item-bg);
    border-radius: var(--_item-radius);
    transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease), color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
  }
  .pagination__link:hover {
    background: var(--_item-bg-hover);
  }
  .pagination__link[aria-current=page],
  .pagination__link--active {
    color: var(--_item-color-active);
    background: var(--_item-bg-active);
    pointer-events: none;
  }
  .pagination__link[aria-disabled=true],
  .pagination__link--disabled {
    opacity: 0.5;
    pointer-events: none;
  }
  .pagination__prev,
  .pagination__next {
    display: inline-flex;
    align-items: center;
    gap: calc(0.5rem * 0.5);
    padding-inline: calc(0.5rem * 1.5);
  }
  .pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    block-size: var(--_item-size);
    min-inline-size: var(--_item-size);
    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
  }
  .pagination--sm {
    --_item-size: calc(0.5rem * 3);
    --_gap: calc(0.5rem * 0.25);
  }
  .pagination--lg {
    --_item-size: calc(0.5rem * 5);
    --_gap: calc(0.5rem * 0.75);
  }
}
@layer components.tokens {
  .popover {
    --_bg: var(--ui-popover-bg, var(--ui-color-bg, white));
    --_border-color: var(--ui-popover-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
    --_radius: var(--ui-popover-radius, var(--ui-radius-md, calc(0.5rem * 1)));
    --_shadow: var(--ui-popover-shadow, 0 calc(0.5rem / 2) calc(0.5rem * 2) rgb(0 0 0 / 0.15));
    --_padding: var(--ui-popover-padding, calc(0.5rem * 2));
    --_max-width: var(--ui-popover-max-width, calc(0.5rem * 40));
    --_z: var(--ui-popover-z, var(--ui-z-popover, 500));
    --_arrow-size: var(--ui-popover-arrow-size, calc(0.5rem));
  }
}
@layer components.styles {
  .popover {
    position: absolute;
    z-index: var(--_z);
    max-inline-size: var(--_max-width);
    padding: var(--_padding);
    line-height: var(--ui-row-1, 1rem);
    background: var(--_bg);
    border-radius: var(--_radius);
    outline: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
    box-shadow: var(--_shadow);
    outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
  }
  .popover__header {
    padding-block-end: calc(0.5rem * 2);
    margin-block-end: calc(0.5rem * 2);
    box-shadow: inset 0 calc(var(--ui-border-width-sm, 1px) * -1) 0 var(--_border-color);
  }
  .popover__title {
    margin: 0;
    font-size: var(--ui-font-size-md, 1rem);
    font-weight: var(--ui-weight-semibold, 600);
  }
  .popover--top::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    border: var(--_arrow-size) solid transparent;
    border-block-start-color: var(--_bg);
    transform: translateX(-50%);
  }
  .popover--top::before {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    border: calc(var(--_arrow-size) + 1px) solid transparent;
    border-block-start-color: var(--_border-color);
    transform: translateX(-50%);
  }
  .popover--bottom::after {
    content: "";
    position: absolute;
    inset-block-end: 100%;
    inset-inline-start: 50%;
    border: var(--_arrow-size) solid transparent;
    border-block-end-color: var(--_bg);
    transform: translateX(-50%);
  }
  .popover--bottom::before {
    content: "";
    position: absolute;
    inset-block-end: 100%;
    inset-inline-start: 50%;
    border: calc(var(--_arrow-size) + 1px) solid transparent;
    border-block-end-color: var(--_border-color);
    transform: translateX(-50%);
  }
  .popover--visible {
    opacity: 1;
  }
  .popover--hidden {
    opacity: 0;
    pointer-events: none;
  }
  .popover--animate {
    transition: opacity var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
  }
}
@layer components.tokens {
  .progress {
    --_height: var(--ui-progress-height, calc(0.5rem * 1));
    --_bg: var(--ui-progress-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
    --_fill: var(--ui-progress-fill, var(--ui-color-primary));
    --_radius: var(--ui-progress-radius, var(--ui-radius-full, 9999px));
  }
  .progress--sm {
    --_height: calc(0.5rem * 1);
  }
  .progress--lg {
    --_height: calc(0.5rem * 2);
  }
}
@layer components.styles {
  .progress {
    position: relative;
    block-size: var(--_height);
    overflow: hidden;
    background: var(--_bg);
    border-radius: var(--_radius);
  }
  .progress__bar {
    block-size: 100%;
    background: var(--_fill);
    border-radius: var(--_radius);
    transition: inline-size var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
  }
  .progress--indeterminate .progress__bar {
    inline-size: 30%;
    animation: progress-indeterminate 1.5s infinite ease-in-out;
  }
  @keyframes progress-indeterminate {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(400%);
    }
  }
  .progress--striped .progress__bar {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 0.5rem 0.5rem;
  }
  .progress--animated .progress__bar {
    animation: progress-stripes 1s linear infinite;
  }
  @keyframes progress-stripes {
    from {
      background-position: 0.5rem 0;
    }
    to {
      background-position: 0 0;
    }
  }
  .progress--success {
    --_fill: var(--ui-color-success);
  }
  .progress--warning {
    --_fill: var(--ui-color-warning);
  }
  .progress--danger {
    --_fill: var(--ui-color-danger);
  }
}
@layer components.tokens {
  .radio {
    --_size: var(--ui-radio-size, calc(0.5rem * 2));
    --_bg: var(--ui-radio-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
    --_bg-checked: var(--ui-radio-bg-checked, var(--ui-color-primary, hsl(220, 85%, 50%)));
    --_border-color: var(--ui-radio-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
    --_border-color-focus: var(--ui-radio-border-color-focus, var(--ui-color-primary, hsl(220, 85%, 50%)));
    --_dot-color: var(--ui-radio-dot-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
  }
  .radio--lg {
    --_size: var(--ui-radio-size-lg, calc(0.5rem * 3));
  }
  .radio--error {
    --_border-color: var(--ui-radio-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
    --_border-color-focus: var(--ui-radio-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
  }
}
@layer components.styles {
  .radio {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    block-size: var(--_size);
    inline-size: var(--_size);
    margin: 0;
    vertical-align: middle;
    background: var(--_bg);
    border: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
    border-radius: 50%;
    cursor: pointer;
    appearance: none;
    transition: background-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
  }
  .radio::before {
    content: "";
    block-size: 50%;
    inline-size: 50%;
    background-color: var(--_dot-color);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: opacity var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), transform var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
  }
  .radio:hover:not(:disabled) {
    border-color: var(--_border-color-focus);
  }
  .radio:focus-visible {
    border-color: var(--_border-color-focus);
    outline: none;
    box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, hsl(220, 85%, 65%));
  }
  .radio:checked {
    background: var(--_bg-checked);
    border-color: var(--_bg-checked);
  }
  .radio:checked::before {
    opacity: 1;
    transform: scale(1);
  }
  .radio:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}
@layer components.tokens {
  .select {
    --_height: var(--ui-select-height, var(--ui-row-2, 2rem));
    --_padding-x: var(--ui-select-padding-x, var(--ui-space-1, 0.5rem));
    --_font-size: var(--ui-select-font-size, var(--ui-font-size-sm, 0.875rem));
    --_radius: var(--ui-select-radius, var(--ui-radius-md, 0.5rem));
    --_bg: var(--ui-select-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
    --_border-color: var(--ui-select-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
    --_border-color-focus: var(--ui-select-border-color-focus, var(--ui-color-primary, hsl(220, 85%, 50%)));
    --_text: var(--ui-select-text, var(--ui-color-text, hsl(220, 10%, 10%)));
    --_icon-color: var(--ui-select-icon-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
  }
  .select--sm {
    --_height: var(--ui-select-height-sm, calc(1rem * 1.5));
    --_font-size: var(--ui-select-font-size-sm, var(--ui-font-size-xs, 0.75rem));
  }
  .select--lg {
    --_height: var(--ui-select-height-lg, calc(1rem * 2.5));
    --_padding-x: var(--ui-select-padding-x-lg, var(--ui-space-2, 1rem));
    --_font-size: var(--ui-select-font-size-lg, var(--ui-font-size-md, 1rem));
  }
  .select--filled {
    --_bg: var(--ui-select-filled-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
    --_border-color: transparent;
  }
  .select--ghost {
    --_bg: transparent;
    --_border-color: transparent;
  }
  .select--error {
    --_border-color: var(--ui-select-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
    --_border-color-focus: var(--ui-select-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
  }
  .select--success {
    --_border-color: var(--ui-select-success-border, var(--ui-color-success, hsl(142, 70%, 45%)));
    --_border-color-focus: var(--ui-select-success-border, var(--ui-color-success, hsl(142, 70%, 45%)));
  }
}
@layer components.styles {
  .select {
    display: inline-block;
    block-size: var(--_height);
    padding-inline-start: var(--_padding-x);
    padding-inline-end: calc(var(--_height) - var(--ui-space-half, 0.25rem));
    font-family: inherit;
    font-size: var(--_font-size);
    line-height: 1;
    color: var(--_text);
    background-color: var(--_bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    border: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
    border-radius: var(--_radius);
    cursor: pointer;
    appearance: none;
    transition: border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
    background-repeat: no-repeat;
    background-position: right var(--ui-space-half, 0.25rem) center;
    background-size: calc(var(--_height) * 0.5);
  }
  .select:hover:not(:disabled, :focus) {
    border-color: var(--ui-color-border-strong, hsl(220, 10%, 80%));
  }
  .select:focus, .select--focus {
    border-color: var(--_border-color-focus);
    outline: none;
    box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, hsl(220, 85%, 65%));
  }
  .select:disabled, .select--disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .select--block {
    inline-size: 100%;
  }
  .select:invalid, .select--placeholder {
    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
  }
}
@layer components.tokens {
  .skeleton {
    --_bg: var(--ui-skeleton-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
    --_shimmer: var(--ui-skeleton-shimmer, rgb(255 255 255 / 0.5));
    --_radius: var(--ui-skeleton-radius, var(--ui-radius-sm, calc(0.5rem / 2)));
  }
}
@layer components.styles {
  .skeleton {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--_bg);
    border-radius: var(--_radius);
  }
  .skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, var(--_shimmer) 50%, transparent 100%);
    animation: skeleton-shimmer 1.5s infinite;
    transform: translateX(-100%);
  }
  @keyframes skeleton-shimmer {
    100% {
      transform: translateX(100%);
    }
  }
  .skeleton--text {
    block-size: calc(0.5rem * 2);
    inline-size: 100%;
  }
  .skeleton--heading {
    block-size: calc(0.5rem * 3);
    inline-size: 60%;
  }
  .skeleton--circle {
    block-size: calc(0.5rem * 5);
    inline-size: calc(0.5rem * 5);
    border-radius: 50%;
  }
  .skeleton--rect {
    block-size: calc(0.5rem * 20);
    inline-size: 100%;
  }
  .skeleton--static::after {
    animation: none;
  }
  .skeleton--pulse {
    animation: skeleton-pulse 1.5s infinite ease-in-out;
  }
  .skeleton--pulse::after {
    display: none;
  }
  @keyframes skeleton-pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }
}
@layer components.tokens {
  .spinner {
    --_size: var(--ui-spinner-size, calc(var(--unit) * 4));
    --_border-width: var(--ui-spinner-border-width, var(--ui-border-width-md));
    --_color: var(--ui-spinner-color, currentcolor);
    --_track-color: var(--ui-spinner-track-color, transparent);
    --_duration: var(--ui-spinner-duration, 750ms);
  }
  .spinner--xs {
    --_size: var(--ui-spinner-size-xs, calc(var(--unit) * 2));
    --_border-width: var(--ui-spinner-border-width-xs, var(--ui-border-width-sm));
  }
  .spinner--sm {
    --_size: var(--ui-spinner-size-sm, calc(var(--unit) * 3));
    --_border-width: var(--ui-spinner-border-width-sm, var(--ui-border-width-md));
  }
  .spinner--lg {
    --_size: var(--ui-spinner-size-lg, calc(var(--unit) * 5));
    --_border-width: var(--ui-spinner-border-width-lg, var(--ui-border-width-md));
  }
  .spinner--xl {
    --_size: var(--ui-spinner-size-xl, calc(var(--unit) * 6));
    --_border-width: var(--ui-spinner-border-width-xl, var(--ui-border-width-lg));
  }
}
@layer components.styles {
  .spinner {
    display: inline-block;
    flex-shrink: 0;
    box-sizing: border-box;
    block-size: var(--_size);
    inline-size: var(--_size);
    vertical-align: middle;
    border: var(--_border-width) solid var(--_track-color);
    border-radius: 50%;
    border-block-start-color: var(--_color);
    animation: spinner-rotate var(--_duration) linear infinite;
  }
  @keyframes spinner-rotate {
    to {
      transform: rotate(360deg);
    }
  }
}
@layer components.tokens {
  .status {
    --_size: var(--ui-status-size, calc(0.5rem * 1));
    --_color: var(--ui-status-color, var(--ui-color-text-muted));
    --_gap: var(--ui-status-gap, calc(0.5rem * 1));
  }
  .status--success {
    --_color: var(--ui-color-success);
  }
  .status--warning {
    --_color: var(--ui-color-warning);
  }
  .status--danger {
    --_color: var(--ui-color-danger);
  }
  .status--info {
    --_color: var(--ui-color-primary);
  }
}
@layer components.styles {
  .status {
    display: inline-flex;
    align-items: center;
    gap: var(--_gap);
  }
  .status__dot {
    flex-shrink: 0;
    block-size: var(--_size);
    inline-size: var(--_size);
    background: var(--_color);
    border-radius: 50%;
  }
  .status--pulse .status__dot {
    position: relative;
  }
  .status--pulse .status__dot::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--_color);
    border-radius: 50%;
    animation: status-pulse 2s infinite;
  }
  @keyframes status-pulse {
    0% {
      opacity: 1;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(2.5);
    }
  }
  .status--sm {
    --_size: calc(0.5rem * 0.75);
    --_gap: calc(0.5rem * 0.75);
  }
  .status--lg {
    --_size: calc(0.5rem * 1.5);
    --_gap: calc(0.5rem * 1.5);
  }
}
@layer components.tokens {
  .table {
    --_font-size: var(--ui-table-font-size, var(--ui-font-size-sm, 0.875rem));
    --_border-color: var(--ui-table-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
    --_header-bg: var(--ui-table-header-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
    --_cell-padding-x: var(--ui-table-cell-padding-x, var(--ui-space-2, 1rem));
    --_cell-padding-y: var(--ui-table-cell-padding-y, var(--ui-space-1, 0.5rem));
  }
  .table--compact {
    --_cell-padding-y: var(--ui-space-0, 0.25rem);
    --_cell-padding-x: var(--ui-space-1, 0.5rem);
    --_font-size: var(--ui-font-size-xs, 0.75rem);
  }
}
@layer components.styles {
  .table {
    inline-size: 100%;
    font-size: var(--_font-size);
    border-collapse: separate;
    border-spacing: 0;
  }
  .table th,
  .table td {
    padding-block-start: var(--_cell-padding-y);
    padding-block-end: calc(var(--_cell-padding-y) - var(--ui-border-width-sm, 0.0625rem));
    padding-inline: var(--_cell-padding-x);
    line-height: calc(var(--unit, 0.5rem) * 3);
    text-align: start;
    border-block-end: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
  }
  .table th {
    font-weight: var(--ui-weight-medium, 500);
    background: var(--_header-bg);
  }
  .table--striped tbody tr:nth-child(odd) {
    background: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));
  }
  .table--striped th {
    background: var(--ui-color-bg-muted, hsl(220, 10%, 90%));
  }
}
@layer components.tokens {
  .tabs {
    --_border-color: var(--ui-tabs-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
    --_tab-padding-x: var(--ui-tabs-tab-padding-x, var(--ui-space-2, 1rem));
    --_tab-padding-y: var(--ui-tabs-tab-padding-y, var(--ui-space-1, 0.5rem));
    --_tab-bg: var(--ui-tabs-tab-bg, transparent);
    --_tab-bg-active: var(--ui-tabs-tab-bg-active, var(--ui-color-bg, hsl(220, 10%, 98%)));
    --_panel-padding: var(--ui-tabs-panel-padding, var(--ui-space-3, 1.5rem));
  }
}
@layer components.styles {
  .tabs__list {
    display: flex;
    align-items: stretch;
    gap: var(--ui-space-1, 0.5rem);
    box-sizing: border-box;
    block-size: var(--ui-row-2, 2rem);
    box-shadow: inset 0 calc(var(--ui-border-width-sm, 0.0625rem) * -1) 0 var(--_border-color);
  }
  .tabs__tab {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    block-size: var(--ui-row-2, 2rem);
    padding-inline: var(--_tab-padding-x);
    margin: 0;
    font-family: var(--ui-font-sans, Noto Sans, system-ui, -apple-system, sans-serif);
    font-size: var(--ui-font-size-sm, 0.875rem);
    font-weight: var(--ui-weight-medium, 500);
    line-height: 1;
    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
    background: var(--_tab-bg);
    border: none;
    box-shadow: inset 0 calc(var(--ui-border-width-md, 0.125rem) * -1) 0 transparent;
    cursor: pointer;
    transition: color var(--ui-duration-base) var(--ui-ease-default), box-shadow var(--ui-duration-base) var(--ui-ease-default);
  }
  .tabs__tab:hover {
    color: var(--ui-color-text, hsl(220, 10%, 10%));
  }
  .tabs__tab--active {
    color: var(--ui-color-primary, hsl(220, 85%, 50%));
    background: var(--_tab-bg-active);
    box-shadow: inset 0 calc(var(--ui-border-width-md, 0.125rem) * -1) 0 var(--ui-color-primary, hsl(220, 85%, 50%));
  }
  .tabs__panel {
    display: none;
    padding: var(--_panel-padding);
    line-height: var(--ui-row-1, 1rem);
  }
  .tabs__panel--active {
    display: block;
  }
}
@layer components.tokens {
  .tag {
    --_height: var(--ui-tag-height, calc(0.5rem * 3));
    --_padding-x: var(--ui-tag-padding-x, var(--ui-space-1, 0.5rem));
    --_gap: var(--ui-tag-gap, calc(0.5rem * 0.5));
    --_radius: var(--ui-tag-radius, var(--ui-radius-full, 9999px));
    --_font-size: var(--ui-tag-font-size, var(--ui-font-size-sm, 0.875rem));
    --_bg: var(--ui-tag-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
    --_color: var(--ui-tag-color, var(--ui-color-text, hsl(220, 10%, 10%)));
  }
  .tag--sm {
    --_height: var(--ui-tag-height-sm, calc(0.5rem * 2.5));
    --_padding-x: var(--ui-tag-padding-x-sm, calc(0.5rem * 1));
    --_font-size: var(--ui-tag-font-size-sm, var(--ui-font-size-xs, 0.75rem));
  }
  .tag--primary {
    --_bg: var(--ui-tag-primary-bg, var(--ui-color-primary, hsl(220, 85%, 50%)));
    --_color: var(--ui-tag-primary-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
  }
  .tag--success {
    --_bg: var(--ui-tag-success-bg, var(--ui-color-success, hsl(142, 70%, 45%)));
    --_color: var(--ui-tag-success-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
  }
  .tag--warning {
    --_bg: var(--ui-tag-warning-bg, var(--ui-color-warning, hsl(38, 90%, 50%)));
    --_color: var(--ui-tag-warning-color, var(--ui-color-text, hsl(220, 10%, 10%)));
  }
  .tag--danger {
    --_bg: var(--ui-tag-danger-bg, var(--ui-color-danger, hsl(0, 70%, 50%)));
    --_color: var(--ui-tag-danger-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
  }
}
@layer components.styles {
  .tag {
    display: inline-flex;
    align-items: center;
    gap: var(--_gap);
    block-size: var(--_height);
    padding-inline: var(--_padding-x);
    font-size: var(--_font-size);
    font-weight: var(--ui-weight-medium, 500);
    line-height: 1;
    white-space: nowrap;
    color: var(--_color);
    background: var(--_bg);
    border-radius: var(--_radius);
  }
  .tag:disabled, .tag[aria-disabled=true] {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .tag__remove {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-inline-start: calc(var(--_gap) * -0.5);
    color: currentcolor;
    background: none;
    border: none;
    opacity: 0.7;
    cursor: pointer;
  }
  .tag__remove:hover {
    opacity: 1;
  }
  .tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: calc(0.5rem * 0.5);
  }
}
@layer components.tokens {
  .textarea {
    --_min-height: var(--ui-textarea-min-height, calc(1rem * 4));
    --_padding-x: var(--ui-textarea-padding-x, var(--ui-space-1, 0.5rem));
    --_padding-y: var(--ui-textarea-padding-y, var(--ui-space-1, 0.5rem));
    --_font-size: var(--ui-textarea-font-size, var(--ui-font-size-sm, 0.875rem));
    --_radius: var(--ui-textarea-radius, var(--ui-radius-md, 0.5rem));
    --_bg: var(--ui-textarea-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
    --_border-color: var(--ui-textarea-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
    --_border-color-focus: var(--ui-textarea-border-color-focus, var(--ui-color-primary, hsl(220, 85%, 50%)));
    --_text: var(--ui-textarea-text, var(--ui-color-text, hsl(220, 10%, 10%)));
    --_placeholder: var(--ui-textarea-placeholder, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
  }
  .textarea--sm {
    --_min-height: var(--ui-textarea-min-height-sm, calc(1rem * 3));
    --_font-size: var(--ui-textarea-font-size-sm, var(--ui-font-size-xs, 0.75rem));
  }
  .textarea--lg {
    --_min-height: var(--ui-textarea-min-height-lg, calc(1rem * 6));
    --_padding-x: var(--ui-textarea-padding-x-lg, var(--ui-space-2, 1rem));
    --_padding-y: var(--ui-textarea-padding-y-lg, var(--ui-space-2, 1rem));
    --_font-size: var(--ui-textarea-font-size-lg, var(--ui-font-size-md, 1rem));
  }
  .textarea--filled {
    --_bg: var(--ui-textarea-filled-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
    --_border-color: transparent;
  }
  .textarea--ghost {
    --_bg: transparent;
    --_border-color: transparent;
  }
  .textarea--error {
    --_border-color: var(--ui-textarea-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
    --_border-color-focus: var(--ui-textarea-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
  }
  .textarea--success {
    --_border-color: var(--ui-textarea-success-border, var(--ui-color-success, hsl(142, 70%, 45%)));
    --_border-color-focus: var(--ui-textarea-success-border, var(--ui-color-success, hsl(142, 70%, 45%)));
  }
}
@layer components.styles {
  .textarea {
    display: block;
    box-sizing: border-box;
    inline-size: 100%;
    min-block-size: var(--_min-height);
    padding-block: var(--_padding-y);
    padding-inline: var(--_padding-x);
    font-family: inherit;
    font-size: var(--_font-size);
    line-height: var(--ui-row-1, 1rem);
    color: var(--_text);
    background: var(--_bg);
    border: none;
    border-radius: var(--_radius);
    outline: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
    transition: border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
    outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
    resize: vertical;
  }
  .textarea::placeholder {
    color: var(--_placeholder);
  }
  .textarea:hover:not(:disabled, :focus) {
    outline-color: var(--ui-color-border-strong, hsl(220, 10%, 80%));
  }
  .textarea:focus, .textarea--focus {
    outline-color: var(--_border-color-focus);
    box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, hsl(220, 85%, 65%));
  }
  .textarea:disabled, .textarea--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    resize: none;
  }
  .textarea:read-only {
    background: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));
    resize: none;
  }
  .textarea--resize-none {
    resize: none;
  }
  .textarea--resize-horizontal {
    resize: horizontal;
  }
  .textarea--resize-both {
    resize: both;
  }
}
@layer components.tokens {
  .toast-viewport {
    --_gap: var(--ui-toast-viewport-gap, calc(0.5rem * 1));
    --_padding: var(--ui-toast-viewport-padding, calc(0.5rem * 2));
    --_max-width: var(--ui-toast-viewport-max-width, 420px);
  }
  .toast {
    --_padding: var(--ui-toast-padding, calc(0.5rem * 2));
    --_gap: var(--ui-toast-gap, calc(0.5rem * 1));
    --_radius: var(--ui-toast-radius, var(--ui-radius-md, 0.5rem));
    --_bg: var(--ui-toast-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
    --_border-color: var(--ui-toast-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
    --_shadow: var(--ui-toast-shadow, var(--shadow-lg));
  }
  .toast--success {
    --_border-color: var(--ui-color-success);
  }
  .toast--warning {
    --_border-color: var(--ui-color-warning);
  }
  .toast--danger {
    --_border-color: var(--ui-color-danger);
  }
  .toast--info {
    --_border-color: var(--ui-color-primary);
  }
}
@layer components.styles {
  .toast-viewport {
    display: flex;
    flex-direction: column;
    gap: var(--_gap);
    position: fixed;
    z-index: var(--ui-z-toast, 1000);
    max-inline-size: var(--_max-width);
    padding: var(--_padding);
    pointer-events: none;
    list-style: none;
  }
  .toast-viewport--top-end {
    inset-block-start: 0;
    inset-inline-end: 0;
  }
  .toast-viewport--top-start {
    inset-block-start: 0;
    inset-inline-start: 0;
  }
  .toast-viewport--bottom-end {
    inset-block-end: 0;
    inset-inline-end: 0;
  }
  .toast-viewport--bottom-start {
    inset-block-end: 0;
    inset-inline-start: 0;
  }
  .toast-viewport--top-center {
    inset-block-start: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }
  .toast-viewport--bottom-center {
    inset-block-end: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }
  .toast {
    display: flex;
    align-items: flex-start;
    gap: var(--_gap);
    padding: var(--_padding);
    background: var(--_bg);
    border-radius: var(--_radius);
    outline: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
    box-shadow: var(--_shadow);
    pointer-events: auto;
    outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
  }
  .toast__icon {
    flex-shrink: 0;
  }
  .toast__content {
    flex: 1;
    min-inline-size: 0;
  }
  .toast__title {
    margin: 0;
    font-weight: var(--ui-weight-medium, 500);
    line-height: var(--ui-row-1, 1rem);
  }
  .toast__description {
    margin: 0;
    font-size: var(--ui-font-size-sm, 0.875rem);
    line-height: var(--ui-row-1, 1rem);
    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
  }
  .toast__action {
    flex-shrink: 0;
  }
  .toast__close {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    block-size: var(--ui-row-1, 1rem);
    inline-size: var(--ui-row-1, 1rem);
    padding: 0;
    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
    background: none;
    border: none;
    cursor: pointer;
  }
  .toast__close:hover {
    color: var(--ui-color-text, hsl(220, 10%, 10%));
  }
  .toast[data-state=open] {
    animation: toast-slide-in var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
  }
  .toast[data-state=closed] {
    animation: toast-slide-out var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
  }
  @keyframes toast-slide-in {
    from {
      opacity: 0;
      transform: translateX(100%);
    }
  }
  @keyframes toast-slide-out {
    to {
      opacity: 0;
      transform: translateX(100%);
    }
  }
}
@layer components.tokens {
  .toggle {
    --_track-width: var(--ui-toggle-track-width, calc(0.5rem * 5));
    --_track-height: var(--ui-toggle-track-height, calc(0.5rem * 3));
    --_track-bg: var(--ui-toggle-track-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
    --_track-bg-checked: var(--ui-toggle-track-bg-checked, var(--ui-color-primary));
    --_track-radius: var(--ui-toggle-track-radius, calc(0.5rem * 1.5));
    --_thumb-size: var(--ui-toggle-thumb-size, calc(0.5rem * 2.5));
    --_thumb-bg: var(--ui-toggle-thumb-bg, white);
    --_thumb-offset: var(--ui-toggle-thumb-offset, calc(0.5rem / 4));
  }
  .toggle--sm {
    --_track-width: calc(0.5rem * 4);
    --_track-height: calc(0.5rem * 2);
    --_track-radius: 0.5rem;
    --_thumb-size: calc(0.5rem * 1.5);
  }
  .toggle--lg {
    --_track-width: calc(0.5rem * 6);
    --_track-height: calc(0.5rem * 4);
    --_track-radius: calc(0.5rem * 2);
    --_thumb-size: calc(0.5rem * 3.5);
  }
}
@layer components.styles {
  .toggle {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    position: relative;
    block-size: var(--_track-height);
    inline-size: var(--_track-width);
    background: var(--_track-bg);
    border-radius: var(--_track-radius);
    cursor: pointer;
    transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
  }
  .toggle__input {
    position: absolute;
    inset: 0;
    block-size: 100%;
    inline-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  .toggle__track {
    position: absolute;
    inset: 0;
    background: var(--_track-bg);
    border-radius: var(--_track-radius);
    transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
  }
  .toggle__thumb {
    position: absolute;
    inset-block-start: var(--_thumb-offset);
    inset-inline-start: var(--_thumb-offset);
    block-size: var(--_thumb-size);
    inline-size: var(--_thumb-size);
    background: var(--_thumb-bg);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
  }
  .toggle__input:checked ~ .toggle__track {
    background: var(--_track-bg-checked);
  }
  .toggle__input:checked ~ .toggle__thumb {
    transform: translateX(calc(var(--_track-width) - var(--_thumb-size) - var(--_thumb-offset) * 2));
  }
  .toggle__input:focus-visible ~ .toggle__track {
    outline: 2px solid var(--ui-color-focus, var(--ui-color-primary));
    outline-offset: calc(0.5rem / 4);
  }
  .toggle__input:disabled ~ .toggle__track,
  .toggle__input:disabled ~ .toggle__thumb {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .toggle:has(.toggle__input:disabled) {
    cursor: not-allowed;
  }
}
@layer components.tokens {
  .tooltip {
    --_bg: var(--ui-tooltip-bg, var(--ui-color-text, #1a1a1a));
    --_color: var(--ui-tooltip-color, var(--ui-color-bg, white));
    --_radius: var(--ui-tooltip-radius, var(--ui-radius-sm, calc(0.5rem / 2)));
    --_padding-x: var(--ui-tooltip-padding-x, calc(0.5rem * 1));
    --_padding-y: var(--ui-tooltip-padding-y, calc(0.5rem / 2));
    --_size: var(--ui-tooltip-size, var(--ui-font-size-sm, 0.875rem));
    --_z: var(--ui-tooltip-z, var(--ui-z-tooltip, 500));
    --_arrow-size: var(--ui-tooltip-arrow-size, calc(0.5rem / 2));
  }
}
@layer components.styles {
  .tooltip {
    position: absolute;
    z-index: var(--_z);
    max-inline-size: calc(0.5rem * 25);
    padding: var(--_padding-y) var(--_padding-x);
    font-size: var(--_size);
    line-height: calc(0.5rem * 2);
    text-align: center;
    white-space: nowrap;
    color: var(--_color);
    background: var(--_bg);
    border-radius: var(--_radius);
  }
  .tooltip--top::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    border: var(--_arrow-size) solid transparent;
    border-block-start-color: var(--_bg);
    transform: translateX(-50%);
  }
  .tooltip--bottom::after {
    content: "";
    position: absolute;
    inset-block-end: 100%;
    inset-inline-start: 50%;
    border: var(--_arrow-size) solid transparent;
    border-block-end-color: var(--_bg);
    transform: translateX(-50%);
  }
  .tooltip--start::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 100%;
    border: var(--_arrow-size) solid transparent;
    border-inline-start-color: var(--_bg);
    transform: translateY(-50%);
  }
  .tooltip--end::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 100%;
    border: var(--_arrow-size) solid transparent;
    border-inline-end-color: var(--_bg);
    transform: translateY(-50%);
  }
  .tooltip--visible {
    opacity: 1;
  }
  .tooltip--hidden {
    opacity: 0;
    pointer-events: none;
  }
  .tooltip--animate {
    transition: opacity var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
  }
}
/* 05. Utilities (high specificity, load last) */
/* Spacing utilities - all values align to 8px grid */
/* Uses logical properties for international/RTL support */
@layer utilities {
  /* Margin utilities */
  .m-0 {
    margin: 0;
  }
  .m-1 {
    margin: var(--ui-space-1);
  }
  .m-2 {
    margin: var(--ui-space-2);
  }
  .m-3 {
    margin: var(--ui-space-3);
  }
  .m-4 {
    margin: var(--ui-space-4);
  }
  .m-6 {
    margin: var(--ui-space-6);
  }
  .m-8 {
    margin: var(--ui-space-8);
  }
  .mt-0 {
    margin-block-start: 0;
  }
  .mt-1 {
    margin-block-start: var(--ui-space-1);
  }
  .mt-2 {
    margin-block-start: var(--ui-space-2);
  }
  .mt-3 {
    margin-block-start: var(--ui-space-3);
  }
  .mt-4 {
    margin-block-start: var(--ui-space-4);
  }
  .mt-6 {
    margin-block-start: var(--ui-space-6);
  }
  .mt-8 {
    margin-block-start: var(--ui-space-8);
  }
  .me-0 {
    margin-inline-end: 0;
  }
  .me-1 {
    margin-inline-end: var(--ui-space-1);
  }
  .me-2 {
    margin-inline-end: var(--ui-space-2);
  }
  .me-3 {
    margin-inline-end: var(--ui-space-3);
  }
  .me-4 {
    margin-inline-end: var(--ui-space-4);
  }
  .me-6 {
    margin-inline-end: var(--ui-space-6);
  }
  .me-8 {
    margin-inline-end: var(--ui-space-8);
  }
  .mb-0 {
    margin-block-end: 0;
  }
  .mb-1 {
    margin-block-end: var(--ui-space-1);
  }
  .mb-2 {
    margin-block-end: var(--ui-space-2);
  }
  .mb-3 {
    margin-block-end: var(--ui-space-3);
  }
  .mb-4 {
    margin-block-end: var(--ui-space-4);
  }
  .mb-6 {
    margin-block-end: var(--ui-space-6);
  }
  .mb-8 {
    margin-block-end: var(--ui-space-8);
  }
  .ms-0 {
    margin-inline-start: 0;
  }
  .ms-1 {
    margin-inline-start: var(--ui-space-1);
  }
  .ms-2 {
    margin-inline-start: var(--ui-space-2);
  }
  .ms-3 {
    margin-inline-start: var(--ui-space-3);
  }
  .ms-4 {
    margin-inline-start: var(--ui-space-4);
  }
  .ms-6 {
    margin-inline-start: var(--ui-space-6);
  }
  .ms-8 {
    margin-inline-start: var(--ui-space-8);
  }
  .mx-0 {
    margin-inline: 0;
  }
  .mx-1 {
    margin-inline: var(--ui-space-1);
  }
  .mx-2 {
    margin-inline: var(--ui-space-2);
  }
  .mx-3 {
    margin-inline: var(--ui-space-3);
  }
  .mx-4 {
    margin-inline: var(--ui-space-4);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-0 {
    margin-block: 0;
  }
  .my-1 {
    margin-block: var(--ui-space-1);
  }
  .my-2 {
    margin-block: var(--ui-space-2);
  }
  .my-3 {
    margin-block: var(--ui-space-3);
  }
  .my-4 {
    margin-block: var(--ui-space-4);
  }
  /* Padding utilities */
  .p-0 {
    padding: 0;
  }
  .p-1 {
    padding: var(--ui-space-1);
  }
  .p-2 {
    padding: var(--ui-space-2);
  }
  .p-3 {
    padding: var(--ui-space-3);
  }
  .p-4 {
    padding: var(--ui-space-4);
  }
  .p-6 {
    padding: var(--ui-space-6);
  }
  .p-8 {
    padding: var(--ui-space-8);
  }
  .pt-0 {
    padding-block-start: 0;
  }
  .pt-1 {
    padding-block-start: var(--ui-space-1);
  }
  .pt-2 {
    padding-block-start: var(--ui-space-2);
  }
  .pt-3 {
    padding-block-start: var(--ui-space-3);
  }
  .pt-4 {
    padding-block-start: var(--ui-space-4);
  }
  .pt-6 {
    padding-block-start: var(--ui-space-6);
  }
  .pt-8 {
    padding-block-start: var(--ui-space-8);
  }
  .pe-0 {
    padding-inline-end: 0;
  }
  .pe-1 {
    padding-inline-end: var(--ui-space-1);
  }
  .pe-2 {
    padding-inline-end: var(--ui-space-2);
  }
  .pe-3 {
    padding-inline-end: var(--ui-space-3);
  }
  .pe-4 {
    padding-inline-end: var(--ui-space-4);
  }
  .pe-6 {
    padding-inline-end: var(--ui-space-6);
  }
  .pe-8 {
    padding-inline-end: var(--ui-space-8);
  }
  .pb-0 {
    padding-block-end: 0;
  }
  .pb-1 {
    padding-block-end: var(--ui-space-1);
  }
  .pb-2 {
    padding-block-end: var(--ui-space-2);
  }
  .pb-3 {
    padding-block-end: var(--ui-space-3);
  }
  .pb-4 {
    padding-block-end: var(--ui-space-4);
  }
  .pb-6 {
    padding-block-end: var(--ui-space-6);
  }
  .pb-8 {
    padding-block-end: var(--ui-space-8);
  }
  .ps-0 {
    padding-inline-start: 0;
  }
  .ps-1 {
    padding-inline-start: var(--ui-space-1);
  }
  .ps-2 {
    padding-inline-start: var(--ui-space-2);
  }
  .ps-3 {
    padding-inline-start: var(--ui-space-3);
  }
  .ps-4 {
    padding-inline-start: var(--ui-space-4);
  }
  .ps-6 {
    padding-inline-start: var(--ui-space-6);
  }
  .ps-8 {
    padding-inline-start: var(--ui-space-8);
  }
  .px-0 {
    padding-inline: 0;
  }
  .px-1 {
    padding-inline: var(--ui-space-1);
  }
  .px-2 {
    padding-inline: var(--ui-space-2);
  }
  .px-3 {
    padding-inline: var(--ui-space-3);
  }
  .px-4 {
    padding-inline: var(--ui-space-4);
  }
  .py-0 {
    padding-block: 0;
  }
  .py-1 {
    padding-block: var(--ui-space-1);
  }
  .py-2 {
    padding-block: var(--ui-space-2);
  }
  .py-3 {
    padding-block: var(--ui-space-3);
  }
  .py-4 {
    padding-block: var(--ui-space-4);
  }
  /* Gap utilities (for flex/grid) */
  .gap-0 {
    gap: 0;
  }
  .gap-1 {
    gap: var(--ui-space-1);
  }
  .gap-2 {
    gap: var(--ui-space-2);
  }
  .gap-3 {
    gap: var(--ui-space-3);
  }
  .gap-4 {
    gap: var(--ui-space-4);
  }
  .gap-6 {
    gap: var(--ui-space-6);
  }
  .gap-8 {
    gap: var(--ui-space-8);
  }
}
/* Display and visibility utilities */
/* Uses logical properties for international/RTL support */
@layer utilities {
  /* Display */
  .block {
    display: block;
  }
  .inline-block {
    display: inline-block;
  }
  .inline {
    display: inline;
  }
  .flex {
    display: flex;
  }
  .inline-flex {
    display: inline-flex;
  }
  .grid {
    display: grid;
  }
  .inline-grid {
    display: inline-grid;
  }
  .hidden {
    display: none;
  }
  /* Flexbox direction */
  .flex-row {
    flex-direction: row;
  }
  .flex-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-col-reverse {
    flex-direction: column-reverse;
  }
  /* Flexbox wrap */
  .flex-wrap {
    flex-wrap: wrap;
  }
  .flex-nowrap {
    flex-wrap: nowrap;
  }
  .flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  /* Flexbox grow/shrink */
  .flex-1 {
    flex: 1 1 0%;
  }
  .flex-auto {
    flex: 1 1 auto;
  }
  .flex-initial {
    flex: 0 1 auto;
  }
  .flex-none {
    flex: none;
  }
  .grow {
    flex-grow: 1;
  }
  .grow-0 {
    flex-grow: 0;
  }
  .shrink {
    flex-shrink: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  /* Justify content */
  .justify-start {
    justify-content: flex-start;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-around {
    justify-content: space-around;
  }
  .justify-evenly {
    justify-content: space-evenly;
  }
  /* Align items */
  .items-start {
    align-items: flex-start;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-center {
    align-items: center;
  }
  .items-baseline {
    align-items: baseline;
  }
  .items-stretch {
    align-items: stretch;
  }
  /* Align self */
  .self-auto {
    align-self: auto;
  }
  .self-start {
    align-self: flex-start;
  }
  .self-end {
    align-self: flex-end;
  }
  .self-center {
    align-self: center;
  }
  .self-stretch {
    align-self: stretch;
  }
  /* Visibility */
  .visible {
    visibility: visible;
  }
  .invisible {
    visibility: hidden;
  }
  /* Screen reader only - visually hidden but accessible */
  .sr-only {
    position: absolute;
    /* stylelint-disable-next-line unit-disallowed-list -- intentional 1px for a11y */
    block-size: 1px;
    /* stylelint-disable-next-line unit-disallowed-list -- intentional 1px for a11y */
    inline-size: 1px;
    padding: 0;
    /* stylelint-disable-next-line unit-disallowed-list -- intentional -1px for a11y */
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    border-width: 0;
    clip-path: inset(50%);
  }
}
@layer utilities {
  .text-start {
    text-align: start;
  }
  .text-center {
    text-align: center;
  }
  .text-end {
    text-align: end;
  }
  .text-justify {
    text-align: justify;
  }
  .font-normal {
    font-weight: var(--ui-weight-normal);
  }
  .font-medium {
    font-weight: var(--ui-weight-medium);
  }
  .font-semibold {
    font-weight: var(--ui-weight-semibold);
  }
  .font-bold {
    font-weight: var(--ui-weight-bold);
  }
  .text-xs {
    font-size: var(--ui-font-size-xs);
    line-height: var(--ui-leading-xs);
  }
  .text-sm {
    font-size: var(--ui-font-size-sm);
    line-height: var(--ui-leading-sm);
  }
  .text-md {
    font-size: var(--ui-font-size-md);
    line-height: var(--ui-leading-md);
  }
  .text-lg {
    font-size: var(--ui-font-size-lg);
    line-height: var(--ui-leading-lg);
  }
  .text-xl {
    font-size: var(--ui-font-size-xl);
    line-height: var(--ui-leading-xl);
  }
  .text-2xl {
    font-size: var(--ui-font-size-2xl);
    line-height: var(--ui-leading-2xl);
  }
  .text-3xl {
    font-size: var(--ui-font-size-3xl);
    line-height: var(--ui-leading-3xl);
  }
  .text-4xl {
    font-size: var(--ui-font-size-4xl);
    line-height: var(--ui-leading-4xl);
  }
  .text-lead {
    font-size: var(--ui-lead-size);
    font-weight: var(--ui-lead-weight);
    line-height: var(--ui-lead-line-height);
    letter-spacing: var(--ui-lead-tracking);
  }
  .text-eyebrow {
    font-size: var(--ui-eyebrow-size);
    font-weight: var(--ui-eyebrow-weight);
    line-height: var(--ui-eyebrow-line-height);
    letter-spacing: var(--ui-eyebrow-tracking);
    text-transform: uppercase;
  }
  .text-caption {
    font-size: var(--ui-caption-size);
    font-weight: var(--ui-caption-weight);
    line-height: var(--ui-caption-line-height);
    letter-spacing: var(--ui-caption-tracking);
  }
  .text-body-sm {
    font-size: var(--ui-body-sm-size);
    font-weight: var(--ui-body-sm-weight);
    line-height: var(--ui-body-sm-line-height);
    letter-spacing: var(--ui-body-sm-tracking);
  }
  .font-sans {
    font-family: var(--ui-font-sans);
  }
  .font-mono {
    font-family: var(--ui-font-mono);
  }
  .underline {
    text-decoration: underline;
  }
  .line-through {
    text-decoration: line-through;
  }
  .no-underline {
    text-decoration: none;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .capitalize {
    text-transform: capitalize;
  }
  .normal-case {
    text-transform: none;
  }
  .text-primary {
    color: var(--ui-color-primary);
  }
  .text-muted {
    color: var(--ui-color-text-muted);
  }
  .text-success {
    color: var(--ui-color-success);
  }
  .text-warning {
    color: var(--ui-color-warning);
  }
  .text-danger {
    color: var(--ui-color-danger);
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .whitespace-normal {
    white-space: normal;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .whitespace-pre {
    white-space: pre;
  }
  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }
  .prose {
    max-inline-size: 65ch;
  }
  .prose-sm {
    max-inline-size: 45ch;
  }
  .prose-lg {
    max-inline-size: 75ch;
  }
  .tracking-display {
    letter-spacing: var(--ui-tracking-display);
  }
  .tracking-body {
    letter-spacing: var(--ui-tracking-body);
  }
  .tracking-caps {
    letter-spacing: var(--ui-tracking-caps);
  }
}
@layer utilities {
  .border {
    border: var(--ui-border-width-sm) solid var(--ui-color-border);
  }
  .border-0 {
    border: none;
  }
  .rounded {
    border-radius: var(--ui-radius-md);
  }
  .rounded-none {
    border-radius: 0;
  }
  .rounded-sm {
    border-radius: var(--ui-radius-sm);
  }
  .rounded-lg {
    border-radius: var(--ui-radius-lg);
  }
  .rounded-full {
    border-radius: var(--ui-radius-full);
  }
  .bg {
    background: var(--ui-color-bg);
  }
  .bg-subtle {
    background: var(--ui-color-bg-subtle);
  }
  .bg-muted {
    background: var(--ui-color-bg-muted);
  }
  .bg-transparent {
    background: transparent;
  }
}
@layer utilities {
  .visually-hidden {
    position: absolute;
    block-size: calc(0.5rem / 8);
    inline-size: calc(0.5rem / 8);
    padding: 0;
    margin: calc(0.5rem / -8);
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
  .visually-hidden--focusable:focus,
  .visually-hidden--focusable:active {
    position: static;
    block-size: auto;
    inline-size: auto;
    margin: 0;
    overflow: visible;
    white-space: normal;
    clip: auto;
    clip-path: none;
  }
}
@view-transition {
  navigation: auto;
}
@layer utilities {
  @keyframes vt-fade-in {
    from {
      opacity: 0;
    }
  }
  @keyframes vt-fade-out {
    to {
      opacity: 0;
    }
  }
  @keyframes vt-slide-in-up {
    from {
      opacity: 0;
      transform: translateY(1.25rem);
    }
  }
  @keyframes vt-slide-out-up {
    to {
      opacity: 0;
      transform: translateY(-1.25rem);
    }
  }
  @keyframes vt-slide-in-down {
    from {
      opacity: 0;
      transform: translateY(-1.25rem);
    }
  }
  @keyframes vt-slide-out-down {
    to {
      opacity: 0;
      transform: translateY(1.25rem);
    }
  }
  @keyframes vt-slide-in-start {
    from {
      opacity: 0;
      transform: translateX(-1.25rem);
    }
  }
  @keyframes vt-slide-out-start {
    to {
      opacity: 0;
      transform: translateX(-1.25rem);
    }
  }
  @keyframes vt-slide-in-end {
    from {
      opacity: 0;
      transform: translateX(1.25rem);
    }
  }
  @keyframes vt-slide-out-end {
    to {
      opacity: 0;
      transform: translateX(1.25rem);
    }
  }
  @keyframes vt-scale-in {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
  }
  @keyframes vt-scale-out {
    to {
      opacity: 0;
      transform: scale(1.05);
    }
  }
  .transition-name-sidebar {
    view-transition-name: sidebar;
  }
  .transition-name-main {
    view-transition-name: main;
  }
  .transition-name-header {
    view-transition-name: header;
  }
  .transition-name-hero {
    view-transition-name: hero;
  }
  .transition-name-card {
    view-transition-name: card;
  }
  .transition-name-modal {
    view-transition-name: modal;
  }
  .transition-name-slide-up {
    view-transition-name: slide-up;
  }
  .transition-name-slide-down {
    view-transition-name: slide-down;
  }
  .transition-name-slide-start {
    view-transition-name: slide-start;
  }
  .transition-name-slide-end {
    view-transition-name: slide-end;
  }
  .transition-name-scale {
    view-transition-name: scale;
  }
  .transition-name-fade {
    view-transition-name: fade;
  }
  .transition-name-none {
    view-transition-name: none;
  }
  ::view-transition-old(sidebar),
  ::view-transition-new(sidebar),
  ::view-transition-old(header),
  ::view-transition-new(header) {
    animation: none;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--ui-duration-base);
    animation-timing-function: var(--ui-ease-default);
  }
  ::view-transition-old(fade) {
    animation: vt-fade-out var(--ui-duration-base) var(--ui-ease-out);
  }
  ::view-transition-new(fade) {
    animation: vt-fade-in var(--ui-duration-base) var(--ui-ease-out);
  }
  ::view-transition-old(slide-up),
  ::view-transition-old(main) {
    animation: vt-slide-out-up var(--ui-duration-base) var(--ui-ease-out);
  }
  ::view-transition-new(slide-up),
  ::view-transition-new(main) {
    animation: vt-slide-in-up var(--ui-duration-base) var(--ui-ease-out);
  }
  ::view-transition-old(slide-down) {
    animation: vt-slide-out-down var(--ui-duration-base) var(--ui-ease-out);
  }
  ::view-transition-new(slide-down) {
    animation: vt-slide-in-down var(--ui-duration-base) var(--ui-ease-out);
  }
  ::view-transition-old(slide-start) {
    animation: vt-slide-out-start var(--ui-duration-base) var(--ui-ease-out);
  }
  ::view-transition-new(slide-start) {
    animation: vt-slide-in-start var(--ui-duration-base) var(--ui-ease-out);
  }
  ::view-transition-old(slide-end) {
    animation: vt-slide-out-end var(--ui-duration-base) var(--ui-ease-out);
  }
  ::view-transition-new(slide-end) {
    animation: vt-slide-in-end var(--ui-duration-base) var(--ui-ease-out);
  }
  ::view-transition-old(scale),
  ::view-transition-old(modal),
  ::view-transition-old(card) {
    animation: vt-scale-out var(--ui-duration-base) var(--ui-ease-out);
  }
  ::view-transition-new(scale),
  ::view-transition-new(modal),
  ::view-transition-new(card) {
    animation: vt-scale-in var(--ui-duration-base) var(--ui-ease-out);
  }
  ::view-transition-group(hero) {
    animation-duration: var(--ui-duration-slow);
    animation-timing-function: var(--ui-ease-in-out);
  }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(*),
    ::view-transition-new(*),
    ::view-transition-group(*) {
      animation-duration: 0s !important;
    }
  }
}
/* 99. Debug tools (dev only) */
/* Debug grid overlay - add class="debug-grid" to body or any container */
.debug-grid,
.debug-grid-rows,
.debug-baseline {
  position: relative;
}

.debug-grid {
  --debug-color: hsl(var(--ui-hue-primary) 80% 50% / 0.15);
}

.debug-grid::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: var(--ui-z-debug);
  block-size: 100%;
  inline-size: 100%;
  min-block-size: 100vh;
  background-image: linear-gradient(to right, var(--debug-color) 1px, transparent 1px), linear-gradient(to bottom, var(--debug-color) 1px, transparent 1px);
  pointer-events: none;
  background-size: var(--unit) var(--unit);
  background-position: 0 0;
}

/* Stronger grid at row intervals (16px) */
.debug-grid-rows {
  --debug-color: hsl(var(--ui-hue-primary) 80% 50% / 0.1);
  --debug-color-strong: hsl(var(--ui-hue-primary) 80% 50% / 0.25);
}

.debug-grid-rows::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: var(--ui-z-debug);
  block-size: 100%;
  inline-size: 100%;
  min-block-size: 100vh;
  background-image: linear-gradient(to right, var(--debug-color) 1px, transparent 1px), linear-gradient(to bottom, var(--debug-color) 1px, transparent 1px), linear-gradient(to bottom, var(--debug-color-strong) 1px, transparent 1px);
  pointer-events: none;
  background-size: var(--unit) var(--unit), var(--unit) var(--unit), var(--unit) var(--ui-row);
  background-position: 0 0;
}

/* Baseline grid only (horizontal lines) */
.debug-baseline {
  --debug-color: hsl(var(--ui-hue-danger) 80% 50% / 0.2);
}

.debug-baseline::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: var(--ui-z-debug);
  block-size: 100%;
  inline-size: 100%;
  min-block-size: 100vh;
  background-image: linear-gradient(to bottom, var(--debug-color) 1px, transparent 1px);
  pointer-events: none;
  background-size: 100% var(--unit);
}

/* Element boundaries outline */
.debug-outline * {
  outline: 1px solid hsla(0, 100%, 50%, 0.5);
}
