*, :before, :after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, ul, ol, dd {
  margin: 0;
}

:where(ul[role="list"], ol[role="list"]) {
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(ul, ol):not([role="list"]) {
  padding-inline-start: 1.2em;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.6;
}

h1, h2, h3, h4, button, input, label {
  line-height: 1.1;
}

h1, h2, h3, h4 {
  text-wrap: balance;
}

img, picture, video, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

input, button, textarea, select {
  font: inherit;
}

textarea:not([rows]) {
  min-height: 10em;
}

:target {
  scroll-margin-block: 5ex;
}

:root {
  --opacity-1: .1;
  --opacity-2: .15;
  --opacity-3: .3;
  --opacity-4: .5;
  --opacity-5: .7;
  --color_brand_teal: #00999e;
  --color_brand_teal_dark: #008285;
  --color_brand_teal_darkest: #003638;
  --color_brand_teal_light: #d7eeef;
  --color_brand_teal_muted: #bbe1e2;
  --color_brand_teal_highlight: #00c0c7;
  --color_brand_orange: #ec6a32;
  --color_brand_orange_dark: #ba5026;
  --color_brand_orange_darkest: #933915;
  --color_brand_orange_light: #fce6de;
  --color_brand_orange_muted: #f29d78;
  --color_brand_orange_highlight: #f8733a;
  --color_accent_plusCyan: #00d8db;
  --color_accent_plusCyan_light: #e5fbfb;
  --color_accent_plusPurple: #301683;
  --color_accent_plusPurple_light: #eae8f2;
  --color_accent_red: #ff382e;
  --color_accent_red_light: #ffeceb;
  --color_accent_yellow: #ffd000;
  --color_accent_yellow_light: #fff4e6;
  --color_functional_blue: #1f89e5;
  --color_functional_blue_light: #d2e7f9;
  --color_functional_crimson: #d53048;
  --color_functional_crimson_light: #ffe0e0;
  --color_functional_green: #2ebd86;
  --color_functional_green_light: #d4f2e6;
  --color_mono_black: #212121;
  --color_mono_black_alpha_1: #2121211a;
  --color_mono_black_alpha_2: #21212126;
  --color_mono_white: #fff;
  --color_mono_white_alpha_1: #ffffff1a;
  --color_mono_white_alpha_2: #ffffff26;
  --color_mono_grey_1: #f5f5f5;
  --color_mono_grey_2: #ebebeb;
  --color_mono_grey_3: #d6d6d6;
  --color_mono_grey_4: #adadad;
  --color_mono_grey_5: #737373;
}

[dir="ltr"] {
  --text-x-direction: 1;
}

[dir="rtl"] {
  --text-x-direction: -1;
}

[data-theme="not-preferred"], [data-theme="dark"] {
  --media-prefers-dark: ;
}

[data-theme="preferred"], [data-theme="light"] {
  --media-prefers-dark: initial;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="not-preferred"]), [data-theme="preferred"] {
    --media-prefers-dark: ;
  }

  [data-theme="not-preferred"] {
    --media-prefers-dark: initial;
  }
}

