/* Arquivo 03:17 — camada visual 404 (25/10/2026). Paleta da bíblia 80/15/5: preto-azulado, âmbar-brasa, vermelho-falha só em picos; ciano só dentro do glitch. */
:root{color-scheme:dark;--bg:#050608;--bg2:#0b0a0b;--panel:rgba(14,11,10,.86);--ink:#f0e2cb;--muted:#b9aa97;--dim:#8c8173;--ember:#ff7a1a;--ember-hi:#ffb072;--fault:#c1121f;--glitch:#7fd6e0;--line:#2c201a;--line-hi:#4a3426;--glow:rgba(255,122,26,.38);
--display:Impact,"Haettenschweiler","Bahnschrift SemiCondensed","Arial Narrow Bold","Arial Narrow",sans-serif;--mono:Consolas,"Cascadia Mono","SFMono-Regular",Menlo,"Roboto Mono","Liberation Mono",monospace;--head-h:72px}
*{box-sizing:border-box}
html{scroll-padding-top:96px;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:16px;line-height:1.7;overflow-x:hidden;min-height:100vh}
button,a{-webkit-tap-highlight-color:transparent}
a{color:var(--ember)}
:focus-visible{outline:3px solid var(--ember-hi);outline-offset:4px}
[hidden]{display:none!important}
p{margin:0 0 1.2em}
b{color:var(--ember-hi);font-weight:700}

/* ---------- atmosfera (sempre visível; só a animação depende de Efeitos) ---------- */
.fx{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.fx>div{position:absolute;inset:0}
.fx-marca{background:url('assets/logo-404-sm.png') center 62%/min(88vw,720px) no-repeat;opacity:.05;filter:grayscale(.3) contrast(1.2)}
.fx-luz{background:radial-gradient(ellipse 70% 42% at 50% 0%,rgba(255,122,26,.15),transparent 70%)}
.fx-grao{inset:-50%;background:url('assets/grain.svg');opacity:.07;mix-blend-mode:screen}
.fx-linhas{background:repeating-linear-gradient(to bottom,rgba(255,255,255,.028) 0 1px,transparent 1px 3px)}
.fx-vinheta{background:radial-gradient(ellipse at center,transparent 38%,rgba(0,0,0,.9) 100%)}
body.threat .fx-luz{background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(193,18,31,.2),transparent 72%)}
body.threat .fx-vinheta{background:radial-gradient(ellipse at center,transparent 26%,rgba(0,0,0,.95) 100%)}
.effects .fx-grao{animation:grao .9s steps(4) infinite}
.effects .fx-luz{animation:falha 7s steps(1) infinite}
.effects .fx-marca{animation:respira 9s ease-in-out infinite}
@keyframes grao{0%,100%{transform:translate(0,0)}25%{transform:translate(-6%,4%)}50%{transform:translate(5%,-3%)}75%{transform:translate(-3%,-6%)}}
@keyframes falha{0%,100%{opacity:1}41%{opacity:.25}42%{opacity:1}43%{opacity:.45}44%{opacity:1}78%{opacity:.15}79%{opacity:.9}}
@keyframes respira{0%,100%{opacity:.035}50%{opacity:.08}}

/* ---------- cabeçalho: selo fixo no alto à esquerda ---------- */
.skip{position:fixed;left:12px;top:-100px;background:var(--bg);color:var(--ember);padding:12px;z-index:30}
.skip:focus{top:12px}
.masthead{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;height:var(--head-h);padding:0 max(20px,calc((100vw - 1240px)/2));background:linear-gradient(180deg,rgba(5,6,8,.97),rgba(5,6,8,.88));border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:14px;opacity:.92;min-width:0}
.brand img{width:96px;height:auto;display:block;filter:drop-shadow(0 0 14px rgba(255,122,26,.28))}
.brand-tag{font-size:11px;letter-spacing:.22em;color:var(--muted);white-space:nowrap}
.rec-dot{color:var(--fault);font-weight:400}
.effects .rec-dot{animation:pisca 1.2s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}
.controls{display:flex;gap:8px;flex-shrink:0}
.pill{font:inherit;font-size:12px;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 15px;background:rgba(3,3,4,.85);color:var(--ink);border:1px solid var(--line-hi);border-radius:40px;cursor:pointer;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dim);flex-shrink:0}
.pill[aria-pressed=true]{border-color:var(--ember);color:var(--ember-hi)}
.pill[aria-pressed=true]::before{background:var(--ember);box-shadow:0 0 10px var(--ember)}
.pill:hover{border-color:var(--ember)}
.pill:disabled{cursor:wait;opacity:.65}

