clew-code 0.2.20 → 0.2.22

package/docs/css/styles.css

@@ -1,425 +1,425 @@
-/* ============================================================
-   Clew Docs — Minimal White + Purple Theme
-   ============================================================ */
-*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
-
-:root {
-  --bg:        #ffffff;
-  --bg-card:   #f9f8fc;
-  --bg-code:   #f5f3ff;
-  --bg-hover:  #ede9fe;
-  --text:      #1a1a2e;
-  --text-dim:  #6b6580;
-  --text-faint:#9994b0;
-  --accent:    #7c3aed;
-  --accent2:   #a78bfa;
-  --border:    #e8e5f0;
-  --border2:   #d4cff0;
-  --shadow:    rgba(124,58,237,.06);
-
-  --font:  'DM Sans', system-ui, -apple-system, sans-serif;
-  --mono:  'JetBrains Mono', 'SF Mono', monospace;
-
-  --header-h: 52px;
-  --max-w: 880px;
-  --sidebar-w: 220px;
-}
-
-@media(prefers-color-scheme:dark){
-  :root {
-    --bg:        #12121a;
-    --bg-card:   #1a1a28;
-    --bg-code:   #1e1e30;
-    --bg-hover:  #2a2a40;
-    --text:      #e4e4f0;
-    --text-dim:  #9a96b0;
-    --text-faint:#6b6880;
-    --accent:    #a78bfa;
-    --accent2:   #7c3aed;
-    --border:    #2a2a3e;
-    --border2:   #3a3a54;
-    --shadow:    rgba(0,0,0,.3);
-  }
-  .header{background:rgba(18,18,26,.92)}
-  .term{box-shadow:0 12px 40px rgba(0,0,0,.2)}
-  img{opacity:.9}
-}
-
-html{scroll-behavior:smooth}
-body{
-  font-family:var(--font);
-  font-size:15px;
-  line-height:1.7;
-  color:var(--text);
-  background:var(--bg);
-  -webkit-font-smoothing:antialiased;
-}
-::selection{background:var(--accent);color:#fff}
-a{color:var(--accent);text-decoration:none;transition:.12s}
-a:hover{color:#6d28d9;text-decoration:underline}
-@media(prefers-color-scheme:dark){a:hover{color:#c4b5fd}}
-code{
-  font-family:var(--mono);
-  font-size:.85em;
-  background:var(--bg-code);
-  color:var(--accent);
-  padding:.12em .4em;
-  border-radius:4px;
-}
-pre code{background:none;padding:0;color:inherit}
-
-/* ── header ── */
-.header{
-  position:fixed;top:0;left:0;right:0;height:var(--header-h);
-  background:rgba(255,255,255,.88);backdrop-filter:blur(16px) saturate(180%);
-  -webkit-backdrop-filter:blur(16px) saturate(180%);
-  border-bottom:1px solid var(--border);z-index:100;
-  box-shadow:0 1px 3px rgba(0,0,0,.04);
-}
-@media(prefers-color-scheme:dark){
-  .header{
-    background:rgba(18,18,26,.88);
-    box-shadow:0 1px 3px rgba(0,0,0,.2);
-  }
-}
-.header-inner{
-  max-width:var(--max-w);margin:0 auto;padding:0 24px;
-  height:100%;display:flex;align-items:center;gap:12px;
-}
-.logo{
-  font-family:var(--mono);font-weight:700;font-size:14px;
-  color:var(--text);display:flex;align-items:center;gap:8px;
-  white-space:nowrap;flex-shrink:0;
-}
-.logo:hover{opacity:.85;text-decoration:none}
-.logo-mark{
-  width:26px;height:26px;border-radius:6px;
-  background:linear-gradient(135deg,#7c3aed,#a78bfa);
-  color:#fff;display:flex;align-items:center;justify-content:center;
-  font-size:12px;font-weight:700;box-shadow:0 2px 8px rgba(124,58,237,.25);
-}
-
-/* ── breadcrumbs ── */
-.header-breadcrumbs{
-  display:flex;align-items:center;gap:4px;font-size:12px;
-  color:var(--text-faint);margin-left:4px;overflow:hidden;
-  white-space:nowrap;text-overflow:ellipsis;flex-shrink:1;min-width:0;
-}
-.header-breadcrumbs a{color:var(--text-faint)}
-.header-breadcrumbs a:hover{color:var(--accent);text-decoration:none}
-.header-breadcrumbs .sep{color:var(--border2);margin:0 2px}
-.header-breadcrumbs .current{color:var(--text-dim);font-weight:500}
-
-/* ── search ── */
-.header-search{
-  position:relative;margin-left:auto;flex-shrink:0;
-}
-.header-search input{
-  width:180px;height:30px;padding:0 32px 0 10px;
-  border:1px solid var(--border);border-radius:6px;
-  background:var(--bg);color:var(--text);
-  font-family:var(--font);font-size:12px;
-  outline:none;transition:.15s;
-}
-.header-search input:focus{
-  border-color:var(--accent2);box-shadow:0 0 0 3px rgba(124,58,237,.1);
-  width:220px;
-}
-.header-search input::placeholder{color:var(--text-faint)}
-.header-search .search-icon{
-  position:absolute;right:8px;top:50%;transform:translateY(-50%);
-  font-size:12px;color:var(--text-faint);pointer-events:none;
-}
-.header-search .search-results{
-  display:none;position:absolute;top:100%;right:0;width:320px;max-height:280px;
-  overflow-y:auto;margin-top:6px;background:var(--bg);
-  border:1px solid var(--border);border-radius:8px;
-  box-shadow:0 8px 24px rgba(0,0,0,.08);z-index:300;
-}
-.header-search .search-results.open{display:block}
-.header-search .search-result{
-  display:block;padding:8px 12px;font-size:12px;color:var(--text-dim);
-  border-bottom:1px solid var(--border);
-  transition:.08s;
-}
-.header-search .search-result:last-child{border:none}
-.header-search .search-result:hover{background:var(--bg-hover);color:var(--text);text-decoration:none}
-.header-search .search-result mark{background:rgba(124,58,237,.15);color:var(--accent)}
-.header-search .search-empty{
-  padding:12px;font-size:12px;color:var(--text-faint);text-align:center;
-}
-
-/* ── header nav ── */
-.header-nav{display:flex;gap:2px;align-items:center;flex-shrink:0}
-.header-nav a{
-  padding:5px 10px;border-radius:5px;font-size:12px;font-weight:500;
-  color:var(--text-dim);white-space:nowrap;
-}
-.header-nav a:hover{background:var(--bg-hover);color:var(--text);text-decoration:none}
-.header-nav a.active{color:var(--accent);background:var(--bg-code)}
-
-/* ── language toggle ── */
-.lang-toggle{
-  display:flex;align-items:center;padding:4px 8px;border-radius:5px;
-  background:none;border:1px solid var(--border);cursor:pointer;
-  font-size:11px;color:var(--text-dim);font-family:var(--font);gap:4px;
-  transition:.1s;flex-shrink:0;
-}
-.lang-toggle:hover{background:var(--bg-hover);border-color:var(--border2)}
-.menu-btn{display:none;width:32px;height:32px;border:1px solid var(--border);border-radius:6px;background:none;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px;flex-shrink:0}
-.menu-btn span{display:block;width:16px;height:2px;background:var(--text-dim);border-radius:2px;transition:.15s}
-.menu-btn.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
-.menu-btn.open span:nth-child(2){opacity:0}
-.menu-btn.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}
-.sidebar-overlay{display:none}
-
-/* ── page layout (index) ── */
-.page{
-  max-width:var(--max-w);margin:calc(var(--header-h) + 40px) auto 60px;
-  padding:0 24px;
-}
-
-/* ── doc layout (sub-pages) ── */
-.app{display:flex;max-width:var(--max-w);margin:0 auto;padding:0 24px;gap:0}
-.sidebar{
-  position:fixed;top:var(--header-h);left:0;bottom:0;
-  width:var(--sidebar-w);overflow-y:auto;padding:24px 12px 40px;
-  border-right:1px solid var(--border);
-  background:var(--bg);
-  z-index:50;
-}
-.sidebar-section{margin-bottom:24px}
-.sidebar-label{
-  font-family:var(--mono);font-size:10px;font-weight:600;text-transform:uppercase;
-  color:var(--text-faint);letter-spacing:.05em;margin-bottom:6px;padding:0 8px;
-}
-.sidebar-link{
-  display:block;padding:3px 8px;border-radius:4px;
-  font-size:13px;color:var(--text-dim);transition:.1s;
-}
-.sidebar-link:hover{background:var(--bg-hover);color:var(--text);text-decoration:none}
-.sidebar-link.active{color:var(--accent);background:var(--bg-code);font-weight:500}
-.sidebar-link .link-icon{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--border2);margin-right:6px;vertical-align:middle;transition:.1s}
-.sidebar-link:hover .link-icon{background:var(--accent2)}
-.sidebar-link.active .link-icon{background:var(--accent)}
-
-.content-wrap{flex:1;margin-left:var(--sidebar-w);min-width:0}
-.content{
-  max-width:var(--max-w);padding:calc(var(--header-h) + 24px) 32px 60px;
-}
-
-/* ── TOC sidebar ── */
-.toc-sidebar{
-  display:none;
-}
-@media(min-width:1200px){
-  .toc-sidebar{
-    display:block;position:sticky;top:calc(var(--header-h) + 24px);
-    width:180px;min-width:180px;max-height:calc(100vh - var(--header-h) - 48px);
-    overflow-y:auto;padding:calc(var(--header-h) + 24px) 0 40px 20px;
-    margin-left:24px;border-left:1px solid var(--border);
-  }
-  .content-wrap{display:flex;flex-direction:row}
-  .content{flex:1;min-width:0}
-}
-.toc-label{
-  font-family:var(--mono);font-size:10px;font-weight:600;text-transform:uppercase;
-  color:var(--text-faint);letter-spacing:.05em;margin-bottom:8px;
-}
-.toc-link{
-  display:block;padding:2px 0 2px 12px;border-left:2px solid transparent;
-  font-size:12px;color:var(--text-faint);line-height:1.6;transition:.1s;
-}
-.toc-link:hover{color:var(--accent);border-color:var(--accent2);text-decoration:none}
-.toc-link.active{color:var(--accent);border-color:var(--accent)}
-.toc-h3{padding-left:20px;font-size:11px}
-
-/* ── breadcrumbs ── */
-.breadcrumbs{
-  font-size:13px;color:var(--text-faint);margin-bottom:24px;
-}
-.breadcrumbs a{color:var(--text-faint)}
-.breadcrumbs a:hover{color:var(--accent)}
-.breadcrumbs .sep{margin:0 6px}
-
-/* ── headings ── */
-h1{
-  font-family:var(--mono);font-size:28px;font-weight:700;
-  margin-bottom:8px;color:var(--text);
-}
-h2{
-  font-family:var(--mono);font-size:18px;font-weight:600;
-  margin:40px 0 16px;color:var(--text);
-  padding-bottom:6px;border-bottom:1px solid var(--border);
-}
-h3{font-size:15px;font-weight:600;margin:24px 0 8px;color:var(--text)}
-p{color:var(--text-dim);margin-bottom:12px;line-height:1.7}
-.sub{color:var(--text-dim);margin-bottom:24px}
-
-/* ── hero ── */
-.hero{padding:48px 0 32px;text-align:center}
-.hero h1{font-size:36px;margin-bottom:12px}
-.hero .hl{background:linear-gradient(135deg,#7c3aed,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
-.hero p{max-width:560px;margin:0 auto 20px;font-size:16px}
-.hero-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
-
-.badge{
-  display:inline-flex;align-items:center;gap:6px;
-  padding:3px 12px;border-radius:100px;
-  font-family:var(--mono);font-size:11px;font-weight:500;
-  color:var(--accent);background:var(--bg-code);
-  border:1px solid var(--border2);margin-bottom:20px;
-}
-.badge .dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}
-
-.btn{
-  display:inline-flex;align-items:center;gap:6px;
-  padding:8px 18px;border-radius:6px;
-  font-family:var(--mono);font-size:12px;font-weight:600;
-  border:1px solid var(--border);
-  background:var(--bg);color:var(--text);
-  cursor:pointer;transition:.15s;
-}
-.btn:hover{text-decoration:none;border-color:var(--border2)}
-.btn-p{
-  background:var(--accent);color:#fff;border-color:var(--accent);
-  box-shadow:0 3px 12px rgba(124,58,237,.2);
-}
-.btn-p:hover{background:#6d28d9;color:#fff;border-color:#6d28d9;box-shadow:0 5px 18px rgba(124,58,237,.3);transform:translateY(-1px)}
-.btn-ghost{color:var(--text-dim);border-color:var(--border)}
-.btn-ghost:hover{color:var(--accent);border-color:var(--border2);background:var(--bg-code)}
-
-/* ── stat cards ── */
-.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:32px 0}
-.stat{
-  text-align:center;padding:16px 8px;border-radius:8px;
-  background:var(--bg-card);border:1px solid var(--border);
-}
-.stat-num{
-  font-family:var(--mono);font-size:24px;font-weight:700;
-  background:linear-gradient(135deg,#7c3aed,#a78bfa);
-  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
-  line-height:1.2;
-}
-.stat-lbl{font-size:12px;color:var(--text-faint);font-weight:500;margin-top:2px}
-
-/* ── grid cards ── */
-.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:24px 0}
-.card{
-  padding:20px;border-radius:8px;
-  background:var(--bg-card);border:1px solid var(--border);
-  transition:.15s;
-}
-.card:hover{border-color:var(--border2);box-shadow:0 4px 16px var(--shadow)}
-.card h3{font-family:var(--mono);font-size:13px;margin-bottom:6px;color:var(--accent)}
-.card p{font-size:13px}
-.card .tag{
-  display:inline-block;font-family:var(--mono);font-size:10px;
-  padding:1px 7px;border-radius:3px;
-  background:var(--bg-code);color:var(--accent);
-  border:1px solid var(--border2);margin:6px 2px 0 0;
-}
-
-/* ── terminal mock ── */
-.term{
-  background:var(--bg-code);border:1px solid var(--border2);
-  border-radius:8px;overflow:hidden;margin:32px auto;
-  max-width:660px;box-shadow:0 12px 40px var(--shadow);
-}
-.term-bar{
-  display:flex;align-items:center;gap:6px;
-  padding:10px 14px;background:rgba(124,58,237,.03);
-  border-bottom:1px solid var(--border2);
-}
-.term-dot{width:8px;height:8px;border-radius:50%;background:#ddd}
-.term-dot:nth-child(1){background:#ff5f56}
-.term-dot:nth-child(2){background:#ffbd2e}
-.term-dot:nth-child(3){background:#27c93f}
-.term-title{font-family:var(--mono);font-size:11px;color:var(--text-faint);margin-left:6px}
-.term-body{
-  padding:14px;font-family:var(--mono);font-size:12px;line-height:1.7;
-  color:var(--text);overflow-x:auto;white-space:pre;
-}
-.term-body .p{color:var(--accent);font-weight:600}
-.term-body .d{color:var(--text-faint)}
-.term-body .h{color:var(--accent)}
-
-/* ── table ── */
-.table-wrap{overflow-x:auto;margin:16px 0;border-radius:6px;border:1px solid var(--border)}
-table{width:100%;border-collapse:collapse;font-size:13px}
-th{
-  font-family:var(--mono);font-size:10px;font-weight:600;text-transform:uppercase;
-  text-align:left;padding:8px 12px;letter-spacing:.05em;
-  color:var(--accent);background:var(--bg-code);
-  border-bottom:1px solid var(--border);
-}
-td{padding:7px 12px;border-bottom:1px solid var(--border);color:var(--text-dim);vertical-align:top}
-tr:last-child td{border:none}
-tr:hover td{background:rgba(124,58,237,.02)}
-
-/* ── code blocks ── */
-.code-block-wrap{margin:16px 0;border-radius:6px;border:1px solid var(--border);overflow:hidden}
-.code-block-header{
-  display:flex;justify-content:space-between;align-items:center;
-  padding:6px 10px;background:var(--bg-card);
-  border-bottom:1px solid var(--border);font-size:11px;color:var(--text-faint);
-  font-family:var(--mono);
-}
-.code-block-wrap pre{margin:0;border:none;border-radius:0}
-.copy-btn{
-  background:none;border:1px solid var(--border);border-radius:4px;
-  color:var(--text-faint);font-size:10px;padding:2px 8px;cursor:pointer;font-family:var(--mono);transition:.1s;
-}
-.copy-btn:hover{background:var(--bg-hover);color:var(--accent);border-color:var(--accent2)}
-.copy-btn.copied{background:var(--bg-code);color:var(--accent);border-color:var(--accent)}
-
-/* ── language toggle (kept for backward compat) ── */
-.lang-select{display:none}
-
-/* ── misc ── */
-hr{border:none;border-top:1px solid var(--border);margin:40px 0}
-.footer{
-  margin-top:60px;padding-top:20px;border-top:1px solid var(--border);
-  display:flex;justify-content:space-between;align-items:center;gap:16px;
-  font-size:12px;color:var(--text-faint);flex-wrap:wrap;
-}
-.footer-links{display:flex;gap:16px}
-.footer-links a{color:var(--text-faint);font-size:12px}
-.footer-links a:hover{color:var(--accent)}
-
-.menu-btn{display:none;width:32px;height:32px;border:1px solid var(--border);border-radius:5px;background:none;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px;margin-left:auto}
-.menu-btn span{display:block;width:16px;height:2px;background:var(--text-dim);border-radius:2px}
-.sidebar-overlay{display:none}
-
-/* ── responsive ── */
-@media(max-width:900px){
-  .sidebar{display:none}
-  .content-wrap{margin-left:0}
-  .content{padding:calc(var(--header-h) + 16px) 20px 40px}
-  .header-nav,.header-search,.header-breadcrumbs,.lang-toggle{display:none}
-  .menu-btn{display:flex}
-  .stats{grid-template-columns:repeat(2,1fr)}
-  .grid{grid-template-columns:1fr}
-  .hero h1{font-size:26px}
-
-  .sidebar.open{
-    display:block;position:fixed;top:var(--header-h);left:0;right:0;bottom:0;
-    width:auto;z-index:200;background:var(--bg);padding:24px;
-    border-right:none;animation:slideIn .15s ease-out;
-  }
-  .sidebar.open .header-search{
-    display:block;margin:0 0 16px;position:static;
-  }
-  .sidebar.open .header-search input{width:100%}
-  .sidebar.open .header-nav{display:flex;flex-direction:column;gap:2px}
-  .sidebar-overlay.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:199}
-}
-
-@media(max-width:1200px){
-  .toc-sidebar{display:none !important}
-}
-
-@keyframes slideIn{
-  from{transform:translateX(-100%)}
-  to{transform:translateX(0)}
-}
+/* ============================================================
+   Clew Docs — Minimal White + Purple Theme
+   ============================================================ */
+*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
+
+:root {
+  --bg:        #ffffff;
+  --bg-card:   #f9f8fc;
+  --bg-code:   #f5f3ff;
+  --bg-hover:  #ede9fe;
+  --text:      #1a1a2e;
+  --text-dim:  #6b6580;
+  --text-faint:#9994b0;
+  --accent:    #7c3aed;
+  --accent2:   #a78bfa;
+  --border:    #e8e5f0;
+  --border2:   #d4cff0;
+  --shadow:    rgba(124,58,237,.06);
+
+  --font:  'DM Sans', system-ui, -apple-system, sans-serif;
+  --mono:  'JetBrains Mono', 'SF Mono', monospace;
+
+  --header-h: 52px;
+  --max-w: 880px;
+  --sidebar-w: 220px;
+}
+
+@media(prefers-color-scheme:dark){
+  :root {
+    --bg:        #12121a;
+    --bg-card:   #1a1a28;
+    --bg-code:   #1e1e30;
+    --bg-hover:  #2a2a40;
+    --text:      #e4e4f0;
+    --text-dim:  #9a96b0;
+    --text-faint:#6b6880;
+    --accent:    #a78bfa;
+    --accent2:   #7c3aed;
+    --border:    #2a2a3e;
+    --border2:   #3a3a54;
+    --shadow:    rgba(0,0,0,.3);
+  }
+  .header{background:rgba(18,18,26,.92)}
+  .term{box-shadow:0 12px 40px rgba(0,0,0,.2)}
+  img{opacity:.9}
+}
+
+html{scroll-behavior:smooth}
+body{
+  font-family:var(--font);
+  font-size:15px;
+  line-height:1.7;
+  color:var(--text);
+  background:var(--bg);
+  -webkit-font-smoothing:antialiased;
+}
+::selection{background:var(--accent);color:#fff}
+a{color:var(--accent);text-decoration:none;transition:.12s}
+a:hover{color:#6d28d9;text-decoration:underline}
+@media(prefers-color-scheme:dark){a:hover{color:#c4b5fd}}
+code{
+  font-family:var(--mono);
+  font-size:.85em;
+  background:var(--bg-code);
+  color:var(--accent);
+  padding:.12em .4em;
+  border-radius:4px;
+}
+pre code{background:none;padding:0;color:inherit}
+
+/* ── header ── */
+.header{
+  position:fixed;top:0;left:0;right:0;height:var(--header-h);
+  background:rgba(255,255,255,.88);backdrop-filter:blur(16px) saturate(180%);
+  -webkit-backdrop-filter:blur(16px) saturate(180%);
+  border-bottom:1px solid var(--border);z-index:100;
+  box-shadow:0 1px 3px rgba(0,0,0,.04);
+}
+@media(prefers-color-scheme:dark){
+  .header{
+    background:rgba(18,18,26,.88);
+    box-shadow:0 1px 3px rgba(0,0,0,.2);
+  }
+}
+.header-inner{
+  max-width:var(--max-w);margin:0 auto;padding:0 24px;
+  height:100%;display:flex;align-items:center;gap:12px;
+}
+.logo{
+  font-family:var(--mono);font-weight:700;font-size:14px;
+  color:var(--text);display:flex;align-items:center;gap:8px;
+  white-space:nowrap;flex-shrink:0;
+}
+.logo:hover{opacity:.85;text-decoration:none}
+.logo-mark{
+  width:26px;height:26px;border-radius:6px;
+  background:linear-gradient(135deg,#7c3aed,#a78bfa);
+  color:#fff;display:flex;align-items:center;justify-content:center;
+  font-size:12px;font-weight:700;box-shadow:0 2px 8px rgba(124,58,237,.25);
+}
+
+/* ── breadcrumbs ── */
+.header-breadcrumbs{
+  display:flex;align-items:center;gap:4px;font-size:12px;
+  color:var(--text-faint);margin-left:4px;overflow:hidden;
+  white-space:nowrap;text-overflow:ellipsis;flex-shrink:1;min-width:0;
+}
+.header-breadcrumbs a{color:var(--text-faint)}
+.header-breadcrumbs a:hover{color:var(--accent);text-decoration:none}
+.header-breadcrumbs .sep{color:var(--border2);margin:0 2px}
+.header-breadcrumbs .current{color:var(--text-dim);font-weight:500}
+
+/* ── search ── */
+.header-search{
+  position:relative;margin-left:auto;flex-shrink:0;
+}
+.header-search input{
+  width:180px;height:30px;padding:0 32px 0 10px;
+  border:1px solid var(--border);border-radius:6px;
+  background:var(--bg);color:var(--text);
+  font-family:var(--font);font-size:12px;
+  outline:none;transition:.15s;
+}
+.header-search input:focus{
+  border-color:var(--accent2);box-shadow:0 0 0 3px rgba(124,58,237,.1);
+  width:220px;
+}
+.header-search input::placeholder{color:var(--text-faint)}
+.header-search .search-icon{
+  position:absolute;right:8px;top:50%;transform:translateY(-50%);
+  font-size:12px;color:var(--text-faint);pointer-events:none;
+}
+.header-search .search-results{
+  display:none;position:absolute;top:100%;right:0;width:320px;max-height:280px;
+  overflow-y:auto;margin-top:6px;background:var(--bg);
+  border:1px solid var(--border);border-radius:8px;
+  box-shadow:0 8px 24px rgba(0,0,0,.08);z-index:300;
+}
+.header-search .search-results.open{display:block}
+.header-search .search-result{
+  display:block;padding:8px 12px;font-size:12px;color:var(--text-dim);
+  border-bottom:1px solid var(--border);
+  transition:.08s;
+}
+.header-search .search-result:last-child{border:none}
+.header-search .search-result:hover{background:var(--bg-hover);color:var(--text);text-decoration:none}
+.header-search .search-result mark{background:rgba(124,58,237,.15);color:var(--accent)}
+.header-search .search-empty{
+  padding:12px;font-size:12px;color:var(--text-faint);text-align:center;
+}
+
+/* ── header nav ── */
+.header-nav{display:flex;gap:2px;align-items:center;flex-shrink:0}
+.header-nav a{
+  padding:5px 10px;border-radius:5px;font-size:12px;font-weight:500;
+  color:var(--text-dim);white-space:nowrap;
+}
+.header-nav a:hover{background:var(--bg-hover);color:var(--text);text-decoration:none}
+.header-nav a.active{color:var(--accent);background:var(--bg-code)}
+
+/* ── language toggle ── */
+.lang-toggle{
+  display:flex;align-items:center;padding:4px 8px;border-radius:5px;
+  background:none;border:1px solid var(--border);cursor:pointer;
+  font-size:11px;color:var(--text-dim);font-family:var(--font);gap:4px;
+  transition:.1s;flex-shrink:0;
+}
+.lang-toggle:hover{background:var(--bg-hover);border-color:var(--border2)}
+.menu-btn{display:none;width:32px;height:32px;border:1px solid var(--border);border-radius:6px;background:none;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px;flex-shrink:0}
+.menu-btn span{display:block;width:16px;height:2px;background:var(--text-dim);border-radius:2px;transition:.15s}
+.menu-btn.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
+.menu-btn.open span:nth-child(2){opacity:0}
+.menu-btn.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}
+.sidebar-overlay{display:none}
+
+/* ── page layout (index) ── */
+.page{
+  max-width:var(--max-w);margin:calc(var(--header-h) + 40px) auto 60px;
+  padding:0 24px;
+}
+
+/* ── doc layout (sub-pages) ── */
+.app{display:flex;max-width:var(--max-w);margin:0 auto;padding:0 24px;gap:0}
+.sidebar{
+  position:fixed;top:var(--header-h);left:0;bottom:0;
+  width:var(--sidebar-w);overflow-y:auto;padding:24px 12px 40px;
+  border-right:1px solid var(--border);
+  background:var(--bg);
+  z-index:50;
+}
+.sidebar-section{margin-bottom:24px}
+.sidebar-label{
+  font-family:var(--mono);font-size:10px;font-weight:600;text-transform:uppercase;
+  color:var(--text-faint);letter-spacing:.05em;margin-bottom:6px;padding:0 8px;
+}
+.sidebar-link{
+  display:block;padding:3px 8px;border-radius:4px;
+  font-size:13px;color:var(--text-dim);transition:.1s;
+}
+.sidebar-link:hover{background:var(--bg-hover);color:var(--text);text-decoration:none}
+.sidebar-link.active{color:var(--accent);background:var(--bg-code);font-weight:500}
+.sidebar-link .link-icon{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--border2);margin-right:6px;vertical-align:middle;transition:.1s}
+.sidebar-link:hover .link-icon{background:var(--accent2)}
+.sidebar-link.active .link-icon{background:var(--accent)}
+
+.content-wrap{flex:1;margin-left:var(--sidebar-w);min-width:0}
+.content{
+  max-width:var(--max-w);padding:calc(var(--header-h) + 24px) 32px 60px;
+}
+
+/* ── TOC sidebar ── */
+.toc-sidebar{
+  display:none;
+}
+@media(min-width:1200px){
+  .toc-sidebar{
+    display:block;position:sticky;top:calc(var(--header-h) + 24px);
+    width:180px;min-width:180px;max-height:calc(100vh - var(--header-h) - 48px);
+    overflow-y:auto;padding:calc(var(--header-h) + 24px) 0 40px 20px;
+    margin-left:24px;border-left:1px solid var(--border);
+  }
+  .content-wrap{display:flex;flex-direction:row}
+  .content{flex:1;min-width:0}
+}
+.toc-label{
+  font-family:var(--mono);font-size:10px;font-weight:600;text-transform:uppercase;
+  color:var(--text-faint);letter-spacing:.05em;margin-bottom:8px;
+}
+.toc-link{
+  display:block;padding:2px 0 2px 12px;border-left:2px solid transparent;
+  font-size:12px;color:var(--text-faint);line-height:1.6;transition:.1s;
+}
+.toc-link:hover{color:var(--accent);border-color:var(--accent2);text-decoration:none}
+.toc-link.active{color:var(--accent);border-color:var(--accent)}
+.toc-h3{padding-left:20px;font-size:11px}
+
+/* ── breadcrumbs ── */
+.breadcrumbs{
+  font-size:13px;color:var(--text-faint);margin-bottom:24px;
+}
+.breadcrumbs a{color:var(--text-faint)}
+.breadcrumbs a:hover{color:var(--accent)}
+.breadcrumbs .sep{margin:0 6px}
+
+/* ── headings ── */
+h1{
+  font-family:var(--mono);font-size:28px;font-weight:700;
+  margin-bottom:8px;color:var(--text);
+}
+h2{
+  font-family:var(--mono);font-size:18px;font-weight:600;
+  margin:40px 0 16px;color:var(--text);
+  padding-bottom:6px;border-bottom:1px solid var(--border);
+}
+h3{font-size:15px;font-weight:600;margin:24px 0 8px;color:var(--text)}
+p{color:var(--text-dim);margin-bottom:12px;line-height:1.7}
+.sub{color:var(--text-dim);margin-bottom:24px}
+
+/* ── hero ── */
+.hero{padding:48px 0 32px;text-align:center}
+.hero h1{font-size:36px;margin-bottom:12px}
+.hero .hl{background:linear-gradient(135deg,#7c3aed,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
+.hero p{max-width:560px;margin:0 auto 20px;font-size:16px}
+.hero-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
+
+.badge{
+  display:inline-flex;align-items:center;gap:6px;
+  padding:3px 12px;border-radius:100px;
+  font-family:var(--mono);font-size:11px;font-weight:500;
+  color:var(--accent);background:var(--bg-code);
+  border:1px solid var(--border2);margin-bottom:20px;
+}
+.badge .dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}
+
+.btn{
+  display:inline-flex;align-items:center;gap:6px;
+  padding:8px 18px;border-radius:6px;
+  font-family:var(--mono);font-size:12px;font-weight:600;
+  border:1px solid var(--border);
+  background:var(--bg);color:var(--text);
+  cursor:pointer;transition:.15s;
+}
+.btn:hover{text-decoration:none;border-color:var(--border2)}
+.btn-p{
+  background:var(--accent);color:#fff;border-color:var(--accent);
+  box-shadow:0 3px 12px rgba(124,58,237,.2);
+}
+.btn-p:hover{background:#6d28d9;color:#fff;border-color:#6d28d9;box-shadow:0 5px 18px rgba(124,58,237,.3);transform:translateY(-1px)}
+.btn-ghost{color:var(--text-dim);border-color:var(--border)}
+.btn-ghost:hover{color:var(--accent);border-color:var(--border2);background:var(--bg-code)}
+
+/* ── stat cards ── */
+.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:32px 0}
+.stat{
+  text-align:center;padding:16px 8px;border-radius:8px;
+  background:var(--bg-card);border:1px solid var(--border);
+}
+.stat-num{
+  font-family:var(--mono);font-size:24px;font-weight:700;
+  background:linear-gradient(135deg,#7c3aed,#a78bfa);
+  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
+  line-height:1.2;
+}
+.stat-lbl{font-size:12px;color:var(--text-faint);font-weight:500;margin-top:2px}
+
+/* ── grid cards ── */
+.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:24px 0}
+.card{
+  padding:20px;border-radius:8px;
+  background:var(--bg-card);border:1px solid var(--border);
+  transition:.15s;
+}
+.card:hover{border-color:var(--border2);box-shadow:0 4px 16px var(--shadow)}
+.card h3{font-family:var(--mono);font-size:13px;margin-bottom:6px;color:var(--accent)}
+.card p{font-size:13px}
+.card .tag{
+  display:inline-block;font-family:var(--mono);font-size:10px;
+  padding:1px 7px;border-radius:3px;
+  background:var(--bg-code);color:var(--accent);
+  border:1px solid var(--border2);margin:6px 2px 0 0;
+}
+
+/* ── terminal mock ── */
+.term{
+  background:var(--bg-code);border:1px solid var(--border2);
+  border-radius:8px;overflow:hidden;margin:32px auto;
+  max-width:660px;box-shadow:0 12px 40px var(--shadow);
+}
+.term-bar{
+  display:flex;align-items:center;gap:6px;
+  padding:10px 14px;background:rgba(124,58,237,.03);
+  border-bottom:1px solid var(--border2);
+}
+.term-dot{width:8px;height:8px;border-radius:50%;background:#ddd}
+.term-dot:nth-child(1){background:#ff5f56}
+.term-dot:nth-child(2){background:#ffbd2e}
+.term-dot:nth-child(3){background:#27c93f}
+.term-title{font-family:var(--mono);font-size:11px;color:var(--text-faint);margin-left:6px}
+.term-body{
+  padding:14px;font-family:var(--mono);font-size:12px;line-height:1.7;
+  color:var(--text);overflow-x:auto;white-space:pre;
+}
+.term-body .p{color:var(--accent);font-weight:600}
+.term-body .d{color:var(--text-faint)}
+.term-body .h{color:var(--accent)}
+
+/* ── table ── */
+.table-wrap{overflow-x:auto;margin:16px 0;border-radius:6px;border:1px solid var(--border)}
+table{width:100%;border-collapse:collapse;font-size:13px}
+th{
+  font-family:var(--mono);font-size:10px;font-weight:600;text-transform:uppercase;
+  text-align:left;padding:8px 12px;letter-spacing:.05em;
+  color:var(--accent);background:var(--bg-code);
+  border-bottom:1px solid var(--border);
+}
+td{padding:7px 12px;border-bottom:1px solid var(--border);color:var(--text-dim);vertical-align:top}
+tr:last-child td{border:none}
+tr:hover td{background:rgba(124,58,237,.02)}
+
+/* ── code blocks ── */
+.code-block-wrap{margin:16px 0;border-radius:6px;border:1px solid var(--border);overflow:hidden}
+.code-block-header{
+  display:flex;justify-content:space-between;align-items:center;
+  padding:6px 10px;background:var(--bg-card);
+  border-bottom:1px solid var(--border);font-size:11px;color:var(--text-faint);
+  font-family:var(--mono);
+}
+.code-block-wrap pre{margin:0;border:none;border-radius:0}
+.copy-btn{
+  background:none;border:1px solid var(--border);border-radius:4px;
+  color:var(--text-faint);font-size:10px;padding:2px 8px;cursor:pointer;font-family:var(--mono);transition:.1s;
+}
+.copy-btn:hover{background:var(--bg-hover);color:var(--accent);border-color:var(--accent2)}
+.copy-btn.copied{background:var(--bg-code);color:var(--accent);border-color:var(--accent)}
+
+/* ── language toggle (kept for backward compat) ── */
+.lang-select{display:none}
+
+/* ── misc ── */
+hr{border:none;border-top:1px solid var(--border);margin:40px 0}
+.footer{
+  margin-top:60px;padding-top:20px;border-top:1px solid var(--border);
+  display:flex;justify-content:space-between;align-items:center;gap:16px;
+  font-size:12px;color:var(--text-faint);flex-wrap:wrap;
+}
+.footer-links{display:flex;gap:16px}
+.footer-links a{color:var(--text-faint);font-size:12px}
+.footer-links a:hover{color:var(--accent)}
+
+.menu-btn{display:none;width:32px;height:32px;border:1px solid var(--border);border-radius:5px;background:none;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px;margin-left:auto}
+.menu-btn span{display:block;width:16px;height:2px;background:var(--text-dim);border-radius:2px}
+.sidebar-overlay{display:none}
+
+/* ── responsive ── */
+@media(max-width:900px){
+  .sidebar{display:none}
+  .content-wrap{margin-left:0}
+  .content{padding:calc(var(--header-h) + 16px) 20px 40px}
+  .header-nav,.header-search,.header-breadcrumbs,.lang-toggle{display:none}
+  .menu-btn{display:flex}
+  .stats{grid-template-columns:repeat(2,1fr)}
+  .grid{grid-template-columns:1fr}
+  .hero h1{font-size:26px}
+
+  .sidebar.open{
+    display:block;position:fixed;top:var(--header-h);left:0;right:0;bottom:0;
+    width:auto;z-index:200;background:var(--bg);padding:24px;
+    border-right:none;animation:slideIn .15s ease-out;
+  }
+  .sidebar.open .header-search{
+    display:block;margin:0 0 16px;position:static;
+  }
+  .sidebar.open .header-search input{width:100%}
+  .sidebar.open .header-nav{display:flex;flex-direction:column;gap:2px}
+  .sidebar-overlay.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:199}
+}
+
+@media(max-width:1200px){
+  .toc-sidebar{display:none !important}
+}
+
+@keyframes slideIn{
+  from{transform:translateX(-100%)}
+  to{transform:translateX(0)}
+}