@charset "UTF-8";
:root{--paper:#faf8f0;--ink:#465743;--green:#6f8e60;--muted:#94a087;--line:#e5e7d7;--font:"YouYuan","幼圆","STYuanti","Hiragino Maru Gothic ProN","Microsoft YaHei",sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{background:var(--paper);color:var(--ink);min-height:100%}body{margin:0;font-family:var(--font);user-select:none;-webkit-user-select:none;min-height:100svh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 60%,#eff2e680,transparent 65%)}button,a,input{touch-action:manipulation}button{font:inherit;cursor:pointer;border:0;color:inherit}button:disabled{cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #b4a0cd;outline-offset:5px}[hidden]{display:none!important}.class-header{height:95px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;flex-shrink:0}.brand{display:flex;align-items:center;gap:10px;font-size:20px;letter-spacing:1px;font-weight:600}.brand>span:first-child{width:42px;height:42px;transform:rotate(-12deg)}.brand svg{height:100%;width:100%}.brand small{display:block;font-family:Georgia,serif;font-size:8px;letter-spacing:2px;color:#99a28b;font-weight:400;margin-top:6px}.header-tools{display:flex;align-items:center;gap:12px}.back-link{font-size:12px;color:#8f9b81;padding:13px 8px}.back-link>span{margin-left:7px}.divider{height:17px;background:var(--line);width:1px;margin:0 7px}.icon-button{width:42px;height:42px;display:grid;place-items:center;background:transparent;border-radius:50%;color:#88977a}.icon-button:hover{background:#eef0e4}.icon-button svg{width:21px;height:21px}main{flex:1;width:100%;max-width:1400px;margin:auto;padding:5px 34px 28px}.class-nav{display:flex;flex-direction:column;align-items:center;gap:12px}.mode-switch{display:inline-flex;padding:5px;border:1px solid var(--line);border-radius:40px;background:#fffdf5b3;gap:4px}.mode-tab{min-height:50px;padding:0 30px;border-radius:30px;background:transparent;color:#9aa38d;font-size:14px;letter-spacing:1px}.mode-tab>span{font-size:20px;margin-right:8px;color:#b0b98c}.mode-tab.selected{background:var(--green);color:#fffdf4;box-shadow:0 3px 7px #5d76451a}.mode-tab.selected>span{color:#efdfaa}.club-note{font-size:10px;letter-spacing:2px;color:#a7af9b}.section-intro{text-align:center;margin-top:28px;pointer-events:none}.chapter-label{font-size:9px;letter-spacing:2px;color:#a4ad95;display:none}h1{font-size:clamp(26px,3vw,40px);letter-spacing:3px;font-weight:600;margin:0 0 12px}h1 em{font-style:normal;color:#7e9a69}.section-intro p{font-size:12px;letter-spacing:1px;color:#9aa58e;margin:0}.learning-stage{position:relative;max-width:720px;margin:0 auto;display:flex;align-items:center;justify-content:center}.lesson-card{position:relative;display:flex;align-items:center;flex-direction:column;justify-content:center;background:transparent;min-height:410px;width:min(100%,580px);padding:13px 25px 5px;isolation:isolate;outline-offset:-7px!important;transition:transform .25s}.lesson-card:not(:disabled):active{transform:scale(.98)}.portrait-halo{position:absolute;z-index:-1;top:47px;width:340px;height:287px;background:#e7eddc96;border-radius:47% 53% 57% 43% / 52% 44% 56% 48%;transform:rotate(-7deg)}.lesson-portrait{width:300px;height:300px;display:block;filter:drop-shadow(0 10px 10px #7d77560a)}.lesson-portrait svg{display:block;width:100%;height:100%}.lesson-caption{display:flex;align-items:baseline;justify-content:center;gap:18px;margin:12px 0 0;min-height:50px;white-space:nowrap}.lesson-caption strong{font-size:32px;font-weight:600;letter-spacing:3px;color:#5b7550}.lesson-caption>span{font:italic 31px Georgia,serif;color:#9caa88}.stage-spark{position:absolute;pointer-events:none;font-size:36px;color:#dac285}.spark-one{left:8%;top:37%;transform:rotate(-10deg)}.spark-two{right:10%;top:30%;font-size:23px;color:#c6b7d4}.little-leaf{position:absolute;width:27px;height:13px;border-radius:0 90% 0 90%;background:#c1d1ac;right:12%;bottom:19%;transform:rotate(-26deg)}.lesson-controls{display:flex;flex-direction:column;align-items:center;min-height:105px}.lock-dots{display:flex;gap:7px;height:12px;margin:5px 0 9px}.lock-dots i{display:block;width:5px;height:5px;background:#dfe4d4;border-radius:50%;transition:background .5s}.lock-dots i.passed{background:#94ae7d}.lesson-controls p{margin:0 0 9px;font-size:11px;letter-spacing:1px;color:#a0ac91}.quiet-button{padding:9px 16px;min-height:44px;background:transparent;color:#8d9e7b;font-size:12px;border-radius:30px;letter-spacing:1px;display:inline-flex;gap:7px;align-items:center;justify-content:center}.quiet-button:disabled{opacity:.35}.quiet-button:not(:disabled):hover{background:#eef0e4}.replay-symbol{font-size:22px;line-height:1}.next-mode-note{display:flex;align-items:center;justify-content:center;gap:6px;font-size:10px;color:#afb79f;letter-spacing:1px;margin-top:4px}.next-mode-note button{padding:10px 7px;background:transparent;color:#81986b;font-size:11px}.next-mode-note button>span{margin-left:7px}.primary-button{min-height:50px;padding:14px 27px;border-radius:30px;display:inline-flex;align-items:center;justify-content:center;gap:25px;background:#719061;color:#fffcf1;font-size:13px;letter-spacing:1px;box-shadow:0 3px 7px #607c4510}.primary-button:disabled{opacity:.4}.primary-button:not(:disabled):active{transform:translateY(1px)}
.quiz-welcome{display:flex;flex-direction:column;align-items:center;gap:28px;padding:22px 0}.quiz-welcome>span{height:280px;width:280px}.quiz-welcome svg{height:100%;width:100%}.choices{display:grid;grid-template-columns:1fr 1fr;gap:30px;max-width:860px;margin:30px auto 0}.quiz-choice{position:relative;background:#f2f3e7;border:2px solid #e6eadc;border-radius:38px;display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:330px;padding:17px 20px 13px;isolation:isolate;transition:background .25s,border-color .25s,transform .2s}.quiz-choice:nth-child(2){background:#f6eee6;border-color:#eee6db}.quiz-choice:not(:disabled):active{transform:scale(.98)}.quiz-choice svg{height:245px;width:245px;max-width:100%}.choice-label{min-height:33px;font-size:12px;letter-spacing:1px;color:#a3ac94;margin-top:7px}.choice-label span{font:italic 17px Georgia,serif;margin-left:8px}.choice-mark{position:absolute;top:20px;right:22px;color:#779861;font-size:26px;font-weight:600;line-height:1}.quiz-choice.is-correct{background:#e7efdc;border-color:#a6bf8e}.quiz-choice.is-wrong{border-color:#dbcaaf;background:#f3ecdf}.quiz-choice.is-wrong svg{opacity:.65}.quiz-choice:disabled{cursor:default}.quiz-feedback{text-align:center;min-height:57px;padding:22px 12px 7px;font-size:14px;letter-spacing:1px;color:#96a185;line-height:1.7}.quiz-feedback.correct{color:#76945e}.quiz-feedback.wrong{color:#b29972}.quiz-actions{display:flex;justify-content:center;align-items:center;gap:16px;min-height:63px}.quiz-actions .primary-button{min-width:172px}footer{min-height:61px;display:flex;align-items:center;justify-content:space-between;padding:15px 5vw;border-top:1px solid #e8eadf;font-size:9px;color:#a4ad97;letter-spacing:1px;flex-shrink:0}footer b{font-size:16px;color:#c8b77f;font-weight:400;margin-left:7px}footer i{font-style:normal;margin:0 8px;color:#ccd0bf}dialog{border:1px solid var(--line);border-radius:28px;padding:30px;width:min(430px,calc(100vw - 36px));color:var(--ink);background:#fffdf5;box-shadow:0 25px 100px #35432b26}dialog::backdrop{background:#45563d45;backdrop-filter:blur(5px)}.close-dialog{position:absolute;right:17px;top:13px;background:transparent;color:#9aa68d;font-size:27px}.dialog-flower{font-size:39px;color:#d4b76c}dialog h2{font-size:23px;margin:15px 0}dialog p{font-size:12px;line-height:1.9;color:#8d9b7e}dialog label{font-size:12px;display:flex;justify-content:space-between;margin-top:20px}dialog input[type=range]{width:100%;accent-color:#799568;margin:17px 0 25px}dialog .primary-button{width:100%}#audio-toast{position:fixed;z-index:20;bottom:30px;left:50%;transform:translateX(-50%);padding:13px 20px;white-space:nowrap;max-width:95vw;border-radius:30px;font-size:11px;background:#526749e8;color:#fff;opacity:0;pointer-events:none;transition:opacity .2s}#audio-toast.visible{opacity:1}.arrive{animation:hello-friend .45s ease-out}@keyframes hello-friend{0%{opacity:.3;transform:translateY(7px) scale(.95)}100%{opacity:1;transform:translateY(0) scale(1)}}
@media(min-width:1500px) and (min-height:950px){main{padding-top:15px}.section-intro{margin-top:40px}.lesson-card{min-height:500px}.lesson-portrait{width:385px;height:385px}.portrait-halo{width:440px;height:355px;top:55px}.choices{max-width:1000px;margin-top:40px;gap:40px}.quiz-choice{min-height:415px}.quiz-choice svg{height:320px;width:320px}}
@media(pointer:coarse){.icon-button{width:46px;height:46px}.mode-tab{min-height:54px}.lesson-card{touch-action:manipulation}.quiz-choice{touch-action:manipulation}.quiet-button{min-height:48px}}
@media(max-width:700px){.class-header{height:82px;padding:0 19px}.brand{gap:7px;font-size:16px}.brand>span:first-child{width:33px;height:33px}.brand small{font-size:6px;letter-spacing:1.4px}.header-tools{gap:1px}.icon-button{width:36px;height:42px}.icon-button svg{width:18px;height:18px}.back-link{font-size:10px;padding:10px 6px}.divider{display:none}.header-tools .back-link{display:none}main{padding:5px 18px 24px}.mode-tab{padding:0 24px;min-height:48px;font-size:12px}.mode-tab>span{font-size:19px}.club-note{font-size:9px;letter-spacing:1px}.section-intro{margin-top:32px}h1{font-size:27px;letter-spacing:1.5px;margin-bottom:13px}.section-intro p{font-size:10px;letter-spacing:.6px}.lesson-card{min-height:370px;padding:14px 0 0}.lesson-portrait{width:270px;height:270px}.portrait-halo{width:285px;height:255px;top:41px}.lesson-caption{gap:13px;margin-top:9px}.lesson-caption strong{font-size:28px;letter-spacing:2px}.lesson-caption>span{font-size:27px}.stage-spark.spark-one{left:0;font-size:29px}.stage-spark.spark-two{right:2%}.little-leaf{right:0}.lesson-controls{min-height:101px}.next-mode-note{font-size:9px}.choices{gap:12px;margin-top:36px}.quiz-choice{border-radius:27px;min-height:225px;padding:14px 9px 12px}.quiz-choice svg{width:165px;height:165px}.choice-label{font-size:10px;min-height:24px;margin-top:7px}.choice-label span{font-size:15px;margin-left:4px}.choice-mark{top:11px;right:12px;font-size:20px}.quiz-feedback{font-size:12px;padding:24px 0 8px;min-height:76px;letter-spacing:.4px}.quiz-actions{gap:4px}.quiz-actions .primary-button{min-width:145px;padding:13px 17px;font-size:12px}.quiz-actions .quiet-button{font-size:11px;padding:10px}.quiz-welcome{padding:34px 0}.quiz-welcome>span{width:250px;height:250px}footer{font-size:8px;padding:15px 20px;gap:10px;min-height:61px;line-height:1.6}footer>span:last-child{font-size:0}footer>span:last-child::after{content:'轻轻触摸 · 慢慢探索';font-size:8px;white-space:nowrap}footer i{display:none}}
@media(min-width:701px) and (max-height:820px){.class-header{height:73px}.mode-tab{min-height:45px;padding:0 27px}.class-nav{gap:9px}.section-intro{margin-top:21px}h1{font-size:30px;margin-bottom:10px}.learning-stage .lesson-card{min-height:340px}.lesson-portrait{width:255px;height:255px}.portrait-halo{width:295px;height:245px;top:37px}.lesson-caption{margin-top:5px}.lesson-caption strong{font-size:27px}.lesson-caption>span{font-size:28px}.lesson-controls{min-height:87px}.next-mode-note{margin-top:0}.choices{margin-top:24px;max-width:740px}.quiz-choice{min-height:285px}.quiz-choice svg{width:208px;height:208px}.quiz-feedback{padding-top:17px;min-height:50px}footer{min-height:48px}.quiz-welcome>span{width:240px;height:240px}}
@media(max-height:600px) and (min-width:701px){.class-header{height:62px}.class-nav{flex-direction:row;justify-content:center;gap:20px}.club-note{font-size:9px}.section-intro{margin-top:17px}h1{font-size:26px}.section-intro p{font-size:10px}.learning-stage .lesson-card{min-height:250px}.lesson-portrait{width:185px;height:185px}.portrait-halo{width:220px;height:180px;top:23px}.lesson-caption strong{font-size:23px}.lesson-caption>span{font-size:24px}.lesson-caption{min-height:35px;margin-top:0}.lesson-controls{min-height:58px;position:relative;padding-bottom:0}.lesson-controls .quiet-button{position:absolute;left:calc(50% + 135px);top:8px}.next-mode-note{display:none}.choices{max-width:650px;margin-top:18px}.quiz-choice{min-height:200px;padding-top:10px}.quiz-choice svg{width:150px;height:150px}.choice-label{font-size:10px;margin-top:0;min-height:25px}.quiz-feedback{min-height:38px;padding-top:8px;font-size:12px}.quiz-actions{min-height:44px}.quiz-actions .primary-button{min-height:42px}.quiz-welcome>span{width:170px;height:170px}.quiz-welcome{gap:12px;padding:13px 0}main{padding-bottom:15px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Larger animal targets, with an additional lift for Bear and Duck. */
.choices{max-width:980px;gap:34px;grid-template-columns:repeat(2,minmax(0,1fr))}.quiz-choice{min-width:0;min-height:405px;padding:20px 14px 14px;overflow:hidden}.quiz-choice svg{height:310px;width:310px;transform:scale(1.08);transform-origin:center}.quiz-choice[data-animal="bear"] svg,.quiz-choice[data-animal="duck"] svg{transform:scale(1.18)}.choice-mark{z-index:2}.choice-label{position:relative;z-index:1}.blank-ready{cursor:pointer}body{touch-action:manipulation}.blank-ready .quiz-choice:disabled{cursor:default}
@media(min-width:1500px) and (min-height:950px){.choices{max-width:1120px;gap:40px}.quiz-choice{min-height:475px}.quiz-choice svg{width:385px;height:385px}}
@media(min-width:701px) and (max-height:820px){.choices{max-width:850px;gap:26px}.quiz-choice{min-height:335px;padding:12px 12px 10px}.quiz-choice svg{width:255px;height:255px}}
@media(max-width:700px){.choices{gap:10px}.quiz-choice{min-height:265px;padding:14px 2px 12px}.quiz-choice svg{width:200px;height:200px}.choice-mark{top:12px;right:12px}}
@media(max-height:600px) and (min-width:701px){.choices{max-width:740px;gap:22px}.quiz-choice{min-height:245px;padding:10px 6px}.quiz-choice svg{width:190px;height:190px}}