/* ============================================================
   《汴梁岁时记》 视觉体系
   朱砂红 #b03024 / 宋瓷青 #7a9a8d / 原木米 #f2e8d5 / 古墨黑 #2b2320
   ============================================================ */
:root{
  --cinnabar:#b03024;
  --cinnabar-deep:#8c2318;
  --celadon:#7a9a8d;
  --celadon-deep:#5d7d70;
  --rice:#f2e8d5;
  --rice-deep:#e6d7ba;
  --ink:#2b2320;
  --ink-soft:#5a4c42;
  --gold:#c99a3f;
  --serif:"Kaiti SC","STKaiti","KaiTi","STSong","SimSun",serif;
  --sans:"Source Han Serif SC","Noto Serif SC","STSong",serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;background:var(--rice);}
body{font-family:var(--sans);color:var(--ink);}
button{font-family:inherit;cursor:pointer;border:none;background:none;}

/* 宣纸颗粒 */
.paper-grain{
  position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.48 0 0 0 0 0.38 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 屏幕框架 ---------- */
.screen{
  position:fixed;inset:0;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:scale(1.015);
  transition:opacity .7s ease,transform .7s ease,visibility 0s .7s;
  background:var(--rice);
}
.screen.active{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .7s ease,transform .7s ease;
}
.screen-head{
  text-align:center;padding:34px 20px 10px;flex:none;position:relative;z-index:5;
}
.screen-head h2{
  font-family:var(--serif);font-size:40px;letter-spacing:.35em;text-indent:.35em;
  color:var(--cinnabar-deep);
}
.screen-head p{margin-top:10px;color:var(--ink-soft);letter-spacing:.18em;font-size:14px;}
.screen-head.compact h2{font-size:32px;}
.screen-head.compact{padding:22px 20px 6px;}

/* ---------- 侧边导航 ---------- */
#sideNav{
  position:fixed;right:26px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:16px;z-index:100;
}
.nav-dot{
  width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink-soft);
  cursor:pointer;transition:.3s;position:relative;
}
.nav-dot:hover{border-color:var(--cinnabar);}
.nav-dot.on{background:var(--cinnabar);border-color:var(--cinnabar);transform:scale(1.35);}
.nav-dot::after{
  content:attr(title);position:absolute;right:22px;top:50%;transform:translateY(-50%);
  white-space:nowrap;font-size:12px;letter-spacing:.15em;color:var(--ink-soft);
  background:var(--rice);padding:3px 10px;border:1px solid var(--rice-deep);
  opacity:0;pointer-events:none;transition:.25s;
}
.nav-dot:hover::after{opacity:1;}

/* ---------- 角饰符号 ---------- */
.corner{position:absolute;width:56px;height:56px;color:var(--celadon-deep);opacity:.55;z-index:6;}
.corner svg{width:100%;height:100%;}
.corner i{
  position:absolute;left:50%;top:100%;transform:translateX(-50%);
  font-style:normal;font-size:11px;letter-spacing:.2em;color:var(--ink-soft);
}
.corner.tl{top:18px;left:22px;}
.corner.tr{top:18px;right:22px;}
.corner.bl{bottom:34px;left:22px;}
.corner.br{bottom:34px;right:22px;}

/* ================= 封面 ================= */
#screen-cover{background:linear-gradient(180deg,#efe3c8 0%,#e9dcc0 55%,#dccfae 100%);}
.cover-bg{position:absolute;inset:0;overflow:hidden;}
.cover-tint{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 38%,rgba(242,232,213,0) 30%,rgba(190,165,120,.25) 100%);}
.ink-city,.ink-hills{position:absolute;left:-5%;width:110%;will-change:transform;}
.ink-city{
  bottom:0;height:46%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cg fill='%237a6a52' opacity='0.5'%3E%3Cpath d='M0 300 L0 210 L60 210 L60 180 L110 180 L110 220 L180 220 L180 150 L200 130 L220 150 L220 220 L300 220 L300 190 L380 190 L380 230 L460 230 L460 160 L485 138 L510 160 L510 230 L600 230 L600 200 L680 200 L680 170 L700 150 L720 170 L720 230 L820 230 L820 190 L900 190 L900 220 L980 220 L980 155 L1005 132 L1030 155 L1030 220 L1120 220 L1120 200 L1200 200 L1200 300 Z'/%3E%3C/g%3E%3Cg fill='%235a4c3c' opacity='0.6'%3E%3Cpath d='M0 300 L0 250 L90 250 L90 230 L170 230 L170 260 L260 260 L260 235 L340 235 L340 265 L430 265 L430 240 L520 240 L520 268 L610 268 L610 245 L700 245 L700 270 L800 270 L800 238 L890 238 L890 262 L990 262 L990 242 L1080 242 L1080 268 L1200 268 L1200 300 Z'/%3E%3C/g%3E%3C/svg%3E") bottom/100% 100% no-repeat;
}
.ink-hills{
  bottom:0;height:100%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cpath d='M0 400 L0 300 Q150 220 320 280 Q470 330 640 260 Q830 190 1000 270 Q1110 320 1200 280 L1200 400 Z' fill='%239aab90' opacity='0.28'/%3E%3Cpath d='M0 400 L0 340 Q220 280 420 330 Q640 380 860 320 Q1050 270 1200 330 L1200 400 Z' fill='%237a9a8d' opacity='0.3'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
}

