/* A curved film wall with a compact, translucent comparison. */
.teaser-section { padding: 12px 0 38px; }
.film-wall { position: relative; isolation: isolate; width: min(1360px, calc(100% - 48px)); height: clamp(580px, 46vw, 680px); margin-inline: auto; overflow: hidden; border: 1px solid #25282b; border-radius: 7px; background: #000; color: #fff; contain: layout paint; }
.film-atmosphere { position: absolute; z-index: 0; inset: 0; pointer-events: none; overflow: hidden; }
.film-stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.film-intro { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 28px; padding: 24px; pointer-events: none; visibility: hidden; opacity: 0; color: #fff; text-align: center; background: radial-gradient(ellipse at center, #0004, transparent 70%); }
.film-intro-title { font-family: "Comic Sans MS", cursive; font-size: clamp(62px, 9vw, 128px); line-height: 1.15; letter-spacing: -.035em; text-shadow: 0 2px 30px #0005; }
.film-intro-stats { display: flex; align-items: flex-start; justify-content: center; gap: clamp(30px, 5vw, 76px); font-family: "Google Sans", sans-serif; }
.film-intro-stats strong { display: block; font-size: clamp(24px, 3.1vw, 40px); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.film-intro-stats span { display: block; margin-top: 7px; color: #ffffffbd; font-size: clamp(13px, 1.5vw, 18px); }
.film-field { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px; }
.film-wall.is-introducing .film-intro { visibility: visible; opacity: calc(1 - var(--film-reveal, 0)); transform: translateY(calc(-12px * var(--film-reveal, 0))); }
.film-wall.is-introducing .film-field { filter: blur(calc(6px * (1 - var(--film-reveal, 0)))); opacity: calc(.34 + .66 * var(--film-reveal, 0)); }
.film-wall.is-ready .film-field { position: absolute; inset: 0; display: block; }
.film-frame { position: relative; display: block; overflow: hidden; border: 1px solid #666; border-radius: 18px; padding: 11px 3px; background: #101010; }
.film-frame::before, .film-frame::after { content: ""; position: absolute; z-index: 2; left: 9px; right: 9px; height: 5px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='5'%3E%3Crect width='9' height='5' rx='1' fill='%23dbe0e3'/%3E%3C/svg%3E") repeat-x center; pointer-events: none; }
.film-frame::before { top: 3px; }
.film-frame::after { bottom: 3px; }
.film-frame video { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.film-poster { position: absolute; inset: 11px 3px; width: calc(100% - 6px); height: calc(100% - 22px); object-fit: cover; border-radius: 8px; pointer-events: none; }
.film-tile video { position: relative; }
.film-wall.is-ready .film-tile video { opacity: 0; }
.film-wall.is-ready .film-tile.has-video-frame video { opacity: 1; }
.film-tile { aspect-ratio: 1.62; cursor: pointer; color: inherit; opacity: .93; }
.film-wall.is-ready .film-tile { position: absolute; top: 0; left: 0; will-change: transform; }
.film-tile:focus-visible { outline: 2px solid #ddd; outline-offset: 3px; }
.film-tile.is-selected { opacity: 0; pointer-events: none; }
.film-shade { position: absolute; z-index: 2; inset: 0; pointer-events: none; background: #000; opacity: 0; transition: opacity 240ms ease; }
.film-wall.is-inspecting .film-shade { opacity: .5; }
/* One local comparison sheet; it neither opens a modal nor locks page scrolling. */
.film-spotlight { position: absolute; z-index: 3; display: flex; align-items: flex-start; gap: 18px; padding: 16px; overflow: auto; overscroll-behavior: contain; border: 1px solid #ffffff38; border-radius: 16px; background: rgb(8 8 8 / 84%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #e7e7e7; box-shadow: 0 18px 55px #0008; font-family: "Google Sans", sans-serif; scrollbar-width: thin; scrollbar-color: #666 #171717; }
.film-spotlight[hidden] { display: none; }
.film-hero { flex: none; margin: 0; min-width: 0; max-width: 100%; }
.film-hero .film-frame { width: 100%; border-color: #ffffff80; box-shadow: 0 0 0 1px #ffffff0d; border-radius: 12px; }
.film-hero .film-frame video { object-fit: contain; }
.film-source { display: block; margin: 0 28px 10px 0; color: #ccc; font-size: 12px; font-weight: 600; letter-spacing: .075em; text-transform: uppercase; }
.film-groundtruth { margin-top: 12px; padding: 0 0 0 10px; border-left: 2px solid #ffffff45; }
.film-groundtruth h4 { margin: 0 0 6px; color: #c5c5c5; font-size: 12px; font-weight: 600; }
.film-results { flex: none; min-width: 0; max-width: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #666 #171717; padding: 12px 2px 0 0; }
.film-predictions { display: grid; }
.film-prediction { padding: 10px; border-bottom: 1px solid #ffffff1f; }
.film-prediction:last-child { border-bottom: 0; padding-bottom: 0; }
.film-prediction.ours { border: 1px solid #ffffff40; background: #ffffff09; padding: 9px; border-radius: 7px; }
.film-prediction h4 { margin: 0 18px 5px 0; color: #d2d2d2; font-size: 13px; line-height: 1.3; font-weight: 600; }
.film-prediction.ours h4 { color: #fff; }
.film-result-lines p { display: flex; gap: 8px; margin: 3px 0 0; color: #dedede; font-size: 13px; line-height: 1.4; }
.film-result-lines p b { flex: none; width: 20px; padding-top: 2px; color: #a0a0a0; font-size: 10px; font-weight: 600; }
.film-result-lines p span { overflow-wrap: anywhere; }
.film-groundtruth .film-result-lines p { font-size: 13px; }
.film-close { position: absolute; z-index: 4; top: 4px; right: 5px; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #aaa; background: transparent; font-size: 22px; cursor: pointer; }
.film-close:hover { background: #ffffff16; color: #fff; }
@media (max-width: 700px) {
  .teaser-section { padding-bottom: 28px; }
  .film-wall { width: calc(100% - 24px); height: 740px; border-radius: 5px; }
  .film-intro { gap: 24px; padding: 16px; }
  .film-intro-stats { gap: clamp(20px, 5vw, 34px); }
  .film-spotlight { flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; }
  .film-source { font-size: 12px; margin-bottom: 8px; }
  .film-groundtruth { margin-top: 12px; padding-left: 9px; }
  .film-results { overflow: visible; padding: 0; }
  .film-prediction { padding: 9px 10px; }
  .film-prediction.ours { padding: 8px 9px; }
  .film-result-lines p, .film-groundtruth .film-result-lines p { font-size: 12px; line-height: 1.4; }
  .film-prediction h4, .film-groundtruth h4 { font-size: 12px; margin-bottom: 5px; }
  .film-result-lines p { gap: 6px; margin-top: 3px; }
  .film-result-lines p b { width: 20px; font-size: 9px; }
}
@media (max-width: 480px) {
  .site-nav { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .site-nav .nav-links { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .film-wall.is-ready .film-tile { will-change: auto; }
  .film-shade { transition: none; }
}