:root{
    --paper:#ffffff;
    --bg:#eef1f4;
    --ink:#14263b;
    --muted:#5b6b7b;
    --faint:#8a97a4;
    --rule:#e2e7ec;
    --teal:#0e7c86;
    --teal-wash:#e5f2f2;
    --amber:#a85a09;
    --amber-wash:#fbf1e3;
    --grid:#f2f5f7;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:"Newsreader",Georgia,"Times New Roman",serif;
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    padding:34px 18px 60px;
  }
  .sheet{
    max-width:840px;margin:0 auto;background:var(--paper);
    border:1px solid var(--rule);
    box-shadow:0 1px 2px rgba(20,38,59,.04),0 18px 46px -20px rgba(20,38,59,.28);
    padding:46px 52px 50px;
  }
  .mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
  .eyebrow{
    font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;
    letter-spacing:.18em;text-transform:uppercase;color:var(--teal);
    display:flex;gap:14px;align-items:center;
  }
  .eyebrow::after{content:"";height:1px;flex:1;background:var(--rule)}
  h1{
    font-family:"Space Grotesk",sans-serif;font-weight:700;
    font-size:34px;line-height:1.1;letter-spacing:-.01em;
    margin:16px 0 8px;color:var(--ink);
  }
  .dek{font-size:18px;color:var(--muted);margin:0 0 4px;max-width:62ch}
  h2{
    font-family:"Space Grotesk",sans-serif;font-weight:600;
    font-size:13px;letter-spacing:.02em;text-transform:uppercase;
    color:var(--ink);margin:0 0 14px;display:flex;align-items:baseline;gap:10px;
  }
  h2 mjx-container{text-transform:none}
  h2 .num{
    font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;
    color:var(--teal);letter-spacing:.05em;
  }
  section{padding:26px 0;border-top:1px solid var(--rule)}
  section:first-of-type{border-top:none}
  p{margin:0 0 14px}
  p:last-child{margin-bottom:0}
  strong{font-weight:600}
  a{color:var(--teal)}

  .def{
    background:var(--grid);border-left:3px solid var(--teal);
    padding:18px 22px;margin:4px 0 18px;
  }
  .def .label{
    font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:6px;
  }
  .warn{background:var(--amber-wash);border-left-color:var(--amber)}
  .warn .label{color:var(--amber)}
  .note{
    font-size:14.5px;color:var(--muted);line-height:1.55;
    border-top:1px dashed var(--rule);margin-top:16px;padding-top:14px;
  }
  .note b{color:var(--ink);font-weight:600}
  mjx-container[display="true"]{margin:16px 0 !important}

  .keybox{
    border:1px solid var(--teal);background:var(--teal-wash);
    padding:16px 22px;margin:18px 0 6px;text-align:center;
  }
  .keybox .cap{
    font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--teal);margin-bottom:2px;
  }

  table.tight{width:100%;border-collapse:collapse;font-size:13.5px;margin:2px 0 6px}
  table.tight td{padding:5px 8px;vertical-align:baseline;border-bottom:1px solid var(--rule)}
  table.tight td:first-child{
    font-family:"IBM Plex Mono",monospace;white-space:nowrap;
    width:1%;padding-right:18px;color:var(--teal);
  }
  table.tight td:last-child{text-align:left}
  table.tight tbody tr:last-child td{border-bottom:none}

  ul.plain,ol.plain{margin:0 0 14px;padding-left:20px}
  ul.plain li,ol.plain li{margin-bottom:7px}
  .caveats{font-size:15px;color:var(--muted)}
  .caveats li{margin-bottom:9px}
  .caveats b{color:var(--ink);font-weight:600}

  @media (max-width:680px){
    body{padding:14px 8px 40px;font-size:16px}
    .sheet{padding:30px 22px 34px}
    h1{font-size:27px}
  }
  @media print{
    body{background:#fff;padding:0}
    .sheet{box-shadow:none;border:none;max-width:none;padding:0 8px}
  }

  /* ---------------------------------------------------------------
     Below this line is NOT from the source write-up. It styles the
     blog wrapper -- site nav and series preamble -- that sits outside
     the .sheet on meninderpurewal.com. Everything above is verbatim.
     --------------------------------------------------------------- */

  .pagenav{
    max-width:840px;margin:0 auto 16px;
    font-family:"Space Grotesk",-apple-system,system-ui,sans-serif;
    font-size:13px;color:var(--faint);
  }
  .pagenav a{color:var(--muted);text-decoration:none}
  .pagenav a:hover{color:var(--teal);text-decoration:underline}
  .pagenav.foot{margin:22px auto 0}

  .preamble{
    max-width:840px;margin:0 auto 20px;
    font-family:"Space Grotesk",-apple-system,system-ui,sans-serif;
    font-size:14.5px;line-height:1.62;color:var(--muted);
  }
  .preamble p{margin:0;max-width:72ch}
  .preamble .series{
    font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;color:var(--teal);
    margin-bottom:7px;
  }
  .preamble .series a{color:var(--teal);text-decoration:none}
  .preamble .series a:hover{text-decoration:underline}
  .preamble em{font-family:"Newsreader",Georgia,serif;font-size:15.5px}

  @media (max-width:680px){
    .pagenav,.preamble{font-size:13.5px}
  }
  @media print{
    .pagenav,.preamble{display:none}
  }