.htp-track-shell, .htp-mic-shell { width: min(960px, 100%); margin: 0 auto; color: #e8edf5; font-family: system-ui, sans-serif; }
.htp-track-instruction, .htp-mic-instruction { margin: 0 0 12px; color: #bdc7d8; }
.htp-track-stage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #05070a; cursor: none; outline: 2px solid transparent; }
.htp-track-stage:focus { outline-color: #5dd6c0; }
.htp-track-video { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.htp-track-cursor { position: absolute; width: 24px; height: 24px; border: 2px solid #5dd6c0; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; }
.htp-track-cursor::before, .htp-track-cursor::after { content: ''; position: absolute; background: #5dd6c0; }
.htp-track-cursor::before { width: 32px; height: 1px; left: -6px; top: 10px; }
.htp-track-cursor::after { width: 1px; height: 32px; left: 10px; top: -6px; }
.htp-track-status, .htp-mic-state { margin-top: 10px; font-variant-numeric: tabular-nums; }
.htp-mic-meter { height: 14px; margin: 20px 0 12px; overflow: hidden; border-radius: 7px; background: #252c38; }
.htp-mic-meter span { display: block; width: 0; height: 100%; background: #5dd6c0; transition: width 60ms linear; }
.htp-mic-stop { margin-top: 20px; padding: 8px 14px; border: 1px solid #697589; border-radius: 6px; color: inherit; background: #252c38; cursor: pointer; }