:root { --paper:#fbfaf7; --card:#fff; --surface:#f4f2ed; --line:#ece8e0; --ink:#17161a; --ink2:#4a4740; --ink3:#8a857a; --sun:#f5a524; --sun-strong:#b86200; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper:#0f0e0d; --card:#1e1c19; --surface:#171614; --line:#2a2824; --ink:#f4f1ea; --ink2:#bcb6aa; --ink3:#827c71; --sun-strong:#ffb547; color-scheme: dark; } }
:root[data-theme="dark"] { --paper:#0f0e0d; --card:#1e1c19; --surface:#171614; --line:#2a2824; --ink:#f4f1ea; --ink2:#bcb6aa; --ink3:#827c71; --sun-strong:#ffb547; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.65 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--sun-strong); }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 4px; }
.doc { max-width: 720px; margin: 0 auto; padding: 0 20px 80px; }
.top { display: flex; align-items: center; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 19px; letter-spacing: -0.4px; }
h1 { font: 400 clamp(40px, 6vw, 56px)/1.02 "Instrument Serif", Georgia, serif; letter-spacing: -0.8px; margin: 40px 0 8px; }
.meta { color: var(--ink3); font-size: 15px; margin: 0 0 40px; }
h2 { font: 600 20px/1.35 "Inter", sans-serif; letter-spacing: -0.2px; margin: 44px 0 10px; }
p, li { color: var(--ink2); }
ul { padding-left: 22px; }
li { margin: 6px 0; }
code, pre { font: 14px/1.55 ui-monospace, "SF Mono", Menlo, monospace; }
pre { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; overflow-x: auto; color: var(--ink); }
.fill { background: #fdf0d5; color: #3d2600; padding: 1px 6px; border-radius: 4px; }
.top .lang { margin-left: auto; font-size: 14px; color: var(--ink2); text-decoration: none; }