:root{
  --bg:#0b1220;--bg2:#121a2b;--card:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.12);--text:#e8eefc;--muted:#9aa8c7;
  --accent:#38bdf8;--accent2:#f97316;--ok:#34d399;
  --radius:18px;--shadow:0 18px 50px rgba(0,0,0,.35);
  --font:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;font-family:var(--font);color:var(--text);
  background:radial-gradient(1200px 600px at 10% -10%,#1e3a5f 0%,transparent 55%),
             radial-gradient(900px 500px at 100% 0%,#3b1d4a 0%,transparent 50%),
             var(--bg);line-height:1.6}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.wrap{width:min(1080px,92vw);margin:0 auto}
.nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);
  background:rgba(11,18,32,.72);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.85rem 0}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--text);text-decoration:none;font-weight:700}
.brand-mark{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent2),var(--accent));color:#0b1220;font-weight:800}
.nav-links{display:flex;flex-wrap:wrap;gap:.35rem .9rem;align-items:center}
.nav-links a{color:var(--muted);font-size:.95rem;text-decoration:none;padding:.25rem .1rem}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  border:1px solid var(--line);background:var(--card);color:var(--text);
  border-radius:999px;padding:.55rem 1rem;cursor:pointer;text-decoration:none}
.btn:hover{border-color:rgba(56,189,248,.5);text-decoration:none}
.btn-primary{background:linear-gradient(135deg,#f97316,#38bdf8);border:none;color:#081018;font-weight:700}
.hero{padding:4.5rem 0 2.5rem;animation:up .7s ease both}
.hero h1{font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.15;margin:0 0 .8rem;
  letter-spacing:.01em}
.hero h1 span{background:linear-gradient(90deg,var(--accent2),#facc15,var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:38rem;color:var(--muted);font-size:1.08rem;margin:0 0 1.5rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;padding:1rem 0 3rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.25rem 1.3rem;box-shadow:var(--shadow);animation:up .8s ease both}
.card h3{margin:.2rem 0 .45rem;font-size:1.15rem}
.card p{margin:0;color:var(--muted);font-size:.95rem}
.card .tag{display:inline-block;font-size:.75rem;color:#081018;background:var(--accent);
  border-radius:999px;padding:.15rem .55rem;margin-bottom:.55rem;font-weight:700}
.section{padding:1.5rem 0 3rem}
.section h2{margin:0 0 1rem;font-size:1.55rem}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.25rem;box-shadow:var(--shadow)}
label{display:block;font-size:.9rem;color:var(--muted);margin:.6rem 0 .3rem}
input,textarea,select{width:100%;border-radius:12px;border:1px solid var(--line);
  background:#0a1322;color:var(--text);padding:.7rem .85rem;font:inherit}
textarea{min-height:140px;resize:vertical}
.row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:end}
.row>*{flex:1;min-width:140px}
.muted{color:var(--muted)}
.footer{border-top:1px solid var(--line);padding:1.4rem 0 2rem;color:var(--muted);font-size:.9rem}
.docs-layout{display:grid;grid-template-columns:220px 1fr;gap:1rem}
@media(max-width:800px){.docs-layout{grid-template-columns:1fr}}
.docs-nav a{display:block;padding:.4rem .55rem;border-radius:10px;color:var(--muted);text-decoration:none}
.docs-nav a:hover,.docs-nav a.active{background:rgba(255,255,255,.06);color:var(--text)}
.markdown{line-height:1.75}.markdown h1,.markdown h2,.markdown h3{line-height:1.3}
.markdown pre{overflow:auto;background:#070d18;padding:1rem;border-radius:12px;border:1px solid var(--line)}
.markdown code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
.markdown :not(pre)>code{background:rgba(255,255,255,.08);padding:.1rem .35rem;border-radius:6px}
.wave{display:inline-block;animation:wave 2s ease-in-out infinite;transform-origin:70% 70%}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}}
.tool-out{margin-top:.8rem;padding:.85rem 1rem;border-radius:12px;background:#070d18;border:1px solid var(--line);word-break:break-all}
iframe.draw{width:100%;height:min(78vh,820px);border:0;border-radius:var(--radius);background:#fff}