@font-face{font-family:'DM Sans';font-style:normal;font-display:swap;font-weight:100 1000;src:url(./fonts/dm-sans-latin-wght.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;src:url(./fonts/manrope-latin-wght.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--ink:#eef1f3;--muted:#a8b3bd;--accent:#fa7947;--accent-hi:#ff986b;--accent-ink:#b4461a;--paper:#f7f8f8;--p-ink:#22313b;--p-muted:#5a6a75;--p-line:#dde4e8;--p-line2:#cfd8dd;--p-soft:#eef2f4;--line:#ffffff21;--glass:rgba(24,32,40,.92);--glass-line:rgba(168,188,204,.19);--font:'DM Sans','Segoe UI',system-ui,sans-serif;--display:Manrope,'DM Sans','Segoe UI',system-ui,sans-serif;--slow:#3f7bea;--cold:#6dccff;--free:#e9f3fa;--hot:#ff9964;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:#161d23;color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;font-size:14px}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
svg{display:block}
button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
#app,#viewport{position:fixed;inset:0}
#viewport canvas{width:100%;height:100%;display:block;touch-action:none;outline:none}
.scene-shade{position:absolute;inset:0;pointer-events:none;transition:opacity .6s;background:linear-gradient(90deg,rgba(13,19,25,.94),rgba(13,19,25,.72) 24%,rgba(13,19,25,.12) 48%,transparent 70%),linear-gradient(0deg,rgba(13,19,25,.85),transparent 27%,transparent 83%,rgba(13,19,25,.65))}
.exploring .scene-shade{background:linear-gradient(90deg,rgba(13,19,25,.62),rgba(13,19,25,.2) 30%,transparent 48%),linear-gradient(270deg,rgba(13,19,25,.5),rgba(13,19,25,.12) 16%,transparent 26%),linear-gradient(0deg,rgba(13,19,25,.75),transparent 23%,transparent 85%,rgba(13,19,25,.55))}

/* Top bar */
.topbar{position:absolute;top:0;left:0;right:0;height:98px;padding:0 42px;display:flex;align-items:center;justify-content:space-between;z-index:12;border-bottom:1px solid #ffffff0e}
.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:-.8px;line-height:1}
.brand-symbol{height:33px;width:33px;color:var(--accent)}
.brand-3d{font-weight:400}
.brand small{display:block;font-family:var(--font);font-size:7px;letter-spacing:2.3px;font-weight:500;margin-top:9px;color:#bac3ca}
.header-center{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:1.8px;color:#c3ccd4}
.live-dot{width:5px;height:5px;border-radius:50%;background:#a4c2ba;box-shadow:0 0 0 4px rgba(164,194,186,.05)}
.running .live-dot{background:#8dd3bd;box-shadow:0 0 0 4px rgba(141,211,189,.12),0 0 10px rgba(141,211,189,.6)}
.header-actions{display:flex;align-items:center;gap:18px}
.text-button{background:none;border:0;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:550;padding:7px 0}
.text-button:hover{color:var(--accent)}
.text-button svg{width:17px;height:17px}
.icon-button{height:38px;width:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.03)}
.icon-button:hover{background:rgba(255,255,255,.09)}
.icon-button svg{width:17px;height:17px}
.sound-off .sound-wave{display:none}
.sound-on .sound-x{display:none}

/* Intro */
.intro{position:absolute;z-index:3;top:clamp(142px,20vh,220px);left:42px;transition:opacity .35s,transform .45s,visibility .35s;pointer-events:none;max-width:520px}
.intro button{pointer-events:auto}
.eyebrow{font-size:10px;font-weight:650;letter-spacing:1.7px;line-height:1.5;text-transform:uppercase}
.intro .eyebrow{display:flex;align-items:center;gap:10px;color:#c4cbd1}
.short-line{width:23px;height:2px;background:var(--accent)}
h1{font-family:var(--display);font-size:clamp(42px,4.2vw,70px);font-weight:500;line-height:1.13;letter-spacing:-3px;margin:25px 0;text-wrap:balance}
h1 span{color:var(--accent)}
.intro p{font-size:15px;line-height:1.8;color:#bec7cf;margin:0 0 28px}
.primary-button{padding:15px 20px;background:var(--accent);color:#191e22;border:0;border-radius:5px;font-size:13px;font-weight:700;display:inline-flex;gap:28px;align-items:center;transition:background .2s,transform .2s}
.primary-button:hover{background:var(--accent-hi);transform:translateY(-2px)}
.primary-button>span{font-size:21px;line-height:1}
.intro-note{font-size:10px;color:#9daab5;margin-top:15px}
.exploring .intro{opacity:0;visibility:hidden;transform:translateX(-12px)}

/* Room label + telemetry (right) */
.room-label{position:absolute;top:130px;right:42px;display:flex;align-items:flex-end;flex-direction:column;gap:8px;pointer-events:none;z-index:3}
.room-label span{font-size:8px;letter-spacing:1.6px;color:var(--muted)}
.room-label strong{font-family:var(--display);font-weight:500;font-size:16px;letter-spacing:-.3px}
.room-label .room-line{width:38px;height:1px;background:rgba(168,179,189,.44);margin-top:4px}
.telemetry{position:absolute;right:42px;top:212px;z-index:3;display:grid;gap:14px;justify-items:end;text-align:right;pointer-events:none;transition:opacity .4s}
.telemetry div{display:grid;gap:3px}
.telemetry span{font-size:8px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase}
.telemetry{text-shadow:0 1px 14px rgba(10,15,20,.85)}
.telemetry strong{font-family:var(--display);font-weight:500;font-size:19px;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.telemetry strong small{font-size:11px;font-weight:500;color:var(--muted);margin-left:3px;letter-spacing:0}
.telemetry .ext{display:none}
.exploring .telemetry .ext{display:grid}
.exploring .telemetry{top:196px;gap:12px}
.telemetry .graph{width:210px;gap:6px;justify-items:stretch;text-align:left}
.telemetry .graph-head{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.3px;color:var(--muted);text-transform:uppercase}
.telemetry .graph-head b{font-weight:500;display:flex;gap:10px}
.telemetry .graph-head em{font-style:normal}
.telemetry .graph-head i{display:inline-block;width:10px;height:2px;margin-right:5px;vertical-align:middle;border-radius:2px}
#forceGraph{width:210px;height:64px;display:block;border-radius:4px;background:rgba(10,15,20,.45);border:1px solid rgba(255,255,255,.06)}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.swatch{border:1px solid rgba(130,149,165,.27);background:rgba(255,255,255,.02);border-radius:5px;height:32px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:10.5px;color:#d7e0e6;padding:0 3px}
.swatch .uv-dot{background:radial-gradient(circle at 40% 40%,#e9ffb8,#8cf22e 55%,#3d8f0c);box-shadow:0 0 6px rgba(160,255,80,.55)}
.look-note{margin:6px 0 0;font-size:10px;color:#8e9da8;line-height:1.35;min-height:14px}
.rs{display:grid;grid-template-columns:52px 1fr 62px;align-items:center;gap:10px;height:28px}
.rs[hidden]{display:none}
.rs label{font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:#aab6c0;font-weight:550;cursor:pointer}
.rs output{font-family:var(--display);font-size:15px;letter-spacing:-.3px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.rs output small{font-size:10px;color:var(--muted);font-weight:500;margin-left:2px}
.swatch i{width:11px;height:11px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.swatch .speed-dot{background:linear-gradient(135deg,#2a64ff 15%,#eef1f3 50%,#ff6a2a 85%)}
.swatch:hover{background:rgba(255,255,255,.06)}
.swatch.active{border-color:var(--accent);background:rgba(250,121,71,.1);color:#fff}
.dual{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
.dual .slider-row output{font-size:14px}

/* Exhibit caption / hint */
.exhibit-caption{position:absolute;left:42px;bottom:148px;display:flex;gap:16px;align-items:center;pointer-events:none;z-index:3;transition:opacity .35s}
.exhibit-number{font-size:11px;letter-spacing:1px;border-right:1px solid rgba(255,255,255,.19);padding:9px 16px 9px 0;color:var(--accent)}
.exhibit-caption h2{font-size:16px;font-weight:550;letter-spacing:-.2px;margin:0 0 5px}
.exhibit-caption p{font-size:11px;color:var(--muted);margin:0}
.exploring .exhibit-caption{opacity:0}
.proximity-hint{position:absolute;right:42px;bottom:155px;display:flex;gap:10px;align-items:center;font-size:11px;color:#bec7cf;pointer-events:none;z-index:3}
.hint-ring{width:19px;height:19px;border:1px solid #899aa8;border-radius:50%;position:relative}
.hint-ring::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--accent);inset:6px}

/* Hotspots */
.hotspots{position:absolute;inset:0;pointer-events:none;z-index:4}
.hotspot{position:absolute;left:0;top:0;display:flex;align-items:center;gap:7px;padding:5px 11px 5px 5px;border:1px solid rgba(255,255,255,.29);border-radius:30px;background:rgba(25,34,42,.9);color:#f0f4f6;font-size:10px;font-weight:500;box-shadow:0 3px 18px rgba(0,0,0,.2);pointer-events:auto;white-space:nowrap;will-change:transform;transition:background .2s,opacity .3s}
.hotspot:hover{background:rgba(38,50,61,.95)}
.hotspot span{height:24px;width:24px;display:grid;place-items:center;border:1px solid rgba(156,175,189,.4);border-radius:50%;font-size:9px;color:#b6c4d0}
.hotspot.active{background:#e9eef1;color:#26343e}
.hotspot.active span{border-color:var(--accent);background:var(--accent);color:#202930}
.hotspot.hidden{opacity:0;pointer-events:none}

/* Test bench card (exploring mode) */
.bench{position:absolute;left:42px;top:126px;width:352px;z-index:6;background:var(--glass);border:1px solid var(--glass-line);border-radius:9px;box-shadow:0 18px 60px rgba(0,0,0,.28);max-height:calc(100dvh - 272px);display:flex;flex-direction:column;overflow:hidden;opacity:0;visibility:hidden;transform:translateX(-12px);transition:opacity .35s,transform .45s,visibility .35s}
.exploring .bench{opacity:1;visibility:visible;transform:none}
.info-open .bench{opacity:0;visibility:hidden;transform:translateX(-12px)}
.bench-scroll{overflow:auto;padding:14px 18px 9px;display:grid;gap:12px;scrollbar-width:thin;scrollbar-color:#3b4a57 transparent}
.bench-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.bench-head .eyebrow{font-size:9px;letter-spacing:1.3px;color:var(--accent);display:flex;align-items:center;gap:8px}
.bench-head h2{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:-.8px;margin:5px 0 2px;line-height:1.12}
.bench-head p{margin:0;font-size:11px;color:var(--muted)}
.collapse-button{display:none;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:50%;width:32px;height:32px;place-items:center;flex-shrink:0}
.collapse-button svg{width:15px;height:15px;transition:transform .3s}
.group-label,.slider-row{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:#aab6c0;margin-bottom:9px;font-weight:550}
.slider-row output{font-family:var(--display);font-size:17px;letter-spacing:-.3px;text-transform:none;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.slider-row output small{font-size:11px;color:var(--muted);font-weight:500;margin-left:2px}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.chip{border:1px solid rgba(130,149,165,.27);background:rgba(255,255,255,.02);border-radius:5px;height:46px;display:grid;justify-items:center;align-content:center;gap:5px;font-size:10.5px;color:#d7e0e6;padding:0}
.chip svg{width:20px;height:20px;stroke-width:1.3}
.chip:hover{background:rgba(255,255,255,.06)}
.chip.active{border-color:var(--accent);background:rgba(250,121,71,.1);color:#fff}
.chip.active svg{color:var(--accent)}
.chip:disabled{cursor:wait;opacity:.55}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;margin:0;cursor:pointer;--p:60%}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent) var(--p),#3e4d59 var(--p))}
input[type=range]::-moz-range-track{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent) var(--p),#3e4d59 var(--p))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#f3f6f8;border:4px solid var(--accent);margin-top:-6.5px;box-shadow:0 0 0 4px rgba(250,121,71,.14),0 2px 8px rgba(0,0,0,.4)}
input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#f3f6f8;border:4px solid var(--accent);box-shadow:0 0 0 4px rgba(250,121,71,.14)}
input[type=range].center-fill::-webkit-slider-runnable-track{background:linear-gradient(90deg,#3e4d59 var(--a),var(--accent) var(--a),var(--accent) var(--b),#3e4d59 var(--b))}
input[type=range].center-fill::-moz-range-track{background:linear-gradient(90deg,#3e4d59 var(--a),var(--accent) var(--a),var(--accent) var(--b),#3e4d59 var(--b))}
.range-scale{display:flex;justify-content:space-between;font-size:9px;color:#7f8e9a;margin-top:3px;font-variant-numeric:tabular-nums}
.segmented{display:grid;grid-template-columns:repeat(4,1fr);background:rgba(0,0,0,.18);border:1px solid rgba(130,149,165,.2);border-radius:6px;padding:3px;gap:3px}
.segmented button{border:0;background:none;border-radius:4px;height:32px;font-size:10.5px;color:#c9d3da;padding:0 2px}
.segmented button:hover{background:rgba(255,255,255,.05)}
.segmented button.active{background:#e9eef1;color:#1d262d;font-weight:600}
.switch{display:flex;align-items:center;gap:10px;font-size:11.5px;color:#d7e0e6;margin-top:12px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch i{width:30px;height:17px;border-radius:17px;background:#3e4d59;position:relative;transition:background .2s;flex-shrink:0}
.switch i::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#f3f6f8;transition:transform .2s}
.switch input:checked+i{background:var(--accent)}
.switch input:checked+i::after{transform:translateX(13px)}
.switch input:focus-visible+i{outline:3px solid var(--accent);outline-offset:3px}
.group-label{align-items:center;min-height:18px}
.switch.mini{margin:0;gap:8px;font-size:9.5px;letter-spacing:1.1px;color:#aab6c0}
.switch.mini i{width:26px;height:15px}
.switch.mini i::after{width:11px;height:11px}
.switch.mini input:checked+i::after{transform:translateX(11px)}
.switch.mini:hover{color:#e3e9ed}

/* Info card (components) */
.info-card{position:absolute;left:42px;top:126px;width:390px;z-index:7;background:rgba(248,250,250,.98);color:#263641;border:1px solid #fff;border-radius:9px;box-shadow:0 18px 70px rgba(0,0,0,.27);animation:card-in .3s ease;max-height:calc(100dvh - 272px);display:flex;flex-direction:column;overflow:hidden}
.card-top{display:flex;justify-content:space-between;align-items:center;padding:13px 17px 0;flex-shrink:0}
.card-top .eyebrow{color:#b5512c;font-size:9px;letter-spacing:1.3px}
.close-button{border:0;background:#e9eef1;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#26343e}
.close-button svg{width:14px;height:14px}
.card-body{padding:0 20px 18px;overflow:auto;scrollbar-width:thin;scrollbar-color:#c1cbd1 transparent}
.card-body h2{font-family:var(--display);font-weight:600;font-size:27px;line-height:1.2;letter-spacing:-.9px;margin:6px 0 12px;text-wrap:balance}
.card-body p{font-size:13px;line-height:1.65;color:#4a5a66;margin:0 0 16px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#dde4e8;border:1px solid #dde4e8;border-radius:6px;overflow:hidden;margin:0}
.facts div{background:#f7f9fa;padding:10px 12px}
.facts dt{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#7b8a95}
.facts dd{margin:3px 0 0;font-family:var(--display);font-weight:600;font-size:16px;color:#1f2c35;letter-spacing:-.3px}
.card-footer{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-top:1px solid #e3e8eb;flex-shrink:0}
.card-footer .text-button{font-size:11px;padding:3px 0;color:#26343e}
.card-footer .text-button:hover{color:#b5512c}
.card-progress{font-size:10px;letter-spacing:1px;color:#7b8a95;font-variant-numeric:tabular-nums}
@keyframes card-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Bottom bar */
.bottom-ui{position:absolute;bottom:24px;left:42px;right:42px;z-index:10;padding-bottom:env(safe-area-inset-bottom,0px)}
.simulation-bar{min-height:76px;display:flex;align-items:center;gap:18px;padding:10px;background:var(--glass);border:1px solid var(--glass-line);border-radius:9px;box-shadow:0 12px 40px rgba(0,0,0,.13);}
.simulation-button{border:0;border-radius:5px;padding:0 22px;min-width:156px;height:52px;display:flex;align-items:center;justify-content:center;gap:11px;background:var(--accent);color:#1b2024;font-size:13px;font-weight:700;flex-shrink:0;transition:background .2s}
.simulation-button:hover{background:var(--accent-hi)}
.simulation-button svg{width:15px;height:15px;fill:currentColor;stroke:none}
.simulation-button .icon-play{display:none}
.stopped .simulation-button .icon-play{display:block}
.stopped .simulation-button .icon-pause{display:none}
.simulation-state{display:flex;align-items:center;gap:10px;min-width:216px}
.simulation-state>div{display:flex;flex-direction:column;gap:6px}
.simulation-state strong{font-size:12px;font-weight:550}
.simulation-state span:not(.state-dot){font-size:10px;color:#a3afba}
.state-dot{width:6px;height:6px;background:#98a4ad;border-radius:50%;flex-shrink:0}
.running .state-dot{background:#8dd3bd;box-shadow:0 0 10px rgba(141,211,189,.55)}
.flow-legend{display:flex;gap:14px;align-items:center;margin:auto;font-size:10px;color:#d1d9de}
.flow-legend>span{display:flex;gap:8px;align-items:center;white-space:nowrap}
.flow-legend i{height:5px;width:96px;border-radius:5px;background:linear-gradient(90deg,var(--slow),var(--cold) 35%,var(--free) 58%,var(--hot) 80%,var(--accent))}
.flow-legend i.pressure{background:linear-gradient(90deg,#3f7bea,#6dccff 32%,#e9f3fa 55%,#ffb783 75%,#e0482a)}
.flow-legend small{font-size:9px;color:#8e9da8;border-left:1px solid rgba(255,255,255,.13);padding-left:14px}
.view-switch{display:flex;gap:3px;background:rgba(0,0,0,.18);border:1px solid rgba(130,149,165,.2);border-radius:6px;padding:3px}
.view-switch button{border:0;background:none;height:39px;padding:0 12px;border-radius:4px;font-size:11px;color:#c9d3da;white-space:nowrap}
.view-switch button:hover{background:rgba(255,255,255,.05)}
.view-switch button.active{background:rgba(255,255,255,.1);color:#fff}
.tour-button{height:47px;padding:0 20px;border:1px solid rgba(130,149,165,.27);background:rgba(255,255,255,.02);color:#edf2f5;border-radius:5px;display:flex;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden;font-size:12px;white-space:nowrap;flex-shrink:0}
.tour-button:hover{background:rgba(255,255,255,.055)}
.tour-button svg{width:14px;height:14px;fill:currentColor;stroke:none}
.bottom-meta{display:flex;justify-content:space-between;padding-top:15px;color:#aab7c2;font-size:10px;letter-spacing:.2px}
.bottom-meta>span{display:flex;align-items:center;gap:9px}
.bottom-meta>span:last-child{font-size:8px;letter-spacing:1.2px}
.bottom-meta svg{height:15px;width:14px;fill:none;stroke:currentColor;stroke-width:1.3}
.bottom-meta i{font-style:normal;margin:0 2px}
.tiny-cross{color:var(--accent);font-size:15px;margin-left:14px;font-weight:400}

/* Loader & error */
.loader,.error{position:absolute;inset:0;z-index:40;background:#171e25;display:grid;place-items:center;padding:24px}
.loader{transition:opacity .8s,visibility .8s;background:radial-gradient(at 65% 25%,#2a3743,#171e25 65%)}
.loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader-inner{width:min(400px,100%)}
.loader-mark{width:54px;height:54px;border:1px solid rgba(119,137,153,.31);border-radius:12px;display:grid;place-items:center;color:var(--accent);font-family:var(--display);font-size:21px;font-weight:650;margin-bottom:42px}
.loader-inner .eyebrow{font-size:9px;color:var(--muted)}
.loader h2,.error h2{font-family:var(--display);font-size:29px;font-weight:500;letter-spacing:-1px;margin:15px 0}
.loader p,.error p{font-size:13px;line-height:1.6;color:var(--muted);margin:0}
.load-track{height:2px;background:#4d5e6b;margin-top:30px;overflow:hidden}
.load-track>span{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
.load-meta{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:12px;font-variant-numeric:tabular-nums}
.solving{position:absolute;left:50%;top:112px;transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:10px;padding:9px 14px;background:var(--glass);border:1px solid var(--glass-line);border-radius:30px;font-size:11px;color:#dfe6eb;}
.solving i{width:64px;height:2px;background:#3e4d59;border-radius:2px;overflow:hidden;position:relative}
.solving i b{position:absolute;inset:0;width:0;background:var(--accent);transition:width .15s}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}


/* ── Sales layer: brand, CTAs, drawer, brief builder, nudges, imprint ── */
.brand-mark{width:34px;height:34px;border-radius:8px;background:var(--accent);color:#1b1f22;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:13.5px;letter-spacing:-.4px;flex-shrink:0}
.brand-mark.small{width:26px;height:26px;border-radius:6px;font-size:10.5px}
.brand-name{white-space:nowrap}
.cta-button{height:40px;padding:0 15px 0 18px;border:0;border-radius:40px;background:var(--accent);color:#191e22;font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;transition:background .2s,transform .2s}
.cta-button:hover{background:var(--accent-hi);transform:translateY(-1px)}
.cta-button span{font-size:15px;line-height:1}
.intro-ctas{display:flex;flex-wrap:wrap;gap:12px}
.ghost-button{padding:15px 18px;border:1px solid rgba(233,238,241,.3);background:rgba(255,255,255,.04);color:var(--ink);border-radius:5px;font-size:13px;font-weight:600;pointer-events:auto;transition:background .2s,border-color .2s}
.ghost-button:hover{background:rgba(255,255,255,.1);border-color:rgba(233,238,241,.55)}
.proof{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:11px;color:#9fb0bc}
.proof li{display:flex;align-items:baseline;gap:7px}
.proof strong{font-family:var(--display);font-size:16px;font-weight:650;color:var(--ink);letter-spacing:-.3px}
.card-cta{margin-top:16px;width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 14px;border:1px solid #f1c9b4;background:#fff5ef;border-radius:6px;color:#3a2a22;font-size:12px;line-height:1.45;text-align:left}
.card-cta b{color:var(--accent-ink);white-space:nowrap;font-weight:700}
.card-cta:hover{background:#ffece1}
.meta-right{display:flex;align-items:center;gap:18px}
.meta-cta{background:none;border:0;padding:0;color:#e4eaee;font-size:8px;letter-spacing:1.2px;font-weight:600}
.meta-cta b{color:var(--accent);font-size:11px;margin-left:3px}
.meta-cta:hover{color:#fff}
.meta-link{background:none;border:0;padding:0;color:#8e9da8;font-size:9.5px;letter-spacing:.2px;text-decoration:underline;text-underline-offset:2px}
.meta-link:hover{color:#e4eaee}
.meta-link.dark{color:var(--p-muted)}
.meta-link.dark:hover{color:var(--p-ink)}

.drawer-scrim{position:absolute;inset:0;z-index:30;background:rgba(8,12,16,.5);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.drawer-open .drawer-scrim{opacity:1;visibility:visible}
.drawer{position:absolute;top:12px;right:12px;bottom:12px;width:min(540px,calc(100% - 24px));z-index:31;background:var(--paper);color:var(--p-ink);border-radius:12px;box-shadow:0 30px 90px rgba(0,0,0,.45);display:flex;flex-direction:column;overflow:hidden;transform:translateX(calc(100% + 30px));visibility:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1),visibility .5s}
.drawer-open .drawer{transform:none;visibility:visible}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 12px 24px;border-bottom:1px solid var(--p-line);flex-shrink:0}
.d-brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.3px}
.drawer-body{position:relative;overflow:auto;padding:28px 30px 30px;display:grid;gap:32px;scrollbar-width:thin;scrollbar-color:#c1cbd1 transparent;overscroll-behavior:contain}
.d-sec{min-width:0}
.d-eyebrow{font-size:10px;font-weight:650;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent-ink)}
.d-hero h2{font-family:var(--display);font-size:30px;line-height:1.14;letter-spacing:-1.1px;font-weight:650;margin:10px 0 14px;text-wrap:balance}
.d-lead{font-size:14px;line-height:1.7;color:var(--p-muted);margin:0;max-width:62ch}
.solutions{list-style:none;margin:0;padding:0;display:grid}
.solutions li{display:grid;grid-template-columns:36px 1fr;gap:14px;padding:15px 0;border-top:1px solid var(--p-line)}
.solutions li:last-child{border-bottom:1px solid var(--p-line)}
.solutions svg{width:24px;height:24px;margin-top:1px;fill:none;stroke:var(--accent-ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.solutions h3{font-family:var(--display);font-size:16px;font-weight:650;letter-spacing:-.3px;margin:0 0 4px}
.solutions p{margin:0;font-size:13px;line-height:1.6;color:var(--p-muted)}
.d-label{font-size:10px;font-weight:650;letter-spacing:1.5px;text-transform:uppercase;color:var(--p-muted);margin:0 0 14px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:s}
.steps li{counter-increment:s;display:grid;gap:6px;align-content:start;font-size:12px;line-height:1.5;color:var(--p-muted)}
.steps li::before{content:counter(s);width:24px;height:24px;border-radius:50%;background:var(--p-ink);color:var(--paper);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:11px}
.steps b{color:var(--p-ink);font-size:13px;font-weight:650}
.d-brief{background:var(--p-soft);margin:0 -30px;padding:26px 30px 24px;border-top:1px solid var(--p-line);border-bottom:1px solid var(--p-line)}
.d-brief .d-label{margin-bottom:6px}
.d-small{font-size:12px;line-height:1.65;color:var(--p-muted);margin:0}
.field{display:grid;gap:8px;margin-top:16px}
.field-label{font-size:11px;font-weight:600;color:var(--p-ink)}
.pick{display:flex;flex-wrap:wrap;gap:6px}
.pick button{border:1px solid var(--p-line2);background:#fff;border-radius:30px;padding:7px 13px;font-size:12px;color:var(--p-ink);transition:background .15s,border-color .15s,color .15s}
.pick button:hover{border-color:#9fb0bc}
.pick button[aria-pressed="true"]{background:var(--p-ink);border-color:var(--p-ink);color:#fff}
.inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.inputs label{display:grid;gap:6px;font-size:11px;font-weight:600;color:var(--p-ink);min-width:0}
.inputs .wide{grid-column:1/-1}
.inputs input,.inputs textarea{font:inherit;font-size:13px;font-weight:400;color:var(--p-ink);background:#fff;border:1px solid var(--p-line2);border-radius:6px;padding:9px 11px;min-width:0;width:100%;resize:vertical}
.inputs input:focus,.inputs textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.inputs textarea::placeholder{color:#8795a0}
.brief-box{margin-top:16px;background:#fff;border:1px dashed #c3cdd3;border-radius:8px;padding:14px 16px;max-height:210px;overflow:auto}
.brief-box pre{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.6;color:#33434e;white-space:pre-wrap;word-break:break-word}
.brief-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 12px}
.d-primary{border:0;background:var(--accent);color:#191e22;border-radius:6px;padding:12px 18px;font-size:13px;font-weight:700;transition:background .2s}
.d-primary:hover{background:var(--accent-hi)}
.d-secondary{display:inline-flex;align-items:center;border:1px solid var(--p-ink);color:var(--p-ink)!important;border-radius:6px;padding:11px 16px;font-size:13px;font-weight:600;text-decoration:none}
.d-secondary:hover{background:#fff}
.mail{font-weight:650;color:var(--p-ink);user-select:all;-webkit-user-select:all;word-break:break-all}
.inline-button{border:0;background:none;padding:0;color:var(--accent-ink);font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.drawer a{color:var(--accent-ink)}
.d-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.d-share{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;text-decoration:none}
.d-share svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}

.nudge{position:absolute;right:42px;bottom:118px;z-index:9;width:340px;background:var(--glass);border:1px solid var(--glass-line);border-radius:10px;padding:18px 18px 15px;box-shadow:0 20px 60px rgba(0,0,0,.35);animation:nudge-in .45s cubic-bezier(.2,.8,.2,1)}
.nudge-eyebrow{font-size:9.5px;font-weight:650;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent)}
.nudge p{margin:8px 26px 14px 0;font-size:13px;line-height:1.6;color:#d6dee4}
.nudge-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.nudge-close{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(255,255,255,.07);display:grid;place-items:center}
.nudge-close:hover{background:rgba(255,255,255,.14)}
.nudge-close svg{width:13px;height:13px}
@keyframes nudge-in{from{transform:translateY(14px)}to{transform:none}}
.nudge-title{display:block;font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.7px;line-height:1.18;margin:9px 26px 0 0;color:var(--ink)}
.nudge-title span{color:var(--accent)}
.nudge-title+p{margin-top:9px}
a.text-button{color:inherit;text-decoration:none}
.d-attach{display:flex;gap:9px;align-items:flex-start;margin:14px 0 0;padding:11px 13px;background:#fff;border:1px dashed #c3cdd3;border-radius:8px;font-size:12px;line-height:1.55;color:var(--p-muted)}
.d-attach svg{width:16px;height:16px;flex-shrink:0;margin-top:1px;fill:none;stroke:var(--accent-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.d-attach b{color:var(--p-ink);font-weight:600}
.opt{font-weight:400;color:var(--p-muted)}
.d-status{margin:0 0 10px;font-size:12.5px;line-height:1.55;color:#a5321b}
.d-status:empty{display:none}
.d-primary:disabled{opacity:.6;cursor:wait}
.honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.meta-right a.meta-link{white-space:nowrap}
.proximity-hint,.telemetry .graph{transition:opacity .3s}
.nudging .proximity-hint,.nudging .telemetry .graph{opacity:0}
@media(max-height:820px) and (min-width:701px){.nudging .telemetry .ext{display:none}}

.legal{position:absolute;inset:0;z-index:36;background:rgba(8,12,16,.6);display:grid;place-items:center;padding:16px}
.legal-card{position:relative;width:min(480px,100%);max-height:calc(100% - 32px);overflow:auto;background:var(--paper);color:var(--p-ink);border-radius:12px;padding:28px 30px 20px;box-shadow:0 30px 90px rgba(0,0,0,.45)}
.legal-card .close-button{position:absolute;top:14px;right:14px}
.legal-card h2{font-family:var(--display);font-size:22px;letter-spacing:-.5px;margin:0 0 14px}
.legal-card h3{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--p-muted);margin:22px 0 8px}
.legal-card p{font-size:13px;line-height:1.7;margin:0 0 10px;color:var(--p-ink)}

@media(min-width:1600px){
  .intro,.info-card,.exhibit-caption,.bench{left:60px}
  .topbar{padding:0 60px}
  .bottom-ui{left:60px;right:60px}
  .info-card{width:410px;top:150px}
  .bench{top:150px}
  .room-label,.proximity-hint,.telemetry{right:60px}
}
@media(max-width:1280px){
  .view-switch button{padding:0 9px}
  .flow-legend small{display:none}
  .meta-cta{display:none}
}
@media(max-width:1180px){
  .hide-s{display:none}
}
@media(max-width:1050px){
  .topbar{padding:0 26px;height:86px}
  .header-center{display:none}
  .intro{left:26px;top:130px}
  h1{font-size:47px}
  .intro p{font-size:13px}
  .info-card,.bench{left:26px;top:110px;width:336px;max-height:calc(100dvh - 255px)}
  .room-label,.proximity-hint,.telemetry{right:26px}
  .bottom-ui,.exhibit-caption{left:26px}
  .bottom-ui{right:26px}
  .simulation-bar{gap:12px}
  .simulation-state{min-width:170px}
  .flow-legend i{width:64px}
  .simulation-button{min-width:132px;padding:0 16px}
  .tour-button{padding:0 15px}
  .view-switch{display:none}
  .bottom-meta>span:last-child{font-size:7px;letter-spacing:.6px}
}
@media(max-width:700px){
  .topbar{height:75px;padding:0 19px}
  .brand{font-size:22px;gap:7px}
  .brand-symbol{width:28px;height:28px}
  .brand small{font-size:6px;letter-spacing:1.6px;margin-top:7px}
  .header-actions{gap:14px}
  .header-actions .text-button span{display:none}
  .hide-m,#fullscreenButton{display:none}
  .brand{font-size:18px;gap:9px}
  .brand-mark{width:28px;height:28px;font-size:11px;border-radius:7px}
  .cta-button{height:36px;padding:0 13px 0 15px;font-size:11.5px}
  .intro-ctas{gap:10px}
  .ghost-button{padding:12px 15px;font-size:12px}
  .proof{margin-top:18px;gap:6px 16px;font-size:10px}
  .proof strong{font-size:14px}
  .drawer{top:0;right:0;bottom:0;width:100%;border-radius:0}
  .drawer-body{padding:22px 18px 26px;gap:28px}
  .d-brief{margin:0 -18px;padding:22px 18px}
  .d-hero h2{font-size:25px}
  .steps{grid-template-columns:1fr}
  .inputs{grid-template-columns:1fr}
  .nudge{left:14px;right:14px;width:auto;top:84px;bottom:auto}
  .icon-button{height:34px;width:34px}
  .intro{top:100px;left:19px;right:19px}
  .intro .eyebrow{font-size:8px;letter-spacing:1px}
  h1{font-size:40px;letter-spacing:-1.9px;margin:15px 0;line-height:1.12}
  .intro p{font-size:12px;line-height:1.6;margin-bottom:18px}
  .primary-button{padding:12px 16px;font-size:12px}
  .intro-note{font-size:9px;margin-top:10px}
  .room-label,.proximity-hint,.telemetry,.hotspots{display:none}
  .scene-shade{background:linear-gradient(180deg,rgba(13,19,25,.87),rgba(13,19,25,.66) 30%,transparent 55%,rgba(13,19,25,.6) 85%)}
  .exploring .scene-shade{background:linear-gradient(0deg,rgba(13,19,25,.8),transparent 55%),linear-gradient(180deg,#0d1319a0,transparent 25%)}
  .bottom-ui{left:14px;right:14px;bottom:14px}
  .simulation-bar{min-height:61px;padding:7px;gap:10px;border-radius:7px}
  .simulation-button{min-width:0;height:44px;padding:0 13px;font-size:11px;gap:7px}
  .simulation-button svg{width:13px;height:13px}
  .simulation-state{min-width:0;flex:1;gap:7px}
  .simulation-state strong{font-size:10.5px;line-height:1.4}
  .simulation-state span:not(.state-dot){display:none}
  .simulation-state>div{gap:0}
  .state-dot{height:5px;width:5px}
  .flow-legend{display:none}
  .tour-button{width:44px;height:44px;padding:0}
  .tour-button #tourLabel{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .bottom-meta{justify-content:center;font-size:9px;padding-top:10px}
  .bottom-meta>span:last-child{display:none}
  .exhibit-caption{left:19px;bottom:118px;gap:11px}
  .exhibit-caption h2{font-size:13px}
  .exhibit-caption p{font-size:10px}
  .exhibit-number{padding-right:12px;font-size:9px}
  .bench,.info-card{left:14px;right:14px;top:auto;bottom:112px;width:auto;max-height:42dvh;border-radius:8px}
  .bench-scroll{padding:12px 14px 14px;gap:14px}
  .bench-head h2{font-size:20px;margin:3px 0 2px}
  .collapse-button{display:grid}
  .bench.collapsed .bench-scroll>*:not(.bench-head){display:none}
  .bench.collapsed .collapse-button svg{transform:rotate(180deg)}
  .chip{height:46px}
  .card-top{padding:8px 12px 0}
  .card-body{padding:0 15px 14px}
  .card-body h2{font-size:22px;margin:3px 0 9px}
  .card-body p{font-size:12px}
  .card-footer{padding:10px 15px}
  .solving{top:84px}
}
@media(max-height:760px) and (min-width:701px){
  .intro{top:116px}
  h1{font-size:44px;margin:17px 0}
  .intro p{font-size:13px;margin-bottom:20px}
  .intro-note{display:none}
  .bench,.info-card{top:108px;max-height:calc(100dvh - 240px)}
  .bench-scroll{gap:10px;padding-top:12px;padding-bottom:12px}
  .chip{height:40px}
  .chip svg{width:17px;height:17px}
  .rs{height:25px}
  .group-label{margin-bottom:6px}
  .bench-head h2{font-size:21px}
  .bench-head p,.look-note{display:none}
  .swatch{height:29px}
  .exhibit-caption{bottom:135px}
  .bottom-ui{bottom:16px}
  .proximity-hint{bottom:140px}
  .telemetry{top:196px;gap:10px}
}
.debug>:not(#viewport){display:none!important}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}