*{box-sizing:border-box;margin:0;padding:0}
:root{
  --papel:#EFE6D0; --tostado:#E6D8B6; --tinta:#221E1A; --creme:#F4ECD8;
  --tijolo:#E24E22; --mostarda:#E3A22B; --teal:#2B8A87; --navy:#1E4258;
  --vermelho:#C33A1E; --salvia:#9DAE86; --sec:#6E6353;
}
html{-webkit-text-size-adjust:100%}
body{background:var(--papel);color:var(--tinta);font-family:'Archivo',system-ui,sans-serif;
  font-size:17px;line-height:1.6;overflow-x:hidden;position:relative}
body::before{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
.stripe{height:9px;display:flex;width:100%}
.stripe i{flex:1}
.stripe i:nth-child(1){background:var(--navy)}.stripe i:nth-child(2){background:var(--teal)}
.stripe i:nth-child(3){background:var(--mostarda)}.stripe i:nth-child(4){background:var(--tijolo)}
.stripe i:nth-child(5){background:var(--vermelho)}
h1,h2,h3,.poster{font-family:'Fjalla One',Impact,sans-serif;text-transform:uppercase;
  line-height:1.08;font-weight:400;letter-spacing:.01em}
h1{font-size:clamp(34px,6.4vw,62px)}
h2{font-size:clamp(25px,4.2vw,39px)}
h3{font-size:clamp(18px,2.6vw,23px)}
.kick{font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:.2em;
  font-size:11.5px;color:var(--sec);font-weight:700}
.mono{font-family:'Space Mono',monospace}
p{margin:0 0 14px}
.lead{font-size:clamp(17px,2.2vw,20px);color:#413a31;max-width:66ch}
.sec{padding:52px 0;border-top:2px solid var(--tinta)}
.sec.alt{background:var(--tostado)}
.sechead{display:flex;align-items:baseline;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.num{font-family:'Space Mono',monospace;font-size:12px;font-weight:700;background:var(--tinta);
  color:var(--creme);padding:4px 9px;letter-spacing:.14em;white-space:nowrap}
.card{background:var(--papel);border:2px solid var(--tinta);box-shadow:4px 4px 0 var(--tinta);
  padding:20px;border-radius:3px}
.sec.alt .card{background:var(--papel)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.stat{background:var(--papel);border:2px solid var(--tinta);box-shadow:4px 4px 0 var(--tinta);
  padding:16px 14px;border-radius:3px}
.stat b{font-family:'Fjalla One',Impact,sans-serif;font-size:clamp(30px,5vw,44px);
  display:block;line-height:1;color:var(--tijolo)}
.stat.cool b{color:var(--navy)}.stat.warn b{color:var(--vermelho)}.stat.ok b{color:var(--teal)}
.stat span{font-family:'Space Mono',monospace;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.11em;color:var(--sec);display:block;margin-top:8px;line-height:1.45}
.item{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px dashed #b9ab8d}
.item:last-child{border-bottom:0}
.item .tag{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;flex:0 0 auto;
  width:26px;height:26px;display:grid;place-items:center;border:2px solid var(--tinta);border-radius:3px}
.item .tag.y{background:var(--teal);color:#fff}.item .tag.n{background:var(--mostarda)}
.item strong{display:block;font-size:16px}
.item p{margin:3px 0 0;font-size:14.5px;color:#4b4338;line-height:1.5}
table{width:100%;border-collapse:collapse;background:var(--papel);
  border:2px solid var(--tinta);box-shadow:4px 4px 0 var(--tinta)}
th,td{padding:11px 10px;text-align:left;border-bottom:1px solid #cdbf9f;font-size:14px;vertical-align:top}
th{font-family:'Space Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;
  background:var(--tinta);color:var(--creme);border-bottom:0}
td:first-child{font-weight:700}
tr:last-child td{border-bottom:0}
.chip{display:inline-block;font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;padding:3px 7px;border:1.5px solid var(--tinta);border-radius:3px;white-space:nowrap}
.chip.ok{background:var(--teal);color:#fff}
.chip.no{background:var(--vermelho);color:#fff}
.chip.mid{background:var(--mostarda)}
.chip.neu{background:var(--tostado)}
.btn{display:inline-block;background:var(--tijolo);color:var(--creme);text-decoration:none;
  font-family:'Archivo',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:14px 26px;border:2px solid var(--tinta);box-shadow:4px 4px 0 var(--tinta);border-radius:3px;font-size:15px}
.btn.ghost{background:var(--papel);color:var(--tinta)}
.dark{background:var(--tinta);color:var(--creme)}
.dark h2,.dark h3{color:var(--creme)}
.dark .lead,.dark p{color:#d8cdb6}
.dark .kick{color:var(--mostarda)}
.halftone{background-image:radial-gradient(var(--tinta) 1px,transparent 1px);
  background-size:5px 5px;opacity:.09;position:absolute;inset:0;pointer-events:none}
.note{font-size:13.5px;color:var(--sec);font-family:'Space Mono',monospace;line-height:1.55}
.wave{display:block}
footer{border-top:2px solid var(--tinta);padding:30px 0 44px;font-size:13px;color:var(--sec)}
@media(max-width:780px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3,.g2{grid-template-columns:1fr}
  body{font-size:16px}
  .sec{padding:38px 0}
  .tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tablescroll table{min-width:620px}
}