@font-face{font-family:Bricolage;src:url(fonts/BricolageGrotesque-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:Mono;src:url(fonts/JetBrainsMono-Regular.woff2) format("woff2");font-weight:400;font-display:swap}

:root,[data-tema="escuro"]{
  --fundo:#141413;--plano:#1c1b1a;--linha:#2c2a28;--texto:#f3f1ea;--suave:#a19e95;
  --argila:#d97757;--sobre-argila:#141413;--ok:#7fb38a;--at:#e2b350;--nao:#8f97a6;--sombra:0 0 0;
  --luz:radial-gradient(60% 70% at 62% 40%,rgba(217,119,87,.16),transparent 70%);
}
[data-tema="claro"]{
  --fundo:#f6f4ee;--plano:#ece9e0;--linha:#dcd8cc;--texto:#191817;--suave:#66635c;
  --argila:#b4532f;--sobre-argila:#fff;--ok:#2f7a45;--at:#99650a;--nao:#5c6575;--sombra:60 40 20;
  --luz:radial-gradient(60% 70% at 62% 40%,rgba(180,83,47,.10),transparent 70%);
}
*{box-sizing:border-box}
html{transition:background-color .3s}
body{margin:0;background:var(--fundo);color:var(--texto);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;overflow-x:clip;
  transition:background-color .3s,color .3s}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--argila);outline-offset:3px;border-radius:6px}
.mono,.nums dd,.pos,.cresc b,.selo{font-family:Mono,ui-monospace,monospace;font-variant-numeric:tabular-nums}

.barra-topo{max-width:1120px;margin:0 auto;padding:18px 20px;display:flex;justify-content:space-between;align-items:center}
.marca{display:flex;gap:10px;align-items:center;font:800 20px Bricolage,sans-serif;letter-spacing:-.01em}
.marca img{border-radius:50%}
.marca em{font-style:normal;color:var(--argila)}
.acoes{display:flex;gap:8px;align-items:center}
.tema{font:600 14px system-ui,sans-serif;color:var(--suave);background:none;border:1px solid var(--linha);border-radius:999px;padding:9px 14px;cursor:pointer}
.tema:hover{color:var(--texto);border-color:var(--suave)}
.tema:focus-visible{outline:2px solid var(--argila);outline-offset:3px}
.seguir{font-weight:600;font-size:14px;padding:9px 14px;border-radius:999px;border:1px solid var(--linha)}
.seguir:hover{border-color:var(--argila);color:var(--argila)}

main{max-width:1120px;margin:0 auto;padding:0 20px}

/* hero: perfil à esquerda, grade de reels em 3D à direita */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px;align-items:center;
  min-height:560px;background:var(--luz)}
