@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap');
@font-face{font-family:Andika;src:url('./assets/Andika-Regular.ttf') format('truetype');font-display:swap}
:root{--paper:#f7f5ef;--ink:#283e35;--muted:#7a8379;--line:#e1e3d8;--green:#526f59;--red:#bd513f;--white:#fffef9;--serif:'Noto Serif SC','Songti SC',STSong,serif;--sans:'PingFang SC','Microsoft YaHei',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;-webkit-font-smoothing:antialiased}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.4}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #ce9a42;outline-offset:4px}button{border:0;background:none}button svg{pointer-events:none}a{color:inherit}.shell{max-width:1240px;margin:auto;padding:0 44px}header{height:98px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:16px}.brand{display:flex;align-items:center;gap:12px;padding:0}.brand img{width:38px;height:38px}.brand strong{font:600 23px var(--serif);letter-spacing:3px}.brand small{font-size:10px;letter-spacing:3px;color:var(--muted);display:block;text-align:left;margin-top:3px}.nav{display:flex;align-items:center;gap:32px}.nav button{font-size:14px;padding:12px 0;border-bottom:2px solid transparent}.nav button.active{border-color:var(--green)}.nav .parent{border:1px solid var(--line);border-radius:30px;padding:10px 18px;font-size:12px;display:flex;gap:7px;align-items:center}.icon{width:20px;height:20px;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.hero{min-height:350px;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;position:relative;padding:42px 0 38px}.eyebrow{font-size:11px;letter-spacing:3px;color:var(--green);display:flex;align-items:center;gap:12px}.eyebrow:before{content:'';width:24px;height:1px;background:var(--green)}h1{font:500 clamp(32px,3.5vw,46px)/1.55 var(--serif);letter-spacing:4px;margin:14px 0 13px}h1 em{font-style:normal;color:var(--red)}.hero p{font-size:14px;line-height:1.9;color:var(--muted);margin:0 0 23px}.primary,.secondary{border-radius:8px;min-height:48px;padding:13px 24px;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:18px;transition:background .2s,transform .2s}.primary{background:var(--green);color:white}.primary:hover:not(:disabled){background:#3f5c46;transform:translateY(-1px)}.secondary{border:1px solid #d6dcd0;background:transparent}.secondary:hover{background:#edeee5}.hero-actions{display:flex;align-items:center;gap:20px}.hero-actions small{font-size:11px;color:var(--muted)}.hero-art{height:305px;position:relative}.hero-art>svg{height:100%;width:100%;overflow:visible}.art-note{position:absolute;right:0;top:68px;font:13px/1.8 var(--serif);writing-mode:vertical-rl;letter-spacing:5px;color:#8e9588}.tiny-stamp{color:var(--red);border:1px solid var(--red);padding:4px;font:12px/1.2 var(--serif);width:27px;display:inline-block}.hero-art .tiny-stamp{position:absolute;bottom:32px;right:35px}.wind{animation:float 6s ease-in-out infinite;transform-origin:50% 35%}@keyframes float{50%{transform:translate(2px,-8px) rotate(2deg)}}.daily{display:flex;align-items:center;padding:19px 24px;background:#eceee4;border-radius:10px;gap:16px;margin:6px 0 40px}.daily-icon{width:40px;height:40px;border-radius:50%;background:#f8f8f0;display:grid;place-items:center;color:var(--green)}.daily-copy{flex:1}.daily-copy strong{font-size:14px;font-weight:500}.daily-copy p{font-size:11px;color:var(--muted);margin:5px 0 0}.daily-dots{display:flex;gap:6px}.daily-dots i{width:11px;height:11px;border:1px solid #a9b69d;border-radius:50%}.daily-dots i.done{background:var(--green);border-color:var(--green)}.daily-number{font-size:12px;font-variant-numeric:tabular-nums;color:var(--green)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:23px}.section-head h2{font:500 23px var(--serif);letter-spacing:2px;margin:0 0 8px}.section-head p{font-size:12px;color:var(--muted);margin:0}.tabs{display:flex;gap:4px;border:1px solid var(--line);padding:4px;border-radius:8px}.tabs button{font-size:12px;padding:9px 18px;border-radius:5px}.tabs button.selected{background:var(--green);color:#fff}.lesson-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.lesson-card{border:1px solid var(--line);border-radius:12px;background:#fcfbf6;padding:21px 23px 17px;text-align:left;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s;min-height:206px}.lesson-card:hover{transform:translateY(-4px);box-shadow:0 10px 25px #38472e09;border-color:#b2bca7}.card-top{display:flex;justify-content:space-between;align-items:center}.card-kind{font-size:10px;letter-spacing:1px;color:var(--muted)}.card-status{font-size:10px;color:var(--green)}.card-art{height:105px;position:relative;display:flex;align-items:center}.letter{font-family:'Andika',sans-serif;font-size:70px;font-weight:400;line-height:1;color:var(--tone,var(--green));width:38%;letter-spacing:0}.card-art svg{height:113px;width:62%}.card-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e9e9df;padding-top:13px}.card-foot strong{font:500 14px var(--serif);letter-spacing:1px}.card-foot small{color:var(--muted);font-size:10px;margin-left:9px}.arrow-circle{height:24px;width:24px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center}.arrow-circle .icon{width:13px}.bottom-note{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font:13px var(--serif);letter-spacing:1px;margin:35px 0}footer{display:flex;justify-content:space-between;gap:16px;font-size:10px;letter-spacing:1px;color:var(--muted);border-top:1px solid var(--line);padding:23px 0 32px;margin-top:20px}.study-top{display:flex;justify-content:space-between;align-items:center;padding:28px 0 24px}.back{font-size:12px;display:flex;align-items:center;gap:8px}.study-count{font-size:12px;color:var(--muted)}.stepper{display:flex;justify-content:center;gap:36px;padding-bottom:30px}.step{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center}.step span{width:23px;height:23px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:10px}.step.on{color:var(--green)}.step.on span,.step.past span{background:var(--green);color:#fff;border-color:var(--green)}.study-layout{display:grid;grid-template-columns:240px 1fr;gap:34px}.lesson-aside{padding:28px 24px;text-align:center;background:#edeFE5;border-radius:12px;align-self:start}.lesson-aside>svg{width:155px;height:130px}.lesson-aside h2{font:500 22px var(--serif);margin:0 0 10px}.lesson-aside p{font-size:12px;line-height:1.8;color:var(--muted)}.mini-samples{display:flex;justify-content:center;gap:7px;margin-top:24px}.mini-samples button{border:1px solid #d9dece;border-radius:6px;min-width:48px;padding:10px 7px;font-size:16px;background:#f7f7ef}.mini-samples button.current{color:white;background:var(--green)}.aside-tip{border-top:1px solid #dce0d2;margin-top:25px;padding-top:15px;font-size:11px;line-height:1.9;color:var(--muted)}.practice{min-height:455px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:28px 32px;position:relative;text-align:center}.practice h2{font:500 25px var(--serif);letter-spacing:2px;margin:5px 0 10px}.subtext{font-size:12px;color:var(--muted);line-height:1.8}.sound-button{width:88px;height:88px;border:1px solid #d8dfcf;border-radius:50%;background:#eff1e7;color:var(--green);margin:24px auto 20px;display:grid;place-items:center}.sound-button .icon{width:34px;height:34px}.sound-button.playing{animation:pulse 1s infinite}@keyframes pulse{50%{box-shadow:0 0 0 10px #e7eddf80}}.choices{display:flex;gap:14px;justify-content:center;margin:20px 0}.choice{border:1px solid #dce0d5;background:#fbfbf5;border-radius:10px;font-size:36px;min-width:114px;padding:21px 15px;font-family:'Andika',sans-serif}.choice:hover{border-color:var(--green)}.choice.correct{background:#e6eddf;border-color:var(--green)}.choice.wrong{background:#fcf0e8;border-color:#c07854}.feedback{min-height:25px;font-size:13px;color:var(--green);margin:15px 0}.feedback.retry{color:#a55b3f}.practice-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.rounds{display:flex;justify-content:center;gap:6px;margin:8px 0 16px}.rounds i{width:20px;height:3px;background:#e5e7dc;border-radius:2px}.rounds i.filled{background:var(--green)}.blend{display:flex;gap:17px;justify-content:center;align-items:center;margin:42px 0 22px}.blend button{font-size:59px;font-family:'Andika',sans-serif;border:1px solid var(--line);border-radius:10px;min-width:110px;height:114px;background:#f9faf3}.blend button.chosen{border-color:var(--green);background:#eaf0e1}.blend span{font:25px var(--serif);color:#929d8d}.blend-result{min-height:76px;font-size:52px;font-family:'Andika',sans-serif;color:var(--red)}.trace-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 12px}.trace-toolbar .tabs button{padding:7px 12px}.small-btn{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:8px}.writing-area{max-width:440px;margin:auto;position:relative;aspect-ratio:400/320;touch-action:none;user-select:none;background:#fdfcf8;border:1px solid #e5e6dc;border-radius:8px;overflow:hidden}.writing-area>svg,.writing-area>canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.writing-area .guide{fill:none;stroke:#e4e8dc;stroke-width:17;stroke-linecap:round;stroke-linejoin:round}.writing-area .ghost{fill:none;stroke:#b5c3a6;stroke-width:2;stroke-dasharray:3 6;stroke-linecap:round}.writing-area .completed{fill:none;stroke:var(--green);stroke-width:14;stroke-linecap:round;stroke-linejoin:round}.writing-area .demo{fill:none;stroke:#bd6e4c;stroke-width:14;stroke-linecap:round;stroke-linejoin:round;animation:draw 2s ease-in-out forwards}@keyframes draw{to{stroke-dashoffset:0}}.writing-area .start-dot{fill:#bd6e4c;stroke:#fffef9;stroke-width:2}.writing-area text{font:12px sans-serif;fill:white;pointer-events:none}.trace-caption{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin:9px auto 0;max-width:440px}.trace .feedback{margin:13px 0 10px}.trace.practice{padding-top:22px}.trace h2{font-size:22px}.trace-done{display:flex;gap:10px;justify-content:center}.success{padding:35px 25px 45px;text-align:center}.success-art{width:190px;height:170px;margin:auto}.success h1{font-size:34px}.success p{color:var(--muted);line-height:1.8;font-size:13px}.stamps{display:flex;justify-content:center;gap:18px;margin:25px 0 30px}.stamp{border:1px solid var(--red);color:var(--red);font:17px var(--serif);padding:10px;transform:rotate(-6deg);border-radius:4px}.stamp:nth-child(2){transform:rotate(4deg)}.progress-page{padding:40px 0}.progress-page h1{font-size:32px}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:25px 0 36px}.stat{background:#eceee4;border-radius:10px;padding:25px}.stat strong{display:block;font:36px var(--serif);margin-bottom:10px}.stat span{font-size:12px;color:var(--muted)}.records{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.record{padding:18px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;gap:20px}.record .letter{font-size:36px;width:35px}.record-copy{flex:1;font-size:13px}.record-copy small{font-size:11px;color:var(--muted);display:block;margin-top:6px}.record button{font-size:12px;color:var(--green);min-height:44px}.empty{padding:42px;text-align:center;background:#eeefe6;border-radius:10px;color:var(--muted);font-size:13px}.tone-intro{padding:42px 0;max-width:800px;margin:auto}.tone-intro h1{text-align:center;font-size:30px}.tone-intro>p{text-align:center}.tone-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:30px 0}.tone-card{border:1px solid var(--line);border-radius:10px;padding:20px 12px;background:var(--white);text-align:center}.tone-card strong{font:39px 'Andika',sans-serif;display:block}.tone-card svg{width:70px;height:40px;display:block;margin:7px auto}.tone-card small{color:var(--muted);font-size:11px}.tone-card .icon{width:16px;height:16px;margin:12px auto 0}.tone-practice{max-width:700px;margin:20px auto}.tone-practice .choices{gap:10px}.tone-practice .choice{min-width:90px}.loading{padding:100px;text-align:center;font:20px var(--serif)}#toast{position:fixed;bottom:35px;left:50%;transform:translateX(-50%);max-width:90vw;background:#304b3e;color:white;border-radius:8px;padding:13px 22px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:30}#toast.visible{opacity:1}dialog{padding:32px;border:1px solid var(--line);border-radius:14px;max-width:570px;width:calc(100% - 36px);color:var(--ink);background:var(--paper);max-height:85vh;overflow:auto}dialog::backdrop{background:#243c3260;backdrop-filter:blur(3px)}dialog h2{font:24px var(--serif);margin:0 0 20px}dialog p{font-size:13px;line-height:1.9;color:#66715f}dialog .close{float:right;min-height:36px;font-size:24px}.note-box{background:#e9ece0;border-radius:8px;padding:12px 15px;font-size:12px;line-height:1.9}.mobile-label{display:none}@media(min-width:1500px){.shell{max-width:1330px}.hero{min-height:385px}.hero-art{height:340px}.lesson-card{min-height:225px}.card-art{height:125px}}@media(max-width:900px){.shell{padding:0 28px}.nav{gap:20px}.hero{grid-template-columns:1.1fr 1fr}.hero-art{height:270px}h1{font-size:34px;letter-spacing:2px}.lesson-card{padding:17px}.card-foot small{display:none}.study-layout{grid-template-columns:180px 1fr;gap:18px}.lesson-aside{padding:18px 12px}.lesson-aside>svg{width:130px}.practice{padding:24px 18px}.choice{min-width:86px}.mini-samples{gap:4px}.mini-samples button{min-width:42px}.brand strong{font-size:20px}.nav{gap:20px}}@media(max-width:620px){.shell{padding:0 20px}header{height:79px}.brand strong{font-size:19px;letter-spacing:1px}.brand small{font-size:8px;letter-spacing:2px}.brand img{width:32px;height:32px}.nav{gap:16px}.nav button{font-size:12px}.nav .parent{padding:8px;border:0}.parent span{display:none}.nav .tone-nav{display:none}.hero{min-height:310px;display:block;padding:32px 0 29px}.hero>div:first-child{position:relative;z-index:2}.hero h1{font-size:31px;letter-spacing:2px;max-width:275px}.hero p{font-size:12px;max-width:235px}.hero-art{position:absolute;width:170px;right:-17px;top:47px;opacity:.47;height:230px;pointer-events:none}.art-note,.hero-art .tiny-stamp{display:none}.eyebrow{font-size:9px;letter-spacing:2px}.hero-actions{gap:10px}.hero-actions small{font-size:10px}.primary,.secondary{padding:12px 18px;font-size:13px;min-height:46px}.daily{padding:14px;margin:0 0 28px;gap:10px}.daily-icon{width:32px;height:32px}.daily-copy strong{font-size:12px}.daily-copy p{font-size:10px}.daily-dots{display:none}.daily-number{font-size:11px}.section-head{align-items:start;gap:10px}.section-head h2{font-size:21px}.section-head p{font-size:10px}.tabs button{padding:8px 12px;font-size:11px}.lesson-grid{grid-template-columns:repeat(2,1fr);gap:12px}.lesson-card{padding:13px 14px;min-height:180px}.card-art{height:100px}.card-art svg{height:90px}.letter{font-size:52px}.card-kind,.card-status{font-size:9px}.card-foot strong{font-size:12px}.card-foot{padding-top:11px}.bottom-note{font-size:11px;margin:27px 0}footer{font-size:9px;line-height:1.7}.study-top{padding:22px 0 17px}.stepper{gap:19px;padding-bottom:20px}.step{font-size:11px;gap:5px}.study-layout{display:block}.lesson-aside{display:flex;text-align:left;align-items:center;padding:11px 15px;margin-bottom:14px;gap:13px}.lesson-aside>svg{height:53px;width:62px;flex-shrink:0}.lesson-aside h2{font-size:16px;margin:0}.lesson-aside p,.aside-tip{display:none}.mini-samples{margin:0 0 0 auto;gap:4px}.mini-samples button{min-width:36px;padding:7px 5px;font-size:14px}.practice{padding:24px 15px;min-height:435px}.practice h2{font-size:22px}.choices{gap:10px}.choice{min-width:82px;font-size:31px;padding:19px 12px}.blend{gap:12px;margin:32px 0 20px}.blend button{min-width:95px;height:105px;font-size:50px}.trace.practice{padding:18px 12px}.trace-toolbar{gap:4px}.trace-toolbar .tabs button{font-size:10px;padding:8px}.small-btn{font-size:10px;padding:8px 4px}.small-btn .icon{width:15px}.trace h2{font-size:20px}.trace-caption{font-size:9px}.stat{padding:18px 12px}.stat strong{font-size:29px}.stat span{font-size:10px}.stat-grid{gap:9px}.records{grid-template-columns:1fr}.tone-cards{gap:7px}.tone-card{padding:16px 5px}.tone-card strong{font-size:32px}.tone-card svg{width:54px}.tone-card small{font-size:10px}.tone-practice .choice{min-width:59px;padding:20px 9px;font-size:28px}.tone-practice .choices{gap:7px}.progress-page h1{font-size:28px}.success h1{font-size:28px}.success-art{width:160px;height:150px}.mobile-label{display:inline}.desk-label{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* 为 wwei.ai 平台注入的登录入口与底部提示留出操作空间。 */
body:has(a[href^="https://auth.wwei.ai/login?next="]) header{height:130px;padding-top:32px}
body:has(a[href^="https://auth.wwei.ai/login?next="]) footer{padding-bottom:110px}
@media(max-width:620px){body:has(a[href^="https://auth.wwei.ai/login?next="]) header{height:112px;padding-top:35px}}
/* 平台入口位于独立容器，固定预留顶部空间，避免首次注入时遮挡。 */
header{height:130px;padding-top:32px}footer{padding-bottom:110px}
@media(max-width:620px){header{height:112px;padding-top:35px}}
/* A single quiet wooden companion, shared between home and classroom. */
.rabbit-stage{position:relative;width:100%;height:360px;touch-action:pan-y;isolation:isolate;user-select:none}
.rabbit-stage:before{content:"";position:absolute;inset:auto 23% 7%;height:7%;background:radial-gradient(ellipse,#68745325,transparent 70%);z-index:-1}
.rabbit-stage canvas,.rabbit-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.rabbit-stage canvas{opacity:0}.rabbit-stage.is-3d canvas{opacity:1}.rabbit-stage.is-3d .rabbit-poster{visibility:hidden}
.hero-art .rabbit-stage{height:375px}.hero-art{position:relative}.rabbit-greet{display:block;margin:0 auto;background:transparent;border:1px solid #d9ddce;border-radius:30px;padding:9px 18px;color:#5d735e;font-size:13px;position:relative}.rabbit-greet:focus-visible{outline:3px solid #a57b55;outline-offset:4px}.hero-art .art-note{position:static;display:block;text-align:center;margin:-10px 0 12px}.card-rabbit{width:140px;height:155px;object-fit:contain}.rabbit-badge{position:absolute;bottom:0;right:8px;font-size:10px;color:#7b7058;background:#eee7d8;padding:3px 7px;border-radius:10px}.card-art{position:relative}
.rabbit-aside .rabbit-stage{height:290px}.rabbit-aside{overflow:hidden}.rabbit-aside .rabbit-stage img{max-width:none}.rabbit-aside .rabbit-stage canvas{max-width:none}.rabbit-classroom{grid-template-columns:280px minmax(0,1fr)}.writing-stage .rabbit-stage{pointer-events:none}.success-art:has(.rabbit-stage){width:260px;height:270px;margin:auto}.success-art .rabbit-stage{height:270px}.success{position:relative}.reward-kite{position:absolute;width:45px;left:calc(50% + 95px);top:25px;animation:kite-reward 1.4s ease-out both}@keyframes kite-reward{from{transform:translate(-15px,75px) rotate(-15deg);opacity:0}to{transform:translate(0,0) rotate(8deg);opacity:1}}
@media(max-width:760px){.hero-art .rabbit-stage{height:290px}.rabbit-classroom{grid-template-columns:1fr}.rabbit-aside{display:grid!important;grid-template-columns:120px 1fr;align-items:center;gap:0 12px;padding:10px 15px!important}.rabbit-aside .rabbit-stage{grid-row:1 / 3;height:150px;width:120px}.rabbit-aside .mini-samples{margin:0;flex-wrap:wrap}.rabbit-aside .aside-tip{display:none}.writing-stage .rabbit-stage{height:95px}.writing-stage .rabbit-aside{grid-template-columns:80px 1fr}.writing-stage .rabbit-stage{width:80px}.rabbit-aside h2{font-size:18px}.hero-art{margin-top:0}.card-rabbit{width:115px;height:130px}}
@media(prefers-reduced-motion:reduce){.reward-kite{animation:none}}
.hero-art{height:auto;min-height:430px}.hero-art .art-note{writing-mode:horizontal-tb;letter-spacing:2px}.card-rabbit{height:112px;width:62%}
@media(max-width:620px){.hero{display:flex;flex-direction:column;padding-top:28px}.hero>div:first-child{width:100%}.hero-art{position:relative;top:auto;right:auto;width:100%;height:auto;min-height:340px;opacity:1;pointer-events:auto;margin-top:12px}.hero-art .rabbit-stage{height:280px}.hero-art .art-note{font-size:11px}.hero-art .rabbit-greet{font-size:12px;padding:8px 16px}.hero p{max-width:none}.hero h1{max-width:none}.card-rabbit{height:98px}}

.hero-art:has(.rabbit-stage[data-renderer=poster]) .rabbit-greet,.hero-art:has(.rabbit-stage[data-reduced-motion=true]) .rabbit-greet{visibility:hidden}