:root{--paper:#f0e4cc;--ink:#434b3d;--muted:#737b6c;--mount:#dac7a3;--serif:Georgia,'Times New Roman','Songti SC','STSong','SimSun',serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#e9dcc1}
body{min-height:100svh;display:grid;place-items:center;color:var(--ink);font:13px var(--serif);-webkit-font-smoothing:antialiased;background:radial-gradient(ellipse at 50% 40%,#f3e7d0 0%,#e9dcc1 78%)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:8px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:1px solid #8a7961;outline-offset:4px}
button:hover{color:#242b20}
[hidden]{display:none!important}
.scroll-shell{width:min(1700px,calc(100vw - 112px));margin:44px auto 35px}
.scroll-mount{position:relative;height:min(46.8svh,calc(60svh - 90px),528px);min-height:120px;padding:10.8px 25px;background:var(--mount);box-shadow:0 9px 22px #524a3514;animation:unroll 1.1s ease-out both}
.scroll-mount::before,.scroll-mount::after{content:'';position:absolute;top:-6px;bottom:-6px;width:10px;border-top:4.8px solid #8c7e64;border-bottom:4.8px solid #8c7e64;background:linear-gradient(90deg,#a4977b,#b7aa8d 55%,#a19478);box-shadow:1px 1px 2px #51442c14;border-radius:2px;z-index:3;pointer-events:none}
.scroll-mount::before{left:-5px}.scroll-mount::after{right:-5px}
.stage{height:100%;position:relative;overflow:hidden;isolation:isolate;outline:none;background:var(--paper);touch-action:none}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.paper-overlay{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.7' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:multiply}
.outside-rail{position:relative;min-height:45px;display:flex;align-items:center;justify-content:center;gap:20px;margin-top:13px}
.quiet-hint{margin:0;color:var(--muted);font-size:12px;letter-spacing:.35px;transition:opacity 1.2s;pointer-events:none;text-align:center}
.quiet-hint.faded{opacity:0}
.quiet-actions{display:flex;align-items:center;justify-content:center;gap:22px;color:#65705d}
.quiet-actions button{font-size:13px;padding:7px 5px;border-bottom:1px solid #a5a99166}
.preferences{position:fixed;right:max(22px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:19px;z-index:5;color:#818572;font-size:12px;letter-spacing:.5px}
.language-switch{display:flex;align-items:center;gap:2px}
.color-switch{min-height:35px;font-size:12px;padding:8px 4px;color:#626d56}
.sound-control{min-height:35px;display:flex;align-items:center;gap:9px;color:#626d56;white-space:nowrap}
.sound-slider{-webkit-appearance:none;appearance:none;width:48px;height:35px;margin:0;padding:0;cursor:pointer;accent-color:#626d56;background:transparent}
.sound-slider:focus-visible{outline:1px solid #8a7961;outline-offset:3px}
.sound-slider::-webkit-slider-runnable-track{height:1px;background:#7d856f99}
.sound-slider::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;margin-top:-5px;border:1px solid #626d56;border-radius:50%;background:#e9dcc1}
.sound-slider::-moz-range-track{height:1px;background:#7d856f99}
.sound-slider::-moz-range-thumb{width:11px;height:11px;border:1px solid #626d56;border-radius:50%;background:#e9dcc1}
html.monochrome{filter:grayscale(1)}
.language-switch span{opacity:.48}.language-switch button{padding:8px 5px;min-height:35px;opacity:.62}
.language-switch button[aria-pressed=true]{opacity:1;color:#414b38;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:#92977e;text-underline-offset:5px}
.touch-controls{display:none;align-items:center;justify-content:space-between;width:100%;pointer-events:none}
.walk-controls{display:flex;gap:17px}.touch-controls button{width:48px;height:44px;padding:9px;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:50%}
.touch-controls svg{width:28px;height:28px;fill:none;stroke:#6f7d65;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.touch-controls button.held{background:#cdd2be77}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes unroll{from{clip-path:inset(-12px 42% -28px);opacity:.6}to{clip-path:inset(-12px -12px -28px);opacity:1}}
@media(pointer:coarse){.touch-controls{display:flex}.outside-rail{min-height:59px}.quiet-hint{position:absolute;bottom:-10px;font-size:10px}.quiet-actions{position:absolute;inset:0 52px;gap:12px}.quiet-actions button{font-size:12px}.outside-rail:has(.quiet-actions:not([hidden])) .touch-controls{visibility:hidden}}
@media(max-width:700px){.scroll-shell{width:calc(100vw - 42px);margin:28px auto 48px}.scroll-mount{height:calc(60svh - 100.8px);max-height:492px;padding:7.2px 12px}.scroll-mount::before,.scroll-mount::after{width:7px;top:-4.2px;bottom:-4.2px;border-top-width:3.6px;border-bottom-width:3.6px}.scroll-mount::before{left:-4px}.scroll-mount::after{right:-4px}.preferences{right:17px;bottom:max(11px,env(safe-area-inset-bottom));gap:12px}.sound-control{gap:6px}.sound-slider{width:40px}.outside-rail{margin-top:10px}}
@media(max-height:500px) and (orientation:landscape){.scroll-shell{width:calc(100vw - 82px);margin:17px auto 37px}.scroll-mount{height:calc(60svh - 67.2px);min-height:87px;padding:5.4px 16px}.outside-rail{margin-top:5px;min-height:42px}.preferences{right:12px;bottom:5px}.quiet-hint{font-size:10px}}
@media(prefers-reduced-motion:reduce){.scroll-mount{animation:none}.quiet-hint{transition:none}}