:root{--bg:#f5f7fb;--paper:#fff;--ink:#18202d;--muted:#5b6473;--line:#dfe4ec;--accent:#2356d8;--code:#101827}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.7 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}header{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2}nav{max-width:1080px;margin:auto;padding:18px 24px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}.brand{font-weight:750;color:var(--ink);text-decoration:none;margin-right:auto}.navlinks{display:flex;gap:18px;flex-wrap:wrap}.navlinks a{color:var(--muted);text-decoration:none}.navlinks a:hover,a{color:var(--accent)}main{max-width:1080px;margin:0 auto;padding:48px 24px}.article{max-width:790px;margin:auto}.hero{padding:34px 0 26px;border-bottom:1px solid var(--line);margin-bottom:30px}.hero h1{font-size:clamp(34px,5vw,54px);line-height:1.12;max-width:820px;margin:0 0 18px}.hero p{font-size:20px;color:var(--muted);max-width:740px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}.card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:24px}.card h2,.card h3{line-height:1.3;margin:0 0 12px}.card p{color:var(--muted)}.meta{font-size:14px;color:var(--muted);letter-spacing:.02em;margin-bottom:12px}.article h1{font-size:clamp(32px,4vw,48px);line-height:1.18}.article h2{margin-top:42px;line-height:1.3}.article p{margin:18px 0}.summary{font-size:21px;color:var(--muted);border-left:4px solid var(--accent);padding-left:20px}pre{overflow:auto;background:var(--code);color:#e5edf9;border-radius:9px;padding:20px;font:14px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace}code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}p code,li code{background:#e9edf4;border-radius:4px;padding:2px 5px}ul{padding-left:24px}.list{list-style:none;padding:0}.list li{background:var(--paper);border-bottom:1px solid var(--line);padding:22px 0}.list h2{font-size:24px;line-height:1.3;margin:0 0 8px}.list p{color:var(--muted);margin:0}.callout{background:#eaf0ff;border-radius:10px;padding:22px;margin:26px 0}footer{border-top:1px solid var(--line);color:var(--muted);padding:28px 24px 46px;text-align:center}img{max-width:100%;height:auto;border-radius:12px}@media(max-width:640px){body{font-size:16px}main{padding:30px 18px}nav{padding:14px 18px;gap:12px}.brand{width:100%}.navlinks{gap:14px}.hero{padding-top:18px}}