/* Generated by Brio - do not edit directly */

@layer reset, tokens, animations, base, composition, blocks, rescopes, utilities, overrides;

/* src/css/reset.css */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  pre,
  figure,
  blockquote,
  dl,
  dd {
    margin-block: 0;
  }
  ul,
  ol {
    list-style: none;
    padding-inline-start: 0;
  }
  body {
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  h1,
  h2,
  h3,
  h4,
  button,
  input,
  label {
    line-height: 1.1;
  }
  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
  }
  a {
    text-decoration-skip-ink: auto;
  }
  a:not([class]) {
    color: currentColor;
  }
  img,
  picture,
  svg,
  canvas,
  video {
    max-width: 100%;
    display: block;
  }
  audio {
    inline-size: 100%;
    display: block;
  }
  input,
  button,
  textarea,
  select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
  }
  button {
    cursor: pointer;
  }
  textarea:not([rows]) {
    min-height: 10em;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  fieldset {
    border: none;
    padding: 0;
    margin: 0;
    min-inline-size: 0;
  }
  legend {
    padding: 0;
  }
  [hidden] {
    display: none !important;
  }
  :target {
    scroll-margin-block: 5ex;
  }
}

/* src/css/tokens.css */
@layer tokens {
  :root {
    --neutral-1: light-dark(oklch(99.1% 0.001 286.4), oklch(17.9% 0.004 286.0));
    --neutral-2: light-dark(oklch(98.3% 0.003 286.4), oklch(21.3% 0.004 264.5));
    --neutral-3: light-dark(oklch(95.6% 0.004 286.3), oklch(25.2% 0.006 271.2));
    --neutral-4: light-dark(oklch(93.2% 0.005 286.3), oklch(28.3% 0.007 248.1));
    --neutral-5: light-dark(oklch(91.0% 0.007 277.2), oklch(31.2% 0.008 255.6));
    --neutral-6: light-dark(oklch(88.7% 0.010 286.2), oklch(34.7% 0.010 254.0));
    --neutral-7: light-dark(oklch(85.3% 0.011 280.4), oklch(39.9% 0.012 252.9));
    --neutral-8: light-dark(oklch(79.4% 0.016 277.8), oklch(48.9% 0.016 251.7));
    --neutral-9: light-dark(oklch(64.5% 0.016 277.7), oklch(53.7% 0.015 262.3));
    --neutral-10: light-dark(oklch(61.1% 0.015 272.6), oklch(58.3% 0.015 266.6));
    --neutral-11: light-dark(oklch(50.2% 0.014 264.4), oklch(76.9% 0.010 258.3));
    --neutral-12: light-dark(oklch(24.1% 0.010 248.2), oklch(94.9% 0.003 264.5));
    --primary-1: light-dark(oklch(99.3% 0.003 247.9), oklch(19.4% 0.025 256.5));
    --primary-2: light-dark(oklch(98.2% 0.009 242.8), oklch(21.3% 0.030 261.3));
    --primary-3: light-dark(oklch(96.0% 0.020 238.7), oklch(27.4% 0.066 253.9));
    --primary-4: light-dark(oklch(93.8% 0.035 234.8), oklch(32.0% 0.097 252.3));
    --primary-5: light-dark(oklch(90.5% 0.051 240.3), oklch(36.7% 0.106 250.7));
    --primary-6: light-dark(oklch(86.3% 0.068 243.3), oklch(41.6% 0.113 252.0));
    --primary-7: light-dark(oklch(81.0% 0.089 243.1), oklch(47.4% 0.122 253.1));
    --primary-8: light-dark(oklch(73.4% 0.121 243.1), oklch(54.1% 0.140 253.2));
    --primary-9: light-dark(oklch(64.9% 0.193 251.8), oklch(64.9% 0.193 251.8));
    --primary-10: light-dark(oklch(62.2% 0.183 251.7), oklch(68.8% 0.169 251.4));
    --primary-11: light-dark(oklch(55.6% 0.162 252.2), oklch(76.4% 0.126 249.5));
    --primary-12: light-dark(oklch(32.4% 0.096 258.8), oklch(90.7% 0.051 238.4));
    --accent-1: light-dark(oklch(99.2% 0.003 219.5), oklch(19.2% 0.018 222.8));
    --accent-2: light-dark(oklch(97.9% 0.009 205.9), oklch(21.4% 0.019 227.9));
    --accent-3: light-dark(oklch(95.9% 0.026 202.6), oklch(27.3% 0.043 220.4));
    --accent-4: light-dark(oklch(93.2% 0.041 206.0), oklch(31.6% 0.059 223.7));
    --accent-5: light-dark(oklch(90.0% 0.054 206.4), oklch(36.3% 0.068 223.7));
    --accent-6: light-dark(oklch(85.8% 0.066 208.1), oklch(41.4% 0.075 221.5));
    --accent-7: light-dark(oklch(80.4% 0.082 209.7), oklch(47.8% 0.083 221.6));
    --accent-8: light-dark(oklch(72.8% 0.110 211.9), oklch(55.7% 0.099 221.1));
    --accent-9: light-dark(oklch(66.0% 0.122 221.7), oklch(66.0% 0.122 221.7));
    --accent-10: light-dark(oklch(62.7% 0.114 221.5), oklch(69.9% 0.119 218.9));
    --accent-11: light-dark(oklch(54.7% 0.097 220.8), oklch(78.5% 0.116 213.8));
    --accent-12: light-dark(oklch(33.1% 0.053 218.8), oklch(91.0% 0.057 211.5));
    --danger-1: light-dark(oklch(99.3% 0.003 17.2), oklch(18.7% 0.012 18.3));
    --danger-2: light-dark(oklch(98.4% 0.008 27.2), oklch(20.8% 0.017 31.4));
    --danger-3: light-dark(oklch(95.4% 0.021 31.8), oklch(25.5% 0.055 26.8));
    --danger-4: light-dark(oklch(92.1% 0.041 34.8), oklch(29.0% 0.087 27.8));
    --danger-5: light-dark(oklch(88.9% 0.059 32.6), oklch(33.1% 0.098 28.6));
    --danger-6: light-dark(oklch(85.3% 0.077 32.6), oklch(38.0% 0.100 29.9));
    --danger-7: light-dark(oklch(80.2% 0.095 32.2), oklch(44.6% 0.106 31.6));
    --danger-8: light-dark(oklch(74.1% 0.118 32.3), oklch(53.8% 0.129 33.4));
    --danger-9: light-dark(oklch(62.7% 0.194 33.3), oklch(62.7% 0.194 33.3));
    --danger-10: light-dark(oklch(60.3% 0.195 33.2), oklch(66.4% 0.179 34.1));
    --danger-11: light-dark(oklch(56.6% 0.198 32.7), oklch(77.9% 0.131 34.9));
    --danger-12: light-dark(oklch(34.6% 0.080 30.4), oklch(89.9% 0.046 31.2));
    --success-1: light-dark(oklch(99.4% 0.004 157.2), oklch(18.7% 0.012 167.0));
    --success-2: light-dark(oklch(98.1% 0.010 155.1), oklch(21.2% 0.015 165.9));
    --success-3: light-dark(oklch(95.8% 0.022 155.9), oklch(27.2% 0.040 162.2));
    --success-4: light-dark(oklch(93.4% 0.037 156.4), oklch(31.7% 0.057 161.8));
    --success-5: light-dark(oklch(89.9% 0.049 157.2), oklch(36.5% 0.066 161.2));
    --success-6: light-dark(oklch(85.6% 0.064 158.2), oklch(41.2% 0.072 160.9));
    --success-7: light-dark(oklch(79.8% 0.083 159.1), oklch(46.7% 0.082 160.2));
    --success-8: light-dark(oklch(71.6% 0.113 160.3), oklch(52.8% 0.096 159.4));
    --success-9: light-dark(oklch(64.1% 0.133 157.7), oklch(64.1% 0.133 157.7));
    --success-10: light-dark(oklch(61.1% 0.127 158.2), oklch(67.5% 0.141 157.7));
    --success-11: light-dark(oklch(54.3% 0.112 159.5), oklch(77.9% 0.165 157.3));
    --success-12: light-dark(oklch(32.2% 0.048 164.5), oklch(90.5% 0.083 158.2));
    --warning-1: light-dark(oklch(99.4% 0.003 84.6), oklch(18.5% 0.013 77.8));
    --warning-2: light-dark(oklch(98.6% 0.024 99.1), oklch(21.2% 0.018 82.0));
    --warning-3: light-dark(oklch(97.0% 0.068 100.4), oklch(25.8% 0.044 74.5));
    --warning-4: light-dark(oklch(94.5% 0.103 97.9), oklch(29.6% 0.063 73.9));
    --warning-5: light-dark(oklch(91.8% 0.133 98.2), oklch(33.6% 0.072 72.9));
    --warning-6: light-dark(oklch(88.0% 0.123 93.4), oklch(38.6% 0.078 75.3));
    --warning-7: light-dark(oklch(82.7% 0.122 86.7), oklch(45.4% 0.082 75.0));
    --warning-8: light-dark(oklch(75.8% 0.140 76.7), oklch(53.6% 0.096 73.4));
    --warning-9: light-dark(oklch(85.4% 0.157 84.1), oklch(85.4% 0.157 84.1));
    --warning-10: light-dark(oklch(83.1% 0.168 80.8), oklch(88.5% 0.181 94.8));
    --warning-11: light-dark(oklch(57.1% 0.129 63.9), oklch(86.2% 0.173 89.0));
    --warning-12: light-dark(oklch(35.2% 0.049 54.2), oklch(93.5% 0.072 86.1));
  }
  :root {
    color-scheme: light dark;
    --color-shift: light-dark(black, white);
    --state-shift-hover-light: 6%;
    --state-shift-hover-dark: 12%;
    --state-shift-medium-light: 10%;
    --state-shift-medium-dark: 18%;
    --state-shift-active-light: 14%;
    --state-shift-active-dark: 24%;
    --state-shift-hover: var(--state-shift-hover-light);
    --state-shift-medium: var(--state-shift-medium-light);
    --state-shift-active: var(--state-shift-active-light);
    --color-text: var(--neutral-12);
    --color-text-muted: var(--neutral-11);
    --color-text-subtle: light-dark( color-mix(in oklch, var(--neutral-10), var(--color-shift) 9%), color-mix(in oklch, var(--neutral-10), var(--color-shift) 30%) );
    --color-text-inverse: var(--neutral-1);
    --color-surface: var(--neutral-1);
    --color-surface-sunken: var(--neutral-2);
    --color-surface-raised: var(--neutral-2);
    --color-surface-float: var(--neutral-3);
    --color-surface-inverse: var(--neutral-12);
    --color-fill-subtle: var(--neutral-2);
    --color-fill: var(--neutral-3);
    --color-fill-strong: var(--neutral-5);
    --color-fill-stronger: var(--neutral-7);
    --color-fill-on-float: var(--neutral-4);
    --color-state-bg: var(--color-fill);
    --color-state-bg-on-raised: var(--color-fill);
    --color-state-bg-on-float: var(--color-fill-on-float);
    --color-text-subtle-on-raised: var(--neutral-9);
    --color-text-muted-on-raised: var(--neutral-11);
    --color-text-subtle-on-float: var(--neutral-9);
    --color-text-muted-on-float: var(--neutral-11);
    --color-thumb: var(--neutral-1);
    --color-border-subtle: var(--neutral-4);
    --color-border: var(--neutral-5);
    --color-border-strong: var(--neutral-6);
    --color-border-stronger: var(--neutral-7);
    --color-primary: var(--primary-11);
    --color-primary-subtle: var(--primary-3);
    --color-primary-soft: var(--primary-5);
    --color-primary-border: var(--primary-7);
    --color-primary-text: var(--primary-11);
    --color-on-primary: light-dark(oklch(99% 0 0), var(--primary-2));
    --color-on-primary-subtle: var(--primary-12);
    --color-on-primary-soft: var(--primary-12);
    --color-accent: var(--accent-11);
    --color-accent-subtle: var(--accent-3);
    --color-accent-soft: var(--accent-5);
    --color-accent-border: var(--accent-7);
    --color-accent-text: var(--accent-11);
    --color-on-accent: light-dark(oklch(99% 0 0), var(--accent-2));
    --color-on-accent-subtle: var(--accent-12);
    --color-on-accent-soft: var(--accent-12);
    --color-danger: var(--danger-11);
    --color-danger-subtle: var(--danger-3);
    --color-danger-soft: var(--danger-5);
    --color-danger-border: var(--danger-7);
    --color-danger-text: var(--danger-11);
    --color-on-danger: light-dark(oklch(99% 0 0), var(--danger-2));
    --color-on-danger-subtle: var(--danger-12);
    --color-on-danger-soft: var(--danger-12);
    --color-success: var(--success-11);
    --color-success-subtle: var(--success-3);
    --color-success-soft: var(--success-5);
    --color-success-border: var(--success-7);
    --color-success-text: var(--success-11);
    --color-on-success: light-dark(oklch(99% 0 0), var(--success-2));
    --color-on-success-subtle: var(--success-12);
    --color-on-success-soft: var(--success-12);
    --color-warning: var(--warning-9);
    --color-warning-subtle: var(--warning-3);
    --color-warning-soft: var(--warning-5);
    --color-warning-border: var(--warning-7);
    --color-warning-text: var(--warning-11);
    --color-on-warning: oklch(35% 0.05 54);
    --color-on-warning-subtle: var(--warning-12);
    --color-on-warning-soft: var(--warning-12);
    --color-link: var(--primary-11);
    --color-link-hover: light-dark( color-mix(in oklch, var(--color-link), var(--color-shift) var(--state-shift-hover-light)), color-mix(in oklch, var(--color-link), var(--color-shift) var(--state-shift-hover-dark)) );
    --color-link-visited: var(--primary-11);
    --color-focus: var(--primary-9);
    --color-shadow: light-dark(oklch(0% 0 0 / 0.10), oklch(0% 0 0 / 0.25));
    --color-shadow-inset: light-dark(oklch(0% 0 0 / 0.15), oklch(0% 0 0 / 0.30));
    --color-shadow-lg: light-dark(oklch(0% 0 0 / 0.15), oklch(0% 0 0 / 0.35));
    --color-selection-bg: var(--primary-9);
    --color-selection-text: oklch(99% 0 0);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --state-shift-hover: var(--state-shift-hover-dark);
      --state-shift-medium: var(--state-shift-medium-dark);
      --state-shift-active: var(--state-shift-active-dark);
    }
  }
  .light-theme {
    color-scheme: light;
    color: var(--color-text);
    background-color: var(--color-surface);
    --state-shift-hover: var(--state-shift-hover-light);
    --state-shift-medium: var(--state-shift-medium-light);
    --state-shift-active: var(--state-shift-active-light);
  }
  .dark-theme {
    color-scheme: dark;
    color: var(--color-text);
    background-color: var(--color-surface);
    --state-shift-hover: var(--state-shift-hover-dark);
    --state-shift-medium: var(--state-shift-medium-dark);
    --state-shift-active: var(--state-shift-active-dark);
  }
  :root {
    --space-4xs: clamp(0.125rem, 0.0989rem + 0.1159vw, 0.1875rem);
    --space-3xs: clamp(0.25rem, 0.2244rem + 0.1136vw, 0.3125rem);
    --space-2xs: clamp(0.5rem, 0.4744rem + 0.1136vw, 0.5625rem);
    --space-xs: clamp(0.75rem, 0.6989rem + 0.2273vw, 0.875rem);
    --space-sm: clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);
    --space-md: clamp(1.5rem, 1.4233rem + 0.3409vw, 1.6875rem);
    --space-lg: clamp(2rem, 1.8977rem + 0.4545vw, 2.25rem);
    --space-xl: clamp(3rem, 2.8466rem + 0.6818vw, 3.375rem);
    --space-2xl: clamp(4rem, 3.7955rem + 0.9091vw, 4.5rem);
    --space-3xl: clamp(6rem, 5.6932rem + 1.3636vw, 6.75rem);
    --space-3xs-2xs: clamp(0.25rem, 0.1222rem + 0.5682vw, 0.5625rem);
    --space-2xs-xs: clamp(0.5rem, 0.3466rem + 0.6818vw, 0.875rem);
    --space-xs-sm: clamp(0.75rem, 0.5966rem + 0.6818vw, 1.125rem);
    --space-sm-md: clamp(1rem, 0.7188rem + 1.25vw, 1.6875rem);
    --space-md-lg: clamp(1.5rem, 1.1932rem + 1.3636vw, 2.25rem);
    --space-lg-xl: clamp(2rem, 1.4375rem + 2.5vw, 3.375rem);
    --space-xl-2xl: clamp(3rem, 2.3864rem + 2.7273vw, 4.5rem);
    --space-2xl-3xl: clamp(4rem, 2.875rem + 5vw, 6.75rem);
    --space-sm-lg: clamp(1rem, 0.4886rem + 2.2727vw, 2.25rem);
  }
  :root {
    --ui-space-4xs: 0.125rem;
    --ui-space-3xs: 0.25rem;
    --ui-space-2xs: 0.5rem;
    --ui-space-xs: 0.75rem;
    --ui-space-sm: 1rem;
    --ui-space-md: 1.5rem;
    --ui-space-lg: 2rem;
  }
  :root {
    --ui-pad-x-spacious: var(--ui-space-lg);
    --ui-pad-x-relaxed: var(--ui-space-md);
    --ui-pad-x-snug: var(--ui-space-sm);
    --ui-pad-x-tight: var(--ui-space-xs);
    --ui-pad-x-compact: var(--ui-space-2xs);
    --ui-pad-x-dense: var(--ui-space-3xs);
    --ui-pad-y-spacious: var(--ui-space-md);
    --ui-pad-y-relaxed: var(--ui-space-sm);
    --ui-pad-y-snug: var(--ui-space-xs);
    --ui-pad-y-tight: var(--ui-space-2xs);
    --ui-pad-y-compact: var(--ui-space-3xs);
    --ui-pad-y-dense: var(--ui-space-4xs);
    --ui-pad-square-snug: var(--ui-space-xs);
    --ui-pad-square-tight: var(--ui-space-2xs);
    --ui-pad-square-compact: var(--ui-space-3xs);
    --ui-pad-square-dense: var(--ui-space-4xs);
    --gap-spacious: var(--space-md);
    --gap-relaxed: var(--space-sm);
    --gap-snug: var(--space-xs);
    --gap-tight: var(--space-3xs);
    --gap-compact: var(--space-4xs);
    --gap-dense: var(--space-4xs);
  }
  :root {
    --step--2: clamp(0.5628rem, 0.4985rem + 0.2859vw, 0.72rem);
    --step--1: clamp(0.7502rem, 0.6889rem + 0.2724vw, 0.9rem);
    --step-0: clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);
    --step-1: clamp(1.333rem, 1.303rem + 0.1332vw, 1.4063rem);
    --step-2: clamp(1.7578rem, 1.7847rem + -0.0347vw, 1.7769rem);
    --step-3: clamp(2.1973rem, 2.4387rem + -0.3115vw, 2.3686rem);
    --step-4: clamp(2.7466rem, 3.3254rem + -0.7468vw, 3.1573rem);
    --step-5: clamp(3.4332rem, 4.526rem + -1.41vw, 4.2087rem);
  }
  :root {
    --ui-text-xs: 0.75rem;
    --ui-text-sm: 0.875rem;
    --ui-text-base: 1rem;
    --ui-text-lg: 1.125rem;
  }
  :root {
    --leading-tight: 1.1;
    --leading-heading: 1.2;
    --leading-body: 1.6;
    --leading-loose: 1.8;
    --font-base:
      -apple-system,
      BlinkMacSystemFont,
      avenir next,
      avenir,
      segoe ui,
      helvetica neue,
      Adwaita Sans,
      Cantarell,
      Ubuntu,
      roboto,
      noto,
      helvetica,
      arial,
      sans-serif;
    --font-heading: var(--font-base);
    --font-mono:
      Menlo,
      Consolas,
      Monaco,
      Adwaita Mono,
      Liberation Mono,
      Lucida Console,
      monospace;
    --radius-scale: 0.75;
    --radius-sm: calc(var(--radius-scale) * 0.25rem);
    --radius-md: calc(var(--radius-scale) * 0.5rem);
    --radius-lg: calc(var(--radius-scale) * 0.75rem);
    --radius-xl: calc(var(--radius-scale) * 1rem);
    --radius-pill: 9999px;
    --radius-circle: 50%;
    --border-width-default: 1px;
    --border-width-thick: 2px;
    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --outline-offset: 2px;
    --outline-offset-tight: 1px;
    --outline-offset-inset: -2px;
    --letter-spacing-tight: -0.02em;
    --letter-spacing-subtle: 0.015em;
    --letter-spacing-wide: 0.05em;
    --icon-size: 1.1em;
  }
  :root {
    --shadow-sm: 0 1px 2px var(--color-shadow);
    --shadow-md: 0 2px 4px var(--color-shadow), 0 1px 2px var(--color-shadow);
    --shadow-lg: 0 4px 12px var(--color-shadow-lg), 0 2px 4px var(--color-shadow);
    --shadow-xl: 0 8px 24px var(--color-shadow-lg), 0 4px 8px var(--color-shadow);
  }
  :root {
    --zindex-raised: 1;
    --zindex-sticky: 100;
    --zindex-dropdown: 200;
    --zindex-drawer: 300;
    --zindex-dialog: 400;
    --zindex-toast: 500;
    --zindex-tooltip: 600;
    --zindex-important: 9999;
  }
  :root {
    --transition-fast: 120ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 350ms ease;
  }
  @media (prefers-reduced-motion: reduce) {
    :root {
      --transition-fast: 0ms;
      --transition-normal: 0ms;
      --transition-slow: 0ms;
    }
  }
  :root {
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --backdrop-color: oklch(0% 0 0 / 0.4);
  }
  @media (prefers-reduced-motion: reduce) {
    :root {
      --duration-fast: 0ms;
      --duration-normal: 0ms;
      --duration-slow: 0ms;
    }
  }
}

