:root{--bg:#e6f4f1;--card:#ffffff;--ink:#1f3347;--sub:#5d7487;--pri:#ff6f91;--soft:#ffe9a8;--ok:#1f9d6e;--line:#b9dcd5;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#12222b;--card:#1d3340;--ink:#eaf4f6;--sub:#9db6c3;--pri:#ff86a4;--soft:#4a4a2c;--ok:#4cd3a0;--line:#2f4d5a;color-scheme:dark}}:root[data-theme=dark]{--bg:#12222b;--card:#1d3340;--ink:#eaf4f6;--sub:#9db6c3;--pri:#ff86a4;--soft:#4a4a2c;--ok:#4cd3a0;--line:#2f4d5a;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{font-size:clamp(16px,2.4vmin + 6px,30px)}html,body{height:100%;margin:0;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}body{background:var(--bg);color:var(--ink);font-family:PingFang SC,Microsoft YaHei,Hiragino Sans GB,system-ui,sans-serif;display:flex;justify-content:center}#app{width:100%;max-width:900px;height:100%;overflow-y:auto;padding:10px 14px 18px}button{font:inherit;color:inherit;border:0;cursor:pointer;background:none;padding:0;touch-action:manipulation}header{display:flex;align-items:center;gap:8px;min-height:46px}.ib{font-size:1.4rem;width:3rem;height:3rem;border-radius:50%;background:var(--card);border:2px solid var(--line);flex:none}#dots{flex:1;text-align:center;font-size:1.1rem;letter-spacing:2px}#msg{text-align:center;min-height:2.2rem;font-size:1.3rem;font-weight:800;margin:6px 0 2px;color:var(--pri)}.bub{display:flex;align-items:center;gap:10px;background:var(--card);border:3px solid var(--line);border-radius:24px;padding:10px 14px;font-size:1.25rem;font-weight:700}.bub>span:first-child{font-size:2.4rem}.bub b{font-size:2.8rem;color:var(--pri);line-height:1}.spk{margin-left:auto;font-size:1.4rem}.field{position:relative;min-height:14rem;margin:12px 0;background:var(--card);border:3px solid var(--line);border-radius:26px;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:6px;padding:12px}.field.sc{display:block;height:16rem}.it{font-size:2.5rem;line-height:1;padding:4px;border-radius:14px;position:relative;display:inline-block}.sc .it{position:absolute}.it.done{background:var(--soft)}.it.done:after{content:attr(data-n);position:absolute;right:-4px;bottom:-6px;background:var(--pri);color:#fff;font-size:.8rem;font-weight:800;border-radius:10px;min-width:20px;padding:1px 5px;line-height:1.3}.ch{display:flex;gap:12px;justify-content:center}.num{flex:1;max-width:11rem;height:5.5rem;font-size:3rem;font-weight:800;background:var(--card);border:3px solid var(--line);border-radius:24px}.num:active,.grp:active,.same:active{transform:scale(.96)}.hl{border-color:var(--ok)!important;background:var(--soft)!important}.x{opacity:.35}.pile{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin:4px 0 6px}.gone{visibility:hidden}.ph{font-size:3rem;opacity:.35}.go{display:block;width:100%;margin-top:12px;padding:18px;border-radius:26px;background:var(--pri);color:#fff;font-size:1.5rem;font-weight:800}.go.alt{background:var(--card);color:var(--ink);border:3px solid var(--line)}.two{display:flex;gap:12px;margin:12px 0}.grp{flex:1;min-height:13rem;background:var(--card);border:3px solid var(--line);border-radius:26px;padding:10px}.gi{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;align-content:center}.same{display:block;width:100%;padding:16px;border-radius:24px;background:var(--card);border:3px solid var(--line);font-size:1.5rem;font-weight:800}.menu h1,.fin h2{text-align:center;margin:14px 0 8px}.mb{display:flex;align-items:center;gap:16px;width:100%;margin:12px 0;padding:20px;background:var(--card);border:3px solid var(--line);border-radius:28px;font-size:1.6rem;font-weight:800}.mb span{font-size:2.6rem}.fin{text-align:center}.bigem{font-size:4.5rem;margin-top:20px}.st{font-size:2rem;margin:8px 0 14px}.par h2{margin:12px 0}.pc{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:4px 14px;margin:10px 0}.pc h3{margin:10px 0 4px}.lb{width:2.2rem;height:2.2rem;margin-left:.4rem;border-radius:50%;background:var(--soft);font-size:1.2rem;font-weight:800;vertical-align:middle}.zone{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center}.field{gap:1.2rem}.tag{font-size:2.6rem;font-weight:800;color:var(--pri)}.big{font-size:2.6rem;font-weight:800}.cover{position:relative;display:flex;align-items:center;justify-content:center;min-width:7rem;height:6rem;border-radius:20px;background:var(--soft);border:3px solid var(--line)}.cover:before{content:"🧺";position:absolute;font-size:3.4rem;opacity:.3}.cover b{position:relative;font-size:2.6rem}.it.new{background:var(--soft);animation:bob .5s 2}.it.out{opacity:.3;filter:grayscale(1)}.eaten{opacity:.2;filter:grayscale(1);transition:.7s}.change-field{align-items:center}.change-field.reviewing{min-height:0;margin:8px 0;padding:10px}.change-start{flex-direction:column;max-width:100%}.change-facts{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.6rem;margin:12px 0;font-size:1.05rem}.change-facts b{font-size:1.45rem}.change-sign{font-size:1.7rem;font-weight:700}.change-basket{position:relative;display:flex;align-items:center;justify-content:center;width:8rem;height:6rem;background:var(--soft);border:3px solid var(--line);border-radius:22px}.change-basket>span{font-size:4rem;opacity:.35}.change-basket>b{position:absolute;font-size:2.6rem;color:var(--ink)}.change-transit{display:flex;flex-wrap:wrap;justify-content:center;max-width:12rem}.change-transit.arriving{animation:arrive 1.4s ease-in-out both}.change-transit.leaving{animation:leave 1.4s ease-in-out both}.change-review{text-align:center;font-size:1.25rem;font-weight:800;margin-top:8px}#change-next{padding:14px}.change-result-label{font-size:1rem;color:var(--sub)}.change-result{max-width:24rem}.num:disabled{cursor:default}@keyframes arrive{0%{transform:translate(1rem);opacity:1}70%{opacity:1}to{transform:translate(-2rem);opacity:0}}@keyframes leave{0%{transform:translate(-2rem);opacity:0}30%,70%{opacity:1}to{transform:translate(1rem);opacity:0}}.hide-field{align-items:center}.hide-visible{display:flex;flex-direction:column;align-items:center;gap:.5rem;min-width:10rem;max-width:13rem}.hide-caption{margin:0;color:var(--sub);font-size:1rem}.hide-caption b{color:var(--ink);font-size:1.3rem}.leaf-patch{position:relative;width:13rem;height:8.5rem;flex:none}.leaf-items{position:absolute;inset:0;align-content:center}.leaf-cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;height:100%;border-radius:20px}.leaf-picture{display:block;width:100%;height:7rem}.leaf-picture svg{display:block;width:100%;height:100%}.leaf-caption{font-size:.8rem;color:var(--sub)}.leaf-patch.is-open{border:2px solid var(--line);border-radius:20px}.pc p,.pc li{margin:4px 0;font-size:.95rem}.sub{color:var(--sub)}#hand{position:fixed;z-index:60;display:none;font-size:3.4rem;pointer-events:none;margin:-.3em 0 0 -.45em;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25));animation:tap .9s ease-in-out infinite;transition:left .8s,top .8s}.pop{position:fixed;z-index:60;font-size:2.6rem;font-weight:800;color:var(--pri);pointer-events:none;animation:popn .9s forwards;text-shadow:0 2px 0 var(--card)}.cf{position:fixed;z-index:65;font-size:2.2rem;pointer-events:none;transform:translate(-50%,-50%);animation:fly 1.2s ease-out forwards}.drag{position:fixed;z-index:70;pointer-events:none;margin:0;transform:translate(-50%,-50%) scale(1.25)}.slot{display:inline-block;width:3.4rem;height:3.4rem;border:3px dashed var(--sub);border-radius:16px;opacity:.55;margin:4px}#bk.over{border-color:var(--ok);background:var(--soft)}.hint{outline:.3rem solid var(--pri);outline-offset:3px;animation:glow 1.1s infinite}.it.hint{animation:glow 1.1s infinite,bob .7s ease-in-out infinite}.ch.hint{outline:none;animation:none}.ch.hint .num{outline:.3rem solid var(--pri);outline-offset:2px;animation:glow 1.1s infinite}.shake{animation:shake .45s}.talk{display:inline-block;animation:bob .35s 3}@keyframes tap{0%,to{transform:translate(0) scale(1)}50%{transform:translateY(-.6rem) scale(.88)}}@keyframes glow{0%,to{box-shadow:0 0 #ff6f91bf}60%{box-shadow:0 0 0 .9rem #ff6f9100}}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-.5rem)}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-.5rem)}40%,80%{transform:translate(.5rem)}}@keyframes popn{0%{transform:translate(-50%) scale(.4);opacity:0}30%{opacity:1;transform:translate(-50%,-1.2rem) scale(1.25)}to{transform:translate(-50%,-3.2rem) scale(1);opacity:0}}@keyframes fly{to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(360deg);opacity:0}}@media(orientation:landscape){.field{min-height:10rem}.field.sc{height:12rem}.grp{min-height:9rem}.num{height:4.5rem}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important}}.same{display:flex;align-items:center;justify-content:center;gap:.45rem;width:100%;min-height:60px;padding:12px;border-radius:24px;background:var(--card);border:3px solid var(--line);font-size:1.25rem;font-weight:700}.same-symbol{font-size:1.2rem;font-weight:600;line-height:1}#root,#root>div{width:100%;height:100%;display:flex;justify-content:center}#audio-status{font-size:.7rem;text-align:center;color:var(--sub)}#pause{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-content:center;padding:24px;text-align:center}[hidden]{display:none!important}html{height:100dvh}.lesson-scene,.lesson-actions{min-width:0}.celebration{position:fixed;inset:0;z-index:80;overflow:hidden;pointer-events:none}.firework-launch{position:absolute;left:50%;top:28%;font-size:30px;line-height:1;animation:firework-rise .72s cubic-bezier(.15,.6,.3,1) both;animation-duration:.72s!important}.firework-launch:after{content:"";position:absolute;left:50%;top:80%;width:4px;height:60px;border-radius:4px;background:linear-gradient(#ffdf77,transparent);transform:translate(-50%)}.firework-burst{position:absolute;left:50%;top:28%;width:0;height:0}.firework-particle{position:absolute;left:0;top:0;font-size:var(--spark-size);line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.16));animation:firework-bloom var(--spark-duration) cubic-bezier(.12,.65,.22,1) var(--spark-delay) both;animation-duration:var(--spark-duration)!important}@keyframes firework-bloom{0%{opacity:0;transform:translate(-50%,-50%) rotate(0) scale(.15)}8%,70%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) rotate(var(--spark-angle)) scale(.65)}}@keyframes firework-rise{0%{opacity:0;transform:translate(-50%,calc(-50% + var(--launch-distance))) scale(.65)}8%{opacity:1}78%,88%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}@media(orientation:landscape)and (min-width:800px){#app{max-width:1440px;padding:8px 16px 12px}header{min-height:52px}.ib{width:clamp(52px,7vh,66px);height:clamp(52px,7vh,66px);font-size:1.3rem}#msg{min-height:1.4rem;font-size:1.1rem;margin:2px 0}.lesson-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:20px;align-items:stretch;margin-top:12px}.lesson-scene .field{margin:0}.lesson-actions{display:flex;flex-direction:column;justify-content:center;gap:12px}.lesson-actions .ch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.lesson-actions .num{width:100%;max-width:none;height:clamp(64px,13vh,100px);font-size:2.5rem}.lesson-actions .go,.lesson-actions .change-review{margin:0}.change-facts{margin:0 0 12px}.lesson-scene .hide-field{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.hide-visible{min-width:0;max-width:none}.leaf-patch{width:100%;max-width:13rem;height:clamp(140px,25vh,8.5rem);justify-self:center}.leaf-picture{height:calc(100% - 1.4rem)}.fin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:center;min-height:calc(100dvh - 180px)}.fin-actions{display:flex;flex-direction:column;gap:16px}.fin-actions .go{margin:0}.fin .bigem{margin-top:0}}.teach-entry{max-width:600px;margin:0 auto;text-align:center}.teach-entry h2{margin:6px 0}.teach-entry p{color:var(--sub);font-size:1rem}.teach-steps{display:flex;gap:6px;margin:4px 0 10px}.teach-steps>span{flex:1;padding:7px 4px;text-align:center;border-radius:12px;background:var(--card);color:var(--sub);font-size:.65rem}.teach-steps>.current{background:var(--soft);color:var(--ink);font-weight:800}.hide-teaching .bub{font-size:1.05rem}.hide-teaching .lesson-layout{margin-top:12px}.teach-scene{min-height:240px;padding:18px 12px;background:var(--card);border:3px solid var(--line);border-radius:26px;display:flex;flex-direction:column;justify-content:center;gap:18px}.teach-total{text-align:center;margin:0;font-size:1.1rem;color:var(--sub)}.teach-total b{color:var(--ink);font-size:1.5rem}.teach-whole{min-height:100px;gap:18px}.teach-whole .it{font-size:3rem;transition:background .2s,transform .2s}.teach-whole .it.done{animation:bob .45s}.teach-reference{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:1rem}.teach-arrangement{display:flex;flex-direction:column;gap:18px}.teach-dots{display:grid;grid-template-columns:repeat(var(--teach-total),minmax(0,1fr));width:100%}.teach-dot{justify-self:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--sub);background:var(--card);transition:background .3s,transform .3s}.teach-dot.matched{background:var(--ok);border-color:var(--ok)}.teach-parts{display:grid;grid-template-columns:repeat(var(--teach-total),minmax(0,1fr));align-items:center;max-width:100%}.teach-visible{grid-column:span 2;text-align:center}.teach-visible>.zone{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}.teach-visible p{font-size:.9rem;margin:0 0 14px;color:var(--sub)}.teach-patch{grid-column:span var(--teach-hidden);position:relative;min-height:135px;display:grid;place-items:center}.teach-patch>#teach-hidden{display:grid;grid-template-columns:repeat(var(--teach-hidden),minmax(0,1fr));gap:0;width:100%;padding-bottom:30px;text-align:center}.teach-leaf{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;border-radius:16px}#teach-leaf-art{width:100%;max-width:230px;height:110px}#teach-leaf-art svg{display:block;width:100%;height:100%}#teach-leaf-label{font-size:.65rem;color:var(--sub)}.teach-leaf.is-open{inset:auto 0 0;min-height:30px;width:100%;background:var(--soft)}.teach-caption{margin:8px 0;text-align:center;min-height:3.5em;line-height:1.6;font-size:1rem}.teach-relation{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font-size:.85rem}.teach-relation>*{padding:5px 9px;border-radius:12px;background:var(--soft)}.teach-operation-parts{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center;text-align:center;width:100%}.teach-operation-parts p,.teach-joined p{margin:0 0 12px;color:var(--sub);font-size:.9rem;text-align:center}.teach-operation-sign{font-size:1.8rem;font-weight:800;color:var(--pri)}.teach-taken{opacity:.5;transform:translateY(14px)}.teach-remaining{background:var(--soft);border-radius:18px;padding:12px 4px}.teach-joined{width:100%;animation:teach-join .6s ease-out}.teach-relation{font-size:1rem;font-weight:800;line-height:1.6}.teach-back{display:block;margin:10px auto 0;color:var(--sub);font-size:.8rem;padding:8px 16px;min-height:44px}.hide-teaching button:disabled{cursor:default}.hide-teaching #teach-next:disabled,.hide-teaching #teach-back:disabled,.hide-teaching #teach-replay:disabled{opacity:.45}.teach-choice:disabled:not(.hl){opacity:.5}.teach-choices{margin:12px 0}.teach-choices .num{height:3.5rem;font-size:2.3rem}.hide-teaching .go{font-size:1.1rem;padding:16px}@keyframes teach-join{0%{transform:translateY(10px);opacity:.6}to{transform:translateY(0);opacity:1}}@media(orientation:landscape)and (min-width:800px){.hide-teaching .lesson-layout{align-items:center}.teach-scene{min-height:clamp(220px,42vh,270px)}.hide-teaching .lesson-actions{gap:4px}.hide-teaching .teach-caption{margin:0;min-height:0;font-size:.9rem}.hide-teaching .teach-choices{margin:0}.hide-teaching .teach-back{margin:0 auto}}:root{--forest-shade: transparent}body,#pause{background-color:var(--bg);background-image:linear-gradient(var(--forest-shade),var(--forest-shade)),url(/assets/forest-clearing-20261114-DaH1RPXh.png);background-position:center;background-size:cover;background-repeat:no-repeat}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--forest-shade: rgba(12, 30, 25, .72)}}:root[data-theme=dark]{--forest-shade: rgba(12, 30, 25, .72)}