:root{--paper:#eee3cd;--ink:#342b22;--gold:#c6a36b;--red:#8f2f28;--muted:#b3a389;--line:rgba(193,156,97,.35);color-scheme:dark;font-family:'Songti SC','STSong','Noto Serif CJK SC','SimSun',serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;color:#efe0c0;background:#201c18}button,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button{color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:6px}button:disabled{cursor:wait;opacity:.6}.skip{position:fixed;top:-100px;background:#fff;color:#222;z-index:100}.skip:focus{top:0}header{height:96px;position:fixed;top:0;inset-inline:0;z-index:20;display:flex;align-items:center;padding:0 5.5%;border-bottom:1px solid var(--line);background:linear-gradient(#201c18ee,#201c18aa);gap:40px}body.light{color:var(--ink);background:var(--paper);color-scheme:light}body.light header{background:#f3ead9ee}.brand{display:flex;align-items:center;gap:14px;white-space:nowrap;font-size:21px;letter-spacing:.15em}.brand small{display:block;font:9px/2 sans-serif;letter-spacing:.22em;color:var(--gold)}.brand-seal{border:1px solid var(--gold);outline:1px solid var(--gold);outline-offset:5px;border-radius:50%;font-size:25px;width:42px;height:42px;display:grid;place-items:center;color:var(--gold)}nav{display:flex;gap:30px;margin-left:auto;font-size:14px}nav a{padding:12px 0;position:relative;white-space:nowrap;opacity:.65}nav a.active{opacity:1}nav a.active:after{content:'';height:2px;background:var(--gold);position:absolute;bottom:0;left:20%;right:20%}body.light nav a.active{color:var(--red)}#menu{display:none}#rail{position:fixed;left:3%;top:35%;z-index:10;display:grid;gap:25px}#rail button{border:0;background:none;display:flex;align-items:center;gap:10px;padding:4px;color:inherit;opacity:.4;font-size:11px}#rail i{width:6px;height:6px;border:1px solid currentColor;display:block;transform:rotate(45deg)}#rail button.active{opacity:1;color:var(--gold)}#rail .active i{background:currentColor;box-shadow:0 0 15px #dfb566}footer{height:58px;position:fixed;bottom:0;inset-inline:5.5%;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);z-index:12;font-size:12px;letter-spacing:.1em;background:linear-gradient(transparent,#201c18bb)}body.light footer{background:linear-gradient(transparent,#eee3cdee)}.foot-name{opacity:.45;font-size:11px}.text-button{padding:10px 0;background:none;border:0;letter-spacing:.12em}.text-button:hover{color:var(--gold)}.icon-button{border:0;background:none;font-size:26px;width:44px;height:44px}.scene{position:relative;min-height:100svh;padding:136px 8% 90px 12%;overflow:hidden;animation:reveal .65s ease}.split{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:4vw;min-height:calc(100svh - 226px)}.copy{position:relative;z-index:3;max-width:560px}.eyebrow{font:11px/1.8 sans-serif;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:0 0 25px}.chapter{display:inline-block;margin-right:15px;color:var(--gold)}h1,h2,h3,p{margin-top:0}h1{font-family:'STKaiti','Kaiti SC','KaiTi',serif;font-weight:500;font-size:clamp(56px,6.6vw,104px);line-height:1.15;letter-spacing:.06em;margin-bottom:24px}h1 .stamp{font-size:13px;display:inline-flex;writing-mode:vertical-rl;background:var(--red);color:#eedab1;padding:6px 4px;letter-spacing:.15em;vertical-align:middle;margin-left:12px;border-radius:3px}h2{font-size:26px;font-weight:500;letter-spacing:.08em}h3{font-weight:500;letter-spacing:.08em}.subtitle{font-size:clamp(19px,2vw,28px);line-height:1.7;letter-spacing:.13em;margin-bottom:20px}.desc{font-size:15px;line-height:2;opacity:.7;letter-spacing:.05em;max-width:470px}.buttons{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:50px;padding:13px 28px;border:1px solid var(--gold);background:transparent;letter-spacing:.12em;font-size:15px;transition:.25s}.btn:hover{background:#c5a16620;transform:translateY(-2px)}.btn.primary{background:#e9d6ad;color:#542b23;border-color:#e9d6ad}.light .btn.primary{background:var(--red);color:#fff1d6;border-color:var(--red)}.btn.small{font-size:13px;padding:9px 18px;min-height:42px}.quiet{font-size:11px;opacity:.48;line-height:1.8;margin-top:22px;letter-spacing:.1em}.hero{background:radial-gradient(ellipse at 25% 35%,#413226 0,#201c18 65%)}.hero .art{height:calc(100svh - 160px);min-height:580px;position:absolute;right:0;top:96px;width:53%;object-fit:cover;object-position:center;mask-image:linear-gradient(to right,transparent,#000 14%);opacity:.94}.hero .split{grid-template-columns:1fr 1fr}.hero .copy{padding:5vh 0}.hero h1{color:#e6c58a;font-size:clamp(64px,8vw,125px)}.vertical-poem{position:absolute;right:4%;top:23%;writing-mode:vertical-rl;letter-spacing:.5em;font-size:12px;opacity:.7}.scroll-hint{display:flex;align-items:center;gap:20px;margin-top:50px;font-size:10px;letter-spacing:.22em;opacity:.45}.scroll-hint:before{content:'';width:45px;height:1px;background:currentColor}.origin{background-image:url('assets/origin.webp');background-size:cover;background-position:center}.origin .copy{max-width:600px}.origin h1{font-size:clamp(48px,6vw,88px)}.origin .desc{max-width:360px}.hotspots{position:absolute;bottom:25%;left:18%;right:7%;display:flex;justify-content:space-between;gap:20px}.hotspot{background:#f4ead9ed;color:#5c3a24;border:1px solid #b49258;padding:12px 20px;border-radius:30px;box-shadow:0 4px 30px #32221235;letter-spacing:.08em}.hotspot:before{content:'＋';margin-right:10px;color:#9d3e2b}.hotspot:hover{background:#fff7e9;transform:translateY(-3px)}.structure,.details{background:radial-gradient(ellipse at 70% 40%,#faf1df,#e9ddc6)}.structure .split{grid-template-columns:.85fr 1.35fr}.structure h1{font-size:clamp(44px,4.6vw,70px)}.assembly{height:66vh;min-height:480px;position:relative;display:grid;place-items:center}.assembly>.whole{max-height:100%;max-width:85%;mix-blend-mode:multiply;object-fit:contain}.part-tabs{display:grid;margin:28px 0 22px;max-width:340px}.part-tabs button{border:0;border-bottom:1px solid #af915d45;background:transparent;padding:14px 12px;text-align:left;display:flex;justify-content:space-between}.part-tabs button.active{background:#8f2f280b;color:var(--red);border-left:2px solid var(--red)}.assembly .piece{position:absolute;background:none;border:1px solid transparent;transition:all .65s ease;padding:0}.piece img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.piece.selected{border-color:#af624f80;background:#a9633410}.piece.crown{width:64%;height:27%;left:6%;top:0}.piece.body{width:50%;height:65%;left:12%;top:29%}.piece.bands{width:22%;height:74%;right:0;top:17%}.piece span{position:absolute;bottom:-17px;left:45%;white-space:nowrap;font-size:12px;letter-spacing:.1em;color:var(--red)}.assembly .caption{position:absolute;bottom:-24px;font-size:10px;color:#887052;letter-spacing:.16em}.details .split{grid-template-columns:1.15fr 1fr;gap:6vw}.detail-photo{width:100%;height:65vh;min-height:450px;object-fit:cover;box-shadow:0 18px 50px #38201518;cursor:zoom-in}.details h1{font-size:clamp(42px,4.5vw,66px)}.tabs{display:flex;justify-content:space-between;gap:12px;margin:27px 0}.tabs button{border:1px solid #b5945f77;width:76px;height:76px;border-radius:50%;background:transparent;position:relative;font-size:17px}.tabs button.active{border-color:var(--red);color:var(--red);outline:1px solid #9f493b66;outline-offset:4px}.detail-text{min-height:115px}.detail-text h2{font-size:22px;margin-bottom:14px}.miniatures{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:15px}.miniatures button{background:none;border:0;padding:0;text-align:left;font-size:12px}.miniatures img{width:100%;height:80px;object-fit:cover;border:1px solid #b5945f50;margin-bottom:8px}.ritual{background:radial-gradient(ellipse at 65% 40%,#64271f 0,#3a1515 48%,#251214 100%)}.ritual:before{content:'';position:absolute;inset:8%;background:repeating-radial-gradient(ellipse at 65% 50%,transparent 0 120px,#c19e5310 121px 122px,transparent 123px 160px);pointer-events:none}.ritual .lamp-art{width:100%;height:69vh;min-height:450px;object-fit:contain;mask-image:linear-gradient(transparent,#000 4%,#000 96%,transparent);filter:drop-shadow(0 0 18px #edbe6020)}.ritual h1{font-size:clamp(48px,5.6vw,85px);color:#e9cb91}.wish-list{display:flex;gap:20px;letter-spacing:.15em;font-size:12px;margin-top:34px;color:#cba76c}.wish-list span+span:before{content:'·';margin-right:20px}.result-copy .blessing{display:flex;gap:24px;margin:30px 0;align-items:center}.slip-small{writing-mode:vertical-rl;background:#eddab4;color:#643528;padding:20px 13px;border:1px solid #bd945a;outline:1px solid #bd945a;outline-offset:5px;font-size:25px;letter-spacing:.25em;white-space:nowrap}.blessing p{font-size:18px;line-height:2.1;margin:0}.drawing{text-align:center;display:flex;flex-direction:column;align-items:center;min-height:calc(100svh - 226px)}.drawing h1{font-size:clamp(45px,5vw,72px);margin-bottom:8px}.draw-stage{height:350px;width:280px;position:relative;margin:12px auto}.vessel{position:absolute;bottom:20px;left:55px;width:170px;height:190px;border-radius:14px 14px 42px 42px;background:repeating-linear-gradient(90deg,#753629 0 4px,#914b30 5px 10px);border:4px double #d3a55c;box-shadow:inset 15px 0 25px #30110caa,0 25px 65px #13070480;animation:shake .55s ease-in-out infinite;z-index:2;display:grid;place-items:center}.vessel:before,.vessel:after{content:'';position:absolute;left:4px;right:4px;height:8px;border-block:1px solid #b88b4b;top:18px}.vessel:after{top:auto;bottom:18px}.vessel span{font-family:KaiTi,serif;color:#f0d59c;font-size:68px;border:1px solid #b88b4b;padding:5px 16px}.sticks{position:absolute;left:76px;top:96px;display:flex;gap:5px;transform:rotate(-4deg)}.sticks i{width:16px;height:120px;background:linear-gradient(90deg,#bc8e50,#efd4a0);border-radius:5px;transform:rotate(var(--r))}.rising-slip{position:absolute;left:126px;top:75px;width:29px;height:170px;background:linear-gradient(90deg,#c99a5d,#f3dcac);border:1px solid #ffe4a6;border-radius:8px;box-shadow:0 0 25px #ffe7a133;animation:rise 2.6s ease-in-out forwards;z-index:1}.rising-slip:before{content:'云';position:absolute;top:10px;left:5px;color:#9d6432;font-size:16px}.draw-status{color:#dfc58d;letter-spacing:.2em;margin-top:0}.dots{animation:pulse 1s infinite}.finale{background:#121d20;text-align:center;padding-top:132px}.finale h1{font-size:clamp(48px,6vw,90px);color:#e5c78b}.finale .copy{margin:auto;max-width:800px}.finale .buttons{justify-content:center;margin-top:24px}.final-panorama{position:absolute;bottom:50px;left:0;width:100%;height:45vh;object-fit:cover;mask-image:linear-gradient(transparent,#000 35%);opacity:.88}.finale .copy{z-index:3}.saved-badge{display:inline-block;border:1px solid #c8ab6c55;padding:10px 18px;margin-top:20px;font-size:12px;color:#e8c792;background:#172123aa}.test-panel{position:fixed;bottom:65px;right:10px;z-index:30;padding:10px;background:#fff;color:#222;border:1px solid #aaa}.test-panel button{color:#222;margin:3px}dialog{background:#f2e8d6;color:#392d23;border:1px solid #b1976a;padding:24px;width:min(900px,92vw);max-height:90svh;box-shadow:0 30px 120px #0008}dialog::backdrop{background:#100b08bb;backdrop-filter:blur(7px)}.modal-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #b1976a66;margin-bottom:20px}.modal-head h2{font-size:23px}.modal-copy{line-height:2;font-size:16px;max-width:650px;margin:20px auto}.modal-photo{max-height:47vh;width:100%;object-fit:contain}.zoom-viewport{height:55vh;overflow:hidden;background:#e6dac2;cursor:grab;touch-action:none;display:flex;align-items:center;justify-content:center}.zoom-viewport img{max-width:90%;max-height:90%;object-fit:contain;user-select:none;pointer-events:none;transform-origin:center}.zoom-tools{display:flex;align-items:center;justify-content:center;gap:15px;margin:14px}.zoom-tools input{max-width:160px;accent-color:var(--red)}.card-preview{height:57vh;max-width:100%;display:block;margin:auto;object-fit:contain}.modal-actions{display:flex;justify-content:center;gap:12px;margin-top:18px;flex-wrap:wrap}dialog .btn{color:#68362a}#toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);padding:13px 24px;background:#efe2c8;color:#542e22;box-shadow:0 10px 30px #0005;z-index:100;opacity:0;pointer-events:none;transition:.2s;font-size:13px}#toast.show{opacity:1}@keyframes reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes shake{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}@keyframes rise{from{transform:translateY(80px) rotate(0)}to{transform:translateY(-78px) rotate(9deg)}}@keyframes pulse{50%{opacity:.3}}
@media(min-width:1500px){.scene{padding-left:14%;padding-right:10%}}@media(max-width:1100px){header{padding-inline:4%;gap:20px}nav{gap:16px;font-size:12px}.brand{font-size:17px}.scene{padding-left:10%;padding-right:6%}#rail{left:2%}.blessing p{font-size:15px}.tabs button{width:62px;height:62px}.ritual .lamp-art{min-height:350px}.foot-name{display:none}}@media(max-width:760px){header{height:76px;padding-inline:6%;justify-content:space-between}.brand{font-size:17px}.brand-seal{width:32px;height:32px;font-size:20px}.brand small{font-size:8px}#menu{display:block}nav{display:none;position:absolute;top:75px;left:0;right:0;margin:0;padding:25px;background:#241a17;grid-template-columns:repeat(2,1fr);gap:15px;text-align:center;font-size:15px}body.light nav{background:#eee3cd}nav.open{display:grid}#rail{display:none}footer{height:53px;inset-inline:6%;font-size:10px;background:#201c18ef}.scene{padding:110px 7% 90px;min-height:100svh;overflow:hidden}.split{display:flex;flex-direction:column;gap:26px;min-height:0;align-items:stretch}.copy{max-width:none}h1{font-size:57px}.eyebrow{font-size:10px;margin-bottom:20px}.desc{font-size:14px}.subtitle{font-size:18px}.btn{min-height:48px;font-size:14px;padding:12px 20px}.buttons{gap:12px;margin-top:24px}.hero{min-height:100svh}.hero .art{position:relative;top:auto;right:auto;width:100%;height:46vh;min-height:300px;margin:0;object-fit:cover;object-position:center 55%;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}.hero .split{display:block}.hero .copy{padding:0}.hero h1{font-size:66px;white-space:nowrap}.hero .subtitle{font-size:16px}.scroll-hint,.vertical-poem{display:none}.hero .buttons{margin-bottom:12px}.origin{background-size:auto 67%;background-position:center bottom 40px;background-repeat:no-repeat;background-color:#eee3cd;min-height:1000px}.origin .copy{background:linear-gradient(#eee3cd,transparent)}.origin h1{font-size:53px}.hotspots{bottom:20%;left:7%;right:7%;flex-wrap:wrap;justify-content:center;gap:12px}.hotspot{padding:12px 15px}.structure h1,.details h1{font-size:48px}.assembly{min-height:450px;height:58vh}.part-tabs{display:flex;max-width:none}.part-tabs button{flex:1;gap:10px}.part-tabs button.active{border-left:0;border-bottom:2px solid var(--red)}.detail-photo{height:47vh;min-height:280px;object-position:center}.details .split{flex-direction:column-reverse}.tabs{justify-content:flex-start;gap:28px;margin:20px 0}.detail-text{min-height:0}.miniatures img{height:75px}.details .buttons{margin-top:20px}.ritual h1{font-size:60px}.ritual .lamp-art{height:65vh;max-height:700px;min-height:350px}.blessing p{font-size:16px}.draw-stage{margin-top:25px}.drawing h1{font-size:48px}.drawing .subtitle{font-size:16px}.finale{min-height:1000px}.finale h1{font-size:56px}.final-panorama{height:48vh;bottom:53px;object-position:center}.finale .buttons{gap:10px}.saved-badge{line-height:1.8}.modal-head h2{font-size:19px}dialog{padding:18px}.zoom-tools{gap:8px}.zoom-tools input{max-width:100px}.card-preview{height:54vh}.test-panel{max-width:240px}.quiet{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Keep navigation anchored to the viewport; only the chapter content scrolls. */
:root{--header-height:96px;--footer-height:58px;--bottom-safe:env(safe-area-inset-bottom,0px)}
html,body{height:100%;overflow:hidden}
#main{position:fixed;inset:var(--header-height) 0 calc(var(--footer-height) + var(--bottom-safe));overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scroll-padding-bottom:24px}
.scene{min-height:100%;padding-top:40px;padding-bottom:32px}
.hero .art{top:0}
footer{inset-inline:0;bottom:0;height:calc(var(--footer-height) + var(--bottom-safe));padding:0 5.5% var(--bottom-safe);background:#201c18;z-index:25}
body.light footer{background:#eee3cd}
.finale{padding-top:36px}
@media(max-width:760px){:root{--header-height:76px;--footer-height:53px}.scene{padding-top:34px;padding-bottom:37px}.hero{min-height:100%}.hero .art{top:auto}.origin,.finale{min-height:871px}footer{padding-inline:6%}}

/* A live ritual around the supplied illustration, with accessible HTML controls. */
.wish-scene{padding:22px 0 24px;display:flex;flex-direction:column;align-items:center;background:#350d08;min-height:100%;isolation:isolate}
.wish-heading{position:relative;z-index:2;text-align:center;width:100%;background:radial-gradient(ellipse,#542014,#350d08 75%)}
.wish-heading .eyebrow{margin-bottom:7px;color:#d5b387}.wish-heading h1{font:500 clamp(46px,6vw,88px)/1.15 'STKaiti','Kaiti SC','KaiTi',serif;margin-bottom:8px;color:#efce92;letter-spacing:.12em;text-shadow:0 2px 20px #dc962c30}.wish-heading .subtitle{margin:0;font-size:clamp(16px,1.8vw,25px);letter-spacing:.25em;color:#e6cba0}
.wish-art{position:relative;width:100%;max-width:1536px;aspect-ratio:1536/455;overflow:hidden;flex-shrink:0;mask-image:linear-gradient(transparent,#000 9%,#000 92%,transparent)}
.wish-art>img{position:absolute;left:0;top:-59.3%;width:100%;height:auto;max-width:none}
.wish-controls{position:relative;z-index:3;text-align:center;width:100%;padding:0 20px}.wish-controls .quiet{margin:12px 0 0}.wish-controls .btn.primary{background:linear-gradient(110deg,#b98a48,#f0d199,#cfa764);color:#511d10;border:1px solid #ffe4b0;box-shadow:0 0 35px #d29b3520}
.intent-options{display:flex;justify-content:center;gap:12px;margin:0 0 16px;flex-wrap:wrap}.intent-options button{background:#45180f88;border:1px solid #b58a4d66;color:#c8ab7d;border-radius:24px;padding:8px 19px;font-size:13px;transition:.2s}.intent-options .selected{color:#ffe4ad;border-color:#dbb477;background:#9a602d44}
.wish-halo{position:absolute;left:40%;bottom:4%;width:20%;height:12%;border:1px solid #ffdb8b;border-radius:50%;opacity:.4;box-shadow:0 0 30px #eeb65c55,inset 0 0 30px #eeb65c44}.is-drawing .wish-halo{animation:halo-breathe 1.2s infinite}.wish-sparkles i{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:#ffe5a2;box-shadow:0 0 12px 3px #ffc65a80;opacity:0}.is-drawing .wish-sparkles i{animation:wish-float 1.8s calc(var(--i)*-.17s) infinite}.is-drawing .wish-art>img{animation:ritual-glow 1.8s ease-in-out infinite}.draw-progress{width:160px;height:2px;background:#c9a15f35;margin:18px auto 10px;overflow:hidden}.draw-progress span{height:100%;display:block;background:#f2d398;transform-origin:left;animation:draw-time 3.6s linear forwards}.wish-controls .draw-status{margin:0}.scene{animation:chapter-arrive .55s ease both}
@keyframes chapter-arrive{from{opacity:.15;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}@keyframes wish-float{0%{opacity:0;transform:translateY(25px)}35%{opacity:1}100%{opacity:0;transform:translateY(-70px)}}@keyframes halo-breathe{50%{transform:scale(1.15);opacity:.9}}@keyframes ritual-glow{50%{filter:brightness(1.18)}}@keyframes draw-time{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:760px){.wish-scene{padding-top:25px;min-height:100%;padding-bottom:22px}.wish-heading h1{font-size:48px}.wish-heading .eyebrow{font-size:9px}.wish-art{width:180%;max-width:none;aspect-ratio:1536/455;margin-top:10px}.wish-controls{margin-top:0}.intent-options{gap:7px}.intent-options button{padding:7px 12px;font-size:12px}.wish-controls .btn{font-size:14px}.wish-controls .quiet{font-size:10px}.wish-heading .subtitle{font-size:16px}}
@media(prefers-reduced-motion:reduce){.scene,.is-drawing .wish-art>img,.is-drawing .wish-sparkles i,.is-drawing .wish-halo,.draw-progress span{animation:none}.draw-progress span{transform:none}}

.wish-art>img{mask-image:linear-gradient(to right,transparent 0 10%,#000 19% 94%,transparent 100%)}
