:root { --dur: 420ms; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto; background: #f6f7fb; }
#progress { position: fixed; inset: 0 0 auto 0; height: 4px; background: #eee; z-index: 30; }
#bar { height: 100%; width: 0%; background: #2b6ef6; transition: width var(--dur) ease; }
#stage { position: fixed; inset: 4px 0 0 0; }
.frame {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  border-radius: 16px; background: white; opacity: 0; transform: translateX(24px);
  transition: opacity var(--dur) ease, transform var(--dur) ease, filter var(--dur) ease;
  filter: saturate(0.96);
  /* Prevent hidden iframe from blocking clicks */
  pointer-events: none;
  /* Default under the visible frame */
  z-index: 0;
}
.frame.visible { opacity: 1; transform: none; filter: saturate(1); pointer-events: auto; z-index: 1; }
.frame.blurred { filter: blur(2px) saturate(0.9); }