*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    /* Screen-reader / crawler-only content (visually hidden, semantically present) */
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    :root {
      --site-bg: #020a03;
      --site-accent: #4dbd6a;
      --site-text: #c8e6aa;
    }
    html, body { width: 100%; height: 100%; background: var(--site-bg); overflow: hidden; cursor: none; }
    body.sys-cursor, body.sys-cursor * { cursor: auto !important; }
    body.sys-cursor a, body.sys-cursor button { cursor: pointer !important; }

    canvas { position: fixed; inset: 0; display: block; }

    /* ── Cursor ─────────────────────────────────────────────────── */
    .cursor-ring {
      position: fixed; top: 0; left: 0; width: 28px; height: 28px;
      border: 1px solid rgba(77,189,106,0.7); border-radius: 50%;
      pointer-events: none; z-index: 99998; transform: translate(-50%,-50%);
      transition: width .25s, height .25s, border-color .25s;
      box-shadow: 0 0 10px rgba(77,189,106,0.15);
    }
    .cursor-dot {
      position: fixed; top: 0; left: 0; width: 5px; height: 5px;
      background: #4dbd6a; border-radius: 50%; pointer-events: none;
      z-index: 99998; transform: translate(-50%,-50%);
      box-shadow: 0 0 8px rgba(77,189,106,0.9);
    }
    .cursor-ring.hov { width: 44px; height: 44px; border-color: rgba(77,189,106,0.4); }
    a, button { cursor: none; }
    @media (hover: none) and (pointer: coarse) {
      .cursor-ring, .cursor-dot { display: none; }
      a, button { cursor: auto; }
    }

    /* ── Gate ────────────────────────────────────────────────────── */
    #loading-screen {
      position: fixed; inset: 0; z-index: 9998;
      background: #020a03;
      display: flex; align-items: center; justify-content: center;
      flex-direction: column; gap: 1.4rem;
      transition: opacity .5s;
    }
    #loading-screen.out { opacity: 0; pointer-events: none; }
    .loading-logo { width: 40px; height: 40px; }
    .loading-bar {
      width: 80px; height: 1px;
      background: rgba(77,189,106,.12);
      position: relative; overflow: hidden;
    }
    .loading-bar::after {
      content: ''; position: absolute; inset: 0;
      background: rgba(77,189,106,.6);
      transform: translateX(-100%);
      animation: loadSlide 1.1s ease-in-out infinite;
    }
    @keyframes loadSlide {
      0%   { transform: translateX(-100%); }
      50%  { transform: translateX(0%); }
      100% { transform: translateX(100%); }
    }
    #gate {
      position: fixed; inset: 0; z-index: 9999;
      display: flex; align-items: center; justify-content: center;
      background: #020a03;
      transition: opacity .6s;
      opacity: 0;
      pointer-events: none;
    }
    #gate-glow {
      position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(30,80,30,0.22) 0%, transparent 70%);
    }
    #gate-inner { position: relative; z-index: 1; width: min(340px, 90vw); text-align: center; }
    .gate-credit { display:inline-block; margin-top:1.6rem; font-family:'Josefin Sans',sans-serif; font-weight:100; font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(120,210,255,0.32); text-decoration:none; transition:color .2s; }
    .gate-credit span { color:rgba(0,212,255,0.7); font-weight:200; }
    .gate-credit:hover { color:rgba(180,230,255,0.65); }
    .gate-credit:hover span { color:#00d4ff; text-shadow:0 0 8px rgba(0,212,255,0.6); }
    .gate-logo {
      font-family: 'Unbounded', sans-serif; font-weight: 200; font-size: 0.65rem;
      letter-spacing: 0.22em; color: rgba(220,245,225,0.18); text-transform: uppercase;
      margin-bottom: 1.8rem;
    }
    .gate-card {
      background: rgba(7,18,7,0.95); border: 1px solid rgba(77,189,106,0.1);
      padding: 2.2rem 2rem; display: flex; flex-direction: column;
      align-items: center; gap: 1.1rem;
    }
    .gate-title {
      font-family: 'Unbounded', sans-serif; font-weight: 200; font-size: 1.05rem;
      color: rgba(220,245,220,0.85); line-height: 1.3;
    }
    .gate-sub {
      font-weight: 200; font-size: 0.63rem; letter-spacing: 0.22em;
      text-transform: uppercase; color: rgba(180,230,190,0.3);
    }
    #google-btn-wrap { display: none; }
    .gate-google-btn {
      display: flex; align-items: center; justify-content: center; gap: 0.65rem;
      width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
      color: rgba(220,245,220,0.82); font-family: 'Josefin Sans', sans-serif;
      font-weight: 300; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
      padding: 0.82rem 1.6rem; cursor: pointer; transition: background 0.2s, border-color 0.2s;
    }
    .gate-google-btn:hover { background: rgba(255,255,255,0.09); border-color: rgba(77,189,106,0.3); }
    .gate-github-btn {
      display: flex; align-items: center; justify-content: center; gap: 0.65rem;
      width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
      color: rgba(220,245,220,0.82); font-family: 'Josefin Sans', sans-serif;
      font-weight: 300; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
      padding: 0.82rem 1.6rem; cursor: pointer; transition: background 0.2s, border-color 0.2s;
      margin-top: 0.6rem;
    }
    .gate-github-btn:hover { background: rgba(255,255,255,0.09); border-color: rgba(77,189,106,0.3); }
    .gate-discord-btn {
      display: flex; align-items: center; justify-content: center; gap: 0.65rem;
      width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
      color: rgba(220,245,220,0.82); font-family: 'Josefin Sans', sans-serif;
      font-weight: 300; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
      padding: 0.82rem 1.6rem; cursor: pointer; transition: background 0.2s, border-color 0.2s;
      margin-top: 0.6rem;
    }
    .gate-discord-btn:hover { background: rgba(255,255,255,0.09); border-color: rgba(88,101,242,0.4); }
    .gate-err {
      font-weight: 200; font-size: 0.63rem; letter-spacing: 0.08em;
      color: rgba(255,75,75,0.72); min-height: 1em;
    }

    /* ── Site nav ────────────────────────────────────────────────── */
    #site-nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      display: none; align-items: center; gap: 2rem; padding: 0 1.8rem; height: 44px;
      background: rgba(2,10,3,0.88); border-bottom: 1px solid rgba(77,189,106,0.09);
      backdrop-filter: blur(10px);
    }
    #site-nav.on { display: flex; }
    .nav-a {
      font-family: 'Josefin Sans', sans-serif; font-weight: 200; font-size: .58rem;
      letter-spacing: .28em; text-transform: uppercase;
      color: rgba(180,230,190,0.45); text-decoration: none; transition: color .2s;
    }
    .nav-a:hover, .nav-a.cur { color: var(--site-accent, #4dbd6a); }

    /* ── Main scene ──────────────────────────────────────────────── */
    .scene {
      position: fixed; inset: 0; z-index: 10;
      display: none; align-items: center; justify-content: center;
      overflow-y: auto; padding: 2rem 1rem;
    }

    /* ── Update notice + overlay ─────────────────────────────────── */
    #update-notice {
      position: fixed; top: 0; left: 0; right: 0; z-index: 99998;
      display: none; padding: .55rem 1.2rem; text-align: center;
      background: rgba(10,22,10,0.92); border-bottom: 1px solid rgba(77,189,106,0.2);
      font-family: 'Josefin Sans', sans-serif; font-weight: 200; font-size: .62rem;
      letter-spacing: .22em; text-transform: uppercase; color: rgba(180,230,190,0.75);
      pointer-events: none;
      animation: slideDown .35s cubic-bezier(0.16,1,0.3,1) forwards;
    }
    @keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    #update-overlay {
      position: fixed; inset: 0; z-index: 99999;
      display: none; align-items: center; justify-content: center;
      background: rgba(2,10,3,0.96); backdrop-filter: blur(8px);
      animation: fadeIn .4s ease forwards;
    }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    .update-box {
      text-align: center; padding: 3rem 2.5rem;
      border: 1px solid rgba(77,189,106,0.18); background: rgba(7,13,7,0.98);
      max-width: 360px; width: 90vw;
    }
    .update-title {
      font-family: 'Unbounded', sans-serif; font-weight: 200; font-size: 1rem;
      color: rgba(220,245,220,0.9); margin-bottom: 0.6rem;
    }
    .update-sub {
      font-family: 'Josefin Sans', sans-serif; font-weight: 200; font-size: 0.65rem;
      letter-spacing: 0.2em; text-transform: uppercase; color: rgba(180,230,190,0.4);
      margin-bottom: 2rem; line-height: 1.9;
    }
    .update-btn {
      font-family: 'Josefin Sans', sans-serif; font-weight: 300; font-size: 0.7rem;
      letter-spacing: 0.22em; text-transform: uppercase; padding: 0.7rem 2rem;
      border: 1px solid rgba(77,189,106,0.4); background: transparent;
      color: #4dbd6a; cursor: pointer; transition: background 0.2s;
    }
    .update-btn:hover { background: rgba(77,189,106,0.1); }
    .update-count { color: rgba(77,189,106,0.6); }

    /* ── User badge ──────────────────────────────────────────────── */
    #userBadge {
      position: fixed; bottom: 12px; right: 12px; z-index: 100;
      display: none; align-items: center; gap: 0.5rem;
      background: rgba(7,15,7,0.88); border: 1px solid rgba(77,189,106,0.1);
      padding: 5px 10px; border-radius: 3px;
    }
    .user-avatar { width: 18px; height: 18px; border-radius: 50%; display: block; }
    .user-name-text {
      font-family: 'Josefin Sans', sans-serif; font-weight: 300; font-size: 0.62rem;
      letter-spacing: 0.06em; color: rgba(180,230,190,0.55); max-width: 140px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .user-signout {
      font-family: 'Josefin Sans', sans-serif; font-weight: 200; font-size: 0.55rem;
      letter-spacing: 0.18em; text-transform: uppercase; color: rgba(77,189,106,0.38);
      background: none; border: none; padding: 0; cursor: pointer; transition: color .2s;
    }
    .user-signout:hover { color: rgba(77,189,106,0.75); }

    /* ── Made by ─────────────────────────────────────────────────── */
    .made-by {
      position: fixed; bottom: 12px; left: 12px; z-index: 100;
      font-family: 'Josefin Sans', sans-serif; font-weight: 300; font-size: 0.6rem;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: rgba(120,210,255,0.5); text-decoration: none;
      padding: 5px 11px; background: rgba(0,200,255,0.05);
      border: 1px solid rgba(0,200,255,0.18); border-radius: 999px;
      backdrop-filter: blur(6px);
      transition: color .2s, border-color .2s, background .2s, box-shadow .2s;
    }
    .made-by b { color: rgba(0,212,255,0.85); font-weight: 400; }
    .made-by:hover { color: rgba(220,245,255,0.9); border-color: rgba(0,212,255,0.55); background: rgba(0,200,255,0.12); box-shadow: 0 0 14px rgba(0,200,255,0.3); }
    .made-by:hover b { color: #00d4ff; text-shadow: 0 0 8px rgba(0,212,255,0.6); }
    .md-content p { margin: 0 0 .75em; }
    .md-content p:last-child { margin-bottom: 0; }
    .md-content ul, .md-content ol { padding-left: 1.4em; margin: .4em 0 .75em; }
    .md-content li { margin: .2em 0; }
    .md-content a { color: inherit; text-decoration: underline; text-underline-offset: 2px; opacity: .8; }
    .md-content strong { font-weight: 500; }
    .md-content em { font-style: italic; }
    .md-content code { font-family: monospace; font-size: .88em; opacity: .75; }
    .md-content h1,.md-content h2,.md-content h3 { font-weight: 300; margin: .8em 0 .3em; line-height: 1.2; }
    .md-content h1 { font-size: 1.5em; } .md-content h2 { font-size: 1.2em; } .md-content h3 { font-size: 1em; }
    /* Embedded images: centered. Sized embeds (inline style) use their own width;
       plain markdown images are capped to a sensible size so they're never full-bleed. */
    .md-content img { display: block; max-width: 100%; height: auto; margin: 1.4em auto; border-radius: 6px; }
    .md-content img:not([style]) { max-width: 480px; }
    .md-content hr { border: none; border-top: 1px solid currentColor; opacity: .2; margin: 1em 0; }