@layer scene-art {
  .scene-hero { position: relative; overflow: hidden; height: clamp(108px, 14vw, 168px); border: 1px solid var(--line); border-radius: 12px; margin-top: 12px; background: #273e3c; }
  .scene-layer, .scene-layer svg { display: block; width: 100%; height: 100%; }
  .scene-layer { position: absolute; inset: 0; animation: scene-arrive 240ms ease-out; }
  .scene-layer svg { object-fit: cover; }
  .scene-outgoing { animation: scene-depart 240ms ease-out forwards; }
  @keyframes scene-depart { to { opacity: 0; } }
  .scene-period { position: absolute; bottom: 8px; left: 10px; border-radius: 6px; padding: 3px 8px; color: #e1dfce; background: #222b43dd; font-size: 11px; }
  .scene-thumbnail { display: inline-block; flex: 0 0 76px; width: 76px; height: 48px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
  .scene-thumbnail svg { width: 100%; height: 100%; display: block; }
  .recent-entity-row:has(.scene-thumbnail) { flex-direction: row; flex-wrap: wrap; }
  .recent-entity-row:has(.scene-thumbnail) > div { flex: 1 1 130px; min-width: 0; }
  @keyframes scene-arrive { from { opacity: .35; } to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .scene-layer { animation: none; } .scene-outgoing { display: none; } }
}