:root {
  color-scheme: dark;
  --bg:#040804; --green:#00ff66; --green2:#19ff7a; --dim:#0b7a3a;
  --ink:#c6ffd9; --amber:#ffb62e; --cyan:#3bf7e4; --magenta:#ff5fd2;
  --mono:"Share Tech Mono",ui-monospace,"Consolas","Courier New",monospace;
  --glow:0 0 4px rgba(0,255,102,.45);
}
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); }
body { color:var(--ink); font:16px/1.5 var(--mono); text-shadow:var(--glow); min-height:100vh; }
a { color:var(--cyan); }

/* CRT scanlines + slow scan sweep + faint flicker */
body::after { content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.24) 3px, rgba(0,0,0,0) 4px);
  mix-blend-mode:multiply; }
body::before { content:""; position:fixed; inset:0; z-index:59; pointer-events:none;
  background:rgba(0,255,100,.015); animation:flick 7s infinite steps(1); }
@keyframes flick { 0%,92%{opacity:.5} 93%{opacity:1} 94%{opacity:.25} 96%{opacity:.8} 100%{opacity:.5} }
.sweep { position:fixed; left:0; right:0; top:0; height:150px; z-index:58; pointer-events:none;
  background:linear-gradient(to bottom, rgba(130,255,180,0), rgba(130,255,180,.055), rgba(130,255,180,0));
  transform:translateY(-150px); animation:sweep 8s linear infinite; }
@keyframes sweep { 0%{transform:translateY(-150px)} 100%{transform:translateY(100vh)} }

.wrap { position:relative; z-index:1; max-width:1000px; margin:0 auto; padding:22px 16px 90px; }

.term { border:1px solid var(--dim); border-radius:6px; overflow:hidden;
  background:rgba(2,14,6,.78); margin-bottom:22px; box-shadow:0 0 24px rgba(0,255,102,.08); }
.titlebar { display:flex; align-items:center; gap:7px; padding:7px 11px;
  background:rgba(0,255,102,.08); border-bottom:1px solid var(--dim); font-size:13px; color:var(--green2); }
