:root{--bg:#04050c;--ink:#ece5d3;--ink-2:#bdb5a3;--muted:#8d879a;--gold:#f1c56b;--gold-2:#c9953f;--cyan:#7fd3ff;--red:#ff7a52;--violet:#b49cff;--panel:#0a0a18a8;--line:#f1c56b33;--serif:"Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", serif;--sans:"PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;--panel-w:380px}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;margin:0;overflow:hidden}#gl{touch-action:none;width:100vw;height:100vh;display:block;position:fixed;inset:0}#labels{pointer-events:none;position:fixed;inset:0;overflow:hidden}button,input,select{font:inherit;color:inherit}button{cursor:pointer}#brand{z-index:5;font-family:var(--serif);letter-spacing:.35em;color:var(--gold);text-shadow:0 0 18px #f1c56b73;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:26px;position:fixed;top:22px;left:28px}#brand small{letter-spacing:.4em;color:var(--muted);text-shadow:none;margin-top:4px;font-size:11px;display:block}#nav{z-index:5;flex-direction:column;gap:6px;display:flex;position:fixed;top:50%;left:26px;transform:translateY(-50%)}#nav button{text-align:left;color:var(--muted);font-family:var(--serif);letter-spacing:.12em;background:0 0;border:0;align-items:center;gap:12px;padding:7px 0;font-size:14px;transition:color .3s;display:flex}#nav button .dot{border:1px solid;border-radius:50%;flex:none;width:9px;height:9px;transition:all .3s}#nav button .num{width:1.3em;color:inherit;opacity:.7}#nav button .name{opacity:0;white-space:nowrap;transition:all .3s;transform:translate(-6px)}#nav:hover button .name,#nav button.active .name{opacity:1;transform:none}#nav button:hover{color:var(--ink)}#nav button.active{color:var(--gold)}#nav button.active .dot{background:var(--gold);box-shadow:0 0 12px var(--gold)}#nav .nav-sep{background:var(--line);width:40px;height:1px;margin:6px 0 4px 3px}#panels{width:var(--panel-w);z-index:4;pointer-events:none;position:fixed;top:20px;bottom:20px;right:20px}.panel{background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(14px)saturate(1.2);opacity:0;pointer-events:none;border-radius:18px;flex-direction:column;transition:opacity .6s,transform .6s;display:flex;position:absolute;inset:0;overflow:hidden;transform:translate(24px);box-shadow:0 20px 60px #00000073,inset 0 1px #ffffff0a}.panel.active{opacity:1;pointer-events:auto;transform:none}.panel-scroll{scrollbar-width:thin;scrollbar-color:#f1c56b40 transparent;flex:1;padding:26px 26px 22px;overflow-y:auto}.panel-toggle{display:none}.kicker{letter-spacing:.4em;color:var(--gold-2);margin-bottom:8px;font-size:11px}.panel h2{font-family:var(--serif);color:var(--ink);letter-spacing:.06em;margin:0 0 14px;font-size:25px;font-weight:600;line-height:1.35}.panel h3{font-family:var(--serif);color:var(--gold);letter-spacing:.1em;margin:22px 0 8px;font-size:15px;font-weight:600}.panel p{color:var(--ink-2);margin:0 0 10px;font-size:13.5px;line-height:1.85}.panel p b,.panel li b{color:var(--ink);font-weight:600}.panel ul{margin:6px 0 10px;padding-left:1.1em}.panel li{color:var(--ink-2);font-size:13px;line-height:1.8}.hl{color:var(--gold)}.hl-c{color:var(--cyan)}.hl-r{color:var(--red)}blockquote{border-left:2px solid var(--gold-2);font-family:var(--serif);color:var(--ink);background:linear-gradient(90deg,#f1c56b14,#0000);border-radius:0 10px 10px 0;margin:4px 0 16px;padding:12px 14px 10px 16px;font-size:14.5px;line-height:1.9}blockquote cite{font-style:normal;font-family:var(--sans);color:var(--muted);letter-spacing:.05em;margin-top:6px;font-size:11.5px;display:block}.note{color:var(--muted)!important;font-size:11.5px!important;line-height:1.7!important}.readout{border:1px solid var(--line);background:#00000040;border-radius:12px;margin:12px 0;padding:12px 14px}.readout .big{font-family:var(--serif);color:var(--gold);letter-spacing:.02em;font-size:26px;line-height:1.3}.readout .sub{color:var(--ink-2);margin-top:4px;font-size:12.5px;line-height:1.7}.kv{grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;display:grid}.kv dt{color:var(--muted)}.kv dd{color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;margin:0}.formula{color:var(--ink-2);white-space:pre-wrap;background:#00000059;border:1px solid #ffffff0f;border-radius:10px;margin:8px 0 12px;padding:10px 12px;font-family:SF Mono,Menlo,Consolas,monospace;font-size:12px;line-height:1.8}.btns{flex-wrap:wrap;gap:6px;margin:8px 0;display:flex}.btn{border:1px solid var(--line);color:var(--ink-2);white-space:nowrap;background:#f1c56b0f;border-radius:999px;padding:5px 12px;font-size:12.5px;transition:all .25s}.btn:hover{color:var(--ink);border-color:#f1c56b80}.btn.on{background:var(--gold);color:#1a1408;border-color:var(--gold)}.btn.primary{color:#1a1408;background:linear-gradient(135deg,#f6d48a,#c9953f);border:0;font-weight:600}.field{color:var(--ink-2);align-items:center;gap:10px;margin:10px 0;font-size:12.5px;display:flex}.field label{flex:none;min-width:5.5em}.field output{text-align:right;min-width:5em;color:var(--ink);font-variant-numeric:tabular-nums}.field input[type=number],.field input[type=text]{border:1px solid var(--line);background:#00000059;border-radius:8px;outline:none;flex:1;min-width:0;padding:6px 10px}.field input:focus{border-color:var(--gold)}input[type=range]{appearance:none;background:#f1c56b40;border-radius:3px;outline:none;flex:1;height:3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--gold);width:14px;height:14px;box-shadow:0 0 10px var(--gold);cursor:pointer;border-radius:50%}input[type=range]::-moz-range-thumb{background:var(--gold);cursor:pointer;border:0;border-radius:50%;width:14px;height:14px}.tabs{background:#0000004d;border-radius:999px;gap:4px;margin:6px 0 14px;padding:3px;display:flex}.tabs button{color:var(--muted);font-family:var(--serif);letter-spacing:.1em;background:0 0;border:0;border-radius:999px;flex:1;padding:6px 0}.tabs button.on{color:var(--gold);background:#f1c56b29}.bars{flex-direction:column;gap:9px;margin:10px 0;display:flex}.bar-row{font-size:12.5px}.bar-row .bar-head{color:var(--ink-2);justify-content:space-between;gap:8px;display:flex}.bar-row .bar-head b{color:var(--ink);font-weight:500}.bar-row .bar-head span:last-child{color:var(--gold);font-variant-numeric:tabular-nums;text-align:right}.bar-track{background:#ffffff0f;border-radius:4px;height:4px;margin-top:4px;overflow:hidden}.bar-fill{background:linear-gradient(90deg, var(--gold-2), var(--gold));border-radius:4px;height:100%}.bar-row.sci .bar-fill{background:linear-gradient(90deg, #3d86b8, var(--cyan))}.bar-row.sci .bar-head span:last-child{color:var(--cyan)}.bar-row.you .bar-fill{background:linear-gradient(90deg,#c4486e,#ff8aa8)}.bar-row.you .bar-head span:last-child{color:#ff9cb6}.grid64{grid-template-columns:repeat(8,1fr);gap:3px;margin:10px 0 6px;display:grid}.grid64 button{aspect-ratio:1;color:#0000008c;border:0;border-radius:4px;padding:0;font-size:10px;transition:transform .15s,box-shadow .15s}.grid64 button.fire{background:#e8693f}.grid64 button.water{background:#4a9ee8}.grid64 button.wind{background:#d9e4ee}.grid64 button:hover{transform:scale(1.15)}.grid64 button.sel{transform:scale(1.12);box-shadow:0 0 0 2px #fff,0 0 14px #fff}.legend{color:var(--muted);flex-wrap:wrap;gap:14px;font-size:11.5px;display:flex}.legend i{vertical-align:-1px;border-radius:2px;width:9px;height:9px;margin-right:5px;display:inline-block}.timeline{left:220px;right:calc(var(--panel-w) + 44px);z-index:4;background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);border-radius:14px;align-items:center;gap:14px;padding:12px 16px;display:none;position:fixed;bottom:26px}.timeline.active{display:flex}.timeline .play{border:1px solid var(--gold);width:34px;height:34px;color:var(--gold);background:#f1c56b1f;border-radius:50%;flex:none;place-items:center;font-size:13px;display:grid}.timeline .track{cursor:pointer;flex:1;height:34px;position:relative}.timeline .seg{border-radius:2px;height:10px;position:absolute;top:12px}.timeline .seg span{font-family:var(--serif);color:var(--ink-2);white-space:nowrap;font-size:12px;position:absolute;top:-17px;left:50%;transform:translate(-50%)}.timeline .head{pointer-events:none;background:#fff;width:2px;height:26px;position:absolute;top:4px;transform:translate(-1px);box-shadow:0 0 10px #fff}.timeline .tl-read{color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums;min-width:9.5em;font-size:12px;line-height:1.5}.timeline .tl-read b{color:var(--gold);font-family:var(--serif);font-size:14px;font-weight:600}.timeline select{border:1px solid var(--line);background:#0006;border-radius:8px;padding:4px 6px;font-size:12px}.lbl{font-family:var(--serif);color:var(--ink);white-space:nowrap;text-shadow:0 0 6px #000,0 0 12px #000;letter-spacing:.08em;pointer-events:none;font-size:12.5px;transition:opacity .3s}.lbl small{font-family:var(--sans);color:var(--muted);letter-spacing:.02em;text-align:center;font-size:10.5px;display:block}.lbl.gold{color:var(--gold)}.lbl.cyan{color:var(--cyan)}.lbl.red{color:var(--red)}.lbl.violet{color:var(--violet)}.lbl.dim{opacity:.55;font-size:11px}.lbl.tag{background:#080812a6;border:1px solid #f1c56b66;border-radius:999px;padding:3px 9px;font-size:12px}.lbl.tag.cyan{border-color:#7fd3ff73}.lbl.big{font-size:15px}.lbl.here:before{content:"◉ ";color:#ff9cb6}.lbl.pick{pointer-events:auto;cursor:pointer}.lbl.pick:hover{color:var(--gold)}.lbl.marker{text-align:center}.lbl.arc{font-family:var(--sans);letter-spacing:.02em;font-size:11px;transform:translate(10px)}.lbl.arc.b{color:#f6d797}.lbl.arc.s{color:#a8e1ff}.lbl.arc.you{color:#ffb3c6}.lbl.marker .t{font-size:15px}.lbl.marker .v{font-family:var(--sans);color:var(--ink-2);margin-top:2px;font-size:11px}.caption{top:30px;left:190px;right:calc(var(--panel-w) + 60px);z-index:3;text-align:center;pointer-events:none;display:none;position:fixed}.caption.active{display:block}.caption b{font-family:var(--serif);color:var(--gold);letter-spacing:.22em;text-shadow:0 0 24px #f1c56b80;font-size:30px;font-weight:500;animation:.9s both rise;display:block}.caption span{letter-spacing:.4em;color:var(--muted);margin-top:6px;font-size:12px;display:block}#hint{z-index:3;color:var(--muted);letter-spacing:.15em;pointer-events:none;text-align:center;font-size:12px;transition:opacity .5s;position:fixed;bottom:26px;left:50%;transform:translate(-50%)}.timeline.active~#hint{bottom:98px}#fade{background:var(--bg);z-index:20;pointer-events:none;opacity:1;transition:opacity .7s;position:fixed;inset:0}#fade.out{opacity:0}#intro{z-index:10;text-align:center;-webkit-backdrop-filter:blur(6px);background:radial-gradient(#04050cb8,#04050cf5 70%);place-items:center;transition:opacity 1.2s,visibility 1.2s;display:grid;position:fixed;inset:0}:is(body:has(#intro:not(.hide)) #labels,body:has(#intro:not(.hide)) #panels,body:has(#intro:not(.hide)) #nav){opacity:0}#labels,#panels,#nav{transition:opacity .8s}#intro.hide{opacity:0;visibility:hidden}#intro .inner{max-width:640px;padding:24px}#intro h1{font-family:var(--serif);letter-spacing:.45em;color:var(--gold);text-shadow:0 0 40px #f1c56b80;margin:0 0 0 .45em;font-size:clamp(54px,9vw,96px);font-weight:500;animation:2.4s both rise}#intro .tagline{font-family:var(--serif);letter-spacing:.5em;color:var(--ink-2);margin:14px 0 40px;font-size:17px;animation:2.4s .4s both rise}#intro blockquote{text-align:left;background:#00000040;max-width:520px;margin:0 auto 40px;animation:2.4s .8s both rise}#intro .enter{letter-spacing:.3em;font-size:15px;font-family:var(--serif);padding:11px 34px;animation:2.4s 1.2s both rise}#intro .meta{color:var(--muted);letter-spacing:.12em;margin-top:22px;font-size:12px;animation:2.4s 1.5s both rise}@keyframes rise{0%{opacity:0;filter:blur(4px);transform:translateY(14px)}to{opacity:1;filter:none;transform:none}}#sources-btn{z-index:5;position:fixed;bottom:24px;left:28px}#sources{z-index:15;-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;background:#030308bf;place-items:center;transition:opacity .4s,visibility .4s;display:grid;position:fixed;inset:0}#sources.show{opacity:1;visibility:visible}#sources .sheet{border:1px solid var(--line);background:#0c0c1aeb;border-radius:20px;width:min(760px,92vw);max-height:86vh;padding:34px 38px;overflow-y:auto}#sources h2{font-family:var(--serif);color:var(--gold);letter-spacing:.2em;margin:0 0 6px;font-weight:500}#sources h3{font-family:var(--serif);color:var(--ink);letter-spacing:.08em;margin:24px 0 8px;font-size:16px;font-weight:600}#sources p,#sources li{color:var(--ink-2);font-size:13.5px;line-height:1.85}#sources ol,#sources ul{padding-left:1.3em}#sources .close{float:right}#sources table{border-collapse:collapse;width:100%;margin:8px 0;font-size:13px}#sources th,#sources td{text-align:left;color:var(--ink-2);vertical-align:top;border-bottom:1px solid #ffffff12;padding:7px 6px}#sources th{color:var(--gold);font-weight:500}#sources td.fix{color:var(--cyan)}@media (width<=860px){:root{--panel-w:100vw}#brand{font-size:20px;top:14px;left:16px}#nav{flex-direction:row;gap:2px;top:14px;left:auto;right:12px;transform:none}#nav button{padding:6px}#nav button .name,#nav button .num,#nav .nav-sep{display:none}#panels{width:auto;height:46vh;transition:height .4s;inset:auto 8px 8px}#panels.collapsed{height:64px}.panel-toggle{z-index:2;background:#ffffff40;border:0;border-radius:3px;width:44px;height:5px;padding:0;display:block;position:absolute;top:8px;left:50%;transform:translate(-50%)}.panel-scroll{padding:22px 18px 16px}.panel h2{font-size:20px}.timeline{gap:8px;padding:8px 10px;bottom:calc(46vh + 16px);left:8px;right:8px}#panels.collapsed~.timeline{bottom:80px}.timeline .tl-read{min-width:6em}#sources-btn{padding:3px 10px;font-size:11px;inset:50px 12px auto auto}.caption{top:96px;left:12px;right:12px}.caption b{font-size:20px}#hint{display:none}}