/* Present before the application bundle, including across reload. */
.num-update-slot { position: fixed; top: max(20px, env(safe-area-inset-top, 0px)); left: 0; right: 0; }
@media (max-width: 640px) { .num-update-slot { top: max(64px, calc(env(safe-area-inset-top, 0px) + 16px)); padding-top: 0; } }
.num-update-notice--updating .num-update-button::after { display: none; }
.num-update-button { position: relative; overflow: hidden; }
.num-update-button-label { display: inline-block; }
.num-update-button-icon { position: absolute; width: 22px; height: 22px; left: calc(50% - 11px); top: calc(50% - 11px); opacity: 0; }
.num-update-notice--updating .num-update-button-label { animation: num-label-out 160ms ease-out both; }
.num-update-notice--updating .num-update-button-icon { animation: num-button-arrow 600ms cubic-bezier(.22,1,.36,1) both; }
@keyframes num-label-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes num-button-arrow { 0% { opacity: 0; transform: translateY(-28px); } 35% { opacity: 1; transform: translateY(0); } 60% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(32px); } }
#num-update-splash { height: 100dvh; width: 100%; }
.num-update-waves { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .12; }
.num-update-center { position: absolute; top: 20%; transform: none; }
.num-update-scene { position: absolute; top: 56%; width: 80px; height: 80px; display: grid; place-items: center; color: #72ddb8; }
.num-update-spinner { position: relative; width: 9px; height: 9px; }
.num-update-spinner i { position: absolute; width: 50%; height: 150%; border-radius: 3px; background: currentColor; transform: rotate(calc(var(--rotation) * 1deg)) translateY(150%); }
html.num-update-active .num-update-spinner i { animation: num-spinner-pulse 1s calc(var(--delay) * 1s) infinite ease; }
#num-update-splash[data-paused] .num-update-spinner i { animation-play-state: paused; }
@keyframes num-spinner-pulse { 0%, 30%, 70%, 100% { transform: rotate(calc(var(--rotation) * 1deg)) translateY(150%); } 50% { transform: rotate(calc(var(--rotation) * 1deg)) translateY(225%); } }
.num-update-status { position: absolute; top: 83%; font-size: 14px; font-weight: 700; color: #a6c8b9; }
.num-update-hint { left: 20px; right: 20px; bottom: max(20px, env(safe-area-inset-bottom, 0px)); }
#num-update-splash:not([data-stalled]) .num-update-hint { visibility: hidden; }
@media (max-height: 550px) { .num-update-center { top: 8%; } .num-update-mark { width: 72px; height: 72px; transform: scale(.75); } .num-update-name { margin-top: 0; font-size: 28px; } .num-update-scene { top: 42%; } }
@media (prefers-reduced-motion: reduce) {
  .num-update-button-label, .num-update-button-icon { animation: none !important; }
  .num-update-notice--updating .num-update-button-label { opacity: 1; }
  .num-update-notice--updating .num-update-button { transform: none; }
  html.num-update-active .num-update-spinner i { animation: none; }
}