:root {
  --white: #ffffff;
  --neutral-50: #fafafa;
  --neutral-100: #f3f3f3;
  --neutral-200: #e6e6e6;
  --neutral-300: #c8c8c8;
  --neutral-400: #a8a8a8;
  --neutral-500: #808080;
  --neutral-600: #626262;
  --neutral-700: #404040;
  --neutral-800: #212121;
  --neutral-900: #0f0f0f;
  --neutral-950: #000000;
  --brand-50: #f0fdfa;
  --brand-100: #dbf8f2;
  --brand-200: #99ffe6;
  --brand-300: #00ffcc;
  --brand-400: #00e7b8;
  --brand-500: #00c8a0;
  --brand-600: #009779;
  --brand-700: #006954;
  --brand-800: #004336;
  --brand-900: #002e25;
  --brand-950: #001a15;
  --error-100: #fff0f0;
  --error-200: #ffe1e1;
  --error-300: #ffc2c2;
  --error-400: #ff8c8c;
  --error-500: #ff4747;
  --error-600: #e60000;
  --error-700: #cc0000;
  --error-800: #990000;
  --error-900: #660000;
  --error-950: #2f0404;
  --warning-100: #ffefbd;
  --warning-200: #ffeaa9;
  --warning-300: #ffe082;
  --warning-400: #ffd54f;
  --warning-500: #ffc300;
  --warning-600: #c59600;
  --warning-700: #8b6a00;
  --warning-800: #705600;
  --warning-900: #564200;
  --warning-950: #3c2e00;
  --grid-line-dark: #101010;
  --grid-cross-dark: #2f2f2f;
  --grid-line-light: #f3f3f3;
  --grid-cross-light: #d8d8d8;
  --radius: 0;
  --chamfer: 14px;
  --chamfer-sm: 8px;
  --hairline: 1px;
  --control-h: 44px;
  --control-h-sm: 36px;
  --control-h-lg: 52px;
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1440px;
  --container: 1400px;
  --gutter-base: 16px;
  --gutter-md: 32px;
  --gutter-lg: 64px;
  --gutter-xl: 100px;
  --header-height: 92px;
  --grid-cell: 100px;
  --weight-regular: 400;
  --weight-bold: 700;
  --size-display: 60px;
  --line-display: 72px;
  --size-h1: 48px;
  --line-h1: 64px;
  --size-h2: 32px;
  --line-h2: 42px;
  --size-h3: 24px;
  --line-h3: 32px;
  --size-h4: 20px;
  --line-h4: 30px;
  --size-body-l: 18px;
  --line-body-l: 28px;
  --size-body-m: 16px;
  --line-body-m: 24px;
  --size-body-s: 14px;
  --line-body-s: 20px;
  --size-caption: 12px;
  --line-caption: 18px;
  --size-overline: 10px;
  --line-overline: 15px;
  --tracking: 0;
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 400ms;
  --dur-ambient: 2400ms;
  --reveal-rise: 12px;
  --dur-type-char: 45ms;
}

:root,
.ground-dark {
  --bg-page: #000000;
  --bg-surface: #0f0f0f;
  --bg-elevated: #212121;
  --bg-subtle: #0f0f0f;
  --text-primary: #ffffff;
  --text-secondary: #a8a8a8;
  --text-tertiary: #626262;
  --text-disabled: #404040;
  --border-default: #404040;
  --border-subtle: #212121;
  --border-strong: #626262;
  --border-focus: #00ffcc;
  --brand-default: #00ffcc;
  --brand-hover: #00e7b8;
  --brand-subtle-bg: #004336;
  --brand-on-brand: #000000;
  --error-default: #ff4747;
  --error-hover: #ff8c8c;
  --error-subtle-bg: #2f0404;
  --error-on-error: #000000;
  --warning-default: #ffc300;
  --warning-hover: #ffd54f;
  --warning-subtle-bg: #3c2e00;
  --warning-on-warning: #000000;
  --grid-line: #101010;
  --grid-cross: #2f2f2f;
  --show-on-dark: block;
  --show-on-light: none;
}