/* src/css/animations.css */
@layer animations {
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
}

/* src/css/base.css */
@layer base {
  body {
    font-family: var(--font-base);
    font-size: var(--step-0);
    line-height: var(--leading-body);
    color: var(--color-text);
    background-color: var(--color-surface);
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-heading);
    line-height: var(--leading-heading);
    font-weight: var(--font-weight-semibold);
  }
  h1 {
    font-size: var(--step-4);
  }
  h2 {
    font-size: var(--step-3);
  }
  h3 {
    font-size: var(--step-2);
  }
  h4 {
    font-size: var(--step-1);
  }
  h5 {
    font-size: var(--step-0);
  }
  h6 {
    font-size: var(--step--1);
  }
  a {
    color: var(--color-link);
    transition: color var(--transition-fast);
  }
  a:visited {
    color: var(--color-link-visited);
  }
  a:hover {
    color: var(--color-link-hover);
  }
  :focus-visible {
    outline: var(--border-width-thick) solid var(--color-focus);
    outline-offset: var(--outline-offset);
  }
  ::selection {
    background-color: var(--color-selection-bg);
    color: var(--color-selection-text);
  }
  small {
    font-size: var(--step--1);
  }
  code,
  kbd,
  samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }
  hr {
    --hr-border: var(--border-width-default) solid var(--color-border);
    border: none;
    border-block-start: var(--hr-border);
    margin-block: var(--space-lg);
  }
  strong,
  b {
    font-weight: var(--font-weight-semibold);
  }
  mark {
    background-color: var(--color-warning-subtle);
    color: var(--color-on-warning-subtle);
    padding-inline: 0.15em;
    border-radius: var(--radius-sm);
  }
}

/* src/css/composition.css */
@layer composition {
  .flow > * + * {
    margin-block-start: var(--flow-space, var(--gap-spacious));
  }
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--gap-spacious));
  }
  .stack.is-snug {
    --stack-gap: var(--gap-snug);
  }
  .stack.is-tight {
    --stack-gap: var(--gap-tight);
  }
  .stack.is-centered {
    align-items: center;
  }
  .cluster {
    display: flex;
    flex-wrap: var(--cluster-wrap, wrap);
    gap: var(--cluster-gap, var(--gap-relaxed));
    align-items: var(--cluster-align, center);
  }
  .cluster.is-snug {
    --cluster-gap: var(--gap-snug);
  }
  .cluster.is-tight {
    --cluster-gap: var(--gap-tight);
  }
  .cluster.is-between {
    flex: 1;
    justify-content: space-between;
  }
  .cluster.is-around {
    flex: 1;
    justify-content: space-evenly;
  }
  .cluster.is-center {
    justify-content: center;
  }
  .cluster.is-end {
    justify-content: flex-end;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 16rem), 1fr));
    gap: var(--grid-gap, var(--gap-spacious));
  }
  .flank {
    display: flex;
    flex-wrap: wrap;
    gap: var(--flank-gap, var(--space-lg));
  }
  .flank > :first-child {
    flex-basis: var(--flank-width, 20rem);
    flex-grow: 1;
  }
  .flank > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--flank-content-min, 50%);
  }
  .flank.is-reversed > :first-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--flank-content-min, 50%);
  }
  .flank.is-reversed > :last-child {
    flex-basis: var(--flank-width, 20rem);
    flex-grow: 1;
    min-inline-size: 0;
  }
  .cover {
    display: flex;
    flex-direction: column;
    min-block-size: var(--cover-min-height, 100vh);
    padding: var(--cover-padding, var(--space-md));
  }
  .cover > * {
    margin-block: auto;
  }
  .cover > :first-child:not(.cover-center) {
    margin-block-start: 0;
  }
  .cover > :last-child:not(.cover-center) {
    margin-block-end: 0;
  }
  .switcher {
    display: flex;
    flex-wrap: var(--switcher-wrap, wrap);
    align-items: var(--switcher-align, center);
    gap: var(--switcher-gap, var(--gap-spacious));
  }
  .switcher > * {
    flex-grow: 1;
    flex-basis: calc((var(--switcher-threshold, 30rem) - 100%) * 999);
  }
  .frame {
    aspect-ratio: var(--frame-ratio, 16 / 9);
    overflow: hidden;
    display: flex;
    align-items: var(--frame-align, center);
    justify-content: var(--frame-justify, center);
  }
  .frame > img,
  .frame > video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .reel {
    display: flex;
    gap: var(--reel-gap, var(--gap-spacious));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: var(--reel-scrollbar, thin);
  }
  .reel > * {
    flex-shrink: var(--reel-item-shrink, 0);
    flex-basis: var(--reel-item-size, auto);
  }
  .center {
    max-inline-size: var(--center-max, 65rem);
    margin-inline: auto;
    padding-inline: var(--center-gutter, var(--ui-pad-x-relaxed));
  }
  .box {
    padding: var(--box-padding, var(--space-md));
  }
  .box.is-bordered {
    background: var(--box-bg, var(--color-surface-raised));
    border: var(--box-border, var(--border-width-default) solid var(--color-border));
    border-radius: var(--box-radius, var(--radius-md));
  }
  .media {
    display: flex;
    align-items: var(--media-align, flex-start);
    gap: var(--media-gap, var(--gap-relaxed));
  }
  .media-figure {
    flex-shrink: 0;
    margin-block-start: var(--media-figure-start, 0.1rem);
  }
  .media-body {
    flex: 1;
    min-inline-size: 0;
    :is(h2, h3, h4, h5, h6) {
      line-height: 1;
    }
  }
  .anchor {
    position: relative;
    display: inline-flex;
  }
  .anchor > .anchor-overlay {
    position: absolute;
    z-index: 1;
    inset-block-start: var(--anchor-offset, -0.75em);
    inset-inline-end: var(--anchor-offset, -0.75em);
  }
}

