/* Moment 13 (demo.js): the 16:9 slot in the live layer, 960 wide on a desk
   and the board less 24 on a phone, radius 28, the app's surface, centred;
   a 56 circle with play_arrow (smaller than the first 64, Pat 2026-11-09
   02:24) and the site's pressable states, the kit's .hb as the homepage's
   .ask-send has them: the active fill at rest; under the pointer the raise
   (the hover fill, the top rim, the shade on a layer that eases), in over
   100 and out over 140; pressed, flat ink with the glyph in surface, at
   once, as the send button and the Next cap press.
   In light the surface on the ground's white centre all but vanished (Pat
   2026-11-09 05:08): the slot takes the step dark gives it, the active
   fill, about 6 L* off the ground as dark's surface is, and the circle the
   step above it, the surface, lifting to the page's white under the
   pointer. Tone only, no shadow: the slot is not pressable. */
.plive .demo {
  --demo-slot: var(--color-active);
  --demo-disc: var(--color-surface);
  --demo-disc-hover: var(--color-page);
}
@media (prefers-color-scheme: dark) {
  .plive .demo {
    --demo-slot: var(--color-surface);
    --demo-disc: var(--color-active);
    --demo-disc-hover: var(--color-hover);
  }
}
.plive .demo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  visibility: hidden;
  pointer-events: none;
}
.plive .demo[data-shown] { visibility: visible; }
.plive .demo-slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 960px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 28px;
  background: var(--demo-slot) center / cover no-repeat;
  pointer-events: auto;
}
.plive.phone .demo-slot { width: calc(100% - 24px); }
.plive .demo-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
.plive .demo-play {
  --hover-motion: 140ms;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--demo-disc);
  color: var(--color-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--hover-motion) ease-out,
    box-shadow var(--hover-motion) ease-out,
    color var(--hover-motion) ease-out;
}
.plive .demo-play[hidden] { display: none; }
/* Not live until the film lands (demo.js LIVE; Pat 2026-11-09 18:47): the
   circle where it will be, at the site's disabled 0.4 (research.css
   .action-button:disabled), no pointer, no hover or press. */
.plive .demo-play:disabled { opacity: 0.4; cursor: default; }
.plive .demo-play::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background-image: var(--raise-shade);
  transition: opacity var(--hover-motion) ease-out;
}
/* play_arrow carries its own optical nudge right in the glyph's box. */
.plive .demo-play .glyph { --glyph-size: 28px; color: inherit; }
@media (hover: hover) {
  .plive .demo-play:hover:not(:active, :disabled) {
    --hover-motion: 100ms;
    background-color: var(--demo-disc-hover);
    box-shadow: inset 0 1px 0 var(--raise-rim);
  }
  .plive .demo-play:hover:not(:active, :disabled)::before { opacity: 1; }
}
.plive .demo-play:active:not(:disabled) {
  background-color: var(--color-ink);
  color: var(--color-surface);
  box-shadow: none;
  transition: none;
}
.plive .demo-play:active:not(:disabled)::before { opacity: 0; transition: none; }
.plive .demo-play:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }