:root { --paper:#EAE3D2; --surface:#F8F4E8; --ink:#241C16; --ink-2:#52412F; --muted:#6E5F48; --line:#D6C9AC; --accent:#B0331F; --accent-2:#7E2515; --accent-tint:#EFDACA; }
@media (prefers-color-scheme: dark) { :root { --paper:#1C150F; --surface:#261C14; --ink:#F1E6D4; --ink-2:#D6C2A3; --muted:#9C8B71; --line:#3E3020; --accent:#E2825F; --accent-2:#F0A883; --accent-tint:#3D2519; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 Archivo, ui-sans-serif, system-ui, sans-serif; }
.wrap { max-width: 760px; margin: 0 auto; padding: 20px 16px 56px; }
h1, h2, h3 { font-family: "Young Serif", Georgia, serif; font-weight: 400; }
h1 { font-size: 32px; line-height: 1.2; margin: 18px 0 6px; }
h2 { font-size: 22px; margin: 28px 0 8px; }
h3 { font-size: 18px; margin: 18px 0 4px; }
a { color: var(--accent-2); }
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; font-size: 14px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: "Young Serif", Georgia, serif; font-size: 20px; color: var(--ink); text-decoration: none; }
.brand img { height: 44px; width: auto; border-radius: 8px; padding: 2px 4px; box-sizing: content-box; }
@media (prefers-color-scheme: dark) { .brand img { background: #F7F1E6; } }
.meta { font-size: 13.5px; color: var(--muted); }
.lead { background: var(--accent-tint); border-left: 5px solid var(--accent); border-radius: 8px; padding: 12px 16px; }
ul { padding-left: 22px; } li { margin: 4px 0; }
button { font: inherit; font-weight: 600; cursor: pointer; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--accent); background: var(--surface); color: var(--accent-2); }
.toc { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 18px; }
.toc summary { cursor: pointer; font-weight: 600; font-size: 14.5px; }
.toc ol { margin: 10px 0 2px; padding-left: 20px; columns: 2; column-gap: 24px; }
.toc li { margin: 3px 0; }
.example { background: var(--surface); border-left: 4px solid var(--accent); border-radius: 0 8px 8px 0; padding: 10px 16px; margin: 10px 0; font-size: 14.5px; }
.example strong:first-child { color: var(--accent-2); }
.example ol, .example ul { margin: 6px 0 0; padding-left: 20px; }
.example li { margin: 2px 0; }
@media (max-width: 560px) { h1 { font-size: 26px; } .toc ol { columns: 1; } }

table{width:100%;border-collapse:collapse;margin:12px 0;font-size:.92em}
th,td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
th{background:var(--surface)}
code{word-break:break-all}
@media(max-width:600px){table{display:block;overflow-x:auto}}