@font-face{font-family:Bangers;src:url(../fonts/bangers.woff2) format("woff2");font-display:swap}
@font-face{font-family:Nunito;src:url(../fonts/nunito.woff2) format("woff2");font-weight:200 1000;font-display:swap}
@font-face{font-family:ComicNeue;src:url(../fonts/comicneue-bold.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --ink:#1b1b1b; --paper:#fff8e7; --card:#fff; --muted:#5b5446;
  --green:#0b6b3a; --red:#d0202e; --yellow:#f6c21c; --blue:#2f4b7c;
  --py:#fff3c4; --pg:#e4f3e8; --pr:#fde3e3; --pb:#e3f1fb; --dot:rgba(0,0,0,.05); --link:#0b5d9e;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#f1ece0; --paper:#17150f; --card:#221f18; --muted:#b9b09c;
  --green:#5fc48a; --red:#ff5a63; --yellow:#f6c21c; --blue:#8fb2ff;
  --py:#2e2812; --pg:#15291d; --pr:#331718; --pb:#152434; --dot:rgba(255,255,255,.04); --link:#8cc8ff;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 Nunito,system-ui,sans-serif;
  background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);background-size:6px 6px}
a{color:var(--link);font-weight:750;text-underline-offset:2px}
h1,h2,h3{font-family:Bangers,Impact,sans-serif;font-weight:400;letter-spacing:.04em;line-height:1.05;margin:0}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px;align-items:center;padding:28px 0 18px}
.hero img{width:100%;height:auto;display:block;border:3px solid #1b1b1b;border-radius:4px;box-shadow:6px 6px 0 #1b1b1b}
.hero h1{font-size:clamp(34px,5vw,56px);text-shadow:3px 3px 0 var(--yellow);color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero h1{text-shadow:3px 3px 0 #7a5a00}}
.hero p.lead{font-family:ComicNeue,sans-serif;font-size:19px;color:var(--green);margin:10px 0 16px}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.btn{display:inline-block;font-family:Bangers,sans-serif;letter-spacing:.05em;font-size:20px;font-weight:400;text-decoration:none;
  color:#1b1b1b;background:var(--yellow);border:3px solid #1b1b1b;border-radius:4px;padding:6px 14px;box-shadow:4px 4px 0 #1b1b1b}
.btn.alt{background:#fff}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #1b1b1b}
.btn small{font-family:Nunito,sans-serif;font-size:12px;letter-spacing:0;display:block;margin-top:-2px}
.e112{display:inline-flex;align-items:center;gap:12px;background:var(--red);color:#fff;border:3px solid #1b1b1b;border-radius:4px;padding:6px 14px;box-shadow:4px 4px 0 #1b1b1b}
.e112 b{font-family:Bangers,sans-serif;font-weight:400;font-size:40px;line-height:1}
.e112 span{font-family:ComicNeue,sans-serif;font-size:14px;line-height:1.25}
/* nav */
nav.toc{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:3px solid var(--ink);margin-bottom:8px}
nav.toc ul{display:flex;gap:8px;overflow-x:auto;list-style:none;margin:0 auto;padding:10px 16px;max-width:1100px;scrollbar-width:thin}
nav.toc a{white-space:nowrap;font-family:Bangers,sans-serif;font-weight:400;letter-spacing:.05em;font-size:16px;text-decoration:none;color:#1b1b1b;
  background:#fff;border:2px solid #1b1b1b;border-radius:3px;padding:2px 10px;box-shadow:2px 2px 0 var(--red);display:block}
/* sections */
section{padding:22px 0 6px;scroll-margin-top:60px}
.sh{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.num{flex:none;width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff;border:3px solid #1b1b1b;box-shadow:3px 3px 0 #1b1b1b;
  display:grid;place-items:center;font-family:Bangers,sans-serif;font-size:26px;padding-top:2px}
.sh h2{font-size:clamp(28px,4vw,38px);text-shadow:2px 2px 0 var(--yellow);color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sh h2{text-shadow:2px 2px 0 #7a5a00}}
.sh p{margin:2px 0 0;font-family:ComicNeue,sans-serif;color:var(--green)}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--card);border:3px solid var(--ink);border-radius:4px;box-shadow:5px 5px 0 var(--ink);padding:14px 16px;min-width:0}
.card.y{background:var(--py)}.card.g{background:var(--pg)}.card.r{background:var(--pr)}.card.b{background:var(--pb)}
.card h3{font-size:22px;color:var(--green);margin-bottom:6px}
.card.danger{background:var(--red);color:#fff}.card.danger h3{color:var(--yellow)}.card.danger a{color:#fff}
.card ul{margin:6px 0 0;padding-left:20px}.card li{margin:4px 0}
.tag{display:inline-block;font-family:Bangers,sans-serif;letter-spacing:.05em;font-size:14px;background:var(--yellow);color:#1b1b1b;border:2px solid #1b1b1b;border-radius:2px;padding:0 8px;transform:rotate(-2deg);margin:0 0 6px}
.links{list-style:none;padding:0!important}
.links li{padding-left:22px;position:relative}
.links li:before{content:"➜";position:absolute;left:0;color:var(--red);font-weight:900}
.small{font-size:14px;color:var(--muted)}
.tbl{width:100%;overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:420px}
th,td{border:2px solid var(--ink);padding:5px 8px;text-align:left;vertical-align:top}
th{background:var(--green);color:#fff;font-family:Bangers,sans-serif;font-weight:400;letter-spacing:.05em;font-size:16px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) th{background:#0b6b3a}}
tr.hl td{background:var(--yellow);color:#1b1b1b;font-weight:800}
.mt{margin-top:18px}
.guia .btns{margin:10px 0 4px;gap:8px}.guia .btn{font-size:17px;padding:4px 11px}
.guia .tag{font-size:15px}
/* calculator */
.calc{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:18px}
.calc label{display:block;font-weight:800;margin:8px 0 2px}
.calc input[type=number]{width:100%;font:inherit;font-size:20px;padding:6px 10px;border:3px solid var(--ink);border-radius:4px;background:var(--card);color:var(--ink)}
.calc .chk{display:flex;gap:8px;align-items:center;font-weight:700;margin-top:10px}
.calc .chk input{width:20px;height:20px}
.pill{display:inline-block;font-family:Bangers,sans-serif;font-size:15px;letter-spacing:.04em;border:2px solid #1b1b1b;border-radius:3px;padding:1px 9px;background:#fff;color:#1b1b1b;margin:6px 6px 0 0;cursor:pointer;font-weight:400}
.pill:hover{background:var(--yellow)}
.res td:last-child{font-weight:900;font-size:17px;white-space:nowrap}
.res td.big{color:var(--red)}
footer{margin-top:30px;border-top:3px solid var(--ink);padding:18px 0 30px;font-size:14px;color:var(--muted)}
footer .credit{font-family:ComicNeue,sans-serif;color:var(--ink);font-size:15px}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;gap:18px;padding-top:16px}
  .hero img{max-width:280px;margin:0 auto}
  nav.site{flex-wrap:wrap}
  .calc{grid-template-columns:1fr}
}
@media print{
  nav.toc,.btns,.pill{display:none}
  body{background:#fff}
  .card{box-shadow:none;break-inside:avoid}
  a{color:#000}
  a[href^="http"]:after{content:" (" attr(href) ")";font-weight:400;font-size:11px}
}
/* top menu (all pages) */
.topbar{background:var(--green);border-bottom:3px solid #1b1b1b}
.topbar .wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.topbar .brand{font-family:Bangers,sans-serif;font-weight:400;letter-spacing:.05em;font-size:22px;color:#fff;text-decoration:none;text-shadow:2px 2px 0 #1b1b1b}
nav.site{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;max-width:100%}
nav.site a{white-space:nowrap;font-family:Bangers,sans-serif;font-weight:400;letter-spacing:.05em;font-size:16px;text-decoration:none;color:#1b1b1b;
  background:#fff;border:2px solid #1b1b1b;border-radius:3px;padding:2px 10px}
nav.site a[aria-current="page"]{background:var(--yellow)}
.net{margin-left:auto;font-family:ComicNeue,sans-serif;font-size:14px;background:var(--yellow);color:#1b1b1b;border:2px solid #1b1b1b;border-radius:3px;padding:1px 8px}
.net[hidden]{display:none}
a.more{font-family:Bangers,sans-serif;font-weight:400;letter-spacing:.05em;font-size:18px;text-decoration:none}
.card ol{margin:6px 0 0;padding-left:22px}.card ol li{margin:4px 0}
button.btn{cursor:pointer;font-family:Bangers,sans-serif}
button.btn:disabled{opacity:.6;cursor:wait}
@media print{.topbar{display:none}}
/* a card with a table gets two columns on wide screens, so the table is not squeezed */
@media (min-width:900px){.grid > .card:has(.tbl){grid-column:span 2}}