:root {
    --ink: #04070c;
    --ink-soft: #07111a;
    --panel: rgba(8, 20, 30, 0.78);
    --line: rgba(114, 239, 255, 0.22);
    --line-warm: rgba(255, 94, 88, 0.34);
    --text: #f7fbff;
    --muted: #a9b8c3;
    --cyan: #19d9e7;
    --amber: #ff8a36;
    --ruby: #ff2f63;
    --green: #39ff88;
  }

  * {
    box-sizing: border-box;
  }

  html {
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
  }

  body {
    min-height: 100vh;
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 78% 18%, rgba(25, 217, 231, 0.18), transparent 28rem),
      radial-gradient(circle at 22% 19%, rgba(255, 47, 99, 0.14), transparent 24rem),
      linear-gradient(145deg, var(--ink), #07151d 48%, #020305);
    color: var(--text);
    font-family: "Sora", "Avenir Next", sans-serif;
    letter-spacing: 0;
  }

  body::before {
    position: fixed;
    inset: 0;
    z-index: -2;
    content: "";
    background-image:
      linear-gradient(rgba(25, 217, 231, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 138, 54, 0.07) 1px, transparent 1px);
    background-position: center top;
    background-size: 78px 78px;
    mask-image: linear-gradient(to bottom, transparent, black 18%, black 72%, transparent);
    transform: perspective(700px) rotateX(58deg) translateY(15rem) scale(1.15);
    transform-origin: top center;
  }

  body::after {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
    background:
      linear-gradient(to bottom, rgba(4, 7, 12, 0.2), var(--ink) 88%),
      repeating-linear-gradient(90deg, transparent 0 118px, rgba(255, 255, 255, 0.025) 119px 120px);
  }

  a {
    color: inherit;
  }