/*
## Reset

This CSS reset covers more than other CSS resets and normalizers, for example, it resets styles for headings, links, lists, form elements, `<details>`, and so forth. The idea is to give you a clean slate on which to use the design system, instead of relying on browser defaults.

**References**

- <https://necolas.github.io/normalize.css/8.0.1/normalize.css>
- <https://meyerweb.com/eric/tools/css/reset/>
- <https://github.com/twbs/bootstrap/blob/649c2bb0bf326db36cbbf7e72c0541b19749a70e/dist/css/bootstrap-reboot.css>
- <https://github.com/sindresorhus/modern-normalize/blob/1fc6b5a86676b7ac8abc62d04d6080f92debc70f/modern-normalize.css>
- <https://github.com/suitcss/base/blob/50d5ad1e0d6790eb3df29b705db3684a9909894f/lib/base.css>
- <https://github.com/tailwindlabs/tailwindcss/blob/b442c912e2d052ad026fd2e3d31bc450f620a784/src/plugins/css/preflight.css>
- <https://github.com/jensimmons/cssremedy/blob/468e31a7eda599eea2003ed7983c190828ffb5fd/css/remedy.css>
- <https://github.com/csstools/sanitize.css/tree/776bd4d72654ddb54aa5071b2cd10bb1957f7f97>
- <https://unpkg.com/browse/@tailwindcss/forms@0.3.2/dist/forms.css>
- <https://chriscoyier.net/2023/10/03/being-picky-about-a-css-reset-for-fun-pleasure/>
- <https://piccalil.li/blog/a-more-modern-css-reset/>
*/

*,
::before,
::after {
  font: inherit;
  font-synthesis: none;
  /* Reset `<button>` text alignment. */
  text-align: left;
  vertical-align: 0;
  text-decoration: inherit;
  /* Prevent iOS from making text bigger in landscape orientation. */
  text-size-adjust: 100%;
  /* Prevent macOS and iOS from blurring glyphs. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: inherit;
  background-color: transparent;
  opacity: 1;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  margin: 0;
  outline: 0;
  /* Prevent long words, for example, URLs, from breaking out of the container. */
  overflow-wrap: break-word;
  /* Reset default styles of form elements. */
  appearance: none;
  list-style: none;
  /* Prevent `<textarea>` from being resizable by default. */
  resize: none;
  cursor: inherit;
}

/* Reset default style from `<details>`. */
::-webkit-details-marker {
  display: none;
}

/* Ensure that HTML elements with the `hidden` attribute are hidden. */
[hidden] {
  display: none !important;
}

