@font-face{font-family:'Lexend';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/lexend-400.woff2) format('woff2');}
@font-face{font-family:'Lexend';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/lexend-600.woff2) format('woff2');}

/* KPK brand deck palette (KPK Vaults, Spring 2026) + design-system tokens
   github.com/karpatkey/design-system -> src/design-system/styles/tokens.css */
:root{
  --ground:#E8E7E5; --card:#F3F3F3; --ink:#1D1D1D; --body:#37352F;
  --muted:#706E66; --hair:#DEDDD8; --sage:#C9DFC0;
  --good:#2D8561; --good-bg:#DDEFE4;
  --warn:#8E6710; --warn-bg:#F6EBD3;
  --bad:#A5122B;  --bad-bg:#F7DDE1;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{background:var(--ground);color:var(--body);
  font-family:'Lexend',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:14px;line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased;}
.wrap{max-width:1080px;margin:0 auto;padding:26px 22px 40px;}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}

/* ---------- masthead ---------- */
.mast{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid var(--hair);}
.mast h1{font-size:26px;font-weight:400;letter-spacing:-.03em;line-height:1.15;color:var(--ink);}
.mast h1 .lt{color:var(--muted);}
.mast .sub{margin-top:5px;font-size:13px;color:var(--muted);}
.marks{display:flex;align-items:center;gap:9px;}
.marks img.d{height:21px;border-radius:5px;display:block;}
.marks img.k{height:17px;display:block;}
.marks .bar{width:1px;height:17px;background:var(--hair);}
.marks .wm{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
.mast .right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
.stamp{font-size:11.5px;color:var(--muted);text-align:right;}
.stamp b{color:var(--ink);font-weight:600;}
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:var(--ground);
  border:0;border-radius:20px;padding:7px 15px;font-family:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;text-decoration:none;transition:opacity .15s;}
.btn:hover{opacity:.85;}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--hair);}
.btn[disabled]{opacity:.5;cursor:default;}

/* ---------- sections ---------- */
section{margin-top:26px;}
.eyebrow{font-size:12px;color:var(--muted);}
h2{font-size:19px;font-weight:400;letter-spacing:-.025em;color:var(--ink);margin:2px 0 12px;line-height:1.2;}
h3{font-size:15px;font-weight:400;letter-spacing:-.02em;color:var(--ink);}
p.lead{font-size:12.5px;line-height:1.62;color:var(--body);max-width:860px;margin:-4px 0 12px;}
p.lead b{color:var(--ink);font-weight:600;}
p.note{font-size:12.5px;line-height:1.6;color:var(--body);}
p.fine{font-size:11.5px;line-height:1.65;color:var(--muted);margin-top:8px;}
p.fine b,p.note b{color:var(--ink);font-weight:600;}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
.card{background:var(--card);border-radius:13px;padding:13px 15px 14px;}
.card .t{font-size:11.5px;color:var(--muted);line-height:1.35;}
.card .v{font-size:24px;font-weight:400;color:var(--ink);line-height:1.1;margin-top:5px;}
.card .v.sm{font-size:17px;}
.card .v .u{font-size:13px;color:var(--muted);margin-left:3px;}
.card .foot{font-size:11px;color:var(--muted);margin-top:4px;}

.method{background:var(--card);border-radius:13px;padding:14px 16px;font-size:12.5px;line-height:1.6;}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.pill{display:inline-block;border-radius:20px;padding:2px 9px;font-size:11px;font-weight:600;white-space:nowrap;}
.p-good{background:var(--good-bg);color:var(--good);}
.p-warn{background:var(--warn-bg);color:var(--warn);}
.p-bad{background:var(--bad-bg);color:var(--bad);}

/* ---------- option cards ---------- */
.opt{background:var(--card);border-radius:14px;padding:15px 17px 16px;margin-top:11px;}
.opt-h{display:flex;align-items:center;gap:10px;padding-bottom:11px;margin-bottom:13px;
  border-bottom:1px solid var(--hair);flex-wrap:wrap;}
