:root{color-scheme:dark;--bg: #07100f;--ink: #f7fbf7;--muted: #a8bcb6;--line: rgba(255, 255, 255, .14);--surface: rgba(10, 20, 20, .84);--surface-strong: rgba(15, 31, 30, .96);--green: #48d6a8;--blue: #45a5ff;--amber: #ffbf47;--coral: #ff6f61;--violet: #b78cff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:linear-gradient(90deg,rgba(72,214,168,.08) 1px,transparent 1px),linear-gradient(rgba(72,214,168,.07) 1px,transparent 1px),radial-gradient(circle at 20% 10%,rgba(69,165,255,.18),transparent 28%),radial-gradient(circle at 90% 82%,rgba(255,191,71,.14),transparent 26%),#07100f;background-size:28px 28px,28px 28px,auto,auto,auto;color:var(--ink)}*{box-sizing:border-box}html,body,#app{min-height:100%;margin:0}body{min-height:100vh;overflow:hidden}button{border:0;color:inherit;font:inherit}.audience-shell{min-height:100vh;padding:clamp(8px,1.4vw,16px)}.stage{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:10px;width:min(1360px,100%);height:calc(100vh - clamp(16px,2.8vw,32px));margin:0 auto}.topbar{display:grid;grid-template-columns:minmax(280px,.95fr) minmax(390px,1.15fr) minmax(178px,.4fr) minmax(140px,.32fr);gap:8px;align-items:stretch}.brand-stack,.trilogy-button,.look-control,.feed-status,.metrics-panel,.panel,.control-bar{border:1px solid var(--line);background:linear-gradient(180deg,#0c1c1bfa,#071212f5);box-shadow:0 18px 42px #0000004d;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.brand-stack{display:grid;align-content:center;min-height:64px;padding:9px 15px;border-left:5px solid var(--campaign-accent)}.brand-stack span,.camera-header span,.metric span,.panel-title span,.signal-row span,.privacy-strip span{color:var(--muted);font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.brand-stack strong{margin-top:2px;font-size:clamp(1.72rem,2.7vw,2.72rem);line-height:.95}.brand-stack small{margin-top:4px;color:var(--campaign-accent);font-size:.82rem}.trilogy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.trilogy-button,.control-bar button{min-height:64px;padding:10px 12px;cursor:pointer;text-align:left;transition:border-color .16s ease,transform .16s ease,background .16s ease}.trilogy-button span{display:block;font-weight:900}.trilogy-button.active,.control-bar button.active{border-color:color-mix(in srgb,var(--campaign-accent) 70%,white 10%);background:linear-gradient(135deg,color-mix(in srgb,var(--campaign-accent) 22%,transparent),transparent),var(--surface-strong)}.trilogy-button:hover,.control-bar button:hover{transform:translateY(-1px);border-color:#ffffff47}.look-control{display:grid;align-content:center;gap:5px;min-height:64px;padding:10px 12px}.look-control label,.feed-status span{color:var(--muted);font-size:.66rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.look-control select{width:100%;height:34px;padding:0 32px 0 10px;border:1px solid color-mix(in srgb,var(--campaign-accent) 42%,rgba(255,255,255,.18));border-radius:0;appearance:none;background:linear-gradient(45deg,transparent 50%,var(--campaign-accent) 50%) calc(100% - 16px) 13px / 7px 7px no-repeat,linear-gradient(135deg,var(--campaign-accent) 50%,transparent 50%) calc(100% - 11px) 13px / 7px 7px no-repeat,#040c0ce6;color:var(--ink);font:inherit;font-weight:900}.feed-status{display:grid;align-content:center;min-height:64px;padding:10px 12px}.feed-status strong{font-size:1.18rem;line-height:1}.feed-status small{margin-top:4px;color:var(--campaign-accent);font-size:.72rem;white-space:nowrap}.live-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.28fr);gap:10px;min-height:0}.feed-zone{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0}.camera-header{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:28px;padding:0 4px 5px}.camera-header strong{color:var(--campaign-accent);font-size:clamp(1rem,2vw,1.36rem)}.camera-frame{position:relative;min-height:0;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 32%),radial-gradient(circle at 50% 0%,rgba(72,214,168,.16),transparent 38%),linear-gradient(160deg,#101817,#111f25 52%,#151b16);isolation:isolate}.camera-frame:before,.camera-frame:after{content:"";position:absolute;inset:0;pointer-events:none}.camera-frame:before{background:linear-gradient(90deg,transparent 49.5%,rgba(255,255,255,.08) 50%,transparent 50.5%),linear-gradient(transparent 49.5%,rgba(255,255,255,.08) 50%,transparent 50.5%);background-size:100px 100px;opacity:.34}.camera-frame:after{border:10px solid rgba(0,0,0,.18);box-shadow:inset 0 0 80px #0000006b}.screen-beam{position:absolute;inset:8% 18% auto;height:86%;clip-path:polygon(34% 0,66% 0,100% 100%,0 100%);background:linear-gradient(180deg,color-mix(in srgb,var(--campaign-accent) 28%,transparent),transparent);opacity:.34;pointer-events:none}.mupi-unit{position:absolute;z-index:4;left:70%;top:50%;width:clamp(136px,15.5vw,208px);height:min(80%,560px);translate:-50% -49%;perspective:760px;pointer-events:auto;filter:drop-shadow(0 28px 34px rgba(0,0,0,.45)) drop-shadow(0 0 18px color-mix(in srgb,var(--campaign-accent) 12%,transparent))}.mupi-cabinet{position:absolute;inset:0 8% 10%;border:1px solid rgba(255,255,255,.16);background:linear-gradient(90deg,rgba(255,255,255,.13),transparent 10% 84%,rgba(0,0,0,.54)),linear-gradient(180deg,#151f22,#060b0d 58%,#293436);box-shadow:inset 10px 0 #ffffff0f,inset -14px 0 #00000057,0 0 0 8px #00000038;transform:rotateY(-7deg) rotateX(1deg);transform-origin:50% 62%}.mupi-cabinet:after{content:"";position:absolute;inset:4% 8% 16%;border:10px solid rgba(0,0,0,.82);box-shadow:inset 0 0 16px #ffffff14,0 0 18px #00000073}.mupi-screen{position:absolute;z-index:1;inset:7.5% 14% 21%;overflow:hidden;background:#000;box-shadow:inset 0 0 22px #000000c7}.mupi-screen iframe{position:absolute;z-index:2;inset:0;width:100%;height:100%;border:0;opacity:1;filter:none;pointer-events:none}.mupi-unit.paused .mupi-screen iframe{opacity:0}.mupi-hit-area{position:absolute;z-index:5;inset:0;padding:0;border:0;background:transparent;cursor:pointer}.mupi-controls{position:absolute;z-index:6;left:50%;top:50%;display:flex;gap:6px;translate:-50% -50%;opacity:0;pointer-events:none;transition:opacity .16s ease}.mupi-unit.controls-open .mupi-controls,.mupi-unit.paused .mupi-controls{opacity:1;pointer-events:auto}.mupi-controls button{min-width:58px;min-height:28px;padding:0 9px;border:1px solid rgba(255,255,255,.24);background:#030809b8;color:#fff;font-size:.58rem;font-weight:900;text-transform:uppercase;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer}.mupi-controls button[aria-pressed=true]{border-color:var(--campaign-accent);color:var(--campaign-accent)}.mupi-screen:after{content:"";position:absolute;z-index:3;inset:0;background:linear-gradient(105deg,transparent 0 40%,rgba(255,255,255,.28) 44%,transparent 48%),repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 4px);mix-blend-mode:screen;opacity:.4;pointer-events:none}.mupi-brand{position:absolute;left:18%;right:18%;bottom:7.8%;z-index:2;padding:4px 2px;color:#ffffffb8;font-size:.62rem;font-weight:900;text-align:center;text-transform:uppercase;background:#0000006b}.demography-card-inner{display:grid;grid-template-rows:16px 42px 25px minmax(0,1fr) 22px;gap:5px;width:100%;height:100%;min-width:0;overflow:hidden}.demography-card-inner>span{color:var(--muted);overflow:hidden;font-size:.66rem;font-weight:900;letter-spacing:.1em;line-height:16px;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.demography-card-inner>strong{color:#fff;overflow:hidden;font-size:clamp(1rem,1.25vw,1.28rem);line-height:25px;text-overflow:ellipsis;white-space:nowrap}.demography-avatar{display:grid;place-items:center;width:42px;aspect-ratio:1;margin:0 auto}.demography-panel dl{display:grid;grid-template-rows:repeat(4,22px);gap:0;min-width:0;overflow:hidden}.demography-panel dl div{display:grid;grid-template-columns:minmax(54px,.4fr) minmax(0,1fr);gap:10px;align-items:center;min-width:0;min-height:22px;padding-bottom:0}.demography-panel dt{overflow:hidden;font-size:.72rem;line-height:1;text-overflow:ellipsis;white-space:nowrap}.demography-panel dd{overflow:hidden;font-size:.78rem;line-height:1;min-width:0;text-align:right;text-overflow:ellipsis;white-space:nowrap}.segment-tags{display:flex;flex-wrap:wrap;gap:5px;align-content:start;min-width:0;overflow:hidden}.segment-tags i{max-width:100%;padding:3px 7px;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:var(--campaign-accent);font-size:.54rem;font-style:normal;font-weight:900;line-height:1;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.people-layer{position:absolute;z-index:3;inset:0;pointer-events:none}.person-dot{position:absolute;z-index:2;display:grid;place-items:center;aspect-ratio:1;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;pointer-events:auto;translate:-50% -50%;filter:drop-shadow(0 12px 22px rgba(0,0,0,.34));transition:left .7s ease,top .7s ease,width .7s ease,opacity .3s ease,scale .18s ease}.person-dot:hover,.person-dot.selected{scale:1.06}.person-dot.from-pixeria{z-index:3}.person-dot.selected .avatar,.person-dot.selected .asset-avatar{outline-color:var(--campaign-accent);box-shadow:0 0 0 7px color-mix(in srgb,var(--campaign-accent) 20%,transparent)}.person-dot>span:last-child{display:inline-grid;place-items:center;min-width:42px;margin-top:4px;padding:3px 7px;border:1px solid rgba(255,255,255,.11);border-radius:999px;background:#03080975;color:#fff;font-size:.58rem;font-weight:800;text-transform:uppercase;opacity:.86;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.person-dot.passing{opacity:.58}.person-dot.watching .avatar{outline-color:var(--blue)}.person-dot.watching .asset-avatar{filter:drop-shadow(0 14px 18px rgba(0,0,0,.42)) drop-shadow(0 0 12px rgba(69,165,255,.36))}.person-dot.engaged .avatar,.person-dot.engaged .asset-avatar{outline-color:var(--campaign-accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--campaign-accent) 18%,transparent)}.person-dot.engaged .asset-avatar{filter:drop-shadow(0 16px 20px rgba(0,0,0,.44)) drop-shadow(0 0 15px color-mix(in srgb,var(--campaign-accent) 42%,transparent))}.avatar{position:relative;display:inline-block;width:78%;aspect-ratio:1;overflow:hidden;border-radius:50%;outline:3px solid rgba(255,255,255,.16);background:radial-gradient(circle at 50% 32%,rgba(255,255,255,.24),transparent 18%),linear-gradient(180deg,hsl(var(--person-hue) 64% 67%),hsl(calc(var(--person-hue) + 28) 58% 45%))}.avatar.large{width:126px;height:126px;flex:0 0 auto}.avatar:before{content:"";position:absolute;left:50%;top:10%;width:52%;aspect-ratio:1;translate:-50% 0;border-radius:50%;background:#d9b18d}.avatar:after{content:"";position:absolute;left:50%;bottom:8%;width:70%;height:34%;translate:-50% 0;border-radius:999px 999px 20px 20px;background:color-mix(in srgb,hsl(var(--person-hue) 80% 56%) 78%,black)}.avatar .face{position:absolute;z-index:2;left:50%;top:24%;width:30%;height:10%;translate:-50% 0;background:radial-gradient(circle at 20% 50%,#15201d 0 12%,transparent 14%),radial-gradient(circle at 80% 50%,#15201d 0 12%,transparent 14%)}.asset-avatar{position:relative;display:inline-grid;place-items:center;width:96%;aspect-ratio:1;overflow:hidden;border-radius:50%;outline:2px solid color-mix(in srgb,var(--campaign-accent) 28%,rgba(255,255,255,.14));background:#050c0d70;filter:drop-shadow(0 14px 18px rgba(0,0,0,.42)) drop-shadow(0 0 10px color-mix(in srgb,var(--campaign-accent) 22%,transparent))}.asset-avatar.large{width:138px;height:138px;flex:0 0 auto}.asset-avatar img{width:118%;height:118%;object-fit:cover;object-position:center 36%;display:block;mix-blend-mode:screen;-webkit-mask-image:none;mask-image:none}.asset-avatar.mode-8bit img,.asset-avatar.mode-16bit img{image-rendering:pixelated}.asset-avatar.mode-digital-twin{aspect-ratio:1;overflow:hidden;border-radius:50%;-webkit-mask-image:none;mask-image:none}.asset-avatar.mode-digital-twin img{width:118%;height:118%;object-fit:cover;object-position:center 36%;transform:translateY(-4%);mix-blend-mode:normal;filter:contrast(1.03) saturate(.9);-webkit-mask-image:none;mask-image:none}.avatar-hair-short:before{box-shadow:inset 0 11px #32231d}.avatar-hair-long:before{box-shadow:inset 0 12px #38251f,-13px 18px 0 -2px #38251f,13px 18px 0 -2px #38251f}.age-nino{scale:.86}.age-senior:before{background:#d8c0a9;box-shadow:inset 0 9px #dadada}.privacy-strip{display:flex;flex-wrap:wrap;gap:8px;padding-top:8px}.privacy-strip span{padding:7px 10px;border:1px solid rgba(255,255,255,.12);background:#00000038}.metrics-panel{display:grid;gap:10px;align-content:stretch;padding:14px}.metric{display:grid;align-content:center;min-height:96px;padding:13px;border-left:4px solid rgba(255,255,255,.18);background:#ffffff0b}.metric.primary{min-height:126px;border-left-color:var(--campaign-accent)}.metric strong{margin-top:4px;font-size:clamp(2rem,5vw,4.4rem);line-height:.98}.metric:not(.primary) strong{font-size:clamp(1.7rem,3vw,2.65rem)}.signal-row{display:grid;align-content:end;gap:10px;padding:8px 2px 2px}meter{width:100%;height:18px}meter::-webkit-meter-bar{border:0;border-radius:0;background:#ffffff1f}meter::-webkit-meter-optimum-value{background:linear-gradient(90deg,var(--green),var(--amber),var(--coral))}.insight-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.panel{position:relative;z-index:4;min-height:174px;padding:16px}.demography-panel{min-width:0}.panel-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}.panel-title strong{font-size:clamp(1rem,2vw,1.22rem);text-align:right}.bar-list{display:grid;gap:10px}.bar-row{display:grid;grid-template-columns:68px minmax(0,1fr) 28px;gap:10px;align-items:center;min-height:24px}.bar-row span{color:var(--muted);font-size:.84rem;font-weight:800}.bar-row strong{text-align:right}.bar-track{height:13px;background:#ffffff1f}.bar-track i{display:block;height:100%;background:linear-gradient(90deg,var(--campaign-accent),var(--violet));transition:width .5s ease}.profile-readout{display:flex;gap:16px;align-items:center}dl{display:grid;gap:8px;width:100%;margin:0}dl div{display:flex;justify-content:space-between;gap:14px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1)}dt{color:var(--muted);font-weight:800}dd{margin:0;font-size:1.12rem;font-weight:900}.control-bar{display:flex;gap:10px;align-items:center;justify-content:space-between;min-height:70px;padding:10px}.control-bar button{border:1px solid rgba(255,255,255,.14);background:#ffffff0d;font-weight:900;text-align:center}.speed-control{display:flex;gap:8px}@media(orientation:portrait){body{overflow:auto}.stage{height:auto;min-height:calc(100vh - 20px)}.live-grid,.insight-grid{grid-template-columns:1fr}.camera-frame{min-height:52vh}.metrics-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.metric.primary{grid-column:span 2}}@media(max-width:760px){.audience-shell{padding:8px}.topbar,.trilogy,.look-control,.feed-status,.metrics-panel,.control-bar{grid-template-columns:1fr}.trilogy,.control-bar,.speed-control{display:grid}.camera-header,.panel-title,.profile-readout{align-items:flex-start;flex-direction:column}.camera-frame{min-height:430px}.metric.primary,.metric{grid-column:auto;min-height:94px}.control-bar button{width:100%}}