/*
## Design System

The design system is defined as CSS variables and is largely converted from [Tailwind](https://tailwindcss.com/)’s design system.

**Example**

```css
font-family: var(--font-family--sans-serif);
```

**References**

- <https://github.com/tailwindlabs/tailwindcss/blob/3971f2a23ec18bfd4fee41ab3766477ba38f6774/stubs/config.full.js>
- <https://github.com/tailwindlabs/tailwindcss/blob/3971f2a23ec18bfd4fee41ab3766477ba38f6774/src/public/colors.js>
- <https://tailwindcss.com/docs/aspect-ratio> and onward.
*/
:root {
  --font-family--sans-serif: ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family--serif: ui-serif, Georgia, Cambria, "Times New Roman", Times,
    serif;
  --font-family--monospace: ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;

  /*
  Set `font-size` and `line-height` together, for example:

  ```css
  font-size: var(--font-size--3-5);
  line-height: var(--font-size--3-5--line-height);
  ```
  */
  --font-size--2-5: 0.625rem;
  --font-size--2-5--line-height: 0.875rem;
  --font-size--3: 0.75rem;
  --font-size--3--line-height: 1rem;
  --font-size--3-5: 0.875rem;
  --font-size--3-5--line-height: 1.25rem;
  --font-size--4: 1rem;
  --font-size--4--line-height: 1.5rem;
  --font-size--4-5: 1.125rem;
  --font-size--4-5--line-height: 1.75rem;
  --font-size--5: 1.25rem;
  --font-size--5--line-height: 1.75rem;
  --font-size--6: 1.5rem;
  --font-size--6--line-height: 2rem;
  --font-size--7-5: 1.875rem;
  --font-size--7-5--line-height: 2.25rem;
  --font-size--9: 2.25rem;
  --font-size--9--line-height: 2.5rem;
  --font-size--12: 3rem;
  --font-size--12--line-height: 1;
  --font-size--15: 3.75rem;
  --font-size--15--line-height: 1;
  --font-size--18: 4.5rem;
  --font-size--18--line-height: 1;
  --font-size--24: 6rem;
  --font-size--24--line-height: 1;
  --font-size--32: 8rem;
  --font-size--32--line-height: 1;

  --line-height--1: 1;
  --line-height--1-25: 1.25;
  --line-height--1-375: 1.375;
  --line-height--1-5: 1.5;
  --line-height--1-625: 1.625;
  --line-height--2: 2;

  --letter-spacing---2: -0.05em;
  --letter-spacing---1: -0.025em;
  --letter-spacing--0: 0em;
  --letter-spacing--1: 0.025em;
  --letter-spacing--2: 0.05em;
  --letter-spacing--4: 0.1em;

  --color--black: #000000;
  --color--white: #ffffff;

  --color--slate--50: #f8fafc;
  --color--slate--100: #f1f5f9;
  --color--slate--200: #e2e8f0;
  --color--slate--300: #cbd5e1;
  --color--slate--400: #94a3b8;
  --color--slate--500: #64748b;
  --color--slate--600: #475569;
  --color--slate--700: #334155;
  --color--slate--800: #1e293b;
  --color--slate--900: #0f172a;
  --color--slate--950: #020617;

  --color--gray--50: #f9fafb;
  --color--gray--100: #f3f4f6;
  --color--gray--200: #e5e7eb;
  --color--gray--300: #d1d5db;
  --color--gray--400: #9ca3af;
  --color--gray--500: #6b7280;
  --color--gray--600: #4b5563;
  --color--gray--700: #374151;
  --color--gray--800: #1f2937;
  --color--gray--900: #111827;
  --color--gray--950: #030712;

  --color--zinc--50: #fafafa;
  --color--zinc--100: #f4f4f5;
  --color--zinc--200: #e4e4e7;
  --color--zinc--300: #d4d4d8;
  --color--zinc--400: #a1a1aa;
  --color--zinc--500: #71717a;
  --color--zinc--600: #52525b;
  --color--zinc--700: #3f3f46;
  --color--zinc--800: #27272a;
  --color--zinc--900: #18181b;
  --color--zinc--950: #09090b;

  --color--neutral--50: #fafafa;
  --color--neutral--100: #f5f5f5;
  --color--neutral--200: #e5e5e5;
  --color--neutral--300: #d4d4d4;
  --color--neutral--400: #a3a3a3;
  --color--neutral--500: #737373;
  --color--neutral--600: #525252;
  --color--neutral--700: #404040;
  --color--neutral--800: #262626;
  --color--neutral--900: #171717;
  --color--neutral--950: #0a0a0a;

  --color--stone--50: #fafaf9;
  --color--stone--100: #f5f5f4;
  --color--stone--200: #e7e5e4;
  --color--stone--300: #d6d3d1;
  --color--stone--400: #a8a29e;
  --color--stone--500: #78716c;
  --color--stone--600: #57534e;
  --color--stone--700: #44403c;
  --color--stone--800: #292524;
  --color--stone--900: #1c1917;
  --color--stone--950: #0c0a09;

  --color--red--50: #fef2f2;
  --color--red--100: #fee2e2;
  --color--red--200: #fecaca;
  --color--red--300: #fca5a5;
  --color--red--400: #f87171;
  --color--red--500: #ef4444;
  --color--red--600: #dc2626;
  --color--red--700: #b91c1c;
  --color--red--800: #991b1b;
  --color--red--900: #7f1d1d;
  --color--red--950: #450a0a;

  --color--orange--50: #fff7ed;
  --color--orange--100: #ffedd5;
  --color--orange--200: #fed7aa;
  --color--orange--300: #fdba74;
  --color--orange--400: #fb923c;
  --color--orange--500: #f97316;
  --color--orange--600: #ea580c;
  --color--orange--700: #c2410c;
  --color--orange--800: #9a3412;
  --color--orange--900: #7c2d12;
  --color--orange--950: #431407;

  --color--amber--50: #fffbeb;
  --color--amber--100: #fef3c7;
  --color--amber--200: #fde68a;
  --color--amber--300: #fcd34d;
  --color--amber--400: #fbbf24;
  --color--amber--500: #f59e0b;
  --color--amber--600: #d97706;
  --color--amber--700: #b45309;
  --color--amber--800: #92400e;
  --color--amber--900: #78350f;
  --color--amber--950: #451a03;

  --color--yellow--50: #fefce8;
  --color--yellow--100: #fef9c3;
  --color--yellow--200: #fef08a;
  --color--yellow--300: #fde047;
  --color--yellow--400: #facc15;
  --color--yellow--500: #eab308;
  --color--yellow--600: #ca8a04;
  --color--yellow--700: #a16207;
  --color--yellow--800: #854d0e;
  --color--yellow--900: #713f12;
  --color--yellow--950: #422006;

  --color--lime--50: #f7fee7;
  --color--lime--100: #ecfccb;
  --color--lime--200: #d9f99d;
  --color--lime--300: #bef264;
  --color--lime--400: #a3e635;
  --color--lime--500: #84cc16;
  --color--lime--600: #65a30d;
  --color--lime--700: #4d7c0f;
  --color--lime--800: #3f6212;
  --color--lime--900: #365314;
  --color--lime--950: #1a2e05;

  --color--green--50: #f0fdf4;
  --color--green--100: #dcfce7;
  --color--green--200: #bbf7d0;
  --color--green--300: #86efac;
  --color--green--400: #4ade80;
  --color--green--500: #22c55e;
  --color--green--600: #16a34a;
  --color--green--700: #15803d;
  --color--green--800: #166534;
  --color--green--900: #14532d;
  --color--green--950: #052e16;

  --color--emerald--50: #ecfdf5;
  --color--emerald--100: #d1fae5;
  --color--emerald--200: #a7f3d0;
  --color--emerald--300: #6ee7b7;
  --color--emerald--400: #34d399;
  --color--emerald--500: #10b981;
  --color--emerald--600: #059669;
  --color--emerald--700: #047857;
  --color--emerald--800: #065f46;
  --color--emerald--900: #064e3b;
  --color--emerald--950: #022c22;

  --color--teal--50: #f0fdfa;
  --color--teal--100: #ccfbf1;
  --color--teal--200: #99f6e4;
  --color--teal--300: #5eead4;
  --color--teal--400: #2dd4bf;
  --color--teal--500: #14b8a6;
  --color--teal--600: #0d9488;
  --color--teal--700: #0f766e;
  --color--teal--800: #115e59;
  --color--teal--900: #134e4a;
  --color--teal--950: #042f2e;

  --color--cyan--50: #ecfeff;
  --color--cyan--100: #cffafe;
  --color--cyan--200: #a5f3fc;
  --color--cyan--300: #67e8f9;
  --color--cyan--400: #22d3ee;
  --color--cyan--500: #06b6d4;
  --color--cyan--600: #0891b2;
  --color--cyan--700: #0e7490;
  --color--cyan--800: #155e75;
  --color--cyan--900: #164e63;
  --color--cyan--950: #083344;

  --color--sky--50: #f0f9ff;
  --color--sky--100: #e0f2fe;
  --color--sky--200: #bae6fd;
  --color--sky--300: #7dd3fc;
  --color--sky--400: #38bdf8;
  --color--sky--500: #0ea5e9;
  --color--sky--600: #0284c7;
  --color--sky--700: #0369a1;
  --color--sky--800: #075985;
  --color--sky--900: #0c4a6e;
  --color--sky--950: #082f49;

  --color--blue--50: #eff6ff;
  --color--blue--100: #dbeafe;
  --color--blue--200: #bfdbfe;
  --color--blue--300: #93c5fd;
  --color--blue--400: #60a5fa;
  --color--blue--500: #3b82f6;
  --color--blue--600: #2563eb;
  --color--blue--700: #1d4ed8;
  --color--blue--800: #1e40af;
  --color--blue--900: #1e3a8a;
  --color--blue--950: #172554;

  --color--indigo--50: #eef2ff;
  --color--indigo--100: #e0e7ff;
  --color--indigo--200: #c7d2fe;
  --color--indigo--300: #a5b4fc;
  --color--indigo--400: #818cf8;
  --color--indigo--500: #6366f1;
  --color--indigo--600: #4f46e5;
  --color--indigo--700: #4338ca;
  --color--indigo--800: #3730a3;
  --color--indigo--900: #312e81;
  --color--indigo--950: #1e1b4b;

  --color--violet--50: #f5f3ff;
  --color--violet--100: #ede9fe;
  --color--violet--200: #ddd6fe;
  --color--violet--300: #c4b5fd;
  --color--violet--400: #a78bfa;
  --color--violet--500: #8b5cf6;
  --color--violet--600: #7c3aed;
  --color--violet--700: #6d28d9;
  --color--violet--800: #5b21b6;
  --color--violet--900: #4c1d95;
  --color--violet--950: #2e1065;

  --color--purple--50: #faf5ff;
  --color--purple--100: #f3e8ff;
  --color--purple--200: #e9d5ff;
  --color--purple--300: #d8b4fe;
  --color--purple--400: #c084fc;
  --color--purple--500: #a855f7;
  --color--purple--600: #9333ea;
  --color--purple--700: #7e22ce;
  --color--purple--800: #6b21a8;
  --color--purple--900: #581c87;
  --color--purple--950: #3b0764;

  --color--fuchsia--50: #fdf4ff;
  --color--fuchsia--100: #fae8ff;
  --color--fuchsia--200: #f5d0fe;
  --color--fuchsia--300: #f0abfc;
  --color--fuchsia--400: #e879f9;
  --color--fuchsia--500: #d946ef;
  --color--fuchsia--600: #c026d3;
  --color--fuchsia--700: #a21caf;
  --color--fuchsia--800: #86198f;
  --color--fuchsia--900: #701a75;
  --color--fuchsia--950: #4a044e;

  --color--pink--50: #fdf2f8;
  --color--pink--100: #fce7f3;
  --color--pink--200: #fbcfe8;
  --color--pink--300: #f9a8d4;
  --color--pink--400: #f472b6;
  --color--pink--500: #ec4899;
  --color--pink--600: #db2777;
  --color--pink--700: #be185d;
  --color--pink--800: #9d174d;
  --color--pink--900: #831843;
  --color--pink--950: #500724;

  --color--rose--50: #fff1f2;
  --color--rose--100: #ffe4e6;
  --color--rose--200: #fecdd3;
  --color--rose--300: #fda4af;
  --color--rose--400: #fb7185;
  --color--rose--500: #f43f5e;
  --color--rose--600: #e11d48;
  --color--rose--700: #be123c;
  --color--rose--800: #9f1239;
  --color--rose--900: #881337;
  --color--rose--950: #4c0519;

  --opacity--0: 0;
  --opacity--5: 0.05;
  --opacity--10: 0.1;
  --opacity--15: 0.15;
  --opacity--20: 0.2;
  --opacity--25: 0.25;
  --opacity--30: 0.3;
  --opacity--35: 0.35;
  --opacity--40: 0.4;
  --opacity--45: 0.45;
  --opacity--50: 0.5;
  --opacity--55: 0.55;
  --opacity--60: 0.6;
  --opacity--65: 0.65;
  --opacity--70: 0.7;
  --opacity--75: 0.75;
  --opacity--80: 0.8;
  --opacity--85: 0.85;
  --opacity--90: 0.9;
  --opacity--95: 0.95;
  --opacity--100: 1;

  /* Useful for properties including `width`, `height`, `padding`, `margin`, `gap` and so forth. */
  --size--0: 0px;
  --size--px: 1px;
  --size---px: -1px;
  --size--0-5: 0.125rem;
  --size---0-5: -0.125rem;
  --size--1: 0.25rem;
  --size---1: -0.25rem;
  --size--1-5: 0.375rem;
  --size---1-5: -0.375rem;
  --size--2: 0.5rem;
  --size---2: -0.5rem;
  --size--2-5: 0.625rem;
  --size---2-5: -0.625rem;
  --size--3: 0.75rem;
  --size---3: -0.75rem;
  --size--3-5: 0.875rem;
  --size---3-5: -0.875rem;
  --size--4: 1rem;
  --size---4: -1rem;
  --size--5: 1.25rem;
  --size---5: -1.25rem;
  --size--6: 1.5rem;
  --size---6: -1.5rem;
  --size--7: 1.75rem;
  --size---7: -1.75rem;
  --size--8: 2rem;
  --size---8: -2rem;
  --size--9: 2.25rem;
  --size---9: -2.25rem;
  --size--10: 2.5rem;
  --size---10: -2.5rem;
  --size--11: 2.75rem;
  --size---11: -2.75rem;
  --size--12: 3rem;
  --size---12: -3rem;
  --size--14: 3.5rem;
  --size---14: -3.5rem;
  --size--16: 4rem;
  --size---16: -4rem;
  --size--20: 5rem;
  --size---20: -5rem;
  --size--24: 6rem;
  --size---24: -6rem;
  --size--28: 7rem;
  --size---28: -7rem;
  --size--32: 8rem;
  --size---32: -8rem;
  --size--36: 9rem;
  --size---36: -9rem;
  --size--40: 10rem;
  --size---40: -10rem;
  --size--44: 11rem;
  --size---44: -11rem;
  --size--48: 12rem;
  --size---48: -12rem;
  --size--52: 13rem;
  --size---52: -13rem;
  --size--56: 14rem;
  --size---56: -14rem;
  --size--60: 15rem;
  --size---60: -15rem;
  --size--64: 16rem;
  --size---64: -16rem;
  --size--72: 18rem;
  --size---72: -18rem;
  --size--80: 20rem;
  --size---80: -20rem;
  --size--96: 24rem;
  --size---96: -24rem;
  --size--112: 28rem;
  --size---112: -28rem;
  --size--128: 32rem;
  --size---128: -32rem;
  --size--144: 36rem;
  --size---144: -36rem;
  --size--168: 42rem;
  --size---168: -42rem;
  --size--192: 48rem;
  --size---192: -48rem;
  --size--224: 56rem;
  --size---224: -56rem;
  --size--256: 64rem;
  --size---256: -64rem;
  --size--288: 72rem;
  --size---288: -72rem;
  --size--320: 80rem;
  --size---320: -80rem;

  --aspect-ratio--square: 1 / 1;
  --aspect-ratio--video: 16 / 9;

  /* Useful for properties including `outline`, `stroke`, and so forth. */
  --border-width--0: 0px;
  --border-width--1: 1px;
  --border-width--2: 2px;
  --border-width--4: 4px;
  --border-width--8: 8px;

  --border-radius--0: 0rem;
  --border-radius--0-5: 0.125rem;
  --border-radius--1: 0.25rem;
  --border-radius--1-5: 0.375rem;
  --border-radius--2: 0.5rem;
  --border-radius--3: 0.75rem;
  --border-radius--4: 1rem;
  --border-radius--6: 1.5rem;
  --border-radius--circle: 50%;
  --border-radius--round: 9999px;

  --box-shadow--0: 0 0 #0000;
  --box-shadow--1: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --box-shadow--2: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --box-shadow--4: 0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
  --box-shadow--10: 0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  --box-shadow--20: 0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
  --box-shadow--25: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --box-shadow--inset: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

  --rotate--0: 0deg;
  --rotate--1: 1deg;
  --rotate---1: -1deg;
  --rotate--2: 2deg;
  --rotate---2: -2deg;
  --rotate--3: 3deg;
  --rotate---3: -3deg;
  --rotate--6: 6deg;
  --rotate---6: -6deg;
  --rotate--12: 12deg;
  --rotate---12: -12deg;
  --rotate--45: 45deg;
  --rotate---45: -45deg;
  --rotate--90: 90deg;
  --rotate---90: -90deg;
  --rotate--180: 180deg;
  --rotate---180: -180deg;

  --scale--0: 0;
  --scale--50: 0.5;
  --scale--75: 0.75;
  --scale--90: 0.9;
  --scale--95: 0.95;
  --scale--100: 1;
  --scale--105: 1.05;
  --scale--110: 1.1;
  --scale--125: 1.25;
  --scale--150: 1.5;

  --transform--skew--0: 0deg;
  --transform--skew--1: 1deg;
  --transform--skew---1: -1deg;
  --transform--skew--2: 2deg;
  --transform--skew---2: -2deg;
  --transform--skew--3: 3deg;
  --transform--skew---3: -3deg;
  --transform--skew--6: 6deg;
  --transform--skew---6: -6deg;
  --transform--skew--12: 12deg;
  --transform--skew---12: -12deg;

  --filter--drop-shadow--0: drop-shadow(0 0 #0000);
  --filter--drop-shadow--1: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
  --filter--drop-shadow--2: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1))
    drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  --filter--drop-shadow--4: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07))
    drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
  --filter--drop-shadow--10: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04))
    drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
  --filter--drop-shadow--20: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03))
    drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
  --filter--drop-shadow--25: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));

  --filter--brightness--0: 0;
  --filter--brightness--50: 0.5;
  --filter--brightness--75: 0.75;
  --filter--brightness--90: 0.9;
  --filter--brightness--95: 0.95;
  --filter--brightness--100: 1;
  --filter--brightness--105: 1.05;
  --filter--brightness--110: 1.1;
  --filter--brightness--125: 1.25;
  --filter--brightness--150: 1.5;
  --filter--brightness--200: 2;

  --filter--contrast--0: 0;
  --filter--contrast--50: 0.5;
  --filter--contrast--75: 0.75;
  --filter--contrast--100: 1;
  --filter--contrast--125: 1.25;
  --filter--contrast--150: 1.5;
  --filter--contrast--200: 2;

  --filter--saturate--0: 0;
  --filter--saturate--50: 0.5;
  --filter--saturate--100: 1;
  --filter--saturate--150: 1.5;
  --filter--saturate--200: 2;

  --filter--grayscale--0: 0%;
  --filter--grayscale--100: 100%;

  --filter--invert--0: 0%;
  --filter--invert--100: 100%;

  --filter--sepia--0: 0%;
  --filter--sepia--100: 100%;

  --filter--hue-rotate--0: 0deg;
  --filter--hue-rotate--15: 15deg;
  --filter--hue-rotate--30: 30deg;
  --filter--hue-rotate--60: 60deg;
  --filter--hue-rotate--90: 90deg;
  --filter--hue-rotate--180: 180deg;

  --filter--blur--0: 0px;
  --filter--blur--4: 4px;
  --filter--blur--8: 8px;
  --filter--blur--12: 12px;
  --filter--blur--16: 16px;
  --filter--blur--24: 24px;
  --filter--blur--40: 40px;
  --filter--blur--64: 64px;

  --transition-property--none: none;
  --transition-property--all: all;
  --transition-property--colors: color, background-color, border-color,
    text-decoration-color, fill, stroke;
  --transition-property--base: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform,
    translate, rotate, scale, filter, backdrop-filter;
  --transition-property--opacity: opacity, visibility;
  --transition-property--box-shadow: box-shadow;
  --transition-property--transform: transform, translate, rotate, scale;

  --transition-duration--0: 0ms;
  --transition-duration--75: 75ms;
  --transition-duration--100: 100ms;
  --transition-duration--150: 150ms;
  --transition-duration--200: 200ms;
  --transition-duration--300: 300ms;
  --transition-duration--500: 500ms;
  --transition-duration--700: 700ms;
  --transition-duration--1000: 1000ms;
  @media (prefers-reduced-motion) {
    --transition-duration--75: 1ms;
    --transition-duration--100: 1ms;
    --transition-duration--150: 1ms;
    --transition-duration--200: 1ms;
    --transition-duration--300: 1ms;
    --transition-duration--500: 1ms;
    --transition-duration--700: 1ms;
    --transition-duration--1000: 1ms;
  }

  --transition-timing-function--ease-linear: linear;
  --transition-timing-function--ease-in: cubic-bezier(0.4, 0, 1, 1);
  --transition-timing-function--ease-out: cubic-bezier(0, 0, 0.2, 1);
  --transition-timing-function--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --animation--none: none;
  --animation--spin: spin 1s linear infinite;
  --animation--ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  --animation--pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animation--bounce: bounce 1s infinite;
}
@keyframes spin {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}
@keyframes ping {
  75%,
  100% {
    scale: 2;
    opacity: 0;
  }
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes bounce {
  0%,
  100% {
    translate: 0 -25%;
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    translate: 0;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/*
## Helpers

The `[state~="noninteractive"]` state makes **the children** of an element not interactive. The element to which the `[state~="noninteractive"]` state is applied remains interactive so that you can, for example, set a custom `cursor` on it. This is useful, for example, in a drag-and-drop interaction: you set `<body>` as `[state~="noninteractive"]` and set a custom `cursor`.
*/

[state~="noninteractive"] * {
  user-select: none;
  pointer-events: none;
  touch-action: none;
}

/*
The `.scroll` class creates a scrolling container.

- `overflow: auto;` is used to enable scrollbars if necessary.
- `position: relative;` is used so that `[type~="popover"]`’s position is computed with respect to the scrolling container.
- `container-type: inline-size;` is used so that `[type~="popover"]`’s `max-width` is computed with respect to the scrolling container.
*/

.scroll {
  position: relative;
  overflow: auto;
  container-type: inline-size;
}