@import url('../farm/style.css');
:root{background:#f3f6e9;color:#395f56}.brand-mark{background:#dfefcb}.brand-mark svg{width:39px;height:39px}.brand h1{color:#3d685c}.brand small{color:#82978a;letter-spacing:1.6px}.pond-world{background:radial-gradient(ellipse at 45% 10%,#f9f9e5,#e6f1db 55%,#d6e8d2);border-color:#d4e1c5}.pond-order{position:absolute;top:18px;left:50%;transform:translateX(-50%);display:flex;gap:19px;align-items:center;padding:10px 14px 10px 21px;min-width:286px;background:#fffdf2;border:2px solid #afcfbf;border-bottom:5px solid #7db39d;border-radius:27px;box-shadow:0 6px 20px #48786b12}.pond-order .eyebrow{display:block;text-align:left;margin:0 0 1px;color:#6a8e80;font-size:11px}.pond-order h2{margin:0;font-size:24px;line-height:1.45;font-weight:500;color:#3e7462;outline:none}.pond-order .listen{width:61px;height:61px;flex:none;border:3px solid #fff9e9;outline:2px solid #23758e;background:#278ba5;box-shadow:0 5px #1a6d83}.pond-order .listen .icon{width:29px;height:29px}.beat-dots{display:flex;gap:5px;margin-top:5px}.beat-dots i{width:7px;height:7px;background:#d7e5d3;border-radius:50%}.croak-beat .beat-dots i{background:#f1b340}.croak-beat .pond-order{border-color:#dfa53d;box-shadow:0 0 0 5px #fff8df}.pond-order #visual-rescue{position:absolute;top:calc(100% + 13px);left:50%;transform:translateX(-50%);align-items:center;justify-content:center;gap:8px;width:196px;min-height:50px;border:2px solid #347d83;border-bottom-width:4px;border-radius:18px;background:#fff9e5;color:#326a71;font-size:13px;white-space:nowrap}#visual-rescue:not([hidden]){display:flex}.bottom-note{max-width:calc(100% - 230px);gap:13px;border:2px solid #c9d9bd;border-bottom:4px solid #acc4a2;left:25px;bottom:24px;padding:8px 16px 8px 12px;min-height:68px}.bottom-note p{font-size:13px;color:#58786b}.live-count{display:flex;align-items:center;gap:8px;padding-right:14px;border-right:1px solid #d0ddc4}.live-count svg{width:42px;height:36px}.live-count output{font:700 37px/1.1 TrainNumbers,sans-serif;color:#3c8666;min-width:29px}.check-button{min-width:151px;min-height:74px;bottom:27px;right:28px;background:#3c9d64;box-shadow:0 6px #247247,0 0 0 2px #247247,0 9px 17px #335c3823}.check-button:disabled{opacity:.45;filter:saturate(.45);cursor:default}.check-button.hint{outline:4px solid #e4b841;outline-offset:7px}.bottom-note.success{background:#eaf7d9;border-color:#9abb80}.bottom-note.retry{border-color:#e2bc74;background:#fff6df}.bottom-note.retry p{color:#886b2e}.round-progress{top:30px}.welcome-mark{width:104px;height:98px;background:#e0edcb;transform:rotate(-4deg);border:1px solid #cbdcb9}.welcome-mark svg{width:75px;height:67px}.welcome-mark.small svg{width:48px;height:44px}.eyebrow{color:#829a79}.dialog-intro{color:#779180}.primary{background:#3e986d;border-color:#2b7753;box-shadow:0 4px #2b7753}.primary:hover{background:#33835d}dialog{border-color:#c6d9b9;color:#426755}dialog::backdrop{background:#355e5040}.demo-step{display:grid;place-items:center;width:64px;height:64px;border:3px solid #fffdf0;border-radius:21px;background:#e7f0d4;box-shadow:0 4px #bed2af;color:#467f67}.demo-step svg{width:44px;height:44px}.demo-step .icon{width:36px;height:36px}.demo-step:first-child{background:#dceef3;color:#30778c;box-shadow:0 4px #b5d1db}.demo-step.check{background:#44976d;color:white;box-shadow:0 4px #2a6b4c}.welcome-demo{gap:9px}.welcome-demo .demo-arrow{width:21px;color:#9eb19b}.motion-setting input{accent-color:#398864}
.tap-guide{position:absolute;z-index:4;width:106px;height:106px;pointer-events:none;transform-origin:34px 9px}.tap-guide img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 3px #31544833);animation:tap-tip 1.9s ease-in-out infinite}.tap-guide[hidden]{display:none}@keyframes tap-tip{0%,100%{transform:translateY(-8px) rotate(-8deg)}45%,65%{transform:translateY(0) rotate(-8deg) scale(.92)}}.fallback-pond{position:absolute;inset:24% 8% 20%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px}.fallback-frog{width:120px;height:112px;padding:13px;background:#fff9df;border:5px solid #fffef0;border-radius:40px;box-shadow:0 6px #9bbb79}.fallback-frog svg{width:100%;height:100%}.fallback-pads{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;width:min(700px,100%);padding:27px;background:#7cc5c7;border:9px solid #e7eacb;border-radius:40px;box-shadow:0 8px #9ac6ad}.fallback-pads button{width:100%;min-height:67px;aspect-ratio:1.2;padding:7px;background:#70ae67;border:4px solid #fffde5;border-radius:50%;color:#ffe078;font-size:30px;box-shadow:0 5px #368875}.fallback-pads button[aria-pressed=true]{background:#ffdc72;color:#417a56;box-shadow:0 5px #be963e}.fallback-pads button:disabled{opacity:.7}.fallback-pond.croak-beat .fallback-frog{background:#ffdc72}.pond-world button,.header button{touch-action:manipulation}.pond-world button:focus-visible,.header button:focus-visible{outline:4px solid #b34c7d;outline-offset:5px}.pond-order h2:focus-visible{outline:3px solid #24758e;outline-offset:3px;border-radius:5px}
@media(max-width:900px){.brand h1{font-size:16px}.pond-order{top:20px}.round-progress{left:18px}.bottom-note{left:21px;max-width:calc(100% - 210px)}.check-button{right:23px;min-width:139px}.fallback-pond{inset:23% 6% 18%}}
@media(max-width:600px){.brand h1{font-size:12px}.brand-mark svg{width:29px;height:29px}.pond-order{min-width:248px;top:15px;gap:12px;padding:9px 11px 9px 16px;border-radius:24px}.pond-order h2{font-size:20px}.pond-order .listen{width:52px;height:52px}.pond-order .eyebrow{font-size:10px}.round-progress{top:121px;left:17px;flex-direction:row;align-items:center;gap:8px}#progress{display:flex;gap:3px}.progress-star{width:15px;height:15px}.bottom-note{left:14px;bottom:22px;max-width:calc(100% - 113px);padding:8px 10px;gap:8px;min-height:64px}.live-count{gap:5px;padding-right:0;border-right:0}.live-count svg{width:31px;height:29px}.live-count output{font-size:31px;min-width:21px}.bottom-note p{font-size:10px;max-width:108px}.check-button{min-width:73px;width:73px;height:65px;min-height:65px;right:18px;bottom:25px}.check-button .icon{width:35px}.fallback-pond{inset:25% 4% 20%;gap:28px}.fallback-pads{gap:9px;padding:12px;border-width:6px}.fallback-pads button{min-height:45px;font-size:20px}.fallback-frog{width:105px;height:98px}.tap-guide{width:87px;height:87px}.header-actions .icon-button{min-width:39px}}
@media(max-height:650px) and (min-width:601px){.pond-order{top:10px;padding-block:6px;min-width:270px}.pond-order h2{font-size:21px}.pond-order .listen{height:52px;width:52px}.round-progress{top:21px}.bottom-note{bottom:17px;min-height:57px}.check-button{bottom:19px;min-height:60px;height:60px}.fallback-pond{gap:12px;inset:24% 7% 20%;flex-direction:row}.fallback-frog{flex-shrink:0}.fallback-pads{padding:15px;gap:10px}}