@font-face{font-family:"XunyangTitle";src:url("./assets/title-calligraphy.ttf") format("truetype");font-display:swap}
:root{--ink:#071526;--navy:#041b3c;--blue:#0a3d78;--blue-deep:#031126;--paper:#f0e6d1;--paper-light:#fff9eb;--gold:#d5aa59;--gold-bright:#f3d58b;--red:#9f2d2b;--line:rgba(218,177,96,.34);--cut-progress:0%}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--blue-deep)}
body{margin:0;color:var(--paper);font-family:"Noto Serif SC","Songti SC","SimSun",serif;background:var(--blue-deep);overflow-x:hidden}
body.intro-playing{overflow:hidden}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.skip-link{position:fixed;left:1rem;top:-5rem;z-index:9999;padding:.7rem 1rem;background:#fff;color:#000}
.skip-link:focus{top:1rem}
.scroll-progress{position:fixed;inset:0 0 auto;height:2px;z-index:90;background:rgba(255,255,255,.08)}
.scroll-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-bright));box-shadow:0 0 12px var(--gold)}

/* The opening keeps the material of paper; only its movement borrows the feel of a curtain. */
.paper-opening{--zip-x:30px;position:fixed;inset:0;z-index:1000;display:none;overflow:hidden;background:#031126;touch-action:none;cursor:default}
.paper-opening.is-active{display:block}
.opening-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(1.02) contrast(1.02)}
.opening-paper-window{position:absolute;inset:0;overflow:hidden;background:transparent}
.opening-paper,.opening-fold{position:absolute;inset:-1px;will-change:clip-path,transform;transition:transform .62s cubic-bezier(.72,.02,.21,1)}
.opening-paper{background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2%,rgba(0,5,20,.11) 6%,rgba(255,255,255,.025) 10%),
  radial-gradient(circle at 21% 24%,rgba(68,130,194,.2),transparent 27%),
  radial-gradient(circle at 76% 68%,rgba(15,62,121,.3),transparent 31%),
  repeating-radial-gradient(ellipse at 38% 45%,rgba(255,255,255,.035) 0 1px,transparent 1.5px 5px),
  linear-gradient(135deg,#092f63 0%,#05234c 45%,#061b3d 100%)}
.opening-paper::after{content:"";position:absolute;inset:0;opacity:.38;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cpath d='M0 18c20-7 35 9 55 1s29-4 41 2M0 59c18 6 33-8 52-1s30 2 44-5M18 0c-5 17 8 27 1 45s-3 35 5 51M67 0c8 17-5 29 1 48s3 31-4 48' fill='none' stroke='%23a6caeb' stroke-opacity='.08' stroke-width='.7'/%3E%3C/svg%3E")}
.opening-fold{pointer-events:none;background:linear-gradient(180deg,rgba(255,222,154,.2),rgba(23,74,133,.18) 45%,rgba(0,8,26,.28));filter:drop-shadow(0 0 15px rgba(226,183,92,.22));opacity:.82}
.opening-paper-top{filter:drop-shadow(0 18px 28px rgba(0,4,18,.72))}.opening-paper-bottom{filter:drop-shadow(0 -18px 28px rgba(0,4,18,.72))}
.paper-opening.is-unfolding .opening-paper-top,.paper-opening.is-unfolding .opening-fold-top{transform:translateY(-104%)}
.paper-opening.is-unfolding .opening-paper-bottom,.paper-opening.is-unfolding .opening-fold-bottom{transform:translateY(104%)}
.paper-opening.is-done{pointer-events:none}
.opening-cut{position:absolute;left:0;top:calc(50% - 90px);width:100%;height:180px;overflow:visible;pointer-events:none;opacity:.9;transition:opacity .2s}
.opening-cut path{fill:none;stroke-linecap:round;stroke-dashoffset:100%;transition:stroke-dashoffset .05s linear}
.opening-cut-shadow{stroke:rgba(0,0,0,.5);stroke-width:7;filter:blur(5px)}
.opening-cut-line{stroke:var(--gold-bright);stroke-width:2;filter:drop-shadow(0 0 8px rgba(246,210,128,.9))}
.paper-opening.is-unfolding .opening-cut{opacity:0}
.opening-title{position:absolute;left:50%;top:36%;z-index:4;width:min(90vw,720px);transform:translate(-50%,-56%);text-align:center;color:#f8ebcf;pointer-events:none;transition:opacity .12s,transform .12s}
.opening-title small{display:block;margin-bottom:1rem;font-size:.76rem;letter-spacing:.55em;color:rgba(248,235,207,.7)}
.opening-title strong{display:block;font-family:"XunyangTitle","KaiTi",serif;font-size:clamp(4rem,9vw,8.5rem);font-weight:400;line-height:1;text-shadow:0 8px 35px rgba(0,0,0,.3)}
.opening-title span{display:block;margin-top:1.2rem;font-size:.9rem;letter-spacing:.48em;color:var(--gold-bright)}
.opening-zipper{position:absolute;left:var(--zip-x);top:57%;z-index:7;width:78px;height:78px;transform:translate(-50%,-50%) rotate(var(--zip-turn,0));border:1px solid #f7df9b;border-radius:50%;color:#51320c;background:radial-gradient(circle at 35% 30%,#fff0b1 0,#e1ac4d 30%,#a86c17 68%,#6b3e09 100%);box-shadow:0 0 0 5px rgba(233,190,97,.2),0 0 25px rgba(241,199,106,.65),0 12px 28px rgba(0,0,0,.38);touch-action:none;transition:box-shadow .16s,transform .12s}
.opening-zipper::before{content:"";position:absolute;inset:8px;border:1px solid rgba(255,246,210,.78);border-radius:50%}
.opening-zipper i{position:absolute;left:50%;top:13px;width:13px;height:13px;transform:translateX(-50%) rotate(45deg);border:1px solid rgba(86,48,6,.65);border-radius:3px;background:rgba(255,245,208,.6)}
.opening-zipper span{position:absolute;inset:0;display:grid;place-items:center;padding-top:13px;font-weight:700;letter-spacing:.15em}
.opening-zipper em{position:absolute;left:50%;top:86px;min-width:58px;transform:translateX(-50%) rotate(calc(var(--zip-turn,0) * -1));padding:.25rem .55rem;border:1px solid rgba(223,184,96,.35);border-radius:999px;color:#f7e8c0;background:rgba(2,17,39,.65);font-size:.7rem;font-style:normal;letter-spacing:.08em}
.paper-opening.is-dragging .opening-zipper{box-shadow:0 0 0 8px rgba(233,190,97,.17),0 0 42px rgba(244,205,118,.9),0 14px 34px rgba(0,0,0,.42);transform:translate(-50%,-50%) rotate(var(--zip-turn,0)) scale(1.07)}
.opening-zipper.is-tick{animation:zipTick .18s ease}
@keyframes zipTick{50%{filter:brightness(1.32);transform:translate(-50%,-50%) rotate(var(--zip-turn,0)) scale(1.12)}}
.opening-instruction{position:absolute;left:50%;top:calc(57% + 108px);z-index:5;transform:translateX(-50%);margin:0;color:rgba(248,235,207,.72);font-size:.78rem;letter-spacing:.24em;transition:opacity .16s}
.opening-skip{position:absolute;right:2rem;bottom:1.8rem;z-index:8;border:0;border-bottom:1px solid rgba(255,255,255,.35);padding:.45rem .1rem;color:rgba(255,255,255,.58);background:none;font-size:.75rem;letter-spacing:.15em}
.opening-seam{position:absolute;left:0;right:0;top:57%;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.2rem;transform:translateY(-50%);color:#f4d68c;filter:drop-shadow(0 2px 8px rgba(0,0,0,.8));transition:opacity .26s}
.opening-seam span{height:1px;background:repeating-linear-gradient(90deg,#e5bd66 0 9px,transparent 9px 18px)}
.opening-seam b{padding:.55rem 1rem;border:1px solid rgba(232,193,109,.48);border-radius:999px;background:rgba(3,19,43,.58);font-size:.68rem;font-weight:400;letter-spacing:.26em;white-space:nowrap;backdrop-filter:blur(8px)}
.paper-opening.is-unfolding .opening-seam{opacity:0}

.site-header{position:fixed;inset:0 0 auto;z-index:80;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:72px;padding:0 clamp(1rem,3vw,3rem);border-bottom:1px solid rgba(222,183,101,.15);background:rgba(2,16,38,.34);backdrop-filter:blur(14px) saturate(1.15);transition:background .35s,border-color .35s,color .35s}
.site-header.is-scrolled{background:rgba(3,14,31,.88);border-color:rgba(217,174,89,.2);backdrop-filter:blur(14px)}
.brand{grid-column:1;grid-row:1;justify-self:start;display:flex;align-items:baseline;gap:.75rem;color:#f6e8c8}
.site-header:not(.is-scrolled) .brand{opacity:1}
.brand strong{font-family:"XunyangTitle","KaiTi",serif;font-size:1.55rem;font-weight:400;letter-spacing:.08em}
.brand span{font-size:.68rem;letter-spacing:.35em;color:var(--gold)}
.top-nav{grid-column:2;grid-row:1;display:flex;align-items:center;gap:clamp(1.2rem,3vw,3.4rem)}
.top-nav a{position:relative;padding:.55rem 0;color:rgba(248,235,207,.78);font-size:.72rem;letter-spacing:.22em;white-space:nowrap;transition:color .25s,text-shadow .25s}
.top-nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:1px;background:var(--gold-bright);transition:left .25s,right .25s}
.top-nav a:hover{color:#fff0c8;text-shadow:0 0 15px rgba(244,203,112,.58)}.top-nav a:hover::after{left:0;right:.22em}
body.is-making .top-nav{opacity:0;pointer-events:none}
.making-progress{grid-column:2;grid-row:1;display:flex;gap:1.7rem;opacity:0;pointer-events:none;transition:opacity .3s}
body.is-making .making-progress{opacity:1}
.making-progress span{position:relative;color:rgba(246,232,200,.44);font-size:.68rem;letter-spacing:.22em;transition:color .3s}
.making-progress span::after{content:"";position:absolute;left:50%;bottom:-12px;width:4px;height:4px;transform:translateX(-50%);border-radius:50%;background:currentColor}
.making-progress span.is-active{color:var(--gold-bright)}
.replay-opening{grid-column:3;grid-row:1;justify-self:end;border:1px solid rgba(236,199,119,.28);border-radius:999px;padding:.48rem .85rem;color:rgba(246,232,200,.75);background:rgba(4,24,52,.36);font-size:.68rem;letter-spacing:.12em}
.site-header:not(.is-scrolled) .replay-opening{opacity:.72}

.hero{position:relative;display:grid;place-items:center;min-height:100svh;overflow:hidden;background:
  radial-gradient(circle at 50% 42%,rgba(19,76,141,.48),transparent 40%),
  repeating-radial-gradient(circle at 50% 45%,rgba(255,255,255,.02) 0 1px,transparent 1px 5px),#020b18}
.hero::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 43%,transparent 46%,rgba(0,5,16,.08) 68%,rgba(0,4,13,.32) 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(0,6,18,.08),transparent 18%,transparent 77%,rgba(0,5,16,.16))}
.hero-halo{display:none}
.cursor-light{position:absolute;left:50%;top:50%;z-index:3;width:clamp(260px,34vw,520px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(255,222,154,.18) 0,rgba(246,190,91,.08) 32%,transparent 70%);mix-blend-mode:screen;filter:blur(7px);transition:opacity .35s}
.hero:hover .cursor-light{opacity:1}
.moon-glow{position:absolute;left:89%;top:23.2%;z-index:3;width:clamp(62px,6.2vw,108px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,241,190,.2) 0,rgba(242,189,82,.1) 38%,transparent 72%);box-shadow:0 0 24px rgba(250,204,102,.28);mix-blend-mode:screen;animation:moonBreath 3.6s ease-in-out infinite}
@keyframes moonBreath{0%,100%{opacity:.55;filter:blur(1px);transform:translate(-50%,-50%) scale(.94)}50%{opacity:1;filter:blur(2px);transform:translate(-50%,-50%) scale(1.08)}}
.hero-poster{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;animation:heroArrive 1.2s cubic-bezier(.2,.76,.22,1) both}
.hero-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(1,9,22,.18),transparent 18%);pointer-events:none}
.hero-poster img{width:100%;height:100%;object-fit:cover;object-position:center}
@keyframes heroArrive{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:none}}
.hero-copy{position:absolute;left:50%;bottom:5vh;z-index:5;width:auto;transform:translateX(-50%);text-align:center}
.hero-copy p{margin:0 0 1.2rem;color:rgba(245,229,196,.58);font-size:.68rem;letter-spacing:.42em}
.hero-copy h1{margin:0;font-family:"XunyangTitle","KaiTi",serif;font-size:clamp(2.4rem,4vw,5rem);font-weight:400;line-height:.94;letter-spacing:.03em}
.hero-copy h1 span{display:block;margin:.5rem 0 2rem;color:var(--gold-bright);font-size:.55em;letter-spacing:.36em}
.hero-copy>p,.hero-copy h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hero-start{display:inline-flex;align-items:center;gap:1.6rem;border:1px solid rgba(244,201,111,.88);border-radius:3px;padding:.9rem 1.35rem;color:#fff0cf;background:linear-gradient(135deg,rgba(139,35,31,.76),rgba(89,19,25,.7));box-shadow:inset 0 0 0 1px rgba(255,229,167,.1),0 8px 22px rgba(0,0,0,.32),0 0 14px rgba(224,170,65,.13);backdrop-filter:blur(8px);font-size:.82rem;letter-spacing:.24em;animation:heroButtonFloat 2.8s ease-in-out infinite;transition:box-shadow .25s,border-color .25s,filter .25s}
.hero-start i{color:#ffd77f;font-style:normal;transition:transform .25s}.hero-start:hover{border-color:#ffe2a0;filter:brightness(1.1);box-shadow:inset 0 0 18px rgba(255,214,126,.22),0 0 16px rgba(255,202,84,.75),0 0 42px rgba(231,166,48,.55),0 14px 30px rgba(0,0,0,.4)}.hero-start:hover i{transform:translateY(5px)}
@keyframes heroButtonFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hero-caption{position:absolute;right:clamp(1.5rem,4vw,4.5rem);bottom:12vh;z-index:2;margin:0;writing-mode:vertical-rl;color:rgba(234,209,157,.45);font:600 .58rem/1.2 sans-serif;letter-spacing:.36em}

.invitation{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);align-items:center;gap:clamp(3rem,8vw,10rem);min-height:100svh;padding:9rem clamp(2rem,8vw,9rem);text-align:left;color:var(--ink);background:
  radial-gradient(circle at 50% 45%,rgba(255,255,255,.65),transparent 38%),
  repeating-radial-gradient(circle at 50% 50%,rgba(6,35,71,.035) 0 1px,transparent 1px 6px),var(--paper)}
.invitation::before{content:"九江";position:absolute;left:50%;top:50%;transform:translate(-50%,-51%);font-family:"XunyangTitle","KaiTi",serif;font-size:min(36vw,31rem);color:rgba(5,31,66,.035);white-space:nowrap}
.invitation-index{position:relative;margin:0 0 2rem;color:#8a6b34;font-size:.67rem;letter-spacing:.32em}
.invitation h2{position:relative;margin:0;font-size:clamp(3.4rem,6.5vw,7.4rem);font-weight:400;line-height:1.16;letter-spacing:.02em}
.invitation-line{position:relative;display:flex;align-items:center;width:min(700px,80vw);gap:1.5rem;margin:3.2rem 0 2rem;color:#896526}
.invitation-line span{height:1px;flex:1;background:linear-gradient(90deg,transparent,#a9833e)}.invitation-line span:last-child{transform:scaleX(-1)}
.invitation-line b{font-size:.72rem;font-weight:400;letter-spacing:.45em;white-space:nowrap}
.invitation>p:last-child{position:relative;max-width:590px;margin:0;color:#5e5d59;font-size:.95rem;line-height:2;letter-spacing:.08em}
.concept-heading,.concept-body{position:relative;z-index:1}
.concept-subtitle{max-width:650px;margin:2.2rem 0 0;color:#565c61;font-size:1rem;line-height:2.05;letter-spacing:.08em}
.concept-body{padding:clamp(2rem,4vw,4rem);border-top:1px solid rgba(135,98,34,.46);border-bottom:1px solid rgba(8,39,78,.22);background:rgba(255,250,237,.34)}
.concept-label{margin:0 0 1.5rem;color:#916d2f;font-size:.7rem;letter-spacing:.4em}
.concept-body>p:nth-child(2){margin:0;color:#26374a;font-size:1.05rem;line-height:2.1;letter-spacing:.055em}
.heritage-proof{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.1rem;margin:1.8rem 0 0;border-top:1px solid rgba(151,110,43,.32);border-bottom:1px solid rgba(151,110,43,.32);padding:.9rem 0;color:#33465b}
.heritage-proof>span{border:1px solid rgba(159,113,38,.52);padding:.45rem .65rem;color:#8c6528;font-size:.6rem;letter-spacing:.15em;white-space:nowrap}.heritage-proof p{margin:0;font-size:.68rem;line-height:1.7;letter-spacing:.06em}.heritage-proof a{color:#8c6528;font-size:.62rem;letter-spacing:.1em;white-space:nowrap}
.concept-terms{display:grid;grid-template-columns:repeat(3,1fr);margin:2.4rem 0;border-top:1px solid rgba(8,38,77,.18);border-left:1px solid rgba(8,38,77,.18)}
.concept-terms span{display:flex;flex-direction:column;gap:.65rem;border-right:1px solid rgba(8,38,77,.18);border-bottom:1px solid rgba(8,38,77,.18);padding:1rem;color:#33465b;font-size:.72rem;letter-spacing:.08em}.concept-terms strong{font-weight:500;font-size:.82rem}.concept-terms small{color:#6e7376;font-size:.62rem;line-height:1.75;letter-spacing:.04em}
.concept-terms b{color:#a47a32;font:600 .65rem/1 sans-serif}
.concept-next{display:inline-flex;align-items:center;gap:2rem;border-bottom:1px solid #9e742d;padding:.75rem 0;color:#18375d;font-size:.75rem;letter-spacing:.18em}
.concept-next i{color:#a47a32;font-style:normal}

.heritage-translation{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(500px,1fr);align-items:center;gap:clamp(3rem,6vw,7rem);min-height:92svh;overflow:hidden;padding:9rem clamp(2rem,6vw,7rem);color:#f4e5c3;background:radial-gradient(circle at 18% 25%,rgba(20,74,135,.56),transparent 30%),radial-gradient(circle at 82% 70%,rgba(149,91,28,.16),transparent 25%),#020d1d}
.heritage-translation::before{content:"";position:absolute;inset:0;opacity:.22;background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.055) 0 1px,transparent 1px 7px)}
.heritage-heading,.heritage-map{position:relative;z-index:1}.heritage-heading::before{content:"JIUJIANG";position:absolute;left:-.06em;top:17%;z-index:-1;color:rgba(255,255,255,.026);font:700 clamp(6rem,12vw,13rem)/1 sans-serif;letter-spacing:.02em;white-space:nowrap}.heritage-overline{margin:0 0:.7rem!important;color:#a73632!important;font-size:.62rem!important;font-weight:600;letter-spacing:.32em!important}.heritage-kicker{margin:0 0:2rem!important;color:#d3a44d!important;font-size:.66rem!important;letter-spacing:.36em!important}.heritage-heading h2{margin:0;font-size:clamp(2.7rem,4.1vw,5.2rem);font-weight:400;line-height:1.22}.heritage-heading h2 span{display:block;white-space:nowrap}.heritage-record{display:flex;flex-direction:column;gap:.75rem;margin:2.6rem 0 1.4rem;border-left:2px solid #c99336;padding:.35rem 0 .35rem 1.2rem}.heritage-record b{color:#e6be70;font-size:.72rem;font-weight:500;letter-spacing:.2em}.heritage-record span{max-width:650px;color:rgba(244,229,195,.66);font-size:.72rem;line-height:1.8;letter-spacing:.07em}.heritage-heading>a{color:#d5aa5b;font-size:.65rem;letter-spacing:.12em}
.heritage-map{position:relative;overflow:hidden;border-top:1px solid rgba(223,181,99,.3)}.heritage-map::before{content:"";position:absolute;left:36px;top:1.9rem;bottom:6.2rem;border-left:2px dashed #d4af37;opacity:.65;animation:timelineFlow 1.8s linear infinite}.heritage-map article{position:relative;display:grid;grid-template-columns:86px 1fr;gap:1.2rem;border-bottom:1px solid rgba(223,181,99,.22);padding:1.55rem .4rem}.heritage-map i{position:relative;z-index:1;color:#d4af37;font:400 2.3rem/1 "XunyangTitle","KaiTi",serif;text-shadow:0 0 14px rgba(212,175,55,.28)}.heritage-map small{color:#b58b43;font-size:.62rem;letter-spacing:.22em}.heritage-map h3{margin:.4rem 0 .6rem;font-size:1.2rem;font-weight:400;letter-spacing:.08em}.heritage-map p{margin:0;color:rgba(244,229,195,.6);font-size:.75rem;line-height:1.85;letter-spacing:.05em}.heritage-next{display:flex;align-items:center;justify-content:space-between;margin-top:1.6rem;border:0;border-radius:12px;padding:1.05rem 1.3rem;color:#06172e;background:#d4af37;box-shadow:0 0 20px rgba(212,175,55,.32);font-size:.76rem;font-weight:600;letter-spacing:.18em;animation:heritageButtonBreath 2.2s ease-in-out infinite;transition:transform .28s,box-shadow .28s}.heritage-next:hover{transform:scale(1.035);box-shadow:0 0 36px rgba(212,175,55,.7)}.heritage-next span{color:#06172e}@keyframes timelineFlow{from{transform:translateY(-10px)}to{transform:translateY(0)}}@keyframes heritageButtonBreath{50%{box-shadow:0 0 10px rgba(212,175,55,.28),0 0 34px rgba(212,175,55,.5)}}

.maker{position:relative;display:grid;grid-template-columns:minmax(420px,48%) minmax(460px,52%);color:var(--ink);background:#e9ddc5}
.maker::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 56px,rgba(5,29,61,.025) 56px 57px);pointer-events:none}
.maker-canvas-column{position:relative;border-right:1px solid rgba(6,34,71,.14);background:
  radial-gradient(circle at 50% 46%,rgba(18,72,133,.13),transparent 46%),
  linear-gradient(135deg,#081b31,#041021)}
.maker-canvas-sticky{position:sticky;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100svh;padding:5rem 3rem 2rem;color:var(--paper)}
.canvas-kicker{display:flex;align-items:baseline;gap:1rem;width:min(100%,520px);margin:0 0 1rem;color:rgba(247,232,197,.55);font-size:.68rem;letter-spacing:.22em}
.canvas-kicker::after{content:"";height:1px;flex:1;background:rgba(212,170,88,.25)}
.canvas-kicker b{color:var(--gold-bright);font-size:.78rem;font-weight:400}
.paper-canvas{--cut-progress:0%;position:relative;height:min(75svh,720px);aspect-ratio:1122/1402;overflow:hidden;background:#082e61;box-shadow:0 24px 70px rgba(0,0,0,.48),0 0 0 1px rgba(225,189,110,.28);isolation:isolate}
.paper-canvas::after{content:"";position:absolute;inset:0;z-index:20;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,247,222,.14),inset 0 0 35px rgba(1,9,25,.22)}
.paper-canvas img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.paper-ghost{filter:saturate(.35) brightness(.38) contrast(1.08);opacity:.72}
.paper-layer{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .7s ease;clip-path:inset(0)}
.paper-layer img{max-width:none}
.layer-landscape{opacity:1;clip-path:inset(0 0 45% 0);mask-image:linear-gradient(90deg,#000 0 var(--cut-progress),transparent var(--cut-progress) 100%)}
.layer-city{clip-path:inset(43% 0 35% 0)}
.layer-river{clip-path:inset(56% 0 0 0)}
.paper-canvas.is-city-cut .layer-city,.paper-canvas.is-river-cut .layer-city{opacity:1}
.paper-canvas.is-river-cut .layer-river{opacity:1}
.paper-tint{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;mix-blend-mode:color;transition:background .55s,opacity .55s}
.paper-canvas.is-colored .paper-tint{opacity:.42}
.paper-canvas[data-color="indigo"] .paper-tint{background:#0a4b90}.paper-canvas[data-color="cinnabar"] .paper-tint{background:#a92e2b}.paper-canvas[data-color="gold"] .paper-tint{background:#bd8428;mix-blend-mode:soft-light;opacity:.55}
.landmark-aura{position:absolute;z-index:6;opacity:0;border-bottom:1px solid var(--gold-bright);filter:drop-shadow(0 0 4px #ffd887) drop-shadow(0 0 10px rgba(255,199,88,.75));transition:opacity .45s,transform .45s;transform:translateY(3px)}
.paper-canvas.is-city-cut .landmark-aura{transform:none}
.aura-culture{left:20%;top:52%;width:23%;height:5.5%;border-radius:50% 50% 18% 18%}.aura-xunyang{left:59.5%;top:51%;width:11%;height:6.5%;border-radius:45% 45% 20% 20%}.aura-exhibition{left:71%;top:52%;width:13%;height:5%;border-radius:55% 55% 15% 15%}.aura-suojiang{left:86%;top:45%;width:6.5%;height:12%;border:0;border-right:1px solid var(--gold-bright);border-radius:45%}
.paper-canvas[data-landmark="culture"].is-city-cut .aura-culture,.paper-canvas[data-landmark="xunyang"].is-city-cut .aura-xunyang,.paper-canvas[data-landmark="exhibition"].is-city-cut .aura-exhibition,.paper-canvas[data-landmark="suojiang"].is-city-cut .aura-suojiang{opacity:1}
.motif{position:absolute;z-index:7;display:none;color:#ffdf90;filter:drop-shadow(0 0 7px rgba(255,194,73,.78));pointer-events:none}
.motif.is-selected{display:block;animation:motifIn .65s cubic-bezier(.2,.8,.2,1) both}
@keyframes motifIn{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}
.motif-moon{right:17%;top:16%;width:9%;aspect-ratio:1;border:1px solid rgba(255,221,143,.68);border-radius:50%}.motif-moon span{position:absolute;inset:20%;border-radius:50%;box-shadow:0 0 15px rgba(255,221,143,.85)}
.motif-boat{left:8%;top:58%;width:22%;height:5%;border-bottom:1px solid rgba(255,218,134,.65);text-align:center}.motif-boat span{font-size:.55rem;letter-spacing:.3em}
.motif-pipa{right:15%;bottom:20%;width:40%;height:7%;border-bottom:1px solid rgba(255,218,134,.6);text-align:center}.motif-pipa span{font-size:.5rem;letter-spacing:.4em}
.paper-signature{position:absolute;right:4.5%;bottom:4%;z-index:8;display:none;max-width:65%;padding:.35rem .5rem;border-left:2px solid var(--gold);color:#fff0c6;background:rgba(3,19,43,.42);font-size:clamp(.55rem,1vw,.78rem);letter-spacing:.16em;text-shadow:0 2px 4px #000}
.paper-signature:not(:empty){display:block}
.canvas-status{display:flex;justify-content:space-between;width:min(100%,520px);margin-top:1rem;color:rgba(247,232,197,.58);font-size:.67rem;letter-spacing:.14em}.canvas-status b{color:var(--gold-bright);font:500 .7rem/1 sans-serif}

.maker-steps{position:relative;padding:0 clamp(2rem,6vw,7rem)}
.making-step{display:flex;flex-direction:column;justify-content:center;min-height:100svh;padding:9rem 0 7rem;opacity:.32;transform:translateY(22px);transition:opacity .5s,transform .5s}
.making-step.is-active{opacity:1;transform:none}
.step-number{display:flex;align-items:center;gap:.8rem;margin-bottom:2.8rem;color:#81632d}.step-number span{font:600 .66rem/1 sans-serif;letter-spacing:.12em}.step-number b{font-weight:400;font-size:.75rem;letter-spacing:.35em}.step-number::after{content:"";height:1px;width:56px;background:#a9874b}
.step-eyebrow{margin:0 0 1.2rem;color:#8c6b31;font-size:.72rem;letter-spacing:.32em}
.making-step h2{margin:0;color:#061a36;font-size:clamp(2.5rem,4.4vw,5.4rem);font-weight:400;line-height:1.22;letter-spacing:.025em}
.step-lead{max-width:620px;margin:1.7rem 0 2.5rem;color:#5e5d59;font-size:.95rem;line-height:1.95;letter-spacing:.06em}
.cut-control{position:relative;display:grid;grid-template-columns:1fr auto;gap:1.2rem;align-items:end;max-width:640px;margin:1rem 0 2.2rem;padding:1.25rem 0;border-top:1px solid rgba(7,33,68,.18);border-bottom:1px solid rgba(7,33,68,.18)}
.cut-control>span{display:flex;flex-direction:column;gap:.35rem}.cut-control b{color:#0a2c59;font-size:.82rem;letter-spacing:.18em}.cut-control small{color:#75736d;font-size:.7rem;letter-spacing:.11em}.cut-control output{color:#896523;font:600 .82rem/1 sans-serif}
.cut-control input{grid-column:1/-1;width:100%;height:26px;margin:0;appearance:none;background:transparent;cursor:grab}.cut-control input:active{cursor:grabbing}
.cut-control input::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,#b47f24 0 var(--cut-progress),rgba(6,33,68,.2) var(--cut-progress))}.cut-control input::-webkit-slider-thumb{width:25px;height:25px;margin-top:-11px;appearance:none;border:1px solid #f1cf82;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9a5,#be8126 60%,#74430b);box-shadow:0 0 0 4px rgba(186,129,38,.13),0 4px 10px rgba(50,31,5,.2)}
.cut-control input::-moz-range-track{height:2px;background:rgba(6,33,68,.2)}.cut-control input::-moz-range-progress{height:2px;background:#b47f24}.cut-control input::-moz-range-thumb{width:25px;height:25px;border:1px solid #f1cf82;border-radius:50%;background:#c18b30}
.step-next{align-self:flex-start;display:flex;align-items:center;gap:2.5rem;border:1px solid #0a315f;padding:.85rem 1.1rem;color:#092954;background:transparent;font-size:.77rem;letter-spacing:.2em;transition:color .25s,background .25s}.step-next:hover{color:#f7e9ca;background:#082c59}.step-next span{color:#a07122;font-size:1.1rem}
.landmark-choices{display:grid;grid-template-columns:1fr 1fr;max-width:660px;border-top:1px solid rgba(7,33,68,.22);border-left:1px solid rgba(7,33,68,.22)}
.landmark-choices button{position:relative;display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;min-height:104px;border:0;border-right:1px solid rgba(7,33,68,.22);border-bottom:1px solid rgba(7,33,68,.22);padding:1.2rem;text-align:left;color:#132743;background:rgba(255,255,255,.08);transition:background .25s,color .25s}
.landmark-choices button span{font-size:.62rem;letter-spacing:.25em;color:#8a6b35}.landmark-choices button b{grid-column:1;font-weight:400;font-size:.9rem;letter-spacing:.08em}.landmark-choices button i{grid-column:2;grid-row:1/3;align-self:center;color:rgba(6,31,66,.28);font:600 1.55rem/1 sans-serif;font-style:normal}.landmark-choices button.is-selected{color:#f8ead0;background:#082d5b}.landmark-choices button.is-selected span,.landmark-choices button.is-selected i{color:#d4aa59}
.choice-fact{max-width:650px;margin:1.2rem 0 2rem;padding-left:1rem;border-left:2px solid #b78329;color:#67645e;font-size:.78rem;line-height:1.8;letter-spacing:.08em}
.motif-choices{display:grid;gap:.65rem;max-width:650px}.motif-choices button{display:flex;align-items:center;gap:1rem;border:1px solid rgba(7,33,68,.2);padding:.8rem 1rem;text-align:left;color:#17304f;background:rgba(255,255,255,.08);transition:background .25s,border-color .25s}.motif-choices button i{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid rgba(139,102,38,.45);border-radius:50%;color:#88652b;font-style:normal}.motif-choices button span{display:flex;flex-direction:column;gap:.3rem}.motif-choices button b{font-size:.83rem;font-weight:400;letter-spacing:.14em}.motif-choices button small{color:#77736b;font-size:.65rem;letter-spacing:.07em}.motif-choices button.is-selected{border-color:#0b3568;color:#f7e8c6;background:#082e5d}.motif-choices button.is-selected i{color:#f5d889;border-color:#d6aa58}.motif-choices button.is-selected small{color:rgba(247,232,198,.66)}
.choice-hint{margin:1rem 0 2rem;color:#7a756b;font-size:.68rem;letter-spacing:.12em}
.color-choices{display:grid;grid-template-columns:repeat(3,1fr);max-width:650px;margin-bottom:2.2rem;border:1px solid rgba(7,33,68,.2)}
.color-choices button{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;border:0;border-right:1px solid rgba(7,33,68,.2);padding:1.2rem;color:#17304f;background:rgba(255,255,255,.08);text-align:left}.color-choices button:last-child{border-right:0}.color-choices button i{width:38px;height:38px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}.color-choices button span{display:flex;flex-direction:column;gap:.32rem}.color-choices button b{font-size:.78rem;font-weight:400;letter-spacing:.12em}.color-choices button small{color:#77736b;font-size:.62rem;letter-spacing:.08em}.color-choices button.is-selected{color:#f8ead0;background:#082d5b}.color-choices button.is-selected small{color:rgba(248,234,208,.62)}
.signature-field{position:relative;display:flex;flex-direction:column;gap:.7rem;max-width:640px;margin:.6rem 0 1.5rem}.signature-field>span{color:#86662e;font-size:.7rem;letter-spacing:.25em}.signature-field input{width:100%;border:0;border-bottom:1px solid rgba(8,38,77,.42);padding:1rem 3.2rem 1rem 0;outline:none;color:#082a55;background:transparent;font-size:1.3rem;letter-spacing:.12em}.signature-field input:focus{border-color:#a77623}.signature-field small{position:absolute;right:0;bottom:1.2rem;color:#8a867e;font:500 .66rem/1 sans-serif}.signature-field small b{font-weight:500}
.craft-recap{display:flex;flex-wrap:wrap;gap:.5rem;max-width:640px;margin:.4rem 0 2rem}.craft-recap span{border:1px solid rgba(8,38,77,.2);border-radius:999px;padding:.48rem .8rem;color:#56606a;font-size:.66rem;letter-spacing:.1em}
.finish-craft{display:flex;align-items:center;justify-content:space-between;width:min(100%,640px);border:0;padding:1.2rem 1.35rem;color:#fff1d2;background:#082d5b;letter-spacing:.25em}.finish-craft span{color:#d8b267;font-size:.67rem;letter-spacing:.13em}

.finale{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:100svh;padding:9rem clamp(2rem,7vw,8rem);gap:clamp(3rem,7vw,9rem);overflow:hidden;background:
  radial-gradient(circle at 72% 50%,rgba(24,83,150,.32),transparent 32%),
  repeating-radial-gradient(circle at 30% 40%,rgba(255,255,255,.018) 0 1px,transparent 1px 6px),#020d1c}
.finale-copy>p:first-child{margin:0 0 1.5rem;color:#ae8845;font:600 .62rem/1 sans-serif;letter-spacing:.42em}.finale-copy h2{margin:0;font-size:clamp(2.5rem,4.2vw,5rem);font-weight:400;line-height:1.35}.finale-copy>p:nth-of-type(2){max-width:580px;margin:2rem 0;color:rgba(239,226,197,.62);font-size:.9rem;line-height:2;letter-spacing:.06em}.finale-actions{display:flex;gap:.8rem;margin-top:2.5rem}.finale-actions button{border:1px solid rgba(221,180,96,.48);padding:.9rem 1.1rem;color:#f8e7c2;background:transparent;font-size:.75rem;letter-spacing:.16em}.finale-actions button:first-child{background:#9a2b28;border-color:#b3483e}.finale-actions button span{margin-left:1.4rem}.download-status{min-height:1.3em;margin:1rem 0 0!important;color:#d7b56e!important;font-size:.68rem!important}
.application-note{display:flex;flex-direction:column;gap:.65rem;max-width:580px;margin:0!important;border-left:1px solid rgba(221,180,96,.5);padding:.2rem 0 .2rem 1rem;color:rgba(239,226,197,.7)!important;font-size:.68rem!important;line-height:1.7!important;letter-spacing:.08em!important}.application-note b{color:#d7b56e;font-weight:500;letter-spacing:.2em}.application-note span{display:block}
.final-art{position:relative;justify-self:center;width:min(38vw,520px);margin:0;box-shadow:0 34px 80px rgba(0,0,0,.52),0 0 0 1px rgba(224,185,102,.26);isolation:isolate}.final-art img{width:100%}.final-art-tint{position:absolute;inset:0;z-index:1;mix-blend-mode:color;opacity:.28;pointer-events:none}.final-art[data-color="indigo"] .final-art-tint{background:#0a4b90}.final-art[data-color="cinnabar"] .final-art-tint{background:#a92e2b}.final-art[data-color="gold"] .final-art-tint{background:#be8427;mix-blend-mode:soft-light;opacity:.45}.final-art figcaption{position:absolute;left:4%;right:4%;bottom:3%;z-index:2;display:flex;align-items:end;justify-content:space-between;color:#fff0ca;text-shadow:0 2px 6px #000}.final-art figcaption span{border-left:2px solid #d5a84f;padding:.45rem .65rem;background:rgba(1,13,31,.5);font-size:.68rem;letter-spacing:.14em}.final-art figcaption b{display:grid;place-items:center;width:42px;height:42px;border:1px solid #e0be76;color:#f7df9e;background:#9d2b27;font-size:.72rem;font-weight:400;letter-spacing:.08em}

.sources{display:grid;grid-template-columns:1fr 1.2fr;gap:5rem;padding:7rem clamp(2rem,7vw,8rem);color:#0a2345;background:var(--paper-light)}
.sources p{margin:0 0 1rem;color:#916f35;font-size:.68rem;letter-spacing:.35em}.sources h2{max-width:560px;margin:0;font-size:clamp(2rem,3.5vw,3.8rem);font-weight:400;line-height:1.4}.source-links{border-top:1px solid rgba(8,38,77,.22)}.source-links a{display:flex;justify-content:space-between;border-bottom:1px solid rgba(8,38,77,.18);padding:1.3rem 0;color:#34455a;font-size:.78rem;letter-spacing:.06em}.source-links a span{color:#a27830}
.site-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:2rem clamp(1.5rem,4vw,4rem);border-top:1px solid rgba(220,177,91,.2);color:rgba(242,226,193,.52);background:#020b18;font-size:.68rem;letter-spacing:.16em}.site-footer p{margin:0;color:#e0bf7b}.site-footer a{justify-self:end;color:#d3ab5c}

@media(max-width:980px){
  .site-header{grid-template-columns:auto 1fr auto;height:62px}.top-nav{justify-self:center;gap:1.2rem}.top-nav a{font-size:.64rem;letter-spacing:.12em}.making-progress{display:none}.replay-opening{font-size:0;padding:.55rem}.replay-opening::after{content:"重看";font-size:.65rem}
  .hero-poster{inset:0;width:100%;height:100%}.hero-poster img{width:100%;height:100%;object-fit:cover;object-position:center}.hero-copy{left:1rem;right:1rem;bottom:5vh;width:auto;text-align:center}.hero-copy p,.hero-copy h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.hero-start{padding:.8rem 1.1rem}.hero-caption{display:none}
  .invitation{grid-template-columns:1fr;gap:3.5rem;padding:8rem 2rem}.concept-body{padding:2.2rem}.concept-terms{margin-bottom:2rem}.heritage-translation{grid-template-columns:1fr;min-height:auto;padding:8rem 2rem}.heritage-map{width:100%}
  .maker{display:block}.maker-canvas-column{position:sticky;top:0;z-index:3;height:58svh;border:0}.maker-canvas-sticky{height:58svh;padding:4.2rem 1rem .7rem}.canvas-kicker{width:min(88vw,390px);margin-bottom:.5rem}.paper-canvas{height:min(47svh,500px)}.canvas-status{width:min(88vw,390px);margin-top:.45rem;font-size:.58rem}
  .maker-steps{z-index:4;padding:0 1rem 0;background:linear-gradient(180deg,rgba(233,221,197,.96),#e9ddc5 8%)}.making-step{min-height:auto;padding:6rem 1rem 8rem;opacity:1;transform:none;border-bottom:1px solid rgba(8,35,70,.15)}
  .finale{grid-template-columns:1fr;padding:7rem 1.5rem}.final-art{grid-row:1;width:min(82vw,460px)}.finale-copy{text-align:center}.finale-copy>p:nth-of-type(2){margin:1.5rem auto}.finale-actions{justify-content:center}
  .sources{grid-template-columns:1fr;gap:2.5rem;padding:6rem 1.5rem}.site-footer{grid-template-columns:1fr auto}.site-footer span{display:none}
}
@media(max-width:600px){
  .opening-title small{font-size:.62rem;letter-spacing:.36em}.opening-title strong{font-size:3.8rem}.opening-title span{font-size:.7rem;letter-spacing:.3em}.opening-zipper{width:68px;height:68px}.opening-zipper em{top:76px}.opening-instruction{top:calc(57% + 92px);width:90%;text-align:center;font-size:.67rem}.opening-skip{right:1rem;bottom:1rem}
  .site-header{padding:0 .75rem}.brand span{display:none}.brand strong{font-size:1.15rem}.top-nav{gap:.8rem}.top-nav a{font-size:.58rem;letter-spacing:.04em}.replay-opening{display:none}.hero{min-height:100svh}.hero-poster{width:100vw;height:100%}.hero-poster img{object-position:center}.hero-start{font-size:.72rem;gap:1.2rem}.cursor-light{display:none}.moon-glow{width:64px}
  .invitation{min-height:100svh;padding:7rem 1.2rem;text-align:left}.invitation h2{font-size:3rem}.concept-subtitle{font-size:.88rem}.concept-body{padding:1.4rem}.concept-body>p:nth-child(2){font-size:.9rem}.heritage-proof{grid-template-columns:1fr;gap:.65rem}.heritage-proof a{justify-self:start}.concept-terms{grid-template-columns:1fr}.heritage-translation{padding:7rem 1.2rem}.heritage-heading h2{font-size:clamp(1.85rem,9vw,2.35rem)}.heritage-map::before{left:25px}.heritage-map article{grid-template-columns:58px 1fr;padding:1.4rem 0}.opening-seam{gap:.55rem}.opening-seam b{padding:.48rem .65rem;font-size:.58rem;letter-spacing:.15em}
  .maker-canvas-column,.maker-canvas-sticky{height:55svh}.paper-canvas{height:min(43svh,420px)}.canvas-kicker{font-size:.58rem}.canvas-status span{max-width:78%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .maker-steps{padding:0 .75rem}.making-step{padding:5rem .5rem 7rem}.making-step h2{font-size:2.35rem}.step-lead{font-size:.82rem}.landmark-choices{grid-template-columns:1fr}.landmark-choices button{min-height:80px}.motif-choices button{padding:.75rem}.color-choices{grid-template-columns:1fr}.color-choices button{flex-direction:row;align-items:center;border-right:0;border-bottom:1px solid rgba(7,33,68,.2)}.color-choices button:last-child{border-bottom:0}.color-choices button i{width:32px;height:32px}.finish-craft{letter-spacing:.13em}
  .finale-copy h2{font-size:2.25rem}.finale-actions{flex-direction:column}.finale-actions button{width:100%}.final-art{width:88vw}.sources h2{font-size:2rem}.site-footer{font-size:.58rem}
}
/* Rebuilt narrative: reveal, collage, resonance, signature. */
.site-header:not(.is-scrolled){background:transparent;border-color:transparent;backdrop-filter:none}
.site-header:not(.is-scrolled) .brand,.site-header:not(.is-scrolled) .top-nav,.site-header:not(.is-scrolled) .replay-opening{opacity:0;pointer-events:none}
.site-header .brand,.site-header .top-nav,.site-header .replay-opening{transition:opacity .3s,color .3s}
.making-progress{display:none!important}

.story-cut{position:relative;min-height:100svh;padding:clamp(7rem,10vw,10rem) clamp(1.2rem,6vw,7rem);overflow:hidden}
.cut-heading{position:relative;z-index:2;width:min(100%,980px);margin:0 auto clamp(2.8rem,6vw,5rem)}
.cut-heading>p{margin:0 0 1.1rem;color:#c99a46;font-size:.72rem;letter-spacing:.36em}
.cut-heading h2{margin:0 0 1.4rem;font-family:"XunyangTitle","KaiTi",serif;font-size:clamp(3.2rem,6.5vw,7rem);font-weight:400;line-height:1.04;letter-spacing:.02em}
.cut-heading>span{display:block;max-width:720px;color:rgba(7,29,56,.62);font-size:.92rem;line-height:2;letter-spacing:.08em}
.cut-next-link{display:flex;width:max-content;align-items:center;gap:2rem;margin:2.6rem auto 0;border-bottom:1px solid rgba(8,35,70,.35);padding:.75rem .25rem;color:#08254a;font-size:.82rem;letter-spacing:.18em}
.cut-next-link i{color:#bd8428;font-style:normal}

.landscape-cut{color:#f6e8c8;background:radial-gradient(circle at 18% 40%,rgba(27,87,153,.22),transparent 32%),#020d20}
.landscape-cut::before{content:"";position:absolute;inset:0;opacity:.3;background:repeating-radial-gradient(circle at 50% 45%,rgba(255,255,255,.025) 0 1px,transparent 1px 6px)}
.landscape-cut .cut-heading>span{color:rgba(246,232,200,.58)}
.landscape-workbench{position:relative;z-index:2;display:grid;grid-template-columns:minmax(320px,520px) minmax(260px,420px);align-items:center;justify-content:center;gap:clamp(2rem,7vw,8rem)}
.landscape-poster{position:relative;width:100%;aspect-ratio:1122/1402;overflow:hidden;background:#031126;box-shadow:0 35px 90px rgba(0,0,0,.55),0 0 0 1px rgba(226,186,101,.25)}
.landscape-poster>img{width:100%;height:100%;object-fit:cover}
.reveal-zone{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;color:#f7db98;background:rgba(0,0,0,.8);transition:background .7s ease,filter .5s;isolation:isolate}
.reveal-zone span{position:absolute;z-index:2;padding:.45rem .8rem;border:1px solid rgba(235,195,105,.5);border-radius:999px;background:rgba(1,13,31,.78);font-size:.68rem;letter-spacing:.18em;box-shadow:0 0 20px rgba(0,0,0,.38)}
.reveal-zone::after{content:"";position:absolute;inset:0;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(255,223,142,.48),rgba(222,165,55,.12) 32%,transparent 68%);mix-blend-mode:screen;pointer-events:none}
.zone-sky{clip-path:polygon(0 0,100% 0,100% 31%,73% 27%,48% 31%,23% 27%,0 30%)}.zone-sky span{left:12%;top:13%}
.zone-mountain{clip-path:polygon(0 30%,23% 27%,48% 31%,73% 27%,100% 31%,100% 55%,0 55%)}.zone-mountain span{right:12%;top:40%}
.zone-river{clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%)}.zone-river span{left:12%;top:73%}
.reveal-zone:hover{filter:brightness(1.35)}
.reveal-zone.is-revealed{background:transparent;pointer-events:none}
.reveal-zone.is-revealed span{opacity:0}
.reveal-zone.is-revealed::after{animation:revealGlow 1.1s ease-out both}
@keyframes revealGlow{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.landscape-guide{align-self:center}
.landscape-guide>b{display:block;margin-bottom:.8rem;color:#efc66c;font:400 clamp(3rem,6vw,6rem)/1 "XunyangTitle","KaiTi",serif}
.landscape-guide>p{margin:0 0 2rem;color:rgba(246,232,200,.7);line-height:1.9;letter-spacing:.08em}
.landscape-guide>div{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(229,190,103,.24)}
.landscape-guide>div span{padding:1rem .5rem;border-right:1px solid rgba(229,190,103,.2);color:rgba(246,232,200,.45);text-align:center;font-size:.7rem;letter-spacing:.14em}.landscape-guide>div span:last-child{border:0}
#completeLandscape{display:flex;width:100%;align-items:center;justify-content:space-between;margin-top:1.5rem;border:1px solid rgba(230,190,100,.3);padding:1rem 1.2rem;color:rgba(246,232,200,.32);background:rgba(255,255,255,.025);letter-spacing:.16em;transition:.35s}
#completeLandscape:not(:disabled){border-color:#d9ac54;color:#fff0c7;background:rgba(132,32,29,.72);box-shadow:0 0 28px rgba(221,169,59,.22)}

.city-collage{color:#071f41;background:linear-gradient(180deg,#efe3ca,#e8d8b8)}
.city-collage::before{content:"";position:absolute;inset:0;opacity:.25;background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(8,35,70,.08) 31px 32px)}
.city-board{position:relative;z-index:2;width:min(100%,1160px);aspect-ratio:16/7;margin:0 auto;overflow:hidden;border:1px solid rgba(8,35,70,.22);background:#06234b;box-shadow:0 28px 70px rgba(7,25,47,.22)}
.city-board>img:first-child,.city-board>.city-title-cover,.city-board>.landmark-highlight{position:absolute;left:0;top:48%;width:100%;height:auto;max-width:none;transform:translateY(-48%);object-fit:contain}
.city-board>img:first-child{z-index:1;filter:saturate(.72) brightness(.7)}
.city-board>.city-title-cover{z-index:2;clip-path:inset(0 0 61% 0);filter:saturate(.72) brightness(.7);pointer-events:none}
.city-board::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(1,11,27,.06),rgba(1,11,27,.28))}
.placed-culture{clip-path:inset(51.5% 55.8% 41.8% 19.5%)}.placed-xunyang{clip-path:inset(49.3% 28.4% 41.5% 57.8%)}.placed-exhibition{clip-path:inset(51.5% 14.4% 41.8% 70%)}.placed-suojiang{clip-path:inset(45.6% 6.1% 41.8% 84.9%)}
.landmark-highlight{z-index:4;opacity:0;pointer-events:none;mix-blend-mode:screen;filter:brightness(1.72) saturate(1.3) drop-shadow(0 0 5px rgba(255,216,126,.95)) drop-shadow(0 0 14px rgba(255,187,55,.72));will-change:opacity,filter}
.landmark-highlight.is-lit{opacity:.82;animation:buildingLightSettle .82s ease-out both}
@keyframes buildingLightSettle{0%{opacity:0;filter:brightness(1.15) saturate(1.05) drop-shadow(0 0 0 rgba(255,216,126,0))}48%{opacity:1;filter:brightness(2.05) saturate(1.42) drop-shadow(0 0 8px #ffe19a) drop-shadow(0 0 24px rgba(255,187,55,.95))}100%{opacity:.82;filter:brightness(1.72) saturate(1.3) drop-shadow(0 0 5px rgba(255,216,126,.95)) drop-shadow(0 0 14px rgba(255,187,55,.72))}}
.landmark-slot{position:absolute;z-index:5;border:0;background:transparent;opacity:0;transition:opacity .2s,filter .2s}
.landmark-slot.is-over{opacity:1;background:radial-gradient(ellipse at 50% 92%,rgba(255,215,120,.68) 0,rgba(255,198,72,.25) 38%,transparent 74%);filter:drop-shadow(0 8px 12px rgba(255,199,76,.58))}
.landmark-slot.is-filled{background:radial-gradient(ellipse at 50% 92%,rgba(255,215,120,.75) 0,rgba(255,198,72,.28) 40%,transparent 75%);animation:slotConfirm .9s ease-out both}@keyframes slotConfirm{0%{opacity:0;filter:drop-shadow(0 8px 4px rgba(255,199,76,0))}38%{opacity:1;filter:drop-shadow(0 8px 18px rgba(255,199,76,.8))}100%{opacity:0;filter:drop-shadow(0 8px 4px rgba(255,199,76,0))}}
.landmark-slot.is-wrong{animation:wrongSlot .35s ease}@keyframes wrongSlot{25%,75%{transform:translateX(-6px)}50%{transform:translateX(6px)}}
.slot-culture{left:19.6%;top:61.7%;width:21.4%;height:11.6%}.slot-xunyang{left:58.2%;top:55.3%;width:9.8%;height:18.3%}.slot-exhibition{left:70.1%;top:62.3%;width:11.3%;height:11.2%}.slot-suojiang{left:85.3%;top:45.9%;width:4.7%;height:28%}
.landmark-card{position:absolute;z-index:5;right:2%;top:6%;width:min(30%,330px);min-height:150px;border:1px solid rgba(236,196,105,.48);padding:1.3rem 1.5rem;color:#f4e4bd;background:rgba(2,17,39,.86);backdrop-filter:blur(12px);box-shadow:0 18px 45px rgba(0,0,0,.3);transition:transform .35s,opacity .35s}
.landmark-card.is-updating{transform:translateY(-8px);opacity:.55}.landmark-card small{color:#d8a84e;letter-spacing:.2em}.landmark-card h3{margin:.6rem 0;font-size:1.25rem;font-weight:400}.landmark-card p{margin:0;color:rgba(244,228,189,.72);font-size:.78rem;line-height:1.8}
.silhouette-tray{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);width:min(100%,1160px);margin:1.4rem auto 0;border:1px solid rgba(8,35,70,.2);background:rgba(255,249,235,.32)}
.silhouette-tray button{display:flex;min-height:190px;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;border:0;border-right:1px solid rgba(8,35,70,.18);padding:1.1rem;color:#071526;background:transparent;cursor:grab;transition:color .35s,background .35s,transform .35s,opacity .35s}.silhouette-tray button:last-child{border-right:0}
.silhouette-tray button:hover{background:rgba(255,255,255,.42);transform:translateY(-5px)}.silhouette-tray button.is-dragging{opacity:.45;cursor:grabbing}.silhouette-tray button.is-placed{color:#b98120;background:rgba(255,244,213,.48)}
.silhouette-tray span{font-size:.76rem;letter-spacing:.1em}.silhouette-tray small{color:rgba(7,21,38,.45);font-size:.6rem;letter-spacing:.12em}
.building-piece{display:block;flex:0 0 auto;background-image:url("./assets/building-cutouts-v1.png?v=1");background-repeat:no-repeat;background-size:841.5px 1051.5px;filter:drop-shadow(0 6px 5px rgba(2,15,34,.25));pointer-events:none}
.piece-culture{width:180px;height:39px;background-position:-165px -557.25px}.piece-xunyang{width:82.5px;height:63px;background-position:-489.75px -534px}.piece-exhibition{width:94.5px;height:36px;background-position:-590.25px -560.25px}.piece-suojiang{width:39px;height:96.75px;background-position:-717.75px -499.5px}

.night-cut{color:#f5e6c4;background:radial-gradient(circle at 50% 30%,#0b3b76,#020c1c 70%)}
.night-cut::before{content:"";position:absolute;inset:0;opacity:.25;background:repeating-radial-gradient(circle at 50% 40%,rgba(255,255,255,.035) 0 1px,transparent 1px 6px)}
.night-cut .cut-heading>span{color:rgba(245,230,196,.6)}
.night-stage{position:relative;z-index:2;width:min(74vw,690px);aspect-ratio:1122/1402;margin:0 auto;overflow:hidden;box-shadow:0 35px 90px rgba(0,0,0,.58),0 0 0 1px rgba(226,185,96,.3)}
.night-stage img{width:100%;height:100%;object-fit:cover}
.night-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 45%,transparent 55%,rgba(0,4,14,.28))}
.night-feedback{position:absolute;z-index:3;display:block;border-radius:50%;pointer-events:none;opacity:0;transform:scale(.72);transition:opacity .35s,transform .35s;mix-blend-mode:screen}
.night-feedback.is-active{opacity:1;transform:scale(1);animation:nightPulse 2.2s ease-in-out infinite}.night-feedback.is-pulsing{animation:nightClick .75s ease-out}
.feedback-moon{left:78%;top:16%;width:12%;aspect-ratio:1;background:radial-gradient(circle,rgba(255,238,180,.55),rgba(240,180,62,.18) 45%,transparent 72%);box-shadow:0 0 28px rgba(255,207,103,.65)}
.feedback-boat{left:5%;top:56%;width:34%;height:13%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,205,102,.45),transparent 70%);filter:drop-shadow(0 0 10px #ffd175)}
.feedback-pipa{left:43%;top:68%;width:43%;height:18%;border-radius:45%;background:radial-gradient(ellipse,rgba(255,203,100,.42),transparent 68%);filter:drop-shadow(0 0 12px #ffc75b)}
@keyframes nightPulse{50%{filter:brightness(1.35);transform:scale(1.1)}}@keyframes nightClick{0%{opacity:.4;transform:scale(.75)}45%{opacity:1;transform:scale(1.35)}100%{opacity:1;transform:scale(1)}}
.motif-story-cards{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;width:min(100%,1160px);margin:2rem auto 0}
.motif-story-cards button{display:grid;grid-template-columns:auto 1fr;gap:1rem;min-height:210px;border:1px solid rgba(226,185,96,.25);padding:1.5rem;color:rgba(245,230,196,.62);text-align:left;background:rgba(3,20,45,.72);transition:border-color .3s,box-shadow .3s,transform .3s,color .3s}
.motif-story-cards button:hover{transform:translateY(-5px);border-color:rgba(239,198,109,.55)}.motif-story-cards button.is-selected{color:#fff1cf;border-color:#f0c86d;box-shadow:0 0 12px rgba(255,202,84,.72),0 0 38px rgba(224,157,34,.28),inset 0 0 24px rgba(225,170,56,.08)}
.motif-story-cards i{display:grid;place-items:center;width:46px;height:46px;border:1px solid currentColor;border-radius:50%;font:400 1.2rem "XunyangTitle","KaiTi",serif}.motif-story-cards span{display:flex;flex-direction:column}.motif-story-cards b{font-size:1.05rem;font-weight:400;letter-spacing:.08em}.motif-story-cards q{margin-top:1rem;font-size:.82rem;line-height:1.9}.motif-story-cards small{margin-top:.5rem;color:#d5aa59}
.motif-selection-status{position:relative;z-index:2;margin:1.4rem auto 0;text-align:center;color:rgba(245,230,196,.52);font-size:.7rem;letter-spacing:.14em}.night-cut .cut-next-link{color:#f5e6c4;border-color:rgba(226,185,96,.45)}

.signature-finale{background:radial-gradient(circle at 73% 45%,rgba(15,63,122,.5),transparent 34%),#020b18}
.signature-finale .final-art{overflow:visible}.signature-finale .final-poster-base{position:relative;z-index:1;width:100%;box-shadow:0 35px 90px rgba(0,0,0,.5)}
.final-title-cover,.final-title-stamp{position:absolute!important;inset:0;z-index:2;width:100%!important;height:100%;object-fit:cover;clip-path:polygon(0 0,69% 0,69% 37%,0 37%);box-shadow:none!important;pointer-events:none}
.final-title-cover{opacity:1}.final-title-stamp{z-index:3;opacity:0;transform-origin:27% 18%;-webkit-mask-image:linear-gradient(90deg,#000 0 42%,rgba(0,0,0,.82) 49%,transparent 57% 100%);mask-image:linear-gradient(90deg,#000 0 42%,rgba(0,0,0,.82) 49%,transparent 57% 100%);-webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.signature-finale.is-stamping .final-title-cover{animation:titleCoverAway 2.1s .12s ease-in-out both}.signature-finale.is-stamping .final-title-stamp{animation:titleInkReveal 2.25s .16s cubic-bezier(.22,.68,.22,1) both}
.jiujiang-stamp{position:absolute;right:3%;bottom:3%;display:grid!important;place-items:center;width:62px!important;height:62px!important;border:2px solid #e5b171!important;color:#ffe0a1!important;background:#a32624!important;font-family:"KaiTi",serif;font-size:1rem!important;line-height:1.1;opacity:0;transform:scale(2.2) rotate(-12deg);box-shadow:0 0 0 4px rgba(163,38,36,.25),0 0 28px rgba(235,172,77,.35)}
.signature-finale.is-stamping .jiujiang-stamp{animation:stampIn 1s 1.2s cubic-bezier(.18,.86,.3,1.2) both,stampBreath 3s 2.2s ease-in-out infinite}
@keyframes titleCoverAway{0%,10%{opacity:1}72%{opacity:.18}100%{opacity:0}}@keyframes titleInkReveal{0%{opacity:0;transform:translateY(7px) scale(.992);filter:blur(2.2px) brightness(1.08);-webkit-mask-position:100% 0;mask-position:100% 0}18%{opacity:.48}72%{opacity:1;filter:blur(.35px) brightness(1.03)}100%{opacity:1;transform:none;filter:none;-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes stampIn{from{opacity:0;transform:scale(2.2) rotate(-12deg)}to{opacity:1;transform:scale(1) rotate(-3deg)}}@keyframes stampBreath{50%{box-shadow:0 0 0 7px rgba(163,38,36,.18),0 0 38px rgba(235,172,77,.5)}}

@media(max-width:900px){
  .landscape-workbench{grid-template-columns:minmax(0,520px)}.landscape-guide{width:min(100%,520px)}
  .city-board{aspect-ratio:16/7}.landmark-card{width:38%}.silhouette-tray{grid-template-columns:repeat(2,1fr)}.silhouette-tray button:nth-child(2){border-right:0}.silhouette-tray button:nth-child(-n+2){border-bottom:1px solid rgba(8,35,70,.18)}
  .motif-story-cards{grid-template-columns:1fr}.motif-story-cards button{min-height:auto}
}
@media(max-width:600px){
  .story-cut{padding:6.5rem 1rem}.cut-heading h2{font-size:3rem}.cut-heading br{display:none}
  .landscape-poster{width:min(92vw,430px);margin:auto}.landscape-guide{width:min(92vw,430px);margin:auto}
  .city-board{aspect-ratio:16/7}.landmark-card{display:none}
  .silhouette-tray button{min-height:145px;padding:.8rem}.silhouette-tray span{font-size:.65rem}.silhouette-tray small{display:none}.building-piece{transform:scale(.82)}
  .night-stage{width:min(92vw,520px)}.motif-story-cards button{padding:1.15rem}.signature-finale{padding-top:7rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}