@font-face {
    font-display: block;
    font-family: 'David Libre';
    src: url('fonts/DavidLibre-Medium.woff2');
}

@font-face {
    font-display: block;
    font-family: 'Miriam Libre';
    src: url('fonts/MiriamLibre-Regular.woff2');
}

@font-face {
    font-display: block;
    font-family: 'Miriam Libre';
    font-weight: bold;
    src: url('fonts/MiriamLibre-Bold.woff2');
}

@font-face {
    font-display: block;
    font-family: Alef;
    src: url('fonts/Alef-Regular.woff2');
}

@font-face {
    font-display: block;
    font-family: Alef;
    font-weight: bold;
    src: url('fonts/Alef-Bold.woff2');
}

@font-face {
    font-display: block;
    font-family: 'Alef Mono';
    src: url('fonts/Alef-Monospace.woff2');
}

@font-face {
    font-display: block;
    font-family: arabic;
    src: url('fonts/ReadexPro-Arabic-Light.woff2');
    unicode-range: U+0600-06ff;
}

@font-face {
    font-family: Arial;  /* macOS, iOS */
    size-adjust: 160%;
    src: local(Arial);
    unicode-range: U+2709;  /* Envelope */
}

@font-face {
    font-family: 'Noto Sans Symbols';  /* Android */
    size-adjust: 160%;
    src: local('NotoSansSymbols-Regular-Subsetted'),  /* Chrome requires filename */
         local('Noto Sans Symbols');
    unicode-range: U+2709;  /* Envelope */
}

:root, ::backdrop {  /* In Chrome (<122) and Firefox (<120) ::backdrop did not inherit from :root. See: https://issues.chromium.org/issues/40569411, https://bugzilla.mozilla.org/show_bug.cgi?id=1855668 */
    --bg: white;
    --fg_rgb: 0 0 0;
    --on: #ff5337;
    --fg_dim: #cdc2b7;
    --fg_verydim: var(--fg_dim);
    --fg_filter: saturate(0);
    --fg_highlight: var(--on);
    --glow: var(--on);
    --glow_blur: 0;
    --inverse_bg: #6580e1;
    --inverse_fg: var(--bg);
    --invert: 1;
    --whitish_rgb: 224 224 224;
    --whitish: rgb(var(--whitish_rgb));

    --column_gap: 4em;
    --columns: 3;
    --h12_letter_spacing: normal;
    --letter_spacing: normal;
    --line_height: 1.5;
    --row_gap: 3em;

    --font: 'Miriam Libre', arabic, Arial, sans-serif;
    --heading_font: 'David Libre', 'Times New Roman', serif;
    --mono_font: 'Courier New', 'Alef Mono', monospace;

    --article_width: 80ch;
    --font_size: 1.2rem;
    --h1_size: clamp(1.5em, 5rem, 10vw);
    --hor_scrollbar_offset: 16px;
    --larger_font: clamp(1.3em, 2rem, 2vw);
    --max_media_height: 85vh;
    --media_width: 85%;
    --frag_dur: 7s;

    /* Following variables must use units that are not relative to elements (i.e. avoid %, em, ex) */
    --main_margin: max(2rem, 5vw);
    --anti_margin: calc(-1 * var(--main_margin));
    --nav_lh: 2rem;
    --nav_pad_top: 4px;
    --nav_pad_bottom: 16px;
}

::selection {
    color: var(--inverse_fg);
    background-color: var(--inverse_bg);
}

body.fullscreen ::selection {
    color: inherit;
    background-color: inherit;
}

html {
    scroll-padding-block: 5rem 3rem;
}

body {
    background-color: var(--bg);
    box-sizing: border-box;
    --fg: rgb(var(--fg_rgb));
    color: var(--fg);
    display: table;
    font-family: var(--font);
    font-size: var(--font_size);
    height: 100vh;
    height: 100dvh;
    letter-spacing: var(--letter_spacing);
    margin: 0;
    padding-inline: var(--main_margin);
    padding-bottom: 8px;
    table-layout: fixed;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    visibility: hidden;
    width: 100%;
}

