:root{
  --folha:#F5F1E8; --tinta:#15131A; --brasa:#FF4321; --gema:#FFD12E; --anil:#2F49F2; --gelo:#5CD3FF;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-mola:linear(0, 0.044 0.6%, 0.118 1.5%, 0.215 2.7%, 0.329 3.9%, 0.456 5.3%, 0.589 6.8%, 0.722 8.4%, 0.846 10%,
    0.958 11.7%, 1.051 13.5%, 1.122 15.4%, 1.171 17.3%, 1.198 19.3%, 1.204 21.3%, 1.194 23.4%, 1.17 25.5%, 1.138 27.7%,
    1.102 29.9%, 1.067 32.2%, 1.034 34.5%, 1.006 36.8%, 0.986 39.2%, 0.972 41.7%, 0.965 44.1%, 0.964 46.6%, 0.967 49.2%,
    0.973 51.7%, 0.98 54.3%, 0.988 57%, 0.994 59.6%, 1 62.3%, 1.003 65.1%, 1.006 67.8%, 1.006 73.4%, 1.004 79.1%,
    1.001 85%, 0.999 90.9%, 1);
  --gut:clamp(16px,3vw,44px);
  --topo:clamp(76px,10vh,96px);
  --disp:"Anybody","Arial Black",sans-serif;
  --ler:"Instrument Sans","Helvetica Neue",sans-serif;
  --traco:4px;
  --L:125vh;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--folha);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;color:var(--tinta);background:var(--folha);font:500 clamp(16px,1.25vw,19px)/1.45 var(--ler);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,figure{margin:0;padding:0}
ul{list-style:none}
::selection{background:var(--brasa);color:var(--tinta)}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.obra--studio :focus-visible,.obra--sobre :focus-visible{outline-color:var(--folha)}

/* barra de rolagem do tema */
::-webkit-scrollbar{width:12px;height:12px;background:transparent}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-button{display:none}
::-webkit-scrollbar-thumb{border:4px solid transparent;border-radius:0;background:var(--pega,rgba(21,19,26,.5)) padding-box}
::-webkit-scrollbar-thumb:hover{border-width:3px}
::-webkit-scrollbar-thumb:active{border-width:3px;background-color:var(--brasa)}
@supports not selector(::-webkit-scrollbar){html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--tinta) 45%,transparent) transparent}}

/* botão: tecla física */
.btn{display:inline-block;font:800 clamp(15px,1.15vw,17px)/1 var(--disp);font-stretch:90%;text-decoration:none;color:var(--tinta);background:var(--folha);
  border:3px solid var(--tinta);box-shadow:4px 4px 0 var(--tinta);padding:.8em 1.05em;cursor:pointer;
  transition:translate .14s var(--ease-out),box-shadow .14s var(--ease-out),background .12s}
.btn:hover{translate:-2px -2px;box-shadow:6px 6px 0 var(--tinta)}
.btn:active{translate:4px 4px;box-shadow:0 0 0 var(--tinta)}
.btn:focus-visible{outline-offset:5px}
.btn--brasa{background:var(--brasa)}
.btn--grande{font-size:clamp(18px,1.6vw,24px);padding:.75em 1.3em}

/* topo */
.topo{position:fixed;z-index:10;top:clamp(12px,2vh,20px);left:var(--gut);right:var(--gut);display:flex;justify-content:space-between;align-items:center;pointer-events:none;
  transition:translate .3s cubic-bezier(.4,0,1,1)}
.topo>*{pointer-events:auto}
.marca{font:900 clamp(18px,1.6vw,22px)/1 var(--disp);font-stretch:80%;text-decoration:none;background:var(--folha);border:3px solid var(--tinta);padding:.42em .6em .38em;box-shadow:3px 3px 0 var(--tinta)}

/* a personagem fica acima das folhas e abaixo do conteúdo */
#ator{display:none}
.vivo #ator{display:block;position:fixed;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
#ator-corpo{fill:var(--brasa);stroke:var(--tinta);stroke-linejoin:miter;stroke-miterlimit:8}
#ator-sombra{fill:var(--tinta)}
#ator-facetas line{stroke:var(--tinta);stroke-linecap:round}
/* só na cena do YRPG: o dado passa por cima do conteúdo e pousa sobre o print */
.vivo.dado-em-cima #ator{z-index:3}
#ator.pisca{animation:pisca 1.06s steps(1,end) infinite}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:0}}

/* abertura */
.abertura{position:relative;min-height:100svh;display:flex;align-items:center;padding:var(--topo) var(--gut) clamp(20px,5vh,48px)}
.ondas{position:absolute;left:0;top:0;pointer-events:none}
.abertura__miolo{position:relative;z-index:2;width:100%}
.cartaz{font:900 clamp(50px,min(10.4vw,18.6vh),196px)/.98 var(--disp);font-stretch:68%;letter-spacing:-.022em}
.abertura__sub{max-width:34em;margin-top:clamp(18px,3.4vh,34px);font-size:clamp(16px,1.5vw,22px)}
.abertura__acoes{margin-top:clamp(16px,2.6vh,26px)}

