html, body { overscroll-behavior-y: none; }
body { margin: 0; padding: 0; font: 13px/1.6 Verdana, Geneva, sans-serif; text-transform: lowercase; }
.keep, pre { text-transform: none; }
#star { user-select: none; -webkit-user-select: none; }
:root { --h: 28px; --v: 28px; }   /* the gaps: across, and above and below every divider */
#side { width: calc(210px + 2 * var(--h)); padding: 0; background: #FFFFFF; }
#main { background: #FFFBE0; border: 1px dotted #000; box-shadow: 0 2px 10px rgb(0 0 0 / .12); }
body { background: #FFFFFF; padding-right: var(--h); }   /* a white margin past the right-hand line */
#side > div { position: sticky; top: 0; box-sizing: border-box; width: calc(210px + 2 * var(--h)); max-height: 100vh; overflow-y: auto; padding: var(--v) var(--h); }   /* the whole column scrolls on its own when taller than the window */
#side > div > :last-child { margin-bottom: 0; }
#side pre { width: 30ch; height: calc(15 * 1.15em); font-size: 9px; line-height: 1.15; margin: 0 0 10px; }   /* the star's 30 columns and 15 rows, kept before it draws so nothing moves */
#side ol { padding-left: 0; margin: 1em 0; list-style: none; }
#side ol ol { margin: 0 0 0 .4em; }   /* a file tree: each entry of a sublevel hangs off a line */
#side ol ol > li { position: relative; padding-left: 1.2em; }
#side ol ol > li::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; border-left: 1px solid #000; }
#side ol ol > li::after { content: ""; position: absolute; top: .8em; left: 0; width: .9em; border-top: 1px solid #000; }
#side ol ol > li:last-child::before { bottom: auto; height: .8em; }
#page { max-width: 920px; margin: 0 auto; border-spacing: 0 var(--v); }   /* a sheet on the white page, with white above and below it */
#side > div { margin-top: calc(-1 * var(--v)); }   /* the sidebar stays at the top of the page, not of the sheet */
#main { padding: var(--v) var(--h); }
#main > :first-child { margin-top: 0; }
#main > * { max-width: 46em; box-sizing: border-box; }
h2, h3 { font-size: 1em; }
#version { font-weight: normal; }
#main > h2 { margin: var(--v) calc(-1 * var(--h)) .6em; padding: var(--v) var(--h) 0; border-top: 1px dotted #000; max-width: none; }
#main > h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; scroll-margin-top: calc(var(--v) * 2 + 2em); }   /* its link goes to the top */
#foot { padding: 0; text-align: center; }   /* on the white, centred under the sheet, as on the website */
img { max-width: 100%; height: auto; }
iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
img.shot { display: block; image-rendering: pixelated; border: 1px solid #000; }
img.icon { vertical-align: middle; background: #fff; padding: 2px; border: 1px solid #000; border-radius: 4px; margin: 0 3px; image-rendering: pixelated; }
ul { list-style: none; padding-left: 1.7em; }
ul li { position: relative; margin-bottom: .4em; }
ul li::before { content: ""; position: absolute; left: -1.2em; top: 7px; width: 5px; height: 7px; background: url(img/bullet.png) 0 0 / 5px 7px; image-rendering: pixelated; }
small { font-size: .9em; }
button { box-sizing: border-box; height: calc(1em + 14px); background: #fff; border: 1px solid #000; border-radius: 0; padding: 0 6px; font: inherit; text-transform: lowercase; cursor: pointer; }   /* the same 6px of space on all four sides */
#status.good { color: #1f7a3f; }
#status.bad { color: #b3261e; }
progress { width: 100%; }
pre#log { white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.5 Menlo, Monaco, Consolas, monospace; height: 16em; overflow-y: auto; background: #fff; border: 1px solid #000; padding: 6px 8px; margin: 1em 0 .3em; max-width: calc(40em * 13 / 11); }   /* as wide as the text (40em of 13px) */
pre#log:empty, pre#log:empty + #logbar { display: none; }   /* out of the way until there's something to show */
#logbar { margin: 0 0 1em; text-align: right; }
table.data { border-collapse: collapse; background: #fff; }
table.data td, table.data th { border: 1px solid #000; padding: 4px 7px; }
th { background: #EEEEEE; }
u { text-decoration: underline dotted; text-underline-offset: 3px; }
a[href] { text-decoration: underline dotted; text-underline-offset: 3px; }
@media (max-width: 640px) {
  :root { --h: 16px; --v: 24px; }
  body { background: #FFFBE0; padding-right: 0; }
  #page { border-spacing: 0; }
  #side, #main, #foot { display: block; width: auto; }
  #foot { padding: var(--v) var(--h); background: #fff; border-top: 1px dotted #000; }
  #side { border-bottom: 1px dotted #000; }
  #main { border: 0; box-shadow: none; }
  pre#log { max-width: none; }
  #main > * { max-width: none; }   /* the column is the measure here, so it's always filled */
  #side > div { position: static; margin-top: 0; width: auto; max-height: none; overflow: visible; padding: var(--v) var(--h); display: grid; grid-template-columns: minmax(0, 1fr) max-content minmax(0, 188px) minmax(0, 1fr); }
  #side pre { grid-column: 2; margin: 0 clamp(12px, 5vw, 24px) 0 0; align-self: center; font-size: min(9px, 2.1vw); }   /* shrinks with the screen, so the title always fits beside it */
  #side .name { grid-column: 3; align-self: center; min-width: 0; }
  #side .name span { font-size: min(1em, 3.6vw); white-space: nowrap; }   /* one line at any width, as on the website */
  #side .name img { width: 188px; max-width: 100%; height: auto; }
  #side ol { grid-column: 1 / -1; justify-self: center; margin: 1.4em 0 0; }
}