:root { --fg: #aaa; --hi: #e0e0e0; --dim: #5c5c5c; --rule: #1e1e1e; --red: #d9534f; }
html { background: #000; }
body { color: var(--fg); margin: 0 auto; padding: 3ch 2ch 6ch; max-width: 92ch;
       font: 14px/1.65 ui-monospace, Menlo, Consolas, monospace; counter-reset: sec fig tab; }
a { color: var(--hi); text-decoration: underline; text-decoration-color: #444;
    text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--hi); }
pre { white-space: pre-wrap; margin: 0; font: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { color: var(--hi); font-size: inherit; font-weight: normal; }
h1 { font-size: 17px; margin: 2em 0 .3em; letter-spacing: .03em; }
h2 { margin: 3em 0 1em; text-transform: uppercase; letter-spacing: .12em; counter-increment: sec; }
h2::before { content: "\00a7" counter(sec) "  "; color: var(--dim); }
h2.plain { counter-increment: none; }
h2.plain::before { content: ""; }
h3 { margin: 2em 0 .6em; }
h3::before { content: "> "; color: var(--dim); }
hr { border: 0; border-top: 1px dashed #2a2a2a; margin: 2.5em 0; }
.dim { color: var(--dim); }
.red { color: var(--red); }
.meta { color: var(--dim); margin-bottom: 2em; }

header.site pre { color: var(--dim); }
header.site .brand { color: var(--hi); text-decoration: none; letter-spacing: .05em; }
.topline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5em 3ch; }
.topline .links { display: flex; flex-wrap: wrap; gap: .5em 3ch; color: var(--dim); }
.ca { display: inline-block; min-width: 44ch; border-bottom: 1px dashed #444; color: var(--hi);
      cursor: default; vertical-align: bottom; }
.ca:not(:empty) { cursor: copy; }
nav { margin: 1.2em 0 0; }
nav a { color: var(--fg); text-decoration: none; margin-right: 1.5ch; }
nav a::before { content: "["; color: var(--dim); }
nav a::after { content: "]"; color: var(--dim); }
nav a:hover, nav a[aria-current] { color: var(--red); }
.dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--red);
       margin-right: .6ch; vertical-align: .05em; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }

.statusbar { position: sticky; top: 0; z-index: 1; background: #000; margin: 1.5em 0;
             padding: .6em 1.5ch; border: 1px solid #3a1616; color: var(--hi); }
.statusbar.off { border-color: #333; color: var(--dim); }
.statusbar.off .dot { background: #555; animation: none; }
.live-note { color: var(--hi); }
.matrix { color: var(--dim); margin: 1em 0 .4em; }
.matrix .done { color: var(--fg); }
.matrix .now { color: var(--red); animation: pulse 1s steps(1) infinite; }
.matrix .next { color: var(--hi); }
.now-box { border: 1px solid #3a1616; padding: 1em 1.5ch; margin: 1.5em 0 3em; }
.now-box .label { color: var(--red); letter-spacing: .12em; }
.now-box.idle { border-color: #262626; }
.now-box.idle .label { color: var(--dim); }

.pager { display: flex; flex-wrap: wrap; align-items: center; gap: .4em 1ch; margin: 1.5em 0; }
.pager .info { color: var(--dim); margin-right: 2ch; }
.pager button[aria-current] { color: var(--red); border-color: #5a2020; }
.pager button:disabled { color: #333; border-color: #1a1a1a; cursor: default; }
.toc { margin: 1em 0 2em; }
.toc a { display: inline-block; margin: 0 2ch .3em 0; text-decoration: none; color: var(--fg); }
.toc a[aria-current] { color: var(--red); }
.toc a .n { color: var(--dim); }
.finding { color: var(--hi); border-left: 1px solid var(--red); padding-left: 2ch; margin: 1em 0 1.5em; }
.finding::before { content: "FINDING  "; color: var(--red); letter-spacing: .1em; }
body.paged h2::before, body.paged figcaption::before, body.paged .caption::before { content: none; }
body.paged h2 .n, body.paged figcaption .n, body.paged .caption .n { color: var(--fg); }

.abstract { border-left: 1px solid #333; padding: .2em 0 .2em 2ch; margin: 1.5em 0 2em; }
.abstract::before { content: "ABSTRACT"; display: block; color: var(--dim);
                    letter-spacing: .15em; margin-bottom: .5em; }
.note { border: 1px dashed #333; padding: .8em 1.5ch; margin: 1.5em 0; }
.note::before { content: "NOTE  "; color: var(--red); letter-spacing: .1em; }
blockquote { margin: 1em 0; padding-left: 2ch; border-left: 1px solid var(--red); color: var(--hi); }

figure { margin: 2em 0; counter-increment: fig; }
figure img { width: 100%; display: block; border: 1px solid var(--rule); }
figcaption { color: var(--dim); margin-top: .6em; }
figcaption::before { content: "Figure " counter(fig) ".  "; color: var(--fg); }

table { border-collapse: collapse; width: 100%; margin: 1em 0 .5em; }
th, td { border: 1px solid var(--rule); padding: .3em 1ch; text-align: left; vertical-align: top; }
th { color: var(--hi); font-weight: normal; }
td.num, th.num { text-align: right; }
.caption { color: var(--dim); margin-bottom: 2em; counter-increment: tab; }
.caption::before { content: "Table " counter(tab) ".  "; color: var(--fg); }

ol.refs { padding-left: 4ch; }
ol.refs li { margin-bottom: .6em; }
ul { padding-left: 3ch; }
li { margin-bottom: .3em; }

.run { margin: 2em 0; }
.run summary { cursor: pointer; color: var(--dim); }
select, button { background: #000; color: var(--fg); border: 1px solid #333;
                 font: inherit; padding: .15em .8ch; }
button:hover { color: var(--hi); border-color: #555; cursor: pointer; }

#cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

footer { margin-top: 5em; padding-top: 1em; border-top: 1px solid var(--rule); color: var(--dim); }