index.css

/*! Tundra.css - https: //github.com/joshdales/tundra-css - MIT License */
@property --neutral {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(20% 0 0deg);
}
@property --neutral-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(20% 0 0deg);
}
@property --neutral-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(30% 0 0deg);
}
@property --neutral-3 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(40% 0 0deg);
}
@property --neutral-4 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(50% 0 0deg);
}
@property --neutral-5 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(60% 0 0deg);
}
@property --neutral-6 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(70% 0 0deg);
}
@property --neutral-7 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(80% 0 0deg);
}
@property --neutral-8 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(90% 0 0deg);
}
@property --neutral-9 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(97% 0 0deg);
}
@property --red {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(60% 0.24 25deg);
}
@property --red-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(20% 0.24 25deg);
}
@property --red-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(30% 0.24 25deg);
}
@property --red-3 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(40% 0.24 25deg);
}
@property --red-4 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(50% 0.24 25deg);
}
@property --red-5 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(60% 0.24 25deg);
}
@property --red-6 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(70% 0.24 25deg);
}
@property --red-7 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(80% 0.24 25deg);
}
@property --red-8 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(90% 0.0669 25deg);
}
@property --red-9 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(97% 0.019 25deg);
}
@property --orange {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(70% 0.2 45deg);
}
@property --orange-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(20% 0.2 45deg);
}
@property --orange-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(30% 0.2 45deg);
}
@property --orange-3 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(40% 0.2 45deg);
}
@property --orange-4 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(50% 0.2 45deg);
}
@property --orange-5 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(60% 0.2 45deg);
}
@property --orange-6 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(70% 0.2 45deg);
}
@property --orange-7 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(80% 0.2 45deg);
}
@property --orange-8 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(90% 0.0718 45deg);
}
@property --orange-9 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(97% 0.0201 45deg);
}
@property --yellow {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(80% 0.15 80deg);
}
@property --yellow-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(20% 0.15 80deg);
}
@property --yellow-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(30% 0.15 80deg);
}
@property --yellow-3 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(40% 0.15 80deg);
}
@property --yellow-4 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(50% 0.15 80deg);
}
@property --yellow-5 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(60% 0.15 80deg);
}
@property --yellow-6 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(70% 0.15 80deg);
}
@property --yellow-7 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(80% 0.15 80deg);
}
@property --yellow-8 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(90% 0.1164 80deg);
}
@property --yellow-9 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(97% 0.0337 80deg);
}
@property --green {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(60% 0.15 165deg);
}
@property --green-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(20% 0.15 165deg);
}
@property --green-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(30% 0.15 165deg);
}
@property --green-3 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(40% 0.15 165deg);
}
@property --green-4 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(50% 0.15 165deg);
}
@property --green-5 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(60% 0.15 165deg);
}
@property --green-6 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(70% 0.15 165deg);
}
@property --green-7 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(80% 0.15 165deg);
}
@property --green-8 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(90% 0.15 165deg);
}
@property --green-9 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(97% 0.0484 165deg);
}
@property --cyan {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(60% 0.15 190deg);
}
@property --cyan-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(20% 0.15 190deg);
}
@property --cyan-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(30% 0.15 190deg);
}
@property --cyan-3 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(40% 0.15 190deg);
}
@property --cyan-4 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(50% 0.15 190deg);
}
@property --cyan-5 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(60% 0.15 190deg);
}
@property --cyan-6 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(70% 0.15 190deg);
}
@property --cyan-7 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(80% 0.15 190deg);
}
@property --cyan-8 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(90% 0.15 190deg);
}
@property --cyan-9 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(97% 0.0484 190deg);
}
@property --blue {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(60% 0.15 255deg);
}
@property --blue-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(20% 0.15 255deg);
}
@property --blue-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(30% 0.15 255deg);
}
@property --blue-3 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(40% 0.15 255deg);
}
@property --blue-4 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(50% 0.15 255deg);
}
@property --blue-5 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(60% 0.15 255deg);
}
@property --blue-6 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(70% 0.15 255deg);
}
@property --blue-7 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(80% 0.15 255deg);
}
@property --blue-8 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(90% 0.0538 255deg);
}
@property --blue-9 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(95% 0.0261 255deg);
}
@property --purple {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(60% 0.15 300deg);
}
@property --purple-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(20% 0.15 300deg);
}
@property --purple-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(30% 0.15 300deg);
}
@property --purple-3 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(40% 0.15 300deg);
}
@property --purple-4 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(50% 0.15 300deg);
}
@property --purple-5 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(60% 0.15 300deg);
}
@property --purple-6 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(70% 0.15 300deg);
}
@property --purple-7 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(80% 0.15 300deg);
}
@property --purple-8 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(90% 0.0625 300deg);
}
@property --purple-9 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(97% 0.0179 300deg);
}
@property --pink {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(80% 0.17 350deg);
}
@property --pink-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(20% 0.17 350deg);
}
@property --pink-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(30% 0.17 350deg);
}
@property --pink-3 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(40% 0.17 350deg);
}
@property --pink-4 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(50% 0.17 350deg);
}
@property --pink-5 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(60% 0.17 350deg);
}
@property --pink-6 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(70% 0.17 350deg);
}
@property --pink-7 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(80% 0.17 350deg);
}
@property --pink-8 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(90% 0.0816 350deg);
}
@property --pink-9 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(97% 0.0228 350deg);
}
@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(20% 0 0deg);
}
@property --accent-1 {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(20% 0 0deg);
}
@property --accent-2 {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(30% 0 0deg);
}
@property --accent-3 {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(40% 0 0deg);
}
@property --accent-4 {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(50% 0 0deg);
}
@property --accent-5 {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(60% 0 0deg);
}
@property --accent-6 {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(70% 0 0deg);
}
@property --accent-7 {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(80% 0 0deg);
}
@property --accent-8 {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(90% 0 0deg);
}
@property --accent-9 {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(97% 0 0deg);
}
@property --radius-1 {
  syntax: "<length>";
  inherits: false;
  initial-value: 4px;
}
@property --radius-2 {
  syntax: "<length>";
  inherits: false;
  initial-value: 8px;
}
@property --radius-3 {
  syntax: "<length>";
  inherits: false;
  initial-value: 16px;
}
@property --radius-4 {
  syntax: "<length>";
  inherits: false;
  initial-value: 32px;
}
@property --radius-5 {
  syntax: "<length>";
  inherits: false;
  initial-value: 64px;
}
@property --space-1 {
  syntax: "<length>";
  inherits: false;
  initial-value: 4px;
}
@property --space-2 {
  syntax: "<length>";
  inherits: false;
  initial-value: 8px;
}
@property --space-3 {
  syntax: "<length>";
  inherits: false;
  initial-value: 12px;
}
@property --space-4 {
  syntax: "<length>";
  inherits: false;
  initial-value: 14px;
}
@property --space-5 {
  syntax: "<length>";
  inherits: false;
  initial-value: 16px;
}
@property --space-6 {
  syntax: "<length>";
  inherits: false;
  initial-value: 18px;
}
@property --space-7 {
  syntax: "<length>";
  inherits: false;
  initial-value: 20px;
}
@property --space-8 {
  syntax: "<length>";
  inherits: false;
  initial-value: 24px;
}
@property --space-9 {
  syntax: "<length>";
  inherits: false;
  initial-value: 28px;
}
@property --space-10 {
  syntax: "<length>";
  inherits: false;
  initial-value: 32px;
}
@property --space-11 {
  syntax: "<length>";
  inherits: false;
  initial-value: 40px;
}
@property --space-12 {
  syntax: "<length>";
  inherits: false;
  initial-value: 48px;
}
@property --space-13 {
  syntax: "<length>";
  inherits: false;
  initial-value: 64px;
}
@property --space-14 {
  syntax: "<length>";
  inherits: false;
  initial-value: 128px;
}
@property --font-size {
  syntax: "*";
  inherits: true;
  initial-value: 1rem;
}
@property --font-size-1 {
  syntax: "*";
  inherits: false;
  initial-value: 0.75rem;
}
@property --font-size-2 {
  syntax: "*";
  inherits: false;
  initial-value: 0.875rem;
}
@property --font-size-3 {
  syntax: "*";
  inherits: false;
  initial-value: 1rem;
}
@property --font-size-4 {
  syntax: "*";
  inherits: false;
  initial-value: 1.125rem;
}
@property --font-size-5 {
  syntax: "*";
  inherits: false;
  initial-value: 1.25rem;
}
@property --font-size-6 {
  syntax: "*";
  inherits: false;
  initial-value: 1.5rem;
}
@property --font-size-7 {
  syntax: "*";
  inherits: false;
  initial-value: 1.75rem;
}
@property --font-size-8 {
  syntax: "*";
  inherits: false;
  initial-value: 2rem;
}
@property --font-size-9 {
  syntax: "*";
  inherits: false;
  initial-value: 3rem;
}
@property --font-weight {
  syntax: "<number>";
  inherits: true;
  initial-value: 500;
}
@property --font-weight-1 {
  syntax: "<number>";
  inherits: false;
  initial-value: 400;
}
@property --font-weight-2 {
  syntax: "<number>";
  inherits: false;
  initial-value: 500;
}
@property --font-weight-3 {
  syntax: "<number>";
  inherits: false;
  initial-value: 600;
}
@property --font-weight-4 {
  syntax: "<number>";
  inherits: false;
  initial-value: 700;
}
@property --letter-spacing {
  syntax: "*";
  inherits: true;
  initial-value: 0em;
}
@property --letter-spacing-1 {
  syntax: "*";
  inherits: false;
  initial-value: -0.04em;
}
@property --letter-spacing-2 {
  syntax: "*";
  inherits: false;
  initial-value: -0.02em;
}
@property --letter-spacing-3 {
  syntax: "*";
  inherits: false;
  initial-value: 0em;
}
@property --letter-spacing-4 {
  syntax: "*";
  inherits: false;
  initial-value: 0.02em;
}
@property --letter-spacing-5 {
  syntax: "*";
  inherits: false;
  initial-value: 0.04em;
}
@property --letter-spacing {
  syntax: "*";
  inherits: true;
  initial-value: 1;
}
@property --line-height-1 {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
@property --line-height-2 {
  syntax: "<number>";
  inherits: false;
  initial-value: 1.05;
}
@property --line-height-3 {
  syntax: "<number>";
  inherits: false;
  initial-value: 1.15;
}
@property --line-height-4 {
  syntax: "<number>";
  inherits: false;
  initial-value: 1.25;
}
@property --line-height-5 {
  syntax: "<number>";
  inherits: false;
  initial-value: 1.5;
}
:root {
  /* neutral */
  --neutral: var(--neutral-1);
  --neutral-1: oklch(20% 0 0deg);
  --neutral-2: oklch(30% 0 0deg);
  --neutral-3: oklch(40% 0 0deg);
  --neutral-4: oklch(50% 0 0deg);
  --neutral-5: oklch(60% 0 0deg);
  --neutral-6: oklch(70% 0 0deg);
  --neutral-7: oklch(80% 0 0deg);
  --neutral-8: oklch(90% 0 0deg);
  --neutral-9: oklch(97% 0 0deg);
  /* red */
  --red: var(--red-5);
  --red-1: oklch(20% 0.24 25deg);
  --red-2: oklch(30% 0.24 25deg);
  --red-3: oklch(40% 0.24 25deg);
  --red-4: oklch(50% 0.24 25deg);
  --red-5: oklch(60% 0.24 25deg);
  --red-6: oklch(70% 0.24 25deg);
  --red-7: oklch(80% 0.24 25deg);
  --red-8: oklch(90% 0.0669 25deg);
  --red-9: oklch(97% 0.019 25deg);
  /* orange */
  --orange: var(--orange-6);
  --orange-1: oklch(20% 0.2 45deg);
  --orange-2: oklch(30% 0.2 45deg);
  --orange-3: oklch(40% 0.2 45deg);
  --orange-4: oklch(50% 0.2 45deg);
  --orange-5: oklch(60% 0.2 45deg);
  --orange-6: oklch(70% 0.2 45deg);
  --orange-7: oklch(80% 0.2 45deg);
  --orange-8: oklch(90% 0.0718 45deg);
  --orange-9: oklch(97% 0.0201 45deg);
  /* yellow */
  --yellow: var(--yellow-7);
  --yellow-1: oklch(20% 0.15 80deg);
  --yellow-2: oklch(30% 0.15 80deg);
  --yellow-3: oklch(40% 0.15 80deg);
  --yellow-4: oklch(50% 0.15 80deg);
  --yellow-5: oklch(60% 0.15 80deg);
  --yellow-6: oklch(70% 0.15 80deg);
  --yellow-7: oklch(80% 0.15 80deg);
  --yellow-8: oklch(90% 0.1164 80deg);
  --yellow-9: oklch(97% 0.0337 80deg);
  /* green */
  --green: var(--green-5);
  --green-1: oklch(20% 0.15 165deg);
  --green-2: oklch(30% 0.15 165deg);
  --green-3: oklch(40% 0.15 165deg);
  --green-4: oklch(50% 0.15 165deg);
  --green-5: oklch(60% 0.15 165deg);
  --green-6: oklch(70% 0.15 165deg);
  --green-7: oklch(80% 0.15 165deg);
  --green-8: oklch(90% 0.15 165deg);
  --green-9: oklch(97% 0.0484 165deg);
  /* cyan */
  --cyan: var(--cyan-5);
  --cyan-1: oklch(20% 0.15 190deg);
  --cyan-2: oklch(30% 0.15 190deg);
  --cyan-3: oklch(40% 0.15 190deg);
  --cyan-4: oklch(50% 0.15 190deg);
  --cyan-5: oklch(60% 0.15 190deg);
  --cyan-6: oklch(70% 0.15 190deg);
  --cyan-7: oklch(80% 0.15 190deg);
  --cyan-8: oklch(90% 0.15 190deg);
  --cyan-9: oklch(97% 0.0484 190deg);
  /* blue */
  --blue: var(--blue-5);
  --blue-1: oklch(20% 0.15 255deg);
  --blue-2: oklch(30% 0.15 255deg);
  --blue-3: oklch(40% 0.15 255deg);
  --blue-4: oklch(50% 0.15 255deg);
  --blue-5: oklch(60% 0.15 255deg);
  --blue-6: oklch(70% 0.15 255deg);
  --blue-7: oklch(80% 0.15 255deg);
  --blue-8: oklch(90% 0.0538 255deg);
  --blue-9: oklch(95% 0.0261 255deg);
  /* purple */
  --purple: var(--purple-5);
  --purple-1: oklch(20% 0.15 300deg);
  --purple-2: oklch(30% 0.15 300deg);
  --purple-3: oklch(40% 0.15 300deg);
  --purple-4: oklch(50% 0.15 300deg);
  --purple-5: oklch(60% 0.15 300deg);
  --purple-6: oklch(70% 0.15 300deg);
  --purple-7: oklch(80% 0.15 300deg);
  --purple-8: oklch(90% 0.0625 300deg);
  --purple-9: oklch(97% 0.0179 300deg);
  /* pink */
  --pink: var(--pink-7);
  --pink-1: oklch(20% 0.17 350deg);
  --pink-2: oklch(30% 0.17 350deg);
  --pink-3: oklch(40% 0.17 350deg);
  --pink-4: oklch(50% 0.17 350deg);
  --pink-5: oklch(60% 0.17 350deg);
  --pink-6: oklch(70% 0.17 350deg);
  --pink-7: oklch(80% 0.17 350deg);
  --pink-8: oklch(90% 0.0816 350deg);
  --pink-9: oklch(97% 0.0228 350deg);
  /* Radius */
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 16px;
  --radius-4: 32px;
  --radius-5: 64px;
  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 14px;
  --space-5: 16px;
  --space-6: 18px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 28px;
  --space-10: 32px;
  --space-11: 40px;
  --space-12: 48px;
  --space-13: 64px;
  --space-14: 128px;
  /* Font Weight */
  --font-weight-1: 400;
  --font-weight-2: 500;
  --font-weight-3: 600;
  --font-weight-4: 700;
  /* Font Size */
  --font-size-1: 0.75rem;
  --font-size-2: 0.875rem;
  --font-size-3: 1rem;
  --font-size-4: 1.125rem;
  --font-size-5: 1.25rem;
  --font-size-6: 1.5rem;
  --font-size-7: 1.75rem;
  --font-size-8: 2rem;
  --font-size-9: 3rem;
  /* Line Height */
  --line-height-1: 1;
  --line-height-2: 1.05;
  --line-height-3: 1.15;
  --line-height-4: 1.25;
  --line-height-5: 1.5;
  /* Letter Spacing */
  --letter-spacing-1: -0.04em;
  --letter-spacing-2: -0.02em;
  --letter-spacing-3: 0em;
  --letter-spacing-4: 0.02em;
  --letter-spacing-5: 0.04em;
}

/* Text */
.alt-heading-6, .heading-6, .alt-heading-5, .heading-5, .input-4, .label-4, .button-4, .link-4, .body-4, .alt-heading-4, .heading-4, .input-3, .label-3, .button-3, .link-3, .body-3, .alt-heading-3, .heading-3, .input-2, .label-2, .button-2, .link-2, .body-2, .alt-heading-2, .heading-2, .input-1, .label-1, .button-1, .link-1, .body-1, .alt-heading-1, .heading-1 {
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
}

.heading-1 {
  --font-weight: var(--font-weight-2);
  --font-size: var(--font-size-4);
  --line-height: var(--line-height-5);
  --letter-spacing: var(--letter-spacing-3);
}
.heading-1 b,
.heading-1 strong {
  --font-weight: var(--font-weight-3);
}

.alt-heading-1 {
  --font-weight: var(--font-weight-3);
  --font-size: var(--font-size-4);
  --line-height: var(--line-height-5);
  --letter-spacing: var(--letter-spacing-4);
}
.alt-heading-1 b,
.alt-heading-1 strong {
  --font-weight: var(--font-weight-4);
}

.body-1 {
  --font-weight: var(--font-weight-1);
  --line-height: var(--line-height-5);
  --font-size: var(--font-size-1);
  --letter-spacing: var(--letter-spacing-4);
}
.body-1 b,
.body-1 strong {
  --font-weight: var(--font-weight-3);
}

.link-1 {
  --font-weight: var(--font-weight-2);
  --line-height: var(--line-height-4);
  --font-size: var(--font-size-1);
  --letter-spacing: var(--letter-spacing-5);
}
.link-1 b,
.link-1 strong {
  --font-weight: var(--font-weight-3);
}

.button-1 {
  --font-weight: var(--font-weight-2);
  --line-height: var(--line-height-4);
  --font-size: var(--font-size-2);
}
.button-1 b,
.button-1 strong {
  --font-weight: var(--font-weight-3);
}

.label-1 {
  --font-weight: var(--font-weight-1);
  --line-height: var(--line-height-3);
  --font-size: var(--font-size-1);
  --letter-spacing: var(--letter-spacing-5);
}
.label-1 b,
.label-1 strong {
  --font-weight: var(--font-weight-3);
}

.input-1 {
  --font-weight: var(--font-weight-1);
  --line-height: var(--line-height-4);
  --font-size: var(--font-size-2);
  --letter-spacing: var(--letter-spacing-5);
}
.input-1 b,
.input-1 strong {
  --font-weight: var(--font-weight-2);
}

.heading-2 {
  --font-weight: var(--font-weight-2);
  --font-size: var(--font-size-5);
  --line-height: var(--line-height-5);
  --letter-spacing: var(--letter-spacing-3);
}
.heading-2 b,
.heading-2 strong {
  --font-weight: var(--font-weight-3);
}

.alt-heading-2 {
  --font-weight: var(--font-weight-3);
  --font-size: var(--font-size-5);
  --line-height: var(--line-height-5);
  --letter-spacing: var(--letter-spacing-4);
}
.alt-heading-2 b,
.alt-heading-2 strong {
  --font-weight: var(--font-weight-4);
}

.body-2 {
  --font-weight: var(--font-weight-1);
  --line-height: var(--line-height-5);
  --font-size: var(--font-size-2);
  --letter-spacing: var(--letter-spacing-4);
}
.body-2 b,
.body-2 strong {
  --font-weight: var(--font-weight-3);
}

.link-2 {
  --font-weight: var(--font-weight-2);
  --line-height: var(--line-height-4);
  --font-size: var(--font-size-2);
  --letter-spacing: var(--letter-spacing-5);
}
.link-2 b,
.link-2 strong {
  --font-weight: var(--font-weight-3);
}

.button-2 {
  --font-weight: var(--font-weight-2);
  --line-height: var(--line-height-4);
  --font-size: var(--font-size-3);
}
.button-2 b,
.button-2 strong {
  --font-weight: var(--font-weight-3);
}

.label-2 {
  --font-weight: var(--font-weight-1);
  --line-height: var(--line-height-3);
  --font-size: var(--font-size-2);
  --letter-spacing: var(--letter-spacing-4);
}
.label-2 b,
.label-2 strong {
  --font-weight: var(--font-weight-3);
}

.input-2 {
  --font-weight: var(--font-weight-1);
  --line-height: var(--line-height-4);
  --font-size: var(--font-size-3);
  --letter-spacing: var(--letter-spacing-4);
}
.input-2 b,
.input-2 strong {
  --font-weight: var(--font-weight-2);
}

.heading-3 {
  --font-weight: var(--font-weight-2);
  --font-size: var(--font-size-6);
  --line-height: var(--line-height-5);
  --letter-spacing: var(--letter-spacing-2);
}
.heading-3 b,
.heading-3 strong {
  --font-weight: var(--font-weight-3);
}

.alt-heading-3 {
  --font-weight: var(--font-weight-3);
  --font-size: var(--font-size-6);
  --line-height: var(--line-height-5);
  --letter-spacing: var(--letter-spacing-4);
}
.alt-heading-3 b,
.alt-heading-3 strong {
  --font-weight: var(--font-weight-4);
}

.body-3 {
  --font-weight: var(--font-weight-1);
  --line-height: var(--line-height-5);
  --font-size: var(--font-size-3);
  --letter-spacing: var(--letter-spacing-2);
}
.body-3 b,
.body-3 strong {
  --font-weight: var(--font-weight-3);
}

.link-3 {
  --font-weight: var(--font-weight-2);
  --line-height: var(--line-height-4);
  --font-size: var(--font-size-3);
  --letter-spacing: var(--letter-spacing-4);
}
.link-3 b,
.link-3 strong {
  --font-weight: var(--font-weight-3);
}

.button-3 {
  --font-weight: var(--font-weight-2);
  --line-height: var(--line-height-4);
  --font-size: var(--font-size-4);
}
.button-3 b,
.button-3 strong {
  --font-weight: var(--font-weight-3);
}

.label-3 {
  --font-weight: var(--font-weight-1);
  --line-height: var(--line-height-3);
  --font-size: var(--font-size-3);
  --letter-spacing: var(--letter-spacing-4);
}
.label-3 b,
.label-3 strong {
  --font-weight: var(--font-weight-3);
}

.input-3 {
  --font-weight: var(--font-weight-1);
  --line-height: var(--line-height-4);
  --font-size: var(--font-size-4);
  --letter-spacing: var(--letter-spacing-3);
}
.input-3 b,
.input-3 strong {
  --font-weight: var(--font-weight-2);
}

.heading-4 {
  --font-weight: var(--font-weight-2);
  --font-size: var(--font-size-7);
  --line-height: var(--line-height-5);
  --letter-spacing: var(--letter-spacing-2);
}
.heading-4 b,
.heading-4 strong {
  --font-weight: var(--font-weight-3);
}

.alt-heading-4 {
  --font-weight: var(--font-weight-3);
  --font-size: var(--font-size-7);
  --line-height: var(--line-height-5);
  --letter-spacing: var(--letter-spacing-4);
}
.alt-heading-4 b,
.alt-heading-4 strong {
  --font-weight: var(--font-weight-4);
}

.body-4 {
  --font-weight: var(--font-weight-1);
  --line-height: var(--line-height-5);
  --font-size: var(--font-size-4);
  --letter-spacing: var(--letter-spacing-2);
}
.body-4 b,
.body-4 strong {
  --font-weight: var(--font-weight-3);
}

.link-4 {
  --font-weight: var(--font-weight-2);
  --line-height: var(--line-height-4);
  --font-size: var(--font-size-4);
  --letter-spacing: var(--letter-spacing-4);
}
.link-4 b,
.link-4 strong {
  --font-weight: var(--font-weight-3);
}

.button-4 {
  --font-weight: var(--font-weight-2);
  --line-height: var(--line-height-4);
  --font-size: var(--font-size-5);
}
.button-4 b,
.button-4 strong {
  --font-weight: var(--font-weight-3);
}

.label-4 {
  --font-weight: var(--font-weight-1);
  --line-height: var(--line-height-3);
  --font-size: var(--font-size-4);
  --letter-spacing: var(--letter-spacing-3);
}
.label-4 b,
.label-4 strong {
  --font-weight: var(--font-weight-3);
}

.input-4 {
  --font-weight: var(--font-weight-1);
  --line-height: var(--line-height-4);
  --font-size: var(--font-size-5);
  --letter-spacing: var(--letter-spacing-2);
}
.input-4 b,
.input-4 strong {
  --font-weight: var(--font-weight-2);
}

.heading-5 {
  --font-weight: var(--font-weight-2);
  --font-size: var(--font-size-8);
  --line-height: var(--line-height-4);
  --letter-spacing: var(--letter-spacing-1);
}
.heading-5 b,
.heading-5 strong {
  --font-weight: var(--font-weight-3);
}

.alt-heading-5 {
  --font-weight: var(--font-weight-3);
  --font-size: var(--font-size-8);
  --line-height: var(--line-height-4);
  --letter-spacing: var(--letter-spacing-3);
}
.alt-heading-5 b,
.alt-heading-5 strong {
  --font-weight: var(--font-weight-4);
}

.heading-6 {
  --font-weight: var(--font-weight-2);
  --font-size: var(--font-size-9);
  --line-height: var(--line-height-4);
  --letter-spacing: var(--letter-spacing-1);
}
.heading-6 b,
.heading-6 strong {
  --font-weight: var(--font-weight-3);
}

.alt-heading-6 {
  --font-weight: var(--font-weight-3);
  --font-size: var(--font-size-9);
  --line-height: var(--line-height-4);
  --letter-spacing: var(--letter-spacing-2);
}
.alt-heading-6 b,
.alt-heading-6 strong {
  --font-weight: var(--font-weight-4);
}

/* Elements: Buttons */
button,
.button,
[role=button],
input[type=button],
input[type=reset],
input[type=submit] {
  cursor: pointer;
  box-sizing: border-box;
  border: 1.5px solid;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap);
  padding-inline: var(--padding-x);
  padding-block: var(--padding-y);
  border-radius: var(--border-radius, var(--radius-2));
  text-decoration: none;
}
button:disabled, button[aria-disabled=true],
.button:disabled,
.button[aria-disabled=true],
[role=button]:disabled,
[role=button][aria-disabled=true],
input[type=button]:disabled,
input[type=button][aria-disabled=true],
input[type=reset]:disabled,
input[type=reset][aria-disabled=true],
input[type=submit]:disabled,
input[type=submit][aria-disabled=true] {
  cursor: not-allowed;
}
button.button-1,
.button.button-1,
[role=button].button-1,
input[type=button].button-1,
input[type=reset].button-1,
input[type=submit].button-1 {
  --gap: var(--space-1);
  --padding-y: var(--space-1);
  --padding-x: var(--space-2);
}
button.button-2,
.button.button-2,
[role=button].button-2,
input[type=button].button-2,
input[type=reset].button-2,
input[type=submit].button-2 {
  --gap: var(--space-2);
  --padding-y: var(--space-2);
  --padding-x: var(--space-5);
}
button.button-3,
.button.button-3,
[role=button].button-3,
input[type=button].button-3,
input[type=reset].button-3,
input[type=submit].button-3 {
  --gap: var(--space-3);
  --padding-y: var(--space-3);
  --padding-x: var(--space-8);
}
button.button-4,
.button.button-4,
[role=button].button-4,
input[type=button].button-4,
input[type=reset].button-4,
input[type=submit].button-4 {
  --gap: var(--space-5);
  --padding-y: var(--space-5);
  --padding-x: var(--space-10);
}
button.filled,
.button.filled,
[role=button].filled,
input[type=button].filled,
input[type=reset].filled,
input[type=submit].filled {
  --background: var(--accent-4, var(--neutral-1));
  background-color: var(--background);
  border-color: var(--background);
  color: var(--accent-9, var(--neutral-9));
}
button.filled:focus-visible, button.filled:hover,
.button.filled:focus-visible,
.button.filled:hover,
[role=button].filled:focus-visible,
[role=button].filled:hover,
input[type=button].filled:focus-visible,
input[type=button].filled:hover,
input[type=reset].filled:focus-visible,
input[type=reset].filled:hover,
input[type=submit].filled:focus-visible,
input[type=submit].filled:hover {
  --background: var(--accent-3, var(--neutral-2));
}
button.filled:active,
.button.filled:active,
[role=button].filled:active,
input[type=button].filled:active,
input[type=reset].filled:active,
input[type=submit].filled:active {
  --background: var(--accent-2, var(--neutral-3));
}
button.filled:disabled, button.filled[aria-disabled=true],
.button.filled:disabled,
.button.filled[aria-disabled=true],
[role=button].filled:disabled,
[role=button].filled[aria-disabled=true],
input[type=button].filled:disabled,
input[type=button].filled[aria-disabled=true],
input[type=reset].filled:disabled,
input[type=reset].filled[aria-disabled=true],
input[type=submit].filled:disabled,
input[type=submit].filled[aria-disabled=true] {
  --background: var(--neutral-7);
  --foreground: var(--neutral-9);
}
button.filled:disabled:hover, button.filled[aria-disabled=true]:hover,
.button.filled:disabled:hover,
.button.filled[aria-disabled=true]:hover,
[role=button].filled:disabled:hover,
[role=button].filled[aria-disabled=true]:hover,
input[type=button].filled:disabled:hover,
input[type=button].filled[aria-disabled=true]:hover,
input[type=reset].filled:disabled:hover,
input[type=reset].filled[aria-disabled=true]:hover,
input[type=submit].filled:disabled:hover,
input[type=submit].filled[aria-disabled=true]:hover {
  --background: var(--neutral-8);
}
button.outline,
.button.outline,
[role=button].outline,
input[type=button].outline,
input[type=reset].outline,
input[type=submit].outline {
  --background: var(--accent-9, var(--neutral-9));
  --foreground: var(--accent-4, var(--neutral-1));
  background-color: var(--background);
  border-color: var(--foreground);
  color: var(--foreground);
}
button.outline:focus-visible, button.outline:hover,
.button.outline:focus-visible,
.button.outline:hover,
[role=button].outline:focus-visible,
[role=button].outline:hover,
input[type=button].outline:focus-visible,
input[type=button].outline:hover,
input[type=reset].outline:focus-visible,
input[type=reset].outline:hover,
input[type=submit].outline:focus-visible,
input[type=submit].outline:hover {
  --foreground: var(--accent-3, var(--neutral-2));
  box-shadow: inset 0px 0 0 0.5px currentColor;
}
button.outline:active,
.button.outline:active,
[role=button].outline:active,
input[type=button].outline:active,
input[type=reset].outline:active,
input[type=submit].outline:active {
  --background: var(--accent-8, var(--neutral-8));
  --foreground: var(--accent-2, var(--neutral-3));
}
button.outline:disabled, button.outline[aria-disabled=true],
.button.outline:disabled,
.button.outline[aria-disabled=true],
[role=button].outline:disabled,
[role=button].outline[aria-disabled=true],
input[type=button].outline:disabled,
input[type=button].outline[aria-disabled=true],
input[type=reset].outline:disabled,
input[type=reset].outline[aria-disabled=true],
input[type=submit].outline:disabled,
input[type=submit].outline[aria-disabled=true] {
  --background: var(--neutral-9);
  --foreground: var(--neutral-7);
}
button.outline:disabled:hover, button.outline[aria-disabled=true]:hover,
.button.outline:disabled:hover,
.button.outline[aria-disabled=true]:hover,
[role=button].outline:disabled:hover,
[role=button].outline[aria-disabled=true]:hover,
input[type=button].outline:disabled:hover,
input[type=button].outline[aria-disabled=true]:hover,
input[type=reset].outline:disabled:hover,
input[type=reset].outline[aria-disabled=true]:hover,
input[type=submit].outline:disabled:hover,
input[type=submit].outline[aria-disabled=true]:hover {
  --foreground: var(--neutral-8);
}
button.ghost,
.button.ghost,
[role=button].ghost,
input[type=button].ghost,
input[type=reset].ghost,
input[type=submit].ghost {
  --background: transparent;
  --foreground: var(--accent-4, var(--neutral-1));
  background-color: var(--background);
  border-color: var(--background);
  color: var(--foreground);
}
button.ghost:focus-visible, button.ghost:hover,
.button.ghost:focus-visible,
.button.ghost:hover,
[role=button].ghost:focus-visible,
[role=button].ghost:hover,
input[type=button].ghost:focus-visible,
input[type=button].ghost:hover,
input[type=reset].ghost:focus-visible,
input[type=reset].ghost:hover,
input[type=submit].ghost:focus-visible,
input[type=submit].ghost:hover {
  --background: var(--accent-9, var(--neutral-9));
  --foreground: var(--accent-3, var(--neutral-2));
}
button.ghost:active,
.button.ghost:active,
[role=button].ghost:active,
input[type=button].ghost:active,
input[type=reset].ghost:active,
input[type=submit].ghost:active {
  --background: var(--accent-8, var(--neutral-8));
  --foreground: var(--accent-2, var(--neutral-3));
}
button.ghost:disabled, button.ghost[aria-disabled=true],
.button.ghost:disabled,
.button.ghost[aria-disabled=true],
[role=button].ghost:disabled,
[role=button].ghost[aria-disabled=true],
input[type=button].ghost:disabled,
input[type=button].ghost[aria-disabled=true],
input[type=reset].ghost:disabled,
input[type=reset].ghost[aria-disabled=true],
input[type=submit].ghost:disabled,
input[type=submit].ghost[aria-disabled=true] {
  --foreground: var(--neutral-7);
}
button.ghost:disabled:hover, button.ghost[aria-disabled=true]:hover,
.button.ghost:disabled:hover,
.button.ghost[aria-disabled=true]:hover,
[role=button].ghost:disabled:hover,
[role=button].ghost[aria-disabled=true]:hover,
input[type=button].ghost:disabled:hover,
input[type=button].ghost[aria-disabled=true]:hover,
input[type=reset].ghost:disabled:hover,
input[type=reset].ghost[aria-disabled=true]:hover,
input[type=submit].ghost:disabled:hover,
input[type=submit].ghost[aria-disabled=true]:hover {
  --background: var(--neutral-9);
  --foreground: var(--neutral-8);
}

