:root { --paper:#f6f4ee; --ink:#16181a; --dim:#5d6165; --rule:#c9c5b8; --mark:#b3421f; --box:#ebe8de; }
@media (prefers-color-scheme: dark) { :root { --paper:#121416; --ink:#e8e6df; --dim:#9a9d9f; --rule:#34383b; --mark:#f08a5d; --box:#1b1e21; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.55 Georgia, "Noto Serif", serif; }
header, main, footer { max-width:860px; margin:0 auto; padding:0 16px; }
header { padding-top:40px; }
.doc, h2, h3, th, nav, code, pre, figcaption, .note b { font-family:ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; }
.doc { font-size:12px; letter-spacing:.12em; color:var(--dim); border-bottom:2px solid var(--ink); padding-bottom:10px; margin:0 0 36px; }
h1 { font-size:clamp(30px, 6vw, 52px); line-height:1.1; margin:0 0 18px; font-weight:400; letter-spacing:-.01em; }
.lead { font-size:20px; color:var(--dim); max-width:38em; margin:0 0 26px; }
pre { background:var(--box); border-left:3px solid var(--mark); padding:14px 16px; font-size:13.5px; line-height:1.6; overflow-x:auto; margin:14px 0; }
pre b { color:var(--mark); font-weight:600; }
nav { display:flex; flex-wrap:wrap; gap:6px 22px; font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin:26px 0 0; padding:12px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
a { color:var(--ink); text-decoration-color:var(--mark); text-underline-offset:3px; }
section { padding:44px 0 8px; }
h2 { font-size:15px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 18px; font-weight:600; }
h2 span { display:inline-block; min-width:2.2em; color:var(--mark); }
h3 { font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin:34px 0 8px; }
table { width:100%; border-collapse:collapse; border-top:2px solid var(--ink); margin:8px 0 18px; font-size:16px; }
th, td { text-align:left; vertical-align:top; padding:10px 12px 10px 0; border-bottom:1px solid var(--rule); }
th { font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; width:11.5em; padding-top:13px; color:var(--dim); }
code { font-size:.86em; background:var(--box); padding:1px 5px; overflow-wrap:anywhere; }
pre code, td > code:only-child { background:none; padding:0; }
.videos { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:22px; margin:18px 0; }
figure { margin:0; }
video { display:block; width:100%; max-height:85svh; aspect-ratio:9/16; background:#000; border:1px solid var(--rule); }
figcaption { font-size:12.5px; color:var(--dim); padding-top:8px; }
img { max-width:100%; height:auto; border:1px solid var(--rule); display:block; }
.note { border:1px solid var(--ink); padding:10px 14px; font-size:15.5px; }
.note b { font-size:12.5px; letter-spacing:.08em; color:var(--mark); }
ol { padding-left:1.3em; } li { margin:8px 0; }
footer { margin-top:50px; padding-top:16px; padding-bottom:40px; border-top:2px solid var(--ink); font-size:13.5px; color:var(--dim); }
@media (max-width:560px) { th { width:auto; display:block; border:0; padding-bottom:0; } td { display:block; padding-top:4px; } }