/* 字感启蒙 · 视觉规范同全站:瓷白/墨绿/印章红/近黑 + 霞鹜文楷 */
@font-face{font-family:"LXGW WenKai";src:url("/lxgw.woff2") format("woff2");font-display:swap}
:root{
  --paper:#F6FAF4; --card:#FFFFFF; --ink:#16241E; --ink2:#46564E; --mute:#637268; --rule:#E2EBE6;
  --accent:#117AA9; --accentSoft:#DDEEF7; --accent2:#6B47EE; --accent2Soft:#EDE7FE; --success:#0D7B45; --successSoft:#DDF5E7; --celebrate:#D23A26; --celebrateSoft:#FCE7E2;
  --onAccent:#fff; --onAccent2:#fff; --onSuccess:#fff; --onCelebrate:#fff;
  --jade:var(--accent); --jade-soft:var(--accentSoft);
  --seal:var(--celebrate); --seal-soft:var(--celebrateSoft);
  --gold:var(--accent2); --gold-soft:var(--accent2Soft);
  --hanzi:"LXGW WenKai","Kaiti SC","KaiTi","STKaiti","Noto Serif SC",serif;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --py:"SimHei","黑体","Heiti SC","PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0F1518; --card:#172026; --ink:#EAF3EC; --ink2:#AEBDB4; --mute:#798A80; --rule:#26313A;
    --accent:#4EC3F0; --accentSoft:#122630; --accent2:#A78BFF; --accent2Soft:#2C2440; --success:#3FD98A; --successSoft:#12301F; --celebrate:#FF6B57; --celebrateSoft:#33201C;
    --onAccent:#0F1518; --onAccent2:#0F1518; --onSuccess:#0F1518; --onCelebrate:#0F1518;
    --jade:var(--accent); --jade-soft:var(--accentSoft);
    --seal:var(--celebrate); --seal-soft:var(--celebrateSoft);
    --gold:var(--accent2); --gold-soft:var(--accent2Soft);
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--ui)}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
/* 底部留够两个悬浮键的高度。account.js 的让位逻辑找的是 .foot/.cta 这些类名,
   而这个站里根本没有它们 —— 从上线起就没进过让位逻辑。用文档流自己让位更稳。 */
#app{max-width:640px;margin:0 auto;min-height:100dvh;padding:0 18px 110px}
.hanzi{font-family:var(--hanzi)}
.py{font-family:var(--py)}
.btn{display:block;width:100%;padding:14px 18px;border-radius:14px;font-size:17px;font-weight:600;
     text-align:center;background:var(--accent);color:var(--onAccent)}
.btn:active{transform:scale(.98)}
.btn.ghost{background:var(--card);color:var(--jade);border:1.5px solid var(--jade)}
.crumb{color:var(--mute);font-size:14px;padding:14px 0 6px;display:inline-block}
.topbar{display:flex;align-items:center;gap:10px}

/* 首页 */
.hero{padding:30px 0 14px}
.hero .zh{font-family:var(--hanzi);font-size:40px;font-weight:700;letter-spacing:.05em}
.hero .en{color:var(--ink2);font-size:15.5px;margin-top:6px}
.hero .stat{margin-top:12px;font-size:13.5px;color:var(--mute)}
.hero .stat b{color:var(--seal)}
.lvhead{font-size:13px;letter-spacing:.1em;color:var(--mute);font-weight:700;margin:22px 0 10px}
.chrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);
       border:1px solid var(--rule);border-radius:15px;padding:12px 15px;margin-bottom:9px}
.chrow:active{transform:scale(.99)}
.chrow .no{width:30px;height:30px;border-radius:99px;background:var(--jade-soft);color:var(--jade);
           display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:none}
.chrow.done .no{background:var(--celebrate);color:var(--onCelebrate)}
.chrow .nm{font-size:15px;font-weight:600}
.chrow .chars{font-family:var(--hanzi);font-size:13.5px;color:var(--ink2);letter-spacing:.14em;margin-top:1px}
.chrow .chars .lit{color:var(--seal)}
.chrow .fut{margin-left:auto;flex:none;text-align:right;font-size:11.5px;color:var(--mute);max-width:86px}
.chrow .fut b{display:block;font-size:16px;color:var(--gold)}
.chrow.method{background:var(--gold-soft);border-color:transparent}
.chrow.method .no{background:var(--accent2);color:var(--onAccent2)}
.decode-card{background:var(--card);border:2px solid var(--seal);border-radius:16px;padding:16px 18px;
             margin-top:20px;width:100%;text-align:left}