/* 卷轴 */
.scroll-wrap{
  position:relative;z-index:8;margin:auto;display:flex;align-items:stretch;
  max-width:860px;width:86%;
  animation:scrollIn 1.6s cubic-bezier(.22,.8,.3,1) .2s both;
}
@keyframes scrollIn{from{transform:scaleX(.06);opacity:.4;}to{transform:scaleX(1);opacity:1;}}
.scroll-rod{
  flex:none;width:26px;border-radius:13px;
  background:linear-gradient(90deg,#6b4a2e,#8a6238 40%,#5a3c24);
  box-shadow:0 4px 14px rgba(60,40,20,.4);
  position:relative;
}
.scroll-rod::before,.scroll-rod::after{
  content:"";position:absolute;left:2px;right:2px;height:14px;border-radius:7px;background:#3f2a18;
}
.scroll-rod::before{top:-8px;}.scroll-rod::after{bottom:-8px;}
.scroll-paper{
  flex:1;text-align:center;padding:52px 48px 44px;position:relative;
  background:linear-gradient(180deg,#f6eeda,#efe2c6);
  box-shadow:inset 0 0 60px rgba(160,130,80,.25), 0 18px 50px rgba(90,60,30,.28);
}
.scroll-paper::before,.scroll-paper::after{
  content:"";position:absolute;top:10px;bottom:10px;width:8px;
  background:repeating-linear-gradient(180deg,var(--cinnabar) 0 6px,transparent 6px 12px);
  opacity:.35;
}
.scroll-paper::before{left:12px;}.scroll-paper::after{right:12px;}

.fade-line{opacity:0;transform:translateY(14px);animation:fadeUp .9s ease forwards;}
@keyframes fadeUp{to{opacity:1;transform:none;}}
.cover-kicker{animation-delay:1.1s;color:var(--celadon-deep);letter-spacing:.4em;font-size:14px;}
.cover-title{
  animation-delay:1.4s;font-family:var(--serif);
  font-size:clamp(56px,8vw,96px);letter-spacing:.28em;text-indent:.28em;
  color:var(--cinnabar-deep);margin:18px 0 8px;
  text-shadow:0 2px 0 rgba(255,250,235,.6);
}
.cover-sub{animation-delay:1.7s;letter-spacing:.5em;text-indent:.5em;color:var(--ink-soft);font-size:16px;}
.cover-quote{
  animation-delay:2.1s;margin:26px auto 0;max-width:560px;
  color:var(--ink-soft);font-size:15px;line-height:2;letter-spacing:.12em;
}
.cover-quote cite{font-size:12.5px;color:var(--celadon-deep);}
.cover-actions{animation-delay:2.5s;display:flex;gap:36px;justify-content:center;margin-top:34px;}

/* 印章风按钮 */
.btn-seal{
  position:relative;width:212px;padding:20px 14px 16px;
  background:linear-gradient(160deg,var(--cinnabar) 0%,var(--cinnabar-deep) 100%);
  color:#f6ead2;border-radius:6px;
  box-shadow:0 8px 22px rgba(140,35,24,.35), inset 0 0 0 1.5px rgba(246,234,210,.45);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s, filter .35s;
}
.btn-seal.alt{background:linear-gradient(160deg,var(--celadon) 0%,var(--celadon-deep) 100%);box-shadow:0 8px 22px rgba(93,125,112,.4), inset 0 0 0 1.5px rgba(246,234,210,.45);}
.btn-seal span{font-family:var(--serif);font-size:19px;letter-spacing:.2em;line-height:1.7;display:block;}
.btn-seal em{display:block;margin-top:8px;font-style:normal;font-size:11px;letter-spacing:.35em;opacity:.75;}
.btn-seal:hover{transform:translateY(-4px) scale(1.05);filter:brightness(1.1);}
.btn-seal:active{transform:translateY(-1px) scale(1.02);}
.btn-seal.small{width:auto;padding:12px 30px;}
.btn-seal.small span{font-size:15px;}
.btn-ghost{
  padding:12px 26px;border:1.5px solid var(--ink-soft);border-radius:6px;
  color:var(--ink-soft);letter-spacing:.25em;font-size:14px;transition:.3s;background:rgba(246,238,218,.4);
}
.btn-ghost:hover{border-color:var(--cinnabar);color:var(--cinnabar);background:rgba(176,48,36,.06);}
.cover-hint{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-size:12px;letter-spacing:.3em;color:var(--ink-soft);opacity:.7;z-index:8;
  animation:hintFloat 2.6s ease-in-out infinite;
}
@keyframes hintFloat{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,-6px);}}

