:root{
  --bg:#0c0f14;
  --panel:#151a22;
  --panel-2:#1c232e;
  --text:#edf1f7;
  --muted:#aeb8c6;
  --line:#303846;
  --green:#76c044;
  --red:#d44242;
  --blue:#8cc8ff;
  --code:#111722;
  --shadow:0 18px 50px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.62;
  margin:0;
  background:
    radial-gradient(circle at 18% 0%, rgba(118,192,68,.14), transparent 30rem),
    radial-gradient(circle at 85% 8%, rgba(212,66,66,.12), transparent 26rem),
    var(--bg);
  color:var(--text);
}
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#fff;color:#000;padding:.5rem .75rem;border-radius:.5rem;z-index:10}
.site-header{
  position:sticky;
  top:0;
  z-index:5;
  background:rgba(13,16,22,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1420px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:1.1rem;
  padding:.85rem 1.1rem;
}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand img{height:58px;width:auto;image-rendering:pixelated;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
.header-copy{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.header-copy strong{font-size:1.12rem;letter-spacing:.02em;color:#fff}
.header-copy span:last-child{color:var(--muted);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46rem}
.site-kicker{color:var(--green);font-size:.78rem;text-transform:uppercase;font-weight:800;letter-spacing:.09em}
.top-nav{margin-left:auto;display:flex;gap:.45rem;flex-wrap:wrap;justify-content:flex-end}
.top-nav a,.button-link{
  color:var(--text);
  text-decoration:none;
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
  padding:.45rem .7rem;
  border-radius:999px;
  font-weight:700;
  font-size:.9rem;
}
.top-nav a:hover,.button-link:hover{border-color:var(--green);background:rgba(118,192,68,.10)}
.site-shell{max-width:1420px;margin:0 auto;display:grid;grid-template-columns:280px minmax(0,1fr);gap:1.3rem;padding:1.2rem}
.sidebar{position:sticky;top:88px;align-self:start;max-height:calc(100vh - 104px);overflow:auto;background:rgba(21,26,34,.78);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.sidebar-nav{padding:1rem}
.sidebar-home{display:block;color:#fff;text-decoration:none;font-weight:900;padding:.65rem .75rem;border-radius:10px;background:linear-gradient(135deg,rgba(118,192,68,.18),rgba(212,66,66,.12));border:1px solid rgba(255,255,255,.08);margin-bottom:.8rem}
.nav-section{border-top:1px solid var(--line);padding:.85rem 0 .25rem}
.nav-section:first-of-type{border-top:0}
.nav-section span{display:block;color:var(--green);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;font-weight:900;margin:.05rem .55rem .35rem}
.nav-section a{display:block;color:var(--muted);text-decoration:none;padding:.32rem .55rem;border-radius:8px;font-size:.93rem}
.nav-section a:hover{color:#fff;background:rgba(255,255,255,.055)}
.content{min-width:0;background:rgba(15,19,27,.56);border:1px solid rgba(48,56,70,.75);border-radius:18px;padding:2rem;box-shadow:var(--shadow)}
.content>:first-child{margin-top:0}
.hero-logo{display:block;max-width:520px;width:min(100%,520px);height:auto;margin:0 auto 1.35rem;image-rendering:pixelated}
.hero-panel{padding:2rem;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:linear-gradient(135deg,rgba(118,192,68,.12),rgba(255,255,255,.035) 38%,rgba(212,66,66,.10));margin-bottom:1.5rem}
.hero-panel h1{font-size:clamp(2rem,5vw,4rem);margin:.25rem 0 .6rem;line-height:1.05}
.hero-panel p{max-width:75ch;color:#dce4ef;font-size:1.05rem}
.eyebrow{color:var(--green);font-weight:900;text-transform:uppercase;letter-spacing:.11em;font-size:.8rem}
.action-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.1rem}
.button-link.primary{background:linear-gradient(135deg,var(--green),#4d8d30);border-color:#96e46b;color:#071005}
.grid-cards,.link-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1rem 0 1.7rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1rem;text-decoration:none;color:var(--text)}
.card:hover{border-color:var(--green);transform:translateY(-1px)}
.card strong{display:block;font-size:1.02rem;margin-bottom:.25rem;color:#fff}
.card span{color:var(--muted);font-size:.95rem}
a{color:var(--blue)}
a:hover{color:#b8ddff}
code{background:var(--code);border:1px solid #2b3442;border-radius:4px;padding:.08rem .25rem}
pre{background:#101620;border:1px solid #2e3748;border-radius:12px;padding:1rem;overflow:auto}
pre code{background:transparent;border:0;padding:0}
table{border-collapse:collapse;display:block;overflow:auto;margin:1rem 0}
th,td{border:1px solid var(--line);padding:.5rem .7rem;vertical-align:top}
th{background:var(--panel-2);color:#fff}
blockquote{border-left:4px solid var(--green);margin-left:0;padding:.15rem 0 .15rem 1rem;color:#cdd7e5;background:rgba(118,192,68,.045)}
h1,h2,h3{line-height:1.25;color:#fff}
h2{margin-top:2.2rem;border-bottom:1px solid var(--line);padding-bottom:.25rem}
hr{border:0;border-top:1px solid var(--line)}
@media (max-width:980px){
  .header-inner{align-items:flex-start}.brand img{height:44px}.top-nav{display:none}.header-copy span:last-child{white-space:normal}
  .site-shell{grid-template-columns:1fr;padding:.85rem}.sidebar{position:relative;top:auto;max-height:none}.content{padding:1.25rem}
}