@import url("/fonts/segment/fonts.css");
@import url("/fonts/outbound/fonts.css");
@import url(https://fonts.bunny.net/css?family=epilogue:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i);
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

ul {
  list-style: none;
}

button,
input,
select,
textarea {
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
  background-color: transparent;
}

img,
video {
  height: auto;
  max-width: 100%;
}

iframe {
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}
td:not([align]),
th:not([align]) {
  text-align: inherit;
}

input::-webkit-date-and-time-value {
  text-align: left;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/**
 * Do not edit directly, this file was auto-generated.
 */
:root {
  --ref-hue-yellow: 60;
  --ref-hue-pink: 314;
  --ref-hue-gray: 274;
  --ref-hue-green: 122;
  --ref-hue-purple: 283;
  --ref-hue-red: 360;
  --ref-sat-yellow: 100%;
  --ref-sat-pink: 44%;
  --ref-sat-gray: 3%;
  --ref-sat-green: 69%;
  --ref-sat-purple: 52%;
  --ref-sat-red: 78%;
  --ref-lum-yellow: 93%;
  --ref-lum-pink: 78%;
  --ref-lum-gray: 45%;
  --ref-lum-green: 49%;
  --ref-lum-purple: 34%;
  --ref-lum-red: 65%;
  --ref-gray-0: #000000;
  --ref-gray-5: #0d0d0d;
  --ref-gray-10: #1a1a1a;
  --ref-gray-15: #262626;
  --ref-gray-20: #333333;
  --ref-gray-25: #404040;
  --ref-gray-30: #4d4d4d;
  --ref-gray-35: #595959;
  --ref-gray-40: #666666;
  --ref-gray-45: #737373;
  --ref-gray-50: #808080;
  --ref-gray-55: #8c8c8c;
  --ref-gray-60: #999999;
  --ref-gray-65: #a6a6a6;
  --ref-gray-70: #b3b3b3;
  --ref-gray-75: #bfbfbf;
  --ref-gray-80: #cccccc;
  --ref-gray-85: #d9d9d9;
  --ref-gray-90: #e6e6e6;
  --ref-gray-95: #f2f2f2;
  --ref-gray-100: #ffffff;
  --ref-font-family-base: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ref-font-line-normal: 1.5;
  --ref-font-line-expanded: 2;
  --ref-font-line-wall: 3;
  --ref-font-size-base: 12pt;
  --ref-font-size-largest: 3rem;
  --ref-font-size-larger: 2rem;
  --ref-font-size-large: 1.5rem;
  --ref-font-size-largelah: 1.25rem;
  --ref-font-weight-thin: 100;
  --ref-font-weight-extra-light: 200;
  --ref-font-weight-light: 300;
  --ref-font-weight-normal: 400;
  --ref-font-weight-medium: 500;
  --ref-font-weight-demibold: 600;
  --ref-font-weight-bold: 700;
  --ref-font-weight-extra-bold: 800;
  --ref-font-weight-black: 900;
  --ref-font-zoom-normal: 1;
  --ref-font-zoom-larger: 1.5;
  --ref-font-zoom-largest: 2;
  --ref-duration-0: 0ms;
  --ref-duration-1: 50ms;
  --ref-duration-2: 100ms;
  --ref-duration-3: 150ms;
  --ref-duration-4: 200ms;
  --ref-duration-5: 250ms;
  --ref-duration-6: 300ms;
  --ref-duration-7: 350ms;
  --ref-measure-fixed-0: 0px;
  --ref-measure-fixed-1: 4px;
  --ref-measure-fixed-2: 8px;
  --ref-measure-fixed-3: 12px;
  --ref-measure-fixed-4: 16px;
  --ref-measure-fixed-5: 20px;
  --ref-measure-fixed-6: 24px;
  --ref-measure-fixed-7: 28px;
  --ref-measure-fixed-8: 32px;
  --ref-measure-fixed-9: 36px;
  --ref-measure-fixed-10: 40px;
  --ref-measure-fixed-11: 44px;
  --ref-measure-fixed-12: 48px;
  --ref-measure-fixed-13: 52px;
  --ref-measure-fixed-14: 56px;
  --ref-measure-fixed-15: 60px;
  --ref-measure-fixed-16: 64px;
  --ref-measure-fixed-17: 68px;
  --ref-measure-fixed-18: 72px;
  --ref-measure-fixed-19: 76px;
  --ref-measure-fixed-20: 80px;
  --ref-measure-relative-0: 0rem;
  --ref-measure-relative-1: 0.25rem;
  --ref-measure-relative-2: 0.5rem;
  --ref-measure-relative-3: 0.75rem;
  --ref-measure-relative-4: 1rem;
  --ref-measure-relative-5: 1.25rem;
  --ref-measure-relative-6: 1.5rem;
  --ref-measure-relative-7: 1.75rem;
  --ref-measure-relative-8: 2rem;
  --ref-measure-relative-9: 2.25rem;
  --ref-measure-relative-10: 2.5rem;
  --ref-measure-relative-11: 2.75rem;
  --ref-measure-relative-12: 3rem;
  --ref-measure-relative-13: 3.25rem;
  --ref-measure-relative-14: 3.5rem;
  --ref-measure-relative-15: 3.75rem;
  --ref-measure-relative-16: 4rem;
  --ref-measure-relative-17: 4.25rem;
  --ref-measure-relative-18: 4.5rem;
  --ref-measure-relative-19: 4.75rem;
  --ref-measure-relative-20: 5rem;
  --ref-palette-yellow-5: hsl(var(--ref-hue-yellow), var(--ref-sat-yellow), 5%, 1);
  --ref-palette-yellow-10: hsl(var(--ref-hue-yellow), var(--ref-sat-yellow), 10%, 1);
  --ref-palette-yellow-15: hsl(var(--ref-hue-yellow), var(--ref-sat-yellow), 15%, 1);
  --ref-palette-yellow-20: hsl(var(--ref-hue-yellow), var(--ref-sat-yellow), 20%, 1);
  --ref-palette-yellow-25: hsl(var(--ref-hue-yellow), var(--ref-sat-yellow), 25%, 1);
  --ref-palette-yellow-30: hsl(var(--ref-hue-yellow), var(--ref-sat-yellow), 30%, 1);
  --ref-palette-yellow-35: hsl(var(--ref-hue-yellow), var(--ref-sat-yellow), 35%, 1);
  --ref-palette-yellow-40: hsl(var(--ref-hue-yellow), var(--ref-sat-yellow), 40%, 1);
  --ref-palette-yellow-45: hsl(var(--ref-hue-yellow), var(--ref-sat-yellow), 45%, 1);
  --ref-palette-yellow-50: hsl(var(--ref-hue-yellow), var(--ref-sat-yellow), 50%, 1);
  --ref-palette-yellow-55: hsl(var(--ref-hue-yellow), var(--ref-sat-yellow), 55%, 1);
  --ref-palette-yellow-60: hsl(var(--ref-hue-yellow), var(--ref-sat-yellow), 60%, 1);
  --ref-palette-yellow-65: hsl(var(--ref-hue-yellow), var(--ref-sat-yellow), 65%, 1);
  --ref-palette-yellow-70: hsl(var(--ref-hue-yellow), var(--ref-sat-yellow), 70%, 1);
  --ref-palette-yellow-75: hsl(var(--ref-hue-yellow), var(--ref-sat-yellow), 75%, 1);
  --ref-palette-yellow-80: hsl(var(--ref-hue-yellow), var(--ref-sat-yellow), 80%, 1);
  --ref-palette-yellow-85: hsl(var(--ref-hue-yellow), var(--ref-sat-yellow), 85%, 1);
  --ref-palette-yellow-90: hsl(var(--ref-hue-yellow), var(--ref-sat-yellow), 90%, 1);
  --ref-palette-yellow-95: hsl(var(--ref-hue-yellow), var(--ref-sat-yellow), 95%, 1);
  --ref-palette-yellow-100: hsl(var(--ref-hue-yellow), var(--ref-sat-yellow), 100%, 1);
  --ref-palette-pink-5: hsl(var(--ref-hue-pink), var(--ref-sat-pink), 5%, 1);
  --ref-palette-pink-10: hsl(var(--ref-hue-pink), var(--ref-sat-pink), 10%, 1);
  --ref-palette-pink-15: hsl(var(--ref-hue-pink), var(--ref-sat-pink), 15%, 1);
  --ref-palette-pink-20: hsl(var(--ref-hue-pink), var(--ref-sat-pink), 20%, 1);
  --ref-palette-pink-25: hsl(var(--ref-hue-pink), var(--ref-sat-pink), 25%, 1);
  --ref-palette-pink-30: hsl(var(--ref-hue-pink), var(--ref-sat-pink), 30%, 1);
  --ref-palette-pink-35: hsl(var(--ref-hue-pink), var(--ref-sat-pink), 35%, 1);
  --ref-palette-pink-40: hsl(var(--ref-hue-pink), var(--ref-sat-pink), 40%, 1);
  --ref-palette-pink-45: hsl(var(--ref-hue-pink), var(--ref-sat-pink), 45%, 1);
  --ref-palette-pink-50: hsl(var(--ref-hue-pink), var(--ref-sat-pink), 50%, 1);
  --ref-palette-pink-55: hsl(var(--ref-hue-pink), var(--ref-sat-pink), 55%, 1);
  --ref-palette-pink-60: hsl(var(--ref-hue-pink), var(--ref-sat-pink), 60%, 1);
  --ref-palette-pink-65: hsl(var(--ref-hue-pink), var(--ref-sat-pink), 65%, 1);
  --ref-palette-pink-70: hsl(var(--ref-hue-pink), var(--ref-sat-pink), 70%, 1);
  --ref-palette-pink-75: hsl(var(--ref-hue-pink), var(--ref-sat-pink), 75%, 1);
  --ref-palette-pink-80: hsl(var(--ref-hue-pink), var(--ref-sat-pink), 80%, 1);
  --ref-palette-pink-85: hsl(var(--ref-hue-pink), var(--ref-sat-pink), 85%, 1);
  --ref-palette-pink-90: hsl(var(--ref-hue-pink), var(--ref-sat-pink), 90%, 1);
  --ref-palette-pink-95: hsl(var(--ref-hue-pink), var(--ref-sat-pink), 95%, 1);
  --ref-palette-pink-100: hsl(var(--ref-hue-pink), var(--ref-sat-pink), 100%, 1);
  --ref-palette-gray-5: hsl(var(--ref-hue-gray), var(--ref-sat-gray), 5%, 1);
  --ref-palette-gray-10: hsl(var(--ref-hue-gray), var(--ref-sat-gray), 10%, 1);
  --ref-palette-gray-15: hsl(var(--ref-hue-gray), var(--ref-sat-gray), 15%, 1);
  --ref-palette-gray-20: hsl(var(--ref-hue-gray), var(--ref-sat-gray), 20%, 1);
  --ref-palette-gray-25: hsl(var(--ref-hue-gray), var(--ref-sat-gray), 25%, 1);
  --ref-palette-gray-30: hsl(var(--ref-hue-gray), var(--ref-sat-gray), 30%, 1);
  --ref-palette-gray-35: hsl(var(--ref-hue-gray), var(--ref-sat-gray), 35%, 1);
  --ref-palette-gray-40: hsl(var(--ref-hue-gray), var(--ref-sat-gray), 40%, 1);
  --ref-palette-gray-45: hsl(var(--ref-hue-gray), var(--ref-sat-gray), 45%, 1);
  --ref-palette-gray-50: hsl(var(--ref-hue-gray), var(--ref-sat-gray), 50%, 1);
  --ref-palette-gray-55: hsl(var(--ref-hue-gray), var(--ref-sat-gray), 55%, 1);
  --ref-palette-gray-60: hsl(var(--ref-hue-gray), var(--ref-sat-gray), 60%, 1);
  --ref-palette-gray-65: hsl(var(--ref-hue-gray), var(--ref-sat-gray), 65%, 1);
  --ref-palette-gray-70: hsl(var(--ref-hue-gray), var(--ref-sat-gray), 70%, 1);
  --ref-palette-gray-75: hsl(var(--ref-hue-gray), var(--ref-sat-gray), 75%, 1);
  --ref-palette-gray-80: hsl(var(--ref-hue-gray), var(--ref-sat-gray), 80%, 1);
  --ref-palette-gray-85: hsl(var(--ref-hue-gray), var(--ref-sat-gray), 85%, 1);
  --ref-palette-gray-90: hsl(var(--ref-hue-gray), var(--ref-sat-gray), 90%, 1);
  --ref-palette-gray-95: hsl(var(--ref-hue-gray), var(--ref-sat-gray), 95%, 1);
  --ref-palette-gray-100: hsl(var(--ref-hue-gray), var(--ref-sat-gray), 100%, 1);
  --ref-palette-green-5: hsl(var(--ref-hue-green), var(--ref-sat-green), 5%, 1);
  --ref-palette-green-10: hsl(var(--ref-hue-green), var(--ref-sat-green), 10%, 1);
  --ref-palette-green-15: hsl(var(--ref-hue-green), var(--ref-sat-green), 15%, 1);
  --ref-palette-green-20: hsl(var(--ref-hue-green), var(--ref-sat-green), 20%, 1);
  --ref-palette-green-25: hsl(var(--ref-hue-green), var(--ref-sat-green), 25%, 1);
  --ref-palette-green-30: hsl(var(--ref-hue-green), var(--ref-sat-green), 30%, 1);
  --ref-palette-green-35: hsl(var(--ref-hue-green), var(--ref-sat-green), 35%, 1);
  --ref-palette-green-40: hsl(var(--ref-hue-green), var(--ref-sat-green), 40%, 1);
  --ref-palette-green-45: hsl(var(--ref-hue-green), var(--ref-sat-green), 45%, 1);
  --ref-palette-green-50: hsl(var(--ref-hue-green), var(--ref-sat-green), 50%, 1);
  --ref-palette-green-55: hsl(var(--ref-hue-green), var(--ref-sat-green), 55%, 1);
  --ref-palette-green-60: hsl(var(--ref-hue-green), var(--ref-sat-green), 60%, 1);
  --ref-palette-green-65: hsl(var(--ref-hue-green), var(--ref-sat-green), 65%, 1);
  --ref-palette-green-70: hsl(var(--ref-hue-green), var(--ref-sat-green), 70%, 1);
  --ref-palette-green-75: hsl(var(--ref-hue-green), var(--ref-sat-green), 75%, 1);
  --ref-palette-green-80: hsl(var(--ref-hue-green), var(--ref-sat-green), 80%, 1);
  --ref-palette-green-85: hsl(var(--ref-hue-green), var(--ref-sat-green), 85%, 1);
  --ref-palette-green-90: hsl(var(--ref-hue-green), var(--ref-sat-green), 90%, 1);
  --ref-palette-green-95: hsl(var(--ref-hue-green), var(--ref-sat-green), 95%, 1);
  --ref-palette-green-100: hsl(var(--ref-hue-green), var(--ref-sat-green), 100%, 1);
  --ref-palette-purple-5: hsl(var(--ref-hue-purple), var(--ref-sat-purple), 5%, 1);
  --ref-palette-purple-10: hsl(var(--ref-hue-purple), var(--ref-sat-purple), 10%, 1);
  --ref-palette-purple-15: hsl(var(--ref-hue-purple), var(--ref-sat-purple), 15%, 1);
  --ref-palette-purple-20: hsl(var(--ref-hue-purple), var(--ref-sat-purple), 20%, 1);
  --ref-palette-purple-25: hsl(var(--ref-hue-purple), var(--ref-sat-purple), 25%, 1);
  --ref-palette-purple-30: hsl(var(--ref-hue-purple), var(--ref-sat-purple), 30%, 1);
  --ref-palette-purple-35: hsl(var(--ref-hue-purple), var(--ref-sat-purple), 35%, 1);
  --ref-palette-purple-40: hsl(var(--ref-hue-purple), var(--ref-sat-purple), 40%, 1);
  --ref-palette-purple-45: hsl(var(--ref-hue-purple), var(--ref-sat-purple), 45%, 1);
  --ref-palette-purple-50: hsl(var(--ref-hue-purple), var(--ref-sat-purple), 50%, 1);
  --ref-palette-purple-55: hsl(var(--ref-hue-purple), var(--ref-sat-purple), 55%, 1);
  --ref-palette-purple-60: hsl(var(--ref-hue-purple), var(--ref-sat-purple), 60%, 1);
  --ref-palette-purple-65: hsl(var(--ref-hue-purple), var(--ref-sat-purple), 65%, 1);
  --ref-palette-purple-70: hsl(var(--ref-hue-purple), var(--ref-sat-purple), 70%, 1);
  --ref-palette-purple-75: hsl(var(--ref-hue-purple), var(--ref-sat-purple), 75%, 1);
  --ref-palette-purple-80: hsl(var(--ref-hue-purple), var(--ref-sat-purple), 80%, 1);
  --ref-palette-purple-85: hsl(var(--ref-hue-purple), var(--ref-sat-purple), 85%, 1);
  --ref-palette-purple-90: hsl(var(--ref-hue-purple), var(--ref-sat-purple), 90%, 1);
  --ref-palette-purple-95: hsl(var(--ref-hue-purple), var(--ref-sat-purple), 95%, 1);
  --ref-palette-purple-100: hsl(var(--ref-hue-purple), var(--ref-sat-purple), 100%, 1);
  --ref-palette-red-5: hsl(var(--ref-hue-red), var(--ref-sat-red), 5%, 1);
  --ref-palette-red-10: hsl(var(--ref-hue-red), var(--ref-sat-red), 10%, 1);
  --ref-palette-red-15: hsl(var(--ref-hue-red), var(--ref-sat-red), 15%, 1);
  --ref-palette-red-20: hsl(var(--ref-hue-red), var(--ref-sat-red), 20%, 1);
  --ref-palette-red-25: hsl(var(--ref-hue-red), var(--ref-sat-red), 25%, 1);
  --ref-palette-red-30: hsl(var(--ref-hue-red), var(--ref-sat-red), 30%, 1);
  --ref-palette-red-35: hsl(var(--ref-hue-red), var(--ref-sat-red), 35%, 1);
  --ref-palette-red-40: hsl(var(--ref-hue-red), var(--ref-sat-red), 40%, 1);
  --ref-palette-red-45: hsl(var(--ref-hue-red), var(--ref-sat-red), 45%, 1);
  --ref-palette-red-50: hsl(var(--ref-hue-red), var(--ref-sat-red), 50%, 1);
  --ref-palette-red-55: hsl(var(--ref-hue-red), var(--ref-sat-red), 55%, 1);
  --ref-palette-red-60: hsl(var(--ref-hue-red), var(--ref-sat-red), 60%, 1);
  --ref-palette-red-65: hsl(var(--ref-hue-red), var(--ref-sat-red), 65%, 1);
  --ref-palette-red-70: hsl(var(--ref-hue-red), var(--ref-sat-red), 70%, 1);
  --ref-palette-red-75: hsl(var(--ref-hue-red), var(--ref-sat-red), 75%, 1);
  --ref-palette-red-80: hsl(var(--ref-hue-red), var(--ref-sat-red), 80%, 1);
  --ref-palette-red-85: hsl(var(--ref-hue-red), var(--ref-sat-red), 85%, 1);
  --ref-palette-red-90: hsl(var(--ref-hue-red), var(--ref-sat-red), 90%, 1);
  --ref-palette-red-95: hsl(var(--ref-hue-red), var(--ref-sat-red), 95%, 1);
  --ref-palette-red-100: hsl(var(--ref-hue-red), var(--ref-sat-red), 100%, 1);
  --ref-color-yellow: hsl(var(--ref-hue-yellow), var(--ref-sat-yellow), var(--ref-lum-yellow), 1);
  --ref-color-pink: hsl(var(--ref-hue-pink), var(--ref-sat-pink), var(--ref-lum-pink), 1);
  --ref-color-gray: hsl(var(--ref-hue-gray), var(--ref-sat-gray), var(--ref-lum-gray), 1);
  --ref-color-green: hsl(var(--ref-hue-green), var(--ref-sat-green), var(--ref-lum-green), 1);
  --ref-color-purple: hsl(var(--ref-hue-purple), var(--ref-sat-purple), var(--ref-lum-purple), 1);
  --ref-color-red: hsl(var(--ref-hue-red), var(--ref-sat-red), var(--ref-lum-red), 1);
}

/**
 * Do not edit directly, this file was auto-generated.
 */
body {
  --sys-theme-light-background-color: var(--ref-gray-90);
  --sys-theme-light-background-overlay: var(--ref-gray-0);
  --sys-theme-light-pink-light-overlay: var(--ref-gray-0);
  --sys-theme-light-pink-light-active-overlay: var(--ref-gray-0);
  --sys-theme-light-pink-base-overlay: var(--ref-gray-0);
  --sys-theme-light-pink-base-active-overlay: var(--ref-gray-0);
  --sys-theme-light-pink-dark-overlay: var(--ref-gray-100);
  --sys-theme-light-pink-dark-active-overlay: var(--ref-gray-100);
  --sys-theme-light-purple-light-overlay: var(--ref-gray-0);
  --sys-theme-light-purple-light-active-overlay: var(--ref-gray-0);
  --sys-theme-light-purple-base-overlay: var(--ref-gray-0);
  --sys-theme-light-purple-base-active-overlay: var(--ref-gray-0);
  --sys-theme-light-purple-dark-overlay: var(--ref-gray-100);
  --sys-theme-light-purple-dark-active-overlay: var(--ref-gray-100);
  --sys-theme-light-yellow-light-overlay: var(--ref-gray-0);
  --sys-theme-light-yellow-light-active-overlay: var(--ref-gray-0);
  --sys-theme-light-yellow-base-overlay: var(--ref-gray-0);
  --sys-theme-light-yellow-base-active-overlay: var(--ref-gray-0);
  --sys-theme-light-yellow-dark-overlay: var(--ref-gray-100);
  --sys-theme-light-yellow-dark-active-overlay: var(--ref-gray-100);
  --sys-theme-light-primary-light-overlay: var(--ref-gray-0);
  --sys-theme-light-primary-light-active-overlay: var(--ref-gray-0);
  --sys-theme-light-primary-base-overlay: var(--ref-gray-0);
  --sys-theme-light-primary-base-active-overlay: var(--ref-gray-0);
  --sys-theme-light-primary-dark-overlay: var(--ref-gray-100);
  --sys-theme-light-primary-dark-active-overlay: var(--ref-gray-100);
  --sys-theme-light-secondary-light-overlay: var(--ref-gray-0);
  --sys-theme-light-secondary-light-active-overlay: var(--ref-gray-0);
  --sys-theme-light-secondary-base-overlay: var(--ref-gray-0);
  --sys-theme-light-secondary-base-active-overlay: var(--ref-gray-0);
  --sys-theme-light-secondary-dark-overlay: var(--ref-gray-100);
  --sys-theme-light-secondary-dark-active-overlay: var(--ref-gray-100);
  --sys-theme-light-success-light-overlay: var(--ref-gray-0);
  --sys-theme-light-success-light-active-overlay: var(--ref-gray-0);
  --sys-theme-light-success-base-overlay: var(--ref-gray-0);
  --sys-theme-light-success-base-active-overlay: var(--ref-gray-0);
  --sys-theme-light-success-dark-overlay: var(--ref-gray-100);
  --sys-theme-light-success-dark-active-overlay: var(--ref-gray-100);
  --sys-theme-light-danger-light-overlay: var(--ref-gray-0);
  --sys-theme-light-danger-light-active-overlay: var(--ref-gray-0);
  --sys-theme-light-danger-base-overlay: var(--ref-gray-0);
  --sys-theme-light-danger-base-active-overlay: var(--ref-gray-0);
  --sys-theme-light-danger-dark-overlay: var(--ref-gray-100);
  --sys-theme-light-danger-dark-active-overlay: var(--ref-gray-100);
  --sys-theme-dark-background-color: var(--ref-gray-5);
  --sys-theme-dark-background-overlay: var(--ref-gray-100);
  --sys-theme-dark-pink-light-overlay: var(--ref-gray-0);
  --sys-theme-dark-pink-light-active-overlay: var(--ref-gray-0);
  --sys-theme-dark-pink-base-overlay: var(--ref-gray-0);
  --sys-theme-dark-pink-base-active-overlay: var(--ref-gray-100);
  --sys-theme-dark-pink-dark-overlay: var(--ref-gray-100);
  --sys-theme-dark-pink-dark-active-overlay: var(--ref-gray-100);
  --sys-theme-dark-purple-light-overlay: var(--ref-gray-0);
  --sys-theme-dark-purple-light-active-overlay: var(--ref-gray-0);
  --sys-theme-dark-purple-base-overlay: var(--ref-gray-100);
  --sys-theme-dark-purple-base-active-overlay: var(--ref-gray-100);
  --sys-theme-dark-purple-dark-overlay: var(--ref-gray-100);
  --sys-theme-dark-purple-dark-active-overlay: var(--ref-gray-100);
  --sys-theme-dark-yellow-light-overlay: var(--ref-gray-0);
  --sys-theme-dark-yellow-light-active-overlay: var(--ref-gray-0);
  --sys-theme-dark-yellow-base-overlay: var(--ref-gray-0);
  --sys-theme-dark-yellow-base-active-overlay: var(--ref-gray-100);
  --sys-theme-dark-yellow-dark-overlay: var(--ref-gray-100);
  --sys-theme-dark-yellow-dark-active-overlay: var(--ref-gray-100);
  --sys-theme-dark-primary-light-overlay: var(--ref-gray-0);
  --sys-theme-dark-primary-light-active-overlay: var(--ref-gray-0);
  --sys-theme-dark-primary-base-overlay: var(--ref-gray-0);
  --sys-theme-dark-primary-base-active-overlay: var(--ref-gray-0);
  --sys-theme-dark-primary-dark-overlay: var(--ref-gray-100);
  --sys-theme-dark-primary-dark-active-overlay: var(--ref-gray-100);
  --sys-theme-dark-secondary-light-overlay: var(--ref-gray-0);
  --sys-theme-dark-secondary-light-active-overlay: var(--ref-gray-0);
  --sys-theme-dark-secondary-base-overlay: var(--ref-gray-100);
  --sys-theme-dark-secondary-base-active-overlay: var(--ref-gray-100);
  --sys-theme-dark-secondary-dark-overlay: var(--ref-gray-100);
  --sys-theme-dark-secondary-dark-active-overlay: var(--ref-gray-100);
  --sys-theme-dark-success-light-overlay: var(--ref-gray-0);
  --sys-theme-dark-success-light-active-overlay: var(--ref-gray-100);
  --sys-theme-dark-success-base-overlay: var(--ref-gray-100);
  --sys-theme-dark-success-base-active-overlay: var(--ref-gray-100);
  --sys-theme-dark-success-dark-overlay: var(--ref-gray-100);
  --sys-theme-dark-success-dark-active-overlay: var(--ref-gray-100);
  --sys-theme-dark-danger-light-overlay: var(--ref-gray-0);
  --sys-theme-dark-danger-light-active-overlay: var(--ref-gray-0);
  --sys-theme-dark-danger-base-overlay: var(--ref-gray-0);
  --sys-theme-dark-danger-base-active-overlay: var(--ref-gray-0);
  --sys-theme-dark-danger-dark-overlay: var(--ref-gray-100);
  --sys-theme-dark-danger-dark-active-overlay: var(--ref-gray-100);
  --sys-theme-light-pink-light-color: var(--ref-palette-pink-95);
  --sys-theme-light-pink-light-active-color: var(--ref-palette-pink-90);
  --sys-theme-light-pink-base-color: var(--ref-palette-pink-80);
  --sys-theme-light-pink-base-active-color: var(--ref-palette-pink-75);
  --sys-theme-light-pink-dark-color: var(--ref-palette-pink-65);
  --sys-theme-light-pink-dark-active-color: var(--ref-palette-pink-60);
  --sys-theme-light-purple-light-color: var(--ref-palette-purple-80);
  --sys-theme-light-purple-light-active-color: var(--ref-palette-purple-75);
  --sys-theme-light-purple-base-color: var(--ref-palette-purple-60);
  --sys-theme-light-purple-base-active-color: var(--ref-palette-purple-55);
  --sys-theme-light-purple-dark-color: var(--ref-palette-purple-40);
  --sys-theme-light-purple-dark-active-color: var(--ref-palette-purple-35);
  --sys-theme-light-yellow-light-color: var(--ref-palette-yellow-95);
  --sys-theme-light-yellow-light-active-color: var(--ref-palette-yellow-90);
  --sys-theme-light-yellow-base-color: var(--ref-palette-yellow-80);
  --sys-theme-light-yellow-base-active-color: var(--ref-palette-yellow-75);
  --sys-theme-light-yellow-dark-color: var(--ref-palette-yellow-65);
  --sys-theme-light-yellow-dark-active-color: var(--ref-palette-yellow-60);
  --sys-theme-light-primary-light-color: var(--ref-palette-pink-95);
  --sys-theme-light-primary-light-active-color: var(--ref-palette-pink-90);
  --sys-theme-light-primary-base-color: var(--ref-palette-pink-80);
  --sys-theme-light-primary-base-active-color: var(--ref-palette-pink-75);
  --sys-theme-light-primary-dark-color: var(--ref-palette-pink-65);
  --sys-theme-light-primary-dark-active-color: var(--ref-palette-pink-60);
  --sys-theme-light-secondary-light-color: var(--ref-palette-purple-80);
  --sys-theme-light-secondary-light-active-color: var(--ref-palette-purple-75);
  --sys-theme-light-secondary-base-color: var(--ref-palette-purple-60);
  --sys-theme-light-secondary-base-active-color: var(--ref-palette-purple-55);
  --sys-theme-light-secondary-dark-color: var(--ref-palette-purple-40);
  --sys-theme-light-secondary-dark-active-color: var(--ref-palette-purple-35);
  --sys-theme-light-success-light-color: var(--ref-palette-green-60);
  --sys-theme-light-success-light-active-color: var(--ref-palette-green-55);
  --sys-theme-light-success-base-color: var(--ref-palette-green-50);
  --sys-theme-light-success-base-active-color: var(--ref-palette-green-45);
  --sys-theme-light-success-dark-color: var(--ref-palette-green-40);
  --sys-theme-light-success-dark-active-color: var(--ref-palette-green-35);
  --sys-theme-light-danger-light-color: var(--ref-palette-red-80);
  --sys-theme-light-danger-light-active-color: var(--ref-palette-red-75);
  --sys-theme-light-danger-base-color: var(--ref-palette-red-70);
  --sys-theme-light-danger-base-active-color: var(--ref-palette-red-65);
  --sys-theme-light-danger-dark-color: var(--ref-palette-red-60);
  --sys-theme-light-danger-dark-active-color: var(--ref-palette-red-55);
  --sys-theme-light-disabled-color: var(--ref-palette-gray-90);
  --sys-theme-light-disabled-overlay: var(--ref-palette-gray-30);
  --sys-theme-dark-pink-light-color: var(--ref-palette-pink-55);
  --sys-theme-dark-pink-light-active-color: var(--ref-palette-pink-50);
  --sys-theme-dark-pink-base-color: var(--ref-palette-pink-40);
  --sys-theme-dark-pink-base-active-color: var(--ref-palette-pink-35);
  --sys-theme-dark-pink-dark-color: var(--ref-palette-pink-25);
  --sys-theme-dark-pink-dark-active-color: var(--ref-palette-pink-20);
  --sys-theme-dark-purple-light-color: var(--ref-palette-purple-50);
  --sys-theme-dark-purple-light-active-color: var(--ref-palette-purple-45);
  --sys-theme-dark-purple-base-color: var(--ref-palette-purple-30);
  --sys-theme-dark-purple-base-active-color: var(--ref-palette-purple-25);
  --sys-theme-dark-purple-dark-color: var(--ref-palette-purple-10);
  --sys-theme-dark-purple-dark-active-color: var(--ref-palette-purple-5);
  --sys-theme-dark-yellow-light-color: var(--ref-palette-yellow-55);
  --sys-theme-dark-yellow-light-active-color: var(--ref-palette-yellow-50);
  --sys-theme-dark-yellow-base-color: var(--ref-palette-yellow-40);
  --sys-theme-dark-yellow-base-active-color: var(--ref-palette-yellow-35);
  --sys-theme-dark-yellow-dark-color: var(--ref-palette-yellow-25);
  --sys-theme-dark-yellow-dark-active-color: var(--ref-palette-yellow-20);
  --sys-theme-dark-primary-light-color: var(--ref-palette-pink-95);
  --sys-theme-dark-primary-light-active-color: var(--ref-palette-pink-90);
  --sys-theme-dark-primary-base-color: var(--ref-palette-pink-80);
  --sys-theme-dark-primary-base-active-color: var(--ref-palette-pink-75);
  --sys-theme-dark-primary-dark-color: var(--ref-palette-pink-65);
  --sys-theme-dark-primary-dark-active-color: var(--ref-palette-pink-60);
  --sys-theme-dark-secondary-light-color: var(--ref-palette-purple-50);
  --sys-theme-dark-secondary-light-active-color: var(--ref-palette-purple-45);
  --sys-theme-dark-secondary-base-color: var(--ref-palette-purple-30);
  --sys-theme-dark-secondary-base-active-color: var(--ref-palette-purple-25);
  --sys-theme-dark-secondary-dark-color: var(--ref-palette-purple-10);
  --sys-theme-dark-secondary-dark-active-color: var(--ref-palette-purple-5);
  --sys-theme-dark-success-light-color: var(--ref-palette-green-40);
  --sys-theme-dark-success-light-active-color: var(--ref-palette-green-35);
  --sys-theme-dark-success-base-color: var(--ref-palette-green-30);
  --sys-theme-dark-success-base-active-color: var(--ref-palette-green-25);
  --sys-theme-dark-success-dark-color: var(--ref-palette-green-20);
  --sys-theme-dark-success-dark-active-color: var(--ref-palette-green-15);
  --sys-theme-dark-danger-light-color: var(--ref-palette-red-60);
  --sys-theme-dark-danger-light-active-color: var(--ref-palette-red-55);
  --sys-theme-dark-danger-base-color: var(--ref-palette-red-50);
  --sys-theme-dark-danger-base-active-color: var(--ref-palette-red-45);
  --sys-theme-dark-danger-dark-color: var(--ref-palette-red-40);
  --sys-theme-dark-danger-dark-active-color: var(--ref-palette-red-35);
  --sys-theme-dark-disabled-color: var(--ref-palette-gray-30);
  --sys-theme-dark-disabled-overlay: var(--ref-palette-gray-90);
}

/**
 * Do not edit directly, this file was auto-generated.
 */
body {
  --sys-space-block: var(--ref-measure-relative-4);
  --sys-space-form-field-inner-bottom: var(--ref-measure-fixed-0);
  --sys-space-form-field-inner-left: var(--ref-measure-fixed-4);
  --sys-space-form-field-inner-right: var(--ref-measure-fixed-4);
  --sys-space-form-field-inner-top: var(--ref-measure-fixed-0);
  --sys-space-form-field-outer-bottom: var(--ref-measure-fixed-6);
  --sys-space-form-field-outer-left: var(--ref-measure-fixed-0);
  --sys-space-form-field-outer-right: var(--ref-measure-fixed-0);
  --sys-space-form-field-outer-top: var(--ref-measure-fixed-6);
  --sys-corner-extra-small: var(--ref-measure-fixed-3);
  --sys-corner-small: var(--ref-measure-fixed-3);
  --sys-corner-medium: var(--ref-measure-fixed-4);
  --sys-corner-large: var(--ref-measure-fixed-7);
  --sys-corner-extra-large: var(--ref-measure-fixed-7);
  --sys-corner-tiny: var(--ref-measure-fixed-1);
  --sys-corner-active-extra-small: var(--ref-measure-fixed-2);
  --sys-corner-active-small: var(--ref-measure-fixed-2);
  --sys-corner-active-medium: var(--ref-measure-fixed-3);
  --sys-corner-active-large: var(--ref-measure-fixed-4);
  --sys-corner-active-extra-large: var(--ref-measure-fixed-4);
  --sys-corner-active-tiny: var(--ref-measure-fixed-1);
}

/**
 * Do not edit directly, this file was auto-generated.
 */
body {
  --sys-typography-base-style: normal;
  --sys-headers-1-decoration: none;
  --sys-headers-1-line-height: 1.1;
  --sys-headers-1-style: normal;
  --sys-headers-2-decoration: none;
  --sys-headers-2-line-height: 1.1;
  --sys-headers-2-style: normal;
  --sys-headers-3-decoration: none;
  --sys-headers-3-line-height: 1.1;
  --sys-headers-3-style: normal;
  --sys-headers-4-decoration: none;
  --sys-headers-4-line-height: 1.1;
  --sys-headers-4-style: italic;
  --sys-headers-5-decoration: none;
  --sys-headers-5-line-height: 1.1;
  --sys-headers-5-style: normal;
  --sys-headers-6-decoration: underline;
  --sys-headers-6-line-height: 1.1;
  --sys-headers-6-style: italic;
  --sys-typography-base-line-height: var(--ref-font-line-normal);
  --sys-typography-base-size: var(--ref-font-size-base);
  --sys-typography-base-weight: var(--ref-font-weight-normal);
  --sys-headers-1-size: var(--ref-font-size-largest);
  --sys-headers-1-weight: var(--ref-font-weight-thin);
  --sys-headers-2-size: var(--ref-font-size-larger);
  --sys-headers-2-weight: var(--ref-font-weight-extra-light);
  --sys-headers-3-size: var(--ref-font-size-large);
  --sys-headers-3-weight: var(--ref-font-weight-normal);
  --sys-headers-4-size: var(--ref-font-size-large);
  --sys-headers-4-weight: var(--ref-font-weight-normal);
  --sys-headers-5-size: var(--ref-font-size-large);
  --sys-headers-5-weight: var(--ref-font-weight-bold);
  --sys-headers-6-size: var(--ref-font-size-large);
  --sys-headers-6-weight: var(--ref-font-weight-bold);
}

@keyframes spinAround {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
body {
  transition: background-color var(--sys-animation-duration-base) ease-in-out;
}
@media (prefers-color-scheme: light) {
  body {
    --theme-container-color: var(--ref-gray-100);
    --theme-font-color: var(--sys-theme-light-background-overlay);
    --disabled: var(--sys-theme-light-disabled-color);
    --disabled-overlay: var(--sys-theme-light-disabled-overlay);
    background-color: var(--sys-theme-light-background-color);
    color: var(--theme-font-color);
    --pink: var(--sys-theme-light-pink-base-color);
    --pink-overlay: var(--sys-theme-light-pink-base-overlay);
    --pink-light: var(--sys-theme-light-pink-light-color);
    --pink-light-overlay: var(--sys-theme-light-pink-light-overlay);
    --pink-dark: var(--sys-theme-light-pink-dark-color);
    --pink-dark-overlay: var(--sys-theme-light-pink-dark-overlay);
    --pink-active: var(--sys-theme-light-pink-base-active-color);
    --pink-active-overlay: var(--sys-theme-light-pink-base-active-overlay);
    --pink-active-light: var(--sys-theme-light-pink-light-active-color);
    --pink-active-light-active: var(--sys-theme-light-pink-light-active-color);
    --pink-active-light-overlay: var(--sys-theme-light-pink-light-active-overlay);
    --pink-active-dark: var(--sys-theme-light-pink-dark-active-color);
    --pink-active-dark-overlay: var(--sys-theme-light-pink-dark-active-overlay);
    --purple: var(--sys-theme-light-purple-base-color);
    --purple-overlay: var(--sys-theme-light-purple-base-overlay);
    --purple-light: var(--sys-theme-light-purple-light-color);
    --purple-light-overlay: var(--sys-theme-light-purple-light-overlay);
    --purple-dark: var(--sys-theme-light-purple-dark-color);
    --purple-dark-overlay: var(--sys-theme-light-purple-dark-overlay);
    --purple-active: var(--sys-theme-light-purple-base-active-color);
    --purple-active-overlay: var(--sys-theme-light-purple-base-active-overlay);
    --purple-active-light: var(--sys-theme-light-purple-light-active-color);
    --purple-active-light-active: var(--sys-theme-light-purple-light-active-color);
    --purple-active-light-overlay: var(--sys-theme-light-purple-light-active-overlay);
    --purple-active-dark: var(--sys-theme-light-purple-dark-active-color);
    --purple-active-dark-overlay: var(--sys-theme-light-purple-dark-active-overlay);
    --yellow: var(--sys-theme-light-yellow-base-color);
    --yellow-overlay: var(--sys-theme-light-yellow-base-overlay);
    --yellow-light: var(--sys-theme-light-yellow-light-color);
    --yellow-light-overlay: var(--sys-theme-light-yellow-light-overlay);
    --yellow-dark: var(--sys-theme-light-yellow-dark-color);
    --yellow-dark-overlay: var(--sys-theme-light-yellow-dark-overlay);
    --yellow-active: var(--sys-theme-light-yellow-base-active-color);
    --yellow-active-overlay: var(--sys-theme-light-yellow-base-active-overlay);
    --yellow-active-light: var(--sys-theme-light-yellow-light-active-color);
    --yellow-active-light-active: var(--sys-theme-light-yellow-light-active-color);
    --yellow-active-light-overlay: var(--sys-theme-light-yellow-light-active-overlay);
    --yellow-active-dark: var(--sys-theme-light-yellow-dark-active-color);
    --yellow-active-dark-overlay: var(--sys-theme-light-yellow-dark-active-overlay);
    --primary: var(--sys-theme-light-primary-base-color);
    --primary-overlay: var(--sys-theme-light-primary-base-overlay);
    --primary-light: var(--sys-theme-light-primary-light-color);
    --primary-light-overlay: var(--sys-theme-light-primary-light-overlay);
    --primary-dark: var(--sys-theme-light-primary-dark-color);
    --primary-dark-overlay: var(--sys-theme-light-primary-dark-overlay);
    --primary-active: var(--sys-theme-light-primary-base-active-color);
    --primary-active-overlay: var(--sys-theme-light-primary-base-active-overlay);
    --primary-active-light: var(--sys-theme-light-primary-light-active-color);
    --primary-active-light-active: var(--sys-theme-light-primary-light-active-color);
    --primary-active-light-overlay: var(--sys-theme-light-primary-light-active-overlay);
    --primary-active-dark: var(--sys-theme-light-primary-dark-active-color);
    --primary-active-dark-overlay: var(--sys-theme-light-primary-dark-active-overlay);
    --secondary: var(--sys-theme-light-secondary-base-color);
    --secondary-overlay: var(--sys-theme-light-secondary-base-overlay);
    --secondary-light: var(--sys-theme-light-secondary-light-color);
    --secondary-light-overlay: var(--sys-theme-light-secondary-light-overlay);
    --secondary-dark: var(--sys-theme-light-secondary-dark-color);
    --secondary-dark-overlay: var(--sys-theme-light-secondary-dark-overlay);
    --secondary-active: var(--sys-theme-light-secondary-base-active-color);
    --secondary-active-overlay: var(--sys-theme-light-secondary-base-active-overlay);
    --secondary-active-light: var(--sys-theme-light-secondary-light-active-color);
    --secondary-active-light-active: var(--sys-theme-light-secondary-light-active-color);
    --secondary-active-light-overlay: var(--sys-theme-light-secondary-light-active-overlay);
    --secondary-active-dark: var(--sys-theme-light-secondary-dark-active-color);
    --secondary-active-dark-overlay: var(--sys-theme-light-secondary-dark-active-overlay);
    --success: var(--sys-theme-light-success-base-color);
    --success-overlay: var(--sys-theme-light-success-base-overlay);
    --success-light: var(--sys-theme-light-success-light-color);
    --success-light-overlay: var(--sys-theme-light-success-light-overlay);
    --success-dark: var(--sys-theme-light-success-dark-color);
    --success-dark-overlay: var(--sys-theme-light-success-dark-overlay);
    --success-active: var(--sys-theme-light-success-base-active-color);
    --success-active-overlay: var(--sys-theme-light-success-base-active-overlay);
    --success-active-light: var(--sys-theme-light-success-light-active-color);
    --success-active-light-active: var(--sys-theme-light-success-light-active-color);
    --success-active-light-overlay: var(--sys-theme-light-success-light-active-overlay);
    --success-active-dark: var(--sys-theme-light-success-dark-active-color);
    --success-active-dark-overlay: var(--sys-theme-light-success-dark-active-overlay);
    --danger: var(--sys-theme-light-danger-base-color);
    --danger-overlay: var(--sys-theme-light-danger-base-overlay);
    --danger-light: var(--sys-theme-light-danger-light-color);
    --danger-light-overlay: var(--sys-theme-light-danger-light-overlay);
    --danger-dark: var(--sys-theme-light-danger-dark-color);
    --danger-dark-overlay: var(--sys-theme-light-danger-dark-overlay);
    --danger-active: var(--sys-theme-light-danger-base-active-color);
    --danger-active-overlay: var(--sys-theme-light-danger-base-active-overlay);
    --danger-active-light: var(--sys-theme-light-danger-light-active-color);
    --danger-active-light-active: var(--sys-theme-light-danger-light-active-color);
    --danger-active-light-overlay: var(--sys-theme-light-danger-light-active-overlay);
    --danger-active-dark: var(--sys-theme-light-danger-dark-active-color);
    --danger-active-dark-overlay: var(--sys-theme-light-danger-dark-active-overlay);
  }
}
:root[data-theme=light] body,
body [data-theme=light] {
  --theme-container-color: var(--ref-gray-100);
  --theme-font-color: var(--sys-theme-light-background-overlay);
  --disabled: var(--sys-theme-light-disabled-color);
  --disabled-overlay: var(--sys-theme-light-disabled-overlay);
  background-color: var(--sys-theme-light-background-color);
  color: var(--theme-font-color);
  --pink: var(--sys-theme-light-pink-base-color);
  --pink-overlay: var(--sys-theme-light-pink-base-overlay);
  --pink-light: var(--sys-theme-light-pink-light-color);
  --pink-light-overlay: var(--sys-theme-light-pink-light-overlay);
  --pink-dark: var(--sys-theme-light-pink-dark-color);
  --pink-dark-overlay: var(--sys-theme-light-pink-dark-overlay);
  --pink-active: var(--sys-theme-light-pink-base-active-color);
  --pink-active-overlay: var(--sys-theme-light-pink-base-active-overlay);
  --pink-active-light: var(--sys-theme-light-pink-light-active-color);
  --pink-active-light-active: var(--sys-theme-light-pink-light-active-color);
  --pink-active-light-overlay: var(--sys-theme-light-pink-light-active-overlay);
  --pink-active-dark: var(--sys-theme-light-pink-dark-active-color);
  --pink-active-dark-overlay: var(--sys-theme-light-pink-dark-active-overlay);
  --purple: var(--sys-theme-light-purple-base-color);
  --purple-overlay: var(--sys-theme-light-purple-base-overlay);
  --purple-light: var(--sys-theme-light-purple-light-color);
  --purple-light-overlay: var(--sys-theme-light-purple-light-overlay);
  --purple-dark: var(--sys-theme-light-purple-dark-color);
  --purple-dark-overlay: var(--sys-theme-light-purple-dark-overlay);
  --purple-active: var(--sys-theme-light-purple-base-active-color);
  --purple-active-overlay: var(--sys-theme-light-purple-base-active-overlay);
  --purple-active-light: var(--sys-theme-light-purple-light-active-color);
  --purple-active-light-active: var(--sys-theme-light-purple-light-active-color);
  --purple-active-light-overlay: var(--sys-theme-light-purple-light-active-overlay);
  --purple-active-dark: var(--sys-theme-light-purple-dark-active-color);
  --purple-active-dark-overlay: var(--sys-theme-light-purple-dark-active-overlay);
  --yellow: var(--sys-theme-light-yellow-base-color);
  --yellow-overlay: var(--sys-theme-light-yellow-base-overlay);
  --yellow-light: var(--sys-theme-light-yellow-light-color);
  --yellow-light-overlay: var(--sys-theme-light-yellow-light-overlay);
  --yellow-dark: var(--sys-theme-light-yellow-dark-color);
  --yellow-dark-overlay: var(--sys-theme-light-yellow-dark-overlay);
  --yellow-active: var(--sys-theme-light-yellow-base-active-color);
  --yellow-active-overlay: var(--sys-theme-light-yellow-base-active-overlay);
  --yellow-active-light: var(--sys-theme-light-yellow-light-active-color);
  --yellow-active-light-active: var(--sys-theme-light-yellow-light-active-color);
  --yellow-active-light-overlay: var(--sys-theme-light-yellow-light-active-overlay);
  --yellow-active-dark: var(--sys-theme-light-yellow-dark-active-color);
  --yellow-active-dark-overlay: var(--sys-theme-light-yellow-dark-active-overlay);
  --primary: var(--sys-theme-light-primary-base-color);
  --primary-overlay: var(--sys-theme-light-primary-base-overlay);
  --primary-light: var(--sys-theme-light-primary-light-color);
  --primary-light-overlay: var(--sys-theme-light-primary-light-overlay);
  --primary-dark: var(--sys-theme-light-primary-dark-color);
  --primary-dark-overlay: var(--sys-theme-light-primary-dark-overlay);
  --primary-active: var(--sys-theme-light-primary-base-active-color);
  --primary-active-overlay: var(--sys-theme-light-primary-base-active-overlay);
  --primary-active-light: var(--sys-theme-light-primary-light-active-color);
  --primary-active-light-active: var(--sys-theme-light-primary-light-active-color);
  --primary-active-light-overlay: var(--sys-theme-light-primary-light-active-overlay);
  --primary-active-dark: var(--sys-theme-light-primary-dark-active-color);
  --primary-active-dark-overlay: var(--sys-theme-light-primary-dark-active-overlay);
  --secondary: var(--sys-theme-light-secondary-base-color);
  --secondary-overlay: var(--sys-theme-light-secondary-base-overlay);
  --secondary-light: var(--sys-theme-light-secondary-light-color);
  --secondary-light-overlay: var(--sys-theme-light-secondary-light-overlay);
  --secondary-dark: var(--sys-theme-light-secondary-dark-color);
  --secondary-dark-overlay: var(--sys-theme-light-secondary-dark-overlay);
  --secondary-active: var(--sys-theme-light-secondary-base-active-color);
  --secondary-active-overlay: var(--sys-theme-light-secondary-base-active-overlay);
  --secondary-active-light: var(--sys-theme-light-secondary-light-active-color);
  --secondary-active-light-active: var(--sys-theme-light-secondary-light-active-color);
  --secondary-active-light-overlay: var(--sys-theme-light-secondary-light-active-overlay);
  --secondary-active-dark: var(--sys-theme-light-secondary-dark-active-color);
  --secondary-active-dark-overlay: var(--sys-theme-light-secondary-dark-active-overlay);
  --success: var(--sys-theme-light-success-base-color);
  --success-overlay: var(--sys-theme-light-success-base-overlay);
  --success-light: var(--sys-theme-light-success-light-color);
  --success-light-overlay: var(--sys-theme-light-success-light-overlay);
  --success-dark: var(--sys-theme-light-success-dark-color);
  --success-dark-overlay: var(--sys-theme-light-success-dark-overlay);
  --success-active: var(--sys-theme-light-success-base-active-color);
  --success-active-overlay: var(--sys-theme-light-success-base-active-overlay);
  --success-active-light: var(--sys-theme-light-success-light-active-color);
  --success-active-light-active: var(--sys-theme-light-success-light-active-color);
  --success-active-light-overlay: var(--sys-theme-light-success-light-active-overlay);
  --success-active-dark: var(--sys-theme-light-success-dark-active-color);
  --success-active-dark-overlay: var(--sys-theme-light-success-dark-active-overlay);
  --danger: var(--sys-theme-light-danger-base-color);
  --danger-overlay: var(--sys-theme-light-danger-base-overlay);
  --danger-light: var(--sys-theme-light-danger-light-color);
  --danger-light-overlay: var(--sys-theme-light-danger-light-overlay);
  --danger-dark: var(--sys-theme-light-danger-dark-color);
  --danger-dark-overlay: var(--sys-theme-light-danger-dark-overlay);
  --danger-active: var(--sys-theme-light-danger-base-active-color);
  --danger-active-overlay: var(--sys-theme-light-danger-base-active-overlay);
  --danger-active-light: var(--sys-theme-light-danger-light-active-color);
  --danger-active-light-active: var(--sys-theme-light-danger-light-active-color);
  --danger-active-light-overlay: var(--sys-theme-light-danger-light-active-overlay);
  --danger-active-dark: var(--sys-theme-light-danger-dark-active-color);
  --danger-active-dark-overlay: var(--sys-theme-light-danger-dark-active-overlay);
}
@media (prefers-color-scheme: dark) {
  body {
    --theme-container-color: var(--ref-gray-20);
    --theme-font-color: var(--sys-theme-dark-background-overlay);
    --disabled: var(--sys-theme-dark-disabled-color);
    --disabled-overlay: var(--sys-theme-dark-disabled-overlay);
    background-color: var(--sys-theme-dark-background-color);
    color: var(--theme-font-color);
    --pink: var(--sys-theme-dark-pink-base-color);
    --pink-overlay: var(--sys-theme-dark-pink-base-overlay);
    --pink-light: var(--sys-theme-dark-pink-light-color);
    --pink-light-overlay: var(--sys-theme-dark-pink-light-overlay);
    --pink-dark: var(--sys-theme-dark-pink-dark-color);
    --pink-dark-overlay: var(--sys-theme-dark-pink-dark-overlay);
    --pink-active: var(--sys-theme-dark-pink-base-active-color);
    --pink-active-overlay: var(--sys-theme-dark-pink-base-active-overlay);
    --pink-active-light: var(--sys-theme-dark-pink-light-active-color);
    --pink-active-light-active: var(--sys-theme-dark-pink-light-active-color);
    --pink-active-light-overlay: var(--sys-theme-dark-pink-light-active-overlay);
    --pink-active-dark: var(--sys-theme-dark-pink-dark-active-color);
    --pink-active-dark-overlay: var(--sys-theme-dark-pink-dark-active-overlay);
    --purple: var(--sys-theme-dark-purple-base-color);
    --purple-overlay: var(--sys-theme-dark-purple-base-overlay);
    --purple-light: var(--sys-theme-dark-purple-light-color);
    --purple-light-overlay: var(--sys-theme-dark-purple-light-overlay);
    --purple-dark: var(--sys-theme-dark-purple-dark-color);
    --purple-dark-overlay: var(--sys-theme-dark-purple-dark-overlay);
    --purple-active: var(--sys-theme-dark-purple-base-active-color);
    --purple-active-overlay: var(--sys-theme-dark-purple-base-active-overlay);
    --purple-active-light: var(--sys-theme-dark-purple-light-active-color);
    --purple-active-light-active: var(--sys-theme-dark-purple-light-active-color);
    --purple-active-light-overlay: var(--sys-theme-dark-purple-light-active-overlay);
    --purple-active-dark: var(--sys-theme-dark-purple-dark-active-color);
    --purple-active-dark-overlay: var(--sys-theme-dark-purple-dark-active-overlay);
    --yellow: var(--sys-theme-dark-yellow-base-color);
    --yellow-overlay: var(--sys-theme-dark-yellow-base-overlay);
    --yellow-light: var(--sys-theme-dark-yellow-light-color);
    --yellow-light-overlay: var(--sys-theme-dark-yellow-light-overlay);
    --yellow-dark: var(--sys-theme-dark-yellow-dark-color);
    --yellow-dark-overlay: var(--sys-theme-dark-yellow-dark-overlay);
    --yellow-active: var(--sys-theme-dark-yellow-base-active-color);
    --yellow-active-overlay: var(--sys-theme-dark-yellow-base-active-overlay);
    --yellow-active-light: var(--sys-theme-dark-yellow-light-active-color);
    --yellow-active-light-active: var(--sys-theme-dark-yellow-light-active-color);
    --yellow-active-light-overlay: var(--sys-theme-dark-yellow-light-active-overlay);
    --yellow-active-dark: var(--sys-theme-dark-yellow-dark-active-color);
    --yellow-active-dark-overlay: var(--sys-theme-dark-yellow-dark-active-overlay);
    --primary: var(--sys-theme-dark-primary-base-color);
    --primary-overlay: var(--sys-theme-dark-primary-base-overlay);
    --primary-light: var(--sys-theme-dark-primary-light-color);
    --primary-light-overlay: var(--sys-theme-dark-primary-light-overlay);
    --primary-dark: var(--sys-theme-dark-primary-dark-color);
    --primary-dark-overlay: var(--sys-theme-dark-primary-dark-overlay);
    --primary-active: var(--sys-theme-dark-primary-base-active-color);
    --primary-active-overlay: var(--sys-theme-dark-primary-base-active-overlay);
    --primary-active-light: var(--sys-theme-dark-primary-light-active-color);
    --primary-active-light-active: var(--sys-theme-dark-primary-light-active-color);
    --primary-active-light-overlay: var(--sys-theme-dark-primary-light-active-overlay);
    --primary-active-dark: var(--sys-theme-dark-primary-dark-active-color);
    --primary-active-dark-overlay: var(--sys-theme-dark-primary-dark-active-overlay);
    --secondary: var(--sys-theme-dark-secondary-base-color);
    --secondary-overlay: var(--sys-theme-dark-secondary-base-overlay);
    --secondary-light: var(--sys-theme-dark-secondary-light-color);
    --secondary-light-overlay: var(--sys-theme-dark-secondary-light-overlay);
    --secondary-dark: var(--sys-theme-dark-secondary-dark-color);
    --secondary-dark-overlay: var(--sys-theme-dark-secondary-dark-overlay);
    --secondary-active: var(--sys-theme-dark-secondary-base-active-color);
    --secondary-active-overlay: var(--sys-theme-dark-secondary-base-active-overlay);
    --secondary-active-light: var(--sys-theme-dark-secondary-light-active-color);
    --secondary-active-light-active: var(--sys-theme-dark-secondary-light-active-color);
    --secondary-active-light-overlay: var(--sys-theme-dark-secondary-light-active-overlay);
    --secondary-active-dark: var(--sys-theme-dark-secondary-dark-active-color);
    --secondary-active-dark-overlay: var(--sys-theme-dark-secondary-dark-active-overlay);
    --success: var(--sys-theme-dark-success-base-color);
    --success-overlay: var(--sys-theme-dark-success-base-overlay);
    --success-light: var(--sys-theme-dark-success-light-color);
    --success-light-overlay: var(--sys-theme-dark-success-light-overlay);
    --success-dark: var(--sys-theme-dark-success-dark-color);
    --success-dark-overlay: var(--sys-theme-dark-success-dark-overlay);
    --success-active: var(--sys-theme-dark-success-base-active-color);
    --success-active-overlay: var(--sys-theme-dark-success-base-active-overlay);
    --success-active-light: var(--sys-theme-dark-success-light-active-color);
    --success-active-light-active: var(--sys-theme-dark-success-light-active-color);
    --success-active-light-overlay: var(--sys-theme-dark-success-light-active-overlay);
    --success-active-dark: var(--sys-theme-dark-success-dark-active-color);
    --success-active-dark-overlay: var(--sys-theme-dark-success-dark-active-overlay);
    --danger: var(--sys-theme-dark-danger-base-color);
    --danger-overlay: var(--sys-theme-dark-danger-base-overlay);
    --danger-light: var(--sys-theme-dark-danger-light-color);
    --danger-light-overlay: var(--sys-theme-dark-danger-light-overlay);
    --danger-dark: var(--sys-theme-dark-danger-dark-color);
    --danger-dark-overlay: var(--sys-theme-dark-danger-dark-overlay);
    --danger-active: var(--sys-theme-dark-danger-base-active-color);
    --danger-active-overlay: var(--sys-theme-dark-danger-base-active-overlay);
    --danger-active-light: var(--sys-theme-dark-danger-light-active-color);
    --danger-active-light-active: var(--sys-theme-dark-danger-light-active-color);
    --danger-active-light-overlay: var(--sys-theme-dark-danger-light-active-overlay);
    --danger-active-dark: var(--sys-theme-dark-danger-dark-active-color);
    --danger-active-dark-overlay: var(--sys-theme-dark-danger-dark-active-overlay);
  }
}
:root[data-theme=dark] body,
body [data-theme=dark] {
  --theme-container-color: var(--ref-gray-20);
  --theme-font-color: var(--sys-theme-dark-background-overlay);
  --disabled: var(--sys-theme-dark-disabled-color);
  --disabled-overlay: var(--sys-theme-dark-disabled-overlay);
  background-color: var(--sys-theme-dark-background-color);
  color: var(--theme-font-color);
  --pink: var(--sys-theme-dark-pink-base-color);
  --pink-overlay: var(--sys-theme-dark-pink-base-overlay);
  --pink-light: var(--sys-theme-dark-pink-light-color);
  --pink-light-overlay: var(--sys-theme-dark-pink-light-overlay);
  --pink-dark: var(--sys-theme-dark-pink-dark-color);
  --pink-dark-overlay: var(--sys-theme-dark-pink-dark-overlay);
  --pink-active: var(--sys-theme-dark-pink-base-active-color);
  --pink-active-overlay: var(--sys-theme-dark-pink-base-active-overlay);
  --pink-active-light: var(--sys-theme-dark-pink-light-active-color);
  --pink-active-light-active: var(--sys-theme-dark-pink-light-active-color);
  --pink-active-light-overlay: var(--sys-theme-dark-pink-light-active-overlay);
  --pink-active-dark: var(--sys-theme-dark-pink-dark-active-color);
  --pink-active-dark-overlay: var(--sys-theme-dark-pink-dark-active-overlay);
  --purple: var(--sys-theme-dark-purple-base-color);
  --purple-overlay: var(--sys-theme-dark-purple-base-overlay);
  --purple-light: var(--sys-theme-dark-purple-light-color);
  --purple-light-overlay: var(--sys-theme-dark-purple-light-overlay);
  --purple-dark: var(--sys-theme-dark-purple-dark-color);
  --purple-dark-overlay: var(--sys-theme-dark-purple-dark-overlay);
  --purple-active: var(--sys-theme-dark-purple-base-active-color);
  --purple-active-overlay: var(--sys-theme-dark-purple-base-active-overlay);
  --purple-active-light: var(--sys-theme-dark-purple-light-active-color);
  --purple-active-light-active: var(--sys-theme-dark-purple-light-active-color);
  --purple-active-light-overlay: var(--sys-theme-dark-purple-light-active-overlay);
  --purple-active-dark: var(--sys-theme-dark-purple-dark-active-color);
  --purple-active-dark-overlay: var(--sys-theme-dark-purple-dark-active-overlay);
  --yellow: var(--sys-theme-dark-yellow-base-color);
  --yellow-overlay: var(--sys-theme-dark-yellow-base-overlay);
  --yellow-light: var(--sys-theme-dark-yellow-light-color);
  --yellow-light-overlay: var(--sys-theme-dark-yellow-light-overlay);
  --yellow-dark: var(--sys-theme-dark-yellow-dark-color);
  --yellow-dark-overlay: var(--sys-theme-dark-yellow-dark-overlay);
  --yellow-active: var(--sys-theme-dark-yellow-base-active-color);
  --yellow-active-overlay: var(--sys-theme-dark-yellow-base-active-overlay);
  --yellow-active-light: var(--sys-theme-dark-yellow-light-active-color);
  --yellow-active-light-active: var(--sys-theme-dark-yellow-light-active-color);
  --yellow-active-light-overlay: var(--sys-theme-dark-yellow-light-active-overlay);
  --yellow-active-dark: var(--sys-theme-dark-yellow-dark-active-color);
  --yellow-active-dark-overlay: var(--sys-theme-dark-yellow-dark-active-overlay);
  --primary: var(--sys-theme-dark-primary-base-color);
  --primary-overlay: var(--sys-theme-dark-primary-base-overlay);
  --primary-light: var(--sys-theme-dark-primary-light-color);
  --primary-light-overlay: var(--sys-theme-dark-primary-light-overlay);
  --primary-dark: var(--sys-theme-dark-primary-dark-color);
  --primary-dark-overlay: var(--sys-theme-dark-primary-dark-overlay);
  --primary-active: var(--sys-theme-dark-primary-base-active-color);
  --primary-active-overlay: var(--sys-theme-dark-primary-base-active-overlay);
  --primary-active-light: var(--sys-theme-dark-primary-light-active-color);
  --primary-active-light-active: var(--sys-theme-dark-primary-light-active-color);
  --primary-active-light-overlay: var(--sys-theme-dark-primary-light-active-overlay);
  --primary-active-dark: var(--sys-theme-dark-primary-dark-active-color);
  --primary-active-dark-overlay: var(--sys-theme-dark-primary-dark-active-overlay);
  --secondary: var(--sys-theme-dark-secondary-base-color);
  --secondary-overlay: var(--sys-theme-dark-secondary-base-overlay);
  --secondary-light: var(--sys-theme-dark-secondary-light-color);
  --secondary-light-overlay: var(--sys-theme-dark-secondary-light-overlay);
  --secondary-dark: var(--sys-theme-dark-secondary-dark-color);
  --secondary-dark-overlay: var(--sys-theme-dark-secondary-dark-overlay);
  --secondary-active: var(--sys-theme-dark-secondary-base-active-color);
  --secondary-active-overlay: var(--sys-theme-dark-secondary-base-active-overlay);
  --secondary-active-light: var(--sys-theme-dark-secondary-light-active-color);
  --secondary-active-light-active: var(--sys-theme-dark-secondary-light-active-color);
  --secondary-active-light-overlay: var(--sys-theme-dark-secondary-light-active-overlay);
  --secondary-active-dark: var(--sys-theme-dark-secondary-dark-active-color);
  --secondary-active-dark-overlay: var(--sys-theme-dark-secondary-dark-active-overlay);
  --success: var(--sys-theme-dark-success-base-color);
  --success-overlay: var(--sys-theme-dark-success-base-overlay);
  --success-light: var(--sys-theme-dark-success-light-color);
  --success-light-overlay: var(--sys-theme-dark-success-light-overlay);
  --success-dark: var(--sys-theme-dark-success-dark-color);
  --success-dark-overlay: var(--sys-theme-dark-success-dark-overlay);
  --success-active: var(--sys-theme-dark-success-base-active-color);
  --success-active-overlay: var(--sys-theme-dark-success-base-active-overlay);
  --success-active-light: var(--sys-theme-dark-success-light-active-color);
  --success-active-light-active: var(--sys-theme-dark-success-light-active-color);
  --success-active-light-overlay: var(--sys-theme-dark-success-light-active-overlay);
  --success-active-dark: var(--sys-theme-dark-success-dark-active-color);
  --success-active-dark-overlay: var(--sys-theme-dark-success-dark-active-overlay);
  --danger: var(--sys-theme-dark-danger-base-color);
  --danger-overlay: var(--sys-theme-dark-danger-base-overlay);
  --danger-light: var(--sys-theme-dark-danger-light-color);
  --danger-light-overlay: var(--sys-theme-dark-danger-light-overlay);
  --danger-dark: var(--sys-theme-dark-danger-dark-color);
  --danger-dark-overlay: var(--sys-theme-dark-danger-dark-overlay);
  --danger-active: var(--sys-theme-dark-danger-base-active-color);
  --danger-active-overlay: var(--sys-theme-dark-danger-base-active-overlay);
  --danger-active-light: var(--sys-theme-dark-danger-light-active-color);
  --danger-active-light-active: var(--sys-theme-dark-danger-light-active-color);
  --danger-active-light-overlay: var(--sys-theme-dark-danger-light-active-overlay);
  --danger-active-dark: var(--sys-theme-dark-danger-dark-active-color);
  --danger-active-dark-overlay: var(--sys-theme-dark-danger-dark-active-overlay);
}

a {
  font-weight: var(--ref-font-weight-bold);
}
@media (prefers-color-scheme: light) {
  a {
    color: var(--link-dark);
  }
}
:root[data-theme=light] a,
a [data-theme=light] {
  color: var(--link-dark);
}
@media (prefers-color-scheme: dark) {
  a {
    color: var(--link-light);
  }
}
:root[data-theme=dark] a,
a [data-theme=dark] {
  color: var(--link-light);
}

.box {
  background-color: var(--theme-container-color);
  border-radius: var(--sys-corner-medium);
  padding: var(--sys-space-block);
}
.box:not(:last-child) {
  margin-bottom: var(--sys-space-block);
}
.box .block:not(:last-child) {
  margin-bottom: var(--sys-space-block);
}

.block:not(:last-child) {
  margin-bottom: var(--sys-space-block);
}
.block.danger-light {
  background-color: var(--danger-light);
  color: var(--danger-light-overlay);
}
.block.danger-light.outline {
  color: var(--danger-light);
  background-color: transparent;
  border-color: var(--danger-light);
}
.block.disabled-light {
  background-color: var(--disabled-light);
  color: var(--disabled-light-overlay);
}
.block.disabled-light.outline {
  color: var(--disabled-light);
  background-color: transparent;
  border-color: var(--disabled-light);
}
.block.info-light {
  background-color: var(--info-light);
  color: var(--info-light-overlay);
}
.block.info-light.outline {
  color: var(--info-light);
  background-color: transparent;
  border-color: var(--info-light);
}
.block.link-light {
  background-color: var(--link-light);
  color: var(--link-light-overlay);
}
.block.link-light.outline {
  color: var(--link-light);
  background-color: transparent;
  border-color: var(--link-light);
}
.block.primary-light {
  background-color: var(--primary-light);
  color: var(--primary-light-overlay);
}
.block.primary-light.outline {
  color: var(--primary-light);
  background-color: transparent;
  border-color: var(--primary-light);
}
.block.secondary-light {
  background-color: var(--secondary-light);
  color: var(--secondary-light-overlay);
}
.block.secondary-light.outline {
  color: var(--secondary-light);
  background-color: transparent;
  border-color: var(--secondary-light);
}
.block.success-light {
  background-color: var(--success-light);
  color: var(--success-light-overlay);
}
.block.success-light.outline {
  color: var(--success-light);
  background-color: transparent;
  border-color: var(--success-light);
}
.block.danger {
  background-color: var(--danger);
  color: var(--danger-overlay);
}
.block.danger.outline {
  color: var(--danger);
  background-color: transparent;
  border-color: var(--danger);
}
.block.disabled {
  background-color: var(--disabled);
  color: var(--disabled-overlay);
}
.block.disabled.outline {
  color: var(--disabled);
  background-color: transparent;
  border-color: var(--disabled);
}
.block.info {
  background-color: var(--info);
  color: var(--info-overlay);
}
.block.info.outline {
  color: var(--info);
  background-color: transparent;
  border-color: var(--info);
}
.block.link {
  background-color: var(--link);
  color: var(--link-overlay);
}
.block.link.outline {
  color: var(--link);
  background-color: transparent;
  border-color: var(--link);
}
.block.primary {
  background-color: var(--primary);
  color: var(--primary-overlay);
}
.block.primary.outline {
  color: var(--primary);
  background-color: transparent;
  border-color: var(--primary);
}
.block.secondary {
  background-color: var(--secondary);
  color: var(--secondary-overlay);
}
.block.secondary.outline {
  color: var(--secondary);
  background-color: transparent;
  border-color: var(--secondary);
}
.block.success {
  background-color: var(--success);
  color: var(--success-overlay);
}
.block.success.outline {
  color: var(--success);
  background-color: transparent;
  border-color: var(--success);
}
.block.danger-dark {
  background-color: var(--danger-dark);
  color: var(--danger-dark-overlay);
}
.block.danger-dark.outline {
  color: var(--danger-dark);
  background-color: transparent;
  border-color: var(--danger-dark);
}
.block.disabled-dark {
  background-color: var(--disabled-dark);
  color: var(--disabled-dark-overlay);
}
.block.disabled-dark.outline {
  color: var(--disabled-dark);
  background-color: transparent;
  border-color: var(--disabled-dark);
}
.block.info-dark {
  background-color: var(--info-dark);
  color: var(--info-dark-overlay);
}
.block.info-dark.outline {
  color: var(--info-dark);
  background-color: transparent;
  border-color: var(--info-dark);
}
.block.link-dark {
  background-color: var(--link-dark);
  color: var(--link-dark-overlay);
}
.block.link-dark.outline {
  color: var(--link-dark);
  background-color: transparent;
  border-color: var(--link-dark);
}
.block.primary-dark {
  background-color: var(--primary-dark);
  color: var(--primary-dark-overlay);
}
.block.primary-dark.outline {
  color: var(--primary-dark);
  background-color: transparent;
  border-color: var(--primary-dark);
}
.block.secondary-dark {
  background-color: var(--secondary-dark);
  color: var(--secondary-dark-overlay);
}
.block.secondary-dark.outline {
  color: var(--secondary-dark);
  background-color: transparent;
  border-color: var(--secondary-dark);
}
.block.success-dark {
  background-color: var(--success-dark);
  color: var(--success-dark-overlay);
}
.block.success-dark.outline {
  color: var(--success-dark);
  background-color: transparent;
  border-color: var(--success-dark);
}
.block.base-third {
  background-color: var(--container-base-third);
  color: var(--container-content-base-third);
}
.block.base {
  background-color: var(--container-base);
  color: var(--container-content-base);
}
.block.base-second {
  background-color: var(--container-base-second);
  color: var(--container-content-base-second);
}

.control .checkbox input {
  margin-right: 0.5em;
}

.grid.cell-x-center {
  justify-items: center;
}
.grid.cell-x-end {
  justify-items: end;
}
.grid.cell-x-start {
  justify-items: start;
}
.grid.cell-x-stretch {
  justify-items: stretch;
}
.grid.cell-y-first-baseline {
  align-items: first baseline;
}
.grid.cell-y-center {
  align-items: center;
}
.grid.cell-y-end {
  align-items: end;
}
.grid.cell-y-last-baseline {
  align-items: last baseline;
}
.grid.cell-y-start {
  align-items: start;
}
.grid.cell-y-stretch {
  align-items: stretch;
}
.grid.col-center {
  justify-content: center;
}
.grid.col-end {
  justify-content: end;
}
.grid.col-space-around {
  justify-content: space-around;
}
.grid.col-space-between {
  justify-content: space-between;
}
.grid.col-space-evenly {
  justify-content: space-evenly;
}
.grid.col-start {
  justify-content: start;
}
.grid.col-stretch {
  justify-content: stretch;
}
.grid.row-center {
  align-content: center;
}
.grid.row-end {
  align-content: end;
}
.grid.row-space-around {
  align-content: space-around;
}
.grid.row-space-between {
  align-content: space-between;
}
.grid.row-space-evenly {
  align-content: space-evenly;
}
.grid.row-start {
  align-content: start;
}
.grid.row-stretch {
  align-content: stretch;
}
@media screen and (min-width: 600px) {
  .grid {
    display: grid;
  }
}
.grid .box,
.grid .block,
.grid .header.formatted {
  margin: 0;
}
.grid:not(:last-child) {
  margin-bottom: var(--sys-space-block);
}
.grid.danger-light {
  background-color: var(--danger-light);
  color: var(--danger-light-overlay);
}
.grid.danger-light.outline {
  color: var(--danger-light);
  background-color: transparent;
  border-color: var(--danger-light);
}
.grid.disabled-light {
  background-color: var(--disabled-light);
  color: var(--disabled-light-overlay);
}
.grid.disabled-light.outline {
  color: var(--disabled-light);
  background-color: transparent;
  border-color: var(--disabled-light);
}
.grid.info-light {
  background-color: var(--info-light);
  color: var(--info-light-overlay);
}
.grid.info-light.outline {
  color: var(--info-light);
  background-color: transparent;
  border-color: var(--info-light);
}
.grid.link-light {
  background-color: var(--link-light);
  color: var(--link-light-overlay);
}
.grid.link-light.outline {
  color: var(--link-light);
  background-color: transparent;
  border-color: var(--link-light);
}
.grid.primary-light {
  background-color: var(--primary-light);
  color: var(--primary-light-overlay);
}
.grid.primary-light.outline {
  color: var(--primary-light);
  background-color: transparent;
  border-color: var(--primary-light);
}
.grid.secondary-light {
  background-color: var(--secondary-light);
  color: var(--secondary-light-overlay);
}
.grid.secondary-light.outline {
  color: var(--secondary-light);
  background-color: transparent;
  border-color: var(--secondary-light);
}
.grid.success-light {
  background-color: var(--success-light);
  color: var(--success-light-overlay);
}
.grid.success-light.outline {
  color: var(--success-light);
  background-color: transparent;
  border-color: var(--success-light);
}
.grid.danger {
  background-color: var(--danger);
  color: var(--danger-overlay);
}
.grid.danger.outline {
  color: var(--danger);
  background-color: transparent;
  border-color: var(--danger);
}
.grid.disabled {
  background-color: var(--disabled);
  color: var(--disabled-overlay);
}
.grid.disabled.outline {
  color: var(--disabled);
  background-color: transparent;
  border-color: var(--disabled);
}
.grid.info {
  background-color: var(--info);
  color: var(--info-overlay);
}
.grid.info.outline {
  color: var(--info);
  background-color: transparent;
  border-color: var(--info);
}
.grid.link {
  background-color: var(--link);
  color: var(--link-overlay);
}
.grid.link.outline {
  color: var(--link);
  background-color: transparent;
  border-color: var(--link);
}
.grid.primary {
  background-color: var(--primary);
  color: var(--primary-overlay);
}
.grid.primary.outline {
  color: var(--primary);
  background-color: transparent;
  border-color: var(--primary);
}
.grid.secondary {
  background-color: var(--secondary);
  color: var(--secondary-overlay);
}
.grid.secondary.outline {
  color: var(--secondary);
  background-color: transparent;
  border-color: var(--secondary);
}
.grid.success {
  background-color: var(--success);
  color: var(--success-overlay);
}
.grid.success.outline {
  color: var(--success);
  background-color: transparent;
  border-color: var(--success);
}
.grid.danger-dark {
  background-color: var(--danger-dark);
  color: var(--danger-dark-overlay);
}
.grid.danger-dark.outline {
  color: var(--danger-dark);
  background-color: transparent;
  border-color: var(--danger-dark);
}
.grid.disabled-dark {
  background-color: var(--disabled-dark);
  color: var(--disabled-dark-overlay);
}
.grid.disabled-dark.outline {
  color: var(--disabled-dark);
  background-color: transparent;
  border-color: var(--disabled-dark);
}
.grid.info-dark {
  background-color: var(--info-dark);
  color: var(--info-dark-overlay);
}
.grid.info-dark.outline {
  color: var(--info-dark);
  background-color: transparent;
  border-color: var(--info-dark);
}
.grid.link-dark {
  background-color: var(--link-dark);
  color: var(--link-dark-overlay);
}
.grid.link-dark.outline {
  color: var(--link-dark);
  background-color: transparent;
  border-color: var(--link-dark);
}
.grid.primary-dark {
  background-color: var(--primary-dark);
  color: var(--primary-dark-overlay);
}
.grid.primary-dark.outline {
  color: var(--primary-dark);
  background-color: transparent;
  border-color: var(--primary-dark);
}
.grid.secondary-dark {
  background-color: var(--secondary-dark);
  color: var(--secondary-dark-overlay);
}
.grid.secondary-dark.outline {
  color: var(--secondary-dark);
  background-color: transparent;
  border-color: var(--secondary-dark);
}
.grid.success-dark {
  background-color: var(--success-dark);
  color: var(--success-dark-overlay);
}
.grid.success-dark.outline {
  color: var(--success-dark);
  background-color: transparent;
  border-color: var(--success-dark);
}
.grid.base-third {
  background-color: var(--container-base-third);
  color: var(--container-content-base-third);
}
.grid.base {
  background-color: var(--container-base);
  color: var(--container-content-base);
}
.grid.base-second {
  background-color: var(--container-base-second);
  color: var(--container-content-base-second);
}

.inline {
  display: inline-block;
}
.inline.grid {
  display: inline-grid;
}

.note {
  border-radius: var(--sys-corner-active-extra-small);
  padding: var(--sys-space-block);
}
.note:not(:last-child) {
  margin-bottom: var(--sys-space-block);
}
.note.danger-light {
  background-color: var(--danger-light);
  color: var(--danger-light-overlay);
}
.note.danger-light.outline {
  color: var(--danger-light);
  background-color: transparent;
  border-color: var(--danger-light);
}
.note.disabled-light {
  background-color: var(--disabled-light);
  color: var(--disabled-light-overlay);
}
.note.disabled-light.outline {
  color: var(--disabled-light);
  background-color: transparent;
  border-color: var(--disabled-light);
}
.note.info-light {
  background-color: var(--info-light);
  color: var(--info-light-overlay);
}
.note.info-light.outline {
  color: var(--info-light);
  background-color: transparent;
  border-color: var(--info-light);
}
.note.link-light {
  background-color: var(--link-light);
  color: var(--link-light-overlay);
}
.note.link-light.outline {
  color: var(--link-light);
  background-color: transparent;
  border-color: var(--link-light);
}
.note.primary-light {
  background-color: var(--primary-light);
  color: var(--primary-light-overlay);
}
.note.primary-light.outline {
  color: var(--primary-light);
  background-color: transparent;
  border-color: var(--primary-light);
}
.note.secondary-light {
  background-color: var(--secondary-light);
  color: var(--secondary-light-overlay);
}
.note.secondary-light.outline {
  color: var(--secondary-light);
  background-color: transparent;
  border-color: var(--secondary-light);
}
.note.success-light {
  background-color: var(--success-light);
  color: var(--success-light-overlay);
}
.note.success-light.outline {
  color: var(--success-light);
  background-color: transparent;
  border-color: var(--success-light);
}
.note.danger {
  background-color: var(--danger);
  color: var(--danger-overlay);
}
.note.danger.outline {
  color: var(--danger);
  background-color: transparent;
  border-color: var(--danger);
}
.note.disabled {
  background-color: var(--disabled);
  color: var(--disabled-overlay);
}
.note.disabled.outline {
  color: var(--disabled);
  background-color: transparent;
  border-color: var(--disabled);
}
.note.info {
  background-color: var(--info);
  color: var(--info-overlay);
}
.note.info.outline {
  color: var(--info);
  background-color: transparent;
  border-color: var(--info);
}
.note.link {
  background-color: var(--link);
  color: var(--link-overlay);
}
.note.link.outline {
  color: var(--link);
  background-color: transparent;
  border-color: var(--link);
}
.note.primary {
  background-color: var(--primary);
  color: var(--primary-overlay);
}
.note.primary.outline {
  color: var(--primary);
  background-color: transparent;
  border-color: var(--primary);
}
.note.secondary {
  background-color: var(--secondary);
  color: var(--secondary-overlay);
}
.note.secondary.outline {
  color: var(--secondary);
  background-color: transparent;
  border-color: var(--secondary);
}
.note.success {
  background-color: var(--success);
  color: var(--success-overlay);
}
.note.success.outline {
  color: var(--success);
  background-color: transparent;
  border-color: var(--success);
}
.note.danger-dark {
  background-color: var(--danger-dark);
  color: var(--danger-dark-overlay);
}
.note.danger-dark.outline {
  color: var(--danger-dark);
  background-color: transparent;
  border-color: var(--danger-dark);
}
.note.disabled-dark {
  background-color: var(--disabled-dark);
  color: var(--disabled-dark-overlay);
}
.note.disabled-dark.outline {
  color: var(--disabled-dark);
  background-color: transparent;
  border-color: var(--disabled-dark);
}
.note.info-dark {
  background-color: var(--info-dark);
  color: var(--info-dark-overlay);
}
.note.info-dark.outline {
  color: var(--info-dark);
  background-color: transparent;
  border-color: var(--info-dark);
}
.note.link-dark {
  background-color: var(--link-dark);
  color: var(--link-dark-overlay);
}
.note.link-dark.outline {
  color: var(--link-dark);
  background-color: transparent;
  border-color: var(--link-dark);
}
.note.primary-dark {
  background-color: var(--primary-dark);
  color: var(--primary-dark-overlay);
}
.note.primary-dark.outline {
  color: var(--primary-dark);
  background-color: transparent;
  border-color: var(--primary-dark);
}
.note.secondary-dark {
  background-color: var(--secondary-dark);
  color: var(--secondary-dark-overlay);
}
.note.secondary-dark.outline {
  color: var(--secondary-dark);
  background-color: transparent;
  border-color: var(--secondary-dark);
}
.note.success-dark {
  background-color: var(--success-dark);
  color: var(--success-dark-overlay);
}
.note.success-dark.outline {
  color: var(--success-dark);
  background-color: transparent;
  border-color: var(--success-dark);
}
.note.base-third {
  background-color: var(--container-base-third);
  color: var(--container-content-base-third);
}
.note.base {
  background-color: var(--container-base);
  color: var(--container-content-base);
}
.note.base-second {
  background-color: var(--container-base-second);
  color: var(--container-content-base-second);
}
.note {
  font-family: var(--ref-font-family-base);
  font-size: var(--font-size-a11y);
  font-weight: var(--sys-typography-base-weight);
  line-height: var(--sys-typography-base-line-height);
}

.stepped {
  margin: auto;
  width: 100%;
}
@media screen and (min-width: 600px) {
  .stepped {
    width: 540px;
  }
}
@media screen and (min-width: 840px) {
  .stepped {
    width: 800px;
  }
}
@media screen and (min-width: 1200px) {
  .stepped {
    width: 1000px;
  }
}
@media screen and (min-width: 1600px) {
  .stepped {
    width: 1000px;
  }
}

.top-0 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

span.base-light {
  color: var(--base-light-overlay);
}
span.danger-light {
  color: var(--danger-light-overlay);
}
span.disabled-light {
  color: var(--disabled-light-overlay);
}
span.info-light {
  color: var(--info-light-overlay);
}
span.link-light {
  color: var(--link-light-overlay);
}
span.primary-light {
  color: var(--primary-light-overlay);
}
span.secondary-light {
  color: var(--secondary-light-overlay);
}
span.success-light {
  color: var(--success-light-overlay);
}
span.base {
  color: var(--base-overlay);
}
span.danger {
  color: var(--danger-overlay);
}
span.disabled {
  color: var(--disabled-overlay);
}
span.info {
  color: var(--info-overlay);
}
span.link {
  color: var(--link-overlay);
}
span.primary {
  color: var(--primary-overlay);
}
span.secondary {
  color: var(--secondary-overlay);
}
span.success {
  color: var(--success-overlay);
}
span.base-dark {
  color: var(--base-dark-overlay);
}
span.danger-dark {
  color: var(--danger-dark-overlay);
}
span.disabled-dark {
  color: var(--disabled-dark-overlay);
}
span.info-dark {
  color: var(--info-dark-overlay);
}
span.link-dark {
  color: var(--link-dark-overlay);
}
span.primary-dark {
  color: var(--primary-dark-overlay);
}
span.secondary-dark {
  color: var(--secondary-dark-overlay);
}
span.success-dark {
  color: var(--success-dark-overlay);
}

.button {
  --button-min-height: 0;
  --button-padding: 0px;
  align-items: center;
  border: 2px solid transparent;
  border-radius: var(--button-border-radius);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--button-font-size);
  font-weight: 400;
  justify-content: center;
  line-height: var(--button-line-height);
  min-height: var(--button-min-height);
  padding: 0 var(--button-padding);
  position: relative;
  outline: none;
  text-decoration: none;
  transition: 100ms border-radius ease-in-out, 250ms background-color ease-in-out, 250ms color ease-in-out;
  white-space: nowrap;
}
.button:focus, .button:focus-visible, .button:target {
  outline: 2px solid blue;
}
@media (prefers-color-scheme: light) {
  .button.disabled-dark, .button.disabled-light, .button.disabled, .button[disabled] {
    background-color: var(--ref-gray-80) !important;
    border-color: transparent !important;
    color: var(--ref-gray-30) !important;
    cursor: not-allowed;
  }
}
[data-theme=light] .button.disabled-dark, [data-theme=light] .button.disabled-light, [data-theme=light] .button.disabled, [data-theme=light] .button[disabled] {
  background-color: var(--ref-gray-80) !important;
  border-color: transparent !important;
  color: var(--ref-gray-30) !important;
  cursor: not-allowed;
}
@media (prefers-color-scheme: dark) {
  .button.disabled-dark, .button.disabled-light, .button.disabled, .button[disabled] {
    background-color: var(--ref-gray-30) !important;
    border-color: transparent !important;
    color: var(--ref-gray-70) !important;
    pointer-events: none;
  }
}
[data-theme=dark] .button.disabled-dark, [data-theme=dark] .button.disabled-light, [data-theme=dark] .button.disabled, [data-theme=dark] .button[disabled] {
  background-color: var(--ref-gray-30) !important;
  border-color: transparent !important;
  color: var(--ref-gray-70) !important;
  pointer-events: none;
}
.button.extra-small {
  --button-border-radius: 16px;
  --button-padding: 12px;
  --button-line-height: 1.7;
  --button-min-height: 32px;
  --button-font-size: var(--font-size-a11y);
}
.button.extra-small:active {
  --button-border-radius: 8px;
}
.button.extra-small[disabled] {
  --button-border-radius: 16px !important;
}
.button.small {
  --button-border-radius: 20px;
  --button-padding: 12px;
  --button-font-size: var(--font-size-a11y);
  --button-line-height: 1.7;
  --button-min-height: 40px;
}
.button.small:active {
  --button-border-radius: 8px;
}
.button.small[disabled] {
  --button-border-radius: 20px !important;
}
.button.medium {
  --button-border-radius: 28px;
  --button-padding: 24px;
  --button-font-size: calc(var(--font-size-a11y) * 1.1);
  --button-line-height: 1.5;
  --button-min-height: 56px;
}
.button.medium:active {
  --button-border-radius: 12px;
}
.button.medium[disabled] {
  --button-border-radius: 28px !important;
}
.button.large {
  --button-border-radius: 48px;
  --button-padding: 48px;
  --button-font-size: calc(var(--font-size-a11y) * 1.5);
  --button-line-height: 1.3;
  --button-min-height: 96px;
}
.button.large:active {
  --button-border-radius: 16px;
}
.button.large[disabled] {
  --button-border-radius: 48px !important;
}
.button.extra-large {
  --button-border-radius: 68px;
  --button-padding: 64px;
  --button-font-size: calc(var(--font-size-a11y) * 1.75);
  --button-line-height: 1.25;
  --button-min-height: 136px;
}
.button.extra-large:active {
  --button-border-radius: 16px;
}
.button.extra-large[disabled] {
  --button-border-radius: 68px !important;
}
.button.busy {
  color: transparent !important;
  pointer-events: none;
}
.button.busy::after {
  animation: spinAround 500ms infinite linear;
  border: calc(var(--button-min-height) / 10) solid white;
  border-radius: var(--button-min-height);
  border-top-color: transparent;
  content: "";
  display: block;
  height: calc(var(--button-min-height) * 0.5);
  left: calc(50% - var(--font-size-base) * 0.5);
  top: calc(50% - var(--font-size-base) * 0.5);
  position: absolute;
  width: calc(var(--button-min-height) * 0.5);
}
.button.busy.extra-small {
  --button-border-radius: 8px;
}
.button.busy.small {
  --button-border-radius: 8px;
}
.button.busy.medium {
  --button-border-radius: 12px;
}
.button.busy.large {
  --button-border-radius: 16px;
}
.button.busy.extra-large {
  --button-border-radius: 16px;
}
.button.outline {
  font-weight: 700;
}
.button.danger-light {
  background-color: var(--danger-light);
  color: var(--danger-light-overlay);
}
.button.danger-light.outline {
  color: var(--danger-light);
  background-color: transparent;
  border-color: var(--danger-light);
}
.button.disabled-light {
  background-color: var(--disabled-light);
  color: var(--disabled-light-overlay);
}
.button.disabled-light.outline {
  color: var(--disabled-light);
  background-color: transparent;
  border-color: var(--disabled-light);
}
.button.info-light {
  background-color: var(--info-light);
  color: var(--info-light-overlay);
}
.button.info-light.outline {
  color: var(--info-light);
  background-color: transparent;
  border-color: var(--info-light);
}
.button.link-light {
  background-color: var(--link-light);
  color: var(--link-light-overlay);
}
.button.link-light.outline {
  color: var(--link-light);
  background-color: transparent;
  border-color: var(--link-light);
}
.button.primary-light {
  background-color: var(--primary-light);
  color: var(--primary-light-overlay);
}
.button.primary-light.outline {
  color: var(--primary-light);
  background-color: transparent;
  border-color: var(--primary-light);
}
.button.secondary-light {
  background-color: var(--secondary-light);
  color: var(--secondary-light-overlay);
}
.button.secondary-light.outline {
  color: var(--secondary-light);
  background-color: transparent;
  border-color: var(--secondary-light);
}
.button.success-light {
  background-color: var(--success-light);
  color: var(--success-light-overlay);
}
.button.success-light.outline {
  color: var(--success-light);
  background-color: transparent;
  border-color: var(--success-light);
}
.button.danger {
  background-color: var(--danger);
  color: var(--danger-overlay);
}
.button.danger.outline {
  color: var(--danger);
  background-color: transparent;
  border-color: var(--danger);
}
.button.disabled {
  background-color: var(--disabled);
  color: var(--disabled-overlay);
}
.button.disabled.outline {
  color: var(--disabled);
  background-color: transparent;
  border-color: var(--disabled);
}
.button.info {
  background-color: var(--info);
  color: var(--info-overlay);
}
.button.info.outline {
  color: var(--info);
  background-color: transparent;
  border-color: var(--info);
}
.button.link {
  background-color: var(--link);
  color: var(--link-overlay);
}
.button.link.outline {
  color: var(--link);
  background-color: transparent;
  border-color: var(--link);
}
.button.primary {
  background-color: var(--primary);
  color: var(--primary-overlay);
}
.button.primary.outline {
  color: var(--primary);
  background-color: transparent;
  border-color: var(--primary);
}
.button.secondary {
  background-color: var(--secondary);
  color: var(--secondary-overlay);
}
.button.secondary.outline {
  color: var(--secondary);
  background-color: transparent;
  border-color: var(--secondary);
}
.button.success {
  background-color: var(--success);
  color: var(--success-overlay);
}
.button.success.outline {
  color: var(--success);
  background-color: transparent;
  border-color: var(--success);
}
.button.danger-dark {
  background-color: var(--danger-dark);
  color: var(--danger-dark-overlay);
}
.button.danger-dark.outline {
  color: var(--danger-dark);
  background-color: transparent;
  border-color: var(--danger-dark);
}
.button.disabled-dark {
  background-color: var(--disabled-dark);
  color: var(--disabled-dark-overlay);
}
.button.disabled-dark.outline {
  color: var(--disabled-dark);
  background-color: transparent;
  border-color: var(--disabled-dark);
}
.button.info-dark {
  background-color: var(--info-dark);
  color: var(--info-dark-overlay);
}
.button.info-dark.outline {
  color: var(--info-dark);
  background-color: transparent;
  border-color: var(--info-dark);
}
.button.link-dark {
  background-color: var(--link-dark);
  color: var(--link-dark-overlay);
}
.button.link-dark.outline {
  color: var(--link-dark);
  background-color: transparent;
  border-color: var(--link-dark);
}
.button.primary-dark {
  background-color: var(--primary-dark);
  color: var(--primary-dark-overlay);
}
.button.primary-dark.outline {
  color: var(--primary-dark);
  background-color: transparent;
  border-color: var(--primary-dark);
}
.button.secondary-dark {
  background-color: var(--secondary-dark);
  color: var(--secondary-dark-overlay);
}
.button.secondary-dark.outline {
  color: var(--secondary-dark);
  background-color: transparent;
  border-color: var(--secondary-dark);
}
.button.success-dark {
  background-color: var(--success-dark);
  color: var(--success-dark-overlay);
}
.button.success-dark.outline {
  color: var(--success-dark);
  background-color: transparent;
  border-color: var(--success-dark);
}
.button.base-third {
  background-color: var(--container-base-third);
  color: var(--container-content-base-third);
}
.button.base {
  background-color: var(--container-base);
  color: var(--container-content-base);
}
.button.base-second {
  background-color: var(--container-base-second);
  color: var(--container-content-base-second);
}
.button.danger-light:hover, .button.danger-light:active, .button.danger-light.busy {
  background-color: var(--danger-active-light);
  color: var(--danger-active-light-overlay);
}
.button.disabled-light:hover, .button.disabled-light:active, .button.disabled-light.busy {
  background-color: var(--disabled-active-light);
  color: var(--disabled-active-light-overlay);
}
.button.info-light:hover, .button.info-light:active, .button.info-light.busy {
  background-color: var(--info-active-light);
  color: var(--info-active-light-overlay);
}
.button.link-light:hover, .button.link-light:active, .button.link-light.busy {
  background-color: var(--link-active-light);
  color: var(--link-active-light-overlay);
}
.button.primary-light:hover, .button.primary-light:active, .button.primary-light.busy {
  background-color: var(--primary-active-light);
  color: var(--primary-active-light-overlay);
}
.button.secondary-light:hover, .button.secondary-light:active, .button.secondary-light.busy {
  background-color: var(--secondary-active-light);
  color: var(--secondary-active-light-overlay);
}
.button.success-light:hover, .button.success-light:active, .button.success-light.busy {
  background-color: var(--success-active-light);
  color: var(--success-active-light-overlay);
}
.button.danger:hover, .button.danger:active, .button.danger.busy {
  background-color: var(--danger-active);
  color: var(--danger-active-overlay);
}
.button.disabled:hover, .button.disabled:active, .button.disabled.busy {
  background-color: var(--disabled-active);
  color: var(--disabled-active-overlay);
}
.button.info:hover, .button.info:active, .button.info.busy {
  background-color: var(--info-active);
  color: var(--info-active-overlay);
}
.button.link:hover, .button.link:active, .button.link.busy {
  background-color: var(--link-active);
  color: var(--link-active-overlay);
}
.button.primary:hover, .button.primary:active, .button.primary.busy {
  background-color: var(--primary-active);
  color: var(--primary-active-overlay);
}
.button.secondary:hover, .button.secondary:active, .button.secondary.busy {
  background-color: var(--secondary-active);
  color: var(--secondary-active-overlay);
}
.button.success:hover, .button.success:active, .button.success.busy {
  background-color: var(--success-active);
  color: var(--success-active-overlay);
}
.button.danger-dark:hover, .button.danger-dark:active, .button.danger-dark.busy {
  background-color: var(--danger-active-dark);
  color: var(--danger-active-dark-overlay);
}
.button.disabled-dark:hover, .button.disabled-dark:active, .button.disabled-dark.busy {
  background-color: var(--disabled-active-dark);
  color: var(--disabled-active-dark-overlay);
}
.button.info-dark:hover, .button.info-dark:active, .button.info-dark.busy {
  background-color: var(--info-active-dark);
  color: var(--info-active-dark-overlay);
}
.button.link-dark:hover, .button.link-dark:active, .button.link-dark.busy {
  background-color: var(--link-active-dark);
  color: var(--link-active-dark-overlay);
}
.button.primary-dark:hover, .button.primary-dark:active, .button.primary-dark.busy {
  background-color: var(--primary-active-dark);
  color: var(--primary-active-dark-overlay);
}
.button.secondary-dark:hover, .button.secondary-dark:active, .button.secondary-dark.busy {
  background-color: var(--secondary-active-dark);
  color: var(--secondary-active-dark-overlay);
}
.button.success-dark:hover, .button.success-dark:active, .button.success-dark.busy {
  background-color: var(--success-active-dark);
  color: var(--success-active-dark-overlay);
}
.button.base-third:hover, .button.base-third:active, .button.base-third.busy {
  background-color: var(--container-base-third);
  color: var(--container-content-base-third);
}
.button.base:hover, .button.base:active, .button.base.busy {
  background-color: var(--container-base);
  color: var(--container-content-base);
}
.button.base-second:hover, .button.base-second:active, .button.base-second.busy {
  background-color: var(--container-base-second);
  color: var(--container-content-base-second);
}

.button-label {
  background-color: transparent;
}

.image {
  display: block;
  position: relative;
}
.image img,
.image svg {
  display: block;
  height: auto;
  width: 100%;
}

fieldset {
  border: 0;
}

.field {
  background-color: var(--theme-container-color);
  margin: var(--ref-measure-fixed-4) 0;
  position: relative;
}
.field .control {
  border-width: 1px;
  border-style: solid;
  border-radius: var(--sys-corner-tiny);
  display: flex;
  padding: 2px;
}
@media (prefers-color-scheme: light) {
  .field .control {
    border-color: var(--ref-gray-70);
  }
}
[data-theme=light] .field .control {
  border-color: var(--ref-gray-70);
}
@media (prefers-color-scheme: dark) {
  .field .control {
    border-color: var(--ref-gray-50);
  }
}
[data-theme=dark] .field .control {
  border-color: var(--ref-gray-50);
}
.field .control:has(.dirty:invalid) {
  border-color: var(--danger);
  border-width: 3px;
  padding: 0;
}
@media (prefers-color-scheme: dark) {
  .field .control:has(.dirty:invalid) {
    border-color: var(--ref-palette-red-60);
  }
}
[data-theme=dark] .field .control:has(.dirty:invalid) {
  border-color: var(--ref-palette-red-60);
}
.field .control.dirty, .field .control:has(.dirty:valid) {
  border-color: var(--success);
  border-width: 3px;
  padding: 0;
}
@media (prefers-color-scheme: dark) {
  .field .control.dirty, .field .control:has(.dirty:valid) {
    border-color: var(--success-light);
  }
}
[data-theme=dark] .field .control.dirty, [data-theme=dark] .field .control:has(.dirty:valid) {
  border-color: var(--success-light);
}
.field .control.dirty.invalid, .field .control:has(.dirty.invalid) {
  border-color: var(--danger);
  border-width: 3px;
  padding: 0;
}
@media (prefers-color-scheme: dark) {
  .field .control.dirty.invalid, .field .control:has(.dirty.invalid) {
    border-color: var(--ref-palette-red-60);
  }
}
[data-theme=dark] .field .control.dirty.invalid, [data-theme=dark] .field .control:has(.dirty.invalid) {
  border-color: var(--ref-palette-red-60);
}
.field .control:has(:focus) {
  border-color: var(--secondary) !important;
  border-width: 3px;
  padding: 0;
}
@media (prefers-color-scheme: dark) {
  .field .control:has(:focus) {
    border-color: var(--secondary-light) !important;
  }
}
[data-theme=dark] .field .control:has(:focus) {
  border-color: var(--secondary-light) !important;
}
.field .control:has(> .checkbox) {
  border-width: 0;
}
.field .control:has(input[disabled]), .field .control:has(textarea[disabled]) {
  background-color: var(--disabled) !important;
  color: var(--disabled-overlay) !important;
}
.field .control .date,
.field .control .email,
.field .control .number,
.field .control .password,
.field .control .search,
.field .control .text,
.field .control .time,
.field .control .url {
  border-width: 0;
  color: var(--theme-font-color);
  flex-grow: 1;
  margin: var(--ref-measure-fixed-2) var(--ref-measure-fixed-4);
  outline: 0;
  width: 100%;
  font-family: var(--ref-font-family-base);
  font-size: var(--font-size-a11y);
  font-weight: var(--sys-typography-base-weight);
  line-height: var(--sys-typography-base-line-height);
}
.field .label {
  --label-font-size-multiplier: 0.75;
  background-color: inherit;
  margin-left: calc(var(--ref-measure-fixed-4) + 3px - var(--ref-measure-fixed-2));
  margin-top: calc(var(--ref-measure-fixed-3));
  padding-left: var(--ref-measure-fixed-2);
  padding-right: var(--ref-measure-fixed-2);
  position: absolute;
  transition: margin-top var(--sys-animation-duration-base) ease-in-out, font-size var(--sys-animation-duration-base) ease-in-out;
}
.field .label:has(+ .control :focus) {
  font-size: calc(var(--font-size-a11y) * var(--label-font-size-multiplier));
  margin-top: calc(var(--sys-typography-base-line-height) * var(--font-size-a11y) * var(--label-font-size-multiplier) / -2);
}
.field .label {
  font-family: var(--ref-font-family-base);
  font-size: var(--font-size-a11y);
  font-weight: var(--sys-typography-base-weight);
  line-height: var(--sys-typography-base-line-height);
}
.field label.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ref-measure-fixed-2);
  align-items: baseline;
  font-family: var(--ref-font-family-base);
  font-size: var(--font-size-a11y);
  font-weight: var(--sys-typography-base-weight);
  line-height: var(--sys-typography-base-line-height);
}
.field:has(.control .date) .label, .field:has(.control .time) .label, .field.not-empty .label {
  font-size: calc(var(--font-size-a11y) * var(--label-font-size-multiplier));
  margin-top: calc(var(--sys-typography-base-line-height) * var(--font-size-a11y) * var(--label-font-size-multiplier) / -2);
}
.field .support {
  margin-left: calc(var(--ref-measure-fixed-4) + 3px - var(--ref-measure-fixed-2));
  padding-left: var(--ref-measure-fixed-2);
  font-family: var(--ref-font-family-base);
  font-size: var(--font-size-a11y);
  font-weight: var(--sys-typography-base-weight);
  line-height: var(--sys-typography-base-line-height);
  font-size: calc(var(--font-size-a11y) * 0.8);
}
.field .control-textarea {
  display: grid;
  flex-grow: 1;
}
.field .control-textarea::after {
  content: attr(data-replicated-value) " ";
  margin: var(--ref-measure-fixed-2) var(--ref-measure-fixed-4);
  visibility: hidden;
  white-space: pre-wrap;
  font-family: var(--ref-font-family-base);
  font-size: var(--font-size-a11y);
  font-weight: var(--sys-typography-base-weight);
  line-height: var(--sys-typography-base-line-height);
  grid-area: 1/1/2/2;
}
.field .textarea {
  border-width: 0;
  color: var(--theme-font-color);
  overflow: hidden;
  padding: var(--ref-measure-fixed-2) var(--ref-measure-fixed-4);
  resize: none;
  font-family: var(--ref-font-family-base);
  font-size: var(--font-size-a11y);
  font-weight: var(--sys-typography-base-weight);
  line-height: var(--sys-typography-base-line-height);
  grid-area: 1/1/2/2;
}

