[hidden]{display:none !important;}

  :root{
    --navy:#0D1A2E;
    --navy-2:#132441;
    --navy-3:#1B3054;
    --blue:#378ADD;
    --green:#1D9E75;
    --amber:#BA7517;
    --red:#D0544B;
    --ink:#E8EEF7;
    --ink-dim:#9DB0C9;
    --line:#27415F;
    --mono:"Liberation Mono","DejaVu Sans Mono",Menlo,Consolas,"Courier New",monospace;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--navy);
    color:var(--ink);
    font-family:var(--mono);
    font-size:15px;line-height:1.7;
    padding:0 18px 70px;
  }
  .wrap{max-width:760px;margin:0 auto;}
  a{color:var(--blue);}
  p{margin:0;}

  /* header */
  header{padding:26px 0 20px;border-bottom:2px solid var(--blue);}
  .home{font-size:12px;letter-spacing:1px;text-decoration:none;color:var(--ink-dim);}
  .home:hover{color:var(--blue);}
  .brandline{display:flex;align-items:center;gap:14px;margin-top:14px;}
  .shield{width:64px;height:74px;flex:none;}
  .eyebrow{color:var(--blue);font-size:11.5px;letter-spacing:2px;}
  h1{font-size:clamp(22px,5vw,30px);margin:2px 0 0;letter-spacing:1px;line-height:1.25;}
  .meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px;font-size:13px;color:var(--ink-dim);}
  .meta b{color:var(--ink);}
  .testing{margin-top:14px;font-size:12px;color:var(--amber);border:1px solid var(--amber);border-radius:3px;padding:6px 10px;display:inline-block;}

  /* step rail */
  .rail{position:sticky;top:0;z-index:5;background:var(--navy);padding:12px 0 10px;}
  .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;}
  .steps a{text-decoration:none;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:1px;color:var(--ink-dim);
    background:var(--navy-2);border:1px solid var(--line);border-radius:4px;padding:8px 2px;cursor:pointer;min-width:0;
    display:flex;flex-direction:column;align-items:center;gap:1px;}
  .steps a .n{font-size:10px;letter-spacing:2px;color:var(--ink-dim);}
  .steps a[aria-current="page"]{background:var(--blue);border-color:var(--blue);color:#04121F;}
  .steps a[aria-current="page"] .n{color:#04121F;}
  .steps a.done:not([aria-current="page"]){border-color:var(--green);color:var(--green);}
  .bar{height:3px;background:var(--line);margin-top:10px;border-radius:2px;overflow:hidden;}
  .bar i{display:block;height:100%;width:20%;background:var(--blue);transition:width .25s;}

  button:focus-visible,a:focus-visible,label.opt:focus-within{outline:2px solid var(--blue);outline-offset:2px;}

  /* content */
  section.step{padding-top:22px;display:flex;flex-direction:column;gap:18px;}
  h2{font-size:17px;letter-spacing:1.5px;border-left:4px solid var(--blue);padding-left:12px;margin:0;line-height:1.35;}
  h3{font-size:15px;margin:0;letter-spacing:.5px;}
  .lede{color:var(--ink-dim);}
  .lede b{color:var(--ink);}

  .fact{background:var(--navy-2);border:1px solid var(--line);border-top:3px solid var(--amber);border-radius:5px;padding:18px 20px;display:flex;flex-direction:column;gap:12px;}
  .kicker{font-size:11px;letter-spacing:2px;color:var(--amber);}
  .fact p{color:var(--ink-dim);font-size:14px;}
  .rule{border-left:3px solid var(--green);background:var(--navy-3);padding:10px 14px;border-radius:0 4px 4px 0;display:flex;flex-direction:column;gap:3px;}
  .rule strong{color:var(--green);letter-spacing:.5px;}
  .rule span{font-size:13.5px;color:var(--ink-dim);}
  .aside{font-size:13.5px;color:var(--ink-dim);border-top:1px dashed var(--line);padding-top:14px;}
  .aside b{color:var(--ink);}

  .ex{background:var(--navy-2);border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:5px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;}
  .ex .kicker{color:var(--blue);}
  .ex p{font-size:14px;color:var(--ink);}
  .ex dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;font-size:13px;}
  .ex dt{color:var(--green);letter-spacing:.5px;}
  .ex dd{margin:0;color:var(--ink-dim);min-width:0;}

  .safety{border:1px solid var(--amber);border-radius:5px;padding:12px 16px;font-size:13.5px;color:var(--ink-dim);}
  .safety b{color:var(--amber);}

  .try{background:var(--navy-2);border:1px solid var(--line);border-top:3px solid var(--green);border-radius:5px;padding:18px 20px;display:flex;flex-direction:column;gap:14px;}
  .try .kicker{color:var(--green);}
  .try p{font-size:14px;}
  .code{display:flex;gap:8px;align-items:flex-start;background:var(--navy);border:1px solid var(--line);border-radius:4px;padding:9px 9px 9px 12px;}
  .code pre{margin:0;flex:1;min-width:0;white-space:pre-wrap;word-break:break-word;font-family:var(--mono);font-size:13.5px;line-height:1.55;color:var(--ink);}
  .copy{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1px;background:transparent;color:var(--blue);border:1px solid var(--blue);border-radius:3px;padding:5px 9px;cursor:pointer;flex:none;}
  .copy.ok{background:var(--green);border-color:var(--green);color:#04150F;}
  ul.look{margin:0;padding-left:20px;font-size:14px;color:var(--ink-dim);}
  .tip{font-size:13.5px;color:var(--ink-dim);border-left:3px solid var(--blue);padding:4px 0 4px 12px;}
  .tip b{color:var(--ink);}
  ol.qs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
  ol.qs li{display:flex;gap:10px;align-items:flex-start;}
  ol.qs .num{color:var(--amber);font-weight:700;width:2.5ch;text-align:right;padding-top:9px;flex:none;font-variant-numeric:tabular-nums;}
  ol.qs .code{flex:1;min-width:0;}
  .ticks{display:flex;flex-wrap:wrap;gap:6px;}
  .tick{font-family:var(--mono);font-weight:700;width:38px;height:38px;border-radius:4px;border:1px solid var(--line);background:var(--navy-3);color:var(--ink);cursor:pointer;}
  .tick[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:#1A0F02;}
  .result{font-size:13.5px;color:var(--green);min-height:1.4em;}

  /* quiz */
  form#quiz{display:flex;flex-direction:column;gap:14px;}
  fieldset{border:1px solid var(--line);border-radius:5px;background:var(--navy-2);padding:14px 16px;margin:0;min-width:0;display:flex;flex-direction:column;gap:6px;}
  legend{font-weight:700;padding:0 6px;font-size:14px;}
  label.opt{display:flex;gap:10px;align-items:flex-start;padding:7px 9px;border-radius:4px;cursor:pointer;font-size:13.5px;}
  label.opt:hover{background:var(--navy-3);}
  label.opt input{margin-top:5px;accent-color:var(--blue);}
  label.opt.right{background:rgba(29,158,117,.18);}
  label.opt.wrong{background:rgba(208,84,75,.18);}
  .why{font-size:13px;color:var(--ink-dim);border-top:1px dashed var(--line);padding-top:8px;margin-top:4px;}
  .score{font-weight:700;border-radius:4px;padding:10px 14px;letter-spacing:.5px;}
  .score.pass{background:var(--green);color:#04150F;}
  .score.fail{border:1px solid var(--amber);color:var(--amber);}

  /* keep */
  .card2{background:var(--navy-2);border:2px solid var(--blue);border-radius:10px;padding:22px 18px;display:flex;flex-direction:column;gap:12px;max-width:420px;width:100%;align-self:center;}
  .card2 .top{text-align:center;display:flex;flex-direction:column;gap:4px;align-items:center;}
  .card2 .top small{font-size:10.5px;letter-spacing:2px;color:var(--ink-dim);}
  .card2 .top strong{font-size:19px;letter-spacing:1px;}
  .card2 .f{background:var(--navy-3);border-radius:6px;padding:12px 14px;display:grid;grid-template-columns:auto 1fr;gap:1px 12px;}
  .card2 .f .d{font-size:26px;font-weight:700;color:var(--amber);grid-row:span 4;line-height:1;}
  .card2 .f b{font-size:15px;}
  .card2 .f span{font-size:12.5px;color:var(--ink-dim);}
  .card2 .f em{font-style:normal;font-weight:700;color:var(--green);font-size:13px;}
  .card2 .f i{font-size:12.5px;color:var(--ink-dim);}
  .card2 .foot{text-align:center;font-size:11.5px;color:var(--blue);letter-spacing:1px;}
  .dl{background:var(--navy-2);border:1px solid var(--line);border-top:3px solid var(--green);border-radius:5px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;}
  .dl .kicker{color:var(--green);}
  .dl p{font-size:13.5px;color:var(--ink-dim);}
  .dl p b{color:var(--ink);}

  .btn{display:inline-block;background:var(--blue);color:#04121F;text-decoration:none;border:1px solid var(--blue);
       font-family:var(--mono);font-weight:700;letter-spacing:1px;font-size:13px;padding:11px 18px;border-radius:4px;cursor:pointer;}
  .btn:hover{background:#4C9BE8;}
  .btn.ghost{background:transparent;color:var(--blue);}
  .btn.green{background:var(--green);border-color:var(--green);color:#04150F;}
  .btn[disabled]{opacity:.35;cursor:default;}
  .btnrow{display:flex;gap:10px;flex-wrap:wrap;}

  nav.pager{display:flex;justify-content:space-between;gap:10px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line);}
  .feedback{margin-top:26px;font-size:12.5px;color:var(--ink-dim);border:1px dashed var(--line);border-radius:5px;padding:12px 16px;}
  .feedback b{color:var(--amber);}

  footer{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);text-align:center;color:var(--ink-dim);font-size:11.5px;letter-spacing:1.5px;}

  @media (max-width:520px){
    body{font-size:14.5px;}
    .steps a{text-decoration:none;font-size:10.5px;letter-spacing:.5px;}
    .ex dl{grid-template-columns:1fr;}
    .fact,.try,.ex{padding:16px 14px;}
  }
  @media (prefers-reduced-motion:reduce){.bar i{transition:none;}}

  .steps a:hover:not([aria-current="page"]){border-color:var(--blue);color:var(--ink);}
  a.btn.disabled{opacity:.35;pointer-events:none;}
  .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:11.5px;letter-spacing:1px;color:var(--ink-dim);}
  .crumbs a{color:var(--ink-dim);text-decoration:none;}
  .crumbs a:hover{color:var(--blue);}
  .crumbs b{color:var(--blue);font-weight:700;}
  .crumbs span{color:var(--line);}
  .qtext{font-weight:700;font-size:14px;line-height:1.55;margin:0 0 4px;}

  /* print: "PRINT THIS CARD" prints the white page of the card PDF, one page, exact copy */
  .print-only{display:none;}
  @media print{
    body.print-card{background:#fff !important;padding:0 !important;margin:0 !important;}
    body.print-card > *:not(.print-only){display:none !important;}
    body.print-card .print-only{display:block !important;}
    body.print-card .print-only img{display:block;width:5in;height:7in;margin:0.5in auto 0;}
  }