/* White Learning Studio — layout stays local; navigation comes from public-shell. */
.home-guide{--guide-paper:#fff;--guide-ink:#17243b;--guide-muted:#516079;--guide-blue:#4f46e5;--guide-line:#e2e8f0;--guide-teal:#edf8f5;margin:0;background:#fff;color:var(--guide-ink);font:16px/1.75 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
.home-guide *{box-sizing:border-box}
.home-guide h1,.home-guide h2,.home-guide h3,.home-guide p,.home-guide figure{margin:0}
.home-guide a{color:var(--guide-blue);text-decoration:none}
.home-guide button,.home-guide a{touch-action:manipulation}
.home-guide .guide-container{width:calc(100% - 80px);max-width:1200px;margin-inline:auto}
.home-guide .guide-hero{background:#fff;padding:64px 0 70px}
.home-guide .guide-hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);align-items:center;gap:64px}
.home-guide .guide-hero-copy{min-width:0}
.home-guide .guide-eyebrow{font-size:14px;font-weight:600;line-height:1.7;letter-spacing:.08em;color:var(--guide-blue);margin-bottom:24px}
.home-guide h1{font-size:clamp(40px,3.65vw,54px);font-weight:750;letter-spacing:-.045em;line-height:1.38;text-wrap:balance;max-width:12em}
.home-guide .guide-hero-description{font-size:18px;line-height:1.9;color:var(--guide-muted);margin-top:26px;max-width:500px}
.home-guide .guide-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:30px}
.home-guide .guide-button,.home-guide .guide-text-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 20px;border:1px solid var(--guide-blue);border-radius:10px;font-size:16px;font-weight:600;line-height:1.5;text-align:center}
.home-guide .guide-button{background:var(--guide-blue);color:#fff}
.home-guide .guide-button:hover{background:#4338ca;border-color:#4338ca}
.home-guide .guide-text-link,.home-guide .guide-button-outline{background:#fff;color:var(--guide-blue)}
.home-guide .guide-text-link:hover,.home-guide .guide-button-outline:hover{background:#f3f2ff;border-color:#4338ca;color:#4338ca}
.home-guide .guide-button img,.home-guide .guide-text-link img{flex-shrink:0;width:18px;height:18px}
.home-guide .guide-button:not(.guide-button-outline) img{filter:brightness(0) invert(1)}
.home-guide .guide-free-note{font-size:13px;line-height:1.8;margin-top:18px;color:var(--guide-muted)}
.home-guide .studio-preview{min-width:0;border:8px solid #f3f2ff;border-radius:30px;background:#fff;overflow:hidden;box-shadow:0 18px 48px rgba(41,42,101,.09)!important}
.home-guide .studio-preview-body{position:relative;isolation:isolate;min-height:345px}
.home-guide .studio-art{position:absolute;inset:0 0 0 auto;width:62%;height:100%;object-fit:cover;object-position:50% 75%;z-index:-1}
.home-guide .studio-word{position:relative;padding:26px 26px 32px;max-width:86%;min-height:340px}
.home-guide .studio-label{font-size:13px;font-weight:600;color:#516079;margin-bottom:30px;display:flex;gap:12px;align-items:center}
.home-guide .studio-label span{font-size:12px;letter-spacing:.06em;color:#64748b}
.home-guide .studio-word-title{display:flex;align-items:center;gap:14px}
.home-guide .studio-word-title h2{font-size:40px;letter-spacing:-1.4px;line-height:1.25;font-weight:700}
.home-guide .studio-audio{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:10px;border:0;border-radius:50%;background:#f0efff;cursor:pointer}
.home-guide .studio-audio:hover{background:#e5e2ff}
.home-guide .studio-audio[disabled]{opacity:.6;cursor:wait}
.home-guide .studio-phonetic{font-size:15px;color:#64748b;margin-top:6px}
.home-guide #wordMeaning{font-size:18px;line-height:1.5;margin-top:25px}
.home-guide #wordSentence{font-size:15px;line-height:1.85;margin-top:22px;max-width:260px}
.home-guide #wordSentence strong{font-weight:600;color:var(--guide-blue)}
.home-guide #wordSentence span{font-size:13px;color:var(--guide-muted)}
.home-guide .studio-audio-status{position:absolute;left:26px;bottom:8px;font-size:12px;color:var(--guide-muted)}
.home-guide .studio-preview-footer{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:16px 14px 10px;border-top:1px solid #edf0f6;background:#fff}
.home-guide .studio-preview-footer a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 6px;min-height:75px;font-size:13px;color:#516079;border-radius:9px}
.home-guide .studio-preview-footer a:hover{background:#f5f4ff;color:#4338ca}
.home-guide .studio-preview-footer p{grid-column:1/-1;text-align:center;font-size:11px;color:#64748b;margin:6px 0 1px}
.home-guide .guide-section{padding:60px 0;border-top:1px solid #edf0f5}
.home-guide .guide-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:28px}
.home-guide .guide-section h2{font-size:30px;line-height:1.5;font-weight:700;letter-spacing:-.035em;text-wrap:balance}
.home-guide .guide-section-number{font-size:12px;font-weight:650;letter-spacing:.12em;line-height:1.8;color:#536483;margin-bottom:10px}
.home-guide .guide-section-intro{font-size:16px;line-height:1.85;color:var(--guide-muted);margin-top:12px;max-width:750px}
.home-guide .guide-roles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.home-guide .role{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:26px 24px;border:1px solid var(--guide-line);border-radius:14px;background:#fff}
.home-guide .guide-role-label{font-size:12px;font-weight:600;letter-spacing:.06em;color:#536483;margin-bottom:14px}
.home-guide .role h3{font-size:20px;line-height:1.55;font-weight:650;letter-spacing:-.02em}
.home-guide .role p{width:100%;font-size:15px;line-height:1.85;color:var(--guide-muted);margin:12px 0 20px}
.home-guide .role p.role-note{min-height:0;margin:8px 0 0;font-size:12px;line-height:1.7;color:#64748b}
.home-guide .role a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;font-weight:600;color:#4338ca;margin-top:auto}
.home-guide .role a:hover{text-decoration:underline;text-underline-offset:5px}
.home-guide .guide-shots{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:30px;min-width:0;align-items:start}
.home-guide .guide-shot{min-width:0}
.home-guide .guide-shot,.home-guide .guide-quest-figure{margin:0;min-width:0;border:1px solid var(--guide-line);border-radius:14px;background:#fff;overflow:hidden}
.home-guide [data-ciku-shot="static"]{cursor:default;user-select:none}
.home-guide [data-ciku-shot="static"] img{pointer-events:none;-webkit-user-drag:none}
.home-guide .guide-shot img{width:100%;max-width:100%}
.home-guide .guide-shot img,.home-guide .guide-quest-figure img{display:block;width:100%;max-width:100%;height:auto}
.home-guide .guide-shot figcaption,.home-guide .guide-quest-figure figcaption{padding:14px 18px;font-size:13px;line-height:1.75;color:var(--guide-muted);border-top:1px solid var(--guide-line)}
.home-guide .guide-shot--wide{grid-column:1/-1}
.home-guide .guide-quest{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:26px;margin-top:28px;align-items:start;min-width:0}
.home-guide .guide-quest-list{margin:0;padding:0;list-style:none;display:grid;gap:12px;min-width:0}
.home-guide .guide-quest-list li{border:1px solid var(--guide-line);border-radius:12px;background:#fff;padding:18px 20px;font-size:15px;line-height:1.8;color:var(--guide-muted)}
.home-guide .guide-quest-list b{display:block;margin-bottom:6px;font-size:16px;color:var(--guide-ink)}
.home-guide .guide-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:28px 0 0;padding:0;list-style:none;counter-reset:step}
.home-guide .guide-steps li{counter-increment:step;padding:24px;position:relative;border:1px solid #dcece7;border-radius:14px;background:#f3faf8;font-size:15px;line-height:1.85;color:var(--guide-muted)}
.home-guide .guide-steps li::before{content:counter(step,decimal-leading-zero);display:block;margin-bottom:12px;font-size:13px;font-weight:700;color:#0f766e;letter-spacing:.1em}
.home-guide .guide-institution{padding:38px;border:1px solid #dcece7;border-radius:18px;background:#f3faf8;margin-bottom:54px}
.home-guide .guide-institution-copy{max-width:900px}
.home-guide .guide-institution h2{font-size:30px;line-height:1.5;letter-spacing:-.03em}
.home-guide .guide-institution p{font-size:16px;line-height:1.85;color:var(--guide-muted);margin:12px 0}
.home-guide .guide-institution .guide-actions{margin-top:24px}
.home-guide .guide-institution .guide-text-link{font-size:14px;min-height:46px;padding:10px 15px}
.home-guide .guide-workspaces{display:flex;align-items:center;gap:40px;padding:28px 0;border-top:1px solid var(--guide-line)}
.home-guide .guide-workspaces h2{font-size:20px;line-height:1.6;white-space:nowrap}
.home-guide .guide-workspaces p{font-size:14px;color:var(--guide-muted);margin-top:4px}
.home-guide .guide-workspace-links{display:flex;gap:8px 24px;flex-wrap:wrap}
.home-guide .guide-workspace-links a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;text-decoration:underline;text-underline-offset:5px}
.home-guide .guide-faq-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:70px}
.home-guide .guide-faq details{border-bottom:1px solid var(--guide-line)}
.home-guide .guide-faq details:first-child{border-top:1px solid var(--guide-line)}
.home-guide .guide-faq summary{min-height:68px;padding:18px 6px;font-size:16px;font-weight:600;cursor:pointer;list-style-position:inside}
.home-guide .guide-faq summary::marker{color:#4f46e5}
.home-guide .guide-faq details p{font-size:15px;line-height:1.9;color:var(--guide-muted);padding:0 6px 22px}
.home-guide .guide-faq-help{margin-top:22px}
.home-guide .guide-footer{border-top:1px solid var(--guide-line);background:#fafbfe;padding:32px 0 26px;font-size:13px;line-height:1.9;color:var(--guide-muted)}
.home-guide .guide-footer-top{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:20px}
.home-guide .guide-footer img{width:116px;height:34px;display:block}
.home-guide .guide-footer-links{display:flex;align-items:center;gap:2px 6px;flex-wrap:wrap;justify-content:flex-end}
.home-guide .guide-footer-links a{display:inline-flex;align-items:center;min-height:44px;padding:6px 10px;border-radius:8px;color:#516079}
.home-guide .guide-footer-links a:hover{background:#f0efff;color:#4338ca}
.home-guide .guide-footer-sub{margin-top:5px}
@media(max-width:1100px){.home-guide .guide-container{width:calc(100% - 48px)}.home-guide .guide-hero{padding:46px 0 54px}.home-guide .guide-hero-grid{gap:32px}.home-guide h1{font-size:42px}.home-guide .guide-hero-description{font-size:16px}.home-guide .guide-actions{gap:10px}.home-guide .guide-button,.home-guide .guide-text-link{font-size:15px;padding:12px 16px}.home-guide .studio-word{padding:22px;min-height:320px}.home-guide .studio-word-title h2{font-size:34px}.home-guide .studio-art{width:60%}.home-guide .role{padding:22px 18px}.home-guide .guide-roles{gap:14px}.home-guide .guide-section-heading{align-items:flex-start}.home-guide .guide-faq-layout{gap:36px}}
@media(max-width:900px){.home-guide .guide-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}.home-guide h1{font-size:36px}.home-guide .guide-hero .guide-actions{flex-direction:column;align-items:stretch}.home-guide .guide-hero .guide-actions>a{width:100%}.home-guide .studio-word{padding:20px;max-width:100%}.home-guide .studio-art{width:70%;opacity:.55}.home-guide .studio-word-title h2{font-size:32px}.home-guide #wordSentence{max-width:240px;font-size:14px}.home-guide .guide-roles{grid-template-columns:repeat(2,minmax(0,1fr))}.home-guide .guide-steps{grid-template-columns:1fr}.home-guide .guide-quest{grid-template-columns:1fr}.home-guide .guide-footer-top{align-items:flex-start}.home-guide .guide-workspaces{display:block}.home-guide .guide-workspace-links{margin-top:12px}}
@media(max-width:740px){.home-guide .guide-container{width:calc(100% - 40px)}.home-guide .guide-hero{padding:36px 0 42px}.home-guide .guide-hero-grid{grid-template-columns:1fr;gap:34px}.home-guide h1{font-size:clamp(31px,8.2vw,42px);line-height:1.45;max-width:12em;letter-spacing:-.035em}.home-guide .guide-eyebrow{font-size:12px;margin-bottom:18px}.home-guide .guide-hero-description{font-size:16px;line-height:1.85;margin-top:20px}.home-guide .guide-actions{margin-top:24px}.home-guide .guide-free-note{font-size:12px;margin-top:15px}.home-guide .studio-preview{border-width:6px;border-radius:24px;max-width:500px;width:100%;margin-inline:auto}.home-guide .studio-preview-body{min-height:300px}.home-guide .studio-word{padding:23px;min-height:300px;max-width:94%}.home-guide .studio-label{margin-bottom:25px}.home-guide .studio-art{width:65%;opacity:1}.home-guide .studio-word-title h2{font-size:36px}.home-guide #wordSentence{max-width:220px;font-size:14px}.home-guide .studio-preview-footer{padding:12px 10px 9px}.home-guide .studio-preview-footer a{font-size:12px;gap:6px;min-height:66px}.home-guide .guide-section{padding:38px 0}.home-guide .guide-section h2{font-size:25px}.home-guide .guide-section-heading{display:block;margin-bottom:22px}.home-guide .guide-section-heading>.guide-text-link{margin-top:18px}.home-guide .guide-section-intro{font-size:15px}.home-guide .role{padding:21px 18px}.home-guide .role h3{font-size:19px}.home-guide .role p{font-size:14px}.home-guide .role p br{display:none}.home-guide .guide-shots{gap:14px}.home-guide .guide-institution{padding:25px 22px;margin-bottom:34px;border-radius:14px}.home-guide .guide-institution h2{font-size:25px}.home-guide .guide-institution h2 span{display:block}.home-guide .guide-institution p{font-size:15px}.home-guide .guide-institution .guide-actions{flex-direction:column;align-items:stretch}.home-guide .guide-institution .guide-actions>a{width:100%}.home-guide .guide-faq-layout{display:block}.home-guide .guide-faq{margin-top:24px}.home-guide .guide-footer-top{display:block}.home-guide .guide-footer-links{justify-content:flex-start;margin-top:18px}.home-guide .guide-workspace-links{display:block}.home-guide .guide-workspace-links a{display:flex;width:fit-content}.home-guide .guide-footer{font-size:12px}}
@media(max-width:380px){.home-guide .guide-roles{grid-template-columns:1fr}.home-guide .studio-word{padding:20px}.home-guide .studio-word-title{gap:8px}.home-guide .studio-word-title h2{font-size:33px}.home-guide .studio-art{width:58%;opacity:.75}.home-guide .studio-word-title .studio-audio{min-width:40px;padding:8px}}
@media(prefers-reduced-motion:reduce){.home-guide *{scroll-behavior:auto!important;transition:none!important}}

/* Keep example text on the white side of the artwork in narrow previews. */
@media(max-width:740px){.home-guide .studio-art{width:56%}.home-guide #wordSentence{max-width:155px;font-size:14px;line-height:1.85}}

/* ===== 亲手试一遍：学新词 / 复习旧词 / 默写检测 =====
 * 目的只有一个：让访客在 10 秒内亲手体会"先回想再看释义""按遗忘规律排复习""错在第几个字母"，
 * 而不是读三段功能说明。所以面板必须自己就是可操作控件，不做播放式假动画。
 * 沿用首页既有的白底 + 靛蓝（--guide-blue）体系，不引入新色系。 */
.home-guide .studio-audio-inline{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;padding:5px;vertical-align:-7px;background:#f0efff}
.home-guide .guide-demo{padding:52px 0 58px;border-top:1px solid #edf0f5;background:#fbfbfe}
.home-guide .demo-shell{margin-top:26px;border:1px solid #e2e8f0;border-radius:16px;background:#fff;padding:22px}
.home-guide .demo-tabs{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:16px;border-bottom:1px solid #edf0f5}
.home-guide .demo-tab{min-height:44px;padding:10px 18px;border:1px solid #e2e8f0;border-radius:10px;background:#fff;color:#516079;font-size:15px;font-weight:600;cursor:pointer}
.home-guide .demo-tab:hover{background:#f7f6ff;color:#4338ca;border-color:#dcd8fb}
.home-guide .demo-tab.is-active{background:#4f46e5;border-color:#4f46e5;color:#fff}
.home-guide .demo-live{margin:0;min-height:0;font-size:13px;color:#64748b}
.home-guide .demo-live:not(:empty){margin-top:12px}
.home-guide .demo-panel{padding-top:20px}
.home-guide .demo-panel-lead{font-size:15px;line-height:1.85;color:#516079;margin:0 0 16px;max-width:660px}
.home-guide .demo-btn{min-height:44px;padding:10px 20px;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;border:1px solid #e2e8f0;background:#fff;color:#516079}
.home-guide .demo-btn:hover{background:#f7f6ff;color:#4338ca;border-color:#dcd8fb}
.home-guide .demo-btn-primary{background:#4f46e5;border-color:#4f46e5;color:#fff}
.home-guide .demo-btn-primary:hover{background:#4338ca;border-color:#4338ca;color:#fff}
.home-guide .demo-btn-good{background:#0f9d63;border-color:#0f9d63;color:#fff}
.home-guide .demo-btn-good:hover{background:#0b7d4f;border-color:#0b7d4f;color:#fff}
.home-guide .demo-btn-again{background:#fdf0ef;border-color:#f2cdc9;color:#b4342a}
.home-guide .demo-btn-again:hover{background:#fbe1de;border-color:#e8b3ad;color:#8f2a22}

/* 学新词：正面只给词、音标与发音；释义在翻面后才出现（与端内主动回忆同一条纪律） */
.home-guide .demo-learn-card{position:relative;display:grid;min-height:220px;padding:24px;border:1px solid #e2e8f0;border-radius:14px;background:#fdfdff;cursor:pointer}
.home-guide .demo-learn-eyebrow{margin:0;font-size:12px;font-weight:600;letter-spacing:.08em;color:#64748b}
.home-guide .demo-learn-head{display:flex;align-items:center;gap:14px;margin-top:18px}
.home-guide .demo-learn-head strong{font-size:38px;font-weight:750;letter-spacing:-1.2px;color:#17243b;line-height:1.2}
.home-guide .demo-speak{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:10px;border:0;border-radius:50%;background:#f0efff;cursor:pointer}
.home-guide .demo-speak:hover{background:#e5e2ff}
.home-guide .demo-learn-phonetic{margin:6px 0 0;font-size:15px;color:#64748b}
.home-guide .demo-learn-back{display:none;margin-top:16px}
.home-guide .demo-learn-card.is-revealed .demo-learn-back{display:block}
.home-guide .demo-learn-card.is-revealed .demo-learn-eyebrow{display:none}
.home-guide .demo-learn-pos{margin:0;font-size:13px;font-weight:600;color:#4f46e5}
.home-guide .demo-learn-meaning{margin:4px 0 0;font-size:20px;font-weight:650;color:#17243b}
.home-guide .demo-learn-sentence{margin:12px 0 0;font-size:15px;line-height:1.7;color:#17243b}
.home-guide .demo-learn-sentence-cn{margin:4px 0 0;font-size:13px;color:#64748b}
.home-guide .demo-learn-col{margin:10px 0 0;font-size:13px;color:#516079;padding:6px 10px;border-radius:8px;background:#f4f4f9;display:inline-block}
.home-guide .demo-learn-hint{margin:16px 0 0;font-size:13px;color:#94a3b8}
.home-guide .demo-learn-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.home-guide .demo-learn-judge{display:flex;gap:10px;flex-wrap:wrap}
.home-guide .demo-learn-judge .demo-btn{flex:1;min-width:120px;min-height:52px;font-size:16px}

/* 复习旧词：三列可点，天数由 FSRS 现算 */
.home-guide .demo-review-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.home-guide .demo-review-table{width:100%;min-width:520px;border-collapse:collapse;font-size:15px}
.home-guide .demo-review-table caption{text-align:left;font-size:13px;color:#64748b;padding-bottom:10px}
.home-guide .demo-review-table thead th{text-align:left;font-size:13px;font-weight:600;color:#64748b;padding:10px 12px;border-bottom:1px solid #e2e8f0}
.home-guide .demo-review-table tbody th{text-align:left;padding:14px 12px;border-bottom:1px solid #f1f5f9;font-weight:400}
.home-guide .demo-review-table tbody td{padding:8px;border-bottom:1px solid #f1f5f9}
.home-guide .demo-review-word{display:block;font-size:17px;font-weight:700;color:#17243b}
.home-guide .demo-review-pos{display:block;font-size:12px;color:#64748b;margin-top:2px}
.home-guide .demo-review-recall{display:block;font-size:12px;color:#4f46e5;margin-top:4px}
.home-guide .demo-review-choice{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;min-height:52px;padding:8px;border:1px solid #e2e8f0;border-radius:10px;background:#fff;cursor:pointer}
.home-guide .demo-review-choice:hover{background:#f7f6ff;border-color:#dcd8fb}
.home-guide .demo-review-days{font-size:16px;font-weight:700;color:#4338ca}
.home-guide .demo-review-how{font-size:12px;color:#64748b}

/* 默写检测：逐字母对错标记 */
.home-guide .demo-dictation-card{padding:22px;border:1px solid #e2e8f0;border-radius:14px;background:#fdfdff}
.home-guide .demo-dictation-prompt{margin:0 0 14px;font-size:18px;font-weight:650;color:#17243b}
.home-guide .demo-dictation-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.home-guide .demo-dictation-input{flex:1 1 240px;min-width:0;min-height:48px;padding:10px 14px;border:1px solid #cbd5e1;border-radius:10px;font-size:17px;color:#17243b;background:#fff}
.home-guide .demo-dictation-input.is-right{border-color:#0f9d63;background:#f1fbf6}
.home-guide .demo-dictation-input.is-wrong{border-color:#d64545;background:#fdf3f2}
.home-guide .demo-dictation-feedback{margin:14px 0 0;font-size:15px;line-height:1.8;color:#516079;min-height:0}
.home-guide .demo-dictation-feedback.is-right{color:#0b7d4f}
.home-guide .demo-dictation-feedback.is-wrong{color:#8f2a22}
.home-guide .demo-letters{display:inline-flex;flex-wrap:wrap;gap:3px;margin-left:6px;vertical-align:middle}
.home-guide .demo-letter{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:26px;padding:0 3px;border-radius:5px;font-style:normal;font-weight:700;font-size:15px}
.home-guide .demo-letter.is-ok{background:#dcf5e8;color:#0b7d4f}
.home-guide .demo-letter.is-bad{background:#fbe1de;color:#8f2a22}
.home-guide .demo-letter.is-missing{background:#eef1f5;color:#64748b}
.home-guide .demo-letter-legend{display:block;margin-top:8px;font-size:12px;color:#64748b}
.home-guide .demo-result{margin:14px 0 0;padding:12px 14px;border-radius:10px;background:#f4f4f9;font-size:14px;line-height:1.8;color:#17243b}
.home-guide .demo-note{margin:16px 0 0;font-size:13px;line-height:1.8;color:#64748b}

@media(max-width:740px){
  .home-guide .guide-demo{padding:38px 0 44px}
  .home-guide .demo-shell{padding:16px;border-radius:14px}
  .home-guide .demo-tab{flex:1 1 auto;padding:10px 12px;font-size:14px}
  .home-guide .demo-learn-card{padding:18px;min-height:190px}
  .home-guide .demo-learn-head strong{font-size:32px}
  .home-guide .demo-learn-judge .demo-btn{min-width:100px}
  .home-guide .demo-dictation-card{padding:16px}
  /* 触屏输入框字号必须 ≥16px，否则 iOS 聚焦时会自动放大整页 */
  .home-guide .demo-dictation-input{font-size:16px}
  /* 复习表在窄屏必须**放得下三列**，不能靠横向滚动把「太简单」推出去。
   * 这张表的用途就是让访客挨个点三格、看着同一个词排出三个不同天数；
   * 第三列一旦要滑动才看得见，等于把演示的三分之一藏起来。
   * 做法：把 min-width 从 520 降到 0、收紧内边距、天数与按钮上下叠、长文案收小字。 */
  .home-guide .demo-review-scroll{overflow-x:visible}
  .home-guide .demo-review-table{min-width:0;font-size:14px}
  .home-guide .demo-review-table caption{font-size:12px;padding-bottom:8px}
  .home-guide .demo-review-table thead th{padding:8px 6px;font-size:12px}
  .home-guide .demo-review-table tbody th{padding:10px 6px}
  .home-guide .demo-review-table tbody td{padding:5px 4px}
  .home-guide .demo-review-word{font-size:16px}
  .home-guide .demo-review-pos,.home-guide .demo-review-recall{font-size:11px}
  .home-guide .demo-review-choice{padding:8px 4px;min-width:0;width:100%}
  .home-guide .demo-review-days{font-size:14px}
  .home-guide .demo-review-how{font-size:11px}
}