:root { color-scheme: light dark; --bg: #fff; --fg: #161615; --muted: #5d5d5a; --line: #e4e3e0; --code: #f4f3f1; --link: #1a56db; }
@media (prefers-color-scheme: dark) { :root { --bg: #121211; --fg: #ecebe8; --muted: #a3a29d; --line: #2c2c2a; --code: #1c1c1a; --link: #8ab4ff; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.65 system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
main { max-width: 44rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
nav { max-width: 44rem; margin: 0 auto; padding: 1.25rem 1.25rem 0; font-size: 15px; }
nav a { display: inline-block; padding: 0.5rem 0; margin-right: 1.1rem; }
h1 { font-size: 2.1rem; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 1rem; text-wrap: balance; }
h2 { font-size: 1.3rem; margin: 2.4rem 0 0.5rem; letter-spacing: -0.01em; }
p, li { max-width: 40rem; text-wrap: pretty; }
a { color: var(--link); }
code { font: 0.92em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--code); padding: 0.1em 0.35em; border-radius: 4px; }
pre { background: var(--code); border: 1px solid var(--line); border-radius: 8px; padding: 0.9rem 1rem; overflow-x: auto; line-height: 1.5; }
pre code { background: none; padding: 0; font-size: 14px; }
.lead { font-size: 1.15rem; color: var(--muted); }
footer { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.try { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 1.5rem; }
.try span { color: var(--muted); font-size: 15px; margin-right: 0.25rem; }
.try button { font: inherit; font-size: 15px; min-height: 40px; padding: 0.4rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--code); color: var(--fg); cursor: pointer; transition-property: border-color, scale; transition-duration: 150ms; transition-timing-function: ease-out; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .try button:hover { border-color: var(--muted); } }
.try button:active { scale: 0.96; }
.try button:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .try button { transition: none; } .try button:active { scale: none; } }
@media (max-width: 480px) { h1 { font-size: 1.75rem; } }