body.toblack, .toblack ::backdrop {
    --bg: black;
    --fg_rgb: var(--whitish_rgb);
    --invert: 0;
}

body.todark, .todark ::backdrop {
    --bg: #1b1b1b;
    --fg_rgb: 255 255 255;
    --invert: 0;
}

@media (hover: hover) {
    :root {
        --back: 1;
        --icon_dur: .3s;
    }

    :where(:not(input[type=checkbox])):focus-visible, .outline {
        outline-color: var(--on);
        outline-offset: 8px;
        outline-style: solid;
    }

    :is([dir=ltr], :dir(ltr)) {
        --back: -1;
    }

    @keyframes sideways {
        100% { translate: calc(var(--back) * .12rem) }
    }

    @keyframes up {
        100% { translate: 0 -.12rem }
    }

    @keyframes down {
        100% { translate: 0 .12rem }
    }

    @keyframes globe {
        100% { rotate: y 1turn }
    }

    @keyframes deco {
        33% { text-decoration-style: dashed }
        66% { text-decoration-style: dotted }
    }

    a:not(.social *):is(:hover, :focus-visible) {
        animation: var(--icon_dur) infinite deco;
    }

    :is(a:is(:hover, :focus-visible),
    a:is(:hover, :focus-visible) > :is(div, figure):only-of-type,
    a:is(:hover, :focus-visible) > figure:only-of-type > div:only-of-type) > img:only-of-type {
        box-shadow: 0 0 var(--glow_blur) 6.5px var(--glow);
    }

    @keyframes border {
        33% { border-style: dashed }
        66% { border-style: dotted }
    }

    :is([id^=kw_], button.big, button.border, .border button):is(:hover, :focus-visible) {
        animation: var(--icon_dur) infinite border;
        border-color: initial;
    }

    @keyframes github {
        100% { filter: invert(calc(1 - var(--invert))) }
    }

    .github:is(:hover, :focus-visible) {
        animation: var(--icon_dur) infinite alternate github;
    }

    @keyframes instagram {
        100% { filter: blur(1px) }
    }

    .instagram:is(:hover, :focus-visible) {
        animation: var(--icon_dur) infinite alternate instagram;
    }

    label > input[type=checkbox]:is(:hover, :focus-visible) + span, :is(label > span, .sliders button):is(:hover, :focus-visible) {
        color: var(--fg_highlight);
    }

    nav .back[href]:is(:hover, :focus-visible)::before, .mail:is(:hover, :focus-visible) {
        animation: var(--icon_dur) infinite alternate sideways;
    }

    nav .prev[href]:is(:hover, :focus-visible)::before {
        animation: var(--icon_dur) infinite alternate up;
    }

    nav .next[href]:is(:hover, :focus-visible)::before {
        animation: var(--icon_dur) infinite alternate down;
    }

    nav .trans:is(:hover, :focus-visible)::before {
        animation: 1.2s linear infinite globe;
    }

    @keyframes paypal {
        100% { transform: rotate3d(-1, 1, 0, 45deg) }
    }

    .paypal:is(:hover, :focus-visible) {
        animation: var(--icon_dur) infinite alternate paypal;
    }

    @keyframes sponsors {
        100% { scale: 1.15 }
    }

    .sponsors:is(:hover, :focus-visible) {
        animation: var(--icon_dur) infinite alternate sponsors;
    }

    .subscribe:is(:hover, :focus-visible) {
        animation-duration: .7s;
    }

    @keyframes twitter {
        100% { content: attr(data-label)'\fe0e' }
    }

    .twitter:is(:hover, :focus-visible)::after {
        animation: var(--icon_dur) linear infinite alternate twitter;
    }

    .web:is(:hover, :focus-visible) {
        animation: var(--icon_dur) infinite alternate up;
    }

    :where(a, a *, button, button *):focus-visible {
        outline-style: none;
    }
}

a {
    color: inherit;
    text-decoration-color: var(--fg_dim);
    text-underline-position: under;
}

nav * {
    display: inline-block;
}

nav a:not([href]) {
    color: var(--fg_verydim);
}

.abs_center {
    left: 50%;
    position: absolute;
    top: 50%;
    translate: -50% -50%;
}

