[data-cps] .cps-modes { align-self: flex-start; }
[data-cps] .cps-area { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: clamp(240px, 46vh, 440px); border: 0; border-radius: 16px; background: var(--canvas); color: var(--ink); cursor: pointer;
  padding: 16px; font: inherit; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
[data-cps] .cps-area:active { background: var(--pressed); }
[data-cps] .cps-area.is-cool { cursor: default; opacity: .7; }
[data-cps] .cps-count { font-size: clamp(96px, 26vw, 220px); }
[data-cps] .cps-hint { font-size: 18px; font-weight: 600; color: var(--body); text-align: center; }
[data-cps] .cps-mouse { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
[data-cps] .cps-mouse[hidden] { display: none; }
[data-cps] .cps-mb, [data-cps] .cps-stat { background: var(--canvas); border-radius: 12px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
[data-cps] .cps-mv, [data-cps] .cps-sv { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 28px; line-height: 1.1; }
[data-cps] .cps-ml, [data-cps] .cps-sl { font-size: 13px; color: var(--body); }
[data-cps] .cps-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
[data-cps] .cps-result .big { font-size: clamp(56px, 14vw, 96px); }
[data-cps] .cps-res-unit { font-size: 20px; font-weight: 700; color: var(--body); }
[data-cps] .cps-result p, [data-cps] .cps-bests p { margin: 8px 0 0; }
[data-cps] .cps-bests-h { font-weight: 700; margin: 0 !important; }
[data-cps] .cps-best-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
[data-cps] .cps-best { border: 0; background: var(--soft); color: var(--ink); border-radius: var(--pill); min-height: 44px; padding: 6px 14px; display: inline-flex; gap: 8px; align-items: center; cursor: pointer; font: inherit; }
[data-cps] .cps-best b { font-variant-numeric: tabular-nums; }
[data-cps] .cps-best.is-cur { background: var(--ink); color: var(--on-ink); }
body.is-focus [data-cps] .cps-area { flex: 1; min-height: 50vh; }
body.is-focus [data-cps] .cps-bests { display: none; }
@media (max-width: 420px) { [data-cps] .cps-mv, [data-cps] .cps-sv { font-size: 22px; } }