:root{
  --bg:#0e1116;--bg2:#151a22;--bg3:#1c232d;--line:#2a3440;--line2:#39465a;
  --tx:#e6ecf3;--tx2:#9fb0c4;--tx3:#6b7c92;
  --au:#f2c14e;--ag:#cfd8e3;--pd:#7fb2f0;--pt:#b49bf0;--cu:#e08a5a;--ta:#5fd0a0;--nd:#f07fb4;--base:#7d8b9c;--re:#5ad1c7;
  --s:#ff5c7a;--a:#ff9f43;--b:#f2c14e;--c:#7fb2f0;--d:#6b7c92;
  --warn:#ff5c5c;--ok:#4ade80;--r:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-text-size-adjust:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px}
a{color:var(--c);text-decoration-color:rgba(127,178,240,.4);text-underline-offset:2px}
a:hover{text-decoration-color:currentColor}
h1,h2,h3,h4{line-height:1.22;letter-spacing:-.015em;margin:0 0 .5em}
h1{font-size:clamp(26px,4.4vw,40px);font-weight:700;margin-top:.2em}
h2{font-size:clamp(20px,2.8vw,26px);font-weight:650;margin-top:1.9em;padding-bottom:.3em;border-bottom:1px solid var(--line)}
h3{font-size:18px;margin-top:1.5em}
p{margin:0 0 1em}
img,svg{max-width:100%}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:var(--bg3);padding:2px 6px;border-radius:4px;color:var(--au)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--au);color:#111;padding:8px 12px;border-radius:8px;z-index:99}

/* header */
header.site{border-bottom:1px solid var(--line);background:rgba(14,17,22,.95);position:sticky;top:0;z-index:40;backdrop-filter:blur(10px)}
header.site .wrap{display:flex;align-items:center;gap:18px;min-height:60px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--tx);flex:0 0 auto}
.brand b{display:block;font-size:15px;letter-spacing:.07em}
.brand small{display:block;font-size:10px;color:var(--tx3);letter-spacing:.08em;text-transform:uppercase}
.mainnav{display:flex;gap:16px;margin-left:auto;flex-wrap:wrap;font-size:14px}
.mainnav a{color:var(--tx2);text-decoration:none;font-weight:550;padding:4px 0}
.mainnav a:hover{color:var(--tx)}
.mainnav a.cta{color:var(--au)}
.crumbs{font-size:12.5px;color:var(--tx3);padding:12px 0 0}
.crumbs a{color:var(--tx3);text-decoration:none}
.crumbs a:hover{color:var(--tx2);text-decoration:underline}
.crumbs span{opacity:.5;margin:0 2px}
main{padding:8px 0 56px}
section{margin-bottom:6px}