@media screen and (min-width: 769px) {
  .media-section-container {
    column-gap: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .media-section-container:has(.media-section-media-image) {
    grid-template-columns: 1.5fr 1fr;
  }
  .media-section-container {
    grid-template-areas: "media-section-title media-section-title" "media-section-subtitle media-section-subtitle" "media-section-content media-section-media" "media-section-cta media-section-media";
    margin: auto;
    max-width: 615.2px;
  }
}
@media screen and (min-width: 1025px) {
  .media-section-container {
    column-gap: 2rem;
    max-width: 820px;
  }
}

.media-section {
  padding: 2em 1em;
  clear: both;
}
.media-section:nth-child(even) {
  background-color: var(--yellow);
  border-top: 8px solid var(--purple);
  border-bottom: 8px solid var(--purple);
  color: var(--yellow-overlay);
}
@media screen and (min-width: 1025px) {
  .media-section:nth-child(even) .media-section-container {
    grid-template-areas: "media-section-title media-section-title" "media-section-subtitle media-section-subtitle" "media-section-media media-section-content" "media-section-media media-section-cta";
  }
  .media-section:nth-child(even) .media-section-container:has(.media-section-media-image) {
    grid-template-columns: 1fr 1.5fr;
  }
}

.media-section-media {
  grid-area: media-section-media;
}

.media-section-title {
  font-size: var(--section-title);
  grid-area: media-section-title;
}
@media screen and (min-width: 769px) {
  .media-section-title {
    margin-bottom: 0.75rem;
  }
}

.media-section-subtitle {
  font-size: var(--section-subtitle);
  grid-area: media-section-subtitle;
  margin-bottom: 0.5em;
}
.media-section-subtitle:empty {
  display: none;
}

.media-section-content p:not(:last-child),
.media-section-content ul:not(:last-child),
.media-section-content ol:not(:last-child),
.media-section-content blockquote:not(:last-child) {
  margin-bottom: 1em;
}
.media-section-content ol,
.media-section-content ul {
  margin-left: 1em;
}
.media-section-content ul {
  list-style-type: disc;
}
.media-section-content dt {
  font-size: 1.1em;
  font-weight: bold;
}
.media-section-content dt:not(:first-child) {
  margin-top: 1em;
}
.media-section-content dd {
  border-left: 2px dotted var(--dark);
  padding-left: 0.5em;
}
.media-section-content h4 {
  font-size: var(--section-subtitle);
}
.media-section-content {
  grid-area: media-section-content;
}

.media-section-media-image {
  display: none;
}
@media screen and (min-width: 769px) {
  .media-section-media-image {
    display: block;
    border-radius: 1rem;
  }
}

.media-section-cta {
  display: flex;
  grid-area: media-section-cta;
  justify-content: center;
  margin: 2em 0 0 0;
}

.aabf2025-header {
  background-color: var(--pink);
}
@media screen and (min-width: 1025px) {
  .aabf2025-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "text image";
    padding-bottom: calc(0.5 * var(--header-drop-length));
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--header-drop-length)), 50% 100%, 0% calc(100% - var(--header-drop-length)));
  }
}

