:root{
  /* surfaces — green-tinted near-black (matches monkeycode-ai.com) */
  --bg:        #070b08;
  --bg-2:      #0a0f0b;
  --panel:     #0f1611;
  --panel-2:   #141d17;
  --elev:      #19241d;
  --elev-2:    #202e25;
  --line:      rgba(180,255,210,.07);
  --line-2:    rgba(180,255,210,.13);

  /* text */
  --tx:        #e9f1ec;
  --tx-dim:    #93a89b;
  --tx-faint:  #5c6f63;

  /* accents — neon brand green + rose code-accent */
  --green:     #46e07b;
  --green-2:   #28c462;
  --green-soft:rgba(70,224,123,.14);
  --green-ink: #46e07b;   /* green used as TEXT on page surfaces */
  --glow:      rgba(70,224,123,.55);
  --rose:      #f2849e;
  --rose-soft: rgba(242,132,158,.14);
  /* subtle neutral fills (chips / ghost buttons) */
  --fill:      rgba(255,255,255,.06);
  --fill-2:    rgba(255,255,255,.12);
  /* legacy aliases kept = green so all highlights are on-brand */
  --blue:      #46e07b;
  --blue-2:    #28c462;
  --blue-soft: rgba(70,224,123,.14);

  --r-sm: 4px;
  --r:    7px;
  --r-lg: 9px;
  --shadow: 0 18px 50px -20px rgba(0,0,0,.7);
  --shadow-lg: 0 40px 90px -30px rgba(0,0,0,.85);

  --cjk: "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --sans: "Maple Mono CN", "Maple Mono", var(--cjk);
  --mono: "Maple Mono CN", "Maple Mono", ui-monospace, monospace;
}

/* ===== LIGHT THEME ===== */
:root[data-theme="light"]{
  --bg:        #f3f7f1;
  --bg-2:      #e9efe6;
  --panel:     #ffffff;
  --panel-2:   #f5f9f3;
  --elev:      #ffffff;
  --elev-2:    #eef4ec;
  --line:      rgba(18,54,32,.11);
  --line-2:    rgba(18,54,32,.18);

  --tx:        #102016;
  --tx-dim:    #4a5d51;
  --tx-faint:  #82938a;

  --green-2:   #1f9d57;
  --green-soft:rgba(31,157,87,.13);
  --green-ink: #178a4c;   /* darker green for legible text on light */
  --glow:      rgba(40,196,98,.4);
  --rose:      #d4567a;
  --rose-soft: rgba(212,86,122,.12);

  --fill:      rgba(18,54,32,.05);
  --fill-2:    rgba(18,54,32,.10);

  --shadow:    0 18px 44px -22px rgba(20,50,30,.28);
  --shadow-lg: 0 36px 80px -34px rgba(20,50,30,.34);
}
:root[data-theme="light"] body{
  background:
    radial-gradient(1100px 640px at 80% -12%, rgba(40,196,98,.10), transparent 58%),
    radial-gradient(820px 560px at 4% 4%, rgba(40,196,98,.05), transparent 55%),
    var(--bg);
}
:root[data-theme="light"] ::-webkit-scrollbar-thumb{ background:#c7d6cb; border:3px solid var(--bg-2); }
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover{ background:#b3c6b8; }

/* ===== BUTTON STYLE: outline variant ===== */
:root[data-btn="outline"] .btn-play,
:root[data-btn="outline"] .nav-cta{
  background:transparent; color:var(--green-ink);
  border:1px solid var(--green); box-shadow:none;
}
:root[data-btn="outline"] .btn-play svg{ fill:var(--green-ink); }
:root[data-btn="outline"] .btn-play:hover,
:root[data-btn="outline"] .nav-cta:hover{
  background:var(--green-soft); color:var(--green-ink);
  box-shadow:0 0 0 1px rgba(70,224,123,.4);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
/* Smooth scrolling for anchor jumps (nav section pills, community
   links). CSS-level fallback for engines that ignore the `behavior`
   option in window.scrollTo / scrollIntoView. */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  background:
    radial-gradient(ellipse 90% 70% at 50% 30%, rgb(18,30,23) 0%, rgb(10,13,10) 100%)
      no-repeat fixed;
  background-color: rgb(10,13,10);
  color:var(--tx);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
  user-select:none;
  -webkit-user-select:none;
}
::selection{ background:rgba(70,224,123,.32); color:#06140c; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
img{ display:block; max-width:100%; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--bg-2); }
::-webkit-scrollbar-thumb{ background:#28382e; border-radius:10px; border:3px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover{ background:#35493b; }

.wrap{ width: 90%; max-width:1280px; margin:0 auto; padding:0 28px; }

/* mono micro-labels — refined "code playfulness" */
.kicker{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.12em; color:var(--tx-faint); text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
.kicker b{ color:var(--green-ink); font-weight:700; }

/* generic entrance */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

#root{ min-height:100vh; }

/* Visually-hidden (sr-only) utility: keeps content in the render tree
   for screen readers and search engines while occupying no visible
   space. Used by the crawler-facing site index in index.html.tmpl. */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); border:0;
}