:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: #0b0c0d; color: #f1f2f3; font: 15px/1.55 -apple-system, BlinkMacSystemFont, sans-serif; }
main { max-width: 780px; margin: auto; padding: 26px 30px 56px; }
header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 18px; border-bottom: 1px solid #41464b; padding-bottom: 14px; margin-bottom: 28px; }
.brand { color: #b8bec4; font-size: 12px; font-weight: 750; letter-spacing: .14em; text-decoration: none; white-space: nowrap; }
.crumb { color: #adb5bc; font-size: 12px; text-align: right; }
.crumb a { color: #b8bec4; }
.eyebrow { margin: 0 0 6px; color: #f0a325; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
h1 { font-size: 29px; line-height: 1.18; margin: 0 0 12px; letter-spacing: -.02em; }
h2 { color: #d5d9dc; font-size: 18px; margin: 30px 0 9px; }
h3 { color: #d5d9dc; font-size: 15px; margin: 18px 0 5px; }
p, li { max-width: 72ch; }
p { margin: 8px 0 12px; }
ul, ol { padding-left: 23px; margin: 9px 0 16px; }
li { margin: 5px 0; }
a { color: #cbd1d5; text-underline-offset: 2px; }
a:hover { color: #fff; }
code { color: #f0b85f; font: 13px/1.4 Menlo, monospace; overflow-wrap: anywhere; }
.intro { color: #bec6cb; font-size: 16px; }
.note { background: #1c1a15; border-left: 3px solid #f0a325; padding: 11px 14px; margin: 18px 0; }
.note strong { color: #f0b85f; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 23px 0; }
.card { display: block; color: #f1f2f3; text-decoration: none; background: #171a1c; border: 1px solid #3c4247; border-radius: 9px; padding: 13px 15px; }
.card:hover { border-color: #b8bec4; background: #22272a; }
.card strong { display: block; font-size: 14px; }
.card span { display: block; font-size: 12px; color: #aeb7bd; margin-top: 4px; }
.toc { columns: 2; column-gap: 30px; }
.toc li { break-inside: avoid; }
footer { border-top: 1px solid #41464b; padding-top: 14px; margin-top: 36px; color: #aeb7bd; font-size: 12px; }
footer a { margin-right: 14px; }
@media (max-width: 600px) { main { padding: 20px 18px 42px; } header > a:first-child { flex-basis: 100%; } .brand { white-space: normal; } .grid { grid-template-columns: 1fr; } .toc { columns: 1; } }