:root {
	--purple:#7c3aed;
	--purple-dark:#5b21b6;
	--pink:#ec4899;
	--navy:#172033;
	--ink:#263247;
	--muted:#667085;
	--paper:#ffffff;
	--line:#e6e8ef;
	--red:#dc4c5b;
	--blue:#397dcc;
	--yellow:#d58b16;
	--green:#24956d;
}
@font-face { font-display:swap; font-family:Poppins; font-style:normal; font-weight:400; src:url('../fonts/poppins-v24-latin_latin-ext-regular.woff2') format('woff2'); }
@font-face { font-display:swap; font-family:Poppins; font-style:normal; font-weight:600; src:url('../fonts/poppins-v24-latin_latin-ext-600.woff2') format('woff2'); }
@font-face { font-display:swap; font-family:Poppins; font-style:normal; font-weight:800; src:url('../fonts/poppins-v24-latin_latin-ext-800.woff2') format('woff2'); }
* { box-sizing:border-box; }
html { background:#f1f3fb; }
body { min-width:320px; margin:0; color:var(--ink); background:radial-gradient(circle at 15% 10%,#eee9ff 0,transparent 28rem),#f4f6fc; font-family:Poppins,sans-serif; }
button,a { font:inherit; }
.demo-header { display:flex; align-items:center; justify-content:space-between; width:min(1280px,calc(100% - 2rem)); margin:auto; padding:1.2rem 0; }
.demo-wordmark { color:var(--purple); font-size:1.35rem; font-weight:800; text-decoration:none; }
.demo-back { color:var(--muted); font-size:.72rem; font-weight:600; text-decoration:none; }
.demo-back:hover { color:var(--purple); }
.demo-page { width:min(1280px,calc(100% - 2rem)); margin:auto; padding:1rem 0 3rem; }
.demo-intro { margin:0 auto 1.3rem; text-align:center; }
.demo-intro > span,.scene-kicker { color:var(--purple); font-size:.65rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.demo-intro h1 { margin:.25rem 0; color:var(--navy); font-size:clamp(1.8rem,4vw,3rem); line-height:1.12; }
.demo-intro p { margin:.3rem 0 0; color:var(--muted); font-size:.8rem; }
.demo-player { overflow:hidden; border:1px solid #d9dced; border-radius:1.6rem; background:#fff; box-shadow:0 28px 80px rgba(37,30,80,.16); }
.demo-stage { position:relative; aspect-ratio:16/9; overflow:hidden; background:#f8f7fc; isolation:isolate; }
.demo-scene { position:absolute; inset:0; overflow:hidden; opacity:0; visibility:hidden; transform:scale(1.025); transition:opacity .55s ease,transform .7s ease,visibility 0s .7s; }
.demo-scene.is-active { opacity:1; visibility:visible; transform:scale(1); transition-delay:0s; }
.scene-caption { position:absolute; right:2rem; bottom:1.4rem; left:2rem; z-index:20; display:flex; align-items:center; gap:.8rem; color:white; pointer-events:none; }
.scene-caption::before { content:""; position:absolute; inset:-.65rem -1rem; z-index:-1; border-radius:.8rem; background:linear-gradient(90deg,rgba(23,32,51,.92),rgba(23,32,51,.55),transparent); }
.scene-caption span { display:grid; place-items:center; flex:0 0 2rem; height:2rem; border-radius:.55rem; background:var(--purple); font-size:.62rem; font-weight:800; }
.scene-caption p { margin:0; font-size:.72rem; font-weight:600; }
.demo-controls { display:flex; align-items:center; gap:.85rem; min-height:4rem; padding:.65rem 1rem; background:white; }
.control-button { display:grid; place-items:center; flex:0 0 2.5rem; height:2.5rem; border:0; border-radius:50%; background:var(--navy); color:white; cursor:pointer; }
.control-button:hover { background:var(--purple); }
.control-button span { font-size:.75rem; font-weight:800; }
.demo-progress { position:relative; flex:1; height:.4rem; overflow:hidden; border-radius:999px; background:#e9e7f1; }
.demo-progress i { position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg,var(--purple),var(--pink)); transform:scaleX(0); transform-origin:left; }
.scene-dots { display:flex; gap:.35rem; }
.scene-dots button { width:.55rem; height:.55rem; padding:0; border:0; border-radius:999px; background:#d5d8e2; cursor:pointer; transition:.2s; }
.scene-dots button.is-active { width:1.4rem; background:var(--purple); }
.demo-time { min-width:5.3rem; color:var(--muted); font-size:.62rem; text-align:right; }
.demo-note { margin:.8rem 0 0; color:#7d8597; font-size:.62rem; text-align:center; }
.demo-embed { overflow:hidden; background:transparent; }
.demo-embed .demo-page { width:100%; padding:0; }
.demo-embed .demo-player { border:0; border-radius:0; box-shadow:none; }

/* Shared illustrated product elements */
.scene-message h2,.create-copy h2,.join-heading h2,.play-heading h2,.results-copy h2,.finale-content h2 { margin:.35rem 0; color:var(--navy); font-size:clamp(1.4rem,3vw,2.7rem); line-height:1.12; }
.scene-message p,.create-copy p,.join-heading p,.results-copy p,.finale-content p { color:var(--muted); font-size:clamp(.62rem,1.15vw,.88rem); line-height:1.65; }
.projector { border:.55rem solid var(--navy); border-radius:1rem; background:white; box-shadow:0 20px 45px rgba(23,32,51,.18); }
.phone { position:relative; width:8rem; height:14rem; padding:.5rem; border:.45rem solid var(--navy); border-radius:1.35rem; background:#fff; box-shadow:0 18px 35px rgba(23,32,51,.2); }
.phone::before { content:""; position:absolute; top:.25rem; left:50%; width:2.4rem; height:.32rem; border-radius:999px; background:var(--navy); transform:translateX(-50%); }

/* Scene 1 */
.scene-problem { background:linear-gradient(180deg,#dfe9ff 0 64%,#f2c89d 64%); }
.scene-sky-shape { position:absolute; top:-16%; right:-5%; width:40%; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.42); }
.lecture-board { position:absolute; top:12%; left:8%; width:46%; height:40%; padding:1.5rem; border:.5rem solid #aa7448; border-radius:.5rem; background:#315b50; color:#e8f7ee; box-shadow:0 12px 0 rgba(105,65,34,.12); transform-origin:left bottom; }
.lecture-board > span { font-size:clamp(.8rem,2vw,1.7rem); font-weight:800; letter-spacing:.08em; }
.board-lines { margin-top:1.2rem; }
.board-lines i { display:block; width:72%; height:.35rem; margin:.65rem 0; border-radius:1rem; background:rgba(255,255,255,.48); }
.board-lines i:nth-child(2) { width:55%; }.board-lines i:nth-child(3) { width:63%; }
.css-person { position:absolute; width:7rem; height:14rem; }
.person-head { position:absolute; top:0; left:2rem; width:3.1rem; height:3.3rem; border-radius:48% 48% 45% 45%; background:#efb98d; box-shadow:inset 0 .55rem #54382f; }
.person-body { position:absolute; top:3rem; left:1.1rem; width:5rem; height:7.4rem; border-radius:2rem 2rem .7rem .7rem; background:var(--purple); }
.person-arm { position:absolute; top:4rem; right:-.4rem; width:4.5rem; height:1.2rem; border-radius:1rem; background:#efb98d; transform:rotate(-25deg); transform-origin:left; }
.lecturer { top:30%; left:48%; transform:scale(.85); }
.audience { position:absolute; right:4%; bottom:10%; left:6%; display:flex; align-items:flex-end; justify-content:space-between; padding-left:42%; }
.audience-person { position:relative; width:8rem; height:8rem; border-radius:4rem 4rem 1rem 1rem; background:#5a83c8; box-shadow:0 12px 25px rgba(69,55,44,.15); }
.audience-person > i { position:absolute; top:-2.2rem; left:2.25rem; width:3.5rem; height:3.8rem; border-radius:50%; background:#d99c73; box-shadow:inset 0 .6rem #372b28; }
.audience-person > b { position:absolute; top:.8rem; left:2.2rem; width:3.5rem; height:1rem; border-radius:1rem; background:rgba(255,255,255,.18); }
.audience-person:nth-child(2) { height:6.8rem; background:#e0a532; transform:scale(.86); }.audience-person:nth-child(3) { background:#7b5abd; transform:scale(.95); }.audience-person:nth-child(4) { height:7.2rem; background:#299477; transform:scale(.82); }
.audience-person span { position:absolute; top:-4rem; right:-.6rem; display:grid; place-items:center; width:2.3rem; height:2.3rem; border-radius:50%; background:white; color:var(--purple); font-weight:800; }
.sleepy span { animation:float-z 1.8s ease-in-out infinite; }
.problem-message { position:absolute; top:11%; right:6%; width:34%; padding:1rem; opacity:0; transform:translateY(1rem); }
.problem-message small { color:var(--pink); font-weight:800; }
.scene-problem.is-active .problem-message { animation:fade-up .7s 1.1s forwards; }
.scene-problem.is-active .lecturer .person-arm { animation:teach 1.3s ease-in-out 2 alternate; }

/* Scene 2 */
.scene-create { display:grid; grid-template-columns:38% 62%; align-items:center; padding:5% 5% 9%; background:linear-gradient(135deg,#f5f1ff,#fff 55%,#eef5ff); }
.create-copy { position:relative; z-index:2; padding-right:2rem; opacity:0; transform:translateX(-2rem); }
.scene-create.is-active .create-copy { animation:slide-right .65s .2s forwards; }
.mini-feature { display:inline-flex; align-items:center; gap:.4rem; margin:.65rem .4rem 0 0; padding:.55rem .65rem; border:1px solid #ddd6fe; border-radius:.7rem; background:white; }
.mini-feature b { color:var(--purple); font-size:.8rem; }.mini-feature span { color:var(--muted); font-size:.55rem; }
.laptop { position:relative; width:100%; opacity:0; transform:translateY(2rem) rotate(1deg); }
.scene-create.is-active .laptop { animation:fade-up .7s .45s forwards; }
.laptop-screen { position:relative; aspect-ratio:16/10; overflow:hidden; border:.7rem solid var(--navy); border-radius:1rem .95rem .35rem .35rem; background:#f2f5ff; }
.laptop-base { width:110%; height:1rem; margin-left:-5%; border-radius:.2rem .2rem 1rem 1rem; background:#aab2c4; box-shadow:0 .45rem 0 #7b8497; }
.fake-browser { display:flex; align-items:center; gap:.35rem; height:10%; padding:0 .6rem; background:white; border-bottom:1px solid #e1e4ed; }
.fake-browser i { width:.45rem; height:.45rem; border-radius:50%; background:#f87171; }.fake-browser i:nth-child(2){background:#fbbf24}.fake-browser i:nth-child(3){background:#34d399}
.fake-browser span { margin-left:.5rem; padding:.22rem .8rem; border-radius:1rem; background:#f1f3f8; color:#8a91a0; font-size:.48rem; }
.fake-editor { padding:4% 5%; }
.fake-editor small { color:var(--purple); font-size:.5rem; font-weight:800; }.fake-editor h3 { margin:.35rem 0 .7rem; color:var(--navy); font-size:clamp(.7rem,1.5vw,1.25rem); }
.fake-answers { display:grid; grid-template-columns:1fr 1fr; gap:.45rem; }
.fake-answers span { display:flex; justify-content:space-between; padding:.65rem; border:2px solid transparent; border-radius:.6rem; background:white; color:var(--ink); font-size:clamp(.48rem,.85vw,.7rem); box-shadow:0 4px 12px rgba(25,35,60,.05); }
.fake-answers .correct { border-color:#34d399; background:#ecfdf5; }.fake-answers b { color:#059669; }
.fake-editor button { float:right; margin-top:.7rem; padding:.5rem .65rem; border:0; border-radius:.55rem; background:var(--purple); color:white; font-size:.55rem; font-weight:700; }
.fake-cursor { position:absolute; right:9%; bottom:17%; width:1rem; height:1rem; clip-path:polygon(0 0,100% 65%,55% 70%,38% 100%); background:var(--navy); opacity:0; }
.scene-create.is-active .fake-cursor { animation:cursor-save 2.4s 1.1s forwards; }

/* Scene 3 */
.scene-join { padding:3% 5% 8%; background:linear-gradient(150deg,#edf3ff,#f9f5ff); }
.join-heading { position:absolute; top:6%; left:5%; width:34%; opacity:0; transform:translateX(-1rem); }
.scene-join.is-active .join-heading { animation:slide-right .6s .15s forwards; }
.lobby-projector { position:absolute; top:7%; right:5%; width:56%; height:62%; opacity:0; transform:scale(.94); }
.scene-join.is-active .lobby-projector { animation:pop-in .65s .35s forwards; }
.projector-top { display:flex; justify-content:space-between; padding:.8rem 1rem; border-bottom:1px solid var(--line); color:var(--ink); font-size:clamp(.5rem,1vw,.75rem); }
.projector-top span { color:var(--muted); }.projector-top strong { display:inline-grid; place-items:center; min-width:1.6rem; height:1.6rem; margin-left:.25rem; border-radius:50%; background:var(--purple); color:white; }
.lobby-content { display:grid; grid-template-columns:1fr 10rem; align-items:center; gap:1rem; height:calc(100% - 3rem); padding:1rem 2rem; text-align:center; }
.lobby-content > div:first-child { display:flex; flex-direction:column; }.lobby-content small { color:var(--muted); font-size:.55rem; font-weight:700; }.lobby-content strong { color:var(--navy); font-size:clamp(1.8rem,5vw,4.2rem); letter-spacing:.12em; }
.fake-qr { display:grid; grid-template-columns:repeat(3,1fr); gap:.25rem; aspect-ratio:1; padding:.55rem; border:.4rem solid white; background:#fff; box-shadow:0 4px 20px rgba(23,32,51,.14); }
.fake-qr i { background:var(--navy); }.fake-qr i:nth-child(2),.fake-qr i:nth-child(4),.fake-qr i:nth-child(9){border-radius:50%;background:white;box-shadow:inset 0 0 0 .25rem var(--navy)}
.phone-row { position:absolute; right:9%; bottom:-2.2rem; display:flex; align-items:flex-end; gap:1.2rem; }
.join-phone { width:7rem; height:12rem; opacity:0; transform:translateY(5rem); }.join-phone.second{height:11rem}.join-phone.third{height:10.5rem}
.scene-join.is-active .join-phone { animation:phone-rise .55s .8s forwards; }.scene-join.is-active .join-phone.second{animation-delay:1.15s}.scene-join.is-active .join-phone.third{animation-delay:1.45s}
.join-phone > div { display:flex; flex-direction:column; gap:.45rem; padding:1.2rem .4rem; text-align:center; }.join-phone small{color:var(--muted);font-size:.42rem}.join-phone b{padding:.5rem;border:1px solid var(--line);border-radius:.5rem;font-size:.58rem}.join-phone span{padding:.45rem;border-radius:.5rem;background:var(--purple);color:white;font-size:.48rem;font-weight:700}

/* Scene 4 */
.scene-play { padding:4% 5% 8%; background:#eaf0ff; }
.play-heading { position:absolute; top:5%; left:5%; z-index:2; width:42%; }
.play-heading h2 { font-size:clamp(1.2rem,2.4vw,2.2rem); }
.play-heading h2 span { display:block; }
.quiz-projector { position:absolute; top:7%; right:5%; width:52%; height:70%; padding:1.2rem; text-align:center; opacity:0; transform:translateX(2rem); }
.scene-play.is-active .quiz-projector { animation:slide-left .65s .2s forwards; }
.quiz-projector > small { color:var(--purple); font-size:.5rem; font-weight:800; }.quiz-projector h3 { margin:.6rem 2rem; color:var(--navy); font-size:clamp(.75rem,1.55vw,1.3rem); }
.timer-ring { position:absolute; top:.8rem; right:.8rem; display:flex; align-items:baseline; justify-content:center; width:3.2rem; height:3.2rem; padding-top:.55rem; border:.25rem solid #ddd6fe; border-top-color:var(--purple); border-radius:50%; color:var(--navy); animation:timer-spin 4s linear infinite; }
.timer-ring b,.timer-ring small { animation:timer-unspin 4s linear infinite; }.timer-ring b{font-size:.9rem}.timer-ring small{font-size:.45rem}
.projector-answers { display:grid; grid-template-columns:1fr 1fr; gap:.45rem; margin-top:1rem; }
.projector-answers span { padding:.75rem; border-radius:.6rem; color:white; font-size:clamp(.48rem,.9vw,.7rem); font-weight:700; }.projector-answers span:nth-child(1){background:var(--red)}.projector-answers span:nth-child(2){background:var(--blue)}.projector-answers span:nth-child(3){background:var(--yellow)}.projector-answers span:nth-child(4){background:var(--green)}
.answering-phone { position:absolute; bottom:-1rem; left:14%; width:10rem; height:18rem; opacity:0; transform:translateY(5rem) rotate(-3deg); }
.scene-play.is-active .answering-phone { animation:phone-rise-tilted .65s .45s forwards; }
.phone-question { padding:1.4rem .3rem; text-align:center; }.phone-question small{color:var(--muted);font-size:.5rem}.phone-question>div{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.7rem}.phone-question button{aspect-ratio:1;border:0;border-radius:.6rem;background:var(--red)}.phone-question button:nth-child(2){background:var(--blue)}.phone-question button:nth-child(3){background:var(--yellow)}.phone-question button:nth-child(4){background:var(--green)}
.phone-question .is-tapped { animation:tap-answer .7s 1.3s forwards; }
.answer-confirmed { display:block; margin-top:.8rem; padding:.5rem; border-radius:.5rem; background:#dcfce7; color:#166534; font-size:.46rem; font-weight:700; opacity:0; }
.scene-play.is-active .answer-confirmed { animation:fade-up .4s 1.8s forwards; }
.response-pill { position:absolute; bottom:13%; left:33%; display:grid; grid-template-columns:1.4rem auto; padding:.6rem .8rem; border-radius:.8rem; background:white; box-shadow:0 10px 25px rgba(23,32,51,.15); opacity:0; transform:scale(.7); }
.response-pill i{grid-row:1/3;width:1rem;height:1rem;margin:.15rem .4rem 0 0;border-radius:50%;background:#34d399}.response-pill strong{color:var(--navy);font-size:.68rem}.response-pill span{color:var(--muted);font-size:.46rem}
.scene-play.is-active .response-pill { animation:pop-in .45s 2.25s forwards; }

/* Scene 5 */
.scene-results { padding:5% 5% 8%; background:linear-gradient(135deg,#fff7e5,#fff 55%,#f0ecff); }
.results-copy { width:42%; opacity:0; transform:translateX(-2rem); }.scene-results.is-active .results-copy{animation:slide-right .6s .2s forwards}
.podium { position:absolute; right:6%; bottom:12%; display:flex; align-items:flex-end; width:48%; height:68%; }
.podium-place { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; width:33.333%; border-radius:.8rem .8rem 0 0; color:white; opacity:0; transform:translateY(4rem); }
.podium-place i { position:absolute; top:-3.2rem; display:grid; place-items:center; width:3rem; height:3rem; border:.3rem solid white; border-radius:50%; background:#5a83c8; color:white; font-style:normal; font-weight:800; box-shadow:0 5px 18px rgba(23,32,51,.15); }
.podium-place b { font-size:clamp(1.5rem,3vw,2.8rem); }.podium-place span{margin:.2rem 0 .8rem;font-size:.65rem;font-weight:700}
.first-place{height:65%;background:var(--purple)}.second-place{height:48%;background:#64748b}.third-place{height:38%;background:#c46b38}.first-place i{background:var(--pink)}.third-place i{background:#299477}
.first-place em { position:absolute; top:-5rem; color:#fbbf24; font-size:1.8rem; font-style:normal; animation:star-bounce 1.2s infinite; }
.scene-results.is-active .second-place{animation:podium-up .5s .75s forwards}.scene-results.is-active .first-place{animation:podium-up .5s .95s forwards}.scene-results.is-active .third-place{animation:podium-up .5s 1.15s forwards}
.report-card-demo { position:absolute; bottom:14%; left:5%; display:flex; align-items:center; justify-content:space-between; width:39%; padding:.8rem 1rem; border:1px solid var(--line); border-radius:.9rem; background:white; box-shadow:0 12px 30px rgba(23,32,51,.1); opacity:0; transform:translateY(1rem); }
.scene-results.is-active .report-card-demo { animation:fade-up .5s 1.5s forwards; }
.report-card-demo>div{display:flex;flex-direction:column}.report-card-demo small{color:var(--pink);font-size:.45rem;font-weight:800}.report-card-demo strong{color:var(--navy);font-size:.62rem}.report-card-demo>span{min-width:32%;color:#991b1b;font-size:.48rem}.report-card-demo span i{display:block;width:100%;height:.35rem;margin-bottom:.3rem;border-radius:1rem;background:linear-gradient(90deg,var(--red) 38%,#fee2e2 38%)}

/* Scene 6 */
.scene-finale { display:grid; place-items:center; padding:5% 8% 9%; background:var(--navy); }
.finale-content { position:relative; z-index:2; width:62%; color:white; text-align:center; opacity:0; transform:scale(.9); }
.scene-finale.is-active .finale-content { animation:pop-in .65s .2s forwards; }
.finale-wordmark { color:#c4b5fd; font-size:clamp(1rem,2vw,1.5rem); font-weight:800; }.finale-content h2{color:white;font-size:clamp(1.7rem,4vw,3.8rem)}.finale-content p{max-width:40rem;margin:.8rem auto;color:#c8d0e0}
.finale-actions { display:flex; justify-content:center; gap:.7rem; margin-top:1.2rem; }.finale-actions a,.finale-actions button{padding:.75rem 1rem;border:0;border-radius:.75rem;font-size:.65rem;font-weight:700;text-decoration:none;cursor:pointer}.finale-actions a{background:var(--pink);color:white;box-shadow:0 4px 0 #be185d}.finale-actions button{background:rgba(255,255,255,.1);color:white}
.finale-pin-card { position:absolute; right:5%; bottom:14%; display:grid; grid-template-columns:auto auto; gap:.2rem .5rem; padding:.7rem .85rem; border:1px solid rgba(255,255,255,.18); border-radius:.75rem; background:rgba(255,255,255,.08); color:white; opacity:0; transform:translateY(1rem) rotate(3deg); }.finale-pin-card small{grid-column:1/3;color:#aeb8cd;font-size:.38rem}.finale-pin-card b{color:#c4b5fd;font-size:.55rem}.finale-pin-card span{font-size:.6rem;font-weight:800;letter-spacing:.08em}
.scene-finale.is-active .finale-pin-card{animation:fade-up .5s 1.2s forwards}
.finale-burst { position:absolute; width:28rem; aspect-ratio:1; border:1px solid rgba(139,92,246,.28); border-radius:50%; }.finale-burst::before,.finale-burst::after{content:"";position:absolute;inset:15%;border:inherit;border-radius:inherit}.finale-burst::after{inset:32%}.finale-burst.one{top:-16rem;left:-8rem}.finale-burst.two{right:-10rem;bottom:-18rem}

@keyframes fade-up { to{opacity:1;transform:translateY(0)} }
@keyframes slide-right { to{opacity:1;transform:translateX(0)} }
@keyframes slide-left { to{opacity:1;transform:translateX(0)} }
@keyframes pop-in { 70%{opacity:1;transform:scale(1.035)}to{opacity:1;transform:scale(1)} }
@keyframes phone-rise { to{opacity:1;transform:translateY(0)} }
@keyframes phone-rise-tilted { to{opacity:1;transform:translateY(0) rotate(-3deg)} }
@keyframes podium-up { to{opacity:1;transform:translateY(0)} }
@keyframes teach { to{transform:rotate(-3deg)} }
@keyframes float-z { 50%{transform:translateY(-.5rem) scale(1.08)} }
@keyframes cursor-save { 0%{opacity:0;transform:translate(-7rem,-5rem)}20%{opacity:1}70%{opacity:1;transform:translate(0,0)}85%{transform:scale(.72)}100%{opacity:0;transform:scale(1)} }
@keyframes timer-spin { to{transform:rotate(360deg)} }
@keyframes timer-unspin { to{transform:rotate(-360deg)} }
@keyframes tap-answer { 50%{transform:scale(.86)}100%{outline:.25rem solid #c4b5fd;box-shadow:0 0 0 .2rem white} }
@keyframes star-bounce { 50%{transform:translateY(-.35rem) rotate(8deg)} }

@media(max-width:800px) {
	.demo-page,.demo-header { width:min(100% - 1rem,1280px); }
	.demo-player { border-radius:1rem; }
	.demo-stage { aspect-ratio:4/3; }
	.scene-caption { right:1rem; bottom:.8rem; left:1rem; }
	.scene-caption p { font-size:.58rem; }
	.lecture-board { left:4%; width:55%; }.lecturer{left:53%}.audience{right:2%;left:2%;padding-left:25%;}.audience-person{width:5rem;height:6rem}.audience-person>i{left:1.25rem}.problem-message{top:5%;right:2%;width:38%}
	.scene-create { grid-template-columns:1fr; align-content:start; padding:5% 5% 10%; }.create-copy{width:85%;padding:0}.create-copy p{display:none}.laptop{position:absolute;right:4%;bottom:12%;width:75%}
	.join-heading{top:4%;width:42%}.lobby-projector{top:20%;right:4%;width:73%;height:55%}.phone-row{right:5%;bottom:-2.5rem}.join-phone{width:5rem;height:9rem}.lobby-content{grid-template-columns:1fr 6rem;padding:.5rem}.fake-qr{gap:.15rem}
	.play-heading{width:52%}.quiz-projector{top:25%;right:3%;width:72%;height:52%;padding:.7rem}.answering-phone{left:6%;width:7rem;height:13rem}.response-pill{left:27%;bottom:11%}
	.results-copy{width:56%}.podium{right:2%;width:55%;height:62%}.report-card-demo{bottom:12%;left:3%;width:43%;padding:.6rem}
	.finale-content{width:88%}.finale-pin-card{display:none}
}
@media(max-width:520px) {
	.demo-header { padding:.8rem 0; }.demo-intro p{font-size:.68rem}.demo-controls{gap:.55rem}.scene-dots{display:none}.demo-time{font-size:.52rem}
	.demo-stage { aspect-ratio:3/4; }
	.scene-caption::before { background:rgba(23,32,51,.9); }
	.scene-problem .lecture-board{top:10%;width:70%;height:31%}.lecturer{top:28%;left:62%;transform:scale(.6)}.audience{padding-left:0;bottom:9%}.audience-person{width:22%;height:5rem}.audience-person>i{left:25%;width:2.7rem;height:2.9rem}.problem-message{top:42%;left:5%;width:90%;text-align:center}
	.scene-create{padding-top:8%}.create-copy{width:100%;text-align:center}.mini-feature{display:none}.laptop{right:5%;bottom:17%;width:90%}
	.join-heading{top:5%;left:5%;width:90%;text-align:center}.lobby-projector{top:25%;right:5%;width:90%;height:43%}.phone-row{right:8%;bottom:-.5rem}.join-phone{width:4.7rem}.join-phone.third{display:none}
	.play-heading{top:4%;width:90%;text-align:center}.quiz-projector{top:25%;right:4%;width:92%;height:42%}.answering-phone{bottom:0;left:10%;width:6.5rem;height:12rem}.response-pill{right:8%;bottom:17%;left:auto}
	.results-copy{top:5%;width:90%;text-align:center}.podium{right:5%;bottom:12%;width:90%;height:48%}.report-card-demo{top:35%;bottom:auto;left:10%;width:80%}
	.finale-content{width:100%}.finale-actions{flex-direction:column;align-items:center}.finale-actions a,.finale-actions button{width:12rem}
}
@media(prefers-reduced-motion:reduce) {
	*,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}