.aabf2025-header-sections {
  background-color: var(--yellow);
  font-size: var(--section-subtitle);
  min-height: 100svh;
  padding-bottom: var(--header-drop-length);
  grid-area: text;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "f1 first f2" "f1 second f2" "f1 third f2";
  justify-items: end;
  clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--header-drop-length)), 50% 100%, 0% calc(100% - var(--header-drop-length)));
}
@media screen and (min-height: 650px) {
  .aabf2025-header-sections {
    min-height: inherit;
    padding-top: var(--header-drop-length);
    padding-bottom: calc(2 * var(--header-drop-length));
  }
}
@media screen and (min-width: 1025px) {
  .aabf2025-header-sections {
    grid-template-columns: 1rem 1fr 0;
    align-content: center;
    padding: 1rem 1rem calc(var(--header-drop-length) + 1rem) 1rem;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% calc(100% - var(--header-drop-length)));
  }
}

.aabf2025-header-sections-section {
  display: none;
  width: 10em;
}
.aabf2025-header-sections-section:nth-child(1) {
  display: block;
  grid-area: first;
}
.aabf2025-header-sections-section:nth-child(2) {
  display: block;
  grid-area: second;
}
.aabf2025-header-sections-section:nth-child(3) {
  display: block;
  grid-area: third;
}

