@font-face{font-family:'Xiju Serif';src:url('fonts/xiju-serif.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
:root{--font-title:'Xiju Serif','Songti SC','Noto Serif SC',serif;--font-body:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--font-body)}
h1,h2,h3,.cover-caption h1,.cover-caption .cover-enter,.chapter .chapter-footer .continue,.lake .poem,.story-copy h2,.story-copy h3,.story-copy p,.feature-index button,.music .instrument-nav button,.dictionary-search input,.gallery-card h2{font-family:var(--font-title)}
@media(max-width:800px){
 :root{--gutter:clamp(20px,5.6vw,36px);--mobile-nav:calc(52px + env(safe-area-inset-top,0px));--mobile-caption:calc(110px + env(safe-area-inset-bottom,0px));--mobile-art-height:min(133.333333vw,calc(100dvh - var(--mobile-nav) - var(--mobile-caption)));--mobile-art-top:calc(var(--mobile-nav) + (100dvh - var(--mobile-nav) - var(--mobile-caption) - var(--mobile-art-height))/2)}
 #film-host{inset:var(--mobile-art-top) 0 auto;height:var(--mobile-art-height)}
 #film-host #stage{width:calc(var(--mobile-art-height)*.75);height:var(--mobile-art-height);aspect-ratio:3/4}
 #chapter-cover .cover-nav{height:var(--mobile-nav);padding:env(safe-area-inset-top,0px) var(--gutter) 0;display:flex;align-items:center;font:14px/1.4 var(--font-body);letter-spacing:.04em}
 #chapter-cover .cover-nav a{display:flex;align-items:center;min-height:44px}
 #chapter-cover .cover-caption{top:calc(var(--mobile-art-top) + var(--mobile-art-height) + 14px);bottom:auto;left:0;right:0;width:auto;padding:0 var(--gutter);gap:6px;background:none}
 #chapter-cover .cover-caption h1{font:400 clamp(25px,6.7vw,32px)/1.45 var(--font-title);letter-spacing:.12em;padding-left:.12em;white-space:nowrap}
 #chapter-cover .cover-enter{font:400 17px/1.5 var(--font-title);letter-spacing:.12em;min-height:44px;padding:8px 22px 8px calc(22px + .12em)}
 .page-nav{height:calc(64px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--gutter) 0;font:14px/1.4 var(--font-body);letter-spacing:.03em}
 .page-nav a{display:flex;align-items:center;min-height:44px}
 .chapter{padding:0 var(--gutter) calc(36px + env(safe-area-inset-bottom,0px));overflow:clip;min-height:0}
 .chapter .chapter-body{padding:10px 0 0;min-height:0;width:100%}
 .chapter .chapter-heading{min-height:0;width:100%;margin:0;padding:4px 0 30px;gap:24px}
 .chapter .chapter-heading h1{font:400 clamp(34px,10vw,52px)/1.4 var(--font-title);letter-spacing:.03em;transform:none;width:100%;margin:0;padding:0}
 .chapter .chapter-heading h1 span{display:inline;white-space:nowrap}
 .chapter .chapter-heading h1 span+span{margin:0}
 .chapter .chapter-footer{margin:40px 0 0;padding:12px 0 0;justify-content:center}
 .chapter .chapter-footer .continue{font:400 20px/1.5 var(--font-title);letter-spacing:.1em;padding:12px 20px;min-height:48px}
 .chapter p,.chapter .text p,.history-river .timeline p,.music .instrument-copy p{font:400 16px/1.95 var(--font-body);letter-spacing:.015em;overflow-wrap:break-word;text-align:left;text-wrap:pretty}
 .chapter h2{font-weight:400;line-height:1.45}
 .lake .chapter-heading{grid-template-columns:1fr;grid-template-areas:'title' 'art' 'poem' 'next';grid-template-rows:auto;gap:22px;padding-bottom:0}
 .lake .chapter-heading h1{font-size:clamp(32px,8.8vw,48px)}
 .lake .chapter-heading h1 span+span{margin-left:.18em}
 .lake .lake-window{width:100%;height:auto;max-height:none;aspect-ratio:1/1.06}
 .lake .poem{font:400 clamp(20px,5.5vw,26px)/1.8 var(--font-title);letter-spacing:.1em;text-align:center;margin:0;padding:0;justify-self:center}
 .lake .poem span+span{margin:0}
 .lake .chapter-footer{margin:0;padding:0;align-self:center}
 .history .chapter-heading{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;gap:24px;padding-bottom:34px}
 .history .chapter-heading h1{grid-row:1;grid-column:1}
 .history .history-portrait{grid-column:1;grid-row:2;width:76%;max-width:310px;justify-self:center;margin:0;transform:none}
 .history-river{padding:72px 0 25px 34px}
 .history-jewelry{left:7px;width:44px}
 .history-river .timeline{gap:48px}
 .history-river .timeline section,.history-river .timeline section:nth-child(even){display:flex;flex-direction:column;gap:22px;width:100%;margin:0;padding:0;min-height:0}
 .history-river .timeline section .history-plate{order:0;width:100%;transform:none}
 .history-river .timeline section .stanza-copy{order:1;max-width:none;padding:0}
 .history-river .timeline h2{font-size:28px;letter-spacing:.04em;margin-bottom:14px}
 .history-river .stanza-copy:before{margin-bottom:18px;width:32px}
 .history .chapter-footer{margin-top:16px}
 .features .chapter-heading{display:block;padding-bottom:24px}
 .feature-index{gap:0;justify-content:space-between;margin:0 0 28px;padding:5px 0}
 .feature-index button{font:400 18px/1.5 var(--font-title);letter-spacing:0;min-height:44px;padding:6px 2px}
 .feature-spreads{gap:48px}
 .feature-spread,.feature-spread:nth-child(even){display:flex;flex-direction:column;gap:24px;align-items:stretch;scroll-margin-top:24px}
 .feature-spread .feature-plate{order:0}.feature-spread .feature-copy{order:1}
 .feature-copy h2{font-size:30px;letter-spacing:.05em;margin:0 0 16px}
 .feature-copy .text,.feature-spread[data-topic=roles] .text{columns:1;max-width:none}
 .feature-spread[data-topic=roles] .feature-copy{display:block;margin:24px 0 0}
 .music .chapter-heading{grid-template-columns:1fr;grid-template-areas:'title' 'art';grid-template-rows:auto auto;gap:22px;padding-bottom:0}
 .music .instrument-reel{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/3;margin:0}
 .music .instrument-nav{display:flex;overflow-x:auto;overscroll-behavior-x:contain;justify-content:space-between;scrollbar-width:none;gap:0;margin:24px 0 28px;padding:7px 0;flex-wrap:nowrap}
 .music .instrument-nav::-webkit-scrollbar{display:none}
 .music .instrument-nav button{flex:0 0 auto;min-width:44px;min-height:44px;font:400 clamp(15px,4.3vw,18px)/1.5 var(--font-title);padding:8px 4px;white-space:nowrap}
 .music .instrument-nav button[aria-pressed=true]:after{left:4px;right:4px}
 .music .instrument-copy{width:100%;max-width:none;columns:1;padding:0;margin:0}
 .music .instrument-copy h2{font-size:29px;letter-spacing:.025em;margin-bottom:20px}
 #instrument-panel{padding:0;min-height:0}
 .sound-toggle{width:44px;height:44px}
 .works .chapter-heading{display:block;padding-bottom:26px;margin:0}
 .works .works-grid{display:grid;grid-template-columns:1fr;gap:40px;margin:0;padding:0}
 .works .works-grid .play-entry:nth-child(n){width:100%;max-width:440px;justify-self:center;margin:0}
 .works .play-entry .play-card:nth-child(n){width:100%;margin:0;transform:none;text-align:center}
 .works .play-entry .play-card h2{position:static;writing-mode:horizontal-tb;transform:none;font:400 26px/1.5 var(--font-title);letter-spacing:.06em;margin:14px 0 0;padding:0}
 .works .play-entry .sound-player{margin:8px 0 0;justify-content:center}
 .works .scene-ribbon{opacity:.14}
 .dictionary .chapter-heading{padding-bottom:26px}
 .dictionary .dictionary-search{margin-bottom:18px;padding:0}
 .dictionary .dictionary-search input{font:400 23px/1.5 var(--font-title);padding:12px 0;min-width:0}
 .dictionary-search button{font:15px/1.5 var(--font-body);min-width:44px;min-height:44px}
 .dictionary .search-message{font-size:14px;line-height:1.7;margin-bottom:22px}
 .dictionary-layout{grid-template-columns:1fr;gap:28px}
 .character-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
 .dictionary-detail{border-left:0;border-top:1px solid #cdbb9e;padding:24px 0 0;margin:0}
 .dictionary-detail .empty-character{display:none}
 .dictionary-detail h2{font-size:26px;margin-bottom:14px}
 .dialogue .chapter-heading{padding-bottom:24px}
 .dialogue .chapter-heading h1{font-size:clamp(31px,8.8vw,48px);letter-spacing:.02em}
 .dialogue .text{width:100%;max-width:none;margin:22px 0 0}
 .dialogue .interview-caption:has(.interview-status:empty):has(.interview-replay[hidden]){display:none}
 .dialogue .text p{font:400 16px/1.95 var(--font-body);margin:0}
 .dialogue .scene-ribbon{opacity:.12}
 .interview-start span:first-child{font-size:25px;padding:12px 13px 13px 17px}
 .interview-start span+span{font:15px/1.5 var(--font-body)}
 .gallery{padding:10px var(--gutter) 40px}
 .gallery-grid{grid-template-columns:1fr;gap:32px}
 .gallery-card img{width:100%;height:auto}
 .gallery-card h2{font:400 23px/1.5 var(--font-title);letter-spacing:.05em;margin:12px 0 0}
 dialog#detail{width:calc(100vw - 20px);max-width:620px;max-height:calc(100dvh - 20px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));padding:48px 24px 28px;overscroll-behavior:contain}
 .story-layout{display:block}
 .story-art{position:static;width:75%;max-width:260px;margin:0 auto 26px}
 .story-copy{padding:0}
 .story-copy h2{font:400 31px/1.5 var(--font-title);letter-spacing:.05em;margin:0 0 22px;text-align:center}
 .story-copy p,.story-background p{font:400 17px/1.95 var(--font-title);letter-spacing:0;text-align:left;text-wrap:pretty;margin-bottom:20px;overflow-wrap:break-word}
 .story-background{padding-top:22px;margin-top:24px}
 .story-background h3{font:400 22px/1.5 var(--font-title);letter-spacing:.03em;margin-bottom:16px}
 #detail .close{top:var(--close-top,18px);right:var(--close-right,18px);width:44px;min-height:44px}
 .references{padding:24px var(--gutter) 50px}
 .references h1{font-size:34px}.references p,.references li{font-size:16px;line-height:1.9}
}
@media(max-width:800px) and (max-height:480px) and (orientation:landscape){
 :root{--mobile-nav:36px;--mobile-caption:86px}
 #chapter-cover .cover-caption{top:calc(var(--mobile-art-top) + var(--mobile-art-height) + 5px);gap:0}
 #chapter-cover .cover-caption h1{font-size:21px;line-height:1.3}
 #chapter-cover .cover-enter{font-size:16px;padding:4px 20px;min-height:40px}
}