/* src/css/alert.css */
@layer blocks {
  .alert {
    --alert-bg: var(--color-surface-raised);
    --alert-header-font-size: var(--step-0);
    --alert-header-font-weight: var(--font-weight-bold);
    --alert-color: var(--color-text);
    --alert-border: var(--color-border);
    --alert-accent: var(--color-border-strong);
    --alert-padding-block: var(--ui-pad-y-snug);
    --alert-padding-inline: var(--ui-pad-x-snug);
    --media-gap: var(--gap-snug);
    background-color: var(--alert-bg);
    border: var(--border-width-default) solid var(--alert-border);
    border-radius: var(--radius-md);
    color: var(--alert-color);
    padding: var(--alert-padding-block) var(--alert-padding-inline);
    font-size: var(--step--1);
    .media-figure {
      color: var(--alert-accent);
    }
    :is(h1, h2, h3, h4, h5, h6) {
      color: var(--alert-color);
      font-size: var(--alert-header-font-size);
      font-weight: var(--alert-header-font-weight);
    }
    &.is-info {
      --alert-bg: var(--color-primary-subtle);
      --alert-color: var(--color-primary-text);
      --alert-border: var(--color-primary-border);
      --alert-accent: var(--color-primary);
    }
    &.is-success {
      --alert-bg: var(--color-success-subtle);
      --alert-color: var(--color-success-text);
      --alert-border: var(--color-success-border);
      --alert-accent: var(--color-success);
    }
    &.is-warning {
      --alert-bg: var(--color-warning-subtle);
      --alert-color: var(--color-warning-text);
      --alert-border: var(--color-warning-border);
      --alert-accent: var(--color-warning);
    }
    &.is-danger {
      --alert-bg: var(--color-danger-subtle);
      --alert-color: var(--color-danger-text);
      --alert-border: var(--color-danger-border);
      --alert-accent: var(--color-danger);
    }
    &.is-compact {
      --alert-padding-block: var(--ui-pad-y-tight);
      --alert-padding-inline: var(--ui-pad-x-tight);
      --media-gap: var(--gap-tight);
      font-size: var(--step--1);
    }
  }
}

/* src/css/badge.css */
@layer blocks {
  .badge {
    --badge-bg: var(--color-primary-subtle);
    --badge-color: var(--color-primary-text);
    --badge-border: var(--color-primary-border);
    --badge-radius: var(--radius-pill);
    --badge-padding: var(--ui-pad-y-dense) var(--ui-pad-x-compact);
    display: inline-flex;
    align-items: center;
    gap: var(--gap-tight);
    padding: var(--badge-padding);
    background-color: var(--badge-bg);
    color: var(--badge-color);
    border: var(--border-width-default) solid var(--badge-border);
    border-radius: var(--badge-radius);
    font-size: var(--ui-text-xs);
    font-weight: var(--font-weight-normal);
    line-height: var(--leading-heading);
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    .dismiss {
      --dismiss-padding: var(--ui-pad-square-tight);
    }
    &.is-neutral {
      --badge-bg: var(--color-fill);
      --badge-color: var(--color-text-muted);
      --badge-border: var(--color-border);
    }
    &.is-accent {
      --badge-bg: var(--color-accent-subtle);
      --badge-color: var(--color-accent-text);
      --badge-border: var(--color-accent-border);
    }
    &.is-danger {
      --badge-bg: var(--color-danger-subtle);
      --badge-color: var(--color-danger-text);
      --badge-border: var(--color-danger-border);
    }
    &.is-success {
      --badge-bg: var(--color-success-subtle);
      --badge-color: var(--color-success-text);
      --badge-border: var(--color-success-border);
    }
    &.is-warning {
      --badge-bg: var(--color-warning-subtle);
      --badge-color: var(--color-warning-text);
      --badge-border: var(--color-warning-border);
    }
    &.as-square {
      --badge-radius: var(--radius-sm);
    }
    &.as-circle {
      min-inline-size: 1.75em;
      min-block-size: 1.75em;
      padding: 0 0.35em;
      justify-content: center;
    }
  }
  :is(a, button).badge {
    cursor: pointer;
    &:hover {
      background-color: color-mix(in oklch, var(--badge-bg), var(--color-shift) var(--state-shift-hover));
    }
    &:focus-visible {
      outline: var(--border-width-thick) solid var(--color-focus);
      outline-offset: var(--outline-offset);
    }
    &:disabled,
    &[aria-disabled=true] {
      opacity: 0.5;
      pointer-events: none;
    }
  }
}

/* src/css/button.css */
@layer blocks {
  .button {
    --button-bg: var(--color-primary);
    --button-color: var(--color-on-primary);
    --button-color-hover: var(--button-color);
    --button-border: transparent;
    --button-padding-block: var(--ui-pad-y-tight);
    --button-padding-inline: var(--ui-pad-x-snug);
    --button-radius: var(--radius-md);
    --button-font-size: var(--ui-text-sm);
    --button-font-weight: var(--font-weight-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-tight);
    padding: var(--button-padding-block) var(--button-padding-inline);
    background-color: var(--button-bg);
    color: var(--button-color);
    border: var(--border-width-default) solid var(--button-border);
    border-radius: var(--button-radius);
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    letter-spacing: var(--letter-spacing-subtle);
    line-height: var(--leading-tight);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
      background-color var(--transition-fast),
      color var(--transition-fast),
      border-color var(--transition-fast);
    &:hover {
      background-color: color-mix(in oklch, var(--button-bg), var(--color-shift) var(--state-shift-hover));
      color: var(--button-color-hover);
    }
    &:active {
      background-color: color-mix(in oklch, var(--button-bg), var(--color-shift) var(--state-shift-active));
    }
    &:focus-visible {
      outline: var(--border-width-thick) solid var(--color-focus);
      outline-offset: var(--outline-offset);
    }
    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }
    &[aria-busy=true] {
      cursor: wait;
      pointer-events: none;
      &::before {
        content: "";
        display: inline-block;
        inline-size: 1em;
        block-size: 1em;
        border: 2px solid color-mix(in oklch, currentColor 30%, transparent);
        border-block-start-color: currentColor;
        border-radius: var(--radius-pill);
        animation: spin 0.6s linear infinite;
        flex-shrink: 0;
      }
    }
    &.is-accent {
      --button-bg: var(--color-accent);
      --button-color: var(--color-on-accent);
    }
    &.is-danger {
      --button-bg: var(--color-danger);
      --button-color: var(--color-on-danger);
    }
    &.is-neutral {
      --button-bg: var(--color-fill-strong);
      --button-color: var(--color-text);
    }
    &.is-outlined {
      --button-bg: transparent;
      --button-color: var(--color-primary-text);
      --button-border: var(--color-primary-border);
      &:hover,
      &:active {
        background-color: var(--color-primary-subtle);
      }
      &:active {
        --button-border: var(--color-primary);
      }
      &.is-accent {
        --button-color: var(--color-accent-text);
        --button-border: var(--color-accent-border);
        &:hover,
        &:active {
          background-color: var(--color-accent-subtle);
        }
        &:active {
          --button-border: var(--color-accent);
        }
      }
      &.is-danger {
        --button-color: var(--color-danger-text);
        --button-border: var(--color-danger-border);
        &:hover,
        &:active {
          background-color: var(--color-danger-subtle);
        }
        &:active {
          --button-border: var(--color-danger);
        }
      }
      &.is-neutral {
        --button-color: var(--color-text);
        --button-border: var(--color-border);
        &:hover,
        &:active {
          background-color: var(--color-fill);
        }
      }
    }
    &.is-ghost {
      --button-bg: transparent;
      --button-color: var(--color-text);
      --button-border: transparent;
      &:hover {
        background-color: var(--color-fill);
      }
      &:active {
        background-color: var(--color-border-subtle);
      }
    }
    &.is-bare {
      --button-bg: transparent;
      --button-color: inherit;
      --button-border: transparent;
      --button-padding-block: 0;
      --button-padding-inline: 0;
      --button-radius: 0;
      font-weight: inherit;
      letter-spacing: inherit;
      &:hover,
      &:active {
        background-color: transparent;
      }
    }
    &.is-sm {
      --button-padding-block: var(--ui-pad-y-compact);
      --button-padding-inline: var(--ui-pad-x-tight);
      --button-font-size: var(--ui-text-xs);
    }
    &.is-lg {
      --button-padding-block: var(--ui-pad-y-snug);
      --button-padding-inline: var(--ui-pad-x-relaxed);
      --button-font-size: var(--ui-text-base);
    }
    svg {
      inline-size: var(--button-icon-size, var(--icon-size));
      block-size: var(--button-icon-size, var(--icon-size));
      flex-shrink: 0;
    }
    &.as-icon {
      --button-padding-block: var(--ui-pad-square-tight);
      --button-padding-inline: var(--ui-pad-square-tight);
    }
    &.as-block {
      inline-size: 100%;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .button[aria-busy=true]::before {
      animation-duration: 1.5s;
    }
  }
  .button-group {
    display: inline-flex;
  }
  .button-group > .button {
    border-radius: 0;
  }
  .button-group > .button:first-child {
    border-start-start-radius: var(--button-radius);
    border-end-start-radius: var(--button-radius);
  }
  .button-group > .button:last-child {
    border-start-end-radius: var(--button-radius);
    border-end-end-radius: var(--button-radius);
  }
  .button-group > .button + .button {
    margin-inline-start: calc(var(--border-width-default) * -1);
  }
  .button-group > .button:not(.is-outlined) + .button:not(.is-outlined) {
    border-inline-start-color: color-mix(in oklch, var(--button-bg), var(--color-shift) var(--state-shift-medium));
  }
  .button-group > .button[aria-pressed=true],
  .button-group > .button:hover,
  .button-group > .button:focus-visible {
    z-index: 1;
  }
  .button-group > .button[aria-pressed=true] {
    --button-bg: var(--color-primary-subtle);
    --button-color: var(--color-on-primary-subtle);
    &:not(.is-outlined) {
      --button-border: var(--color-primary);
    }
    &.is-accent {
      --button-bg: var(--color-accent-subtle);
      --button-color: var(--color-on-accent-subtle);
      &:not(.is-outlined) {
        --button-border: var(--color-accent);
      }
    }
    &.is-danger {
      --button-bg: var(--color-danger-subtle);
      --button-color: var(--color-on-danger-subtle);
      &:not(.is-outlined) {
        --button-border: var(--color-danger);
      }
    }
    &.is-neutral {
      --button-bg: var(--color-fill);
      --button-color: var(--color-text);
      &:not(.is-outlined) {
        --button-border: var(--color-border-strong);
      }
    }
  }
}

/* src/css/card.css */
@layer blocks {
  .card {
    --card-bg: var(--color-surface-raised);
    --card-border: var(--color-border);
    --card-radius: var(--radius-md);
    --card-padding-block: var(--ui-pad-y-relaxed);
    --card-padding-inline: var(--ui-pad-x-relaxed);
    --card-shadow: var(--shadow-sm);
    --card-gap: var(--gap-relaxed);
    --card-heading-size: var(--step-1);
    --card-content-font-size: inherit;
    --card-media-radius: var(--radius-md);
    position: relative;
    isolation: isolate;
    background-color: var(--card-bg);
    border: var(--border-width-default) solid var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--card-padding-block) var(--card-padding-inline);
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
    font-size: var(--card-content-font-size);
    :is(h2, h3, h4, h5, h6) {
      font-size: var(--card-heading-size);
    }
    :is(h2, h3, h4, h5, h6) a {
      color: inherit;
      text-decoration: none;
      &:hover {
        color: var(--color-primary);
      }
    }
    > figure {
      margin: 0;
    }
    > figure:first-child {
      margin: calc(var(--card-padding-block) * -1) calc(var(--card-padding-inline) * -1) 0;
      inline-size: calc(100% + var(--card-padding-inline) * 2);
      overflow: hidden;
      border-radius: var(--card-media-radius);
    }
    > figure:first-child :is(img, video) {
      inline-size: 100%;
      max-inline-size: none;
      block-size: var(--card-media-height, auto);
      object-fit: cover;
      display: block;
    }
    > footer {
      margin-block-start: auto;
    }
    &.is-compact {
      --card-padding-block: var(--ui-pad-y-snug);
      --card-padding-inline: var(--ui-pad-x-snug);
      --card-gap: var(--gap-snug);
      --card-heading-size: var(--step-0);
      --card-content-font-size: var(--step--1);
    }
    &.is-flat {
      --card-shadow: none;
      --card-border: transparent;
      --card-bg: transparent;
    }
    &.is-interactive {
      cursor: pointer;
      transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
      &:hover {
        --card-shadow: var(--shadow-lg);
        --card-border: var(--color-border-strong);
      }
      :is(h2, h3, h4, h5, h6) a::after {
        content: "";
        position: absolute;
        inset: 0;
      }
      > footer {
        position: relative;
      }
    }
    &.is-featured {
      --card-border: var(--color-primary);
      border-width: var(--border-width-thick);
    }
  }
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-grid-min, 18rem), 1fr));
    gap: var(--gap-spacious);
  }
  .card-grid.is-aligned > .card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span var(--card-grid-rows, 4);
  }
}

