* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #071019;
  color: #f4f7fb;
  font-family: "Segoe UI", system-ui, sans-serif;
}

body { overflow: hidden; }

.stage {
  position: fixed;
  inset: 0;
  background: #071019;
}

.fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: transparent;
}

.gif,
.still { display: none; }

html.is-reduced .motion { display: none !important; }

html.is-reduced .still { display: block !important; }

body.show-gif .motion-video { display: none; }

body.show-gif .gif { display: block; }

html.is-reduced body.show-gif .gif { display: none !important; }

.motion-toggle {
  position: fixed;
  z-index: 3;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #c8ff3d;
  background: rgba(7, 16, 25, 0.45);
  border: 1px solid rgba(92, 242, 255, 0.28);
  border-radius: 8px;
}

.motion-toggle svg {
  width: 14px;
  height: 14px;
  max-width: 14px;
  max-height: 14px;
  fill: currentColor;
  display: block;
}

.motion-toggle .icon-play { display: none; }

.motion-toggle[aria-pressed="true"] .icon-pause { display: none; }

.motion-toggle[aria-pressed="true"] .icon-play { display: block; }

.motion-toggle:focus-visible {
  outline: 2px solid #c8ff3d;
  outline-offset: 3px;
}

.assistant {
  position: fixed;
  z-index: 2;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: max-content;
  max-width: calc(100vw - max(16px, env(safe-area-inset-right)) - 16px);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}

.assistant picture { display: block; width: min(120px, 30vw); }

#mascot {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: 50% 85%;
}

.assistant-label {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 560;
  text-align: right;
  white-space: nowrap;
  color: #e7f6f2;
}

body.is-live #mascot { animation: bob 4.8s ease-in-out infinite; }

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2.5deg); }
  50% { transform: translateY(7px) rotate(2.5deg); }
}

html.is-reduced #mascot,
body.is-paused #mascot {
  animation: none;
  transform: none;
}

@media (max-aspect-ratio: 4/5) {
  .fill { object-position: center top; }
}