.aabf2025-header-sections-section:not(:last-child) {
  margin-bottom: 1em;
}

.aabf2025-header-sections-section-first {
  color: var(--yellow-overlay);
}

.aabf2025-header-sections-section-second {
  color: var(--yellow-overlay);
  font-weight: bold;
}

.aabf2025-header-sections-section-third {
  font-weight: bold;
  color: var(--purple);
}

.aabf2025-header-image {
  background-color: var(--theme-container-color);
  background-image: url(/images/pexels-leeloothefirst-5556287.jpg);
  background-size: cover;
  background-position: center;
  grid-area: image;
  color: var(--ref-gray-90);
  text-align: center;
  font-size: calc(1.5 * var(--sys-headers-2-size));
  font-weight: var(--ref-font-weight-light);
  text-decoration: var(--sys-headers-1-decoration);
  line-height: calc(1.1 * var(--sys-headers-1-line-height));
  font-variant: var(--sys-headers-1-style);
  padding: var(--ref-measure-fixed-8);
}
@media screen and (min-width: 1025px) {
  .aabf2025-header-image {
    display: grid;
    align-items: center;
    font-size: calc(1.5 * var(--sys-headers-1-size));
    min-height: 400px;
    padding: 1rem 1rem calc(var(--header-drop-length) + 1rem) 1rem;
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--header-drop-length)), 0% 100%);
  }
}

