.landing::before,
.landing::after {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 0;
  pointer-events: none;
}

.landing::before {
  background:
    linear-gradient(90deg, rgba(201, 188, 255, .27), transparent 24px) left top / 44px 1px no-repeat,
    linear-gradient(rgba(201, 188, 255, .27), transparent 24px) left top / 1px 44px no-repeat,
    linear-gradient(270deg, rgba(104, 177, 255, .23), transparent 24px) right top / 44px 1px no-repeat,
    linear-gradient(rgba(104, 177, 255, .23), transparent 24px) right top / 1px 44px no-repeat,
    linear-gradient(90deg, rgba(201, 188, 255, .18), transparent 24px) left bottom / 44px 1px no-repeat,
    linear-gradient(0deg, rgba(201, 188, 255, .18), transparent 24px) left bottom / 1px 44px no-repeat,
    linear-gradient(270deg, rgba(104, 177, 255, .18), transparent 24px) right bottom / 44px 1px no-repeat,
    linear-gradient(0deg, rgba(104, 177, 255, .18), transparent 24px) right bottom / 1px 44px no-repeat;
}

.landing::after {
  inset: 0;
  opacity: .11;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(194, 199, 224, .13) 4px, transparent 5px);
  mix-blend-mode: screen;
  animation: saint-scan 12s linear infinite;
}

.edge-mark {
  position: absolute;
  z-index: 3;
  top: calc(var(--nav-h) + 22px);
  font: 7px/1.85 var(--mono);
  letter-spacing: .13em;
  color: rgba(221, 222, 234, .6);
  text-shadow: 0 0 14px rgba(110, 140, 255, .2);
}

.edge-mark span {
  color: rgba(151, 153, 171, .54);
  font-size: 6px;
}

.edge-left { left: 3.5%; }
.edge-right { right: 3.5%; top: 13.5%; text-align: right; }

.corner-index {
  position: absolute;
  z-index: 3;
  left: 3.5%;
  bottom: 5.5%;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 7px var(--mono);
  letter-spacing: .16em;
  color: rgba(200, 201, 214, .64);
}

.corner-index i {
  display: block;
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, #9d79ff, #61baff);
  box-shadow: 0 0 8px rgba(115, 144, 255, .45);
}

.mode-toggle {
  box-shadow: 0 0 32px rgba(130, 118, 255, .1), inset 0 0 14px rgba(255, 255, 255, .035);
}

.discord-link {
  box-shadow: 0 8px 36px rgba(0, 0, 0, .38), 0 0 26px rgba(143, 125, 255, .08);
}

.discord-arrow {
  color: #e8ddff;
  box-shadow: 0 0 12px rgba(168, 139, 255, .15);
}

.landing.soft-mode::before {
  filter: hue-rotate(20deg) brightness(1.24);
}

@keyframes saint-scan {
  0% { transform: translateY(-7px); }
  100% { transform: translateY(7px); }
}

@media (max-width: 700px) {
  .landing::before { inset: 10px; }
  .edge-mark { top: calc(var(--nav-h) + 18px); font-size: 6px; }
  .edge-mark span { font-size: 5px; }
  .edge-left { left: 6%; }
  .edge-right { right: 6%; top: 12%; max-width: 90px; }
  .corner-index { left: 6%; bottom: 4%; gap: 6px; font-size: 6px; }
  .corner-index i { width: 18px; }
  .landing::after { opacity: .08; }
}

@media (prefers-reduced-motion: reduce) {
  .landing::after { animation: none; }
}