.review-nav{display:flex;align-items:center;justify-content:center;gap:18px;padding:14px 16px;font:700 14px/1.3 var(--f-txt);background:#1b1b1b;color:#fff}
.review-nav a{color:inherit;text-underline-offset:4px;padding:12px 4px}
.review-nav a:hover{color:#ff9c00}
.review-nav a:focus-visible,.player-controls button:focus-visible,.stories button:focus-visible{outline:3px solid #fff;outline-offset:4px}
body.stories{height:100dvh;overflow:hidden;overscroll-behavior:none;display:flex;align-items:center;justify-content:center;background:#111}
.stories #board{position:relative;flex:none;padding:0;gap:0;width:var(--story-width,100vw);height:100%;overflow:hidden;border-radius:0;isolation:isolate;touch-action:pan-y}
.stories .tela{position:absolute;top:0;left:0;width:var(--scene-width,1080px);height:var(--scene-height,1920px);transform:scale(var(--story-k));transform-origin:0 0;visibility:hidden;pointer-events:none}
.stories .faixa{width:100%}
.stories .progresso{top:calc((env(safe-area-inset-top,0px) + 12px) / var(--story-k))}
.stories .fonte{bottom:calc((env(safe-area-inset-bottom,0px) + 14px) / var(--story-k))}
.stories .tela.active{visibility:visible;pointer-events:auto}
.stories .progresso i{position:relative;overflow:hidden;background:#ffffff4d}
.stories .progresso i::after{content:'';position:absolute;inset:0;background:#fff;transform:scaleX(var(--progress,0));transform-origin:left}
.stories .foto video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);opacity:0;transition:opacity .25s}
.stories .foto video.playable{opacity:1}
.stories .active .motion-item{animation:reveal .8s cubic-bezier(.18,.8,.2,1) both;animation-delay:var(--delay,0s)}
.stories .active .heroi.motion-item{animation-name:hero-reveal}
.stories .active .barra .b{transform-origin:left;animation:bar-reveal 1.15s cubic-bezier(.18,.8,.2,1) both;animation-delay:var(--delay,.4s)}
.stories .active .textura{animation:texture-drift 2s steps(8,end) infinite}
.stories .active .recorte{animation:object-float 5s ease-in-out infinite}
.stories .active .reacao img{animation:reaction-nod 4.5s ease-in-out infinite;animation-delay:1.4s;transform-origin:50% 85%}
.stories.is-paused .active *{animation-play-state:paused!important}
.stories .active.static-entry .motion-item,.stories .active.static-entry .barra .b{animation:none}
.stories .opt{border:0;cursor:pointer;width:100%;transition:background .2s,color .2s}
.stories .opt:hover,.stories .opt:focus-visible{background:var(--amarelo);color:#063e6d}
.stories .btn{cursor:pointer;background:transparent;color:#fff}
.stories .btn.cheio{background:#fff;color:var(--laranja)}
.player-controls{position:absolute;top:calc(env(safe-area-inset-top,0px) + 22px);right:12px;z-index:30;display:flex;align-items:center;gap:2px}
.player-controls button{width:44px;height:44px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:#0002;color:#fff;cursor:pointer}
.player-controls #previous,.player-controls #next,.player-position{display:none}
.player-controls button:hover{background:#ffffff25}
.player-controls button:disabled{opacity:.3;cursor:default}
.player-controls svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.player-position{min-width:65px;text-align:center;font:400 13px/1 var(--f-txt);font-variant-numeric:tabular-nums;color:#ddd}
.scene-wipe{position:absolute;inset:-4%;z-index:20;pointer-events:none;clip-path:polygon(0 0,91% 0,95% 14%,91% 28%,98% 43%,94% 58%,100% 73%,94% 88%,97% 100%,0 100%);transform:translateX(-115%)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes reveal{from{opacity:0;transform:translateY(42px)}to{opacity:1;transform:translateY(0)}}
@keyframes hero-reveal{from{opacity:0;transform:translateY(38px) scale(.93)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes bar-reveal{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes texture-drift{0%,100%{transform:translate(0,0)}25%{transform:translate(2px,-2px)}50%{transform:translate(-2px,1px)}75%{transform:translate(1px,2px)}}
@keyframes object-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes reaction-nod{0%,75%,100%{transform:rotate(0) translateY(0)}82%{transform:rotate(-2deg) translateY(-7px)}90%{transform:rotate(1.5deg) translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.stories .active *{animation:none!important}.stories .foto video{transition:none}.scene-wipe{display:none}}