html[data-theme="modern"] body {
  background: var(--paper);
}

html[data-theme="modern"] .topbar {
  border-bottom-color: rgba(255, 255, 255, 0.15);
  color: white;
}

html[data-theme="modern"] .hero {
  color: white;
  background: radial-gradient(
    circle at 74% 38%,
    #313743 0,
    #181b22 35%,
    #101217 70%
  );
  border-bottom: 0;
  box-shadow: none;
}

html[data-theme="modern"] .hero::after {
  border: 1px solid rgba(217, 255, 63, 0.2);
  box-shadow:
    0 0 0 8vw rgba(217, 255, 63, 0.025),
    0 0 0 16vw rgba(217, 255, 63, 0.018);
}

html[data-theme="modern"] .heroGrid {
  opacity: 0.13;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
}

html[data-theme="modern"] .heroContent::before,
html[data-theme="modern"] .heroContent::after {
  display: none;
}

html[data-theme="modern"] .cyrillicName {
  color: var(--acid);
}

html[data-theme="modern"] .levelSeal {
  border: 1px solid rgba(255, 255, 255, 0.35);
  transform: none;
}

html[data-theme="modern"] .levelSeal::before {
  border-color: rgba(217, 255, 63, 0.5);
}

html[data-theme="modern"] .heroBottom {
  color: rgba(255, 255, 255, 0.6);
}

html[data-theme="modern"] .scrollLink {
  border-bottom-color: rgba(255, 255, 255, 0.3);
  color: white;
}

html[data-theme="modern"] .sectionLabel.light {
  border-color: #363941;
  color: white;
}

html[data-theme="modern"] .abilitySection {
  background: var(--ink);
  color: white;
  border: 0;
  box-shadow: none;
}

html[data-theme="modern"] .abilitySection::before {
  display: none;
}

html[data-theme="modern"] .abilityIntro {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

html[data-theme="modern"] .abilityCopy {
  color: #a5a7ae;
  column-rule-color: #30333a;
}

html[data-theme="modern"] .abilityCopy strong {
  color: white;
}

html[data-theme="modern"] .techniqueGrid,
html[data-theme="modern"] .statsPanel,
html[data-theme="modern"] .abilityDetails {
  border-color: #30333a;
}

html[data-theme="modern"] .techniqueGrid article,
html[data-theme="modern"] .abilityDetails > div {
  border-color: #30333a;
  background: transparent;
}

html[data-theme="modern"] .techniqueGrid p {
  color: #a5a7ae;
}

html[data-theme="modern"] .radarGrid polygon,
html[data-theme="modern"] .radarAxes line {
  stroke: #343942;
}

html[data-theme="modern"] .radarGrid .radarOuter {
  stroke: #5a626c;
}

html[data-theme="modern"] .radarLabels text {
  fill: #d8dbe0;
}

html[data-theme="modern"] .bar {
  background: #32353c;
}

html[data-theme="modern"] .strengths li,
html[data-theme="modern"] .limits li {
  border-color: #30333a;
  color: #b8bac0;
}

html[data-theme="modern"] .abilityDetails span {
  color: #888b93;
}

html[data-theme="modern"] .abilityDetails p {
  color: #b8bac0;
}

html[data-theme="modern"] .abilitySection .paleText {
  color: var(--pale);
}

@media (max-width: 650px) {
  html[data-theme="modern"] .abilityIntro {
    padding: 0;
  }

  html[data-theme="modern"] .techniqueGrid article,
  html[data-theme="modern"] .abilityDetails > div {
    padding-right: 4px;
    padding-left: 4px;
  }
}