* { box-sizing: border-box; }

/* ---------- tokens: dark (default) ---------- */
:root {
  --bg: #000000;
  --bg-alt: #0a0a0a;
  --bg-head: #161616;
  --ink: #d6d2c4;
  --muted: #8e8a7c;
  --dim: #5a5a5a;
  --faint: #3a3a3a;
  --rule: #333333;
  --rule-soft: #1a1a1a;
  --link: #6a9955;
  --visited: #8a7aa8;
  --accent: #b8963e;
  --banner-filter: invert(1) brightness(0.84);
  --banner-blend: normal;
  --c-target: #a8873a;
  --c-control: #625e55;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  --t-xs: 11px;
  --t-sm: 12px;
  --t-md: 13px;
  --t-lg: 18px;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f3f0e8;
  --bg-alt: #ebe7dc;
  --bg-head: #e6e2d6;
  --ink: #1a1a1a;
  --muted: #5a5648;
  --dim: #6b6658;
  --faint: #9a9586;
  --rule: #c9c4b6;
  --rule-soft: #ddd8cb;
  --link: #2f6b2f;
  --visited: #6b4f8a;
  --accent: #9a6a00;
  --banner-filter: none;
  --banner-blend: multiply;
  --c-target: #9a6a00;
  --c-control: #b3ad9f;
  color-scheme: light;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: var(--t-md);
  line-height: 1.45;
}

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

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s5) var(--s4) var(--s6);
}

.sitetitle {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: var(--t-lg);
  color: var(--ink);
  text-decoration: none;
  padding-bottom: var(--s3);
}
.sitetitle:visited { color: var(--ink); }

.banner {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  filter: var(--banner-filter);
  mix-blend-mode: var(--banner-blend);
}

.themeswitch {
  text-align: right;
  margin: var(--s1) 0 var(--s2);
}
.linkbutton {
  font: inherit;
  font-size: var(--t-xs);
  color: var(--link);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.linkbutton:hover { color: var(--ink); }

/* ---------- nav: bracket row ---------- */
.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s1) var(--s4);
  font-size: var(--t-sm);
}
.navgroup { white-space: nowrap; }
.nav a.active { color: var(--ink); text-decoration: none; }

hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: var(--s2) 0;
}

/* ---------- breadcrumb ---------- */
.crumbs {
  font-size: var(--t-sm);
  color: var(--dim);
  margin: 0 0 var(--s2);
}
.crumbs b { color: var(--ink); }

/* ---------- tables ---------- */
.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.grid th {
  text-align: left;
  color: var(--muted);
  font-weight: 400;
  background: var(--bg-head);
  border: 1px solid var(--rule);
  padding: 3px 6px;
}
.grid td {
  border: 1px solid var(--rule);
  padding: 3px 6px;
  vertical-align: top;
}
.grid tbody tr:nth-child(odd) { background: var(--bg); }
.grid tbody tr:nth-child(even) { background: var(--bg-alt); }
.grid td.empty {
  color: var(--dim);
  text-align: center;
  padding: var(--s4) 6px;
}

.col-icon { width: 16px; text-align: center; vertical-align: middle; }
.col-icon img { display: block; margin: 0 auto; image-rendering: pixelated; }
.col-num { text-align: right; width: 64px; }
.col-glyph { white-space: nowrap; width: 1%; }
.col-last { width: 130px; color: var(--dim); font-size: var(--t-xs); }
.col-sprite { width: 40px; text-align: center; vertical-align: middle; }
.col-sprite img { display: block; margin: 0 auto; height: 32px; width: auto; }

.boardlink { color: var(--ink); font-weight: 700; text-decoration: none; }
.boardlink:visited { color: var(--ink); }
.boardlink:hover { text-decoration: underline; }
.boardlink.accent, .boardlink.accent:visited { color: var(--accent); }
.dimtext { color: var(--dim); }
.small { font-size: var(--t-xs); }

/* ---------- thread view ---------- */
.threadhead {
  font-size: var(--t-sm);
  margin: 0 0 var(--s2);
}
.threadhead .title { font-weight: 700; }
.locked { color: var(--dim); font-size: var(--t-xs); }

.posts td.author {
  width: 96px;
  text-align: center;
  vertical-align: top;
  padding: var(--s2) 6px;
}
.posts td.author img { display: block; margin: 0 auto var(--s1); height: 48px; width: auto; }
.posts td.author a { font-weight: 700; }
.posts td.body { padding: var(--s2) var(--s3); }
.postmeta {
  color: var(--dim);
  font-size: var(--t-xs);
  margin-bottom: var(--s2);
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s3);
}
.posttext { white-space: pre-wrap; overflow-wrap: anywhere; }
.reading { font-size: var(--t-md); color: var(--ink); }
.exit { color: var(--accent); }
.posts tr:target td { background: var(--bg-head); }

