/* Seven authored compositions, using the painted work's paper, sleeves and stage. */
body[data-mode=page]{background:#fbf5e8}
body[data-mode=page][data-chapter=features]{background:#f4d7d0}
body[data-mode=page][data-chapter=works],body[data-mode=page][data-chapter=dialogue]{background:#29216a;color:#fff7e9;--ink:#fff7e9;--muted:#d3c8d8;--line:#f8eed43a;--accent:#f5bf81}
body[data-mode=page][data-chapter=dictionary]{background:#9fb6bd}
.chapter{position:relative;isolation:isolate;max-width:1600px;overflow:clip;padding-bottom:90px}
.chapter-body{position:relative;z-index:1}.scenography{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.scene-ribbon{position:absolute;inset:0;width:100%;height:100%;opacity:.72}
.chapter-heading{position:relative;display:block;border:0;padding:0;margin:0;min-height:530px}
.chapter-heading h1,.lake .chapter-heading h1{position:relative;z-index:2;font-size:clamp(82px,10.5vw,154px);line-height:1.06;letter-spacing:-.06em;margin:0;font-weight:400}
.chapter-heading h1 span{display:block}.chapter-heading h1 span+span{margin-left:.85em}
.chapter-heading .lead{position:relative;z-index:2;font-family:inherit;font-size:15px;line-height:2;max-width:21em;margin:35px 0 0 12%;color:inherit;opacity:.8;justify-self:auto;text-align:left}
.page-nav{height:85px;position:relative;z-index:5;letter-spacing:.1em;padding:0 var(--gutter);font-size:12px}
.page-nav button{letter-spacing:.1em}.chapter-footer{position:relative;border:0;margin-top:80px;padding:30px 0 0}
.chapter-footer .continue{font-family:"Songti SC","SimSun",serif;font-size:26px;letter-spacing:.12em}
.chapter-footer .continue span{font-family:serif;font-size:34px;vertical-align:middle;margin-left:32px}
.source-note{font-size:11px;position:relative;z-index:2}.quiet{color:var(--muted)}
/* Taihu: the landscape is an oval opening, the poem drifts across its shore. */
.lake{min-height:1080px}.lake .chapter-body{background:none}.lake .scene-ribbon{opacity:.9}
.lake .chapter-heading{padding:0;text-align:left;min-height:880px;margin:0}
.lake .chapter-heading h1{font-size:clamp(80px,10vw,144px);width:70%;padding-top:35px;color:#302879;margin:0}
.lake .chapter-heading h1 span+span{margin-left:1.2em}
.lake-window{position:absolute;right:-4%;top:80px;width:65%;height:700px;transform:rotate(-12deg) translateY(var(--float,0px));border-radius:48% 52% 43% 57% / 57% 43% 57% 43%;overflow:hidden}
.lake-window img{width:100%;height:100%;object-fit:cover;object-position:50% 63%;transform:rotate(12deg) scale(1.14)}
.lake .chapter-heading .lead{position:absolute;left:1%;bottom:70px;width:27%;margin:0;font:15px/2.2 "Microsoft YaHei",sans-serif;max-width:none;color:#403954}
.lake .poem{position:absolute;left:4%;top:395px;z-index:2;font-size:clamp(26px,3.2vw,47px);line-height:1.8;margin:0;text-align:left;letter-spacing:.12em;color:#302879}
.lake .poem span{display:block}.lake .poem span+span{margin-left:2em}.lake .chapter-footer{margin-top:0}
/* History: an oversized portrait and a line of song that wanders down the page. */
.history .chapter-heading{min-height:670px;padding-top:45px}
.history .chapter-heading h1{width:57%;transform:rotate(-5deg);transform-origin:20% 50%;color:#31277a}
.history .chapter-heading .lead{margin-top:55px;margin-left:11%;max-width:16em}
.history .history-portrait{position:absolute;right:2%;top:25px;width:41%;max-width:540px;margin:0;overflow:hidden;border-radius:49% 49% 8% 8% / 33% 33% 7% 7%;transform:rotate(6deg) translateY(var(--float,0px))}
.history-portrait img{width:100%}
.history-river{display:block;position:relative;padding:30px 5% 90px;min-height:1300px}
.history-river .timeline{display:block;position:relative;margin:0}
.history-river .timeline section{width:37%;max-width:420px;margin:0 0 70px 4%;padding:0;min-height:220px;background:transparent}
.history-river .timeline section:nth-child(even){margin-left:58%;margin-top:-10px}
.history-river .timeline h2{font-size:38px;color:#31277a;margin-bottom:23px;letter-spacing:.06em}
.history-river .timeline p{font-size:16px;line-height:2.1;color:#514858}
.history-thread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.thread-ink{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--reading,0));transition:stroke-dashoffset .25s linear}
.history .scene-ribbon{height:1050px;opacity:.68}
/* Features: five stations around an open sleeve; their reading surface stays level. */
.features .chapter-heading{min-height:410px;padding-top:35px}
.features .chapter-heading h1{margin-left:42%;font-size:clamp(80px,10vw,145px);transform:rotate(5deg)}
.features .chapter-heading .lead{margin:30px 0 0 68%;font-size:14px;max-width:16em}
.feature-stage{position:relative;margin-top:-355px;min-height:840px;z-index:1;pointer-events:none}
.feature-art{position:absolute;left:0;top:0;width:48%;height:700px;overflow:hidden;clip-path:ellipse(47% 49% at 50% 50%);transform:rotate(-9deg) translateY(var(--float,0px))}
.feature-art img{width:100%;height:100%;object-fit:cover;transform:rotate(9deg) scale(1.1)}
.feature-constellation{position:absolute;inset:0;pointer-events:none}
.feature-constellation button{position:absolute;pointer-events:auto;min-width:90px;min-height:80px;padding:12px 18px;font:31px/1.3 "SimSun",serif;color:#383071;isolation:isolate}
.feature-constellation button::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:53% 47% 58% 42%;background:#fbf5e800;transform:rotate(-12deg);transition:background .25s,transform .3s}
.feature-constellation button[aria-selected=true]::before{background:#f5c66d;transform:rotate(7deg) scale(1.1)}
.feature-constellation button:hover::before{background:#fff5e9c0}.feature-constellation button span{display:block}
.feature-constellation button:nth-child(1){left:50%;top:345px;transform:rotate(-8deg)}
.feature-constellation button:nth-child(2){left:68%;top:425px;transform:rotate(6deg)}
.feature-constellation button:nth-child(3){left:77%;top:585px;transform:rotate(-4deg)}
.feature-constellation button:nth-child(4){left:54%;top:685px;transform:rotate(7deg)}
.feature-constellation button:nth-child(5){left:31%;top:735px;transform:rotate(-7deg)}
.feature-reading{position:relative;z-index:2;margin:25px 10% 0 17%;padding:20px 0;max-width:850px;scroll-margin-top:55px}
.feature-next{font:23px/1.6 "SimSun",serif;letter-spacing:.06em;padding:12px 0;margin-top:20px}.feature-next span{margin-left:25px}
.feature-reading>h2{font-size:58px;letter-spacing:.12em;margin:0 0 34px}
.feature-reading .text{max-width:42em}.feature-reading p{font-size:16px;line-height:2.15}
.feature-reading .manuscript{margin-top:35px}.feature-reading .role-illustration{max-width:400px;transform:rotate(-3deg);margin:40px 0}
.features .scene-ribbon{height:1300px;opacity:1}
/* Music: a curved string carries the choices around a broad illustrated instrument. */
.music .chapter-heading{min-height:455px;padding-top:25px}
.music .chapter-heading h1{font-size:clamp(80px,10vw,142px);width:45%;transform:rotate(-4deg)}
.music .chapter-heading .lead{margin:32px 0 0 7%;font-size:14px;max-width:15em}
.string-lines{position:absolute;left:0;bottom:-120px;width:100%;height:220px;z-index:0;overflow:visible}
.instrument-nav{position:relative;display:flex;align-items:center;justify-content:space-between;width:88%;margin:15px auto 58px;gap:12px;z-index:4}
.instrument-nav button{font-family:"SimSun",serif;font-size:23px;min-width:64px;padding:15px 8px;transform:translateY(calc((var(--station) - 2.5)*(var(--station) - 2.5)*7px - 24px)) rotate(calc((var(--station) - 2.5)*5deg));background:#fcf5e8db;border-radius:50%}
.instrument-nav button[aria-pressed=true]{color:#b34229;background:#efc56e}.instrument-nav button[aria-pressed=true]:after{display:none}
#instrument-panel{display:block;min-height:230px;position:static;padding-top:35px}
.music .instrument-illustration{position:absolute;top:20px;right:-3%;width:57%;height:430px;margin:0;overflow:hidden;border-radius:47% 53% 45% 55% / 59% 43% 57% 41%;transform:rotate(8deg) translateY(var(--float,0px));background:#fff8ee}
.music .instrument-illustration img{height:100%;width:100%;object-fit:contain;transform:rotate(-8deg) scale(1.08)}
.instrument-copy{position:relative;max-width:none;width:68%;margin-left:20%;padding:30px 0}
.instrument-copy h2{font-size:48px;letter-spacing:.05em;margin:0 0 25px;max-width:14em}
.instrument-copy>p{max-width:37em;font-size:16px;line-height:2.1}.instrument-copy .manuscript{max-width:42em}
.music .scene-ribbon{opacity:.72}.music .chapter-footer{margin-top:50px}
/* Works: six pictures suspended along one slow, curved ribbon. */
.works{padding-top:20px}.works .scene-ribbon{opacity:.45}
.works .chapter-heading{width:45%;margin-left:55%;min-height:440px;padding-top:45px}
.works .chapter-heading h1{font-size:clamp(85px,10vw,150px);transform:rotate(7deg);color:#f8e4b2}
.works .chapter-heading h1 span+span{margin-left:.35em}.works .chapter-heading .lead{margin:18px 0 0 22%;font-size:15px;opacity:.85}
.works-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px 9%;margin-top:-415px;padding:15px 3% 440px}
.works .play-card{position:relative;width:91%;background:transparent;transform:rotate(var(--lean));transition:transform .55s cubic-bezier(.22,1,.36,1);z-index:1}
.works .play-card:nth-child(even){justify-self:end;margin-top:420px;margin-bottom:-420px;width:85%}
.works .play-card:nth-child(3){margin-left:6%;width:87%}.works .play-card:nth-child(5){width:94%}
.works .play-card h2{position:absolute;top:15%;right:-49px;writing-mode:vertical-rl;font-size:29px;letter-spacing:.18em;margin:0;color:#fff6e6}
.works .play-card figure{background:transparent}.works .play-card img{opacity:1!important}
.works .play-card:hover,.works .play-card:focus-visible{transform:rotate(0deg) translateY(-9px);z-index:3}
.works .source-note{margin-top:70px;color:#d9cee3}.works .chapter-footer{margin-top:45px}
/* Dictionary: the search is an unrolled paper slip above the movable-type desk. */
.dictionary .chapter-heading{padding-top:30px;min-height:500px}
.dictionary .chapter-heading h1{position:relative;z-index:2;width:70%;color:#29206c;transform:rotate(-5deg)}
.dictionary .chapter-heading .lead{margin:35px 0 0 13%;font-size:15px;color:#2e2950;opacity:1}
.type-stamp{position:absolute;right:7%;top:25px;font:230px/1 "SimSun",serif;width:340px;height:340px;display:grid;place-items:center;background:#f9eed7;color:#413584;transform:rotate(14deg);box-shadow:15px 21px 0 #8175ad;z-index:1;clip-path:polygon(2% 2%,95% 0,100% 94%,6% 100%)}
.dictionary-desk{position:relative;background:#fcf6e9;margin:0 4%;padding:70px 6% 65px;border-radius:3% 0 9% 0 / 3% 0 4% 0}
.dictionary-search{position:relative;border-bottom:1px solid #382b79;margin:0 0 28px;max-width:650px;transform:rotate(-2deg);background:#fbf5e8}
.dictionary-search input{font:28px/1.5 "SimSun",serif;padding:10px 0 17px}.dictionary-search button{font-size:14px}
.search-message{font-size:12px;max-width:44em;color:#786878;margin:0 0 45px}
.dictionary-layout{gap:50px;max-width:none;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.character-grid{gap:10px 14px;transform:rotate(-3deg);padding:12px 7px}
.character-grid .empty-cell,.character-grid button{border:0;background:#eee4d1;box-shadow:3px 4px 0 #b8a8bf;transform:translateY(0)}
.character-grid>:nth-child(5n+2){transform:translateY(5px)}.character-grid>:nth-child(5n+4){transform:translateY(-4px)}
.dictionary-detail{border:0;padding:15px 0 0}.dictionary-detail .empty-character{font-size:100px;color:#b6a4bc;transform:rotate(7deg)}
.dictionary-detail h2{font-size:29px}.dictionary-detail p{font-size:14px;color:#6e6176}
/* Interview: an open stage, with the film kept level and unobscured. */
.dialogue .chapter-heading{min-height:390px;padding:15px 0 0;margin:0;display:block}
.dialogue .chapter-heading h1{font-size:clamp(70px,8vw,119px);color:#fcf0d6;width:75%;transform:rotate(-4deg)}
.dialogue .chapter-heading h1 span+span{margin-left:2.4em}.dialogue .chapter-heading .lead{position:absolute;right:0;bottom:80px;margin:0;max-width:14em;color:#f7e8d5;font-size:14px}
.dialogue .stage-screen{position:relative;width:94%;margin:0 0 25px 6%;z-index:2;box-shadow:-30px 28px 0 #b0a7ce}
.dialogue .interview-caption{width:94%;margin-left:6%;margin-top:35px}.dialogue .text{margin:50px 8% 0 auto;max-width:36em}
.dialogue .manuscript{margin:25px 8% 0 auto;max-width:36em}.dialogue .scene-ribbon{height:470px;opacity:.35}
.dialogue .chapter-footer{margin-top:85px}.dialogue .interview-reveal[data-phase=playing]{box-shadow:-30px 28px 0 #9b93bd}
/* Dialogs remain a calm reading surface, independent of the surrounding stage. */
dialog{--ink:#272347;--muted:#77717f;--line:#29234424;--accent:#c46049;color:var(--ink);background:#fcf8ef}
@media(min-width:1600px){.chapter{max-width:1600px}.music .instrument-illustration{height:460px}}
@media(max-width:1050px) and (min-width:741px){
 .chapter-heading h1{font-size:100px}.history .history-portrait{top:80px}.history .chapter-heading{min-height:600px}
 .feature-art{height:610px}.feature-stage{min-height:780px}.feature-constellation button{font-size:26px}
 .music .instrument-illustration{top:85px;height:340px}.music .chapter-heading h1{font-size:95px}
 .works .chapter-heading h1{font-size:95px}.works .play-card h2{font-size:25px;right:-36px}
 .type-stamp{font-size:170px;width:260px;height:260px;right:3%;top:100px}.dictionary-layout{gap:25px}
}
@media(max-width:740px){
 .page-nav{height:68px}.chapter{padding:0 22px 52px;overflow:clip}.chapter-heading{min-height:0}
 .chapter-heading h1,.lake .chapter-heading h1{font-size:clamp(66px,18vw,112px);line-height:1.1}
 .chapter-heading .lead{font-size:14px;line-height:1.9}.chapter-footer{margin-top:45px}.chapter-footer .continue{font-size:21px}.chapter-footer .continue span{font-size:26px;margin-left:15px}
 .lake{min-height:990px}.lake .chapter-heading{min-height:865px}.lake .chapter-heading h1{padding-top:15px;width:100%;font-size:clamp(63px,16vw,100px)}
 .lake .chapter-heading h1 span+span{margin-left:.7em}.lake-window{top:200px;right:-13%;width:100%;height:480px;transform:rotate(-12deg)}
 .lake .poem{top:400px;left:0;font-size:29px;line-height:2;writing-mode:vertical-rl;letter-spacing:.16em;background:#fcf5e8b8;padding:20px 12px;border-radius:55% 0 0 40%}
 .lake .poem span+span{margin-left:0;margin-top:45px}.lake .chapter-heading .lead{bottom:0;left:14%;width:80%;font-size:14px;line-height:2}
 .lake .chapter-footer{margin-top:40px}
 .history .chapter-heading{padding-top:20px;min-height:740px}.history .chapter-heading h1{width:100%;font-size:clamp(76px,20vw,120px)}
 .history .chapter-heading .lead{margin:25px 0 0 4%;max-width:11em;font-size:13px}
 .history .history-portrait{top:290px;right:3%;width:77%;max-width:360px}.history .scene-ribbon{height:900px}
 .history-river{min-height:0;padding:25px 0 45px}.history-river .timeline section{width:79%;margin:0 0 65px 0;min-height:0}
 .history-river .timeline section:nth-child(even){margin:0 0 65px 21%}.history-river .timeline h2{font-size:30px;line-height:1.4;margin-bottom:18px}
 .history-river .timeline p{font-size:15px;line-height:2.05}.history-thread{opacity:.38}
 .features .chapter-heading{min-height:340px;padding-top:10px}.features .chapter-heading h1{margin-left:27%;font-size:clamp(67px,17vw,110px)}
 .features .chapter-heading .lead{margin:24px 0 0 54%;max-width:11em;font-size:12px}
 .feature-stage{margin-top:-100px;min-height:650px}.feature-art{width:82%;left:-16%;top:10px;height:490px;transform:rotate(-9deg)}
 .feature-constellation button{font-size:23px;min-width:68px;min-height:64px;padding:10px}
 .feature-constellation button:nth-child(1){left:61%;top:90px;transform:rotate(-7deg)}
 .feature-constellation button:nth-child(2){left:74%;top:205px;transform:rotate(6deg)}
 .feature-constellation button:nth-child(3){left:69%;top:340px;transform:rotate(-4deg)}
 .feature-constellation button:nth-child(4){left:47%;top:460px;transform:rotate(7deg)}
 .feature-constellation button:nth-child(5){left:11%;top:525px;transform:rotate(-7deg)}
 .feature-reading{margin:0 5%;padding:5px 0;max-width:none}.feature-reading>h2{font-size:44px;margin-bottom:25px}.feature-reading p{font-size:15px;line-height:2.1}
 .features .scene-ribbon{height:1350px}.feature-reading .role-illustration{max-width:100%}
 .music .chapter-heading{padding-top:15px;min-height:620px}.music .chapter-heading h1{font-size:clamp(70px,19vw,115px);width:85%}
 .music .chapter-heading .lead{margin:20px 0 0 4%;max-width:13em;font-size:12px}
 .music .instrument-illustration{top:310px;right:-7%;width:105%;height:310px;transform:rotate(6deg)}
 .music .instrument-illustration img{transform:rotate(-6deg) scale(1.03)}.string-lines{bottom:-95px;height:120px;width:110%;left:-5%}
 .instrument-nav{width:100%;gap:0;margin:5px 0 28px;flex-wrap:nowrap}.instrument-nav button{min-width:0;font-size:16px;padding:12px 5px;white-space:nowrap;transform:translateY(calc((var(--station) - 2.5)*(var(--station) - 2.5)*4px - 12px)) rotate(calc((var(--station) - 2.5)*4deg))}
 #instrument-panel{padding-top:15px;min-height:0}.instrument-copy{width:90%;margin:0 0 0 8%;padding:18px 0}.instrument-copy h2{font-size:35px}.instrument-copy>p{font-size:15px}
 .works{padding-top:0}.works .chapter-heading{width:100%;margin-left:0;padding:20px 0 0;min-height:390px}
 .works .chapter-heading h1{font-size:clamp(82px,23vw,145px);margin-left:5%;width:80%}.works .chapter-heading h1 span+span{margin-left:.8em}.works .chapter-heading .lead{margin:27px 0 0 42%;font-size:13px;max-width:12em}
 .works-grid{display:block;margin:0;padding:10px 15px 5px}
 .works .play-card,.works .play-card:nth-child(3),.works .play-card:nth-child(5){width:84%;margin:0 0 75px 0}
 .works .play-card:nth-child(even){width:80%;margin:0 0 80px 16%}
 .works .play-card h2{font-size:25px;right:-35px;top:14%}.works .play-card:nth-child(even) h2{right:auto;left:-36px}
 .works .scene-ribbon{height:100%}.works .source-note{margin-top:0}.works .chapter-footer{margin-top:38px}
 .dictionary .chapter-heading{padding-top:15px;min-height:590px}.dictionary .chapter-heading h1{width:100%;font-size:clamp(71px,19vw,115px)}
 .dictionary .chapter-heading .lead{margin:25px 0 0 6%;max-width:12em;font-size:13px}
 .type-stamp{width:190px;height:190px;font-size:138px;right:8%;top:335px;box-shadow:10px 15px 0 #8175ad}
 .dictionary-desk{margin:0 1%;padding:35px 20px 30px}.dictionary-search input{font-size:24px}.search-message{font-size:11px;margin-bottom:25px}
 .dictionary-layout{display:block}.character-grid{gap:9px;padding:12px 5px}.dictionary-detail{padding:35px 0 0;margin-top:20px;border:0}.dictionary-detail .empty-character{display:none}
 .dialogue .chapter-heading{padding-top:20px;min-height:335px}.dialogue .chapter-heading h1{font-size:clamp(55px,14vw,95px);width:100%;line-height:1.2}
 .dialogue .chapter-heading h1 span+span{margin-left:1.3em}.dialogue .chapter-heading .lead{bottom:28px;right:0;font-size:12px;max-width:14em}
 .dialogue .stage-screen{width:100%;margin:0 0 25px;box-shadow:-10px 12px 0 #b0a7ce}.dialogue .interview-reveal[data-phase=playing]{box-shadow:-10px 12px 0 #9b93bd}
 .dialogue .interview-caption{width:100%;margin-left:0;margin-top:20px}.dialogue .text{margin:35px 0 0 8%;max-width:none;font-size:15px}.dialogue .manuscript{margin:25px 0 0 8%;max-width:none}
 .dialogue .chapter-footer{margin-top:55px}.dialogue .scene-ribbon{height:350px}
}
@media(prefers-reduced-motion:reduce){.thread-ink{stroke-dashoffset:0;transition:none}.works .play-card{transition:none}.works .play-card:hover{transform:rotate(var(--lean))}}