.reaction-test-screen {
  min-height: 100svh;
  height: 100svh;
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 8%, rgba(148, 185, 180, 0.12), rgba(148, 185, 180, 0) 24%),
    radial-gradient(circle at 78% 86%, rgba(143, 83, 48, 0.16), rgba(143, 83, 48, 0) 30%),
    linear-gradient(180deg, #090d0f 0%, #040607 54%, #020303 100%);
}

.reaction-test-stage {
  position: relative;
  width: min(1480px, 100%);
  height: min(820px, calc(100svh - 36px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}

.reaction-test-haze {
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(24px);
  opacity: 0.8;
}

.reaction-test-haze-a {
  top: -90px;
  left: 12%;
  width: 380px;
  height: 210px;
  background: radial-gradient(circle, rgba(157, 186, 184, 0.13), rgba(157, 186, 184, 0) 70%);
}

.reaction-test-haze-b {
  right: 5%;
  bottom: 3%;
  width: 420px;
  height: 250px;
  background: radial-gradient(circle, rgba(180, 116, 65, 0.12), rgba(180, 116, 65, 0) 72%);
}

.reaction-test-header {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  min-height: 36px;
}

.reaction-test-return-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(127, 145, 151, 0.42);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(30, 38, 41, 0.94), rgba(8, 11, 12, 0.96));
  color: rgba(229, 237, 230, 0.86);
  font: 600 0.72rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.24);
}

.reaction-test-return-button:hover,
.reaction-test-return-button:focus-visible {
  border-color: rgba(181, 206, 201, 0.64);
  color: #f3fff8;
  outline: none;
}

.reaction-test-return-button span {
  font-size: 1rem;
  line-height: 0.8;
}

.reaction-test-status {
  margin: 0;
  color: rgba(180, 196, 193, 0.58);
  font: 600 0.7rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: right;
}

.reaction-test-device-wrap {
  position: relative;
  z-index: 1;
  min-height: 0;
  display: grid;
  place-items: center;
}

.reaction-test-device {
  width: min(100%, calc((100svh - 92px) * 1.7045));
  max-height: 100%;
  aspect-ratio: 1500 / 880;
  overflow: visible;
}

.reaction-test-device * {
  vector-effect: non-scaling-stroke;
}

.reaction-test-rivets circle {
  fill: #151a1e;
  stroke: rgba(117, 130, 140, 0.5);
  stroke-width: 2;
}

.reaction-test-led {
  stroke: rgba(0, 0, 0, 0.7);
  stroke-width: 2;
}

.reaction-test-led-red {
  fill: #8f2a20;
  opacity: 0.52;
  filter:
    drop-shadow(0 0 4px rgba(202, 50, 36, 0.28))
    drop-shadow(0 0 12px rgba(202, 50, 36, 0.12));
  animation: reaction-test-red-led-standby 3.2s ease-in-out infinite;
}

.reaction-test-led-yellow {
  fill: #4f431d;
  opacity: 0.62;
}

.reaction-test-led-green {
  fill: #1f4a32;
  opacity: 0.58;
}

.reaction-test-device-ui {
  pointer-events: none;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.reaction-test-device-ui-warmup {
  fill: rgba(117, 191, 181, 0.045);
  stroke: rgba(148, 209, 198, 0.22);
  stroke-width: 2;
}

.reaction-test-device-title {
  fill: #b8ddd5;
  font: 700 32px/1 "IBM Plex Mono", monospace;
  letter-spacing: 5px;
  text-anchor: middle;
  text-transform: uppercase;
  filter:
    drop-shadow(0 0 6px rgba(111, 216, 198, 0.42))
    drop-shadow(0 0 18px rgba(111, 216, 198, 0.18));
}

.reaction-test-mode-select {
  pointer-events: auto;
}

.reaction-test-screen.is-lever-pulled .reaction-test-mode-select {
  pointer-events: none;
  opacity: 0.45;
}

.reaction-test-mode-label {
  fill: rgba(180, 196, 193, 0.58);
  font: 700 14px/1 "IBM Plex Mono", monospace;
  letter-spacing: 2px;
}

.reaction-test-mode-button {
  cursor: pointer;
  outline: none;
}

.reaction-test-mode-button-face {
  fill: rgba(4, 8, 8, 0.72);
  stroke: rgba(139, 185, 174, 0.34);
  stroke-width: 2;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.34));
}

