:root {
  --rift-bg: #07080b;
  --rift-panel: #0d1118;
  --rift-panel-raised: #121823;
  --rift-cyan: #47dff2;
  --rift-cyan-soft: rgba(71, 223, 242, .14);
  --rift-red: #ff4f6f;
  --rift-red-soft: rgba(255, 79, 111, .13);
  --rift-gold: #f5c451;
  --rift-green: #72df8b;
  --rift-purple: #9a6cff;
  --rift-text: #f7f9fb;
  --rift-muted: #aeb7c2;
  --rift-line: rgba(171, 193, 214, .18);
  --rift-shadow: 0 18px 52px rgba(0, 0, 0, .42);
}

body {
  position: relative;
  isolation: isolate;
  color: var(--rift-text);
  background:
    linear-gradient(125deg, rgba(30, 60, 78, .18), transparent 36%),
    linear-gradient(235deg, rgba(84, 43, 105, .16), transparent 34%),
    linear-gradient(180deg, #070b11 0%, #080a10 48%, #05070b 100%);
}

body::before {
  background-image:
    linear-gradient(rgba(71, 223, 242, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71, 223, 242, .022) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .48;
}

body::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .68), transparent 17%, transparent 83%, rgba(0, 0, 0, .68)),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(255, 255, 255, .01) 7px 8px);
  opacity: .36;
}

.fx-layer {
  display: none;
}

.storm-sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(118deg, rgba(13, 31, 44, .82) 0%, rgba(7, 11, 18, .2) 38%, rgba(25, 14, 38, .38) 72%, rgba(7, 9, 14, .76) 100%),
    linear-gradient(180deg, #0a111a 0%, #090c13 54%, #05070b 100%);
}

.storm-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    repeating-linear-gradient(118deg, transparent 0 86px, rgba(71, 223, 242, .035) 87px 89px, transparent 90px 174px),
    repeating-linear-gradient(62deg, transparent 0 122px, rgba(154, 108, 255, .025) 123px 125px, transparent 126px 246px);
  mask-image: linear-gradient(180deg, black 0%, rgba(0, 0, 0, .72) 72%, transparent 100%);
}

.storm-sky::after {
  content: "";
  position: absolute;
  right: -3vw;
  bottom: -2px;
  left: -3vw;
  z-index: 0;
  height: 34vh;
  min-height: 220px;
  background:
    linear-gradient(rgba(71, 223, 242, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71, 223, 242, .075) 1px, transparent 1px),
    linear-gradient(180deg, rgba(18, 34, 45, .78), rgba(5, 8, 13, .98));
  background-size: 48px 48px, 48px 48px, auto;
  clip-path: polygon(0 59%, 5% 59%, 5% 44%, 10% 44%, 10% 64%, 16% 64%, 16% 31%, 21% 31%, 21% 52%, 27% 52%, 27% 20%, 33% 20%, 33% 69%, 40% 69%, 40% 39%, 46% 39%, 46% 56%, 52% 56%, 52% 27%, 58% 27%, 58% 47%, 65% 47%, 65% 17%, 71% 17%, 71% 63%, 78% 63%, 78% 35%, 84% 35%, 84% 54%, 91% 54%, 91% 25%, 96% 25%, 96% 61%, 100% 61%, 100% 100%, 0 100%);
  opacity: .43;
}

main {
  position: relative;
  z-index: 1;
}

main::before,
main::after {
  content: "";
  position: fixed;
  top: 76px;
  bottom: 0;
  z-index: 8;
  width: 3px;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, var(--rift-cyan) 0 18px, transparent 18px 31px, var(--rift-red) 31px 39px, transparent 39px 58px);
  opacity: .38;
}

main::before { left: 10px; }
main::after { right: 10px; transform: scaleY(-1); }

body:not(.home-active) main {
  min-height: calc(100svh - 76px);
  border-block: 1px solid rgba(71, 223, 242, .12);
  background:
    linear-gradient(90deg, rgba(71, 223, 242, .035), transparent 24%, transparent 76%, rgba(255, 79, 111, .03)),
    rgba(5, 8, 13, .34);
  box-shadow: inset 0 1px 0 rgba(245, 196, 81, .08), inset 0 -1px 0 rgba(154, 108, 255, .08);
}

.storm-flash {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(112deg, transparent 0 44%, rgba(200, 242, 255, .48) 49%, rgba(144, 203, 255, .16) 54%, transparent 61%);
  opacity: 0;
  mix-blend-mode: screen;
  animation: stormFlash 14s linear infinite;
}

.storm-mist {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  opacity: .68;
  mask-image: linear-gradient(180deg, black 0%, rgba(0, 0, 0, .88) 70%, transparent 100%);
}

.storm-mist span {
  position: absolute;
  left: -28vw;
  width: 155vw;
  height: 26vh;
  background: repeating-linear-gradient(174deg, transparent 0 26px, rgba(123, 188, 211, .06) 28px 31px, transparent 33px 104px);
  filter: blur(5px);
  transform: skewX(-18deg);
  animation: mistDrift 24s linear infinite;
}

.storm-mist span:nth-child(1) { top: 2%; animation-duration: 28s; }
.storm-mist span:nth-child(2) { top: 35%; animation-delay: -11s; animation-duration: 34s; opacity: .72; }
.storm-mist span:nth-child(3) { top: 69%; animation-delay: -19s; animation-duration: 39s; opacity: .48; }

.wind-field {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  transform: skewY(-7deg);
}

.wind-field i {
  position: absolute;
  left: -38vw;
  width: clamp(150px, 24vw, 430px);
  height: 2px;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgba(125, 225, 243, .1) 12%, rgba(191, 245, 255, .82) 62%, transparent);
  box-shadow: 0 0 8px rgba(71, 223, 242, .38);
  opacity: 0;
  will-change: transform, opacity;
  animation: windSweep 7s linear infinite;
}

