/* src/css/base.css */
@layer base {
  *,
  :before,
  :after {
    box-sizing: border-box;
    border: 0 solid var(--border);
    margin: 0;
    padding: 0;
  }

  :where(:scope) {
    box-sizing: border-box;
    border: 0 solid var(--border);
    margin: 0;
    padding: 0;
  }

  ::backdrop {
    box-sizing: border-box;
    border: 0 solid var(--border);
    margin: 0;
    padding: 0;
  }

  ::-webkit-file-upload-button {
    box-sizing: border-box;
    border: 0 solid var(--border);
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid var(--border);
    margin: 0;
    padding: 0;
  }

  :where(:scope):before {
    box-sizing: border-box;
    border: 0 solid var(--border);
    margin: 0;
    padding: 0;
  }

  :where(:scope):after {
    box-sizing: border-box;
    border: 0 solid var(--border);
    margin: 0;
    padding: 0;
  }

  :where(:scope)::backdrop {
    box-sizing: border-box;
    border: 0 solid var(--border);
    margin: 0;
    padding: 0;
  }

  :where(:scope)::-webkit-file-upload-button {
    box-sizing: border-box;
    border: 0 solid var(--border);
    margin: 0;
    padding: 0;
  }

  :where(:scope)::file-selector-button {
    box-sizing: border-box;
    border: 0 solid var(--border);
    margin: 0;
    padding: 0;
  }

  * {
    outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
    flex-shrink: 0;
    scroll-margin-top: 1rem;
  }

  :where(:scope) {
    outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
    flex-shrink: 0;
    scroll-margin-top: 1rem;
  }

  html {
    font-family: var(--font-sans);
    line-height: 1.5;
  }

  :where(:scope) {
    font-family: var(--font-sans);
    line-height: 1.5;
  }

  html {
    scroll-behavior: smooth;
    overscroll-behavior: none;
  }

  :where(:scope:root) {
    scroll-behavior: smooth;
    overscroll-behavior: none;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    :where(:scope:root) {
      scroll-behavior: auto;
    }
  }

  :-webkit-any(h1, h2, h3, h4, h5, h6) {
    font-size: inherit;
    font-weight: inherit;
  }

  :-moz-any(h1, h2, h3, h4, h5, h6) {
    font-size: inherit;
    font-weight: inherit;
  }

  :is(h1, h2, h3, h4, h5, h6) {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    text-decoration: inherit;
  }

  :-webkit-any(ul, ol) {
    list-style: none;
  }

  :-moz-any(ul, ol) {
    list-style: none;
  }

  :is(ul, ol) {
    list-style: none;
  }

  :-webkit-any(img, svg, video, canvas, audio, iframe, embed, object) {
    display: block;
    vertical-align: middle;
  }

  :-moz-any(img, svg, video, canvas, audio, iframe, embed, object) {
    display: block;
    vertical-align: middle;
  }

  :is(img, svg, video, canvas, audio, iframe, embed, object) {
    display: block;
    vertical-align: middle;
  }

  :-webkit-any(img, video) {
    max-width: 100%;
    height: auto;
  }

  :-moz-any(img, video) {
    max-width: 100%;
    height: auto;
  }

  :is(img, video) {
    max-width: 100%;
    height: auto;
  }

  table {
    border-collapse: collapse;
    text-indent: 0;
  }

  :-webkit-any(button, input, select, optgroup, textarea) {
    font: inherit;
    color: inherit;
    background-color: #0000;
  }

  :-moz-any(button, input, select, optgroup, textarea) {
    font: inherit;
    color: inherit;
    background-color: #0000;
  }

  :is(button, input, select, optgroup, textarea) {
    font: inherit;
    color: inherit;
    background-color: #0000;
  }

  :-webkit-any(
    button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"]
  ) {
    appearance: button;
  }

  :-moz-any(
    button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"]
  ) {
    appearance: button;
  }

  :is(button, input[type="button"], input[type="reset"], input[type="submit"]) {
    appearance: button;
  }

  textarea {
    resize: vertical;
  }

  [hidden]:not([hidden="until-found"]) {
    display: none !important;
  }

  hr {
    border-top-width: 1px;
  }

  body {
    background: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1rem;
    line-height: 1.5;
  }

  :where(:scope:not(:root)) {
    background: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1rem;
    line-height: 1.5;
  }

  body {
    overscroll-behavior: none;
    scrollbar-gutter: stable;
  }
}

/* src/css/theme.css */
:root {
  --radius: 0.625rem;
  --font-sans:
    var(--font-geist-sans, "Geist"), ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell,
    "Helvetica Neue", sans-serif;
  --font-mono:
    var(--font-geist-mono, "Geist Mono"), ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
  --sidebar-width: 16rem;
  --sidebar-mobile-width: 18rem;
  --scrollbar-track: transparent;
  --scrollbar-thumb: #0000004d;
  --scrollbar-width: 6px;
  --scrollbar-radius: 6px;
  --chevron-down-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>');
  --chevron-down-icon-50: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0 / 0.5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>');
  --check-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>');
}

:where(:scope) {
  --radius: 0.625rem;
  --font-sans:
    var(--font-geist-sans, "Geist"), ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell,
    "Helvetica Neue", sans-serif;
  --font-mono:
    var(--font-geist-mono, "Geist Mono"), ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
  --sidebar-width: 16rem;
  --sidebar-mobile-width: 18rem;
  --scrollbar-track: transparent;
  --scrollbar-thumb: #0000004d;
  --scrollbar-width: 6px;
  --scrollbar-radius: 6px;
  --chevron-down-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>');
  --chevron-down-icon-50: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0 / 0.5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>');
  --check-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>');
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.269 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.371 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.439 0 0);
  --scrollbar-thumb: #ffffff4d;
  --chevron-down-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.708 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>');
  --chevron-down-icon-50: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.708 0 0 / 0.5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>');
  --check-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.708 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>');
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark;
}

:where(:scope):is(.dark, .dark *) {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.269 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.371 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.439 0 0);
  --scrollbar-thumb: #ffffff4d;
  --chevron-down-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.708 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>');
  --chevron-down-icon-50: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.708 0 0 / 0.5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>');
  --check-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.708 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>');
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark;
}

