#omniaPersistentCity,
#omniaPersistentCity *{
 box-sizing:border-box;
}

#omniaPersistentCity{
 position:fixed;
 inset:0;
 z-index:999000;
 pointer-events:none;
 font-family:Inter,system-ui,sans-serif;
}

#omniaCityHud{
 position:absolute;
 left:50%;
 top:10px;
 transform:translateX(-50%);
 width:min(980px,calc(100% - 24px));
 min-height:48px;
 padding:8px 10px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:10px;
 pointer-events:auto;
 border:1px solid rgba(143,206,235,.14);
 border-radius:14px;
 background:rgba(4,10,15,.74);
 backdrop-filter:blur(18px);
 box-shadow:0 18px 55px rgba(0,0,0,.22);
}

.oc56-brand{
 display:flex;
 flex-direction:column;
 min-width:128px;
}

.oc56-brand span{
 color:#637d89;
 font-size:6px;
 font-weight:850;
 letter-spacing:.18em;
}

.oc56-brand strong{
 margin-top:2px;
 color:#edf7fa;
 font-size:11px;
}

.oc56-nav{
 flex:1;
 display:flex;
 gap:5px;
 overflow:auto;
 scrollbar-width:none;
}

.oc56-nav::-webkit-scrollbar{
 display:none;
}

.oc56-destination{
 min-height:32px;
 padding:0 8px;
 flex:0 0 auto;
 border:1px solid rgba(143,206,235,.1);
 border-radius:8px;
 background:rgba(7,16,22,.77);
 color:#758d98;
 font:800 7px Inter,system-ui,sans-serif;
 cursor:pointer;
}

.oc56-destination.active{
 color:#f0f9fb;
 border-color:rgba(119,219,210,.3);
 background:rgba(63,166,168,.08);
}

#omniaCityTravel{
 position:fixed;
 inset:0;
 z-index:999999;
 display:none;
 pointer-events:auto;
 overflow:hidden;
 background:
  radial-gradient(circle at 50% 50%,rgba(31,85,109,.18),transparent 24%),
  #020609;
}

#omniaCityTravel.active{
 display:block;
}

.oc56-horizon{
 position:absolute;
 inset:0;
 background:
  linear-gradient(
   180deg,
   rgba(6,22,33,.72),
   rgba(2,6,9,.94)
  );
}

.oc56-road{
 position:absolute;
 left:50%;
 bottom:-15vh;
 width:130vw;
 height:75vh;
 transform:
  translateX(-50%)
  perspective(1000px)
  rotateX(66deg);
 transform-origin:center bottom;
 background:
  linear-gradient(
   90deg,
   transparent 0 18%,
   rgba(124,212,233,.05) 18% 18.25%,
   transparent 18.25% 49.8%,
   rgba(107,221,211,.22) 49.8% 50.2%,
   transparent 50.2% 81.75%,
   rgba(124,212,233,.05) 81.75% 82%,
   transparent 82%
  ),
  repeating-linear-gradient(
   0deg,
   transparent 0 92px,
   rgba(118,203,225,.06) 92px 94px
  );
}

.oc56-skyline{
 position:absolute;
 left:0;
 right:0;
 bottom:20vh;
 height:44vh;
 display:flex;
 justify-content:center;
 align-items:flex-end;
 gap:8px;
 opacity:.78;
 transform:scale(1.08);
 animation:
  omniaCityRush
  820ms
  cubic-bezier(.15,.7,.16,1)
  both;
}

.oc56-tower{
 width:54px;
 border:1px solid rgba(118,204,230,.1);
 background:
  linear-gradient(180deg,#0a1821,#051017);
}

.oc56-tower:nth-child(1){height:90px}
.oc56-tower:nth-child(2){height:145px}
.oc56-tower:nth-child(3){height:120px}
.oc56-tower:nth-child(4){height:210px}
.oc56-tower:nth-child(5){height:165px}
.oc56-tower:nth-child(6){height:230px}
.oc56-tower:nth-child(7){height:135px}
.oc56-tower:nth-child(8){height:180px}
.oc56-tower:nth-child(9){height:105px}

.oc56-arrival{
 position:absolute;
 left:50%;
 top:50%;
 transform:translate(-50%,-50%);
 width:min(620px,calc(100% - 30px));
 text-align:center;
 animation:
  omniaCityArrival
  620ms
  cubic-bezier(.2,.75,.2,1)
  both;
}

.oc56-kicker{
 color:#6d8895;
 font-size:7px;
 font-weight:850;
 letter-spacing:.18em;
}

.oc56-title{
 margin-top:6px;
 color:#eef8fb;
 font-size:clamp(30px,6vw,58px);
 font-weight:950;
 letter-spacing:-.04em;
}

.oc56-copy{
 margin-top:7px;
 color:#718995;
 font-size:9px;
}

.oc56-progress{
 width:min(340px,80%);
 height:2px;
 margin:16px auto 0;
 overflow:hidden;
 background:rgba(127,199,223,.08);
}

.oc56-progress:after{
 content:"";
 display:block;
 width:100%;
 height:100%;
 background:#75d8cf;
 transform-origin:left;
 animation:
  omniaCityProgress
  720ms
  ease
  both;
}

@keyframes omniaCityProgress{
 from{transform:scaleX(0)}
 to{transform:scaleX(1)}
}

@keyframes omniaCityRush{
 from{
  transform:scale(.88) translateY(34px);
  opacity:.2;
 }
 to{
  transform:scale(1.08) translateY(0);
  opacity:.78;
 }
}

@keyframes omniaCityArrival{
 from{
  opacity:.2;
  transform:
   translate(-50%,-45%)
   scale(.96);
 }
 to{
  opacity:1;
  transform:
   translate(-50%,-50%)
   scale(1);
 }
}

body{
 padding-top:66px!important;
}

@media(max-width:760px){
 #omniaCityHud{
  top:6px;
  min-height:54px;
 }

 .oc56-brand{
  min-width:94px;
 }

 .oc56-brand strong{
  font-size:9px;
 }

 .oc56-destination{
  min-height:34px;
 }

 body{
  padding-top:70px!important;
 }
}

@media(prefers-reduced-motion:reduce){
 .oc56-skyline,
 .oc56-arrival,
 .oc56-progress:after{
  animation:none!important;
 }
}