.wind-field i:nth-child(1) { top: 8%; animation-delay: -1.2s; animation-duration: 6.8s; }
.wind-field i:nth-child(2) { top: 16%; animation-delay: -4.8s; animation-duration: 8.4s; width: 19vw; }
.wind-field i:nth-child(3) { top: 25%; animation-delay: -6.1s; animation-duration: 7.6s; }
.wind-field i:nth-child(4) { top: 33%; animation-delay: -2.8s; animation-duration: 9.2s; width: 30vw; }
.wind-field i:nth-child(5) { top: 42%; animation-delay: -7.3s; animation-duration: 6.4s; }
.wind-field i:nth-child(6) { top: 51%; animation-delay: -.6s; animation-duration: 8.9s; width: 17vw; }
.wind-field i:nth-child(7) { top: 60%; animation-delay: -5.4s; animation-duration: 7.2s; }
.wind-field i:nth-child(8) { top: 68%; animation-delay: -3.5s; animation-duration: 9.8s; width: 27vw; }
.wind-field i:nth-child(9) { top: 75%; animation-delay: -8.2s; animation-duration: 7.9s; }
.wind-field i:nth-child(10) { top: 82%; animation-delay: -2.1s; animation-duration: 8.6s; width: 21vw; }
.wind-field i:nth-child(11) { top: 89%; animation-delay: -6.9s; animation-duration: 6.9s; }
.wind-field i:nth-child(12) { top: 95%; animation-delay: -4.1s; animation-duration: 10.2s; width: 33vw; }

.lightning-field {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
}

.lightning-field b {
  position: absolute;
  top: -5vh;
  width: 82px;
  height: 72vh;
  background: linear-gradient(180deg, #f3feff 0%, #98eaff 45%, #806dff 100%);
  clip-path: polygon(46% 0, 64% 0, 55% 29%, 76% 29%, 48% 54%, 65% 54%, 20% 100%, 39% 61%, 24% 61%, 44% 37%, 31% 37%);
  filter: drop-shadow(0 0 8px rgba(196, 246, 255, .95)) drop-shadow(0 0 24px rgba(74, 196, 255, .72));
  opacity: 0;
  transform-origin: top center;
  will-change: opacity;
  animation: lightningStrike 17s linear infinite;
}

.lightning-field b:nth-child(1) { left: 70%; animation-delay: -2.4s; }
.lightning-field b:nth-child(2) { left: 18%; height: 58vh; transform: scale(.72) rotate(5deg); animation-delay: -10.8s; animation-duration: 23s; }
.lightning-field b:nth-child(3) { left: 88%; height: 48vh; transform: scale(.58) rotate(-4deg); animation-delay: -16.5s; animation-duration: 29s; }

@keyframes windSweep {
  0% { transform: translate3d(-12vw, 0, 0); opacity: 0; }
  10% { opacity: .18; }
  24% { opacity: .88; }
  76% { opacity: .42; }
  100% { transform: translate3d(176vw, 0, 0); opacity: 0; }
}

@keyframes mistDrift {
  from { transform: translate3d(-12vw, 0, 0) skewX(-18deg); }
  to { transform: translate3d(22vw, -2vh, 0) skewX(-18deg); }
}

@keyframes lightningStrike {
  0%, 7.4%, 8.7%, 100% { opacity: 0; }
  7.55% { opacity: .96; }
  7.72% { opacity: .12; }
  7.93% { opacity: 1; }
  8.18% { opacity: .24; }
  8.34% { opacity: .82; }
}

@keyframes stormFlash {
  0%, 11.7%, 13.2%, 49%, 50.1%, 100% { opacity: 0; }
  11.85% { opacity: .5; }
  12.04% { opacity: .08; }
  12.28% { opacity: .62; }
  12.55% { opacity: .12; }
  49.35% { opacity: .24; }
  49.55% { opacity: .04; }
  49.78% { opacity: .34; }
}

.site-header {
  min-height: 76px;
  border-bottom: 1px solid rgba(71, 223, 242, .26);
  background:
    linear-gradient(90deg, rgba(71, 223, 242, .07), transparent 35%, rgba(255, 79, 111, .055)),
    rgba(6, 8, 12, .92);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .46);
}

.site-header::after {
  background: linear-gradient(90deg, transparent, var(--rift-cyan) 24%, var(--rift-purple) 49%, var(--rift-red) 72%, var(--rift-gold), transparent);
}

.brand {
  text-shadow: 0 0 18px rgba(71, 223, 242, .18);
}

.brand img {
  border-color: rgba(71, 223, 242, .55);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .48), 0 0 20px rgba(71, 223, 242, .18);
}

.brand-copy small {
  color: var(--rift-cyan);
}

.quick-live {
  border-color: rgba(71, 223, 242, .72);
  color: #061014;
  background: linear-gradient(180deg, #7eeaf6, #2aaec1);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .24), 0 0 22px rgba(71, 223, 242, .16);
}

.quick-live i {
  background: #061014;
}

.login-button {
  border-color: rgba(255, 79, 111, .42);
  background: linear-gradient(180deg, rgba(255, 79, 111, .17), rgba(31, 10, 19, .92));
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .32), 0 0 16px rgba(255, 79, 111, .09);
}

.menu-toggle {
  border-color: rgba(245, 196, 81, .38);
  background: rgba(245, 196, 81, .07);
}

.side-menu {
  border-left-color: rgba(71, 223, 242, .3);
  background:
    linear-gradient(rgba(71, 223, 242, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71, 223, 242, .035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(12, 18, 27, .99), rgba(6, 8, 12, .99));
  background-size: 32px 32px, 32px 32px, auto;
}

.side-menu::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 210px;
  background:
    linear-gradient(145deg, rgba(71, 223, 242, .16), transparent 42%),
    repeating-linear-gradient(118deg, transparent 0 22px, rgba(154, 108, 255, .07) 23px 25px, transparent 26px 58px),
    linear-gradient(180deg, rgba(12, 18, 27, .86), rgba(7, 8, 11, .98));
  opacity: .86;
  pointer-events: none;
}

