:root{--bg:#f3f1ec;--paper:#fbfaf7;--ink:#15140f;--sub:rgba(21,20,15,.64);--faint:rgba(21,20,15,.44);--hair:rgba(21,20,15,.10);--accent:#2563eb;--mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;--r-md:18px;--wrap:1120px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,"SF Pro Text","SF Pro Display",system-ui,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;line-height:1.62;text-wrap:pretty}
a{color:var(--accent);text-decoration:none}
a:hover{color:#1d4ed8}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
header{position:sticky;top:0;z-index:50;background:rgba(243,241,236,.82);backdrop-filter:blur(18px);border-bottom:1px solid var(--hair)}
.bar{max-width:var(--wrap);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.brand .mark{width:26px;height:26px;border-radius:8px;background:var(--ink);color:#fff;display:grid;place-items:center;font:700 13px/1 var(--mono)}
nav{display:flex;gap:22px;margin-left:auto}
nav a{font-size:14.5px;font-weight:500;color:var(--sub)}
nav a:hover,nav a[aria-current="page"]{color:var(--ink)}
.lang{display:flex;border:1px solid var(--hair);border-radius:999px;overflow:hidden;background:var(--paper)}
.lang a{font:600 12px/1 var(--mono);letter-spacing:.06em;padding:9px 12px;color:var(--faint)}
.lang a[aria-current="page"]{background:var(--ink);color:#fff}
.doc{max-width:74ch;margin:0 auto;padding:64px 0 96px}
.kick{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
h1{margin:20px 0 0;font-size:clamp(32px,4.6vw,50px);letter-spacing:-.035em;line-height:1.05;font-weight:700}
.meta{margin:16px 0 0;font:600 12.5px/1.5 var(--mono);letter-spacing:.04em;color:var(--faint)}
.intro{margin:26px 0 0;font-size:18px;color:var(--sub)}
h2{margin:56px 0 0;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em;line-height:1.15;font-weight:700;padding-top:26px;border-top:1px solid var(--hair)}
h3{margin:34px 0 0;font-size:17.5px;letter-spacing:-.012em;font-weight:700}
p{margin:14px 0 0;font-size:16px}
ul{margin:14px 0 0;padding-left:0;list-style:none;display:grid;gap:10px}
ul li{position:relative;padding-left:22px;font-size:16px;color:var(--sub)}
ul li::before{content:"";position:absolute;left:4px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.55}
ul li b,ul li strong{color:var(--ink);font-weight:600}
.callout{margin:26px 0 0;padding:20px 22px;background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-md)}
.callout p{margin:0;font-size:15.5px;color:var(--sub)}
.callout p+p{margin-top:10px}
.toc{margin:34px 0 0;padding:22px;background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-md)}
.toc .lb{font:600 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.toc ol{margin:14px 0 0;padding-left:20px;display:grid;gap:7px;font-size:15.5px}
footer{border-top:1px solid var(--hair);padding:30px 0;font-size:13.5px;color:var(--faint)}
.frow{display:flex;flex-wrap:wrap;gap:20px;align-items:center}
.frow nav{margin-left:auto;gap:18px}
.frow nav a{font-size:13.5px;color:var(--faint)}
@media(max-width:820px){header nav{display:none}.bar .lang{margin-left:auto}.doc{padding-top:44px}}
@media(max-width:560px){.bar{gap:10px;padding:10px 18px}.wrap{padding:0 18px}}