.animation-header { padding-top:8rem; }
.animation-back { display:inline-block; font-size:.8rem; margin-bottom:1.5rem; }
.animation-header h1 { letter-spacing:.01em; font-weight:300; }
.animation-intro { margin-top:1rem; font-size:.95rem; }
.animation-jumps { display:flex; flex-wrap:wrap; gap:.75rem 2rem; margin-top:1.5rem; font-size:.85rem; }
.preview-note { color:#62625e; font-size:.73rem; margin-top:1.5rem; }
.animation-section { max-width:1200px; margin:0 auto; padding:2.5rem 1.5rem 3rem; scroll-margin-top:6rem; }
.animation-section-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; border-top:1px solid #d6d6d0; padding-top:1.5rem; margin-bottom:2rem; }
.animation-section h2 { font-size:1.3rem; text-transform:none; letter-spacing:.01em; font-weight:300; }
.animation-section-head p { font-size:.8rem; color:#666; }
.loop-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.5rem 2rem; }
.loop-grid.short-loops { grid-template-columns:repeat(3,minmax(0,1fr)); }
.loop-grid.optical-flow { grid-template-columns:minmax(0,1fr); max-width:850px; }
.optical-flow .loop-image { aspect-ratio:3/2; }
.loop-card { min-width:0; }
.loop-open { border:0; padding:0; background:none; width:100%; cursor:pointer; color:inherit; display:block; text-align:left; font:inherit; position:relative; }
.loop-image { display:flex; align-items:center; justify-content:center; aspect-ratio:16/10; background:#eeeee9; }
.loop-image img { display:block; width:100%; height:100%; object-fit:contain; }
.short-loops .loop-image { aspect-ratio:4/3; }
.loop-action { display:flex; justify-content:space-between; align-items:center; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; margin-top:.5rem; color:#65655f; min-height:25px; }
.loop-action span { font-size:1rem; }
.loop-open:hover .loop-action { color:#111; }
.loop-open:focus-visible, #animation-viewer button:focus-visible { outline:2px solid #444; outline-offset:5px; }
.loop-card figcaption { margin-top:.25rem; font-style:normal; opacity:1; }
.loop-title { display:block; font-size:.95rem; }
.loop-detail { display:block; font-size:.75rem; margin-top:.15rem; color:#65655f; }
.animation-bottom { max-width:1200px; margin:1rem auto 4rem; padding:0 1.5rem; font-size:.85rem; }
.animation-footer { padding:2rem 3rem; font-size:.75rem; color:#777; border-top:1px solid #ddd; }
#animation-viewer { position:fixed; inset:0; margin:auto; width:min(1120px,calc(100% - 48px)); max-height:calc(100dvh - 40px); padding:1.5rem 2rem; background:#f9f9f7; color:#1a1a1a; border:0; overflow:auto; }
#animation-viewer::backdrop { background:rgba(15,15,15,.82); }
.viewer-top { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
#viewer-title { font-size:1.2rem; text-transform:none; letter-spacing:.01em; font-weight:300; }
#viewer-detail { font-size:.75rem; color:#666; margin-top:.3rem; }
#animation-viewer button { font:inherit; font-size:.8rem; border:0; border-bottom:1px solid #aaa; padding:.4rem 0; min-height:44px; background:none; cursor:pointer; color:inherit; }
#viewer-close { white-space:nowrap; }
#viewer-stage { min-height:100px; display:flex; align-items:center; justify-content:center; }
#viewer-stage video,#viewer-stage img { display:block; max-width:100%; width:auto; height:auto; max-height:calc(100dvh - 260px); object-fit:contain; }
#viewer-stage video { background:#111; width:100%; }
#viewer-status { font-size:.75rem; color:#555; margin-top:.5rem; min-height:1.3em; }
.viewer-controls { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.gif-controls { display:flex; gap:1.2rem; }
.gif-controls[hidden] { display:none; }
.viewer-counter { font-size:.7rem; color:#666; text-align:center; margin:.5rem auto 0; }
@media(max-width:700px) {
  .animation-header { padding:8rem 1.25rem 1rem; }
  .animation-header h1 { font-size:2.4rem; }
  .animation-section { padding:2rem 1.25rem; scroll-margin-top:8rem; }
  .animation-section-head { display:block; }
  .animation-section-head p { margin-top:.4rem; }
  .loop-grid,.loop-grid.short-loops { grid-template-columns:1fr; gap:2rem; }
  .animation-bottom { padding:0 1.25rem; }
  .animation-footer { padding:1.5rem 1.25rem; }
  #animation-viewer { width:calc(100% - 24px); padding:1rem; max-height:calc(100dvh - 24px); }
  #viewer-stage video,#viewer-stage img { max-height:calc(100dvh - 300px); }
  .viewer-controls { gap:.6rem; }
  .gif-controls { gap:.75rem; }
  #animation-viewer button { font-size:.75rem; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }