:root { color-scheme: dark; --bg:#0c151d;--panel:#111d26;--panel2:#172630;--border:rgba(180,196,197,.14);--text:#e5e6de;--muted:#94a5aa;--accent:#d6ae78;--teal:#87c2bd;--ink:#131e25; font-family: Inter, 'Segoe UI', system-ui, sans-serif; }
*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--bg);color:var(--text)}body{min-width:320px}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid #ecc28b;outline-offset:3px}button:disabled{opacity:.45;cursor:default}#app{display:flex;height:100vh;min-height:650px;flex-direction:column}
.app-header{height:72px;flex-shrink:0;display:flex;align-items:center;gap:15px;padding:0 26px;border-bottom:1px solid var(--border);background:#0b151c;position:relative;z-index:5}.brand-icon{width:40px;height:40px;border:1px solid #886d4f;display:grid;place-items:center;color:var(--accent);font-size:27px;transform:rotate(0deg)}.brand-title{display:flex;flex-direction:column;gap:4px;min-width:273px}.brand-title strong{font-size:16px;letter-spacing:.16em;font-weight:700;white-space:nowrap}.brand-title em{color:#c4a27e;font-style:normal}.brand-title small{font-size:8px;letter-spacing:.12em;color:var(--muted);white-space:nowrap}.header-center{margin:auto;font-size:10px;letter-spacing:.20em;color:#617781;white-space:nowrap}.header-actions{display:flex;align-items:center;gap:20px}.online-indicator{font-size:9px;letter-spacing:.11em;color:#a8c9b5;white-space:nowrap}.ghost{background:none;border:1px solid var(--border);color:var(--text)}.compact{font-size:10px;letter-spacing:.13em;padding:10px 13px}.workspace{min-height:0;flex:1;display:grid;overflow:hidden;grid-template-columns:minmax(0,1fr) 376px}.scene-wrap{min-width:0;min-height:0;display:flex;flex-direction:column;position:relative;background:#101b22}.hero-heading{position:absolute;z-index:2;left:33px;top:25px;pointer-events:none;text-shadow:0 2px 16px rgba(16,28,33,.38)}.eyebrow,.panel-kicker{font-size:10px;letter-spacing:.22em;color:var(--accent);font-weight:700}.hero-heading h1{margin:11px 0 8px;font-size:clamp(29px,3.3vw,47px);line-height:1.13;font-family:Georgia,serif;font-weight:400;letter-spacing:-.05em}.hero-heading h1 i{color:#f0d7b1;font-weight:400}.hero-heading p{margin:0;font-size:12px;line-height:1.5;max-width:290px;color:#e8e6db}.canvas-area{position:relative;flex:1;min-height:0;overflow:hidden;background:linear-gradient(160deg,#9caeba 0%,#9dc2ca 47%,#a2b4aa 100%)}.canvas-area:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,31,38,.57) 0%,transparent 37%),linear-gradient(0deg,rgba(16,27,36,.3),transparent 26%);pointer-events:none;z-index:1}.canvas-area.night{background:linear-gradient(145deg,#222c3d,#45516b)}.canvas-area canvas#view{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.canvas-area canvas#view:active{cursor:grabbing}.loading,.error{position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(11,20,27,.93);border:1px solid var(--border);padding:22px 30px;font-size:10px;letter-spacing:.12em;text-align:center;line-height:1.8}.loading{display:flex;align-items:center;gap:14px}.loading[hidden],.error[hidden]{display:none}.spinner{width:17px;height:17px;border:2px solid #ccad7f;border-left-color:transparent;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error{max-width:84%;color:#ffd4c8}.direction-pointer{position:absolute;right:29px;top:31px;z-index:2;display:flex;flex-direction:column;align-items:center;color:#e9e0ce;font-size:12px;opacity:.7}.direction-pointer span:last-child{font-size:29px}.view-tools{position:absolute;z-index:2;left:26px;bottom:48px;display:flex;gap:5px}.view-tools button{display:flex;gap:7px;align-items:center;background:rgba(16,26,34,.83);color:#dce5e4;border:1px solid rgba(236,232,215,.25);padding:11px 11px;font-size:10px;letter-spacing:.06em;backdrop-filter:blur(8px)}.view-tools button:hover,.view-tools button:focus-visible{background:#2d3d45}.view-tools button span{font-size:8px;letter-spacing:.1em}.scene-footer{position:absolute;z-index:2;bottom:13px;left:26px;right:26px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.12em;color:#e7e8e2;pointer-events:none}.scene-footer b{color:var(--accent)}.frame-rate{color:#dfc392}.hotspot{position:absolute;z-index:3;background:#f2e8d5;color:#28363c;border:0;border-radius:50%;width:27px;height:27px;box-shadow:0 0 0 5px rgba(247,237,212,.19),0 4px 12px #1a2b2b70;font-size:11px;font-weight:800;transform:translate(-50%,-50%);transition:background .2s}.hotspot.selected{background:#e9a758;box-shadow:0 0 0 6px rgba(220,165,97,.24)}.hotspot:hover{background:#efbb84}.hotspot:after{content:attr(data-name);position:absolute;left:34px;top:3px;white-space:nowrap;color:#e9e7d9;background:rgba(17,27,36,.82);padding:6px 8px;font-size:9px;letter-spacing:.11em;font-weight:600;pointer-events:none}.metrics{background:#14222b;min-height:126px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--border)}.metric{padding:22px 22px 16px;border-right:1px solid var(--border)}.metric:last-child{border:0}.metric-label{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.11em;color:#a1b4b7;white-space:nowrap}.metric-label span{color:var(--accent);font-size:15px}.metric-value{margin-top:7px;display:flex;gap:6px;align-items:baseline;color:#f2eee7}.metric-value strong{font-size:31px;font-weight:500;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.metric-value span{font-size:11px;color:#b5c0bc}.metric-note{font-size:10px;color:#748e93;margin-top:7px;white-space:nowrap}
.sidebar{min-height:0;overflow-y:auto;scrollbar-color:#49606a #14232b;scrollbar-width:thin;background:var(--panel);border-left:1px solid rgba(183,199,201,.15);display:flex;flex-direction:column}.panel-top{padding:27px 28px 24px;background:linear-gradient(145deg,#1a2b33,#14212a);border-bottom:1px solid var(--border)}.panel-top h2{margin:12px 0 9px;font:normal 30px/1.11 Georgia,serif;letter-spacing:-.04em}.panel-top h2 span{color:#d5bb92}.panel-top p{margin:0;font-size:11px;line-height:1.6;color:var(--muted);max-width:245px}.panel-content{flex:1}.section{padding:20px 24px 23px;border-bottom:1px solid var(--border)}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}.section-heading h3{font-size:10px;letter-spacing:.15em;margin:0;font-weight:750;color:#e3e0d8}.section-heading span{font-size:8px;letter-spacing:.08em;color:#8aa0a3}.section-heading .state-label{color:#88c0a1}.transport{display:flex;gap:8px}.primary,.secondary{border:1px solid #d6ac78;font-size:10px;font-weight:750;letter-spacing:.07em;padding:13px 12px}.primary{background:#d8b381;color:#182329;flex:1}.primary:hover{background:#edc99a}.secondary{background:#1c2d35;color:#d9cbba;border-color:#49606a;flex:.5}.secondary:hover{background:#2a414a}.speed-group{margin-top:18px}.speed-group label,.control-label label{font-size:11px;color:#bdc6c4}.speed-group label{display:block;margin-bottom:8px;font-size:9px;letter-spacing:.11em;color:#8ea4a7}select{width:100%;background:#1c2c35;border:1px solid #344a53;color:#e8e9e4;padding:10px;border-radius:0;font-size:11px}.presets{display:flex;gap:5px;margin-bottom:19px}.presets button{flex:1;background:#1a2b33;color:#90a8ac;border:1px solid #34454c;font-size:8px;letter-spacing:.07em;padding:10px 4px;white-space:nowrap}.presets button.selected{border-color:#dbac70;color:#f1c894;background:#30403d}.presets button:hover{color:white}.control{margin:0 0 20px}.control:last-child{margin-bottom:0}.control-label{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:9px}.control-label output{font-size:11px;font-variant-numeric:tabular-nums;color:#e1b67d}input[type=range]{height:13px;width:100%;margin:0;cursor:pointer;appearance:none;background:transparent}input[type=range]::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,#bc9870,#627984);border-radius:10px}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:50%;background:#e5bf8e;border:2px solid #f3d9b9;margin-top:-4px}input[type=range]::-moz-range-track{height:3px;background:#9f936f}input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#e5bf8e;border:0}.flow-distribution{margin-top:18px;display:flex;justify-content:space-between;align-items:center;gap:8px}.flow-distribution div:first-child,.flow-distribution .text-right{min-width:67px}.flow-distribution span{display:block;font-size:17px;font-variant-numeric:tabular-nums}.flow-distribution small{display:block;font-size:8px;margin-top:5px;letter-spacing:.05em;color:var(--muted)}.flow-distribution .text-right{text-align:right}.split-track{height:6px;background:#394d54;flex:1;position:relative}.split-track span{display:block;height:6px;background:#d2aa7a;width:52%}.analytics canvas{width:100%;height:100px;display:block}.chart-key{display:flex;justify-content:space-between;margin-top:8px;gap:5px;font-size:8px;letter-spacing:.09em;color:#b0a18b}.chart-key span:last-child{color:var(--teal)}.selected-note{background:#1c2c33;border-left:2px solid #c8a075;padding:17px}.selected-note #noteIndex{font-size:9px;letter-spacing:.15em;color:#d5ae75}.selected-note h4{font-size:12px;letter-spacing:.07em;margin:10px 0 8px}.selected-note p{font-size:11px;line-height:1.7;color:#acb9ba;margin:0 0 14px}.text-link{padding:0;border:0;background:none;color:#d3b388;font-size:9px;letter-spacing:.1em}.model p{font-size:10px;line-height:1.75;color:#84999d;margin:0}.panel-bottom{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:15px 24px;color:#769094;font-size:9px;letter-spacing:.09em}.light-btn{background:none;border:0;color:#d6b88a;font-size:9px;letter-spacing:.06em}.global-footer{height:32px;display:flex;justify-content:space-between;align-items:center;padding:0 26px;color:#59727a;border-top:1px solid #294047;background:#0b151c;font-size:8px;letter-spacing:.1em}
dialog{width:min(490px,calc(100% - 32px));max-height:calc(100% - 24px);overflow:auto;background:#172631;border:1px solid #60717a;color:#f5eee1;padding:0;box-shadow:0 12px 70px #0008}dialog::backdrop{background:#0b121bbd;backdrop-filter:blur(5px)}.dialog-inner{padding:34px;position:relative}.dialog-inner h2{font:normal 31px/1.16 Georgia,serif;letter-spacing:-.03em}.dialog-inner p{font-size:12px;line-height:1.75;color:#bac9c9}.dialog-inner .disclaimer{font-size:11px;color:#dfbf9a}.dialog-close{position:absolute;top:20px;right:20px;background:none;color:#e7dfd0;border:0;font-size:16px}.dialog-inner .primary{margin-top:12px;width:100%}
@media(max-width:1200px){.header-center{display:none}.metric{padding-left:15px;padding-right:12px}.metric-label{font-size:8px}.metric-value strong{font-size:26px}.metric-note{font-size:9px}}@media(max-width:1000px){#app{height:auto;min-height:100vh}.workspace{grid-template-columns:1fr;overflow:visible}.scene-wrap{min-height:680px}.canvas-area{height:570px;min-height:570px;flex:auto}.sidebar{display:block;overflow:visible;border-left:0}.panel-top{padding:26px}.panel-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.panel-content .section{border-right:1px solid var(--border)}.panel-content .model{grid-column:span 2}.global-footer span:nth-child(2){display:none}}@media(max-width:620px){.app-header{height:64px;padding:0 14px;gap:10px}.brand-icon{width:30px;height:30px;font-size:20px}.brand-title{min-width:0}.brand-title strong{font-size:13px}.brand-title small{font-size:7px;letter-spacing:.06em}.online-indicator{display:none}.header-actions{margin-left:auto}.scene-wrap{min-height:520px}.canvas-area{height:445px;min-height:445px}.hero-heading{top:16px;left:15px}.hero-heading h1{font-size:29px}.hero-heading p{font-size:10px;max-width:230px}.direction-pointer{top:17px;right:16px}.view-tools{left:10px;bottom:42px;gap:3px}.view-tools button{padding:9px 11px}.view-tools button span{display:none}.scene-footer{left:11px;right:11px;font-size:7px}.frame-rate{display:none}.metrics{grid-template-columns:repeat(2,1fr)}.metric{border-bottom:1px solid var(--border);min-height:114px;padding:15px}.panel-content{display:block}.panel-content .model{grid-column:auto}.global-footer{padding:0 12px;font-size:7px}.global-footer span:last-child{display:none}.hotspot:after{display:none}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}*,*::before,*::after{scroll-behavior:auto!important;transition-duration:0.01ms!important}}