@font-face {
font-family: "Geist";
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url("/fonts/geist-core.woff2") format("woff2");
unicode-range:
U+0000-007E, U+00A0, U+00A2, U+00A9, U+00B7, U+00C7, U+00D6, U+00DC, U+00E7,
U+00F6, U+00FC, U+0131, U+2013-2014, U+2018-2019, U+201C-201D, U+2022,
U+2026, U+2191, U+2193;
}
@font-face {
font-family: "Geist";
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url("/fonts/geist-core-ext.woff2") format("woff2");
unicode-range:
U+011E-011F, U+0130, U+015E-015F;
}
@font-face {
font-family: "Geist";
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url("/fonts/geist-latin.woff2") format("woff2");
unicode-range:
U+007F-009F, U+00A1, U+00A3-00A8, U+00AA-00B6, U+00B8-00C6, U+00C8-00D5,
U+00D7-00DB, U+00DD-00E6, U+00E8-00F5, U+00F7-00FB, U+00FD-00FF,
U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
U+2000-2012, U+2015-2017, U+201A-201B, U+201E-2021, U+2023-2025,
U+2027-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Geist";
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url("/fonts/geist-latin-ext.woff2") format("woff2");
unicode-range:
U+0100-011D, U+0120-012F, U+0132-015D, U+0160-02BA, U+02BD-02C5,
U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113,
U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Geist Mono";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("/fonts/geist-mono-core.woff2") format("woff2");
unicode-range:
U+0000-007E, U+00A0, U+00A2, U+00A9, U+00B7, U+00C7, U+00D6, U+00DC, U+00E7,
U+00F6, U+00FC, U+0131, U+2013-2014, U+2018-2019, U+201C-201D, U+2022,
U+2026, U+2191, U+2193;
}
@font-face {
font-family: "Geist Mono";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("/fonts/geist-mono-core-ext.woff2") format("woff2");
unicode-range:
U+011E-011F, U+0130, U+015E-015F;
}
@font-face {
font-family: "Geist Mono";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("/fonts/geist-mono-latin.woff2") format("woff2");
unicode-range:
U+007F-009F, U+00A1, U+00A3-00A8, U+00AA-00B6, U+00B8-00C6, U+00C8-00D5,
U+00D7-00DB, U+00DD-00E6, U+00E8-00F5, U+00F7-00FB, U+00FD-00FF,
U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
U+2000-2012, U+2015-2017, U+201A-201B, U+201E-2021, U+2023-2025,
U+2027-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Geist Mono";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("/fonts/geist-mono-latin-ext.woff2") format("woff2");
unicode-range:
U+0100-011D, U+0120-012F, U+0132-015D, U+0160-02BA, U+02BD-02C5,
U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113,
U+2C60-2C7F, U+A720-A7FF;
}
:root {
--bg: #100f0e;
--fg: #f4f2ef;
--fg-lede: #c9c4be;
--fg-quiet: #b9b4ae;
--fg-mono: #8f8a84;
--line: #2b2927;
--line-strong: #47433f;
--paper: #f4f2ef;
--paper-card: #faf9f7;
--paper-line: #d5d1cc;
--ink: #1b1a19;
--ink-body: #3a3735;
--ink-quiet: #55524e;
--ink-mono: #6b6560;
--blue: #1f5fd0;
--blue-hover: #3572e2;
--blue-lit: #7ea8ff;
--blue-deep: #163f8b;
--shell: 1200px;
--gutter: clamp(20px, 4vw, 40px);
--head: 64px;
--sans: Geist, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--lit: inset 0 1px 0 rgba(244, 242, 239, 0.07);
--lit-strong: inset 0 1px 0 rgba(244, 242, 239, 0.11);
--e1: 0 1px 2px rgba(10, 7, 4, 0.5), 0 6px 16px -8px rgba(10, 7, 4, 0.55);
--e-blue: 0 1px 2px rgba(10, 7, 4, 0.45), 0 10px 24px -12px rgba(31, 95, 208, 0.55);
--seam-dark: inset 0 14px 30px -16px rgba(0, 0, 0, 0.9);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
background: var(--bg);
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--sans);
font-size: 16px;
line-height: 1.5;
background: var(--bg);
color: var(--fg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
p,
ul,
ol {
margin: 0;
}
a {
color: var(--blue-lit);
}
::selection {
background: var(--blue);
color: #ffffff;
}
:focus-visible {
outline: 2px solid var(--blue-lit);
outline-offset: 3px;
border-radius: 3px;
}
[id] {
scroll-margin-top: calc(var(--head) + 16px);
}
.shell {
max-width: var(--shell);
margin: 0 auto;
padding: 0 var(--gutter);
}
.mark {
position: relative;
display: inline-block;
flex: 0 0 auto;
width: var(--mark, 22px);
height: var(--mark, 22px);
background: var(--fg);
border-radius: var(--mark-r, 5px);
}
.mark::before,
.mark::after {
content: "";
position: absolute;
width: var(--mark-dot, 6px);
height: var(--mark-dot, 6px);
border-radius: var(--mark-dot-r, 1.5px);
}
.mark::before {
left: var(--mark-inset, 4px);
top: var(--mark-inset, 4px);
background: var(--bg);
}
.mark::after {
right: var(--mark-inset, 4px);
bottom: var(--mark-inset, 4px);
background: var(--blue);
}
.mark--sm {
--mark: 18px;
--mark-r: 4px;
--mark-dot: 5px;
--mark-dot-r: 1px;
--mark-inset: 3px;
}
.head {
position: sticky;
top: 0;
z-index: 50;
background: rgba(16, 15, 14, 0.88);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
box-shadow: var(--lit), var(--e1);
}
.head .shell {
height: var(--head);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.lockup {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--fg);
text-decoration: none;
}
.wordmark {
font-weight: 800;
font-size: 15px;
letter-spacing: 0.06em;
}
.head nav {
display: flex;
align-items: center;
gap: clamp(14px, 2.5vw, 28px);
font-size: 14px;
font-weight: 500;
}
.head nav a {
color: var(--fg-quiet);
text-decoration: none;
}
.head nav a:hover {
color: var(--fg);
}
.head nav .gh {
display: inline-flex;
padding: 6px;
margin: -6px;
border-radius: 8px;
}
.head nav .gh svg {
display: block;
}
.head nav .btn-sm {
background: var(--blue);
color: #ffffff;
font-weight: 600;
padding: 9px 16px;
border-radius: 9px;
box-shadow: var(--lit-strong), var(--e-blue);
}
.head nav .btn-sm:hover {
background: var(--blue-hover);
color: #ffffff;
}
.intro .shell {
padding-top: clamp(48px, 7vw, 88px);
padding-bottom: clamp(36px, 5vw, 56px);
display: flex;
flex-direction: column;
gap: 22px;
}
.eyebrow {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.14em;
color: var(--fg-mono);
}
.intro h1 {
font-size: clamp(38px, 5.6vw, 68px);
font-weight: 750;
letter-spacing: -0.03em;
line-height: 1.04;
}
.intro p {
max-width: 64ch;
font-size: clamp(17px, 1.5vw, 19px);
color: var(--fg-lede);
text-wrap: pretty;
}
.docs {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0;
list-style: none;
}
.docs a {
display: inline-block;
padding: 8px 14px;
border: 1px solid var(--line-strong);
border-radius: 999px;
color: var(--fg-quiet);
font-size: 14px;
font-weight: 500;
text-decoration: none;
}
.docs a:hover {
color: var(--fg);
border-color: var(--fg-mono);
}
.docs a[aria-current="page"] {
background: var(--fg);
border-color: var(--fg);
color: var(--bg);
}
.paper {
background: var(--paper);
color: var(--ink);
border-top: 1px solid var(--line);
box-shadow: var(--seam-dark);
}
.paper .shell {
padding-top: clamp(40px, 6vw, 72px);
padding-bottom: clamp(56px, 8vw, 96px);
}
.paper a {
color: var(--blue);
}
.paper a:hover {
color: var(--blue-deep);
}
.paper :focus-visible {
outline-color: var(--blue);
}
article {
max-width: 72ch;
font-size: 16.5px;
line-height: 1.65;
color: var(--ink-body);
}
article > * + * {
margin-top: 14px;
}
article h2 {
margin-top: 44px;
display: flex;
align-items: baseline;
gap: 14px;
font-size: 23px;
font-weight: 700;
letter-spacing: -0.012em;
line-height: 1.3;
color: var(--ink);
}
article h2 > span {
flex: 0 0 auto;
font-family: var(--mono);
font-size: 13px;
font-weight: 500;
color: var(--ink-mono);
}
article h3 {
margin-top: 26px;
font-size: 17.5px;
font-weight: 650;
color: var(--ink);
}
article ul,
article ol {
padding-left: 22px;
}
article li + li {
margin-top: 6px;
}
article strong {
color: var(--ink);
font-weight: 650;
}
article code {
font-family: var(--mono);
font-size: 0.86em;
padding: 1px 5px;
border-radius: 4px;
background: var(--paper-card);
border: 1px solid var(--paper-line);
color: var(--ink);
overflow-wrap: anywhere;
}
.short {
margin: 0;
padding: 20px 24px;
background: var(--paper-card);
border: 1px solid var(--ink);
border-radius: 10px;
}
.short h2 {
margin: 0 0 10px;
font-family: var(--mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.12em;
color: var(--ink-mono);
}
.short ul {
margin: 0;
}
.facts {
margin-top: 40px;
padding-top: 18px;
border-top: 1px solid var(--paper-line);
font-size: 14.5px;
color: var(--ink-quiet);
}
.foot {
color: var(--fg-mono);
border-top: 1px solid var(--line);
box-shadow: var(--seam-dark);
}
.foot .shell {
padding-top: 36px;
padding-bottom: 36px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.foot-lockup {
display: flex;
align-items: center;
gap: 10px;
}
.foot-lockup b {
font-weight: 700;
font-size: 13px;
letter-spacing: 0.06em;
color: var(--fg);
}
.foot-lockup span {
font-size: 13px;
}
.foot nav {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
font-size: 13.5px;
}
.foot nav a {
color: var(--fg-quiet);
text-decoration: none;
}
.foot nav a:hover,
.foot nav a[aria-current="page"] {
color: var(--fg);
}
.foot .copy {
font-family: var(--mono);
font-size: 11.5px;
}
@media (max-width: 559px) {
.head nav .link {
display: none;
}
article {
font-size: 16px;
}
.short {
padding: 16px 18px;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
@media print {
.head,
.foot,
.docs {
display: none;
}
html,
body,
.paper {
background: #ffffff;
color: #000000;
box-shadow: none;
}
.intro h1,
.intro p,
.eyebrow {
color: #000000;
}
}