/* Maryam Mostafavi — storyboard deck viewer (theme via CSS variables on .mm-deck) */
.mm-deck { --deck-bg: #141518; --deck-stage: #000; --deck-fg: #ece7dc; --deck-muted: #8e887c; --deck-accent: #d8b47a; --deck-line: #2a2c31; --deck-font: inherit; --deck-radius: 0px;
  position: relative; background: var(--deck-bg); color: var(--deck-fg); font-family: var(--deck-font); border: 1px solid var(--deck-line); border-radius: var(--deck-radius); overflow: hidden; outline: none; }
.mm-deck:focus, .mm-deck:focus-visible, .mm-deck button:focus, .mm-deck button:focus-visible { outline: none; box-shadow: none; }
.mm-deck:fullscreen { border: 0; border-radius: 0; display: flex; flex-direction: column; background: #000; }
.mm-deck:fullscreen .mm-stage { flex: 1; aspect-ratio: auto; }

.mm-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--deck-line); }
.mm-tab { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px 20px; background: transparent; border: 0; border-right: 1px solid var(--deck-line); color: var(--deck-muted); font: inherit; text-align: left; cursor: pointer; min-height: 44px; position: relative; }
.mm-tab:last-child { border-right: 0; }
.mm-tab-title { font-size: 20px; color: inherit; }
.mm-tab-count { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.mm-tab.mm-on { color: var(--deck-fg); }
.mm-tab.mm-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--deck-accent); }
.mm-tab:hover { color: var(--deck-fg); }

.mm-stage { position: relative; aspect-ratio: 842 / 595; background: var(--deck-stage); overflow: hidden; cursor: pointer; }
.mm-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-select: none; opacity: 0; transition: opacity 120ms linear; }
.mm-img.mm-front { opacity: 1; z-index: 1; }

.mm-hit { position: absolute; z-index: 2; top: 0; bottom: 0; width: 18%; min-width: 64px; border: 0; background: transparent; color: var(--deck-fg); cursor: pointer; opacity: 0; transition: opacity 180ms; display: flex; align-items: center; padding: 0 22px; }
.mm-hit svg { width: 36px; height: 36px; filter: drop-shadow(0 1px 6px rgba(0,0,0,0.6)); }
.mm-hit-l { left: 0; justify-content: flex-start; }
.mm-hit-r { right: 0; justify-content: flex-end; }
.mm-stage:hover .mm-hit:not(:disabled), .mm-hit:focus-visible { opacity: 1; }
.mm-hit:disabled { cursor: default; }

.mm-bar { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border-top: 1px solid var(--deck-line); }
.mm-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--deck-fg); cursor: pointer; border-radius: 50%; }
.mm-btn svg { width: 20px; height: 20px; }
.mm-btn:disabled { opacity: 0.3; cursor: default; }
.mm-btn.mm-step svg { width: 18px; height: 18px; }
.mm-speed { font: inherit; font-size: 13px; letter-spacing: 0.04em; width: auto; min-width: 40px; padding: 0 8px; border-radius: 20px; font-variant-numeric: tabular-nums; }
.mm-btn:hover, .mm-btn.mm-on { background: rgba(255,255,255,0.08); color: var(--deck-accent); }
.mm-counter { font-size: 13px; letter-spacing: 0.08em; color: var(--deck-muted); min-width: 72px; font-variant-numeric: tabular-nums; }
.mm-track { flex: 1; height: 24px; display: flex; align-items: center; cursor: pointer; }
.mm-track::before { content: ""; display: block; width: 100%; height: 2px; background: var(--deck-line); }
.mm-fill { position: relative; margin-top: -2px; height: 2px; background: var(--deck-accent); transition: width 200ms; }
.mm-track { flex-direction: column; justify-content: center; }
.mm-track::before { margin-bottom: 0; }
.mm-fill { align-self: flex-start; }

.mm-thumbs { display: none; gap: 8px; padding: 12px; overflow-x: auto; border-top: 1px solid var(--deck-line); scrollbar-width: thin; }
.mm-deck.mm-thumbs-open .mm-thumbs { display: flex; }
.mm-thumb { flex: 0 0 auto; position: relative; width: 120px; padding: 0; border: 2px solid transparent; background: #000; cursor: pointer; border-radius: 2px; overflow: hidden; }
.mm-thumb img { display: block; width: 100%; aspect-ratio: 842 / 595; object-fit: cover; opacity: 0.75; }
.mm-thumb span { position: absolute; left: 6px; bottom: 4px; font-size: 11px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.mm-thumb:hover img, .mm-thumb.mm-on img { opacity: 1; }
.mm-thumb.mm-on { border-color: var(--deck-accent); }

@media (max-width: 720px) {
  .mm-tab { padding: 12px 12px; }
  .mm-tab-title { font-size: 16px; }
  .mm-tab-count { display: none; }
  .mm-counter { min-width: 56px; }
}

/* compact / single-deck mode */
.mm-tabs.mm-single .mm-tab { cursor: default; flex-direction: row; align-items: baseline; gap: 10px; padding: 12px 14px; color: var(--deck-fg); }
.mm-tabs.mm-single .mm-tab.mm-on::after { display: none; }
.mm-tabs.mm-single .mm-tab-title { font-size: 18px; }
.mm-deck.mm-compact .mm-bar { gap: 2px; padding: 6px 4px; }
.mm-deck.mm-compact .mm-btn { width: 36px; height: 36px; }
.mm-deck.mm-compact .mm-speed { min-width: 34px; padding: 0 4px; font-size: 12px; }
.mm-deck.mm-compact .mm-track { min-width: 40px; margin: 0 4px; }
.mm-deck.mm-compact .mm-counter { min-width: 48px; font-size: 11px; margin-left: 4px; }
.mm-deck.mm-compact .mm-hit svg { width: 28px; height: 28px; }
.mm-deck.mm-compact .mm-thumb { width: 88px; }

/* poster: the deck opens on a representative frame; clicking it plays from board 1 */
.mm-poster { display: none; position: absolute; inset: 0; z-index: 3; border: 0; padding: 0; background: #000; cursor: pointer; font: inherit; color: #fff; }
.mm-deck.mm-has-poster .mm-poster { display: block; }
.mm-poster-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mm-poster-play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.75); background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; transition: background 160ms, color 160ms; }
.mm-poster-play svg { width: 34px; height: 34px; }
.mm-deck.mm-compact .mm-poster-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.mm-deck.mm-compact .mm-poster-play svg { width: 26px; height: 26px; }
.mm-poster:hover .mm-poster-play { background: var(--deck-accent); color: #000; border-color: var(--deck-accent); }
.mm-poster-cap { position: absolute; left: 16px; bottom: 14px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
.mm-deck .mm-stage { aspect-ratio: var(--mm-ar, 842 / 595); }