/* hero */
.hero{padding:26px 0 10px}
.lede{font-size:clamp(16px,2.1vw,19px);color:var(--tx2);line-height:1.6;max-width:70ch}
.sub{color:var(--tx3);font-size:14px;margin-top:-.5em}
.herobtns{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 6px}
.btn{display:inline-block;background:var(--au);color:#161009;font-weight:700;padding:11px 20px;border-radius:10px;text-decoration:none;font-size:15px}
.btn.ghost{background:transparent;color:var(--tx);border:1px solid var(--line2)}
.stats{list-style:none;display:flex;gap:26px;padding:0;margin:26px 0 0;flex-wrap:wrap}
.stats li{font-size:12px;color:var(--tx3);text-transform:uppercase;letter-spacing:.08em}
.stats b{display:block;font-size:26px;color:var(--au);letter-spacing:-.02em;font-family:ui-monospace,Menlo,monospace}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:16px 0}
.tiles.small{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tile{display:block;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:15px;text-decoration:none;color:var(--tx)}
a.tile:hover{border-color:var(--line2);background:var(--bg3)}
.tile b{display:block;font-size:15.5px;margin-bottom:5px;line-height:1.3}
.tile span{display:block;font-size:13px;color:var(--tx2);line-height:1.5}
.tile.flat b{color:var(--au);font-family:ui-monospace,Menlo,monospace}

/* component cards */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin:14px 0}
.ccard{display:flex;gap:11px;align-items:flex-start;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:11px;text-decoration:none;color:var(--tx)}
.ccard:hover{border-color:var(--line2);background:var(--bg3)}
.cthumb{flex:0 0 46px;width:46px;height:46px;border-radius:8px;background:var(--bg3);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden}
.cbody{flex:1;min-width:0}
.cname{display:block;font-size:14.5px;font-weight:650;line-height:1.3}
.cmeta{display:block;font-size:11.5px;color:var(--tx3);margin:2px 0 6px}
.mrow{display:flex;flex-wrap:wrap;gap:4px}
.mrow.big{margin-top:12px}
.mtag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:2.5px 7px;border-radius:6px;background:var(--bg3);border:1px solid var(--line);color:var(--tx2)}
.mtag i{font-style:normal;font-weight:400;opacity:.75;font-size:10.5px}
.mtag[data-m=Au]{color:var(--au);border-color:rgba(242,193,78,.3);background:rgba(242,193,78,.08)}
.mtag[data-m=Ag]{color:var(--ag);border-color:rgba(207,216,227,.25);background:rgba(207,216,227,.07)}
.mtag[data-m=Pd]{color:var(--pd);border-color:rgba(127,178,240,.3);background:rgba(127,178,240,.08)}
.mtag[data-m=Pt]{color:var(--pt);border-color:rgba(180,155,240,.3);background:rgba(180,155,240,.08)}
.mtag[data-m=Cu]{color:var(--cu);border-color:rgba(224,138,90,.3);background:rgba(224,138,90,.08)}
.mtag[data-m=Ta]{color:var(--ta);border-color:rgba(95,208,160,.3);background:rgba(95,208,160,.08)}
.mtag[data-m=Nd]{color:var(--nd);border-color:rgba(240,127,180,.3)}
.mtag.none{color:var(--tx3)}
.tier{flex:0 0 auto;font-size:10px;font-weight:800;width:20px;height:20px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;color:#111}
.tier.S{background:var(--s)}.tier.A{background:var(--a)}.tier.B{background:var(--b)}.tier.C{background:var(--c)}.tier.D{background:var(--d);color:#0e1116}
.more{font-weight:600}
.hublink{font-size:13px;font-weight:400;float:right;margin-top:6px}
.jump{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 6px}
.jump a{font-size:12.5px;padding:6px 12px;border-radius:999px;background:var(--bg3);border:1px solid var(--line);color:var(--tx2);text-decoration:none}
.jump a:hover{border-color:var(--line2);color:var(--tx)}
.jump i{font-style:normal;opacity:.5;font-size:11px}

/* component page */
.chead{display:grid;grid-template-columns:minmax(0,auto) minmax(320px,1fr);gap:26px;align-items:start;margin:10px 0 22px}
.cart{max-width:460px}
.eyebrow{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--tx3)}
.eyebrow a{color:var(--tx3)}
.soloart,.vbox{background:repeating-conic-gradient(#161a20 0% 25%,#1b2027 0% 50%) 0 0/10px 10px;border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;align-items:flex-end;justify-content:center}
.vars{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.vars .v{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:150px}
.vbox{min-width:48px}
.vars figcaption{font-size:10.5px;color:var(--tx2);text-align:center;line-height:1.3}
.vars .dim{display:block;font-family:ui-monospace,Menlo,monospace;font-size:9.5px;color:var(--tx3)}
.rulernote{font-size:11.5px;color:var(--tx3);margin-top:8px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:20px 0}
.pbox{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.pbox .lbl{display:block;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--tx3)}
.pbox b{display:block;font-size:20px;font-family:ui-monospace,Menlo,monospace;margin:2px 0}
.pbox b.au{color:var(--au)}
.pbox .u{font-size:10.5px;color:var(--tx3)}
.conf{font-size:13px!important;text-transform:uppercase;letter-spacing:.05em}
.conf.high{color:var(--ok)}.conf.med{color:var(--b)}.conf.low{color:var(--a)}

/* tables */
.mtable{width:100%;border-collapse:collapse;font-size:14px;margin:14px 0}
.mtable th{text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--tx3);padding:8px;border-bottom:1px solid var(--line2)}
.mtable td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--tx2)}
.mtable td.m{color:var(--tx);font-weight:600;white-space:nowrap}
.mtable td.q{font-family:ui-monospace,Menlo,monospace;color:var(--au);white-space:nowrap}
.mtable td.m[data-m=Ag]{color:var(--ag)}.mtable td.m[data-m=Pd]{color:var(--pd)}
.mtable td.m[data-m=Pt]{color:var(--pt)}.mtable td.m[data-m=Cu]{color:var(--cu)}
table{width:100%;border-collapse:collapse;font-size:14px;margin:14px 0}
table th{text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--tx3);padding:8px;border-bottom:1px solid var(--line2)}
table td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--tx2)}
.calcline{font-size:13.5px;color:var(--tx3);background:var(--bg2);border-left:3px solid var(--au);border-radius:0 8px 8px 0;padding:10px 13px}
.temp{font-family:ui-monospace,Menlo,monospace;font-size:13.5px;color:var(--cu)}

