:root{
  --bg:#0b0c10;--panel:#0d0f16;--text:#E6E6E6;--muted:#9aa0a6;--primary:#0b5ed7;--primary-2:#0a58ca;--card:#121523;--border:#1e2230;--shadow:0 12px 30px rgba(0,0,0,.35);
  --neon1:#7aa8ff;--neon2:#b992ff;--accent:#12f7d6
}
@media (prefers-color-scheme: light){
  :root{--bg:#f7f8fb;--panel:#ffffff;--text:#23262b;--muted:#5f6773;--primary:#0b5ed7;--primary-2:#0a58ca;--card:#ffffff;--border:#e9edf3;--shadow:0 10px 24px rgba(27,39,51,.10)}
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background:radial-gradient(1200px 800px at 80% -20%, rgba(11,94,215,.15), transparent 60%), radial-gradient(1000px 600px at 10% -20%, rgba(121,80,242,.12), transparent 55%), var(--bg);
  color:var(--text);line-height:1.6;min-height:100vh;position:relative
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:linear-gradient(transparent 95%, rgba(255,255,255,.08) 95%), linear-gradient(90deg, transparent 95%, rgba(255,255,255,.08) 95%);
  background-size:20px 20px, 20px 20px;mask-image:radial-gradient(1200px 800px at 50% -10%, #000 55%, transparent 70%)
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(1200px 500px at 50% -20%, rgba(18,247,214,.08), transparent 60%);opacity:.6
}
::selection{background:rgba(18,247,214,.35);color:#0b0c10}
.container{max-width:1080px;margin:0 auto;padding:0 20px}

.site-header{position:sticky;top:0;z-index:20;background:rgba(13,15,22,.55);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--border);box-shadow:0 6px 24px rgba(0,0,0,.35)}
@media (prefers-color-scheme: light){.site-header{background:rgba(255,255,255,.7)}}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand .logo{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--primary);color:#fff;font-weight:800}
.brand .name{letter-spacing:.4px}
.nav{display:flex;align-items:center;gap:16px}
.nav a{color:var(--text);text-decoration:none;border-radius:8px;padding:6px 10px;position:relative}
.nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:2px;background:linear-gradient(90deg, transparent, var(--neon1), transparent);opacity:0;transform:translateY(2px);transition:all .25s ease}
.nav a:hover{background:rgba(18,22,35,.6)}
.nav a:hover::after{opacity:1;transform:translateY(0)}
.theme-toggle{background:transparent;border:1px solid var(--border);border-radius:8px;padding:6px 10px;color:var(--text);cursor:pointer}
.theme-toggle:hover{background:var(--card)}

.hero{padding:88px 0 56px;background:linear-gradient(180deg, rgba(11,94,215,.14), transparent 60%)}
.hero-inner{display:grid;gap:16px}
.hero h1{font-size:clamp(28px,4vw,40px);margin:0;background:linear-gradient(90deg, var(--neon1), var(--neon2));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 22px rgba(122,168,255,.25)}
.subtitle{color:var(--muted);max-width:860px}
.cta-group{display:flex;gap:12px;margin-top:6px}
.btn{display:inline-block;padding:10px 16px;border-radius:12px;border:1px solid transparent;text-decoration:none;color:var(--text);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)) padding-box,
             linear-gradient(90deg, rgba(122,168,255,.4), rgba(185,146,255,.4)) border-box;
  box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .15s ease, box-shadow .2s ease
}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(11,94,215,.22)}
.btn.primary{background:linear-gradient(180deg, rgba(11,94,215,.95), rgba(10,88,202,.95)) padding-box,
             linear-gradient(90deg, rgba(122,168,255,.6), rgba(185,146,255,.6)) border-box;color:#fff}
.btn.primary:hover{box-shadow:0 14px 30px rgba(11,94,215,.35)}
.ascii{background:linear-gradient(180deg, rgba(11,94,215,.10), transparent 80%), var(--card);border:1px solid var(--border);padding:18px;border-radius:14px;overflow:auto;box-shadow:var(--shadow);position:relative}
.ascii::after{content:"";position:absolute;inset:-1px;border-radius:14px;pointer-events:none;background:radial-gradient(1200px 80px at 20% -40%, rgba(11,94,215,.35), transparent 60%), radial-gradient(1200px 80px at 80% -40%, rgba(121,80,242,.28), transparent 60%);mix-blend-mode:screen;opacity:.6}
.ascii-art{display:block;white-space:pre;line-height:1.05;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;font-weight:800;letter-spacing:.8px;background:linear-gradient(90deg, var(--neon1), var(--neon2), var(--neon1));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 22px rgba(122,168,255,.35), 0 0 12px rgba(185,146,255,.25)}
@keyframes shimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.ascii-art{background-size:200% 200%;animation:shimmer 6s ease-in-out infinite}

.section{padding:56px 0}
.section.alt{background:var(--panel);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:18px}
.usage-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0)) padding-box,
      linear-gradient(135deg, rgba(122,168,255,.35), rgba(185,146,255,.25)) border-box;
  border:1px solid transparent;border-radius:16px;padding:16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;border-radius:16px;background:radial-gradient(400px 120px at 10% -20%, rgba(122,168,255,.10), transparent 60%)}
.card h3{margin-top:6px;margin-bottom:6px;background:linear-gradient(90deg, var(--neon1), var(--neon2));-webkit-background-clip:text;background-clip:text;color:transparent}
.steps{margin:12px 0 0 18px}
.steps pre{margin-top:8px}
pre{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)) padding-box,
    linear-gradient(90deg, rgba(122,168,255,.25), rgba(185,146,255,.25)) border-box;border:1px solid transparent;padding:12px;border-radius:12px;overflow:auto;box-shadow:var(--shadow)}
code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, "Courier New", monospace}

.site-footer{border-top:1px solid var(--border);padding:20px 0;background:linear-gradient(180deg, transparent, rgba(11,94,215,.06))}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.links{display:flex;gap:14px}
.links a{color:var(--muted);text-decoration:none}
.links a:hover{color:var(--text)}

@media (max-width: 640px){
  .header-inner{height:56px}
  .hero{padding:56px 0 28px}
  .cta-group{flex-wrap:wrap}
}

/* cyber scrollbars */
*::-webkit-scrollbar{height:10px;width:10px}
*::-webkit-scrollbar-track{background:rgba(255,255,255,.02)}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--neon1), var(--neon2));border-radius:8px}