/* Elements: Text-entry inputs */
input:not([type=button], [type=reset], [type=submit], [type=checkbox], [type=radio], [type=range]),
select,
textarea,
[role=textbox] {
  color: var(--neutral-1);
  caret-color: var(--accent-5, var(--neutral-2));
  border: 1.5px solid var(--neutral-5);
  border-radius: var(--border-radius, var(--radius-2));
  outline: none;
  padding-inline: var(--padding-x);
  padding-block: var(--padding-y);
}
input:not([type=button], [type=reset], [type=submit], [type=checkbox], [type=radio], [type=range])::placeholder,
select::placeholder,
textarea::placeholder,
[role=textbox]::placeholder {
  color: var(--neutral-6);
}
input:not([type=button], [type=reset], [type=submit], [type=checkbox], [type=radio], [type=range]):hover,
select:hover,
textarea:hover,
[role=textbox]:hover {
  border-color: var(--accent-5, var(--neutral-4));
  box-shadow: 0 0 var(--space-1) 0 oklch(from var(--accent-1, var(--neutral-1)) l c h/10%);
}
input:not([type=button], [type=reset], [type=submit], [type=checkbox], [type=radio], [type=range]):hover::placeholder,
select:hover::placeholder,
textarea:hover::placeholder,
[role=textbox]:hover::placeholder {
  color: var(--accent-5, var(--neutral-5));
}
input:not([type=button], [type=reset], [type=submit], [type=checkbox], [type=radio], [type=range]):focus,
select:focus,
textarea:focus,
[role=textbox]:focus {
  border-color: var(--accent-5, var(--neutral-4));
  color: var(--accent-1, var(--neutral-1));
  background-color: var(--accent-9, var(--neutral-9));
}
input:not([type=button], [type=reset], [type=submit], [type=checkbox], [type=radio], [type=range]):focus::placeholder,
select:focus::placeholder,
textarea:focus::placeholder,
[role=textbox]:focus::placeholder {
  color: transparent;
}
input:not([type=button], [type=reset], [type=submit], [type=checkbox], [type=radio], [type=range]):active,
select:active,
textarea:active,
[role=textbox]:active {
  border-color: var(--accent-4, var(--neutral-3));
}
input:not([type=button], [type=reset], [type=submit], [type=checkbox], [type=radio], [type=range]):disabled, input:not([type=button], [type=reset], [type=submit], [type=checkbox], [type=radio], [type=range])[aria-disabled=true],
select:disabled,
select[aria-disabled=true],
textarea:disabled,
textarea[aria-disabled=true],
[role=textbox]:disabled,
[role=textbox][aria-disabled=true] {
  background-color: var(--neutral-6);
}
input:not([type=button], [type=reset], [type=submit], [type=checkbox], [type=radio], [type=range]).input-1,
select.input-1,
textarea.input-1,
[role=textbox].input-1 {
  --padding-y: var(--space-1);
  --padding-x: var(--space-2);
}
input:not([type=button], [type=reset], [type=submit], [type=checkbox], [type=radio], [type=range]).input-2,
select.input-2,
textarea.input-2,
[role=textbox].input-2 {
  --padding-y: var(--space-2);
  --padding-x: var(--space-5);
}
input:not([type=button], [type=reset], [type=submit], [type=checkbox], [type=radio], [type=range]).input-3,
select.input-3,
textarea.input-3,
[role=textbox].input-3 {
  --padding-y: var(--space-3);
  --padding-x: var(--space-8);
}
input:not([type=button], [type=reset], [type=submit], [type=checkbox], [type=radio], [type=range]).input-4,
select.input-4,
textarea.input-4,
[role=textbox].input-4 {
  --padding-y: var(--space-5);
  --padding-x: var(--space-10);
}

/* Elements: Checkbox */
input[type=checkbox].checkbox-1 {
  appearance: none;
  position: relative;
  height: var(--size);
  width: var(--size);
  cursor: pointer;
  border: 1.5px solid var(--neutral-6);
  border-radius: var(--border-radius, var(--radius-1));
  --size: var(--space-4);
}
input[type=checkbox].checkbox-1::before, input[type=checkbox].checkbox-1::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: auto;
  height: 15%;
  border-radius: var(--radius-1);
  background-color: var(--accent-9, var(--neutral-9));
}
input[type=checkbox].checkbox-1:active {
  border-color: var(--accent-5, var(--neutral-3));
  background-color: var(--accent-5, var(--neutral-3));
}
input[type=checkbox].checkbox-1:hover, input[type=checkbox].checkbox-1:focus-visible {
  border-color: var(--accent-4, var(--neutral-3));
  background-color: var(--accent-9, var(--neutral-9));
}
input[type=checkbox].checkbox-1:checked {
  --background: var(--accent-5, var(--neutral-1));
  background-color: var(--background);
  border-color: var(--background);
}
input[type=checkbox].checkbox-1:checked:hover, input[type=checkbox].checkbox-1:checked:focus-visible {
  --background: var(--accent-4, var(--neutral-2));
}
input[type=checkbox].checkbox-1:checked:active {
  --background: var(--accent-3, var(--neutral-3));
}
input[type=checkbox].checkbox-1:disabled, input[type=checkbox].checkbox-1[aria-disabled=true] {
  background-color: var(--neutral-6);
}
input[type=checkbox].checkbox-1:checked::before, input[type=checkbox].checkbox-1:checked::after {
  content: "";
}
input[type=checkbox].checkbox-1:checked::before {
  transform: rotate(50deg);
  width: 45%;
  margin-bottom: 30%;
  margin-left: 5%;
}
input[type=checkbox].checkbox-1:checked::after {
  transform: rotate(310deg);
  width: 80%;
  margin-bottom: 45%;
  margin-left: 22%;
}
input[type=checkbox].checkbox-1:indeterminate {
  border-color: var(--accent-5, var(--neutral-1));
}
input[type=checkbox].checkbox-1:indeterminate::before {
  content: "";
  width: 80%;
  background-color: var(--accent-5, var(--neutral-1));
}
input[type=checkbox].checkbox-2 {
  appearance: none;
  position: relative;
  height: var(--size);
  width: var(--size);
  cursor: pointer;
  border: 1.5px solid var(--neutral-6);
  border-radius: var(--border-radius, var(--radius-1));
  --size: var(--space-5);
}
input[type=checkbox].checkbox-2::before, input[type=checkbox].checkbox-2::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: auto;
  height: 15%;
  border-radius: var(--radius-1);
  background-color: var(--accent-9, var(--neutral-9));
}
input[type=checkbox].checkbox-2:active {
  border-color: var(--accent-5, var(--neutral-3));
  background-color: var(--accent-5, var(--neutral-3));
}
input[type=checkbox].checkbox-2:hover, input[type=checkbox].checkbox-2:focus-visible {
  border-color: var(--accent-4, var(--neutral-3));
  background-color: var(--accent-9, var(--neutral-9));
}
input[type=checkbox].checkbox-2:checked {
  --background: var(--accent-5, var(--neutral-1));
  background-color: var(--background);
  border-color: var(--background);
}
input[type=checkbox].checkbox-2:checked:hover, input[type=checkbox].checkbox-2:checked:focus-visible {
  --background: var(--accent-4, var(--neutral-2));
}
input[type=checkbox].checkbox-2:checked:active {
  --background: var(--accent-3, var(--neutral-3));
}
input[type=checkbox].checkbox-2:disabled, input[type=checkbox].checkbox-2[aria-disabled=true] {
  background-color: var(--neutral-6);
}
input[type=checkbox].checkbox-2:checked::before, input[type=checkbox].checkbox-2:checked::after {
  content: "";
}
input[type=checkbox].checkbox-2:checked::before {
  transform: rotate(50deg);
  width: 45%;
  margin-bottom: 30%;
  margin-left: 5%;
}
input[type=checkbox].checkbox-2:checked::after {
  transform: rotate(310deg);
  width: 80%;
  margin-bottom: 45%;
  margin-left: 20%;
}
input[type=checkbox].checkbox-2:indeterminate {
  border-color: var(--accent-5, var(--neutral-1));
}
input[type=checkbox].checkbox-2:indeterminate::before {
  content: "";
  width: 80%;
  background-color: var(--accent-5, var(--neutral-1));
}
input[type=checkbox].checkbox-3 {
  appearance: none;
  position: relative;
  height: var(--size);
  width: var(--size);
  cursor: pointer;
  border: 1.5px solid var(--neutral-6);
  border-radius: var(--border-radius, var(--radius-1));
  --size: var(--space-6);
}
input[type=checkbox].checkbox-3::before, input[type=checkbox].checkbox-3::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: auto;
  height: 15%;
  border-radius: var(--radius-1);
  background-color: var(--accent-9, var(--neutral-9));
}
input[type=checkbox].checkbox-3:active {
  border-color: var(--accent-5, var(--neutral-3));
  background-color: var(--accent-5, var(--neutral-3));
}
input[type=checkbox].checkbox-3:hover, input[type=checkbox].checkbox-3:focus-visible {
  border-color: var(--accent-4, var(--neutral-3));
  background-color: var(--accent-9, var(--neutral-9));
}
input[type=checkbox].checkbox-3:checked {
  --background: var(--accent-5, var(--neutral-1));
  background-color: var(--background);
  border-color: var(--background);
}
input[type=checkbox].checkbox-3:checked:hover, input[type=checkbox].checkbox-3:checked:focus-visible {
  --background: var(--accent-4, var(--neutral-2));
}
input[type=checkbox].checkbox-3:checked:active {
  --background: var(--accent-3, var(--neutral-3));
}
input[type=checkbox].checkbox-3:disabled, input[type=checkbox].checkbox-3[aria-disabled=true] {
  background-color: var(--neutral-6);
}
input[type=checkbox].checkbox-3:checked::before, input[type=checkbox].checkbox-3:checked::after {
  content: "";
}
input[type=checkbox].checkbox-3:checked::before {
  transform: rotate(50deg);
  width: 45%;
  margin-bottom: 30%;
  margin-left: 5%;
}
input[type=checkbox].checkbox-3:checked::after {
  transform: rotate(310deg);
  width: 80%;
  margin-bottom: 45%;
  margin-left: 22%;
}
input[type=checkbox].checkbox-3:indeterminate {
  border-color: var(--accent-5, var(--neutral-1));
}
input[type=checkbox].checkbox-3:indeterminate::before {
  content: "";
  width: 80%;
  background-color: var(--accent-5, var(--neutral-1));
}
input[type=checkbox].checkbox-4 {
  appearance: none;
  position: relative;
  height: var(--size);
  width: var(--size);
  cursor: pointer;
  border: 1.5px solid var(--neutral-6);
  border-radius: var(--border-radius, var(--radius-1));
  --size: var(--space-7);
}
input[type=checkbox].checkbox-4::before, input[type=checkbox].checkbox-4::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: auto;
  height: 15%;
  border-radius: var(--radius-1);
  background-color: var(--accent-9, var(--neutral-9));
}
input[type=checkbox].checkbox-4:active {
  border-color: var(--accent-5, var(--neutral-3));
  background-color: var(--accent-5, var(--neutral-3));
}
input[type=checkbox].checkbox-4:hover, input[type=checkbox].checkbox-4:focus-visible {
  border-color: var(--accent-4, var(--neutral-3));
  background-color: var(--accent-9, var(--neutral-9));
}
input[type=checkbox].checkbox-4:checked {
  --background: var(--accent-5, var(--neutral-1));
  background-color: var(--background);
  border-color: var(--background);
}
input[type=checkbox].checkbox-4:checked:hover, input[type=checkbox].checkbox-4:checked:focus-visible {
  --background: var(--accent-4, var(--neutral-2));
}
input[type=checkbox].checkbox-4:checked:active {
  --background: var(--accent-3, var(--neutral-3));
}
input[type=checkbox].checkbox-4:disabled, input[type=checkbox].checkbox-4[aria-disabled=true] {
  background-color: var(--neutral-6);
}
input[type=checkbox].checkbox-4:checked::before, input[type=checkbox].checkbox-4:checked::after {
  content: "";
}
input[type=checkbox].checkbox-4:checked::before {
  transform: rotate(50deg);
  width: 45%;
  margin-bottom: 30%;
  margin-left: 5%;
}
input[type=checkbox].checkbox-4:checked::after {
  transform: rotate(310deg);
  width: 80%;
  margin-bottom: 45%;
  margin-left: 20%;
}
input[type=checkbox].checkbox-4:indeterminate {
  border-color: var(--accent-5, var(--neutral-1));
}
input[type=checkbox].checkbox-4:indeterminate::before {
  content: "";
  width: 80%;
  background-color: var(--accent-5, var(--neutral-1));
}

