/* Match the live page's lane cues while its recorded voices speak. */
.lane { position: relative; transition: box-shadow .25s ease; }
.lane.speaking { box-shadow: 0 0 0 2px var(--c), 0 0 30px -6px var(--c); }
.lane .bubble { position: absolute; top: 46px; left: 12px; right: 12px; z-index: 3; padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.35;
  background: #0f1115ee; border: 1px solid var(--c); color: #eef0f4; box-shadow: 0 6px 20px #0008; animation: bubbleIn .2s ease; }
.lane .bubble b { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c); margin-bottom: 2px; }
.lane .bubble .bars { display: inline-flex; gap: 2px; vertical-align: middle; margin-left: 6px; }
.lane .bubble .bars i { width: 3px; height: 10px; background: var(--c); border-radius: 2px; animation: bar .8s ease-in-out infinite; }
.lane .bubble .bars i:nth-child(2) { animation-delay: .15s; }
.lane .bubble .bars i:nth-child(3) { animation-delay: .3s; }
button.pressed { transform: translateY(2px); box-shadow: inset 0 0 0 3px #05180f66; filter: brightness(.8); }
@keyframes bar { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1.2); } }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }