:root{
  --bg:#ffffff;
  --ink:#0b1e22;
  --muted:#506b71;
  --card:#ffffff;
  --stroke:#e7eef0;
  --surface:#f7fafb;
  --primary:#00d5ff;
  --accent:#1be4b0;
  --shadow:0 10px 28px rgba(7,31,35,.10);
  --radius:16px;
  --hover-bg: #e7faff;
  --bgactive: rgba(116,230,216,0.3);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"PingFang SC","Microsoft YaHei";line-height:1.65}
body { overflow-x: hidden;}
img{max-width:100%;display:block}
a{color:#0aa8c4;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.1rem;border-radius:14px;background:linear-gradient(90deg,var(--primary),var(--accent));color:#06333a;font-weight:800;box-shadow:0 0 0 3px rgba(0,213,255,.08);transition:transform .12s ease, box-shadow .3s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 0 5px rgba(0,213,255,.12)}
.btn.secondary{background:#fff;color:var(--ink);border:1px solid var(--stroke);box-shadow:none}
.badge{font-size:.78rem;border:1px solid var(--stroke);border-radius:999px;padding:.2rem .6rem;color:#0aa8c4;background:#f5feff}

.pt28 {padding-top: 28px; }
.mb20 { margin-bottom: 20px;}
.mb10 { margin-bottom: 10px;}
.ml15 { margin-left: 15px;}
.ml20 { margin-left: 20px;}
/* header */
header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--stroke)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:.6rem}
.brand img{width:28px;height:28px;border-radius:6px}
.nav-links{position: relative; display:flex;gap:1rem;align-items:center}
.nav-links a{padding:.5rem .7rem;border-radius:10px}
.menu-btn{display:none;background:transparent;border:0;font-size:22px}

.nav-underline{position:absolute;bottom:0px;height:2px;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:2px;transition:all .25s cubic-bezier(.22,.61,.36,1);pointer-events:none;left:0;width:0;opacity:.6}
@media (max-width:900px){
  .nav-links{display:none;position:absolute;left:20px;right:20px;top:60px;background:#fff;border:1px solid var(--stroke);border-radius:14px;padding:12px}
  .nav-links.open{display:flex;flex-direction:column;align-items:flex-start}
  .menu-btn{display:block}
}
.animate__animated.animate__bounce {
  --animate-duration: .3s;
}
/* hero */
.hero{padding:56px 0 28px; background: radial-gradient(90% 120% at 0% 0%, rgba(39,240,240,.24), transparent 50%),
                  radial-gradient(70% 90% at 100% 0%, rgba(42,224,167,.18), transparent 50%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center}
.hero h1{font-size:clamp(26px,4vw,46px);line-height:1.15;margin:.35rem 0 1rem;font-weight:900}
.hero h1 .g{background:linear-gradient(90deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);font-size:1.05rem;margin:0 0 1.1rem}
.hero-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);}
.hero-img{border-radius:14px;overflow:hidden;border:1px solid var(--stroke)}
/* sections */
section{padding:56px 0}
h2.section-title{font-size:clamp(22px,2.6vw,32px);margin:0 0 10px}
p.section-sub{color:var(--muted);margin:0 0 18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid-3{grid-template-columns:1fr}}
.card{background:var(--card);border-radius:var(--radius);padding:18px;border:1px solid var(--stroke); transition: all 0.2s ease-in-out; cursor: pointer; }
.card:hover {box-shadow:var(--shadow); }
.card h3{margin:4px 0 6px;font-size:1.1rem}
.card p{color:var(--muted);margin:0}
.cta{margin-top:10px;background:linear-gradient(180deg,#f6ffff,#ffffff);padding:24px;border-radius:18px;border:1px solid var(--stroke);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;box-shadow:var(--shadow)}
.tiny{font-size:.92rem;color:var(--muted)}
/* docs page */
.docs{display:grid;grid-template-columns:280px 1fr;gap:24px}
.docs nav{position:sticky;top:76px;align-self:start;border:1px solid var(--stroke);border-radius:14px;background:#fff;box-shadow:var(--shadow);padding:14px; max-height: 90vh; overflow-y: auto;}
.docs nav a{display:block;padding:.4rem;color:var(--ink); border-radius: 6px;}
.docs nav a:hover{background:var(--hover-bg); }
.docs nav a.active{background:#e7faff;color:#05333a}
.docs nav .toc-strong { display: block;margin-top: 5px; margin-bottom: 5px;  margin-left: 22px; color: #3f3f3f; }

.docs nav .toc-group{margin:8px 0}
.docs nav .toc-group > summary{list-style:none;cursor:pointer;padding:.45rem .4rem;border-radius:8px;display:flex;flex-direction:column;gap:2px;color:var(--ink);font-weight:700}
.docs nav .toc-group > summary::-webkit-details-marker{display:none}
.docs nav .toc-group[open] > summary{background:var(--hover-bg)}
.docs nav .toc-desc{font-size:.78rem;color:var(--muted);font-weight:400}
.docs nav a.toc-sub{padding-left:1.05rem;font-size:.95rem;opacity:.95}
.docs nav a.toc-sub::before{content:"";display:inline-block;width:.32rem;height:.32rem;border-radius:999px;background:var(--stroke);margin:0 .55rem 0 0;vertical-align:middle}
.docs nav a.toc-sub.active::before{background:#05333a}
.docs article{margin-bottom:30px; background:#fff;border:1px solid var(--stroke);border-radius:14px;box-shadow:var(--shadow);padding:20px}
.docs article h2 {
  scroll-margin-top: 70px;
}

/* simple syntax highlight colors */
pre{position: relative; background:#0b1e22;color:#d6f6ff;border-radius:12px;padding:14px;overflow:auto}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,"Courier New",monospace;font-size:0.95em}
.hl-kw{ color:#7fd2ff; font-weight:700 }
.hl-fn{ color:#8de1b8 }
.hl-str{ color:#ffe792 }
.hl-num{ color:#f7a9a9 }
.hl-cmt{ color:#7aa1a8; font-style:italic }
.copy-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      background: rgba(255, 255, 255, 0.1);
      border: none;
      color: #fff;
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .copy-btn:hover {
      background: rgba(255, 255, 255, 0.25);
    }

    .copy-btn.copied {
      background: #28a745;
    }

/* footer */
footer{padding:28px 0 20px;color:var(--muted);border-top:1px solid var(--stroke)}
.foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.foot .left{display:flex;align-items:center;gap:.6rem}
.foot .left img{width:22px;height:22px;border-radius:6px}
.social { display: flex; align-items: center; justify-content: space-between;}
.social a{margin-left:20px}
.social a img { width: 22px;  height: 22px; }