.widget-demo {
  --color-scrim: oklch(0% 0 0);
  --color-sheen: oklch(100% 0 0);
  --color-transparent: oklch(27.46% 0.1088 292.08 / 0);
  --color-widget-glow: rgb(77 38 117 / 0.22);
  --color-widget-ink: rgb(245 242 255);
  --color-widget-rose: rgb(92 36 94);
  --color-widget-rose-core: rgb(64 24 69);
  --color-widget-rose-deep: rgb(31 12 32);
  --color-widget-rose-dusk: rgb(50 19 52);
  --color-widget-rose-ink: rgb(39 15 40);
  --color-widget-shade: rgb(16 11 25);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --rule-hair: 1px;
}
.widget-demo {
  --pt: calc(100cqw / 176);
  --reach: 1;
  
  --ease-settle: linear(0, 0.1009, 0.2986, 0.5, 0.6677, 0.7927, 0.8787, 0.9342, 0.9678, 0.9868, 0.9967, 1.0012, 1.0028, 1.0029, 1.0025, 1.0019, 1);
  --dur-settle: 600ms;
  
  --ease-descent: cubic-bezier(0.55, 0.05, 0.8, 0.45);
  --dur-descent: 460ms;
  
  --dur-quick: 120ms;
  --dur-crossfade: 250ms;

  position: absolute;
  left: 7.0455%;
  top: 9.8326%;
  width: 40.1515%;
  aspect-ratio: 1;
  container-type: inline-size;
}


.widget-demo:focus {
  outline: none;
}

@supports not (transition-timing-function: linear(0, 1)) {
  .widget-demo {
    --ease-settle: var(--ease-out);
  }
}

.widget-demo__tile {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(31.7 * var(--pt));
  background:
    radial-gradient(
      circle at 50% 26%,
      var(--color-widget-glow) calc(18 * var(--pt)),
      var(--color-transparent) calc(154.3 * var(--pt))
    ),
    linear-gradient(
      to bottom,
      var(--color-widget-rose) 0%,
      var(--color-widget-rose-core) 35%,
      var(--color-widget-rose-dusk) 62%,
      var(--color-widget-rose-ink) 82%,
      var(--color-widget-rose-deep) 100%
    );
  transition: scale var(--dur-settle) var(--ease-settle);
}

.widget-demo__tile::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 var(--rule-hair) color-mix(in srgb, var(--color-widget-ink) 8%, var(--color-transparent));
  content: "";
  pointer-events: none;
}


.widget-demo[data-receiving] .widget-demo__tile {
  scale: 0.97;
  transition: scale var(--dur-quick) ease-out;
}



.widget-demo__idle {
  position: absolute;
  inset: 0;
  transition: opacity var(--dur-crossfade) ease-in-out;
}

.widget-demo:not([data-face="idle"]) .widget-demo__idle {
  opacity: 0;
}

.widget-demo__avatar {
  position: absolute;
  left: calc(52 * var(--pt));
  top: calc(33.5 * var(--pt));
  width: calc(72 * var(--pt));
  height: calc(72 * var(--pt));
  border-radius: 50%;
  object-fit: cover;
}

.widget-demo__name {
  position: absolute;
  inset-inline: 0;
  top: calc(120.5 * var(--pt));
  color: color-mix(in srgb, var(--color-widget-ink) 95%, var(--color-transparent));
  font-family: var(--font-body);
  font-size: calc(14 * var(--pt));
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.widget-demo__mark {
  position: absolute;
  top: calc(24 * var(--pt));
  right: calc(24 * var(--pt));
  width: calc(22 * var(--pt));
  height: calc(22 * var(--pt));
  background: color-mix(in srgb, var(--color-widget-ink) 60%, var(--color-transparent));
  -webkit-mask: url("assets/whisper-mark.svg") center / contain no-repeat;
  mask: url("assets/whisper-mark.svg") center / contain no-repeat;
}


.widget-demo__locket {
  position: absolute;
  inset: 0;
  opacity: 0;
  scale: 0.84;
  visibility: hidden;
  transition:
    opacity var(--dur-crossfade) ease-in-out,
    scale 0s linear var(--dur-crossfade),
    visibility 0s linear var(--dur-crossfade);
}

.widget-demo:not([data-face="idle"]) .widget-demo__locket {
  opacity: 1;
  scale: 1;
  visibility: visible;
  transition:
    opacity var(--dur-settle) var(--ease-settle),
    scale var(--dur-settle) var(--ease-settle),
    visibility 0s;
}

.widget-demo__media > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.widget-demo[data-media="photo"] .widget-demo__photo,
.widget-demo[data-media="voice"] .widget-demo__voice {
  display: block;
}


.widget-demo__media > .widget-demo__video {
  display: block;
  visibility: hidden;
}

.widget-demo[data-media="video"] .widget-demo__video {
  visibility: visible;
}


.widget-demo__photo,
.widget-demo__video {
  background: var(--color-scrim);
  object-fit: contain;
}

.widget-demo__badge {
  position: absolute;
  left: calc(10 * var(--pt));
  top: calc(140 * var(--pt));
  width: calc(26 * var(--pt));
  height: calc(26 * var(--pt));
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-sheen) 20%, var(--color-transparent));
  box-shadow: 0 0 0 calc(0.5 * var(--pt)) color-mix(in srgb, var(--color-widget-ink) 50%, var(--color-transparent));
  object-fit: cover;
}

.widget-demo__control {
  position: absolute;
  top: calc(129 * var(--pt));
  width: calc(48 * var(--pt));
  height: calc(48 * var(--pt));
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-transparent);
  color: color-mix(in srgb, var(--color-sheen) 95%, var(--color-transparent));
  cursor: pointer;
}


