*{box-sizing:border-box} :root{--ink:#59466c;--mint:#d9f8e9;--pink:#ffe0ef;--lilac:#ece3ff;--lemon:#fff4c9;--purple:#8060a7}
body{margin:0;background:linear-gradient(145deg,#f3edff,#fff0f7 55%,#e8fff3);font-family:"Trebuchet MS",system-ui,sans-serif;color:var(--ink);min-height:100vh}
.top{display:flex;justify-content:space-between;align-items:center;padding:14px max(16px,calc((100% - 760px)/2));background:#ffffffc9;position:sticky;top:0;z-index:2;backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:9px}.bee{font-size:34px}.brand h1{font-size:16px;margin:0;color:#7755a0}.brand strong{font-size:13px;letter-spacing:2px;color:#e36da9}.topstats{display:flex;gap:10px;font-size:13px}.topstats span,.pill{background:white;border-radius:20px;padding:8px 10px}
main{max-width:760px;margin:18px auto;padding:0 14px}.panel{background:#ffffffed;border:2px solid #fff;border-radius:27px;padding:22px;box-shadow:0 12px 35px #8866a51a;margin-bottom:18px}
.hero{text-align:center;background:linear-gradient(160deg,#e3fff0,#fff0f8 60%,#f1eaff)}.heroart{font-size:36px;margin:8px}.eyebrow{letter-spacing:2px;font-size:11px;font-weight:900;color:#9a77b6;margin:5px 0}.hero h2{font-size:34px;margin:4px;color:#d95f9e}.hero>p:not(.eyebrow){max-width:430px;margin:8px auto}.slime-friend{font-size:72px;filter:drop-shadow(0 7px 5px #7cbd9a55);animation:bob 2.5s infinite}.friendname{font-weight:bold;color:#4e9c79}@keyframes bob{50%{transform:translateY(-7px) rotate(4deg)}}
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}.room{border:0;border-radius:20px;padding:15px 8px;min-height:145px;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;font:inherit}.room span{font-size:34px}.room small{font-size:11px;line-height:1.3}.maths{background:var(--mint)}.english{background:var(--pink)}.time{background:var(--lilac)}
button{cursor:pointer;font:inherit}.homeactions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.soft,.back{border:0;background:#f0e8fa;color:#72558f;border-radius:20px;padding:10px 14px;font-weight:bold}.back{margin-bottom:12px}.primary{border:0;border-radius:18px;padding:13px 18px;background:linear-gradient(100deg,#80dcb0,#d98abd);color:#fff;font-weight:bold;width:100%;margin-top:12px;box-shadow:0 5px 12px #aa82bc30}
.hidden{display:none!important}.quizhead{display:flex;align-items:center;gap:12px}.quizhead>span:first-child{font-size:38px}.quizhead h2{margin:0}.quizhead .pill{margin-left:auto;background:#f0e8fa;font-size:12px}.progressbar{height:9px;background:#eee7f4;border-radius:9px;overflow:hidden;margin-top:18px}.progressbar div{height:100%;background:#85dcb1;width:0;transition:width .3s}.counter{font-size:12px;color:#9a81ac}.panel h3{line-height:1.35}.answers{display:grid;gap:9px}.answer{border:2px solid #e9dff2;background:#fff;border-radius:15px;padding:13px;text-align:left;color:var(--ink);font-size:16px}.answer:disabled{opacity:1}.answer.chosen{border-color:#a77bc7;background:#f7f0ff}.answer.good{border-color:#79c99d;background:#e8fff1}.answer.bad{border-color:#e5a5b9;background:#fff0f5}.feedback{margin-top:14px;padding:14px;border-radius:16px;background:#effbf4;line-height:1.45}.feedback.try{background:#fff3f7}.creatures{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.creature{background:#f5efff;border-radius:18px;padding:15px;text-align:center}.creature span{font-size:45px}.creature.locked{filter:grayscale(1);opacity:.55}.skillrow{padding:12px;border-bottom:1px solid #eee5f2}.track{height:8px;background:#eee8f2;border-radius:9px;overflow:hidden;margin-top:7px}.track div{height:100%;background:#83d7a9}.tag{font-size:11px;border-radius:12px;padding:4px 8px;background:#e5f8ec}.tag.growing{background:#fff1d0}.tag.new{background:#eee9f5}label{display:block;font-weight:bold;margin:12px 0}input,textarea{display:block;width:100%;padding:12px;border:2px solid #e8dff0;border-radius:13px;margin-top:6px;font:inherit;color:var(--ink)}textarea{min-height:90px}footer{text-align:center;padding:10px 15px 28px;color:#927ba5;font-size:12px}footer button{border:0;background:transparent;color:#8060a7;font-weight:bold}.note{font-size:12px;color:#967fa7}
@media(max-width:520px){.rooms{grid-template-columns:1fr}.room{min-height:95px;display:grid;grid-template-columns:50px 1fr;text-align:left;justify-items:start;padding:12px 18px}.room span{grid-row:span 2}.hero h2{font-size:29px}.panel{padding:17px}.top{padding:10px 12px}.brand h1{font-size:13px}.brand strong{font-size:11px}.topstats{gap:4px}.topstats span{padding:7px}}

.avatar-stage{background:linear-gradient(145deg,#e5fff1,#fff0f7,#f0eaff);border-radius:22px;padding:18px;text-align:center;margin:14px 0 20px;display:grid;gap:6px}.avatar-preview{font-size:86px;filter:drop-shadow(0 7px 5px #8060a733);min-height:105px}.avatar-stage small{color:#927ba5}.wardrobe{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 18px}.wardrobe-item{border:2px solid #eee4f3;background:#fff;border-radius:15px;padding:10px 5px;color:var(--ink);min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.wardrobe-item .look-icon{font-size:27px}.wardrobe-item small{font-size:11px}.wardrobe-item.selected{border-color:#80d6a8;background:#edfff3}.wardrobe-item.locked{opacity:.58;background:#f5f2f6}.wardrobe-item:disabled{cursor:default}
@media(max-width:520px){.wardrobe{grid-template-columns:repeat(2,1fr)}}

/* Kawaii squishy boutique makeover */
:root{--ink:#59466f;--mint:#dffbea;--pink:#ffe3f1;--lilac:#eee5ff;--lemon:#fff6cf;--purple:#8c65b5}
body{background:radial-gradient(circle at 12% 8%,#fff 0 3px,transparent 4px),radial-gradient(circle at 88% 16%,#fff 0 4px,transparent 5px),linear-gradient(135deg,#f6efff 0%,#fff0f7 48%,#eafff3 100%);background-size:38px 38px,54px 54px,auto}
.top{background:#fffaf2e8;border-bottom:3px solid #fff;box-shadow:0 5px 20px #9e78b51a}
.bee{display:grid;place-items:center;width:48px;height:48px;border-radius:17px;background:linear-gradient(145deg,#fff5bf,#ffe2ed);box-shadow:inset 0 2px 5px #fff,0 4px 10px #9e78b526}
.brand h1{letter-spacing:.2px}.brand strong{letter-spacing:2.5px}
.topstats span,.pill{border:2px solid #fff2fa;box-shadow:0 3px 10px #9974b21c;font-weight:700}
main{max-width:820px}
.panel{border:3px solid #fff;border-radius:32px;box-shadow:0 14px 35px #9b78b51c, inset 0 1px 0 #fff;position:relative;overflow:hidden}
.panel:before{content:'✦';position:absolute;right:18px;top:12px;color:#f4c5df;font-size:18px;pointer-events:none}
.hero{background:linear-gradient(145deg,#e5fff1 0%,#fff0f8 52%,#f0eaff 100%)}
.heroart{display:inline-block;padding:9px 18px;border-radius:25px;background:#ffffff9c;box-shadow:inset 0 2px 5px #fff,0 4px 12px #9e78b51a}
.hero h2{ text-shadow:0 2px 0 #fff;font-size:clamp(30px,5vw,39px)}
.slime-friend{display:inline-grid;place-items:center;width:112px;height:96px;margin:6px auto 0;border-radius:48% 52% 45% 55%;background:radial-gradient(circle at 35% 25%,#fff 0 5%,#9ff2c6 17%,#61d69c 65%,#48b984 100%);font-size:0;position:relative;box-shadow:inset -8px -10px 18px #2b9e6c36,inset 7px 8px 16px #fff9,0 10px 18px #54b98938;animation:bob 2.5s infinite}
.slime-friend:after{content:'•ᴗ•';font-size:23px;font-weight:900;color:#347b68;letter-spacing:2px;text-shadow:0 1px #fff;transform:translateY(8px)}
.friendname{display:inline-block;padding:7px 14px;border-radius:18px;background:#ffffffa8}
.room{border:3px solid #fff;box-shadow:0 5px 0 #b78fc322,0 8px 16px #9d7bb31a;transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden}
.room:after{content:'♡';position:absolute;right:10px;top:5px;color:#fff9;font-size:23px}
.room:hover,.soft:hover,.wardrobe-item:not(:disabled):hover{transform:translateY(-3px);box-shadow:0 8px 0 #b78fc322,0 12px 18px #9d7bb322}
.maths{background:linear-gradient(145deg,#cffff0,#e8fff4)}.english{background:linear-gradient(145deg,#ffd9ec,#fff0f7)}.time{background:linear-gradient(145deg,#e2d8ff,#f2edff)}
.room span{filter:drop-shadow(0 3px 2px #876a9b30)}
.soft,.back{border:2px solid #fff;box-shadow:0 4px 10px #9974b21c;background:linear-gradient(145deg,#fff,#f5edff)}
.primary{border:3px solid #fff;background:linear-gradient(100deg,#75ddb0,#a8d9cf 45%,#d78abb);box-shadow:0 5px 0 #9c70a744,0 9px 16px #aa82bc2b;text-shadow:0 1px 2px #7c6190;letter-spacing:.2px}
.primary:hover{filter:saturate(1.12) brightness(1.03);transform:translateY(-1px)}
.quizhead .pill{background:#fff0f8}.progressbar{height:12px;border:2px solid #fff;background:#eee5f7}.progressbar div{background:linear-gradient(90deg,#75dba9,#b4e8be,#f2a8d0);border-radius:9px}
.answer{border:2px solid #f0e5f4;box-shadow:0 3px 8px #9271a010;transition:transform .15s,border-color .15s}.answer:hover:not(:disabled){transform:translateX(3px);border-color:#c6a6df}.answer.good{background:linear-gradient(100deg,#e5fff0,#f4fff8);border-color:#78d5a3}.answer.bad{background:linear-gradient(100deg,#fff0f6,#fff8fb);border-color:#efaac6}
.feedback{border:2px solid #fff;box-shadow:0 4px 12px #9271a012}.feedback.try{background:linear-gradient(145deg,#fff0f6,#fff8fb)}
.avatar-stage{border:3px solid #fff;background:radial-gradient(circle at 50% 20%,#fff 0 3%,transparent 4%),linear-gradient(145deg,#dfffee,#ffe8f3 55%,#eee5ff);box-shadow:inset 0 2px 8px #fff,0 8px 18px #9d7bb31a}
.avatar-preview{display:grid;place-items:center;width:132px;height:132px;margin:auto;border-radius:44% 56% 52% 48%;background:linear-gradient(145deg,#fff,#f8eaff);border:4px solid #fff;box-shadow:0 8px 20px #9974b233,inset 0 3px 10px #fff}
.wardrobe-item{border:2px solid #fff;box-shadow:0 4px 12px #9974b21a;transition:transform .16s,box-shadow .16s}.wardrobe-item.selected{border-color:#79d6a5;background:linear-gradient(145deg,#e6fff0,#f8fff9);box-shadow:0 0 0 3px #b5efd0}
.creature{border:2px solid #fff;box-shadow:0 5px 14px #9974b21a;background:linear-gradient(145deg,#f2ebff,#fff3f8)}
.skillrow{border-bottom:1px dashed #e8d9ee}.track{border:1px solid #fff;background:#eee7f5}.track div{background:linear-gradient(90deg,#79dba9,#c1e9be,#eaa4d0)}
input,textarea{border:2px solid #fff;box-shadow:inset 0 2px 5px #9d7bb318;background:#fffafd}input:focus,textarea:focus{outline:3px solid #ead8ff;border-color:#c4a4df}
footer{color:#987fae}
@media(max-width:520px){.rooms{gap:12px}.room{border-radius:19px}.panel{border-radius:25px}.avatar-preview{width:116px;height:116px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Illustrated boutique redesign */
:root{--ink:#513b70;--purple:#8655b4;--pink:#f5a3ce;--mint:#9ce6c4}
body{background:radial-gradient(circle at 12% 12%,#fff 0 4px,transparent 5px),radial-gradient(circle at 85% 23%,#fff 0 3px,transparent 4px),linear-gradient(135deg,#f4eaff,#ffeaf4 48%,#e4fff1);background-size:44px 44px,61px 61px,auto}
main{max-width:1080px}.panel{border:3px solid #fff;border-radius:30px;box-shadow:0 16px 40px #795b9b20,inset 0 1px 0 #fff}
.hero{padding:16px;background:linear-gradient(145deg,#dffbed,#fff0f8 53%,#eee5ff);text-align:center}
.hero-scene{min-height:390px;position:relative;overflow:hidden;border:5px solid #fff;border-radius:28px;background:linear-gradient(180deg,#e7f9ff 0%,#f9edff 57%,#ffe6f1 100%);box-shadow:inset 0 -25px 0 #f4d8eb,0 8px 20px #9975b31c;display:flex;align-items:center;justify-content:space-between;padding:28px 6%;text-align:left}
.hero-scene:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 16% 80%,#fff9 0 11%,transparent 12%),radial-gradient(ellipse at 83% 80%,#fff9 0 14%,transparent 15%),linear-gradient(90deg,#b8efd766,#f9cce566 50%,#d7c9f766);opacity:.7}
.scene-copy{position:relative;z-index:2;max-width:52%;color:#69428c}.scene-copy h2{font-size:clamp(28px,4vw,47px);line-height:1.05;margin:8px 0;color:#9d5bc2;text-shadow:0 3px #fff,0 6px 0 #e7c8f0}.logo-ribbon{display:inline-block;background:linear-gradient(90deg,#f28bc0,#c18be6);color:white;padding:7px 20px;border-radius:7px 18px 7px 18px;box-shadow:0 4px 0 #a66ebd;font-weight:1000;letter-spacing:2px;transform:rotate(-2deg)}.scene-copy p:last-child{font-weight:700;max-width:300px}
.hero-doll{position:absolute;z-index:2;right:18%;bottom:39px;width:145px;height:265px;animation:bob 3s ease-in-out infinite}.doll-head{position:absolute;top:18px;left:20px;width:105px;height:112px;background:#f8d1b8;border:3px solid #d99ab0;border-radius:48% 48% 46% 46%;z-index:2}.doll-hair{position:absolute;z-index:3;top:7px;left:12px;width:122px;height:108px;border-radius:55% 48% 42% 42%;background:linear-gradient(135deg,#ffb4d5,#ed75b3 68%,#cf6aa8);border:3px solid #c46caa;clip-path:polygon(0 0,100% 0,100% 100%,83% 80%,76% 45%,60% 70%,48% 42%,25% 70%,14% 100%,8% 64%)}.doll-head i{position:absolute;top:49px;width:11px;height:16px;border-radius:50%;background:#50344f}.doll-head i:first-child{left:27px}.doll-head i:nth-child(2){right:27px}.doll-head b{position:absolute;left:45px;top:77px;width:13px;height:8px;border-bottom:3px solid #b95f82;border-radius:50%}.doll-body{position:absolute;z-index:1;top:122px;left:24px;width:97px;height:106px;background:linear-gradient(135deg,#fff,#ffb5d7);border:3px solid #d68bb7;border-radius:25px 25px 18px 18px;clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}.doll-body:after{content:"♡";position:absolute;left:39px;top:20px;color:#e77caf;font-size:27px}.doll-shoes{position:absolute;bottom:0;left:19px;width:111px;height:24px;border-radius:20px;background:radial-gradient(ellipse at 22% 45%,#fff 0 25%,transparent 27%),radial-gradient(ellipse at 78% 45%,#fff 0 25%,transparent 27%)}
.scene-slime{position:absolute;z-index:2;bottom:36px;width:75px;height:65px;border-radius:48% 52% 44% 56%;display:grid;place-items:center;font-size:21px;font-weight:900;color:#397c69;border:3px solid #fff;box-shadow:inset 6px 7px 12px #fff9,0 7px 15px #82659a25}.slime-a{right:5%;background:linear-gradient(145deg,#baffdf,#57d9a1)}.slime-b{right:43%;bottom:17px;background:linear-gradient(145deg,#e3d3ff,#a68ae9);transform:scale(.78)}.scene-counter{position:absolute;z-index:3;bottom:13px;left:18px;background:#fffdf0eF;border:2px solid white;border-radius:18px;padding:8px 14px;font-size:13px;box-shadow:0 4px 12px #9674ad25}.scene-sparkle{position:absolute;z-index:1;color:#f2bd52;font-size:36px;animation:bob 2.3s infinite}.s1{top:20px;right:22%}.s2{top:45%;left:5%;color:#ed9fc8}.s3{top:16%;left:48%;color:#a58bdf}
.friendname{background:#fff9;padding:9px 18px;border-radius:18px;color:#8b5baa}.rooms{gap:15px}.room{min-height:150px;border:3px solid #fff;box-shadow:0 7px 0 #8e6da526,0 12px 20px #8e6da51a;border-radius:23px;transition:.18s}.room:hover{transform:translateY(-4px)}.maths{background:linear-gradient(145deg,#c9f8df,#effff5)}.english{background:linear-gradient(145deg,#ffd7ec,#fff3f9)}.time{background:linear-gradient(145deg,#ddd2ff,#f5efff)}
.avatar-stage{display:grid;grid-template-columns:minmax(180px,260px) 1fr;align-items:center;gap:10px;padding:22px;background:radial-gradient(circle at 25% 25%,#fff 0 3%,transparent 4%),linear-gradient(145deg,#dffbed,#ffe7f2 55%,#eee5ff);border:3px solid white}.avatar-preview{width:100%;height:260px;min-height:0;background:linear-gradient(180deg,#fff,#fff5fb);border:4px solid #fff;border-radius:48% 48% 28px 28px;box-shadow:0 8px 20px #8d6aa522;display:grid;place-items:center;padding:10px}.avatar-preview svg{height:100%;width:auto;max-width:100%;filter:drop-shadow(0 5px 4px #795c8533)}.avatar-stage b,.avatar-stage small{grid-column:2;text-align:left}.avatar-stage b{font-size:20px}.avatar-stage small{color:#866c9e}.wardrobe{grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:12px}.wardrobe-item{min-height:105px;border:3px solid #fff;border-radius:18px;box-shadow:0 5px 13px #8e6da51a}.wardrobe-item.selected{border-color:#72d4a1;background:linear-gradient(145deg,#e3fff0,#f9fff9);box-shadow:0 0 0 3px #b8efd0}.wardrobe-item .look-icon{font-size:30px}.quizhead h2{color:#8655b4}.answer{border-radius:18px;padding:15px;border:2px solid #eeddf4;background:linear-gradient(145deg,#fff,#fff8fc);font-weight:700}.answer.good{background:#e6fff0}.feedback{border-radius:18px}.primary{background:linear-gradient(100deg,#74dcae,#d78abd);border:3px solid white;border-radius:20px;font-weight:900}.reward-pop{animation:pop .5s ease}@keyframes pop{50%{transform:scale(1.04);color:#cf579c}}
@media(max-width:620px){.hero-scene{min-height:360px;padding:22px 5%}.scene-copy{max-width:65%}.hero-doll{right:7%;transform:scale(.82);transform-origin:bottom right}.slime-a{right:2%;transform:scale(.8)}.slime-b{right:35%}.scene-counter{font-size:11px}.avatar-stage{grid-template-columns:1fr}.avatar-preview{height:230px;max-width:220px;margin:auto}.avatar-stage b,.avatar-stage small{grid-column:1;text-align:center}.rooms{grid-template-columns:1fr}.room{min-height:105px;display:grid;grid-template-columns:52px 1fr;text-align:left;justify-items:start;padding:12px 18px}.room span{grid-row:span 2}}