@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
html,
body,
#app {
  min-height: 100%;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.fixed-stage {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
  transform-origin: center;
}

.public-screen { --brand-blue: #20275A; --brand-coral: #FF4C44; }
.public-screen button:focus-visible { outline: 3px solid #FF4C44; outline-offset: 4px; }
.public-screen button:active:not(:disabled) { transform: scale(0.98); }
.brand-lockup { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.brand-lockup img { position: absolute; height: auto; object-fit: contain; }
.brand-amgen { top: 16px; left: 50%; width: 333px; transform: translateX(-50%); }
.brand-repatha { top: 39px; left: 45px; width: 107px; }
.brand-campaign { bottom: 21px; right: 32px; width: 140px; }
[data-format="portrait"] .brand-amgen { top: 24px; width: 190px; }
[data-format="portrait"] .brand-repatha { top: auto; bottom: 24px; left: 28px; width: 86px; }
[data-format="portrait"] .brand-campaign { bottom: 18px; right: 24px; width: 108px; }
.screen-enter .screen-content { animation: screen-entry 450ms cubic-bezier(0.22,1,0.36,1) both; }
.screen-enter .brand-lockup { animation: brand-entry 600ms ease-out both; }
@keyframes screen-entry { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes brand-entry { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .public-screen *, .public-screen *::before, .public-screen *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}