body { font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 11pt; line-height: 1.45;
       max-width: 52em; margin: 2em auto; padding: 0 1em; color: #1f2328; }
h1, h2 { border-bottom: 1px solid #d0d7de; padding-bottom: .3em; }
img { max-width: 100%; max-height: 15cm; width: auto; display: block; margin: 1em auto; }
code, pre { font-family: "DejaVu Sans Mono", Consolas, monospace; font-size: 9.5pt; background: #f6f8fa; }
pre { font-size: 9pt; padding: .8em; border-radius: 6px; overflow-x: auto; white-space: pre-wrap; line-height: 1.2; }
table { border-collapse: collapse; margin: 1em 0; font-size: 10pt; }
th, td { border: 1px solid #d0d7de; padding: .35em .6em; vertical-align: top; }
th { background: #f6f8fa; }
blockquote { border-left: .25em solid #d0d7de; margin: 0; padding: 0 1em; color: #59636e; }
a { color: #0969da; }
/* page.css -- the TSAC page on top of readme.css: one accent (purple), wide figures, the players */
pre, pre code { white-space: pre; }
body { max-width: 74em; }
a { color: #6929c4; }
h1 { border-bottom: 3px solid #6929c4; letter-spacing: -0.01em; }
h2 { border-bottom: 1px solid #c6c6c6; }
blockquote { border-left: .3em solid #6929c4; background: #f6f2ff; color: #161616; padding: .6em 1em; }
img { max-height: none; border: 1px solid #e0e0e0; }
audio { width: 22em; vertical-align: middle; }
th { background: #f4f4f4; }
.num { text-align: right; }
.mid { text-align: center; }
/* the title's flaming-text banner (mkbillboard.py) and its kicker */
h1 img.billboard { display: inline; margin: 0 0 .2em 0; border: none; max-width: 100%; height: auto; vertical-align: middle; image-rendering: pixelated; }
h1 .kick { font-size: .8em; color: #6929c4; vertical-align: middle; }
img[src$="kx2_board.jpg"] { max-width: 760px; }
/* the radio on: stars.js steps --sp on <html> from 0 (the white page) to 1 (deep space) over several seconds, and
   every colour here is a mix of its day and its night value by that number -- the page fades gradually to black,
   the text to light, behind and around the starfield */
html { --sp: 0; background: color-mix(in srgb, #000 calc(var(--sp) * 100%), #fff); }
body { color: color-mix(in srgb, #e0e0f0 calc(var(--sp) * 100%), #1f2328); }
a, h1 .kick { color: color-mix(in srgb, #c4a6ff calc(var(--sp) * 100%), #6929c4); }
h1 { border-bottom-color: color-mix(in srgb, #a77bff calc(var(--sp) * 100%), #6929c4); }
h2 { border-bottom-color: color-mix(in srgb, #3a3a4a calc(var(--sp) * 100%), #c6c6c6); }
blockquote { background: color-mix(in srgb, #24143c calc(var(--sp) * 100%), #f6f2ff);
             color: color-mix(in srgb, #e8e4f4 calc(var(--sp) * 100%), #161616);
             border-left-color: color-mix(in srgb, #a77bff calc(var(--sp) * 100%), #6929c4); }
code, pre { background: color-mix(in srgb, #1a1a26 calc(var(--sp) * 100%), #f6f8fa); }
th { background: color-mix(in srgb, #1c1c28 calc(var(--sp) * 100%), #f4f4f4); }
td, th { border-color: color-mix(in srgb, #3a3a4a calc(var(--sp) * 100%), #d0d7de); }
/* while the radio plays everything on the page turns half transparent -- the text, the tables, the diagrams and
   the photo -- so the stars show through; only the radio bar stays solid */
body > :not(#radiobar, script) { opacity: calc(1 - .5 * var(--sp)); }