/* Elements: Radio */
input[type=radio].radio-1 {
  appearance: none;
  position: relative;
  height: var(--size);
  width: var(--size);
  cursor: pointer;
  border: 1.5px solid var(--neutral-6);
  border-radius: var(--border-radius, var(--radius-1));
  --size: var(--space-4);
  --border-radius: var(--radius-5);
}
input[type=radio].radio-1::before, input[type=radio].radio-1::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: auto;
  height: 15%;
  border-radius: var(--radius-1);
  background-color: var(--accent-9, var(--neutral-9));
}
input[type=radio].radio-1:active {
  border-color: var(--accent-5, var(--neutral-3));
  background-color: var(--accent-5, var(--neutral-3));
}
input[type=radio].radio-1:hover, input[type=radio].radio-1:focus-visible {
  border-color: var(--accent-4, var(--neutral-3));
  background-color: var(--accent-9, var(--neutral-9));
}
input[type=radio].radio-1:checked {
  --background: var(--accent-5, var(--neutral-1));
  background-color: var(--background);
  border-color: var(--background);
}
input[type=radio].radio-1:checked:hover, input[type=radio].radio-1:checked:focus-visible {
  --background: var(--accent-4, var(--neutral-2));
}
input[type=radio].radio-1:checked:active {
  --background: var(--accent-3, var(--neutral-3));
}
input[type=radio].radio-1:disabled, input[type=radio].radio-1[aria-disabled=true] {
  background-color: var(--neutral-6);
}
input[type=radio].radio-1:checked::before, input[type=radio].radio-1:checked::after {
  content: "";
}
input[type=radio].radio-1:checked::before {
  transform: rotate(50deg);
  width: 45%;
  margin-bottom: 30%;
  margin-left: 5%;
}
input[type=radio].radio-1:checked::after {
  transform: rotate(310deg);
  width: 80%;
  margin-bottom: 45%;
  margin-left: 22%;
}
input[type=radio].radio-2 {
  appearance: none;
  position: relative;
  height: var(--size);
  width: var(--size);
  cursor: pointer;
  border: 1.5px solid var(--neutral-6);
  border-radius: var(--border-radius, var(--radius-1));
  --size: var(--space-5);
  --border-radius: var(--radius-5);
}
input[type=radio].radio-2::before, input[type=radio].radio-2::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: auto;
  height: 15%;
  border-radius: var(--radius-1);
  background-color: var(--accent-9, var(--neutral-9));
}
input[type=radio].radio-2:active {
  border-color: var(--accent-5, var(--neutral-3));
  background-color: var(--accent-5, var(--neutral-3));
}
input[type=radio].radio-2:hover, input[type=radio].radio-2:focus-visible {
  border-color: var(--accent-4, var(--neutral-3));
  background-color: var(--accent-9, var(--neutral-9));
}
input[type=radio].radio-2:checked {
  --background: var(--accent-5, var(--neutral-1));
  background-color: var(--background);
  border-color: var(--background);
}
input[type=radio].radio-2:checked:hover, input[type=radio].radio-2:checked:focus-visible {
  --background: var(--accent-4, var(--neutral-2));
}
input[type=radio].radio-2:checked:active {
  --background: var(--accent-3, var(--neutral-3));
}
input[type=radio].radio-2:disabled, input[type=radio].radio-2[aria-disabled=true] {
  background-color: var(--neutral-6);
}
input[type=radio].radio-2:checked::before, input[type=radio].radio-2:checked::after {
  content: "";
}
input[type=radio].radio-2:checked::before {
  transform: rotate(50deg);
  width: 45%;
  margin-bottom: 30%;
  margin-left: 5%;
}
input[type=radio].radio-2:checked::after {
  transform: rotate(310deg);
  width: 80%;
  margin-bottom: 45%;
  margin-left: 20%;
}
input[type=radio].radio-3 {
  appearance: none;
  position: relative;
  height: var(--size);
  width: var(--size);
  cursor: pointer;
  border: 1.5px solid var(--neutral-6);
  border-radius: var(--border-radius, var(--radius-1));
  --size: var(--space-6);
  --border-radius: var(--radius-5);
}
input[type=radio].radio-3::before, input[type=radio].radio-3::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: auto;
  height: 15%;
  border-radius: var(--radius-1);
  background-color: var(--accent-9, var(--neutral-9));
}
input[type=radio].radio-3:active {
  border-color: var(--accent-5, var(--neutral-3));
  background-color: var(--accent-5, var(--neutral-3));
}
input[type=radio].radio-3:hover, input[type=radio].radio-3:focus-visible {
  border-color: var(--accent-4, var(--neutral-3));
  background-color: var(--accent-9, var(--neutral-9));
}
input[type=radio].radio-3:checked {
  --background: var(--accent-5, var(--neutral-1));
  background-color: var(--background);
  border-color: var(--background);
}
input[type=radio].radio-3:checked:hover, input[type=radio].radio-3:checked:focus-visible {
  --background: var(--accent-4, var(--neutral-2));
}
input[type=radio].radio-3:checked:active {
  --background: var(--accent-3, var(--neutral-3));
}
input[type=radio].radio-3:disabled, input[type=radio].radio-3[aria-disabled=true] {
  background-color: var(--neutral-6);
}
input[type=radio].radio-3:checked::before, input[type=radio].radio-3:checked::after {
  content: "";
}
input[type=radio].radio-3:checked::before {
  transform: rotate(50deg);
  width: 45%;
  margin-bottom: 30%;
  margin-left: 5%;
}
input[type=radio].radio-3:checked::after {
  transform: rotate(310deg);
  width: 80%;
  margin-bottom: 45%;
  margin-left: 22%;
}
input[type=radio].radio-4 {
  appearance: none;
  position: relative;
  height: var(--size);
  width: var(--size);
  cursor: pointer;
  border: 1.5px solid var(--neutral-6);
  border-radius: var(--border-radius, var(--radius-1));
  --size: var(--space-7);
  --border-radius: var(--radius-5);
}
input[type=radio].radio-4::before, input[type=radio].radio-4::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: auto;
  height: 15%;
  border-radius: var(--radius-1);
  background-color: var(--accent-9, var(--neutral-9));
}
input[type=radio].radio-4:active {
  border-color: var(--accent-5, var(--neutral-3));
  background-color: var(--accent-5, var(--neutral-3));
}
input[type=radio].radio-4:hover, input[type=radio].radio-4:focus-visible {
  border-color: var(--accent-4, var(--neutral-3));
  background-color: var(--accent-9, var(--neutral-9));
}
input[type=radio].radio-4:checked {
  --background: var(--accent-5, var(--neutral-1));
  background-color: var(--background);
  border-color: var(--background);
}
input[type=radio].radio-4:checked:hover, input[type=radio].radio-4:checked:focus-visible {
  --background: var(--accent-4, var(--neutral-2));
}
input[type=radio].radio-4:checked:active {
  --background: var(--accent-3, var(--neutral-3));
}
input[type=radio].radio-4:disabled, input[type=radio].radio-4[aria-disabled=true] {
  background-color: var(--neutral-6);
}
input[type=radio].radio-4:checked::before, input[type=radio].radio-4:checked::after {
  content: "";
}
input[type=radio].radio-4:checked::before {
  transform: rotate(50deg);
  width: 45%;
  margin-bottom: 30%;
  margin-left: 5%;
}
input[type=radio].radio-4:checked::after {
  transform: rotate(310deg);
  width: 80%;
  margin-bottom: 45%;
  margin-left: 20%;
}

