:root {
  --bg:   #fcfcfa;
  --fg:   #1a1a18;
  --dim:  #9c9c93;
  --rule: #e2e2da;
  --link: #1a3fb0;
}
/* dark tokens, defined once, applied in two places:
   - system preference, unless the reader has explicitly chosen light
   - an explicit dark choice, which wins over the system either way      */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:   #0e0e0d;
    --fg:   #d8d8d0;
    --dim:  #6b6b62;
    --rule: #232320;
    --link: #86aae8;
  }
}
:root[data-theme="dark"] {
  --bg:   #0e0e0d;
  --fg:   #d8d8d0;
  --dim:  #6b6b62;
  --rule: #232320;
  --link: #86aae8;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  padding: 3.5rem 1.5rem 6rem;
  background: var(--bg);
  color: var(--fg);
  font: 13.5px/1.65 ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "DejaVu Sans Mono", monospace;
  -webkit-text-size-adjust: 100%;
}

main { max-width: 84ch; margin: 0 auto; }

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:focus-visible { outline: 1px solid var(--link); outline-offset: 2px; }

/* --- masthead ---------------------------------------------------------- */
header { margin-bottom: 2.25rem; }
h1 { font: inherit; font-weight: normal; margin: 0; }
h1 a { color: var(--fg); text-decoration: none; }

/* The mark sits on the title's own line, sized off the heading rather
   than in pixels, so it tracks the type at any zoom. Teal is the tab
   icon's colour, so the two read as the same object. */
.mark {
  /* width stated rather than `auto` — WebKit will not infer it from the
     viewBox and falls back to 300px, which blows the mark up. */
  height: 1.15em;
  width: 0.834em;
  fill: #31968c;
  margin-right: 0.55ch;
  vertical-align: -0.2em;
}
.sub { color: var(--dim); margin: 0; }

/* --- tree -------------------------------------------------------------- */
.row { display: flex; align-items: baseline; }
.g   { white-space: pre; flex: none; color: var(--dim); }
.n   { color: var(--fg); text-decoration: none; }
.n:hover, .row.file.open > .n { text-decoration: underline; text-underline-offset: 2px; }
.row.file.open > .n { color: var(--link); }
.dir > .n { color: var(--fg); }
.size { color: var(--dim); padding-left: 1.5ch; font-size: 0.9em; }

/* --- expanded file body ------------------------------------------------ */
.body { padding: 0.55rem 0 1.15rem; }
.bl   { display: flex; }
.bl .g { color: var(--rule); }
.t    { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }

/* --- footer ------------------------------------------------------------ */
footer {
  margin-top: 3rem; padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--dim);
}
footer a { color: var(--dim); }

::selection { background: var(--fg); color: var(--bg); }