/* The chrome's own elements, on both listeners (chrome.js). */
pr-frame { position: relative; display: block; overflow: hidden; background: #000; }
pr-frame .pr-frame__stage { position: absolute; inset: 0; }
pr-frame .pr-frame__stage > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .35s ease; background: #000; }
pr-frame .pr-frame__stage > iframe.is-on { opacity: 1; }
pr-frame .pr-frame__over { position: absolute; inset: 0; pointer-events: none; }
/* a layer is its HTML's container: it sizes itself in cqw and cqh
   (percents of its box; with none, the stage), never vw and vh (the
   window's, which a scaled preview's stage isn't); in a page of its own,
   with no container, they're the page's */
pr-frame .pr-frame__layer { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; will-change: transform, opacity; container-type: size; }
pr-frame .pr-frame__layer.is-on { opacity: 1; }
/* a layer that's a page (a node: a source's frame, a slide), filling its box */
pr-frame .pr-frame__layer > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
pr-frame .pr-frame__layer.is-circle { border-radius: 50%; overflow: hidden; background: #111;
  box-shadow: 0 6px 24px rgba(0,0,0,.5), 0 0 0 4px rgba(255,255,255,.85); }
/* fit: it fills its box; its stage is drawn at a screen's size and scaled
   to it (chrome.js) */
pr-frame[fit] { position: absolute; inset: 0; pointer-events: none; }
pr-frame[fit] .pr-frame__stage { inset: auto; top: 0; left: 0; width: 1600px; height: 900px; transform-origin: 0 0; }
pr-clock { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { pr-frame .pr-frame__stage > iframe, pr-frame .pr-frame__layer { transition: none; } }