/*!
 * Pico Reforged v2.0.1 (https://pico.rusticstack.com)
 * Copyright 2019-2024 Lucas Larroche and the Pico CSS authors
 * Copyright 2026 rusticstack
 * Licensed under MIT
 */
@layer pico.tokens {
  :root, :host {
    --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --pico-font-family-sans-serif: "Inter Variable", Inter, "Segoe UI Variable Text", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, var(--pico-font-family-emoji);
    --pico-font-family-monospace: ui-monospace, "Cascadia Code", "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono",
    monospace, var(--pico-font-family-emoji);
    --pico-font-family: var(--pico-font-family-sans-serif);
    --pico-line-height: 1.5;
    --pico-font-weight: 400;
    --pico-font-size: 100%;
    --pico-text-underline-offset: .2em;
    --pico-border-radius: .5rem;
    --pico-border-width: .0625rem;
    --pico-outline-width: .125rem;
    --pico-card-border-radius: calc(var(--pico-border-radius) * 1.5);
    --pico-transition: .15s cubic-bezier(.2, 0, 0, 1);
    --pico-spacing: 1rem;
    --pico-typography-spacing-vertical: 1rem;
    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.25);
    --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.25);
    --pico-grid-column-gap: var(--pico-spacing);
    --pico-grid-row-gap: var(--pico-spacing);
    --pico-form-element-spacing-vertical: .5rem;
    --pico-form-element-spacing-horizontal: .75rem;
    --pico-container-max-width: 100%;
    --pico-button-box-shadow: 0 .0625rem .125rem oklch(0% 0 0 / .08), inset 0 .0625rem 0 oklch(100% 0 0 / .12);
    --pico-button-hover-box-shadow: 0 .125rem .375rem -.0625rem oklch(0% 0 0 / .14), inset 0 .0625rem 0 oklch(100% 0 0 / .12);
    --pico-group-box-shadow: 0 0 0 oklch(0% 0 0 / 0);
    --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-background-color),
    0 0 0 calc(var(--pico-outline-width) * 2) var(--pico-primary-focus);
    --pico-group-box-shadow-focus-with-input: 0 0 0 .1875rem
    color-mix(in oklab, var(--pico-form-element-focus-color) 25%, transparent);
    --pico-form-element-disabled-opacity: .5;
    --pico-loading-spinner-opacity: .5;
    --pico-modal-overlay-backdrop-filter: blur(.375rem);
    --pico-scrollbar-width: 0px;
    --pico-nav-element-spacing-vertical: .75rem;
    --pico-nav-element-spacing-horizontal: .5rem;
    --pico-nav-link-spacing-vertical: .375rem;
    --pico-nav-link-spacing-horizontal: .625rem;
    --pico-nav-breadcrumb-divider: "/";
    --pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255,255,255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255,255,255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
    --pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136,145,164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136,145,164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    --pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136,145,164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
    --pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136,145,164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    --pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136,145,164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
    --pico-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136,145,164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
  }

  @media (width >= 576px) {
    :root, :host {
      --pico-container-max-width: 510px;
    }
  }

  @media (width >= 768px) {
    :root, :host {
      --pico-container-max-width: 700px;
    }
  }

  @media (width >= 1024px) {
    :root, :host {
      --pico-container-max-width: 950px;
    }
  }

  @media (width >= 1280px) {
    :root, :host {
      --pico-container-max-width: 1200px;
    }
  }

  @media (width >= 1536px) {
    :root, :host {
      --pico-font-size: 106.25%;
      --pico-container-max-width: 1450px;
    }
  }

  :root, :host {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    :root, :host {
      --lightningcss-light: ;
      --lightningcss-dark: initial;
    }
  }

  [data-theme="light"] {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light;
  }

  [data-theme="dark"] {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark;
  }

  :root, :host, [data-theme] {
    --pico-background-color: var(--lightningcss-light, oklch(100% 0 0)) var(--lightningcss-dark, oklch(16.5% .006 265));
    --pico-color: var(--lightningcss-light, oklch(27% .012 265)) var(--lightningcss-dark, oklch(92% .005 265));
    --pico-muted-color: var(--lightningcss-light, oklch(50% .016 265)) var(--lightningcss-dark, oklch(71% .012 265));
    --pico-muted-border-color: var(--lightningcss-light, oklch(92.5% .005 265)) var(--lightningcss-dark, oklch(29% .008 265));
    --pico-primary-border: var(--pico-primary-background);
    --pico-primary-hover-border: var(--pico-primary-hover-background);
    --pico-primary-hover-underline: var(--pico-primary-hover);
    --pico-primary-subtle-background: var(--lightningcss-light, color-mix(in oklab, var(--pico-primary) 10%, transparent)) var(--lightningcss-dark, color-mix(in oklab, var(--pico-primary) 20%, transparent));
    --pico-primary-subtle-border: var(--lightningcss-light, color-mix(in oklab, var(--pico-primary) 28%, transparent)) var(--lightningcss-dark, color-mix(in oklab, var(--pico-primary) 40%, transparent));
    --pico-secondary: var(--lightningcss-light, oklch(52.8% .05 265)) var(--lightningcss-dark, oklch(69.8% .027 266));
    --pico-secondary-background: var(--lightningcss-light, oklch(95.5% .004 265)) var(--lightningcss-dark, oklch(27% .008 265));
    --pico-secondary-border: var(--lightningcss-light, oklch(88% .006 265)) var(--lightningcss-dark, oklch(34% .008 265));
    --pico-secondary-underline: var(--lightningcss-light, oklch(52.8% .05 265 / .5)) var(--lightningcss-dark, oklch(69.8% .027 266 / .5));
    --pico-secondary-hover: var(--lightningcss-light, oklch(44.2% .042 266)) var(--lightningcss-dark, oklch(78.5% .018 264));
    --pico-secondary-hover-background: var(--lightningcss-light, oklch(92.5% .005 265)) var(--lightningcss-dark, oklch(31% .008 265));
    --pico-secondary-hover-border: var(--lightningcss-light, oklch(84% .008 265)) var(--lightningcss-dark, oklch(38% .008 265));
    --pico-secondary-hover-underline: var(--pico-secondary-hover);
    --pico-secondary-focus: var(--lightningcss-light, oklch(57% .025 265)) var(--lightningcss-dark, oklch(74% .02 265));
    --pico-secondary-inverse: var(--lightningcss-light, oklch(24% .012 265)) var(--lightningcss-dark, oklch(95% .004 265));
    --pico-contrast: var(--lightningcss-light, oklch(22.7% .019 266)) var(--lightningcss-dark, oklch(91.5% .012 265));
    --pico-contrast-background: var(--lightningcss-light, oklch(22% .012 265)) var(--lightningcss-dark, oklch(93% .005 265));
    --pico-contrast-border: var(--pico-contrast-background);
    --pico-contrast-underline: var(--lightningcss-light, oklch(22.7% .019 266 / .5)) var(--lightningcss-dark, oklch(91.5% .012 265 / .5));
    --pico-contrast-hover: var(--lightningcss-light, oklch(0% 0 0)) var(--lightningcss-dark, oklch(100% 0 0));
    --pico-contrast-hover-background: var(--lightningcss-light, oklch(30% .012 265)) var(--lightningcss-dark, oklch(100% 0 0));
    --pico-contrast-hover-border: var(--pico-contrast-hover-background);
    --pico-contrast-hover-underline: var(--lightningcss-light, var(--pico-secondary-hover)) var(--lightningcss-dark, var(--pico-contrast-hover));
    --pico-contrast-focus: var(--lightningcss-light, oklch(22% .012 265)) var(--lightningcss-dark, oklch(93% .005 265));
    --pico-contrast-inverse: var(--lightningcss-light, oklch(100% 0 0)) var(--lightningcss-dark, oklch(16.5% .006 265));
    --pico-box-shadow: 0 0 0 .0625rem var(--lightningcss-light, oklch(20% .02 265 / .07)) var(--lightningcss-dark, oklch(100% 0 0 / .1)), 0 .0625rem .125rem 0 var(--lightningcss-light, oklch(20% .02 265 / .05)) var(--lightningcss-dark, oklch(0% 0 0 / .3)), 0 .25rem .75rem -.25rem var(--lightningcss-light, oklch(20% .02 265 / .08)) var(--lightningcss-dark, oklch(0% 0 0 / .35));
    --pico-h1-color: var(--lightningcss-light, oklch(20% .012 265)) var(--lightningcss-dark, oklch(97% .004 265));
    --pico-h2-color: var(--lightningcss-light, oklch(20% .012 265)) var(--lightningcss-dark, oklch(97% .004 265));
    --pico-h3-color: var(--lightningcss-light, oklch(20% .012 265)) var(--lightningcss-dark, oklch(97% .004 265));
    --pico-h4-color: var(--lightningcss-light, oklch(20% .012 265)) var(--lightningcss-dark, oklch(97% .004 265));
    --pico-h5-color: var(--lightningcss-light, oklch(27% .012 265)) var(--lightningcss-dark, oklch(92% .005 265));
    --pico-h6-color: var(--lightningcss-light, oklch(40% .014 265)) var(--lightningcss-dark, oklch(80% .008 265));
    --pico-mark-background-color: var(--lightningcss-light, oklch(93.45% .0562 81.9)) var(--lightningcss-dark, oklch(35.6% .083 241.5));
    --pico-mark-color: var(--lightningcss-light, oklch(17.7% .007 258)) var(--lightningcss-dark, oklch(100% 0 0));
    --pico-ins-color: var(--lightningcss-light, oklch(47.03% .0817 170.23)) var(--lightningcss-dark, oklch(69.8% .083 174));
    --pico-del-color: var(--lightningcss-light, oklch(45% .11 25)) var(--lightningcss-dark, oklch(67.7% .1 22));
    --pico-blockquote-border-color: var(--pico-muted-border-color);
    --pico-blockquote-footer-color: var(--pico-muted-color);
    --pico-table-border-color: var(--pico-muted-border-color);
    --pico-table-row-stripped-background-color: var(--lightningcss-light, oklch(50% .01 265 / .035)) var(--lightningcss-dark, oklch(100% 0 0 / .05));
    --pico-code-background-color: var(--lightningcss-light, oklch(96.7% .003 265)) var(--lightningcss-dark, oklch(21.5% .007 265));
    --pico-code-color: var(--lightningcss-light, oklch(36% .014 265)) var(--lightningcss-dark, oklch(80% .01 265));
    --pico-code-kbd-background-color: var(--pico-color);
    --pico-code-kbd-color: var(--pico-background-color);
    --pico-form-element-background-color: var(--lightningcss-light, oklch(100% 0 0)) var(--lightningcss-dark, oklch(19.5% .007 265));
    --pico-form-element-selected-background-color: var(--lightningcss-light, oklch(95.5% .004 265)) var(--lightningcss-dark, oklch(27% .008 265));
    --pico-form-element-border-color: var(--lightningcss-light, oklch(66% .012 265)) var(--lightningcss-dark, oklch(52% .01 265));
    --pico-form-element-color: var(--lightningcss-light, oklch(20% .012 265)) var(--lightningcss-dark, oklch(95% .004 265));
    --pico-form-element-placeholder-color: var(--pico-muted-color);
    --pico-form-element-active-background-color: var(--lightningcss-light, oklch(100% 0 0)) var(--lightningcss-dark, oklch(21% .007 265));
    --pico-form-element-active-border-color: var(--pico-primary-focus);
    --pico-form-element-focus-color: var(--pico-primary-focus);
    --pico-form-element-invalid-border-color: var(--lightningcss-light, oklch(61% .1 19.58)) var(--lightningcss-dark, oklch(50.45% .1014 16.42));
    --pico-form-element-invalid-active-border-color: var(--lightningcss-light, oklch(58.7% .156 26.3)) var(--lightningcss-dark, oklch(53.8% .1559 25.93));
    --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
    --pico-form-element-valid-border-color: var(--lightningcss-light, oklch(63.3% .0822 177.5)) var(--lightningcss-dark, oklch(53% .0798 181.5));
    --pico-form-element-valid-active-border-color: var(--lightningcss-light, oklch(61.1% .112 168.13)) var(--lightningcss-dark, oklch(56.24% .1078 168.51));
    --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
    --pico-switch-background-color: var(--lightningcss-light, oklch(66% .012 265)) var(--lightningcss-dark, oklch(52% .01 265));
    --pico-switch-checked-background-color: var(--pico-primary-background);
    --pico-switch-color: oklch(100% 0 0);
    --pico-range-border-color: var(--lightningcss-light, oklch(90% .006 265)) var(--lightningcss-dark, oklch(38% .008 265));
    --pico-range-active-border-color: var(--lightningcss-light, oklch(85% .008 265)) var(--lightningcss-dark, oklch(44% .008 265));
    --pico-range-thumb-border-color: var(--pico-background-color);
    --pico-range-thumb-color: var(--pico-primary-background);
    --pico-range-thumb-active-color: var(--pico-primary-background);
    --pico-accordion-border-color: var(--pico-muted-border-color);
    --pico-accordion-active-summary-color: var(--pico-primary-hover);
    --pico-accordion-close-summary-color: var(--pico-color);
    --pico-accordion-open-summary-color: var(--pico-color);
    --pico-card-background-color: var(--lightningcss-light, var(--pico-background-color)) var(--lightningcss-dark, oklch(21.5% .007 265));
    --pico-card-border-color: var(--lightningcss-light, var(--pico-muted-border-color)) var(--lightningcss-dark, oklch(32% .008 265));
    --pico-card-box-shadow: var(--pico-box-shadow);
    --pico-card-sectioning-background-color: var(--lightningcss-light, oklch(98.5% .002 265)) var(--lightningcss-dark, oklch(24% .008 265));
    --pico-dropdown-background-color: var(--lightningcss-light, oklch(100% 0 0)) var(--lightningcss-dark, oklch(23.5% .008 265));
    --pico-dropdown-border-color: var(--lightningcss-light, oklch(92% .005 265)) var(--lightningcss-dark, oklch(32% .008 265));
    --pico-dropdown-box-shadow: 0 0 0 .0625rem var(--lightningcss-light, oklch(20% .02 265 / .07)) var(--lightningcss-dark, oklch(100% 0 0 / .1)), 0 .125rem .25rem -.0625rem var(--lightningcss-light, oklch(20% .02 265 / .06)) var(--lightningcss-dark, oklch(0% 0 0 / .3)), 0 .75rem 2rem -.5rem var(--lightningcss-light, oklch(20% .02 265 / .18)) var(--lightningcss-dark, oklch(0% 0 0 / .5));
    --pico-dropdown-color: var(--pico-color);
    --pico-dropdown-hover-background-color: var(--lightningcss-light, oklch(96.5% .004 265)) var(--lightningcss-dark, oklch(29% .008 265));
    --pico-modal-overlay-background-color: var(--lightningcss-light, oklch(20% .02 265 / .4)) var(--lightningcss-dark, oklch(0% 0 0 / .6));
    --pico-progress-background-color: var(--lightningcss-light, oklch(92.5% .005 265)) var(--lightningcss-dark, oklch(27% .008 265));
    --pico-progress-color: var(--pico-primary-background);
    --pico-tooltip-background-color: var(--lightningcss-light, oklch(24% .012 265)) var(--lightningcss-dark, oklch(30% .01 265));
    --pico-tooltip-color: var(--lightningcss-light, oklch(100% 0 0)) var(--lightningcss-dark, oklch(95% .004 265));
  }

  :root, :host, [data-theme="light"] {
    --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76,154.5,137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200.25,79.25,72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  }

  [data-theme="dark"] {
    --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42,123,111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5,74,80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]), :host(:not([data-theme="light"])) {
      --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42,123,111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
      --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5,74,80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
    }
  }

  :root, :host, [data-theme="light"] {
    --_pico-secondary-icon-filter: brightness(0);
    --_pico-contrast-icon-filter: brightness(0) invert(1);
  }

  [data-theme="dark"] {
    --_pico-secondary-icon-filter: brightness(0) invert(1);
    --_pico-contrast-icon-filter: brightness(0);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]), :host(:not([data-theme="light"])) {
      --_pico-secondary-icon-filter: brightness(0) invert(1);
      --_pico-contrast-icon-filter: brightness(0);
    }
  }

  details summary[role="button"]:not(.outline):after, [aria-busy="true"]:not(input, select, textarea):is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
    filter: brightness(0) invert();
  }
}

