/* Generated by apps/errors (pnpm generate) from packages/config/tokens and the Fontsource faces. Do not edit. */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/instrument-sans-latin-400-normal.9a91efaa3599.woff2) format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/instrument-sans-latin-600-normal.efb770916eda.woff2) format('woff2');
}
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/big-shoulders-display-latin-800-normal.088f423f0913.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/ibm-plex-mono-latin-400-normal.08949f728dc5.woff2) format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/archivo-latin-800-normal.c26cda2400b3.woff2) format('woff2');
}
:root {
  color-scheme: dark light;
  --clavian-font-body: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --clavian-text-base: 1rem;
  --clavian-weight-regular: 400;
  --clavian-leading-relaxed: 1.65;
  --clavian-focus-width: 2px;
  --clavian-focus-offset: 2px;
  --clavian-space-4: 1rem;
  --clavian-space-2: 0.5rem;
  --clavian-z-overlay: 1100;
  --clavian-space-3: 0.75rem;
  --clavian-radius-sm: 0.5rem;
  --clavian-space-16: 4rem;
  --clavian-control-md: 2.75rem;
  --clavian-space-8: 2rem;
  --clavian-font-wordmark: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --clavian-weight-extrabold: 800;
  --clavian-text-xl: 1.25rem;
  --clavian-tracking-tight: -0.02em;
  --clavian-leading-tight: 1.15;
  --clavian-weight-semibold: 600;
  --clavian-text-xs: 0.75rem;
  --clavian-tracking-label: 0.08em;
  --clavian-font-display: 'Big Shoulders Display', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --clavian-tracking-normal: 0em;
  --clavian-text-5xl: 3rem;
  --clavian-text-3xl: 1.875rem;
  --clavian-space-12: 3rem;
  --clavian-text-2xl: 1.5rem;
  --clavian-space-10: 2.5rem;
  --clavian-measure: 65ch;
  --clavian-text-lg: 1.125rem;
  --clavian-leading-normal: 1.5;
  --clavian-space-6: 1.5rem;
  --clavian-text-sm: 0.875rem;
  --clavian-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;
  --clavian-radius-md: 0.75rem;
  --clavian-space-5: 1.25rem;
  --clavian-space-1: 0.25rem;
  --clavian-target-min: 1.5rem;
  --clavian-text-4xl: 2.375rem;
  --clavian-bg: #0E1216;
  --clavian-ink: #EEF1F4;
  --clavian-accent-ink: #C69749;
  --clavian-focus: #D8AD63;
  --clavian-surface: #161B21;
  --clavian-line-strong: #6B7683;
  --clavian-line: #262D35;
  --clavian-accent: #C69749;
  --clavian-muted: #98A3AF;
  --clavian-surface-2: #1B2129;
}
@media (prefers-color-scheme: light) {
  :root {
    --clavian-bg: #F6F7F9;
    --clavian-ink: #171C22;
    --clavian-accent-ink: #8A6829;
    --clavian-focus: #8A6829;
    --clavian-surface: #FFFFFF;
    --clavian-line-strong: #6B7683;
    --clavian-line: #D8DEE5;
    --clavian-accent: #C69749;
    --clavian-muted: #5B6672;
    --clavian-surface-2: #F1F4F7;
  }
}
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--clavian-bg);
  color: var(--clavian-ink);
  font-family: var(--clavian-font-body);
  font-size: var(--clavian-text-base);
  font-weight: var(--clavian-weight-regular);
  line-height: var(--clavian-leading-relaxed);
}

