/* Histórias da Bíblia — o motor comum (estilos). Usado pela capa e por todos os episódios em /historias/<slug>.
   Cada episódio traz só o que é dele num <style> da própria página (cenas, cores de momentos novos, elementos).
   Claro e escuro seguem o aparelho; com movimento reduzido nada se mexe sozinho. Nada de fora: sem fontes nem imagens externas. */
/* Cores da página (cartões, barra) — claro e escuro seguem o aparelho. */
:root{
 --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,"Noto Serif",Georgia,serif;
 --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 --papel:rgba(252,249,242,.93);--papel2:#f4ecdc;--tinta:#29231c;--tinta2:#655847;--borda:rgba(122,96,58,.2);
 --ouro:#b8842a;--ouro-texto:#835a12;--ouro-fundo:rgba(214,168,74,.14);--foco:#835a12;--sombra:rgba(38,26,10,.3);
 --barra:rgba(251,247,239,.78);--barra-tinta:#2b241c;--claro:#f7ecd6;
 color-scheme:light dark
}
@media (prefers-color-scheme:dark){:root{
 --papel:rgba(17,19,29,.9);--papel2:#1d2030;--tinta:#efe6d5;--tinta2:#bcb09b;--borda:rgba(230,204,150,.15);
 --ouro:#e2b866;--ouro-texto:#ebc883;--ouro-fundo:rgba(226,184,102,.12);--foco:#f1d08c;--sombra:rgba(0,0,0,.55);
 --barra:rgba(13,15,24,.72);--barra-tinta:#efe6d5
}}
/* A luz da cena (céu, névoa e o tom da paisagem) muda com a história; registradas para a transição ser suave.
   A cor da sombra (--tom) muda na hora em que o peso dela (--tomp) é o menor: depois, quando o peso diminui; antes, quando
   aumenta (o motor escolhe a --curva-tom, v1.77.1). Juntas, as duas faziam a paisagem clarear no meio da passagem. */