.dot { width:11px; height:11px; border-radius:50%; display:inline-block; }
.dot.r{background:#ff5f56} .dot.y{background:#ffbd2e} .dot.g{background:#27c93f}
.titlebar .tt { margin-left:8px; color:var(--dim); }
.termbody { padding:16px 16px 18px; }
.line { color:var(--green2); font-size:14px; }
.line .typed { color:var(--ink); }
.cursor { display:inline-block; width:.6ch; background:var(--green); color:var(--green);
  animation:blink 1.05s steps(1) infinite; }
@keyframes blink { 50%{opacity:0} }
h1.glitch { position:relative; margin:10px 0 6px; letter-spacing:2px; line-height:1;
  font-size:clamp(30px,7.5vw,54px); color:var(--green); text-shadow:0 0 8px rgba(0,255,102,.6); }
h1.glitch::before, h1.glitch::after { content:attr(data-text); position:absolute; left:0; top:0;
  width:100%; overflow:hidden; }
h1.glitch::before { color:var(--cyan); clip-path:inset(0 0 58% 0); animation:gl1 3.4s infinite linear alternate; }
h1.glitch::after { color:var(--magenta); clip-path:inset(58% 0 0 0); animation:gl2 2.7s infinite linear alternate; }
@keyframes gl1 { 0%,88%{transform:translateX(0)} 90%{transform:translateX(-2px)} 93%{transform:translateX(2px)} 100%{transform:translateX(0)} }
@keyframes gl2 { 0%,85%{transform:translateX(0)} 88%{transform:translateX(2px)} 92%{transform:translateX(-1px)} 100%{transform:translateX(0)} }
.sub { color:var(--dim); font-size:14px; margin:0 0 12px; }
.nav { display:flex; gap:14px; font-size:14px; }
.nav a { color:var(--green2); text-decoration:none; }
.nav a:hover { color:var(--green); }
.nav a.on { color:var(--amber); }
.stat { color:var(--green2); font-size:13px; margin:0 0 16px; }
.stat b { color:var(--amber); }

h2 { font-size:15px; margin:28px 0 12px; font-weight:400; color:var(--ink); }
h2 .pr { color:var(--green); } h2 .pa { color:var(--cyan); } h2 .cmd { color:var(--amber); }

.toolbar { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin:0 0 10px; }
.tlbl { color:var(--dim); font-size:13px; }
.chip, .sortbtn { cursor:pointer; font:13px var(--mono); color:var(--green2);
  background:rgba(2,16,7,.7); border:1px solid var(--dim); border-radius:4px;
  padding:4px 10px; text-shadow:var(--glow); }
.chip:hover, .sortbtn:hover { border-color:var(--green); }
.chip.active { background:var(--green); color:#03230f; border-color:var(--green); text-shadow:none; }
.chip .cn { color:var(--dim); } .chip.active .cn { color:#03230f; }
.sortbtn.active { color:var(--amber); border-color:var(--amber); }
.showing { margin-left:auto; color:var(--dim); font-size:12.5px; }

.grid { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.card { min-width:0; border:1px solid var(--dim); border-left:3px solid var(--green);
  background:rgba(2,16,7,.72); border-radius:4px; padding:11px 13px; }
.meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:7px; font-size:12px; }
.kind { color:var(--green); letter-spacing:.04em; }
.tag { border:1px solid var(--dim); color:var(--cyan); border-radius:3px; padding:0 7px; font-size:11px; }
.score { margin-left:auto; color:var(--dim); }
pre { margin:0; white-space:pre-wrap; word-break:break-word; font:15px/1.5 var(--mono); color:var(--ink); }
/* ASCII art must keep its exact shape: never wrap, scroll sideways instead,
   and render tabs at a fixed width so lines don't drift. */
.k-ascii_art pre { white-space:pre; word-break:normal; overflow-x:auto; tab-size:8;
  font-size:13px; line-height:1.2; padding-bottom:4px; }
.k-ascii_art pre::-webkit-scrollbar { height:8px; }
.k-ascii_art pre::-webkit-scrollbar-thumb { background:var(--dim); border-radius:4px; }
.src { margin-top:8px; font-size:12.5px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.src .arr { color:var(--green); }
.src a { text-decoration:none; } .src a:hover { text-decoration:underline; }
.src .when { margin-left:auto; color:var(--dim); }
.empty { color:var(--dim); }

.k-header { border-left-color:var(--amber); } .k-header .kind { color:var(--amber); }
.k-humans_txt { border-left-color:var(--cyan); } .k-humans_txt .kind { color:var(--cyan); }
.k-ascii_art { border-left-color:var(--magenta); } .k-ascii_art .kind { color:var(--magenta); }
.k-console { border-left-color:var(--cyan); }

/* like button */
.like { cursor:pointer; font:12.5px var(--mono); color:var(--green2);
  background:rgba(0,255,102,.06); border:1px solid var(--dim); border-radius:4px;
  padding:1px 9px; text-shadow:var(--glow); transition:transform .08s; }
.like:hover { border-color:var(--green); }
.like:active { transform:scale(.92); }
.like.liked { background:var(--green); color:#03230f; border-color:var(--green); text-shadow:none; }
.like .lc { font-variant-numeric:tabular-nums; }

/* about page prose */
.prose { max-width:760px; }
.prose h3 { color:var(--amber); font-weight:400; margin:26px 0 8px; font-size:16px; }
.prose p { color:var(--ink); margin:0 0 12px; }
.prose code { color:var(--cyan); }
.prose a { color:var(--cyan); }

.foot { margin-top:40px; padding-top:16px; border-top:1px dashed var(--dim);
  color:var(--dim); font-size:12.5px; }
.foot a { color:var(--cyan); }

#boot { display:none; position:fixed; inset:0; z-index:90; background:#020402;
  align-items:center; justify-content:center; cursor:pointer; }
#boot.gone { opacity:0; transition:opacity .5s; }
#bootlog { color:var(--green); font:15px/1.7 var(--mono); text-shadow:var(--glow); white-space:pre; padding:20px; }

@media (prefers-reduced-motion: reduce) {
  body::before, .cursor, h1.glitch::before, h1.glitch::after, .sweep { animation:none; }
  h1.glitch::before, h1.glitch::after, .sweep { display:none; }
}