r-markdown-cli 0.1.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.
@@ -0,0 +1,1124 @@
1
+ :root {
2
+ --rmd-color-page: #f5f7f4;
3
+ --rmd-color-bg: #fbfcf8;
4
+ --rmd-color-surface: #ffffff;
5
+ --rmd-color-surface-strong: #f0f4ef;
6
+ --rmd-color-fg: #20251f;
7
+ --rmd-color-muted: #687064;
8
+ --rmd-color-subtle: #8b9387;
9
+ --rmd-color-line: #d7ddd2;
10
+ --rmd-color-line-strong: #b7c1b0;
11
+ --rmd-color-primary: #176b72;
12
+ --rmd-color-primary-strong: #0e4d55;
13
+ --rmd-color-accent: #c8523e;
14
+ --rmd-color-success: #2f7d4f;
15
+ --rmd-color-warning: #a36a1c;
16
+ --rmd-color-danger: #b63f35;
17
+ --rmd-color-info: #3867a8;
18
+ --rmd-font-body: Charter, "Iowan Old Style", "Palatino Linotype", Palatino, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", serif;
19
+ --rmd-font-ui: "Avenir Next", Avenir, "Gill Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
20
+ --rmd-font-mono: "SF Mono", "Cascadia Code", "Liberation Mono", Menlo, Consolas, monospace;
21
+ --rmd-radius-sm: 4px;
22
+ --rmd-radius-md: 8px;
23
+ --rmd-radius-lg: 8px;
24
+ --rmd-spacing-sm: 8px;
25
+ --rmd-spacing-md: 16px;
26
+ --rmd-spacing-lg: 28px;
27
+ --rmd-shadow-sm: 0 1px 2px rgb(23 36 29 / 0.05), 0 8px 22px rgb(23 36 29 / 0.05);
28
+ --rmd-shadow-md: 0 16px 38px rgb(23 36 29 / 0.09);
29
+ --rmd-focus-ring: 0 0 0 3px rgb(23 107 114 / 0.2);
30
+ }
31
+
32
+ body[data-rmd-theme] {
33
+ margin: 0;
34
+ background:
35
+ linear-gradient(180deg, rgb(245 247 244 / 0.92), rgb(238 243 241 / 0.92)),
36
+ radial-gradient(circle at 18% 12%, rgb(200 82 62 / 0.12), transparent 28rem),
37
+ radial-gradient(circle at 82% 4%, rgb(23 107 114 / 0.14), transparent 34rem);
38
+ color: var(--rmd-color-fg);
39
+ }
40
+
41
+ .rmd-document {
42
+ box-sizing: border-box;
43
+ max-width: 1040px;
44
+ margin: 0 auto;
45
+ padding: clamp(32px, 6vw, 72px) clamp(18px, 5vw, 56px);
46
+ color: var(--rmd-color-fg);
47
+ font-family: var(--rmd-font-body);
48
+ font-size: 17px;
49
+ line-height: 1.72;
50
+ letter-spacing: 0;
51
+ }
52
+
53
+ .rmd-document *,
54
+ .rmd-document *::before,
55
+ .rmd-document *::after {
56
+ box-sizing: border-box;
57
+ }
58
+
59
+ .rmd-document > :first-child {
60
+ margin-top: 0;
61
+ }
62
+
63
+ .rmd-document > :last-child {
64
+ margin-bottom: 0;
65
+ }
66
+
67
+ .rmd-document h1,
68
+ .rmd-document h2,
69
+ .rmd-document h3,
70
+ .rmd-document h4,
71
+ .rmd-document h5,
72
+ .rmd-document h6 {
73
+ margin: 2.2em 0 0.65em;
74
+ color: #18201a;
75
+ font-family: var(--rmd-font-ui);
76
+ font-weight: 720;
77
+ letter-spacing: 0;
78
+ line-height: 1.12;
79
+ }
80
+
81
+ .rmd-document h1 {
82
+ max-width: 840px;
83
+ margin-bottom: 0.85em;
84
+ padding-bottom: 22px;
85
+ border-bottom: 1px solid var(--rmd-color-line);
86
+ font-size: 42px;
87
+ }
88
+
89
+ .rmd-document h2 {
90
+ font-size: 28px;
91
+ }
92
+
93
+ .rmd-document h3 {
94
+ font-size: 20px;
95
+ }
96
+
97
+ .rmd-document p,
98
+ .rmd-document ul,
99
+ .rmd-document ol,
100
+ .rmd-document blockquote {
101
+ margin: 0 0 1.05em;
102
+ }
103
+
104
+ .rmd-document a {
105
+ color: var(--rmd-color-primary-strong);
106
+ text-decoration-color: rgb(23 107 114 / 0.28);
107
+ text-decoration-thickness: 2px;
108
+ text-underline-offset: 3px;
109
+ }
110
+
111
+ .rmd-document a:hover {
112
+ color: var(--rmd-color-accent);
113
+ text-decoration-color: rgb(200 82 62 / 0.42);
114
+ }
115
+
116
+ .rmd-document strong {
117
+ color: #111a14;
118
+ font-weight: 720;
119
+ }
120
+
121
+ .rmd-document code {
122
+ border: 1px solid rgb(23 107 114 / 0.14);
123
+ border-radius: var(--rmd-radius-sm);
124
+ padding: 0.08em 0.32em;
125
+ background: rgb(23 107 114 / 0.07);
126
+ color: #0f4f57;
127
+ font-family: var(--rmd-font-mono);
128
+ font-size: 0.88em;
129
+ }
130
+
131
+ .rmd-document img {
132
+ max-width: 100%;
133
+ border-radius: var(--rmd-radius-md);
134
+ }
135
+
136
+ .rmd-document blockquote {
137
+ margin: 1.45em 0;
138
+ border-left: 4px solid var(--rmd-color-primary);
139
+ padding: 4px 0 4px 18px;
140
+ color: #3f493d;
141
+ font-size: 18px;
142
+ }
143
+
144
+ .rmd-document blockquote > :last-child {
145
+ margin-bottom: 0;
146
+ }
147
+
148
+ .rmd-document hr {
149
+ margin: 38px 0;
150
+ border: 0;
151
+ border-top: 1px solid var(--rmd-color-line);
152
+ }
153
+
154
+ .rmd-block {
155
+ margin: 32px 0;
156
+ }
157
+
158
+ .rmd-grid {
159
+ display: grid;
160
+ grid-template-columns: repeat(var(--rmd-grid-columns, 1), minmax(0, 1fr));
161
+ gap: 14px;
162
+ }
163
+
164
+ .rmd-grid[data-columns="2"] { --rmd-grid-columns: 2; }
165
+ .rmd-grid[data-columns="3"] { --rmd-grid-columns: 3; }
166
+ .rmd-grid[data-columns="4"] { --rmd-grid-columns: 4; }
167
+ .rmd-grid[data-columns="5"] { --rmd-grid-columns: 5; }
168
+ .rmd-grid[data-columns="6"] { --rmd-grid-columns: 6; }
169
+
170
+ .rmd-grid-cell,
171
+ .rmd-callout,
172
+ .rmd-export,
173
+ .rmd-slider,
174
+ .rmd-diff,
175
+ .rmd-flow,
176
+ .rmd-tabs {
177
+ border: 1px solid var(--rmd-color-line);
178
+ border-radius: var(--rmd-radius-md);
179
+ background: rgb(255 255 255 / 0.86);
180
+ box-shadow: var(--rmd-shadow-sm);
181
+ }
182
+
183
+ .rmd-grid-cell {
184
+ min-width: 0;
185
+ padding: 18px;
186
+ border-top: 3px solid rgb(23 107 114 / 0.46);
187
+ }
188
+
189
+ .rmd-grid-cell > :first-child {
190
+ margin-top: 0;
191
+ }
192
+
193
+ .rmd-grid-cell > :last-child {
194
+ margin-bottom: 0;
195
+ }
196
+
197
+ .rmd-callout,
198
+ .rmd-export,
199
+ .rmd-diff,
200
+ .rmd-flow,
201
+ .rmd-tabs {
202
+ padding: 20px;
203
+ }
204
+
205
+ .rmd-callout {
206
+ position: relative;
207
+ overflow: hidden;
208
+ border-left-width: 5px;
209
+ }
210
+
211
+ .rmd-callout::before {
212
+ position: absolute;
213
+ inset: 0 auto 0 0;
214
+ width: 5px;
215
+ background: currentColor;
216
+ content: "";
217
+ }
218
+
219
+ .rmd-callout-tip,
220
+ .rmd-callout-success {
221
+ border-color: rgb(47 125 79 / 0.28);
222
+ color: var(--rmd-color-success);
223
+ }
224
+
225
+ .rmd-callout-warning {
226
+ border-color: rgb(163 106 28 / 0.3);
227
+ color: var(--rmd-color-warning);
228
+ }
229
+
230
+ .rmd-callout-danger {
231
+ border-color: rgb(182 63 53 / 0.3);
232
+ color: var(--rmd-color-danger);
233
+ }
234
+
235
+ .rmd-callout-info {
236
+ border-color: rgb(56 103 168 / 0.28);
237
+ color: var(--rmd-color-info);
238
+ }
239
+
240
+ .rmd-callout-title,
241
+ .rmd-block-title {
242
+ margin: 0 0 12px;
243
+ color: var(--rmd-color-fg);
244
+ font-family: var(--rmd-font-ui);
245
+ font-size: 15px;
246
+ font-weight: 720;
247
+ }
248
+
249
+ .rmd-callout-body {
250
+ color: var(--rmd-color-fg);
251
+ }
252
+
253
+ .rmd-callout-body > :last-child {
254
+ margin-bottom: 0;
255
+ }
256
+
257
+ .rmd-chart {
258
+ padding: 20px;
259
+ border: 1px solid var(--rmd-color-line);
260
+ border-radius: var(--rmd-radius-md);
261
+ background:
262
+ linear-gradient(180deg, rgb(255 255 255 / 0.94), rgb(246 249 244 / 0.92));
263
+ box-shadow: var(--rmd-shadow-md);
264
+ }
265
+
266
+ .rmd-chart-svg {
267
+ display: block;
268
+ width: 100%;
269
+ max-width: 100%;
270
+ min-height: 220px;
271
+ padding-top: 6px;
272
+ }
273
+
274
+ .rmd-chart rect {
275
+ fill: var(--rmd-color-primary);
276
+ filter: drop-shadow(0 8px 8px rgb(23 107 114 / 0.16));
277
+ transition: fill 160ms ease, transform 160ms ease;
278
+ transform-origin: bottom;
279
+ }
280
+
281
+ .rmd-chart-point:nth-of-type(2n) rect {
282
+ fill: var(--rmd-color-accent);
283
+ }
284
+
285
+ .rmd-chart-point:hover rect {
286
+ fill: var(--rmd-color-primary-strong);
287
+ transform: scaleY(1.03);
288
+ }
289
+
290
+ .rmd-chart text {
291
+ fill: var(--rmd-color-muted);
292
+ font-family: var(--rmd-font-ui);
293
+ font-size: 12px;
294
+ }
295
+
296
+ .rmd-slider {
297
+ display: grid;
298
+ grid-template-columns: minmax(150px, 1.1fr) minmax(180px, 3fr) minmax(58px, auto);
299
+ gap: 14px;
300
+ align-items: center;
301
+ padding: 14px 16px;
302
+ }
303
+
304
+ .rmd-slider label,
305
+ .rmd-slider output {
306
+ font-family: var(--rmd-font-ui);
307
+ font-size: 14px;
308
+ font-weight: 680;
309
+ }
310
+
311
+ .rmd-slider label {
312
+ color: #293128;
313
+ }
314
+
315
+ .rmd-slider output {
316
+ justify-self: end;
317
+ min-width: 54px;
318
+ border: 1px solid rgb(23 107 114 / 0.18);
319
+ border-radius: 999px;
320
+ padding: 4px 9px;
321
+ background: rgb(23 107 114 / 0.08);
322
+ color: var(--rmd-color-primary-strong);
323
+ text-align: center;
324
+ }
325
+
326
+ .rmd-slider input[type="range"] {
327
+ width: 100%;
328
+ accent-color: var(--rmd-color-primary);
329
+ cursor: pointer;
330
+ }
331
+
332
+ .rmd-slider input[type="range"]:focus-visible,
333
+ .rmd-export button:focus-visible,
334
+ .rmd-tabs [role="tab"]:focus-visible {
335
+ outline: 0;
336
+ box-shadow: var(--rmd-focus-ring);
337
+ }
338
+
339
+ .rmd-export button,
340
+ .rmd-tabs [role="tab"] {
341
+ border: 1px solid var(--rmd-color-line-strong);
342
+ border-radius: var(--rmd-radius-sm);
343
+ padding: 8px 12px;
344
+ background: var(--rmd-color-surface);
345
+ color: #243026;
346
+ font-family: var(--rmd-font-ui);
347
+ font-size: 13px;
348
+ font-weight: 700;
349
+ cursor: pointer;
350
+ transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
351
+ }
352
+
353
+ .rmd-export button:hover,
354
+ .rmd-tabs [role="tab"]:hover {
355
+ border-color: var(--rmd-color-primary);
356
+ color: var(--rmd-color-primary-strong);
357
+ transform: translateY(-1px);
358
+ }
359
+
360
+ .rmd-export button {
361
+ background: var(--rmd-color-primary);
362
+ border-color: var(--rmd-color-primary);
363
+ color: #fff;
364
+ }
365
+
366
+ .rmd-export button:hover {
367
+ background: var(--rmd-color-primary-strong);
368
+ color: #fff;
369
+ }
370
+
371
+ .rmd-tabs [role="tablist"] {
372
+ display: flex;
373
+ flex-wrap: wrap;
374
+ gap: 8px;
375
+ margin-bottom: 18px;
376
+ }
377
+
378
+ .rmd-tabs [role="tab"][aria-selected="true"] {
379
+ border-color: var(--rmd-color-primary);
380
+ background: rgb(23 107 114 / 0.1);
381
+ color: var(--rmd-color-primary-strong);
382
+ }
383
+
384
+ .rmd-tabs [role="tabpanel"] > :last-child {
385
+ margin-bottom: 0;
386
+ }
387
+
388
+ .rmd-code,
389
+ .rmd-export pre,
390
+ .rmd-diff pre {
391
+ overflow: auto;
392
+ border: 1px solid rgb(32 37 31 / 0.1);
393
+ border-radius: var(--rmd-radius-md);
394
+ background: #15201b;
395
+ color: #e8eee7;
396
+ font-family: var(--rmd-font-mono);
397
+ font-size: 13px;
398
+ line-height: 1.62;
399
+ }
400
+
401
+ .rmd-code {
402
+ padding: 16px;
403
+ }
404
+
405
+ .rmd-code code,
406
+ .rmd-export pre code,
407
+ .rmd-diff code {
408
+ border: 0;
409
+ padding: 0;
410
+ background: transparent;
411
+ color: inherit;
412
+ font-size: inherit;
413
+ }
414
+
415
+ .rmd-export pre,
416
+ .rmd-diff pre {
417
+ margin: 14px 0 0;
418
+ padding: 14px;
419
+ }
420
+
421
+ .rmd-flow ol {
422
+ display: grid;
423
+ gap: 10px;
424
+ margin: 0;
425
+ padding: 0;
426
+ list-style: none;
427
+ }
428
+
429
+ .rmd-flow li {
430
+ display: flex;
431
+ flex-wrap: wrap;
432
+ gap: 8px;
433
+ align-items: center;
434
+ border: 1px solid rgb(23 107 114 / 0.14);
435
+ border-radius: var(--rmd-radius-md);
436
+ padding: 10px 12px;
437
+ background: rgb(23 107 114 / 0.055);
438
+ color: #263229;
439
+ font-family: var(--rmd-font-ui);
440
+ font-size: 14px;
441
+ }
442
+
443
+ .rmd-flow li span:nth-child(2) {
444
+ color: var(--rmd-color-accent);
445
+ font-weight: 800;
446
+ }
447
+
448
+ .rmd-diff-line {
449
+ display: block;
450
+ padding: 2px 0;
451
+ }
452
+
453
+ .rmd-diff-line mark {
454
+ border-radius: 999px;
455
+ padding: 2px 7px;
456
+ background: rgb(200 82 62 / 0.18);
457
+ color: #f0c2b9;
458
+ font-family: var(--rmd-font-ui);
459
+ font-size: 12px;
460
+ }
461
+
462
+ .rmd-diff-add code {
463
+ color: #9fe0b5;
464
+ }
465
+
466
+ .rmd-diff-remove code {
467
+ color: #f1a29a;
468
+ }
469
+
470
+ @media (max-width: 720px) {
471
+ .rmd-grid {
472
+ grid-template-columns: 1fr;
473
+ }
474
+
475
+ .rmd-slider {
476
+ grid-template-columns: 1fr;
477
+ }
478
+
479
+ .rmd-slider output {
480
+ justify-self: start;
481
+ }
482
+
483
+ .rmd-document h1 {
484
+ font-size: 32px;
485
+ }
486
+
487
+ .rmd-document h2 {
488
+ font-size: 24px;
489
+ }
490
+ }
491
+
492
+ /* ========================================================================= */
493
+ /* EXTENSION BLOCKS v0.2 */
494
+ /* ========================================================================= */
495
+
496
+ /* Grid Masonry Layout */
497
+ .rmd-grid[data-layout="masonry"] {
498
+ display: block;
499
+ column-gap: 14px;
500
+ column-count: var(--rmd-grid-columns, 1);
501
+ }
502
+
503
+ .rmd-grid[data-layout="masonry"] > .rmd-grid-cell {
504
+ break-inside: avoid;
505
+ margin-bottom: 14px;
506
+ }
507
+
508
+ /* Timeline */
509
+ .rmd-timeline {
510
+ margin: 32px 0;
511
+ }
512
+
513
+ .rmd-timeline ol {
514
+ position: relative;
515
+ margin: 0;
516
+ padding: 0;
517
+ list-style: none;
518
+ }
519
+
520
+ .rmd-timeline-vertical ol::before {
521
+ position: absolute;
522
+ top: 0;
523
+ bottom: 0;
524
+ left: 5px;
525
+ width: 2px;
526
+ background: var(--rmd-color-line);
527
+ content: "";
528
+ }
529
+
530
+ .rmd-timeline-vertical .rmd-timeline-item {
531
+ position: relative;
532
+ padding-left: 28px;
533
+ margin-bottom: 24px;
534
+ }
535
+
536
+ .rmd-timeline-vertical .rmd-timeline-item::before {
537
+ position: absolute;
538
+ top: 6px;
539
+ left: 0;
540
+ width: 12px;
541
+ height: 12px;
542
+ border-radius: 50%;
543
+ background: var(--rmd-color-surface);
544
+ border: 2px solid var(--rmd-color-line-strong);
545
+ content: "";
546
+ z-index: 1;
547
+ }
548
+
549
+ .rmd-timeline-horizontal ol {
550
+ display: flex;
551
+ overflow-x: auto;
552
+ gap: 20px;
553
+ padding-bottom: 10px;
554
+ }
555
+
556
+ .rmd-timeline-horizontal .rmd-timeline-item {
557
+ flex: 0 0 auto;
558
+ min-width: 200px;
559
+ position: relative;
560
+ padding-top: 28px;
561
+ }
562
+
563
+ .rmd-timeline-horizontal ol::before {
564
+ position: absolute;
565
+ top: 5px;
566
+ left: 0;
567
+ right: 0;
568
+ height: 2px;
569
+ background: var(--rmd-color-line);
570
+ content: "";
571
+ }
572
+
573
+ .rmd-timeline-horizontal .rmd-timeline-item::before {
574
+ position: absolute;
575
+ top: 0;
576
+ left: 0;
577
+ width: 12px;
578
+ height: 12px;
579
+ border-radius: 50%;
580
+ background: var(--rmd-color-surface);
581
+ border: 2px solid var(--rmd-color-line-strong);
582
+ content: "";
583
+ z-index: 1;
584
+ }
585
+
586
+ .rmd-timeline-time {
587
+ font-family: var(--rmd-font-mono);
588
+ font-size: 13px;
589
+ color: var(--rmd-color-subtle);
590
+ margin-bottom: 4px;
591
+ }
592
+
593
+ .rmd-timeline-content h4 {
594
+ margin: 0 0 8px;
595
+ font-size: 16px;
596
+ color: var(--rmd-color-fg);
597
+ }
598
+
599
+ .rmd-timeline-status-success::before { border-color: var(--rmd-color-success) !important; background: var(--rmd-color-success) !important; }
600
+ .rmd-timeline-status-warning::before { border-color: var(--rmd-color-warning) !important; background: var(--rmd-color-warning) !important; }
601
+ .rmd-timeline-status-danger::before { border-color: var(--rmd-color-danger) !important; background: var(--rmd-color-danger) !important; }
602
+ .rmd-timeline-status-pending::before { border-color: var(--rmd-color-primary) !important; }
603
+
604
+ /* Kanban */
605
+ .rmd-kanban {
606
+ display: flex;
607
+ gap: 16px;
608
+ overflow-x: auto;
609
+ padding-bottom: 16px;
610
+ align-items: flex-start;
611
+ scroll-snap-type: x mandatory;
612
+ }
613
+
614
+ .rmd-kanban-column {
615
+ flex: 0 0 300px;
616
+ scroll-snap-align: start;
617
+ background: rgb(243 246 242 / 0.85);
618
+ border-radius: var(--rmd-radius-md);
619
+ padding: 16px;
620
+ border: 1px solid var(--rmd-color-line);
621
+ }
622
+
623
+ .rmd-kanban-column h3 {
624
+ margin: 0 0 16px;
625
+ font-size: 15px;
626
+ font-weight: 720;
627
+ color: var(--rmd-color-fg);
628
+ display: flex;
629
+ align-items: center;
630
+ gap: 8px;
631
+ }
632
+
633
+ .rmd-kanban-column h3::before {
634
+ content: "";
635
+ display: block;
636
+ width: 10px;
637
+ height: 10px;
638
+ border-radius: 50%;
639
+ background: var(--rmd-color-primary);
640
+ box-shadow: 0 0 0 3px rgb(23 107 114 / 0.15);
641
+ }
642
+
643
+ .rmd-kanban-column:nth-child(2n) h3::before { background: var(--rmd-color-warning); box-shadow: 0 0 0 3px rgb(163 106 28 / 0.15); }
644
+ .rmd-kanban-column:nth-child(3n) h3::before { background: var(--rmd-color-success); box-shadow: 0 0 0 3px rgb(47 125 79 / 0.15); }
645
+ .rmd-kanban-column:nth-child(4n) h3::before { background: var(--rmd-color-accent); box-shadow: 0 0 0 3px rgb(200 82 62 / 0.15); }
646
+
647
+ .rmd-kanban-cards {
648
+ display: flex;
649
+ flex-direction: column;
650
+ gap: 12px;
651
+ }
652
+
653
+ .rmd-kanban-cards ul,
654
+ .rmd-kanban-cards ol {
655
+ list-style: none;
656
+ padding: 0;
657
+ margin: 0;
658
+ display: flex;
659
+ flex-direction: column;
660
+ gap: 12px;
661
+ }
662
+
663
+ .rmd-kanban-cards > :not(ul):not(ol),
664
+ .rmd-kanban-cards li {
665
+ background: var(--rmd-color-surface);
666
+ border-radius: var(--rmd-radius-sm);
667
+ padding: 14px;
668
+ margin: 0;
669
+ box-shadow: 0 2px 5px rgb(23 36 29 / 0.04);
670
+ border: 1px solid var(--rmd-color-line);
671
+ font-size: 15px;
672
+ line-height: 1.5;
673
+ color: #384236;
674
+ transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
675
+ cursor: default;
676
+ }
677
+
678
+ .rmd-kanban-cards > :not(ul):not(ol):hover,
679
+ .rmd-kanban-cards li:hover {
680
+ transform: translateY(-2px);
681
+ box-shadow: var(--rmd-shadow-sm);
682
+ border-color: var(--rmd-color-line-strong);
683
+ }
684
+
685
+ .rmd-kanban-cards li input[type="checkbox"] {
686
+ margin-right: 8px;
687
+ accent-color: var(--rmd-color-primary);
688
+ }
689
+
690
+ /* Details */
691
+ .rmd-details {
692
+ border: 1px solid var(--rmd-color-line);
693
+ border-radius: var(--rmd-radius-md);
694
+ background: rgb(255 255 255 / 0.6);
695
+ overflow: hidden;
696
+ transition: background 200ms ease;
697
+ }
698
+
699
+ .rmd-details[open] {
700
+ background: var(--rmd-color-surface);
701
+ box-shadow: var(--rmd-shadow-sm);
702
+ }
703
+
704
+ .rmd-details summary {
705
+ padding: 16px 20px;
706
+ font-family: var(--rmd-font-ui);
707
+ font-size: 16px;
708
+ font-weight: 600;
709
+ cursor: pointer;
710
+ user-select: none;
711
+ list-style: none;
712
+ display: flex;
713
+ align-items: center;
714
+ gap: 10px;
715
+ }
716
+
717
+ .rmd-details summary::-webkit-details-marker {
718
+ display: none;
719
+ }
720
+
721
+ .rmd-details summary::before {
722
+ content: "";
723
+ display: block;
724
+ width: 0;
725
+ height: 0;
726
+ border-top: 5px solid transparent;
727
+ border-bottom: 5px solid transparent;
728
+ border-left: 6px solid var(--rmd-color-muted);
729
+ transition: transform 200ms ease;
730
+ }
731
+
732
+ .rmd-details[open] summary::before {
733
+ transform: rotate(90deg);
734
+ }
735
+
736
+ .rmd-details-body {
737
+ padding: 0 20px 20px;
738
+ border-top: 1px solid transparent;
739
+ }
740
+
741
+ .rmd-details[open] .rmd-details-body {
742
+ border-top-color: rgb(23 107 114 / 0.08);
743
+ padding-top: 16px;
744
+ }
745
+
746
+ /* Carousel */
747
+ .rmd-carousel {
748
+ position: relative;
749
+ border: 1px solid var(--rmd-color-line);
750
+ border-radius: var(--rmd-radius-md);
751
+ overflow: hidden;
752
+ box-shadow: var(--rmd-shadow-sm);
753
+ background: var(--rmd-color-surface);
754
+ }
755
+
756
+ .rmd-carousel-track {
757
+ display: flex;
758
+ overflow-x: auto;
759
+ scroll-snap-type: x mandatory;
760
+ scroll-behavior: smooth;
761
+ -ms-overflow-style: none;
762
+ scrollbar-width: none;
763
+ }
764
+
765
+ .rmd-carousel-track::-webkit-scrollbar {
766
+ display: none;
767
+ }
768
+
769
+ .rmd-carousel-item {
770
+ scroll-snap-align: center;
771
+ flex: 0 0 100%;
772
+ width: 100%;
773
+ padding: 24px;
774
+ }
775
+
776
+ /* Embed */
777
+ .rmd-embed {
778
+ position: relative;
779
+ width: 100%;
780
+ border-radius: var(--rmd-radius-md);
781
+ overflow: hidden;
782
+ background: #000;
783
+ box-shadow: var(--rmd-shadow-md);
784
+ }
785
+
786
+ .rmd-embed iframe {
787
+ width: 100%;
788
+ height: 100%;
789
+ border: 0;
790
+ aspect-ratio: var(--rmd-aspect-ratio, 16 / 9);
791
+ }
792
+
793
+ /* Math */
794
+ .rmd-math {
795
+ display: block;
796
+ overflow-x: auto;
797
+ padding: 18px 24px;
798
+ background: rgb(23 107 114 / 0.04);
799
+ border-radius: var(--rmd-radius-md);
800
+ border: 1px solid rgb(23 107 114 / 0.12);
801
+ color: var(--rmd-color-fg);
802
+ font-family: var(--rmd-font-mono);
803
+ font-size: 15px;
804
+ text-align: center;
805
+ }
806
+
807
+ .rmd-math pre {
808
+ margin: 0;
809
+ }
810
+
811
+ /* ========================================================================= */
812
+ /* THEME: tech-dark — overrides applied on top of the default layout */
813
+ /* ========================================================================= */
814
+
815
+ :root {
816
+ --rmd-color-page: #07090e;
817
+ --rmd-color-bg: #0c1018;
818
+ --rmd-color-surface: #131826;
819
+ --rmd-color-surface-strong: #1c2336;
820
+ --rmd-color-fg: #d8e3f0;
821
+ --rmd-color-muted: #8c98ad;
822
+ --rmd-color-subtle: #5e6878;
823
+ --rmd-color-line: #1e2738;
824
+ --rmd-color-line-strong: #2e394f;
825
+ --rmd-color-primary: #5cf2d6;
826
+ --rmd-color-primary-strong: #2dd6b9;
827
+ --rmd-color-accent: #c084fc;
828
+ --rmd-color-success: #6ee7b7;
829
+ --rmd-color-warning: #fcd34d;
830
+ --rmd-color-danger: #f87171;
831
+ --rmd-color-info: #60a5fa;
832
+ --rmd-font-body: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
833
+ --rmd-font-ui: Inter, ui-sans-serif, system-ui, sans-serif;
834
+ --rmd-font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
835
+ --rmd-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
836
+ --rmd-shadow-md: 0 12px 36px rgb(0 0 0 / 0.5);
837
+ --rmd-focus-ring: 0 0 0 3px rgb(92 242 214 / 0.35);
838
+ }
839
+
840
+ body[data-rmd-theme] {
841
+ background:
842
+ linear-gradient(180deg, #07090e 0%, #0a0d15 60%, #07090e 100%),
843
+ radial-gradient(circle at 18% 12%, rgb(92 242 214 / 0.08), transparent 30rem),
844
+ radial-gradient(circle at 82% 6%, rgb(192 132 252 / 0.10), transparent 32rem);
845
+ color: var(--rmd-color-fg);
846
+ }
847
+
848
+ /* Subtle scanline grid for the page background */
849
+ body[data-rmd-theme]::before {
850
+ content: "";
851
+ position: fixed;
852
+ inset: 0;
853
+ pointer-events: none;
854
+ background-image:
855
+ linear-gradient(rgb(92 242 214 / 0.03) 1px, transparent 1px),
856
+ linear-gradient(90deg, rgb(92 242 214 / 0.03) 1px, transparent 1px);
857
+ background-size: 32px 32px;
858
+ z-index: 0;
859
+ }
860
+
861
+ .rmd-document {
862
+ position: relative;
863
+ z-index: 1;
864
+ color: var(--rmd-color-fg);
865
+ }
866
+
867
+ /* Headings — luminous, mono-flavored */
868
+ .rmd-document h1,
869
+ .rmd-document h2,
870
+ .rmd-document h3,
871
+ .rmd-document h4,
872
+ .rmd-document h5,
873
+ .rmd-document h6 {
874
+ color: #f0f6ff;
875
+ font-weight: 700;
876
+ }
877
+
878
+ .rmd-document h1 {
879
+ border-bottom-color: var(--rmd-color-line-strong);
880
+ background: linear-gradient(90deg, #f0f6ff 0%, #5cf2d6 100%);
881
+ -webkit-background-clip: text;
882
+ background-clip: text;
883
+ -webkit-text-fill-color: transparent;
884
+ color: transparent;
885
+ }
886
+
887
+ .rmd-document a {
888
+ color: var(--rmd-color-primary);
889
+ text-decoration-color: rgb(92 242 214 / 0.35);
890
+ }
891
+
892
+ .rmd-document a:hover {
893
+ color: var(--rmd-color-primary-strong);
894
+ }
895
+
896
+ .rmd-document strong {
897
+ color: #ffffff;
898
+ }
899
+
900
+ .rmd-document code {
901
+ background: rgb(92 242 214 / 0.1);
902
+ border: 1px solid rgb(92 242 214 / 0.2);
903
+ color: var(--rmd-color-primary);
904
+ }
905
+
906
+ .rmd-document blockquote {
907
+ border-left-color: var(--rmd-color-primary);
908
+ background: rgb(92 242 214 / 0.04);
909
+ color: var(--rmd-color-muted);
910
+ }
911
+
912
+ .rmd-document hr {
913
+ background: linear-gradient(90deg, transparent, var(--rmd-color-line-strong), transparent);
914
+ }
915
+
916
+ /* Card-like blocks: replace the cream surfaces with dark surfaces */
917
+ .rmd-grid-cell,
918
+ .rmd-callout,
919
+ .rmd-export,
920
+ .rmd-slider,
921
+ .rmd-diff,
922
+ .rmd-flow,
923
+ .rmd-tabs {
924
+ background: var(--rmd-color-surface);
925
+ border-color: var(--rmd-color-line);
926
+ box-shadow: var(--rmd-shadow-sm);
927
+ }
928
+
929
+ .rmd-callout {
930
+ border-left-width: 3px;
931
+ }
932
+
933
+ .rmd-callout-title,
934
+ .rmd-block-title {
935
+ color: #f0f6ff;
936
+ }
937
+
938
+ .rmd-callout-tip,
939
+ .rmd-callout-success { color: var(--rmd-color-success); border-color: rgb(110 231 183 / 0.35); }
940
+ .rmd-callout-warning { color: var(--rmd-color-warning); border-color: rgb(252 211 77 / 0.35); }
941
+ .rmd-callout-danger { color: var(--rmd-color-danger); border-color: rgb(248 113 113 / 0.35); }
942
+ .rmd-callout-info { color: var(--rmd-color-info); border-color: rgb(96 165 250 / 0.35); }
943
+
944
+ .rmd-callout-body { color: var(--rmd-color-fg); }
945
+
946
+ /* Chart — flat fills, neon outlines, dark surface */
947
+ .rmd-chart {
948
+ background: linear-gradient(180deg, var(--rmd-color-surface) 0%, var(--rmd-color-surface-strong) 100%);
949
+ border: 1px solid var(--rmd-color-line);
950
+ box-shadow: 0 0 0 1px rgb(92 242 214 / 0.05) inset;
951
+ }
952
+
953
+ .rmd-chart rect {
954
+ fill: var(--rmd-color-primary);
955
+ filter: drop-shadow(0 0 12px rgb(92 242 214 / 0.4));
956
+ }
957
+
958
+ .rmd-chart-point:nth-of-type(2n) rect {
959
+ fill: var(--rmd-color-accent);
960
+ filter: drop-shadow(0 0 12px rgb(192 132 252 / 0.4));
961
+ }
962
+
963
+ .rmd-chart-point:hover rect {
964
+ fill: var(--rmd-color-primary-strong);
965
+ }
966
+
967
+ .rmd-chart text {
968
+ fill: var(--rmd-color-muted);
969
+ }
970
+
971
+ /* Slider — neon track */
972
+ .rmd-slider label { color: var(--rmd-color-fg); }
973
+
974
+ .rmd-slider output {
975
+ background: rgb(92 242 214 / 0.12);
976
+ border: 1px solid rgb(92 242 214 / 0.35);
977
+ color: var(--rmd-color-primary);
978
+ }
979
+
980
+ .rmd-slider input[type="range"] {
981
+ accent-color: var(--rmd-color-primary);
982
+ }
983
+
984
+ /* Buttons — glowing primary, ghost secondary */
985
+ .rmd-export button,
986
+ .rmd-tabs [role="tab"] {
987
+ background: var(--rmd-color-surface-strong);
988
+ border-color: var(--rmd-color-line-strong);
989
+ color: var(--rmd-color-fg);
990
+ }
991
+
992
+ .rmd-export button:hover,
993
+ .rmd-tabs [role="tab"]:hover {
994
+ border-color: var(--rmd-color-primary);
995
+ color: var(--rmd-color-primary);
996
+ }
997
+
998
+ .rmd-export button {
999
+ background: linear-gradient(135deg, var(--rmd-color-primary) 0%, var(--rmd-color-primary-strong) 100%);
1000
+ border-color: transparent;
1001
+ color: #07090e;
1002
+ box-shadow: 0 0 24px rgb(92 242 214 / 0.4);
1003
+ }
1004
+
1005
+ .rmd-export button:hover {
1006
+ background: linear-gradient(135deg, #7df5e0 0%, #45e3c8 100%);
1007
+ color: #07090e;
1008
+ }
1009
+
1010
+ .rmd-tabs [role="tab"][aria-selected="true"] {
1011
+ background: rgb(92 242 214 / 0.12);
1012
+ border-color: var(--rmd-color-primary);
1013
+ color: var(--rmd-color-primary);
1014
+ }
1015
+
1016
+ /* Code & pre — slightly lighter surface than the default's near-black */
1017
+ .rmd-code,
1018
+ .rmd-export pre,
1019
+ .rmd-diff pre {
1020
+ background: #060810;
1021
+ border-color: var(--rmd-color-line-strong);
1022
+ color: #d8e3f0;
1023
+ }
1024
+
1025
+ /* Flow — nodes glow */
1026
+ .rmd-flow li {
1027
+ background: rgb(92 242 214 / 0.05);
1028
+ border-color: rgb(92 242 214 / 0.25);
1029
+ color: var(--rmd-color-fg);
1030
+ }
1031
+
1032
+ .rmd-flow li span:nth-child(2) {
1033
+ color: var(--rmd-color-accent);
1034
+ }
1035
+
1036
+ /* Diff — terminal-style */
1037
+ .rmd-diff-add code { color: var(--rmd-color-success); }
1038
+ .rmd-diff-remove code { color: var(--rmd-color-danger); }
1039
+
1040
+ .rmd-diff-line mark {
1041
+ background: rgb(192 132 252 / 0.2);
1042
+ color: var(--rmd-color-accent);
1043
+ }
1044
+
1045
+ /* Timeline — cyan rail, glowing dots */
1046
+ .rmd-timeline-vertical ol::before,
1047
+ .rmd-timeline-horizontal ol::before {
1048
+ background: linear-gradient(var(--rmd-color-line) 0%, var(--rmd-color-primary) 50%, var(--rmd-color-line) 100%);
1049
+ }
1050
+
1051
+ .rmd-timeline-vertical .rmd-timeline-item::before,
1052
+ .rmd-timeline-horizontal .rmd-timeline-item::before {
1053
+ background: var(--rmd-color-bg);
1054
+ border-color: var(--rmd-color-primary);
1055
+ box-shadow: 0 0 8px rgb(92 242 214 / 0.6);
1056
+ }
1057
+
1058
+ .rmd-timeline-time {
1059
+ color: var(--rmd-color-primary);
1060
+ }
1061
+
1062
+ .rmd-timeline-content h4 {
1063
+ color: #f0f6ff;
1064
+ }
1065
+
1066
+ /* Kanban — dark columns, neon column dots */
1067
+ .rmd-kanban-column {
1068
+ background: var(--rmd-color-surface-strong);
1069
+ border-color: var(--rmd-color-line-strong);
1070
+ }
1071
+
1072
+ .rmd-kanban-column h3 {
1073
+ color: var(--rmd-color-fg);
1074
+ }
1075
+
1076
+ .rmd-kanban-cards > :not(ul):not(ol),
1077
+ .rmd-kanban-cards li {
1078
+ background: var(--rmd-color-surface);
1079
+ border-color: var(--rmd-color-line);
1080
+ color: var(--rmd-color-fg);
1081
+ box-shadow: none;
1082
+ }
1083
+
1084
+ .rmd-kanban-cards > :not(ul):not(ol):hover,
1085
+ .rmd-kanban-cards li:hover {
1086
+ border-color: var(--rmd-color-primary);
1087
+ box-shadow: 0 0 12px rgb(92 242 214 / 0.2);
1088
+ }
1089
+
1090
+ /* Details — collapsed dark card */
1091
+ .rmd-details {
1092
+ background: rgb(255 255 255 / 0.02);
1093
+ border-color: var(--rmd-color-line);
1094
+ }
1095
+
1096
+ .rmd-details[open] {
1097
+ background: var(--rmd-color-surface);
1098
+ }
1099
+
1100
+ .rmd-details summary::before {
1101
+ border-left-color: var(--rmd-color-primary);
1102
+ }
1103
+
1104
+ .rmd-details[open] .rmd-details-body {
1105
+ border-top-color: var(--rmd-color-line-strong);
1106
+ }
1107
+
1108
+ /* Carousel & embed */
1109
+ .rmd-carousel {
1110
+ background: var(--rmd-color-surface);
1111
+ border-color: var(--rmd-color-line);
1112
+ }
1113
+
1114
+ .rmd-embed {
1115
+ background: #000;
1116
+ box-shadow: 0 0 30px rgb(0 0 0 / 0.6);
1117
+ }
1118
+
1119
+ /* Math — terminal-style equations */
1120
+ .rmd-math {
1121
+ background: rgb(92 242 214 / 0.05);
1122
+ border-color: rgb(92 242 214 / 0.2);
1123
+ color: var(--rmd-color-fg);
1124
+ }