/* Scoped presentation. No rectangular background outside the device. */
.aster-phone, .aster-phone * { box-sizing: border-box; }
.aster-phone { width: min(100%, 340px); margin: 0; color: inherit; }
.aster-phone__device { position: relative; padding: 2.25%; border: 1px solid #848f9a; border-radius: 14.5% / 6.8%; background: #080a0e; box-shadow: inset 0 0 0 3px #282e36; }
.aster-phone__device::before, .aster-phone__device::after { content: ''; position: absolute; width: 3px; border-radius: 2px; background: #515963; }
.aster-phone__device::before { left: -3px; top: 19%; height: 7%; box-shadow: 0 55px 0 #515963; }
.aster-phone__device::after { right: -3px; top: 22%; height: 10%; }
.aster-phone__screen { overflow: hidden; aspect-ratio: 215 / 466; border-radius: 13% / 6%; background: #030915; }
.aster-phone video { display: block; width: 100%; height: 100%; aspect-ratio: 215 / 466; object-fit: contain; }
.aster-phone figcaption { margin-top: 20px; font: inherit; }
.aster-phone__label { display: block; font-size: .875rem; line-height: 1.5; }
.aster-phone__toggle { display: block; margin-top: 8px; min-height: 44px; padding: 10px 16px; font: inherit; font-size: .8125rem; color: inherit; border: 1px solid currentColor; border-radius: 999px; background: transparent; cursor: pointer; }
.aster-phone__toggle[hidden] { display: none; }
.aster-phone__toggle:focus-visible { outline: 3px solid #79dce8; outline-offset: 4px; }
.aster-phone__toggle:disabled { cursor: default; opacity: .65; }
.aster-phone__status { display: block; min-height: 1.5em; margin-top: 4px; font-size: .75rem; line-height: 1.5; }
@media (max-width: 600px) { .aster-phone { width: min(78vw, 320px); margin-inline: auto; } }