:root{color-scheme:light;--ink:#173e40;--paper:#f8f3e5;--accent:#be594d}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}body{background:var(--paper);color:var(--ink);font-family:'Songti SC','STSong','SimSun',serif}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #cf7056;outline-offset:5px}#experience{height:100svh;position:relative;isolation:isolate}#world{position:absolute;inset:0 0 24%;overflow:hidden;background:#e9e6d5}canvas{display:block;width:100%;height:100%;touch-action:pan-y}.frame{position:absolute;inset:14px 14px 24%;border:1px solid #173e4020;pointer-events:none}header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:32px 4vw;z-index:3}header a{color:inherit;text-decoration:none;font-size:19px;letter-spacing:.08em}header a span{display:block;font:10px sans-serif;letter-spacing:.22em;margin-top:8px;opacity:.7}.top-controls{display:flex;gap:20px}.top-controls button,footer button{background:none;border:0;color:inherit;font-size:12px;padding:9px}#chapter-label{position:absolute;left:4.4vw;top:132px;writing-mode:vertical-rl;letter-spacing:.3em;font-size:12px;opacity:.7;pointer-events:none}#invitation{position:absolute;bottom:27%;left:50%;transform:translateX(-50%);background:#f8f3e5e8;color:#214b48;padding:9px 18px;font:11px sans-serif;letter-spacing:.12em;white-space:nowrap;pointer-events:none;transition:opacity .6s}.narrative{position:absolute;inset:76% 0 45px;display:flex;align-items:center;justify-content:space-between;gap:6vw;padding:14px 6vw;background:var(--paper);z-index:5}.story{max-width:760px}h1{font-weight:400;font-size:clamp(26px,3vw,44px);line-height:1.2;margin:0 0 12px;letter-spacing:-.03em}p{margin:0;font-size:clamp(13px,1.15vw,17px);line-height:1.85;color:#476560}#action{border:0;border-bottom:1px solid #214740;background:transparent;padding:15px 0;color:#214740;display:flex;align-items:center;gap:28px;white-space:nowrap;font-size:14px}footer{position:absolute;bottom:0;height:45px;left:0;right:0;display:flex;align-items:center;gap:24px;padding:0 4vw;background:var(--paper);font:11px sans-serif;z-index:6}#scrub{flex:1;accent-color:#3d7c7b;height:3px;cursor:ew-resize}#stage-name{min-width:40px}body.flying header,body.flying #chapter-label{color:#fff7dd}.flying .frame{border-color:#fff3}#error{position:absolute;inset:25%;padding:30px;background:#fff;z-index:100}.changing .story{animation:enter .6s both}@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-width:700px){#world{bottom:34%}.frame{bottom:34%;inset-inline:8px}header{padding:22px 6vw}header a{font-size:16px}.top-controls{gap:2px}#chapter-label{top:110px;left:6vw}.narrative{top:66%;bottom:42px;padding:14px 6vw;display:block;overflow:auto}h1{font-size:27px;margin-bottom:8px}p{font-size:13px;line-height:1.7}#action{padding:10px 0;margin-top:6px;font-size:12px}#invitation{bottom:36%;font-size:10px;padding:7px 10px}footer{height:42px;gap:10px}footer button{font-size:10px}.top-controls button{font-size:11px}}@media(prefers-reduced-motion:reduce){.changing .story{animation:none}}