.animated-picture { position: relative; isolation: isolate; }
.picture-stage { position:relative; }
.picture-stage > a { display: block; position: relative; overflow: hidden; }
.picture-stage > a > img { display: block; width: 100%; height: auto; }
.animated-picture video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #080e1a; opacity: 0;
  pointer-events: none; transition: opacity 180ms ease;
}
.animated-picture.is-playing video { opacity: 1; }
.poster-portrait video { clip-path: inset(21% 0 0 0); }
.animation-toggle {
  position: absolute; z-index: 2; right: .7rem; bottom: .7rem;
  min-height: 44px; padding: .5rem .85rem; border: 1px solid #dbc185;
  border-radius: .4rem; color: #fff4d9; background: #0c1422ed;
  font: 600 .875rem/1.3 system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 2px 12px #0006;
}
.animation-toggle[hidden] { display: none; }
.animation-toggle:hover { background: #24344a; }
.animation-toggle:focus-visible, .picture-stage > a:focus-visible {
  outline: 3px solid #59cfff; outline-offset: 3px;
}
.animation-status {
  position: absolute; z-index: 2; bottom: 4rem; left: .7rem; right: .7rem;
  width: fit-content; max-width: calc(100% - 1.4rem); border-radius: .3rem;
  color: white; background: #0c1422ed; font: 500 .875rem/1.4 system-ui, sans-serif;
}
.animation-status:not(:empty) { padding: .45rem .7rem; }
.profile-portrait { margin: 1.2rem 0 1.5rem; }
.profile-portrait .animated-picture { border-radius: .5rem; overflow: hidden; background: #0c1422; }
.profile-portrait figcaption { margin-top: .5rem; font-size: .875rem; color: #596270; }
.manuscript-intro .poster-portrait { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.animation-guide { font-size: .95rem; line-height: 1.5; }
.clip-choices { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px; background:var(--soft); color:var(--text); font:500 14px/1.4 system-ui,sans-serif; }
.clip-choices button { min-height:40px; padding:8px 14px; border:1px solid var(--border); border-radius:5px; background:var(--paper); color:var(--text); cursor:pointer; font:inherit; }
.clip-choices button[aria-pressed="true"] { background:var(--accent-soft); box-shadow:inset 0 -3px var(--gold); font-weight:700; }
.clip-choices label { display:flex; align-items:center; gap:7px; min-height:40px; margin-left:auto; cursor:pointer; }
.clip-choices input { width:18px; height:18px; accent-color:var(--accent); }
.clip-choices :focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.clip-save-status:not(:empty) { flex-basis:100%; color:var(--muted); }
.youtube-preview { display:none; position:absolute; inset:0; z-index:3; background:#080e1a; }
.youtube-preview iframe { width:100%; height:100%; min-height:200px; border:0; }
.is-youtube .youtube-preview { display:block; }
.is-youtube .picture-stage { min-height:200px; }
.is-youtube .animation-toggle, .is-youtube .animation-status { display:none; }
.youtube-options { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:8px 12px; background:var(--soft); color:var(--text); font:500 14px/1.4 system-ui,sans-serif; }
.youtube-option { min-height:40px; padding:8px 14px; border:1px solid var(--border); border-radius:5px; background:var(--paper); color:var(--text); cursor:pointer; font:inherit; }
.youtube-option:focus-visible, .youtube-link:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.youtube-options[hidden], .youtube-option[hidden], .youtube-link[hidden] { display:none; }
@media (prefers-reduced-motion: reduce) {
  .animated-picture video { transition: none; }
}
@media print {
  .animated-picture video, .animation-toggle, .animation-status, .animation-guide, .clip-choices, .youtube-preview, .youtube-options { display: none !important; }
}