orz-markdown 1.0.0

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.
Files changed (94) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +132 -0
  3. package/dist/index.d.ts +18 -0
  4. package/dist/index.d.ts.map +1 -0
  5. package/dist/index.js +159 -0
  6. package/dist/index.js.map +1 -0
  7. package/dist/plugins/attrs.d.ts +3 -0
  8. package/dist/plugins/attrs.d.ts.map +1 -0
  9. package/dist/plugins/attrs.js +60 -0
  10. package/dist/plugins/attrs.js.map +1 -0
  11. package/dist/plugins/emoji.d.ts +2 -0
  12. package/dist/plugins/emoji.d.ts.map +1 -0
  13. package/dist/plugins/emoji.js +51 -0
  14. package/dist/plugins/emoji.js.map +1 -0
  15. package/dist/plugins/markdown-include.d.ts +3 -0
  16. package/dist/plugins/markdown-include.d.ts.map +1 -0
  17. package/dist/plugins/markdown-include.js +44 -0
  18. package/dist/plugins/markdown-include.js.map +1 -0
  19. package/dist/plugins/mermaid.d.ts +2 -0
  20. package/dist/plugins/mermaid.d.ts.map +1 -0
  21. package/dist/plugins/mermaid.js +18 -0
  22. package/dist/plugins/mermaid.js.map +1 -0
  23. package/dist/plugins/nyml.d.ts +2 -0
  24. package/dist/plugins/nyml.d.ts.map +1 -0
  25. package/dist/plugins/nyml.js +21 -0
  26. package/dist/plugins/nyml.js.map +1 -0
  27. package/dist/plugins/nyml_parser.d.ts +32 -0
  28. package/dist/plugins/nyml_parser.d.ts.map +1 -0
  29. package/dist/plugins/nyml_parser.js +236 -0
  30. package/dist/plugins/nyml_parser.js.map +1 -0
  31. package/dist/plugins/qrcode.d.ts +2 -0
  32. package/dist/plugins/qrcode.d.ts.map +1 -0
  33. package/dist/plugins/qrcode.js +21 -0
  34. package/dist/plugins/qrcode.js.map +1 -0
  35. package/dist/plugins/smiles.d.ts +2 -0
  36. package/dist/plugins/smiles.d.ts.map +1 -0
  37. package/dist/plugins/smiles.js +19 -0
  38. package/dist/plugins/smiles.js.map +1 -0
  39. package/dist/plugins/space.d.ts +2 -0
  40. package/dist/plugins/space.d.ts.map +1 -0
  41. package/dist/plugins/space.js +15 -0
  42. package/dist/plugins/space.js.map +1 -0
  43. package/dist/plugins/span.d.ts +3 -0
  44. package/dist/plugins/span.d.ts.map +1 -0
  45. package/dist/plugins/span.js +18 -0
  46. package/dist/plugins/span.js.map +1 -0
  47. package/dist/plugins/test.d.ts +2 -0
  48. package/dist/plugins/test.d.ts.map +1 -0
  49. package/dist/plugins/test.js +14 -0
  50. package/dist/plugins/test.js.map +1 -0
  51. package/dist/plugins/toc.d.ts +3 -0
  52. package/dist/plugins/toc.d.ts.map +1 -0
  53. package/dist/plugins/toc.js +62 -0
  54. package/dist/plugins/toc.js.map +1 -0
  55. package/dist/plugins/yaml.d.ts +2 -0
  56. package/dist/plugins/yaml.d.ts.map +1 -0
  57. package/dist/plugins/yaml.js +12 -0
  58. package/dist/plugins/yaml.js.map +1 -0
  59. package/dist/plugins/youtube.d.ts +2 -0
  60. package/dist/plugins/youtube.d.ts.map +1 -0
  61. package/dist/plugins/youtube.js +19 -0
  62. package/dist/plugins/youtube.js.map +1 -0
  63. package/dist/prepare-sources.d.ts +10 -0
  64. package/dist/prepare-sources.d.ts.map +1 -0
  65. package/dist/prepare-sources.js +31 -0
  66. package/dist/prepare-sources.js.map +1 -0
  67. package/dist/registry.d.ts +10 -0
  68. package/dist/registry.d.ts.map +1 -0
  69. package/dist/registry.js +24 -0
  70. package/dist/registry.js.map +1 -0
  71. package/dist/rules/block-dispatcher.d.ts +9 -0
  72. package/dist/rules/block-dispatcher.d.ts.map +1 -0
  73. package/dist/rules/block-dispatcher.js +108 -0
  74. package/dist/rules/block-dispatcher.js.map +1 -0
  75. package/dist/rules/inline-dispatcher.d.ts +9 -0
  76. package/dist/rules/inline-dispatcher.d.ts.map +1 -0
  77. package/dist/rules/inline-dispatcher.js +62 -0
  78. package/dist/rules/inline-dispatcher.js.map +1 -0
  79. package/dist/runtime.d.ts +3 -0
  80. package/dist/runtime.d.ts.map +1 -0
  81. package/dist/runtime.js +128 -0
  82. package/dist/runtime.js.map +1 -0
  83. package/package.json +70 -0
  84. package/themes/beige-decent-1.css +559 -0
  85. package/themes/beige-decent-2.css +578 -0
  86. package/themes/common.css +178 -0
  87. package/themes/dark-elegant-1.css +729 -0
  88. package/themes/dark-elegant-2.css +1376 -0
  89. package/themes/light-academic-1.css +541 -0
  90. package/themes/light-academic-2.css +462 -0
  91. package/themes/light-neat-1.css +1244 -0
  92. package/themes/light-neat-2.css +1185 -0
  93. package/themes/light-playful-1.css +493 -0
  94. package/themes/light-playful-2.css +494 -0
