/* Click-to-play tutorial facades. One file for the hub and every embed. */
.tut { margin: 22px 0 8px; }
.tut h2 { margin: 22px 0 12px; font-size: 22px; letter-spacing: -0.015em; line-height: 1.25; }
.connect-agent .tut h2 { margin: 22px 0 12px; font-size: 22px; }
.tut-slot {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  background: #111319;
  border-radius: 16px;
  overflow: hidden;
}
.tut-short .tut-slot { max-width: 360px; aspect-ratio: 9 / 16; }
.tut-facade { position: absolute; inset: 0; display: block; }
.tut-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tut-facade:focus-visible { outline: 2px solid #30e0a1; outline-offset: 3px; }
.tut-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 68px;
  margin: -34px 0 0 -34px;
  border-radius: 50%;
  background: rgba(10, 11, 15, 0.72);
  border: 2px solid #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.tut-play::after {
  content: "";
  position: absolute;
  left: 26px;
  top: 18px;
  border-style: solid;
  border-width: 14px 0 14px 24px;
  border-color: transparent transparent transparent #fff;
}
.tut-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.tut-cap { margin: 12px 0 0; max-width: 720px; color: var(--muted, #adb0b9); }
.tut-more { margin: 8px 0 0; font-size: 14px; }