/* Quiet replay controls preserve the original illustration's geometry.
   Content visibility belongs exclusively to cancellable Web Animations. */
.ppc .comm-showcase .comm-source {
    appearance: none;
    display: flex;
    flex-direction: inherit;
    align-items: inherit;
    justify-content: inherit;
    gap: inherit;
    width: 100%;
    height: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-transform: none;
    opacity: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ppc .comm-showcase .comm-source:disabled { cursor: default; }
.ppc .comm-showcase .comm-source > i {
    display: grid;
    place-items: center;
    width: clamp(24px, 4.5cqw, 44px);
    height: clamp(24px, 4.5cqw, 44px);
    flex: 0 0 auto;
    border: 1px solid #ccdbe4;
    border-radius: 50%;
    color: #32647f;
    font-size: clamp(12px, 1.8cqw, 20px);
}
.ppc .comm-showcase .comm-source > span {
    font-size: clamp(16px, 2.7cqw, 28px);
    font-weight: 600;
    letter-spacing: -.035em;
}
.ppc .comm-showcase .comm-source:focus-visible {
    outline: 2px solid #32647f;
    outline-offset: 3px;
}
.ppc .comm-showcase .comm-source[aria-pressed="true"] > i { border-color: #32647f; }
.ppc .comm-showcase .comm-source[aria-pressed="true"] > span {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.ppc .comm-showcase .comm-read__label { color: inherit; font: inherit; }
.ppc .comm-showcase .comm-wave__bars { transform-box: view-box; }
.ppc .comm-showcase .comm-wave__playhead {
    stroke: #244d65;
    stroke-width: 1.25;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}
@media (hover: hover) {
    .ppc .comm-showcase .comm-source:not(:disabled):hover > i { border-color: #32647f; }
    .ppc .comm-showcase .comm-source:not(:disabled):hover > span { color: #245a77; }
}
@media screen and (max-width: 739px) {
    .ppc .comm-showcase .comm-source > i { width: 21px; height: 21px; font-size: 10px; }
    .ppc .comm-showcase .comm-source > span { font-size: 14px; }
}