article:not(.overflow) {
    margin-inline: auto;
    max-width: var(--article_width);
    --media_width: 100%;
}

audio[controls] {
    display: block;
    margin-block: 4rem;
    margin-inline: auto
}

nav[dir=ltr] ~ .author {
    direction: ltr;
}

nav[dir=rtl] ~ .author {
    direction: rtl;
}

.author > :first-child {
    margin-inline-end: 1em;
}

.marquee {
    display: flex;
    gap: 1em;
    justify-content: space-around;
    overflow-x: clip;
}

.marquee > * {
    flex-shrink: 0;
}

blockquote {
    margin-block: 3ex;
}

blockquote, li:not(.mono *), p {
    text-align: justify;
    text-wrap: pretty;
}

button, [id^=kw_] {
    background: var(--fg_dim);
    border-color: var(--fg_dim);
    border-radius: 8px;
    border-style: solid;
    border-width: 2px;
    color: inherit;
    margin: 0;
    padding-block: .1em;
    padding-inline: .5em;
}

[id^=kw_] {
    direction: ltr;  /* For left alignment of the multi-line tooltip title */
    font-size: inherit;
    letter-spacing: initial;
    text-decoration: none;
}

.persistent {
    font-size: 1.5em;
}

.always_on, button.on {
    border-color: var(--on);
}

button:not(:is(.on, .no_active, .no_active *, .sliders *)):active, .always_on, button.on:not(:active) {
    background: var(--on);
    color: var(--inverse_fg);
}

button.big {
    display: block;
    font-size: 1.3em;
    margin-block: 1.5em;
    margin-inline: auto;
    padding-inline: 1em;
}

.toblack button.big {
    color: var(--bg);
}

button, .dim_ref, footer, .marquee, nav, .preface_he, .sliders {
    font-size: initial;
}

button, pre {
    font-family: inherit;
}

.cogram {
    font-size: var(--larger_font);
    line-height: 1.8;
    margin-block: 3ex;
    text-align: center;
}

.contents {
    column-count: var(--columns);
    column-gap: var(--column_gap);
    font-family: var(--heading_font);
    margin-top: var(--row_gap);
}

.row_first {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp((100% - (var(--columns) - 1)*var(--column_gap)) / var(--columns), 250px, 100%), 1fr));
    row-gap: var(--row_gap);
}

.contents > p {
    break-inside: avoid;
    line-height: 1.5;
    margin-top: 0;
    overflow-wrap: break-word;
    text-align: start;
}

.contents > p > a img {
    aspect-ratio: 16 / 9;
    border-color: var(--fg);
    border-width: 1px;
    display: block;
    margin-bottom: 1rem;
    object-fit: cover;
    width: 100%;
}

.contents > p > a[aria-disabled=true] img {
    opacity: .3;
}

.contents > p a[href][aria-disabled=true] {
    text-decoration-color: initial;
}

.contents > p > a:not(:last-child) {
    margin-inline-end: 1em;
}

.contents > p > a ~ span {
    display: inline-block;
}

.contents > p > a ~ span > span {
    display: inline-block;
    font-size: initial;
}

.contents > p > a ~ span > span:not(:last-of-type):after {
    content: ',';
}

.contents > p > a ~ span > span:not(:last-of-type) {
    margin-inline-end: .5em;
}

nav[dir=ltr] ~ .contents {
    direction: ltr;
}

nav[dir=rtl] ~ .contents {
    direction: rtl;
}

.dialog blockquote {
    display: flex;
    gap: 1em;
    margin-block: 3.6ex;
}

.dialog blockquote::after {
    visibility: hidden;
}

.dialog blockquote::before, .dialog blockquote::after {
    font-weight: bold;
}

.dialog blockquote:not([dir=ltr])::before, .dialog blockquote[dir=ltr]::after {
    content: var(--data_name1)':';
}

.dialog blockquote[dir=ltr]::before, .dialog blockquote:not([dir=ltr])::after {
    content: var(--data_name2)':';
}

.dim_ref {
    color: var(--fg_dim);
    display: inline-block;
}