.idx{width:22px;height:22px;border-radius:7px;background:var(--ink);color:var(--card);
  font-size:12px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.opt-b{display:grid;grid-template-columns:minmax(210px,.85fr) minmax(280px,1.15fr);gap:20px;}
.pane-l{border-right:1px solid var(--hair);padding-right:20px;}
.lab{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  font-weight:600;margin-bottom:9px;}
.move{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.move .from{font-size:16px;color:var(--muted);}
.move .to{font-size:31px;font-weight:400;color:var(--ink);line-height:1;}
.delta{margin-top:5px;font-size:12.5px;color:var(--muted);}
dl.kv{margin-top:12px;border-top:1px solid var(--hair);}
dl.kv>div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hair);}
dl.kv>div:last-child{border-bottom:none;}
dl.kv dt{font-size:11.5px;color:var(--muted);}
dl.kv dd{font-size:12.5px;color:var(--ink);}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:12.5px;}
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600;
  padding:0 8px 6px;border-bottom:1px solid var(--hair);white-space:nowrap;text-align:left;}
td{padding:5.5px 8px;border-bottom:1px solid var(--hair);color:var(--body);}
tbody tr:last-child td{border-bottom:none;}
th.n,td.n{text-align:right;}
td.k{color:var(--ink);font-weight:600;}
.scroll{overflow-x:auto;}

/* ---------- simulator ---------- */
.sim{background:var(--card);border-radius:14px;padding:16px 18px 18px;}
.sim-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px 22px;}
.field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);font-weight:600;margin-bottom:6px;}
.field .val{color:var(--ink);font-weight:600;text-transform:none;letter-spacing:0;font-size:13px;}
input[type=range]{width:100%;accent-color:var(--ink);}
input[type=number]{width:100%;background:#fff;border:1px solid var(--hair);border-radius:8px;
  padding:7px 10px;font-family:var(--mono);font-size:13px;color:var(--ink);}
input[type=number]:focus{outline:2px solid var(--ink);outline-offset:-1px;}
.seg{display:flex;gap:5px;flex-wrap:wrap;}
.seg button{background:#fff;border:1px solid var(--hair);border-radius:20px;padding:4px 11px;
  font-family:inherit;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--card);border-color:var(--ink);}
.out{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:18px;}
.out .o{background:#fff;border-radius:11px;padding:11px 13px;}
.out .o .t{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.out .o .v{font-size:19px;white-space:nowrap;font-weight:400;color:var(--ink);margin-top:4px;line-height:1.1;}
.out .o.hl{background:var(--ink);} .out .o.hl .t{color:var(--hair);} .out .o.hl .v{color:var(--ground);}
.flag{margin-top:12px;font-size:12px;font-weight:600;}

/* ---------- chart ---------- */
.chartbox{background:var(--card);border-radius:14px;padding:15px 17px 10px;}
svg.chart{width:100%;height:auto;display:block;}
svg.chart text{font-family:'Lexend',sans-serif;font-size:9px;fill:var(--muted);}
svg.chart .grid{stroke:var(--hair);stroke-width:1;}
svg.chart .line{fill:none;stroke:var(--ink);stroke-width:2;}
svg.chart .area{fill:var(--sage);opacity:.35;}
svg.chart .mark{stroke:var(--bad);stroke-width:1;stroke-dasharray:3 3;}

/* ---------- footer ---------- */
footer{margin-top:30px;padding-top:14px;border-top:1px solid var(--hair);
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;}
footer .left{display:flex;align-items:center;gap:9px;}
footer img{height:15px;display:block;}
footer .wm{font-size:12.5px;font-weight:600;color:var(--ink);}
.src{background:rgba(29,29,29,.06);border-radius:20px;padding:3px 10px;font-size:11px;color:var(--muted);}

.baseline{font-size:10.5px;color:var(--muted);text-decoration:underline;text-underline-offset:2px;}
.baseline:hover{color:var(--ink);}
#refreshMsg:empty{display:none;}
#refreshMsg{max-width:260px;color:var(--bad);}
.err{background:var(--bad-bg);color:var(--bad);border-radius:11px;padding:12px 14px;font-size:12.5px;}

@media (max-width:720px){
  .opt-b{grid-template-columns:1fr;}
  .pane-l{border-right:0;border-bottom:1px solid var(--hair);padding-right:0;padding-bottom:14px;}
  .mast h1{font-size:22px;}
}
@media print{
  body{background:#fff;} .wrap{max-width:100%;padding:0;}
  .btn,.sim,.chartbox{display:none;}
  @page{size:A4 portrait;margin:12mm;}
}