/* // 识字快车 3500 全站样式 v17 —— 拼音梅花按钮版
// // v17 变化：拼音表按钮升级为五瓣梅花形（花瓣当底/中心白圆托字）——
// // 豆青灰瓣=暂无录音、浅绿瓣=有真人录音、悬停整朵变浅粉；
// // 真人拼音映射补齐 63/63（整体认读本音=一声录音、缺的 7 个 pm 包本就有）。
// // v16 变化：整体认读音节修复（16 个补映射）+ 梅花飘落 + 作文本双线框。
// // v14 变化：主按钮/答题键从饱和实色块（朱红/绿实心+白字）改为同色系浅底深字，
// // 积木底边换成本色系深一档——大块饱和色压在护眼浅底上像"凭空高亮一块"，
// // 小孩视角尤其刺眼；答题三键改同重量（实色/白底不对等会让"不认识"像被禁用）。
// // v13 变化：回退 v12 把次要按钮改近纯白的失误——白底药丸压在豆青面板上
// // 像屏幕凭空高亮一块，主次颠倒；次要按钮回归豆青底，积木手感保留。
// // v12 变化：按钮体系重做，去掉"AI 脸"的扁平同圆角块：
// // 每颗动作按钮带一条更深的实色底边（积木厚度），按下整颗沉下去、松手弹回；
// // 圆角两档：大按钮 12px / 小字牌 10px；答题三键改实色（绿实心/白底红字/朱红）；
// // 田字格字牌是"纸"，保持平面不加底边。 */
/* // v5 —— 布局统一版
// // 布局逻辑（一套词汇贯穿 5 页，v4 时代"主页新设计+子页旧卡片堆"两套并存的问题就此终结）：
// // 外壳 = 侧栏(品牌/导航/提示) + 画布 + 页头带(页题/进度/页级操作) + 页脚，5 页同构
// // 主页 = editorial-greeting 问候列（已验收，保留）
// // 学认字 = 主从工作台：左栏主题列表（选中高亮），右侧学习舞台常驻
// // 识字卡 = 中央舞台卡（提示句→田字格翻面→按钮行）+ 右栏(玩法/朗读/战绩合并)
// // 拼音表 = 一张面板内三分区（取消三张同构卡竖排）
// // 进度 = 仪表盘：三大数字 + 总进度条 + 各课明细双列
// // 设计方向：Editorial greeting（技能库 draw.mjs 出稿，seed 1801231641，--keep palette,type）
// // 面板一层底色承载结构，全站禁 1px 细线框、禁阴影、禁渐变；朱红预算 <2%。
// // 无障碍底线（不变）：大字号、高对比、明显焦点框、读屏友好 */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
/* // 色板：护眼向（小朋友长时间看不刺眼）
// // 地面柔和豆绿，面板一律暖米白/豆青两档，大面积不出现纯白 */
--ground: #edf0e2; /* // 页面底：豆青护眼绿 */
--surface: #f9faf2; /* // 面板：带一丝豆青的暖白 */
--raised: #e7ead9; /* // 深一档面板（悬停/侧内层） */
--line: #d9dcc4; /* // 仅顶栏/侧栏分界用，内容区禁细线 */
--ink: #231815; /* // 正文墨色 */
--muted: #6b5a54; /* // 次要说明（仅小字） */
--accent: #b7342a; /* // 朱红：主按钮、进度条、田字格线（小面积专用） */
--accent-deep: #93261e; /* // 主按钮按压 */
--accent-soft: #f7e3df; /* // 主色浅底：悬停 */
--accent-track: #f0d4ce; /* // 进度条轨道 */
--accent-ink: #701d15; /* // 浅底上的深红字 */
--grid-red: #e2aca4; /* // 田字格虚线：朱红加水，写字课的"红格" */
--positive: #247b50; /* // "已认识"专用绿 */
--positive-soft: #e8f4ec;
--negative: #b3261e;
--focus: #b45309; /* // 焦点框：琥珀色，和主红区分 */
--pill: #e3e6d3; /* // 导航激活药丸：中性豆青灰（激活项不花主色预算） */
--radius-card: 14px;
--radius-btn: 12px; /* // 大按钮圆角 */
--radius-chip: 10px; /* // 小字牌圆角 */
--radius-control: 9px; /* // 非按钮的小容器（词典条等） */
--edge: #cfd3b8; /* // 默认按钮的积木底边：比 raised 深两档 */
--gap: 26px;
--sidebar-w: 236px;
/* // 字号五档封顶：问候 46 / 页题 26 / 区题 19 / 大数字 40 / 正文 16 / 小字 13.5 */
}
/* // 根元素先铺底色：页面切换瞬间浏览器只重画 html，底色在这就不会露白屏 */
html { background: var(--ground); }
body {
font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
background: var(--ground); color: var(--ink);
font-size: 16px; line-height: 1.6;
}
/* // ========== 应用外壳（常规网站布局）：顶部导航条 + 居中内容容器 + 页脚 ==========
// // 最常见、最不会用错的骨架：品牌在左、横排导航在右（吸顶），
// // 往下整块居中画布，页脚收底。孩子和家长对这种布局零学习成本 */
.topbar {
position: sticky; top: 0; z-index: 10;
background: var(--ground);
border-bottom: 1px solid var(--line);
}
.topbar-in {
max-width: 1080px; margin: 0 auto; padding: 10px 24px;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brandmark {
width: 38px; height: 38px; flex-shrink: 0;
background: var(--accent); color: #fff;
font-family: "KaiTi", "STKaiti", "Microsoft YaHei", serif;
font-size: 24px; line-height: 38px; text-align: center;
border-radius: 9px;
}
.brandname { font-size: 17px; font-weight: 650; line-height: 1.25; }
.brandname small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
/* // 横排导航：田字格字牌 + 页名，保持常规导航的单行形态。
// // 当前页 = 中性药丸底 + 字牌点亮朱红格线——朱红预算仍只花在这一格虚线上 */
.navlinks { display: flex; align-items: center; gap: 2px; }
.navlinks a {
display: flex; align-items: center; gap: 8px;
padding: 6px 12px 6px 7px; border-radius: var(--radius-control);
text-decoration: none; color: var(--ink); font-size: 15.5px;
transition: background .15s;
}
.navlinks a:hover { background: var(--raised); }
.navlinks a[aria-current="page"] { background: var(--pill); font-weight: 600; }
.navtile {
width: 26px; height: 26px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-family: "KaiTi", "STKaiti", "Microsoft YaHei", serif;
font-size: 15px; line-height: 1; color: var(--muted);
background: var(--surface) center/100% 100% no-repeat;
background-image: url('data:image/svg+xml;utf8,');
border-radius: 6px;
box-shadow: none;
}
.navlinks a[aria-current="page"] .navtile {
color: var(--ink);
background-image: url('data:image/svg+xml;utf8,');
}
.navtext { line-height: 1.2; }
.navtext small { display: none; } /* // 顶部导航保持单行；功能小注在各页页头里讲 */
/* // 画布：居中内容容器——主页 = 居中列；子页 = 左对齐工作流，同一对边距 */
.canvas { max-width: 1080px; margin: 0 auto; padding: 32px 24px 48px; }
.canvas > * { max-width: 100%; }
/* // 页头带（子页统一）：页题 + 进度 + 页级操作位（重置按钮这类收在这里，不再悬空） */
.pagehead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.pagehead h1 { font-size: 26px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; }
.pagehead .sub { flex-basis: 100%; font-size: 16px; color: var(--ink); }
.progress-mini { font-size: 14.5px; color: var(--muted); }
.progress-mini strong { color: var(--ink); font-size: 26px; font-weight: 400; font-variant-numeric: tabular-nums; }
.headbar { flex-basis: 100%; height: 10px; margin: 6px 0 0; }
.pagehead-actions { margin-left: auto; }
.pagehead-actions button { font-size: 14.5px; padding: 7px 13px 8px; box-shadow: 0 2px 0 var(--edge); }
.pagehead-actions button:active { box-shadow: 0 0 0 var(--edge); }
/* // ========== 主页：问候列 ========== */
.greet { text-align: center; margin: 8px 0 30px; }
.greet h1 {
font-size: 46px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
}
.greet .fact { font-size: 17px; color: var(--ink); margin-top: 10px; }
.greet .fact strong { font-weight: 400; font-size: 22px; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
/* // 品牌字牌：四个字进田字格，居中一排；红格虚线是朱红加水 */
.herotiles {
display: flex; gap: 26px; justify-content: center; flex-wrap: wrap;
margin: 0 0 34px;
}
.herowrap { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.herowrap small { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.herotile {
width: 118px; height: 118px; padding: 0;
display: flex; align-items: center; justify-content: center;
font-family: "KaiTi", "STKaiti", "Microsoft YaHei", serif;
font-size: 66px; line-height: 1; color: var(--ink);
/* // 字牌是"纸"：不带按钮的积木底边，按下走缩放 */
box-shadow: none;
background: var(--surface) center/100% 100% no-repeat;
background-image: url('data:image/svg+xml;utf8,');
transition: background-color .15s, transform .15s;
}
.herotile:hover { background-color: var(--accent-soft); transform: translateY(-3px); }
.herotile:active { transform: scale(.95); }
/* // 9/3 行：进度（全页唯一的白卡内嵌层）+ 用法 */
.homegrid {
display: grid; grid-template-columns: 3fr 2fr; gap: var(--gap);
margin-bottom: 34px; align-items: start; /* // 短面板保持自己的高度，不硬撑出空白带 */
}
.panel-progress {
background: var(--surface); border-radius: var(--radius-card);
padding: 24px 26px;
}
.panel-progress h2, .panel-how h2 { font-size: 17px; font-weight: 650; margin-bottom: 10px; color: var(--muted); }
.bigfigure { font-size: 56px; font-weight: 400; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bigfigure small { font-size: 24px; color: var(--muted); }
.panel-progress .bar { max-width: 420px; }
.panel-progress .statline { margin-top: 10px; }
.cta-row { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.panel-how {
background: var(--raised); border-radius: var(--radius-card);
padding: 24px 26px;
}
.howlist { margin-left: 22px; }
.howlist li { margin-bottom: 9px; }
.panel-how .statline { margin-top: 6px; }
/* // 功能入口：整行色调面板（不是卡片阵列），代表字进田字格。
// // 相邻行靠底色一档深浅区分，不用细线不用阴影 */
.featlist { display: flex; flex-direction: column; gap: 10px; margin-bottom: 34px; }
.featrow {
display: flex; align-items: center; gap: 20px;
background: var(--surface); border-radius: var(--radius-card);
padding: 14px 20px; text-decoration: none; color: var(--ink);
transition: background .15s, transform .1s;
}
.featrow:hover { background: var(--accent-soft); }
.featrow:active { transform: scale(.995); }
.featrow .sample {
width: 62px; height: 62px; flex-shrink: 0;
font-family: "KaiTi", "STKaiti", "Microsoft YaHei", serif;
font-size: 36px; line-height: 1; text-align: center; color: var(--ink);
display: flex; align-items: center; justify-content: center;
background: var(--surface) center/100% 100% no-repeat;
background-image: url('data:image/svg+xml;utf8,');
background-color: var(--raised);
}
.featrow:hover .sample { background-color: var(--surface); }
.feattext { flex: 1; min-width: 0; }
.feattext b { display: block; font-size: 19px; font-weight: 650; line-height: 1.3; }
.feattext small { display: block; font-size: 14.5px; color: var(--muted); margin-top: 2px; }
.featgo { font-size: 15px; color: var(--muted); flex-shrink: 0; }
.featrow.is-disabled { opacity: .55; }
.featrow.is-disabled:hover { background: var(--surface); }
/* // ========== 通用面板与按钮 ========== */
/* // 面板：一层底色承载结构，不用边框不用阴影（分隔靠色调一档） */
.card {
background: var(--surface); border-radius: var(--radius-card);
padding: 22px 24px; margin-bottom: var(--gap);
}
.card h2 { font-size: 19px; font-weight: 650; margin-bottom: 12px; }
.card p { max-width: 62ch; }
/* // 按钮体系：文具积木手感（对照"AI 脸"登记表改掉千篇一律的扁平圆角块）
// // 规则一：每颗按钮带一条更深的实色底边，像一块积木/橡皮有厚度；
// // 规则二：按下时整颗沉下去（位移 3px + 底边收薄），松手弹回——
// // 小朋友能明确感到"按到了"，这不是网页默认的悬停变色能给的反馈；
// // 规则三：圆角只有两档——大按钮 12px、小字牌 10px，不再全场一个 9px。
// // 规则四：底色讲主次——次要按钮用深一档豆青"融"进面板，白底只给主动作；
// // （v12 曾把次要按钮改成近纯白，结果朗读提示句/重置进度比主按钮还抢眼，
// // 一眼看去像屏幕上凭空高亮了一块，v13 改回）
// // 注意：只有"动作按钮"有积木底边；田字格字牌是"纸"，保持平面 */
button, .btn {
font-family: inherit; font-size: 16.5px; font-weight: 600; line-height: 1.25;
padding: 11px 20px 12px;
border: none; cursor: pointer;
border-radius: var(--radius-btn);
background: var(--raised); color: var(--ink);
box-shadow: 0 3px 0 var(--edge);
transition: background .15s, transform .06s ease, box-shadow .06s ease;
}
button:hover, .btn:hover { background: #dde1cd; }
button:active, .btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--edge); }
/* // 黑金闯关按钮（v15）：素材 bg1.png（黑底白菱形·平常）/ bg2.png（黑底金菱形·悬停），
// // 取自用户自己的天下3风格前端练习（C:\Intel_1\users_html\images），交互全套沿用他的原法：
// // 悬停/键盘聚焦换底图 + 文字变金 #fcc63d .3s + :focus-visible 金色焦点框
// // （bg2 菱形之间的中间地带是透明的，露出按钮自己的黑底 #17181c）。
// // 悬停上浮的弹性缓动借鉴 uiverse.io 经典 3D 按钮（adamgiebl「pushable」）
// // 的 cubic-bezier(.3,.7,.4,1.5)。
// // 只用在"往前闯"的动作上：主页继续学认字、测试页下一个字——闯关感，不泛滥 */
.btn-game, button.btn-game {
font-family: "KaiTi", "STKaiti", "Microsoft YaHei", serif;
font-size: 19px; font-weight: 700; letter-spacing: 3px;
padding: 0; height: 48px; min-width: 200px;
border: none; border-radius: 4px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
background: #17181c url("img/bg1.png") center/100% 100% no-repeat;
color: #fff;
transition: color .3s, background-image .3s, transform .25s cubic-bezier(.3, .7, .4, 1.5);
}
.btn-game:hover, button.btn-game:hover {
background-image: url("img/bg2.png");
color: #fcc63d;
outline: 2px solid #fcc63d; outline-offset: -4px;
transform: translateY(-2px);
}
.btn-game:active, button.btn-game:active { transform: translateY(2px); transition: transform .05s; }
.btn-game:focus-visible, button.btn-game:focus-visible {
outline: 2px solid #fcc63d; outline-offset: -4px;
}
/* // 答题行里的闯关钮：底图自带厚度感，不再叠加积木底边 */
.btnrow .btn-game, .btnrow button.btn-game { box-shadow: none; min-width: 0; }
/* // 次要按钮：和底色同档的豆青底，靠积木底边和按压感表明"可以按"，
// // 不与主按钮抢视线（v12 的近纯白高亮已回退） */
.btn-ghost, button.btn-ghost { background: var(--raised); color: var(--ink); }
.btn-ghost:hover, button.btn-ghost:hover { background: #dde1cd; }
/* // ========== 学认字：主题条 + 全宽学习舞台 ==========
// // 21 个主题排成可换行的主题条（带各课进度），下面舞台常驻。
// // 主题条而非左右栏：孩子从上往下读，先挑主题再看字，无栏高差无空白带 */
.workbench { display: flex; flex-direction: column; }
.wb-side {
background: var(--raised); border-radius: var(--radius-card);
padding: 14px 16px 12px;
}
.wb-side h2 { font-size: 15.5px; font-weight: 650; color: var(--muted); margin: 0 2px 10px; }
#lessonList { display: flex; flex-wrap: wrap; gap: 9px; }
.lesson-item {
display: inline-flex; align-items: baseline; gap: 7px;
text-align: left; font-size: 15.5px; font-weight: 500; padding: 7px 12px 8px;
background: var(--surface); color: var(--ink);
border: none; border-radius: var(--radius-chip);
box-shadow: 0 2px 0 var(--edge);
cursor: pointer; transition: background .15s, transform .06s ease, box-shadow .06s ease;
}
.lesson-item:hover { background: var(--accent-soft); }
.lesson-item:active { transform: translateY(2px); box-shadow: 0 0 0 var(--edge); }
.lesson-item.active { background: var(--pill); font-weight: 650; }
.lesson-item small { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.lesson-item.active small { color: var(--ink); }
.wb-stage {
background: var(--surface); border-radius: var(--radius-card);
margin-top: var(--gap); padding: 24px 26px 30px;
}
.wb-stage > h2 { font-size: 22px; font-weight: 650; margin-bottom: 14px; }
.phrase { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
/* // 例句区双列网格：宽屏两列例句并排铺满舞台，窄屏自动落回单列 */
#phraseArea { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 6px 26px; align-items: start; }
#phraseArea .phrase { margin: 4px 0; }
.charbtn {
font-family: "KaiTi", "STKaiti", "Microsoft YaHei", serif;
font-size: 36px; width: 72px; height: 72px; line-height: 1;
border: none; border-radius: var(--radius-control); cursor: pointer;
color: var(--ink); background: var(--surface) center/100% 100% no-repeat;
/* // 田字格是"纸"不是积木：不带底边阴影，按下走缩放 */
box-shadow: none;
/* // 田字格：写字课的方格纸，红格虚线十字 + 外框 */
background-image: url('data:image/svg+xml;utf8,');
transition: background-color .15s, transform .1s;
}
.charbtn:hover { background-color: var(--accent-soft); }
.charbtn:active { transform: scale(.94); }
.charbtn.known {
background-color: var(--positive-soft);
background-image: url('data:image/svg+xml;utf8,');
color: var(--positive);
}
.read-phrase { font-size: 15px; padding: 7px 14px 8px; background: var(--raised); border-radius: var(--radius-chip); }
/* // ========== 识字卡：中央舞台 + 右栏 ==========
// // 舞台卡 = 提示句 → 田字格翻面 → 按钮行，一条完整的答题动线；
// // 翻面前田字格显示"？"占位（答题动线不断档）；右栏和舞台等高对齐 */
.quizmain { display: grid; grid-template-columns: 1fr 300px; gap: var(--gap); align-items: stretch; }
.quizstage {
background: var(--surface); border-radius: var(--radius-card);
padding: 24px 26px 28px;
}
.quizstage .statline { margin: 0 0 6px; }
.quizside {
background: var(--raised); border-radius: var(--radius-card); padding: 18px 20px;
display: flex; flex-direction: column;
justify-content: space-between; /* // 内容块均匀分布填满与舞台等高的栏，不留整段空白 */
gap: 2px;
}
.quizside h2 { font-size: 17px; font-weight: 650; margin: 12px 0 8px; }
.quizside h2:first-child { margin-top: 0; }
.quizside .statline { margin-top: 0; }
.quizside #totalLine { font-size: 15.5px; margin-bottom: 4px; }
.steps { margin: 0 0 12px 20px; }
.steps li { margin-bottom: 8px; font-size: 15.5px; }
.tianbox {
width: 340px; height: 340px; margin: 10px auto;
display: flex; align-items: center; justify-content: center;
background: var(--surface) center/100% 100% no-repeat;
background-image: url('data:image/svg+xml;utf8,');
}
.bigchar {
font-family: "KaiTi", "STKaiti", "Microsoft YaHei", serif;
font-size: 200px; line-height: 1; text-align: center; color: var(--ink);
}
.pinyin { font-size: 34px; text-align: center; color: var(--accent-ink); font-weight: 600; }
.pinyin:empty { display: none; } /* // 翻面前拼音行为空，整行收起，不留空带 */
.hint {
font-size: 34px; text-align: center; letter-spacing: 6px; margin: 10px 0 14px;
}
.dictinfo { background: var(--raised); border-radius: var(--radius-control); padding: 12px 16px; margin-top: 12px; font-size: 16.5px; }
.dictinfo .ci { color: var(--accent-ink); }
.statline { font-size: 14.5px; color: var(--muted); margin-top: 8px; font-variant-numeric: tabular-nums; }
.btnrow { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.btnrow button { flex: 1; min-width: 130px; font-size: 19px; padding: 13px; box-shadow: 0 4px 0 var(--edge); }
.btnrow button:active { box-shadow: 0 0 0 var(--edge); }
/* // 答题三键（v15）：认识/不认识 = 同重量浅底积木，靠字色和浅底区分；
// // 「下一个字」升级为黑金闯关钮（.btn-game，见按钮体系一节） */
.btn-ok { background: var(--positive-soft); color: var(--positive); font-weight: 700; box-shadow: 0 4px 0 #c2ddcb; }
.btn-ok:hover { background: #dcefe4; }
.btn-ok:active { box-shadow: 0 0 0 #c2ddcb; }
.btn-no { background: var(--surface); color: var(--negative); font-weight: 700; }
.btn-no:hover { background: var(--accent-soft); }
/* // ========== 拼音表：一张面板内三分区 ==========
// // 旧版三张同构卡竖排是典型模板脸；合并后分区只靠标题与间距分层 */
.pyflow { padding: 24px 26px 18px; }
.pysec { padding: 14px 0 20px; }
.pysec + .pysec { border-top: none; margin-top: 4px; } /* // 分区靠间距，不画线 */
.pysec h2 { font-size: 19px; font-weight: 650; margin-bottom: 12px; }
.pysec h2 small { font-size: 14.5px; font-weight: 400; color: var(--muted); margin-left: 8px; }
.pygrid { display: flex; flex-wrap: wrap; gap: 12px; }
/* // 拼音按钮 = 五瓣梅花（v17）：花瓣当按钮底、中心留白托拼音字——
// // 替换掉原来的"方块+底边"，和全站田字格/梅花母题连贯。
// // 花瓣色分两档：豆青灰=暂无录音，浅绿=有真人录音（绿=真人录音的语义不变）；
// // 悬停整朵花变浅粉（和站内悬停色一致），按下缩放弹一下（pulse 配合） */
.pybtn {
font-size: 19px; font-weight: 650; width: 74px; height: 74px;
border: none; border-radius: 50%; cursor: pointer; line-height: 1.15;
color: var(--ink);
background: var(--surface) center/100% 100% no-repeat;
background-image: url("data:image/svg+xml;utf8,");
box-shadow: none;
transition: background-image .15s, color .15s, transform .1s;
}
.pybtn.has-audio {
color: var(--positive);
background-image: url("data:image/svg+xml;utf8,");
}
.pybtn:hover {
background-image: url("data:image/svg+xml;utf8,");
}
.pybtn:active { transform: scale(.93); }
/* // ========== 进度：仪表盘构图 ==========
// // 三大数字横排（已认/正确率/最高连对）→ 总进度条 → 各课明细双列。
// // 数字一律常规字重 + 表格数字（版式稿规则，不靠加粗装气势） */
.statband {
display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
margin-bottom: var(--gap);
}
.statblock {
background: var(--surface); border-radius: var(--radius-card);
padding: 20px 22px 16px;
}
.statnum { font-size: 44px; font-weight: 400; line-height: 1.15; font-variant-numeric: tabular-nums; }
.statnum small { font-size: 20px; color: var(--muted); }
.statblock .statlabel { font-size: 14.5px; color: var(--muted); margin-top: 2px; }
.duogrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-bottom: 0; align-items: start; }
.duogrid .card { margin-bottom: var(--gap); }
#statLessons { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.bar { background: var(--accent-track); border-radius: 6px; height: 20px; overflow: hidden; margin: 8px 0 14px; }
.bar > div { background: var(--accent); height: 100%; transition: width .4s; }
/* // 正确率条用绿色，和"已认字数"的红条区分开 */
.bar-green { background: var(--positive-soft); }
.bar-green > div { background: var(--positive); }
#statLessons small { font-size: 14px; color: var(--ink); }
/* // ========== 页面四周的"作业本框"（纯代码画，无图片）==========
// // v16 作文本双线：作文纸的边就是"双红线"，外线 2px + 内线 1px（间隔 2px），
// // 四角五瓣梅花不变（花瓣朱红加水、花蕊金黄与闯关钮悬停金同源）。
// // pointer-events:none——它只是"镜框"，不挡任何点击 */
.pageframe {
position: fixed; inset: 8px; z-index: 60; pointer-events: none;
border: 2px solid #ecd0ca; border-radius: 16px;
}
.pageframe::before {
content: ""; position: absolute; inset: 4px;
border: 1px solid #ecd0ca; border-radius: 12px;
}
.pageframe i {
position: absolute; width: 32px; height: 32px;
background: url("data:image/svg+xml;utf8,") center/100% 100% no-repeat;
}
.pageframe i:nth-child(1) { top: -7px; left: -7px; }
.pageframe i:nth-child(2) { top: -7px; right: -7px; }
.pageframe i:nth-child(3) { bottom: -7px; left: -7px; }
.pageframe i:nth-child(4) { bottom: -7px; right: -7px; }
@media (max-width: 900px) {
.pageframe { inset: 5px; border-radius: 12px; }
.pageframe::before { inset: 3px; border-radius: 9px; }
.pageframe i { width: 26px; height: 26px; }
}
/* // ========== 梅花飘落（v16，纯 CSS 零 JS） ==========
// // 7 片梅花瓣从上往下慢慢飘：i 层管"下落 + 首尾淡入淡出"（translate 属性 +
// // opacity），::before 层管"左右摇摆 + 自转"（transform 摇摆、rotate 属性自转，
// // 两个独立属性各自动画互不打架）。负延迟让页面一打开花瓣就已在半空。
// // 只动 transform/translate/rotate/opacity，7 个元素开销可忽略；
// // 减动效设置下整层直接不显示 */
.petalfall {
position: fixed; inset: 0; z-index: 59; pointer-events: none; overflow: hidden;
}
.petalfall i {
position: absolute; top: 0; width: 16px; height: 16px;
animation: petalfall 17s linear infinite;
}
.petalfall i::before {
content: ""; position: absolute; inset: 0;
background: url("data:image/svg+xml;utf8,") center/100% 100% no-repeat;
opacity: .8;
animation: petalsway 4.8s ease-in-out infinite alternate, petalspin 7s linear infinite;
}
@keyframes petalfall {
0% { translate: 0 -6vh; opacity: 0; }
6% { opacity: 1; }
88% { opacity: 1; }
100% { translate: 0 112vh; opacity: 0; }
}
@keyframes petalsway {
from { transform: translateX(-2.2vw) rotate(-28deg); }
to { transform: translateX(2.2vw) rotate(24deg); }
}
@keyframes petalspin { to { rotate: 1turn; } }
/* // 七片花瓣：位置/速度/摇摆节奏/大小各不相同才像风刮的；负延迟=开场已在半空 */
.petalfall i:nth-child(1) { left: 6%; animation-duration: 18s; animation-delay: -4s; }
.petalfall i:nth-child(2) { left: 19%; animation-duration: 23s; animation-delay: -15s; width: 12px; height: 12px; }
.petalfall i:nth-child(2)::before { opacity: .55; animation-duration: 5.6s, 8s; }
.petalfall i:nth-child(3) { left: 33%; animation-duration: 15s; animation-delay: -9s; }
.petalfall i:nth-child(3)::before { animation-duration: 4.1s, 6s; }
.petalfall i:nth-child(4) { left: 48%; animation-duration: 20s; animation-delay: -1s; width: 13px; height: 13px; }
.petalfall i:nth-child(4)::before { opacity: .6; }
.petalfall i:nth-child(5) { left: 62%; animation-duration: 16s; animation-delay: -12s; }
.petalfall i:nth-child(5)::before { animation-duration: 5.2s, 7.5s; }
.petalfall i:nth-child(6) { left: 77%; animation-duration: 22s; animation-delay: -6s; width: 12px; height: 12px; }
.petalfall i:nth-child(6)::before { opacity: .5; animation-duration: 6s, 9s; }
.petalfall i:nth-child(7) { left: 91%; animation-duration: 17s; animation-delay: -17s; width: 14px; height: 14px; }
.petalfall i:nth-child(7)::before { opacity: .7; animation-duration: 4.5s, 6.6s; }
@media (prefers-reduced-motion: reduce) {
.petalfall { display: none; }
}
/* // ========== 点读弹跳：点哪个字哪个字"跳一下" ==========
// // 小朋友最直观的"我点到了！"反馈。只动 transform，
// // 减动效设置下 pulse() 直接不触发 */
.pop { animation: pop .28s ease; }
@keyframes pop { 40% { transform: scale(1.12); } }
/* // ========== 页脚：常规网站收底，一条发丝线 + 一行说明 ========== */
.sitefoot {
max-width: 1080px; margin: 0 auto; padding: 16px 24px 26px;
font-size: 13px; color: var(--muted); text-align: center;
border-top: 1px solid var(--line);
}
/* // 页脚备案徽牌（v18）：备案号按工信部要求常驻网站底部，
// // 做成小而醒目的"梅花双线框"——外圈淡线 + 内圈朱红加水线，
// // 左边一朵五瓣小梅花，与页面四角的梅花、飘落的花瓣同一母题；
// // 两个号各链官方查询页（工信部/公安要求的挂链方式），
// // 中间一条竖分割线（v19：图标 16px 太小像没显示，放大加深；两号之间加分隔） */
.beianbox {
display: inline-flex; align-items: center; gap: 9px;
margin-top: 10px; padding: 6px 16px 6px 12px;
font-size: 12.5px; color: var(--muted);
background: var(--surface);
border: 1.5px solid #dd8a7e; border-radius: 12px;
outline: 1.5px solid #ecd0ca; outline-offset: 2.5px;
}
.beianbox .plum {
flex: none; width: 20px; height: 20px;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* // 分割线：两个备案号中间一条淡朱红竖线， reading 时两号各归各 */
.beianbox a + a {
border-left: 1.5px solid #ecd0ca;
padding-left: 10px; margin-left: 1px;
}
/* // 公安备案盾徽（官方 ghs.png）：给图标腾出固定位置，文字不再挤压 */
.beianbox .ga {
display: inline-flex; align-items: center; gap: 5px;
}
.beianbox .ga img {
display: block; width: 14px; height: 14px;
}
.beianbox a {
color: var(--muted); text-decoration: none;
border-bottom: 1px dashed #dd8a7e;
transition: color .15s;
}
.beianbox a:hover { color: var(--accent-ink); }
/* // ========== 手机端：顶栏折两行（品牌行 + 可换行导航行）；双栏布局全部折单列 ========== */
@media (max-width: 900px) {
.topbar-in { flex-wrap: wrap; padding: 8px 16px 0; gap: 4px; }
.brandmark { width: 32px; height: 32px; font-size: 19px; line-height: 32px; }
.brandname { font-size: 15.5px; }
.navlinks {
width: 100%; flex-wrap: wrap;
padding: 2px 0 8px; gap: 2px;
}
/* // 手机端导航项紧凑：字牌缩小，仍是 字牌+页名 单行 */
.navlinks a { padding: 5px 10px 5px 6px; gap: 6px; font-size: 15px; }
.navtile { width: 22px; height: 22px; font-size: 12.5px; border-radius: 5px; }
.canvas { padding: 20px 16px 40px; }
.greet h1 { font-size: 30px; }
.greet .fact { font-size: 15px; }
.greet .fact strong { font-size: 18px; }
.pagehead h1 { font-size: 22px; }
.pagehead .sub { font-size: 15px; }
.pagehead-actions { flex-basis: 100%; margin-left: 0; }
.homegrid { grid-template-columns: 1fr; }
.herotiles { gap: 14px; }
.herowrap small { font-size: 12px; }
.herotile { width: 76px; height: 76px; font-size: 44px; }
.bigfigure { font-size: 44px; }
.featrow { gap: 14px; padding: 12px 16px; }
.featrow .sample { width: 52px; height: 52px; }
.featgo { display: none; } /* // 手机窄屏去掉行尾箭头，文字离屏幕边至少 16px */
/* // 学认字：主题条和舞台本来就是上下排，只收内边距 */
.wb-side { padding: 10px 12px; }
.lesson-item { font-size: 14.5px; padding: 7px 11px; }
.wb-stage { padding: 18px 16px 24px; }
.quizmain { grid-template-columns: 1fr; }
.tianbox { width: 170px; height: 170px; }
.bigchar { font-size: 100px; }
.hint { font-size: 21px; letter-spacing: 4px; }
.pinyin { font-size: 24px; }
#phraseArea { grid-template-columns: 1fr; }
.statband { grid-template-columns: 1fr; gap: 10px; }
.statblock { padding: 14px 16px 12px; }
.statnum { font-size: 36px; }
#statLessons { grid-template-columns: 1fr; }
.pyflow { padding: 16px 16px 10px; }
.pygrid { gap: 9px; }
.pybtn { width: 64px; height: 64px; font-size: 17px; }
}
/* // 焦点可见性：读屏/键盘用户的生命线，琥珀色和主红区分开
// // 页题只做程序化聚焦（读屏落焦点），不算键盘停靠点，不画框 */
button:focus-visible, a:focus-visible, .btn:focus-visible {
outline: 3px solid var(--focus); outline-offset: 2px;
}
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
/* // 隐藏工具类必须永远赢：v15 曾被 button.btn-game(0,1,1) 的 display:inline-flex
// // 压过(0,1,0)，导致"下一个字"在未答题时就露出来 */
.hidden { display: none !important; }
[role="status"] { position: fixed; left: -9999px; } /* // 读屏专用播报区 */
/* // 入场动画：只给主页首屏的固定元素（田字格 + 功能行）。
// // 卡片类元素一律不做入场动画——display 切换会重启 CSS 动画，
// // 页内"返回列表/翻面"时重放一遍就是用户看到的"闪" */
@media (prefers-reduced-motion: no-preference) {
body { animation: pagefade .15s ease-out; }
.herowrap { animation: rise .35s ease-out both; }
.herowrap:nth-child(2) { animation-delay: .05s; }
.herowrap:nth-child(3) { animation-delay: .1s; }
.herowrap:nth-child(4) { animation-delay: .15s; }
.featrow { animation: rise .3s ease-out both; }
.featrow:nth-child(2) { animation-delay: .04s; }
.featrow:nth-child(3) { animation-delay: .08s; }
.featrow:nth-child(4) { animation-delay: .12s; }
.featrow:nth-child(5) { animation-delay: .16s; }
.featrow:nth-child(6) { animation-delay: .2s; }
}
@keyframes pagefade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* // 页内视图切换的轻淡入：JS 在显示区块时主动挂 .viewfade（重挂会重放），
// // 这是"有意的过渡"，不是每次都无差别重播 */
.viewfade { animation: pagefade .18s ease-out; }
/* // 跨文档视图过渡（Chrome/Edge 126+ 的渐进增强）：
// // 支持的浏览器里页面切换是柔和的交叉淡化，不支持的完全忽略，
// // 零 JS 零依赖，file:// 下也只是静默不生效 */
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
}