main{position:relative;z-index:2;max-width:1240px;margin:auto;padding:calc(var(--head-h) + 28px) 32px 24px;min-height:80vh}

/* ---------- tipografia ---------- */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.24em;color:var(--ember);text-transform:uppercase;text-shadow:0 0 10px rgba(255,122,26,.4);margin-bottom:12px}
h1,h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.025em;line-height:.98;margin:0 0 20px;color:var(--ink)}
.glitch{position:relative;text-shadow:0 0 22px rgba(255,122,26,.3),2px 1px 0 rgba(193,18,31,.55),0 2px 0 #000}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:0}
.glitch::before{color:#ff2a1a;clip-path:inset(0 0 62% 0)}
.glitch::after{color:var(--glitch);clip-path:inset(58% 0 0 0)}
.effects .glitch::before{animation:corte1 3.4s infinite steps(1)}
.effects .glitch::after{animation:corte2 2.9s infinite steps(1)}
@keyframes corte1{0%,86%,100%{transform:translate(0);opacity:0}87%{transform:translate(-5px,-1px);opacity:.75}90%{transform:translate(4px,1px);opacity:.75}93%{opacity:0}}
@keyframes corte2{0%,80%,100%{transform:translate(0);opacity:0}81%{transform:translate(5px,1px);opacity:.65}85%{transform:translate(-3px,0);opacity:.65}88%{opacity:0}}
.small{font-size:12.5px;line-height:1.75;color:var(--dim)}

/* ---------- botões ---------- */
button{font:inherit;cursor:pointer}
.primary,.ghost,#erase-yes{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-weight:700;border-radius:6px;min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:14px;text-decoration:none}
.primary{background:linear-gradient(180deg,#ff8d35,#d4600f);color:#140904;border:0;padding:16px 26px;font-size:15px;box-shadow:0 0 0 1px #000,0 0 28px var(--glow)}
.effects .primary{animation:chama 2.2s ease-in-out infinite}
.primary:hover{filter:brightness(1.15)}
.primary span{transition:transform .2s}
.primary:hover span{transform:translateX(4px)}
@keyframes chama{50%{box-shadow:0 0 0 1px #000,0 0 40px rgba(255,122,26,.65)}}
.ghost{background:rgba(3,3,4,.7);color:var(--ember-hi);border:1px solid var(--ember);padding:12px 20px;font-size:13px}
.ghost:hover{background:#21130a}
#erase-yes{background:var(--fault);color:#fff;border:0;padding:12px 20px;font-size:13px}

/* ---------- a "tela" (quadro recuperado) ---------- */
.tela{position:relative;border:1px solid #3a2a20;border-radius:6px;overflow:hidden;background:#000;box-shadow:0 0 0 1px #000,0 0 60px rgba(255,122,26,.16),0 30px 80px rgba(0,0,0,.9);isolation:isolate}
.tela .frame{position:absolute;inset:0;background:#000 url('assets/f-hosp-1.jpg') center 40%/cover no-repeat;filter:contrast(1.12) saturate(.85) brightness(.92)}
.tela::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.28) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.75) 100%)}
.tela::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.65),transparent 18%,transparent 78%,rgba(0,0,0,.8))}
.tela-hud,.tela-foot{position:absolute;left:0;right:0;z-index:4;display:flex;justify-content:space-between;gap:10px;padding:12px 14px;font-size:11px;letter-spacing:.16em;color:#e9d9c2;text-shadow:0 1px 2px #000}
.tela-hud{top:0}.tela-foot{bottom:0;color:var(--ember-hi)}
.tela.troca .frame{animation:troca .45s steps(3,end) 1}
@keyframes troca{0%{filter:brightness(2.2) contrast(2) saturate(0);transform:translateX(-6px)}40%{filter:brightness(.3);transform:translateX(5px)}70%{filter:hue-rotate(80deg) contrast(1.4);transform:translateX(-2px)}100%{filter:contrast(1.12) saturate(.85) brightness(.92);transform:none}}
.effects .tela .frame{animation:respiro 12s ease-in-out infinite}
@keyframes respiro{50%{transform:scale(1.035)}}

/* imagem por registro — cenário único: corredor de hospital (f-hosp-1/2/3 + f-hospital). Quadros antigos de corredor acarpetado saíram de uso. */
body[data-scene=entrada] .tela-scene .frame,body[data-scene=repeticao] .tela-scene .frame{background-image:url('assets/f-hosp-1.jpg');background-position:center 46%}
body[data-scene=livro] .tela-scene .frame,body[data-scene=etiqueta] .tela-scene .frame{background-image:url('assets/f-hospital.jpg');background-position:center 55%}
body[data-scene=etiqueta] .tela-scene .frame{background-position:center 80%}
body[data-scene=confronto] .tela-scene .frame{background-image:url('assets/f-hosp-1.jpg');background-size:190%;background-position:50% 44%}
body[data-scene=segunda] .tela-scene .frame{background-image:url('assets/f-hosp-2.jpg');background-position:center 6%}
body[data-scene=soleira] .tela-scene .frame{background-image:url('assets/f-hosp-3.jpg');background-position:center 72%}
body[data-scene=terceira] .tela-scene .frame{background-image:url('assets/f-hosp-2.jpg');background-size:135%;background-position:52% 8%}
body[data-scene=decisao] .tela-scene .frame{background-image:url('assets/f-hospital.jpg');background-size:210%;background-position:50% 42%}
body[data-scene=saida] .tela-scene .frame{background-image:url('assets/f-hospital.jpg');background-position:center 60%;filter:contrast(1.05) saturate(.5) brightness(1.08)}
body[data-scene=retido] .tela-scene .frame{background-image:url('assets/f-hosp-1.jpg');background-size:150%;background-position:50% 40%}
body.threat .tela-scene .frame{filter:contrast(1.25) saturate(.7) brightness(.8) sepia(.15)}
body.threat .tela-scene{border-color:#5a1a14;box-shadow:0 0 0 1px #000,0 0 70px rgba(193,18,31,.25),0 30px 80px rgba(0,0,0,.9)}

/* ---------- capa ---------- */
.landing{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:start;padding-bottom:24px}
.hero-copy{grid-column:1;grid-row:1}
.hero-art{grid-column:2;grid-row:1;display:flex;justify-content:center;align-self:start;padding-top:6px}
.tela-hero{width:min(100%,430px);aspect-ratio:4/5;max-height:calc(100vh - var(--head-h) - 64px)}
.tela-hero .frame{background-position:center 42%}
.tela-video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center 34%;opacity:0;transition:opacity .9s;filter:contrast(1.14) saturate(.6) sepia(.22) brightness(.86);pointer-events:none}
.tela-hero.rodando .tela-video{opacity:1}
.hero-copy h1{font-size:clamp(64px,8.4vw,122px);margin-bottom:14px}
.hero-copy h1 span{color:var(--ember);display:block;text-shadow:0 0 30px rgba(255,122,26,.45),3px 1px 0 rgba(193,18,31,.6)}
.subtitle{font-family:var(--display);text-transform:uppercase;letter-spacing:.2em;font-size:19px;color:var(--muted);margin-bottom:20px}
.intro{font-family:var(--display);text-transform:uppercase;font-size:26px;line-height:1.15;letter-spacing:.03em;margin-bottom:16px;color:var(--ink)}
.lead{font-size:16px;color:#d8cbb8;max-width:560px;margin-bottom:24px}
.entry-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.file-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.file-meta span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ember-hi);border:1px solid var(--line-hi);border-radius:40px;padding:4px 12px;background:rgba(3,3,4,.6)}
.notice{font-size:13px;color:var(--muted);border-left:2px solid var(--ember);padding:2px 0 2px 14px;margin:0 0 12px;max-width:560px}
.notice p{margin:0}
.hero-copy .small{max-width:560px;margin:0}

/* ---------- jogo ---------- */
.signal-line{display:flex;justify-content:space-between;gap:15px;font-size:12px;letter-spacing:.2em;color:var(--muted);margin:0 0 10px}
.signal-line .rec{color:var(--ember)}
.progress{height:4px;background:repeating-linear-gradient(90deg,#2a1e17 0 calc(12.5% - 3px),transparent calc(12.5% - 3px) 12.5%);position:relative}
.progress span{display:block;height:100%;width:12.5%;background:var(--ember);box-shadow:0 0 12px var(--glow);transition:width .5s}
.progress .step-1{width:12.5%}.progress .step-2{width:25%}.progress .step-3{width:37.5%}.progress .step-4{width:50%}
.progress .step-5{width:62.5%}.progress .step-6{width:75%}.progress .step-7{width:87.5%}.progress .step-8{width:100%}
.game-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:56px;padding:36px 0 40px;align-items:start}
.side{position:sticky;top:calc(var(--head-h) + 20px);display:grid;gap:22px}
.tela-scene{aspect-ratio:4/3;width:100%;max-height:44vh}
#scene-title:focus,main:focus{outline:none}
.tela-scene .frame{background-position:center 38%}
.record h1{font-size:clamp(40px,4.6vw,64px)}
.record .eyebrow{margin-bottom:10px}
.prose{font-size:16.5px;line-height:1.85;color:#e6d8c3;max-width:68ch}
.prose p{margin:0 0 .75em}
.prose p.novo{margin-top:1.45em}
.prose p:first-child{margin-top:0}
.prose p.ameaca{position:relative;margin:1.5em 0 1.3em;padding:14px 20px;font-family:var(--display);text-transform:uppercase;font-size:clamp(21px,2.1vw,27px);line-height:1.15;letter-spacing:.035em;color:#ffd9c2;background:linear-gradient(90deg,rgba(193,18,31,.24),rgba(193,18,31,.04) 70%,transparent);border-left:3px solid var(--fault);border-radius:2px;text-shadow:2px 1px 0 rgba(193,18,31,.65),0 0 18px rgba(255,60,40,.25)}
.prose p.ameaca::after{content:"SINAL";position:absolute;left:-3px;top:0;transform:translateY(-100%);padding:2px 7px 1px;font-family:var(--mono);font-size:9.5px;line-height:1.3;letter-spacing:.24em;color:#ffe6dc;background:rgba(193,18,31,.85);border-radius:2px 2px 0 0;text-shadow:none}
.effects .prose p.ameaca{animation:ameaca 4.2s steps(1) infinite}
@keyframes ameaca{0%,91%,100%{transform:none}92%{transform:translateX(2px);text-shadow:-2px 0 rgba(127,214,224,.45),3px 1px #c1121f}94%{transform:translateX(-2px)}}
.prose p:first-child:not(.ameaca)::first-letter{font-family:var(--display);font-size:3.1em;float:left;line-height:.9;padding:4px 10px 0 0;color:var(--ember);text-shadow:0 0 16px rgba(255,122,26,.4)}
.route-summary{border:1px solid var(--line-hi);border-left:3px solid var(--ember);background:var(--panel);padding:12px 16px;color:var(--ink);border-radius:4px}
.transcript{margin:30px 0;padding:22px 24px;background:linear-gradient(90deg,rgba(40,16,10,.55),rgba(5,4,4,.85));border:1px solid #3a2318;border-left:3px solid var(--ember);border-radius:6px;box-shadow:inset 0 0 40px rgba(0,0,0,.7),0 0 40px rgba(143,29,20,.12)}
.transcript figcaption{font-size:11px;color:var(--ember);letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px}
blockquote{margin:0;font-family:var(--display);text-transform:uppercase;font-size:clamp(22px,2.4vw,30px);line-height:1.18;letter-spacing:.03em;white-space:pre-line;color:#f6ead6;text-shadow:2px 1px 0 rgba(193,18,31,.5),0 0 18px rgba(255,122,26,.25)}
.choice-prompt{font-size:13px;color:var(--ember-hi);letter-spacing:.14em;text-transform:uppercase;margin:34px 0 14px}
.choices{display:grid;gap:12px}
.choices button{position:relative;width:100%;text-align:left;font-family:var(--mono);font-size:15.5px;line-height:1.5;color:var(--ink);padding:18px 52px 18px 64px;min-height:64px;background:linear-gradient(90deg,rgba(18,14,13,.95),rgba(8,7,7,.92));border:1px solid #2e211a;border-left:3px solid var(--line-hi);border-radius:6px;box-shadow:inset 0 0 30px rgba(0,0,0,.6);transition:border-color .2s,background .2s,box-shadow .2s,transform .2s}
.choices button::before{content:attr(data-number);position:absolute;left:20px;top:50%;transform:translateY(-50%);font-size:13px;letter-spacing:.1em;color:var(--ember)}
.choices button::after{content:"→";position:absolute;right:20px;top:50%;transform:translateY(-50%);color:var(--dim);transition:transform .2s,color .2s}
.choices button:hover,.choices button:focus-visible{border-color:var(--ember);border-left-color:var(--ember);background:linear-gradient(90deg,rgba(48,22,10,.95),rgba(10,8,7,.95));box-shadow:0 0 26px rgba(255,122,26,.22),inset 0 0 30px rgba(0,0,0,.5)}
.choices button:hover::after{color:var(--ember);transform:translate(4px,-50%)}
body.threat .choices button{border-left-color:#6b1a14}
.dossier{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:18px 20px;box-shadow:inset 0 0 40px rgba(0,0,0,.6)}
.dossier .eyebrow{margin-bottom:4px}
.dossier>.small{margin-bottom:6px}
.dossier details{border-top:1px solid var(--line);font-size:14px}
.dossier summary{cursor:pointer;min-height:46px;display:flex;align-items:center;gap:10px;list-style:none;color:var(--ink);font-size:13.5px;letter-spacing:.04em}
.dossier summary::-webkit-details-marker{display:none}
.dossier summary::before{content:"+";color:var(--ember);font-size:16px;width:12px}
.dossier details[open] summary::before{content:"−"}
.dossier summary:hover{color:var(--ember-hi)}
.dossier details p{color:var(--muted);margin:0 0 14px 22px;font-size:13.5px;line-height:1.75}
.dossier-foot{margin:12px 0 0;border-top:1px solid var(--line);padding-top:12px}
.session-tools{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:20px;align-items:center}
.session-tools p{margin:0}
.erase-confirm{margin-top:18px;border:1px solid var(--fault);background:rgba(40,8,8,.6);border-radius:6px;padding:20px;font-size:14px}
.erase-confirm button{margin:0 8px 8px 0}
.ending-actions{margin-top:30px;padding:26px;border:1px solid #3a2318;border-radius:8px;background:linear-gradient(180deg,rgba(40,16,10,.6),rgba(5,4,4,.95));box-shadow:0 0 50px rgba(143,29,20,.18)}
.ending-tag{font-size:11px;letter-spacing:.24em;color:#f0564a;margin-bottom:8px}
.ending-cta{font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,3vw,40px);line-height:1.05;color:var(--ember);text-shadow:0 0 24px rgba(255,122,26,.4);margin-bottom:20px}
.social{margin-bottom:8px}
#replay{margin-top:10px}
.system-status{color:var(--ink);font-size:13px}
footer{position:relative;z-index:2;max-width:1240px;margin:auto;padding:22px 32px 36px;border-top:1px solid #1d1512;font-size:11px;letter-spacing:.14em;color:var(--dim)}
footer .foot-brand{color:var(--muted)}
footer>span[aria-hidden]{color:var(--ember);padding:0 10px}
footer .small{letter-spacing:.04em}

/* chegada de registro */
.effects .record.arrival h1{animation:tracking .48s steps(2,end) 1}
@keyframes tracking{0%,100%{transform:translateX(0)}25%{transform:translateX(3px);text-shadow:-3px 0 rgba(127,214,224,.5),3px 1px #c1121f}50%{transform:translateX(-3px)}75%{transform:translateX(1px)}}

/* ---------- responsivo ---------- */
@media(max-height:760px) and (min-width:801px){.hero-copy h1{font-size:clamp(60px,7vw,98px)}.intro{font-size:22px}.lead{font-size:15px;margin-bottom:18px}.subtitle{margin-bottom:14px}}
@media(max-width:1000px) and (min-width:801px){.game-layout{gap:32px;grid-template-columns:minmax(0,1.4fr) minmax(250px,1fr)}}
@media(max-width:800px){
  :root{--head-h:62px}
  .masthead{padding:0 16px}
  .brand img{width:76px}
  .brand-tag{display:none}
  .brand{flex-shrink:0}
  .controls{gap:6px}
  .pill{font-size:10.5px;padding:6px 10px;gap:0;letter-spacing:.02em;min-height:44px}
  .pill::before{display:none}
  .pill[aria-pressed=true]{background:#2a1408}
  main{padding:calc(var(--head-h) + 0px) 16px 24px}
  .landing{display:block;min-height:0}
  .hero-art{display:block;margin:0 -16px}
  .tela-hero{width:100%;max-height:none;aspect-ratio:10/9;border-radius:0;border-left:0;border-right:0;box-shadow:none}
  .tela-hero::after{background:linear-gradient(180deg,rgba(0,0,0,.6),transparent 20%,transparent 55%,var(--bg) 100%)}
  .tela-hero .tela-foot{display:none}
  .hero-copy{position:relative;margin-top:-118px;z-index:5}
  .hero-copy h1{font-size:clamp(58px,19vw,92px)}
  .intro{font-size:23px}
  .lead{font-size:15.5px}
  .entry-actions .primary{width:100%;justify-content:space-between}
  .entry-actions .ghost{width:100%}
  .game{padding-top:16px}
  .game-layout{display:flex;flex-direction:column;gap:26px;padding:22px 0 32px}
  .side{display:contents}
  .tela-scene{order:-1;aspect-ratio:16/10;margin:0 -16px;width:calc(100% + 32px);border-radius:0;border-left:0;border-right:0}
  .record h1{font-size:clamp(36px,11vw,50px)}
  .prose{font-size:16px;line-height:1.8}
  .prose p.ameaca{padding:12px 14px 12px 16px;font-size:21px}
  .prose p.ameaca::after{display:none}
  .transcript{padding:18px}
  .choices button{font-size:15px;padding:16px 44px 16px 56px}
  .choices button::before{left:16px}
  .choices button::after{right:16px}
  .session-tools{flex-direction:column;align-items:stretch}
  .ending-actions{padding:20px}
  .ending-actions .primary{width:100%;justify-content:space-between}
  footer{padding:22px 16px 30px}
}
@media(max-width:370px){.pill{font-size:9.5px;padding:6px 7px}.brand img{width:60px}.hero-copy h1{font-size:54px}}
@media(prefers-reduced-motion:reduce){body:not(.effects) *,body:not(.effects) *::before,body:not(.effects) *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){.glitch::before,.glitch::after,.fx{display:none}.primary{border:2px solid ButtonText}.progress span{background:Highlight}}