.cxc{--cxc-a1:#38bdf8;--cxc-a2:#818cf8;--cxc-ink:#1e3a5f;--cxc-mut:#64748b;--cxc-line:#e2e8f0;position:relative;font-variant-numeric:tabular-nums;}
.cxc-ctl{display:grid;grid-template-columns:1fr auto;gap:12px 28px;align-items:end;margin-bottom:22px;}
.cxc-ctl label{display:block;font-size:14px;font-weight:600;color:var(--cxc-ink);}
.cxc-ctl output{float:right;font-weight:700;color:#2563eb;}
.cxc-range{width:100%;margin:12px 0 0;accent-color:var(--cxc-a1);height:24px;}
.cxc-rate{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--cxc-mut);}
.cxc-rate input{width:72px;font:inherit;font-size:14px;padding:6px 8px;border:1px solid var(--cxc-line);border-radius:8px;color:var(--cxc-ink);text-align:right;}
.cxc-out{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px;}
.cxc-kpi{padding:14px 16px;border:1px solid var(--cxc-line);border-radius:12px;background:#fff;}
.cxc-kpi b{display:block;font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--cxc-ink);white-space:nowrap;}
.cxc-kpi.is-main b{background:linear-gradient(135deg,var(--cxc-a1),var(--cxc-a2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.cxc-kpi span{display:block;margin-top:2px;font-size:13px;color:var(--cxc-mut);}
.cxc-grid{display:grid;grid-template-columns:repeat(20,1fr);gap:5px;}
.cxc-cell{aspect-ratio:1;border-radius:4px;background:#e9eef4;position:relative;overflow:hidden;}
.cxc-cell::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--cxc-a1),var(--cxc-a2));opacity:0;transform:scale(.4);
  transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1);transition-delay:var(--k,0ms);}
.cxc-cell.on::before{opacity:1;transform:none;}
.cxc-legend{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:10px 0 0;font-size:12.5px;color:var(--cxc-mut);}
.cxc-note{margin:12px 0 0;font-size:12px;color:#94a3b8;}
@media (max-width:640px){
  .cxc-ctl{grid-template-columns:1fr;}
  .cxc-out{grid-template-columns:1fr 1fr;}
  .cxc-kpi.is-val{grid-column:span 2;}
  .cxc-kpi b{font-size:24px;}
  .cxc-grid{grid-template-columns:repeat(12,1fr);gap:4px;}
}
@media (prefers-reduced-motion:reduce){.cxc-cell::before{transition:none;}}

.cxc-note{color:#64748b}.cxc-grid{max-width:100%}.cxc-kpi{min-width:0}.cxc-range:focus-visible,.cxc-rate input:focus-visible{outline:3px solid #2563eb;outline-offset:3px}