.ch{display:inline-block;white-space:pre}
.palavra{display:inline-block;white-space:nowrap}
.vivo [data-tipar] .ch{visibility:hidden}
.vivo [data-tipar] .ch.on{visibility:visible}

/* folhas */
.obra{position:relative}
.obra--yrpg{background:var(--gema)}
.obra--studio{background:var(--anil);color:var(--folha)}
.obra--wiki{background:var(--gelo)}
.obra--sobre{background:var(--tinta);color:var(--tinta)}
.obra--fim{background:var(--folha)}
.palco{position:relative;padding:var(--topo) var(--gut) clamp(24px,4vh,44px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:clamp(20px,3vw,48px);min-height:100svh}
.vivo .obra{height:calc(100svh + var(--L))}
/* fundo das obras: um mural com as telas reais do projeto, em colunas inclinadas que correm com a rolagem,
   atrás de um véu na cor da folha. Miniaturas nítidas, sem filtro nem ampliação (ferramentas/fundos.sh). */
.fundo{display:none}
/* a caixa absoluta recorta na seção; o sticky fica dentro dela (sticky com margem negativa vazava uma tela abaixo) */
.vivo .fundo{display:block;position:absolute;inset:0;overflow:clip;pointer-events:none}
.fundo__vista{position:sticky;top:0;height:100svh;overflow:hidden}
.fundo__vista::after{content:"";position:absolute;inset:0;background:var(--veu-cor);opacity:var(--veu,.84)}
.obra--yrpg{--veu-cor:var(--gema);--veu:.8}
.obra--studio{--veu-cor:var(--anil);--veu:.76}
.obra--wiki{--veu-cor:var(--gelo);--veu:.82}
.mural{position:absolute;left:50%;top:50%;width:max(150vw,150vh);display:flex;gap:clamp(18px,2.4vw,36px);transform:translate(-50%,-50%) rotate(-9deg)}
.mural__col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:clamp(18px,2.4vw,36px);will-change:transform}
.mural__peca{display:block;border:3px solid var(--tinta);box-shadow:8px 8px 0 var(--tinta);background:var(--tinta)}
.mural__peca img{display:block;width:100%;height:auto}
.mural__peca--estreita{width:52%}
.mural__peca--estreita:nth-child(odd){align-self:flex-end}
.mural__peca--bicho{width:46%;background:var(--folha);aspect-ratio:1;display:grid;place-items:center}
.mural__peca--bicho:nth-child(odd){align-self:flex-end}
.mural__peca--bicho img{width:min(62%,132px)}
.mural__peca--logo{background:var(--folha);padding:8% 6%}
/* folha coberta: o palco fica preso enquanto a folha seguinte sobe por cima dele */
.vivo .obra[data-coberta]{height:calc(200svh + var(--L))}
.vivo .obra[data-coberta] + .obra{margin-top:-100svh}
.vivo .palco{position:sticky;top:0;height:100svh;z-index:2;overflow:hidden}

.titulo{font:900 clamp(64px,min(17vw,30vh),268px)/.9 var(--disp);font-stretch:68%;letter-spacing:-.022em}
.texto{display:flex;flex-direction:column;justify-content:space-between;gap:20px;min-width:0}
.ficha{display:grid;gap:clamp(10px,1.6vh,16px);justify-items:start;max-width:29em}
.meta{font-weight:700;font-size:clamp(14px,1.05vw,16px)}
.desc{font-size:clamp(16px,1.42vw,21px);line-height:1.38}
.ficha .btn{margin-top:6px}

/* prints */
.print{border:var(--traco) solid var(--tinta);box-shadow:9px 9px 0 var(--tinta);background:var(--tinta)}
.print img{width:100%}
.cena{position:relative;min-width:0;min-height:0}

/* YRPG */
.cena--yrpg{--R:clamp(44px,min(7.6vw,12.5vh),112px);--c:calc(var(--R)*.62)}
.print--mesa{position:absolute;right:calc(var(--gut)*.1 + 2%);top:calc(var(--R)*.4);width:min(88%,calc((100svh - 240px)*1.25))}
.encaixe-d20{position:absolute;left:calc(var(--c) - var(--R));top:calc(var(--c) - var(--R));width:calc(var(--R)*2);height:calc(var(--R)*2)}
.peca{display:block;width:100%;height:100%;overflow:visible}
.vivo .peca{display:none}
.print--voa{position:absolute}
.print--ficha{width:44%;left:6%;bottom:2%}
.print--rolador{width:19%;left:53%;bottom:1%}
.print--celular{width:15.5%;right:0;bottom:2%}
.print__corte{position:relative}

