:root{
  --bg: #0b0c10;
  --text: #e6e6e6;
  --muted: #aab0b6;
  --card:#11131a;
  --border:#1f2330;
  --accent: #6ee7b7; /* default mint */
  --shadow: 0 10px 30px rgba(0,0,0,0.25);
}

:root.light{
  --bg: #ffffff;
  --text: #0e1321;
  --muted:#58617a;
  --card:#f7f9fc;
  --border:#e6eaf2;
  --accent: #2563eb; /* blue default for light */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; background:var(--bg); color:var(--text);}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1100px;margin:0 auto;padding:24px}
.nav{
  position:sticky; top:0; backdrop-filter:saturate(120%) blur(8px);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  border-bottom:1px solid var(--border);
  z-index:999;
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 24px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent); box-shadow:0 0 20px var(--accent)}

.nav a{padding:8px 12px;border-radius:10px}
.nav a.active{background: color-mix(in srgb, var(--accent) 20%, var(--bg)); color:var(--text)}

.hero{
  display:grid; grid-template-columns:1.2fr 1fr; gap:28px; align-items:center; padding:48px 24px 8px;
}
.hero .title{font-size:clamp(28px, 4vw, 48px); line-height:1.1; margin:0}
.hero p{color:var(--muted); font-size:clamp(14px, 2vw, 18px)}
.hero .img{
  width:100%; aspect-ratio: 16/10; border-radius:20px; overflow:hidden; border:1px solid var(--border);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, #000) 0%, transparent 65%), url('./assets/hero-placeholder.svg');
  background-size: cover; background-position:center;
  box-shadow: var(--shadow);
}

.controls{display:flex; gap:10px; align-items:center}
.btn, .chip {
  border:1px solid var(--border); background:var(--card); color:var(--text);
  padding:10px 14px; border-radius:12px; display:inline-flex; align-items:center; gap:8px;
  box-shadow: var(--shadow);
}
.btn:hover{transform:translateY(-1px)}
input.search{width:100%; padding:12px 16px; border-radius:14px; border:1px solid var(--border); background:var(--card); color:var(--text)}

.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:18px; padding:24px 0 60px}
.card{
  border:1px solid var(--border); border-radius:18px; background:linear-gradient(180deg, color-mix(in srgb, var(--card) 90%, transparent) 0%, var(--card) 100%);
  padding:18px; display:flex; flex-direction:column; gap:12px; box-shadow: var(--shadow); position:relative; overflow:hidden;
}
.card .badge{position:absolute; right:12px; top:12px; font-size:12px; color:var(--text); background: color-mix(in srgb, var(--accent) 30%, var(--card)); padding:6px 8px; border-radius:999px; border:1px solid var(--border)}
.card h3{margin:6px 0 0 0; font-size:18px}
.card p{margin:0; color:var(--muted); font-size:14px}
.card .meta{display:flex; gap:10px; align-items:center; color:var(--muted); font-size:12px}
.card .read{margin-top:auto}

.footer{border-top:1px solid var(--border); padding:24px; text-align:center; color:var(--muted)}

.kbd{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background:var(--card); border:1px solid var(--border); border-bottom-width:2px; padding:2px 6px; border-radius:6px}

.theme-dots{display:flex; gap:8px}
.theme-dots button{
  width:22px;height:22px; border-radius:6px; border:1px solid var(--border); cursor:pointer; background:var(--card);
  box-shadow: var(--shadow);
}
.theme-dots button[data-accent="#6ee7b7"]{background:linear-gradient(45deg, #6ee7b7, #22c55e)}
.theme-dots button[data-accent="#f472b6"]{background:linear-gradient(45deg, #f472b6, #ec4899)}
.theme-dots button[data-accent="#f59e0b"]{background:linear-gradient(45deg, #f59e0b, #f97316)}
.theme-dots button[data-accent="#22d3ee"]{background:linear-gradient(45deg, #22d3ee, #06b6d4)}
.theme-dots button[data-accent="#a78bfa"]{background:linear-gradient(45deg, #a78bfa, #8b5cf6)}

.prose{max-width:860px; margin:0 auto; padding:24px}
.prose h1{font-size:clamp(28px, 4vw, 40px)}
.prose p, .prose li{color:var(--muted); line-height:1.75}
.prose img{max-width:100%; border-radius:14px; border:1px solid var(--border)}
.prose pre{background:var(--card); border:1px solid var(--border); padding:16px; border-radius:12px; overflow:auto}
hr{border:0; border-top:1px dashed var(--border); margin:30px 0}
.tag{display:inline-block; padding:4px 10px; border-radius:999px; background: color-mix(in srgb, var(--accent) 25%, var(--card)); border:1px solid var(--border); color:var(--text); font-size:12px}