:root{--bg:#0f172a;--card:#1e293b;--text:#e2e8f0;--muted:#94a3b8;--accent:#38bdf8}
[data-theme="light"]{--bg:#f1f5f9;--card:#ffffff;--text:#0f172a;--muted:#475569;--accent:#0284c7}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;transition:.3s}
header{background:var(--card);padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}
nav{display:flex;align-items:center;gap:1.5rem}
nav a{color:var(--text);text-decoration:none;font-weight:500}
nav a:hover{color:var(--accent)}
main{max-width:900px;margin:80px auto;padding:0 2rem}
.hero{background:var(--card);padding:60px;border-radius:16px;text-align:center}
footer{text-align:center;padding:2rem;color:var(--muted)}
.theme{width:34px;height:34px;border-radius:50%;border:2px solid var(--muted);cursor:pointer;background:linear-gradient(to right,#000 50%,#fff 50%);padding:0}