/* One continuous grade covers every scene. The vector finale follows the same theme. */
#introSplash {
  position: fixed; inset: 0; z-index: 10000; overflow: hidden;
  display: grid; place-items: center; background: var(--canvas, #F7F8FA); color:var(--text, #1B1D22);
  --intro-grade: brightness(1.02) contrast(.98) saturate(.96);
}
:root[data-theme="dark"] #introSplash { --intro-grade: brightness(.82) contrast(1.04) saturate(.92); }
#introSplash[hidden], #introSplash [hidden] { display: none !important; }
#introSplash video { display: block; width: 100%; height: 100%; object-fit: contain; filter:var(--intro-grade); }
#introSplash .intro-endcard { position:absolute; inset:0; display:grid; place-items:center; background:var(--canvas); color:var(--text); opacity:0; pointer-events:none; }
#introSplash .intro-endcard svg { display:block; width:min(72%,720px); height:auto; }
#introSplash .intro-title {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
#introSkip {
  position: absolute; top: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 16px);
  right: calc(var(--safe-right, env(safe-area-inset-right, 0px)) + 16px); min-height: 48px; min-width: 110px;
  padding: 11px 20px; border: 1px solid var(--border-bright, #DCE0E6);
  border-radius: 999px; background: var(--surface, #FFFFFF); color: var(--text, #1B1D22);
  font: 600 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer; box-shadow: 0 4px 24px #0003;
}
#introSkip:hover { border-color: var(--accent, #38bdf8); }
#introSplash .intro-appearance { position:absolute; top:calc(var(--safe-top, env(safe-area-inset-top,0px)) + 16px); left:calc(var(--safe-left, env(safe-area-inset-left,0px)) + 16px); display:flex; align-items:center; gap:10px; min-height:48px; padding:4px 8px 4px 14px; border:1px solid var(--border-bright); border-radius:12px; background:var(--surface); color:var(--text-dim); font:500 13px/1.4 -apple-system,BlinkMacSystemFont,sans-serif; }
#introAppearance { max-width:135px; min-height:40px; padding:6px 10px; border:0; border-radius:8px; background:var(--input); color:var(--text); font:500 14px/1.4 -apple-system,BlinkMacSystemFont,sans-serif; }
@media(max-width:560px) { #introSplash .intro-appearance { padding:4px; } #introSplash .intro-appearance>span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); } #introAppearance { max-width:120px; font-size:16px; } #introSkip { min-width:0; max-width:calc(100vw - var(--safe-left,0px) - var(--safe-right,0px) - 168px); padding:10px 14px; font-size:13px; } }
#introSplash .intro-play-prompt {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  padding: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 84px)
    calc(var(--safe-right, env(safe-area-inset-right, 0px)) + 24px)
    calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 24px)
    calc(var(--safe-left, env(safe-area-inset-left, 0px)) + 24px);
}
#introPlay {
  pointer-events: auto; min-height: 52px; max-width: 100%; padding: 13px 26px;
  border: 1px solid var(--border-bright); border-radius: 999px; background: var(--surface); color: var(--text);
  font: 600 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer; box-shadow: 0 8px 28px #0004;
}
#introSkip:focus-visible, #introPlay:focus-visible, #introAppearance:focus-visible { outline: 3px solid var(--accent, #38bdf8); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) { #introSplash { display: none !important; } }

@media(max-width:560px) and (orientation:portrait) { #introSplash video { object-fit:cover; } }