.realtime-loading {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 28px;
  background: #101719;
  color: #eef2f3;
  font: 16px/1.5 system-ui;
  isolation: isolate;
  overflow: hidden;
}
.realtime-loading[hidden] {
  display: none !important;
}
#app-loading [data-loading-spinner] {
  display: block;
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  margin: 16px auto;
  border: 4px solid #66717a55;
  border-top-color: #ff5c28;
  border-radius: 50%;
}
#app-loading [data-live-actions] {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
}
#app-loading [data-live-actions] button {
  font: inherit;
  border: 1px solid #66717a;
  border-radius: 12px;
  padding: 12px 18px;
  background: #202c33;
  color: #fff;
  cursor: pointer;
}
.realtime-loading .loading-ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.realtime-loading .loading-ambient span {
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse at 65% 30%, #ff5c2840, transparent 60%);
}
.realtime-loading .loading-ambient .loading-cool {
  background: radial-gradient(ellipse at 20% 80%, #38b8c040, transparent 60%);
}
@media (prefers-reduced-motion: no-preference) {
  #app-loading [data-loading-spinner] {
    animation: live-spin 0.8s linear infinite;
  }
  @keyframes live-spin {
    to { transform: rotate(360deg); }
  }
  .realtime-loading .loading-ambient span {
    animation: live-glow 8s ease-in-out infinite alternate;
  }
  @keyframes live-glow {
    to {
      transform: translate(4%, 3%);
      opacity: 0.4;
    }
  }
}



html.loading-locked,html.loading-locked body{overflow:hidden!important;overscroll-behavior:none}
html.loading-locked #app-loading{touch-action:none;overscroll-behavior:contain}
#app-loading{transition:opacity .22s ease;opacity:1}
#app-loading.is-finishing{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){#app-loading{transition:none}}
html.loading-locked dialog[open]{visibility:hidden!important}
html.loading-locked dialog::backdrop{background:transparent;backdrop-filter:none}


/* Match the viewport, browser chrome and splash base, including iOS safe areas. */
html.loading-locked,html.loading-locked body{background:#101416!important;min-height:100%}
html.loading-locked #app-loading{inset:0;box-sizing:border-box;min-height:100svh;background:#101416;padding:calc(28px + env(safe-area-inset-top,0px)) max(28px,env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(28px,env(safe-area-inset-left,0px))}
.realtime-loading{background:#101416}
.realtime-loading .loading-ambient{inset:calc(-1 * env(safe-area-inset-top,0px)) 0 calc(-1 * env(safe-area-inset-bottom,0px));contain:strict}
.realtime-loading .loading-ambient span{will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){.realtime-loading .loading-ambient span{will-change:auto}}
