/* 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;
    }

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

    @media (hover: hover) and (pointer: fine) {
      * {
        scrollbar-color: rgba(255,255,255,.2) transparent;
        scrollbar-width: thin;
      }

      *::-webkit-scrollbar {
        width: 5px;
        height: 5px;
      }

      *::-webkit-scrollbar-track {
        background: transparent;
      }

      *::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(255,255,255,.2);
      }

      *::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,.42);
      }
    }

    .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%); }
    }

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