.aabf2025-main {
  --altcha-border-width: 1px;
  --altcha-border-radius: var(--sys-corner-extra-tiny);
  --altcha-color-base: transparent;
  --altcha-color-border: var(--ref-gray-70);
  --altcha-color-text: var(--theme-font-color);
  --altcha-color-border-focus: currentColor;
  --altcha-color-error-text: #f23939;
  --altcha-color-footer-bg: transparent;
  --altcha-max-width: 260px;
}
.aabf2025-main .altcha-logo {
  display: none;
}
.aabf2025-main {
  margin: auto;
}
.aabf2025-main .box,
.aabf2025-main .contact-form {
  margin-top: var(--ref-measure-fixed-8);
  margin-bottom: var(--ref-measure-fixed-8);
}
.aabf2025-main .formatted h1 {
  font-size: var(--sys-headers-2-size);
  font-weight: var(--sys-headers-2-weight);
  text-decoration: var(--sys-headers-1-decoration);
  line-height: calc(1.1 * var(--sys-headers-1-line-height));
  font-variant: var(--sys-headers-1-style);
  margin-bottom: var(--ref-measure-fixed-8);
}
@media screen and (min-width: 840px) {
  .aabf2025-main .formatted h1 {
    font-size: var(--sys-headers-1-size);
  }
}
.aabf2025-main .formatted h2 {
  font-size: var(--sys-headers-3-size);
  font-weight: var(--sys-headers-3-weight);
  text-decoration: var(--sys-headers-2-decoration);
  line-height: var(--sys-headers-2-line-height);
  font-variant: var(--sys-headers-2-style);
  margin-bottom: var(--ref-measure-fixed-8);
}
@media screen and (min-width: 840px) {
  .aabf2025-main .formatted h2 {
    font-size: var(--sys-headers-2-size);
  }
}
.aabf2025-main .formatted p {
  margin-top: var(--ref-measure-fixed-4);
  margin-bottom: var(--ref-measure-fixed-4);
}
.aabf2025-main .formatted strong {
  color: var(--secondary-dark);
}
@media (prefers-color-scheme: dark) {
  .aabf2025-main .formatted strong {
    color: var(--primary);
  }
}
[data-theme=dark] .aabf2025-main .formatted strong {
  color: var(--primary);
}
.aabf2025-main .formatted ul {
  padding-left: var(--ref-measure-fixed-8);
  list-style-type: disc;
  margin-top: var(--ref-measure-fixed-4);
  margin-bottom: var(--ref-measure-fixed-6);
}
.aabf2025-main .formatted p:last-child,
.aabf2025-main .formatted ul:last-child {
  margin-bottom: 0;
}
.aabf2025-main .formatted .book-title {
  font-style: italic;
}
.aabf2025-main .formatted .author-name {
  font-weight: 500;
}

