:root {
  --jlt-site-navy: #001528;
  --jlt-site-blue: #00509b;
  --jlt-site-orange: #f75432;
  --jlt-site-mist: #f1f5f9;
}

html.jlt-web-embed,
html.jlt-web-embed body {
  background: var(--jlt-site-navy);
}

#jlt-web-startup {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #fff;
  background: radial-gradient(circle at 50% 15%, #063d6d 0, var(--jlt-site-navy) 56%);
  font-family: Poppins, Arial, sans-serif;
}

#jlt-web-startup > div {
  width: min(460px, 100%);
  text-align: center;
}

#jlt-web-startup span {
  display: block;
  width: 42px;
  height: 42px;
  margin: 0 auto 22px;
  border: 4px solid rgb(255 255 255 / 20%);
  border-top-color: var(--jlt-site-orange);
  border-radius: 50%;
  animation: jlt-spin 0.85s linear infinite;
}

#jlt-web-startup strong {
  display: block;
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 600;
}

#jlt-web-startup p {
  margin: 10px 0 0;
  color: rgb(255 255 255 / 72%);
  font-size: 15px;
}

#jlt-web-startup.failed span {
  border: 0;
  animation: none;
}

#jlt-web-startup.failed span::after {
  content: "!";
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  background: var(--jlt-site-orange);
  font-weight: 700;
}

html.jlt-web-embed .topbar {
  background: rgb(0 21 40 / 96%);
  border-bottom-color: rgb(255 255 255 / 12%);
  box-shadow: 0 10px 30px rgb(0 0 0 / 18%);
}

html.jlt-web-embed .logo-panel,
html.jlt-web-embed .brand-divider,
html.jlt-web-embed .subtitle {
  display: none;
}

html.jlt-web-embed .project-copy {
  padding-left: 2px;
}

html.jlt-web-embed .title {
  font-family: Poppins, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

html.jlt-web-embed .modes button[aria-pressed="true"],
html.jlt-web-embed .modes button.active,
html.jlt-web-embed .icon-button:hover,
html.jlt-web-embed .notice-accept {
  background: var(--jlt-site-orange);
}

html.jlt-web-embed .notice-card {
  border-color: rgb(255 255 255 / 10%);
  border-radius: 15px;
  background: var(--jlt-site-navy);
}

html.jlt-web-embed .notice-accent {
  background: linear-gradient(90deg, var(--jlt-site-orange), var(--jlt-site-blue));
}

@keyframes jlt-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 760px) {
  html.jlt-web-embed .topbar {
    padding-inline: 10px;
  }

  html.jlt-web-embed .brand {
    min-width: 120px;
  }
}