/* Classic appearance for both light and dark. Load after core. */
@layer core, theme;
@layer theme {
/* src/themes/classic/palette.css */
/* Classic palette. Loaded only by the Classic stylesheet. */
:root {
  --white: oklch(100% 0 0);
  --black: oklch(0% 0 0);
  --neutral-50: oklch(98.5% 0.002 247.839);
  --neutral-100: oklch(96.7% 0.003 264.542);
  --neutral-200: oklch(92.8% 0.006 264.531);
  --neutral-300: oklch(87.2% 0.01 258.338);
  --neutral-400: oklch(70.7% 0.022 261.325);
  --neutral-500: oklch(55.1% 0.027 264.364);
  --neutral-600: oklch(44.6% 0.03 256.802);
  --neutral-700: oklch(36.3% 0.034 259.733);
  --neutral-800: oklch(25.8% 0.033 256.848);
  --neutral-900: oklch(18% 0.034 264.665);
  --neutral-950: oklch(10% 0.028 261.692);
  --primary-50: oklch(97.651% 0.00542 274.967);
  --primary-100: oklch(92.043% 0.01921 263.005);
  --primary-200: oklch(84.016% 0.03474 263.552);
  --primary-300: oklch(77.561% 0.07528 264.352);
  --primary-400: oklch(69.449% 0.11104 265.120);
  --primary-500: oklch(61.466% 0.13091 265.302);
  --primary-600: oklch(51.968% 0.12441 264.986);
  --primary-700: oklch(40.947% 0.09587 265.972);
  --primary-800: oklch(30.001% 0.06508 267.286);
  --primary-900: oklch(20.098% 0.04436 267.727);
  --primary-950: oklch(13.314% 0.03035 270.585);
  --error-50: oklch(97.65% 0.0054 17.38);
  --error-100: oklch(92.04% 0.0192 17.717);
  --error-200: oklch(84.02% 0.0347 18.334);
  --error-300: oklch(77.56% 0.0753 19.571);
  --error-400: oklch(69.45% 0.1110 22.216);
  --error-500: oklch(61.47% 0.1309 25.331);
  --error-600: oklch(51.97% 0.1244 27.325);
  --error-700: oklch(40.95% 0.0959 27.518);
  --error-800: oklch(30.00% 0.0651 26.899);
  --error-900: oklch(20.10% 0.0444 25.723);
  --error-950: oklch(13.31% 0.0304 26.042);
  --warning-50: oklch(97.65% 0.0054 102.212);
  --warning-100: oklch(92.04% 0.0192 103.193);
  --warning-200: oklch(84.02% 0.0347 101.54);
  --warning-300: oklch(77.56% 0.0753 98.111);
  --warning-400: oklch(69.45% 0.1110 91.936);
  --warning-500: oklch(61.47% 0.1309 86.047);
  --warning-600: oklch(51.97% 0.1244 75.834);
  --warning-700: oklch(40.95% 0.0959 66.442);
  --warning-800: oklch(30.00% 0.0651 61.907);
  --warning-900: oklch(20.10% 0.0444 57.708);
  --warning-950: oklch(13.31% 0.0304 53.813);
  --success-50: oklch(97.65% 0.0054 155.826);
  --success-100: oklch(92.04% 0.0192 156.743);
  --success-200: oklch(84.02% 0.0347 155.995);
  --success-300: oklch(77.56% 0.0753 154.449);
  --success-400: oklch(69.45% 0.1110 151.711);
  --success-500: oklch(61.47% 0.1309 149.579);
  --success-600: oklch(51.97% 0.1244 149.214);
  --success-700: oklch(40.95% 0.0959 150.069);
  --success-800: oklch(30.00% 0.0651 151.328);
  --success-900: oklch(20.10% 0.0444 152.535);
  --success-950: oklch(13.31% 0.0304 152.934);
  --info-50: oklch(97.65% 0.0054 236.62);
  --info-100: oklch(92.04% 0.0192 236.824);
  --info-200: oklch(84.02% 0.0347 230.902);
  --info-300: oklch(77.56% 0.0753 230.318);
  --info-400: oklch(69.45% 0.1110 232.661);
  --info-500: oklch(61.47% 0.1309 237.323);
  --info-600: oklch(51.97% 0.1244 241.966);
  --info-700: oklch(40.95% 0.0959 242.749);
  --info-800: oklch(30.00% 0.0651 240.79);
  --info-900: oklch(20.10% 0.0444 240.876);
  --info-950: oklch(13.31% 0.0304 243.157);
}

}
@layer theme {
/* src/themes/classic/reset.css */
/* Classic reset: shared/light appearance, then dark overrides. */
:where(body, [ui-theme="light"]) {
  background: var(--white);
  color: var(--neutral-800);
  font-family: system-ui, sans-serif;
}
:where(body, [ui-theme="light"]) {
  color-scheme: light;
}

@scope ([ui-theme="dark"]) to ([ui-theme="light"]) {
  :where(:scope, body) {
    color-scheme: dark;
    background: var(--primary-950);
    color: var(--primary-50);
  }
}

}
@layer theme {
/* src/themes/classic/focus.css */
/* Classic focus: shared/light appearance, then dark overrides. */
:where(:focus-visible) {
  outline: 2px solid oklch(from var(--primary-500) l calc(c * 0.75) h);
  outline-offset: 2px;
}

@scope ([ui-theme="dark"]) to ([ui-theme="light"]) {
  :where(:focus-visible) {
    outline-color: var(--primary-300);
  }
}

}
@layer theme {
/* src/themes/classic/hr.css */
/* Classic hr: shared/light appearance, then dark overrides. */
:where(hr:not([ui-off])) {
  border: none;
  background: var(--neutral-200);
}

@scope ([ui-theme="dark"]) to ([ui-theme="light"]) {
  :where(hr:not([ui-off])) {
    background: var(--neutral-700);
  }
}

}
@layer theme {
/* src/themes/classic/inline.css */
/* Classic inline: shared/light appearance, then dark overrides. */
:where(strong:not([ui-off])),
:where(b:not([ui-off])) {
  font-weight: 600;
}
:where(em:not([ui-off])),
:where(i:not([ui-off])) {
  font-style: italic;
}
:where(mark:not([ui-off])) {
  background-color: var(--neutral-50);
}
:where(del:not([ui-off])),
:where(s:not([ui-off])) {
  text-decoration: line-through;
}
:where(ins:not([ui-off])),
:where(u:not([ui-off])) {
  text-decoration: underline;
}
:where(kbd:not([ui-off])) {
  box-shadow: 0 1px 0 oklch(from var(--neutral-800) l c h / 10%);
  border: 1px solid var(--neutral-200);
  border-radius: 4px;
  background-color: var(--neutral-50);
  font-family: ui-monospace, monospace;
}
:where(abbr:not([ui-off])) {
  text-decoration: underline;
  text-decoration-style: dotted;
}
:where(cite:not([ui-off])) {
  font-style: italic;
}
:where(samp:not([ui-off])) {
  font-family: ui-monospace, monospace;
}
:where(var:not([ui-off])) {
  font-style: italic;
  font-family: ui-monospace, monospace;
}

@scope ([ui-theme="dark"]) to ([ui-theme="light"]) {
  :where(mark:not([ui-off])) {
    background-color: var(--neutral-800);
    color: var(--neutral-100);
  }
  :where(kbd:not([ui-off])) {
    box-shadow: 0 1px 0 oklch(from var(--neutral-950) l c h / 30%);
    border-color: var(--neutral-700);
    background-color: var(--neutral-900);
    color: var(--neutral-100);
  }
}

}
@layer theme {
/* src/themes/classic/code.css */
/* Classic code: colors and mode modifiers come from core. */
:where(code:not([ui-off]):not(pre > code)) {
  border-radius: 4px;
}
:where(pre:not([ui-off]):has(> code)) {
  border-radius: 12px;
}
@scope ([ui-theme="dark"]) to ([ui-theme="light"]) {
  :where(code:not([ui-off]):not(pre > code), pre:not([ui-off]):has(> code)):where(:not([ui-code~="invert"])) {
    background-color: var(--neutral-900);
  }
}

}
@layer theme {
/* src/themes/classic/link.css */
/* Classic link: shared/light appearance, then dark overrides. */
:where(
  a:not([ui-off]):not([ui-button]):not([ui-card]),
  [ui-link]:not([ui-off]):not([ui-button]):not([ui-card])
) {
  color: var( --primary-800);
  text-decoration: underline;
  &:where(:hover) {
    color: var( --primary-600);
  }
  &:where(:active) {
    color: var( --primary-500);
  }
  &:where([ui-link~="inherit"]) {
    color: inherit;
    &:where(:hover) {
      color: var( --primary-600);
    }
    &:where(:active) {
      color: var( --primary-500);
    }
  }
}

@scope ([ui-theme="dark"]) to ([ui-theme="light"]) {
  :where(
    a:not([ui-off]):not([ui-button]):not([ui-card]),
    [ui-link]:not([ui-off]):not([ui-button]):not([ui-card])
  ) {
    color: var(--primary-300);
    &:where(:hover) {
      color: var(--primary-200);
    }
    &:where(:active) {
      color: var(--primary-100);
    }
    &:where([ui-link~="inherit"]) {
      color: inherit;
      &:where(:hover) {
        color: var(--primary-200);
      }
      &:where(:active) {
        color: var(--primary-100);
      }
    }
  }
}

}
@layer theme {
/* src/themes/classic/heading.css */
/* Classic heading: shared/light appearance, then dark overrides. */
:where([ui-heading], h1, h2, h3, h4, h5, h6, legend):where(:not([ui-off])) {
  font-weight: 600;
}

}
@layer theme {
/* src/themes/classic/input.css */
/* Classic input: shared/light appearance, then dark overrides. */
:where(:not([ui-button]):not([ui-off])):where(input:not([type]),
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  input[type="tel"],
  input[type="search"],
  input[type="date"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  input[type="time"],
  input[list="datalist"],
  textarea,
  select) {
  box-shadow: inset 0 4px 8px -4px var(--neutral-100),
  0 4px 12px -4px oklch(from var(--black) l c h / 5%);
  border: 1px solid var(--neutral-300);
  border-radius: 8px;
  background: var(--white);
  color: var(--neutral-800);
  font-family: inherit;
  text-decoration: none;
  &:where(:hover) {
    border-color: var(--neutral-300);
  }
  &:where(:user-invalid),
  &:where([aria-invalid="true"]) {
    border-color: var(--error-600);
  }
  &:where(:disabled) {
    box-shadow: none;
    border-color: var(--neutral-200);
    background: var(--neutral-100);
    color: var(--neutral-400);
  }
  &::placeholder {
    color: var(--neutral-400);
  }
  &:where(:disabled)::placeholder {
    color: var(--neutral-400);
  }
  &:where([ui-input~="sm"]) {
    border-radius: 6px;
  }
  &:where([ui-input~="lg"]) {
    border-radius: 10px;
  }
}
:where(label:has(> input[type="checkbox"][ui-input~="switch"]:not([ui-off])[disabled])),
:where(label:has(> input[type="radio"][ui-input~="switch"]:not([ui-off])[disabled])) {
  color: var(--neutral-500);
}
:where([ui-row] input[type="checkbox"][ui-input~="switch"]:not([ui-off])[disabled] + label),
:where([ui-row] input[type="radio"][ui-input~="switch"]:not([ui-off])[disabled] + label) {
  color: var(--neutral-500);
}
:where(input[type="checkbox"][ui-input~="switch"]:not([ui-off])),
:where(input[type="radio"][ui-input~="switch"]:not([ui-off])) {
  transition: background-color 0.2s ease, border-color 0.2s ease;
  border: 1px solid var(--neutral-300);
  border-radius: 999px;
  background: var(--neutral-100);
  &::before {
    transition: left 0.2s ease;
    box-shadow:
      0 1px 2px oklch(from var(--black) l c h / 20%),
      0 2px 4px oklch(from var(--black) l c h / 10%);
    border-radius: 50%;
    background: var(--white);
  }
  &:where(:hover) {
    background: var(--neutral-50);
  }
  &:where(:user-invalid),
  &:where([aria-invalid="true"]) {
    border-color: var(--error-600);
  }
  &:where(:checked) {
    border: 1px solid var(--primary-700);
    background: var(--primary-600);
    box-shadow: 0 4px 12px -4px oklch(from var(--primary-800) l c h / 5%);
    &:where(:hover) {
      background: var(--primary-500);
    }
  }
  &:where(:disabled) {
    box-shadow: none;
    border-color: var(--neutral-200);
    background: var(--neutral-100);
    &::before {
      background: var(--neutral-50);
    }
  }
  &:where(:checked):where(:disabled) {
    box-shadow: none;
    border-color: var(--neutral-500);
    background: var(--neutral-400);
    &::before {
      background: var(--neutral-300);
    }
  }
}

@scope ([ui-theme="dark"]) to ([ui-theme="light"]) {
  :where(:scope, input, textarea, select) {
    color-scheme: dark;
  }
  :where(input:not([type]), input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="url"], input[type="tel"], input[type="search"],
    input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"],
    input[type="week"], input[type="time"], input[list="datalist"], textarea, select):not([ui-off]) {
    box-shadow: inset 0 4px 8px -4px var(--neutral-950), 0 4px 12px -4px oklch(from var(--black) l c h / 16%);
    border-color: var(--neutral-700);
    background-color: var(--neutral-900);
    color: var(--neutral-100);
    &:where(:hover) {
      border-color: var(--neutral-600);
    }
    &:where(:disabled) {
      border-color: var(--neutral-800);
      background-color: var(--neutral-950);
      color: var(--neutral-500);
    }
    &::placeholder {
      color: var(--neutral-500);
    }
  }
  :where(input[type="checkbox"][ui-input~="switch"]:not([ui-off]), input[type="radio"][ui-input~="switch"]:not([ui-off])) {
    border-color: var(--neutral-700);
    background: var(--neutral-800);
    &:where(:checked) {
      border-color: var(--primary-700);
      background: var(--primary-600);
      box-shadow: 0 4px 12px -4px oklch(from var(--primary-800) l c h / 5%);
    }
    &:where(:hover):not(:checked) {
      background: var(--neutral-700);
    }
    &:where(:checked):where(:hover) {
      background: var(--primary-500);
    }
    &:where(:disabled) {
      border-color: var(--neutral-800);
      background: var(--neutral-900);
      &::before {
        background: var(--neutral-700);
      }
    }
    &:where(:checked):where(:disabled) {
      border-color: var(--neutral-700);
      background: var(--neutral-800);
      &::before {
        background: var(--neutral-600);
      }
    }
  }
}

}
@layer theme {
/* src/themes/classic/select.css */
/* Classic select: shared/light appearance, then dark overrides. */
:where(select:not([ui-off])) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect x='0' y='0' width='28' height='28' fill='%23E9E9E9' rx='4'/%3E%3Cpath d='M10 12 L14 16 L18 12' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 6px center;
  background-size: 28px 28px;
  background-repeat: no-repeat;
  &:where(:hover) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect x='0' y='0' width='28' height='28' fill='%23EEEEEE' rx='4'/%3E%3Cpath d='M10 12 L14 16 L18 12' fill='none' stroke='%23444444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  &:where(:disabled) {
    box-shadow: none;
    border-color: var(--neutral-200);
    background-color: var(--neutral-100);
    color: var(--neutral-400);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M10 12 L14 16 L18 12' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 6px center;
    background-size: 28px 28px;
    background-repeat: no-repeat;
  }
  &:where([ui-input~="sm"]) {
    border-radius: 6px;
    background-size: 20px 20px;
    background-position: right 4px center;
    &:where(:hover) {
      background-size: 20px 20px;
      background-position: right 4px center;
    }
    &:where(:disabled) {
      background-size: 20px 20px;
      background-position: right 4px center;
    }
  }
  &:where([ui-input~="lg"]) {
    border-radius: 10px;
    background-size: 32px 32px;
    background-position: right 8px center;
    &:where(:hover) {
      background-size: 32px 32px;
      background-position: right 8px center;
    }
    &:where(:disabled) {
      background-size: 32px 32px;
      background-position: right 8px center;
    }
  }
}

