.stan-vf{
    --svf-accent:#ccff00;
    --svf-bg:#fff;
    --svf-text:#111;
    width:100%;
    max-width:100%;
    margin:2rem auto;
    color:var(--svf-text);
    background:transparent;
    font-family:inherit;
}
.stan-vf *{box-sizing:border-box}
.stan-vf-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    border-top:6px solid currentColor;
    border-bottom:1px solid currentColor;
    padding:.58rem 0 .68rem;
    margin-bottom:.8rem;
}
.stan-vf-head span{
    font-size:.74rem;
    font-weight:900;
    letter-spacing:.12em;
}
.stan-vf-head strong{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    background:var(--svf-accent);
    border:2px solid currentColor;
    box-shadow:3px 3px 0 currentColor;
    font-size:.8rem;
}
.stan-vf-card{
    border:1px solid currentColor;
    background:var(--svf-bg);
    box-shadow:6px 6px 0 currentColor;
    overflow:hidden;
}
.stan-vf-media{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#111;
}
.stan-vf-media>img,
.stan-vf-media>iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    border:0;
}
.stan-vf-media>img{object-fit:cover}
.stan-vf-media>iframe{z-index:2}
.stan-vf-play{
    position:absolute;
    z-index:3;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    display:grid;
    place-items:center;
    width:68px;
    height:68px;
    padding:0;
    border:4px solid #111;
    border-radius:50%;
    background:var(--svf-accent);
    color:#111;
    box-shadow:5px 5px 0 #111;
    cursor:pointer;
    font:inherit;
    font-size:1.3rem;
    line-height:1;
    transition:transform .16s ease,box-shadow .16s ease;
}
.stan-vf-play:hover,
.stan-vf-play:focus-visible{
    transform:translate(calc(-50% + 3px),calc(-50% + 3px));
    box-shadow:2px 2px 0 #111;
}
.stan-vf-media.is-playing>img,
.stan-vf-media.is-playing>.stan-vf-play{display:none}
.stan-vf-empty{padding:1rem;border:1px dashed #999}

@media(max-width:520px){
    .stan-vf{margin:1.6rem auto}
    .stan-vf-card{box-shadow:4px 4px 0 currentColor}
    .stan-vf-play{width:58px;height:58px;border-width:3px;box-shadow:4px 4px 0 #111}
    .stan-vf-head strong{width:34px;height:34px}
}
@media(prefers-reduced-motion:reduce){
    .stan-vf-play{transition:none}
}

.stan-vf-caption{
    margin:.85rem 0 0;
    padding:0 .1rem;
    color:var(--svf-text);
    font-size:.88rem;
    line-height:1.5;
    font-style:normal;
}