/* Make a video (tools/video.js). Every rule starts .stv. */
.stv { display: grid; gap: 14px; }
.stv-tv { position: relative; width: min(720px, 100%); aspect-ratio: 16 / 9; margin: 0 auto; border-radius: 10px; overflow: hidden; background: #000; border: 6px solid #050505; }
.stv-tv.tall { width: min(300px, 70%); aspect-ratio: 9 / 16; }
.stv-tv video, .stv-tv img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stv-row { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.stv-pic { width: 100%; border-radius: 10px; display: block; }
.stv-col { display: grid; gap: 12px; }
.stv-go { justify-content: space-between; }
.stv-making { display: grid; justify-items: center; gap: 12px; padding: 30px 10px; text-align: center; }
.stv-making b { font-size: 20px; }
.stv-spin { width: 64px; height: 64px; border-radius: 50%; border: 6px solid #22304b; border-top-color: var(--green); animation: stv-spin 1s linear infinite; }
@keyframes stv-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .stv-row { grid-template-columns: 1fr; } }

.stv-pct { font-size: 44px; letter-spacing: -.02em; }
.stv-bar { width: min(420px, 100%); height: 8px; }
.stv .stc-card.on { border-color: var(--green); }
.stv-left { display: flex; gap: 8px; flex-wrap: wrap; }