/* GENERATED FILE — do not edit directly.
   Site styles: src/styles/*.css · Kit blocks: src/styles/vendor/blocks/*.css
   Tokens: committed src/styles/tokens/ (surface-website.css, tokens.css)
   Blocks: (no kit) (none)
   Build: shared build-lib.mjs --optimize */

:root {
  --colour-neutral-0: rgb(255 255 255);
  --colour-neutral-100: rgb(242 242 242);
  --colour-neutral-200: rgb(230 230 230);
  --colour-neutral-500: rgb(154 154 154);
  --colour-neutral-600: rgb(112 112 112);
  --colour-neutral-800: rgb(52 52 52);
  --colour-neutral-825: rgb(42 42 42);
  --colour-neutral-950: rgb(10 10 10);
  --colour-accent-500: rgb(38 100 227);
}

:root, [data-theme="light"] {
  --colour-text-default: var(--colour-neutral-800);
  --colour-text-subtle: var(--colour-neutral-600);
  --colour-text-faint: var(--colour-neutral-500);
  --colour-surface-sunken: var(--colour-neutral-100);
  --colour-border-subtle: var(--colour-neutral-200);
  --colour-action-primary: var(--colour-accent-500);
  --colour-action-primary-text: var(--colour-neutral-0);
}

[data-theme="dark"] {
  --colour-text-default: var(--colour-neutral-200);
  --colour-text-subtle: var(--colour-neutral-500);
  --colour-text-faint: var(--colour-neutral-600);
  --colour-surface-sunken: var(--colour-neutral-950);
  --colour-border-subtle: var(--colour-neutral-825);
  --colour-action-primary: var(--colour-accent-500);
  --colour-action-primary-text: var(--colour-neutral-0);
}

:root {
  --viewport-width: min(100vw, 2263px);
  --canvas-scale: clamp(1px, calc(var(--viewport-width) / 1600), 1.414375px);
  --content-max-width: 2263px;
  --role-display-2-font-family: indivisible-variable, system-ui, sans-serif;
  --role-display-2-font-weight: 400;
  --role-heading-1-font-family: indivisible-variable, system-ui, sans-serif;
  --role-heading-1-font-weight: 400;
  --role-lead-font-family: indivisible-variable, system-ui, sans-serif;
  --role-lead-font-weight: 400;
  --role-body-font-family: indivisible-variable, system-ui, sans-serif;
  --role-body-font-weight: 400;
  --role-caption-font-family: indivisible-variable, system-ui, sans-serif;
  --role-caption-font-weight: 400;
  --role-code-font-family: ui-monospace, SFMono-Regular, monospace;
  --role-display-2-font-size: clamp(48px, calc(48px + 24 * ((var(--viewport-width) - 440px) / 460)), 72px);
  --role-display-2-line-height: clamp(58px, calc(58px + 30 * ((var(--viewport-width) - 440px) / 460)), 88px);
  --role-heading-1-font-size: clamp(40px, calc(40px + 10 * ((var(--viewport-width) - 440px) / 460)), 50px);
  --role-heading-1-line-height: clamp(48px, calc(48px + 12 * ((var(--viewport-width) - 440px) / 460)), 60px);
  --role-lead-font-size: clamp(20px, calc(20px + 2 * ((var(--viewport-width) - 440px) / 460)), 22px);
  --role-lead-line-height: clamp(28px, calc(28px + 4 * ((var(--viewport-width) - 440px) / 460)), 32px);
  --role-body-font-size: clamp(16px, calc(16px + 2 * ((var(--viewport-width) - 440px) / 460)), 18px);
  --role-body-line-height: clamp(24px, calc(24px + 2 * ((var(--viewport-width) - 440px) / 460)), 26px);
  --role-caption-font-size: clamp(12px, calc(12px + 2 * ((var(--viewport-width) - 440px) / 460)), 14px);
  --role-caption-line-height: clamp(18px, calc(18px + 2 * ((var(--viewport-width) - 440px) / 460)), 20px);
  --space-tight: clamp(16px, calc(16px + 2 * ((var(--viewport-width) - 440px) / 460)), 18px);
  --space-group: clamp(64px, calc(64px + 8 * ((var(--viewport-width) - 440px) / 460)), 72px);
  --space-before-lead: clamp(20px, calc(20px + 2 * ((var(--viewport-width) - 440px) / 460)), 22px);
  --space-before-body: clamp(16px, calc(16px + 2 * ((var(--viewport-width) - 440px) / 460)), 18px);
  --space-before-caption: clamp(12px, calc(12px + 2 * ((var(--viewport-width) - 440px) / 460)), 14px);
  --grid-1-margin: clamp(32px, calc(32px + 4 * ((var(--viewport-width) - 440px) / 460)), 36px);
}

