:root { --bg:#fafafa; --fg:#111; --mt:#717171; --ic:#555; --bd:#ccc; --ul:#bbb; --er:#b91c1c; --pad:32px; color-scheme:light; }
/* The dark palette is defined twice on purpose, keep both in sync: the media
   query follows the system unless the visitor chose light, and
   [data-theme="dark"] is an explicit choice that also wins on a light system. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#0f172a; --fg:#e2e8f0; --mt:#748499; --ic:#94a3b8; --bd:#334155; --ul:#475569; --er:#f87171; color-scheme:dark; }
  :root:not([data-theme="light"]) .ic-light { display:none; }
  :root:not([data-theme="light"]) .ic-dark { display:inline; }
  :root:not([data-theme="light"]) .freeman .fl { display:none; }
  :root:not([data-theme="light"]) .freeman .fd { display:block; }
}
:root[data-theme="dark"] { --bg:#0f172a; --fg:#e2e8f0; --mt:#748499; --ic:#94a3b8; --bd:#334155; --ul:#475569; --er:#f87171; color-scheme:dark; }
:root[data-theme="dark"] .ic-light { display:none; }
:root[data-theme="dark"] .ic-dark { display:inline; }
:root[data-theme="dark"] .freeman .fl { display:none; }
:root[data-theme="dark"] .freeman .fd { display:block; }
@media (max-width: 600px) { :root { --pad:18px; } }

@font-face { font-family:"JetBrains Mono"; font-weight:400; font-style:normal; font-display:swap; src:url("/assets/fonts/JetBrainsMono-Regular.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-weight:700; font-style:normal; font-display:swap; src:url("/assets/fonts/JetBrainsMono-Bold.woff2") format("woff2"); }

body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.75 "JetBrains Mono",ui-monospace,monospace; }
.page { min-height:100vh; box-sizing:border-box; padding:28px var(--pad) 40px; display:flex; flex-direction:column; }
.body { flex:1; }
.top { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:24px; }
.name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:3px; } /* room for the focus ring */
.name a { font-weight:700; color:var(--fg); text-decoration:none; }
.name a:hover { text-decoration:underline; text-decoration-color:var(--ul); text-underline-offset:3px; }
.ctl { display:flex; gap:10px; white-space:nowrap; }
.ctl a, .ctl button { color:var(--mt); text-decoration:none; background:none; border:0; font:inherit; padding:0; cursor:pointer; min-height:36px; display:inline-flex; align-items:center; }
.ctl a:hover, .ctl button:hover { color:var(--fg); }
.i { width:1.2em; height:1em; fill:currentColor; color:var(--ic); overflow:visible; }
.ctl .i { color:inherit; width:1em; }
.ic-dark { display:none; }
.flip { transform:scaleX(-1); }
h1, h2 { font:inherit; margin:0; }
.cm, .empty { color:var(--mt); margin-top:14px; }
.cm::before { content:"# "; content:"# " / ""; } /* the second: not read aloud */
.ls { display:flex; flex-direction:column; align-items:flex-start; }
.ls.row { flex-direction:row; flex-wrap:wrap; gap:0 20px; }
.ls a { color:var(--fg); text-decoration:none; display:inline-flex; align-items:baseline; gap:.45em; }
.ls a span { text-decoration:underline; text-decoration-color:var(--ul); text-underline-offset:3px; text-decoration-thickness:1px; overflow-wrap:anywhere; }
.ls a:not([href]) span { text-decoration:none; }
.ls a:not([href]) { cursor:default; }
.ls a:hover span { text-decoration-color:var(--fg); }
.muted { color:var(--mt); }
details.arch summary { list-style:none; cursor:pointer; display:inline-flex; gap:.5em; align-items:baseline; }
.ls .i, details.arch summary .i { position:relative; top:.125em; }
details.arch summary::-webkit-details-marker { display:none; }
.chev { font-size:12px; color:var(--mt); transition:transform .15s; }
details.arch[open] .chev { transform:rotate(90deg); }
.foot { margin-top:32px; display:flex; justify-content:space-between; align-items:center; }
.prompt { color:var(--mt); display:flex; align-items:center; gap:8px; }
.cursor { display:inline-block; width:9px; height:17px; background:var(--fg); animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation:none; } }
.freeman img { width:36px; height:36px; display:block; }
.freeman .fd { display:none; }
.grp { color:var(--mt); margin-top:6px; }
.ls.row + .grp { margin-top:14px; }
/* Size and date wrap as one unit under the file name: 1.65em is the icon width
   (.i, 1.2em) plus the link gap (.ls a, .45em). */
.files > div { display:flex; flex-wrap:wrap; column-gap:14px; align-items:baseline; padding-left:1.65em; }
.files > div > a { margin-left:-1.65em; }
.sz { color:var(--mt); font-size:12px; white-space:nowrap; }
.center { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 0; }
.bigicon { width:40px; height:40px; color:var(--ic); fill:currentColor; margin-bottom:22px; overflow:visible; }
.form { display:flex; flex-direction:column; align-items:center; }
.field { display:flex; gap:12px; align-items:baseline; margin-top:4px; }
.field .k { color:var(--mt); min-width:8ch; }
.inp { border:0; border-bottom:1px solid var(--bd); background:transparent; color:var(--fg); font:inherit; padding:0 2px; width:24ch; outline:none; }
.inp:focus { border-color:var(--fg); }
.btn { margin-top:16px; border:0; padding:0; background:transparent; color:var(--fg); font:inherit; cursor:pointer; }
.btn:hover { color:var(--mt); }
.err { color:var(--er); margin-top:10px; text-align:center; }