@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Noto+Serif+SC:wght@500;600&family=Noto+Sans+SC:wght@300;400;500&display=swap');
:root{
  --paper:#F4F1E8; --surface:#FCFAF4; --ink:#241E17; --ink2:#736A5C; --ink3:#9C9384;
  --clay:#BE5E38; --clayd:#974428; --claybg:#F1E1D4; --cinnabar:#A6362A; --gold:#B0904D; --bd:#E7DECC;
  --jade:#2F6F5E; --jaded:#235446; --jadebg:#E6EFEA;
  --serif:'Cormorant Garamond','Noto Serif SC',serif; --han:'Noto Serif SC',serif; --sans:'Noto Sans SC',-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.7;font-weight:400}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
/* nav */
.nav{position:sticky;top:0;z-index:10;background:rgba(252,250,244,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--bd)}
.nav .row{display:flex;align-items:center;gap:12px;height:64px}
.seal{width:34px;height:34px;border-radius:8px;background:var(--cinnabar);color:#F7EFE0;font-family:var(--han);font-weight:600;font-size:20px;display:flex;align-items:center;justify-content:center}
.brand{font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:.3px}
.brand small{font-family:var(--han);font-size:12px;color:var(--cinnabar);margin-left:6px;font-weight:600}
.links{display:flex;gap:24px;margin-left:28px;font-size:14px;color:var(--ink2)}
.links a:hover,.links a.on{color:var(--clay)}
.btn{margin-left:auto;background:var(--clay);color:#FBF1E5;font-size:13px;padding:9px 18px;border-radius:9px;font-weight:500}
.btn:hover{background:var(--clayd)}
/* hero */
.hero{text-align:center;padding:78px 0 30px;position:relative;overflow:hidden}
.hero .moon{position:absolute;right:6%;top:30px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle at 50% 45%,#EFE4C2 60%,#F6EFD8);opacity:.5}
.kicker{font-size:14px;letter-spacing:5px;color:var(--clayd);font-weight:500;text-transform:uppercase}
.hero h1{font-family:var(--serif);font-weight:700;font-size:60px;line-height:1.14;margin:16px 0 6px;letter-spacing:.5px}
.hero .zh{font-family:var(--han);font-size:22px;letter-spacing:10px;color:var(--cinnabar);font-weight:600;margin-bottom:18px}
.hero p{font-size:18px;color:var(--ink2);max-width:560px;margin:0 auto 26px;font-weight:300}
.cloud{display:block;margin:30px auto 0}
/* sections */
.sec{padding:46px 0 6px}
.sec-h{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;border-bottom:1px solid var(--bd);padding-bottom:12px}
.sec-h h2{font-family:var(--serif);font-weight:600;font-size:30px}
.sec-h .han{font-family:var(--han);font-size:18px;color:var(--cinnabar);font-weight:500}
.sec-h .more{margin-left:auto;font-size:13px;color:var(--ink3)}
.grid{display:grid;gap:16px}
.g6{grid-template-columns:repeat(6,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
/* cards */
.zcard{background:var(--surface);border:1px solid var(--bd);border-radius:12px;padding:16px 8px;text-align:center;transition:.15s}
.zcard:hover{border-color:var(--clay);transform:translateY(-2px)}
.zcard .disc{width:54px;height:54px;border-radius:50%;background:var(--claybg);margin:0 auto 9px;display:flex;align-items:center;justify-content:center;font-family:var(--han);font-size:26px;color:var(--clayd);font-weight:600}
.zcard .en{font-family:var(--serif);font-size:17px;font-weight:600}
.zcard .yr{font-size:11px;color:var(--ink3);margin-top:2px}
.card{background:var(--surface);border:1px solid var(--bd);border-radius:14px;overflow:hidden;transition:.15s}
.card:hover{border-color:var(--clay);transform:translateY(-2px)}
.card .top{height:120px;background:var(--claybg);display:flex;align-items:center;justify-content:center;font-family:var(--han);font-size:44px;color:var(--clayd);font-weight:600;position:relative}
.card .top .moonbg{position:absolute;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,#EFE4C2,#F6EFD8);opacity:.55}
.card .top span{position:relative}
.card .bd{padding:15px 17px}
.card .tag{font-size:11px;letter-spacing:1px;color:var(--clayd);text-transform:uppercase}
.card h3{font-family:var(--serif);font-weight:600;font-size:21px;margin:5px 0 6px}
.card p{font-size:13.5px;color:var(--ink2);font-weight:300;line-height:1.6}
.card .rd{font-size:12px;color:var(--clay);margin-top:10px;font-weight:500}
.ready{display:inline-block;font-size:10px;background:var(--clay);color:#FBF1E5;padding:2px 8px;border-radius:10px;margin-left:6px;vertical-align:middle}
/* footer */
footer{margin-top:60px;border-top:1px solid var(--bd);background:var(--surface)}
footer .row{display:flex;gap:40px;padding:36px 0;flex-wrap:wrap;font-size:13px;color:var(--ink2)}
footer h4{font-family:var(--serif);font-size:16px;margin-bottom:10px;color:var(--ink)}
footer .col a{display:block;padding:3px 0;color:var(--ink2)}
footer .fine{border-top:1px solid var(--bd);padding:16px 0;font-size:12px;color:var(--ink3);text-align:center}
/* article (3-col docs) */
.doc{display:grid;grid-template-columns:230px 1fr 220px;gap:30px;padding:28px 0 60px;align-items:start}
.side .lbl{font-size:11px;letter-spacing:1px;color:var(--ink3);margin:18px 0 10px;text-transform:uppercase}
.side a{display:block;font-size:13.5px;color:var(--ink2);padding:7px 10px;border-radius:8px}
.side a.on{color:var(--clayd);background:var(--claybg);border-left:3px solid var(--clay);font-weight:500}
.progress{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--bd);border-radius:10px;padding:10px 15px;font-size:12px;color:var(--ink2);margin-bottom:18px}
.progress .pbar{flex:1;height:6px;border-radius:3px;background:var(--claybg);overflow:hidden}
.progress .pbar i{display:block;width:7%;height:100%;background:var(--clay)}
.bc{font-size:12px;color:var(--ink3);margin-bottom:12px}
.chip{display:inline-block;font-size:12px;padding:3px 11px;border-radius:20px;background:var(--claybg);color:var(--clayd);margin-right:7px}
.art h1{font-family:var(--serif);font-weight:700;font-size:42px;line-height:1.2;margin:14px 0 8px}
.art .han-t{font-family:var(--han);font-size:24px;color:var(--cinnabar);font-weight:600;margin-bottom:16px}
.art .lead{font-size:18px;color:var(--ink2);font-weight:300;font-style:italic;margin-bottom:22px;line-height:1.6}
.callout{background:var(--surface);border:1px solid var(--bd);border-left:3px solid var(--clay);border-radius:0 10px 10px 0;padding:14px 16px;font-size:14px;margin:18px 0;color:var(--ink)}
.callout b{font-family:var(--han);color:var(--clayd);font-weight:500}
.art h2{font-family:var(--serif);font-weight:600;font-size:27px;margin:30px 0 10px}
.art p{font-size:16px;margin-bottom:14px;color:var(--ink)}
.art p .zh{font-family:var(--han);color:var(--cinnabar)}
.rrail .box{background:var(--surface);border:1px solid var(--bd);border-radius:12px;padding:14px;margin-bottom:14px}
.rrail .box.cta{background:var(--claybg);border-color:#E5C9B6}
.rrail .lbl{font-size:11px;letter-spacing:1px;color:var(--ink3);text-transform:uppercase}
.rrail h4{font-family:var(--serif);font-weight:600;font-size:17px;margin:5px 0 9px}
.rrail .next{display:block;text-align:center;background:var(--clay);color:#FBF1E5;font-size:13px;padding:9px;border-radius:8px}
.divider{margin:20px 0}
@media(max-width:900px){.g6{grid-template-columns:repeat(3,1fr)}.g3{grid-template-columns:1fr}.doc{grid-template-columns:1fr}.hero h1{font-size:42px}.links{display:none}}

/* ===== HTML5 动效 ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes moonPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.66;transform:scale(1.05)}}
@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(176,144,77,.0)}50%{box-shadow:0 0 22px 2px rgba(176,144,77,.35)}}
@media(prefers-reduced-motion:no-preference){
  .hero .moon{animation:moonPulse 6s ease-in-out infinite}
  .cloud{animation:drift 7s ease-in-out infinite}
  .zcard{animation:fadeUp .55s ease both}
  .card{animation:fadeUp .6s ease both}
  .zcard .disc{animation:floatY 3.6s ease-in-out infinite}
  .zcard:nth-child(1){animation-delay:.04s}.zcard:nth-child(2){animation-delay:.09s}.zcard:nth-child(3){animation-delay:.14s}
  .zcard:nth-child(4){animation-delay:.19s}.zcard:nth-child(5){animation-delay:.24s}.zcard:nth-child(6){animation-delay:.29s}
  .zcard:nth-child(7){animation-delay:.34s}.zcard:nth-child(8){animation-delay:.39s}.zcard:nth-child(9){animation-delay:.44s}
  .zcard:nth-child(10){animation-delay:.49s}.zcard:nth-child(11){animation-delay:.54s}.zcard:nth-child(12){animation-delay:.59s}
  .card:nth-child(2){animation-delay:.08s}.card:nth-child(3){animation-delay:.16s}.card:nth-child(4){animation-delay:.24s}
  .card:nth-child(5){animation-delay:.32s}.card:nth-child(6){animation-delay:.40s}
}
/* 生肖卡 hover 更生动 */
.zcard{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.zcard .disc{transition:transform .25s ease,background .25s ease}
.zcard:hover{transform:translateY(-6px);box-shadow:0 12px 26px rgba(150,68,40,.16);border-color:var(--clay)}
.zcard:hover .disc{animation-play-state:paused;transform:scale(1.18) rotate(-8deg);background:var(--clay);color:#FBF1E5}
.zcard .trait{max-height:0;opacity:0;overflow:hidden;font-size:11px;color:var(--clay);transition:.28s ease;margin-top:0}
.zcard:hover .trait{max-height:30px;opacity:1;margin-top:5px}
/* 龙=唯一神话生肖,金光高亮 */
.zcard:nth-child(5){border-color:var(--gold)}
.zcard:nth-child(5) .disc{background:linear-gradient(135deg,#F1E1D4,#E8D49C);color:var(--clayd)}
.zcard:nth-child(5):hover{animation:glowPulse 1.6s ease-in-out infinite}
/* 神话/节日卡 hover */
.card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.card .top span{display:inline-block;transition:transform .3s ease}
.card .top .moonbg{transition:transform .6s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(150,68,40,.15);border-color:var(--clay)}
.card:hover .top span{transform:scale(1.14)}
.card:hover .top .moonbg{transform:scale(1.15) rotate(20deg)}
.btn{transition:transform .15s ease,background .2s ease}
.btn:hover{transform:translateY(-2px)}
/* 文章页月亮玉兔/进度 */
.nav.shrink{box-shadow:0 4px 16px rgba(150,68,40,.08)}

/* ===== v2: 手机端视觉 + 排版优化 + hub组件 ===== */
/* hub 页 */
.hubhero{text-align:center;padding:60px 0 26px;position:relative}
.hubhero .kicker{font-size:13px;letter-spacing:4px;color:var(--clayd);text-transform:uppercase}
.hubhero h1{font-family:var(--serif);font-weight:700;font-size:48px;line-height:1.15;margin:12px 0 6px}
.hubhero .zh{font-family:var(--han);font-size:20px;letter-spacing:8px;color:var(--cinnabar);font-weight:600;margin-bottom:14px}
.hubhero p{font-size:17px;color:var(--ink2);max-width:600px;margin:0 auto;font-weight:300;line-height:1.7}
.serieslabel{display:flex;align-items:baseline;gap:12px;margin:40px 0 18px;border-bottom:1px solid var(--bd);padding-bottom:10px}
.serieslabel h2{font-family:var(--serif);font-weight:600;font-size:26px}
.serieslabel .en{font-size:12px;letter-spacing:2px;color:var(--clayd);text-transform:uppercase}
.serieslabel .han{font-family:var(--han);font-size:16px;color:var(--cinnabar)}
.soon{display:inline-block;font-size:10px;background:var(--claybg);color:var(--clayd);padding:2px 8px;border-radius:10px;margin-left:6px;vertical-align:middle;font-weight:500}
/* article 排版优化 */
.art{max-width:720px}
.art .lead{line-height:1.65}
.art p{line-height:1.78;color:#2C261E}
.art p+p{margin-top:0}
.art .pull{font-family:var(--serif);font-size:24px;line-height:1.4;color:var(--clayd);border-left:3px solid var(--clay);padding:6px 0 6px 18px;margin:22px 0;font-style:italic}
/* ===== 手机端 (<=720) ===== */
@media(max-width:720px){
  .wrap{padding:0 18px}
  .nav .row{height:56px;gap:8px;flex-wrap:nowrap}
  .brand{font-size:18px}.brand small{display:none}
  .links{display:flex;gap:13px;margin-left:12px;font-size:12.5px;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .btn{display:none}
  .hero{padding:48px 0 22px}.hero h1{font-size:33px;line-height:1.2}.hero .zh{font-size:16px;letter-spacing:5px}
  .hero p{font-size:15.5px;line-height:1.65}.hero .moon{width:150px;height:150px;right:-10px;top:18px;opacity:.4}
  .hubhero h1{font-size:33px}.hubhero .zh{font-size:16px;letter-spacing:5px}.hubhero p{font-size:15px}
  .sec{padding:34px 0 4px}.sec-h h2{font-size:23px}.sec-h .more{display:none}
  .g6{grid-template-columns:repeat(3,1fr);gap:11px}
  .g3{grid-template-columns:1fr;gap:14px}
  .zcard{padding:13px 6px}.zcard .disc{width:46px;height:46px;font-size:22px}.zcard .en{font-size:15px}
  .card .top{height:104px;font-size:38px}
  .doc{grid-template-columns:1fr;gap:0;padding:18px 0 44px}
  .side{display:none}
  .rrail{margin-top:26px}
  .art{max-width:100%}
  .art h1{font-size:31px;line-height:1.22}.art .han-t{font-size:19px}
  .art .lead{font-size:16px}.art h2{font-size:22px;margin:24px 0 8px}.art p{font-size:16px}
  .art .pull{font-size:20px}
  .progress{font-size:11px;padding:9px 12px;gap:8px}
  footer .row{gap:24px;padding:28px 0}
}
@media(max-width:380px){.hero h1{font-size:28px}.g6{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   耀蒲视觉锤系统 · Visual Hammer System
   ① SealMark 蒲印  ② Living Hanzi 巨幕汉字  ③ Fate Thread 命运红线
   ④ Native Note 文化注释卡  ⑤ Flagship 人物卡/时间线/汉字表/quiz
   ============================================================ */

/* ① SealMark — 蒲印盖章动画(全站 .seal 自动) */
.seal{position:relative}
@keyframes sealStamp{
  0%{opacity:0;transform:scale(1.7) rotate(-14deg)}
  50%{opacity:1;transform:scale(.86) rotate(4deg)}
  72%{transform:scale(1.06) rotate(-1.5deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes sealRipple{0%{opacity:.55;transform:scale(.55)}100%{opacity:0;transform:scale(1.9)}}
@media(prefers-reduced-motion:no-preference){
  .seal{animation:sealStamp .6s cubic-bezier(.2,1.25,.35,1) both}
  .seal::after{content:'';position:absolute;inset:-4px;border-radius:11px;border:1.5px solid var(--cinnabar);opacity:0;animation:sealRipple .7s ease-out .14s both;pointer-events:none}
}

/* ② Living Hanzi — 巨幕汉字(故事页 hero / 首页 hero 背景) */
.story-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--bd);background:linear-gradient(180deg,#FBF8F0 0%,var(--paper) 100%)}
.story-hero .wrap{position:relative;z-index:2;padding:56px 0 32px}
.story-hero .kicker{font-size:13px;letter-spacing:4px;color:var(--clayd);font-weight:500;text-transform:uppercase}
.story-hero h1{font-family:var(--serif);font-weight:700;font-size:54px;line-height:1.1;margin:13px 0 8px;max-width:15ch}
.story-hero .han-t{font-family:var(--han);font-size:23px;color:var(--cinnabar);font-weight:600;margin-bottom:15px;letter-spacing:.06em}
.story-hero .lead{font-size:18px;color:var(--ink2);font-weight:300;font-style:italic;max-width:56ch;line-height:1.62}
.living-hanzi{position:absolute;z-index:1;right:-1%;top:50%;transform:translateY(-50%);font-family:var(--han);font-weight:600;font-size:clamp(190px,33vw,400px);line-height:.8;color:var(--clay);opacity:.07;letter-spacing:-.04em;white-space:nowrap;pointer-events:none;user-select:none}
@keyframes hanziFloat{0%,100%{transform:translateY(-50%)}50%{transform:translateY(-53%)}}
@media(prefers-reduced-motion:no-preference){.living-hanzi{animation:hanziFloat 10s ease-in-out infinite}}
/* 首页 hero 内的巨幕汉字(覆盖定位,衬于标题后) */
.hero .living-hanzi{right:auto;left:50%;transform:translate(-50%,-50%);opacity:.05}
@media(prefers-reduced-motion:no-preference){.hero .living-hanzi{animation:none}}

/* ③ Fate Thread — 命运红线阅读进度 */
.fate-thread{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:rgba(166,54,42,.07);pointer-events:none}
.fate-thread i{display:block;height:100%;width:0;position:relative;background:linear-gradient(90deg,#8E2B22,#A6362A 60%,#CE5B47);box-shadow:0 0 10px rgba(166,54,42,.55);transition:width .12s ease-out}
.fate-thread i::after{content:'';position:absolute;right:-3px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:#CE5B47;box-shadow:0 0 9px 1px rgba(206,91,71,.85)}

/* ④ Native Note — 文化注释卡(玉绿) */
.note{position:relative;background:var(--jadebg);border:1px solid #CDE0D6;border-left:3px solid var(--jade);border-radius:0 12px 12px 0;padding:15px 18px 15px 50px;font-size:14.5px;line-height:1.72;margin:22px 0;color:#26352F}
.note::before{content:'玉';position:absolute;left:13px;top:14px;width:26px;height:26px;border-radius:6px;background:var(--jade);color:#EAF3EE;font-family:var(--han);font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center}
.note .nlbl{display:block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--jaded);font-weight:600;margin-bottom:3px}
.note b{font-family:var(--han);color:var(--jaded);font-weight:600}
.note .zh{font-family:var(--han);color:var(--jaded)}

/* ⑤ Flagship — 人物卡 */
.charcard{position:relative;overflow:hidden;background:linear-gradient(155deg,#FCFAF4,#F2E8DA);border:1px solid var(--bd);border-radius:16px;padding:22px 22px 20px;margin:26px 0}
.charcard::before{content:attr(data-seal);position:absolute;right:-12px;bottom:-34px;font-family:var(--han);font-size:150px;color:var(--clay);opacity:.07;font-weight:600;pointer-events:none}
.charcard .ttl{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--bd);padding-bottom:12px;margin-bottom:13px;position:relative;z-index:2}
.charcard .ttl .zh{font-family:var(--han);font-size:30px;color:var(--cinnabar);font-weight:600}
.charcard .ttl .en{font-family:var(--serif);font-size:21px;font-weight:600}
.charcard .ttl .py{font-size:13px;color:var(--ink3);margin-left:auto;font-style:italic}
.charcard dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:14px;position:relative;z-index:2;margin:0}
.charcard dt{color:var(--clayd);font-weight:600;font-size:11px;letter-spacing:.6px;text-transform:uppercase;padding-top:2px}
.charcard dd{color:var(--ink);margin:0}
.charcard dd .zh{font-family:var(--han);color:var(--cinnabar)}

/* ⑤ Flagship — 时间线 */
.timeline{position:relative;margin:22px 0 10px;padding-left:24px}
.timeline::before{content:'';position:absolute;left:6px;top:6px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--clay),var(--gold))}
.timeline .tl{position:relative;padding:0 0 19px 10px}
.timeline .tl:last-child{padding-bottom:2px}
.timeline .tl::before{content:'';position:absolute;left:-22px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--clay);z-index:2;transition:.2s}
.timeline .tl:hover::before{background:var(--clay);transform:scale(1.25)}
.timeline .tl .step{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--clayd);font-weight:600}
.timeline .tl h4{font-family:var(--serif);font-size:18px;font-weight:600;margin:1px 0 3px}
.timeline .tl h4 .zh{font-family:var(--han);color:var(--cinnabar);font-size:16px;margin-left:7px;font-weight:600}
.timeline .tl p{font-size:14px;color:var(--ink2);line-height:1.6;margin:0}

/* ⑤ Flagship — 汉字拼音表 */
.glossary{border:1px solid var(--bd);border-radius:14px;overflow:hidden;margin:24px 0}
.glossary .gh{background:var(--claybg);padding:11px 16px;font-family:var(--serif);font-weight:600;font-size:16px;color:var(--clayd);display:flex;align-items:center;gap:8px}
.glossary .gr{display:grid;grid-template-columns:64px 132px 1fr;gap:4px 16px;align-items:baseline;padding:11px 16px;border-top:1px solid var(--bd);font-size:14px}
.glossary .gr:nth-child(even){background:var(--surface)}
.glossary .gr .zh{font-family:var(--han);font-size:20px;color:var(--cinnabar);font-weight:600}
.glossary .gr .py{font-style:italic;color:var(--clayd);font-size:13px}
.glossary .gr .mn{color:var(--ink2)}

/* ⑤ Flagship — Quiz */
.quiz{background:var(--surface);border:1px solid var(--bd);border-radius:16px;padding:22px;margin:28px 0}
.quiz .qh{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--clayd);margin-bottom:3px;display:flex;align-items:center;gap:8px}
.quiz .qsub{font-size:13px;color:var(--ink3);margin-bottom:18px}
.quiz .q{margin-bottom:20px}
.quiz .q:last-child{margin-bottom:0}
.quiz .q .qq{font-weight:600;font-size:15.5px;margin-bottom:10px;color:var(--ink)}
.quiz .q .qq .n{color:var(--clay);font-family:var(--serif);font-weight:700;margin-right:7px}
.quiz .opt{display:block;width:100%;text-align:left;background:var(--paper);border:1px solid var(--bd);border-radius:10px;padding:11px 14px;font-size:14px;color:var(--ink);margin-bottom:8px;cursor:pointer;font-family:inherit;transition:.15s}
.quiz .opt:hover{border-color:var(--clay)}
.quiz .opt .mark{float:right;font-weight:700;margin-left:10px}
.quiz .opt.correct{background:var(--jadebg);border-color:var(--jade);color:var(--jaded);font-weight:500}
.quiz .opt.wrong{background:#F6E3DE;border-color:var(--clay);color:var(--clayd)}
.quiz .opt:disabled{cursor:default}
.quiz .exp{display:none;font-size:13.5px;color:var(--jaded);background:var(--jadebg);border:1px solid #CDE0D6;border-radius:8px;padding:10px 12px;margin-top:6px;line-height:1.6}
.quiz .q.answered .exp{display:block}

/* 视觉锤 · 手机端 */
@media(max-width:720px){
  .story-hero .wrap{padding:38px 0 24px}
  .story-hero h1{font-size:32px;max-width:100%}
  .story-hero .han-t{font-size:18px}
  .story-hero .lead{font-size:15.5px}
  .living-hanzi{font-size:210px;opacity:.05;right:-10%}
  .charcard{padding:18px}
  .charcard .ttl{flex-wrap:wrap;gap:8px}
  .charcard .ttl .py{margin-left:0;width:100%}
  .charcard dl{grid-template-columns:1fr;gap:2px 0}
  .charcard dt{margin-top:9px}
  .glossary .gr{grid-template-columns:auto 1fr;gap:2px 12px}
  .glossary .gr .mn{grid-column:1/-1;font-size:13px;color:var(--ink2)}
  .quiz{padding:17px}
  .note{padding:14px 15px 14px 46px;font-size:14px}
}