:root{--blue:#2a8bd6;--blue-dark:#0b4a8a;--pastel:#d6ecff;--cream:#f0f8ff;--ink:#0f2a44;--green:#3fb950;--yellow:#f2b705}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;background:#000;overflow:hidden;font-family:"Segoe UI","Trebuchet MS",Arial,sans-serif;color:var(--ink)}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;background:var(--cream);overflow:hidden}
.hidden{display:none!important}
#slide,.sl{position:absolute;inset:0}
.sl{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 120px;
  background:radial-gradient(circle at 30% 20%,#fff 0,var(--pastel) 55%,#a9d4f5 100%)}
.sl.q-hasimg{justify-content:flex-start;padding-top:50px}
.bgimg{position:absolute;inset:0;background-size:cover;background-position:center}
.shade{position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,25,60,.85))}
.sl>.big,.sl>.sub,.sl>.qtext,.sl>.emoji,.sl>.qimg{position:relative}
.big{font-size:84px;font-weight:800;line-height:1.15;color:var(--blue-dark)}
.sub{font-size:48px;margin-top:24px;color:var(--ink)}
.module-tag{position:absolute;top:30px;left:50px;font-size:34px;font-weight:700;color:var(--blue-dark);opacity:.8}
.qnum{position:absolute;top:30px;right:60px;font-size:34px;font-weight:700;color:var(--blue-dark);opacity:.8}
.qtext{font-size:80px;font-weight:800;line-height:1.2;color:var(--blue-dark);max-width:1500px}
.qtext.small{font-size:62px}
.emoji{font-size:230px;letter-spacing:30px;margin-top:40px;line-height:1.2}
.qimg{width:1500px;height:640px;margin-top:30px;border-radius:28px;border:8px solid var(--blue);background-size:contain;background-repeat:no-repeat;image-rendering:pixelated;background-position:center;background-color:var(--pastel)}
.zoomwrap{position:absolute;inset:0;overflow:hidden;background:var(--pastel)}
.zoomimg{position:absolute;left:0;top:0;width:1920px;height:1080px;background-size:cover;background-position:center;transform-origin:0 0}
.zoomwrap.fallback .zoomimg{background:repeating-linear-gradient(45deg,#a9d4f5 0 60px,#7fbbea 60px 120px)}
.zoomq{position:absolute;top:30px;left:0;right:0;text-align:center;font-size:76px;font-weight:800;color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.7)}
.ans{position:absolute;left:0;right:0;bottom:70px;text-align:center;padding:0 140px;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.85)}
.ans .a{font-size:112px;font-weight:800;line-height:1.1}
.ans .a.long{font-size:64px}
.ans .n{font-size:50px;margin-top:14px;font-weight:600}
.sl.ansfb{background:linear-gradient(135deg,var(--blue),var(--blue-dark))}
.sl.ansfb .ans{position:relative;bottom:auto}
#timer{position:absolute;right:60px;bottom:50px;width:230px;height:230px;z-index:5;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
#timer svg{width:100%;height:100%;transform:rotate(-90deg)}
#timer circle{fill:rgba(255,255,255,.92);stroke-width:12}
#timer .bg{stroke:#cfe0ee}
#timer .fg{fill:none;stroke:var(--green);stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:0}
#timer.yellow .fg{stroke:var(--yellow)}#timer.red .fg{stroke:#e5242f}
#timerNum{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:110px;font-weight:800;color:var(--ink)}
#timer.red #timerNum{color:#e5242f}
#timeUp{position:absolute;left:0;right:0;bottom:60px;text-align:center;font-size:90px;font-weight:800;color:#e5242f;z-index:6;animation:pulse .5s infinite alternate}
@keyframes pulse{to{transform:scale(1.08)}}
#menu{position:absolute;inset:0;z-index:20;background:rgba(10,35,70,.94);color:#fff;padding:80px 140px;font-size:46px}
#menu h2{font-size:64px;margin-bottom:30px}
#menu div{padding:10px 0}
#menu b{color:#a9d4f5;margin-right:20px}
#start{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff}
#start button{font-size:90px;font-weight:800;padding:40px 110px;border:none;border-radius:60px;background:#fff;color:var(--blue-dark);cursor:pointer}
#start p{margin-top:40px;font-size:40px;opacity:.85}
#black{position:absolute;inset:0;background:#000;z-index:40}
.sl.dark .module-tag,.sl.dark .qnum{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.spriteimg{position:absolute;left:50%;top:70px;width:1500px;height:660px;transform:translateX(-50%);background-size:contain;background-repeat:no-repeat;background-position:center;image-rendering:pixelated;filter:drop-shadow(0 14px 24px rgba(0,40,90,.35))}
.sl.sprite .ans{color:var(--blue-dark);text-shadow:none}
.sl.sprite .module-tag,.sl.sprite .qnum{color:var(--blue-dark);text-shadow:none}
.sl.top{justify-content:flex-start;padding-top:60px}
.sl.top .shade{background:linear-gradient(rgba(0,20,50,.75),transparent 45%)}
.sl.portrait .spriteimg{left:180px;top:100px;width:700px;height:940px;transform:none;background-position:center}
.sl.portrait .ans{left:960px;right:60px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;text-align:left;padding:0}
.sl.portrait .ans .a{font-size:104px}
.sl.portrait .ans .a.long{font-size:64px}