.perfil{padding:40px 0}
.anel{width:132px;height:132px;border-radius:50%;padding:5px;
  background:conic-gradient(from 210deg,var(--argila),#f0b38f,var(--argila) 60%,#7a3a22,var(--argila))}
.anel img{display:block;width:100%;height:100%;border-radius:50%;border:4px solid var(--fundo);object-fit:cover}
h1{font:800 clamp(44px,7vw,76px)/.95 Bricolage,sans-serif;letter-spacing:-.025em;margin:22px 0 6px}
.arroba{margin:0;color:var(--suave);font-size:15px}
.bio{max-width:44ch;font-size:18px;margin:18px 0 26px}
.nums{display:flex;gap:34px;margin:0}
.nums div{display:flex;flex-direction:column-reverse}
.nums dd{margin:0;font-size:30px;line-height:1}
.nums dt{color:var(--suave);font-size:13px;margin-top:6px}

.palco{--col:128px;--gap:14px;height:620px;perspective:1600px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.lado{min-width:0}
.nota-palco{position:relative;margin:6px auto 0;font-size:13px;color:var(--suave);max-width:34ch;text-align:center}
.plano{position:relative;width:calc(var(--col) * 3 + var(--gap) * 2);height:calc((var(--col) * 16 / 9 + var(--gap)) * 3);transform-style:preserve-3d;
  transform:rotateX(54deg) rotateZ(-34deg) translateY(-30px);
  animation:deitar 1.4s cubic-bezier(.2,.7,.1,1) both}
@keyframes deitar{from{transform:rotateX(0) rotateZ(0) scale(.82);opacity:0}to{opacity:1}}
/* a distância e a duração do rolar saem do feed.css (dependem de quantos vídeos tem) */
.esteira{display:grid;grid-template-columns:repeat(3,var(--col));gap:var(--gap);transform-style:preserve-3d;
  animation:rolar 38s linear infinite}
.tile{position:relative;display:block;aspect-ratio:9/16;border-radius:10px;transform-style:preserve-3d;
  transform:translateZ(calc(8px + var(--z,0) * var(--alt,110px)));transition:transform .45s cubic-bezier(.2,.7,.1,1)}
.tile picture{display:contents}
.tile img{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),-18px 26px 30px rgba(var(--sombra),.35)}
.tile:hover,.tile:focus-visible{transform:translateZ(calc(40px + var(--z,0) * var(--alt,110px)))}
.tile::before{content:"";position:absolute;inset:0;border-radius:10px;background:rgba(var(--sombra),.45);
  transform:translateZ(calc(-8px - var(--z,0) * var(--alt,110px)));filter:blur(6px)}
.leito{position:absolute;inset:-60px -26px;border-radius:18px;border:1px solid var(--linha);
  background:repeating-linear-gradient(0deg,transparent 0 23px,var(--linha) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--linha) 23px 24px);opacity:.55}
.varredura{position:absolute;inset:-26px;border-radius:18px;transform:translateZ(1px);pointer-events:none;
  background:linear-gradient(90deg,transparent 42%,rgba(217,119,87,.38) 50%,transparent 58%) no-repeat;background-size:300% 100%;
  background-position:100% 0;opacity:0;animation:varrer 1.6s 1.2s ease-in-out both}
@keyframes varrer{0%{opacity:0;background-position:100% 0}15%,85%{opacity:1}100%{opacity:0;background-position:0 0}}
.selo{position:absolute;left:8px;bottom:8px;font-size:11px;padding:2px 6px;border-radius:5px;
  background:rgba(20,20,19,.78);color:#f3f1ea}

/* ranking */
section h2{font:800 clamp(28px,4vw,40px)/1.05 Bricolage,sans-serif;letter-spacing:-.02em;margin:0 0 8px;max-width:22ch}
.ranking{padding:64px 0 24px}
.cab p{color:var(--suave);margin:0 0 6px;max-width:60ch}
.legenda{display:flex;gap:16px;align-items:center;font-size:13px;margin-top:14px!important}
.legenda i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:-10px}
.ranking ol,.arquivo ol{list-style:none;margin:22px 0 0;padding:0}
.linha{position:relative;display:grid;grid-template-columns:28px 36px minmax(0,1fr) auto minmax(150px,240px);gap:14px;align-items:center;
  padding:14px 4px;border-top:1px solid var(--linha)}
.linha:hover{background:var(--plano)}
.alvo::after{content:"";position:absolute;inset:0}
.linha .sub a{position:relative;z-index:1;text-decoration:underline;text-decoration-color:var(--linha);text-underline-offset:3px}
.linha .sub a:hover{color:var(--argila);text-decoration-color:currentColor}
.pos{color:var(--suave);text-align:right;font-size:14px}
.av{display:block;width:36px;height:36px;border-radius:8px;background:var(--plano)}
.nome{display:flex;flex-direction:column;min-width:0}
.nome b{font-weight:650;overflow-wrap:anywhere}
.linha:hover .nome b{color:var(--argila)}
.sub{color:var(--suave);font-size:13px}
.raio{display:flex;gap:4px}
.raio i,.legenda i{font-style:normal;font:12px/1 Mono,monospace;min-width:26px;text-align:center;padding:5px 0;border-radius:6px}
.raio .ok,.legenda .ok{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.raio .at,.legenda .at{background:color-mix(in srgb,var(--at) 20%,transparent);color:var(--at)}
.raio .nao,.legenda .nao{background:color-mix(in srgb,var(--nao) 20%,transparent);color:var(--nao)}
.legenda i{min-width:9px;padding:0;background:currentColor!important}
.cresc{display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:center}
.barra{height:6px;border-radius:3px;background:var(--linha);position:relative;overflow:hidden}
.barra::after{content:"";position:absolute;inset:0;width:calc(var(--p,0) * 100%);background:var(--argila);border-radius:3px}
.cresc b{font-size:15px;color:var(--argila);text-align:right}
.cresc .sub{grid-column:1/-1;text-align:right}

/* arquivo no estilo lista */
.arquivo{padding:48px 0 40px}
.arquivo li a{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1fr);gap:14px;padding:12px 4px;border-top:1px solid var(--linha)}
.arquivo li a:hover .t{color:var(--argila)}
.arquivo .n{font-family:Mono,monospace;color:var(--suave)}
.arquivo .rp{color:var(--suave);font-size:14px;overflow-wrap:anywhere}

.pe{max-width:1120px;margin:0 auto;padding:28px 20px 48px;border-top:1px solid var(--linha);color:var(--suave);font-size:13px}
.pe p{margin:4px 0;max-width:80ch}
.pe .volta{margin-bottom:14px;font-size:15px}
.pe .volta a{color:var(--texto);text-decoration:underline;text-decoration-color:var(--argila);text-underline-offset:4px}

/* página de cada raio-x */
.doc{max-width:780px;padding-top:24px;padding-bottom:56px}
.doc-cab{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:36px;align-items:start}
.doc-num{margin:8px 0 0;font:15px Mono,monospace;color:var(--argila)}
.doc h1{font-size:clamp(34px,5.4vw,54px);line-height:1;letter-spacing:-.02em;margin:12px 0 14px}
.doc-meta{margin:0;color:var(--suave);font-size:15px}
.botoes{margin:24px 0 0}
.botao{display:inline-block;padding:11px 18px;border-radius:999px;background:var(--argila);color:var(--sobre-argila);font-weight:600;font-size:15px}
.botao:hover{filter:brightness(1.08)}
.capa-doc picture{display:block}
.capa-doc img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 0 0 1px var(--linha),0 18px 40px rgba(var(--sombra),.3)}
.doc article{margin-top:20px}
.doc h2{display:flex;gap:10px;align-items:center;font:800 25px/1.15 Bricolage,sans-serif;letter-spacing:-.01em;
  margin:40px 0 12px;padding-top:24px;border-top:1px solid var(--linha);max-width:none}