.script {
  font-family: Outbound !important;
  font-size: 1.5em;
}

.extra-bold {
  font-weight: 800 !important;
}

.submit-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1em;
}

@keyframes spinAround {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
html {
  --base-font-size: 18px;
  --font-size-a11y: var(--base-font-size);
  --phone: 0px;
  --tablet: 769px;
  --desktop: 1025px;
  --gray-h: 274;
  --gray-s: 3%;
  --gray-l: 45%;
  --light-gray: hsl(var(--gray-h) var(--gray-s) calc(var(--gray-l) * 2));
  --dark-h: 165;
  --dark-s: 100%;
  --dark-l: 7%;
  --header-drop-length: max(5vh, 4rem);
  --control-radius: 0.25em;
  --page-title: 2.5rem;
  --page-subtitle: 1.75rem;
  --section-title: 2rem;
  --section-subtitle: 1.75rem;
  --gray: hsl(var(--gray-h) var(--gray-s) var(--gray-l));
  --gray-shadow: 0px 0.25em 0.5em 0px hsl(var(--gray-h) var(--gray-s) var(--gray-l) / 0.3);
  --gray-backdrop: hsl(var(--gray-h) var(--gray-s) var(--gray-l) / 0.8);
  --dark: hsl(var(--dark-h) var(--dark-s) var(--dark-l));
  --dark-shadow: 0px 0.25em 0.5em 0px hsl(var(--dark-h) var(--dark-s) var(--dark-l) / 0.3);
  --dark-backdrop: hsl(var(--dark-h) var(--dark-s) var(--dark-l) / 0.8);
  height: 100vh;
}
@media screen and (min-width: 769px) {
  html {
    --page-title: 3.75rem;
    --page-subtitle: 2.75rem;
    --section-title: 2.75rem;
    --section-subtitle: 2.25rem;
  }
}
@media screen and (min-width: 1025px) {
  html {
    --page-title: 6.5rem;
    --page-subtitle: 3.75rem;
    --section-title: 3.75rem;
    --section-subtitle: 2.5rem;
  }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-size: var(--base-font-size);
  font-family: Segment;
}

.main-page-header {
  background-color: var(--pink);
}
@media screen and (min-width: 1025px) {
  .main-page-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-bottom: calc(0.5 * var(--header-drop-length));
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--header-drop-length)), 50% 100%, 0% calc(100% - var(--header-drop-length)));
  }
}

