@font-face{font-family:Inter;src:url(/home-demo/media/Inter.ttf);font-weight:100 900;font-display:swap}@font-face{font-family:Bricolage;src:url(/home-demo/media/BricolageGrotesque.ttf);font-weight:100 900;font-display:swap}
:root{--ink:#18313e;--muted:#657982;--paper:#f6f8f9;--pink:#f6c7d8;--rose:#f9dce7;--line:#dce3e6;--ease:cubic-bezier(.22,.8,.22,1);--scale:1}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:5px}.site-nav{height:88px;width:min(1280px,calc(100% - 96px));margin:auto;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:3}.brand{display:flex;align-items:center;gap:18px;color:inherit;text-decoration:none;font-size:12px;letter-spacing:.2px}.brand img{width:43px;height:51px;object-fit:contain}.mobile-break{display:none}.nav-links{display:flex;gap:40px;align-items:center;font-size:14px}.nav-links .current{padding:10px 0 7px;border-bottom:3px solid var(--pink)}.account{display:grid;place-items:center;background:#e9eef0;width:42px;height:42px;border-radius:50%;font-size:13px}
main{width:min(1320px,calc(100% - 80px));min-height:calc(100svh - 206px);margin:auto;display:grid;grid-template-columns:43% 57%;align-items:center;padding:12px 0 24px}.copy{position:relative;z-index:2;padding:0 22px 30px 20px}.format{font-size:12px;letter-spacing:.2px;color:var(--muted)}.format span{margin-left:4px}.chapters{display:flex;gap:17px;font-size:11px;color:var(--muted);margin:22px 0 22px}.chapters span{padding-bottom:7px;position:relative;transition:color .4s}.chapters span:after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--pink);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}.chapters .on{color:var(--ink)}.chapters .on:after{transform:scaleX(1)}.headline-box{min-height:235px;display:flex;align-items:flex-start}h1{font-family:Bricolage,Arial,sans-serif;font-size:clamp(43px,4.1vw,62px);line-height:1.02;letter-spacing:-2.6px;font-weight:600;margin:0;animation:words-in .6s var(--ease) both}.start-label{font-size:14px;font-weight:600;margin:28px 0 14px}.session-chips{display:flex;flex-wrap:wrap;gap:8px;max-width:470px}.session-chips button{border:0;background:white;border-radius:30px;padding:13px 17px;font-size:12px;min-height:44px;transition:background .2s,transform .2s}.session-chips button:hover{transform:translateY(-2px)}.session-chips button.selected{background:var(--pink)}
.scene-wrap{height:690px;min-width:0;position:relative;isolation:isolate}.scene{width:720px;height:690px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--scale));transform-origin:center;perspective:1400px;--speaker-x:60%}.atmosphere{position:absolute;inset:0;pointer-events:none;transition:opacity .6s}.halo{position:absolute;inset:65px 0 35px 100px;background:radial-gradient(ellipse at 60% 45%,#f3c9d9a6,transparent 65%);filter:blur(22px);transition:transform 1s var(--ease),opacity .8s}.halo-line{position:absolute;border:1px solid #d7bfc940;border-radius:50%;width:570px;height:570px;left:98px;top:36px;transform:rotate(-16deg);transition:all .7s var(--ease)}.halo-line.two{width:600px;height:600px;left:83px;top:21px;opacity:.5}.ground{position:absolute;left:130px;bottom:38px;width:470px;height:60px;background:#18313e15;border-radius:50%;filter:blur(26px);transition:all .8s var(--ease)}
.person{position:absolute;left:0;top:0;width:var(--w);height:var(--h);transform:translate3d(var(--x),var(--y),var(--z)) rotateY(var(--ry)) rotateZ(var(--rz));border-radius:22px;background:#203743;overflow:hidden;box-shadow:0 20px 40px -20px #18313e70,0 0 0 1px #ffffffd9,inset 0 0 0 1px #ffffff80;transition:transform .62s var(--ease),width .62s var(--ease),height .62s var(--ease),box-shadow .4s,border-radius .6s;will-change:transform;z-index:var(--order)}.person.active{box-shadow:0 25px 48px -19px #18313e70,0 0 0 3px var(--pink);border-radius:26px}.portrait{width:100%;height:100%;overflow:hidden;position:relative;transition:filter .5s;filter:saturate(.78)}.active .portrait{filter:saturate(1)}.human .portrait img{position:absolute;max-width:none;width:300%;height:100%;left:calc(var(--person)*-100%);object-fit:cover;transition:scale 3s ease-out;scale:1}.human.active .portrait img{scale:1.035;transform-origin:calc((var(--person) + .5)*100%/3) 45%}.spark-poster,.spark-video{position:absolute;width:100%;height:100%;object-fit:cover;object-position:50% 36%}.spark-poster{background:radial-gradient(ellipse at 50% 35%,#344c5e,#172731 90%)}.spark-video{opacity:0;transition:opacity .25s}.spark-video.ready{opacity:1}.tile-foot{z-index:3;position:absolute;bottom:0;left:0;right:0;padding:35px 13px 13px;background:linear-gradient(transparent,#071820ab);display:flex;align-items:center;justify-content:space-between;color:white;font-size:12px;text-shadow:0 1px 10px #0003}.meter{display:flex;align-items:center;height:18px;gap:3px;opacity:0;transition:opacity .3s}.meter i{display:block;width:3px;height:50%;background:var(--pink);border-radius:3px}.active .meter{opacity:1}.active .meter i{animation:meter .8s ease-in-out infinite alternate}.meter i:nth-child(2){animation-delay:-.32s;height:90%}.meter i:nth-child(3){animation-delay:-.5s;height:70%}.meter i:nth-child(4){animation-delay:-.15s;height:40%}
/* Speech belongs to the active portrait; the bottom inset leaves its name visible. */
.dialogue{position:absolute;left:16px;right:16px;bottom:48px;padding:17px 18px 18px;background:rgba(255,255,255,.96);border:1px solid #ffffffc9;border-radius:17px;box-shadow:0 8px 25px #091d2724;z-index:2;opacity:1;transform:translateY(0);transition:opacity .16s ease,transform .22s var(--ease);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.dialogue:before{content:'';position:absolute;left:calc(50% - 6px);top:-5px;width:12px;height:12px;background:#fff;border-radius:3px 0 0 0;transform:rotate(45deg)}
.dialogue.out{opacity:0;transform:translateY(7px)}
.speaker-line{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.dialogue p{position:relative;font-size:17px;font-weight:500;line-height:1.35;margin:0;letter-spacing:-.35px;text-wrap:pretty}
.speech-progress{position:absolute;bottom:7px;left:18px;right:18px;height:2px;border-radius:2px;background:var(--pink);transform:scaleX(var(--progress,0));transform-origin:left;opacity:.85}

/* 01 — a composition with a lead actor and a supporting cast, not a grid. */
body[data-mode=director] .halo{transform:translate(15px,-35px)}body[data-mode=director] .halo-line{opacity:.7}body[data-mode=director] .ground{transform:translateY(-70px)}body[data-mode=director] .round-space,body[data-mode=director] .workboard{opacity:0;pointer-events:none;transform:scale(.85)}
/* 02 — faces at different depths around a common place to think. */
.round-space{position:absolute;left:218px;top:290px;width:298px;height:225px;transform-style:preserve-3d;transition:all .8s var(--ease);z-index:1}.table-edge,.table-top{position:absolute;inset:0;border-radius:50%;transform:rotateX(49deg) rotateZ(-11deg);box-shadow:0 18px 35px #18313e0b}.table-edge{transform:translateY(9px) rotateX(49deg) rotateZ(-11deg);background:#efd7e0}.table-top{background:linear-gradient(140deg,#fff 12%,#f6c7d8 120%);border:1px solid white;text-align:center;padding:39px 20px}.table-caption{font-size:8px;letter-spacing:1.6px;color:#886b7a}.table-title{font-family:Bricolage;font-size:25px;line-height:1.05;display:block;margin-top:11px;font-weight:500;letter-spacing:-.6px}.table-progress{display:flex;justify-content:center;gap:6px;margin-top:14px}.table-progress i{width:5px;height:5px;background:#d2b3c0;border-radius:50%}.table-progress i.on{background:var(--ink)}body[data-mode=roundtable] .halo-line{left:95px;top:210px;width:540px;height:310px;transform:rotate(-12deg);border-color:#c7b5be65}body[data-mode=roundtable] .halo-line.two{left:75px;top:194px;width:580px;height:342px;opacity:.5}body[data-mode=roundtable] .halo{inset:160px 40px 80px 80px;filter:blur(30px)}body[data-mode=roundtable] .ground{left:130px;bottom:105px}body[data-mode=roundtable] .workboard{opacity:0;pointer-events:none;transform:scale(.85)}
/* 03 — the ideas become the scene; people stay visibly connected to them. */
.workboard{position:absolute;left:192px;top:82px;width:440px;height:450px;border:1px solid #fff;border-radius:23px;background:linear-gradient(135deg,#fff,#fcf8fa);box-shadow:16px 24px 55px -20px #18313e24,8px 9px 0 #e9dfe54d;transform:rotateY(-14deg) rotateX(4deg) rotateZ(2deg);transition:opacity .6s,transform .8s var(--ease);overflow:hidden;z-index:1}.workboard:before{content:'';position:absolute;inset:0;background-image:radial-gradient(#18313e20 .75px,transparent .75px);background-size:17px 17px;mask-image:linear-gradient(transparent 10%,black 100%)}.board-nav{position:relative;display:flex;align-items:center;gap:9px;padding:20px 22px;border-bottom:1px solid #18313e0b;font-size:8px;letter-spacing:1px}.board-nav img{height:21px;width:18px}.board-count{margin-left:auto;color:var(--muted);font-size:10px;letter-spacing:0}.board-question{position:absolute;top:91px;left:30px;transition:opacity .4s,transform .6s var(--ease)}.board-question small,.board-result small{font-size:8px;letter-spacing:1.2px;color:var(--muted)}.board-question h2{font:500 31px/1.04 Bricolage;margin:12px 0 0;letter-spacing:-1px}.connections{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#bac5ca;stroke-width:1;stroke-dasharray:5 6;opacity:0;transition:opacity .5s}.note{position:absolute;padding:17px 19px;background:#fff;box-shadow:0 10px 20px -12px #18313e50;border:1px solid #18313e0b;border-radius:4px;opacity:0;transform:translateY(18px) rotate(-4deg) scale(.94);transition:opacity .4s,transform .7s var(--ease)}.note-one{left:25px;top:252px}.note-two{left:215px;top:235px;background:var(--rose);transform:translateY(20px) rotate(5deg) scale(.94)}.note-author{font-size:9px;color:var(--muted);display:block;margin-bottom:10px}.note strong{font:500 19px/1.15 Bricolage;letter-spacing:-.4px}.cursor{position:absolute;left:355px;top:340px;opacity:0;transform:translate(20px,10px);transition:opacity .3s,transform 1.2s var(--ease);display:flex;align-items:flex-end;z-index:3}.cursor svg{fill:var(--ink);stroke:#fff;stroke-width:1.5}.cursor span{font-size:8px;border-radius:4px;background:var(--ink);color:#fff;padding:4px 7px;margin:0 0 -8px -3px}.board-result{position:absolute;inset:100px 25px 50px;background:var(--pink);border:1px solid #fff;border-radius:12px;padding:35px;opacity:0;transform:translateY(15px) scale(.93);transition:opacity .6s,transform .8s var(--ease)}.board-result h3{font:500 37px/1.05 Bricolage;letter-spacing:-1.3px;margin:20px 0 27px}.board-result>div{font-size:11px;display:flex;gap:8px;align-items:center}.mini-check{background:var(--ink);color:#fff;border-radius:50%;width:20px;height:20px;display:grid;place-items:center}body[data-chapter=discuss] .note-one{opacity:1;transform:translateY(0) rotate(-4deg) scale(1)}body[data-chapter=discuss] .connections{opacity:1}.scene[data-beat="2"] .note-two{opacity:1;transform:translateY(0) rotate(5deg) scale(1)}.scene[data-beat="2"] .cursor{opacity:1;transform:translate(-28px,-4px)}body[data-chapter=align] .board-question,body[data-chapter=align] .note,body[data-chapter=align] .connections{opacity:0;transform:scale(.9)}body[data-chapter=align] .board-result{opacity:1;transform:translateY(0) scale(1)}body[data-mode=canvas] .halo{inset:150px 0 50px 60px;opacity:.6}body[data-mode=canvas] .halo-line{opacity:0}
.review-bar{position:fixed;z-index:60;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:30px;align-items:center;width:min(1120px,calc(100% - 40px));padding:13px 17px 13px 23px;background:#fffffff2;backdrop-filter:blur(20px);border:1px solid white;border-radius:18px;box-shadow:0 10px 45px -15px #18313e3b}.review-heading{min-width:220px}.review-heading>span{display:block;font-size:9px;letter-spacing:1.5px;color:var(--muted);margin-bottom:5px}.review-heading small{font-size:11px;white-space:nowrap}.directions{display:flex;gap:6px;margin:auto}.directions button{border:0;white-space:nowrap;background:transparent;padding:13px 15px;border-radius:11px;font-size:12px;min-height:44px;transition:background .2s}.directions button b{font-size:10px;font-weight:400;color:var(--muted);margin-right:7px}.directions button[aria-selected=true]{background:var(--ink);color:white}.directions button[aria-selected=true] b{color:var(--pink)}.review-actions{display:flex;gap:3px}.review-actions button{border:0;background:#f2f4f5;border-radius:50%;width:40px;height:40px;font-size:20px}.review-actions #pause{font-size:15px}
body.paused .meter i,body.paused .talk-dots i{animation-play-state:paused}body.resetting .scene{opacity:.12;translate:0 12px;transition:opacity .25s,translate .4s}body:not(.resetting) .scene{opacity:1;translate:0 0;transition:opacity .4s,translate .6s var(--ease)}
@keyframes meter{to{height:25%}}@keyframes words-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(min-width:1600px){main{min-height:calc(100svh - 200px)}.scene-wrap{height:750px}.scene{--scale:1.05}.headline-box{min-height:260px}}
@media(max-width:1150px){main{width:calc(100% - 48px);grid-template-columns:42% 58%}.copy{padding-left:5px;padding-right:8px}h1{font-size:48px}.scene{--scale:.8}.scene-wrap{height:600px}.review-heading{display:none}.headline-box{min-height:220px}.site-nav{width:calc(100% - 58px)}.session-chips{gap:7px}.session-chips button{padding:12px 13px;font-size:11px}.review-bar{width:auto;gap:16px}.directions button{padding:12px}}
@media(max-width:800px){main{display:flex;flex-direction:column;width:100%;padding:16px 20px 135px;min-height:0}.copy{width:100%;padding:0 5px;max-width:540px}.headline-box{min-height:170px}h1{font-size:48px}.chapters{margin:17px 0}.start-label{margin-top:12px}.scene-wrap{width:100%;height:580px;max-width:650px}.scene{--scale:.82}.site-nav{height:76px;width:calc(100% - 38px)}.brand{gap:12px}.brand img{height:43px;width:36px}.brand span{font-size:10px}.nav-links{gap:16px;font-size:11px}.nav-links span:not(.account){display:none}.review-bar{width:calc(100% - 20px);bottom:10px;padding:8px;gap:8px;flex-wrap:wrap;justify-content:center}.directions{gap:2px;flex:1;justify-content:center}.directions button{font-size:11px;padding:11px 9px}.directions button b{display:block;margin:0 0 4px}.review-actions{gap:2px}.review-actions button{width:34px;height:44px;background:transparent}.review-actions #pause{display:none}.session-chips button{font-size:12px}.mobile-break{display:block}}
@media(max-width:480px){.scene{--scale:.53}.scene-wrap{height:390px}.copy{padding:0}h1{font-size:43px}.headline-box{min-height:150px}.review-actions{display:none}.directions button{font-size:10px;flex:1}.scene-wrap{margin-top:20px}.session-chips{gap:6px}.session-chips button{font-size:10px;padding:11px 12px;min-height:40px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.spark-video{display:none}.speech-progress{display:none}}
/* Crop each person from the original triptych without stretching their face. */
.human .portrait img{width:auto;height:100%;left:50%;transform:translateX(calc((var(--person) + .5)*-100%/3));}


.round-space{top:235px} .scene-wrap{overflow:clip}

@media(max-height:800px) and (min-width:801px){main{padding-top:0;padding-bottom:5px}.copy{padding-bottom:10px}.headline-box{min-height:175px}h1{font-size:48px}.chapters{margin:16px 0}.start-label{margin-top:17px;margin-bottom:11px}.session-chips button{min-height:40px;padding-top:11px;padding-bottom:11px}}

body[data-mode=canvas] .round-space{opacity:0;pointer-events:none}

/* Recompose the portraits on phones instead of shrinking the speech to unreadable size. */
@media(max-width:800px){
 .scene{width:360px;height:490px}
 .scene-wrap{max-width:430px}
 .dialogue{left:12px;right:12px;bottom:38px;padding:13px 14px 16px;border-radius:14px}
 .dialogue p{font-size:15px;line-height:1.35;letter-spacing:-.25px}
 .speech-progress{left:14px;right:14px;bottom:7px}
 .person{border-radius:15px}.person.active{border-radius:22px}
 .tile-foot{font-size:10px;padding:28px 10px 10px}
 .active .tile-foot{font-size:12px}
 .halo,body[data-mode=director] .halo,body[data-mode=roundtable] .halo,body[data-mode=canvas] .halo{inset:45px -15px 30px 65px;transform:none}
 .halo-line,body[data-mode=roundtable] .halo-line{left:10px;top:40px;width:350px;height:380px;transform:none}
 .halo-line.two,body[data-mode=roundtable] .halo-line.two{left:-5px;top:25px;width:380px;height:410px}
 .ground,body[data-mode=director] .ground,body[data-mode=roundtable] .ground{left:60px;width:270px;bottom:40px;transform:none}
 .workboard,.round-space{display:none}
}