.red {
  --accent: var(--red);
  --accent-1: var(--red-1);
  --accent-2: var(--red-2);
  --accent-3: var(--red-3);
  --accent-4: var(--red-4);
  --accent-5: var(--red-5);
  --accent-6: var(--red-6);
  --accent-7: var(--red-7);
  --accent-8: var(--red-8);
  --accent-9: var(--red-9);
  accent-color: var(--accent);
}

.orange {
  --accent: var(--orange);
  --accent-1: var(--orange-1);
  --accent-2: var(--orange-2);
  --accent-3: var(--orange-3);
  --accent-4: var(--orange-4);
  --accent-5: var(--orange-5);
  --accent-6: var(--orange-6);
  --accent-7: var(--orange-7);
  --accent-8: var(--orange-8);
  --accent-9: var(--orange-9);
  accent-color: var(--accent);
}

.yellow {
  --accent: var(--yellow);
  --accent-1: var(--yellow-1);
  --accent-2: var(--yellow-2);
  --accent-3: var(--yellow-3);
  --accent-4: var(--yellow-4);
  --accent-5: var(--yellow-5);
  --accent-6: var(--yellow-6);
  --accent-7: var(--yellow-7);
  --accent-8: var(--yellow-8);
  --accent-9: var(--yellow-9);
  accent-color: var(--accent);
}

