/* Filmstrip export view (shared by the lab and the dashboard). The scene is
   600×400 design px, scaled by its parent. --fs-bg must match the stage. */
.fs-scene { --fs-bg: #f5f5f7; --fs-film: #1d1d1f; }
.fs-view { position: absolute; inset: 0; perspective: 900px; perspective-origin: 300px 196px; transition: none; }
.fs-rail { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(5deg); transform-origin: 300px 196px; }
.fs-tile {
  position: absolute; left: 0; top: 0; border-radius: 2px; backface-visibility: hidden;
  background: linear-gradient(180deg, #2a2a2c 0%, var(--fs-film) 18%, var(--fs-film) 82%, #2a2a2c 100%);
  will-change: transform;
}
.fs-perf { position: absolute; left: 0; right: 0; height: 9px; display: flex; justify-content: space-around; padding: 0 3px; }
.fs-perf i { width: 9px; height: 8px; border-radius: 2px; background: var(--fs-bg); box-shadow: inset 0 1px 1.5px rgba(0, 0, 0, 0.35); }
.fs-edge { position: absolute; left: 14px; top: 17.5px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 6.5px; line-height: 8px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.42); }
.fs-edge b { font-weight: 400; margin-left: 4px; }
.fs-img { position: absolute; border-radius: 2px; }
.fs-grain { position: absolute; border-radius: 2px; background-size: 64px 64px; mix-blend-mode: overlay; opacity: 0.16; pointer-events: none; }
.fs-sheen { position: absolute; border-radius: 2px; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.6) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat; }
.fs-light { position: absolute; width: 240px; height: 180px; pointer-events: none; mix-blend-mode: screen; opacity: 0; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.28) 45%, rgba(255, 255, 255, 0) 100%); }
.fs-gate { position: absolute; pointer-events: none; border: 1px dashed #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 10px 1px rgba(255, 255, 255, 0.3); }
.fs-gate i { position: absolute; width: var(--hs, 7px); height: var(--hs, 7px); margin: calc(var(--hs, 7px) / -2 - 0.75px) 0 0 calc(var(--hs, 7px) / -2 - 0.75px); border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3); }
.fs-shadow { position: absolute; pointer-events: none; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)); }
.fs-fx { position: absolute; left: 0; top: 0; width: 600px; height: 400px; pointer-events: none; }
.fs-hero { position: absolute; left: 0; top: 0; border-radius: 4px; overflow: hidden; opacity: 0; pointer-events: none; }
.fs-hero canvas { display: block; width: 100%; height: 100%; }
.fs-check { position: absolute; left: 0; top: 0; width: 40px; height: 40px; opacity: 0; pointer-events: none; }
.fs-check svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25)); }
.fs-wait { position: absolute; left: 0; right: 0; text-align: center; font-size: 12px; color: rgba(60, 60, 67, 0.72); opacity: 0; transition: opacity 400ms cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.fs-root { position: absolute; left: 0; top: 0; width: 600px; height: 400px; transform-origin: 300px 196px; }
.fs-blank { position: absolute; border-radius: 2px; background: radial-gradient(closest-side, #3a3a3c, #2c2c2e); display: grid; place-items: center; overflow: hidden; }
.fs-blank span { width: 56%; aspect-ratio: 1; max-height: 80%; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.28), 0 0 0 6px rgba(255, 255, 255, 0.04); font-family: "Geist Mono", ui-monospace, monospace; font-size: 34px; font-weight: 300; color: rgba(255, 255, 255, 0.55); }