:root{--ink: #2c3234;--ink-soft: #5d6463;--ink-faint: #8b908c;--paper: rgba(249, 246, 238, .93);--paper-solid: #f6f2e9;--line: rgba(50, 55, 54, .16);--line-soft: rgba(50, 55, 54, .09);--accent: #b4673f;--accent-soft: rgba(180, 103, 63, .14);--shadow: 0 18px 48px rgba(38, 43, 42, .13), 0 2px 8px rgba(38, 43, 42, .06);--serif: Georgia, "Songti SC", "STSong", "Noto Serif SC", serif;--sans: "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#cfc9bb;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,input{font-family:inherit}button{cursor:pointer}#app{position:relative;width:100vw;height:100vh;overflow:hidden}#scene{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;outline:none;cursor:grab}#scene:active{cursor:grabbing}.grain{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:2;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}.vignette{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse 76% 74% at 50% 46%,transparent 42%,rgba(38,34,28,.1) 78%,rgba(30,28,24,.28) 100%)}.masthead{position:absolute;top:40px;left:46px;z-index:5;max-width:420px;pointer-events:none;text-shadow:0 1px 12px rgba(255,250,240,.55)}.masthead:before{content:"";position:absolute;top:-32px;right:-72px;bottom:-34px;left:-46px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 76% 76% at 22% 32%,#f7f3ead6,#f7f3ea66 46%,#f7f3ea00 78%)}.eyebrow{font-size:9.5px;letter-spacing:.3em;color:var(--ink-soft);text-transform:uppercase;display:flex;align-items:center;gap:9px;font-weight:600}.eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block;box-shadow:0 0 0 4px var(--accent-soft)}.masthead h1{font-family:var(--serif);font-size:50px;font-weight:400;letter-spacing:.13em;margin:14px 0 5px -2px;line-height:1.08;color:#262d2e}.subtitle{font-size:10px;letter-spacing:.26em;color:var(--accent);text-transform:uppercase;font-weight:600}.subtitle span{margin:0 6px;opacity:.55}.lede{margin:18px 0 0;font-size:12px;line-height:2.05;color:var(--ink-soft);letter-spacing:.055em}.rule{width:38px;height:1px;background:var(--ink);opacity:.42;margin:19px 0 13px}.meta{display:flex;align-items:center;gap:11px;font-size:9px;letter-spacing:.2em;color:var(--ink-faint);text-transform:uppercase}.meta i{width:2px;height:2px;border-radius:50%;background:currentColor;opacity:.6}.control-panel{position:absolute;top:38px;right:42px;z-index:6;width:226px;padding:17px 18px 15px;background:var(--paper);border:1px solid var(--line);border-radius:3px;box-shadow:var(--shadow)}.panel-head{display:flex;justify-content:space-between;align-items:baseline;font-size:9.5px;letter-spacing:.22em;color:var(--ink);font-weight:700;text-transform:uppercase;padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--line)}.panel-no{font-size:8.5px;color:var(--ink-faint);font-weight:400;letter-spacing:.14em}.control-row{display:flex;align-items:center;justify-content:space-between;height:38px;gap:10px;border-bottom:1px solid var(--line-soft)}.control-row label{font-size:11px;color:var(--ink-soft);letter-spacing:.06em;white-space:nowrap}.seg{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}.seg-btn{border:0;background:transparent;color:var(--ink-faint);font-size:10.5px;letter-spacing:.08em;padding:5px 10px;transition:.22s ease}.seg-btn:hover{color:var(--ink)}.seg-btn.active{background:var(--ink);color:var(--paper-solid)}#qualitySeg .seg-btn{padding:5px 7px;font-size:10px;letter-spacing:.02em}.switch{position:relative;width:33px;height:18px;flex:0 0 33px;border:1px solid var(--line);border-radius:20px;background:#3c403e17;transition:.25s ease;padding:0}.switch .knob{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fbf8f1;box-shadow:0 1px 3px #0003;transition:.25s cubic-bezier(.4,1.4,.5,1)}.switch.on{background:var(--accent);border-color:var(--accent)}.switch.on .knob{transform:translate(15px)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:96px;height:2px;background:#3c403e42;outline:none;border:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--ink);border:2px solid var(--paper-solid);cursor:pointer;box-shadow:0 0 0 1px var(--line)}input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--ink);border:2px solid var(--paper-solid)}.ghost-btn{width:100%;margin-top:13px;padding:9px 0;display:flex;align-items:center;justify-content:center;gap:7px;background:transparent;border:1px solid var(--line);color:var(--ink-soft);font-size:10.5px;letter-spacing:.14em;border-radius:2px;transition:.22s ease}.ghost-btn:hover{background:var(--ink);color:var(--paper-solid);border-color:var(--ink)}.info-card{position:absolute;left:46px;bottom:108px;z-index:7;width:306px;padding:22px 24px 20px;background:var(--paper);border:1px solid var(--line);border-radius:3px;box-shadow:var(--shadow);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .38s ease,transform .38s cubic-bezier(.2,.8,.3,1)}.info-card.show{opacity:1;transform:none;pointer-events:auto}.info-close{position:absolute;top:11px;right:13px;border:0;background:transparent;font-size:20px;line-height:1;color:var(--ink-faint);transition:.2s}.info-close:hover{color:var(--ink);transform:rotate(90deg)}.info-index{font-size:9px;letter-spacing:.24em;color:var(--accent);font-weight:700}.info-card h3{font-family:var(--serif);font-size:21px;font-weight:400;letter-spacing:.08em;margin:9px 0 3px}.info-en{font-size:8.5px;letter-spacing:.2em;color:var(--ink-faint);text-transform:uppercase}.info-card p{font-size:11.5px;line-height:1.95;color:var(--ink-soft);margin:15px 0 16px;letter-spacing:.03em}.info-spec{display:flex;gap:0;border-top:1px solid var(--line);padding-top:13px}.info-spec div{flex:1;border-right:1px solid var(--line-soft);padding-right:8px}.info-spec div:last-child{border-right:0;padding-left:12px;padding-right:0}.info-spec span{display:block;font-size:8.5px;letter-spacing:.14em;color:var(--ink-faint);margin-bottom:5px}.info-spec b{font-family:var(--serif);font-size:15px;font-weight:400;color:var(--ink)}.hotspots{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;pointer-events:none}.hotspot{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;border:0;background:transparent;padding:0;display:flex;align-items:center;gap:8px;transition:opacity .3s ease}.hotspot .pin{position:relative;width:9px;height:9px;border-radius:50%;background:#fdf8ee;border:2px solid var(--accent);box-shadow:0 1px 6px #0000003d;flex:0 0 9px}.hotspot .pin:after{content:"";position:absolute;top:-7px;right:-7px;bottom:-7px;left:-7px;border-radius:50%;border:1px solid rgba(180,103,63,.65);animation:ping 2.6s ease-out infinite}@keyframes ping{0%{transform:scale(.55);opacity:.9}75%,to{transform:scale(1.5);opacity:0}}.hotspot .tag{font-size:9.5px;letter-spacing:.12em;white-space:nowrap;color:#2c3234;background:#faf7efdb;padding:4px 9px;border:1px solid var(--line);border-radius:2px;opacity:0;transform:translate(-5px);transition:.25s ease}.hotspot:hover .tag,.hotspot.active .tag{opacity:1;transform:none}.hotspot.active .pin{background:var(--accent)}.hotspot.hidden{opacity:0;pointer-events:none}.bottom-bar{position:absolute;left:0;right:0;bottom:0;z-index:5;height:84px;padding:0 46px 18px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;background:linear-gradient(to top,#f7f3ea99,#f7f3ea00);pointer-events:none}.bottom-bar>*{pointer-events:auto}.views{display:flex;align-items:center;gap:5px}.views-label{font-size:9px;letter-spacing:.22em;color:var(--ink-faint);margin-right:12px;text-transform:uppercase}.view-btn{border:1px solid transparent;background:transparent;color:var(--ink-soft);font-size:11px;letter-spacing:.1em;padding:7px 12px;border-radius:2px;transition:.22s ease}.view-btn:hover{color:var(--ink);background:#ffffff57}.view-btn.active{color:var(--paper-solid);background:var(--ink);border-color:var(--ink);box-shadow:0 3px 10px #00000024}.hint{display:flex;align-items:center;gap:7px;font-size:9.5px;letter-spacing:.13em;color:var(--ink-faint);padding-bottom:8px}.stats{font-size:9px;letter-spacing:.14em;color:var(--ink-faint);padding-bottom:8px;min-width:98px;text-align:right;font-variant-numeric:tabular-nums}.corner-mark{position:absolute;right:42px;bottom:100px;z-index:4;display:flex;align-items:center;gap:10px;font-size:8.5px;letter-spacing:.22em;color:var(--ink-faint);text-transform:uppercase;pointer-events:none}.cm-line{width:26px;height:1px;background:currentColor;opacity:.5}.loader{position:absolute;top:0;right:0;bottom:0;left:0;z-index:50;background:#eee8dc;display:flex;align-items:center;justify-content:center;transition:opacity 1.1s ease,visibility 1.1s ease}.loader.done{opacity:0;visibility:hidden}.loader-inner{text-align:center;width:260px}.loader-mark{display:flex;align-items:flex-end;justify-content:center;gap:5px;height:32px;margin-bottom:26px}.loader-mark span{width:7px;background:var(--accent);opacity:.85;animation:rise 1.3s ease-in-out infinite}.loader-mark span:nth-child(1){height:14px;animation-delay:0s}.loader-mark span:nth-child(2){height:27px;animation-delay:.16s}.loader-mark span:nth-child(3){height:19px;animation-delay:.32s}@keyframes rise{0%,to{transform:scaleY(.55);opacity:.45}50%{transform:scaleY(1);opacity:1}}.loader-title{font-family:var(--serif);font-size:19px;letter-spacing:.24em;color:var(--ink)}.loader-sub{font-size:8.5px;letter-spacing:.3em;color:var(--ink-faint);margin-top:9px;text-transform:uppercase}.loader-bar{height:1px;background:#2c323424;margin-top:30px;overflow:hidden}.loader-bar i{display:block;height:100%;width:0%;background:var(--accent);transition:width .4s ease}body.night{--ink: #efe9dd;--ink-soft: #b8b6af;--ink-faint: #8d8d88;--paper: rgba(22, 30, 41, .92);--paper-solid: #18212c;--line: rgba(226, 224, 212, .17);--line-soft: rgba(226, 224, 212, .09);--accent: #e6ae79;--accent-soft: rgba(230, 174, 121, .16);--shadow: 0 18px 48px rgba(6, 12, 20, .38), 0 2px 8px rgba(6, 12, 20, .2)}body.night .masthead{text-shadow:0 1px 16px rgba(8,16,26,.7)}body.night .masthead:before{background:radial-gradient(ellipse 76% 76% at 22% 32%,#0e1622cc,#0e162261 48%,#0e162200 78%)}body.night .masthead h1{color:#f4ede0}body.night .bottom-bar{background:linear-gradient(to top,#0e162194,#0e162100)}body.night .hotspot .tag{background:#141c27d6;color:#efe9dd}body.night .switch{background:#e6e6dc1f}body.night .switch .knob{background:#f4efe4}body.night .view-btn:hover{background:#ffffff1a}body.night .view-btn.active{background:#efe9dd;color:#1a222c;border-color:#efe9dd}body.night .seg-btn.active{background:#efe9dd;color:#18212c}body.night .ghost-btn:hover{background:#efe9dd;color:#18212c;border-color:#efe9dd}@media(max-width:1100px){.masthead{top:28px;left:28px;max-width:320px}.masthead h1{font-size:38px}.lede{display:none}.control-panel{top:26px;right:26px;width:200px}.bottom-bar{padding:0 26px 14px}.info-card{left:28px;bottom:96px}.corner-mark{right:26px}}@media(max-width:720px){.masthead h1{font-size:30px}.masthead .rule,.masthead .meta{display:none}.control-panel{top:auto;bottom:88px;right:16px;width:176px;padding:12px}.control-row{height:32px}.bottom-bar{padding:0 14px 12px;height:76px}.views-label,.hint,.stats,.corner-mark{display:none}.view-btn{padding:6px 8px;font-size:10px}.info-card{left:14px;right:14px;width:auto;bottom:82px}}