.reaction-test-mode-button-label {
  fill: rgba(220, 237, 232, 0.78);
  font: 800 18px/1 "IBM Plex Mono", monospace;
  letter-spacing: 2px;
  text-anchor: middle;
  dominant-baseline: middle;
}

.reaction-test-mode-button.is-selected .reaction-test-mode-button-face,
.reaction-test-mode-button:focus-visible .reaction-test-mode-button-face {
  stroke: rgba(99, 221, 196, 0.72);
  filter:
    drop-shadow(0 0 8px rgba(99, 221, 196, 0.28))
    drop-shadow(0 6px 10px rgba(0, 0, 0, 0.34));
}

.reaction-test-r02-ui {
  display: none;
}

.reaction-test-screen.is-r02-selected .reaction-test-r01-node {
  display: none;
}

.reaction-test-screen.is-r02-selected .reaction-test-r02-ui {
  display: block;
}

.reaction-test-r02-title {
  font-size: 31px;
}

.reaction-test-r02-panel-case,
.reaction-test-r02-signal-case {
  fill: rgba(3, 7, 8, 0.62);
  stroke: rgba(139, 185, 174, 0.26);
  stroke-width: 2;
  filter:
    drop-shadow(0 0 7px rgba(104, 205, 184, 0.1))
    drop-shadow(0 10px 16px rgba(0, 0, 0, 0.34));
}

.reaction-test-r02-instruction-primary,
.reaction-test-r02-instruction-secondary,
.reaction-test-r02-instruction-tertiary {
  fill: rgba(221, 237, 232, 0.88);
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  text-anchor: middle;
  text-transform: uppercase;
}

.reaction-test-r02-instruction-primary {
  font-size: 21px;
  letter-spacing: 2.2px;
}

.reaction-test-r02-instruction-secondary {
  font-size: 17px;
  letter-spacing: 1.8px;
}

.reaction-test-r02-instruction-tertiary {
  fill: rgba(220, 200, 184, 0.76);
  font-size: 13px;
  letter-spacing: 1.5px;
}

.reaction-test-r02-signal-word {
  fill: #e8fff9;
  font: 900 48px/1 "IBM Plex Mono", monospace;
  letter-spacing: 8px;
  text-anchor: middle;
  dominant-baseline: middle;
  text-transform: uppercase;
  filter:
    drop-shadow(0 0 7px rgba(99, 221, 196, 0.28))
    drop-shadow(0 0 18px rgba(99, 221, 196, 0.12));
}

.reaction-test-r02-answer-button {
  pointer-events: none;
  cursor: pointer;
  outline: none;
  opacity: 0.52;
}

.reaction-test-screen.is-r02-running .reaction-test-r02-answer-button {
  pointer-events: auto;
  opacity: 1;
}

.reaction-test-r02-answer-face {
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 3;
  filter:
    drop-shadow(0 0 7px rgba(0, 0, 0, 0.34))
    drop-shadow(0 10px 14px rgba(0, 0, 0, 0.38));
}

.reaction-test-r02-answer-button:focus-visible .reaction-test-r02-answer-face,
.reaction-test-r02-answer-button:hover .reaction-test-r02-answer-face {
  stroke: rgba(255, 255, 255, 0.62);
}

.reaction-test-r02-answer-red {
  fill: #8f2a20;
}

.reaction-test-r02-answer-yellow {
  fill: #9a7d23;
}

.reaction-test-r02-answer-green {
  fill: #247a45;
}

.reaction-test-r02-answer-blue {
  fill: #244f91;
}

.reaction-test-r02-answer-label {
  fill: #f4f7f2;
  font: 900 20px/1 "IBM Plex Mono", monospace;
  letter-spacing: 2px;
  text-anchor: middle;
  dominant-baseline: middle;
  text-transform: uppercase;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.75));
}

.reaction-test-r02-timer-track {
  fill: rgba(0, 0, 0, 0.56);
  stroke: rgba(139, 185, 174, 0.24);
  stroke-width: 2;
}

.reaction-test-r02-timer-fill {
  fill: #63ddc4;
  filter: drop-shadow(0 0 8px rgba(99, 221, 196, 0.32));
}

