/* The layer pill (engine/pill.js). Composition px (1920x1080), scaled with the stage. Slides must not restyle it.
   Sized for a hall (2026-10-20 red team: 19 px was unreadable from the room): text 24 px, the plate scaled 24/19. */
#pill { position: absolute; right: 72px; top: 64px; z-index: 30; box-sizing: border-box; height: 58px; display: flex; align-items: center; gap: 15px;
  padding: 0 25px 0 21px; border-radius: 29px; pointer-events: none; white-space: nowrap;
  background: rgba(12, 16, 32, 0.74); border: 1px solid rgba(160, 170, 220, 0.3); box-shadow: 0 10px 32px -12px rgba(4, 6, 18, 0.6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 500 24px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace; letter-spacing: 0.16em; color: #f4f3ef;
  opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .3s ease; }
#pill.on { opacity: 1; transform: none; }
#pill .pill-dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--pill, #f4f3ef); box-shadow: 0 0 15px var(--pill, #f4f3ef); }
#pill .pill-txt { padding-top: 1px; }
#pill[data-layer="built"] { --pill: #3ddc97; }
#pill[data-layer="prototype"] { --pill: #1fc3f2; }
#pill[data-layer="vision"] { --pill: #a99cff; }
#pill[data-layer="next"] { --pill: #ecd283; }