/* Reference geometry: 300 x 600 frame; 260 x 564 video at (20, 18). */
.phone-demo { position: relative; width: 280px; max-width: 92%; aspect-ratio: 1 / 2; flex: none; filter: drop-shadow(0 20px 22px rgba(94,75,29,.17)); }
.phone-demo-screen { position: absolute; left: 6.666667%; top: 3%; width: 86.666667%; height: 94%; overflow: hidden; background: #fff; border-radius: 10% / 5%; }
.phone-demo-screen video { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.phone-demo-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; }
.phone-demo-control { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); padding: 5px 12px; border: 1px solid #e5ddca; border-radius: 999px; background: #fffdf8; color: #7d725d; font: 11px/1.5 "Microsoft YaHei",sans-serif; white-space: nowrap; cursor: pointer; opacity: 0; transition: opacity .2s; }
.phone-demo:hover .phone-demo-control, .phone-demo:focus-within .phone-demo-control, .phone-demo.is-paused .phone-demo-control { opacity: 1; }
.phone-demo-control[hidden] { display: none; }
@media (max-width: 650px) {
  .phone-demo { width: 250px; }
  .download-visual { min-height: 555px; }
}
@media (hover: none) { .phone-demo-control { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .phone-demo-control { transition: none; } }