: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; }
.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); }