:root { color-scheme: dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #1a1a1a; color: #ccc; }
* { box-sizing: border-box; }
body { margin: 0; background: #1a1a1a; color: #ccc; line-height: 1.7; }
a { color: #64b5f6; }
.main-nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; border-bottom: 1px solid #333; background: #111; }
.nav-logo { color: #fff; font-size: 1.1rem; font-weight: 800; text-decoration: none; }
.nav-links { display: flex; gap: 20px; }
.nav-links a { color: #aaa; font-size: .9rem; font-weight: 500; text-decoration: none; }
.nav-links a:hover { color: #fff; }
.menu-toggle { display: none; border: 0; background: none; color: #fff; cursor: pointer; font-size: 1.5rem; }
.container { max-width: 800px; margin: 0 auto; padding: 40px 20px; }
h1 { color: #fff; }
h2 { margin-top: 32px; color: #64b5f6; font-size: 1.2rem; }
.back-btn { display: inline-block; margin-bottom: 20px; padding: 10px 20px; border: 1px solid #444; border-radius: 20px; color: #aaa; text-decoration: none; }
.back-btn:hover { border-color: #666; background: #333; color: #fff; }
code { padding: 2px 5px; border-radius: 4px; background: #2a2a2a; }
footer { margin-top: 40px; padding: 40px 20px; border-top: 1px solid #333; color: #666; font-size: .8rem; text-align: center; }
@media (max-width: 700px) {
  .nav-links { position: absolute; top: 100%; right: 0; left: 0; display: none; flex-direction: column; padding: 20px; border-bottom: 1px solid #333; background: #1a1a1a; text-align: center; }
  .nav-links.active { display: flex; }
  .menu-toggle { display: block; }
}