:root{
  --bg:#eef1f6; --card:#ffffff; --ink:#0f172a; --ink2:#334155; --muted:#64748b;
  --line:#e6eaf1; --accent:#0e9f6e; --accent-soft:#e7f7f0; --dark:#0d1b2a;
  --sans:"IBM Plex Sans","Noto Sans SC",system-ui,sans-serif;
  --mono:"IBM Plex Mono","Noto Sans SC",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
.wrap{max-width:1360px;margin:0 auto;padding:28px 28px 80px}

.top{display:flex;align-items:center;gap:14px;margin-bottom:34px}
.logo{width:34px;height:34px;border-radius:11px;background:var(--dark);display:grid;place-items:center;color:#5eead4;font-family:var(--mono);font-size:12px;font-weight:500}
.top .name{font-weight:600;letter-spacing:-.01em}
.navpills{display:flex;gap:6px;margin-left:14px}
.navpills a{padding:7px 14px;border-radius:999px;font-size:13px;color:var(--ink2)}
.navpills a[aria-current]{background:#fff;color:var(--ink);font-weight:500;box-shadow:0 1px 2px rgba(15,23,42,.06)}
.range{margin-left:auto;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:12.5px;color:var(--ink2)}
.range b{color:var(--ink);font-weight:500}

.masthead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}
.masthead h1{margin:0;font-size:42px;line-height:1;letter-spacing:-.03em;font-weight:600}
.masthead p{margin:10px 0 0;color:var(--muted);max-width:64ch;font-size:13.5px}
.badge{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:6px 12px;white-space:nowrap}

.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.cell{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 22px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 28px -20px rgba(15,23,42,.28);transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s ease}
.cell:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(15,23,42,.05),0 22px 40px -24px rgba(15,23,42,.4)}
@media (prefers-reduced-motion:reduce){.cell{transition:none}.cell:hover{transform:none}}
.s6{grid-column:span 6}.s3{grid-column:span 3}.s2{grid-column:span 2}
.s8{grid-column:span 8}.s4{grid-column:span 4}.s12{grid-column:span 12}.s7{grid-column:span 7}.s5{grid-column:span 5}

.k-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:7px}
.k-label .d{width:6px;height:6px;border-radius:50%;background:var(--line)}
.k-label .k-info{position:relative;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border:1px solid currentColor;border-radius:50%;opacity:.65;cursor:help;font-family:var(--sans);font-size:9.5px;font-style:normal;font-weight:600;letter-spacing:0;text-transform:none;line-height:1}
.k-label .k-info:hover{opacity:1}
.k-label .k-info .k-tip{position:absolute;top:calc(100% + 8px);left:0;width:max-content;max-width:min(240px,72vw);background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-family:var(--sans);font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink2);line-height:1.5;box-shadow:0 10px 24px -12px rgba(15,23,42,.28);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility .15s ease;z-index:30}
.k-label .k-info:hover .k-tip{opacity:1;visibility:visible}
.cell.dark .k-label .k-info .k-tip{background:#10233a;border-color:#2a4a6d;color:#d6e3f0}
.k-value{margin:12px 0 0;font-size:34px;font-weight:600;letter-spacing:-.035em;line-height:1}
.k-spark{height:34px;margin-top:12px}
.k-foot{margin:8px 0 0;font-size:11.5px;color:var(--muted)}
.cell.accent{background:var(--accent-soft);border-color:#cdeee0}
.cell.accent .k-value{color:#0a7a55}
.cell.accent .k-spark{filter:saturate(1.05)}

.cell.dark{background:var(--dark);border-color:#152a3f;color:#e8eef5;display:flex;flex-direction:column}
.cell.dark .k-label{color:#8fa6bd}
.cell.dark .k-value{font-size:40px;color:#fff}
.cell.dark .k-foot{color:#8fa6bd}
.cell.dark .k-spark{height:52px;margin-top:auto}
.cell.dark .chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;color:#5eead4;background:rgba(94,234,212,.12);border:1px solid rgba(94,234,212,.22);border-radius:999px;padding:4px 10px;width:max-content}

.cell.chart{padding:18px 20px 10px}
.cell.chart.fill{display:flex;flex-direction:column}
.cell.chart.fill .chart-el{flex:1 1 0;min-height:520px}
.chart-note{margin:14px 0 8px;padding:12px 15px;border-radius:12px;background:#f8fafc;border:1px solid var(--line);font-size:12.5px;line-height:1.7;color:var(--ink2)}
.chart-note b{color:var(--ink);font-weight:600}
.chart-note .ac{color:var(--accent);font-weight:600}
.chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.chart-head h3{margin:0;font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.chart-head span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.chart-el{width:100%}
.sect-label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:34px 0 14px;display:flex;align-items:center;gap:12px}
.sect-label::after{content:"";flex:1;height:1px;background:var(--line)}

.notice{margin-top:30px;background:var(--accent-soft);border:1px solid #cdeee0;border-radius:14px;padding:14px 18px;font-size:12.5px;color:#0a7a55;line-height:1.7}
.notice b{font-family:var(--mono);font-weight:500}

.advice{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:18px;padding:20px 24px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.advice ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.advice li{font-size:13px;color:var(--ink2);line-height:1.6;padding-left:16px;position:relative}
.advice li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.advice li b{color:var(--ink);font-weight:600}
@media (max-width:900px){.advice ul{grid-template-columns:1fr}}

footer{margin-top:56px;color:var(--muted);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (max-width:1100px){.s6{grid-column:span 12}.s3{grid-column:span 6}.s2{grid-column:span 4}.s8,.s4,.s7,.s5{grid-column:span 12}}
@media (max-width:760px){
  .wrap{padding:20px 16px 56px}.top{flex-wrap:wrap}.navpills{order:3;margin:0}.range{margin-left:auto}
  .s3,.s2{grid-column:span 12}.masthead{flex-direction:column;align-items:flex-start}.masthead h1{font-size:34px}
  .cell.dark .k-value{font-size:38px}
}