[data-reaction] .rt-top { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
[data-reaction] .rt-lens { display: inline-flex; align-items: center; gap: 8px; }
[data-reaction] .rt-lens-l { font-size: 14px; font-weight: 500; color: var(--body); }
[data-reaction] .rt-area { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: clamp(260px, 50vh, 480px); border: 0; border-radius: 16px; background: var(--canvas); color: var(--ink); cursor: pointer;
  padding: 16px; font: inherit; text-align: center; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
[data-reaction] .rt-area.rt-wait { background: var(--ink); color: var(--on-ink); }
[data-reaction] .rt-area.rt-go { background: var(--signal); color: #fff; }
[data-reaction] .rt-area.rt-red { background: #c41400; color: #fff; }
[data-reaction] .rt-area.rt-wait .rt-sub, [data-reaction] .rt-area.rt-go .rt-sub, [data-reaction] .rt-area.rt-red .rt-sub { color: inherit; }
[data-reaction] .rt-big { font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; font-size: clamp(34px, 8vw, 64px); }
[data-reaction] .rt-big.rt-num { font-variant-numeric: tabular-nums; font-size: clamp(64px, 18vw, 150px); letter-spacing: -0.045em; }
[data-reaction] .rt-sub { font-size: 18px; font-weight: 600; color: var(--body); max-width: 520px; }
[data-reaction] .rt-note { margin: 0; font-size: 14px; }
[data-reaction] .rt-attempts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
[data-reaction] .rt-chip { background: var(--canvas); border-radius: 10px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; min-width: 0; }
[data-reaction] .rt-chip b { font-variant-numeric: tabular-nums; font-size: 18px; }
[data-reaction] .rt-chip.is-empty b { color: var(--mute); font-weight: 500; }
[data-reaction] .rt-chip.is-best { box-shadow: inset 0 0 0 2px var(--signal); }
[data-reaction] .rt-ck { font-size: 12px; color: var(--body); }
[data-reaction] .rt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
[data-reaction] .rt-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-reaction] .rt-sv { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 24px; line-height: 1.1; }
[data-reaction] .rt-sl { font-size: 13px; color: var(--body); }
[data-reaction] .rt-summary .big { font-size: clamp(48px, 12vw, 84px); }
[data-reaction] .rt-sum-unit { font-size: 20px; font-weight: 700; color: var(--body); }
[data-reaction] .rt-summary p, [data-reaction] .rt-bests p { margin: 8px 0 0; }
[data-reaction] .rt-bests-h { font-weight: 700; margin: 0 !important; }
[data-reaction] .rt-best-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
[data-reaction] .rt-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; font: inherit; }
[data-reaction] button.rt-best { cursor: pointer; }
[data-reaction] .rt-best b { font-variant-numeric: tabular-nums; }
[data-reaction] button.rt-best.is-cur { background: var(--ink); color: var(--on-ink); }
body.is-focus [data-reaction] .rt-area { flex: 1; min-height: 50vh; }
body.is-focus [data-reaction] .rt-bests { display: none; }
@media (max-width: 420px) { [data-reaction] .rt-sv { font-size: 20px; } [data-reaction] .rt-top .seg button { padding: 8px 11px; } }
/* start lights mode (start-lights-reaction-test): a dark gantry in both themes */
[data-reaction].rt-is-lights .rt-area, [data-reaction].rt-is-lights .rt-area.rt-wait, [data-reaction].rt-is-lights .rt-area.rt-go {
  background: #16181b; color: #f4f4f4; gap: 18px; box-shadow: inset 0 0 0 1px #2c3036; }
[data-reaction].rt-is-lights .rt-area .rt-sub { color: #c9cdd2; }
[data-reaction] .rt-gantry { display: flex; justify-content: center; gap: clamp(6px, 2vw, 16px); width: 100%; max-width: 640px;
  padding: clamp(10px, 2.4vw, 18px); background: #0b0c0e; border-radius: 14px; box-shadow: inset 0 0 0 1px #24272c; }
[data-reaction] .rt-pod { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.6vw, 12px); flex: 1 1 0; min-width: 0;
  max-width: 104px; padding: clamp(6px, 1.6vw, 12px) 0; background: #1d2024; border-radius: 12px; }
[data-reaction] .rt-lamp { display: block; width: 84%; max-width: 84px; aspect-ratio: 1; border-radius: 50%; background: #3a3d42;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .55); }
[data-reaction] .rt-pod.is-on .rt-lamp { background: #e10600;
  box-shadow: 0 0 18px 4px rgba(225, 6, 0, .55), inset 0 -3px 6px rgba(0, 0, 0, .3); }
[data-reaction].rt-is-lights .rt-big.rt-num { font-size: clamp(56px, 15vw, 120px); }
[data-reaction].rt-is-lights .rt-big { font-size: clamp(30px, 7vw, 56px); }
body.is-focus [data-reaction] .rt-gantry { max-width: min(900px, 100%); }
body.is-focus [data-reaction] .rt-pod { max-width: 150px; }
body.is-focus [data-reaction] .rt-lamp { max-width: 120px; }