/* The reference reset clears the native dialog's auto margins. Restore
   viewport centering explicitly, independent of the active scene or scroll. */
#echo-film{
 --film-inset-top:max(20px,env(safe-area-inset-top,0px));
 --film-inset-bottom:max(20px,env(safe-area-inset-bottom,0px));
 --film-inset-left:max(24px,env(safe-area-inset-left,0px));
 --film-inset-right:max(24px,env(safe-area-inset-right,0px));
 --film-chrome-height:100px;
 position:fixed;
 inset:var(--film-inset-top) var(--film-inset-right) var(--film-inset-bottom) var(--film-inset-left);
 margin:auto;
 box-sizing:border-box;
 width:min(1100px,calc(100vw - var(--film-inset-left) - var(--film-inset-right)));
 height:fit-content;
 max-width:none;
 max-height:calc(100dvh - var(--film-inset-top) - var(--film-inset-bottom));
 padding:20px 24px 24px;
 border:0;
 background:#070c16;
 color:#f2f6ff;
 overflow:hidden;
 overscroll-behavior:contain;
 scrollbar-width:thin;
 scrollbar-color:#7c91ad #070c16;
 box-shadow:0 24px 72px #0009;
}
#echo-film[open]{display:flex;flex-direction:column}
#echo-film:not([open]){display:none}
#echo-film::backdrop{background:#02050bea;backdrop-filter:blur(12px)}
#echo-film .EchoFilmTop{min-height:44px;gap:24px;margin:0 0 12px;flex-shrink:0}
#echo-film .EchoFilmTop h2{font:400 16px/1.5 EchoLatin,'Microsoft YaHei',sans-serif}
#echo-film [data-close-film]{min-width:64px;min-height:44px;padding:10px 0 10px 14px;gap:10px;flex-shrink:0;cursor:pointer}
#echo-film [data-close-film] svg{width:20px;height:20px;flex-shrink:0}
#echo-film [data-close-film]:hover{color:#b9d7ff}
#echo-film [data-close-film]:focus-visible,#echo-film a:focus-visible{outline:2px solid #b9d7ff;outline-offset:4px}
#echo-film video{display:block;width:100%;height:auto;min-height:0;max-height:calc(100dvh - var(--film-inset-top) - var(--film-inset-bottom) - var(--film-chrome-height));aspect-ratio:16/9;object-fit:contain;background:#000;flex:0 1 auto}
#echo-film .EchoFilmError{margin:16px 0 0;font-size:14px;line-height:1.8;max-height:20dvh;overflow:auto;flex-shrink:0;overscroll-behavior:contain}
#echo-film .EchoFilmError a{text-underline-offset:.2em}
@media(max-width:650px){
 #echo-film{--film-inset-top:max(12px,env(safe-area-inset-top,0px));--film-inset-bottom:max(12px,env(safe-area-inset-bottom,0px));--film-inset-left:max(12px,env(safe-area-inset-left,0px));--film-inset-right:max(12px,env(safe-area-inset-right,0px));--film-chrome-height:74px;padding:10px 12px 12px}
 #echo-film .EchoFilmTop{gap:16px;margin-bottom:8px}
 #echo-film .EchoFilmTop h2{font-size:14px}
}
@media(max-height:500px) and (orientation:landscape){
 #echo-film{--film-inset-top:max(8px,env(safe-area-inset-top,0px));--film-inset-bottom:max(8px,env(safe-area-inset-bottom,0px));--film-chrome-height:64px;padding:6px 12px 10px}
 #echo-film .EchoFilmTop{margin-bottom:4px;gap:16px}
 #echo-film .EchoFilmTop h2{font-size:14px}
 #echo-film .EchoFilmError{margin-top:8px;font-size:12px;line-height:1.6}
}