a { color: var(--clavian-accent-ink); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

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

.skip {
  position: absolute;
  left: var(--clavian-space-4);
  top: var(--clavian-space-2);
  z-index: var(--clavian-z-overlay);
  padding: var(--clavian-space-2) var(--clavian-space-3);
  background: var(--clavian-surface);
  color: var(--clavian-ink);
  border: 1px solid var(--clavian-line-strong);
  border-radius: var(--clavian-radius-sm);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.column {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 var(--clavian-space-4);
}

.masthead { border-bottom: 1px solid var(--clavian-line); }
.masthead .column { display: flex; align-items: center; min-height: var(--clavian-space-16); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--clavian-space-2);
  min-height: var(--clavian-control-md);
  color: var(--clavian-ink);
  text-decoration: none;
}
.mark { width: var(--clavian-space-8); height: var(--clavian-space-8); flex: none; }
.mark-ring { stroke: var(--clavian-ink); }
.mark-keyhole { fill: var(--clavian-accent); }
.wordmark {
  font-family: var(--clavian-font-wordmark);
  font-weight: var(--clavian-weight-extrabold);
  font-size: var(--clavian-text-xl);
  letter-spacing: var(--clavian-tracking-tight);
  line-height: var(--clavian-leading-tight);
}
.product, .label {
  font-weight: var(--clavian-weight-semibold);
  font-size: var(--clavian-text-xs);
  letter-spacing: var(--clavian-tracking-label);
  text-transform: uppercase;
  color: var(--clavian-muted);
}

main { padding-bottom: var(--clavian-space-16); }

h1, h2, h3 {
  font-family: var(--clavian-font-display);
  font-weight: var(--clavian-weight-extrabold);
  letter-spacing: var(--clavian-tracking-normal);
  line-height: var(--clavian-leading-tight);
  text-wrap: balance;
  overflow-wrap: break-word;
  margin: 0;
}
h1 { font-size: var(--clavian-text-5xl); margin-top: var(--clavian-space-2); }
h2 { font-size: var(--clavian-text-3xl); margin-top: var(--clavian-space-12); }
h3 { font-size: var(--clavian-text-2xl); margin-top: var(--clavian-space-10); }

p { margin: var(--clavian-space-4) 0 0; max-width: var(--clavian-measure); }
.lede { font-size: var(--clavian-text-lg); line-height: var(--clavian-leading-normal); }
.muted { color: var(--clavian-muted); }

.label { display: block; margin-top: var(--clavian-space-10); }
.back { display: inline-block; margin-top: var(--clavian-space-6); font-size: var(--clavian-text-sm); }

code, pre {
  font-family: var(--clavian-font-mono);
  font-weight: var(--clavian-weight-regular);
}
code { font-size: 0.9em; overflow-wrap: anywhere; }
:not(pre) > code {
  padding: 0.05em 0.35em;
  background: var(--clavian-surface-2);
  border: 1px solid var(--clavian-line);
  border-radius: var(--clavian-radius-sm);
}
pre {
  margin: var(--clavian-space-4) 0 0;
  padding: var(--clavian-space-4);
  background: var(--clavian-surface);
  color: var(--clavian-ink);
  border: 1px solid var(--clavian-line);
  border-radius: var(--clavian-radius-md);
  font-size: var(--clavian-text-sm);
  line-height: var(--clavian-leading-normal);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
pre code { font-size: inherit; }

.facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--clavian-space-2) var(--clavian-space-6);
  margin: var(--clavian-space-8) 0 0;
  padding: var(--clavian-space-4) var(--clavian-space-5);
  background: var(--clavian-surface);
  border: 1px solid var(--clavian-line);
  border-radius: var(--clavian-radius-md);
}
.facts dt { font-weight: var(--clavian-weight-semibold); color: var(--clavian-muted); }
.facts dd { margin: 0; min-width: 0; }

.list {
  list-style: none;
  margin: var(--clavian-space-4) 0 0;
  padding: 0;
  border-top: 1px solid var(--clavian-line);
}
.list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--clavian-space-1) var(--clavian-space-4);
  padding: var(--clavian-space-3) 0;
  border-bottom: 1px solid var(--clavian-line);
}
.list li > * { min-width: 0; }
.method { font-weight: var(--clavian-weight-semibold); }

details { margin-top: var(--clavian-space-4); }
summary {
  cursor: pointer;
  color: var(--clavian-accent-ink);
  font-weight: var(--clavian-weight-semibold);
  min-height: var(--clavian-target-min);
}

.colophon {
  border-top: 1px solid var(--clavian-line);
  padding: var(--clavian-space-6) 0 var(--clavian-space-10);
  color: var(--clavian-muted);
  font-size: var(--clavian-text-sm);
}
.colophon p { margin: 0; }

@media (min-width: 40rem) {
  .column { padding: 0 var(--clavian-space-6); }
}

@media (max-width: 30rem) {
  h1 { font-size: var(--clavian-text-4xl); }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .facts dd { margin-bottom: var(--clavian-space-3); }
}