.sendico-startup {
  --startup-ink: #173c43;
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  grid-template-rows: auto 1fr;
  box-sizing: border-box;
  padding: max(28px, env(safe-area-inset-top)) max(32px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(32px, env(safe-area-inset-left));
  overflow: auto;
  background: #f6f9fa;
  color: var(--startup-ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: opacity 280ms ease;
  isolation: isolate;
}

.sendico-startup *, .sendico-startup *::before, .sendico-startup *::after {
  box-sizing: border-box;
}
.sendico-startup [hidden] {
  display: none !important;
}
.sendico-startup::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 20% 20%, #dcefe980, transparent 55%), radial-gradient(ellipse at 85% 80%, #e3e7fc80, transparent 55%);
}
.startup-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.6px;
}
.startup-brand img {
  width: 28px;
  height: 28px;
}
.startup-context {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #526f75;
}
.startup-content {
  align-self: center;
  justify-self: center;
  width: min(100%, 440px);
  padding: 28px 0 48px;
  text-align: center;
}
.startup-art {
  position: relative;
  display: grid;
  place-items: center;
  height: 260px;
  margin-bottom: 12px;
}
.startup-glow {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: conic-gradient(from 30deg, #75debc, #8ccde8, #adb6ef, #75debc);
  filter: blur(35px);
  opacity: .5;
  animation: startup-drift 9s ease-in-out infinite alternate;
}
.startup-orbit {
  position: absolute;
  width: 228px;
  height: 228px;
  border: 1px solid #286f781c;
  border-radius: 50%;
  animation: startup-orbit 14s linear infinite;
}
.startup-orbit::after {
  content: '';
  position: absolute;
  top: 27px;
  left: 27px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #478d98;
  box-shadow: 0 0 16px #66bcba70;
}
.startup-orbit-inner {
  width: 174px;
  height: 174px;
  border-style: dashed;
  border-color: #286f7814;
  animation-direction: reverse;
  animation-duration: 20s;
}
.startup-orbit-inner::after {
  width: 4px;
  height: 4px;
  top: 21px;
  left: 21px;
  background: #7c90c4;
}
.startup-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  border: 1px solid #fff;
  border-radius: 30px;
  background: linear-gradient(145deg, #ffffff, #f8ffffe6);
  box-shadow: 0 24px 60px -24px #376e8160, inset 0 -2px 5px #94b9c31a;
  animation: startup-float 4s ease-in-out infinite;
}
.startup-mark img {
  width: 84px;
  height: 84px;
}
.startup-content h1 {
  margin: 0 0 12px;
  font-size: clamp(25px, 4vw, 32px);
  font-weight: 550;
  line-height: 1.25;
  letter-spacing: -1.1px;
}

.startup-track {
  position: relative;
  width: 168px;
  height: 3px;
  margin: 26px auto 18px;
  overflow: hidden;
  border-radius: 3px;
  background: #dce9eb;
}
.startup-track::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 35%;
  border-radius: inherit;
  background: linear-gradient(90deg, #78baa5, #347f8e, #929ed1);
  animation: startup-progress 1.8s ease-in-out infinite;
}
.startup-detail {
  min-height: 36px;
  margin: 0 auto;
  max-width: 290px;
  font-size: 12px;
  line-height: 1.6;
  color: #587279;
}
.startup-retry {
  margin-top: 16px;
  padding: 10px 20px;
  border: 1px solid #aec6cc;
  border-radius: 999px;
  background: #fff;
  color: var(--startup-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.startup-retry:hover {
  background: #e9f2f2;
}
.startup-retry:focus-visible {
  outline: 3px solid #337e8d;
  outline-offset: 4px;
}

.sendico-startup[data-stage='preparing'] .startup-track::before {
  width: 60%;
}
.sendico-startup[data-stage='opening'] .startup-track::before {
  width: 85%;
}
.sendico-startup[data-stage='ready'] {
  opacity: 0;
  pointer-events: none;
}
.sendico-startup[data-stage='error'] .startup-track {
  display: none;
}
.sendico-startup[data-stage='error'] .startup-status {
  color: #8b3e3e;
}
.sendico-startup[data-stage='error'] * {
  animation: none;
}
@keyframes startup-drift { to { transform: rotate(70deg) scale(1.13); opacity: .65; } }
@keyframes startup-orbit { to { transform: rotate(360deg); } }
@keyframes startup-float { 50% { transform: translateY(-7px); } }
@keyframes startup-progress { from { transform: translateX(-110%); } to { transform: translateX(390%); } }
@media (max-width: 480px) {
  .sendico-startup {
    padding-left: 22px;
    padding-right: 22px;
  }
  .startup-context {
    font-size: 9px;
    letter-spacing: 1.2px;
  }
  .startup-art {
    height: 230px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sendico-startup, .sendico-startup *, .sendico-startup *::before {
    animation: none !important;
    transition: none !important;
  }
  .startup-track::before {
    transform: none;
  }
}