*{box-sizing:border-box}body{margin:0;color:#3d315b;font-family:"Trebuchet MS","Arial Rounded MT Bold",Arial,sans-serif;background:radial-gradient(circle at 10% 8%,#fff5a8 0 7%,transparent 8%),radial-gradient(circle at 92% 15%,#ffd8eb 0 8%,transparent 9%),linear-gradient(180deg,#eee8ff,#fff8fc 55%,#eafaff);min-height:100vh}.shell{width:min(1080px,100%);margin:auto;padding:12px 14px 24px}header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:8px 2px 14px}.home{background:#fff;color:#5c45cf;text-decoration:none;font-weight:900;padding:9px 13px;border-radius:999px;box-shadow:0 8px 24px #523a7a20;white-space:nowrap}.brand{display:flex;align-items:center;justify-content:center;gap:10px}.mascot{width:58px;height:58px;object-fit:cover;border-radius:50%;border:4px solid white;box-shadow:0 8px 24px #523a7a20}.brand small{color:#ff6eb2;font-weight:900;letter-spacing:.1em}.brand h1{margin:2px 0 0;font-size:clamp(1.1rem,3vw,1.65rem)}select{max-width:125px;border:2px solid #d8ccff;border-radius:999px;padding:8px;background:#fff;color:#3d315b;font-weight:800}.hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px;border-radius:28px;background:linear-gradient(135deg,#fff1a6,#ffd4e9 55%,#dcd5ff);box-shadow:0 10px 28px #523a7a22}.hero b{color:#5c45cf;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}.hero h2{margin:6px 0 0;font-size:clamp(1.6rem,5vw,2.5rem);line-height:1.05}.hero p{margin:10px 0 0;font-weight:700;color:#665b79}.hero button{border:0;background:#7b61ff;color:#fff;border-radius:999px;padding:13px 18px;font-weight:900;box-shadow:0 6px 0 #5c45cf;cursor:pointer}.hero button:active{transform:translateY(3px);box-shadow:0 3px 0 #5c45cf}nav{display:flex;gap:9px;margin:16px 0;overflow:auto}.tab{border:0;background:#fff;color:#5c45cf;padding:11px 18px;border-radius:999px;font-weight:900;box-shadow:0 5px 16px #523a7a1a;cursor:pointer;white-space:nowrap}.tab.active{background:#7b61ff;color:#fff}#content{min-height:350px}.heading{text-align:center;margin:5px 0 14px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.card{border:0;background:#fff;border-radius:22px;min-height:150px;padding:13px;box-shadow:0 10px 28px #523a7a20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;color:#3d315b;font-weight:900}.card:hover{transform:translateY(-2px)}.swatch{width:82px;height:82px;border-radius:22px;display:grid;place-items:center;box-shadow:inset 0 -7px #00000012}.shape{width:60px;height:60px;background:currentColor}.circle{border-radius:50%}.square{border-radius:10px}.triangle{width:0;height:0;background:transparent;border-left:31px solid transparent;border-right:31px solid transparent;border-bottom:57px solid currentColor}.rectangle{width:76px;height:48px;border-radius:9px}.star{clip-path:polygon(50% 3%,61% 35%,96% 36%,68% 56%,78% 91%,50% 70%,22% 91%,32% 56%,4% 36%,39% 35%)}.hint{font-size:.75rem;color:#827795}.exploreGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.panel,.quiz{background:#ffffffdd;border-radius:24px;padding:20px;box-shadow:0 10px 28px #523a7a20;text-align:center}.demo{min-height:235px;display:grid;place-items:center}.demo .card{width:min(260px,100%)}.demo .swatch{width:150px;height:150px}.demo .shape{width:105px;height:105px}.demo .triangle{border-left-width:54px;border-right-width:54px;border-bottom-width:98px}.demo .rectangle{width:130px;height:82px}.quiz h2{margin-bottom:5px}.progress{font-weight:900;color:#5c45cf}.question{min-height:175px;display:grid;place-items:center}.question .swatch{width:135px;height:135px}.answers{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:520px;margin:auto}.answer{border:3px solid #eee7ff;background:#fff;border-radius:17px;padding:13px;font-weight:900;color:#3d315b;cursor:pointer}#feedback{margin:15px 0;background:#fff;border-radius:20px;padding:13px;text-align:center;font-weight:900;box-shadow:0 10px 28px #523a7a20}footer{text-align:center;color:#817793;font-size:.75rem;font-weight:700;padding:22px 8px 4px;line-height:1.6}@media(max-width:760px){header{grid-template-columns:auto 1fr auto}.hero{flex-direction:column;align-items:flex-start}.hero button{width:100%}.grid{grid-template-columns:repeat(2,1fr)}.exploreGrid{grid-template-columns:1fr}}@media(max-width:430px){.shell{padding:10px}.home{font-size:.78rem;padding:8px 10px}.mascot{width:48px;height:48px}.brand small{font-size:.65rem}.brand h1{font-size:1rem}select{max-width:92px;padding:7px 5px}.card{min-height:140px}.swatch{width:70px;height:70px}.shape{width:52px;height:52px}.triangle{border-left-width:27px;border-right-width:27px;border-bottom-width:48px}}