@import url('../farm/style.css');
.patterns-world .hint-button{top:auto}
:root{background:#f8f3e7;color:#556568}.brand-mark{background:#d5e8dc}.brand-mark svg{width:33px;height:34px}.brand small{color:#77978c;font-size:9px;letter-spacing:1.4px}.brand h1{color:#4d7176}.patterns-world{background:radial-gradient(ellipse at 50% 12%,#f9f7d9,#e2eedf 60%,#d7e7e4);border-color:#c9dcd5}.patterns-order{min-width:0;padding:12px 14px 13px 18px;border-color:#b9d4cd;border-bottom-color:#8cafa4;box-shadow:0 5px 20px #4b837015}.patterns-order .order-content{gap:15px}.order-train{width:43px;height:43px}#question{margin:0;color:#446f75;font:500 20px/1.5 Mitr,sans-serif;outline:none}.listen{width:51px;height:51px;background:#3c9da3;color:#fffef2;border:3px solid #fffdf3;outline:2px solid #24757d;box-shadow:0 4px #2e747b}.listen:hover{background:#29878e}.round-progress{top:29px}.bottom-note{left:24px;bottom:25px;min-height:58px;padding:9px 16px;border:2px solid #c0d5be;border-bottom:4px solid #9db79d;max-width:55%;gap:12px}.bottom-note>.icon{color:#5c9183;width:26px;height:29px}.bottom-note p{font-size:12px;color:#6b7e6e}.bottom-note.success{background:#ecf6d9;border-color:#89b177}.bottom-note.success p{color:#407446}.hint-button{position:absolute;right:28px;bottom:29px;z-index:5;display:grid;place-items:center;width:62px;height:62px;background:#efbd61;color:#795728;border:3px solid #fff9df;border-radius:21px;outline:2px solid #ad7e37;box-shadow:0 5px #a97d40;cursor:pointer;touch-action:manipulation}.hint-button .icon{width:31px;height:31px}.hint-button:hover{background:#f5cd7b}.hint-button:disabled{opacity:.45;cursor:default}.hint-button:focus-visible{outline:4px solid #1d639b;outline-offset:5px}.feedback-wrong .patterns-order{border-color:#d8a76b}.dialog-mark{display:grid;place-items:center;width:90px;height:84px;margin:0 auto 12px;border-radius:27px;background:#e2f0df}.dialog-mark svg{width:72px;height:65px}.pattern-demo{display:flex;gap:6px;align-items:center;justify-content:center;margin:19px auto}.pattern-demo svg{width:53px;height:57px}.pattern-demo span{display:grid;place-items:center;width:51px;height:53px;border:3px dashed #56aab0;border-radius:15px;background:#e0f0e7;color:#3c929c;font:700 34px TrainNumbers,sans-serif}.primary{background:#3d9998;border-color:#2d7778;box-shadow:0 4px #2a6a6d}.primary:hover{background:#2e8385}.primary .icon{width:23px;height:23px;margin-left:7px;vertical-align:middle}.tap-help{font-size:12px;line-height:1.8;color:#748678}.motion-setting input{accent-color:#3c9799}.close{background:#d9ece5;color:#497f80}.fallback-patterns{position:absolute;inset:23% 3% 17%;display:grid;align-content:center;gap:70px}.fallback-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.fallback-row button{display:grid;place-items:center;aspect-ratio:1/1.2;width:100%;padding:8px;border:4px solid #fffaf0;border-radius:22px;background:#dfc197;box-shadow:0 5px #bd966b;color:#418e95;font:700 50px TrainNumbers,sans-serif;cursor:pointer}.fallback-row button:last-child{border:4px dashed #40a8ac;background:#dcf0df}.fallback-row svg{width:100%;height:auto}.fallback-row button.hinted{outline:4px solid #edb93f;outline-offset:3px}.fallback-choices{display:flex;justify-content:center;gap:30px}.fallback-choices button{display:grid;place-items:center;width:25%;max-width:160px;aspect-ratio:1;background:#fff1d1;border:4px solid #fffdf0;outline:3px solid #c89755;border-radius:29px;box-shadow:0 7px #c29c68;cursor:pointer;touch-action:manipulation}.fallback-choices svg{width:78%;height:78%}.fallback-choices button.wrong{outline-color:#d57f67;background:#f8e0ce}.fallback-patterns button:focus-visible{outline:4px solid #2a689d;outline-offset:4px}.fallback-patterns button:disabled{cursor:default}.pattern-controls button[data-kind="choice"]{touch-action:none;-webkit-user-select:none;user-select:none}
@media(max-width:900px){.brand h1{font-size:14px}.brand small{font-size:8px}.patterns-order{top:18px}.bottom-note{left:20px}.round-progress{left:20px}.fallback-row{gap:8px}.fallback-choices{gap:22px}}
@media(max-width:600px){.brand h1{font-size:10px}.brand small{font-size:6px;letter-spacing:.8px}.patterns-order{top:15px;padding:9px 11px}.patterns-order .order-content{gap:9px}.order-train{width:29px;height:32px}#question{font-size:15px}.listen{width:43px;height:43px}.round-progress{top:106px;left:17px;flex-direction:row;gap:9px;align-items:center}#progress{display:flex;gap:3px}.progress-star{width:17px;height:17px}.bottom-note{left:15px;bottom:22px;min-height:50px;padding:8px 11px;gap:7px;max-width:72%}.bottom-note p{font-size:10px}.bottom-note>.icon{width:23px}.hint-button{right:20px;bottom:27px;width:48px;height:49px;border-radius:17px}.hint-button .icon{width:26px;height:26px}.fallback-patterns{inset:28% 3% 18%;gap:50px}.fallback-row{gap:4px}.fallback-row button{padding:2px;border-width:2px;border-radius:13px;font-size:28px}.fallback-row button:last-child{border-width:2px}.fallback-choices{gap:17px}.fallback-choices button{border-radius:19px}}
@media(max-height:650px) and (min-width:601px){.patterns-order{top:10px;padding-block:6px}#question{font-size:17px}.order-train{width:35px;height:36px}.listen{width:44px;height:44px}.round-progress{top:20px}.bottom-note{bottom:16px}.hint-button{bottom:20px;width:53px;height:53px}}