/* src/css/typography.css */
@layer typography {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    letter-spacing: -0.025em;
    text-wrap: balance;
    scroll-margin: 5rem;
    font-weight: 600;
  }

  :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-block-start: 0;
  }

  mark {
    border-radius: calc(var(--radius) - 4px);
    background: oklch(0.945 0.129 101.54);
    padding-inline-start: 0.25rem;
    padding-inline-end: 0.25rem;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  h1 {
    margin: 2.5rem 0 1.5rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  h2 {
    margin: 2rem 0 1.25rem;
    font-size: 1.5rem;
    line-height: 2rem;
  }

  h3 {
    margin: 1.5rem 0 1rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  h4 {
    margin: 1.25rem 0 0.75rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  h5 {
    margin: 1rem 0 0.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  h6 {
    margin: 1rem 0 0.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  strong,
  b {
    font-weight: 600;
  }

  em,
  i {
    font-style: italic;
  }

  p {
    margin-bottom: 1rem;
  }

  :-webkit-any(code, samp):not(pre > *) {
    border-radius: calc(var(--radius) - 4px);
    background: var(--secondary);
    font-family: var(--font-mono);
    padding: 0.125rem 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  :-moz-any(code, samp):not(pre > *) {
    border-radius: calc(var(--radius) - 4px);
    background: var(--secondary);
    font-family: var(--font-mono);
    padding: 0.125rem 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  :is(code, samp):not(pre > *) {
    border-radius: calc(var(--radius) - 4px);
    background: var(--secondary);
    font-family: var(--font-mono);
    padding: 0.125rem 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  pre {
    overflow-x: auto;
    border-radius: calc(var(--radius) - 2px);
    background: var(--secondary);
    font-family: var(--font-mono);
    white-space: pre;
    margin-bottom: 1rem;
    padding: 1rem;
  }

  pre code {
    user-select: all;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  blockquote {
    border-inline-start: 4px solid var(--border);
    color: var(--muted-foreground);
    margin-block-start: 1rem;
    margin-block-end: 1rem;
    padding-inline-start: 1rem;
    font-style: italic;
  }

  hr {
    margin-block-start: 2rem;
    margin-block-end: 2rem;
  }

  ul,
  ol {
    margin-bottom: 1rem;
    padding-inline-start: 1.5rem;
  }

  :is(ul, ol) li {
    margin-bottom: 0.25rem;
  }

  ul {
    list-style-type: disc;
  }

  ol {
    list-style-type: decimal;
  }

  a[href]:not(:-webkit-any(.button, .item)) {
    display: inline-block;
    color: var(--foreground);
    text-decoration-line: underline;
    text-underline-offset: 4px;
    transition: all 0.1s;
  }

  a[href]:not(:-webkit-any(.button, .item)):active {
    translate: 0 1px;
  }

  a[href]:not(:-moz-any(.button, .item)) {
    display: inline-block;
    color: var(--foreground);
    text-decoration-line: underline;
    text-underline-offset: 4px;
    transition: all 0.1s;
  }

  a[href]:not(:-moz-any(.button, .item)):active {
    translate: 0 1px;
  }

  a[href]:not(:is(.button, .item)) {
    display: inline-block;
    color: var(--foreground);
    text-decoration-line: underline;
    text-underline-offset: 4px;
    transition: all 0.1s;
  }

  a[href]:not(:is(.button, .item)):active {
    translate: 0 1px;
  }

  kbd {
    pointer-events: none;
    display: inline-flex;
    border-radius: calc(var(--radius) - 4px);
    background: var(--muted);
    color: var(--muted-foreground);
    font-family: var(--font-sans);
    user-select: none;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 1.25rem;
    height: 1.25rem;
    padding-inline-start: 0.25rem;
    padding-inline-end: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
  }

  kbd svg:not([class*="size-"]) {
    width: 0.75rem;
    height: 0.75rem;
  }

  s,
  del {
    color: var(--muted-foreground);
  }

  u,
  ins,
  abbr,
  a[href] {
    text-decoration-color: color-mix(in oklab, var(--primary) 20%, transparent);
    text-underline-offset: 4px;
  }

  :is(u, ins, abbr, a[href]):-webkit-any(a[href]):hover {
    color: var(--primary);
    text-decoration-color: var(--primary);
  }

  :is(u, ins, abbr, a[href]):-moz-any(a[href]):hover {
    color: var(--primary);
    text-decoration-color: var(--primary);
  }

  :is(u, ins, abbr, a[href]):is(a[href]):hover {
    color: var(--primary);
    text-decoration-color: var(--primary);
  }
}

/* src/css/badge.css */
@layer components {
  a > .badge {
    transition: translate 0.15s cubic-bezier(0, 0, 0.2, 1);
  }

  a > .badge:active:not(:disabled) {
    translate: 0 0.125rem;
  }

  a.badge {
    text-decoration-line: none !important;
  }

  .badge {
    display: inline-flex;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid;
    border-radius: 9999px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0.125rem 0.5rem;
    transition:
      color 0.15s,
      box-shadow 0.15s;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
  }

  .badge > svg {
    pointer-events: none;
    width: 0.75rem;
    height: 0.75rem;
  }

  .badge:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
  }

  .badge[aria-invalid="true"] {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--destructive) 20%, transparent);
  }

  .badge:is(.dark *)[aria-invalid="true"] {
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--destructive) 40%, transparent);
  }

  .badge:not([variant]) {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-color: #0000;
  }

  .badge:not([variant]):-webkit-any(a):hover {
    background-color: color-mix(in oklab, var(--primary) 90%, transparent);
  }

  .badge:not([variant]):-moz-any(a):hover {
    background-color: color-mix(in oklab, var(--primary) 90%, transparent);
  }

  .badge:not([variant]):is(a):hover {
    background-color: color-mix(in oklab, var(--primary) 90%, transparent);
  }

  .badge[data-variant="primary"] {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-color: #0000;
  }

  .badge[data-variant="primary"]:-webkit-any(a):hover {
    background-color: color-mix(in oklab, var(--primary) 90%, transparent);
  }

  .badge[data-variant="primary"]:-moz-any(a):hover {
    background-color: color-mix(in oklab, var(--primary) 90%, transparent);
  }

  .badge[data-variant="primary"]:is(a):hover {
    background-color: color-mix(in oklab, var(--primary) 90%, transparent);
  }

  .badge[data-variant="secondary"] {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    border-color: #0000;
  }

  .badge[data-variant="secondary"]:-webkit-any(a):hover {
    background-color: color-mix(in oklab, var(--secondary) 90%, transparent);
  }

  .badge[data-variant="secondary"]:-moz-any(a):hover {
    background-color: color-mix(in oklab, var(--secondary) 90%, transparent);
  }

  .badge[data-variant="secondary"]:is(a):hover {
    background-color: color-mix(in oklab, var(--secondary) 90%, transparent);
  }

  .badge[data-variant="destructive"] {
    background-color: var(--destructive);
    color: #fff;
    border-color: #0000;
  }

  .badge[data-variant="destructive"]:-webkit-any(a):hover {
    background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
  }

  .badge[data-variant="destructive"]:-moz-any(a):hover {
    background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
  }

  .badge[data-variant="destructive"]:is(a):hover {
    background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
  }

  .badge[data-variant="destructive"]:focus-visible {
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--destructive) 20%, transparent);
  }

  .badge[data-variant="destructive"]:is(.dark *) {
    background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
  }

  .badge[data-variant="destructive"]:is(.dark *):focus-visible {
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--destructive) 40%, transparent);
  }

  .badge[data-variant="outline"] {
    border-color: var(--border);
    background: unset;
    color: var(--foreground);
  }

  .badge[data-variant="outline"]:-webkit-any(a):hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
  }

  .badge[data-variant="outline"]:-moz-any(a):hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
  }

  .badge[data-variant="outline"]:is(a):hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
  }
}