/* callouts */
.callout{border-radius:10px;padding:12px 15px;margin:14px 0;font-size:14.5px;line-height:1.6;border:1px solid}
.callout.re{background:rgba(90,209,199,.08);border-color:rgba(90,209,199,.3);border-left:3px solid var(--re);color:#b6efe9}
.callout.trap{background:rgba(107,124,146,.1);border-color:var(--line2);color:var(--tx2)}
.callout.danger{background:rgba(255,92,92,.08);border-color:rgba(255,92,92,.32);border-left:3px solid var(--warn);color:#ffc9c9}
.callout.grade{background:rgba(242,193,78,.08);border-color:rgba(242,193,78,.3);color:var(--au);font-weight:600}
.callout ul{margin:8px 0 0;padding-left:20px}
.callout li{margin-bottom:5px}
.hzlist{display:grid;gap:10px;margin:14px 0}
.hzitem{background:var(--bg2);border:1px solid rgba(255,92,92,.25);border-left:3px solid var(--warn);border-radius:10px;padding:11px 14px}
.hzitem a{text-decoration:none;color:#ffb3b3}
.hzitem p{margin:5px 0 0;font-size:13.5px;color:var(--tx2)}

/* faq */
.faq details{background:var(--bg2);border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.faq summary{padding:12px 15px;cursor:pointer;font-weight:600;font-size:14.5px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+ ";color:var(--au);font-weight:800}
.faq details[open] summary::before{content:"− "}
.faq p{padding:0 15px 13px;margin:0;color:var(--tx2);font-size:14px}

/* board diagram */
.bdiag{position:relative;width:100%;aspect-ratio:100/70;background:linear-gradient(160deg,#1c5537,#123a25);border:1px solid #0d2c1c;border-radius:10px;overflow:hidden;margin:16px 0}
.bdiag.low{background:linear-gradient(160deg,#8a6a37,#6b5029)}
.bdiag.high{background:linear-gradient(160deg,#152d4a,#0f2036)}
.zone{position:absolute;border:1.5px solid;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:650;text-align:center;padding:2px;line-height:1.15;background:rgba(14,17,22,.5);color:var(--tx)}
.zone[data-c=au]{border-color:var(--au);color:#ffe9a8;background:rgba(242,193,78,.16)}
.zone[data-c=ag]{border-color:var(--ag);color:#eef2f7;background:rgba(207,216,227,.14)}
.zone[data-c=cu]{border-color:var(--cu);color:#f6c5a6;background:rgba(224,138,90,.15)}
.zone[data-c=warn]{border-color:var(--warn);color:#ffc9c9;background:rgba(255,92,92,.16)}
.zone[data-c=none]{border-color:var(--tx3);color:var(--tx2)}
.zonelist{margin:16px 0}
.zonelist dt{font-weight:700;font-size:14px;margin-top:12px;padding-left:11px;border-left:3px solid var(--tx3)}
.zonelist dt[data-c=au]{border-color:var(--au);color:var(--au)}
.zonelist dt[data-c=ag]{border-color:var(--ag);color:var(--ag)}
.zonelist dt[data-c=cu]{border-color:var(--cu);color:var(--cu)}
.zonelist dt[data-c=warn]{border-color:var(--warn);color:#ffb3b3}
.zonelist dd{margin:3px 0 0 14px;font-size:14px;color:var(--tx2)}
ol.steps{padding-left:0;list-style:none;counter-reset:s;margin:16px 0}
ol.steps li{counter-increment:s;position:relative;padding:12px 0 12px 40px;border-top:1px solid var(--line)}
ol.steps li:first-child{border-top:none}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:13px;width:26px;height:26px;border-radius:50%;background:var(--bg3);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--tx2)}
ol.steps li.hz::before{background:var(--warn);border-color:var(--warn);color:#1a0000}
ol.steps b{font-size:15px}
ol.steps p{margin:5px 0 0;font-size:14px;color:var(--tx2)}
.stepmeta{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.stepmeta span{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:4px;background:var(--bg3);border:1px solid var(--line);color:var(--tx3)}
.stepmeta .tmp{color:var(--cu);border-color:rgba(224,138,90,.3)}
.stepmeta .warn{color:var(--warn);border-color:rgba(255,92,92,.4)}

/* hazards */
.sevbadge{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:5px;margin-bottom:12px}
.sevbadge.fatal{background:var(--warn);color:#1a0000}
.sevbadge.serious{background:var(--a);color:#1a0d00}
.sevbadge.caution{background:var(--b);color:#1a1400}
.hzpts{padding-left:20px}
.hzpts li{margin-bottom:9px;color:var(--tx2)}
.hzgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin:16px 0}
.hzcard{display:block;background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--tx3);border-radius:10px;padding:12px;text-decoration:none;color:var(--tx)}
.hzcard.fatal{border-left-color:var(--warn)}
.hzcard.serious{border-left-color:var(--a)}
.hzcard.caution{border-left-color:var(--b)}
.hzcard:hover{background:var(--bg3)}
.hzcard .sev{display:block;font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--tx3);margin-bottom:3px}
.hzcard b{display:block;font-size:14.5px;margin-bottom:4px}
.hzcard .wh{display:block;font-size:11.5px;color:var(--tx3);line-height:1.4}

/* era cards */
.eracard{border-left:3px solid;padding:10px 0 10px 14px;margin-bottom:18px}
.eracard>b{font-size:15px}
.eracard .rd{font-size:13px;color:var(--tx2);display:block;margin:2px 0 6px}
.eracard .act{font-size:14px;background:var(--bg2);border-radius:8px;padding:9px 12px;margin-top:8px;color:var(--tx)}
.eracard ul{padding-left:20px;color:var(--tx2);font-size:14px}

/* guides */
.guide{max-width:74ch}
.guide h2{margin-top:2.1em}
.guide li{margin-bottom:8px;color:var(--tx2)}
.guide ol,.guide ul{padding-left:22px}
.byline{font-size:12.5px;color:var(--tx3);margin-top:-.4em}
.contactbox{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:14px;font-size:16px}

/* footer */
footer.site{border-top:1px solid var(--line);background:var(--bg2);margin-top:40px;padding:30px 0}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:22px;margin-bottom:22px}
.fcols b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--tx3);margin-bottom:8px}
.fcols a{display:block;font-size:13.5px;color:var(--tx2);text-decoration:none;padding:3px 0}
.fcols a:hover{color:var(--tx);text-decoration:underline}
.fnote{font-size:11.5px;color:var(--tx3);max-width:80ch;line-height:1.6;margin:0 0 6px}

@media(max-width:640px){
  .chead{grid-template-columns:1fr;gap:14px}
  header.site .wrap{min-height:auto;padding-top:10px;padding-bottom:10px}
  .mainnav{margin-left:0;width:100%;gap:14px;font-size:13px}
  .hublink{float:none;display:block;margin-top:4px}
}

/* live price bar */
.pricebar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:26px 0 -14px;
  padding:9px 13px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--tx2)}
.pricebar .pb-live{font-family:inherit;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ok);font-weight:800}
.pricebar .pb-when{margin-left:auto;color:var(--tx3);font-size:10.5px}
.pricebar span[data-spot-price]{white-space:nowrap}