* {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    :root {
      --bg: #000d1a;
      --bg2: #040f1f;
      --card: #071829;
      --border: rgba(0, 210, 255, 0.12);
      --accent: #00d2ff;
      --accent2: #7b61ff;
      --text: #e8f4fd;
      --muted: #6a9ab8;
      --white: #fff;
    }

    html {
      scroll-behavior: smooth
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
      overflow-x: hidden;
      line-height: 1.6
    }

    /* ── scrollbar ── */
    ::-webkit-scrollbar {
      width: 5px
    }

    ::-webkit-scrollbar-track {
      background: var(--bg)
    }

    ::-webkit-scrollbar-thumb {
      background: var(--accent);
      border-radius: 3px
    }

    /* ── noise overlay ── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 0;
      opacity: .4
    }