@layer tokens {
  :root {
    --amber-11: light-dark(#ab6400, #ffca16);
    --amber-9: light-dark(#ffc53d, #ffc53d);
    --amber-a2: light-dark(#f4d10016, #fd9b000d);
    --amber-a3: light-dark(#ffde003d, #fa820022);
    --amber-a4: light-dark(#ffd40063, #fc820032);
    --amber-a6: light-dark(#eab5008c, #fd9b0051);
    --amber-a7: light-dark(#dc9b009d, #ffab2567);
    --black-a7: rgba(0, 0, 0, 0.5);
    --blue-11: light-dark(#0d74ce, #70b8ff);
    --blue-9: light-dark(#0090ff, #0090ff);
    --blue-a2: light-dark(#008cff0b, #1166fb18);
    --blue-a3: light-dark(#008ff519, #0077ff3a);
    --blue-a4: light-dark(#009eff2a, #0075ff57);
    --blue-a5: light-dark(#0093ff3d, #0081fd6b);
    --blue-a6: light-dark(#0088f653, #0f89fd7f);
    --green-11: light-dark(#218358, #3dd68c);
    --green-7: light-dark(#8eceaa, #28684a);
    --green-9: light-dark(#30a46c, #30a46c);
    --green-a2: light-dark(#00a32f0b, #29f99d0b);
    --green-a3: light-dark(#00a43319, #22ff991e);
    --green-a4: light-dark(#00a83829, #11ff992d);
    --green-a5: light-dark(#019c393b, #2bffa23c);
    --green-a6: light-dark(#00963c52, #44ffaa4b);
    --indigo-10: light-dark(#3358d4, #5472e4);
    --indigo-11: light-dark(#3a5bc7, #9eb1ff);
    --indigo-7: light-dark(#abbdf9, #3a4f97);
    --indigo-9: light-dark(#3e63dd, #3e63dd);
    --indigo-a2: light-dark(#0040ff08, #3354fa17);
    --indigo-a3: light-dark(#0047f112, #2f62ff3c);
    --indigo-a4: light-dark(#0044ff1e, #3566ff57);
    --indigo-a5: light-dark(#0044ff2d, #4171fd6b);
    --indigo-a6: light-dark(#003eff3e, #5178fd7c);
    --orange-10: light-dark(#ef5f00, #ff801f);
    --orange-11: light-dark(#cc4e00, #ffa057);
    --orange-7: light-dark(#f5ae73, #7e451d);
    --orange-9: light-dark(#f76b15, #f76b15);
    --orange-a11: light-dark(#cc4e00, #ffa057);
    --orange-a2: light-dark(#ff8e0012, #fe6d000e);
    --orange-a3: light-dark(#ff9c0029, #fb6a0025);
    --orange-a4: light-dark(#ff91014a, #ff590039);
    --orange-a5: light-dark(#ff8b0065, #ff61004a);
    --orange-a6: light-dark(#ff81007d, #fd75045c);
    --red-11: light-dark(#ce2c31, #ff9592);
    --red-7: light-dark(#f4a9aa, #8c333a);
    --red-9: light-dark(#e5484d, #e5484d);
    --red-a2: light-dark(#ff000008, #f22f3e11);
    --red-a3: light-dark(#f3000d14, #ff173f2d);
    --red-a4: light-dark(#ff000824, #fe0a3b44);
    --red-a5: light-dark(#ff000632, #ff204756);
    --red-a6: light-dark(#f8000442, #ff3e5668);
    --red-a7: light-dark(#df000356, #ff536184);
    --sand-1: light-dark(#fdfdfc, #111110);
    --sand-11: light-dark(#63635e, #b5b3ad);
    --sand-12: light-dark(#21201c, #eeeeec);
    --sand-2: light-dark(#f9f9f8, #191918);
    --sand-3: light-dark(#f1f0ef, #222221);
    --sand-4: light-dark(#e9e8e6, #2a2a28);
    --sand-5: light-dark(#e2e1de, #31312e);
    --sand-8: light-dark(#bcbbb5, #62605b);
    --sand-a2: light-dark(#25250007, #f4f4f309);
    --sand-a3: light-dark(#20100010, #f6f6f513);
    --sand-a4: light-dark(#1f150019, #fefef31b);
    --sand-a5: light-dark(#1f180021, #fbfbeb23);
    --sand-a6: light-dark(#19130029, #fffaed2d);
    --sand-a7: light-dark(#19140035, #fffbed3c);
    --white-a10: rgba(255, 255, 255, 0.8);
  }

  @supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
      :root {
        --amber-11: light-dark(color(display-p3 0.64 0.4 0), color(display-p3 1 0.8 0.29));
        --amber-9: light-dark(color(display-p3 1 0.77 0.26), color(display-p3 1 0.77 0.26));
        --amber-a2: light-dark(color(display-p3 0.902 0.804 0.008 / 0.079), color(display-p3 0.988 0.651 0 / 0.047));
        --amber-a3: light-dark(color(display-p3 0.965 0.859 0.004 / 0.22), color(display-p3 1 0.6 0 / 0.118));
        --amber-a4: light-dark(color(display-p3 0.969 0.82 0.004 / 0.35), color(display-p3 1 0.557 0 / 0.185));
        --amber-a6: light-dark(color(display-p3 0.875 0.682 0.004 / 0.495), color(display-p3 1 0.659 0.094 / 0.299));
        --amber-a7: light-dark(color(display-p3 0.804 0.573 0 / 0.557), color(display-p3 1 0.714 0.263 / 0.383));
        --black-a7: rgba(0, 0, 0, 0.5);
        --blue-11: light-dark(color(display-p3 0.15 0.44 0.84), color(display-p3 0.49 0.72 1));
        --blue-9: light-dark(color(display-p3 0.247 0.556 0.969), color(display-p3 0.247 0.556 0.969));
        --blue-a2: light-dark(color(display-p3 0.024 0.514 0.906 / 0.04), color(display-p3 0.114 0.435 0.988 / 0.085));
        --blue-a3: light-dark(color(display-p3 0.012 0.506 0.914 / 0.087), color(display-p3 0.122 0.463 1 / 0.219));
        --blue-a4: light-dark(color(display-p3 0.008 0.545 1 / 0.146), color(display-p3 0 0.467 1 / 0.324));
        --blue-a5: light-dark(color(display-p3 0.004 0.502 0.984 / 0.212), color(display-p3 0.098 0.51 1 / 0.4));
        --blue-a6: light-dark(color(display-p3 0.004 0.463 0.922 / 0.291), color(display-p3 0.224 0.557 1 / 0.475));
        --green-11: light-dark(color(display-p3 0.19 0.5 0.32), color(display-p3 0.434 0.828 0.573));
        --green-7: light-dark(color(display-p3 0.61 0.801 0.675), color(display-p3 0.227 0.403 0.298));
        --green-9: light-dark(color(display-p3 0.332 0.634 0.442), color(display-p3 0.332 0.634 0.442));
        --green-a2: light-dark(color(display-p3 0.024 0.565 0.129 / 0.036), color(display-p3 0.341 0.98 0.616 / 0.043));
        --green-a3: light-dark(color(display-p3 0.012 0.596 0.145 / 0.087), color(display-p3 0.376 0.996 0.655 / 0.114));
        --green-a4: light-dark(color(display-p3 0.008 0.588 0.145 / 0.142), color(display-p3 0.341 0.996 0.635 / 0.173));
        --green-a5: light-dark(color(display-p3 0.004 0.541 0.157 / 0.204), color(display-p3 0.408 1 0.678 / 0.232));
        --green-a6: light-dark(color(display-p3 0.004 0.518 0.157 / 0.283), color(display-p3 0.475 1 0.706 / 0.29));
        --indigo-10: light-dark(color(display-p3 0.234 0.343 0.801), color(display-p3 0.354 0.445 0.866));
        --indigo-11: light-dark(color(display-p3 0.256 0.354 0.755), color(display-p3 0.63 0.69 1));
        --indigo-7: light-dark(color(display-p3 0.685 0.74 0.957), color(display-p3 0.245 0.309 0.575));
        --indigo-9: light-dark(color(display-p3 0.276 0.384 0.837), color(display-p3 0.276 0.384 0.837));
        --indigo-a2: light-dark(color(display-p3 0.024 0.161 0.863 / 0.028), color(display-p3 0.251 0.345 0.988 / 0.085));
        --indigo-a3: light-dark(color(display-p3 0.008 0.239 0.886 / 0.067), color(display-p3 0.243 0.404 1 / 0.223));
        --indigo-a4: light-dark(color(display-p3 0.004 0.247 1 / 0.114), color(display-p3 0.263 0.42 1 / 0.324));
        --indigo-a5: light-dark(color(display-p3 0.004 0.235 1 / 0.169), color(display-p3 0.314 0.451 1 / 0.4));
        --indigo-a6: light-dark(color(display-p3 0.004 0.208 0.984 / 0.232), color(display-p3 0.361 0.49 1 / 0.467));
        --orange-10: light-dark(color(display-p3 0.87 0.409 0.164), color(display-p3 0.98 0.51 0.23));
        --orange-11: light-dark(color(display-p3 0.76 0.34 0), color(display-p3 1 0.63 0.38));
        --orange-7: light-dark(color(display-p3 0.919 0.693 0.486), color(display-p3 0.465 0.283 0.147));
        --orange-9: light-dark(color(display-p3 0.9 0.45 0.2), color(display-p3 0.9 0.45 0.2));
        --orange-a11: light-dark(color(display-p3 0.76 0.34 0), color(display-p3 1 0.63 0.38));
        --orange-a2: light-dark(color(display-p3 0.886 0.533 0.008 / 0.067), color(display-p3 0.992 0.529 0 / 0.051));
        --orange-a3: light-dark(color(display-p3 0.922 0.584 0.008 / 0.15), color(display-p3 0.996 0.486 0 / 0.131));
        --orange-a4: light-dark(color(display-p3 1 0.604 0.004 / 0.314), color(display-p3 0.996 0.384 0 / 0.211));
        --orange-a5: light-dark(color(display-p3 1 0.569 0.004 / 0.416), color(display-p3 1 0.455 0 / 0.265));
        --orange-a6: light-dark(color(display-p3 0.949 0.494 0.004 / 0.455), color(display-p3 1 0.529 0.129 / 0.332));
        --red-11: light-dark(color(display-p3 0.744 0.234 0.222), color(display-p3 1 0.57 0.55));
        --red-7: light-dark(color(display-p3 0.915 0.675 0.672), color(display-p3 0.508 0.224 0.236));
        --red-9: light-dark(color(display-p3 0.83 0.329 0.324), color(display-p3 0.83 0.329 0.324));
        --red-a2: light-dark(color(display-p3 0.863 0.024 0.024 / 0.028), color(display-p3 0.996 0.282 0.282 / 0.055));
        --red-a3: light-dark(color(display-p3 0.792 0.008 0.008 / 0.075), color(display-p3 1 0.169 0.271 / 0.156));
        --red-a4: light-dark(color(display-p3 1 0.008 0.008 / 0.134), color(display-p3 1 0.118 0.267 / 0.236));
        --red-a5: light-dark(color(display-p3 0.918 0.008 0.008 / 0.189), color(display-p3 1 0.212 0.314 / 0.303));
        --red-a6: light-dark(color(display-p3 0.831 0.02 0.004 / 0.251), color(display-p3 1 0.318 0.38 / 0.374));
        --red-a7: light-dark(color(display-p3 0.741 0.016 0.004 / 0.33), color(display-p3 1 0.4 0.424 / 0.475));
        --sand-1: light-dark(color(display-p3 0.992 0.992 0.989), color(display-p3 0.067 0.067 0.063));
        --sand-11: light-dark(color(display-p3 0.388 0.388 0.37), color(display-p3 0.707 0.703 0.68));
        --sand-12: light-dark(color(display-p3 0.129 0.126 0.111), color(display-p3 0.933 0.933 0.926));
        --sand-2: light-dark(color(display-p3 0.977 0.977 0.973), color(display-p3 0.098 0.098 0.094));
        --sand-3: light-dark(color(display-p3 0.943 0.942 0.936), color(display-p3 0.135 0.135 0.129));
        --sand-4: light-dark(color(display-p3 0.913 0.912 0.903), color(display-p3 0.164 0.163 0.156));
        --sand-5: light-dark(color(display-p3 0.885 0.883 0.873), color(display-p3 0.193 0.192 0.183));
        --sand-8: light-dark(color(display-p3 0.738 0.734 0.713), color(display-p3 0.384 0.378 0.357));
        --sand-a2: light-dark(color(display-p3 0.161 0.161 0.024 / 0.028), color(display-p3 0.992 0.992 0.988 / 0.034));
        --sand-a3: light-dark(color(display-p3 0.067 0.067 0.008 / 0.063), color(display-p3 0.996 0.996 0.992 / 0.072));
        --sand-a4: light-dark(color(display-p3 0.129 0.129 0.012 / 0.099), color(display-p3 0.992 0.992 0.953 / 0.106));
        --sand-a5: light-dark(color(display-p3 0.098 0.067 0.008 / 0.126), color(display-p3 1 1 0.965 / 0.135));
        --sand-a6: light-dark(color(display-p3 0.102 0.075 0.004 / 0.161), color(display-p3 1 0.976 0.929 / 0.177));
        --sand-a7: light-dark(color(display-p3 0.098 0.098 0.004 / 0.208), color(display-p3 1 0.984 0.929 / 0.236));
        --white-a10: rgba(255, 255, 255, 0.8);
      }
    }
  }
}


@font-face {
  font-family: Inconsolata;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Inconsolata"), local("Inconsolata-Regular"), url("fonts/Inconsolata-Regular.woff2") format("woff2");
}

@font-face {
  font-family: Inconsolata;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Inconsolata"), local("Inconsolata-Bold"), url("fonts/Inconsolata-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("PT Sans"), local("PTSans-Regular"), url("fonts/PTSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "PT Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local("PT Sans"), local("PTSans-Italic"), url("fonts/PTSans-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "PT Sans";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local("PT Sans"), local("PTSans-BoldItalic"), url("fonts/PTSans-BoldItalic.woff2") format("woff2");
}

@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("PT Sans"), local("PTSans-Bold"), url("fonts/PTSans-Bold.woff2") format("woff2");
} 

@layer theme {
  :root {
    
    --size-h1: clamp(2rem, 1.8043rem + 0.8696vw, 2.5rem);
    --size-h2: clamp(1.5rem, 1.3043rem + 0.8696vw, 2rem);
    --size-h3: clamp(1.25rem, 1.1033rem + 0.6522vw, 1.625rem);
    --size-h4: clamp(1.125rem, 1.0272rem + 0.4348vw, 1.375rem);
    --size-body: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);
    --size-small: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
    --size-tiny: clamp(0.75rem, 0.7378rem + 0.0543vw, 0.7813rem);

    

    
    --space-3xs: 0.3125rem;
    --space-2xs: clamp(0.4375rem, 0.4107rem + 0.119vw, 0.5rem);
    --space-xs: clamp(0.6875rem, 0.6607rem + 0.119vw, 0.75rem);
    --space-s: clamp(1rem, 0.9464rem + 0.2381vw, 1.125rem);
    --space-m: clamp(1.5rem, 1.4196rem + 0.3571vw, 1.6875rem);
    --space-l: clamp(2.25rem, 2.1161rem + 0.5952vw, 2.5625rem);
    --space-xl: clamp(3.375rem, 3.1875rem + 0.8333vw, 3.8125rem);
    --space-2xl: clamp(5.0625rem, 4.7946rem + 1.1905vw, 5.6875rem);
    --space-3xl: clamp(7.625rem, 7.2232rem + 1.7857vw, 8.5625rem);

    
    --space-3xs-2xs: clamp(0.3125rem, 0.2321rem + 0.3571vw, 0.5rem);
    --space-2xs-xs: clamp(0.4375rem, 0.3036rem + 0.5952vw, 0.75rem);
    --space-xs-s: clamp(0.6875rem, 0.5rem + 0.8333vw, 1.125rem);
    --space-s-m: clamp(1rem, 0.7054rem + 1.3095vw, 1.6875rem);
    --space-m-l: clamp(1.5rem, 1.0446rem + 2.0238vw, 2.5625rem);
    --space-l-xl: clamp(2.25rem, 1.5804rem + 2.9762vw, 3.8125rem);
    --space-xl-2xl: clamp(3.375rem, 2.3839rem + 4.4048vw, 5.6875rem);
    --space-2xl-3xl: clamp(5.0625rem, 3.5625rem + 6.6667vw, 8.5625rem);

    
    --space-s-l: clamp(1rem, 0.3304rem + 2.9762vw, 2.5625rem);

    
    --flow-space-glue: 0.3em;
    --flow-space-tight: 0.5em;
    --flow-space: 1em;
    --flow-space-loose: 1.5em;

    
    --gap: var(--space-s-m);


    --line-height: 1.5;
    --font-weight: 400;
    --font-weight-bold: 700;
    --shadow-small: 0 1px 3px -1px rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 10%); 
    --shadow-medium: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%); 
    --shadow-large: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%); 
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 5%);
    --hover-multiplier: 0.95;
    --text-underline-offset: 2px;
    --text-decoration-thickness: 2px;
    --content-width: 68ch;
    --main-width: 75rem;
    --border-radius-s: 0.4375rem;
    --border-radius-m: 0.6875rem;
    --border-radius-l: 1rem;
    --border-radius-f: 9999px;
    --border-width: 1px;
    --outline-width: 2px;
    --font: 'PT Sans', system-ui, 'Segoe UI', 'Noto Sans', roboto, helvetica, arial, sans-serif, 'Apple Color Emoji','Segoe UI Emoji';
    --font-mono: inconsolata, ui-monospace, sfmono-regular, consolas, 'Liberation Mono', menlo, monospace; 
    --font-mono-size: 0.95em;



    
    color-scheme: light dark;

    --color-text: var(--sand-12);
    --color-text-muted: var(--sand-11);
    --color-surface-sunken: light-dark(var(--sand-3), var(--sand-1));
    --color-surface: var(--sand-2);
    --color-surface-raised: light-dark(var(--sand-1), var(--sand-3));
    --color-surface-overlay: light-dark(white, var(--sand-4));
    --color-fill: var(--sand-a2);
    --color-fill-hover: var(--sand-a3);
    --color-fill-active: var(--sand-a4);
    --color-border-weak: var(--sand-a5); 
    --color-border-strong: var(--sand-a6); 
    --color-border-hover: var(--sand-a7);

    --color-primary: var(--orange-9);
    --color-primary-inverse: white;
    --color-primary-hover: var(--orange-10);
    --color-primary-focus: var(--orange-7);
    --color-primary-fill: var(--orange-a2);
    --color-primary-fill-hover: var(--orange-a3);
    --color-primary-fill-active: var(--orange-a4);
    --color-primary-border-weak: var(--orange-a5);
    --color-primary-border-strong: var(--orange-a6);
    --color-primary-text: var(--orange-11);

    --color-accent: var(--indigo-9);
    --color-accent-inverse: white;
    --color-accent-hover: var(--indigo-10);
    --color-accent-focus: var(--indigo-7);
    --color-accent-fill: var(--indigo-a2);
    --color-accent-fill-hover: var(--indigo-a3);
    --color-accent-fill-active: var(--indigo-a4);
    --color-accent-border-weak: var(--indigo-a5);
    --color-accent-border-strong: var(--indigo-a6);
    --color-accent-text: var(--indigo-11);

    --color-success: var(--green-9);
    --color-success-inverse: white;
    --color-success-focus: var(--green-7);
    --color-success-fill: var(--green-a2);
    --color-success-fill-hover: var(--green-a3);
    --color-success-fill-active: var(--green-a4);
    --color-success-border-weak: var(--green-a5);
    --color-success-border-strong: var(--green-a6);
    --color-success-text: var(--green-11);

    --color-danger: var(--red-9);
    --color-danger-inverse: white;
    --color-danger-focus: var(--red-7);
    --color-danger-fill: light-dark(var(--red-a2), var(--red-a3));
    --color-danger-fill-hover: light-dark(var(--red-a3), var(--red-a4));
    --color-danger-fill-active: light-dark(var(--red-a4), var(--red-a5));
    --color-danger-border-weak: light-dark(var(--red-a5), var(--red-a6));
    --color-danger-border-strong: light-dark(var(--red-a6), var(--red-a7));
    --color-danger-text: var(--red-11);

    --color-warning: var(--amber-9);
    --color-warning-inverse: black;
    --color-warning-fill: var(--amber-a2);
    --color-warning-fill-hover: var(--amber-a3);
    --color-warning-fill-active: var(--amber-a4);
    --color-warning-border-weak: var(--amber-a6);
    --color-warning-border-strong: var(--amber-a7);
    --color-warning-text: var(--amber-11);

    --color-info: var(--blue-9);
    --color-info-inverse: white;
    --color-info-fill: var(--blue-a2);
    --color-info-fill-hover: var(--blue-a3);
    --color-info-fill-active: var(--blue-a4);
    --color-info-border-weak: var(--blue-a5);
    --color-info-border-strong: var(--blue-a6);
    --color-info-text: var(--blue-11);

    --color-contrast: var(--sand-12);
    --color-contrast-inverse: var(--sand-2);

    
    --code-inline-color-surface: var(--sand-a3);
    --link-color: var(--color-text);
    --link-color-decoration: var(--color-primary);
    --link-decoration-thickness-hover: 1px;
    --selection-color: color-mix(in oklch, var(--color-primary-hover) 35%, transparent);
    --mark-color: light-dark(var(--orange-a5), var(--orange-a11));
    --header-color-surface: light-dark(var(--sand-2), var(--sand-3));
    --header-color-border: light-dark(transparent, var(--sand-a4));
    --code-color-surface: light-dark(var(--sand-5), var(--sand-1));
    --kbd-surface: light-dark(var(--sand-12), var(--sand-1));
    --kbd-text: light-dark(var(--sand-2),var(--sand-12));
    --dropdown-color-surface-hover: var(--sand-a3);
    --form-color-surface: light-dark( var(--white-a10), var(--sand-a2));
    --form-color-border-disabled: var(--sand-8);
    --switch-color-surface: light-dark(var(--sand-8), var(--color-fill));
    --switch-color-border: light-dark(var(--sand-8), var(--color-border-strong));
    --modal-color-backdrop: var(--black-a7);


    
    --icon-loading: url("data:image/svg+xml,%3Csvg role='status' aria-label='Loading' width='24' height='24' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 24C4 35.0457 12.9543 44 24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4' stroke='currentColor' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 24 24' to='360 24 24' dur='0.9s' repeatCount='indefinite' /%3E%3C/path%3E%3C/svg%3E");
    --icon-hamburger: 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='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E");
    --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='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --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='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");

    
    --icon-info: 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='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
    --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='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
    --icon-check: 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='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");

    
    --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='%2382827c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E");
    --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='%2330a46c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
    --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='%23e5484d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
    --icon-select: 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='%2382827c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }

  html[data-theme="dark"] {
    color-scheme: dark;
  }

  html[data-theme="light"] {
    color-scheme: light;
  }
}


@layer reset {
  


  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  
  h1, h2, h3, h4, h5, h6, p, ul, menu, ol, pre, dl, dd {
    margin-block: 0;
  }

  body, figure, blockquote, hr {
    margin: 0;
  }

  
  ul[role='list'],
  ol[role='list'] {
    list-style: none;
  }

  
  body {
    min-height: 100vh;
  }

  
  h1, h2, h3, h4, h5, h6,
  button, input, label {
    line-height: 1.1;
  }

  
  a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
  }

  
  img,
  picture {
    max-width: 100%;
    display: block;
  }

  
  input, button,
  textarea, select {
    font-family: inherit;
    font-size: inherit;
  }

  
  textarea:not([rows]) {
    min-height: 10em;
  }

  
  :target {
    scroll-margin-block: 5ex;
  }

}


@layer tokens, theme, reset, base, layout, components, project, utilities;

@layer base {
  html {
    text-rendering: optimizelegibility;
    tab-size: 4;
    scroll-behavior: smooth;
  }

  body {
    font-size: var(--size-body, 1rem);
    background-color: var(--color-surface, canvas);
    color: var(--color-text, canvastext);
    font-family: var(--font, system-ui, sans-serif);
    font-weight: var(--font-weight, 400);
    border-width: var(--border-width, 1px);
    outline-width: var(--outline-width, 2px);
    line-height: var(--line-height, 1.5);
    overflow-wrap: break-word;
    text-underline-offset: var(--text-underline-offset, 1px);

    
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    gap: var(--gap);

    > header:first-of-type {
      background-color: var(--color-surface-raised);
      border-bottom: var(--border-width) solid var(--header-color-border, var(--color-border-weak));
      box-shadow: var(--shadow-medium);
      padding-block: var(--space-2xs);
    }

    > footer:last-of-type {
      background-color: var(--color-surface-sunken);
      border-top: var(--border-width) solid var(--footer-color-border, transparent);
      padding-block: var(--space-2xs) var(--space-3xl);
      margin-block-start: auto;
    }

  }

  
  main:not([class]), 
  article:not([class]),
  section:not([class]) {
    > * + * {
      margin-block-start: var(--flow-space);
    }
  }

  :focus-visible {
    outline: var(--outline-width, 2px) solid var(--color-primary-focus);
    outline-offset: var(--outline-offset, 1px);
  }
}


@layer base {
  h1, h2, h3,  h4, h5, h6, 
  li, dd, dt, p, abbr, legend, figcaption, caption {
    hyphens: auto;
  }

  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    font-family: var(--font-heading, inherit);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-heading, inherit);
  }

  h1 {
    font-size: var(--size-h1, 2rem);
  }

  h2 {
    font-size: var(--size-h2, 1.5rem);
  }

  h3 {
    font-size: var(--size-h3, 1.25rem);
  }

  h4 {
    font-size: var(--size-h4, 1.125rem);
  }

  h5 {
    font-size: var(--size-body, 1rem);
  }

  h6,
  small {
    font-size: var(--size-small, 0.875rem);
  }

  small {
    color: var(--color-text-muted);
    line-height: 1.25;
  }

  hgroup > :last-child {
    color: var(--color-text-muted);
    font-weight: unset;
    font-size: var(--size-body);
    font-family: unset;    
  }

  
  .eyebrow {
    font-size: var(--size-tiny);
    text-transform: uppercase;
    letter-spacing: 0.075em;
    line-height: unset;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-bold);

    + :is(h1, h2, h3, h4) {
      --flow-space: var(--flow-space-glue);
    }
  }

  
  .lead {
    font-size: var(--size-h4);
  }

  
  :where(a:not([role="button"], [role="link"]:not([role="button"]))) {
    color: var(--link-color);
    text-decoration-thickness: var(--text-decoration-thickness);
    text-decoration-color: var(--link-color-decoration);
    font-weight: var(--font-weight-bold);

    &:visited {
      color: var(--color-link-color-visited, var(--link-color));
    }

    &:hover,
    &:active {
      text-decoration-thickness: calc(var(--text-decoration-thickness) + var(--link-decoration-thickness-hover));
    }

    &.secondary,
    &.tertiary {
      color: inherit;
      font-weight: inherit;
    }

    &.tertiary:not(:is([aria-current], :hover, :active, :focus)) {
      text-decoration: none;
    }

    &.accent {
      text-decoration-color: var(--color-accent);
    }

    &.neutral {
      text-decoration-color: inherit;
      color: inherit;      
    }
  }

  u, s, ins, del, abbr[title] {
    text-decoration-thickness: var(--text-decoration-thickness, 1px);
  }

  ins {
    color: var(--color-success-text);
  }

  del {
    color: var(--color-danger-text);
  }

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

  mark {
    border-radius: var(--border-radius-s); 
    background-color: var(--mark-color);
    padding-inline: calc(var(--border-radius-s) / 2);
  }

  sub,
  sup {
    font-size: var(--size-tiny);
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  rp, rt {
    color: var(--color-text-muted);
    font-size: var(--size-tiny);
  }

  
  code,
  kbd,
  samp,
  pre {
    color: var(--code-inline-color, var(--color-text-muted));
    font-family: var(--font-mono);
    font-size: var(--font-mono-size, 1rem);
    hyphens: none;
    word-break: normal;
  } 

  code,
  kbd,
  samp {
    background-color: var(--code-inline-color-surface, var(--color-fill));
    border-radius: var(--border-radius-s);
    box-decoration-break: clone;
    padding: 0.125rem 0.375rem;
  }

  kbd {
    background-color: var(--kbd-surface);
    color: var(--kbd-text);
    border: var(--border-width) solid var(--color-border-strong);
  }

  pre {
    border-radius: var(--border-radius-m);
    background-color: var(--code-color-surface, var(--color-surface-sunken));
    overflow-x: auto;
    padding: var(--space-xs-s);
    box-shadow: var(--shadow-inner);
    white-space: pre;

    :is(code, samp) {
      display: block;
      background: none;
      padding: 0;
    }
  }

  
  :where(dl, ol, ul) {
    padding-inline-start: var(--space-m);
  }

  dl {
    dt {
      font-weight: var(--font-weight-bold);
    }

    dd {
      margin-inline-start: 0;
    }

    > dd + dt {
      margin-block-start: var(--flow-space);
    }
  }

  abbr[title] {
    cursor: help;
  }

  blockquote {
    padding-inline-start: var(--space-s);
    border-inline-start: 0.25rem solid var(--color-border-weak);

    footer {
      color: var(--color-text-muted);
    }
  }

  hr {
    border: 0;
    border-block-start: var(--border-width) solid var(--color-border-weak);
    margin-block: var(--space-3xs);
  }

  
  table {
    max-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;

    &.striped {
      tbody tr:nth-child(odd) {
        background-color: var(--color-fill);
      }
    }

    &.centered :is(td, th) {
      text-align: center;
    }

    &.border-none :is(td, th) {
      border: none;
    }
  
  }

  th,
  td {
    padding: calc(var(--space-s) / 2) var(--space-s);
    border-bottom: var(--border-width) solid var(--color-border-weak);
    text-align: start;
  }

  thead :is(th, td){
    border-width: calc(var(--border-width) * 2);
  }

  tfoot :is(th, td){
    border-top: calc(var(--border-width) * 2) solid var(--color-border-weak);
    border-bottom: 0;
  }

  th,
  tfoot :is(td,th) {
    font-weight: bold;
  }

  thead th {
    
    color: var(--color-text-muted);
  }

  figcaption,
  table caption {
    font-size: var(--size-small);
    font-style: italic;
    color: var(--color-text-muted);
  }
}


@layer layout {
  


  
  .flow > * + * {
    margin-block-start: var(--flow-space);
  }

  
  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs-s);
    justify-content: var(--cluster-horizontal-alignment, flex-start);
    align-items: var(--cluster-vertical-alignment, center);
  }

  
  .container {
    max-inline-size: var(--container-max-width, var(--main-width));
    margin-inline: auto;
    padding-inline: var(--gutter, var(--space-s-l));
    inline-size: 100%;

    &.slim {
      max-inline-size: var(--content-width);
    }

    &.full {
      max-inline-size: 100%;
    }
  }

  
  .frame {
    --n: 16;
    --d: 9;
    
    aspect-ratio: var(--n) / var(--d);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;

    > :is(img, video) {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }

  
  .grid {
    display: grid;
    grid-template-columns: repeat(
      var(--grid-placement, auto-fill),
      minmax(var(--grid-min-size, 15rem), 1fr)
    );
    gap: var(--gap);

    &.halves {
      --grid-placement: auto-fit;
      --grid-min-size: max(15rem, calc((100% - 2 * var(--gap)) / 2 ));
    }

    &.thirds {
      --grid-placement: auto-fit;
      --grid-min-size: max(15rem, calc((100% - 2 * var(--gap)) / 3 ));
    }
  }

  
  .sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    align-items: stretch;

    > :first-child {
      flex-basis: var(--sidebar-target-width, 15rem);
      flex-grow: 1;
    }
  
    > :last-child {
      flex-basis: 0;
      flex-grow: 999;
      min-inline-size: var(--sidebar-content-min-width, 50%);
    }

    &.reversed {
      flex-direction: row-reverse;
    }

    &.no-stretch {
      align-items: flex-start;
    }

    &.media {
      --gap: var(--space-xs);

      align-items: center;

      > :first-child {
        flex: none;
      }
    }
  }

  
  .repel {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: var(--repel-vertical-alignment, center);
    gap: var(--gap);  
    
    &.nowrap {
      flex-wrap: nowrap;
    }
  }

  
  .switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    align-items: var(--switcher-vertical-alignment, flex-start);
    
    > * {
      flex-grow: 1;
      flex-basis: calc((var(--switcher-breakpoint, var(--content-width)) - 100%) * 999);
    }

    
    > :nth-last-child(n + 5),
    > :nth-last-child(n + 5) ~ * {
      flex-basis: 100%;
    }
  }
}


@layer components {
  
  [role="button"] {
    display: inline-block;
    text-decoration: none;
  }

  :where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"] ) {
    --button-surface: var(--color-primary);
    --button-text: var(--color-primary-inverse);

    background-color: var(--button-surface);
    color: var(--button-text);
    box-shadow: var(--shadow-small);
    padding: var(--space-2xs) var(--space-xs);
    border: var(--border-width) solid var(--button-surface);
    border-radius: var(--border-radius-m);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height);
    text-align: center;
    cursor: pointer;

    
    &:is([aria-current], :hover) {
      background-color: oklch(from var(--button-surface) calc(l * var(--hover-multiplier)) c h);
      border-color: oklch(from var(--button-surface) calc(l * var(--hover-multiplier)) c h);
    }

    &:active {
      background-color: oklch(from var(--button-surface) calc(l * var(--hover-multiplier) * var(--hover-multiplier)) c h);
      border-color: oklch(from var(--button-surface) calc(l * var(--hover-multiplier) * var(--hover-multiplier)) c h);
    }

    
    &.small {
      padding: var(--space-3xs) var(--space-2xs);
      font-size: var(--size-small);
    }

    &.large {
      padding: var(--space-xs) var(--space-s);
      font-size: var(--size-h4);
    }

    
    &.primary {
      --button-surface: var(--color-primary);
      --button-text: var(--color-primary-inverse);
    }

    &.accent {
      --button-surface: var(--color-accent);
      --button-text: var(--color-accent-inverse);
    }

    &.danger {
      --button-surface: var(--color-danger);
      --button-text: var(--color-danger-inverse);    
    }

    &.success {
      --button-surface: var(--color-success);
      --button-text: var(--color-success-inverse);
    }

    &.warning {
      --button-surface: var(--color-warning);
      --button-text: var(--color-warning-inverse);      
    }

    &.info {
      --button-surface: var(--color-info);
      --button-text: var(--color-info-inverse);
    }

    &.contrast {
      --button-surface: var(--color-contrast);
      --button-text: var(--color-contrast-inverse);      
    }

    &.neutral,
    &.neutral.secondary {
      --button-surface: transparent;
      --button-text: var(--color-text);

      border: var(--border-width) solid var(--color-border-strong);

      &:hover {
        --button-surface: var(--color-fill);
      }

      &:active {
        --button-surface: var(--color-fill-hover);
      }
    }
  }

  
  :where(button, input[type="submit"], input[type="button"], [role="button"]):is(.secondary, .tertiary),
  input[type="reset"] {
    &.accent {
      --button-text: var(--color-accent);
    }

    &.danger {
      --button-text: var(--color-danger);
    }

    &.success {
      --button-text: var(--color-success);
    }

    &.warning {
      --button-text: var(--color-warning);
    }

    &.info {
      --button-text: var(--color-info);
    }

    &.contrast {
      --button-text: var(--color-contrast);
    }
  }

  
  :where(button, input[type="submit"], input[type="button"], [role="button"]).secondary,
  input[type="reset"] {
    --button-surface: transparent;
    --button-text: var(--color-primary);

    color: var(--button-text);
    border: var(--border-width) solid var(--button-text);

    &:is([aria-current], :hover) {
      --button-surface: var(--color-primary-fill);
    }
    
    &:active {
      --button-surface: var(--color-primary-fill-hover);
    }

    &.accent {
      &:is([aria-current], :hover) {
        --button-surface: var(--color-accent-fill);
      }

      &:active {
        --button-surface: var(--color-accent-fill-hover);
      }
    }

    &.danger {
      &:is([aria-current], :hover) {
        --button-surface: var(--color-danger-fill);
      }
      
      &:active {
        --button-surface: var(--color-danger-fill-hover);
      }
    }

    &.success {
      &:is([aria-current], :hover) {
        --button-surface: var(--color-success-fill);
      }
      
      &:active {
        --button-surface: var(--color-success-fill-hover);
      }
    }

    &.warning {
      &:is([aria-current], :hover) {
        --button-surface: var(--color-warning-fill);
      }
      
      &:active {
        --button-surface: var(--color-warning-fill-hover);
      }
    }

    &.info {
      &:is([aria-current], :hover) {
        --button-surface: var(--color-info-fill);
      }
      
      &:active {
        --button-surface: var(--color-info-fill-hover);
      }
    }

    &.contrast {
      &:is([aria-current], :hover) {
        --button-surface: var(--color-fill);
      }
      
      &:active {
        --button-surface: var(--color-fill-hover);
      }
    }
  }

  
  :where(button, input[type="submit"], input[type="button"], [role="button"]).tertiary{
    --button-surface: transparent;
    --button-text: var(--color-primary); 

    border-color: transparent;
    box-shadow: none;
    text-decoration: underline;
    text-decoration-thickness: var(--text-decoration-thickness);

    &:not(:is(:focus, [aria-current], :hover, :active)) {
      --button-surface: transparent;
    }

    &:is(:focus, [aria-current], :hover, :active ) {
      text-decoration-thickness: calc(var(--text-decoration-thickness) + var(--link-decoration-thickness-hover));
    }

    &.neutral {
      --button-text: var(--color-text)
    }
  }

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

  
  :where(button, [role="button"]):is(.icon-only, .close) {
    --button-surface: transparent;
    --button-text: var(--color-text);
    --icon-size: 1em;

    padding: var(--space-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;

    &:is(:hover, :focus-visible) {
      --button-surface: var(--color-fill);
      --button-text: var(--color-text);
    }

    &:active {
      --button-surface: var(--color-fill-hover);
    }
  }

  
  :where(button, [role="button"]).close::before {
    content: "";
    height: var(--icon-size);
    width: var(--icon-size);
    background-color: currentcolor;
    mask: var(--icon-close) center / contain no-repeat;
  }
}


@layer components {
  :where(details) {
    border-radius: var(--border-radius-m);
    display: block;

    &:not(:has(> summary[role="button"]), .border-none) {
      border: var(--border-width) solid var(--color-border-strong);
      box-shadow: var(--shadow-small);
    }

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

    > *:not(summary) {
      margin: var(--space-2xs) var(--space-xs);
    }
  }

  
  :where(summary) {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center; 
    cursor: pointer;
    list-style-type: none;
    padding: var(--space-2xs) var(--space-xs);

    &:hover:not([role="button"]) {
      background-color: var(--color-fill);
      border-radius: var(--border-radius-m);
    }

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

    &::marker {
      display: none;
      list-style-type: none;
    }

    &::-moz-list-bullet {
      list-style-type: none;
    }

    &[role="button"] {
      width: 100%;
      text-align: left;
      display: flex;
    }

    
    &::after {
      width: 1em;
      height: 1em;
      flex-shrink: 0;
      background-color: currentcolor;
      mask: var(--icon-chevron) center / 100% no-repeat;
      content: "";
      transition: 0.1s ease-in-out;
    }
  }

  [role="group"] > details {
    & + details {
      margin-block-start: calc(var(--border-width) * -1);
      border-block-start: none;

      &,
      & summary:hover:not([role="button"]) {
        border-start-start-radius: 0;
        border-start-end-radius: 0;
      }
    }

    &:has(+ details) {
      &,
      & summary:hover:not([role="button"]) {
        border-end-start-radius: 0;
        border-end-end-radius: 0;
      }
    }

    &:not(:last-child) {
      box-shadow: none;
    }
  }

  :where(details)[open]:not(.border-none) summary:hover:not([role="button"]) {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
}


@layer components {
  .alert {
    --alert-padding: var(--space-s-m);

    position: relative;
    background-color: var(--color-fill);
    color: inherit;
    border-radius: var(--border-radius-m);
    padding: var(--alert-padding);
    box-shadow: var(--shadow-medium);
    overflow: hidden;
    border: var(--border-width) solid var(--color-border-weak);

    
    > * + * {
      margin-block-start: var(--flow-space);
    }

    
    > .close {
      position: absolute;
      inset-block-start: calc(var(--alert-padding) - var(--space-xs));
      inset-inline-end: calc(var(--alert-padding) - var(--space-xs));
      margin: 0;
    }

    &:has(> .close) {
      padding-inline-end: calc(var(--alert-padding) + 1em + var(--space-xs) * 2);
    }

    a:not([role="button"], 
    [role="link"]:not([role="button"])) {
      color: inherit;
    }

    &:is(.accent, .info, .warning, .success, .danger) {
      a:not([role="button"], 
      [role="link"]:not([role="button"])) {
        text-decoration-color: inherit;
      }
    }

    &:is(.info, .warning, .success, .danger)::before {
      display: block;
      width: 1.5em;
      height: 1.5em;
      margin-inline-end: var(--space-xs);
      float: inline-start;
      background-color: currentcolor;
      mask-position: left .25em;
      mask-size: 1em auto;
      mask-repeat: no-repeat;
      content: "";

      [dir="rtl"] & {
        mask-position: right .25em;
      }
    }

    &.primary {
      background-color: var(--color-primary-fill);
      color: var(--color-primary-text);
      border-color: var(--color-primary-border-weak);
    }

    &.accent {
      background-color: var(--color-accent-fill);
      color: var(--color-accent-text);
      border-color: var(--color-accent-border-weak);
    }

    &.info {
      background-color: var(--color-info-fill);
      color: var(--color-info-text);
      border-color: var(--color-info-border-weak);

      &::before {
        mask-image: var(--icon-info);
      }
    }

    &.warning {
      background-color: var(--color-warning-fill);
      color: var(--color-warning-text);
      border-color: var(--color-warning-border-weak);

      &::before {
        mask-image: var(--icon-invalid);
      }
    }

    &.success {
      background-color: var(--color-success-fill);
      color: var(--color-success-text);
      border-color: var(--color-success-border-weak);

      &::before {
        mask-image: var(--icon-valid);
      }
    }

    &.danger {
      background-color: var(--color-danger-fill);
      color: var(--color-danger-text);
      border-color: var(--color-danger-border-weak);  

      &::before {
        mask-image: var(--icon-invalid);
      }
    }
  }
}


@layer components {
  .avatar {
    --avatar-size: calc(var(--size-body) * 2.5);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--avatar-size);
    width: var(--avatar-size);
    overflow: hidden;
    border-radius: var(--border-radius-f);
    background-color: var(--color-contrast);
    color: var(--color-contrast-inverse);
    border: none;
    box-shadow: none;
    font-weight: var(--font-weight-bold);
    font-size: calc(var(--avatar-size) * 0.37);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;

    > img {
      
      height: 100%;
      width: 100%;
      object-fit: cover;
    }

    > :not(img) {
      color: inherit;
      overflow: hidden;
      padding: 0.15em;
    }

    &.square {
      border-radius: min(4px, var(--border-radius-s));
    }

    &.squircle {
      border-radius: 27%;
    }

    &.small {
      --avatar-size: calc(var(--size-body) * 2);
    }

    &.large {
      --avatar-size: calc(var(--size-body) * 3.5);
    }
  }

  @supports (corner-shape: squircle) {
    .avatar.squircle {
      border-radius: 50%;
      corner-shape: squircle;
    }
  }

  [role="group"]{
    &:has(> .avatar) {
      isolation: isolate;
      display: flex;
      align-items: center;
    }

    > .avatar {
      box-shadow: 0 0 0 4px var(--avatar-ring-color, var(--color-surface));

      + .avatar {
        margin-inline-start: calc(var(--space-s) * -1);
      }

      &:hover,
      &:focus-within {
        z-index: 30;
      }
    }
  }

  
  .bg-sunken {
    --avatar-ring-color: var(--color-surface-sunken);
  }

  .card,
  .bg-raised {
    --avatar-ring-color: var(--color-surface-raised);
  }

  dialog,
  .bg-overlay {
    --avatar-ring-color: var(--color-surface-overlay);
  }
}


@layer components {
  .badge,
  .pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    line-height: 1;
    font-size: max(0.75em, var(--size-tiny));
    font-weight: var(--font-weight-bold);
    background-color: var(--color-fill);
    color: var(--color-text);
    padding: var(--space-3xs) var(--space-2xs);
    border: var(--border-width) solid var(--color-border-weak);
    box-shadow: var(--shadow-small);
    border-radius: var(--border-radius-s);

    &.primary {
      background-color: var(--color-primary-fill);
      color: var(--color-primary-text);
      border-color: var(--color-primary-border-weak);
    }

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

    &.accent {
      background-color: var(--color-accent-fill);
      color: var(--color-accent-text);
      border-color: var(--color-accent-border-weak);
    }

    &.danger {
      background-color: var(--color-danger-fill);
      color: var(--color-danger-text);
      border-color: var(--color-danger-border-weak);  
    }

    &.success {
      background-color: var(--color-success-fill);
      color: var(--color-success-text);
      border-color: var(--color-success-border-weak);
    }

    &.warning {
      background-color: var(--color-warning-fill);
      color: var(--color-warning-text);
      border-color: var(--color-warning-border-weak);
    }

    &.info {
      background-color: var(--color-info-fill);
      color: var(--color-info-text);
      border-color: var(--color-info-border-weak);
    }
  }

  .pill {
    border-radius: var(--border-radius-f);
  }

  
  :is(a, [role="link"] ,button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]){
    &:is(.badge, .pill),
    & :is(.badge, .pill) {
      text-decoration: none;
      cursor: pointer;

      &:is(:focus, [aria-current], :hover) {
        background-color: var(--color-fill-hover);

        &.primary {background-color: var(--color-primary-fill-hover)}
        &.accent {background-color: var(--color-accent-fill-hover)}
        &.success {background-color: var(--color-success-fill-hover)}
        &.warning {background-color: var(--color-warning-fill-hover)}
        &.danger {background-color: var(--color-danger-fill-hover)}
        &.info {background-color: var(--color-info-fill-hover)}
      }

      &:active {
        background-color: var(--color-fill-active);

        &.primary {background-color: var(--color-primary-fill-active)}
        &.accent {background-color: var(--color-accent-fill-active)}
        &.success {background-color: var(--color-success-fill-active)}
        &.warning {background-color: var(--color-warning-fill-active)}
        &.danger {background-color: var(--color-danger-fill-active)}
        &.info {background-color: var(--color-info-fill-active)}
      } 
    }
  }  
}


@layer components {
  .card {
    --card-padding: var(--space-s-m);

    background-color: var(--color-surface-raised);
    border: var(--border-width) solid var(--color-border-weak);
    border-radius: var(--border-radius-m);
    box-shadow: var(--shadow-medium);
    padding: var(--card-padding);
    overflow: hidden;

    
    > * + * {
      margin-block-start: var(--flow-space);
    }

    
    > :is(figure:not(.inset), header, footer, hr) {
      margin-inline: calc(var(--card-padding) * -1);
    }

    
    > :is(figure:not(.inset), header):first-child {
      margin-block-start: calc(var(--card-padding) * -1);
    }

    > :is(figure:not(.inset), footer):last-child {
      margin-block-end: calc(var(--card-padding) * -1);
    }

    > :is(header, footer) {
      
      padding: var(--card-padding);
      background-color: var(--color-fill);
    }

    > header {
      border-bottom: var(--border-width) solid var(--color-border-weak);
      padding-bottom: var(--flow-space);
    }

    > footer {
      border-top: var(--border-width) solid var(--color-border-weak);
      padding-top: var(--flow-space);
    }

    > .sidebar:only-child > figure:not(.inset) {
      margin-block: calc(var(--card-padding) * -1);

      &:first-child {
        margin-inline-start: calc(var(--card-padding) * -1);
      }
    }

    > .sidebar.reversed > figure:not(.inset):first-child {
      margin-inline-end: calc(var(--card-padding) * -1);
    }

    
    &:is(a, [role="link"]) {
      display: block;
      color: inherit;
      font-weight: inherit;
      text-decoration: none;
      cursor: pointer;
      transition: 0.1s ease-in-out;

      &:hover,
      &:focus-visible {
        background-image: linear-gradient(var(--color-primary-fill), var(--color-primary-fill));
        border-color: var(--color-primary-border-weak);
      }

      &:active {
        background-image: linear-gradient(var(--color-primary-fill-active), var(--color-primary-fill-active));
      }
    }
  }
}


@layer components {
  .dropdown > button[popovertarget] {
    inline-size: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3xs);

    
    &:where(:not(.primary, .accent, .danger, .success, .warning, .info, .contrast, .neutral, .secondary, .tertiary, .icon-only, .close)) {
      --button-surface: transparent;
      --button-text: var(--color-text);

      font-weight: var(--font-weight);

      &:where(:not([popover] *)) {
        border: var(--border-width) solid var(--color-border-strong);
      }

      &:hover {
        background-color: var(--color-fill);
      }
    }
  }

  
  .dropdown.border-none > button[popovertarget] {
    border: none;
    box-shadow: none;
  }

  .dropdown > button[popovertarget]::after {
    content: "";
    width: 1em;
    height: 1em;
    background-color: currentcolor;
    mask: var(--icon-chevron) center / 100% no-repeat;
    flex-shrink: 0;
  }

  .dropdown [popover] {
    inline-size: var(--dropdown-width, max-content);
    min-inline-size: var(--dropdown-min-width, 12rem);
    max-inline-size: var(--dropdown-max-width, calc(100% - var(--space-s-l)));
    padding: var(--space-2xs);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background-color: var(--color-surface-overlay);
    border: var(--border-width) solid var(--color-border-weak);
    border-radius: var(--border-radius-m);
    box-shadow: var(--shadow-medium);
    position-anchor: auto;
    inset-block: anchor(bottom) auto;
    inset-inline: auto anchor(right);
    margin: var(--space-3xs) 0 0;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;

    &:not(:popover-open) {
      display: none;
    }

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

    a {
      color: inherit;
    }
  }

  .dropdown.left [popover] {
    inset-inline: anchor(left) auto;
  }

  .dropdown.center [popover] {
    inset-inline: anchor(center) auto;
    translate: -50% 0;
    position-try-fallbacks: flip-block;
  }

  
  .dropdown [popover] .dropdown [popover] {
    inset-block: anchor(top) auto;
    inset-inline: anchor(right) auto;
    margin: 0;
    margin-inline-start: var(--space-3xs);
  }

   
  .dropdown > button[popovertarget].icon-only {
    inline-size: auto;
    display: inline-flex;
    justify-content: center;
  }

  .dropdown > button[popovertarget].icon-only::after,
  .dropdown > button[popovertarget]:has(> .icon:only-child)::after {
    content: none;
  }
}


@layer components {
  .icon {
    height: var(--icon-size, 1em);
    width: var(--icon-size, 1em);
    vertical-align: var(--icon-align, -0.125em);
  }

  .icon.small {
    --icon-size: 0.75em;
    --icon-align: -0.07em;
  }

  .icon.large {
    --icon-size: 1.5em;
    --icon-align: -0.37em;
  }
}


@layer components {
  [aria-busy="true"]:not(input, select, textarea, html, form, :has(.skeleton)) {
    --loader-size: 1.5em;
    --loader-align: -0.37em;

    &::before {
      display: inline-block;
      height: var(--loader-size);
      width: var(--loader-size);
      mask: var(--icon-loading) center / contain no-repeat;
      background-color: currentcolor;
      vertical-align: var(--loader-align);
      content: "";
    }

    &:not(:empty)::before {
      margin-inline-end: var(--space-2xs);
    }

    &.loader-small::before {
      --loader-size: 1em;
      --loader-align: -0.125em;
    }

    &.loader-large::before {
      --loader-size: 2em;
      --loader-align: -0.5em;
    }

    &.overlay {
      position: relative;

      > * {
        opacity: 0.4;
        pointer-events: none;
      }

      &::before {
        position: absolute;
        inset: 0;
        margin: auto;
        z-index: 1;
      }
    }
  }

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

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


@layer components { 
  
  aside > nav:not([class], [aria-label="breadcrumb" i]), 
  .dropdown [popover] {
    --menu-border-radius: min(4px, var(--border-radius-s));

    > * + * {
      margin-block-start: var(--space-2xs);
    }

    li {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      position: relative;
    }

    li ul:not([popover], [popover] > ul) {
      white-space: nowrap;
      margin-inline-start: var(--space-2xs);
      padding-inline-start: var(--space-xs);
      position: relative;
      border-inline-start: var(--border-width) solid var(--color-border-weak);
    }

    
    > ul:not([class]) {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }

    a,
    [role="link"] {
      border-radius: var(--menu-border-radius);
      text-decoration: none;
      padding: var(--space-3xs) var(--space-2xs);
      font-weight: var(--font-weight);

      &:is(:hover, :active) {
        background-image: linear-gradient(var(--color-fill), var(--color-fill));
      }
    }

    button,
    [role="button"] {
      border-radius: var(--menu-border-radius);
      text-align: left;
      font-weight: var(--font-weight);
      background-color: transparent;
      border: none;
      box-shadow: none;
      color: inherit;
      padding: var(--space-3xs) var(--space-2xs);

      &:is(:hover, :active) {
        background-image: linear-gradient(var(--color-fill), var(--color-fill));
      }
    }

    details {
      border-radius: var(--menu-border-radius);
      border: none;
      box-shadow: none;

      
      > *:not(summary) {
        margin: 0;
        margin-inline-start: var(--space-2xs);
      }
    }

    summary {
      padding: var(--space-3xs) var(--space-2xs);
      border-radius: var(--menu-border-radius);
    }

    summary:hover:not([role="button"]){
      border-radius: var(--menu-border-radius);
    }

    [aria-current] {
      background-color: var(--color-fill-hover);
      border-radius: var(--menu-border-radius);
    }

    [aria-disabled="true"] {
      opacity: 0.5;
      pointer-events: none;
    }
  }
}


@layer components {
  dialog {
    --modal-padding: var(--space-s-m);

    border: var(--border-width) solid var(--color-border-weak);
    border-radius: var(--border-radius-m);
    padding: var(--modal-padding);
    color: inherit;
    margin: auto;
    background-color: var(--color-surface-overlay);
    box-shadow: var(--shadow-large);
    z-index: 1055;
    max-inline-size: calc(100% - var(--space-s-l));
    max-block-size: 85dvh;
 
    
    > * + * {
      margin-block-start: var(--flow-space);
    }

    &::backdrop {
      background-color: var(--modal-color-backdrop, rgb(0 0 0 / 50%));
      backdrop-filter: blur(.4rem);
    }

    
    > :is(header, footer),
    > article > :is(header, footer) {
      padding: var(--modal-padding);
      background-color: var(--color-fill);
    }

    > header,
    > article > header {
      border-bottom: var(--border-width) solid var(--color-border-weak);
      padding-bottom: var(--flow-space);
    }

    > footer,
    > article > footer {
      border-top: var(--border-width) solid var(--color-border-weak);
      padding-top: var(--flow-space);
    }

    > :is(header, footer, hr),
    > article > :is(header, footer, hr){
      margin-inline: calc(var(--modal-padding) * -1);
    }

    > header:first-child,
    > article > header:first-child {
      margin-block-start: calc(var(--modal-padding) * -1);
    }

    > footer:last-child,
    > article > footer:last-child,
    > footer:has(+ :is(.close, form[method="dialog"]):last-child) {
      margin-block-end: calc(var(--modal-padding) * -1);
    }

    
    > .close,
    > form[method="dialog"] > .close {
      position: absolute;
      inset-block-start: calc(var(--modal-padding) - var(--space-xs));
      inset-inline-end: calc(var(--modal-padding) - var(--space-xs));
      margin: 0;
    }

    
    > form[method="dialog"]:has(> .close:only-child) {
      display: contents;
    }

    
    &:has(> .close, > form[method="dialog"] > .close) {
      > :first-child:not(article, header, .close, form[method="dialog"]),
      > article:first-child > :first-child:not(header) {
        padding-inline-end: calc(1em + var(--space-xs) * 2);
      }

      > header:first-child,
      > article:first-child > header:first-child {
        padding-inline-end: calc(var(--modal-padding) + 1em + var(--space-xs) * 2);
      }
    }
  }

  
  body:has(dialog:modal),
  body:has(dialog[popover]:popover-open) { 
    overflow: hidden; 
  }
}


@layer components {
  .skeleton{
    background-color: var(--color-fill-hover);
    border-radius: var(--border-radius-m);
    background-image: linear-gradient(
      90deg, 
      transparent 0%,
      var(--color-fill-hover) 50%,
      transparent 100%
    );
    background-size: 200% 100%;
    animation: skeleton 2s infinite;

    &.line {
      block-size: 1em;
      inline-size: 100%;
    }

    &.box {
      block-size: 4em;
      inline-size: 4em;     
    }

    &.circle {
      block-size: 3em;
      inline-size: 3em;
      border-radius: var(--border-radius-f);
      flex: none; 
    }
  }

  @keyframes skeleton {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .skeleton {
      animation: none;
    }
  }
}


@layer components {
  [data-tooltip] {
    position: relative;

    &:not(a, button, input, img) {
      border-bottom: 1px dotted;
      text-decoration: none;
      cursor: help;
    }

    &::before,
    &::after {
      display: block;
      z-index: 1080;
      position: absolute;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      inset-inline-start: 50%;
    }

    
    &::before {
      inset-block-end: calc(100% + 0.625rem);
      padding: var(--space-3xs) var(--space-2xs);
      overflow: hidden;
      transform: translate(-50%, 0.25rem);
      border-radius: var(--border-radius-s);
      background-color: var(--tooltip-background-color, var(--color-contrast));
      content: attr(data-tooltip);
      color: var(--tooltip-color, var(--color-contrast-inverse));
      font-style: normal;
      font-weight: var(--font-weight);
      font-size: var(--size-small);
      text-decoration: none;
      white-space: nowrap;
    }

    
    &::after {
      inset-block-end: calc(100% - 0.25rem);
      transform: translate(-50%, -0.3125rem);
      border-top: 0.3125rem solid;
      border-right: 0.3125rem solid transparent;
      border-left: 0.3125rem solid transparent;
      background-color: transparent;
      content: "";
      color: var(--tooltip-background-color, var(--color-contrast));
    }

    &[data-placement="bottom"] {
      &::before,
      &::after {
        inset-block: 100% auto;
        transform: translate(-50%, 0.25rem);
      }

      &::after {
        transform: translate(-50%, -0.3125rem);
        border: 0.3125rem solid transparent;
        border-bottom: 0.3125rem solid;
      }
    }

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

      &::after {
        transform: translate(0.3125rem, -50%);
        border: 0.3125rem solid transparent;
        border-left: 0.3125rem solid;
      }
    }

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

      &::after {
        transform: translate(-0.3125rem, -50%);
        border: 0.3125rem solid transparent;
        border-right: 0.3125rem solid;
      }
    }

    
    &:focus-visible,
    &:hover {
      &::before,
      &::after {
        transition: visibility 0s 500ms;
        opacity: 1;
        visibility: visible;
      }
    }
  }
}


@layer base {
  
  input:is([type="checkbox"], [type="radio"]) {
    --size: 1em;

    appearance: none;
    height: var(--size);
    width: var(--size);
    position: relative;
    cursor: pointer;
    font-size: inherit;
    margin: 0;
    margin-block-end: -0.15em;
    margin-inline-end: var(--space-3xs);
    border: var(--border-width) solid var(--color-border-strong);

    &:focus {
      outline-offset: var(--outline-offset, 1px);
      outline: var(--outline-width, 2px) solid var(--color-primary-focus);

      &[aria-invalid="false"] {
        outline-color: var(--color-success-focus);
      }

      &[aria-invalid="true"] {
        outline-color: var(--color-danger-focus);
      }
    }
  }

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

  input:is([type="checkbox"], [type="radio"]) + label {
    cursor: pointer;
    display: inline-block;

    &:not(:last-of-type) {
      margin-inline-end: var(--space-s);
    }
  }

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

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-color: var(--color-primary-inverse);
      mask-position: center;
      mask-repeat: no-repeat;
      mask-size: 100%;
    }

    &[aria-invalid="false"] {
      background-color: var(--color-success);
      border-color: var(--color-success);
    }

    &[aria-invalid="true"] {
      background-color: var(--color-danger);
      border-color: var(--color-danger);
    }
  }

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

    &:checked::after {
      mask-image: var(--icon-check);
    }

    &:indeterminate::after {
      mask-image: var(--icon-minus);
    }
  }

  input[type="radio"] {
    border-radius: var(--border-radius-f);

    &:checked::after {
      
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='currentColor'/%3E%3C/svg%3E");
    }
  }

  
  input[type="checkbox"][role="switch"] {
    --width: 1.85;

    background-color: var(--switch-color-surface); 
    inline-size: calc(var(--width) * var(--size));
    transition: 0.1s ease-in-out;
    border: var(--border-width) solid var(--switch-color-border);
    border-radius: var(--border-radius-f);
    padding: 1px;

    &::before {
      content: "";
      display: block;
      aspect-ratio: 1;
      block-size: calc(var(--size) - (2 * var(--border-width)) - 2px);
      border-radius: var(--border-radius-f);
      background-color: var(--color-primary-inverse);
      box-shadow: var(--shadow-small);
      transition: margin 0.1s ease-in-out;
    }

    &:checked {
      background-color: var(--color-primary);
      border-color: var(--color-primary);
      
      &::before {
        margin-inline-start: calc((var(--width) * var(--size)) - var(--size));
        background-color: var(--color-primary-inverse);
      }

      &[aria-invalid="false"] {
        background-color: var(--color-success);
        border-color: var(--color-success);
      }

      &[aria-invalid="true"] {
        background-color: var(--color-danger);
        border-color: var(--color-danger);
      }
    }

    &[disabled] {
      opacity: 0.5;
      pointer-events: none;
    }
  }
}


@layer base {
  
  :where(input, select, textarea) {
    background-color: var(--form-color-surface);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--border-radius-m);
    box-shadow: var(--shadow-small);
    line-height: var(--line-height);
  }

  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
  input[type="file"]::file-selector-button,
  select,
  textarea {
    appearance: none;
    padding: var(--space-2xs) var(--space-xs);

    &.small {
      padding: var(--space-3xs) var(--space-2xs);
      font-size: var(--size-small);
    }

    &.large {
      padding: var(--space-xs) var(--space-s);
      font-size: var(--size-h4);
    }
  }

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

  
  .cluster > :is(input:not([type="checkbox"], [type="radio"]), select, textarea, button) {
    inline-size: auto;
  }

  label {
    display: block;
  }

  :where(form, fieldset) > small {
    display: block;
    color: var(--color-text-muted);
  }

  :is(input, select, textarea) {
    &[aria-invalid="false"] {
      border-color: var(--color-success-border-strong);

      + small {
        color: var(--color-success-text);
      }
    }

    &[aria-invalid="true"] {
      border-color: var(--color-danger-border-strong);

      + small {
        color: var(--color-danger-text);
      }
    }
  }

  textarea {
    resize: vertical;
    border-bottom-right-radius: min(var(--border-radius-s), 4px);
  }

  
  fieldset {
    border: var(--border-width) solid var(--color-border-weak);
    border-radius: var(--border-radius-s);
    padding: var(--space-xs);

    legend {
      font-weight: var(--font-weight-bold);
      font-size: var(--size-small);
    }
  }

  fieldset:is(
      [role="group"], 
      .bare, .cluster, .container, .grid, .sidebar, .repel, .switcher
    ) {
    border: 0;
    padding: 0;

    

 
  }

  
  :is(input, textarea)[readonly]:focus {
    outline: transparent;
  }

  
  input:not([type="submit"], [type="button"], [type="reset"], [role="switch"])[disabled],
  select[disabled],
  textarea[disabled],
  :where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
    background-color: transparent;
    border-color: var(--form-color-border-disabled); 
    opacity: 0.5;
    pointer-events: none;
  }

  label[aria-disabled="true"],
  label:has(> input[disabled]),
  input:is([type="checkbox"], [type="radio"])[disabled] + label {
    
    opacity: 0.5;
    pointer-events: none;
  }

  
  input::placeholder,
  textarea::placeholder,
  select:invalid {
    color: var(--color-text-muted);
    opacity: 0.9;
  }

  
  input:is([type="color"], [type="file"]) {
    --padding-vertical: var(--space-2xs);

    block-size: calc(
      (1em * var(--line-height)) +
      (var(--padding-vertical) * 2) +
      (var(--border-width) * 2)
    );
    cursor: pointer;

    &.small {
      --padding-vertical: var(--space-3xs);
    }

    &.large {
      --padding-vertical: var(--space-xs);    
    }
  }

  input[type="color"]::-moz-color-swatch,
  input[type="color"]::-webkit-color-swatch {
    
    border: none;
    border-radius: var(--border-radius-s);
  }

  input[type="file"] {
    &::file-selector-button {
      background-color: var(--color-primary);
      color: var(--color-primary-inverse);
      box-shadow: var(--shadow-small);
      padding: var(--space-2xs) var(--space-xs);
      border: var(--border-width) solid var(--color-primary);
      font-weight: bold;
      line-height: var(--line-height);
      text-align: center;
      margin-inline-end: var(--space-xs);
      border-radius: 0;
      font-family: inherit;
    }

    &:is([aria-current], :hover)::file-selector-button {
      background-color: oklch(from var(--color-primary) calc(l * var(--hover-multiplier)) c h);
      border-color: oklch(from var(--color-primary) calc(l * var(--hover-multiplier)) c h);
    }

    &:active::file-selector-button {
      background-color: oklch(from var(--color-primary) calc(l * var(--hover-multiplier) * var(--hover-multiplier)) c h);
      border-color: oklch(from var(--color-primary) calc(l * var(--hover-multiplier) * var(--hover-multiplier)) c h);
    }

    &.small::file-selector-button {
      padding: var(--space-3xs) var(--space-2xs);
      font-size: var(--size-small);
    }

    &.large::file-selector-button {
      padding: var(--space-xs) var(--space-s);
      font-size: var(--size-h4);
    }
  }

  input[type="range"] {
    background-color: var(--color-fill);
    border-color: var(--color-border-weak);
    height: 0.33em;
    appearance: none;
    cursor: pointer;
    box-shadow: var(--shadow-inner);

    &::-moz-range-thumb {
      width: 1em;
      height: 1em;
      background-color: var(--color-text);
      border-radius: var(--border-radius-f);
      border: none;
      box-shadow: var(--shadow-small);
    }

    &::-webkit-slider-thumb {
      appearance: none;
      width: 1em;
      height: 1em;
      background-color: var(--color-text);
      border-radius: var(--border-radius-f);
      box-shadow: var(--shadow-small);
    }

    &:active {
      background-color: var(--color-fill-hover);

      &::-moz-range-thumb {
        outline: 2px solid var(--color-primary-focus);
      }

      &::-webkit-slider-thumb {
        outline: 2px solid var(--color-primary-focus);
      }
    }

    &:focus-visible {
      outline: transparent;
      box-shadow: 0 0 0 var(--outline-width) var(--color-primary-focus);
    }
  }

  input[type="search"] {
    padding-inline-start: calc(var(--space-xs) + var(--space-2xs) + 1em);
    background-image: var(--icon-search);
    background-size: 1em auto;
    background-position: center left var(--space-xs);
    background-repeat: no-repeat; 
  }

  input:not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], 
    [type="month"], [type="time"], [type="week"], [type="range"]),
  textarea {
    &[aria-invalid] {
      background-size: 1em auto;
      background-repeat: no-repeat;
      padding-inline-end: calc(var(--space-xs) + var(--space-2xs) + 1em);
    }

    &[aria-invalid="false"]{
      background-image: var(--icon-valid);
    }

    &[aria-invalid="true"]{
      background-image: var(--icon-invalid);
    }
  }

  input:not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], 
    [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid] {
      background-position: center right var(--space-xs);
    }

  textarea[aria-invalid] {
    background-position: top calc(var(--space-2xs) + 0.3em) right var(--space-xs);
  }

  select:not([multiple], [size]) {
    background-image: var(--icon-select);
    background-position: center right var(--space-xs);
    background-size: 1.125rem;
    background-repeat: no-repeat;
  }

  select[multiple] option:checked {
    background-color: var(--color-fill-hover);
  }

  
  input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="checkbox"], [type="radio"], [readonly]):focus,
  select:is(:focus, :open),
  textarea:not([readonly]):focus {
    outline: var(--outline-width, 2px) solid var(--color-primary-focus);
    outline-offset: calc(var(--outline-width) * -1);
    border-color: transparent;

    &[aria-invalid="false"] {
      outline-color: var(--color-success-focus);
    }

    &[aria-invalid="true"] {
      outline-color: var(--color-danger-focus);
    }
  }

  
  :where(form, fieldset):not(.cluster, .container, .grid, .sidebar, .repel, .switcher, [role="group"]){
    > * + * {
      margin-block-start: var(--flow-space);
    }

    > label:not(:has(> :is(input, select, textarea))) + :is(input, select, textarea),
    > :is(input, select, textarea) + small {
      --flow-space: var(--flow-space-glue);
    }

    
    > input:is([type="radio"], [type="checkbox"]) + label,
    > label + input:is([type="radio"], [type="checkbox"]) {
      --flow-space: 0;
    }

    
    > input:is([type="radio"], [type="checkbox"]) + input:is([type="radio"], [type="checkbox"]),
    > label:has(> :is([type="radio"], [type="checkbox"])) + label:has(> :is([type="radio"], [type="checkbox"])) {
      --flow-space: var(--flow-space-tight);
    }
  }

  
  label > :is(input, select, textarea) {
    margin-block-start: var(--flow-space-glue);
  }

  
  fieldset:not(.bare, .cluster, .container, .grid, .sidebar, .repel, .switcher, [role="group"]) > legend + * {
    margin-block-start: 0;
  }

  [dir="rtl"] { 
    input[type="search"],
    select:not([multiple], [size]),
    input:not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], 
    [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid] {
      background-position: center left var(--space-xs);
    }

    textarea[aria-invalid] {
      background-position: top calc(var(--space-2xs) + 0.3em) left var(--space-xs);
    }
  }

}

@layer components {
  [role="group"]:not(:has(> :is(details, .avatar))) {
    display: flex;
    align-items: center;

    > * {
      border-radius: 0;
    }

    :not(:first-child, button, input:is([type="submit"], [type="button"], [type="reset"])) {
      border-inline-start: 0;
    }
    
    :last-child {
      border-bottom-right-radius: var(--border-radius-m);
      border-top-right-radius: var(--border-radius-m);
    }

    :first-child {
      border-bottom-left-radius: var(--border-radius-m);
      border-top-left-radius: var(--border-radius-m);
    }

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


@layer components {
  
  nav :is(ol,ul) {
    list-style: none;
    padding: 0;
  }

  nav a:not([role="button"], [role="link"]:not([role="button"])) {
      color: inherit;
      font-weight: inherit;

      &:not(:hover, :active, :focus) {
        text-decoration: none;
      }
  }

  
  header > nav,
  nav.navbar {
    
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap);

    > ul  {
      
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs-s);
      justify-content: flex-start;
      align-items: center;      
    }
  }

  
  header.sticky:has(> nav),
  nav.navbar.sticky {
    position: sticky;
    top: 0;
    z-index: 1020;
  }

  
  aside.full-height {
    display: flex;
    flex-direction: column;

    > nav {
      flex: 1;
      min-block-size: 0;
      overflow-y: auto;
    }

    > footer:last-of-type {
      margin-block-start: auto;
    }
  }

  
  
  nav.tabs > ul,
  nav[aria-label="pagination" i] > :is(ol,ul) {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;

    li {
      min-inline-size: 2rem;
      text-align: center;
      flex-shrink: 0;

      
      a,
      [role="link"] {
        text-decoration: none;
      }

      button,
      [role="button"] {
        background-color: transparent;
        color: inherit;
        box-shadow: none;
        font-weight: inherit;
        line-height: inherit;
        border-radius: inherit;
        width: 100%;
      }

      [aria-disabled="true"] {
        opacity: 0.5;
        pointer-events: none;
      }
    }
  }

  
  
  nav.tabs > ul {
    inline-size: 100%;
    border-bottom: var(--border-width) solid var(--color-border-weak);
    color: var(--color-text-muted);
    font-size: var(--size-small);

    li {
      padding: var(--space-3xs) var(--space-2xs);

      &:is(:hover, :active) {
        color: var(--color-text);
      }
      
      &:is([aria-current], :has([aria-current])) {
        color: var(--color-text);
        font-weight: var(--font-weight-bold);
        border-bottom: calc(var(--border-width) + 1px) solid var(--color-primary);
      }

      button,
      [role="button"] {
        padding: 0;
        border: 0;
      }
    }
  }

  
  nav[aria-label="pagination" i] > :is(ol,ul) {
    inline-size: fit-content;
    max-inline-size: 100%;
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--border-radius-s);
    box-shadow: var(--shadow-small);

    li {
      
      + li {
        border-inline-start: var(--border-width) solid var(--color-border-strong);
      }

      &:is([aria-current], :has([aria-current])) {
        background-color: var(--color-fill-hover);
        font-weight: var(--font-weight-bold);
      }

      > * {
        padding: var(--space-3xs) var(--space-2xs);
        display: block;
        font-size: var(--size-small);
        border: none;
      }

      a,
      [role="link"],
      button,
      [role="button"] {
        
        &:is(:hover, :active) {
          background-color: var(--color-fill);
        }
      }
    }
  }

  
  nav[aria-label="breadcrumb" i] > :is(ol,ul) {
    
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs-s);
    justify-content: flex-start;
    align-items: center;

    li:not(:last-child)::after {
      display: inline-block;
      width: 1em;
      height: 1em;
      background-color: currentcolor;
      mask: var(--icon-chevron) center / 100% no-repeat;
      transform: rotate(-90deg);
      content: "";
      vertical-align: middle;
      margin: 0;
      margin-inline-start: var(--space-xs-s);
    }

    li:last-child,
    [aria-current] {
      font-weight: var(--font-weight-bold);
    }
  }

  [dir="rtl"] nav[aria-label="breadcrumb" i] > :is(ol,ul) li:not(:last-child)::after {
    transform: rotate(90deg);
  }
}


@layer utilities {
  .sidebar > .full-height {
    block-size: auto;
    max-block-size: 100dvh;
  }
}


@layer base {
  progress,
  meter {
    appearance: none;
    block-size: 0.5em;
    border: var(--border-width) solid var(--color-border-weak);
    border-radius: var(--border-radius-f);
    box-shadow: var(--shadow-inner);
    overflow: hidden;
    inline-size: 100%;
  }

  progress {
    background-color: var(--color-fill);

    &::-webkit-progress-bar {
      background: none;
      border-radius: var(--border-radius-f);
    }

    &::-webkit-progress-value {
      background-color: var(--color-primary);
      transition: width 0.1s ease-in-out;
    }

    &::-moz-progress-bar {
      background-color: var(--color-primary);
    }
  }

  progress:indeterminate {
    background: var(--color-fill) 
      linear-gradient( to right, var(--color-primary) 30%, transparent 30% ) 
      top left / 150% 150% no-repeat;
    animation: progress-indeterminate 1s linear infinite;

    &::-webkit-progress-value {
      background-color: transparent;
    }

    &::-moz-progress-bar {
      background-color: transparent;
    }
  }

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

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

  @media (prefers-reduced-motion: reduce) {
    progress:indeterminate {
      animation: none;
      background-position: 100% 0;
    }
  }

  meter {
    background: var(--color-fill);

    &::-moz-meter-bar {
      background: var(--color-success);
    }

    &:-moz-meter-sub-optimum::-moz-meter-bar {
      background: var(--color-warning);
    }

    &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
      background: var(--color-danger);
    }

    &::-webkit-meter-bar {
      background: transparent;
      border-radius: var(--border-radius-f);
      block-size: 0.5em;
    }

    &::-webkit-meter-optimum-value {
      background: var(--color-success);
    }

    &::-webkit-meter-suboptimum-value {
      background: var(--color-warning);
    }

    &::-webkit-meter-even-less-good-value {
      background: var(--color-danger);
    }
  }
}


@layer utilities {
  
  .size-h1    {font-size: var(--size-h1)}
  .size-h2    {font-size: var(--size-h2)}
  .size-h3    {font-size: var(--size-h3)}
  .size-h4    {font-size: var(--size-h4)}
  .size-body  {font-size: var(--size-body)}
  .size-small {font-size: var(--size-small)}
  .size-tiny  {font-size: var(--size-tiny)}

  
  .weight-normal {font-weight: var(--font-weight)}
  .weight-bold   {font-weight: var(--font-weight-bold)}

  .text-center {text-align: center}

  
  .rounded   {border-radius: var(--border-radius-f)}
  .radius-0  {border-radius: 0}
  .radius-s  {border-radius: var(--border-radius-s)}
  .radius-m  {border-radius: var(--border-radius-m)}
  .radius-l  {border-radius: var(--border-radius-l)}
  .radius-f  {border-radius: var(--border-radius-f)}

  
  .border-none   {border: none}
  .border-weak   {border: var(--border-width) solid var(--color-border-weak)}
  .border-strong {border: var(--border-width) solid var(--color-border-strong)}

  
  .shadow-none  {box-shadow: none}
  .shadow-s     {box-shadow: var(--shadow-small)}
  .shadow-m     {box-shadow: var(--shadow-medium)}
  .shadow-l     {box-shadow: var(--shadow-large)}
  .shadow-inner {box-shadow: var(--shadow-inner)}



  
  .flow-glue  > * + * {margin-block-start: var(--flow-space-glue)}
  .flow-tight > * + * {margin-block-start: var(--flow-space-tight)}
  .flow-loose > * + * {margin-block-start: var(--flow-space-loose)}
  .flow-none  > * + * {margin-block-start: 0}

  
  .gap-0   {gap: 0}
  .gap-3xs {gap: var(--space-3xs)}
  .gap-2xs {gap: var(--space-2xs)}
  .gap-xs  {gap: var(--space-xs)}
  .gap-s   {gap: var(--space-s)}
  .gap-m   {gap: var(--space-m)}
  .gap-l   {gap: var(--space-l)}
  .gap-xl  {gap: var(--space-xl)}
  .gap-2xl {gap: var(--space-2xl)}
  .gap-3xl {gap: var(--space-3xl)}

  
  .bg-sunken      {background-color: var(--color-surface-sunken)}
  .bg-surface     {background-color: var(--color-surface)}
  .bg-raised      {background-color: var(--color-surface-raised)}
  .bg-overlay     {background-color: var(--color-surface-overlay)}
  .bg-fill        {background-color: var(--color-fill)}
  .bg-transparent {background-color: transparent}
  
  .bg-contrast {
    background-color: var(--color-contrast);
    color: var(--color-contrast-inverse);
  }

  
  .bg-primary {background-color: var(--color-primary-fill)}
  .bg-accent  {background-color: var(--color-accent-fill)}
  .bg-success {background-color: var(--color-success-fill)}
  .bg-danger  {background-color: var(--color-danger-fill)}
  .bg-warning {background-color: var(--color-warning-fill)}
  .bg-info    {background-color: var(--color-info-fill)}

  
  .fg-primary {color: var(--color-primary-text)}
  .fg-accent  {color: var(--color-accent-text)}
  .fg-success {color: var(--color-success-text)}
  .fg-danger  {color: var(--color-danger-text)}
  .fg-warning {color: var(--color-warning-text)}
  .fg-info    {color: var(--color-info-text)}
  .fg-muted   {color: var(--color-text-muted)}

  
  .full-width  {inline-size: 100%}
  .full-height {block-size: 100dvh}

  
  .overflow-x {overflow-x: auto}
  .overflow-y {overflow-y: auto}

  
  .m-0   {margin: 0}
  .m-3xs {margin: var(--space-3xs)}
  .m-2xs {margin: var(--space-2xs)}
  .m-xs  {margin: var(--space-xs)}
  .m-s   {margin: var(--space-s)}
  .m-m   {margin: var(--space-m)}
  .m-l   {margin: var(--space-l)}
  .m-xl  {margin: var(--space-xl)}
  .m-2xl {margin: var(--space-2xl)}
  .m-3xl {margin: var(--space-3xl)}

  
  .mx-0    {margin-inline: 0}
  .mx-auto {margin-inline: auto}
  .mx-3xs  {margin-inline: var(--space-3xs)}
  .mx-2xs  {margin-inline: var(--space-2xs)}
  .mx-xs   {margin-inline: var(--space-xs)}
  .mx-s    {margin-inline: var(--space-s)}
  .mx-m    {margin-inline: var(--space-m)}
  .mx-l    {margin-inline: var(--space-l)}
  .mx-xl   {margin-inline: var(--space-xl)}
  .mx-2xl  {margin-inline: var(--space-2xl)}
  .mx-3xl  {margin-inline: var(--space-3xl)}

  
  .my-0   {margin-block: 0}
  .my-3xs {margin-block: var(--space-3xs)}
  .my-2xs {margin-block: var(--space-2xs)}
  .my-xs  {margin-block: var(--space-xs)}
  .my-s   {margin-block: var(--space-s)}
  .my-m   {margin-block: var(--space-m)}
  .my-l   {margin-block: var(--space-l)}
  .my-xl  {margin-block: var(--space-xl)}
  .my-2xl {margin-block: var(--space-2xl)}
  .my-3xl {margin-block: var(--space-3xl)}

  
  .p-0   {padding: 0}
  .p-3xs {padding: var(--space-3xs)}
  .p-2xs {padding: var(--space-2xs)}
  .p-xs  {padding: var(--space-xs)}
  .p-s   {padding: var(--space-s)}
  .p-m   {padding: var(--space-m)}
  .p-l   {padding: var(--space-l)}
  .p-xl  {padding: var(--space-xl)}
  .p-2xl {padding: var(--space-2xl)}
  .p-3xl {padding: var(--space-3xl)}

  
  .px-0   {padding-inline: 0}
  .px-3xs {padding-inline: var(--space-3xs)}
  .px-2xs {padding-inline: var(--space-2xs)}
  .px-xs  {padding-inline: var(--space-xs)}
  .px-s   {padding-inline: var(--space-s)}
  .px-m   {padding-inline: var(--space-m)}
  .px-l   {padding-inline: var(--space-l)}
  .px-xl  {padding-inline: var(--space-xl)}
  .px-2xl {padding-inline: var(--space-2xl)}
  .px-3xl {padding-inline: var(--space-3xl)}

  
  .py-0   {padding-block: 0}
  .py-3xs {padding-block: var(--space-3xs)}
  .py-2xs {padding-block: var(--space-2xs)}
  .py-xs  {padding-block: var(--space-xs)}
  .py-s   {padding-block: var(--space-s)}
  .py-m   {padding-block: var(--space-m)}
  .py-l   {padding-block: var(--space-l)}
  .py-xl  {padding-block: var(--space-xl)}
  .py-2xl {padding-block: var(--space-2xl)}
  .py-3xl {padding-block: var(--space-3xl)}
}