.dim_ref::before, .dim_ref::after {
    display: inline-block;
    text-decoration: none;
}

.dim_ref::before {
    content: '[';
}

.dim_ref::after {
    content: ']';
}

.export {
    border-block-width: 1px;
    border-inline: none;
    margin: 0;
    max-height: 10800px;
    min-height: 1080px;
    width: 100%;
}

.fg_filter, input:is([type=range], [type=checkbox]), .social, nav .trans::before {
    filter: var(--fg_filter);
}

figure {
    margin-inline: 0;
    width: 100%;
}

figcaption:where(:not(.images figure > *)) {
    margin-inline-start: calc((100% - var(--media_width)) / 2);
}

figure > figcaption + * {
    margin-top: .5rem;
}

.images figure img + figcaption {
    font-size: .7em;
    text-align: center;
}

footer {
    display: table-row;
    height: 1px;  /* This is needed when page height is smaller than viewport. Firefox will not work with 0 */
}

footer > div {
    align-items: end;
    color: var(--fg_dim);
    display: flex;
    flex-wrap: wrap;
    gap: .5em 3em;
    justify-content: center;
    margin-top: 4rem;
}

nav[dir=ltr] ~ footer > div {
    direction: ltr;
}

nav[dir=rtl] ~ footer > div {
    direction: rtl;
}

footer, .fullscreen, .kw, nav,
svg image,  /* For Firefox Android */
:is([oncontextmenu*=toggle_fullscreen], [ondblclick*=toggle_fullscreen]):not(body)  /* Note this will miss elements where the handler was added programmatically, as well as different elements passed to the handler */
{
    -webkit-user-select: none;
    user-select: none;
}

.formula {
    text-align: start;
}

.formula :is(bdi, span) {
    display: inline-block;
    font-variant-numeric: slashed-zero;
}

.fullscreen {
    display: grid !important;
    grid-template-columns: 100% !important;
    justify-content: center !important;
    justify-items: center;
}

.fullscreen::backdrop {
    background-color: var(--fullscreen_bg, var(--bg));
}

.fullscreen > :first-child {
    margin-top: auto !important;
    padding-top: 0 !important;
}

.fullscreen > :last-child {
    margin-bottom: auto !important;
    padding-bottom: 0 !important;
}

.images.fullscreen {
    --max_media_height: 100vh;
}

img.fullscreen {
    --fullscreen_bg: black;
}

.github, .paypal {
    filter: invert(var(--invert));
}

h1 {
    margin-block: max(.67em, 2.5 * var(--font_size));
    position: relative;
}

h1 img {
    display: block;
    margin-inline: auto;
    max-height: 7rem;
}

h1, h2 {
    font-family: var(--heading_font);
    font-weight: normal;
    letter-spacing: var(--h12_letter_spacing);
}

h1, .subhuge {
    font-size: var(--h1_size);
}

h2:not(header *) {
    margin-block: 6ex 4ex;
}

h3 {
    font-size: inherit;
    margin-block: 6rem 2rem;
}

article.collection h3 {
    margin-top: 9rem;
}

article.collection h3 a {
    margin-inline-end: 1em;
}


article.collection h3 span {
    display: inline-block;
}

article.collection h3 span::before {
    content: '/';
    margin-inline-end: 1em;
}

header {
    margin-block: calc(var(--nav_pad_top) + var(--nav_pad_bottom) + 2*var(--nav_lh)) calc(var(--h1_size) * .8);
}

nav[dir=ltr] ~ header {
    direction: ltr;
}

nav[dir=rtl] ~ header {
    direction: rtl;
}

header ~ :not(:is(h2, footer)) {
    line-height: var(--line_height);
}

.heading_small {
    font-size: initial;
    margin-bottom: 3rem;
}

.heading_small:not(article *) {
    margin-bottom: 6rem;
}

.huge, .subhuge {
    letter-spacing: .1em;
    text-align: center;
    margin-block: .2ex 1ex;
}

.huge {
    font-size: clamp(var(--h1_size), 10rem, 12vw);
}

