:root{
      --max-width:1100px;
      --gap:1.25rem;
      --muted:#6b7280;
      --text:#0f1724;
      --accent:#2563eb;
      --card-bg:#ffffff;
      --radius:12px;
      --bg:#f7fafc;
      --container-padding:1rem;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:'Instrument Sans',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      background:var(--bg);
      color:var(--text);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.45;
      -webkit-font-feature-settings: "kern";
    }

    .doc-page{min-height:100vh;display:flex;flex-direction:column;align-items:stretch;padding:2rem 0}
    .doc-container{max-width:var(--max-width);margin:0 auto;padding:0 var(--container-padding);width:100%}

    /* Header */
    .doc-header{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1.25rem}
    .doc-title{font-size:1.6rem;margin:0;color:var(--text);font-weight:700}
    .doc-subtitle{margin:0;color:var(--muted);font-size:0.98rem}

    /* Layout : main / aside */
    .doc-layout{display:grid;grid-template-columns:260px 1fr;gap:1.25rem;align-items:start}
    .toc{position:sticky;top:1rem;background:var(--card-bg);padding:1rem;border-radius:10px;box-shadow:0 6px 20px rgba(15,23,36,0.04)}
    .toc h3{margin:0 0 .5rem;font-size:1rem;color:var(--accent)}
    .toc ul{margin:0;padding:0;list-style:none}
    .toc a{display:block;padding:.35rem 0;color:var(--muted);text-decoration:none;font-size:0.95rem}
    .toc a:hover, .toc a:focus{color:var(--text);text-decoration:underline;outline:none}

    /* Content column */
    .doc-body{display:flex;flex-direction:column;gap:1rem}
    .doc-section{
      display:flex;align-items:center;gap:var(--gap);
      background:var(--card-bg);padding:1.25rem;border-radius:var(--radius);
      box-shadow:0 6px 20px rgba(15,23,36,0.04);
    }

    .doc-media{flex:0 0 360px;max-width:360px;display:flex;align-items:center;justify-content:center}
    .doc-media img{width:100%;height:auto;border-radius:8px;display:block;object-fit:cover}
    .doc-placeholder{width:100%;height:220px;border-radius:8px;background:#f3f4f6;color:var(--muted);display:flex;align-items:center;justify-content:center;font-weight:600}

    .doc-content{flex:1 1 auto;min-width:0}
    .doc-content h2{margin:0 0 .5rem;color:var(--accent);font-size:1.1rem}
    .doc-content p{color:var(--muted);margin:0 0 .75rem}
    .doc-content ul{margin:0 0 .75rem 1.1rem;color:var(--muted)}

    .doc-section.reverse{flex-direction:row-reverse}

    /* Footer mini */
    .doc-footer{text-align:center;color:var(--muted);font-size:0.95rem;padding:1rem 0;margin-top:0.5rem}

    /* Small helpers */
    .kpi{display:inline-block;background:#eef6ff;color:var(--accent);padding:.24rem .5rem;border-radius:999px;font-weight:600;font-size:.85rem;margin-right:.4rem}

    /* Responsive */
    @media (max-width:980px){
      .doc-layout{grid-template-columns:1fr;gap:1rem}
      .toc{order:2;position:relative}
      .doc-section{flex-direction:column}
      .doc-media{width:100%;max-width:100%}
    }

    /* Focus outlines for accessibility */
    a:focus { outline:3px solid rgba(37,99,235,0.12); outline-offset:3px; border-radius:6px }