:root{--navy:#0e2238;--navy2:#14304e;--ink:#1b2a3a;--paper:#f6f3ec;--paper2:#fffdf7;
--yellow:#ffc400;--yellow-d:#d9a400;--line:#ddd5c2;--mut:#5c6b7a;--good:#177245;
--grid:rgba(20,48,78,.07);--grid-d:rgba(255,255,255,.08);--r:14px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);
background:var(--paper);line-height:1.65;font-size:17px}
h1,h2,h3,.disp{font-family:Archivo,Inter,system-ui,sans-serif;letter-spacing:-.01em;color:var(--navy)}
h1{font-size:clamp(2rem,5vw,3rem);line-height:1.08;font-weight:900}
h2{font-size:clamp(1.4rem,3vw,1.8rem);font-weight:800;margin:1.6em 0 .55em}
h3{font-size:1.12rem;font-weight:800;margin:1.2em 0 .4em}
p{margin:.65em 0}
a{color:#0b5fa5;text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header.site{position:sticky;top:0;z-index:50;background:var(--navy);color:#fff;
border-bottom:3px solid var(--yellow)}
.hd{display:flex;align-items:center;gap:14px;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px;color:#fff;font-family:Archivo,sans-serif;
font-weight:900;font-size:1.12rem;line-height:1.1}
.logo:hover{text-decoration:none}
.logo .mark{width:36px;height:36px;flex:0 0 36px}
.hd nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.hd nav a{color:#dbe6f2;font-size:.93rem;font-weight:600;padding:7px 11px;border-radius:8px}
.hd nav a:hover{background:var(--navy2);color:#fff;text-decoration:none}
.crumbs{font-size:.86rem;color:var(--mut);padding:16px 0 0}
.crumbs a{color:var(--mut)}
.hero{background:var(--navy);color:#eaf1f8;padding:52px 0 46px;position:relative;overflow:hidden;
background-image:linear-gradient(var(--grid-d) 1px,transparent 1px),linear-gradient(90deg,var(--grid-d) 1px,transparent 1px);
background-size:34px 34px}
.hero h1{color:#fff;max-width:16ch}
.hero h1 .yl{color:var(--yellow)}
.hero .sub{max-width:58ch;color:#c4d4e4;font-size:1.08rem}
.tag{display:inline-block;background:var(--yellow);color:var(--navy);font-weight:800;font-size:.78rem;
padding:4px 10px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase}
.quick{background:var(--paper2);border:2px solid var(--navy);border-radius:var(--r);color:var(--ink);
padding:18px;margin-top:26px;max-width:680px;position:relative;box-shadow:6px 6px 0 var(--yellow)}
.quick h2{margin:0 0 8px;font-size:1.15rem}
.qrow{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
label.f{display:block;font-size:.82rem;font-weight:700;color:var(--navy);margin-bottom:4px}
input,select{font:inherit;font-size:1rem;padding:10px 12px;border:1.5px solid #b9c2cc;border-radius:9px;
background:#fff;color:var(--ink);width:100%}
input:focus,select:focus{outline:2.5px solid var(--yellow);border-color:var(--navy)}
.btn{display:inline-block;background:var(--yellow);color:var(--navy);font-weight:800;border:2px solid var(--navy);
padding:11px 20px;border-radius:10px;cursor:pointer;font-size:1rem;box-shadow:3px 3px 0 var(--navy)}
.btn:hover{background:#ffd21a;text-decoration:none}
.qres{margin-top:12px;font-weight:700;color:var(--navy);min-height:1.5em}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin:26px 0}
.card{background:var(--paper2);border:2px solid var(--navy);border-radius:var(--r);padding:20px;position:relative;color:var(--ink);display:block}
.card:hover{text-decoration:none;box-shadow:5px 5px 0 var(--yellow)}
.card::before,.card::after{content:"";position:absolute;width:14px;height:14px;border-color:var(--yellow-d);border-style:solid}
.card::before{top:6px;left:6px;border-width:3px 0 0 3px}
.card::after{bottom:6px;right:6px;border-width:0 3px 3px 0}
.card h3{margin:.35em 0 .3em;font-size:1.25rem}
.card p{font-size:.94rem;color:#42536a;margin:0}
.card .go{margin-top:12px;font-weight:800;color:#0b5fa5;font-size:.92rem}
.lede{background:#fff;border:2px solid var(--navy);border-left:8px solid var(--yellow);border-radius:10px;
padding:16px 20px;font-size:1.06rem;margin:18px 0}
.calc{background:var(--navy);border-radius:16px;padding:22px;margin:22px 0;color:#e8eff6;position:relative;
background-image:linear-gradient(var(--grid-d) 1px,transparent 1px),linear-gradient(90deg,var(--grid-d) 1px,transparent 1px);
background-size:30px 30px;border:2px solid var(--navy)}
.calc h2{color:#fff;margin-top:0}
.igrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.calc label.f{color:#ffd94d}
.readout{background:#0a1a2c;border:2px solid var(--yellow);border-radius:12px;padding:16px 18px;margin-top:18px}
.readout .big{font-family:Archivo,sans-serif;font-weight:900;font-size:1.5rem;color:var(--yellow);line-height:1.25}
.rtable{width:100%;border-collapse:collapse;margin-top:10px;font-size:.97rem}
.rtable td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.14);color:#e8eff6}
.rtable td:last-child{text-align:right;font-weight:800;color:#fff;white-space:nowrap}
.rtable tr:last-child td{border-bottom:0}
.cbtns{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.btn.ghost{background:transparent;color:#fff;border-color:#fff;box-shadow:none}
.btn.ghost:hover{background:var(--navy2)}
figure.diagram{background:#fff;border:2px solid var(--navy);border-radius:var(--r);padding:14px;margin:22px 0}
figure.diagram svg{width:100%;height:auto;display:block}
figure.diagram figcaption{font-size:.88rem;color:var(--mut);margin-top:8px}
table.data{width:100%;border-collapse:collapse;margin:14px 0;font-size:.96rem;background:#fff}
table.data th,table.data td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
table.data th{background:var(--navy);color:#fff;font-family:Archivo,sans-serif}
.example{background:#fff8dd;border:2px solid var(--yellow-d);border-radius:var(--r);padding:6px 20px 14px;margin:20px 0}
.example h2{color:#7a5b00}
ol.steps li,ul.mist li{margin:.45em 0}
details{background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:12px 16px;margin:10px 0}
details summary{font-weight:700;cursor:pointer;color:var(--navy)}
.srcbox{background:#eef3ee;border:1.5px solid #bcd2bc;border-radius:10px;padding:14px 18px;font-size:.92rem;margin:24px 0}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:24px 0}
.stat{background:var(--paper2);border:2px solid var(--navy);border-radius:12px;padding:16px;text-align:center}
.stat .n{font-family:Archivo,sans-serif;font-weight:900;font-size:1.7rem;color:var(--navy)}
.stat .l{font-size:.85rem;color:var(--mut);font-weight:600}
footer.site{background:var(--navy);color:#c4d4e4;margin-top:56px;padding:34px 0 90px}
footer.site a{color:#ffd94d}
footer.site .cols{display:flex;gap:34px;flex-wrap:wrap}
footer.site h3{color:#fff;margin-top:0}
.fine{font-size:.83rem;color:#8fa5ba;margin-top:22px}
#stickybar{position:fixed;left:0;right:0;bottom:0;background:var(--navy);color:#fff;z-index:60;
padding:10px 16px;display:none;align-items:center;gap:10px;border-top:3px solid var(--yellow);font-size:.95rem}
#stickybar b{color:var(--yellow)}
#stickybar .btn{margin-left:auto;padding:7px 14px;font-size:.9rem}
@media(max-width:760px){.toolpage #stickybar{display:flex}.hd nav{display:none}}
@media print{#stickybar,header.site,.cbtns{display:none}.calc{background:#fff;color:#000}.readout{border-color:#000}.readout .big,.rtable td{color:#000}}