#reaction-area { width:100%; min-height:280px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; font:inherit; color:#163b68; cursor:pointer; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:none; }
#reaction-area strong { font-size:clamp(24px,5vw,40px); }
#reaction-area span { max-width:42em; line-height:1.7; }
#reaction-area[data-state="waiting"],#reaction-area[data-state="early"],#reaction-area[data-state="failed"] { background:#fff4f4; border-color:#efb4b4; color:#a32929; }
#reaction-area[data-state="ready"] { background:#087f5b; border-color:#087f5b; color:#fff; }
#reaction-area:focus-visible { outline:3px solid #1769e0; outline-offset:3px; }
#reaction-results[hidden],#reaction-test [hidden] { display:none; }
.reaction-table { overflow-x:auto; }
.reaction-table table { width:100%; border-collapse:collapse; font:inherit; }
.reaction-table th,.reaction-table td { padding:12px 8px; text-align:start; border-bottom:1px solid #dce4ed; }
@media(max-height:600px) { #reaction-area { min-height:180px; } }

#reaction-results .reaction-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
.reaction-summary .network-self-card { padding:15px; }
.reaction-summary h3 { overflow-wrap:anywhere; }
.reaction-summary output { display:block; color:#095ac7; font-size:clamp(18px,3vw,28px); font-weight:750; overflow-wrap:anywhere; }
#reaction-personal-best { text-align:center; }
#reaction-personal-best output { display:block; color:#095ac7; font-size:clamp(40px,7vw,64px); font-weight:750; line-height:1.2; font-variant-numeric:tabular-nums; }
#reaction-personal-best p { margin:14px 0 0; color:#52657d; font-size:13px; line-height:1.7; }
@media(max-width:640px) {
  #reaction-results .reaction-summary { gap:8px; }
  .reaction-summary .network-self-card { padding:12px 8px; }
  .reaction-summary h3 { font-size:12px; }
}

#reaction-countdown { display:block; appearance:none; -webkit-appearance:none; width:min(80%,320px); height:10px; border:0; border-radius:9px; overflow:hidden; background:#dce4ed; color:#1769e0; }
#reaction-countdown::-webkit-progress-bar { background:#dce4ed; border-radius:9px; }
#reaction-countdown::-webkit-progress-value { background:#1769e0; border-radius:9px; }
#reaction-countdown::-moz-progress-bar { background:#1769e0; border-radius:9px; }

.reaction-chart { margin:20px 0 0; }
.reaction-chart figcaption { color:#52657d; font-size:13px; line-height:1.7; margin-bottom:12px; }
#reaction-chart { display:block; width:100%; max-width:640px; height:auto; margin-inline:auto; overflow:visible; font-family:inherit; }
.reaction-chart-grid { stroke:#dce4ed; stroke-width:1; vector-effect:non-scaling-stroke; }
.reaction-chart-axis { fill:#61738a; font-size:13px; }
.reaction-chart-line { fill:none; stroke:#1769e0; stroke-width:3; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.reaction-chart-point { fill:#1769e0; stroke:#fff; stroke-width:2; vector-effect:non-scaling-stroke; }
.reaction-chart-value { fill:#163b68; font-size:14px; font-weight:700; }

.reaction-history-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.reaction-history-heading h2 { margin:0; }
#reaction-clear-history { border-color:#d2dce8; background:#f7f9fc; color:#52657d; }
#reaction-clear-history:hover:enabled { border-color:#6c9ce0; background:#edf5ff; color:#1769e0; }
#reaction-clear-history:disabled { opacity:.45; cursor:default; }
#reaction-history-status { color:#52657d; font-size:13px; line-height:1.7; }
#reaction-history-status:empty { display:none; }

.reaction-status { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 14px; }
.reaction-status-badge { display:inline-flex; align-items:center; gap:10px; padding:7px 12px; border:1px solid #dce4ed; border-radius:9px; background:#f7f9fc; color:#61738a; font-size:12px; line-height:1.5; }
.reaction-status-badge strong { color:#163b68; font-size:14px; font-variant-numeric:tabular-nums; }
.reaction-status-badge.has-false-starts { border-color:#efb4b4; background:#fff4f4; color:#a32929; }
.reaction-status-badge.has-false-starts strong { color:#a32929; }
.reaction-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

#reaction-test .network-guide > section { min-width:0; overflow-wrap:anywhere; }