/* Keep the exact outer dimensions of the previous padded 16:9 video. */
.zf-phone-slot { position: relative; width: 100%; padding: 4px; border: 1px solid transparent; }
.zf-phone-slot::before { content: ''; display: block; aspect-ratio: 16 / 9; }
.zf-phone { position: absolute; left: 50%; top: 50%; height: min(440px, calc(100% + 76px)); aspect-ratio: 644 / 1336; transform: translate(-50%, -50%); filter: drop-shadow(0 20px 28px #0005); border-radius: 12% / 6%; outline: none; }
.zf-phone:focus-visible { outline: 3px solid #66e0b0; outline-offset: 6px; }
.zf-phone-screen { position: absolute; inset: 1% 3.1% 1.1%; overflow: hidden; border-radius: 10% / 4.8%; background: #050a22; }
.zf-phone-content { display: block; width: 100%; max-width: none; height: auto; transform: translate3d(0,0,0); transition: transform 480ms cubic-bezier(0.23,1,0.32,1); }
.zf-phone-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.zf-phone-glow {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
  fill: none; stroke: #65c7ff; stroke-width: 1.4; stroke-linecap: round;
}
.zf-phone-glow use {
  stroke-dasharray: 22 100;
  stroke-dashoffset: var(--phone-glow-offset, 0);
  transition: stroke-dashoffset 480ms cubic-bezier(0.23,1,0.32,1);
}
.zf-phone-glow .zf-phone-glow-halo {
  stroke-width: 5;
  filter: blur(5px);
  opacity: .56;
}
.zf-phone-glow .zf-phone-glow-core {
  stroke-width: 2.5;
  stroke-dasharray: 16 100;
  stroke-dashoffset: calc(var(--phone-glow-offset, 0) - 3);
  filter: blur(2px);
  opacity: .85;
}
.zf-phone-guide { position: absolute; top: calc(100% + 48px); left: 50%; width: max-content; max-width: calc(100vw - 32px); transform: translateX(-50%); text-align: center; color: #c1cde2; }
.zf-phone-guide p { margin: 0 0 6px; font-size: 13px; }
.zf-phone-controls { display: flex; gap: 10px; justify-content: center; align-items: center; }
.zf-phone-controls button { min-height: 32px; padding: 4px 8px; border: 0; border-radius: 6px; background: transparent; color: #a8d8ff; font: inherit; font-size: 12px; cursor: pointer; }
.zf-phone-controls button:disabled { opacity: .45; cursor: default; }
.zf-phone-count { font-size: 12px; min-width: 34px; font-variant-numeric: tabular-nums; }
.zf-phone-controls button:focus-visible { outline: 2px solid #66e0b0; outline-offset: 2px; }
html[data-theme="emerald"] .zf-phone-guide { color: #253b50; }
html[data-theme="emerald"] .zf-phone-controls button { color: #14588c; }
@media (max-width: 1023px) { .zf-phone { height: calc(100% + 60px); max-height: 390px; } .zf-phone-guide { top: calc(100% + 36px); } }
@media (prefers-reduced-motion: reduce) { .zf-phone-content, .zf-phone-glow use { transition: none; } }