body.upcoming-resonator-preview {
  --upcoming-ink: #edf8fb;
  --upcoming-muted: #9bb9c5;
  --upcoming-line: #2b5965;
  --upcoming-panel: rgba(7, 27, 35, .94);
  min-height: 100vh;
  background:
    radial-gradient(circle at 78% 12%, rgba(77, 229, 235, .14), transparent 28rem),
    radial-gradient(circle at 10% 55%, rgba(255, 211, 107, .08), transparent 24rem),
    #06141b;
  color: var(--upcoming-ink);
}

.upcoming-resonator-preview main {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2rem 0 4rem;
}

.upcoming-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin: 0 0 1.1rem;
  color: var(--upcoming-muted);
  font-size: .85rem;
}

.upcoming-breadcrumb a { color: #c7e9ee; }

.upcoming-resonator-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--upcoming-line);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(10, 34, 43, .97), rgba(19, 28, 31, .94));
  box-shadow: 0 22px 70px rgba(0, 0, 0, .24);
}

.upcoming-resonator-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .6;
  background: repeating-radial-gradient(circle at 84% 20%, transparent 0 58px, rgba(141, 239, 244, .1) 59px 60px, transparent 61px 116px);
}

.upcoming-resonator-hero,
.upcoming-resonator-section { position: relative; z-index: 1; }

.upcoming-resonator-hero {
  display: grid;
  grid-template-columns: minmax(290px, .8fr) minmax(0, 1.2fr);
  gap: 2rem;
  align-items: stretch;
  padding: 1.25rem;
}

.upcoming-teaser-art {
  display: grid;
  place-items: center;
  min-height: 370px;
  overflow: hidden;
  position: relative;
  border: 1px solid #3b737e;
  border-radius: 11px;
  background:
    radial-gradient(circle at 54% 28%, rgba(139, 242, 247, .34), transparent 7%),
    radial-gradient(circle at 30% 77%, rgba(255, 211, 107, .2), transparent 11%),
    linear-gradient(145deg, #123c4d, #07171f 55%, #29271e);
}

.upcoming-teaser-art::before,
.upcoming-teaser-art::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(173, 246, 249, .38);
  border-radius: 50%;
  width: 290px;
  height: 290px;
}

.upcoming-roadmap-art { background: radial-gradient(circle at 45% 30%, rgba(198, 156, 255, .3), transparent 8%), linear-gradient(145deg, #272649, #101827 60%, #1e2330); }

.upcoming-teaser-art::after {
  width: 135px;
  height: 135px;
  border-color: rgba(255, 211, 107, .55);
  transform: translate(65px, -42px);
}

.upcoming-teaser-art span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 124px;
  height: 124px;
  border: 1px solid rgba(199, 248, 250, .5);
  border-radius: 50%;
  background: rgba(3, 16, 22, .48);
  color: #f1fbfc;
  font-size: 5.2rem;
  font-weight: 850;
  text-shadow: 0 0 26px rgba(142, 247, 251, .6);
}

.upcoming-teaser-art img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; opacity: .92; }

.upcoming-teaser-art small {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 1;
  color: #c2e0e4;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.upcoming-teaser-copy { display: flex; flex-direction: column; justify-content: center; padding: .4rem 1rem .4rem 0; }
.upcoming-teaser-copy .kicker { margin-bottom: .55rem; color: #ffd36b; }
.upcoming-teaser-copy h1 { max-width: 720px; margin: 0; font-size: clamp(2.5rem, 6vw, 5.6rem); line-height: .96; letter-spacing: -.055em; }
.upcoming-teaser-copy > p:not(.kicker) { max-width: 680px; margin: 1.25rem 0; color: #b9d8df; font-size: 1.08rem; line-height: 1.6; }

.upcoming-fact-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 1.4rem; }
.upcoming-fact-tags span { padding: .42rem .65rem; border: 1px solid #38646f; border-radius: 999px; color: #c7eef1; font-size: .78rem; font-weight: 760; }
.upcoming-fact-tags span:first-child { border-color: #63e6eb; color: #9ff7f7; }
.upcoming-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.upcoming-actions .upcoming-disabled { opacity: .64; cursor: default; }

.upcoming-resonator-section { margin: 0 1.25rem 1.25rem; padding: 1.15rem; border: 1px solid var(--upcoming-line); border-radius: 11px; background: rgba(5, 23, 30, .76); }
.upcoming-resonator-section h2 { margin: 0; font-size: 1.35rem; }
.upcoming-resonator-section > p { margin: .45rem 0 0; color: var(--upcoming-muted); line-height: 1.55; }
.upcoming-fact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin-top: 1rem; }
.upcoming-fact { min-height: 78px; padding: .8rem; border: 1px solid #274e5a; border-radius: 9px; background: rgba(9, 35, 43, .72); }
.upcoming-fact span { display: block; color: #ffd36b; font-size: .68rem; font-weight: 820; letter-spacing: .09em; text-transform: uppercase; }
.upcoming-fact strong { display: block; margin-top: .35rem; color: #e7f8f9; }
.upcoming-pending { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem 1.25rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.upcoming-pending li { position: relative; padding-left: 1.1rem; color: #c0dfe4; line-height: 1.5; }
.upcoming-pending li::before { content: ""; position: absolute; top: .6em; left: 0; width: .42rem; height: .42rem; border-radius: 50%; background: #83eff1; box-shadow: 0 0 10px rgba(131, 239, 241, .8); }
.upcoming-route-note { margin-top: 1rem; padding: .8rem 1rem; border-left: 3px solid #ffd36b; background: rgba(40, 43, 29, .5); color: #c5dfe2; line-height: 1.5; }

@media (max-width: 800px) {
  .upcoming-resonator-preview main { width: min(100% - 1rem, 680px); padding-top: 1rem; }
  .upcoming-resonator-hero { grid-template-columns: 1fr; gap: 1rem; padding: .75rem; }
  .upcoming-teaser-art { min-height: 245px; }
  .upcoming-teaser-copy { padding: .5rem .35rem .8rem; }
  .upcoming-teaser-copy h1 { font-size: clamp(2.4rem, 12vw, 4rem); }
  .upcoming-teaser-copy > p:not(.kicker) { font-size: .98rem; }
  .upcoming-fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
  .upcoming-resonator-section { margin: 0 .75rem .75rem; padding: .9rem; }
  .upcoming-pending { grid-template-columns: 1fr; }
  .upcoming-fact-grid { gap: .5rem; }
  .upcoming-fact { min-height: 70px; padding: .65rem; }
  .upcoming-fact strong { font-size: .9rem; }
}