:root{
  --bg:#06090F; --panel:#0B1220; --panel-2:#0E1A2B; --line:#1B2638;
  --green:#22E07A; --green-soft:rgba(34,224,122,.12); --cyan:#38BDF8;
  --text:#E6EDF6; --muted:#9FB0C3; --dim:#5B6B82;
  --font:'Inter',system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); line-height:1.65; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.05}

/* decorative grid bg */
.bg-grid{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 80%);
}

/* nav */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:rgba(6,9,15,.8); backdrop-filter:blur(12px); z-index:20;
}
.brand-mark{height:34px; width:auto; display:block}
.links{display:flex; align-items:center; gap:26px}
.links a{color:var(--muted); font-size:14.5px; font-weight:500; transition:color .15s}
.links a:hover{color:var(--text)}
.nav-cta{
  color:var(--green)!important; border:1px solid var(--green-soft);
  padding:7px 14px; border-radius:999px; font-weight:600!important;
}
.nav-cta:hover{background:var(--green-soft)}

/* overline label */
.overline{
  display:inline-block; font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--green); margin-bottom:14px;
}

/* hero */
.hero{max-width:920px; margin:0 auto; padding:96px 28px 64px; text-align:center}
.hero-tag{
  display:inline-block; font-family:var(--mono); font-size:12.5px; letter-spacing:.04em;
  color:var(--green); border:1px solid var(--green); border-radius:999px; padding:6px 15px; margin-bottom:26px;
}
.hero h1{font-size:72px; font-weight:800; margin:0 0 20px; letter-spacing:-.03em}
.accent{color:var(--green)}
.lede{font-size:19px; color:var(--muted); max-width:600px; margin:0 auto 32px; line-height:1.6}
.cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.btn-primary{
  background:var(--green); color:#04140B; font-weight:700; padding:13px 26px; border-radius:10px;
  transition:transform .12s, box-shadow .12s; font-size:15px;
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(34,224,122,.28)}
.btn-ghost{border:1px solid var(--line); color:var(--text); padding:13px 26px; border-radius:10px; font-size:15px; transition:border-color .15s}
.btn-ghost:hover{border-color:var(--cyan)}
.hero-meta{
  display:flex; gap:32px; justify-content:center; flex-wrap:wrap;
  margin-top:48px; padding-top:32px; border-top:1px solid var(--line);
}
.hero-meta span{font-size:14px; color:var(--dim)}
.hero-meta b{color:var(--text); font-family:var(--mono); font-weight:600; margin-right:5px}

/* sections */
.section{max-width:1040px; margin:0 auto; padding:72px 28px}
.section-head{margin-bottom:36px}
.section-head h2{font-size:34px; font-weight:800; letter-spacing:-.02em}
.muted{color:var(--dim); font-weight:500; font-size:20px}
.section-sub{color:var(--muted); font-size:16px; max-width:560px; margin:12px 0 0}

/* tools grid */
.tools-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
.tool-card{
  display:block; background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:26px; transition:border-color .18s, transform .18s, background .18s; position:relative; overflow:hidden;
}
.tool-card:hover{border-color:var(--green); transform:translateY(-3px); background:var(--panel-2)}
.tool-card.soon{opacity:.62}
.tool-ic{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--green-soft); color:var(--green); font-size:22px; margin-bottom:18px;
}
.tool-card h3{font-size:20px; font-weight:700; margin-bottom:10px}
.tool-card p{color:var(--muted); font-size:14.5px; margin:0 0 18px; line-height:1.55}
.tool-go{font-family:var(--mono); font-size:13px; color:var(--green); font-weight:600}

/* leaderboard cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px;
  transition:border-color .15s, transform .15s;
}
.card:hover{border-color:var(--green); transform:translateY(-3px)}
.card-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.name{font-size:18px; font-weight:700}
.score{font-family:var(--mono); font-size:24px; font-weight:700; color:var(--cyan)}
.bar{height:8px; background:var(--panel-2); border-radius:999px; margin:14px 0; overflow:hidden}
.bar span{display:block; height:100%; background:linear-gradient(90deg,var(--green),var(--cyan)); border-radius:999px}
.dims{list-style:none; padding:0; margin:12px 0; display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; font-size:14px; color:var(--muted)}
.dims b{color:var(--text); font-family:var(--mono)}
.status{font-family:var(--mono); font-size:13px}
.status.pass{color:var(--green)}
.status.warn{color:#FEBC2E}
.note{color:var(--dim); font-size:13px; margin-top:18px; line-height:1.5}

/* dimensions grid */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px}
.cell{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px; transition:border-color .15s}
.cell:hover{border-color:var(--cyan)}
.ic{width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:var(--panel-2); color:var(--green); font-size:20px; font-weight:700; margin-bottom:14px}
.cell h4{margin:0 0 6px; font-size:17px; font-weight:700}
.cell p{margin:0; color:var(--muted); font-size:14px; line-height:1.55}