:root, [data-theme="preferred"], [data-theme="not-preferred"], [data-theme="light"], [data-theme="dark"] {
  --color_fg__dark: var(--media-prefers-dark) var(--color_mono_white);
  --color_fg_accent_2__dark: var(--media-prefers-dark) var(--color_accent_plusPurple_light);
  --color_fg_contrast__dark: var(--media-prefers-dark) var(--color_mono_black);
  --color_bg__dark: var(--media-prefers-dark) var(--color_mono_black);
  --color_bg_accent_2__dark: var(--media-prefers-dark) var(--color_accent_plusPurple_light);
  --color_bg_accent-2_light__dark: var(--media-prefers-dark) #080416;
  --color_bg_secondary__dark: var(--media-prefers-dark) #181616;
  --color_bg_brand_primary_raw__dark: var(--media-prefers-dark) 182 100% 31%;
  --color_bg_brand_secondary_raw__dark: var(--media-prefers-dark) 18 83% 56%;
  --color_bg_contrast__dark: var(--media-prefers-dark) var(--color_mono_white);
  --color_border-accent_2__dark: var(--media-prefers-dark) #4f32ae;
  --color_border_contrast__dark: var(--media-prefers-dark) var(--color_mono_grey_5);
  --color_border__dark: var(--media-prefers-dark) var(--color_mono_white_alpha_2);
  --color_border_muted__dark: var(--media-prefers-dark) var(--color_mono_white_alpha_1);
  --theme_scheme__dark: var(--media-prefers-dark) dark;
  --color-fg: var(--color_fg__dark, var(--color_mono_black));
  --color-fg-muted: var(--color_fg__dark, var(--color_mono_grey_5));
  --color-fg-contrast: var(--color_fg_contrast__dark, var(--color_mono_white));
  --color-fg-brand-primary: var(--color_fg_brand_primary__dark, var(--color_brand_teal));
  --color-fg-brand-secondary: var(--color_fg_brand_secondary__dark, var(--color_brand_orange));
  --color-fg-code: var(--color_fg_code__dark, var(--color_brand_teal_light));
  --color-fg-interactive: var(--color_fg_interactive__dark, var(--color_brand_teal_dark));
  --color-fg-interactive-hover: var(--color_fg_interactive_hover__dark, var(--color_brand_teal_darkest));
  --color-fg-onInteractive: var(--color_fg_onInteractive__dark, var(--color_mono_white));
  --color-fg-negative: var(--color_fg_negative__dark, var(--color_functional_crimson));
  --color-fg-positive: var(--color_fg_positive__dark, var(--color_functional_green));
  --color-fg-accent-1: var(--color_fg_accent_1__dark, var(--color_accent_red));
  --color-fg-accent-2: var(--color_fg_accent_2__dark, var(--color_accent_plusPurple));
  --color-fg-accent-3: var(--color_fg_accent_3__dark, var(--color_accent_plusCyan));
  --color-fg-accent-4: var(--color_fg_accent_4__dark, var(--color_accent_yellow));
  --color-bg: var(--color_bg__dark, var(--color_mono_white));
  --color-bg-contrast: var(--color_bg_contrast__dark, var(--color_mono_black));
  --color-bg-code: var(--color_bg_code__dark, var(--color_brand_teal_darkest));
  --color-bg-secondary: var(--color_bg_secondary__dark, var(--color_mono_grey_1));
  --color-bg-tertiary: var(--color_bg_tertiary__dark, var(--color_mono_grey_2));
  --color-bg-interactive: var(--color_bg_interactive__dark, var(--color_brand_orange));
  --color-bg-interactive-hover: var(--color_bg_interactive_hover__dark, var(--color_brand_orange_dark));
  --color-bg-selected: var(--color_bg_selected__dark, var(--color_mono_black));
  --color-bg-accent-1: var(--color_bg_accent_1__dark, var(--color_accent_red));
  --color-bg-accent-2: var(--color_bg_accent_2__dark, var(--color_accent_plusPurple));
  --color-bg-accent-3: var(--color_bg_accent_3__dark, var(--color_accent_plusCyan));
  --color-bg-accent-4: var(--color_bg_accent_4__dark, var(--color_accent_yellow));
  --color-bg-accent-1-light: var(--color_bg_accent-1_light__dark, var(--color_accent_red_light));
  --color-bg-accent-2-light: var(--color_bg_accent-2_light__dark, var(--color_accent_plusPurple_light));
  --color-bg-accent-3-light: var(--color_bg_accent-3_light__dark, var(--color_accent_plusCyan_light));
  --color-bg-accent-4-light: var(--color_bg_accent-4_light__dark, var(--color_accent_yellow_light));
  --color-bg-brand-primary: var(--color_bg_brand_primary__dark, var(--color_brand_teal));
  --color-bg-brand-primary-light: var(--color_bg_brand_primary_light__dark, var(--color_brand_teal_light));
  --color-bg-brand-primary-dark: var(--color_bg_brand_primary_dark__dark, var(--color_brand_teal_dark));
  --color-bg-brand-primary-darkest: var(--color_bg_brand_primary_darkest__dark, var(--color_brand_teal_darkest));
  --color-bg-brand-primary-muted: var(--color_bg_brand_primary_muted__dark, var(--color_brand_teal_muted));
  --color-bg-brand-primary-highlight: var(--color_bg_brand_primary_highlight__dark, var(--color_brand_teal_highlight));
  --color-bg-brand-secondary: var(--color_bg_brand_secondary__dark, var(--color_brand_orange));
  --color-bg-brand-secondary-light: var(--color_bg_brand_secondary_light__dark, var(--color_brand_orange_light));
  --color-bg-brand-secondary-dark: var(--color_bg_brand_secondary_dark__dark, var(--color_brand_orange_dark));
  --color-bg-brand-secondary-darkest: var(--color_bg_brand_secondary_darkest__dark, var(--color_brand_orange_darkest));
  --color-bg-brand-secondary-muted: var(--color_bg_brand_secondary_muted__dark, var(--color_brand_orange_muted));
  --color-bg-brand-secondary-highlight: var(--color_bg_brand_secondary_highlight__dark, var(--color_brand_orange_highlight));
  --color-border: var(--color_border__dark, var(--color_mono_black_alpha_2));
  --color-border-contrast: var(--color_border_contrast__dark, var(--color_mono_black));
  --color-border-muted: var(--color_border_muted__dark, var(--color_mono_black_alpha_1));
  --color-border-negative: var(--color_border_negative__dark, var(--color_functional_crimson));
  --color-border-positive: var(--color_border_positive__dark, var(--color_functional_green));
  --color-border-selected: var(--color_border_selected__dark, var(--color_mono_black));
  --color-border-accent-1: var(--color_border-accent_1__dark, var(--color_accent_red));
  --color-border-accent-2: var(--color_border-accent_2__dark, var(--color_accent_plusPurple));
  --color-border-accent-3: var(--color_border-accent_3__dark, var(--color_accent_plusCyan));
  --color-border-accent-4: var(--color_border-accent_4__dark, var(--color_accent_yellow));
  --color-bg-brand-primary-raw: var(--color_bg_brand_primary_raw__dark, 182 100% 31%);
  --color-bg-brand-secondary-raw: var(--color_bg_brand_secondary_raw__dark, 18 83% 56%);
  color-scheme: var(--theme_scheme__dark, light);
}

