:root{color:#17352b;font-synthesis:none;text-rendering:optimizelegibility;--forest:#103d2c;--forest-deep:#0a2c20;--signal:#d9f00f;--orange:#e65a25;--orange-ink:#b84425;--root-black:#111612;--root-red:#b6382a;--paper:#f5f1e6;--ink:#17352b;--muted:#55645b;--line:#d6d2c6;--soft-radius:14px;background:#d7d5cc;font-family:PingFang SC,Microsoft YaHei,system-ui,-apple-system,BlinkMacSystemFont,sans-serif}*{box-sizing:border-box}html{background:#d7d5cc}body{background:#d7d5cc;min-width:320px;min-height:100dvh;margin:0}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #ff9a65}::selection{color:#0a2c20;background:#d9f00f}.app-shell{background-color:var(--paper);background-image:url(/topo-pattern.svg);background-size:240px;width:min(100%,480px);min-height:100dvh;margin:0 auto;position:relative;box-shadow:0 16px 44px #1631272e}.app-main{min-height:100dvh;padding-bottom:84px}.screen{min-height:calc(100dvh - 84px)}.trail-header{min-height:238px;padding:max(24px, env(safe-area-inset-top)) 22px 30px;color:#f7f5eb;background-color:var(--forest);position:relative;overflow:hidden}.trail-header:after{content:"";opacity:.18;pointer-events:none;background:repeating-radial-gradient(at 60% 30%,#0000 0 19px,#b9c8b8 20px 21px,#0000 22px 42px);position:absolute;inset:-50px -80px 30px 120px;transform:rotate(-9deg)}.brand-strip{z-index:1;width:fit-content;color:var(--forest-deep);background:var(--signal);padding:9px 26px 8px 12px;display:grid;position:relative;transform:rotate(-1deg);box-shadow:0 8px 20px #02180f38}.brand-cn{letter-spacing:.08em;font-size:24px;font-weight:900;line-height:1.08}.brand-en{letter-spacing:.07em;font-size:11px;font-weight:800}.stage-meta{z-index:1;color:#d4ded6;justify-content:space-between;align-items:end;margin-top:46px;font-size:13px;display:flex;position:relative}.stage-meta strong{color:#fff;font-variant-numeric:tabular-nums;font-size:16px}.route-line{z-index:1;height:20px;margin-top:10px;position:relative}.route-profile{width:100%;height:100%;display:block}.route-profile-track{fill:none;stroke:#ffffff52;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.route-profile-done{fill:none;stroke:var(--orange);stroke-width:2.6px;stroke-linecap:round;stroke-linejoin:round}.today-card{z-index:2;background:var(--paper);border-radius:var(--soft-radius);border-top:1px solid #ffffffbf;margin:-36px 14px 0;padding:24px 22px 22px;position:relative;box-shadow:0 14px 28px #30373029}.today-card:before{content:"";border-top:1px dashed #a4a89f;position:absolute;top:62px;left:20px;right:20px}.ticket-notch{background:var(--forest);border-radius:50%;width:18px;height:18px;position:absolute;top:54px}.ticket-notch-left{left:-9px}.ticket-notch-right{right:-9px}.ticket-topline{justify-content:space-between;align-items:center;min-height:25px;margin-bottom:42px;display:flex}.checkpoint-label{color:var(--orange);align-items:center;gap:6px;font-size:12px;font-weight:800;display:inline-flex}.beginner-label{color:#4c5e54;border:1px solid #a8afa8;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:700}.today-kicker{color:var(--muted);margin:0 0 8px;font-size:13px}.today-card h1{letter-spacing:-.02em;text-wrap:balance;max-width:12em;margin:0;font-size:clamp(25px,7vw,32px);line-height:1.3}.lesson-preview{color:var(--muted);gap:4px;margin:20px 0 22px;font-size:12px;display:grid}.lesson-word{color:var(--ink);font-size:18px;font-weight:850}.primary-button{color:#fff;background:var(--orange);cursor:pointer;border:0;border-radius:12px;justify-content:center;align-items:center;gap:10px;width:100%;min-height:54px;padding:0 20px;font-size:16px;font-weight:800;transition:transform .14s ease-out,filter .14s ease-out;display:flex;box-shadow:0 8px 18px #ae411833}.primary-button:hover{filter:brightness(.96)}.primary-button:active{transform:translateY(1px)scale(.99)}.primary-button:disabled{color:#58645c;box-shadow:none;cursor:not-allowed;background:#d8d9d2}.course-section{padding:28px 16px 24px}.section-title-row{justify-content:space-between;align-items:baseline;margin-bottom:16px;display:flex}.section-title-row h2{margin:0;font-size:19px}.section-title-row span{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}.checkpoint-list{gap:24px;display:grid}.chapter-copy{margin:0 4px 10px}.chapter-copy h3{margin:0;font-size:15px}.chapter-copy p{color:var(--muted);margin:4px 0 0;font-size:12px}.checkpoint-row,.coming-row{border:0;border-top:1px solid var(--line);width:100%;min-height:68px;color:var(--ink);text-align:left;background:0 0;align-items:center;gap:12px;padding:10px 12px;display:flex}.checkpoint-row{cursor:pointer}.checkpoint-row:active{background:#ebe8dd}.checkpoint-row:disabled,.coming-row{color:#606c64;cursor:not-allowed}.checkpoint-number{width:34px;height:34px;color:var(--forest);background:#e1e5d9;border-radius:50%;flex:none;place-items:center;font-weight:900;display:grid}.checkpoint-row.is-done .checkpoint-number{color:var(--forest-deep);background:var(--signal)}.checkpoint-copy{flex:1;gap:2px;display:grid}.checkpoint-copy strong{font-size:14px}.checkpoint-copy small{color:inherit;opacity:.7}.checkpoint-state{font-size:11px;font-weight:700}.bottom-nav{z-index:20;width:min(100%,480px);min-height:calc(72px + env(safe-area-inset-bottom));padding:8px 18px env(safe-area-inset-bottom);background:#f7f4eaf5;border-top:1px solid #d5d3c9;grid-template-columns:repeat(3,1fr);display:grid;position:fixed;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 -8px 24px #30373014}.bottom-nav button{color:#59665e;cursor:pointer;background:0 0;border:0;justify-items:center;gap:4px;padding:5px;font-size:11px;font-weight:700;display:grid}.bottom-nav button.active{color:var(--forest)}.bottom-nav button.active:after{content:"";background:var(--orange);border-radius:99px;width:18px;height:3px}.light-screen{padding:max(28px, env(safe-area-inset-top)) 18px 24px;background-color:var(--paper);background-image:url(/topo-pattern.svg);background-size:240px}.simple-header{color:var(--forest);justify-content:space-between;align-items:center;padding:10px 2px 20px;display:flex}.simple-header p{color:var(--orange);margin:0 0 5px;font-size:12px;font-weight:800}.simple-header h1{letter-spacing:-.02em;margin:0;font-size:25px}.screen-intro{max-width:30em;color:var(--muted);margin:0 2px 24px;font-size:14px;line-height:1.7}.root-summary{border:1px solid var(--forest);background:var(--forest);border-radius:12px;grid-template-columns:1fr 1fr;gap:1px;margin:0 0 14px;display:grid;overflow:hidden}.root-summary span{color:#d8e1da;background:var(--forest);gap:2px;padding:12px 14px;font-size:11px;display:grid}.root-summary strong{color:var(--signal);font-size:20px;line-height:1}.word-color-key{color:var(--muted);gap:18px;margin:0 2px 16px;font-size:11px;font-weight:750;display:flex}.word-color-key span{align-items:center;gap:6px;display:inline-flex}.word-color-key i{width:16px;height:10px;display:inline-block}.key-root{border-bottom:3px solid var(--root-black)}.key-rest{border-bottom:3px solid var(--root-red)}.root-list{gap:14px;display:grid}.root-card{border-radius:var(--soft-radius);background:#fffdf7;padding:18px;box-shadow:0 8px 18px #25372d14}.root-card-meta{color:var(--muted);letter-spacing:.04em;justify-content:space-between;align-items:center;margin-bottom:11px;font-size:12px;font-weight:800;display:flex}.root-card-meta span:first-child{color:var(--orange-ink)}.root-card-meta span:last-child{letter-spacing:0;border:1px solid #c8cec6;border-radius:999px;padding:3px 7px}.root-line,.word-line{justify-content:space-between;align-items:baseline;gap:16px;display:flex}.root-line h2{margin:0;font-size:22px}.root-line span,.word-line span:last-child{color:var(--muted);font-size:13px}.word-line{border-top:1px dashed var(--line);margin-top:18px;padding-top:14px}.word-line .segmented-word{font-size:20px}.root-card p{color:#506057;margin:12px 0 0;font-size:13px;line-height:1.6}.segmented-word{color:var(--root-red);overflow-wrap:anywhere;font-weight:850;line-height:1.35}.segmented-word mark{color:var(--root-black);background:0 0;margin:0;padding:0}.rest-text{color:var(--root-red)!important}.family-heading{border-top:1px solid #e2ded2;justify-content:space-between;align-items:baseline;margin-top:18px;padding-top:14px;display:flex}.family-heading strong{font-size:13px}.family-heading span{color:var(--muted);font-size:12px}.family-list{gap:0;margin:8px 0 0;padding:0;list-style:none;display:grid}.family-list li{border-bottom:1px solid #ebe7dc;grid-template-columns:minmax(0,1fr) minmax(90px,auto);align-items:center;gap:12px;min-height:42px;display:grid}.family-list li:last-child{border-bottom:0}.family-list .segmented-word{font-size:14px}.family-list li>span:last-child{color:var(--muted);text-align:right;font-size:12px}.family-toggle{width:100%;min-height:42px;color:var(--forest);cursor:pointer;background:#eef0e7;border:0;border-radius:9px;justify-content:center;align-items:center;gap:8px;margin-top:8px;font-size:12px;font-weight:800;display:flex}.family-toggle:active{background:#e2e7da}.progress-board{border-radius:var(--soft-radius);color:#fff;background:var(--forest);padding:22px}.progress-big{gap:5px;display:grid}.progress-big strong{color:var(--signal);font-variant-numeric:tabular-nums;font-size:48px;line-height:1}.progress-big span{color:#c8d3cb;font-size:13px}.progress-rule{background:#ffffff38;border-radius:99px;height:5px;margin:22px 0;overflow:hidden}.progress-rule span{background:var(--orange);height:100%;display:block}.progress-board dl{grid-template-columns:repeat(3,1fr);margin:0;display:grid}.progress-board dl div{gap:5px;padding-right:8px;display:grid}.progress-board dt{color:#bdc9c0;font-size:11px}.progress-board dd{font-variant-numeric:tabular-nums;margin:0;font-weight:800}.beginner-note{border-radius:var(--soft-radius);background:#fffdf7;border:1px solid #d7d4c9;gap:14px;margin-top:18px;padding:18px;display:flex}.beginner-note svg{color:var(--orange);flex:none}.beginner-note strong{font-size:14px}.beginner-note p{color:var(--muted);margin:6px 0 0;font-size:13px;line-height:1.6}.lesson-shell{background-color:var(--paper);background-image:url(/topo-pattern.svg);background-size:240px;grid-template-rows:auto 1fr auto;width:min(100%,480px);min-height:100dvh;margin:0 auto;display:grid;box-shadow:0 16px 44px #1631272e}.lesson-header{min-height:70px;padding:max(10px, env(safe-area-inset-top)) 16px 8px;grid-template-columns:40px 1fr 42px;align-items:center;gap:12px;display:grid}.icon-button{width:40px;height:40px;color:var(--ink);cursor:pointer;background:0 0;border:0;border-radius:10px;place-items:center;display:grid}.icon-button:active{background:#e3e1d7}.lesson-progress{background:#d7dad2;border-radius:99px;height:6px;overflow:hidden}.lesson-progress span{border-radius:inherit;background:var(--orange);height:100%;display:block}.question-count{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;font-size:12px;font-weight:700}.exercise-wrap{align-items:flex-start;padding:18px 16px 28px;display:flex}.exercise-card{border-radius:var(--soft-radius);background:#fffdf7;width:100%;padding:22px 18px 18px;box-shadow:0 12px 28px #2e37301a}.exercise-title{color:var(--orange);align-items:center;gap:7px;font-size:11px;font-weight:850;display:flex}.checkpoint-dot{background:var(--orange);border-radius:50%;width:8px;height:8px}.exercise-card h1{color:var(--forest);letter-spacing:-.02em;overflow-wrap:anywhere;margin:42px 0 8px;font-size:clamp(30px,10vw,44px);line-height:1.08}.exercise-card h1 .segmented-word{font-size:inherit;line-height:inherit}.prompt-zh{color:#526259;margin:0 0 28px;font-size:16px;line-height:1.6}.choice-list{gap:10px;display:grid}.choice-button{min-height:56px;color:var(--ink);text-align:left;cursor:pointer;background:#fff;border:1px solid #c9cec7;border-radius:12px;align-items:center;gap:12px;padding:8px 12px;font-weight:750;display:flex}.choice-button span{color:#5f6c64;background:#edf0e9;border-radius:8px;place-items:center;width:30px;height:30px;font-size:12px;display:grid}.choice-button.is-selected{border-color:var(--forest);box-shadow:inset 0 0 0 1px var(--forest);background:#e4eadf}.choice-button.is-selected span{color:#fff;background:var(--forest)}.choice-button:disabled{cursor:default}.beginner-help{color:#6b756e;margin-top:18px;font-size:12px}.order-area{gap:20px;display:grid}.order-answer{border-bottom:2px solid #cfd2ca;flex-wrap:wrap;align-content:flex-start;gap:8px;min-height:76px;padding:10px 0;display:flex}.order-answer>span{color:#8d948e;font-size:13px}.order-answer button,.token-list button{color:var(--ink);cursor:pointer;background:#fff;border:1px solid #c6ccc4;border-radius:9px;padding:9px 11px;font-weight:750}.token-list{flex-wrap:wrap;gap:8px;display:flex}.token-list button:disabled{opacity:.25;cursor:default}.text-answer{gap:8px;display:grid}.text-answer span{font-size:12px;font-weight:800}.text-answer input{width:100%;min-height:54px;color:var(--ink);background:#fff;border:1px solid #aeb7af;border-radius:11px;padding:0 14px;font-size:16px}.text-answer input::placeholder{color:#5f6b63}.answer-bar{padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:#f7f4ea;border-top:1px solid #d8d6cd;gap:12px;display:grid;position:sticky;bottom:0}.answer-bar.correct{background:#dce8d9}.answer-bar.incorrect{background:#f5ddd2}.feedback-copy{align-items:flex-start;gap:10px;display:flex}.feedback-copy>span{color:#fff;background:var(--forest);border-radius:50%;flex:none;place-items:center;width:34px;height:34px;display:grid}.answer-bar.incorrect .feedback-copy>span{background:#b84425}.feedback-copy strong{font-size:14px}.feedback-copy p{color:#526259;margin:3px 0 0;font-size:12px;line-height:1.5}.completion-screen{background:var(--forest);place-items:center;padding:24px;display:grid}.completion-ticket{border-radius:var(--soft-radius);background:var(--paper);text-align:center;width:100%;padding:28px 22px;box-shadow:0 18px 36px #00000038}.completion-small{color:var(--muted);letter-spacing:.12em;font-size:11px;font-weight:850}.stamp{border:4px double var(--orange);width:108px;height:108px;color:var(--orange);border-radius:50%;place-items:center;margin:28px auto 20px;display:grid;transform:rotate(-7deg)}.completion-ticket h1{color:var(--forest);margin:0;font-size:27px}.completion-ticket p{color:#526259;margin:12px auto;line-height:1.65}.completion-reward{width:fit-content;color:var(--forest-deep);background:var(--signal);border-radius:999px;margin:20px auto;padding:7px 12px;font-weight:900}.speak-button{width:34px;height:34px;color:var(--forest);cursor:pointer;background:#eef0e7;border:1px solid #c6ccc4;border-radius:50%;flex:none;place-items:center;display:inline-grid}.speakable{cursor:pointer;-webkit-tap-highlight-color:transparent}.speakable:focus-visible{outline-offset:3px;border-radius:4px;outline:3px solid #ff9a65}.speak-button:active{background:#dfe3d8}.prompt-line{align-items:center;gap:12px;display:flex}.prompt-text{flex:1;min-width:0}.prompt-line .speak-button{color:#fff;background:var(--forest);border-color:var(--forest);width:42px;height:42px}.word-with-sound{align-items:center;gap:6px;min-width:0;display:inline-flex}.word-with-sound .speak-button{width:30px;height:30px}.feedback-copy>div{flex:1;min-width:0}@media (width>=760px){body{padding:24px 0}.app-shell,.lesson-shell{border-radius:22px;min-height:calc(100dvh - 48px);overflow:hidden}.bottom-nav{border-radius:0 0 22px 22px;bottom:24px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}