:root{--ink:#1d292b;--muted:#607074;--paper:rgba(248,246,238,.92);--line:#24383c24;--gold:#b67a29;--blue:#177fa5}

*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#bfd8e2;color:var(--ink);font-family:Arial,Helvetica,sans-serif}
button,a{font:inherit}
button{border-radius:0}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}

header{position:fixed;z-index:30;left:0;right:0;top:0;height:78px;padding:0 30px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(250,248,241,.97),rgba(244,243,236,.88));border-bottom:1px solid #42596022;backdrop-filter:blur(12px)}
.brand{color:#233437;text-decoration:none;font-size:24px;font-weight:950;letter-spacing:-1px}
.title{position:absolute;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap}
.title small,.intro small,.circuits>small,.fact>small{color:var(--gold);font-size:9px;font-weight:900;letter-spacing:2px}
.title h1{margin:3px 0 0;font:26px/1 Georgia,serif}
.tools{display:flex;gap:7px}
.tools button{width:42px;height:42px;border:1px solid #37484c35;background:#ffffff9c;color:#26383b;font-size:17px;cursor:pointer}
.tools button:hover{background:#fff}

.intro{position:fixed;z-index:22;left:30px;top:112px;width:274px;padding:20px;background:var(--paper);box-shadow:0 18px 55px #2c48502b;backdrop-filter:blur(13px);border-left:3px solid var(--gold)}
.intro h2{margin:10px 0 9px;font:34px/.98 Georgia,serif}
.intro p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}
.intro button{margin-top:17px;width:100%;height:43px;padding:0 14px;border:1px solid #a56a1d;background:#b77c2b;color:#fff;display:flex;align-items:center;justify-content:space-between;font-size:8px;font-weight:900;letter-spacing:1px;cursor:pointer}
.intro button.open{background:#263a3e;border-color:#263a3e}

.circuits{position:fixed;z-index:23;right:27px;top:106px;width:245px;padding:15px 16px 12px;background:var(--paper);box-shadow:0 18px 52px #2c485026;backdrop-filter:blur(13px)}
.circuits>small{display:block;text-align:right;margin-bottom:8px}
.circuits button{width:100%;padding:10px 2px;border:0;border-top:1px solid var(--line);background:transparent;display:grid;grid-template-columns:14px 1fr;gap:8px;text-align:left;cursor:pointer;opacity:.53;transition:.22s}
.circuits button:hover,.circuits button.active{opacity:1;transform:translateX(-3px)}
.circuits button>i{width:7px;height:7px;margin-top:3px;border-radius:50%;background:#a8bdc3;box-shadow:0 0 0 3px #56717a18}
.circuits button.active>i{background:#1298c6;box-shadow:0 0 0 3px #1298c62a}
.circuits span{display:flex;flex-direction:column}
.circuits b{font-size:10px}
.circuits em{margin-top:3px;color:#758083;font:italic 9px Georgia,serif}

.fact{position:fixed;z-index:22;left:30px;bottom:92px;width:300px;padding:17px 19px;background:var(--paper);box-shadow:0 15px 45px #2c485026;backdrop-filter:blur(12px)}
.fact h3{margin:7px 0 7px;font:italic 22px/1.08 Georgia,serif}
.fact p{margin:0;color:var(--muted);font-size:10px;line-height:1.52}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.metrics span{display:flex;flex-direction:column}
.metrics b{font:18px Georgia,serif;color:#8c5c1c}
.metrics em{margin-top:2px;color:#788286;font-size:7px;font-style:normal;text-transform:uppercase;letter-spacing:1px}

.views{position:fixed;z-index:24;left:50%;bottom:20px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,1fr);width:650px;background:rgba(249,247,239,.93);border:1px solid #fff9;box-shadow:0 14px 45px #2b464d2f;backdrop-filter:blur(12px)}
.views button{height:52px;padding:0 12px;border:0;border-right:1px solid var(--line);background:transparent;color:#677377;display:flex;align-items:center;gap:8px;cursor:pointer}
.views button:last-child{border:0}
.views button b{font:italic 16px Georgia,serif;color:#9b6b28}
.views button span{font-size:8px;font-weight:800}
.views button.active{background:#b77c2b;color:#fff}
.views button.active b{color:#fff}

.labels span{position:fixed;z-index:12;padding:6px 8px;background:#213438e6;color:#fff;border-left:2px solid #cf943e;font-size:7px;font-weight:900;letter-spacing:.7px;pointer-events:none;box-shadow:0 5px 14px #25363a33}
.legend{position:fixed;z-index:15;left:29px;bottom:28px;display:flex;gap:14px;color:#37484b;font-size:8px}
.legend span{display:flex;align-items:center;gap:5px}
.legend i{width:7px;height:7px;border-radius:50%}
.concrete{background:#cfb993}
.rock{background:#786d54}
.water{background:#1684ae}
.gesture{position:fixed;z-index:15;left:29px;bottom:12px;color:#526267;font-size:7px}
.credits{position:fixed;z-index:15;right:27px;bottom:12px;color:#526267;font-size:7px}

#loader{position:fixed;z-index:100;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#edf2ef;color:#25373a;transition:opacity .6s,visibility .6s}
#loader.done{opacity:0;visibility:hidden}
#loader b{font-size:27px}
#loader span{margin:12px 0;font-size:8px;letter-spacing:2px;color:#95651f}
#loader>i{width:230px;height:2px;background:#41565c20}
#loader em{display:block;width:0;height:100%;background:#b77c2b;transition:.18s}

@media(max-width:980px){.circuits{top:auto;bottom:112px;right:14px}
.intro{left:14px;top:92px}
.fact{display:none}
.views{width:560px}
.credits{display:none}
}

@media(max-width:640px){header{height:64px;padding:0 11px}
.brand{font-size:18px}
.title small{display:none}
.title h1{font-size:16px}
.tools button{width:34px;height:34px}
.intro{top:74px;left:8px;width:calc(100% - 16px);padding:10px 13px}
.intro h2{font-size:22px;margin:5px 0}
.intro p{display:none}
.intro button{position:absolute;right:8px;top:4px;width:138px;margin:0;height:36px}
.circuits{right:8px;left:8px;bottom:80px;width:auto;padding:8px;display:grid;grid-template-columns:repeat(2,1fr)}
.circuits>small{display:none}
.circuits button{padding:7px}
.circuits em{display:none}
.views{left:8px;right:8px;bottom:8px;transform:none;width:auto}
.views button{height:58px;padding:0 6px;justify-content:center}
.views button b{font-size:13px}
.views button span{display:none}
.legend,.gesture{display:none}
.labels span{font-size:6px}
}


/* Integrated guide: no Aix header; the scene and its own controls are preserved. */
.bimont-embed header{display:none}
.bimont-embed .tools{position:fixed;top:10px;right:10px;z-index:35}
.bimont-embed .intro{top:10px;left:10px;width:168px;padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none}
.bimont-embed .intro>small,.bimont-embed .intro>h2,.bimont-embed .intro>p{display:none}
.bimont-embed .intro button{position:static;margin:0;width:168px;height:42px;font-size:9px}
.bimont-embed .circuits{top:66px;bottom:auto;right:10px;width:218px;padding:10px}
.bimont-embed .circuits b{font-size:12px}.bimont-embed .circuits em{font-size:10px}
.bimont-embed .fact{display:none}.bimont-embed .legend,.bimont-embed .gesture,.bimont-embed .credits{display:none}
.bimont-embed .views{width:calc(100% - 20px);max-width:650px;bottom:10px}
.bimont-embed .views button span{font-size:10px;display:inline;line-height:1.3}
.bimont-embed .views button{height:52px;justify-content:center;padding:6px;gap:5px}
button:focus-visible,a:focus-visible{outline:3px solid #14739a;outline-offset:3px}
#loader p{max-width:300px;text-align:center;line-height:1.5;padding:0 15px}#loader a{color:#234f48}
@media(max-width:640px){
 .bimont-embed .circuits{top:auto;bottom:84px;left:8px;right:8px;width:auto;grid-template-columns:repeat(2,1fr)}
 .bimont-embed .circuits button{min-height:36px;padding:8px 5px}.bimont-embed .circuits b{font-size:11px}
 .bimont-embed .views{left:8px;right:8px;width:auto;max-width:none;bottom:8px}
 .bimont-embed .views button{height:64px;flex-direction:column;gap:3px}.bimont-embed .views button span{font-size:9px}
}

.bimont-embed .circuits button{opacity:.85}.bimont-embed .circuits button.active,.bimont-embed .circuits button:hover{opacity:1}.tools button svg{display:block;margin:auto}

.visit-guide{position:absolute;right:140px;color:#234f48;font-size:12px;text-decoration:underline}.bimont-embed .visit-guide{display:none}
@media(max-width:980px){.visit-guide{display:none}}
@media(max-width:640px){header .title{left:80px;right:90px;transform:none;text-align:center;white-space:normal}header .title h1{font-size:15px;line-height:1.1}}