@scope ([ui-theme="dark"]) to ([ui-theme="light"]) {
  :where(select:not([ui-off])) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M10 12 L14 16 L18 12' fill='none' stroke='%23f6f7fb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    &:where(:disabled) {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M10 12 L14 16 L18 12' fill='none' stroke='%2370798b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
  }
}

}
@layer theme {
/* src/themes/classic/accordion.css */
/* Classic accordion: shared/light appearance, then dark overrides. */
:where([ui-accordion] details) {
  &::details-content {
    transition:
      content-visibility 0.25s ease-out allow-discrete,
      opacity 0.25s ease-out,
      block-size 0.25s ease-out;
  }
  &:where(:not(:first-child)) {
    border-top: 1px solid var(--neutral-100);
  }
  & :where(summary) {
    font-weight: 600;
    &:where([disabled]) {
      color: var(--neutral-500);
    }
    &::before {
      transition: rotate 200ms ease;
      background-color: currentColor;
    }
  }
}

@scope ([ui-theme="dark"]) to ([ui-theme="light"]) {
  :where(
    [ui-accordion] details:not(:first-child),
    :scope[ui-accordion] details:not(:first-child)
  ) {
    border-top-color: var(--neutral-700);
  }
  :where(
    [ui-accordion] summary[disabled],
    :scope[ui-accordion] summary[disabled]
  ) {
    color: var(--neutral-400);
  }
}

}
@layer theme {
/* src/themes/classic/card.css */
/* Classic card: shared/light appearance, then dark overrides. */
:where([ui-card]) {
  box-shadow: 0 0 32px oklch(from var(--neutral-900) l c h / 2%);
  border: 1px solid var(--neutral-100);
  border-radius: 1rem;
  background-color: var(--white);
  &:where(a) {
    color: inherit;
    text-decoration: none;
  }
  &:where([ui-card~="neutral"]) {
    border-color: var(--neutral-200);
    background-color: var(--neutral-100);
  }
  &:where([ui-card~="outline"]) {
    box-shadow: none;
    border-color: var(--neutral-300);
    background-color: transparent;
  }
  &:where(a):hover {
    background-color: color-mix(in oklch, var(--white) 25%, var(--neutral-50));
  }
  &:where(a[ui-card~="neutral"]):hover {
    background-color: color-mix(in oklch, var(--neutral-100), var(--neutral-200));
  }
  &:where(a[ui-card~="outline"]):hover {
    background-color: var(--neutral-50);
  }
  &:where(a):active {
    background-color: var(--white);
  }
  &:where(a[ui-card~="neutral"]):active {
    background-color: var(--neutral-100);
  }
  &:where(a[ui-card~="outline"]):active {
    background-color: var(--neutral-100);
  }
}
:where([ui-card] > img:first-child, [ui-card] > picture:first-child, [ui-card] > video:first-child, [ui-card] > figure:first-child) {
  border-start-start-radius: 1rem;
  border-start-end-radius: 1rem;
}
:where([ui-card] > img:last-child, [ui-card] > picture:last-child, [ui-card] > video:last-child, [ui-card] > figure:last-child) {
  border-end-start-radius: 1rem;
  border-end-end-radius: 1rem;
}

@scope ([ui-theme="dark"]) to ([ui-theme="light"]) {
  :where(:scope[ui-card], [ui-card]) {
    border-color: var(--neutral-800);
    background-color: var(--neutral-900);
    color: var(--neutral-100);
    &:where([ui-card~="neutral"]) {
      border-color: color-mix(in oklch, var(--neutral-800) 60%, var(--neutral-700) 40%);
      background-color: color-mix(in oklch, var(--neutral-900) 60%, var(--neutral-800) 40%);
    }
    &:where([ui-card~="outline"]) {
      box-shadow: none;
      border-color: var(--neutral-700);
      background-color: transparent;
    }
    &:where(a):hover {
      background-color: color-mix(in oklch, var(--neutral-900) 75%, var(--neutral-800));
    }
    &:where(a[ui-card~="neutral"]):hover {
      background-color: color-mix(in oklch, var(--neutral-900) 30%, var(--neutral-800) 70%);
    }
    &:where(a[ui-card~="outline"]):hover {
      background-color: var(--neutral-800);
    }
    &:where(a):active {
      background-color: var(--neutral-900);
    }
    &:where(a[ui-card~="neutral"]):active {
      background-color: color-mix(in oklch, var(--neutral-900) 60%, var(--neutral-800) 40%);
    }
    &:where(a[ui-card~="outline"]):active {
      background-color: var(--neutral-800);
    }
  }
}

}
@layer theme {
/* src/themes/classic/button.css */
/* Classic button: shared/light appearance, then dark overrides. */
:where(:not([ui-off]):not([ui-link])):where([ui-button]:not(input[type="checkbox"], input[type="radio"]),
  button, input[type="button"], input[type="submit"], input[type="reset"],
) {
  box-shadow:
    inset 0 1px 0 0 color-mix(in oklch, var(--white) 50%, transparent),
    inset 0 -2px 4px -1px var(--neutral-100),
    0 4px 12px -4px oklch(from var(--black) l c h / 8%);
  border: 1px solid var(--neutral-300);
  border-bottom-color: var(--neutral-300);
  border-radius: 8px;
  background: linear-gradient(to bottom, var(--neutral-100), var(--neutral-200));
  color: var(--neutral-800);
  font-weight: 500;
  text-decoration: none;
  &:where(:hover) {
    background: linear-gradient(to bottom, var(--neutral-50), var(--neutral-100));
  }
  &:where(:active),
  &:where(:has(:checked)) {
    box-shadow:
      inset 0 -2px 4px -1px var(--neutral-50),
      0 4px 8px -4px oklch(from var(--neutral-950) l c h / 10%);
    background: linear-gradient(to bottom, var(--neutral-50), var(--neutral-50));
  }
  &:where(:disabled) {
    box-shadow: none;
    border-color: var(--neutral-300);
    background: var(--neutral-200);
    color: var(--neutral-500);
  }
  &:where([aria-busy="true"]) {
    --ui-loading-color: var(--neutral-950);
    box-shadow:
      inset 0 -2px 4px -1px var(--neutral-50),
      0 4px 8px -4px oklch(from var(--neutral-950) l c h / 10%);
    background: linear-gradient(to bottom, var(--neutral-50), var(--neutral-50));
    color: transparent;
    &::after {
      background-color: var(--ui-loading-color);
    }
  }
  &:where([ui-button~="primary"]) {
    box-shadow:
      inset 0 1px 0 0 color-mix(in oklch, var(--primary-400) 50%, transparent),
      inset 0 -2px 4px -1px var(--primary-700),
      0 4px 12px -4px oklch(from var(--primary-800) l c h / 8%);
    border: 1px solid var(--primary-700);
    background: linear-gradient(to bottom, var(--primary-600), var(--primary-700));
    color: var(--primary-50);
    &:where(:hover) {
      background: linear-gradient(
        to bottom,
        color-mix(in oklch, var(--primary-600), var(--primary-500) 50%),
        color-mix(in oklch, var(--primary-700), var(--primary-600) 50%)
      );
    }
    &:where(:active),
    &:where(:has(:checked)) {
      box-shadow:
        0 4px 12px -4px oklch(from var(--primary-800) l c h / 8%);
      background: linear-gradient(
        to bottom,
        var(--primary-500),
        var(--primary-600)
      );
    }
    &:where(:disabled) {
      box-shadow: none;
      border-color: var(--neutral-800);
      background: oklch(from var(--primary-700) l calc(c * 0.25) h);
      color: oklch(from var(--primary-200) l calc(c * 0.25) h);
    }
    &:where([aria-busy="true"]) {
      --ui-loading-color: var(--white);
      box-shadow:
        inset 0 -2px 4px -1px var(--primary-700),
        0 4px 12px -4px oklch(from var(--primary-800) l c h / 8%);
      background: linear-gradient(to bottom, var(--primary-500), var(--primary-600));
      color: transparent;
    }
  }
  &:where([ui-button~="tertiary"]) {
    box-shadow: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--neutral-800);
    &:where(:hover) {
      border-color: var(--neutral-200);
      background: var(--neutral-100);
      color: var(--neutral-800);
    }
    &:where(:active),
    &:where(:has(:checked)) {
      box-shadow: none;
      border-color: var(--neutral-200);
      background: var(--neutral-50);
      color: var(--neutral-800);
    }
    &:where(:disabled) {
      box-shadow: none;
      border-color: transparent;
      background: transparent;
      color: var(--neutral-400);
    }
    &:where([aria-busy="true"]) {
      --ui-loading-color: var(--neutral-600);
      box-shadow: none;
      border-color: var(--neutral-200);
      background: var(--neutral-50);
      color: transparent;
    }
  }
  &:where([ui-button~="xs"]) {
    border-radius: 4px;
  }
  &:where([ui-button~="sm"]) {
    border-radius: 6px;
  }
  &:where([ui-button~="lg"]) {
    border-radius: 10px;
  }
  &:where([ui-button~="xl"]) {
    border-radius: 10px;
  }
  &:where([ui-button~="circle"]) {
    border-radius: 50%;
  }
  &:where([ui-button~="inline"]) {
    box-shadow: none;
    border-color: transparent;
    background: transparent;
    color: var(--neutral-800);
    &:where(:hover) {
      box-shadow: none;
      border-color: transparent;
      background: transparent;
      color: var(--primary-700);
    }
    &:where(:active),
    &:where(:has(:checked)) {
      box-shadow: none;
      border-color: transparent;
      background: transparent;
      color: var(--primary-500);
    }
    &:where(:disabled) {
      box-shadow: none;
      border-color: transparent;
      background: transparent;
      color: var(--neutral-400);
    }
    &:where([aria-busy="true"]) {
      --ui-loading-color: var(--neutral-700);
      box-shadow: none;
      border-color: transparent;
      background: transparent;
      color: transparent;
    }
  }
}
@scope ([ui-theme="dark"]) to ([ui-theme="light"]) {
  :where(:scope, [ui-button]:not(input[type="checkbox"], input[type="radio"])) {
    color-scheme: dark;
  }
  :where(:not([ui-off]):not([ui-link])):where([ui-button]:not(input[type="checkbox"], input[type="radio"]):not([ui-button~="primary"]), button:not([ui-button~="primary"]), input[type="button"]:not([ui-button~="primary"]), input[type="submit"]:not([ui-button~="primary"]), input[type="reset"]:not([ui-button~="primary"])) {
    box-shadow:
      inset 0 1px 0 0 color-mix(in oklch, var(--neutral-700) 50%, transparent),
      inset 0 -2px 4px -1px var(--neutral-950),
      0 4px 12px -4px oklch(from var(--black) l c h / 18%);
    border-color: var(--neutral-800);
    background: linear-gradient(to bottom, var(--neutral-800), var(--neutral-900));
    color: var(--neutral-100);
    &:where([aria-busy="true"]) {
      color: transparent;
      --ui-loading-color: var(--neutral-100);
    }
    &:where(:hover) {
      background: linear-gradient(
        to bottom,
        color-mix(in oklch, var(--neutral-800), var(--neutral-700) 50%),
        color-mix(in oklch, var(--neutral-900), var(--neutral-800) 50%)
      );
    }
    &:where(:active), &:where(:has(:checked)) {
      background: linear-gradient(to bottom, var(--neutral-700), var(--neutral-700));
    }
    &:where(:disabled) {
      border-color: var(--neutral-800);
      background: var(--neutral-900);
      color: var(--neutral-500);
    }
    &:where([ui-button~="tertiary"]) {
      box-shadow: none;
      border-color: transparent;
      background: transparent;
      color: var(--neutral-100);
      &:where(:hover) {
        box-shadow: none;
        border-color: transparent;
        background: transparent;
        color: var(--primary-300);
      }
      &:where(:active), &:where(:has(:checked)) {
        box-shadow: none;
        border-color: transparent;
        background: transparent;
        color: var(--primary-200);
      }
      &:where(:disabled) {
        box-shadow: none;
        border-color: transparent;
        background: transparent;
        color: var(--neutral-500);
      }
      &:where([aria-busy="true"]) {
        --ui-loading-color: var(--neutral-200);
        box-shadow: none;
        border-color: transparent;
        background: transparent;
        color: transparent;
      }
    }
    &:where([ui-button~="inline"]) {
      box-shadow: none;
      border-color: transparent;
      background: transparent;
      color: var(--neutral-100);
      &:where(:hover) {
        box-shadow: none;
        border-color: transparent;
        background: transparent;
        color: var(--primary-300);
      }
      &:where(:active), &:where(:has(:checked)) {
        box-shadow: none;
        border-color: transparent;
        background: transparent;
        color: var(--primary-200);
      }
      &:where(:disabled) {
        box-shadow: none;
        border-color: transparent;
        background: transparent;
        color: var(--neutral-500);
      }
      &:where([aria-busy="true"]) {
        --ui-loading-color: var(--neutral-200);
        box-shadow: none;
        border-color: transparent;
        background: transparent;
        color: transparent;
      }
    }
  }
}

}
@layer theme {
/* src/themes/classic/dialog.css */
/* Classic dialog: shared/light appearance, then dark overrides. */
:where(dialog[ui-dialog]) {
  transition: transform 200ms ease-out, opacity 200ms ease-out;
  box-shadow: inset 0 0 0 1px var(--neutral-100),
    0 8px 8px -8px oklch(from var(--black) l c h / 30%);
  border: none;
  border-radius: 12px;
  background: var(--white);
  color: var(--neutral-800);
  &:where([ui-dialog~="left"]),
  &:where([ui-dialog~="right"]) {
    transition: transform 200ms ease-out;
    border-radius: 12px;
  }
  &:where([ui-dialog~="right"][ui-dialog~="edge"]) {
    border-radius: 0;
  }
  &:where([ui-dialog~="left"][ui-dialog~="edge"]) {
    border-radius: 0;
  }
  &:where([ui-dialog~="top"]),
  &:where([ui-dialog~="bottom"]) {
    transition: transform 200ms ease-out;
    border-radius: 12px;
  }
  &:where([ui-dialog~="top"][ui-dialog~="edge"]) {
    border-radius: 0;
  }
  &:where([ui-dialog~="bottom"][ui-dialog~="edge"]) {
    border-radius: 0;
  }
}
:where(dialog[ui-dialog])::backdrop {
  backdrop-filter: blur(2px);
  transition: opacity 200ms ease-out, backdrop-filter 200ms ease-out;
  transition-behavior: allow-discrete;
  background: oklch(from var(--black) l c h / 20%);
}
@starting-style {
  :where(dialog[ui-dialog])::backdrop {
    backdrop-filter: blur(0px);
  }
}
:where(dialog[ui-dialog]) {
  @starting-style {
    transform: translateY(-50px);
    opacity: 0;
  }
  @starting-style {
    &:where([ui-dialog~="right"]) {
      transform: translateX(100%);
    }
    &:where([ui-dialog~="left"]) {
      transform: translateX(-100%);
    }
  }
  @starting-style {
    &:where([ui-dialog~="top"]):not([ui-dialog~="edge"]) {
      transform: translateY(-100%);
    }
    &:where([ui-dialog~="bottom"]):not([ui-dialog~="edge"]) {
      transform: translateY(100%);
    }
    &:where([ui-dialog~="top"][ui-dialog~="edge"]) {
      transform: translateY(-100%);
    }
    &:where([ui-dialog~="bottom"][ui-dialog~="edge"]) {
      transform: translateY(100%);
    }
  }
}
@starting-style {
  :where(dialog[ui-dialog])::backdrop {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
}

@scope ([ui-theme="dark"]) to ([ui-theme="light"]) {
  :where(dialog[ui-dialog]) {
    box-shadow: inset 0 0 0 1px var(--neutral-800),
      0 8px 8px -8px oklch(from var(--black) l c h / 50%);
    background: var(--neutral-900);
    color: var(--neutral-100);
  }
}

}
@layer theme {
/* src/themes/classic/menu.css */
/* Classic menu: shared/light appearance, then dark overrides. */
:where([ui-menu] > [role="menu"]) {
  box-shadow: 0 4px 12px oklch(from var(--black) l c h / 10%);
  border: 1px solid var(--neutral-100);
  border-radius: 8px;
  background-color: var(--white);
}
:where([ui-menu] > [role="menu"] > [role="menuitem"]),
:where([ui-menu] > [role="menu"] > [role="menuitemcheckbox"]),
:where([ui-menu] > [role="menu"] > [role="menuitemradio"]) {
  box-shadow: none;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--neutral-800);
  font-weight: 400;
  text-decoration: none;
  &:where(:hover) {
    box-shadow: none;
    background: var(--neutral-50);
    color: inherit;
  }
  &:where(:active) {
    box-shadow: none;
    background: var(--neutral-50);
    color: inherit;
  }
  &:where(:disabled) {
    color: var(--neutral-300);
  }
}
:where([ui-menu] > [role="menu"] > hr) {
  border: none;
  border-top: 1px solid var(--neutral-100);
}

@scope ([ui-theme="dark"]) to ([ui-theme="light"]) {
  :where([ui-menu] > [role="menu"]) {
    box-shadow: 0 4px 16px oklch(from var(--black) l c h / 40%);
    border-color: var(--neutral-800);
    background-color: var(--neutral-900);
    color: var(--neutral-100);
  }
  :where([ui-menu] > [role="menu"] > [role="menuitem"],
    [ui-menu] > [role="menu"] > [role="menuitemcheckbox"],
    [ui-menu] > [role="menu"] > [role="menuitemradio"]) {
    box-shadow: none;
    border: none;
    background: transparent;
    color: var(--neutral-100);
    &:where(:hover, :active) {
      box-shadow: none;
      border: none;
      background: var(--neutral-800);
      color: var(--neutral-50);
    }
    &:where(:disabled) {
      color: var(--neutral-500);
    }
  }
  :where([ui-menu] > [role="menu"] > hr) {
    border-top-color: var(--neutral-800);
  }
}

}
@layer theme {
/* src/themes/classic/checkbox.css */
/* Classic checkbox: shared/light appearance, then dark overrides. */
:where(.ui-flex > input[type="checkbox"]:not([ui-off], [ui-input~="switch"])[disabled] + label),
:where([ui-row] input[type="checkbox"]:not([ui-off], [ui-input~="switch"])[disabled] + label) {
  color: var(--neutral-500);
}
:where(input[type="checkbox"]:not([ui-off], [ui-input~="switch"])) {
  box-shadow:
    inset 0 1px 0 0 var(--white),
    inset 0 -2px 4px -1px var(--neutral-100),
    0 4px 8px -4px oklch(from var(--black) l c h / 20%);
  border: 1px solid var(--neutral-300);
  border-radius: 4px;
  background: linear-gradient(to bottom, var(--neutral-50), var(--neutral-100));
  &:where(:hover) {
    background: linear-gradient(to bottom, var(--neutral-50), var(--neutral-100));
  }
  &:where(:user-invalid),
  &[aria-invalid="true"] {
    border-color: var(--error-600);
  }
  &:where(:checked),
  &:where(:indeterminate) {
    box-shadow:
      inset 0 1px 0 0 var(--primary-500),
      inset 0 -2px 4px -1px var(--primary-700),
      0 4px 12px -4px oklch(from var(--primary-800) l c h / 5%);
    border: 1px solid var(--primary-700);
    background: linear-gradient(to bottom, var(--primary-600), var(--primary-700));
  }
  &:where(:checked):where(:hover),
  &:where(:indeterminate):where(:hover) {
    background: linear-gradient(to bottom, var(--primary-500), var(--primary-600));
  }
  &:where(:checked)::after {
    border-width: 0 2px 2px 0;
    border-style: solid;
    border-color: var(--white);
  }
  &:where(:indeterminate)::after {
    border-width: 0 0 2px 0;
    border-style: solid;
    border-color: var(--white);
  }
  &:where(:disabled) {
    box-shadow: none;
    border-color: var(--neutral-200);
    background: var(--neutral-100);
  }
  &:where(:disabled)::after {
    border-color: var(--neutral-400);
  }
  &:where(:checked):where(:disabled),
  &:where(:indeterminate):where(:disabled) {
    box-shadow: none;
    border-color: var(--neutral-500);
    background: var(--neutral-400);
  }
  &:where(:checked):where(:disabled)::after,
  &:where(:indeterminate):where(:disabled)::after {
    border-color: var(--neutral-300);
  }
  &:where([ui-input~="sm"]) {
    border-radius: 3px;
  }
  &:where([ui-input~="sm"]):where(:checked)::after {
    border-width: 0 2px 2px 0;
  }
  &:where([ui-input~="sm"]):where(:indeterminate)::after {
    border-width: 0 0 2px 0;
  }
  &:where([ui-input~="lg"]) {
    border-radius: 5px;
  }
  &:where([ui-input~="lg"]):where(:checked)::after {
    border-width: 0 2px 2px 0;
  }
  &:where([ui-input~="lg"]):where(:indeterminate)::after {
    border-width: 0 0 2px 0;
  }
}

@scope ([ui-theme="dark"]) to ([ui-theme="light"]) {
  :where(input[type="checkbox"]:not([ui-off], [ui-input~="switch"])) {
    box-shadow: inset 0 1px 0 0 var(--neutral-700), inset 0 -2px 4px -1px var(--neutral-950),
      0 4px 8px -4px oklch(from var(--black) l c h / 22%);
    border-color: var(--neutral-700);
    background: linear-gradient(to bottom, var(--neutral-800), var(--neutral-900));
    &:where(:hover) {
      background: linear-gradient(to bottom, var(--neutral-700), var(--neutral-800));
    }
    &:where(:checked), &:where(:indeterminate) {
      border-color: var(--primary-700);
      background: linear-gradient(to bottom, var(--primary-600), var(--primary-700));
    }
    &:where(:checked):where(:hover), &:where(:indeterminate):where(:hover) {
      background: linear-gradient(to bottom, var(--primary-500), var(--primary-600));
    }
    &:where(:disabled) {
      border-color: var(--neutral-800);
      background: var(--neutral-900);
      &:where(:checked), &:where(:indeterminate) {
        border-color: var(--neutral-700);
        background: var(--neutral-800);
      }
    }
  }
  :where(.ui-flex > input[type="checkbox"]:where(:disabled) + label, [ui-row] input[type="checkbox"]:where(:disabled) + label) {
    color: var(--neutral-500);
  }
}

}
@layer theme {
/* src/themes/classic/radio.css */
/* Classic radio: shared/light appearance, then dark overrides. */
:where(.ui-flex > input[type="radio"]:not([ui-off], [ui-input~="switch"])[disabled] + label),
:where([ui-row] input[type="radio"]:not([ui-off], [ui-input~="switch"])[disabled] + label) {
  color: var(--neutral-500);
}
:where(input[type="radio"]:not([ui-off], [ui-input~="switch"])) {
  box-shadow:
    inset 0 1px 0 0 var(--white),
    inset 0 -2px 4px -1px var(--neutral-100),
    0 4px 8px -4px oklch(from var(--black) l c h / 20%);
  border: 1px solid var(--neutral-300);
  border-radius: 50%;
  background: linear-gradient(to bottom, var(--neutral-50), var(--neutral-100));
  &:where(:hover) {
    background: linear-gradient(to bottom, var(--neutral-50), var(--neutral-100));
  }
  &:where(:user-invalid),
  &:where([aria-invalid="true"]) {
    border-color: var(--error-600);
  }
  &:where(:checked) {
    box-shadow:
      inset 0 1px 0 0 var(--primary-500),
      inset 0 -2px 4px -1px var(--primary-700),
      0 4px 12px -4px oklch(from var(--primary-800) l c h / 5%);
    border: 1px solid var(--primary-700);
    background: linear-gradient(to bottom, var(--primary-600), var(--primary-700));
  }
  &:where(:checked:hover) {
    background: linear-gradient(to bottom, var(--primary-500), var(--primary-600));
  }
  &:where(:checked)::after {
    border-radius: 50%;
    background: var(--white);
  }
  &:where(:disabled) {
    box-shadow: none;
    border-color: var(--neutral-200);
    background: var(--neutral-100);
  }
  &:where(:disabled)::after {
    background-color: var(--neutral-400);
  }
  &:where(:checked):where(:disabled) {
    box-shadow: none;
    border-color: var(--neutral-500);
    background: var(--neutral-400);
  }
  &:where(:checked):where(:disabled)::after {
    background-color: var(--neutral-300);
  }
}

@scope ([ui-theme="dark"]) to ([ui-theme="light"]) {
  :where(input[type="radio"]:not([ui-off], [ui-input~="switch"])) {
    box-shadow: inset 0 1px 0 0 var(--neutral-700), inset 0 -2px 4px -1px var(--neutral-950),
      0 4px 8px -4px oklch(from var(--black) l c h / 22%);
    border-color: var(--neutral-700);
    background: linear-gradient(to bottom, var(--neutral-800), var(--neutral-900));
    &:where(:hover) {
      background: linear-gradient(to bottom, var(--neutral-700), var(--neutral-800));
    }
    &:where(:checked) {
      border-color: var(--primary-700);
      background: linear-gradient(to bottom, var(--primary-600), var(--primary-700));
    }
    &:where(:checked):where(:hover) {
      background: linear-gradient(to bottom, var(--primary-500), var(--primary-600));
    }
    &:where(:disabled) {
      border-color: var(--neutral-800);
      background: var(--neutral-900);
      &:where(:checked) {
        border-color: var(--neutral-700);
        background: var(--neutral-800);
      }
    }
  }
  :where(.ui-flex > input[type="radio"]:disabled + label, [ui-row] input[type="radio"]:disabled + label) {
    color: var(--neutral-500);
  }
}

}
@layer theme {
/* src/themes/classic/field.css */
/* Classic field: shared/light appearance, then dark overrides. */
:where([ui-field]) {
  &> :where(label) {
    font-weight: 500;
  }
  &> :where(p:not([role])) {
    color: var(--neutral-600);
  }
  &> :where(p[role="error"]) {
    color: var(--error-700);
  }
  &:where(:has(p[role="error"]):has(:user-invalid, [aria-invalid="true"])) {
    & :where(label) {
      color: var(--error-700);
    }
  }
}

@scope ([ui-theme="dark"]) to ([ui-theme="light"]) {
  :where([ui-field]) {
    &> :where(p:not([role])) {
      color: var(--neutral-400);
    }
    &> :where(p[role="error"]) {
      color: var(--error-300);
    }
    &:where(:has(p[role="error"]):has(:user-invalid, [aria-invalid="true"])) {
      & :where(label) {
        color: var(--error-300);
      }
      &> :where(p[role="error"]) {
        color: var(--error-300);
      }
    }
  }
}

}
@layer theme {
/* src/themes/classic/group.css */
/* Classic segment surfaces; controls retain their own component appearance. */
:where([ui-group] > :is(span, label, a:not([ui-button])):not([ui-off])) {
  border-color: var(--neutral-300);
  border-radius: 8px;
  background: var(--neutral-100);
  color: var(--neutral-800);
}
:where([ui-group] > label:not([ui-off]):has(> input:disabled)) {
  border-color: var(--neutral-200);
  background: var(--neutral-100);
  color: var(--neutral-400);
}
:where([ui-group] > a:not([ui-button], [ui-off])) {
  color: var(--primary-700);

  &:where(:hover) {
    background: var(--neutral-200);
    color: var(--primary-600);
  }
  &:where(:active) {
    background: var(--neutral-300);
    color: var(--primary-500);
  }
}
:where([ui-group~="sm"] > :not([hidden], input[type="hidden"], [ui-menu], [ui-off])),
:where([ui-group~="sm"] > [ui-menu] > button[popovertarget]:not([ui-off])) {
  border-radius: 6px;
}
:where([ui-group~="lg"] > :not([hidden], input[type="hidden"], [ui-menu], [ui-off])),
:where([ui-group~="lg"] > [ui-menu] > button[popovertarget]:not([ui-off])) {
  border-radius: 10px;
}

:where([ui-group] > [hidden]) {
  display: none;
}

/* Repeat the joins after theme control radii have been applied. */
:where([ui-group] > :not([hidden], input[type="hidden"], [ui-off]):not(:nth-child(1 of :not([hidden], input[type="hidden"])))),
:where([ui-group] > [ui-menu]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))) > button[popovertarget]:not([ui-off])) {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
:where([ui-group] > :not([hidden], input[type="hidden"], [ui-off]):has(~ :not([hidden], input[type="hidden"]))),
:where([ui-group] > [ui-menu]:has(~ :not([hidden], input[type="hidden"])) > button[popovertarget]:not([ui-off])) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

@scope ([ui-theme="dark"]) to ([ui-theme="light"]) {
  :where([ui-group] > :is(span, label, a:not([ui-button])):not([ui-off])) {
    border-color: var(--neutral-700);
    background: var(--neutral-800);
    color: var(--neutral-100);
  }
  :where([ui-group] > label:not([ui-off]):has(> input:disabled)) {
    border-color: var(--neutral-800);
    background: var(--neutral-950);
    color: var(--neutral-500);
  }
  :where([ui-group] > a:not([ui-button], [ui-off])) {
    color: var(--primary-300);

    &:where(:hover) {
      background: var(--neutral-700);
      color: var(--primary-200);
    }
    &:where(:active) {
      background: var(--neutral-600);
      color: var(--primary-100);
    }
  }
}

}
@layer theme {
/* src/themes/classic/tabs.css */
/* Classic tabs: shared/light appearance, then dark overrides. */
:where(fieldset[ui-tabs]) {
  border: 0;
  border-radius: .75rem;
  background: var(--neutral-100);
}
:where(fieldset[ui-tabs~="xs"]) {
  border-radius: .5rem;
}
:where(fieldset[ui-tabs] > label) {
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--neutral-600);
  font-weight: 500;
}
:where(fieldset[ui-tabs~="xs"] > label) {
  border-radius: 4px;
}
:where(fieldset[ui-tabs~="sm"] > label) {
  border-radius: 6px;
}
:where(fieldset[ui-tabs~="lg"] > label) {
  border-radius: 10px;
}
:where(fieldset[ui-tabs~="xl"] > label) {
  border-radius: 10px;
}
:where(fieldset[ui-tabs] > input[type="radio"]:checked + label) {
  border-color: var(--neutral-200);
  background: var(--white);
  box-shadow: 0 1px 2px oklch(from var(--black) l c h / 8%);
  color: var(--primary-700);
}
:where(fieldset[ui-tabs] > input[type="radio"]:focus-visible + label) {
  outline: 2px solid var(--primary-600);
  outline-offset: 2px;
}
:where(fieldset[ui-tabs] > input[type="radio"]:disabled + label) {
  color: var(--neutral-500);
}
:where(fieldset[ui-tabs] > input[type="radio"]:checked:disabled + label) {
  border-color: var(--neutral-300);
  background: var(--white);
  box-shadow: none;
  color: var(--neutral-600);
}

