:root{--ink:#302452;--p:#7e3db5;--sh:0 10px 25px #3421521b}*{box-sizing:border-box}body{margin:0;background:#f6f3f7;color:var(--ink);font-family:Arial,sans-serif}button{font:inherit;cursor:pointer}.app{width:min(1200px,calc(100% - 30px));margin:16px auto}.screen{display:none;min-height:670px;background:#fff;border:1px solid #e9e3ec;border-radius:20px;overflow:hidden;position:relative;box-shadow:var(--sh)}.screen.active{display:block}header{height:65px;border-bottom:1px solid #eee9f0;display:flex;align-items:center;gap:17px;padding:0 22px;font-size:.95rem}header em{font-style:normal;margin-left:auto;background:#fff7d8;border-radius:18px;padding:7px 12px;color:#a26a00;font-weight:800}.back,.music{background:white;border:1px solid #e9e3ec;border-radius:50%;width:43px;height:43px;color:#58367e;font-size:1.55rem;box-shadow:0 2px 7px #39265c22}.purple{border:0;border-bottom:4px solid #592687;background:linear-gradient(#964ec9,#7130a7);color:white;border-radius:12px;padding:14px 26px;font-weight:900;box-shadow:0 5px 12px #60309432}.purple:hover:not(:disabled){transform:translateY(-2px)}.purple:disabled{opacity:.45;cursor:default}.home{display:grid!important;grid-template-columns:1fr 1fr;align-items:center;padding:55px 10% 100px;background:radial-gradient(circle at 67% 25%,#fff6cf,transparent 24%),#fffdf6}.intro{text-align:center;z-index:2}.intro h1,.result h1{font-family:'Comic Sans MS',cursive;font-size:clamp(3rem,7vw,5.5rem);line-height:.9;margin:0;color:#362261}.intro p{font-size:1.35rem;font-weight:bold;line-height:1.4;margin:28px 0}.music{position:absolute;right:28px;top:23px}.splash{position:absolute;border-radius:45% 55% 50% 50%;opacity:.5}.a{background:#f5a7c6;width:180px;height:150px;left:-50px;top:-35px}.b{background:#ffd065;width:180px;height:150px;right:-35px;top:-35px}.c{background:#81d6ea;width:160px;height:130px;left:-35px;bottom:-30px}.easel{position:relative;width:270px;height:225px;background:#bb793b;border:9px solid #9e5e2d;margin:auto;transform:rotate(-3deg);box-shadow:inset 0 0 0 7px #d19654}.easel:after,.easel:before{content:"";position:absolute;background:#ae6b35;width:15px;height:160px;bottom:-140px;border-radius:8px}.easel:before{left:35px;transform:rotate(12deg)}.easel:after{right:35px;transform:rotate(-12deg)}.canvas{position:absolute;inset:15px;background:#fffdf6;display:grid;place-items:center}.easel>b{position:absolute;font-size:4rem;right:-37px;bottom:-35px}.wheel{border-radius:50%;width:260px;height:260px;background:conic-gradient(#ed403b 0 60deg,#fb842c 60deg 120deg,#ffdb20 120deg 180deg,#45af41 180deg 240deg,#218fc9 240deg 300deg,#773aaf 300deg);border:8px solid white;box-shadow:0 5px 13px #3523543b;position:relative}.wheel:after{content:"";position:absolute;inset:63px;border-radius:50%;background:white}.mini{width:150px;height:150px;border-width:0;box-shadow:none}.mini:after{inset:0;background:transparent}.home nav{position:absolute;bottom:0;left:0;width:100%;display:flex;justify-content:center;background:#fffdfbe8;padding:14px}.home nav button{border:0;border-right:1px solid #eee6ee;background:transparent;color:#4a3561;font-weight:bold;width:130px;font-size:1.45rem}.home nav button:last-child{border:0}.home nav small{display:block;font-size:.72rem}.center{text-align:center;font-weight:bold;margin:30px}.levels{padding:0 35px 35px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.level{min-height:180px;border:1px solid #ece6ef;border-radius:14px;text-align:center;padding:16px;display:flex;flex-direction:column;align-items:center;box-shadow:0 4px 12px #38234e0b}.level.open{cursor:pointer}.level.open:hover{transform:translateY(-4px);box-shadow:var(--sh)}.num{font-size:1.6rem;font-weight:bold}.lname{font-size:.76rem;font-weight:bold;min-height:35px;display:grid;place-items:center}.licon{font-size:2rem;margin:14px}.stars{color:#ffbf1d;margin-top:auto}.locked{color:#9c96a3;background:#fdfcff}.lesson{display:grid;grid-template-columns:.9fr 1fr .85fr;gap:30px;align-items:center;padding:53px 8% 25px}.lesson article strong{font-size:.72rem;color:#8353b1;letter-spacing:.6px}.lesson h2{font:2.2rem 'Comic Sans MS',cursive;color:#6d3d98;margin:7px 0}.lesson p{line-height:1.55}.clickable{cursor:pointer}.clickable span{position:absolute;z-index:3;inset:87px;text-align:center;display:grid;place-items:center;color:#8054a5;font-weight:bold;font-size:.75rem}.lesson aside{border:1px solid #ece6f0;border-radius:15px;text-align:center;padding:18px;box-shadow:0 3px 11px #3523500c;min-height:180px}.lesson aside big{font-size:2.6rem}.lesson aside h3{font-size:1rem;margin:6px}.lesson aside p{font-size:.9rem}.next{display:block;margin:9px auto 35px}.mix{grid-template-columns:.8fr 1fr .9fr}.blobs{display:flex;align-items:center;justify-content:center;gap:9px;font-size:1.65rem;color:#8558a9}.blobs i{width:72px;height:72px;border-radius:48% 52% 43% 57%;display:block}.blobs .red{background:#ed423d}.blobs .yellow{background:#ffd01a}.blobs .question{background:#f0eaf5;border:2px dashed #9e75bf;text-align:center;padding-top:19px;font-style:normal}.answers{display:grid;gap:8px}.answers button{border:2px solid transparent;border-radius:9px;padding:9px;font-weight:bold}.answers button:nth-child(1){background:#ffe2cb}.answers button:nth-child(2){background:#dff4e6}.answers button:nth-child(3){background:#eee2f9}.feedback{min-height:30px;font-weight:bold}.correct{border-color:#35a454!important}.wrong{border-color:#ec5752!important;opacity:.65}.opposite:before{content:"";position:absolute;z-index:3;left:50%;top:-2px;height:100%;border-left:2px dashed #715680}.opposite>i{z-index:4;position:absolute;left:calc(50% - 15px);top:-12px;background:#218fc9;width:30px;height:30px;border:3px solid white;border-radius:50%}.dots{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;padding:12px}.dots button{width:39px;height:39px;margin:auto;border:3px solid white;border-radius:50%;box-shadow:0 2px 5px #0003}.dots button:nth-child(1){background:#ed423d}.dots button:nth-child(2){background:#fb842c}.dots button:nth-child(3){background:#ffdb20}.dots button:nth-child(4){background:#45af41}.dots button:nth-child(5){background:#773aaf}.result{padding:65px 10%;display:grid;grid-template-columns:1fr 220px;align-items:center;text-align:center}.result h1{font-size:3.3rem}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:25px 0}.stats article{border:1px solid #ece5ef;border-radius:13px;padding:14px;font-size:2rem}.stats b,.stats small{display:block}.stats b{font-size:1.5rem}.stats small{font-size:.72rem;font-weight:bold}.artist{font-size:9rem}.outline{border:2px solid #d8c4e7;background:white;border-radius:12px;padding:12px 15px;color:#6b4196;font-weight:bold}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,120px);background:#39245b;color:#fff;padding:12px 18px;border-radius:10px;font-weight:bold;transition:.25s}#toast.show{transform:translate(-50%,0)}@media(max-width:800px){.home{grid-template-columns:1fr;padding-top:35px}.easel{transform:scale(.76);margin:-35px auto}.levels{grid-template-columns:repeat(3,1fr)}.lesson,.mix{grid-template-columns:1fr 1fr;padding:35px 7%}.lesson article{grid-column:1/-1;text-align:center}.result{grid-template-columns:1fr}.artist{display:none}}@media(max-width:530px){.app{width:calc(100% - 16px);margin:8px auto}.screen{border-radius:14px;min-height:610px}header{padding:0 10px;gap:8px;font-size:.72rem}header em{padding:5px 8px}.levels{padding:0 12px 25px;grid-template-columns:repeat(2,1fr);gap:10px}.level{min-height:150px;padding:12px}.lesson,.mix{grid-template-columns:1fr;padding:27px 6%}.wheel{width:220px;height:220px;margin:auto}.wheel:after{inset:53px}.clickable span{inset:72px}.result{padding:45px 5%}.result h1{font-size:2.5rem}.stats{gap:6px}.stats article{padding:9px 3px}.home nav button{width:100px}.intro h1{font-size:3.8rem}}