.ground-light {
  --bg-page: #fafafa;
  --bg-surface: #f3f3f3;
  --bg-elevated: #ffffff;
  --bg-subtle: #f3f3f3;
  --text-primary: #000000;
  --text-secondary: #626262;
  --text-tertiary: #a8a8a8;
  --text-disabled: #c8c8c8;
  --border-default: #c8c8c8;
  --border-subtle: #e6e6e6;
  --border-strong: #626262;
  --border-focus: #009779;
  --brand-default: #009779;
  --brand-hover: #006954;
  --brand-subtle-bg: #dbf8f2;
  --brand-on-brand: #ffffff;
  --error-default: #e60000;
  --error-hover: #990000;
  --error-subtle-bg: #fff0f0;
  --error-on-error: #ffffff;
  --warning-default: #c59600;
  --warning-hover: #705600;
  --warning-subtle-bg: #ffefbd;
  --warning-on-warning: #ffffff;
  --grid-line: #f3f3f3;
  --grid-cross: #d8d8d8;
  --show-on-dark: none;
  --show-on-light: block;
}

.ground-auto {
  --bg-page: #000000;
  --bg-surface: #0f0f0f;
  --bg-elevated: #212121;
  --bg-subtle: #0f0f0f;
  --text-primary: #ffffff;
  --text-secondary: #a8a8a8;
  --text-tertiary: #626262;
  --text-disabled: #404040;
  --border-default: #404040;
  --border-subtle: #212121;
  --border-strong: #626262;
  --border-focus: #00ffcc;
  --brand-default: #00ffcc;
  --brand-hover: #00e7b8;
  --brand-subtle-bg: #004336;
  --brand-on-brand: #000000;
  --error-default: #ff4747;
  --error-hover: #ff8c8c;
  --error-subtle-bg: #2f0404;
  --error-on-error: #000000;
  --warning-default: #ffc300;
  --warning-hover: #ffd54f;
  --warning-subtle-bg: #3c2e00;
  --warning-on-warning: #000000;
  --grid-line: #101010;
  --grid-cross: #2f2f2f;
  --show-on-dark: block;
  --show-on-light: none;
}

@media (prefers-color-scheme: light) {
  .ground-auto {
    --bg-page: #fafafa;
    --bg-surface: #f3f3f3;
    --bg-elevated: #ffffff;
    --bg-subtle: #f3f3f3;
    --text-primary: #000000;
    --text-secondary: #626262;
    --text-tertiary: #a8a8a8;
    --text-disabled: #c8c8c8;
    --border-default: #c8c8c8;
    --border-subtle: #e6e6e6;
    --border-strong: #626262;
    --border-focus: #009779;
    --brand-default: #009779;
    --brand-hover: #006954;
    --brand-subtle-bg: #dbf8f2;
    --brand-on-brand: #ffffff;
    --error-default: #e60000;
    --error-hover: #990000;
    --error-subtle-bg: #fff0f0;
    --error-on-error: #ffffff;
    --warning-default: #c59600;
    --warning-hover: #705600;
    --warning-subtle-bg: #ffefbd;
    --warning-on-warning: #ffffff;
    --grid-line: #f3f3f3;
    --grid-cross: #d8d8d8;
    --show-on-dark: none;
    --show-on-light: block;
  }
}
.ground-dark,
.ground-light,
.ground-auto {
  background-color: var(--bg-page);
  color: var(--text-primary);
}

.ground-switching,
.ground-switching *,
.ground-switching *::before,
.ground-switching *::after {
  transition: none !important;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("fonts/roboto-mono/roboto-mono-latin.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("fonts/roboto-mono/roboto-mono-latin-ext.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Roboto Mono", ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
  background-color: var(--bg-page);
  color: var(--text-primary);
}

h1, h2, h3, h4, p, figure, blockquote {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.st-page {
  position: relative;
  overflow-x: clip;
}

.st-section {
  position: relative;
  isolation: isolate;
  padding-block: 64px;
}
@media (min-width: 768px) {
  .st-section {
    padding-block: 88px;
  }
}
@media (min-width: 1024px) {
  .st-section {
    padding-block: 120px;
  }
}

.st-section--hero {
  padding-block-start: calc(92px + 40px);
}
@media (min-width: 1024px) {
  .st-section--hero {
    padding-block-start: calc(92px + 72px);
  }
}

.st-container {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 768px) {
  .st-container {
    padding-inline: 32px;
  }
}
@media (min-width: 1024px) {
  .st-container {
    padding-inline: 64px;
  }
}
@media (min-width: 1440px) {
  .st-container {
    padding-inline: 100px;
  }
}

.st-measure {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
}

.st-ground {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.st-container,
.st-measure {
  position: relative;
  z-index: 1;
}