* {
  box-sizing: border-box;
}

*:focus-visible,
select:focus {
  outline-offset: var(--size-4xs);
  outline: var(--color-blue-500) solid var(--size-4xs);
  box-shadow: 0 0 0 var(--size-4xs) var(--color-white);
  border-radius: var(--size-3xs);
}

html {
  height: 100%;
  margin: 0;
  background-color: var(--color-white);
}

.preload * {
  transition: none !important;
  animation-duration: 0.001s !important;
}

a {
  border-radius: var(--size-3xs);
  display: inline-block;
  line-height: inherit;
  font-size: inherit;
  vertical-align: top;
}
a:link, a:visited {
  color: var(--color-blue-600);
  text-decoration: none;
}
a:active {
  color: var(--color-blue-800);
  text-decoration: underline;
}
@media (hover: hover) {
  a:hover, a:hover:visited {
    color: var(--color-blue-700);
    text-decoration: underline;
  }
  a:hover:active {
    color: var(--color-blue-800);
  }
}

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

fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

@font-face {
  font-family: Oately;
  src: local("Oately-BoldDisplay"), url("https://css.justworks.com/fonts/Oately-BoldDisplay.woff2") format("woff2"), url("https://css.justworks.com/fonts/Oately-BoldDisplay.woff") format("woff"), url("https://css.justworks.com/fonts/Oately-BoldDisplay.ttf") format("ttf");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: Oately;
  src: local("Oately-Bold"), url("https://css.justworks.com/fonts/Oately-Bold.woff2") format("woff2"), url("https://css.justworks.com/fonts/Oately-Bold.woff") format("woff"), url("https://css.justworks.com/fonts/Oately-Bold.ttf") format("ttf");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: Oately;
  src: local("Oately"), url("https://css.justworks.com/fonts/Oately-Regular.woff2") format("woff2"), url("https://css.justworks.com/fonts/Oately-Regular.woff") format("woff"), url("https://css.justworks.com/fonts/Oately-Regular.ttf") format("ttf");
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: light;
  --color-transparent: transparent;
  --color-white: light-dark(#fff, #000);
  --color-white-opacity-10: light-dark(#ffffff1a, #0000001a);
  --color-gray-100: light-dark(#f7f8fb, #1c1d1f);
  --color-gray-200: light-dark(#eef0f4, #3f4147);
  --color-gray-300: light-dark(#d9dce1, #5e6167);
  --color-gray-400: light-dark(#a9adb5, #6d717a);
  --color-gray-500: #848890;
  --color-gray-600: light-dark(#6d717a, #a9adb5);
  --color-gray-700: light-dark(#5e6167, #d9dce1);
  --color-gray-800: light-dark(#3f4147, #eef0f4);
  --color-gray-900: light-dark(#1c1d1f, #f7f8fb);
  --color-gray-900-opacity-10: light-dark(#1c1d1f1a, #f7f8fb1a);
  --color-blue-100: light-dark(#e5f3ff, #15246d);
  --color-blue-200: light-dark(#b6e5ff, #1e3d92);
  --color-blue-300: light-dark(#6dc8ff, #0e57b5);
  --color-blue-400: light-dark(#52b0ff, #0070d4);
  --color-blue-500: #0092f6;
  --color-blue-600: light-dark(#0070d4, #52b0ff);
  --color-blue-700: light-dark(#0e57b5, #6dc8ff);
  --color-blue-800: light-dark(#1e3d92, #b6e5ff);
  --color-blue-900: light-dark(#15246d, #e5f3ff);
  --color-red-100: light-dark(#ffefea, #710100);
  --color-red-200: light-dark(#ffcfbf, #832512);
  --color-red-300: light-dark(#ff9f82, #af2c10);
  --color-red-400: light-dark(#fb7f59, #cb431d);
  --color-red-500: #df5a31;
  --color-red-600: light-dark(#cb431d, #fb7f59);
  --color-red-700: light-dark(#af2c10, #ff9f82);
  --color-red-800: light-dark(#832512, #ffcfbf);
  --color-green-100: light-dark(#ddf3ea, #003d27);
  --color-green-200: light-dark(#98e2c5, #005133);
  --color-green-300: light-dark(#65c9a3, #006943);
  --color-green-400: light-dark(#2cb987, #008354);
  --color-green-500: #00a46b;
  --color-green-600: light-dark(#008354, #2cb987);
  --color-green-700: light-dark(#006943, #65c9a3);
  --color-green-800: light-dark(#005133, #98e2c5);
  --color-yellow-100: light-dark(#ffeed1, #5c2200);
  --color-yellow-200: light-dark(#ffdb7b, #753204);
  --color-yellow-300: light-dark(#f3b715, #8f4509);
  --color-yellow-400: light-dark(#dd9610, #ad5e0d);
  --color-yellow-500: #cb7d14;
  --color-yellow-600: light-dark(#ad5e0d, #dd9610);
  --color-yellow-700: light-dark(#8f4509, #f3b715);
  --color-yellow-800: light-dark(#753204, #ffdb7b);
  --color-purple-100: light-dark(#f4ebfc, #300ea2);
  --color-purple-200: light-dark(#e0d0ff, #4529b4);
  --color-purple-300: light-dark(#baaaf9, #5f43ca);
  --color-purple-400: light-dark(#a993ff, #775bdb);
  --color-purple-500: #8a73e5;
  --color-purple-600: light-dark(#775bdb, #a993ff);
  --color-purple-700: light-dark(#5f43ca, #baaaf9);
  --color-purple-800: light-dark(#4529b4, #e0d0ff);
}

html[data-appearance-mode=dark] {
  color-scheme: dark;
}

:root {
  --size-5xs: 0.0625rem;
  --size-4xs: 0.125rem;
  --size-3xs: 0.25rem;
  --size-2xs: 0.5rem;
  --size-xs: 0.75rem;
  --size-sm: 0.875rem;
  --size-md: 1rem;
  --size-lg: 1.25rem;
  --size-xl: 1.5rem;
  --size-2xl: 1.75rem;
  --size-3xl: 2rem;
  --size-4xl: 2.5rem;
  --size-5xl: 3rem;
  --size-6xl: 4rem;
  --size-7xl: 6rem;
  --size-8xl: 8rem;
}

:root {
  --font-family-default: "Oately", var(--font-family-system);
  --font-family-system: system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI",
  "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", sans-serif;
  --font-size-md: 1rem;
  --line-height-md: 1.5rem;
}

:root {
  --box-shadow-level-1: -1px -1px 2px 0px rgba(63 65 71 / 7%), 1px 1px 2px 0px rgba(63 65 71 / 28%);
  --box-shadow-level-2: -2px -2px 4px 0px rgba(63 65 71 / 7%), 2px 2px 4px 0px rgba(63 65 71 / 28%);
  --box-shadow-level-3: -4px -4px 8px 0px rgba(63 65 71 / 6%), 4px 4px 8px 0px rgba(63 65 71 / 24%);
  --box-shadow-level-4: -8px -8px 16px 0px rgba(63 65 71 / 6%), 8px 8px 16px 0px rgba(63 65 71 / 24%);
  --drop-shadow-level-1: drop-shadow(-1px -1px 2px rgba(63 65 71 / 7%)) drop-shadow(1px 1px 2px 0px rgba(63 65 71 / 28%));
  --drop-shadow-level-2: drop-shadow(-2px -2px 4px rgba(63 65 71 / 7%)) drop-shadow(2px 2px 4px rgba(63 65 71 / 28%));
  --drop-shadow-level-3: drop-shadow(-4px -4px 8px rgba(63 65 71 / 6%)) drop-shadow(4px 4px 8px rgba(63 65 71 / 24%));
  --drop-shadow-level-4: drop-shadow(-8px -8px 16px rgba(63 65 71 / 6%)) drop-shadow(8px 8px 16px rgba(63 65 71 / 24%));
  /* Top: x offset = 0; y offset flipped */
  --box-shadow-level-1-top: 0 1px 2px 0px rgba(63 65 71 / 7%), 0 -1px 2px 0px rgba(63 65 71 / 28%);
  --box-shadow-level-2-top: 0 2px 4px 0px rgba(63 65 71 / 7%), 0 -2px 4px 0px rgba(63 65 71 / 28%);
  --box-shadow-level-3-top: 0 4px 8px 0px rgba(63 65 71 / 6%), 0 -4px 8px 0px rgba(63 65 71 / 24%);
  --box-shadow-level-4-top: 0 8px 16px 0px rgba(63 65 71 / 6%), 0 -8px 16px 0px rgba(63 65 71 / 24%);
  --drop-shadow-level-1-top: drop-shadow(0 -1px 2px rgba(63 65 71 / 7%)) drop-shadow(0 1px 2px 0px rgba(63 65 71 / 28%));
  --drop-shadow-level-2-top: drop-shadow(0 -2px 4px rgba(63 65 71 / 7%)) drop-shadow(0 2px 4px rgba(63 65 71 / 28%));
  --drop-shadow-level-3-top: drop-shadow(0 -4px 8px rgba(63 65 71 / 6%)) drop-shadow(0 4px 8px rgba(63 65 71 / 24%));
  --drop-shadow-level-4-top: drop-shadow(0 -8px 16px rgba(63 65 71 / 6%)) drop-shadow(0 8px 16px rgba(63 65 71 / 24%));
  /* Left: x offset flipped */
  --box-shadow-level-1-left: 1px -1px 2px 0px rgba(63 65 71 / 7%), -1px 1px 2px 0px rgba(63 65 71 / 28%);
  --box-shadow-level-2-left: 2px -2px 4px 0px rgba(63 65 71 / 7%), -2px 2px 4px 0px rgba(63 65 71 / 28%);
  --box-shadow-level-3-left: 4px -4px 8px 0px rgba(63 65 71 / 6%), -4px 4px 8px 0px rgba(63 65 71 / 24%);
  --box-shadow-level-4-left: 8px -8px 16px 0px rgba(63 65 71 / 6%), -8px 8px 16px 0px rgba(63 65 71 / 24%);
  --drop-shadow-level-1-left: drop-shadow(1px -1px 2px rgba(63 65 71 / 7%)) drop-shadow(-1px 1px 2px 0px rgba(63 65 71 / 28%));
  --drop-shadow-level-2-left: drop-shadow(2px -2px 4px rgba(63 65 71 / 7%)) drop-shadow(-2px 2px 4px rgba(63 65 71 / 28%));
  --drop-shadow-level-3-left: drop-shadow(4px -4px 8px rgba(63 65 71 / 6%)) drop-shadow(-4px 4px 8px rgba(63 65 71 / 24%));
  --drop-shadow-level-4-left: drop-shadow(8px -8px 16px rgba(63 65 71 / 6%)) drop-shadow(-8px 8px 16px rgba(63 65 71 / 24%));
  /* Bottom: x offset = 0 */
  --box-shadow-level-1-bottom: 0 -1px 2px 0px rgba(63 65 71 / 7%), 0 1px 2px 0px rgba(63 65 71 / 28%);
  --box-shadow-level-2-bottom: 0 -2px 4px 0px rgba(63 65 71 / 7%), 0 2px 4px 0px rgba(63 65 71 / 28%);
  --box-shadow-level-3-bottom: 0 -4px 8px 0px rgba(63 65 71 / 6%), 0 4px 8px 0px rgba(63 65 71 / 24%);
  --box-shadow-level-4-bottom: 0 -8px 16px 0px rgba(63 65 71 / 6%), 0 8px 16px 0px rgba(63 65 71 / 24%);
  --drop-shadow-level-1-bottom: drop-shadow(0 -1px 2px rgba(63 65 71 / 7%)) drop-shadow(0 1px 2px 0px rgba(63 65 71 / 28%));
  --drop-shadow-level-2-bottom: drop-shadow(0 -2px 4px rgba(63 65 71 / 7%)) drop-shadow(0 2px 4px rgba(63 65 71 / 28%));
  --drop-shadow-level-3-bottom: drop-shadow(0 -4px 8px rgba(63 65 71 / 6%)) drop-shadow(0 4px 8px rgba(63 65 71 / 24%));
  --drop-shadow-level-4-bottom: drop-shadow(0 -8px 16px rgba(63 65 71 / 6%)) drop-shadow(0 8px 16px rgba(63 65 71 / 24%));
  /* Right: default */
  --box-shadow-level-1-right: var(--box-shadow-level-1);
  --box-shadow-level-2-right: var(--box-shadow-level-1);
  --box-shadow-level-3-right: var(--box-shadow-level-1);
  --box-shadow-level-4-right: var(--box-shadow-level-1);
  --drop-shadow-level-1-right: var(--drop-shadow-level-1);
  --drop-shadow-level-2-right: var(--drop-shadow-level-2);
  --drop-shadow-level-3-right: var(--drop-shadow-level-3);
  --drop-shadow-level-4-right: var(--drop-shadow-level-4);
}

html[data-appearance-mode=dark] {
  --box-shadow-level-1: -1px -1px 2px 0px rgba(238 240 244 / 7%), 1px 1px 2px 0px rgba(238 240 244 / 28%);
  --box-shadow-level-2: -2px -2px 4px 0px rgba(238 240 244 / 7%), 2px 2px 4px 0px rgba(238 240 244 / 28%);
  --box-shadow-level-3: -4px -4px 8px 0px rgba(238 240 244 / 6%), 4px 4px 8px 0px rgba(238 240 244 / 24%);
  --box-shadow-level-4: -8px -8px 16px 0px rgba(238 240 244 / 6%), 8px 8px 16px 0px rgba(238 240 244 / 24%);
  --drop-shadow-level-1: drop-shadow(-1px -1px 2px rgba(238 240 244 / 7%)) drop-shadow(1px 1px 2px 0px rgba(238 240 244 / 28%));
  --drop-shadow-level-2: drop-shadow(-2px -2px 4px rgba(238 240 244 / 7%)) drop-shadow(2px 2px 4px rgba(238 240 244 / 28%));
  --drop-shadow-level-3: drop-shadow(-4px -4px 8px rgba(238 240 244 / 6%)) drop-shadow(4px 4px 8px rgba(238 240 244 / 24%));
  --drop-shadow-level-4: drop-shadow(-8px -8px 16px rgba(238 240 244 / 6%)) drop-shadow(8px 8px 16px rgba(238 240 244 / 24%));
  /* Top: x offset = 0; y offset flipped */
  --box-shadow-level-1-top: 0 1px 2px 0px rgba(238 240 244 / 7%), 0 -1px 2px 0px rgba(238 240 244 / 28%);
  --box-shadow-level-2-top: 0 2px 4px 0px rgba(238 240 244 / 7%), 0 -2px 4px 0px rgba(238 240 244 / 28%);
  --box-shadow-level-3-top: 0 4px 8px 0px rgba(238 240 244 / 6%), 0 -4px 8px 0px rgba(238 240 244 / 24%);
  --box-shadow-level-4-top: 0 8px 16px 0px rgba(238 240 244 / 6%), 0 -8px 16px 0px rgba(238 240 244 / 24%);
  --drop-shadow-level-1-top: drop-shadow(0 -1px 2px rgba(238 240 244 / 7%)) drop-shadow(0 1px 2px 0px rgba(238 240 244 / 28%));
  --drop-shadow-level-2-top: drop-shadow(0 -2px 4px rgba(238 240 244 / 7%)) drop-shadow(0 2px 4px rgba(238 240 244 / 28%));
  --drop-shadow-level-3-top: drop-shadow(0 -4px 8px rgba(238 240 244 / 6%)) drop-shadow(0 4px 8px rgba(238 240 244 / 24%));
  --drop-shadow-level-4-top: drop-shadow(0 -8px 16px rgba(238 240 244 / 6%)) drop-shadow(0 8px 16px rgba(238 240 244 / 24%));
  /* Left: x offset flipped */
  --box-shadow-level-1-left: 1px -1px 2px 0px rgba(238 240 244 / 7%), -1px 1px 2px 0px rgba(238 240 244 / 28%);
  --box-shadow-level-2-left: 2px -2px 4px 0px rgba(238 240 244 / 7%), -2px 2px 4px 0px rgba(238 240 244 / 28%);
  --box-shadow-level-3-left: 4px -4px 8px 0px rgba(238 240 244 / 6%), -4px 4px 8px 0px rgba(238 240 244 / 24%);
  --box-shadow-level-4-left: 8px -8px 16px 0px rgba(238 240 244 / 6%), -8px 8px 16px 0px rgba(238 240 244 / 24%);
  --drop-shadow-level-1-left: drop-shadow(1px -1px 2px rgba(238 240 244 / 7%)) drop-shadow(-1px 1px 2px 0px rgba(238 240 244 / 28%));
  --drop-shadow-level-2-left: drop-shadow(2px -2px 4px rgba(238 240 244 / 7%)) drop-shadow(-2px 2px 4px rgba(238 240 244 / 28%));
  --drop-shadow-level-3-left: drop-shadow(4px -4px 8px rgba(238 240 244 / 6%)) drop-shadow(-4px 4px 8px rgba(238 240 244 / 24%));
  --drop-shadow-level-4-left: drop-shadow(8px -8px 16px rgba(238 240 244 / 6%)) drop-shadow(-8px 8px 16px rgba(238 240 244 / 24%));
  /* Bottom: x offset = 0 */
  --box-shadow-level-1-bottom: 0 -1px 2px 0px rgba(238 240 244 / 7%), 0 1px 2px 0px rgba(238 240 244 / 28%);
  --box-shadow-level-2-bottom: 0 -2px 4px 0px rgba(238 240 244 / 7%), 0 2px 4px 0px rgba(238 240 244 / 28%);
  --box-shadow-level-3-bottom: 0 -4px 8px 0px rgba(238 240 244 / 6%), 0 4px 8px 0px rgba(238 240 244 / 24%);
  --box-shadow-level-4-bottom: 0 -8px 16px 0px rgba(238 240 244 / 6%), 0 8px 16px 0px rgba(238 240 244 / 24%);
  --drop-shadow-level-1-bottom: drop-shadow(0 -1px 2px rgba(238 240 244 / 7%)) drop-shadow(0 1px 2px 0px rgba(238 240 244 / 28%));
  --drop-shadow-level-2-bottom: drop-shadow(0 -2px 4px rgba(238 240 244 / 7%)) drop-shadow(0 2px 4px rgba(238 240 244 / 28%));
  --drop-shadow-level-3-bottom: drop-shadow(0 -4px 8px rgba(238 240 244 / 6%)) drop-shadow(0 4px 8px rgba(238 240 244 / 24%));
  --drop-shadow-level-4-bottom: drop-shadow(0 -8px 16px rgba(238 240 244 / 6%)) drop-shadow(0 8px 16px rgba(238 240 244 / 24%));
  /* Right: default */
  --box-shadow-level-1-right: var(--box-shadow-level-1);
  --box-shadow-level-2-right: var(--box-shadow-level-1);
  --box-shadow-level-3-right: var(--box-shadow-level-1);
  --box-shadow-level-4-right: var(--box-shadow-level-1);
  --drop-shadow-level-1-right: var(--drop-shadow-level-1);
  --drop-shadow-level-2-right: var(--drop-shadow-level-2);
  --drop-shadow-level-3-right: var(--drop-shadow-level-3);
  --drop-shadow-level-4-right: var(--drop-shadow-level-4);
}

html {
  /* stylelint-disable property-no-vendor-prefix */
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  /* stylelint-enable property-no-vendor-prefix */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
}

body {
  font-family: var(--font-family-default);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--color-gray-900);
}

h1,
.h1 {
  font-size: var(--size-3xl);
  line-height: var(--size-4xl);
  font-weight: 800;
  margin-top: 0;
  margin-bottom: var(--size-xl);
}

h2,
.h2 {
  font-size: var(--size-xl);
  line-height: var(--size-3xl);
  font-weight: 700;
  margin-top: 0;
  margin-bottom: var(--size-md);
}

h3,
.h3 {
  font-size: var(--size-lg);
  line-height: var(--size-xl);
  font-weight: 700;
  margin-top: 0;
  margin-bottom: var(--size-md);
}

h4,
.h4 {
  font-size: var(--size-md);
  line-height: var(--size-lg);
  font-weight: 700;
  margin-top: 0;
  margin-bottom: var(--size-md);
}

h5,
.h5 {
  font-size: var(--size-sm);
  line-height: var(--size-md);
  font-weight: 700;
  margin-top: 0;
  margin-bottom: var(--size-md);
}

p {
  margin-top: 0;
  margin-bottom: var(--size-2xl);
}

.paragraph--large {
  font-size: var(--size-lg);
  line-height: var(--size-3xl);
  margin-bottom: var(--size-3xl);
}
.paragraph--large:has(+ .paragraph--large) {
  margin-bottom: var(--size-md);
}

.paragraph--small {
  font-size: var(--size-sm);
  line-height: var(--size-lg);
}

kbd,
code {
  display: inline-block;
  padding: var(--size-3xs);
  line-height: var(--size-xs);
  font-size: var(--size-xs);
  transform: translateY(calc(-1 * var(--size-5xs)));
  vertical-align: baseline;
  background-color: var(--color-gray-200);
  border-radius: var(--size-3xs);
  font-family: monospace;
  color: var(--color-gray-900);
}
kbd.kbd--inverse, kbd.code--inverse,
code.kbd--inverse,
code.code--inverse {
  background-color: var(--color-gray-800);
  color: var(--color-white);
}

em {
  font-family: var(--font-family-system);
}

.bulleted-list {
  margin-top: 0;
  margin-bottom: var(--size-2xl);
  padding-left: var(--size-3xl);
}
p + .bulleted-list {
  margin-top: calc(-1 * var(--size-md));
}
.bulleted-list:last-child {
  margin-bottom: 0;
}

.numbered-list {
  margin-top: 0;
  margin-bottom: var(--size-2xl);
  padding-left: var(--size-3xl);
}
p + .numbered-list {
  margin-top: calc(-1 * var(--size-md));
}
.numbered-list:last-child {
  margin-bottom: 0;
}

.bulleted-list > li + li,
.numbered-list > li + li {
  margin-top: var(--size-2xs);
}
.bulleted-list > li > .bulleted-list li:first-child,
.bulleted-list > li > .numbered-list li:first-child,
.numbered-list > li > .bulleted-list li:first-child,
.numbered-list > li > .numbered-list li:first-child {
  margin-top: var(--size-2xs);
}

.stack + p, .grid + p {
  margin-top: var(--size-xl);
}

:root {
  --nav-width: 0;
  --ui-max-width: 90rem;
}
@media screen and (min-width: 48rem) {
  :root {
    --nav-width: 16rem;
  }
}

body {
  margin: 0;
  background-color: var(--color-white);
}
@media screen and (min-width: 48rem) {
  body {
    min-height: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
  }
}

main {
  flex: 1 1 100%;
  padding: var(--size-xl);
}
@media screen and (min-width: 48rem) {
  main {
    width: 0;
    /*
        width: 0 helps keep things contained when they'd otherwise stretch things out beyond the viewport
        I can't say I know *why* it works, but it does, so...
    */
    flex: 0 1 min(100vw - var(--nav-width), var(--ui-max-width) - var(--nav-width));
    padding: var(--size-5xl);
  }
  main :root {
    --nav-width: 16rem;
    --ui-max-width: 90rem;
  }
}

.main-content {
  display: flex;
  gap: var(--size-5xl);
  flex-direction: column;
}
@media screen and (min-width: 72rem) {
  .main-content {
    flex-direction: row;
  }
}

#main {
  /* Don't let page titles with a long word in them might stretch out the layout */
  overflow-wrap: anywhere;
}

.body-content {
  flex: 3 0;
}

.breadcrumbs {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: var(--size-sm);
  line-height: var(--size-md);
  margin-bottom: var(--size-2xs);
  color: var(--color-gray-700);
}
.breadcrumbs, .breadcrumbs li {
  display: flex;
  flex-flow: row wrap;
  gap: var(--size-3xs);
}
.breadcrumbs > li::after {
  content: "/";
}

article {
  max-width: 40rem;
}

section + section {
  margin-top: 4rem;
}

section + section:has(h3:first-child, h4:first-child, h5:first-child) {
  margin-top: 2rem;
}

section:has(h2:only-child, h3:only-child, h4:only-child) + section {
  margin-top: 2rem;
}

.main-nav {
  padding: var(--size-xl) var(--size-3xl);
  background-color: var(--color-gray-100);
  width: 16rem;
  height: 100vh;
  height: 100dvh;
  position: absolute;
  left: -16rem;
  top: 0;
  z-index: 3;
  overflow-y: auto;
  transition: left 150ms ease-in;
}
.main-nav.main-nav--open {
  left: 0;
}
.main-nav.main-nav--open + .main-nav__backdrop {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}
html:has(.main-nav.main-nav--open), body:has(.main-nav.main-nav--open) {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}
@media (min-width: 48rem) {
  .main-nav {
    position: sticky;
    z-index: initial;
    flex: 0 0 16rem;
    box-shadow: none;
  }
}
.main-nav__home {
  display: block;
  text-decoration: none;
  font-size: var(--size-md);
  line-height: var(--size-lg);
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0;
}
.main-nav__home:link, .main-nav__home:visited {
  color: var(--color-gray-900);
}
@media (hover: hover) {
  .main-nav__home:hover, .main-nav__home:visited:hover {
    color: var(--color-gray-900);
  }
}
.main-nav__home:active, .main-nav__home:visited:active {
  color: var(--color-gray-900);
}
.main-nav__list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.main-nav__list-item + .main-nav__list-item {
  margin-top: var(--size-2xs);
}
.main-nav__list-item > .main-nav__list {
  margin-left: var(--size-md);
  margin-bottom: var(--size-md);
  margin-top: var(--size-3xs);
}
.main-nav__list-item > .main-nav__list > .main-nav__list-item + .main-nav__list-item {
  margin-top: var(--size-3xs);
}
.main-nav__link:link, .main-nav__link:visited {
  color: var(--color-gray-600);
  text-decoration: none;
}
@media (hover: hover) {
  .main-nav__link:hover, .main-nav__link:visited:hover {
    color: var(--color-gray-700);
  }
}
.main-nav__link:active, .main-nav__link:visited:active {
  color: var(--color-gray-800);
}

.mobile-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--size-md);
  position: sticky;
  left: 0;
  top: 0;
  z-index: 2;
  background-color: var(--color-gray-100);
  padding: var(--size-2xs) var(--size-xs) calc(var(--size-2xs) - var(--size-5xs));
  border-bottom: var(--size-5xs) solid var(--color-gray-300);
}
.mobile-header__menu-button {
  appearance: none;
  border-radius: var(--size-3xs);
  background-color: transparent;
  border: none;
  margin: 0;
  padding: var(--size-xs);
  color: inherit;
}
@media (hover: hover) {
  .mobile-header__menu-button:hover {
    background-color: var(--color-gray-200);
  }
}
.mobile-header__menu-button:active {
  background-color: var(--color-gray-300);
}
@media (min-width: 48rem) {
  .mobile-header {
    display: none;
  }
}

.theme-button {
  appearance: none;
  width: 3rem;
  height: 3rem;
  padding: 0;
  background-color: transparent;
  border: none;
  color: inherit;
}
.mobile-header .theme-button {
  margin: 0 var(--size-xs);
}
.theme-button .theme-button__frame {
  position: relative;
  pointer-events: none;
  height: 2rem;
}
.theme-button .theme-button__background, .theme-button .theme-button__foreground {
  position: absolute;
  height: 2rem;
  border: 1px solid var(--color-gray-400);
  border-radius: 1.125rem;
}
.theme-button .theme-button__background {
  width: 3rem;
  background-color: var(--color-gray-200);
}
.theme-button .theme-button__foreground {
  left: 0;
  top: 0;
  width: 2rem;
  background-color: var(--color-white);
  transition: transform 150ms ease-in;
}
.theme-button .theme-button__icon--light, .theme-button .theme-button__icon--dark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: opacity 150ms ease-in;
}
.theme-button .theme-button__icon--dark {
  opacity: 0;
}
.theme-button:focus-visible {
  outline: none;
  box-shadow: none;
}
.theme-button:focus-visible .theme-button__frame {
  outline: var(--color-blue-500) solid var(--size-4xs);
  outline-offset: var(--size-4xs);
  box-shadow: 0 0 0 var(--size-4xs) var(--color-white);
  border-radius: var(--size-md);
}
.theme-button[aria-checked=true] .theme-button__icon--light {
  opacity: 0;
}
.theme-button[aria-checked=true] .theme-button__foreground {
  transform: translateX(1rem);
}
.theme-button[aria-checked=true] .theme-button__icon--dark {
  opacity: 1;
}

.desktop-header {
  display: flex;
  flex-direction: row;
  gap: var(--size-md);
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--size-md);
}

body:has(.skip-to-main:focus) {
  margin-top: calc(3rem + 4 * var(--size-4xs));
}

.skip-to-main {
  position: absolute;
  background-color: var(--color-gray-200);
  text-align: center;
  padding: var(--size-xs) 0;
  top: calc(-3rem - var(--size-3xs));
  left: var(--size-3xs);
  right: var(--size-3xs);
  z-index: 4;
}
.skip-to-main:focus {
  top: var(--size-3xs);
}

body:has(.main-nav--open):has(.skip-to-main:focus) {
  overflow: visible;
}
body:has(.main-nav--open) .skip-to-main:focus {
  top: calc(-3rem - var(--size-3xs));
}

#main {
  scroll-margin-top: 8rem;
}
@media (min-width: 48rem) {
  #main {
    scroll-margin-top: 4rem;
  }
}

/* TODO: update the call to the TOC plugin to give everything BEM-y class names */
.toc__heading,
section > h2[id], section > h3[id], section > h4[id] {
  /* Larger offset to account for mobile header */
  scroll-margin-top: var(--size-7xl);
}
@media (min-width: 48rem) {
  .toc__heading,
  section > h2[id], section > h3[id], section > h4[id] {
    scroll-margin-top: var(--size-3xl);
  }
}

.toc__container {
  align-self: flex-start;
  top: var(--size-3xl);
  right: var(--size-3xl);
}
@media (min-width: 72rem) {
  .toc__container {
    position: sticky;
    order: 2;
    flex: 0 1 16rem;
  }
}

@media (min-width: 72rem) {
  .toc .current {
    background-color: var(--color-blue-100);
    border-left: var(--size-4xs) solid var(--color-blue-600);
  }
}
.toc ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.toc li > ol {
  margin-bottom: var(--size-md);
  margin-left: var(--size-md);
}
.toc li a {
  padding: var(--size-3xs);
}
@media (min-width: 72rem) {
  .toc li a {
    padding: var(--size-2xs);
    border-left: var(--size-4xs) solid transparent;
    border-radius: 0;
  }
}

.anchor {
  border-radius: var(--size-3xs);
  display: inline;
  line-height: inherit;
  font-size: inherit;
  vertical-align: top;
}
.anchor:link, .anchor:visited {
  color: var(--color-blue-600);
  text-decoration: none;
}
.anchor:active {
  color: var(--color-blue-800);
  text-decoration: underline;
}
@media (hover: hover) {
  .anchor:hover, .anchor:hover:visited {
    color: var(--color-blue-700);
    text-decoration: underline;
  }
  .anchor:hover:active {
    color: var(--color-blue-800);
  }
}
.anchor > .system-icon:first-child {
  margin-right: var(--size-3xs);
}
.anchor > .system-icon:last-child {
  margin-left: var(--size-3xs);
}

.avatar {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: var(--size-5xs) solid var(--color-white);
  box-shadow: 0 0 0 var(--size-5xs) var(--color-gray-300);
}
.avatar__photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.avatar__initials {
  text-decoration: none;
  color: var(--color-gray-900);
}
.avatar--size-xs {
  font-size: var(--size-2xs);
  line-height: var(--size-xs);
  font-weight: 700;
  height: var(--size-xl);
  width: var(--size-xl);
}
.avatar--size-sm {
  font-size: var(--size-xs);
  line-height: var(--size-md);
  font-weight: 700;
  height: var(--size-3xl);
  width: var(--size-3xl);
}
.avatar--size-md {
  font-size: var(--size-md);
  line-height: var(--size-lg);
  font-weight: 700;
  height: var(--size-5xl);
  width: var(--size-5xl);
}
.avatar--size-lg {
  font-size: var(--size-lg);
  line-height: var(--size-xl);
  font-weight: 800;
  height: var(--size-6xl);
  width: var(--size-6xl);
}
.avatar--size-xl {
  font-size: var(--size-3xl);
  line-height: var(--size-4xl);
  font-weight: 800;
  height: var(--size-7xl);
  width: var(--size-7xl);
}
.avatar--size-2xl {
  font-size: var(--size-4xl);
  line-height: var(--size-5xl);
  font-weight: 800;
  height: var(--size-8xl);
  width: var(--size-8xl);
}

.badge {
  display: inline-block;
  vertical-align: middle;
  font-weight: 700;
}
.badge--emphasis-strong {
  color: var(--color-white);
}
.badge--emphasis-strong.badge--color-neutral {
  background-color: var(--color-gray-600);
}
.badge--emphasis-strong.badge--color-brand {
  background-color: var(--color-blue-600);
}
.badge--emphasis-strong.badge--color-success {
  background-color: var(--color-green-600);
}
.badge--emphasis-strong.badge--color-danger {
  background-color: var(--color-red-600);
}
.badge--emphasis-strong.badge--color-warning {
  background-color: var(--color-yellow-600);
}
.badge--emphasis-strong.badge--color-new {
  background-color: var(--color-purple-600);
}
.badge--emphasis-subtle.badge--color-neutral {
  background-color: var(--color-gray-100);
  color: var(--color-gray-600);
}
.badge--emphasis-subtle.badge--color-brand {
  background-color: var(--color-blue-100);
  color: var(--color-blue-600);
}
.badge--emphasis-subtle.badge--color-danger {
  background-color: var(--color-red-100);
  color: var(--color-red-600);
}
.badge--emphasis-subtle.badge--color-success {
  background-color: var(--color-green-100);
  color: var(--color-green-600);
}
.badge--emphasis-subtle.badge--color-warning {
  background-color: var(--color-yellow-100);
  color: var(--color-yellow-600);
}
.badge--emphasis-subtle.badge--color-new {
  background-color: var(--color-purple-100);
  color: var(--color-purple-600);
}
.badge--size-sm {
  padding: var(--size-4xs) var(--size-3xs);
  font-size: var(--size-2xs);
  line-height: var(--size-xs);
  border-radius: var(--size-2xs);
}
.badge--size-md {
  padding: var(--size-3xs) var(--size-2xs);
  font-size: var(--size-xs);
  line-height: var(--size-md);
  border-radius: var(--size-xs);
}

.button {
  font-family: inherit;
  font-weight: bold;
  border-radius: var(--size-3xs);
  border-width: var(--size-4xs);
  border-style: solid;
}
.button .system-icon:last-child {
  margin-left: var(--size-3xs);
}
.button .system-icon:first-child {
  margin-right: var(--size-3xs);
}
.button .system-icon:first-child:has(+ span:empty) {
  margin-right: 0;
}
.button--filled {
  border-color: transparent;
}
.button--filled.button--style-brand {
  background-color: var(--color-blue-600);
  color: var(--color-white);
}
.button--filled.button--style-danger {
  background-color: var(--color-red-600);
  color: var(--color-white);
}
.button--filled.button--style-neutral {
  background-color: var(--color-gray-900);
  color: var(--color-white);
}
.button--filled.button--style-inverse {
  background-color: var(--color-white);
  color: var(--color-gray-900);
}
@media (hover: hover) {
  .button--filled:hover.button--style-brand {
    background-color: var(--color-blue-700);
  }
  .button--filled:hover.button--style-danger {
    background-color: var(--color-red-700);
  }
  .button--filled:hover.button--style-neutral {
    background-color: var(--color-gray-700);
  }
  .button--filled:hover.button--style-inverse {
    background-color: var(--color-gray-100);
  }
  .button--filled:hover[aria-disabled=true] {
    background-color: var(--color-gray-200);
    color: var(--color-gray-500);
  }
}
.button--filled:active.button--style-brand {
  background-color: var(--color-blue-800);
}
.button--filled:active.button--style-danger {
  background-color: var(--color-red-800);
}
.button--filled:active.button--style-neutral {
  background-color: var(--color-gray-800);
}
.button--filled:active.button--style-inverse {
  background-color: var(--color-gray-200);
}
.button--filled:disabled, .button--filled[aria-disabled=true], .button--filled:active[aria-disabled=true] {
  background-color: var(--color-gray-200);
  color: var(--color-gray-500);
  cursor: not-allowed;
}
.button--outlined {
  background-color: transparent;
}
.button--outlined.button--style-brand {
  border-color: var(--color-blue-600);
  color: var(--color-blue-600);
}
.button--outlined.button--style-danger {
  border-color: var(--color-red-600);
  color: var(--color-red-600);
}
@media (hover: hover) {
  .button--outlined:hover.button--style-brand {
    border-color: var(--color-blue-700);
    color: var(--color-blue-700);
  }
  .button--outlined:hover.button--style-danger {
    border-color: var(--color-red-700);
    color: var(--color-red-700);
  }
  .button--outlined:hover[aria-disabled=true] {
    border-color: var(--color-gray-500);
    color: var(--color-gray-500);
    cursor: not-allowed;
  }
}
.button--outlined:active.button--style-brand {
  border-color: var(--color-blue-800);
  color: var(--color-blue-800);
}
.button--outlined:active.button--style-danger {
  border-color: var(--color-red-800);
  color: var(--color-red-800);
}
.button--outlined:disabled, .button--outlined[aria-disabled=true], .button--outlined:active[aria-disabled=true] {
  border-color: var(--color-gray-500);
  color: var(--color-gray-500);
  cursor: not-allowed;
}
.button--ghost {
  border-color: transparent;
  background-color: transparent;
}
.button--ghost.button--style-brand {
  color: var(--color-blue-600);
}
.button--ghost.button--style-danger {
  color: var(--color-red-600);
}
.button--ghost.button--style-neutral {
  color: var(--color-gray-900);
}
.button--ghost.button--style-inverse {
  color: var(--color-white);
}
@media (hover: hover) {
  .button--ghost:hover.button--style-brand {
    background-color: var(--color-blue-100);
    color: var(--color-blue-700);
  }
  .button--ghost:hover.button--style-danger {
    background-color: var(--color-red-100);
    color: var(--color-red-700);
  }
  .button--ghost:hover.button--style-neutral {
    background-color: var(--color-gray-900-opacity-10);
    color: var(--color-gray-900);
  }
  .button--ghost:hover.button--style-inverse {
    background-color: var(--color-white-opacity-10);
    color: var(--color-white);
  }
  .button--ghost:hover[aria-disabled=true] {
    background-color: transparent;
    color: var(--color-gray-500);
    cursor: not-allowed;
  }
}
.button--ghost:active.button--style-brand {
  background-color: var(--color-blue-200);
  color: var(--color-blue-800);
}
.button--ghost:active.button--style-danger {
  background-color: var(--color-red-200);
  color: var(--color-red-800);
}
.button--ghost:active.button--style-neutral {
  background-color: var(--color-gray-900);
  color: var(--color-white);
}
.button--ghost:active.button--style-inverse {
  background-color: var(--color-white);
  color: var(--color-gray-900);
}
.button--ghost:disabled, .button--ghost[aria-disabled=true], .button--ghost:active[aria-disabled=true] {
  background-color: transparent;
  color: var(--color-gray-500);
  cursor: not-allowed;
}
.button--size-md {
  font-size: var(--size-md);
  line-height: var(--size-xl);
  padding: calc(var(--size-xs) - var(--size-4xs)) calc(var(--size-md) - var(--size-4xs));
}
.button--size-md:has(.system-icon + span:empty) {
  padding-left: calc(var(--size-xs) - var(--size-4xs));
  padding-right: calc(var(--size-xs) - var(--size-4xs));
}
.button--size-sm {
  font-size: var(--size-sm);
  line-height: var(--size-md);
  padding: calc(var(--size-2xs) - var(--size-4xs)) calc(var(--size-xs) - var(--size-4xs));
}
.button--size-sm .system-icon > svg {
  width: var(--size-md);
  height: var(--size-md);
}
.button--size-sm:has(.system-icon + span:empty) {
  padding-left: calc(var(--size-2xs) - var(--size-4xs));
  padding-right: calc(var(--size-2xs) - var(--size-4xs));
}
.button--size-xs {
  font-size: var(--size-sm);
  line-height: var(--size-md);
  padding: calc(var(--size-3xs) - var(--size-4xs));
}
.button--size-xs .system-icon > svg {
  width: var(--size-md);
  height: var(--size-md);
}
.button--size-xs:has(.system-icon + span:empty) {
  padding-left: calc(var(--size-3xs) - var(--size-4xs));
  padding-right: calc(var(--size-3xs) - var(--size-4xs));
}

.button--loading {
  position: relative;
  cursor: wait;
}
.button--loading .button__content {
  visibility: hidden;
}
.button--loading .spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: calc(var(--size-xl) / -2);
  margin-top: calc(var(--size-xl) / -2);
}
.button--loading.button--filled .spinner__shape {
  background: conic-gradient(transparent 12.5%, var(--color-white));
}
.button--loading.button--filled:not(:disabled, [aria-disabled=true]).button--style-brand {
  background-color: var(--color-blue-800);
}
.button--loading.button--filled:not(:disabled, [aria-disabled=true]).button--style-danger {
  background-color: var(--color-red-800);
}
.button--loading.button--filled:not(:disabled, [aria-disabled=true]).button--style-neutral {
  background-color: var(--color-gray-800);
}
.button--loading.button--filled:not(:disabled, [aria-disabled=true]).button--style-inverse {
  background-color: var(--color-gray-200);
}
.button--loading.button--filled:disabled .spinner__shape, .button--loading.button--filled[aria-disabled=true] .spinner__shape {
  background: conic-gradient(transparent 12.5%, var(--color-gray-500));
}
.button--loading.button--outlined .spinner__shape {
  background: conic-gradient(transparent 12.5%, var(--color-blue-800));
}
.button--loading.button--outlined:not(:disabled, [aria-disabled=true]).button--style-brand {
  color: var(--color-blue-800);
  border-color: var(--color-blue-800);
}
.button--loading.button--outlined:not(:disabled, [aria-disabled=true]).button--style-danger {
  color: var(--color-blue-800);
  border-color: var(--color-blue-800);
}
.button--loading.button--outlined:disabled .spinner__shape, .button--loading.button--outlined[aria-disabled=true] .spinner__shape {
  background: conic-gradient(transparent 12.5%, var(--color-gray-500));
}
.button--loading.button--ghost:not(:disabled, [aria-disabled=true]).button--style-brand .spinner__shape {
  background: conic-gradient(transparent 12.5%, var(--color-blue-800));
}
.button--loading.button--ghost:not(:disabled, [aria-disabled=true]).button--style-danger .spinner__shape {
  background: conic-gradient(transparent 12.5%, var(--color-red-800));
}
.button--loading.button--ghost:not(:disabled, [aria-disabled=true]).button--style-neutral .spinner__shape {
  background: conic-gradient(transparent 12.5%, var(--color-gray-800));
}
.button--loading.button--ghost:not(:disabled, [aria-disabled=true]).button--style-inverse .spinner__shape {
  background: conic-gradient(transparent 12.5%, var(--color-gray-200));
}
@media (hover: hover) {
  .button--loading.button--ghost:hover {
    background-color: transparent;
  }
}
.button--loading.button--ghost:disabled .spinner__shape, .button--loading.button--ghost[aria-disabled=true] .spinner__shape {
  background: conic-gradient(transparent 12.5%, var(--color-gray-500));
}

.checkbox {
  display: flex;
  gap: var(--size-xs);
  width: 100%;
}
.checkbox:has(:disabled, [aria-disabled=true]) {
  color: var(--color-gray-500);
  cursor: not-allowed;
}
@media (hover: hover) {
  .checkbox:hover .checkbox__control {
    background-color: var(--color-blue-100);
    border-color: var(--color-gray-600);
  }
  .checkbox:hover .checkbox__control:checked {
    background-color: var(--color-blue-700);
  }
  .checkbox:hover .checkbox__control.has-error {
    border-color: var(--color-red-600);
  }
  .checkbox:hover .checkbox__control:disabled, .checkbox:hover .checkbox__control[aria-disabled=true] {
    background-color: var(--color-gray-200);
    border-color: var(--color-gray-400);
  }
  .checkbox:hover .checkbox__control:disabled:checked, .checkbox:hover .checkbox__control[aria-disabled=true]:checked {
    background-color: var(--color-gray-400);
  }
}
.checkbox:active .checkbox__control {
  background-color: var(--color-blue-200);
  border-color: var(--color-gray-700);
}
.checkbox:active .checkbox__control:checked {
  background-color: var(--color-blue-800);
}
.checkbox:active .checkbox__control.has-error {
  border-color: var(--color-red-700);
}
.checkbox:active .checkbox__control:disabled, .checkbox:active .checkbox__control[aria-disabled=true] {
  background-color: var(--color-gray-200);
  border-color: var(--color-gray-400);
}
.checkbox:active .checkbox__control:disabled:checked, .checkbox:active .checkbox__control[aria-disabled=true]:checked {
  background-color: var(--color-gray-400);
}

.checkbox__control {
  appearance: none;
  background-color: var(--color-white);
  margin: var(--size-4xs);
  flex: 0 0 var(--size-lg);
  height: var(--size-lg);
  border: var(--size-5xs) solid var(--color-gray-500);
  border-radius: var(--size-3xs);
  position: relative;
}
.checkbox__control::before {
  background-color: var(--color-white);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: var(--size-md);
  display: none;
  content: "";
  width: var(--size-lg);
  height: var(--size-lg);
}
.checkbox__control:checked, .checkbox__control:indeterminate {
  background-color: var(--color-blue-600);
}
.checkbox__control:checked::before, .checkbox__control:indeterminate::before {
  display: block;
  position: absolute;
  left: calc(-1 * var(--size-5xs));
  top: calc(-1 * var(--size-5xs));
}
.checkbox__control:checked::before {
  mask-image: url("../../assets/img/system-icons/check.svg");
}
.checkbox__control:checked:disabled, .checkbox__control:checked[aria-disabled=true] {
  background-color: var(--color-gray-400);
}
.checkbox__control:checked:disabled::before, .checkbox__control:checked[aria-disabled=true]::before {
  background-color: var(--color-gray-200);
}
.checkbox__control:indeterminate::before {
  mask-image: url("../../assets/img/system-icons/minus.svg");
}
.checkbox__control.has-error {
  border-color: var(--color-red-500);
}
.checkbox__control:disabled, .checkbox__control[aria-disabled=true] {
  background-color: var(--color-gray-200);
  border-color: var(--color-gray-400);
}

.checkbox__content {
  display: flex;
  flex-direction: column;
  gap: var(--size-2xs);
}

.checkbox__label {
  display: block;
}

.checkbox__description {
  display: block;
  color: var(--color-gray-600);
  font-size: var(--size-sm);
  line-height: var(--size-lg);
}

.checkbox--framed {
  width: 100%;
  padding: var(--size-md);
  border: var(--size-5xs) solid var(--color-gray-500);
  border-radius: var(--size-3xs);
}
.checkbox--framed:has(:focus-visible) {
  outline-offset: var(--size-4xs);
  outline: var(--color-blue-500) solid var(--size-4xs);
  box-shadow: 0 0 0 var(--size-4xs) var(--color-white);
}
.checkbox--framed:has(:checked) {
  background-color: var(--color-blue-100);
}
.checkbox--framed:has(.has-error) {
  border-color: var(--color-red-500);
}
.checkbox--framed:has(:disabled, [aria-disabled=true]) {
  cursor: not-allowed;
  color: var(--color-gray-500);
}
.checkbox--framed:has(:disabled, [aria-disabled=true]) .checkbox__description {
  color: var(--color-gray-500);
}
.checkbox--framed:has(:checked:disabled, :checked[aria-disabled=true]) {
  background-color: var(--color-gray-200);
  border-color: var(--color-gray-400);
}
.checkbox--framed:has(:checked:disabled, :checked[aria-disabled=true]) .checkbox__description {
  color: var(--color-gray-500);
}
@media (hover: hover) {
  .checkbox--framed:hover {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-600);
  }
  .checkbox--framed:hover:has(:checked) {
    background-color: var(--color-blue-200);
  }
  .checkbox--framed:hover:has(.has-error) {
    border-color: var(--color-red-600);
  }
  .checkbox--framed:hover:has(:disabled, [aria-disabled=true]) {
    background-color: var(--color-white);
    border-color: var(--color-gray-500);
  }
  .checkbox--framed:hover:has(:checked:disabled, :checked[aria-disabled=true]) {
    background-color: var(--color-gray-200);
    border-color: var(--color-gray-400);
  }
  .checkbox--framed:hover .checkbox__control {
    border-color: var(--color-gray-500);
    background-color: var(--color-white);
  }
  .checkbox--framed:hover .checkbox__control:checked {
    background-color: var(--color-blue-600);
  }
  .checkbox--framed:hover .checkbox__control.has-error {
    border-color: var(--color-gray-500);
    background-color: var(--color-white);
  }
}
.checkbox--framed:active {
  background-color: var(--color-gray-200);
  border-color: var(--color-gray-700);
}
.checkbox--framed:active:has(:checked) {
  background-color: var(--color-blue-300);
}
.checkbox--framed:active:has(:checked) .checkbox__description {
  color: var(--color-gray-900);
}
.checkbox--framed:active:has(.has-error) {
  border-color: var(--color-red-700);
}
.checkbox--framed:active:has(:disabled, [aria-disabled=true]) {
  background-color: var(--color-white);
  border-color: var(--color-gray-500);
}
.checkbox--framed:active:has(:checked:disabled, :checked[aria-disabled=true]) {
  background-color: var(--color-gray-200);
  border-color: var(--color-gray-400);
}
.checkbox--framed:active:has(:checked:disabled, :checked[aria-disabled=true]) .checkbox__description {
  color: var(--color-gray-500);
}
.checkbox--framed:active .checkbox__control {
  border-color: var(--color-gray-500);
  background-color: var(--color-white);
}
.checkbox--framed:active .checkbox__control:checked {
  background-color: var(--color-blue-600);
}
.checkbox--framed:active .checkbox__control.has-error {
  border-color: var(--color-gray-500);
  background-color: var(--color-white);
}
.checkbox--framed .checkbox__control {
  border-color: var(--color-gray-500);
  background-color: var(--color-white);
}
.checkbox--framed .checkbox__control:focus-visible {
  outline: none;
  box-shadow: none;
}
.checkbox--framed .checkbox__control:checked {
  background-color: var(--color-blue-600);
}
.checkbox--framed .checkbox__control:checked:disabled, .checkbox--framed .checkbox__control:checked[aria-disabled=true] {
  background-color: var(--color-gray-400);
  border-color: var(--color-gray-400);
}
.checkbox--framed .checkbox__control:disabled, .checkbox--framed .checkbox__control[aria-disabled=true] {
  background-color: var(--color-gray-200);
  border-color: var(--color-gray-400);
}

.chip {
  font-family: inherit;
  border-radius: var(--size-md);
  font-size: var(--size-sm);
  line-height: var(--size-md);
  border: none;
  background-color: var(--color-gray-100);
  padding: var(--size-2xs) var(--size-xs);
  display: inline-flex;
  flex-direction: row;
  gap: var(--size-2xs);
  align-items: center;
  color: var(--color-gray-900);
  flex: 0 0 max-content;
  -webkit-user-select: none;
  user-select: none;
}

.chip--dismissible:disabled, .chip--dismissible[aria-disabled=true] {
  color: var(--color-gray-500);
}
@media (hover: hover) {
  .chip--dismissible:hover {
    background-color: var(--color-gray-200);
  }
  .chip--dismissible:hover:disabled, .chip--dismissible:hover[aria-disabled=true] {
    background-color: var(--color-gray-100);
  }
}
.chip--dismissible:active {
  background-color: var(--color-gray-300);
}
.chip--dismissible:active:disabled, .chip--dismissible:active[aria-disabled=true] {
  background-color: var(--color-gray-100);
}
.chip--dismissible .system-icon {
  pointer-events: none;
}

.display-icon {
  display: inline-block;
  vertical-align: top;
}
.display-icon > svg {
  vertical-align: top;
}
.display-icon--size-sm > svg {
  width: var(--size-4xl);
  height: var(--size-4xl);
}
.display-icon--size-md > svg {
  width: 5rem;
  height: 5rem;
}
.display-icon--size-lg > svg {
  width: 8rem;
  height: 8rem;
}
.display-icon__ink {
  fill: var(--color-gray-900);
}
.display-icon--inverse .display-icon__ink {
  fill: var(--color-white);
}
.display-icon--color-blue .display-icon__fill-1 {
  fill: var(--color-blue-400);
}
.display-icon--color-blue .display-icon__fill-2 {
  fill: var(--color-blue-200);
}
.display-icon--color-green .display-icon__fill-1 {
  fill: var(--color-green-400);
}
.display-icon--color-green .display-icon__fill-2 {
  fill: var(--color-green-200);
}
.display-icon--color-red .display-icon__fill-1 {
  fill: var(--color-red-300);
}
.display-icon--color-red .display-icon__fill-2 {
  fill: var(--color-red-200);
}
.display-icon--color-yellow .display-icon__fill-1 {
  fill: var(--color-yellow-200);
}
.display-icon--color-yellow .display-icon__fill-2 {
  fill: var(--color-yellow-300);
}
.display-icon--color-gray .display-icon__fill-1 {
  fill: var(--color-gray-300);
}
.display-icon--color-gray .display-icon__fill-2 {
  fill: var(--color-gray-300);
}
.display-icon--color-red-purple .display-icon__fill-1 {
  fill: var(--color-red-300);
}
.display-icon--color-red-purple .display-icon__fill-2 {
  fill: var(--color-purple-300);
}
.display-icon--color-yellow-purple .display-icon__fill-1 {
  fill: var(--color-yellow-200);
}
.display-icon--color-yellow-purple .display-icon__fill-2 {
  fill: var(--color-purple-300);
}
.display-icon--color-green-yellow .display-icon__fill-1 {
  fill: var(--color-green-400);
}
.display-icon--color-green-yellow .display-icon__fill-2 {
  fill: var(--color-yellow-200);
}
.display-icon--color-blue-yellow .display-icon__fill-1 {
  fill: var(--color-blue-400);
}
.display-icon--color-blue-yellow .display-icon__fill-2 {
  fill: var(--color-yellow-200);
}
.display-icon--color-blue-green .display-icon__fill-1 {
  fill: var(--color-blue-400);
}
.display-icon--color-blue-green .display-icon__fill-2 {
  fill: var(--color-green-400);
}
.display-icon--inverse.display-icon--color-blue .display-icon__fill-1 {
  fill: var(--color-blue-600);
}
.display-icon--inverse.display-icon--color-blue .display-icon__fill-2 {
  fill: var(--color-blue-800);
}
.display-icon--inverse.display-icon--color-green .display-icon__fill-1 {
  fill: var(--color-green-600);
}
.display-icon--inverse.display-icon--color-green .display-icon__fill-2 {
  fill: var(--color-green-800);
}
.display-icon--inverse.display-icon--color-red .display-icon__fill-1 {
  fill: var(--color-red-500);
}
.display-icon--inverse.display-icon--color-red .display-icon__fill-2 {
  fill: var(--color-red-700);
}
.display-icon--inverse.display-icon--color-yellow .display-icon__fill-1 {
  fill: var(--color-yellow-600);
}
.display-icon--inverse.display-icon--color-yellow .display-icon__fill-2 {
  fill: var(--color-yellow-800);
}
.display-icon--inverse.display-icon--color-gray .display-icon__fill-1 {
  fill: var(--color-gray-700);
}
.display-icon--inverse.display-icon--color-gray .display-icon__fill-2 {
  fill: var(--color-gray-700);
}
.display-icon--inverse.display-icon--color-red-purple .display-icon__fill-1 {
  fill: var(--color-red-700);
}
.display-icon--inverse.display-icon--color-red-purple .display-icon__fill-2 {
  fill: var(--color-purple-700);
}
.display-icon--inverse.display-icon--color-yellow-purple .display-icon__fill-1 {
  fill: var(--color-yellow-600);
}
.display-icon--inverse.display-icon--color-yellow-purple .display-icon__fill-2 {
  fill: var(--color-purple-700);
}
.display-icon--inverse.display-icon--color-green-yellow .display-icon__fill-1 {
  fill: var(--color-green-600);
}
.display-icon--inverse.display-icon--color-green-yellow .display-icon__fill-2 {
  fill: var(--color-yellow-600);
}
.display-icon--inverse.display-icon--color-blue-yellow .display-icon__fill-1 {
  fill: var(--color-blue-600);
}
.display-icon--inverse.display-icon--color-blue-yellow .display-icon__fill-2 {
  fill: var(--color-yellow-600);
}
.display-icon--inverse.display-icon--color-blue-green .display-icon__fill-1 {
  fill: var(--color-blue-600);
}
.display-icon--inverse.display-icon--color-blue-green .display-icon__fill-2 {
  fill: var(--color-green-600);
}

.divider {
  border: none;
  border-top: var(--size-5xs) solid var(--color-gray-300);
}
.divider--size-xs {
  margin: var(--size-xs) 0;
}
.divider--size-sm {
  margin: var(--size-md) 0;
}
.divider--size-md {
  margin: var(--size-xl) 0;
}
.divider--size-lg {
  margin: var(--size-3xl) 0;
}
.divider--size-xl {
  margin: var(--size-4xl) 0;
}

.empty-state {
  width: 100%;
  max-width: 30rem;
  padding-left: var(--size-5xl);
  padding-right: var(--size-5xl);
  margin-bottom: var(--size-5xl);
}
.empty-state__icon {
  display: inline-block;
  margin-bottom: 1rem;
}
.empty-state__icon > svg {
  width: 3rem;
  height: 3rem;
}
.empty-state__primary-text {
  font-size: 1.25rem;
  line-height: 1.5rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}
.empty-state__secondary-text {
  margin-top: 0;
  margin-bottom: var(--size-xl);
  color: var(--color-gray-600);
}

.form-field {
  border: none;
  margin: 0;
  padding: 0;
}

.file-input__button-content--filled {
  display: none;
}
.file-input__description {
  color: var(--color-gray-600);
  text-align: center;
}
.file-input__description-text--filled, .file-input__description .system-icon {
  display: none;
}
.file-input__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--size-3xs);
  background-color: transparent;
  border: var(--size-5xs) dashed var(--color-gray-500);
  padding: calc(var(--size-xl) - var(--size-5xs));
  padding-top: calc(var(--size-md) - var(--size-5xs));
  border-radius: var(--size-2xs);
  font-family: inherit;
  font-size: var(--size-sm);
  line-height: var(--size-lg);
  width: 100%;
}
.file-input__dropzone.file-input__dropzone--dragged-over {
  background-color: var(--color-blue-100);
}
.file-input__dropzone.file-input__dropzone--filled {
  padding-top: calc(var(--size-xl) - var(--size-5xs));
  padding-bottom: calc(var(--size-md) - var(--size-5xs));
}
.file-input__dropzone.file-input__dropzone--filled .file-input__button {
  order: 2;
}
.file-input__dropzone.file-input__dropzone--filled .file-input__button-content--empty {
  display: none;
}
.file-input__dropzone.file-input__dropzone--filled .file-input__button-content--filled {
  display: block;
}
.file-input__dropzone.file-input__dropzone--filled .file-input__description-text--empty {
  display: none;
}
.file-input__dropzone.file-input__dropzone--filled .file-input__description-text--filled, .file-input__dropzone.file-input__dropzone--filled .file-input__description .system-icon {
  display: inline;
}
.file-input__dropzone.file-input__dropzone--filled .file-input__description-text--filled {
  overflow-wrap: anywhere;
  color: var(--color-gray-900);
}
.file-input.has-error .file-input__dropzone {
  border-color: var(--color-red-500);
}
@media (hover: hover) {
  .file-input.has-error .file-input__dropzone:hover {
    border-color: var(--color-red-600);
  }
}
.file-input.has-error .file-input__dropzone:active {
  border-color: var(--color-red-700);
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: var(--size-2xs);
}
.file-list:not(:empty) {
  margin-top: var(--size-xs);
}

.file-list-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: var(--size-md);
  background-color: var(--color-gray-100);
  border: var(--size-5xs) solid var(--color-gray-300);
  border-radius: var(--size-3xs);
  padding: calc(var(--size-xs) - var(--size-5xs));
  font-size: var(--size-sm);
  line-height: var(--size-lg);
}
.file-list-item__filename {
  overflow-wrap: anywhere;
}
.file-list-item__buttons {
  display: flex;
  margin: calc(-1 * var(--size-xs)) calc(-1 * var(--size-2xs));
}
.file-list-item__button {
  width: calc(var(--size-lg) + 2 * var(--size-2xs));
  height: calc(var(--size-lg) + 2 * var(--size-xs));
  padding: var(--size-xs) var(--size-2xs);
  appearance: none;
  border: none;
  border-radius: var(--size-3xs);
  background-color: transparent;
  position: relative;
}
.file-list-item__button::before {
  background-color: var(--color-gray-900);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: var(--size-lg);
  content: "";
  width: var(--size-lg);
  height: var(--size-lg);
  position: absolute;
  right: var(--size-2xs);
  top: var(--size-xs);
}
.file-list-item__button--remove::before {
  mask-image: url("../../assets/img/system-icons/close.svg");
}
.file-list-item__button--preview::before {
  mask-image: url("../../assets/img/system-icons/zoom-in.svg");
}

.input-label {
  display: flex;
  font-weight: 700;
  flex-flow: row wrap;
  gap: var(--size-2xs);
  align-items: baseline;
  font-size: var(--size-md);
  line-height: var(--size-xl);
  margin-bottom: var(--size-xs);
}
.input-label__optional {
  color: var(--color-gray-600);
  font-size: var(--size-sm);
  line-height: var(--size-lg);
  font-weight: 400;
}

.input-message {
  display: flex;
  flex-direction: row;
  gap: var(--size-2xs);
}
.input-message__list {
  display: flex;
  flex-direction: column;
  gap: var(--size-2xs);
}
.input-message__list:not(:empty) {
  margin-top: var(--size-xs);
}
.input-message--type-help {
  color: var(--color-gray-600);
}
.input-message--type-error {
  color: var(--color-red-600);
}
.input-message--type-success {
  color: var(--color-green-600);
}
.input-message--type-warning {
  color: var(--color-yellow-600);
}

.input-label:has(+ .input-message--type-help) {
  margin-bottom: var(--size-2xs);
}

.form-field .input-message--type-help {
  margin-bottom: var(--size-xs);
}

.memorable-date {
  display: flex;
  flex-direction: row;
  gap: var(--size-md);
}
.memorable-date .input-label {
  font-size: var(--size-sm);
  line-height: var(--size-md);
  font-weight: 400;
}
.memorable-date .memorable-date__month, .memorable-date .memorable-date__day, .memorable-date .memorable-date__year {
  font-variant-numeric: tabular-nums;
}
.memorable-date .form-field:has(.memorable-date__month) {
  flex: 0 1 12rem;
}
.memorable-date .form-field:has(.memorable-date__day) {
  flex: 0 0 3.5rem;
}
.memorable-date .form-field:has(.memorable-date__year) {
  flex: 0 0 4.5rem;
}
.memorable-date .form-field .input-label__optional {
  display: none;
}

.menu {
  position: absolute;
  width: max-content;
  max-width: 16rem;
  max-height: 16rem;
  overflow-x: scroll;
  overscroll-behavior: contain;
  background-color: var(--color-white);
  box-shadow: var(--box-shadow-level-2);
  border-radius: var(--size-3xs);
  padding: var(--size-3xs);
  z-index: 1;
}
.menu .menu__item-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu .menu__item {
  padding: var(--size-2xs) var(--size-md);
  color: var(--color-gray-900);
  display: block;
  width: 100%;
  border: none;
  background-color: var(--color-white);
  text-align: left;
}
@media (hover: hover) {
  .menu .menu__item:hover {
    color: var(--color-gray-900);
    background-color: var(--color-gray-100);
  }
}
.menu .menu__item:active {
  color: var(--color-gray-900);
  background-color: var(--color-gray-200);
}
.menu .menu__item--link {
  text-decoration: none;
}
.menu .menu__item--button {
  appearance: none;
  font-size: var(--size-md);
  font-family: inherit;
}
.menu .menu__item[aria-disabled=true] {
  color: var(--color-gray-500);
  cursor: not-allowed;
}
@media (hover: hover) {
  .menu .menu__item[aria-disabled=true]:hover {
    color: var(--color-gray-500);
    background-color: var(--color-white);
  }
}
.menu .menu__item[aria-disabled=true]:active {
  color: var(--color-gray-500);
  background-color: var(--color-white);
}

.multi-select__wrapper {
  position: relative;
  cursor: default;
}
.multi-select__container {
  padding: calc(var(--size-3xs) - var(--size-5xs)) calc(var(--size-5xl) - var(--size-5xs)) calc(var(--size-3xs) - var(--size-5xs)) calc(var(--size-2xs) - var(--size-5xs));
  border-radius: var(--size-3xs);
  border: var(--size-5xs) solid var(--color-gray-500);
  overflow-x: scroll;
  scrollbar-width: none;
}
.multi-select__container::-webkit-scrollbar {
  display: none;
}
.multi-select__container.has-error {
  border: var(--size-5xs) solid var(--color-gray-500);
}
@media (hover: hover) {
  .multi-select__container {
    border: var(--size-5xs) solid var(--color-gray-600);
  }
  .multi-select__container.has-error {
    border: var(--size-5xs) solid var(--color-gray-500);
  }
}
.multi-select__container:has(:focus-visible), .multi-select__container:has(:active) {
  outline-offset: var(--size-4xs);
  outline: var(--color-blue-500) solid var(--size-4xs);
  box-shadow: 0 0 0 var(--size-4xs) var(--color-white);
}
.multi-select__container:has(:active) {
  border: var(--size-5xs) solid var(--color-gray-700);
}
.multi-select__container:has(:active).has-error {
  border: var(--size-5xs) solid var(--color-red-700);
}
.multi-select__container:has(.chip:focus-visible) {
  outline: none;
  box-shadow: none;
}
.multi-select__container .chip:focus-visible {
  outline-offset: var(--size-5xs);
  outline: var(--color-blue-500) solid var(--size-5xs);
  border: var(--size-5xs) solid var(--color-white);
  padding: calc(var(--size-2xs) - var(--size-5xs)) calc(var(--size-xs) - var(--size-5xs));
  background-color: var(--color-gray-200);
}
.multi-select__inner-container {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--size-3xs);
  align-items: center;
}
.multi-select__typeahead {
  appearance: none;
  border: none;
  padding: var(--size-2xs);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  min-width: 15rem;
  width: 100%;
  background-color: var(--color-white);
  scroll-margin-inline-end: -9rem;
}
.multi-select__typeahead:focus-visible {
  outline: none;
  box-shadow: none;
}
.multi-select__typeahead::placeholder {
  color: var(--color-gray-400);
}
.multi-select__typeahead:not(:first-child)::placeholder {
  opacity: 0;
}
.multi-select__icon {
  position: absolute;
  pointer-events: none;
  padding: calc(var(--size-xs) - var(--size-5xs));
  top: var(--size-5xs);
  right: var(--size-5xs);
  background-color: var(--color-white);
  margin-left: var(--size-xs);
  border-radius: var(--size-3xs);
}
.multi-select__listbox {
  margin: 0;
  list-style-type: none;
  position: absolute;
  width: 100%;
  max-height: 14.25rem; /* 5.5 options + listbox padding */
  overflow-x: scroll;
  overscroll-behavior: contain;
  background-color: var(--color-white);
  box-shadow: var(--box-shadow-level-2);
  border-radius: var(--size-3xs);
  border: var(--size-5xs) solid var(--color-gray-500);
  padding: 0;
  -webkit-user-select: none;
  user-select: none;
  z-index: 1;
}
.multi-select__optgroup {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.multi-select__optgroup-label {
  padding: var(--size-2xs) var(--size-md);
  -webkit-user-select: none;
  user-select: none;
  font-weight: 700;
}
.multi-select__optgroup-options {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.multi-select__optgroup[aria-disabled=true] {
  color: var(--color-gray-400);
  cursor: not-allowed;
}
.multi-select__option, .multi-select__listbox-empty-message {
  padding: var(--size-2xs) var(--size-md);
  color: var(--color-gray-900);
  width: 100%;
  background-color: var(--color-white);
  -webkit-user-select: none;
  user-select: none;
}
.multi-select__option:not([hidden]), .multi-select__listbox-empty-message:not([hidden]) {
  display: block;
}
.multi-select__option.is--aria-activedescendant {
  color: var(--color-gray-900);
  background-color: var(--color-gray-100);
}
.multi-select__option:active {
  color: var(--color-gray-900);
  background-color: var(--color-gray-200);
}
.multi-select__optgroup-options > .multi-select__option {
  padding-left: var(--size-3xl);
}
.multi-select__option[aria-disabled=true] {
  color: var(--color-gray-400);
  cursor: not-allowed;
}
.multi-select__option[aria-disabled=true]:hover {
  color: var(--color-gray-400);
  background-color: var(--color-white);
}
.multi-select__option[aria-disabled=true]:active {
  color: var(--color-gray-400);
  background-color: var(--color-white);
}
.multi-select__listbox-empty-message {
  color: var(--color-gray-500);
}

.notice {
  padding: var(--size-xl);
  border-radius: var(--size-3xs);
  margin-bottom: var(--size-3xl);
}
.notice__headline {
  font-size: var(--size-lg);
  line-height: var(--size-xl);
  font-weight: 800;
  margin-bottom: var(--size-xs);
}
.notice__headline .system-icon {
  margin-right: var(--size-2xs);
}
.notice--type-danger {
  background-color: var(--color-red-300);
}
.notice--type-info {
  background-color: var(--color-blue-200);
}
.notice--type-success {
  background-color: var(--color-green-300);
}
.notice--type-warning {
  background-color: var(--color-yellow-200);
}
.notice--type-new {
  background-color: var(--color-purple-300);
}
.notice--type-neutral {
  background-color: var(--color-gray-200);
}
.notice__content .bulleted-list:first-child {
  margin-top: var(--size-xs);
}
.notice__content .bulleted-list:last-child {
  margin-bottom: 0;
}

.page-header__link-to-parent {
  margin-bottom: var(--size-3xs);
}
.page-header__title {
  font-size: var(--size-3xl);
  line-height: var(--size-4xl);
  font-weight: 800;
  margin-bottom: var(--size-2xs);
}
.page-header__title, .page-header__description {
  max-width: 55rem; /* Will need adjusting */
}
.page-header:not(:has(.divider)) {
  margin-bottom: var(--size-4xl);
}
.page-header:not(:has(.page-header__description)) .page-header__title {
  margin-bottom: 0;
}

.radio-button {
  display: flex;
  gap: var(--size-xs);
}
.radio-button:has(:disabled, [aria-disabled=true]) {
  cursor: not-allowed;
  color: var(--color-gray-500);
}
@media (hover: hover) {
  .radio-button:hover .radio-button__control {
    background-color: var(--color-blue-100);
    border-color: var(--color-gray-600);
  }
  .radio-button:hover .radio-button__control:checked::before {
    background-color: var(--color-blue-700);
  }
  .radio-button:hover .radio-button__control.has-error {
    border-color: var(--color-gray-600);
  }
  .radio-button:hover .radio-button__control:disabled, .radio-button:hover .radio-button__control[aria-disabled=true] {
    background-color: var(--color-gray-200);
    border-color: var(--color-gray-400);
  }
  .radio-button:hover .radio-button__control:disabled::before, .radio-button:hover .radio-button__control[aria-disabled=true]::before {
    background-color: var(--color-gray-500);
  }
}
.radio-button:active .radio-button__control {
  border-color: var(--color-gray-700);
  background-color: var(--color-blue-200);
}
.radio-button:active .radio-button__control:checked::before {
  background-color: var(--color-blue-800);
}
.radio-button:active .radio-button__control.has-error {
  border-color: var(--color-gray-700);
}

.radio-button__control {
  flex: 0 0 var(--size-lg);
  appearance: none;
  background-color: var(--color-white);
  margin: var(--size-4xs);
  height: var(--size-lg);
  border: var(--size-5xs) solid var(--color-gray-500);
  border-radius: 9999px;
  position: relative;
}
.radio-button__control::before {
  background-color: var(--color-blue-600);
  height: 0.625rem;
  width: 0.625rem;
  border-radius: 50%;
  display: none;
  content: "";
}
.radio-button__control:checked::before {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.radio-button__control.has-error {
  border-color: var(--color-gray-500);
}
.radio-button__control:disabled::before, .radio-button__control[aria-disabled=true]::before {
  background-color: var(--color-gray-500);
}
.radio-button__control:disabled, .radio-button__control:disabled:active, .radio-button__control[aria-disabled=true], .radio-button__control[aria-disabled=true]:active {
  background-color: var(--color-gray-200);
  border-color: var(--color-gray-400);
}
.radio-button__control:disabled:checked, .radio-button__control[aria-disabled=true]:checked {
  background-color: var(--color-gray-300);
}
.radio-button__control:disabled:checked::before, .radio-button__control[aria-disabled=true]:checked::before {
  display: block;
}

.radio-button--framed {
  width: auto;
  padding: var(--size-md);
  border: var(--size-5xs) solid var(--color-gray-500);
  border-radius: var(--size-3xs);
}
.radio-button--framed:has(:focus-visible) {
  outline-offset: var(--size-4xs);
  outline: var(--color-blue-500) solid var(--size-4xs);
  box-shadow: 0 0 0 var(--size-4xs) var(--color-white);
}
.radio-button--framed:has(:checked) {
  background-color: var(--color-blue-100);
}
.radio-button--framed:has(.has-error) {
  border-color: var(--color-gray-500);
}
.radio-button--framed:has(:disabled, [aria-disabled=true]) {
  border-color: var(--color-gray-400);
  cursor: not-allowed;
}
.radio-button--framed:has(:disabled, [aria-disabled=true]) .radio-button__description {
  color: var(--color-gray-500);
}
.radio-button--framed:has(:checked:disabled, :checked[aria-disabled=true]) {
  background-color: var(--color-gray-200);
  border-color: var(--color-gray-400);
}
.radio-button--framed:has(:checked:disabled, :checked[aria-disabled=true]) .radio-button__description {
  color: var(--color-gray-500);
}
@media (hover: hover) {
  .radio-button--framed:hover {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-600);
  }
  .radio-button--framed:hover:has(:checked) {
    background-color: var(--color-blue-200);
  }
  .radio-button--framed:hover:has(.has-error) {
    border-color: var(--color-gray-600);
  }
  .radio-button--framed:hover:has(:disabled, [aria-disabled=true]) {
    background-color: var(--color-white);
    border-color: var(--color-gray-500);
  }
  .radio-button--framed:hover:has(:checked:disabled, :checked[aria-disabled=true]) {
    background-color: var(--color-gray-200);
    border-color: var(--color-gray-400);
  }
  .radio-button--framed:hover .radio-button__control {
    border-color: var(--color-gray-500);
    background-color: var(--color-white);
  }
  .radio-button--framed:hover .radio-button__control:checked {
    border-color: var(--color-gray-500);
    background-color: var(--color-white);
  }
  .radio-button--framed:hover .radio-button__control:checked::before {
    background-color: var(--color-blue-600);
  }
  .radio-button--framed:hover .radio-button__control:checked:disabled::before, .radio-button--framed:hover .radio-button__control:checked[aria-disabled=true]::before {
    background-color: var(--color-gray-500);
  }
  .radio-button--framed:hover .radio-button__control.has-error {
    border-color: var(--color-gray-500);
    background-color: var(--color-white);
  }
}
.radio-button--framed:active {
  background-color: var(--color-gray-200);
  border-color: var(--color-gray-700);
}
.radio-button--framed:active:has(:checked) {
  background-color: var(--color-blue-300);
}
.radio-button--framed:active:has(:checked) .radio-button__description {
  color: var(--color-gray-900);
}
.radio-button--framed:active:has(.has-error) {
  border-color: var(--color-gray-700);
}
.radio-button--framed:active:has(:disabled, [aria-disabled=true]) {
  background-color: var(--color-white);
  border-color: var(--color-gray-500);
  cursor: not-allowed;
}
.radio-button--framed:active:has(:disabled, [aria-disabled=true]) .radio-button__description {
  color: var(--color-gray-500);
}
.radio-button--framed:active .radio-button__control {
  border-color: var(--color-gray-500);
  background-color: var(--color-white);
}
.radio-button--framed:active .radio-button__control:checked {
  border-color: var(--color-gray-500);
  background-color: var(--color-white);
}
.radio-button--framed:active .radio-button__control:checked::before {
  background-color: var(--color-blue-600);
}
.radio-button--framed:active .radio-button__control.has-error {
  border-color: var(--color-gray-500);
  background-color: var(--color-white);
}
.radio-button--framed .radio-button__control {
  border-color: var(--color-gray-500);
  background-color: var(--color-white);
}
.radio-button--framed .radio-button__control:focus-visible {
  outline: none;
  box-shadow: none;
}
.radio-button--framed .radio-button__control:checked {
  border-color: var(--color-gray-500);
  background-color: var(--color-white);
}
.radio-button--framed .radio-button__control:checked:disabled, .radio-button--framed .radio-button__control:checked[aria-disabled=true] {
  background-color: var(--color-gray-300);
  border-color: var(--color-gray-400);
}
.radio-button--framed .radio-button__control.has-error {
  border-color: var(--color-gray-500);
  background-color: var(--color-white);
}
.radio-button--framed .radio-button__control:disabled, .radio-button--framed .radio-button__control[aria-disabled=true] {
  background-color: var(--color-gray-200);
  border-color: var(--color-gray-400);
}

.show-error-blank-but-required .radio-button .radio-button__control.has-error {
  border-color: var(--color-red-500);
}
@media (hover: hover) {
  .show-error-blank-but-required .radio-button:hover .radio-button__control.has-error {
    border-color: var(--color-red-600);
  }
}
.show-error-blank-but-required .radio-button:active .radio-button__control.has-error {
  border-color: var(--color-red-700);
}
.show-error-blank-but-required .radio-button--framed:has(.has-error) {
  border-color: var(--color-red-500);
}
@media (hover: hover) {
  .show-error-blank-but-required .radio-button--framed :has(.has-error) {
    border-color: var(--color-red-600);
  }
}
.show-error-blank-but-required .radio-button--framed:active:has(.has-error) {
  border-color: var(--color-red-700);
}

.radio-button__content {
  display: flex;
  width: max-content;
  flex-direction: column;
  gap: var(--size-2xs);
}

.radio-button__label,
.radio-button__description {
  display: block;
}

.radio-button__description {
  color: var(--color-gray-600);
  font-size: var(--size-sm);
  line-height: var(--size-lg);
}

.select-box {
  width: 100%;
  appearance: none;
  border-radius: var(--size-3xs);
  border: var(--size-5xs) solid var(--color-gray-500);
  background-color: var(--color-white);
  font-family: inherit;
  padding: calc(var(--size-xs) - var(--size-5xs)) calc(3rem - var(--size-5xs)) calc(var(--size-xs) - var(--size-5xs)) calc(var(--size-md) - var(--size-5xs));
  font-size: var(--size-md);
  line-height: var(--size-xl);
  color: var(--color-gray-900);
  /* Styles for when "placeholder" is shown */
}
.select-box__wrapper {
  display: inline-block;
  width: 100%;
  position: relative;
}
.select-box__icon {
  position: absolute;
  top: var(--size-xs);
  right: var(--size-xs);
  pointer-events: none;
}
.select-box.has-error {
  border-color: var(--color-red-500);
}
@media (hover: hover) {
  .select-box:hover {
    border-color: var(--color-gray-600);
  }
  .select-box:hover.has-error {
    border-color: var(--color-red-600);
  }
}
.select-box:active {
  border-color: var(--color-gray-700);
}
.select-box:active.has-error {
  border-color: var(--color-gray-700);
}
.select-box:disabled, .select-box[aria-disabled=true] {
  border-color: var(--color-gray-400);
  background-color: var(--color-gray-200);
  color: var(--color-gray-500);
  cursor: not-allowed;
}
.select-box:disabled + .select-box__icon, .select-box[aria-disabled=true] + .select-box__icon {
  color: var(--color-gray-500);
}
.select-box:has(option:checked[value=""]) {
  border-color: var(--color-gray-500);
  color: var(--color-gray-400);
}
.select-box:has(option:checked[value=""]):disabled, .select-box:has(option:checked[value=""])[aria-disabled=true] {
  border-color: var(--color-gray-400);
  color: var(--color-gray-400);
}
@media (hover: hover) {
  .select-box:has(option:checked[value=""]):hover {
    border-color: var(--color-gray-600);
  }
}
.select-box:has(option:checked[value=""]):active {
  border-color: var(--color-gray-700);
}

.show-error-blank-but-required .select-box:required.has-error {
  border-color: var(--color-red-500);
}
@media (hover: hover) {
  .show-error-blank-but-required .select-box:required.has-error:hover {
    border-color: var(--color-red-600);
  }
}
.show-error-blank-but-required .select-box:required.has-error:active {
  border-color: var(--color-red-700);
}

.spinner {
  display: inline-block;
  vertical-align: middle;
  animation: rotate 1s infinite linear;
}
.spinner--size-xs {
  width: var(--size-md);
  height: var(--size-md);
}
.spinner--size-sm {
  width: var(--size-lg);
  height: var(--size-lg);
}
.spinner--size-md {
  width: var(--size-xl);
  height: var(--size-xl);
}
.spinner--size-lg {
  width: var(--size-2xl);
  height: var(--size-2xl);
}
.spinner--size-xl {
  width: var(--size-4xl);
  height: var(--size-4xl);
}
.spinner__shape {
  width: 100%;
  height: 100%;
  background: conic-gradient(transparent 12.5%, var(--color-gray-300));
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
.skeleton-text, .skeleton-image {
  display: inline-block;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: var(--color-gray-300);
  vertical-align: top;
}
.skeleton-text::after, .skeleton-image::after {
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  animation: shimmer 2s infinite;
  content: "";
}
@media (prefers-reduced-motion: true) {
  .skeleton-text::after, .skeleton-image::after {
    animation: shimmer 6s infinite;
  }
}
.skeleton-text {
  border-radius: 9999px;
}
.skeleton-text--variant-body.skeleton-text--size-md {
  height: 1rem;
  margin: 0.25rem 0;
}
.skeleton-text--variant-body.skeleton-text--size-sm {
  height: 0.875rem;
  margin: 0.1875rem 0;
}
.skeleton-text--variant-heading.skeleton-text--size-xs {
  height: 0.875rem;
  margin: 0.0625rem 0;
}
.skeleton-image--border-radius-md {
  border-radius: 0.25rem;
}
.skeleton-image--border-radius-lg {
  border-radius: 9999px;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}
.stepper {
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  list-style-type: none;
  counter-reset: steps;
}

.step {
  counter-increment: steps;
  position: relative;
  display: flex;
  flex-direction: column;
}
.step::before {
  position: absolute;
  content: "";
  display: block;
  height: var(--size-5xs);
  background-color: var(--color-gray-400);
  left: 0;
  right: 0;
  top: calc(var(--size-md) - var(--size-5xs) / 2);
}
.step:last-child::before {
  display: none;
}
.step__title, .step__subtitle {
  display: block;
  padding-right: var(--size-md);
}
.step__title {
  font-size: var(--size-md);
  line-height: var(--size-lg);
  font-weight: 700;
  margin-bottom: var(--size-3xs);
}
.step__subtitle {
  font-size: var(--size-sm);
  line-height: var(--size-md);
  color: var(--color-gray-600);
}
.step__counter {
  flex: 0 0 var(--size-3xl);
  display: block;
  height: var(--size-3xl);
  width: var(--size-3xl);
  border-radius: var(--size-md);
  border: var(--size-5xs) solid transparent;
  margin-bottom: var(--size-xs);
  position: relative;
}
.step__counter::before {
  content: counter(steps);
  line-height: var(--size-3xl);
  text-align: center;
  font-weight: 700;
  display: block;
  height: var(--size-3xl);
  width: var(--size-3xl);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.step--type-incomplete .step__counter {
  background-color: var(--color-white);
  color: var(--color-gray-900);
  border-color: var(--color-gray-400);
}
.step--type-current .step__counter {
  background-color: var(--color-blue-600);
  color: var(--color-white);
}
.step--type-complete .step__counter {
  background-color: var(--color-green-600);
  color: var(--color-white);
}
.step--type-complete .step__counter::before {
  content: "";
  background-color: var(--color-white);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: var(--size-md);
  display: block;
  mask-image: url("../../assets/img/system-icons/check.svg");
  width: var(--size-lg);
  height: var(--size-lg);
}
.step--type-disabled .step__counter {
  background-color: var(--color-gray-300);
  color: var(--color-gray-500);
}
.step--type-disabled .step__title {
  color: var(--color-gray-500);
}
.step--type-disabled .step__subtitle {
  color: var(--color-gray-400);
}

.stepper--orientation-vertical {
  grid-auto-flow: row;
  grid-auto-rows: auto;
}
.stepper--orientation-vertical .step {
  flex-direction: row;
  gap: var(--size-sm);
}
.stepper--orientation-vertical .step .step__content {
  margin-top: calc((var(--size-3xl) - var(--size-lg)) / 2);
  margin-bottom: var(--size-md);
}
.stepper--orientation-vertical .step .step__title, .stepper--orientation-vertical .step .step__subtitle {
  padding-right: 0;
}
.stepper--orientation-vertical .step::before {
  position: absolute;
  content: "";
  display: block;
  width: var(--size-5xs);
  height: 100%;
  background-color: var(--color-gray-400);
  left: calc(var(--size-md) - var(--size-5xs) / 2);
}
.stepper--orientation-vertical .step:last-child::before {
  display: none;
}
.stepper--orientation-vertical .step:last-child .step__content {
  margin-bottom: 0;
}

.system-icon {
  display: inline-block;
  vertical-align: top;
}
.system-icon > svg {
  vertical-align: top;
}
.system-icon--size-xs > svg {
  width: var(--size-md);
  height: var(--size-md);
}
.system-icon--size-sm > svg {
  width: var(--size-lg);
  height: var(--size-lg);
}
.system-icon--size-md > svg {
  width: var(--size-xl);
  height: var(--size-xl);
}
.system-icon--size-lg > svg {
  width: var(--size-2xl);
  height: var(--size-2xl);
}
.system-icon--size-xl > svg {
  width: var(--size-4xl);
  height: var(--size-4xl);
}

.table__container {
  width: 100%;
  overflow-x: scroll;
  position: relative;
  display: flex;
  flex-direction: row;
  overflow-wrap: normal;
}
.table__container--scrollable-horizontal > .table__scroll-shadow--right {
  opacity: 1;
  position: sticky;
  min-width: var(--size-xs);
}
.table__container--scrolled-right > .table__scroll-shadow--left, .table__container--scrolled-right > .table__scroll-shadow--right {
  opacity: 1;
  position: sticky;
  min-width: var(--size-xs);
}
.table__container--scrolled-to-right > .table__scroll-shadow--right {
  opacity: 0;
  min-width: 0;
}

.table {
  border-collapse: collapse;
  flex: 0 0 100%;
}
.table .table-cell--align-left {
  text-align: left;
}
.table .table-cell--align-right {
  text-align: right;
}
.table .table-cell--numeric {
  font-variant-numeric: tabular-nums;
}
.table td, .table th {
  padding: var(--size-md);
  background-color: var(--color-white);
}
.table th[scope=col] {
  padding-bottom: calc(var(--size-md) - var(--size-5xs));
  border-bottom: var(--size-5xs) solid var(--color-gray-300);
}
.table th[scope=col]:empty {
  padding-right: calc(var(--size-md) - var(--size-5xs));
  border-right: var(--size-5xs) solid var(--color-gray-300);
}
.table th[scope=row] {
  padding-right: calc(var(--size-md) - var(--size-5xs));
  border-right: var(--size-5xs) solid var(--color-gray-300);
}
.table tbody tr:not(:last-child) th[scope=row], .table tbody tr:not(:last-child) td {
  padding-bottom: calc(var(--size-md) - var(--size-5xs));
  border-bottom: var(--size-5xs) solid var(--color-gray-300);
}
.table__scroll-shadow {
  position: absolute;
  top: 0;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
}
.table__scroll-shadow--left::before, .table__scroll-shadow--right::before {
  content: "";
  width: var(--size-xs);
  position: absolute;
  top: 0;
  bottom: 0;
}
.table__scroll-shadow--left {
  left: 0;
}
.table__scroll-shadow--left::before {
  left: -12px;
  box-shadow: var(--box-shadow-level-2);
}
.table__scroll-shadow--right {
  right: 0;
}
.table__scroll-shadow--right::before {
  right: -12px;
  box-shadow: var(--box-shadow-level-2-left);
}
.table th:first-child, .table td:first-child {
  position: sticky;
  left: 0;
}

.textarea {
  padding: calc(var(--size-xs) - var(--size-5xs)) calc(var(--size-md) - var(--size-5xs));
  border-radius: var(--size-3xs);
  font-family: inherit;
  font-size: var(--size-md);
  line-height: var(--size-xl);
  border: var(--size-5xs) solid var(--color-gray-500);
  width: 100%;
  background-color: var(--color-white);
  color: inherit;
}
.textarea::placeholder {
  color: var(--color-gray-500);
}
.textarea.resizable--none {
  resize: none;
}
.textarea.resizable--horizontal {
  resize: horizontal;
}
.textarea.resizable--vertical {
  resize: vertical;
}
.textarea.resizable--both {
  resize: both;
}
.textarea.has-error {
  border-color: var(--color-red-500);
}
.textarea:disabled, .textarea[aria-disabled=true] {
  background-color: var(--color-gray-200);
  border-color: var(--color-gray-400);
  color: var(--color-gray-500);
  cursor: not-allowed;
}
.textarea:disabled::placeholder, .textarea[aria-disabled=true]::placeholder {
  color: var(--color-gray-400);
}
@media (hover: hover) {
  .textarea:hover.has-error {
    border-color: var(--color-red-600);
  }
  .textarea:hover:valid {
    border-color: var(--color-gray-600);
  }
  .textarea:hover:disabled, .textarea:hover[aria-disabled=true] {
    border-color: var(--color-gray-400);
  }
}
.textarea:active.has-error {
  border-color: var(--color-red-700);
}
.textarea:active:valid {
  border-color: var(--color-gray-700);
}
.textarea:active:disabled, .textarea:active[aria-disabled=true] {
  border-color: var(--color-gray-400);
}

.text-box {
  padding: calc(var(--size-xs) - var(--size-5xs)) calc(var(--size-md) - var(--size-5xs));
  border-radius: var(--size-3xs);
  font-family: inherit;
  font-size: var(--size-md);
  line-height: var(--size-xl);
  border: var(--size-5xs) solid var(--color-gray-500);
  background-color: var(--color-white);
  color: inherit;
  width: 100%;
}
.text-box::placeholder {
  color: var(--color-gray-500);
}
.text-box.has-error {
  border-color: var(--color-red-500);
}
.text-box:disabled, .text-box[aria-disabled=true] {
  background-color: var(--color-gray-200);
  border-color: var(--color-gray-400);
  color: var(--color-gray-500);
  cursor: not-allowed;
}
.text-box:disabled::placeholder, .text-box[aria-disabled=true]::placeholder {
  color: var(--color-gray-400);
}
@media (hover: hover) {
  .text-box:hover.has-error {
    border-color: var(--color-red-600);
  }
  .text-box:hover:disabled, .text-box:hover[aria-disabled=true] {
    border-color: var(--color-gray-400);
  }
}
.text-box:active.has-error {
  border-color: var(--color-red-700);
}
.text-box:active:disabled, .text-box:active[aria-disabled=true] {
  border-color: var(--color-gray-400);
}

.toggle-switch {
  appearance: none;
  background-color: transparent;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  color: var(--color-gray-900);
  padding: 0;
  border: none;
  display: flex;
  align-items: flex-start;
  gap: var(--size-xs);
  border-radius: var(--size-3xs);
  text-align: left;
}
.toggle-switch__frame {
  pointer-events: none;
  flex: 0 0 var(--size-3xl);
}
.toggle-switch__foreground, .toggle-switch__background {
  transition-property: stroke, fill, cx;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.toggle-switch__foreground {
  stroke: var(--color-gray-500);
  stroke-width: var(--size-5xs);
  fill: var(--color-white);
}
.toggle-switch__background {
  stroke: var(--color-gray-500);
  stroke-width: var(--size-5xs);
  fill: var(--color-gray-100);
}
.toggle-switch__content, .toggle-switch__label, .toggle-switch__description {
  pointer-events: none;
}
.toggle-switch__content {
  display: flex;
  flex-direction: column;
  gap: var(--size-2xs);
}
.toggle-switch__label, .toggle-switch__description {
  display: block;
}
.toggle-switch__description {
  color: var(--color-gray-600);
  font-size: var(--size-sm);
  line-height: var(--size-lg);
}
.toggle-switch[aria-checked=true] .toggle-switch__foreground {
  cx: 1.375rem;
}
.toggle-switch[aria-checked=true] .toggle-switch__background {
  fill: var(--color-blue-600);
}
@media (hover: hover) {
  .toggle-switch:hover .toggle-switch__background, .toggle-switch:hover .toggle-switch__foreground {
    stroke: var(--color-gray-600);
  }
  .toggle-switch:hover[aria-checked=true] .toggle-switch__background {
    fill: var(--color-blue-700);
  }
  .toggle-switch:hover[aria-checked=false] .toggle-switch__background {
    fill: var(--color-gray-200);
  }
  .toggle-switch:hover:disabled, .toggle-switch:hover[aria-disabled=true] {
    color: var(--color-gray-500);
  }
  .toggle-switch:hover:disabled .toggle-switch__background, .toggle-switch:hover:disabled .toggle-switch__foreground, .toggle-switch:hover[aria-disabled=true] .toggle-switch__background, .toggle-switch:hover[aria-disabled=true] .toggle-switch__foreground {
    stroke: var(--color-gray-400);
  }
  .toggle-switch:hover:disabled .toggle-switch__foreground, .toggle-switch:hover[aria-disabled=true] .toggle-switch__foreground {
    fill: var(--color-gray-200);
  }
  .toggle-switch:hover:disabled .toggle-switch__background, .toggle-switch:hover[aria-disabled=true] .toggle-switch__background {
    fill: var(--color-gray-300);
  }
  .toggle-switch:hover[aria-checked=true]:disabled .toggle-switch__background, .toggle-switch:hover[aria-checked=true][aria-disabled=true] .toggle-switch__background {
    fill: var(--color-gray-400);
  }
}
.toggle-switch:disabled, .toggle-switch[aria-disabled=true] {
  color: var(--color-gray-500);
}
.toggle-switch:disabled .toggle-switch__background, .toggle-switch:disabled .toggle-switch__foreground, .toggle-switch[aria-disabled=true] .toggle-switch__background, .toggle-switch[aria-disabled=true] .toggle-switch__foreground {
  stroke: var(--color-gray-400);
}
.toggle-switch:disabled .toggle-switch__foreground, .toggle-switch[aria-disabled=true] .toggle-switch__foreground {
  fill: var(--color-gray-200);
}
.toggle-switch:disabled .toggle-switch__background, .toggle-switch[aria-disabled=true] .toggle-switch__background {
  fill: var(--color-gray-300);
}
.toggle-switch:disabled .toggle-switch__description, .toggle-switch[aria-disabled=true] .toggle-switch__description {
  color: var(--color-gray-500);
}
.toggle-switch:active .toggle-switch__background, .toggle-switch:active .toggle-switch__foreground {
  stroke: var(--color-gray-700);
}
.toggle-switch:active[aria-checked=true] .toggle-switch__background {
  fill: var(--color-blue-800);
}
.toggle-switch:active[aria-checked=false] .toggle-switch__background {
  fill: var(--color-gray-300);
}
.toggle-switch[aria-checked=true]:disabled .toggle-switch__background, .toggle-switch[aria-checked=true][aria-disabled=true] .toggle-switch__background {
  fill: var(--color-gray-400);
}
.toggle-switch:focus-visible:not(.toggle-switch--framed) {
  outline: none;
  box-shadow: none;
}
.toggle-switch:focus-visible:not(.toggle-switch--framed) .toggle-switch__frame {
  overflow: visible;
}
.toggle-switch:focus-visible:not(.toggle-switch--framed) .toggle-switch__background {
  outline: var(--color-blue-500) solid var(--size-4xs);
  outline-offset: var(--size-4xs);
  box-shadow: 0 0 0 var(--size-4xs) var(--color-white);
  border-radius: var(--size-xs);
}

.toggle-switch--framed {
  width: 100%;
  padding: var(--size-md);
  border: var(--size-5xs) solid var(--color-gray-500);
  border-radius: var(--size-3xs);
}
.toggle-switch--framed[aria-checked=true] {
  background-color: var(--color-blue-100);
}
@media (hover: hover) {
  .toggle-switch--framed:hover {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-600);
  }
  .toggle-switch--framed:hover .toggle-switch__background, .toggle-switch--framed:hover .toggle-switch__foreground {
    stroke: var(--color-gray-500);
  }
  .toggle-switch--framed:hover[aria-checked=true] {
    background-color: var(--color-blue-200);
  }
  .toggle-switch--framed:hover[aria-checked=false] .toggle-switch__background {
    fill: var(--color-gray-100);
  }
  .toggle-switch--framed:hover:disabled, .toggle-switch--framed:hover[aria-disabled=true] {
    background-color: var(--color-white);
    border-color: var(--color-gray-400);
    color: var(--color-gray-500);
  }
  .toggle-switch--framed:hover:disabled .toggle-switch__background, .toggle-switch--framed:hover:disabled .toggle-switch__foreground, .toggle-switch--framed:hover[aria-disabled=true] .toggle-switch__background, .toggle-switch--framed:hover[aria-disabled=true] .toggle-switch__foreground {
    stroke: var(--color-gray-400);
  }
  .toggle-switch--framed:hover:disabled .toggle-switch__foreground, .toggle-switch--framed:hover[aria-disabled=true] .toggle-switch__foreground {
    fill: var(--color-gray-200);
  }
  .toggle-switch--framed:hover:disabled .toggle-switch__background, .toggle-switch--framed:hover[aria-disabled=true] .toggle-switch__background {
    fill: var(--color-gray-300);
  }
  .toggle-switch--framed:hover[aria-checked=true]:disabled .toggle-switch__background, .toggle-switch--framed:hover[aria-checked=true][aria-disabled=true] .toggle-switch__background {
    fill: var(--color-gray-400);
  }
}
.toggle-switch--framed:disabled, .toggle-switch--framed[aria-disabled=true] {
  background-color: var(--color-white);
  border-color: var(--color-gray-400);
  color: var(--color-gray-500);
}
.toggle-switch--framed:disabled .toggle-switch__background, .toggle-switch--framed:disabled .toggle-switch__foreground, .toggle-switch--framed[aria-disabled=true] .toggle-switch__background, .toggle-switch--framed[aria-disabled=true] .toggle-switch__foreground {
  stroke: var(--color-gray-400);
}
.toggle-switch--framed:disabled .toggle-switch__foreground, .toggle-switch--framed[aria-disabled=true] .toggle-switch__foreground {
  fill: var(--color-gray-200);
}
.toggle-switch--framed:disabled .toggle-switch__background, .toggle-switch--framed[aria-disabled=true] .toggle-switch__background {
  fill: var(--color-gray-300);
}
.toggle-switch--framed:active {
  background-color: var(--color-gray-200);
  border-color: var(--color-gray-700);
}
.toggle-switch--framed:active .toggle-switch__background, .toggle-switch--framed:active .toggle-switch__foreground {
  stroke: var(--color-gray-500);
}
.toggle-switch--framed:active[aria-checked=true] {
  background-color: var(--color-blue-300);
}
.toggle-switch--framed:active[aria-checked=true] .toggle-switch__description {
  color: var(--color-gray-900);
}
.toggle-switch--framed:active[aria-checked=false] .toggle-switch__background {
  fill: var(--color-gray-100);
}
.toggle-switch--framed:active:disabled, .toggle-switch--framed:active[aria-disabled=true] {
  border-color: var(--color-gray-400);
  background-color: var(--color-white);
  color: var(--color-gray-500);
}
.toggle-switch--framed:active:disabled .toggle-switch__background, .toggle-switch--framed:active:disabled .toggle-switch__foreground, .toggle-switch--framed:active[aria-disabled=true] .toggle-switch__background, .toggle-switch--framed:active[aria-disabled=true] .toggle-switch__foreground {
  stroke: var(--color-gray-400);
}
.toggle-switch--framed:active:disabled .toggle-switch__foreground, .toggle-switch--framed:active[aria-disabled=true] .toggle-switch__foreground {
  fill: var(--color-gray-200);
}
.toggle-switch--framed:active:disabled .toggle-switch__background, .toggle-switch--framed:active[aria-disabled=true] .toggle-switch__background {
  fill: var(--color-gray-300);
}
.toggle-switch--framed:active[aria-checked=true]:disabled .toggle-switch__background, .toggle-switch--framed:active[aria-checked=true][aria-disabled=true] .toggle-switch__background {
  fill: var(--color-gray-400);
}
.toggle-switch--framed:active[aria-checked=true]:disabled .toggle-switch__description, .toggle-switch--framed:active[aria-checked=true][aria-disabled=true] .toggle-switch__description {
  color: var(--color-gray-500);
}
.toggle-switch--framed[aria-checked=true]:disabled, .toggle-switch--framed[aria-checked=true][aria-disabled=true] {
  background-color: var(--color-gray-200);
}
.toggle-switch--framed[aria-checked=true]:disabled .toggle-switch__background, .toggle-switch--framed[aria-checked=true][aria-disabled=true] .toggle-switch__background {
  fill: var(--color-gray-400);
}

.tooltip__trigger--string {
  display: inline;
  border-radius: var(--size-3xs);
  color: var(--color-gray-900);
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-skip-ink: none;
  text-decoration-color: var(--color-blue-600);
  text-underline-offset: var(--size-4xs);
}
@media (hover: hover) {
  .tooltip__trigger--string:hover {
    color: var(--color-gray-700);
    text-decoration-color: var(--color-blue-700);
  }
}
.tooltip__trigger--string:active {
  color: var(--color-gray-800);
  text-decoration-color: var(--color-blue-800);
}
.tooltip__tooltip {
  display: none;
  filter: var(--drop-shadow-level-2);
  will-change: filter;
  width: max-content;
  max-width: 16rem;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-gray-900);
  color: var(--color-white);
  padding: var(--size-2xs);
  border-radius: var(--size-3xs);
  font-size: var(--size-sm);
  line-height: var(--size-lg);
}
html[data-appearance-mode=dark] .tooltip__tooltip {
  background-color: var(--color-gray-900);
}
.tooltip__tooltip--inverse {
  background-color: var(--color-gray-100);
  color: var(--color-gray-900);
}
html[data-appearance-mode=dark] .tooltip__tooltip--inverse {
  background-color: var(--color-gray-100);
}
.tooltip__content {
  display: block;
  width: 100%;
  max-height: calc(100% - 2 * var(--size-2xs));
  overflow: hidden;
}
.tooltip__arrow {
  position: absolute;
  background-color: inherit;
  width: var(--size-2xs);
  height: var(--size-2xs);
  transform: rotate(45deg);
}

.annotation-list {
  counter-reset: annotations;
}
.annotation-list dt {
  position: relative;
  font-size: var(--size-lg);
  line-height: var(--size-xl);
  font-weight: 700;
  margin-bottom: var(--size-md);
}
.annotation-list dd {
  margin-bottom: var(--size-xl);
  margin-left: 0;
}
.annotation-list--numbered dt, .annotation-list--numbered dd {
  margin-left: var(--size-5xl);
}
.annotation-list--numbered dt {
  padding: var(--size-3xs) 0;
  font-size: var(--size-md);
  margin-bottom: 0;
}
.annotation-list--numbered dt::before {
  display: block;
  position: absolute;
  left: calc(-1 * var(--size-5xl));
  font-weight: 700;
  color: var(--color-blue-600);
  border: var(--size-5xs) solid var(--color-blue-600);
  background-color: var(--color-blue-100);
  font-size: var(--size-md);
  line-height: var(--size-md);
  padding: calc(var(--size-2xs) - var(--size-5xs));
  text-align: center;
  min-width: var(--size-md);
  border-radius: 100%;
  top: 0;
  content: counter(annotations);
  counter-increment: annotations;
}
.annotation-list--small dt {
  font-size: var(--size-md);
  line-height: var(--size-lg);
  margin-bottom: var(--size-2xs);
}

.callout {
  padding: var(--size-lg);
  border-radius: var(--size-3xs);
  margin-bottom: var(--size-3xl);
  display: flex;
  flex-flow: row wrap;
  gap: var(--size-xs);
}
.callout .system-icon {
  height: var(--size-xl);
  flex: 0 0 var(--size-xl);
}
.callout--type-danger {
  background-color: var(--color-red-100);
}
.callout--type-danger .system-icon {
  color: var(--color-red-600);
}
.callout--type-info {
  background-color: var(--color-blue-100);
}
.callout--type-info .system-icon {
  color: var(--color-blue-600);
}
.callout--type-success {
  background-color: var(--color-green-100);
}
.callout--type-success .system-icon {
  color: var(--color-green-600);
}
.callout--type-warning {
  background-color: var(--color-yellow-100);
}
.callout--type-warning .system-icon {
  color: var(--color-yellow-600);
}
.callout--type-new {
  background-color: var(--color-purple-100);
}
.callout--type-new .system-icon {
  color: var(--color-purple-600);
}
.callout--type-neutral {
  background-color: var(--color-gray-100);
}
.callout__content {
  flex: 1 1;
}
.callout__content .bulleted-list:first-child {
  margin-top: var(--size-xs);
}
.callout__content .bulleted-list:last-child {
  margin-bottom: 0;
}
.callout__content > p:last-child, .callout__content > p:only-child {
  margin-bottom: 0;
}

.color-swatches__list {
  display: flex;
  flex-flow: row wrap;
  gap: var(--size-3xl) var(--size-md);
  margin-bottom: var(--size-3xl);
}

.color-swatch {
  flex: 0 1 6rem;
  width: 0;
  color: var(--color-gray-900);
  text-decoration: none;
}
.color-swatch__preview {
  height: 0;
  margin-bottom: var(--size-2xs);
  position: relative;
  padding-top: 100%;
  border: var(--size-5xs) solid var(--color-gray-300);
}
.color-swatch__preview span {
  position: absolute;
  inset: 0;
}
.color-swatch__preview--needs-bg {
  background: conic-gradient(transparent 90deg, color-mix(in srgb, var(--color-gray-900) 20%, transparent) 90deg 180deg, transparent 180deg 270deg, color-mix(in srgb, var(--color-gray-900) 20%, transparent) 270deg);
  background-repeat: repeat;
  background-size: 2.5rem 2.5rem;
  background-position: top left;
}
.color-swatch__name {
  margin-bottom: var(--size-xs);
}
.color-swatch__button-list {
  display: flex;
  flex-flow: row wrap;
  gap: 0 var(--size-2xs);
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.dos-donts {
  display: flex;
  flex-direction: row;
  gap: var(--size-3xs);
  margin-top: var(--size-2xl);
  padding-top: var(--size-2xs);
  border-top-width: var(--size-4xs);
  border-top-style: solid;
  font-weight: 700;
}
.dos-donts--do {
  border-top-color: var(--color-green-600);
  color: var(--color-green-600);
}
.dos-donts--dont {
  border-top-color: var(--color-red-600);
  color: var(--color-red-600);
}
.dos-donts--avoid {
  border-top-color: var(--color-yellow-600);
  color: var(--color-yellow-600);
}

.figure {
  margin: 0;
}
.figure__figure {
  margin: var(--size-4xl) 0;
  padding: var(--size-3xl);
  background-color: var(--color-white);
  border: var(--size-5xs) solid var(--color-gray-200);
  border-radius: var(--size-xs);
  box-shadow: var(--box-shadow-level-3);
}
.figure__figure > p:last-child, .figure__figure > p:only-child {
  margin-bottom: 0;
}
.figure__figure:has(+ .figure__caption) {
  margin-bottom: var(--size-md);
}
.figure__caption {
  color: var(--color-gray-600);
  margin-bottom: var(--size-3xl);
  font-size: var(--size-sm);
  line-height: var(--size-lg);
  margin-left: var(--size-xs);
  margin-right: var(--size-xs);
}

.figma-embed {
  padding-top: 66.6667%;
  position: relative;
  margin-bottom: var(--size-xl);
}
.figma-embed iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: var(--size-5xs) solid var(--color-gray-300);
  border-radius: var(--size-3xs);
}

.index-card {
  display: block;
  border: var(--size-5xs) solid var(--color-gray-300);
  border-radius: var(--size-3xs);
  padding: var(--size-xl);
  box-shadow: var(--box-shadow-level-1);
  height: 100%;
}
.index-card:link, .index-card:visited, .index-card:active, .index-card:visited:active {
  text-decoration: none;
  color: var(--color-gray-900);
}
@media (hover: hover) {
  .index-card:hover, .index-card:visited:hover {
    text-decoration: none;
    color: var(--color-gray-900);
  }
  .index-card:hover {
    border-color: var(--color-gray-400);
    box-shadow: var(--box-shadow-level-2);
    transition: transform 150ms ease-out;
    transform: scale(1.0025) translateY(calc(-1 * var(--size-4xs)));
  }
}
.index-card__title {
  font-size: var(--size-lg);
  line-height: var(--size-lg);
  font-weight: 700;
  margin-bottom: var(--size-md);
}

.reference-list {
  list-style-type: none;
  padding: 0;
  margin: var(--size-3xl) 0;
  display: flex;
  flex-flow: row wrap;
  gap: var(--size-md);
}

.shadow-swatch {
  background-color: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--size-3xs);
  height: 5rem;
  font-size: var(--size-sm);
  line-height: var(--size-md);
  max-width: 16rem;
}
.shadow-swatch--level-1 {
  box-shadow: var(--box-shadow-level-1);
}
.shadow-swatch--level-2 {
  box-shadow: var(--box-shadow-level-2);
}
.shadow-swatch--level-3 {
  box-shadow: var(--box-shadow-level-3);
}
.shadow-swatch--level-4 {
  box-shadow: var(--box-shadow-level-4);
}

.space-swatches__list {
  display: flex;
  flex-direction: column;
  gap: var(--size-3xl);
  margin-top: var(--size-3xl);
}

.space-swatch {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: var(--size-3xl);
}
.space-swatch__preview {
  flex: 16 1 20rem;
}
.space-swatch__preview > div {
  box-sizing: content-box;
  height: var(--size-2xl);
  margin: 0 auto;
  background-color: var(--color-purple-100);
  border: var(--size-5xs) solid var(--color-purple-500);
  border-width: 0 var(--size-5xs) 0 var(--size-5xs);
}
.space-swatch__name {
  flex: 1 1 2rem;
  font-weight: 700;
}
.space-swatch__specs {
  flex: 2 1 8rem;
}
.space-swatch__specs--rem {
  display: inline-block;
  font-size: var(--size-sm);
  line-height: var(--size-md);
  color: var(--color-gray-700);
  vertical-align: baseline;
}
.space-swatch__button-list {
  display: flex;
  flex-flow: row wrap;
  gap: 0 var(--size-2xs);
  flex: 16 1 32rem;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.toaster {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--size-3xl);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.toaster__toast {
  border-radius: var(--size-3xs);
  background-color: var(--color-gray-900);
  color: var(--color-white);
  font-size: var(--size-sm);
  line-height: var(--size-md);
  padding: var(--size-2xs);
  transition: opacity 500ms ease-out;
}
.toaster__toast.fade-out {
  opacity: 0;
}
.toaster__toast + .toaster__toast {
  margin-top: var(--size-2xs);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  width: 100%;
}
.grid--col-gap-2xs {
  column-gap: min(8.3333%, var(--size-2xs));
}
.grid--col-gap-xs {
  column-gap: min(8.3333%, var(--size-xs));
}
.grid--col-gap-md {
  column-gap: min(8.3333%, var(--size-md));
}
.grid--col-gap-xl {
  column-gap: min(8.3333%, var(--size-xl));
}
.grid--col-gap-3xl {
  column-gap: min(8.3333%, var(--size-3xl));
}
.grid--col-gap-6xl {
  column-gap: min(8.3333%, var(--size-6xl));
}
.grid--row-gap-2xs {
  row-gap: var(--size-2xs);
}
.grid--row-gap-xs {
  row-gap: var(--size-xs);
}
.grid--row-gap-md {
  row-gap: var(--size-md);
}
.grid--row-gap-xl {
  row-gap: var(--size-xl);
}
.grid--row-gap-3xl {
  row-gap: var(--size-3xl);
}
.grid--row-gap-6xl {
  row-gap: var(--size-6xl);
}
.grid--align-items-center {
  align-items: center;
}
.grid--align-items-flex-start {
  align-items: flex-start;
}
.grid--align-items-flex-end {
  align-items: flex-end;
}
.grid--align-items-normal {
  align-items: normal;
}
.grid--align-items-stretch {
  align-items: stretch;
}

.grid__cell--col-xs-1 {
  grid-column: auto/span 1;
}
.grid__cell--col-xs-2 {
  grid-column: auto/span 2;
}
.grid__cell--col-xs-3 {
  grid-column: auto/span 3;
}
.grid__cell--col-xs-4 {
  grid-column: auto/span 4;
}
.grid__cell--col-xs-5 {
  grid-column: auto/span 5;
}
.grid__cell--col-xs-6 {
  grid-column: auto/span 6;
}
.grid__cell--col-xs-7 {
  grid-column: auto/span 7;
}
.grid__cell--col-xs-8 {
  grid-column: auto/span 8;
}
.grid__cell--col-xs-9 {
  grid-column: auto/span 9;
}
.grid__cell--col-xs-10 {
  grid-column: auto/span 10;
}
.grid__cell--col-xs-11 {
  grid-column: auto/span 11;
}
.grid__cell--col-xs-12 {
  grid-column: auto/span 12;
}
@media (min-width: 24rem) {
  .grid__cell--col-sm-1 {
    grid-column: auto/span 1;
  }
  .grid__cell--col-sm-2 {
    grid-column: auto/span 2;
  }
  .grid__cell--col-sm-3 {
    grid-column: auto/span 3;
  }
  .grid__cell--col-sm-4 {
    grid-column: auto/span 4;
  }
  .grid__cell--col-sm-5 {
    grid-column: auto/span 5;
  }
  .grid__cell--col-sm-6 {
    grid-column: auto/span 6;
  }
  .grid__cell--col-sm-7 {
    grid-column: auto/span 7;
  }
  .grid__cell--col-sm-8 {
    grid-column: auto/span 8;
  }
  .grid__cell--col-sm-9 {
    grid-column: auto/span 9;
  }
  .grid__cell--col-sm-10 {
    grid-column: auto/span 10;
  }
  .grid__cell--col-sm-11 {
    grid-column: auto/span 11;
  }
  .grid__cell--col-sm-12 {
    grid-column: auto/span 12;
  }
}
@media (min-width: 48rem) {
  .grid__cell--col-md-1 {
    grid-column: auto/span 1;
  }
  .grid__cell--col-md-2 {
    grid-column: auto/span 2;
  }
  .grid__cell--col-md-3 {
    grid-column: auto/span 3;
  }
  .grid__cell--col-md-4 {
    grid-column: auto/span 4;
  }
  .grid__cell--col-md-5 {
    grid-column: auto/span 5;
  }
  .grid__cell--col-md-6 {
    grid-column: auto/span 6;
  }
  .grid__cell--col-md-7 {
    grid-column: auto/span 7;
  }
  .grid__cell--col-md-8 {
    grid-column: auto/span 8;
  }
  .grid__cell--col-md-9 {
    grid-column: auto/span 9;
  }
  .grid__cell--col-md-10 {
    grid-column: auto/span 10;
  }
  .grid__cell--col-md-11 {
    grid-column: auto/span 11;
  }
  .grid__cell--col-md-12 {
    grid-column: auto/span 12;
  }
}
@media (min-width: 72rem) {
  .grid__cell--col-lg-1 {
    grid-column: auto/span 1;
  }
  .grid__cell--col-lg-2 {
    grid-column: auto/span 2;
  }
  .grid__cell--col-lg-3 {
    grid-column: auto/span 3;
  }
  .grid__cell--col-lg-4 {
    grid-column: auto/span 4;
  }
  .grid__cell--col-lg-5 {
    grid-column: auto/span 5;
  }
  .grid__cell--col-lg-6 {
    grid-column: auto/span 6;
  }
  .grid__cell--col-lg-7 {
    grid-column: auto/span 7;
  }
  .grid__cell--col-lg-8 {
    grid-column: auto/span 8;
  }
  .grid__cell--col-lg-9 {
    grid-column: auto/span 9;
  }
  .grid__cell--col-lg-10 {
    grid-column: auto/span 10;
  }
  .grid__cell--col-lg-11 {
    grid-column: auto/span 11;
  }
  .grid__cell--col-lg-12 {
    grid-column: auto/span 12;
  }
}
@media (width > 72rem) {
  .grid__cell--col-xl-1 {
    grid-column: auto/span 1;
  }
  .grid__cell--col-xl-2 {
    grid-column: auto/span 2;
  }
  .grid__cell--col-xl-3 {
    grid-column: auto/span 3;
  }
  .grid__cell--col-xl-4 {
    grid-column: auto/span 4;
  }
  .grid__cell--col-xl-5 {
    grid-column: auto/span 5;
  }
  .grid__cell--col-xl-6 {
    grid-column: auto/span 6;
  }
  .grid__cell--col-xl-7 {
    grid-column: auto/span 7;
  }
  .grid__cell--col-xl-8 {
    grid-column: auto/span 8;
  }
  .grid__cell--col-xl-9 {
    grid-column: auto/span 9;
  }
  .grid__cell--col-xl-10 {
    grid-column: auto/span 10;
  }
  .grid__cell--col-xl-11 {
    grid-column: auto/span 11;
  }
  .grid__cell--col-xl-12 {
    grid-column: auto/span 12;
  }
}

.row {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}
.row--gap-5xs {
  gap: var(--size-4xs);
}
.row--gap-4xs {
  gap: var(--size-4xs);
}
.row--gap-3xs {
  gap: var(--size-3xs);
}
.row--gap-2xs {
  gap: var(--size-2xs);
}
.row--gap-xs {
  gap: var(--size-xs);
}
.row--gap-md {
  gap: var(--size-md);
}
.row--gap-xl {
  gap: var(--size-xl);
}
.row--gap-3xl {
  gap: var(--size-3xl);
}
.row--gap-6xl {
  gap: var(--size-6xl);
}
.row--align-items-center {
  align-items: center;
}
.row--align-items-flex-start {
  align-items: flex-start;
}
.row--align-items-flex-end {
  align-items: flex-end;
}
.row--align-items-normal {
  align-items: normal;
}
.row--align-items-stretch {
  align-items: stretch;
}

.stack {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.stack--gap-3xs {
  gap: var(--size-3xs);
}
.stack--gap-2xs {
  gap: var(--size-2xs);
}
.stack--gap-xs {
  gap: var(--size-xs);
}
.stack--gap-md {
  gap: var(--size-md);
}
.stack--gap-xl {
  gap: var(--size-xl);
}
.stack--gap-3xl {
  gap: var(--size-3xl);
}
.stack--gap-6xl {
  gap: var(--size-6xl);
}
.stack--align-items-center {
  align-items: center;
}
.stack--align-items-flex-start {
  align-items: flex-start;
}
.stack--align-items-flex-end {
  align-items: flex-end;
}
.stack--align-items-normal {
  align-items: normal;
}
.stack--align-items-stretch {
  align-items: stretch;
}

/*# sourceMappingURL=main.css.map */