/* The pending room is the session itself, before anyone has spoken. */
.scene{height:760px}
.room-brief{position:absolute;left:505px;top:110px;width:440px;z-index:150;transition:left .65s var(--ease),top .65s var(--ease),width .65s var(--ease),opacity .25s}
.room-brief .session-question{font:550 43px/1.08 Bricolage,Arial,sans-serif;letter-spacing:-1.5px;white-space:pre-line;text-wrap:pretty;min-height:0;padding:0;margin:0}
.session-situation{font-size:19px;line-height:1.5;letter-spacing:-.25px;color:var(--muted);max-width:420px;margin:22px 0 0;transition:opacity .2s,transform .3s var(--ease),visibility .2s}
body[data-phase=preview] .scene-wrap,body[data-phase=intro] .scene-wrap,body[data-phase=lifting] .scene-wrap{opacity:1;visibility:visible;filter:none}
body[data-phase=reveal] .person{animation:none}
body[data-phase=preview] .person,body[data-phase=intro] .person{transition:none}
body:not([data-phase=preview]):not([data-phase=intro]) .room-brief{left:85px;top:50px;width:850px}
body:not([data-phase=preview]):not([data-phase=intro]) .room-brief .session-question{font-size:28px;text-align:center;line-height:1.15;letter-spacing:-.75px;white-space:normal;transition:font-size .65s var(--ease)}
body:not([data-phase=preview]):not([data-phase=intro]) .session-situation{opacity:0;visibility:hidden;transform:translateY(-8px)}
body.resetting .room-brief{opacity:0}
.person.spark .tile-foot>span{display:flex;align-items:baseline;gap:9px}
.person.spark .tile-foot small{font-size:12px;color:var(--pink);font-weight:400}
.person.spark .dialogue{bottom:48px}
.session-record{top:590px}
body[data-scene=summary] .session-record{top:118px;animation:none}
/* These defaults also preserve a complete room if JavaScript is unavailable. */
.person.spark{--x:93px;--y:129px;--w:338px;--h:450px;--ry:-7deg;--rz:-1deg;--z:26px;--order:56}
.person.human{--y:415px;--w:132px;--h:180px;--ry:7deg;--rz:0deg;--z:0px;--order:30}
.person[data-person="1"]{--x:515px;--rz:-2deg}
.person[data-person="2"]{--x:663px}
.person[data-person="3"]{--x:811px;--rz:2deg}
.human .portrait img{inset:0;width:100%;height:100%;max-width:100%;object-fit:cover;object-position:50% 37%;transform:none}
@media(max-width:800px){
 .scene{height:860px}
 body[data-phase=preview] .scene,body[data-phase=intro] .scene{height:640px}
 .scene-wrap{margin-top:0}
 .room-brief{left:16px;top:17px;width:328px}
 .room-brief .session-question{font-size:32px;letter-spacing:-1px;line-height:1.08}
 .session-situation{font-size:16px;line-height:1.45;margin-top:17px;max-width:325px}
 body:not([data-phase=preview]):not([data-phase=intro]) .room-brief{left:16px;top:26px;width:328px}
 body:not([data-phase=preview]):not([data-phase=intro]) .room-brief .session-question{font-size:22px;line-height:1.15;letter-spacing:-.5px}
 .person.spark .tile-foot>span{gap:7px}
 .person.spark .tile-foot small{font-size:10px}
 .person.spark .dialogue{bottom:39px}
 .session-record{top:340px}
 body[data-scene=summary] .session-record{top:440px}
 .person.spark{--x:20px;--y:247px;--w:210px;--h:285px;--ry:-4deg;--rz:-1deg;--z:20px}
 .person.human{--x:255px;--w:88px;--h:108px;--ry:5deg}
 .person[data-person="1"]{--y:241px;--rz:-1deg}
 .person[data-person="2"]{--y:358px;--rz:0deg}
 .person[data-person="3"]{--y:475px;--rz:1deg}
}
@media(prefers-reduced-motion:reduce){.room-brief,.room-brief .session-question,.session-situation{transition:none!important}}

/* A countdown occupies the host's voice-indicator position, then hands it over. */
.session-countdown{position:absolute;right:9px;bottom:6px;width:34px;height:34px;display:grid;place-items:center;color:var(--pink);opacity:0;visibility:hidden;transform:translateY(3px) scale(.9);transition:opacity .18s,transform .25s var(--ease),visibility .18s;--remaining:1}
.session-countdown svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;transform:rotate(-90deg)}
.countdown-track{opacity:.2}.countdown-ring{stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--remaining))}
.countdown-number{font:600 14px/1 Inter,Arial,sans-serif;font-variant-numeric:tabular-nums;text-shadow:none}
body:is([data-phase=intro],[data-phase=lifting],[data-phase=reveal]) .session-countdown{opacity:1;visibility:visible;transform:none}
body:not([data-phase=session]) .meter{opacity:0}
.demo-controls{display:flex;align-items:center;justify-content:flex-end;gap:2px;width:min(920px,100%);height:44px;margin:0 auto}
.demo-controls button{display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border:0;background:transparent;color:var(--muted);border-radius:50%;transition:background .15s,color .15s,transform .18s var(--ease)}
.demo-controls button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.demo-controls button:hover{background:#18313e08;color:var(--ink)}
.demo-controls button:active{transform:scale(.92)}
.demo-controls button:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.demo-controls button[aria-disabled=true]{opacity:.35;cursor:default}
.demo-controls [hidden]{display:none}
.control-divider{width:1px;height:12px;background:#18313e24;margin:0 3px}
.demo-announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:800px){.session-countdown{right:7px;bottom:4px;width:31px;height:31px}.countdown-number{font-size:13px}.demo-controls{max-width:430px}}
@media(prefers-reduced-motion:reduce){.session-countdown,.demo-restart,.control-divider{display:none!important}.demo-controls button{transition:none}}
