@layer openprops, theme, normalize, components.root, components.extended, utils;

/* Open Props */

/*
* Open Props
* Import as many props as you need here.
*/

@layer openprops{
@custom-media --motionOK      (prefers-reduced-motion: no-preference);
@custom-media --motionNotOK   (prefers-reduced-motion: reduce);
@custom-media --opacityOK     (prefers-reduced-transparency: no-preference);
@custom-media --opacityNotOK  (prefers-reduced-transparency: reduce);
@custom-media --useDataOK     (prefers-reduced-data: no-preference);
@custom-media --useDataNotOK  (prefers-reduced-data: reduce);

@custom-media --OSdark        (prefers-color-scheme: dark);
@custom-media --OSlight       (prefers-color-scheme: light);

@custom-media --highContrast  (prefers-contrast: more);
@custom-media --lowContrast   (prefers-contrast: less);

@custom-media --invertedColors  (inverted-colors: inverted);
@custom-media --forcedColors  (forced-colors: active);

@custom-media --portrait      (orientation: portrait);
@custom-media --landscape     (orientation: landscape);

@custom-media --HDcolor       (dynamic-range: high) or (color-gamut: p3);

@custom-media --touch         (hover: none) and (pointer: coarse);
@custom-media --stylus        (hover: none) and (pointer: fine);
@custom-media --pointer       (hover) and (pointer: coarse);
@custom-media --mouse         (hover) and (pointer: fine);

@custom-media --xxs-only      (0px <= width < 240px);
@custom-media --xxs-n-above   (width >= 240px);
@custom-media --xxs-n-below   (width < 240px);
@custom-media --xxs-phone     (--xxs-only) and (--portrait);

@custom-media --xs-only       (240px <= width < 360px);
@custom-media --xs-n-above    (width >= 360px);
@custom-media --xs-n-below    (width < 360px);
@custom-media --xs-phone      (--xs-only) and (--portrait);

@custom-media --sm-only       (360px <= width < 480px);
@custom-media --sm-n-above    (width >= 480px);
@custom-media --sm-n-below    (width < 480px);
@custom-media --sm-phone      (--sm-only) and (--portrait);

@custom-media --md-only       (480px <= width < 768px);
@custom-media --md-n-above    (width >= 768px);
@custom-media --md-n-below    (width < 768px);
@custom-media --md-phone      (--md-only) and (--portrait);

@custom-media --lg-only       (768px <= width < 1024px);
@custom-media --lg-n-above    (width >= 1024px);
@custom-media --lg-n-below    (width < 1024px);
@custom-media --lg-phone      (--lg-only) and (--portrait);

@custom-media --xl-only       (1024px <= width < 1440px);
@custom-media --xl-n-above    (width >= 1440px);
@custom-media --xl-n-below    (width < 1440px);

@custom-media --xxl-only      (1440px <= width < 1920px);
@custom-media --xxl-n-above   (width >= 1920px);
@custom-media --xxl-n-below   (width < 1920px);
}

@layer openprops{
:where(html) {
  --font-system-ui: system-ui, sans-serif;
  --font-transitional: Charter, Bitstream Charter, Sitka Text, Cambria, serif;
  --font-old-style: Iowan Old Style, Palatino Linotype, URW Palladio L, P052, serif;
  --font-humanist: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;
  --font-geometric-humanist: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif;
  --font-classical-humanist: Optima, Candara, Noto Sans, source-sans-pro, sans-serif;
  --font-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;
  --font-monospace-slab-serif: Nimbus Mono PS, Courier New, monospace;
  --font-monospace-code: Dank Mono,Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, monospace;
  --font-industrial: Bahnschrift, DIN Alternate, Franklin Gothic Medium, Nimbus Sans Narrow, sans-serif-condensed, sans-serif;
  --font-rounded-sans: ui-rounded, Hiragino Maru Gothic ProN, Quicksand, Comfortaa, Manjari, Arial Rounded MT, Arial Rounded MT Bold, Calibri, source-sans-pro, sans-serif;
  --font-slab-serif: Rockwell, Rockwell Nova, Roboto Slab, DejaVu Serif, Sitka Small, serif;
  --font-antique: Superclarendon, Bookman Old Style, URW Bookman, URW Bookman L, Georgia Pro, Georgia, serif;
  --font-didone: Didot, Bodoni MT, Noto Serif Display, URW Palladio L, P052, Sylfaen, serif;
  --font-handwritten: Segoe Print, Bradley Hand, Chilanka, TSCu_Comic, casual, cursive;
  --font-sans: var(--font-system-ui);
  --font-serif: ui-serif, serif;
  --font-mono: var(--font-monospace-code);
  --font-weight-1: 100;
  --font-weight-2: 200;
  --font-weight-3: 300;
  --font-weight-4: 400;
  --font-weight-5: 500;
  --font-weight-6: 600;
  --font-weight-7: 700;
  --font-weight-8: 800;
  --font-weight-9: 900;
  --font-lineheight-00: .95;
  --font-lineheight-0: 1.1;
  --font-lineheight-1: 1.25;
  --font-lineheight-2: 1.375;
  --font-lineheight-3: 1.5;
  --font-lineheight-4: 1.75;
  --font-lineheight-5: 2;
  --font-letterspacing-0: -.05em;
  --font-letterspacing-1: .025em;
  --font-letterspacing-2: .050em;
  --font-letterspacing-3: .075em;
  --font-letterspacing-4: .150em;
  --font-letterspacing-5: .500em;
  --font-letterspacing-6: .750em;
  --font-letterspacing-7: 1em;
  --font-size-00: .5rem;
  --font-size-0: .75rem;
  --font-size-1: 1rem;
  --font-size-2: 1.1rem;
  --font-size-3: 1.25rem;
  --font-size-4: 1.5rem;
  --font-size-5: 2rem;
  --font-size-6: 2.5rem;
  --font-size-7: 3rem;
  --font-size-8: 3.5rem;
  --font-size-fluid-0: clamp(.75rem, 2vw, 1rem);
  --font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
  --font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
  --font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);
}
}

@layer openprops{
:where(html) {
  --size-000: -.5rem;
  --size-00: -.25rem;
  --size-1: .25rem;
  --size-2: .5rem;
  --size-3: 1rem;
  --size-4: 1.25rem;
  --size-5: 1.5rem;
  --size-6: 1.75rem;
  --size-7: 2rem;
  --size-8: 3rem;
  --size-9: 4rem;
  --size-10: 5rem;
  --size-11: 7.5rem;
  --size-12: 10rem;
  --size-13: 15rem;
  --size-14: 20rem;
  --size-15: 30rem;
  --size-px-000: -8px;
  --size-px-00: -4px;
  --size-px-1: 4px;
  --size-px-2: 8px;
  --size-px-3: 16px;
  --size-px-4: 20px;
  --size-px-5: 24px;
  --size-px-6: 28px;
  --size-px-7: 32px;
  --size-px-8: 48px;
  --size-px-9: 64px;
  --size-px-10: 80px;
  --size-px-11: 120px;
  --size-px-12: 160px;
  --size-px-13: 240px;
  --size-px-14: 320px;
  --size-px-15: 480px;
  --size-fluid-1: clamp(.5rem, 1vw, 1rem);
  --size-fluid-2: clamp(1rem, 2vw, 1.5rem);
  --size-fluid-3: clamp(1.5rem, 3vw, 2rem);
  --size-fluid-4: clamp(2rem, 4vw, 3rem);
  --size-fluid-5: clamp(4rem, 5vw, 5rem);
  --size-fluid-6: clamp(5rem, 7vw, 7.5rem);
  --size-fluid-7: clamp(7.5rem, 10vw, 10rem);
  --size-fluid-8: clamp(10rem, 20vw, 15rem);
  --size-fluid-9: clamp(15rem, 30vw, 20rem);
  --size-fluid-10: clamp(20rem, 40vw, 30rem);
  --size-content-1: 20ch;
  --size-content-2: 45ch;
  --size-content-3: 60ch;
  --size-header-1: 20ch;
  --size-header-2: 25ch;
  --size-header-3: 35ch;
  --size-xxs: 240px;
  --size-xs: 360px;
  --size-sm: 480px;
  --size-md: 768px;
  --size-lg: 1024px;
  --size-xl: 1440px;
  --size-xxl: 1920px;
  --size-relative-000: -.5ch;
  --size-relative-00: -.25ch;
  --size-relative-1: .25ch;
  --size-relative-2: .5ch;
  --size-relative-3: 1ch;
  --size-relative-4: 1.25ch;
  --size-relative-5: 1.5ch;
  --size-relative-6: 1.75ch;
  --size-relative-7: 2ch;
  --size-relative-8: 3ch;
  --size-relative-9: 4ch;
  --size-relative-10: 5ch;
  --size-relative-11: 7.5ch;
  --size-relative-12: 10ch;
  --size-relative-13: 15ch;
  --size-relative-14: 20ch;
  --size-relative-15: 30ch;
}
}

@layer openprops{
:where(html) {
  --ease-1: cubic-bezier(.25, 0, .5, 1);
  --ease-2: cubic-bezier(.25, 0, .4, 1);
  --ease-3: cubic-bezier(.25, 0, .3, 1);
  --ease-4: cubic-bezier(.25, 0, .2, 1);
  --ease-5: cubic-bezier(.25, 0, .1, 1);
  --ease-in-1: cubic-bezier(.25, 0, 1, 1);
  --ease-in-2: cubic-bezier(.50, 0, 1, 1);
  --ease-in-3: cubic-bezier(.70, 0, 1, 1);
  --ease-in-4: cubic-bezier(.90, 0, 1, 1);
  --ease-in-5: cubic-bezier(1, 0, 1, 1);
  --ease-out-1: cubic-bezier(0, 0, .75, 1);
  --ease-out-2: cubic-bezier(0, 0, .50, 1);
  --ease-out-3: cubic-bezier(0, 0, .3, 1);
  --ease-out-4: cubic-bezier(0, 0, .1, 1);
  --ease-out-5: cubic-bezier(0, 0, 0, 1);
  --ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
  --ease-in-out-2: cubic-bezier(.3, 0, .7, 1);
  --ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
  --ease-in-out-4: cubic-bezier(.7, 0, .3, 1);
  --ease-in-out-5: cubic-bezier(.9, 0, .1, 1);
  --ease-elastic-out-1: cubic-bezier(.5, .75, .75, 1.25);
  --ease-elastic-out-2: cubic-bezier(.5, 1, .75, 1.25);
  --ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25);
  --ease-elastic-out-4: cubic-bezier(.5, 1.5, .75, 1.25);
  --ease-elastic-out-5: cubic-bezier(.5, 1.75, .75, 1.25);
  --ease-elastic-in-1: cubic-bezier(.5, -0.25, .75, 1);
  --ease-elastic-in-2: cubic-bezier(.5, -0.50, .75, 1);
  --ease-elastic-in-3: cubic-bezier(.5, -0.75, .75, 1);
  --ease-elastic-in-4: cubic-bezier(.5, -1.00, .75, 1);
  --ease-elastic-in-5: cubic-bezier(.5, -1.25, .75, 1);
  --ease-elastic-in-out-1: cubic-bezier(.5, -.1, .1, 1.5);
  --ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5);
  --ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5);
  --ease-elastic-in-out-4: cubic-bezier(.5, -.7, .1, 1.5);
  --ease-elastic-in-out-5: cubic-bezier(.5, -.9, .1, 1.5);
  --ease-step-1: steps(2);
  --ease-step-2: steps(3);
  --ease-step-3: steps(4);
  --ease-step-4: steps(7);
  --ease-step-5: steps(10);
  --ease-elastic-1: var(--ease-elastic-out-1);
  --ease-elastic-2: var(--ease-elastic-out-2);
  --ease-elastic-3: var(--ease-elastic-out-3);
  --ease-elastic-4: var(--ease-elastic-out-4);
  --ease-elastic-5: var(--ease-elastic-out-5);
  --ease-squish-1: var(--ease-elastic-in-out-1);
  --ease-squish-2: var(--ease-elastic-in-out-2);
  --ease-squish-3: var(--ease-elastic-in-out-3);
  --ease-squish-4: var(--ease-elastic-in-out-4);
  --ease-squish-5: var(--ease-elastic-in-out-5);
  --ease-spring-1: linear(
    0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
    0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%,
    1.001
  );
  --ease-spring-2: linear(
    0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962,
    1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%,
    0.999 61.6%, 0.995 71.2%, 1
  );
  --ease-spring-3: linear(
    0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077,
    1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%,
    1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%,
    0.997 69.8%, 1.003 76.9%, 1
  );
  --ease-spring-4: linear(
    0, 0.009, 0.037 1.7%, 0.153 3.6%, 0.776 10.3%, 1.001, 1.142 16%, 1.185,
    1.209 19%, 1.215 19.9% 20.8%, 1.199, 1.165 25%, 1.056 30.3%, 1.008 33%, 0.973,
    0.955 39.2%, 0.953 41.1%, 0.957 43.3%, 0.998 53.3%, 1.009 59.1% 63.7%,
    0.998 78.9%, 1
  );
  --ease-spring-5: linear(
    0, 0.01, 0.04 1.6%, 0.161 3.3%, 0.816 9.4%, 1.046, 1.189 14.4%, 1.231,
    1.254 17%, 1.259, 1.257 18.6%, 1.236, 1.194 22.3%, 1.057 27%, 0.999 29.4%,
    0.955 32.1%, 0.942, 0.935 34.9%, 0.933, 0.939 38.4%, 1 47.3%, 1.011,
    1.017 52.6%, 1.016 56.4%, 1 65.2%, 0.996 70.2%, 1.001 87.2%, 1
  );
  --ease-bounce-1: linear(
    0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141, 0.191, 0.25, 0.316, 0.391 36.8%,
    0.563, 0.766, 1 58.8%, 0.946, 0.908 69.1%, 0.895, 0.885, 0.879, 0.878, 0.879,
    0.885, 0.895, 0.908 89.7%, 0.946, 1
  );
  --ease-bounce-2: linear(
    0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 15.1%, 0.25, 0.391, 0.562, 0.765,
    1, 0.892 45.2%, 0.849, 0.815, 0.788, 0.769, 0.757, 0.753, 0.757, 0.769, 0.788,
    0.815, 0.85, 0.892 75.2%, 1 80.2%, 0.973, 0.954, 0.943, 0.939, 0.943, 0.954,
    0.973, 1
  );
  --ease-bounce-3: linear(
    0, 0.004, 0.016, 0.035, 0.062, 0.098, 0.141 11.4%, 0.25, 0.39, 0.562, 0.764,
    1 30.3%, 0.847 34.8%, 0.787, 0.737, 0.699, 0.672, 0.655, 0.65, 0.656, 0.672,
    0.699, 0.738, 0.787, 0.847 61.7%, 1 66.2%, 0.946, 0.908, 0.885 74.2%, 0.879,
    0.878, 0.879, 0.885 79.5%, 0.908, 0.946, 1 87.4%, 0.981, 0.968, 0.96, 0.957,
    0.96, 0.968, 0.981, 1
  );
  --ease-bounce-4: linear(
    0, 0.004, 0.016 3%, 0.062, 0.141, 0.25, 0.391, 0.562 18.2%, 1 24.3%, 0.81,
    0.676 32.3%, 0.629, 0.595, 0.575, 0.568, 0.575, 0.595, 0.629, 0.676 48.2%,
    0.811, 1 56.2%, 0.918, 0.86, 0.825, 0.814, 0.825, 0.86, 0.918, 1 77.2%,
    0.94 80.6%, 0.925, 0.92, 0.925, 0.94 87.5%, 1 90.9%, 0.974, 0.965, 0.974, 1
  );
  --ease-bounce-5: linear(
    0, 0.004, 0.016 2.5%, 0.063, 0.141, 0.25 10.1%, 0.562, 1 20.2%, 0.783, 0.627,
    0.534 30.9%, 0.511, 0.503, 0.511, 0.534 38%, 0.627, 0.782, 1 48.7%, 0.892,
    0.815, 0.769 56.3%, 0.757, 0.753, 0.757, 0.769 61.3%, 0.815, 0.892, 1 68.8%,
    0.908 72.4%, 0.885, 0.878, 0.885, 0.908 79.4%, 1 83%, 0.954 85.5%, 0.943,
    0.939, 0.943, 0.954 90.5%, 1 93%, 0.977, 0.97, 0.977, 1
  );
  --ease-circ-in: cubic-bezier(.6,.04,.98,.335);
  --ease-circ-in-out: cubic-bezier(.785,.135,.15,.86);
  --ease-circ-out: cubic-bezier(.075,.82,.165,1);
  --ease-cubic-in: cubic-bezier(.55,.055,.675,.19);
  --ease-cubic-in-out: cubic-bezier(.645,.045,.355,1);
  --ease-cubic-out: cubic-bezier(.215,.61,.355,1);
  --ease-expo-in: cubic-bezier(.95,.05,.795,.035);
  --ease-expo-in-out: cubic-bezier(1,0,0,1);
  --ease-expo-out: cubic-bezier(.19,1,.22,1);
  --ease-quad-in: cubic-bezier(.55,.085,.68,.53);
  --ease-quad-in-out: cubic-bezier(.455,.03,.515,.955);
  --ease-quad-out: cubic-bezier(.25,.46,.45,.94);
  --ease-quart-in: cubic-bezier(.895,.03,.685,.22);
  --ease-quart-in-out: cubic-bezier(.77,0,.175,1);
  --ease-quart-out: cubic-bezier(.165,.84,.44,1);
  --ease-quint-in: cubic-bezier(.755,.05,.855,.06);
  --ease-quint-in-out: cubic-bezier(.86,0,.07,1);
  --ease-quint-out: cubic-bezier(.23,1,.32,1);
  --ease-sine-in: cubic-bezier(.47,0,.745,.715);
  --ease-sine-in-out: cubic-bezier(.445,.05,.55,.95);
  --ease-sine-out: cubic-bezier(.39,.575,.565,1);
}
}

@layer openprops{
:where(html) {
  --layer-1: 1;
  --layer-2: 2;
  --layer-3: 3;
  --layer-4: 4;
  --layer-5: 5;
  --layer-important: 2147483647;
}
}

@layer openprops{
:where(html) {
  --shadow-color: 220 3% 15%;
  --shadow-strength: 1%;
  --shadow-strength-3: calc(var(--shadow-strength) + 2%);
  --shadow-strength-4: calc(var(--shadow-strength) + 3%);
  --shadow-strength-5: calc(var(--shadow-strength) + 4%);
  --shadow-strength-6: calc(var(--shadow-strength) + 5%);
  --shadow-strength-7: calc(var(--shadow-strength) + 6%);
  --shadow-strength-8: calc(var(--shadow-strength) + 7%);
  --shadow-strength-10: calc(var(--shadow-strength) + 9%);
  --inner-shadow-highlight: inset 0 -.5px 0 0 #fff, inset 0 .5px 0 0 #0001;
  --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / var(--shadow-strength-10));
  --shadow-2: 
    0 3px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
    0 7px 14px -5px hsl(var(--shadow-color) / var(--shadow-strength-6));
  --shadow-3: 
    0 -1px 3px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)),
    0 1px 2px -5px hsl(var(--shadow-color) / var(--shadow-strength-3)),
    0 2px 5px -5px hsl(var(--shadow-color) / var(--shadow-strength-5)),
    0 4px 12px -5px hsl(var(--shadow-color) / var(--shadow-strength-6)),
    0 12px 15px -5px hsl(var(--shadow-color) / var(--shadow-strength-8));
  --shadow-4: 
    0 -2px 5px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)),
    0 1px 1px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
    0 2px 2px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
    0 5px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-5)),
    0 9px 9px -2px hsl(var(--shadow-color) / var(--shadow-strength-6)),
    0 16px 16px -2px hsl(var(--shadow-color) / var(--shadow-strength-7));
  --shadow-5: 
    0 -1px 2px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)),
    0 2px 1px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
    0 5px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
    0 10px 10px -2px hsl(var(--shadow-color) / var(--shadow-strength-5)),
    0 20px 20px -2px hsl(var(--shadow-color) / var(--shadow-strength-6)),
    0 40px 40px -2px hsl(var(--shadow-color) / var(--shadow-strength-8));
  --shadow-6: 
    0 -1px 2px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)),
    0 3px 2px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
    0 7px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
    0 12px 10px -2px hsl(var(--shadow-color) / var(--shadow-strength-5)),
    0 22px 18px -2px hsl(var(--shadow-color) / var(--shadow-strength-6)),
    0 41px 33px -2px hsl(var(--shadow-color) / var(--shadow-strength-7)),
    0 100px 80px -2px hsl(var(--shadow-color) / var(--shadow-strength-8));
  --inner-shadow-0: inset 0 0 0 1px hsl(var(--shadow-color) / var(--shadow-strength-10));
  --inner-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color) / var(--shadow-strength-10)), var(--inner-shadow-highlight);
  --inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color) / var(--shadow-strength-10)), var(--inner-shadow-highlight);
  --inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color) / var(--shadow-strength-10)), var(--inner-shadow-highlight);
  --inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color) / var(--shadow-strength-10)), var(--inner-shadow-highlight);
}

@media (--OSdark) {
  :where(html) {
    --shadow-color: 220 40% 2%;
    --shadow-strength: 25%;
    --inner-shadow-highlight: inset 0 -.5px 0 0 #fff1, inset 0 .5px 0 0 #0007;
  }
}
}

@layer openprops{
:where(html) {
  --ratio-square: 1;
  --ratio-landscape: 4/3;
  --ratio-portrait: 3/4;
  --ratio-widescreen: 16/9;
  --ratio-ultrawide: 18/5;
  --ratio-golden: 1.6180/1;
}
}

