/* design: CodeReview editorial · BrowserOps diagram-led · shared dark technical palette */
body.product-jan{--bg:#141318;--surface:#1c1a22;--muted:#b3adc2;--line:#3d3848;--accent:#c9b6ff;--ink:#231b3d}
body.product-wp{--bg:#13161b;--surface:#1b2028;--muted:#aab4c4;--line:#36404f;--accent:#9cc4ff;--ink:#0f1f38}
body.product-brand{--bg:#17131a;--surface:#211a26;--muted:#bdaec8;--line:#46384f;--accent:#f2a7d8;--ink:#33112a}
body.product-legal{--bg:#14130f;--surface:#1d1b15;--muted:#bab3a2;--line:#423c2e;--accent:#e8c77a;--ink:#2e2410}
body.product-news{--bg:#11161a;--surface:#182128;--muted:#a8b9c4;--line:#334552;--accent:#7fd0e8;--ink:#0d2a33}
body.product-morassel{--bg:#141612;--surface:#1c201a;--muted:#b0baa8;--line:#3a4434;--accent:#c5e38a;--ink:#20300f}
body.product-gpu{--bg:#12131a;--surface:#1a1c26;--muted:#aeb1c8;--line:#373b52;--accent:#a9a6ff;--ink:#1a1840}
body.product-creative{--bg:#18120f;--surface:#221a16;--muted:#c4b0a6;--line:#4a3830;--accent:#ffb38a;--ink:#381a0c}
body.product-media{--bg:#101718;--surface:#172123;--muted:#a9bec0;--line:#33484b;--accent:#8fe0d6;--ink:#0f2a27}
body.product-video{--bg:#161414;--surface:#201c1c;--muted:#bdb0b0;--line:#463a3a;--accent:#ff9a9a;--ink:#3a1212}
body.product-gpuctl{--bg:#121514;--surface:#1a1f1d;--muted:#aebcb5;--line:#36443e;--accent:#9ee6bf;--ink:#123024}
.review-hero .kev-title h1{font-size:clamp(42px,5.8vw,77px)}
.browser-hero{grid-template-columns:7fr 5fr}
.browser-hero h1{font-size:clamp(36px,4vw,58px)}
.browser-diagram{border:1px solid var(--line);background:var(--surface);min-width:0}
.browser-diagram>h2{font-size:29px;padding:25px 28px 12px}
.browser-diagram ol{list-style:none;margin:0;padding:8px 28px 20px}
.browser-diagram li{display:flex;gap:20px;align-items:flex-start;border-top:1px solid var(--line);padding-block:16px}
.diagram-step{font:13px ui-monospace,Consolas,monospace;color:var(--accent);padding-top:8px}
.browser-diagram h3{font-size:17px}
.browser-diagram li p{font-size:13px;margin-top:4px}
.browser-diagram .diagram-caption{font-size:11px;line-height:1.8;padding:12px 28px;border-top:1px solid var(--line)}
.connection-example{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;padding-top:32px;margin-top:30px;border-top:1px solid var(--line)}
.connection-example h3{font-size:18px;margin-bottom:10px}
.connection-example p{font-size:13px;max-width:340px}
.connection-example dl{direction:ltr;font:12px ui-monospace,Consolas,monospace;margin:0;min-width:0}
.connection-example dl>div{display:grid;grid-template-columns:112px 1fr;gap:14px;padding-block:12px;border-bottom:1px solid var(--line)}
.connection-example dt{color:var(--muted)}
.connection-example dd{margin:0;overflow-wrap:anywhere;color:var(--text);line-height:1.8}
@media(max-width:780px){.browser-hero{grid-template-columns:1fr}.connection-example{grid-template-columns:1fr;gap:22px}.review-hero .kev-title h1{font-size:52px}.browser-diagram{max-width:640px}.browser-diagram>h2{font-size:27px}}
@media(max-width:480px){.review-hero .kev-title h1{font-size:37px}.browser-hero h1{font-size:36px}.browser-diagram>h2{padding:22px 20px 12px;font-size:25px}.browser-diagram ol{padding-inline:20px}.browser-diagram .diagram-caption{padding-inline:20px}.connection-example dl{font-size:11px}.connection-example dl>div{grid-template-columns:1fr;gap:5px}.connection-example dd{padding-bottom:4px}}

.protocol-hero{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:center;padding-block:72px 64px}
.protocol-hero h1{font-size:clamp(38px,4.4vw,64px)}
.review-scope{padding:32px 30px;border-inline-start:1px solid var(--line)}
.scope-label{font:12px ui-monospace,Consolas,monospace;color:var(--accent);text-align:right;margin-bottom:20px}
.review-scope h2{font-size:31px}
.review-scope ol{list-style:decimal;padding-inline-start:24px;margin-block:20px;font-size:14px;color:var(--muted)}
.review-scope li{padding-block:7px;padding-inline-start:6px}
.review-scope li::marker{font-family:ui-monospace,Consolas,monospace;color:var(--accent)}
.review-scope .scope-caption{font-size:11px;line-height:1.9;max-width:300px}
@media(max-width:780px){.protocol-hero{grid-template-columns:1fr;gap:32px;padding-block:44px}.review-scope{padding-block:20px;padding-inline:22px;border-inline-start:2px solid var(--line)}.review-scope h2{font-size:27px}.review-scope h2 br{display:none}.review-scope ol{display:flex;flex-wrap:wrap;gap:4px 34px;margin-block:14px}.review-scope .scope-caption{max-width:none}}
@media(max-width:480px){.protocol-hero h1{font-size:36px}.review-scope ol{display:block}.review-scope h2{font-size:25px}}