@mgks/docmd 0.2.0 → 0.2.1

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,1169 +1,7 @@
1
- :root {
2
- --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
3
- --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
4
- --bg-color: #ffffff;
5
- --text-color: #333333;
6
- --sidebar-bg: #f4f7f9;
7
- --sidebar-text: #2c3e50;
8
- --sidebar-link-active-bg: #e0e7ec;
9
- --sidebar-link-active-parent-bg: #e9eff3;
10
- --link-color: #007bff;
11
- --border-color: #e0e0e0;
12
- --code-bg: #f8f8f8;
13
- --code-text: #333;
14
- --header-bg: #ffffff;
15
- --header-border: #e0e0e0;
16
- --image-border-color: #e0e0e0;
17
- --image-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
18
- --image-caption-bg: #f8f8f8;
19
- --image-caption-text: #666;
20
- --lightbox-bg: rgba(0, 0, 0, 0.9);
21
- --lightbox-text: #fff;
22
- }
1
+ /* Source file from the docmd project — https://github.com/mgks/docmd */
23
2
 
24
- body[data-theme="dark"] {
25
- --bg-color: #1a1a1a;
26
- --text-color: #e0e0e0;
27
- --sidebar-bg: #2c2c2c;
28
- --sidebar-text: #bdc3c7;
29
- --sidebar-link-active-bg: #3a3a3a;
30
- --sidebar-link-active-parent-bg: #343434;
31
- --link-color: #58a6ff;
32
- --border-color: #444444;
33
- --code-bg: #282c34;
34
- --code-text: #abb2bf;
35
- --header-bg: #1a1a1a;
36
- --header-border: #444444;
37
- --image-border-color: #444444;
38
- --image-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
39
- --image-caption-bg: #2c2c2c;
40
- --image-caption-text: #bdc3c7;
41
- --lightbox-bg: rgba(0, 0, 0, 0.95);
42
- --lightbox-text: #fff;
43
- }
3
+ /*
4
+ * Main CSS file for docmd
5
+ */
44
6
 