.main-page-header-sections {
  background-color: var(--yellow);
  font-size: var(--section-subtitle);
  min-height: 100vh;
  padding-bottom: var(--header-drop-length);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "f1 first f2" "f1 second f2" "f1 third f2";
  clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--header-drop-length)), 50% 100%, 0% calc(100% - var(--header-drop-length)));
}
@media screen and (min-height: 650px) {
  .main-page-header-sections {
    min-height: inherit;
    padding-top: var(--header-drop-length);
    padding-bottom: calc(2 * var(--header-drop-length));
  }
}
@media screen and (min-width: 1025px) {
  .main-page-header-sections {
    grid-template-columns: 1rem 1fr 0;
    align-content: center;
    padding: 1rem 1rem calc(var(--header-drop-length) + 1rem) 1rem;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% calc(100% - var(--header-drop-length)));
  }
}

.main-page-header-sections-section {
  display: none;
}
.main-page-header-sections-section:nth-child(1) {
  display: block;
  grid-area: first;
}
.main-page-header-sections-section:nth-child(2) {
  display: block;
  grid-area: second;
}
.main-page-header-sections-section:nth-child(3) {
  display: block;
  grid-area: third;
}

.main-page-header-sections-section:not(:last-child) {
  margin-bottom: 1em;
}

