/* Faunder UI paper 0.4.8 */
/* Paper: warm surfaces, quiet controls and editorial typography. Load after core. */
@import url("https://fonts.bunny.net/css?family=dm-sans:400,400i,500,600,700|lora:400,400i,500,600&display=swap");
@layer core, theme;
@layer theme {
/* src/themes/paper/palette.css */
/* Warm paper, charcoal ink, and muted botanical / mineral accents. */
:root {
  --white: oklch(100% 0 0);
  --black: oklch(0% 0 0);
  --neutral-50: oklch(98.6% 0.006 90);
  --neutral-100: oklch(96% 0.009 90);
  --neutral-200: oklch(91.5% 0.012 85);
  --neutral-300: oklch(85% 0.015 85);
  --neutral-400: oklch(71% 0.018 80);
  --neutral-500: oklch(56% 0.018 80);
  --neutral-600: oklch(45% 0.015 80);
  --neutral-700: oklch(35% 0.012 80);
  --neutral-800: oklch(26% 0.009 80);
  --neutral-900: oklch(19% 0.006 80);
  --neutral-950: oklch(14% 0.004 80);
  --primary-50: oklch(98% 0.006 151.982334);
  --primary-100: oklch(94% 0.02 151.982334);
  --primary-200: oklch(87% 0.035 151.982334);
  --primary-300: oklch(79% 0.055 151.982334);
  --primary-400: oklch(69% 0.075 151.982334);
  --primary-500: oklch(55% 0.085 151.982334);
  --primary-600: oklch(49% 0.08 151.982334);
  --primary-700: oklch(39% 0.07 151.982334);
  --primary-800: oklch(30.246921% 0.05919008 151.982334);
  --primary-900: oklch(20% 0.035 151.982334);
  --primary-950: oklch(14% 0.02 151.982334);
  --secondary-50: oklch(98% 0.006 241.610538);
  --secondary-100: oklch(94% 0.018 241.610538);
  --secondary-200: oklch(87% 0.035 241.610538);
  --secondary-300: oklch(79% 0.05 241.610538);
  --secondary-400: oklch(69% 0.07 241.610538);
  --secondary-500: oklch(55% 0.08 241.610538);
  --secondary-600: oklch(49% 0.075 241.610538);
  --secondary-700: oklch(39% 0.065 241.610538);
  --secondary-800: oklch(29.27006% 0.05209012 241.610538);
  --secondary-900: oklch(20% 0.032 241.610538);
  --secondary-950: oklch(14% 0.018 241.610538);
  --error-50: oklch(98% 0.006 30);
  --error-100: oklch(94% 0.018 30);
  --error-200: oklch(87% 0.04 30);
  --error-300: oklch(79% 0.07 30);
  --error-400: oklch(69% 0.11 30);
  --error-500: oklch(59% 0.14 30);
  --error-600: oklch(49% 0.14 30);
  --error-700: oklch(39% 0.11 30);
  --error-800: oklch(29% 0.08 30);
  --error-900: oklch(20% 0.05 30);
  --error-950: oklch(14% 0.03 30);
  --warning-50: oklch(98% 0.012 95);
  --warning-100: oklch(94% 0.035 95);
  --warning-200: oklch(87% 0.06 95);
  --warning-300: oklch(79% 0.085 95);
  --warning-400: oklch(69% 0.105 90);
  --warning-500: oklch(59% 0.11 85);
  --warning-600: oklch(49% 0.095 80);
  --warning-700: oklch(39% 0.075 75);
  --warning-800: oklch(29% 0.055 75);
  --warning-900: oklch(20% 0.035 75);
  --warning-950: oklch(14% 0.02 75);
}

}
@layer theme {
/* src/themes/paper/reset.css */
/* Paper surfaces follow the inherited color mode from core. */
:where(body, [ui-theme="light"], [ui-theme="dark"]) {
  background: light-dark(var(--neutral-50), var(--neutral-950));
  color: light-dark(var(--neutral-900), var(--neutral-100));
  font-family: "DM Sans", sans-serif;
}

}
@layer theme {
/* src/themes/paper/focus.css */
:where(:focus-visible) {
  outline: 2px solid light-dark(var(--primary-600), var(--primary-300));
  outline-offset: 3px;
}

}
@layer theme {
/* src/themes/paper/heading.css */
:where([ui-heading], h1, h2, h3, h4, h5, h6):where(:not([ui-off])) {
  font-family: "Lora", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.025em;
}

}
@layer theme {
/* src/themes/paper/inline.css */
:where(hr:not([ui-off])) {
  background: light-dark(var(--neutral-200), var(--neutral-800));
}
:where(mark:not([ui-off])) {
  background: light-dark(var(--warning-100), var(--warning-800));
  color: light-dark(var(--neutral-900), var(--warning-100));
}
:where(kbd:not([ui-off])) {
  border-color: light-dark(var(--neutral-300), var(--neutral-700));
  border-radius: 3px;
  background: light-dark(var(--neutral-100), var(--neutral-900));
}

}
@layer theme {
/* src/themes/paper/code.css */
/* Paper code: shared mode colors with a softer inverted surface. */
:where(code:not([ui-off]):not(pre > code), pre:not([ui-off]):has(> code)) {
  border-radius: 4px;
  background-color: light-dark(var(--neutral-200), var(--neutral-900));
}
:where(code:not([ui-off]):not(pre > code), pre:not([ui-off]):has(> code)):where([ui-code~="invert"]) {
  background-color: light-dark(var(--neutral-700), var(--neutral-300));
}
:where(code:not([ui-off]):not(pre > code), pre:not([ui-off]):has(> code)):where([ui-code~="darker"]):where(:not([ui-code~="invert"])) {
  background-color: light-dark(var(--neutral-300), var(--neutral-950));
}
:where(code:not([ui-off]):not(pre > code), pre:not([ui-off]):has(> code)):where([ui-code~="lighter"]):where(:not([ui-code~="invert"])) {
  background-color: light-dark(var(--neutral-100), var(--neutral-800));
}
:where(code:not([ui-off]):not(pre > code), pre:not([ui-off]):has(> code)):where([ui-code~="invert"][ui-code~="darker"]) {
  background-color: light-dark(var(--neutral-800), var(--neutral-400));
}
:where(code:not([ui-off]):not(pre > code), pre:not([ui-off]):has(> code)):where([ui-code~="invert"][ui-code~="lighter"]) {
  background-color: light-dark(var(--neutral-600), var(--neutral-200));
}

}
@layer theme {
/* src/themes/paper/link.css */
:where(a:not([ui-off], [ui-button], [ui-card]), [ui-link]:not([ui-off], [ui-button], [ui-card])) {
  color: light-dark(var(--primary-800), var(--primary-200));
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  &:where(:hover) {
    color: light-dark(var(--primary-600), var(--primary-100));
  }
  &:where(:active) {
    color: light-dark(var(--primary-500), var(--primary-50));
  }
  &:where([ui-link~="inherit"]) {
    color: inherit;
    &:where(:hover) {
      color: light-dark(var(--primary-600), var(--primary-100));
    }
    &:where(:active) {
      color: light-dark(var(--primary-500), var(--primary-50));
    }
  }
}

}
@layer theme {
/* src/themes/paper/input.css */
:where(input:not([type]),
  input:is([type="text"],
  [type="email"],
  [type="password"],
  [type="number"],
  [type="url"],
  [type="tel"],
  [type="search"],
  [type="date"],
  [type="datetime"],
  [type="datetime-local"],
  [type="month"],
  [type="week"],
  [type="time"],
  [list="datalist"]),
  textarea,
  select):where(:not([ui-off],
  [ui-button])) {
  border-color: light-dark(var(--neutral-300), var(--neutral-700));
  border-radius: 4px;
  background-color: light-dark(var(--neutral-50), var(--neutral-900));
  color: light-dark(var(--neutral-900), var(--neutral-100));
  &:where(:hover) {
    border-color: var(--neutral-500);
  }
  &:where(:user-invalid, [aria-invalid="true"]) {
    border-color: light-dark(var(--error-600), var(--error-400));
  }
  &:where(:disabled) {
    border-color: light-dark(var(--neutral-200), var(--neutral-800));
    background-color: light-dark(var(--neutral-100), var(--neutral-950));
    color: var(--neutral-500);
  }
  &::placeholder {
    color: var(--neutral-500);
  }
}
:where(input:is([type="checkbox"], [type="radio"])[ui-input~="switch"]:not([ui-off])) {
  border-color: light-dark(var(--neutral-300), var(--neutral-700));
  border-radius: 999px;
  background: light-dark(var(--neutral-200), var(--neutral-800));
  &::before {
    border-radius: 50%;
    background: light-dark(var(--neutral-50), var(--neutral-400));
  }
  &:where(:hover) {
    background: light-dark(var(--neutral-300), var(--neutral-700));
  }
  &:where(:checked) {
    border-color: light-dark(var(--primary-950), var(--primary-800));
    background: var(--primary-950);
    &::before {
      background: var(--neutral-50);
    }
    &:where(:hover) {
      background: var(--primary-900);
    }
  }
  &:where(:user-invalid, [aria-invalid="true"]) {
    border-color: light-dark(var(--error-600), var(--error-400));
  }
  &:where(:disabled) {
    border-color: light-dark(var(--neutral-200), var(--neutral-800));
    background: light-dark(var(--neutral-100), var(--neutral-950));
    &::before {
      background: light-dark(var(--neutral-300), var(--neutral-700));
    }
  }
  &:where(:checked:disabled) {
    background: light-dark(var(--neutral-300), var(--neutral-700));
    &::before {
      background: light-dark(var(--neutral-100), var(--neutral-500));
    }
  }
}

}
@layer theme {
/* src/themes/paper/select.css */
/* Retain core's sizing, arrow and no-repeat positioning in every state. */
:where(select:not([ui-off])) {
  &:where(:disabled) {
    border-color: light-dark(var(--neutral-200), var(--neutral-800));
    background-color: light-dark(var(--neutral-100), var(--neutral-950));
    color: var(--neutral-500);
  }
}

}
@layer theme {
/* src/themes/paper/checkbox.css */
:where(input[type="checkbox"]:not([ui-off], [ui-input~="switch"])) {
  border-color: light-dark(var(--neutral-400), var(--neutral-600));
  border-radius: 3px;
  background: light-dark(var(--neutral-50), var(--neutral-900));
  &:where(:hover) {
    background: light-dark(var(--neutral-100), var(--neutral-800));
  }
  &:where(:checked, :indeterminate) {
    border-color: light-dark(var(--primary-950), var(--primary-800));
    background: var(--primary-950);
    &::after {
      border-color: var(--neutral-50);
    }
    &:where(:hover) {
      background: var(--primary-900);
    }
  }
  &:where(:user-invalid, [aria-invalid="true"]) {
    border-color: light-dark(var(--error-600), var(--error-400));
  }
  &:where(:disabled) {
    border-color: light-dark(var(--neutral-200), var(--neutral-800));
    background: light-dark(var(--neutral-100), var(--neutral-950));
    &::after {
      border-color: light-dark(var(--neutral-400), var(--neutral-500));
    }
  }
  &:where(:disabled):where(:checked, :indeterminate) {
    background: light-dark(var(--neutral-200), var(--neutral-700));
  }
}

}
@layer theme {
/* src/themes/paper/radio.css */
:where(input[type="radio"]:not([ui-off], [ui-input~="switch"])) {
  border-color: light-dark(var(--neutral-400), var(--neutral-600));
  background: light-dark(var(--neutral-50), var(--neutral-900));
  &:where(:hover) {
    background: light-dark(var(--neutral-100), var(--neutral-800));
  }
  &:where(:checked) {
    border-color: light-dark(var(--primary-950), var(--primary-800));
    background: var(--primary-950);
    &::after {
      background: var(--neutral-50);
    }
    &:where(:hover) {
      background: var(--primary-900);
    }
  }
  &:where(:user-invalid, [aria-invalid="true"]) {
    border-color: light-dark(var(--error-600), var(--error-400));
  }
  &:where(:disabled) {
    border-color: light-dark(var(--neutral-200), var(--neutral-800));
    background: light-dark(var(--neutral-100), var(--neutral-950));
    &::after {
      background: light-dark(var(--neutral-400), var(--neutral-500));
    }
  }
  &:where(:checked:disabled) {
    background: light-dark(var(--neutral-200), var(--neutral-700));
  }
}

}
@layer theme {
/* src/themes/paper/accordion.css */
:where([ui-accordion] details) {
  &:where(:not(:first-child)) {
    border-color: light-dark(var(--neutral-200), var(--neutral-800));
  }
  & :where(summary) {
    font-weight: 500;
    &:where([disabled]) {
      color: var(--neutral-500);
    }
  }
}

}
@layer theme {
/* src/themes/paper/card.css */
:where([ui-card]) {
  border-color: light-dark(var(--neutral-200), var(--neutral-800));
  border-radius: 4px;
  background-color: light-dark(var(--neutral-50), var(--neutral-900));
  &:where([ui-card~="neutral"]) {
    background-color: light-dark(var(--neutral-100), var(--neutral-800));
  }
  &:where([ui-card~="outline"]) {
    background-color: transparent;
  }
  &:where(a):hover {
    background-color: light-dark(var(--neutral-100), var(--neutral-800));
  }
  &:where(a[ui-card~="neutral"]):hover {
    background-color: light-dark(var(--neutral-200), var(--neutral-700));
  }
  &:where(a):active {
    background-color: light-dark(var(--neutral-200), var(--neutral-700));
  }
  &:where(a[ui-card~="neutral"]):active {
    background-color: light-dark(var(--neutral-300), var(--neutral-600));
  }
}
:where([ui-card] > :is(img, picture, video, figure):first-child) {
  border-start-start-radius: 3px;
  border-start-end-radius: 3px;
}
:where([ui-card] > :is(img, picture, video, figure):last-child) {
  border-end-start-radius: 3px;
  border-end-end-radius: 3px;
}

}
@layer theme {
/* src/themes/paper/button.css */
:where([ui-button],
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]):where(:not([ui-off],
  [ui-link],
  input[type="checkbox"],
  input[type="radio"])) {
  border-color: light-dark(var(--neutral-300), var(--neutral-700));
  border-radius: 999px;
  background: light-dark(var(--neutral-50), var(--neutral-900));
  color: light-dark(var(--neutral-900), var(--neutral-100));
  @media (hover: hover) {
    &:where(:hover) {
      background: light-dark(var(--neutral-100), var(--neutral-800));
    }
  }
  &:where(:active, :has(:checked)) {
    background: light-dark(var(--neutral-200), var(--neutral-700));
  }
  &:where(:disabled) {
    border-color: light-dark(var(--neutral-200), var(--neutral-800));
    background: light-dark(var(--neutral-100), var(--neutral-950));
    color: var(--neutral-500);
  }
  &:where([aria-busy="true"]) {
    background: light-dark(var(--neutral-100), var(--neutral-800));
    color: transparent;
    &::after {
      background: light-dark(var(--neutral-900), var(--neutral-100));
    }
  }
  &:where([ui-button~="primary"]) {
    border-color: transparent;
    background: light-dark(var(--primary-950), var(--neutral-50));
    color: light-dark(var(--neutral-50), var(--neutral-950));
    @media (hover: hover) {
      &:where(:hover) {
        background: light-dark(var(--primary-900), var(--neutral-100));
      }
    }
    &:where(:active, :has(:checked)) {
      background: light-dark(var(--primary-800), var(--neutral-200));
    }
    &:where(:disabled) {
      border-color: transparent;
      background: light-dark(var(--neutral-300), var(--neutral-700));
      color: light-dark(var(--neutral-600), var(--neutral-400));
    }
    &:where([aria-busy="true"]) {
      background: light-dark(var(--primary-950), var(--neutral-50));
      color: transparent;
      &::after {
        background: light-dark(var(--neutral-50), var(--neutral-950));
      }
    }
  }
  &:where([ui-button~="tertiary"]) {
    border-color: transparent;
    background: transparent;
    @media (hover: hover) {
      &:where(:hover) {
        background: light-dark(var(--neutral-100), var(--neutral-800));
      }
    }
    &:where(:active, :has(:checked)) {
      background: light-dark(var(--neutral-200), var(--neutral-700));
    }
    &:where(:disabled) {
      background: transparent;
    }
    &:where([aria-busy="true"]) {
      background: transparent;
    }
  }
  &:where([ui-button~="square"]) {
    border-radius: 4px;
  }
  &:where([ui-button~="circle"]) {
    border-radius: 50%;
  }
  &:where([ui-button~="inline"]) {
    border-color: transparent;
    border-radius: 0;
    background: transparent;
    @media (hover: hover) {
      &:where(:hover) {
        background: transparent;
        color: light-dark(var(--primary-600), var(--primary-200));
      }
    }
    &:where(:active, :has(:checked)) {
      background: transparent;
      color: light-dark(var(--primary-500), var(--primary-300));
    }
    &:where(:disabled) {
      background: transparent;
      color: var(--neutral-500);
    }
    &:where([aria-busy="true"]) {
      background: transparent;
      color: transparent;
    }
  }
  &:where([ui-button~="darker"]:not([ui-button~="primary"], [ui-button~="tertiary"], [ui-button~="inline"]):not(:disabled, [aria-busy="true"])) {
    border-color: light-dark(var(--neutral-400), var(--neutral-800));
    background: light-dark(var(--neutral-100), var(--neutral-950));
    @media (hover: hover) {
      &:where(:hover) {
        background: light-dark(var(--neutral-200), var(--neutral-900));
      }
    }
    &:where(:active), &:where(:has(:checked)) {
      background: light-dark(var(--neutral-300), var(--neutral-800));
    }
  }
  &:where([ui-button~="lighter"]:not([ui-button~="primary"], [ui-button~="tertiary"], [ui-button~="inline"]):not(:disabled, [aria-busy="true"])) {
    border-color: light-dark(var(--neutral-200), var(--neutral-600));
    background: light-dark(var(--white), var(--neutral-800));
    @media (hover: hover) {
      &:where(:hover) {
        background: light-dark(var(--neutral-50), var(--neutral-700));
      }
    }
    &:where(:active), &:where(:has(:checked)) {
      background: light-dark(var(--neutral-100), var(--neutral-600));
    }
  }
  &:where([ui-button~="primary"][ui-button~="darker"]:not(:disabled, [aria-busy="true"])) {
    background: light-dark(var(--black), var(--neutral-100));
    @media (hover: hover) {
      &:where(:hover) {
        background: light-dark(var(--primary-950), var(--neutral-200));
      }
    }
    &:where(:active), &:where(:has(:checked)) {
      background: light-dark(var(--primary-900), var(--neutral-300));
    }
  }
  &:where([ui-button~="primary"][ui-button~="lighter"]:not(:disabled, [aria-busy="true"])) {
    background: light-dark(var(--primary-900), var(--white));
    @media (hover: hover) {
      &:where(:hover) {
        background: light-dark(var(--primary-800), var(--neutral-50));
      }
    }
    &:where(:active), &:where(:has(:checked)) {
      background: light-dark(var(--primary-700), var(--neutral-100));
    }
  }
  &:where([ui-button~="darker"][ui-button~="tertiary"]):not(:disabled, [aria-busy="true"]) {
    color: light-dark(var(--neutral-950), var(--neutral-200));
    @media (hover: hover) {
      &:where(:hover) {
        background: light-dark(var(--neutral-200), var(--neutral-900));
        color: light-dark(var(--neutral-800), var(--neutral-500));
      }
    }
    &:where(:active), &:where(:has(:checked)) {
      background: light-dark(var(--neutral-300), var(--neutral-800));
      color: light-dark(var(--neutral-800), var(--neutral-500));
    }
  }
  &:where([ui-button~="lighter"][ui-button~="tertiary"]):not(:disabled, [aria-busy="true"]) {
    color: light-dark(var(--neutral-800), var(--white));
    @media (hover: hover) {
      &:where(:hover) {
        background: light-dark(var(--white), var(--neutral-700));
        color: light-dark(var(--neutral-600), var(--neutral-300));
      }
    }
    &:where(:active), &:where(:has(:checked)) {
      background: light-dark(var(--neutral-50), var(--neutral-600));
      color: light-dark(var(--neutral-600), var(--neutral-300));
    }
  }
  &:where([ui-button~="darker"][ui-button~="inline"]):not(:disabled, [aria-busy="true"]) {
    color: light-dark(var(--neutral-950), var(--neutral-200));
    @media (hover: hover) {
      &:where(:hover) {
        color: light-dark(var(--primary-700), var(--primary-300));
      }
    }
    &:where(:active), &:where(:has(:checked)) {
      color: light-dark(var(--primary-600), var(--primary-400));
    }
  }
  &:where([ui-button~="lighter"][ui-button~="inline"]):not(:disabled, [aria-busy="true"]) {
    color: light-dark(var(--neutral-800), var(--white));
    @media (hover: hover) {
      &:where(:hover) {
        color: light-dark(var(--primary-500), var(--primary-100));
      }
    }
    &:where(:active), &:where(:has(:checked)) {
      color: light-dark(var(--primary-400), var(--primary-200));
    }
  }
}

}
@layer theme {
/* src/themes/paper/dialog.css */
:where(dialog[ui-dialog]) {
  border-color: light-dark(var(--neutral-200), var(--neutral-800));
  border-radius: 6px;
  background: light-dark(var(--neutral-50), var(--neutral-900));
  color: light-dark(var(--neutral-900), var(--neutral-100));
  box-shadow: 0 16px 48px -16px oklch(from var(--neutral-950) l c h / 18%);
  &:where([ui-dialog~="edge"]) {
    border-radius: 0;
  }
}
:where(dialog[ui-dialog])::backdrop {
  background: light-dark(oklch(from var(--neutral-950) l c h / 30%), oklch(from var(--black) l c h / 60%));
}

}
@layer theme {
/* src/themes/paper/menu.css */
:where([ui-menu] > [role="menu"]) {
  border-color: light-dark(var(--neutral-200), var(--neutral-800));
  border-radius: 4px;
  background-color: light-dark(var(--neutral-50), var(--neutral-900));
  box-shadow: 0 8px 24px -8px oklch(from var(--neutral-950) l c h / 12%);
}
:where([ui-menu] > [role="menu"] > :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"])) {
  border: none;
  border-radius: 0;
  background: transparent;
  color: light-dark(var(--neutral-900), var(--neutral-100));
  &:where(:hover) {
    background: light-dark(var(--neutral-100), var(--neutral-800));
  }
  &:where(:active) {
    background: light-dark(var(--neutral-200), var(--neutral-700));
  }
  &:where(:disabled) {
    color: var(--neutral-500);
  }
}
:where([ui-menu] > [role="menu"] > hr) {
  border-top-color: light-dark(var(--neutral-200), var(--neutral-800));
}

}
@layer theme {
/* src/themes/paper/field.css */
:where([ui-field] > p:not([role])) {
  color: light-dark(var(--neutral-600), var(--neutral-400));
}
:where([ui-field] > p[role="error"]) {
  color: light-dark(var(--error-600), var(--error-300));
}

}
@layer theme {
/* src/themes/paper/tabs.css */
:where(fieldset[ui-tabs]) {
  border-radius: 999px;
  background: light-dark(var(--neutral-100), var(--neutral-900));
}
:where(fieldset[ui-tabs] > label) {
  border-radius: 999px;
  color: light-dark(var(--neutral-600), var(--neutral-400));
  &:where(:hover) {
    color: light-dark(var(--primary-900), var(--neutral-100));
  }
}
:where(fieldset[ui-tabs] > input[type="radio"]:checked + label) {
  border-color: light-dark(transparent, var(--primary-800));
  background: var(--primary-950);
  color: var(--neutral-50);
}
:where(fieldset[ui-tabs] > input[type="radio"]:focus-visible + label) {
  outline-color: light-dark(var(--primary-600), var(--primary-300));
}
: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: transparent;
  background: light-dark(var(--neutral-200), var(--neutral-700));
  color: light-dark(var(--neutral-600), var(--neutral-400));
}
:where(fieldset[ui-tabs~="darker"]) {
  background: light-dark(var(--neutral-200), var(--neutral-950));
}
:where(fieldset[ui-tabs~="lighter"]) {
  background: light-dark(var(--neutral-50), var(--neutral-800));
}
:where(fieldset[ui-tabs~="darker"] > input[type="radio"]:checked:not(:disabled) + label) {
  border-color: light-dark(transparent, var(--primary-900));
  background: var(--black);
}
:where(fieldset[ui-tabs~="lighter"] > input[type="radio"]:checked:not(:disabled) + label) {
  border-color: light-dark(transparent, var(--primary-700));
  background: var(--primary-900);
}

}
@layer theme {
/* src/themes/paper/group.css */
:where([ui-group] > :is(span, label, a:not([ui-button])):not([ui-off])) {
  border-color: light-dark(var(--neutral-300), var(--neutral-700));
  background: light-dark(var(--neutral-100), var(--neutral-800));
  color: light-dark(var(--neutral-900), var(--neutral-100));
}
:where([ui-group] > a:not([ui-button], [ui-off])) {
  @media (hover: hover) {
    &:where(:hover) {
      background: light-dark(var(--neutral-200), var(--neutral-700));
    }
  }
  &:where(:active) {
    background: light-dark(var(--neutral-300), var(--neutral-600));
  }
}
:where([ui-group] > label:not([ui-off]):has(> input:disabled)) {
  border-color: light-dark(var(--neutral-200), var(--neutral-800));
  background: light-dark(var(--neutral-100), var(--neutral-950));
  color: var(--neutral-500);
}
/* A small outer radius keeps mixed buttons and fields aligned. */
:where([ui-group] > :not([hidden],
  input[type="hidden"],
  [ui-menu],
  [ui-off])),
  :where([ui-group] > [ui-menu] > button[popovertarget]:not([ui-off])) {
  border-radius: 4px;
}
: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;
}

}
@layer theme {
/* src/themes/paper/shadow.css */
/* Geometry and intensity come from core; Paper supplies the shadow color. */
:where([ui-shadow]) {
  --_ui-shadow-color: var(--neutral-800);
}
:where([ui-shadow~="neutral"]) {
  --_ui-shadow-color: var(--neutral-800);
}
: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);
}


}