* { margin:0; padding:0; box-sizing:border-box; }
body { overflow:hidden; font-family:'Segoe UI',system-ui,sans-serif; background:#080b12; color:white; }
#stage { width:1920px; height:1080px; position:absolute; left:50%; top:50%; transform-origin:center; overflow:hidden; }
#stage::before { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 30%,transparent 25%,rgba(0,0,0,.15)); }
.event-title { position:absolute; top:32px; left:360px; right:360px; text-align:center; font-size:29px; font-weight:650; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 2px 8px #000; }
.org-name { position:absolute; top:72px; left:360px; right:360px; text-align:center; font-size:20px; opacity:.8; text-shadow:0 2px 8px #000; }
.show-logo { position:absolute; top:28px; left:72px; max-height:70px; max-width:260px; object-fit:contain; }
.show-container { position:absolute; inset:125px 72px 215px; width:1776px; height:740px; }
.counter { position:absolute; left:72px; bottom:42px; font-size:21px; padding:14px 22px; border-radius:40px; color:#fff; background:rgba(8,12,24,.8); max-width:1450px; }
#qr-overlay { display:none; position:absolute; right:72px; bottom:24px; padding:12px; width:156px; background:white; border-radius:15px; color:#182236; text-align:center; }
#qr-img { display:block; width:132px; height:132px; }
#qr-label { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-top:4px; }
.preview-label { position:absolute; right:72px; top:38px; max-width:270px; padding:10px 16px; background:#f3d089; color:#302610; border-radius:30px; font-size:18px; }
.preview-label[hidden] { display:none; }
.empty-msg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; font-size:32px; color:#fff; text-shadow:0 2px 8px #000; }
.person { min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.photo { flex-shrink:0; background-size:cover; background-position:center; border-radius:50%; border:3px solid rgba(255,255,255,.55); display:flex; align-items:center; justify-content:center; color:#fff; font-size:56px; font-weight:700; box-shadow:0 8px 35px #0003; }
.info { width:100%; min-width:0; text-align:center; padding:7px 10px; background:rgba(12,20,36,.86); border-radius:10px; }
.name { color:white; font-size:21px; line-height:1.2; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.role { font-size:16px; line-height:1.3; color:#d7e1f4; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.people-grid { display:grid; height:100%; gap:10px; align-items:center; padding:20px; }
.grid-person { height:100%; max-height:210px; width:100%; max-width:240px; justify-self:center; min-height:0; padding:4px; border-radius:16px; position:relative; transition:transform 900ms cubic-bezier(.22,.7,.2,1),background 900ms,box-shadow 900ms; }
.grid-person.grid-featured { transform:scale(1.16); z-index:2; background:#17283ee8; box-shadow:0 12px 32px #0005; }
.grid-person .photo { transition:box-shadow 900ms,border-color 900ms; }
.grid-featured .info { background:#324d82; }
.grid-featured .photo { border-color:#a9cfff; box-shadow:0 0 30px #6da5ff66; }
.mosaic-grid { gap:18px; justify-content:center; align-content:center; }
.mosaic-card { height:100%; padding:10px; border-radius:22px; background:linear-gradient(150deg,#24364ad9,#101727eb); border:1px solid #ffffff1c; }
.mosaic-card .info { background:transparent; }
.mosaic-card .name { font-size:22px; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.mosaic-card .role { font-size:18px; }
.orbit-item { position:absolute; top:50%; left:50%; width:142px; height:166px; margin:-83px 0 0 -71px; }
.orbit-item .name { font-size:18px; }
.orbit-item .role { font-size:14px; }
.orbit-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:450px; }
.orbit-center .name { font-size:32px; }
.orbit-center .role { font-size:22px; }
.orbit-path { position:absolute; width:1500px; height:520px; left:138px; top:110px; border:1px solid #ffffff25; border-radius:50%; }
.mode-marquee { display:flex; flex-direction:column; justify-content:center; gap:28px; }
.marquee-row { overflow:hidden; width:100%; mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent); }
.marquee-belt { display:flex; width:max-content; animation:marquee var(--duration) linear infinite; }
.marquee-belt.reverse { animation-direction:reverse; }
.marquee-track { display:flex; flex-shrink:0; min-width:1776px; justify-content:space-around; }
.marquee-person { width:200px; margin-right:20px; flex-shrink:0; }
@keyframes marquee { to { transform:translateX(-50%); } }
.spotlight-person { display:flex; flex-direction:row; align-items:center; gap:100px; height:100%; width:100%; padding:50px 130px; }
.spotlight-person .info { width:850px; text-align:left; background:transparent; padding:0; text-shadow:0 2px 12px #000; }
.spotlight-person .name { font-size:70px; white-space:normal; overflow-wrap:anywhere; line-height:1.12; }
.spotlight-person .role { font-size:33px; white-space:normal; margin-top:24px; line-height:1.4; }
.coverflow-scene { width:100%; height:100%; perspective:1500px; position:relative; }
.coverflow-card { position:absolute; width:320px; height:560px; left:calc(50% - 160px); top:calc(50% - 280px); padding:25px; border-radius:28px; border:1px solid #ffffff44; background:linear-gradient(145deg,#2b3d5c,#111b2a); box-shadow:0 28px 65px #0006; transform-style:preserve-3d; transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity .8s; }
.coverflow-card .info { background:transparent; }
.coverflow-card .name { font-size:28px; white-space:normal; }
.coverflow-card .role { font-size:21px; white-space:normal; }
.portrait-wall { display:grid; grid-template-columns:610px 1fr; height:100%; gap:50px; }
.portrait-hero { border-radius:32px; background:linear-gradient(150deg,#23344bdd,#0c1424e8); padding:30px; }
.portrait-hero .info { background:transparent; }
.portrait-hero .name { font-size:44px; white-space:normal; overflow-wrap:anywhere; }
.portrait-hero .role { font-size:28px; white-space:normal; }
.portrait-thumbs { display:grid; gap:10px; height:100%; align-items:center; }
.portrait-thumb .name { font-size:16px; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; max-height:40px; }
.portrait-thumb .role { display:none; }
.portrait-thumb .info { padding:5px; }
.portrait-thumb.active .photo { border-color:#f3d089; box-shadow:0 0 30px #f3d08966; }
@media (prefers-reduced-motion:reduce) { .coverflow-card, .grid-person, .grid-person .photo { transition:none; } .grid-person.grid-featured { transform:none; } }

.spotlight-person .name, .spotlight-person .role, .portrait-hero .name, .portrait-hero .role, .coverflow-card .name, .coverflow-card .role { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; overflow-wrap:anywhere; }
.coverflow-card .name, .coverflow-card .role, .portrait-hero .role { -webkit-line-clamp:2; }

/* Full names wrap and shrink to fit; the focused profile repeats them at a readable size. */
.name { white-space:normal; overflow-wrap:anywhere; text-overflow:clip; }
.grid-person .name { height:44px; line-height:1.15; }
.mosaic-card .name { display:block; height:54px; -webkit-line-clamp:unset; }
.orbit-item .name, .marquee-person .name { max-height:44px; }
.orbit-center .name { max-height:78px; }
.spotlight-person .name { display:block; max-height:236px; -webkit-line-clamp:unset; }
.portrait-hero .name { display:block; max-height:158px; -webkit-line-clamp:unset; }
.coverflow-card .name { display:block; max-height:68px; -webkit-line-clamp:unset; }
.portrait-thumb .name { display:block; -webkit-line-clamp:unset; }
.mosaic-featured { outline:3px solid #f3d089; outline-offset:2px; }
#profile-detail { position:absolute; top:874px; left:72px; right:270px; height:102px; display:flex; align-items:center; gap:28px; padding:8px 18px; border-radius:14px; background:#101b2bef; color:#fff; }
#profile-detail[hidden], #profile-response[hidden] { display:none; }
#profile-name { width:450px; flex-shrink:0; max-height:86px; font-size:30px; font-weight:700; line-height:1.15; overflow-wrap:anywhere; }
#profile-response { min-width:0; flex:1; }
#profile-question { font-size:18px; line-height:1.15; color:#f3d089; overflow-wrap:anywhere; }
#profile-value { font-size:22px; line-height:1.2; margin-top:4px; white-space:pre-wrap; overflow-wrap:anywhere; }

.network-scene { position:relative; width:100%; height:100%; }
.network-lines { position:absolute; inset:0; width:100%; height:100%; fill:none; pointer-events:none; }
.network-link { stroke:#7890ad; stroke-width:1.2; opacity:.5; transition:stroke 1s; }
.network-bridge { stroke:#8584a8; opacity:.35; stroke-width:1.2; }
.network-link.active { stroke:#d2a34f; opacity:.8; stroke-width:1.8; }
@keyframes network-flow { to { stroke-dashoffset:-114; } }
@media (prefers-reduced-motion:reduce) { .network-link.active { animation:none; stroke-dasharray:none; } .network-link { transition:none; } }
.network-node { position:absolute; transform:translateX(-50%); width:92px; gap:3px; z-index:1; }
.network-node .info { display:block; width:max-content; max-width:94px; padding:4px 8px; border-radius:12px; background:#142136e8; }
.network-node .name { font-size:16px; height:auto; max-height:36px; line-height:1.1; white-space:nowrap; }
.network-node .role { display:none; }
.network-node .photo { opacity:1; border-width:2px; }
.network-active .photo { opacity:1; border-color:#f3d089; box-shadow:0 0 32px #f3d089aa; }
.network-hero { position:absolute; left:588px; top:20px; width:600px; height:700px; padding:26px 32px; border-radius:32px; background:linear-gradient(145deg,#2b3d5c,#101b2b); border:1px solid #ffffff50; box-shadow:0 28px 65px #0008; display:flex; flex-direction:column; justify-content:center; gap:18px; }
.network-profile { animation:network-profile-in .7s ease-out; }
.network-profile .info { background:transparent; padding:6px 0; }
.network-profile .name { font-size:40px; max-height:96px; line-height:1.15; }
.network-profile .role { font-size:24px; white-space:normal; max-height:60px; overflow:hidden; }
.network-answer { border-top:1px solid #ffffff35; padding-top:16px; }
.network-answer[hidden] { display:none; }
.network-question { color:#f3d089; font-size:21px; line-height:1.2; overflow-wrap:anywhere; }
.network-value { margin-top:8px; font-size:25px; line-height:1.25; white-space:pre-wrap; overflow-wrap:anywhere; }
@keyframes network-profile-in { from { opacity:0; transform:translateX(35px) scale(.96); } to { opacity:1; transform:translateX(0) scale(1); } }
@media (prefers-reduced-motion:reduce) { .network-profile { animation:none; } }

.network-carousel { position:absolute; inset:0; perspective:1800px; pointer-events:none; }
.network-carousel .network-hero { transition:transform 1.1s cubic-bezier(.2,.7,.2,1),opacity .8s; will-change:transform; }
.network-carousel .network-profile { animation:none; }
.network-carousel .network-hero:not(.network-current) .network-answer { visibility:hidden; }
@media (prefers-reduced-motion:reduce) { .network-carousel .network-hero { transition:none; } }