/* Synthetic Lab: laboratório em pixel art. Papel quente, azul cobalto, borda dura. */
:root {
  --fundo: #f6efcf; --sup: #fffaf0; --sup2: #ede0a0; --tinta: #1b1a2e; --tinta2: #3b3a52; --fraco: #6d6a80;
  --linha: #1b1a2e; --cor: #2447d8; --cor-t: #fffaf0; --cor2: #ffb703;
  --esc: #1b1a2e; --esc-t: #f6efcf; --esc-f: rgba(246, 239, 207, .72);
  --raio: 0px; --raio-p: 0px; --sombra: 6px 6px 0 #1b1a2e;
  --f-pix: 'Silkscreen', 'JetBrains Mono', monospace;
  --tit-peso: 800; --tit-esp: -.035em;
  --rosa: #e2543b; --verde: #2a9d5c; --lilas: #8e6bd6;
}
body { background-image: linear-gradient(rgba(27, 26, 46, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 26, 46, .045) 1px, transparent 1px); background-size: 24px 24px; }
.sobre, .tag, .et b, .idiomas a, .ps .n { font-family: var(--f-pix); letter-spacing: .04em; }
.sobre { font-size: .74rem; }
.prod { font-family: var(--f-pix); font-weight: 700; font-size: .8rem; text-transform: uppercase; }
.btn { border: 2px solid var(--tinta); box-shadow: 4px 4px 0 var(--tinta); font-family: var(--f-pix); font-size: .78rem; text-transform: uppercase; }
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--tinta); }
.topo { border-bottom: 2px solid var(--tinta); }
.idiomas { border: 2px solid var(--tinta); }
.palco { aspect-ratio: 4 / 3; border: 3px solid var(--tinta); box-shadow: 10px 10px 0 var(--tinta); background: #12122b; }
.tcs, .pv, .cx { border: 2px solid var(--tinta); box-shadow: var(--sombra); }
.tc { border-right-width: 2px; }
.tag { border-width: 2px; border-radius: 0; }
.rl, .rl:last-child, .fqs, .fq { border-color: var(--tinta); border-width: 2px; }
blockquote { border-left-width: 6px; }
.ps { border: 2px solid rgba(246, 239, 207, .5); }
.pv b { font-family: var(--f-pix); font-weight: 700; letter-spacing: 0; font-size: clamp(1.7rem, 3vw, 2.5rem); }
h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.14; }
h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.12; }
.heroi { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
h1 em { background: linear-gradient(transparent 62%, var(--cor2) 62%); color: var(--tinta); }

/* Palco em modo noturno de laboratório */
.pc { color: #e8e6ff; }
.pc-abas { background: #0b0b1f; border-bottom: 2px solid #2b2b55; }
.pc-aba { color: #8c8ab8; border-radius: 0; }
.pc-aba b { font-family: var(--f-pix); text-transform: uppercase; font-size: .54rem; white-space: normal; line-height: 1.2; }
.pc-aba small { white-space: normal; line-height: 1.2; font-size: .54rem; }
.pc-aba { align-items: center; padding: 6px 8px; }
.pc-aba small { font-family: var(--f-mono); text-transform: none; }
.pc-aba[aria-selected="true"] { background: var(--cor2); color: #12122b; }
.pc-prog { background: var(--cor2); height: 3px; }
.cena { padding: 12px; font-family: var(--f-mono); }
.px-t { font: 700 .62rem var(--f-pix); letter-spacing: .06em; color: #8c8ab8; text-transform: uppercase; }
.px-cx { border: 2px solid #2b2b55; background: #0b0b1f; }

/* Cena 0: entrevista individual com a persona */
.um { display: grid; grid-template-columns: 36% 1fr; gap: 10px; height: 100%; }
.ficha { padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden; }
.ficha-t { display: flex; gap: 10px; align-items: center; }
.ficha-t canvas { width: 64px; height: 72px; image-rendering: pixelated; image-rendering: crisp-edges; border: 2px solid #e8e6ff; flex: none; }
.ficha-t b { display: block; font: 700 .9rem var(--f-pix); color: var(--cor2); }
.on-l { font-size: .52rem; color: #4fe3c1; }
.ficha-l { list-style: none; padding: 0; display: grid; gap: 4px; font-size: .6rem; }
.ficha-l li::before { content: "› "; color: var(--cor2); }
.traco { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: .56rem; align-items: baseline; }
.traco b { font: 700 .52rem var(--f-pix); color: #e8e6ff; }
.traco div { grid-column: 1 / -1; height: 6px; background: #24244a; }
.traco div i { display: block; height: 100%; width: 0; background: #ff5fa2; transition: width .6s steps(8); }
.ficha-b { margin-top: auto; border-top: 2px solid #2b2b55; padding-top: 7px; font: 700 .5rem var(--f-pix); color: #4fe3c1; }
.papo { display: flex; flex-direction: column; padding: 10px; min-height: 0; }
.papo-l { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.bo { max-width: 84%; padding: 7px 9px; border: 2px solid #2b2b55; opacity: 0; transform: translateY(8px); transition: opacity .25s steps(3), transform .25s steps(3); }
.bo.on { opacity: 1; transform: none; }
.bo small { display: block; font: 700 .46rem var(--f-pix); color: #8c8ab8; margin-bottom: 3px; text-transform: uppercase; }
.bo p { font-size: .66rem; line-height: 1.4; min-height: 1.4em; }
.bo.eu { align-self: flex-end; background: var(--cor); border-color: #5b78ff; }
.bo.eu small { color: #c9d4ff; }
.bo.ela { background: #12122b; border-color: var(--cor2); }
.bo.ela small { color: var(--cor2); }
.bo em { display: block; margin-top: 6px; padding-top: 5px; border-top: 1px dashed #2b2b55; font: 400 .5rem var(--f-mono); font-style: normal; color: #4fe3c1; }

/* Cena 1: Sala do Espelho */
.sala { display: grid; grid-template-columns: 27% 1fr 23%; gap: 10px; height: 100%; }
.chat { display: flex; flex-direction: column; min-height: 0; padding: 8px; }
.chat-l { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.fala { font-size: .62rem; line-height: 1.35; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.fala.on { opacity: 1; transform: none; }
.fala b { color: #4fe3c1; font-weight: 700; }
.fala.mod b { color: var(--cor2); }
.chat-i { margin-top: 8px; border: 2px solid #2b2b55; padding: 6px; font-size: .58rem; color: #6e6c99; }
.mesa { position: relative; display: flex; flex-direction: column; min-height: 0; }
.mesa-h { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-bottom: 2px solid #2b2b55; }
.mesa-h .viva { color: #4fe3c1; animation: pisca 1.2s steps(2) infinite; }
.mesa canvas { flex: 1; width: 100%; min-height: 0; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.lado { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.estim { padding: 8px; }
.estim-c { margin-top: 6px; height: 46px; background: repeating-linear-gradient(45deg, #2447d8 0 6px, #3b5cf0 6px 12px); border: 2px solid #e8e6ff; display: grid; place-items: center; font: 700 .6rem var(--f-pix); }
.med { flex: 1; padding: 8px; display: flex; flex-direction: column; min-height: 0; }
.med svg { flex: 1; width: 100%; min-height: 0; }
.leg { display: flex; gap: 8px; font-size: .52rem; flex-wrap: wrap; }
.leg i { display: inline-block; width: 7px; height: 7px; margin-right: 3px; }

/* Cena 2: coleta, com target e cota por estrato */
.col { display: grid; grid-template-columns: 1fr 40%; gap: 10px; height: 100%; }
.grade-cx { padding: 10px; display: flex; flex-direction: column; min-height: 0; }
.kps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
.kps div { border: 2px solid #2b2b55; padding: 6px 7px; }
.kps b { display: block; font: 700 .95rem var(--f-pix); color: var(--cor2); }
.kps span { font-size: .5rem; color: #8c8ab8; line-height: 1.2; display: block; }
.hud { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.xp { height: 10px; border: 2px solid #e8e6ff; margin-top: 4px; background: #12122b; }
.xp i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--cor2) 0 6px, #ffd24d 6px 8px); transition: width .25s steps(4); }
.cmb { text-align: right; }
.cmb b { display: block; font: 700 1rem var(--f-pix); color: #ff5fa2; }
.salaq { position: relative; flex: 1; min-height: 0; border: 2px solid #2b2b55; display: flex; }
.salaq canvas { width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.toast { position: absolute; left: 50%; top: 8px; transform: translate(-50%, -14px); background: var(--cor2); color: #12122b; font: 700 .52rem var(--f-pix); padding: 5px 8px; border: 2px solid #12122b; white-space: nowrap; opacity: 0; transition: opacity .2s steps(2), transform .2s steps(3); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.qv { margin-top: 8px; display: grid; gap: 4px; }
.op { display: grid; grid-template-columns: 52px 1fr 30px; gap: 6px; align-items: center; font-size: .56rem; }
.op div { height: 7px; background: #24244a; }
.op div i { display: block; height: 100%; width: 0; background: #7c8cff; transition: width .3s steps(5); }
.op:nth-child(3) div i { background: #4fe3c1; }
.op b { font: 700 .5rem var(--f-pix); text-align: right; color: #e8e6ff; }
.ag { aspect-ratio: 1; background: #24244a; transition: background .25s steps(2); }
.ag.ok { background: #4fe3c1; }
.ag.ok.b { background: var(--cor2); }
.ag.ok.c { background: #ff5fa2; }
.ag.ok.d { background: #7c8cff; }
.estr { padding: 10px; display: flex; flex-direction: column; gap: 5px; min-height: 0; overflow: hidden; }
.er-g { font: 700 .5rem var(--f-pix); color: var(--cor2); margin-top: 5px; letter-spacing: .05em; text-transform: uppercase; }
.er { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: .58rem; align-items: baseline; }
.er-v { font: 700 .52rem var(--f-pix); color: #8c8ab8; }
.er.cheia .er-v { color: #4fe3c1; }
.er div { grid-column: 1 / -1; height: 6px; background: #24244a; }
.er div i { display: block; height: 100%; width: 0; background: #7c8cff; transition: width .3s steps(6); }
.er.cheia div i { background: #4fe3c1; }

/* Cena 3: veredito, dashboard e resultados */
.ver { display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: auto minmax(0, 1.35fr) minmax(0, .85fr) auto; gap: 8px; height: 100%; }
.gong { grid-column: 1 / 2; border: 3px solid var(--cor2); padding: 8px 10px; box-shadow: 0 0 0 2px #12122b; }
.gong b { display: block; font: 700 .95rem var(--f-pix); color: var(--cor2); }
.gong span { font: 700 .62rem var(--f-pix); color: #4fe3c1; opacity: 0; transition: opacity .4s; display: block; }
.gong span.on { opacity: 1; }
.gong small { display: block; margin-top: 3px; font-size: .5rem; color: #8c8ab8; }
.vars { grid-column: 2 / 4; display: flex; gap: 6px; }
.var { flex: 1; text-align: center; padding: 8px 4px; font-size: .56rem; transition: border-color .3s, background .3s; }
.var b { display: block; font: 700 1.05rem var(--f-pix); margin-bottom: 2px; }
.var.w { border-color: #4fe3c1; background: rgba(79, 227, 193, .12); }
.var small { display: block; color: #4fe3c1; font: 700 .46rem var(--f-pix); min-height: 1em; }
.kpi { grid-column: 1 / 3; padding: 8px 10px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.kt { display: grid; grid-template-columns: 1fr repeat(3, 46px); gap: 4px 6px; margin-top: 6px; align-items: center; }
.kt b { font: 700 .54rem var(--f-pix); text-align: center; color: #8c8ab8; }
.kn { font-size: .58rem; }
.kv { font: 700 .62rem var(--f-pix); font-style: normal; text-align: center; padding: 3px 0; border: 2px solid #2b2b55; color: #e8e6ff; opacity: 0; transition: opacity .25s, border-color .25s, color .25s; }
.kv.on { opacity: 1; }
.kv.w { border-color: #4fe3c1; color: #4fe3c1; }
.kv.w::after { content: " ▲"; font-size: .4rem; }
.leg-s { margin-top: auto; padding-top: 5px; font-size: .48rem; color: #4fe3c1; }
.heat { grid-column: 3 / 4; padding: 8px; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.hg { flex: 1; display: grid; grid-template-columns: auto repeat(3, 1fr); gap: 3px; margin-top: 6px; font-size: .5rem; align-items: stretch; min-height: 0; }
.hg span { align-self: center; }
.hc { min-height: 12px; background: #24244a; transition: background .3s steps(3); display: grid; place-items: center; font: 700 .46rem var(--f-pix); font-style: normal; color: #fffaf0; }
.ins { grid-column: 1 / 4; padding: 8px 10px; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-content: start; overflow: hidden; }
.ins .px-t { grid-column: 1 / -1; }
.in { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: .58rem; padding: 5px 0; border-bottom: 1px solid #2b2b55; opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .3s; }
.in.on { opacity: 1; transform: none; }
.in em { font: 700 .44rem var(--f-pix); font-style: normal; padding: 2px 5px; border: 1px solid currentColor; white-space: nowrap; }
.in em.p { color: #4fe3c1; }
.in em.a { color: var(--cor2); }
.chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.chip { font: 700 .48rem var(--f-pix); padding: 3px 6px; border: 2px solid #2b2b55; color: #6e6c99; transition: all .25s steps(2); }
.chip.on { border-color: #ff5fa2; color: #ffd1e6; }
.chip.on:nth-child(odd) { border-color: #4fe3c1; color: #d2fff4; }

@keyframes pisca { 50% { opacity: .25; } }
@media (max-width: 720px) {
  .pc-aba b { font-size: .44rem; }
  .pc-aba small { display: none; }
  .um { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
  .ficha { gap: 6px; padding: 8px; }
  .ficha-t canvas { width: 40px; height: 45px; }
  .ficha-l, .traco:nth-of-type(n+3) { display: none; }
  .ficha .traco { display: none; }
  .bo p { font-size: .7rem; }
  .sala { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px; }
  .sala .mesa { order: 1; }
  .sala .chat { order: 2; padding: 8px; }
  .sala .chat > .px-t, .sala .chat-i { display: none; }
  .sala .lado { display: none; }
  .fala { font-size: .68rem; }
  .col { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
  .kps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 6px 0 0; }
  .kps b { font-size: .72rem; }
  .kps span { font-size: .44rem; }
  .qv { display: none; }
  .col { grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr); }
  .cmb b { font-size: .8rem; }
  .toast { font-size: .44rem; }
  .estr { gap: 4px; padding: 8px; }
  .er { font-size: .62rem; }
  .palco { aspect-ratio: auto; }
  .ver { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1.7fr) minmax(0, 1fr); gap: 7px; }
  .chips { display: none; }
  .leg-s { display: none; }
  .gong, .vars, .kpi, .ins, .chips { grid-column: 1; }
  .heat { display: none; }
  .ins { grid-template-columns: 1fr; }
  .in:nth-child(n+5) { display: none; }
  .kt { gap: 5px 6px; }
  .kv.w::after { content: none; }
  .gong b { font-size: .8rem; }
  .kt { grid-template-columns: 1fr repeat(3, 40px); }
  .kn { font-size: .6rem; }
  .chip { font-size: .44rem; padding: 3px 5px; }
  .chip:nth-child(n+7) { display: none; }
}
}
@media (prefers-reduced-motion: reduce) { .mesa-h .viva { animation: none; } }

@media (max-width: 1080px) { .heroi { grid-template-columns: minmax(0, 1fr); } }