clew-code 0.2.22 → 0.2.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,425 +1,545 @@
1
- /* ============================================================
2
- Clew Docs — Minimal White + Purple Theme
3
- ============================================================ */
4
- *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
5
-
6
- :root {
7
- --bg: #ffffff;
8
- --bg-card: #f9f8fc;
9
- --bg-code: #f5f3ff;
10
- --bg-hover: #ede9fe;
11
- --text: #1a1a2e;
12
- --text-dim: #6b6580;
13
- --text-faint:#9994b0;
14
- --accent: #7c3aed;
15
- --accent2: #a78bfa;
16
- --border: #e8e5f0;
17
- --border2: #d4cff0;
18
- --shadow: rgba(124,58,237,.06);
19
-
20
- --font: 'DM Sans', system-ui, -apple-system, sans-serif;
21
- --mono: 'JetBrains Mono', 'SF Mono', monospace;
22
-
23
- --header-h: 52px;
24
- --max-w: 880px;
25
- --sidebar-w: 220px;
26
- }
27
-
28
- @media(prefers-color-scheme:dark){
29
- :root {
30
- --bg: #12121a;
31
- --bg-card: #1a1a28;
32
- --bg-code: #1e1e30;
33
- --bg-hover: #2a2a40;
34
- --text: #e4e4f0;
35
- --text-dim: #9a96b0;
36
- --text-faint:#6b6880;
37
- --accent: #a78bfa;
38
- --accent2: #7c3aed;
39
- --border: #2a2a3e;
40
- --border2: #3a3a54;
41
- --shadow: rgba(0,0,0,.3);
42
- }
43
- .header{background:rgba(18,18,26,.92)}
44
- .term{box-shadow:0 12px 40px rgba(0,0,0,.2)}
45
- img{opacity:.9}
46
- }
47
-
48
- html{scroll-behavior:smooth}
49
- body{
50
- font-family:var(--font);
51
- font-size:15px;
52
- line-height:1.7;
53
- color:var(--text);
54
- background:var(--bg);
55
- -webkit-font-smoothing:antialiased;
56
- }
57
- ::selection{background:var(--accent);color:#fff}
58
- a{color:var(--accent);text-decoration:none;transition:.12s}
59
- a:hover{color:#6d28d9;text-decoration:underline}
60
- @media(prefers-color-scheme:dark){a:hover{color:#c4b5fd}}
61
- code{
62
- font-family:var(--mono);
63
- font-size:.85em;
64
- background:var(--bg-code);
65
- color:var(--accent);
66
- padding:.12em .4em;
67
- border-radius:4px;
68
- }
69
- pre code{background:none;padding:0;color:inherit}
70
-
71
- /* ── header ── */
72
- .header{
73
- position:fixed;top:0;left:0;right:0;height:var(--header-h);
74
- background:rgba(255,255,255,.88);backdrop-filter:blur(16px) saturate(180%);
75
- -webkit-backdrop-filter:blur(16px) saturate(180%);
76
- border-bottom:1px solid var(--border);z-index:100;
77
- box-shadow:0 1px 3px rgba(0,0,0,.04);
78
- }
79
- @media(prefers-color-scheme:dark){
80
- .header{
81
- background:rgba(18,18,26,.88);
82
- box-shadow:0 1px 3px rgba(0,0,0,.2);
83
- }
84
- }
85
- .header-inner{
86
- max-width:var(--max-w);margin:0 auto;padding:0 24px;
87
- height:100%;display:flex;align-items:center;gap:12px;
88
- }
89
- .logo{
90
- font-family:var(--mono);font-weight:700;font-size:14px;
91
- color:var(--text);display:flex;align-items:center;gap:8px;
92
- white-space:nowrap;flex-shrink:0;
93
- }
94
- .logo:hover{opacity:.85;text-decoration:none}
95
- .logo-mark{
96
- width:26px;height:26px;border-radius:6px;
97
- background:linear-gradient(135deg,#7c3aed,#a78bfa);
98
- color:#fff;display:flex;align-items:center;justify-content:center;
99
- font-size:12px;font-weight:700;box-shadow:0 2px 8px rgba(124,58,237,.25);
100
- }
101
-
102
- /* ── breadcrumbs ── */
103
- .header-breadcrumbs{
104
- display:flex;align-items:center;gap:4px;font-size:12px;
105
- color:var(--text-faint);margin-left:4px;overflow:hidden;
106
- white-space:nowrap;text-overflow:ellipsis;flex-shrink:1;min-width:0;
107
- }
108
- .header-breadcrumbs a{color:var(--text-faint)}
109
- .header-breadcrumbs a:hover{color:var(--accent);text-decoration:none}
110
- .header-breadcrumbs .sep{color:var(--border2);margin:0 2px}
111
- .header-breadcrumbs .current{color:var(--text-dim);font-weight:500}
112
-
113
- /* ── search ── */
114
- .header-search{
115
- position:relative;margin-left:auto;flex-shrink:0;
116
- }
117
- .header-search input{
118
- width:180px;height:30px;padding:0 32px 0 10px;
119
- border:1px solid var(--border);border-radius:6px;
120
- background:var(--bg);color:var(--text);
121
- font-family:var(--font);font-size:12px;
122
- outline:none;transition:.15s;
123
- }
124
- .header-search input:focus{
125
- border-color:var(--accent2);box-shadow:0 0 0 3px rgba(124,58,237,.1);
126
- width:220px;
127
- }
128
- .header-search input::placeholder{color:var(--text-faint)}
129
- .header-search .search-icon{
130
- position:absolute;right:8px;top:50%;transform:translateY(-50%);
131
- font-size:12px;color:var(--text-faint);pointer-events:none;
132
- }
133
- .header-search .search-results{
134
- display:none;position:absolute;top:100%;right:0;width:320px;max-height:280px;
135
- overflow-y:auto;margin-top:6px;background:var(--bg);
136
- border:1px solid var(--border);border-radius:8px;
137
- box-shadow:0 8px 24px rgba(0,0,0,.08);z-index:300;
138
- }
139
- .header-search .search-results.open{display:block}
140
- .header-search .search-result{
141
- display:block;padding:8px 12px;font-size:12px;color:var(--text-dim);
142
- border-bottom:1px solid var(--border);
143
- transition:.08s;
144
- }
145
- .header-search .search-result:last-child{border:none}
146
- .header-search .search-result:hover{background:var(--bg-hover);color:var(--text);text-decoration:none}
147
- .header-search .search-result mark{background:rgba(124,58,237,.15);color:var(--accent)}
148
- .header-search .search-empty{
149
- padding:12px;font-size:12px;color:var(--text-faint);text-align:center;
150
- }
151
-
152
- /* ── header nav ── */
153
- .header-nav{display:flex;gap:2px;align-items:center;flex-shrink:0}
154
- .header-nav a{
155
- padding:5px 10px;border-radius:5px;font-size:12px;font-weight:500;
156
- color:var(--text-dim);white-space:nowrap;
157
- }
158
- .header-nav a:hover{background:var(--bg-hover);color:var(--text);text-decoration:none}
159
- .header-nav a.active{color:var(--accent);background:var(--bg-code)}
160
-
161
- /* ── language toggle ── */
162
- .lang-toggle{
163
- display:flex;align-items:center;padding:4px 8px;border-radius:5px;
164
- background:none;border:1px solid var(--border);cursor:pointer;
165
- font-size:11px;color:var(--text-dim);font-family:var(--font);gap:4px;
166
- transition:.1s;flex-shrink:0;
167
- }
168
- .lang-toggle:hover{background:var(--bg-hover);border-color:var(--border2)}
169
- .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}
170
- .menu-btn span{display:block;width:16px;height:2px;background:var(--text-dim);border-radius:2px;transition:.15s}
171
- .menu-btn.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
172
- .menu-btn.open span:nth-child(2){opacity:0}
173
- .menu-btn.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}
174
- .sidebar-overlay{display:none}
175
-
176
- /* ── page layout (index) ── */
177
- .page{
178
- max-width:var(--max-w);margin:calc(var(--header-h) + 40px) auto 60px;
179
- padding:0 24px;
180
- }
181
-
182
- /* ── doc layout (sub-pages) ── */
183
- .app{display:flex;max-width:var(--max-w);margin:0 auto;padding:0 24px;gap:0}
184
- .sidebar{
185
- position:fixed;top:var(--header-h);left:0;bottom:0;
186
- width:var(--sidebar-w);overflow-y:auto;padding:24px 12px 40px;
187
- border-right:1px solid var(--border);
188
- background:var(--bg);
189
- z-index:50;
190
- }
191
- .sidebar-section{margin-bottom:24px}
192
- .sidebar-label{
193
- font-family:var(--mono);font-size:10px;font-weight:600;text-transform:uppercase;
194
- color:var(--text-faint);letter-spacing:.05em;margin-bottom:6px;padding:0 8px;
195
- }
196
- .sidebar-link{
197
- display:block;padding:3px 8px;border-radius:4px;
198
- font-size:13px;color:var(--text-dim);transition:.1s;
199
- }
200
- .sidebar-link:hover{background:var(--bg-hover);color:var(--text);text-decoration:none}
201
- .sidebar-link.active{color:var(--accent);background:var(--bg-code);font-weight:500}
202
- .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}
203
- .sidebar-link:hover .link-icon{background:var(--accent2)}
204
- .sidebar-link.active .link-icon{background:var(--accent)}
205
-
206
- .content-wrap{flex:1;margin-left:var(--sidebar-w);min-width:0}
207
- .content{
208
- max-width:var(--max-w);padding:calc(var(--header-h) + 24px) 32px 60px;
209
- }
210
-
211
- /* ── TOC sidebar ── */
212
- .toc-sidebar{
213
- display:none;
214
- }
215
- @media(min-width:1200px){
216
- .toc-sidebar{
217
- display:block;position:sticky;top:calc(var(--header-h) + 24px);
218
- width:180px;min-width:180px;max-height:calc(100vh - var(--header-h) - 48px);
219
- overflow-y:auto;padding:calc(var(--header-h) + 24px) 0 40px 20px;
220
- margin-left:24px;border-left:1px solid var(--border);
221
- }
222
- .content-wrap{display:flex;flex-direction:row}
223
- .content{flex:1;min-width:0}
224
- }
225
- .toc-label{
226
- font-family:var(--mono);font-size:10px;font-weight:600;text-transform:uppercase;
227
- color:var(--text-faint);letter-spacing:.05em;margin-bottom:8px;
228
- }
229
- .toc-link{
230
- display:block;padding:2px 0 2px 12px;border-left:2px solid transparent;
231
- font-size:12px;color:var(--text-faint);line-height:1.6;transition:.1s;
232
- }
233
- .toc-link:hover{color:var(--accent);border-color:var(--accent2);text-decoration:none}
234
- .toc-link.active{color:var(--accent);border-color:var(--accent)}
235
- .toc-h3{padding-left:20px;font-size:11px}
236
-
237
- /* ── breadcrumbs ── */
238
- .breadcrumbs{
239
- font-size:13px;color:var(--text-faint);margin-bottom:24px;
240
- }
241
- .breadcrumbs a{color:var(--text-faint)}
242
- .breadcrumbs a:hover{color:var(--accent)}
243
- .breadcrumbs .sep{margin:0 6px}
244
-
245
- /* ── headings ── */
246
- h1{
247
- font-family:var(--mono);font-size:28px;font-weight:700;
248
- margin-bottom:8px;color:var(--text);
249
- }
250
- h2{
251
- font-family:var(--mono);font-size:18px;font-weight:600;
252
- margin:40px 0 16px;color:var(--text);
253
- padding-bottom:6px;border-bottom:1px solid var(--border);
254
- }
255
- h3{font-size:15px;font-weight:600;margin:24px 0 8px;color:var(--text)}
256
- p{color:var(--text-dim);margin-bottom:12px;line-height:1.7}
257
- .sub{color:var(--text-dim);margin-bottom:24px}
258
-
259
- /* ── hero ── */
260
- .hero{padding:48px 0 32px;text-align:center}
261
- .hero h1{font-size:36px;margin-bottom:12px}
262
- .hero .hl{background:linear-gradient(135deg,#7c3aed,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
263
- .hero p{max-width:560px;margin:0 auto 20px;font-size:16px}
264
- .hero-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
265
-
266
- .badge{
267
- display:inline-flex;align-items:center;gap:6px;
268
- padding:3px 12px;border-radius:100px;
269
- font-family:var(--mono);font-size:11px;font-weight:500;
270
- color:var(--accent);background:var(--bg-code);
271
- border:1px solid var(--border2);margin-bottom:20px;
272
- }
273
- .badge .dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}
274
-
275
- .btn{
276
- display:inline-flex;align-items:center;gap:6px;
277
- padding:8px 18px;border-radius:6px;
278
- font-family:var(--mono);font-size:12px;font-weight:600;
279
- border:1px solid var(--border);
280
- background:var(--bg);color:var(--text);
281
- cursor:pointer;transition:.15s;
282
- }
283
- .btn:hover{text-decoration:none;border-color:var(--border2)}
284
- .btn-p{
285
- background:var(--accent);color:#fff;border-color:var(--accent);
286
- box-shadow:0 3px 12px rgba(124,58,237,.2);
287
- }
288
- .btn-p:hover{background:#6d28d9;color:#fff;border-color:#6d28d9;box-shadow:0 5px 18px rgba(124,58,237,.3);transform:translateY(-1px)}
289
- .btn-ghost{color:var(--text-dim);border-color:var(--border)}
290
- .btn-ghost:hover{color:var(--accent);border-color:var(--border2);background:var(--bg-code)}
291
-
292
- /* ── stat cards ── */
293
- .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:32px 0}
294
- .stat{
295
- text-align:center;padding:16px 8px;border-radius:8px;
296
- background:var(--bg-card);border:1px solid var(--border);
297
- }
298
- .stat-num{
299
- font-family:var(--mono);font-size:24px;font-weight:700;
300
- background:linear-gradient(135deg,#7c3aed,#a78bfa);
301
- -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
302
- line-height:1.2;
303
- }
304
- .stat-lbl{font-size:12px;color:var(--text-faint);font-weight:500;margin-top:2px}
305
-
306
- /* ── grid cards ── */
307
- .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:24px 0}
308
- .card{
309
- padding:20px;border-radius:8px;
310
- background:var(--bg-card);border:1px solid var(--border);
311
- transition:.15s;
312
- }
313
- .card:hover{border-color:var(--border2);box-shadow:0 4px 16px var(--shadow)}
314
- .card h3{font-family:var(--mono);font-size:13px;margin-bottom:6px;color:var(--accent)}
315
- .card p{font-size:13px}
316
- .card .tag{
317
- display:inline-block;font-family:var(--mono);font-size:10px;
318
- padding:1px 7px;border-radius:3px;
319
- background:var(--bg-code);color:var(--accent);
320
- border:1px solid var(--border2);margin:6px 2px 0 0;
321
- }
322
-
323
- /* ── terminal mock ── */
324
- .term{
325
- background:var(--bg-code);border:1px solid var(--border2);
326
- border-radius:8px;overflow:hidden;margin:32px auto;
327
- max-width:660px;box-shadow:0 12px 40px var(--shadow);
328
- }
329
- .term-bar{
330
- display:flex;align-items:center;gap:6px;
331
- padding:10px 14px;background:rgba(124,58,237,.03);
332
- border-bottom:1px solid var(--border2);
333
- }
334
- .term-dot{width:8px;height:8px;border-radius:50%;background:#ddd}
335
- .term-dot:nth-child(1){background:#ff5f56}
336
- .term-dot:nth-child(2){background:#ffbd2e}
337
- .term-dot:nth-child(3){background:#27c93f}
338
- .term-title{font-family:var(--mono);font-size:11px;color:var(--text-faint);margin-left:6px}
339
- .term-body{
340
- padding:14px;font-family:var(--mono);font-size:12px;line-height:1.7;
341
- color:var(--text);overflow-x:auto;white-space:pre;
342
- }
343
- .term-body .p{color:var(--accent);font-weight:600}
344
- .term-body .d{color:var(--text-faint)}
345
- .term-body .h{color:var(--accent)}
346
-
347
- /* ── table ── */
348
- .table-wrap{overflow-x:auto;margin:16px 0;border-radius:6px;border:1px solid var(--border)}
349
- table{width:100%;border-collapse:collapse;font-size:13px}
350
- th{
351
- font-family:var(--mono);font-size:10px;font-weight:600;text-transform:uppercase;
352
- text-align:left;padding:8px 12px;letter-spacing:.05em;
353
- color:var(--accent);background:var(--bg-code);
354
- border-bottom:1px solid var(--border);
355
- }
356
- td{padding:7px 12px;border-bottom:1px solid var(--border);color:var(--text-dim);vertical-align:top}
357
- tr:last-child td{border:none}
358
- tr:hover td{background:rgba(124,58,237,.02)}
359
-
360
- /* ── code blocks ── */
361
- .code-block-wrap{margin:16px 0;border-radius:6px;border:1px solid var(--border);overflow:hidden}
362
- .code-block-header{
363
- display:flex;justify-content:space-between;align-items:center;
364
- padding:6px 10px;background:var(--bg-card);
365
- border-bottom:1px solid var(--border);font-size:11px;color:var(--text-faint);
366
- font-family:var(--mono);
367
- }
368
- .code-block-wrap pre{margin:0;border:none;border-radius:0}
369
- .copy-btn{
370
- background:none;border:1px solid var(--border);border-radius:4px;
371
- color:var(--text-faint);font-size:10px;padding:2px 8px;cursor:pointer;font-family:var(--mono);transition:.1s;
372
- }
373
- .copy-btn:hover{background:var(--bg-hover);color:var(--accent);border-color:var(--accent2)}
374
- .copy-btn.copied{background:var(--bg-code);color:var(--accent);border-color:var(--accent)}
375
-
376
- /* ── language toggle (kept for backward compat) ── */
377
- .lang-select{display:none}
378
-
379
- /* ── misc ── */
380
- hr{border:none;border-top:1px solid var(--border);margin:40px 0}
381
- .footer{
382
- margin-top:60px;padding-top:20px;border-top:1px solid var(--border);
383
- display:flex;justify-content:space-between;align-items:center;gap:16px;
384
- font-size:12px;color:var(--text-faint);flex-wrap:wrap;
385
- }
386
- .footer-links{display:flex;gap:16px}
387
- .footer-links a{color:var(--text-faint);font-size:12px}
388
- .footer-links a:hover{color:var(--accent)}
389
-
390
- .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}
391
- .menu-btn span{display:block;width:16px;height:2px;background:var(--text-dim);border-radius:2px}
392
- .sidebar-overlay{display:none}
393
-
394
- /* ── responsive ── */
395
- @media(max-width:900px){
396
- .sidebar{display:none}
397
- .content-wrap{margin-left:0}
398
- .content{padding:calc(var(--header-h) + 16px) 20px 40px}
399
- .header-nav,.header-search,.header-breadcrumbs,.lang-toggle{display:none}
400
- .menu-btn{display:flex}
401
- .stats{grid-template-columns:repeat(2,1fr)}
402
- .grid{grid-template-columns:1fr}
403
- .hero h1{font-size:26px}
404
-
405
- .sidebar.open{
406
- display:block;position:fixed;top:var(--header-h);left:0;right:0;bottom:0;
407
- width:auto;z-index:200;background:var(--bg);padding:24px;
408
- border-right:none;animation:slideIn .15s ease-out;
409
- }
410
- .sidebar.open .header-search{
411
- display:block;margin:0 0 16px;position:static;
412
- }
413
- .sidebar.open .header-search input{width:100%}
414
- .sidebar.open .header-nav{display:flex;flex-direction:column;gap:2px}
415
- .sidebar-overlay.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:199}
416
- }
417
-
418
- @media(max-width:1200px){
419
- .toc-sidebar{display:none !important}
420
- }
421
-
422
- @keyframes slideIn{
423
- from{transform:translateX(-100%)}
424
- to{transform:translateX(0)}
425
- }
1
+ /* ============================================================
2
+ Clew Docs — Modern Purple Theme v2
3
+ ============================================================ */
4
+ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
5
+
6
+ :root {
7
+ --bg: #fafbfc;
8
+ --bg-card: #ffffff;
9
+ --bg-code: #f7f6fa;
10
+ --bg-hover: #f0edfa;
11
+ --text: #0f0f1a;
12
+ --text-dim: #5a5678;
13
+ --text-faint:#9b97b3;
14
+ --accent: #7c3aed;
15
+ --accent2: #a78bfa;
16
+ --accent3: #c4b5fd;
17
+ --border: #e8e5f0;
18
+ --border2: #ddd8ec;
19
+ --shadow: rgba(124,58,237,.08);
20
+ --shadow-lg: rgba(124,58,237,.15);
21
+ --success: #10b981;
22
+ --warning: #f59e0b;
23
+ --error: #ef4444;
24
+
25
+ --font: 'DM Sans', system-ui, -apple-system, sans-serif;
26
+ --mono: 'JetBrains Mono', 'SF Mono', monospace;
27
+
28
+ --header-h: 56px;
29
+ --max-w: 900px;
30
+ --sidebar-w: 240px;
31
+ --radius: 10px;
32
+ --radius-sm: 6px;
33
+ }
34
+
35
+ @media(prefers-color-scheme:dark){
36
+ :root {
37
+ --bg: #0c0c14;
38
+ --bg-card: #12121e;
39
+ --bg-code: #181828;
40
+ --bg-hover: #222238;
41
+ --text: #e8e6f0;
42
+ --text-dim: #9a96b0;
43
+ --text-faint:#6b6880;
44
+ --accent: #a78bfa;
45
+ --accent2: #7c3aed;
46
+ --accent3: #5b4db0;
47
+ --border: #2a2a3e;
48
+ --border2: #3a3a54;
49
+ --shadow: rgba(0,0,0,.3);
50
+ --shadow-lg: rgba(0,0,0,.5);
51
+ }
52
+ .header{background:rgba(12,12,20,.92)}
53
+ .term{box-shadow:0 12px 40px rgba(0,0,0,.25),0 0 0 1px rgba(124,58,237,.1)}
54
+ img{opacity:.9}
55
+ }
56
+
57
+ /* ── Scrollbar ── */
58
+ ::-webkit-scrollbar{width:8px;height:8px}
59
+ ::-webkit-scrollbar-track{background:transparent}
60
+ ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
61
+ ::-webkit-scrollbar-thumb:hover{background:var(--accent3)}
62
+
63
+ html{scroll-behavior:smooth}
64
+ body{
65
+ font-family:var(--font);
66
+ font-size:15px;
67
+ line-height:1.7;
68
+ color:var(--text);
69
+ background:var(--bg);
70
+ -webkit-font-smoothing:antialiased;
71
+ -moz-osx-font-smoothing:grayscale;
72
+ }
73
+ ::selection{background:var(--accent);color:#fff}
74
+
75
+ a{color:var(--accent);text-decoration:none;transition:all .15s ease}
76
+ a:hover{color:#6d28d9;text-decoration:none}
77
+ @media(prefers-color-scheme:dark){a:hover{color:#c4b5fd}}
78
+
79
+ /* ── code ── */
80
+ code{
81
+ font-family:var(--mono);
82
+ font-size:.85em;
83
+ background:var(--bg-code);
84
+ color:var(--accent);
85
+ padding:.2em .45em;
86
+ border-radius:5px;
87
+ border:1px solid var(--border);
88
+ font-weight:500;
89
+ }
90
+ pre code{background:none;padding:0;color:inherit;border:none;font-weight:400}
91
+
92
+ /* ── header ── */
93
+ .header{
94
+ position:fixed;top:0;left:0;right:0;height:var(--header-h);
95
+ background:rgba(250,251,252,.92);backdrop-filter:blur(20px) saturate(180%);
96
+ -webkit-backdrop-filter:blur(20px) saturate(180%);
97
+ border-bottom:1px solid var(--border);z-index:100;
98
+ box-shadow:0 1px 3px rgba(0,0,0,.03);
99
+ transition:background .2s;
100
+ }
101
+ @media(prefers-color-scheme:dark){
102
+ .header{
103
+ background:rgba(12,12,20,.92);
104
+ box-shadow:0 1px 3px rgba(0,0,0,.2);
105
+ }
106
+ }
107
+ .header-inner{
108
+ max-width:calc(var(--max-w) + var(--sidebar-w));margin:0 auto;padding:0 28px;
109
+ height:100%;display:flex;align-items:center;gap:12px;
110
+ }
111
+ .logo{
112
+ font-family:var(--mono);font-weight:700;font-size:14px;
113
+ color:var(--text);display:flex;align-items:center;gap:8px;
114
+ white-space:nowrap;flex-shrink:0;
115
+ }
116
+ .logo:hover{opacity:.85;text-decoration:none}
117
+ .logo-mark{
118
+ width:28px;height:28px;border-radius:8px;
119
+ background:linear-gradient(135deg,#7c3aed,#a78bfa);
120
+ color:#fff;display:flex;align-items:center;justify-content:center;
121
+ font-size:13px;font-weight:700;box-shadow:0 2px 10px rgba(124,58,237,.3);
122
+ transition:transform .2s,box-shadow .2s;
123
+ }
124
+ .logo:hover .logo-mark{transform:translateY(-2px);box-shadow:0 4px 16px rgba(124,58,237,.4)}
125
+
126
+ /* ── breadcrumbs ── */
127
+ .header-breadcrumbs{
128
+ display:flex;align-items:center;gap:4px;font-size:12px;
129
+ color:var(--text-faint);margin-left:4px;overflow:hidden;
130
+ white-space:nowrap;text-overflow:ellipsis;flex-shrink:1;min-width:0;
131
+ }
132
+ .header-breadcrumbs a{color:var(--text-faint)}
133
+ .header-breadcrumbs a:hover{color:var(--accent);text-decoration:none}
134
+ .header-breadcrumbs .sep{color:var(--border2);margin:0 2px}
135
+ .header-breadcrumbs .current{color:var(--text-dim);font-weight:500}
136
+
137
+ /* ── search ── */
138
+ .header-search{
139
+ position:relative;margin-left:auto;flex-shrink:0;
140
+ }
141
+ .header-search input{
142
+ width:200px;height:32px;padding:0 32px 0 12px;
143
+ border:1px solid var(--border);border-radius:8px;
144
+ background:var(--bg);color:var(--text);
145
+ font-family:var(--font);font-size:13px;
146
+ outline:none;transition:all .2s;
147
+ }
148
+ .header-search input:focus{
149
+ border-color:var(--accent2);box-shadow:0 0 0 3px rgba(124,58,237,.12);
150
+ width:240px;
151
+ }
152
+ .header-search input::placeholder{color:var(--text-faint)}
153
+ .header-search .search-icon{
154
+ position:absolute;right:10px;top:50%;transform:translateY(-50%);
155
+ font-size:12px;color:var(--text-faint);pointer-events:none;
156
+ }
157
+ .header-search .search-results{
158
+ display:none;position:absolute;top:100%;right:0;width:340px;max-height:300px;
159
+ overflow-y:auto;margin-top:8px;background:var(--bg-card);
160
+ border:1px solid var(--border);border-radius:10px;
161
+ box-shadow:0 12px 32px rgba(0,0,0,.1);z-index:300;
162
+ }
163
+ .header-search .search-results.open{display:block}
164
+ .header-search .search-result{
165
+ display:block;padding:10px 14px;font-size:13px;color:var(--text-dim);
166
+ border-bottom:1px solid var(--border);
167
+ transition:.08s;
168
+ }
169
+ .header-search .search-result:last-child{border:none}
170
+ .header-search .search-result:hover{background:var(--bg-hover);color:var(--text);text-decoration:none}
171
+ .header-search .search-result mark{background:rgba(124,58,237,.15);color:var(--accent);border-radius:2px;padding:0 2px}
172
+ .header-search .search-empty{
173
+ padding:14px;font-size:13px;color:var(--text-faint);text-align:center;
174
+ }
175
+
176
+ /* ── header nav ── */
177
+ .header-nav{display:flex;gap:2px;align-items:center;flex-shrink:0}
178
+ .header-nav a{
179
+ padding:6px 12px;border-radius:6px;font-size:12px;font-weight:500;
180
+ color:var(--text-dim);white-space:nowrap;
181
+ transition:all .15s;
182
+ }
183
+ .header-nav a:hover{background:var(--bg-hover);color:var(--text);text-decoration:none}
184
+ .header-nav a.active{color:var(--accent);background:var(--bg-code);font-weight:600}
185
+
186
+ /* ── language toggle ── */
187
+ .lang-toggle{
188
+ display:flex;align-items:center;padding:4px 10px;border-radius:6px;
189
+ background:none;border:1px solid var(--border);cursor:pointer;
190
+ font-size:12px;color:var(--text-dim);font-family:var(--font);gap:4px;
191
+ transition:all .15s;flex-shrink:0;
192
+ }
193
+ .lang-toggle:hover{background:var(--bg-hover);border-color:var(--border2);color:var(--accent)}
194
+
195
+ .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;transition:all .15s}
196
+ .menu-btn:hover{background:var(--bg-hover);border-color:var(--border2)}
197
+ .menu-btn span{display:block;width:16px;height:2px;background:var(--text-dim);border-radius:2px;transition:.15s}
198
+ .menu-btn.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
199
+ .menu-btn.open span:nth-child(2){opacity:0}
200
+ .menu-btn.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}
201
+ .sidebar-overlay{display:none}
202
+
203
+ /* ── page layout (index) ── */
204
+ .page{
205
+ max-width:var(--max-w);margin:calc(var(--header-h) + 40px) auto 60px;
206
+ padding:0 28px;
207
+ }
208
+
209
+ /* ── doc layout (sub-pages) ── */
210
+ .app{display:flex;max-width:calc(var(--max-w) + var(--sidebar-w));margin:0 auto;padding:0 28px;gap:0}
211
+ .sidebar{
212
+ position:fixed;top:var(--header-h);left:0;bottom:0;
213
+ width:var(--sidebar-w);overflow-y:auto;padding:28px 16px 40px;
214
+ border-right:1px solid var(--border);
215
+ background:var(--bg);
216
+ z-index:50;
217
+ }
218
+ .sidebar-section{margin-bottom:28px}
219
+ .sidebar-label{
220
+ font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;
221
+ color:var(--text-faint);letter-spacing:.06em;margin-bottom:8px;padding:0 10px;
222
+ }
223
+ .sidebar-link{
224
+ display:block;padding:4px 10px;border-radius:6px;
225
+ font-size:13px;color:var(--text-dim);transition:all .12s;
226
+ margin-bottom:2px;
227
+ }
228
+ .sidebar-link:hover{background:var(--bg-hover);color:var(--text);text-decoration:none;transform:translateX(2px)}
229
+ .sidebar-link.active{color:var(--accent);background:var(--bg-code);font-weight:600}
230
+ .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}
231
+ .sidebar-link:hover .link-icon{background:var(--accent2)}
232
+ .sidebar-link.active .link-icon{background:var(--accent)}
233
+
234
+ .content-wrap{flex:1;margin-left:var(--sidebar-w);min-width:0}
235
+ .content{
236
+ max-width:var(--max-w);padding:calc(var(--header-h) + 28px) 36px 60px;
237
+ }
238
+
239
+ /* ── TOC sidebar ── */
240
+ .toc-sidebar{display:none}
241
+ @media(min-width:1200px){
242
+ .toc-sidebar{
243
+ display:block;position:sticky;top:calc(var(--header-h) + 28px);
244
+ width:200px;min-width:200px;max-height:calc(100vh - var(--header-h) - 56px);
245
+ overflow-y:auto;padding:calc(var(--header-h) + 28px) 0 40px 20px;
246
+ margin-left:24px;border-left:1px solid var(--border);
247
+ }
248
+ .content-wrap{display:flex;flex-direction:row}
249
+ .content{flex:1;min-width:0}
250
+ }
251
+ .toc-label{
252
+ font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;
253
+ color:var(--text-faint);letter-spacing:.06em;margin-bottom:8px;
254
+ }
255
+ .toc-link{
256
+ display:block;padding:3px 0 3px 14px;border-left:2px solid transparent;
257
+ font-size:12px;color:var(--text-faint);line-height:1.6;transition:all .12s;
258
+ }
259
+ .toc-link:hover{color:var(--accent);border-color:var(--accent2);text-decoration:none;transform:translateX(2px)}
260
+ .toc-link.active{color:var(--accent);border-color:var(--accent);font-weight:500}
261
+ .toc-h3{padding-left:24px;font-size:11px}
262
+
263
+ /* ── breadcrumbs ── */
264
+ .breadcrumbs{
265
+ font-size:13px;color:var(--text-faint);margin-bottom:28px;
266
+ padding:8px 0;
267
+ }
268
+ .breadcrumbs a{color:var(--text-faint);transition:all .12s}
269
+ .breadcrumbs a:hover{color:var(--accent)}
270
+ .breadcrumbs .sep{margin:0 6px;opacity:.6}
271
+
272
+ /* ── headings ── */
273
+ h1{
274
+ font-family:var(--mono);font-size:30px;font-weight:700;
275
+ margin-bottom:10px;color:var(--text);
276
+ letter-spacing:-0.02em;
277
+ }
278
+ h2{
279
+ font-family:var(--mono);font-size:20px;font-weight:600;
280
+ margin:48px 0 18px;color:var(--text);
281
+ padding-bottom:8px;border-bottom:1px solid var(--border);
282
+ letter-spacing:-0.01em;
283
+ }
284
+ h3{font-size:16px;font-weight:600;margin:28px 0 10px;color:var(--text)}
285
+ p{color:var(--text-dim);margin-bottom:14px;line-height:1.8}
286
+ .sub{color:var(--text-dim);margin-bottom:28px;font-size:16px}
287
+
288
+ /* ── hero ── */
289
+ .hero{
290
+ padding:56px 0 40px;
291
+ text-align:center;
292
+ position:relative;
293
+ overflow:hidden;
294
+ }
295
+ .hero::before{
296
+ content:'';
297
+ position:absolute;
298
+ top:-50%;left:-50%;right:-50%;bottom:-50%;
299
+ background:radial-gradient(ellipse at 50% 0%,rgba(124,58,237,.08) 0%,transparent 60%),
300
+ radial-gradient(ellipse at 80% 20%,rgba(167,139,250,.06) 0%,transparent 50%);
301
+ pointer-events:none;
302
+ z-index:0;
303
+ }
304
+ .hero > *{position:relative;z-index:1}
305
+ .hero h1{font-size:40px;margin-bottom:14px;letter-spacing:-0.03em}
306
+ .hero .hl{
307
+ background:linear-gradient(135deg,#7c3aed,#a78bfa);
308
+ -webkit-background-clip:text;
309
+ -webkit-text-fill-color:transparent;
310
+ background-clip:text;
311
+ }
312
+ .hero p{max-width:580px;margin:0 auto 24px;font-size:17px;line-height:1.7}
313
+ .hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
314
+
315
+ .badge{
316
+ display:inline-flex;align-items:center;gap:6px;
317
+ padding:4px 14px;border-radius:100px;
318
+ font-family:var(--mono);font-size:12px;font-weight:500;
319
+ color:var(--accent);background:var(--bg-code);
320
+ border:1px solid var(--border2);margin-bottom:24px;
321
+ box-shadow:0 2px 8px rgba(124,58,237,.06);
322
+ }
323
+ .badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}
324
+
325
+ @keyframes pulse{
326
+ 0%,100%{opacity:1}
327
+ 50%{opacity:.5}
328
+ }
329
+
330
+ .btn{
331
+ display:inline-flex;align-items:center;gap:6px;
332
+ padding:10px 20px;border-radius:var(--radius-sm);
333
+ font-family:var(--mono);font-size:13px;font-weight:600;
334
+ border:1px solid var(--border);
335
+ background:var(--bg-card);color:var(--text);
336
+ cursor:pointer;transition:all .2s;
337
+ position:relative;
338
+ overflow:hidden;
339
+ }
340
+ .btn:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow)}
341
+ .btn-p{
342
+ background:var(--accent);color:#fff;border-color:var(--accent);
343
+ box-shadow:0 3px 14px rgba(124,58,237,.25);
344
+ }
345
+ .btn-p:hover{background:#6d28d9;color:#fff;border-color:#6d28d9;box-shadow:0 6px 20px rgba(124,58,237,.35);transform:translateY(-2px)}
346
+ .btn-ghost{color:var(--text-dim);border-color:var(--border)}
347
+ .btn-ghost:hover{color:var(--accent);border-color:var(--border2);background:var(--bg-hover);transform:translateY(-2px)}
348
+
349
+ /* ── stat cards ── */
350
+ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:36px 0}
351
+ .stat{
352
+ text-align:center;padding:20px 10px;border-radius:var(--radius);
353
+ background:var(--bg-card);border:1px solid var(--border);
354
+ transition:all .2s;
355
+ position:relative;
356
+ overflow:hidden;
357
+ }
358
+ .stat::before{
359
+ content:'';
360
+ position:absolute;top:0;left:0;right:0;height:2px;
361
+ background:linear-gradient(90deg,var(--accent),var(--accent2));
362
+ opacity:0;transition:opacity .2s;
363
+ }
364
+ .stat:hover{border-color:var(--border2);box-shadow:0 6px 20px var(--shadow);transform:translateY(-3px)}
365
+ .stat:hover::before{opacity:1}
366
+ .stat-num{
367
+ font-family:var(--mono);font-size:28px;font-weight:700;
368
+ background:linear-gradient(135deg,#7c3aed,#a78bfa);
369
+ -webkit-background-clip:text;
370
+ -webkit-text-fill-color:transparent;
371
+ background-clip:text;
372
+ line-height:1.2;
373
+ }
374
+ .stat-lbl{font-size:13px;color:var(--text-faint);font-weight:500;margin-top:4px}
375
+
376
+ /* ── grid cards ── */
377
+ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:28px 0}
378
+ .card{
379
+ padding:24px;border-radius:var(--radius);
380
+ background:var(--bg-card);border:1px solid var(--border);
381
+ transition:all .2s;
382
+ position:relative;
383
+ overflow:hidden;
384
+ }
385
+ .card::before{
386
+ content:'';
387
+ position:absolute;top:0;left:0;right:0;height:2px;
388
+ background:linear-gradient(90deg,var(--accent),var(--accent2));
389
+ opacity:0;transition:opacity .2s;
390
+ }
391
+ .card:hover{border-color:var(--border2);box-shadow:0 6px 24px var(--shadow);transform:translateY(-3px)}
392
+ .card:hover::before{opacity:1}
393
+ .card h3{font-family:var(--mono);font-size:14px;margin-bottom:8px;color:var(--accent);display:flex;align-items:center;gap:8px}
394
+ .card p{font-size:13px;line-height:1.6}
395
+ .card .tag{
396
+ display:inline-block;font-family:var(--mono);font-size:11px;
397
+ padding:2px 8px;border-radius:4px;
398
+ background:var(--bg-code);color:var(--accent);
399
+ border:1px solid var(--border2);margin:8px 4px 0 0;
400
+ font-weight:500;
401
+ }
402
+
403
+ /* ── card icons ── */
404
+ .card-icon{
405
+ width:32px;height:32px;border-radius:8px;
406
+ background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(167,139,250,.1));
407
+ display:flex;align-items:center;justify-content:center;
408
+ font-size:16px;flex-shrink:0;
409
+ }
410
+
411
+ /* ── terminal mock ── */
412
+ .term{
413
+ background:var(--bg-code);border:1px solid var(--border2);
414
+ border-radius:var(--radius);overflow:hidden;margin:36px auto;
415
+ max-width:680px;box-shadow:0 12px 40px var(--shadow),0 0 0 1px rgba(124,58,237,.05);
416
+ position:relative;
417
+ }
418
+ .term::after{
419
+ content:'';
420
+ position:absolute;bottom:0;left:0;right:0;height:40px;
421
+ background:linear-gradient(to bottom,transparent,var(--bg-code));
422
+ pointer-events:none;
423
+ }
424
+ .term-bar{
425
+ display:flex;align-items:center;gap:8px;
426
+ padding:12px 16px;background:rgba(124,58,237,.04);
427
+ border-bottom:1px solid var(--border2);
428
+ }
429
+ .term-dot{width:10px;height:10px;border-radius:50%;box-shadow:0 0 6px rgba(0,0,0,.1)}
430
+ .term-dot:nth-child(1){background:#ff5f56}
431
+ .term-dot:nth-child(2){background:#ffbd2e}
432
+ .term-dot:nth-child(3){background:#27c93f}
433
+ .term-title{font-family:var(--mono);font-size:12px;color:var(--text-faint);margin-left:6px;font-weight:500}
434
+ .term-body{
435
+ padding:16px;font-family:var(--mono);font-size:13px;line-height:1.8;
436
+ color:var(--text);overflow-x:auto;white-space:pre;
437
+ min-height:200px;
438
+ }
439
+ .term-body .p{color:var(--accent);font-weight:600}
440
+ .term-body .d{color:var(--text-faint)}
441
+ .term-body .h{color:var(--accent)}
442
+ .term-cursor{display:inline-block;width:8px;height:16px;background:var(--accent);animation:cursor-blink 1s infinite;vertical-align:middle;margin-left:2px}
443
+ @keyframes cursor-blink{
444
+ 0%,100%{opacity:1}
445
+ 50%{opacity:0}
446
+ }
447
+
448
+ /* ── table ── */
449
+ .table-wrap{overflow-x:auto;margin:20px 0;border-radius:var(--radius-sm);border:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,.03)}
450
+ table{width:100%;border-collapse:collapse;font-size:13px}
451
+ th{
452
+ font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;
453
+ text-align:left;padding:10px 14px;letter-spacing:.06em;
454
+ color:var(--accent);background:var(--bg-code);
455
+ border-bottom:1px solid var(--border);
456
+ white-space:nowrap;
457
+ }
458
+ td{padding:10px 14px;border-bottom:1px solid var(--border);color:var(--text-dim);vertical-align:top;line-height:1.6}
459
+ tr:last-child td{border:none}
460
+ tr:hover td{background:rgba(124,58,237,.03)}
461
+
462
+ /* ── code blocks ── */
463
+ .code-block-wrap{margin:20px 0;border-radius:var(--radius-sm);border:1px solid var(--border);overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.03)}
464
+ .code-block-header{
465
+ display:flex;justify-content:space-between;align-items:center;
466
+ padding:8px 12px;background:var(--bg-card);
467
+ border-bottom:1px solid var(--border);font-size:12px;color:var(--text-faint);
468
+ font-family:var(--mono);font-weight:500;
469
+ }
470
+ .code-block-wrap pre{margin:0;border:none;border-radius:0;padding:14px 16px;font-size:13px;line-height:1.7}
471
+ .copy-btn{
472
+ background:none;border:1px solid var(--border);border-radius:4px;
473
+ color:var(--text-faint);font-size:11px;padding:3px 10px;cursor:pointer;font-family:var(--mono);transition:all .15s;
474
+ }
475
+ .copy-btn:hover{background:var(--bg-hover);color:var(--accent);border-color:var(--accent2)}
476
+ .copy-btn.copied{background:var(--bg-code);color:var(--accent);border-color:var(--accent)}
477
+
478
+ /* ── back to top ── */
479
+ .back-to-top{
480
+ position:fixed;bottom:24px;right:24px;
481
+ width:40px;height:40px;border-radius:50%;
482
+ background:var(--accent);color:#fff;border:none;
483
+ cursor:pointer;opacity:0;visibility:hidden;
484
+ transition:all .3s;z-index:80;
485
+ display:flex;align-items:center;justify-content:center;
486
+ font-size:18px;box-shadow:0 4px 12px rgba(124,58,237,.3);
487
+ }
488
+ .back-to-top.visible{opacity:1;visibility:visible}
489
+ .back-to-top:hover{background:#6d28d9;transform:translateY(-2px);box-shadow:0 6px 16px rgba(124,58,237,.4)}
490
+
491
+ /* ── language toggle (kept for backward compat) ── */
492
+ .lang-select{display:none}
493
+
494
+ /* ── misc ── */
495
+ hr{border:none;border-top:1px solid var(--border);margin:48px 0}
496
+ .footer{
497
+ margin-top:60px;padding-top:24px;border-top:1px solid var(--border);
498
+ display:flex;justify-content:space-between;align-items:center;gap:16px;
499
+ font-size:13px;color:var(--text-faint);flex-wrap:wrap;
500
+ }
501
+ .footer-links{display:flex;gap:16px}
502
+ .footer-links a{color:var(--text-faint);transition:all .12s}
503
+ .footer-links a:hover{color:var(--accent)}
504
+
505
+ /* ── responsive ── */
506
+ @media(max-width:900px){
507
+ .sidebar{display:none}
508
+ .content-wrap{margin-left:0}
509
+ .content{padding:calc(var(--header-h) + 16px) 20px 40px}
510
+ .header-nav,.header-search,.header-breadcrumbs,.lang-toggle{display:none}
511
+ .menu-btn{display:flex}
512
+ .stats{grid-template-columns:repeat(2,1fr)}
513
+ .grid{grid-template-columns:1fr}
514
+ .hero h1{font-size:28px}
515
+ .hero{padding:36px 0 28px}
516
+ .hero p{font-size:15px}
517
+
518
+ .sidebar.open{
519
+ display:block;position:fixed;top:var(--header-h);left:0;right:0;bottom:0;
520
+ width:auto;z-index:200;background:var(--bg);padding:24px;
521
+ border-right:none;animation:slideIn .2s ease-out;
522
+ }
523
+ .sidebar.open .header-search{
524
+ display:block;margin:0 0 16px;position:static;
525
+ }
526
+ .sidebar.open .header-search input{width:100%}
527
+ .sidebar.open .header-nav{display:flex;flex-direction:column;gap:2px}
528
+ .sidebar-overlay.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:199}
529
+ }
530
+
531
+ @media(max-width:1200px){
532
+ .toc-sidebar{display:none !important}
533
+ }
534
+
535
+ @keyframes slideIn{
536
+ from{transform:translateX(-100%);opacity:0}
537
+ to{transform:translateX(0);opacity:1}
538
+ }
539
+
540
+ /* ── print ── */
541
+ @media print{
542
+ .header,.sidebar,.toc-sidebar,.back-to-top{display:none}
543
+ .content-wrap{margin-left:0}
544
+ .content{padding:0}
545
+ }