:root {
  --acid: #55e2d3;
  --blue: #6b8cff;
  --purple: #b18cff;
  --rust: #b18cff;
}

body {
  background-image:
    radial-gradient(ellipse at 72% 2%, rgba(107, 140, 255, .09), transparent 33%),
    radial-gradient(ellipse at 20% 55%, rgba(177, 140, 255, .045), transparent 34%),
    linear-gradient(90deg, transparent 49.95%, rgba(255,255,255,.018) 50%, transparent 50.05%);
}

.mark i:nth-child(1), .mark i:nth-child(4) { background: var(--acid); }
.mark i:nth-child(2) { background: var(--blue); }
.mark i:nth-child(3) { background: var(--purple); }
.status-dot { background: var(--blue); box-shadow: 0 0 12px rgba(107,140,255,.6); }
.live-pulse, .live-label i { background: var(--acid); box-shadow: 0 0 12px rgba(85,226,211,.6); }
.hero-stamp { background: linear-gradient(135deg, var(--blue), var(--purple)); color: #101118; }
.disc:before { border-color: rgba(177,140,255,.48); background: radial-gradient(circle, var(--purple) 0 3px, transparent 4px), repeating-radial-gradient(circle, transparent 0 8px, rgba(85,226,211,.25) 9px 10px); }
.art-coord { color: var(--blue); }
.nav-tab.is-active:after, .archive-card.is-selected:after { background: linear-gradient(90deg, var(--acid), var(--blue), var(--purple)); }
.player-orb { background: linear-gradient(135deg, var(--blue), var(--acid)); }
.player-frame { color: var(--acid); border-color: rgba(85,226,211,.35); }
.video-stage { background: radial-gradient(ellipse at 52% 44%, rgba(90,77,139,.32) 0%, #191923 37%, #101116 100%); }
.video-grid { opacity: .46; }
.top-right, .footer-mark { color: var(--purple); }
.video-caption b { color: var(--blue); }
.glyph-a { background: #202b43; color: #88a5ff; border-color: #41577d; }
.glyph-b { background: #2d2141; color: #c4aaff; border-color: #564473; }
.glyph-c { background: #1d3434; color: #76e6d7; border-color: #38675f; }
.glyph-d { background: #30223a; color: #d5a5f5; border-color: #65487c; }
.glyph-e { background: #202b43; color: #91bbff; border-color: #41577d; }
.archive-play { border-color: var(--blue); color: var(--blue); }
.side-index, .archive-tag b, .connection-mark { color: var(--acid); }
::selection { background: rgba(107,140,255,.5); color: #fff; }

.brand-image { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(85,226,211,.2)); }
.hero-logo-animation { position: absolute; width: min(84%, 340px); aspect-ratio: 1; object-fit: contain; left: 50%; top: 50%; transform: translate(-42%, -50%); opacity: .9; filter: drop-shadow(0 0 24px rgba(85,226,211,.22)); }
.twitch-badge { position: absolute; z-index: 2; top: 14px; right: 17px; width: 140px; height: 57px; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(177,140,255,.52); background: rgba(25,22,38,.88); color: inherit; text-decoration: none; }
.twitch-badge img { width: 140px; height: 105px; object-fit: contain; transform: translateY(-22px); }
.twitch-badge span { position: absolute; right: 6px; bottom: 4px; padding: 2px 4px; background: rgba(17,19,16,.82); color: #d2bbff; font: 7px var(--mono); letter-spacing: .1em; }
.top-right { right: 170px; }
@media(max-width:520px) {
  .brand-image { width: 38px; height: 38px; }
  .hero-logo-animation { width: min(76%, 270px); transform: translate(-40%, -50%); }
  .twitch-badge { top: 11px; right: 10px; width: 102px; height: 45px; }
  .twitch-badge img { width: 108px; height: 81px; transform: translateY(-17px); }
  .twitch-badge span { font-size: 6px; }
  .top-right { right: 122px; }
}