/* A single continuous visual navigator; the lesson remains the editing surface. */
.dna-filmstrip { --dna-filmstrip-space: calc(var(--dna-filmstrip-size, 148px) + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; position: fixed; z-index: 80; inset: auto 0 0; height: var(--dna-filmstrip-space); padding: 0 0 env(safe-area-inset-bottom, 0px); color: var(--text); background: var(--surface-1); border-top: 1px solid var(--border-strong); box-shadow: 0 -8px 28px #00000012; font: 13px/1.3 var(--font-sans); }
.dna-filmstrip[hidden], .dna-filmstrip [hidden] { display: none !important; }
.dna-filmstrip *, .dna-filmstrip *::before, .dna-filmstrip *::after { box-sizing: border-box; }
.dna-filmstrip-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; max-width: 1560px; margin: auto; padding-inline: 20px 8px; }
.dna-filmstrip-actions { display: flex; align-items: center; flex: 0 0 auto; }
.dna-filmstrip-resize { position: absolute; z-index: 2; top: -22px; left: calc(50% - 48px); width: 96px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 8px; color: var(--text-dim); background: transparent; cursor: ns-resize; touch-action: none; }
.dna-filmstrip-resize::after { content: ''; position: absolute; top: 20px; left: 28px; width: 40px; height: 4px; border-radius: 4px; background: var(--border-strong); }
.dna-filmstrip-resize:hover::after, .dna-filmstrip-resize:focus-visible::after, .dna-filmstrip[data-resizing="true"] .dna-filmstrip-resize::after { background: var(--accent); }
.dna-filmstrip-resize:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; }
.dna-filmstrip-caption { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.dna-filmstrip-position { flex: 0 0 auto; color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.dna-filmstrip-topic { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.dna-filmstrip-toggle { display: inline-grid; place-items: center; flex: 0 0 44px; width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 6px; font: inherit; font-size: 22px; color: var(--text-dim); background: transparent; cursor: pointer; }
.dna-filmstrip-toggle:hover { color: var(--text); background: var(--surface-2); }
.dna-filmstrip-track { display: flex; gap: 6px; height: var(--dna-filmstrip-track-height, 103px); overflow-x: auto; overflow-y: hidden; padding: var(--dna-filmstrip-pad-top, 4px) max(12px, calc(50% - var(--dna-filmstrip-half-width, 74px))) var(--dna-filmstrip-pad-bottom, 9px); scroll-padding-inline: max(12px, calc(50% - var(--dna-filmstrip-half-width, 74px))); overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; -webkit-overflow-scrolling: touch; touch-action: auto; }
.dna-filmstrip-frame { display: flex; flex-direction: column; position: relative; flex: 0 0 var(--dna-filmstrip-frame-width, 148px); width: var(--dna-filmstrip-frame-width, 148px); height: var(--dna-filmstrip-frame-height, 88px); min-height: 44px; padding: 3px; gap: 3px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text); text-align: left; font: inherit; cursor: pointer; user-select: none; -webkit-user-select: none; }
.dna-filmstrip-visual { display: block; width: 100%; height: var(--dna-filmstrip-thumb-height, 78.75px); min-height: var(--dna-filmstrip-thumb-height, 78.75px); aspect-ratio: 16 / 9; flex: 0 0 var(--dna-filmstrip-thumb-height, 78.75px); position: relative; overflow: hidden; border-radius: 3px; background: var(--surface-1); }
.dna-filmstrip-visual img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.dna-filmstrip-paper { display: flex; align-items: start; gap: 8px; height: 100%; padding: 7px; background: var(--surface-1); font-size: 10px; line-height: 1.4; overflow: hidden; }
.dna-filmstrip-paper > span:first-child { flex: 0 0 auto; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.dna-filmstrip-frame-title { display: block; position: absolute; bottom: 3px; left: 3px; right: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 2px 4px; background: var(--surface-1); border-radius: 0 0 3px 3px; font-size: 10px; line-height: 14px; }
.dna-filmstrip-frame:hover { border-color: var(--accent); }
.dna-filmstrip-frame[data-preview="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.dna-filmstrip-frame[data-active="true"]::after { content: ''; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface-1); }
.dna-filmstrip-frame:focus-visible, .dna-filmstrip-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.dna-filmstrip-frame:disabled { opacity: .6; cursor: wait; }
.dna-filmstrip[data-dragging="true"] .dna-filmstrip-track, .dna-filmstrip[data-dragging="true"] .dna-filmstrip-frame { cursor: grabbing; }
.dna-filmstrip[data-collapsed="true"] { --dna-filmstrip-space: calc(44px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 600px) {
  .dna-filmstrip { --dna-filmstrip-space: calc(var(--dna-filmstrip-size, 136px) + env(safe-area-inset-bottom, 0px)); }
  .dna-filmstrip-head { padding-left: 12px; }
  .dna-filmstrip-caption { gap: 8px; }
  .dna-filmstrip-position { font-size: 11px; }
  .dna-filmstrip-topic { font-size: 12px; }
  .dna-filmstrip-track { height: var(--dna-filmstrip-track-height, 91px); padding-inline: max(10px, calc(50% - var(--dna-filmstrip-half-width, 64px))); scroll-padding-inline: max(10px, calc(50% - var(--dna-filmstrip-half-width, 64px))); }
}
@media (prefers-reduced-motion: reduce) { .dna-filmstrip-track { scroll-behavior: auto; } }
@media (forced-colors: active) {
  .dna-filmstrip { border-color: CanvasText; box-shadow: none; }
  .dna-filmstrip-frame[data-preview="true"] { outline: 2px solid Highlight; box-shadow: none; }
  .dna-filmstrip-frame[data-active="true"]::after { background: Highlight; border-color: CanvasText; forced-color-adjust: none; }
}