:root{
      --bg:#f8f9fa;
      --paper:#ffffff;
      --ink:#202122;
      --muted:#54595d;
      --link:#0645ad;
      --link-visited:#0b0080;
      --border:#a2a9b1;
      --infobox:#f5f6f7;
      --radius:6px;
      --max:1080px;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      background:var(--bg);
      color:var(--ink);
      font: 15px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
    }
    a{color:var(--link); text-decoration:none}
    a:hover{text-decoration:underline}
    a:visited{color:var(--link-visited)}
    img,video{max-width:100%; height:auto}

    /* Header */
    .siteheader{
      background:#fff; border-bottom:1px solid var(--border);
    }
    .siteheader-inner{
      max-width:var(--max); margin:0 auto; padding:.75rem 1rem;
      display:flex; align-items:center; justify-content:space-between; gap:12px;
    }
    .brand{
      font-weight:700; letter-spacing:.1px;
    }
    .siteheader nav a{margin:0 .5rem; color:var(--muted)}

    /* Layout: content + sidebar toc */
    .wrap{max-width:var(--max); margin:0 auto; padding:1rem}
    .grid{display:grid; grid-template-columns: 1fr 280px; gap:18px}
    @media (max-width:980px){ .grid{grid-template-columns:1fr} }

    /* Article */
    .article{
      background:var(--paper); border:1px solid var(--border); border-radius:var(--radius);
      padding:clamp(14px,2vw,20px);
    }
    .article h1{
      font-family: Georgia,"Times New Roman",Times,serif;
      font-weight:700; font-size:clamp(26px,4.6vw,34px); margin:4px 0 10px;
    }
    .article h2, .article h3{
      font-family: Georgia,"Times New Roman",Times,serif; font-weight:700;
      border-bottom:1px solid var(--border); padding-bottom:4px; margin-top:1.25rem;
    }
    .article h2{font-size:1.35rem}
    .article h3{font-size:1.1rem}
    .infobox, .toc, .note{
      border:1px solid var(--border); border-radius:var(--radius);
      background:var(--infobox); padding:10px 12px; font-size:.95rem;
    }
    .toc{margin-bottom:14px}
    .infobox h3{border:0; margin:.25rem 0 .4rem; padding:0; font-size:1rem}
    .small{color:var(--muted); font-size:.92rem}

    /* Forms */
    .form{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:end}
    .field{display:flex; flex-direction:column; gap:6px}
    label{font-weight:600}
    input{
      border:1px solid var(--border); border-radius:6px; padding:10px 12px; background:#fff; outline-color:#36c;
    }
    .row{grid-column:1 / -1}
    .btn{display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--border); background:#fff; border-radius:6px; cursor:pointer}
    .btn.primary{background:#36c; color:#fff; border-color:#36c}
    pre.output{
      white-space:pre-wrap; border:1px solid var(--border); background:#fbfbfb; padding:12px; border-radius:6px; min-height:110px;
      font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    }

    /* Sidebar */
    .sidebar{display:flex; flex-direction:column; gap:14px}
    .sidenav a{display:block; padding:4px 0}

    /* Footer */
    footer{color:var(--muted); padding:18px 0 42px}