*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#fafbfc;
  --surface:#ffffff;
  --text:#1a1a2e;
  --text-muted:#5a5a7a;
  --primary:#2563eb;
  --primary-light:#dbeafe;
  --border:#e5e7eb;
  --radius:12px;
  --shadow:0 2px 12px rgba(0,0,0,.06);
  --max-w:680px;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
@media(prefers-color-scheme:dark){
  :root{
    --bg:#0f1117;
    --surface:#1a1d2e;
    --text:#e8e8f0;
    --text-muted:#9a9ab0;
    --primary:#60a5fa;
    --primary-light:#1e293b;
    --border:#2d2d44;
    --shadow:0 2px 12px rgba(0,0,0,.3);
  }
}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.7;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--primary);text-decoration:none;transition:opacity .2s}
a:hover{opacity:.8}

/* Header */
.site-header{padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:var(--surface)}
.site-header .logo{font-size:1.15rem;font-weight:700;letter-spacing:-.02em}
.lang-switcher{display:flex;gap:.5rem}
.lang-switcher a{padding:.3rem .7rem;border-radius:6px;font-size:.85rem;font-weight:500;border:1px solid var(--border);color:var(--text-muted)}
.lang-switcher a.active,.lang-switcher a:hover{background:var(--primary);color:#fff;border-color:var(--primary)}

/* Main */
main{flex:1;width:100%;max-width:var(--max-w);margin:0 auto;padding:2.5rem 1.5rem}
.page-title{font-size:1.75rem;font-weight:800;margin-bottom:.35rem;letter-spacing:-.03em}
.page-subtitle{font-size:1rem;color:var(--text-muted);margin-bottom:2rem}
.meta{font-size:.85rem;color:var(--text-muted);margin-bottom:2rem}

/* Content sections */
.section{margin-bottom:2rem}
.section-number{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--primary);color:#fff;font-size:.8rem;font-weight:700;margin-right:.5rem}
.section h2{font-size:1.1rem;font-weight:700;margin-bottom:.6rem;display:flex;align-items:center}
.section p,.section ul{color:var(--text-muted);font-size:.93rem}
.section ul{padding-left:1.25rem}
.section ul li{margin-bottom:.3rem}

/* Back link */
.back-link{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;margin-bottom:1.5rem;color:var(--text-muted)}
.back-link:hover{color:var(--primary)}

/* Footer */
.site-footer{padding:1.5rem;text-align:center;font-size:.82rem;color:var(--text-muted);border-top:1px solid var(--border);background:var(--surface)}
.site-footer .brand{font-weight:700;display:block;margin-bottom:.2rem}

/* Home hero */
.hero{text-align:center;padding:4rem 1rem}
.hero h1{font-size:2.2rem;font-weight:800;letter-spacing:-.04em;margin-bottom:.5rem}
.hero p{font-size:1.05rem;color:var(--text-muted);max-width:420px;margin:0 auto 2rem}
.hero-links{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.hero-links a{padding:.6rem 1.4rem;border-radius:8px;font-weight:600;font-size:.9rem;border:1px solid var(--border);transition:all .2s}
.hero-links a:hover{background:var(--primary);color:#fff;border-color:var(--primary)}

@media(max-width:600px){
  .hero h1{font-size:1.6rem}
  main{padding:1.5rem 1rem}
}