:root{
  /* Main palette - tweak here */
  --bg: #07090b;
  --bg-2: #0b0f14;
  --card: rgba(255,255,255,0.03);
  --glass: rgba(255,255,255,0.04);
  --text: #e6f7fb;
  --muted: #9aa7b2;
  --accent: #7ef0ff;
  --accent-2: #b97bff;
  --glow: 0 8px 30px rgba(125,120,255,0.08);
  --radius: 12px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
  --ui: 16px;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size:var(--ui);
  background:
    radial-gradient(1000px 400px at 10% 10%, rgba(125,240,255,0.03), transparent 8%),
    radial-gradient(800px 300px at 90% 80%, rgba(185,123,255,0.03), transparent 6%),
    linear-gradient(180deg,var(--bg) 0%, var(--bg-2) 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100%;
  line-height:1.45;
}

/* Layout */
.page{max-width:1100px;margin:32px auto;padding:20px}
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:48px;height:48px;filter:drop-shadow(0 6px 18px rgba(0,0,0,0.6))}
.site-title{margin:0;font-size:1.05rem}
.site-sub{margin:0;color:var(--muted);font-size:0.85rem}

/* Nav */
.nav{display:flex;align-items:center;gap:10px}
.nav a{color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:8px;transition:all .18s}
.nav a:hover{color:var(--text);background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));}
#themeToggle{background:transparent;border:1px solid rgba(255,255,255,0.03);color:var(--muted);padding:8px;border-radius:8px;cursor:pointer}
#themeToggle:hover{color:var(--text)}

/* Hero */
.hero{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:220px;
  border-radius:16px;
  padding:36px;
  margin-bottom:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  box-shadow:var(--glow);
  backdrop-filter: blur(6px) saturate(120%);
}
.hero-title{font-size:clamp(1.5rem, 3vw, 2.6rem); margin:0 0 8px 0}
.hero-lead{color:var(--muted);margin:0 0 18px 0}
.hero-actions .btn{display:inline-block;text-decoration:none;padding:10px 16px;border-radius:10px;font-weight:600;margin-right:8px;transition:all .18s}
.btn{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#091016;box-shadow:0 8px 30px rgba(125,240,255,0.08)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--text)}

/* Containers and cards */
.container{margin:18px 0}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:20px;border-radius:var(--radius);box-shadow:var(--glow)}
.small{color:var(--muted);font-size:0.9rem}
.code{font-family:var(--mono);font-size:0.95rem;background:rgba(255,255,255,0.02);padding:4px 8px;border-radius:6px}

/* Links grid */
.grid-links .cards{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.link-card{display:inline-flex;align-items:center;padding:14px 18px;border-radius:12px;text-decoration:none;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));color:var(--text);border:1px solid rgba(255,255,255,0.03);transition:transform .16s, box-shadow .16s}
.link-card:hover{transform:translateY(-6px);box-shadow:0 10px 30px rgba(125,120,255,0.06)}

/* Gallery */
.gallery .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:12px}
.gallery figure{margin:0;border-radius:10px;overflow:hidden;background:var(--glass);border:1px solid rgba(255,255,255,0.02)}
.gallery img{width:100%;height:140px;object-fit:cover;display:block}
.gallery figcaption{padding:8px;color:var(--muted);font-size:0.9rem}

/* Footer */
.site-footer{margin-top:28px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.site-footer a{color:var(--accent);text-decoration:none}

/* Responsive tweaks */
@media (max-width:720px){
  .page{padding:14px;margin:12px}
  .site-header{flex-direction:column;align-items:flex-start;gap:10px}
  .nav{align-self:stretch;justify-content:space-between}
  .hero{padding:20px}
}

/* Light theme override (optional) */
:root.light {
  --bg: #f6f8fb;
  --bg-2: #eef3f8;
  --card: rgba(0,0,0,0.03);
  --glass: rgba(0,0,0,0.02);
  --text: #071019;
  --muted: #475569;
  --accent: #0ea5b7;
  --accent-2: #7c3aed;
  background: linear-gradient(180deg,var(--bg) 0%, var(--bg-2) 100%);
}