/* src/css/code.css */
@layer blocks {
  .code,
  .prose pre {
    --code-bg: var(--color-fill);
    --code-border: var(--color-border-subtle);
    --code-radius: var(--radius-md);
    --code-padding: var(--space-md);
    --code-font-size: var(--step--1);
    background-color: var(--code-bg);
    border: var(--border-width-default) solid var(--code-border);
    border-radius: var(--code-radius);
    padding: var(--code-padding);
    overflow-x: auto;
    line-height: 1.5;
    tab-size: 4;
    code {
      font-family: var(--font-mono);
      font-size: var(--code-font-size);
      background: none;
      padding: 0;
      border-radius: 0;
      overflow-wrap: normal;
    }
  }
  .prose pre code {
    font-family: var(--font-mono);
    font-size: var(--code-font-size);
    background: none;
    padding: 0;
    border-radius: 0;
    overflow-wrap: normal;
  }
  .code-header {
    --code-header-bg: var(--color-surface);
    --code-header-border: var(--color-border-subtle);
    --code-header-radius: var(--radius-md);
    --code-header-font-size: var(--ui-text-xs);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-snug);
    padding: var(--ui-pad-y-compact) var(--ui-pad-x-snug);
    background-color: var(--code-header-bg);
    border: var(--border-width-default) solid var(--code-header-border);
    border-radius: var(--code-header-radius) var(--code-header-radius) 0 0;
    font-family: var(--font-mono);
    font-size: var(--code-header-font-size);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    &.is-accent {
      --code-header-bg: var(--color-primary-subtle);
      --code-header-border: var(--color-primary-border);
      color: var(--color-primary-text);
    }
    &.is-filled {
      --code-header-bg: var(--color-fill-subtle);
    }
    + .code {
      border-block-start: none;
      border-radius: 0 0 var(--code-radius) var(--code-radius);
    }
  }
  .code-header-actions {
    display: flex;
    gap: var(--gap-tight);
  }
  brio-code-example {
    display: block;
    > .code-header {
      margin-block-start: 0;
    }
    > .code {
      border-block-start: none;
      border-radius: 0 0 var(--code-radius) var(--code-radius);
    }
    > .code-header:has(+ .code[hidden]) {
      border-radius: var(--code-header-radius);
    }
  }
}

/* src/css/details.css */
@layer blocks {
  .details {
    --details-border: var(--border-width-default) solid var(--color-border);
    --details-padding: var(--ui-pad-y-snug) var(--ui-pad-x-snug);
    --details-chevron-size: 0.5em;
    --details-chevron-color: var(--color-text-muted);
    border: var(--details-border);
    border-radius: var(--radius-md);
    padding: var(--details-padding);
    &.no-border {
      --details-border: none;
    }
    summary {
      cursor: pointer;
      font-weight: var(--font-weight-medium);
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--gap-snug);
      &::-webkit-details-marker {
        display: none;
      }
      &::after {
        content: "";
        display: block;
        inline-size: var(--details-chevron-size);
        block-size: var(--details-chevron-size);
        border-inline-end: 2px solid var(--details-chevron-color);
        border-block-end: 2px solid var(--details-chevron-color);
        transform: rotate(-45deg);
        transition: transform var(--duration-normal) var(--ease-out);
        flex-shrink: 0;
      }
    }
    &[open] summary::after {
      transform: rotate(45deg);
    }
    summary + * {
      margin-block-start: var(--ui-pad-y-snug);
    }
    &::details-content {
      opacity: 0;
      transition:
        opacity var(--duration-normal) var(--ease-out),
        block-size var(--duration-normal) var(--ease-in-out),
        content-visibility var(--duration-normal) allow-discrete;
    }
    &[open]::details-content {
      opacity: 1;
    }
  }
  details::details-content {
    interpolate-size: allow-keywords;
    block-size: 0;
    overflow: clip;
    transition: block-size var(--duration-normal) var(--ease-in-out), content-visibility var(--duration-normal) allow-discrete;
  }
  details[open]::details-content {
    block-size: auto;
  }
  .details.is-flush {
    border: none;
    border-radius: 0;
    padding-inline: 0;
    border-block-end: var(--border-width-default) solid var(--color-border);
  }
  .details.is-filled {
    background-color: var(--color-fill);
    border-color: transparent;
    &[open] {
      background-color: var(--color-surface-raised);
      border-color: var(--color-border);
    }
  }
  .details.is-info {
    border-color: var(--color-primary-border);
    background-color: var(--color-primary-subtle);
    --details-chevron-color: var(--color-primary-text);
    summary {
      color: var(--color-primary-text);
    }
  }
  .details.is-warning {
    border-color: var(--color-warning-border);
    background-color: var(--color-warning-subtle);
    --details-chevron-color: var(--color-warning-text);
    summary {
      color: var(--color-warning-text);
    }
  }
  .details.is-danger {
    border-color: var(--color-danger-border);
    background-color: var(--color-danger-subtle);
    --details-chevron-color: var(--color-danger-text);
    summary {
      color: var(--color-danger-text);
    }
  }
  .details.is-success {
    border-color: var(--color-success-border);
    background-color: var(--color-success-subtle);
    --details-chevron-color: var(--color-success-text);
    summary {
      color: var(--color-success-text);
    }
  }
}

/* src/css/dialog.css */
@layer blocks {
  .dialog {
    --dialog-bg: var(--color-surface-float);
    --dialog-color: var(--color-text);
    --dialog-max-width: 32rem;
    --dialog-padding-x: var(--ui-pad-x-relaxed);
    --dialog-padding-y: var(--ui-pad-y-relaxed);
    --dialog-radius: var(--radius-md);
    --dialog-border: var(--border-width-default) solid var(--color-border);
    --dialog-header-border: var(--border-width-default) solid var(--color-border);
    --dialog-footer-border: var(--border-width-default) solid var(--color-border);
    --dialog-title-size: var(--ui-text-base);
    background-color: var(--dialog-bg);
    color: var(--dialog-color);
    border: var(--dialog-border);
    border-radius: var(--dialog-radius);
    padding: 0;
    max-inline-size: var(--dialog-max-width);
    inline-size: calc(100% - var(--ui-pad-x-relaxed));
    margin: auto;
    box-shadow: var(--shadow-xl);
    opacity: 1;
    transform: scale(1);
    transition:
      opacity var(--duration-normal) var(--ease-out),
      transform var(--duration-normal) var(--ease-spring),
      overlay var(--duration-normal) allow-discrete,
      display var(--duration-normal) allow-discrete;
    &:not([open]) {
      opacity: 0;
      transform: scale(0.97);
    }
    &::backdrop {
      background-color: var(--backdrop-color);
      transition:
        opacity var(--duration-normal) var(--ease-out),
        overlay var(--duration-normal) allow-discrete,
        display var(--duration-normal) allow-discrete;
    }
    &:not([open])::backdrop {
      opacity: 0;
    }
    .dismiss {
      --dismiss-hover-bg: var(--color-fill-on-float);
    }
    > header,
    > form[method=dialog] > header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--gap-snug);
      padding: var(--ui-pad-y-snug) var(--dialog-padding-x);
      border-block-end: var(--dialog-header-border);
      :is(h2, h3, h4, h5, h6) {
        font-size: var(--dialog-title-size);
      }
    }
    > :is(section, article),
    > form[method=dialog] > :is(section, article) {
      padding: var(--dialog-padding-y) var(--dialog-padding-x);
    }
    > footer,
    > form[method=dialog] > footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: var(--gap-snug);
      padding: var(--ui-pad-y-snug) var(--dialog-padding-x);
      border-block-start: var(--dialog-footer-border);
      flex-shrink: 0;
    }
    &.is-sm {
      --dialog-max-width: 24rem;
    }
    &.is-lg {
      --dialog-max-width: 48rem;
    }
    &.is-full {
      --dialog-max-width: calc(100% - var(--space-xl));
      max-block-size: calc(100vh - var(--space-xl));
      > :is(section, article),
      > form[method=dialog] > :is(section, article) {
        overflow-y: auto;
      }
    }
    &.no-border {
      --dialog-border: none;
      --dialog-header-border: none;
      --dialog-footer-border: none;
    }
    &.is-danger {
      --dialog-border: var(--border-width-default) solid var(--color-danger-border);
      --dialog-bg: var(--color-danger-subtle);
      --dialog-color: var(--color-danger-text);
      > header,
      > form[method=dialog] > header {
        background-color: var(--color-danger-subtle);
        --dialog-header-border: var(--border-width-default) solid var(--color-danger-border);
        :is(h2, h3, h4, h5, h6) {
          color: var(--color-danger);
        }
      }
      > footer,
      > form[method=dialog] > footer {
        --dialog-footer-border: var(--border-width-default) solid var(--color-danger-border);
      }
      .button.is-danger.is-outlined:hover {
        background-color: var(--color-danger-soft);
      }
    }
  }
  body:has(.dialog[open]) {
    overflow: hidden;
    scrollbar-gutter: stable;
  }
  @starting-style {
    .dialog[open] {
      opacity: 0;
      transform: scale(0.95);
    }
    .dialog[open]::backdrop {
      opacity: 0;
    }
  }
}

/* src/css/dismiss.css */
@layer blocks {
  .dismiss {
    --dismiss-color: var(--color-text-muted);
    --dismiss-hover-color: var(--color-text);
    --dismiss-hover-bg: var(--color-shadow);
    --dismiss-padding: var(--ui-pad-square-snug);
    flex-shrink: 0;
    background: none;
    border: none;
    padding: var(--dismiss-padding);
    cursor: pointer;
    color: var(--dismiss-color);
    border-radius: var(--radius-circle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono), monospace;
    line-height: 1;
    aspect-ratio: 1;
    height: var(--dismiss-size, 1em);
    width: var(--dismiss-size, 1em);
    transition: color var(--transition-fast), background-color var(--transition-fast);
    &:hover {
      color: var(--dismiss-hover-color);
      background-color: var(--dismiss-hover-bg);
    }
  }
}

/* src/css/divider.css */
@layer blocks {
  .divider {
    --divider-color: var(--color-border);
    --divider-spacing: var(--space-md);
    --divider-label-gap: var(--gap-relaxed);
    --divider-font-size: var(--ui-text-sm);
    border: none;
    margin: var(--divider-spacing) 0;
  }
  hr.divider {
    border-block-start: var(--border-width-default) solid var(--divider-color);
  }
  div.divider {
    display: flex;
    align-items: center;
    gap: var(--divider-label-gap);
    font-size: var(--divider-font-size);
    color: var(--color-text-muted);
    white-space: nowrap;
    &::before,
    &::after {
      content: "";
      flex: 1;
      border-block-start: var(--border-width-default) solid var(--divider-color);
    }
  }
  .divider.as-vertical {
    margin-block: 0;
    margin-inline: var(--divider-spacing);
    align-self: stretch;
    border-inline-start: var(--border-width-default) solid var(--divider-color);
  }
  hr.divider.as-vertical {
    border-block-start: none;
    border-inline-start: var(--border-width-default) solid var(--divider-color);
  }
}

/* src/css/drawer.css */
@layer blocks {
  .drawer {
    --drawer-width: 18rem;
    --drawer-bg: var(--color-surface);
    --drawer-border: var(--border-width-default) solid var(--color-border);
    --drawer-header-border: var(--border-width-default) solid var(--color-border);
    --drawer-footer-border: var(--border-width-default) solid var(--color-border);
    --drawer-text-color: var(--color-text);
    --drawer-radius: var(--radius-sm);
    --drawer-title-size: var(--ui-text-base);
    position: fixed;
    inset: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    max-inline-size: 100%;
    max-block-size: 100%;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
    &::backdrop {
      background-color: var(--backdrop-color);
      opacity: 1;
      transition:
        opacity var(--duration-normal) var(--ease-in),
        overlay var(--duration-normal) allow-discrete,
        display var(--duration-normal) allow-discrete;
    }
    &[open]::backdrop {
      transition:
        opacity var(--duration-normal) var(--ease-out),
        overlay var(--duration-normal) allow-discrete,
        display var(--duration-normal) allow-discrete;
    }
    &:not([open])::backdrop,
    &.is-closing::backdrop {
      opacity: 0;
    }
    .drawer-panel {
      position: fixed;
      inset-block: 0;
      inline-size: var(--drawer-width);
      max-inline-size: calc(100% - var(--space-lg));
      background-color: var(--drawer-bg);
      color: var(--drawer-text-color);
      border-inline-end: var(--drawer-border);
      border-radius: 0 var(--drawer-radius) var(--drawer-radius) 0;
      box-shadow: var(--shadow-xl);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      inset-inline-start: 0;
      transform: translateX(0);
      transition: transform var(--duration-normal) var(--ease-in);
      > header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--gap-snug);
        padding: var(--ui-pad-y-snug) var(--ui-pad-x-snug);
        border-block-end: var(--drawer-header-border);
        flex-shrink: 0;
        :is(h2, h3, h4, h5, h6) {
          font-size: var(--drawer-title-size);
          font-weight: var(--font-weight-semibold);
          margin: 0;
        }
      }
      > :is(section, article) {
        flex: 1;
        overflow-y: auto;
        padding: var(--ui-pad-y-relaxed) var(--ui-pad-x-relaxed);
      }
      > footer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: var(--gap-snug);
        padding: var(--ui-pad-y-snug) var(--ui-pad-x-snug);
        border-block-start: var(--drawer-footer-border);
        flex-shrink: 0;
      }
    }
    &[open] .drawer-panel {
      transition: transform var(--duration-normal) var(--ease-out);
    }
    &:not([open]) .drawer-panel,
    &.is-closing .drawer-panel {
      transform: translateX(-100%);
    }
    &.is-end .drawer-panel {
      inset-inline-start: auto;
      inset-inline-end: 0;
      border-inline-end: none;
      border-inline-start: var(--drawer-border);
      border-radius: var(--drawer-radius) 0 0 var(--drawer-radius);
    }
    &.is-end:not([open]) .drawer-panel,
    &.is-end.is-closing .drawer-panel {
      transform: translateX(100%);
    }
    &.no-border {
      --drawer-border: none;
      --drawer-header-border: none;
      --drawer-footer-border: none;
    }
    &.is-sm {
      --drawer-width: 14rem;
    }
    &.is-lg {
      --drawer-width: 24rem;
    }
    &.is-xl {
      --drawer-width: 32rem;
    }
  }
  body:has(.drawer[open]) {
    overflow: hidden;
    scrollbar-gutter: stable;
  }
  @starting-style {
    .drawer[open]::backdrop {
      opacity: 0;
    }
    .drawer[open] .drawer-panel {
      transform: translateX(-100%);
    }
    .drawer.is-end[open] .drawer-panel {
      transform: translateX(100%);
    }
  }
}