.grid tfoot td { background: var(--bg-head); color: var(--muted); }

/* ---------- quoted input + charts ---------- */
.quote {
  border: 1px solid var(--rule);
  background: var(--bg-alt);
  padding: var(--s2) var(--s3);
  margin: 0 0 var(--s2);
  font-size: var(--t-sm);
  overflow-wrap: anywhere;
}
.quote summary { color: var(--muted); cursor: pointer; margin-top: var(--s1); font-size: var(--t-xs); }
.quotetext { white-space: pre-wrap; color: var(--muted); margin-top: var(--s1); }
.trace { margin-top: var(--s2); }
.figure { margin-top: var(--s3); }
.figure svg, .trace svg { display: block; overflow: visible; }
.legend { font-size: var(--t-xs); color: var(--muted); margin-bottom: var(--s1); }
.key { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 var(--s1) 0 var(--s2); vertical-align: middle; }
.key:first-child { margin-left: 0; }
.key-target { background: var(--c-target); }
.key-control { background: var(--c-control); }
.dot-target { fill: var(--c-target); stroke: var(--bg); stroke-width: 1.5; }
.dot-control { fill: var(--c-control); stroke: var(--bg); stroke-width: 1.5; }
.bar { fill: var(--c-control); }
.thr { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.base { stroke: var(--rule); stroke-width: 1; }
.grid line, line.grid { stroke: var(--rule-soft); stroke-width: 1; }
.curve { fill: none; stroke: var(--ink); stroke-width: 2; }
.axis { fill: var(--muted); font-size: 10px; font-family: inherit; }
.tip {
  position: fixed;
  display: none;
  max-width: 320px;
  z-index: 10;
  pointer-events: none;
  background: var(--bg-head);
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: var(--s1) 6px;
  font-size: var(--t-xs);
  white-space: pre-wrap;
}

/* ---------- gpu counter: an old hit counter that counts gpu seconds ---------- */
.counter { margin-top: var(--s2); }
.counter a { color: var(--dim); }
.digits { display: inline-flex; gap: 1px; vertical-align: middle; margin-left: var(--s1); }
.digits span {
  display: inline-block;
  min-width: 13px;
  padding: 1px 2px;
  background: var(--bg-head);
  border: 1px solid var(--rule);
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ---------- member profile ---------- */
.profile {
  display: flex;
  gap: var(--s5);
  align-items: flex-start;
  margin: var(--s3) 0 var(--s4);
}
.profile img { width: 108px; height: auto; flex: none; }
.kv { border-collapse: collapse; font-size: var(--t-sm); }
.kv td { padding: 2px var(--s3) 2px 0; vertical-align: top; }
.kv td:first-child { color: var(--muted); }
.subhead {
  font-size: var(--t-sm);
  color: var(--muted);
  margin: var(--s4) 0 var(--s2);
}

/* ---------- search ---------- */
.searchform { display: flex; gap: var(--s2); margin: 0 0 var(--s3); }
.searchform input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: var(--s1) 6px;
  border-radius: 0;
}
.searchform input:focus { outline: 1px solid var(--muted); outline-offset: 0; }

/* ---------- footer + who's here ---------- */
.footer {
  color: var(--dim);
  font-size: var(--t-xs);
  margin-top: var(--s3);
  text-align: center;
}

.onlinestrip {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--s3);
}
.onlinelabel {
  color: var(--dim);
  font-size: var(--t-xs);
  text-align: center;
}
.onlinelabel a { color: var(--dim); }
.walkerstrip {
  position: relative;
  width: 192px;
  height: 52px;
  border-bottom: 1px solid var(--rule);
}
.walker {
  position: absolute;
  bottom: 0;
  width: 41px;
  height: 48px;
}
.walker img {
  display: block;
  width: 41px;
  height: 48px;
}

.poweredby {
  color: var(--faint);
  font-size: 10px;
  margin-top: var(--s2);
  text-align: center;
}

/* ---------- narrow screens ---------- */
@media (max-width: 600px) {
  .wrap { padding: var(--s4) var(--s4) var(--s5); }
  .nav { font-size: var(--t-md); }
  .nav a, .linkbutton { display: inline-block; padding: var(--s2) 0; }
  .hide-sm { display: none; }
  .col-last { width: auto; }
  .posts td.author { width: 64px; }
  .posts td.author img { height: 40px; }
  .profile { gap: var(--s4); }
  .profile img { width: 81px; }
}