/* Authentic app screenshots follow the same early-resolved site theme.
   CSS selection works without JavaScript and introduces no layout changes. */
.fwz-screen-light { display: none; }
html[data-theme='light'] .fwz-screen-dark { display: none; }
html[data-theme='light'] .fwz-screen-light { display: block; }
.hero-art .hero-app-display {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}
.hero-art .hero-app-display-mobile { display: none; }
@media (max-width: 900px) {
  .hero-art .hero-app-display-desktop { display: none; }
  .hero-art .hero-app-display-mobile { display: block; }
}

/* Only the app display changes; the original device and its lighting stay still. */
.fwz-preview-frame { opacity: 0; transition: opacity 550ms ease; }
.fwz-preview-frame.is-active { opacity: 1; }
.fwz-preview-slot { min-height: 78px; }
.fwz-preview-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding-block: 6px 16px;
  padding-inline-end: clamp(50px, 12vw, 190px);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
}
.fwz-preview-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(8px);
}
.fwz-preview-controls:has(.fwz-preview-error:not([hidden])) { flex-wrap: wrap; }
.fwz-preview-bar[hidden], .fwz-preview-toggle[hidden] { display: none; }
.fwz-preview-caption { min-width: 0; width: 100px; text-align: end; }
.fwz-preview-selectors { display: flex; flex: none; }
.fwz-preview-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.fwz-preview-bar button:hover { color: var(--text); background: var(--surface); }
.fwz-preview-bar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fwz-preview-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.fwz-preview-bar [aria-pressed='true'] .fwz-preview-dot { opacity: 1; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.fwz-preview-toggle svg { width: 14px; height: 14px; }
.fwz-preview-toggle[data-playing='true'] .fwz-preview-play-icon,
.fwz-preview-toggle[data-playing='false'] .fwz-preview-pause-icon { display: none; }
.fwz-preview-error { margin: 0; max-width: 34ch; color: var(--text); }
@media (max-width: 900px) {
  .fwz-preview-bar { justify-content: center; padding-inline-end: 0; gap: 8px; }
}
@media (max-width: 480px) {
  .fwz-preview-controls { width: 100%; padding-inline: 6px; gap: 4px; border-radius: 14px; }
  .fwz-preview-caption { flex: 1; width: auto; text-align: start; font-size: 12px; }
  .fwz-preview-toggle [data-fwz-toggle-text] { display: none; }
  .fwz-preview-error { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fwz-preview-frame { transition: none; }
}