@scope ([ui-theme="dark"]) to ([ui-theme="light"]) {
  :where(fieldset[ui-tabs]) {
    background: var(--primary-950);
  }
  :where(fieldset[ui-tabs] > label) {
    color: var(--neutral-300);
  }
  :where(fieldset[ui-tabs] > input[type="radio"]:checked + label) {
    border-color: var(--neutral-700);
    background: var(--neutral-800);
    color: var(--primary-200);
  }
  :where(fieldset[ui-tabs] > input[type="radio"]:disabled + label) {
    color: var(--neutral-500);
  }
  :where(fieldset[ui-tabs] > input[type="radio"]:checked:disabled + label) {
    border-color: var(--neutral-700);
    background: var(--neutral-800);
    color: var(--neutral-500);
  }
}

}
@layer theme {
/* src/themes/classic/shadow.css */
/* Geometry and intensity come from core; Classic supplies the shadow color. */
:where([ui-shadow]) {
  --ui-shadow-color: var(--neutral-700);
  --_ui-shadow-color: oklch(from var(--ui-shadow-color) l calc(c * 1.2) h);
}
:where([ui-shadow~="primary"]) {
  --ui-shadow-color: var(--primary-700);
}
:where([ui-shadow~="error"]) {
  --ui-shadow-color: var(--error-700);
}
:where([ui-shadow~="warning"]) {
  --ui-shadow-color: var(--warning-700);
}
:where([ui-shadow~="success"]) {
  --ui-shadow-color: var(--success-700);
}
:where([ui-shadow~="info"]) {
  --ui-shadow-color: var(--info-700);
}
:where([ui-shadow~="neutral"]) {
  --ui-shadow-color: var(--neutral-700);
}

}