/* Layout: trilha de 4 etapas no topo; cada etapa abre uma grade de cards; rodapé de transparência fixo no fim */
:root{--bg:#0A0B0E;--card:#12141C;--line:#262936;--ok:#6EE7B7;--tan:#6FA6EA;--bad:#E5484D;--acc:#D4AF37;--fg:#F4F1EA;--mute:#9C9EA9;
--ui:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--num:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color-scheme:dark}
body{background-color:var(--bg);background-image:radial-gradient(#1F2330 1px,transparent 1px);background-size:24px 24px;color:var(--fg);font-family:var(--ui);margin:0}
::selection{background:#D4AF37;color:#0A0B0E}
.wrap{max-width:72rem;margin:0 auto;padding-block:16px 32px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.num{font-family:var(--num);font-variant-numeric:tabular-nums}
h1,h2,h3{text-wrap:balance}
@keyframes pu{0%,100%{box-shadow:0 0 0 0 #6fa6ea99}50%{box-shadow:0 0 0 7px #6fa6ea00}}
.pulse{animation:pu 1.4s infinite}
@media (prefers-reduced-motion:reduce){.pulse,.animate-spin{animation:none!important}}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
input[type=checkbox],input[type=radio]{accent-color:#D4AF37}