/* Shared transport control, based on the native start-game demonstration. */
[data-app="puck"] #landing .puck-demo-pause {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--puck-line);
    border-radius: 50%;
    background: transparent;
    color: var(--puck-muted);
    cursor: pointer;
}
[data-app="puck"] #landing .puck-demo-pause[hidden] { display: none; }
[data-app="puck"] #landing .puck-demo-pause .icon { width: 20px; height: 20px; fill: currentColor; }
[data-app="puck"] #landing .puck-demo-pause:hover { color: var(--puck-ink); border-color: var(--puck-blue); }
[data-app="puck"] #landing .puck-play .puck-demo-pause {
    color: var(--puck-controls-muted);
    border-color: color-mix(in srgb, var(--puck-controls-muted) 35%, transparent);
}
[data-app="puck"] #landing .puck-play .puck-demo-pause:hover { color: var(--puck-controls-ink); border-color: var(--puck-controls-accent); }
/* Each control sits at the right edge of the row below its demonstration. */
.puck-film__rail { align-items: center; }
[data-app="puck"] #landing .puck-film__rail .puck-demo-pause { align-self: center; }
.puck-story__caption { padding-inline: 60px; }
.puck-play__footer { display: block; position: relative; }
[data-app="puck"] #landing .puck-play__footer > div > p {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-inline: 60px;
    margin: 0;
    text-align: center;
    font: clamp(.85rem, 1.5vw, 1rem)/1.5 var(--font-display);
}
.puck-play__footer > div > span { margin-top: .5rem; }
[data-app="puck"] #landing .puck-play__footer .puck-demo-pause { position: absolute; right: 0; top: 1.5rem; }
@media (max-width: 599px) {
    [data-app="puck"] #landing .puck-demo-pause {
        flex-basis: 36px;
        width: 36px;
        min-width: 36px;
        border: 0;
    }
    .puck-story__caption { padding-inline: 44px; }
    [data-app="puck"] #landing .puck-play__footer > div > p { padding-inline: 44px; font-size: .8rem; }
}

/* The route buttons belong with the changing caption below the demonstration. */
.puck-try__modes { justify-content:center;margin:1.25rem 0 .5rem; }
.puck-play__footer { border:0;padding-top:0;margin-top:1.25rem;min-height:44px; }
[data-app="puck"] #landing .puck-play__footer .puck-demo-pause { top:0; }
.puck-play__testing { font-size:.7rem;padding:3px 7px; }
.puck-download__action p { font-size:.85rem; }