.side-menu > * {
  position: relative;
  z-index: 1;
}

.side-menu .nav a {
  border-color: rgba(171, 193, 214, .14);
  background: rgba(255, 255, 255, .025);
}

.side-menu .nav a span {
  color: var(--rift-cyan);
}

.side-menu .nav a:hover {
  border-color: rgba(71, 223, 242, .54);
  background: linear-gradient(90deg, rgba(71, 223, 242, .13), rgba(255, 79, 111, .045));
}

.menu-server-status {
  border-color: rgba(114, 223, 139, .22);
  background: rgba(114, 223, 139, .055);
}

.hero {
  grid-template-columns: minmax(0, 1.62fr) minmax(330px, .78fr);
  gap: clamp(30px, 5vw, 82px);
  align-items: center;
  min-height: min(760px, calc(100svh - 118px));
  max-width: none;
  padding: clamp(62px, 8vw, 116px) clamp(20px, 7vw, 110px) clamp(48px, 6vw, 82px);
  border-bottom: 1px solid rgba(71, 223, 242, .22);
  background:
    linear-gradient(90deg, rgba(5, 7, 10, .94) 0%, rgba(5, 7, 10, .72) 38%, rgba(5, 7, 10, .26) 70%, rgba(5, 7, 10, .08) 100%),
    linear-gradient(180deg, rgba(5, 7, 10, .08) 48%, rgba(5, 7, 10, .72) 100%);
}

.hero::before {
  z-index: 1;
  background:
    linear-gradient(rgba(71, 223, 242, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71, 223, 242, .05) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(90deg, black, transparent 76%);
}

.hero::after {
  content: "";
  right: auto;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 58%;
  height: 5px;
  background: linear-gradient(90deg, var(--rift-cyan), var(--rift-purple), var(--rift-red), transparent);
  opacity: 1;
}

.hero-grid {
  display: none;
}

.hero-content {
  z-index: 3;
  width: min(940px, 100%);
  max-width: none;
}

.hero-panel {
  display: none;
}

.hero-storm-display {
  position: relative;
  z-index: 3;
  display: grid;
  width: min(100%, 500px);
  justify-self: end;
  gap: 14px;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .48));
}

.storm-emblem-shell {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(71, 223, 242, .48);
  background:
    linear-gradient(145deg, rgba(71, 223, 242, .18), transparent 31%, transparent 67%, rgba(255, 79, 111, .14)),
    rgba(7, 11, 18, .76);
  clip-path: polygon(9% 0, 91% 0, 100% 9%, 100% 81%, 82% 100%, 8% 100%, 0 91%, 0 12%);
  box-shadow: inset 0 0 54px rgba(71, 223, 242, .07), 0 0 34px rgba(71, 223, 242, .12);
  animation: emblemCharge 5.2s ease-in-out infinite;
}

.storm-emblem-shell::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 0;
  border: 1px solid rgba(245, 196, 81, .2);
  clip-path: polygon(8% 0, 92% 0, 100% 10%, 100% 84%, 84% 100%, 7% 100%, 0 92%, 0 9%);
  background: linear-gradient(180deg, rgba(12, 20, 29, .38), rgba(5, 8, 13, .76));
}

.storm-emblem-shell::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 17%;
  z-index: 1;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--rift-cyan) 24%, var(--rift-purple) 58%, var(--rift-red), transparent);
  box-shadow: 0 0 16px rgba(71, 223, 242, .6);
}

.emblem-grid {
  position: absolute;
  inset: 26px;
  z-index: 1;
  background:
    linear-gradient(rgba(71, 223, 242, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71, 223, 242, .06) 1px, transparent 1px);
  background-size: 34px 34px;
  clip-path: polygon(0 0, 100% 0, 100% 86%, 84% 100%, 0 100%);
  opacity: .75;
}

.emblem-bracket {
  position: absolute;
  z-index: 2;
  width: 84px;
  height: 84px;
  border-color: var(--rift-gold);
  border-style: solid;
  opacity: .82;
}

.bracket-one {
  top: 32px;
  right: 34px;
  border-width: 4px 4px 0 0;
}

.bracket-two {
  bottom: 34px;
  left: 34px;
  border-width: 0 0 4px 4px;
  border-color: var(--rift-red);
}

.storm-emblem-mark {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1vw, 14px);
  padding-bottom: 42px;
}

.storm-emblem-mark span {
  color: #f7fbff;
  font-size: clamp(68px, 6.4vw, 116px);
  font-weight: 1000;
  line-height: 1;
  text-shadow:
    0 5px 0 #206172,
    0 10px 0 #102f3a,
    4px 0 0 rgba(255, 79, 111, .65),
    0 0 24px rgba(71, 223, 242, .3);
}

.storm-emblem-mark span:nth-child(2) {
  color: #dffbff;
  text-shadow:
    0 5px 0 #6247a0,
    0 10px 0 #2b224d,
    4px 0 0 rgba(245, 196, 81, .7),
    0 0 24px rgba(154, 108, 255, .34);
}

.storm-emblem-mark span:nth-child(3) {
  color: #fff4d5;
  text-shadow:
    0 5px 0 #9c3f56,
    0 10px 0 #4b1e2c,
    4px 0 0 rgba(71, 223, 242, .7),
    0 0 24px rgba(255, 79, 111, .3);
}

.emblem-axis {
  position: absolute;
  right: 36px;
  bottom: 104px;
  left: 36px;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.15fr .65fr 1.6fr;
  gap: 8px;
}

.emblem-axis i {
  height: 5px;
  background: var(--rift-cyan);
  box-shadow: 0 0 12px rgba(71, 223, 242, .62);
  animation: circuitPulse 3.8s ease-in-out infinite;
}

.emblem-axis i:nth-child(2) { background: var(--rift-gold); animation-delay: -.9s; }
.emblem-axis i:nth-child(3) { background: var(--rift-red); animation-delay: -1.8s; }

