/* Shared chrome for every gmgnpad page: tokens, reset, top bar, buttons,
   section headings, footer. Page-specific rules stay inline in the page.
   Linked BEFORE the inline <style> so a page can still override. */
  /* Token layer. Surfaces are white-alpha over a near-black ground so the
     glass panes can stack without going muddy. Mint is the GMGN green,
     violet is the callout star and the burn, amber is the manifesto coin.
     Nothing else gets a hue: everything else is white at some opacity. */
  :root {
    --void: #06080A; --ground: #090C10;
    --pane: #0E131899; --raised: #131A21; --veil: #ffffff12;
    --edge: inset 0 1px 0 #ffffff1c;
    --lift: var(--edge), 0 10px 30px -18px #000000cc;
    --lift-strong: var(--edge), 0 30px 70px -30px #000000e6;
    --blur: saturate(160%) blur(14px);

    --ink: #F0F4F3; --ink-2: #ffffffcc; --ink-3: #ffffff99; --ink-4: #ffffff5c;
    --rule: #ffffff17; --rule-2: #ffffff2b; --rule-3: #ffffff42;

    --gm: #3BE577; --gm-ink: #04170C; --gm-soft: #3be5771f; --gm-line: #3be57747;
    --vio: #8B7CF6; --vio-soft: #8b7cf61f;
    --amber: #FFB020;
    --up: #3BE577; --down: #FF6B6B; --up-soft: #3be5771a; --down-soft: #ff6b6b1a;

    --sans: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    --column: 76rem; --r: 14px; --r-sm: 10px;
  }
  * { box-sizing: border-box; }
  html { color-scheme: dark; scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--void); color: var(--ink);
    font-family: var(--sans); font-size: 16.5px; line-height: 1.6;
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
  }
  /* one mint bloom behind the hero, and a grid that fades out by mid page */
  body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
      radial-gradient(760px 420px at 68% -8%, #3be5771f, transparent 70%),
      radial-gradient(620px 380px at 12% 2%, #8b7cf614, transparent 70%);
  }
  body::after {
    content: ""; position: fixed; inset: 0 0 auto; height: 900px; pointer-events: none; z-index: 0;
    background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: linear-gradient(#000, transparent 78%);
    mask-image: linear-gradient(#000, transparent 78%);
  }
  .wrap { max-width: var(--column); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; border: 0; }
  :focus-visible { outline: 2px solid var(--gm); outline-offset: 2px; }

  /* ---------- top bar ---------- */
  .top { position: sticky; top: 0; z-index: 40; background: #06080Ad9; backdrop-filter: var(--blur); border-bottom: 1px solid var(--rule); }
  .top .wrap { display: flex; align-items: center; height: 62px; gap: 24px; }
  .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 19px; letter-spacing: -0.045em; }
  .brand .wm { display: inline-block; }
  /* the mark is the pixel croc. object-fit keeps it square at any size and
     image-rendering: pixelated stops the browser smoothing the pixel art. */
  .brand .m { width: 28px; height: 28px; border-radius: 8px; overflow: hidden;
              display: block; flex: none; box-shadow: var(--edge);
              object-fit: cover; image-rendering: pixelated; }
  .brand i { font-style: normal; color: var(--gm); }
  .nav { display: flex; gap: 20px; margin-left: 10px; }
  .nav a { font-size: 13.5px; font-weight: 500; color: var(--ink-3); }
  .nav a:hover { color: var(--ink); }
  .top .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
  .gate { font-family: var(--mono); font-size: 11px; color: var(--gm); border: 1px solid var(--gm-line); background: var(--gm-soft); border-radius: 999px; padding: 5px 11px; }
  .btn { border: 1px solid var(--rule-2); background: var(--veil); color: var(--ink); border-radius: 999px; padding: 9px 17px; font-size: 14px; font-weight: 500; display: inline-block; }
  .btn:hover { border-color: var(--rule-3); }
  .btn-go { background: var(--gm); color: var(--gm-ink); border-color: transparent; font-weight: 700; box-shadow: var(--edge), 0 8px 24px -12px #3be57799; }
  .btn-go:hover { background: #55ef8a; }
  .btn-lg { padding: 13px 24px; font-size: 16px; }

  /* ---------- sections ---------- */
  section { position: relative; z-index: 1; }
  h2 { font-weight: 700; font-size: clamp(27px, 3.5vw, 41px); letter-spacing: -0.045em; line-height: 1.06; margin: 0 0 16px; text-wrap: balance; }
  .sub { color: var(--ink-3); margin: 0 0 42px; max-width: 54ch; font-size: 16px; }
  .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gm); margin-bottom: 14px; }

  footer { border-top: 1px solid var(--rule); padding: 26px 0 40px; position: relative; z-index: 1; }
  footer .wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-4); }
  footer a { color: var(--ink-3); }
  footer a:hover { color: var(--ink); }
  footer .sp { margin-left: auto; font-family: var(--mono); font-size: 11.5px; }

  @media (max-width: 600px) {
    body { font-size: 15.5px; }
    .nav, .gate { display: none; }
  }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

  /* ---------- launch card ---------- */
  /* Used by the preview row on the home page and by the full board on
     launches.html, so it lives here rather than in either page. */
  .launch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .launch { display: grid; grid-template-columns: 46px 1fr; gap: 13px; align-items: start;
            border: 1px solid var(--rule); border-radius: var(--r); background: var(--pane);
            backdrop-filter: var(--blur); padding: 14px; box-shadow: var(--edge);
            color: inherit; transition: border-color .15s, transform .15s; }
  .launch:hover { border-color: var(--gm-line); transform: translateY(-1px); }
  .launch .art { width: 46px; height: 46px; border-radius: 11px; overflow: hidden;
                 display: grid; place-items: center; font-size: 21px; font-weight: 700;
                 background: #ffffff0f; color: var(--ink-3); box-shadow: var(--edge); }
  .launch .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .l-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .tick { font-weight: 700; font-size: 15px; letter-spacing: -0.02em; }
  .who { font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); }
  .pill { font-family: var(--mono); font-size: 10px; text-transform: uppercase;
          letter-spacing: .09em; border-radius: 5px; padding: 2px 7px; }
  .pill.up { color: var(--vio); background: var(--vio-soft); }
  .pill.climb { color: var(--gm); background: var(--up-soft); }
  .pill.new { color: var(--ink-4); background: #ffffff0f; }
  .meta { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-4); margin-top: 3px; }
  .callout { display: block; font-size: 12.5px; line-height: 1.45; color: var(--ink-3);
             margin-top: 9px; border-left: 2px solid var(--gm-line); padding-left: 10px; }
  .stats { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--mono);
           font-size: 11.5px; color: var(--ink-4); margin-top: 10px; font-variant-numeric: tabular-nums; }
  .stats b { color: var(--ink-2); font-weight: 500; }
  .bar { height: 5px; border-radius: 3px; background: #ffffff0f; overflow: hidden; margin-top: 11px; }
  .bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #14b85a, var(--gm)); }
  .bar.done i { background: linear-gradient(90deg, #5B44D6, var(--vio)); }
  .barcap { display: flex; justify-content: space-between; font-family: var(--mono);
            font-size: 10.5px; color: var(--ink-4); margin-top: 5px; }
  @media (max-width: 760px) { .launch-grid { grid-template-columns: 1fr; } }