/* src/css/dropdown.css */
@layer blocks {
  .dropdown.popover {
    --dropdown-min-width: 10rem;
    --dropdown-padding: var(--ui-pad-square-tight);
    --dropdown-divider-border: var(--border-width-default) solid var(--color-border);
    --popover-padding-x: var(--dropdown-padding);
    --popover-padding-y: var(--dropdown-padding);
    --popover-max-width: none;
    min-inline-size: var(--dropdown-min-width);
    font-size: var(--step--1);
    &.is-end {
      position-area: block-end span-inline-start;
      margin: var(--popover-offset) 0 0 0;
    }
  }
  .dropdown :is([role=menuitem], .dropdown-item),
  .dropdown-item {
    --dropdown-item-padding-x: var(--ui-pad-x-tight);
    --dropdown-item-padding-y: var(--ui-pad-y-compact);
    --dropdown-item-color: var(--color-text);
    --dropdown-item-bg-hover: var(--color-fill-on-float);
    --dropdown-item-bg-current: var(--color-state-bg-on-float);
    --dropdown-item-border-hover: var(--color-fill-on-float);
    --dropdown-item-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--gap-tight);
    inline-size: 100%;
    padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
    border: none;
    border-radius: var(--dropdown-item-radius);
    background: none;
    color: var(--dropdown-item-color);
    font: inherit;
    text-align: start;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
    &:hover {
      background-color: var(--dropdown-item-bg-hover);
    }
    &:focus {
      outline: var(--border-width-thick) solid var(--dropdown-item-border-hover);
      outline-offset: var(--outline-offset-inset);
      background-color: var(--dropdown-item-bg-hover);
    }
    &:disabled,
    &[aria-disabled=true] {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }
    &[aria-current=true] {
      --dropdown-item-color: var(--color-primary);
      --dropdown-item-bg-hover: var(--dropdown-item-bg-current);
      background-color: var(--dropdown-item-bg-current);
      &:focus {
        outline: var(--border-width-thick) solid var(--color-primary-soft);
      }
    }
    &.is-danger {
      --dropdown-item-color: var(--color-danger);
      --dropdown-item-bg-hover: var(--color-danger-subtle);
      --dropdown-item-border-hover: var(--color-danger-subtle);
      > :first-child:is(svg, img) {
        color: currentColor;
      }
    }
    > :first-child:is(svg, img) {
      flex-shrink: 0;
      inline-size: var(--icon-size);
      block-size: var(--icon-size);
      color: var(--color-text-muted-on-float);
    }
    > kbd {
      margin-inline-start: auto;
      padding-inline-start: var(--space-md);
      font-family: var(--font-mono);
      font-size: var(--step--2);
      color: var(--color-text-subtle-on-float);
    }
  }
  .dropdown-label {
    padding: var(--ui-pad-y-compact) var(--ui-pad-x-tight);
    color: var(--color-text-subtle-on-float);
    font-size: var(--step--2);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
  }
  .dropdown :is(hr, [role=separator]) {
    margin-block: var(--gap-tight);
    border: none;
    border-block-start: var(--dropdown-divider-border);
  }
  :where(.button, .nav-link)[aria-haspopup=menu]::after {
    content: "";
    display: inline-block;
    inline-size: 0.4em;
    block-size: 0.4em;
    margin-inline-start: 0.5em;
    vertical-align: middle;
    border-block-end: 0.125em solid currentColor;
    border-inline-end: 0.125em solid currentColor;
    transform: translateY(-0.1em) rotate(45deg);
    transition: transform var(--duration-fast) var(--ease-out);
  }
  :where(.button, .nav-link)[aria-haspopup=menu][aria-expanded=true]::after {
    transform: translateY(0.1em) rotate(225deg);
  }
  :where(.button, .nav-link)[aria-haspopup=menu].no-chevron::after {
    display: none;
  }
}

/* src/css/icon.css */
@layer blocks {
  .icon-box {
    --icon-box-size: 2.5rem;
    --icon-box-bg: var(--color-surface-raised);
    --icon-box-color: var(--color-text);
    --icon-box-radius: var(--radius-md);
    inline-size: var(--icon-box-size);
    block-size: var(--icon-box-size);
    border-radius: var(--icon-box-radius);
    background-color: var(--icon-box-bg);
    color: var(--icon-box-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    &.is-sm {
      --icon-box-size: 2rem;
    }
    &.is-lg {
      --icon-box-size: 3rem;
    }
    &.is-primary {
      --icon-box-bg: var(--color-primary-subtle);
      --icon-box-color: var(--color-primary);
    }
    &.is-success {
      --icon-box-bg: var(--color-success-subtle);
      --icon-box-color: var(--color-success);
    }
    &.is-warning {
      --icon-box-bg: var(--color-warning-subtle);
      --icon-box-color: var(--color-warning);
    }
    &.is-danger {
      --icon-box-bg: var(--color-danger-subtle);
      --icon-box-color: var(--color-danger);
    }
    &.is-accent {
      --icon-box-bg: var(--color-accent-subtle);
      --icon-box-color: var(--color-accent);
    }
  }
}

/* src/css/input.css */
@layer blocks {
  .input,
  .input-addon,
  .input-group,
  input[type=checkbox].input,
  input[type=radio].input {
    --input-border: var(--color-border-stronger);
    --input-radius: var(--radius-md);
    --input-bg: var(--color-surface);
    --input-focus-color: var(--color-focus);
    --input-transition: var(--transition-fast);
  }
  .input:not([type=checkbox], [type=radio], [type=range]) {
    --input-height: 2.25rem;
    --input-padding: var(--ui-pad-y-compact) var(--ui-pad-x-tight);
    --input-font-size: var(--ui-text-sm);
    --input-line-height: var(--leading-tight);
    block-size: var(--input-height);
    padding: var(--input-padding);
    border: var(--border-width-default) solid var(--input-border);
    border-radius: var(--input-radius);
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
    background-color: var(--input-bg);
    color: var(--color-text);
    transition: border-color var(--input-transition), outline-color var(--input-transition);
    &::placeholder {
      color: var(--color-text-subtle);
    }
    &:invalid:not(:placeholder-shown),
    &[aria-invalid=true] {
      --input-border: var(--color-danger);
    }
    &:focus {
      --input-border: var(--color-primary);
      outline: var(--border-width-thick) solid var(--input-focus-color);
      outline-offset: var(--outline-offset-tight);
    }
    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      background-color: var(--color-fill);
    }
    &.is-sm {
      --input-height: 1.75rem;
      --input-padding: var(--ui-pad-y-compact) var(--ui-pad-x-compact);
      --input-font-size: var(--ui-text-xs);
    }
    &.is-lg {
      --input-height: 2.5rem;
      --input-padding: var(--ui-pad-y-tight) var(--ui-pad-x-tight);
      --input-font-size: var(--ui-text-base);
    }
  }
  input[type=file].input {
    padding: 0;
    padding-inline-end: var(--ui-pad-x-tight);
    line-height: 1;
    &::file-selector-button {
      display: inline-flex;
      align-items: center;
      block-size: 100%;
      padding: var(--ui-pad-y-compact) var(--ui-pad-x-tight);
      margin-inline-end: var(--ui-pad-x-tight);
      border: none;
      border-inline-end: var(--border-width-default) solid var(--input-border);
      background-color: var(--color-surface-sunken);
      color: var(--color-text);
      font-size: var(--ui-text-sm);
      font-family: inherit;
      font-weight: var(--font-weight-medium);
      border-radius: var(--input-radius) 0 0 var(--input-radius);
      cursor: pointer;
      transition: background-color var(--transition-fast);
    }
    &::file-selector-button:hover {
      background-color: var(--color-surface-raised);
    }
  }
  textarea.input:not([type=checkbox], [type=radio], [type=range]) {
    block-size: auto;
    resize: vertical;
  }
  select.input {
    --input-chevron-color: var(--color-text-muted);
    appearance: none;
    padding-inline-end: var(--space-lg);
    background-image:
      linear-gradient(
        45deg,
        transparent calc(50% - 0.5px),
        var(--input-chevron-color) calc(50% - 0.5px) calc(50% + 0.5px),
        transparent calc(50% + 0.5px)),
      linear-gradient(
        -45deg,
        transparent calc(50% - 0.5px),
        var(--input-chevron-color) calc(50% - 0.5px) calc(50% + 0.5px),
        transparent calc(50% + 0.5px));
    background-position: right calc(var(--space-sm) + 5px) center, right var(--space-sm) center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
  }
  input[type=checkbox].input,
  input[type=radio].input {
    --input-check-size: var(--ui-text-base);
    --input-check-accent: var(--color-primary);
    --input-check-color: var(--color-on-primary);
    appearance: none;
    position: relative;
    inline-size: var(--input-check-size);
    block-size: var(--input-check-size);
    margin: 0;
    border: var(--border-width-default) solid var(--input-border);
    border-radius: var(--input-radius);
    background: var(--input-bg);
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color var(--input-transition), border-color var(--input-transition);
    &:checked {
      --input-border: var(--input-check-accent);
      background: var(--input-check-accent);
    }
    &:focus-visible {
      outline: var(--border-width-thick) solid var(--input-focus-color);
      outline-offset: var(--outline-offset);
    }
    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }
  input[type=radio].input {
    border-radius: var(--radius-pill);
  }
  input[type=checkbox].input:checked:not(:indeterminate):not([role=switch])::before {
    content: "";
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    inline-size: 0.3em;
    block-size: 0.55em;
    border-inline-end: 2px solid var(--input-check-color);
    border-block-end: 2px solid var(--input-check-color);
    translate: -50% -60%;
    rotate: 45deg;
  }
  input[type=checkbox].input:indeterminate {
    --input-border: var(--input-check-accent);
    background: var(--input-check-accent);
  }
  input[type=checkbox].input:indeterminate:not([role=switch])::before {
    content: "";
    position: absolute;
    inset-inline: 20%;
    inset-block-start: 50%;
    translate: 0 -50%;
    block-size: 2px;
    background: var(--input-check-color);
    border-radius: 1px;
  }
  input[type=radio].input:checked::before {
    content: "";
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    inline-size: 50%;
    block-size: 50%;
    translate: -50% -50%;
    border-radius: var(--radius-pill);
    background: var(--input-check-color);
  }
  input[type=checkbox][role=switch].input {
    --input-switch-track-width: 2.25rem;
    --input-switch-track-height: 1.25rem;
    --input-switch-thumb-offset: 2px;
    --input-switch-thumb-size: calc(var(--input-switch-track-height) - var(--input-switch-thumb-offset) * 2);
    --input-switch-track-off: var(--color-border-stronger);
    --input-switch-track-on: var(--input-check-accent);
    --input-switch-thumb: var(--color-surface-float);
    inline-size: var(--input-switch-track-width);
    block-size: var(--input-switch-track-height);
    border: none;
    border-radius: var(--radius-pill);
    background: var(--input-switch-track-off);
  }
  input[type=checkbox][role=switch].input:checked {
    background: var(--input-switch-track-on);
  }
  input[type=checkbox][role=switch].input::before {
    content: "";
    position: absolute;
    inset-inline-start: var(--input-switch-thumb-offset);
    inset-block: 0;
    margin-block: auto;
    inline-size: var(--input-switch-thumb-size);
    block-size: var(--input-switch-thumb-size);
    border-radius: var(--radius-pill);
    background: var(--input-switch-thumb);
    transition: translate var(--input-transition);
  }
  input[type=checkbox][role=switch].input:checked::before {
    translate: calc(var(--input-switch-track-width) - var(--input-switch-thumb-size) - var(--input-switch-thumb-offset) * 2) 0;
  }
  input[type=range].input {
    --input-range-track-h: 0.375rem;
    --input-range-track-bg: var(--color-fill);
    --input-range-track-radius: var(--radius-pill);
    --input-range-thumb-size: 1.125rem;
    --input-range-thumb-bg: var(--color-primary);
    appearance: none;
    inline-size: 100%;
    block-size: var(--input-range-thumb-size);
    background: transparent;
    cursor: pointer;
    margin: 0;
    outline: none;
    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    &.is-sm {
      --input-range-track-h: 0.25rem;
      --input-range-thumb-size: 0.875rem;
    }
    &.is-lg {
      --input-range-track-h: 0.5rem;
      --input-range-thumb-size: 1.5rem;
    }
  }
  input[type=range].input::-webkit-slider-runnable-track {
    block-size: var(--input-range-track-h);
    background-color: var(--input-range-track-bg);
    border-radius: var(--input-range-track-radius);
  }
  input[type=range].input::-moz-range-track {
    block-size: var(--input-range-track-h);
    background-color: var(--input-range-track-bg);
    border-radius: var(--input-range-track-radius);
    border: none;
  }
  input[type=range].input::-webkit-slider-thumb {
    appearance: none;
    inline-size: var(--input-range-thumb-size);
    block-size: var(--input-range-thumb-size);
    border-radius: var(--radius-pill);
    background-color: var(--input-range-thumb-bg);
    border: 0;
    margin-block-start: calc((var(--input-range-track-h) - var(--input-range-thumb-size)) / 2);
    transition: background-color var(--input-transition);
  }
  input[type=range].input::-moz-range-thumb {
    inline-size: var(--input-range-thumb-size);
    block-size: var(--input-range-thumb-size);
    border-radius: var(--radius-pill);
    background-color: var(--input-range-thumb-bg);
    border: 0;
    transition: background-color var(--input-transition);
  }
  input[type=range].input:hover::-webkit-slider-thumb {
    background-color: color-mix(in oklch, var(--input-range-thumb-bg), var(--color-shift) var(--state-shift-hover));
  }
  input[type=range].input:hover::-moz-range-thumb {
    background-color: color-mix(in oklch, var(--input-range-thumb-bg), var(--color-shift) var(--state-shift-hover));
  }
  input[type=range].input:focus-visible::-webkit-slider-thumb {
    outline: var(--border-width-thick) solid var(--color-focus);
    outline-offset: var(--outline-offset-tight);
  }
  input[type=range].input:focus-visible::-moz-range-thumb {
    outline: var(--border-width-thick) solid var(--color-focus);
    outline-offset: var(--outline-offset-tight);
  }
  @media (forced-colors: active) {
    input[type=checkbox].input,
    input[type=radio].input,
    input[type=range].input {
      appearance: auto;
    }
    input[type=range].input {
      outline: revert;
    }
  }
  .input-group {
    display: flex;
    align-items: stretch;
    &:not(.is-joined) {
      overflow: hidden;
      border: var(--border-width-default) solid var(--input-border);
      border-radius: var(--input-radius);
      background: var(--input-bg);
      transition: border-color var(--input-transition);
      &:focus-within {
        --input-border: var(--color-primary);
        outline: var(--border-width-thick) solid var(--input-focus-color);
        outline-offset: var(--outline-offset-tight);
      }
      &:has(:invalid:not(:placeholder-shown), [aria-invalid=true]) {
        --input-border: var(--color-danger);
      }
      > .input {
        border: none;
        background: transparent;
        outline: none;
        flex: 1;
        min-inline-size: 0;
      }
      > .button {
        border-radius: 0;
      }
    }
    &.is-joined {
      > * {
        border-radius: 0;
      }
      > :first-child {
        border-start-start-radius: var(--input-radius);
        border-end-start-radius: var(--input-radius);
      }
      > :last-child {
        border-start-end-radius: var(--input-radius);
        border-end-end-radius: var(--input-radius);
      }
      > * + * {
        margin-inline-start: -1px;
      }
      > .input {
        flex: 1;
        min-inline-size: 0;
        &:focus {
          z-index: var(--zindex-raised);
        }
      }
      > .input-addon {
        background-color: var(--color-fill);
        border: var(--border-width-default) solid var(--input-border);
      }
    }
  }
  .input-addon {
    display: inline-flex;
    align-items: center;
    padding-inline: var(--ui-pad-x-tight);
    font-size: var(--ui-text-sm);
    line-height: var(--leading-tight);
    color: var(--color-text-muted);
    white-space: nowrap;
  }
}

