.cps-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cps-live{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px;text-align:center}
.cps-live div{background:var(--surface-2);border-radius:var(--radius-sm);padding:10px 6px}
.cps-live b{display:block;font-size:clamp(22px,6vw,30px);font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}
.cps-live span{font-size:13px;color:var(--muted)}
.cps-bar{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin:12px 0}
.cps-bar i{display:block;height:100%;width:100%;background:var(--brand);transform-origin:left;transform:scaleX(1)}
.cps-area{position:relative;overflow:hidden;min-height:280px;border-radius:18px;background:linear-gradient(135deg,#4f46e5,#22c1c3);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;outline-offset:3px}
.cps-area:focus-visible{outline:3px solid var(--brand)}
.cps-area strong{font-size:clamp(26px,7vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.2;pointer-events:none}
.cps-area>span{font-size:15px;opacity:.92;pointer-events:none}
.cps-area[data-state=run]{background:linear-gradient(135deg,#0f9d63,#22c1c3)}
.cps-area[data-state=done]{background:linear-gradient(135deg,#7c3aed,#4f46e5)}
.cps-area[data-state=lock]{background:linear-gradient(135deg,#475569,#334155);cursor:default}
@media (min-width:760px){.cps-area{min-height:340px}}
.cps-ripple{position:absolute;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;background:rgba(255,255,255,.45);pointer-events:none;animation:cps-rip .45s ease-out forwards}
@keyframes cps-rip{from{transform:scale(.2);opacity:1}to{transform:scale(1.8);opacity:0}}
.cps-area.bump strong{animation:cps-bump .12s ease-out}
@keyframes cps-bump{50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.cps-ripple{display:none}.cps-area.bump strong{animation:none}}
.cps-unit{font-size:.45em;margin-left:6px;font-weight:700}
.cps-grade{display:inline-block;margin-top:8px;padding:4px 14px;border-radius:999px;background:var(--surface);font-weight:800;font-size:17px}
#cps-bests .stat.on{outline:2px solid var(--brand)}