@media (min-width: 900px) {:root {
  --role-display-2-font-size: clamp(72px, calc(72px + 36 * ((var(--viewport-width) - 900px) / 700)), 108px);
  --role-display-2-line-height: clamp(88px, calc(88px + 42 * ((var(--viewport-width) - 900px) / 700)), 130px);
  --role-heading-1-font-size: clamp(50px, calc(50px + 12 * ((var(--viewport-width) - 900px) / 700)), 62px);
  --role-heading-1-line-height: clamp(60px, calc(60px + 16 * ((var(--viewport-width) - 900px) / 700)), 76px);
  --role-lead-font-size: clamp(22px, calc(22px + 4 * ((var(--viewport-width) - 900px) / 700)), 26px);
  --role-lead-line-height: clamp(32px, calc(32px + 6 * ((var(--viewport-width) - 900px) / 700)), 38px);
  --role-body-font-size: clamp(18px, calc(18px + 2 * ((var(--viewport-width) - 900px) / 700)), 20px);
  --role-body-line-height: clamp(26px, calc(26px + 2 * ((var(--viewport-width) - 900px) / 700)), 28px);
  --role-caption-font-size: clamp(14px, calc(14px + 2 * ((var(--viewport-width) - 900px) / 700)), 16px);
  --role-caption-line-height: clamp(20px, calc(20px + 4 * ((var(--viewport-width) - 900px) / 700)), 24px);
  --space-tight: clamp(18px, calc(18px + 2 * ((var(--viewport-width) - 900px) / 700)), 20px);
  --space-group: clamp(72px, calc(72px + 8 * ((var(--viewport-width) - 900px) / 700)), 80px);
  --space-before-lead: clamp(22px, calc(22px + 4 * ((var(--viewport-width) - 900px) / 700)), 26px);
  --space-before-body: clamp(18px, calc(18px + 2 * ((var(--viewport-width) - 900px) / 700)), 20px);
  --space-before-caption: clamp(14px, calc(14px + 2 * ((var(--viewport-width) - 900px) / 700)), 16px);
  --grid-1-margin: clamp(36px, calc(36px + 4 * ((var(--viewport-width) - 900px) / 700)), 40px);
}}

@media (min-width: 1600px) {:root {
  --role-display-2-font-size: calc(108 * var(--canvas-scale));
  --role-display-2-line-height: calc(130 * var(--canvas-scale));
  --role-heading-1-font-size: calc(62 * var(--canvas-scale));
  --role-heading-1-line-height: calc(76 * var(--canvas-scale));
  --role-lead-font-size: calc(26 * var(--canvas-scale));
  --role-lead-line-height: calc(38 * var(--canvas-scale));
  --role-body-font-size: calc(20 * var(--canvas-scale));
  --role-body-line-height: calc(28 * var(--canvas-scale));
  --role-caption-font-size: calc(16 * var(--canvas-scale));
  --role-caption-line-height: calc(24 * var(--canvas-scale));
  --space-tight: calc(20 * var(--canvas-scale));
  --space-group: calc(80 * var(--canvas-scale));
  --space-before-lead: calc(26 * var(--canvas-scale));
  --space-before-body: calc(20 * var(--canvas-scale));
  --space-before-caption: calc(16 * var(--canvas-scale));
  --grid-1-margin: calc(40 * var(--canvas-scale));
}}

.text-display-2 {
  font-family: var(--role-display-2-font-family);
  font-weight: var(--role-display-2-font-weight);
  font-size: var(--role-display-2-font-size);
  line-height: var(--role-display-2-line-height);
}

.text-heading-1 {
  font-family: var(--role-heading-1-font-family);
  font-weight: var(--role-heading-1-font-weight);
  font-size: var(--role-heading-1-font-size);
  line-height: var(--role-heading-1-line-height);
}

.text-lead {
  font-family: var(--role-lead-font-family);
  font-weight: var(--role-lead-font-weight);
  font-size: var(--role-lead-font-size);
  line-height: var(--role-lead-line-height);
}

.text-body {
  font-family: var(--role-body-font-family);
  font-weight: var(--role-body-font-weight);
  font-size: var(--role-body-font-size);
  line-height: var(--role-body-line-height);
}

.text-caption {
  font-family: var(--role-caption-font-family);
  font-weight: var(--role-caption-font-weight);
  font-size: var(--role-caption-font-size);
  line-height: var(--role-caption-line-height);
}

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

* {
  margin: 0;
}

html, body {
  height: 100%;
}

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

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

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

a {
  color: inherit;
  text-decoration: none;
}

:root {
  --page-surface: var(--colour-surface-sunken);
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  
  scroll-padding-top: var(--space-group);
  background-color: var(--page-surface);
}

body {
  font-family: var(--role-body-font-family);
  font-size: var(--role-body-font-size);
  line-height: var(--role-body-line-height);
  color: var(--colour-text-default);
  background-color: var(--page-surface);
}

::selection {
  background-color: var(--colour-action-primary);
  color: var(--colour-action-primary-text);
}

.text-lead { margin-block-start: var(--space-before-lead); }

.text-body { margin-block-start: var(--space-before-body); }

.text-caption { margin-block-start: var(--space-before-caption); }

:where(.text-heading-2, .text-heading-3, .text-lead, .text-body, .text-caption):first-child {
  margin-block-start: 0;
}

.text-body { text-wrap: pretty; }

:root {
  --main-surface: var(--page-surface);
  --main-padding: var(--space-group);
}

.page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.page__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-block: var(--main-padding);
  background-color: var(--main-surface);
}

.page__footer {
  border-block-start: 1px solid var(--colour-border-subtle);
  color: var(--colour-text-faint);
}

.page__footer-inner {
  padding-block: var(--space-tight);
}

.surface-container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--grid-1-margin);
}

.section__content--center :is(.measure, .text-display-1, .text-display-2, .text-heading-1, .text-heading-2, .text-heading-3, .text-heading-4, .text-body, .text-lead, .text-caption) {
  margin-inline: auto;
}

.hero {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

.hero__lead {
  margin-block-start: var(--space-before-lead);
  color: var(--colour-text-subtle);
  max-width: 60ch;
}

.site-header {
  border-block-end: 1px solid var(--colour-border-subtle);
}

.site-header__inner {
  display: flex;
  align-items: center;
  min-height: var(--space-group);
}

.site-header__title {
  color: var(--colour-text-default);
  text-decoration: none;
}

pre[class*="language-"] {
  background: var(--colour-surface-sunken);
  border-radius: 4px;
  overflow-x: auto;
}

code[class*="language-"] {
  font-family: var(--role-code-font-family);
  font-weight: 400;
}