/* Studio.dev */
.obra--studio .btn{color:var(--tinta)}
.obra--studio .palco{grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto minmax(0,1fr);row-gap:clamp(6px,1.4vh,14px)}
.obra--studio .texto{display:contents}
.obra--studio .titulo{grid-column:1/-1;font-size:clamp(58px,min(13.2vw,21vh),200px)}
.obra--studio .ficha{align-self:end}
.cena--studio{display:flex;align-items:flex-end;justify-content:flex-end}
.janela{position:relative;width:min(100%,calc((100svh - var(--topo) - 21vh - 110px)*1.6));border:var(--traco) solid var(--tinta);box-shadow:10px 10px 0 var(--tinta);background:var(--brasa)}
.janela__tudo{padding:0 10px 10px}
.janela__barra{display:flex;align-items:center;gap:8px;height:clamp(34px,4.6vh,44px);font-weight:700;font-size:15px;color:var(--tinta)}
.janela__barra i{width:13px;height:13px;background:var(--folha);border:2.5px solid var(--tinta)}
.janela__barra span{margin-left:8px}
.janela__tela{position:relative;border:3px solid var(--tinta);overflow:hidden;aspect-ratio:16/10;background:#05060c}
.janela__tela img{width:100%}
.tela-b{display:none}
.vivo .tela-b{display:block;position:absolute;left:0;top:0;border-top:4px solid var(--tinta)}
.vivo .janela{border-color:transparent;box-shadow:none;background:none}

/* Wiki */
.obra--wiki .palco{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.obra--wiki .titulo{font-size:clamp(58px,min(8.6vw,15.4vh),150px)}
.cena--wiki{display:flex;flex-direction:column;justify-content:center}
.logo-wiki{position:relative;width:100%}
.logo-wiki img{width:100%;position:relative}
.encaixe-slime{position:absolute;left:66%;top:1%;width:30%;height:49%}
.slime{position:absolute;width:clamp(84px,9vw,132px);height:auto}
.slime--a{left:6%;bottom:6%}
.slime--b{left:30%;bottom:6%}
.vivo .encaixe-slime{z-index:-1}

/* outros */
.outros{position:relative;padding:clamp(70px,14vh,150px) var(--gut) clamp(90px,40vh,420px)}
.outros__miolo{position:relative;z-index:2}
.rotulo{font:800 clamp(16px,1.4vw,20px)/1 var(--disp);font-stretch:90%;margin-bottom:clamp(20px,5vh,48px)}
.linhas{display:grid;gap:clamp(30px,7vh,76px)}
.linha{display:grid;gap:8px}
.linha__nome{justify-self:start;font:900 clamp(40px,8.2vw,132px)/1 var(--disp);font-stretch:68%;letter-spacing:-.02em;text-decoration:none;
  transition:font-stretch .7s var(--ease-out),color .2s}
a.linha__nome{text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.1em}
.outros__mais{margin-top:clamp(36px,7vh,72px)}
.linha__desc{max-width:34em;font-size:clamp(16px,1.42vw,21px)}
.vivo .linha.on .linha__nome{font-stretch:92%}

/* sobre */
.obra--sobre .palco{display:flex;align-items:center;justify-content:center}
.bloco{position:relative;width:calc(100% - 12px);background:var(--brasa);border:var(--traco) solid var(--folha);box-shadow:12px 12px 0 var(--folha)}
.vivo .bloco{background:none;border-color:transparent;box-shadow:none}
.bloco__tudo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vh,32px) clamp(20px,3vw,48px);padding:clamp(18px,3.4vw,48px)}
.bloco__frase{grid-column:1/-1;font:900 clamp(32px,min(7.4vw,12.6vh),128px)/.98 var(--disp);font-stretch:68%;letter-spacing:-.018em}
.bloco__col h3{font:800 clamp(15px,1.4vw,20px)/1.1 var(--disp);font-stretch:90%;margin-bottom:6px}
.bloco__col p{font-size:clamp(15px,1.5vw,22px);line-height:1.36}
.bloco__col--larga{grid-column:1/-1}

/* fim */
.obra--fim .palco{display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,2vh,20px);padding-bottom:clamp(16px,3vh,32px)}
.fim__antes{font-size:clamp(17px,1.6vw,24px);font-weight:600}
.titulo--fim{font-size:clamp(54px,min(10.4vw,18vh),176px)}
.form{display:grid;gap:clamp(12px,2vh,20px);margin-top:clamp(4px,1.4vh,14px)}
.campo{display:grid;gap:8px;cursor:text}
.campo__rotulo{font-weight:600;font-size:clamp(15px,1.3vw,19px)}
.campo__caixa{--fs:clamp(30px,min(4.6vw,8vh),72px);position:relative;display:block;height:calc(var(--fs)*2.74 + 2*var(--traco));border:var(--traco) solid var(--tinta);box-shadow:9px 9px 0 var(--tinta);
  transition:box-shadow .14s var(--ease-out)}
