:root{
  --bg: #30363d;
  --surface: #24292f;
  --text: #e6edf3;
  --muted: #9aa4b2;
  --primary: #a5d6ff;
  --accent: #ffcc8a;
  --border: #3a4149;
  --focus: #7fb5ff;

  --maxw: 72ch;
  --radius: 16px;
  --ff-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --ff-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --shadow: 0 10px 40px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--ff-sans);
  color:var(--text);
  background: var(--surface);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}

/* global decorative background */
body::before {
  content:"";
  position:fixed; inset:0;
  background: radial-gradient(1200px 800px at 20% 10%, var(--bg), transparent),
              radial-gradient(900px 600px at 75% 80%, #0d1117, transparent);
  z-index:-3;
}
body::after{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(to right, rgba(58,65,73,0.28) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(58,65,73,0.28) 1px, transparent 1px);
  background-size:40px 40px;
  opacity:.35;
  z-index:-2; pointer-events:none;
}
.noise{
  position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.06;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.led{ position:fixed; width:6px; height:6px; border-radius:50%; opacity:.9; }
.led.blue{ background:var(--primary); box-shadow:0 0 10px var(--primary); animation:blink 3s ease-in-out infinite; }
.led.accent{ background:var(--accent); box-shadow:0 0 10px var(--accent); animation:blink 3s ease-in-out infinite .75s; }
@keyframes blink{ 0%,100%{opacity:.25} 50%{opacity:1} }

.container{
  width:min(100%, var(--maxw));
  margin-inline:auto;
  padding: 1.25rem;
}
/* a wider wrap helper for the About page */
.wrap{ max-width: 880px; margin: 0 auto; padding: 0 20px; }

header.site-header{
  position:sticky; top:0; z-index:10;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav{
  display:flex; align-items:center; gap:1rem; justify-content:space-between;
  padding-block: .75rem;
}
.brand a{
  text-decoration:none;
  color:var(--text);
  font-weight:700; letter-spacing:.2px;
  font-size:1.05rem;
}
.menu a{
  color:var(--text);
  opacity:.9;
  text-decoration:none;
  padding:.35rem .6rem;
  border-radius:8px;
}
.menu a:hover{ background: rgba(165,214,255,.12); }

main{ display:block; }

.card{
  background: color-mix(in oklab, var(--surface) 92%, black 8%);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

.hero{
  padding: clamp(1rem, 4vw, 2rem);
  margin: 1rem 0 2rem;
  background: linear-gradient(180deg, rgba(154,164,178,.2), rgba(58,65,73,0));
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

h1,h2,h3{ line-height:1.2; margin: 1.2em 0 .4em }
h1{ font-size: clamp(1.8rem, 2.8vw, 2.4rem); }
h2{ font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
h3{ font-size: clamp(1.15rem, 1.8vw, 1.35rem); }

p{ margin:.75rem 0 1rem; }
a{ color: var(--primary); }
a:hover{ color: var(--focus); text-decoration:underline; }

/* Home grid */
.grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 720px){ .grid{ grid-template-columns: 1fr; } }

.post-card{ display:flex; flex-direction:column; gap:.65rem; }
.post-card .thumb{
  display:block; border-radius:12px; overflow:hidden; border:1px solid var(--border);
  aspect-ratio: 16/9; background:#1b1f24;
}
.post-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-card .meta{ color: var(--muted); font-size:.9rem }
.post-card .desc{ opacity:.95 }

.post-meta{ color: var(--muted); font-size:.9rem }

pre, code{ font-family:var(--ff-mono); font-size:.95em; }
pre{
  background: #1b1f24;
  color: var(--text);
  padding: 1rem;
  border-radius: 12px;
  overflow:auto;
  border:1px solid var(--border);
}

blockquote{ border-left:4px solid var(--muted); padding-left:1rem; color:var(--text); opacity:.9; }

img{ max-width:100%; border-radius:12px; }

footer.site-footer{
  margin-top:3rem;
  padding: 2rem 0 3rem;
  color: var(--muted);
  border-top:1px solid var(--border);
}

/* Tags */
.tag{
  display:inline-block; font-size:.8rem;
  padding:.2rem .5rem; border-radius:999px;
  background: rgba(255,204,138,.2);
  border:1px solid var(--border);
  color: var(--text);
}
.tags{ display:flex; flex-wrap:wrap; gap:.35rem; }

hr{ border:0; height:1px; background: var(--border); margin:2rem 0 }

table{ width:100%; border-collapse:collapse; margin:1rem 0; }
th, td{ text-align:left; padding:.6rem .75rem; border-bottom:1px solid var(--border); }
thead th{ background: rgba(165,214,255,.08); }

.btn{
  display:inline-block; padding:.55rem .9rem; border-radius:10px;
  border:1px solid var(--border); background: var(--surface); color: var(--text);
}
.btn:hover{ border-color: var(--focus); }

/* Back-to-top */
.back-to-top{
  position: fixed;
  right: 18px; bottom: 22px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  z-index: 50;
}
.back-to-top button{
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: .55rem .85rem;
  box-shadow: var(--shadow);
}
.back-to-top.show{ opacity: 1; transform: translateY(0); }