@font-face{font-family:Figtree;src:url("/fonts/Figtree-Medium.ttf") format("truetype");font-weight:400 500;font-display:swap}
@font-face{font-family:Figtree;src:url("/fonts/Figtree-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:Figtree;src:url("/fonts/Figtree-ExtraBold.ttf") format("truetype");font-weight:800 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/JetBrainsMono-Avedra.ttf") format("truetype");font-weight:400 700;font-display:swap}

:root{
  --void:#040405; --ink:#0B0B0A; --carbon:#151513; --bone:#F4F0E8; --stone:#A8A39A; --graphite:#5F5B55;
  --ambar:#E8A33D; --sinal:#8CC8F2; --vidro:rgba(18,18,16,.62); --fio:rgba(244,240,232,.14);
  --display:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--void);color:var(--bone);font:15px/1.5 var(--display);overflow:hidden;-webkit-font-smoothing:antialiased}
#cena{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#cena.arrastando{cursor:grabbing}
.hud{position:fixed;inset:0;pointer-events:none;padding:clamp(16px,2.4vw,32px)}
.hud>*{pointer-events:auto}
.mono{font-family:var(--mono)}
.rot{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
/* cantos */
.canto{position:fixed;width:22px;height:22px;border-color:rgba(244,240,232,.35);border-style:solid;pointer-events:none}
.canto.a{top:12px;left:12px;border-width:1px 0 0 1px}.canto.b{top:12px;right:12px;border-width:1px 1px 0 0}
.canto.c{bottom:12px;left:12px;border-width:0 0 1px 1px}.canto.d{bottom:12px;right:12px;border-width:0 1px 1px 0}
/* topo */
.topo{position:absolute;top:clamp(16px,2.4vw,32px);left:clamp(16px,2.4vw,32px);right:clamp(16px,2.4vw,32px);display:flex;justify-content:space-between;align-items:flex-start;gap:24px;pointer-events:none}
.marca{display:grid;gap:10px;pointer-events:auto}
.marca svg{width:clamp(120px,11vw,170px);height:auto;display:block}
.marca h1{margin:0;font-weight:900;font-size:clamp(22px,2.3vw,34px);line-height:1;letter-spacing:-.01em;text-transform:uppercase}
.marca h1 span{color:var(--ambar)}
.contadores{display:flex;gap:clamp(14px,2vw,30px);pointer-events:auto;flex-wrap:wrap;justify-content:flex-end}
.contador{display:grid;gap:2px;text-align:right}
.contador b{font-family:var(--display);font-weight:800;font-size:clamp(20px,2vw,30px);line-height:1;font-variant-numeric:tabular-nums}
.contador.amb b{color:var(--ambar)}
/* camadas */
.camadas{position:absolute;left:clamp(16px,2.4vw,32px);top:clamp(150px,22vh,210px);display:grid;gap:6px}
.camadas button{all:unset;cursor:pointer;display:grid;grid-template-columns:28px 1fr;align-items:center;gap:10px;padding:8px 14px 8px 0;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);border-left:1px solid var(--fio)}
.camadas button i{font-style:normal;color:var(--graphite);font-size:11px;padding-left:10px}
.camadas button:hover,.camadas button:focus-visible{color:var(--bone)}
.camadas button[aria-pressed="true"]{color:var(--bone);border-left:2px solid var(--ambar)}
.camadas button[aria-pressed="true"] i{color:var(--ambar)}
.camada-info[hidden]{display:none}
.camada-info{position:absolute;left:clamp(16px,2.4vw,32px);top:calc(clamp(150px,22vh,210px) + 206px);bottom:clamp(56px,8vh,76px);align-self:start;height:max-content;max-height:calc(100vh - clamp(150px,22vh,210px) - 206px - clamp(56px,8vh,76px));overflow:auto;width:min(330px,34vw);display:grid;gap:8px;padding:14px 16px;background:var(--vidro);border:1px solid var(--fio);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.camada-info h2{margin:0;font-size:17px;font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.camada-info p{margin:0;color:var(--stone);font-size:13.5px}
.camada-info ul{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.camada-info li{font-family:var(--mono);font-size:12px;color:var(--bone);display:grid;grid-template-columns:12px 1fr;gap:6px}
.camada-info li::before{content:"›";color:var(--ambar)}
/* painel do agent */
.painel{position:absolute;right:clamp(16px,2.4vw,32px);top:clamp(120px,15vh,160px);bottom:clamp(64px,9vh,90px);width:min(400px,36vw);display:grid;grid-template-rows:auto 1fr;background:var(--vidro);border:1px solid var(--fio);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden}
.painel[hidden]{display:none}
.painel header{display:grid;gap:8px;padding:18px 18px 14px;border-bottom:1px solid var(--fio);position:relative}
.painel .fechar{all:unset;cursor:pointer;position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:12px;color:var(--stone);padding:4px 8px;border:1px solid var(--fio)}
.painel .fechar:hover,.painel .fechar:focus-visible{color:var(--bone);border-color:var(--stone)}
.painel h2{margin:0;font-family:var(--mono);font-weight:700;font-size:15px;word-break:break-all;padding-right:64px}
.linha-estado{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.estado{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border:1px solid var(--bone)}
.estado.guardado{border-color:var(--graphite);color:var(--stone)}
.corpo{overflow:auto;padding:16px 18px 20px;display:grid;gap:16px;align-content:start}
.bloco{display:grid;gap:6px}
.bloco p{margin:0;font-size:15px;line-height:1.45}
.trava{border-left:2px solid var(--ambar);padding-left:12px}
.trava p{color:var(--bone)}
.tele{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--fio);border:1px solid var(--fio)}
.tele div{background:rgba(11,11,10,.8);padding:10px;display:grid;gap:2px}
.tele b{font-family:var(--display);font-weight:800;font-size:22px;line-height:1;font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span,.chips button{font-family:var(--mono);font-size:11px;padding:3px 7px;border:1px solid var(--fio);color:var(--stone);background:none}
.chips button{cursor:pointer}
.chips button:hover,.chips button:focus-visible{color:var(--bone);border-color:var(--stone);outline:none}
.arquivo{font-family:var(--mono);font-size:12px;color:var(--sinal);word-break:break-all}
/* rodapé */
.rodape{position:absolute;left:clamp(16px,2.4vw,32px);right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,28px);display:flex;justify-content:space-between;align-items:flex-end;gap:20px;pointer-events:none}
.log{display:flex;gap:12px;align-items:baseline;font-family:var(--mono);font-size:12px;color:var(--stone);min-width:0}
.log b{color:var(--ambar);font-weight:500}
.log span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camera{font-family:var(--mono);font-size:11px;color:var(--graphite);white-space:nowrap;text-align:right;display:grid;gap:4px}
.alvo{color:var(--ambar);min-height:1em}
/* CTA de gravação */
.cta{position:absolute;left:50%;bottom:14%;transform:translateX(-50%);text-align:center;display:grid;gap:4px;pointer-events:none}
.cta[hidden]{display:none}
.cta small{font-family:var(--mono);font-size:clamp(12px,1.4vw,16px);letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
.cta strong{font-family:var(--display);font-weight:900;font-size:clamp(56px,9vw,120px);line-height:.9;color:var(--ambar);letter-spacing:-.02em}
.limpo .hud,.limpo .canto{display:none}
.cursor{position:fixed;left:70%;top:66%;z-index:50;pointer-events:none;transform:translate(-5px,-3px);filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.clique{position:fixed;z-index:49;width:44px;height:44px;margin:-22px 0 0 -22px;border:2px solid rgba(232,163,61,.95);border-radius:50%;pointer-events:none;animation:clique .6s ease-out forwards}
@keyframes clique{from{transform:scale(.3);opacity:1}to{transform:scale(1.4);opacity:0}}
/* retrato (celular e gravação 9:16) */
@media (max-aspect-ratio:4/5){
  .contadores{display:none}
  .camadas{top:auto;bottom:clamp(64px,9vh,90px);transform:none;display:flex;flex-wrap:wrap;gap:4px;right:clamp(16px,2.4vw,32px)}
  .camadas button{grid-template-columns:auto;padding:6px 10px;border:1px solid var(--fio);font-size:11px}
  .camadas button i{display:none}
  .camadas button[aria-pressed="true"]{border:1px solid var(--ambar)}
  .camada-info{top:auto;bottom:calc(clamp(64px,9vh,90px) + 84px);width:auto;right:clamp(16px,2.4vw,32px);max-height:30vh}
  .camada-info li:nth-child(n+4){display:none}
  .painel{top:auto;left:clamp(10px,2vw,20px);right:clamp(10px,2vw,20px);bottom:clamp(10px,2vw,20px);width:auto;max-height:46vh}
  .painel .tele,.painel .bloco:nth-last-child(-n+2){display:none}
  .camera{display:none}
  .cta{bottom:30%}
}
@media (prefers-reduced-motion:reduce){ .painel,.camada-info{transition:none} }