:root{--paper:#f5f0e8;--ink:#2c2416;--ink-light:#5c5040;--wood:#8b6914;--wood-dark:#5c3d0e;--red:#b5343a;--gold:#b8860b;--cream:#faf6ee;--text:#3a3028;--muted:#8a8070;--jade:#6b8e6b}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:var(--paper);width:100%;height:100%;color:var(--text);-webkit-user-select:none;user-select:none;font-family:Noto Serif SC,STSong,SimSun,Songti SC,serif;overflow:hidden}.bg{z-index:0;background:linear-gradient(#f8f3ea 0%,#ede4d4 35%,#e8dcc8 70%,#f0e6d4 100%);position:fixed;inset:0}.bg:before{content:"";background:radial-gradient(at 50% 0,#8b69140d 0%,#0000 50%),radial-gradient(at 85% 80%,#8b69140a 0%,#0000 40%),radial-gradient(at 15% 70%,#6b8e6b08 0%,#0000 35%);position:absolute;inset:0}.bg-texture{z-index:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.4' numOctaves='4'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");position:fixed;inset:0}.bg-shimmer{pointer-events:none;z-index:1;background:linear-gradient(135deg,#8b691408 0%,#0000 50%,#8b691405 100%);animation:8s ease-in-out infinite woodGrainShimmer;position:fixed;inset:0}.ambient-layer{pointer-events:none;z-index:1;position:fixed;inset:0}.ambient-ink{background:radial-gradient(circle,#2c241614 0%,#0000 70%);border-radius:50%;position:absolute}.ambient-particle{background:var(--gold);border-radius:50%;width:3px;height:3px;position:absolute}.corner-tl,.corner-tr,.corner-bl,.corner-br{pointer-events:none;opacity:.25;width:40px;height:40px;position:absolute}.corner-tl{border-top:2px solid var(--gold);border-left:2px solid var(--gold);top:20px;left:20px}.corner-tr{border-top:2px solid var(--gold);border-right:2px solid var(--gold);top:20px;right:20px}.corner-bl{border-bottom:2px solid var(--gold);border-left:2px solid var(--gold);bottom:20px;left:20px}.corner-br{border-bottom:2px solid var(--gold);border-right:2px solid var(--gold);bottom:20px;right:20px}.stage{cursor:pointer;z-index:2;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:relative}.screen{flex-direction:column;justify-content:center;align-items:center;padding:5vw 7vw;display:flex;position:absolute;inset:0}.click-hint{color:#0000001a;z-index:99;pointer-events:none;font-size:12px;transition:opacity .4s;position:fixed;bottom:32px;right:32px}.stage:active .click-hint{opacity:.12}@keyframes heroBoom{0%{opacity:0;filter:blur(40px);transform:scale(.08)}55%{filter:blur()}75%{transform:scale(1.04)}to{opacity:1;transform:scale(1)}}@keyframes rise{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@keyframes riseSlow{0%{opacity:0;transform:translateY(60px)}to{opacity:1;transform:translateY(0)}}@keyframes inkSpread{0%{opacity:0;clip-path:circle(0%)}to{opacity:1;clip-path:circle(150%)}}@keyframes unfoldH{0%{clip-path:inset(0 50%)}to{clip-path:inset(0 0%)}}@keyframes slideRight{0%{opacity:0;transform:translate(-80px)}to{opacity:1;transform:translate(0)}}@keyframes slideLeft{0%{opacity:0;transform:translate(80px)}to{opacity:1;transform:translate(0)}}@keyframes scaleReveal{0%{opacity:0;transform:scale(.65)}to{opacity:1;transform:scale(1)}}@keyframes popIn{0%{opacity:0;transform:scale(0)}60%{transform:scale(1.12)}to{opacity:1;transform:scale(1)}}@keyframes softFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes lineGrow{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes stampIn{0%{opacity:0;transform:rotate(-20deg)scale(2)}60%{transform:rotate(-8deg)scale(.95)}to{opacity:.7;transform:rotate(-15deg)scale(1)}}@keyframes brushStroke{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0% 0 0)}}@keyframes shutterFlash{0%{opacity:.85}to{opacity:0}}@keyframes spinSlow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes glowPulse{0%,to{box-shadow:0 0 10px #b8860b1a}50%{box-shadow:0 0 30px #b8860b33}}@keyframes charReveal{0%{opacity:0;filter:blur(4px);transform:translateY(8px)}to{opacity:1;filter:blur();transform:translateY(0)}}@keyframes goldSweep{0%{background-position:-200%}to{background-position:200%}}@keyframes rotateBounceIn{0%{opacity:0;transform:rotate(-180deg)scale(0)}60%{transform:rotate(8deg)scale(1.08)}to{opacity:1;transform:rotate(0)scale(1)}}@keyframes blurReveal{0%{opacity:0;filter:blur(20px);transform:scale(1.1)}to{opacity:1;filter:blur();transform:scale(1)}}@keyframes slideUpBounce{0%{opacity:0;transform:translateY(60px)}60%{transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes unfoldV{0%{clip-path:inset(50% 0)}to{clip-path:inset(0)}}@keyframes flickerIn{0%,70%{opacity:0}71%{opacity:.6}72%{opacity:0}73%{opacity:.8}74%{opacity:.3}75%{opacity:0}80%{opacity:1}85%{opacity:.4}90%{opacity:1}to{opacity:1}}@keyframes swayIn{0%{opacity:0;transform:rotate(-6deg)translateY(30px)}60%{transform:rotate(2deg)translateY(-4px)}to{opacity:1;transform:rotate(0)translateY(0)}}@keyframes shockwave{0%{box-shadow:0 0 #b8860b66}to{box-shadow:0 0 0 40px #b8860b00}}@keyframes inkSplashOut{0%{clip-path:circle(0%)}to{clip-path:circle(150%)}}@keyframes inkSplashFade{0%{opacity:0}35%{opacity:1}to{opacity:0;visibility:hidden}}@keyframes inkDropFloat{0%,to{opacity:.06;transform:translate(0)scale(1)}25%{opacity:.12;transform:translate(30px,-40px)scale(1.3)}50%{opacity:.08;transform:translate(-20px,-70px)scale(.9)}75%{opacity:.1;transform:translate(-40px,-20px)scale(1.1)}}@keyframes inkDropFloat2{0%,to{opacity:.04;transform:translate(0)scale(1)}30%{opacity:.09;transform:translate(-25px,-50px)scale(1.4)}60%{opacity:.06;transform:translate(35px,-30px)scale(.8)}85%{opacity:.11;transform:translate(15px,-60px)scale(1.2)}}@keyframes particleDrift{0%{transform:translate(0)rotate(0)}25%{transform:translate(50px,-30px)rotate(90deg)}50%{transform:translate(20px,-80px)rotate(180deg)}75%{transform:translate(-30px,-50px)rotate(270deg)}to{transform:translate(0)rotate(360deg)}}@keyframes particleDrift2{0%{transform:translate(0)rotate(0)}33%{transform:translate(-40px,-60px)rotate(120deg)}66%{transform:translate(30px,-20px)rotate(240deg)}to{transform:translate(0)rotate(360deg)}}@keyframes bgShift{0%,to{background-position:0 0}50%{background-position:2px 1px}}@keyframes woodGrainShimmer{0%,to{opacity:.02}50%{opacity:.06}}@keyframes moteTwinkle{0%,to{opacity:0;transform:scale(.5)}30%{opacity:.7;transform:scale(1)}60%{opacity:.3;transform:scale(.8)}}.anim-heroBoom{animation:1.1s cubic-bezier(.16,1,.3,1) both heroBoom}.anim-rise{animation:.8s cubic-bezier(.16,1,.3,1) both rise}.anim-riseSlow{animation:1.2s cubic-bezier(.16,1,.3,1) both riseSlow}.anim-inkSpread{animation:1s both inkSpread}.anim-unfoldH{animation:.9s both unfoldH}.anim-slideRight{animation:.8s cubic-bezier(.16,1,.3,1) both slideRight}.anim-slideLeft{animation:.8s cubic-bezier(.16,1,.3,1) both slideLeft}.anim-scaleReveal{animation:.8s both scaleReveal}.anim-popIn{animation:.6s cubic-bezier(.34,1.56,.64,1) both popIn}.anim-lineGrow{transform-origin:50%;animation:.8s both lineGrow}.anim-softFloat{animation:6s ease-in-out infinite softFloat}.anim-stampIn{opacity:.7;animation:.7s cubic-bezier(.34,1.56,.64,1) both stampIn}.anim-brushStroke{animation:.9s both brushStroke}.anim-glowPulse{animation:3s ease-in-out infinite glowPulse}.anim-spinSlow{animation:60s linear infinite spinSlow}.anim-charReveal{animation:.5s both charReveal}.anim-goldSweep{background:linear-gradient(90deg,transparent 0%,var(--gold) 45%,var(--gold) 55%,transparent 100%);-webkit-text-fill-color:transparent;background-size:200% 100%;-webkit-background-clip:text;background-clip:text;animation:1.8s both goldSweep}.anim-rotateBounce{animation:.9s cubic-bezier(.34,1.56,.64,1) both rotateBounceIn}.anim-blurReveal{animation:1s cubic-bezier(.16,1,.3,1) both blurReveal}.anim-slideUpBounce{animation:.9s cubic-bezier(.34,1.56,.64,1) both slideUpBounce}.anim-unfoldV{animation:.9s both unfoldV}.anim-flicker{animation:1.5s both flickerIn}.anim-swayIn{animation:.8s cubic-bezier(.34,1.56,.64,1) both swayIn}.anim-shockwave{animation:1.2s ease-out both shockwave}.ink-transition{z-index:300;pointer-events:none;background:var(--ink);position:fixed;inset:0}.ink-transition.active{animation:.9s ease-in both inkSplashFade}.d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}.d4{animation-delay:.4s}.d5{animation-delay:.5s}.d6{animation-delay:.6s}.d8{animation-delay:.8s}.d10{animation-delay:1s}.d12{animation-delay:1.2s}.d15{animation-delay:1.5s}.d18{animation-delay:1.8s}.d20{animation-delay:2s}.cd0{animation-delay:.1s}.cd1{animation-delay:.15s}.cd2{animation-delay:.2s}.cd3{animation-delay:.25s}.cd4{animation-delay:.3s}.cd5{animation-delay:.35s}.cd6{animation-delay:.4s}.cd7{animation-delay:.45s}.cd8{animation-delay:.5s}.cd9{animation-delay:.55s}.cd10{animation-delay:.6s}.cd11{animation-delay:.65s}.cd12{animation-delay:.7s}.cd13{animation-delay:.75s}.cd14{animation-delay:.8s}.chapter-tag{letter-spacing:10px;color:var(--gold);text-transform:uppercase;margin-bottom:32px;font-size:11px;font-weight:600}.hero-title{text-align:center;letter-spacing:3px;color:var(--ink);font-size:clamp(28px,5vw,64px);font-weight:800;line-height:1.2}.hero-title em{color:var(--red);font-style:normal}.hero-subtitle{color:var(--muted);text-align:center;letter-spacing:5px;margin-bottom:28px;font-size:clamp(16px,2vw,24px);font-weight:400}.ornament{background:linear-gradient(90deg,transparent,var(--gold),transparent);width:80px;height:1px;margin:16px auto}.ornament-double{flex-direction:column;align-items:center;gap:4px;margin:16px auto;display:flex}.ornament-double span{background:linear-gradient(90deg,transparent,var(--gold),transparent);width:80px;height:1px;display:block}.body-text{text-align:center;max-width:600px;color:var(--ink-light);white-space:pre-line;font-size:clamp(15px,2vw,22px);line-height:2.1}.verse-line{text-align:center;color:var(--ink);letter-spacing:5px;font-size:clamp(18px,2.8vw,36px);font-weight:300;line-height:2.3}.dynasty-tag{border:1px solid var(--gold);color:var(--gold);letter-spacing:6px;border-radius:0;padding:4px 24px;font-size:12px;display:inline-block}.seal{border:2px solid var(--red);width:65px;height:65px;color:var(--red);opacity:.7;letter-spacing:2px;text-align:center;border-radius:50%;justify-content:center;align-items:center;font-size:12px;line-height:1.3;display:flex;transform:rotate(-15deg)}.card-row{flex-wrap:wrap;justify-content:center;gap:28px;max-width:900px;display:flex}.card{text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff8c;border:1px solid #0000000d;width:210px;padding:28px 22px;transition:all .45s cubic-bezier(.16,1,.3,1);position:relative}.card:hover{border-color:var(--gold);transform:translateY(-8px);box-shadow:0 20px 48px #00000014}.card-icon{margin-bottom:12px;font-size:34px;display:block}.card-title{color:var(--ink);margin-bottom:6px;font-size:16px;font-weight:700}.card-desc{color:var(--muted);font-size:12px;line-height:1.6}.card:after{content:"";border-top:1px solid var(--gold);border-right:1px solid var(--gold);opacity:.3;width:12px;height:12px;position:absolute;top:6px;right:6px}.student-grid{grid-template-columns:repeat(2,1fr);gap:14px;max-width:520px;display:grid}.student-pair{text-align:center;color:var(--ink-light);letter-spacing:3px;background:#fff6;border:1px solid #00000008;padding:14px 18px;font-size:13px;transition:all .3s}.student-pair:hover{border-color:var(--gold);background:#fff9}.info-block{text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff73;border:1px solid #0000000a;max-width:460px;padding:24px 36px}.info-block p{color:var(--ink-light);letter-spacing:2px;font-size:14px;line-height:2.2}.border-frame{pointer-events:none;z-index:1;border:1px solid #b8860b1f;position:absolute;inset:16px}.border-inner{pointer-events:none;z-index:1;border:1px solid #b8860b0f;position:absolute;inset:24px}.ink-drop{pointer-events:none;background:radial-gradient(circle,#2c24160a 0%,#0000 70%);border-radius:50%;width:120px;height:120px;position:absolute}.progress-bar-wrap{z-index:100;opacity:0;background:#00000008;height:2px;transition:opacity .4s;position:fixed;bottom:0;left:0;right:0}.progress-bar-wrap:hover,.stage:hover~.progress-bar-wrap{opacity:1}.progress-bar-fill{background:linear-gradient(90deg,var(--wood),var(--gold),var(--red));height:100%;transition:width .4s}.step-counter{color:var(--muted);z-index:100;opacity:0;letter-spacing:2px;font-size:11px;transition:opacity .4s;position:fixed;top:20px;right:24px}.stage:hover~.step-counter,.step-counter:hover{opacity:1}.shutter{background:var(--paper);pointer-events:none;z-index:200;opacity:0;position:fixed;inset:0}.shutter.flash{animation:.12s shutterFlash}