/* A zero-height relay uses the two sections' existing breathing room. */
.keyboard-demo-bridge {
    --bridge-source: #5579b9;
    --bridge-line: #7795c278;
    --bridge-surface: #f7faff;
    --bridge-ink: #172641;
    --bridge-muted: #40516d;
    --bridge-output-height: clamp(32px, 5.6vw, 80px);
    position: relative;
    z-index: 3;
    height: 0;
    overflow: visible;
    pointer-events: none;
}
[data-theme="dark"] .keyboard-demo-bridge {
    --bridge-source: #a6c7ff;
    --bridge-line: #a6c7ff57;
    --bridge-surface: #202d46;
    --bridge-ink: #f7f9ff;
    --bridge-muted: #cfdbef;
}
.keyboard-demo-trace {
    position: absolute;
    bottom: 27px;
    left: 50%;
    width: 320px;
    height: clamp(24px, calc(8vw - 48px), 76px);
    transform: translateX(-50%);
    stroke-width: 1.2;
    stroke-linecap: round;
    pointer-events: none;
}
.keyboard-demo-trace-base { stroke: var(--bridge-line); }
.keyboard-demo-trace circle { fill: var(--bridge-source); opacity: .6; }
.keyboard-demo-trace-pulse {
    stroke: var(--bridge-source);
    stroke-width: 2.5;
    stroke-dasharray: 12 100;
    stroke-dashoffset: 12;
    opacity: 0;
}
.keyboard-demo-bridge-link {
    position: absolute;
    top: 0;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 13px;
    width: max-content;
    max-width: calc(100vw - 36px);
    min-height: 64px;
    padding: 10px 17px 10px 10px;
    border: 1px solid var(--bridge-line);
    border-radius: 20px;
    background: var(--bridge-surface);
    color: var(--bridge-ink);
    box-shadow: 0 10px 28px #12274214, inset 0 1px 0 #ffffff45;
    text-decoration: none;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.keyboard-demo-bridge-link:hover {
    border-color: var(--accent);
    box-shadow: 0 10px 28px var(--accent-soft), inset 0 1px 0 #ffffff45;
}
.keyboard-demo-bridge-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.keyboard-demo-key {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--bridge-line);
    border-bottom-width: 3px;
    border-radius: 12px;
    color: var(--bridge-source);
    background: linear-gradient(145deg, #ffffff12, #7795c217);
}
.keyboard-demo-key svg { width: 25px; height: 25px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.keyboard-demo-bridge-copy { display: grid; gap: 3px; line-height: 1.2; }
.keyboard-demo-bridge-eyebrow { color: var(--bridge-muted); font-size: 10px; font-weight: 650; letter-spacing: .025em; }
.keyboard-demo-bridge-invite { font-size: 14px; font-weight: 750; letter-spacing: -.02em; }
.keyboard-demo-bridge-arrow { width: 19px; height: 19px; margin-left: 7px; flex: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.keyboard-demo-output {
    position: absolute;
    top: 32px;
    left: 50%;
    width: 1px;
    height: var(--bridge-output-height);
    background: linear-gradient(var(--bridge-line), var(--accent-ring), transparent);
}
.keyboard-demo-output::after {
    content: "";
    position: absolute;
    top: 0;
    left: -2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px 3px var(--accent-ring);
    opacity: 0;
}
.keyboard-demo-bridge.is-signaling .keyboard-demo-trace-pulse { animation: keyboard-demo-travel 3s ease-in-out infinite; }
.keyboard-demo-bridge.is-signaling .keyboard-demo-key { animation: keyboard-demo-keypress 3s ease infinite; }
.keyboard-demo-bridge.is-signaling .keyboard-demo-output::after { animation: keyboard-demo-deliver 3s ease-in-out infinite; }
.reverse-demo.has-demo-arrival .reverse-demo-field { animation: keyboard-demo-arrival 1.3s .3s ease-out; }
@keyframes keyboard-demo-travel {
    0% { stroke-dashoffset: 12; opacity: 0; }
    5%, 25% { opacity: 1; }
    33.333%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes keyboard-demo-keypress {
    0%, 15%, 33.333%, 100% { transform: translateY(0); border-color: var(--bridge-line); box-shadow: none; }
    23.25% { transform: translateY(2px); border-color: var(--bridge-source); box-shadow: 0 0 16px #7795c226; }
}
@keyframes keyboard-demo-deliver {
    0%, 25% { transform: translateY(0); opacity: 0; }
    30.667%, 43.417% { opacity: 1; }
    53.333%, 100% { transform: translateY(var(--bridge-output-height)); opacity: 0; }
}
@keyframes keyboard-demo-arrival {
    0%, 100% { border-color: var(--border-strong); box-shadow: 0 14px 34px #18284b14; }
    35% { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 14px 34px var(--accent-soft); }
}
@media (max-width: 700px) {
    .keyboard-demo-trace { width: 250px; height: 44px; bottom: 30px; }
    .keyboard-demo-bridge-link { min-height: 60px; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 18px; }
    .keyboard-demo-key { width: 40px; height: 40px; }
    .keyboard-demo-output { top: 30px; }
}
@media (max-width: 380px) {
    .keyboard-demo-trace { height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .keyboard-demo-bridge *, .keyboard-demo-bridge *::after,
    .reverse-demo.has-demo-arrival .reverse-demo-field { animation: none !important; transition: none !important; }
}