iframe {
    background-origin: border-box;
    background-size: contain;
    background-repeat: no-repeat;
    border-color: var(--on);
    border-style: solid;
    margin-top: 3rem;
}

iframe, object {
    display: block;
    margin-inline: auto;
    width: var(--media_width);
}

.images {  /* Note you should order images vertically and use dir to control the horizontal order */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min_width, 300px), 100%), 1fr));
    margin-inline: auto;
    place-items: center;
    width: var(--media_width);
}

.images a {
    line-height: 0;
}

.images a:not(:only-child) {
    display: contents;
}

.images img {
    --images_container_height: min(var(--max_media_height), var(--max_height, var(--max_media_height)));
    max-height: var(--images_container_height);
    object-fit: contain;
    width: 100%;
}

.images > a:not(:only-child) img, .images > img:not(:only-child) {
    --multi_image_height_factor: .9;  /* Assumes difference between images aspect ratios is less than 10% */
    height: calc(var(--multi_image_height_factor) * 100%);
    max-height: calc(var(--images_container_height) / var(--multi_image_height_factor));
}

img {
    font-style: italic;
    white-space: pre-line;
}

input[type=checkbox] {
    margin-inline-end: .5em;
    color-scheme: dark;
}

input::placeholder {
    color: var(--fg_verydim);
}

.kw {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    font-size: .9rem;
    gap: .8rem;
}

#kw_x {
    visibility: hidden;
}

.large {
    font-size: 1.725em;
}

li {
    margin-block: 2ex;
}

li:not(.mono *) {
    margin-inline-start: 40px;
}

.mail {
    font-family: var(--font), 'Noto Sans Symbols';
}

.mono, .number {
    font-family: var(--mono_font);
}

.mono > li {
    letter-spacing: .5em;
}

.mono > li span {
    display: inline-block;
}

@counter-style pad {
    system: extends decimal;
    pad: 2 '\00a0';
    suffix: ': ';
}

ol.mono {
    list-style-position: inside;
    list-style-type: pad;
    padding-inline: 0;
    text-align: center;
}

ul.mono {
    list-style: none;
    padding-inline: 0;
    text-align: center;
}

.narrow_poem {
    line-height: 2;
    margin-block: 8ex;
    margin-inline: auto;
    max-width: fit-content;
}

nav {
    background-color: inherit;
    inset-inline: 0;
    line-height: var(--nav_lh);
    padding-block: var(--nav_pad_top) var(--nav_pad_bottom);
    padding-inline: inherit;
    position: fixed;
    top: 0;
    z-index: 99;
}

@media print {
    nav {
        position: static;
    }
}

nav a::before {
    display: inline-block;
    line-height: 0;
    margin-inline-end: .3rem;
}

nav a:not(.trans)::before {
    text-align: end;
    width: 1.1rem;
}

nav .back * {
    text-decoration: inherit;
    text-decoration-color: inherit;  /* For Safari */
    text-decoration-style: inherit;  /* For Safari */
}

nav .back::before {
    content: '\2192';
}

nav[dir=ltr] .back::before {
    content: '\2190';
}

nav .back:not([href])::before {
    visibility: hidden;
}

nav .prev::before {
    content: '\2191';
}

nav .next::before {
    content: '\2193';
}

nav .trans::before {
    content: '\1f310\fe0e';
    font-size: .7em;
}

nav[dir=ltr] .trans {
    direction: rtl;
    float: right;
}

nav .trans {
    direction: ltr;
    float: left;
}

.nowrap {
    white-space: nowrap;
}

[data-title]:is(ol, ul)::before {
    content: attr(data-title);
    font-weight: bold;
}

ol, ul {
    margin-block: 4ex 6ex;
}

.overflow, .cogram {
    overflow-x: auto;
    padding-bottom: var(--hor_scrollbar_offset);
}

:is(p:not([dir=ltr]), p:not([dir=ltr]) + br) + :is(blockquote, p)[dir=ltr],
:is(p:not([dir=ltr]), p:not([dir=ltr]) + br) + div[dir=ltr] > :is(blockquote, p):first-child,
:is(p[dir=ltr], p[dir=ltr] + br) + :is(blockquote, p):not([dir=ltr]) {
    margin-top: max(6ex, 4.5rem);
}

