:root{color-scheme:light;--paper: #f4efe4;--paper-deep: #ece3d3;--surface: #fffdf8;--surface-soft: #f8f3e9;--ink: #1d343b;--ink-soft: #40565c;--muted: #5d6b6c;--line: #d9cfbf;--line-strong: #bbae9b;--teal: #2b665f;--teal-dark: #214f4a;--teal-pale: #e3efeb;--accent: #a94f2d;--accent-dark: #873d21;--accent-pale: #f7e7de;--green: #2d6845;--green-pale: #e6f0e8;--amber: #7d5515;--amber-pale: #fbf0d7;--blue: #315e78;--blue-pale: #e8f0f5;--danger: #8a3b32;--font-body: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;--font-letter: "Segoe UI", "Helvetica Neue", Arial, var(--font-body);--shadow-soft: 0 2px 0 rgba(29, 52, 59, .04);--radius: 12px;--radius-lg: 16px;--content: 1120px}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;min-width:300px;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.7;overflow-x:hidden}h1,h2,h3,p,ul,ol,figure{margin-top:0}h1,h2,h3{line-height:1.3;letter-spacing:-.01em}a{color:var(--teal-dark);text-decoration-thickness:1px;text-underline-offset:3px}a:hover{color:var(--accent)}button,input,textarea{font:inherit}button{cursor:pointer}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}::selection{background:#f0d3c2;color:var(--ink)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;top:-80px;left:16px;z-index:100;padding:12px 18px;border:0;border-radius:8px;background:var(--ink);color:#fff;font-weight:700}.skip-link:focus{top:12px;color:#fff}.wrap{width:min(var(--content),calc(100% - 40px));margin-inline:auto}.narrow-wrap{max-width:720px}.site-main{min-height:60vh}.site-main:focus{outline:none}.site-header{position:sticky;top:0;z-index:30;background:#f4efe4fa;border-bottom:1px solid var(--line)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:76px;padding-block:10px}.brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;flex-shrink:0}.brand:hover{color:var(--ink)}.brand-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--ink);color:#f9f4e9;font-size:24px;font-weight:700;line-height:1}.brand-text{display:flex;flex-direction:column;line-height:1.25}.brand-name{font-size:19px;font-weight:800;letter-spacing:.01em}.brand-tagline{color:var(--muted);font-size:13px}.site-nav{display:flex;align-items:center;gap:4px}.nav-link{display:inline-flex;align-items:center;min-height:44px;padding:8px 13px;border-radius:8px;color:var(--ink-soft);font-weight:600;font-size:16px;text-decoration:none;border-bottom:2px solid transparent}.nav-link:hover{background:var(--surface-soft);color:var(--ink)}.nav-link-active{background:var(--teal-pale);color:var(--teal-dark);border-bottom-color:var(--teal)}.site-footer{margin-top:72px;background:var(--ink);color:#e9e4d8;padding:34px 0}.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:28px}.footer-title{margin-bottom:4px;font-size:18px;font-weight:700;color:#fff}.footer-copy{margin-bottom:0;max-width:560px;color:#c9c3b6;font-size:14px}.footer-nav{display:flex;flex-wrap:wrap;gap:8px 18px}.footer-nav a{display:inline-flex;align-items:center;min-height:36px;color:#e5dfd2;font-size:14px}.storage-notice{display:flex;align-items:flex-start;gap:12px;width:min(var(--content),calc(100% - 40px));margin:18px auto 0;padding:14px 18px;background:var(--amber-pale);border:1px solid #dfbe7f;border-left:5px solid var(--amber);border-radius:8px;color:#4f3c1d;font-size:15px}.storage-notice p{margin:0}.notice-icon{display:inline-grid;place-items:center;flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:currentColor;color:var(--surface);font-size:15px;font-weight:800;line-height:1;margin-top:2px}.storage-notice .notice-icon{background:var(--amber)}.button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:10px 19px;border:2px solid transparent;border-radius:8px;background:transparent;color:var(--ink);font-size:16px;font-weight:700;line-height:1.35;text-align:center;text-decoration:none}.button:hover{text-decoration:none}.button-primary{background:var(--teal);border-color:var(--teal);color:#fff}.button-primary:hover{background:var(--teal-dark);border-color:var(--teal-dark);color:#fff}.button-quiet{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}.button-quiet:hover{background:var(--surface-soft);border-color:var(--teal);color:var(--ink)}.button-text{min-height:44px;padding:8px 6px;color:var(--teal-dark);text-decoration:underline;text-underline-offset:4px;font-weight:600}.button-text:hover{color:var(--accent)}.button-large{min-height:56px;padding:13px 23px;font-size:17px}.button[disabled]{cursor:not-allowed;opacity:.55}.button-sub{font-weight:500;opacity:.9}.eyebrow{margin-bottom:8px;color:var(--accent-dark);font-size:13px;font-weight:800;letter-spacing:.08em}.progress-track{width:100%;height:10px;overflow:hidden;background:#e6ddce;border-radius:999px}.progress-fill{display:block;height:100%;border-radius:inherit;background:var(--teal)}.hero{padding:64px 0 54px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fbf7ee 0%,var(--paper) 100%)}.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.8fr);align-items:center;gap:52px}.hero h1{margin-bottom:20px;font-size:clamp(2.15rem,4.2vw,3.55rem);line-height:1.2;letter-spacing:-.025em}.hero-emphasis{color:var(--teal-dark);background:linear-gradient(transparent 70%,#d5e5df 70%)}.hero-lede{max-width:650px;margin-bottom:26px;color:var(--ink-soft);font-size:18px;line-height:1.85}.hero-actions{display:flex;flex-wrap:wrap;gap:12px}.hero-actions .button-primary{max-width:100%}.resume-note{margin:14px 0 0;color:var(--muted);font-size:14px}.hero-demo{padding:26px;background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--accent);border-radius:var(--radius);box-shadow:0 8px 24px #28343112}.demo-label{margin-bottom:18px;color:var(--muted);font-size:13px;font-weight:700}.demo-formula{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-family:var(--font-letter)}.demo-key{display:grid;place-items:center;width:54px;height:54px;border:1px solid var(--line-strong);border-bottom-width:3px;border-radius:9px;background:#fbf7ef;color:var(--ink);font-size:26px;font-weight:700}.demo-plus,.demo-equals{color:var(--muted);font-size:22px}.demo-result{color:var(--teal-dark);font-size:30px;font-weight:800;letter-spacing:.03em}.demo-hanzi{margin-bottom:14px;font-size:44px;font-weight:800;line-height:1.2}.demo-candidate{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}.demo-candidate span{padding:5px 10px;border:1px solid var(--line);border-radius:5px;background:var(--surface-soft);font-size:15px;white-space:nowrap}.demo-candidate .candidate-active{border-color:var(--teal);background:var(--teal-pale);color:var(--teal-dark);font-weight:700}.demo-caption{margin:0;color:var(--muted);font-size:13px;line-height:1.6}.section{padding:54px 0 0}.section-heading{margin-bottom:22px}.section-heading h2{margin-bottom:8px;font-size:clamp(1.55rem,2.6vw,2.05rem)}.section-heading-inline{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}.entry-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.entry-card{display:flex;flex-direction:column;min-width:0;min-height:300px;padding:25px;background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--teal);border-radius:var(--radius);color:var(--ink);text-decoration:none;box-shadow:var(--shadow-soft)}.entry-card:hover{color:var(--ink);border-color:var(--teal);border-top-color:var(--teal-dark);background:#fffefa}.entry-card-life{border-top-color:var(--accent)}.entry-card-life:hover{border-color:var(--accent);border-top-color:var(--accent-dark)}.entry-card-service{border-top-color:var(--blue)}.entry-card-service:hover{border-color:var(--blue);border-top-color:#234a60}.entry-number{margin-bottom:18px;color:var(--accent-dark);font-family:var(--font-letter);font-size:14px;font-weight:800;letter-spacing:.1em}.entry-card h3{margin-bottom:10px;font-size:25px}.entry-card p{margin-bottom:16px;color:var(--ink-soft);font-size:15px;line-height:1.75}.entry-meta{color:var(--muted);font-size:13px}.entry-link{margin-top:auto;padding-top:20px;color:var(--teal-dark);font-size:15px;font-weight:700}.progress-section{padding-top:60px}.progress-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,320px);gap:34px;padding:30px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}.progress-panel h2{margin-bottom:0;font-size:clamp(1.4rem,2.5vw,1.9rem)}.progress-fraction{color:var(--muted);font-size:15px;white-space:nowrap}.progress-panel .progress-track{margin:18px 0 22px}.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.stat{padding:12px 14px;background:var(--surface-soft);border-radius:8px;min-width:0}.stat strong{display:block;margin-bottom:2px;color:var(--teal-dark);font-size:26px;line-height:1.3}.stat strong.stat-date{font-size:16px;line-height:1.55;padding-top:4px}.stat span{color:var(--muted);font-size:13px}.progress-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:22px}.progress-aside{padding-left:28px;border-left:1px solid var(--line)}.aside-title{margin-bottom:12px;color:var(--ink);font-size:16px;font-weight:800}.stage-mini-list{margin:0;padding:0;list-style:none}.stage-mini-list li{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line)}.stage-mini-list li:last-child{border-bottom:0}.stage-mini-list>li>span{display:grid;place-items:center;flex:0 0 auto;width:24px;height:24px;border:1px solid var(--line-strong);border-radius:50%;color:var(--muted);font-size:12px;font-weight:700}.stage-mini-list div{display:flex;flex:1;justify-content:space-between;align-items:baseline;gap:8px;min-width:0}.stage-mini-list strong{font-size:14px;font-weight:700}.stage-mini-list small{color:var(--muted);font-size:12px;white-space:nowrap}.inline-note{margin:12px 0 0;color:var(--danger);font-size:14px}.howto-section{padding-bottom:10px}.howto-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 0 24px;padding:0;list-style:none}.howto-grid li{padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}.howto-number{display:block;margin-bottom:12px;color:var(--accent-dark);font-family:var(--font-letter);font-size:30px;font-weight:800;line-height:1}.howto-grid h3{margin-bottom:7px;font-size:19px}.howto-grid p{margin-bottom:0;color:var(--ink-soft);font-size:15px}.local-note{display:flex;align-items:flex-start;gap:12px;padding:15px 18px;background:var(--blue-pale);border:1px solid #c6d7e1;border-radius:8px;color:#243f51;font-size:14px}.local-note .notice-icon{background:var(--blue)}.local-note p{margin:0}.page-header{padding:54px 0 30px}.page-header h1{margin-bottom:14px;font-size:clamp(1.95rem,3.6vw,2.8rem)}.page-lede{max-width:800px;margin-bottom:22px;color:var(--ink-soft);font-size:17px;line-height:1.85}.page-progress{max-width:640px;margin-bottom:22px}.page-progress-label{display:flex;justify-content:space-between;gap:14px;margin-bottom:8px;color:var(--muted);font-size:14px}.stage-list{display:grid;gap:24px}.stage-block{padding:26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}.stage-header{display:grid;grid-template-columns:58px minmax(0,1fr) minmax(150px,190px);gap:18px;align-items:start;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:16px}.stage-number{color:var(--accent-dark);font-family:var(--font-letter);font-size:38px;font-weight:800;line-height:1;letter-spacing:-.03em}.stage-copy h2{margin-bottom:6px;font-size:24px}.stage-copy p{margin-bottom:6px;color:var(--ink-soft);font-size:15px}.stage-goal{color:var(--teal-dark)!important;font-size:14px!important;font-weight:600}.stage-progress span{display:block;margin-bottom:7px;color:var(--muted);font-size:13px;text-align:right}.lesson-list{display:grid;gap:9px;margin:0;padding:0;list-style:none}.lesson-card{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 16px;border:1px solid var(--line);border-radius:9px;background:#fffefa;color:var(--ink);text-decoration:none}.lesson-card:hover{border-color:var(--teal);background:#f9fcfa;color:var(--ink)}.lesson-card-completed{border-color:#b9d2c0;background:#f7fbf8}.lesson-card-current{border-color:var(--teal);box-shadow:inset 3px 0 0 var(--teal)}.lesson-number{color:var(--line-strong);font-family:var(--font-letter);font-size:13px;font-weight:800;letter-spacing:.04em}.lesson-main{display:flex;flex-direction:column;min-width:0}.lesson-title-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px 10px}.lesson-title{font-size:17px;font-weight:800}.lesson-subtitle{color:var(--ink-soft);font-size:14px}.lesson-meta{color:var(--muted);font-size:12px}.status-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.6;white-space:nowrap}.status-badge-done{background:var(--green-pale);color:var(--green);border:1px solid #bcd6c3}.status-badge-current{background:var(--teal-pale);color:var(--teal-dark);border:1px solid #b3d1ca}.lesson-action{color:var(--teal-dark);font-size:13px;font-weight:700;white-space:nowrap}.lesson-action .arrow{display:inline-block;margin-left:3px}.stage-jump{margin:14px 0 0;font-size:14px}.finish-note{margin-top:40px;padding:28px;background:var(--paper-deep);border-radius:var(--radius)}.finish-note h2{margin-bottom:10px;font-size:21px}.finish-note p{max-width:800px;margin-bottom:18px;color:var(--ink-soft);font-size:15px}.finish-links{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.topic-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}.safety-note{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;padding:13px 16px;background:var(--amber-pale);border:1px solid #e2c48c;border-left:4px solid var(--amber);border-radius:8px;color:#4d3a19;font-size:14px}.safety-note p{margin:0}.safety-note .notice-icon{background:var(--amber)}.safety-note-wide{margin:0 0 26px}.topic-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,310px);gap:30px;align-items:start}.topic-lesson-list{gap:10px}.topic-aside{display:grid;gap:14px;position:sticky;top:96px}.aside-card{padding:19px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);font-size:14px}.aside-card p:last-child{margin-bottom:0}.aside-card-muted{background:var(--surface-soft)}.topic-footer{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}.practice-page{padding-bottom:64px}.practice-wrap{max-width:900px}.practice-topbar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 0 14px}.back-link{display:inline-flex;align-items:center;gap:5px;min-height:44px;color:var(--ink-soft);font-size:14px;font-weight:600;text-decoration:none}.back-link:hover{color:var(--teal-dark);text-decoration:underline}.practice-position{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}.practice-card{padding:30px 34px 34px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 3px #1d343b08}.practice-header{padding-bottom:18px;border-bottom:1px solid var(--line)}.practice-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px}.practice-header h1{margin-bottom:4px;font-size:clamp(1.65rem,3vw,2.2rem)}.practice-subtitle{margin-bottom:0;color:var(--ink-soft);font-size:15px}.time-chip{flex:0 0 auto;padding:4px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12px;white-space:nowrap}.lesson-intro{margin-top:18px;background:var(--surface-soft);border:1px solid var(--line);border-radius:9px}.lesson-intro summary{min-height:44px;padding:11px 15px;color:var(--ink);font-size:15px;font-weight:700;cursor:pointer}.lesson-intro ul{margin:0;padding:0 20px 14px 34px;color:var(--ink-soft);font-size:14px}.lesson-intro li{margin-bottom:5px}.lesson-intro li:last-child{margin-bottom:0}.practice-card>.safety-note{margin-top:16px;margin-bottom:0}.task-panel{padding-top:24px}.task-kicker{margin-bottom:6px;color:var(--accent-dark);font-size:13px;font-weight:800;letter-spacing:.04em}.task-instruction{margin-bottom:20px;font-size:clamp(1.2rem,2.3vw,1.5rem);font-weight:700;line-height:1.55}.target-card{padding:22px 22px 20px;background:var(--surface-soft);border:1px solid var(--line);border-radius:10px;text-align:center}.card-label{margin-bottom:8px;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.05em}.target-text{margin-bottom:10px;color:var(--ink);font-size:clamp(1.75rem,4.2vw,2.7rem);font-weight:800;line-height:1.45;letter-spacing:.01em;overflow-wrap:anywhere}.pinyin-hint{display:inline-block;margin-bottom:10px;padding:4px 12px;border-radius:999px;background:var(--teal-pale);color:var(--teal-dark);font-size:15px}.pinyin-hint strong{font-family:var(--font-letter);font-size:18px;letter-spacing:.03em}.target-example{margin-bottom:0;color:var(--ink-soft);font-size:14px}.target-example strong{color:var(--ink);font-size:17px}.speech-area{margin-top:14px}.speech-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.speech-button{min-height:42px;padding:7px 13px;font-size:14px}.speech-button svg{flex:0 0 auto}.speech-note{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.6}.speech-area .speech-note{text-align:center}.speech-footnote{margin-top:8px;color:var(--muted);font-size:12px}.keyboard-guide{margin-top:16px;padding:15px;background:#f1ebe0;border:1px solid var(--line);border-radius:10px}.keyboard-caption{margin-bottom:10px;color:var(--muted);font-size:13px}.keyboard-caption strong{margin-left:4px;color:var(--teal-dark);font-family:var(--font-letter);font-size:16px;letter-spacing:.08em}.keyboard{display:flex;flex-direction:column;gap:5px;align-items:center}.keyboard-row{display:flex;justify-content:center;gap:4px;width:100%}.key{display:grid;place-items:center;flex:1 1 0;min-width:0;height:clamp(30px,5.5vw,44px);border:1px solid #cfc4b4;border-bottom-width:2px;border-radius:5px;background:#fffdf8;color:var(--ink-soft);font-family:var(--font-letter);font-size:clamp(11px,1.8vw,15px);font-weight:600}.key-active{border-color:var(--teal-dark);background:var(--teal);color:#fff}.keyboard-space-row{margin-top:1px}.key-space{flex:0 0 46%;font-family:var(--font-body);font-size:12px}.typing-mode-note{margin:14px 0 0;padding:9px 12px;border-left:4px solid var(--teal);border-radius:5px;background:var(--teal-pale);color:#244b46;font-size:13px}.ime-help{margin-top:16px;border:1px solid #c6d7e1;border-radius:9px;background:var(--blue-pale)}.ime-help summary{min-height:44px;padding:11px 15px;color:#27475c;font-size:14px;font-weight:700;cursor:pointer}.ime-help-body{padding:0 17px 16px;color:#294658}.ime-help-lead{margin-bottom:12px;font-size:14px}.ime-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.ime-columns h3{margin-bottom:6px;color:#1f3b4d;font-size:15px}.ime-columns ol{margin:0;padding-left:20px;font-size:13px}.ime-columns li{margin-bottom:4px}.ime-help-note{margin:12px 0 0;padding-top:10px;border-top:1px solid #c6d7e1;font-size:12px}.input-area{margin-top:22px}.input-label{display:block;margin-bottom:8px;font-size:15px;font-weight:800}.answer-input{display:block;width:100%;min-height:62px;padding:13px 15px;border:2px solid var(--line-strong);border-radius:9px;background:#fff;color:var(--ink);font-family:var(--font-body);font-size:23px;line-height:1.5}.answer-input::placeholder{color:#8a8175;font-size:16px}.answer-input:focus{border-color:var(--teal);outline:3px solid rgba(43,102,95,.2);outline-offset:1px}.answer-input[readonly]{background:var(--surface-soft);color:var(--ink)}.answer-textarea{min-height:132px;resize:vertical;font-size:19px;line-height:1.7}.input-status{margin:8px 0 0;color:var(--muted);font-size:12px}.ime-notice{margin:9px 0 0;padding:9px 12px;border-left:4px solid var(--blue);background:var(--blue-pale);border-radius:5px;color:#26485c;font-size:13px}.task-hint{margin-top:16px;border:1px dashed var(--line-strong);border-radius:8px;background:#fcf8f0}.task-hint summary{min-height:44px;padding:10px 14px;color:var(--ink-soft);font-size:13px;font-weight:600;cursor:pointer}.task-hint p{margin:0;padding:0 14px 12px;color:var(--ink-soft);font-size:13px}.practice-actions{display:flex;flex-wrap:wrap;align-items:center;gap:9px 12px;margin-top:22px}.feedback{display:flex;align-items:flex-start;gap:12px;margin-top:18px;padding:14px 16px;border:1px solid var(--line);border-left:5px solid var(--muted);border-radius:8px;background:var(--surface-soft)}.feedback-icon{display:inline-grid;place-items:center;flex:0 0 auto;width:28px;height:28px;margin-top:1px;border-radius:50%;background:var(--muted);color:#fff;font-size:16px;font-weight:800;line-height:1}.feedback-body strong{display:block;margin-bottom:2px;font-size:15px}.feedback-body p{margin:0;color:var(--ink-soft);font-size:14px}.feedback-body .feedback-next{margin-top:4px;color:var(--green);font-size:13px;font-weight:600}.feedback-correct{border-color:#b4d0bc;border-left-color:var(--green);background:var(--green-pale)}.feedback-correct .feedback-icon{background:var(--green)}.feedback-correct .feedback-body strong{color:var(--green)}.feedback-retry{border-color:#dfc48d;border-left-color:var(--amber);background:var(--amber-pale)}.feedback-retry .feedback-icon{background:var(--amber)}.feedback-retry .feedback-body strong{color:#64430d}.feedback-caution{border-color:#dfc48d;border-left-color:var(--accent);background:var(--accent-pale)}.feedback-caution .feedback-icon{background:var(--accent)}.feedback-caution .feedback-body strong{color:var(--accent-dark)}.feedback-step{border-color:#c0d3df;border-left-color:var(--blue);background:var(--blue-pale)}.feedback-step .feedback-icon{background:var(--blue)}.feedback-step .feedback-body strong{color:var(--blue)}.feedback-neutral .feedback-icon{background:var(--muted)}.sample-area{margin-top:18px}.sample-toggle{padding-left:0}.sample-box{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px;background:#fbf7ee;border:1px solid var(--line);border-radius:9px}.sample-box>div{flex:1 1 380px;min-width:0}.sample-text{margin-bottom:4px;color:var(--ink);font-size:17px;font-weight:600;line-height:1.75}.sample-note{margin:0;color:var(--muted);font-size:12px}.sample-box .speech-area{margin-top:0}.sample-box .speech-buttons{justify-content:flex-start}.practice-footnote{margin:16px 0 0;color:var(--muted);font-size:12px;text-align:center}.summary-card{max-width:700px;margin:28px auto 0;padding:38px 34px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);text-align:center}.summary-mark{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 18px;border-radius:50%;background:var(--green-pale);color:var(--green);border:2px solid #b4d0bc;font-size:30px;font-weight:800}.summary-card h1{margin-bottom:12px;font-size:clamp(1.8rem,3.5vw,2.35rem)}.summary-lede{max-width:530px;margin:0 auto 24px;color:var(--ink-soft);font-size:16px}.summary-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 auto 22px;max-width:520px}.summary-stats div{padding:12px 8px;background:var(--surface-soft);border-radius:8px}.summary-stats strong{display:block;color:var(--teal-dark);font-size:28px;line-height:1.25}.summary-stats span{color:var(--muted);font-size:12px}.summary-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px}.summary-note{margin:20px auto 0;max-width:560px;color:var(--muted);font-size:12px}.guide-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:34px;align-items:start}.guide-article{padding:30px 34px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}.guide-article section{padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--line)}.guide-article section:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}.guide-article h2{margin-bottom:10px;font-size:21px}.guide-article p{margin-bottom:10px;color:var(--ink-soft);font-size:15px;line-height:1.85}.guide-aside{display:grid;gap:14px;position:sticky;top:96px}.notfound-page,.error-page{padding:70px 0}.notfound-page h1,.error-page h1{margin-bottom:14px;font-size:clamp(1.9rem,4vw,2.8rem)}.notfound-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.section-heading+.entry-grid{margin-top:0}@media (max-width: 980px){.hero-grid{grid-template-columns:1fr;gap:34px}.hero-demo{max-width:500px}.hero{padding-top:44px}.entry-grid{grid-template-columns:1fr}.entry-card{min-height:0}.entry-link{padding-top:14px}.progress-panel{grid-template-columns:1fr}.progress-aside{padding-left:0;padding-top:20px;border-left:0;border-top:1px solid var(--line)}.stage-mini-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}.howto-grid,.topic-layout,.guide-layout{grid-template-columns:1fr}.topic-aside,.guide-aside{position:static;grid-template-columns:repeat(3,minmax(0,1fr))}.stage-header{grid-template-columns:52px minmax(0,1fr)}.stage-progress{grid-column:2;max-width:280px;margin-top:4px}.stage-progress span{text-align:left}}@media (max-width: 760px){body{font-size:16px}.wrap,.storage-notice{width:calc(100% - 28px)}.site-header{position:static}.header-inner{flex-direction:column;align-items:stretch;gap:8px;padding-bottom:10px}.site-nav{flex-wrap:wrap;gap:2px}.nav-link{flex:1 1 auto;justify-content:center;padding-inline:8px;font-size:15px}.brand-tagline{display:none}.hero{padding:34px 0 38px}.hero-lede{font-size:16px}.hero-actions .button{width:100%}.hero-demo{padding:20px}.demo-hanzi{font-size:38px}.section{padding-top:38px}.progress-panel{padding:20px}.section-heading-inline{align-items:flex-start;flex-direction:column;gap:4px}.stat-grid{grid-template-columns:1fr 1fr}.stat:last-child{grid-column:1 / -1}.stage-mini-list{grid-template-columns:1fr}.stage-block{padding:18px}.stage-header{grid-template-columns:1fr;gap:8px}.stage-number{font-size:28px}.stage-progress{grid-column:auto}.lesson-card{grid-template-columns:24px minmax(0,1fr);gap:10px;padding:12px}.lesson-action{grid-column:2;font-size:12px}.stage-block .lesson-list{gap:8px}.finish-note{padding:20px}.page-header{padding-top:34px}.topic-aside,.guide-aside{grid-template-columns:1fr}.practice-card{padding:20px 16px 24px;border-radius:var(--radius)}.practice-title-row{gap:10px}.target-card{padding:18px 12px}.target-text{font-size:clamp(1.45rem,6vw,2.15rem)}.ime-columns{grid-template-columns:1fr;gap:12px}.keyboard-guide{padding:10px}.keyboard-row{gap:2px}.key{height:34px;font-size:11px;border-radius:4px}.practice-actions .button{flex:1 1 150px}.summary-card{margin-top:14px;padding:28px 18px}.summary-stats{gap:6px}.summary-stats strong{font-size:24px}.summary-actions .button{width:100%}.guide-article{padding:22px 18px}.footer-inner{flex-direction:column;gap:12px}.footer-nav{gap:2px 14px}.site-footer{margin-top:48px}}@media (max-width: 420px){.brand-mark{width:38px;height:38px;font-size:21px}.brand-name{font-size:17px}.nav-link{flex:1 1 44%}.hero h1{font-size:2rem}.demo-key{width:46px;height:46px;font-size:22px}.demo-result{font-size:25px}.progress-actions .button{width:100%}.stat-grid{grid-template-columns:1fr}.stat:last-child{grid-column:auto}.summary-stats{grid-template-columns:1fr}.summary-stats div{display:flex;align-items:baseline;justify-content:space-between;padding:8px 12px}.summary-stats strong{font-size:20px}.speech-button{flex:1 1 120px}.lesson-intro ul{padding-left:28px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}