:root{
  --paper:#faf9f6; --ink:#12120f; --ink2:#6c6c63; --hair:#c9c8c0;
  --inv-bg:#12120f; --inv-ink:#faf9f6;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0b0b0a; --ink:#e9e8e1; --ink2:#84837a; --hair:#2e2e29;
    --inv-bg:#e9e8e1; --inv-ink:#0b0b0a;
  }
}
:root[data-theme="dark"]{
  --paper:#0b0b0a; --ink:#e9e8e1; --ink2:#84837a; --hair:#2e2e29;
  --inv-bg:#e9e8e1; --inv-ink:#0b0b0a;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15px; line-height:1.65; font-variant-ligatures:none;
  -webkit-font-smoothing:antialiased;
}
main{max-width:82ch;margin:0 auto;padding:34px 20px 120px}
p{margin:0}
h1,h2,h3{margin:0;font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:none}
a:hover{background:var(--inv-bg);color:var(--inv-ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
code{font:inherit}

.dim{color:var(--ink2)}
.rule{color:var(--hair);white-space:nowrap;overflow:hidden;user-select:none;display:block;line-height:1.2}
.blk{margin:0 0 26px}
.stack{display:flex;flex-direction:column;gap:2px}

.mast{font-weight:700;font-size:clamp(19px,3.6vw,25px);letter-spacing:.16em;text-transform:uppercase;line-height:1.2}
.tag{color:var(--ink2);letter-spacing:.02em;font-size:13px;margin-top:4px}

nav.routes{display:flex;flex-direction:column;gap:1px}
nav.routes a,nav.routes span.dead{display:inline-block;width:fit-content}
nav.routes span.dead{color:var(--ink2)}

.bar{display:flex;flex-wrap:wrap;gap:0 2ch;font-size:14px}
.bar .here{background:var(--inv-bg);color:var(--inv-ink)}

.label{color:var(--ink2);text-transform:lowercase}
.prose{max-width:72ch}
.prose p + p{margin-top:1.05em}
.prose p a{text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;text-decoration-color:var(--ink2)}
.prose p a:hover{text-decoration-color:currentColor}

.cursor{display:inline-block;width:.62ch;height:1.02em;background:currentColor;vertical-align:-.16em;margin-left:.35ch;animation:blink 1.15s step-end infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cursor{animation:none}}

.cmd{border:1px solid var(--hair);padding:12px 14px;overflow-x:auto;white-space:nowrap;font-size:14px}
.cmd .tok{background:var(--inv-bg);color:var(--inv-ink);padding:0 .4ch}
.opts{display:flex;flex-wrap:wrap;gap:0 1.6ch;font-size:14px}
.opts button{font:inherit;background:transparent;border:0;padding:0 .35ch;cursor:pointer;color:var(--ink2)}
.opts button:hover{background:var(--inv-bg);color:var(--inv-ink)}
.opts button[aria-pressed="true"]{background:var(--inv-bg);color:var(--inv-ink)}
.optrow{display:flex;gap:1.2ch;align-items:baseline;flex-wrap:wrap}
.optrow > .label{flex:0 0 auto;min-width:10ch}

pre.out{margin:0;font:inherit;overflow-x:auto;padding:2px 0 6px;white-space:pre}
pre.out b{font-weight:600}
pre.out .g{color:var(--ink2)}

.piece{display:flex;flex-direction:column;gap:3px}
.piece .date{font-size:13px;letter-spacing:.04em;color:var(--ink2)}
.piece h2{font-size:17px;font-weight:600;line-height:1.4;max-width:70ch}
.piece .sub{color:var(--ink2);max-width:70ch;font-size:14px}