/* Both directions use native video playback. Only the selected decoder is visible. */
.film-ready .film-frame #reverse-video{opacity:0}
.film-ready.show-reverse .film-frame #dna-video{opacity:0}
.film-ready.show-reverse .film-frame #reverse-video{opacity:1}
#marker{position:absolute;inset:0;width:100%;height:100%;transform:none;pointer-events:none;color:var(--marker-color,var(--accent));opacity:0;transition:opacity .2s linear}
#marker:not(.visible){opacity:0!important}
#marker .target-ring{inset:auto;position:absolute;width:23px;height:23px;transform:translate(-50%,-50%);border:1px solid currentColor;background:#02020280;box-shadow:0 0 0 5px #06060644,0 0 20px color-mix(in srgb,currentColor 30%,transparent)}
#marker .target-ring i{width:5px;height:5px;background:currentColor;box-shadow:0 0 8px currentColor}
#marker .marker-connector{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1;opacity:.65}
#marker .marker-connector path{vector-effect:non-scaling-stroke}
#marker .marker-label{position:absolute;right:auto;bottom:auto;display:flex;align-items:center;gap:14px;width:230px;min-height:68px;padding:13px 16px;border:1px solid color-mix(in srgb,var(--marker-color) 60%,#ffffff18);border-left:2px solid var(--marker-color);border-radius:0;background:linear-gradient(115deg,#101010f5,#070707f5);box-shadow:0 10px 30px #0008,inset 0 1px 0 #ffffff17;backdrop-filter:blur(16px);color:#faf5ed;white-space:normal;letter-spacing:0}
#marker .marker-index{display:grid;align-self:stretch;align-items:center;border:0;border-right:1px solid #ffffff25;padding:0 13px 0 0;color:var(--marker-color);font:300 24px/1 'ZYLO Display';min-width:37px}
#marker .marker-identity{display:flex;flex-direction:column;gap:7px;border:0;padding:0}
#marker .marker-kicker{font:400 11px/1.35 'ZYLO Text';letter-spacing:.035em;color:var(--marker-color);max-width:150px}
#marker strong{font:600 15px/1.25 'ZYLO Text';letter-spacing:-.02em;color:#faf5ed;white-space:nowrap}
#marker .marker-notch{position:absolute;top:-1px;right:-1px;width:11px;height:11px;border:0;padding:0;background:var(--marker-color);clip-path:polygon(100% 0,100% 100%,0 0)}
.progress-track>i{display:none}
body[data-motion=playing] .nav-active{transition:none}

@media(prefers-reduced-motion:reduce){#marker{transition:none}}