/* The dark viewing surface keeps the original film's lighting in both themes, so it stays
   dark on the light page. It is framed as an inset plate rather than a full-bleed band so it
   reads as a figure the page contains, not a section competing with the ones around it.
   In dark mode it sits a step above the page ground and needs no separate treatment. */
.vision { --vision-bg:#111318; --vision-text:#f3f4f6; --vision-muted:#a8afbb; --vision-accent:#9ba9ff; margin:2.5rem 0 3rem; }
.vision-panel { background:var(--vision-bg); color:var(--vision-text); padding:clamp(1.25rem,4vw,2rem); border-radius:0; overflow:hidden; }
.vision-heading { margin:0; font:500 1.15rem/1.3 var(--font-display); letter-spacing:-.01em; }
.vision-intro { color:var(--vision-muted); font-size:.9rem; margin:.6rem 0 0; max-width:48ch; }
.vision-view { position:relative; width:min(100%,440px); margin:0 auto; aspect-ratio:16/15; }
.vision-view video, .vision-view img { display:block; width:100%; height:100%; object-fit:contain; }
.vision-view img { position:absolute; inset:0; pointer-events:none; }
.vision [hidden] { display:none !important; }
.vision-stages { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; margin:.5rem 0 1rem; }
.vision button { font:inherit; cursor:pointer; border-radius:0; }
.vision-stage { border:0; border-top:2px solid var(--vision-muted); background:var(--vision-bg); color:var(--vision-muted); text-align:left; align-content:start; padding:.65rem 0; min-height:60px; font-size:.8rem !important; line-height:1.35; }
.vision-stage b { display:block; font-size:1rem; font-weight:600; margin-bottom:.2rem; }
.vision-stage[aria-pressed="true"] { border-top:4px solid var(--vision-accent); padding-top:calc(.65rem - 2px); color:var(--vision-text); }
.vision-detail { min-height:4.5em; font-size:.9rem; line-height:1.5; color:var(--vision-muted); margin:0; }
.vision-controls { display:flex; align-items:center; gap:1rem; border-top:1px solid var(--vision-muted); padding-top:1rem; }
.vision-play { min-height:44px; padding:.5rem 1rem; background:var(--vision-bg); color:var(--vision-text); border:1px solid var(--vision-muted); min-width:142px; }
.vision-time { font-size:.75rem; color:var(--vision-muted); font-variant-numeric:tabular-nums; }
.vision :focus-visible { outline:3px solid var(--vision-accent); outline-offset:4px; }
.vision figcaption { margin-top:.85rem; font-size:.75rem; color:var(--muted); line-height:1.6; }
.vision figcaption a { color:inherit; text-decoration:underline; text-underline-offset:.18em; }
@media (hover:hover) and (pointer:fine) { .vision button:hover { color:var(--vision-accent); } }
@media (max-width:420px) { .vision-panel { padding:1rem; } .vision-stages { gap:.4rem; } .vision-stage { font-size:.7rem !important; } .vision-detail { min-height:6em; } }
@media (forced-colors:active) { .vision-stage[aria-pressed="true"] { border-color:Highlight; } .vision :focus-visible { outline-color:Highlight; } }