/* The teacher guide video (guide.js): its button, and the player over the page */
.guide-button { gap: 10px; }
.guide-play { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--teal); color: #fff; padding-left: 2px; }
.guide-modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px; background: rgba(8, 20, 17, .8); }
.guide-frame { position: relative; width: min(1120px, 100%, calc((100vh - 48px) * 16 / 9)); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px;
  background: #000; box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }
.guide-modal.tall .guide-frame { width: min(100%, calc((100vh - 24px) * 9 / 16)); aspect-ratio: 9 / 16; }
.guide-frame video { display: block; width: 100%; height: 100%; background: #000; }
.guide-close { position: absolute; top: 10px; right: 10px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55);
  color: #fff; font: 400 28px/1 system-ui, sans-serif; cursor: pointer; }
.guide-close:hover { background: rgba(0, 0, 0, .75); }
@media (max-width: 640px) { .guide-modal { padding: 12px; } }