@hpcc-js/markdown-it-plugins 1.5.8 → 1.5.10

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,685 +1,685 @@
1
- :root {
2
- --theme-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5 7L8.125 9.5L11.25 7' stroke='black' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
3
- --theme-toggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m10.5,11 2.5-3-2.5-3 M6,8h7' fill='none' stroke='black' stroke-width='2'/%3E%3Crect x='2' y='2' fill='currentColor' height='12' rx='0.5' width='2'/%3E%3C/svg%3E");
4
- --theme-magnifier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath stroke='currentColor' stroke-width='2' fill='none' d='M15,15L10.5,10.5a3,3 0 1,0 -6 -6a3,3 0 1,0 6 6'%3E%3C/path%3E%3C/svg%3E");
5
- --observablehq-max-width: 1440px;
6
- --observablehq-header-height: 2.2rem;
7
- scroll-padding-top: 2.5rem;
8
- }
9
-
10
- :root:has(#observablehq-header) {
11
- scroll-padding-top: calc(var(--observablehq-header-height) + 2.5rem);
12
- }
13
-
14
- body {
15
- max-width: var(--observablehq-max-width);
16
- margin: auto;
17
- }
18
-
19
- #observablehq-main,
20
- #observablehq-header,
21
- #observablehq-footer {
22
- margin: 1rem auto;
23
- }
24
-
25
- #observablehq-header {
26
- position: fixed;
27
- top: 0;
28
- left: calc(max(0rem, (100vw - var(--observablehq-max-width)) / 2) + var(--observablehq-inset-left) + 2rem);
29
- right: calc(max(0rem, (100vw - var(--observablehq-max-width)) / 2) + var(--observablehq-inset-right) + 2rem);
30
- z-index: 1;
31
- display: flex;
32
- align-items: center;
33
- gap: 0.5rem;
34
- height: var(--observablehq-header-height);
35
- margin: 0 -2rem 2rem -2rem;
36
- padding: 1rem 2rem 0.5rem 2rem;
37
- background: var(--theme-background);
38
- border-bottom: solid 1px var(--theme-foreground-faintest);
39
- font: 500 16px var(--sans-serif);
40
- }
41
-
42
- #observablehq-main {
43
- min-height: calc(100vh - 20rem);
44
- position: relative;
45
- z-index: 0;
46
- }
47
-
48
- #observablehq-header~#observablehq-main {
49
- margin-top: calc(var(--observablehq-header-height) + 1.5rem + 2rem);
50
- }
51
-
52
- #observablehq-footer {
53
- display: block;
54
- margin-top: 10rem;
55
- font: 12px var(--sans-serif);
56
- color: var(--theme-foreground-faint);
57
- }
58
-
59
- #observablehq-footer nav {
60
- display: grid;
61
- max-width: 640px;
62
- grid-template-columns: 1fr 1fr;
63
- column-gap: 1rem;
64
- margin-bottom: 1rem;
65
- }
66
-
67
- #observablehq-footer nav a {
68
- display: flex;
69
- flex-direction: column;
70
- border: 1px solid var(--theme-foreground-fainter);
71
- border-radius: 8px;
72
- padding: 1rem;
73
- line-height: 1rem;
74
- text-decoration: none;
75
- }
76
-
77
- #observablehq-footer nav a span {
78
- font-size: 14px;
79
- }
80
-
81
- #observablehq-footer nav a:hover span {
82
- text-decoration: underline;
83
- }
84
-
85
- #observablehq-footer nav a:hover {
86
- border-color: var(--theme-foreground-focus);
87
- }
88
-
89
- #observablehq-footer nav a[rel="prev"] {
90
- grid-column: 1;
91
- align-items: start;
92
- }
93
-
94
- #observablehq-footer nav a[rel="next"] {
95
- grid-column: 2;
96
- align-items: end;
97
- }
98
-
99
- #observablehq-footer nav a::before {
100
- color: var(--theme-foreground-faint);
101
- }
102
-
103
- #observablehq-footer nav a[rel="prev"]::before {
104
- content: "Previous page";
105
- }
106
-
107
- #observablehq-footer nav a[rel="next"]::before {
108
- content: "Next page";
109
- }
110
-
111
- #observablehq-center {
112
- margin: 2rem;
113
- --observablehq-inset-left: 0rem;
114
- --observablehq-inset-right: 0rem;
115
- }
116
-
117
- #observablehq-sidebar {
118
- --observablehq-sidebar-padding-left: calc(max(0rem, (100vw - var(--observablehq-max-width)) / 2));
119
- position: fixed;
120
- background: var(--theme-background-alt);
121
- color: var(--theme-foreground-muted);
122
- font: 14px var(--sans-serif);
123
- visibility: hidden;
124
- font-weight: 500;
125
- width: calc(272px + var(--observablehq-sidebar-padding-left));
126
- z-index: 2;
127
- top: 0;
128
- bottom: 0;
129
- left: -272px;
130
- box-sizing: border-box;
131
- padding: 0 0.5rem 1rem calc(var(--observablehq-sidebar-padding-left) + 0.5rem);
132
- overflow-y: auto;
133
- }
134
-
135
- #observablehq-sidebar ol,
136
- #observablehq-toc ol {
137
- list-style: none;
138
- margin: 0;
139
- padding: 0;
140
- }
141
-
142
- #observablehq-sidebar>ol,
143
- #observablehq-sidebar>details,
144
- #observablehq-sidebar>section {
145
- position: relative;
146
- padding-bottom: 0.5rem;
147
- margin: 0.5rem 0;
148
- border-bottom: solid 1px var(--theme-foreground-faintest);
149
- }
150
-
151
- #observablehq-sidebar>ol:first-child {
152
- position: sticky;
153
- top: 0;
154
- z-index: 1;
155
- font-size: 16px;
156
- font-weight: 700;
157
- padding-top: 1rem;
158
- margin: 0;
159
- color: var(--theme-foreground);
160
- }
161
-
162
- #observablehq-sidebar>ol:first-child::before {
163
- content: "";
164
- position: absolute;
165
- inset: 0 -0.5rem;
166
- background: var(--theme-background-alt);
167
- }
168
-
169
- #observablehq-sidebar>ol:first-child>li {
170
- position: relative;
171
- }
172
-
173
- #observablehq-sidebar>ol:first-child>li>a {
174
- height: calc(var(--observablehq-header-height) - 1rem);
175
- }
176
-
177
- #observablehq-sidebar>ol:last-child,
178
- #observablehq-sidebar>details:last-child,
179
- #observablehq-sidebar>section:last-child {
180
- border-bottom: none;
181
- }
182
-
183
- #observablehq-sidebar summary {
184
- font-weight: 700;
185
- color: var(--theme-foreground);
186
- cursor: default;
187
- }
188
-
189
- #observablehq-sidebar summary::-webkit-details-marker,
190
- #observablehq-sidebar summary::marker {
191
- display: none;
192
- }
193
-
194
- #observablehq-sidebar details summary::after {
195
- position: absolute;
196
- right: 0;
197
- width: 1rem;
198
- height: 1rem;
199
- background: var(--theme-foreground-muted);
200
- content: "";
201
- -webkit-mask: var(--theme-caret);
202
- -webkit-mask-repeat: no-repeat;
203
- -webkit-mask-position: center;
204
- mask: var(--theme-caret);
205
- mask-repeat: no-repeat;
206
- mask-position: center;
207
- padding: 0.5rem;
208
- transition: transform 250ms ease;
209
- transform: rotate(-90deg);
210
- transform-origin: 50% 50%;
211
- }
212
-
213
- #observablehq-sidebar details summary:hover::after {
214
- color: var(--theme-foreground);
215
- }
216
-
217
- #observablehq-sidebar details[open] summary::after {
218
- transform: rotate(0deg);
219
- }
220
-
221
- #observablehq-sidebar-toggle {
222
- position: fixed;
223
- appearance: none;
224
- background: none;
225
- top: 0;
226
- left: 0;
227
- height: 100%;
228
- width: 2rem;
229
- display: flex;
230
- align-items: center;
231
- justify-content: center;
232
- cursor: e-resize;
233
- margin: 0;
234
- color: var(--theme-foreground-muted);
235
- z-index: 1;
236
- }
237
-
238
- #observablehq-sidebar-close {
239
- position: absolute;
240
- top: 1rem;
241
- right: 0;
242
- width: 2rem;
243
- height: var(--observablehq-header-height);
244
- display: flex;
245
- align-items: center;
246
- justify-content: center;
247
- color: var(--theme-foreground-muted);
248
- cursor: w-resize;
249
- z-index: 2;
250
- }
251
-
252
- #observablehq-sidebar-toggle::before,
253
- #observablehq-sidebar-close::before {
254
- content: "";
255
- width: 1rem;
256
- height: 1rem;
257
- background: currentColor;
258
- -webkit-mask: var(--theme-toggle);
259
- mask: var(--theme-toggle);
260
- }
261
-
262
- #observablehq-sidebar-close::before {
263
- transform: scaleX(-1);
264
- }
265
-
266
- #observablehq-sidebar summary,
267
- .observablehq-link a {
268
- display: flex;
269
- padding: 0.5rem 1rem 0.5rem 1.5rem;
270
- margin-left: -0.5rem;
271
- align-items: center;
272
- }
273
-
274
- #observablehq-sidebar summary a {
275
- flex-grow: 1;
276
- color: inherit;
277
- }
278
-
279
- #observablehq-sidebar summary.observablehq-link {
280
- padding: 0;
281
- margin-left: 0;
282
- }
283
-
284
- #observablehq-sidebar details summary:hover,
285
- .observablehq-link-active a,
286
- .observablehq-link a:hover {
287
- background: var(--theme-background);
288
- }
289
-
290
- .observablehq-link a:hover {
291
- color: var(--theme-foreground-focus);
292
- }
293
-
294
- #observablehq-toc {
295
- display: none;
296
- position: fixed;
297
- color: var(--theme-foreground-muted);
298
- font: 400 14px var(--sans-serif);
299
- z-index: 1;
300
- top: 0;
301
- right: calc(max(0rem, (100% - var(--observablehq-max-width)) / 2) + 1rem);
302
- bottom: 0;
303
- overflow-y: auto;
304
- }
305
-
306
- #observablehq-header~#observablehq-toc {
307
- top: calc(var(--observablehq-header-height) + 1.5rem);
308
- }
309
-
310
- #observablehq-toc nav {
311
- width: 192px;
312
- margin: 2rem 0;
313
- padding: 0 1rem;
314
- box-sizing: border-box;
315
- border-left: solid 1px var(--theme-foreground-faintest);
316
- }
317
-
318
- #observablehq-toc div {
319
- font-weight: 700;
320
- color: var(--theme-foreground);
321
- margin-bottom: 0.5rem;
322
- }
323
-
324
- .observablehq-secondary-link a {
325
- display: block;
326
- padding: 0.25rem 0;
327
- }
328
-
329
- .observablehq-link:not(.observablehq-link-active) a[href]:not(:hover),
330
- .observablehq-secondary-link:not(.observablehq-secondary-link-active) a[href]:not(:hover) {
331
- color: inherit;
332
- }
333
-
334
- .observablehq-link-active,
335
- .observablehq-secondary-link-active {
336
- position: relative;
337
- }
338
-
339
- .observablehq-link-active::before,
340
- .observablehq-secondary-link-highlight {
341
- content: "";
342
- position: absolute;
343
- width: 3px;
344
- background: var(--theme-foreground-focus);
345
- }
346
-
347
- .observablehq-link-active::before {
348
- top: 0;
349
- bottom: 0;
350
- left: -0.5rem;
351
- }
352
-
353
- .observablehq-secondary-link-highlight {
354
- left: 1px;
355
- top: 2rem;
356
- height: 0;
357
- transition:
358
- top 150ms ease,
359
- height 150ms ease;
360
- }
361
-
362
- #observablehq-sidebar {
363
- transition:
364
- visibility 150ms 0ms,
365
- left 150ms 0ms ease;
366
- }
367
-
368
- #observablehq-sidebar:focus-within,
369
- #observablehq-sidebar-toggle:checked~#observablehq-sidebar {
370
- left: 0;
371
- visibility: initial;
372
- box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.1);
373
- transition:
374
- visibility 0ms 0ms,
375
- left 150ms 0ms ease;
376
- }
377
-
378
- #observablehq-sidebar-backdrop {
379
- display: none;
380
- position: fixed;
381
- top: 0;
382
- right: 0;
383
- bottom: 0;
384
- left: 0;
385
- z-index: 2;
386
- }
387
-
388
- #observablehq-sidebar-backdrop:has(~ #observablehq-sidebar:focus-within),
389
- #observablehq-sidebar-toggle:checked~#observablehq-sidebar-backdrop {
390
- display: initial;
391
- }
392
-
393
- @media (prefers-color-scheme: dark) {
394
-
395
- #observablehq-sidebar:focus-within,
396
- #observablehq-sidebar-toggle:checked~#observablehq-sidebar {
397
- box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.5);
398
- }
399
- }
400
-
401
- @media (min-width: calc(640px + 6rem + 272px)) {
402
- #observablehq-sidebar {
403
- transition: none !important;
404
- }
405
-
406
- #observablehq-sidebar-toggle:checked~#observablehq-sidebar-backdrop {
407
- display: none;
408
- }
409
-
410
- #observablehq-sidebar-toggle:checked~#observablehq-sidebar,
411
- #observablehq-sidebar-toggle:indeterminate~#observablehq-sidebar {
412
- left: 0;
413
- visibility: initial;
414
- box-shadow: none;
415
- }
416
-
417
- #observablehq-sidebar-toggle:checked~#observablehq-center,
418
- #observablehq-sidebar-toggle:indeterminate~#observablehq-center {
419
- --observablehq-inset-left: calc(272px + 1rem);
420
- --observablehq-inset-right: 1rem;
421
- padding-left: var(--observablehq-inset-left);
422
- padding-right: 1rem;
423
- }
424
- }
425
-
426
- @media (min-width: calc(640px + 5rem + 192px)) {
427
- #observablehq-toc~#observablehq-main {
428
- padding-right: calc(192px + 1rem);
429
- }
430
-
431
- #observablehq-toc {
432
- display: block;
433
- }
434
- }
435
-
436
- @media (min-width: calc(640px + 6rem + 272px)) {
437
-
438
- #observablehq-sidebar-toggle:checked~#observablehq-center #observablehq-toc,
439
- #observablehq-sidebar-toggle:indeterminate~#observablehq-center #observablehq-toc {
440
- display: none;
441
- }
442
-
443
- #observablehq-sidebar-toggle:checked~#observablehq-center #observablehq-toc~#observablehq-main,
444
- #observablehq-sidebar-toggle:indeterminate~#observablehq-center #observablehq-toc~#observablehq-main {
445
- padding-right: 0;
446
- }
447
- }
448
-
449
- @media (min-width: calc(640px + 7rem + 272px + 192px)) {
450
-
451
- #observablehq-sidebar-toggle:checked~#observablehq-center #observablehq-toc,
452
- #observablehq-sidebar-toggle:indeterminate~#observablehq-center #observablehq-toc,
453
- #observablehq-toc {
454
- display: block;
455
- }
456
-
457
- #observablehq-sidebar-toggle:checked~#observablehq-center #observablehq-toc~#observablehq-main,
458
- #observablehq-sidebar-toggle:indeterminate~#observablehq-center #observablehq-toc~#observablehq-main {
459
- padding-right: calc(192px + 1rem);
460
- }
461
- }
462
-
463
- .observablehq-pre-container {
464
- position: relative;
465
- margin: 1rem -1rem;
466
- max-width: 960px;
467
- }
468
-
469
- .observablehq-pre-container::after {
470
- position: absolute;
471
- top: 0;
472
- right: 0;
473
- height: 21px;
474
- font: 12px var(--sans-serif);
475
- color: var(--theme-foreground-muted);
476
- background: linear-gradient(to right, transparent, var(--theme-background-alt) 40%);
477
- padding: 0.5rem 0.5rem 0.5rem 1.5rem;
478
- }
479
-
480
- .observablehq-pre-container[data-language]::after {
481
- content: attr(data-language);
482
- }
483
-
484
- .observablehq-pre-container pre {
485
- padding-right: 4rem;
486
- margin: 0;
487
- max-width: none;
488
- }
489
-
490
- .observablehq-pre-copy {
491
- position: absolute;
492
- top: 0;
493
- right: 0;
494
- background: none;
495
- color: transparent;
496
- border: none;
497
- border-radius: 4px;
498
- padding: 0 8px;
499
- margin: 4px;
500
- height: 29px;
501
- cursor: pointer;
502
- z-index: 1;
503
- display: flex;
504
- align-items: center;
505
- }
506
-
507
- .observablehq-pre-copied::before {
508
- content: "Copied!";
509
- position: absolute;
510
- right: calc(100% + 0.25rem);
511
- background: linear-gradient(to right, transparent, var(--theme-background-alt) 10%);
512
- color: var(--theme-green);
513
- font: var(--font-small);
514
- padding: 4px 8px 4px 16px;
515
- pointer-events: none;
516
- animation-name: observablehq-pre-copied;
517
- animation-duration: 250ms;
518
- animation-direction: alternate;
519
- animation-iteration-count: 2;
520
- }
521
-
522
- @keyframes observablehq-pre-copied {
523
- 0% {
524
- opacity: 0;
525
- transform: translateX(0.5rem);
526
- }
527
-
528
- 50% {
529
- opacity: 1;
530
- }
531
-
532
- 100% {
533
- transform: translateX(0);
534
- }
535
- }
536
-
537
- .observablehq-pre-container[data-copy] .observablehq-pre-copy,
538
- .observablehq-pre-container:hover .observablehq-pre-copy,
539
- .observablehq-pre-container .observablehq-pre-copy:focus {
540
- background: var(--theme-background-alt);
541
- color: var(--theme-foreground-faint);
542
- }
543
-
544
- .observablehq-pre-container .observablehq-pre-copy:hover {
545
- color: var(--theme-foreground-muted);
546
- }
547
-
548
- .observablehq-pre-container .observablehq-pre-copy:active {
549
- color: var(--theme-foreground);
550
- background: var(--theme-foreground-faintest);
551
- }
552
-
553
- #observablehq-sidebar.observablehq-search-results>ol:not(:first-child),
554
- #observablehq-sidebar.observablehq-search-results>details,
555
- #observablehq-sidebar.observablehq-search-results>section {
556
- display: none;
557
- }
558
-
559
- #observablehq-search {
560
- position: relative;
561
- padding: 0.5rem 0 0 0;
562
- display: flex;
563
- align-items: center;
564
- }
565
-
566
- #observablehq-search input {
567
- padding: 6px 4px 6px 2.2em;
568
- width: 100%;
569
- border: none;
570
- border-radius: 4px;
571
- background-color: var(--theme-background);
572
- font-size: 13.3px;
573
- height: 28px;
574
- }
575
-
576
- #observablehq-search input::placeholder {
577
- color: var(--theme-foreground-faint);
578
- }
579
-
580
- #observablehq-search::before {
581
- position: absolute;
582
- left: 0.5rem;
583
- content: "";
584
- width: 1rem;
585
- height: 1rem;
586
- background: currentColor;
587
- -webkit-mask: var(--theme-magnifier);
588
- mask: var(--theme-magnifier);
589
- pointer-events: none;
590
- }
591
-
592
- #observablehq-search::after {
593
- position: absolute;
594
- right: 6px;
595
- content: attr(data-shortcut);
596
- pointer-events: none;
597
- }
598
-
599
- #observablehq-search:focus-within::after {
600
- content: "";
601
- }
602
-
603
- #observablehq-search-results {
604
- --relevance-width: 32px;
605
- position: absolute;
606
- overflow-y: auto;
607
- top: 6.5rem;
608
- left: var(--observablehq-sidebar-padding-left);
609
- right: 0.5rem;
610
- bottom: 0;
611
- }
612
-
613
- #observablehq-search-results a span {
614
- max-width: 184px;
615
- white-space: nowrap;
616
- overflow: hidden;
617
- text-overflow: ellipsis;
618
- }
619
-
620
- #observablehq-search-results div {
621
- text-align: right;
622
- font-size: 10px;
623
- margin: 0.5em;
624
- }
625
-
626
- #observablehq-search-results li {
627
- position: relative;
628
- display: flex;
629
- align-items: center;
630
- }
631
-
632
- #observablehq-search-results a {
633
- flex-grow: 1;
634
- }
635
-
636
- #observablehq-search-results li:after,
637
- #observablehq-search-results a span:after {
638
- content: "";
639
- width: var(--relevance-width);
640
- height: 4px;
641
- position: absolute;
642
- top: 14px;
643
- right: 0.5em;
644
- border-radius: 2px;
645
- background: var(--theme-foreground-muted);
646
- }
647
-
648
- #observablehq-search-results li.observablehq-link-active:after {
649
- background: var(--theme-foreground-focus);
650
- }
651
-
652
- #observablehq-search-results a span:after {
653
- background: var(--theme-foreground-faintest);
654
- }
655
-
656
- #observablehq-search-results li[data-score="0"]:after {
657
- width: calc(var(--relevance-width) * 0.125);
658
- }
659
-
660
- #observablehq-search-results li[data-score="1"]:after {
661
- width: calc(var(--relevance-width) * 0.25);
662
- }
663
-
664
- #observablehq-search-results li[data-score="2"]:after {
665
- width: calc(var(--relevance-width) * 0.4375);
666
- }
667
-
668
- #observablehq-search-results li[data-score="3"]:after {
669
- width: calc(var(--relevance-width) * 0.625);
670
- }
671
-
672
- #observablehq-search-results li[data-score="4"]:after {
673
- width: calc(var(--relevance-width) * 0.8125);
674
- }
675
-
676
- @media print {
677
- #observablehq-center {
678
- padding-left: 1em !important;
679
- }
680
-
681
- #observablehq-sidebar,
682
- #observablehq-footer {
683
- display: none !important;
684
- }
1
+ :root {
2
+ --theme-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5 7L8.125 9.5L11.25 7' stroke='black' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
3
+ --theme-toggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m10.5,11 2.5-3-2.5-3 M6,8h7' fill='none' stroke='black' stroke-width='2'/%3E%3Crect x='2' y='2' fill='currentColor' height='12' rx='0.5' width='2'/%3E%3C/svg%3E");
4
+ --theme-magnifier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath stroke='currentColor' stroke-width='2' fill='none' d='M15,15L10.5,10.5a3,3 0 1,0 -6 -6a3,3 0 1,0 6 6'%3E%3C/path%3E%3C/svg%3E");
5
+ --observablehq-max-width: 1440px;
6
+ --observablehq-header-height: 2.2rem;
7
+ scroll-padding-top: 2.5rem;
8
+ }
9
+
10
+ :root:has(#observablehq-header) {
11
+ scroll-padding-top: calc(var(--observablehq-header-height) + 2.5rem);
12
+ }
13
+
14
+ body {
15
+ max-width: var(--observablehq-max-width);
16
+ margin: auto;
17
+ }
18
+
19
+ #observablehq-main,
20
+ #observablehq-header,
21
+ #observablehq-footer {
22
+ margin: 1rem auto;
23
+ }
24
+
25
+ #observablehq-header {
26
+ position: fixed;
27
+ top: 0;
28
+ left: calc(max(0rem, (100vw - var(--observablehq-max-width)) / 2) + var(--observablehq-inset-left) + 2rem);
29
+ right: calc(max(0rem, (100vw - var(--observablehq-max-width)) / 2) + var(--observablehq-inset-right) + 2rem);
30
+ z-index: 1;
31
+ display: flex;
32
+ align-items: center;
33
+ gap: 0.5rem;
34
+ height: var(--observablehq-header-height);
35
+ margin: 0 -2rem 2rem -2rem;
36
+ padding: 1rem 2rem 0.5rem 2rem;
37
+ background: var(--theme-background);
38
+ border-bottom: solid 1px var(--theme-foreground-faintest);
39
+ font: 500 16px var(--sans-serif);
40
+ }
41
+
42
+ #observablehq-main {
43
+ min-height: calc(100vh - 20rem);
44
+ position: relative;
45
+ z-index: 0;
46
+ }
47
+
48
+ #observablehq-header~#observablehq-main {
49
+ margin-top: calc(var(--observablehq-header-height) + 1.5rem + 2rem);
50
+ }
51
+
52
+ #observablehq-footer {
53
+ display: block;
54
+ margin-top: 10rem;
55
+ font: 12px var(--sans-serif);
56
+ color: var(--theme-foreground-faint);
57
+ }
58
+
59
+ #observablehq-footer nav {
60
+ display: grid;
61
+ max-width: 640px;
62
+ grid-template-columns: 1fr 1fr;
63
+ column-gap: 1rem;
64
+ margin-bottom: 1rem;
65
+ }
66
+
67
+ #observablehq-footer nav a {
68
+ display: flex;
69
+ flex-direction: column;
70
+ border: 1px solid var(--theme-foreground-fainter);
71
+ border-radius: 8px;
72
+ padding: 1rem;
73
+ line-height: 1rem;
74
+ text-decoration: none;
75
+ }
76
+
77
+ #observablehq-footer nav a span {
78
+ font-size: 14px;
79
+ }
80
+
81
+ #observablehq-footer nav a:hover span {
82
+ text-decoration: underline;
83
+ }
84
+
85
+ #observablehq-footer nav a:hover {
86
+ border-color: var(--theme-foreground-focus);
87
+ }
88
+
89
+ #observablehq-footer nav a[rel="prev"] {
90
+ grid-column: 1;
91
+ align-items: start;
92
+ }
93
+
94
+ #observablehq-footer nav a[rel="next"] {
95
+ grid-column: 2;
96
+ align-items: end;
97
+ }
98
+
99
+ #observablehq-footer nav a::before {
100
+ color: var(--theme-foreground-faint);
101
+ }
102
+
103
+ #observablehq-footer nav a[rel="prev"]::before {
104
+ content: "Previous page";
105
+ }
106
+
107
+ #observablehq-footer nav a[rel="next"]::before {
108
+ content: "Next page";
109
+ }
110
+
111
+ #observablehq-center {
112
+ margin: 2rem;
113
+ --observablehq-inset-left: 0rem;
114
+ --observablehq-inset-right: 0rem;
115
+ }
116
+
117
+ #observablehq-sidebar {
118
+ --observablehq-sidebar-padding-left: calc(max(0rem, (100vw - var(--observablehq-max-width)) / 2));
119
+ position: fixed;
120
+ background: var(--theme-background-alt);
121
+ color: var(--theme-foreground-muted);
122
+ font: 14px var(--sans-serif);
123
+ visibility: hidden;
124
+ font-weight: 500;
125
+ width: calc(272px + var(--observablehq-sidebar-padding-left));
126
+ z-index: 2;
127
+ top: 0;
128
+ bottom: 0;
129
+ left: -272px;
130
+ box-sizing: border-box;
131
+ padding: 0 0.5rem 1rem calc(var(--observablehq-sidebar-padding-left) + 0.5rem);
132
+ overflow-y: auto;
133
+ }
134
+
135
+ #observablehq-sidebar ol,
136
+ #observablehq-toc ol {
137
+ list-style: none;
138
+ margin: 0;
139
+ padding: 0;
140
+ }
141
+
142
+ #observablehq-sidebar>ol,
143
+ #observablehq-sidebar>details,
144
+ #observablehq-sidebar>section {
145
+ position: relative;
146
+ padding-bottom: 0.5rem;
147
+ margin: 0.5rem 0;
148
+ border-bottom: solid 1px var(--theme-foreground-faintest);
149
+ }
150
+
151
+ #observablehq-sidebar>ol:first-child {
152
+ position: sticky;
153
+ top: 0;
154
+ z-index: 1;
155
+ font-size: 16px;
156
+ font-weight: 700;
157
+ padding-top: 1rem;
158
+ margin: 0;
159
+ color: var(--theme-foreground);
160
+ }
161
+
162
+ #observablehq-sidebar>ol:first-child::before {
163
+ content: "";
164
+ position: absolute;
165
+ inset: 0 -0.5rem;
166
+ background: var(--theme-background-alt);
167
+ }
168
+
169
+ #observablehq-sidebar>ol:first-child>li {
170
+ position: relative;
171
+ }
172
+
173
+ #observablehq-sidebar>ol:first-child>li>a {
174
+ height: calc(var(--observablehq-header-height) - 1rem);
175
+ }
176
+
177
+ #observablehq-sidebar>ol:last-child,
178
+ #observablehq-sidebar>details:last-child,
179
+ #observablehq-sidebar>section:last-child {
180
+ border-bottom: none;
181
+ }
182
+
183
+ #observablehq-sidebar summary {
184
+ font-weight: 700;
185
+ color: var(--theme-foreground);
186
+ cursor: default;
187
+ }
188
+
189
+ #observablehq-sidebar summary::-webkit-details-marker,
190
+ #observablehq-sidebar summary::marker {
191
+ display: none;
192
+ }
193
+
194
+ #observablehq-sidebar details summary::after {
195
+ position: absolute;
196
+ right: 0;
197
+ width: 1rem;
198
+ height: 1rem;
199
+ background: var(--theme-foreground-muted);
200
+ content: "";
201
+ -webkit-mask: var(--theme-caret);
202
+ -webkit-mask-repeat: no-repeat;
203
+ -webkit-mask-position: center;
204
+ mask: var(--theme-caret);
205
+ mask-repeat: no-repeat;
206
+ mask-position: center;
207
+ padding: 0.5rem;
208
+ transition: transform 250ms ease;
209
+ transform: rotate(-90deg);
210
+ transform-origin: 50% 50%;
211
+ }
212
+
213
+ #observablehq-sidebar details summary:hover::after {
214
+ color: var(--theme-foreground);
215
+ }
216
+
217
+ #observablehq-sidebar details[open] summary::after {
218
+ transform: rotate(0deg);
219
+ }
220
+
221
+ #observablehq-sidebar-toggle {
222
+ position: fixed;
223
+ appearance: none;
224
+ background: none;
225
+ top: 0;
226
+ left: 0;
227
+ height: 100%;
228
+ width: 2rem;
229
+ display: flex;
230
+ align-items: center;
231
+ justify-content: center;
232
+ cursor: e-resize;
233
+ margin: 0;
234
+ color: var(--theme-foreground-muted);
235
+ z-index: 1;
236
+ }
237
+
238
+ #observablehq-sidebar-close {
239
+ position: absolute;
240
+ top: 1rem;
241
+ right: 0;
242
+ width: 2rem;
243
+ height: var(--observablehq-header-height);
244
+ display: flex;
245
+ align-items: center;
246
+ justify-content: center;
247
+ color: var(--theme-foreground-muted);
248
+ cursor: w-resize;
249
+ z-index: 2;
250
+ }
251
+
252
+ #observablehq-sidebar-toggle::before,
253
+ #observablehq-sidebar-close::before {
254
+ content: "";
255
+ width: 1rem;
256
+ height: 1rem;
257
+ background: currentColor;
258
+ -webkit-mask: var(--theme-toggle);
259
+ mask: var(--theme-toggle);
260
+ }
261
+
262
+ #observablehq-sidebar-close::before {
263
+ transform: scaleX(-1);
264
+ }
265
+
266
+ #observablehq-sidebar summary,
267
+ .observablehq-link a {
268
+ display: flex;
269
+ padding: 0.5rem 1rem 0.5rem 1.5rem;
270
+ margin-left: -0.5rem;
271
+ align-items: center;
272
+ }
273
+
274
+ #observablehq-sidebar summary a {
275
+ flex-grow: 1;
276
+ color: inherit;
277
+ }
278
+
279
+ #observablehq-sidebar summary.observablehq-link {
280
+ padding: 0;
281
+ margin-left: 0;
282
+ }
283
+
284
+ #observablehq-sidebar details summary:hover,
285
+ .observablehq-link-active a,
286
+ .observablehq-link a:hover {
287
+ background: var(--theme-background);
288
+ }
289
+
290
+ .observablehq-link a:hover {
291
+ color: var(--theme-foreground-focus);
292
+ }
293
+
294
+ #observablehq-toc {
295
+ display: none;
296
+ position: fixed;
297
+ color: var(--theme-foreground-muted);
298
+ font: 400 14px var(--sans-serif);
299
+ z-index: 1;
300
+ top: 0;
301
+ right: calc(max(0rem, (100% - var(--observablehq-max-width)) / 2) + 1rem);
302
+ bottom: 0;
303
+ overflow-y: auto;
304
+ }
305
+
306
+ #observablehq-header~#observablehq-toc {
307
+ top: calc(var(--observablehq-header-height) + 1.5rem);
308
+ }
309
+
310
+ #observablehq-toc nav {
311
+ width: 192px;
312
+ margin: 2rem 0;
313
+ padding: 0 1rem;
314
+ box-sizing: border-box;
315
+ border-left: solid 1px var(--theme-foreground-faintest);
316
+ }
317
+
318
+ #observablehq-toc div {
319
+ font-weight: 700;
320
+ color: var(--theme-foreground);
321
+ margin-bottom: 0.5rem;
322
+ }
323
+
324
+ .observablehq-secondary-link a {
325
+ display: block;
326
+ padding: 0.25rem 0;
327
+ }
328
+
329
+ .observablehq-link:not(.observablehq-link-active) a[href]:not(:hover),
330
+ .observablehq-secondary-link:not(.observablehq-secondary-link-active) a[href]:not(:hover) {
331
+ color: inherit;
332
+ }
333
+
334
+ .observablehq-link-active,
335
+ .observablehq-secondary-link-active {
336
+ position: relative;
337
+ }
338
+
339
+ .observablehq-link-active::before,
340
+ .observablehq-secondary-link-highlight {
341
+ content: "";
342
+ position: absolute;
343
+ width: 3px;
344
+ background: var(--theme-foreground-focus);
345
+ }
346
+
347
+ .observablehq-link-active::before {
348
+ top: 0;
349
+ bottom: 0;
350
+ left: -0.5rem;
351
+ }
352
+
353
+ .observablehq-secondary-link-highlight {
354
+ left: 1px;
355
+ top: 2rem;
356
+ height: 0;
357
+ transition:
358
+ top 150ms ease,
359
+ height 150ms ease;
360
+ }
361
+
362
+ #observablehq-sidebar {
363
+ transition:
364
+ visibility 150ms 0ms,
365
+ left 150ms 0ms ease;
366
+ }
367
+
368
+ #observablehq-sidebar:focus-within,
369
+ #observablehq-sidebar-toggle:checked~#observablehq-sidebar {
370
+ left: 0;
371
+ visibility: initial;
372
+ box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.1);
373
+ transition:
374
+ visibility 0ms 0ms,
375
+ left 150ms 0ms ease;
376
+ }
377
+
378
+ #observablehq-sidebar-backdrop {
379
+ display: none;
380
+ position: fixed;
381
+ top: 0;
382
+ right: 0;
383
+ bottom: 0;
384
+ left: 0;
385
+ z-index: 2;
386
+ }
387
+
388
+ #observablehq-sidebar-backdrop:has(~ #observablehq-sidebar:focus-within),
389
+ #observablehq-sidebar-toggle:checked~#observablehq-sidebar-backdrop {
390
+ display: initial;
391
+ }
392
+
393
+ @media (prefers-color-scheme: dark) {
394
+
395
+ #observablehq-sidebar:focus-within,
396
+ #observablehq-sidebar-toggle:checked~#observablehq-sidebar {
397
+ box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.5);
398
+ }
399
+ }
400
+
401
+ @media (min-width: calc(640px + 6rem + 272px)) {
402
+ #observablehq-sidebar {
403
+ transition: none !important;
404
+ }
405
+
406
+ #observablehq-sidebar-toggle:checked~#observablehq-sidebar-backdrop {
407
+ display: none;
408
+ }
409
+
410
+ #observablehq-sidebar-toggle:checked~#observablehq-sidebar,
411
+ #observablehq-sidebar-toggle:indeterminate~#observablehq-sidebar {
412
+ left: 0;
413
+ visibility: initial;
414
+ box-shadow: none;
415
+ }
416
+
417
+ #observablehq-sidebar-toggle:checked~#observablehq-center,
418
+ #observablehq-sidebar-toggle:indeterminate~#observablehq-center {
419
+ --observablehq-inset-left: calc(272px + 1rem);
420
+ --observablehq-inset-right: 1rem;
421
+ padding-left: var(--observablehq-inset-left);
422
+ padding-right: 1rem;
423
+ }
424
+ }
425
+
426
+ @media (min-width: calc(640px + 5rem + 192px)) {
427
+ #observablehq-toc~#observablehq-main {
428
+ padding-right: calc(192px + 1rem);
429
+ }
430
+
431
+ #observablehq-toc {
432
+ display: block;
433
+ }
434
+ }
435
+
436
+ @media (min-width: calc(640px + 6rem + 272px)) {
437
+
438
+ #observablehq-sidebar-toggle:checked~#observablehq-center #observablehq-toc,
439
+ #observablehq-sidebar-toggle:indeterminate~#observablehq-center #observablehq-toc {
440
+ display: none;
441
+ }
442
+
443
+ #observablehq-sidebar-toggle:checked~#observablehq-center #observablehq-toc~#observablehq-main,
444
+ #observablehq-sidebar-toggle:indeterminate~#observablehq-center #observablehq-toc~#observablehq-main {
445
+ padding-right: 0;
446
+ }
447
+ }
448
+
449
+ @media (min-width: calc(640px + 7rem + 272px + 192px)) {
450
+
451
+ #observablehq-sidebar-toggle:checked~#observablehq-center #observablehq-toc,
452
+ #observablehq-sidebar-toggle:indeterminate~#observablehq-center #observablehq-toc,
453
+ #observablehq-toc {
454
+ display: block;
455
+ }
456
+
457
+ #observablehq-sidebar-toggle:checked~#observablehq-center #observablehq-toc~#observablehq-main,
458
+ #observablehq-sidebar-toggle:indeterminate~#observablehq-center #observablehq-toc~#observablehq-main {
459
+ padding-right: calc(192px + 1rem);
460
+ }
461
+ }
462
+
463
+ .observablehq-pre-container {
464
+ position: relative;
465
+ margin: 1rem -1rem;
466
+ max-width: 960px;
467
+ }
468
+
469
+ .observablehq-pre-container::after {
470
+ position: absolute;
471
+ top: 0;
472
+ right: 0;
473
+ height: 21px;
474
+ font: 12px var(--sans-serif);
475
+ color: var(--theme-foreground-muted);
476
+ background: linear-gradient(to right, transparent, var(--theme-background-alt) 40%);
477
+ padding: 0.5rem 0.5rem 0.5rem 1.5rem;
478
+ }
479
+
480
+ .observablehq-pre-container[data-language]::after {
481
+ content: attr(data-language);
482
+ }
483
+
484
+ .observablehq-pre-container pre {
485
+ padding-right: 4rem;
486
+ margin: 0;
487
+ max-width: none;
488
+ }
489
+
490
+ .observablehq-pre-copy {
491
+ position: absolute;
492
+ top: 0;
493
+ right: 0;
494
+ background: none;
495
+ color: transparent;
496
+ border: none;
497
+ border-radius: 4px;
498
+ padding: 0 8px;
499
+ margin: 4px;
500
+ height: 29px;
501
+ cursor: pointer;
502
+ z-index: 1;
503
+ display: flex;
504
+ align-items: center;
505
+ }
506
+
507
+ .observablehq-pre-copied::before {
508
+ content: "Copied!";
509
+ position: absolute;
510
+ right: calc(100% + 0.25rem);
511
+ background: linear-gradient(to right, transparent, var(--theme-background-alt) 10%);
512
+ color: var(--theme-green);
513
+ font: var(--font-small);
514
+ padding: 4px 8px 4px 16px;
515
+ pointer-events: none;
516
+ animation-name: observablehq-pre-copied;
517
+ animation-duration: 250ms;
518
+ animation-direction: alternate;
519
+ animation-iteration-count: 2;
520
+ }
521
+
522
+ @keyframes observablehq-pre-copied {
523
+ 0% {
524
+ opacity: 0;
525
+ transform: translateX(0.5rem);
526
+ }
527
+
528
+ 50% {
529
+ opacity: 1;
530
+ }
531
+
532
+ 100% {
533
+ transform: translateX(0);
534
+ }
535
+ }
536
+
537
+ .observablehq-pre-container[data-copy] .observablehq-pre-copy,
538
+ .observablehq-pre-container:hover .observablehq-pre-copy,
539
+ .observablehq-pre-container .observablehq-pre-copy:focus {
540
+ background: var(--theme-background-alt);
541
+ color: var(--theme-foreground-faint);
542
+ }
543
+
544
+ .observablehq-pre-container .observablehq-pre-copy:hover {
545
+ color: var(--theme-foreground-muted);
546
+ }
547
+
548
+ .observablehq-pre-container .observablehq-pre-copy:active {
549
+ color: var(--theme-foreground);
550
+ background: var(--theme-foreground-faintest);
551
+ }
552
+
553
+ #observablehq-sidebar.observablehq-search-results>ol:not(:first-child),
554
+ #observablehq-sidebar.observablehq-search-results>details,
555
+ #observablehq-sidebar.observablehq-search-results>section {
556
+ display: none;
557
+ }
558
+
559
+ #observablehq-search {
560
+ position: relative;
561
+ padding: 0.5rem 0 0 0;
562
+ display: flex;
563
+ align-items: center;
564
+ }
565
+
566
+ #observablehq-search input {
567
+ padding: 6px 4px 6px 2.2em;
568
+ width: 100%;
569
+ border: none;
570
+ border-radius: 4px;
571
+ background-color: var(--theme-background);
572
+ font-size: 13.3px;
573
+ height: 28px;
574
+ }
575
+
576
+ #observablehq-search input::placeholder {
577
+ color: var(--theme-foreground-faint);
578
+ }
579
+
580
+ #observablehq-search::before {
581
+ position: absolute;
582
+ left: 0.5rem;
583
+ content: "";
584
+ width: 1rem;
585
+ height: 1rem;
586
+ background: currentColor;
587
+ -webkit-mask: var(--theme-magnifier);
588
+ mask: var(--theme-magnifier);
589
+ pointer-events: none;
590
+ }
591
+
592
+ #observablehq-search::after {
593
+ position: absolute;
594
+ right: 6px;
595
+ content: attr(data-shortcut);
596
+ pointer-events: none;
597
+ }
598
+
599
+ #observablehq-search:focus-within::after {
600
+ content: "";
601
+ }
602
+
603
+ #observablehq-search-results {
604
+ --relevance-width: 32px;
605
+ position: absolute;
606
+ overflow-y: auto;
607
+ top: 6.5rem;
608
+ left: var(--observablehq-sidebar-padding-left);
609
+ right: 0.5rem;
610
+ bottom: 0;
611
+ }
612
+
613
+ #observablehq-search-results a span {
614
+ max-width: 184px;
615
+ white-space: nowrap;
616
+ overflow: hidden;
617
+ text-overflow: ellipsis;
618
+ }
619
+
620
+ #observablehq-search-results div {
621
+ text-align: right;
622
+ font-size: 10px;
623
+ margin: 0.5em;
624
+ }
625
+
626
+ #observablehq-search-results li {
627
+ position: relative;
628
+ display: flex;
629
+ align-items: center;
630
+ }
631
+
632
+ #observablehq-search-results a {
633
+ flex-grow: 1;
634
+ }
635
+
636
+ #observablehq-search-results li:after,
637
+ #observablehq-search-results a span:after {
638
+ content: "";
639
+ width: var(--relevance-width);
640
+ height: 4px;
641
+ position: absolute;
642
+ top: 14px;
643
+ right: 0.5em;
644
+ border-radius: 2px;
645
+ background: var(--theme-foreground-muted);
646
+ }
647
+
648
+ #observablehq-search-results li.observablehq-link-active:after {
649
+ background: var(--theme-foreground-focus);
650
+ }
651
+
652
+ #observablehq-search-results a span:after {
653
+ background: var(--theme-foreground-faintest);
654
+ }
655
+
656
+ #observablehq-search-results li[data-score="0"]:after {
657
+ width: calc(var(--relevance-width) * 0.125);
658
+ }
659
+
660
+ #observablehq-search-results li[data-score="1"]:after {
661
+ width: calc(var(--relevance-width) * 0.25);
662
+ }
663
+
664
+ #observablehq-search-results li[data-score="2"]:after {
665
+ width: calc(var(--relevance-width) * 0.4375);
666
+ }
667
+
668
+ #observablehq-search-results li[data-score="3"]:after {
669
+ width: calc(var(--relevance-width) * 0.625);
670
+ }
671
+
672
+ #observablehq-search-results li[data-score="4"]:after {
673
+ width: calc(var(--relevance-width) * 0.8125);
674
+ }
675
+
676
+ @media print {
677
+ #observablehq-center {
678
+ padding-left: 1em !important;
679
+ }
680
+
681
+ #observablehq-sidebar,
682
+ #observablehq-footer {
683
+ display: none !important;
684
+ }
685
685
  }