:root{--ink:#eef2ff;--muted:#9ca8cb;--navy:#080d1b;--panel:#10182b;--panel2:#151e35;--line:#293657;--purple:#7168ff;--purple2:#958dff;--red:#ef4444;--green:#43d17d;--shadow:0 24px 70px #02040aaa}*{box-sizing:border-box}html{background:var(--navy);scroll-behavior:smooth}body{margin:0;min-width:320px;overflow-x:hidden;background:radial-gradient(circle at 70% 10%,#182550 0,transparent 36%),var(--navy);color:var(--ink);font-family:Inter,system-ui,sans-serif}.noise{position:fixed;inset:0;pointer-events:none;opacity:.025;z-index:99;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}.meeting-shell{height:100svh;min-height:720px;display:flex;flex-direction:column}.topbar{height:76px;flex:0 0 76px;display:grid;grid-template-columns:minmax(310px,1.25fr) auto minmax(420px,1fr);align-items:center;gap:24px;padding:10px 18px;border-bottom:1px solid var(--line);background:#0e1528e8;backdrop-filter:blur(16px);z-index:20}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;min-width:0}.brand b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px}.brand small{display:block;color:var(--muted);margin-top:4px}.brand-mark{width:42px;height:42px;border-radius:10px;background:linear-gradient(145deg,#8078ff,#4544a6);position:relative;flex:none;box-shadow:inset 0 0 0 1px #ffffff1f}.brand-mark i{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff}.brand-mark i:nth-child(1){left:9px;top:9px}.brand-mark i:nth-child(2){right:9px;top:9px}.brand-mark i:nth-child(3){left:9px;bottom:9px}.brand-mark i:nth-child(4){right:9px;bottom:9px}.meeting-meta{display:flex;gap:10px;color:#c7d0ef;font:12px DM Mono,monospace;white-space:nowrap}.live-dot,.status-pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px #43d17d18}.divider{color:#4f5d80}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}.pair{color:#bec8ed;font:700 11px DM Mono,monospace;letter-spacing:.04em;text-align:right;white-space:nowrap}.pair small{display:block;color:#687698;font-size:9px;margin-top:2px}.btn{appearance:none;border:1px solid transparent;border-radius:8px;padding:11px 14px;color:#fff;background:#222b43;font:700 11px Inter,sans-serif;letter-spacing:.035em;cursor:pointer;transition:.18s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}.btn:hover{transform:translateY(-1px);filter:brightness(1.13)}.btn-primary{background:linear-gradient(135deg,#7d71ff,#5446d7);box-shadow:0 8px 22px #4d40d43b}.btn-ghost{border-color:#53628b;background:#18213a}.btn-danger{background:linear-gradient(135deg,#fb5555,#d72f42)}.meeting-stage{min-height:0;flex:1;display:grid;grid-template-columns:72px minmax(0,1fr) 310px}.rail{min-height:0;border-right:1px solid var(--line);background:#0b1224;display:flex;flex-direction:column;align-items:stretch;padding:8px 6px}.rail-item{position:relative;appearance:none;background:none;border:0;border-radius:8px;color:#99a7cc;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;margin-bottom:2px;cursor:pointer}.rail-item span{font-size:22px}.rail-item small{font-size:9px}.rail-item b{position:absolute;top:1px;right:5px;background:var(--red);font-size:8px;border-radius:10px;padding:2px 4px}.rail-item.active,.rail-item:hover{color:#fff;background:#7168ff28}.rail-spacer{flex:1}.rail-slogan{font:9px/1.45 DM Mono,monospace;color:#6d7aa0;text-align:center;padding:10px 0}.call-column{min-width:0;min-height:0;display:grid;grid-template-rows:34px minmax(300px,1fr) auto 68px;background:#060a13}.call-status{display:flex;align-items:center;justify-content:space-between;padding:0 14px;color:#94a3ca;font:10px DM Mono,monospace;border-bottom:1px solid #1d2944}.call-status strong{color:#6ce899;font-size:9px;letter-spacing:.15em}.viewport{position:relative;overflow:hidden;background:#03050a}.state{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .35s ease,transform .35s ease;transform:scale(.985)}.state.active{opacity:1;visibility:visible;transform:scale(1)}.state>img{width:100%;height:100%;object-fit:cover;display:block}.hero-state:after,.image-state:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 48%,#050811e6 100%),linear-gradient(90deg,#05081166 0,transparent 36%)}.hotspot-grid{position:absolute;inset:0 0 21%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);z-index:3}.hotspot{position:relative;background:transparent;border:2px solid transparent;cursor:pointer;border-radius:2px;transition:.2s}.hotspot span{opacity:0;position:absolute;left:8px;top:8px;background:#090d18e8;color:#fff;padding:6px 8px;border-radius:5px;font:700 10px Inter,sans-serif;box-shadow:0 4px 18px #000}.hotspot:hover,.hotspot:focus-visible{border-color:#8479ff;box-shadow:inset 0 0 28px #6d62ff2e;outline:none}.hotspot:hover span,.hotspot:focus-visible span{opacity:1}.hero-copy{position:absolute;z-index:4;left:3.5%;bottom:4%;max-width:580px}.eyebrow{font:700 10px DM Mono,monospace;letter-spacing:.14em;color:#a9a2ff}.hero-copy h1{font-size:clamp(28px,4vw,62px);line-height:.9;letter-spacing:-.05em;margin:7px 0 8px;text-shadow:0 4px 20px #000}.hero-copy p{margin:0 0 12px;color:#ccd5ee;font:12px DM Mono,monospace}.cta-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.hint-chip{position:absolute;right:14px;bottom:14px;z-index:4;border:1px solid #52618b;background:#0d1426da;color:#ced6f1;border-radius:99px;padding:9px 12px;font:600 10px Inter,sans-serif;cursor:pointer}.hint-chip span{color:#9d95ff}.image-state:after{background:linear-gradient(90deg,#050811bf,transparent 60%),linear-gradient(180deg,transparent 60%,#050811de)}.warning-card,.ended-copy{position:absolute;z-index:4;left:5%;top:50%;transform:translateY(-50%);width:min(430px,42%);padding:24px;background:#0c1324ed;border:1px solid #7987b4;border-radius:13px;box-shadow:var(--shadow)}.warning-icon{display:flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:50%;background:#ef444427;border:1px solid var(--red);color:#ff6b6b;font-weight:800}.warning-card small,.ended-copy>span{font:700 9px DM Mono,monospace;color:#fc7580;letter-spacing:.12em}.warning-card h2,.ended-copy h2{font-size:clamp(25px,3.1vw,46px);line-height:.95;letter-spacing:-.04em;margin:8px 0}.warning-card p,.ended-copy p{font-size:12px;line-height:1.55;color:#aeb9d8}.warning-actions{display:flex;gap:8px;margin:14px 0}.ended-copy{border-color:#e05267}.ended-copy>span{color:#8ddca8}.ended-copy small{display:block;margin-top:12px;color:#7886aa}.ended-copy b{color:#fff}.reaction-layer{position:absolute;inset:0;pointer-events:none;z-index:12}.reaction{position:absolute;bottom:8%;font-size:32px;animation:floatUp 2s ease-out forwards;filter:drop-shadow(0 6px 10px #000)}@keyframes floatUp{0%{opacity:0;transform:translateY(20px) scale(.6) rotate(-8deg)}15%{opacity:1}100%{opacity:0;transform:translateY(-360px) scale(1.35) rotate(12deg)}}.thesis-strip{display:flex;justify-content:space-between;align-items:center;gap:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#11192b;padding:9px 14px}.thesis-strip p{margin:0;max-width:780px;color:#aeb9d6;font:10px/1.5 DM Mono,monospace}.thesis-strip strong{color:#fff}.thesis-strip .btn{padding:8px 10px;font-size:9px}.controls{display:flex;align-items:center;justify-content:center;gap:6px;background:#0f1729;padding:7px 12px}.control,.leave-btn{appearance:none;border:0;color:#d7def2;background:transparent;min-width:66px;height:52px;border-radius:9px;cursor:pointer}.control:hover{background:#222c44}.control span{display:block;font-size:20px;line-height:18px}.control small{font-size:8px}.control.is-off span{color:#ff5964;text-decoration:line-through}.control-wrap{position:relative}.more-menu{position:absolute;display:none;bottom:62px;right:0;width:190px;background:#18213a;border:1px solid #435176;border-radius:10px;padding:6px;box-shadow:var(--shadow);z-index:30}.more-menu.open{display:block}.more-menu button{display:block;width:100%;text-align:left;background:transparent;border:0;color:#dae1f7;padding:10px;border-radius:6px;cursor:pointer}.more-menu button:hover{background:#2a3553}.leave-btn{height:40px;min-width:118px;margin-left:12px;background:var(--red);font-weight:800}.chat-panel{min-width:0;min-height:0;background:#11182a;border-left:1px solid var(--line);display:grid;grid-template-rows:62px 1fr 28px 48px 38px}.chat-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--line)}.chat-head strong{display:block;font-size:14px}.chat-head small{display:block;margin-top:3px;color:var(--muted);font-size:9px}.chat-head button{background:transparent;border:0;color:#aeb8d8;font-size:23px;cursor:pointer}.chat-feed{min-height:0;overflow-y:auto;padding:6px 13px}.message{display:grid;grid-template-columns:28px 1fr;gap:8px;padding:7px 0;animation:messageIn .3s ease}.avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#665bd6;color:#fff;font:700 9px Inter}.message-head{font-size:10px;font-weight:700;color:#d9e0f3}.message-head time{color:#667496;font-weight:400;margin-left:5px}.message p{font-size:10px;line-height:1.42;color:#b2bddb;margin:3px 0 0}.message.system{display:block;background:#171f34;border-radius:6px;padding:7px 9px;margin:5px 0;color:#8795b8;font:9px DM Mono,monospace}@keyframes messageIn{from{opacity:0;transform:translateY(7px)}}.typing{color:#68789c;font-size:8px;padding:7px 14px}.typing span{display:inline-block;width:3px;height:3px;border-radius:50%;background:#8d97b2;animation:blink 1s infinite}.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}@keyframes blink{50%{opacity:.2}}.chat-input{display:flex;gap:7px;margin:5px 10px;border:1px solid #3c4c77;border-radius:7px;padding:4px 5px}.chat-input input{min-width:0;flex:1;background:transparent;border:0;outline:0;color:#fff;font:10px Inter}.chat-input button{border:0;background:transparent;color:#847bff;font-size:18px;cursor:pointer}.chat-ctas{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:2px 10px 6px}.mini-cta{border:1px solid #47567f;background:#1b2440;color:#fff;border-radius:5px;text-decoration:none;text-align:center;padding:7px 2px;font-size:8px;font-weight:800;cursor:pointer}.mini-cta:first-child{background:#6358e6}.modal-backdrop{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:18px;background:#02040bd9;backdrop-filter:blur(9px);opacity:0;visibility:hidden;transition:.25s}.modal-backdrop.open{opacity:1;visibility:visible}.profile-card{position:relative;width:min(1020px,94vw);height:min(650px,88vh);display:grid;grid-template-columns:58% 42%;overflow:hidden;border:1px solid #47567e;background:#10182b;border-radius:16px;box-shadow:var(--shadow);transform:translateY(15px);transition:.3s}.modal-backdrop.open .profile-card{transform:none}.modal-close{position:absolute;right:12px;top:10px;z-index:3;width:34px;height:34px;border-radius:50%;border:1px solid #5e6b90;background:#11182ad9;color:#fff;font-size:22px;cursor:pointer}.profile-visual{min-height:0;background:#070b15 center/cover no-repeat;position:relative}.profile-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 65%,#10182b)}.profile-content{padding:clamp(28px,4vw,54px);overflow-y:auto}.profile-kicker{font:700 10px DM Mono;color:#8d84ff;letter-spacing:.14em}.profile-content h2{font-size:clamp(34px,5vw,70px);line-height:.9;margin:10px 0;letter-spacing:-.06em}.profile-content h3{margin:0 0 20px;color:#c2cae3;font:500 13px DM Mono}.profile-content p{color:#aeb9d6;font-size:13px;line-height:1.65}.profile-content blockquote{margin:18px 0;padding:13px 15px;border-left:3px solid var(--purple);background:#171f35;color:#fff;font:600 13px DM Mono}.stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:20px 0}.stat{padding:10px;background:#171f35;border:1px solid #293654;border-radius:7px}.stat small{display:block;color:#7f8dad;font:8px DM Mono;letter-spacing:.08em}.stat b{display:block;margin-top:4px;color:#fff;font-size:13px}.confirm-card{width:min(440px,94vw);padding:32px;background:#10182b;border:1px solid #49577d;border-radius:15px;box-shadow:var(--shadow);text-align:center}.confirm-icon{display:grid;place-items:center;width:55px;height:55px;margin:0 auto 16px;border:1px solid #fa6464;border-radius:50%;color:#ff6868;font-size:25px}.confirm-card>small{font:700 9px DM Mono;color:#f9757d;letter-spacing:.13em}.confirm-card h2{font-size:34px;margin:8px 0}.confirm-card p{color:#9ca8c8}.confirm-actions{display:flex;justify-content:center;gap:8px;margin:20px 0}.confirm-card .cta-row{justify-content:center;padding-top:17px;border-top:1px solid #2a3553}.toast-stack{position:fixed;z-index:100;right:330px;top:88px;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{display:flex;align-items:center;gap:10px;width:280px;padding:11px 13px;border:1px solid #536187;border-radius:9px;background:#111a2df2;box-shadow:0 10px 30px #0007;color:#dfe5f6;font-size:10px;animation:toast 4s forwards}.toast i{width:8px;height:8px;border-radius:50%;background:#8f86ff;box-shadow:0 0 0 4px #8f86ff20}@keyframes toast{0%{opacity:0;transform:translateY(-10px)}10%,85%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-5px)}}.camera-off .hero-state>img{filter:brightness(.18) grayscale(.8)}.camera-off .hero-state:before{content:"CAMERA OFF · EVERYONE THANKS YOU";position:absolute;z-index:4;top:42%;left:50%;transform:translate(-50%,-50%);font:700 13px DM Mono;color:#c7cee4;white-space:nowrap}
@media(max-width:1100px){.topbar{grid-template-columns:minmax(250px,1fr) auto}.meeting-meta{display:none}.header-actions{grid-column:2}.pair{display:none}.meeting-stage{grid-template-columns:60px minmax(0,1fr) 270px}.rail{padding-inline:3px}.rail-item{padding-block:6px}.profile-card{grid-template-columns:50% 50%}.toast-stack{right:290px}}
@media(max-width:820px){.meeting-shell{height:auto;min-height:100svh}.topbar{height:auto;min-height:72px;position:sticky;top:0;grid-template-columns:1fr auto;padding:9px 10px}.brand small{display:none}.brand b{font-size:12px}.brand-mark{width:36px;height:36px}.header-actions .btn{display:none}.header-actions .btn-primary{display:inline-flex;padding:9px 10px}.meeting-stage{min-height:calc(100svh - 72px);display:grid;grid-template-columns:46px minmax(0,1fr)}.rail-slogan{display:none}.rail-item:nth-of-type(n+4){display:none}.call-column{grid-column:2;min-height:calc(100svh - 72px);grid-template-rows:32px minmax(410px,65svh) auto 64px}.chat-panel{position:fixed;z-index:60;top:0;right:0;bottom:0;width:min(340px,92vw);transform:translateX(102%);transition:.25s;box-shadow:-20px 0 50px #000}.chat-panel.open{transform:none}.hero-copy{left:4%;bottom:3%;right:3%}.hero-copy h1{font-size:clamp(29px,8vw,46px)}.hotspot-grid{inset:0 0 30%}.hint-chip{top:10px;bottom:auto}.state>img{object-position:center}.warning-card,.ended-copy{width:auto;left:12px;right:12px;top:auto;bottom:14px;transform:none;padding:18px}.warning-card h2,.ended-copy h2{font-size:28px}.thesis-strip{align-items:flex-start;flex-direction:column}.thesis-strip .cta-row{width:100%}.thesis-strip .btn{flex:1}.controls{position:sticky;bottom:0;z-index:50;justify-content:space-between;padding:6px 4px}.control{min-width:44px}.control small{font-size:7px}.leave-btn{min-width:70px;margin-left:0;font-size:10px}.profile-card{height:94svh;display:flex;flex-direction:column}.profile-visual{height:34%;flex:none}.profile-visual:after{background:linear-gradient(180deg,transparent 65%,#10182b)}.profile-content{padding:24px}.stats{grid-template-columns:1fr 1fr}.toast-stack{right:12px;top:82px}.toast{width:min(280px,calc(100vw - 70px))}}
@media(max-width:480px){.header-actions .btn-primary{font-size:9px}.brand b{max-width:170px}.call-column{grid-template-rows:30px minmax(390px,66svh) auto 60px}.hero-state>img{object-position:center top}.hero-copy p{display:none}.hero-copy .btn{padding:9px 10px;font-size:9px}.hotspot-grid{grid-template-columns:repeat(3,1fr);inset:0 0 34%}.thesis-strip p{font-size:9px}.control:nth-of-type(4){display:none}.profile-content h2{font-size:40px}.stats{grid-template-columns:1fr}.warning-actions,.confirm-actions{flex-wrap:wrap}.warning-actions .btn,.confirm-actions .btn{flex:1}.modal-backdrop{padding:0}.profile-card{width:100vw;height:100svh;border-radius:0}.confirm-card{border-radius:12px}.ended-copy .cta-row .btn,.warning-card .cta-row .btn{flex:1}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Keep every meeting-state image in its native 4:3 coordinate space. */
.meeting-shell{height:auto;min-height:100svh}
.meeting-stage{flex:none}
.call-column{grid-template-rows:34px auto auto 68px}
.viewport{display:grid;place-items:center;aspect-ratio:4/3;min-height:0}
.state{position:relative;inset:auto;grid-area:1/1;width:100%;height:100%;aspect-ratio:4/3;transform:scale(.985)}
.state.active{transform:scale(1)}
.state>img{object-fit:contain}

/* The participant tiles occupy only the call grid inside the supplied artwork. */
.hotspot-grid{position:absolute;inset:0;display:block}
.hotspot{position:absolute;width:25.2%;height:23.4%}
.hotspot[data-person="wagecuck"]{left:6.5%;top:6.7%}
.hotspot[data-person="boomer"]{left:31.9%;top:6.7%}
.hotspot[data-person="manager"]{left:57.4%;top:6.7%}
.hotspot[data-person="doomer"]{left:6.5%;top:30.9%}
.hotspot[data-person="chad"]{left:31.9%;top:30.9%}
.hotspot[data-person="troll"]{left:57.4%;top:30.9%}
.hotspot[data-person="npc"]{left:6.5%;top:54%}
.hotspot[data-person="intern"]{left:31.9%;top:54%}
.hotspot[data-person="slacker"]{left:57.4%;top:54%}

/* The source artwork already contains the hero headline; keep our actions in its footer. */
.hero-copy{left:auto;right:2%;bottom:1.5%;max-width:none}
.hero-copy .eyebrow,.hero-copy h1,.hero-copy p{display:none}
.hero-copy .cta-row{justify-content:flex-end}
.hint-chip{left:1.2%;right:auto;top:1.4%;bottom:auto}

/* Profile art is shown completely, while long participant names stay inside the card. */
.profile-card{width:min(1280px,96vw);grid-template-columns:minmax(0,56%) minmax(360px,44%)}
.profile-visual{background-size:contain;background-repeat:no-repeat;background-position:center}
.profile-visual:after{background:linear-gradient(90deg,transparent 82%,#10182b)}
.profile-content{min-width:0;padding:clamp(26px,3vw,44px)}
.profile-content h2{max-width:100%;font-size:clamp(32px,3.5vw,54px);line-height:.92;overflow-wrap:anywhere;word-break:normal}

@media(max-width:1100px){
  .profile-card{grid-template-columns:minmax(0,52%) minmax(340px,48%)}
  .profile-content h2{font-size:clamp(30px,4.5vw,48px)}
}
@media(max-width:820px){
  .call-column{grid-template-rows:32px auto auto 64px}
  .viewport{aspect-ratio:4/3}
  .profile-card{display:flex}
  .profile-visual{height:40%;background-size:contain}
  .profile-visual:after{background:linear-gradient(180deg,transparent 82%,#10182b)}
  .profile-content h2{font-size:clamp(34px,10vw,48px)}
  .hero-copy{right:2%;bottom:1%}
  .hero-copy .btn{padding:8px 9px;font-size:8px}
  .hint-chip{top:1%;left:1%;padding:7px 9px}
}