@property --a{syntax:'<percentage>';inherits:true;initial-value:0%}
@property --b{syntax:'<percentage>';inherits:true;initial-value:0%}
@property --c{syntax:'<percentage>';inherits:true;initial-value:0%}
@property --d{syntax:'<percentage>';inherits:true;initial-value:0%}
@property --f{syntax:'<percentage>';inherits:true;initial-value:0%}
@property --e{syntax:'<percentage>';inherits:true;initial-value:0%}
@property --all{syntax:'<number>';inherits:true;initial-value:0}
:root{
  --azul:#102ea0; --noite:#281e1a; --bordo:#400718; --rosa:#e0d1d9; --agua:#a1c9c9; --preto:#000; --tx:#fff;
  --mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --grot:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --pin:pointer; --cur:auto;
  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"]){--preto:#000;--tx:#fff}}
:root[data-theme="dark"]{--preto:#000;--tx:#fff}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);cursor:var(--cur)}
body{height:100%;margin:0;background:var(--preto);color:var(--tx);overflow:hidden;-webkit-user-select:none;user-select:none;
  font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.06em;text-transform:uppercase;line-height:1.6;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
input{-webkit-user-select:text;user-select:text}
/* o alfinete só aparece sobre o que é clicável */
button,a,[data-hot],.spot,canvas{cursor:var(--pin)}
button:disabled{cursor:var(--cur)}
input{cursor:text}
button{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
p{margin:0}
.g{font-family:var(--grot);text-transform:none;letter-spacing:0}
:focus-visible{outline:1px solid var(--agua);outline-offset:4px}
.u{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.dim{opacity:.55}

body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.07;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* cabeçalho e rodapé */
.chrome{position:fixed;left:0;right:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:12px;
  padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));pointer-events:none;transition:opacity .8s}
.chrome>*{pointer-events:auto}
.chrome.top{top:0;padding-top:calc(env(safe-area-inset-top,0px) + 22px)}
.chrome.bot{bottom:0;align-items:end;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 22px)}
.nome{justify-self:start;font-size:12px;letter-spacing:.14em}
#count{justify-self:center;text-align:center}
#count .rel{font-size:13px;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.links{justify-self:end;display:flex;gap:22px}
.links a{border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px}
#nav{justify-self:start;display:flex;gap:14px}
#nav button{opacity:.3;transition:opacity .3s}
#nav button.ok{opacity:.65}
#nav button.cur{opacity:1}
#hint{justify-self:center;text-align:center;transition:opacity .6s}
.bot .fim{justify-self:end;display:flex;gap:22px;align-items:center}
body.voz #lk-imprensa{display:none}
.links-m,.so-mob{display:none}
body.segredo .lk-presave{display:none}
.links-m{gap:18px}
.links-m a{border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px}
#voltar{justify-self:start;visibility:hidden}
body.cap #voltar{visibility:visible}
body.p0 .chrome.bot,body.p0 #count,body.p0 .links{opacity:0;pointer-events:none}

/* atos */
.act{position:fixed;inset:0;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.act.on{opacity:1;visibility:visible;transition:opacity .35s}
#card{position:fixed;inset:0;z-index:60;background:#000;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
#card.on{opacity:1;visibility:visible;transition:opacity .3s}
#card p{font-size:15px;letter-spacing:.3em}

/* continuar procurando */
.segue{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 74px);transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:12px;
  padding:13px 22px 13px 16px;border:1px solid rgba(255,255,255,.75);border-radius:999px;background:rgba(0,0,0,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  white-space:nowrap;font-size:11.5px;letter-spacing:.1em;animation:chama 2.8s ease-in-out infinite;transition:background .3s,color .3s}
.segue img{width:18px;transform:rotate(-30deg)}
.segue:hover{background:#fff;color:#000}
.segue:hover img{filter:invert(1)}
.segue[hidden]{display:none}
@keyframes chama{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.28)}50%{box-shadow:0 0 0 9px rgba(255,255,255,0)}}

/* 0 */
#a0{display:grid;place-items:center;text-align:center;background:#000}
#a0 .rosa{width:84px;margin:0 auto 46px;clip-path:inset(0 0 100% 0);animation:desenha 1.6s .2s cubic-bezier(.5,0,.2,1) forwards}
@keyframes desenha{to{clip-path:inset(0 0 0 0)}}
#a0 .comecar{opacity:0;animation:vem .6s 1.4s forwards;padding:8px 2px;border-bottom:1px solid rgba(255,255,255,.6);font-size:12px;letter-spacing:.14em}
@keyframes vem{to{opacity:1}}

/* I o set: foto estática em tela cheia */
#stage{position:absolute;left:50%;top:50%;width:max(100vw,150vh);width:max(100vw,150svh);aspect-ratio:3/2;transform:translate(-50%,-50%);--img:none}
@media (max-aspect-ratio:1/1){
  /* celular: enquadramento fixo que mostra as cinco luminárias */
  #stage{width:218vw;left:calc(50vw - 106.8vw);transform:translateY(-50%)}
}
.inner{position:absolute;inset:0}
.inner.virado{transform:rotate(180deg)}
.layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
#stage{--a:0%;--b:0%;--c:0%;--d:0%;--e:0%;--f:0%;
  transition:--a 1.1s cubic-bezier(.3,.6,.2,1),--b 1s cubic-bezier(.3,.6,.2,1),--c .9s cubic-bezier(.3,.6,.2,1),--d .9s cubic-bezier(.3,.6,.2,1),--e 1s cubic-bezier(.3,.6,.2,1),--f .9s cubic-bezier(.3,.6,.2,1)}
.dark{filter:brightness(.2) saturate(.65) contrast(1.05)}
.lit{-webkit-mask-image:radial-gradient(circle at 51% 56%,#000 calc(var(--a) * .5),transparent var(--a)),radial-gradient(circle at 36% 47.6%,#000 calc(var(--b) * .35),transparent var(--b)),radial-gradient(circle at 36.8% 69.6%,#000 calc(var(--c) * .3),transparent var(--c)),radial-gradient(circle at 30.6% 73%,#000 calc(var(--d) * .3),transparent var(--d)),radial-gradient(circle at 67.5% 64.3%,#000 calc(var(--e) * .3),transparent var(--e)),radial-gradient(circle at 57.5% 84%,#000 calc(var(--f) * .35),transparent var(--f));
  mask-image:radial-gradient(circle at 51% 56%,#000 calc(var(--a) * .5),transparent var(--a)),radial-gradient(circle at 36% 47.6%,#000 calc(var(--b) * .35),transparent var(--b)),radial-gradient(circle at 36.8% 69.6%,#000 calc(var(--c) * .3),transparent var(--c)),radial-gradient(circle at 30.6% 73%,#000 calc(var(--d) * .3),transparent var(--d)),radial-gradient(circle at 67.5% 64.3%,#000 calc(var(--e) * .3),transparent var(--e)),radial-gradient(circle at 57.5% 84%,#000 calc(var(--f) * .35),transparent var(--f))}
.lit.flicker{animation:flicker .55s steps(1) 1}
@keyframes flicker{0%{opacity:.2}15%{opacity:1}30%{opacity:.35}45%{opacity:1}60%{opacity:.7}75%{opacity:1}}
.brilho{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity 1.4s}
.brilho.on{opacity:1}
.amb{opacity:0;transition:opacity 4.5s ease}
.amb.on{opacity:1}
.recdot{position:absolute;left:var(--x);top:var(--y);width:56px;height:56px;margin:-28px 0 0 -28px;z-index:4;opacity:0;pointer-events:none;transition:opacity 1.6s}
.recdot.on{opacity:1;pointer-events:auto}
.recdot::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#ff2a1a;box-shadow:0 0 12px 3px rgba(255,42,26,.55);animation:pisca 1.1s steps(1) infinite}
#verso{position:absolute;left:24px;right:24px;bottom:calc(env(safe-area-inset-bottom,0px) + 120px);text-align:center;z-index:6;font-size:12.5px;letter-spacing:.24em;min-height:1.6em;pointer-events:none}
#verso span{display:inline-block;margin:0 .35em;opacity:0;filter:blur(6px);transition:opacity 1.6s,filter 1.6s}
#verso span.on{opacity:1;filter:none}
#verso .abre{opacity:.6;filter:none;transition:opacity 1.2s}
#verso .abre.sai{opacity:0}
#stage::after{content:"";position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(to bottom,#000,transparent 9%,transparent 91%,#000),linear-gradient(to right,#000,transparent 4%,transparent 96%,#000)}
.spot{position:absolute;left:var(--x);top:var(--y);width:52px;height:52px;margin:-26px 0 0 -26px;z-index:3;color:var(--agua)}
.spot i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;animation:resp 3.6s ease-in-out infinite}
.spot i::before,.spot i::after{content:"";position:absolute;background:currentColor;border-radius:2px}
.spot i::before{left:6px;top:0;width:2px;height:14px}
.spot i::after{top:6px;left:0;height:2px;width:14px}
@keyframes resp{0%,100%{opacity:.3;transform:scale(.9)}50%{opacity:1;transform:scale(1)}}
.spot.on i{opacity:0;animation:none}
.spot.visto i{opacity:.6;animation:none;border:1.5px solid currentColor;border-radius:50%;transform:scale(.8)}
.spot.visto i::before,.spot.visto i::after{display:none}
.spot.trancado{display:none}
.spot.chave{color:#fff}
.spot.chave::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:onda 1.8s ease-out infinite}
@keyframes onda{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}100%{box-shadow:0 0 0 26px rgba(255,255,255,0)}}
#tt{position:absolute;left:50%;transform:translateX(-50%);text-align:center;bottom:calc(env(safe-area-inset-bottom,0px) + 178px);z-index:6;opacity:0;visibility:hidden;transition:opacity 1.4s,visibility 0s 1.4s}
#tt.on{opacity:1;visibility:visible;transition:opacity 1.4s}
#tt .wave{display:block;width:min(220px,55vw);height:22px;margin:10px auto 0}
.wave rect{fill:currentColor}
.wave .base{opacity:.28}

/* I: câmera e flash */
.spot.cam{color:#fff}
#flash1{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:8}
#flash1.on{animation:flash .9s ease-out}
@keyframes flash{0%{opacity:0}8%{opacity:.95}100%{opacity:0}}
@media (max-aspect-ratio:1/1){ #stage{width:190vw;left:calc(50vw - 85.5vw)} }

/* interlúdio: toque e mantenha o dedo no rasgo até o fim do áudio */
#a2{background:radial-gradient(ellipse at 50% 45%,#12162e 0%,#05060d 75%);display:grid;place-items:center;touch-action:none;cursor:var(--pin);overflow:hidden}
#a2 .tit2{position:absolute;z-index:2;bottom:calc(env(safe-area-inset-bottom,0px) + 104px);left:0;right:0;text-align:center;opacity:1}
#a2 .revela{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:var(--t,0);transition:opacity .15s linear;pointer-events:none}
#a2 .revela-sombra{position:absolute;inset:0;opacity:var(--t,0);transition:opacity .15s linear;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.3) 50%,rgba(0,0,0,.75) 100%)}
.bolota{position:relative;z-index:2;width:min(24vh,32vw);width:min(24svh,32vw);aspect-ratio:1;border:0;padding:0;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#3a5fd0,#102ea0 55%,#0b2280);box-shadow:0 14px 34px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18);
  transform:scale(calc(.92 + var(--t,0) * .22));transition:transform .25s cubic-bezier(.3,.6,.2,1),box-shadow .25s}
#a2.segurando .bolota{box-shadow:0 14px 34px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18),0 0 30px 8px rgba(161,201,201,.45)}
.bolota .anel{position:absolute;inset:-16px;border-radius:50%;border:1px solid rgba(255,255,255,.35);animation:mira 1.8s ease-out infinite}
#a2.segurando .bolota .anel{animation:none;opacity:0}
@keyframes mira{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.2);opacity:0}}
.barra-i{display:block;width:min(220px,50vw);height:1px;background:rgba(255,255,255,.2);margin:12px auto 0;position:relative}
.barra-i i{position:absolute;left:0;top:-.5px;height:2px;background:#fff;width:0}

/* capítulo da guia: o gravador */
#a6{background:#000;display:grid;place-items:center}
#a6{background:radial-gradient(ellipse at 50% 40%,#1a37b3 0%,#102ea0 35%,#0a1c6e 100%)}
#a6::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 6%,rgba(120,170,230,.35) 9%,transparent 13%);opacity:.8;pointer-events:none}
#a6 .rosa-fundo{position:absolute;left:50%;top:50%;height:88vh;height:88svh;transform:translate(-50%,-50%);opacity:.14;transition:transform 1.4s cubic-bezier(.6,0,.2,1),opacity 1.4s}
#a6.tocando .rosa-fundo{transform:translate(-50%,-50%) rotate(180deg);opacity:.26}
.grav{position:relative;width:min(230px,60vw);aspect-ratio:.58;border-radius:22px;background:linear-gradient(160deg,#2a2a2e,#141416 70%);box-shadow:0 30px 70px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.05);padding:16px 16px 18px;display:flex;flex-direction:column;gap:14px}
.grav .mics{display:flex;justify-content:center;gap:8px;margin-top:-4px}
.grav .mics i{width:42%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#555 1px,transparent 1.6px) 0 0/5px 5px,radial-gradient(circle at 35% 30%,#3c3c40,#18181a);box-shadow:inset 0 0 0 2px #0c0c0d,0 2px 6px rgba(0,0,0,.6)}
.grav .mics i:first-child{transform:rotate(-12deg)}
.grav .mics i:last-child{transform:rotate(12deg)}
.grav .lcd{background:linear-gradient(180deg,#b9c9bf,#9fb3a7);color:#18261f;border-radius:4px;padding:10px 10px 8px;box-shadow:inset 0 2px 6px rgba(0,0,0,.35);font-size:9px;letter-spacing:.12em;line-height:1.5}
.grav .lcd .t{display:flex;justify-content:space-between;opacity:.8}
.grav .lcd .nome{font-size:10px;margin:6px 0 4px}
.grav .lcd svg{display:block;width:100%;height:22px}
.grav .lcd rect{fill:#18261f}
.grav .lcd .base{opacity:.3}
.grav .bts{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:auto}
.grav .bt{width:40px;height:40px;border-radius:50%;background:linear-gradient(180deg,#3a3a3e,#232326);box-shadow:0 2px 4px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1);display:grid;place-items:center;color:#ddd}
.grav .bt svg{width:14px;height:14px}
.grav .bt.play{width:54px;height:54px;color:#fff;box-shadow:0 0 0 1px rgba(161,201,201,.7),0 2px 4px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12);animation:chama 2.6s ease-in-out infinite}
#a6.tocando .grav .bt.play{animation:none}
.grav .bt.rec i{width:10px;height:10px;border-radius:50%;background:#ff2a1a;opacity:.5}
#a6.tocando .grav .bt.rec i{opacity:1;animation:pisca 1.1s steps(1) infinite}
.grav .marca{text-align:center;font-size:8px;letter-spacing:.3em;color:#777}

/* feats: negativos de filme na mesa de luz; a lupa revela cada uma */
#a3{background:#0b0a09;display:grid;place-items:center;overflow:hidden;cursor:none}
#a3 .copia.on ~ .lupa{display:none}
.mesa-luz{position:relative;padding:34px 30px 30px;background:#f5f1e8;box-shadow:0 0 0 1px rgba(255,255,255,.4),0 0 90px 20px rgba(255,248,230,.18);border-radius:3px;transition:opacity .6s,transform .6s}
.mesa-luz::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,rgba(0,0,0,.035) 0 1px,transparent 1px 28px);pointer-events:none}
.mesa-luz .rot{position:absolute;left:30px;top:12px;color:#6d5a44;font-size:9px;letter-spacing:.22em}
.tira{position:relative;display:flex;gap:6px;padding:18px 10px;background:#2b1a0e;
  background-image:repeating-linear-gradient(90deg,transparent 0 9px,#f5f1e8 9px 17px,transparent 17px 26px),repeating-linear-gradient(90deg,transparent 0 9px,#f5f1e8 9px 17px,transparent 17px 26px);
  background-size:100% 7px,100% 7px;background-position:0 5px,0 calc(100% - 5px);background-repeat:no-repeat}
.quadro{position:relative;margin:0;width:min(17vw,210px);aspect-ratio:3/2;overflow:visible}
.quadro .neg,.quadro .pos{position:absolute;inset:0;background-size:cover;background-position:var(--pos,50% 50%)}
.quadro .neg{filter:invert(1) grayscale(.35) contrast(.9)}
.quadro .neg::after{content:"";position:absolute;inset:0;background:#d27a3c;mix-blend-mode:multiply;opacity:.75}
.quadro .pos{clip-path:circle(0px at 50% 50%)}
.quadro.revelado .pos{clip-path:circle(150% at 50% 50%);transition:clip-path 1s cubic-bezier(.3,.6,.2,1)}
.quadro figcaption{position:absolute;left:0;right:0;top:calc(100% + 26px);text-align:center;color:#2b2016;font-size:9.5px;letter-spacing:.16em;line-height:1.6;opacity:0;transition:opacity .6s}
.quadro figcaption span{display:block;opacity:.55}
.quadro.revelado figcaption{opacity:1}
.quadro .num{position:absolute;left:4px;bottom:-15px;font-size:8px;letter-spacing:.1em;color:#e8a26a;opacity:.9}
.lupa{position:fixed;left:0;top:0;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;pointer-events:none;z-index:20;
  box-shadow:0 0 0 7px #1b1b1d,0 0 0 8px #444,0 14px 30px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.35),inset 16px 16px 30px rgba(255,255,255,.12);transition:opacity .3s}
.lupa::after{content:"";position:absolute;right:-46px;bottom:-46px;width:62px;height:14px;background:#1b1b1d;border-radius:7px;transform:rotate(45deg);transform-origin:0 50%}
.copia{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:22px;text-align:center;background:rgba(8,7,6,.92);opacity:0;visibility:hidden;transition:opacity .8s,visibility 0s .8s;cursor:auto;padding:90px 20px 110px}
.copia.on{opacity:1;visibility:visible;transition:opacity .8s}
.folha-contato{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px;width:min(84vw,calc((100vh - 260px) * 1.34));width:min(84vw,calc((100svh - 260px) * 1.34))}
.folha-contato figure{margin:0}
.folha-contato img{width:100%;aspect-ratio:3/2;object-fit:cover;border:7px solid #f4efe8;box-shadow:0 14px 40px rgba(0,0,0,.55);display:block}
.folha-contato figcaption{margin-top:9px;font-size:11px;letter-spacing:.14em}
.folha-contato figcaption small{display:block;font-size:9px;opacity:.55;margin-top:2px}
@media (max-aspect-ratio:1/1){ .folha-contato{grid-template-columns:1fr 1fr;width:92vw;gap:18px 10px} }
.copia .nomes{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 34px;font-size:12px;letter-spacing:.14em}
.copia .nomes span small{display:block;font-size:9px;opacity:.55;margin-top:2px}
@media (max-aspect-ratio:1/1){
  .tira{flex-wrap:wrap;width:min(86vw,420px);gap:40px 8px;justify-content:center}
  .quadro{width:calc(50% - 8px)}
  .lupa{width:120px;height:120px;margin:-60px 0 0 -60px}
}

/* III o envelope e a carta */
#a4 .mesa{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,#1a171c 0%,#08070a 72%)}
.env{position:absolute;left:50%;top:50%;width:min(440px,84vw);aspect-ratio:1.55/1;transform:translate(-50%,-50%) rotate(-2.5deg);perspective:1400px;transition:transform .6s cubic-bezier(.5,0,.2,1),opacity .5s;z-index:3}
.env .corpo{position:absolute;inset:0;background-color:#e2d3b6;background-image:var(--papel-velho);background-size:cover;box-shadow:0 34px 70px rgba(0,0,0,.65),0 2px 0 rgba(255,255,255,.3) inset;border-radius:2px}
.env .corpo::before{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent 49.7%,rgba(60,40,50,.13) 50%,transparent 50.3%),linear-gradient(to top left,transparent 49.7%,rgba(60,40,50,.13) 50%,transparent 50.3%)}
.env .aba{position:absolute;left:0;right:0;top:0;height:58%;transform-origin:50% 0;transition:transform .5s cubic-bezier(.5,0,.2,1);z-index:2;filter:drop-shadow(0 4px 5px rgba(0,0,0,.2))}
.env .aba::before{content:"";position:absolute;inset:0;background-color:#dccbab;background-image:linear-gradient(180deg,rgba(255,255,255,.12),rgba(90,60,20,.12)),var(--papel-velho);background-size:cover;clip-path:polygon(0 0,100% 0,52% 100%,48% 100%)}
.env .selo{position:absolute;left:50%;top:58%;width:58px;margin:-20px 0 0 -29px;transform:rotate(-28deg);z-index:3;transition:opacity .4s}
.env .rem{position:absolute;left:18px;bottom:14px;text-align:left;color:#3b3450;opacity:.78;font-size:9.5px;letter-spacing:.22em;line-height:1.9;z-index:1}
.env .rem b{font-weight:400;opacity:.6;display:block;font-size:8.5px}
.env .carimbo{position:absolute;right:16px;bottom:14px;border:1.5px solid rgba(90,10,30,.8);color:rgba(90,10,30,.85);font-size:9px;letter-spacing:.24em;padding:4px 9px 3px;transform:rotate(-7deg);z-index:1;filter:blur(.25px);mix-blend-mode:multiply}
.env.aberto .aba{transform:rotateX(178deg);z-index:0}
.env.aberto .selo{opacity:0}
.env.saiu{transform:translate(-50%,55%) rotate(-2.5deg);opacity:0;pointer-events:none}
.carta{position:absolute;left:50%;top:50%;width:min(500px,90vw);max-height:calc(100% - 170px);overflow:auto;transform:translate(-50%,-38%) scaleY(.34);opacity:0;transform-origin:50% 0;z-index:4;
  background-color:#e6d8bd;background-image:var(--papel-velho);background-size:cover;color:#23264f;padding:44px 40px 34px;box-shadow:0 30px 80px rgba(0,0,0,.6);transition:transform .6s cubic-bezier(.5,0,.2,1),opacity .35s}
.carta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,transparent 32.9%,rgba(60,40,40,.07) 33.2%,rgba(255,255,255,.7) 33.5%,transparent 34.2%),linear-gradient(to bottom,transparent 65.9%,rgba(60,40,40,.07) 66.2%,rgba(255,255,255,.7) 66.5%,transparent 67.2%),radial-gradient(ellipse at 20% 0%,rgba(255,255,255,.5),transparent 60%)}
.carta{pointer-events:none}
.carta.on{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
.carta.sai{pointer-events:none}
.carta.sai{transform:translate(-50%,-40%);opacity:0}
.carta .cab{text-align:right;font-size:10px;letter-spacing:.2em;opacity:.7;margin-bottom:26px}
.bloco{margin:0 0 24px}
.bloco .pq{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-weight:500;font-size:clamp(14px,3.4vw,17px);line-height:1.4;margin:0 0 10px;min-height:1.4em}
.carta .cab,.bloco .pq,.bloco .ops,.env .rem{filter:url(#tinta);text-shadow:0 0 .7px rgba(35,38,79,.55)}
.bloco .ops{font-size:11.5px;letter-spacing:.12em;line-height:2.3;opacity:0;transition:opacity .35s}
.bloco .ops.on{opacity:1}
.bloco .ops .sep{opacity:.35;margin:0 .45em}
.bloco .op{position:relative;padding:2px 4px;transition:opacity .4s}
.bloco .ops.feito .op:not(.x){opacity:.3}
.bloco .op svg{visibility:hidden;position:absolute;left:-10%;top:-38%;width:120%;height:176%;overflow:visible;pointer-events:none}
.bloco .op path{fill:none;stroke:#8a1530;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .4s ease-out;vector-effect:non-scaling-stroke}
.bloco .op.x svg{visibility:visible}
.bloco .op.x path{stroke-dashoffset:0}
.carta .ps{font-size:11.5px;letter-spacing:.14em;margin-top:8px;min-height:3.2em;white-space:pre-line;line-height:2}
.carta .assina{width:46px;margin:6px 0 0 auto;opacity:0;transition:opacity 1.2s}
.carta .assina.on{opacity:.85}
.senha .linha{display:flex;align-items:center;gap:10px}
.senha .ir{padding:9px 16px;border:1px solid rgba(255,255,255,.8);border-radius:999px;font-size:11px;letter-spacing:.14em;background:rgba(0,0,0,.2);transition:background .25s,color .25s}
.senha .ir:hover{background:#fff;color:#000}

/* IV o caderno */
#a4{background:#000}
.qfundo{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity 1.2s}
.qfundo::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.4),rgba(0,0,0,.12) 35%,rgba(0,0,0,.75) 78%)}
.qbox{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 104px) max(24px,env(safe-area-inset-left,0px)) calc(env(safe-area-inset-bottom,0px) + 86px)}
.qtexto{font-family:var(--grot);font-weight:700;font-size:clamp(32px,5.4vw,66px);line-height:1;letter-spacing:-.02em;text-transform:none;max-width:12ch;margin-left:8%}
.qops{list-style:none;margin:0 auto;padding:0;text-align:center;font-size:13px;letter-spacing:.08em}
.qops li{margin:2px 0}
.qops button{padding:6px 10px;opacity:.75;transition:opacity .25s}
.qops button:hover,.qops button:focus-visible{opacity:1}
.qops button span{font-size:9.5px;margin-right:12px;opacity:.8}
.qops:hover button:not(:hover){opacity:.35}
.qstart{align-self:center}
.res{position:absolute;inset:0;display:grid;place-items:center;text-align:center;transition:transform .7s cubic-bezier(.6,0,.4,1),opacity .7s;background:linear-gradient(90deg,#1a2f93 0%,#2e5fb3 7%,#4a86c7 10%,#1f3aa6 15%,#102ea0 30%,#122fa6 100%)}
.res.virando{transform:perspective(1400px) rotateY(88deg);opacity:.2}
#a5.chegando .rosa-pz{animation:desvira .8s cubic-bezier(.2,.6,.3,1)}
@keyframes desvira{from{transform:perspective(1400px) rotateY(-88deg);opacity:.2}to{transform:none;opacity:1}}
.tl{list-style:none;margin:0;padding:0;font-size:12px;letter-spacing:.1em;line-height:2.15}
.tl li{opacity:.26;transition:opacity 1.2s}
.tl li small{font-size:8.5px}
.tl li.sua{opacity:1;position:relative}
.tl li.sua::before{content:"";position:absolute;left:-40px;top:50%;width:26px;height:26px;margin-top:-13px;background:var(--pinw) center/contain no-repeat;transform:rotate(-20deg)}
.tl li b{font-weight:400;font-size:9.5px;margin-right:10px}
.logo-r{width:170px;margin:30px auto 0;color:#fff}
.logo-r svg,.logo-f svg{width:100%;height:auto;display:block}
.refazer{position:absolute;right:max(24px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 86px)}

/* V o avesso: a rosa em peças, sem divisões */
#a5{background:#000;display:grid;place-items:center}
#a5 .capa{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;opacity:0;transition:opacity 1s}
#a5.pronto .capa{opacity:1}
.rosa-pz{position:relative;width:min(78vw,62vh);width:min(78vw,62svh);aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:0;transition:opacity 1.6s,transform 2.4s cubic-bezier(.3,.6,.2,1)}
#a5.pronto .rosa-pz{opacity:0;transform:scale(1.25);pointer-events:none}
.peca{background-size:300% 300%;transition:filter .3s,opacity .3s,transform .3s}
.peca.sel{filter:brightness(1.35);transform:scale(.96);box-shadow:0 0 0 1px rgba(161,201,201,.9)}
#fim{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 2s .8s,visibility 0s 2.8s}
#fim.on{opacity:1;visibility:visible;transition:opacity .8s}
#fim .fundo-fim{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 45%}
#fim::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.55),transparent 32%,transparent 68%,rgba(0,0,0,.55))}
#fim .col{position:absolute;top:50%;transform:translateY(-50%);z-index:2}
#fim .esq{left:max(28px,6vw);text-align:left}
#fim .dir{right:max(28px,6vw);text-align:right}
.logo-f{width:150px;margin:0 0 46px;color:#fff}
.pill{display:inline-block;padding:13px 26px;border:1px solid rgba(255,255,255,.8);border-radius:999px;font-size:11.5px;letter-spacing:.12em;transition:background .25s,color .25s}
.pill:hover{background:#fff;color:#000}
.pill-forte{background:#fff;color:#102ea0;border-color:#fff;padding:15px 30px;font-size:12px}
.pill-forte:hover{background:#102ea0;color:#fff;border-color:#102ea0}
.convite{margin:0 0 16px;max-width:22ch;margin-left:auto;line-height:1.9}
.data{font-size:12px;letter-spacing:.22em;margin-bottom:22px}
.senha{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.senha .tit{display:flex;align-items:center;gap:9px;letter-spacing:.16em}
.senha .tit svg{width:13px;height:13px}
.senha .sub{opacity:.65;font-size:10px}
.senha .linha{display:flex;align-items:center;gap:10px}
.senha input{width:200px;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.7);color:#fff;font:inherit;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:6px 2px;border-radius:0}
.senha input::placeholder{color:rgba(255,255,255,.5)}
.senha input:focus{outline:none;border-bottom-color:var(--agua)}
.senha .ir{padding:9px 16px;border:1px solid rgba(255,255,255,.8);border-radius:999px;font-size:11px;letter-spacing:.14em;background:rgba(0,0,0,.25);transition:background .25s,color .25s}
.senha .ir:hover{background:#fff;color:#000}
.senha.erro{animation:treme .4s}
@keyframes treme{25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
#senha-msg{min-height:1.6em;margin-top:8px;opacity:.8}
@media (max-aspect-ratio:1/1){
  #fim::after{background:linear-gradient(180deg,rgba(0,0,0,.6),transparent 30%,transparent 62%,rgba(0,0,0,.7))}
  #fim .col{left:24px;right:24px;transform:none;text-align:center}
  #fim .esq{top:calc(env(safe-area-inset-top,0px) + 70px)}
  #fim .dir{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 64px)}
  .logo-f{margin:0 auto 26px;width:130px}
  .convite{margin:0 auto 14px}
  .senha{align-items:center}
  .senha input{width:170px}
}
#a5 .contra{position:absolute;inset:0;z-index:3;display:grid;place-items:center;text-align:center;opacity:0;visibility:hidden;transform:perspective(1400px) rotateY(-80deg);transition:opacity .5s,transform .7s cubic-bezier(.3,.6,.2,1),visibility 0s .7s;
  background:linear-gradient(90deg,#1a2f93 0%,#2e5fb3 7%,#4a86c7 10%,#1f3aa6 15%,#102ea0 30%,#122fa6 100%)}
#a5 .contra.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s,transform .7s cubic-bezier(.3,.6,.2,1)}
#a5 .contra.sai{opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s}
.grav{transition:transform .5s cubic-bezier(.5,0,.2,1)}

/* o fio solto no final */
.fio-solto{position:absolute;right:0;top:34%;width:min(22vw,240px);height:120px;z-index:4;pointer-events:none}
.fio-solto svg{width:100%;height:100%;overflow:visible}
.fio-solto path{fill:none;stroke:#f2ece4;stroke-width:1.6;stroke-dasharray:7 5;stroke-linecap:round}
.fio-solto .puxa{pointer-events:auto;cursor:var(--pin);touch-action:none}
.fio-solto .puxa circle.alvo{fill:transparent}
.fio-solto .puxa circle.no{fill:#f2ece4;r:5px}
.fio-solto .puxa circle.onda{fill:none;stroke:#f2ece4;stroke-width:1;animation:mira 1.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
@media (max-aspect-ratio:1/1){ .fio-solto{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 90px);width:46vw;height:100px} }

/* o avesso do site */
#virada{position:fixed;inset:0;z-index:65;background:#000;opacity:0;visibility:hidden;pointer-events:none}
#virada.on{animation:virada 1.3s cubic-bezier(.6,0,.3,1) forwards;visibility:visible}
@keyframes virada{0%{opacity:0}35%{opacity:1}65%{opacity:1}100%{opacity:0}}
body.virando main,body.virando .act.on{transform:perspective(1600px) rotateY(88deg);transition:transform .45s cubic-bezier(.6,0,.4,1)}
#avesso{position:fixed;inset:0;z-index:62;overflow:auto;visibility:hidden;opacity:0;transition:opacity .4s,visibility 0s .4s;
  background-color:#17141b;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),repeating-linear-gradient(-45deg,rgba(0,0,0,.25) 0 1px,transparent 1px 4px)}
#avesso.on{visibility:visible;opacity:1;transition:opacity .4s}
#avesso .costuras{position:fixed;inset:14px;border:1.5px dashed rgba(242,236,228,.5);pointer-events:none}
#avesso .costuras::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(242,236,228,.22)}
#avesso .solto{position:fixed;pointer-events:none;opacity:.7}
#avesso .solto path{fill:none;stroke:#f2ece4;stroke-width:1.3}
#avesso .miolo{min-height:100%;display:grid;place-items:center;padding:110px 24px 90px}
.etiq{position:relative;width:min(560px,88vw);color:#1b2455;padding:30px 44px 24px;text-align:center;font-size:10.5px;letter-spacing:.16em;line-height:1.9;
  background-color:#efe8dc;
  background-image:linear-gradient(100deg,rgba(255,255,255,.28),transparent 30%,rgba(255,255,255,.18) 55%,transparent 80%),
    repeating-linear-gradient(0deg,rgba(27,36,85,.06) 0 1px,transparent 1px 2px),
    repeating-linear-gradient(90deg,rgba(80,60,40,.05) 0 1px,rgba(255,255,255,.18) 1px 2px,transparent 2px 3px);
  box-shadow:0 20px 50px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.05),inset 0 -2px 0 rgba(0,0,0,.06)}
.etiq::before,.etiq::after{content:"";position:absolute;top:8px;bottom:8px;border-left:1.5px dashed rgba(27,36,85,.45)}
.etiq::before{left:14px}.etiq::after{right:14px}
.et-pe{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.et-pe p{margin:0}
.etiq .g{font-family:var(--grot);text-transform:none;letter-spacing:-.01em;font-weight:700;font-size:26px;line-height:1;margin:4px 0 12px}
.etiq hr{border:0;border-top:1px solid rgba(27,36,85,.25);margin:14px 0}
.etiq .simb{display:flex;justify-content:center;gap:12px;margin:10px 0 2px}
.etiq .simb svg{width:20px;height:20px;fill:none;stroke:#1b2455;stroke-width:1.2}
.etiq .conta{font-size:13px;letter-spacing:.12em;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.logo-cost{position:relative;width:78%;margin:6px auto 14px}
.logo-cost svg{width:100%;height:auto;display:block}
.logo-cost svg path{fill:none;stroke:#1b2455;stroke-width:1.2;vector-effect:non-scaling-stroke}
.lc-guia svg path{stroke-dasharray:1.5 3.5;opacity:.7;stroke-width:1.1}
.lc-feita{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p,100%)) 0 0);transition:clip-path 1.6s cubic-bezier(.3,.6,.2,1)}
.lc-feita svg path{stroke-dasharray:4 3;stroke-width:1.6}
.av-acoes{display:flex;flex-direction:column;gap:8px;align-items:center;margin-top:14px}
.av-acoes .abrir{margin-top:0}
.etiq .barra2{height:8px;margin:10px 0 6px;border:1px solid rgba(27,36,85,.5);position:relative}
.etiq .barra2 i{position:absolute;left:0;top:0;bottom:0;background:repeating-linear-gradient(90deg,#1b2455 0 6px,transparent 6px 9px);width:var(--p,100%)}
.etiq .abrir{margin-top:14px;padding:10px 18px;border:1px solid #1b2455;border-radius:999px;font-size:10.5px;letter-spacing:.16em}
.etiq .abrir:hover{background:#1b2455;color:#efe9df}
.etiq .abrir[hidden]{display:none}
#avesso .alf{position:absolute;top:-18px;left:50%;width:48px;margin-left:-24px;transform:rotate(14deg);filter:invert(18%) sepia(60%) saturate(3000%) hue-rotate(220deg) brightness(.7)}
#avesso .desvirar{position:fixed;left:max(24px,env(safe-area-inset-left,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 22px);z-index:3}
#avesso .fecha-av{position:fixed;right:max(24px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 22px);z-index:3}

/* abertura com a voz da Carol */
#a7{background:#000;display:grid;place-items:center;text-align:center;padding:0 28px}
#a7 .leg{font-size:clamp(12px,1.6vw,15px);letter-spacing:.16em;line-height:1.9;max-width:36ch;min-height:8em;text-align:left}
#a7 .leg p{margin:0 0 .6em;opacity:0;transition:opacity .4s,color .6s}
#a7 .leg p.on{opacity:1}
#a7 .leg p.velha{opacity:.45}
#a7 .leg.sozinho{text-align:center}
#a7 .quem{font-size:10px;letter-spacing:.22em;opacity:.6;margin-bottom:18px;text-align:left}
#a7 .rec{position:absolute;top:calc(env(safe-area-inset-top,0px) + 80px);left:0;right:0;display:flex;justify-content:center;align-items:center;gap:9px;font-size:10px;letter-spacing:.2em;opacity:.7}
#a7 .rec i{width:7px;height:7px;border-radius:50%;background:#ff2a1a;animation:pisca 1.1s steps(1) infinite}
#a7 .pular{position:absolute;right:max(24px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 64px)}

/* tracklist e canal */
#a8{background:#000}
#a8 .contra{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:linear-gradient(90deg,#1a2f93 0%,#2e5fb3 7%,#4a86c7 10%,#1f3aa6 15%,#102ea0 30%,#122fa6 100%)}
#a9{background:radial-gradient(ellipse at 50% 60%,#1b1512 0%,#080606 70%);display:grid;place-items:center}
.camarim{position:relative;width:min(250px,56vw);aspect-ratio:.46;perspective:1400px}
.camarim::before{content:"";position:absolute;inset:-14px -14px 0;border:14px solid #120d0b;border-bottom:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.fresta{position:absolute;left:0;right:0;bottom:-2px;height:6px;background:linear-gradient(90deg,transparent,rgba(255,196,120,.9),transparent);filter:blur(2px);box-shadow:0 0 30px 10px rgba(255,170,90,.25);transition:opacity .6s}
.dentro{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:16px;text-align:center;padding:22px;
  background:radial-gradient(ellipse at 50% 30%,#ffe2b0 0%,#f2b36a 45%,#7a3c16 100%);color:#2a140a}
.plaquinha.interna{position:static;transform:rotate(-2deg);margin-bottom:6px}
.fecha-porta{font-size:10px;letter-spacing:.16em;color:#2a140a;opacity:.7;margin-top:4px}
.fecha-porta:hover{opacity:1}
.dentro .pill{border-color:#2a140a;color:#2a140a;background:rgba(255,255,255,.2)}
.dentro .pill:hover{background:#2a140a;color:#ffe2b0}
.porta{position:absolute;inset:0;transform-origin:0 50%;transition:transform 1.1s cubic-bezier(.5,0,.2,1);z-index:2;
  background:linear-gradient(90deg,#3a2a21,#2c1f18 60%,#241913);box-shadow:inset 0 0 0 10px #2a1d16,inset 0 0 0 11px rgba(0,0,0,.35)}
.porta::before,.porta::after{content:"";position:absolute;left:18%;right:18%;border:1px solid rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.porta::before{top:9%;height:34%}.porta::after{bottom:9%;height:38%}
.macaneta{position:absolute;right:11%;top:52%;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e8c890,#8a6632);box-shadow:0 2px 3px rgba(0,0,0,.6)}
.plaquinha{position:absolute;left:50%;top:22%;transform:translateX(-50%) rotate(-3deg);background:#eee7dc;color:#1b2455;padding:12px 14px 9px;font-size:10px;letter-spacing:.24em;box-shadow:0 3px 8px rgba(0,0,0,.5);z-index:2;white-space:nowrap}
.plaquinha small{display:block;font-size:8px;opacity:.6;margin-top:3px}
.plaquinha img{position:absolute;top:-12px;left:50%;width:30px;margin-left:-15px;transform:rotate(80deg);filter:invert(18%) sepia(60%) saturate(3000%) hue-rotate(220deg) brightness(.7)}
.porta.bate{animation:bate .18s ease-out}
@keyframes bate{40%{transform:translateX(2px) rotateY(-1.5deg)}}
.camarim.aberto .porta{transform:rotateY(-108deg)}
.camarim.aberto .fresta{opacity:0}
.toc{position:absolute;font-size:12px;letter-spacing:.2em;opacity:0;pointer-events:none}
.toc.on{animation:toc .7s ease-out}
@keyframes toc{0%{opacity:0;transform:translateY(0)}20%{opacity:.9}100%{opacity:0;transform:translateY(-26px)}}

/* nada de um capítulo escondido fica clicável por cima de outro */
.act:not(.on) .copia.on,.act:not(.on) #fim.on,.act:not(.on) .contra.on,.act:not(.on) .carta.on,.act:not(.on) .cordao.on,.act:not(.on) .recdot.on{visibility:hidden!important}
/* o arquivo: caixa com cadeado de letras */
#a10{background:radial-gradient(ellipse at 50% 55%,#191512 0%,#070605 72%);display:grid;place-items:center}
.caixa{position:relative;width:min(520px,88vw);aspect-ratio:1.45;background:linear-gradient(170deg,#b99a70,#a0805a 55%,#8c6d4a);box-shadow:0 30px 70px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.12),inset 0 -40px 60px rgba(0,0,0,.12);display:grid;place-items:center}
.caixa::before{content:"";position:absolute;left:0;right:0;top:0;height:18%;background:linear-gradient(180deg,rgba(0,0,0,.15),transparent);border-bottom:1px solid rgba(0,0,0,.18)}
.cx-rot{position:absolute;left:8%;top:26%;background:#eee7dc;color:#1b2455;padding:8px 14px 6px;font-size:11px;letter-spacing:.3em;transform:rotate(-2deg);box-shadow:0 2px 5px rgba(0,0,0,.3)}
.cadeado2{position:relative;margin-top:14%;display:grid;justify-items:center;gap:10px;padding:18px 16px 12px;border-radius:12px;background:linear-gradient(180deg,#d8b76a,#b08a3e 60%,#8f6d2c);box-shadow:0 10px 24px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.5)}
.alca{position:absolute;left:50%;top:-54px;width:86px;height:70px;margin-left:-43px;border:10px solid #9a9aa0;border-bottom:0;border-radius:44px 44px 0 0;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.cadeado2.aberto .alca{transform:translateY(-20px)}
.rodas{display:flex;gap:6px}
.roda{width:38px;height:62px;border:0;border-radius:5px;background:linear-gradient(180deg,#141414,#2e2e30 45%,#2e2e30 55%,#141414);color:#efe8dc;font-family:inherit;font-size:20px;letter-spacing:0;text-align:center;text-align-last:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);-webkit-appearance:none;appearance:none}
.roda:focus-visible{outline:1px solid var(--agua)}
.gravura{font-size:8.5px;letter-spacing:.2em;color:#4a3614;opacity:.85;margin:0}
.cadeado2.erro{animation:treme .4s}

/* arquivo: moodboard */
.over{position:fixed;inset:0;z-index:70;background:#000;overflow:auto;opacity:0;visibility:hidden;transition:opacity .8s,visibility 0s .8s;-webkit-user-select:none}
.over.on{opacity:1;visibility:visible;transition:opacity .8s}
.barra{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 18px) max(24px,env(safe-area-inset-right,0px)) 16px max(24px,env(safe-area-inset-left,0px));background:#000}
.mood{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:19vw;grid-auto-flow:dense;gap:0}
.mood .w{grid-column:span 2}
.mood .t{grid-row:span 2}
.tile{position:relative;perspective:1400px;overflow:hidden}
.tile .fr,.tile .vs{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform 1s cubic-bezier(.5,0,.2,1)}
.tile .fr img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.tile:hover .fr img{transform:scale(1.03)}
.tile .vs{background:var(--azul);color:#fff;transform:rotateY(180deg);display:grid;place-items:center;text-align:center;padding:22px}
.tile .vs .frase{font-size:clamp(12px,1.25vw,16px);letter-spacing:.1em;line-height:1.7;max-width:22ch}
.tile .vs .nn{position:absolute;bottom:14px;left:0;right:0;font-size:10px;opacity:.6}
.tile::after{content:"";position:absolute;right:12px;bottom:12px;width:12px;height:12px;z-index:2;pointer-events:none;opacity:.8;
  background:linear-gradient(#fff,#fff) center/12px 1.5px no-repeat,linear-gradient(#fff,#fff) center/1.5px 12px no-repeat;transition:opacity .4s}
.tile.vira::after{opacity:0}
.tile.vira .fr{transform:rotateY(-180deg)}
.tile.vira .vs{transform:rotateY(0)}
.lista{list-style:none;padding:0;margin:0;max-width:420px}
.redes{display:flex;gap:26px;margin-top:34px}
.redes a{width:24px;height:24px;opacity:.8;transition:opacity .25s}
.redes a:hover{opacity:1}
.redes svg{width:100%;height:100%;display:block}
.lista li{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.show-lanc{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 0 22px;border-bottom:1px solid rgba(255,255,255,.18)}
.show-lanc-tit{font-size:11.5px;letter-spacing:.06em}
.show-lanc-sub{font-size:9.5px;line-height:1.7;margin-top:7px}
.show-lanc .pill{flex-shrink:0}

@media (max-width:700px){
  .show-lanc{flex-direction:column;align-items:flex-start;gap:14px}
  .chrome.top{grid-template-columns:1fr auto}
  .chrome.top .links{display:none}
  #count{justify-self:end;text-align:right}
  #count .rel{font-size:11px;letter-spacing:.08em}
  #count .dim,#count br{display:none}
  .chrome.bot{grid-template-columns:auto 1fr}
  #hint{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 58px);font-size:10px}
  .links-m{display:flex}
  .so-desk{display:none}
  .so-mob{display:inline;font-size:16px;line-height:1}
  .bot .fim .u{text-decoration:none}
  .qtexto{margin-left:0}
  .tl{font-size:10.5px;line-height:2}
  .tl li.sua::before{left:-30px;width:20px;height:20px;margin-top:-10px}
  .mood{grid-template-columns:repeat(2,1fr);grid-auto-rows:44vw}
  .mood .w{grid-column:span 2}
  #tt{bottom:calc(env(safe-area-inset-bottom,0px) + 150px)}
}
/* a11: shows e imprensa (dentro do próprio set) */
#a11{overflow-y:auto;-webkit-overflow-scrolling:touch;-webkit-user-select:text;user-select:text}
#a11 .pg-bg{position:fixed;inset:0;z-index:0}
#a11 .pg-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
#a11 .pg-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.4) 40vh,rgba(0,0,0,.88) 78vh,#000 100%)}
#a11 .pg-content{position:relative;z-index:1}
#a11 .pg-hero{min-height:92vh;display:flex;align-items:flex-end;justify-content:center;text-align:center;padding:0 max(24px,env(safe-area-inset-left,0px)) 100px}
#a11 .pg-hero-tx{max-width:560px;width:100%;margin:0 auto}
#a11 .pg-hero-tx .g{font-size:clamp(40px,11vw,92px);font-weight:700;line-height:1;margin:0}
#a11 .pg-logo-row{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}
#a11 .pg-avesso-logo{height:.56em;width:auto;display:flex;align-items:center}
#a11 .pg-avesso-logo svg{height:100%;width:auto;display:block}
#a11 .pg-corpo{max-width:560px;margin:0 auto;padding:0 max(24px,env(safe-area-inset-left,0px)) 110px}
#a11 .pg-sec{margin-top:56px}
#a11 .pg-sec:first-child{margin-top:0}
#a11 .show-lanc-mini a{white-space:nowrap}
#a11 .redes.grande a{width:38px;height:38px}
#a11 .redes.grande{gap:30px}
#a11 .pg-rodape{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.14);padding:26px max(24px,env(safe-area-inset-left,0px)) calc(env(safe-area-inset-bottom,0px) + 90px);font-size:9.5px;text-align:center;background:#000}
@media (max-width:700px){
  #a11 .pg-hero{min-height:82vh}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  #a0 .rosa{clip-path:none}#a0 .comecar{opacity:1}
}