.green {
  --accent: var(--green);
  --accent-1: var(--green-1);
  --accent-2: var(--green-2);
  --accent-3: var(--green-3);
  --accent-4: var(--green-4);
  --accent-5: var(--green-5);
  --accent-6: var(--green-6);
  --accent-7: var(--green-7);
  --accent-8: var(--green-8);
  --accent-9: var(--green-9);
  accent-color: var(--accent);
}

.cyan {
  --accent: var(--cyan);
  --accent-1: var(--cyan-1);
  --accent-2: var(--cyan-2);
  --accent-3: var(--cyan-3);
  --accent-4: var(--cyan-4);
  --accent-5: var(--cyan-5);
  --accent-6: var(--cyan-6);
  --accent-7: var(--cyan-7);
  --accent-8: var(--cyan-8);
  --accent-9: var(--cyan-9);
  accent-color: var(--accent);
}

.blue {
  --accent: var(--blue);
  --accent-1: var(--blue-1);
  --accent-2: var(--blue-2);
  --accent-3: var(--blue-3);
  --accent-4: var(--blue-4);
  --accent-5: var(--blue-5);
  --accent-6: var(--blue-6);
  --accent-7: var(--blue-7);
  --accent-8: var(--blue-8);
  --accent-9: var(--blue-9);
  accent-color: var(--accent);
}