@property --c1{syntax:'<color>';inherits:true;initial-value:#020308}
@property --c2{syntax:'<color>';inherits:true;initial-value:#060a16}
@property --c3{syntax:'<color>';inherits:true;initial-value:#0d1426}
@property --tom{syntax:'<color>';inherits:true;initial-value:#04060e}
@property --tomp{syntax:'<percentage>';inherits:true;initial-value:80%}
@property --sol{syntax:'<color>';inherits:true;initial-value:#ffe2a0}
@property --estr{syntax:'<number>';inherits:true;initial-value:0}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0}
body{color:var(--tinta);font:17px/1.6 var(--sans);background:#0b0f1c;-webkit-font-smoothing:antialiased;overflow-x:hidden}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--foco);outline-offset:3px;border-radius:8px}
button{font:inherit;color:inherit}

/* ---------- O palco: uma cena desenhada que fica atrás do texto ---------- */
.palco{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--c2);
 transition:--c1 2.6s ease,--c2 2.6s ease,--c3 2.6s ease,--tom 2.6s var(--curva-tom,ease),--tomp 2.6s ease,--sol 2.6s ease,--estr 2.6s ease}
.palco svg{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-tap-highlight-color:transparent;touch-action:pan-y}
.palco canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.veu{position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 95% at 62% 42%,transparent 58%,rgba(12,8,20,.34))}
@media (prefers-color-scheme:dark){.veu{background:radial-gradient(130% 95% at 62% 42%,transparent 55%,rgba(4,4,12,.45)),rgba(6,8,18,.14)}}
/* Cada cena é um <g class="cena" id="c-NOME"> dentro do SVG; o motor acende a da parte atual (class "on").
   A troca (v1.77.1): a nova acende em 1,2 s enquanto a que sai continua inteira, e só depois a que sai apaga (0,9 s).
   Apagar as duas ao mesmo tempo deixava um quarto do céu de trás (claro no horizonte) aparecer no meio da troca: era a
   luz branca que piscava no celular ao mudar de cenário. */
.cena{opacity:0;visibility:hidden;transition:opacity .9s ease 1.2s,visibility 0s linear 2.1s}
.cena.on{opacity:1;visibility:visible;transition:opacity 1.2s ease}

/* Luz de cada momento: c1 (alto do céu), c2 (meio), c3 (horizonte), tom (sombra sobre a paisagem) e quanto dele.
   Numa luz sem sombra (--tomp:0%) o --tom é escuro (#04060e): parada, a cor não aparece; na passagem de outra luz, um
   --tom claro clareava a paisagem inteira no meio do caminho (v1.77.1). tests/historias.test.mjs confere. */
.palco[data-luz=trevas]{--c1:#020308;--c2:#05080f;--c3:#0c1222;--tom:#03050c;--tomp:84%;--sol:#ffe2a0;--estr:0}
.palco[data-luz=luz1]{--c1:#141a30;--c2:#5c5a6e;--c3:#efd9ad;--tom:#2b2742;--tomp:52%;--sol:#fff1cf;--estr:0}
.palco[data-luz=firmamento]{--c1:#2f639a;--c2:#86b2d3;--c3:#e3ece9;--tom:#30507c;--tomp:30%;--sol:#fff4d6;--estr:0}
.palco[data-luz=dia]{--c1:#3f84c4;--c2:#8fc0e3;--c3:#edf3e2;--tom:#04060e;--tomp:0%;--sol:#fff3cf;--estr:0}
.palco[data-luz=crepusculo]{--c1:#1a2246;--c2:#8a587c;--c3:#f3a560;--tom:#3b2a58;--tomp:34%;--sol:#ffb35c;--estr:.75}
.palco[data-luz=dourado]{--c1:#6f9fce;--c2:#eccf96;--c3:#fae2b2;--tom:#e49a48;--tomp:14%;--sol:#ffd987;--estr:0}
.palco[data-luz=manha]{--c1:#5f86bb;--c2:#e5c39b;--c3:#f8e4c6;--tom:#c4864e;--tomp:12%;--sol:#ffe0a8;--estr:0}
.palco[data-luz=jardim]{--c1:#5ea3d4;--c2:#b9dfe6;--c3:#f5f0d6;--tom:#04060e;--tomp:0%;--sol:#fff6d8;--estr:0}
.palco[data-luz=sono]{--c1:#0f1736;--c2:#33416f;--c3:#8995ba;--tom:#18234e;--tomp:46%;--sol:#f4efe0;--estr:.85}
.palco[data-luz=morno]{--c1:#7d93b0;--c2:#d0bea2;--c3:#eed8b4;--tom:#6b5546;--tomp:20%;--sol:#ffd9a0;--estr:0}
.palco[data-luz=tarde]{--c1:#34477c;--c2:#c4876f;--c3:#f6bf84;--tom:#683c58;--tomp:26%;--sol:#ffb46a;--estr:.1}
.palco[data-luz=sombra]{--c1:#1d1933;--c2:#62405c;--c3:#c27458;--tom:#2b1a36;--tomp:42%;--sol:#ff9a5c;--estr:.35}
.palco[data-luz=luto]{--c1:#3a3550;--c2:#8c6670;--c3:#d6a07c;--tom:#4a3040;--tomp:28%;--sol:#ffc48a;--estr:.05}
.palco[data-luz=porta]{--c1:#12162e;--c2:#523a5a;--c3:#d47a4c;--tom:#2a1838;--tomp:44%;--sol:#ff9c55;--estr:.45}
.palco[data-luz=fora]{--c1:#7fa8c6;--c2:#ddcaa6;--c3:#f1dfbd;--tom:#a26e3e;--tomp:10%;--sol:#fff0c8;--estr:0}
.palco[data-luz=foratarde]{--c1:#2a1d33;--c2:#94473f;--c3:#e48754;--tom:#3c1a2a;--tomp:36%;--sol:#ff8a4a;--estr:.15}
.palco[data-luz=foranoite]{--c1:#04060f;--c2:#11173a;--c3:#2b2b52;--tom:#070a22;--tomp:62%;--sol:#f4efe0;--estr:1}
.palco[data-luz=aurora]{--c1:#273668;--c2:#d48a86;--c3:#f9d6a4;--tom:#5a3f62;--tomp:16%;--sol:#ffd08e;--estr:.2}
.palco[data-luz=noite]{--c1:#02030a;--c2:#070d26;--c3:#16204a;--tom:#050a24;--tomp:62%;--sol:#f4efe0;--estr:1}

/* Paleta da paisagem: cor base, névoa do horizonte (c3) e o tom do momento. */
.ce1{stop-color:var(--c1)}.ce2{stop-color:var(--c2)}.ce3{stop-color:var(--c3)}
.r1{fill:color-mix(in oklab,color-mix(in oklab,#7c9877,var(--c3) 60%),var(--tom) var(--tomp))}
.r2{fill:color-mix(in oklab,color-mix(in oklab,#6a8b5b,var(--c3) 40%),var(--tom) var(--tomp))}
.ch1{stop-color:color-mix(in oklab,color-mix(in oklab,#86a85c,var(--c3) 34%),var(--tom) var(--tomp))}
.ch2{stop-color:color-mix(in oklab,#4a7a3b,var(--tom) var(--tomp))}
.r3{fill:color-mix(in oklab,color-mix(in oklab,#5f8a48,var(--c3) 16%),var(--tom) var(--tomp))}
.r4{fill:color-mix(in oklab,#49733b,var(--tom) var(--tomp))}
.r5{fill:color-mix(in oklab,#355b2f,var(--tom) var(--tomp))}
.mr1{stop-color:color-mix(in oklab,color-mix(in oklab,#6aa6bd,var(--c3) 45%),var(--tom) var(--tomp))}
.mr2{stop-color:color-mix(in oklab,#2c6782,var(--tom) var(--tomp))}
.brilho{stroke:color-mix(in oklab,#fff,var(--c3) 35%);stroke-width:2;stroke-linecap:round;opacity:.5}
.nuv{fill:color-mix(in oklab,color-mix(in oklab,#d6e1ea,var(--c2) 35%),var(--tom) var(--tomp))}
.v1{fill:color-mix(in oklab,#2f5a31,var(--tom) var(--tomp))}
.v2{fill:color-mix(in oklab,#4a7a3c,var(--tom) var(--tomp))}
.v3{fill:color-mix(in oklab,#78a352,var(--tom) var(--tomp))}
.v4{fill:color-mix(in oklab,#aecb72,var(--tom) var(--tomp))}
.tr{fill:color-mix(in oklab,#5a3f2c,var(--tom) var(--tomp))}
.trs{stroke:color-mix(in oklab,#5a3f2c,var(--tom) var(--tomp));fill:none;stroke-linecap:round}
.gr{stroke:color-mix(in oklab,#5d8b44,var(--tom) var(--tomp));fill:none;stroke-linecap:round}
.gr2{stroke:color-mix(in oklab,#8fb35d,var(--tom) var(--tomp));fill:none;stroke-linecap:round}
.fl1{fill:color-mix(in oklab,#f0b9c9,var(--tom) var(--tomp))}.fl2{fill:color-mix(in oklab,#f6e39b,var(--tom) var(--tomp))}.fl3{fill:color-mix(in oklab,#fff8ec,var(--tom) var(--tomp))}.fl4{fill:color-mix(in oklab,#c4a6e6,var(--tom) var(--tomp))}
.fig{fill:color-mix(in oklab,#4b372a,var(--tom) calc(var(--tomp)*.7))}
.figs{stroke:color-mix(in oklab,#4b372a,var(--tom) calc(var(--tomp)*.7));fill:none;stroke-linecap:round}
.tun{fill:color-mix(in oklab,var(--veste,#9a7148),var(--tom) calc(var(--tomp)*.6))}
.tun2{fill:color-mix(in oklab,var(--veste2,#c19a66),var(--tom) calc(var(--tomp)*.6))}
.fol{fill:color-mix(in oklab,#4f8a36,var(--tom) calc(var(--tomp)*.6))}
.fr{fill:color-mix(in oklab,#c8352b,var(--tom) calc(var(--tomp)*.45))}
.frl{fill:#ffb59c;opacity:.8}
.vi1{fill:color-mix(in oklab,#eae7b4,var(--tom) calc(var(--tomp)*.5))}
.vi2{fill:color-mix(in oklab,#c5d98d,var(--tom) calc(var(--tomp)*.5))}
.vi3{fill:color-mix(in oklab,#8fb86a,var(--tom) calc(var(--tomp)*.6))}
.a-leao{fill:color-mix(in oklab,#c48d47,var(--tom) var(--tomp))}.a-juba{fill:color-mix(in oklab,#8a5726,var(--tom) var(--tomp))}
.a-la{fill:color-mix(in oklab,#f1e9d6,var(--tom) var(--tomp))}.a-esc{fill:color-mix(in oklab,#3f3128,var(--tom) var(--tomp))}.a-escs{stroke:color-mix(in oklab,#3f3128,var(--tom) var(--tomp));fill:none;stroke-linecap:round}
.a-cervo{fill:color-mix(in oklab,#a06d40,var(--tom) var(--tomp))}.a-cervos{stroke:color-mix(in oklab,#a06d40,var(--tom) var(--tomp));fill:none;stroke-linecap:round}
.a-cav{fill:color-mix(in oklab,#6c4630,var(--tom) var(--tomp))}.a-cavs{stroke:color-mix(in oklab,#6c4630,var(--tom) var(--tomp));fill:none;stroke-linecap:round}
.a-ele{fill:color-mix(in oklab,#8d8a87,var(--tom) var(--tomp))}.a-ele2{fill:color-mix(in oklab,#a8a4a0,var(--tom) var(--tomp))}
.a-cam{fill:color-mix(in oklab,#c9a06a,var(--tom) var(--tomp))}.a-jum{fill:color-mix(in oklab,#8f8478,var(--tom) var(--tomp))}.a-chifre{stroke:color-mix(in oklab,#d8c7a0,var(--tom) var(--tomp));fill:none;stroke-linecap:round}
.a-coe{fill:color-mix(in oklab,#b39a7c,var(--tom) var(--tomp))}
.sp1{stroke:color-mix(in oklab,#24381a,var(--tom) calc(var(--tomp)*.5))}.sp2{stroke:color-mix(in oklab,#5b8a2f,var(--tom) calc(var(--tomp)*.4))}
.spf{fill:color-mix(in oklab,#5b8a2f,var(--tom) calc(var(--tomp)*.4))}
.esp{stroke:color-mix(in oklab,#4d3a2a,var(--tom) var(--tomp));fill:none;stroke-linecap:round}
.d1{fill:color-mix(in oklab,color-mix(in oklab,#a08672,var(--c3) 55%),var(--tom) var(--tomp))}
.d2{fill:color-mix(in oklab,color-mix(in oklab,#b18e62,var(--c3) 32%),var(--tom) var(--tomp))}
.d3{fill:color-mix(in oklab,color-mix(in oklab,#c4a06a,var(--c3) 12%),var(--tom) var(--tomp))}
.d4{fill:color-mix(in oklab,#a78451,var(--tom) var(--tomp))}
.d5{fill:color-mix(in oklab,#86663f,var(--tom) var(--tomp))}
.tri{stroke:color-mix(in oklab,#d8b257,var(--tom) var(--tomp));fill:none;stroke-linecap:round}
.tri2{fill:color-mix(in oklab,#e3c26a,var(--tom) var(--tomp))}
.pd1{fill:color-mix(in oklab,#8b8276,var(--tom) var(--tomp))}.pd2{fill:color-mix(in oklab,#a69d90,var(--tom) var(--tomp))}
.ten{fill:color-mix(in oklab,#b89470,var(--tom) var(--tomp))}.ten2{fill:color-mix(in oklab,#8c6a4a,var(--tom) var(--tomp))}
.pj1{fill:color-mix(in oklab,#24472f,var(--tom) calc(var(--tomp)*.5))}.pj2{fill:color-mix(in oklab,#3a6c44,var(--tom) calc(var(--tomp)*.45))}.pj3{fill:color-mix(in oklab,#6f9d5a,var(--tom) calc(var(--tomp)*.4))}
.cam{fill:color-mix(in oklab,#c2a47a,var(--tom) var(--tomp))}
.hz{fill:#060914}.hz2{fill:#0b1022}
.est{fill:#fffaf0}
/* pergaminho (mapas e plantas desenhadas) */
.mp-papel1{stop-color:#f4e8cc}.mp-papel2{stop-color:#d8c296}
@media (prefers-color-scheme:dark){.mp-papel1{stop-color:#2e2a24}.mp-papel2{stop-color:#1a1814}}
.mapa-borda{fill:none;stroke:#7a6040}.mapa-mar{fill:#a9c6c4;opacity:.85}.mapa-terra{fill:#e8d6ae}.mapa-costa{fill:none;stroke:#6f8e8c;stroke-width:1.6}
.mapa-rio{fill:none;stroke:#6f9fb0;stroke-linecap:round;stroke-linejoin:round}.mapa-areia{fill:#d9b98a;opacity:.35}.mapa-verde{fill:#a7b97a;opacity:.5}
.mapa-rosa{fill:#a0804f;opacity:.7}.mapa-pq{font:600 16px var(--sans);fill:#6a5232}
.mapa-nome{font:italic 600 21px var(--serif);fill:#4f3a20;paint-order:stroke;stroke:#f1e4c5;stroke-width:5px;stroke-linejoin:round}
.mapa-regiao{font:600 15px var(--sans);letter-spacing:.24em;fill:#8a7250;text-transform:uppercase}
.mapa-ponto{fill:#8a3b22;stroke:#f6ead0;stroke-width:2}
.mapa-rota{fill:none;stroke:#a5452a;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:2 9}
@media (prefers-color-scheme:dark){.mapa-borda{stroke:#cdb58a}.mapa-mar{fill:#2c4a52}.mapa-terra{fill:#3a342a}.mapa-costa{stroke:#5f8a90}.mapa-rio{stroke:#6aaec4}.mapa-areia{fill:#6b5434}.mapa-verde{fill:#4f6a3a}
 .mapa-rosa{fill:#cdb58a}.mapa-pq{fill:#d9c49c}.mapa-nome{fill:#f1e2c0;stroke:#26231d}.mapa-regiao{fill:#bba57d}.mapa-ponto{fill:#f08a5a;stroke:#26231d}.mapa-rota{stroke:#f08a5a}}

/* Elementos que entram com a história */
.some{opacity:0;transition:opacity 1.6s ease}
#estrelas{opacity:var(--estr)}
.pessoa{transition:transform 2.6s cubic-bezier(.45,0,.2,1),opacity 1.8s ease}
.pessoa .braco{transition:transform 1.6s cubic-bezier(.4,0,.2,1)}
.pessoa .corpo{transition:transform 1.8s cubic-bezier(.4,0,.2,1)}
.bicho{transition:transform 2.6s cubic-bezier(.45,0,.2,1),opacity 1.6s ease}
.palma .copa{transform-box:fill-box;transform-origin:50% 0}
.avental,.tunica{opacity:0;transition:opacity 1.6s ease}
/* fogo, fumaça e aves: ajudantes do motor (fogo(), fumaca(), aves) */
.chama{transform-box:fill-box;transform-origin:50% 100%;animation:chama 1.1s ease-in-out infinite alternate}
.chama:nth-child(2n){animation-duration:.8s;animation-delay:-.3s}.chama:nth-child(3n){animation-duration:1.4s;animation-delay:-.6s}
@keyframes chama{from{transform:scale(.86,.8);opacity:.75}to{transform:scale(1.08,1.18);opacity:1}}
.fogo{transform-box:fill-box;transform-origin:50% 100%;animation:chama .9s ease-in-out infinite alternate}
.fum{fill:none;stroke-linecap:round;opacity:0}
.fum path{animation:sobe 6s ease-in infinite;transform-box:fill-box;transform-origin:50% 100%}
.fum.sempre{opacity:1}
.fum path:nth-child(2){animation-delay:-2s}.fum path:nth-child(3){animation-delay:-4s}
@keyframes sobe{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:.75}100%{transform:translateY(-190px) scale(1.4);opacity:0}}
.fum.baixa path{animation-name:arrasta}
@keyframes arrasta{0%{transform:translate(0,0) scale(.6);opacity:0}25%{opacity:.7}100%{transform:translate(-170px,-40px) scale(1.6,1.1);opacity:0}}
/* Movimento ambiente, sempre discreto e pequeno: o SVG não vai para a GPU, e cada animação repinta parte da cena.
   O brilho das estrelas, das águas e dos vaga-lumes fica no canvas das partículas. */
.ave{animation:voa 34s linear infinite}
@keyframes voa{from{transform:translate(-500px,0)}to{transform:translate(2300px,-80px)}}
.asa{transform-box:fill-box;transform-origin:50% 100%;animation:bate .7s ease-in-out infinite alternate}
@keyframes bate{to{transform:scaleY(-.5)}}

/* ---------- Texto: a história em cartões que passam sobre a cena ---------- */
main{position:relative;z-index:2;pointer-events:none}
.passo{min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:72px 12px 16px}
.cartao{pointer-events:auto;width:100%;max-width:560px;margin:0 auto;background:var(--papel);border:1px solid var(--borda);border-radius:22px;padding:20px 20px 18px;
 box-shadow:0 24px 60px -30px var(--sombra),0 2px 8px -3px var(--sombra);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);scroll-margin:84px 0 16px}
@media (min-width:900px),(min-width:640px) and (max-height:520px) and (orientation:landscape){
 .passo{align-items:center;padding:92px max(4.5vw,28px) 48px}
 .cartao{margin:0;width:min(450px,38vw);padding:28px 30px 24px}
}
@media (min-width:1600px){.cartao{width:min(500px,32vw)}.passo{padding-left:7vw}}
.js .cartao{opacity:.32;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.js .passo.ativo .cartao{opacity:1;transform:none}
.kicker{margin:0 0 .5em;font:600 12px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ouro-texto)}
h2{margin:0 0 .35em;font:400 clamp(30px,3.6vw,44px)/1.06 var(--serif);letter-spacing:-.01em}
h3{margin:0 0 .45em;font:400 clamp(24px,2.5vw,31px)/1.14 var(--serif)}
h3.grande{font-size:clamp(40px,5vw,60px);font-style:italic;letter-spacing:-.01em}
.dia{display:inline-block;margin:0 0 .6em;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ouro-texto);padding:6px 10px;border:1px solid var(--borda);border-radius:99px;background:var(--ouro-fundo)}
.narra{margin:0 0 .8em;font:15.5px/1.55 var(--sans);color:var(--tinta2)}
blockquote{margin:0;padding:0 0 0 16px;border-left:2px solid var(--ouro);font:400 clamp(17px,1.45vw,19.5px)/1.62 var(--serif)}
blockquote p{margin:0}blockquote p+p{margin-top:.45em}
sup{font:600 .58em/1 var(--sans);color:var(--ouro-texto);margin-right:.18em;vertical-align:.55em}
.ref{margin:.8em 0 0;font:500 13px/1.4 var(--sans);color:var(--tinta2);letter-spacing:.02em}
.promessa{margin:.9em 0 0;padding:14px 16px;border-radius:16px;background:var(--ouro-fundo);border:1px solid var(--borda)}
.promessa .kicker{margin-bottom:.35em}.promessa blockquote{border-left-color:var(--ouro-texto)}
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:1em 0 0}
.acao{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:99px;border:1px solid var(--ouro);background:transparent;color:var(--ouro-texto);font:600 15px/1 var(--sans);cursor:pointer;transition:background .25s,color .25s,transform .2s}
.acao:hover{background:var(--ouro-fundo)}.acao:active{transform:scale(.97)}
.acao svg{width:18px;height:18px;flex:none}
.dica{margin:0;font:14px/1.45 var(--sans);color:var(--tinta2)}
.feito{margin:.6em 0 0;font:italic 15px/1.5 var(--serif);color:var(--tinta2);min-height:1.5em}
.faixa{display:grid;gap:6px;margin:1em 0 0;font:600 13px/1.2 var(--sans);color:var(--tinta2)}
.faixa span{display:flex;justify-content:space-between}
input[type=range]{width:100%;height:30px;margin:0;accent-color:var(--ouro);cursor:pointer;background:transparent}
.lista{list-style:none;margin:1em 0 0;padding:0;display:grid;gap:6px}
.lista button{width:100%;display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:4px 12px;text-align:left;padding:9px 12px;border-radius:14px;border:1px solid var(--borda);background:transparent;cursor:pointer;transition:background .25s,border-color .25s}
.lista button:hover{border-color:var(--ouro)}
.lista button[aria-pressed=true]{background:var(--ouro-fundo);border-color:var(--ouro)}
.lista strong{font:600 17px/1.2 var(--serif);color:var(--tinta)}
.lista span{font:15px/1.4 var(--serif);color:var(--tinta2)}
.lista.gera{grid-template-columns:1fr 1fr;gap:5px}
.lista.gera button{grid-template-columns:1fr auto;padding:7px 11px}
.lista.gera span{font:13.5px/1.2 var(--sans);text-align:right}
.lista.gera .so{grid-column:1/-1}
@media (max-width:899px){.lista.rios span{font-size:14px}.lista button{padding:7px 11px}}

/* Abertura e fim */
.abertura{min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;padding:90px 16px 64px;color:var(--claro)}
.abertura .miolo{pointer-events:auto;max-width:760px}
.abertura .kicker{color:#e9c983;letter-spacing:.32em}
.abertura h1{margin:.12em 0 .1em;font:400 clamp(56px,10vw,124px)/.98 var(--serif);letter-spacing:-.02em;text-shadow:0 0 40px rgba(255,214,140,.25)}
.abertura .sub{margin:0 auto;max-width:34ch;font:italic 400 clamp(19px,2.2vw,25px)/1.4 var(--serif);color:#e6d8bd}
.orna{display:block;margin:22px auto 26px;width:180px;height:16px;color:#c9a35a}
.abertura .acoes{justify-content:center}
.abertura .acao{border-color:#e2b866;color:#f6e3b8}.abertura .acao:hover{background:rgba(226,184,102,.16)}
.abertura .acao.cheia{background:#e2b866;color:#2a1d08;border-color:#e2b866}.abertura .acao.cheia:hover{background:#efc97c}
.abertura .dica{margin-top:22px;color:#cbbd9f}
.desce{display:block;margin:18px auto 0;width:22px;height:34px;border:2px solid rgba(233,201,131,.6);border-radius:12px;position:relative}
.desce::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#e9c983;animation:rola 2s ease-in-out infinite}
@keyframes rola{60%{transform:translateY(10px);opacity:0}}
.js .abertura .miolo{transition:opacity .8s ease,transform .8s ease}
.js .abertura:not(.ativo) .miolo{opacity:0;transform:translateY(-20px)}
.fim .cartao{text-align:center}
.fim .acoes{justify-content:center}
.creditos{margin:1.1em 0 0;font:13.5px/1.55 var(--sans);color:var(--tinta2)}

/* Barra de cima: título, capítulo atual, progresso e navegação */
.barra{position:fixed;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;gap:8px;padding:8px 10px 8px 14px;padding-top:max(8px,env(safe-area-inset-top));
 background:var(--barra);color:var(--barra-tinta);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--borda);transition:background .6s,color .6s,border-color .6s}
.no-topo .barra{background:transparent;border-color:transparent;color:var(--claro);-webkit-backdrop-filter:none;backdrop-filter:none}
.barra .nome{border:0;background:none;padding:6px 4px;cursor:pointer;font:400 19px/1 var(--serif);letter-spacing:.01em;white-space:nowrap}
.barra .onde{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 13px/1 var(--sans);opacity:.78;letter-spacing:.02em;text-align:center;transition:opacity .4s}
.no-topo .barra .onde{opacity:0}
.barra .bt{inline-size:40px;block-size:40px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--borda);background:transparent;cursor:pointer;padding:0;transition:background .2s,border-color .2s}
.no-topo .barra .bt{border-color:rgba(233,201,131,.35)}
.barra .bt:hover{background:var(--ouro-fundo)}
.barra .bt svg{width:18px;height:18px}
.barra .caps{inline-size:auto;padding:0 14px 0 12px;border-radius:99px;display:flex;gap:8px;font:600 14px/1 var(--sans)}
.prog{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--ouro);transform-origin:left;transform:scaleX(var(--prog,0));transition:transform .5s ease}
.no-topo .prog{opacity:0}
@media (max-width:520px){.barra .caps span{display:none}.barra .caps{padding:0;inline-size:40px;justify-content:center}.barra .onde{font-size:12px;text-align:left}}
.sumario{position:fixed;z-index:7;top:62px;right:10px;width:min(360px,calc(100vw - 20px));max-height:calc(100svh - 80px);overflow:auto;background:var(--papel);color:var(--tinta);border:1px solid var(--borda);border-radius:20px;padding:10px;
 box-shadow:0 30px 70px -28px var(--sombra);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.sumario[hidden]{display:none}
.sumario ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sumario button{width:100%;text-align:left;display:grid;grid-template-columns:34px 1fr;gap:2px 8px;align-items:baseline;padding:9px 10px;border:0;border-radius:12px;background:transparent;cursor:pointer}
.sumario button:hover{background:var(--ouro-fundo)}
.sumario button[aria-current]{background:var(--ouro-fundo)}
.sumario b{font:600 13px/1 var(--sans);color:var(--ouro-texto);letter-spacing:.06em}
.sumario strong{font:400 18px/1.25 var(--serif)}
.sumario small{grid-column:2;font:13px/1.3 var(--sans);color:var(--tinta2)}

/* Ligações entre as histórias (abertura e fim) e o caminho de volta para a linha do tempo */
a{color:inherit}
a.acao,a.bt{text-decoration:none}
.barra a.bt{color:inherit}
.ligacoes{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:1.1em 0 0;font:500 14px/1.4 var(--sans)}
.ligacoes a{color:var(--ouro-texto);text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--ouro-texto),transparent 60%);text-underline-offset:3px}
.ligacoes a:hover{text-decoration-color:currentColor}
.abertura .ligacoes{margin-top:16px}.abertura .ligacoes a{color:#e9c983}
.embreve{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:99px;border:1px dashed var(--borda);color:var(--tinta2);font:600 15px/1 var(--sans)}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
 /* v1.77.1: a troca de cena é na hora. Com a cena escondida (visibility), a que acende só era desenhada uns quadros
    depois e a anterior já tinha sumido: dois ou três quadros só do céu, claro no horizonte, a cada troca de cenário.
    Aqui as cenas ficam sempre desenhadas, só transparentes, e as que não estão acesas não recebem toque. */
 .palco,.cena,.cena.on{transition:none!important}
 .cena{visibility:visible!important}
 .cena:not(.on),.cena:not(.on) *{pointer-events:none!important}
}
.acao.cheia{background:var(--ouro);border-color:var(--ouro);color:#2a1d08}.acao.cheia:hover{background:color-mix(in oklab,var(--ouro),#fff 14%)}

/* Celular (v1.60.1): o vidro fosco (backdrop-filter) sobre a cena que se mexe fazia alguns aparelhos piscarem uma luz
   branca ao passar as partes. No toque, os cartões, a barra e o sumário ficam com o papel quase opaco, sem o desfoque. */
@media (pointer:coarse){
 :root{--papel:rgba(252,249,242,.97);--barra:rgba(251,247,239,.95)}
 .cartao,.barra,.sumario{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (pointer:coarse) and (prefers-color-scheme:dark){:root{--papel:rgba(17,19,29,.96);--barra:rgba(13,15,24,.94)}}

/* Celular (v1.60.2): texto curto com "Ler o texto todo", letra um pouco menor e o olho que esconde os cartões.
   A classe .cel vem do motor quando a tela não é a larga (a mesma regra de LADO). */
html:not(.cel) :is(.ler-tudo,.olho,.mostrar-texto),.ler-tudo,.mostrar-texto{display:none}
.cel .passo{padding:60px 8px 10px}
.cel .cartao{padding:14px 15px 12px;border-radius:18px}
.cel h2{font-size:24px}.cel h3{font-size:20px}.cel h3.grande{font-size:32px}
.cel blockquote{font-size:16px;line-height:1.5;padding-left:12px}
.cel .narra{font-size:14.5px;margin-bottom:.55em}.cel .ref{font-size:12px;margin-top:.5em}.cel .kicker{font-size:11px}
.cel .acoes{margin-top:.7em}.cel .acao{min-height:42px;font-size:14.5px;padding:0 15px}
.cel .cartao.curto:not(.aberto) :is(blockquote p:not(.kicker)~p,blockquote~blockquote,.ref,.promessa){display:none}
.cel .ler-tudo{display:inline-flex;align-items:center;gap:6px;margin:.55em 0 0;padding:6px 0;border:0;background:none;color:var(--ouro-texto);font:600 13.5px/1.2 var(--sans);cursor:pointer}
.cel .ler-tudo::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 1.8px 1.8px 0;transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.cel .cartao.aberto .ler-tudo::after{transform:translateY(2px) rotate(-135deg)}
.cel .olho{display:grid}
html.sem-texto .passo .cartao{opacity:0!important;transform:translateY(24px)!important;pointer-events:none!important}
html.sem-texto .olho{background:var(--ouro-fundo);border-color:var(--ouro)}
html.cel.sem-texto .mostrar-texto{display:inline-flex;position:fixed;z-index:5;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);box-shadow:0 10px 30px -12px var(--sombra)}