@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800;900&display=swap');
:root{--paper:#f8f6ee;--ink:#343b31;--muted:#91938a;--coral:#df745a;--line:#e4e4d8}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',"PingFang SC","Microsoft Yahei",sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit}header{height:100px;max-width:1280px;margin:auto;display:flex;align-items:center;border-bottom:1px solid var(--line);padding:0 30px}.brand{font-family:'Outfit',sans-serif;font-size:44px;font-weight:900;letter-spacing:-4px;text-decoration:none;color:var(--ink);line-height:1}.brand span{color:var(--coral)}.brand i{display:inline-block;color:var(--coral);font-size:32px;letter-spacing:0;margin-left:10px;font-style:normal}.brand-sub{font-size:12px;margin-left:24px;color:#8c8d83;letter-spacing:1px}.header-right{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:12px;color:#838779}.live-dot{width:6px;height:6px;border-radius:50%;background:#89a775}.icon-button{position:relative;margin-left:20px;border:1px solid #deded2;background:transparent;border-radius:50%;width:36px;height:36px;font-size:20px;color:#535b4b}.sound-slash{position:absolute;font-size:23px;left:9px;top:2px}.intro{text-align:center;padding:37px 0 30px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2.3px;color:#96998b;display:flex;align-items:center;justify-content:center;gap:9px}.eyebrow span{height:5px;width:5px;border-radius:50%;background:var(--coral)}h1{position:relative;font-size:44px;letter-spacing:-2px;margin:13px 0 12px;font-weight:800;line-height:1.3}h1>span:first-child{color:var(--coral);margin-left:7px}.title-star{position:absolute;font-size:30px;margin:0 0 0 14px;transform:rotate(15deg);color:#c1caa7} .intro p{font-size:13px;color:#92958b;line-height:1.9;margin:0}.play-layout{display:grid;grid-template-columns:235px 442px 235px;gap:54px;justify-content:center;align-items:start}.left-side,.right-side{padding-top:23px}.note{background:#efefe3;border:1px solid #e2e3d4;border-radius:12px;padding:23px 23px 18px}.mini-label{font-size:9px;letter-spacing:1.8px;font-weight:600;color:#969987}.record-title{margin-top:13px;font-size:13px}.record-title>span{font-size:22px;margin-right:7px;color:#7e8d60}.record-number{font-family:Outfit,sans-serif;font-weight:600;font-size:48px;line-height:1.3;margin:7px 0 10px;letter-spacing:-1px}.record-number span{font-family:inherit;font-size:15px;color:#91957f;font-weight:400}.dash{border-top:1px dashed #d4d7c3}.note p{font-size:10px;color:#939780;line-height:1.8;margin-bottom:0}.how{margin-top:36px;padding-left:5px}.section-label{font-weight:600;font-size:13px;display:flex;gap:11px;align-items:center}.section-label>span{font-family:Outfit;font-size:10px;color:#a2a591;border:1px solid #dfe1d3;padding:3px 5px;border-radius:4px;font-weight:400}.control-keys{display:flex;align-items:center;gap:6px;margin-top:21px}kbd{font-family:inherit;font-size:13px;background:#fffef9;display:inline-flex;justify-content:center;align-items:center;height:29px;min-width:30px;border:1px solid #dcded3;border-bottom:3px solid #dcded3;border-radius:5px}.control-keys>span{font-size:10px;color:#9a9c90;padding:0 5px}.how p{font-size:12px;color:#858a7c;line-height:1.9;margin-top:13px}.pause-tip{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:11px;color:#929687}.pause-tip kbd{font-size:10px;width:49px;height:25px}.touch-tip{font-size:10px;margin-top:18px;color:#a4a797}.hand-note{position:relative;font-size:16px;font-family:cursive;color:#a5aa90;line-height:1.8;transform:rotate(-7deg);margin:38px 0 0 34px;letter-spacing:2px}.hand-note span{position:absolute;right:8px;top:16px;font-size:48px;transform:rotate(-25deg)}.game-frame{position:relative;background:#fcfcf4;border:1px solid #d9ddca;border-radius:16px;overflow:hidden;box-shadow:0 8px 0 -3px #e6e7dc,0 15px 30px #404e2910}.game-top{position:absolute;left:0;right:0;top:0;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;z-index:2;background:linear-gradient(#fcfcf4ee,#fcfcf400)}.game-top>div{display:flex;align-items:center;gap:8px}.score-dot{width:7px;height:7px;background:#df795e;border-radius:50%}#score{font:600 26px Outfit,sans-serif}.game-top small{font-size:12px;color:#969e83;margin-top:8px}.game-actions>span{font-size:10px;color:#9ba08e}.game-actions button{margin-left:4px;border:1px solid #dfe3d3;border-radius:6px;background:#f9faf0;width:27px;height:27px;color:#858f72}canvas{width:100%;height:auto;display:block;touch-action:none}.game-bottom{height:34px;padding:0 17px;display:flex;justify-content:space-between;align-items:center;background:#f0f2e5;border-top:1px solid #e4e7d8;color:#98a087;font-size:9px;letter-spacing:.5px}.game-bottom i{display:inline-block;width:4px;height:4px;background:#9da985;border-radius:50%;margin-right:6px}.overlay{position:absolute;inset:65px 0 85px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:3;background:radial-gradient(ellipse,#fcfcf4 20%,#fcfcf4e8 48%,#fcfcf400 72%)}.overlay.hidden{display:none}.welcome-character{position:relative;height:125px;animation:bob 3s ease-in-out infinite}.welcome-character>span{position:absolute;color:#c6b56d;right:-18px;top:10px;font-size:24px}.hello{font-size:9px;letter-spacing:2px;color:#9caa7c;margin-top:9px}h2{font-size:25px;letter-spacing:1px;margin:10px 0}.overlay p{font-size:12px;color:#9b9e8d;margin:0 0 27px}.primary{border:0;background:var(--coral);color:white;border-radius:8px;min-width:205px;padding:14px 25px;font-weight:600;box-shadow:0 4px 0 #c96751;font-size:14px;transition:transform .15s,background .15s}.primary:hover{background:#d36a51;transform:translateY(-2px)}.primary span{margin-left:42px;font-size:18px}.overlay-hint{font-size:10px;color:#a7ab99;margin-top:20px}.right-side .section-label{margin-bottom:28px}.platform-item{display:flex;align-items:center;gap:17px;margin-bottom:29px;padding-left:2px}.platform-item h3{font-size:12px;margin:0 0 5px;font-weight:500}.platform-item p{font-size:10px;color:#959a89;margin:0}.platform-sample{width:53px;height:12px;border:1.5px solid #7f925d;background:#bdcf97;border-radius:4px;position:relative;flex-shrink:0;box-shadow:inset 0 -3px #a7bf79;transform:rotate(-3deg)}.platform-sample.moving{background:#bdd4dc;border-color:#7d9ba7;box-shadow:inset 0 -3px #a6c5d0;transform:rotate(2deg)}.platform-sample.moving span{position:absolute;top:-13px;left:19px;color:#8da9b2;font-size:15px}.platform-sample.fragile{background:#dfc3a8;border-color:#b39579;box-shadow:inset 0 -3px #d0ae8d;transform:rotate(-2deg)}.fragile:after{content:'';position:absolute;height:11px;border-left:2px dashed #a88465;left:29px;transform:rotate(20deg)}.platform-sample.spring span{position:absolute;top:-24px;left:18px;color:#a59168;font-size:26px}.tip-card{background:#f1f0e7;border:1px solid #e9e7db;border-radius:10px;margin-top:38px;padding:21px 22px;position:relative}.tip-icon{position:absolute;right:18px;top:15px;color:#a7ae91;font-size:24px}.tip-card h3{font-size:13px;font-weight:500;margin:15px 0 9px}.tip-card p{font-size:11px;line-height:1.9;color:#969987;margin:0}.wrap-diagram{display:flex;justify-content:space-between;align-items:center;font-size:21px;color:#a0ac83;margin-top:16px}.wrap-diagram span{color:#c2c7b4;font-size:24px}.wrap-diagram i{font-size:14px;color:#b1c88b}footer{max-width:1020px;margin:45px auto 0;padding:21px 0 25px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:10px;color:#9da18f}footer>span:first-child{font-size:9px;letter-spacing:1.8px}footer i{font-style:normal;font-size:15px;color:#cc9a79;margin-left:11px}button:focus-visible,a:focus-visible{outline:3px solid #9fae7d;outline-offset:4px}@keyframes bob{50%{transform:translateY(-7px) rotate(3deg)}}@media(min-width:1450px){header{max-width:1360px}.intro{padding-top:44px;padding-bottom:36px}.play-layout{gap:65px}}@media(max-width:1100px){.play-layout{grid-template-columns:190px 402px 190px;gap:28px}.note{padding:19px 16px}.hand-note{margin-left:15px}.platform-item{gap:12px}footer{margin-left:35px;margin-right:35px}.tip-card{padding:18px 16px}}@media(max-width:880px){.play-layout{grid-template-columns:195px minmax(300px,440px);gap:25px;margin:0 25px}.right-side{display:none}.intro{padding:28px 0}.brand-sub{display:none}footer{margin-top:32px}}@media(max-width:600px){header{height:70px;padding:0 22px}.brand{font-size:36px}.header-right{font-size:10px}.icon-button{margin-left:6px}.intro{padding:23px 0 24px}h1{font-size:34px}.title-star{font-size:22px;margin-left:8px}.intro p{font-size:11px}.eyebrow{font-size:8px;letter-spacing:1.7px}.play-layout{display:block;margin:0 auto;max-width:420px;padding:0 18px}.left-side{padding:0}.score-card{display:flex;align-items:center;justify-content:space-between;padding:10px 15px;margin-bottom:15px;border-radius:9px}.mini-label,.score-card .dash,.score-card p{display:none}.record-title{margin:0;font-size:11px}.record-title>span{font-size:17px}.record-number{font-size:23px;margin:0}.record-number span{font-size:11px}.how,.hand-note{display:none}.game-frame{border-radius:13px}.game-top{height:47px}.game-bottom{font-size:8px}.welcome-character{height:113px}.overlay h2{font-size:23px}.overlay p{font-size:11px}.overlay{inset:45px 0 55px}.overlay-hint{font-size:9px}footer{margin:26px 20px 0;font-size:9px;justify-content:center}footer>span:first-child{display:none}}