.doc h2.ok::before,.doc h2.at::before,.doc h2.nao::before{content:"";flex:none;width:10px;height:10px;border-radius:3px;background:var(--cor)}
.doc h2.ok{--cor:var(--ok)}.doc h2.at{--cor:var(--at)}.doc h2.nao{--cor:var(--nao)}
.doc .ordem{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;
  font:15px Mono,monospace;color:var(--argila);background:color-mix(in srgb,var(--argila) 14%,transparent)}
.doc ul{padding-left:20px;margin:10px 0}
.doc li{margin:8px 0}
.doc li::marker{color:var(--suave)}
.doc li b{font-weight:650}
.doc li b.ok{color:var(--ok)}.doc li b.at{color:var(--at)}.doc li b.nao{color:var(--nao)}
.repo{display:flex;gap:12px;align-items:center;margin:16px 0;padding:12px 14px;border:1px solid var(--linha);border-radius:12px;background:var(--plano)}
.repo .av{width:40px;height:40px;flex:none}
.repo .dados{display:flex;flex-direction:column;min-width:0}
.repo a{font:15px Mono,monospace;overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:var(--linha);text-underline-offset:4px}
.repo a:hover{color:var(--argila);text-decoration-color:currentColor}
.repo .extra,.repo .estrelas{color:var(--suave);font-size:13px}
.site-repo{margin:-6px 0 16px;color:var(--suave);font-size:14px}
.site-repo a{color:var(--texto);text-decoration:underline;text-decoration-color:var(--linha);text-underline-offset:3px}
.comecar{margin:32px 0 0;padding:14px 16px;border-left:3px solid var(--argila);background:var(--plano);border-radius:0 12px 12px 0}
.aviso{margin-top:44px;padding:16px 18px;border-radius:14px;font-size:15px;color:var(--suave);
  background:color-mix(in srgb,var(--argila) 9%,transparent);border:1px solid color-mix(in srgb,var(--argila) 30%,transparent)}