.widget-demo__control svg {
  width: calc(22.4 * var(--pt));
  height: calc(22.4 * var(--pt));
  fill: currentColor;
  filter: drop-shadow(0 0 calc(1.5 * var(--pt)) color-mix(in srgb, var(--color-scrim) 50%, var(--color-transparent)));
}

.widget-demo__control--centre {
  left: calc(64 * var(--pt));
  display: none;
}

.widget-demo__control--centre svg {
  width: calc(26.2 * var(--pt));
  height: calc(26.2 * var(--pt));
}

.widget-demo__control--corner {
  left: calc(130 * var(--pt));
}

.widget-demo__control--corner svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2.5;
}


.widget-demo__control--dimmed {
  color: color-mix(in srgb, var(--color-sheen) 21%, var(--color-transparent));
  cursor: default;
}

.widget-demo[data-media="voice"] [data-demo-voice-play],
.widget-demo[data-media="video"] [data-demo-play],
.widget-demo[data-media="video"] [data-demo-pause] {
  display: grid;
}


.widget-demo__packet {
  --dx: -140;
  --dy: -112;
  --s: 0.56;
  --rot: -10deg;
  --tilt: 0deg;
  --o: 0;
  --badge: 1;

  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 calc(13 * var(--pt)) calc(18 * var(--pt)) color-mix(in srgb, var(--color-widget-shade) 34%, var(--color-transparent)));
}

.widget-demo__packet[data-stage="presented"] {
  --dx: -122;
  --dy: -76;
  --s: 0.6;
  --rot: -3deg;
  --tilt: 9deg;
  --o: 1;
}

.widget-demo__packet[data-stage="descending"] {
  --dx: -14;
  --dy: -10;
  --s: 0.18;
  --rot: 0deg;
  --o: 1;
  --badge: 0;
}

.widget-demo__packet[data-stage="absorbed"] {
  --dx: 0;
  --dy: 0;
  --s: 0.035;
  --rot: 0deg;
  --o: 0;
  --badge: 0;
  filter: drop-shadow(0 calc(2 * var(--pt)) calc(6 * var(--pt)) color-mix(in srgb, var(--color-widget-shade) 6%, var(--color-transparent)));
}

.widget-demo__packet-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(30 * var(--pt));
  background: var(--color-scrim);
  opacity: var(--o);
  transform:
    translate(calc(var(--dx) * var(--reach) * var(--pt)), calc(var(--dy) * var(--pt)))
    perspective(calc(320 * var(--pt)))
    rotate3d(0.12, 1, 0, var(--tilt))
    rotate(var(--rot))
    scale(var(--s));
}

.widget-demo__packet-card::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 calc(1 * var(--pt)) color-mix(in srgb, var(--color-widget-ink) 34%, var(--color-transparent));
  content: "";
}

.widget-demo__packet-play,
.widget-demo__packet-kind {
  opacity: var(--badge);
}


.widget-demo__packet[data-stage="presented"] :is(.widget-demo__packet-card, .widget-demo__packet-play, .widget-demo__packet-kind) {
  transition:
    transform var(--dur-settle) var(--ease-settle),
    opacity var(--dur-settle) var(--ease-settle);
}

.widget-demo__packet[data-stage="descending"] :is(.widget-demo__packet-card, .widget-demo__packet-play, .widget-demo__packet-kind) {
  transition:
    transform var(--dur-descent) var(--ease-descent),
    opacity var(--dur-descent) var(--ease-descent);
}

.widget-demo__packet[data-stage="absorbed"] :is(.widget-demo__packet-card, .widget-demo__packet-play, .widget-demo__packet-kind) {
  transition:
    transform var(--dur-quick) ease-out,
    opacity var(--dur-quick) ease-out;
}

.widget-demo__packet-card > img,
.widget-demo__packet-voice {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  object-fit: contain;
}

.widget-demo__packet[data-media="photo"] .widget-demo__packet-photo,
.widget-demo__packet[data-media="video"] .widget-demo__packet-poster {
  display: block;
}

.widget-demo__packet[data-media="voice"] .widget-demo__packet-voice {
  display: flex;
}


.widget-demo__packet-play {
  position: absolute;
  left: calc(66 * var(--pt));
  top: calc(66 * var(--pt));
  width: calc(44 * var(--pt));
  height: calc(44 * var(--pt));
  display: none;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-widget-ink) 62%, var(--color-transparent));
  color: var(--color-widget-shade);
}

.widget-demo__packet[data-media="video"] .widget-demo__packet-play {
  display: grid;
}

.widget-demo__packet-play svg {
  width: calc(17 * var(--pt));
  height: calc(17 * var(--pt));
  translate: calc(1 * var(--pt)) 0;
  fill: currentColor;
}


/* Match the widget slot in the 1320 × 2868 Home Screen capture. */
.widget-demo { --reach: .35; --ease-out: ease-out; --rule-hair: 1px; }
.widget-demo__tile { box-shadow: none; }
.widget-demo [hidden] { display: none !important; }
.widget-demo__control:focus-visible { outline: 3px solid white; outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) {
  .widget-demo *, .widget-demo *::after { transition: none !important; }
}

/* Keep the scaled video controls usable by touch. */
.widget-demo__control { width: 44px; height: 44px; top: auto; bottom: -4px; }
.widget-demo__control--centre { left: 50%; transform: translateX(-50%); }
.widget-demo__control--corner { left: auto; right: -6px; }