45
- body {
46
- font-family: var(--font-family-sans);
47
- background-color: var(--bg-color);
48
- color: var(--text-color);
49
- margin: 0px;
50
- display: flex;
51
- min-height: 100vh;
52
- line-height: 1.6;
53
- }
54
-
55
- .sidebar {
56
- width: 260px;
57
- background-color: var(--sidebar-bg);
58
- color: var(--sidebar-text);
59
- padding: 20px;
60
- border-right: 1px solid var(--border-color);
61
- height: 100vh;
62
- position: fixed;
63
- top: 0px;
64
- left: 0px;
65
- overflow-y: auto;
66
- box-sizing: border-box;
67
- flex-shrink: 0;
68
- }
69
-
70
- .sidebar h1 {
71
- font-size: 1.5em;
72
- margin-top: 0px;
73
- margin-bottom: 20px;
74
- padding-bottom: 10px;
75
- border-bottom: 1px solid var(--border-color);
76
- }
77
-
78
- .sidebar nav ul {
79
- list-style: none;
80
- padding: 0px;
81
- margin: 0px;
82
- }
83
-
84
- .sidebar nav li a {
85
- display: block;
86
- padding: 8px 10px;
87
- text-decoration: none;
88
- color: var(--sidebar-text);
89
- border-radius: 4px;
90
- transition: background-color 0.2s;
91
- }
92
-
93
- .sidebar nav li a:hover, .sidebar nav li a.active {
94
- background-color: var(--sidebar-link-active-bg);
95
- }
96
-
97
- .sidebar nav li a.active {
98
- font-weight: 600;
99
- color: var(--link-color);
100
- }
101
-
102
- .sidebar nav li.active-parent > a {
103
- background-color: var(--sidebar-link-active-parent-bg);
104
- font-weight: 500;
105
- position: relative;
106
- }
107
-
108
- .sidebar nav li.active-parent > a::before {
109
- content: "";
110
- position: absolute;
111
- left: 0px;
112
- top: 0px;
113
- bottom: 0px;
114
- width: 3px;
115
- background-color: var(--link-color);
116
- opacity: 0.5;
117
- }
118
-
119
- .sidebar nav li.active-parent > a.active::before {
120
- opacity: 1;
121
- }
122
-
123
- .sidebar nav ul ul {
124
- padding-left: 20px;
125
- margin-top: 5px;
126
- }
127
-
128
- .sidebar-toggle-button {
129
- background: none;
130
- border: 1px solid transparent;
131
- color: var(--text-color);
132
- cursor: pointer;
133
- padding: 0px;
134
- margin: .5em 0 0;
135
- display: none;
136
- border-radius: 4px;
137
- }
138
-
139
- .sidebar-toggle-button:hover {
140
- background-color: var(--sidebar-bg);
141
- border-color: var(--border-color);
142
- }
143
-
144
- .sidebar-toggle-button .lucide-icon {
145
- width: 2em;
146
- height: 2em;
147
- }
148
-
149
- body.sidebar-collapsible .sidebar-toggle-button {
150
- display: block;
151
- }
152
-
153
- body.sidebar-collapsed .sidebar {
154
- transform: translateX(-100%);
155
- visibility: hidden;
156
- }
157
-
158
- body.sidebar-collapsed .main-content-wrapper {
159
- margin-left: 0px;
160
- }
161
-
162
- .sidebar, .main-content-wrapper {
163
- transition: transform 0.3s, margin-left 0.3s, visibility 0.3s;
164
- }
165
-
166
- .main-content-wrapper {
167
- margin-left: 260px;
168
- flex-grow: 1;
169
- display: flex;
170
- flex-direction: column;
171
- overflow: hidden;
172
- }
173
-
174
- .page-header {
175
- padding: 15px 30px;
176
- border-bottom: 1px solid var(--header-border);
177
- background-color: var(--header-bg);
178
- display: flex;
179
- align-items: center;
180
- justify-content: space-between;
181
- min-height: 2.5em;
182
- }
183
-
184
- .header-left {
185
- display: flex;
186
- align-items: center;
187
- gap: 15px;
188
- }
189
-
190
- .header-right {
191
- display: flex;
192
- align-items: center;
193
- }
194
-
195
- .page-header h1 {
196
- margin: 0px;
197
- font-size: 1.8em;
198
- }
199
-
200
- .theme-toggle-header {
201
- padding: 8px;
202
- background: var(--content-bg);
203
- border: 1px solid var(--border-color);
204
- border-radius: 6px;
205
- cursor: pointer;
206
- transition: 0.2s;
207
- }
208
-
209
- .theme-toggle-header:hover {
210
- background: var(--sidebar-bg);
211
- border-color: var(--accent-color);
212
- }
213
-
214
- .content-area {
215
- padding: 2.5rem 2rem;
216
- max-width: 1200px;
217
- margin: 0px auto;
218
- width: 100%;
219
- box-sizing: border-box;
220
- }
221
-
222
- pre {
223
- background-color: var(--code-bg);
224
- color: var(--code-text);
225
- padding: 1em;
226
- border-radius: 4px;
227
- overflow-x: auto;
228
- font-family: var(--font-family-mono);
229
- }
230
-
231
- code {
232
- font-family: var(--font-family-mono);
233
- background-color: var(--code-bg);
234
- padding: 0.2em 0.4em;
235
- border-radius: 3px;
236
- font-size: 0.9em;
237
- }
238
-
239
- pre code {
240
- background-color: transparent;
241
- padding: 0px;
242
- font-size: inherit;
243
- }
244
-
245
- .sidebar-header {
246
- padding-bottom: 10px;
247
- margin-bottom: 10px;
248
- border-bottom: 1px solid var(--border-color);
249
- text-align: center;
250
- height: 2.5em;
251
- }
252
-
253
- .sidebar-header h1 {
254
- font-size: 1.5em;
255
- margin-top: 0px;
256
- margin-bottom: 0px;
257
- }
258
-
259
- .logo-link img {
260
- max-height: 40px;
261
- width: auto;
262
- display: block;
263
- margin: 0px auto;
264
- }
265
-
266
- .logo-link img.logo-light {
267
- display: block;
268
- }
269
-
270
- .logo-link img.logo-dark {
271
- display: none;
272
- }
273
-
274
- body[data-theme="dark"] .logo-link img.logo-light {
275
- display: none;
276
- }
277
-
278
- body[data-theme="dark"] .logo-link img.logo-dark {
279
- display: block;
280
- }
281
-
282
- .sidebar-nav .lucide-icon {
283
- width: 1em;
284
- height: 1em;
285
- margin-right: 0.5em;
286
- vertical-align: -0.15em;
287
- stroke-width: 2;
288
- }
289
-
290
- .sidebar-nav .nav-external-icon {
291
- width: 1em;
292
- height: 1.5em;
293
- float: right;
294
- margin-left: 0.3em;
295
- opacity: 0.7;
296
- }
297
-
298
- .theme-toggle-button {
299
- background: none;
300
- border: 1px solid var(--border-color);
301
- color: var(--sidebar-text);
302
- padding: 8px;
303
- border-radius: 4px;
304
- cursor: pointer;
305
- margin-top: 0.5em;
306
- display: flex;
307
- align-items: center;
308
- justify-content: center;
309
- width: 100%;
310
- }
311
-
312
- .theme-toggle-button:hover {
313
- background-color: var(--sidebar-link-active-bg);
314
- }
315
-
316
- .theme-toggle-button .lucide-icon {
317
- width: 1.2em;
318
- height: 1.2em;
319
- }
320
-
321
- .theme-toggle-button .icon-moon {
322
- display: none;
323
- }
324
-
325
- .theme-toggle-button .icon-sun {
326
- display: block;
327
- }
328
-
329
- body[data-theme="dark"] .theme-toggle-button .icon-moon {
330
- display: block;
331
- }
332
-
333
- body[data-theme="dark"] .theme-toggle-button .icon-sun {
334
- display: none;
335
- }
336
-
337
- .docmd-container {
338
- padding: 1rem 1.5rem;
339
- margin-bottom: 1.5rem;
340
- border-radius: 6px;
341
- border: 1px solid var(--border-color);
342
- background-color: var(--code-bg);
343
- }
344
-
345
- .docmd-container > :first-child {
346
- margin-top: 0px;
347
- }
348
-
349
- .docmd-container > :last-child {
350
- margin-bottom: 0px;
351
- }
352
-
353
- .callout {
354
- border-left-width: 5px;
355
- background-color: transparent;
356
- }
357
-
358
- .callout-title {
359
- font-weight: bold;
360
- margin-bottom: 0.5em;
361
- }
362
-
363
- .callout-info {
364
- border-left-color: rgb(52, 152, 219);
365
- background-color: rgba(52, 152, 219, 0.07);
366
- }
367
-
368
- .callout-warning {
369
- border-left-color: rgb(243, 156, 18);
370
- background-color: rgba(243, 156, 18, 0.07);
371
- }
372
-
373
- .callout-tip {
374
- border-left-color: rgb(46, 204, 113);
375
- background-color: rgba(46, 204, 113, 0.07);
376
- }
377
-
378
- .callout-success {
379
- border-left-color: rgb(46, 204, 113);
380
- background-color: rgba(46, 204, 113, 0.07);
381
- }
382
-
383
- .callout-danger {
384
- border-left-color: rgb(231, 76, 60);
385
- background-color: rgba(231, 76, 60, 0.07);
386
- }
387
-
388
- .callout .callout-content > :first-child {
389
- margin-top: 0px;
390
- }
391
-
392
- .callout .callout-content > :last-child {
393
- margin-bottom: 0px;
394
- }
395
-
396
- .card .card-title {
397
- font-weight: bold;
398
- font-size: 1.1em;
399
- margin: -1rem -1.5rem 1rem;
400
- padding: 0.75rem 1.5rem;
401
- border-bottom: 1px solid var(--border-color);
402
- }
403
-
404
- .card .card-content > :first-child {
405
- margin-top: 0px;
406
- }
407
-
408
- .card .card-content > :last-child {
409
- margin-bottom: 0px;
410
- }
411
-
412
- .docmd-container.steps {
413
- position: relative;
414
- padding-left: 3rem;
415
- border: medium;
416
- background: none;
417
- box-shadow: none;
418
- }
419
-
420
- .docmd-container.steps::before {
421
- content: "";
422
- position: absolute;
423
- top: 1rem;
424
- bottom: 1rem;
425
- left: 2.5rem;
426
- width: 2px;
427
- background-color: var(--border-color);
428
- }
429
-
430
- .step {
431
- position: relative;
432
- padding-bottom: 1.5rem;
433
- }
434
-
435
- .step:last-child {
436
- padding-bottom: 0px;
437
- }
438
-
439
- .step::before {
440
- content: attr(data-step);
441
- position: absolute;
442
- left: -3rem;
443
- top: 0.1rem;
444
- width: 2.5rem;
445
- height: 2.5rem;
446
- background-color: var(--bg-color);
447
- border: 2px solid var(--border-color);
448
- border-radius: 50%;
449
- display: flex;
450
- align-items: center;
451
- justify-content: center;
452
- font-size: 1rem;
453
- font-weight: 600;
454
- color: var(--link-color);
455
- z-index: 1;
456
- }
457
-
458
- .step-title {
459
- font-size: 1.25rem;
460
- font-weight: 600;
461
- margin-top: 0px;
462
- margin-bottom: 0.5rem;
463
- }
464
-
465
- .step-content > :first-child {
466
- margin-top: 0px;
467
- }
468
-
469
- .step-content > :last-child {
470
- margin-bottom: 0px;
471
- }
472
-
473
- .docmd-container.steps-reset {
474
- counter-reset: step-counter 0;
475
- }
476
-
477
- .docmd-container.steps-reset ol.steps-list {
478
- counter-reset: list-counter 0;
479
- list-style: none;
480
- }
481
-
482
- .docmd-container.steps-reset ol.steps-list > li.step-item {
483
- counter-increment: list-counter 1;
484
- position: relative;
485
- padding-left: 0px;
486
- margin-bottom: 2.5rem;
487
- }
488
-
489
- .docmd-container.steps-reset ol.steps-list > li.step-item::before {
490
- content: counter(list-counter) ".";
491
- font-weight: bold;
492
- margin-right: 0.5em;
493
- font-size: 2rem;
494
- color: var(--accent-color, #007acc);
495
- }
496
-
497
- .docmd-container.steps-reset .docmd-container.steps-reset ol.steps-list {
498
- counter-reset: list-counter 0;
499
- }
500
-
501
- .docmd-container.steps-reset .docmd-container.steps-reset ol.steps-list > li.step-item {
502
- counter-increment: list-counter 1;
503
- }
504
-
505
- .docmd-container.steps-reset .docmd-container.steps-reset ol.steps-list > li.step-item::before {
506
- content: counter(list-counter) ".";
507
- font-weight: bold;
508
- margin-right: 0.5em;
509
- color: var(--accent-color, #007acc);
510
- }
511
-
512
- .docmd-container.steps-reset ol.steps-list[start] {
513
- counter-reset: list-counter 0;
514
- }
515
-
516
- .docmd-container.steps-reset ol.steps-list[start] > li.step-item {
517
- counter-increment: list-counter 1;
518
- }
519
-
520
- .docmd-container.steps-reset ol.steps-list[start] > li.step-item::before {
521
- content: counter(list-counter) ".";
522
- font-weight: bold;
523
- margin-right: 0.5em;
524
- color: var(--accent-color, #007acc);
525
- }
526
-
527
- .docmd-container.steps-reset ol:not(.steps-list) > li::before, .docmd-container.steps-reset ul > li::before, .docmd-container.steps-reset ol:not(.steps-list)::before, .docmd-container.steps-reset ul::before {
528
- width: 0.75rem;
529
- height: 0.75rem;
530
- left: -1.5rem;
531
- top: 0.5rem;
532
- content: "" !important;
533
- }
534
-
535
- .page-footer {
536
- text-align: center;
537
- padding: 20px 30px;
538
- margin-top: auto;
539
- border-top: 1px solid var(--border-color);
540
- font-size: 0.9em;
541
- color: var(--text-color);
542
- background-color: var(--sidebar-bg);
543
- }
544
-
545
- .page-footer a {
546
- color: var(--link-color);
547
- text-decoration: none;
548
- }
549
-
550
- .page-footer a:hover {
551
- text-decoration: underline;
552
- }
553
-
554
- :focus-visible {
555
- outline: 2px solid var(--link-color);
556
- outline-offset: 2px;
557
- }
558
-
559
- :focus:not(:focus-visible) {
560
- outline: currentcolor;
561
- }
562
-
563
- .sidebar nav li a:focus-visible {
564
- background-color: var(--sidebar-link-active-bg);
565
- outline: 2px solid var(--link-color);
566
- outline-offset: -2px;
567
- }
568
-
569
- .theme-toggle-button:focus-visible {
570
- border-color: var(--link-color);
571
- box-shadow: 0 0 0 2px var(--link-color);
572
- }
573
-
574
- @media (max-width: 768px) {
575
- body {
576
- flex-direction: column;
577
- }
578
-
579
- .sidebar {
580
- width: 100%;
581
- height: auto;
582
- position: static;
583
- border-right-width: medium;
584
- border-right-style: none;
585
- border-right-color: currentcolor;
586
- border-bottom: 1px solid var(--border-color);
587
- }
588
-
589
- .sidebar-toggle-button {
590
- display: block;
591
- }
592
-
593
- .main-content-wrapper {
594
- margin-left: 0px;
595
- }
596
-
597
- .content-area {
598
- padding: 15px;
599
- }
600
- }
601
-
602
- .page-navigation {
603
- display: flex;
604
- justify-content: space-between;
605
- margin-top: 3rem;
606
- padding-top: 1.5rem;
607
- border-top: 1px solid var(--border-color);
608
- }
609
-
610
- .prev-page, .next-page {
611
- display: flex;
612
- align-items: center;
613
- text-decoration: none;
614
- color: var(--link-color);
615
- padding: 0.75rem;
616
- border-radius: 6px;
617
- transition: background-color 0.2s;
618
- width: 48%;
619
- max-width: 48%;
620
- }
621
-
622
- .prev-page:hover, .next-page:hover {
623
- background-color: rgba(0, 0, 0, 0.05);
624
- text-decoration: none;
625
- }
626
-
627
- body[data-theme="dark"] .prev-page:hover, body[data-theme="dark"] .next-page:hover {
628
- background-color: rgba(255, 255, 255, 0.05);
629
- }
630
-
631
- .prev-page {
632
- justify-content: flex-start;
633
- }
634
-
635
- .next-page {
636
- justify-content: flex-end;
637
- text-align: right;
638
- }
639
-
640
- .prev-page-placeholder, .next-page-placeholder {
641
- width: 48%;
642
- }
643
-
644
- .prev-page span, .next-page span {
645
- display: flex;
646
- flex-direction: column;
647
- }
648
-
649
- .prev-page small, .next-page small {
650
- font-size: 0.8rem;
651
- opacity: 0.8;
652
- margin-bottom: 0.25rem;
653
- }
654
-
655
- .prev-page strong, .next-page strong {
656
- font-weight: 500;
657
- }
658
-
659
- .page-nav-icon {
660
- width: 1.2rem;
661
- height: 1.2rem;
662
- }
663
-
664
- .prev-page .page-nav-icon {
665
- margin-right: 0.75rem;
666
- }
667
-
668
- .next-page .page-nav-icon {
669
- margin-left: 0.75rem;
670
- }
671
-
672
- .page-footer {
673
- text-align: center;
674
- padding: 20px 30px;
675
- margin-top: auto;
676
- border-top: 1px solid var(--border-color);
677
- font-size: 0.9em;
678
- color: var(--text-color);
679
- background-color: var(--sidebar-bg);
680
- }
681
-
682
- .footer-content {
683
- display: flex;
684
- justify-content: space-between;
685
- align-items: center;
686
- margin: 0px auto;
687
- width: 100%;
688
- }
689
-
690
- .user-footer {
691
- text-align: left;
692
- }
693
-
694
- .branding-footer {
695
- text-align: right;
696
- opacity: 0.9;
697
- font-weight: 500;
698
- }
699
-
700
- .branding-footer svg {
701
- color: rgb(251, 58, 58);
702
- }
703
-
704
- .page-footer a {
705
- color: var(--link-color);
706
- text-decoration: none;
707
- }
708
-
709
- .page-footer a:hover {
710
- text-decoration: underline;
711
- }
712
-
713
- @media (max-width: 768px) {
714
- .footer-content {
715
- flex-direction: column;
716
- gap: 1rem;
717
- }
718
-
719
- .user-footer, .branding-footer {
720
- text-align: center;
721
- }
722
-
723
- .page-navigation {
724
- flex-direction: column;
725
- gap: 1rem;
726
- }
727
-
728
- .prev-page, .next-page, .prev-page-placeholder, .next-page-placeholder {
729
- width: 100%;
730
- max-width: 100%;
731
- }
732
- }
733
-
734
- .content-layout {
735
- display: flex;
736
- gap: 2rem;
737
- width: 100%;
738
- }
739
-
740
- .main-content {
741
- flex: 1 1 0%;
742
- min-inline-size: 0px;
743
- }
744
-
745
- @media (max-width: 1024px) {
746
- .content-layout {
747
- flex-direction: column;
748
- }
749
-
750
- .content-layout {
751
- display: flex;
752
- flex-direction: column-reverse;
753
- }
754
- }
755
-
756
- .toc-container {
757
- margin: 0px;
758
- padding: 0px;
759
- border: medium;
760
- background-color: transparent;
761
- }
762
-
763
- .toc-title {
764
- margin-top: 0px;
765
- margin-bottom: 0.5rem;
766
- font-size: 1rem;
767
- font-weight: bold;
768
- color: var(--text-muted);
769
- }
770
-
771
- .toc-list {
772
- list-style: none;
773
- padding-left: 0px;
774
- margin: 0px;
775
- }
776
-
777
- .toc-item {
778
- margin-bottom: 0.25rem;
779
- line-height: 1.4;
780
- }
781
-
782
- .toc-link {
783
- text-decoration: none;
784
- color: var(--link-color);
785
- display: inline-block;
786
- padding: 0.1rem 0px;
787
- font-size: 0.9rem;
788
- font-weight: 500;
789
- }
790
-
791
- .toc-link:hover {
792
- text-decoration: underline;
793
- }
794
-
795
- .toc-level-2 {
796
- margin-left: 0px;
797
- }
798
-
799
- .toc-level-3 {
800
- margin-left: 0.75rem;
801
- font-size: 0.85rem;
802
- }
803
-
804
- .toc-level-4 {
805
- margin-left: 1.5rem;
806
- font-size: 0.8rem;
807
- }
808
-
809
- .toc-sidebar {
810
- width: 180px;
811
- position: sticky;
812
- top: 2rem;
813
- max-height: calc(-4rem + 100vh);
814
- overflow-y: auto;
815
- align-self: flex-start;
816
- }
817
-
818
- @media (max-width: 1024px) {
819
- .toc-sidebar {
820
- width: 100%;
821
- position: static;
822
- margin-bottom: 1rem;
823
- }
824
- }
825
-
826
- img {
827
- max-width: 100%;
828
- height: auto;
829
- display: block;
830
- margin: 1.5rem 0px;
831
- }
832
-
833
- img.align-left {
834
- float: left;
835
- margin-right: 1.5rem;
836
- margin-bottom: 1rem;
837
- }
838
-
839
- img.align-center {
840
- margin-left: auto;
841
- margin-right: auto;
842
- }
843
-
844
- img.align-right {
845
- float: right;
846
- margin-left: 1.5rem;
847
- margin-bottom: 1rem;
848
- }
849
-
850
- img.size-small {
851
- max-width: 300px;
852
- }
853
-
854
- img.size-medium {
855
- max-width: 500px;
856
- }
857
-
858
- img.size-large {
859
- max-width: 800px;
860
- }
861
-
862
- img.with-border {
863
- border: 1px solid var(--image-border-color);
864
- padding: 4px;
865
- }
866
-
867
- img.with-shadow {
868
- box-shadow: var(--image-shadow);
869
- }
870
-
871
- .docmd-container figure {
872
- margin: 2rem 0px;
873
- }
874
-
875
- .docmd-container figure img {
876
- margin-bottom: 0.5rem;
877
- }
878
-
879
- .docmd-container figcaption {
880
- font-size: 0.9rem;
881
- color: var(--image-caption-text);
882
- text-align: center;
883
- padding: 0.5rem;
884
- background-color: var(--image-caption-bg);
885
- border-radius: 0px 0px 4px 4px;
886
- }
887
-
888
- .docmd-container .image-gallery {
889
- display: grid;
890
- grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
891
- gap: 1rem;
892
- margin: 2rem 0px;
893
- }
894
-
895
- .docmd-container .image-gallery figure {
896
- margin: 0px;
897
- }
898
-
899
- .docmd-container .clear-float::after {
900
- content: "";
901
- display: table;
902
- clear: both;
903
- }
904
-
905
- .docmd-tabs {
906
- margin: 1.5rem 0px;
907
- border: 1px solid var(--border-color);
908
- border-radius: 6px;
909
- overflow: hidden;
910
- box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px;
911
- }
912
-
913
- .docmd-tabs-nav {
914
- display: flex;
915
- background-color: var(--sidebar-bg);
916
- border-bottom: 1px solid var(--border-color);
917
- overflow: auto hidden;
918
- }
919
-
920
- .docmd-tabs-nav-item {
921
- padding: 0.75rem 1.25rem;
922
- cursor: pointer;
923
- border-bottom-width: 3px;
924
- border-bottom-style: solid;
925
- border-bottom-color: transparent;
926
- margin-bottom: -1px;
927
- font-weight: 500;
928
- color: var(--sidebar-text);
929
- white-space: nowrap;
930
- }
931
-
932
- .docmd-tabs-nav-item:hover {
933
- background-color: var(--sidebar-link-active-bg);
934
- }
935
-
936
- .docmd-tabs-nav-item.active {
937
- color: var(--link-color);
938
- border-bottom-color: var(--link-color);
939
- background-color: var(--bg-color);
940
- }
941
-
942
- .docmd-tabs-content {
943
- padding: 1.5rem;
944
- }
945
-
946
- .docmd-tab-pane {
947
- display: none;
948
- }
949
-
950
- .docmd-tab-pane.active {
951
- display: block;
952
- }
953
-
954
- .tabs-container {
955
- margin: 1rem 0px;
956
- border: 1px solid rgb(225, 229, 233);
957
- border-radius: 0.375rem;
958
- }
959
-
960
- .tab-navigation {
961
- display: flex;
962
- background-color: rgb(248, 249, 250);
963
- border-bottom-width: 1px;
964
- border-bottom-style: solid;
965
- border-bottom-color: rgb(225, 229, 233);
966
- border-radius: 0.375rem 0.375rem 0px 0px;
967
- }
968
-
969
- .tab-button {
970
- padding: 0.75rem 1rem;
971
- border-width: medium medium 2px;
972
- border-style: none none solid;
973
- border-color: currentcolor currentcolor transparent;
974
- border-image: none;
975
- background: none;
976
- cursor: pointer;
977
- transition: 0.2s;
978
- }
979
-
980
- .tab-button:hover {
981
- background-color: rgb(233, 236, 239);
982
- }
983
-
984
- .tab-button.active {
985
- border-bottom-color: rgb(0, 123, 255);
986
- background-color: white;
987
- }
988
-
989
- .tab-content {
990
- padding: 1rem;
991
- }
992
-
993
- .tab-panel {
994
- display: none;
995
- }
996
-
997
- .tab-panel.active {
998
- display: block;
999
- }
1000
-
1001
- .docmd-lightbox {
1002
- display: none;
1003
- position: fixed;
1004
- top: 0px;
1005
- left: 0px;
1006
- width: 100%;
1007
- height: 100%;
1008
- background-color: var(--lightbox-bg);
1009
- z-index: 9999;
1010
- justify-content: center;
1011
- align-items: center;
1012
- flex-direction: column;
1013
- }
1014
-
1015
- .docmd-lightbox-content {
1016
- position: relative;
1017
- max-width: 90%;
1018
- max-height: 90%;
1019
- text-align: center;
1020
- }
1021
-
1022
- .docmd-lightbox-content img {
1023
- max-width: 100%;
1024
- max-height: 80vh;
1025
- object-fit: contain;
1026
- margin: 0px auto;
1027
- box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 20px;
1028
- }
1029
-
1030
- .docmd-lightbox-caption {
1031
- color: var(--lightbox-text);
1032
- padding: 1rem;
1033
- font-size: 1rem;
1034
- max-width: 100%;
1035
- }
1036
-
1037
- .docmd-lightbox-close {
1038
- position: absolute;
1039
- top: 20px;
1040
- right: 30px;
1041
- color: var(--lightbox-text);
1042
- font-size: 2.5rem;
1043
- cursor: pointer;
1044
- z-index: 10000;
1045
- }
1046
-
1047
- .docmd-lightbox-close:hover {
1048
- color: rgb(221, 221, 221);
1049
- }
1050
-
1051
- img.lightbox, .docmd-container .image-gallery img {
1052
- cursor: zoom-in;
1053
- }
1054
-
1055
- @media (max-width: 768px) {
1056
- img.align-left, img.align-right {
1057
- float: none;
1058
- margin-left: auto;
1059
- margin-right: auto;
1060
- }
1061
-
1062
- .docmd-container .image-gallery {
1063
- grid-template-columns: 1fr;
1064
- }
1065
- }
1066
-
1067
- .docmd-button {
1068
- display: inline-block;
1069
- padding: 0.6rem 1.2rem;
1070
- margin: 0.5rem;
1071
- border-radius: 6px;
1072
- background-color: var(--link-color);
1073
- color: rgb(255, 255, 255);
1074
- text-decoration: none;
1075
- font-weight: 500;
1076
- transition: background-color 0.2s, transform 0.2s;
1077
- border: medium;
1078
- cursor: pointer;
1079
- }
1080
-
1081
- .docmd-button:hover {
1082
- text-decoration: none;
1083
- filter: brightness(90%);
1084
- transform: translateY(-1px);
1085
- }
1086
-
1087
- /* Sponsor Ribbon */
1088
- .sponsor-ribbon {
1089
- position: fixed;
1090
- bottom: 60px;
1091
- right: 10px;
1092
- z-index: 1000;
1093
- transform: rotate(0deg);
1094
- transform-origin: center;
1095
-
1096
- }
1097
-
1098
- .sponsor-link {
1099
- display: flex;
1100
- align-items: center;
1101
- gap: 0.5rem;
1102
- background: linear-gradient(135deg, #ff6b6b, #ee5a24);
1103
- color: white;
1104
- text-decoration: none;
1105
- padding: 0.75rem 1.5rem;
1106
- border-radius: 5px;
1107
- box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
1108
- font-weight: 600;
1109
- font-size: 0.875rem;
1110
- transition: all 0.3s ease;
1111
- white-space: nowrap;
1112
-
1113
- }
1114
-
1115
- .sponsor-link:hover {
1116
- transform: scale(1.02);
1117
- box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
1118
- color: white;
1119
- text-decoration: none;
1120
-
1121
- }
1122
-
1123
- .sponsor-icon {
1124
- width: 1rem;
1125
- height: 1rem;
1126
- animation: heartbeat 2s ease-in-out infinite;
1127
- }
1128
-
1129
- .sponsor-text {
1130
- font-family: inherit;
1131
- }
1132
-
1133
- @keyframes heartbeat {
1134
- 0%, 100% {
1135
- transform: scale(1);
1136
- }
1137
- 50% {
1138
- transform: scale(1.1);
1139
- }
1140
- }
1141
-
1142
- /* Responsive adjustments */
1143
- @media (max-width: 768px) {
1144
- .sponsor-ribbon {
1145
- bottom: 10px;
1146
- right: 10px;
1147
- transform: rotate(45deg) scale(0.8);
1148
- }
1149
-
1150
- .sponsor-link {
1151
- padding: 0.5rem 1rem;
1152
- font-size: 0.75rem;
1153
- }
1154
-
1155
- .sponsor-icon {
1156
- width: 0.875rem;
1157
- height: 0.875rem;
1158
- }
1159
- }
1160
-
1161
- /* Dark mode adjustments */
1162
- body[data-theme="dark"] .sponsor-link {
1163
- background: linear-gradient(135deg, #ff6b6b, #c44569);
1164
- box-shadow: 0 4px 12px rgba(255, 107, 107, 0.2);
1165
- }
1166
-
1167
- body[data-theme="dark"] .sponsor-link:hover {
1168
- box-shadow: 0 6px 20px rgba(255, 107, 107, 0.3);
1169
- }
7
+ .docmd-container.steps-reset .docmd-container.steps-reset ol.steps-list>li.step-item::before,.docmd-container.steps-reset ol.steps-list>li.step-item::before,.docmd-container.steps-reset ol.steps-list[start]>li.step-item::before{content:counter(list-counter) ".";font-weight:700;margin-right:.5em;color:var(--accent-color,#007acc)}.docmd-tab-pane.active,.logo-link img,.logo-link img.logo-light,.tab-panel.active,.theme-toggle-button .icon-sun,body.sidebar-collapsible .sidebar-toggle-button,html[data-theme=dark] .logo-link img.logo-dark,html[data-theme=dark] .theme-toggle-button .icon-moon,img{display:block}:root{--font-family-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-family-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;--bg-color:#ffffff;--text-color:#333333;--sidebar-bg:#f4f7f9;--sidebar-text:#2c3e50;--sidebar-link-active-bg:#e0e7ec;--sidebar-link-active-parent-bg:#e9eff3;--link-color:#007bff;--border-color:#e0e0e0;--code-bg:#f8f8f8;--code-text:#333;--header-bg:#ffffff;--header-border:#e0e0e0;--image-border-color:#e0e0e0;--image-shadow:0 2px 8px rgba(0, 0, 0, 0.1);--image-caption-bg:#f8f8f8;--image-caption-text:#666;--lightbox-bg:rgba(0, 0, 0, 0.9);--lightbox-text:#fff}[data-theme=dark]{--bg-color:#1a1a1a;--text-color:#e0e0e0;--sidebar-bg:#2c2c2c;--sidebar-text:#bdc3c7;--sidebar-link-active-bg:#3a3a3a;--sidebar-link-active-parent-bg:#343434;--link-color:#58a6ff;--border-color:#444444;--code-bg:#282c34;--code-text:#abb2bf;--header-bg:#1a1a1a;--header-border:#444444;--image-border-color:#444444;--image-shadow:0 2px 8px rgba(0, 0, 0, 0.3);--image-caption-bg:#2c2c2c;--image-caption-text:#bdc3c7;--lightbox-bg:rgba(0, 0, 0, 0.95);--lightbox-text:#fff}body{font-family:var(--font-family-sans);background-color:var(--bg-color);color:var(--text-color);margin:0;display:flex;min-height:100vh;line-height:1.6}code,pre{font-family:var(--font-family-mono);background-color:var(--code-bg)}.sidebar{width:260px;background-color:var(--sidebar-bg);color:var(--sidebar-text);padding:20px;border-right:1px solid var(--border-color);height:100vh;position:fixed;top:0;left:0;overflow-y:auto;box-sizing:border-box;flex-shrink:0}.sidebar h1{font-size:1.5em;margin-top:0;margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid var(--border-color)}.sidebar nav ul{list-style:none;padding:0;margin:0}.sidebar nav li a{display:block;padding:8px 10px;text-decoration:none;color:var(--sidebar-text);border-radius:4px;transition:background-color .2s}.copy-code-button:hover,.docmd-tabs-nav-item:hover,.sidebar nav li a.active,.sidebar nav li a:hover,.theme-toggle-button:hover{background-color:var(--sidebar-link-active-bg)}.sidebar nav li a.active{font-weight:600;color:var(--link-color)}.sidebar nav li.active-parent>a{background-color:var(--sidebar-link-active-parent-bg);font-weight:500;position:relative}.sidebar nav li.active-parent>a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background-color:var(--link-color);opacity:.5}.sidebar nav li.active-parent>a.active::before,div:hover>.copy-code-button,.copy-code-button:hover{opacity:1}.sidebar nav ul ul{padding-left:20px;margin-top:5px}.sidebar-toggle-button{background:0 0;border:1px solid transparent;color:var(--text-color);cursor:pointer;padding:0;margin:.5em 0 0;display:none;border-radius:4px}.sidebar-toggle-button:hover{background-color:var(--sidebar-bg);border-color:var(--border-color)}.sidebar-toggle-button .lucide-icon{width:2em;height:2em}body.sidebar-collapsed .sidebar{transform:translateX(-100%);visibility:hidden}.toc-level-2,body.sidebar-collapsed .main-content-wrapper{margin-left:0}.main-content-wrapper,.sidebar{transition:transform .3s,margin-left .3s,visibility .3s}.main-content-wrapper{margin-left:260px;flex-grow:1;display:flex;flex-direction:column;overflow:hidden}.header-left,.page-header{align-items:center;display:flex}.page-header{padding:15px 30px;border-bottom:1px solid var(--header-border);background-color:var(--header-bg);justify-content:space-between;min-height:2.5em}.header-left{gap:15px}.header-right{display:flex;align-items:center}.page-header h1{margin:0;font-size:1.8em}.theme-toggle-header{padding:8px;background:var(--content-bg);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;transition:.2s}.theme-toggle-header:hover{background:var(--sidebar-bg);border-color:var(--accent-color)}.card .card-title,.sidebar-header{border-bottom:1px solid var(--border-color)}.content-area{padding:2.5rem 2rem;max-width:1200px;margin:0 auto;width:100%;box-sizing:border-box}pre{color:var(--code-text);padding:1em;border-radius:4px;overflow-x:auto;position:relative}code{padding:.2em .4em;border-radius:3px;font-size:.9em}pre code{background-color:transparent;padding:0;font-size:inherit}.sidebar-header{padding-bottom:10px;margin-bottom:10px;text-align:center;height:2.5em}.sidebar-header h1{font-size:1.5em;margin-top:0;margin-bottom:0}.logo-link img{max-height:40px;width:auto;margin:0 auto}.docmd-tab-pane,.logo-link img.logo-dark,.tab-panel,.theme-toggle-button .icon-moon,html[data-theme=dark] .logo-link img.logo-light,html[data-theme=dark] .theme-toggle-button .icon-sun{display:none}.sidebar-nav .lucide-icon{width:1em;height:1em;margin-right:.5em;vertical-align:-.15em;stroke-width:2}.sidebar-nav .nav-external-icon{width:1em;height:1.5em;float:right;margin-left:.3em;opacity:.7}.theme-toggle-button{background:0 0;border:1px solid var(--border-color);color:var(--sidebar-text);padding:8px;border-radius:4px;cursor:pointer;margin-top:.5em;display:flex;align-items:center;justify-content:center;width:100%}.next-page,.prev-page,.step::before{color:var(--link-color);display:flex}.callout .callout-content>:first-child,.card .card-content>:first-child,.docmd-container>:first-child,.step-content>:first-child,.step-title{margin-top:0}.theme-toggle-button .lucide-icon{width:1.2em;height:1.2em}.docmd-container{padding:1rem 1.5rem;margin-bottom:1.5rem;border-radius:6px;border:1px solid var(--border-color);background-color:var(--code-bg)}.callout .callout-content>:last-child,.card .card-content>:last-child,.docmd-container>:last-child,.step-content>:last-child{margin-bottom:0}.callout{border-left-width:5px;background-color:transparent}.callout-title{font-weight:700;margin-bottom:.5em}.callout-info{border-left-color:#3498db;background-color:rgba(52,152,219,.07)}.callout-warning{border-left-color:#f39c12;background-color:rgba(243,156,18,.07)}.callout-success,.callout-tip{border-left-color:#2ecc71;background-color:rgba(46,204,113,.07)}.callout-danger{border-left-color:#e74c3c;background-color:rgba(231,76,60,.07)}.card .card-title{font-weight:700;font-size:1.1em;margin:-1rem -1.5rem 1rem;padding:.75rem 1.5rem}.docmd-container.steps{position:relative;padding-left:3rem;border:none;background:0 0;box-shadow:none}.docmd-container.steps::before{content:"";position:absolute;top:1rem;bottom:1rem;left:2.5rem;width:2px;background-color:var(--border-color)}.step{position:relative;padding-bottom:1.5rem}.step:last-child{padding-bottom:0}.step::before{content:attr(data-step);position:absolute;left:-3rem;top:.1rem;width:2.5rem;height:2.5rem;background-color:var(--bg-color);border:2px solid var(--border-color);border-radius:50%;align-items:center;justify-content:center;font-size:1rem;font-weight:600;z-index:1}.step-title{font-size:1.25rem;font-weight:600;margin-bottom:.5rem}.docmd-container.steps-reset{counter-reset:step-counter 0}.docmd-container.steps-reset ol.steps-list{counter-reset:list-counter 0;list-style:none}.docmd-container.steps-reset ol.steps-list>li.step-item{counter-increment:list-counter 1;position:relative;padding-left:0;margin-bottom:2.5rem}.docmd-container.steps-reset ol.steps-list>li.step-item::before{font-size:2rem}.docmd-container.steps-reset .docmd-container.steps-reset ol.steps-list,.docmd-container.steps-reset ol.steps-list[start]{counter-reset:list-counter 0}.docmd-container.steps-reset .docmd-container.steps-reset ol.steps-list>li.step-item,.docmd-container.steps-reset ol.steps-list[start]>li.step-item{counter-increment:list-counter 1}.docmd-container.steps-reset ol:not(.steps-list)::before,.docmd-container.steps-reset ol:not(.steps-list)>li::before,.docmd-container.steps-reset ul::before,.docmd-container.steps-reset ul>li::before{width:.75rem;height:.75rem;left:-1.5rem;top:.5rem;content:""!important}:focus-visible{outline:2px solid var(--link-color);outline-offset:2px}:focus:not(:focus-visible){outline:currentcolor}.sidebar nav li a:focus-visible{background-color:var(--sidebar-link-active-bg);outline:2px solid var(--link-color);outline-offset:-2px}.theme-toggle-button:focus-visible{border-color:var(--link-color);box-shadow:0 0 0 2px var(--link-color)}.page-footer,.page-navigation{border-top:1px solid var(--border-color)}.page-navigation{display:flex;justify-content:space-between;margin-top:3rem;padding-top:1.5rem}.next-page,.prev-page{align-items:center;text-decoration:none;padding:.75rem;border-radius:6px;transition:background-color .2s;width:48%;max-width:48%}.next-page:hover,.prev-page:hover{background-color:rgba(0,0,0,.05);text-decoration:none}[data-theme=dark] .next-page:hover,[data-theme=dark] .prev-page:hover{background-color:rgba(255,255,255,.05)}.prev-page{justify-content:flex-start}.next-page{justify-content:flex-end;text-align:right}.next-page-placeholder,.prev-page-placeholder{width:48%}.next-page span,.prev-page span{display:flex;flex-direction:column}.next-page small,.prev-page small{font-size:.8rem;opacity:.8;margin-bottom:.25rem}.next-page strong,.prev-page strong{font-weight:500}.page-nav-icon{width:1.2rem;height:1.2rem}.prev-page .page-nav-icon{margin-right:.75rem}.next-page .page-nav-icon{margin-left:.75rem}.page-footer{text-align:center;padding:20px 30px;margin-top:auto;font-size:.9em;color:var(--text-color);background-color:var(--sidebar-bg)}.footer-content{display:flex;justify-content:space-between;align-items:center;margin:0 auto;width:100%}.user-footer{text-align:left}.branding-footer{text-align:right;opacity:.9;font-weight:500}.branding-footer svg{color:#fb3a3a}.page-footer a{color:var(--link-color);text-decoration:none}.page-footer a:hover,.toc-link:hover{text-decoration:underline}.content-layout{display:flex;gap:2rem;width:100%}.main-content{flex:1 1 0%;min-inline-size:0px}.toc-container{margin:0;padding:0;border:none;background-color:transparent}.docmd-container figure img,.toc-title{margin-bottom:.5rem}.toc-title{margin-top:0;font-size:1rem;font-weight:700;color:var(--text-muted)}.toc-list{list-style:none;padding-left:0;margin:0}.toc-item{margin-bottom:.25rem;line-height:1.4}.toc-link{text-decoration:none;color:var(--link-color);display:inline-block;padding:.1rem 0;font-size:.9rem;font-weight:500}.toc-level-3{margin-left:.75rem;font-size:.85rem}.toc-level-4{margin-left:1.5rem;font-size:.8rem}.toc-sidebar{width:180px;position:sticky;top:2rem;max-height:calc(-4rem + 100vh);overflow-y:auto;align-self:flex-start}@media (max-width:1024px){.content-layout{flex-direction:column;display:flex;flex-direction:column-reverse}.toc-sidebar{width:100%;position:static;margin-bottom:1rem}}.docmd-tabs,img{margin:1.5rem 0}img{max-width:100%;height:auto}img.align-left{float:left;margin-right:1.5rem;margin-bottom:1rem}img.align-center{margin-left:auto;margin-right:auto}img.align-right{float:right;margin-left:1.5rem;margin-bottom:1rem}img.size-small{max-width:300px}img.size-medium{max-width:500px}img.size-large{max-width:800px}img.with-border{border:1px solid var(--image-border-color);padding:4px}img.with-shadow{box-shadow:var(--image-shadow)}.docmd-container figure{margin:2rem 0}.docmd-container figcaption{font-size:.9rem;color:var(--image-caption-text);text-align:center;padding:.5rem;background-color:var(--image-caption-bg);border-radius:0 0 4px 4px}.docmd-container .image-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;margin:2rem 0}.docmd-container .image-gallery figure{margin:0}.docmd-container .clear-float::after{content:"";display:table;clear:both}.docmd-tabs{border:1px solid var(--border-color);border-radius:6px;overflow:hidden;box-shadow:rgba(0,0,0,.05) 0 1px 3px}.docmd-tabs-nav{display:flex;background-color:var(--sidebar-bg);border-bottom:1px solid var(--border-color);overflow:auto hidden}.docmd-tabs-nav-item{padding:.75rem 1.25rem;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;font-weight:500;color:var(--sidebar-text);white-space:nowrap}.docmd-tabs-nav-item.active{color:var(--link-color);border-bottom-color:var(--link-color);background-color:var(--bg-color)}.docmd-tabs-content{padding:1.5rem}.tabs-container{margin:1rem 0;border:1px solid #e1e5e9;border-radius:.375rem}.tab-navigation{display:flex;background-color:#f8f9fa;border-bottom:1px solid #e1e5e9;border-radius:.375rem .375rem 0 0}.tab-button{padding:.75rem 1rem;border-width:medium medium 2px;border-style:none none solid;border-color:currentcolor currentcolor transparent;border-image:none;background:0 0;cursor:pointer;transition:.2s}.tab-button:hover{background-color:#e9ecef}.tab-button.active{border-bottom-color:#007bff;background-color:#fff}.tab-content{padding:1rem}.docmd-lightbox{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--lightbox-bg);z-index:9999;justify-content:center;align-items:center;flex-direction:column}.copy-code-button svg,.sponsor-icon{width:1rem;height:1rem}.docmd-lightbox-content{position:relative;max-width:90%;max-height:90%;text-align:center}.docmd-lightbox-content img{max-width:100%;max-height:80vh;object-fit:contain;margin:0 auto;box-shadow:rgba(0,0,0,.3) 0 0 20px}.docmd-lightbox-caption{color:var(--lightbox-text);padding:1rem;font-size:1rem;max-width:100%}.docmd-lightbox-close{position:absolute;top:20px;right:30px;color:var(--lightbox-text);font-size:2.5rem;cursor:pointer;z-index:10000}.docmd-lightbox-close:hover{color:#ddd}.docmd-button,.sponsor-link,.sponsor-link:hover{color:#fff;text-decoration:none}.docmd-container .image-gallery img,img.lightbox{cursor:zoom-in}.docmd-button{display:inline-block;padding:.6rem 1.2rem;margin:.5rem;border-radius:6px;background-color:var(--link-color);font-weight:500;transition:background-color .2s,transform .2s;border:none;cursor:pointer}.docmd-button:hover{text-decoration:none;filter:brightness(90%);transform:translateY(-1px)}.sponsor-ribbon{position:fixed;bottom:60px;right:10px;z-index:1000;transform:rotate(0);transform-origin:center}.sponsor-link{display:flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,#ff6b6b,#ee5a24);padding:.75rem 1.5rem;border-radius:5px;box-shadow:0 4px 12px rgba(255,107,107,.3);font-weight:600;font-size:.875rem;transition:.3s;white-space:nowrap}.sponsor-link:hover{transform:scale(1.02);box-shadow:0 6px 20px rgba(255,107,107,.4)}.sponsor-icon{animation:2s ease-in-out infinite heartbeat}.sponsor-text{font-family:inherit}@keyframes heartbeat{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}@media (max-width:768px){body{flex-direction:column}.sidebar{width:100%;height:auto;position:static;border-right:currentcolor;border-bottom:1px solid var(--border-color)}.sidebar-toggle-button{display:block}.main-content-wrapper{margin-left:0}.content-area{padding:15px}.footer-content,.page-navigation{flex-direction:column;gap:1rem}.branding-footer,.user-footer{text-align:center}.next-page,.next-page-placeholder,.prev-page,.prev-page-placeholder{width:100%;max-width:100%}img.align-left,img.align-right{float:none;margin-left:auto;margin-right:auto}.docmd-container .image-gallery{grid-template-columns:1fr}.sponsor-ribbon{bottom:10px;right:10px}.sponsor-link{padding:.5rem 1rem;font-size:.75rem}.sponsor-icon{width:.875rem;height:.875rem}}html[data-theme=dark] .sponsor-link{background:linear-gradient(135deg,#ff6b6b,#c44569);box-shadow:0 4px 12px rgba(255,107,107,.2)}html[data-theme=dark] .sponsor-link:hover{box-shadow:0 6px 20px rgba(255,107,107,.3)}.copy-code-button{position:absolute;top:.75rem;right:.75rem;padding:.5rem;background-color:var(--code-bg);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;opacity:0;transition:opacity .2s ease-in-out,background-color .2s;color:var(--sidebar-text);display:flex;align-items:center;justify-content:center;z-index:10;pointer-events:auto}.copy-code-button.copied{color:#10b981;opacity:1}