:root{
  --bg:#07010d;
  --card:#12001f;
  --ink:#e9d7ff;
  --muted:#bda7dd;
  --neon:#39ff14;
  --pink:#ff3ccf;
  --purple:#7b2cff;
  --red:#ff3333;
  --border:rgba(255,255,255,.14);
  --shadow: 0 18px 40px rgba(0,0,0,.45);
  --radius: 18px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 800px at 10% 10%, rgba(123,44,255,.25), transparent 60%),
              radial-gradient(900px 600px at 90% 30%, rgba(57,255,20,.14), transparent 60%),
              linear-gradient(180deg, #05000a, var(--bg));
  color:var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.wrap{max-width:1100px; margin:0 auto; padding:18px}
a{color:var(--neon); text-decoration:none}
a:hover{text-decoration:underline}

.scanlines{
  position:fixed; inset:0; pointer-events:none; opacity:.12;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.08),
    rgba(255,255,255,.08) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: overlay;
}

.site-header{
  border-bottom:1px solid var(--border);
  background: rgba(10,0,18,.65);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  position: sticky;
  top:0;
  z-index: 50;
}

.header-inner{
  display:flex; gap:16px; align-items:center; justify-content:space-between;
}

.brand{display:flex; gap:14px; align-items:center}
.logo img{height:54px; width:auto}
.logo-text{
  font-family: var(--mono);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pink);
  text-shadow: 0 0 12px rgba(255,60,207,.35);
}
.tagline small{color:var(--muted)}
.tiny-note{color:var(--muted); font-size:12px; margin-top:6px}

.site-nav{padding-top:0}
.menu{
  list-style:none; padding:0; margin:0;
  display:flex; gap:10px; flex-wrap:wrap;
}
.menu a{
  display:inline-block;
  padding:10px 12px;
  border:1px dashed rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(18,0,31,.55);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.menu a:hover{
  border-color: rgba(57,255,20,.55);
  box-shadow: 0 0 0 3px rgba(57,255,20,.12);
  text-decoration:none;
}

.site-main{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap: 18px;
  padding-top: 22px;
  padding-bottom: 32px;
}
@media (max-width: 980px){
  .site-main{grid-template-columns: 1fr}
}

.evil-card{
  background: linear-gradient(180deg, rgba(18,0,31,.92), rgba(10,0,18,.92));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.page-title{
  margin: 0 0 10px;
  font-family: var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pink);
  text-shadow: 0 0 14px rgba(255,60,207,.25);
}

.section-title{
  margin: 0 0 12px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.meta{color:var(--muted); font-size: 13px}
.meta .sep{margin:0 8px; opacity:.7}

.content{color: var(--ink); line-height: 1.6}
.content p{margin: 0 0 12px}

.post-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 700px){
  .post-grid{grid-template-columns: 1fr}
}

.post-card{
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 14px;
}
.post-title{
  margin: 0 0 6px;
  font-family: var(--mono);
  letter-spacing: .04em;
}
.post-title a{color: var(--neon)}
.excerpt{color: var(--ink)}
.evil-link{font-family: var(--mono)}

.sidebar .widget + .widget{margin-top:12px}
.widget-title{
  margin:0 0 10px;
  font-family: var(--mono);
  color: var(--neon);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.evil-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 2px solid rgba(57,255,20,.6);
  background: rgba(57,255,20,.12);
  color: var(--ink);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor:pointer;
  box-shadow: 0 0 18px rgba(57,255,20,.14);
}
.evil-btn:hover{filter: brightness(1.08); text-decoration:none}
.evil-btn.outline{
  border-color: rgba(255,60,207,.65);
  background: rgba(255,60,207,.12);
  box-shadow: 0 0 18px rgba(255,60,207,.12);
}

.blink{
  animation: blink 1s step-end infinite;
  color: var(--neon);
  font-family: var(--mono);
  letter-spacing: .08em;
}
@keyframes blink { 50% { opacity: 0; } }

.hero .hero-inner{
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 14px;
}
@media (max-width: 980px){
  .hero .hero-inner{grid-template-columns: 1fr}
}
.hero-title{margin:0 0 10px; font-size: clamp(22px, 3.2vw, 40px)}
.hero-sub{color:var(--ink); margin:0 0 14px}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap; margin: 0 0 10px}
.fineprint{color:var(--muted); font-size: 12px}

.mini-panel{
  border: 1px dashed rgba(255,255,255,.22);
  border-radius: 14px;
  padding: 12px;
  background: rgba(0,0,0,.18);
}
.mini-panel h2{
  margin:0 0 8px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 14px;
  color: var(--neon);
}
.mini-panel ol{margin:0; padding-left: 18px; color: var(--ink)}

.pagination{margin-top: 14px}
.site-footer{
  border-top:1px solid var(--border);
  background: rgba(10,0,18,.65);
}
.footer-inner{
  display:flex; gap:16px; justify-content:space-between; flex-wrap:wrap;
}
.counter{
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neon);
}
.counter .digits{color:var(--pink)}
.disclaimer{color:var(--muted); max-width: 520px}

.perry-trap{
  position: fixed; inset: 0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.72);
  z-index: 9999;
}
.perry-trap-inner{
  width: min(520px, 92vw);
  padding: 18px;
  border-radius: var(--radius);
  border: 2px solid rgba(255,60,207,.6);
  background: linear-gradient(180deg, rgba(18,0,31,.96), rgba(10,0,18,.96));
  box-shadow: var(--shadow);
}
.perry-trap-inner h2{
  margin:0 0 8px;
  font-family: var(--mono);
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.glitch{
  position:relative;
  display:inline-block;
  text-shadow: 0 0 18px rgba(123,44,255,.22);
}
.glitch::before,
.glitch::after{
  content: attr(data-text);
  position:absolute;
  left:0; top:0;
  width:100%;
  opacity:.7;
  clip-path: inset(0 0 0 0);
}
.glitch::before{
  transform: translate(1px, 0);
  color: var(--neon);
  clip-path: inset(0 0 55% 0);
}
.glitch::after{
  transform: translate(-1px, 0);
  color: var(--pink);
  clip-path: inset(55% 0 0 0);
}