/* Cinema-style transport. Monochrome controls keep the research site's palette. */
.cinema-player{position:relative;container-type:inline-size;isolation:isolate;background:#080808;line-height:normal}
.cinema-player video{display:block;width:100%;cursor:pointer}
.cinema-player video:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.cinema-player .cinema-chrome{position:absolute;inset:auto 0 0;z-index:4;padding:48px 20px 12px;color:#fff;background:linear-gradient(transparent,#000b 40%,#080808f5);transition:opacity .2s ease;pointer-events:auto}
.cinema-controls{display:flex;align-items:center;gap:8px;min-height:52px}
.cinema-button{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:52px;height:52px;padding:10px;border:0;border-radius:5px;background:transparent;color:#fff;cursor:pointer;transition:transform .14s,background .14s}
.cinema-button svg{display:block;width:32px;height:32px;flex:none;filter:drop-shadow(0 1px 2px #0008)}
.cinema-button:hover{background:#ffffff12;transform:scale(1.08)}
.cinema-button:focus-visible{outline:2px solid #fff;outline-offset:-3px;background:#ffffff18}
.cinema-button:disabled{opacity:.35;cursor:default;transform:none;background:transparent}
.cinema-button::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%);z-index:10;padding:8px 11px;background:#171717f5;border:1px solid #ffffff26;border-radius:5px;white-space:nowrap;font:500 12px/1.3 var(--font);color:#fff;pointer-events:none;opacity:0;transition:opacity .15s}
.cinema-button:focus-visible::after{opacity:1}
@media(hover:hover){.cinema-button:hover:not(:disabled)::after{opacity:1}}
.cinema-button[aria-expanded=true]::after{opacity:0}
.player-play::after{left:0;transform:none}
.player-fullscreen::after{left:auto;right:0;transform:none}
.cinema-timeline{position:relative;margin-bottom:6px}
.cinema-timeline input{display:block;appearance:none;-webkit-appearance:none;width:100%;height:18px;margin:0;background:transparent;cursor:pointer}
.cinema-timeline input:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:3px}
.cinema-timeline input::-webkit-slider-runnable-track{height:3px;border-radius:4px;background:linear-gradient(to right,#fff var(--progress,0%),#ffffff50 var(--progress,0%))}
.cinema-timeline input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;margin-top:-4.5px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 3px #0004}
.cinema-timeline input::-moz-range-track{height:3px;border-radius:4px;background:#ffffff50}
.cinema-timeline input::-moz-range-progress{height:3px;border-radius:4px;background:#fff}
.cinema-timeline input::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}
.cinema-time{font-family:var(--font);font-size:13px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums;color:#f5f5f5;margin:0 10px}
.cinema-title{flex:1;min-width:0;text-align:center;font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 18px}
.cinema-volume{display:flex;align-items:center;position:relative}
.player-volume{appearance:none;-webkit-appearance:none;width:0;opacity:0;height:4px;background:linear-gradient(to right,#fff var(--volume,100%),#ffffff50 var(--volume,100%));margin:0;transition:width .16s,opacity .16s;cursor:pointer}
.player-volume::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:11px;height:11px;border-radius:50%;border:0;background:#fff}
.player-volume::-moz-range-thumb{width:11px;height:11px;border-radius:50%;border:0;background:#fff}
.cinema-volume:hover .player-volume:not([hidden]),.cinema-volume:focus-within .player-volume:not([hidden]){width:60px;opacity:1;margin:0 8px 0 2px}
.player-volume:focus-visible{outline:2px solid white;outline-offset:5px}
.cinema-speed{position:relative;margin-left:auto}
.player-rate{position:absolute;right:0;bottom:0;padding:1px 3px;border-radius:3px;background:#171717;color:#fff;font-size:10px;font-weight:600;line-height:1.2}
.player-rate:empty{display:none}
.cinema-menu{position:absolute;bottom:calc(100% + 15px);right:0;z-index:20;min-width:176px;max-height:min(310px,70vh);overflow:auto;padding:8px;background:#1b1b1bf5;color:#fff;border:1px solid #ffffff29;border-radius:8px;box-shadow:0 8px 30px #0005;backdrop-filter:blur(16px)}
.cinema-menu[hidden]{display:none}
.cinema-menu-heading{display:block;font-size:12px;font-weight:500;padding:10px 12px 13px;color:#bdbdbd;border-bottom:1px solid #ffffff20;margin-bottom:4px}
.cinema-menu button{position:relative;display:flex;align-items:center;width:100%;min-height:39px;padding:8px 12px 8px 34px;border:0;border-radius:4px;text-align:left;font-size:13px;color:#fff;background:transparent;cursor:pointer}
.cinema-menu button:hover,.cinema-menu button:focus-visible{background:#ffffff19;outline:none}
.cinema-menu button[aria-checked=true]::before{content:'✓';position:absolute;left:12px;font-size:13px}
.cinema-muted-hint{position:absolute;top:18px;right:18px;z-index:3;width:46px;height:46px;border:1px solid #ffffff80;border-radius:50%;background:#111c;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s}
.cinema-muted-hint svg{width:25px;height:25px}
.cinema-muted-hint::after{top:calc(100% + 10px);bottom:auto;left:auto;right:0;transform:none}
.cinema-muted-hint[hidden]{display:none}
.cinema-player.controls-hidden .cinema-chrome{opacity:0;pointer-events:none}
.cinema-player.controls-hidden video{cursor:none}
.cinema-player.controls-hidden .cinema-muted-hint:not([hidden]){opacity:1;visibility:visible;pointer-events:auto}
/* Comparisons retain a shared transport below both clips and their result labels. */
.cinema-player.player-is-paired{background:transparent}
.cinema-player.player-is-paired .cinema-chrome{position:relative;padding-top:5px;margin-top:12px;background:#111;border-radius:3px}
.cinema-player.player-is-paired .cinema-title{display:none}
.cover-stage .hero-film.cinema-player{overflow:visible}
.technical-player.cinema-player{border-radius:3px}
.cinema-player:is(:fullscreen,:-webkit-full-screen,.is-player-expanded),.cover-stage:is(:fullscreen,:-webkit-full-screen,.is-player-expanded){background:#080808!important;padding:0;overflow:visible;justify-content:center;container-type:inline-size}
.cinema-player:is(:fullscreen,:-webkit-full-screen,.is-player-expanded)>video{height:100%;max-height:100dvh;flex:none;object-fit:contain;background:#080808}
.cover-stage:is(:fullscreen,:-webkit-full-screen,.is-player-expanded) .hero-film{height:100%;width:100%;flex:none;background:#080808}
.cover-stage:is(:fullscreen,:-webkit-full-screen,.is-player-expanded) video{height:100%;max-height:100dvh;background:#080808}
.player-is-paired:is(:fullscreen,:-webkit-full-screen,.is-player-expanded){padding:20px}
.player-is-paired:is(:fullscreen,:-webkit-full-screen,.is-player-expanded) .video-pair{width:100%}
.player-is-paired:is(:fullscreen,:-webkit-full-screen,.is-player-expanded) .cinema-chrome{width:100%;flex:none}
@container(min-width:1000px){.cinema-button{width:58px;height:58px}.cinema-button svg{width:36px;height:36px}.cinema-controls{gap:12px}.cinema-time{font-size:14px}.cinema-title{font-size:17px}}
@container(max-width:760px){.cinema-title{display:none}.cinema-controls{gap:4px}.cinema-button{width:46px;height:46px;padding:9px}.cinema-button svg{width:28px;height:28px}.cinema-player .cinema-chrome{padding-left:12px;padding-right:12px}.cinema-time{font-size:12px;margin:0 5px}.cinema-volume:hover .player-volume:not([hidden]),.cinema-volume:focus-within .player-volume:not([hidden]){width:40px;margin-right:4px}}
@container(max-width:600px){.cinema-player .cinema-chrome{padding:34px 10px 6px}.cinema-controls{gap:2px;min-height:44px}.cinema-button{width:44px;height:44px;padding:9px}.cinema-button svg{width:26px;height:26px}.cinema-time{position:absolute;right:12px;top:11px;margin:0;font-size:11px}.cinema-timeline{margin-bottom:2px}.cinema-volume .player-volume{display:none}.cinema-player.player-is-paired .cinema-chrome{padding-top:26px}.player-is-paired .cinema-time{top:8px}.cinema-muted-hint{top:10px;right:10px;width:40px;height:40px}.cinema-button::after{display:none}}
@container(max-width:300px){.cinema-controls{gap:0}.cinema-button{width:40px}.cinema-button svg{width:25px;height:25px}}
@media(prefers-reduced-motion:reduce){.cinema-button,.cinema-chrome,.cinema-muted-hint,.player-volume{transition:none}.cinema-button:hover{transform:none}}