.emblem-core-label {
  position: absolute;
  right: 36px;
  bottom: 36px;
  left: 36px;
  z-index: 3;
  display: flex;
  align-items: end;
  justify-content: space-between;
  border-top: 1px solid rgba(171, 193, 214, .2);
  padding-top: 12px;
}

.emblem-core-label span {
  color: var(--rift-muted);
  font-size: 10px;
  font-weight: 900;
}

.emblem-core-label strong {
  color: var(--rift-cyan);
  font-size: 22px;
  letter-spacing: 0;
}

.emblem-readouts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid rgba(71, 223, 242, .24);
  background: rgba(6, 10, 16, .76);
}

.emblem-readouts div {
  min-width: 0;
  padding: 11px 12px;
  border-right: 1px solid rgba(171, 193, 214, .14);
}

.emblem-readouts div:last-child { border-right: 0; }

.emblem-readouts span,
.emblem-readouts strong {
  display: block;
  overflow-wrap: anywhere;
}

.emblem-readouts span {
  color: var(--rift-muted);
  font-size: 8px;
  font-weight: 900;
}

.emblem-readouts strong {
  margin-top: 4px;
  color: var(--rift-green);
  font-size: 11px;
}

.emblem-readouts div:nth-child(2) strong { color: var(--rift-cyan); }
.emblem-readouts div:nth-child(3) strong { color: var(--rift-gold); }

@keyframes emblemCharge {
  0%, 100% { filter: brightness(.94); box-shadow: inset 0 0 54px rgba(71, 223, 242, .05), 0 0 28px rgba(71, 223, 242, .08); }
  50% { filter: brightness(1.08); box-shadow: inset 0 0 72px rgba(71, 223, 242, .1), 0 0 42px rgba(154, 108, 255, .14); }
}

@keyframes circuitPulse {
  0%, 100% { opacity: .42; }
  50% { opacity: 1; }
}

.hero-kicker {
  border-color: rgba(71, 223, 242, .3);
  color: #c8d7df;
  background: rgba(6, 10, 15, .76);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .28);
}

.hero-kicker b,
.eyebrow {
  color: var(--rift-gold);
}

.signal-dot,
.refresh-live i,
.panel-tag i,
.menu-server-status i {
  background: var(--rift-green);
  box-shadow: 0 0 12px var(--rift-green);
}

.hero h1 {
  max-width: 920px;
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-size: clamp(52px, 5.9vw, 100px);
  line-height: .88;
  text-shadow:
    0 5px 0 #1a5662,
    0 10px 0 #102c35,
    0 15px 32px rgba(0, 0, 0, .82),
    3px 0 0 rgba(255, 79, 111, .52);
}

.storm-title {
  overflow: visible;
}

.storm-title span {
  --strike-delay: 0s;
  position: relative;
  display: inline-block;
  opacity: 0;
  transform: translateY(-.16em) scale(.88);
  transform-origin: 50% 78%;
  filter: brightness(2.8) saturate(1.5);
  will-change: opacity, transform, filter;
  animation: titleLetterStrike 12s linear infinite;
  animation-delay: var(--strike-delay);
}

.storm-title span::before {
  content: "";
  position: absolute;
  top: -.72em;
  left: 45%;
  z-index: 2;
  width: .2em;
  height: 1.36em;
  background: linear-gradient(180deg, #ffffff, #8cecff 58%, #8d75ff);
  clip-path: polygon(38% 0, 100% 0, 62% 38%, 100% 38%, 0 100%, 34% 55%, 0 55%);
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px rgba(71, 223, 242, .96));
  opacity: 0;
  pointer-events: none;
  animation: titleLetterBolt 12s linear infinite;
  animation-delay: var(--strike-delay);
}

.storm-title span:nth-child(1) { --strike-delay: 0s; }
.storm-title span:nth-child(2) { --strike-delay: .14s; }
.storm-title span:nth-child(3) { --strike-delay: .28s; }
.storm-title span:nth-child(4) { --strike-delay: .42s; }
.storm-title span:nth-child(5) { --strike-delay: .56s; }
.storm-title span:nth-child(6) { --strike-delay: .7s; }
.storm-title span:nth-child(7) { --strike-delay: .84s; }
.storm-title span:nth-child(8) { --strike-delay: .98s; }
.storm-title span:nth-child(9) { --strike-delay: 1.12s; }
.storm-title span:nth-child(10) { --strike-delay: 1.26s; }
.storm-title span:nth-child(11) { --strike-delay: 1.4s; }
.storm-title span:nth-child(12) { --strike-delay: 1.54s; }
.storm-title span:nth-child(13) { --strike-delay: 1.68s; }
.storm-title span:nth-child(14) { --strike-delay: 1.82s; }
.storm-title span:nth-child(15) { --strike-delay: 1.96s; }
.storm-title span:nth-child(16) { --strike-delay: 2.1s; }

@keyframes titleLetterStrike {
  0%, 3.7% {
    opacity: 0;
    transform: translateY(-.16em) scale(.88);
    filter: brightness(2.8) saturate(1.5);
  }
  3.84% {
    opacity: 1;
    transform: translateY(.025em) scale(1.08);
    filter: brightness(4.5) saturate(1.9);
  }
  4.02% {
    opacity: .18;
    transform: translateY(-.035em) scale(.97);
  }
  4.24% {
    opacity: 1;
    transform: translateY(0) scale(1.025);
    filter: brightness(2.4) saturate(1.45);
  }
  4.58%, 72% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1) saturate(1);
  }
  77%, 100% {
    opacity: 0;
    transform: translateY(.07em) scale(.96);
    filter: brightness(.8) saturate(.8);
  }
}

@keyframes titleLetterBolt {
  0%, 3.72%, 4.5%, 100% { opacity: 0; }
  3.83% { opacity: 1; }
  3.99% { opacity: .08; }
  4.14% { opacity: .94; }
  4.34% { opacity: .16; }
}

