:root {
  --bg: #f5f5f3; --surface: #fff; --ink: #0b0b0b; --muted: #52514e; --line: #e5e4df; --chip: #f0efeb;
  --blue: #2a78d6; --orange: #eb6834; --aqua: #1baf7a;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--sans); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.top { background: var(--surface); border-bottom: 1px solid var(--line); padding: 28px 0 22px; margin-bottom: 20px; }
h1 { font-size: 28px; margin: 0 0 6px; letter-spacing: -0.01em; }
h2 { font-size: 18px; margin: 0 0 12px; }
h3 { font-size: 14px; margin: 18px 0 8px; color: var(--muted); font-weight: 600; }
.lede { margin: 0; color: var(--muted); max-width: 720px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; margin-bottom: 16px; min-width: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid2 .panel { margin-bottom: 0; }
.grid2 + .panel, .grid2 + .grid2 { margin-top: 16px; }
.inputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
input, select { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-height: 40px; width: 100%; }
input:focus, select:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--chip); border-radius: 10px; padding: 12px 14px; display: grid; gap: 2px; min-width: 0; }
.kpi span, .kpi small { font-size: 12px; color: var(--muted); }
.kpi b { font-size: 22px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.chart { position: relative; height: 280px; }
.small-chart { height: 220px; }
.result { background: var(--chip); border-radius: 10px; padding: 12px 14px; margin: 0; }
.result b { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.scroll { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.tbl th, .tbl td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.tbl th:first-child, .tbl td:first-child { text-align: left; white-space: normal; }
.tbl th { font-size: 12px; color: var(--muted); font-weight: 500; }
.tbl tr.best td { font-weight: 600; }
details { margin-top: 10px; }
summary { cursor: pointer; color: var(--blue); font-size: 14px; }
a { color: var(--blue); }
.foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 13px; padding-bottom: 32px; }
@media (max-width: 860px) {
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  h1 { font-size: 23px; }
  .panel { padding: 14px; }
  .kpi b { font-size: 18px; }
  .inputs { grid-template-columns: minmax(0, 1fr); }
}


:root{--bg:#f0eee9;--surface:#faf9f5;--ink:#25313b;--muted:#667079;--line:#dcdedb;--chip:#e9edf0;--blue:#345e80;--orange:#b99058;--aqua:#418172;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:light}
html{scroll-behavior:smooth;scroll-padding-top:24px}body{-webkit-font-smoothing:antialiased}.wrap{max-width:1320px;padding-left:40px;padding-right:40px}.masthead{height:80px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.masthead a{text-decoration:none;color:var(--ink)}.brand{font-size:21px;letter-spacing:-.03em}.masthead>div{display:flex;gap:26px;font-size:13px}.top{background:transparent;border:0;padding:46px 0 38px;margin:0}.label,.section-label{font:11px ui-monospace,monospace;color:var(--blue);letter-spacing:.09em;display:block;margin-bottom:16px}h1{font-size:clamp(34px,4.4vw,60px);letter-spacing:-.055em;font-weight:600;line-height:1.08;margin-bottom:20px}h1 em{font-style:normal;color:#7b858b}.lede{font-size:15px;line-height:1.7;max-width:550px}.panel{padding:28px;border-radius:16px;margin-bottom:24px}.section-intro{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:26px}.section-intro h2{margin:0;font-size:30px;letter-spacing:-.04em;font-weight:600}.section-intro p{font-size:12px;color:var(--muted);line-height:1.7;margin:0}.section-label{margin-bottom:10px}.inputs{gap:18px;margin-bottom:24px}label{font-size:12px;gap:8px}input,select{background:var(--surface);min-height:48px;font-size:16px;border-radius:8px;padding:10px 14px;transition:border-color 150ms}.kpis{gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:8px 0 30px}.kpi{background:transparent;border-radius:0;padding:22px 18px;border-right:1px solid var(--line);gap:8px}.kpi:last-child{border-right:0}.kpi b{font-size:28px;letter-spacing:-.035em;font-weight:550}.kpi:first-child{background:var(--blue);border-radius:10px;margin:10px 0;padding:16px 18px;border:0}.kpi:first-child span,.kpi:first-child b{color:white}.kpi:first-child b{font-size:34px}.kpi span{font-size:12px}.kpi small{font-size:11px}h2{font-size:23px;letter-spacing:-.03em;font-weight:600}h3{font-size:14px;font-weight:500}.chart{height:300px;min-width:0;max-width:100%}.chart canvas{max-width:100%}.grid2{gap:24px}.grid2+.panel,.grid2+.grid2{margin-top:24px}.result{background:#e8edf1;border-radius:10px;padding:18px;line-height:1.8;font-size:14px}.result b{color:var(--blue)}summary{padding:14px 0;font-size:13px}.tbl td,.tbl th{padding:12px 10px;font-size:12px}.foot{border-top:1px solid var(--line);padding-top:24px;font-size:12px}.chip{background:transparent;border:1px solid var(--line);border-radius:8px;padding:9px 16px;color:var(--muted);cursor:pointer}.chip[aria-pressed=true]{background:var(--blue);color:white;border-color:var(--blue)}a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
@media(max-width:860px){.kpi:nth-child(2){border-right:0}.kpi:nth-child(-n+2){border-bottom:1px solid var(--line)}.section-intro{align-items:start;flex-direction:column;gap:12px}}
@media(max-width:560px){.wrap{padding-left:20px;padding-right:20px}.masthead{height:68px}.brand{font-size:18px}.masthead>div a:not(:last-child){display:none}.top{padding:30px 0}h1{font-size:36px}.panel{padding:18px;border-radius:12px}.section-intro h2{font-size:26px}.inputs{grid-template-columns:minmax(0,1fr);gap:16px}.kpi{padding:18px 12px}.kpi b{font-size:23px}.kpi:first-child{padding:16px 12px}.kpi:first-child b{font-size:27px}.chart{height:240px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}