:root {
  color-scheme: light dark;

  --tsw-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tsw-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --tsw-text-2xs: 0.6875rem;
  --tsw-text-xs: 0.75rem;
  --tsw-text-sm: 0.875rem;
  --tsw-text-base: 1rem;
  --tsw-text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --tsw-text-xl: clamp(1.1875rem, 1.1rem + 0.45vw, 1.4375rem);
  --tsw-text-2xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --tsw-text-3xl: clamp(1.625rem, 1.35rem + 1.3vw, 2.5rem);
  --tsw-text-4xl: clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
  --tsw-text-display: clamp(2.375rem, 1.6rem + 3.4vw, 4.75rem);

  --tsw-leading-tight: 1.08;
  --tsw-leading-snug: 1.25;
  --tsw-leading-normal: 1.5;
  --tsw-leading-relaxed: 1.65;
  --tsw-tracking-tight: -0.022em;
  --tsw-tracking-wide: 0.06em;
  --tsw-tracking-wider: 0.12em;

  --tsw-space-3xs: 0.125rem;
  --tsw-space-2xs: 0.25rem;
  --tsw-space-xs: 0.5rem;
  --tsw-space-sm: 0.75rem;
  --tsw-space-md: 1rem;
  --tsw-space-lg: 1.5rem;
  --tsw-space-xl: 2rem;
  --tsw-space-2xl: 3rem;
  --tsw-space-3xl: 4.5rem;

  --tsw-radius-xs: 4px;
  --tsw-radius-sm: 6px;
  --tsw-radius-md: 10px;
  --tsw-radius-lg: 16px;
  --tsw-radius-xl: 24px;
  --tsw-radius-full: 999px;

  --tsw-container: 72rem;
  --tsw-container-narrow: 46rem;
  --tsw-container-wide: 88rem;
  --tsw-gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --tsw-section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --tsw-measure: 68ch;

  --tsw-dur-instant: 80ms;
  --tsw-dur-fast: 140ms;
  --tsw-dur-base: 240ms;
  --tsw-dur-slow: 420ms;
  --tsw-ease: cubic-bezier(0.2, 0, 0.13, 1);
  --tsw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --tsw-border-w: 1px;
  --tsw-shadow-sm: 0 1px 2px light-dark(rgb(15 23 42 / 0.06), rgb(0 0 0 / 0.4));
  --tsw-shadow-md: 0 4px 16px -4px light-dark(rgb(15 23 42 / 0.1), rgb(0 0 0 / 0.55));
  --tsw-shadow-lg: 0 18px 48px -12px light-dark(rgb(15 23 42 / 0.16), rgb(0 0 0 / 0.65));

  --tsw-bg: light-dark(#ffffff, #0a0c10);
  --tsw-bg-sunken: light-dark(#f6f7f9, #06080b);
  --tsw-surface: light-dark(#ffffff, #11151c);
  --tsw-surface-2: light-dark(#f6f7f9, #171c25);
  --tsw-surface-3: light-dark(#eceff3, #1e2530);
  --tsw-overlay: light-dark(rgb(15 23 42 / 0.45), rgb(0 0 0 / 0.68));

  --tsw-text: light-dark(#111827, #eef2f7);
  --tsw-text-muted: light-dark(#4b5563, #a3b0c2);
  --tsw-text-faint: light-dark(#6b7280, #7c8aa0);
  --tsw-text-inverse: light-dark(#ffffff, #0a0c10);

  --tsw-border: light-dark(#e3e7ec, #232b38);
  --tsw-border-strong: light-dark(#cbd2db, #35405280);

  --tsw-accent-bg: light-dark(#f59e0b, #f59e0b);
  --tsw-accent-on: light-dark(#1c1305, #1c1305);
  --tsw-accent-ink: light-dark(#92400e, #fcd34d);
  --tsw-accent-soft: light-dark(#fef3c7, #3a2c0c);

  --tsw-tech-ink: light-dark(#0e7490, #67e8f9);
  --tsw-tech-soft: light-dark(#cffafe, #0b3540);

  --tsw-ok-ink: light-dark(#15803d, #86efac);
  --tsw-warn-ink: light-dark(#a16207, #fde047);
  --tsw-danger-ink: light-dark(#b91c1c, #fca5a5);

  --tsw-focus-ring: 0 0 0 2px var(--tsw-bg), 0 0 0 4px var(--tsw-accent-bg);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: var(--tsw-space-2xl);
}

body {
  margin: 0;
  background: var(--tsw-bg);
  color: var(--tsw-text);
  font-family: var(--tsw-font-sans);
  font-size: var(--tsw-text-base);
  line-height: var(--tsw-leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block: 0;
  font-weight: 650;
  line-height: var(--tsw-leading-snug);
  letter-spacing: var(--tsw-tracking-tight);
  text-wrap: balance;
}

p {
  margin-block: 0;
  text-wrap: pretty;
}

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

a {
  color: var(--tsw-accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

ul,
ol {
  margin-block: 0;
  padding-inline-start: 1.25em;
}

code,
kbd,
samp,
pre {
  font-family: var(--tsw-font-mono);
  font-size: 0.9375em;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: var(--tsw-space-xs) var(--tsw-space-sm);
  text-align: start;
  border-block-end: var(--tsw-border-w) solid var(--tsw-border);
}

th {
  font-weight: 650;
}

hr {
  border: 0;
  border-block-start: var(--tsw-border-w) solid var(--tsw-border);
  margin-block: var(--tsw-space-xl);
}

:focus-visible {
  outline: none;
  box-shadow: var(--tsw-focus-ring);
  border-radius: var(--tsw-radius-xs);
}

::selection {
  background: var(--tsw-accent-bg);
  color: var(--tsw-accent-on);
}

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

.tsw-skip-link {
  position: absolute;
  inset-block-start: var(--tsw-space-sm);
  inset-inline-start: var(--tsw-space-sm);
  z-index: 100;
  padding: var(--tsw-space-xs) var(--tsw-space-md);
  background: var(--tsw-accent-bg);
  color: var(--tsw-accent-on);
  font-weight: 650;
  border-radius: var(--tsw-radius-sm);
  transform: translateY(-200%);
}

.tsw-skip-link:focus-visible {
  transform: none;
}

.tsw-stack > * + * {
  margin-block-start: var(--tsw-flow, var(--tsw-space-md));
}

.tsw-measure {
  max-width: var(--tsw-measure);
}

.tsw-lede {
  font-size: var(--tsw-text-lg);
  color: var(--tsw-text-muted);
}

.tsw-eyebrow {
  font-family: var(--tsw-font-mono);
  font-size: var(--tsw-text-xs);
  letter-spacing: var(--tsw-tracking-wider);
  text-transform: uppercase;
  color: var(--tsw-accent-ink);
}

.tsw-muted {
  color: var(--tsw-text-muted);
}

.tsw-faint {
  color: var(--tsw-text-faint);
}

.tsw-mono {
  font-family: var(--tsw-font-mono);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --tsw-border: light-dark(#8a929e, #6d7c91);
    --tsw-text-muted: light-dark(#2c3440, #d3dce7);
    --tsw-border-strong: light-dark(#2c3440, #d3dce7);
  }
}

@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid CanvasText;
    outline-offset: 2px;
  }
}