package/themes/light-neat-1.css ADDED
@@ -0,0 +1,1244 @@
1
+ /* ==========================================================================
2
+ Light Neat Theme 1 — markdown-it-customize
3
+ Google Fonts: Figtree (headings) · Source Sans 3 / Cardo / Caveat / Fira Code (body options)
4
+
5
+ Optional modifiers on <body> or .markdown-body:
6
+ - .font-serif
7
+ - .font-sans
8
+ - .font-handwritten
9
+ - .font-typewrite
10
+ - .size-xs | .size-sm | .size-lg | .size-xl
11
+ ========================================================================== */
12
+
13
+ @import url('https://fonts.googleapis.com/css2?family=Figtree:wght@500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&family=Cardo:ital,wght@0,400;0,700;1,400&family=Caveat:wght@500;600;700&family=Fira+Code:wght@400;500;600&display=swap');
14
+ @import './common.css';
15
+
16
+ :root {
17
+ color-scheme: light;
18
+
19
+ --bg: #edf4fa;
20
+ --bg-soft: #f6fafe;
21
+ --surface: #ffffff;
22
+ --surface-2: #f5f9fd;
23
+ --surface-3: #eef4fa;
24
+ --border: #d7e3ef;
25
+ --border-strong: #bdd1e3;
26
+ --border-soft: #e6eef5;
27
+
28
+ --text: #22313f;
29
+ --text-soft: #587085;
30
+ --text-muted: #7c92a4;
31
+ --heading: #142230;
32
+
33
+ --accent: #2e8bcf;
34
+ --accent-2: #62b0e8;
35
+ --accent-strong: #255d9d;
36
+ --accent-warm: #48b7a8;
37
+ --accent-grid: rgba(46, 139, 207, 0.08);
38
+
39
+ --link: #1768b5;
40
+ --link-hover: #0f4d86;
41
+ --link-visited: #5b6fc8;
42
+
43
+ --code-bg: #f4f9fd;
44
+ --code-bg-2: #eef6fb;
45
+ --code-border: #d4e3f0;
46
+ --code-text: #23405f;
47
+ --inline-code: #0f6894;
48
+
49
+ --success-bg: rgba(72, 184, 143, 0.11);
50
+ --success-border: #8fd9bc;
51
+ --success-text: #167857;
52
+
53
+ --note-bg: rgba(108, 126, 227, 0.1);
54
+ --note-border: #bcc7fb;
55
+ --note-text: #4550a8;
56
+
57
+ --info-bg: rgba(70, 154, 230, 0.1);
58
+ --info-border: #abd4f4;
59
+ --info-text: #1266a7;
60
+
61
+ --warning-bg: rgba(232, 181, 63, 0.12);
62
+ --warning-border: #efd28a;
63
+ --warning-text: #8e6413;
64
+
65
+ --danger-bg: rgba(223, 108, 119, 0.11);
66
+ --danger-border: #efb0b8;
67
+ --danger-text: #a14153;
68
+
69
+ --span-red: #cb5260;
70
+ --span-yellow: #9a7615;
71
+ --span-green: #218763;
72
+ --span-blue: #1d6db0;
73
+
74
+ --font-heading: 'Figtree', system-ui, 'Noto Sans SC', 'Noto Sans TC', sans-serif;
75
+ --font-body: 'Source Sans 3', system-ui, 'Noto Sans SC', 'Noto Sans TC', sans-serif;
76
+ --font-code: 'Fira Code', 'JetBrains Mono', monospace;
77
+ --base-size: 1rem;
78
+ --line-height: 1.72;
79
+ --font-scale: 1;
80
+ --lh-copy: var(--line-height);
81
+ --lh-tight: 1.24;
82
+
83
+ --fs-50: calc(0.78 * var(--base-size) * var(--font-scale));
84
+ --fs-75: calc(0.9 * var(--base-size) * var(--font-scale));
85
+ --fs-100: calc(var(--base-size) * var(--font-scale));
86
+ --fs-200: calc(1.14 * var(--base-size) * var(--font-scale));
87
+ --fs-300: calc(1.28 * var(--base-size) * var(--font-scale));
88
+ --fs-400: calc(1.55 * var(--base-size) * var(--font-scale));
89
+ --fs-500: calc(1.95 * var(--base-size) * var(--font-scale));
90
+ --fs-600: calc(2.5 * var(--base-size) * var(--font-scale));
91
+
92
+ --space-1: 0.35rem;
93
+ --space-2: 0.65rem;
94
+ --space-3: 0.95rem;
95
+ --space-4: 1.35rem;
96
+ --space-5: 1.9rem;
97
+ --space-6: 2.7rem;
98
+
99
+ --radius-sm: 8px;
100
+ --radius: 16px;
101
+ --radius-lg: 28px;
102
+ --shadow: 0 18px 42px rgba(86, 125, 155, 0.12);
103
+ --shadow-soft: 0 8px 24px rgba(96, 129, 155, 0.08);
104
+ --transition: 180ms ease;
105
+
106
+ /* markdown body container toggles */
107
+ --markdown-body-max-width: 940px;
108
+ --markdown-body-padding: clamp(1.25rem, 3.6vw, 3.2rem);
109
+ --markdown-body-border: 1px solid var(--border);
110
+ --markdown-body-radius: var(--radius-lg);
111
+ --markdown-body-shadow: var(--shadow);
112
+ --markdown-body-decorations-display: block;
113
+ }
114
+
115
+ body.font-serif,
116
+ .markdown-body.font-serif {
117
+ --font-body: 'Cardo', Georgia, 'Noto Serif SC', 'Noto Serif TC', serif;
118
+ --lh-copy: 1.82;
119
+ }
120
+
121
+ body.font-sans,
122
+ .markdown-body.font-sans {
123
+ --font-body: 'Source Sans 3', system-ui, 'Noto Sans SC', 'Noto Sans TC', sans-serif;
124
+ }
125
+
126
+ body.font-handwritten,
127
+ .markdown-body.font-handwritten {
128
+ --font-body: 'Hanzi Pen TC', 'Hanzi Pen SC', 'Caveat', 'Segoe Print', cursive;
129
+ --lh-copy: 1.88;
130
+ }
131
+
132
+ body.font-typewrite,
133
+ .markdown-body.font-typewrite {
134
+ --font-body: 'Fira Code', monospace;
135
+ --lh-copy: 1.78;
136
+ }
137
+
138
+ body.size-xs,
139
+ .markdown-body.size-xs {
140
+ --font-scale: 0.9;
141
+ }
142
+
143
+ body.size-sm,
144
+ .markdown-body.size-sm {
145
+ --font-scale: 0.96;
146
+ }
147
+
148
+ body.size-lg,
149
+ .markdown-body.size-lg {
150
+ --font-scale: 1.08;
151
+ }
152
+
153
+ body.size-xl,
154
+ .markdown-body.size-xl {
155
+ --font-scale: 1.16;
156
+ }
157
+
158
+ *, *::before, *::after {
159
+ box-sizing: border-box;
160
+ }
161
+
162
+ html {
163
+ font-size: var(--base-size);
164
+ scroll-behavior: smooth;
165
+ -webkit-text-size-adjust: 100%;
166
+ }
167
+
168
+ body {
169
+ margin: 0;
170
+ min-height: 100vh;
171
+ padding: clamp(0.9rem, 2.5vw, 2rem);
172
+ background:
173
+ radial-gradient(circle at top left, rgba(98, 176, 232, 0.12), transparent 28%),
174
+ radial-gradient(circle at top right, rgba(72, 183, 168, 0.1), transparent 22%),
175
+ linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
176
+ color: var(--text);
177
+ font-family: var(--font-body);
178
+ font-size: var(--fs-100);
179
+ line-height: var(--lh-copy);
180
+ }
181
+
182
+ ::selection {
183
+ background: rgba(98, 176, 232, 0.2);
184
+ color: var(--heading);
185
+ }
186
+
187
+ ::-webkit-scrollbar {
188
+ width: 10px;
189
+ height: 10px;
190
+ }
191
+
192
+ ::-webkit-scrollbar-track {
193
+ background: rgba(255, 255, 255, 0.4);
194
+ }
195
+
196
+ ::-webkit-scrollbar-thumb {
197
+ background: rgba(46, 139, 207, 0.24);
198
+ border-radius: 999px;
199
+ border: 2px solid rgba(255, 255, 255, 0.65);
200
+ }
201
+
202
+ ::-webkit-scrollbar-thumb:hover {
203
+ background: rgba(46, 139, 207, 0.38);
204
+ }
205
+
206
+ .markdown-body {
207
+ position: relative;
208
+ max-width: var(--markdown-body-max-width);
209
+ margin: 0 auto;
210
+ padding: var(--markdown-body-padding);
211
+ background: var(--surface);
212
+ border: var(--markdown-body-border);
213
+ border-radius: var(--markdown-body-radius);
214
+ box-shadow: var(--markdown-body-shadow);
215
+ overflow: hidden;
216
+ isolation: isolate;
217
+ }
218
+
219
+ .markdown-body::before {
220
+ display: var(--markdown-body-decorations-display);
221
+ content: '';
222
+ position: absolute;
223
+ inset: 0;
224
+ background:
225
+ linear-gradient(90deg, transparent 0, transparent 13px, var(--accent-grid) 13px, transparent 14px),
226
+ linear-gradient(var(--accent-grid) 1px, transparent 1px);
227
+ background-size: 14px 14px;
228
+ mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.15), transparent 30%);
229
+ opacity: 0.45;
230
+ pointer-events: none;
231
+ z-index: -1;
232
+ }
233
+
234
+ .markdown-body::after {
235
+ display: var(--markdown-body-decorations-display);
236
+ content: '';
237
+ position: absolute;
238
+ inset: 0 auto auto 0;
239
+ width: 100%;
240
+ height: 4px;
241
+ background: linear-gradient(90deg, var(--accent), var(--accent-warm), transparent 88%);
242
+ pointer-events: none;
243
+ }
244
+
245
+ .markdown-body > :first-child {
246
+ margin-top: 0;
247
+ }
248
+
249
+ h1, h2, h3, h4, h5, h6 {
250
+ clear: both;
251
+ position: relative;
252
+ margin: 2.15em 0 0.7em;
253
+ color: var(--heading);
254
+ font-family: var(--font-heading);
255
+ line-height: var(--lh-tight);
256
+ font-weight: 700;
257
+ letter-spacing: -0.03em;
258
+ scroll-margin-top: 4rem;
259
+ }
260
+
261
+ h1:first-child,
262
+ h2:first-child,
263
+ h3:first-child {
264
+ margin-top: 0;
265
+ }
266
+
267
+ h1 {
268
+ display: block;
269
+ padding: 0 0 1.05em;
270
+ font-size: clamp(2rem, 4.4vw, 3rem);
271
+ color: #173248;
272
+ text-align: center;
273
+ }
274
+
275
+ h1::after {
276
+ content: '✦';
277
+ position: absolute;
278
+ left: 50%;
279
+ bottom: 0;
280
+ transform: translateX(-50%);
281
+ padding: 0 2.25rem;
282
+ color: var(--accent-strong);
283
+ font-size: 0.96rem;
284
+ line-height: 1;
285
+ letter-spacing: 0.1em;
286
+ background:
287
+ linear-gradient(90deg, transparent 0, transparent 1.25rem, rgba(255, 255, 255, 0.97) 1.25rem, rgba(255, 255, 255, 0.97) calc(100% - 1.25rem), transparent calc(100% - 1.25rem)),
288
+ linear-gradient(90deg, rgba(98, 176, 232, 0.68), rgba(72, 183, 168, 0.6));
289
+ background-repeat: no-repeat;
290
+ background-size: 100% 3px, 100% 3px;
291
+ background-position: center 50%, center 50%;
292
+ }
293
+
294
+ h2 {
295
+ font-size: clamp(1.55rem, 3vw, 2.1rem);
296
+ padding: 0.16em 0 0.32em;
297
+ color: var(--accent-strong);
298
+ border-bottom: 2px solid var(--border-strong);
299
+ }
300
+
301
+ h2::after {
302
+ display: none;
303
+ }
304
+
305
+ h3 {
306
+ font-size: var(--fs-400);
307
+ padding-bottom: 0.28em;
308
+ color: #1f536d;
309
+ border-bottom: 1px dashed rgba(98, 176, 232, 0.42);
310
+ }
311
+
312
+ h3::before {
313
+ display: none;
314
+ }
315
+
316
+ h4 {
317
+ font-size: var(--fs-300);
318
+ display: block;
319
+ width: fit-content;
320
+ color: #21485d;
321
+ padding: 0.16em 0.58rem 0.22em;
322
+ background: rgba(98, 176, 232, 0.08);
323
+ border: 1px solid rgba(98, 176, 232, 0.18);
324
+ border-radius: 10px;
325
+ }
326
+
327
+ h5 {
328
+ font-size: var(--fs-200);
329
+ color: #365d78;
330
+ padding: 0.12em 0.5rem;
331
+ background: rgba(98, 176, 232, 0.07);
332
+ border-radius: 6px;
333
+ width: fit-content;
334
+ }
335
+
336
+ h6 {
337
+ font-size: var(--fs-100);
338
+ text-transform: uppercase;
339
+ letter-spacing: 0.12em;
340
+ color: var(--text-soft);
341
+ display: block;
342
+ width: fit-content;
343
+ padding: 0.18em 0.52rem;
344
+ background: #f8fbfe;
345
+ border: 1px solid var(--border-soft);
346
+ border-radius: 999px;
347
+ }
348
+
349
+ .header-anchor {
350
+ float: left;
351
+ margin-left: -1.25em;
352
+ padding-right: 0.3em;
353
+ color: var(--accent);
354
+ text-decoration: none;
355
+ opacity: 0;
356
+ transform: translateX(0.15em);
357
+ transition: opacity var(--transition), transform var(--transition), color var(--transition);
358
+ }
359
+
360
+ h1:hover .header-anchor,
361
+ h2:hover .header-anchor,
362
+ h3:hover .header-anchor,
363
+ h4:hover .header-anchor,
364
+ h5:hover .header-anchor,
365
+ h6:hover .header-anchor {
366
+ opacity: 0.75;
367
+ transform: translateX(0);
368
+ }
369
+
370
+ .header-anchor:hover {
371
+ color: var(--accent-strong);
372
+ }
373
+
374
+ p,
375
+ ul,
376
+ ol,
377
+ blockquote,
378
+ pre,
379
+ table,
380
+ .toc-wrapper,
381
+ details.spoil,
382
+ .tabs,
383
+ .cols,
384
+ .youtube-embed,
385
+ .mermaid,
386
+ .smiles-render {
387
+ margin: 0 0 var(--space-5);
388
+ }
389
+
390
+ p:last-child,
391
+ ul:last-child,
392
+ ol:last-child,
393
+ blockquote:last-child,
394
+ pre:last-child,
395
+ table:last-child {
396
+ margin-bottom: 0;
397
+ }
398
+
399
+ a {
400
+ color: var(--link);
401
+ text-decoration-thickness: 1.4px;
402
+ text-decoration-color: rgba(23, 104, 181, 0.28);
403
+ text-underline-offset: 0.18em;
404
+ transition: color var(--transition), text-decoration-color var(--transition);
405
+ }
406
+
407
+ a:hover {
408
+ color: var(--link-hover);
409
+ text-decoration-color: rgba(15, 77, 134, 0.56);
410
+ }
411
+
412
+ a:visited {
413
+ color: var(--link-visited);
414
+ }
415
+
416
+ strong {
417
+ color: var(--heading);
418
+ font-weight: 700;
419
+ }
420
+
421
+ em {
422
+ color: #355772;
423
+ }
424
+
425
+ s,
426
+ del {
427
+ color: var(--text-muted);
428
+ text-decoration-color: rgba(155, 99, 111, 0.35);
429
+ }
430
+
431
+ mark {
432
+ padding: 0.08em 0.28em;
433
+ color: #744f07;
434
+ background: rgba(232, 181, 63, 0.22);
435
+ border-radius: 999px;
436
+ }
437
+
438
+ ins {
439
+ color: #177d69;
440
+ text-decoration: underline wavy rgba(72, 183, 168, 0.75) 1.5px;
441
+ text-underline-offset: 0.18em;
442
+ }
443
+
444
+ sub,
445
+ sup {
446
+ font-size: 0.72em;
447
+ color: var(--text-soft);
448
+ }
449
+
450
+ code {
451
+ font-family: var(--font-code);
452
+ font-size: 0.9em;
453
+ color: var(--inline-code);
454
+ background: var(--code-bg);
455
+ border: 1px solid var(--code-border);
456
+ border-radius: 10px;
457
+ padding: 0.18em 0.44em;
458
+ }
459
+
460
+ pre {
461
+ position: relative;
462
+ overflow-x: auto;
463
+ padding: 1.2rem 1.3rem;
464
+ background: linear-gradient(180deg, var(--code-bg) 0%, var(--code-bg-2) 100%);
465
+ border: 1px solid var(--code-border);
466
+ border-radius: 18px;
467
+ box-shadow: var(--shadow-soft);
468
+ }
469
+
470
+ pre::before {
471
+ content: '';
472
+ position: absolute;
473
+ left: 1rem;
474
+ top: 0.7rem;
475
+ width: 0.62rem;
476
+ height: 0.62rem;
477
+ border-radius: 999px;
478
+ background: #f0c68d;
479
+ box-shadow: 1rem 0 0 #8cd5c6, 2rem 0 0 #9ec5ea;
480
+ }
481
+
482
+ pre code {
483
+ display: block;
484
+ padding: 0;
485
+ border: 0;
486
+ background: transparent;
487
+ color: var(--code-text);
488
+ font-size: var(--fs-75);
489
+ line-height: 1.72;
490
+ }
491
+
492
+ blockquote {
493
+ padding: 1.1rem 1.25rem;
494
+ color: #3e6077;
495
+ background: linear-gradient(180deg, rgba(98, 176, 232, 0.1), rgba(98, 176, 232, 0.04));
496
+ border: 1px solid #dbeaf6;
497
+ border-radius: 18px;
498
+ }
499
+
500
+ blockquote blockquote {
501
+ margin-top: var(--space-4);
502
+ background: rgba(255, 255, 255, 0.7);
503
+ }
504
+
505
+ blockquote > *:last-child {
506
+ margin-bottom: 0;
507
+ }
508
+
509
+ ul,
510
+ ol {
511
+ padding-left: 1.4rem;
512
+ }
513
+
514
+ li {
515
+ margin-bottom: 0.42rem;
516
+ }
517
+
518
+ li > ul,
519
+ li > ol {
520
+ margin-top: 0.42rem;
521
+ margin-bottom: 0;
522
+ }
523
+
524
+ ul {
525
+ list-style: none;
526
+ }
527
+
528
+ ul > li {
529
+ position: relative;
530
+ }
531
+
532
+ ul > li::before {
533
+ content: '';
534
+ position: absolute;
535
+ left: -1rem;
536
+ top: 0.72em;
537
+ width: 0.44rem;
538
+ height: 0.44rem;
539
+ border-radius: 999px;
540
+ background: var(--accent);
541
+ box-shadow: 0 0 0 3px rgba(98, 176, 232, 0.15);
542
+ }
543
+
544
+ ol {
545
+ list-style: decimal;
546
+ }
547
+
548
+ .task-list-item {
549
+ list-style: none;
550
+ padding-left: 0;
551
+ }
552
+
553
+ .task-list-item::before {
554
+ display: none;
555
+ }
556
+
557
+ .task-list-item-checkbox,
558
+ .task-list-item input[type='checkbox'] {
559
+ appearance: none;
560
+ -webkit-appearance: none;
561
+ position: relative;
562
+ width: 1.05rem;
563
+ height: 1.05rem;
564
+ margin: 0 0.55rem 0 0;
565
+ vertical-align: -0.12em;
566
+ border: 1px solid #b8d0e4;
567
+ border-radius: 6px;
568
+ background: #fff;
569
+ }
570
+
571
+ .task-list-item-checkbox:checked,
572
+ .task-list-item input[type='checkbox']:checked {
573
+ background: var(--accent);
574
+ border-color: var(--accent);
575
+ }
576
+
577
+ .task-list-item-checkbox:checked::after,
578
+ .task-list-item input[type='checkbox']:checked::after {
579
+ content: '';
580
+ position: absolute;
581
+ left: 0.29rem;
582
+ top: 0.08rem;
583
+ width: 0.24rem;
584
+ height: 0.48rem;
585
+ border: solid #fff;
586
+ border-width: 0 2px 2px 0;
587
+ transform: rotate(45deg);
588
+ }
589
+
590
+ .markdown-body > table,
591
+ .markdown-body td table {
592
+ width: max-content;
593
+ max-width: 100%;
594
+ }
595
+
596
+ table {
597
+ border-collapse: separate;
598
+ border-radius: 18px;
599
+ background: var(--surface);
600
+ box-shadow: var(--shadow-soft);
601
+ }
602
+
603
+ thead th {
604
+ padding: 0.82rem 1rem;
605
+ background: #f1f7fc;
606
+ border-bottom: 1px solid var(--border-strong);
607
+ color: var(--heading);
608
+ font-size: var(--fs-75);
609
+ font-weight: 700;
610
+ letter-spacing: 0.06em;
611
+ text-transform: uppercase;
612
+ text-align: left;
613
+ white-space: nowrap;
614
+ }
615
+
616
+ tbody td {
617
+ padding: 0.86rem 1rem;
618
+ border-bottom: 1px solid var(--border-soft);
619
+ vertical-align: top;
620
+ }
621
+
622
+ tbody tr:nth-child(even) td {
623
+ background: rgba(98, 176, 232, 0.035);
624
+ }
625
+
626
+ tbody tr:hover td {
627
+ background: rgba(72, 183, 168, 0.06);
628
+ }
629
+
630
+ tbody tr:last-child td {
631
+ border-bottom: 0;
632
+ }
633
+
634
+ hr {
635
+ height: 1px;
636
+ margin: var(--space-6) 0;
637
+ border: 0;
638
+ background: linear-gradient(90deg, transparent, rgba(46, 139, 207, 0.45), rgba(72, 183, 168, 0.4), transparent);
639
+ }
640
+
641
+ img {
642
+ margin: 0 auto;
643
+ border: 1px solid #dde8f3;
644
+ border-radius: 18px;
645
+ box-shadow: var(--shadow-soft);
646
+ }
647
+
648
+ p > img {
649
+ display: inline;
650
+ margin: 0;
651
+ border-radius: 10px;
652
+ }
653
+
654
+ .footnote-ref {
655
+ font-size: 0.85em;
656
+ }
657
+
658
+ .footnote-ref a,
659
+ .footnote-backref {
660
+ color: var(--accent-strong);
661
+ text-decoration: none;
662
+ }
663
+
664
+ .footnotes-sep {
665
+ margin: var(--space-6) 0 var(--space-4);
666
+ }
667
+
668
+ .footnotes {
669
+ padding-top: var(--space-3);
670
+ border-top: 1px solid var(--border-soft);
671
+ color: var(--text-soft);
672
+ font-size: var(--fs-75);
673
+ }
674
+
675
+ .footnotes ol {
676
+ margin-bottom: 0;
677
+ }
678
+
679
+ .footnotes li {
680
+ margin-bottom: 0.65rem;
681
+ }
682
+
683
+ .katex {
684
+ color: #18314c;
685
+ font-size: 1.06em;
686
+ }
687
+
688
+ .katex-display {
689
+ overflow-x: auto;
690
+ overflow-y: hidden;
691
+ padding: 0.9rem 1rem;
692
+ background: #f7fbfe;
693
+ border: 1px solid #e0ebf4;
694
+ border-radius: 18px;
695
+ }
696
+
697
+ .katex-error {
698
+ display: inline-block;
699
+ padding: 0.2em 0.48em;
700
+ color: var(--danger-text);
701
+ background: rgba(223, 108, 119, 0.12);
702
+ border: 1px solid var(--danger-border);
703
+ border-radius: 10px;
704
+ font-family: var(--font-code);
705
+ font-size: var(--fs-75);
706
+ }
707
+
708
+ div.success,
709
+ div.note,
710
+ div.info,
711
+ div.warning,
712
+ div.danger {
713
+ position: relative;
714
+ overflow: hidden;
715
+ margin-bottom: var(--space-5);
716
+ padding: 1rem 1.1rem;
717
+ border: 1px solid;
718
+ border-radius: 18px;
719
+ box-shadow: var(--shadow-soft);
720
+ }
721
+
722
+ div.success::before,
723
+ div.note::before,
724
+ div.info::before,
725
+ div.warning::before,
726
+ div.danger::before {
727
+ content: '';
728
+ position: absolute;
729
+ top: 0.85rem;
730
+ right: 0.85rem;
731
+ width: 2.9rem;
732
+ height: 2.9rem;
733
+ border-radius: 999px;
734
+ opacity: 0.28;
735
+ pointer-events: none;
736
+ }
737
+
738
+ div.success {
739
+ background: linear-gradient(180deg, rgba(72, 184, 143, 0.12), rgba(72, 184, 143, 0.05));
740
+ border-color: var(--success-border);
741
+ }
742
+
743
+ div.success::before {
744
+ background: radial-gradient(circle, rgba(22, 120, 87, 0.75) 0%, transparent 70%);
745
+ }
746
+
747
+ div.note {
748
+ background: linear-gradient(180deg, rgba(108, 126, 227, 0.12), rgba(108, 126, 227, 0.05));
749
+ border-color: var(--note-border);
750
+ }
751
+
752
+ div.note::before {
753
+ background: radial-gradient(circle, rgba(69, 80, 168, 0.72) 0%, transparent 70%);
754
+ }
755
+
756
+ div.info {
757
+ background: linear-gradient(180deg, rgba(70, 154, 230, 0.12), rgba(70, 154, 230, 0.05));
758
+ border-color: var(--info-border);
759
+ }
760
+
761
+ div.info::before {
762
+ background: radial-gradient(circle, rgba(18, 102, 167, 0.72) 0%, transparent 70%);
763
+ }
764
+
765
+ div.warning {
766
+ background: linear-gradient(180deg, rgba(232, 181, 63, 0.14), rgba(232, 181, 63, 0.06));
767
+ border-color: var(--warning-border);
768
+ }
769
+
770
+ div.warning::before {
771
+ background: radial-gradient(circle, rgba(142, 100, 19, 0.72) 0%, transparent 70%);
772
+ }
773
+
774
+ div.danger {
775
+ background: linear-gradient(180deg, rgba(223, 108, 119, 0.13), rgba(223, 108, 119, 0.06));
776
+ border-color: var(--danger-border);
777
+ }
778
+
779
+ div.danger::before {
780
+ background: radial-gradient(circle, rgba(161, 65, 83, 0.72) 0%, transparent 70%);
781
+ }
782
+
783
+ div.success > p:first-child > strong:first-child,
784
+ div.success > p:first-child > b:first-child {
785
+ color: var(--success-text);
786
+ }
787
+
788
+ div.note > p:first-child > strong:first-child,
789
+ div.note > p:first-child > b:first-child {
790
+ color: var(--note-text);
791
+ }
792
+
793
+ div.info > p:first-child > strong:first-child,
794
+ div.info > p:first-child > b:first-child {
795
+ color: var(--info-text);
796
+ }
797
+
798
+ div.warning > p:first-child > strong:first-child,
799
+ div.warning > p:first-child > b:first-child {
800
+ color: var(--warning-text);
801
+ }
802
+
803
+ div.danger > p:first-child > strong:first-child,
804
+ div.danger > p:first-child > b:first-child {
805
+ color: var(--danger-text);
806
+ }
807
+
808
+ div.success > *:last-child,
809
+ div.note > *:last-child,
810
+ div.info > *:last-child,
811
+ div.warning > *:last-child,
812
+ div.danger > *:last-child {
813
+ margin-bottom: 0;
814
+ }
815
+
816
+ .left {
817
+ float: left;
818
+ max-width: min(44%, 22rem);
819
+ padding: 0.85rem 0.95rem;
820
+ background: var(--surface-2);
821
+ border: 1px solid var(--border);
822
+ border-radius: 16px;
823
+ margin: 0 var(--space-5) var(--space-4) 0;
824
+ }
825
+
826
+ .right {
827
+ text-align: right;
828
+ margin: 0 0 var(--space-4);
829
+ }
830
+
831
+ .center {
832
+ margin: 0 auto var(--space-5);
833
+ text-align: center;
834
+ max-width: min(100%, 42rem);
835
+ }
836
+
837
+ details.spoil {
838
+ overflow: hidden;
839
+ border: 1px solid var(--border);
840
+ border-radius: 18px;
841
+ background: var(--surface-2);
842
+ }
843
+
844
+ details.spoil > summary {
845
+ display: flex;
846
+ align-items: center;
847
+ gap: 0.7rem;
848
+ padding: 0.95rem 1.1rem;
849
+ cursor: pointer;
850
+ list-style: none;
851
+ user-select: none;
852
+ color: var(--heading);
853
+ font-weight: 600;
854
+ background: rgba(98, 176, 232, 0.06);
855
+ }
856
+
857
+ details.spoil > summary::-webkit-details-marker {
858
+ display: none;
859
+ }
860
+
861
+ details.spoil > summary::before {
862
+ content: '+';
863
+ display: inline-grid;
864
+ place-items: center;
865
+ width: 1.45rem;
866
+ height: 1.45rem;
867
+ border-radius: 999px;
868
+ background: #fff;
869
+ border: 1px solid var(--border-strong);
870
+ color: var(--accent-strong);
871
+ font-weight: 700;
872
+ line-height: 1;
873
+ }
874
+
875
+ details.spoil[open] > summary::before {
876
+ content: '–';
877
+ }
878
+
879
+ details.spoil[open] > summary {
880
+ border-bottom: 1px solid var(--border-soft);
881
+ }
882
+
883
+ details.spoil > :not(summary) {
884
+ padding: 1rem 1.1rem 1.1rem;
885
+ }
886
+
887
+ .tabs {
888
+ overflow: hidden;
889
+ border: 1px solid var(--border);
890
+ border-radius: 20px;
891
+ background: var(--surface-2);
892
+ }
893
+
894
+ .tabs-bar {
895
+ display: flex;
896
+ gap: 0.4rem;
897
+ padding: 0.5rem;
898
+ overflow-x: auto;
899
+ background: rgba(98, 176, 232, 0.05);
900
+ border-bottom: 1px solid var(--border-soft);
901
+ scrollbar-width: none;
902
+ }
903
+
904
+ .tabs-bar::-webkit-scrollbar {
905
+ display: none;
906
+ }
907
+
908
+ .tabs-bar-btn {
909
+ border: 1px solid transparent;
910
+ border-radius: 999px;
911
+ padding: 0.56rem 0.92rem;
912
+ background: transparent;
913
+ color: var(--text-soft);
914
+ font: 700 var(--fs-75)/1.2 var(--font-heading);
915
+ cursor: pointer;
916
+ white-space: nowrap;
917
+ transition: background var(--transition), color var(--transition), border-color var(--transition);
918
+ }
919
+
920
+ .tabs-bar-btn:hover {
921
+ color: var(--heading);
922
+ border-color: var(--border);
923
+ background: rgba(255, 255, 255, 0.7);
924
+ }
925
+
926
+ .tabs-bar-btn.active {
927
+ color: #fff;
928
+ background: linear-gradient(180deg, var(--accent-2), var(--accent));
929
+ border-color: transparent;
930
+ }
931
+
932
+ .tab {
933
+ display: none;
934
+ padding: 1.1rem 1.2rem 1.25rem;
935
+ }
936
+
937
+ .tab.active {
938
+ display: block;
939
+ }
940
+
941
+ .tabs:not([data-js]) .tab {
942
+ display: block;
943
+ }
944
+
945
+ .tabs:not([data-js]) .tab + .tab {
946
+ border-top: 1px solid var(--border-soft);
947
+ }
948
+
949
+ .cols {
950
+ display: grid;
951
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
952
+ gap: 1rem;
953
+ align-items: start;
954
+ }
955
+
956
+ .col {
957
+ min-width: 0;
958
+ padding: 1rem 1.05rem;
959
+ background: var(--surface-2);
960
+ border: 1px solid var(--border);
961
+ border-radius: 18px;
962
+ }
963
+
964
+ .col > *:last-child {
965
+ margin-bottom: 0;
966
+ }
967
+
968
+ .toc-wrapper {
969
+ position: relative;
970
+ }
971
+
972
+ nav.toc,
973
+ .toc-list {
974
+ padding: 1rem 1.15rem;
975
+ background: linear-gradient(180deg, rgba(98, 176, 232, 0.08), rgba(255, 255, 255, 0.82));
976
+ border: 1px solid var(--border);
977
+ border-radius: 20px;
978
+ }
979
+
980
+ nav.toc ul,
981
+ .toc-list ul {
982
+ margin: 0;
983
+ padding-left: 1.1rem;
984
+ }
985
+
986
+ nav.toc li,
987
+ .toc-list li {
988
+ margin-bottom: 0.26rem;
989
+ }
990
+
991
+ nav.toc li::before,
992
+ .toc-list li::before {
993
+ display: none;
994
+ }
995
+
996
+ nav.toc a,
997
+ .toc-list a {
998
+ color: var(--text-soft);
999
+ text-decoration: none;
1000
+ }
1001
+
1002
+ nav.toc a:hover,
1003
+ .toc-list a:hover {
1004
+ color: var(--accent-strong);
1005
+ }
1006
+
1007
+ span.red {
1008
+ color: var(--span-red);
1009
+ }
1010
+
1011
+ span.yellow {
1012
+ color: var(--span-yellow);
1013
+ }
1014
+
1015
+ span.green {
1016
+ color: var(--span-green);
1017
+ }
1018
+
1019
+ span.blue {
1020
+ color: var(--span-blue);
1021
+ }
1022
+
1023
+ span.success,
1024
+ span.info,
1025
+ span.warning,
1026
+ span.danger {
1027
+ gap: 0;
1028
+ padding: 0.18em 0.62em;
1029
+ border-radius: 999px;
1030
+ border: 1px solid;
1031
+ font-size: 0.82em;
1032
+ font-weight: 700;
1033
+ vertical-align: middle;
1034
+ }
1035
+
1036
+ span.success::before,
1037
+ span.info::before,
1038
+ span.warning::before,
1039
+ span.danger::before {
1040
+ content: none;
1041
+ }
1042
+
1043
+ span.success {
1044
+ background: rgba(72, 184, 143, 0.14);
1045
+ color: var(--success-text);
1046
+ border-color: var(--success-border);
1047
+ }
1048
+
1049
+ span.info {
1050
+ background: rgba(70, 154, 230, 0.14);
1051
+ color: var(--info-text);
1052
+ border-color: var(--info-border);
1053
+ }
1054
+
1055
+ span.warning {
1056
+ background: rgba(232, 181, 63, 0.16);
1057
+ color: var(--warning-text);
1058
+ border-color: var(--warning-border);
1059
+ }
1060
+
1061
+ span.danger {
1062
+ background: rgba(223, 108, 119, 0.15);
1063
+ color: var(--danger-text);
1064
+ border-color: var(--danger-border);
1065
+ }
1066
+
1067
+ div.test-block {
1068
+ padding: 0.85rem 1rem;
1069
+ margin-bottom: var(--space-5);
1070
+ background: rgba(98, 176, 232, 0.1);
1071
+ border: 1px dashed rgba(46, 139, 207, 0.35);
1072
+ border-radius: 16px;
1073
+ color: var(--accent-strong);
1074
+ font-family: var(--font-code);
1075
+ font-size: var(--fs-75);
1076
+ }
1077
+
1078
+ span.test-inline {
1079
+ display: inline-block;
1080
+ padding: 0.12em 0.4em;
1081
+ border-radius: 8px;
1082
+ border: 1px dashed rgba(46, 139, 207, 0.35);
1083
+ color: var(--accent-strong);
1084
+ background: rgba(98, 176, 232, 0.12);
1085
+ font-family: var(--font-code);
1086
+ font-size: 0.88em;
1087
+ }
1088
+
1089
+ div.youtube-embed {
1090
+ position: relative;
1091
+ overflow: hidden;
1092
+ height: 0;
1093
+ padding-bottom: 56.25%;
1094
+ border: 1px solid var(--border);
1095
+ border-radius: 20px;
1096
+ background: #ddebf5;
1097
+ box-shadow: var(--shadow-soft);
1098
+ }
1099
+
1100
+ div.youtube-embed iframe {
1101
+ position: absolute;
1102
+ inset: 0;
1103
+ width: 100%;
1104
+ height: 100%;
1105
+ border: 0;
1106
+ }
1107
+
1108
+ div.mermaid {
1109
+ padding: 1.25rem;
1110
+ border: 1px solid var(--border);
1111
+ border-radius: 20px;
1112
+ background: var(--surface-2);
1113
+ overflow-x: auto;
1114
+ text-align: center;
1115
+ }
1116
+
1117
+ div.mermaid svg {
1118
+ max-width: 100%;
1119
+ height: auto;
1120
+ }
1121
+
1122
+ div.smiles-render {
1123
+ }
1124
+
1125
+ div.smiles-render canvas,
1126
+ canvas[data-smiles] {
1127
+ border-radius: 0;
1128
+ box-shadow: none;
1129
+ }
1130
+
1131
+ span.qrcode {
1132
+ padding: 6px;
1133
+ vertical-align: middle;
1134
+ background: #fff;
1135
+ border-radius: 12px;
1136
+ box-shadow: var(--shadow-soft);
1137
+ }
1138
+
1139
+ /* --------------------------------------------------------------------------
1140
+ Focus indicators
1141
+ -------------------------------------------------------------------------- */
1142
+ a:focus-visible,
1143
+ .tabs-bar-btn:focus-visible,
1144
+ details.spoil > summary:focus-visible {
1145
+ outline: 2px solid var(--accent);
1146
+ outline-offset: 3px;
1147
+ border-radius: var(--radius-sm);
1148
+ text-decoration: none;
1149
+ }
1150
+ .task-list-item-checkbox:focus-visible,
1151
+ .task-list-item input[type='checkbox']:focus-visible {
1152
+ outline: 2px solid var(--accent);
1153
+ outline-offset: 2px;
1154
+ }
1155
+
1156
+ @media (max-width: 720px) {
1157
+ body {
1158
+ padding: 0.7rem;
1159
+ }
1160
+
1161
+ .markdown-body {
1162
+ padding: 1.05rem;
1163
+ border-radius: 22px;
1164
+ }
1165
+
1166
+ .left {
1167
+ float: none;
1168
+ max-width: 100%;
1169
+ margin: 0 0 var(--space-4);
1170
+ }
1171
+
1172
+ .cols {
1173
+ grid-template-columns: 1fr;
1174
+ }
1175
+
1176
+ .header-anchor {
1177
+ margin-left: -1.05em;
1178
+ }
1179
+ }
1180
+
1181
+ @media print {
1182
+ body {
1183
+ padding: 0;
1184
+ background: #fff;
1185
+ color: #111;
1186
+ }
1187
+
1188
+ .markdown-body {
1189
+ max-width: 100%;
1190
+ padding: 0;
1191
+ border: 0;
1192
+ box-shadow: none;
1193
+ }
1194
+
1195
+ .markdown-body::before,
1196
+ .markdown-body::after,
1197
+ .header-anchor,
1198
+ .tabs-bar,
1199
+ div.youtube-embed {
1200
+ display: none !important;
1201
+ }
1202
+
1203
+ a {
1204
+ color: #0b57d0;
1205
+ text-decoration-color: currentColor;
1206
+ }
1207
+
1208
+ pre,
1209
+ code,
1210
+ blockquote,
1211
+ .success,
1212
+ .note,
1213
+ .info,
1214
+ .warning,
1215
+ .danger,
1216
+ nav.toc,
1217
+ .toc-list,
1218
+ .col,
1219
+ details.spoil,
1220
+ div.mermaid,
1221
+ div.smiles-render {
1222
+ background: #fff !important;
1223
+ color: #111 !important;
1224
+ border-color: #d0d0d0 !important;
1225
+ box-shadow: none !important;
1226
+ }
1227
+
1228
+ span.success,
1229
+ span.info,
1230
+ span.warning,
1231
+ span.danger {
1232
+ border-color: #bdbdbd !important;
1233
+ color: #111 !important;
1234
+ }
1235
+
1236
+ tr,
1237
+ iframe,
1238
+ video,
1239
+ pre,
1240
+ blockquote {
1241
+ break-inside: avoid;
1242
+ page-break-inside: avoid;
1243
+ }
1244
+ }