.decode-card .t{font-family:var(--hanzi);font-size:19px;font-weight:700;color:var(--seal)}
.decode-card .s{font-size:13px;color:var(--ink2);margin-top:3px}

/* 章页 */
.chhead{padding:6px 0 14px}
.chhead .nm{font-family:var(--hanzi);font-size:26px;font-weight:700}
.chhead .en{color:var(--mute);font-size:14px}
.chhead .hook{margin-top:8px;font-size:13.5px;color:var(--gold);font-weight:600}
.ccard{background:var(--card);border:1px solid var(--rule);border-radius:20px;padding:20px;margin-bottom:16px}
.ccard .top{display:flex;gap:16px;align-items:center}
.ccard .big{font-family:var(--hanzi);font-size:64px;font-weight:700;line-height:1.15;flex:none}
.ccard .pimg{flex:none;background:#F6FAF4;border-radius:8px;padding:4px}
/* 58 张基因图全是透明底。逐像素统计:深色下比浅色差 10 个百分点以上的有 35 张
   (过 58.7%→10.3%、多 38.2%→2.5%、车 37.8%→4.3% 基本不可见),
   但反过来也有 12 张是浅色更糟且更极端(不 71%→11%、一 59.5%→12%)。
   所以这不是深色模式 bug,按「深色下垫浅纸」改会修好 35 张、弄坏 12 张。
   两侧垫同一张纸,让所有图都落回它们被画出来时的那张底色上。 */
.ccard img{width:96px;height:56px;object-fit:contain}
.ccard .meta{flex:1}
.ccard .py{color:var(--jade);font-weight:700;font-size:18px}
/* 两种标记要一眼分出轻重:手写字是要动笔的,认读字看过就行。
   原来两者同色同粗,学习者分不出该在哪个上面花力气。 */
.ccard .an{display:inline-block;margin-left:8px;font-size:11px;border:1px solid var(--rule);
           color:var(--mute);border-radius:6px;padding:0 6px;vertical-align:2px;
           white-space:nowrap;cursor:help}
.ccard .an.w{border-color:var(--gold);color:var(--gold);background:var(--gold-soft);font-weight:600}
.ccard .futline{font-size:12px;color:var(--mute);margin-top:3px}
.gene{margin-top:12px;padding:12px 14px;background:var(--jade-soft);border-radius:12px}
.gene .cn{font-family:var(--hanzi);font-size:17.5px}
.gene .en{font-size:13.5px;color:var(--ink2);margin-top:5px}
.gene .note{font-size:12px;color:var(--mute);margin-top:6px}
.sect{font-size:12.5px;letter-spacing:.08em;color:var(--mute);font-weight:700;margin:14px 0 7px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--paper);border:1px solid var(--rule);border-radius:10px;padding:6px 11px;
      font-family:var(--hanzi);font-size:16px}
.peek{background:var(--card);border:1.5px dashed var(--gold);border-radius:10px;padding:6px 11px;
      font-family:var(--hanzi);font-size:16px;position:relative}
.peek .lv{font-size:9.5px;color:var(--gold);vertical-align:6px;margin-left:2px;font-family:var(--ui)}
.peek .rev{display:none;font-family:var(--ui);font-size:12.5px;color:var(--jade);font-weight:600;margin-left:6px}
.peek.open{border-style:solid;background:var(--gold-soft)}
.peek.open .rev{display:inline}
.peekhint{font-size:12px;color:var(--mute);margin-top:6px}
.restgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
.rcard{background:var(--card);border:1px solid var(--rule);border-radius:13px;padding:11px 12px;text-align:left}
.rcard .c{font-family:var(--hanzi);font-size:28px;font-weight:700}
.rcard .py{color:var(--jade);font-size:13px;font-weight:600;margin-left:6px}
.rcard .short{font-size:12px;color:var(--ink2);margin-top:5px;display:none}
.rcard.open .short{display:block}
.rcard .peekrow{display:none;margin-top:7px;gap:6px;flex-wrap:wrap}
.rcard.open .peekrow{display:flex}
.trybox{background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:16px 18px;margin:6px 0 16px}
/* 这两处原来是 div + onclick,键盘完全够不到 —— 章页别处(chips/peek/rcard)
   都是真 button,只有 TRY IT 和整个毕业解码页不是,而毕业解码正是这门课的高潮。
   换成 button 后要把浏览器默认样式压掉,视觉不变。 */
