:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#edf1ed;background:#141e26;font-synthesis:none;color-scheme:dark;--accent:#d2a552;--muted:#9ca9ac;--border:#ffffff18}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button{border:0}button:hover{color:var(--accent)}[hidden]{display:none!important}#app{position:relative;height:100dvh;min-height:540px;overflow:hidden;background:radial-gradient(ellipse at 53% 48%,#344550 0,#1c2b35 49%,#111b23 100%)}#scene{position:absolute;inset:0;touch-action:none}canvas{display:block;width:100%;height:100%;outline:none}header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:30px 38px;pointer-events:none;z-index:6}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#f2f0e9;letter-spacing:1.4px;font-size:17px;font-weight:700;pointer-events:auto}.brand-mark{color:var(--accent);font-size:39px;line-height:1;transform:translateY(-3px)}.brand-light{font-weight:400}.brand small{display:block;font-size:9px;letter-spacing:2.4px;color:#a4b0b4;margin-top:6px;font-weight:500}.header-right{display:flex;align-items:center;gap:24px}.example{font-size:10px;letter-spacing:1.7px;color:#9baab1}.icon-button{background:#182630c9;border:1px solid #d5e5eb22;border-radius:9px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;font-size:24px;pointer-events:auto;backdrop-filter:blur(14px);transition:background .2s,color .2s}.icon-button:hover,.icon-button[aria-pressed=true]{background:#d2a55222;color:var(--accent);border-color:#d2a55266}.intro{position:absolute;left:40px;top:144px;pointer-events:none;z-index:2;transition:opacity .25s}.eyebrow{font-size:10px;font-weight:600;letter-spacing:1.7px;color:var(--accent)}h1{font-family:inherit;font-size:clamp(26px,3.15vw,45px);line-height:1.17;font-weight:500;letter-spacing:-1.5px;margin:17px 0} .intro p{font-size:14px;color:#abb8be;line-height:1.7}.view-tools{position:absolute;right:36px;top:145px;display:grid;gap:10px;z-index:5}.bottom{position:absolute;bottom:25px;left:38px;right:38px;z-index:5;transition:right .3s}.bottom-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding:0 3px}.instruction{font-size:11px;color:#a9b7bc}.mouse-icon{font-size:20px;margin-right:7px;color:#d5dee1}.flow-button{display:flex;align-items:center;gap:8px;border:1px solid var(--border);padding:10px 15px;border-radius:7px;background:#15232dd9;font-size:12px;backdrop-filter:blur(16px)}.flow-button span{font-size:22px;color:var(--accent);line-height:12px}.flow-button[aria-pressed=true]{border-color:#d2a55288;background:#3e352b}nav{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid #afc4ca22;background:#14212cdc;border-radius:12px;backdrop-filter:blur(20px);padding:7px;box-shadow:0 15px 45px #0003}nav button{display:flex;align-items:center;justify-content:center;gap:9px;background:transparent;padding:17px 9px;border-radius:7px;font-size:12px;white-space:nowrap;transition:background .2s}nav button span{font-size:22px;color:#abbbc0}nav button:hover{background:#ffffff08}nav button.active{background:#d2a5521c;color:#e5c784}nav button.active span{color:var(--accent)}.bottom-meta{display:flex;justify-content:space-between;color:#7d929d;font-size:9px;letter-spacing:1.5px;margin-top:15px}.bottom-meta span:nth-child(2){letter-spacing:.2px;font-size:11px}.hotspot{position:absolute;display:flex;align-items:center;gap:9px;padding:10px 13px;background:#192934de;border:1px solid #a6c0cb44;border-radius:6px;box-shadow:0 4px 20px #0002;color:#eaf0f1;font-size:12px;white-space:nowrap;transform:translate(-50%,-50%);transition:opacity .2s,background .2s;z-index:3}.hotspot:before{content:'';width:7px;height:7px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 4px #d2a55215}.hotspot:hover,.hotspot.active{background:#5a4730;border-color:var(--accent);color:#ffe4bf}.hotspot .plus{color:#acb9c1;font-size:17px;padding-left:5px}.hotspot.hidden{opacity:0;pointer-events:none}#detail{position:absolute;right:26px;top:106px;bottom:160px;width:335px;padding:23px 25px;background:#172732f2;border:1px solid #b5ced02d;border-radius:14px;z-index:7;overflow:auto;backdrop-filter:blur(24px);box-shadow:0 20px 70px #0004;animation:panel-in .25s ease}.detail-top{display:flex;align-items:center;justify-content:space-between}.detail-top .icon-button{width:28px;height:28px;background:transparent;border:0;font-size:25px}.detail-icon{display:flex;width:52px;height:52px;align-items:center;justify-content:center;background:#d2a55218;border:1px solid #d2a55235;border-radius:11px;font-size:29px;color:var(--accent);margin-top:24px}h2{font-family:inherit;font-size:27px;letter-spacing:-.6px;font-weight:500;line-height:1.2;margin:20px 0 12px}#detail p{font-size:14px;color:#b5c3ca;line-height:1.7;margin:0 0 18px}.fact{padding:14px 0;border-top:1px solid var(--border)}.fact strong{display:block;color:#ecf0ee;font-weight:500;font-size:14px;margin-bottom:5px}.fact span{font-size:12px;color:#99aeb8;line-height:1.5;display:block}#detail h3{font-size:14px;font-weight:500;margin:24px 0 10px}.related{display:flex;flex-wrap:wrap;gap:7px}.related button{background:#ffffff06;border:1px solid #ffffff1c;border-radius:5px;padding:8px 10px;font-size:12px;color:#d4ddd9}.detail-footer{border-top:1px solid var(--border);padding-top:20px;margin-top:22px;font-size:12px;line-height:1.8;color:#99aeb8}.detail-footer strong{font-weight:500;color:#e5c49a}.panel-open .intro{opacity:0}.energy-state{position:absolute;left:40px;top:calc(50% + 60px);background:#182934d9;border:1px solid #ffffff18;padding:14px 18px;border-radius:8px;z-index:4;font-size:13px;max-width:230px;backdrop-filter:blur(10px)}.energy-state small{display:block;color:#839caa;font-size:8px;letter-spacing:1.2px;margin-top:8px}.state-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:8px;box-shadow:0 0 10px #ffbc65}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#172630;z-index:10;color:#b6c8d0;font-size:14px}.loader-mark{font-size:80px;color:var(--accent);animation:pulse 1s infinite alternate}#error{position:absolute;left:10%;right:10%;top:35%;z-index:8;background:#172630;padding:25px;border:1px solid #d2a55266;border-radius:12px}#error p{font-size:16px;line-height:1.6}.night .intro p{color:#a6b4be}@keyframes pulse{to{opacity:.4}}@keyframes panel-in{from{transform:translateX(15px);opacity:0}to{transform:translateX(0);opacity:1}}@media(min-width:1500px){.intro{top:170px}.bottom{left:50px;right:50px;bottom:35px}}@media(max-width:1050px){nav button{font-size:11px;gap:5px;padding:15px 4px}nav button span{font-size:18px}.intro{top:120px}h1{font-size:32px}#detail{width:310px}.header-right .example{display:none}}@media(max-width:700px){#app{min-height:480px}header{padding:20px}.brand{font-size:14px;gap:7px}.brand small{font-size:8px;letter-spacing:1.6px}.brand-mark{font-size:33px}.intro{left:22px;top:106px}.intro h1{font-size:27px;letter-spacing:-.8px;margin:12px 0}.intro p{font-size:12px}.intro .eyebrow{font-size:8px;letter-spacing:1px}.view-tools{right:18px;top:111px;gap:8px}.icon-button{width:36px;height:36px;font-size:22px}.bottom{left:16px;right:16px;bottom:18px}.instruction{font-size:9px}.flow-button{font-size:10px;padding:8px 10px}.bottom-top{margin-bottom:10px}nav{display:flex;overflow-x:auto;padding:5px;scrollbar-width:none}nav button{flex:0 0 auto;flex-direction:column;font-size:10px;gap:5px;padding:10px 13px;min-width:75px}nav button span{font-size:20px}.bottom-meta{font-size:8px;margin-top:12px}.bottom-meta span:nth-child(2){display:none}.hotspot{font-size:10px;padding:8px 9px;gap:7px}.hotspot .plus{display:none}#detail{left:16px;right:16px;top:auto;bottom:147px;width:auto;max-height:45dvh;padding:18px 22px}.detail-icon{display:none}#detail h2{font-size:23px;margin:10px 0}#detail p{font-size:14px}.fact{padding:10px 0}.panel-open .view-tools{opacity:.4}.panel-open .hotspot{opacity:.25}.panel-open .hotspot.active{opacity:1}.energy-state{top:110px;left:22px;font-size:11px;max-width:200px}.flows-on .intro{opacity:0}.energy-state small{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

