:root {
  --bg: #f3f1ea;
  --paper: #fbfaf6;
  --ink: #151917;
  --muted: #5d6560;
  --rule: #d8d6cc;
  --green: #0f6b4f;
  --green-soft: #dcebe3;
  --black: #111513;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); font: 18px/1.68 Georgia, serif; }
a { color: var(--green); text-underline-offset: .18em; }
.wrap { width: min(1120px, calc(100% - 36px)); margin: 0 auto; }

.hero { padding: 76px 0 58px; color: #f6f5ef; background: var(--black); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: end; }
.eyebrow, nav, .meta, .stat-label, h2, h3, th, .button, .file-list {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
}
.eyebrow { color: #85d5b3; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1 { max-width: 800px; margin: 14px 0 24px; font-size: clamp(3rem, 7.2vw, 6.4rem); line-height: .94; letter-spacing: -.058em; }
.dek { max-width: 740px; margin: 0; color: #b9c1bd; font-size: clamp(1.12rem, 2vw, 1.4rem); }
.meta { margin-top: 28px; color: #8f9994; font-size: .82rem; }
.hero-stat { padding: 26px; border: 1px solid #35403a; border-radius: 16px; background: #181e1b; }
.hero-stat strong { display: block; font: 700 3.7rem/1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.06em; }
.stat-label { margin-top: 10px; color: #aeb8b3; font-size: .82rem; }
.hardware { margin-top: 18px; padding-top: 16px; color: #85d5b3; border-top: 1px solid #35403a; font: 750 .8rem/1.45 Inter, ui-sans-serif, system-ui, sans-serif; }

nav { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--rule); background: rgba(243,241,234,.94); backdrop-filter: blur(12px); }
nav .wrap { display: flex; gap: 22px; overflow-x: auto; padding-block: 12px; }
nav a { flex: 0 0 auto; color: var(--ink); font-size: .82rem; font-weight: 750; text-decoration: none; }

main { display: grid; grid-template-columns: minmax(0, 760px) 280px; gap: 70px; padding-block: 64px 100px; }
article { min-width: 0; }
article p { margin: 0 0 1.35em; }
.lead { font-size: 1.24rem; line-height: 1.62; }
h2 { margin: 2.45em 0 .72em; font-size: 1.75rem; line-height: 1.18; letter-spacing: -.025em; }
h2:first-child { margin-top: 0; }
h3 { margin: 2em 0 .5em; font-size: 1.05rem; }
blockquote { margin: 28px 0; padding: 20px 24px; background: var(--green-soft); border-left: 4px solid var(--green); border-radius: 0 12px 12px 0; font-size: 1.16rem; }
blockquote p:last-child { margin-bottom: 0; }
.note { margin: 28px 0; padding: 22px 24px; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; }
.note p:last-child { margin-bottom: 0; }

pre { overflow-x: auto; margin: 25px 0; padding: 20px; color: #eff5f1; background: #17201c; border-radius: 12px; font: .8rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; box-shadow: 0 14px 30px rgba(20,26,22,.1); }
code { padding: .12em .3em; background: rgba(15,107,79,.09); border-radius: 4px; font: .86em ui-monospace, SFMono-Regular, Menlo, monospace; }
pre code { padding: 0; color: inherit; background: transparent; }
table { width: 100%; margin: 26px 0 34px; border-collapse: collapse; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: .87rem; }
th, td { padding: 13px 14px; border-bottom: 1px solid var(--rule); text-align: left; }
th { color: var(--muted); font-size: .71rem; letter-spacing: .06em; text-transform: uppercase; }
td:not(:first-child), th:not(:first-child) { text-align: right; }
.accent { color: var(--green); font-weight: 750; }

aside { align-self: start; position: sticky; top: 70px; padding: 23px; background: var(--paper); border: 1px solid var(--rule); border-radius: 15px; }
aside h2 { margin: 0 0 13px; font-size: 1rem; }
.file-list { margin: 0 0 20px; padding-left: 19px; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.file-list li { margin-bottom: 8px; }
.button { display: inline-block; padding: 10px 14px; color: white; background: var(--green); border-radius: 8px; font-size: .8rem; font-weight: 750; text-decoration: none; }
footer { padding: 34px 0; color: var(--muted); border-top: 1px solid var(--rule); font: .8rem Inter, ui-sans-serif, system-ui, sans-serif; }

@media (max-width: 860px) {
  .hero { padding-top: 50px; }
  .hero-grid, main { grid-template-columns: 1fr; }
  .hero-stat { max-width: 360px; }
  main { gap: 34px; }
  aside { position: static; grid-row: 1; }
}

@media (max-width: 520px) {
  .wrap { width: min(100% - 28px, 1120px); }
  .hero { padding-block: 42px 38px; }
  h1 { font-size: clamp(2.55rem, 13vw, 3.4rem); }
  main { padding-block: 42px 68px; }
  blockquote, .note { padding: 18px; }
  pre { max-width: 100%; padding: 16px; }
  table { display: block; max-width: 100%; overflow-x: auto; }
  th, td { padding-inline: 10px; }
}