/* base */
:root {
      --bg: #020202;
      --panel: #141414;
      --panel-2: #1d1d1d;
      --ink: #f7f7f2;
      --muted: #8b8b8b;
      --soft: #b9b9b2;
      --line: rgba(255,255,255,.13);
      --accent: #f1ff2e;
      --accent-2: #ff7145;
      --green: #034827;
      --radius: 8px;
      --pad: clamp(18px, 2.1vw, 32px);
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color-scheme: dark;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: var(--sans);
      min-height: 100vh;
      overflow-x: hidden;
      cursor: none;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at var(--mx, 50%) var(--my, 35%), rgba(241,255,46,.08), transparent 22rem),
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
      background-size: auto, 80px 80px;
      opacity: .9;
      z-index: 0;
    }

    a { color: inherit; text-decoration: none; }
    button { font: inherit; color: inherit; }
    ::selection { background: var(--accent); color: #000; }

    .grain {
      position: fixed;
      inset: -60px;
      opacity: .05;
      pointer-events: none;
      z-index: 1;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
      animation: grain 9s steps(8) infinite;
    }

    @keyframes grain {
      0%, 100% { transform: translate(0, 0); }
      10% { transform: translate(-4%, -8%); }
      20% { transform: translate(-12%, 6%); }
      30% { transform: translate(8%, -10%); }
      40% { transform: translate(-2%, 14%); }
      50% { transform: translate(-10%, 4%); }
      60% { transform: translate(12%, 0); }
      70% { transform: translate(0, 10%); }
      80% { transform: translate(4%, -4%); }
      90% { transform: translate(-6%, 8%); }
    }

    .cursor, .cursor-ring {
      position: fixed;
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: 80;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }
    .cursor {
      width: 7px;
      height: 7px;
      background: var(--accent);
      mix-blend-mode: difference;
    }
    .cursor-ring {
      width: 34px;
      height: 34px;
      border: 1px solid rgba(255,255,255,.26);
      transition: width .22s ease, height .22s ease, border-color .22s ease, background .22s ease;
    }
    body.cursor-big .cursor-ring {
      width: 74px;
      height: 74px;
      background: rgba(241,255,46,.06);
      border-color: rgba(241,255,46,.8);
    }

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