.aviso p{margin:6px 0}
.aviso b{color:var(--texto)}

@media (max-width:520px){.tema,.seguir{padding:8px 12px;font-size:13px}.marca{font-size:18px}.longo{display:none}}
@media (max-width:520px){.linha{grid-template-columns:22px 32px minmax(0,1fr)}.raio{grid-column:3}.nome b{overflow-wrap:break-word}}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;min-height:0}
  .perfil{padding:20px 0 0}
  .palco{height:440px;margin-top:0;overflow:hidden}
  .nota-palco{margin-top:4px}
  .palco{--col:58px;--gap:8px}
  .plano{transform:rotateX(54deg) rotateZ(-34deg) translate(6px,6px)}
  .leito,.varredura{inset:-14px}
  .plano{--alt:70px}
  .linha{grid-template-columns:22px 32px minmax(0,1fr) auto;row-gap:8px}
  .linha .av{width:32px;height:32px}
  .cresc{grid-column:3/-1}
  .cresc .sub{text-align:left}
  .arquivo li a{grid-template-columns:48px 1fr}
  .arquivo .rp{grid-column:2}
}
@media (max-width:620px){
  .doc-cab{grid-template-columns:minmax(0,1fr) 96px;gap:16px}
  .doc h1{font-size:clamp(30px,8.4vw,40px)}
  .doc h2{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.plano,.varredura{animation:none}.tile{transition:none}}

/* reações subindo por cima do feed */
.reacoes{position:absolute;inset:0;pointer-events:none}
.r{position:absolute;left:var(--x);bottom:-40px;opacity:0;animation:subir var(--dur) var(--d) ease-out infinite}
@keyframes subir{0%{opacity:0;transform:translate(0,0) scale(.6)}12%{opacity:1;transform:translate(0,-60px) scale(1)}
  80%{opacity:.9}100%{opacity:0;transform:translate(var(--deriva),-520px) scale(.95)}}
.cor{width:26px;height:26px;background:var(--argila);
  -webkit-mask:url(coracao.svg) center/contain no-repeat;mask:url(coracao.svg) center/contain no-repeat}
.com{font:600 13px/1 system-ui,sans-serif;color:#191817;background:#f3f1ea;padding:8px 12px;border-radius:16px 16px 16px 4px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);white-space:nowrap}
.reel{width:30px;height:30px;border-radius:9px;border:2px solid var(--texto);opacity:0;
  background:linear-gradient(var(--texto),var(--texto)) 50% 30%/100% 2px no-repeat}
.reel::after{content:"";position:absolute;left:11px;top:12px;border-left:9px solid var(--texto);border-top:5.5px solid transparent;border-bottom:5.5px solid transparent}
.parado .esteira,.parado .r{animation-play-state:paused}
@media (max-width:860px){.cor{width:20px;height:20px}.com{font-size:12px;padding:6px 10px}@keyframes subir{0%{opacity:0;transform:translate(0,0) scale(.6)}12%{opacity:1;transform:translate(0,-40px) scale(1)}80%{opacity:.9}100%{opacity:0;transform:translate(var(--deriva),-360px) scale(.95)}}}
@media (prefers-reduced-motion:reduce){.esteira,.r{animation:none}.r{display:none}}