:root{
  color-scheme: light;
  --paper:#ece3cf; --paper-2:#e2d6bc; --paper-3:#f5efe1;
  --ink:#2c2822; --ink-2:#5b5244; --ink-3:#8a7e69;
  --line:rgba(86,70,46,.24); --line-2:rgba(86,70,46,.42);
  --seal:#ad3326; --seal-2:#c8553f; --gold:#a8844a; --moss:#5e7050;
  --glass:rgba(238,229,210,.84); --glass-2:rgba(238,229,210,.94);
  --shadow:0 6px 24px rgba(52,40,20,.16);
  --kai:var(--song);          /* 用户要求所有文字用宋体（2026-09-23），正文、标题都走宋体 */
  --brush:var(--song);
  --song:"BCY Song","Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
  --safe-b:max(14px,env(safe-area-inset-bottom));
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font-family:var(--kai);-webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:none}
button{font:inherit;color:inherit;cursor:pointer}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

#stage{position:fixed;inset:0;overflow:hidden}
#scroll{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
#scroll.dragging{cursor:grabbing}
#scroll.pointer{cursor:pointer}
#scroll:focus{outline:none}

/* ---------- 通用小药丸 ---------- */
.pill{position:fixed;z-index:30;display:flex;align-items:baseline;gap:8px;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(52,40,20,.08);letter-spacing:.12em;font-size:15px;transition:transform .2s,background .2s}
.pill:hover{background:var(--glass-2);transform:translateY(-1px)}
.top-left{top:max(18px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left))}
.top-right{top:max(18px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));border-radius:4px;padding:6px 12px}
#albumCount .lab{font-size:12px;color:var(--ink-2)}
#albumCount b{font-family:var(--song);font-weight:500;font-size:18px;color:var(--seal)}
#albumCount i{font-style:normal;font-size:12px;color:var(--ink-3)}
#albumCount.bump b{animation:bump .6s ease}
@keyframes bump{30%{transform:scale(1.5)}}

/* ---------- 底部控制条 ---------- */
#bar{position:fixed;z-index:30;left:50%;bottom:var(--safe-b);transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:5px;border:1px solid var(--line);border-radius:999px;background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--shadow)}
#bar button{display:grid;place-items:center;min-width:42px;height:40px;padding:0 10px;border:0;border-radius:999px;background:transparent;transition:background .18s}
#bar button:hover{background:rgba(120,98,60,.1)}
#bar button:active{background:rgba(120,98,60,.18)}
#bar button.word{grid-auto-flow:column;gap:5px;font-size:14px;letter-spacing:.1em}
#bar button.word svg{width:18px;height:18px}
#bar button[aria-pressed="true"]{background:rgba(44,40,34,.86);color:var(--paper-3)}
#bar button[disabled]{opacity:.32;cursor:default}
#bar .sep{width:1px;height:22px;background:var(--line);margin:0 4px}
#autoBtn .i-stop{display:none}
#autoBtn.on .i-stop{display:block}#autoBtn.on .i-play{display:none}
.tools{position:fixed;z-index:30;bottom:var(--safe-b);display:flex;gap:6px}
#leftTools{left:max(18px,env(safe-area-inset-left))}
#rightTools{right:max(18px,env(safe-area-inset-right))}
.tools button{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .18s,transform .18s}
.tools button:hover{background:var(--glass-2);transform:translateY(-1px)}
#soundBtn .i-on,#pauseBtn .i-play{display:none}
#soundBtn[aria-pressed="true"] .i-on,#pauseBtn[aria-pressed="true"] .i-play{display:block}
#soundBtn[aria-pressed="true"] .i-off,#pauseBtn[aria-pressed="true"] .i-pause{display:none}
#soundBtn[aria-pressed="true"],#zoomBtn[aria-pressed="true"],#pauseBtn[aria-pressed="true"]{background:rgba(44,40,34,.86);color:var(--paper-3)}

#track{position:fixed;z-index:29;left:0;right:0;bottom:0;height:3px;background:rgba(86,70,46,.12)}
#trackFill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(173,51,38,.25),rgba(173,51,38,.7))}
#track .tick{position:absolute;top:-2px;width:1px;height:7px;background:rgba(86,70,46,.45)}

/* ---------- 景点提示 ---------- */
#chips{position:absolute;inset:0;pointer-events:none;z-index:12}
.chip{position:absolute;left:0;top:0;pointer-events:auto;display:flex;align-items:center;gap:6px;padding:6px 13px 6px 9px;border:1px solid var(--line-2);border-radius:999px;background:rgba(245,239,225,.92);box-shadow:0 3px 14px rgba(52,40,20,.18);font-size:clamp(15px,1.3vh,21px);letter-spacing:.12em;white-space:nowrap;transform-origin:50% 100%;opacity:0;transition:opacity .35s,background-color .2s,border-color .2s,box-shadow .2s}
.chip.show{opacity:1}
.chip:hover{background:#fffdf7;border-color:var(--seal);box-shadow:0 5px 18px rgba(52,40,20,.26)}
.chip::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--seal);box-shadow:0 0 0 0 rgba(173,51,38,.5);animation:ping 2.2s infinite}
.chip.done::before{background:var(--moss);animation:none}
.chip::after{content:"";position:absolute;left:50%;bottom:-7px;width:1px;height:7px;background:var(--line-2)}
.chip.clamped::after{display:none}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(173,51,38,.45)}70%{box-shadow:0 0 0 9px rgba(173,51,38,0)}100%{box-shadow:0 0 0 0 rgba(173,51,38,0)}}
/* 画面里看得见、还没走到跟前的：只露一个小红点（点它迅哥儿自己走过去玩）；鼠标移上去、或指着画上那样东西时展开字 */
.chip.far{padding:8px;gap:0;background:rgba(245,239,225,.82)}
.chip.far::before{animation:none}   /* 远处的不闪，免得一屏好几个点一起闪；走到跟前的才闪 */
.chip.far .lab{display:none}
.chip.far:hover,.chip.far:focus-visible,.chip.far.hot{padding:6px 13px 6px 9px;gap:6px}
.chip.far:hover .lab,.chip.far:focus-visible .lab,.chip.far.hot .lab{display:inline}
.chip.hot{background:#fffdf7;border-color:var(--seal);box-shadow:0 5px 18px rgba(52,40,20,.26)}

/* ---------- 题跋（竖排原文） ---------- */
#inscription{position:absolute;z-index:14;top:max(62px,8vh);height:min(40vh,620px);writing-mode:vertical-rl;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:0 .5em;padding:6px 4px;font-size:clamp(16px,2.2vh,32px);line-height:1.8;letter-spacing:.14em;color:#231f1a;text-shadow:0 0 8px rgba(242,235,220,.9);background:rgba(241,234,218,.72);box-shadow:0 0 28px 22px rgba(241,234,218,.72);border-radius:10px;transition:opacity .6s;pointer-events:none}
#inscription.fade{opacity:0}
#inscription .seal{flex:none;writing-mode:vertical-rl;margin-left:12px;padding:5px 3px;border:1.5px solid var(--seal);border-radius:3px;color:var(--seal);font-family:var(--brush);font-weight:700;font-size:.82em;letter-spacing:.08em;line-height:1.15;text-shadow:none;background:rgba(245,239,225,.55)}
/* 还没轮到的句子不占地方（占着会把整页撑宽、把刚出来的句子挤走）；出来时淡入，翻页时这一页淡出 */
#inscription .s{display:none;flex:none;max-block-size:100%}
#inscription .s.on{display:block;animation:insIn .9s ease}
#inscription .s.leaving{opacity:0;transition:opacity .45s}
#inscription .s.gone{display:none}
#inscription.measure .s{display:block}
@keyframes insIn{from{opacity:0}}
#inscription .more{flex:none;writing-mode:vertical-rl;align-self:flex-start;margin-right:10px;padding:8px 5px;border:1px solid var(--line-2);border-radius:14px;background:rgba(245,239,225,.85);font-size:.72em;letter-spacing:.2em;pointer-events:auto;text-shadow:none}
#inscription .more:hover{background:var(--ink);color:var(--paper-3)}
#inscription .s.lit{color:#7a2419}
#inscription .w{text-emphasis:dot var(--seal);-webkit-text-emphasis:dot var(--seal);text-emphasis-position:left;-webkit-text-emphasis-position:left;cursor:help;pointer-events:auto}
#inscription .w:hover,#inscription .w.open{color:var(--seal)}
#inscription .note{margin-right:14px;font-size:.72em;color:var(--ink-2);letter-spacing:.1em}
#inscription .x{flex:none;writing-mode:horizontal-tb;align-self:flex-end;margin-right:12px;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;background:rgba(245,239,225,.7);font-size:14px;line-height:1;pointer-events:auto}
.py-pop{position:fixed;z-index:60;max-width:220px;padding:8px 12px;border:1px solid var(--line-2);border-radius:6px;background:var(--paper-3);box-shadow:var(--shadow);font-size:14px;line-height:1.5;pointer-events:none;writing-mode:horizontal-tb}
.py-pop b{display:block;font-family:var(--song);font-weight:500;color:var(--seal);font-size:15px;letter-spacing:.04em}

/* ---------- 人物说话 ---------- */
#bubbles{position:absolute;inset:0;pointer-events:none;z-index:15}
.bubble{position:absolute;left:0;top:0;max-height:max(300px,24vh);writing-mode:vertical-rl;padding:10px 7px;border:1px solid var(--line-2);border-radius:14px;background:rgba(247,242,230,.95);box-shadow:0 4px 16px rgba(52,40,20,.16);font-size:clamp(16px,1.5vh,24px);line-height:1.55;letter-spacing:.12em;opacity:0;transition:opacity .35s;transform-origin:50% 100%}
.bubble.show{opacity:1}
.bubble.big{font-family:var(--brush);font-weight:700;font-size:clamp(30px,2.8vh,44px);letter-spacing:.06em;color:var(--seal);padding:12px 8px}

#shout{position:absolute;z-index:40;left:50%;top:38%;transform:translate(-50%,-50%);font-family:var(--brush);font-weight:700;font-size:clamp(40px,8vw,96px);color:#2a2018;text-shadow:0 0 18px rgba(245,238,222,.95);white-space:nowrap;pointer-events:none}
#shout.go{animation:shout 2.6s ease forwards}
@keyframes shout{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}8%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}12%{transform:translate(-52%,-50%) scale(1)}16%{transform:translate(-48%,-50%)}20%{transform:translate(-51%,-50%)}24%{transform:translate(-50%,-50%)}80%{opacity:1}100%{opacity:0}}

/* ---------- 全卷（开场） ---------- */
#cover{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,#f3ecdc 0%,#e8dcc2 70%,#dccdae 100%);transition:opacity .9s,visibility .9s}
#cover::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none}
#cover.gone{opacity:0;visibility:hidden}
.cover-inner{position:relative;width:min(94vw,max(1180px,72vw));display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto;gap:18px 34px;align-items:center}
.cover-title{grid-row:1/3;writing-mode:vertical-rl;display:flex;flex-direction:column;align-items:flex-start;gap:14px;height:min(72vh,860px)}
.cover-title h1{margin:0;font-family:var(--brush);font-weight:700;font-size:clamp(44px,7.4vh,120px);line-height:1.25;letter-spacing:.06em;display:block}
.cover-title h1 span{display:block}
.cover-title h1 span:last-child{margin-top:1.4em}
.cover-title .by{margin:0;font-size:clamp(17px,1.6vh,26px);letter-spacing:.3em;color:var(--ink-2)}
.cover-title .hint{margin:0;margin-top:auto;padding:6px 3px;border:1.5px solid var(--seal);border-radius:3px;color:var(--seal);font-size:clamp(15px,1.4vh,22px);letter-spacing:.2em}
.cover-scroll{position:relative;min-width:0;display:flex;align-items:stretch;opacity:0;transform:scaleX(.08);transition:transform 1.4s cubic-bezier(.6,.05,.2,1),opacity .4s}
#cover.ready .cover-scroll{opacity:1;transform:none}
.roller{width:16px;flex:none;border-radius:8px;background:linear-gradient(90deg,#4a3422,#7b5a3a 40%,#3c2a1b);box-shadow:0 4px 10px rgba(40,26,12,.35)}
.scroll-view{position:relative;flex:1;min-width:0;padding:12px 0;background:#d9c7a0;box-shadow:inset 0 0 0 1px rgba(80,60,30,.25)}
#thumb{display:block;width:100%;height:auto;background:var(--paper)}
#spots{position:absolute;inset:12px 0}
.spot{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border:0;background:none}
.spot b{font-weight:400;padding:.3em .65em;border:1px solid var(--line-2);border-radius:999px;background:rgba(245,239,225,.92);font-size:clamp(14px,1.25vh,20px);letter-spacing:.14em;white-space:nowrap;box-shadow:0 2px 8px rgba(52,40,20,.15);transition:background .2s,color .2s}
.spot i{width:1px;height:18px;background:var(--seal)}
.spot:hover b,.spot:focus-visible b{background:var(--ink);color:var(--paper-3)}
.cover-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.primary{padding:.62em 1.5em;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--paper-3);letter-spacing:.2em;font-size:clamp(16px,1.35vh,22px);transition:transform .2s,box-shadow .2s}
.primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(40,30,15,.25)}
.keys{margin:0;font-size:clamp(13px,1.1vh,18px);color:var(--ink-3);letter-spacing:.12em}
.loading{position:absolute;left:50%;bottom:-40px;transform:translateX(-50%);margin:0;font-size:13px;color:var(--ink-3);letter-spacing:.2em}
#cover.ready .loading{display:none}
#cover.ready .loading.warn{display:block;color:var(--seal)}
#startBtn[disabled]{opacity:.4}

/* ---------- 对话框通用 ---------- */
dialog{border:0;padding:0;background:transparent;color:inherit;max-width:none;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
dialog::backdrop{background:rgba(38,30,18,.38);backdrop-filter:blur(2px)}
dialog[open]{animation:pop .35s ease}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}}
.close{border:1px solid var(--line-2);border-radius:999px;background:transparent;padding:5px 14px;letter-spacing:.2em;font-size:14px}

/* 百草簿 */
.book{width:min(920px,94vw);height:min(640px,88vh);display:flex;flex-direction:column;background:var(--paper-3);border-radius:6px;box-shadow:0 20px 60px rgba(30,20,8,.35),inset 0 0 0 1px rgba(90,70,40,.18);overflow:hidden}
.book header{display:flex;align-items:center;gap:18px;padding:16px 22px;border-bottom:1px solid var(--line)}
.book h2{margin:0;font-family:var(--brush);font-weight:700;font-size:30px;letter-spacing:.1em}
.tabs{display:flex;gap:4px;margin-right:auto}
.tabs button{border:0;border-radius:999px;padding:6px 14px;background:transparent;letter-spacing:.16em}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper-3)}
.pane{flex:1;overflow:auto;padding:18px 22px 26px}
#itemGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.item{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px 10px;border:1px solid var(--line);border-radius:6px;background:#fbf8f0;transition:transform .2s,box-shadow .2s}
.item:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(52,40,20,.12)}
.item img{width:88px;height:88px;object-fit:contain}
.item b{font-weight:400;font-size:17px;letter-spacing:.2em}
.item small{font-size:12px;color:var(--ink-3);letter-spacing:.1em}
.item.locked img{filter:grayscale(1) brightness(1.25) contrast(.4);opacity:.35}
.item.locked b{color:var(--ink-3)}
.item.egg{border-style:dashed;border-color:rgba(173,51,38,.45)}
.item.egg img{object-fit:contain}
.item.fresh::after{content:"新";position:absolute;top:6px;right:6px;width:22px;height:22px;display:grid;place-items:center;border-radius:3px;background:var(--seal);color:#fff;font-size:12px}
#itemDetail{margin-top:18px;display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:6px;background:#fbf8f0}
#itemDetail img{width:120px;height:120px;object-fit:contain}
#itemDetail h3{margin:0 0 6px;font-weight:400;font-size:22px;letter-spacing:.2em}
#itemDetail blockquote{margin:0 0 6px;padding-left:12px;border-left:2px solid var(--seal);color:var(--ink);line-height:1.8}
#itemDetail p{margin:0;color:var(--ink-2)}
#wordList{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.word-card{padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:#fbf8f0}
.word-card .py{font-family:var(--song);color:var(--seal);font-size:14px;letter-spacing:.04em}
.word-card .wd{font-size:22px;letter-spacing:.14em}
.word-card p{margin:4px 0 0;font-size:13px;color:var(--ink-2);line-height:1.5}
.word-card.seen{border-color:rgba(173,51,38,.4)}
#thinkList{margin:0;padding-left:1.4em;display:grid;gap:14px}
#thinkList li{line-height:1.8;font-size:17px}
#thinkList details{margin-top:4px;font-size:15px;color:var(--ink-2)}
#thinkList summary{cursor:pointer;color:var(--seal);letter-spacing:.1em;font-size:14px}
#draftList{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.draft{border:1px solid var(--line);border-radius:6px;background:#fbf8f0;padding:10px;display:flex;flex-direction:column;gap:8px}
.draft img{width:100%;border-radius:3px}
.draft button{align-self:flex-start;border:1px solid var(--line-2);border-radius:999px;background:transparent;padding:4px 12px;font-size:13px;letter-spacing:.1em}
.empty{color:var(--ink-3);letter-spacing:.1em}

/* 故事画 */
#folio figure{margin:0;width:min(900px,92vw);background:var(--paper-3);padding:14px;border-radius:4px;box-shadow:0 20px 60px rgba(20,12,4,.45)}
#folio img{display:block;width:100%;max-height:calc(100dvh - 230px);aspect-ratio:3/2;object-fit:contain;background:#e9dfc9;border-radius:2px;transition:opacity .5s;cursor:pointer}
#folio figcaption{padding:14px 6px 2px;font-size:18px;line-height:1.8;letter-spacing:.1em;min-height:3.8em}
.folio-nav{position:sticky;bottom:0;display:flex;align-items:center;justify-content:center;gap:18px;margin-top:10px;padding:8px 0;color:var(--paper-3);background:rgba(38,30,18,.55);border-radius:999px}
.folio-nav button:not(.primary){border:1px solid rgba(245,239,225,.6);border-radius:999px;background:transparent;color:var(--paper-3);padding:9px 20px;letter-spacing:.2em}
.folio-nav .primary{border-color:var(--paper-3);background:var(--paper-3);color:var(--ink)}

/* 描绣像 */
.trace-wrap{width:min(560px,94vw);background:var(--paper-3);border-radius:6px;box-shadow:0 20px 60px rgba(30,20,8,.4);padding:16px 18px}
.trace-wrap h2{margin:0;font-family:var(--brush);font-weight:700;font-size:28px;letter-spacing:.1em}
.trace-wrap header p{margin:4px 0 12px;color:var(--ink-2);font-size:14px}
.trace-paper{position:relative;aspect-ratio:2/3;max-height:min(62vh,calc(100dvh - 190px));margin:0 auto;border-radius:2px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(90,70,40,.25)}
#traceCanvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.trace-wrap footer{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.trace-wrap footer button:not(.primary){border:1px solid var(--line-2);border-radius:999px;background:transparent;padding:9px 16px;letter-spacing:.14em}
.trace-wrap footer button[aria-pressed="true"]{background:var(--ink);color:var(--paper-3)}

/* 小卡 */
#card .card{width:min(460px,92vw);padding:22px 24px 18px;border-radius:6px;background:var(--paper-3);box-shadow:0 20px 60px rgba(30,20,8,.4)}
#card h3{margin:0 0 10px;font-family:var(--brush);font-weight:700;font-size:28px;letter-spacing:.1em}
#card p{margin:0 0 10px;line-height:1.9;font-size:16px}
#card .row{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
#card .row button:not(.primary){border:1px solid var(--line-2);border-radius:999px;background:transparent;padding:9px 18px;letter-spacing:.14em}
#card .night{background:#1d2230;color:#e8e1cf}
#card .night .row button:not(.primary){border-color:rgba(232,225,207,.4);color:#e8e1cf}
#card .night .primary{background:#e8e1cf;color:#1d2230;border-color:#e8e1cf}
#card .ending{width:min(640px,94vw)}
#card .full{width:min(760px,94vw);max-height:84vh;display:flex;flex-direction:column}
#card .full .txt{overflow:auto;padding-right:6px}
#card .full .txt p{text-indent:2em;margin:0 0 .6em;font-size:17px;line-height:2}
#card .ending ul{margin:8px 0 12px;padding-left:1.2em;line-height:1.9}
#card .ending .compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}
#card .ending .compare div{padding:12px;border:1px solid var(--line);border-radius:6px;background:#fbf8f0}
#card .ending .compare b{display:block;font-family:var(--brush);font-weight:700;font-size:22px;margin-bottom:4px}

#pausedTag{position:fixed;z-index:44;left:50%;top:max(18px,env(safe-area-inset-top));transform:translateX(-50%);padding:8px 18px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--paper-3);font-size:15px;letter-spacing:.14em;box-shadow:var(--shadow)}
#toast{position:fixed;z-index:45;left:50%;top:max(18px,env(safe-area-inset-top));transform:translate(-50%,-10px);padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--glass-2);box-shadow:var(--shadow);font-size:15px;letter-spacing:.12em;opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;display:flex;align-items:center;gap:8px;white-space:nowrap}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast img{width:30px;height:30px;object-fit:contain}

@media (max-width:720px){
  #bar{gap:0;padding:4px}
  #bar button{min-width:36px;height:38px;padding:0 7px}
  #bar button.word span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #bar button.word[aria-pressed="true"] span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .tools button{width:38px;height:38px}
  #rightTools #fullBtn,#rightTools #zoomBtn{display:none}
  .pill{font-size:13px;padding:6px 11px}
  .cover-inner{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;gap:14px}
  .cover-title{grid-row:auto;writing-mode:horizontal-tb;height:auto;flex-direction:column;align-items:center;text-align:center}
  .cover-title h1{font-size:40px;text-align:center}
  .cover-title h1 span:last-child{margin-top:0}
  .cover-title .hint{margin-top:4px;padding:3px 8px}
  .spot b{font-size:12px;padding:3px 6px}
  .book header{flex-wrap:wrap;gap:10px;padding:12px 14px}
  .pane{padding:12px 14px 20px}
  #itemGrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .item img{width:64px;height:64px}
  #itemDetail{grid-template-columns:80px 1fr}
  #itemDetail img{width:80px;height:80px}
  #inscription{height:34vh}
}
@media (max-width:520px){
  .tools{bottom:calc(var(--safe-b) + 52px)}
  #bar #albumBtn,#bar .sep:last-of-type{display:none}
  #toast{top:64px;max-width:92vw;white-space:normal}
  .cover-actions{justify-content:center}
  .keys{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  #shout.go{animation:none!important;opacity:1}
}
@media (max-height:500px) and (orientation:landscape){
  #folio figure{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px;align-items:center;width:min(900px,94vw)}
  #folio img{max-height:calc(100dvh - 100px)}
  #folio figcaption{font-size:15px;min-height:0}
  .trace-wrap header p{display:none}
}
/* 大屏（2K 及以上）：按钮、标签、任务条放大一档，站远了也看得清、点得中 */
@media (min-height:1200px) and (min-width:1600px){
  .pill{font-size:21px;padding:10px 20px}
  #albumCount b{font-size:26px}
  #albumCount .lab,#albumCount i{font-size:16px}
  #bar{padding:7px}
  #bar button{min-width:58px;height:56px;padding:0 14px}
  #bar button.word{font-size:19px}
  #bar svg,#bar button.word svg{width:26px;height:26px}
  #bar .sep{height:30px}
  .tools button{width:58px;height:58px}
  .tools svg{width:26px;height:26px}
  .chip::before{width:12px;height:12px}
  .chip.far{padding:13px}
  #task{font-size:21px !important;padding:14px 16px 14px 24px !important}
  #task:not(.top){bottom:calc(var(--safe-b) + 80px) !important}
  #task.top{top:calc(max(18px, env(safe-area-inset-top)) + 70px) !important}
  #task .quit{font-size:19px}
  #toast{font-size:20px}
  #toast img{width:40px;height:40px}
  #pausedTag{font-size:20px;padding:12px 24px}
  .book{width:min(1280px,90vw);height:min(900px,86vh)}
  .book h2{font-size:40px}
  .tabs button{font-size:19px}
  #itemGrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .item img{width:130px;height:130px}
  .item b{font-size:22px}
  #card .card{width:min(620px,92vw)}
  #card p{font-size:21px}
  #card h3{font-size:36px}
  #folio figure{width:min(1300px,86vw)}
  #folio figcaption{font-size:24px}
}

/* ---------- 书卷的打开、合上（参照古书的真实样子） ----------
 * 百草簿、故事画：线装书。书脊在右边，四眼订线，左上角贴书签；打开时封面以右边书脊为轴翻开，合上时翻回来盖住，再收起。
 * 整段原文的卡片：挂轴。上下两根轴，打开时下轴带着纸往下展开，合上时卷回上轴。 */
#album,#folio{overflow:visible;perspective:2400px}
#album[open],#folio[open]{animation:none}   /* 进场由封面翻开来做，去掉通用的弹出 */
.bookcover{display:none;position:absolute;inset:0;z-index:6;transform-origin:right center;transform-style:preserve-3d;pointer-events:none}
.bookcover .face{position:absolute;inset:0;border-radius:3px 2px 2px 3px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.bookcover .front{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .82 0 0 0 0 .9 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(100deg,#3c4962 0%,#2f3a50 55%,#28313f 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),inset -10px 0 14px -8px rgba(0,0,0,.45),0 24px 60px rgba(20,14,6,.45)}
.bookcover .back{transform:rotateY(180deg);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),#efe6d1;box-shadow:inset 0 0 0 1px rgba(90,70,40,.25),inset 10px 0 14px -8px rgba(60,40,20,.25)}
/* 书签（题签）：贴在封面左上，竖写书名 */
.bookcover .slip{position:absolute;top:7%;left:7%;writing-mode:vertical-rl;min-height:36%;padding:1.1em .55em;background:#eee5cf;box-shadow:inset 0 0 0 4px #eee5cf,inset 0 0 0 5px rgba(110,90,60,.6),0 1px 3px rgba(0,0,0,.35);font-family:var(--song);font-weight:700;font-size:clamp(22px,3.4vh,42px);letter-spacing:.35em;color:#2a241c}
/* 四眼订线：一道竖线贴着书脊，四个孔各有一段线绕到书脊外 */
.bookcover .thread{position:absolute;top:0;bottom:0;right:5%;width:2px;background:rgba(238,232,216,.92);box-shadow:0 0 1px rgba(0,0,0,.5)}
.bookcover .hole{position:absolute;right:0;width:5%;height:2px;background:rgba(238,232,216,.92);box-shadow:0 0 1px rgba(0,0,0,.5)}
.bookcover .hole::before{content:"";position:absolute;left:-4px;top:-4px;width:9px;height:9px;border-radius:50%;background:#1b2231;box-shadow:0 0 0 1.5px rgba(238,232,216,.85)}
/* 包角：书脊上下两角包着一小块深色绫子 */
.bookcover .corner{position:absolute;right:0;width:5%;height:4.5%;background:#1f2533;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.bookcover .corner.t{top:0;border-top-right-radius:2px}.bookcover .corner.b{bottom:0;border-bottom-right-radius:2px}
#album.opening,#folio.opening{animation:bookIn .22s ease both}
#album.opening .bookcover,#folio.opening .bookcover{display:block;animation:coverOpen .95s cubic-bezier(.45,.05,.25,1) .2s both}
#album.opening .bookcover .face,#folio.opening .bookcover .face{animation:faceOut .95s linear .2s both}
#album.closing,#folio.closing{animation:bookAway .26s ease .66s both}
#album.closing .bookcover,#folio.closing .bookcover{display:block;animation:coverClose .62s cubic-bezier(.4,0,.6,1) both}
#album.closing .bookcover .face,#folio.closing .bookcover .face{animation:faceIn .62s linear both}
@keyframes bookIn{from{opacity:0;transform:scale(.97)}}
@keyframes bookAway{to{opacity:0;transform:translateY(8px) scale(.97)}}
@keyframes coverOpen{from{transform:rotateY(0)}to{transform:rotateY(176deg)}}
@keyframes faceOut{0%,72%{opacity:1}100%{opacity:0}}   /* 淡出放在两个面上：翻动的整块一旦带透明度，浏览器会把立体压扁，背面就翻不出来 */
@keyframes coverClose{from{transform:rotateY(176deg)}to{transform:rotateY(0)}}
@keyframes faceIn{0%{opacity:0}28%,100%{opacity:1}}
/* 挂轴 */
#card.scroll{overflow:visible}
#card.scroll[open]{animation:none}
#card .axle{position:absolute;left:-16px;right:-16px;height:14px;border-radius:7px;background:linear-gradient(180deg,#8a6541 0%,#5a3f27 55%,#34241a 100%);box-shadow:0 3px 8px rgba(40,26,12,.4);pointer-events:none;z-index:3}
#card .axle::before,#card .axle::after{content:"";position:absolute;top:-3px;width:14px;height:20px;border-radius:5px;background:linear-gradient(180deg,#f1e9d4,#cdbd93);box-shadow:inset 0 0 0 1px rgba(80,60,30,.4)}
#card .axle::before{left:-7px}#card .axle::after{right:-7px}
#card .axle.top{top:-7px}
#card .axle.bottom{top:calc(100% - 7px)}
#card.scroll .card{border-radius:1px;box-shadow:0 18px 50px rgba(30,20,8,.4),inset 0 0 0 9px #e3d9c2,inset 0 0 0 10px rgba(110,90,60,.35)}
#card.unrolling .card{animation:unroll .85s cubic-bezier(.3,.7,.2,1) .12s both}
#card.unrolling .axle.bottom{animation:axleDown .85s cubic-bezier(.3,.7,.2,1) .12s both}
#card.unrolling .axle.top{animation:axleIn .12s ease both}
#card.rolling .card{animation:rollUp .55s cubic-bezier(.55,0,.8,.45) both}
#card.rolling .axle.bottom{animation:axleUp .55s cubic-bezier(.55,0,.8,.45) both}
#card.scroll.rolling{animation:bookAway .2s ease .52s both}
@keyframes unroll{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rollUp{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes axleDown{from{top:-7px}to{top:calc(100% - 7px)}}
@keyframes axleUp{from{top:calc(100% - 7px)}to{top:-7px}}
@keyframes axleIn{from{opacity:0;transform:scaleX(.9)}}
/* 其余小卡：合上时轻轻淡出 */
#card.fading{animation:bookAway .2s ease both}
@media (prefers-reduced-motion:reduce){
  #album.opening,#folio.opening,#album.closing,#folio.closing,#card.scroll.rolling,#card.fading{animation:none}
  #album.opening .bookcover,#folio.opening .bookcover,#album.closing .bookcover,#folio.closing .bookcover{display:none}
  #card.unrolling .card,#card.unrolling .axle,#card.rolling .card,#card.rolling .axle{animation:none}
}
/* 「听」：点一下放这一段，放的时候变红，再点一下停 */
.vbtn{border:1px solid var(--line-2);border-radius:999px;background:transparent;padding:0 9px;margin-right:6px;font-size:13px;line-height:1.7;vertical-align:.1em;letter-spacing:.1em;transition:background .2s,color .2s,border-color .2s}
.vbtn:hover{border-color:var(--seal);color:var(--seal)}
.vbtn.on{background:var(--seal);border-color:var(--seal);color:#fff}

/* 原文朗读：题跋上的「朗读」按钮（读着时变红）、正在读的那句；读全文挂轴里的朗读开关和正在读的那段 */
#inscription .more.read[aria-pressed="true"]{background:var(--seal);border-color:var(--seal);color:#fff}
#inscription .s.reading{color:var(--seal);transition:color .3s}
#card .readbar{margin:-2px 0 10px}
#card .readbar .vbtn{margin:0;padding:3px 16px;font-size:14px;letter-spacing:.24em}
#card .full .txt p{transition:color .3s,background .3s}
#card .full .txt p.reading{color:var(--seal);background:rgba(173,51,38,.06);border-radius:4px}