@font-face{font-family:system;src:local("Trebuchet MS")}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}body{font-family:system,"Segoe UI",sans-serif;color:#36384b;background:#f8eee8}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:4px solid #238e96;outline-offset:4px}button{border:0}#app,#world{width:100%;height:100%;position:absolute;inset:0}#world{display:block}.topbar{position:absolute;top:24px;left:32px;right:32px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.brand{display:flex;align-items:center;gap:13px}.brand-icon{font-size:47px;color:#d55d82}.brand small{font-size:10px;letter-spacing:2px;font-weight:800;color:#92777f}.brand h1{font-size:31px;letter-spacing:-1.5px;line-height:1;margin:5px 0}.brand h1 span{color:#d55d82}.toolbar{pointer-events:auto;display:flex;align-items:center;gap:9px;background:#fffaf5d9;border:1px solid #fff;border-radius:30px;padding:7px;box-shadow:0 5px 25px #70576209}.icon-button{height:40px;width:40px;border-radius:50%;font-size:23px;background:transparent;color:#6d6675}.icon-button:hover{background:#f4e2e6}.volume{display:flex;flex-direction:column;align-items:center;width:85px;gap:2px}.volume span{font-size:10px;letter-spacing:1px}.volume input{accent-color:#c35478;width:75px;height:14px}.progress{position:absolute;top:27px;left:50%;transform:translateX(-50%);display:flex;align-items:center;background:#fffaf6e8;border:1px solid white;border-radius:22px;padding:12px 22px;gap:13px;box-shadow:0 9px 35px #82596809}.step{display:flex;align-items:center;gap:7px;color:#9b8f99;font-size:14px}.step>span{width:28px;height:28px;border-radius:10px;background:#f0e7e8;display:grid;place-items:center;font-size:24px}.step i{font-size:9px;font-style:normal;align-self:flex-start}.step.current{color:#bc4c73}.step.current>span{background:#f7d4e0}.step.done{color:#398a7f}.step.done>span{background:#d3ebe1}.connector{width:14px;height:2px;background:#e6d6db}.instruction{position:absolute;left:32px;top:116px;display:flex;gap:13px;align-items:center;max-width:420px;padding:15px 21px 15px 17px;border-radius:22px;background:#fffaf5eb;border:1px solid white;box-shadow:0 12px 35px #7057620b;pointer-events:none}.instruction>span{font-size:33px;width:46px;height:46px;background:#f9e5e8;border-radius:15px;display:grid;place-items:center;color:#bb4b72}.instruction small{font-size:9px;letter-spacing:1.5px;font-weight:800;color:#ad7586}.instruction h2{font-size:21px;line-height:1.15;margin:5px 0}.instruction p{font-size:12px;color:#80747f;margin:6px 0 0}.controls{position:absolute;bottom:56px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:end;pointer-events:none}.controls button{pointer-events:auto}.move-area{display:flex;flex-direction:column;align-items:center;gap:8px}.dpad{display:grid;grid-template:repeat(3,49px)/repeat(3,49px);gap:4px}.dir{background:#fffaf5ee;border:1px solid #fff;box-shadow:0 5px 0 #ddcfd4,0 7px 12px #7f6b6e0b;border-radius:16px;color:#827181;font-size:20px}.dir:active,.dir.pressed{transform:translateY(3px);box-shadow:0 2px 0 #ddcfd4;background:#f1d2dc}.up{grid-area:1/2}.left{grid-area:2/1}.right{grid-area:2/3}.down{grid-area:3/2}.pad-center{grid-area:2/2;display:grid;place-items:center;color:#bd8f9c;font-size:24px}.key-hint{font-size:9px;letter-spacing:2px;color:#9c8891}.action-area{display:flex;align-items:end;gap:15px}.slow-button,.action-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:24px;height:119px;min-width:118px;padding:12px 24px;transition:background .15s,transform .15s}.slow-button{background:#fffaf5;box-shadow:0 5px 0 #dfd4cc;color:#6b7968;border:2px solid white}.slow-button>span{font-size:30px}.slow-button b{font-size:14px}.slow-button small,.action-button small{font-size:9px;letter-spacing:1.5px;opacity:.75}.slow-button[aria-pressed=true]{background:#d5ebca;border-color:#9bc591;box-shadow:0 5px 0 #9fc396}.action-button{background:#c75c80;color:white;box-shadow:0 5px 0 #a74769;min-width:166px}.action-button>span{font-size:32px;line-height:1}.action-button b{font-size:18px}.action-button:disabled{background:#e2c8d1;box-shadow:0 5px 0 #cbb2bd;color:#876e7a;cursor:default}.action-button:not(:disabled):active,.primary:active{transform:translateY(3px)}footer{position:absolute;bottom:15px;left:32px;right:32px;display:flex;align-items:center;gap:18px;font-size:10px;color:#97818d;letter-spacing:.3px}footer>span{margin-right:auto}footer button,footer a{background:none;color:#8c7381;font-size:11px;text-decoration:none;padding:5px}.toast{position:absolute;top:108px;left:50%;transform:translate(-50%,-12px);padding:14px 24px;background:#486d67;color:#fff;border-radius:30px;opacity:0;transition:opacity .2s,transform .2s;font-size:18px;pointer-events:none;text-align:center;max-width:90%}.toast.show{opacity:1;transform:translate(-50%,0)}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#f7edf440;backdrop-filter:blur(5px);z-index:10}.hidden{display:none!important}.intro-card{width:415px;padding:28px 35px 26px;text-align:center;background:#fffaf5f5;border-radius:34px;border:2px solid white;box-shadow:0 26px 90px #886a812e}.pill{font-size:9px;font-weight:800;letter-spacing:1.8px;padding:8px 12px;border:1px solid #e4cdd3;border-radius:30px;color:#a87183;display:inline-block}.hero-symbol{font-size:69px;line-height:1.15;color:#c45a80;margin:14px 0 3px}.intro-card h2{font-size:43px;letter-spacing:-1.6px;line-height:1.04;margin:4px 0 18px}.intro-card em{font-style:normal;color:#c45a80}.intro-card p{font-size:14px;line-height:1.7;color:#867681}.intro-tip{display:flex;align-items:center;justify-content:center;gap:8px;background:#edf0e5;border-radius:14px;padding:12px 6px;font-size:12px;color:#65725d;margin:19px 0}.intro-tip>span:first-child{font-size:25px}.primary{display:flex;align-items:center;justify-content:space-between;width:100%;padding:17px 24px;border-radius:17px;color:#fff;background:#c45a80;font-size:20px;font-weight:800;box-shadow:0 5px 0 #a94d6e}.primary>span{font-size:18px}.intro-card>small{display:block;font-size:9px;color:#a4919b;margin-top:20px;line-height:1.5}.finish-icons{font-size:36px;color:#bf577b;margin:22px}.finish-icons>span{font-size:18px;color:#b8aaa6}.end-card .hero-symbol{font-size:80px;color:#d0a54e}
@media(max-width:1000px){.topbar{top:15px;left:20px;right:20px}.brand small{font-size:8px;letter-spacing:1px}.brand h1{font-size:25px}.brand-icon{font-size:36px}.progress{top:84px;padding:8px 15px}.instruction{top:150px;left:20px;padding:10px 13px}.instruction h2{font-size:18px}.toolbar{gap:1px}.volume{width:65px}.volume input{width:56px}.controls{left:20px;right:20px}.toast{top:139px}footer{left:20px;right:20px}}
@media(max-height:650px){.topbar{top:12px}.brand small{display:none}.brand h1{font-size:24px}.progress{top:16px}.instruction{top:85px;padding:9px 12px}.instruction h2{font-size:16px}.instruction p{font-size:10px}.instruction>span{width:36px;height:36px;font-size:26px}.controls{bottom:41px}.dpad{grid-template:repeat(3,41px)/repeat(3,41px)}.dir{border-radius:12px}.slow-button,.action-button{height:95px;min-width:105px;padding:8px 18px;border-radius:20px}.action-button b{font-size:16px}.slow-button>span{font-size:24px}.intro-card{padding:15px 28px;width:365px}.intro-card h2{font-size:33px;margin-bottom:10px}.hero-symbol{font-size:45px;margin:8px 0}.intro-card p{margin:8px 0;font-size:12px}.intro-tip{margin:12px 0;padding:8px}.intro-card>small{margin-top:13px}.pill{font-size:8px;padding:6px 10px}.primary{padding:12px 19px}.toast{top:87px}}
@media(max-width:600px) and (min-height:651px){.brand small{display:none}.brand h1{font-size:23px}.brand-icon{font-size:30px}.volume{display:none}.icon-button{width:34px;height:34px}.instruction{top:145px;right:20px;max-width:none}.controls{left:12px;right:12px;bottom:55px}.dpad{grid-template:repeat(3,40px)/repeat(3,40px)}.action-area{gap:9px}.slow-button,.action-button{min-width:91px;padding:10px;height:106px}.action-button b{font-size:14px}.slow-button b{font-size:11px}.slow-button small,.action-button small{font-size:8px}.intro-card{width:calc(100% - 36px);max-width:390px}.intro-card h2{font-size:37px}footer>span{display:none}.toast{top:235px;font-size:15px}.progress{gap:8px}.step{font-size:12px}}