:root{font-family:'DM Sans','Segoe UI',Arial,sans-serif;color:#eaf5f5;background:#081a23;font-synthesis:none;--teal:#69ead6;--orange:#f5b56c;--ink:#0a202c;--glass:rgba(7,27,36,.86);--line:rgba(174,230,235,.15);--mono:'DM Mono',Consolas,monospace}
*,*::before,*::after{box-sizing:border-box}html,body,#app{width:100%;height:100%;padding:0;margin:0;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--teal);outline-offset:3px}button{color:inherit}button:disabled{cursor:not-allowed;opacity:.5}
#app{position:relative;background:radial-gradient(ellipse at 44% 40%,#2d7180,#0e2936 64%,#081721)}#viewport{position:absolute;inset:0}#viewport canvas{width:100%;height:100%;display:block;touch-action:none}#vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(3,18,26,.26),transparent 45%,rgba(3,18,26,.17)),linear-gradient(0deg,rgba(3,15,25,.47),transparent 18%,transparent 74%,rgba(5,20,30,.28))}#crosshair{position:absolute;top:50%;left:50%;color:rgba(210,246,242,.21);font:25px var(--mono);transform:translate(-50%,-50%);pointer-events:none}
.topbar{position:absolute;z-index:10;top:0;left:0;right:0;height:77px;padding:0 36px;display:flex;align-items:center;border-bottom:1px solid rgba(230,255,250,.15);background:linear-gradient(180deg,rgba(4,19,27,.88),rgba(5,23,31,.66));backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:15px;flex-shrink:0}.symbol{display:flex;align-items:center;justify-content:center;width:48px;height:48px;color:#d4fcfa;border:1px solid rgba(127,237,221,.55);font-size:29px;font-weight:800;letter-spacing:-6px;padding-right:6px}.symbol span{color:var(--orange);font-size:29px;letter-spacing:-3px}.brand-name{font-size:18px;letter-spacing:.18em;font-weight:800}.brand-name span{font-size:13px;letter-spacing:.08em;color:#b9c9cd;font-weight:500}.brand-caption{font:9px var(--mono);color:#85b2b8;letter-spacing:.165em;margin-top:4px}.top-meta{margin-left:auto;display:flex;align-items:center;gap:16px;font:10px var(--mono);letter-spacing:.055em;color:#b8d5d6}.pulse-dot{width:7px;height:7px;background:var(--teal);border-radius:50%;box-shadow:0 0 12px var(--teal);animation:pulse 2s infinite}.meta-divider{height:16px;width:1px;background:rgba(232,252,254,.19)}.mini-icon{margin-left:24px;width:31px;height:31px;border:1px solid rgba(216,251,245,.3);background:rgba(8,29,38,.8);border-radius:50%;font:15px var(--mono)}.mini-icon:hover{border-color:var(--teal)}
.viewbar{position:absolute;z-index:9;top:93px;left:35px;display:flex;gap:0;height:36px;max-width:calc(100vw - 480px);overflow:auto;scrollbar-width:none;align-items:stretch;border:1px solid rgba(207,251,250,.17);background:rgba(6,25,35,.77);backdrop-filter:blur(8px)}.viewbar::-webkit-scrollbar{display:none}.viewbar-label{display:flex;align-items:center;white-space:nowrap;padding:0 15px;font:10px var(--mono);color:#8da9b1;border-right:1px solid var(--line)}.view-btn{white-space:nowrap;border:0;border-right:1px solid var(--line);background:transparent;font:10px var(--mono);color:#8cb3bb;padding:0 15px;transition:background .2s,color .2s}.view-btn span{color:#d4e3e4;margin-left:6px;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600}.view-btn:hover,.view-btn.active{background:rgba(74,181,174,.15);color:var(--teal)}.view-btn.active{box-shadow:inset 0 -2px var(--teal)}.scene-label{position:absolute;left:40px;top:166px;width:min(440px,35vw);pointer-events:none}.eyebrow,.section-kicker{color:var(--teal);font:10px var(--mono);letter-spacing:.15em;font-weight:500}.scene-label h1{font-size:clamp(36px,3.3vw,64px);line-height:1.03;font-weight:700;letter-spacing:-.047em;margin:18px 0 15px;text-shadow:0 3px 20px rgba(4,18,30,.35)}.scene-label h1 em{font-style:normal;color:#ace8df}.scene-label p{color:#bfd4d7;font-size:13px;line-height:1.65;max-width:350px;margin:0;text-shadow:0 2px 9px #112631}.label-tag{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:10px 12px;color:#dcefeb;font:9px var(--mono);letter-spacing:.08em;background:rgba(3,24,32,.66);border:1px solid rgba(178,232,218,.23)}.blink{color:#6be5ce;animation:pulse 2s infinite}.tag-id{padding-left:11px;margin-left:5px;border-left:1px solid rgba(227,245,239,.22);color:#96b6b7}
.inspector{position:absolute;z-index:10;right:24px;top:95px;width:335px;max-height:calc(100vh - 169px);overflow:auto;scrollbar-width:thin;scrollbar-color:#28515c transparent;background:linear-gradient(130deg,rgba(6,27,37,.96),rgba(7,25,35,.93));border:1px solid rgba(182,232,236,.23);box-shadow:0 16px 90px rgba(1,10,15,.33),inset 0 1px rgba(242,255,255,.06);backdrop-filter:blur(18px);padding:22px}.inspector-header{display:flex;justify-content:space-between;gap:6px;align-items:center}.inspector h2{font-size:20px;letter-spacing:-.035em;margin:6px 0 0;font-weight:700}.live-tag{font:9px var(--mono);color:#82e9d9;border:1px solid rgba(99,225,204,.35);padding:6px 8px;background:rgba(72,173,156,.12)}.metric-lead{margin-top:23px;padding:17px 18px 18px;background:linear-gradient(115deg,rgba(37,120,115,.22),rgba(26,62,70,.17));border:1px solid rgba(111,237,212,.18)}.metric-lead>span{font:10px var(--mono);color:#91c9c6;letter-spacing:.1em}.metric-lead>div:nth-child(2){display:flex;align-items:baseline;gap:10px;margin:7px 0 9px}.metric-lead strong{font-size:50px;font-weight:600;letter-spacing:-.065em;line-height:1;color:#dffbf0;font-variant-numeric:tabular-nums}.metric-lead b{font:14px var(--mono);font-weight:500;color:var(--teal)}.meter{width:100%;height:3px;background:rgba(106,181,181,.18)}.meter span{display:block;width:0;height:100%;background:linear-gradient(90deg,#1e8e90,#83efcf);box-shadow:0 0 7px #55e0c5;transition:width .35s}.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(159,204,210,.18);border:1px solid rgba(159,204,210,.12);margin-top:13px}.metric{min-height:82px;padding:13px 15px;background:#0e2934}.metric span{display:block;color:#8fadb6;font:9px var(--mono);letter-spacing:.075em}.metric strong{display:inline-block;margin:9px 5px 0 0;font:600 22px 'DM Sans',sans-serif;letter-spacing:-.025em;line-height:1.1}.metric small{font:8px var(--mono);color:#7db5b8}.hr{height:1px;background:var(--line);margin:22px 0}.control-heading{display:flex;justify-content:space-between;font:10px var(--mono);color:#d4e9ea;letter-spacing:.09em;margin-bottom:19px}.adjustable{font-size:8px;color:#67dccd;border:1px solid rgba(90,221,190,.27);padding:2px 5px}.slider-control{margin:14px 0 20px}.slider-control label{display:flex;justify-content:space-between;gap:10px;font-size:11px;font-weight:500;color:#bacfd1}.slider-control output{font:11px var(--mono);color:#88e2d2}.slider-control input{margin-top:16px;display:block;width:100%;height:4px;appearance:none;background:#254753;cursor:pointer;border-radius:8px;accent-color:#8de7d1}.slider-control input::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border:2px solid #78e7d2;background:#102d38;border-radius:50%;box-shadow:0 0 10px rgba(113,227,209,.55)}.slider-control input::-moz-range-thumb{width:11px;height:11px;border:2px solid #78e7d2;background:#102d38;border-radius:50%}.control-row{display:flex;align-items:center;justify-content:space-between;gap:6px}.control-row label{font:10px var(--mono);color:#a1babe}.control-row select{color:#adeee2;min-width:130px;background:#153440;border:1px solid rgba(122,220,201,.3);font:10px var(--mono);padding:8px 5px;outline:none}.control-row option{background:#102d39}.toggle-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.toggle{min-height:34px;text-align:left;border:1px solid rgba(194,225,230,.14);background:rgba(28,63,73,.21);color:#8fa9b0;padding:8px 10px;font:9px var(--mono);white-space:nowrap;letter-spacing:.035em}.toggle.active{background:rgba(49,131,121,.15);color:#c2f7e9;border-color:rgba(95,226,207,.29)}.toggle-light{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;background:#50717b}.toggle.active .toggle-light{background:#71f0cb;box-shadow:0 0 7px #51e9c9}.action-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:19px}.action-row button{border:1px solid rgba(170,215,215,.24);background:rgba(13,43,54,.75);min-height:35px;font:13px var(--mono);color:#b5eff0}.action-row button span{font:9px var(--mono);color:#dbf5ec}.action-row button:hover{background:rgba(72,136,137,.27)}.inspector-foot{display:flex;justify-content:space-between;margin-top:20px;font:8px var(--mono);letter-spacing:.03em;color:#76969c}
#hotspots{position:absolute;inset:0;z-index:5;pointer-events:none}.hotspot{position:absolute;transform:translate(-9px,-50%);display:flex;align-items:center;gap:7px;padding:0;background:transparent;border:0;text-align:left;pointer-events:auto;text-shadow:0 2px 6px rgba(2,15,19,.6)}.hotspot-ring{display:flex;align-items:center;justify-content:center;width:23px;height:23px;flex-shrink:0;border-radius:50%;border:1px solid rgba(254,191,117,.95);box-shadow:0 0 0 5px rgba(229,152,77,.14),0 0 14px rgba(249,174,99,.4);background:rgba(26,47,47,.8);font:15px var(--mono);color:#ffcf86;transition:transform .2s,background .2s}.hotspot:hover .hotspot-ring{transform:scale(1.25);background:#a45f31}.hotspot-text{display:flex;flex-direction:column;gap:4px;padding:6px 9px 6px 10px;background:rgba(8,27,37,.75);border-left:1px solid #f7bb77;white-space:nowrap}.hotspot-text small{color:#eac298;font:8px var(--mono);letter-spacing:.055em}.hotspot-text strong{font:600 10px 'DM Sans',sans-serif;letter-spacing:.08em}.hotspot:nth-child(5) .hotspot-text,.hotspot:nth-child(6) .hotspot-text{background:rgba(8,27,37,.8)}
.selection-panel{position:absolute;z-index:14;bottom:63px;left:35px;width:min(385px,calc(100vw - 60px));padding:24px;background:linear-gradient(140deg,rgba(8,30,41,.97),rgba(9,30,39,.95));border:1px solid rgba(182,234,227,.33);box-shadow:0 15px 60px rgba(0,8,13,.5);backdrop-filter:blur(14px)}.selection-panel[hidden],.help-modal[hidden],.loading[hidden],.error-notice[hidden]{display:none!important}.selection-panel #close-selection,.help-card #close-help{position:absolute;right:14px;top:12px;background:none;border:0;color:#bfd7d8;font-size:24px;line-height:1}.selection-panel h3{font-size:24px;letter-spacing:-.045em;line-height:1.1;margin:10px 0 14px}.selection-panel p{font-size:12px;line-height:1.75;color:#b4d0d1;margin-bottom:16px}.selection-spec{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}.selection-spec>div{min-width:0}.selection-spec small{font:8px var(--mono);color:#8db3b7}.selection-spec strong{display:block;font:11px var(--mono);color:#c8f5e6;margin-top:7px;overflow-wrap:break-word}#selection-focus{display:block;margin-top:18px;background:#60ceb7;color:#062d33;border:0;font:10px var(--mono);letter-spacing:.08em;font-weight:500;padding:12px 16px;width:100%}#selection-focus:hover{background:#adfae2}
.statusbar{position:absolute;z-index:7;bottom:0;left:0;right:0;min-height:43px;padding:0 29px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid rgba(181,228,227,.17);background:rgba(4,18,27,.79);backdrop-filter:blur(9px);color:#a4bbc1;font:9px var(--mono);letter-spacing:.06em}.status-left,.status-center,.status-right{display:flex;gap:17px;align-items:center;white-space:nowrap}.status-left span:first-child{color:#87e5cf}.dot-sky{color:var(--teal)}.status-center{color:#92adb5}.mouse-icon{font-size:16px}.middle-dot{color:#6e9aa4}.status-right{color:#73959f}
.help-modal{position:absolute;z-index:40;inset:0;background:rgba(1,8,14,.7);display:flex;align-items:center;justify-content:center;padding:25px;backdrop-filter:blur(8px)}.help-card{position:relative;width:min(520px,90vw);padding:36px;background:#0b2936;border:1px solid rgba(160,239,228,.3);box-shadow:0 25px 100px #0007}.help-card h2{font-size:28px;letter-spacing:-.045em}.help-card p{font-size:13px;line-height:1.85;color:#b4d0d1}.shortcut-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:25px 0}.shortcut-grid span{display:flex;align-items:center;gap:12px;font-size:12px}.shortcut-grid kbd{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:28px;padding:0 7px;font:11px var(--mono);background:#153e49;color:#bef8e9;border:1px solid #386a74}.help-note{font-style:italic;font-size:11px!important}.loading{position:absolute;inset:0;z-index:50;background:radial-gradient(ellipse at 50% 50%,#123a47,#06131e 80%);display:flex;flex-direction:column;gap:25px;align-items:center;justify-content:center;transition:opacity .6s}.loading.fade{opacity:0;pointer-events:none}.loading-symbol{font-size:80px;letter-spacing:-10px;font-weight:800;color:#a9ede1}.loading-line{width:220px;height:2px;background:#184957;overflow:hidden}.loading-line span{display:block;width:45%;height:100%;background:#67e8cf;animation:loadSlide 1.4s ease-in-out infinite}.loading>span{font:10px var(--mono);color:#8cbbc1;letter-spacing:.13em}.error-notice{position:absolute;z-index:80;top:50%;left:50%;transform:translate(-50%,-50%);background:#291a1a;border:1px solid #de9990;color:#ffe0db;padding:20px 30px;max-width:600px;font:13px var(--mono)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}@keyframes loadSlide{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@media(max-width:1250px){.status-center{display:none}.scene-label{top:160px}.inspector{width:316px}.viewbar{max-width:calc(100vw - 400px)}.top-meta{font-size:9px}}
@media(max-width:900px){.topbar{height:66px;padding:0 14px}.brand-name{font-size:15px}.brand-caption{font-size:8px}.symbol{width:39px;height:39px}.top-meta{display:none}.viewbar{top:74px;left:11px;right:11px;max-width:none}.scene-label{top:122px;left:17px;width:49vw}.scene-label h1{font-size:35px}.scene-label p{font-size:11px}.inspector{top:auto;bottom:54px;right:11px;width:min(320px,45vw);max-height:60vh;padding:14px}.inspector-header h2{font-size:17px}.metric-lead strong{font-size:36px}.metric{min-height:68px}.metric strong{font-size:18px}.statusbar{padding:0 14px}.status-left span:nth-child(n+2){display:none}.selection-panel{bottom:55px;left:10px}}
@media(max-width:600px){.scene-label{left:14px;top:125px;width:85vw}.scene-label h1{font-size:30px;margin:10px 0}.scene-label p{max-width:230px}.label-tag{display:none}.viewbar-label{display:none}.view-btn{padding:0 8px;font-size:9px}.view-btn span{margin-left:2px;font-size:9px}.inspector{left:9px;right:9px;bottom:50px;width:auto;max-height:34vh;padding:12px;overflow:auto}.inspector-header h2{font-size:15px}.inspector-header .section-kicker{font-size:8px}.metric-lead{margin-top:10px;padding:10px 12px}.metric-lead strong{font-size:30px}.metric-grid{grid-template-columns:repeat(4,1fr);gap:1px;margin-top:8px}.metric{min-height:60px;padding:8px}.metric span{font-size:7px}.metric strong{font-size:17px}.metric small{display:block;font-size:7px}.hr{margin:13px 0}.slider-control{margin:8px 0 13px}.slider-control input{margin-top:10px}.scene-label{pointer-events:none}.hotspot-text{display:none}.statusbar{height:37px;min-height:37px;font-size:8px}.status-right span:nth-child(2){display:none}.selection-panel{bottom:50px;max-height:50vh;overflow:auto}.help-card{padding:25px}.shortcut-grid{gap:10px}}
@media(prefers-reduced-motion:reduce){.pulse-dot,.blink,.loading-line span{animation:none!important}*,*::before,*::after{scroll-behavior:auto!important;transition-duration:0s!important}}