:root{
  --bg:#0a0c1a;
  --bg2:#0c1024;
  --fg:#e6f3ff;
  --cyan:#00ffe1;
  --mag:#ff3df3;
  --soft:#7df9ff;
  --muted:#a8c7ff;
  --card: rgba(17,22,43,.92);
}

*{box-sizing:border-box}
html,body{height:100%}
html,body{
  margin:0;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(0,255,255,.08), transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, rgba(255,61,243,.08), transparent 60%),
    var(--bg);
  color:var(--fg);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  line-height:1.6;
}

/* Optional star field from your site; harmless if missing */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:url("/assets/star.gif");
  background-size: 128px auto;
  background-repeat: repeat;
  opacity:.15; pointer-events:none; z-index:-1;
  filter:saturate(1.2);
}

/* Layout */
.wrapper{max-width: 960px; margin: 0 auto; padding: 20px}
.header, .footer, .post, .about, .archive, .index{
  background: var(--card);
  border:3px ridge var(--cyan);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  padding: 18px;
  margin: 14px 0;
}

.header h1{
  margin:0 0 8px 0;
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing:.5px;
  text-shadow: 0 0 8px rgba(0,255,225,.4), 0 0 18px rgba(255,61,243,.2);
}
.header .sub{opacity:.85; font-size:14px}

.nav ul{list-style:none; padding:0; margin:8px 0 0 0; display:flex; flex-wrap:wrap; gap:10px}
.nav a{
  display:inline-block;
  padding:8px 12px;
  border:2px solid var(--mag);
  border-radius:999px;
  color:var(--fg);
  text-decoration:none;
  background: linear-gradient(180deg, rgba(30,16,48,.7), rgba(12,16,36,.7));
  box-shadow: inset 0 0 12px rgba(255,61,243,.25), 0 3px 10px rgba(0,0,0,.4);
}
.nav a:hover{ transform: translateY(-1px); box-shadow: inset 0 0 12px rgba(0,255,225,.25), 0 6px 18px rgba(0,0,0,.45); border-color: var(--cyan) }

/* Content blocks */
.post h2, .about h2, .archive h2, .index h2{
  margin-top:0; font-size: clamp(22px, 2.8vw, 32px);
  text-shadow: 0 0 8px rgba(0,255,225,.25);
}
.post .meta{font-size:12px; opacity:.8; margin:-4px 0 12px 0}
.post .body p{margin: 10px 0}
a{color:#90e0ef}
a:hover{color:var(--soft)}

.tag, .category{
  display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px;
  border:1px solid var(--cyan); margin-right:6px; opacity:.9
}

/* Archive list */
.archive ul{list-style:none; padding:0; margin:0}
.archive li{padding:8px 0; border-bottom:1px dashed rgba(144,224,239,.25)}
.archive li:last-child{border-bottom:0}
.archive .date{opacity:.8; font-size:12px; margin-right:6px}

/* About page tweaks */
.about p{margin:10px 0}

/* Footer */
.footer{ text-align:center; font-size: 13px; opacity:.85 }
.footer a{ color: var(--muted) }

/* Responsive */
@media (max-width: 560px){
  .nav a{ padding:7px 10px; font-size:14px }
}