:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;color:#26342f;background:#f7f9f6;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:320px}a{color:inherit;text-decoration:none}button,input{font:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #7cb5a1;outline-offset:3px}.page-shell{min-height:100svh;max-width:1240px;margin:0 auto;padding:0 clamp(24px,6vw,84px);display:flex;flex-direction:column}.site-header{display:flex;justify-content:space-between;align-items:center;padding:34px 0;border-bottom:1px solid #dfe6df}.brand{display:inline-flex;align-items:center;gap:12px;font-weight:690;letter-spacing:-.03em;font-size:17px}.brand-mark{display:grid;place-items:center;width:36px;height:36px;background:#dcefe5;border-radius:11px;font-size:20px;color:#427562}.header-note,.site-footer{font-size:12px;color:#78877e;letter-spacing:.04em}.main-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:72px 0 88px}.eyebrow{display:flex;align-items:center;gap:9px;font-size:13px;color:#477964;font-weight:650;letter-spacing:.08em}.status-dot{width:7px;height:7px;background:#72a78b;border-radius:50%}h1{font-family:Songti SC,"Noto Serif SC",STSong,Georgia,serif;font-weight:600;letter-spacing:-.065em;line-height:1.23;font-size:clamp(58px,9vw,116px);margin:25px 0 18px}h1 em{color:#7ba995;font-style:normal}.intro{max-width:500px;font-size:clamp(16px,2vw,19px);color:#6b7c72;line-height:1.95}.notice{margin-top:40px;display:flex;flex-direction:column;gap:11px;background:#edf3ed;border:1px solid #e0e9e1;border-radius:16px;padding:20px 24px;line-height:1.6;font-size:14px;color:#516559;max-width:560px}.notice-index{font-size:11px;font-weight:800;letter-spacing:.12em;color:#478168}.site-footer{display:flex;justify-content:space-between;gap:15px;border-top:1px solid #dfe6df;padding:23px 0 31px}@media(max-width:560px){.site-header{padding:23px 0}.header-note{display:none}.main-content{padding:66px 0}.site-footer{flex-wrap:wrap}}.brand-button{border:0;background:none;cursor:pointer;padding:0}.choice-group{display:flex;flex-wrap:wrap;gap:12px;margin-top:35px}.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:52px;padding:0 22px;border-radius:13px;border:1px solid transparent;font-weight:650;font-size:14px;cursor:pointer;transition:background .15s ease,transform .15s ease}.primary-button{background:#356b54;color:#fff}.primary-button:hover{background:#295641}.secondary-button{background:#edf3ed;color:#37624d;border-color:#dce7de}.secondary-button:hover{background:#e2ece2}.primary-button:disabled{opacity:.4;cursor:not-allowed}.primary-button:not(:disabled):active,.secondary-button:active{transform:translateY(1px)}.demo-note{font-size:12px;color:#829087;margin-top:22px}.practice-main{flex:1;display:flex;flex-direction:column;padding:28px 0 58px}.practice-area{width:100%;max-width:850px;margin:0 auto}.practice-topline{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:12px;color:#708077}.level-label{font-weight:650;letter-spacing:.02em}.question-counter{font-variant-numeric:tabular-nums}.text-button{border:0;padding:10px 0;background:none;color:#477661;cursor:pointer;font-size:13px;font-weight:600}.text-button:hover{color:#254a36}.progress-track{width:100%;background:#e4ebe4;height:4px;border-radius:30px;overflow:hidden;margin-top:19px}.progress-fill{background:#77a993;height:100%;border-radius:inherit;transition:width .25s ease}.question-body{padding:clamp(54px,9vw,110px) 0 20px}.chinese-sentence{font-family:Songti SC,"Noto Serif SC",STSong,serif;font-size:clamp(27px,4.7vw,44px);font-weight:600;letter-spacing:-.035em;line-height:1.55;margin:22px 0 13px}.instruction{color:#7b897f;line-height:1.8;font-size:13px;margin-bottom:47px}.answer-form{max-width:770px}.input-label{display:block;font-size:12px;color:#698075;font-weight:650;letter-spacing:.05em;margin-bottom:12px}.answer-input{display:block;width:100%;border-radius:14px;border:1.5px solid #cfddd1;padding:19px 22px;font-size:clamp(17px,2.3vw,22px);color:#263c30;background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}.answer-input:focus{border-color:#6da58a;box-shadow:0 0 0 4px #72ae901f}.answer-input::placeholder{color:#b5bfb7}.answer-input.input-error{border-color:#ca7a74}.answer-input.input-success{border-color:#6da58a;background:#f1f8f2}.feedback{min-height:32px;padding-top:10px;font-size:12px;color:#8a978e}.correct-text{color:#34775a}.error-text{color:#bd605a}.revealed-answer{margin-top:13px;background:#eef3ed;border-radius:11px;padding:15px 18px;display:flex;flex-direction:column;gap:7px;color:#356c54}.revealed-answer span{font-size:11px;color:#809387}.revealed-answer strong{font-size:17px;font-weight:600}.answer-actions{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:30px}.finished-screen{flex:1;display:flex;flex-direction:column;justify-content:center;padding:70px 0 90px}.finished-screen h2{font-family:Songti SC,"Noto Serif SC",STSong,serif;font-size:clamp(48px,7vw,90px);line-height:1.4;letter-spacing:-.06em;margin:18px 0}.finished-screen h2 em{color:#77a993;font-style:normal}.finished-screen p{color:#6e8074}@media(max-width:560px){.practice-topline{flex-wrap:wrap}.level-label{display:none}.question-body{padding-top:70px}.instruction{margin-bottom:30px}.answer-input{padding:17px 15px}}.word-review{margin-top:13px;background:#f0f3ee;border:1px solid #e2e9e0;padding:15px 17px;border-radius:12px}.word-review-label{color:#748478;font-size:12px;margin:0 0 11px}.word-review-list{display:flex;flex-wrap:wrap;gap:7px}.review-token{border:1px solid transparent;border-radius:7px;padding:5px 9px;font-size:15px;line-height:1.3}.review-correct{background:#dcefe3;color:#326e51}.review-replace,.review-extra{background:#f9e4e0;color:#a3403a;text-decoration:underline;text-decoration-style:wavy;text-underline-offset:4px}.review-missing{color:#a3403a;border:1px dashed #d89e94}.centered-practice{text-align:center;padding-top:clamp(70px,11vw,126px)}.centered-practice .eyebrow{justify-content:center;letter-spacing:.13em;font-size:11px}.centered-practice .chinese-sentence{margin:32px auto 12px;max-width:850px}.centered-practice .instruction{margin:0 auto 55px}.slot-form{width:100%}.slot-stage{position:relative;width:100%;min-height:112px;display:flex;align-items:flex-start;justify-content:center;cursor:text;padding:9px 0}.slot-capture{position:absolute;inset:0;width:100%;height:100%;z-index:1;padding:0;margin:0;border:none;background:transparent;opacity:0;color:transparent;font-size:16px;outline:none;caret-color:transparent}.slot-list{position:relative;z-index:2;display:flex;justify-content:center;flex-wrap:wrap;align-items:flex-end;gap:13px 12px;width:100%;pointer-events:none}.slot-unit{display:inline-flex;align-items:flex-end;position:relative;cursor:text;pointer-events:auto;transition:transform .15s ease}.slot-word{box-sizing:border-box;display:inline-flex;justify-content:center;align-items:flex-end;min-height:53px;padding:4px 4px 9px;font-size:clamp(21px,3.4vw,34px);line-height:1.08;font-weight:500;color:#5d6b64;border-bottom:2px solid #cfd8d1;border-radius:1px;white-space:pre;transition:border-color .14s ease,color .14s ease,background .14s ease}.slot-punctuation{padding:0 0 10px 1px;font-size:clamp(21px,3.4vw,34px);line-height:1.08;color:#718078}.slot-active{color:#8354a8;border-color:#ae83cc;border-bottom-width:3px}.slot-idle{color:#54615a}.slot-verified{border-color:#bdc8bf;color:#52645a}.slot-incorrect{color:#db4f56;border-color:#db4f56;border-bottom-width:3px}.slot-correct{color:#43836b;border-color:#69a68a}.slot-needs-fix{cursor:pointer}.slot-feedback{color:#8a978f;min-height:27px;font-size:13px;margin:30px auto 0;line-height:1.75}.feedback-error{color:#bd5357}.feedback-success{color:#4f9575}.slot-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:28px;margin-top:26px}.submit-minimal{background:#e6efe9;color:#42775d;border:1px solid #d4e4da;padding:12px 20px;border-radius:999px;cursor:pointer;font-size:13px;font-weight:650;transition:background .15s ease}.submit-minimal:hover{background:#d6e7dc}.slot-form .revealed-answer{margin:16px auto 0;max-width:500px;text-align:left}@keyframes slot-shake{0%,to{transform:translate(0)}22%{transform:translate(-4px)}46%{transform:translate(4px)}68%{transform:translate(-2px)}}@media(max-width:560px){.centered-practice{padding-top:60px}.centered-practice .instruction{margin-bottom:35px}.slot-list{gap:11px 8px}.slot-word{min-height:45px;padding:5px 2px 7px}.slot-stage{min-height:95px}}@media(prefers-reduced-motion:reduce){.slot-incorrect{animation:none}}.lesson-navigation{display:flex;flex-direction:column;align-items:center;margin-top:18px}.lesson-toggle{display:inline-flex;gap:13px;align-items:center;border:1px solid #dbe5dc;background:#f0f5f0;padding:10px 16px;border-radius:999px;color:#3f6e58;cursor:pointer}.lesson-toggle-index{color:#81998a;letter-spacing:.08em;font-size:11px;font-variant-numeric:tabular-nums}.lesson-toggle-title{font-weight:670;font-size:13px}.lesson-options{width:min(440px,100%);margin:13px auto 0;padding:6px;border:1px solid #dfe7e0;border-radius:18px;background:#fff;box-shadow:0 20px 40px #24493413}.lesson-option{width:100%;display:flex;gap:15px;align-items:center;text-align:left;padding:12px;border:none;border-radius:12px;cursor:pointer;background:transparent;color:#486351}.lesson-option:hover,.lesson-option.selected{background:#eff5ee}.lesson-option-number{font-size:11px;color:#87a08e}.lesson-option-copy{display:flex;flex-direction:column;flex:1;gap:3px}.lesson-option-copy strong{font-size:13px}.lesson-option-copy small{font-size:11px;line-height:1.55;color:#849187}.lesson-navigation+.question-body{padding-top:clamp(34px,6vw,72px)}.practice-top-actions{display:inline-flex;align-items:center;gap:18px}.sound-toggle{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;border:1px solid #d9e6da;color:#557361;background:#edf4ed;cursor:pointer;font-size:12px}.sound-toggle[aria-pressed=false]{color:#929e94;background:transparent;border-color:#e3e9e3}.sound-toggle span:first-child{font-size:17px}@media(max-width:560px){.practice-top-actions{gap:7px}}.slot-incorrect{position:relative;text-shadow:0 0 16px #de5d6033;background:linear-gradient(to top,#fce7e7a0,transparent 36%)}.slot-incorrect:after{position:absolute;content:"";bottom:-5px;left:8%;width:84%;height:5px;background:#e85d6170;filter:blur(5px);pointer-events:none}.success-emphasis{pointer-events:none;color:#61997a;letter-spacing:.08em;font-family:Georgia,serif;font-size:18px;margin:0 auto;font-weight:600}.success-emphasis span{font-size:14px;margin-right:6px}@media(prefers-reduced-motion:reduce){.slot-word,.slot-list,.progress-fill{transition-duration:0ms!important}}.slot-unit{transition:none;background:transparent;outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.slot-unit:active{transform:none;background:transparent}.slot-word{transition:none}.slot-active{color:#54615a;border-color:#8b9dc5;border-bottom-width:2px;background:transparent;text-shadow:none}.slot-unit:focus-visible .slot-word{outline:2px solid #88a3c3;outline-offset:3px}.slot-list{-webkit-user-select:none;user-select:none}.slot-stage,.slot-capture{-webkit-tap-highlight-color:transparent}.question-prompt{min-height:155px}.question-prompt .instruction{margin-bottom:30px}@media(max-width:560px){.question-prompt{min-height:135px}.slot-stage{min-height:100px}}.speech-toggle{white-space:nowrap}.speech-toggle span:first-child{font-size:13px}.replay-button{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.replay-button:disabled{opacity:.4;cursor:not-allowed}@media(max-width:560px){.practice-top-actions{flex-wrap:wrap;justify-content:flex-end}.sound-toggle{padding:6px 8px;font-size:11px}.slot-actions{gap:10px 17px}}