:root{
  --bg:#ffffff; --ink:#1d1d1d; --strong:#000000; --dim:#757575;
  --ok:#1a7f1e; --fail:#c42b1c;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#000000; --ink:#bdbdbd; --strong:#ffffff; --dim:#7c7c7c;
    --ok:#3cbf3c; --fail:#ff5f56;
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html{
  background:var(--bg); color:var(--ink);
  font:400 clamp(13px, 0.9vw + 10px, 16px)/1.55 "Red Hat Mono", ui-monospace, "DejaVu Sans Mono", "Liberation Mono", monospace;
  -webkit-text-size-adjust:100%;
}
body{padding:max(2.5rem, env(safe-area-inset-top)) 1.25rem max(3rem, env(safe-area-inset-bottom))}
::selection{background:var(--strong);color:var(--bg)}
.page,.pager{max-width:82ch;margin:0 auto}

pre{font:inherit;white-space:pre;overflow-x:auto}
b,strong,h2,dt{color:var(--strong);font-weight:700}
a{color:inherit;text-decoration:underline;text-underline-offset:.18em}
a:hover{background:var(--strong);color:var(--bg);text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
img{display:block;max-width:100%}

/* boot: full-screen console, flush left, gone once booted */
.boot{
  display:none;position:fixed;inset:0;z-index:10;overflow:hidden;
  background:var(--bg);padding:max(.5em, env(safe-area-inset-top)) 1ch;
}
.js:not(.booted) .boot{display:block}
.ok{color:var(--ok)}
.fail{color:var(--fail)}
.dim{color:var(--dim)}

/* man page */
.js .man{display:none}
.js.booted .man{display:block}
.rule{display:flex;justify-content:space-between;gap:2ch}
.rule .mid{color:var(--dim)}
h2{font-size:1em;margin-top:1.6em}
.sec{padding-left:7ch;margin-top:.25em}
.sec p + p{margin-top:.8em}
dl{margin-top:.25em}
dd{padding-left:7ch;margin-bottom:.7em}
.units{margin-top:.25em}
.units .on{color:var(--ok)}
.units .off{color:var(--dim)}
.units .bad{color:var(--fail)}
.foot{margin-top:2.5em}
.note{color:var(--dim)}

/* music grid */
.records{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(16ch, 1fr));
  gap:2em 2ch;margin-top:.8em;
}
a.rec{display:block;text-decoration:none}
a.rec:hover{background:none;color:inherit}
a.rec:hover .t{text-decoration:underline;text-underline-offset:.18em}
.rec .t{display:block;margin-top:.5em;color:var(--strong);font-weight:700}
.rec .a,.rec .k{display:block}
.rec .k{color:var(--dim)}
.cover{display:block;aspect-ratio:1;background:var(--bg)}
.cover img{width:100%;height:100%;object-fit:cover}
.nocover{
  width:100%;height:100%;display:flex;align-items:flex-end;padding:1ch;
  border:1px dashed var(--dim);color:var(--dim);
}

.ss{font-size:1em;color:var(--strong);font-weight:700;margin-top:1.4em}
.ss:first-child{margin-top:.8em}

/* pager (review view) */
.pager{display:none}
.paging .page{display:none}
.paging .pager{display:block}
.rhead{display:grid;grid-template-columns:minmax(0,26ch) 1fr;gap:3ch;margin-top:2em;align-items:end}
.rhead .t{color:var(--strong);font-weight:700}
.rhead .k{color:var(--dim)}
.md{max-width:72ch;margin-top:2em}
.md p{margin-top:.9em}
.md h3,.md h4,.md h5{font-size:1em;color:var(--strong);margin-top:1.6em}
.md ul{list-style:none;margin-top:.9em}
.md li{padding-left:2ch;text-indent:-2ch}
.md li::before{content:"- "}
.md blockquote{margin-top:.9em;padding-left:2ch;border-left:2px solid var(--dim)}
.md hr{border:0;border-top:1px dashed var(--dim);margin:1.8em 0}
.md code{font:inherit;color:var(--strong)}
.pager h2{margin-top:2.2em}
.tracks{list-style:none;margin-top:.5em;max-width:72ch}
.tracks li{display:grid;grid-template-columns:3ch 1fr auto;gap:1ch}
.tracks .n,.tracks .r{color:var(--dim)}
.track{margin-top:2em;scroll-margin-top:1.5em;max-width:72ch}
.track h3{display:flex;justify-content:space-between;gap:2ch;font-size:1em;color:var(--strong)}
.track h3 .r{color:var(--dim);font-weight:400}
.track .md{margin-top:.2em}
.eob{color:var(--dim);margin-top:1.5em}
.status{position:sticky;bottom:0;margin-top:1em;background:var(--bg)}
.status .line{display:flex;gap:2ch;background:var(--strong);color:var(--bg);padding:.1em 1ch}
#p-file{flex:1;min-width:0;white-space:pre;overflow:hidden;text-overflow:ellipsis}
.keys{border-top:1px solid var(--strong);padding:.6em 1ch;white-space:pre-wrap}
.keys[hidden]{display:none}
.status button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:.18em}

/* shell */
.sh{margin-top:2.5em}
.out{white-space:pre-wrap;word-break:break-word}
.prompt{display:flex;flex-wrap:nowrap}
.ps1{color:var(--ok);white-space:pre}
.prompt input{
  flex:1;min-width:4ch;font:inherit;color:var(--strong);
  background:transparent;border:0;outline:0;caret-color:var(--ok);
}

@media (max-width:600px){
  .rule .mid{display:none}
  .sec,dd{padding-left:2ch}
  .records{grid-template-columns:1fr 1fr}
  .rhead{grid-template-columns:1fr}
  .rhead .cover{max-width:30ch}
}