:root{color-scheme:dark;--paper:#e9e7df;--muted:#929596;--line:rgba(234,234,225,.17)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#121416;color:var(--paper);font-family:"Helvetica Neue","PingFang SC","Microsoft Yahei",sans-serif;-webkit-tap-highlight-color:transparent}button,a,input{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:1px solid #fff;outline-offset:6px}button{border:0;background:none}button[hidden],[hidden]{display:none!important}#app{width:100%;height:100%;position:relative;isolation:isolate}#scene{position:absolute;inset:0;width:100%;height:100%;touch-action:none;outline:none}.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 62% 43%,transparent 33%,rgba(3,5,7,.35) 100%)}.grain{position:absolute;inset:0;pointer-events:none;opacity:.045;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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");z-index:3}header{position:absolute;top:max(30px,env(safe-area-inset-top));left:4.2%;right:4.2%;display:flex;align-items:center;justify-content:space-between;z-index:5}.brand{display:flex;align-items:center;gap:13px;color:var(--paper);text-decoration:none;font-size:20px;letter-spacing:5px;font-weight:400}.brand-mark{font-size:30px;letter-spacing:0}.brand-cn{border-left:1px solid var(--line);padding-left:15px;font-size:12px;letter-spacing:4px;color:#b5b7b5}.utilities{display:flex;gap:12px}.icon-button{border:1px solid var(--line);border-radius:50%;width:38px;height:38px;font-family:Georgia,serif;font-size:17px;display:flex;align-items:center;justify-content:center;transition:background .2s}.icon-button:hover{background:#ffffff13}.sound-button{gap:3px}.sound-button i{display:block;width:2px;height:5px;background:#d1d2cc;transition:height .2s}.sound-button i:nth-child(2){height:13px}.sound-button i:nth-child(3){height:18px}.sound-button[aria-pressed=true] i{animation:wave .9s ease-in-out infinite alternate}.sound-button i:nth-child(2){animation-delay:.25s!important}.sound-button i:nth-child(3){animation-delay:.5s!important}.sound-button i:nth-child(4){animation-delay:.1s!important}@keyframes wave{to{height:4px}}.editorial,.chapter{position:absolute;left:7.2%;top:27%;z-index:4;width:32%;max-width:390px;transition:opacity .8s,transform .8s}.eyebrow{font-size:9px;letter-spacing:2.5px;display:flex;align-items:center;gap:10px;color:#a7aaa8}.eyebrow>span:first-child:empty{height:1px;width:24px;background:#9c9e9b}h1{font-family:"Songti SC","STSong","Noto Serif CJK SC",serif;font-size:clamp(42px,4.8vw,76px);font-weight:400;line-height:1.3;letter-spacing:5px;margin:25px 0 20px}h1 span{color:#aaaead}.lead{font-size:12px;line-height:2.2;color:#a7aba9;letter-spacing:2px}.intro-action{margin-top:34px;display:flex;align-items:flex-start;flex-direction:column;gap:18px}.primary{display:flex;align-items:center;justify-content:space-between;background:#e6e6de;color:#222625;min-width:195px;padding:18px 23px;font-size:12px;letter-spacing:3px;transition:background .2s,transform .2s}.primary:hover{background:#fff;transform:translateY(-2px)}.primary>span{font-size:20px;line-height:10px;margin-left:22px}.intro-action small{color:#777e7d;font-size:10px;letter-spacing:2px}.intro-action small span{margin-left:12px;font-size:14px}.chapter h2{font-family:"Songti SC",serif;font-size:46px;font-weight:400;letter-spacing:8px;margin:24px 0 20px}.chapter p{font-size:12px;line-height:2;letter-spacing:1px;color:#a3a7a4;max-width:250px}.chapter-rule{margin-top:35px;border-top:1px solid var(--line);padding-top:20px;font-size:10px;color:#828987;letter-spacing:2px}.chapter-rule span{margin-right:10px}.scene-caption{position:absolute;top:17%;left:47%;display:flex;align-items:center;gap:16px;font-size:9px;letter-spacing:3px;color:#7c8381;pointer-events:none}.scene-caption .line{width:45px;height:1px;background:#57605d}.controls{position:absolute;bottom:98px;right:8%;width:315px;padding:20px 22px 12px;border:1px solid #9aa29a28;background:linear-gradient(120deg,#22272880,#171c1d70);backdrop-filter:blur(15px);z-index:5}.control-header{display:flex;align-items:center;justify-content:space-between}.control-header>div{display:flex;flex-direction:column;gap:7px}.tiny-label{font-size:8px;letter-spacing:2px;color:#737d79}.control-title{font-size:11px;letter-spacing:2px;color:#c2c8c3}#angle-value{font-family:Georgia,serif;font-size:27px;font-style:italic;color:#bfc5c0;font-variant-numeric:tabular-nums}.range-row{display:flex;align-items:center;gap:14px;margin:20px 0 12px}.sun{font-size:23px;color:#bfc7c1}.small-sun{font-size:15px;color:#77827c}input[type=range]{-webkit-appearance:none;appearance:none;height:2px;background:linear-gradient(90deg,#59635e,#d3d8cf);width:100%;margin:15px 0;cursor:ew-resize;touch-action:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:17px;width:17px;background:#e1e4dc;border:5px solid #555f57;border-radius:50%;box-shadow:0 0 0 1px #b4bfb4,0 0 18px #dce7d037}input[type=range]::-moz-range-thumb{height:9px;width:9px;background:#e1e4dc;border:4px solid #555f57;border-radius:50%}.control-footer{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#818c85;letter-spacing:.4px}.control-footer button{font-size:24px;padding:0 0 0 12px;color:#a0ada2}footer{position:absolute;left:4.2%;right:4.2%;bottom:max(26px,env(safe-area-inset-bottom));border-top:1px solid var(--line);padding-top:20px;display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:2px;color:#69716e;z-index:5}.level-dots{display:flex;align-items:center;gap:12px}.level-dots button{padding:4px;font-size:10px;color:#666e69;font-family:Georgia,serif;min-width:30px;min-height:30px}.level-dots button.active{color:#e2e6dc}.level-dots span{height:1px;width:22px;background:#475049}.world-marker{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:2px;color:#e8ece4;white-space:nowrap;transform:translate(-50%,-100%);padding:15px;text-shadow:0 1px 7px #000}.marker-dot{height:5px;width:5px;border:1px solid white;transform:rotate(45deg);box-shadow:0 0 12px #fff}.checkpoint-marker{color:#b7c0b5}.toast{position:absolute;left:50%;bottom:255px;transform:translate(-50%,10px);padding:12px 20px;background:#111918dc;border:1px solid #8b9c8e35;border-radius:2px;max-width:85%;text-align:center;font-size:11px;line-height:1.7;letter-spacing:1px;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;z-index:8}.toast.show{opacity:1;transform:translate(-50%,0)}#loading{position:absolute;inset:0;background:#121416;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;transition:opacity .7s}.loading-symbol{font-size:50px;animation:pulse 1.5s infinite}#loading p{font-size:11px;letter-spacing:5px;color:#8b918d;margin-top:22px}@keyframes pulse{50%{opacity:.25}}.modal-backdrop{position:absolute;inset:0;background:#070b0caa;backdrop-filter:blur(5px);z-index:12;display:flex;align-items:center;justify-content:center;padding:25px}.modal{width:380px;max-width:100%;border:1px solid #919d8c30;background:#1c2222;padding:38px}.modal h2{font-family:"Songti SC",serif;font-size:37px;line-height:1.5;letter-spacing:4px;font-weight:400;margin:20px 0}.modal p{font-size:12px;line-height:2;color:#acb5aa}.modal ol{padding-left:20px;color:#acb5aa;font-size:12px;line-height:2.4}.modal .primary{width:100%;margin-top:28px}.modal .eyebrow{font-size:9px}.dimmed{opacity:0;transform:translateY(8px);pointer-events:none}@media(min-width:1500px){.editorial,.chapter{left:10%;}.controls{right:12%}}@media(max-width:700px){header{top:max(20px,env(safe-area-inset-top));left:23px;right:23px}.brand{font-size:16px;gap:9px;letter-spacing:4px}.brand-mark{font-size:26px}.brand-cn{font-size:10px;padding-left:10px}.utilities{gap:8px}.icon-button{width:34px;height:34px}.editorial{left:28px;top:14%;width:calc(100% - 56px);max-width:none}.eyebrow{font-size:7px;letter-spacing:2px;gap:8px}h1{font-size:34px;line-height:1.25;letter-spacing:3px;margin:15px 0}h1 br{display:none}.lead{font-size:10px;line-height:1.8;letter-spacing:1px;margin:0}.lead br{display:none}.intro-action{position:fixed;bottom:218px;left:28px;right:28px;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;margin:0}.primary{min-width:154px;padding:16px 18px;font-size:11px;letter-spacing:2px}.intro-action small{max-width:90px;line-height:1.8;font-size:9px;letter-spacing:1px}.intro-action small span{margin-left:5px}.controls{left:24px;right:24px;bottom:max(70px,calc(env(safe-area-inset-bottom) + 50px));width:auto;padding:15px 18px 10px}.control-header>div{flex-direction:row;align-items:center;gap:12px}.tiny-label{font-size:7px}.control-title{font-size:10px;letter-spacing:1px}#angle-value{font-size:23px}.range-row{margin:12px 0 7px}.control-footer{font-size:8px}.scene-caption{left:auto;right:28px;top:32%;font-size:7px;letter-spacing:2px}.scene-caption .line{width:20px}footer{left:24px;right:24px;bottom:max(15px,env(safe-area-inset-bottom));padding-top:10px}footer>span{font-size:6px;letter-spacing:1px;max-width:100px;line-height:1.8}.footer-right{display:none}.level-dots{gap:7px}.level-dots span{width:12px}.chapter{top:13%;left:28px;width:calc(100% - 56px);max-width:none}.chapter h2{font-size:28px;letter-spacing:4px;margin:12px 0 7px}.chapter p{font-size:10px;line-height:1.7;max-width:240px;margin:0}.chapter-rule{position:absolute;right:0;top:16px;margin:0;border:none;font-size:8px;writing-mode:vertical-rl;padding:0;line-height:1.8;letter-spacing:3px}.chapter-rule span{margin:0 0 10px}.toast{bottom:225px;font-size:10px;padding:10px 15px;width:max-content;max-width:85%}.modal{padding:28px}.modal h2{font-size:32px}.world-marker{font-size:8px;letter-spacing:1px;padding:12px}}@media(max-height:670px) and (max-width:700px){.editorial{top:12%}h1{font-size:27px}.lead{display:none}.intro-action{bottom:205px}.scene-caption{top:29%}.chapter{top:12%}.chapter-rule{display:none}.controls{padding-top:12px}.range-row{margin:6px 0}.chapter h2{font-size:25px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Keep a generous touch target while retaining the thin light-direction track. */
#scene{cursor:grab}#scene.dragging{cursor:grabbing}.icon-button{min-width:44px;min-height:44px}.world-marker{min-height:44px;min-width:44px}.control-footer button{min-width:44px;min-height:44px}input[type=range]{height:36px;background-size:100% 2px;background-repeat:no-repeat;background-position:center;margin:0}input[type=range]::-webkit-slider-thumb{height:25px;width:25px}input[type=range]::-moz-range-thumb{height:17px;width:17px}.level-dots button{min-height:44px;min-width:36px}@media(max-width:700px){.utilities{gap:4px}.controls{padding-bottom:4px}.range-row{margin:5px 0 0}.control-footer{font-size:8px}.icon-button{font-size:17px}header{left:20px;right:16px}.brand{letter-spacing:3px;gap:7px}footer{padding-top:4px;bottom:max(8px,env(safe-area-inset-bottom))}}

.vignette{background:radial-gradient(ellipse at 62% 43%,transparent 40%,rgba(0,0,0,.55) 100%)}.grain{opacity:.025}.gesture-guide{display:flex;align-items:center;gap:18px;margin:17px 0 8px;font-size:12px;letter-spacing:2px}.gesture-guide>span{font-size:30px;color:#fff}.gesture-guide small{display:block;color:#939393;font-size:9px;margin-top:7px;letter-spacing:1px}.controls{background:linear-gradient(120deg,#171717cc,#080808b0);border-color:#ffffff30}.control-title,.control-footer{color:#c4c4c4}

.zoom-controls{position:absolute;right:24px;top:48%;display:flex;flex-direction:column;z-index:5;border:1px solid #ffffff30;background:#101114cc;border-radius:24px;backdrop-filter:blur(8px)}.zoom-controls button{width:44px;height:44px;font-size:22px}.zoom-controls button+button{border-top:1px solid #ffffff20}
.controls{display:flex;align-items:center;gap:12px;width:auto;max-width:440px;padding:5px 12px;bottom:86px;border-radius:30px}.control-header{gap:10px}.control-header .tiny-label,.gesture-guide{display:none}.control-header>div{display:none}#angle-value{font-size:18px;min-width:44px}.control-footer{gap:4px;font-size:10px}.control-footer button{font-size:20px}.toast{bottom:160px}
@media(max-width:700px){
header{top:max(14px,env(safe-area-inset-top));left:18px;right:12px}.brand-cn{display:none}.brand{font-size:15px}.editorial{top:11%;left:22px;width:calc(100% - 44px)}h1{font-size:28px;letter-spacing:2px;margin:12px 0}.lead{font-size:10px;display:block}.intro-action{bottom:135px;left:22px;right:22px}.intro-action small{max-width:100px}.chapter{top:11%;left:22px;width:calc(100% - 44px)}.chapter h2{font-size:24px;margin:8px 0}.chapter p{font-size:10px;max-width:245px}.chapter-rule,.scene-caption{display:none}.controls{left:50%;right:auto;transform:translateX(-50%);bottom:max(63px,calc(env(safe-area-inset-bottom) + 49px));padding:0 8px 0 13px;gap:6px;max-width:calc(100% - 32px);width:max-content;height:44px}.control-header{gap:0}.control-footer{font-size:9px;letter-spacing:0;white-space:nowrap}.control-footer button{min-width:40px;min-height:40px}#angle-value{font-size:17px;min-width:42px}.zoom-controls{right:12px;top:43%}.zoom-controls button{width:42px;height:44px}.world-marker{padding:11px 14px;font-size:11px;background:#0a0b0b9c;border:1px solid #ffffff40;border-radius:24px}.toast{bottom:125px}.level-dots{gap:2px}footer{bottom:max(6px,env(safe-area-inset-bottom));left:20px;right:20px}
}