:root{
--bg:#ffffff;
--text:#111;
--card:#f3f3f3;
--accent:#0d6efd;
}

body.dark{
--bg:#0f0f0f;
--text:#f2f2f2;
--card:#1c1c1c;
}

body{
margin:0;
font-family:system-ui;
background:var(--bg);
color:var(--text);
line-height:1.7;
}

nav{
display:flex;
justify-content:space-between;
padding:15px 20px;
background:var(--card);
position:sticky;
top:0;
}

.container{
max-width:900px;
margin:auto;
padding:40px 20px;
}

.card{
background:var(--card);
padding:30px;
border-radius:16px;
margin-top:20px;
}

a{color:var(--accent); text-decoration:none}

@media (max-width: 700px) {
  .nav-links {
    display: none !important;
  }
  .nav-links.open {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 60px;
    right: 1rem;
    background: var(--card);
    border: 1px solid #333;
    padding: 1rem;
    border-radius: 8px;
    z-index: 100;
    gap: 0.75rem;
  }
  .hamburger {
    display: flex !important;
  }
}