:root{
  --bg:#f5f5f2;--surface:#fff;--text:#171715;--muted:#6d6d67;--line:#deded9;--grid:#ecece8;
  --strong:#22221f;--accent:#9d4d3d;--soft:#f0f0ec;--radius:14px
}
*{box-sizing:border-box} html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
body{margin:0;min-width:320px}.shell{width:min(1020px,calc(100% - 32px));margin:auto;padding:42px 0 80px}
h1,h2,p{margin-top:0}.eyebrow{font-size:12px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
h1{font-size:clamp(32px,6vw,48px);line-height:1;letter-spacing:-.045em;margin-bottom:9px}.lede{color:var(--muted);margin:0;max-width:700px}
.rate-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:28px}
.rate-card,.small-card{background:var(--surface);padding:20px;min-width:0}.label{display:block;color:var(--muted);font-size:12px;font-weight:700;margin-bottom:9px}
.rate-card strong,.small-card strong{display:block;font-size:clamp(22px,3vw,30px);letter-spacing:-.035em;line-height:1.05}
.rate{display:block;margin-top:7px;font-size:14px;font-weight:700}.change,.fine{display:block;margin-top:5px;color:var(--muted);font-size:12px;line-height:1.35}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:18px}
.panel-head{display:flex;justify-content:space-between;align-items:end;gap:24px;padding:20px 22px 0}.panel-head h2{font-size:18px;margin-bottom:6px}
.panel-head p{font-size:13px;color:var(--muted);margin-bottom:0;max-width:700px;line-height:1.45}
.range-switch{display:inline-flex;gap:4px;padding:3px;border:1px solid var(--line);border-radius:9px;background:var(--bg);flex:none}
.range{border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:700;padding:7px 10px;border-radius:6px;cursor:pointer}
.range.active{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgb(0 0 0/.08)}
.legend{display:flex;gap:14px;color:var(--muted);font-size:12px;white-space:nowrap}.legend span{display:flex;align-items:center;gap:6px}
.swatch{width:19px;height:0;border-top:2px solid var(--strong);display:inline-block}.swatch.dashed{border-top-style:dashed}
.chart-scroll{overflow-x:auto;padding:8px 10px 4px}.chart{display:block;width:100%;min-width:740px;height:350px}
.grid{stroke:var(--grid);stroke-width:1}.axis{stroke:var(--line);stroke-width:1}.tick{fill:var(--muted);font-size:11px}.axis-title{fill:var(--muted);font-size:12px;font-weight:700}
.payment-bar{fill:var(--strong)}.overflow-bar,.overflow-marker{fill:var(--accent)}.overflow-label{fill:var(--accent);font-size:10px;font-weight:800}
.gap-guide{stroke:var(--line);stroke-width:1}.gap-label{fill:var(--muted);font-size:10px;font-weight:700}
.interval-line{fill:none;stroke:var(--strong);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.interval-step{stroke:var(--strong);stroke-width:2.4}.interval-point{fill:var(--strong)}.average-line{stroke:var(--muted);stroke-width:2;stroke-dasharray:6 5}.average-label{fill:var(--muted);font-size:10px;font-weight:700}
.chart-note{min-height:16px;padding:0 22px 18px;margin:0;color:var(--muted);font-size:12px;line-height:1.4}
.table-scroll{overflow-x:auto;padding-top:14px}table{border-collapse:collapse;width:100%;min-width:720px}
th,td{padding:14px 22px;border-top:1px solid var(--line);text-align:left;white-space:nowrap}th{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}td{font-size:14px}.num{text-align:right}.amount{font-weight:750}.muted{color:var(--muted)}
footer{color:var(--muted);font-size:12px;padding:22px 2px 0}code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
@media(max-width:800px){.rate-grid{grid-template-columns:repeat(2,1fr)}.panel-head{align-items:start;flex-direction:column;gap:12px}.legend{white-space:normal}}
@media(max-width:470px){.shell{width:min(100% - 20px,1020px);padding-top:24px}.rate-grid{grid-template-columns:1fr}}
@media(prefers-color-scheme:dark){:root{--bg:#111210;--surface:#191a18;--text:#f1f1ec;--muted:#9b9c95;--line:#30312e;--grid:#282926;--strong:#f0f0eb;--accent:#df806d;--soft:#20211e}.range.active{box-shadow:none}}