*{box-sizing:border-box}body{margin:0;background:#271143;color:#30204c;font-family:Trebuchet MS,system-ui,sans-serif}button{font:inherit;font-weight:800;cursor:pointer;touch-action:manipulation;border:3px solid #fff7;border-radius:22px;min-height:52px;padding:12px 20px;background:#ffdb55;color:#382057;box-shadow:0 5px 0 #0003;transition:transform .15s}button:hover{filter:brightness(1.07);transform:translateY(-2px)}button:active{transform:scale(.96)}button:focus-visible{outline:5px solid #08bdd1;outline-offset:3px}header{height:76px;display:flex;gap:10px;align-items:center;padding:10px 3%;color:white}header button{font-size:14px;padding:8px 14px}header span{flex:1;text-align:center;font-size:22px;font-weight:900}#app{min-height:calc(100svh - 76px);position:relative;background:#f9efd5}.title{height:calc(100svh - 76px);background:url(art/title.webp) center/contain no-repeat #81d6ee;position:relative}.start{position:absolute;left:35%;width:30%;bottom:4%;font-size:clamp(24px,4vw,54px);background:#ffdb36;border:5px solid #fff7;min-height:80px}.menu{padding:26px 4% 40px;background:radial-gradient(at top,#fff9e4,#d9f3df)}h1,h2,p{text-align:center}h1{margin:0;font-size:36px}.badge{display:block;width:max-content;margin:12px auto 24px;padding:8px 20px;border-radius:30px;background:#087f8a;color:white;font-weight:800}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1300px;margin:auto}.card{padding:0;overflow:hidden;background:white;text-align:left;border:4px solid white}.card img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}.card strong{display:block;padding:14px 18px;font-size:21px}.stage{position:relative;min-height:590px;height:calc(100svh - 76px);overflow:hidden;background:linear-gradient(#a8e6ff 0 65%,#94cb72 65%);isolation:isolate}.stage:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 15% 17%,#fff9 0 7%,transparent 7.2%),radial-gradient(ellipse at 75% 23%,#fff8 0 10%,transparent 10.2%)}.instruction{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);margin:0;padding:13px 24px;background:#fff5d8;border:3px solid #f8c653;border-radius:24px;font-size:20px;font-weight:900;text-align:center;max-width:90%;z-index:5}.guide{position:absolute;height:52%;max-width:30%;object-fit:contain;bottom:12%;left:1%;pointer-events:none;filter:drop-shadow(0 10px 7px #0003)}.balloon{position:absolute;width:clamp(65px,10vw,145px);height:clamp(85px,13vw,180px);border-radius:50%;background:radial-gradient(circle at 30% 24%,#fff9,transparent 35%),var(--color);box-shadow:inset -12px -14px 20px #0002,0 8px 20px #0001;font-size:38px;animation:bob 3s ease-in-out infinite}.balloon:after{content:'';position:absolute;top:100%;left:50%;height:55px;width:2px;background:#fff}.flying{position:absolute;width:66px;height:40px;background:linear-gradient(25deg,#8c441d,#c87d42);border-radius:50%;color:white;display:grid;place-items:center;font-size:26px;pointer-events:none;z-index:10}.burst{position:absolute;font-size:48px;pointer-events:none;animation:burst 1s forwards;z-index:15}#toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:#4d237d;color:white;border-radius:30px;padding:16px 30px;opacity:0;pointer-events:none;font-size:25px;z-index:30}#toast.show{animation:toast 2s}.workspace{display:grid;grid-template-columns:180px minmax(250px,1fr) 180px;gap:20px;height:calc(100svh - 76px);min-height:600px;padding:24px 4% 95px;background:radial-gradient(at 50% 20%,#fffaf0,#d9eedc)}.work-center{display:flex;align-items:center;justify-content:center;position:relative}.work-center svg{max-height:100%;width:100%;filter:drop-shadow(0 14px 9px #0002)}.parts{display:flex;flex-direction:column;gap:12px;justify-content:center}.parts button{background:#fff8e6;padding:10px;font-size:18px}.parts button.selected,.swatch.selected{outline:4px solid #592b95;background:#ffe777}.parts small{font-size:12px;display:block;margin-top:4px}.toolbar{position:absolute;bottom:15px;left:0;right:0;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.swatch{width:58px;height:58px;border-radius:50%;background:var(--color);min-height:0;padding:0}.paint{cursor:pointer;stroke:#352248;stroke-width:5;stroke-linejoin:round}.color-sheet{background:#fffdf5;border:10px solid #e5c99b;border-radius:25px;padding:15px}.robot{transition:transform .3s}.dance{animation:dance .45s alternate infinite}.robot-face{font-size:55px;fill:#73fff1}.music-stage .guide{left:38%;height:48%;bottom:39%;max-width:30%}.instruments{position:absolute;bottom:15%;left:4%;right:4%;display:flex;gap:15px;align-items:end;justify-content:center}.instrument{width:15%;height:160px;background:radial-gradient(at top,#fff9,transparent),var(--color);font-size:45px;border-radius:24px 24px 45px 45px}.keys{position:absolute;bottom:3%;left:15%;right:15%;display:flex;gap:8px}.keys button{flex:1;min-width:0;height:66px;background:var(--color);padding:5px}.music-stage .instruction{bottom:auto;top:20px}.beat{position:absolute;top:85px;right:20px}.hides{position:absolute;inset:18% 4% 20%;display:flex;gap:5%;align-items:end}.hide{position:relative;width:30%;height:85%;border:0;box-shadow:none;background:none;padding:0;overflow:visible}.hide:hover{filter:none;transform:none}.cover{position:absolute;inset:20% 0 0;display:grid;place-items:center;font-size:clamp(100px,18vw,240px);z-index:2;filter:drop-shadow(0 10px 4px #0002)}.hidden-e{position:absolute;height:90%;width:100%;object-fit:contain;bottom:0;left:0;clip-path:inset(0 0 80% 0);transition:transform .5s}.found .hidden-e{clip-path:none;z-index:3;transform:translateY(-25px)}.found .cover{opacity:.15}.hint .cover{animation:bob .4s 4}.hint .hidden-e{transform:translateY(-25px)}.seek-actions{position:absolute;bottom:20px;left:10%;right:10%;display:flex;justify-content:center;gap:15px}.seek-stage .instruction{bottom:auto;top:20px}.dress-label{position:absolute;top:10px;left:10px;background:#fff;padding:10px;border-radius:20px} @keyframes bob{50%{transform:translateY(-13px)}}@keyframes dance{from{transform:rotate(-6deg) translateY(0)}to{transform:rotate(6deg) translateY(-15px)}}@keyframes burst{to{transform:translateY(-100px) scale(1.8);opacity:0}}@keyframes toast{10%,75%{opacity:1}100%{opacity:0;bottom:130px}}@media(max-width:700px){header{gap:5px;padding:7px;height:65px}header span{display:none}header button{flex:1;font-size:12px;padding:7px}.cards{grid-template-columns:repeat(2,1fr);gap:12px}.card strong{font-size:16px;padding:10px}.menu h1{font-size:27px}.workspace{grid-template-columns:90px minmax(120px,1fr) 90px;gap:5px;padding:10px 2% 125px;height:calc(100svh - 65px);min-height:520px}.parts button{font-size:13px;padding:7px;min-height:55px}.toolbar{gap:6px}.toolbar button{font-size:13px;padding:9px}.swatch{width:40px;height:40px}.stage{height:calc(100svh - 65px);min-height:530px}.instruction{font-size:16px}.instrument{font-size:30px;width:21%;height:130px}.keys{left:3%;right:3%}.guide{max-width:38%;height:42%}.start{bottom:12%;left:25%;width:50%}.title{height:calc(100svh - 65px);background-size:cover}.hidden-e{height:75%}.hides{gap:0;inset:20% 2%}.hide{width:33%}.cover{font-size:110px}.seek-actions button{font-size:14px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
.workspace{position:relative;overflow:hidden;grid-template-rows:minmax(0,1fr)}.work-center{min-height:0;min-width:0;overflow:hidden}.work-center>svg{height:100%;width:100%;max-width:460px}.color-sheet{height:100%;max-width:460px;width:100%}.color-sheet svg{height:100%;width:100%}.title .start{bottom:5%;left:34%;width:32%;height:17%;border-radius:70px}.parts{min-height:0}.stage .balloon{max-width:15%}
.color-sheet svg>g> :not([data-paint]){pointer-events:none}.color-sheet svg{overflow:visible}.color-sheet svg>g>[data-paint]{pointer-events:all}.title .start{font-size:clamp(24px,4vw,54px)}
.swatch.selected{background:var(--color)}@media(max-width:700px){.title{background-size:contain}.title .start{left:25%;width:50%;height:70px;bottom:10%}}
/* Screenshot-matched illustrated scenes */
.scene-wrap{min-height:calc(100svh - 76px);background:radial-gradient(ellipse at top,#57377a,#211131);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 0 0}.artboard{position:relative;width:min(100%,calc((100svh - 150px)*1.77778));aspect-ratio:16/9;background-size:100% 100%;background-repeat:no-repeat;overflow:hidden;border-radius:15px;box-shadow:0 18px 70px #0006;isolation:isolate}.hot{position:absolute;display:block;min-height:0;min-width:0;padding:0;border:0;border-radius:18%;background:transparent;box-shadow:none;touch-action:manipulation;z-index:5;color:transparent}.hot:hover{transform:none;filter:none;background:#ffffff12;box-shadow:inset 0 0 0 3px #fff5}.hot:active{transform:scale(.98)}.hot:focus-visible{outline:4px solid white;outline-offset:-4px;box-shadow:0 0 0 6px #6e35c4}.hot.picked{box-shadow:inset 0 0 0 4px #ffe066,0 0 15px #ffe06688}.hot.lit,.glow-key{background:#fff6;box-shadow:inset 0 0 0 4px #fff,0 0 25px #5fffff;transition:background .15s}.hot.real-control{color:#49226f;border:3px solid #fff7;background:linear-gradient(#fff3a7,#ffd145);border-radius:20px;font-size:clamp(10px,1.4vw,22px);font-weight:900;text-shadow:0 1px white;box-shadow:0 4px 0 #75431a55}.page-nav{display:flex;align-items:center;justify-content:center;gap:20px;padding:9px 10px;color:white;width:100%;height:66px}.page-nav button{min-height:42px;padding:8px 20px}.page-nav div{text-align:center;min-width:220px}.page-nav small{display:block;font-size:9px;letter-spacing:1.5px;color:#d5c7e6;margin-bottom:4px}.page-nav b{font-size:19px}.sprite{position:absolute;background-repeat:no-repeat;pointer-events:none}.robot-rig{position:absolute;left:30%;top:18%;width:38%;height:57%;transform-origin:50% 90%;filter:drop-shadow(0 10px 6px #0003);pointer-events:none}.robot-head{left:23%;top:0;width:54%;height:37%;z-index:4}.robot-body{left:22%;top:34%;width:56%;height:40%;z-index:3}.robot-arms{left:0;top:35%;width:100%;height:37%;z-index:2}.robot-feet{left:23%;top:68%;width:54%;height:32%;z-index:2}.dress-rig{position:absolute;left:34%;top:3%;width:30%;height:66%;filter:drop-shadow(0 9px 4px #0003);transform-origin:50% 90%;pointer-events:none}.dress-layer{inset:0;width:100%;height:100%}.pose-pop{animation:posepop .65s ease-in-out 2}.photo-balloon{background-image:url(art/v2/balloons.png);background-size:300% 200%;background-repeat:no-repeat;border-radius:50%;clip-path:ellipse(39% 43% at 50% 48%);filter:drop-shadow(0 8px 8px #0003);z-index:7}.photo-balloon:hover{background-color:transparent;box-shadow:none;filter:brightness(1.08)}.photo-balloon.floaty{animation:ballfloat 4s ease-in-out infinite}.photo-football{position:absolute;width:8%;height:10%;background-image:url(art/v2/balloons.png);background-size:300% 200%;background-position:100% 100%;clip-path:ellipse(46% 29% at 50% 48%);z-index:12;pointer-events:none}.color-canvas{position:absolute;left:56%;top:25%;width:30%;height:51%;mix-blend-mode:multiply;cursor:crosshair;touch-action:none}.paint-choice{border-radius:50%}.paint-choice.picked{box-shadow:inset 0 0 0 4px white,0 0 18px #fff}.e-peek{position:absolute;object-fit:contain;object-position:top;pointer-events:none;z-index:3;transition:transform .4s;filter:drop-shadow(0 5px 4px #0003)}.e-peek.peeking{animation:bob .6s 3}.e-peek.revealed{animation:posepop .7s}.artboard .music-key{border-radius:10%}.artboard .drum-key{border-radius:50%}.scene-wrap~.burst{z-index:20}#toast{font-size:20px;bottom:85px}.scene-wrap button:disabled{opacity:1}.scene-wrap .hot:disabled{pointer-events:none}@keyframes ballfloat{50%{transform:translate(8%,-10%) rotate(4deg)}}@keyframes posepop{50%{transform:translateY(-3%) rotate(3deg)}}@media(max-width:700px){.scene-wrap{min-height:calc(100svh - 65px)}.artboard{width:100%;border-radius:0}.page-nav{gap:8px;height:70px}.page-nav div{min-width:170px}.page-nav small{font-size:8px;letter-spacing:.5px}.page-nav b{font-size:15px}.page-nav button{min-height:45px;padding:7px 14px}.hot.real-control{border-width:1px;font-size:10px}.hot.picked{box-shadow:inset 0 0 0 2px #ffe066}.hot{border-radius:12px}#toast{font-size:16px;padding:10px 20px}}@media(max-height:550px) and (orientation:landscape){header{height:48px}header button{min-height:35px;padding:5px 12px}.scene-wrap{min-height:calc(100svh - 48px);padding:0}.artboard{width:min(100%,calc((100svh - 100px)*1.77778))}.page-nav{height:50px;padding:4px}.page-nav button{min-height:35px}.page-nav small{font-size:7px}.page-nav b{font-size:13px}}
.robot-rig:before{content:'';position:absolute;left:37%;width:26%;top:60%;height:24%;background:linear-gradient(90deg,#9b5fc9,#ffdc63 20%,#8648a3 40%,transparent 41% 59%,#8648a3 60%,#ffdc63 80%,#9b5fc9);border-radius:12px;z-index:1}
/* E.'s Mystery Match: illustrated newsroom with real interactive cards. */
.mystery{width:min(1500px,100%);margin:auto}.mystery-scene{position:relative;aspect-ratio:1672/941;background:url('art/mystery-match.png') center/100% 100%;container-type:inline-size;isolation:isolate}.mystery button{font:inherit;cursor:pointer;touch-action:manipulation}.m-grid{position:absolute;left:29.5%;top:23%;width:50%;height:57%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:1.25cqw;padding:1.2cqw;background:linear-gradient(120deg,#5a2d12,#a26425 50%,#44200c);border:.35cqw solid #efba53;border-radius:2cqw;box-shadow:inset 0 0 1.7cqw #1d0b06,0 .3cqw .6cqw #0007;box-sizing:border-box}.m-grid.pairs-2{grid-template-columns:repeat(2,1fr);padding:1.3cqw 5cqw}.m-grid.pairs-4{grid-template-columns:repeat(4,1fr)}.m-grid.pairs-6{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:.8cqw}.m-card{background:none!important;border:0!important;padding:0!important;min-width:0;min-height:0;perspective:800px;border-radius:1.3cqw;box-shadow:none!important}.m-card-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.65,.3,1)}.m-card.flipped .m-card-inner{transform:rotateY(180deg)}.m-card-back,.m-card-front{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;border:.28cqw solid #f5c365;border-radius:1.3cqw;backface-visibility:hidden;box-shadow:inset 0 0 0 .25cqw #bc243b, inset 0 0 2cqw #0004,0 .25cqw .4cqw #0007;overflow:hidden}.m-card-back{background:radial-gradient(ellipse at 25% 15%,#284c9c,#101b50 75%);color:#ffd05a}.m-card-back b{font-size:clamp(24px,7cqw,110px);line-height:1;text-shadow:0 .25cqw #a76c0c,0 .5cqw .5cqw #0008}.m-card-back small{font-weight:900;font-size:1.2cqw;border:.15cqw solid #ffc75e;background:#bd253a;border-radius:50%;padding:.15cqw .4cqw;color:white}.m-card-front{background:radial-gradient(ellipse at top,#abfff0,#0aa4aa);transform:rotateY(180deg);box-shadow:inset 0 0 .8cqw #fff8}.m-card-front img{height:79%;width:90%;object-fit:contain;filter:drop-shadow(0 .3cqw .2cqw #004d6b55)}.m-card-front strong{font-size:clamp(10px,1.3cqw,20px);color:#103551;line-height:1.2}.m-object{font-size:6cqw;line-height:1.3}.pairs-6 .m-object{font-size:4cqw}.pairs-6 .m-card-back b{font-size:4cqw}.m-check{display:none;position:absolute;right:.3cqw;top:.3cqw;width:1.9cqw;height:1.9cqw;border-radius:50%;background:#239f4a;color:white;font-size:1.4cqw}.matched .m-check{display:block}.m-card.matched{opacity:1;cursor:default}.matched .m-card-front{border-color:#a7ff79;animation:match-pop .55s ease}.m-card:focus-visible{outline:.35cqw solid white;outline-offset:.15cqw}.m-progress{position:absolute;left:77.8%;top:7.1%;width:15%;height:6%;display:grid;place-items:center;border:.25cqw solid #eebd63;border-radius:2cqw;background:#0c2259;color:#fff2b6;font-size:2cqw;font-weight:900}.m-bubble{position:absolute;left:21%;top:18%;width:10.8%;height:13%;display:grid;place-items:center;padding:.6cqw;border-radius:45%;background:white;color:#122657;font-size:1.8cqw;line-height:1.1;font-weight:900;text-align:center;box-shadow:0 .1cqw .5cqw #6e79a2}.mystery .m-peek,.mystery .m-again,.mystery .m-home{position:absolute;border:.3cqw solid #ffcb55;box-shadow:inset 0 0 0 .2cqw #ffefb1,0 .3cqw .5cqw #0006;font-weight:900;min-height:0}.m-peek{left:38%;top:85%;width:24%;height:10%;border-radius:4cqw;background:linear-gradient(#27eaf2,#0082b5);color:white;font-size:3.2cqw!important}.m-again{left:77.5%;top:85.4%;width:21%;height:9%;border-radius:4cqw;background:linear-gradient(#fff394,#f0b31b);color:#142552;font-size:2cqw!important}.m-home{left:1.2%;top:1.2%;width:6%;height:10.5%;border-radius:50%;background:#0656bb;color:white;font-size:4cqw!important}.m-levels{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:14px 8px}.m-levels button{display:flex;flex-direction:column;gap:4px;background:#162c56;color:#d6e7ff;border:2px solid #3e5b8e;border-radius:15px;padding:10px 18px;min-height:55px}.m-levels button[aria-pressed=true]{background:#f7c44c;border-color:#fff0a2;color:#152247}.m-levels span{font-size:12px}.m-help{text-align:center;margin:0 12px 12px;color:#dae8ff}.m-win{position:absolute;left:30%;top:28%;width:48%;height:48%;border:4px solid #fbd067;border-radius:24px;background:#102657f5;display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;box-shadow:0 0 70px #ffd76688;text-align:center;z-index:5}.m-win[hidden]{display:none}.m-win>span{font-size:5cqw}.m-win strong{font-size:3cqw;color:#ffe38a}.m-win p{font-size:1.6cqw;margin:1cqw}.m-next{background:#ffd05b;border:0;border-radius:30px;padding:1cqw 3cqw;color:#15244e;font-weight:900;font-size:1.8cqw!important}.m-peek:disabled{opacity:.7}.mystery button:hover:not(:disabled){filter:brightness(1.12)}@keyframes match-pop{50%{scale:1.08}}@media(max-width:600px){.m-levels{gap:6px}.m-levels button{padding:8px 12px;flex:1 1 40%}.mystery-scene{min-height:360px;background-size:auto 100%;background-position:29% center}.m-grid{left:24%;width:74%;top:25%;height:55%;gap:8px;padding:8px}.m-grid.pairs-2{padding:8px 20px}.m-bubble{left:2%;top:27%;width:19%;height:14%;font-size:16px}.m-progress{left:66%;top:16%;width:30%;height:7%;font-size:16px}.m-peek{left:26%;width:32%;font-size:19px!important}.m-again{left:62%;width:35%;font-size:16px!important}.m-home{width:12%;font-size:26px!important}.m-card-back b{font-size:40px}.m-card-back small{font-size:12px}.m-object{font-size:36px}.pairs-6 .m-object{font-size:28px}.pairs-6 .m-card-back b{font-size:30px}.m-check{width:18px;height:18px;font-size:14px}.m-win{left:24%;width:73%;font-size:16px}.m-win strong{font-size:23px}.m-win p{font-size:15px}.m-next{font-size:17px!important;padding:12px}.m-card-front strong{font-size:11px}}@media(prefers-reduced-motion:reduce){.m-card-inner{transition:none}.matched .m-card-front{animation:none}}
.m-audio{position:absolute;right:1%;top:1.5%;width:7%;height:11%;background:#0757b3;color:white;border:.3cqw solid #ffd568;border-radius:50%;font-size:3cqw!important;min-height:0;padding:0}.m-help{color:#263452}.m-home{line-height:1;padding:0!important;display:grid;place-items:center}