/* A live workflow preview stays beside the program. The program remains a link. */
#analysis-program-card{isolation:isolate}
#analysis-program-card[data-preview-open="true"]{z-index:20;border-color:#8397a5;box-shadow:0 8px 28px #293d4b0a}
#analysis-hover-hint{display:block;font-size:9px;font-weight:400;line-height:1.6;color:#647682;margin-top:13px}
.hover-preview{position:absolute;left:calc(100% + 15px);top:0;width:calc(200% + 15px);height:calc(200% + 15px);z-index:30;background:#fff;border:1px solid #b8c6d0;border-radius:3px;box-shadow:0 18px 70px #263b5129;display:flex;flex-direction:column;min-height:390px;cursor:default;text-align:left;animation:hp-enter 0.072s ease-out;isolation:isolate}
.hover-preview[hidden]{display:none!important}
.hover-preview::before{content:'';position:absolute;right:100%;top:0;bottom:0;width:17px}
.hp-heading{padding:18px 21px 15px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex:none}
.hp-kicker{font-size:7px;letter-spacing:1.4px;color:#617581}
.hp-heading h2{font-size:22px;font-weight:550;line-height:1.3;letter-spacing:-.7px;color:#343c43;margin:6px 0 5px}
.hp-heading p{font-size:11px;color:#60717e;line-height:1.5;margin:0}
#hover-close{width:26px;height:26px;background:none;color:#627583;font-size:24px;line-height:1;padding:0;flex:none}
.hp-workspace{display:grid;grid-template-columns:94px minmax(0,1fr) 105px;grid-template-rows:30px minmax(0,1fr);margin:0 20px;border:1px solid #dbe3e8;background:#f7f9fa;flex:1;min-height:0;overflow:hidden;position:relative}
.hp-appbar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 11px;background:#fff;border-bottom:1px solid #dfe5e9;font-size:8px;color:#425662;font-weight:550}
.hp-appbar i{display:inline-block;height:8px;border-left:1px solid #afbdc7;margin:0 7px;vertical-align:middle}
.hp-dimension{display:flex;gap:9px}.hp-dimension b{font-size:9px;color:#9ba8b1}.hp-dimension b:first-child{color:#354b5a}
.hover-preview[data-scene="3"] .hp-dimension b:first-child{color:#9ba8b1}.hover-preview[data-scene="3"] .hp-dimension b:last-child{color:#354b5a}
.hp-side,.hp-settings{background:#fff;position:relative;padding:10px 7px;color:#617582;font-size:7px;line-height:1.5;z-index:3}
.hp-side{border-right:1px solid #dfe5e9}.hp-settings{border-left:1px solid #dfe5e9}
.hp-side>p,.hp-settings>p{font-size:7px;letter-spacing:0;font-weight:600;color:#526773;margin:12px 0 7px}.hp-settings>p{margin-top:0}
.hp-search{padding:5px;background:#f1f4f6;white-space:nowrap;overflow:hidden;color:#5a707f;font-size:7px}.hp-search span{display:inline-block;vertical-align:bottom;max-width:100%;overflow:hidden;white-space:nowrap}
.hp-site-choice{display:flex;justify-content:space-between;padding:4px 5px;border:1px solid #d6e0e7;color:#476476}.hp-site-choice i{font-style:normal;opacity:0;transition:opacity 0.144s}
.hp-mini-layer{display:block;padding:4px 5px;border-bottom:1px solid #eff2f5}
.hp-layer{position:relative;padding:7px 3px 9px;border-bottom:1px solid #e5ebef;transition:transform 0.288s cubic-bezier(.2,.75,.2,1),background 0.18s;min-height:43px;color:#557082}
.hp-layer i{font-style:normal;font-size:9px;margin-right:4px;color:#6e8391}.hp-swatches{display:flex;gap:4px;margin:7px 0 0 12px}.hp-swatches b{width:12px;height:6px;background:#efbc4f;border-radius:1px}.hp-swatches b:nth-child(2){background:#63b68b}.hp-swatches b:nth-child(3){background:#709ee0}
.hp-range{display:block;position:relative;margin:9px 10px 0;height:2px;background:#ccd7df}.hp-range::after{content:'';position:absolute;left:70%;top:-2px;width:5px;height:5px;border-radius:50%;background:#758d9d}
.hp-add{display:block;border:1px solid #d5e0e8;margin-top:12px;padding:6px 3px;text-align:center;font-size:6px;background:#f8fafb;color:#587182}
.hp-3d-tools{position:absolute;bottom:10px;left:7px;right:7px;opacity:0;transform:translateY(10px);transition:0.216s}.hp-3d-tools span{display:block;border-top:1px solid #e3e9ed;padding:5px 0;font-size:6px}
.hp-stage{position:relative;overflow:hidden;min-width:0;background:radial-gradient(ellipse at 50% 55%,#fff 10%,#f2f6f8 100%);isolation:isolate}
.hp-stage::before{content:'';position:absolute;inset:0;background-image:linear-gradient(#cbd7df24 1px,transparent 1px),linear-gradient(90deg,#cbd7df24 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(ellipse,#000,transparent 80%);pointer-events:none}
.hp-base-map,.hp-composition,.hp-charts,.hp-files,.hp-diagrams,.hp-canvas-viewport{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 0.234s,transform 0.306s cubic-bezier(.2,.75,.2,1)}
.hp-base-map{display:grid;place-items:center;transform:scale(1.06)}.hp-base-map>img{width:94%;height:94%;object-fit:contain}
.hp-canvas-viewport{height:100%!important;min-height:0!important;width:100%;z-index:1}.hp-canvas-viewport canvas{display:block;width:100%;height:100%;cursor:default!important;outline:0}
.hp-selection{position:absolute;inset:33% 34%;border:1.5px solid #be695d;opacity:0;transform:scale(.2);transition:transform 0.36s cubic-bezier(.2,.7,.2,1),opacity 0.216s;background:#ba67510c;border-radius:2px}
.hp-site-pin{position:absolute;left:50%;top:47%;width:7px;height:7px;border:2px solid #a5564b;box-shadow:0 0 0 5px #b4584930;border-radius:50%;opacity:0;transform:translateY(-35px);transition:0.252s}
.hp-diagrams{perspective:700px;z-index:2}
.hp-sheet{position:absolute;left:50%;top:48%;width:46%;height:65%;background:#fff;border:1px solid #cdd9e1;box-shadow:0 7px 16px #344d6120;margin:0;padding:8px;transform:translate(-50%,-50%) scale(.65);opacity:0;transition:transform 0.324s cubic-bezier(.2,.7,.2,1),opacity 0.216s;display:flex;flex-direction:column;transform-origin:center center}
.hp-sheet figcaption{font-size:6px;color:#687d8d;display:flex;gap:5px;margin:0 0 4px;white-space:nowrap}.hp-sheet figcaption b{font-weight:500}.hp-sheet img{width:100%;flex:1;min-height:0;object-fit:contain}.hp-sheet-year{z-index:4}.hp-sheet-height{z-index:3}.hp-sheet-usage{z-index:2}
.hp-composition{padding:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:scale(.85);z-index:2}
.hp-map-label{font-size:6px;letter-spacing:1px;color:#718695;text-align:center}.hp-map-label b{display:block;font-size:12px;letter-spacing:-.3px;font-weight:500;color:#415e71;margin-top:4px}
.hp-composed-map{width:100%;height:calc(100% - 45px);object-fit:contain}.hp-map-chip{font-size:6px;color:#536e80;background:#fff;border:1px solid #d4e0e8;border-radius:2px;padding:5px 7px;white-space:nowrap}
.hp-charts{display:flex;align-items:center;justify-content:center;padding:12px;z-index:4}
.hp-charts figure{position:absolute;inset:12px;padding:12px;background:#fff;border:1px solid #d0dce5;box-shadow:0 9px 20px #233e5313;margin:0;display:flex;flex-direction:column;transition:transform 0.306s cubic-bezier(.2,.75,.2,1),opacity 0.216s;overflow:hidden}
.hp-charts figcaption{font-size:7px;color:#667d8c;display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid #e0e7eb;padding-bottom:8px}.hp-charts figcaption b{font-weight:500;color:#3f5b6e;font-size:9px}.hp-ratio-chart img{width:100%;height:calc(100% - 26px);object-fit:contain}
.hp-climate-visuals{display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr;flex:1;min-height:0;gap:4px;padding-top:6px}.hp-climate-visuals svg{width:100%;height:100%;min-height:0;overflow:visible}.hp-climate-visuals text{font:9px sans-serif;fill:#687e8d}.hp-chart-axis{stroke:#d7e1e7;stroke-width:.8;fill:none}.hp-climate-line{stroke:#b37f70;stroke-width:2;fill:none}.hp-climate-fill{fill:#d9a59222}.hp-wind-grid{stroke:#d7e1e7;stroke-width:1;fill:none}.hp-wind-data{fill:#7fa6b5a0;stroke:#6e94a4;stroke-width:.4}.hp-climate-chart>small{font-size:6px;color:#687e8d;margin-top:3px;text-align:right}
.hp-files{display:flex;flex-direction:column;justify-content:center;padding:15px;gap:10px;z-index:5;transform:translateY(15px);background:#f5f8facf}
.hp-export-action{background:#465e70;color:white;padding:9px 10px;font-size:9px;display:flex;justify-content:space-between;border-radius:2px;box-shadow:0 3px 15px #31485813}.hp-file-list{display:grid;grid-template-columns:1fr 1fr;gap:7px}.hp-file{display:flex;flex-direction:column;position:relative;padding:12px 8px 9px;background:#fff;border:1px solid #cddae3;border-radius:2px;opacity:0;transform:translateY(22px) scale(.85);transition:transform 0.234s cubic-bezier(.15,.8,.2,1),opacity 0.162s}.hp-file:nth-child(2){transition-delay:0.043s}.hp-file:nth-child(3){transition-delay:0.086s}.hp-file:nth-child(4){transition-delay:0.13s}.hp-file b{font-size:15px;font-weight:550;letter-spacing:.6px;color:#48697e}.hp-file span{font-size:6px;color:#637c8c;margin-top:6px;white-space:nowrap}.hp-file i{font-style:normal;position:absolute;right:7px;top:9px;color:#658d80;opacity:0;transition:opacity 0.144s}.hp-files>p{font-size:8px;color:#526e80;line-height:1.5;text-align:center;margin:0;opacity:0;transition:opacity 0.18s}
.hp-cursor{position:absolute;width:15px;height:20px;left:24%;top:17%;z-index:8;fill:#344f61;stroke:#fff;stroke-width:1.2;filter:drop-shadow(0 2px 3px #34546a30);transition:left 0.396s cubic-bezier(.2,.65,.2,1),top 0.396s cubic-bezier(.2,.65,.2,1),opacity 0.18s,transform 0.18s;pointer-events:none}
.hp-caption{display:flex;align-items:center;justify-content:space-between;padding:8px 21px 5px;gap:10px;color:#657b89;font-size:7px;line-height:1.5;flex:none}.hp-caption span:last-child{font-variant-numeric:tabular-nums;letter-spacing:1px;white-space:nowrap}
.hp-controls{padding:5px 20px 11px;display:flex;align-items:center;gap:14px;flex:none}.hp-steps{display:flex;flex:1;gap:5px}.hp-steps button{flex:1;background:none;border-bottom:1px solid #dce5eb;padding:7px 2px;font-size:9px;line-height:1.4;color:#617986;white-space:nowrap;border-radius:0}.hp-steps button[aria-pressed="true"]{color:#2e4c60;border-color:#496c83;font-weight:650}#hover-play{background:none;font-size:9px;color:#4f6d80;padding:5px 0;white-space:nowrap}
.hp-progress{height:2px;flex:none;background:#edf2f5}.hp-progress i{display:block;width:var(--hover-progress,0%);height:100%;background:#6e90a7}
.hover-preview[data-scene="0"] .hp-base-map{opacity:1;transform:scale(1)}
.hover-preview[data-phase="search"] .hp-search span{animation:hp-type 0.72s steps(7,end) both}
.hover-preview[data-phase="select"] .hp-selection{opacity:1;transform:scale(1)}.hover-preview[data-phase="select"] .hp-site-pin{opacity:1;transform:translateY(0)}.hover-preview[data-phase="select"] .hp-site-choice i{opacity:1}.hover-preview[data-phase="select"] .hp-cursor{left:50%;top:49%;transform:scale(.87)}
.hover-preview[data-scene="1"] .hp-diagrams{opacity:1}
.hover-preview[data-phase="fan"] .hp-sheet{opacity:1}.hover-preview[data-phase="fan"] .hp-sheet-figure{transform:translate(-99%,-96%) rotate(-9deg) scale(.95)}.hover-preview[data-phase="fan"] .hp-sheet-usage{transform:translate(-4%,-92%) rotate(7deg) scale(.95)}.hover-preview[data-phase="fan"] .hp-sheet-height{transform:translate(-96%,-9%) rotate(-5deg) scale(.95)}.hover-preview[data-phase="fan"] .hp-sheet-year{transform:translate(-2%,-6%) rotate(6deg) scale(.95)}
.hover-preview[data-phase="stack"] .hp-sheet{opacity:.92;transform:translate(-50%,-50%) rotateX(40deg) rotateZ(-24deg);box-shadow:0 12px 25px #304c6217}.hover-preview[data-phase="stack"] .hp-sheet-figure{transform:translate(-50%,-28%) rotateX(40deg) rotateZ(-24deg)}.hover-preview[data-phase="stack"] .hp-sheet-usage{transform:translate(-50%,-49%) rotateX(40deg) rotateZ(-24deg)}.hover-preview[data-phase="stack"] .hp-sheet-height{transform:translate(-50%,-70%) rotateX(40deg) rotateZ(-24deg)}.hover-preview[data-phase="stack"] .hp-sheet-year{transform:translate(-50%,-91%) rotateX(40deg) rotateZ(-24deg)}
.hover-preview[data-scene="1"] .hp-cursor{left:68%;top:67%}
.hover-preview[data-scene="2"] .hp-composition{opacity:1;transform:scale(1)}.hover-preview[data-phase="combine"] .hp-add{background:#dce9f1;border-color:#9eb6c7}.hover-preview[data-phase="combine"] .hp-cursor{left:88%;top:63%}.hover-preview[data-phase="reorder"] .hp-layer-usage{transform:translateY(43px);background:#edf3f7}.hover-preview[data-phase="reorder"] .hp-layer-figure{transform:translateY(-43px)}.hover-preview[data-phase="reorder"] .hp-cursor{left:91%;top:31%}
.hover-preview[data-scene="3"] .hp-canvas-viewport{opacity:1}.hover-preview[data-scene="3"] .hp-3d-tools{opacity:1;transform:translateY(0)}.hover-preview[data-scene="3"] .hp-cursor{left:67%;top:70%;opacity:0}.hover-preview[data-phase="explode"] .hp-3d-tools span:nth-child(2){color:#385e77;background:#e8eff4;padding-left:4px}
.hover-preview[data-scene="4"] .hp-charts{opacity:1}.hover-preview[data-phase="ratio"] .hp-ratio-chart{transform:translate(0,0) rotate(-2deg);opacity:1}.hover-preview[data-phase="ratio"] .hp-climate-chart{transform:translate(108%,15%) rotate(8deg);opacity:0}.hover-preview[data-phase="environment"] .hp-ratio-chart{transform:translate(-108%,-10%) rotate(-8deg);opacity:0}.hover-preview[data-phase="environment"] .hp-climate-chart{transform:translate(0,0) rotate(1deg);opacity:1}.hover-preview[data-phase="environment"] .hp-climate-line{stroke-dasharray:320;stroke-dashoffset:320;animation:hp-draw 0.432s 0.09s forwards}.hover-preview[data-scene="4"] .hp-cursor{opacity:0}
.hover-preview[data-scene="5"] .hp-files{opacity:1;transform:translateY(0)}.hover-preview[data-scene="5"] .hp-file{opacity:1;transform:translateY(0) scale(1)}.hover-preview[data-phase="export"] .hp-cursor{left:73%;top:23%;transform:scale(.85)}.hover-preview[data-phase="complete"] .hp-file i,.hover-preview[data-phase="complete"] .hp-files>p{opacity:1}.hover-preview[data-phase="complete"] .hp-cursor{left:76%;top:75%;opacity:0}
.hover-preview[data-playing="false"] *{animation-play-state:paused!important}
@keyframes hp-enter{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
@keyframes hp-type{from{max-width:0}to{max-width:75px}}
@keyframes hp-draw{to{stroke-dashoffset:0}}
@media(min-width:1600px){.hp-heading{padding:22px 25px 18px}.hp-heading h2{font-size:27px}.hp-heading p{font-size:12px}.hp-workspace{grid-template-columns:112px minmax(0,1fr) 120px;margin-inline:25px}.hp-side,.hp-settings{padding:12px 9px;font-size:8px}.hp-side>p,.hp-settings>p{font-size:8px}.hp-mini-layer{padding:6px 5px}.hp-file b{font-size:22px}.hp-file span{font-size:8px}.hp-appbar{font-size:9px}.hp-charts figure{inset:20px;padding:17px}.hp-climate-visuals{grid-template-columns:1.35fr 1fr;grid-template-rows:1fr}.hp-steps button{font-size:10px}.hp-caption{font-size:8px}}
@media(max-width:1150px){.hp-heading{padding:14px}.hp-heading h2{font-size:20px}.hp-heading p{font-size:10px}.hp-workspace{margin-inline:12px;grid-template-columns:75px minmax(0,1fr) 83px}.hp-side,.hp-settings{font-size:6px;padding:8px 5px}.hp-settings>p{font-size:6px}.hp-layer{font-size:6px}.hp-swatches b{width:9px}.hp-controls{padding-inline:12px;gap:9px}.hp-steps{gap:2px}.hp-steps button{font-size:8px}.hp-caption{padding-inline:14px;font-size:6px}}
@media(max-width:950px){.hover-preview{left:calc(100% + 12px);width:100%;height:calc(200% + 12px);min-height:435px}.hover-preview::before{width:14px}.hp-workspace{grid-template-columns:56px minmax(0,1fr)}.hp-settings{display:none}.hp-side{font-size:5px;padding:7px 3px}.hp-side>p,.hp-search{font-size:5px}.hp-appbar{font-size:6px;padding-inline:6px}.hp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0 6px}.hp-heading h2{font-size:19px}.hp-heading p{font-size:9px}.hp-caption{font-size:6px}.hp-controls{align-items:center}.hp-files{padding:10px}.hp-file{padding:9px 6px}.hp-file b{font-size:12px}.hp-file span{font-size:5px}}
@media(max-width:650px){#analysis-hover-hint{font-size:7px;margin-top:7px}.hover-preview{position:fixed;inset:80px 14px auto;width:auto;height:min(510px,calc(100dvh - 110px));min-height:340px}.hover-preview::before{display:none}.hp-workspace{grid-template-columns:65px minmax(0,1fr) 76px}.hp-settings{display:block}.hp-steps{display:flex}.hp-steps button{font-size:8px}.hp-heading h2{font-size:19px}.hp-caption>span:first-child{max-width:230px}.hp-heading{padding-block:12px}.hp-kicker{font-size:6px}}
@media(hover:none){#analysis-hover-hint{display:none}}
@media(prefers-reduced-motion:reduce){.hover-preview,.hover-preview *{animation:none!important;transition:none!important}.hp-climate-line{stroke-dashoffset:0!important}}
@media(max-width:650px) and (max-height:560px){.hover-preview{inset:12px;height:calc(100dvh - 24px);min-height:0;max-height:calc(100dvh - 24px);overflow-y:auto}.hp-workspace{flex:none;height:245px}.hp-heading{flex:none}.hp-controls,.hp-caption{flex:none}.hp-progress{min-height:2px}}
