/* Lightweight device illustration: CSS depth and full, uncropped screenshots. */
.phone-stage-lite { height: 600px; perspective: 1100px; }
.device-preview { position: absolute; width: 222px; margin: 0; transform-style: preserve-3d; }
.device-script { left: 28px; top: 16px; --device-angle: -10deg; --device-yaw: 16deg; --device-edge: #514839; --device-radius: 30px; --screen-radius: 18px; }
.device-rehearsal { right: 24px; top: 72px; --device-angle: 8deg; --device-yaw: -16deg; --device-edge: #63796c; --device-radius: 18px; --screen-radius: 6px; }
.device-body {
  position: relative; transform-style: preserve-3d;
  transform: rotateX(calc(3deg + var(--tilt-x, 0deg))) rotateY(calc(var(--device-yaw) + var(--tilt-y, 0deg))) rotateZ(var(--device-angle));
  transition: transform 180ms ease-out;
}
.phone-stage-lite .device-screen {
  position: relative; display: block; width: 100%; padding: 10px;
  border: 2px solid #837865; border-radius: var(--device-radius);
  background: #332c20; cursor: zoom-in; transform-style: preserve-3d;
  box-shadow: inset 0 0 0 1px #514839;
}
.device-screen::before {
  content: ''; position: absolute; inset: -3px; border-radius: inherit;
  background: var(--device-edge); border: 1px solid #837865;
  transform: translateZ(-22px);
  box-shadow: 12px 20px 28px rgb(36 31 23 / .18);
}
.device-screen::after {
  content: ''; position: absolute; width: 3px; height: 36px;
  top: 76px; right: -5px; border-radius: 2px;
  background: var(--device-edge); transform: translateZ(-10px);
}
.device-depth { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; }
.device-depth span {
  position: absolute; inset: -3px; border-radius: var(--device-radius);
  background: var(--device-edge); border: 1px solid #837865;
  transform: translateZ(calc(var(--layer) * -3px));
}
.device-screen img {
  display: block; width: 100%; height: auto; max-width: 100%;
  /* Round only the corners; retain the screenshot's original proportions. */
  border-radius: var(--screen-radius);
}
.device-caption { text-align: center; padding-top: 20px; }
.device-caption span { display: inline-block; color: var(--ob-on-surface-variant); font-size: .8125rem; }
.phone-stage-lite .screen-note { top: calc(100% + 16px); bottom: auto; margin-top: 0; padding-inline: 16px; }
@media (max-width: 1000px) and (min-width: 761px) {
  .phone-stage-lite { height: 540px; }
  .device-preview { width: 190px; }
  .device-script { left: 12px; }
  .device-rehearsal { right: 8px; top: 64px; }
}
@media (max-width: 760px) {
  .phone-stage-lite { height: 520px; }
  .device-preview { width: 194px; }
  .device-script { left: 16px; }
  .device-rehearsal { right: 12px; top: 64px; }
}
@media (max-width: 420px) {
  .phone-stage-lite { height: 436px; }
  .device-preview { width: 160px; }
  .device-script { left: 10px; top: 12px; --device-radius: 26px; --screen-radius: 16px; }
  .device-rehearsal { right: 8px; top: 56px; --device-radius: 16px; }
  .phone-stage-lite .device-screen { padding: 8px; }
  .device-caption { padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .device-body { transition: none; }
}