:root{--ink:#20243c;--purple:#7130d9;--pink:#ec5ba7;--yellow:#ffd126;--bg:#f4efff}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 12% 20%,#e3d5ff,transparent 30%),var(--bg);color:var(--ink);font-family:"DM Sans",sans-serif}button,a{font:inherit}header{height:70px;max-width:1120px;margin:auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between}header a{text-decoration:none;color:inherit;font-weight:800}.brand{font:800 20px "Manrope"}.brand>span{display:inline-grid;place-items:center;width:37px;height:37px;border-radius:12px;background:var(--purple);color:#fff;margin-right:7px}.brand b{color:var(--purple)}main{max-width:1040px;margin:auto;padding:30px 18px 80px}.intro{text-align:center}.intro>p{font-size:10px;font-weight:800;letter-spacing:2.5px;color:var(--purple)}.intro h1{font:800 clamp(55px,9vw,95px)/.95 "Manrope";letter-spacing:-5px;margin:15px}.intro h1 span{color:var(--pink)}.intro h2{font-size:17px;color:#69738a;font-weight:600}.tools{display:flex;justify-content:center;gap:8px;margin:30px 0 17px}.tools button{border:1px solid #ddd9e7;border-radius:14px;background:#ffffffc9;color:#697188;padding:10px 14px;font-weight:700;cursor:pointer}.board{display:grid;grid-template-columns:1fr 1fr;gap:15px}.toy{min-height:390px;background:#ffffffc9;border:1px solid #fff;border-radius:30px;padding:18px;box-shadow:0 20px 55px #3f27661a;overflow:hidden;position:relative}.toy-title{display:flex;align-items:center;gap:11px}.toy-title>span{width:35px;height:35px;display:grid;place-items:center;border-radius:11px;background:#eee8fa;color:var(--purple);font-size:10px;font-weight:900}.toy-title b{display:block;font:800 18px "Manrope"}.toy-title small{color:#8a90a1}.toy>p{text-align:center;color:#83899b;font-size:12px;margin:6px}.spinner-zone,.switch-zone,.balloon-zone,.clicker-zone{height:285px;display:grid;place-items:center;touch-action:none}.spinner{width:175px;height:175px;position:relative;touch-action:none;transform:rotate(0deg);filter:drop-shadow(0 13px 14px #36225d35)}.spinner>i{position:absolute;width:78px;height:78px;border-radius:50%;background:linear-gradient(145deg,#fff,#c9c8d4);box-shadow:inset 7px 7px 10px #fff,inset -7px -7px 12px #858897;left:49px;top:2px}.spinner>i:nth-child(2){transform-origin:39px 86px;transform:rotate(120deg)}.spinner>i:nth-child(3){transform-origin:39px 86px;transform:rotate(240deg)}.spinner>i:after,.spinner>b{content:"";position:absolute;width:35px;height:35px;border-radius:50%;background:#4f5261;left:21px;top:21px;box-shadow:inset 0 0 0 8px #b9bac5}.spinner>b{left:70px;top:70px;background:#fff;box-shadow:inset 0 0 0 10px #646775}.switch-zone{background:radial-gradient(circle,#fffad4 0,transparent 57%);border-radius:25px}.switch-plate{width:180px;height:230px;border-radius:20px;background:linear-gradient(145deg,#fff,#dadde3);box-shadow:12px 17px 28px #2d304340,inset 6px 7px 9px #fff;display:grid;place-items:center;position:relative}.switch-plate:before,.switch-plate:after{content:"";position:absolute;width:15px;height:15px;border-radius:50%;background:#575b65;left:18px;top:105px;box-shadow:inset 3px 3px 4px #222}.switch-plate:after{left:auto;right:18px}.switch{width:70px;height:112px;border-radius:10px;background:#b8bbc2;padding:7px;box-shadow:inset 4px 5px 8px #777;cursor:pointer}.switch i{display:block;width:56px;height:62px;border-radius:8px;background:linear-gradient(#fff,#d8dae0);box-shadow:0 10px 9px #484b5670;transition:.2s}.switch.on i{transform:translateY(36px);box-shadow:0 -8px 8px #484b5660}.light{position:absolute;right:12px;top:12px;width:12px;height:12px;border-radius:50%;background:#aeb2ba}.light.on{background:#ffd934;box-shadow:0 0 20px #ffd934}.balloon-zone{position:relative;background:radial-gradient(circle,#fff4ca 0,transparent 60%)}.balloon{width:80px;height:100px;border:0;border-radius:52% 48% 48% 52%;background:radial-gradient(circle at 30% 23%,#fff9 0 5%,transparent 18%),linear-gradient(135deg,#ffe32e,#edab00);box-shadow:inset -13px -10px 18px #c4870055,0 15px 25px #5e460830;position:relative;transform:scale(.65);transition:transform .25s;cursor:pointer}.balloon i{position:absolute;left:35px;bottom:-11px;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:0;border-top:14px solid #dba200}.balloon:after{content:"";position:absolute;width:1px;height:105px;background:#8c7e9e;left:41px;bottom:-110px}.balloon-pop{position:absolute;font-size:150px;color:#ffd326;opacity:0;transform:scale(.3)}.balloon-pop.show{animation:burst .5s ease-out}.clicker-zone{background:radial-gradient(circle,#e7dcff 0,transparent 60%)}.clicker{width:180px;height:180px;border:0;border-radius:50%;background:#bbb8c6;padding:17px;box-shadow:0 16px 0 #777486,0 25px 35px #30284d45;cursor:pointer}.clicker i{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 34% 25%,#fff7,transparent 17%),linear-gradient(145deg,#e75ead,#a633cb);box-shadow:inset 10px 12px 16px #fff4,inset -13px -15px 20px #65147570}.clicker:active{transform:translateY(10px);box-shadow:0 6px 0 #777486,0 12px 20px #30284d35}.calm-note{max-width:650px;margin:25px auto 0;display:flex;align-items:center;justify-content:center;gap:15px;color:#687188}.calm-note>i{font-style:normal;font-size:36px;color:var(--purple)}.calm-note b{color:var(--ink)}.calm-note p{font-size:12px;margin:3px 0}@keyframes burst{50%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.4)}}@media(max-width:700px){main{padding:15px 9px 50px}.board{grid-template-columns:1fr}.toy{min-height:360px}.intro h2{font-size:14px}.tools button{font-size:11px;padding:9px}.spinner-zone,.switch-zone,.balloon-zone,.clicker-zone{height:260px}}