:root{
    --bg:#F5F0ED;          /* same background family as your PNG */
    --text:#000000;
    --nav-bg:rgba(0,0,0,0.03);
    --nav-border:rgba(0,0,0,0.08);
    --nav-hover:rgba(0,0,0,0.06);
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  }
  
  /* Navbar */
  .nav{
    position:sticky;top:0;z-index:10;
    display:flex;align-items:center;gap:16px;
    padding:10px 16px;
    background:var(--nav-bg);
    border-bottom:1px solid var(--nav-border);
    backdrop-filter:blur(6px);
  }
  .nav .brand img{height:36px;display:block}
  .nav .links{margin:0 auto;display:flex;gap:20px}
  .nav .links a{
    text-decoration:none;color:#111;
    padding:8px 12px;border-radius:10px;
    transition:background-color .15s ease, transform .1s ease;
  }
  .nav .links a:hover{background:var(--nav-hover)}
  .nav .links a.active{background:var(--nav-hover);font-weight:600}
  .nav .links a:active{transform:scale(.98)}
  
  /* Content */
  .container{max-width:900px;margin:24px auto;padding:0 16px 64px}
  .doc h1,.doc h2,.doc h3{line-height:1.25;margin:1.2em 0 .4em}
  .doc h1{font-size:2rem}
  .doc h2{font-size:1.4rem}
  .doc h3{font-size:1.15rem}
  .doc p,.doc li{font-size:1rem}
  .doc ul{padding-left:1.2em}
  .doc .meta{color:#333;font-size:.95rem}