.sidenote-ref { 
    color: #45655b; background-color: rgba(199, 234, 222, 0.32);
    display: inline-block; transition: transform 0.2s;
    font-size: 1rem; vertical-align: top; line-height: 1;
    padding: 0 0.28rem; border-radius: 999px; margin-left: 0.1rem;
    font-family: 'Inter', sans-serif;
}
.sidenote-ref:after { content: "›"; }
.dark .sidenote-ref { color: #c7eade; background-color: rgba(199, 234, 222, 0.18); }
.sidenote { display: none; }
@media (max-width: 1279px) {
    .sidenote-ref:after { content: "⌃"; }
    .sidenote-ref { transform: rotate(180deg); }
    .sidenote-ref.open { transform: rotate(0deg); }
    .sidenote.show { display: block; float: left; clear: both; width: 95%; margin: 0.75rem 2.5%; position: relative; }
}
@media (min-width: 1280px) {
    .sidenote { display: block; float: right; clear: right; width: 17rem; margin-right: -19rem; margin-top: 0.35rem; margin-bottom: 1rem; color: #5a6060; font-family: 'Newsreader', Georgia, serif; }
    .sidenote.hl { background-color: rgba(199, 234, 222, 0.18); }
    .dark .sidenote.hl { background-color: rgba(199, 234, 222, 0.12); }
}