···

       
333
       
 
       
        :host {

     

       
334
       
 
       
          display: inline-block;

     

       
335
       
 
       
          vertical-align: baseline;

     

       
336
       
-
       
          font-size: 0.75em;

     

       
337
       
 
       
          font-weight: 500;

     

       
338
       
-
       
          margin: 0 0.25em;

     

       
339
       
 
       
        }

     

       
340
       
 
       


     

       
341
       
 
       
        .ref {

     

       
342
       
 
       
          display: inline-flex;

     

       
343
       
 
       
          align-items: center;

     

       
344
       
 
       
          justify-content: center;

     

       
345
       
-
       
          min-width: 1.5em;

     

       
346
       
-
       
          height: 1.5em;

     

       
347
       
-
       
          padding: 0 0.2em;

     

       
348
       
 
       
          color: var(--accent, #090c8d);

     

       
349
       
 
       
          background: rgba(9, 12, 141, 0.08);

     

       
350
       
 
       
          border: 1px solid rgba(9, 12, 141, 0.2);

     
···

       
354
       
 
       
          transition: all 0.2s ease;

     

       
355
       
 
       
          font-variant-numeric: tabular-nums;

     

       
356
       
 
       
          line-height: 1;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
357
       
 
       
        }

     

       
358
       
 
       


     

       
359
       
 
       
        .ref:hover,

     
···

       
426
       
 
       
      <style>

     

       
427
       
 
       
        :host {

     

       
428
       
 
       
          display: block;

     

       
429
       
-
       
          font-size: 0.9em;

     

       
430
       
-
       
          line-height: 1.45;

     

       
431
       
-
       
          color: var(--text-muted, #666);

     

       
432
       
-
       
          margin: 1.5rem 0;

     

       
433
       
-
       
          padding: 0.75rem 0.75rem 0.75rem 1.5rem;

     

       
434
       
-
       
          background: var(--sidenote-bg, #fafafa);

     

       
435
       
 
       
          border-left: 2px solid var(--border, #e0e0e0);

     

       
436
       
-
       
          border-radius: 4px;

     

       
437
       
 
       
          position: relative;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
438
       
 
       
        }

     

       
439
       
 
       


     

       
440
       
 
       
        /* Hide on desktop - they're shown in the sidebar */

     
···

       
444
       
 
       
          }

     

       
445
       
 
       
        }

     

       
446
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
447
       
 
       
        .sidenote-mobile-number {

     

       
0
       
 
       

     

       
448
       
 
       
          font-weight: bold;

     

       
449
       
 
       
          color: var(--accent, #090c8d);

     

       
450
       
-
       
          margin-right: 0.75em;

     

       
0
       
 
       

     

       
451
       
 
       
        }

     

       
452
       
 
       


     

       
453
       
-
       
        /* Mobile/tablet styles */

     

       
454
       
 
       
        @media (max-width: 999px) {

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
455
       
 
       
          .sidenote-mobile-number {

     

       
456
       
 
       
            display: inline;

     

       
457
       
 
       
          }

     
···

       
463
       
 
       
          }

     

       
464
       
 
       
        }

     

       
465
       
 
       


     

       
0
       
 
       

     

       
466
       
 
       
        ::slotted(*) {

     

       
467
       
-
       
          margin: 0.5rem 0;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
468
       
 
       
        }

     

       
469
       
 
       


     

       
470
       
 
       
        ::slotted(img) {

     

       
0
       
 
       

     

       
471
       
 
       
          width: 100%;

     

       
472
       
 
       
          height: auto;

     

       
473
       
 
       
          border-radius: 4px;

     

       
0
       
 
       

     

       
474
       
 
       
        }

     

       
475
       
 
       


     

       
476
       
 
       
        ::slotted(pre) {

     

       
477
       
 
       
          background: var(--color-code-block-bg, rgba(0, 0, 0, 0.03));

     

       
478
       
-
       
          padding: 0.5rem;

     

       
479
       
 
       
          border-radius: 4px;

     

       
480
       
 
       
          overflow-x: auto;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
481
       
 
       
        }

     

       
482
       
 
       
      </style>

     

       
483
       
-
       
      ${number ? `<span class="sidenote-mobile-number">${number}.</span>` : ''}

     

       
484
       
-
       
      <slot></slot>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
485
       
 
       
    `;

     

       
486
       
 
       
  }

     

       
487
       
 
       
}

     
···

       
489
       
 
       
// Register components with proper hyphenated names

     

       
490
       
 
       
customElements.define('article-sidenotes', ArticleSidenotes);

     

       
491
       
 
       
customElements.define('sidenote-ref', SidenoteRef);

     

       
492
       
-
       
customElements.define('side-note', SideNote);
     

···

       
333
       
 
       
        :host {

     

       
334
       
 
       
          display: inline-block;

     

       
335
       
 
       
          vertical-align: baseline;

     

       
336
       
+
       
          font-size: 0.65em;

     

       
337
       
 
       
          font-weight: 500;

     

       
338
       
+
       
          margin: 0 0.4em;

     

       
339
       
 
       
        }

     

       
340
       
 
       


     

       
341
       
 
       
        .ref {

     

       
342
       
 
       
          display: inline-flex;

     

       
343
       
 
       
          align-items: center;

     

       
344
       
 
       
          justify-content: center;

     

       
345
       
+
       
          width: 1.1em;

     

       
346
       
+
       
          height: 1.1em;

     

       
347
       
+
       
          padding: 0;

     

       
348
       
 
       
          color: var(--accent, #090c8d);

     

       
349
       
 
       
          background: rgba(9, 12, 141, 0.08);

     

       
350
       
 
       
          border: 1px solid rgba(9, 12, 141, 0.2);

     
···

       
354
       
 
       
          transition: all 0.2s ease;

     

       
355
       
 
       
          font-variant-numeric: tabular-nums;

     

       
356
       
 
       
          line-height: 1;

     

       
357
       
+
       
          margin-left: 0.2em;

     

       
358
       
+
       
          margin-right: 0.2em;

     

       
359
       
 
       
        }

     

       
360
       
 
       


     

       
361
       
 
       
        .ref:hover,

     
···

       
428
       
 
       
      <style>

     

       
429
       
 
       
        :host {

     

       
430
       
 
       
          display: block;

     

       
431
       
+
       
          font-size: 0.85rem;

     

       
432
       
+
       
          line-height: 1.5;

     

       
433
       
+
       
          color: var(--text-muted, #777);

     

       
434
       
+
       
          margin: 2.5rem 0 3.5rem 0;

     

       
435
       
+
       
          padding-left: 1.5rem;

     

       
0
       
 
       

     

       
436
       
 
       
          border-left: 2px solid var(--border, #e0e0e0);

     

       
0
       
 
       

     

       
437
       
 
       
          position: relative;

     

       
438
       
+
       
          transition: all 0.2s ease;

     

       
439
       
+
       
          opacity: 0.9;

     

       
440
       
+
       
          font-style: italic;

     

       
441
       
 
       
        }

     

       
442
       
 
       


     

       
443
       
 
       
        /* Hide on desktop - they're shown in the sidebar */

     
···

       
447
       
 
       
          }

     

       
448
       
 
       
        }

     

       
449
       
 
       


     

       
450
       
+
       
        /* Hover effect similar to two-column layout */

     

       
451
       
+
       
        :host(:hover) {

     

       
452
       
+
       
          border-left-color: var(--accent, #090c8d);

     

       
453
       
+
       
          opacity: 1;

     

       
454
       
+
       
        }

     

       
455
       
+
       


     

       
456
       
+
       
        /* Dark mode adjustments */

     

       
457
       
+
       
        @media (prefers-color-scheme: dark) {

     

       
458
       
+
       
          :host {

     

       
459
       
+
       
            color: #999;

     

       
460
       
+
       
          }

     

       
461
       
+
       
        }

     

       
462
       
+
       


     

       
463
       
+
       
        [data-theme="dark"] :host {

     

       
464
       
+
       
          color: #999;

     

       
465
       
+
       
        }

     

       
466
       
+
       


     

       
467
       
 
       
        .sidenote-mobile-number {

     

       
468
       
+
       
          display: inline-block;

     

       
469
       
 
       
          font-weight: bold;

     

       
470
       
 
       
          color: var(--accent, #090c8d);

     

       
471
       
+
       
          margin-right: 0.5em;

     

       
472
       
+
       
          font-size: 0.9em;

     

       
473
       
 
       
        }

     

       
474
       
 
       


     

       
475
       
+
       
        /* Mobile/tablet styles - ensure adequate spacing */

     

       
476
       
 
       
        @media (max-width: 999px) {

     

       
477
       
+
       
          :host {

     

       
478
       
+
       
            /* Provide generous spacing between notes */

     

       
479
       
+
       
            margin: 3rem 0;

     

       
480
       
+
       
            /* Slightly indent from main text */

     

       
481
       
+
       
            margin-left: 1rem;

     

       
482
       
+
       
            /* Don't make it full width to distinguish from main text */

     

       
483
       
+
       
            max-width: calc(100% - 2rem);

     

       
484
       
+
       
          }

     

       
485
       
+
       


     

       
486
       
+
       
          /* Reduce top margin for first sidenote after text */

     

       
487
       
+
       
          p + :host,

     

       
488
       
+
       
          blockquote + :host,

     

       
489
       
+
       
          pre + :host {

     

       
490
       
+
       
            margin-top: 2rem;

     

       
491
       
+
       
          }

     

       
492
       
+
       


     

       
493
       
 
       
          .sidenote-mobile-number {

     

       
494
       
 
       
            display: inline;

     

       
495
       
 
       
          }

     
···

       
501
       
 
       
          }

     

       
502
       
 
       
        }

     

       
503
       
 
       


     

       
504
       
+
       
        /* Slotted content styling - keep content compact */

     

       
505
       
 
       
        ::slotted(*) {

     

       
506
       
+
       
          margin: 0.4rem 0;

     

       
507
       
+
       
          font-size: inherit;

     

       
508
       
+
       
          line-height: inherit;

     

       
509
       
+
       
          color: inherit;

     

       
510
       
+
       
        }

     

       
511
       
+
       


     

       
512
       
+
       
        ::slotted(p:first-child),

     

       
513
       
+
       
        ::slotted(*:first-child) {

     

       
514
       
+
       
          margin-top: 0;

     

       
515
       
+
       
        }

     

       
516
       
+
       


     

       
517
       
+
       
        ::slotted(p:last-child),

     

       
518
       
+
       
        ::slotted(*:last-child) {

     

       
519
       
+
       
          margin-bottom: 0;

     

       
520
       
 
       
        }

     

       
521
       
 
       


     

       
522
       
 
       
        ::slotted(img) {

     

       
523
       
+
       
          display: block;

     

       
524
       
 
       
          width: 100%;

     

       
525
       
 
       
          height: auto;

     

       
526
       
 
       
          border-radius: 4px;

     

       
527
       
+
       
          margin: 0.75rem 0;

     

       
528
       
 
       
        }

     

       
529
       
 
       


     

       
530
       
 
       
        ::slotted(pre) {

     

       
531
       
 
       
          background: var(--color-code-block-bg, rgba(0, 0, 0, 0.03));

     

       
532
       
+
       
          padding: 0.4rem;

     

       
533
       
 
       
          border-radius: 4px;

     

       
534
       
 
       
          overflow-x: auto;

     

       
535
       
+
       
          font-size: 0.85em;

     

       
536
       
+
       
          margin: 0.5rem 0;

     

       
537
       
+
       
        }

     

       
538
       
+
       


     

       
539
       
+
       
        ::slotted(blockquote) {

     

       
540
       
+
       
          border-left: 2px solid var(--accent, #090c8d);

     

       
541
       
+
       
          padding-left: 0.75rem;

     

       
542
       
+
       
          margin-left: 0;

     

       
543
       
+
       
          font-style: italic;

     

       
544
       
+
       
          opacity: 0.9;

     

       
545
       
+
       
        }

     

       
546
       
+
       


     

       
547
       
+
       
        ::slotted(code) {

     

       
548
       
+
       
          font-size: 0.85em;

     

       
549
       
+
       
          padding: 0.1em 0.3em;

     

       
550
       
+
       
          background: rgba(0, 0, 0, 0.05);

     

       
551
       
+
       
          border-radius: 3px;

     

       
552
       
+
       
        }

     

       
553
       
+
       


     

       
554
       
+
       
        @media (prefers-color-scheme: dark) {

     

       
555
       
+
       
          ::slotted(code) {

     

       
556
       
+
       
            background: rgba(255, 255, 255, 0.1);

     

       
557
       
+
       
          }

     

       
558
       
 
       
        }

     

       
559
       
 
       
      </style>

     

       
560
       
+
       
      <div style="padding-left: 0.75rem;">

     

       
561
       
+
       
        ${number ? `<span class="sidenote-mobile-number">${number}.</span>` : ''}

     

       
562
       
+
       
        <slot></slot>

     

       
563
       
+
       
      </div>

     

       
564
       
 
       
    `;

     

       
565
       
 
       
  }

     

       
566
       
 
       
}

     
···

       
568
       
 
       
// Register components with proper hyphenated names

     

       
569
       
 
       
customElements.define('article-sidenotes', ArticleSidenotes);

     

       
570
       
 
       
customElements.define('sidenote-ref', SidenoteRef);

     

       
571
       
+
       
customElements.define('side-note', SideNote);