:root{
  --navy:#0d2b4c; --navy2:#123a66; --paper:#fbfaf7; --gold:#c9a227; --gold-soft:#f7efda;
  --ink:#1d2733; --ink2:#49596c; --ink3:#75859a; --line:#e4dfd2; --line2:#d8d2c2;
  --card:#ffffff; --good:#177245; --good-soft:#e8f4ec; --warn:#9a6a12; --warn-soft:#fdf3dd;
  --bad:#b03a2e; --bad-soft:#fdeeec; --radius:12px;
  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.25;color:var(--navy);letter-spacing:-.01em}
h1{font-size:34px;margin:0 0 10px}
h2{font-size:24px;margin:34px 0 12px}
h3{font-size:18px;margin:24px 0 8px}
p{margin:10px 0}
a{color:var(--navy2);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--navy)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
main{padding:26px 0 60px}
.lede{font-size:18px;color:var(--ink2);max-width:46em}
.small{font-size:13.5px;color:var(--ink2)}
.tiny{font-size:12.5px;color:var(--ink3)}
.num{font-variant-numeric:tabular-nums}
section{scroll-margin-top:76px}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:var(--navy);color:#fff;box-shadow:0 1px 6px rgba(13,43,76,.25)}
.site-head .wrap{display:flex;align-items:center;gap:22px;min-height:56px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:var(--serif);font-size:20px;font-weight:700;white-space:nowrap}
.brand .shield{color:var(--gold);display:inline-flex}
.brand b{color:var(--gold);font-weight:700}
.site-nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.site-nav a{color:#dbe5f1;text-decoration:none;font-size:14.5px;padding:7px 11px;border-radius:7px;white-space:nowrap}
.site-nav a:hover{background:rgba(255,255,255,.12);color:#fff}

/* breadcrumbs */
.crumbs{font-size:13px;color:var(--ink3);margin:2px 0 14px}
.crumbs a{color:var(--ink2);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* cards & grids */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;box-shadow:0 1px 3px rgba(29,39,51,.05)}
.grid{display:grid;gap:14px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid.c3,.grid.c4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}}
.subj-card{display:flex;gap:13px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;text-decoration:none;color:var(--ink);box-shadow:0 1px 3px rgba(29,39,51,.05)}
.subj-card:hover{border-color:var(--gold);box-shadow:0 2px 10px rgba(29,39,51,.09)}
.subj-card .ic{color:var(--navy);background:var(--gold-soft);border-radius:9px;padding:8px;display:inline-flex;flex:none}
.subj-card .t{font-weight:600;font-size:16px;line-height:1.35}
.subj-card .m{font-size:13px;color:var(--ink2);margin-top:2px}
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:99px;background:var(--gold-soft);color:var(--warn);vertical-align:2px}
.badge.navy{background:#e7edf5;color:var(--navy)}

/* tool shell */
.tool{background:var(--card);border:1px solid var(--line2);border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(29,39,51,.07)}
.tool-head{background:var(--navy);color:#fff;padding:16px 22px}
.tool-head .k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:700}
.tool-head .t{font-family:var(--serif);font-size:21px;margin-top:2px}
.tool-body{padding:20px 22px}
.comp{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:12px;background:#fff}
.comp .sec{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);font-weight:700}
.comp .lab{font-weight:600;margin:2px 0 8px}
.comp .meta{font-size:13px;color:var(--ink2)}
.comp-ctl{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
input[type=number],input[type=text],select{font-size:16px;padding:9px 11px;border:1px solid var(--line2);border-radius:8px;background:#fff;color:var(--ink);font-family:var(--sans)}
input[type=number]{width:110px}
input[type=range]{accent-color:var(--navy);flex:1;min-width:140px}
.pct-out{font-size:20px;font-weight:700;color:var(--navy);min-width:64px;text-align:right;font-variant-numeric:tabular-nums}
.result{background:var(--navy);color:#eaf1f8;border-radius:12px;padding:20px 22px;margin-top:16px}
.result .big{font-size:56px;font-weight:700;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.result .big small{font-size:20px;color:#b9c9dc;font-weight:600}
.result .cap{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:700}
.interp{display:flex;gap:12px;background:var(--gold-soft);border-left:4px solid var(--gold);border-radius:0 10px 10px 0;padding:13px 16px;margin-top:14px;font-size:15px}
.interp .ic{color:var(--warn);flex:none;margin-top:2px}
table{border-collapse:collapse;width:100%;margin:14px 0;font-size:15px}
th{background:#f1eee3;text-align:left;padding:9px 12px;font-size:13px;color:var(--navy);border-bottom:2px solid var(--line2)}
td{padding:8px 12px;border-bottom:1px solid var(--line)}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.btn{display:inline-block;background:var(--navy);color:#fff;border:none;border-radius:9px;padding:11px 20px;font-size:15.5px;font-weight:600;cursor:pointer;text-decoration:none;font-family:var(--sans)}
.btn:hover{background:var(--navy2);color:#fff}
.btn.gold{background:var(--gold);color:#231a00}
.btn.gold:hover{background:#d9b23a}
.btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--line2)}
.btn.sm{padding:7px 13px;font-size:14px}
.chip{display:inline-block;border:1px solid var(--line2);background:#fff;border-radius:99px;padding:5px 13px;font-size:13.5px;margin:0 6px 8px 0;cursor:pointer;color:var(--navy)}
.chip:hover,.chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.steps{counter-reset:st;list-style:none;padding:0;margin:12px 0}
.steps li{position:relative;padding:8px 0 8px 40px;border-bottom:1px dashed var(--line)}
.steps li:before{counter-increment:st;content:counter(st);position:absolute;left:0;top:8px;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.kv{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}
.kv .cell{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.kv .k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);font-weight:700}
.kv .v{font-size:17px;font-weight:700;color:var(--navy);margin-top:2px}
@media(max-width:760px){.kv{grid-template-columns:repeat(2,1fr)}}
.note{background:#fff;border:1px solid var(--line);border-left:4px solid var(--navy);border-radius:0 10px 10px 0;padding:12px 16px;font-size:14.5px;margin:14px 0}
.note.warn{border-left-color:var(--gold);background:var(--warn-soft)}
details.faq{background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 17px;margin-bottom:10px}
details.faq summary{font-weight:600;cursor:pointer;color:var(--navy)}
details.faq p{margin:8px 0 2px;color:var(--ink2)}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;padding:14px 0 6px}
.hero h1{font-size:42px}
.hero-art{max-width:100%;height:auto}
@media(max-width:820px){.hero{grid-template-columns:1fr}.hero h1{font-size:33px}.hero-art{display:none}}
.dual{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}
@media(max-width:760px){.dual{grid-template-columns:1fr}}
.dual .card .t{font-family:var(--serif);font-size:21px;color:var(--navy);font-weight:600}
.searchbar{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.searchbar input[type=text]{flex:1;min-width:220px}
.distbar{display:flex;height:26px;border-radius:6px;overflow:hidden;margin:8px 0 4px;border:1px solid var(--line2)}
.distbar div{display:flex;align-items:center;justify-content:center;color:#fff;font-size:12.5px;font-weight:700;min-width:0;overflow:hidden;white-space:nowrap}
.d5{background:#1d6a41}.d4{background:#4c9a6d}.d3{background:#c9a227}.d2{background:#d07f4a}.d1{background:#b03a2e}

/* footer */
footer{background:var(--navy);color:#c7d3e2;margin-top:0}
footer .wrap{padding-top:34px;padding-bottom:30px}
.fcols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:26px}
@media(max-width:820px){.fcols{grid-template-columns:1fr 1fr}}
footer h4{color:#fff;font-family:var(--serif);margin:0 0 10px;font-size:16px}
footer a{color:#c7d3e2;text-decoration:none;display:block;padding:3px 0;font-size:14.5px}
footer a:hover{color:#fff;text-decoration:underline}
.fine{border-top:1px solid rgba(255,255,255,.16);margin-top:26px;padding-top:16px;font-size:13px;color:#93a7bd}
.fine a{display:inline;padding:0}

/* embed */
body.embed{background:#fff}
body.embed main{padding:10px}
body.embed .tool{box-shadow:none}
.attrib{font-size:12px;color:var(--ink3);text-align:right;padding:6px 2px 0}
.attrib a{color:var(--ink3)}
pre.code{background:#0d2b4c;color:#dce8f5;border-radius:10px;padding:14px 16px;font-size:13px;overflow-x:auto;line-height:1.55}
.err{color:var(--bad);font-size:13.5px;font-weight:600}
.hidden{display:none!important}