:root{
  --bg:233 225 210; --surface:243 237 225; --ink:28 33 37; --muted:92 96 96;
  --rust:255 44 44; --patina:34 112 98; --hazard:160 112 10;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:19 24 28; --surface:28 35 40; --ink:232 223 207; --muted:150 148 138;
    --rust:255 44 44; --patina:92 172 152; --hazard:228 178 62;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:19 24 28; --surface:28 35 40; --ink:232 223 207; --muted:150 148 138;
  --rust:255 44 44; --patina:92 172 152; --hazard:228 178 62;
  color-scheme:dark;
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:rgb(var(--bg));color:rgb(var(--ink));font-family:Barlow,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,canvas{max-width:100%}
.plate{clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.tnum{font-variant-numeric:tabular-nums}
.hazard-stripe{background:repeating-linear-gradient(-45deg,rgb(var(--hazard)) 0 8px,transparent 8px 16px)}
:focus-visible{outline:2px solid rgb(var(--rust));outline-offset:3px}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.35}}
.beat{animation:beat 1.6s ease-in-out infinite}
/* zoom lento na imagem de fundo da página inicial */
@keyframes hero-zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero-img{animation:hero-zoom 2.8s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}