@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');
:root{
  color-scheme:dark;--bg:#0b1722;--panel:#0f1d29e6;--panel-solid:#101f2b;--line:#ffffff1f;--line-2:#ffffff33;
  --ink:#f2f7f8;--muted:#9fb2bf;--accent:#6fe3d8;--accent-2:#8fd8ff;--gas:#f5b56b;--particle:#c2a0fb;--bio:#70d6d7;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;--sans:'DM Sans',system-ui,-apple-system,sans-serif;--display:'Manrope',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font:15px/1.5 var(--sans)}
button,a{font:inherit;color:inherit;touch-action:manipulation}
button{cursor:pointer;border:1px solid var(--line);background:#ffffff08;border-radius:9px;padding:7px 12px;font-size:13px;font-weight:600;transition:background .2s,border-color .2s,color .2s}
button:hover{background:#ffffff14;border-color:var(--line-2)}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button:disabled{opacity:.35;cursor:default}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
#scene{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none;outline:none}
#overlay{position:fixed;inset:0;pointer-events:none;z-index:2}
.kicker{font:600 11px/1 var(--mono);letter-spacing:.14em;color:var(--muted);margin:0 0 8px;text-transform:uppercase}
.label{font:600 10px/1 var(--mono);letter-spacing:.14em;color:var(--muted);margin:0 0 8px;text-transform:uppercase}

/* title + stats */
.hud-title{position:fixed;left:28px;top:24px;z-index:3;max-width:420px;pointer-events:none}
.hud-title h1{font:800 clamp(34px,4vw,52px)/.95 var(--display);letter-spacing:-.02em;margin:0 0 12px;background:linear-gradient(95deg,#7ff0e0 0%,#8fd8ff 60%,#b9c8ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 14px #6fe3d833)}
.hud-title .kicker{color:#e6f3f5;font:700 15px/1 var(--display);letter-spacing:.04em;margin-bottom:6px}
.lede{margin:0 0 14px;color:#c9d6de;font-size:14px;max-width:360px;text-shadow:0 1px 8px #0b1722}
.stats{display:flex;gap:8px;pointer-events:auto}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 11px 7px;backdrop-filter:blur(10px);min-width:96px}
.stat span{display:block;font:600 9.5px/1 var(--mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-bottom:6px}
.stat b{font:600 19px/1 var(--mono);color:var(--accent);transition:color .6s}
.stat small{font:500 11px var(--mono);color:var(--muted);margin-left:5px}
.live{display:flex;align-items:center;gap:8px;margin:12px 0 0;font:500 11px var(--mono);color:var(--muted)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 #6fe3d880;animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #6fe3d880}70%{box-shadow:0 0 0 8px #6fe3d800}100%{box-shadow:0 0 0 0 #6fe3d800}}

/* control panel */
.hud-panel{position:fixed;right:24px;top:22px;z-index:4;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 16px;backdrop-filter:blur(14px);box-shadow:0 18px 50px #0006;display:flex;flex-direction:column;gap:14px}
.panel-row{display:flex;gap:22px;align-items:flex-end;justify-content:space-between}
.seg{display:flex;gap:4px;background:#00000030;border:1px solid var(--line);border-radius:11px;padding:3px}
.seg button{border:0;background:none;padding:6px 11px;border-radius:8px;color:#c8d5dd;white-space:nowrap}
.seg button[aria-pressed="true"]{background:#f2f7f8;color:#0b1722}
.icon-buttons{display:flex;gap:6px}
.icon{width:36px;height:36px;padding:0;display:grid;place-items:center;border-radius:10px;font-weight:700}
.icon[aria-pressed="true"]{background:#f2f7f8;color:#0b1722}
.layers{display:flex;gap:5px}
.layers button{width:38px;height:36px;padding:0;display:grid;place-items:center;border-radius:10px;color:#6f8290;background:#00000025}
.layers button span{display:none}
.layers button[aria-pressed="true"]{color:#f2f7f8;background:#ffffff16;border-color:var(--line-2)}
.layers .layer-gas[aria-pressed="true"]{color:var(--gas)}
.layers .layer-particle[aria-pressed="true"]{color:var(--particle)}
.layers .layer-bio[aria-pressed="true"]{color:var(--bio)}
.layers .layer-airflow[aria-pressed="true"]{color:var(--accent-2)}
.layers .layer-heat[aria-pressed="true"]{color:#ffb27a}
.actions{display:flex;gap:6px}
.actions button{display:flex;align-items:center;gap:7px;height:36px;white-space:nowrap}
#vent-btn[aria-pressed="true"]{background:#8fd8ff;color:#08202c;border-color:#8fd8ff}

/* overlay markers */
.hotspot{position:absolute;left:0;top:0;width:0;height:0;padding:0;border:0;background:none;pointer-events:auto;z-index:1}
.hotspot .ring{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,var(--c) 0 3.5px,#0b1722d0 4.5px);border:1.5px solid var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent),0 0 16px var(--c);transition:transform .25s,opacity .3s}
.hotspot:hover .ring,.hotspot.selected .ring{transform:scale(1.35)}
.hotspot.selected .ring{box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 30%,transparent),0 0 22px var(--c)}
.hotspot.fixed .ring{--c:#b9eacb;background:radial-gradient(circle,#b9eacb 0 3.5px,#0b1722d0 4.5px)}
.hotspot.quiet .ring{opacity:.45;box-shadow:none}
.hotspot.dim{opacity:.3}
.hotspot.off,.hotspot.offscreen,.room-label.offscreen,.hide-labels .hotspot,.hide-labels .room-label{visibility:hidden}
.hotspot .tip{position:absolute;left:14px;top:-15px;white-space:nowrap;background:#0b1722f0;border:1px solid var(--line-2);border-radius:7px;padding:5px 9px;font-size:12px;font-weight:600;text-align:left;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s;pointer-events:none}
.hotspot .tip small{display:block;font:500 10.5px var(--mono);color:var(--c);margin-top:1px}
.hotspot:hover .tip,.hotspot:focus-visible .tip,.hotspot.selected .tip{opacity:1;transform:none}
.hotspot:focus-visible{outline:none}
.hotspot:focus-visible .ring{outline:2px solid var(--accent);outline-offset:4px}
.room-label{position:absolute;left:0;top:0;pointer-events:auto;display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:7px;background:#0b1722d8;border:1px solid var(--line);font:600 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;translate:-50% -50%;white-space:nowrap;transition:opacity .3s,border-color .3s}
.room-label i{width:7px;height:7px;border-radius:50%;background:var(--c,#58d2b8);box-shadow:0 0 8px var(--c,#58d2b8)}
.room-label b{color:var(--c,#58d2b8);font-weight:600}
.room-label.active{border-color:var(--c);background:#0b1722f5}
.room-label.dim{opacity:.35}

/* inspector */
.inspector{position:fixed;right:24px;top:196px;bottom:96px;width:350px;z-index:4;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 20px 18px;backdrop-filter:blur(14px);box-shadow:0 18px 50px #0006;overflow:auto;animation:slide .35s cubic-bezier(.2,.8,.2,1)}
.inspector[hidden]{display:none}
@keyframes slide{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.inspector .close{position:absolute;right:12px;top:12px;width:30px;height:30px;padding:0;border-radius:8px}
.inspector h2{font:700 26px/1.1 var(--display);margin:0 0 12px;letter-spacing:-.01em}
.meter{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.meter>div{flex:1;height:6px;border-radius:4px;background:#ffffff14;overflow:hidden}
.meter i{display:block;height:100%;width:0;border-radius:4px;transition:width .5s,background .5s}
.meter span{font:500 11px var(--mono);color:var(--muted);white-space:nowrap}
.meter span b{color:var(--ink)}
.inspector .intro{color:#c3d1da;font-size:13.5px;margin:0 0 16px}
.source-list{display:flex;flex-direction:column;gap:5px}
.source-list button{display:flex;align-items:center;gap:9px;text-align:left;font-weight:500;padding:8px 10px}
.source-list button i{width:7px;height:7px;border-radius:50%;flex:none}
.source-list button span{margin-left:auto;color:#b9eacb}
.source-list button[aria-pressed="true"]{background:#ffffff18;border-color:var(--line-2)}
.source-detail{border-top:1px solid var(--line);margin-top:16px;padding-top:15px}
.chip{display:inline-block;font:600 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:5px;color:var(--c);border:1px solid color-mix(in srgb,var(--c) 35%,transparent);background:color-mix(in srgb,var(--c) 8%,transparent)}
.source-detail h3{font-size:17px;margin:10px 0 6px;line-height:1.3}
.source-detail>p{font-size:13.5px;color:#bccad3;margin:0 0 12px}
.source-detail .quiet{font-size:12px;color:#ffd08a;background:#ffd08a12;border:1px solid #ffd08a30;padding:7px 9px;border-radius:8px}
.action-card{border:1px solid #b9eacb40;background:#b9eacb0a;border-radius:11px;padding:12px}
.action-card .label{color:#b9eacb;margin-bottom:6px}
.action-card p{font-size:13px;color:#d9e5e2;margin:0 0 10px}
.action-card button{width:100%;border-color:#b9eacb80;color:#b9eacb;background:none;padding:9px}
.action-card button.on{background:#b9eacb;color:#11281d}
.effect{font-size:12px;color:#b9eacb;margin:10px 0 0}

/* narrative, dock, corner, legend */
.narrative{position:fixed;left:24px;bottom:24px;z-index:3;max-width:380px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px 15px;backdrop-filter:blur(12px);font-size:13.5px;color:#d3dee5}
.narrative p{margin:0}
.narrative .kicker{margin-bottom:7px;color:var(--accent)}
.narrative b{color:#fff}
.vent-note{display:block;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);color:#bfe6ff}
.dock{position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:3;display:flex;gap:6px;padding:7px;background:#0a141dd9;border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(12px);box-shadow:0 12px 40px #0007,inset 0 1px 0 #ffffff10}
.dock button{display:flex;align-items:center;gap:7px;border-radius:9px;padding:8px 11px;white-space:nowrap;background:linear-gradient(#ffffff0d,#ffffff04);box-shadow:inset 0 0 0 1px #6fe3d810}
.dock button i{width:7px;height:7px;border-radius:50%;background:#58d2b8;transition:background .6s}
.dock button[aria-pressed="true"]{background:#f2f7f8;color:#0b1722;border-color:#f2f7f8}
.corner{position:fixed;right:24px;bottom:28px;z-index:3;display:flex;gap:16px;align-items:center;font-size:12.5px}
.corner button,.corner a{border:0;background:none;padding:0;color:var(--muted);text-decoration:none;font-weight:500}
.corner button:hover,.corner a:hover{color:#fff;background:none}
.legend{position:fixed;left:50%;bottom:84px;translate:-50% 0;z-index:2;display:flex;gap:14px;font:500 10.5px var(--mono);color:#9fb2bf;pointer-events:none;text-shadow:0 1px 6px #0b1722}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:7px;height:7px;border-radius:50%}
.tour-bar{position:fixed;left:50%;bottom:84px;translate:-50% 0;z-index:5;width:min(720px,calc(100vw - 32px));display:flex;justify-content:space-between;align-items:center;gap:18px;background:#123027f2;border:1px solid #6fe3d860;border-radius:14px;padding:13px 16px;backdrop-filter:blur(12px)}
.tour-bar[hidden]{display:none}
.tour-bar strong{display:block;font-size:14px}
.tour-bar span{font-size:12.5px;color:#c7ddd5}
.tour-bar>div:last-child{display:flex;gap:8px;align-items:center;flex:none}
.tour-bar .text{border:0;background:none;color:#a9c5bb}
.primary{background:#6fe3d8;color:#07231f;border-color:#6fe3d8}
.primary:hover{background:#9af0e7;border-color:#9af0e7}
body.touring .legend{display:none}

/* intro card and facts */
.intro-card{position:fixed;inset:0;z-index:15;display:grid;place-items:center;background:radial-gradient(ellipse at center,#0b172280,#0b1722e6);backdrop-filter:blur(3px);padding:20px}
.intro-card[hidden]{display:none}
.intro-card>div{max-width:620px;background:var(--panel);border:1px solid var(--line-2);border-radius:20px;padding:28px 30px;box-shadow:0 30px 80px #000a;animation:slide .5s cubic-bezier(.2,.8,.2,1)}
.intro-card h2{font:800 clamp(22px,3vw,30px)/1.15 var(--display);margin:0 0 18px;letter-spacing:-.01em}
.intro-card .kicker{color:var(--accent)}
.facts{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.facts li{border:1px solid var(--line);background:#ffffff06;border-radius:12px;padding:11px 13px;display:flex;flex-direction:column;gap:3px}
.facts b{font:700 22px/1.1 var(--mono);color:var(--accent)}
.facts span{font-size:13px;color:#d3dee5;line-height:1.4}
.facts small{font:500 10.5px var(--mono);color:var(--muted)}
.intro-src{font-size:12px;color:var(--muted);margin:0 0 16px}
.intro-src a,dialog a.report-link{color:var(--accent)}
.intro-actions{display:flex;gap:10px;flex-wrap:wrap}
.intro-actions button{padding:10px 16px;font-size:14px}
.source-detail .ref{font:500 10.5px var(--mono);color:var(--muted);margin:12px 0 0}
.source-detail .ref a{color:var(--accent-2)}

/* dialog, loading, fallback */
dialog{background:#10202c;color:var(--ink);border:1px solid var(--line-2);border-radius:18px;max-width:720px;width:92vw;padding:26px 28px;max-height:88vh}
dialog::backdrop{background:#000a;backdrop-filter:blur(6px)}
.dialog-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.dialog-head h2{font:700 26px var(--display);margin:0}
dialog p{color:#bfccd5;font-size:14px}
dialog h3{font-size:15px;margin:20px 0 6px}
.howto{padding-left:18px;color:#d6e1e7;font-size:14px;line-height:1.8}
.reading{padding-left:18px;line-height:1.9;font-size:14px;color:var(--accent)}
.reference-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.reference-grid.single{grid-template-columns:1fr}
.reference-grid img{width:100%;height:170px;object-fit:contain;background:#fff;border-radius:8px}
#loading{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:var(--bg);font:500 13px var(--mono);color:var(--muted);transition:opacity .8s .2s,visibility .8s .2s}
#loading.done{opacity:0;visibility:hidden}
#loading div{display:flex;gap:12px;align-items:center}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid #ffffff22;border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#fallback{position:fixed;inset:0;z-index:21;display:grid;place-items:center;background:var(--bg);text-align:center;padding:24px}
#fallback[hidden]{display:none}
#fallback a{color:var(--accent)}

@media (max-width:1180px){
  .hud-title{max-width:320px}
  .lede{display:none}
  .seg button{padding:6px 8px;font-size:12px}
  .actions button span{display:none}
  .inspector{top:auto;bottom:84px;max-height:52vh;width:340px}
  .narrative{max-width:300px;font-size:12.5px}
  .corner{display:none}
  .legend{bottom:76px}
}
@media (max-width:760px){
  .hud-title{left:14px;top:12px;right:14px;max-width:none}
  .hud-title h1{font-size:28px;margin-bottom:8px}
  .hud-title .kicker{font-size:12px}
  .stats{gap:5px}
  .stat{min-width:0;flex:1;padding:6px 8px}
  .stat b{font-size:15px}
  .stat small{display:none}
  .live{display:none}
  .hud-panel{left:10px;right:10px;top:auto;bottom:72px;padding:10px;gap:8px;border-radius:14px}
  .panel-row{gap:8px;align-items:center}
  .panel-row .label{display:none}
  .panel-row .group{min-width:0;flex:1}
  .seg{overflow-x:auto;scrollbar-width:none}
  .seg button{padding:6px 8px}
  .room-label{font-size:9px;padding:3px 6px;gap:4px}
  .hotspot .ring{transform:scale(.85)}
  .layers{overflow-x:auto;scrollbar-width:none}
  .layers button,.icon,.actions button{width:34px;height:34px}
  .actions button{padding:0;justify-content:center}
  .narrative,.legend{display:none}
  .dock{left:10px;right:10px;translate:none;bottom:12px;overflow-x:auto;scrollbar-width:none;padding:5px}
  .dock button{padding:7px 9px;font-size:12px}
  .inspector{left:10px;right:10px;width:auto;bottom:12px;top:auto;max-height:62vh;z-index:6;padding:16px}
  .tour-bar{bottom:180px;flex-wrap:wrap}
  .reference-grid{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .intro-card>div{padding:20px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}