.reactive-field{width:100%;max-width:520px;margin:auto;direction:ltr}.switch-field{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:16px;max-width:420px;min-height:250px}.switch-target{min-height:105px;border:3px solid #365963;border-radius:50%;background:#102a32;color:#9ab4ba;font:700 28px monospace;cursor:pointer;touch-action:manipulation}.switch-target.active{background:var(--gold);color:#071a1f;border-color:#fff4bf;box-shadow:0 0 0 5px #edc65330}.switch-target:hover{outline:2px solid #769ba5;outline-offset:3px}.recovery-field{aspect-ratio:3/2;background:repeating-linear-gradient(0deg,transparent,transparent 39px,#17353e 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,#17353e 40px);border:2px solid var(--line);border-radius:5px;touch-action:none;overflow:hidden;cursor:crosshair}.recovery-field svg{width:100%;height:100%;display:block}.tracking-target{fill:#63c8e820;stroke:var(--blue);stroke-width:3}.tracking-target.contact{fill:#53dd8340;stroke:var(--green)}.tracking-target.reversed{stroke:var(--gold);stroke-width:5;stroke-dasharray:8 4}.tracking-cursor{fill:#fff;stroke:#071a1f;stroke-width:2;pointer-events:none}.dual-field{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:650px}.stream-panel{border:2px solid var(--line);border-radius:5px;padding:12px;background:#0e262d;min-width:0}.stream-panel h3{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.stream-panel.signaled{border-color:var(--gold)}.stream-signal{display:flex;align-items:center;justify-content:center;font:700 60px/1.3 monospace;height:98px;color:var(--gold);overflow-wrap:anywhere}.stream-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stream-buttons .choice{font-size:13px;padding:10px 4px;min-height:52px;font-weight:700}.stream-feedback{min-height:36px;margin:12px 0 0;font-size:12px;line-height:1.4;overflow-wrap:anywhere}.stream-panel .stream-signal:has(+.stream-buttons button:disabled){font-size:22px}.audio-samples{margin-top:6px}.audio-samples .pixel-button{font-size:12px;padding:10px 14px}.reactive-detail{font-size:12px;color:var(--muted);line-height:1.7;min-height:20px;text-align:center;overflow-wrap:anywhere}.reactive-end{display:block;margin:12px auto 0;border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;padding:10px;cursor:pointer;text-decoration:underline}.reactive-end[hidden]{display:none}.reactive-shell .demand-status{font-size:clamp(16px,3vw,23px)}.reactive-shell .demand-feedback{margin:10px 0}.reactive-shell .demand-arena{gap:12px;min-height:250px}.reactive-shell .demand-arena button:disabled{opacity:.6}.reactive-shell [data-state=idle] .reactive-field,.reactive-shell [data-state=cancelled] .reactive-field{opacity:.65}.reactive-shell [data-state=finished] .reactive-field{opacity:.7}@media(max-width:520px){.switch-field{gap:16px;padding:8px;min-height:220px}.switch-target{min-height:90px;font-size:24px}.dual-field{gap:8px}.stream-panel{padding:8px 5px}.stream-buttons{gap:5px}.stream-buttons .choice{font-size:11px}.stream-signal{height:85px;font-size:48px}.audio-samples{gap:8px}.audio-samples .pixel-button{font-size:11px;padding:10px}.reactive-shell .demand-arena{min-height:190px}}@media(prefers-reduced-motion:reduce){.switch-target{box-shadow:none}.tracking-target{stroke-dasharray:none}}