.pixel-camera-backdrop { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.pixel-camera { position: fixed; left: calc(50% - 48px); top: calc(50% - 32px); width: 96px; height: 64px; z-index: 31; pointer-events: none; opacity: 0; visibility: hidden; }
.pixel-camera[hidden], .pixel-camera-backdrop[hidden] { display: none; }
.pixel-camera svg { display: block; width: 100%; height: 100%; }
.pixel-camera .pixel-camera-burst { opacity: 0; }
.pixel-camera.is-playing { visibility: visible; animation: pixel-camera-arrival 360ms linear both; }
.pixel-camera-backdrop.is-playing { animation: pixel-camera-background 360ms linear both; }
.pixel-camera.is-playing .pixel-camera-shutter, .pixel-camera.is-playing .pixel-camera-lens { animation: pixel-camera-press 360ms steps(1, end) both; }
.pixel-camera.is-playing .pixel-camera-burst { animation: pixel-camera-flash 140ms linear 140ms forwards; }
@keyframes pixel-camera-arrival {
  0% { opacity: 1; transform: translateY(4px); animation-timing-function: steps(4, end); }
  22.22%, 77.78% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
@keyframes pixel-camera-background {
  0%, 100% { opacity: 0; }
  22.22%, 77.78% { opacity: 1; }
}
@keyframes pixel-camera-press {
  0%, 22.21% { transform: translateY(0); }
  22.22%, 52.77% { transform: translateY(1px); }
  52.78%, 100% { transform: translateY(0); }
}
@keyframes pixel-camera-flash {
  0%, 35.71% { opacity: 1; }
  100% { opacity: 0; }
}
@media (max-width: 600px) { .pixel-camera { left: calc(50% - 24px); top: calc(50% - 16px); width: 48px; height: 32px; } }
@media (prefers-reduced-motion: reduce) {
  .pixel-camera, .pixel-camera.is-playing, .pixel-camera-backdrop, .pixel-camera-backdrop.is-playing { display: none; animation: none; }
  .pixel-camera * { animation: none !important; }
}