:root{
--ink:#16181d;--ink2:#23262e;--steel:#3a3f4b;--mut:#6a7080;--line:#e3e5ea;
--amber:#f5a200;--amber-d:#d98a00;--paper:#f6f6f4;--card:#ffffff;
--red:#d23b2e;--green:#3f9d4a;--blue:#2f6fd0;
--wrap:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 "Segoe UI",-apple-system,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:"Arial Narrow","Segoe UI Semibold",Roboto Condensed,sans-serif;font-weight:800;letter-spacing:.2px;line-height:1.12;color:var(--ink)}

.utility{background:var(--ink);color:#c7ccd6;font-size:13px}
.u-in{display:flex;justify-content:space-between;align-items:center;height:34px}
.u-r{color:var(--amber);font-weight:600}
@media(max-width:620px){.u-r{display:none}}

.masthead{background:var(--ink2);position:sticky;top:0;z-index:40;box-shadow:0 2px 0 var(--amber)}
.m-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand img{height:40px;width:auto}
.topnav{display:flex;gap:26px}
.topnav a{color:#dfe2e8;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.6px;padding:6px 0;border-bottom:2px solid transparent}
.topnav a:hover{color:#fff;border-color:var(--amber)}
@media(max-width:520px){.topnav{gap:16px}.topnav a{font-size:12px}}

.hero{background:linear-gradient(180deg,#1b1e25,#23262e);color:#fff;padding:54px 0 48px;border-bottom:4px solid var(--amber)}
.hero-bar{display:inline-block;background:var(--amber);color:#1a1207;font-weight:800;text-transform:uppercase;letter-spacing:1px;font-size:13px;padding:5px 12px;border-radius:3px}
.hero h1{font-size:40px;margin:16px 0 10px;max-width:760px;color:#fff}
.hero .lead{color:#c4c9d3;font-size:18px;max-width:660px;margin:0}
@media(max-width:600px){.hero h1{font-size:29px}.hero .lead{font-size:16px}}

.home{padding:40px 0 56px}
.sec-h{font-size:15px;text-transform:uppercase;letter-spacing:1.4px;color:var(--mut);border-bottom:2px solid var(--line);padding-bottom:10px;margin:0 0 22px}
.glist{display:flex;flex-direction:column;gap:14px}
.grow{display:flex;gap:18px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:6px;padding:14px;transition:box-shadow .15s,transform .15s}
.grow:hover{box-shadow:0 8px 22px rgba(20,24,32,.12);transform:translateY(-1px)}
.g-thumb{flex:0 0 150px}
.g-thumb img{width:150px;height:100px;object-fit:cover;border-radius:4px}
.g-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.g-cat{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--amber-d);font-weight:800}
.g-title{font-family:"Arial Narrow","Segoe UI Semibold",sans-serif;font-weight:800;font-size:21px;color:var(--ink)}
.g-desc{color:var(--mut);font-size:14px}
.g-sev{align-self:flex-start;margin-top:4px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:3px;background:#fff2d6;color:#8a5a00}
.sev-red .g-sev,.g-sev.sev-red{background:#fbe1de;color:#9a261b}
@media(max-width:560px){.grow{flex-direction:column}.g-thumb,.g-thumb img{flex-basis:auto;width:100%;height:160px}}

.arch{padding:34px 0 56px}
.crumb{font-size:13px;color:var(--mut);margin:0 0 14px}
.crumb a{color:var(--amber-d);font-weight:600}
.arch h1{font-size:34px;margin:6px 0 22px}

.guide{padding:30px 0 60px}
.guide h1{font-size:34px;margin:8px 0 18px;max-width:820px}
.hero-img{margin:0 0 22px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.hero-img img{width:100%;height:auto;display:block}
.hero-img figcaption{font-size:13px;color:var(--mut);padding:8px 12px;background:#fafafa;border-top:1px solid var(--line)}

.ataglance{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--amber);border-radius:8px;padding:18px 20px;margin:0 0 24px}
.ataglance.sev-red{border-top-color:var(--red)}
.ataglance h2{font-size:14px;text-transform:uppercase;letter-spacing:1.2px;color:var(--mut);margin:0 0 12px}
.ataglance dl{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;margin:0}
.ataglance dt{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--amber-d);font-weight:800;margin-bottom:2px}
.ataglance dd{margin:0;font-size:15px;color:var(--ink);font-weight:500}
@media(max-width:560px){.ataglance dl{grid-template-columns:1fr}}

.lede{font-size:18px;color:#2b2f38;margin:0 0 14px}
.lede p{margin:0 0 14px}
.blk{margin:26px 0}
.blk h2{font-size:24px;margin:0 0 12px;padding-left:12px;border-left:4px solid var(--amber)}
.prose p{margin:0 0 14px}
.prose strong{color:var(--ink)}
.prose.long h2{font-size:22px;margin:26px 0 10px}
.prose.long ul{margin:0 0 14px;padding-left:20px}
.prose.long li{margin:4px 0}

.inline-img{margin:18px 0 6px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#0c0e12}
.inline-img img{width:100%;height:auto;display:block}
.inline-img figcaption{font-size:13px;color:var(--mut);padding:9px 14px;background:#fafafa;border-top:1px solid var(--line)}
.symwrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
.symtable{width:100%;border-collapse:collapse;font-size:14.5px;min-width:680px;background:#fff}
.symtable thead th{background:var(--ink2);color:#eef0f4;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.7px;padding:11px 12px;font-weight:700}
.symtable tbody td{padding:12px;border-top:1px solid var(--line);vertical-align:top}
.symtable tbody tr:nth-child(even){background:#fafbfc}
.th-ic,.td-ic{width:62px;text-align:center}
.sym{width:34px;height:34px}
.noic{color:var(--mut)}
.td-nm{font-weight:700;color:var(--ink);min-width:140px}
.th-col{width:96px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
.d-red{background:var(--red)}.d-amber{background:var(--amber)}.d-green{background:var(--green)}.d-blue{background:var(--blue)}

.faq{margin:34px 0 10px}
.faq h2{font-size:24px;margin:0 0 16px;padding-left:12px;border-left:4px solid var(--amber)}
.qa-list{display:flex;flex-direction:column;gap:12px}
.qa{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.qa .q{font-weight:800;color:var(--ink);margin:0 0 6px;font-size:16px}
.qa .a{margin:0;color:#3a3f4b}

.related{margin:36px 0 0;border-top:2px solid var(--line);padding-top:20px}
.related h2{font-size:18px;text-transform:uppercase;letter-spacing:1px;color:var(--mut);margin:0 0 14px}
.rel-list{display:flex;flex-wrap:wrap;gap:10px}
.rel-list a{background:#fff;border:1px solid var(--line);border-radius:20px;padding:7px 14px;font-size:13.5px;font-weight:600;color:var(--ink2)}
.rel-list a:hover{border-color:var(--amber);color:var(--amber-d)}

.page{padding:34px 0 60px;max-width:780px}
.page h1{font-size:32px;margin:6px 0 18px}

.foot{background:var(--ink);color:#aeb4c0;margin-top:30px;border-top:3px solid var(--amber)}
.f-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;flex-wrap:wrap}
.f-l{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.f-logo{height:34px;width:auto}
.f-line{color:#aeb4c0;font-size:13.5px;max-width:340px}
.f-r{display:flex;flex-wrap:wrap;gap:22px}
.f-r a{color:#dfe2e8;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.6px}
.f-r a:hover{color:var(--amber)}
.f-bot{border-top:1px solid #2a2e37;padding:14px 0;font-size:12.5px;color:#777e8c}









@media(max-width:680px){}
