/* HanziPeek · 看形拼词 · 马来语 / 印尼语 —— 照《UI 设计说明 v2》§6：中性色 + 色相语义（前缀 25 · 词根 252 · 后缀 150 · 元音 55 · 辅音 230 · 半元音 142 · 双字母 292） */
.mx-app{--page:#f5f3ee;--card:#fffdf9;--ink:#1f1d1a;--sub:#6f6a62;--line:#e6e1d8;--mute:#aaa398;--seg:#ebe7df;
  font-family:'Noto Sans SC',sans-serif;color:var(--ink);background:var(--page);border-radius:22px;padding:20px 22px 28px;display:flex;flex-direction:column;gap:16px;-webkit-font-smoothing:antialiased}
.mx-app button{font-family:inherit;color:inherit;cursor:pointer}
.mx-app [lang=ms],.mx-app [lang=id],.mx-dec-word,.mx-cword,.mx-lk,.mx-mk-s,.mx-mkey b,.mx-ac-l,.mx-block b,.mx-res,.mx-tree-root,.mx-prism-src,.mx-ray-w,.mx-rootb b,.mx-chipm b,.mx-sw-w{font-family:'Bricolage Grotesque','Noto Sans SC',sans-serif}
.mx-ipa{font-family:'Noto Sans',sans-serif;color:var(--sub)}
.mx-mute{color:var(--sub);font-size:13px;margin:6px 0}
.mx-hint{color:var(--sub);font-size:13px;margin:0 0 8px}
.mx-note{background:#f3efe8;border-radius:10px;padding:8px 10px;font-size:13px}
/* 顶栏 */
.mx-top{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px}
.mx-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-right:auto}
.mx-title b{font-family:'Bricolage Grotesque','Noto Sans SC';font-weight:700;font-size:26px;letter-spacing:-.02em}
.mx-title span{font-size:13px;color:var(--sub)}
.mx-seg{display:flex;gap:4px;padding:4px;background:var(--seg);border-radius:12px}
.mx-seg button{border:0;background:transparent;border-radius:9px;padding:7px 12px;font-size:13px;color:var(--sub);display:flex;flex-direction:column;align-items:center;line-height:1.25}
.mx-seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.mx-seg button small{font-size:10.5px;color:var(--sub);font-weight:400}
.mx-lvsel{font-size:13px;color:var(--sub)}
.mx-lvsel select,.mx-voice{font:inherit;font-size:13px;border:1px solid var(--line);border-radius:10px;padding:6px 8px;background:var(--card)}
.mx-other{font-size:13px;color:var(--sub);text-decoration:none;border-bottom:1px dashed var(--mute)}
/* 布局 */
.mx-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:16px;align-items:start}
.mx-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.mx-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:12px}
@media (max-width:980px){.mx-body{grid-template-columns:1fr}.mx-side{position:static}}
.mx-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px}
.mx-card h4{margin:0 0 8px;font-size:13.5px}
.mx-card h4 small{font-weight:400;color:var(--sub)}
.mx-sec-h{display:flex;align-items:baseline;gap:10px;margin:14px 0 8px}
.mx-sec-h b{font-size:14px}.mx-sec-h span{font-size:12.5px;color:var(--sub)}
.mx-sec-h .mx-link:first-of-type{margin-left:auto}
.mx-link{border:0;background:none;color:var(--sub);font-size:12.5px;text-decoration:underline;padding:2px 4px}
.mx-btn{border:1px solid var(--line);background:var(--card);border-radius:12px;padding:8px 14px;font-size:14px;min-height:40px;display:inline-flex;align-items:center;gap:6px}
.mx-btn.dark{background:var(--ink);color:#fffdf9;border-color:var(--ink)}
.mx-btn.done{background:var(--seg)}
.mx-btn.big{font-size:17px;padding:12px 20px;min-height:52px}
.mx-az{font-size:9.5px;font-weight:700;padding:1px 5px;border-radius:5px;background:#e8f1fb;color:#1d5fa8;letter-spacing:.03em}
.mx-spk{border:0;border-radius:50%;background:#f0ece4;display:inline-flex;align-items:center;justify-content:center;flex:none}
.mx-spk.m{width:44px;height:44px;font-size:17px}.mx-spk.s{width:34px;height:34px;font-size:14px}
.mx-spk:hover{background:#e6e0d4}
/* 步骤条 */
.mx-steps{display:flex;gap:6px;list-style:none;margin:0 0 12px;padding:0;flex-wrap:wrap}
.mx-steps li{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#9a948a;padding:5px 10px 5px 6px;border-radius:999px}
.mx-steps li i{font-style:normal;width:20px;height:20px;border-radius:50%;background:var(--seg);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-family:'JetBrains Mono',monospace}
.mx-steps li.on{background:var(--ink);color:#fffdf9}.mx-steps li.on i{background:#fffdf9;color:var(--ink)}
.mx-steps li.past{background:var(--seg);color:var(--ink)}.mx-steps li.past i{background:var(--ink);color:#fffdf9}
.mx-keys{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--sub);margin:12px 0 0}
/* 字母键 */
.mx-letters{display:flex;flex-wrap:wrap;gap:6px}
.mx-lk{width:42px;height:46px;border:0;border-radius:10px;background:var(--bg);color:var(--ink);box-shadow:inset 0 -3px 0 var(--edge);font-size:20px;font-weight:600;transition:transform .08s}
.mx-lk:active{transform:translateY(2px);box-shadow:inset 0 -1px 0 var(--edge)}
.mx-lk.sel{background:var(--chip);outline:2px solid var(--ink)}
.mx-letters.kids .mx-lk{width:58px;height:64px;font-size:30px;border-radius:14px}
/* 三列词素 */
.mx-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.mx-cols.kids{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.mx-cols{grid-template-columns:1fr}}
.mx-col{display:flex;flex-direction:column;gap:6px}
.mx-col-h{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.mx-col-h i{width:10px;height:10px;border-radius:3px}
.mx-col-h small{font-weight:400;color:var(--sub);margin-left:auto;font-size:11.5px}
.mx-mk{border:1px solid #ece7de;background:var(--card);border-radius:12px;padding:8px 10px;display:grid;grid-template-columns:1fr auto;text-align:left;box-shadow:inset 0 -3px 0 var(--edge);min-height:44px}
.mx-mk.sel{background:var(--chip);border-color:var(--ink)}
.mx-mk-s{font-size:18px;font-weight:700;color:var(--ink)}
.mx-mk-s u{text-decoration-color:var(--ink);text-decoration-thickness:2px;text-underline-offset:3px}
.mx-mk small{grid-column:1;font-size:12px;color:var(--sub)}
.mx-mk em{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--sub)}
.mx-more{border:1px dashed var(--line);background:none;border-radius:10px;padding:6px;font-size:12px;color:var(--sub)}
.mx-mkeys{display:flex;flex-wrap:wrap;gap:6px}
.mx-mkey{border:0;background:var(--bg);border-radius:12px;padding:7px 10px;box-shadow:inset 0 -3px 0 var(--edge);display:flex;flex-direction:column;align-items:flex-start;min-height:44px}
.mx-mkey b{font-size:16px;color:var(--ink)}.mx-mkey small{font-size:11px;color:var(--sub)}
.mx-strip{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-height:52px;padding:8px 10px;background:#f7f4ee;border-radius:14px}
.mx-chipm{border:1px solid var(--edge);background:var(--chip);border-radius:10px;padding:5px 10px;display:flex;flex-direction:column;align-items:flex-start}
.mx-chipm b{font-size:16px;color:var(--ink)}.mx-chipm small{font-size:11px;color:var(--sub)}
/* 候选词 */
.mx-cl{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.mx-cand{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--card);border-radius:14px;padding:8px 8px 8px 10px;cursor:pointer;min-height:56px}
.mx-cand.sel{border-color:var(--ink);background:#fff}
.mx-n{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--sub);width:14px}
.mx-cw{flex:1;min-width:0}
.mx-cword{font-size:20px;font-weight:600;letter-spacing:-.01em}
.mx-sg{border-radius:4px;padding:0 1px}
.mx-czh{font-size:12.5px;color:var(--sub)}.mx-czh small{display:block;font-size:11px;color:#9a948a}
.mx-tag{font-size:10.5px;background:var(--seg);border-radius:6px;padding:2px 6px}
.mx-cl.kids{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.mx-cico{font-size:34px;line-height:1}
/* 解构卡 */
.mx-dec{border-color:#d9d2c5;animation:mxrise .25s ease}
@keyframes mxrise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mx-dec-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mx-dec-head>div:nth-child(1),.mx-dec-head>div:nth-child(2):not(.mx-dec-btns){flex:1;min-width:220px}
.mx-dec-ico{font-size:64px;line-height:1}
.mx-dec-word{font-size:44px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.mx-dec-sub{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-top:4px;font-size:15px}
.mx-zh{font-weight:600}
.mx-lv{font-size:11px;background:var(--seg);border-radius:6px;padding:1px 6px;color:var(--sub)}
.mx-pend{font-size:11px;background:#fdf1d8;color:#8a5a00;border-radius:6px;padding:1px 6px}
.mx-dec-btns{display:flex;gap:8px;margin-left:auto}
.mx-blocks{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:14px 0 6px}
.mx-block{border:1px solid var(--edge);background:var(--chip);border-radius:12px;padding:6px 12px;display:flex;flex-direction:column;align-items:flex-start;min-height:44px;box-shadow:inset 0 -3px 0 var(--edge)}
.mx-block b{font-size:20px;color:var(--ink)}
.mx-block small{font-size:11px;color:var(--ink);opacity:.75}
.mx-block i{font-style:normal;font-size:11.5px;color:var(--sub)}
.mx-plus,.mx-eq{font-size:20px;color:var(--sub)}
.mx-res{font-size:22px;font-weight:800}
.mx-blocks.big .mx-block b{font-size:30px}.mx-blocks.big .mx-res{font-size:30px}
.mx-ex{display:flex;gap:12px;align-items:flex-start;background:#f7f4ee;border-radius:14px;padding:10px 12px;margin-top:10px}
.mx-ex-t{margin:0;font-size:16px}.mx-ex-t mark{background:oklch(0.9 0.075 252);border-radius:4px;padding:0 2px;font-weight:700;color:inherit}
.mx-ex-zh{margin:2px 0 0;font-size:13px;color:var(--sub)}
.mx-dec-more{display:flex;flex-direction:column;gap:12px;margin-top:12px;border-top:1px dashed var(--line);padding-top:12px}
.mx-dl p{margin:0;font-size:14px;line-height:1.6}
.mx-fam{display:flex;flex-wrap:wrap;gap:6px}
.mx-chip{border:1px solid var(--line);background:#f7f4ee;border-radius:10px;padding:5px 10px;display:inline-flex;align-items:baseline;gap:6px;font-size:14px}
.mx-chip b{font-family:'Bricolage Grotesque','Noto Sans SC';font-size:15px}.mx-chip small{color:var(--sub);font-size:12px}
.mx-chip.sel{border-color:var(--ink);background:#fff}
.mx-mini{display:inline-block;background:var(--bg);color:var(--ink);border-radius:7px;padding:2px 7px;font-size:12px;font-weight:600}
.mx-dg2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:760px){.mx-dg2{grid-template-columns:1fr}}
/* 词族树 */
.mx-tree-root{display:inline-flex;align-items:baseline;gap:6px;background:var(--chip);border:1px solid var(--edge);border-radius:10px;padding:4px 10px;font-weight:800;font-size:18px;color:var(--ink)}
.mx-tree-root small{font-family:'Noto Sans SC';font-weight:400;font-size:12px;color:var(--sub)}
.mx-tree ul{list-style:none;margin:6px 0 0 14px;padding:0 0 0 12px;border-left:2px solid var(--line)}
.mx-tree li{position:relative;padding:4px 0 4px 6px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mx-tree li:before{content:'';position:absolute;left:-12px;top:16px;width:12px;border-top:2px solid var(--line)}
.mx-tree-k{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--sub);min-width:60px}
.mx-tree-w{border:1px solid var(--line);background:var(--card);border-radius:9px;padding:3px 8px;display:inline-flex;align-items:baseline;gap:5px;font-size:15px;font-weight:600;font-family:'Bricolage Grotesque','Noto Sans SC'}
.mx-tree-w small{font-family:'Noto Sans SC';font-weight:400;font-size:11.5px;color:var(--sub)}
/* 棱镜 */
.mx-prism{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}
.mx-prism-src{position:relative;background:var(--chip);border:1px solid var(--edge);clip-path:polygon(0 0,100% 50%,0 100%);padding:18px 34px 18px 12px;font-weight:800;font-size:17px;color:var(--ink);display:flex;flex-direction:column}
.mx-prism-src small{font-family:'Noto Sans SC';font-size:11px;font-weight:400}
.mx-prism-rays{display:flex;flex-direction:column;gap:4px}
.mx-ray{display:grid;grid-template-columns:70px 1fr auto;gap:8px;align-items:baseline;background:linear-gradient(90deg,var(--soft),transparent);border-left:3px solid var(--edge);border-radius:0 8px 8px 0;padding:3px 8px;font-size:13px}
.mx-ray-a{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink)}
.mx-ray-w{font-weight:700;font-size:15px}.mx-ray-m{color:var(--sub);font-size:12px}
/* 集合图 */
.mx-venn-ring{border:2px dashed var(--edge);background:var(--bg);border-radius:999px;padding:12px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mx-venn-ring>b{color:var(--ink);font-size:14px}
.mx-venn-in{display:flex;gap:8px;flex-wrap:wrap}
.mx-venn-v{background:var(--card);border:1px solid var(--edge);border-radius:999px;padding:4px 12px;display:flex;flex-direction:column;align-items:center}
.mx-venn-v b{font-size:15px;color:var(--ink)}.mx-venn-v small{font-size:11px;color:var(--sub)}
/* 字母表 */
.mx-abc{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.mx-ac{position:relative;background:var(--bg);border-radius:14px;padding:10px 10px 10px 12px;box-shadow:inset 0 -3px 0 var(--edge);cursor:pointer;min-height:96px}
.mx-ac.sel{background:var(--chip);outline:2px solid var(--ink)}
.mx-ac-l{font-size:26px;font-weight:700;color:var(--ink)}
.mx-ac-n{font-size:12px;color:var(--sub)}
.mx-ac-w{font-size:14px;margin-top:4px}.mx-ac-w u{text-decoration-thickness:2px}.mx-ac-w small{display:block;font-size:11.5px;color:var(--sub)}
.mx-ac .mx-spk{position:absolute;right:8px;top:8px}
.mx-abc.kids{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.mx-abc.kids .mx-ac-l{font-size:36px}
.mx-dig{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.mx-dc{display:grid;grid-template-columns:auto auto 1fr auto;gap:8px;align-items:center;background:var(--bg);border-radius:12px;padding:8px 10px}
.mx-dc b{font-size:20px;color:var(--ink)}.mx-dc small{display:block;color:var(--sub);font-size:11px}
/* 意象 */
.mx-imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.mx-imgc{border:0;background:var(--bg);border-radius:14px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:inset 0 -3px 0 var(--edge)}
.mx-imgc.sel{background:var(--chip);outline:2px solid var(--ink)}
.mx-imgc-i{font-family:'Noto Serif SC',serif;font-size:28px;color:var(--ink)}
.mx-imgc b{font-size:13px}.mx-imgc small{font-size:11px;color:var(--sub)}
.mx-roots{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.mx-rootb{border:1px solid var(--edge);background:var(--bg);border-radius:12px;padding:6px 12px;display:flex;flex-direction:column;align-items:flex-start;box-shadow:inset 0 -3px 0 var(--edge)}
.mx-rootb.sel{background:var(--chip);outline:2px solid var(--ink)}
.mx-rootb b{font-size:18px;color:var(--ink)}.mx-rootb small{font-size:11.5px;color:var(--sub)}.mx-rootb em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--sub)}
.mx-rootp{border-top:1px dashed var(--line);padding-top:10px}
/* 侧栏 */
.mx-side-c{padding:14px 16px}
.mx-dm,.mx-dl-l{display:flex;align-items:baseline;gap:10px;background:var(--bg);border-radius:12px;padding:10px 12px;margin-bottom:10px}
.mx-dm b,.mx-dl-l b{font-family:'Bricolage Grotesque','Noto Sans SC';font-size:24px;color:var(--ink)}
.mx-dm span,.mx-dl-l span{font-size:12.5px;color:var(--sub)}
.mx-sw{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid #f0ebe2;cursor:pointer}
.mx-sw-w{font-size:16px;font-weight:600;flex:1}.mx-sw small{color:var(--sub);font-size:12px}
.mx-rules{width:100%;border-collapse:collapse;font-size:12.5px}
.mx-rules td{padding:5px 6px;border-bottom:1px solid #f0ebe2;vertical-align:top}
.mx-rules tr.on td{background:oklch(0.955 0.035 25)}
.mx-chal{display:flex;align-items:center;gap:10px;border:1px solid #ece7de;background:#faf8f4;border-radius:12px;padding:8px 10px;margin-bottom:6px}
.mx-chal.act{background:#fff;border-color:var(--ink)}
.mx-chal-b{width:34px;height:34px;border-radius:50%;border:0;background:var(--seg);flex:none}
.mx-chal.act .mx-chal-b{background:var(--ink);color:#fffdf9}.mx-chal.done .mx-chal-b{background:oklch(0.9 0.09 150);color:oklch(0.35 0.1 150)}
.mx-chal div{flex:1;display:flex;flex-direction:column}.mx-chal small{font-size:11.5px;color:var(--sub)}
.mx-path{font-family:'JetBrains Mono',monospace;color:var(--ink)!important}
.mx-about p{font-size:12.5px;line-height:1.6;margin:0 0 6px}
.mx-flash{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:#fffdf9;border-radius:999px;padding:10px 20px;font-size:14px;z-index:50;box-shadow:0 6px 20px rgba(0,0,0,.2)}
/* 儿童版 */
.mx-app.kids{--page:#fff8ec;border-radius:28px}
.mx-app.kids .mx-title b{font-size:30px}
.mx-app.kids .mx-seg button{font-size:16px;padding:10px 16px}
.mx-app.kids .mx-card{border-radius:24px}
.mx-app.kids .mx-cword{font-size:24px}
.mx-app.kids .mx-dec-word{font-size:52px}
.mx-game{display:flex;flex-direction:column;align-items:center;gap:16px;padding:6px 0}
.mx-game-top{display:flex;gap:16px;align-items:center}
.mx-stars{font-size:22px;font-weight:700}
.mx-game-opts{display:grid;grid-template-columns:repeat(2,minmax(130px,190px));gap:14px}
.mx-gopt{border:2px solid var(--line);background:var(--card);border-radius:24px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:150px;transition:transform .1s}
.mx-gopt:hover:not(:disabled){transform:translateY(-2px)}
.mx-gico{font-size:68px;line-height:1}
.mx-gopt b{font-family:'Bricolage Grotesque','Noto Sans SC';font-size:20px}
.mx-gopt.wrong{opacity:.4;border-color:#e3b5a8}.mx-gopt.right{border-color:oklch(0.6 0.15 150);background:oklch(0.96 0.04 150)}
/* 站点样式会把 select 撑满整行：这里的下拉保持自身宽度 */
.mx-app select{width:auto;max-width:100%;flex:none;display:inline-block}