.reaction-test-r02-feedback-panel,
.reaction-test-r02-result-text,
.reaction-test-r02-result-subtitle,
.reaction-test-r02-assessment-text,
.reaction-test-r02-result-detail-text,
.reaction-test-r02-ui .reaction-test-report-panel,
.reaction-test-r02-ui .reaction-test-reset-hint,
.reaction-test-r02-signal-panel,
.reaction-test-r02-answer-bank,
.reaction-test-r02-score-panel,
.reaction-test-r02-round-panel,
.reaction-test-r02-window-panel,
.reaction-test-r02-instruction-panel {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.reaction-test-r02-result-subtitle {
  fill: rgba(220, 237, 232, 0.78);
  font: 800 22px/1 "IBM Plex Mono", monospace;
  letter-spacing: 3px;
  text-anchor: middle;
  text-transform: uppercase;
}

.reaction-test-report-panel {
  fill: rgba(3, 7, 8, 0.72);
  stroke: rgba(139, 185, 174, 0.28);
  stroke-width: 2;
  filter:
    drop-shadow(0 0 7px rgba(104, 205, 184, 0.1))
    drop-shadow(0 12px 18px rgba(0, 0, 0, 0.38));
}

.reaction-test-bar-assembly,
.reaction-test-stop-button,
.reaction-test-score-counter,
.reaction-test-round-panel,
.reaction-test-result-text,
.reaction-test-result-subtitle,
.reaction-test-assessment-text,
.reaction-test-result-detail-text,
.reaction-test-r01-node.reaction-test-report-panel,
.reaction-test-reset-hint {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.reaction-test-feedback-panel {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.reaction-test-feedback-panel-case {
  fill: rgba(3, 7, 8, 0.58);
  stroke: rgba(139, 185, 174, 0.24);
  stroke-width: 2;
  filter:
    drop-shadow(0 0 7px rgba(104, 205, 184, 0.1))
    drop-shadow(0 10px 16px rgba(0, 0, 0, 0.34));
}

.reaction-test-feedback-primary,
.reaction-test-feedback-points,
.reaction-test-feedback-secondary {
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
}

.reaction-test-feedback-primary {
  fill: #e8fff9;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 3px;
  filter: drop-shadow(0 0 8px rgba(99, 221, 196, 0.28));
}

.reaction-test-feedback-points {
  fill: #ffe8da;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 2.5px;
  filter: drop-shadow(0 0 8px rgba(232, 72, 60, 0.24));
}

.reaction-test-feedback-secondary {
  fill: rgba(202, 223, 217, 0.74);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.6px;
}

.reaction-test-screen.is-reaction-hit .reaction-test-feedback-primary {
  fill: #caffdd;
  filter: drop-shadow(0 0 9px rgba(75, 212, 93, 0.34));
}

.reaction-test-screen.is-reaction-miss .reaction-test-feedback-primary {
  fill: #ffd5c9;
  filter: drop-shadow(0 0 9px rgba(232, 72, 60, 0.32));
}

.reaction-test-bar-track {
  fill: rgba(0, 0, 0, 0.46);
  stroke: rgba(151, 184, 176, 0.26);
  stroke-width: 2;
  filter: drop-shadow(0 0 16px rgba(0, 0, 0, 0.7));
}

.reaction-test-red-bar {
  fill: #d82722;
  filter:
    drop-shadow(0 0 5px rgba(232, 45, 36, 0.7))
    drop-shadow(0 0 20px rgba(232, 45, 36, 0.34));
}

.reaction-test-target-zone {
  fill: #4bd45d;
  opacity: 0;
  stroke: rgba(218, 255, 219, 0.72);
  stroke-width: 2;
  filter:
    drop-shadow(0 0 7px rgba(75, 212, 93, 0.62))
    drop-shadow(0 0 18px rgba(75, 212, 93, 0.28));
}

.reaction-test-marker {
  fill: #020303;
  opacity: 0;
  stroke: rgba(216, 225, 219, 0.34);
  stroke-width: 1;
  filter:
    drop-shadow(0 0 5px rgba(0, 0, 0, 0.92))
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.16));
}

.reaction-test-red-bar-sheen {
  fill: none;
  stroke: rgba(255, 199, 181, 0.54);
  stroke-linecap: round;
  stroke-width: 3;
}

.reaction-test-stop-button {
  pointer-events: auto;
  cursor: pointer;
}

.reaction-test-stop-button:focus-visible .reaction-test-stop-button-face {
  stroke: rgba(255, 218, 183, 0.94);
}

.reaction-test-stop-button-shadow {
  fill: rgba(0, 0, 0, 0.58);
}

.reaction-test-stop-button-face {
  fill: #191f21;
  stroke: rgba(229, 80, 68, 0.82);
  stroke-width: 4;
  filter:
    drop-shadow(0 0 8px rgba(226, 57, 48, 0.25))
    drop-shadow(0 12px 18px rgba(0, 0, 0, 0.48));
}

.reaction-test-stop-button-highlight {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-linecap: round;
  stroke-width: 3;
}

.reaction-test-stop-button-label {
  fill: #f5e7db;
  font: 800 36px/1 "IBM Plex Mono", monospace;
  letter-spacing: 6px;
  text-anchor: middle;
  dominant-baseline: middle;
  filter: drop-shadow(0 0 7px rgba(232, 72, 60, 0.42));
}

.reaction-test-score-counter-case {
  fill: rgba(4, 8, 8, 0.72);
  stroke: rgba(139, 185, 174, 0.34);
  stroke-width: 2;
  filter:
    drop-shadow(0 0 7px rgba(104, 205, 184, 0.12))
    drop-shadow(0 8px 12px rgba(0, 0, 0, 0.42));
}

.reaction-test-score-counter-label {
  fill: rgba(178, 214, 206, 0.64);
  font: 700 13px/1 "IBM Plex Mono", monospace;
  letter-spacing: 2px;
}

.reaction-test-score-counter-value {
  fill: #e8fff9;
  font: 800 28px/1 "IBM Plex Mono", monospace;
  letter-spacing: 3px;
  text-anchor: end;
  filter: drop-shadow(0 0 8px rgba(99, 221, 196, 0.34));
}

.reaction-test-round-panel-case {
  fill: rgba(4, 8, 8, 0.72);
  stroke: rgba(229, 80, 68, 0.3);
  stroke-width: 2;
  filter:
    drop-shadow(0 0 7px rgba(226, 57, 48, 0.14))
    drop-shadow(0 8px 12px rgba(0, 0, 0, 0.42));
}

.reaction-test-round-label {
  fill: rgba(220, 200, 184, 0.68);
  font: 700 13px/1 "IBM Plex Mono", monospace;
  letter-spacing: 1.4px;
}

.reaction-test-round-value {
  fill: #ffe8da;
  font: 800 28px/1 "IBM Plex Mono", monospace;
  letter-spacing: 3px;
  text-anchor: end;
  filter: drop-shadow(0 0 8px rgba(232, 72, 60, 0.34));
}

.reaction-test-result-text {
  fill: #e8fff9;
  font: 800 42px/1 "IBM Plex Mono", monospace;
  letter-spacing: 7px;
  text-anchor: middle;
  filter:
    drop-shadow(0 0 7px rgba(99, 221, 196, 0.42))
    drop-shadow(0 0 24px rgba(99, 221, 196, 0.18));
}

.reaction-test-result-subtitle {
  fill: rgba(220, 237, 232, 0.78);
  font: 800 22px/1 "IBM Plex Mono", monospace;
  letter-spacing: 3px;
  text-anchor: middle;
  text-transform: uppercase;
}

.reaction-test-assessment-text {
  fill: rgba(221, 237, 232, 0.86);
  font: 700 19px/1.28 "IBM Plex Mono", monospace;
  letter-spacing: 1.3px;
  text-anchor: middle;
  filter: drop-shadow(0 0 8px rgba(99, 221, 196, 0.16));
}

.reaction-test-result-detail-text {
  fill: rgba(220, 200, 184, 0.86);
  font: 800 17px/1.3 "IBM Plex Mono", monospace;
  letter-spacing: 1.8px;
  text-anchor: middle;
  text-transform: uppercase;
  filter: drop-shadow(0 0 8px rgba(232, 72, 60, 0.14));
}

.reaction-test-best-value {
  fill: rgba(180, 196, 193, 0.64);
  font: 800 16px/1 "IBM Plex Mono", monospace;
  letter-spacing: 2px;
  text-anchor: middle;
  text-transform: uppercase;
}

.reaction-test-reset-hint {
  fill: rgba(202, 223, 217, 0.78);
  font: 800 17px/1 "IBM Plex Mono", monospace;
  letter-spacing: 2.3px;
  text-anchor: middle;
  text-transform: uppercase;
  filter: drop-shadow(0 0 8px rgba(99, 221, 196, 0.18));
}

.reaction-test-screen.is-lever-pulled .reaction-test-device-ui {
  animation: reaction-test-screen-power-on 760ms steps(6, end) forwards;
}

.reaction-test-screen.is-lever-pulled .reaction-test-feedback-panel {
  animation: reaction-test-device-control-build 520ms steps(4, end) 540ms forwards;
}

.reaction-test-screen.is-lever-pulled .reaction-test-bar-assembly {
  animation: reaction-test-device-control-build 520ms steps(4, end) 620ms forwards;
}

.reaction-test-screen.is-lever-pulled .reaction-test-stop-button {
  animation: reaction-test-device-control-build 520ms steps(4, end) 860ms forwards;
}

.reaction-test-screen.is-lever-pulled .reaction-test-score-counter {
  animation: reaction-test-device-control-build 520ms steps(4, end) 980ms forwards;
}

.reaction-test-screen.is-lever-pulled .reaction-test-round-panel {
  animation: reaction-test-device-control-build 520ms steps(4, end) 1040ms forwards;
}

.reaction-test-screen.is-r02-selected.is-lever-pulled .reaction-test-r02-signal-panel,
.reaction-test-screen.is-r02-selected.is-lever-pulled .reaction-test-r02-answer-bank,
.reaction-test-screen.is-r02-selected.is-lever-pulled .reaction-test-r02-score-panel,
.reaction-test-screen.is-r02-selected.is-lever-pulled .reaction-test-r02-round-panel,
.reaction-test-screen.is-r02-selected.is-lever-pulled .reaction-test-r02-window-panel,
.reaction-test-screen.is-r02-selected.is-lever-pulled .reaction-test-r02-instruction-panel {
  animation: reaction-test-device-control-build 520ms steps(4, end) 620ms forwards;
}

.reaction-test-screen.is-r02-feedback .reaction-test-r02-feedback-panel {
  animation: reaction-test-device-control-build 260ms steps(3, end) forwards;
}

.reaction-test-screen.is-r02-running .reaction-test-r02-feedback-panel {
  animation: none;
  opacity: 0;
}

.reaction-test-screen.is-r02-complete .reaction-test-r02-result-text,
.reaction-test-screen.is-r02-complete .reaction-test-r02-result-subtitle,
.reaction-test-screen.is-r02-complete .reaction-test-r02-assessment-text,
.reaction-test-screen.is-r02-complete .reaction-test-r02-result-detail-text,
.reaction-test-screen.is-r02-complete .reaction-test-r02-ui .reaction-test-report-panel,
.reaction-test-screen.is-r02-complete .reaction-test-r02-ui .reaction-test-reset-hint {
  animation: reaction-test-device-control-build 520ms steps(4, end) forwards;
}

.reaction-test-screen.is-r02-complete .reaction-test-r02-signal-panel,
.reaction-test-screen.is-r02-complete .reaction-test-r02-answer-bank,
.reaction-test-screen.is-r02-complete .reaction-test-r02-score-panel,
.reaction-test-screen.is-r02-complete .reaction-test-r02-round-panel,
.reaction-test-screen.is-r02-complete .reaction-test-r02-window-panel,
.reaction-test-screen.is-r02-complete .reaction-test-r02-instruction-panel,
.reaction-test-screen.is-r02-complete .reaction-test-r02-feedback-panel {
  animation: none;
  opacity: 0;
  pointer-events: none;
}

.reaction-test-screen.is-r02-complete .reaction-test-r02-best-value {
  opacity: 0;
}

.reaction-test-screen.is-lever-pulled.is-reaction-active .reaction-test-marker,
.reaction-test-screen.is-lever-pulled.is-reaction-active .reaction-test-target-zone {
  opacity: 1;
}

.reaction-test-screen.is-lever-pulled.is-reaction-complete .reaction-test-result-text {
  animation: reaction-test-device-control-build 520ms steps(4, end) forwards;
}

.reaction-test-screen.is-lever-pulled.is-reaction-complete .reaction-test-result-subtitle,
.reaction-test-screen.is-lever-pulled.is-reaction-complete .reaction-test-r01-node.reaction-test-report-panel {
  animation: reaction-test-device-control-build 520ms steps(4, end) 80ms forwards;
}

.reaction-test-screen.is-lever-pulled.is-reaction-complete .reaction-test-assessment-text {
  animation: reaction-test-device-control-build 520ms steps(4, end) 160ms forwards;
}

.reaction-test-screen.is-lever-pulled.is-reaction-complete .reaction-test-result-detail-text {
  animation: reaction-test-device-control-build 520ms steps(4, end) 240ms forwards;
}

.reaction-test-screen.is-lever-pulled.is-reaction-complete .reaction-test-reset-hint {
  animation: reaction-test-device-control-build 520ms steps(4, end) 320ms forwards;
}

.reaction-test-screen.is-reaction-complete .reaction-test-bar-assembly,
.reaction-test-screen.is-reaction-complete .reaction-test-stop-button,
.reaction-test-screen.is-reaction-complete .reaction-test-score-counter,
.reaction-test-screen.is-reaction-complete .reaction-test-round-panel,
.reaction-test-screen.is-reaction-complete .reaction-test-feedback-panel {
  animation: none;
  opacity: 0;
  pointer-events: none;
}

.reaction-test-screen.is-reaction-complete .reaction-test-best-value {
  opacity: 0;
}

.reaction-test-screen.is-lever-pulled .reaction-test-led-red {
  opacity: 0.25;
  animation: none;
}

.reaction-test-screen.is-lever-pulled .reaction-test-led-yellow {
  fill: #c7932e;
  opacity: 0.9;
  filter: drop-shadow(0 0 9px rgba(218, 159, 45, 0.38));
}

.reaction-test-screen.is-lever-pulled .reaction-test-led-green {
  fill: #52d689;
  opacity: 0.94;
  filter:
    drop-shadow(0 0 7px rgba(82, 214, 137, 0.5))
    drop-shadow(0 0 18px rgba(82, 214, 137, 0.22));
}

.reaction-test-lever {
  cursor: grab;
  outline: none;
}

.reaction-test-lever:active {
  cursor: grabbing;
}

.reaction-test-lever:focus-visible > rect:first-child {
  stroke: rgba(185, 215, 210, 0.8);
}

.reaction-test-lever-arm {
  transform-box: view-box;
  transform-origin: 169px 453px;
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reaction-test-screen.is-lever-pulled .reaction-test-lever-arm,
.reaction-test-lever.is-pulled .reaction-test-lever-arm {
  transform: rotate(31deg);
}

.vsa-training-station-card-button {
  appearance: none;
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.vsa-training-station-card-button:focus-visible {
  outline: 2px solid rgba(238, 207, 148, 0.78);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .reaction-test-screen {
    padding: 12px;
  }

  .reaction-test-stage {
    height: calc(100svh - 24px);
    gap: 8px;
  }

  .reaction-test-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .reaction-test-status {
    text-align: left;
    font-size: 0.62rem;
  }
}

@keyframes reaction-test-red-led-standby {
  0%,
  100% {
    opacity: 0.34;
    filter:
      drop-shadow(0 0 2px rgba(202, 50, 36, 0.18))
      drop-shadow(0 0 8px rgba(202, 50, 36, 0.08));
  }

  46%,
  56% {
    opacity: 0.68;
    filter:
      drop-shadow(0 0 5px rgba(226, 64, 48, 0.36))
      drop-shadow(0 0 15px rgba(226, 64, 48, 0.16));
  }
}

@keyframes reaction-test-screen-power-on {
  0% {
    opacity: 0;
    transform: scaleY(0.02);
  }

  18% {
    opacity: 0.95;
    transform: scaleY(0.02);
  }

  32% {
    opacity: 0.38;
    transform: scaleY(0.18);
  }

  54% {
    opacity: 0.88;
    transform: scaleY(0.72);
  }

  70% {
    opacity: 0.62;
    transform: scaleY(1);
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes reaction-test-device-control-build {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  45% {
    opacity: 0.45;
    transform: translateY(4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}