/* src/css/nav-link.css */
@layer blocks {
  .nav-link {
    --nav-link-padding-y: var(--ui-pad-y-compact);
    --nav-link-padding-x: var(--ui-pad-x-tight);
    --nav-link-font-size: var(--ui-text-sm);
    --nav-link-color: var(--color-text);
    --nav-link-color-active: var(--color-primary);
    display: inline-block;
    color: var(--nav-link-color);
    text-decoration: none;
    text-underline-offset: 0.3rem;
    padding: var(--nav-link-padding-y) var(--nav-link-padding-x);
    font-size: var(--nav-link-font-size);
    white-space: nowrap;
    transition: color var(--transition-fast);
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    &:hover,
    &[aria-current=page] {
      color: var(--nav-link-color-active);
      text-decoration: underline;
      text-decoration-thickness: 0.1rem;
    }
    &:focus-visible {
      outline: var(--border-width-thick) solid var(--color-focus);
      outline-offset: var(--outline-offset-inset);
      border-radius: var(--radius-sm);
    }
  }
}

/* src/css/navbar.css */
@layer blocks {
  .navbar {
    --navbar-bg: var(--color-surface);
    --navbar-border: var(--border-width-default) solid var(--color-border-subtle);
    --navbar-padding: var(--ui-pad-y-snug) var(--ui-pad-x-snug);
    position: sticky;
    inset-block-start: 0;
    z-index: var(--zindex-sticky);
    background-color: var(--navbar-bg);
    border-block-end: var(--navbar-border);
    padding: var(--navbar-padding);
    flex-shrink: 0;
    &.no-border {
      --navbar-border: none;
    }
  }
  .subnavbar {
    --subnavbar-bg: var(--color-surface);
    --subnavbar-border: var(--border-width-default) solid var(--color-border-subtle);
    --subnavbar-padding: var(--ui-pad-y-compact) var(--ui-pad-x-snug);
    position: sticky;
    inset-block-start: var(--navbar-height, 4rem);
    z-index: calc(var(--zindex-sticky) - 1);
    background-color: var(--subnavbar-bg);
    border-block-end: var(--subnavbar-border);
    padding: var(--subnavbar-padding);
    flex-shrink: 0;
    &.no-border {
      --subnavbar-border: none;
    }
  }
}

/* src/css/popover.css */
@layer blocks {
  .popover {
    --popover-bg: var(--color-surface-float);
    --popover-color: var(--color-text);
    --popover-border: var(--border-width-default) solid var(--color-border);
    --popover-radius: var(--radius-md);
    --popover-padding-x: var(--ui-pad-x-snug);
    --popover-padding-y: var(--ui-pad-y-snug);
    --popover-shadow: var(--shadow-lg);
    --popover-max-width: 20rem;
    --popover-offset: var(--space-3xs);
    inset: auto;
    margin: 0;
    padding: var(--popover-padding-y) var(--popover-padding-x);
    border: var(--popover-border);
    border-radius: var(--popover-radius);
    background-color: var(--popover-bg);
    color: var(--popover-color);
    box-shadow: var(--popover-shadow);
    max-inline-size: var(--popover-max-width);
    font-family: inherit;
    font-size: var(--step-0);
    position-area: block-end span-inline-end;
    margin-block-start: var(--popover-offset);
    position-try-fallbacks: flip-block, flip-inline;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition:
      visibility var(--duration-fast) allow-discrete,
      transform var(--duration-fast) var(--ease-out),
      overlay var(--duration-fast) allow-discrete,
      display var(--duration-fast) allow-discrete;
    &:not(:popover-open) {
      visibility: hidden;
      opacity: 0;
      transform: translateY(-0.15rem);
    }
    &.is-top {
      position-area: block-start span-inline-end;
      margin-block-start: 0;
      margin-block-end: var(--popover-offset);
    }
    &.is-start {
      position-area: inline-start span-block-end;
      margin-block-start: 0;
      margin-inline-end: var(--popover-offset);
    }
    &.is-end {
      position-area: inline-end span-block-end;
      margin-block-start: 0;
      margin-inline-start: var(--popover-offset);
    }
    &.is-sm {
      --popover-max-width: 14rem;
    }
    &.is-lg {
      --popover-max-width: 32rem;
    }
    &.is-wide {
      --popover-max-width: none;
    }
    &.no-border {
      --popover-border: none;
    }
    > header:first-child {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--gap-snug);
      margin-inline: calc(-1 * var(--popover-padding-x));
      margin-block-start: calc(-1 * var(--popover-padding-y));
      margin-block-end: var(--popover-padding-y);
      padding: var(--ui-pad-y-snug) var(--popover-padding-x);
      border-block-end: var(--border-width-default) solid var(--color-border);
      :is(h2, h3, h4, h5, h6) {
        font-size: var(--step-0);
      }
    }
  }
  @starting-style {
    .popover:popover-open {
      transform: translateY(-0.25rem);
    }
  }
  @supports not (font: -apple-system-body) {
    .popover {
      transition:
        visibility var(--duration-fast) allow-discrete,
        opacity var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out),
        overlay var(--duration-fast) allow-discrete,
        display var(--duration-fast) allow-discrete;
    }
    @starting-style {
      .popover:popover-open {
        opacity: 0;
      }
    }
  }
}

/* src/css/prose.css */
@layer blocks {
  .prose {
    --prose-spacing: var(--space-sm-md);
    --prose-max-width: 65ch;
    --prose-border: var(--border-width-default) solid var(--color-border);
    --prose-blockquote-border: 3px solid var(--color-border-strong);
    --prose-kbd-border: var(--border-width-default) solid var(--color-border-strong);
    --prose-figcaption-align: start;
    line-height: var(--leading-body);
    max-inline-size: var(--prose-max-width);
    &.is-wide {
      --prose-max-width: none;
    }
    > * + * {
      margin-block-start: var(--prose-spacing);
    }
    :where(h1, h2, h3, h4, h5, h6) {
      margin-block-start: var(--space-lg-xl);
      margin-block-end: var(--space-xs);
      line-height: var(--leading-heading);
      font-weight: var(--font-weight-semibold);
    }
    > :where(h1, h2, h3):first-child {
      margin-block-start: 0;
    }
    :where(p) {
      text-wrap: pretty;
    }
    a:not([class]) {
      color: var(--color-link);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.15em;
      transition: color var(--transition-fast);
      &:hover {
        color: var(--color-link-hover);
      }
    }
    ul:not([class]),
    ol:not([class]) {
      padding-inline-start: 1.5em;
    }
    ul:not([class]) {
      list-style: disc;
    }
    ol:not([class]) {
      list-style: decimal;
    }
    :is(ul, ol):not([class]) li {
      margin-block-start: var(--space-2xs);
      > ul:not([class]),
      > ol:not([class]) {
        margin-block-start: var(--space-2xs);
      }
      &::marker {
        color: var(--color-text-muted);
      }
    }
    ul:not([class]):has(> li > input[type=checkbox]) {
      list-style: none;
      padding-inline-start: 0;
    }
    ul:not([class]) li > input[type=checkbox] {
      margin-inline-end: var(--space-2xs);
    }
    :where(blockquote) {
      border-inline-start: var(--prose-blockquote-border);
      padding-inline-start: var(--space-md);
      padding-block: var(--space-2xs);
      color: var(--color-text-muted);
      font-style: italic;
      > * + * {
        margin-block-start: var(--space-sm);
      }
      :where(cite) {
        display: block;
        margin-block-start: var(--space-xs);
        font-style: normal;
        font-size: var(--step--1);
        color: var(--color-text-subtle);
      }
    }
    :where(code) {
      font-family: var(--font-mono);
      font-size: 0.875em;
      background-color: var(--color-fill-subtle);
      padding: 0.15em 0.35em;
      border-radius: var(--radius-sm);
      overflow-wrap: break-word;
    }
    :where(hr) {
      border: none;
      border-block-start: var(--prose-border);
      margin-block: var(--space-lg);
    }
    :where(img) {
      max-inline-size: 100%;
      block-size: auto;
      border-radius: var(--radius-md);
    }
    :where(figure) {
      margin-block: var(--space-md-lg);
      :where(figcaption) {
        margin-block-start: var(--space-xs);
        font-size: var(--step--1);
        color: var(--color-text-muted);
        text-align: var(--prose-figcaption-align);
      }
    }
    table:not([class]) {
      inline-size: 100%;
      border-collapse: collapse;
      font-size: var(--step--1);
      margin-block: var(--space-md);
      th {
        font-weight: var(--font-weight-semibold);
        text-align: start;
        border-block-end: var(--border-width-thick) solid var(--color-border-strong);
        padding: var(--space-2xs) var(--space-sm);
      }
      td {
        border-block-end: var(--prose-border);
        padding: var(--space-2xs) var(--space-sm);
      }
      tbody tr:last-child td {
        border-block-end: none;
      }
    }
    :where(dt) {
      font-weight: var(--font-weight-semibold);
      margin-block-start: var(--space-sm);
    }
    :where(dd) {
      padding-inline-start: var(--space-md);
      color: var(--color-text-muted);
    }
    details:not(.details) {
      border: var(--prose-border);
      border-radius: var(--radius-md);
      padding: var(--space-sm) var(--space-md);
      summary {
        cursor: pointer;
        font-weight: var(--font-weight-medium);
        list-style: none;
        &::-webkit-details-marker {
          display: none;
        }
        &::before {
          content: "\25b6\fe0e";
          display: inline-block;
          margin-inline-end: var(--space-2xs);
          font-size: 0.75em;
          transition: transform var(--duration-normal) var(--ease-out);
        }
      }
      &[open] summary::before {
        transform: rotate(90deg);
      }
    }
    :where(kbd) {
      font-family: var(--font-mono);
      font-size: 0.85em;
      background-color: var(--color-fill);
      border: var(--prose-kbd-border);
      border-radius: var(--radius-sm);
      padding: 0.1em 0.35em;
      box-shadow: 0 1px 0 var(--color-border-strong);
    }
    :where(abbr[title]) {
      text-decoration: underline dotted var(--color-text-subtle);
      cursor: help;
    }
    :where(mark) {
      background-color: var(--prose-mark-bg, var(--color-warning-subtle));
      padding: 0.05em 0.2em;
      border-radius: var(--radius-sm);
    }
    :where(del, s) {
      color: var(--color-text-muted);
    }
    :where(sup a) {
      text-decoration: none;
      font-weight: var(--font-weight-medium);
    }
    .footnotes {
      font-size: var(--step--1);
      margin-block-start: var(--space-lg-xl);
    }
  }
}

/* src/css/sidebar.css */
@layer blocks {
  .sidebar {
    --sidebar-width: 16rem;
    --sidebar-bg: var(--color-surface);
    --sidebar-border: var(--border-width-default) solid var(--color-border-subtle);
    --sidebar-link-font-size: var(--ui-text-sm);
    inline-size: var(--sidebar-width);
    flex-shrink: 0;
    background-color: var(--sidebar-bg);
    border-inline-end: var(--sidebar-border);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    &.no-border {
      --sidebar-border: none;
    }
    > header {
      --sidebar-header-border: var(--border-width-default) solid var(--color-border-subtle);
      padding: var(--ui-pad-y-snug) var(--ui-pad-x-snug);
      border-block-end: var(--sidebar-header-border);
      flex-shrink: 0;
    }
    > footer {
      --sidebar-footer-border: var(--border-width-default) solid var(--color-border-subtle);
      padding: var(--ui-pad-y-snug) var(--ui-pad-x-snug);
      border-block-start: var(--sidebar-footer-border);
      flex-shrink: 0;
    }
  }
  .sidebar-toggle {
    display: none;
    background: none;
    border: none;
    padding: var(--ui-pad-y-tight);
    cursor: pointer;
    color: var(--color-text);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background-color var(--transition-fast);
    &:hover {
      background-color: var(--color-fill);
    }
    &:focus-visible {
      outline: var(--border-width-thick) solid var(--color-focus);
      outline-offset: var(--outline-offset-inset);
    }
  }
  @media (max-width: 63.999rem) {
    .sidebar {
      display: none;
    }
    .sidebar-toggle {
      display: inline-flex;
      align-items: center;
      gap: var(--gap-tight);
    }
  }
}

