:root{
    /* color tokens */
    --bg:#0a0a0b;
    --bg-2:#101012;
    --surface:#141416;
    --surface-2:#1b1b1f;
    --line:rgba(255,255,255,.09);
    --line-strong:rgba(255,255,255,.16);
    --fg:#f5f5f6;
    --fg-2:#d2d2d8;
    --muted:#9a9aa3;
    --accent:#c6f24e;       /* signal lime, the "connected / handled" green */
    --accent-2:#9be0d6;     /* soft mint, used sparingly in the ring gradient */
    --accent-ink:#0c1402;   /* text on accent */
    --danger:#fb7185;

    /* type */
    --display:"Bricolage Grotesque",system-ui,sans-serif;
    --sans:"Inter",system-ui,-apple-system,sans-serif;

    /* shape */
    --r-sm:10px; --r:16px; --r-lg:24px; --r-pill:999px;
    --shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 2px 6px -2px rgba(0,0,0,.45), 0 16px 34px -16px rgba(0,0,0,.55), 0 44px 84px -48px rgba(0,0,0,.72);
    --glow:0 0 0 1px rgba(198,242,78,.35), 0 12px 40px -12px rgba(198,242,78,.35);

    /* spacing rhythm (8pt) */
    --pad:clamp(20px,5vw,40px);
    --section:clamp(72px,11vw,128px);
    --maxw:1120px;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

  body{
    margin:0;
    background:var(--bg);
    color:var(--fg);
    font-family:var(--sans);
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }

  /* ambient glow backdrop */
  body::before{
    content:"";
    position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(60% 50% at 78% -5%, rgba(198,242,78,.12), transparent 60%),
      radial-gradient(45% 40% at 5% 8%, rgba(155,224,214,.08), transparent 60%),
      radial-gradient(50% 45% at 50% 105%, rgba(198,242,78,.06), transparent 60%);
  }
  /* film grain, subtle tactile texture, kills gradient banding */
  body::after{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    opacity:.03; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  a{color:inherit}
  img,svg{display:block}
  ::selection{background:var(--accent);color:var(--accent-ink)}

  /* focus visibility, never removed, only restyled */
  :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

  .skip{
    position:absolute; left:16px; top:-60px; z-index:200;
    background:var(--accent); color:var(--accent-ink);
    padding:10px 16px; border-radius:var(--r-sm); font-weight:600;
    transition:top .2s ease;
  }
  .skip:focus{top:16px}

  .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}