:root {
  --space-3xs: clamp(.25rem, .2283rem + .1087vi, .3125rem);
  --space-2xs: clamp(.5rem, .4783rem + .1087vi, .5625rem);
  --space-xs: clamp(.75rem, .7065rem + .2174vi, .875rem);
  --space-s: clamp(1rem, .9565rem + .2174vi, 1.125rem);
  --space-m: clamp(1.5rem, 1.4348rem + .3261vi, 1.6875rem);
  --space-l: clamp(2rem, 1.913rem + .4348vi, 2.25rem);
  --space-xl: clamp(3rem, 2.8696rem + .6522vi, 3.375rem);
  --space-2xl: clamp(4rem, 3.8261rem + .8696vi, 4.5rem);
  --space-3xl: clamp(5rem, 4.7826rem + 1.087vi, 5.625rem);
  --space-4xl: clamp(6rem, 5.581rem + 1.5vi, 7.25rem);
  --radius-s: .125rem;
  --radius-m: .25rem;
  --radius-l: .5rem;
  --radius-pill: 360px;
  --radius-round: 50%;
  --page-gutters: clamp(var(--space-m), 3vi, var(--space-xl));
  --page-max: 88rem;
  --skew-block-start: polygon(0 100%, 0 4vw, 100% 0, 100% 100%);
  --skew-block-end: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%);
  --ease-out: cubic-bezier(.33, 1, .68, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-in-bg {
  from {
    background: none;
  }

  to {
    background: var(--bg-fade-color, --color-theme-muted);
  }
}

@keyframes fade-in-scale-back {
  from {
    opacity: 0;
    scale: 1.04;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes fade-in-scale-up {
  from {
    opacity: .01;
    scale: .8;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes scale-back {
  from {
    scale: 1.16;
  }

  to {
    scale: 1.001;
  }
}

@keyframes slide-up-right {
  from {
    translate: -12px 12px;
  }

  to {
    translate: 0;
  }
}

@keyframes pulsate {
  100% {
    text-shadow: 0 0 8px var(--color-bg-brand-primary-muted), 0 0 10px var(--color-bg-brand-primary-highlight), 0 0 45px var(--color-bg-brand-primary-highlight), 0 0 55px var(--color-bg-brand-primary-highlight), 0 0 70px var(--color-bg-brand-primary-highlight);
  }

  0% {
    text-shadow: 0 0 6px var(--color-bg-brand-primary-muted), 0 0 8px var(--color-bg-brand-primary-muted), 0 0 10px var(--color-bg-brand-primary-highlight), 0 0 45px var(--color-bg-brand-primary-highlight), 0 0 55px var(--color-bg-brand-primary-highlight), 0 0 70px var(--color-bg-brand-primary-highlight), 0 0 80px var(--color-bg-brand-primary-highlight);
  }
}

@font-face {
  font-family: URW DIN Condensed Black;
  src: url("/fonts/urw-din-condensed-black.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
  font-style: normal;
}

@font-face {
  font-family: URW DIN Condensed Black;
  src: url("../fonts/urw-din-condensed-black-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: URW DIN Condensed Black Fallback;
  src: local(Arial Narrow);
  size-adjust: 88%;
  ascent-override: 100%;
}

@font-face {
  font-family: Abel Pro;
  src: url("../fonts/abel-pro.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Abel Pro;
  src: url("../fonts/abel-pro-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Abel Pro Fallback;
  src: local(Arial Narrow);
  size-adjust: 105%;
  ascent-override: 105%;
}

@font-face {
  font-family: Jet Brains Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jet-brains-mono-regular.woff2") format("woff2");
}

@font-face {
  font-family: Zallord;
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/zallord.woff2") format("woff2");
}

:root {
  --step--2: clamp(.6944rem, .814rem + -.1196vi, .7901rem);
  --step--1: clamp(.8333rem, .9028rem + -.0694vi, .8889rem);
  --step-0: clamp(1rem, 1rem + 0vi, 1rem);
  --step-1: clamp(1.125rem, 1.1063rem + .0938vi, 1.2rem);
  --step-2: clamp(1.2656rem, 1.222rem + .218vi, 1.44rem);
  --step-3: clamp(1.4238rem, 1.3478rem + .3802vi, 1.728rem);
  --step-4: clamp(1.6018rem, 1.4839rem + .5897vi, 2.0736rem);
  --step-5: clamp(1.802rem, 1.6305rem + .8579vi, 2.4883rem);
  --step-6: clamp(2.0273rem, 1.7876rem + 1.1984vi, 2.986rem);
  --step-7: clamp(2.2807rem, 1.9551rem + 1.6281vi, 3.5832rem);
  --step-8: clamp(2.5658rem, 2.1323rem + 2.1675vi, 4.2998rem);
  --font-base: "Abel Pro", "Abel Pro Fallback", Tahoma, system-ui, sans-serif;
  --font-display: "URW DIN Condensed Black", "URW DIN Condensed Black Fallback", var(--font-base);
  --font-graffiti: "Zallord", var(--font-base);
  --font-mono: "Jet Brains Mono", monospace;
  --font-bold: 700;
  --font-semibold: 600;
  --font-normal: 400;
  --focus-outline: 2px solid var(--color-bg-brand-primary);
  --focus-outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-base);
  font-size: var(--step-0);
  font-weight: var(--font-normal);
}

@media (prefers-reduced-motion: no-preference) {
  body {
    transition: all .2s;
  }
}

::selection {
  background: var(--color-bg-brand-primary);
  color: var(--color-fg-contrast);
}

:-webkit-any(a, .link) {
  color: var(--color-fg-interactive);
  text-underline-offset: 2px;
  -webkit-text-decoration-skip-ink: auto;
  text-decoration-skip-ink: auto;
  scroll-margin-block: var(--space-xl);
  text-decoration: underline;
}

:is(a, .link) {
  color: var(--color-fg-interactive);
  text-underline-offset: 2px;
  -webkit-text-decoration-skip-ink: auto;
  text-decoration-skip-ink: auto;
  scroll-margin-block: var(--space-xl);
  text-decoration: underline;
}

:-webkit-any(a, .link):where(:hover, :focus-visible) {
  color: var(--color-fg-interactive-hover);
  text-decoration: none;
}

:is(a, .link):where(:hover, :focus-visible) {
  color: var(--color-fg-interactive-hover);
  text-decoration: none;
}

:-webkit-any(a, .link, button):focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

:is(a, .link, button):focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

:-webkit-any(strong, .font-bold) {
  font-weight: var(--font-bold);
  letter-spacing: -.01em;
}

:is(strong, .font-bold) {
  font-weight: var(--font-bold);
  letter-spacing: -.01em;
}

.font-semibold {
  font-weight: var(--font-semibold);
}

.text-reset {
  font: inherit;
  line-height: inherit;
  text-shadow: unset;
  text-wrap: initial;
}

.text-label {
  font-size: .6em;
  font-weight: var(--font-semibold);
  text-transform: uppercase;
}

figcaption {
  text-align: center;
  margin-block-start: var(--space-2xs);
  margin-inline-start: .2rem;
  font-size: .85em;
  font-style: italic;
  line-height: 1.3;
}

summary {
  list-style: none;
  display: inline;
}

summary:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

summary::-webkit-details-marker {
  display: none;
}

summary:before {
  content: "+";
  margin-inline-end: .2em;
}

details[open] summary:before {
  content: "−";
}

fieldset {
  border: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.prose img {
  border-radius: var(--radius-l);
  width: 100%;
  height: auto;
}

.prose p:empty {
  display: none;
}

.prose pre[class*="language-"] {
  margin-block: var(--space-2xl) var(--space-s);
  grid-column: popout;
}

.prose figure {
  margin-block: var(--space-2xl) var(--space-s);
  grid-column: popout;
}

.prose * + :-webkit-any(h2, h3, h4) {
  --flow-space: var(--space-xl);
}

.prose * + :is(h2, h3, h4) {
  --flow-space: var(--space-xl);
}

.language-name {
  display: inline-block;
}

.language-name:first-letter {
  text-transform: uppercase;
}

.breakout {
  --gutter-max: calc(1rem + 10vw);
  --gap: var(--space-m);
  --content: min(var(--page-max), 100% - var(--gap) * 2);
  --gutter: minmax(var(--gap), var(--gutter-max));
  --popout: minmax(0px, 1rem);
  grid-template-columns: [full-start] 1fr [gutter-start] var(--gutter) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--gutter) [gutter-end] 1fr [full-end];
  display: grid;
}

:where(.breakout) > * {
  grid-column: content-start / content-end;
}

main.breakout {
  padding-block: var(--space-m);
}

.center {
  padding-inline: var(--gutters, var(--page-gutters));
  inline-size: min(var(--max, var(--page-max)), 100%);
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.cluster {
  gap: var(--row-gap, var(--gap, var(--space-m))) var(--column-gap, var(--gap, var(--space-m)));
  align-items: var(--align, center);
  justify-content: var(--justify, flex-start);
  flex-wrap: wrap;
  display: flex;
}

.flow > * + * {
  --flow-space: var(--space-l);
  margin-block-start: var(--flow-space, 1em);
}

.grid {
  gap: var(--gap, var(--row-gap, var(--space-m))) var(--gap, var(--column-gap, var(--space-m)));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
  display: grid;
}

.flex-grid {
  gap: var(--gap, var(--row-gap, var(--space-m))) var(--gap, var(--column-gap, var(--space-m)));
  flex-wrap: wrap;
  display: flex;
}

.flex-grid > * {
  flex: 1 1 var(--min, auto);
}

.stack {
  grid-template-areas: "stack";
  display: grid;
}

.stack > * {
  grid-area: stack;
}

.stack:before {
  grid-area: stack;
}

.stack:after {
  grid-area: stack;
}

.box {
  border-radius: var(--radius-m);
  border: 1px solid var(--color-bg-brand-primary-highlight);
  background: linear-gradient(60deg, var(--color-bg), var(--color-bg-brand-primary));
}

.button-primary {
  cursor: pointer;
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--radius-m);
  background-color: var(--color-bg-brand-secondary);
  color: var(--color-fg-contrast);
  font-size: var(--font-size, var(--step-1));
  font-weight: var(--font-normal);
  font-family: var(--font-display);
  text-transform: uppercase;
  text-shadow: 1px 1px #0000000d;
  border: 1px solid #00000026;
  justify-content: center;
  align-items: center;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  box-shadow: 0 1px 3px #00000059;
}

.button-primary:where(:hover, :focus-visible) {
  background-color: var(--color-bg-brand-secondary-dark);
}

.button-primary:where(:active) {
  box-shadow: inset 0 0 4px #0003;
}

@media (prefers-reduced-motion: no-preference) {
  .button-primary {
    transition: all .2s;
  }
}

.button-plain {
  padding: var(--space-3xs);
  justify-content: center;
  align-items: center;
  gap: var(--space-3xs);
  border-radius: var(--radius-m);
  cursor: pointer;
  color: var(--color-fg);
  font-size: var(--font-size, var(--step-0));
  font-weight: var(--font-normal);
  font-family: var(--font-display);
  text-transform: uppercase;
  background-color: #0000;
  border: none;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
}

.button-plain:where(:hover, :focus-visible) {
  color: var(--color-bg-brand-secondary);
}

@media (prefers-reduced-motion: no-preference) {
  .button-plain {
    transition: all .2s;
  }
}

.callout {
  gap: var(--space-s);
  margin-block: var(--space-l) var(--space-s);
  padding: var(--space-s);
  border-radius: var(--radius-l);
  background-color: var(--color-bg-brand-primary);
  color: var(--color-fg-contrast);
  isolation: isolate;
  flex-direction: column;
  grid-column: popout;
  font-size: .875em;
  display: flex;
  position: relative;
}

.callout a {
  color: var(--color-fg-contrast);
}

code, pre {
  font-size: .9em;
  line-height: 1.4;
  font-family: var(--font-mono);
  border-radius: var(--radius-s);
}

pre[class*="language-"] {
  padding: var(--space-xs);
  color: var(--color-fg-code);
  background-color: var(--color-bg-code);
  border-radius: var(--radius-m);
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  tab-size: 4;
  -webkit-hyphens: none;
  hyphens: none;
}

:where(:not(pre)) > code {
  background-color: var(--color-bg);
  padding: .02em .3em .04em;
  font-size: .85em;
  position: relative;
  top: -.025em;
}

:where(:not(a, pre, blockquote)) > code {
  color: var(--color-fg-contrast);
}

pre[class*="language-"] {
  position: relative;
  overflow: auto;
}

.language-css > code, .language-sass > code, .language-scss > code {
  color: #fd9170;
}

[class*="language-"] .namespace {
  opacity: .7;
}

.token.atrule {
  color: #c792ea;
}

.token.attr-name {
  color: #ffcb6b;
}

.token.attr-value, .token.attribute {
  color: #c3e88d;
}

.token.boolean {
  color: #c792ea;
}

.token.builtin {
  color: #ffcb6b;
}

.token.cdata, .token.char {
  color: #80cbc4;
}

.token.class {
  color: #ffcb6b;
}

.token.class-name, .token.color {
  color: #f2ff00;
}

.token.comment {
  color: #779daf;
}

.token.constant {
  color: #c792ea;
}

.token.deleted {
  color: #f07178;
}

.token.doctype {
  color: #546e7a;
}

.token.entity {
  color: #f07178;
}

.token.function {
  color: #c792ea;
}

.token.hexcode {
  color: #f2ff00;
}

.token.id, .token.important {
  color: #c792ea;
  font-weight: var(--font-bold);
}

.token.inserted {
  color: #80cbc4;
}

.token.keyword {
  color: #c792ea;
  font-style: italic;
}

.token.number {
  color: #fd9170;
}

.token.operator {
  color: #89ddff;
}

.token.prolog {
  color: #546e7a;
}

.token.property {
  color: #80cbc4;
}

.token.pseudo-class, .token.pseudo-element {
  color: #c3e88d;
}

.token.punctuation {
  color: #89ddff;
}

.token.regex {
  color: #f2ff00;
}

.token.selector {
  color: #f07178;
}

.token.string {
  color: #c3e88d;
}

.token.symbol {
  color: #c792ea;
}

.token.tag, .token.unit {
  color: #f07178;
}

.token.url {
  color: #fd9170;
}

.token.variable {
  color: #f07178;
}

.cta:before, .cta:after {
  pointer-events: none;
  display: inline-block;
}

.cta.arrow-start:before {
  content: "←";
}

.cta.arrow-end:after {
  content: "→";
}

.cta.arrow-start:has(:hover, :focus-visible):before {
  color: var(--color-bg-brand-dark);
  animation: .4s ease-out infinite cta;
}

.cta.arrow-end:has(:hover, :focus-visible):after {
  color: var(--color-bg-brand-dark);
  animation: .4s ease-out infinite cta;
}

@keyframes cta {
  50% {
    transform: translateX(2px);
  }
}

.form {
  gap: var(--space-s);
  flex-direction: column;
  display: flex;
}

label {
  display: block;
}

label > span {
  margin-block-end: var(--space-2xs);
  display: block;
}

.checkbox {
  align-items: center;
  gap: var(--space-2xs);
  display: flex;
}

.checkbox > span {
  margin: 0;
}

input[type="text"], input[type="email"] {
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  outline-offset: 2px;
  width: 100%;
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  :is(input[type="text"], input[type="email"]) {
    transition: all .2s;
  }
}

:is(input[type="text"], input[type="email"]):focus {
  border: 1px solid var(--color-border-selected);
}

.required:after {
  content: "*";
  margin-inline-start: var(--space-3xs);
}

input:focus-visible {
  outline: var(--focus-outline);
}

input[type="checkbox"] {
  --_size: 1rem;
  font: inherit;
  outline-offset: 3px;
  inline-size: var(--_size);
  block-size: var(--_size);
  border: 1px solid var(--color-bg-brand-dark);
  flex-shrink: 0;
}

button.link {
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  background-color: #0000;
  border-width: 0;
  padding: 0;
  display: inline;
}

input[type="range"] {
  --color-track: var(--color-bg-brand-primary);
  --color-thumb: var(--color-bg-brand-dark);
  --radius-track: var(--radius-pill);
  --radius-thumb: var(--radius-s);
  --height-track: .3rem;
  --height-thumb: 1rem;
  --width-thumb: calc(var(--height-thumb) * 2);
  -webkit-appearance: none;
  appearance: none;
  padding-block: var(--space-3xs);
  cursor: grab;
  background: none;
  outline: none;
  width: 100%;
}

@media (forced-colors: active) {
  input[type="range"] {
    forced-color-adjust: none;
  }
}

input[type="range"]:active {
  cursor: grabbing;
}

input[type="range"]::-webkit-slider-runnable-track {
  background-color: var(--color-track);
  border-radius: var(--radius-track);
  height: var(--height-track);
  width: 100%;
}

input[type="range"]::-moz-range-track {
  background-color: var(--color-track);
  border-radius: var(--radius-track);
  height: var(--height-track);
  width: 100%;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: calc((var(--height-thumb) / 2 - var(--height-track) / 2) * -1);
  background-color: var(--color-thumb);
  border-radius: var(--radius-thumb);
  height: var(--height-thumb);
  width: var(--width-thumb);
  box-shadow: var(--color-bg) 0 0 0 4px;
  border: none;
}

@media (forced-colors: active) {
  input[type="range"]::-webkit-slider-thumb {
    background-color: canvastext;
    box-shadow: 0 0 0 4px canvas;
  }
}

input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: calc((var(--height-thumb) / 2 - var(--height-track) / 2) * -1);
  background-color: var(--color-thumb);
  border-radius: var(--radius-thumb);
  height: var(--height-thumb);
  width: var(--width-thumb);
  box-shadow: var(--color-bg) 0 0 0 4px;
  border: none;
}

@media (forced-colors: active) {
  input[type="range"]::-moz-range-thumb {
    background-color: canvastext;
    box-shadow: 0 0 0 4px canvas;
  }
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

input[type="range"]:focus-visible::-moz-range-thumb {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

blockquote {
  padding-block: var(--space-xs);
  color: var(--color-bg-brand-dark);
  font-size: var(--step-1);
  grid-template: "mark quote"
                 "line quote" 1fr
                 / auto 1fr;
  grid-column: popout;
  column-gap: .2em;
  padding-inline-end: var(--space-l);
  line-height: 1.4;
  display: grid;
}

blockquote > * {
  text-indent: .4em;
  grid-area: quote;
}

blockquote code {
  color: var(--color-bg-brand-dark);
  background-color: var(--color-bg-brand-primary-muted);
}

blockquote:before {
  content: "“";
  color: var(--color-bg-brand-dark);
  grid-area: mark;
  place-self: start;
  height: .5em;
  font-family: Georgia, serif;
  font-size: 3.4em;
  line-height: 1;
  transform: translateY(-.025em);
}

blockquote:after {
  content: "";
  border-radius: var(--radius-pill);
  background-color: var(--color-bg-brand-dark);
  grid-area: line;
  place-self: stretch center;
  width: .2em;
  height: 100%;
  transform: translateY(-.1em);
}

.skewer {
  --angle: -3deg;
  --unskew: rotate(calc(var(--angle) * -1)) skew(calc(var(--angle) * -1));
  transform: rotate(var(--angle)) skew(var(--angle));
}

.unskew {
  transform: var(--unskew);
}

.skewed-edge-start {
  clip-path: var(--skew-block-start);
}

.skewed-edge-end {
  clip-path: var(--skew-block-end);
}

.pseudo-gradient {
  isolation: isolate;
  position: relative;
}

.pseudo-gradient:before {
  content: "";
  border-radius: var(--radius-m);
  background: linear-gradient(to right, transparent 20%, var(--color-bg-brand-primary));
  z-index: -1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-mask-image: linear-gradient(70deg, #0000 25%, #000);
  mask-image: linear-gradient(70deg, #0000 25%, #000);
}

.checkerboard-pattern {
  background-image: conic-gradient(var(--color-1, white) 90deg, var(--color-2, black) 0 180deg, var(--color-1, white) 0 270deg, var(--color-2, black) 0);
  background-size: var(--bg-size, 36px) var(--bg-size, 36px);
}

.icon {
  width: var(--icon-size, 1.5rem);
  height: var(--icon-size, 1.5rem);
  vertical-align: middle;
}

.multi-column {
  column-width: var(--column-width, 250px);
  column-gap: var(--column-gap, var(--space-m));
}

.scroll-x {
  --scrollbar-offset: 4px;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  max-width: 100%;
  overflow-x: scroll;
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-x:focus-within {
    scroll-behavior: smooth;
  }
}

.scroll-x::-webkit-scrollbar {
  display: none;
}

.scroll-x::-webkit-scrollbar {
  background-color: #0000;
  height: 12px;
}

.scroll-x::-webkit-scrollbar-thumb {
  background-color: #0000;
}

.scroll-x:hover::-webkit-scrollbar {
  background-color: var(--color-fg);
  box-shadow: inset var(--color-bg) 0 0 0 var(--scrollbar-offset);
}

.scroll-x::-webkit-scrollbar:active {
  background-color: var(--color-fg);
  box-shadow: inset var(--color-bg) 0 0 0 var(--scrollbar-offset);
}

.scroll-x:hover::-webkit-scrollbar-thumb {
  background-color: var(--color-fg);
  border-left: var(--scrollbar-offset) solid var(--color-bg);
  border-right: var(--scrollbar-offset) solid var(--color-bg);
}

.scroll-x::-webkit-scrollbar-thumb:active {
  background-color: var(--color-fg);
  border-left: var(--scrollbar-offset) solid var(--color-bg);
  border-right: var(--scrollbar-offset) solid var(--color-bg);
}

.visually-hidden {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

[data-hidemobile] {
  --_display: var(--media-gte-sm) block;
  display: var(--_display, none);
}

:-webkit-any(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  text-wrap: balance;
  font-weight: normal;
}

:is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  text-wrap: balance;
  font-weight: normal;
}

:-webkit-any(h1, h2, h3, h4) {
  text-transform: uppercase;
}

:is(h1, h2, h3, h4) {
  text-transform: uppercase;
}

:-webkit-any(h1, .text-8) {
  font-size: var(--step-8);
  line-height: 1.1;
}

:is(h1, .text-8) {
  font-size: var(--step-8);
  line-height: 1.1;
}

.text-7 {
  font-size: var(--step-7);
  line-height: 1.2;
}

:-webkit-any(h2, .text-6) {
  font-size: var(--step-6);
  line-height: 1.2;
}

:is(h2, .text-6) {
  font-size: var(--step-6);
  line-height: 1.2;
}

:-webkit-any(h3, .text-5) {
  font-size: var(--step-5);
  line-height: 1.2;
}

:is(h3, .text-5) {
  font-size: var(--step-5);
  line-height: 1.2;
}

:-webkit-any(h4, .text-4) {
  font-size: var(--step-4);
  line-height: 1.3;
}

:is(h4, .text-4) {
  font-size: var(--step-4);
  line-height: 1.3;
}

:-webkit-any(h5, .text-3) {
  font-size: var(--step-3);
  line-height: 1.4;
}

:is(h5, .text-3) {
  font-size: var(--step-3);
  line-height: 1.4;
}

:-webkit-any(h6, .text-2) {
  font-size: var(--step-2);
  line-height: 1.5;
}

:is(h6, .text-2) {
  font-size: var(--step-2);
  line-height: 1.5;
}

.text-1 {
  font-size: var(--step-1);
  line-height: 1.6;
}

.neon {
  color: #0000;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--color-bg-brand-primary-muted);
  text-shadow: 0 0 8px var(--color-bg-brand-primary-muted), 0 0 12px var(--color-bg-brand-primary-highlight), 0 0 45px var(--color-bg-brand-primary-highlight);
}

@media (min-width: 45rem) {
  .neon {
    text-shadow: 0 0 8px var(--color-bg-brand-primary-muted), 0 0 10px var(--color-bg-brand-primary-highlight), 0 0 45px var(--color-bg-brand-primary-highlight), 0 0 55px var(--color-bg-brand-primary-highlight);
  }
}

.graffiti {
  font-family: var(--font-graffiti);
  text-transform: none;
}