/* A fixed presentation canvas, uniformly fitted to the available screen. */
html,body{width:100%;height:100%;overflow:hidden}body{min-height:0}.app{position:absolute;left:50%;top:50%;width:1600px;height:900px;min-height:0;max-width:none;padding:18px 32px 10px;transform:translate(-50%,-50%) scale(var(--stage-scale,1));transform-origin:center;overflow:hidden}header{flex:0 0 70px}main{min-height:0;flex:1;padding:18px 0 12px;overflow:hidden}footer{flex:0 0 28px;font-size:12px;padding-top:8px}nav{display:flex;font-size:15px}.brand{font-size:25px}.brand>span{width:56px;height:66px;font-size:44px}.tools button{padding:10px 18px}.stage-watch{height:100%;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px}.watch-main{min-height:0;display:flex;flex-direction:column;gap:12px}.watch-head{flex:0 0 48px;margin:0}.watch-head h2{font-size:27px}.watch-head>.small{display:block}.video-shell{width:100%;height:0;min-height:0;flex:1;aspect-ratio:auto;max-height:none;border-radius:24px}.controls{flex:0 0 44px;margin:0;align-items:center;flex-wrap:nowrap}.controls button{font-size:15px;padding:8px 12px}.stage-side{display:flex;flex-direction:column;min-height:0;position:relative}.decision{border:0;margin:0;padding:0;flex:0 0 auto;animation:choices-enter .35s ease-out}.decision h2{font-size:25px;text-align:center;margin:4px 0 14px}.responses{display:flex;flex-direction:column;gap:10px}.response{padding:10px 15px;border-radius:17px;min-height:78px;background:linear-gradient(135deg,#222140ee,#111932ee);box-shadow:0 5px 18px #0003;transition:transform .18s,border-color .18s}.response:hover{transform:translateX(-5px)}.response strong{font-size:21px}.response small{font-size:12px;margin:0}.response span{display:none}.to-summary{width:100%;margin-top:12px;padding:10px;font-size:18px}.floating-host{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-top:12px;overflow:hidden}.floating-host img{min-height:0;max-height:100%;height:100%;width:220px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 0 20px #8660df30);animation:host-enter .45s ease-out}.speech{position:relative;flex:0 0 auto;background:#eee8ff;color:#211837;padding:12px 18px;border-radius:19px;margin:0 0 16px;font-size:18px;text-align:center;max-width:285px}.speech:after{content:'';position:absolute;bottom:-9px;left:50%;border:10px solid transparent;border-bottom:0;border-top-color:#eee8ff}.host-pause{position:absolute;bottom:8px;left:0;right:0;margin:auto;width:max-content;background:#111934ed;font-size:14px;padding:7px 15px;backdrop-filter:blur(10px)}.intro,.setup{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px}.host{max-width:300px;border:0;box-shadow:none;background:none;border-radius:0;align-self:end}.host img{aspect-ratio:auto;height:570px;max-height:none;width:100%;object-fit:contain;object-position:bottom}.host video{height:570px;max-height:none;border-radius:28px}.host button{border-radius:14px;margin-top:10px}.card-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.card img{aspect-ratio:3/4}.card strong{font-size:21px}.setup h1{font-size:50px}.intro h1{font-size:65px}.intro-copy>p{font-size:23px}.intro .host{align-self:center}.summary-stage{height:100%;display:flex;flex-direction:column;gap:12px}.summary-host{height:100px;flex:0 0 100px;justify-content:space-between}.summary-host h1{font-size:34px;margin:5px 0}.summary-host h1 br{display:none}.summary-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0;flex:1;min-height:0}.result-card{display:flex;flex-direction:column}.result-card img{height:150px;aspect-ratio:auto;object-fit:cover}.result-card>div{padding:12px 18px;display:flex;flex-direction:column;flex:1}.result-card h3{font-size:22px;margin:5px 0}.result-card p{font-size:16px;line-height:1.4;margin:5px 0 10px}.result-card button{margin-top:auto;padding:7px}.discussion{padding:12px 20px}.discussion h3{font-size:22px;margin:0}.discussion p{font-size:17px;margin:4px 0}.summary-actions{margin:0;gap:12px}.guide-summary{align-self:flex-start;padding:6px 15px;font-size:15px}.summary-host img{height:100px}.summary-actions button{padding:8px 18px}dialog{max-height:85vh;overflow:auto}footer{flex-direction:row}.setup .host{display:block}.small{font-size:14px}@keyframes choices-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes host-enter{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.decision,.floating-host img{animation:none}.response{transition:none}}
/* Presenter overlaps the scene edge while controls remain on top. */
.stage-side{z-index:3}.floating-host{overflow:visible}.floating-host img{width:300px;max-width:none;transform-origin:center bottom;transform:translateX(95px) scale(1.12);pointer-events:none;animation:presenter-rise .42s ease-out}.speech{z-index:5}.host-pause{z-index:6}.decision{position:relative;z-index:7}.controls{position:relative;z-index:8}.setup .host img{transform:translateX(22px) scale(1.08);transform-origin:bottom;pointer-events:none}.intro .host{overflow:visible;max-width:340px}.intro .host video{width:340px;height:610px;aspect-ratio:400/712;object-fit:contain;border-radius:0;background:transparent}.intro .host button{position:relative;z-index:2}.response:nth-child(1){animation:response-in .22s ease-out both}.response:nth-child(2){animation:response-in .28s ease-out both}.response:nth-child(3){animation:response-in .34s ease-out both}.card{transition:transform .2s,box-shadow .2s}.card.available:hover{transform:translateY(-7px);box-shadow:0 8px 25px #9864ed40}.video-shell{animation:scene-in .28s ease-out}::view-transition-old(root){animation:stage-out .16s ease-in both}::view-transition-new(root){animation:stage-in .24s ease-out both}@keyframes stage-out{to{opacity:0;transform:translateY(-8px)}}@keyframes stage-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes scene-in{from{opacity:.3;transform:scale(.992)}to{opacity:1;transform:none}}@keyframes response-in{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}@keyframes presenter-rise{from{opacity:0;transform:translate(95px,22px) scale(1.12)}to{opacity:1;transform:translateX(95px) scale(1.12)}}@media(prefers-reduced-motion:reduce){.response,.floating-host img,.video-shell{animation:none}.card{transition:none}::view-transition-old(root),::view-transition-new(root){animation:none}}

.moving-host{overflow:visible;align-self:end;padding-bottom:10px}.moving-host video{background:transparent;border-radius:0;width:330px;height:590px;object-fit:contain;max-width:none;transform:translateX(15px);filter:drop-shadow(0 0 16px #a879ee25)}.moving-host button{background:#4d2880;border:1px solid #aa80e6}.moving-host small{display:block;text-align:center;font-size:14px;color:#b8bdd7;margin-top:5px}

/* Presenter occupies an independent foreground layer; choices never resize it. */
.stage-side{pointer-events:none;z-index:12}
.floating-host{display:block;height:100%;flex:none;padding:0;overflow:visible}
.floating-host img{position:absolute;bottom:0;left:40px;width:340px;height:610px;max-height:none;min-height:610px;transform:none;object-fit:contain;object-position:bottom;animation:none}
.floating-host .speech{position:absolute;top:0;left:8px;width:270px;margin:0;pointer-events:auto}
.floating-host .host-pause{pointer-events:auto;left:40px;right:auto;bottom:8px}
.video-shell{position:relative;isolation:isolate}
.video-shell .decision{position:absolute;z-index:5;bottom:24px;left:90px;right:24px;padding:22px;border:1px solid #bc9aff99;border-radius:24px;background:linear-gradient(135deg,#17152deb,#131f3aeb);backdrop-filter:blur(18px);box-shadow:0 18px 70px #05041699,0 0 28px #a365ff33;animation:layer-enter .38s cubic-bezier(.16,1,.3,1) both}
.video-shell .decision[hidden]{display:none}
.video-shell .decision h2{text-align:right;margin:0 0 16px;font-size:25px}
.video-shell .responses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.video-shell .response{min-height:116px;padding:14px;text-align:right;animation:layer-enter .38s both}
.video-shell .response:nth-child(2){animation-delay:.05s}
.video-shell .response:nth-child(3){animation-delay:.1s}
.video-shell .response strong{font-size:23px;display:block;margin:7px 0}
.video-shell .response span{display:block;font-size:15px;line-height:1.4;color:#d4cfe7}
.video-shell .response:hover{transform:translateY(-5px);border-color:#d7bcff;box-shadow:0 8px 25px #9451ff44}
.video-shell .to-summary{width:auto;display:block;margin:16px auto 0 0;padding:9px 24px;font-size:18px}
@keyframes layer-enter{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.video-shell .decision,.video-shell .response{animation:none}}

/* Optional wider composition: all playback controls float above the scene. */
.stage-watch.cinema{grid-template-columns:minmax(0,1fr) 260px;gap:12px}
.cinema .watch-main{position:relative;display:block;isolation:isolate}
.cinema .video-shell{height:100%;width:100%;border-radius:26px;max-height:none}
.cinema .video-shell video{object-fit:cover;object-position:center}
.cinema .watch-head{position:absolute;right:24px;top:18px;z-index:6;max-width:390px;pointer-events:none;text-shadow:0 2px 10px #000}
.cinema .watch-head .small{display:none}
.cinema .watch-head h2{font-size:25px}
.cinema .video-shell:after{content:'';position:absolute;inset:0 0 auto;height:120px;background:linear-gradient(#060b25d9,transparent);pointer-events:none;z-index:1}
.cinema .controls{position:absolute;top:18px;left:18px;z-index:8;display:flex;flex-direction:column;align-items:flex-start;gap:8px;direction:ltr}
.cinema .controls>div{display:flex;gap:6px;direction:rtl}
.cinema .controls button{background:#11182bd9;backdrop-filter:blur(12px);padding:7px 11px;font-size:14px;direction:rtl}
.cinema .controls #reveal-button{border-color:#b48cf0;background:#573295e8}
.cinema .floating-host img{left:20px}
.cinema .floating-host .speech{left:0;width:250px}
.cinema .video-shell .decision{left:110px;bottom:22px;right:22px}

.floating-host .idle-host{position:absolute;bottom:0;left:40px;width:340px;height:610px;max-height:none;object-fit:contain;object-position:bottom;transform:scale(1.1);transform-origin:bottom center;background:transparent;pointer-events:none;filter:drop-shadow(0 0 20px #8660df30)}
.cinema .floating-host .idle-host{left:20px}
.summary-host .idle-host{height:100px;width:85px;object-fit:contain;background:transparent}

.intro-presenter .idle-host{background:transparent;object-fit:contain;transform:scale(1.1);transform-origin:bottom center;pointer-events:none}