/* ==========================================================================
   《故都的秋》在线课堂 · 样式
   纸感秋意 + 楷体；文字尺寸统一走 --fs 变量（字号控件在后续步骤接入）
   ========================================================================== */

:root{
  --paper:#f7f1e3; --paper2:#efe4cd; --ink:#2f2820; --ink2:#5b5044;
  --zhe:#a8552f; --zhe2:#c9784a; --gold:#b8860b; --line:#d8c8ab;
  --ok:#3f7d4e; --bad:#b34a3a;
  --fs-user:1;         /* 字号控件写入的基准系数（第三步接入） */
  --fs:var(--fs-user); /* 全站文字缩放系数；放大讲解层会在此基础上加成 */
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Kaiti SC","KaiTi","STKaiti","Songti SC","SimSun",serif;
  font-size:calc(16px * var(--fs));
  color:var(--ink); line-height:1.85; min-height:100vh;
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(217,166,121,.22), transparent 42%),
    radial-gradient(circle at 85% 75%, rgba(168,85,47,.14), transparent 48%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  background-attachment:fixed;
}
h1,h2,h3,h4{margin:0 0 .5em;font-weight:700;letter-spacing:.06em;}
button{font-family:inherit;cursor:pointer;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#c9b48c;border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

/* ============ 顶栏 ============ */
#topbar{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:6px 10px;
  padding:8px 14px;
  background:linear-gradient(180deg,#f3e8d2,#e8d9bb);
  border-bottom:2px solid var(--line);
  box-shadow:0 3px 14px rgba(90,70,40,.18);
}
.brand{font-size:calc(17px * var(--fs));font-weight:700;color:var(--zhe);letter-spacing:.12em;}
.brand span{font-size:calc(13px * var(--fs));color:var(--ink2);font-weight:400;letter-spacing:0;}
.hud{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.miniBtn{font-size:calc(13px * var(--fs));padding:4px 12px;border-radius:18px;border:1px solid var(--zhe);
  background:#fff8ec;color:var(--zhe);transition:.22s;white-space:nowrap;}
.miniBtn:hover{background:var(--zhe);color:#fff;}
.miniBtn[aria-expanded="true"]{background:var(--zhe);color:#fff;}
.miniBtn.ghost{border-color:#bfae8e;color:var(--ink2);}
.miniBtn.ghost:hover{background:#bfae8e;color:#fff;}

/* ============ 苹果毛玻璃控件（顶栏 / 讲台工具条 / 口令输入） ============ */
.glassBar{background:rgba(250,244,232,.62) !important;
  -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
  border-bottom:1px solid rgba(255,255,255,.55) !important;}
.miniBtn,.fontCtl,.editBtn,.focusNav,.penBtn,.aiClose,.glassBtn{
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.52));
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 1px 2px rgba(60,45,25,.10), 0 8px 20px rgba(60,45,25,.10), inset 0 1px 0 rgba(255,255,255,.85);
  color:#4a4037;transition:background .2s, box-shadow .2s, color .2s, transform .12s;}
.miniBtn:hover,.editBtn:hover,.focusNav:hover,.penBtn:hover,.aiClose:hover,.glassBtn:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.7));
  color:var(--zhe);box-shadow:0 2px 4px rgba(60,45,25,.12), 0 12px 26px rgba(60,45,25,.14), inset 0 1px 0 rgba(255,255,255,.95);}
.miniBtn:active,.editBtn:active,.focusNav:active,.penBtn:active,.glassBtn:active{transform:translateY(1px);}
.miniBtn[aria-expanded="true"],.editBtn.solid,.focusNav.close,.penBtn[aria-pressed="true"]{
  background:linear-gradient(180deg, rgba(190,110,70,.92), rgba(168,85,47,.88));
  border-color:rgba(255,255,255,.5);color:#fff;
  box-shadow:0 2px 6px rgba(120,60,30,.28), inset 0 1px 0 rgba(255,255,255,.35);}
.miniBtn[aria-expanded="true"]:hover,.editBtn.solid:hover,.focusNav.close:hover,.penBtn[aria-pressed="true"]:hover{
  color:#fff;filter:brightness(1.06);}
.fontCtl{gap:3px;padding:2px 5px;border-radius:999px;}
.fontBtn{border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.5);color:#4a4037;
  border-radius:999px;-webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);}
.fontBtn:hover{background:rgba(255,255,255,.85);color:var(--zhe);}
.fontLabel{color:#6b5b46;}
.penColor{border:2px solid rgba(255,255,255,.9);
  box-shadow:0 1px 3px rgba(60,45,25,.25), 0 0 0 1px rgba(255,255,255,.35);}
.penColor.on{box-shadow:0 0 0 2px rgba(255,255,255,.95), 0 0 0 4px rgba(168,85,47,.55);}

/* 口令输入与弹窗的毛玻璃质感 */
.modalBox{-webkit-backdrop-filter:blur(26px) saturate(165%);
  backdrop-filter:blur(26px) saturate(165%);
  background:linear-gradient(180deg, rgba(255,253,248,.82), rgba(245,236,219,.76)) !important;
  border:1px solid rgba(255,255,255,.75) !important;
  box-shadow:0 24px 70px rgba(50,35,15,.42), inset 0 1px 0 rgba(255,255,255,.9) !important;}
#zxPw{padding:12px 16px;border-radius:14px;
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.58));
  border:1px solid rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(60,45,25,.12);
  font-size:calc(16px * var(--fs));letter-spacing:.18em;color:#3a3026;}
#zxPw::placeholder{letter-spacing:0;color:#a99877;}
#zxPw:focus{border-color:rgba(255,255,255,.95);
  box-shadow:0 0 0 4px rgba(168,85,47,.18), inset 0 1px 0 rgba(255,255,255,.95);}