/* method */
.method{list-style:none; counter-reset:s; padding:0; margin:0}
.method li{
  counter-increment:s; position:relative; padding:20px 0 20px 60px; border-bottom:1px solid var(--line);
}
.method li::before{
  content:counter(s); position:absolute; left:0; top:18px; width:38px; height:38px; border-radius:10px;
  background:var(--green-soft); color:var(--green); font-family:var(--mono); font-weight:700; font-size:16px;
  display:flex; align-items:center; justify-content:center;
}
.method b{color:var(--text); font-size:17px; font-weight:700}
.method p{color:var(--muted); font-size:15px; margin:8px 0 0; line-height:1.55}

/* blog */
.posts{list-style:none; padding:0; margin:0}
.posts li{display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--line)}
.posts a{font-size:17px; color:var(--text); font-weight:500; transition:color .15s}
.posts a:hover{color:var(--green)}
.posts span{font-family:var(--mono); font-size:12px; color:var(--dim); border:1px solid var(--line); border-radius:6px; padding:3px 9px}

/* footer */
.foot{border-top:1px solid var(--line); padding:56px 28px 48px; text-align:center}
.foot-mark{width:48px; height:48px; margin-bottom:16px; opacity:.9}
.foot-slogan{font-family:var(--mono); color:var(--green); font-size:15px; letter-spacing:.02em}
.foot-links{margin:18px 0 14px; display:flex; gap:22px; justify-content:center}
.foot-links a{color:var(--muted); font-size:14px; transition:color .15s}
.foot-links a:hover{color:var(--text)}
.copy{color:var(--dim); font-size:13px}

/* post page */
.post{max-width:760px; margin:0 auto; padding:72px 28px 48px}
.post-meta{font-family:var(--mono); color:var(--dim); font-size:13px; letter-spacing:.08em}
.post h1{font-size:42px; font-weight:800; letter-spacing:-.02em; margin:10px 0 28px; line-height:1.1}
.post-body h2{font-size:24px; margin:34px 0 12px; color:var(--text)}
.post-body p{color:var(--muted); font-size:17px; margin:14px 0; line-height:1.7}
.post-body blockquote{
  border-left:3px solid var(--green); margin:22px 0; padding:10px 18px;
  background:var(--panel); border-radius:0 10px 10px 0; color:var(--text);
}
.post-body code{background:var(--panel-2); padding:2px 6px; border-radius:5px; font-family:var(--mono); color:var(--cyan); font-size:14px}
.post-body ul{padding-left:20px; color:var(--muted); line-height:1.7}
.post-body li{margin:7px 0}

/* playground */
.pg{max-width:1040px;margin:0 auto;padding:72px 28px}
.pg-note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--green);
  border-radius:10px;padding:14px 18px;color:var(--muted);font-size:14px;margin-bottom:28px;line-height:1.6}
.pg-note strong{color:var(--green)}
.pg-grid{display:grid;grid-template-columns:340px 1fr;gap:24px;align-items:start}
.pg-form label{display:block;font-size:14px;color:var(--muted);margin-bottom:18px}
.pg-form select,.pg-form input,.pg-form textarea{
  width:100%;margin-top:6px;padding:11px 13px;border-radius:9px;
  background:var(--panel);border:1px solid var(--line);color:var(--text);
  font-family:inherit;font-size:14px;box-sizing:border-box;
}
.pg-form select:focus,.pg-form input:focus,.pg-form textarea:focus{outline:none;border-color:var(--green)}
.pg-hint{display:block;color:var(--green);font-size:12px;margin-top:5px;font-family:var(--mono)}
.pg-check{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.pg-check input{width:auto;margin:0}
#pg-run{width:100%;margin-top:8px;cursor:pointer;background:var(--green);color:#04140B;border:none;font-weight:700;padding:12px;border-radius:10px;font-size:15px;transition:transform .12s,box-shadow .12s}
#pg-run:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(34,224,122,.28)}
.pg-status{margin-top:14px;font-family:var(--mono);font-size:14px;color:var(--cyan);min-height:20px}
.pg-result{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;min-height:220px}
.pg-empty{color:var(--dim)}
.pg-score{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.pg-score span{font-family:var(--mono);font-size:42px;font-weight:800;color:var(--green)}
.pg-score .warn{color:#FEBC2E}
.pg-score div{color:var(--muted);font-size:14px}
.pg-rows{list-style:none;padding:0;margin:0}
.pg-rows li{border-bottom:1px solid var(--line);padding:16px 0}
.pg-rowhead{display:flex;justify-content:space-between;align-items:center}
.pg-rowhead b{color:var(--text);font-size:15px}
.pg-rowhead .pass{color:var(--green);font-family:var(--mono)}
.pg-rowhead .warn{color:#FEBC2E;font-family:var(--mono)}
.pg-q{color:var(--dim);font-size:13px;margin:8px 0}
.pg-a{color:var(--muted);font-size:14px;white-space:pre-wrap;line-height:1.55}
.pg-share{text-align:center;margin-top:22px}

@media (max-width:760px){
  .hero h1{font-size:46px}
  .section{padding:56px 22px}
  .section-head h2{font-size:27px}
  .pg-grid{grid-template-columns:1fr}
  .links{gap:16px}
  .links a:not(.nav-cta){display:none}
}