@media(max-width:700px){.hotspot{font-size:10px;max-width:160px}.intro h1{font-size:25px}}

@media(min-width:701px){nav{display:flex}nav button{flex:1 0 auto;font-size:14px;padding:16px 10px}nav button span{font-size:20px}}

.brand img{display:block;width:220px;height:auto}.consultation-link{display:block;text-align:center;background:var(--accent);color:#172620;border-radius:7px;padding:12px 10px;margin-top:16px;font-weight:700;text-decoration:none}.consultation-link:hover{background:#e5bf70}.legal-links{display:flex;gap:16px}.legal-links a{color:inherit;text-decoration:none;letter-spacing:.2px}.legal-links a:hover{color:var(--accent)}#categories{overflow-x:auto;scrollbar-width:thin}@media(max-width:700px){.brand img{width:184px}.legal-links{gap:10px}.bottom-meta>span:first-child{display:none}.bottom-meta{justify-content:flex-end}#app{min-height:100dvh}}

/* Opaque labels stay readable even while the camera moves. */
.hotspot{background:#1b2c36;color:#f5f7f6;border-color:#72868f;font-size:13px;font-weight:500;box-shadow:0 3px 12px #0005;text-shadow:0 1px 2px #0006}
.hotspot:hover,.hotspot:focus-visible,.hotspot.active{background:#4b3c26;z-index:4}
#label-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
#label-links line{stroke:#d2a552;stroke-width:1;opacity:.65}#label-links circle{fill:#d2a552;stroke:#1b2c36;stroke-width:2}
@media(max-width:700px){.hotspot{font-size:12px;max-width:none;padding:10px 11px}.panel-open .hotspot{opacity:.85}.panel-open .hotspot.active{opacity:1}}

.hotspot.hidden{visibility:hidden}

.ems-scenario{padding:15px;background:#0e1b24;border:1px solid #516674;border-radius:9px;margin:16px 0 20px}#detail .ems-scenario h3{margin:0 0 12px}.scenario-options{display:grid;gap:6px;margin-bottom:13px}.scenario-options button{background:#233744;text-align:left;padding:10px 12px;border-radius:5px;border:1px solid #536a76;font-size:12px}.scenario-options button[aria-pressed=true]{color:#f6d78f;background:#493d27;border-color:var(--accent)}#detail .ems-scenario p{font-size:13px;margin-bottom:12px}.ems-scenario small{font-size:9px;letter-spacing:1px;color:#a9b7bc}.source-link{display:block;color:#c9d5db;font-size:11px;margin:0 0 20px}.energy-state{max-width:260px}

.consulting-benefit{border-left:2px solid var(--accent);padding-left:13px;margin:20px 0}#detail .consulting-benefit h3{color:#e5c784;margin-top:0}

/* Compact captions leave the architecture visible; full topic names remain in tooltips and details. */
.hotspot{padding:6px 9px;gap:6px;font-size:12px;min-height:30px;border-radius:5px;border-color:#879fa04d;box-shadow:0 2px 6px #0003;background:#1b2c36f2;line-height:1.25}
.hotspot:before{width:5px;height:5px;flex-shrink:0;box-shadow:none}.hotspot .plus{display:none}
.hotspot:hover,.hotspot:focus-visible,.hotspot.active{border-color:var(--accent);background:#4b3c26}
@media(max-width:700px){.hotspot{padding:6px 8px;font-size:11px;min-height:34px}}



@media(max-width:700px){.bottom-meta>span:not(.legal-links){display:none}.bottom-meta{justify-content:space-between;align-items:center;gap:8px}}

.consulting-benefit ul{margin:0;padding-left:18px;color:#b5c3ca;font-size:13px;line-height:1.65}.consulting-benefit li+li{margin-top:8px}.warmwater{border:1px solid #a576494d;border-radius:8px;padding:14px;margin:18px 0;background:#a5764910}#detail .warmwater h3{margin:0 0 8px}#detail .warmwater p{font-size:13px;margin-bottom:12px}.warmwater button{background:#233744;border:1px solid #536a76;border-radius:5px;padding:10px;font-size:12px;width:100%;text-align:left}.warmwater small{display:block;color:#a9b7bc;font-size:11px;line-height:1.5;margin-top:10px}

.flow-legend{display:flex;flex-wrap:wrap;gap:7px 10px;margin-top:10px;font-size:9px;color:#c4d0d3}.flow-legend span:before{content:'';display:inline-block;width:14px;height:3px;margin-right:5px;vertical-align:middle;background:#f3be75}.flow-legend .legend-grid:before{background:#80c7e6}.flow-legend .legend-heat:before{height:4px;background:#ed9662;border-top:1px dashed #101a20}.scope-note{display:block;margin-top:10px;color:#99aeb8;font-size:11px;line-height:1.55}.warmwater button+ p{margin-top:14px!important}.warmwater button+button{margin-top:8px}


/* Keep the topic and close action reachable while reading long panels. */
.detail-header{position:sticky;top:-23px;z-index:2;margin:-23px -25px 0;padding:18px 25px 12px;background:#172732;border-bottom:1px solid var(--border)}
#detail .detail-header h2{margin:10px 0 0}.detail-header .eyebrow{padding-right:12px;line-height:1.5}.detail-header #close{flex-shrink:0;width:40px;height:40px;border-radius:7px}.detail-header #close:hover{background:#ffffff0c}.detail-icon{margin-top:18px;margin-bottom:16px}
@media(max-width:700px){.detail-header{top:-18px;margin:-18px -22px 0;padding:10px 22px 12px}#detail .detail-header h2{margin:4px 0 0}#detail-desc{padding-top:16px}}

/* A quiet foreground surface keeps introductory text readable over the scene. */
.intro{z-index:5;width:max-content;max-width:calc(100% - 120px);padding:18px 20px;margin:-18px 0 0 -20px;border:1px solid #c9dce514;border-radius:14px;background:linear-gradient(135deg,#172732d9,#172732b3);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 10px 35px #00000012}
.intro p{color:#c2cdd2;margin-bottom:0}.intro h1{margin-top:14px}
@media(max-width:700px){.intro{max-width:calc(100% - 92px);padding:14px;margin:-14px 0 0 -14px;border-radius:12px}}

/* Keep legal links visually quiet, with a forgiving invisible click area. */
.legal-links a{position:relative;touch-action:manipulation}.legal-links a::before{content:"";position:absolute;inset:-10px -5px}
.header-contact{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:1px solid #d2a552;border-radius:8px;background:var(--accent);color:#172620;font-size:12px;font-weight:650;text-decoration:none;pointer-events:auto;white-space:nowrap;touch-action:manipulation}.header-contact:hover{background:#e5bf70;color:#172620}
@media(max-width:700px){.header-right{gap:8px}.header-contact{padding:9px 12px;font-size:12px}.header-right .icon-button{width:36px;height:44px}}
@media(max-width:380px){.brand img{width:145px}.header-contact{padding:9px 10px}}

#categories button>span{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:22px}#categories svg{display:block;width:20px;height:20px}.flow-button>span{display:inline-flex;align-items:center;justify-content:center;width:18px;height:20px}.flow-button svg{display:block;width:18px;height:20px}

.legal-links{flex-wrap:wrap;justify-content:flex-end;align-items:center}.legal-links .footer-copyright{font-size:inherit;letter-spacing:0;white-space:nowrap}

.bottom-meta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}.bottom-meta>span:first-child{display:none}.bottom-meta .legal-links{justify-content:center}

.loader-mark{font-size:0;animation:none;margin-bottom:20px}.loader-mark svg{display:block}.loader-mark rect{animation:loader-energy 1.6s ease-in-out infinite alternate}.loader-mark rect:nth-child(2){animation-delay:.25s}.loader-mark rect:nth-child(3){animation-delay:.5s}@keyframes loader-energy{from{opacity:.3}to{opacity:1}}@media(prefers-reduced-motion:reduce){.loader-mark rect{animation:none}}