:root {
  --bg-edge: #03060a;
  --bg-core: #0a1226;
  --fg: #d8dde3;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg-edge);
  background-image: radial-gradient(ellipse at center, var(--bg-core) 0%, var(--bg-edge) 70%, #000 100%);
  color: var(--fg);
  font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  -webkit-font-smoothing: antialiased;
}

.logo-stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.mark {
  display: block;
  width: min(72vw, 640px);
  height: auto;
  -webkit-mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, #000 55%, rgba(0,0,0,0.85) 70%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, #000 55%, rgba(0,0,0,0.85) 70%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  filter: drop-shadow(0 0 24px rgba(120, 130, 160, 0.18));
}

@media (max-width: 480px) {
  .mark { width: 88vw; }
}