:root{font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif;color:#254d40;background:#faf8ef;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,select{font:inherit;color:inherit;cursor:pointer}button{touch-action:manipulation}button:focus-visible,a:focus-visible,select:focus-visible{outline:4px solid #df913a;outline-offset:4px}button{border:0}header,main,footer{max-width:1120px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:28px 24px}.brand{font-weight:800;font-size:25px;color:inherit;text-decoration:none;letter-spacing:-1px}.brand>span{color:#dd8d50;font-size:38px;vertical-align:middle}.brand small{display:block;font-size:9px;letter-spacing:3px;margin-left:40px}.quiet{background:transparent;border:1px solid #d6dfd4;border-radius:30px;padding:12px 18px;font-size:13px;font-weight:bold}main{padding:0 24px}.welcome{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding:38px 0 45px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:#7c9074}h1{font-size:65px;line-height:1.07;letter-spacing:-3px;margin:20px 0}h1 em{font-style:normal;color:#e49957}.intro{line-height:1.8;color:#718074;font-size:15px}.garden-count{display:flex;gap:12px;align-items:center;margin-top:28px}.garden-count>span{font-size:29px;background:#edf0df;padding:12px;border-radius:18px}.garden-count strong{font-size:13px}.garden-count small{display:block;font-size:11px;color:#7e8a78;margin-top:6px}.scene{height:310px;background:#edf0dc;border-radius:46% 46% 28% 28%;position:relative;overflow:hidden}.sun{position:absolute;right:52px;top:20px;font-size:65px;color:#efbc57}.cloud{position:absolute;left:35px;top:25px;font-size:60px;color:white}.hill{position:absolute;border-radius:50% 50% 0 0;bottom:-80px;left:-10%;width:120%;height:220px;background:#d7e1bc}.float{position:absolute;z-index:1;font-size:55px;font-weight:bold;border-radius:22px;width:88px;height:95px;text-align:center;box-shadow:0 8px 0 #00000009}.one{left:55px;top:105px;background:#f7d9b7;transform:rotate(-12deg)}.two{left:170px;top:77px;background:#f8edaf;transform:rotate(7deg)}.three{right:55px;top:130px;background:#d1dfce;transform:rotate(13deg)}.stem{position:absolute;z-index:2;font-size:65px;bottom:32px}.st1{left:35px}.st2{right:22px}.mascot{position:absolute;left:44%;bottom:21px;z-index:3;font-size:75px;transform:rotate(-12deg)}.scene-label{position:absolute;bottom:9px;font-size:9px;letter-spacing:1px;width:100%;text-align:center;z-index:3;color:#77856a}nav{display:flex;gap:8px;border-bottom:1px solid #e4e5d8;padding-bottom:16px}nav button{padding:16px 24px;border-radius:16px;background:transparent;font-size:17px;display:flex;gap:10px;align-items:center}nav button span{font-size:13px;font-weight:bold}nav button.active{background:#285e4c;color:white}.playground{padding:30px 0 14px}.section-top{display:flex;align-items:center;justify-content:space-between;gap:12px}h2{font-size:25px;letter-spacing:-.6px;margin:10px 0}.group-label{font-size:10px;color:#788b76;display:grid;gap:7px}select{background:#fffdf7;border:1px solid #e0e4d5;border-radius:12px;padding:10px;font-size:12px}#instruction{font-size:13px;color:#788675}.letters{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:25px 0}.letter{border-radius:24px;background:#f4e2cb;border:1px solid #e9d5ba;min-height:170px;box-shadow:0 5px 0 #d9c4a5;position:relative;transition:transform .15s}.letter:nth-child(4n+2){background:#eef0cf;border-color:#e0e3b8;box-shadow:0 5px 0 #d5d8ae}.letter:nth-child(4n+3){background:#dce8df;border-color:#cadcce;box-shadow:0 5px 0 #bcd1c0}.letter:nth-child(4n+4){background:#f5ded5;border-color:#ebcbbd;box-shadow:0 5px 0 #ddbdaf}.letter b{display:block;font-family:'Comic Sans MS','Trebuchet MS',sans-serif;font-size:76px;font-weight:normal;line-height:1.2}.letter small{display:block;letter-spacing:1px;font-size:10px;margin-top:8px;color:#647360}.letter:hover{transform:translateY(-4px)}.letter.playing{transform:translateY(-8px);outline:4px solid #d9954b}.speaker{position:absolute;right:15px;top:12px;font-size:16px}.tip{font-size:11px;color:#89937b;text-align:center}.word-box{text-align:center;background:#f0f1e3;border-radius:24px;padding:28px;margin-top:24px}.train{display:flex;justify-content:center;gap:12px;margin:15px 0 28px}.train button{width:100px;height:120px;background:#fffdf6;border-radius:18px;border-bottom:8px solid #d6ddc3;font-size:65px}.train button.playing{background:#f8dfa5;transform:translateY(-5px)}.primary{background:#2c6650;color:#fff;padding:16px 24px;border-radius:16px;font-weight:bold;font-size:15px;margin:5px}.secondary{background:#e8d5b8;padding:16px 24px;border-radius:16px;font-weight:bold;margin:5px}.reward{font-size:35px;min-height:48px;margin:15px}.game-head{text-align:center;padding-top:20px}.game-head p{font-size:12px}.progress{display:flex;justify-content:center;gap:7px;margin:12px}.dot{height:9px;width:9px;border-radius:50%;background:#dfe4d4}.dot.done{background:#63946c}#feedback{text-align:center;min-height:46px;padding:16px;font-size:13px;color:#60765a}.bottom{padding:22px 0;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e4e5d8;gap:15px;font-size:11px;color:#7d8b73}.bottom strong{color:#526b4d}footer{padding:22px 24px 28px;font-size:10px;color:#8d977f;display:flex;justify-content:space-between}dialog{border:1px solid #dce1cf;border-radius:24px;padding:30px;max-width:580px;color:#345442;background:#fffdf5;line-height:1.7}dialog::backdrop{background:#16392c88}dialog p{font-size:14px}.close{float:right}a{color:#34684d}@media(max-width:650px){header{padding:18px}.brand{font-size:21px}main{padding:0 18px}.welcome{grid-template-columns:1fr;padding:18px 0 25px;gap:25px}h1{font-size:49px;margin:12px 0}.intro{font-size:13px}.scene{height:215px}.float{font-size:45px;width:65px;height:75px}.one{top:60px}.two{top:35px;left:43%}.three{top:70px;right:40px}.sun{font-size:45px;top:0;right:30px}.cloud{top:0}.hill{height:180px}.mascot{font-size:57px}.stem{font-size:50px}.garden-count{margin-top:18px}nav{gap:4px}nav button{flex:1;flex-direction:column;padding:12px 5px;gap:6px}nav button span{font-size:10px}.letters{grid-template-columns:repeat(2,1fr);gap:15px}.letter{min-height:140px}.letter b{font-size:64px}h2{font-size:21px}.section-top{align-items:start}.group-label{max-width:140px}.bottom{flex-direction:column;align-items:start}footer{gap:18px;font-size:9px}.train button{width:75px;height:100px;font-size:52px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

:root .train{transition:gap .3s}.train.joined{gap:0}.train.joined button{border-radius:5px}.blend-guide{font-size:13px;color:#718169}.blend-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:15px}.train button{transition:background .1s,transform .1s}