.comparison-film { margin:30px 0 38px; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.comparison-film-heading { padding:24px; }
.comparison-film-heading h2 { margin:0 0 10px; font-size:clamp(22px,3vw,32px); font-weight:500; line-height:1.25; letter-spacing:-.025em; }
.comparison-film-heading p { max-width:1000px; margin:0; color:var(--muted); font-size:14px; line-height:1.7; }
.comparison-film-viewport { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#091117; }
.comparison-film-poster,.comparison-film-player { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; }
.comparison-film-poster { opacity:1; }
.comparison-film-player { opacity:0; }
.comparison-film[data-video-frame="true"] .comparison-film-player { opacity:1; }
.comparison-film[data-video-frame="true"] .comparison-film-poster { opacity:0; }
.comparison-film-controls { display:flex; align-items:center; gap:16px; min-height:68px; padding:10px 24px; border-top:1px solid var(--line); }
.comparison-film-control { flex-shrink:0; min-width:90px; min-height:44px; padding:9px 16px; border:1px solid #4b8492; border-radius:5px; background:#12313b; color:#b8f5ff; font:inherit; font-size:14px; }
.comparison-film-control:disabled { min-width:0; border-color:transparent; background:transparent; color:var(--muted); padding-inline:0; cursor:default; }
.comparison-film-progress { appearance:none; flex:1; min-width:24px; height:5px; border:0; border-radius:4px; overflow:hidden; background:#334c5a; accent-color:var(--cyan); }
.comparison-film-progress::-webkit-progress-bar { background:#334c5a; border-radius:4px; }
.comparison-film-progress::-webkit-progress-value { background:var(--cyan); border-radius:4px; }
.comparison-film-progress::-moz-progress-bar { background:var(--cyan); border-radius:4px; }
.comparison-film-time { flex-shrink:0; color:var(--muted); font:12px/1.5 ui-monospace,"SF Mono",Consolas,monospace; font-variant-numeric:tabular-nums; }
.comparison-film-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.comparison-film-fallback { margin:0; padding:14px 24px; }
@media(max-width:800px) { .comparison-film-heading { padding:20px; } .comparison-film-controls { padding-inline:20px; } }
@media(max-width:440px) { .comparison-film-heading { padding:18px; } .comparison-film-controls { gap:10px; padding-inline:14px; } .comparison-film-control { min-width:74px; padding-inline:12px; } .comparison-film-time { font-size:10px; } }
@media print { .comparison-film-controls,.comparison-film-player { display:none; } .comparison-film[data-video-frame="true"] .comparison-film-poster { opacity:1; } }