/* Página: Design de Personagens (usa as bases camera.css + cores.css) */
.chars-hero::after{background:linear-gradient(90deg,color-mix(in oklch,var(--ink-950) 88%,transparent),transparent 62%),linear-gradient(transparent 60%,var(--bg-base))}
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-5);margin-bottom:var(--space-6)}
.shape-lab,.arc-lab,.prop-lab,.role-lab{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--space-5);align-items:start}
.role-lab{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
.shape-lab .stage canvas,.arc-lab .stage canvas,.prop-lab .stage canvas,.role-lab .stage canvas{width:100%;height:auto}
.bars{display:flex;flex-direction:column;gap:10px;margin-top:var(--space-2)}
.bar{display:grid;grid-template-columns:130px 1fr 44px;gap:10px;align-items:center;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:var(--ls-wide)}
.bar i{display:block;height:10px;border-radius:5px;background:var(--surface-3);overflow:hidden}.bar i b{display:block;height:100%;border-radius:5px;transition:width .2s}
.bar output{text-align:right;color:var(--blue-300)}
.srow.wide{max-width:640px;width:100%}
.sec{margin-top:var(--space-8)}.sec0{margin:0 0 var(--space-3)}
.good-bad{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-5);border:1px solid var(--border-default);border-radius:var(--radius-xl);background:var(--surface-1)}
.good-bad div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.good-bad b{font-family:var(--font-display);text-transform:uppercase;font-size:var(--text-sm);min-width:150px}
.good-bad span{width:46px;height:46px;border-radius:50%;border:2px solid rgba(255,255,255,.2)}
.two.sec{align-items:center}
.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.two-cols>div{padding:var(--space-5);border-radius:var(--radius-lg);border:1px solid var(--border-subtle);background:var(--surface-1);transition:border-color .3s,background .3s,opacity .3s}
.two-cols>div.on{border-color:var(--border-accent);background:var(--accent-soft)}.two-cols>div:not(.on){opacity:.6}
.two-cols h4{margin:0 0 8px;font-family:var(--font-display);text-transform:uppercase;font-size:var(--text-md)}
.two-cols ul{margin:0;padding-left:1.1em;color:var(--text-secondary);font-size:var(--text-sm);line-height:1.7}
.stage.clickable canvas{cursor:pointer}
@media (max-width:900px){.shape-lab,.arc-lab,.prop-lab,.role-lab{grid-template-columns:minmax(0,1fr)}.bar{grid-template-columns:96px 1fr 40px}.two-cols{grid-template-columns:1fr}}