.hero-copy {
  max-width: 690px;
  color: #d3dbe2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}

.power-row span {
  border-color: rgba(71, 223, 242, .23);
  color: #dffaff;
  background: rgba(9, 15, 21, .8);
}

.power-row span:nth-child(2) {
  border-color: rgba(255, 79, 111, .26);
  color: #ffdce4;
}

.power-row span:nth-child(3) {
  border-color: rgba(245, 196, 81, .3);
  color: #ffe8a5;
}

.hero-hud {
  max-width: 780px;
  border-color: rgba(171, 193, 214, .22);
  background: rgba(7, 10, 15, .72);
  backdrop-filter: blur(8px);
}

.hero-hud div {
  border-right: 1px solid rgba(171, 193, 214, .13);
}

.hero-hud div:last-child {
  border-right: 0;
}

.hero-hud span {
  color: var(--rift-cyan);
}

.button.primary {
  color: #071014;
  background: linear-gradient(180deg, #7ce9f4, #2aaec1);
}

.button.live-action {
  border-color: rgba(255, 79, 111, .6);
  color: #fff;
  background: linear-gradient(180deg, #ff718d, #c72e51);
}

.button.ghost {
  border-color: rgba(171, 193, 214, .24);
  background: rgba(12, 16, 23, .78);
}

.hero-telemetry {
  width: min(900px, 100%);
  border-color: rgba(71, 223, 242, .2);
  background: rgba(71, 223, 242, .14);
  backdrop-filter: blur(8px);
}

.hero-telemetry div {
  background: rgba(7, 10, 15, .86);
}

.hero-telemetry strong {
  color: var(--rift-cyan);
}

.section,
.server-band {
  max-width: 1540px;
}

.section-head::after {
  width: 118px;
  background: linear-gradient(90deg, var(--rift-cyan) 0 45%, var(--rift-red) 45% 72%, var(--rift-gold) 72%);
  box-shadow: 0 0 14px rgba(71, 223, 242, .2);
}

.feature-grid {
  gap: 16px;
}

.feature {
  min-height: 230px;
  border: 1px solid rgba(171, 193, 214, .16);
  background:
    linear-gradient(145deg, rgba(71, 223, 242, .08), transparent 58%),
    var(--rift-panel);
  box-shadow: 7px 7px 0 rgba(0, 0, 0, .24), var(--rift-shadow);
}

.feature:nth-child(2) {
  background: linear-gradient(145deg, rgba(255, 79, 111, .075), transparent 58%), var(--rift-panel);
}

.feature:nth-child(3) {
  background: linear-gradient(145deg, rgba(245, 196, 81, .075), transparent 58%), var(--rift-panel);
}

.feature:hover {
  border-color: rgba(71, 223, 242, .52);
}

.feature-number {
  color: rgba(71, 223, 242, .12);
}

.feature:nth-child(2) .feature-number { color: rgba(255, 79, 111, .12); }
.feature:nth-child(3) .feature-number { color: rgba(245, 196, 81, .13); }

.ranks-section {
  max-width: none;
  padding-block: clamp(58px, 7vw, 100px);
  background:
    linear-gradient(90deg, rgba(71, 223, 242, .035), transparent 45%, rgba(255, 79, 111, .03)),
    rgba(5, 7, 11, .62);
  border-block-color: rgba(171, 193, 214, .12);
}

.rank-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.rank-entry,
.rank-owner,
.rank-chief {
  grid-column: auto;
  min-height: 178px;
  padding: 18px 20px;
  border-color: color-mix(in srgb, var(--rank-color) 42%, transparent);
  border-left-width: 4px;
  background:
    linear-gradient(105deg, var(--rank-color-soft), transparent 35%),
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent),
    rgba(12, 16, 22, .94);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, .22);
}

.rank-entry::after {
  display: none;
}

.rank-icon {
  width: 52px;
  height: 52px;
  border-radius: 3px;
}

.rank-name {
  font-size: 21px;
}

.rank-duty {
  color: color-mix(in srgb, var(--rank-color) 70%, #dfe7ef 30%);
}

.rank-description {
  border-top-color: rgba(171, 193, 214, .13);
  color: rgba(213, 222, 230, .78);
}

.rank-xp {
  height: 5px;
  border-radius: 0;
}

.rank-xp::before {
  border-radius: 0;
  background: linear-gradient(90deg, var(--rank-color), var(--rift-cyan), var(--rift-gold));
}

.server-band {
  border-color: rgba(71, 223, 242, .22);
  background:
    linear-gradient(90deg, rgba(71, 223, 242, .085), transparent 44%, rgba(255, 79, 111, .065)),
    var(--rift-panel);
}

.server-card {
  border-color: rgba(245, 196, 81, .3);
  background: rgba(8, 11, 16, .82);
}

.live-section {
  max-width: 1740px;
}

.live-command-bar {
  border-color: rgba(71, 223, 242, .2);
  background: linear-gradient(90deg, rgba(71, 223, 242, .075), rgba(255, 79, 111, .04));
}

.api-binding-grid {
  gap: 10px;
}

.api-binding {
  min-height: 100px;
  border-color: rgba(171, 193, 214, .14);
  background: var(--rift-panel);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .18);
}

.api-binding::before {
  background: var(--rift-gold);
}

.api-binding:nth-child(3n + 1)::before { background: var(--rift-cyan); }
.api-binding:nth-child(3n + 2)::before { background: var(--rift-red); }

.api-binding.is-online {
  border-color: rgba(114, 223, 139, .26);
  background: linear-gradient(135deg, rgba(114, 223, 139, .07), var(--rift-panel));
}

.api-binding.is-online::before {
  background: var(--rift-green);
  box-shadow: 0 0 14px rgba(114, 223, 139, .52);
}

.api-binding.is-online strong {
  color: var(--rift-green);
}

.live-source-section {
  position: relative;
  margin: 32px 0;
  padding: 26px 0 30px;
  border-block: 1px solid rgba(171, 193, 214, .14);
  background:
    linear-gradient(90deg, rgba(71, 223, 242, .045), transparent 28%, transparent 72%, rgba(255, 79, 111, .035));
}

.live-source-section::before {
  content: "";
  position: absolute;
  inset: -1px auto auto 0;
  width: min(310px, 34%);
  height: 3px;
  background: linear-gradient(90deg, var(--rift-cyan), var(--rift-gold), transparent);
}

.live-source-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.live-source-head h3 {
  margin: 3px 0 0;
  color: var(--rift-text);
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: 0;
}

.status-source-link,
.live-source-state {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid rgba(71, 223, 242, .24);
  color: var(--rift-cyan);
  background: rgba(71, 223, 242, .055);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.status-source-link:hover {
  border-color: rgba(245, 196, 81, .5);
  color: var(--rift-gold);
  background: rgba(245, 196, 81, .07);
}

.network-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(171, 193, 214, .14);
  background: rgba(5, 8, 12, .72);
}

.network-summary > div {
  min-width: 0;
  padding: 16px 18px;
  border-right: 1px solid rgba(171, 193, 214, .12);
}

.network-summary > div:last-child {
  border-right: 0;
}

.network-summary span,
.network-summary strong {
  display: block;
  overflow-wrap: anywhere;
}

.network-summary span {
  color: var(--rift-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.network-summary strong {
  margin-top: 5px;
  color: var(--rift-green);
  font-size: 24px;
}

.network-summary > div:nth-child(2) strong { color: var(--rift-red); }
.network-summary > div:nth-child(3) strong { color: var(--rift-gold); }
.network-summary > div:nth-child(4) strong { color: var(--rift-cyan); }

.network-maintenance {
  margin-top: 12px;
  border-left: 4px solid var(--rift-gold);
  padding: 12px 14px;
  color: #ffe39a;
  background: rgba(245, 196, 81, .08);
}

.network-maintenance div {
  display: grid;
  gap: 3px;
}

.network-maintenance span {
  color: var(--rift-muted);
  font-size: 13px;
}

.network-status-groups {
  margin-top: 18px;
  border-top: 1px solid rgba(171, 193, 214, .14);
}

.network-status-group {
  border-bottom: 1px solid rgba(171, 193, 214, .14);
}

.network-status-group summary {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 8px;
  color: var(--rift-text);
  cursor: pointer;
  list-style: none;
}

.network-status-group summary::-webkit-details-marker {
  display: none;
}

.network-status-group summary::before {
  content: "+";
  width: 24px;
  flex: 0 0 24px;
  color: var(--rift-cyan);
  font-size: 22px;
  text-align: center;
}

.network-status-group[open] summary::before {
  content: "−";
}

.network-status-group summary span {
  margin-right: auto;
  font-size: 17px;
  font-weight: 900;
}

.network-status-group summary strong {
  color: var(--rift-green);
  font-size: 13px;
}

.network-monitor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 0 18px 32px;
}

.network-monitor {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(171, 193, 214, .13);
  border-left: 4px solid var(--rift-green);
  padding: 13px 14px;
  background: rgba(10, 14, 19, .84);
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}

.network-monitor:hover {
  transform: translateY(-2px);
  border-color: rgba(71, 223, 242, .36);
  background: rgba(14, 20, 27, .94);
}

.network-monitor.offline { border-left-color: var(--rift-red); }
.network-monitor.pending { border-left-color: var(--rift-gold); }
.network-monitor.maintenance { border-left-color: var(--rift-purple); }

.network-monitor-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.monitor-signal {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: var(--rift-green);
  box-shadow: 0 0 12px rgba(114, 223, 139, .58);
}

.offline .monitor-signal { background: var(--rift-red); box-shadow: 0 0 12px rgba(255, 79, 111, .58); }
.pending .monitor-signal { background: var(--rift-gold); box-shadow: 0 0 12px rgba(245, 196, 81, .5); }
.maintenance .monitor-signal { background: var(--rift-purple); box-shadow: 0 0 12px rgba(180, 133, 255, .5); }

.network-monitor-main div {
  min-width: 0;
}

.network-monitor-main strong,
.network-monitor-main small {
  display: block;
  overflow-wrap: anywhere;
}

.network-monitor-main strong {
  color: var(--rift-text);
  font-size: 14px;
}

.network-monitor-main small {
  margin-top: 2px;
  color: var(--rift-muted);
  font-size: 11px;
  text-transform: uppercase;
}

.network-monitor dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 12px 0 0;
}

.network-monitor dl div {
  min-width: 0;
  border-top: 1px solid rgba(171, 193, 214, .1);
  padding-top: 7px;
}

.network-monitor dt,
.network-monitor dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.network-monitor dt {
  color: var(--rift-muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.network-monitor dd {
  margin-top: 2px;
  color: var(--rift-cyan);
  font-size: 11px;
  font-weight: 800;
}

.live-categories-section::before {
  background: linear-gradient(90deg, var(--rift-gold), var(--rift-red), transparent);
}

.live-category-columns {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 28px;
}

.live-category-column {
  min-width: 0;
}

.live-category-column + .live-category-column {
  border-left: 1px solid rgba(171, 193, 214, .14);
  padding-left: 28px;
}

.category-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: var(--rift-text);
  font-weight: 900;
  text-transform: uppercase;
}

.category-column-head strong {
  display: grid;
  min-width: 32px;
  min-height: 28px;
  place-items: center;
  padding: 4px 8px;
  color: #11100a;
  background: var(--rift-gold);
}

.live-category-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.auction-category-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.live-category-card {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 64px;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(171, 193, 214, .14);
  border-radius: 4px;
  padding: 9px 11px;
  color: var(--rift-text);
  background: rgba(9, 13, 18, .86);
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}

.live-category-card:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 196, 81, .46);
  background: rgba(245, 196, 81, .065);
}

