/* /embed/: the face fills the frame; the page itself is transparent unless ?bg= says otherwise. */
html, body { margin: 0; height: 100%; overflow: hidden; background: transparent; }
body { font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color: #e6ecf8; }
canvas { display: block; width: 100%; height: 100%; }
.caption { position: absolute; left: 10px; right: 10px; bottom: 12px; padding: 8px 12px; border-radius: 12px;
  background: rgba(10, 18, 38, .82); border: 1px solid rgba(148, 163, 184, .24); font-size: 13px; }
.play { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; border: 1px solid rgba(34, 211, 238, .6); background: rgba(10, 18, 38, .82); color: #22d3ee; }
.play:hover { box-shadow: 0 0 16px -4px #22d3ee; }
.play svg { width: 18px; height: 18px; fill: currentColor; margin-left: 2px; }
.caption:not([hidden]) ~ .play { bottom: auto; top: 10px; }
.credit { position: absolute; left: 8px; top: 6px; font: 500 10px/1 ui-monospace, Consolas, monospace; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(230, 236, 248, .35); text-decoration: none; }
.credit:hover { color: #22d3ee; }
.play[hidden] { display: none; }