/* src/css/sidebar-nav.css */
@layer blocks {
  .sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--gap-snug);
    padding: var(--ui-pad-y-tight) var(--ui-pad-x-tight);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--sidebar-link-font-size, var(--ui-text-sm));
    transition: color var(--transition-fast), background-color var(--transition-fast);
    &:hover {
      background-color: var(--color-fill);
      color: var(--color-text);
    }
    &:focus-visible {
      outline: var(--border-width-thick) solid var(--color-focus);
      outline-offset: var(--outline-offset-inset);
    }
    &[aria-current=page] {
      background-color: var(--color-state-bg);
      color: var(--color-primary);
      font-weight: var(--font-weight-bold);
      .sidebar-link-icon {
        color: var(--color-primary);
      }
    }
  }
  .sidebar-link-icon {
    flex-shrink: 0;
    inline-size: var(--sidebar-icon-size, var(--icon-size));
    block-size: var(--sidebar-icon-size, var(--icon-size));
    color: var(--color-text-muted);
  }
  .sidebar-link-meta {
    margin-inline-start: auto;
    flex-shrink: 0;
  }
  .sidebar-nav {
    --sidebar-nav-group-font-size: var(--ui-text-xs);
    --sidebar-edge-pad: var(--ui-pad-x-compact);
    --sidebar-rail-width: 1px;
    --sidebar-rail-color: color-mix(in oklch, var(--sidebar-bg), var(--color-shift) 12%);
    --sidebar-rail-color-active: color-mix(in oklch, var(--sidebar-bg), var(--color-shift) 28%);
    --sidebar-rail-marker-color: var(--color-primary);
    --sidebar-group-indent: var(--ui-pad-x-snug);
    flex: 1;
    overflow-y: auto;
    padding: var(--ui-pad-y-snug);
    .sidebar-group {
      margin-block-start: var(--gap-snug);
    }
    > .sidebar-link {
      padding-inline-start: var(--sidebar-edge-pad);
    }
    .sidebar-group-content {
      position: relative;
      margin-inline-start: var(--sidebar-edge-pad);
      border-inline-start: var(--sidebar-rail-width) solid var(--sidebar-rail-color);
      padding-inline-start: var(--sidebar-group-indent);
      &:has([aria-current=page]) {
        border-inline-start-color: var(--sidebar-rail-color-active);
      }
      .sidebar-link[aria-current=page] {
        position: relative;
        &::before {
          content: "";
          position: absolute;
          inset-block: 0;
          inset-inline-start: calc(var(--sidebar-group-indent) * -1);
          inline-size: var(--sidebar-rail-width);
          background-color: var(--sidebar-rail-marker-color);
        }
      }
    }
    .sidebar-group.no-border > .sidebar-group-content {
      border-inline-start: 0;
      padding-inline-start: 0;
      .sidebar-link[aria-current=page]::before {
        display: none;
      }
    }
    .sidebar-group-label {
      padding-block: var(--gap-tight);
      padding-inline: var(--sidebar-edge-pad) var(--ui-pad-x-tight);
      font-size: var(--sidebar-nav-group-font-size);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-subtle);
      text-transform: uppercase;
      letter-spacing: var(--letter-spacing-wide);
    }
    details.sidebar-group > summary.sidebar-group-label {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: var(--radius-md);
      transition: background-color var(--transition-fast);
      &:hover {
        background-color: var(--color-fill);
      }
      &::-webkit-details-marker {
        display: none;
      }
      &::after {
        content: "";
        inline-size: 0.4em;
        block-size: 0.4em;
        border-inline-end: 1.5px solid currentColor;
        border-block-end: 1.5px solid currentColor;
        transform: rotate(-45deg);
        transition: transform var(--duration-fast) var(--ease-out);
        flex-shrink: 0;
      }
    }
    details.sidebar-group[open] > summary.sidebar-group-label::after {
      transform: rotate(45deg);
    }
    .sidebar-group-content .sidebar-group {
      margin-block-start: var(--gap-tight);
      .sidebar-group-label {
        text-transform: none;
        letter-spacing: normal;
        font-weight: var(--font-weight-medium);
        font-size: var(--sidebar-link-font-size);
        color: var(--color-text-muted);
      }
    }
  }
}

