/* Decorative feedback follows the existing player state; no audio logic. */
.home-demo-navigation[hidden] { display: none; }
.home-demo-navigation { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 12px; align-items: center; margin-top: 18px; }
.home-demo-navigation button { width: 44px; height: 44px; padding: 0; border: 1px solid #94a3b8; border-radius: 12px; background: #fff; color: #0f172a; cursor: pointer; font: inherit; font-size: 24px; }
.home-demo-navigation button:hover { background: #edf5ff; }
.home-demo-navigation button:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
.home-demo-navigation span { text-align: center; color: #475467; font-size: 14px; font-variant-numeric: tabular-nums; }
.va-home-page .home-demo-play {
    position: relative;
    padding-inline: 38px;
}

.va-home-page .home-demo-play::after {
    content: "";
    position: absolute;
    inset-inline-end: 12px;
    top: calc(50% - 10px);
    width: 18px;
    height: 20px;
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: left center, center center, right center;
    background-size: 4px 40%, 4px 90%, 4px 60%;
    opacity: 0;
    pointer-events: none;
}

.va-home-page .home-demo-play.is-playing::after {
    opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
    .va-home-page .home-demo-play.is-playing::after {
        animation: va-home-demo-levels 850ms ease-in-out infinite alternate;
    }

    @keyframes va-home-demo-levels {
        0% { background-size: 4px 35%, 4px 90%, 4px 55%; }
        50% { background-size: 4px 85%, 4px 45%, 4px 100%; }
        100% { background-size: 4px 55%, 4px 100%, 4px 30%; }
    }
}