:root{color-scheme:light;--ink:#243641;--muted:#788892;--line:rgba(53,75,89,.12);--accent:#206c83}
*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#e9f0f4;color:var(--ink);font-family:"Segoe UI","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:2px solid #277b96;outline-offset:5px}[hidden]{display:none!important}#viewport{position:fixed;inset:0}#viewport canvas{display:block;width:100%;height:100%;touch-action:none}
.header{position:absolute;inset:0 0 auto;height:96px;padding:0 36px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(#f8fafcf5,#f5f8fbe0);border-bottom:1px solid var(--line);z-index:2;pointer-events:none}.brand{display:flex;gap:11px;align-items:center;width:240px}.brand svg{width:38px;height:38px;fill:none;stroke:#365d6d;stroke-width:1.4}.brand>span{font-size:19px;letter-spacing:4px;font-weight:600}.brand span span{display:block;font-size:7px;letter-spacing:.35px;white-space:nowrap;color:#7f929d;margin-top:5px}h1{font-size:clamp(18px,1.65vw,27px);font-weight:500;letter-spacing:3px;margin:0;text-align:center}.live{width:240px;display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:11px;letter-spacing:1px;color:#687c87}.live i{width:6px;height:6px;background:#6b9e8d;border-radius:100%;box-shadow:0 0 0 4px #6b9e8d12}
.scene-caption{position:absolute;top:136px;left:42px;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:2.4px;color:#6e8794}h2{font-weight:400;font-size:25px;letter-spacing:1px;margin:13px 0 10px}.scene-caption p{font-size:12px;color:#748894;margin:0;letter-spacing:.7px}.legend{align-self:stretch;background:#f7fbfdc9;padding:17px 20px 13px;border:1px solid #fff9;border-radius:10px;backdrop-filter:blur(12px);pointer-events:none}.legend-heading,.legend-values{display:flex;justify-content:space-between;font-size:11px}.legend-heading{margin-bottom:13px;color:#526975}.legend-heading span:last-child{color:#7e909a}.legend-values{margin-top:8px;color:#687f8a;font-variant-numeric:tabular-nums}#legend-gradient{height:6px;border-radius:3px}
.modes{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);width:min(1140px,calc(100% - 440px));display:grid;grid-template-columns:repeat(5,1fr);padding:8px;border:1px solid #fffc;background:#fafcfded;backdrop-filter:blur(20px);border-radius:16px;box-shadow:0 12px 45px #24414e15;gap:4px}.mode{position:relative;display:flex;align-items:center;gap:16px;padding:16px 17px;min-height:76px;border:0;border-radius:10px;background:none;text-align:left;color:#71818b;font-size:12px;line-height:1.75;letter-spacing:.3px;transition:background .2s,color .2s}.mode-number{font-size:10px;font-variant-numeric:tabular-nums;align-self:flex-start;padding-top:4px;opacity:.6}.mode.active{color:#1d5467;background:#e6eff3}.mode:hover{background:#eaf0f3}.mode i{width:4px;height:4px;border-radius:50%;background:transparent;position:absolute;right:13px;top:16px}.mode.active i{background:#2d7890}.mode.pending i{background:#98acb5;animation:pulse 1s infinite}.view-panel{position:absolute;right:34px;bottom:145px;width:max-content;display:flex;flex-direction:column;align-items:flex-end;gap:12px;z-index:3}.tools-wrap{position:relative}.tools{display:flex;align-items:center;gap:4px;padding:6px;background:#fbfdfeeb;backdrop-filter:blur(16px);border:1px solid #fffc;border-radius:12px;box-shadow:0 6px 26px #314e5b12}.tool{width:53px;height:57px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;border:0;border-radius:8px;color:#657c89;background:transparent;font-size:10px;transition:background .18s}.tool svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}.tool.active,.tool:hover:not(:disabled){background:#e5eef2;color:#225e75}.tool:disabled{opacity:.28;cursor:default}.tool-divider{height:25px;width:1px;background:var(--line);margin:0 3px}.opacity-panel{position:absolute;bottom:100%;right:0;width:100%;padding:18px 20px;margin-bottom:10px;border-radius:12px;background:#fcfdfff5;border:1px solid #fff;box-shadow:0 8px 30px #2747541a}.opacity-panel label{display:flex;justify-content:space-between;font-size:12px;gap:32px}.opacity-panel input{width:100%;margin:17px 0 12px;accent-color:#3b768d;height:4px;cursor:pointer}.opacity-panel>span{font-size:10px;color:#7c8d97}.opacity-panel output{color:#4f7b8d;font-variant-numeric:tabular-nums}
.loading{position:fixed;inset:96px 0 0;background:#edf3f6f5;z-index:5;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity .6s}.loading.done{opacity:0;pointer-events:none}.loader-mark{font-size:36px;font-weight:300;letter-spacing:10px;color:#345463;text-align:center}.loader-mark span{display:block;font-size:9px;letter-spacing:3px;margin:14px 0 40px}.loader-track{width:220px;height:2px;background:#d6e1e6;border-radius:2px;overflow:hidden}.loader-track div{width:3%;height:100%;background:#4e8398;transition:width .3s}.loading p{font-size:11px;color:#758a96;letter-spacing:1px;margin-top:19px}.loading button{border:1px solid #91aebc;background:#fff;border-radius:7px;color:#355d70;padding:9px 20px}.status{position:absolute;left:42px;bottom:325px;background:#f8fbfce6;border:1px solid #fff9;color:#557381;font-size:11px;border-radius:20px;padding:10px 16px;max-width:calc(100% - 350px)}@keyframes pulse{50%{opacity:.3}}
.technical-intro{position:absolute;left:20px;bottom:26px;width:calc((100% - min(1140px,calc(100% - 440px)))/2 - 30px);padding:16px;background:#f7fbfdd9;border:1px solid #fff9;border-radius:12px;backdrop-filter:blur(12px)}.technical-intro h3{margin:0 0 10px;font-size:14px;font-weight:500;letter-spacing:1px;color:#344f5e}.technical-intro p{margin:0;font-size:12px;line-height:1.9;color:#657c89;text-wrap:pretty;text-align:justify;text-align-last:left;text-justify:inter-character}
@media(max-width:1000px){.brand,.live{width:auto}.brand span span{display:none}.brand>span{font-size:15px}.header{padding:0 22px;gap:15px}h1{letter-spacing:1px;font-size:20px}.modes{width:calc(100% - 32px);bottom:16px}.mode{padding:12px 9px;gap:7px;font-size:11px}.mode-number{display:none}.scene-caption{left:26px}.view-panel{right:24px;bottom:126px}.technical-intro{left:24px;bottom:126px;width:230px}.status{left:24px;bottom:325px}}
@media(max-width:650px){.header{height:78px;justify-content:center}.brand{display:none}.live{display:none}h1{font-size:17px;letter-spacing:1px}.scene-caption{top:105px;left:20px}h2{font-size:19px;margin:9px 0}.scene-caption p{font-size:10px}.eyebrow{font-size:8px}.legend{padding:12px 13px}.legend-heading{font-size:10px}.modes{width:calc(100% - 20px);bottom:12px;padding:4px;gap:1px;border-radius:12px}.mode{justify-content:center;padding:10px 3px;min-height:73px;font-size:9px;line-height:1.7;letter-spacing:0;text-align:center}.mode i{right:7px;top:7px;width:3px;height:3px}.view-panel{right:13px;bottom:108px;gap:10px}.tools{gap:2px}.tool-divider{margin:0 1px}.tool{width:32px;height:48px;font-size:9px}.tool svg{width:17px;height:17px}.technical-intro{left:13px;bottom:108px;width:calc(100% - 209px);padding:13px 14px;max-height:34vh;overflow-y:auto}.opacity-panel{width:250px}.technical-intro h3{font-size:12px;margin-bottom:7px}.technical-intro p{font-size:10px;line-height:1.8}.status{left:16px;bottom:calc(108px + 34vh + 12px);max-width:90%;font-size:10px}.loading{top:78px}}