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,809 @@
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
+ }