:root { --ink:#17221e; --muted:#5c675f; --line:#d9dfd8; --paper:#fbfcf9; --moss:#165a47; --lime:#d9f65c; --night:#10261f; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); line-height:1.6; } a { color:var(--moss); text-decoration-thickness:1px; text-underline-offset:3px; } a:hover { color:#0b392d; }.shell { width:min(1120px,calc(100% - 40px)); margin:0 auto; }
nav { border-bottom:1px solid var(--line); background:rgba(251,252,249,.94); position:sticky; top:0; backdrop-filter:blur(12px); z-index:2; }.nav-inner { height:68px; display:flex; align-items:center; justify-content:space-between; gap:24px; }.brand { color:var(--ink); font-weight:800; letter-spacing:-.04em; text-decoration:none; font-size:1.35rem; }.brand i { color:var(--moss); font-style:normal; }.links { display:flex; gap:19px; font-size:.92rem; }.links a { color:var(--muted); text-decoration:none; }.links a:hover,.links a[aria-current="page"] { color:var(--ink); }
.hero { padding:108px 0 60px; }.eyebrow { color:var(--moss); font-weight:700; font-size:.78rem; letter-spacing:.11em; text-transform:uppercase; }h1 { max-width:860px; margin:13px 0 22px; font-size:clamp(3rem,7vw,6.2rem); line-height:.98; letter-spacing:-.07em; }.lede { max-width:660px; color:var(--muted); font-size:clamp(1.12rem,2vw,1.38rem); }.command { max-width:800px; margin:38px 0 0; padding:18px 21px; border-radius:10px; background:var(--night); color:#eff6ed; overflow-x:auto; font:.95rem ui-monospace,SFMono-Regular,Menlo,monospace; }.prompt { color:var(--lime); user-select:none; }.hero-image { margin:52px 0 22px; width:100%; border:1px solid var(--line); border-radius:12px; background:#eff3ec; }.callout { border-left:4px solid var(--lime); background:#f0f6e1; padding:17px 20px; margin:28px 0; }.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:54px 0 90px; }.card { padding:25px; border:1px solid var(--line); border-radius:10px; background:#fff; }.card h2 { margin:0 0 9px; font-size:1.17rem; letter-spacing:-.02em; }.card p { color:var(--muted); margin:0; }
.page { max-width:860px; padding:58px 0 100px; }.aside { display:flex; flex-wrap:wrap; gap:9px; padding:0 0 28px; margin-bottom:42px; border-bottom:1px solid var(--line); font-size:.87rem; }.aside a { padding:6px 11px; border:1px solid var(--line); border-radius:999px; color:var(--muted); text-decoration:none; }.aside a:hover { background:#f0f6e1; color:var(--ink); border-color:#bfd4b7; }article h1 { font-size:clamp(2.5rem,5vw,4.4rem); line-height:1; letter-spacing:-.06em; margin:0 0 24px; }article h2 { margin:48px 0 14px; font-size:1.5rem; letter-spacing:-.04em; }article p,article li { max-width:700px; }article p,article ul { margin:0 0 18px; }pre { margin:22px 0; padding:18px; overflow-x:auto; border-radius:9px; background:var(--night); color:#eff6ed; font:.88rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; }code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; }table { border-collapse:collapse; width:100%; margin:24px 0; font-size:.94rem; }td,th { text-align:left; vertical-align:top; padding:12px; border-bottom:1px solid var(--line); }th { color:var(--muted); font-weight:600; }footer { border-top:1px solid var(--line); padding:28px 0; color:var(--muted); font-size:.87rem; }
.pager { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:56px 0 0; padding-top:24px; border-top:1px solid var(--line); font-size:.92rem; }.pager a { text-decoration:none; color:var(--ink); }.pager a:hover { color:var(--moss); }.pager .dir { display:block; color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:3px; }.pager .next { text-align:right; margin-left:auto; }
.diagram-wrap { margin:36px 0 10px; padding:26px; border:1px solid var(--line); border-radius:12px; background:#fff; overflow-x:auto; }.diagram-wrap svg { min-width:640px; width:100%; height:auto; font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
.dcap { color:var(--muted); font-size:.9rem; margin:0 0 44px; }
@media (max-width:720px) { .links { gap:11px; font-size:.78rem; }.hero { padding-top:66px; }.grid { grid-template-columns:1fr; }.page { padding-top:42px; }.aside { margin-bottom:28px; } }