#msg{display:block;width:100%;height:100%;border:0;outline:0;background:none;resize:none;color:var(--tinta);overflow:hidden;
  font:800 var(--fs)/1.05 var(--disp);font-stretch:72%;letter-spacing:-.01em;padding:calc(var(--fs)*.32) calc(var(--fs)*.4);caret-color:var(--brasa)}
.vivo #msg{caret-color:transparent}
.vivo #msg::selection{background:var(--brasa)}
.campo__caixa:focus-within{box-shadow:9px 9px 0 var(--brasa)}
/* sem JS a barra pisca sozinha no campo, parada, como estado final */
.campo__barra{position:absolute;left:clamp(12px,1.9vw,29px);top:.9em;bottom:.9em;width:clamp(4px,.45vw,7px);background:var(--brasa)}
.vivo .campo__barra,#msg:focus + .campo__barra,#msg:not(:placeholder-shown) + .campo__barra{display:none}
.form__base{display:flex;flex-wrap:wrap;gap:clamp(12px,1.6vw,24px);align-items:flex-end}
.email{flex:1 1 240px;display:grid;gap:6px;font-weight:600;font-size:clamp(15px,1.3vw,19px)}
#email{width:100%;font:700 clamp(18px,1.6vw,24px)/1.2 var(--ler);background:none;border:0;border-bottom:var(--traco) solid var(--tinta);padding:.3em 0;color:var(--tinta);border-radius:0;outline:0;caret-color:var(--brasa)}
.vivo #email{caret-color:transparent}
#email:focus-visible{border-bottom-color:var(--brasa)}
.form__status{min-height:1.4em;font-weight:600;font-size:clamp(15px,1.2vw,18px)}
.form__aviso{font-size:13px;opacity:.7;margin-top:-6px}
[data-captcha]{position:absolute;width:0;height:0;overflow:hidden}
.form [type=submit][disabled]{opacity:.6;cursor:progress}
.fim__links{display:flex;flex-wrap:wrap;gap:6px 28px;font-weight:700;font-size:clamp(15px,1.2vw,18px)}

/* celular */
@media (max-width:820px){
  :root{--L:110vh}
  .palco,.obra--wiki .palco{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:16px}
  .obra--studio .palco{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:12px}
  .obra--studio .titulo{grid-column:auto}
  .cartaz{font-size:clamp(46px,15.7vw,110px)}
  .so-largo{display:none}
  .titulo{font-size:clamp(60px,21vw,120px)}
  .obra--studio .titulo{font-size:clamp(56px,20vw,110px)}
  .obra--wiki .titulo{font-size:clamp(50px,15.4vw,96px)}
  .texto{justify-content:flex-start;gap:12px}
  .ficha{gap:8px;max-width:none}
  .cena--yrpg{--R:clamp(40px,12vw,60px)}
  .print--mesa{right:0;left:auto;width:calc(100% - 18px);top:calc(var(--R)*.45)}
  .print--ficha{width:58%;left:0;bottom:0}
  .print--rolador{width:26%;left:46%;bottom:4%}
  .print--celular{width:24%;right:2px;bottom:0}
  .print{box-shadow:6px 6px 0 var(--tinta)}
  .cena--studio{align-items:center}
  .janela{width:calc(100% - 8px)}
  .janela__tudo{padding:0 7px 7px}
  .bloco__tudo{grid-template-columns:minmax(0,1fr)}
  .bloco{width:calc(100% - 10px);box-shadow:8px 8px 0 var(--folha)}
  .bloco__frase{font-size:clamp(30px,9.4vw,60px)}
  .titulo--fim{font-size:clamp(50px,16.4vw,110px)}
  .campo__caixa{--fs:clamp(28px,8.4vw,52px)}
  .btn--grande{flex:1 1 100%;text-align:center}
}

@media (max-width:380px){.cartaz{font-size:14.2vw}}

@media (max-width:820px) and (max-height:720px){
  .print--ficha{width:46%}
  .print--rolador{width:20%;left:50%}
  .print--celular{width:19%}
}

/* sem movimento e sem JS: tudo no lugar, página normal */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* quando a barra entrou no campo, o atalho do topo sai de cena: o contato já está na mão */
.livre .topo .btn{translate:0 calc(-100% - 40px)}
.vivo [data-fim-dica]{display:block}
.espelho{position:absolute;left:-9999px;top:0;visibility:hidden;overflow-wrap:break-word;word-break:normal}