.modalBox .btn{-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.6));
  border:1px solid rgba(255,255,255,.75);color:#4a4037;
  box-shadow:0 1px 2px rgba(60,45,25,.10), inset 0 1px 0 rgba(255,255,255,.9);}
.modalBox .btn:hover{background:rgba(255,255,255,.95);color:var(--zhe);}
.modalBox .btn.solid{background:linear-gradient(180deg, rgba(190,110,70,.94), rgba(168,85,47,.9));color:#fff;
  border-color:rgba(255,255,255,.5);}
.modalBox .btn.solid:hover{color:#fff;}

/* 字号控件 */
.fontCtl{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:18px;
  background:#fff8ec;padding:1px 4px;}
.fontBtn{border:none;background:transparent;color:var(--zhe);font-family:inherit;
  font-size:calc(13px * var(--fs));padding:2px 7px;border-radius:14px;line-height:1.5;}
.fontBtn:hover{background:var(--zhe);color:#fff;}
.fontLabel{font-size:calc(12px * var(--fs));color:var(--ink2);min-width:3.2em;text-align:center;
  user-select:none;}

/* ============ 编辑模式 ============ */
#editBar{position:fixed;left:0;right:0;top:0;z-index:210;display:none;
  align-items:center;gap:8px;flex-wrap:wrap;padding:7px 14px;
  background:linear-gradient(180deg,#f6e2c8,#eed6b4);border-bottom:2px solid var(--zhe2);
  box-shadow:0 3px 16px rgba(120,80,40,.28);}
body.editing #editBar{display:flex;}
body.editing #topbar{top:46px;}
body.editing #app{padding-top:132px;}
#editBar .tag{font-size:calc(13px * var(--fs));color:#7a4a22;font-weight:700;letter-spacing:.04em;}
.editBtn{font-size:calc(13px * var(--fs));padding:4px 14px;border-radius:16px;border:1px solid var(--zhe);
  background:#fff8ec;color:var(--zhe);font-family:inherit;}
.editBtn:hover{background:var(--zhe);color:#fff;}
.editBtn.solid{background:var(--zhe);color:#fff;}
.editBtn.solid:hover{filter:brightness(1.08);}
body.editing [data-edit-path]{outline:1px dashed rgba(168,85,47,.55);outline-offset:2px;
  cursor:pointer;border-radius:4px;transition:background .15s;}
body.editing [data-edit-path]:hover{background:rgba(246,226,196,.55);}
[data-edit-path].justSaved{background:#e5f3e7;transition:background .4s;}
.editHint{font-size:calc(12px * var(--fs));color:#8a6a44;}
/* 字段编辑弹窗 */
.fieldEditBox textarea,.fieldEditBox input[type=text]{font-size:calc(15px * var(--fs));}
.fieldEditBox .ProseMirror{min-height:120px;padding:12px 14px;background:#fffdf8;border:1px solid var(--line);
  border-radius:10px;font-size:calc(16px * var(--fs));line-height:1.9;outline:none;}
.fieldEditBox .ProseMirror:focus{border-color:var(--zhe2);box-shadow:0 0 0 3px rgba(201,120,74,.15);}
.fieldEditBox .ProseMirror p{margin:.3em 0;}
.fieldEditBox .ProseMirror a{color:var(--zhe);}

/* ============ 布局 ============ */
#app{padding:88px 16px 70px;max-width:1080px;margin:0 auto;}
@media(min-width:1151px){
  #app{max-width:none;margin-left:18px;}
}
.card{
  background:rgba(255,251,242,.86);
  border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;margin-bottom:20px;
  box-shadow:0 4px 18px rgba(120,95,60,.10);
  position:relative;
}
.secTitle{font-size:calc(21px * var(--fs));color:var(--zhe);border-left:6px solid var(--zhe2);
  padding-left:12px;margin-bottom:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.secTitle small{font-size:calc(12px * var(--fs));color:var(--ink2);font-weight:400;letter-spacing:0;}
/* 认知冲突题干：与选项统一字号，跟随全局字号缩放 */
#hookQuestion{font-size:calc(15px * var(--fs));line-height:1.9;}
.artHead{color:var(--zhe);font-size:calc(15px * var(--fs));}
/* 跨域视窗里 SVG 图上的文字也跟随字号（CSS 优先于 SVG 的 font-size 属性） */
.svgLabel{font-size:calc(15px * var(--fs));}
.svgLabel.svgSmall{font-size:calc(12px * var(--fs));}
.svgYear{font-size:calc(13px * var(--fs));}
p{margin:.55em 0;}
.tip{font-size:calc(13px * var(--fs));color:var(--ink2);background:#f6eeda;border-left:4px solid var(--zhe2);
  padding:8px 12px;border-radius:0 8px 8px 0;margin:10px 0;}

/* ============ 首页 ============ */
#hero{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line);
  min-height:440px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#fbf5e7,#efe0c4);padding:40px 18px;text-align:center;}
#inkCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;}
.heroInner{position:relative;z-index:2;}
.heroTitle{font-size:calc(clamp(34px,7vw,68px) * var(--fs));letter-spacing:.22em;color:#3a2e22;
  text-shadow:0 3px 16px rgba(168,85,47,.25);margin-bottom:6px;}
.heroTitle span{display:inline-block;opacity:0;transform:translateY(26px);
  animation:charIn .9s forwards;}
@keyframes charIn{to{opacity:1;transform:translateY(0);}}
.heroSub{color:var(--ink2);letter-spacing:.3em;font-size:calc(14px * var(--fs));margin-bottom:26px;opacity:0;
  animation:fadeIn 1.4s 1.1s forwards;}
@keyframes fadeIn{to{opacity:1;}}
.pulseBtn{
  font-size:calc(17px * var(--fs));letter-spacing:.2em;padding:13px 42px;border-radius:40px;border:2px solid var(--zhe);
  background:linear-gradient(180deg,#fff8ec,#f0e0c4);color:var(--zhe);font-weight:700;
  animation:pulse 2.1s infinite;position:relative;
}
.pulseBtn:hover{background:var(--zhe);color:#fff;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(168,85,47,.42);}50%{box-shadow:0 0 0 18px rgba(168,85,47,0);}}
.poem{font-size:calc(15px * var(--fs));color:#6b5b46;letter-spacing:.14em;margin-top:20px;line-height:2;}

/* ============ 选项卡 ============ */
#tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 20px;}
@media(max-width:720px){
  #tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;}
  #tabs::-webkit-scrollbar{height:5px;}
}
.tab{padding:7px 18px;border-radius:22px;border:1px solid var(--line);background:#fffaf0;
  color:var(--ink2);font-size:calc(15px * var(--fs));transition:.2s;white-space:nowrap;flex:0 0 auto;}
.tab:hover{border-color:var(--zhe2);color:var(--zhe);}
.tab.active{background:linear-gradient(180deg,#c9784a,#a8552f);color:#fff;border-color:var(--zhe);
  box-shadow:0 4px 12px rgba(168,85,47,.32);}
.page{display:none;animation:fadeUp .45s;}
.page.active{display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ============ 通用组件 ============ */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;}
.langCard{background:linear-gradient(160deg,#fffdf7,#f4ead6);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;cursor:pointer;transition:.22s;position:relative;overflow:hidden;
  text-align:left;width:100%;}
.langCard:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(140,110,70,.22);border-color:var(--zhe2);}
.langCard .word{font-size:calc(19px * var(--fs));color:var(--zhe);font-weight:700;letter-spacing:.06em;}
.langCard .py{font-size:calc(12px * var(--fs));color:var(--ink2);letter-spacing:.1em;}
.langCard .hintTxt{font-size:calc(12px * var(--fs));color:#8b7a5f;margin-top:5px;}

details{border:1px solid var(--line);border-radius:10px;padding:8px 14px;margin-bottom:10px;
  background:#fffdf7;}
details summary{cursor:pointer;font-weight:700;color:var(--zhe);outline:none;font-size:calc(16px * var(--fs));}
details[open]{background:#fffaf0;}
details .body{padding:8px 4px 4px;font-size:calc(15px * var(--fs));color:#40372c;}

.threeStep{border-left:3px dashed var(--zhe2);padding-left:14px;margin:12px 0;}
.threeStep h4{color:var(--zhe);margin-bottom:4px;}

table.mis{width:100%;border-collapse:collapse;font-size:calc(14px * var(--fs));}
table.mis th,table.mis td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top;}
table.mis th{background:#f0e4cb;color:var(--zhe);}
.bad{color:var(--bad);}
.good{color:var(--ok);}
.small{font-size:calc(13px * var(--fs));color:var(--ink2);}
.hr{height:1px;background:var(--line);margin:16px 0;}

/* 选项 */
.opt{display:block;width:100%;text-align:left;padding:9px 14px;margin:7px 0;border-radius:9px;
  border:1px solid var(--line);background:#fffdf8;font-size:calc(15px * var(--fs));transition:.18s;font-family:inherit;color:var(--ink);}
.opt:hover{border-color:var(--zhe2);background:#fdf3e2;}
.opt.right{background:#e5f3e7;border-color:var(--ok);color:#245c33;font-weight:700;}
.opt.wrong{background:#fbe9e6;border-color:var(--bad);color:#8f2f22;}
.explain{margin-top:8px;font-size:calc(14px * var(--fs));background:#f6eeda;border-left:4px solid var(--gold);
  padding:8px 12px;border-radius:0 8px 8px 0;display:none;}
.explain.show{display:block;}
.qBox{border-bottom:1px dashed var(--line);padding-bottom:14px;margin-bottom:14px;}
.qBox:last-child{border-bottom:none;}
.qTitle{font-weight:700;color:#3a3026;margin-bottom:6px;}

/* 排序 */
.sortItem{display:flex;align-items:center;gap:10px;padding:9px 14px;margin:7px 0;border-radius:9px;
  border:1px solid var(--line);background:#fffdf8;cursor:pointer;transition:.18s;user-select:none;
  font-size:calc(15px * var(--fs));}
.sortItem:hover{border-color:var(--zhe2);}
.sortItem.sel{background:#fdeccd;border-color:var(--zhe);box-shadow:0 0 0 2px rgba(168,85,47,.18);}
.sortItem .idx{width:24px;height:24px;line-height:24px;text-align:center;border-radius:50%;
  background:#e8d9bb;color:var(--zhe);font-size:calc(13px * var(--fs));flex:0 0 auto;}

/* 连线 */
.matchWrap{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:560px){.matchWrap{grid-template-columns:1fr;}}
.matchCol{display:flex;flex-direction:column;gap:8px;}
.matchItem{padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:#fffdf8;
  cursor:pointer;font-size:calc(14px * var(--fs));transition:.18s;}
.matchItem:hover{border-color:var(--zhe2);}
.matchItem.sel{background:#fdeccd;border-color:var(--zhe);}
.matchItem.done{background:#e5f3e7;border-color:var(--ok);color:#245c33;cursor:default;}

/* 证据墙 */
.evSent{padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:#fffdf8;
  cursor:pointer;font-size:calc(14px * var(--fs));margin:6px 0;transition:.18s;text-align:left;width:100%;}
.evSent:hover{border-color:var(--zhe2);}
.evSent.sel{background:#fdeccd;border-color:var(--zhe);}
.evSent.placed{opacity:.45;cursor:default;}
.bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:12px;}
.bin{border:2px dashed var(--zhe2);border-radius:10px;padding:10px;min-height:110px;background:#fffcf4;transition:.2s;}
.bin.over{background:#fdeccd;}
.bin h5{margin:0 0 6px;color:var(--zhe);font-size:calc(15px * var(--fs));}
.bin .tag{font-size:calc(12.5px * var(--fs));background:#f2e6cd;border-radius:6px;padding:3px 7px;margin:3px 3px 0 0;
  display:inline-block;line-height:1.5;}

/* 白板 */
.boardCols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;}
.boardCol{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fffdf7;}
.boardCol h4{color:var(--zhe);font-size:calc(16px * var(--fs));margin-bottom:6px;}
.boardCol ul{list-style:none;padding:0;margin:8px 0 0;font-size:calc(13.5px * var(--fs));}
.boardCol li{background:#f6eeda;border-radius:7px;padding:5px 9px;margin-bottom:6px;
  border-left:3px solid var(--zhe2);}
textarea,input[type=text],input[type=password],select{width:100%;font-family:inherit;font-size:calc(14.5px * var(--fs));padding:9px 11px;
  border:1px solid var(--line);border-radius:9px;background:#fffdf8;color:var(--ink);resize:vertical;}
textarea:focus,input:focus,select:focus{outline:none;border-color:var(--zhe2);box-shadow:0 0 0 3px rgba(201,120,74,.15);}
.btn{padding:8px 20px;border-radius:22px;border:1px solid var(--zhe);background:#fff8ec;color:var(--zhe);
  font-size:calc(14.5px * var(--fs));transition:.2s;font-family:inherit;}
.btn:hover{background:var(--zhe);color:#fff;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn.solid{background:linear-gradient(180deg,#c9784a,#a8552f);color:#fff;border-color:var(--zhe);}
.btn.solid:hover{filter:brightness(1.08);}

/* ============ 3D 覆盖层 ============ */
.overlay{position:fixed;inset:0;background:rgba(35,28,20,.86);z-index:500;
  display:flex;align-items:center;justify-content:center;padding:20px;}
.overlay.hidden{display:none;}
.overlayInner{position:relative;width:100%;max-width:1000px;height:82vh;border-radius:14px;
  overflow:hidden;border:3px solid #c9b48c;box-shadow:0 20px 60px rgba(0,0,0,.55);
  background:linear-gradient(180deg,#f8f1e1,#e9dcc2);}
#threeHost{position:absolute;inset:0;}
#hsLayer{position:absolute;inset:0;pointer-events:none;}
.hotspot{position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;
  background:rgba(255,248,236,.94);border:1.5px solid var(--zhe);border-radius:20px;
  padding:3px 11px;font-size:calc(13px * var(--fs));color:var(--zhe);white-space:nowrap;
  transform:translate(-50%,-50%);transition:background .2s;box-shadow:0 2px 10px rgba(120,80,40,.3);}
.hotspot:hover{background:var(--zhe);color:#fff;}
.hotspot::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;
  margin:-5px 0 0 -5px;border-radius:50%;background:rgba(168,85,47,.35);
  animation:halo 1.8s infinite;z-index:-1;}
@keyframes halo{0%{transform:scale(1);opacity:.8;}100%{transform:scale(3.4);opacity:0;}}
.hint{position:absolute;left:12px;bottom:12px;background:rgba(47,40,32,.72);color:#f7f1e3;
  font-size:calc(13px * var(--fs));padding:6px 14px;border-radius:20px;letter-spacing:.06em;}
.closeBtn{position:absolute;right:12px;top:12px;z-index:5;background:rgba(47,40,32,.78);color:#f7f1e3;
  border:none;border-radius:20px;padding:6px 16px;font-size:calc(14px * var(--fs));font-family:inherit;}
.closeBtn:hover{background:var(--zhe);}
.fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:10px;color:#6b5b46;font-size:calc(16px * var(--fs));text-align:center;padding:20px;}
.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(247,241,227,.94);color:var(--zhe);font-size:calc(17px * var(--fs));letter-spacing:.2em;z-index:4;}

/* ============ 放大讲解（讲台流） ============ */
#focusOverlay{--fs:calc(var(--fs-user) * 1.3);}
.focus{position:fixed;inset:0;z-index:500;background:#efe6d4;
  display:flex;flex-direction:column;}
.focus.hidden{display:none;}
.focusBar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:8px 14px;background:linear-gradient(180deg,#f3e8d2,#e8d9bb);
  border-bottom:2px solid var(--line);box-shadow:0 2px 10px rgba(90,70,40,.18);}
.focusTitle{display:flex;align-items:baseline;gap:10px;min-width:0;}
.focusTitle b{color:var(--zhe);font-size:calc(17px * var(--fs));letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw;}
.focusCount{font-size:calc(12.5px * var(--fs));color:var(--ink2);}
.focusTools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.focusSep{width:1px;height:20px;background:var(--line);margin:0 4px;}
.focusNav,.penBtn{font-size:calc(13px * var(--fs));padding:5px 12px;border-radius:16px;
  border:1px solid var(--line);background:#fffdf8;color:var(--ink2);font-family:inherit;transition:.18s;}
.focusNav:hover,.penBtn:hover{border-color:var(--zhe2);color:var(--zhe);}
.focusNav.close{background:var(--zhe);color:#fff;border-color:var(--zhe);}
.focusNav.close:hover{filter:brightness(1.08);}
.penBtn[aria-pressed="true"]{background:var(--zhe);color:#fff;border-color:var(--zhe);}
.penColors{display:flex;gap:4px;align-items:center;}
.penColors[hidden]{display:none;}
.penColor{width:20px;height:20px;border-radius:50%;border:2px solid #fff;background:var(--c);
  box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0;}
.penColor.on{box-shadow:0 0 0 2px var(--zhe);}
.focusStage{flex:1;overflow:auto;padding:22px 18px 60px;}
.focusScroll{position:relative;max-width:1080px;margin:0 auto;}
#focusContent::before{content:"";display:block;}
/* 批注层：铺满整个放大页面（工具栏以下全部区域），与内容是否滚动无关 */
#penCanvas{position:absolute;left:0;top:0;z-index:5;pointer-events:none;touch-action:none;}
.focus.pen-on #penCanvas{pointer-events:auto;cursor:crosshair;}
.focus.pen-eraser #penCanvas{cursor:cell;}

/* 整页批注层（不放大时使用）：顶栏以下铺满，位于内容之上、弹窗之下 */
#pagePenCanvas{position:fixed;left:0;top:0;z-index:150;pointer-events:none;touch-action:none;}
body.page-pen-on #pagePenCanvas{pointer-events:auto;cursor:crosshair;}
body.page-pen-eraser #pagePenCanvas{cursor:cell;}
.penDock{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:560;
  display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;
  -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.58));
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 10px 30px rgba(60,45,25,.22), inset 0 1px 0 rgba(255,255,255,.9);}
.penDock.hidden{display:none;}
.penDock .penBtn{font-size:calc(13px * var(--fs));padding:5px 12px;border-radius:16px;
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.7);color:#4a4037;font-family:inherit;}
.penDock .penBtn:hover{background:#fff;color:var(--zhe);}
.penDock .penBtn[aria-pressed="true"]{background:linear-gradient(180deg, rgba(190,110,70,.94), rgba(168,85,47,.9));
  color:#fff;border-color:rgba(255,255,255,.5);}
.penDock .penColor{width:22px;height:22px;border-radius:50%;border:2px solid #fff;background:var(--c);
  box-shadow:0 0 0 1px rgba(216,200,171,.9);cursor:pointer;padding:0;}
.penDock .penColor.on{box-shadow:0 0 0 2px rgba(255,255,255,.95), 0 0 0 4px rgba(168,85,47,.55);}
@media(max-width:720px){.penDock{width:calc(100vw - 24px);justify-content:center;flex-wrap:wrap;bottom:10px;}}
#focusContent > *{margin-bottom:0 !important;box-shadow:0 6px 26px rgba(120,95,60,.16);}
.focus #focusContent .blockFocusBtn{display:none;}

/* 每个内容块右上角的“放大讲解”按钮 */
.blockTools{position:absolute;right:8px;top:8px;z-index:6;display:flex;gap:6px;}
.blockFocusBtn{font-size:calc(12px * var(--fs));line-height:1;padding:5px 9px;border-radius:14px;
  border:1px solid var(--line);background:rgba(255,253,248,.9);color:var(--ink2);
  font-family:inherit;opacity:.42;transition:.18s;white-space:nowrap;
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);}
.card:hover > .blockTools .blockFocusBtn,.qBox:hover > .blockTools .blockFocusBtn,
.blockTools:hover .blockFocusBtn,.blockFocusBtn:focus-visible{opacity:1;border-color:var(--zhe2);color:var(--zhe);}
.blockResetBtn{color:#8a6a44;}
.qBox{position:relative;}
@media(hover:none){.blockFocusBtn{opacity:.8;}}

/* ============ AI 小书童（80% 浮层） ============ */
.aiBackdrop{position:fixed;inset:0;z-index:540;background:rgba(35,28,20,.5);}
.aiBackdrop.hidden{display:none;}
#aiPanel{position:fixed;left:50%;top:50%;z-index:550;
  width:min(80vw,1120px);height:min(80vh,780px);
  background:rgba(255,251,242,.99);border:2px solid var(--line);border-radius:16px;
  box-shadow:0 22px 60px rgba(60,45,25,.45);display:flex;flex-direction:column;overflow:hidden;
  transform:translate(-50%,-50%) scale(.96);opacity:0;visibility:hidden;
  transition:transform .24s ease,opacity .24s ease,visibility .24s;}
body.ai-open #aiPanel{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible;}
.aiClose{border:none;background:transparent;color:var(--ink2);font-size:calc(15px * var(--fs));
  padding:2px 6px;border-radius:8px;font-family:inherit;line-height:1;}
.aiClose:hover{background:#e6d6b6;color:var(--zhe);}
.aiHead{padding:10px 12px;background:linear-gradient(180deg,#f3e8d2,#e9dabc);
  border-bottom:1px solid var(--line);}
.aiHead .t{font-size:calc(16px * var(--fs));color:var(--zhe);font-weight:700;display:flex;align-items:center;gap:6px;}
.modeSwitch{display:flex;gap:6px;margin-top:8px;}
.modeSwitch button{flex:1;font-size:calc(12.5px * var(--fs));padding:4px 0;border-radius:16px;border:1px solid var(--line);
  background:#fffdf8;color:var(--ink2);font-family:inherit;}
.modeSwitch button.on{background:var(--zhe);color:#fff;border-color:var(--zhe);}
.aiTabs{display:flex;border-bottom:1px solid var(--line);background:#faf3e5;}
.aiTabs button{flex:1;padding:7px 0;font-size:calc(13px * var(--fs));border:none;background:transparent;color:var(--ink2);
  border-bottom:2px solid transparent;font-family:inherit;}
.aiTabs button.on{color:var(--zhe);border-bottom-color:var(--zhe);font-weight:700;}
.aiBody{flex:1;overflow-y:auto;padding:10px 12px;}
#msgList{display:flex;flex-direction:column;gap:9px;}
.msg{font-size:calc(14px * var(--fs));padding:9px 12px;border-radius:11px;line-height:1.75;white-space:pre-wrap;word-break:break-word;}
.msg.ai{background:#f4ead6;border:1px solid var(--line);border-top-left-radius:3px;}
.msg.me{background:#e3efdd;border:1px solid #b9d3ae;align-self:flex-end;border-top-right-radius:3px;max-width:88%;}
.msg.sys{background:#fdf1e2;border:1px dashed var(--zhe2);font-size:calc(13px * var(--fs));color:var(--ink2);}
.aiFoot{padding:9px 10px;border-top:1px solid var(--line);background:#faf3e5;}
.aiInputRow{display:flex;gap:6px;}
.aiInputRow input{flex:1;font-size:calc(13.5px * var(--fs));padding:7px 10px;}
.aiInputRow button{padding:7px 14px;font-size:calc(13.5px * var(--fs));border-radius:18px;border:1px solid var(--zhe);
  background:var(--zhe);color:#fff;font-family:inherit;}
.quickRow{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px;}
.quickRow button{font-size:calc(12px * var(--fs));padding:3px 10px;border-radius:14px;border:1px solid var(--line);
  background:#fffdf8;color:var(--ink2);font-family:inherit;}
.quickRow button:hover{border-color:var(--zhe2);color:var(--zhe);}

/* ============ 弹窗 & toast ============ */
.modalMask{position:fixed;inset:0;background:rgba(35,28,20,.6);z-index:600;
  display:flex;align-items:center;justify-content:center;padding:18px;}
.modalMask.hidden{display:none;}
/* 弹窗：占页面宽度约一半，文字在全局字号基础上再放大一档，便于投影讲解 */
.modalBox{background:linear-gradient(160deg,#fffdf7,#f3e8d2);border:2px solid var(--line);
  --fs:calc(var(--fs-user) * 1.4);
  font-size:calc(16px * var(--fs));
  border-radius:18px;width:50vw;max-width:1280px;min-width:min(520px,92vw);
  max-height:84vh;overflow-y:auto;padding:30px 36px;
  box-shadow:0 18px 50px rgba(0,0,0,.4);animation:popIn .32s;}
@keyframes popIn{from{transform:scale(.9);opacity:0;}to{transform:scale(1);opacity:1;}}
.modalBox h3{color:var(--zhe);font-size:calc(21px * var(--fs));line-height:1.6;}
.modalBox p{line-height:2;}
.modalBox .tip{line-height:2;padding:12px 16px;margin:14px 0;}
.modalBox .small{line-height:1.9;}
@media(max-width:720px){
  .modalBox{width:92vw;min-width:0;padding:20px 18px;--fs:calc(var(--fs-user) * 1.2);}
}

#toastBox{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:900;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:92vw;}
.toast{background:rgba(47,40,32,.92);color:#f7f1e3;padding:8px 22px;border-radius:22px;
  font-size:calc(14px * var(--fs));animation:toastIn .3s;letter-spacing:.06em;}
.toast.out{opacity:0;transition:opacity .4s;}
@keyframes toastIn{from{transform:translateY(14px);opacity:0;}to{transform:none;opacity:1;}}

/* ============ 思维导图 ============ */
.mind{font-size:calc(14.5px * var(--fs));}
.mind ul{list-style:none;margin-left:16px;border-left:2px dotted var(--zhe2);padding-left:14px;}
.mind li{position:relative;margin:6px 0;}
.mind li::before{content:"◆";position:absolute;left:-19px;color:var(--zhe2);font-size:9px;top:7px;}
.mindRoot{font-weight:700;color:var(--zhe);font-size:calc(16px * var(--fs));}
.mind .node{cursor:pointer;}
.mind .node::after{content:" ▾";color:var(--zhe2);font-size:.8em;}
.mind .node.collapsed::after{content:" ▸";}
.mind .node.leaf{cursor:default;}
.mind .node.leaf::after{content:"";}
.mind li.collapsed > ul{display:none;}

/* ============ 朗读 ============ */
#speakText{font-size:calc(16.5px * var(--fs));line-height:2.4;letter-spacing:.04em;background:#fffdf7;
  border:1px solid var(--line);border-radius:12px;padding:16px 18px;}

/* ============ 移动端细节 ============ */
@media(max-width:720px){
  #app{padding:96px 12px 60px;}
  .card{padding:16px 14px;border-radius:12px;}
  .heroTitle{font-size:calc(clamp(30px,11vw,48px) * var(--fs));}
  #hero{min-height:360px;padding:30px 14px;}
  #aiPanel{width:92vw;height:80vh;border-radius:14px;}
  .overlayInner{height:88vh;}
  .focusTitle b{max-width:52vw;}
  .focusBar{padding:6px 10px;gap:6px;}
  .focusTools{width:100%;justify-content:flex-start;}
  .focusNav,.penBtn{padding:4px 10px;}
  .focusStage{padding:14px 10px 50px;}
}