.live-category-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid rgba(71, 223, 242, .2);
  background: rgba(71, 223, 242, .055);
}

.live-category-icon img {
  width: 31px;
  height: 31px;
  object-fit: contain;
  image-rendering: pixelated;
}

.live-category-card > span:last-child {
  min-width: 0;
}

.live-category-card strong,
.live-category-card small {
  display: block;
  overflow-wrap: anywhere;
}

.live-category-card strong {
  font-size: 13px;
}

.live-category-card small {
  margin-top: 3px;
  color: var(--rift-muted);
  font-size: 10px;
}

.data-console {
  border-color: rgba(71, 223, 242, .24);
  background:
    linear-gradient(rgba(71, 223, 242, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71, 223, 242, .022) 1px, transparent 1px),
    rgba(8, 11, 16, .95);
  background-size: 40px 40px, 40px 40px, auto;
  box-shadow: 9px 9px 0 rgba(0, 0, 0, .22), var(--rift-shadow);
}

.console-titlebar {
  border-bottom-color: rgba(71, 223, 242, .17);
  color: var(--rift-cyan);
  background: rgba(71, 223, 242, .055);
}

.data-tabs {
  border-bottom-color: rgba(171, 193, 214, .16);
}

.data-tab {
  color: var(--rift-muted);
}

