:root{--ink:#18292d;--paper:#faf9f5;--line:#d3d7d1;--muted:#4c6062;--accent:#b84322;--bright:#ff845a;--dark:#1b3036}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.68 "Segoe UI","Microsoft YaHei",system-ui,sans-serif}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}.wrap{width:min(1190px,calc(100% - 88px));margin:auto}header{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--line)}.head,.brand,nav,.lang,.actions,.foot,.bphead,figcaption{display:flex;align-items:center}.head{min-height:73px;gap:30px}.brand{gap:10px;font-size:24px;letter-spacing:-1.2px;white-space:nowrap}.brand i{font-style:normal;font-weight:450}nav{margin-left:auto;gap:30px;font-size:14px}nav a:hover,.link:hover,footer a:hover{text-decoration:underline;text-underline-offset:5px}.lang{padding:2px;border:1px solid #c4ccc6;border-radius:4px}.lang button{font-size:12px;border:0;background:none;padding:4px 8px;color:var(--muted)}.lang [aria-pressed=true]{background:var(--ink);border-radius:2px;color:#fff}.hero{display:grid;grid-template-columns:1.03fr .97fr;gap:6%;align-items:center;padding-block:clamp(50px,6vw,87px)}p,h1,h2,h3,figure{margin:0}.kicker{display:flex;align-items:center;gap:10px;font:650 12px/1.6 "Segoe UI","Microsoft YaHei",sans-serif;letter-spacing:.09em;color:var(--accent);margin-bottom:14px}.kicker i{width:21px;height:3px;background:currentColor}h1{font-size:clamp(38px,4.15vw,65px);line-height:1.22;letter-spacing:-.055em}h1 em{font-style:normal;color:var(--accent)}.lead,.intro,.brief>div>p:last-child{max-width:655px;color:var(--muted);margin-top:18px}.actions{gap:22px;margin-top:24px;flex-wrap:wrap}.btn,.link{font-size:14px;font-weight:650}.btn{display:inline-flex;gap:18px;align-items:center;border:0;background:var(--ink);color:#fff;border-radius:3px;padding:11px 17px}.btn:hover{background:#324c51}.link{color:var(--accent)}.blueprint{background:var(--dark);color:#f1eee1;border-radius:5px;padding:17px 22px 14px;box-shadow:6px 6px 0 #e8e4d9}.bphead,figcaption{justify-content:space-between;gap:12px;font:12px/1.4 Consolas,"Microsoft YaHei",monospace}.bphead{border-bottom:1px solid #587073;padding-bottom:10px}.orange{color:var(--bright)}figure svg{display:block;width:100%;height:auto}.rule{flex:1;border-top:1px dashed #72868a}.dot{width:7px;height:7px;background:var(--bright);border-radius:50%}figcaption{padding-top:10px;border-top:1px solid #587073}.pad{padding-block:58px}.caseband{background:#eff2ef;border-block:1px solid var(--line)}h2{font-size:clamp(28px,3vw,42px);line-height:1.25;letter-spacing:-.045em}.intro{font-size:15px}.demo{margin-top:27px;border:1px solid #bcc8c4;background:white;border-radius:4px;overflow:hidden}.tabs{display:flex;background:#f8faf6;border-bottom:1px solid var(--line)}.tabs button{color:var(--muted);background:none;border:0;border-right:1px solid var(--line);padding:12px 23px;font-weight:600;font-size:14px}.tabs [aria-pressed=true]{color:var(--ink);background:#fff;box-shadow:inset 0 -3px var(--accent)}.examplebody{display:grid;grid-template-columns:.68fr 1.32fr}.examplebody aside{background:#fcfbf6;border-right:1px solid var(--line);padding:24px}.examplebody aside h3{font:700 32px/1.3 Consolas,monospace;margin:5px 0 10px;letter-spacing:-1px}.examplebody aside small,.sku{font:12px/1.7 Consolas,"Microsoft YaHei",monospace;color:var(--muted)}#desc{border-top:1px dashed var(--line);margin-top:18px;padding-top:14px;font-size:14px}#log{padding:10px 24px}.event{display:grid;grid-template-columns:26px 1fr;gap:11px;padding:12px 0;border-bottom:1px solid var(--line)}.event:last-child{border:0}.event small,.index{color:var(--accent);font:600 13px/1.8 Consolas,monospace}.event h3{font-size:16px}.event p,.cols p,.brief>div>p:last-child{font-size:15px;color:var(--muted)}.cols{display:grid;grid-template-columns:1fr 1fr;gap:4%;margin-top:28px}.cols article{border-top:2px solid var(--ink);padding:16px 0 0}.cols h3{font-size:23px;margin:5px 0 9px}.cols strong{display:block;font-size:14px;margin-top:14px}.briefband{background:#eae6dc}.brief{display:grid;grid-template-columns:.85fr 1.15fr;gap:8%}form{display:grid;grid-template-columns:1fr 1fr;gap:12px}label{font-size:14px;font-weight:600}input,textarea{display:block;width:100%;padding:9px;margin-top:5px;color:var(--ink);background:#fff;border:1px solid #a6b1ab;border-radius:2px}textarea{resize:vertical}.wide{grid-column:1/-1}.note,#status{font-size:12px;color:var(--muted);margin-top:7px}.foot{padding-block:20px;gap:20px;font-size:13px}.foot strong{font-size:18px}.foot a{margin-left:auto}.skip{position:fixed;top:-100px;z-index:10;background:#fff;padding:8px}.skip:focus{top:8px}:focus-visible{outline:3px solid #a34c20;outline-offset:3px}@media(max-width:800px){.wrap{width:calc(100% - 40px)}.hero{gap:4%}.head{gap:14px}nav{gap:14px}}@media(max-width:650px){html{scroll-padding-top:108px}.head{display:grid;grid-template-columns:1fr auto;gap:4px;padding-block:9px}.brand{font-size:21px}nav{grid-column:1/-1;grid-row:2;justify-content:space-between;margin:0;font-size:13px}.lang{grid-column:2;grid-row:1}.hero,.brief,.cols,.examplebody{grid-template-columns:1fr}.hero{padding-block:32px;gap:24px}.lead{font-size:15px}.blueprint{padding:12px 14px}.pad{padding-block:37px}.tabs button{flex:1;padding:10px 4px;font-size:13px}.examplebody aside{border-right:0;border-bottom:1px solid var(--line);padding:15px}.examplebody aside h3{font-size:24px}.examplebody aside #desc{margin-top:8px;padding-top:8px}#log{padding:6px 15px}.cols,.brief{gap:22px}form{grid-template-columns:1fr}.foot{gap:10px;flex-wrap:wrap}.foot span{font-size:12px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}