@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
:root{color-scheme:dark;--bg:#10112c;--panel:#1b1d40;--muted:#b8bcdb;--pink:#ff7cbd;--mint:#8af3dc}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 85% 0,#35235d,transparent 55%),var(--bg);color:#fff;font-family:Nunito,system-ui,sans-serif;font-size:17px}button,select,input{font:inherit}button,a,select{touch-action:manipulation}button{border:1px solid #ffffff24;border-radius:14px;padding:12px 18px;background:#30335e;color:white;cursor:pointer;font-weight:800}button:hover{background:#414677}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--mint);outline-offset:4px}button:disabled{opacity:.5;cursor:default}header{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:24px}.logo{color:white;text-decoration:none;font-weight:900;letter-spacing:2px}.logo b{color:var(--mint)}.tools{display:flex;gap:10px}.tools button{font-size:14px}main{max-width:1150px;margin:auto;padding:0 24px}.welcome{display:flex;align-items:center;justify-content:space-between;padding:30px 0}.eyebrow{font-size:13px;letter-spacing:2px;font-weight:900;color:var(--mint)}h1{font-size:clamp(38px,6vw,64px);line-height:1.04;margin:12px 0 18px;font-weight:900}h2{margin:8px 0 12px;line-height:1.2}p{color:var(--muted);line-height:1.6}.welcome p{margin:0}.badge{display:grid;place-items:center;width:150px;height:150px;background:#ffbf5720;border:1px solid #ffcf6255;border-radius:35px;transform:rotate(5deg)}.badge span{font-size:30px;color:#ffce69}.badge strong{font-size:38px}.badge small{font-size:13px;color:#ffdb9c}nav{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin:10px 0 24px}nav button{padding:13px 5px;border-radius:18px;background:#1d1f43}nav button.active{background:var(--pink);color:#24132e;border-color:var(--pink)}nav small{display:block;font-size:12px;margin-top:4px}.layout{display:grid;grid-template-columns:390px 1fr;gap:24px;align-items:start}.studio,.play{background:var(--panel);border:1px solid #ffffff16;border-radius:28px;overflow:hidden}.art{height:220px;background:#252955}.art img{width:100%;height:100%;object-fit:contain}.studio-copy{padding:24px}.studio-copy p{font-size:16px;margin-bottom:14px}.friend{font-size:14px;color:var(--pink);font-weight:800}.avatar{display:flex;align-items:center;gap:14px;margin:0 24px 18px;padding:16px;background:#ffffff08;border-radius:18px}.avatar img{height:64px;width:64px;object-fit:cover;border-radius:16px}.avatar span:first-child{font-size:36px}.avatar small{display:block;color:var(--muted);font-size:13px}.avatar>span:last-child{margin-left:auto;font-size:27px}.wardrobe{padding:0 24px 24px;display:flex;gap:12px;flex-wrap:wrap}.wardrobe label{font-size:13px;color:var(--muted)}select{display:block;background:#30335e;color:#fff;border:1px solid #ffffff24;padding:8px;border-radius:10px;max-width:100%}.play{padding:30px;min-height:540px}.play h2{font-size:29px}.primary{background:var(--mint);color:#112b30;border:0}.primary:hover{background:#b5ffed}.pink{background:var(--pink);color:#24132e}.pill{display:inline-block;background:#ff7cbd18;color:#ffacd3;font-size:14px;border-radius:30px;padding:6px 12px;font-weight:800}.progress{height:7px;border-radius:10px;background:#ffffff12;margin:20px 0}.progress div{height:100%;border-radius:10px;background:var(--mint);transition:width .3s}.equation{text-align:center;font-size:clamp(36px,5vw,58px);font-weight:900;padding:20px 0}.answers{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.answers button{font-size:27px;padding:17px;background:#2b2f57}.answers button:hover{background:#494374}.entry{display:flex;gap:10px}.entry input{width:100%;min-width:0;border-radius:14px;background:#10122e;border:2px solid #575a85;color:#fff;padding:12px;font-size:28px}.feedback{padding:16px;border-radius:16px;margin-top:16px;background:#ffffff08;line-height:1.5}.feedback.good{background:#8af3dc15;color:#a0fbe5}.feedback.retry{background:#ffce6915;color:#ffe09a}.hint{color:var(--muted);background:none;margin-top:16px;font-size:15px}.groups{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.group{border:1px solid #8af3dc66;background:#8af3dc09;border-radius:10px;padding:6px;font-size:18px;letter-spacing:3px}.helper{padding:16px;background:#10122e;border-radius:16px;margin:16px 0;color:#d4d9f8;font-size:16px;line-height:1.6}.helper p{margin:0}.collection{margin:32px 0;padding:24px;border:1px solid #ffffff16;border-radius:24px}.collection h2{font-size:23px}#rewards{display:flex;gap:12px;flex-wrap:wrap}.reward{background:#ffffff07;border-radius:16px;padding:12px;text-align:center;flex:1;min-width:95px;font-size:13px;color:var(--muted)}.reward span{font-size:28px;display:block;margin-bottom:8px}.reward.locked{opacity:.4}footer{color:var(--muted);font-size:14px;margin:30px 0;line-height:1.7}a{color:var(--mint)}dialog{width:min(620px,calc(100% - 30px));border:1px solid #6a659e;border-radius:24px;padding:30px;background:#1b1d40;color:white;max-height:90vh}dialog::backdrop{background:#070717c9}.close{float:right;font-size:22px;padding:5px 13px}.upload{display:block;padding:15px;background:#30335e;border-radius:12px;margin:12px 0}.upload input{display:block;margin-top:10px;width:100%;font-size:14px}table{border-collapse:collapse;width:100%;font-size:14px}td,th{text-align:left;border-bottom:1px solid #ffffff20;padding:10px 5px}details{margin-top:20px}summary{cursor:pointer}.show{min-height:200px;border-radius:20px;background:radial-gradient(ellipse,#774a99,#202153);display:grid;place-items:center;overflow:hidden}.show img{width:100%;max-height:250px;object-fit:cover}.show.running img{animation:dance .7s ease-in-out infinite alternate}.show.running #showAvatar{animation:dance .6s ease-in-out infinite alternate-reverse}.show #showAvatar{position:absolute;width:110px;height:110px;object-fit:cover;border:4px solid #ffda73;border-radius:50%;box-shadow:0 0 50px #ff7cbd}.show{position:relative}.show.running::after{content:'✦ ✧ ★ ✦ ✧';position:absolute;top:15px;font-size:30px;color:#ffe48d;animation:dance .8s infinite alternate}.intro-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.stats{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.stats span{background:#ffffff08;padding:12px;border-radius:12px}.night{}.pink-scene .art,.pink-scene .show{background:#a12d7e}.mint-scene .art,.mint-scene .show{background:#126d70}@keyframes dance{from{transform:rotate(-3deg) scale(1)}to{transform:rotate(3deg) scale(1.06)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}@media(max-width:850px){.layout{grid-template-columns:1fr}.studio{display:grid;grid-template-columns:1fr 1fr}.art{height:100%;min-height:210px}.studio-copy{padding:20px}.avatar,.wardrobe{grid-column:1/-1}.play{min-height:0}}@media(max-width:540px){header{padding:18px 14px;gap:12px;flex-wrap:wrap}main{padding:0 14px}.welcome{padding:20px 0}.badge{width:100px;height:120px;border-radius:24px}.badge strong{font-size:28px}.welcome p{font-size:15px}.welcome p br{display:none}.welcome>div:first-child{max-width:70%}nav{gap:5px}nav button{font-size:15px;padding:12px 3px}nav small{font-size:10px}.studio{display:block}.art{height:190px;min-height:0}.play{padding:22px}.play h2{font-size:25px}.tools button{padding:8px 10px}.equation{padding:14px 0}.collection{padding:18px}}