/* src/css/spinner.css */
@layer blocks {
  .spinner {
    --spinner-size: 1.25em;
    --spinner-width: 2px;
    --spinner-color: currentColor;
    --spinner-track: var(--color-shadow);
    --spinner-speed: 0.6s;
    display: inline-block;
    inline-size: var(--spinner-size);
    block-size: var(--spinner-size);
    border: var(--spinner-width) solid var(--spinner-track);
    border-block-start-color: var(--spinner-color);
    border-radius: var(--radius-pill);
    animation: spin var(--spinner-speed) linear infinite;
    flex-shrink: 0;
    &.is-sm {
      --spinner-size: 1em;
    }
    &.is-lg {
      --spinner-size: 2rem;
      --spinner-width: 3px;
    }
    &.is-xl {
      --spinner-size: 3rem;
      --spinner-width: 4px;
    }
    &.is-primary {
      --spinner-color: var(--color-primary);
    }
    &.is-accent {
      --spinner-color: var(--color-accent);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .spinner {
      animation-duration: 1.5s;
    }
  }
}

/* src/css/stacked-list.css */
@layer blocks {
  .stacked-list {
    --stacked-list-padding-block: var(--ui-pad-y-snug);
    --stacked-list-padding-inline: var(--ui-pad-x-snug);
    --stacked-list-gap: var(--gap-snug);
    --stacked-list-radius: var(--radius-sm);
    --stacked-list-content-gap: var(--space-3xs);
    --stacked-list-divider-color: var(--color-border-subtle);
    --stacked-list-leading-align: flex-start;
    --stacked-list-trailing-align: flex-start;
    --stacked-list-header-font-size: var(--step-0);
    --stacked-list-content-font-size: var(--step--1);
    --stacked-list-chevron-size: 0.5em;
    --stacked-list-chevron-color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    list-style: none;
    padding-inline-start: 0;
    margin: 0;
    &.is-divided > * + * {
      border-block-start: var(--border-width-default) solid var(--stacked-list-divider-color);
    }
    &.is-compact {
      --stacked-list-padding-block: var(--ui-pad-y-compact);
      --stacked-list-padding-inline: var(--ui-pad-x-tight);
      --stacked-list-gap: var(--gap-tight);
    }
    > :is(article, section, div),
    > li > :is(article, section, div),
    > details > summary,
    > li > details > summary {
      display: flex;
      gap: var(--stacked-list-gap);
      padding: var(--stacked-list-padding-block) var(--stacked-list-padding-inline);
      border-radius: var(--stacked-list-radius);
      position: relative;
      isolation: isolate;
      > :is(.leading, aside:has(~ div)) {
        flex-shrink: 0;
        color: var(--color-text-muted);
        align-self: var(--stacked-list-leading-align);
      }
      > :is(.trailing, div ~ aside) {
        flex-shrink: 0;
        color: var(--color-text-muted);
        align-self: var(--stacked-list-trailing-align);
      }
      > div:not(.leading, .trailing) {
        flex: 1;
        min-inline-size: 0;
        display: flex;
        flex-direction: column;
        gap: var(--stacked-list-content-gap);
      }
      :is(h2, h3, h4, h5, h6) {
        font-size: var(--stacked-list-header-font-size);
        font-weight: var(--font-weight-medium);
        line-height: var(--leading-heading);
        margin: 0;
      }
      :is(h2, h3, h4, h5, h6) a {
        color: inherit;
        text-decoration: none;
        &:hover {
          color: var(--color-primary);
        }
      }
      p {
        color: var(--color-text-muted);
        font-size: var(--stacked-list-content-font-size);
        line-height: var(--leading-body);
        margin: 0;
      }
      &.is-interactive {
        cursor: pointer;
        transition: background-color var(--transition-fast);
        &:hover {
          background-color: var(--color-fill);
        }
        :is(h2, h3, h4, h5, h6) a::after {
          content: "";
          position: absolute;
          inset: 0;
        }
        &:has(:is(h2, h3, h4, h5, h6) a:focus-visible) {
          outline: var(--border-width-thick) solid var(--color-focus);
          outline-offset: var(--outline-offset-inset);
        }
        > :is(.trailing, div ~ aside) {
          position: relative;
        }
      }
    }
    > details,
    > li > details {
      > summary {
        cursor: pointer;
        list-style: none;
        &::-webkit-details-marker {
          display: none;
        }
        &::after {
          content: "";
          inline-size: var(--stacked-list-chevron-size);
          block-size: var(--stacked-list-chevron-size);
          border-inline-end: 2px solid var(--stacked-list-chevron-color);
          border-block-end: 2px solid var(--stacked-list-chevron-color);
          transform: rotate(-45deg);
          transition: transform var(--duration-normal) var(--ease-out);
          flex-shrink: 0;
          align-self: center;
        }
      }
      &[open] > summary::after {
        transform: rotate(45deg);
      }
      > :not(summary) {
        padding-inline: var(--stacked-list-padding-inline);
        padding-block-end: var(--stacked-list-padding-block);
      }
    }
  }
}

/* src/css/table.css */
@layer blocks {
  .table {
    --table-padding: var(--ui-pad-y-tight) var(--ui-pad-x-tight);
    --table-border-color: var(--color-border);
    --table-header-bg: transparent;
    --table-header-color: var(--color-text);
    --table-stripe-bg: var(--color-fill-subtle);
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--ui-text-base);
    th {
      font-weight: var(--font-weight-semibold);
      text-align: start;
      border-block-end: var(--border-width-thick) solid var(--color-border-strong);
      padding: var(--table-padding);
      background-color: var(--table-header-bg);
      color: var(--table-header-color);
      white-space: nowrap;
    }
    td {
      border-block-end: var(--border-width-default) solid var(--table-border-color);
      padding: var(--table-padding);
      color: var(--color-text);
    }
    tbody tr:last-child td {
      border-block-end: none;
    }
    .as-num {
      text-align: end;
      font-variant-numeric: tabular-nums;
    }
    &.is-striped tbody tr:nth-child(even) {
      background-color: var(--table-stripe-bg);
    }
    &.is-bordered {
      border: var(--border-width-default) solid var(--table-border-color);
      th,
      td {
        border: var(--border-width-default) solid var(--table-border-color);
      }
    }
    &.is-compact {
      --table-padding: var(--ui-pad-y-compact) var(--ui-pad-x-tight);
      font-size: var(--ui-text-sm);
    }
    &.is-hoverable tbody tr {
      transition: background-color var(--transition-fast);
      &:hover {
        background-color: var(--table-stripe-bg);
      }
    }
  }
  .table-wrap {
    --table-wrap-border: var(--border-width-default) solid var(--color-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    .table {
      margin: 0;
    }
    &.is-bordered {
      border: var(--table-wrap-border);
      border-radius: var(--radius-md);
      .table.is-bordered {
        border: none;
      }
    }
  }
}

/* src/css/tabs.css */
@layer blocks {
  .tabs {
    --tab-font-size: var(--ui-text-sm);
    --tab-padding-x: var(--ui-pad-x-compact);
    --tab-padding-y: var(--ui-pad-y-tight);
    --tab-gap: var(--gap-tight);
    --tab-color: var(--color-text-muted);
    --tab-color-active: var(--color-primary);
    --tab-border-color: var(--color-border);
    --tab-active-border-color: var(--color-primary);
    --tab-panel-padding-block: var(--space-md);
    display: flex;
    flex-direction: column;
  }
  .tabs [role=tablist] {
    display: flex;
    gap: var(--tab-gap);
    box-shadow: inset 0 calc(-1 * var(--border-width-thick)) 0 var(--tab-border-color);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs [role=tablist]::-webkit-scrollbar {
    display: none;
  }
  .tabs :is([role=tab], .tab) {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-tight);
    padding: var(--tab-padding-y) var(--tab-padding-x);
    background: none;
    border: none;
    border-block-end: var(--border-width-thick) solid transparent;
    color: var(--tab-color);
    font: inherit;
    font-size: var(--tab-font-size);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    white-space: nowrap;
    transition:
      color var(--transition-fast),
      background-color var(--transition-fast),
      border-color var(--transition-fast);
    &:hover {
      color: var(--color-text);
    }
    &[aria-selected=true] {
      color: var(--tab-color-active);
      border-block-end-color: var(--tab-active-border-color);
    }
    &:focus-visible {
      outline: var(--border-width-thick) solid var(--color-focus);
      outline-offset: var(--outline-offset-inset);
      border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    }
    &:disabled,
    &[aria-disabled=true] {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }
  }
  .tabs :is([role=tabpanel], .tab-panel) {
    padding-block: var(--tab-panel-padding-block);
    &[hidden] {
      display: none;
    }
  }
  .tabs.as-vertical {
    --tab-vertical-min-width: 10rem;
    flex-direction: row;
  }
  .tabs.as-vertical [role=tablist] {
    flex-direction: column;
    box-shadow: inset calc(-1 * var(--border-width-thick)) 0 0 var(--tab-border-color);
    overflow-x: visible;
    min-inline-size: var(--tab-vertical-min-width);
  }
  .tabs.as-vertical :is([role=tab], .tab) {
    border-block-end: none;
    border-inline-end: var(--border-width-thick) solid transparent;
    text-align: start;
    justify-content: flex-start;
    &[aria-selected=true] {
      border-inline-end-color: var(--tab-active-border-color);
    }
    &:focus-visible {
      border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    }
  }
  .tabs.as-vertical :is([role=tabpanel], .tab-panel) {
    padding-block: 0;
    padding-inline: var(--tab-panel-padding-block);
    flex: 1;
  }
  .tabs.as-stretched [role=tablist] {
    inline-size: 100%;
  }
  .tabs.as-stretched :is([role=tab], .tab) {
    flex: 1;
    justify-content: center;
  }
  .tabs.as-pills {
    --tab-padding-x: var(--ui-pad-x-snug);
    --tab-padding-y: var(--ui-pad-y-compact);
    [role=tablist] {
      box-shadow: none;
      gap: var(--space-xs);
    }
    :is([role=tab], .tab) {
      border-block-end: none;
      border-radius: var(--radius-pill);
      &:hover:not([aria-selected=true]) {
        background-color: var(--color-fill);
      }
      &[aria-selected=true] {
        background-color: var(--color-state-bg);
        color: var(--tab-color-active);
        border-block-end-color: transparent;
      }
    }
  }
}

/* src/css/toast.css */
@layer blocks {
  .toast-container {
    --toast-max-width: 24rem;
    --toast-enter-y: -0.5rem;
    position: fixed;
    z-index: var(--zindex-toast);
    display: flex;
    flex-direction: column;
    gap: var(--gap-snug);
    padding: var(--ui-pad-y-snug);
    pointer-events: none;
    max-inline-size: var(--toast-max-width);
    &.is-top-end {
      inset-block-start: 0;
      inset-inline-end: 0;
    }
    &.is-top-start {
      inset-block-start: 0;
      inset-inline-start: 0;
    }
    &.is-top-center {
      inset-block-start: 0;
      inset-inline-start: 50%;
      transform: translateX(-50%);
    }
    &.is-bottom-end {
      --toast-enter-y: 0.5rem;
      inset-block-end: 0;
      inset-inline-end: 0;
    }
    &.is-bottom-start {
      --toast-enter-y: 0.5rem;
      inset-block-end: 0;
      inset-inline-start: 0;
    }
    &.is-bottom-center {
      --toast-enter-y: 0.5rem;
      inset-block-end: 0;
      inset-inline-start: 50%;
      transform: translateX(-50%);
    }
    &:hover .toast-progress,
    &:focus-within .toast-progress {
      animation-play-state: paused;
    }
  }
  .toast {
    --toast-bg: var(--color-surface-float);
    --toast-color: var(--color-text);
    --toast-border: var(--color-border);
    --toast-accent: var(--color-border-strong);
    --toast-min-width: 16rem;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--gap-snug);
    padding: var(--ui-pad-y-snug) var(--ui-pad-x-snug);
    background-color: var(--toast-bg);
    color: var(--toast-color);
    border: var(--border-width-default) solid var(--toast-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    min-inline-size: var(--toast-min-width);
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
    @starting-style {
      opacity: 0;
      transform: translateY(var(--toast-enter-y));
    }
    &.is-leaving {
      opacity: 0;
      transform: translateY(var(--toast-enter-y));
      pointer-events: none;
    }
    > svg:first-child {
      flex-shrink: 0;
      color: var(--toast-accent);
      margin-block-start: 0.1em;
    }
    .toast-content {
      flex: 1;
      min-inline-size: 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-3xs);
      .toast-title {
        font-weight: var(--font-weight-semibold);
        font-size: var(--step-0);
      }
      p {
        font-size: var(--step--1);
        color: var(--color-text-muted-on-float);
        margin: 0;
      }
    }
    .toast-progress {
      position: absolute;
      inset-block-end: 0;
      inset-inline-start: 0;
      block-size: 3px;
      inline-size: 100%;
      background-color: var(--toast-accent);
      transform-origin: left;
      animation: toast-progress linear forwards;
    }
    &.is-info {
      --toast-bg: var(--color-primary-subtle);
      --toast-color: var(--color-primary-text);
      --toast-border: var(--color-primary-border);
      --toast-accent: var(--color-primary);
    }
    &.is-success {
      --toast-bg: var(--color-success-subtle);
      --toast-color: var(--color-success-text);
      --toast-border: var(--color-success-border);
      --toast-accent: var(--color-success);
    }
    &.is-warning {
      --toast-bg: var(--color-warning-subtle);
      --toast-color: var(--color-warning-text);
      --toast-border: var(--color-warning-border);
      --toast-accent: var(--color-warning);
    }
    &.is-danger {
      --toast-bg: var(--color-danger-subtle);
      --toast-color: var(--color-danger-text);
      --toast-border: var(--color-danger-border);
      --toast-accent: var(--color-danger);
    }
  }
  @keyframes toast-progress {
    from {
      transform: scaleX(1);
    }
    to {
      transform: scaleX(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .toast {
      transition: none;
      @starting-style {
        opacity: 1;
        transform: none;
      }
    }
    .toast-progress {
      animation: none;
      opacity: 0.4;
    }
  }
}

/* src/css/tooltip.css */
@layer blocks {
  .tooltip-wrap {
    position: relative;
    display: inline-block;
  }
  .tooltip {
    --tooltip-bg: var(--color-text);
    --tooltip-color: var(--color-text-inverse);
    --tooltip-padding-x: var(--ui-pad-x-tight);
    --tooltip-padding-y: var(--ui-pad-y-compact);
    --tooltip-radius: var(--radius-sm);
    --tooltip-font-size: var(--ui-text-xs);
    --tooltip-max-inline-size: 16rem;
    --tooltip-offset: 0.375rem;
    --tooltip-arrow-size: 5px;
    --tooltip-show-delay: 300ms;
    --tooltip-fade-duration: var(--duration-fast);
    position: absolute;
    z-index: var(--zindex-tooltip);
    padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
    background-color: var(--tooltip-bg);
    color: var(--tooltip-color);
    font-size: var(--tooltip-font-size);
    line-height: var(--leading-tight);
    border-radius: var(--tooltip-radius);
    max-inline-size: var(--tooltip-max-inline-size);
    inline-size: max-content;
    pointer-events: none;
    opacity: 0;
    inset-block-end: calc(100% + var(--tooltip-offset));
    inset-inline-start: 50%;
    translate: -50% 0.25rem;
    transition: opacity var(--tooltip-fade-duration) var(--ease-out), translate var(--tooltip-fade-duration) var(--ease-out);
  }
  .tooltip::before {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    margin-inline-start: calc(-1 * var(--tooltip-arrow-size));
    border: var(--tooltip-arrow-size) solid transparent;
    border-block-start-color: var(--tooltip-bg);
  }
  .tooltip-wrap:hover > .tooltip,
  .tooltip-wrap:has(:focus-visible) > .tooltip {
    opacity: 1;
    translate: -50% 0;
    transition-delay: var(--tooltip-show-delay);
  }
  .tooltip.is-bottom {
    inset-block-end: auto;
    inset-block-start: calc(100% + var(--tooltip-offset));
    translate: -50% -0.25rem;
    &::before {
      inset-block-start: auto;
      inset-block-end: 100%;
      border-block-start-color: transparent;
      border-block-end-color: var(--tooltip-bg);
    }
  }
  .tooltip-wrap:hover > .tooltip.is-bottom,
  .tooltip-wrap:has(:focus-visible) > .tooltip.is-bottom {
    translate: -50% 0;
  }
  .tooltip.is-start {
    inset-block-end: auto;
    inset-block-start: 50%;
    inset-inline-start: auto;
    inset-inline-end: calc(100% + var(--tooltip-offset));
    translate: 0.25rem -50%;
    &::before {
      inset-block-start: 50%;
      inset-inline-start: 100%;
      margin-inline-start: 0;
      margin-block-start: calc(-1 * var(--tooltip-arrow-size));
      border-block-start-color: transparent;
      border-inline-start-color: var(--tooltip-bg);
    }
  }
  .tooltip-wrap:hover > .tooltip.is-start,
  .tooltip-wrap:has(:focus-visible) > .tooltip.is-start {
    translate: 0 -50%;
  }
  .tooltip.is-end {
    inset-block-end: auto;
    inset-block-start: 50%;
    inset-inline-start: calc(100% + var(--tooltip-offset));
    translate: -0.25rem -50%;
    &::before {
      inset-block-start: 50%;
      inset-inline-start: auto;
      inset-inline-end: 100%;
      margin-inline-start: 0;
      margin-block-start: calc(-1 * var(--tooltip-arrow-size));
      border-block-start-color: transparent;
      border-inline-end-color: var(--tooltip-bg);
    }
  }
  .tooltip-wrap:hover > .tooltip.is-end,
  .tooltip-wrap:has(:focus-visible) > .tooltip.is-end {
    translate: 0 -50%;
  }
  @media (prefers-reduced-motion: reduce) {
    .tooltip {
      transition-duration: 0s;
    }
  }
}

/* src/css/rescopes.css */
@layer rescopes {
  .dialog .button.is-ghost:hover {
    --button-bg: var(--color-fill-on-float);
  }
  .dialog .input:disabled {
    background-color: var(--color-fill-on-float);
  }
}

/* src/css/utilities.css */
@layer utilities {
  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }
  .text-start {
    text-align: start;
  }
  .text-center {
    text-align: center;
  }
  .text-end {
    text-align: end;
  }
  .text-muted {
    color: var(--color-text-muted);
  }
  .text-subtle {
    color: var(--color-text-subtle);
  }
  .text-inverse {
    color: var(--color-text-inverse);
  }
  .text-primary {
    color: var(--color-primary-text);
  }
  .text-normal {
    color: var(--color-text);
  }
  .text-accent {
    color: var(--color-accent-text);
  }
  .text-success {
    color: var(--color-success-text);
  }
  .text-warning {
    color: var(--color-warning-text);
  }
  .text-danger {
    color: var(--color-danger-text);
  }
  .text-mono {
    font-family: var(--font-mono);
  }
  .text-uppercase {
    text-transform: uppercase;
  }
  .text-lowercase {
    text-transform: lowercase;
  }
  .text--2 {
    font-size: var(--step--2);
  }
  .text--1 {
    font-size: var(--step--1);
  }
  .text-0 {
    font-size: var(--step-0);
  }
  .text-1 {
    font-size: var(--step-1);
  }
  .text-2 {
    font-size: var(--step-2);
  }
  .text-3 {
    font-size: var(--step-3);
  }
  .text-4 {
    font-size: var(--step-4);
  }
  .text-5 {
    font-size: var(--step-5);
  }
  .text-thin {
    font-weight: var(--font-weight-thin);
  }
  .text-extralight {
    font-weight: var(--font-weight-extralight);
  }
  .text-light {
    font-weight: var(--font-weight-light);
  }
  .text-normal {
    font-weight: var(--font-weight-normal);
  }
  .text-medium {
    font-weight: var(--font-weight-medium);
  }
  .text-semibold {
    font-weight: var(--font-weight-semibold);
  }
  .text-bold {
    font-weight: var(--font-weight-bold);
  }
  .text-black {
    font-weight: var(--font-weight-black);
  }
  .leading-tight {
    line-height: var(--leading-tight);
  }
  .leading-heading {
    line-height: var(--leading-heading);
  }
  .leading-body {
    line-height: var(--leading-body);
  }
  .leading-loose {
    line-height: var(--leading-loose);
  }
  .link-plain {
    text-decoration: none;
    color: var(--color-text);
  }
  .gap-3xs {
    gap: var(--space-3xs);
  }
  .gap-2xs {
    gap: var(--space-2xs);
  }
  .gap-xs {
    gap: var(--space-xs);
  }
  .gap-sm {
    gap: var(--space-sm);
  }
  .gap-md {
    gap: var(--space-md);
  }
  .gap-lg {
    gap: var(--space-lg);
  }
  .gap-xl {
    gap: var(--space-xl);
  }
  .gap-2xl {
    gap: var(--space-2xl);
  }
  .flow-space-none {
    --flow-space: 0;
  }
  .flow-space-3xs {
    --flow-space: var(--space-3xs);
  }
  .flow-space-2xs {
    --flow-space: var(--space-2xs);
  }
  .flow-space-xs {
    --flow-space: var(--space-xs);
  }
  .flow-space-sm {
    --flow-space: var(--space-sm);
  }
  .flow-space-md {
    --flow-space: var(--space-md);
  }
  .flow-space-lg {
    --flow-space: var(--space-lg);
  }
  .flow-space-xl {
    --flow-space: var(--space-xl);
  }
  .flow-space-2xl {
    --flow-space: var(--space-2xl);
  }
  .flow-space-3xl {
    --flow-space: var(--space-3xl);
  }
  @media (max-width: 39.999rem) {
    .hide-below-sm {
      display: none;
    }
  }
  @media (max-width: 47.999rem) {
    .hide-below-md {
      display: none;
    }
  }
  @media (max-width: 63.999rem) {
    .hide-below-lg {
      display: none;
    }
  }
  @media (min-width: 40rem) {
    .hide-above-sm {
      display: none;
    }
  }
  @media (min-width: 48rem) {
    .hide-above-md {
      display: none;
    }
  }
  @media (min-width: 64rem) {
    .hide-above-lg {
      display: none;
    }
  }
  .cq-inline {
    container-type: inline-size;
  }
  @container (max-width: 39.999rem) {
    .cq-hide-below-sm {
      display: none;
    }
  }
  @container (max-width: 47.999rem) {
    .cq-hide-below-md {
      display: none;
    }
  }
  @container (max-width: 63.999rem) {
    .cq-hide-below-lg {
      display: none;
    }
  }
  @container (min-width: 40rem) {
    .cq-hide-above-sm {
      display: none;
    }
  }
  @container (min-width: 48rem) {
    .cq-hide-above-md {
      display: none;
    }
  }
  @container (min-width: 64rem) {
    .cq-hide-above-lg {
      display: none;
    }
  }
}

/* src/css/brio.css */
/*!* @link https://utopia.fyi/type/calculator?c=360,18,1.25,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 *!*/
/*# sourceMappingURL=brio.css.map */