/* ===== Theme (Black + Yellow + Green) ===== */
  :root{
    --bg:#081312; 
    --text:#f5f8f7; 
    --muted:#c9d3d0;
    --yellow:#ffd700; 
    --green:#3bd783; 
    --line:#2b3a37;
    --panel:#0f1b19; 
    --panel2:#101414; 
    --error:#ff5a5a;
  }
  html,body{margin:0}
  body{
    background:var(--bg); 
    color:var(--text);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    line-height:1.65;
  }
  *{box-sizing:border-box}
  a{color:var(--green);text-decoration:underline}
  a:hover{color:#b9ffd8}
  img{max-width:100%;height:auto;display:block}
  code{background:#1a1a1a;color:#fff;padding:.15rem .35rem;border-radius:.35rem}
  pre{background:#111;padding:1rem;border-radius:.65rem;overflow:auto}
  .logo{width:120px;height:auto;border-radius:50%}
    p{
      color:var(--white);
      font-size:20px;
    }
  .container{max-width:1200px;margin-inline:auto;padding-inline:24px}
  .skip-link{position:absolute;left:-9999px}
  .skip-link:focus{left:12px;top:12px;background:#000;color:#fff;padding:.5rem .75rem;border-radius:.5rem;z-index:999}
  header{padding:24px 0;border-bottom:1px solid var(--line)}
  h1{color:var(--yellow);font-size:2.8rem;line-height:1.15;margin:.5rem 0 1rem}
  .lede{color:var(--muted);font-size:1.1rem;max-width:75ch}
  h2{color:var(--green);font-size:2rem;margin:2rem 0 1rem}
  h3{color:var(--yellow);font-size:1.35rem;margin:1rem 0 .5rem}
  .section{padding:2rem 0;border-bottom:1px solid var(--line)}
  .section:last-of-type{border-bottom:none}

  .grid{display:grid;gap:1.25rem;grid-template-columns:repeat(12,1fr)}
  .col-7{grid-column:span 7} .col-5{grid-column:span 5}
  @media (max-width: 900px){ .grid{grid-template-columns:1fr} .col-7,.col-5{grid-column:auto} }

  .callout{background:var(--panel);border:1px solid var(--line);border-left:6px solid var(--green);
    border-radius:.75rem;padding:1rem 1.2rem;margin:.8rem 0}
  .callout-yellow{border-left-color:var(--yellow)}
  .callout-red{border-left-color:var(--error)}

  table{width:100%;border-collapse:separate;border-spacing:0;background:var(--panel2);
    border:1px solid var(--line);border-radius:.75rem;margin:1rem 0}
  th,td{padding:.8rem 1rem;text-align:left;vertical-align:top}
  th{background:#0b1110;color:#cfe8df}
  tr+tr td{border-top:1px solid var(--line)}
  .tag{display:inline-block;background:#113a30;border:1px solid #1d5e4c;color:#caffea;
    padding:.15rem .45rem;border-radius:.45rem;font-size:.82rem}

  footer{padding:2rem 0;border-top:1px solid var(--line);text-align:center;color:#aebbb7}