:root {
        --bg: #05070a;
        --bg-deep: #030508;
        --surface: rgba(16, 23, 32, 0.78);
        --surface-solid: #0c121a;
        --line: rgba(123, 168, 201, 0.22);
        --line-strong: rgba(0, 229, 255, 0.52);
        --accent: #00e5ff;
        --accent-dark: #007bbd;
        --text: #edf7ff;
        --muted: #91a7b9;
        --muted-dark: #607789;
        --font-sans: Inter, Roboto, "Segoe UI", Arial, sans-serif;
        --font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;
        --header-height: 72px;
        --container: 1520px;
        --radius: 8px;
        --s1: 8px;
        --s2: 16px;
        --s3: 24px;
        --s4: 32px;
        --s5: 40px;
        --s6: 48px;
        --s8: 64px;
        --parallax-x: 0px;
        --parallax-y: 0px;
        --marker-x: 0px;
        --marker-y: 0px;
        --card-parallax-x: 0px;
        --card-parallax-y: 0px;
        --mobile-gyro-x: 0px;
        --mobile-gyro-y: 0px;
        --mobile-marker-x: 0px;
        --mobile-marker-y: 0px;
        --mobile-card-x: 0px;
        --mobile-card-y: 0px;
        --mobile-tilt-x: 0deg;
        --mobile-tilt-y: 0deg;
        --scroll-glitch-x: 0px;
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
        scroll-padding-top: calc(var(--header-height) + var(--s3));
      }

      body {
        margin: 0;
        min-width: 0;
        overflow-x: hidden;
        background:
          radial-gradient(circle at 82% 8%, rgba(0, 151, 219, 0.13), transparent 28%),
          linear-gradient(180deg, var(--bg), var(--bg-deep));
        color: var(--text);
        font-family: var(--font-sans);
        font-size: 16px;
        line-height: 1.65;
      }

      body::before {
        position: fixed;
        inset: 0;
        z-index: -2;
        content: "";
        background-image:
          linear-gradient(rgba(109, 150, 181, 0.055) 1px, transparent 1px),
          linear-gradient(90deg, rgba(109, 150, 181, 0.055) 1px, transparent 1px);
        background-size: 48px 48px;
        background-position:
          calc(var(--parallax-x) + var(--mobile-gyro-x))
            calc(var(--parallax-y) + var(--mobile-gyro-y)),
          calc(var(--parallax-x) + var(--mobile-gyro-x))
            calc(var(--parallax-y) + var(--mobile-gyro-y));
        mask-image: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
      }

      body::after {
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        content: "";
        background: linear-gradient(90deg, transparent 0 49.8%, rgba(0, 229, 255, 0.045) 50%, transparent 50.2%);
        background-size: 320px 100%;
      }

      main,
      .site-footer,
      .system-status {
        position: relative;
        z-index: 1;
      }

      .data-streams {
        position: fixed;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
      }

      .data-stream {
        position: absolute;
        top: -24%;
        width: 18ch;
        color: var(--accent);
        font-family: var(--font-mono);
        font-size: 0.64rem;
        line-height: 2.25;
        opacity: 0.04;
        white-space: pre-wrap;
        transform: translate3d(var(--parallax-x), var(--parallax-y), 0);
        animation: data-stream 24s linear infinite;
      }

      .data-stream.left {
        left: 14px;
      }

      .data-stream.right {
        right: 14px;
        animation-delay: -12s;
      }

      ::selection {
        background: #00e5ff;
        color: #0a0a0c;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      button {
        font: inherit;
      }

      a:focus-visible,
      button:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 4px;
      }

      .skip-link {
        position: fixed;
        top: var(--s2);
        left: var(--s2);
        z-index: 100;
        transform: translateY(-160%);
        border: 1px solid var(--accent);
        border-radius: var(--radius);
        background: var(--bg);
        padding: 10px 14px;
        font-family: var(--font-mono);
        transition: transform 160ms ease;
      }

      .skip-link:focus {
        transform: translateY(0);
      }

      .container {
        width: min(calc(100% - 32px), var(--container));
        margin: 0 auto;
      }

      section[id] {
        scroll-margin-top: calc(var(--header-height) + var(--s3));
      }