/* Second edition: baked landscape, compositor motion, synchronized scroll rods. */
.di-dialog[hidden]{display:none!important}
.di-dialog{position:fixed;inset:0;height:100dvh;z-index:10000;color:#e0e5dc;isolation:isolate;background:transparent}
.di-paper{position:absolute;inset:0;background:#080e0b;overflow:hidden;clip-path:inset(0)}
.di-landscape,.di-camera,.di-sky,.di-terrain,.di-glow,.di-beams,.di-clouds,.di-water,.di-shade{position:absolute;inset:0;pointer-events:none}
.di-landscape{overflow:hidden;transition:opacity 1s ease}
.di-camera{transform-origin:68% 42%}
.di-sky{background:linear-gradient(180deg,#374942 0%,#34463e 44%,#20342a 78%,#101a14 100%)}
.di-glow{background:radial-gradient(ellipse at 73% 25%,#a4a181 0%,#898e7766 18%,transparent 46%);opacity:.9}
.di-mountain{position:absolute;inset:-4% -4%;width:108%;height:108%}
.di-fog{position:absolute;left:-10%;width:120%;height:20%;opacity:.55;background-repeat:repeat-x;background-size:50% 100%}
.di-beams{background:conic-gradient(from 140deg at 73% 22%,transparent 0deg,#c9ba8944 7deg,transparent 13deg,#dad0a733 20deg,transparent 26deg,#c9ba8920 33deg,transparent 40deg);opacity:.7}
.di-water{top:84%;height:16%;background:linear-gradient(#293c32,#101d16);overflow:hidden}
.di-reflection{width:100%;height:100%;opacity:.38;filter:blur(1px)}
.di-ripple{position:absolute;left:62%;top:45%;width:230px;height:48px;border-radius:50%;border:1px solid #b4b99833;box-shadow:0 0 0 18px #b4b99808,0 0 0 40px #b4b99805;opacity:.3}
.di-shade{background:linear-gradient(90deg,#050b08c7 0%,#050b0855 31%,transparent 61%),radial-gradient(ellipse,transparent 55%,#00000020);}
.di-rain-particle{position:absolute;top:-25px;width:1px;height:20px;background:linear-gradient(transparent,#c8d1be66);opacity:.2}
.di-scroll{position:relative;height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;outline:none}
.di-scroll::-webkit-scrollbar{display:none}
.di-back{position:absolute;top:max(25px,env(safe-area-inset-top));left:clamp(24px,4vw,70px);z-index:5;border:0;background:transparent;color:#d5d9c9;font:12px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.13em;cursor:pointer;padding:12px 0}
.di-back:focus-visible,.di-links a:focus-visible{outline:1px solid #c9a86a;outline-offset:8px}
.di-chapter{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:100px clamp(28px,8vw,154px) 14vh;box-sizing:border-box}
.di-copy{width:min(100%,890px);opacity:0;transition:opacity .35s ease}
.di-content-ready .di-copy{opacity:1}
.di-kicker,.di-name,.di-copy cite,.di-translation,.di-links,.di-review{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:400;letter-spacing:.05em}
.di-kicker{font-size:11px;color:#b3bfb0;letter-spacing:.18em;margin-bottom:26px}.di-kicker small{font-size:9px;margin-left:16px;opacity:.75}
.di-copy h2{font:600 clamp(50px,6.3vw,108px)/1.25 "Noto Serif SC",serif;letter-spacing:.09em;margin:0 0 26px;color:#e6e8dc;text-shadow:0 2px 24px #0004}
.di-copy h2 span{display:inline-block;margin-left:.6em}
.di-copy blockquote{margin:0;max-width:650px;border:0;padding:0}
.di-original{font:400 clamp(16px,1.6vw,23px)/2 "Noto Serif SC",serif;letter-spacing:.08em;margin:0 0 12px}
.di-copy cite{font-style:normal;font-size:10px;color:#b6c2b4}
.di-translation{font-size:11px;line-height:1.9;color:#c0cabc;max-width:570px;margin:10px 0 20px;letter-spacing:.03em}
.di-dialog[data-lang="cn"] .di-translation{display:none}
.di-name{color:#c9a86a;font-size:12px;margin-bottom:22px}
.di-chapter-3{padding-bottom:15vh}.di-chapter-3 blockquote{max-width:650px}
.di-point{position:fixed;left:61.8%;top:38.2%;width:4px;height:4px;border-radius:50%;background:#c9a86a;box-shadow:0 0 26px 5px #c9a86a22;opacity:0}
.di-chapter-3.di-entered .di-point{opacity:1;animation:di-breathe 6s ease-in-out infinite}
.di-chapter-4{background:#020403;justify-content:center}.di-chapter-4 .di-copy{position:relative;max-width:900px}.di-chapter-4 blockquote{max-width:100%}.di-chapter-4 .di-original{font-size:clamp(18px,3.6vw,58px);line-height:2.2;letter-spacing:.07em;white-space:nowrap}
.di-chapter-4 .di-original span{opacity:0}.di-content-ready .di-chapter-4.di-entered .di-original span{animation:di-ink .8s ease forwards;animation-delay:calc(var(--char)*170ms)}
.di-links{display:flex;flex-wrap:wrap;gap:24px;margin-top:40px;font-size:12px}.di-links a{color:#c9a86a;text-decoration:none;border-bottom:1px solid #c9a86a55;padding-bottom:8px}.di-review{font-size:9px;line-height:1.8;color:#87988a;margin-top:30px}
.di-seal{position:absolute;right:0;bottom:-65px;background:#a8322a;color:#eee2ce;width:48px;height:53px;display:grid;place-content:center;text-align:center;font:19px/1.2 "Noto Serif SC",serif;border:3px double #e4cbb577}
.di-rod{position:absolute;left:0;top:-6px;width:15px;height:calc(100% + 12px);border-radius:7px;background:linear-gradient(90deg,#9a7c42,#4d3c1d 55%,#2c2110);border:1px solid #d8b56a88;transform-origin:50% 0;pointer-events:none;z-index:4;opacity:0}
.di-rod:after{content:"";position:absolute;top:6px;bottom:6px;width:40px;pointer-events:none}.di-rod-left:after{left:100%;background:linear-gradient(90deg,#0009,transparent)}.di-rod-right:after{right:100%;background:linear-gradient(270deg,#0009,transparent)}
body.di-open{overflow:hidden!important}body.di-open #sigil-layer,body.di-open #sigil-layer *{animation-play-state:paused!important}body.di-open #xmchat-bubble,body.di-open #xmchat-panel{visibility:hidden!important;pointer-events:none!important}
.di-dialog:before{content:"";position:absolute;inset:0;background:#000;opacity:.65;animation:di-dim .35s ease both}@keyframes di-dim{from{opacity:0}to{opacity:.65}}
.di-resting{transition:none!important;transform:none!important}.pillar-row .pillar.di-resting{width:128px!important;height:118px!important}
.di-static .di-fog,.di-static .di-rain-particle{animation:none!important}.di-static .di-original span{opacity:1!important;animation:none!important}.di-static .di-point{animation:none!important}
@keyframes di-ink{to{opacity:1}}@keyframes di-breathe{50%{opacity:.4;box-shadow:0 0 40px 10px #c9a86a11}}
@media(max-width:700px){.di-chapter{padding:100px 25px 9vh}.di-copy h2{font-size:clamp(36px,9.7vw,66px);letter-spacing:.06em}.di-copy h2 span{margin-left:.3em}.di-translation{font-size:10px;line-height:1.7;margin-bottom:14px;max-width:95%}.di-kicker{margin-bottom:18px}.di-chapter-3{padding-bottom:13vh}.di-chapter-4 .di-original{font-size:clamp(16px,4.6vw,30px);letter-spacing:.01em}.di-chapter-4 .di-seal{bottom:-65px}.di-original{font-size:15px}.di-shade{background:linear-gradient(0deg,#040907ed 0%,#04090788 45%,transparent 70%)}.di-camera{transform-origin:65% 28%}.di-water{top:84%;height:16%}}
@media(max-width:1100px){.pillar-row .pillar.di-resting{width:min(78vw,430px)!important;height:96px!important}}
@media(prefers-reduced-motion:reduce){.di-copy{transition:none}.di-original span{animation:none!important;opacity:1!important}.di-point{animation:none!important}}
@media(max-width:1100px){body:not([data-page]) .pillar-row{flex-direction:column;gap:16px}body:not([data-page]) .pillar-row .pillar,body:not([data-page]) .pillar-row .pillar:hover{width:min(78vw,430px);height:96px;transform:none}body:not([data-page]) .pillar-row .pillar.feature{height:108px}body:not([data-page]) .pillar-row .pillar .pillar-glyph,body:not([data-page]) .pillar-row .pillar:hover .pillar-glyph{left:45px;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;font-size:30px}body:not([data-page]) .pillar-row .pillar .pillar-info{opacity:1;transform:translateY(-50%);top:50%;left:92px;right:12px;align-items:flex-start;transition:none}body:not([data-page]) .pillar-sub{width:auto;text-align:left;letter-spacing:.3px}body:not([data-page]) .pillar-name{font-size:17px;letter-spacing:1px;white-space:normal}}
@media(max-width:1100px){body:not([data-page]) .pillar-row .pillar,body:not([data-page]) .pillar-row .pillar:hover{transition:border-color .4s,box-shadow .4s}}
.di-content-ready .di-heading{animation:di-copy-in .5s ease both}.di-content-ready .di-kicker{animation:di-copy-in .5s .1s ease both}.di-content-ready blockquote{animation:di-copy-in .5s .2s ease both}@keyframes di-copy-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.di-static .di-copy *{animation:none!important}
.di-poster{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}.di-animating .di-poster,.di-static .di-poster{opacity:1}.di-animating .di-terrain,.di-animating .di-clouds,.di-animating .di-water,.di-animating .di-beams,.di-animating .di-rain-particle,.di-static .di-terrain,.di-static .di-clouds,.di-static .di-water,.di-static .di-beams,.di-static .di-rain-particle{visibility:hidden}
.di-glow{background:radial-gradient(ellipse at 73% 25%,#b6ae87 0%,#898e7766 18%,transparent 46%)}
@media(max-width:700px){.di-mountain{top:0;left:-40%;width:140%;height:65%}.di-clouds{height:65%}}
.di-poster{z-index:3}.di-animating .di-terrain{visibility:visible}.di-animating .di-mountain{will-change:transform;opacity:.002}
.di-animating .di-clouds,.di-animating .di-water,.di-animating .di-beams,.di-animating .di-rain-particle{visibility:visible;opacity:.002}.di-animating .di-poster{opacity:.999}
.di-poster{transition:opacity .55s ease}.di-animating .di-poster{transition:none}
/* Third edition: real photographic landscapes and a restrained gold luopan. */
.di-photo,.di-photo-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 48%;filter:saturate(.72) brightness(.82);pointer-events:none}
.di-photo-0{opacity:1}.di-photo-1{opacity:0}.di-photo-poster{z-index:3;opacity:0;transition:opacity .55s ease}
.di-animating .di-photo-poster,.di-static .di-photo-poster{opacity:.999;transition:none}
.di-animating .di-terrain{visibility:visible}.di-animating .di-photo{will-change:transform,opacity}
.di-static .di-terrain{visibility:hidden}.di-static .di-camera{transform:none!important}
.di-beams,.di-water,.di-glow,.di-sky{display:none}
.di-shade{background:linear-gradient(90deg,#07100bd9 0%,#07100b80 40%,#07100b0d 78%),linear-gradient(0deg,#030805c4,transparent 66%)}
.di-clouds{visibility:visible!important;opacity:1!important}
.di-photo-fog{position:absolute;inset:15% -15% 0;background:radial-gradient(ellipse at 20% 65%,#d5ddd260,transparent 43%),radial-gradient(ellipse at 75% 55%,#e4eadd40,transparent 40%);pointer-events:none}
.di-static .di-photo-fog{display:none}
.di-intro{align-items:center;padding:120px clamp(26px,9vw,180px)}
.di-intro .di-copy{max-width:1060px}.di-intro blockquote{max-width:100%}
.di-copy .di-intro-quote{font:400 clamp(24px,3.4vw,56px)/1.95 "Noto Serif SC",serif;letter-spacing:.09em;color:#f0eee2;margin:0 0 26px;text-shadow:0 2px 18px #0007}
.di-intro .di-name{letter-spacing:.5em;font-size:12px;margin-bottom:32px}
.di-intro .di-translation{max-width:660px;color:#c9d2c6}
.di-compass-section{justify-content:center;align-items:center;padding:85px 24px 50px}
.di-compass-section .di-copy{width:min(78vh,800px);max-width:calc(100vw - 48px);text-align:center}
.di-compass{margin:0;width:100%;filter:drop-shadow(0 12px 40px #0007)}.di-compass svg{display:block;width:100%;height:auto}
.di-compass-caption,.di-compass figcaption{font:11px/1.7 ui-monospace,Menlo,Consolas,monospace;color:#ddc89d;letter-spacing:.18em}.di-compass-caption{margin:0 0 15px}.di-compass figcaption{font-size:10px;color:#bac9ba;margin-top:8px;letter-spacing:.08em}
.dial-line{stroke:#bba574;stroke-opacity:.56;stroke-width:1;fill:none}
.dial-mountain{fill:#e8dbb9;font:500 27px "Noto Serif SC",serif}.dial-outer{fill:#9cad9a;font:18px "Noto Serif SC",serif}.dial-selected{fill:#fff2d2}
.dial-number,.dial-center{fill:#f1e7ce;font:500 60px "Noto Serif SC",serif}.dial-center{font-size:65px}.dial-minor{fill:#b9a67d;font:18px ui-monospace,monospace;letter-spacing:3px}.dial-note{fill:#b5c5b2;font:15px "Noto Serif SC",serif}.dial-tag{fill:#d1ad71;font:15px "Noto Serif SC",serif}
.dial-facing{fill:#426b58;fill-opacity:.9}.dial-sitting{fill:#963d30;fill-opacity:.9}.dial-direction{fill:#dfc58d;font:21px "Noto Serif SC",serif}
@media(max-width:700px){.di-photo,.di-photo-poster{object-position:58% 50%;filter:saturate(.75) brightness(.85)}.di-shade{background:linear-gradient(0deg,#030906e8 0%,#030906b8 35%,#03090640 75%,transparent)}.di-clouds{height:100%}.di-intro{padding:110px 28px 80px;align-items:center}.di-copy .di-intro-quote{font-size:clamp(22px,6.2vw,31px);line-height:2;letter-spacing:.08em}.di-compass-section{padding:90px 12px 60px}.di-compass-section .di-copy{width:100%;max-width:100%}.di-compass-caption{font-size:10px}.di-compass figcaption{font-size:9px}}
.di-intro .di-copy{width:min(100%,1200px);max-width:1200px}.di-copy .di-intro-quote{font-size:clamp(24px,3vw,50px)}.di-intro-quote .di-phrase{display:inline-block;white-space:nowrap}
@media(max-width:700px){.di-copy .di-intro-quote{font-size:clamp(22px,6.2vw,31px)}}
