<div class="vapor-stage">
  <div class="vapor-sun"></div>
  <div class="vapor-grid"></div>
  <div class="vapor-card">
    <div class="vapor-corner vapor-tl"></div>
    <div class="vapor-corner vapor-tr"></div>
    <div class="vapor-corner vapor-bl"></div>
    <div class="vapor-corner vapor-br"></div>

    <div class="vapor-eyebrow">▼ RELEASE CHANNEL ▼</div>
    <div class="vapor-chrome">BETA</div>
    <div class="vapor-divider"></div>
    <div class="vapor-version">v 4.18.2 // BUILD 26·05·13</div>

    <div class="vapor-marquee">
      <div class="vapor-marquee-track">
        <span>UNSTABLE</span><span>·</span>
        <span>FOR INTERNAL USE</span><span>·</span>
        <span>EXPECT TURBULENCE</span><span>·</span>
        <span>NOT FOR PRODUCTION</span><span>·</span>
        <span>UNSTABLE</span><span>·</span>
        <span>FOR INTERNAL USE</span><span>·</span>
        <span>EXPECT TURBULENCE</span><span>·</span>
        <span>NOT FOR PRODUCTION</span><span>·</span>
      </div>
    </div>
  </div>
</div>

.vapor-stage {
  background: linear-gradient(180deg, #0c0628 0%, #2a0e58 45%, #c83a8c 100%);
  padding: 0;
  min-height: 540px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.vapor-sun {
  position: absolute;
  width: 340px;
  height: 340px;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, #ffeb3b 0%, #ff6ec7 45%, transparent 75%);
  border-radius: 50%;
  filter: blur(1px);
  z-index: 0;
}
.vapor-sun::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(0deg,
    transparent 0px, transparent 16px,
    #0c0628 16px, #0c0628 20px);
  -webkit-mask: linear-gradient(180deg, transparent 0%, transparent 52%, #000 62%);
  mask: linear-gradient(180deg, transparent 0%, transparent 52%, #000 62%);
}
.vapor-grid {
  position: absolute;
  bottom: 0;
  left: -50%;
  right: -50%;
  height: 55%;
  background:
    linear-gradient(180deg, transparent 0%, #0c0628 90%),
    repeating-linear-gradient(90deg, #ff37b3 0px, #ff37b3 1px, transparent 1px, transparent 60px),
    repeating-linear-gradient(0deg,  #ff37b3 0px, #ff37b3 1px, transparent 1px, transparent 30px);
  transform: perspective(420px) rotateX(58deg);
  transform-origin: bottom;
  z-index: 0;
}
.vapor-card {
  position: relative;
  z-index: 1;
  background: rgba(20, 8, 50, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 100, 200, 0.5);
  padding: 38px 44px 0;
  text-align: center;
  width: min(380px, calc(100% - 80px));
  margin: 60px auto;
}
.vapor-corner {
  position: absolute;
  width: 16px;
  height: 16px;
}
.vapor-tl { top: -1px; left: -1px; border-top: 2px solid #4dffff; border-left: 2px solid #4dffff; }
.vapor-tr { top: -1px; right: -1px; border-top: 2px solid #ff37b3; border-right: 2px solid #ff37b3; }
.vapor-bl { bottom: -1px; left: -1px; border-bottom: 2px solid #ff37b3; border-left: 2px solid #ff37b3; }
.vapor-br { bottom: -1px; right: -1px; border-bottom: 2px solid #4dffff; border-right: 2px solid #4dffff; }
.vapor-eyebrow {
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-size: 8px;
  color: #ff77ee;
  letter-spacing: 0.18em;
  margin-bottom: 16px;
}
.vapor-chrome {
  font-family: "Major Mono Display", ui-monospace, monospace;
  font-size: 96px;
  line-height: 0.9;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg,
    #ffffff 0%, #ffffff 18%, #ff8ce6 36%,
    #6cd1ff 50%, #ffffff 60%, #ff8ce6 78%, #4488cc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 0 22px rgba(255, 100, 200, 0.7))
    drop-shadow(0 3px 4px rgba(0,0,0,0.5));
}
.vapor-divider {
  width: 70%;
  margin: 12px auto 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ff77ee 30%, #4dffff 70%, transparent);
}
.vapor-version {
  font-family: "Major Mono Display", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #6cd1ff;
  margin-bottom: 18px;
}
.vapor-marquee {
  overflow: hidden;
  border-top: 1px solid rgba(255,100,200,0.3);
  border-bottom: 1px solid rgba(255,100,200,0.3);
  padding: 8px 0;
  margin: 0 -44px;
}
.vapor-marquee-track {
  display: flex;
  gap: 14px;
  animation: vapor-scroll 14s linear infinite;
  white-space: nowrap;
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-size: 7px;
  color: #ff8ce6;
  letter-spacing: 0.12em;
  width: max-content;
}
.vapor-marquee-track span { display: inline-block; }
@keyframes vapor-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .vapor-marquee-track { animation: none; }
}