@layer pico.theme {
  :root, :host, [data-theme] {
    --pico-text-selection-color: var(--lightningcss-light, oklch(67% .127 304.6 / .25)) var(--lightningcss-dark, oklch(71.2% .11 305 / .1875));
    --pico-primary: var(--lightningcss-light, oklch(54.9% .174 300.4)) var(--lightningcss-dark, oklch(71.2% .11 305));
    --pico-primary-background: oklch(50.4% .189 298.5);
    --pico-primary-underline: var(--lightningcss-light, oklch(54.9% .174 300.4 / .5)) var(--lightningcss-dark, oklch(71.2% .11 305 / .5));
    --pico-primary-hover: var(--lightningcss-light, oklch(46.7% .188 297.5)) var(--lightningcss-dark, oklch(79.4% .079 307));
    --pico-primary-hover-background: var(--lightningcss-light, oklch(46.7% .188 297.5)) var(--lightningcss-dark, oklch(54.9% .174 300.4));
    --pico-primary-focus: var(--lightningcss-light, oklch(59% .158 302.2)) var(--lightningcss-dark, oklch(71.2% .11 305));
    --pico-primary-inverse: oklch(100% 0 0);
    --pico-switch-thumb-box-shadow: 0 .0625rem .125rem 0 oklch(0% 0 0 / .2);
  }
}

