 <style>
    :root{
      --bg:#0b3d0b;           /* deep green background */
      --surface:#0e4d0e;      /* slightly lighter panel */
      --panel:#114f11;        /* cards */
      --text:#ffffff;         /* primary text */
      --muted:#d6f5d6;        /* muted text */
      --accent:#b7ffa8;       /* accent for links */
      --accent-2:#ffeb99;     /* soft highlight */
      --border:rgba(255,255,255,.15);
      --shadow:0 4px 20px rgba(0,0,0,.25);
      --radius:14px;
      --gap:1rem;
      --max:1200px;
      --sidebar:320px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font:16px/1.6 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,Apple Color Emoji,Segoe UI Emoji;
      color:var(--text);
      background:radial-gradient(1200px 900px at 20% -10%, #145214 0%, transparent 60%),
                 radial-gradient(1000px 700px at 120% 10%, #134a13 0%, transparent 55%),
                 var(--bg);
    }
    a{color:var(--accent); text-decoration:underline}
    a:hover{opacity:.9}
    img{max-width:100%; height:auto; display:block}
    .container{
      max-width:var(--max);
      margin-inline:auto;
      padding:clamp(16px,3vw,32px);
    }
    header.site{
      display:flex; align-items:center; justify-content:center; gap:.8rem;
      padding:1.2rem; border:1px solid var(--border); border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      box-shadow:var(--shadow);
      text-align:center;
    }
    header.site h1{
      margin:0; font-size:clamp(1.2rem, 2.5vw, 2rem); font-weight:800; letter-spacing:.2px;
    }
    header.site .crest{
      width:48px; height:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
    }

    .layout{
      margin-top:clamp(16px, 2.5vw, 28px);
      display:flex; gap:var(--gap);
      align-items:flex-start;
    }
    aside.sidebar{
      flex:0 1 var(--sidebar);
      position:sticky; top:16px;
      display:flex; flex-direction:column; gap:var(--gap);
    }
    .card{
      background:rgba(255,255,255,.04);
      backdrop-filter:saturate(130%) blur(0px);
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:1rem;
      box-shadow:var(--shadow);
    }
    .card h2, .card h3, .card h4{margin:.2rem 0 0.6rem 0; font-weight:800}
    .card h2{font-size:1.15rem}
    .card h3{font-size:1.05rem}
    .card h4{font-size:1rem}
    .list{
      margin:0; padding-left:1.1rem;
    }
    .list li{margin:.35rem 0}
    .divider{margin:1rem auto; height:2px; width:min(480px, 80%); background:linear-gradient(90deg, transparent, var(--accent-2), transparent); border-radius:4px}

    main.content{
      min-width:0;
      flex:1 1 auto;
      display:flex; flex-direction:column; gap:var(--gap);
    }
    section.block{padding:1.2rem} 
    section.block > h2, section.block > h3{margin-top:0}
    .banner{display:flex; justify-content:center; padding:.5rem 0}
    .center{text-align:center}
    .muted{color:var(--muted)}

    /* tables used for legacy grids -> make them responsive */
    .table-scroll{overflow:auto; border:1px solid var(--border); border-radius:var(--radius)}
    table{border-collapse:collapse; width:100%}
    td,th{padding:.5rem; border-bottom:1px dashed var(--border); vertical-align:top}

    /* responsive */
    @media (max-width:980px){
      .layout{flex-direction:column}
      aside.sidebar{position:static; width:100%}
    }

    /* small utilities */
    .spacer{height:.5rem}
    .hr{height:1px; background:var(--border); border:0; margin:.75rem 0}
    .pill{
      display:inline-block; border:1px solid var(--border); border-radius:999px;
      padding:.25rem .6rem; background:rgba(255,255,255,.06); font-size:.85rem;
    }

    footer.site{
      margin-top:1.25rem; padding:1rem; text-align:center;
      color:var(--muted);
    }
  </style>