/* The host stays put. Conversation first; the record is readable only at the close. */
main{display:flex;flex-direction:column;align-items:center;width:min(1180px,calc(100% - 48px));min-height:0;padding:0 0 28px;margin:auto;gap:17px}
.showcase{width:100%;max-width:1100px;position:relative}
.session-question{position:relative;z-index:150;font:500 clamp(25px,3vw,39px)/1.12 Bricolage,Arial,sans-serif;letter-spacing:-1.1px;text-align:center;max-width:830px;min-height:76px;margin:9px auto 0;padding:0 20px;display:flex;align-items:center;justify-content:center;animation:none;transform:translateY(0) scale(1);transform-origin:50% 50%;transition:transform .85s var(--ease),opacity .25s}
body[data-phase=intro] .session-question{transform:translateY(var(--question-travel,250px)) scale(1.18)}
.scene-wrap{transition:opacity .5s ease,filter .6s ease}
body[data-phase=intro] .scene-wrap,body[data-phase=lifting] .scene-wrap{opacity:0;visibility:hidden;filter:blur(5px)}
body[data-phase=reveal] .dialogue,body[data-phase=intro] .dialogue,body[data-phase=lifting] .dialogue{opacity:0!important}
body[data-phase=reveal] .person{animation:tile-arrive .65s var(--ease) backwards}
body[data-phase=reveal] .human:nth-child(2){animation-delay:.08s}
body[data-phase=reveal] .human:nth-child(3){animation-delay:.16s}
body[data-phase=reveal] .human:nth-child(4){animation-delay:.24s}
@keyframes tile-arrive{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
/* One quiet invitation below the demonstration, not a bank of playback buttons. */
.start-session{width:min(960px,100%);display:grid;grid-template-columns:310px 1fr;gap:48px;border-top:1px solid var(--line);padding:32px 0 25px;margin:8px auto 0}
.start-intro h2{font:500 28px/1.1 Bricolage,Arial,sans-serif;letter-spacing:-.7px;margin:0 0 22px}
.start-link{display:inline-flex;gap:24px;align-items:center;background:var(--ink);color:white;font-size:13px;font-weight:500;text-decoration:none;border-radius:40px;padding:7px 7px 7px 19px;min-height:48px;transition:box-shadow .2s,transform .2s}
.start-link span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--pink);color:var(--ink);font-size:20px}
.start-link:hover{transform:translateY(-2px);box-shadow:0 6px 18px #18313e1c}
.session-options{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0;align-content:start;align-items:flex-start}
.session-options li{display:contents}
.session-chip{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 19px;border:1px solid transparent;border-radius:999px;background:#fff;color:var(--ink);font-size:13px;line-height:1.35;text-decoration:none;transition:background .18s,transform .18s,box-shadow .18s}
.session-chip:hover{background:var(--pink);transform:translateY(-2px);box-shadow:0 5px 14px #18313e0c}
.session-chip:active{transform:translateY(0)}
.session-chip:focus-visible{background:var(--pink);outline:2px solid var(--ink);outline-offset:3px}
/* A single soft-pink sweep marks the next story. No strobing or repeating flash. */
.session-wipe{position:fixed;inset:-12vh -40vw;z-index:1000;pointer-events:none;background:var(--pink);transform:translateX(-125%) skewX(-14deg);visibility:hidden;contain:paint;box-shadow:70px 0 100px #f6c7d855}
.session-wipe>span{position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,#fff5 70%,transparent 90%)}
.session-wipe>img{position:absolute;width:80px;height:100px;object-fit:contain;left:50%;top:50%;opacity:.07;transform:translate(-50%,-50%) skewX(14deg)}
body.wiping .session-wipe{visibility:visible;animation:session-flash 1.05s cubic-bezier(.65,0,.25,1) both}
body.resetting .session-question{opacity:0}
@keyframes session-flash{0%{transform:translateX(-125%) skewX(-14deg)}40%,54%{transform:translateX(0) skewX(-14deg)}100%{transform:translateX(125%) skewX(-14deg)}}
.scene-wrap{width:100%;max-width:1100px;overflow:clip;isolation:isolate;outline:none}
.scene-wrap:focus-visible{outline:2px solid #18313e44;outline-offset:5px;border-radius:28px}
.scene{width:1020px;height:710px;isolation:isolate;perspective:1500px}
.session-chips{display:grid;grid-template-columns:repeat(3,max-content);justify-content:center;max-width:1000px;gap:9px}
.session-chips button{font-size:12px;padding:13px 17px;min-height:42px;background:#fff;box-shadow:0 1px 0 #18313e03}
.session-chips button.selected{background:var(--pink)}
.halo{inset:35px auto auto 5px;width:505px;height:565px;background:radial-gradient(ellipse at 58% 50%,#f6c7d8b0,transparent 68%);filter:blur(25px);opacity:.9;transform:none}
.halo-line{display:none}
.ground{left:75px;bottom:132px;width:385px;height:38px;opacity:.6}
.person{transition:transform .65s var(--ease),width .65s var(--ease),height .65s var(--ease),box-shadow .4s,border-radius .6s}
.person.spark,.person.spark.active{border-radius:28px;box-shadow:0 25px 50px -22px #18313e50,0 0 0 3px #f6c7d8b3}
.person.spark .portrait{filter:saturate(1)}
.person.spark.active{box-shadow:0 25px 50px -22px #18313e50,0 0 0 4px var(--pink)}
.person.human{border-radius:21px}.person.human.active{border-radius:25px}
.human .portrait .participant-poster,.human .portrait .participant-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 37%;max-width:100%;scale:1;transform:none}
.human.active .portrait .participant-poster{scale:1;transform:none}
.participant-video{opacity:0;transition:opacity .16s ease;pointer-events:none}
.participant-video.visible.ready{opacity:1}
.dialogue{left:14px;right:14px;bottom:43px;padding:16px 17px 19px}
.dialogue p{font-size:17px;line-height:1.34;letter-spacing:-.3px}
.spoken-emphasis{background:linear-gradient(var(--pink),var(--pink)) 0 94%/100% 36% no-repeat;font-weight:600;animation:ink-in .65s .35s var(--ease) backwards}
.agreement-mark{position:absolute;right:10px;top:10px;width:23px;height:23px;border-radius:50%;background:var(--pink);color:var(--ink);display:grid;place-items:center;font-size:13px;opacity:0;scale:.7;transition:opacity .3s,scale .4s var(--ease)}
.person.agreed .agreement-mark{opacity:1;scale:1}
.person.invited{box-shadow:0 20px 40px -20px #18313e50,0 0 0 2px var(--pink)}
.person.invited .portrait{filter:saturate(1)}
/* The same little page gathers ink beside Spark, then opens into the finished recap. */
.session-record{position:absolute;left:324px;top:530px;width:128px;height:110px;z-index:90;background:#fff;border:1px solid #fff;border-radius:12px;box-shadow:0 15px 28px -14px #18313e32,5px 6px 0 #f2e5eb;transform:rotateY(-10deg) rotateZ(7deg);overflow:hidden;opacity:1;transition:left .85s var(--ease),top .85s var(--ease),width .85s var(--ease),height .85s var(--ease),transform .85s var(--ease),opacity .35s}
body[data-note=empty] .session-record{opacity:0;transform:translateY(7px) rotateY(-10deg) rotateZ(7deg)}
.note-drawing{position:absolute;inset:15px 17px;transition:opacity .2s}
.note-drawing>img{display:block;width:13px;height:16px;object-fit:contain;margin-bottom:11px}
.note-drawing i{display:block;width:85%;height:3px;margin:8px 0;border-radius:3px;background:#a8b7be;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease),background .4s}
.note-drawing i:nth-of-type(2){width:65%;transition-delay:.2s}
.note-drawing i:nth-of-type(3){width:76%;transition-delay:.35s}
.scene:not([data-beat="0"]) .note-drawing i:first-of-type{transform:scaleX(1)}
body[data-note=gathering] .scene[data-beat="2"] .note-drawing i:nth-of-type(2),body[data-note=forming] .note-drawing i,body[data-note=agreed] .note-drawing i{transform:scaleX(1)}
body[data-note=forming] .note-drawing i:nth-of-type(3){background:var(--pink)}
.note-tick{position:absolute;right:-4px;top:-1px;width:21px;height:21px;display:grid;place-items:center;font-size:11px;border-radius:50%;background:var(--pink);color:var(--ink);opacity:0;transform:scale(.7);transition:opacity .25s,transform .4s var(--ease)}
body[data-note=agreed] .note-tick{opacity:1;transform:scale(1)}
.recap{position:absolute;inset:27px 28px;opacity:0;pointer-events:none;transition:opacity .2s}
.recap-intro>img{width:24px;height:29px;object-fit:contain;margin-bottom:17px}
.recap-intro h2{font:550 33px/1.05 Bricolage;letter-spacing:-1px;margin:0 0 23px;max-width:360px}
.recap-decision{display:flex;gap:10px;align-items:center;background:var(--rose);border-radius:12px;padding:14px;margin:0 0 24px}
.recap-check{width:25px;height:25px;border-radius:50%;background:var(--ink);color:white;font-size:13px;display:grid;place-items:center;flex:none}
.recap-decision strong{font-size:14px;font-weight:500;line-height:1.4;display:block}
.action-list h3{font-size:13px;font-weight:600;margin:0 0 4px}
.action-row{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid #e9edef;align-items:center}
.action-box{width:13px;height:13px;border:1px solid #aabac1;border-radius:4px;align-self:flex-start;margin-top:3px;flex:none}
.action-row>div{flex:1;min-width:0}.action-row strong{font-size:14px;font-weight:500;display:block;line-height:1.35}
.action-row small{font-size:12px;display:block;color:var(--muted);margin-top:5px}
.action-date{font-size:11px;color:var(--muted);white-space:nowrap}
body[data-scene=summary] .session-record{left:500px;top:58px;width:446px;height:470px;border-radius:23px;transform:rotateY(-8deg) rotateZ(1deg);box-shadow:12px 27px 50px -19px #18313e33,6px 7px 0 #f3e4eb}
body[data-scene=summary] .note-drawing{opacity:0}
body[data-scene=summary] .recap{opacity:1;transition:opacity .5s .45s}
body[data-scene=summary] .recap>div{animation:recap-enter .5s .45s var(--ease) both}
body[data-scene=summary] .recap>div:nth-child(2){animation-delay:.58s}
body[data-scene=summary] .recap>div:nth-child(3){animation-delay:.7s}
body[data-scene=summary] .dialogue{opacity:0}
/* Spark remains visible and anchored even as the rest of the room resets. */
body.resetting .scene,body:not(.resetting) .scene{opacity:1;translate:0 0;transition:none}
body.resetting .human,body.resetting .session-record,body.resetting .dialogue{opacity:0;transition:opacity .25s}
.person,.session-record{transition-property:transform,width,height,box-shadow,border-radius,left,top,opacity}
@keyframes ink-in{from{background-size:0 36%}}
@keyframes recap-enter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes present-notes{0%{left:324px;top:530px;width:128px;height:110px}48%{left:452px;top:296px;width:270px;height:270px}100%{left:500px;top:58px;width:446px;height:470px}}
@media(min-width:801px){body[data-scene=summary] .session-record{animation:present-notes .95s var(--ease) both}}
@media(max-height:800px) and (min-width:801px){main{padding:0 0 20px;gap:12px}.session-chips button{min-height:39px;padding:11px 14px}}
@media(max-width:800px){
 main{width:100%;padding:4px 16px 28px;gap:12px}
 .session-question{font-size:27px;letter-spacing:-.75px;min-height:90px;padding:0 9px;max-width:400px;margin-top:4px}
 body[data-phase=intro] .session-question{transform:translateY(230px) scale(1.05)}
 .start-session{grid-template-columns:1fr;gap:23px;padding:28px 5px 16px;max-width:440px;margin-top:8px}
 .start-intro{display:flex;flex-direction:column;gap:17px;align-items:flex-start}
 .start-intro h2{font-size:27px;margin:0;max-width:300px}
 .start-link{font-size:11px;padding-left:13px;gap:9px;min-height:46px;flex:none}
 .start-link span{width:29px;height:29px;font-size:18px}
 .session-options{gap:8px}.session-chip{font-size:12px;padding:12px 16px;min-height:44px}
 .scene-wrap{width:100%;max-width:430px;overflow:clip}
 .scene{width:360px;height:790px}
 .session-chips{width:100%;max-width:440px;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .session-chips button{font-size:11px;padding:12px 13px;min-height:40px}
 .halo{inset:15px auto auto -10px;width:380px;height:390px;transform:none}
 .ground{left:60px;bottom:430px;width:270px;transform:none}
 .person.spark,.person.spark.active{border-radius:25px}
 .person.human{border-radius:16px}.person.human.active{border-radius:23px}
 .dialogue{left:11px;right:11px;bottom:34px;padding:12px 13px 16px}
 .dialogue p{font-size:14px;line-height:1.3;letter-spacing:-.25px}
 .session-record{left:1px;top:264px;width:51px;height:57px;border-radius:9px;transform:rotateZ(7deg)}
 .note-drawing{inset:8px 9px}.note-drawing>img{width:8px;height:10px;margin-bottom:6px}
 .note-drawing i{height:2px;margin:5px 0}.note-tick{width:14px;height:14px;font-size:9px;right:-6px;top:-4px}
 body[data-scene=summary] .session-record{left:10px;top:374px;width:340px;height:398px;transform:none;border-radius:20px}
 body[data-scene=summary] .human{opacity:0;pointer-events:none;transition:opacity .3s}
 .recap{inset:21px 23px}.recap-intro>img{width:19px;height:23px;margin-bottom:13px}
 .recap-intro h2{font-size:27px;letter-spacing:-.8px;margin-bottom:17px}
 .recap-decision{padding:12px;gap:9px;margin-bottom:18px}.recap-decision strong{font-size:12px}
 .action-list h3{font-size:12px}.action-row{padding:10px 0}.action-row strong{font-size:12px}.action-row small{font-size:11px}.action-date{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.recap>div,.session-record{animation:none!important}.dialogue{transition:none}.session-wipe{display:none}.session-question,.scene-wrap{transition:none}.person{animation:none!important}}