.data-tab:hover {
  border-color: rgba(71, 223, 242, .34);
  color: var(--rift-text);
  background: rgba(71, 223, 242, .07);
}

.data-tab.active {
  color: #061014;
  background: linear-gradient(180deg, #7eeaf6, #2aafc2);
}

.data-toolbar input,
.data-toolbar select,
.tool-panel input,
.tool-panel select,
.mwa-lager-app input,
.mwa-lager-app select,
.radar-toolbar input,
.radar-toolbar select,
.alert-builder input,
.alert-builder select {
  border-color: rgba(171, 193, 214, .2);
  color: var(--rift-text);
  background: #080b10;
}

.data-toolbar input:focus,
.data-toolbar select:focus,
.tool-panel input:focus,
.tool-panel select:focus,
.mwa-lager-app input:focus,
.mwa-lager-app select:focus,
.radar-toolbar input:focus,
.radar-toolbar select:focus,
.alert-builder input:focus,
.alert-builder select:focus {
  border-color: rgba(71, 223, 242, .68);
  box-shadow: 0 0 0 3px rgba(71, 223, 242, .1);
}

.result-card {
  border-color: rgba(171, 193, 214, .14);
  background:
    linear-gradient(145deg, rgba(71, 223, 242, .045), transparent 54%),
    var(--rift-panel);
}

.result-card:nth-child(3n + 2) {
  background: linear-gradient(145deg, rgba(255, 79, 111, .045), transparent 54%), var(--rift-panel);
}

.result-card:nth-child(3n) {
  background: linear-gradient(145deg, rgba(245, 196, 81, .045), transparent 54%), var(--rift-panel);
}

.result-card:hover,
.result-card:focus-visible {
  border-color: rgba(71, 223, 242, .56);
  background: linear-gradient(145deg, rgba(71, 223, 242, .11), rgba(255, 79, 111, .025)), var(--rift-panel-raised);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .3), 0 0 18px rgba(71, 223, 242, .08);
}

.result-category,
.tool-panel h4,
.tool-result,
.compact-table thead th,
.mwa-lager-app h3,
.mwa-lager-app thead th {
  color: var(--rift-gold);
}