@layer pico.core {
  *, :before, :after {
    box-sizing: border-box;
    background-repeat: no-repeat;
  }

  :before, :after {
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
    vertical-align: inherit;
  }

  :where(:root), :where(:host) {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background-color: var(--pico-background-color);
    color: var(--pico-color);
    font-weight: var(--pico-font-weight);
    font-size: var(--pico-font-size);
    line-height: var(--pico-line-height);
    font-family: var(--pico-font-family);
    text-underline-offset: var(--pico-text-underline-offset);
    text-rendering: optimizelegibility;
    overflow-wrap: break-word;
    tab-size: 4;
  }

  :where([data-theme]) {
    color: var(--pico-color);
  }

  body {
    width: 100%;
    margin: 0;
  }

  main {
    display: block;
  }

  body > header, body > main, body > footer {
    padding-block: var(--pico-block-spacing-vertical);
  }

  section {
    margin-bottom: var(--pico-block-spacing-vertical);
  }

  body > header, body > main, body > footer {
    width: 100%;
    padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
    max-width: var(--pico-container-max-width);
    margin-inline: auto;
  }

  @media (width >= 576px) {
    body > header, body > main, body > footer {
      padding-inline: 0;
    }
  }

  small {
    --pico-font-size: .875em;
  }

  h1, h2, h3, h4, h5, h6 {
    --pico-font-weight: 600;
  }

  h1 {
    --pico-font-size: 2.25rem;
    --pico-line-height: 1.15;
    letter-spacing: -.025em;
    --pico-typography-spacing-top: 3rem;
    --pico-color: var(--pico-h1-color);
  }

  h2 {
    --pico-font-size: 1.75rem;
    --pico-line-height: 1.2;
    letter-spacing: -.02em;
    --pico-typography-spacing-top: 2.625rem;
    --pico-color: var(--pico-h2-color);
  }

  h3 {
    --pico-font-size: 1.375rem;
    --pico-line-height: 1.3;
    letter-spacing: -.015em;
    --pico-typography-spacing-top: 2.25rem;
    --pico-color: var(--pico-h3-color);
  }

  h4 {
    --pico-font-size: 1.125rem;
    --pico-line-height: 1.4;
    letter-spacing: -.01em;
    --pico-typography-spacing-top: 1.874rem;
    --pico-color: var(--pico-h4-color);
  }

  h5 {
    --pico-font-size: 1rem;
    --pico-line-height: 1.5;
    --pico-typography-spacing-top: 1.6875rem;
    --pico-color: var(--pico-h5-color);
  }

  h6 {
    --pico-font-size: .875rem;
    --pico-line-height: 1.5;
    --pico-typography-spacing-top: 1.5rem;
    --pico-color: var(--pico-h6-color);
  }

  b, strong {
    font-weight: bolder;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: .75em;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  address, blockquote, dl, ol, p, pre, table, ul {
    margin-top: 0;
    margin-bottom: var(--pico-typography-spacing-vertical);
    color: var(--pico-color);
    font-style: normal;
    font-weight: var(--pico-font-weight);
  }

  h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: var(--pico-typography-spacing-vertical);
    color: var(--pico-color);
    font-weight: var(--pico-font-weight);
    font-size: var(--pico-font-size);
    line-height: var(--pico-line-height);
    font-family: var(--pico-font-family);
    text-wrap: balance;
  }

  :where(p, li, figcaption, blockquote) {
    text-wrap: pretty;
  }

  :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
    margin-top: var(--pico-typography-spacing-top);
  }

  p, hgroup {
    margin-bottom: var(--pico-typography-spacing-vertical);
  }

  hgroup > * {
    margin-top: 0;
    margin-bottom: 0;
  }

  hgroup > :not(:first-child):last-child {
    --pico-color: var(--pico-muted-color);
    --pico-font-weight: unset;
    font-size: 1rem;
  }

  :where(ol, ul) li {
    margin-bottom: calc(var(--pico-typography-spacing-vertical) * .25);
  }

  :where(dl, ol, ul) :where(dl, ol, ul) {
    margin: 0;
    margin-top: calc(var(--pico-typography-spacing-vertical) * .25);
  }

  ul li {
    list-style: outside;
  }

  :where(ul, ol) li::marker {
    color: var(--pico-muted-color);
  }

  mark {
    background-color: var(--pico-mark-background-color);
    color: var(--pico-mark-color);
    vertical-align: baseline;
    padding: .125rem .25rem;
  }

  blockquote {
    margin: var(--pico-typography-spacing-vertical) 0;
    padding: var(--pico-spacing);
    border-inline-start: .25rem solid var(--pico-blockquote-border-color);
    border-inline-end: none;
    display: block;
  }

  blockquote footer {
    margin-top: calc(var(--pico-typography-spacing-vertical) * .5);
    color: var(--pico-blockquote-footer-color);
  }

  abbr[title] {
    cursor: help;
    border-bottom: 1px dotted;
    text-decoration: none;
  }

  ins {
    color: var(--pico-ins-color);
    text-decoration: none;
  }

  del {
    color: var(--pico-del-color);
  }

  ::selection {
    background-color: var(--pico-text-selection-color);
  }

  a {
    --pico-text-decoration: underline;
  }

  :where(a:not([role="button"])), [role="link"] {
    --pico-color: var(--pico-primary);
    --pico-background-color: transparent;
    --pico-underline: var(--pico-primary-underline);
    background-color: var(--pico-background-color);
    color: var(--pico-color);
    -webkit-text-decoration: var(--pico-text-decoration);
    text-decoration: var(--pico-text-decoration);
    -webkit-text-decoration-color: var(--pico-underline);
    text-decoration-color: var(--pico-underline);
    text-underline-offset: var(--pico-text-underline-offset);
    transition: background-color var(--pico-transition),
    color var(--pico-transition),
    text-decoration var(--pico-transition),
    box-shadow var(--pico-transition);
    outline: none;
    text-decoration-thickness: .0625rem;
  }

  :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
    --pico-color: var(--pico-primary-hover);
    --pico-underline: var(--pico-primary-hover-underline);
    --pico-text-decoration: underline;
  }

  :where(a:not([role="button"])):focus-visible, [role="link"]:focus-visible {
    outline: var(--pico-outline-width) solid var(--pico-primary-focus);
    outline-offset: var(--pico-outline-width);
  }

  a[role="button"] {
    display: inline-block;
  }

  button {
    text-transform: none;
    margin: 0;
    font-family: inherit;
    overflow: visible;
  }

  button, [type="submit"], [type="reset"], [type="button"] {
    appearance: button;
  }

  button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
    --pico-background-color: var(--pico-primary-background);
    --pico-border-color: var(--pico-primary-border);
    --pico-color: var(--pico-primary-inverse);
    --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 transparent);
    --pico-font-weight: 500;
    padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
    border: var(--pico-border-width) solid var(--pico-border-color);
    border-radius: var(--pico-border-radius);
    background-color: var(--pico-background-color);
    box-shadow: var(--pico-box-shadow);
    color: var(--pico-color);
    font-weight: var(--pico-font-weight);
    font-size: 1rem;
    line-height: var(--pico-line-height);
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color var(--pico-transition),
    border-color var(--pico-transition),
    color var(--pico-transition),
    box-shadow var(--pico-transition),
    transform var(--pico-transition);
    outline: none;
    text-decoration: none;
  }

  [type="file"]::file-selector-button {
    --pico-background-color: var(--pico-primary-background);
    --pico-border-color: var(--pico-primary-border);
    --pico-color: var(--pico-primary-inverse);
    --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 transparent);
    --pico-font-weight: 500;
    padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
    border: var(--pico-border-width) solid var(--pico-border-color);
    border-radius: var(--pico-border-radius);
    background-color: var(--pico-background-color);
    box-shadow: var(--pico-box-shadow);
    color: var(--pico-color);
    font-weight: var(--pico-font-weight);
    font-size: 1rem;
    line-height: var(--pico-line-height);
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color var(--pico-transition),
    border-color var(--pico-transition),
    color var(--pico-transition),
    box-shadow var(--pico-transition),
    transform var(--pico-transition);
    outline: none;
    text-decoration: none;
  }

  button[aria-current]:not([aria-current="false"]), button:is(:hover, :active, :focus), [type="submit"][aria-current]:not([aria-current="false"]), [type="submit"]:is(:hover, :active, :focus), [type="reset"][aria-current]:not([aria-current="false"]), [type="reset"]:is(:hover, :active, :focus), [type="button"][aria-current]:not([aria-current="false"]), [type="button"]:is(:hover, :active, :focus), [role="button"][aria-current]:not([aria-current="false"]), [role="button"]:is(:hover, :active, :focus) {
    --pico-background-color: var(--pico-primary-hover-background);
    --pico-border-color: var(--pico-primary-hover-border);
    --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 transparent);
    --pico-color: var(--pico-primary-inverse);
  }

  [type="file"]::file-selector-button:is(:hover, :active, :focus) {
    --pico-background-color: var(--pico-primary-hover-background);
    --pico-border-color: var(--pico-primary-hover-border);
    --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 transparent);
    --pico-color: var(--pico-primary-inverse);
  }

  button:focus-visible, [type="submit"]:focus-visible, [type="reset"]:focus-visible, [type="button"]:focus-visible, [role="button"]:focus-visible {
    outline: var(--pico-outline-width) solid var(--pico-primary-focus);
    outline-offset: var(--pico-outline-width);
  }

  button:active, [type="submit"]:active, [type="reset"]:active, [type="button"]:active, [role="button"]:active {
    box-shadow: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    button:active, [type="submit"]:active, [type="reset"]:active, [type="button"]:active, [role="button"]:active {
      transform: scale(.98);
    }
  }

  [type="submit"], [type="reset"], [type="button"] {
    margin-bottom: var(--pico-spacing);
  }

  [type="reset"] {
    --pico-background-color: var(--pico-secondary-background);
    --pico-border-color: var(--pico-secondary-border);
    --pico-color: var(--pico-secondary-inverse);
    cursor: pointer;
  }

  [type="file"]::file-selector-button {
    --pico-background-color: var(--pico-secondary-background);
    --pico-border-color: var(--pico-secondary-border);
    --pico-color: var(--pico-secondary-inverse);
    cursor: pointer;
  }

  [type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
    --pico-background-color: var(--pico-secondary-hover-background);
    --pico-border-color: var(--pico-secondary-hover-border);
    --pico-color: var(--pico-secondary-inverse);
  }

  [type="file"]::file-selector-button:is(:hover, :active, :focus) {
    --pico-background-color: var(--pico-secondary-hover-background);
    --pico-border-color: var(--pico-secondary-hover-border);
    --pico-color: var(--pico-secondary-inverse);
  }

  [type="reset"]:focus-visible {
    outline-color: var(--pico-secondary-focus);
  }

  :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled], :where([role="button"][aria-disabled="true"]), :where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
    opacity: .5;
    pointer-events: none;
  }

  :is(button, [type="submit"], [type="reset"], [type="button"], [role="button"]):not(.outline):is([disabled], [role="button"][aria-disabled="true"], :where(fieldset[disabled]) *) {
    --pico-background-color: var(--pico-secondary-background);
    --pico-border-color: var(--pico-secondary-background);
    --pico-color: var(--pico-muted-color);
    --pico-box-shadow: none;
    opacity: .7;
  }

  :is(button, [type="submit"], [type="reset"], [type="button"], [role="button"]):not(.outline):is([disabled], [role="button"][aria-disabled="true"], :where(fieldset[disabled]) *):before {
    filter: var(--_pico-secondary-icon-filter);
  }

  :is(thead, tfoot) th, :is(thead, tfoot) td {
    --pico-font-weight: 500;
  }

  thead :where(th, td) {
    --pico-color: var(--pico-muted-color);
    font-size: .875em;
  }

  :where(table) {
    border-collapse: collapse;
    border-spacing: 0;
    text-indent: 0;
    width: 100%;
  }

  th, td {
    padding: calc(var(--pico-spacing) * .625) var(--pico-spacing);
    border-bottom: var(--pico-border-width) solid var(--pico-table-border-color);
    background-color: var(--pico-background-color);
    color: var(--pico-color);
    font-weight: var(--pico-font-weight);
    text-align: start;
  }

  td {
    font-variant-numeric: tabular-nums;
  }

  article :where(th, td) {
    background-color: #0000;
  }

  tfoot th, tfoot td {
    border-top: var(--pico-border-width) solid var(--pico-table-border-color);
    border-bottom: 0;
  }

  table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) td {
    background-color: var(--pico-table-row-stripped-background-color);
  }

  :where(audio, canvas, iframe, img, svg, video) {
    vertical-align: middle;
  }

  audio, video {
    display: inline-block;
  }

  :where(video, canvas, iframe) {
    max-inline-size: 100%;
  }

  :where(video, canvas) {
    block-size: auto;
  }

  audio:not([controls]) {
    height: 0;
    display: none;
  }

  :where(iframe) {
    border-style: none;
  }

  img {
    border-style: none;
    max-width: 100%;
    height: auto;
  }

  :where(svg:not([fill])) {
    fill: currentColor;
  }

  svg:not(:root), svg:not(:host) {
    overflow: hidden;
  }

  pre, code, kbd, samp {
    --pico-font-family: var(--pico-font-family-monospace);
    border-radius: var(--pico-border-radius);
    background: var(--pico-code-background-color);
    color: var(--pico-code-color);
    font-weight: var(--pico-font-weight);
    font-size: .875em;
    font-family: var(--pico-font-family);
    line-height: initial;
  }

  kbd {
    --pico-font-weight: 500;
  }

  pre code, pre samp {
    font-size: inherit;
    font-family: inherit;
  }

  code, kbd, samp {
    border-radius: calc(var(--pico-border-radius) * .75);
    line-height: inherit;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: .125em .25em;
    display: inline;
  }

  pre {
    margin-bottom: var(--pico-spacing);
    display: block;
    overflow: auto;
  }

  pre > code, pre > samp {
    padding: var(--pico-spacing);
    line-height: var(--pico-line-height);
    background: none;
    display: block;
  }

  kbd {
    background-color: var(--pico-code-kbd-background-color);
    color: var(--pico-code-kbd-color);
    vertical-align: baseline;
    padding: .2em .45em;
  }

  figure {
    margin: 0;
    padding: 0;
    display: block;
  }

  figure figcaption {
    padding: calc(var(--pico-spacing) * .5) 0;
    color: var(--pico-muted-color);
  }

  hr {
    height: 0;
    margin: var(--pico-typography-spacing-vertical) 0;
    border: 0;
    border-top: 1px solid var(--pico-muted-border-color);
    color: inherit;
  }

  [hidden], template {
    display: none !important;
  }

  canvas {
    display: inline-block;
  }

  :root, :host {
    --pico-form-label-font-weight: 500;
  }

  input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :where(select, textarea) {
    --pico-outline-width: .1875rem;
  }

  input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
    --pico-form-element-focus-color: var(--pico-primary-focus);
  }

  input, optgroup, select, textarea {
    font-size: 1rem;
    line-height: var(--pico-line-height);
    letter-spacing: inherit;
    margin: 0;
    font-family: inherit;
  }

  input {
    overflow: visible;
  }

  select {
    text-transform: none;
  }

  legend {
    max-width: 100%;
    color: inherit;
    white-space: normal;
    padding: 0;
  }

  textarea {
    overflow: auto;
  }

  [type="checkbox"], [type="radio"] {
    padding: 0;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [type="search"] {
    appearance: textfield;
    outline-offset: -2px;
  }

  [type="search"]::-webkit-search-decoration {
    appearance: none;
  }

  ::file-selector-button {
    font: inherit;
  }

  ::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }

  :-moz-focusring {
    outline: none;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  [type="file"], [type="range"] {
    border-width: 0;
    padding: 0;
  }

  input:not([type="checkbox"], [type="radio"], [type="range"]) {
    block-size: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 +
      var(--pico-border-width) * 2);
  }

  fieldset {
    inline-size: 100%;
    margin: 0;
    border: 0;
    margin-block-end: var(--pico-spacing);
    padding: 0;
  }

  label, fieldset legend {
    color: var(--pico-color);
    font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
    margin-block-end: calc(var(--pico-spacing) * .375);
    display: block;
  }

  fieldset legend {
    margin-block-end: calc(var(--pico-spacing) * .5);
  }

  input:not([type="checkbox"], [type="radio"]), button[type="submit"], select, textarea {
    inline-size: 100%;
  }

  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), select, textarea {
    appearance: none;
    padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
  }

  input, select, textarea {
    --pico-background-color: var(--pico-form-element-background-color);
    --pico-border-color: var(--pico-form-element-border-color);
    --pico-color: var(--pico-form-element-color);
    --pico-box-shadow: none;
    border: var(--pico-border-width) solid var(--pico-border-color);
    border-radius: var(--pico-border-radius);
    background-color: var(--pico-background-color);
    box-shadow: var(--pico-box-shadow);
    color: var(--pico-color);
    font-weight: var(--pico-font-weight);
    transition: background-color var(--pico-transition),
    border-color var(--pico-transition),
    color var(--pico-transition),
    box-shadow var(--pico-transition);
    outline: none;
  }

  input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"])[readonly], textarea[readonly] {
    --pico-background-color: var(--pico-form-element-selected-background-color);
    --pico-border-color: var(--pico-form-element-border-color);
  }

  input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus), :where(select, textarea):not([readonly]):is(:active, :focus) {
    --pico-background-color: var(--pico-form-element-active-background-color);
  }

  input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(:active, :focus), :where(select, textarea):not([readonly]):is(:active, :focus) {
    --pico-border-color: var(--pico-form-element-active-border-color);
  }

  input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [readonly]):focus, :where(select, textarea):not([readonly]):focus {
    --pico-box-shadow: 0 0 0 var(--pico-outline-width)
    color-mix(in oklab, var(--pico-form-element-focus-color) 25%, transparent);
  }

  :where(input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"]), select, textarea):hover:not(:focus, [readonly], :disabled, [aria-invalid]) {
    --pico-border-color: color-mix(in oklab,
    var(--pico-form-element-border-color),
    var(--pico-color) 30%);
  }

  input:not([type="submit"], [type="button"], [type="reset"])[disabled], select[disabled], textarea[disabled], label[aria-disabled="true"], :where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
    opacity: var(--pico-form-element-disabled-opacity);
    pointer-events: none;
  }

  label[aria-disabled="true"] input[disabled] {
    opacity: 1;
  }

  :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid] {
    background-position: right .75rem center;
    background-repeat: no-repeat;
    background-size: 1rem;
    padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
    padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
  }

  :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="false"]:not(select) {
    background-image: var(--pico-icon-valid);
  }

  :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="true"]:not(select) {
    background-image: var(--pico-icon-invalid);
  }

  :where(input, select, textarea)[aria-invalid="false"] {
    --pico-border-color: var(--pico-form-element-valid-border-color);
  }

  :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) {
    --pico-border-color: var(--pico-form-element-valid-active-border-color) !important;
  }

  :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
    --pico-box-shadow: 0 0 0 var(--pico-outline-width)
          color-mix(in oklab, var(--pico-form-element-valid-focus-color) 25%, transparent) !important;
  }

  :where(input, select, textarea)[aria-invalid="true"] {
    --pico-border-color: var(--pico-form-element-invalid-border-color);
  }

  :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) {
    --pico-border-color: var(--pico-form-element-invalid-active-border-color) !important;
  }

  :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
    --pico-box-shadow: 0 0 0 var(--pico-outline-width)
          color-mix(in oklab, var(--pico-form-element-invalid-focus-color) 25%, transparent) !important;
  }

  [dir="rtl"] :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
    background-position: .75rem;
  }

  input::placeholder, textarea::placeholder, select:invalid {
    color: var(--pico-form-element-placeholder-color);
    opacity: 1;
  }

  input:not([type="checkbox"], [type="radio"]), select, textarea {
    margin-block-end: var(--pico-spacing);
  }

  select:not([multiple], [size]) {
    background-image: var(--pico-icon-chevron);
    background-position: right .75rem center;
    background-repeat: no-repeat;
    background-size: 1rem;
    padding-inline-start: var(--pico-form-element-spacing-horizontal);
    padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
  }

  select[multiple] option:checked {
    background: color-mix(in oklab, var(--pico-primary-background) 14%, transparent);
    color: var(--pico-color);
  }

  [dir="rtl"] select:not([multiple], [size]) {
    background-position: .75rem;
  }

  textarea {
    resize: vertical;
    display: block;
  }

  textarea[aria-invalid] {
    --pico-icon-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 +
        var(--pico-border-width) * 2);
    background-position: right .75rem top !important;
    background-size: 1rem var(--pico-icon-height) !important;
  }

  :where(input, select, textarea, fieldset) + small {
    inline-size: 100%;
    color: var(--pico-muted-color);
    font-weight: var(--pico-font-weight);
    margin-block-start: calc(var(--pico-spacing) * -.75);
    margin-block-end: var(--pico-spacing);
    display: block;
  }

  :where(input, select, textarea, fieldset)[aria-invalid="false"] + small {
    color: var(--pico-ins-color);
    font-weight: 500;
  }

  :where(input, select, textarea, fieldset)[aria-invalid="true"] + small {
    color: var(--pico-del-color);
    font-weight: 500;
  }

  label > :where(input, select, textarea) {
    margin-block-start: calc(var(--pico-spacing) * .25);
  }

  [type="checkbox"], [type="radio"] {
    --pico-border-width: .125rem;
  }

  [type="checkbox"][role="switch"] {
    --pico-border-width: .1875rem;
  }

  label:has([type="checkbox"], [type="radio"]) {
    inline-size: fit-content;
    font-weight: var(--pico-font-weight);
    cursor: pointer;
  }

  [type="checkbox"], [type="radio"] {
    appearance: none;
    border-width: var(--pico-border-width);
    border-radius: calc(var(--pico-border-radius) * .5);
    vertical-align: middle;
    cursor: pointer;
    block-size: 1.25em;
    inline-size: 1.25em;
    transition: background-color var(--pico-transition),
    border-color var(--pico-transition),
    background-size var(--pico-transition),
    box-shadow var(--pico-transition);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 0;
    margin-block-start: -.125em;
    margin-inline-end: .5em;
  }

  :is([type="checkbox"], [type="radio"]):checked, :is([type="checkbox"], [type="radio"]):checked:active, :is([type="checkbox"], [type="radio"]):checked:focus {
    --pico-background-color: var(--pico-primary-background);
    --pico-border-color: var(--pico-primary-border);
    background-image: var(--pico-icon-checkbox);
    background-position: center;
    background-repeat: no-repeat;
    background-size: .75em;
  }

  :is([type="checkbox"], [type="radio"]):focus-visible {
    outline: var(--pico-outline-width) solid var(--pico-primary-focus);
    outline-offset: var(--pico-outline-width);
  }

  :is([type="checkbox"], [type="radio"]) ~ label {
    font-weight: var(--pico-font-weight);
    cursor: pointer;
    margin-block-end: 0;
    display: inline-block;
  }

  :is([type="checkbox"], [type="radio"]) ~ label:not(:last-of-type) {
    margin-inline-end: 1em;
  }

  [type="checkbox"]:indeterminate {
    --pico-background-color: var(--pico-primary-background);
    --pico-border-color: var(--pico-primary-border);
    background-image: var(--pico-icon-minus);
    background-position: center;
    background-repeat: no-repeat;
    background-size: .75em;
  }

  [type="radio"] {
    border-radius: 50%;
  }

  [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
    --pico-background-color: var(--pico-primary-inverse);
    background-image: none;
    border-width: .35em;
  }

  [type="checkbox"][role="switch"] {
    --pico-background-color: var(--pico-switch-background-color);
    --pico-color: var(--pico-switch-color);
    border: var(--pico-border-width) solid var(--pico-border-color);
    background-color: var(--pico-background-color);
    border-radius: 1.25em;
    block-size: 1.25em;
    inline-size: 2.25em;
    line-height: 1.25em;
  }

  [type="checkbox"][role="switch"]:not([aria-invalid]) {
    --pico-border-color: var(--pico-switch-background-color);
  }

  [type="checkbox"][role="switch"]:before {
    aspect-ratio: 1;
    background-color: var(--pico-color);
    block-size: 100%;
    box-shadow: var(--pico-switch-thumb-box-shadow);
    content: "";
    transition: margin var(--pico-transition);
    border-radius: 50%;
    display: block;
  }

  [type="checkbox"][role="switch"]:focus {
    --pico-background-color: var(--pico-switch-background-color);
    --pico-border-color: var(--pico-switch-background-color);
  }

  [type="checkbox"][role="switch"]:checked {
    --pico-background-color: var(--pico-switch-checked-background-color);
    --pico-border-color: var(--pico-switch-checked-background-color);
    background-image: none;
  }

  [type="checkbox"][role="switch"]:checked:before {
    margin-inline-start: 1em;
  }

  [type="checkbox"][role="switch"][disabled] {
    --pico-background-color: var(--pico-border-color);
  }

  [type="checkbox"][aria-invalid="false"]:checked, [type="checkbox"][aria-invalid="false"]:checked:active, [type="checkbox"][aria-invalid="false"]:checked:focus, [type="checkbox"][role="switch"][aria-invalid="false"]:checked, [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active, [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
    --pico-background-color: var(--pico-form-element-valid-border-color);
  }

  [type="checkbox"]:checked[aria-invalid="true"], [type="checkbox"]:checked:active[aria-invalid="true"], [type="checkbox"]:checked:focus[aria-invalid="true"], [type="checkbox"][role="switch"]:checked[aria-invalid="true"], [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"], [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
    --pico-background-color: var(--pico-form-element-invalid-border-color);
  }

  [type="checkbox"][aria-invalid="false"]:checked, [type="checkbox"][aria-invalid="false"]:checked:active, [type="checkbox"][aria-invalid="false"]:checked:focus, [type="radio"][aria-invalid="false"]:checked, [type="radio"][aria-invalid="false"]:checked:active, [type="radio"][aria-invalid="false"]:checked:focus, [type="checkbox"][role="switch"][aria-invalid="false"]:checked, [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active, [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
    --pico-border-color: var(--pico-form-element-valid-border-color);
  }

  [type="checkbox"]:checked[aria-invalid="true"], [type="checkbox"]:checked:active[aria-invalid="true"], [type="checkbox"]:checked:focus[aria-invalid="true"], [type="radio"]:checked[aria-invalid="true"], [type="radio"]:checked:active[aria-invalid="true"], [type="radio"]:checked:focus[aria-invalid="true"], [type="checkbox"][role="switch"]:checked[aria-invalid="true"], [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"], [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
    --pico-border-color: var(--pico-form-element-invalid-border-color);
  }

  input[type="color"] {
    cursor: pointer;
    inline-size: 3rem;
    padding: .25rem;
    display: block;
  }

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

  input[type="color"]::-moz-focus-inner {
    padding: 0;
  }

  input[type="color"]::-webkit-color-swatch {
    border-radius: calc(var(--pico-border-radius) * .75);
    border: 0;
  }

  input[type="color"]::-moz-color-swatch {
    border-radius: calc(var(--pico-border-radius) * .75);
    border: 0;
  }

  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
    --pico-icon-position: .75rem;
    --pico-icon-width: 1rem;
    background-image: var(--pico-icon-date);
    background-position: center right var(--pico-icon-position);
    background-size: var(--pico-icon-width) auto;
    background-repeat: no-repeat;
    padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
  }

  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="time"] {
    background-image: var(--pico-icon-time);
  }

  :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"])::-webkit-calendar-picker-indicator {
    inline-size: var(--pico-icon-width);
    opacity: 0;
    margin-inline-start: var(--pico-icon-position);
    margin-inline-end: calc(var(--pico-icon-width) * -1);
  }

  @supports ((-moz-appearance: none)) {
    :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
      background-image: none !important;
      padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
    }
  }

  [dir="rtl"] :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
    text-align: right;
  }

  [dir="rtl"] input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
    background-position: center left var(--pico-icon-position);
  }

  [type="file"] {
    --pico-color: var(--pico-muted-color);
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
  }

  [type="file"]::file-selector-button {
    padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
    margin-block: 0;
    margin-inline: 0 .75rem;
  }

  [type="file"]:is(:hover, :active, :focus)::file-selector-button {
    --pico-background-color: var(--pico-secondary-hover-background);
    --pico-border-color: var(--pico-secondary-hover-border);
  }

  [type="file"]:focus-visible::file-selector-button {
    outline: var(--pico-outline-width) solid var(--pico-secondary-focus);
    outline-offset: var(--pico-outline-width);
  }

  [type="range"] {
    appearance: none;
    background: none;
    block-size: 1.25rem;
    inline-size: 100%;
  }

  [type="range"]::-webkit-slider-runnable-track {
    background-color: var(--pico-range-border-color);
    block-size: .375rem;
    inline-size: 100%;
    transition: background-color var(--pico-transition),
      box-shadow var(--pico-transition);
    border-radius: 1rem;
  }

  [type="range"]::-moz-range-track {
    background-color: var(--pico-range-border-color);
    block-size: .375rem;
    inline-size: 100%;
    transition: background-color var(--pico-transition),
      box-shadow var(--pico-transition);
    border-radius: 1rem;
  }

  [type="range"]::-moz-range-progress {
    background-color: var(--pico-primary-background);
    border-radius: 1rem;
    block-size: .375rem;
  }

  [type="range"]::-webkit-slider-thumb {
    appearance: none;
    border: 2px solid var(--pico-range-thumb-border-color);
    background-color: var(--pico-range-thumb-color);
    cursor: pointer;
    block-size: 1.25rem;
    inline-size: 1.25rem;
    transition: background-color var(--pico-transition),
      transform var(--pico-transition);
    border-radius: 50%;
    margin-block-start: -.4375rem;
    box-shadow: 0 1px 2px oklch(0% 0 0 / .2);
  }

  [type="range"]::-moz-range-thumb {
    appearance: none;
    border: 2px solid var(--pico-range-thumb-border-color);
    background-color: var(--pico-range-thumb-color);
    cursor: pointer;
    block-size: 1.25rem;
    inline-size: 1.25rem;
    transition: background-color var(--pico-transition),
      transform var(--pico-transition);
    border-radius: 50%;
    margin-block-start: -.4375rem;
    box-shadow: 0 1px 2px oklch(0% 0 0 / .2);
  }

  [type="range"]:active, [type="range"]:focus-within {
    --pico-range-border-color: var(--pico-range-active-border-color);
    --pico-range-thumb-color: var(--pico-range-thumb-active-color);
  }

  [type="range"]:focus-visible::-webkit-slider-thumb {
    outline: var(--pico-outline-width) solid var(--pico-primary-focus);
    outline-offset: var(--pico-outline-width);
  }

  [type="range"]:focus-visible::-moz-range-thumb {
    outline: var(--pico-outline-width) solid var(--pico-primary-focus);
    outline-offset: var(--pico-outline-width);
  }

  [type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.25);
  }

  [type="range"]:active::-moz-range-thumb {
    transform: scale(1.25);
  }

  [type="search"] {
    --pico-border-radius: 5rem;
  }

  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
    background-image: var(--pico-icon-search);
    background-position: center left calc(var(--pico-form-element-spacing-horizontal) + .125rem);
    background-repeat: no-repeat;
    background-size: 1rem;
    padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);
  }

  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
    background-position: 1.125rem, right .75rem center;
    padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important;
  }

  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="false"] {
    background-image: var(--pico-icon-search), var(--pico-icon-valid);
  }

  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="true"] {
    background-image: var(--pico-icon-search), var(--pico-icon-invalid);
  }

  [dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
    background-position: right 1.125rem center;
  }

  [dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
    background-position: right 1.125rem center, .75rem;
  }

  details {
    margin-bottom: var(--pico-spacing);
    display: block;
  }

  details summary {
    cursor: pointer;
    transition: color var(--pico-transition);
    font-weight: 500;
    line-height: 1rem;
    list-style-type: none;
  }

  details summary:not([role]) {
    color: var(--pico-accordion-close-summary-color);
  }

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

  details summary::marker {
    display: none;
  }

  details summary:after {
    float: right;
    background-image: var(--pico-icon-chevron);
    content: "";
    width: 1rem;
    height: 1rem;
    transition: transform var(--pico-transition);
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: 1rem;
    margin-inline-start: calc(var(--pico-spacing, 1rem) * .5);
    display: block;
    transform: rotate(0);
  }

  details summary:focus {
    outline: none;
  }

  details summary:focus-visible:not([role]) {
    outline: var(--pico-outline-width) solid var(--pico-primary-focus);
    outline-offset: calc(var(--pico-spacing, 1rem) * .5);
    color: var(--pico-accordion-active-summary-color);
  }

  details summary[role="button"] {
    text-align: start;
    width: 100%;
  }

  details summary[role="button"]:after {
    height: calc(1rem * var(--pico-line-height, 1.5));
  }

  details[open] > summary {
    margin-bottom: var(--pico-spacing);
  }

  details[open] > summary:not([role]):not(:focus) {
    color: var(--pico-accordion-open-summary-color);
  }

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

  :where(details:not(.dropdown):has( > summary:not([role]))) {
    border-block-end: var(--pico-border-width) solid var(--pico-accordion-border-color);
    padding-block-end: var(--pico-spacing);
  }

  [dir="rtl"] details summary {
    text-align: right;
  }

  [dir="rtl"] details summary:after {
    float: left;
    background-position: 0;
  }

  @supports (interpolate-size: allow-keywords) and selector(::details-content) {
    @media (prefers-reduced-motion: no-preference) {
      details:not(.dropdown) {
        interpolate-size: allow-keywords;
      }

      details:not(.dropdown)::details-content {
        block-size: 0;
        transition: block-size var(--pico-transition),
          content-visibility var(--pico-transition) allow-discrete;
        overflow-y: clip;
      }

      details:not(.dropdown)[open]::details-content {
        block-size: auto;
        animation: accordion-clip var(--pico-transition);
        overflow-y: visible;
      }

      details:not(.dropdown) > summary:not([role]) {
        transition: color var(--pico-transition),
          margin-bottom var(--pico-transition);
      }

      @keyframes accordion-clip {
        from, to {
          overflow-y: clip;
        }
      }
    }
  }

  article {
    margin-bottom: var(--pico-block-spacing-vertical);
    padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
    border-radius: var(--pico-card-border-radius);
    background: var(--pico-card-background-color);
    box-shadow: var(--pico-card-box-shadow);
  }

  article > header, article > footer {
    margin-inline: calc(var(--pico-block-spacing-horizontal) * -1);
    padding: calc(var(--pico-block-spacing-vertical) * .66) var(--pico-block-spacing-horizontal);
    background-color: var(--pico-card-sectioning-background-color);
  }

  article > header {
    margin-top: calc(var(--pico-block-spacing-vertical) * -1);
    margin-bottom: var(--pico-block-spacing-vertical);
    border-bottom: var(--pico-border-width) solid var(--pico-card-border-color);
    border-start-start-radius: var(--pico-card-border-radius);
    border-start-end-radius: var(--pico-card-border-radius);
  }

  article > footer {
    margin-top: var(--pico-block-spacing-vertical);
    margin-bottom: calc(var(--pico-block-spacing-vertical) * -1);
    border-top: var(--pico-border-width) solid var(--pico-card-border-color);
    border-end-end-radius: var(--pico-card-border-radius);
    border-end-start-radius: var(--pico-card-border-radius);
  }

  [role="search"] {
    --pico-border-radius: 5rem;
  }

  [role="search"], [role="group"] {
    width: 100%;
    margin-bottom: var(--pico-spacing);
    border-radius: var(--pico-border-radius);
    box-shadow: var(--pico-group-box-shadow, 0 0 0 transparent);
    vertical-align: middle;
    transition: box-shadow var(--pico-transition);
    display: inline-flex;
    position: relative;
  }

  :is([role="search"], [role="group"]) > *, :is([role="search"], [role="group"]) input:not([type="checkbox"], [type="radio"]), :is([role="search"], [role="group"]) select {
    flex: auto;
    margin-bottom: 0;
    position: relative;
  }

  :is([role="search"], [role="group"]) > :not(:first-child), :is([role="search"], [role="group"]) input:not([type="checkbox"], [type="radio"]):not(:first-child), :is([role="search"], [role="group"]) select:not(:first-child) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    margin-inline-start: 0;
  }

  :is([role="search"], [role="group"]) > :not(:last-child), :is([role="search"], [role="group"]) input:not([type="checkbox"], [type="radio"]):not(:last-child), :is([role="search"], [role="group"]) select:not(:last-child) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }

  :is([role="search"], [role="group"]) > :focus, :is([role="search"], [role="group"]) input:not([type="checkbox"], [type="radio"]):focus, :is([role="search"], [role="group"]) select:focus {
    z-index: 2;
  }

  :is([role="search"], [role="group"]) button:not(:first-child), :is([role="search"], [role="group"]) [type="submit"]:not(:first-child), :is([role="search"], [role="group"]) [type="reset"]:not(:first-child), :is([role="search"], [role="group"]) [type="button"]:not(:first-child), :is([role="search"], [role="group"]) [role="button"]:not(:first-child), :is([role="search"], [role="group"]) input:not([type="checkbox"], [type="radio"]):not(:first-child), :is([role="search"], [role="group"]) select:not(:first-child) {
    margin-inline-start: calc(var(--pico-border-width) * -1);
  }

  :is([role="search"], [role="group"]) button, :is([role="search"], [role="group"]) [type="submit"], :is([role="search"], [role="group"]) [type="reset"], :is([role="search"], [role="group"]) [type="button"], :is([role="search"], [role="group"]) [role="button"] {
    width: auto;
  }

  :is([role="search"], [role="group"]) button, :is([role="search"], [role="group"]) [type="submit"], :is([role="search"], [role="group"]) [type="button"], :is([role="search"], [role="group"]) [role="button"] {
    --pico-form-element-spacing-horizontal: 2rem;
  }

  :is([role="search"], [role="group"]) :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) + :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) {
    border-inline-start-color: color-mix(in oklab, currentColor 20%, transparent);
  }

  :is([role="search"], [role="group"]):has(button:focus-visible, [type="submit"]:focus-visible, [type="button"]:focus-visible, [role="button"]:focus-visible) {
    --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button);
  }

  :is([role="search"], [role="group"]):has(button:focus-visible, [type="submit"]:focus-visible, [type="button"]:focus-visible, [role="button"]:focus-visible) input:not([type="checkbox"], [type="radio"]), :is([role="search"], [role="group"]):has(button:focus-visible, [type="submit"]:focus-visible, [type="button"]:focus-visible, [role="button"]:focus-visible) select {
    border-color: #0000;
  }

  :is([role="search"], [role="group"]):has(input:not([type="submit"], [type="button"]):focus, select:focus) {
    --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input);
  }

  :is([role="search"], [role="group"]):has(input:not([type="submit"], [type="button"]):focus, select:focus) button, :is([role="search"], [role="group"]):has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], :is([role="search"], [role="group"]):has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], :is([role="search"], [role="group"]):has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
    --pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border);
    --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width)
        var(--pico-primary-hover-border);
  }

  :is([role="search"], [role="group"]) button:focus, :is([role="search"], [role="group"]) [type="submit"]:focus, :is([role="search"], [role="group"]) [type="reset"]:focus, :is([role="search"], [role="group"]) [type="button"]:focus, :is([role="search"], [role="group"]) [role="button"]:focus {
    box-shadow: none;
    outline: none;
  }

  [role="search"] > :first-child {
    border-start-start-radius: 5rem;
    border-end-start-radius: 5rem;
  }

  [role="search"] > :last-child {
    border-start-end-radius: 5rem;
    border-end-end-radius: 5rem;
  }

  [aria-busy="true"]:not(input, select, textarea, html, form) {
    white-space: nowrap;
  }

  [aria-busy="true"]:not(input, select, textarea, html, form):before {
    background-image: var(--pico-icon-loading);
    content: "";
    vertical-align: -.125em;
    background-repeat: no-repeat;
    background-size: 1em;
    width: 1em;
    height: 1em;
    display: inline-block;
  }

  [aria-busy="true"]:not(input, select, textarea, html, form):not(:empty):before {
    margin-inline-end: calc(var(--pico-spacing) * .5);
  }

  [aria-busy="true"]:not(input, select, textarea, html, form):empty {
    text-align: center;
  }

  button[aria-busy="true"], [type="submit"][aria-busy="true"], [type="button"][aria-busy="true"], [type="reset"][aria-busy="true"], [role="button"][aria-busy="true"], a[aria-busy="true"] {
    pointer-events: none;
  }

  dialog {
    z-index: 999;
    width: inherit;
    min-width: 100%;
    height: inherit;
    min-height: 100%;
    -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
    backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
    background-color: var(--pico-modal-overlay-background-color);
    color: var(--pico-color);
    border: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
    position: fixed;
    inset: 0;
  }

  dialog > article {
    --pico-block-spacing-vertical: 1.5rem;
    --pico-block-spacing-horizontal: 1.5rem;
    --pico-card-background-color: var(--pico-dropdown-background-color);
    --pico-card-box-shadow: var(--pico-dropdown-box-shadow);
    --pico-card-sectioning-background-color: transparent;
    width: 100%;
    max-height: calc(100vh - var(--pico-spacing) * 2);
    margin: var(--pico-spacing);
    border-radius: calc(var(--pico-card-border-radius) * 4 / 3);
    overflow: auto;
  }

  @media (width >= 576px) {
    dialog > article {
      max-width: 510px;
    }
  }

  @media (width >= 768px) {
    dialog > article {
      max-width: 700px;
    }
  }

  dialog > article > header > * {
    margin-bottom: 0;
  }

  dialog > article > header :is(a, button)[rel="prev"] {
    float: right;
    float: inline-end;
    margin: -.25rem 0;
    margin-inline-start: var(--pico-spacing);
    padding: 0;
  }

  dialog > article > footer {
    text-align: end;
  }

  dialog > article > footer button, dialog > article > footer [role="button"] {
    width: auto;
    margin-bottom: 0;
  }

  dialog > article > footer button:not(:first-of-type), dialog > article > footer [role="button"]:not(:first-of-type) {
    margin-inline-start: calc(var(--pico-spacing) * .5);
  }

  dialog > article :is(a, button)[rel="prev"] {
    width: 2rem;
    height: 2rem;
    margin-top: calc(var(--pico-spacing) * -.5);
    margin-bottom: calc(var(--pico-spacing) * .5);
    border-radius: var(--pico-border-radius);
    background-image: var(--pico-icon-close);
    box-shadow: none;
    opacity: .6;
    transition: opacity var(--pico-transition),
        background-color var(--pico-transition);
    background-color: #0000;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 1rem;
    border: none;
    margin-inline-start: auto;
    padding: 0;
    display: block;
  }

  dialog > article :is(a, button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
    background-color: color-mix(in oklab, var(--pico-color) 8%, transparent);
    opacity: 1;
  }

  dialog:not([open]), dialog[open="false"] {
    display: none;
  }

  @supports (transition-behavior: allow-discrete) {
    @media (prefers-reduced-motion: no-preference) {
      html:not(.modal-is-open, .modal-is-opening, .modal-is-closing) dialog {
        transition: background-color .2s ease-out,
          backdrop-filter .2s ease-out,
          overlay .2s allow-discrete,
          display .2s allow-discrete;
      }

      html:not(.modal-is-open, .modal-is-opening, .modal-is-closing) dialog:not([open]) {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: #0000;
      }

      html:not(.modal-is-open, .modal-is-opening, .modal-is-closing) dialog > article {
        transition: transform .15s cubic-bezier(.2, 0, 0, 1), opacity .15s cubic-bezier(.2, 0, 0, 1);
      }

      html:not(.modal-is-open, .modal-is-opening, .modal-is-closing) dialog:not([open]) > article {
        opacity: 0;
        transform: scale(.96);
      }

      @starting-style {
        html:not(.modal-is-open, .modal-is-opening, .modal-is-closing) dialog[open] {
          -webkit-backdrop-filter: none;
          backdrop-filter: none;
          background-color: #0000;
        }

        html:not(.modal-is-open, .modal-is-opening, .modal-is-closing) dialog[open] > article {
          opacity: 0;
          transform: scale(.96);
        }
      }
    }
  }

  :where(nav li):before {
    float: left;
    content: "​";
  }

  nav, nav ul {
    display: flex;
  }

  nav {
    justify-content: space-between;
    row-gap: calc(var(--pico-spacing) / 2);
    flex-wrap: wrap;
    overflow: visible;
  }

  nav ol, nav ul {
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0;
    padding: 0;
    list-style: none;
  }

  :is(nav ol, nav ul):first-of-type {
    margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
  }

  :is(nav ol, nav ul):last-of-type {
    margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
  }

  nav li {
    --_nav-color: var(--pico-color);
    padding: var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal);
    margin: 0;
    display: inline-block;
  }

  nav li :where(a, [role="link"]) {
    margin: calc(var(--pico-nav-link-spacing-vertical) * -1)
      calc(var(--pico-nav-link-spacing-horizontal) * -1);
    display: inline-block;
  }

  nav li :where(a, [role="link"]):not(:hover) {
    text-decoration: none;
  }

  nav li :where(a:not([role="button"]), [role="link"]) {
    padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal);
    border-radius: var(--pico-border-radius);
  }

  nav li :where(a:not([role="button"]), [role="link"]):hover {
    background-color: color-mix(in oklab, var(--pico-color) 6%, transparent);
  }

  nav li :where(a:not([role="button"]), [role="link"])[aria-current]:not([aria-current="false"]) {
    color: var(--_nav-color);
    font-weight: 500;
  }

  nav li button, nav li [role="button"], nav li [type="button"], nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), nav li select {
    height: auto;
    margin-inline: inherit;
    padding-block: var(--pico-form-element-spacing-vertical);
    margin-bottom: 0;
  }

  nav li button, nav li [role="button"], nav li [type="button"], nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="search"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
    padding-inline: var(--pico-nav-link-spacing-horizontal);
  }

  nav li input[type="search"] {
    padding-inline-end: var(--pico-nav-link-spacing-horizontal);
  }

  nav li input:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
    padding-left: var(--pico-nav-link-spacing-horizontal);
  }

  nav[aria-label="breadcrumb"] {
    justify-content: start;
    align-items: center;
  }

  nav[aria-label="breadcrumb"] ul li:not(:first-child) {
    margin-inline-start: var(--pico-nav-link-spacing-horizontal);
  }

  nav[aria-label="breadcrumb"] ul li a {
    margin: calc(var(--pico-nav-link-spacing-vertical) * -1) 0;
    margin-inline-start: calc(var(--pico-nav-link-spacing-horizontal) * -1);
  }

  nav[aria-label="breadcrumb"] ul li:not(:last-child):after {
    width: calc(var(--pico-nav-link-spacing-horizontal) * 4);
    margin: 0 calc(var(--pico-nav-link-spacing-horizontal) * -1);
    content: var(--pico-nav-breadcrumb-divider);
    color: var(--pico-muted-color);
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
    position: absolute;
  }

  nav[aria-label="breadcrumb"] a[aria-current]:not([aria-current="false"]) {
    color: inherit;
    pointer-events: none;
    background-color: #0000;
    text-decoration: none;
  }

  aside nav, aside ol, aside ul, aside li {
    display: block;
  }

  aside li {
    padding: calc(var(--pico-nav-element-spacing-vertical) * .5)
    var(--pico-nav-element-spacing-horizontal);
  }

  aside li a {
    display: block;
  }

  aside li [role="button"] {
    margin: inherit;
  }

  [dir="rtl"] nav[aria-label="breadcrumb"] ul li:not(:last-child) :after {
    content: "\\";
  }

  progress {
    appearance: none;
    width: 100%;
    height: .5rem;
    margin-bottom: calc(var(--pico-spacing) * .5);
    background-color: var(--pico-progress-background-color);
    color: var(--pico-progress-color);
    vertical-align: baseline;
    accent-color: var(--pico-primary);
    border: 0;
    border-radius: 1rem;
    display: inline-block;
    overflow: hidden;
  }

  progress::-webkit-progress-bar {
    border-radius: inherit;
    background: none;
  }

  progress[value]::-webkit-progress-value {
    border-radius: inherit;
    background-color: var(--pico-progress-color);
    transition: inline-size var(--pico-transition);
  }

  progress::-moz-progress-bar {
    border-radius: inherit;
    background-color: var(--pico-progress-color);
  }

  @media (prefers-reduced-motion: no-preference) {
    progress:indeterminate {
      background: var(--pico-progress-background-color)
      linear-gradient(to right,
        var(--pico-progress-color) 40%,
        var(--pico-progress-background-color) 40%)
      top left / 150% 150% no-repeat;
      animation: 1.2s cubic-bezier(.65, 0, .35, 1) infinite progress-indeterminate;
    }

    progress:indeterminate[value]::-webkit-progress-value {
      background-color: #0000;
    }

    progress:indeterminate::-moz-progress-bar {
      background-color: #0000;
    }

    [dir="rtl"] progress:indeterminate {
      animation-direction: reverse;
    }
  }

  @keyframes progress-indeterminate {
    0% {
      background-position: 200% 0;
    }

    100% {
      background-position: -200% 0;
    }
  }

  [data-tooltip] {
    position: relative;
  }

  [data-tooltip]:not(a, button, input, [role="button"]) {
    -webkit-text-decoration: underline dashed var(--pico-muted-color);
    text-decoration: underline dashed var(--pico-muted-color);
    text-underline-offset: var(--pico-text-underline-offset);
    cursor: help;
  }

  [data-tooltip][data-placement="top"]:before, [data-tooltip][data-placement="top"]:after, [data-tooltip]:before, [data-tooltip]:after {
    z-index: 99;
    border-radius: calc(var(--pico-border-radius) * .75);
    background: var(--pico-tooltip-background-color);
    box-shadow: var(--pico-dropdown-box-shadow);
    content: attr(data-tooltip);
    color: var(--pico-tooltip-color);
    font-size: .8125rem;
    font-style: normal;
    font-weight: 500;
    line-height: var(--pico-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    padding: .375rem .625rem;
    text-decoration: none;
    display: block;
    position: absolute;
    bottom: 100%;
    left: 50%;
    overflow: hidden;
    transform: translate(-50%, -.25rem);
  }

  [data-tooltip][data-placement="top"]:after, [data-tooltip]:after {
    box-shadow: none;
    content: "";
    color: var(--pico-tooltip-background-color);
    background-color: #0000;
    border-top: .3rem solid;
    border-left: .3rem solid #0000;
    border-right: .3rem solid #0000;
    border-radius: 0;
    padding: 0;
    transform: translate(-50%);
  }

  [data-tooltip][data-placement="bottom"]:before, [data-tooltip][data-placement="bottom"]:after {
    top: 100%;
    bottom: auto;
    transform: translate(-50%, .25rem);
  }

  [data-tooltip][data-placement="bottom"]:after {
    border: .3rem solid #0000;
    border-bottom-color: currentColor;
    transform: translate(-50%, -.3rem);
  }

  [data-tooltip][data-placement="left"]:before, [data-tooltip][data-placement="left"]:after {
    inset: 50% 100% auto auto;
    transform: translate(-.25rem, -50%);
  }

  [data-tooltip][data-placement="left"]:after {
    border: .3rem solid #0000;
    border-left-color: currentColor;
    transform: translate(.3rem, -50%);
  }

  [data-tooltip][data-placement="right"]:before, [data-tooltip][data-placement="right"]:after {
    inset: 50% auto auto 100%;
    transform: translate(.25rem, -50%);
  }

  [data-tooltip][data-placement="right"]:after {
    border: .3rem solid #0000;
    border-right-color: currentColor;
    transform: translate(-.3rem, -50%);
  }

  [data-tooltip]:focus:before, [data-tooltip]:focus:after, [data-tooltip]:hover:before, [data-tooltip]:hover:after {
    opacity: 1;
  }

  @media (hover: hover) and (pointer: fine) {
    [data-tooltip]:focus:before, [data-tooltip]:focus:after, [data-tooltip]:hover:before, [data-tooltip]:hover:after {
      --pico-tooltip-slide-to: translate(-50%, -.25rem);
      opacity: 0;
      animation-name: tooltip-slide;
      animation-duration: .2s;
      animation-fill-mode: forwards;
      transform: translate(-50%, .75rem);
    }

    [data-tooltip]:focus:after, [data-tooltip]:hover:after {
      --pico-tooltip-caret-slide-to: translate(-50%, 0rem);
      animation-name: tooltip-caret-slide;
      transform: translate(-50%, -.25rem);
    }

    [data-tooltip][data-placement="bottom"]:focus:before, [data-tooltip][data-placement="bottom"]:focus:after, [data-tooltip][data-placement="bottom"]:hover:before, [data-tooltip][data-placement="bottom"]:hover:after {
      --pico-tooltip-slide-to: translate(-50%, .25rem);
      animation-name: tooltip-slide;
      transform: translate(-50%, -.75rem);
    }

    [data-tooltip][data-placement="bottom"]:focus:after, [data-tooltip][data-placement="bottom"]:hover:after {
      --pico-tooltip-caret-slide-to: translate(-50%, -.3rem);
      animation-name: tooltip-caret-slide;
      transform: translate(-50%, -.5rem);
    }

    [data-tooltip][data-placement="left"]:focus:before, [data-tooltip][data-placement="left"]:focus:after, [data-tooltip][data-placement="left"]:hover:before, [data-tooltip][data-placement="left"]:hover:after {
      --pico-tooltip-slide-to: translate(-.25rem, -50%);
      animation-name: tooltip-slide;
      transform: translate(.75rem, -50%);
    }

    [data-tooltip][data-placement="left"]:focus:after, [data-tooltip][data-placement="left"]:hover:after {
      --pico-tooltip-caret-slide-to: translate(.3rem, -50%);
      animation-name: tooltip-caret-slide;
      transform: translate(.05rem, -50%);
    }

    [data-tooltip][data-placement="right"]:focus:before, [data-tooltip][data-placement="right"]:focus:after, [data-tooltip][data-placement="right"]:hover:before, [data-tooltip][data-placement="right"]:hover:after {
      --pico-tooltip-slide-to: translate(.25rem, -50%);
      animation-name: tooltip-slide;
      transform: translate(-.75rem, -50%);
    }

    [data-tooltip][data-placement="right"]:focus:after, [data-tooltip][data-placement="right"]:hover:after {
      --pico-tooltip-caret-slide-to: translate(-.3rem, -50%);
      animation-name: tooltip-caret-slide;
      transform: translate(-.05rem, -50%);
    }
  }

  @keyframes tooltip-slide {
    to {
      transform: var(--pico-tooltip-slide-to);
      opacity: 1;
    }
  }

  @keyframes tooltip-caret-slide {
    50% {
      opacity: 0;
    }

    to {
      transform: var(--pico-tooltip-caret-slide-to);
      opacity: 1;
    }
  }

  :where([popover]) {
    max-width: calc(100vw - var(--pico-spacing) * 2);
    max-height: calc(100vh - var(--pico-spacing) * 2);
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    overflow: visible;
  }

  :where([popover]) > article {
    margin: 0;
  }

  :where([popover]:not(:has( > article))) {
    padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
    border: var(--pico-border-width) solid var(--pico-card-border-color);
    border-radius: var(--pico-card-border-radius);
    background-color: var(--pico-card-background-color);
    box-shadow: var(--pico-card-box-shadow);
    color: var(--pico-color);
    overflow: auto;
  }

  :is(ul, menu)[popover] {
    border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
    border-radius: var(--pico-card-border-radius);
    background-color: var(--pico-dropdown-background-color);
    box-shadow: var(--pico-dropdown-box-shadow);
    color: var(--pico-dropdown-color);
    white-space: nowrap;
    min-width: 10rem;
    margin: 0;
    padding: .25rem;
    list-style: none;
    overflow: auto;
  }

  :is(ul, menu)[popover]:popover-open {
    flex-direction: column;
    display: flex;
  }

  :is(ul, menu)[popover] li {
    border-radius: calc(var(--pico-border-radius) * .75);
    width: 100%;
    margin: 0;
    padding: .375rem .625rem;
    list-style: none;
  }

  :is(ul, menu)[popover] li a {
    border-radius: inherit;
    color: var(--pico-dropdown-color);
    text-overflow: ellipsis;
    margin: -.375rem -.625rem;
    padding: .375rem .625rem;
    text-decoration: none;
    display: block;
    overflow: hidden;
  }

  :is(ul, menu)[popover] li a:hover, :is(ul, menu)[popover] li a:focus, :is(ul, menu)[popover] li a:active, :is(ul, menu)[popover] li a:focus-visible, :is(ul, menu)[popover] li a[aria-current]:not([aria-current="false"]) {
    background-color: var(--pico-dropdown-hover-background-color);
  }

  :is(ul, menu)[popover] li label {
    width: 100%;
  }

  :is(ul, menu)[popover] li:has(label):hover {
    background-color: var(--pico-dropdown-hover-background-color);
  }

  :is([popover="hint"], [popover][role="tooltip"]) {
    width: max-content;
    max-width: min(20rem, calc(100vw - var(--pico-spacing) * 2));
    border-radius: calc(var(--pico-border-radius) * .75);
    background: var(--pico-tooltip-background-color);
    box-shadow: var(--pico-dropdown-box-shadow);
    color: var(--pico-tooltip-color);
    font-size: .8125rem;
    font-style: normal;
    font-weight: 500;
    line-height: var(--pico-line-height);
    pointer-events: none;
    border: 0;
    padding: .375rem .625rem;
    overflow: visible;
  }

  @supports (anchor-name: --a) and (position-area: top) {
    :is(ul, menu)[popover] {
      position-anchor: auto;
      min-inline-size: max(anchor-size(inline), 10rem);
      position-area: block-end span-inline-end;
      position-try-fallbacks: flip-block,
      flip-inline,
      flip-block flip-inline;
      margin-block: .25rem;
      inset: auto;
    }

    :is([popover="hint"], [popover][role="tooltip"]) {
      position-anchor: auto;
      position-area: block-start;
      position-try-fallbacks: flip-block;
      margin-block: .375rem;
      inset: auto;
    }
  }

  @supports (transition-behavior: allow-discrete) {
    @media (prefers-reduced-motion: no-preference) {
      [popover] {
        transition: opacity var(--pico-transition),
        transform var(--pico-transition),
        overlay var(--pico-transition) allow-discrete,
        display var(--pico-transition) allow-discrete;
      }

      [popover]:not(:popover-open) {
        opacity: 0;
        transform: translateY(-.25rem);
      }

      :is([popover="hint"], [popover][role="tooltip"]):not(:popover-open) {
        transform: none;
      }

      @starting-style {
        [popover]:popover-open {
          opacity: 0;
          transform: translateY(-.25rem);
        }

        :is([popover="hint"], [popover][role="tooltip"]):popover-open {
          transform: none;
        }
      }
    }
  }

  [aria-controls] {
    cursor: pointer;
  }

  [aria-disabled="true"], [disabled] {
    cursor: not-allowed;
  }

  [aria-hidden="false"][hidden] {
    display: initial;
  }

  [aria-hidden="false"][hidden]:not(:focus) {
    clip: rect(0, 0, 0, 0);
    position: absolute;
  }

  a, area, button, input, label, select, summary, textarea, [tabindex] {
    touch-action: manipulation;
  }

  [dir="rtl"] {
    direction: rtl;
  }

  @media (prefers-reduced-motion: reduce) {
    :not([aria-busy="true"]), :not([aria-busy="true"]):before, :not([aria-busy="true"]):after {
      background-attachment: initial !important;
      scroll-behavior: auto !important;
      transition-duration: 0s !important;
      transition-delay: 0s !important;
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      animation-delay: -1ms !important;
    }
  }

  :root, :host {
    --pico-container-max-width: 100%;
  }

  body > header, body > main, body > footer {
    padding-inline: var(--pico-block-spacing-horizontal);
  }
}

@layer pico.extras, pico.utilities;