:root {
  color-scheme: dark;
  --bg: #0a0e14;
  --panel: #0f151d;
  --line: #1c2632;
  --ink: #d7dde4;
  --dim: #8a96a3;
  --lime: #b6ff00;
  --warn: #ffb347;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 var(--sans);
  padding-inline: 16px;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
}
a { color: var(--lime); text-decoration: none; border-bottom: 1px solid rgba(182,255,0,.35); }
a:hover { border-bottom-color: var(--lime); }
.wrap { max-width: 46rem; margin: 0 auto; padding-block: 1.5rem 4rem; }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font: 500 .95rem var(--mono); padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.bar a { border: 0; }
.brand { color: var(--ink); }
.brand .q { color: var(--lime); animation: q 6s steps(1) infinite; }
@keyframes q { 0%{color:#b6ff00} 33%{color:#00e5ff} 66%{color:#ff3df2} }
@media (prefers-reduced-motion: reduce) { .brand .q { animation: none; } }
h1 { font: 700 clamp(1.6rem, 4.5vw, 2.2rem)/1.2 var(--sans); margin: 2rem 0 .5rem; text-wrap: balance; letter-spacing: -.01em; }
h2 { font: 700 1.25rem/1.3 var(--sans); margin: 2.4rem 0 .6rem; text-wrap: balance; }
h2::before { content: "# "; color: var(--lime); font-family: var(--mono); }
h3 { font: 600 1.05rem/1.3 var(--sans); margin: 1.6rem 0 .4rem; }
.meta { font: .85rem var(--mono); color: var(--dim); }
.lede { font-size: 1.1rem; color: var(--ink); }
p, li { max-width: 68ch; }
code { font: .9em var(--mono); background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: .05em .35em; }
pre { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--lime); border-radius: 6px; padding: .9rem 1rem; font: .86rem/1.55 var(--mono); }
pre code { background: none; border: 0; padding: 0; }
.tbl { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: .45rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 600 .78rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
td:first-child { color: var(--dim); white-space: nowrap; }
.fix { border: 1px solid var(--lime); border-radius: 8px; padding: 1rem 1.2rem; background: rgba(182,255,0,.04); }
.fix h2 { margin-top: 0; }
.tag { font: 600 .72rem var(--mono); color: var(--bg); background: var(--lime); border-radius: 3px; padding: .1em .45em; vertical-align: .15em; }
.seen { font: 600 .72rem var(--mono); color: var(--warn); border: 1px solid var(--warn); border-radius: 3px; padding: .05em .4em; }
.posts { list-style: none; padding: 0; }
.posts li { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.posts a { font-weight: 600; font-size: 1.1rem; }
footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); font: .82rem var(--mono); color: var(--dim); }
ol.src { font-size: .9rem; color: var(--dim); }
html, body { overflow-x: hidden; }
.wrap { min-width: 0; }
p code, li code, td code { overflow-wrap: anywhere; }
td { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  td:first-child { white-space: normal; }
  th, td { padding: .4rem .45rem; }
  .fix { padding: .8rem .9rem; }
}
td:first-child { overflow-wrap: normal; word-break: keep-all; }