button#play::before {
    content: '\25b6\fe0e';
}

button#play.on::before {
    content: '\2b1b\fe0e';
}

nav[dir=ltr] ~ * .preface_he {
    display: none;
}

@keyframes psycler {  /* From: https://zzzen.com/psycler/ */
    0% { filter: hue-rotate(5deg) saturate(2) invert(0) }
    50% { filter: hue-rotate(160deg) saturate(8) invert(.25) }
    100% { filter: hue-rotate(350deg) saturate(2) invert(0) }
}

.psycler nav ~ *, span.psycler {
    animation: 8s linear infinite psycler;
}

.punct {
    color: var(--fg_verydim);
}

.rafe, .taam {
    position: relative;
}

.rafe::after, .taam::after {
    font-size: .5em;
    inset-inline: 0;
    position: absolute;
    text-align: center;
    top: -.6em;
}

.rafe::after {
    content: '_';
}

.taam::after {
    content: '>';
}

.ref {
    display: inline-block;
    font-family: var(--font);
    font-size: max(.7rem, .2em);
    vertical-align: text-top;
    text-underline-position: from-font;
    unicode-bidi: plaintext;
}

.ref::after {
    content: attr(href);
}

:is(.ref, .refs > blockquote[id])::first-letter {
    font-size: 0;
}

@keyframes frag {
    0% {background-color: var(--fg_verydim)}
}

.refs blockquote:target {
    animation: var(--frag_dur) ease-in frag;
}

.refs, .refs + p {
    margin-top: 6ex;
}

.refs[data-title]::before {
    content: attr(data-title);
}

:is(nav ~ :nth-last-child(1 of .refs), nav ~ article:last-of-type > :nth-last-child(1 of .refs)):not([data-title])::before {
    content: 'See also:';
    font-weight: bold;
}

html[lang=he] :is(nav:not([dir=ltr]) ~ :nth-last-child(1 of .refs), nav:not([dir=ltr]) ~ article:last-of-type > :nth-last-child(1 of .refs)):not([data-title])::before {
    content: 'ראו גם:';
}

:is(nav[dir=ltr] ~ :nth-last-child(1 of .refs), nav[dir=ltr] ~ article:last-of-type > :nth-last-child(1 of .refs)):not([data-title]) {
    direction: ltr;
}

:is(nav[dir=rtl] ~ :nth-last-child(1 of .refs), nav[dir=rtl] ~ article:last-of-type > :nth-last-child(1 of .refs)):not([data-title]) {
    direction: rtl;
}

.pull {
    font-size: 1.4em;
}

.pull::before {
  content: '"';
}

.pull::after {
  content: '"';
}

.refs > blockquote {
    font-size: initial;
}

.refs:not([dir=rtl]) > blockquote {
    direction: ltr;
}

.refs > blockquote[id]::before {
    content: attr(id) '.';
    padding-inline-end: 1em;
}

.refs > blockquote a {
    unicode-bidi: plaintext;
}

@keyframes show_cursor {
    0%, 100% { cursor: var(--cursor) }
}

.show_cursor {
    animation: 3s show_cursor;
}

[onmousemove*='show_hide_cursor(this)'],  /* Note this will miss elements where the handler was added programmatically */
.hide_cursor {
    cursor: none;
}

.sidebyside {
    display: flex;
    flex-wrap: wrap;
    gap: 1em 2em;
    justify-content: space-evenly;
    justify-self: stretch;
    margin-block: 4ex 5ex;
}

.sidebyside > ::before {
    content: var(--sidebyside_long_line);
    display: block;
    height: 0;
    visibility: hidden;
}

.sliders {
    direction: ltr;
    margin-block: 2ex 3ex;
    padding-top: 3ex;
}

.sliders, .sliders div {
    display: flex;
    flex-wrap: wrap;
    gap: 1em 4em;
    justify-content: center;
}

.sliders button {
    background: none;
    border: none;
    padding: 0;
}

.sliders input[type=range] {
    margin-inline: -1px;
    touch-action: none;
    width: 2.5em;
}

