:root{
  --bg:#000; --text:#fff; --card:#000; --border:#fff;
  --chip-bg:#fff; --chip-fg:#000; --chip-bg-active:#000; --chip-fg-active:#fff;
}

.reader-on{ --bg:#fff; --text:#000; --card:#fff; --border:#000; }
.reader-on a{
  animation:none !important;
  color:#000 !important;
  text-decoration:underline !important;
}

.reader-on #fx-root,
.reader-on canvas,
.reader-on #stars, .reader-on #boo,
.reader-on .stars, .reader-on .boo { display:none !important; }
.reader-on *{ animation: none !important; }

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:14px/1.6 system-ui,Segoe UI,Roboto,Inter,Arial}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.site-header,.site-footer{border-bottom:1px solid var(--border)}
.site-footer{border-top:1px solid var(--border);border-bottom:0;margin-top:32px;padding:16px 0;opacity:.85}
.site-header{padding:16px 0}
.header-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
h1{margin:0 0 4px}
.tagline{margin:0;opacity:.75}


.brand{ display:flex; align-items:center; gap:12px; }
.brand-text{ display:flex; flex-direction:column; justify-content:center; }


.site-logo{
  height: clamp(56px, 5.5vw, 96px); 
  aspect-ratio: 1 / 1;              
  width: auto;                       
  object-fit: contain;
  display: block;
  border-radius: 10px;

  filter: invert(1);
  transition: filter 120ms ease-in-out, border-color 120ms ease-in-out;
}
.reader-on .site-logo{
  filter: none;
}

@keyframes rainbow-flash{
  0%{color:red}16%{color:orange}33%{color:yellow}50%{color:green}66%{color:blue}83%{color:indigo}100%{color:violet}
}
a{ font-weight:700; text-decoration:none; font-family:'Share+Tech+Mono','Share Tech Mono',monospace; animation: rainbow-flash 2s infinite; }
a:hover{text-decoration:underline}
a:visited{color:inherit}

.reader-btn{
  background:transparent;color:var(--text);border:1px solid var(--border);
  border-radius:10px;padding:8px 12px;cursor:pointer;white-space:nowrap
}

.controls{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:10px; margin:16px 0 8px;
}
.filters{
  display:flex; flex-wrap:wrap; gap:clamp(6px,1.2vw,10px);
}
.filters .chip {
  display: inline-block;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--chip-fg);
  padding: clamp(4px, 0.8vw, 8px) clamp(6px, 1.2vw, 10px);
  border-radius: 999px;
  cursor: pointer;
  animation: none !important;
  font-family: system-ui, Segoe UI, Roboto, Inter, Arial !important;
  font-weight: 500;
  font-size: clamp(10px, 1.2vw, 14px);
}

.filters .chip:hover,
.filters .chip.active{
  background:var(--chip-bg-active);
  color:var(--chip-fg-active);
}

.reader-on .filters .chip{
  background:var(--chip-bg) !important;
  color:var(--chip-fg) !important;
  text-decoration:none !important;
  animation:none !important;
}
.reader-on .filters .chip:hover,
.reader-on .filters .chip.active,
.reader-on .filters .chip.active:hover{
  background:var(--chip-bg-active) !important;
  color:var(--chip-fg-active) !important; 
  text-decoration:none !important;
}

.sort{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.sort label{opacity:.9}
select{ background:#fff; color:#000; border:1px solid var(--border); border-radius:8px; padding:8px }

.cards{display:grid;grid-template-columns:1fr;gap:16px;margin:16px 0}
@media (min-width:760px){.cards{grid-template-columns:1fr 1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.card img{display:block;width:100%;height:200px;object-fit:cover}
.card .body{padding:12px 14px}
.card h2{margin:0 0 6px;font-size:1.2rem}
.card .meta{opacity:.8;font-size:0.9rem;margin-bottom:8px}
.card p{margin:0}

.pagination{display:flex;gap:12px;align-items:center;justify-content:center;margin:18px 0}
.pagination button{ background:transparent;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:8px 12px;cursor:pointer }
.pagination button[disabled]{opacity:.5;cursor:not-allowed}

.back{opacity:.8}
.post-meta{opacity:.8}

.hero{
  width:100%;
  height:auto;           
  object-fit:contain;    
  border-bottom:1px solid var(--border);
  display:none;
}

.prose{padding:16px 0}
.prose h2,.prose h3{margin-top:1.2em}
.prose pre{background:var(--card);border:1px solid var(--border);padding:12px;border-radius:10px;overflow:auto}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.inline-img{max-width:100%;height:auto;display:block;margin:12px auto;}
#scanlines::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.05),
    rgba(0,0,0,0.05) 1px,
    transparent 1px,
    transparent 3px
  );
  z-index: 9998;
}