.data-pill.good { color: #8cf0a4; }
.data-pill.warn { color: #ffd77a; }
.data-pill.value { color: #85e8f5; }
.data-pill.estimate { color: #d1b6ff; }

.tool-section {
  border-bottom-color: rgba(171, 193, 214, .14);
}

.tool-section-head {
  border-bottom-color: rgba(255, 79, 111, .18);
}

.tool-section-head h3 {
  padding-left: 14px;
  border-left: 4px solid var(--rift-cyan);
  text-shadow: none;
}

.tool-section:nth-of-type(3n + 2) .tool-section-head h3 { border-left-color: var(--rift-red); }
.tool-section:nth-of-type(3n) .tool-section-head h3 { border-left-color: var(--rift-gold); }

.tool-panel {
  border-color: rgba(171, 193, 214, .16);
  background: var(--rift-panel);
}

.history-ranges {
  border-color: rgba(171, 193, 214, .2);
}

.history-ranges button {
  border-right-color: rgba(171, 193, 214, .14);
  color: var(--rift-muted);
  background: #080b10;
}

.history-ranges button:hover,
.history-ranges button.active {
  color: #061014;
  background: linear-gradient(180deg, #7eeaf6, #2aafc2);
}

.market-quote-grid,
.market-radar-stats,
.auction-radar-stats {
  border-color: rgba(171, 193, 214, .16);
  background: rgba(71, 223, 242, .12);
}

.market-quote-grid > div,
.market-radar-stats article,
.auction-radar-stats article {
  background: var(--rift-panel);
}

.market-quote-grid strong,
.market-radar-stats strong,
.auction-radar-stats strong {
  color: var(--rift-cyan);
}

.history-chart {
  border-color: rgba(71, 223, 242, .16);
  background: linear-gradient(180deg, rgba(71, 223, 242, .055), rgba(6, 8, 12, .25)), rgba(6, 8, 12, .5);
}

.history-line {
  stroke: var(--rift-cyan);
  filter: drop-shadow(0 0 7px rgba(71, 223, 242, .4));
}

.history-points circle {
  fill: var(--rift-red);
}

.compact-table {
  border-color: rgba(171, 193, 214, .15);
  background: rgba(5, 7, 11, .52);
}

.compact-table thead th,
.mwa-lager-app thead th {
  background: linear-gradient(180deg, rgba(19, 28, 40, .99), rgba(9, 13, 19, .99));
  border-bottom-color: rgba(71, 223, 242, .2);
}

.compact-table tbody td {
  border-color: rgba(171, 193, 214, .12);
  background: rgba(12, 16, 23, .82);
}

.compact-table tbody tr:hover td {
  border-color: rgba(71, 223, 242, .34);
  background: linear-gradient(90deg, rgba(71, 223, 242, .08), rgba(255, 79, 111, .035)), rgba(12, 16, 23, .9);
}

.opsucht-links {
  border-color: rgba(71, 223, 242, .18);
  background: linear-gradient(90deg, rgba(71, 223, 242, .065), rgba(255, 79, 111, .045));
}

.opsucht-links a {
  border-color: rgba(171, 193, 214, .18);
  background: var(--rift-panel);
}

.opsucht-links a:hover {
  border-color: rgba(255, 79, 111, .48);
  color: #ff9fb2;
}

.mwa-lager-app {
  border-color: rgba(71, 223, 242, .22);
  background:
    linear-gradient(rgba(71, 223, 242, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71, 223, 242, .02) 1px, transparent 1px),
    rgba(8, 11, 16, .96);
  background-size: 40px 40px, 40px 40px, auto;
}

.mwa-lager-app .btn {
  border-color: rgba(171, 193, 214, .2);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent), var(--rift-panel);
}

.mwa-lager-app .btn.primary {
  color: #061014;
  background: linear-gradient(180deg, #7eeaf6, #2aaec1);
}

.mwa-lager-app .btn.danger {
  border-color: rgba(255, 79, 111, .42);
  background: linear-gradient(180deg, rgba(255, 79, 111, .18), rgba(28, 8, 16, .92));
}

.mwa-lager-app .tablewrap {
  border-color: rgba(171, 193, 214, .16);
  background: rgba(5, 7, 11, .46);
}

.mwa-lager-app tbody tr {
  background: linear-gradient(90deg, rgba(71, 223, 242, .055), rgba(255, 255, 255, .018)), rgba(10, 14, 20, .9);
}

.mwa-lager-app tr.status-wird {
  background: linear-gradient(90deg, rgba(245, 196, 81, .2), rgba(245, 196, 81, .05)), rgba(18, 15, 8, .9);
}

.mwa-lager-app tr.status-fertig {
  background: linear-gradient(90deg, rgba(114, 223, 139, .17), rgba(71, 223, 242, .04)), rgba(8, 17, 13, .9);
}

.login-overlay {
  background: rgba(2, 3, 6, .78);
  backdrop-filter: blur(14px);
}

.login-panel {
  border-color: rgba(71, 223, 242, .32);
  background:
    linear-gradient(145deg, rgba(71, 223, 242, .08), transparent 45%, rgba(255, 79, 111, .06)),
    var(--rift-panel);
  box-shadow: 12px 12px 0 rgba(0, 0, 0, .28), 0 30px 90px rgba(0, 0, 0, .55);
}

.detail-shell {
  border-color: rgba(71, 223, 242, .22);
  background: var(--rift-panel);
}

.minecraft-tooltip {
  border-color: rgba(154, 108, 255, .34);
  background: rgba(17, 7, 25, .94);
}

.join-steps > div {
  border-color: rgba(171, 193, 214, .15);
  background: linear-gradient(145deg, rgba(255, 79, 111, .06), rgba(12, 16, 23, .94));
}

.join-steps span {
  color: var(--rift-cyan);
}

.footer {
  border-top-color: rgba(71, 223, 242, .16);
  background: #05070a;
}

.toast {
  border-color: rgba(71, 223, 242, .3);
  background: rgba(9, 13, 19, .96);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .48);
}

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero-storm-display {
    display: none;
  }

  .hero h1 {
    font-size: clamp(52px, 8vw, 100px);
  }
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    background:
      linear-gradient(180deg, rgba(5, 7, 10, .48) 0%, rgba(5, 7, 10, .76) 58%, rgba(5, 7, 10, .94) 100%);
  }

  .hero-storm-display {
    display: none;
  }

  .rank-list {
    grid-template-columns: 1fr;
  }

  .rank-entry,
  .rank-owner,
  .rank-chief {
    grid-column: auto;
  }

  .network-monitor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .live-category-columns {
    grid-template-columns: 1fr;
  }

  .live-category-column + .live-category-column {
    border-top: 1px solid rgba(171, 193, 214, .14);
    border-left: 0;
    padding-top: 24px;
    padding-left: 0;
  }
}

@media (max-width: 620px) {
  .site-header {
    min-height: 66px;
  }

  main::before,
  main::after {
    display: none;
  }

  .hero {
    padding-top: 58px;
    background:
      linear-gradient(180deg, rgba(5, 7, 10, .5), rgba(5, 7, 10, .82) 52%, rgba(5, 7, 10, .97) 100%);
  }

  .hero h1 {
    font-size: clamp(43px, 15vw, 72px);
    overflow-wrap: anywhere;
    text-shadow: 0 4px 0 #1a5662, 0 8px 0 #102c35, 0 12px 24px rgba(0, 0, 0, .82);
  }

  .hero-hud {
    grid-template-columns: 1fr;
  }

  .hero-hud div {
    min-height: 58px;
    border-right: 0;
    border-bottom: 1px solid rgba(171, 193, 214, .13);
  }

  .hero-telemetry {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature {
    min-height: 190px;
  }

  .rank-entry {
    padding: 16px;
  }

  .rank-name {
    font-size: 18px;
  }

  .live-source-head {
    align-items: stretch;
    flex-direction: column;
  }

  .status-source-link,
  .live-source-state {
    align-self: flex-start;
  }

  .network-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .network-summary > div:nth-child(2) {
    border-right: 0;
  }

  .network-summary > div:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(171, 193, 214, .12);
  }

  .network-monitor-grid {
    grid-template-columns: 1fr;
    padding-left: 0;
  }

  .network-status-group summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .network-status-group summary strong {
    width: 100%;
    padding-left: 40px;
  }

  .live-category-cards,
  .auction-category-cards {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .storm-title span {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none !important;
  }

  .storm-title span::before {
    display: none;
  }

  .storm-emblem-shell,
  .emblem-axis i {
    animation: none !important;
  }

  .storm-flash,
  .storm-mist span,
  .wind-field i,
  .lightning-field b {
    animation: none !important;
  }

  .storm-flash,
  .wind-field,
  .lightning-field {
    display: none;
  }
}