:root {
  --bg: #0d1117; --panel: #11161d; --fg: #c9d1d9; --dim: #8b949e;
  --rule: #21262d; --accent: #7ee787; --str: #a5d6ff; --key: #ff7b72;
  --fn: #d2a8ff; --warn: #f0883e; --bad: #f85149;
  --g1: #7ee787; --g2: #79c0ff;
  --c-url: #79c0ff; --c-size: #d2a8ff; --c-age: #e3b341; --c-enc: #7ee787; --c-log: #f0883e;
}
html[data-theme="light"] {
  --bg: #ffffff; --panel: #f6f8fa; --fg: #24292e; --dim: #57606a;
  --rule: #d8dee4; --accent: #1a7f37; --str: #0a3069; --key: #cf222e;
  --fn: #6f42c1; --warn: #9a6700; --bad: #cf222e;
  --g1: #1a7f37; --g2: #0969da;
  --c-url: #0969da; --c-size: #8250df; --c-age: #9a6700; --c-enc: #1a7f37; --c-log: #bc4c00;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 14px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; }
.offscreen { position: fixed; left: -9999px; top: 0; }

header { padding: 2.5rem 0 2rem; border-bottom: 1px solid var(--rule); }
.top { display: flex; justify-content: flex-end; margin-bottom: 1.25rem; }
.banner {
  margin: 0 auto;
  font-family: "Courier New", Courier, ui-monospace, monospace;
  font-size: min(16px, calc((100vw - 4rem) / 33));
  line-height: 1.17;
  white-space: pre;
  width: max-content;
  max-width: 100%;
  color: var(--g2);
  background: linear-gradient(100deg, var(--g1) 0%, var(--g2) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
 }
#themetoggle {
  color: var(--dim); background: none; border: 1px solid var(--rule);
  border-radius: 4px; padding: 0.35rem 0.45rem; cursor: pointer; display: flex;
}
#themetoggle:hover { color: var(--fg); }
html[data-theme="dark"] .i-sun { display: block; } html[data-theme="dark"] .i-moon { display: none; }
html[data-theme="light"] .i-sun { display: none; } html[data-theme="light"] .i-moon { display: block; }

/* max-width:none, or the generic p rule below boxes this at 68ch, flush left. */
.tag { margin: 1.3rem 0 0; font-size: 15px; text-align: center; max-width: none; }
.tag b { display: block; margin-top: 0.35rem; }
.tag b { color: var(--accent); font-weight: 400; }
.meta { margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 0.6rem; }
.pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 0.25rem 0.75rem; font-size: 12px; color: var(--dim);
}
.pill svg { opacity: 0.7; flex: none; }
/* One hue per fact. Green and orange stay on the two on/off states. */
.pill { color: var(--hue); border-color: color-mix(in srgb, var(--hue) 38%, var(--rule)); }
.pill svg { opacity: 0.9; }
.pill.url { --hue: var(--c-url); } .pill.size { --hue: var(--c-size); }
.pill.age { --hue: var(--c-age); } .pill.enc { --hue: var(--c-enc); }
.pill.log { --hue: var(--c-log); }
/* Green for encryption on or logging off; orange for the opposite settings. */
.pill.good { --hue: var(--c-enc); }
.pill.warn { --hue: var(--c-log); }

.cols { display: grid; grid-template-columns: 17ch 1fr; gap: 3rem; padding: 2.5rem 0 4rem; }
/* Scroll room, or the last sections sit past max scroll and never activate. */
@media (min-width: 821px) { .cols > div { padding-bottom: 70vh; } }
@media (max-width: 820px) { .cols { grid-template-columns: 1fr; gap: 1.5rem; } nav { position: static !important; } }
nav { position: sticky; top: 2.5rem; align-self: start; font-size: 13px; }
nav a {
  display: flex; align-items: center; gap: 0.6rem; color: var(--dim);
  text-decoration: none; padding: 0.3rem 0;
}
nav a svg { opacity: 0.55; flex: none; }
nav a:hover, nav a:focus-visible { color: var(--fg); }
nav a:hover svg { opacity: 1; }
nav a.on { color: var(--accent); }
nav a.on svg { opacity: 1; }

section { scroll-margin-top: 2rem; }
section + section { margin-top: 2.75rem; }
h2 { font-size: 15px; font-weight: 600; margin: 0 0 0.9rem; display: flex; align-items: center; gap: 0.55rem; }
h2 svg { color: var(--dim); flex: none; }
p { margin: 0 0 1rem; max-width: 68ch; }
p.note { color: var(--dim); }
code { color: var(--str); }

.cmd { position: relative; margin: 0 0 0.9rem; }
.cmd pre {
  margin: 0; background: var(--panel); border: 1px solid var(--rule);
  border-radius: 6px; padding: 0.85rem 5.5rem 0.85rem 1rem;
  white-space: pre; overflow-x: auto; line-height: 1.55;
}
.cmd button {
  position: absolute; top: 0.55rem; right: 0.55rem; min-width: 4.6rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  font: 11px/1 ui-monospace, monospace; color: var(--dim);
  background: var(--bg); border: 1px solid var(--rule); border-radius: 4px;
  padding: 0.35rem 0.5rem; cursor: pointer; transition: color .12s, border-color .12s;
}
.cmd button:hover { color: var(--fg); }
.cmd button svg { flex: none; }
.cmd button.ok { color: var(--accent); border-color: var(--accent); }
.cmd button.fail { color: var(--bad); border-color: var(--bad); }
.cmd button.ok svg, .cmd button.fail svg { display: none; }

.c { color: var(--dim); } .k { color: var(--key); } .s { color: var(--str); } .f { color: var(--fn); }

table { border-collapse: collapse; width: 100%; max-width: 62ch; font-size: 13px; }
th, td { text-align: left; padding: 0.45rem 1rem 0.45rem 0; border-bottom: 1px solid var(--rule); }
th { color: var(--dim); font-weight: 400; }
td:first-child { color: var(--fn); white-space: nowrap; }

footer {
  border-top: 1px solid var(--rule); padding: 1.5rem 0 3rem;
  color: var(--dim); font-size: 13px; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem;
}
a { color: var(--str); }
.mail { color: var(--str); background: none; border: 0; padding: 0; font: inherit;
        cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); }
.mail:hover { text-decoration-color: currentColor; }