:root{--ink:#482a35;--cream:#fff8df;--pink:#f68fbd;--blue:#8dcbff;--purple:#c598f4}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:"YouYuan","幼圆","PingFang SC",sans-serif;background:radial-gradient(ellipse at 0% 90%,#ffc9dd 0,transparent 38%),radial-gradient(ellipse at 100% 15%,#a5d7ff 0,transparent 44%),var(--cream);min-height:100vh}main{max-width:780px;margin:auto;padding:20px 26px 30px;text-align:center;background:radial-gradient(circle at 20% 35%,#fffdf1,transparent 60%),#fff8dfe8;min-height:100vh;border-inline:4px solid #ffffff90;position:relative;overflow:hidden}.sparkles{color:#edb849;font-size:28px;letter-spacing:20px}header{position:relative}h1{font-size:clamp(65px,12vw,108px);margin:0;line-height:1.15;color:#ff94c0;font-weight:1000;letter-spacing:4px;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:4px 7px 0 var(--ink),-5px -5px 0 white,7px -4px 0 white}h1 span{color:#ffe165}.eyebrow{display:block;font-size:14px;letter-spacing:5px;margin:8px}.ribbon{display:inline-block;background:#ffe59d;border:3px solid #c37739;border-radius:45% 45% 12px 12px;padding:12px 23px;font-weight:800;font-size:clamp(13px,2.5vw,21px);transform:rotate(-2deg);margin:14px 0 25px}.cat{position:absolute;right:0;bottom:6px;font-size:25px;transform:rotate(10deg);color:#ad6950}.machines{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px;padding-bottom:12px;border-radius:50%;background:linear-gradient(transparent 88%,#f3ce7580 88%)}.machine{--tone:var(--pink);position:relative;filter:drop-shadow(0 6px 0 #efd994)}.blue{--tone:var(--blue)}.purple{--tone:var(--purple)}.machine h2{position:relative;z-index:2;background:linear-gradient(#ffffff99,var(--tone));border:4px solid var(--ink);border-radius:45px 45px 30px 30px;margin:0 auto -12px;width:72%;padding:10px 0;font-size:clamp(19px,3.8vw,32px);box-shadow:inset 5px 5px 0 #ffffffa0}.globe{height:245px;padding:35px 14px 18px;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:10px 7px;border:4px solid var(--ink);border-radius:48%;background:radial-gradient(ellipse at 23% 17%,white 0 5%,transparent 6%),radial-gradient(ellipse at 15% 32%,#ffffffd9 0 4%,transparent 5%),linear-gradient(135deg,#e6f6ff,var(--tone));box-shadow:inset 7px 0 0 #ffffff90,inset -6px 0 0 #ffffff90;position:relative;z-index:1}.slip{display:inline-block;padding:8px 10px;background:#fff9f0;border-radius:5px;font-weight:800;font-size:clamp(12px,2.6vw,22px);transform:rotate(var(--tilt));box-shadow:3px 3px 0 #f8cfe1;white-space:nowrap}.slip:nth-child(3n){background:#fff2b6}.slip:nth-child(3n + 1){background:#f9e2f4}.base{height:115px;margin:-16px 13px 0;background:linear-gradient(100deg,#fff8,var(--tone) 40%);border:4px solid var(--ink);border-radius:15px 15px 35% 35%;position:relative;box-shadow:inset 5px 0 0 #ffffffa0}.base:before{content:"";position:absolute;top:-5px;left:-8px;right:-8px;height:20px;background:var(--tone);border:3px solid var(--ink);border-radius:50%;z-index:2}.knob{width:65px;height:65px;border:4px solid #b16b24;background:linear-gradient(150deg,#fff6a0,#ffd548 60%,#ffb62d);border-radius:50%;position:relative;margin:15px auto 0;z-index:3;box-shadow:inset 4px 4px 0 white}.knob:after{content:"";position:absolute;left:2px;right:2px;top:26px;height:10px;background:#e8a42a;border-radius:10px;transform:rotate(-15deg)}.outlet{position:absolute;bottom:6px;left:30%;width:40%;height:40px;background:#3d274f;border:4px solid #6c4777;border-radius:50% 50% 4px 4px}.shake{font:900 clamp(30px,6vw,48px) "YouYuan","PingFang SC",sans-serif;color:var(--ink);border:5px solid #8e481f;border-radius:60px;background:linear-gradient(#fff59c,#ffd746 65%,#ffb832);padding:12px 50px;margin:24px 0 0;box-shadow:inset 5px 5px 0 #fff,0 6px 0 #e3b768;cursor:pointer}.shake:hover{filter:brightness(1.04)}.shake:focus-visible{outline:4px solid #573cf0;outline-offset:5px}.shake:disabled{cursor:wait}.tagline{font-size:18px;letter-spacing:2px;margin:20px 0 36px}.result{border:4px solid #ffa4c9;border-radius:35px;background:#fffaf4;box-shadow:0 7px 0 #f7dda3;padding:24px 15px 20px;position:relative}.result>h2{position:absolute;top:-27px;left:50%;transform:translateX(-50%);margin:0;background:#ff8db7;color:white;padding:8px 25px;border-radius:30px;white-space:nowrap;font-size:23px}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.result-grid>div+div{border-left:2px dashed #ffcddf}h3{font-size:17px;margin:12px 0 9px}output{display:block;font-size:clamp(23px,4vw,32px);font-weight:900;background:#ffe3eb;border-radius:23px;padding:12px 5px;margin-left:8px}.result-grid>div:nth-child(2) output{background:#e0f0ff}.result-grid>div:nth-child(3) output{background:#f0e2fb}footer{font-size:19px;letter-spacing:3px;margin-top:30px}footer small{display:block;font-size:11px;letter-spacing:0;opacity:.7;margin-top:16px}@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}.shaking .machine{animation:wobble .2s infinite}.shaking .machine:nth-child(2){animation-delay:.06s}.shaking .machine:nth-child(3){animation-delay:.12s}@media(max-width:520px){main{padding:12px 12px 25px}.sparkles{font-size:20px;letter-spacing:9px}.machines{gap:4px;margin-top:10px}.globe{height:190px;padding:24px 5px 15px;gap:7px 5px;border-width:3px}.slip{padding:6px 5px}.machine h2{border-width:3px}.base{margin-inline:7px;height:90px;border-width:3px}.knob{width:49px;height:49px;margin-top:13px;border-width:3px}.knob:after{top:19px;height:8px}.outlet{height:30px}.cat{display:none}.tagline{font-size:14px}.shake{padding:12px 40px}.result{padding-inline:8px}.result-grid{gap:4px}footer{font-size:15px}}@media(prefers-reduced-motion:reduce){.shaking .machine{animation:none}}