.tryitem{padding:10px 0;border-bottom:1px dashed var(--rule);
         display:block;width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0;
         font:inherit;color:inherit;cursor:pointer}
.decopen{display:block;width:100%;text-align:left;background:none;border:0;padding:0;
         font:inherit;color:inherit;cursor:pointer}
.tryitem:focus-visible,.decopen:focus-visible,.decitem:focus-within{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.tryitem:last-child{border-bottom:none}
.tryitem .w{font-family:var(--hanzi);font-size:24px;font-weight:700}
.tryitem .py{color:var(--jade);font-size:14px;margin-left:8px}
.tryitem .ans{display:none;color:var(--jade);font-weight:600;font-size:14.5px;margin-top:4px}
.tryitem.open .ans{display:block}
.tryitem .tip{font-size:12px;color:var(--mute);margin-top:3px}
.mpage{background:var(--gold-soft);border-radius:16px;padding:18px;margin-bottom:14px}
.mpage .t{font-family:var(--hanzi);font-size:19px;font-weight:700;margin-bottom:8px}
.mpage p{margin:6px 0;font-size:14.5px}
.mpage p.en{color:var(--ink2);font-size:13px}
.mpage .row{padding:8px 0;border-bottom:1px dashed var(--rule);font-size:14px}
.mpage .row b{font-family:var(--hanzi);font-size:16px}

/* 解码 */
.dechead{padding:16px 0 8px;text-align:center}
.dechead .t{font-family:var(--hanzi);font-size:28px;font-weight:700;color:var(--seal)}
.dechead .s{font-size:13.5px;color:var(--ink2);margin-top:6px}
.decitem{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:14px 16px;margin-bottom:10px}
.decitem .w{font-family:var(--hanzi);font-size:26px;font-weight:700}
.decitem .py{color:var(--jade);font-size:14px;margin-left:8px}
.decitem .ans{display:none;margin-top:6px;color:var(--jade);font-weight:600}
.decitem.open .ans{display:block}
.decitem .selfrow{display:none;gap:10px;margin-top:8px}
.decitem.open .selfrow{display:flex}
.selfbtn{flex:1;padding:8px;border-radius:10px;font-size:14px;font-weight:600;border:1.5px solid var(--rule)}
.selfbtn.got{border-color:var(--jade);color:var(--jade)}
.selfbtn.not{border-color:var(--mute);color:var(--mute)}
.selfbtn.on.got{background:var(--success);color:var(--onSuccess)}
.selfbtn.on.not{background:var(--rule);color:var(--ink2);font-weight:700}
.sealbox{width:150px;height:150px;border:5px solid var(--seal);border-radius:16px;color:var(--seal);
         display:flex;flex-direction:column;align-items:center;justify-content:center;margin:24px auto 18px;
         font-family:var(--hanzi);transform:rotate(-6deg);
         animation:stampin .5s cubic-bezier(.2,1.6,.4,1) both}
.sealbox .big{font-size:60px;font-weight:700;line-height:1}
.sealbox .small{font-size:13px;font-weight:700;margin-top:4px;letter-spacing:.2em}
@keyframes stampin{0%{transform:rotate(-6deg) scale(2.2);opacity:0}60%{transform:rotate(-6deg) scale(.94);opacity:1}100%{transform:rotate(-6deg) scale(1)}}
.center{text-align:center}
footer{margin-top:30px;font-size:12px;color:var(--mute);text-align:center}
footer a{color:var(--jade);text-decoration:none}

/* 尊重系统的「减弱动效」设置。
   celebrate.css 里做了,但只覆盖 cb- 前缀;场景线自己另造了一套 .confetti,
   逃出了那个块 —— 用户明确要了减弱动效,每完成一个单元照样吃 150px 印章
   从 2.2 倍砸到屏幕正中 + 26 片彩纸全屏坠落。这里补上全局兜底。 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}