.purple {
  --accent: var(--purple);
  --accent-1: var(--purple-1);
  --accent-2: var(--purple-2);
  --accent-3: var(--purple-3);
  --accent-4: var(--purple-4);
  --accent-5: var(--purple-5);
  --accent-6: var(--purple-6);
  --accent-7: var(--purple-7);
  --accent-8: var(--purple-8);
  --accent-9: var(--purple-9);
  accent-color: var(--accent);
}

.pink {
  --accent: var(--pink);
  --accent-1: var(--pink-1);
  --accent-2: var(--pink-2);
  --accent-3: var(--pink-3);
  --accent-4: var(--pink-4);
  --accent-5: var(--pink-5);
  --accent-6: var(--pink-6);
  --accent-7: var(--pink-7);
  --accent-8: var(--pink-8);
  --accent-9: var(--pink-9);
  accent-color: var(--accent);
}

@supports not (color: oklch(60% 0.15 165deg)) {
  :root {
    --neutral-1: #161616;
    --neutral-2: #2e2e2e;
    --neutral-3: #484848;
    --neutral-4: #636363;
    --neutral-5: #808080;
    --neutral-6: #9e9e9e;
    --neutral-7: #bebebe;
    --neutral-8: #dedede;
    --neutral-9: #f5f5f5;
    --red-1: #380000;
    --red-2: #620000;
    --red-3: #910006;
    --red-4: #c20010;
    --red-5: #ee0b2a;
    --red-6: #ff5655;
    --red-7: #ff9890;
    --red-8: #ffccc5;
    --red-9: #ffece9;
    --orange-1: #320200;
    --orange-2: #571000;
    --orange-3: #802300;
    --orange-4: #ac3600;
    --orange-5: #d94a00;
    --orange-6: #fe6a00;
    --orange-7: #ff9d69;
    --orange-8: #ffceb2;
    --orange-9: #ffeee0;
    --yellow-1: #241100;
    --yellow-2: #432700;
    --yellow-3: #643f00;
    --yellow-4: #875900;
    --yellow-5: #ac7400;
    --yellow-6: #ce9200;
    --yellow-7: #f0b135;
    --yellow-8: #ffd470;
    --yellow-9: #fff1c2;
    --green-1: #001f0e;
    --green-2: #003b22;
    --green-3: #005939;
    --green-4: #007950;
    --green-5: #009b69;
    --green-6: #00bb87;
    --green-7: #41dca5;
    --green-8: #6afdc5;
    --green-9: #c4ffe8;
    --cyan-1: #001d1b;
    --cyan-2: #003836;
    --cyan-3: #003836;
    --cyan-4: #007671;
    --cyan-5: #009790;
    --cyan-6: #00b9b2;
    --cyan-7: #00dbd3;
    --cyan-8: #2bfdf4;
    --cyan-9: #b7ffff;
    --blue-1: #000d49;
    --blue-2: #002774;
    --blue-3: #004495;
    --blue-4: #1762b6;
    --blue-5: #3a81d7;
    --blue-6: #59a0f9;
    --blue-7: #85c1ff;
    --blue-8: #bfe1ff;
    --blue-9: #e6f7ff;
    --purple-1: #220046;
    --purple-2: #3c086b;
    --purple-3: #562c8b;
    --purple-4: #724aab;
    --purple-5: #8f68cb;
    --purple-6: #ad87ed;
    --purple-7: #cca7ff;
    --purple-8: #e6d2ff;
    --purple-9: #f9f0ff;
    --pink-1: #33001c;
    --pink-2: #5c0038;
    --pink-3: #830054;
    --pink-4: #a42c71;
    --pink-5: #c74c8e;
    --pink-6: #e96cad;
    --pink-7: #ff8ecd;
    --pink-8: #ffc6e6;
    --pink-9: #ffeaf9;
  }
}