:root {
  --space: #030108;
  --deep: #10051e;
  --panel: #140a22ed;
  --panel2: #1c0e30;
  --line: #67428a;
  --blue: #8b6cff;
  --cyan: #76eaff;
  --purple: #c276ff;
  --green: #6dffc1;
  --gold: #ffd77a;
  --text: #fbf8ff;
  --muted: #c9bad5;
  --shadow: 0 24px 70px #000a;
}

html {
  scrollbar-color: #76489b #09030f;
}

body {
  font-family: Rajdhani, "Segoe UI", Arial, sans-serif;
  font-size: 1.03rem;
  background-color: var(--space);
  background-image:
    linear-gradient(90deg, #030108f7 0%, #0a0312e8 48%, #160722b8 74%, #050109e8 100%),
    radial-gradient(circle at 10% 8%, #522179 0, transparent 27%),
    radial-gradient(circle at 91% 18%, #202c79 0, transparent 25%),
    url("assets/purplejack-character.jpg"),
    linear-gradient(145deg, var(--space), var(--deep) 52%, #020106);
  background-position: center, left top, right top, right 12vh, center;
  background-size: auto, auto, auto, min(58vw, 760px) auto, cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body::before {
  opacity: .2;
  background-image:
    linear-gradient(90deg, transparent, #c775ff12 50%, transparent),
    radial-gradient(#fff .7px, transparent .8px);
  background-size: 100% 100%, 31px 31px;
  mask-image: linear-gradient(#000, transparent 94%);
}

.topbar {
  border-bottom-color: #9b56c866;
  background: #08030fe8;
  box-shadow: 0 10px 35px #0005;
}

.brand {
  font-family: Orbitron, Eurostile, "Segoe UI", sans-serif;
  color: #e2bdff;
  text-shadow: 0 0 18px #bc5dff;
}

.doc-switch,
.toplink,
.nav a {
  border-color: #754c98;
  background: linear-gradient(145deg, #25133c, #10091c);
  color: #f2e7fb;
  box-shadow: inset 0 0 14px #bd72ff14;
}

.doc-switch {
  border-color: #4d779d;
  color: #ddf8ff;
}

.doc-switch:hover,
.toplink:hover,
.nav a:hover,
.nav a:focus-visible {
  border-color: #d078ff;
  box-shadow: 0 0 22px #c25dff55, inset 0 0 18px #df7cff20;
}

.hero {
  padding-top: clamp(62px, 8vw, 92px);
}

.kicker {
  color: var(--cyan);
  border-color: #715095;
  background: #160a25dc;
}

.hero h1 {
  font-family: Orbitron, Eurostile, "Segoe UI", sans-serif;
  font-size: clamp(2.4rem, 6.3vw, 4.85rem);
  letter-spacing: .025em;
  background: linear-gradient(180deg, #fff 0%, #ead4ff 38%, #bd72f6 69%, #704094 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 #2a0b3d) drop-shadow(0 0 22px #b354e866);
  text-shadow: none;
}

.lead {
  color: #d7cbe0;
  max-width: 820px;
}

.pill {
  color: #c4aed3;
  border-color: #5b3b78;
  background: #11071de0;
}

.nav {
  border-color: #5f3b7c;
  background: #0c0614df;
  backdrop-filter: blur(15px);
}

.panel,
.section {
  border-color: var(--line);
  background: linear-gradient(145deg, var(--panel), #08040eea);
  box-shadow: 0 17px 46px #0008;
  backdrop-filter: blur(10px);
}

.panel::before,
.section::before {
  background: linear-gradient(var(--purple), var(--cyan));
  box-shadow: 0 0 17px #c260ff88;
}

.panel h2,
.section h2 {
  font-family: Orbitron, Eurostile, "Segoe UI", sans-serif;
  font-size: clamp(1.05rem, 2.2vw, 1.28rem);
  letter-spacing: .015em;
  color: #f8f0ff;
}

.section-tag {
  color: #9eefff;
}

.section p,
.panel p,
.list li {
  color: var(--muted);
}

.card,
.list li {
  border-color: #4a3161;
  background: #130a20e8;
}

.card h3 {
  color: #f1e5fb;
}

.card p {
  color: #bbaac8;
}

.notice {
  border-color: #796038;
  background: linear-gradient(145deg, #2b2115d9, #0d0716e8);
}

.danger {
  border-color: #87505f;
  background: linear-gradient(145deg, #2c121ce0, #0d0716ec);
}

.glow {
  border-color: #77509b;
  background: linear-gradient(135deg, #30164b, #182040);
  box-shadow: 0 0 18px #b64dff30, inset 0 0 17px #d275ff16;
}

.glow.alt {
  border-color: #4f7198;
  background: linear-gradient(135deg, #182c49, #25143f);
}

.glow:hover,
.glow:focus-visible {
  border-color: #d47cff;
  box-shadow: 0 0 28px #bd5aff69, inset 0 0 22px #df81ff24;
}

.signal {
  background: linear-gradient(145deg, #211037e8, #10243be8);
}

.footer {
  border-top-color: #472b60;
  background: #06020bdd;
  color: #9a86a8;
}

.footer a {
  color: #d7b2f1;
}

.back {
  border-color: #a45bd0;
  background: #32134c;
  box-shadow: 0 0 22px #c05aff55;
}

@media (max-width: 850px) {
  body {
    background-image:
      linear-gradient(#040108ed, #0b0312eb),
      radial-gradient(circle at 50% 5%, #502078 0, transparent 32%),
      url("assets/purplejack-character.jpg"),
      linear-gradient(145deg, var(--space), var(--deep) 52%, #020106);
    background-position: center, center top, center 90px, center;
    background-size: auto, auto, min(92vw, 650px) auto, cover;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 1rem;
  }

  .hero h1 {
    font-size: clamp(2rem, 11vw, 3.2rem);
  }

  .section,
  .panel {
    backdrop-filter: blur(7px);
  }
}