.main-page-header-sections-section-first {
  color: var(--yellow-overlay);
}

.main-page-header-sections-section-second {
  color: var(--yellow-overlay);
  font-weight: bold;
}

.main-page-header-sections-section-third {
  font-weight: bold;
  color: var(--purple);
}

.main-page-header-cta {
  background-color: var(--dark);
  color: var(--yellow);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--header-drop-length) + 1rem) 1rem 1rem 1rem;
  clip-path: polygon(0% 0%, 50% var(--header-drop-length), 100% 0%, 100% 100%, 0% 100%);
}
@media screen and (min-width: 1025px) {
  .main-page-header-cta {
    padding: 1rem 1rem calc(var(--header-drop-length) + 1rem) 1rem;
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--header-drop-length)), 0% 100%);
  }
}

.cta {
  padding: 1em;
  display: grid;
  grid-template-areas: "media" "headline" "title" "problem" "controls";
  row-gap: 1em;
  justify-items: center;
  margin: 3rem auto;
}
@media screen and (min-width: 769px) {
  .cta {
    column-gap: 1em;
    max-width: 669px;
  }
  .cta.cta-horizontal {
    background-color: var(--theme-container-color);
    border: 1px solid var(--pink);
    border-radius: 1rem;
    box-shadow: var(--pink-shadow);
    color: var(--theme-font-color);
    grid-template-areas: "media headline" "media title" "media problem" "media controls";
  }
}

.cta-media {
  display: block;
  position: relative;
  width: min(40vw, 200px);
  grid-area: media;
}
.cta-media img, .cta-media svg {
  display: block;
  width: 100%;
  height: auto;
}

.cta-headline {
  grid-area: headline;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
}

.cta-title {
  grid-area: title;
  font-size: 2rem;
  text-align: center;
}

.cta-problem {
  grid-area: problem;
}
@media screen and (min-width: 769px) {
  .cta-problem {
    text-align: center;
  }
}

.cta-controls {
  grid-area: controls;
}

main {
  flex: 1 0 0px;
}

footer {
  background-color: var(--dark);
  color: var(--yellow);
  padding: 4em 1em 1em 1em;
}
footer nav a {
  color: white;
}
footer nav li:not(:last-child) {
  margin-bottom: 0.5em;
}
footer .copyright {
  margin-top: 2em;
  font-size: 0.75em;
}

.max-width-600 {
  max-width: 600px;
}

.hero {
  display: grid;
  grid-template-areas: "gap title gap2" "gap subtitle gap2";
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr 1fr;
  position: relative;
}
.hero.hero-typewriter {
  background-color: var(--pink);
}
.hero.hero-work-together {
  background-color: var(--purple);
  color: white;
}
.hero.hero-is-fullheight {
  min-height: 100vh;
}
@media screen and (min-width: 769px) {
  .hero .hero-title,
  .hero .hero-subtitle {
    max-width: 769px;
  }
}
@media screen and (min-width: 1025px) {
  .hero .hero-title,
  .hero .hero-subtitle {
    max-width: 1025px;
  }
}
.hero .hero-title {
  grid-area: title;
  align-self: end;
  font-size: var(--page-title);
  padding: 1rem;
  position: relative;
  z-index: 1;
}
.hero .hero-subtitle {
  grid-area: subtitle;
  align-self: start;
  font-size: var(--page-subtitle);
  padding: 0 1rem 1rem 1rem;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .hero {
    padding: 4rem;
  }
}
@media screen and (min-width: 1025px) {
  .hero {
    padding: 8rem;
  }
}

.hero::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: " ";
  filter: blur(1px) grayscale(100%) opacity(25%);
  background-size: cover;
  background-position: top;
}
@media screen and (min-width: 769px) {
  .hero::before {
    filter: blur(2px) grayscale(100%) opacity(25%);
  }
}
@media screen and (min-width: 1025px) {
  .hero::before {
    filter: blur(4px) grayscale(100%) opacity(25%);
  }
}

.hero-typewriter::before {
  background-image: url(/images/pexels-markus-winkler-1430818-4160144.jpg);
}

.hero-work-together::before {
  background-image: url(/images/pexels-shvetsa-5325104.jpg);
}

.icon {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  height: 1.5rem;
  width: 1.5rem;
}

.icon-text {
  align-items: flex-start;
  color: inherit;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25em;
  line-height: 1.5rem;
  vertical-align: top;
}
.icon-text .icon {
  flex-grow: 0;
  flex-shrink: 0;
}

.content > p,
.content > blockquote,
.content > h3 {
  margin-bottom: 1em;
}

.novel-novel-design-main {
  flex-grow: 1;
  margin: 0 auto;
  position: relative;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .novel-novel-design-main {
    max-width: 769px;
  }
}
@media screen and (min-width: 1025px) {
  .novel-novel-design-main {
    max-width: 1025px;
  }
}

@media screen and (min-width: 769px) {
  .novel-novel-design-main-content {
    display: grid;
    column-gap: 1rem;
    grid-template-columns: 1fr 1fr;
  }
}

.novel-novel-design-section {
  color: white;
  padding: 3rem 1.5rem;
  background-color: var(--purple);
  clip-path: polygon(0 0, 100% 1rem, 100% 100%, 0 calc(100% - 1rem));
  display: grid;
  justify-content: stretch;
  align-items: stretch;
}
.novel-novel-design-section h3 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ref-measure-fixed-4);
  margin-top: 2rem;
  font-size: var(--section-subtitle);
  font-weight: bold;
}
.novel-novel-design-section h3 svg {
  height: calc(2 * var(--section-subtitle));
  width: calc(2 * var(--section-subtitle));
  fill: white;
}
.novel-novel-design-section blockquote {
  margin: 0;
  padding-bottom: 1rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 1rem));
  background-color: var(--yellow);
  color: black;
  padding: 1rem 1rem 2rem 1rem;
}
.novel-novel-design-section blockquote :last-child {
  margin-top: 1rem;
  text-align: right;
}
.novel-novel-design-section .content {
  display: flex;
  flex-direction: column;
}
.novel-novel-design-section .content p:last-of-type {
  flex-grow: 1;
}
.novel-novel-design-section:first-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 1rem));
}
.novel-novel-design-section:last-child {
  clip-path: polygon(0 0, 100% 1rem, 100% 100%, 0 100%);
}
.novel-novel-design-section:last-child blockquote {
  clip-path: none;
}
@media screen and (min-width: 769px) {
  .novel-novel-design-section:nth-child(2) {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 1rem));
  }
  .novel-novel-design-section:nth-child(odd) {
    clip-path: polygon(0 1rem, 100% 0, 100% calc(100% - 1rem), 0 100%);
  }
  .novel-novel-design-section:nth-child(odd) blockquote {
    margin-top: auto;
    padding-bottom: 1rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1rem), 0 100%);
    background-color: var(--yellow);
    color: black;
    padding: 1rem 1rem 2rem 1rem;
  }
  .novel-novel-design-section:first-child {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1rem), 0 100%);
  }
  .novel-novel-design-section:nth-last-child(2) {
    clip-path: polygon(0 0, 100% 1rem, 100% calc(100% - 1rem), 0 calc(100% - 1rem));
  }
  .novel-novel-design-section:nth-last-child(2) blockquote {
    clip-path: none;
  }
  .novel-novel-design-section:last-child {
    clip-path: polygon(0 1rem, 100% 0, 100% 100%, 0 100%);
  }
  .novel-novel-design-section:last-child blockquote {
    clip-path: none;
  }
}
.novel-novel-design-section:nth-child(3n+1) {
  background-color: var(--dark);
}
.novel-novel-design-section:nth-child(3n) {
  background-color: var(--gray);
}
@media screen and (min-width: 1025px) {
  .novel-novel-design-section {
    padding: 3rem 3rem;
  }
}

@media screen and (min-width: 769px) {
  .novel-novel-design-main-content-even .novel-novel-design-section:nth-last-child(2) {
    clip-path: polygon(0 1rem, 100% 0, 100% 100%, 0 100%);
  }
  .novel-novel-design-main-content-even .novel-novel-design-section:nth-last-child(2) blockquote {
    clip-path: none;
  }
  .novel-novel-design-main-content-even .novel-novel-design-section:last-child {
    clip-path: polygon(0 0, 100% 1rem, 100% 100%, 0 100%);
  }
  .novel-novel-design-main-content-even .novel-novel-design-section:last-child blockquote {
    clip-path: none;
  }
}

.novel-novel-design-introduction {
  font-size: var(--section-subtitle);
}
.novel-novel-design-introduction p {
  margin: 1.25em 1em;
}

dialog {
  background-color: var(--theme-container-color);
  border: 4px solid var(--purple);
  border-radius: 0.5em;
  box-shadow: 0 4px 6px var(--yellow), 0 0 20px var(--yellow);
  color: var(--theme-font-color);
  padding: 0;
  max-width: min(400px, 98vw);
}
dialog > * {
  padding: 1em;
}

dialog header {
  background-color: var(--purple);
  color: white;
}

dialog::backdrop {
  background-color: var(--dark-backdrop);
  backdrop-filter: blur(3px);
}

.dialog-title {
  font-size: var(--section-subtitle);
  margin-bottom: 1rem;
}

.dialog-controls {
  display: flex;
  margin-top: 1.5em;
  justify-content: space-between;
  flex-direction: row-reverse;
}

.is-centered {
  text-align: center;
}

.tp {
  margin-top: var(--ref-measure-fixed-4);
}

.box.brand-nav,
.box.login {
  width: 300px;
}
@media screen and (min-width: 390px) {
  .box.brand-nav,
  .box.login {
    width: 400px;
  }
}

.prefs-main {
  margin: 0 auto var(--ref-measure-relative-16) auto;
}
@media screen and (min-width: 769px) {
  .prefs-main {
    max-width: 769px;
  }
}
.prefs-main p:not(:last-child),
.prefs-main ul:not(:last-child),
.prefs-main ol:not(:last-child),
.prefs-main blockquote:not(:last-child) {
  margin-bottom: 1em;
}
.prefs-main ol,
.prefs-main ul {
  margin-left: 1em;
}
.prefs-main ul {
  list-style-type: disc;
}
.prefs-main dt {
  font-size: 1.1em;
  font-weight: bold;
}
.prefs-main dt:not(:first-child) {
  margin-top: 1em;
}
.prefs-main dd {
  border-left: 2px dotted var(--dark);
  padding-left: 0.5em;
}
.prefs-main h4 {
  font-size: var(--section-subtitle);
}
.prefs-main h3 {
  font-size: var(--sys-headers-4-size);
  margin-bottom: var(--ref-measure-relative-8);
}

.prefs-form {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  row-gap: var(--ref-measure-fixed-8);
  column-gap: var(--ref-measure-fixed-4);
}

.prefs-form-controls {
  display: flex;
  grid-column-start: 1;
  grid-column-end: 3;
  justify-content: flex-end;
}

.policy-main {
  margin: 0 auto var(--ref-measure-relative-16) auto;
}
@media screen and (min-width: 769px) {
  .policy-main {
    max-width: 769px;
  }
}
.policy-main h1, .policy-main h2, .policy-main h3, .policy-main h4, .policy-main p {
  margin-bottom: var(--ref-measure-relative-4);
}
.policy-main h4 {
  margin-top: var(--ref-measure-relative-8);
  font-size: 110%;
  font-weight: 700;
}
.policy-main ul {
  list-style-type: disc;
  padding-left: var(--ref-measure-relative-8);
}

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