/* ================= 时间轴 ================= */
#screen-timeline{background:linear-gradient(180deg,#efe4ca,#e8dbbc);}
.tl-scroll{flex:1;overflow-y:auto;padding:10px 0 60px;scroll-behavior:smooth;}
.tl-scroll::-webkit-scrollbar{width:8px;}
.tl-scroll::-webkit-scrollbar-thumb{background:#c8b68e;border-radius:4px;}
.tl-track{position:relative;max-width:820px;margin:0 auto;padding:20px 40px;}
.tl-track::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--celadon-deep) 4%,var(--celadon-deep) 96%,transparent);
}
.tl-node{
  position:relative;width:50%;padding:26px 56px;cursor:pointer;
  opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .8s ease;
}
.tl-node.show{opacity:1;transform:none;}
.tl-node:nth-child(odd){left:0;text-align:right;}
.tl-node:nth-child(even){left:50%;text-align:left;}
.tl-node::before{
  content:"";position:absolute;top:40px;width:16px;height:16px;border-radius:50%;
  background:var(--rice);border:3px solid var(--cinnabar);z-index:2;transition:.3s;
}
.tl-node:nth-child(odd)::before{right:-8px;}
.tl-node:nth-child(even)::before{left:-8px;}
.tl-node::after{
  content:"";position:absolute;top:47px;height:1.5px;width:44px;background:#b7a67f;
}
.tl-node:nth-child(odd)::after{right:8px;}
.tl-node:nth-child(even)::after{left:8px;}
.tl-node:hover::before{background:var(--cinnabar);transform:scale(1.3);}
.tl-card{
  display:inline-block;background:rgba(250,244,228,.85);border:1px solid #d8c8a2;
  border-radius:8px;padding:18px 22px;max-width:330px;text-align:left;
  box-shadow:0 6px 18px rgba(120,95,55,.14);transition:transform .35s,box-shadow .35s;
}
.tl-node:hover .tl-card{transform:translateY(-4px) scale(1.02);box-shadow:0 14px 30px rgba(120,95,55,.24);border-color:var(--cinnabar);}
.tl-card-head{display:flex;gap:12px;align-items:center;margin-bottom:6px;}
.tl-thumb{
  width:52px;height:64px;object-fit:cover;border-radius:4px;flex:none;
  border:1.5px solid #c9b88f;box-shadow:0 3px 8px rgba(120,95,55,.2);
  transition:transform .35s;
}
.tl-node:hover .tl-thumb{transform:scale(1.12) rotate(-2deg);}
.tl-card .d{font-size:13px;color:var(--celadon-deep);letter-spacing:.25em;}
.tl-card .n{font-family:var(--serif);font-size:26px;color:var(--cinnabar-deep);margin:4px 0 6px;letter-spacing:.15em;}
.tl-card .q{font-size:12.5px;color:var(--ink-soft);line-height:1.9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.tl-card .go{margin-top:8px;font-size:12px;color:var(--cinnabar);letter-spacing:.2em;}
.tl-end{text-align:center;padding:40px;color:var(--ink-soft);letter-spacing:.35em;font-size:13px;}

/* ================= 节日深读 ================= */
#screen-festival{background:var(--rice);}
.fest-bg{position:absolute;inset:0;transition:background 1s ease,opacity 1s;opacity:.9;}
.fest-layout{position:relative;z-index:4;flex:1;display:flex;min-height:0;}
.fest-rail{
  flex:none;width:220px;border-right:1px solid rgba(90,76,66,.18);
  padding:76px 0 30px;display:flex;flex-direction:column;background:rgba(242,232,213,.72);backdrop-filter:blur(4px);
}
.fest-rail h3{
  text-align:center;font-family:var(--serif);letter-spacing:.3em;color:var(--ink-soft);
  font-size:15px;padding-bottom:14px;flex:none;
}
.fest-rail-list{flex:1;overflow-y:auto;padding:6px 14px;}
.fest-rail-list::-webkit-scrollbar{width:5px;}
.fest-rail-list::-webkit-scrollbar-thumb{background:#c8b68e;border-radius:3px;}
.rail-item{
  padding:9px 14px;margin:3px 0;border-radius:6px;cursor:pointer;font-size:14px;
  letter-spacing:.12em;color:var(--ink-soft);transition:.25s;border:1px solid transparent;
}
.rail-item b{font-family:var(--serif);margin-right:6px;font-weight:normal;color:var(--celadon-deep);}
.rail-item:hover{background:rgba(122,154,141,.12);}
.rail-item.on{background:var(--cinnabar);color:#f6ead2;}
.rail-item.on b{color:#f0d9a8;}
.fest-main{
  flex:1;overflow-y:auto;padding:70px 7% 60px;text-align:center;position:relative;
}
.fest-main::-webkit-scrollbar{width:8px;}
.fest-main::-webkit-scrollbar-thumb{background:#c8b68e;border-radius:4px;}
.fest-motif{width:96px;height:96px;margin:0 auto 12px;color:var(--fest-accent,var(--cinnabar));}
.fest-motif svg{width:100%;height:100%;filter:drop-shadow(0 4px 10px rgba(60,40,20,.25));animation:motifIn 1s ease both;}
@keyframes motifIn{from{opacity:0;transform:scale(.6) rotate(-8deg);}to{opacity:1;transform:none;}}
.fest-date{letter-spacing:.5em;text-indent:.5em;color:var(--fest-accent,var(--celadon-deep));font-size:15px;}
.fest-name{font-family:var(--serif);font-size:58px;letter-spacing:.3em;text-indent:.3em;color:var(--cinnabar-deep);margin:6px 0 2px;}
.fest-scroll{font-size:13px;color:var(--ink-soft);letter-spacing:.2em;}
.fest-quote{
  max-width:640px;margin:26px auto 0;padding:22px 30px;line-height:2.15;font-size:15.5px;
  color:var(--ink);background:rgba(250,244,228,.82);border-left:3px solid var(--fest-accent,var(--cinnabar));
  border-radius:0 8px 8px 0;text-align:justify;box-shadow:0 8px 22px rgba(120,95,55,.13);
}
.fest-hero{
  margin:28px auto 0;width:min(320px,60%);position:relative;
  border:5px solid var(--cinnabar-deep);outline:1.5px solid var(--gold);outline-offset:-11px;
  background:#faf5e8;box-shadow:0 16px 40px rgba(90,50,20,.3);
  animation:heroIn .9s ease both;
}
@keyframes heroIn{from{opacity:0;transform:translateY(20px) rotate(-1.5deg);}to{opacity:1;transform:none;}}
.fest-hero img{display:block;width:100%;height:auto;}
.hero-tag{
  position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);white-space:nowrap;
  background:var(--cinnabar);color:#f6ead2;font-size:12px;letter-spacing:.25em;
  padding:6px 18px;border-radius:999px;box-shadow:0 6px 14px rgba(140,35,24,.35);
}
.fest-customs{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:24px;}
.custom-chip{
  padding:8px 20px;border-radius:999px;font-size:13.5px;letter-spacing:.15em;
  border:1.5px solid var(--fest-accent,var(--celadon-deep));color:var(--ink-soft);
  background:rgba(250,244,228,.6);transition:.3s;
}
.custom-chip:hover{background:var(--fest-accent,var(--celadon-deep));color:#f6ead2;transform:translateY(-3px);}
.fest-flow{
  margin:44px auto 0;max-width:760px;background:rgba(250,244,228,.85);
  border:1px solid #d8c8a2;border-radius:12px;padding:30px 36px 26px;
  box-shadow:0 12px 30px rgba(120,95,55,.15);
}
.fest-flow h4{font-family:var(--serif);letter-spacing:.25em;color:var(--cinnabar-deep);font-size:19px;}
.fest-flow>p{margin-top:12px;font-size:13.5px;line-height:2;color:var(--ink-soft);}
.fest-flow b{color:var(--cinnabar);}
.pattern-row{display:flex;gap:22px;justify-content:center;margin-top:24px;flex-wrap:wrap;}
.pattern-card{
  width:130px;cursor:pointer;transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.pattern-card:hover{transform:translateY(-6px) scale(1.06);}
.pattern-thumb{
  border:2px solid #c9b88f;border-radius:8px;overflow:hidden;background:#f8f1de;
  box-shadow:0 6px 16px rgba(120,95,55,.18);transition:border-color .3s;
}
.pattern-card:hover .pattern-thumb{border-color:var(--cinnabar);}
.pattern-thumb svg{display:block;width:100%;height:auto;}
.pattern-thumb img{display:block;width:100%;height:166px;object-fit:cover;}
.pattern-card.photo .pattern-thumb{border-color:var(--gold);box-shadow:0 6px 18px rgba(201,154,63,.35);}
.pattern-card.photo p{color:var(--cinnabar-deep);}
.pattern-card p{margin-top:8px;font-family:var(--serif);font-size:15px;color:var(--ink);letter-spacing:.1em;}
.pattern-card small{display:block;font-size:11px;color:var(--ink-soft);margin-top:2px;letter-spacing:.08em;}
.pattern-hint{margin-top:20px;font-size:13px;letter-spacing:.25em;color:var(--cinnabar);}

/* ================= 拓印工坊 ================= */
#screen-workshop{background:linear-gradient(180deg,#eee1c4,#e7d9b8);}
.ws-steps{
  flex:none;display:flex;justify-content:center;gap:8px;padding:8px 20px 14px;flex-wrap:wrap;
}
.ws-step{
  display:flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;
  border:1.5px solid #c4b28a;font-size:13px;letter-spacing:.14em;color:var(--ink-soft);
  background:rgba(250,244,228,.55);transition:.35s;
}
.ws-step i{
  font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:#c4b28a;color:#fff;font-size:11px;transition:.35s;
}
.ws-step.on{border-color:var(--cinnabar);color:var(--cinnabar-deep);background:rgba(176,48,36,.08);}
.ws-step.on i{background:var(--cinnabar);}
.ws-step.done{border-color:var(--celadon-deep);color:var(--celadon-deep);}
.ws-step.done i{background:var(--celadon-deep);}
.ws-stage{flex:1;min-height:0;position:relative;padding:0 3% 22px;display:flex;flex-direction:column;}
.ws-tip{
  flex:none;max-width:760px;margin:0 auto 12px;text-align:center;font-size:13.5px;
  line-height:1.9;color:var(--ink-soft);letter-spacing:.06em;
  background:rgba(250,244,228,.7);border:1px dashed #c4b28a;border-radius:8px;padding:10px 22px;
}
.ws-pane{
  flex:1;min-height:0;display:none;align-items:center;justify-content:center;
  animation:paneIn .6s ease;
}
.ws-pane.on{display:flex;}
@keyframes paneIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.ws-progress{flex:none;text-align:center;font-size:13px;letter-spacing:.2em;color:var(--ink-soft);margin-top:10px;}
.ws-progress span{color:var(--cinnabar);font-size:17px;font-family:var(--serif);}
.ws-note{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);max-width:700px;font-size:12px;color:var(--ink-soft);line-height:1.8;text-align:center;opacity:.85;}

/* 绘稿 */
.draft-board{
  position:relative;width:min(400px,42vh*0.77);aspect-ratio:400/520;
  background:#f8f1de;border:2px solid #b7a67f;border-radius:6px;
  box-shadow:0 16px 40px rgba(120,95,55,.28);cursor:none;overflow:hidden;
}
.draft-board svg{position:absolute;inset:0;width:100%;height:100%;}
.brush-cursor{
  position:absolute;width:34px;height:34px;pointer-events:none;z-index:5;display:none;
  transform:translate(-50%,-88%);
}
.brush-cursor::before{content:"🖊️";font-size:30px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.3));}
.draft-board:hover .brush-cursor{display:block;}

/* 刻版 */
.carve-board{
  position:relative;width:min(400px,42vh*0.77);aspect-ratio:400/520;
  background:linear-gradient(150deg,#c9a069 0%,#b78c54 55%,#a67c46 100%);
  border:2px solid #8a6238;border-radius:6px;
  box-shadow:0 16px 40px rgba(120,95,55,.32), inset 0 0 40px rgba(120,85,40,.35);
  cursor:none;overflow:hidden;
}
.carve-board::before{
  content:"";position:absolute;inset:0;opacity:.25;
  background:repeating-linear-gradient(93deg,transparent 0 22px,rgba(90,60,25,.35) 22px 23px);
}
.carve-board svg{position:absolute;inset:0;width:100%;height:100%;z-index:2;}
#shaveCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;}
.knife-cursor{
  position:absolute;pointer-events:none;z-index:6;font-size:30px;display:none;
  transform:translate(-30%,-70%) rotate(-35deg);filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));
}
.carve-board:hover .knife-cursor{display:block;}

/* 熬色 */
.ink-flex{display:flex;gap:6%;align-items:center;justify-content:center;width:100%;}
.ingredients{display:grid;grid-template-columns:repeat(2,130px);gap:16px;}
.ingredient{
  padding:14px 10px;border-radius:10px;text-align:center;cursor:grab;
  background:rgba(250,244,228,.9);border:2px solid #c9b88f;
  box-shadow:0 6px 14px rgba(120,95,55,.16);transition:transform .25s,border-color .25s;user-select:none;
}
.ingredient:hover{transform:translateY(-4px);border-color:var(--cinnabar);}
.ingredient.used{opacity:.35;pointer-events:none;}
.ingredient .dot{width:26px;height:26px;border-radius:50%;margin:0 auto 8px;box-shadow:inset 0 -3px 6px rgba(0,0,0,.25);}
.ingredient b{font-family:var(--serif);font-size:15px;letter-spacing:.1em;font-weight:normal;}
.ingredient small{display:block;font-size:11px;color:var(--ink-soft);margin-top:3px;}
.pot-zone{display:flex;flex-direction:column;align-items:center;gap:22px;}
.pot{
  position:relative;width:190px;height:130px;
  background:linear-gradient(180deg,#4a3b30,#33291f);
  border-radius:14px 14px 46% 46% / 10px 10px 70% 70%;
  box-shadow:0 14px 30px rgba(60,40,20,.4), inset 0 6px 0 rgba(255,255,255,.08);
  overflow:hidden;
}
.pot::before{content:"";position:absolute;top:-9px;left:-12px;right:-12px;height:20px;border-radius:10px;background:#5a483a;}
.pot-liquid{
  position:absolute;left:8%;right:8%;bottom:10%;height:0;border-radius:40%;
  background:#c0392b;transition:height .8s ease,background 1s ease;
  filter:saturate(1.1);
}
.pot-steam{position:absolute;left:0;right:0;top:-40px;height:40px;pointer-events:none;}
.pot-steam.on::before,.pot-steam.on::after{
  content:"〰";position:absolute;font-size:26px;color:rgba(255,255,255,.55);animation:steam 1.6s linear infinite;
}
.pot-steam.on::before{left:32%;}
.pot-steam.on::after{right:32%;animation-delay:.8s;}
@keyframes steam{from{transform:translateY(14px);opacity:0;}40%{opacity:.8;}to{transform:translateY(-16px);opacity:0;}}
.pot.drop-ok{animation:potShake .4s;}
@keyframes potShake{0%,100%{transform:none;}30%{transform:translateX(-5px);}60%{transform:translateX(5px);}}
.filter-row{display:flex;align-items:center;gap:26px;}
.gauze{
  width:96px;height:64px;border:2px dashed #b7a67f;border-radius:8px;display:grid;place-items:center;
  font-size:13px;letter-spacing:.15em;color:var(--ink-soft);cursor:pointer;transition:.3s;background:rgba(250,244,228,.6);
}
.gauze.ready{border-color:var(--cinnabar);color:var(--cinnabar);animation:pulse 1.4s infinite;}
.gauze.done{border-style:solid;border-color:var(--celadon-deep);color:var(--celadon-deep);animation:none;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(176,48,36,.35);}50%{box-shadow:0 0 0 10px rgba(176,48,36,0);}}
.jar{
  position:relative;width:78px;height:104px;border:3px solid #7a6a52;border-radius:12px 12px 20px 20px;
  background:rgba(250,244,228,.5);overflow:hidden;
}
.jar::before{content:"";position:absolute;top:-8px;left:20%;right:20%;height:10px;border-radius:5px;background:#7a6a52;}
.jar-liquid{position:absolute;left:0;right:0;bottom:0;height:0;background:#c0392b;transition:height 1.2s ease,background .8s;}

/* 印刷 */
.print-flex{display:flex;gap:5%;align-items:flex-start;justify-content:center;width:100%;}
.block-zone,.paper-zone{display:flex;flex-direction:column;align-items:center;}
.print-block{
  position:relative;width:min(330px,40vh*0.635);aspect-ratio:400/520;
  background:linear-gradient(150deg,#c9a069,#a67c46);
  border:2px solid #8a6238;border-radius:6px;overflow:hidden;
  box-shadow:0 14px 34px rgba(120,95,55,.3);
}
.print-block svg{position:absolute;inset:0;width:100%;height:100%;}
#inkCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;}
.xuan-paper{
  position:relative;width:min(330px,40vh*0.635);aspect-ratio:400/520;
  background:#faf5e8;border:1.5px solid #d8c8a2;border-radius:4px;
  box-shadow:0 14px 34px rgba(120,95,55,.22);overflow:hidden;transition:transform .8s cubic-bezier(.22,.8,.3,1);
}
.paper-under{position:absolute;inset:0;z-index:1;}
.paper-under svg{width:100%;height:100%;}
#revealCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;}
.tool-dock{
  position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  display:flex;gap:14px;
}
.tool-btn{
  padding:10px 24px;border-radius:999px;border:1.5px solid #b7a67f;font-size:13.5px;
  letter-spacing:.15em;color:var(--ink-soft);background:rgba(250,244,228,.85);transition:.3s;
}
.tool-btn.active{border-color:var(--cinnabar);color:var(--cinnabar);box-shadow:0 0 0 4px rgba(176,48,36,.12);}
.tool-btn:disabled{opacity:.4;cursor:not-allowed;}

/* 晾画 */
.dry-flex{display:flex;gap:8%;align-items:center;justify-content:center;width:100%;}
.dry-paper-slot{
  width:min(300px,38vh*0.577);aspect-ratio:400/520;border:2px dashed #b7a67f;border-radius:8px;
  display:grid;place-items:center;color:var(--ink-soft);font-size:14px;letter-spacing:.2em;
  cursor:pointer;transition:.3s;position:relative;background:rgba(250,244,228,.5);
}
.dry-paper-slot:hover{border-color:var(--cinnabar);}
.dry-paper-slot svg{width:100%;height:100%;}
.dry-paper-slot p{position:absolute;bottom:-34px;white-space:nowrap;}
.dry-rack{position:relative;width:340px;height:420px;}
.rack-line{
  position:absolute;top:60px;left:0;right:0;height:4px;background:#7a6a52;border-radius:2px;
  box-shadow:0 3px 6px rgba(60,40,20,.3);
}
.rack-line::before,.rack-line::after{
  content:"";position:absolute;top:0;width:6px;height:300px;background:#7a6a52;border-radius:3px;
}
.rack-line::before{left:14px;}.rack-line::after{right:14px;}
.rack-paper{
  position:absolute;top:64px;left:50%;transform:translateX(-50%);
  width:210px;aspect-ratio:400/520;background:#faf5e8;border:1px solid #d8c8a2;
  box-shadow:0 10px 26px rgba(120,95,55,.3);
  animation:hangSway 3.4s ease-in-out infinite;transform-origin:top center;
}
@keyframes hangSway{0%,100%{transform:translateX(-50%) rotate(.6deg);}50%{transform:translateX(-50%) rotate(-.6deg);}}
.rack-paper svg{width:100%;height:100%;}
.rack-clip{position:absolute;top:-8px;width:14px;height:22px;background:var(--cinnabar);border-radius:3px;}
.dry-bar-wrap{
  position:absolute;bottom:60px;left:40px;right:40px;height:10px;border-radius:5px;
  background:rgba(183,166,127,.35);overflow:hidden;
}
.dry-bar{height:100%;width:0;background:linear-gradient(90deg,var(--celadon),var(--celadon-deep));border-radius:5px;transition:width .2s linear;}
.dry-label{position:absolute;bottom:26px;width:100%;text-align:center;font-size:13px;letter-spacing:.3em;color:var(--ink-soft);}

/* 成品 */
.done-flex{display:flex;gap:5%;align-items:center;justify-content:center;width:100%;}
.done-card{
  width:min(330px,44vh*0.635);aspect-ratio:400/520;background:#faf5e8;
  border:6px solid var(--cinnabar-deep);outline:2px solid var(--gold);outline-offset:-14px;
  box-shadow:0 22px 60px rgba(90,50,20,.4);position:relative;
  animation:doneIn 1s cubic-bezier(.22,.8,.3,1);
}
@keyframes doneIn{from{opacity:0;transform:translateY(30px) rotate(-2deg);}to{opacity:1;transform:none;}}
.done-card svg{width:100%;height:100%;}
.done-side{max-width:300px;}
.done-side h3{font-family:var(--serif);font-size:32px;letter-spacing:.3em;color:var(--cinnabar-deep);}
.done-side p{margin:16px 0 26px;font-size:14px;line-height:2.1;color:var(--ink-soft);}
.done-side .btn-seal,.done-side .btn-ghost{display:block;width:100%;margin-bottom:14px;text-align:center;}

/* ================= 古今传承 ================= */
#screen-heritage{background:linear-gradient(180deg,#ece0c6,#e3d5b4);}
.heritage-scroll{flex:1;overflow-y:auto;padding:16px 6% 50px;}
.compare-block{max-width:880px;margin:0 auto;}
.compare-block h3{
  text-align:center;font-family:var(--serif);letter-spacing:.25em;color:var(--ink);
  font-size:21px;margin-bottom:16px;
}
.compare-block h3 small{display:block;font-size:12px;color:var(--ink-soft);letter-spacing:.2em;margin-top:6px;font-weight:normal;}
.compare{
  position:relative;height:340px;border-radius:12px;overflow:hidden;
  border:1px solid #c9b88f;box-shadow:0 16px 40px rgba(120,95,55,.25);cursor:ew-resize;
}
.cmp-layer{position:absolute;inset:0;display:grid;place-items:center;}
.cmp-layer.old{
  background:
    radial-gradient(ellipse at 30% 70%,rgba(176,48,36,.14),transparent 55%),
    linear-gradient(160deg,#e8d9b4,#d9c69c);
}
.cmp-layer.new{
  background:
    radial-gradient(ellipse at 70% 30%,rgba(122,154,141,.25),transparent 55%),
    linear-gradient(160deg,#dfe8e0,#c2d4c8);
  clip-path:inset(0 0 0 50%);
}
.cmp-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85;
}
.cmp-layer.old .cmp-photo{filter:sepia(.35) contrast(1.02);}
.cmp-label{
  position:absolute;bottom:18px;padding:7px 18px;border-radius:999px;font-size:13px;
  letter-spacing:.18em;background:rgba(43,35,32,.75);color:#f2e8d5;z-index:2;
}
.cmp-layer.old .cmp-label{left:22px;}
.cmp-layer.new .cmp-label{right:22px;}
.cmp-handle{
  position:absolute;top:0;bottom:0;left:50%;width:3px;background:#f2e8d5;z-index:5;
  box-shadow:0 0 12px rgba(0,0,0,.35);transform:translateX(-50%);
}
.cmp-handle::after{
  content:"⇔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;background:var(--cinnabar);color:#f6ead2;
  display:grid;place-items:center;font-size:19px;box-shadow:0 6px 16px rgba(140,35,24,.4);
}
.relic-row{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin:44px auto 0;max-width:960px;}
.relic{
  width:190px;text-align:center;padding:24px 16px;border-radius:12px;
  background:rgba(250,244,228,.8);border:1px solid #d8c8a2;
  box-shadow:0 10px 24px rgba(120,95,55,.15);transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.relic:hover{transform:translateY(-8px) rotate(-1deg);}
.relic:hover .relic-icon{animation:relicHop .6s;}
@keyframes relicHop{0%,100%{transform:none;}40%{transform:translateY(-10px) scale(1.12);}}
.relic-icon{font-size:40px;}
.relic p{font-family:var(--serif);letter-spacing:.2em;margin:12px 0 6px;font-size:16px;}
.relic small{color:var(--ink-soft);font-size:12px;line-height:1.7;display:block;}
.heritage-line{
  text-align:center;margin:46px auto 0;max-width:620px;font-family:var(--serif);
  font-size:18px;line-height:2.2;letter-spacing:.12em;color:var(--cinnabar-deep);
}

/* ================= 尾声 ================= */
#screen-finale{background:linear-gradient(180deg,#e9ddc0 0%,#dfd2b0 60%,#d2c39c 100%);}
.finale-bg{
  position:absolute;inset:0;opacity:0;animation:finaleBg 2.6s ease .3s forwards;
  background:
    radial-gradient(ellipse at 50% 30%,rgba(176,48,36,.10),transparent 55%),
    radial-gradient(ellipse at 20% 85%,rgba(122,154,141,.18),transparent 50%),
    radial-gradient(ellipse at 85% 80%,rgba(201,154,63,.14),transparent 50%);
}
@keyframes finaleBg{to{opacity:1;}}
.finale-inner{margin:auto;text-align:center;position:relative;z-index:5;padding:0 8%;}
.finale-line{
  font-family:var(--serif);font-size:clamp(44px,6.5vw,84px);letter-spacing:.3em;text-indent:.3em;
  color:var(--cinnabar-deep);min-height:1.4em;
}
.finale-line .ch{opacity:0;display:inline-block;animation:chIn .5s ease forwards;}
@keyframes chIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
.finale-sub{margin-top:26px;letter-spacing:.4em;text-indent:.4em;color:var(--ink-soft);font-size:14px;animation-delay:3.2s;}
.finale-actions{margin-top:44px;animation-delay:3.6s;}

/* 响应式微调 */
@media (max-width:980px){
  .fest-rail{width:170px;}
  .ingredients{grid-template-columns:repeat(2,110px);}
}
@media (max-width:760px){
  .cover-actions{flex-direction:column;gap:18px;align-items:center;}
  .tl-track::before{left:24px;}
  .tl-node,.tl-node:nth-child(odd),.tl-node:nth-child(even){width:100%;left:0;text-align:left;padding-left:52px;padding-right:12px;}
  .tl-node::before{left:16px !important;right:auto !important;}
  .tl-node::after{display:none;}
  .fest-rail{display:none;}
  .print-flex,.ink-flex,.dry-flex,.done-flex{flex-direction:column;gap:18px;align-items:center;}
  #sideNav{right:10px;}
}