@font-face {
  font-family: 'Google Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(./fonts/google-sans-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Google Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(./fonts/google-sans-latin-wght-normal.woff2) format('woff2-variations');
  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: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(./fonts/jetbrains-mono-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(./fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2-variations');
  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;
}
:root {
  color-scheme: light;
  --ink: #17231a;
  --body: #344238;
  --accent: #395c37;
  --line: #dce3d9;
  --sans: 'Google Sans Variable', system-ui, sans-serif;
  --heading: var(--sans);
  --mono: 'JetBrains Mono Variable', ui-monospace, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: #fafbf8; color: var(--body); font: 400 1.0625rem/1.55 var(--sans); }
main { max-width: 56rem; margin-inline: auto; padding: clamp(2rem, 5vw, 4.5rem) clamp(1.125rem, 5vw, 3rem) 5rem; }
header small { font-size: .8125rem; font-weight: 600; color: var(--accent); letter-spacing: .035em; }
h1, h2 { font-family: var(--heading); text-wrap: balance; color: var(--ink); }
h1 { margin: .5rem 0 .875rem; font-size: clamp(2.25rem, 6vw, 3.5rem); line-height: 1.08; font-weight: 650; letter-spacing: -.035em; }
h2 { margin: 0 0 .875rem; font-size: clamp(1.5rem, 3vw, 1.875rem); line-height: 1.22; font-weight: 650; letter-spacing: -.022em; }
p { margin: 0; max-width: 65ch; }
nav { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: 1.5rem 0 0; }
nav a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .375rem .875rem; border: 1px solid #c8d3c5; border-radius: 2rem; color: var(--accent); font-size: .9375rem; font-weight: 500; text-decoration: none; }
nav a:hover { background: #eaf0e6; }
a:focus-visible { outline: 3px solid #467044; outline-offset: 2px; }
section { margin-top: clamp(2.25rem, 5vw, 3.5rem); scroll-margin-top: 1.25rem; }
article { border-top: 1px solid var(--line); padding-block: 1.125rem 1.25rem; }
code { font-family: var(--mono); font-variant-ligatures: none; overflow-wrap: anywhere; }
h3 { margin: 0 0 .375rem; font-size: 1.125rem; line-height: 1.45; font-weight: 600; color: var(--ink); }
.forms { display: flex; flex-wrap: wrap; gap: .375rem .5rem; margin-top: .625rem; }
.forms code { max-width: 100%; padding: .125rem .375rem; border-radius: .25rem; background: #eff2ec; color: #465744; font-size: .875rem; line-height: 1.5; }