.scene {
  --inv-scene-paper: #201d17; --inv-scene-border: #494338; --inv-scene-line: #3c372f;
  --inv-scene-shadow: 0 6px 18px #0003; --inv-text-2: #c5bdae;
  --inv-on-cat: #0d0c0a; --inv-font-mono: ui-monospace, monospace; --inv-green-fg: #77d7af;
  --inv-spring: cubic-bezier(.2,.8,.2,1); --inv-accent: #2b8af0;
  --card-c: #2b8af0; --card-cs: #2b8af026; --card-cb: #2b8af066;
  position: relative; display: grid; place-items: center; min-height: 182px; overflow: hidden;
  background: radial-gradient(circle at 1px 1px, #efe7da12 1px, transparent 0); background-size: 14px 14px;
}
.scene-box { position: relative; width: 240px; height: 140px; }
.scn-card, .scn-pill, .scn-ring { position: absolute; }

.scn-card {
  box-sizing: border-box; padding: 12px; display: flex; flex-direction: column; gap: 7px;
  background: var(--inv-scene-paper); border: 1px solid var(--inv-scene-border); border-radius: 10px;
  box-shadow: var(--inv-scene-shadow);
}
.scn-line { height: 6px; border-radius: 3px; background: var(--inv-scene-line); }
.scn-pill {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px;
  background: var(--inv-scene-paper); border: 1px solid var(--inv-scene-border);
  box-shadow: var(--inv-scene-shadow); font-size: 11px; font-weight: 600; white-space: nowrap;
}
.scn-pill--tint { background: var(--card-cs, var(--inv-glass-bg)); border-color: var(--card-cb, var(--inv-glass-border)); color: var(--card-c, var(--inv-accent)); font-weight: 700; }
.scn-badge {
  width: 18px; height: 18px; border-radius: 999px; background: var(--card-c, var(--inv-accent));
  display: flex; align-items: center; justify-content: center; color: var(--inv-on-cat);
}
.scn-chip { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 8px; background: var(--inv-scene-paper); border: 1px solid var(--inv-scene-border); box-shadow: var(--inv-scene-shadow); font-size: 11px; font-weight: 600; }
.scn-dot-fg { width: 7px; height: 7px; border-radius: 999px; background: var(--inv-green-fg); }
.scn-bar { flex-grow: 1; border-radius: 3px 3px 0 0; background: var(--card-c, var(--inv-accent)); transition: height 0.6s var(--inv-spring); }
.scn-fillbar { height: 8px; border-radius: 4px; background: var(--inv-scene-line); overflow: hidden; }
.scn-fillbar > span { display: block; height: 100%; width: 64%; border-radius: 4px; background: var(--card-c, var(--inv-accent)); transition: width 0.8s var(--inv-spring); }
.inv-card.is-mira .scn-fillbar > span, .inv-card.is-hover .scn-fillbar > span { width: 96%; }


.scn-lift { transform: translateY(0); transition: transform 0.6s var(--inv-spring); }
.inv-card.is-mira .scn-lift, .inv-card.is-hover .scn-lift { transform: translateY(-6px); }
.scn-drop { transform: translateY(0); transition: transform 0.6s var(--inv-spring); }
.inv-card.is-mira .scn-drop, .inv-card.is-hover .scn-drop { transform: translateY(6px); }
.scn-tilt { transform: rotate(0deg); transition: transform 0.6s var(--inv-spring); }
.inv-card.is-mira .scn-tilt, .inv-card.is-hover .scn-tilt { transform: rotate(-3deg) translateY(-4px); }
.scn-slide { transform: translateX(0); transition: transform 0.6s var(--inv-spring); }
.inv-card.is-mira .scn-slide, .inv-card.is-hover .scn-slide { transform: translateX(6px); }
.scn-pop { transform: scale(1); transition: transform 0.5s var(--inv-spring); }
.inv-card.is-mira .scn-pop, .inv-card.is-hover .scn-pop { transform: scale(1.12); }
.scn-spin { transform: rotate(0deg); transition: transform 0.8s var(--inv-spring); }
.inv-card.is-mira .scn-spin, .inv-card.is-hover .scn-spin { transform: rotate(200deg); }
.scn-wiggle { transform: rotate(0deg); transition: transform 0.5s var(--inv-spring); }
.inv-card.is-mira .scn-wiggle, .inv-card.is-hover .scn-wiggle { transform: rotate(-14deg) scale(1.08); }
.scn-stamp { transform: rotate(-12deg) scale(0.92); transition: transform 0.5s var(--inv-spring); }
.inv-card.is-mira .scn-stamp, .inv-card.is-hover .scn-stamp { transform: rotate(-12deg) scale(1.06); }
.scn-sweep { transform: translateX(0); transition: transform 1.2s ease-in-out, opacity 0.3s ease; opacity: 0; }
.inv-card.is-mira .scn-sweep, .inv-card.is-hover .scn-sweep { transform: translateX(236px); opacity: 1; }
.scn-ring { transform: scale(1); opacity: 0.6; transition: transform 0.9s ease-out, opacity 0.9s ease-out; }
.inv-card.is-mira .scn-ring, .inv-card.is-hover .scn-ring { transform: scale(1.9); opacity: 0; }


.scn-bar-1 { height: 18px; }
.inv-card.is-mira .scn-bar-1, .inv-card.is-hover .scn-bar-1 { height: 30px; }
.scn-bar-2 { height: 34px; transition-delay: 0.05s; }
.inv-card.is-mira .scn-bar-2, .inv-card.is-hover .scn-bar-2 { height: 22px; }
.scn-bar-3 { height: 26px; transition-delay: 0.1s; }
.inv-card.is-mira .scn-bar-3, .inv-card.is-hover .scn-bar-3 { height: 44px; }
.scn-bar-4 { height: 40px; transition-delay: 0.15s; }
.inv-card.is-mira .scn-bar-4, .inv-card.is-hover .scn-bar-4 { height: 54px; }
.scn-cal { height: 12px; border-radius: 3px; background: var(--inv-scene-line); }
.scn-sep { height: 1px; background: var(--inv-scene-line); margin: 2px 0; }


.scn-generic {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.scn-generic-icon {
  width: 76px; height: 76px; border-radius: 22px; display: flex; align-items: center; justify-content: center;
  background: var(--card-c, var(--inv-accent)); color: var(--inv-on-cat); box-shadow: var(--inv-scene-shadow);
}


@media (prefers-reduced-motion: reduce) {
  .scene *, .scene *::before, .scene *::after { animation: none !important; transition: none !important; transform: none !important; }
  .scn-sweep { display: none; }
}