@layer openprops{
:where(html) {
  --gray-0: #f8f9fa;
  --gray-1: #f1f3f5;
  --gray-2: #e9ecef;
  --gray-3: #dee2e6;
  --gray-4: #ced4da;
  --gray-5: #adb5bd;
  --gray-6: #868e96;
  --gray-7: #495057;
  --gray-8: #343a40;
  --gray-9: #212529;
  --gray-10: #16191d;
  --gray-11: #0d0f12;
  --gray-12: #030507;
  --stone-0: #f8fafb;
  --stone-1: #f2f4f6;
  --stone-2: #ebedef;
  --stone-3: #e0e4e5;
  --stone-4: #d1d6d8;
  --stone-5: #b1b6b9;
  --stone-6: #979b9d;
  --stone-7: #7e8282;
  --stone-8: #666968;
  --stone-9: #50514f;
  --stone-10: #3a3a37;
  --stone-11: #252521;
  --stone-12: #121210;
  --red-0: #fff5f5;
  --red-1: #ffe3e3;
  --red-2: #ffc9c9;
  --red-3: #ffa8a8;
  --red-4: #ff8787;
  --red-5: #ff6b6b;
  --red-6: #fa5252;
  --red-7: #f03e3e;
  --red-8: #e03131;
  --red-9: #c92a2a;
  --red-10: #b02525;
  --red-11: #962020;
  --red-12: #7d1a1a;
  --pink-0: #fff0f6;
  --pink-1: #ffdeeb;
  --pink-2: #fcc2d7;
  --pink-3: #faa2c1;
  --pink-4: #f783ac;
  --pink-5: #f06595;
  --pink-6: #e64980;
  --pink-7: #d6336c;
  --pink-8: #c2255c;
  --pink-9: #a61e4d;
  --pink-10: #8c1941;
  --pink-11: #731536;
  --pink-12: #59102a;
  --purple-0: #f8f0fc;
  --purple-1: #f3d9fa;
  --purple-2: #eebefa;
  --purple-3: #e599f7;
  --purple-4: #da77f2;
  --purple-5: #cc5de8;
  --purple-6: #be4bdb;
  --purple-7: #ae3ec9;
  --purple-8: #9c36b5;
  --purple-9: #862e9c;
  --purple-10: #702682;
  --purple-11: #5a1e69;
  --purple-12: #44174f;
  --violet-0: #f3f0ff;
  --violet-1: #e5dbff;
  --violet-2: #d0bfff;
  --violet-3: #b197fc;
  --violet-4: #9775fa;
  --violet-5: #845ef7;
  --violet-6: #7950f2;
  --violet-7: #7048e8;
  --violet-8: #6741d9;
  --violet-9: #5f3dc4;
  --violet-10: #5235ab;
  --violet-11: #462d91;
  --violet-12: #3a2578;
  --indigo-0: #edf2ff;
  --indigo-1: #dbe4ff;
  --indigo-2: #bac8ff;
  --indigo-3: #91a7ff;
  --indigo-4: #748ffc;
  --indigo-5: #5c7cfa;
  --indigo-6: #4c6ef5;
  --indigo-7: #4263eb;
  --indigo-8: #3b5bdb;
  --indigo-9: #364fc7;
  --indigo-10: #2f44ad;
  --indigo-11: #283a94;
  --indigo-12: #21307a;
  --blue-0: #e7f5ff;
  --blue-1: #d0ebff;
  --blue-2: #a5d8ff;
  --blue-3: #74c0fc;
  --blue-4: #4dabf7;
  --blue-5: #339af0;
  --blue-6: #228be6;
  --blue-7: #1c7ed6;
  --blue-8: #1971c2;
  --blue-9: #1864ab;
  --blue-10: #145591;
  --blue-11: #114678;
  --blue-12: #0d375e;
  --cyan-0: #e3fafc;
  --cyan-1: #c5f6fa;
  --cyan-2: #99e9f2;
  --cyan-3: #66d9e8;
  --cyan-4: #3bc9db;
  --cyan-5: #22b8cf;
  --cyan-6: #15aabf;
  --cyan-7: #1098ad;
  --cyan-8: #0c8599;
  --cyan-9: #0b7285;
  --cyan-10: #095c6b;
  --cyan-11: #074652;
  --cyan-12: #053038;
  --teal-0: #e6fcf5;
  --teal-1: #c3fae8;
  --teal-2: #96f2d7;
  --teal-3: #63e6be;
  --teal-4: #38d9a9;
  --teal-5: #20c997;
  --teal-6: #12b886;
  --teal-7: #0ca678;
  --teal-8: #099268;
  --teal-9: #087f5b;
  --teal-10: #066649;
  --teal-11: #054d37;
  --teal-12: #033325;
  --green-0: #ebfbee;
  --green-1: #d3f9d8;
  --green-2: #b2f2bb;
  --green-3: #8ce99a;
  --green-4: #69db7c;
  --green-5: #51cf66;
  --green-6: #40c057;
  --green-7: #37b24d;
  --green-8: #2f9e44;
  --green-9: #2b8a3e;
  --green-10: #237032;
  --green-11: #1b5727;
  --green-12: #133d1b;
  --lime-0: #f4fce3;
  --lime-1: #e9fac8;
  --lime-2: #d8f5a2;
  --lime-3: #c0eb75;
  --lime-4: #a9e34b;
  --lime-5: #94d82d;
  --lime-6: #82c91e;
  --lime-7: #74b816;
  --lime-8: #66a80f;
  --lime-9: #5c940d;
  --lime-10: #4c7a0b;
  --lime-11: #3c6109;
  --lime-12: #2c4706;
  --yellow-0: #fff9db;
  --yellow-1: #fff3bf;
  --yellow-2: #ffec99;
  --yellow-3: #ffe066;
  --yellow-4: #ffd43b;
  --yellow-5: #fcc419;
  --yellow-6: #fab005;
  --yellow-7: #f59f00;
  --yellow-8: #f08c00;
  --yellow-9: #e67700;
  --yellow-10: #b35c00;
  --yellow-11: #804200;
  --yellow-12: #663500;
  --orange-0: #fff4e6;
  --orange-1: #ffe8cc;
  --orange-2: #ffd8a8;
  --orange-3: #ffc078;
  --orange-4: #ffa94d;
  --orange-5: #ff922b;
  --orange-6: #fd7e14;
  --orange-7: #f76707;
  --orange-8: #e8590c;
  --orange-9: #d9480f;
  --orange-10: #bf400d;
  --orange-11: #99330b;
  --orange-12: #802b09;
  --choco-0: #fff8dc;
  --choco-1: #fce1bc;
  --choco-2: #f7ca9e;
  --choco-3: #f1b280;
  --choco-4: #e99b62;
  --choco-5: #df8545;
  --choco-6: #d46e25;
  --choco-7: #bd5f1b;
  --choco-8: #a45117;
  --choco-9: #8a4513;
  --choco-10: #703a13;
  --choco-11: #572f12;
  --choco-12: #3d210d;
  --brown-0: #faf4eb;
  --brown-1: #ede0d1;
  --brown-2: #e0cab7;
  --brown-3: #d3b79e;
  --brown-4: #c5a285;
  --brown-5: #b78f6d;
  --brown-6: #a87c56;
  --brown-7: #956b47;
  --brown-8: #825b3a;
  --brown-9: #6f4b2d;
  --brown-10: #5e3a21;
  --brown-11: #4e2b15;
  --brown-12: #422412;
  --sand-0: #f8fafb;
  --sand-1: #e6e4dc;
  --sand-2: #d5cfbd;
  --sand-3: #c2b9a0;
  --sand-4: #aea58c;
  --sand-5: #9a9178;
  --sand-6: #867c65;
  --sand-7: #736a53;
  --sand-8: #5f5746;
  --sand-9: #4b4639;
  --sand-10: #38352d;
  --sand-11: #252521;
  --sand-12: #121210;
  --camo-0: #f9fbe7;
  --camo-1: #e8ed9c;
  --camo-2: #d2df4e;
  --camo-3: #c2ce34;
  --camo-4: #b5bb2e;
  --camo-5: #a7a827;
  --camo-6: #999621;
  --camo-7: #8c851c;
  --camo-8: #7e7416;
  --camo-9: #6d6414;
  --camo-10: #5d5411;
  --camo-11: #4d460e;
  --camo-12: #36300a;
  --jungle-0: #ecfeb0;
  --jungle-1: #def39a;
  --jungle-2: #d0e884;
  --jungle-3: #c2dd6e;
  --jungle-4: #b5d15b;
  --jungle-5: #a8c648;
  --jungle-6: #9bbb36;
  --jungle-7: #8fb024;
  --jungle-8: #84a513;
  --jungle-9: #7a9908;
  --jungle-10: #658006;
  --jungle-11: #516605;
  --jungle-12: #3d4d04;
}
}

@layer openprops{

:where(html) {
  --gradient-space: ;
  --gradient-1: linear-gradient(to bottom right var(--gradient-space), #1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b);
  --gradient-2: linear-gradient(to bottom right var(--gradient-space), #48005c, #8300e2, #a269ff);
  --gradient-3: 
    radial-gradient(
      circle at top right var(--gradient-space), 
      hsl(180 100% 50%), hsl(180 100% 50% / 0%)
    ),
    radial-gradient(
      circle at bottom left var(--gradient-space), 
      hsl(328 100% 54%), hsl(328 100% 54% / 0%)
    );
  --gradient-4: linear-gradient(to bottom right var(--gradient-space), #00F5A0, #00D9F5);
  --gradient-5: conic-gradient(from -270deg at 75% 110% var(--gradient-space), fuchsia, floralwhite);
  --gradient-6: conic-gradient(from -90deg at top left var(--gradient-space), black, white);
  --gradient-7: linear-gradient(to bottom right var(--gradient-space), #72C6EF, #004E8F);
  --gradient-8: conic-gradient(from 90deg at 50% 0% var(--gradient-space), #111, 50%, #222, #111);
  --gradient-9: conic-gradient(from .5turn at bottom center var(--gradient-space), lightblue, white);
  --gradient-10: conic-gradient(from 90deg at 40% -25% var(--gradient-space), #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700);
  --gradient-11: conic-gradient(at bottom left var(--gradient-space), deeppink, cyan);
  --gradient-12: conic-gradient(from 90deg at 25% -10% var(--gradient-space), #ff4500, #d3f340, #7bee85, #afeeee, #7bee85);
  --gradient-13: radial-gradient(circle at 50% 200% var(--gradient-space), #000142, #3b0083, #b300c3, #ff059f, #ff4661, #ffad86, #fff3c7);
  --gradient-14: conic-gradient(at top right var(--gradient-space), lime, cyan);
  --gradient-15: linear-gradient(to bottom right var(--gradient-space), #c7d2fe, #fecaca, #fef3c7);
  --gradient-16: radial-gradient(circle at 50% -250% var(--gradient-space), #374151, #111827, #000);
  --gradient-17: conic-gradient(from -90deg at 50% -25% var(--gradient-space), blue, blueviolet);
  --gradient-18: 
    linear-gradient(0deg var(--gradient-space),   hsla(0   100% 50% / 80%), hsla(0   100% 50% / 0) 75%),
    linear-gradient(60deg var(--gradient-space),  hsla(60  100% 50% / 80%), hsla(60  100% 50% / 0) 75%),
    linear-gradient(120deg var(--gradient-space), hsla(120 100% 50% / 80%), hsla(120 100% 50% / 0) 75%),
    linear-gradient(180deg var(--gradient-space), hsla(180 100% 50% / 80%), hsla(180 100% 50% / 0) 75%),
    linear-gradient(240deg var(--gradient-space), hsla(240 100% 50% / 80%), hsla(240 100% 50% / 0) 75%),
    linear-gradient(300deg var(--gradient-space), hsla(300 100% 50% / 80%), hsla(300 100% 50% / 0) 75%)
  ;
  --gradient-19: linear-gradient(to bottom right var(--gradient-space), #ffe259, #ffa751);
  --gradient-20: conic-gradient(from -135deg at -10% center var(--gradient-space), #ffa500, #ff7715, #ff522a, #ff3f47, #ff5482, #ff69b4);
  --gradient-21: conic-gradient(from -90deg at 25% 115% var(--gradient-space), #ff0000, #ff0066, #ff00cc, #cc00ff, #6600ff, #0000ff, #0000ff, #0000ff, #0000ff);
  --gradient-22: linear-gradient(to bottom right var(--gradient-space), #acb6e5, #86fde8);
  --gradient-23: linear-gradient(to bottom right var(--gradient-space), #536976, #292E49);
  --gradient-24: conic-gradient(from .5turn at 0% 0% var(--gradient-space), #00c476, 10%, #82b0ff, 90%, #00c476);
  --gradient-25: conic-gradient(at 125% 50% var(--gradient-space), #b78cf7, #ff7c94, #ffcf0d, #ff7c94, #b78cf7);
  --gradient-26: linear-gradient(to bottom right var(--gradient-space), #9796f0, #fbc7d4);
  --gradient-27: conic-gradient(from .5turn at bottom left var(--gradient-space), deeppink, rebeccapurple);
  --gradient-28: conic-gradient(from -90deg at 50% 105% var(--gradient-space), white, orchid);
  --gradient-29: 
    radial-gradient(
      circle at top right var(--gradient-space), 
      hsl(250 100% 85%), hsl(250 100% 85% / 0%)
    ),
    radial-gradient(
      circle at bottom left var(--gradient-space), 
      hsl(220 90% 75%), hsl(220 90% 75% / 0%)
    );
  --gradient-30: radial-gradient(
      circle at top right var(--gradient-space), 
      hsl(150 100% 50%), hsl(150 100% 50% / 0%)
    ),
    radial-gradient(
      circle at bottom left var(--gradient-space), 
      hsl(150 100% 84%), hsl(150 100% 84% / 0%)
    );
  --noise-1: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  --noise-2: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  --noise-3: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  --noise-4: url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  --noise-5: url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  --noise-filter-1: contrast(300%) brightness(100%);
  --noise-filter-2: contrast(200%) brightness(150%);
  --noise-filter-3: contrast(200%) brightness(250%);
  --noise-filter-4: contrast(200%) brightness(500%);
  --noise-filter-5: contrast(200%) brightness(1000%);
}

@supports (background: linear-gradient(to right in oklab, #000, #fff)) {
  :where(html) {
    --gradient-space: in oklab;
  }
}
}

@layer openprops{
:where(html) {
  --animation-fade-in: fade-in .5s var(--ease-3);
  --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3);
  --animation-fade-out: fade-out .5s var(--ease-3);
  --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3);
  --animation-scale-up: scale-up .5s var(--ease-3);
  --animation-scale-down: scale-down .5s var(--ease-3);
  --animation-slide-out-up: slide-out-up .5s var(--ease-3);
  --animation-slide-out-down: slide-out-down .5s var(--ease-3);
  --animation-slide-out-right: slide-out-right .5s var(--ease-3);
  --animation-slide-out-left: slide-out-left .5s var(--ease-3);
  --animation-slide-in-up: slide-in-up .5s var(--ease-3);
  --animation-slide-in-down: slide-in-down .5s var(--ease-3);
  --animation-slide-in-right: slide-in-right .5s var(--ease-3);
  --animation-slide-in-left: slide-in-left .5s var(--ease-3);
  --animation-shake-x: shake-x .75s var(--ease-out-5);
  --animation-shake-y: shake-y .75s var(--ease-out-5);
  --animation-shake-z: shake-z 1s var(--ease-in-out-3);
  --animation-spin: spin 2s linear infinite;
  --animation-ping: ping 5s var(--ease-out-3) infinite;
  --animation-blink: blink 1s var(--ease-out-3) infinite;
  --animation-float: float 3s var(--ease-in-out-3) infinite;
  --animation-bounce: bounce 2s var(--ease-squish-2) infinite;
  --animation-pulse: pulse 2s var(--ease-out-3) infinite;
}

@keyframes fade-in {
  to { opacity: 1 }
}
@keyframes fade-in-bloom {
  0% { opacity: 0; filter: brightness(1) blur(20px) }
 10% { opacity: 1; filter: brightness(2) blur(10px) }
100% { opacity: 1; filter: brightness(1) blur(0) }
}
@keyframes fade-out {
  to { opacity: 0 }
}
@keyframes fade-out-bloom {
100% { opacity: 0; filter: brightness(1) blur(20px) }
 10% { opacity: 1; filter: brightness(2) blur(10px) }
  0% { opacity: 1; filter: brightness(1) blur(0) }
}
@keyframes scale-up {
  to { transform: scale(1.25) }
}
@keyframes scale-down {
  to { transform: scale(.75) }
}
@keyframes slide-out-up {
  to { transform: translateY(-100%) }
}
@keyframes slide-out-down {
  to { transform: translateY(100%) }
}
@keyframes slide-out-right {
  to { transform: translateX(100%) }
}
@keyframes slide-out-left {
  to { transform: translateX(-100%) }
}
@keyframes slide-in-up {
  from { transform: translateY(100%) }
}
@keyframes slide-in-down {
  from { transform: translateY(-100%) }
}
@keyframes slide-in-right {
  from { transform: translateX(-100%) }
}
@keyframes slide-in-left {
  from { transform: translateX(100%) }
}
@keyframes shake-x {
  0%, 100% { transform: translateX(0%) }
  20% { transform: translateX(-5%) }
  40% { transform: translateX(5%) }
  60% { transform: translateX(-5%) }
  80% { transform: translateX(5%) }
}
@keyframes shake-y {
  0%, 100% { transform: translateY(0%) }
  20% { transform: translateY(-5%) }
  40% { transform: translateY(5%) }
  60% { transform: translateY(-5%) }
  80% { transform: translateY(5%) }
}
@keyframes shake-z {
  0%, 100% { transform: rotate(0deg) }
  20% { transform: rotate(-2deg) }
  40% { transform: rotate(2deg) }
  60% { transform: rotate(-2deg) }
  80% { transform: rotate(2deg) }
}
@keyframes spin {
  to { transform: rotate(1turn) }
}
@keyframes ping {
  90%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes blink {
  0%, 100% {
    opacity: 1
  }
  50% {
    opacity: .5
  }
}
@keyframes float {
  50% { transform: translateY(-25%) }
}
@keyframes bounce {
  25% { transform: translateY(-20%) }
  40% { transform: translateY(-3%) }
  0%, 60%, 100% { transform: translateY(0) }
}
@keyframes pulse {
  50% { transform: scale(.9,.9) }
}
@media (--OSdark) {
  @keyframes fade-in-bloom {
    0% { opacity: 0; filter: brightness(1) blur(20px) }
   10% { opacity: 1; filter: brightness(0.5) blur(10px) }
  100% { opacity: 1; filter: brightness(1) blur(0) }
  }
}
@media (--OSdark) {
  @keyframes fade-out-bloom {
  100% { opacity: 0; filter: brightness(1) blur(20px) }
   10% { opacity: 1; filter: brightness(0.5) blur(10px) }
    0% { opacity: 1; filter: brightness(1) blur(0) }
  }
}
}

@layer openprops{
:where(html) {
  --border-size-1: 1px;
  --border-size-2: 2px;
  --border-size-3: 5px;
  --border-size-4: 10px;
  --border-size-5: 25px;
  --radius-1: 2px;
  --radius-2: 5px;
  --radius-3: 1rem;
  --radius-4: 2rem;
  --radius-5: 4rem;
  --radius-6: 8rem;
  --radius-drawn-1: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --radius-drawn-2: 125px 10px 20px 185px / 25px 205px 205px 25px;
  --radius-drawn-3: 15px 255px 15px 225px / 225px 15px 255px 15px;
  --radius-drawn-4: 15px 25px 155px 25px / 225px 150px 25px 115px;
  --radius-drawn-5: 250px 25px 15px 20px / 15px 80px 105px 115px;
  --radius-drawn-6: 28px 100px 20px 15px / 150px 30px 205px 225px;
  --radius-round: 1e5px;
  --radius-blob-1: 30% 70% 70% 30% / 53% 30% 70% 47%;
  --radius-blob-2: 53% 47% 34% 66% / 63% 46% 54% 37%;
  --radius-blob-3: 37% 63% 56% 44% / 49% 56% 44% 51%;
  --radius-blob-4: 63% 37% 37% 63% / 43% 37% 63% 57%;
  --radius-blob-5: 49% 51% 48% 52% / 57% 44% 56% 43%;
  --radius-conditional-1: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-1));
  --radius-conditional-2: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-2));
  --radius-conditional-3: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-3));
  --radius-conditional-4: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-4));
  --radius-conditional-5: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-5));
  --radius-conditional-6: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-6));
}
}

@layer openprops{
:where(html) {
  --palette-hue: 250;
  --palette-hue-rotate-by: 0;
  --palette-chroma: 0.15;
  --color-1: oklch(98% calc(0.03 * var(--palette-chroma)) calc(var(--palette-hue) + (0 * var(--palette-hue-rotate-by))));
  --color-2: oklch(97% calc(0.06 * var(--palette-chroma)) calc(var(--palette-hue) + (1 * var(--palette-hue-rotate-by))));
  --color-3: oklch(93% calc(0.1 * var(--palette-chroma)) calc(var(--palette-hue) + (2 * var(--palette-hue-rotate-by))));
  --color-4: oklch(84% calc(0.12 * var(--palette-chroma)) calc(var(--palette-hue) + (3 * var(--palette-hue-rotate-by))));
  --color-5: oklch(80% calc(0.16 * var(--palette-chroma)) calc(var(--palette-hue) + (4 * var(--palette-hue-rotate-by))));
  --color-6: oklch(71% calc(0.19 * var(--palette-chroma)) calc(var(--palette-hue) + (5 * var(--palette-hue-rotate-by))));
  --color-7: oklch(66% calc(0.2 * var(--palette-chroma)) calc(var(--palette-hue) + (6 * var(--palette-hue-rotate-by))));
  --color-8: oklch(58% calc(0.21 * var(--palette-chroma)) calc(var(--palette-hue) + (7 * var(--palette-hue-rotate-by))));
  --color-9: oklch(53% calc(0.2 * var(--palette-chroma)) calc(var(--palette-hue) + (8 * var(--palette-hue-rotate-by))));
  --color-10: oklch(49% calc(0.19 * var(--palette-chroma)) calc(var(--palette-hue) + (9 * var(--palette-hue-rotate-by))));
  --color-11: oklch(42% calc(0.17 * var(--palette-chroma)) calc(var(--palette-hue) + (10 * var(--palette-hue-rotate-by))));
  --color-12: oklch(35% calc(0.15 * var(--palette-chroma)) calc(var(--palette-hue) + (11 * var(--palette-hue-rotate-by))));
  --color-13: oklch(27% calc(0.12 * var(--palette-chroma)) calc(var(--palette-hue) + (12 * var(--palette-hue-rotate-by))));
  --color-14: oklch(20% calc(0.09 * var(--palette-chroma)) calc(var(--palette-hue) + (13 * var(--palette-hue-rotate-by))));
  --color-15: oklch(16% calc(0.07 * var(--palette-chroma)) calc(var(--palette-hue) + (14 * var(--palette-hue-rotate-by))));
  --color-16: oklch(10% calc(0.05 * var(--palette-chroma)) calc(var(--palette-hue) + (15 * var(--palette-hue-rotate-by))));
}
}

@layer openprops{
:where(html) {
  --hue-red: 25;
  --hue-pink: 350;
  --hue-purple: 310;
  --hue-violet: 290;
  --hue-indigo: 270;
  --hue-blue: 240;
  --hue-cyan: 210;
  --hue-teal: 185;
  --hue-green: 145;
  --hue-lime: 125;
  --hue-yellow: 100;
  --hue-orange: 75;
}
}

/* Theme */

@property --color-1 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --color-2 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --color-3 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --color-4 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --color-5 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --color-6 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --color-7 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --color-8 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --color-9 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --color-10 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --color-11 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --color-12 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --color-13 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --color-14 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --color-15 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --color-16 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --gray-1 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --gray-2 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --gray-3 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --gray-4 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --gray-5 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --gray-6 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --gray-7 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --gray-8 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --gray-9 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --gray-10 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --gray-11 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --gray-12 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --gray-13 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --gray-14 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --gray-15 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --gray-16 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --palette-source {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --palette-hue {
  syntax: "<number>";
  inherits: true;
  initial-value: 240;
}

@layer theme.palette {
  :where(
    :root,
    .ui-warning,
    .ui-critical,
    .ui-info,
    .ui-success,
    [data-invalid],
    del,
    ins,
    abbr,
    dfn,
    .ui-palette
  ) {
    --palette-hue: 250;
    --palette-hue-rotate-by: 0;
    --palette-chroma: 0.15;

    --palette-source: oklch(
      58% calc(0.21 * var(--palette-chroma, 1)) var(--palette-hue, 250)
    );

    /* Colors */
    --color-1: oklch(
      from var(--palette-source) 98% calc(0.03 * (c / 0.21))
        calc(h + (0 * var(--palette-hue-rotate-by)))
    );
    --color-2: oklch(
      from var(--palette-source) 97% calc(0.06 * (c / 0.21))
        calc(h + (1 * var(--palette-hue-rotate-by)))
    );
    --color-3: oklch(
      from var(--palette-source) 93% calc(0.1 * (c / 0.21))
        calc(h + (2 * var(--palette-hue-rotate-by)))
    );
    --color-4: oklch(
      from var(--palette-source) 84% calc(0.12 * (c / 0.21))
        calc(h + (3 * var(--palette-hue-rotate-by)))
    );
    --color-5: oklch(
      from var(--palette-source) 80% calc(0.16 * (c / 0.21))
        calc(h + (4 * var(--palette-hue-rotate-by)))
    );
    --color-6: oklch(
      from var(--palette-source) 71% calc(0.19 * (c / 0.21))
        calc(h + (5 * var(--palette-hue-rotate-by)))
    );
    --color-7: oklch(
      from var(--palette-source) 66% calc(0.2 * (c / 0.21))
        calc(h + (6 * var(--palette-hue-rotate-by)))
    );
    --color-8: oklch(
      from var(--palette-source) 58% calc(0.21 * (c / 0.21))
        calc(h + (7 * var(--palette-hue-rotate-by)))
    );
    --color-9: oklch(
      from var(--palette-source) 53% calc(0.2 * (c / 0.21))
        calc(h + (8 * var(--palette-hue-rotate-by)))
    );
    --color-10: oklch(
      from var(--palette-source) 49% calc(0.19 * (c / 0.21))
        calc(h + (9 * var(--palette-hue-rotate-by)))
    );
    --color-11: oklch(
      from var(--palette-source) 42% calc(0.17 * (c / 0.21))
        calc(h + (10 * var(--palette-hue-rotate-by)))
    );
    --color-12: oklch(
      from var(--palette-source) 35% calc(0.15 * (c / 0.21))
        calc(h + (11 * var(--palette-hue-rotate-by)))
    );
    --color-13: oklch(
      from var(--palette-source) 27% calc(0.12 * (c / 0.21))
        calc(h + (12 * var(--palette-hue-rotate-by)))
    );
    --color-14: oklch(
      from var(--palette-source) 20% calc(0.09 * (c / 0.21))
        calc(h + (13 * var(--palette-hue-rotate-by)))
    );
    --color-15: oklch(
      from var(--palette-source) 16% calc(0.07 * (c / 0.21))
        calc(h + (14 * var(--palette-hue-rotate-by)))
    );
    --color-16: oklch(
      from var(--palette-source) 10% calc(0.05 * (c / 0.21))
        calc(h + (15 * var(--palette-hue-rotate-by)))
    );

    /* Grays */
    --gray-chroma: 0.01;
    --gray-hue: 255;

    --gray-1: oklch(from var(--color-1) l var(--gray-chroma) var(--gray-hue));
    --gray-2: oklch(from var(--color-2) l var(--gray-chroma) var(--gray-hue));
    --gray-3: oklch(from var(--color-3) l var(--gray-chroma) var(--gray-hue));
    --gray-4: oklch(from var(--color-4) l var(--gray-chroma) var(--gray-hue));
    --gray-5: oklch(from var(--color-5) l var(--gray-chroma) var(--gray-hue));
    --gray-6: oklch(from var(--color-6) l var(--gray-chroma) var(--gray-hue));
    --gray-7: oklch(from var(--color-7) l var(--gray-chroma) var(--gray-hue));
    --gray-8: oklch(from var(--color-8) l var(--gray-chroma) var(--gray-hue));
    --gray-9: oklch(from var(--color-9) l var(--gray-chroma) var(--gray-hue));
    --gray-10: oklch(from var(--color-10) l var(--gray-chroma) var(--gray-hue));
    --gray-11: oklch(from var(--color-11) l var(--gray-chroma) var(--gray-hue));
    --gray-12: oklch(from var(--color-12) l var(--gray-chroma) var(--gray-hue));
    --gray-13: oklch(from var(--color-13) l var(--gray-chroma) var(--gray-hue));
    --gray-14: oklch(from var(--color-14) l var(--gray-chroma) var(--gray-hue));
    --gray-15: oklch(from var(--color-15) l var(--gray-chroma) var(--gray-hue));
    --gray-16: oklch(from var(--color-16) l var(--gray-chroma) var(--gray-hue));
  }
}

@layer theme {

  /* 1. Color scheme */
  .ui-light {
    --color-scheme: light;
  }

  .ui-dark {
    --color-scheme: dark;
  }

  :where(html) {
    color-scheme: var(--color-scheme, light dark);

    /* 2. Palette - override the values in core/palette.css */
    --palette-hue: light-dark(var(--hue-green), var(--hue-blue));
    --palette-chroma: 0.5;
    /* --palette-source: oklch(.58 calc(.21 * .5) var(--hue-blue));   */

    /* Gray palette also lives in core/palette.css. */
    /*
      --gray-hue: 255;
      --gray-chroma: 0.01;
    */

    /* 3. Named colors (no severity meaning) - use when you literally want a green/red/etc. dot */
    --blue: oklch(from var(--color-9) l 0.2 210);
    --green: oklch(from var(--color-9) l 0.2 145);
    --orange: oklch(from var(--color-7) l 0.2 75);
    --red: oklch(from var(--color-9) l 0.2 25);

    /* 4. Intent tokens */
    --success: var(--green);
    --info: var(--blue);
    --warning: var(--orange);
    --critical: var(--red);
    --neutral: var(--gray-9);

    /* 5. Primary */
    --primary: var(--color-8);
    --primary-light: oklch(from var(--primary) calc(l * 1.25) c h);
    --primary-dark: oklch(from var(--primary) calc(l * 0.75) c h);
    --primary-contrast: var(--gray-1);

    /* 6. Text */
    --text-primary: light-dark(var(--gray-15), var(--gray-1));
    --text-primary-contrast: light-dark(var(--gray-2), var(--gray-15));
    --text-muted: light-dark(var(--gray-13), var(--gray-4));
    --text-muted-contrast: light-dark(var(--gray-4), var(--gray-13));

    /* 7. Surfaces */
    --surface-default: light-dark(var(--gray-1), var(--gray-13));
    --surface-filled: light-dark(var(--gray-4), var(--gray-15));
    --surface-tonal: light-dark(var(--gray-3), var(--gray-12));
    --surface-elevated: light-dark(var(--gray-1), var(--gray-12));

    /* 8. Borders */
    --border-color: light-dark(var(--gray-4), var(--gray-12));
    --border-radius: var(--size-2);
    --border-width: 1px;

    /* 9. Focus ring */
    --focus-ring-color: var(--primary);
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-style: solid;

    /* 10. Typography */
    --font-size-h1: var(--font-size-fluid-3);
    --font-size-h2: var(--font-size-fluid-2);
    --font-size-h3: var(--font-size-fluid-1);
    --font-size-h4: var(--font-size-3);
    --font-size-h5: var(--font-size-2);
    --font-size-h6: var(--font-size-fluid-0);

    /* Sneaking in an extra font size I want but Open Props doesn't provide. You can do whatever you want with your own theme. It's just CSS. */
    --font-size-05: 0.875rem;

    /* 11. Control sizes - shared scale for fields and buttons so they line up. */
    --control-size-x-small: 28px;
    --control-size-small: 32px;
    --control-size: 40px;
    --control-size-large: 46px;

    --field-size-x-small: var(--control-size-x-small);
    --field-size-small: var(--control-size-small);
    --field-size: var(--control-size);
    --field-size-large: var(--control-size-large);

    --button-size-x-small: var(--control-size-x-small);
    --button-size-small: var(--control-size-small);
    --button-size: var(--control-size);
    --button-size-large: var(--control-size-large);

    /* 12. Field / input */
    --field-border-color: var(--border-color);
    --field-border-radius: var(--size-2);
    --field-border-width: 1px;

    /* 13. Button */
    --button-border-radius: var(--size-2);
  }

  /* 14. Severity scope classes */
  :where(.ui-critical, [data-invalid], del) {
    --palette-source: oklch(0.58 0.21 var(--hue-red));
    --palette-hue-rotate-by: 1;
  }

  :where(.ui-info, abbr, dfn) {
    --palette-source: oklch(0.58 0.21 var(--hue-blue));
    --palette-hue-rotate-by: 1;
  }

  :where(.ui-success, ins) {
    --palette-source: oklch(0.58 0.21 var(--hue-green));
    --palette-hue-rotate-by: 1;
  }

  :where(.ui-warning) {
    --palette-source: oklch(0.58 0.21 var(--hue-orange));
    --palette-hue-rotate-by: 1;
  }
}

/* Normalize */

@layer normalize {
  *,
  ::before,
  ::after {
    /* Set box sizing instead of inheriting */
    /* https://www.oddbird.net/2025/09/04/box-model/ */
    box-sizing: border-box;
  }

  * {
    scrollbar-width: thin;
  }

  html {
    --motion: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      --motion: 0;
    }
  }

  .ui-motion-off {
    --motion: 0 !important;
  }

  .ui-motion-on {
    --motion: 1 !important;
  }

  .ui-motion-debug {
    --motion: 10 !important;
  }

  :where(html) {
    --_page-bg-color: var(--surface-default);

    accent-color: var(--primary);
    background-color: var(--_page-bg-color);
    block-size: 100%;
    caret-color: var(--primary);
    color: var(--text-muted, var(--text-color-2));
    /* text-color-2 is for backwards compatibility */
    font-family: var(--font-sans);
    interpolate-size: allow-keywords;
    line-height: var(--font-lineheight-4);

    /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }

  :where(body) {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    container-type: inline-size;
    font-size: 16px;
    font-synthesis: style;
    font-weight: 400;
    inline-size: 100%;
    margin: 0;
    min-block-size: 100%;
    min-inline-size: 320px;
    position: relative;
    text-rendering: optimizeLegibility;
  }

  :where(:not(dialog, popover)) {
    margin: 0;
  }

  :where(dialog:not([open])) {
    outline: none !important;
  }

  :where(:not(fieldset, progress, meter)) {
    background-origin: border-box;
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 0;
  }

  :where(fieldset) {
    border: var(--field-border-width) solid var(--field-border-color);
    border-radius: var(--field-border-radius);
    padding: var(--size-3);
    display: grid;
    gap: var(--size-3);
  }

  :where(input, button, textarea),
  :where(input[type="file"])::-webkit-file-upload-button {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
  }

  :where(input):-webkit-autofill,
  :where(input):-webkit-autofill:hover,
  :where(input):-webkit-autofill:focus,
  :where(textarea):-webkit-autofill,
  :where(textarea):-webkit-autofill:hover,
  :where(textarea):-webkit-autofill:focus,
  :where(select):-webkit-autofill,
  :where(select):-webkit-autofill:hover,
  :where(select):-webkit-autofill:focus,
  :where(input):autofill,
  :where(input):autofill:hover,
  :where(input):autofill:focus,
  :where(textarea):autofill,
  :where(textarea):autofill:hover,
  :where(textarea):autofill:focus,
  :where(select):autofill,
  :where(select):autofill:hover,
  :where(select):autofill:focus {
    -webkit-text-fill-color: var(--text-muted, var(--text-color-2));
    -webkit-box-shadow: 0 0 0px 1e5px var(--well-1) inset;
    transition: background-color 5000s ease-in-out 0s;
  }

  ::placeholder {
    color: var(--text-muted, var(--text-color-2));
  }

  ::-moz-placeholder {
    opacity: 1;
  }

  :focus-visible {
    /* Inverts the --_page-bg-color */
    --_focus-visible-color: rgb(
      from var(--_page-bg-color) calc(255 - r) calc(255 - g) calc(255 - b)
    );

    border-radius: var(--border-radius, 0px);
    outline: 2px solid var(--_focus-visible-color);
    outline-offset: 2px;
    transition: outline-offset calc(0.15s * var(--motion)) var(--ease-2);
  }

  :where(:not(:active):focus-visible) {
    transition-duration: calc(0.15s * var(--motion));
    outline-offset: var(--outline-offset, 0px);
  }

  :where(
    a[href],
    area,
    button,
    input:not(
      [type="text"],
      [type="email"],
      [type="number"],
      [type="password"],
      [type=""],
      [type="tel"],
      [type="url"]
    ),
    label[for],
    select,
    summary
  ) {
    cursor: pointer;
  }

  :where(
    a[href],
    area,
    button,
    [role="button"],
    input,
    label[for],
    select,
    summary,
    textarea,
    [tabindex]:not([tabindex*="-"])
  ) {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  :where(img, svg, video, canvas, audio, iframe, embed, object) {
    display: block;
  }

  :where(img, svg, video) {
    block-size: auto;
    max-inline-size: 100%;
  }

  :where(svg:not([width])) {
    inline-size: var(--size-7);
  }

  :where(dt:not(:first-of-type)) {
    margin-block-start: var(--size-5);
  }

  :where(figure) {
    display: grid;
    gap: var(--size-2);
    place-items: center;
  }

  :target {
    scroll-margin-block-start: 2rem;
  }
}

/* Components */

/*
* Components are divided into two categories - if they are stand-alone (root) or if they are built on top of others (extended).
*/

/*** Root components (no dependencies)  */

@layer components.root {
  :where(.ui-button) {
    --_motion: var(--motion, 1);
    --_color: light-dark(var(--color-16), var(--color-1));
    --_color-contrast: light-dark(var(--color-1), var(--color-16));
    --_color-tonal: var(--surface-tonal);

    --_accent: var(--_color);
    --_accent-contrast: var(--_color-contrast);
    --_accent-tonal: var(--_color-tonal);
    --_accent-tonal-contrast: var(--_color);

    --_default-hover-bg-color: light-dark(oklch(from var(--_accent) l 0.01 h / 10%),
        oklch(from var(--_accent) l 0.01 h / 20%));
    --_default-active-bg-color: light-dark(oklch(from var(--_accent) l 0.06 h / 20%),
        oklch(from var(--_accent) l 0.06 h / 30%));

    --_filled-hover-bg-color: light-dark(oklch(from var(--_accent) calc(l + 0.2) c h),
        oklch(from var(--_accent) calc(l - 0.1) c h));
    --_filled-active-bg-color: light-dark(oklch(from var(--_accent) calc(l + 0.3) c h),
        oklch(from var(--_accent) calc(l - 0.15) c h));
    --_outlined-active-bg-color: var(--_filled-active-bg-color);

    --_bg-color: transparent;
    --_border-color: transparent;
    --_border-width: var(--border-size-1);
    --_font-size: var(--font-size-1);
    --_min-height: var(--button-size);
    --_border-radius: var(--button-border-radius, var(--radius-2));
    --_text-color: var(--_accent);

    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    align-items: center;
    background-color: var(--_bg-color);
    border: var(--_border-width) solid var(--_border-color);
    border-radius: var(--_border-radius);
    color: var(--_text-color);
    display: inline-flex;
    font-size: var(--_font-size);
    font-weight: 700;
    gap: var(--size-2);
    justify-content: center;
    min-block-size: var(--_min-height);
    padding-block: 0.5ex;
    padding-inline: 1.5ex;
    text-align: center;
    text-decoration: none;
    transition:
      background-color calc(0.1s * var(--_motion)) ease,
      color calc(0.1s * var(--_motion)) ease,
      border-color calc(0.1s * var(--_motion)) ease,
      box-shadow calc(0.1s * var(--_motion)) ease;
    user-select: none;

    &.ui-critical,
    &.ui-primary {
      --_color-contrast: var(--gray-1);
      --_color-tonal: var(--color-6);
      --_accent-tonal-contrast: var(--text-primary-contrast);

      --_default-hover-bg-color: oklch(from var(--_accent) l c h / 15%);
      --_default-active-bg-color: oklch(from var(--_accent) l c h / 25%);

      --_filled-hover-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
      --_filled-active-bg-color: oklch(from var(--_accent) calc(l - 0.15) c h);

      --_outlined-active-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
    }

    &.ui-critical {
      --_color: var(--critical);
    }

    &.ui-primary {
      --_color: var(--primary);
    }

    /* Disabled */
    &:where([disabled]) {
      --_text-color: color-mix(in oklch,
          var(--text-muted) 50%,
          var(--surface-default));

      cursor: not-allowed;
      opacity: 0.64;
    }

    /* Hover & Active */
    &:where(:not([disabled])) {
      &:where(:not(:active):hover) {
        --_bg-color: var(--_default-hover-bg-color);
      }

      &:where(:hover:active),
      &[aria-current="page"] {
        --_bg-color: var(--_default-active-bg-color);
      }
    }

    /* Icons / Keyboard */
    &:where(:has(svg), &.ui-icon-only) {
      gap: 1ex;

      svg {
        color: currentColor;
        max-block-size: 0.7lh;
      }
    }

    /* Keyboard input */
    :is(kbd) {
      background-color: oklch(from currentColor l c h / 10%);
      border: 0;
      color: oklch(from currentColor l c h / 80%);
      font-size: 0.8em;
      font-weight: 400;
      line-height: 1.2;
    }

    /* Sizes */
    &.ui-x-small {
      --_min-height: var(--button-size-x-small);
      --_font-size: var(--font-size-0);
      padding-block: 0;
      padding-inline: 0.5ex;
    }

    &.ui-small {
      --_min-height: var(--button-size-small);
      --_font-size: var(--font-size-05);
      padding-block: 0;
      padding-inline: 0.75ex;
    }

    &.ui-large {
      --_min-height: var(--button-size-large);
      padding-inline: 4ex;
    }

    /* Variants */
    &.ui-outlined {
      --_bg-color: transparent;
      --_border-color: var(--_accent);
      --_text-color: var(--_accent);

      &:where(:not([disabled])) {
        &:where(:not(:active):hover) {
          --_bg-color: var(--_accent);
          --_border-color: var(--_accent);
          --_text-color: var(--_accent-contrast);
        }

        &:where(:active) {
          --_bg-color: var(--_outlined-active-bg-color);
          --_border-color: var(--_outlined-active-bg-color);
          --_text-color: var(--_accent-contrast);
        }
      }
    }

    &.ui-tonal {
      --_bg-color: var(--_accent-tonal);
      --_text-color: var(--_accent-tonal-contrast);

      &:where(:not([disabled])) {
        &:where(:not(:active):hover) {
          --_bg-color: var(--_accent);
          --_text-color: var(--_accent-contrast);
        }

        &:where(:active) {
          --_bg-color: var(--_outlined-active-bg-color);
          --_text-color: var(--_accent-contrast);
        }
      }
    }

    &.ui-filled {
      --_bg-color: var(--_accent);
      --_text-color: var(--_accent-contrast);

      &:where(:not([disabled])) {
        &:where(:not(:active):hover) {
          --_bg-color: var(--_filled-hover-bg-color);
        }

        &:where(:active) {
          --_bg-color: var(--_filled-active-bg-color);
        }
      }
    }
  }

  /* File input */
  :where(input[type="file"]) {
    align-self: flex-start;
    border: var(--border-size-1) solid var(--surface-filled);
    border-radius: var(--radius-2);
    box-shadow: var(--inner-shadow-4);
    color: var(--text-muted-contrast);
    cursor: initial;
    max-inline-size: 100%;
    padding: 0;
  }

  :where(input[type="file"])::-webkit-file-upload-button,
  :where(input[type="file"])::file-selector-button {
    cursor: pointer;
    margin-inline-end: var(--size-relative-6);
  }
}

@layer components.root {
  :where(.ui-callout) {
    --_bg-color: var(--surface-tonal);
    --_border-color: var(--surface-tonal);
    --_color: var(--text-primary);
    --_icon-color: currentColor;
    --_link-hover-color: var(--primary);
    --_padding: var(--size-3);
    --_border-radius: var(--border-radius);
    --_gap: var(--size-3);
    --_content-gap: var(--size-2);
    --_font-size: var(--font-size-05);
    --_title-font-size: var(--font-size-1);
    --_icon-size: var(--size-4);
    --_surface-bg: var(--surface-default);

    --_outlined-bg-color: var(--surface-default);
    --_outlined-border-color: var(--border-color);
    --_outlined-color: var(--text-primary);
    --_outlined-icon-color: currentColor;

    background-color: var(--_bg-color, var(--_surface-bg));
    border: 1px solid var(--_border-color, var(--border-color));
    border-radius: var(--_border-radius);
    color: var(--_color);
    isolation: isolate;
    padding: var(--_padding);
    position: relative;

    &.ui-critical,
    &.ui-info,
    &.ui-neutral,
    &.ui-success,
    &.ui-warning {
      --_bg-color: light-dark(
        oklch(from var(--color-2) l c h / 20%),
        oklch(from var(--color-6) l c h / 5%)
      );
      --_border-color: light-dark(var(--color-5), var(--color-11));
      --_color: light-dark(var(--color-16), var(--color-1));
      --_icon-color: var(--color-9);

      --_outlined-bg-color: var(--surface-default);
      --_outlined-border-color: var(--color-9);
      --_outlined-color: light-dark(var(--color-15), var(--color-1));
      --_outlined-icon-color: var(--color-9);
    }

    &.ui-outlined {
      --_bg-color: var(--_outlined-bg-color);
      --_border-color: var(--_outlined-border-color);
      --_color: var(--_outlined-color);
      --_icon-color: var(--_outlined-icon-color);
    }

    &::before {
      background-color: var(--_bg-color);
      border-radius: inherit;
      content: "";
      inset: 0;
      pointer-events: none;
      position: absolute;
      z-index: -1;
    }

    & > .ui-content {
      display: grid;
      font-size: var(--_font-size);
      gap: var(--_content-gap);

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        color: inherit;
        font-size: var(--_title-font-size);
        font-weight: 600;

        * {
          font-size: inherit;
        }
      }
    }

    /* Links
    * Can't make sure contrast will be acceptable (yet) so we use the current text color instead.
    */
    &:not(.ui-outlined) {
      a[href] {
        color: inherit;

        &:hover {
          color: var(--_link-hover-color);
        }
      }
    }

    /* Icon */
    &:has(svg) {
      display: grid;
      gap: var(--_gap);
      grid-template-columns: var(--_icon-size) 1fr;

      svg {
        margin-block-start: 0.15rem;
        stroke: var(--_icon-color);
      }
    }
  }
}

@layer components.root {
  :where(.ui-icon-button) {
    --_motion: var(--motion, 1);
    --_color: light-dark(var(--color-16), var(--color-1));
    --_color-contrast: light-dark(var(--color-1), var(--color-16));
    --_color-tonal: var(--surface-tonal);

    --_accent: var(--_color);
    --_accent-contrast: var(--_color-contrast);
    --_accent-tonal: var(--_color-tonal);
    --_accent-tonal-contrast: var(--_color);
    --_default-hover-bg-color: light-dark(oklch(from var(--_accent) l 0.01 h / 10%),
        oklch(from var(--_accent) l 0.01 h / 20%));
    --_default-active-bg-color: light-dark(oklch(from var(--_accent) l 0.06 h / 20%),
        oklch(from var(--_accent) l 0.06 h / 30%));
    --_filled-hover-bg-color: light-dark(oklch(from var(--_accent) calc(l + 0.2) c h),
        oklch(from var(--_accent) calc(l - 0.1) c h));
    --_filled-active-bg-color: light-dark(oklch(from var(--_accent) calc(l + 0.3) c h),
        oklch(from var(--_accent) calc(l - 0.15) c h));
    --_outlined-active-bg-color: var(--_filled-active-bg-color);

    --_bg-color: transparent;
    --_border-color: transparent;
    --_border-width: var(--border-size-1);
    --_text-color: inherit;

    align-items: center;
    aspect-ratio: 1;
    background-color: var(--_bg-color);
    block-size: var(--size-6);
    border: var(--_border-width) solid var(--_border-color);
    border-radius: var(--radius-round);
    color: var(--_text-color);
    display: inline-flex;
    inline-size: var(--size-6);
    justify-content: center;
    padding: 0;
    transform-style: preserve-3d;
    transition:
      background-color calc(0.1s * var(--_motion)) ease,
      color calc(0.1s * var(--_motion)) ease,
      border-color calc(0.1s * var(--_motion)) ease,
      box-shadow calc(0.1s * var(--_motion)) ease;

    &:where([disabled]) {
      --_text-color: light-dark(rgb(0, 0, 0/0.3), rgb(255, 255, 255/0.26));
      cursor: not-allowed;
      opacity: 0.64;
    }

    svg {
      block-size: auto;
      inline-size: auto;
      max-block-size: var(--size-5);
      max-inline-size: var(--size-5);
      pointer-events: none;
    }

    /* Ripple effect, utils.css */
    &::before {
      --highlight-size: 130%;
      background-color: transparent;
      transition:
        transform calc(0.2s * var(--_motion)) ease,
        background-color calc(0.1s * var(--_motion)) ease;
    }

    &.ui-critical,
    &.ui-primary {
      --_color-contrast: var(--gray-1);
      --_color-tonal: var(--color-6);
      --_accent-tonal-contrast: var(--text-primary-contrast);

      --_default-hover-bg-color: oklch(from var(--_accent) l c h / 15%);
      --_default-active-bg-color: oklch(from var(--_accent) l c h / 25%);

      --_filled-hover-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
      --_filled-active-bg-color: oklch(from var(--_accent) calc(l - 0.15) c h);

      --_outlined-active-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
    }

    &.ui-critical {
      --_color: var(--critical);
    }

    &.ui-primary {
      --_color: var(--primary);
    }

    /* Element states */
    &:where(:not([disabled])) {
      &:where(:not(:active):hover) {
        &::before {
          background-color: var(--_interaction-hover-color,
              var(--_default-hover-bg-color));
        }
      }

      &:where(:hover:active),
      &[aria-current="page"] {
        &::before {
          background-color: var(--_interaction-active-color,
              var(--_default-active-bg-color));
        }
      }
    }

    /* Size */
    &.ui-small {
      block-size: var(--size-4);
      inline-size: var(--size-4);

      svg {
        max-block-size: var(--size-4);
        max-inline-size: var(--size-4);
      }
    }

    /* Variants */
    &.ui-outlined {
      --_bg-color: transparent;
      --_border-color: var(--_accent);
      --_text-color: var(--_accent);
    }

    &.ui-tonal {
      --_bg-color: var(--_accent-tonal);
      --_text-color: var(--_accent-tonal-contrast);
    }

    &.ui-filled {
      --_bg-color: var(--_accent);
      --_interaction-active-color: var(--_filled-active-bg-color);
      --_interaction-hover-color: var(--_filled-hover-bg-color);
      --_text-color: var(--_accent-contrast);
    }
  }
}

@layer components.root {
  :where(.ui-tabs) {
    --_accent-color: var(--primary);
    --_bg-color: transparent;

    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--size-1);
    position: relative;

    & > .ui-tab-input[type="radio"] {
      /* utils > .ui-sr-only */
      /* TODO: use mixin for this when available */
      block-size: 1px;
      clip-path: inset(50%);
      inline-size: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;

      &:checked {
        /* Checked Tab */
        & + [role="tab"],
        & + .ui-tab-label {
          border-block-end-color: var(--_accent-color);
          color: var(--_accent-color);

          /* Checked Panel */
          & + [role="tabpanel"],
          & + .ui-tab-panel {
            display: block;
          }
        }
      }

      &:focus-visible {
        & + [role="tab"],
        & + .ui-tab-label {
          --focus-ring-color: var(--text-muted);
          --focus-ring-offset: calc(-1 * var(--size-2));
          outline: var(--focus-ring-width) var(--focus-ring-style)
            var(--focus-ring-color);
          outline-offset: var(--focus-ring-offset);
        }
      }
    }

    /* Tab */
    & > [role="tab"],
    & > .ui-tab-label {
      align-items: center;
      background-color: transparent;
      border-bottom: 2px solid transparent;
      border-radius: 0;
      color: var(--text-muted);
      cursor: pointer;
      display: inline-flex;
      font-weight: 600;
      justify-content: center;
      line-height: var(--font-lineheight-4);
      order: 1;
      padding: var(--size-2) var(--size-3);
      position: relative;
      transition: color 0.1s;
      user-select: none;

      &:hover {
        background-color: light-dark(
          oklch(from var(--_accent-color) calc(l * 0.75) none h / 5%),
          oklch(from var(--_accent-color) calc(l * 1.25) none h / 5%)
        );
      }
    }

    /* Tab Panel */
    & > [role="tabpanel"],
    & > .ui-tab-panel {
      display: none;
      inline-size: 100%;
      order: 2;
    }
  }
}

@layer components.root {
  :where(.ui-toggle-group) {
    --_bg-color: var(--surface-default);
    --_border-color: var(--border-color);
    --_border-radius: var(--button-border-radius);

    background-color: var(--_bg-color);
    border: 1px solid var(--_border-color);
    border-radius: var(--_border-radius);
    display: inline-flex;
    inline-size: fit-content;
    overflow: hidden;

    /* Sizes */
    &.ui-small {
      .ui-toggle-button {
        --_size: var(--field-size-small);
      }
    }

    &.ui-x-small {
      .ui-toggle-button {
        --_size: var(--field-size-x-small);
      }
    }

    /* Toggle button */
    .ui-toggle-button {
      border: 0;
      border-radius: 0;
      margin: 0;
    }

    &:not(.ui-vertical) {
      .ui-toggle-button {
        border-inline-end: 1px solid var(--_border-color);

        &:last-of-type {
          border-inline-end: 0;
        }
      }
    }

    &.ui-vertical {
      flex-direction: column;

      .ui-toggle-button {
        border-block-end: 1px solid var(--_border-color);

        &:last-of-type {
          border-block-end: 0;
        }
      }
    }
  }
}

/* TODO:
* Somehow handle when a group gets too wide for its container. Should it be handled?
*/

@layer components.root {
  :where(.ui-toggle-button) {
    --_button-bg-color: transparent;
    --_size: var(--field-size);
    --_svg-size: var(--size-4);

    align-items: center;
    background-color: var(--_button-bg-color);
    block-size: var(--_size);
    border: 1px solid var(--border-color);
    border-radius: var(--button-border-radius);
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    flex: auto;
    gap: var(--size-2);
    inline-size: fit-content;
    justify-content: center;
    min-inline-size: var(--_size);
    outline-offset: calc(-1 * var(--size-2));
    padding: 0 var(--size-2);
    position: relative;
    user-select: none;

    input[type="checkbox"],
    input[type="radio"] {
      /* utils.css > .ui-sr-only */
      block-size: 1px;
      clip-path: inset(50%);
      inline-size: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
    }

    /* Element states */
    @media (pointer: fine) {
      &:hover:not(.ui-disabled) {
        --_button-bg-color: light-dark(
          oklch(0% 0 0 / 0.04),
          oklch(100% 0 0 / 0.08)
        );
      }
    }

    &:has(input:focus-visible) {
      --focus-ring-color: var(--text-muted);
      --focus-ring-offset: -6px;
      outline: var(--focus-ring-width) var(--focus-ring-style)
        var(--focus-ring-color);
      outline-offset: var(--focus-ring-offset);
    }

    /* Disabled */
    &.ui-disabled {
      border-color: color-mix(in oklch, var(--border-color) 50%, transparent);
      color: color-mix(in oklch, var(--text-primary) 30%, transparent);
      cursor: not-allowed;
    }

    /* svgs */
    svg {
      block-size: var(--_svg-size);
      flex-shrink: 0;
      inline-size: var(--_svg-size);
    }

    /* Selected */
    &:has(:where(input[type="checkbox"], input[type="radio"]):checked) {
      --_button-bg-color: oklch(from var(--primary) l c h / 25%);

      @media (pointer: fine) {
        &:hover {
          --_button-bg-color: oklch(from var(--primary) l c h / 35%);
        }
      }
    }

    /* Sizes */
    &.ui-small {
      --_size: var(--field-size-small);
    }

    &.ui-x-small {
      --_size: var(--field-size-x-small);
    }
  }
}

@layer components.root {
  :where(.ui-anchor) {
    anchor-name: --anchor;
    anchor-scope: --anchor;
    display: inline-block;
    inline-size: fit-content;

    /* Always-visible */
    & > .ui-anchor-floating:not([popover]) {
      block-size: max-content;
      inline-size: max-content;
      position: absolute;
      position-anchor: --anchor;
      position-area: var(--anchor-position-area, start end);
      translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
    }

    /* Hover-triggered */
    & > .ui-anchor-floating[popover] {
      inset: unset;
      margin: 0;
      position: absolute;
      position-area: var(--anchor-position-area, start end);
      translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
    }
  }
}

@layer components.root {
  :where(.ui-avatar) {
    --_bg-color: var(--primary);
    --_color: var(--color-1);
    --_width: 40px;

    align-items: center;
    aspect-ratio: 1;
    background-color: var(--_bg-color);
    border-radius: var(--radius-round);
    color: var(--_color);
    display: inline-flex;
    inline-size: var(--_width);
    justify-content: center;
    overflow: clip;
    position: relative;
    text-align: center;
    text-decoration: none;

    &:has(img) {
      background-color: transparent;
    }

    svg {
      max-inline-size: var(--size-5);
    }

    img {
      block-size: 100%;
      inline-size: 100%;
      inset: 0;
      object-fit: cover;
      position: absolute;
    }

    &.ui-squared {
      border-radius: 0;
    }

    &.ui-rounded {
      border-radius: var(--radius-2);
    }

    &.ui-squircle {
      border-radius: var(--radius-3);

      @supports (corner-shape: squircle) {
        border-radius: var(--radius-round);
        corner-shape: squircle;
      }
    }
  }

  :where([role="group"]) {
    --_margin: var(--size-3);
    --_outline-color: var(--surface-default);

    display: flex;

    .ui-avatar {
      box-shadow: 0 0 0 2px var(--_outline-color);
      margin-inline-end: calc(-1 * var(--_margin));
    }
  }
}

@layer components.root {
  :where(.ui-card) {
    --_bg-tonal: var(--surface-tonal);
    --_bg-elevated: var(--surface-elevated);
    --_bg-surface: var(--surface-default);
    --_border-color: var(--border-color);
    --_card-bg-color: var(--_bg-surface);
    --_card-border-color: transparent;
    --_card-border-width: 0;

    --_card-shadow: none;
    --_shadow-light: var(--shadow-3);
    --_shadow-dark: var(--shadow-4);
    --_shadow-elevated: var(--_shadow-light);

    @container style(--color-scheme: dark) {
      --_shadow-elevated: var(--_shadow-dark);
    }

    background-color: var(--_card-bg-color);
    border-color: var(--_card-border-color);
    border-radius: var(--border-radius);
    border-style: solid;
    border-width: var(--_card-border-width);
    box-shadow: var(--_card-shadow);
    display: flex;
    flex-direction: column;
    gap: var(--size-3);
    overflow: hidden;
    padding-inline: 0;
    position: relative;

    /* Variants */
    &.ui-text {
      --_card-bg-color: transparent;
      --_card-border-color: transparent;
      --_card-border-width: 0;
      --_card-shadow: none;
    }

    &.ui-tonal {
      --_card-bg-color: var(--_bg-tonal);
      --_card-border-width: 1px;
    }

    &.ui-elevated {
      --_card-bg-color: var(--_bg-elevated);
      --_card-shadow: var(--_shadow-elevated);
    }

    &.ui-outlined {
      --_card-bg-color: var(--_bg-surface);
      --_card-border-color: var(--_border-color);
      --_card-border-width: 1px;
    }

    &> :where(hgroup, .ui-content) {
      padding-inline: var(--size-3);

      &:last-child {
        padding-block-end: var(--size-3);
      }
    }

    /* Header */
    &>hgroup {
      padding-block: var(--size-3) 0;

      /* Top paragraph */
      &>p:first-of-type:first-child {
        font-size: var(--font-size-0);
        line-height: 1.3;
      }

      :where(h1, h2, h3, h4, h5, h6):last-child {
        margin-block-end: 0;
      }

      /* Bottom paragraph */
      &>p:last-of-type:last-child:not(:first-child) {
        font-size: var(--font-size-1);
      }
    }

    /* Content */
    &>.ui-content:where(:only-child, :first-child) {
      padding-block: var(--size-3) var(--size-4);
    }

    /* Actions */
    &>.ui-actions {
      display: flex;
      gap: var(--size-2);
      margin-block: var(--size-2) 0;
      padding-block-end: var(--size-2);
      padding-inline: var(--size-3);

      &:has(.ui-button:first-child[class="ui-button"]) {
        padding-inline: var(--size-1) var(--size-3);
      }

      &:has(.ui-button:not([class="ui-button"])) {
        padding-block-end: var(--size-2);
      }

      /* Alignment */
      &.ui-align-end {
        justify-content: end;

        &:has(.ui-button:first-child[class="ui-button"]) {
          padding-inline: var(--size-3) var(--size-1);
        }
      }
    }
  }
}

@layer components.root {
  :where(.ui-chip) {
    --_bg-color: var(--surface-tonal);
    --_border-color: var(--border-color);
    --_color: var(--text-primary);

    align-items: center;
    background: var(--_bg-color) var(--ripple, none);
    block-size: var(--size-7, 2rem);
    border-radius: var(--radius-2, 0.5rem);
    border: 1px solid var(--_border-color);
    color: var(--_color);
    display: inline-flex;
    font-size: var(--font-size-0, 0.75rem);
    gap: var(--size-1);
    padding-inline: var(--size-2);
    text-decoration: none;

    /* Variants */
    &.ui-tonal {
      --_bg-color: var(--surface-tonal);
      --_color: var(--text-primary);
    }

    &.ui-outlined {
      --_bg-color: var(--surface-default);
      --_color: var(--text-primary);
    }

    &:where(button, a):where(:not([disabled])) {
      &:where(:not(:active)):hover {
        --_bg-color: light-dark(
          oklch(from var(--surface-tonal) calc(l * 0.98) c h),
          oklch(from var(--surface-tonal) calc(l * 1.1) c h)
        );
      }
    }

    /* Icon */
    &:has(svg:first-child) {
      padding-inline: var(--size-1) var(--size-2);
    }

    &:has(svg:last-child) {
      padding-inline: var(--size-2) var(--size-1);
    }

    &:has(svg) {
      svg {
        flex-shrink: 0;
        inline-size: var(--size-3);
      }
    }

    /* Sizes */
    &.ui-small {
      block-size: var(--size-5);
    }

    &.ui-multiline {
      block-size: auto;
    }

    /* Ripple effect */
    background-position: center;

    &:where(:not([disabled])) {
      &:where(:not(:active):hover) {
        --ripple: radial-gradient(circle, transparent 1%, var(--_bg-color) 1%)
          center/15000%;

        transition: background var(--button-ripple-duration);
      }

      &:where(:hover:active) {
        background-size: var(--button-ripple-size);
        transition: background 0s;
      }
    }

    /* Disabled */
    &:where([disabled]) {
      opacity: 0.64;
      --_color: color-mix(
        in oklch,
        var(--text-muted) 50%,
        var(--surface-default)
      );
      cursor: not-allowed;
    }
  }
}

@layer components.root {
  :where(.ui-description-list) {
    --_border-style: solid;
    --_border-width: 1px;

    display: grid;
    gap: var(--size-3);
    margin: 0;
    padding: 0;

    &.ui-dotted {
      --_border-style: dotted;
      --_border-width: 2px;
    }

    .ui-item {
      display: grid;
      margin: 0;
      padding: 0;

      dt,
      .ui-term {
        display: block;
        font-weight: 700;
        overflow: hidden;
        position: relative;
      }

      dd {
        margin: 0;
      }
    }

    @container (width > 45ch) {
      gap: var(--size-1);

      .ui-item {
        align-items: baseline;
        display: grid;
        gap: var(--size-1);
        grid-template-columns: 1fr auto;

        dt,
        .ui-term {
          inline-size: max-content;

          &::after {
            display: inline-block;
          }
        }

        dd {
          color: var(--text-muted);
          text-align: end;
        }
      }

      &.ui-bordered .ui-item {
        grid-template-columns: auto 1fr auto;

        dt,
        .ui-term {
          order: 0;
        }

        dd {
          order: 2;
        }

        &::after {
          background-color: transparent;
          block-size: 2px;
          border-block-end: var(--_border-width) var(--_border-style)
            var(--border-color);
          content: "";
          order: 1;
        }
      }
    }
  }
}

@layer components.root {
  :where(.ui-divider) {
    background-color: var(--border-color);
    block-size: var(--border-size-1);
    margin-block: var(--size-fluid-3);

    /* Border color */
    &.ui-border-filled {
      background-color: var(--surface-filled);
    }

    &.ui-border-primary {
      background-color: var(--primary);
    }

    &.ui-border-tonal {
      background-color: var(--surface-tonal);
    }
  }
}

@layer components.root {
  :where(.ui-link) {
    color: var(--primary);
    cursor: pointer;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--primary);
    text-underline-offset: 2px;

    &[href] {
      &:hover,
      &:focus-visible {
        color: var(--primary-light);
      }
    }

    @supports (-moz-appearance: none) {
      text-underline-offset: 2px;
    }
  }
}

@layer components.root {
  :where(.ui-table) {
    --_table-border-radius: var(--border-radius);

    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--_table-border-radius);
    overflow: hidden;
    inline-size: 100%;
    margin: var(--size-3) 0;
    position: relative;

    /* Rows */
    tr {
      &:hover {
        background-color: oklch(from var(--surface-filled) l c h / 75%);
      }
    }

    /* Cells */
    th,
    td {
      background-color: var(--surface-default);
      border-inline-end: var(--border-width) solid var(--border-color);
      border-block-end: var(--border-width) solid var(--border-color);
      padding: var(--size-1) var(--size-2);

      &:last-child {
        border-inline-end: none;
      }
    }

    /* Remove bottom border only on the last row of the table */
    & > *:last-child tr:last-child {
      th,
      td {
        border-block-end: none;
      }
    }

    th {
      background-color: var(--surface-filled);
      color: var(--text-primary);
      font-size: var(--font-size-05);
      font-weight: 600;
      text-align: start;
    }

    td {
      font-size: var(--font-size-05);
    }

    /* Round corner cells  */
    & > thead:first-of-type tr:first-child {
      th:first-child {
        border-start-start-radius: var(--_table-border-radius);
      }

      th:last-child {
        border-start-end-radius: var(--_table-border-radius);
      }
    }

    /* Logic for tables without thead */
    & > tbody:first-of-type:not(thead ~ tbody) tr:first-child {
      td:first-child {
        border-start-start-radius: var(--_table-border-radius);
      }

      td:last-child {
        border-start-end-radius: var(--_table-border-radius);
      }
    }

    /* Logic for bottom corners (whether in tbody or tfoot) */
    & > *:last-child tr:last-child {
      :where(th, td):first-child {
        border-end-start-radius: var(--_table-border-radius);
      }

      :where(th, td):last-child {
        border-end-end-radius: var(--_table-border-radius);
      }
    }

    /* Footer */
    tfoot {
      tr td {
        background-color: var(--surface-filled);
        padding-block: var(--size-2);
      }

      td {
        color: var(--text-primary);
        font-weight: 600;
        border-top: var(--border-width) solid var(--border-color);
      }
    }

    /* Caption */
    caption {
      caption-side: bottom;
      color: var(--text-muted);
      font-size: var(--font-size-05);
      margin-inline-start: var(--size-2);
      padding: var(--size-2) 0;
      text-align: start;
    }

    /* Header */
    thead {
      z-index: 1;
    }

    /* Remove bottom border of the row above the footer to stay single-line */
    tbody:has(+ tfoot) tr:last-child td {
      border-block-end: none;
    }

    /* Column group */
    colgroup col {
      border: none;
    }

    @container (width < 60ch) {
      th,
      td {
        padding: var(--size-1) 0.875rem;
      }
    }

    /* Spacious */
    &.ui-spacious {
      th,
      td {
        padding: var(--size-3);
      }

      caption {
        margin-inline-start: var(--size-3);
        padding: var(--size-2) 0;
      }

      @container (width < 60ch) {
        th,
        td {
          padding: var(--size-3);
        }
      }
    }

    /* Dense */
    &.ui-dense {
      th,
      td {
        padding: var(--size-1);
      }

      caption {
        margin-inline-start: var(--size-1);
        padding: var(--size-1) 0;
      }

      @container (width < 60ch) {
        th,
        td {
          padding: var(--size-1);
        }
      }
    }
  }
}

@layer components.root {
  :where(.ui-progress) {
    --_motion: var(--motion, 1);
    --_accent-color: var(--primary);
    --_bg-color: var(--surface-tonal);

    background-color: var(--_bg-color);
    block-size: var(--size-1);
    border-radius: var(--border-radius, 0.25rem);
    display: inline-block;
    inline-size: 100%;
    overflow: hidden;
    position: relative;
    vertical-align: baseline;

    /* Color */
    &.ui-filled {
      --_bg-color: var(--surface-filled);
    }

    &.ui-default {
      --_bg-color: var(--surface-default);
    }

    &.ui-tonal {
      --_bg-color: var(--surface-tonal);
    }

    & > progress {
      appearance: none;
      background: none;
      block-size: 100%;
      border: 0;
      display: block;
      inline-size: 100%;

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

      &[value]::-webkit-progress-value {
        background-color: var(--_accent-color);
        transition: inline-size calc(0.2s * var(--_motion))
          var(--ease-out-4, cubic-bezier(0, 0, 0.1, 1));
      }

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

  :where(.ui-progress):has(> progress:indeterminate) {
    &::after {
      animation: indeterminate calc(2s * var(--motion, 1)) linear infinite;
      background-color: var(--_accent-color);
      content: "";
      inset: 0 auto 0 0;
      position: absolute;
      will-change: inset-inline-start, inset-inline-end;
    }

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

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

  [dir="rtl"] {
    :where(.ui-progress):has(> progress:indeterminate) {
      &::after {
        animation-direction: reverse;
      }
    }
  }

  @keyframes indeterminate {
    0% {
      inset-inline-start: -200%;
      inset-inline-end: 100%;
    }

    60% {
      inset-inline-start: 107%;
      inset-inline-end: -8%;
    }

    100% {
      inset-inline-start: 107%;
      inset-inline-end: -8%;
    }
  }
}

@layer components.root {
  [aria-busy="true"]:not(
    input,
    select,
    textarea,
    html,
    progress,
    [aria-describedby]
  ) {
    position: relative;

    &::before {
      animation: spin 0.7s linear infinite;
      block-size: 1em;
      border-color: transparent currentColor currentColor;
      border-radius: 50%;
      border-style: solid;
      border-width: 3px;
      content: "";
      display: inline-block;
      inline-size: 1em;
      opacity: 0.5;
      vertical-align: -0.14em;
    }

    &:not(button.ui-button):not(:empty) {
      &::before {
        margin-inline-end: 0.5em;
      }
    }
  }

  @keyframes spin {
    to {
      transform: rotate(1turn);
    }
  }
}

@layer components.root {
  label.ui-checkbox {
    --_input-size: var(--size-4);

    align-items: center;
    color: var(--text-primary);
    cursor: pointer;
    display: inline-grid;
    gap: 0 var(--size-2);
    grid-auto-columns: auto;
    grid-auto-flow: column;
    inline-size: fit-content;
    line-height: 1.5;
    transform: translateZ(0);
    user-select: none;

    /* Disabled */
    &:has([disabled]) {
      cursor: not-allowed;
      opacity: 0.64;
      user-select: none;

      input {
        cursor: not-allowed;
      }
    }

    /* Required dot */
    &:has(:invalid) {
      .ui-label:after {
        color: var(--red);
        content: "*";
        inset: 0 -0.25ex auto auto;
        position: absolute;
      }
    }

    /* Label */
    .ui-label {
      color: var(--text-primary);
      font-size: var(--font-size-05);
      grid-column: 2;
      grid-row: 1;
      position: relative;
      padding-inline: 0 1ex;
    }

    /* End text */
    :where(.ui-end-text) {
      color: var(--text-muted);
      font-size: var(--font-size-0);
      grid-column: 2;
      grid-row: 2;
      line-height: 1.5;
      z-index: 1;
    }

    /* Spread layout */
    &.ui-spread {
      align-items: center;
      column-gap: var(--size-4);
      grid-auto-flow: unset;
      grid-template-columns: 1fr auto;
      inline-size: 100%;

      .ui-label {
        font-weight: 600;
        grid-column: 1;
        grid-row: 1;
        inline-size: fit-content;
      }

      input {
        grid-column: 2;
        grid-row: 1;
      }

      :where(.ui-end-text) {
        grid-column: 1;
        grid-row: 2;
      }
    }

    /* Stacked layout */
    &.ui-stack {
      justify-items: center;
      grid-auto-columns: unset;

      .ui-label {
        grid-column: 1/-1;
        grid-row: 2;
        margin-block-start: var(--size-1);
        padding-inline: 1ex;

        /* Required dot */
        &::after {
          inset: 0 -0.25ex auto auto;
        }
      }

      .ui-end-text {
        grid-column: 1/-1;
        grid-row: 3;
      }
    }

    /* Input */
    input[type="checkbox"] {
      --_input-size: var(--size-4);

      appearance: none;
      aspect-ratio: 1;
      background-color: var(--surface-default);
      block-size: var(--_input-size);
      border-radius: var(--radius-1);
      border: 1px solid var(--border-color);
      box-sizing: border-box;
      cursor: pointer;
      display: grid;
      font-size: var(--_input-size);
      inline-size: var(--_input-size);
      margin: 0;
      padding: 0;
      place-items: center;
      position: relative;

      &:checked,
      &:indeterminate {
        background-color: var(--primary);
        border-color: var(--primary);
      }

      /* Checkmark */
      &::after {
        background-color: var(--primary-contrast);
        clip-path: polygon(
          15% 52%,
          40% 77%,
          85% 32%,
          75% 22%,
          40% 57%,
          25% 42%
        );
        content: "";
        inset: 0;
        opacity: 0;
        position: absolute;
      }

      &:checked::after,
      &:indeterminate::after {
        opacity: 1;
      }

      /* Indeterminate dash */
      &:indeterminate::after {
        clip-path: polygon(20% 45%, 80% 45%, 80% 55%, 20% 55%);
      }

      &::before {
        --highlight-size: 175%;
      }
    }

    /* Sizes */
    &.ui-small {
      input[type="checkbox"] {
        --_input-size: var(--size-3);
      }
    }

    &.ui-large {
      input[type="checkbox"] {
        --_input-size: var(--size-5);
      }
    }

    /* Validation */
    &[data-invalid],
    &:has(:user-invalid) {
      --primary: var(--critical);

      :where(.ui-end-text) {
        color: var(--critical);
      }
    }

    /* Touch devices */
    @media (pointer: coarse) {
      input {
        --_input-size: var(--size-4);
      }
    }

    @media (forced-colors: active) {
      input {
        border: 1px solid CanvasText;

        &:checked,
        &:indeterminate {
          background-color: SelectedItem;
          border-color: SelectedItem;

          &::after {
            background-color: SelectedItemText;
          }
        }
      }
    }
  }
}

@layer components.root {
  label.ui-radio {
    --_input-size: 1.125rem;
    --_indicator-size: 50%;

    align-items: center;
    color: var(--text-primary);
    cursor: pointer;
    display: inline-grid;
    gap: 0 var(--size-2);
    grid-auto-columns: auto;
    grid-auto-flow: column;
    inline-size: fit-content;
    line-height: 1.5;
    transform: translateZ(0);
    user-select: none;

    /* Disabled */
    &:has([disabled]) {
      cursor: not-allowed;
      opacity: 0.64;
      user-select: none;

      input {
        cursor: not-allowed;
      }
    }

    /* Required dot */
    &:has(:invalid) {
      .ui-label:after {
        color: var(--red);
        content: "*";
        inset: 0 -0.25ex auto auto;
        position: absolute;
      }
    }

    /* Label */
    .ui-label {
      color: var(--text-primary);
      font-size: var(--font-size-05);
      grid-column: 2;
      grid-row: 1;
      padding-inline: 0 1ex;
      position: relative;
    }

    /* End text */
    :where(.ui-end-text) {
      color: var(--text-muted);
      font-size: var(--font-size-0);
      grid-column: 2;
      grid-row: 2;
      line-height: 1.5;
      z-index: 1;
    }

    /* Stacked layout */
    &.ui-stack {
      grid-auto-columns: unset;
      justify-items: center;

      .ui-label {
        grid-column: 1/-1;
        grid-row: 2;
        margin-block-start: var(--size-1);
        padding-inline: 1ex;

        /* Required dot */
        &::after {
          inset: 0 -0.25ex auto auto;
        }
      }

      .ui-end-text {
        grid-column: 1/-1;
        grid-row: 3;
      }
    }

    /* Input */
    input[type="radio"] {
      appearance: none;
      aspect-ratio: 1;
      background-color: var(--surface-default);
      block-size: var(--_input-size);
      border: 1px solid var(--field-border-color);
      border-radius: var(--radius-round);
      box-sizing: border-box;
      cursor: pointer;
      display: grid;
      inline-size: var(--_input-size);
      margin: 0;
      padding: 0;
      place-items: center;
      position: relative;

      &:checked {
        background-color: var(--primary);
        border-color: var(--primary);
      }

      /* Dot */
      &::after {
        background-color: var(--primary-contrast);
        block-size: var(--_indicator-size);
        border-radius: var(--radius-round);
        content: "";
        inline-size: var(--_indicator-size);
        margin: auto;
        opacity: 0;
      }

      &:checked::after {
        opacity: 1;
      }

      &::before {
        --highlight-size: 175%;
      }
    }

    /* Sizes */
    &.ui-small {
      input[type="radio"] {
        --_input-size: var(--size-3);
      }
    }

    &.ui-large {
      input[type="radio"] {
        --_input-size: var(--size-4);
      }
    }

    /* Validation */
    &[data-invalid],
    &:has(:user-invalid) {
      --primary: var(--critical);

      :where(.ui-end-text) {
        color: var(--critical);
      }
    }

    /* Touch devices */
    @media (pointer: coarse) {
      input[type="radio"] {
        block-size: var(--size-4);
        inline-size: var(--size-4);
      }
    }

    @media (forced-colors: active) {
      input[type="radio"] {
        border: 1px solid CanvasText;

        &:checked {
          background-color: SelectedItem;
          border-color: SelectedItem;

          &::after {
            background-color: SelectedItemText;
          }
        }
      }
    }
  }
}

@layer components.root {
  :where(.ui-range) {
    --_motion: var(--motion, 1);
    display: grid;
    gap: var(--size-1) 0;
    grid-template-columns: 1fr auto;
    position: relative;

    .ui-label {
      color: var(--text-primary);
      font-size: var(--font-size-05);
      font-weight: 600;
      grid-column: 1;
      grid-row: 1;
    }

    :where(.ui-value) {
      color: var(--text-muted);
      font-size: var(--font-size-0);
      font-variant-numeric: tabular-nums;
      font-weight: 600;
      grid-column: 2;
      grid-row: 1;
      line-height: 1.5;
      text-align: end;
    }

    .ui-start-text {
      color: var(--text-muted);
      font-size: var(--font-size-0);
      grid-column: 1/-1;
      grid-row: 2;
      line-height: 1.5;
    }

    :where(.ui-end-text) {
      color: var(--text-muted);
      font-size: var(--font-size-0);
      grid-column: 1/-1;
      grid-row: 5;
      line-height: 1.5;
    }

    /* Datalist (tick mark labels) */
    :where(datalist) {
      color: var(--text-muted);
      display: flex;
      font-size: var(--font-size-0);
      grid-column: 1/-1;
      grid-row: 4;
      justify-content: space-between;
      margin-top: calc(var(--size-1) * -1);
      padding-inline: calc(3ex / 2);

      &>option {
        display: flex;
        inline-size: 0;
        justify-content: center;
        padding: 0;
        white-space: nowrap;
      }
    }

    /* Disabled */
    &:has([disabled]) {
      cursor: not-allowed;
      opacity: 0.64;
      user-select: none;

      .ui-label,
      .ui-value,
      .ui-start-text,
      .ui-end-text {
        cursor: not-allowed;
      }
    }

    /* Color */
    &.ui-filled input[type="range"] {
      --_track-color: var(--surface-filled);
    }

    &.ui-default input[type="range"] {
      --_track-color: var(--surface-default);
    }

    &.ui-tonal input[type="range"] {
      --_track-color: var(--surface-tonal);
    }

    /* Orientation */
    &.ui-spread {
      align-items: center;
      column-gap: var(--size-4);
      container-type: inline-size;
      grid-template-columns: 1fr auto;

      .ui-label {
        grid-column: 1;
        grid-row: 1;
      }

      .ui-start-text {
        color: var(--text-muted);
        display: block;
        font-size: var(--font-size-0);
        grid-column: 1;
        grid-row: 2;
        line-height: 1.5;
      }

      input[type="range"] {
        align-self: center;
        grid-column: 2;
        grid-row: 1;
        min-inline-size: 25ch;
      }

      :where(.ui-value) {
        grid-column: 2;
        grid-row: 2;
      }

      :where(.ui-end-text) {
        grid-column: 2;
        grid-row: 2;
        text-align: end;
      }

      datalist {
        grid-column: 2;
        grid-row: 2;
      }

      &:has(datalist) :where(.ui-end-text) {
        grid-row: 3;
      }

      &:has(.ui-value) :where(.ui-end-text) {
        grid-row: 3;
      }

      &:has(.ui-value):has(datalist) :where(.ui-end-text) {
        grid-row: 4;
      }

      @container (width < 400px) {
        grid-template-columns: 1fr;

        * {
          grid-column: 1/-1;
        }

        .ui-label {
          grid-row: 1;
        }

        :where(.ui-value) {
          grid-row: 1;
          justify-self: end;
          text-align: end;
        }

        .ui-start-text {
          grid-row: 2;
        }

        input[type="range"] {
          grid-column: 1/-1;
          grid-row: 3;
        }

        datalist {
          grid-column: 1/-1;
          grid-row: 4;
        }

        :where(.ui-end-text) {
          grid-row: 5;
          text-align: start;
        }
      }
    }

    /* Validation */
    &[data-invalid],
    &:has(:user-invalid) {
      --_thumb-bg: var(--color-9);
      --_thumb-highlight-color: oklch(from var(--color-9) 70% 100% h / 20%);

      .ui-start-text,
      .ui-end-text,
      .ui-value {
        color: var(--color-9);
      }
    }

    /* Range input */
    :where(& > input[type="range"]) {
      --_thumb-bg: var(--primary);
      --_thumb-highlight-color: oklch(from var(--primary) 70% 100% h / 20%);
      --_thumb-highlight-size: 0px;
      --_thumb-offset: -1.125ex;
      --_thumb-size: 3ex;
      --_track-color: var(--field-border-color);
      --_track-fill: 0%;
      --_track-fill-color: var(--primary);
      --_track-height: 0.75ex;
      --_track-radius: 1e5px;

      appearance: none;
      background: transparent;
      block-size: var(--size-4);
      display: block;
      grid-column: 1/-1;
      grid-row: 3;
      inline-size: 100%;
      outline-offset: 1ex;

      @media (hover: none) {
        --_thumb-offset: -11.5px;
        --_thumb-size: 30px;
      }

      /* Track */
      &::-webkit-slider-runnable-track {
        appearance: none;
        background: linear-gradient(to right,
            var(--_track-fill-color) var(--_track-fill, 0%),
            var(--_track-color) 0%);
        block-size: var(--_track-height);
        border-radius: var(--_track-radius);
      }

      &::-moz-range-track {
        appearance: none;
        background: var(--_track-color);
        block-size: var(--_track-height);
        border-radius: var(--_track-radius);
      }

      &::-moz-range-progress {
        appearance: none;
        background: var(--_track-fill-color);
        block-size: var(--_track-height);
        border-radius: var(--_track-radius);
      }

      /* Ring */
      &::-webkit-slider-thumb {
        appearance: none;
        background: var(--_thumb-bg);
        block-size: var(--_thumb-size);
        border: 3px solid var(--surface-default);
        border-radius: 50%;
        box-shadow: 0 0 0 var(--_thumb-highlight-size) var(--_thumb-highlight-color);
        cursor: ew-resize;
        inline-size: var(--_thumb-size);
        margin-block-start: var(--_thumb-offset);

        transition: box-shadow calc(0.1s * var(--_motion)) ease;

        .ui-fieldset-item:focus-within & {
          border-color: var(--gray-14);
        }
      }

      &::-moz-range-thumb {
        appearance: none;
        background: var(--_thumb-bg);
        block-size: var(--_thumb-size);
        border: 3px solid var(--surface-default);
        border-radius: 50%;
        box-shadow: 0 0 0 var(--_thumb-highlight-size) var(--_thumb-highlight-color);
        cursor: ew-resize;
        inline-size: var(--_thumb-size);
        margin-block-start: var(--_thumb-offset);

        transition: box-shadow calc(0.1s * var(--_motion)) ease;

        .ui-fieldset-item:focus-within & {
          border-color: var(--gray-14);
        }
      }

      /* Element state */
      .ui-range:has(:user-invalid) &,
      .ui-range[data-invalid] & {
        --_track-fill-color: var(--color-9);
      }

      &:not([disabled]) {
        &:hover {
          --_thumb-highlight-size: var(--size-1);
        }

        &:active {
          --_thumb-highlight-size: var(--size-2);
          --_track-color: light-dark(oklch(from var(--field-border-color) calc(l * 0.9) c h),
              oklch(from var(--field-border-color) calc(l * 1.1) c h));
        }
      }

      &[disabled] {
        --_thumb-bg: oklch(from var(--text-primary) l c h / 50%);
        --_track-color: var(--field-border-color);

        cursor: not-allowed;

        &::-webkit-slider-thumb {
          cursor: not-allowed;
        }

        &::-moz-range-thumb {
          cursor: not-allowed;
        }
      }
    }
  }
}

@layer components.root {
  :where(.ui-switch) {
    --_motion: var(--motion, 1);
    --_accent-color: var(--primary);
    --_accent-contrast: var(--primary-contrast);

    --_dot-bg-color: light-dark(var(--gray-11), var(--gray-14));
    --_dot-inset: var(--size-1) auto auto var(--size-1);
    --_dot-outline-size: 0;
    --_dot-size: var(--size-3);

    --_track-bg-color: light-dark(var(--gray-3), var(--gray-8));
    --_track-height: var(--size-5);
    --_track-width: var(--size-8);
    --_transition-tf: var(--ease-4);
    --_transition-time: calc(0.2s * var(--_motion));

    align-items: center;
    color: var(--text-primary);
    display: inline-grid;
    gap: 0 var(--size-2);
    grid-auto-columns: auto;
    grid-auto-flow: column;
    inline-size: fit-content;

    :where(input[type="checkbox"][role="switch"]) {
      appearance: none;
      block-size: var(--_track-height);
      cursor: pointer;
      inline-size: var(--_track-width);
      margin: 0;
      position: relative;

      /* Track */
      &::before {
        background-color: var(--_track-bg-color);
        block-size: var(--_track-height);
        border: 1px solid var(--_dot-bg-color);
        border-radius: var(--radius-round);
        content: "";
        inline-size: var(--_track-width);
        inset: 0;
        position: absolute;
      }

      &:focus-visible {
        --focus-ring-color: currentColor;
        outline: var(--focus-ring-width) var(--focus-ring-style)
          var(--focus-ring-color);
        outline-offset: var(--focus-ring-offset);
      }

      /* Dot */
      &::after {
        background-color: var(--_dot-bg-color);
        block-size: var(--_dot-size);
        border-radius: var(--radius-round);
        content: "";
        inline-size: var(--_dot-size);
        inset: var(--_dot-inset);
        outline: var(--_dot-outline-size) solid var(--_dot-bg-color);
        outline-offset: -1px;
        position: absolute;
      }

      /* Checked */
      &:checked {
        &::before {
          background-color: var(--_accent-color);
          border-color: var(--_accent-color);
          transition:
            background-color var(--_transition-time) var(--_transition-tf),
            border-color var(--_transition-time) var(--_transition-tf);
        }

        /* Dot */
        &::after {
          --_dot-bg-color: var(--_accent-contrast);
          --_dot-outline-size: calc(var(--size-1) - 1px);

          inset-inline-start: calc(
            var(--_track-width) - var(--_dot-size) - var(--size-1)
          );
        }
      }

      /* Animation */
      /* Track */
      &::before {
        transition:
          background-color var(--_transition-time) var(--_transition-tf),
          border-color var(--_transition-time) var(--_transition-tf);
      }

      /* Dot */
      &::after {
        transition: all var(--_transition-time) var(--_transition-tf);
      }

      &:active:after {
        --_dot-outline-size: calc(var(--size-1) + 1px);
      }

      &:checked {
        &:active:after {
          --_dot-outline-size: calc(var(--size-1) + 1px);
        }
      }
    }

    /* Icons */
    &:has(.ui-icon-checked, .ui-icon-unchecked) {
      [role="switch"] {
        grid-column: 1 / -1;
        grid-row: 1;
      }

      &:has([role="switch"]:checked) {
        .ui-icon-unchecked {
          display: none;
        }

        .ui-icon-checked {
          display: block;
        }
      }

      .ui-icon-checked {
        display: none;
      }

      .ui-icon-unchecked,
      .ui-icon-checked {
        grid-column: 1;
        grid-row: 1;
        pointer-events: none;
        z-index: 1;

        svg {
          display: block;
          inline-size: var(--_dot-size);
        }
      }

      .ui-icon-unchecked {
        margin-inline-start: calc(
          var(--_track-width) - var(--_dot-size) - var(--size-1)
        );
      }

      .ui-icon-checked {
        margin-inline-start: var(--size-1);
      }
    }

    /* Required dot */
    &:has(:invalid) {
      .ui-label:after {
        color: var(--red);
        content: "*";
        inset: 0 -0.25ex auto auto;
        position: absolute;
      }
    }

    /* Disabled */
    &:has([disabled]) {
      cursor: not-allowed;
      opacity: 0.64;
      user-select: none;

      input {
        cursor: not-allowed;
      }
    }

    /* Label */
    .ui-label {
      color: var(--text-primary);
      font-size: var(--font-size-05);
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
      padding-inline: 0 1ex;
      position: relative;
      user-select: none;
    }

    /* End text */
    :where(.ui-end-text) {
      color: var(--text-muted);
      font-size: var(--font-size-0);
      grid-column: 2;
      grid-row: 2;
      line-height: 1.5;
      z-index: 1;
    }

    /* Size */
    &.ui-small {
      --_dot-size: 0.75rem;
      --_track-height: var(--size-4);
      --_track-width: 2.5rem;
    }

    /* Spread layout */
    &.ui-spread {
      align-items: center;
      column-gap: var(--size-4);
      grid-auto-flow: unset;
      grid-template-columns: 1fr auto;
      inline-size: 100%;

      .ui-label {
        font-weight: 600;
        grid-column: 1;
        grid-row: 1;
        inline-size: fit-content;
      }

      input[role="switch"] {
        grid-column: 2;
        grid-row: 1;
      }

      &:has(.ui-icon-checked, .ui-icon-unchecked) {
        input[role="switch"],
        .ui-icon-checked,
        .ui-icon-unchecked {
          grid-column: 2;
        }
      }

      :where(.ui-end-text) {
        grid-column: 1;
        grid-row: 2;
      }
    }

    /* Stacked layout */
    &.ui-stack {
      grid-auto-columns: unset;
      justify-items: center;

      .ui-label {
        grid-column: 1/-1;
        grid-row: 2;
        margin-block-start: var(--size-1);
        padding-inline: 1ex;
      }

      .ui-end-text {
        grid-column: 1/-1;
        grid-row: 3;
      }
    }

    /* Validation */
    &[data-invalid] {
      input {
        border-radius: var(--radius-round);
        outline: 2px solid var(--color-9);
      }

      .ui-end-text {
        color: var(--color-9);
      }
    }
  }
}

@layer components.extended {
  :where(#toast-manager) {
    background: none;
    block-size: auto;
    border: none;
    display: none;
    flex-direction: column-reverse;
    gap: var(--size-3);
    inline-size: auto;
    inset: auto var(--size-4) var(--size-4) auto;
    margin: 0;
    max-inline-size: calc(100vi - var(--size-8));
    overflow: visible;
    padding: 0;
    pointer-events: none;
    position: fixed;
    z-index: 1000;

    &:popover-open {
      display: flex;
    }

    &::backdrop {
      display: none;
    }

    /* Optional cap on visible toasts. Older toasts beyond this depth are hidden
		   but still in the DOM so they animate cleanly when newer ones are removed. */
    /* > .toast:nth-last-child(n + 6) { display: none; } */
  }

  :where(.ui-toast) {
    --_anim-enter: 0.3s;
    --_anim-exit: 0.3s;

    align-items: center;
    animation:
      toast-enter var(--_anim-enter) var(--ease-out-3) both,
      toast-hold attr(data-duration type(<time>), 5s) linear both,
      toast-exit var(--_anim-exit) var(--ease-in-3) both;
    animation-delay:
      0s, var(--_anim-enter),
      calc(var(--_anim-enter) + attr(data-duration type(<time>), 5s));
    background-color: light-dark(var(--gray-15), var(--gray-2));
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-3);
    color: var(--text-primary-contrast);
    display: flex;
    gap: var(--size-3);
    justify-content: space-between;
    min-inline-size: 30ch;
    padding: var(--size-3) var(--size-4);
    pointer-events: auto;

    &:hover {
      animation-play-state: paused;
    }

    &.ui-exiting {
      animation: toast-exit var(--_anim-exit) var(--ease-in-3) forwards;
    }

    .ui-icon {
      background: no-repeat center / contain;
      block-size: var(--size-4);
      flex-shrink: 0;
      inline-size: var(--size-4);
    }

    /* Hide the icon slot when there's no severity to render against. */
    &:not([data-severity]) .ui-icon {
      display: none;
    }

    .ui-content {
      font-size: var(--font-size-05);
      word-break: break-word;
    }

    .ui-title {
      font-weight: 600;
    }

    .ui-description {
      color: oklch(from currentColor l c h / 75%);
      font-size: var(--font-size-0);
    }

    .ui-close-button {
      background: none;
      border: none;
      color: inherit;
      cursor: pointer;
      display: grid;
      opacity: 0.7;
      padding: var(--size-1);
      place-items: center;
      transition: opacity 0.2s;

      &:hover {
        opacity: 1;
      }
    }

    &[data-severity="success"] .ui-icon {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><path d='m9 11 3 3L22 4'/></svg>");
    }

    &[data-severity="info"] .ui-icon {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
    }

    &[data-severity="warning"] .ui-icon {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>");
    }

    &[data-severity="critical"] .ui-icon {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m15 9-6 6'/><path d='m9 9 6 6'/></svg>");
    }
  }

  @keyframes toast-enter {
    from {
      opacity: 0;
      translate: var(--size-4) 0;
    }

    to {
      opacity: 1;
      translate: 0 0;
    }
  }

  @keyframes toast-hold {
    from {
      opacity: 1;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes toast-exit {
    from {
      opacity: 1;
      scale: 1;
      translate: 0 0;
    }

    to {
      opacity: 0;
      scale: 0.9;
      translate: 0 var(--size-4);
    }
  }
}

@layer components.root {
  :where(.ui-p) {
    text-wrap: pretty;

    &.ui-small {
      font-size: var(--font-size-1);
    }

    &.ui-large {
      font-size: var(--font-size-3);
    }
  }

  :where(.ui-h1, .ui-h2, .ui-h3, .ui-h4, .ui-h5, .ui-h6) {
    color: var(--text-primary);
    font-weight: 700;
    text-wrap: pretty;
  }

  :where(.ui-h1) {
    font-size: var(--font-size-h1, var(--font-size-7));
    letter-spacing: -0.02em;
    line-height: 1.15;
  }

  :where(.ui-h2) {
    font-size: var(--font-size-h2, var(--font-size-5, 2rem));
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  :where(.ui-h3) {
    font-size: var(--font-size-h3, var(--font-size-4, 1.5rem));
    letter-spacing: -0.01em;
    line-height: 1.167;
  }

  :where(.ui-h4) {
    font-size: var(--font-size-h4, var(--font-size-3, 1.25rem));
    letter-spacing: -0.01em;
    line-height: 1.235;
  }

  :where(.ui-h5) {
    font-size: var(--font-size-h5, var(--font-size-2, 1.1rem));
    line-height: 1.334;
  }

  :where(.ui-h6) {
    font-size: var(--font-size-h6, var(--font-size-1, 1rem));
    line-height: 1;
  }

  /** Overline */
  :where(.ui-overline) {
    color: light-dark(oklch(from var(--text-muted) calc(l * 1.25) c h),
        oklch(from var(--text-muted) calc(l * 0.75) c h));
    font-size: var(--font-size-0);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  :where(.ui-hgroup) {
    &>p {
      margin: 0;
    }

    &> :where(h1, h2, h3, h4, h5, h6) {
      margin-block: 0 0.4em;
    }

    /* First p element (overline) */
    &>p:first-of-type:first-child {
      color: light-dark(oklch(from var(--text-muted) calc(l * 1.25) c h),
          oklch(from var(--text-muted) calc(l * 0.75) c h));
      font-size: var(--font-size-0);
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    /* Body paragraphs after the heading */
    &>p:not(:first-of-type:first-child) {
      color: oklch(from currentColor l c h / 75%);
      font-size: var(--font-size-3);
      line-height: 1.6;
    }

    &>p+p {
      margin-block-start: 0.75em;
    }
  }

  /** Caption */
  :where(.ui-caption) {
    color: var(--text-muted);
    font-size: var(--font-size-0);
    line-height: 1.6;
  }

  /* Inline text elements - class utilities */
  :where(.ui-u, .ui-abbr, .ui-dfn) {
    text-decoration: underline;
    text-underline-offset: 1px;

    @supports (-moz-appearance: none) {
      text-underline-offset: 2px;
    }
  }

  :where(.ui-abbr, .ui-dfn) {
    font-style: normal;
    text-decoration: var(--color-9) underline dotted;

    &[title] {
      cursor: help;
      text-underline-offset: 1px;
    }

    @supports (-moz-appearance: none) {
      text-underline-offset: 2px;
    }
  }

  :where(.ui-sup) {
    font-size: 0.5em;
    vertical-align: super;
  }

  :where(p, span).ui-small {
    font-size: max(0.5em, var(--font-size-0, 0.75rem));
  }

  :where(.ui-cite) {
    font-style: italic;
  }

  /* Code */
  :where(.ui-kbd) {
    font-family: var(--font-mono);
    background-color: var(--text-muted);
    border-color: var(--text-muted);
    border-radius: var(--radius-2);
    border-width: var(--border-size-1);
    color: var(--text-muted-contrast);
    padding: 0.1ex 0.3ex;
    word-break: break-word;
  }

  :where(.ui-mark) {
    border-radius: var(--radius-2);
    box-decoration-break: clone;
    padding: 0.1ex 0.3ex;
    vertical-align: baseline;
  }

  :where(.ui-s) {
    text-decoration: line-through;
  }

  :where(.ui-sub) {
    font-size: 0.75em;
    vertical-align: sub;
  }

  :where(.ui-del) {
    color: var(--color-9);
    text-decoration: line-through;
  }

  :where(.ui-ins) {
    color: var(--color-9);
    text-decoration: underline;
    text-underline-offset: 1px;
  }

  :where(.ui-var) {
    font-family: var(--font-mono);
    background-color: var(--text-muted);
    border-color: var(--text-muted);
    border-radius: var(--radius-2);
    border-width: var(--border-size-1);
    color: var(--text-muted-contrast);
    padding: 0.1ex 0.3ex;
    word-break: break-word;
  }

  :where(.ui-samp) {
    font-family: var(--font-mono);
  }

  /* Blockquote */
  :where(.ui-blockquote) {
    border-inline-start: var(--border-size-3) solid currentColor;
    padding-block: var(--size-3);
    padding-inline: var(--size-4);

    :first-child {
      margin-block-start: 0;
    }

    :last-child {
      margin-block-end: 0;
    }

    footer {
      color: var(--text-muted);
      margin-block-start: var(--size-3);
    }
  }

  /* Code block */
  :where(pre.ui-code-block) {
    background-color: var(--color-15);
    border-radius: var(--border-radius);
    color: var(--color-1);
    font-family: var(--font-mono);
    font-size: var(--font-size-05);
    max-inline-size: 100%;
    overflow-x: auto;
    padding-block: var(--size-3);
    padding-inline: var(--size-4);
    scrollbar-width: thin;
    white-space: pre;

    >code {
      background: none;
      border-radius: 0;
      color: inherit;
      font-size: inherit;
      padding: 0;
      word-break: normal;
      writing-mode: inherit;
    }
  }
}

/* Rich text */

@layer components.extended {
  @scope (.ui-rich-text) to (.ui-not-rich-text) {
    a {
      color: var(--primary);
      cursor: pointer;
      font-size: inherit;
      font-weight: 700;
      line-height: inherit;
      text-decoration: underline;
      text-decoration-color: var(--primary);
      text-underline-offset: 2px;

      &[href] {

        &:hover,
        &:focus-visible {
          color: var(--primary-light);
        }
      }
    }

    /* Blockquote */
    blockquote {
      border-inline-start: var(--border-size-3) solid currentColor;
      font-size: inherit;
      line-height: inherit;
      padding-block: var(--size-3);
      padding-inline: var(--size-4);

      :first-child {
        margin-block-start: 0;
      }

      :last-child {
        margin-block-end: 0;
      }

      footer {
        color: var(--text-muted);
        margin-block-start: var(--size-3);
      }
    }

    /* Code */
    pre {
      border-radius: var(--border-radius);
      font-size: var(--font-size-05);
      margin-block: var(--size-6);
      max-inline-size: max-content;
      min-inline-size: 0;
      padding-block: var(--size-3);
      padding-inline: var(--size-4);
      white-space: pre;
    }

    pre:has(> code) {
      background-color: var(--color-15);
      border-radius: var(--border-radius);
      color: var(--color-1);
      max-inline-size: 100%;
      overflow-x: auto;
      scrollbar-width: thin;

      >code {
        background: none;
        border-radius: 0;
        color: inherit;
        font-size: inherit;
        padding: 0;
        word-break: normal;
        writing-mode: inherit;
      }
    }

    /* Text */
    p {
      font-size: inherit;
      line-height: inherit;
      margin-block: 1.25em;
      text-wrap: pretty;
    }

    :is(h1, h2, h3, h4, h5, h6) {
      color: var(--text-primary);
      font-weight: 700;
      text-wrap: pretty;

      &+*:not(&) {
        margin-block-start: 0;
      }
    }

    h1 {
      font-size: var(--font-size-h1, var(--font-size-7));
      letter-spacing: -0.02em;
      line-height: 1.1111111;
      margin-block: 0 0.8888889em;
    }

    h2 {
      font-size: var(--font-size-h2, var(--font-size-5, 2rem));
      letter-spacing: -0.02em;
      line-height: 1.3333333;
      margin-block: 2em 1em;
    }

    h3 {
      font-size: var(--font-size-h3, var(--font-size-4, 1.5rem));
      letter-spacing: -0.01em;
      line-height: 1.6;
      margin-block: 1.6em 0.6em;
    }

    h4 {
      font-size: var(--font-size-h4, var(--font-size-3, 1.25rem));
      letter-spacing: -0.01em;
      line-height: 1.5;
      margin-block: 1.5em 0.5em;
    }

    h5 {
      font-size: var(--font-size-h5, var(--font-size-2, 1.1rem));
      line-height: 1;
      margin-block: 0 var(--size-1);
    }

    h6 {
      font-size: var(--font-size-h6, var(--font-size-1, 1rem));
      line-height: 1;
      margin-block: 0 var(--size-1);
    }

    /** Overline */
    :is(.ui-overline, hgroup p:first-of-type:first-child) {
      color: light-dark(oklch(from var(--text-muted) calc(l * 1.25) c h),
          oklch(from var(--text-muted) calc(l * 0.75) c h));
      font-size: var(--font-size-0);
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    hgroup {
      &>p {
        margin: 0;
      }

      &> :where(h1, h2, h3, h4, h5, h6) {
        margin-block: 0 0.4em;
      }

      &+* {
        margin-block-start: 3em;
      }

      /* Body paragraphs after the heading */
      &>p:not(:first-of-type:first-child) {
        color: oklch(from currentColor l c h / 75%);
        font-size: var(--font-size-3);
        line-height: 1.6;
      }

      &>p+p {
        margin-block-start: 0.75em;
      }
    }

    /* Lists */
    ul:not([class]) {
      list-style-type: disc;
    }

    ol:not([class]) {
      list-style-type: decimal;
    }

    :where(ul, ol):not([class]) {
      display: grid;
      font-size: inherit;
      gap: 0.5em;
      line-height: inherit;
      margin-block-end: 1.25em;
      margin-block-start: 1.25em;
      padding-inline-start: 1.625em;

      li {
        padding-inline-start: 0.375em;
      }
    }

    /* Nested lists */
    :where(ul ul),
    :where(ul ol),
    :where(ol ul),
    :where(ol ol) {
      margin-block-end: 0.75em;
      margin-block-start: 0.75em;
    }

    /* Description lists */
    :where(dl) {
      font-size: inherit;
      line-height: inherit;
      margin-block-end: 1.25em;
      margin-block-start: 1.25em;

      dt {
        font-weight: 700;
        margin-block-start: 1.25em;
      }

      dd {
        margin-block-start: 0.5em;
        padding-inline-start: 1.625em;
      }
    }

    /* Figures */
    figure {
      display: grid;
      gap: var(--size-2);
      margin-block: var(--size-7);
      place-items: center;

      &>* {
        margin-block: 0;
      }

      & figcaption {
        font-size: var(--font-size-0);
        text-wrap: pretty;
      }
    }

    /* Remove top margin from first child */
    &> :first-child {
      margin-block-start: 0;
    }

    /* Remove bottom margin from last child */
    &> :last-child {
      margin-block-end: 0;
    }

    /* Horizontal rules */
    hr {
      &+* {
        margin-block-start: 0;
      }
    }

    /* Inline text elements */
    :where(ins, u, abbr, dfn) {
      text-decoration: underline;
      text-underline-offset: 1px;

      @supports (-moz-appearance: none) {
        text-underline-offset: 2px;
      }
    }

    :where(abbr, dfn) {
      font-style: normal;
      text-decoration: var(--color-9) underline dotted;

      &[title] {
        cursor: help;
        text-underline-offset: 1px;
      }

      @supports (-moz-appearance: none) {
        text-underline-offset: 2px;
      }
    }

    sup {
      font-size: 0.5em;
      vertical-align: super;
    }

    :where(del, ins) {
      color: var(--color-9);
    }

    small {
      font-size: max(0.5em, var(--font-size-0, 0.75rem));
    }

    cite {
      font-style: italic;
    }

    /* Code */
    :where(code, kbd, samp, pre) {
      font-family: var(--font-mono);
    }

    code {
      background-color: oklch(0 0 0 / 18%);
      border-radius: var(--border-size-3);
      font-size: 0.9em;
      padding: 0.1ex 0.3ex;
    }

    :where(kbd, var) {
      background-color: var(--text-muted);
      border-color: var(--text-muted);
      border-radius: var(--radius-2);
      border-width: var(--border-size-1);
      color: var(--text-muted-contrast);
      padding: 0.1ex 0.3ex;
    }

    :not(pre) code,
    kbd {
      word-break: break-word;
    }

    :not(pre) code {
      border-radius: var(--border-radius, var(--radius-2));
      padding: 0.5ex;
      writing-mode: lr;
    }

    mark {
      border-radius: var(--radius-2);
      box-decoration-break: clone;
      padding: 0.1ex 0.3ex;
      vertical-align: baseline;
    }

    s {
      text-decoration: line-through;
    }

    sub {
      font-size: 0.75em;
      vertical-align: sub;
    }
  }
}

/*** Extended components (has dependencies) */

@layer components.extended {
  :where(.ui-badge) {
    --_anchor-tx: -50%;
    --_anchor-ty: 50%;
    --_badge-inset: auto auto 100% 100%;
    --_bg-color: var(--primary);
    --_border-color: var(--primary);
    --_dot-size: var(--size-2);
    --_size: var(--size-4);
    --_text-color: var(--gray-1);

    display: inline-flex;
    position: relative;
    vertical-align: middle;

    /* Floating wrapper: traditional inset-based positioning so this works
       in browsers without position-area support (Firefox, older Safari). */
    &>.ui-anchor-floating:not([popover]) {
      inset: var(--_badge-inset);
      position-anchor: auto;
      position-area: none;
    }

    /* Indicator */
    &>.ui-anchor-floating>.ui-badge-indicator {
      background-color: var(--_bg-color);
      block-size: var(--_size);
      border: 2px solid var(--_border-color);
      border-radius: var(--radius-round);
      color: var(--_text-color);
      display: grid;
      font-size: var(--font-size-0);
      font-weight: 500;
      inline-size: max-content;
      line-height: normal;
      min-inline-size: var(--_size);
      padding-inline: var(--size-1);
      place-items: center;
      text-align: center;
      transition: opacity 0.2s var(--ease-out-1);
    }

    /* Colors */
    &.ui-critical {
      --_bg-color: var(--critical);
      --_border-color: var(--critical);
    }

    &.ui-success {
      --_bg-color: var(--success);
      --_border-color: var(--success);
    }

    &.ui-info {
      --_bg-color: var(--info);
      --_border-color: var(--info);
    }

    &.ui-warning {
      --_bg-color: var(--warning);
      --_border-color: var(--warning);
    }

    &.ui-neutral {
      --_bg-color: var(--neutral);
      --_border-color: var(--neutral);
    }

    /* Alignment */
    &.ui-start-start {
      --_anchor-tx: 50%;
      --_anchor-ty: 50%;
      --_badge-inset: auto 100% 100% auto;
    }

    &.ui-end-start {
      --_anchor-tx: 50%;
      --_anchor-ty: -50%;
      --_badge-inset: 100% 100% auto auto;
    }

    &.ui-end-end {
      --_anchor-tx: -50%;
      --_anchor-ty: -50%;
      --_badge-inset: 100% auto auto 100%;
    }

    /* Dot */
    &.ui-dot {
      --_anchor-tx: calc((var(--_dot-size) - 2px) * -1);
      --_anchor-ty: var(--_dot-size);
    }

    &.ui-dot>.ui-anchor-floating>.ui-badge-indicator {
      block-size: var(--_dot-size);
      inline-size: var(--_dot-size);
      min-inline-size: var(--_dot-size);
      padding: 0;
    }

    /* Visibility */
    &.ui-invisible>.ui-anchor-floating>.ui-badge-indicator {
      opacity: 0;
      pointer-events: none;
    }
  }
}

@layer components.extended {
  :where([role="group"].ui-button-group) {
    --_border-radius: var(--button-border-radius);

    border-radius: var(--_border-radius);
    display: inline-flex;
    min-width: max-content;

    /* Button */
    button {
      border-radius: 0;

      /* button.css > --_accent-tonal */
      --_divider-color: light-dark(oklch(from var(--_accent-tonal) calc(l - 0.1) c h),
          oklch(from var(--_accent-tonal) calc(l + 0.1) c h));

      &.ui-outlined {
        --_divider-color: var(--_border-color);
      }

      &.ui-filled {
        --_divider-color: currentColor;
      }

      &:focus-visible {
        outline-offset: -4px;
      }

      /* Color inherited from Button Group. */
      :where(.ui-button-group.ui-critical, .ui-button-group.ui-primary) & {
        --_color-contrast: var(--gray-1);
        --_color-tonal: var(--color-6);
        --_accent-tonal-contrast: var(--text-primary-contrast);
        --_default-hover-bg-color: oklch(from var(--_accent) l c h / 15%);
        --_default-active-bg-color: oklch(from var(--_accent) l c h / 25%);
        --_filled-hover-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
        --_filled-active-bg-color: oklch(from var(--_accent) calc(l - 0.15) c h);
        --_outlined-active-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
      }

      :where(.ui-button-group.ui-critical) & {
        --_color: var(--critical);
      }

      :where(.ui-button-group.ui-primary) & {
        --_color: var(--primary);
      }

      :where(.ui-button-group.ui-small) & {
        --_min-height: 1.875rem;
        padding-block: 0;
        padding-inline: 1ex;
      }

      :where(.ui-button-group.ui-large) & {
        --_min-height: 2.875rem;
        padding-inline: 4ex;
      }

      :where(.ui-button-group.ui-outlined) & {
        --_border-color: var(--_accent);
        --_divider-color: var(--_accent);

        &:where(:not([disabled])) {
          &:where(:not(:active):hover) {
            --_bg-color: var(--_accent);
            --_border-color: var(--_accent);
            --_text-color: var(--_accent-contrast);
          }

          &:where(:active) {
            --_bg-color: var(--_outlined-active-bg-color);
            --_border-color: var(--_outlined-active-bg-color);
            --_text-color: var(--_accent-contrast);
          }
        }
      }

      :where(.ui-button-group.ui-tonal) & {
        --_bg-color: var(--_accent-tonal);
        --_text-color: var(--_accent-tonal-contrast);

        &:where(:not([disabled])) {
          &:where(:not(:active):hover) {
            --_bg-color: var(--_accent);
            --_text-color: var(--_accent-contrast);
          }

          &:where(:active) {
            --_bg-color: var(--_outlined-active-bg-color);
            --_text-color: var(--_accent-contrast);
          }
        }
      }

      :where(.ui-button-group.ui-filled) & {
        --_bg-color: var(--_accent);
        --_text-color: var(--_accent-contrast);
        --_divider-color: currentColor;

        :where(.ui-button-group.ui-critical, .ui-button-group.ui-primary) & {
          --_divider-color: light-dark(oklch(from var(--_accent) calc(l - 0.1) c h),
              oklch(from var(--_accent) calc(l + 0.1) c h));
        }

        &:where(:not([disabled])) {
          &:where(:not(:active):hover) {
            --_bg-color: var(--_filled-hover-bg-color);
          }

          &:where(:active) {
            --_bg-color: var(--_filled-active-bg-color);
          }
        }
      }
    }

    &:not(.ui-vertical) {
      button {
        &:first-of-type {
          border-end-start-radius: var(--_border-radius);
          border-start-start-radius: var(--_border-radius);
        }

        &:last-of-type {
          border-end-end-radius: var(--_border-radius);
          border-start-end-radius: var(--_border-radius);
        }

        /* Siblings */
        &+& {
          border-inline-start-color: var(--_divider-color);
          border-inline-width: 1px;
          margin-inline-start: -1px;

          &[disabled] {
            border-inline-start-color: color-mix(in oklch,
                var(--_divider-color) 40%,
                transparent);
          }
        }
      }
    }

    &.ui-vertical {
      flex-direction: column;

      button {
        padding: var(--size-2);

        &:has(svg) {
          aspect-ratio: 1;
          padding: var(--size-1);
        }

        &:first-of-type {
          border-start-start-radius: var(--_border-radius);
          border-start-end-radius: var(--_border-radius);
        }

        &:last-of-type {
          border-end-start-radius: var(--_border-radius);
          border-end-end-radius: var(--_border-radius);
        }

        &+& {
          border-block-start: 1px solid var(--_divider-color);
          margin-block-start: -1px;

          &[disabled] {
            border-block-start-color: color-mix(in oklch,
                var(--_divider-color) 40%,
                transparent);
          }
        }
      }
    }
  }
}

@layer components.extended {
  :where(details.ui-accordion) {
    --_motion: var(--motion, 1);
    --_actions-gap: var(--size-1);
    --_actions-margin-block-start: var(--size-3);
    --_actions-padding-block-end: var(--size-1);
    --_actions-padding-inline: var(--size-3) var(--size-1);
    --_bg-color: transparent;
    --_border-color: transparent;
    --_border-radius: var(--border-radius, 4px);
    --_border-width: 0;
    --_content-padding-block: var(--size-2) var(--size-3);
    --_content-padding-inline: var(--_padding-inline);
    --_margin-inline: var(--size-1);
    --_padding-inline: initial;
    --_shadow: none;
    --_summary-padding-block: var(--size-3);
    --_summary-padding-inline: var(--_padding-inline);
    --_svg-transition: calc(0.2s * var(--_motion)) var(--ease-1);
    --_transition: calc(0.2s * var(--_motion));

    background-color: var(--_bg-color);
    border: var(--_border-width) solid var(--_border-color);
    border-radius: var(--_border-radius);
    box-shadow: var(--_shadow);
    display: block;
    margin-inline: var(--_margin-inline);
    transition: all var(--_transition) ease-out;

    &.ui-elevated {
      --_bg-color: var(--surface-elevated);
      --_margin-inline: 0;
      --_padding-inline: var(--size-3);
      --_shadow: var(--shadow-3);
    }

    &.ui-outlined {
      --_bg-color: var(--surface-default);
      --_border-color: var(--border-color);
      --_border-width: 1px;
      --_margin-inline: 0;
      --_padding-inline: var(--size-3);
    }

    &.ui-tonal {
      --_bg-color: var(--surface-tonal);
      --_margin-inline: 0;
      --_padding-inline: var(--size-3);
    }

    /* Accordion animation */
    /* https://nerdy.dev/open-and-close-transitions-for-the-details-element */
    interpolate-size: allow-keywords;

    &::details-content {
      block-size: 0;
      opacity: 0;
      overflow-y: clip;
      transition:
        content-visibility var(--_transition) allow-discrete,
        opacity var(--_transition),
        block-size var(--_transition);
    }

    &[open]::details-content {
      block-size: auto;
      opacity: 1;
    }

    /* Layout */
    &>summary {
      background-color: inherit;
      cursor: pointer;
      font-weight: 700;
      padding-block: var(--_summary-padding-block);
      padding-inline: var(--_summary-padding-inline);
      user-select: none;

      &:has(svg) {
        align-items: center;
        display: flex;
        justify-content: space-between;
        list-style: none;

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

      svg {
        transition: rotate var(--_svg-transition);
      }
    }

    &[open]>summary svg {
      rotate: 180deg;
    }

    &>.ui-content {
      margin-block-start: 0;
      padding-block: var(--_content-padding-block);
      padding-inline: var(--_content-padding-inline);
    }

    &>.ui-actions {
      display: flex;
      gap: var(--_actions-gap);
      justify-content: end;
      margin-block-start: var(--_actions-margin-block-start);
      padding-block-end: var(--_actions-padding-block-end);
      padding-inline: var(--_actions-padding-inline);
    }
  }

  /* Accordion group  */
  :where(.ui-card[role="group"]:has(details.ui-accordion)) {
    --_group-radius: var(--border-radius);
    --_gutter-color: var(--border-color);
    --_item-padding-inline: var(--size-3);
    --_item-summary-padding-inline: var(--_item-padding-inline);

    display: block;

    &.ui-card {
      &:not(.ui-tonal, .ui-outlined, .ui-elevated) {
        --_item-summary-padding-inline: 0;
      }
    }

    &>.ui-content {
      margin-block: 0;
      padding: 0;
    }

    &>details.ui-accordion {
      --_border-color: transparent;
      --_border-width: 0;
      --_margin-inline: 0;
      --_padding-inline: var(--_item-padding-inline);
      --_shadow: none;
      --_summary-padding-inline: var(--_item-summary-padding-inline);

      /* Border between accordion items */
      &+& {
        border-block-start: 1px solid var(--_gutter-color);
        border-radius: 0;
      }

      /* First item */
      &:first-of-type {
        border-start-end-radius: var(--_group-radius);
        border-start-start-radius: var(--_group-radius);

        summary {
          border-start-end-radius: var(--_group-radius);
          border-start-start-radius: var(--_group-radius);
        }
      }

      /* Last item */
      &:last-of-type {
        border-end-end-radius: var(--_group-radius);
        border-end-start-radius: var(--_group-radius);

        summary {
          border-end-end-radius: var(--_group-radius);
          border-end-start-radius: var(--_group-radius);
        }
      }
    }
  }
}

@layer components.extended {
  /*
Lists meant to be used stand-alone or as part of Select elements

  Intended use-case:
  - ul.ui-list > li
  - .ui-select > .ui-list > option
*/
  :where(.ui-list) {
    --_bg-color: var(--surface-filled);
    --_bg-color-hover: oklch(from var(--primary) l c h / 15%);

    background-color: var(--_bg-color);
    color: var(--text-primary);
    list-style: none;
    padding: var(--size-2) 0;

    @media (pointer: coarse) {
      &,
      * {
        user-select: none;
      }
    }

    /* Background color */
    &.ui-transparent {
      --_bg-color: transparent;
    }

    &.ui-default {
      --_bg-color: var(--surface-default);
    }

    &.ui-tonal {
      --_bg-color: var(--surface-tonal);
    }

    /* Borders on all list items */
    &.ui-bordered {
      :where(li + li, option + option) {
        margin-block-start: var(--size-3);

        &::before {
          block-size: 1px;
          border-block-start: 1px solid var(--border-color);
          content: "";
          display: block;
          inline-size: 100%;
          inset: calc(-1 * var(--size-2)) 0 auto 0;
          position: absolute;
          visibility: visible;
          /* override select > option:before style */
        }
      }
    }

    /* Dense - less gaps and spacing */
    &.ui-dense {
      :where(li, option) {
        gap: var(--size-2);
        min-block-size: var(--size-7);
        padding: var(--size-1) var(--size-2);

        &.ui-border-top {
          margin-block-start: var(--size-2);

          &::before {
            inset: calc(-1 * var(--size-1)) 0 auto 0;
          }
        }

        /* Clickable list item */
        &:has(> a, > button, > label) {
          min-block-size: auto;
          padding: 0;
        }

        & > :where(a, button, label) {
          gap: var(--size-2);
          min-block-size: var(--size-7);
          padding: var(--size-1) var(--size-2);
        }

        /* Checkbox / Radio */
        & > label {
          .ui-end {
            padding-inline-end: 0.125rem;
          }

          &:where(.ui-checkbox, .ui-radio) {
            --_input-size: var(--size-3);
          }
        }

        /* Leading and trailing content */
        .ui-start,
        .ui-end {
          .ui-avatar {
            max-inline-size: var(--size-6);
          }

          .ui-icon-button,
          svg {
            max-inline-size: var(--size-4);
          }

          .ui-checkbox,
          .ui-radio {
            --_input-size: var(--size-3);
          }
        }
      }
    }

    /* Gutterless */
    &.ui-gutterless {
      :where(li, option) {
        padding-inline: 0;

        & > :where(a, button, label) {
          padding-inline: 0;
        }
      }
    }

    /* List item */
    :where(li, option, [role="group"] > label) {
      align-items: center;
      background-color: var(--_bg-color);
      display: flex;
      font-size: var(--font-size-05);
      gap: var(--size-3);
      isolation: isolate;
      min-block-size: 40px;
      padding: var(--size-2) var(--size-3);
      position: relative;

      &::before {
        display: none;
        /* removing checkmark from option */
      }

      * {
        font-size: inherit;
      }

      /* Clickable list item */
      &:has(> a, > button, > label) {
        background: transparent;
        display: block;
        min-block-size: auto;
        padding: 0;

        &[aria-selected="true"] > :where(a, button, label),
        &[aria-selected="true"],
        &:has(> [aria-current="page"]) > :where(a, button, label) {
          background-color: var(--_bg-color-hover);
        }
      }

      /* Select option */
      &:where(option) {
        align-items: center;
        background-color: var(--_bg-color);
        color: inherit;
        cursor: pointer;
        display: flex;
        gap: var(--size-3);
        inline-size: 100%;
        margin: 0;
        min-block-size: 40px;
        padding: var(--size-2) var(--size-3);
        text-align: start;
        text-decoration: none;
        z-index: 0;

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

        &[aria-selected="true"] {
          background-color: var(--_bg-color-hover);
          color: var(--primary);
        }

        &:checked {
          background-color: oklch(from var(--primary) l c h / 30%);
        }
      }

      & > a,
      & > button,
      & > label {
        align-items: center;
        background-color: var(--_bg-color);
        color: inherit;
        cursor: pointer;
        display: flex;
        gap: var(--size-3);
        inline-size: 100%;
        margin: 0;
        min-block-size: 40px;
        outline-offset: -3px;
        padding: var(--size-2) var(--size-3);
        text-align: start;
        text-decoration: none;
        z-index: 0;

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

        &[aria-selected="true"],
        &[aria-current="page"] {
          background-color: var(--_bg-color-hover);
        }
      }

      /* Checkbox / Radio / Switch */
      & > label {
        &:where(.ui-checkbox, .ui-radio, .ui-switch) {
          display: flex;
        }

        .ui-end {
          padding-inline-end: var(--size-1);
        }

        &:where(.ui-checkbox, .ui-radio) {
          inline-size: 100%;
        }

        /* Switches look comically big in lists, so it's better to use a smaller variant  */
        &.ui-switch {
          --_dot-size: 0.75rem;
          --_track-height: var(--size-4);
          --_track-width: 2.5rem;
        }
      }

      /* Video */
      &:has(video) {
        padding: 0.75rem var(--size-3) 0.75rem 0;
      }

      /* Border between list items */
      &.ui-border-top {
        margin-block-start: var(--size-3);

        &::before {
          block-size: 1px;
          border-block-start: 1px solid var(--border-color);
          content: "";
          display: block;
          inline-size: 100%;
          inset: calc(-1 * var(--size-2)) 0 auto 0;
          position: absolute;
        }
      }

      /* Text */
      .ui-text {
        flex: 1;
        line-height: 1.6;

        :where(h1, h2, h3, h4, h5, h6, p, span) {
          color: inherit;
          font-weight: 400;
        }

        p + p {
          color: var(--text-muted);
          font-size: var(--font-size-0);
        }
      }

      /* Leading content */
      .ui-start {
        align-items: center;
        align-self: center;
        display: grid;
        z-index: 1;

        &:has(svg) {
          max-inline-size: var(--size-5);
        }

        svg {
          padding-block-start: 0.125rem;
        }

        img {
          aspect-ratio: 1;
          inline-size: 56px;
          object-fit: cover;
        }

        video {
          aspect-ratio: 16/9;
          block-size: 64px;
          object-fit: cover;
        }
      }

      /* Trailing content */
      .ui-end {
        align-items: center;
        display: flex;
        font-size: var(--font-size-0);
        text-align: end;
        z-index: 1;

        &:not(:has(a, button, input)) {
          pointer-events: none;
        }

        kbd {
          background-color: transparent;
          border: 0;
          color: inherit;
          opacity: 0.6;
        }

        svg {
          inline-size: 100%;
          max-inline-size: var(--size-5);
        }
      }

      /* Inset */
      &.ui-inset {
        .ui-text {
          padding-inline-start: calc(var(--size-5) + var(--size-3));
        }

        /* Safety measure so it won't look bad if there for some reason should exist a leading element inside. */
        .ui-start {
          display: none;
        }
      }
    }
  }
}

@layer components.extended {
  :where(.ui-dialog) {
    --_motion: var(--motion, 1);
    inline-size: 100%;
    inset: 0;
    margin: auto;
    margin-block-start: 15%;
    max-inline-size: calc(100% - var(--size-4));
    padding-block: 0;
    pointer-events: none;
    position: fixed;

    @media (width > 600px) {
      max-inline-size: 60ch;
    }

    /* Animation */
    /* There's no close animation, intentionally */
    opacity: 0;

    &::backdrop {
      backdrop-filter: blur(1px);
      background-color: rgba(0, 0, 0, 0.5);
    }

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

    &[open] {
      pointer-events: all;
    }

    .ui-actions {
      justify-content: end;
      padding-inline: var(--size-3) var(--size-1);
    }

    &[open] {
      opacity: 1;
      transition:
        display calc(0.2s * var(--_motion)) allow-discrete,
        overlay calc(0.2s * var(--_motion)) allow-discrete,
        opacity calc(0.2s * var(--_motion)) var(--ease-out-1);

      @starting-style {
        opacity: 0;
      }
    }

    &[open] {
      margin-block-start: 15%;

      @starting-style {
        opacity: 0;
      }
    }
  }

  :where(html:has(.ui-dialog[open])) {
    block-size: 100%;
    overflow: hidden;
  }
}

@layer components.root {
  :where(dialog.ui-drawer) {
    --_motion: var(--motion, 1);
    --_backdrop-bg-color: transparent;
    --_backdrop-blur: blur(2px);
    --_bg-color: var(--surface-default);
    --_block-size: min(80vb, 650px);
    --_border-color: var(--border-color);
    --_border-width: var(--border-width);
    --_color: var(--text-primary);
    --_content-padding: var(--size-4);
    --_footer-gap: var(--size-3);
    --_footer-padding: var(--size-3);
    --_header-font-size: var(--font-size-3);
    --_header-padding: var(--size-3);
    --_inline-size: min(375px, 100vi);
    --_shadow: var(--shadow-2);
    --_transition-duration: calc(0.2s * var(--_motion));
    --_transition-timing: var(--ease-out-3);

    background-color: var(--_bg-color);
    border: none;
    box-shadow: var(--_shadow);
    color: var(--_color);
    display: flex;
    flex-direction: column;
    margin: 0;
    max-inline-size: 100%;
    padding: 0;
    position: fixed;
    transition:
      display var(--_transition-duration) allow-discrete,
      overlay var(--_transition-duration) allow-discrete,
      translate var(--_transition-duration) var(--_transition-timing);
    z-index: 1000;

    &::backdrop {
      backdrop-filter: var(--_backdrop-blur);
      background-color: var(--_backdrop-bg-color);
      opacity: 0;
      transition:
        display var(--_transition-duration) allow-discrete,
        overlay var(--_transition-duration) allow-discrete,
        opacity var(--_transition-duration) var(--_transition-timing);
    }

    &.ui-backdrop-transparent {
      --_backdrop-blur: none;
    }

    .ui-header {
      align-items: center;
      border-block-end: var(--_border-width) solid var(--_border-color);
      display: flex;
      padding: var(--_header-padding);

      :where(h1, h2, h3, h4, h5, h6) {
        font-size: var(--_header-font-size);
        margin: 0;
      }

      :where(.ui-icon-button) {
        margin-inline-start: auto;
      }
    }

    .ui-content {
      flex: 1;
      overflow-y: auto;
      padding: var(--_content-padding);
    }

    .ui-footer {
      border-block-start: var(--_border-width) solid var(--_border-color);
      display: flex;
      gap: var(--_footer-gap);
      justify-content: end;
      padding: var(--_footer-padding);
    }

    &.ui-inline-start,
    &.ui-inline-end {
      block-size: 100dvb;
      inline-size: var(--_inline-size);
      inset-block: 0;
      max-block-size: 100%;
    }

    &.ui-inline-start {
      border-inline-end: var(--_border-width) solid var(--_border-color);
      inset-inline-end: auto;
      inset-inline-start: 0;
      translate: -100% 0;
    }

    &.ui-inline-end {
      border-inline-start: var(--_border-width) solid var(--_border-color);
      inset-inline-end: 0;
      inset-inline-start: auto;
      translate: 100% 0;

      .ui-footer {
        justify-content: start;
      }
    }

    &.ui-block-start,
    &.ui-block-end {
      block-size: var(--_block-size);
      inline-size: 100dvi;
      inset-inline: 0;
      max-block-size: 80dvb;
    }

    &.ui-block-start {
      border-block-end: var(--_border-width) solid var(--_border-color);
      inset-block-end: auto;
      inset-block-start: 0;
      translate: 0 -100%;
    }

    &.ui-block-end {
      border-block-start: var(--_border-width) solid var(--_border-color);
      inset-block-end: 0;
      inset-block-start: auto;
      translate: 0 100%;
    }

    &[open] {
      translate: 0 0;

      &::backdrop {
        opacity: 1;
      }

      @starting-style {
        &::backdrop {
          opacity: 0;
        }

        &.ui-inline-start {
          translate: -100% 0;
        }

        &.ui-inline-end {
          translate: 100% 0;
        }

        &.ui-block-start {
          translate: 0 -100%;
        }

        &.ui-block-end {
          translate: 0 100%;
        }
      }
    }
  }

  /* Scroll-lock is provided by the shared `.ui-scroll-lock` utility in core/utils.css. */
  html:has(dialog.ui-drawer.ui-scroll-lock[open].ui-backdrop-transparent) {
    overflow: unset;
    overscroll-behavior: auto;

    @media (width < 500px) {
      overflow: clip;
      overscroll-behavior: contain;
    }
  }
}

@layer components.extended {

  /* Form */
  :where(.ui-form) {
    display: grid;
    gap: var(--size-8);

    hr {
      margin-block: 0;
    }
  }

  /* Fieldset */
  :where(.ui-fieldset) {
    all: unset;
    border: 0;
    border-radius: 0;
    display: grid;
    gap: var(--size-1);
    margin: 0;
    min-inline-size: 0;
    padding: 0;

    /* Legend */
    :where(legend, .ui-legend) {
      all: unset;
      color: var(--text-primary);
      font-weight: 600;
      margin-block-end: var(--size-3);
      padding: 0;

      &:has(+ :where(.ui-field-description)) {
        margin-block-end: 0;
      }
    }

    /* Field description / supporting text */
    :where(.ui-field-description) {
      color: var(--text-muted);
      font-size: var(--font-size-05);
      line-height: var(--font-lineheight-3);

      &:has(+ *) {
        margin-block-end: var(--size-3);
      }
    }

    /* End text */
    :where(.ui-end-text) {
      color: var(--text-muted);
      font-size: var(--font-size-0);
      line-height: var(--font-lineheight-3);
    }

    &:has(.ui-text-field.ui-row) {
      row-gap: var(--size-7);
    }

    /* Disabled */
    &[disabled] {
      opacity: 0.64;
      user-select: none;

      input,
      label,
      .ui-label {
        cursor: not-allowed;
      }
    }

    /* Error / validation */
    &[data-invalid] {
      :where(.ui-end-text) {
        color: var(--critical);
      }

      :where(.ui-checkbox, .ui-radio, .ui-switch) {
        --primary: var(--critical);

        :where(.ui-end-text) {
          color: var(--critical);
        }
      }

      :where(.ui-switch) {
        input {
          border-radius: var(--radius-round);
          outline: 2px solid var(--critical);
        }
      }
    }

    /* Required */
    &:has(:invalid) {
      :where(legend, .ui-legend) {
        padding-inline-end: 1ex;
        position: relative;

        &::after {
          color: var(--red);
          content: "*";
          inset: 0 -0.25ex auto auto;
          position: absolute;
        }
      }
    }
  }

  /* Field group */
  :where(.ui-field-group) {
    display: flex;
    flex-direction: column;
    gap: var(--size-4);

    /* If it only has checkboxes, radios, or switches */
    &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)):not( :has(> :not(.ui-checkbox, .ui-radio, .ui-switch))) {
      gap: var(--size-2);
    }

    /* If it only has buttons */
    &:has(.ui-button):not(:has(*:not(.ui-button))) {
      align-items: center;
      flex-direction: row;
      gap: var(--size-2);

      /* If it's not preceded by an hr */
      &:not(hr + &) {
        margin-block-start: var(--size-4);
      }
    }

    &+& {
      margin-block-start: var(--size-5);
    }

    /* Directions */
    &.ui-row {
      flex-direction: row;
      flex-wrap: wrap;

      &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)) {
        gap: var(--size-4);
      }
    }
  }
}

@layer components.extended {
  /*
- Common styling for input, textarea and select
- Form related styles such as: label, supporting text, error handling
*/
  :where(.ui-text-field, .ui-textarea, .ui-select) {
    --_motion: var(--motion, 1);
    --_accent-color: var(--primary);
    --_bg-color: var(--surface-default);
    --_border-color: var(--field-border-color);
    --_field-padding-block: var(--size-2);
    --_field-padding-inline: var(--size-2);
    --_filled-border-color: var(--text-primary);
    --_height: var(--field-size);
    --_label-color: var(--text-muted);
    --_end-text-color: var(--text-muted);

    display: grid;
    gap: var(--size-1) 0;
    position: relative;

    /* Field - the actual input with a border around it */
    .ui-field {
      background-color: var(--_bg-color);
      border: var(--field-border-width) solid var(--_border-color);
      border-radius: var(--field-border-radius);
      display: grid;
      grid-column: 1/-1;
      grid-row: 2;
      grid-template-columns: auto 1fr auto;
      grid-template-areas:
        "header header header"
        "prefix input  suffix"
        "footer footer footer";
      min-block-size: var(--_height);

      transition: border-color calc(0.2s * var(--_motion))
        cubic-bezier(0.4, 0, 0.2, 1);
    }

    :where(.ui-field) :where(input, textarea, select) {
      background: transparent;
      border: 0;
      color: var(--text-primary);
      font-family: var(--font-sans);
      font-size: var(--font-size-1);
      grid-area: input;
      inline-size: 100%;
      line-height: var(--font-lineheight-1);
      min-inline-size: 0;
      padding: var(--_field-padding-block) var(--_field-padding-inline);

      &:focus,
      &:focus-visible {
        outline: 0;
      }
    }

    /* Affixes */
    .ui-prefix,
    .ui-suffix {
      align-items: center;
      color: var(--_label-color);
      display: inline-flex;
      padding-inline: var(--_field-padding-inline);
      white-space: nowrap;
    }

    .ui-prefix {
      grid-area: prefix;
    }

    .ui-suffix {
      grid-area: suffix;
    }

    .ui-header,
    .ui-footer {
      align-items: center;
      color: var(--_label-color);
      display: flex;
      font-size: var(--font-size-0);
      gap: var(--size-2);
      padding: var(--size-1) var(--_field-padding-inline);
    }

    .ui-header {
      border-block-end: 1px solid var(--_border-color);
      grid-area: header;
    }

    .ui-footer {
      border-block-start: 1px solid var(--_border-color);
      grid-area: footer;
    }

    /* Remove padding on the input when affixes are next to it */
    .ui-field:has(> .ui-prefix) :where(input, textarea, select) {
      padding-inline-start: 0;
    }

    .ui-field:has(> .ui-suffix) :where(input, textarea, select) {
      padding-inline-end: 0;
    }

    /* Textarea - keep affix aligned with the first line */
    &.ui-textarea .ui-field {
      .ui-prefix,
      .ui-suffix {
        align-self: start;
        padding-block: var(--_field-padding-block);
      }
    }

    /* Required/Invalid */
    &:has(:invalid) {
      .ui-label:after {
        color: var(--red);
        content: "*";
        margin: -0.25em auto auto 0.25em;
      }
    }

    /* File */
    &:has(input[type="file"]) {
      cursor: pointer;

      input {
        align-self: flex-start;
        block-size: var(--_height);
        box-shadow: none;
        color: var(--text-primary);
        cursor: inherit;
        max-inline-size: 100%;
        padding: 0;
        transition: font-size 0.2s var(--ease-3);

        &::-webkit-file-upload-button,
        &::file-selector-button {
          background-color: var(--surface-tonal);
          block-size: calc(100% - var(--size-2) * 2);
          border: none;
          border-radius: var(--field-border-radius);
          cursor: pointer;
          margin-block-start: var(--size-2);
          margin-inline-end: 1ex;
          margin-inline-start: var(--size-2);
        }
      }

      /* Variants */
      &.ui-filled {
        input {
          &::-webkit-file-upload-button,
          &::file-selector-button {
            background-color: var(--surface-default);
            block-size: calc(100% - var(--size-2) * 2);
            border-radius: var(--field-border-radius);
            cursor: pointer;
            margin-block-start: var(--size-2);
          }
        }
      }

      /* Sizes */
      &.ui-small {
        input {
          font-size: var(--font-size-05);

          &::-webkit-file-upload-button,
          &::file-selector-button {
            block-size: calc(100% - var(--size-2));
            margin-block-start: var(--size-1);
          }
        }
      }
    }

    /* Autosuggest */
    &:has(input[list]) {
      .ui-label {
        /* Make sure chevron is visible */
        inline-size: calc(100% - var(--size-6));
      }
    }

    /* Select */
    &:has(select) {
      .ui-label {
        /* Make sure chevron is visible */
        inline-size: calc(100% - var(--size-6));
      }
    }

    /* Customizable Select */
    &:has(select button) {
      select {
        padding: 0;

        button {
          outline: 0;
          padding: var(--_field-padding-block) var(--size-8)
            var(--_field-padding-block) var(--_field-padding-inline);
        }
      }
    }

    /* Non-customizable Select */
    &:has(select):not(:has(button)) {
      select {
        padding: var(--_field-padding-block) var(--size-8)
          var(--_field-padding-block) var(--_field-padding-inline);
      }
    }

    /* Input - color */
    &:has(input[type="color"]) {
      .ui-field {
        block-size: var(--_height);
        inline-size: var(--_height);
        min-block-size: 0;
        overflow: hidden;
      }

      input {
        appearance: none;
        background: none;
        block-size: var(--_height);
        inline-size: var(--_height);
        overflow: hidden;
        padding: 0;

        &::-webkit-color-swatch {
          border: none;
        }

        &::-webkit-color-swatch-wrapper {
          padding: 0;
        }
      }
    }

    /* Element states */
    &:hover {
      &:not([data-invalid]) {
        .ui-field {
          border-color: var(--text-primary);
        }
      }
    }

    &:focus-within {
      .ui-field {
        border-color: var(--_accent-color);
        outline-offset: -2px;
      }
    }

    /* Label */
    .ui-label {
      color: var(--text-primary);
      font-size: var(--font-size-05);
      font-weight: 600;
      grid-column: 1/-1;
      grid-row: 1;
      padding-inline: 0 1ex;
    }

    /* End text */
    :where(.ui-end-text) {
      color: var(--_end-text-color);
      font-size: var(--font-size-0);
      grid-column: 1/-1;
      grid-row: 3;
      line-height: 1.5;
    }

    /* Auto-fit */
    &.ui-auto-fit {
      inline-size: auto;

      .ui-field {
        inline-size: auto;
      }

      :where(& input, & textarea) {
        field-sizing: content;
        inline-size: auto;
        min-inline-size: 25ch;
      }
    }

    /* Validation */
    &[data-invalid],
    &:has(:user-invalid) {
      --_accent-color: var(--color-9);
      --_border-color: var(--color-9);
      --_filled-border-color: var(--color-9);
      --_label-color: var(--color-9);
      --_end-text-color: var(--color-9);
    }

    /*
  * Variant: Filled
  */
    &.ui-filled {
      --_bg-color: var(--surface-tonal);

      &:not(:has([disabled], :has(input[type="color"]))) {
        /* Hover */
        &:hover {
          --_bg-color: light-dark(
            oklch(from var(--surface-tonal) calc(l * 0.93) c h),
            oklch(from var(--surface-tonal) calc(l * 1.1) c h)
          );
        }
      }
    }

    /* Disabled */
    &:where(:has([disabled])) {
      cursor: not-allowed;
      opacity: 0.64;
      user-select: none;

      &::before {
        display: none;
      }

      .ui-field {
        cursor: not-allowed;
      }

      :where(input, textarea, select) {
        cursor: not-allowed;

        * {
          pointer-events: none;
        }
      }

      .ui-label,
      .ui-start-text,
      .ui-end-text {
        cursor: not-allowed;
      }
    }

    /* Read-only */
    &:where(:has([readonly])) {
      &::before {
        display: none;
      }

      :where(input, textarea, select) {
        cursor: not-allowed;

        * {
          pointer-events: none;
        }
      }
    }

    /* Sizes */
    &.ui-small {
      --_field-padding-block: var(--size-2);
      --_height: var(--field-size-small);

      &:has(input[type="color"]) {
        .ui-label {
          line-height: 1.5;
        }
      }
    }

    /* Orientation */
    &.ui-spread {
      align-items: start;
      column-gap: var(--size-4);
      container-type: inline-size;
      grid-template-columns: 1fr auto;

      .ui-label {
        font-weight: 600;
        grid-column: 1;
        grid-row: 1;
      }

      .ui-start-text {
        color: var(--_end-text-color);
        font-size: var(--font-size-0);
        grid-column: 1;
        grid-row: 2;
        line-height: 1.5;
      }

      .ui-field {
        align-self: start;
        grid-column: 2;
        grid-row: 1 / span 2;
      }

      .ui-field:has(textarea) {
        grid-row: 1 / span 3;

        + .ui-end-text {
          grid-row: 4;
        }
      }

      :where(textarea) {
        min-inline-size: 30ch;
      }

      :where(.ui-end-text) {
        grid-column: 2;
        text-align: end;
      }

      /* Collapse to column on narrow containers */
      @container (width < 400px) {
        column-gap: 0;
        grid-template-columns: 1fr;

        .ui-label {
          grid-column: 1;
          grid-row: 1;
        }

        .ui-start-text {
          grid-column: 1;
          grid-row: 2;
        }

        .ui-field,
        .ui-field:has(textarea) {
          grid-column: 1;
          grid-row: 3;
        }

        :where(.ui-end-text) {
          grid-column: 1;
          grid-row: 4;
          text-align: start;
        }
      }
    }
  }
}

@layer components.extended {
  :where(.ui-select select) {
    --_motion: var(--motion, 1);
    position: relative;

    /* Default arrow */
    &::picker-icon {
      block-size: 0;
      border-block-start: 5px solid;
      border-inline: 5px solid transparent;
      color: currentColor;
      content: "";
      inline-size: 0;
      inset: 50% var(--size-3) auto auto;
      pointer-events: none;
      position: absolute;
      translate: 0 -50%;
    }

    &:open {
      &::picker-icon {
        rotate: 180deg;
      }
    }

    /* Select popover */
    &::picker(select) {
      /* Animation on-stage styles */
      border: 0;
      box-shadow: var(--shadow-2);
      opacity: 1;
      padding: 0;
      scale: 1;

      /* Animation starting styles */
      @starting-style {
        opacity: 0;
        transform: scale(0.9);
      }

      transition: display calc(0.2s * var(--_motion)) allow-discrete,
      opacity calc(0.2s * var(--_motion)) var(--ease-3),
      overlay calc(0.2s * var(--_motion)) allow-discrete,
      scale calc(0.2s * var(--_motion)) var(--ease-3);
    }

    /* Animation off-stage styles */
    &:not(:open)::picker(select) {
      opacity: 0;
      scale: 0.9;
    }

    button {
      align-items: center;
      background-color: transparent;
      display: flex;
      inline-size: 100%;
      margin: 0;
      position: relative;

      selectedcontent {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .ui-list {
      --_bg-color: var(--surface-filled);
      border: var(--field-border-width) solid var(--field-border-color);
      border-radius: var(--field-border-radius);

      /* Groups */
      [role="group"] {
        label {
          background-color: light-dark(var(--gray-3), var(--gray-13));
          color: light-dark(oklch(from var(--text-primary) calc(l * 0.75) c h),
              oklch(from var(--text-primary) calc(l * 1.25) c h));
          font-weight: 500;
          overflow: hidden;
          padding-inline: var(--size-2);
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        &:not(:first-child),
        option:first-of-type {
          margin-block-start: var(--size-2);
        }

        option:last-of-type,
        &:last-child {
          option:last-of-type {
            margin-block-end: 0;
          }
        }
      }

      /* Option */
      option {

        /* Checkmark */
        /* TODO - checkmark should be the final version of the checkmark API. Follow the development of this and remove redundant psuedo stuff. */
        &::check {
          display: none;
        }

        &::checkmark {
          display: none;
        }

        &::before {
          display: none;
        }

        &:focus-visible {
          outline-offset: -1px;
        }
      }
    }
  }

  :where(.ui-select:has(select)) {

    /* Size */
    &.ui-small {
      button {
        padding-inline: var(--size-2) var(--size-7);

        &::after {
          inset-inline-end: var(--size-2);
        }
      }
    }

    /*
    * Non-experimental Select
    *
    * Hack to get the arrow working. Pseudo elements aren't allowed on the `<select>` element, so need to add it on the `.select` class instead. Noting this down if an `:after` element would be needed on a `.select`.
    */
    &:not(:has(button)) {
      select {
        appearance: none;
      }

      /* Arrow */
      &::after {
        align-self: center;
        block-size: 0;
        border-block-start: 5px solid;
        border-inline: 5px solid transparent;
        content: "";
        display: inline-block;
        flex-shrink: 0;
        grid-column: 1/-1;
        grid-row: 2;
        inline-size: 0;
        inset-inline-end: var(--size-3);
        justify-self: end;
        pointer-events: none;
        position: relative;
      }
    }
  }

  select:has(button),
  ::picker(select) {
    appearance: base-select;
  }
}

@layer components.extended {
  :where(
    .ui-text-field:has(
      :where(
        input[type="date"],
        input[type="datetime-local"],
        input[type="email"],
        input[type="month"],
        input[type="number"],
        input[type="password"],
        input[type="search"],
        input[type="tel"],
        input[type="text"],
        input[type="time"],
        input[type="url"],
        input[type="week"]
      )
    )
  ) {
    /* Sizes */
    &.ui-small {
      input {
        padding-inline: var(--size-2);
      }
    }
  }

  /* Autosuggest */
  :where(.ui-text-field:has(input[list])) {
    .ui-field {
      position: relative;
    }

    /* Hide native arrow */
    input[list]::-webkit-calendar-picker-indicator {
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      position: absolute;
    }

    input[list] {
      padding-inline-end: var(--size-8);
    }

    .ui-field::after {
      block-size: 0;
      border-block-start: 5px solid;
      border-inline: 5px solid transparent;
      content: "";
      inline-size: 0;
      inset: 50% var(--size-3) auto auto;
      pointer-events: none;
      position: absolute;
      translate: 0 -50%;
    }

    &.ui-small {
      input[list] {
        padding-inline-end: var(--size-7);
      }

      .ui-field::after {
        inset-inline-end: var(--size-2);
      }
    }
  }
}

@layer components.extended {
  :where(.ui-textarea) {
    textarea {
      block-size: auto;
      field-sizing: content;
      min-block-size: calc(
        var(--_field-padding-block) * 2 + (var(--border-width) * 2) + 3lh
      );
      resize: vertical;
    }

    /* Size */
    &.ui-small {
      textarea {
        min-block-size: var(--size-9);
      }
    }

    /* Auto-fit */
    &.ui-auto-fit {
      textarea {
        resize: both;
      }
    }
  }
}

@layer components.extended {
  :where(.ui-tooltip) {
    --_tooltip-bg: light-dark(var(--gray-13), var(--gray-3));
    --_tooltip-color: light-dark(var(--gray-1), var(--gray-15));
    --_tooltip-offset: var(--size-2);

    &>.ui-anchor-floating {
      background-color: var(--_tooltip-bg);
      border-radius: var(--radius-2);
      color: var(--_tooltip-color);
      font-size: var(--font-size-05);
      line-height: 1.3;
      margin: var(--_tooltip-offset);
      max-inline-size: 240px;
      /* UA sets overflow: auto on [popover], which clips the arrow. */
      overflow: visible;
      padding-block: var(--size-1);
      padding-inline: var(--size-2);
      position-area: var(--anchor-position-area, block-start);
      position-try-fallbacks:
        flip-block,
        flip-inline,
        flip-block flip-inline;
      position-visibility: anchors-visible;
      text-align: center;
      text-wrap: pretty;
    }

    /* Arrow */
    &.ui-with-arrow {
      --_arrow-size: var(--size-2);

      &>.ui-anchor-floating {
        /* Offset so the arrow doesn't overlap the trigger. */
        --_tooltip-offset: calc(var(--size-2) + var(--_arrow-size) / 2);
      }

      &>.ui-anchor-floating::before {
        background-color: var(--_tooltip-bg);
        block-size: var(--_arrow-size);
        content: "";
        inline-size: var(--_arrow-size);
        inset-block-end: calc(var(--_arrow-size) / -2);
        inset-inline-start: 50%;
        position: absolute;
        rotate: 45deg;
        translate: -50% 0;
      }
    }

    /* Fade */
    &>.ui-anchor-floating[popover] {
      opacity: 0;
      transition:
        display 0.15s allow-discrete,
        opacity 0.15s var(--ease-out-1),
        overlay 0.15s allow-discrete;

      &:popover-open {
        opacity: 1;

        @starting-style {
          opacity: 0;
        }
      }
    }
  }
}

/* Utils */

@layer utils {

  /*
Screen-reader only
*/
  .ui-sr-only {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  /*
Scroll-lock
Add `.ui-scroll-lock` to any element that uses the [open] attribute (native <dialog>,
<details>, or any custom element). When that element is open, the page is locked.
*/
  html:has(.ui-scroll-lock[open]) {
    overflow: clip;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  /* Hover and active effect for checkbox, radio and icon buttons */
  :where(.ui-checkbox input, .ui-radio input, .ui-icon-button) {
    --isLTR: 1;
    --isRTL: -1;

    position: relative;
    transform-style: preserve-3d;

    &:dir(rtl) {
      --isLTR: -1;
      --isRTL: 1;
    }

    &:where(:not([disabled])) {
      &:hover:before {
        --thumb-scale: 1;
      }

      &:active:before {
        --thumb-scale: 1.1;
      }

      &::before {
        --thumb-scale: 0.01;
        --highlight-size: 150%;

        background-color: oklch(0.6 0 0 / 0.2);
        block-size: var(--highlight-size);
        clip-path: circle(50%);
        content: "";
        inline-size: var(--highlight-size);
        inset-block-start: 50%;
        inset-inline-start: 50%;
        position: absolute;
        transform-origin: center center;
        transform: translateX(calc(var(--isRTL) * 50%)) translateY(-50%) translateZ(-1px) scale(var(--thumb-scale));
        will-change: transform;

        transition: transform calc(0.2s * var(--motion, 1)) ease;
      }
    }
  }
}
/*# sourceMappingURL=opui.css.map */