@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
:root{--red:#c51b2d;--black:#101012;--soft:#cfd0d3;--white:#f8f8f8;font-family:Montserrat,Arial,sans-serif;color:#fff}*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--black)}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:4px}.site{height:100dvh;min-height:460px;display:flex;flex-direction:column;overflow:hidden}.topbar{height:90px;flex-shrink:0;background:#0d0d0f;display:grid;grid-template-columns:minmax(220px,320px) 1fr auto;align-items:center;padding:0 clamp(24px,4vw,68px);gap:20px;border-bottom:1px solid #ffffff15;z-index:5}.brand{height:76px;width:min(100%,320px);display:flex;align-items:center}.brand img{width:100%;max-width:320px;max-height:52px;height:auto;object-fit:contain;object-position:left center}.topbar-title,.soundless,.footer,.eyebrow,.orientation,.panel-heading,.panel-foot,.current>span,.mobile-height-trigger{font-size:10px;letter-spacing:2.3px;font-weight:700}.topbar-title{color:#a4a4a6;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.red-point{color:var(--red);font-size:7px;padding:0 8px}.soundless{background:none;border:0;color:#eee;display:flex;align-items:center;gap:12px}.soundless svg{height:20px;width:20px;fill:none;stroke:currentColor;stroke-width:1.5}.stage{flex:1;position:relative;overflow:hidden;background:#171e27;touch-action:none;cursor:grab}.stage:active{cursor:grabbing}#panorama{width:100%;height:100%;position:absolute;inset:0;display:block}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.18),transparent 24%,transparent 85%,rgba(0,0,0,.04))}.loading{position:absolute;inset:0;z-index:8;background:#15171a;display:flex;align-items:center;justify-content:center;gap:20px;font-size:11px;letter-spacing:2px;transition:opacity .5s}.loading.hidden{opacity:0;pointer-events:none}.spinner{width:25px;height:25px;border:2px solid #555;border-top-color:var(--red);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.hero-copy{position:absolute;left:clamp(25px,5vw,90px);top:clamp(45px,13%,125px);pointer-events:none;text-shadow:0 2px 18px #0006;max-width:700px}.eyebrow{display:flex;gap:12px;align-items:center}.eyebrow i{width:25px;height:2px;background:var(--red)}.hero-copy h1{font-size:clamp(28px,3.15vw,56px);line-height:1.18;font-weight:800;letter-spacing:-1px;margin:22px 0 14px}.hero-copy h1 em{font-style:normal;color:white;font-weight:500}.hero-copy p{font-size:13px;line-height:1.7;color:#e9e9e9;max-width:350px}.height-panel{position:absolute;right:clamp(25px,4.5vw,82px);top:50%;transform:translateY(-50%);background:rgba(12,12,14,.82);backdrop-filter:blur(16px);padding:31px 30px 30px 32px;width:184px;border:1px solid #ffffff2b;border-top:2px solid var(--red);box-shadow:0 20px 70px #0005}.panel-heading{font-size:10px;line-height:1.7;color:#bbb}.panel-heading strong{color:#fff;font-size:13px}.height-rail{margin:26px 0;position:relative}.rail-line{position:absolute;right:4px;top:18px;bottom:18px;width:1px;background:#666}.height-option{display:flex;position:relative;align-items:center;justify-content:space-between;width:100%;height:54px;padding:0;background:none;border:0;color:#a9a9ac;text-align:left}.height-num{font-size:25px;letter-spacing:-1px;font-weight:700}.height-num small{font-size:12px;font-weight:500;letter-spacing:0}.height-dot{width:9px;height:9px;border:1px solid #aaa;border-radius:50%;background:#1b1b1b;z-index:1}.height-option:hover,.height-option.active{color:#fff}.height-option.active .height-num{color:#fff}.height-option.active .height-dot{background:var(--red);border-color:var(--red);box-shadow:0 0 0 5px #c51b2d35}.panel-foot{line-height:1.9;color:#fff;font-size:8px;letter-spacing:2px;border-top:1px solid #ffffff33;padding-top:18px}.panel-foot span{color:#909094}.orientation{position:absolute;bottom:42px;left:clamp(25px,5vw,90px);display:flex;align-items:center;gap:15px;color:#eee}.orientation-ico{border:1px solid #ffffff77;border-radius:50%;height:41px;width:41px;display:grid;place-items:center;font-size:23px;font-weight:400}.orientation b{color:#fff}.toolbar{position:absolute;bottom:36px;right:clamp(25px,4.5vw,82px);display:flex;align-items:end;gap:28px}.current{display:flex;flex-direction:column;gap:8px;text-align:right}.current>span{color:#d9d9d9;font-size:9px}.current strong{font-size:25px}.current small{font-size:11px;letter-spacing:1.4px;font-weight:500}.tool-buttons{display:flex;gap:4px}.tool-buttons button{height:42px;width:42px;background:#121315cf;border:1px solid #ffffff6a;color:#fff;font-size:23px}.tool-buttons button:hover{background:var(--red)}.compass{position:absolute;left:50%;top:36px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;letter-spacing:2px;text-shadow:0 2px 4px black;opacity:.85}.compass-mark{font-size:17px;color:var(--red);transform-origin:center 15px}.footer{height:52px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(24px,4vw,68px);background:#0d0d0f;color:#9a9a9f;font-size:9px;letter-spacing:1.8px;gap:20px}.footer-center{color:#ddd}.mobile-height-trigger,.mobile-heights{display:none}@media(max-width:790px){.site{min-height:400px}.topbar{height:74px;padding:0 18px;grid-template-columns:minmax(120px,160px) 1fr auto;position:relative}.brand{height:60px;width:min(100%,160px);justify-content:flex-start;margin:0}.brand img{width:100%;max-width:160px;max-height:34px;height:auto;object-position:left center}.topbar-title,.soundless span{display:none}.soundless{position:absolute;right:18px;top:50%;transform:translateY(-50%)}.footer{height:45px;padding:0 20px;justify-content:center;font-size:8px;text-align:center}.footer span:not(.footer-center){display:none}.hero-copy{top:38px;left:23px;right:20px}.hero-copy h1{font-size:clamp(24px,6vw,36px);margin:17px 0 10px}.hero-copy p{font-size:11px;max-width:230px}.eyebrow{font-size:9px}.height-panel{display:none}.compass{top:16px;left:auto;right:22px;transform:none}.orientation{bottom:110px;left:22px;font-size:8px;gap:9px;letter-spacing:1px}.orientation-ico{height:34px;width:34px}.toolbar{bottom:105px;right:22px}.current{display:none}.tool-buttons button{width:36px;height:36px}.mobile-height-trigger{display:flex;align-items:center;justify-content:space-between;position:absolute;bottom:24px;left:22px;right:22px;height:58px;background:#111215ed;border:1px solid #ffffff45;border-left:3px solid var(--red);color:#bfbfc1;padding:0 19px;letter-spacing:1px}.mobile-height-trigger strong{color:#fff;font-size:19px;margin-left:auto;margin-right:20px}.mobile-height-trigger span{font-size:22px}.mobile-heights.open{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;position:absolute;bottom:83px;left:22px;right:22px;background:#111215;border:1px solid #ffffff45;padding:5px}.mobile-heights button{height:46px;background:#28282c;border:0;color:#fff;font-size:13px;font-weight:700}.mobile-heights button.active{background:var(--red)}}@media(max-height:580px) and (min-width:791px){.topbar{height:65px}.brand img{height:55px}.footer{height:36px}.hero-copy{top:30px}.hero-copy h1{font-size:34px}.height-panel{padding:15px 20px;width:150px}.height-rail{margin:10px 0}.height-option{height:40px}.panel-foot{padding-top:8px}.orientation,.toolbar{bottom:20px}}

/* Compass in the top-right corner of the viewing area on all displays */
.stage .compass{left:auto;right:clamp(22px,4.5vw,82px);top:26px;transform:none;z-index:4}
@media(max-width:790px){.stage .compass{right:22px;top:16px}}

/* Eight-height selector: fit comfortably on desktop and mobile */
.height-panel{max-height:calc(100% - 26px);display:flex;flex-direction:column;padding:19px 23px 16px 25px;width:171px}
.height-rail{margin:12px 0;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#555 transparent}
.height-option{height:clamp(34px,5.35vh,48px);flex-shrink:0}
.height-num{font-size:22px}
.panel-foot{padding-top:9px}
@media(max-width:790px){.height-panel{display:none}.mobile-heights.open{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:3px}.mobile-heights button{font-size:12px}}
@media(max-height:590px) and (min-width:791px){.height-panel{padding:11px 17px;width:150px}.height-rail{margin:6px 0}.height-option{height:31px}.height-num{font-size:19px}.panel-heading{font-size:9px}.panel-heading strong{font-size:11px}.panel-foot{font-size:7px}}

/* Footer removed: panoramic stage fills remaining viewport height. */
@media (max-width:790px) {
  .topbar { gap:8px; padding:0 14px; grid-template-columns:minmax(118px,148px) 1fr auto; }
  .brand { margin:0; width:min(100%,148px); min-width:118px; height:60px; justify-content:flex-start; }
  .brand img { width:100%; max-width:148px; max-height:32px; height:auto; object-position:left center; }
  .topbar-title { display:block; min-width:0; text-align:center; font-size:clamp(7px,1.75vw,10px); line-height:1.5; letter-spacing:clamp(.5px,.21vw,1.7px); padding:0 4px; }
  .soundless { position:static; transform:none; padding:5px; flex-shrink:0; }
}

/* Responsive tagline: abbreviated only on mobile */
.mobile-slogan{display:none}
@media(max-width:790px){.desktop-slogan{display:none}.mobile-slogan{display:inline}.topbar-title{white-space:normal}}

/* Mobile header refinement: true viewport-centered title and a larger horizontal logo. */
@media (max-width:790px) {
  .topbar { position:relative; display:flex; align-items:center; justify-content:space-between; padding:0 14px; gap:0; }
  .brand { flex:0 0 auto; width:auto; min-width:0; height:100%; display:flex; align-items:center; margin:0; z-index:1; }
  .brand img { display:block; width:auto; height:clamp(44px,10vw,54px); max-width:min(26vw,120px); max-height:none; object-fit:contain; object-position:left center; }
  .topbar-title { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:max-content; max-width:calc(100% - 210px); min-width:0; text-align:center; padding:0; margin:0; white-space:nowrap; font-size:clamp(7px,1.6vw,10px); letter-spacing:clamp(.35px,.15vw,1.1px); z-index:0; }
  .soundless { position:relative; right:auto; top:auto; transform:none; margin-left:auto; z-index:1; }
}
@media (max-width:400px) {
  .brand img {height:44px;max-width:100px;}
  .topbar-title {max-width:calc(100% - 185px);font-size:7px;letter-spacing:.25px;}
}