/* src/css/card.css */
@layer components {
  .card {
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 4px);
    background: var(--card);
    color: var(--card-foreground);
    box-shadow:
      0 1px 3px #0000001a,
      0 1px 2px -1px #0000001a;
  }

  .card:-webkit-any(table) {
    border: 0;
  }

  .card:-moz-any(table) {
    border: 0;
  }

  .card:is(table) {
    border: 0;
  }

  .card:not(:-webkit-any(table, dl)) {
    container-type: inline-size;
    display: flex;
    overflow-wrap: anywhere;
    flex-direction: column;
    flex-shrink: 1;
    gap: 1.5rem;
    inline-size: 100%;
    min-inline-size: 0;
    padding-block-start: 1rem;
    padding-block-end: 0;
  }

  .card:not(:-webkit-any(table, dl)) > :-webkit-any(header, section, footer) {
    min-inline-size: 0;
  }

  .card:not(:-moz-any(table, dl)) > :-moz-any(header, section, footer) {
    min-inline-size: 0;
  }

  .card:not(:is(table, dl)) > :is(header, section, footer) {
    min-inline-size: 0;
  }

  .card:not(:is(table, dl)) > :last-child:not(footer) {
    margin-block-end: 1rem;
  }

  .card:not(:is(table, dl)) > header {
    display: grid;
    grid-template-rows: auto auto;
    grid-auto-rows: min-content;
    align-items: start;
    gap: 0.375rem;
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
  }

  .card:not(:is(table, dl)) > header:has([data-slot="card-action"]) {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .card:not(:is(table, dl)) > header [data-slot="card-action"] {
    grid-row: 1 / span 2;
    grid-column: 2;
    min-inline-size: 0;
    max-inline-size: 50cqi;
    white-space: normal;
    justify-self: end;
    height: auto;
    min-height: 2.25rem;
  }

  .card:not(:is(table, dl)) > header.border-b {
    padding-bottom: 1.5rem;
  }

  .card:not(:-webkit-any(table, dl)) > header :-webkit-any(h2, h3, h4, h5, h6) {
    overflow-wrap: anywhere;
    font-weight: 600;
    line-height: 1;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1rem !important;
  }

  .card:not(:-moz-any(table, dl)) > header :-moz-any(h2, h3, h4, h5, h6) {
    overflow-wrap: anywhere;
    font-weight: 600;
    line-height: 1;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1rem !important;
  }

  .card:not(:is(table, dl)) > header :is(h2, h3, h4, h5, h6) {
    overflow-wrap: anywhere;
    font-weight: 600;
    line-height: 1;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1rem !important;
  }

  .card:not(:-webkit-any(table, dl)) > header :-webkit-any(p, span) {
    color: var(--muted-foreground);
    overflow-wrap: anywhere;
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin: 0 !important;
    padding: 0 !important;
  }

  .card:not(:-moz-any(table, dl)) > header :-moz-any(p, span) {
    color: var(--muted-foreground);
    overflow-wrap: anywhere;
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin: 0 !important;
    padding: 0 !important;
  }

  .card:not(:is(table, dl)) > header :is(p, span) {
    color: var(--muted-foreground);
    overflow-wrap: anywhere;
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin: 0 !important;
    padding: 0 !important;
  }

  .card:not(:is(table, dl)) > section {
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
  }

  .card:not(:is(table, dl)) > section * {
    overflow-wrap: anywhere;
    min-inline-size: 0;
  }

  .card:not(:is(table, dl)) > section > :last-child {
    margin-bottom: 0 !important;
  }

  .card:not(:is(table, dl)) > footer {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    border-radius: 0 0 calc(var(--radius) + 4px) calc(var(--radius) + 4px);
    background-color: var(--secondary);
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
  }

  .card:not(:is(table, dl)) > footer > * {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .card:not(:-webkit-any(table, dl)) > footer > :-webkit-any(button, a.button) {
    white-space: normal;
    height: auto;
    min-height: 2.25rem;
  }

  .card:not(:-moz-any(table, dl)) > footer > :-moz-any(button, a.button) {
    white-space: normal;
    height: auto;
    min-height: 2.25rem;
  }

  .card:not(:is(table, dl)) > footer > :is(button, a.button) {
    white-space: normal;
    height: auto;
    min-height: 2.25rem;
  }

  .card:not(:-moz-any(table, dl)) {
    container-type: inline-size;
    display: flex;
    overflow-wrap: anywhere;
    flex-direction: column;
    flex-shrink: 1;
    gap: 1.5rem;
    inline-size: 100%;
    min-inline-size: 0;
    padding-block-start: 1rem;
    padding-block-end: 0;
  }

  .card:not(:-webkit-any(table, dl)) > :-webkit-any(header, section, footer) {
    min-inline-size: 0;
  }

  .card:not(:-moz-any(table, dl)) > :-moz-any(header, section, footer) {
    min-inline-size: 0;
  }

  .card:not(:is(table, dl)) > :is(header, section, footer) {
    min-inline-size: 0;
  }

  .card:not(:is(table, dl)) > :last-child:not(footer) {
    margin-block-end: 1rem;
  }

  .card:not(:is(table, dl)) > header {
    display: grid;
    grid-template-rows: auto auto;
    grid-auto-rows: min-content;
    align-items: start;
    gap: 0.375rem;
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
  }

  .card:not(:is(table, dl)) > header:has([data-slot="card-action"]) {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .card:not(:is(table, dl)) > header [data-slot="card-action"] {
    grid-row: 1 / span 2;
    grid-column: 2;
    min-inline-size: 0;
    max-inline-size: 50cqi;
    white-space: normal;
    justify-self: end;
    height: auto;
    min-height: 2.25rem;
  }

  .card:not(:is(table, dl)) > header.border-b {
    padding-bottom: 1.5rem;
  }

  .card:not(:-webkit-any(table, dl)) > header :-webkit-any(h2, h3, h4, h5, h6) {
    overflow-wrap: anywhere;
    font-weight: 600;
    line-height: 1;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1rem !important;
  }

  .card:not(:-moz-any(table, dl)) > header :-moz-any(h2, h3, h4, h5, h6) {
    overflow-wrap: anywhere;
    font-weight: 600;
    line-height: 1;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1rem !important;
  }

  .card:not(:is(table, dl)) > header :is(h2, h3, h4, h5, h6) {
    overflow-wrap: anywhere;
    font-weight: 600;
    line-height: 1;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1rem !important;
  }

  .card:not(:-webkit-any(table, dl)) > header :-webkit-any(p, span) {
    color: var(--muted-foreground);
    overflow-wrap: anywhere;
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin: 0 !important;
    padding: 0 !important;
  }

  .card:not(:-moz-any(table, dl)) > header :-moz-any(p, span) {
    color: var(--muted-foreground);
    overflow-wrap: anywhere;
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin: 0 !important;
    padding: 0 !important;
  }

  .card:not(:is(table, dl)) > header :is(p, span) {
    color: var(--muted-foreground);
    overflow-wrap: anywhere;
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin: 0 !important;
    padding: 0 !important;
  }

  .card:not(:is(table, dl)) > section {
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
  }

  .card:not(:is(table, dl)) > section * {
    overflow-wrap: anywhere;
    min-inline-size: 0;
  }

  .card:not(:is(table, dl)) > section > :last-child {
    margin-bottom: 0 !important;
  }

  .card:not(:is(table, dl)) > footer {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    border-radius: 0 0 calc(var(--radius) + 4px) calc(var(--radius) + 4px);
    background-color: var(--secondary);
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
  }

  .card:not(:is(table, dl)) > footer > * {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .card:not(:-webkit-any(table, dl)) > footer > :-webkit-any(button, a.button) {
    white-space: normal;
    height: auto;
    min-height: 2.25rem;
  }

  .card:not(:-moz-any(table, dl)) > footer > :-moz-any(button, a.button) {
    white-space: normal;
    height: auto;
    min-height: 2.25rem;
  }

  .card:not(:is(table, dl)) > footer > :is(button, a.button) {
    white-space: normal;
    height: auto;
    min-height: 2.25rem;
  }

  .card:not(:is(table, dl)) {
    container-type: inline-size;
    display: flex;
    overflow-wrap: anywhere;
    flex-direction: column;
    flex-shrink: 1;
    gap: 1.5rem;
    inline-size: 100%;
    min-inline-size: 0;
    padding-block-start: 1rem;
    padding-block-end: 0;
  }

  .card:not(:-webkit-any(table, dl)) > :-webkit-any(header, section, footer) {
    min-inline-size: 0;
  }

  .card:not(:-moz-any(table, dl)) > :-moz-any(header, section, footer) {
    min-inline-size: 0;
  }

  .card:not(:is(table, dl)) > :is(header, section, footer) {
    min-inline-size: 0;
  }

  .card:not(:is(table, dl)) > :last-child:not(footer) {
    margin-block-end: 1rem;
  }

  .card:not(:is(table, dl)) > header {
    display: grid;
    grid-template-rows: auto auto;
    grid-auto-rows: min-content;
    align-items: start;
    gap: 0.375rem;
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
  }

  .card:not(:is(table, dl)) > header:has([data-slot="card-action"]) {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .card:not(:is(table, dl)) > header [data-slot="card-action"] {
    grid-row: 1 / span 2;
    grid-column: 2;
    min-inline-size: 0;
    max-inline-size: 50cqi;
    white-space: normal;
    justify-self: end;
    height: auto;
    min-height: 2.25rem;
  }

  .card:not(:is(table, dl)) > header.border-b {
    padding-bottom: 1.5rem;
  }

  .card:not(:-webkit-any(table, dl)) > header :-webkit-any(h2, h3, h4, h5, h6) {
    overflow-wrap: anywhere;
    font-weight: 600;
    line-height: 1;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1rem !important;
  }

  .card:not(:-moz-any(table, dl)) > header :-moz-any(h2, h3, h4, h5, h6) {
    overflow-wrap: anywhere;
    font-weight: 600;
    line-height: 1;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1rem !important;
  }

  .card:not(:is(table, dl)) > header :is(h2, h3, h4, h5, h6) {
    overflow-wrap: anywhere;
    font-weight: 600;
    line-height: 1;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1rem !important;
  }

  .card:not(:-webkit-any(table, dl)) > header :-webkit-any(p, span) {
    color: var(--muted-foreground);
    overflow-wrap: anywhere;
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin: 0 !important;
    padding: 0 !important;
  }

  .card:not(:-moz-any(table, dl)) > header :-moz-any(p, span) {
    color: var(--muted-foreground);
    overflow-wrap: anywhere;
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin: 0 !important;
    padding: 0 !important;
  }

  .card:not(:is(table, dl)) > header :is(p, span) {
    color: var(--muted-foreground);
    overflow-wrap: anywhere;
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin: 0 !important;
    padding: 0 !important;
  }

  .card:not(:is(table, dl)) > section {
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
  }

  .card:not(:is(table, dl)) > section * {
    overflow-wrap: anywhere;
    min-inline-size: 0;
  }

  .card:not(:is(table, dl)) > section > :last-child {
    margin-bottom: 0 !important;
  }

  .card:not(:is(table, dl)) > footer {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    border-radius: 0 0 calc(var(--radius) + 4px) calc(var(--radius) + 4px);
    background-color: var(--secondary);
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
  }

  .card:not(:is(table, dl)) > footer > * {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .card:not(:-webkit-any(table, dl)) > footer > :-webkit-any(button, a.button) {
    white-space: normal;
    height: auto;
    min-height: 2.25rem;
  }

  .card:not(:-moz-any(table, dl)) > footer > :-moz-any(button, a.button) {
    white-space: normal;
    height: auto;
    min-height: 2.25rem;
  }

  .card:not(:is(table, dl)) > footer > :is(button, a.button) {
    white-space: normal;
    height: auto;
    min-height: 2.25rem;
  }

  @container (width < 24rem) {
    .card:not(:is(table, dl)) > header:has([data-slot="card-action"]) {
      grid-template-columns: minmax(0, 1fr);
    }

    .card:not(:is(table, dl))
      > header:has([data-slot="card-action"])
      [data-slot="card-action"] {
      grid-row: auto;
      grid-column: 1;
      inline-size: 100%;
      max-inline-size: 100%;
      justify-self: stretch;
    }
  }

  @container (width < 12rem) {
    .card:not(:is(table, dl)) > :is(header, section) {
      padding-inline: 0.5rem;
    }

    .card:not(:is(table, dl)) > footer {
      padding: 0.5rem;
    }
  }
}

/* src/css/dialog.css */
@layer components {
  dialog {
    display: flex;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-wrap: break-word;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 4px);
    background: var(--background);
    color: var(--foreground);
    opacity: 0;
    transition:
      opacity 0.18s ease-out,
      transform 0.18s ease-out,
      display 0.18s allow-discrete,
      overlay 0.18s allow-discrete;
    flex-direction: column;
    max-block-size: calc(100dvh - 2rem);
    inline-size: min(32rem, 100% - 2rem);
    max-inline-size: none;
    margin: auto;
    transform: translateY(-0.25rem) scale(0.98);
    box-shadow:
      0 20px 25px -5px #0000001a,
      0 8px 10px -6px #0000001a;
  }

  dialog:not([open]) {
    display: none;
  }

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

  @starting-style {
    dialog[open] {
      opacity: 0;
      transform: translateY(-0.25rem) scale(0.98);
    }
  }

  dialog:not(:modal) {
    position: fixed;
    z-index: 10;
    inset: 0;
  }

  dialog::backdrop {
    transition:
      background 0.18s ease-out,
      display 0.18s allow-discrete,
      overlay 0.18s allow-discrete;
    background: none;
  }

  dialog[open]::backdrop {
    background: #00000080;
  }

  @starting-style {
    dialog[open]::backdrop {
      background: none;
    }
  }

  dialog > :-webkit-any(header, section, footer) {
    padding: 1.5rem;
  }

  dialog > :-moz-any(header, section, footer) {
    padding: 1.5rem;
  }

  dialog > :is(header, section, footer) {
    padding: 1.5rem;
  }

  dialog > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.375rem 1rem;
  }

  dialog > header > :-webkit-any(h1, h2, h3, h4, h5, h6) {
    grid-column: 1;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5rem;
  }

  dialog > header > :-moz-any(h1, h2, h3, h4, h5, h6) {
    grid-column: 1;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5rem;
  }

  dialog > header > :is(h1, h2, h3, h4, h5, h6) {
    grid-column: 1;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5rem;
  }

  dialog > header > p {
    grid-column: 1;
    color: var(--muted-foreground);
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  dialog > header > form[method="dialog"] {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: -0.5rem -0.5rem 0 0;
  }

  dialog > section {
    overflow: auto;
    flex-shrink: 1;
    min-block-size: 0;
    padding-block-start: 0;
    padding-block-end: 0.75rem;
  }

  dialog > section > :last-child {
    margin-block-end: 0;
  }

  dialog > footer {
    display: flex;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
  }

  dialog > footer > form {
    margin: 0;
  }

  @media (max-width: calc(40rem - 0.001px)) {
    dialog > footer > :-webkit-any(button, form) {
      flex: auto;
    }

    dialog > footer > :-moz-any(button, form) {
      flex: auto;
    }

    dialog > footer > :is(button, form) {
      flex: auto;
    }

    dialog > footer > form > button {
      inline-size: 100%;
    }
  }

  @media (max-height: calc(25rem - 0.001px)) {
    dialog > section {
      overflow: visible;
      flex-shrink: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    dialog {
      transition: none;
    }

    dialog::backdrop {
      transition: none;
    }
  }
}

/* src/css/input.css */
@layer components {
  form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  input:not(
    :-webkit-any(
      [type="checkbox"],
      [type="radio"],
      [type="range"],
      [type="hidden"],
      [type="file"],
      [type="color"],
      [role]
    )
  ),
  input[type="file"],
  textarea,
  select {
    border: 1px solid var(--input);
    border-radius: calc(var(--radius) - 2px);
    outline: none;
    background: none;
    width: 100%;
    transition:
      color 0.15s,
      box-shadow 0.15s;
    box-shadow: 0 1px 2px #0000000d;
  }

  :is(
    input:not(
      :is(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"],
    textarea,
    select
  )::placeholder {
    color: var(--muted-foreground);
  }

  :is(
    input:not(
      :is(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"],
    textarea,
    select
  ):disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  :is(
    input:not(
      :is(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"],
    textarea,
    select
  ):focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
  }

  :is(
    input:not(
      :is(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"],
    textarea,
    select
  )[aria-invalid="true"] {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--destructive) 20%, transparent);
  }

  :is(
    input:not(
      :is(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"],
    textarea,
    select
  ):is(.dark *) {
    background: color-mix(in oklab, var(--input) 30%, transparent);
  }

  :is(
      input:not(
        :is(
          [type="checkbox"],
          [type="radio"],
          [type="range"],
          [type="hidden"],
          [type="file"],
          [type="color"],
          [role]
        )
      ),
      input[type="file"],
      textarea,
      select
    ):is(.dark *)[aria-invalid="true"] {
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--destructive) 40%, transparent);
  }

  input:not(
    :-moz-any(
      [type="checkbox"],
      [type="radio"],
      [type="range"],
      [type="hidden"],
      [type="file"],
      [type="color"],
      [role]
    )
  ),
  input[type="file"],
  textarea,
  select {
    border: 1px solid var(--input);
    border-radius: calc(var(--radius) - 2px);
    outline: none;
    background: none;
    width: 100%;
    transition:
      color 0.15s,
      box-shadow 0.15s;
    box-shadow: 0 1px 2px #0000000d;
  }

  :is(
    input:not(
      :is(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"],
    textarea,
    select
  )::placeholder {
    color: var(--muted-foreground);
  }

  :is(
    input:not(
      :is(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"],
    textarea,
    select
  ):disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  :is(
    input:not(
      :is(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"],
    textarea,
    select
  ):focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
  }

  :is(
    input:not(
      :is(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"],
    textarea,
    select
  )[aria-invalid="true"] {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--destructive) 20%, transparent);
  }

  :is(
    input:not(
      :is(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"],
    textarea,
    select
  ):is(.dark *) {
    background: color-mix(in oklab, var(--input) 30%, transparent);
  }

  :is(
      input:not(
        :is(
          [type="checkbox"],
          [type="radio"],
          [type="range"],
          [type="hidden"],
          [type="file"],
          [type="color"],
          [role]
        )
      ),
      input[type="file"],
      textarea,
      select
    ):is(.dark *)[aria-invalid="true"] {
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--destructive) 40%, transparent);
  }

  input:not(
    :is(
      [type="checkbox"],
      [type="radio"],
      [type="range"],
      [type="hidden"],
      [type="file"],
      [type="color"],
      [role]
    )
  ),
  input[type="file"],
  textarea,
  select {
    border: 1px solid var(--input);
    border-radius: calc(var(--radius) - 2px);
    outline: none;
    background: none;
    width: 100%;
    transition:
      color 0.15s,
      box-shadow 0.15s;
    box-shadow: 0 1px 2px #0000000d;
  }

  :is(
    input:not(
      :is(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"],
    textarea,
    select
  )::placeholder {
    color: var(--muted-foreground);
  }

  :is(
    input:not(
      :is(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"],
    textarea,
    select
  ):disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  :is(
    input:not(
      :is(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"],
    textarea,
    select
  ):focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
  }

  :is(
    input:not(
      :is(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"],
    textarea,
    select
  )[aria-invalid="true"] {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--destructive) 20%, transparent);
  }

  :is(
    input:not(
      :is(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"],
    textarea,
    select
  ):is(.dark *) {
    background: color-mix(in oklab, var(--input) 30%, transparent);
  }

  :is(
      input:not(
        :is(
          [type="checkbox"],
          [type="radio"],
          [type="range"],
          [type="hidden"],
          [type="file"],
          [type="color"],
          [role]
        )
      ),
      input[type="file"],
      textarea,
      select
    ):is(.dark *)[aria-invalid="true"] {
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--destructive) 40%, transparent);
  }

  input:not(
    :-webkit-any(
      [type="checkbox"],
      [type="radio"],
      [type="range"],
      [type="hidden"],
      [type="file"],
      [type="color"],
      [role]
    )
  ),
  input[type="file"] {
    display: flex;
    appearance: none;
    min-width: 0;
    height: 2.25rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  :is(
    input:not(
      :is(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"]
  )::selection {
    background: var(--primary);
    color: var(--primary-foreground);
  }

  :is(
    input:not(
      :-webkit-any(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"]
  )::-webkit-file-upload-button {
    display: inline-flex;
    color: var(--foreground);
    background: none;
    border: 0;
    height: 1.75rem;
    font-size: 0.875rem;
    font-weight: 500;
  }

  :is(
    input:not(
      :is(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"]
  )::file-selector-button {
    display: inline-flex;
    color: var(--foreground);
    background: none;
    border: 0;
    height: 1.75rem;
    font-size: 0.875rem;
    font-weight: 500;
  }

  :is(
    input:not(
      :is(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"]
  ):disabled {
    pointer-events: none;
  }

  @media (min-width: 48rem) {
    :is(
      input:not(
        :is(
          [type="checkbox"],
          [type="radio"],
          [type="range"],
          [type="hidden"],
          [type="file"],
          [type="color"],
          [role]
        )
      ),
      input[type="file"]
    ) {
      font-size: 0.875rem;
      line-height: 1.25rem;
    }
  }

  input:not(
    :-moz-any(
      [type="checkbox"],
      [type="radio"],
      [type="range"],
      [type="hidden"],
      [type="file"],
      [type="color"],
      [role]
    )
  ),
  input[type="file"] {
    display: flex;
    appearance: none;
    min-width: 0;
    height: 2.25rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  :is(
    input:not(
      :is(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"]
  )::selection {
    background: var(--primary);
    color: var(--primary-foreground);
  }

  :is(
    input:not(
      :-webkit-any(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"]
  )::-webkit-file-upload-button {
    display: inline-flex;
    color: var(--foreground);
    background: none;
    border: 0;
    height: 1.75rem;
    font-size: 0.875rem;
    font-weight: 500;
  }

  :is(
    input:not(
      :is(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"]
  )::file-selector-button {
    display: inline-flex;
    color: var(--foreground);
    background: none;
    border: 0;
    height: 1.75rem;
    font-size: 0.875rem;
    font-weight: 500;
  }

  :is(
    input:not(
      :is(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"]
  ):disabled {
    pointer-events: none;
  }

  @media (min-width: 48rem) {
    :is(
      input:not(
        :is(
          [type="checkbox"],
          [type="radio"],
          [type="range"],
          [type="hidden"],
          [type="file"],
          [type="color"],
          [role]
        )
      ),
      input[type="file"]
    ) {
      font-size: 0.875rem;
      line-height: 1.25rem;
    }
  }

  input:not(
    :is(
      [type="checkbox"],
      [type="radio"],
      [type="range"],
      [type="hidden"],
      [type="file"],
      [type="color"],
      [role]
    )
  ),
  input[type="file"] {
    display: flex;
    appearance: none;
    min-width: 0;
    height: 2.25rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  :is(
    input:not(
      :is(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"]
  )::selection {
    background: var(--primary);
    color: var(--primary-foreground);
  }

  :is(
    input:not(
      :-webkit-any(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"]
  )::-webkit-file-upload-button {
    display: inline-flex;
    color: var(--foreground);
    background: none;
    border: 0;
    height: 1.75rem;
    font-size: 0.875rem;
    font-weight: 500;
  }

  :is(
    input:not(
      :is(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"]
  )::file-selector-button {
    display: inline-flex;
    color: var(--foreground);
    background: none;
    border: 0;
    height: 1.75rem;
    font-size: 0.875rem;
    font-weight: 500;
  }

  :is(
    input:not(
      :is(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [role]
      )
    ),
    input[type="file"]
  ):disabled {
    pointer-events: none;
  }

  @media (min-width: 48rem) {
    :is(
      input:not(
        :is(
          [type="checkbox"],
          [type="radio"],
          [type="range"],
          [type="hidden"],
          [type="file"],
          [type="color"],
          [role]
        )
      ),
      input[type="file"]
    ) {
      font-size: 0.875rem;
      line-height: 1.25rem;
    }
  }

  input:not(
    :-webkit-any(
      [type="checkbox"],
      [type="radio"],
      [type="range"],
      [type="hidden"],
      [type="file"],
      [type="color"],
      [role]
    )
  ) {
    padding: 0.25rem 0.75rem;
  }

  input:not(
    :-moz-any(
      [type="checkbox"],
      [type="radio"],
      [type="range"],
      [type="hidden"],
      [type="file"],
      [type="color"],
      [role]
    )
  ) {
    padding: 0.25rem 0.75rem;
  }

  input:not(
    :is(
      [type="checkbox"],
      [type="radio"],
      [type="range"],
      [type="hidden"],
      [type="file"],
      [type="color"],
      [role]
    )
  ) {
    padding: 0.25rem 0.75rem;
  }

  input[type="file"]:active:not(:disabled) {
    translate: 0 0.125rem;
  }

  input[type="file"]::-webkit-file-upload-button {
    background: var(--secondary);
    height: 100%;
    margin-inline-end: 1rem;
    padding-inline-start: 0.75rem;
    padding-inline-end: 0.75rem;
  }

  textarea {
    display: flex;
    field-sizing: content;
    min-height: 4rem;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  @media (min-width: 48rem) {
    textarea {
      font-size: 0.875rem;
      line-height: 1.25rem;
    }
  }

  select {
    display: flex;
    appearance: none;
    white-space: nowrap;
    background-image: var(--chevron-down-icon-50);
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1rem;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  select:is(.dark *):hover {
    background-color: color-mix(in oklab, var(--input) 50%, transparent);
  }

  select option {
    background: var(--popover);
    color: var(--popover-foreground);
  }

  select optgroup {
    background: var(--popover);
    color: var(--popover-foreground);
  }

  label {
    display: flex;
    user-select: none;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
  }

  label:has(+ :-webkit-any(input, textarea, select)) {
    padding-bottom: 0.5rem;
  }

  label:has(+ :-moz-any(input, textarea, select)) {
    padding-bottom: 0.5rem;
  }

  label:has(+ :is(input, textarea, select)) {
    padding-bottom: 0.5rem;
  }

  label:has(> :disabled) {
    pointer-events: none;
    opacity: 0.5;
  }

  label:has(+ :disabled) {
    pointer-events: none;
    opacity: 0.5;
  }

  input[type="checkbox"]:not([role="switch"]),
  input[type="radio"] {
    appearance: none;
    border: 1px solid var(--input);
    outline: none;
    background: none;
    flex-shrink: 0;
    transition:
      color 0.15s,
      box-shadow 0.15s;
    box-shadow: 0 1px 2px #0000000d;
    width: 1rem !important;
    height: 1rem !important;
  }

  :is(
    input[type="checkbox"]:not([role="switch"]),
    input[type="radio"]
  ):focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
  }

  :is(
    input[type="checkbox"]:not([role="switch"]),
    input[type="radio"]
  ):disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  :is(
    input[type="checkbox"]:not([role="switch"]),
    input[type="radio"]
  )[aria-invalid="true"] {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--destructive) 20%, transparent);
  }

  :is(input[type="checkbox"]:not([role="switch"]), input[type="radio"]):is(
    .dark *
  ) {
    background: color-mix(in oklab, var(--input) 30%, transparent);
  }

  :is(input[type="checkbox"]:not([role="switch"]), input[type="radio"]):is(
      .dark *
    )[aria-invalid="true"] {
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--destructive) 40%, transparent);
  }

  input[type="checkbox"]:not([role="switch"]) {
    border-radius: 4px;
  }

  input[type="checkbox"]:not([role="switch"]):checked {
    border-color: var(--primary);
    background: var(--primary);
  }

  input[type="checkbox"]:not([role="switch"]) + label {
    display: inline-flex;
  }

  input[type="checkbox"]:not([role="switch"]):checked:after {
    content: "";
    display: block;
    background: var(--primary-foreground);
    mask-image: var(--check-icon);
    mask-position: center;
    mask-size: 0.875rem;
    mask-repeat: no-repeat;
    width: 0.875rem;
    height: 0.875rem;
  }

  fieldset {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1rem 1.25rem;
  }

  fieldset legend {
    color: var(--muted-foreground);
    user-select: none;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
  }

  fieldset ul:has(> li) {
    display: contents;
    padding-inline-start: 0 !important;
  }

  fieldset ul:has(> li) li {
    list-style: none;
  }

  fieldset > :last-child {
    margin-bottom: 0 !important;
  }

  fieldset > p:has(input) {
    margin-bottom: 0 !important;
  }

  div:has(> :-webkit-any(input[type="checkbox"], input[type="radio"]) + label) {
    display: flex;
    user-select: none;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
  }

  div:has(> :-moz-any(input[type="checkbox"], input[type="radio"]) + label) {
    display: flex;
    user-select: none;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
  }

  div:has(> :is(input[type="checkbox"], input[type="radio"]) + label) {
    display: flex;
    user-select: none;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
  }

  input[type="radio"] {
    position: relative;
    aspect-ratio: 1;
    color: var(--primary);
    border-radius: 50%;
  }

  input[type="radio"]:checked:before {
    content: "";
    position: absolute;
    background: var(--primary);
    border-radius: 50%;
    width: 0.5rem;
    height: 0.5rem;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }

  input {
    position: relative;
  }

  input::-webkit-calendar-picker-indicator {
    position: absolute;
    color: var(--primary);
    fill: var(--primary);
    background-image: var(
        --buncss-light,
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>')
      )
      var(
        --buncss-dark,
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>')
      );
    right: 0.5rem;
  }

  input:-webkit-any(
      [type="date"],
      [type="datetime-local"]
    )::-webkit-datetime-edit-text {
    color: var(--muted-foreground);
  }

  input:-moz-any(
      [type="date"],
      [type="datetime-local"]
    )::-webkit-datetime-edit-text {
    color: var(--muted-foreground);
  }

  input:is([type="date"], [type="datetime-local"])::-webkit-datetime-edit-text {
    color: var(--muted-foreground);
  }

  input[type="checkbox"][role="switch"] {
    display: inline-flex;
    appearance: none;
    outline: none;
    background: var(--input);
    border: 1px solid #0000;
    border-radius: 9999px;
    flex-shrink: 0;
    align-items: center;
    height: 1.15rem;
    transition: all 0.15s;
    box-shadow: 0 1px 2px #0000000d;
    width: 2rem !important;
  }

  input[type="checkbox"][role="switch"]:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
  }

  input[type="checkbox"][role="switch"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  input[type="checkbox"][role="switch"]:checked {
    background: var(--primary);
  }

  input[type="checkbox"][role="switch"]:is(.dark *) {
    background: color-mix(in oklab, var(--input) 80%, transparent);
  }

  input[type="checkbox"][role="switch"]:is(.dark *):checked {
    background: var(--primary);
  }

  input[type="checkbox"][role="switch"]:before {
    content: "";
    pointer-events: none;
    display: block;
    background: var(--background);
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    transition: all 0.15s;
  }

  input[type="checkbox"][role="switch"]:is(.dark *):before {
    background: var(--foreground);
  }

  input[type="checkbox"][role="switch"]:checked:before {
    margin-inline-start: 0.875rem;
  }

  input[type="checkbox"][role="switch"]:is(.dark *):checked:before {
    background: var(--primary-foreground);
  }

  input[type="color" i] {
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 30px !important;
    height: 30px !important;
  }

  input[type="color" i]:active {
    translate: 0 0.125rem;
  }

  input[type="color" i]::-webkit-color-swatch-wrapper {
    border-radius: 99px;
  }

  input[type="color" i]::-webkit-color-swatch {
    border-radius: 99px;
  }

  input[type="color" i]::-moz-color-swatch {
    border-radius: 99px;
  }

  input[type="color" i]::-webkit-color-swatch-wrapper {
    padding: 0.25rem;
  }

  input[type="range"] {
    accent-color: var(--primary);
    width: 100%;
  }

  input[type="range"]:hover::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 50%, transparent);
  }

  input[type="range"]:hover::-moz-range-thumb {
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 50%, transparent);
  }

  input[type="range"]:hover::-ms-thumb {
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 50%, transparent);
  }

  input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 50%, transparent);
  }

  input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 50%, transparent);
  }

  input[type="range"]:focus-visible::-ms-thumb {
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 50%, transparent);
  }

  input[type="range"]::-webkit-slider-thumb {
    display: block;
    appearance: none;
    border: 1px solid var(--primary);
    background: var(--background);
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    box-shadow:
      0 1px 3px #0000001a,
      0 1px 2px -1px #0000001a;
  }

  input[type="range"]::-moz-range-thumb {
    display: block;
    appearance: none;
    border: 1px solid var(--primary);
    background: var(--background);
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    box-shadow:
      0 1px 3px #0000001a,
      0 1px 2px -1px #0000001a;
  }

  input[type="range"]::-ms-thumb {
    display: block;
    appearance: none;
    border: 1px solid var(--primary);
    background: var(--background);
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    box-shadow:
      0 1px 3px #0000001a,
      0 1px 2px -1px #0000001a;
  }
}

/* src/css/table.css */
@layer components {
  table {
    caption-side: bottom;
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  table.card {
    outline: 1px solid var(--border);
    border-color: #0000;
  }

  table thead tr {
    border-bottom: 1px solid var(--border);
  }

  table tbody tr:last-child {
    border-width: 0;
  }

  table tfoot {
    border-top: 1px solid var(--border);
    background-color: color-mix(in oklab, var(--muted) 50%, transparent);
    font-weight: 500;
  }

  table tfoot > tr:last-child {
    border-bottom-width: 0;
  }

  table tr {
    border-bottom: 1px solid var(--border);
    transition:
      color 0.15s,
      background-color 0.15s,
      border-color 0.15s;
  }

  table tr:hover {
    background-color: color-mix(in oklab, var(--muted) 50%, transparent);
  }

  table th {
    color: var(--foreground);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    height: 2.5rem;
    padding-inline-start: 0.5rem;
    padding-inline-end: 0.5rem;
    font-weight: 500;
  }

  table th:has([role="checkbox"]) {
    padding-right: 0;
  }

  table th > [role="checkbox"] {
    translate: 0 2px;
  }

  table td {
    vertical-align: middle;
    white-space: nowrap;
    padding: 0.5rem;
  }

  table td:has([role="checkbox"]) {
    padding-right: 0;
  }

  table td > [role="checkbox"] {
    translate: 0 2px;
  }

  table caption {
    color: var(--muted-foreground);
    margin-top: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

/* src/css/image.css */
@layer components {
  img[src] {
    border-radius: calc(var(--radius) + 4px);
  }

  figure {
    width: -moz-fit-content;
    width: fit-content;
  }

  figure .caption {
    color: var(--muted-foreground);
    text-align: center;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  figure figcaption {
    color: var(--muted-foreground);
    text-align: center;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

/* src/css/description-list.css */
@layer components {
  dl > * > dt {
    padding-inline-start: 0.5rem;
    padding-inline-end: 0.5rem;
    font-weight: 600;
    line-height: 1.5;
  }

  dl > * > dt:first-child {
    padding-top: 0.5rem;
  }

  dl > * > dd {
    border-bottom: 1px solid var(--border);
    padding-inline-start: 0.5rem;
    padding-inline-end: 0.5rem;
    text-wrap: balance;
    padding-bottom: 0.5rem;
  }

  dl > *:last-of-type > dd {
    border-style: none;
  }

  dl > dt {
    padding-inline-start: 0.5rem;
    padding-inline-end: 0.5rem;
    font-weight: 600;
    line-height: 1.5;
  }

  dl > dt:first-child {
    padding-top: 0.5rem;
  }

  dl > dt:has(+ dd) {
    margin-bottom: 0.25rem;
  }

  dl > dd {
    text-wrap: balance;
    padding-inline-start: 0.5rem;
    padding-inline-end: 0.5rem;
  }

  dl > dd:has(+ dd) {
    margin-bottom: 0.25rem;
  }

  dl > dd + dt {
    padding-top: 0.5rem;
  }

  dl > dd:not(:has(+ dd)) {
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
  }

  dl > dd:not(:has(+ dd)):not(:has(+ dt)) {
    border-style: none;
  }
}

/* src/css/spinner.css */
@layer components {
  [aria-busy="true"] {
    position: relative;
  }

  [aria-busy="true"]:not(:empty):after {
    position: absolute;
    z-index: 1;
    margin: auto;
    inset: 0;
  }

  [aria-busy="true"][data-variant="overlay"] > * {
    opacity: 0.3;
    pointer-events: none;
  }

  [aria-busy="true"]:after {
    content: "";
    display: block;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>');
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    animation: sensible-spinner-spin 1s linear infinite;
    background-color: currentColor;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
  }

  :-webkit-any(button, a.button)[aria-busy="true"]:not(:empty):after {
    position: static;
    order: -1;
    width: 1rem;
    height: 1rem;
    margin: 0;
    inset: auto;
  }

  :-moz-any(button, a.button)[aria-busy="true"]:not(:empty):after {
    position: static;
    order: -1;
    width: 1rem;
    height: 1rem;
    margin: 0;
    inset: auto;
  }

  :is(button, a.button)[aria-busy="true"]:not(:empty):after {
    position: static;
    order: -1;
    width: 1rem;
    height: 1rem;
    margin: 0;
    inset: auto;
  }

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

  @media (prefers-reduced-motion: reduce) {
    [aria-busy="true"]:after {
      animation: none;
    }
  }
}

/* src/css/item.css */
@layer components {
  .item {
    display: flex;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 2px);
    outline: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    transition-duration: 0.1s;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .item:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
  }

  .item:-webkit-any(a[href]) {
    transition: translate 0.15s cubic-bezier(0, 0, 0.2, 1);
    text-decoration-line: none !important;
  }

  .item:-webkit-any(a[href]):hover {
    background-color: color-mix(in oklab, var(--accent) 50%, transparent);
  }

  .item:-webkit-any(a[href]):active:not(:disabled) {
    translate: 0 0.125rem;
  }

  .item:-moz-any(a[href]) {
    transition: translate 0.15s cubic-bezier(0, 0, 0.2, 1);
    text-decoration-line: none !important;
  }

  .item:-moz-any(a[href]):hover {
    background-color: color-mix(in oklab, var(--accent) 50%, transparent);
  }

  .item:-moz-any(a[href]):active:not(:disabled) {
    translate: 0 0.125rem;
  }

  .item:is(a[href]) {
    transition: translate 0.15s cubic-bezier(0, 0, 0.2, 1);
    text-decoration-line: none !important;
  }

  .item:is(a[href]):hover {
    background-color: color-mix(in oklab, var(--accent) 50%, transparent);
  }

  .item:is(a[href]):active:not(:disabled) {
    translate: 0 0.125rem;
  }

  .item:has(> svg) {
    flex-wrap: nowrap;
  }

  .item > svg {
    color: var(--muted-foreground);
    flex-shrink: 0;
  }

  .item > :-webkit-any(div, section, article) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
  }

  .item
    > :-webkit-any(div, section, article)
    > :-webkit-any(h1, h2, h3, h4, h5, h6) {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
  }

  .item > :-moz-any(div, section, article) > :-moz-any(h1, h2, h3, h4, h5, h6) {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
  }

  .item > :is(div, section, article) > :is(h1, h2, h3, h4, h5, h6) {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
  }

  .item > :is(div, section, article) > p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    color: var(--muted-foreground);
    text-wrap: balance;
    -webkit-box-orient: vertical;
    margin: 0 !important;
  }

  .item > :-moz-any(div, section, article) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
  }

  .item
    > :-webkit-any(div, section, article)
    > :-webkit-any(h1, h2, h3, h4, h5, h6) {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
  }

  .item > :-moz-any(div, section, article) > :-moz-any(h1, h2, h3, h4, h5, h6) {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
  }

  .item > :is(div, section, article) > :is(h1, h2, h3, h4, h5, h6) {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
  }

  .item > :is(div, section, article) > p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    color: var(--muted-foreground);
    text-wrap: balance;
    -webkit-box-orient: vertical;
    margin: 0 !important;
  }

  .item > :is(div, section, article) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
  }

  .item
    > :-webkit-any(div, section, article)
    > :-webkit-any(h1, h2, h3, h4, h5, h6) {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
  }

  .item > :-moz-any(div, section, article) > :-moz-any(h1, h2, h3, h4, h5, h6) {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
  }

  .item > :is(div, section, article) > :is(h1, h2, h3, h4, h5, h6) {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
  }

  .item > :is(div, section, article) > p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    color: var(--muted-foreground);
    text-wrap: balance;
    -webkit-box-orient: vertical;
    margin: 0 !important;
  }

  .item > :not(svg):has(h1, h2, h3, h4, h5, h6, p) {
    flex-grow: 1;
  }
}

/* src/css/accordion.css */
@layer components {
  :root {
    interpolate-size: allow-keywords;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --icon-lucide-chevron: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
  }

  :where(:scope) {
    interpolate-size: allow-keywords;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --icon-lucide-chevron: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
  }

  summary {
    list-style: none;
  }

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

  details {
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 2px);
    outline: none;
    transition: translate 0.15s var(--ease-out);
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  details:hover {
    cursor: pointer;
    background-color: color-mix(in oklab, var(--accent) 50%, transparent);
  }

  details:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
  }

  details:active:not(:disabled) {
    translate: 0 0.125rem;
  }

  details > summary {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 1rem;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }

  details > summary > * {
    margin: 0 !important;
    padding: 0 !important;
  }

  details > summary > :-webkit-any(h2, h3, h4, h5, h6, p, span) {
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }

  details > summary > :-moz-any(h2, h3, h4, h5, h6, p, span) {
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }

  details > summary > :is(h2, h3, h4, h5, h6, p, span) {
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }

  details > summary:after {
    content: "";
    mask-size: contain;
    mask-image: var(--icon-lucide-chevron);
    mask-repeat: no-repeat;
    background-color: currentColor;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    transition: transform 0.2s;
  }

  details:has(+ details) {
    border-bottom-width: 0;
    border-radius: 0;
  }

  details:not(:has(+ details)) {
    border-radius: 0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px);
  }

  details:has(+ details):first-of-type {
    border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;
  }

  details > :not(summary) {
    padding: 0 1rem 1rem !important;
  }

  details :-webkit-any(h2, h3, h4, h5, h6, p) {
    padding: 0;
    margin-bottom: 0 !important;
  }

  details :-moz-any(h2, h3, h4, h5, h6, p) {
    padding: 0;
    margin-bottom: 0 !important;
  }

  details :is(h2, h3, h4, h5, h6, p) {
    padding: 0;
    margin-bottom: 0 !important;
  }

  details::details-content {
    transition-behavior: allow-discrete;
    transition:
      opacity 0.2s,
      height 0.2s;
  }

  details:not([open])::details-content {
    overflow: hidden;
    opacity: 0;
    content-visibility: visible;
    height: 0;
  }

  details[open] summary:after {
    transform: rotate(-180deg);
  }

  details[open]::details-content {
    content-visibility: visible;
    opacity: 1;
    height: calc-size(auto, size);
  }

  @media (prefers-reduced-motion: reduce) {
    details,
    details > summary:after {
      transition-duration: 0s;
    }

    details::details-content {
      transition-duration: 0s;
    }
  }
}

/* src/css/button.css */
@layer button {
  :-webkit-any(
    button:not([role]),
    input:-webkit-any([type="submit"], [type="reset"], [type="button"]),
    a.button
  ):not(form[method="dialog"]:not(dialog form) > *) {
    display: inline-flex;
    border-radius: calc(var(--radius) - 2px);
    outline: none;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    transition: all 0.15s ease-out;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):is(
      .card > header > [data-slot="card-action"],
      .card > footer > *
    ) {
    white-space: normal;
    height: auto;
    min-height: 2.25rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):is(
      dialog > footer button:not([role])
    ) {
    height: auto;
    min-height: 2.25rem;
    overflow-wrap: anywhere;
    white-space: normal;
    max-inline-size: 100%;
  }

  @container (width < 12rem) {
    :is(
        button:not([role]),
        input:is([type="submit"], [type="reset"], [type="button"]),
        a.button
      ):not(form[method="dialog"]:not(dialog form) > *):is(.card > footer > *) {
      padding-inline: 0.5rem;
    }
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):active:not(:disabled) {
    translate: 0 0.125rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[aria-busy="true"] {
    cursor: wait;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[aria-invalid="true"] {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--destructive) 20%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):is(
      .dark *
    )[aria-invalid="true"] {
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--destructive) 40%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)
    svg {
    pointer-events: none;
    flex-shrink: 0;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)
    svg:not([class*="size-"]) {
    width: 1rem;
    height: 1rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):not([data-size]) {
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0.5rem 1rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):not([data-size]):has(
      > svg
    ) {
    padding-inline-start: 0.75rem;
    padding-inline-end: 0.75rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-size="sm"] {
    gap: 0.375rem;
    height: 2rem;
    padding-inline-start: 0.75rem;
    padding-inline-end: 0.75rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-size="sm"]:has(
      > svg
    ) {
    padding-inline-start: 0.625rem;
    padding-inline-end: 0.625rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-size="lg"] {
    gap: 0.5rem;
    height: 2.5rem;
    padding-inline-start: 1.5rem;
    padding-inline-end: 1.5rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-size="lg"]:has(
      > svg
    ) {
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-size="icon"] {
    width: 2.25rem;
    height: 2.25rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):not([data-variant]) {
    background: var(--primary);
    color: var(--primary-foreground);
    box-shadow: 0 1px 2px #0000000d;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):not(
      [data-variant]
    ):hover:not(:disabled) {
    background: color-mix(in oklab, var(--primary) 90%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):not(
      [data-variant]
    )[aria-pressed="true"] {
    background: color-mix(in oklab, var(--primary) 90%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-variant="primary"] {
    background: var(--primary);
    color: var(--primary-foreground);
    box-shadow: 0 1px 2px #0000000d;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="primary"]:hover:not(:disabled) {
    background: color-mix(in oklab, var(--primary) 90%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="primary"][aria-pressed="true"] {
    background: color-mix(in oklab, var(--primary) 90%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="secondary"] {
    background: var(--secondary);
    color: var(--secondary-foreground);
    box-shadow: 0 1px 2px #0000000d;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="secondary"]:hover:not(:disabled) {
    background: color-mix(in oklab, var(--secondary) 80%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="secondary"][aria-pressed="true"] {
    background: color-mix(in oklab, var(--secondary) 80%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-variant="outline"] {
    border: 1px solid var(--border);
    background: var(--background);
    box-shadow: 0 1px 2px #0000000d;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="outline"]:is(.dark *) {
    border-color: var(--input);
    background: color-mix(in oklab, var(--input) 30%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="outline"]:hover:not(:disabled) {
    background: var(--accent);
    color: var(--accent-foreground);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="outline"][aria-pressed="true"] {
    background: var(--accent);
    color: var(--accent-foreground);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="outline"]:is(.dark *):hover:not(:disabled) {
    background: color-mix(in oklab, var(--accent) 50%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="outline"]:is(.dark *)[aria-pressed="true"] {
    background: color-mix(in oklab, var(--accent) 50%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="ghost"]:hover:not(:disabled) {
    background: var(--accent);
    color: var(--accent-foreground);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="ghost"][aria-pressed="true"] {
    background: var(--accent);
    color: var(--accent-foreground);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-variant="ghost"]:is(
      .dark *
    ):hover:not(:disabled) {
    background: color-mix(in oklab, var(--accent) 50%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-variant="ghost"]:is(
      .dark *
    )[aria-pressed="true"] {
    background: color-mix(in oklab, var(--accent) 50%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-variant="link"] {
    color: var(--primary);
    text-underline-offset: 4px;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="link"]:hover:not(:disabled) {
    text-decoration-line: underline;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="link"][aria-pressed="true"] {
    text-decoration-line: underline;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="destructive"] {
    background: var(--destructive);
    color: #fff;
    box-shadow: 0 1px 2px #0000000d;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="destructive"]:focus-visible {
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--destructive) 20%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="destructive"]:hover:not(:disabled) {
    background: color-mix(in oklab, var(--destructive) 90%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="destructive"][aria-pressed="true"] {
    background: color-mix(in oklab, var(--destructive) 90%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="destructive"]:is(.dark *) {
    background: color-mix(in oklab, var(--destructive) 60%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="destructive"]:is(.dark *):focus-visible {
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--destructive) 40%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="destructive"]:is(.dark *):hover:not(:disabled) {
    background: color-mix(in oklab, var(--destructive) 50%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="destructive"]:is(.dark *)[aria-pressed="true"] {
    background: color-mix(in oklab, var(--destructive) 50%, transparent);
  }

  :-moz-any(
    button:not([role]),
    input:-moz-any([type="submit"], [type="reset"], [type="button"]),
    a.button
  ):not(form[method="dialog"]:not(dialog form) > *) {
    display: inline-flex;
    border-radius: calc(var(--radius) - 2px);
    outline: none;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    transition: all 0.15s ease-out;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):is(
      .card > header > [data-slot="card-action"],
      .card > footer > *
    ) {
    white-space: normal;
    height: auto;
    min-height: 2.25rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):is(
      dialog > footer button:not([role])
    ) {
    height: auto;
    min-height: 2.25rem;
    overflow-wrap: anywhere;
    white-space: normal;
    max-inline-size: 100%;
  }

  @container (width < 12rem) {
    :is(
        button:not([role]),
        input:is([type="submit"], [type="reset"], [type="button"]),
        a.button
      ):not(form[method="dialog"]:not(dialog form) > *):is(.card > footer > *) {
      padding-inline: 0.5rem;
    }
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):active:not(:disabled) {
    translate: 0 0.125rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[aria-busy="true"] {
    cursor: wait;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[aria-invalid="true"] {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--destructive) 20%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):is(
      .dark *
    )[aria-invalid="true"] {
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--destructive) 40%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)
    svg {
    pointer-events: none;
    flex-shrink: 0;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)
    svg:not([class*="size-"]) {
    width: 1rem;
    height: 1rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):not([data-size]) {
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0.5rem 1rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):not([data-size]):has(
      > svg
    ) {
    padding-inline-start: 0.75rem;
    padding-inline-end: 0.75rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-size="sm"] {
    gap: 0.375rem;
    height: 2rem;
    padding-inline-start: 0.75rem;
    padding-inline-end: 0.75rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-size="sm"]:has(
      > svg
    ) {
    padding-inline-start: 0.625rem;
    padding-inline-end: 0.625rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-size="lg"] {
    gap: 0.5rem;
    height: 2.5rem;
    padding-inline-start: 1.5rem;
    padding-inline-end: 1.5rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-size="lg"]:has(
      > svg
    ) {
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-size="icon"] {
    width: 2.25rem;
    height: 2.25rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):not([data-variant]) {
    background: var(--primary);
    color: var(--primary-foreground);
    box-shadow: 0 1px 2px #0000000d;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):not(
      [data-variant]
    ):hover:not(:disabled) {
    background: color-mix(in oklab, var(--primary) 90%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):not(
      [data-variant]
    )[aria-pressed="true"] {
    background: color-mix(in oklab, var(--primary) 90%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-variant="primary"] {
    background: var(--primary);
    color: var(--primary-foreground);
    box-shadow: 0 1px 2px #0000000d;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="primary"]:hover:not(:disabled) {
    background: color-mix(in oklab, var(--primary) 90%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="primary"][aria-pressed="true"] {
    background: color-mix(in oklab, var(--primary) 90%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="secondary"] {
    background: var(--secondary);
    color: var(--secondary-foreground);
    box-shadow: 0 1px 2px #0000000d;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="secondary"]:hover:not(:disabled) {
    background: color-mix(in oklab, var(--secondary) 80%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="secondary"][aria-pressed="true"] {
    background: color-mix(in oklab, var(--secondary) 80%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-variant="outline"] {
    border: 1px solid var(--border);
    background: var(--background);
    box-shadow: 0 1px 2px #0000000d;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="outline"]:is(.dark *) {
    border-color: var(--input);
    background: color-mix(in oklab, var(--input) 30%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="outline"]:hover:not(:disabled) {
    background: var(--accent);
    color: var(--accent-foreground);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="outline"][aria-pressed="true"] {
    background: var(--accent);
    color: var(--accent-foreground);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="outline"]:is(.dark *):hover:not(:disabled) {
    background: color-mix(in oklab, var(--accent) 50%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="outline"]:is(.dark *)[aria-pressed="true"] {
    background: color-mix(in oklab, var(--accent) 50%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="ghost"]:hover:not(:disabled) {
    background: var(--accent);
    color: var(--accent-foreground);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="ghost"][aria-pressed="true"] {
    background: var(--accent);
    color: var(--accent-foreground);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-variant="ghost"]:is(
      .dark *
    ):hover:not(:disabled) {
    background: color-mix(in oklab, var(--accent) 50%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-variant="ghost"]:is(
      .dark *
    )[aria-pressed="true"] {
    background: color-mix(in oklab, var(--accent) 50%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-variant="link"] {
    color: var(--primary);
    text-underline-offset: 4px;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="link"]:hover:not(:disabled) {
    text-decoration-line: underline;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="link"][aria-pressed="true"] {
    text-decoration-line: underline;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="destructive"] {
    background: var(--destructive);
    color: #fff;
    box-shadow: 0 1px 2px #0000000d;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="destructive"]:focus-visible {
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--destructive) 20%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="destructive"]:hover:not(:disabled) {
    background: color-mix(in oklab, var(--destructive) 90%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="destructive"][aria-pressed="true"] {
    background: color-mix(in oklab, var(--destructive) 90%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="destructive"]:is(.dark *) {
    background: color-mix(in oklab, var(--destructive) 60%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="destructive"]:is(.dark *):focus-visible {
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--destructive) 40%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="destructive"]:is(.dark *):hover:not(:disabled) {
    background: color-mix(in oklab, var(--destructive) 50%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="destructive"]:is(.dark *)[aria-pressed="true"] {
    background: color-mix(in oklab, var(--destructive) 50%, transparent);
  }

  :is(
    button:not([role]),
    input:is([type="submit"], [type="reset"], [type="button"]),
    a.button
  ):not(form[method="dialog"]:not(dialog form) > *) {
    display: inline-flex;
    border-radius: calc(var(--radius) - 2px);
    outline: none;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    transition: all 0.15s ease-out;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):is(
      .card > header > [data-slot="card-action"],
      .card > footer > *
    ) {
    white-space: normal;
    height: auto;
    min-height: 2.25rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):is(
      dialog > footer button:not([role])
    ) {
    height: auto;
    min-height: 2.25rem;
    overflow-wrap: anywhere;
    white-space: normal;
    max-inline-size: 100%;
  }

  @container (width < 12rem) {
    :is(
        button:not([role]),
        input:is([type="submit"], [type="reset"], [type="button"]),
        a.button
      ):not(form[method="dialog"]:not(dialog form) > *):is(.card > footer > *) {
      padding-inline: 0.5rem;
    }
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):active:not(:disabled) {
    translate: 0 0.125rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[aria-busy="true"] {
    cursor: wait;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[aria-invalid="true"] {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--destructive) 20%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):is(
      .dark *
    )[aria-invalid="true"] {
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--destructive) 40%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)
    svg {
    pointer-events: none;
    flex-shrink: 0;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)
    svg:not([class*="size-"]) {
    width: 1rem;
    height: 1rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):not([data-size]) {
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0.5rem 1rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):not([data-size]):has(
      > svg
    ) {
    padding-inline-start: 0.75rem;
    padding-inline-end: 0.75rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-size="sm"] {
    gap: 0.375rem;
    height: 2rem;
    padding-inline-start: 0.75rem;
    padding-inline-end: 0.75rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-size="sm"]:has(
      > svg
    ) {
    padding-inline-start: 0.625rem;
    padding-inline-end: 0.625rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-size="lg"] {
    gap: 0.5rem;
    height: 2.5rem;
    padding-inline-start: 1.5rem;
    padding-inline-end: 1.5rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-size="lg"]:has(
      > svg
    ) {
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-size="icon"] {
    width: 2.25rem;
    height: 2.25rem;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):not([data-variant]) {
    background: var(--primary);
    color: var(--primary-foreground);
    box-shadow: 0 1px 2px #0000000d;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):not(
      [data-variant]
    ):hover:not(:disabled) {
    background: color-mix(in oklab, var(--primary) 90%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *):not(
      [data-variant]
    )[aria-pressed="true"] {
    background: color-mix(in oklab, var(--primary) 90%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-variant="primary"] {
    background: var(--primary);
    color: var(--primary-foreground);
    box-shadow: 0 1px 2px #0000000d;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="primary"]:hover:not(:disabled) {
    background: color-mix(in oklab, var(--primary) 90%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="primary"][aria-pressed="true"] {
    background: color-mix(in oklab, var(--primary) 90%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="secondary"] {
    background: var(--secondary);
    color: var(--secondary-foreground);
    box-shadow: 0 1px 2px #0000000d;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="secondary"]:hover:not(:disabled) {
    background: color-mix(in oklab, var(--secondary) 80%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="secondary"][aria-pressed="true"] {
    background: color-mix(in oklab, var(--secondary) 80%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-variant="outline"] {
    border: 1px solid var(--border);
    background: var(--background);
    box-shadow: 0 1px 2px #0000000d;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="outline"]:is(.dark *) {
    border-color: var(--input);
    background: color-mix(in oklab, var(--input) 30%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="outline"]:hover:not(:disabled) {
    background: var(--accent);
    color: var(--accent-foreground);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="outline"][aria-pressed="true"] {
    background: var(--accent);
    color: var(--accent-foreground);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="outline"]:is(.dark *):hover:not(:disabled) {
    background: color-mix(in oklab, var(--accent) 50%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="outline"]:is(.dark *)[aria-pressed="true"] {
    background: color-mix(in oklab, var(--accent) 50%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="ghost"]:hover:not(:disabled) {
    background: var(--accent);
    color: var(--accent-foreground);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="ghost"][aria-pressed="true"] {
    background: var(--accent);
    color: var(--accent-foreground);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-variant="ghost"]:is(
      .dark *
    ):hover:not(:disabled) {
    background: color-mix(in oklab, var(--accent) 50%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-variant="ghost"]:is(
      .dark *
    )[aria-pressed="true"] {
    background: color-mix(in oklab, var(--accent) 50%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(form[method="dialog"]:not(dialog form) > *)[data-variant="link"] {
    color: var(--primary);
    text-underline-offset: 4px;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="link"]:hover:not(:disabled) {
    text-decoration-line: underline;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="link"][aria-pressed="true"] {
    text-decoration-line: underline;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="destructive"] {
    background: var(--destructive);
    color: #fff;
    box-shadow: 0 1px 2px #0000000d;
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="destructive"]:focus-visible {
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--destructive) 20%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="destructive"]:hover:not(:disabled) {
    background: color-mix(in oklab, var(--destructive) 90%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="destructive"][aria-pressed="true"] {
    background: color-mix(in oklab, var(--destructive) 90%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="destructive"]:is(.dark *) {
    background: color-mix(in oklab, var(--destructive) 60%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="destructive"]:is(.dark *):focus-visible {
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--destructive) 40%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="destructive"]:is(.dark *):hover:not(:disabled) {
    background: color-mix(in oklab, var(--destructive) 50%, transparent);
  }

  :is(
      button:not([role]),
      input:is([type="submit"], [type="reset"], [type="button"]),
      a.button
    ):not(
      form[method="dialog"]:not(dialog form) > *
    )[data-variant="destructive"]:is(.dark *)[aria-pressed="true"] {
    background: color-mix(in oklab, var(--destructive) 50%, transparent);
  }
}

/* src/css/utils.css */
@layer utilities {
  :root {
    --container-width: 640px;
  }

  :where(:scope) {
    --container-width: 640px;
  }

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

  @media (min-width: 40rem) {
    :is(.page, .container) {
      padding: 1.5rem;
    }
  }

  .section {
    margin-bottom: 2rem;
  }

  .stack,
  .y-stack {
    display: flex;
    gap: var(--layout-gap, 1rem);
    flex-direction: column;
    height: auto;
  }

  :is(.stack, .y-stack) > :-webkit-any(h1, h2, h3, h4, h5, h6, p) {
    margin: 0 !important;
  }

  :is(.stack, .y-stack) > :-moz-any(h1, h2, h3, h4, h5, h6, p) {
    margin: 0 !important;
  }

  :is(.stack, .y-stack) > :is(h1, h2, h3, h4, h5, h6, p) {
    margin: 0 !important;
  }

  .cluster {
    display: flex;
    align-items: center;
    gap: var(--layout-gap, 0.75rem);
    flex-wrap: wrap;
  }

  .cluster > :-webkit-any(h1, h2, h3, h4, h5, h6, p) {
    margin: 0 !important;
  }

  .cluster > :-moz-any(h1, h2, h3, h4, h5, h6, p) {
    margin: 0 !important;
  }

  .cluster > :is(h1, h2, h3, h4, h5, h6, p) {
    margin: 0 !important;
  }

  .x-stack {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .x-stack > :-webkit-any(h1, h2, h3, h4, h5, h6, p) {
    margin: 0 !important;
  }

  .x-stack > :-moz-any(h1, h2, h3, h4, h5, h6, p) {
    margin: 0 !important;
  }

  .x-stack > :is(h1, h2, h3, h4, h5, h6, p) {
    margin: 0 !important;
  }

  .split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--layout-gap, 1rem);
    flex-wrap: wrap;
  }

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

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

  .flex-wrap {
    flex-wrap: wrap;
  }

  .max-w-sm {
    max-width: 24rem;
  }

  .border-t {
    border-top: 1px solid var(--border);
  }

  .gap-1\! {
    gap: 0.25rem !important;
  }

  .bg-blue-600 {
    background-color: oklch(0.546 0.245 262.881);
  }

  .touch-hitbox {
    position: relative;
  }

  .touch-hitbox:before {
    content: "";
    position: absolute;
    display: block;
    z-index: 9999;
    width: 100%;
    min-width: 44px;
    height: 100%;
    min-height: 44px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* src/css/index.css */