:root{--ink:#18233f;--muted:#65708b;--paper:#fffdf7;--blue:#2457d6;--line:#dfe4ee}*{box-sizing:border-box}html{background:#e9edf4}body{margin:0;color:var(--ink);background:radial-gradient(circle at 8% 8%,rgba(255,184,77,.18),transparent 20rem),radial-gradient(circle at 92% 18%,rgba(84,183,233,.16),transparent 22rem),#f4f6fa;font-family:Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}button{font:inherit}main{width:min(1120px,calc(100% - 32px));margin:auto;padding:56px 0 28px}.hero{display:flex;align-items:end;justify-content:space-between;gap:32px;padding:0 4px 34px}.eyebrow{margin:0 0 10px;color:var(--blue);font-size:12px;font-weight:900;letter-spacing:.19em}h1{margin:0;font-size:clamp(38px,6vw,68px);font-weight:900;letter-spacing:-.06em;line-height:1}.lead{margin:18px 0 0;color:var(--muted);font-size:clamp(15px,2vw,18px);font-weight:600}.counter{min-width:132px;padding:15px 18px;border:1px solid var(--line);border-radius:18px;background:#ffffffbd;box-shadow:0 8px 30px #18233f0f;text-align:center}.counter strong{display:block;color:var(--blue);font-size:34px;line-height:1}.counter span{display:block;margin-top:6px;color:var(--muted);font-size:12px;font-weight:800}.controls,.chart-section{border:1px solid var(--line);background:#ffffffe0;box-shadow:0 18px 60px #18233f14;padding:22px}.controls{border-radius:24px 24px 0 0}.chart-section{margin-top:-1px;border-radius:0 0 24px 24px}.section-heading,.section-heading>div{display:flex;align-items:center}.section-heading{justify-content:space-between;gap:16px}.section-heading>div{gap:10px}h2{margin:0;font-size:17px}.step{display:grid;width:28px;height:28px;place-items:center;border-radius:50%;color:#fff;background:var(--ink);font-size:13px;font-weight:900}.clear-button{border:0;color:var(--blue);background:transparent;font-size:13px;font-weight:800;cursor:pointer}.clear-button:disabled{opacity:.3;cursor:default}.filter-list{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px;margin-top:18px}.filter-button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:9px;border:1px solid var(--line);border-radius:13px;color:var(--ink);background:#fff;font-size:13px;font-weight:800;box-shadow:0 2px 0 #18233f0d;cursor:pointer;transition:.14s}.filter-button:hover{border-color:var(--filter-color);transform:translateY(-2px)}.filter-button[aria-pressed=true]{border-color:var(--filter-color);background:color-mix(in srgb,var(--filter-color) 18%,white);box-shadow:inset 0 0 0 1px var(--filter-color)}.color-dot{width:10px;height:10px;flex:none;border-radius:50%;background:var(--filter-color)}.check{display:grid;width:18px;height:18px;place-items:center;border-radius:50%;color:#fff;background:var(--filter-color);font-size:12px}.chart-heading{margin-bottom:18px}.chart-heading p{margin:0;color:var(--muted);font-size:12px;font-weight:600}.number-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));overflow:hidden;border:2px solid var(--ink);border-radius:15px;background:var(--ink);gap:1px}.number-cell{display:grid;min-height:70px;place-items:center;color:var(--ink);background-color:var(--paper);font-size:clamp(16px,2.4vw,24px);font-weight:900;font-variant-numeric:tabular-nums;transition:.14s}.number-cell.is-active{text-shadow:0 1px 0 #ffffff73}.number-cell:hover{position:relative;z-index:1;filter:brightness(1.04);transform:scale(1.06);box-shadow:0 5px 18px #18233f33}footer{display:flex;align-items:center;gap:18px;margin-top:22px;color:var(--muted)}footer span{font-weight:900}footer p{flex:1;margin:0;font-size:12px;font-weight:700;text-align:center}footer p:before,footer p:after{display:inline-block;width:12%;height:1px;margin:0 12px 3px;background:var(--line);content:""}
@media(max-width:850px){.filter-list{grid-template-columns:repeat(3,1fr)}.number-cell{min-height:56px}}@media(max-width:560px){main{width:min(100% - 20px,1120px);padding-top:28px}.hero{align-items:center}.lead{max-width:250px}.counter{min-width:88px;padding:12px 8px}.counter strong{font-size:27px}.controls,.chart-section{padding:14px}.filter-list{gap:6px}.filter-button{min-height:44px;padding:6px;font-size:12px}.chart-heading p{display:none}.number-grid{border-radius:10px}.number-cell{min-height:38px;font-size:14px}footer p:before,footer p:after{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}