.sliders button + input[type=range] {
    width: 8em;
}

.sliders :is(label:not(.checkboxes > *), .checkboxes) {
    align-items: center;
    display: flex;
    min-width: 12.5em;
}

.sliders :is(label:not(.checkboxes > *), .checkboxes) > :first-child {
    text-align: start;
}

.sliders :is(label:not(.checkboxes > *), .checkboxes) > :last-child {
    text-align: end;
}

.sliders :is(label:not(.checkboxes > *), .checkboxes) > :is(:first-child, :last-child) {
    flex-basis: 0;
    flex-grow: 1;
}

.social {
    display: inline-block;
    font-family: var(--font);
    word-spacing: .2em;
}

.social a {
    display: inline-block;
    font-size: .6em;
    text-decoration: none;
}

.spaced_mono, .cogram {
    font-family: var(--mono_font);
    letter-spacing: .7em;
}

a.sponsors {
    font-size: .8em;
}

@keyframes border_dance {
    100% { background-position: 100% 0, 0 100%, 0 0, 100% 100% }
}

.subscribe {
    animation: 50s linear infinite border_dance;
    background-image: linear-gradient(90deg, currentcolor 50%, transparent 50%), linear-gradient(90deg, currentcolor 50%, transparent 50%), linear-gradient(0, currentcolor 50%, transparent 50%), linear-gradient(0, currentcolor 50%, transparent 50%);
    background-position: 0 0, 100% 100%, 0 100%, 100% 0;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: .5rem 2px, .5rem 2px, 2px .5rem, 2px .5rem;
    padding-bottom: .1em;
    padding-inline: .3em;
}

textarea {
    border: none;
    box-sizing: border-box;
    display: block;
    margin-block: 4em 6em;
    margin-inline: auto;
    padding-block: 0;
    resize: none;
    width: var(--media_width);
}

.textblock:not(.collection *) {
    margin-top: 6rem;
}

.twitter {
    color: transparent;
    position: relative;
}

.twitter::after {
    color: var(--fg);
    content: attr(data-label);
    inset-inline: 0;
    position: absolute;
    text-align: center;
}

.two_col {
    column-count: 2;
    column-gap: min(4em, 5vw);
}

.two_col > :first-child {
    margin-top: 0;
}

ul {
    list-style-type: square;
}

video {
    display: block;
    margin-block: 4.5rem;
    margin-inline: auto;
    max-height: var(--max_media_height);
    width: var(--media_width);
}

video::-webkit-media-controls-enclosure {  /* Not supported in Firefox */
    max-width: calc(var(--max_media_height) * 16 / 9);
}

.video {
    aspect-ratio: 16 / 9;
    border: none;
    margin-block: 3rem;
    max-height: var(--max_media_height);
    max-width: calc(var(--max_media_height) * 16 / 9);
}

.wide_poem {
    line-height: 2;
    white-space: pre-line;
}

@media (forced-colors: active) {
    :root {
        --fg_filter: saturate(0);
    }

    button:not(:is(.on, .no_active, .no_active *)):active, .always_on, .on:not(:active) {
        outline-offset: 0;
        outline-style: solid;
        outline-width: 5px;
    }

    .contents :is(a[aria-disabled=true], a[aria-disabled=true] ~ span) {
        opacity: .5;
    }

    .contents > p {
        color: CanvasText;
        --fg_verydim: GrayText;
    }
}

@media (max-width: 480px) {
    :root {
        --media_width: 100%;
    }

    blockquote, li:not(.mono *), p:where(:not(.textblock)) {
        text-align: start;
    }

    .contents:not(.row_first) {
        --columns: 1;
    }

    .dialog {
        margin-block: 6ex;
        margin-inline: 0;
    }

    .kw, nav {
        margin-inline: calc(var(--anti_margin) + 8px);
    }

    :is(ol, ul):not(.mono) {
        padding-inline-start: 0;
    }

    object {
        margin-inline: var(--anti_margin);
        --media_width: auto;
    }

    .pull, .quote, .refs > blockquote {
        margin-inline: 0;
    }

    .two_col {
        column-count: 1;
    }
}