:root{--oq-midnight: #081522;--oq-near-black: #050912;--oq-electric-cyan: #00e5ff;--oq-emerald: #00d68f;--oq-violet: #6d6bff;--oq-soft-white: #e6ecf5;--oq-harbour-blue: #0a2a3d;--oq-lighthouse: #f5fbff}body{background:radial-gradient(circle at 14% 8%,rgba(0,229,255,.14),transparent 28rem),radial-gradient(circle at 82% 12%,rgba(109,107,255,.13),transparent 30rem),radial-gradient(circle at 50% 76%,rgba(0,214,143,.08),transparent 34rem),linear-gradient(180deg,var(--oq-near-black) 0%,var(--oq-midnight) 48%,#041019 100%)}.city-grid{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-3;pointer-events:none;background-image:linear-gradient(118deg,transparent 0 48%,rgba(0,229,255,.052) 48.2% 48.7%,transparent 49%),linear-gradient(62deg,transparent 0 52%,rgba(230,236,245,.04) 52.2% 52.8%,transparent 53%),radial-gradient(circle at 18% 30%,rgba(0,229,255,.08) 0 2px,transparent 3px),radial-gradient(circle at 76% 44%,rgba(0,214,143,.07) 0 2px,transparent 3px),linear-gradient(rgba(230,236,245,.038) 1px,transparent 1px),linear-gradient(90deg,rgba(230,236,245,.032) 1px,transparent 1px);background-size:100% 100%,100% 100%,320px 260px,280px 220px,92px 92px,92px 92px;-webkit-mask-image:linear-gradient(to bottom,black,transparent 76%);mask-image:linear-gradient(to bottom,black,transparent 76%);animation:oq-shipping-lanes 56s linear infinite}.city-glow{position:fixed;inset:auto -10% 0;z-index:-2;height:34vh;pointer-events:none;background:linear-gradient(to top,rgba(0,229,255,.13),transparent 72%),repeating-linear-gradient(0deg,rgba(230,236,245,.035) 0 1px,transparent 1px 18px),linear-gradient(180deg,transparent,rgba(4,16,25,.82));filter:blur(.4px);opacity:.76}.city-glow:before{position:absolute;inset:18% 8% auto;height:1px;content:"";background:linear-gradient(90deg,transparent,rgba(0,229,255,.38),rgba(245,251,255,.48),rgba(0,214,143,.22),transparent);box-shadow:0 0 34px #00e5ff47;animation:oq-harbour-reflection 18s ease-in-out infinite}.cityscape-background{position:fixed;inset:auto 0 0;z-index:-1;height:min(58vh,560px);overflow:hidden;pointer-events:none;opacity:.9;background:radial-gradient(ellipse at 50% 100%,rgba(0,229,255,.22),transparent 54%),radial-gradient(ellipse at 13% 84%,rgba(0,214,143,.09),transparent 30%),radial-gradient(ellipse at 88% 82%,rgba(109,107,255,.1),transparent 30%),linear-gradient(to top,rgba(2,12,21,.98),rgba(6,24,38,.58),transparent);-webkit-mask-image:linear-gradient(to top,black 0%,black 74%,transparent 100%);mask-image:linear-gradient(to top,black 0%,black 74%,transparent 100%)}.cityscape-background:before,.cityscape-background:after{position:absolute;content:"";pointer-events:none}.cityscape-background:before{inset:auto -8% 0;height:76%;background:linear-gradient(90deg,transparent 0 7%,rgba(20,32,44,.88) 7.2% 8.2%,transparent 8.4% 18%,rgba(20,32,44,.78) 18.2% 19%,transparent 19.2% 36%,rgba(20,32,44,.86) 36.2% 37.2%,transparent 37.4% 58%,rgba(20,32,44,.78) 58.2% 59%,transparent 59.2% 78%,rgba(20,32,44,.88) 78.2% 79.2%,transparent 79.4%),linear-gradient(90deg,transparent 0 12%,rgba(0,229,255,.18) 12.1% 12.4%,transparent 12.6% 32%,rgba(0,229,255,.14) 32.1% 32.4%,transparent 32.6% 66%,rgba(0,214,143,.13) 66.1% 66.4%,transparent 66.6%),repeating-radial-gradient(ellipse at 50% 100%,rgba(230,236,245,.05) 0 1px,transparent 1px 34px),repeating-linear-gradient(0deg,transparent 0 28px,rgba(230,236,245,.038) 28px 29px,transparent 29px 56px),linear-gradient(to top,rgba(4,13,22,.98),rgba(8,21,34,.36),transparent);animation:oq-water-breathe 24s ease-in-out infinite}.cityscape-background:after{left:6%;right:6%;bottom:27%;height:86px;background:linear-gradient(100deg,transparent 0 10%,rgba(29,41,54,.92) 10.4% 25%,transparent 25.4% 32%,rgba(29,41,54,.82) 32.4% 45%,transparent 45.4% 56%,rgba(29,41,54,.9) 56.4% 75%,transparent 75.4%),linear-gradient(90deg,transparent,rgba(230,236,245,.16),rgba(0,229,255,.34),rgba(230,236,245,.12),transparent);clip-path:polygon(0 58%,9% 58%,9% 36%,23% 36%,23% 58%,38% 58%,38% 40%,52% 40%,52% 58%,67% 58%,67% 34%,81% 34%,81% 58%,100% 58%,100% 64%,0 64%);filter:drop-shadow(0 0 26px rgba(0,229,255,.16));animation:oq-shipping-lane-glide 22s ease-in-out infinite}.bridge-silhouette,.bridge-cable,.bridge-tower,.bridge-light,.boulevard{display:none!important}.skyline{position:absolute;inset:auto 0 0;display:block;height:76%}.building{position:absolute;display:block;pointer-events:none}.building.one,.building.five,.building.eight{z-index:2;border:1px solid rgba(230,236,245,.1);background:repeating-linear-gradient(90deg,rgba(230,236,245,.12) 0 2px,transparent 2px 18px),linear-gradient(180deg,#1f2b38eb,#0a121df5);box-shadow:0 0 24px #00e5ff14,inset 0 1px #ffffff0d}.building.one{left:5%;right:7%;bottom:25%;height:16px;border-radius:999px}.building.five{left:49%;bottom:25%;width:18px;height:144px;border-radius:999px 999px 0 0}.building.eight{right:17%;bottom:25%;width:16px;height:118px;border-radius:999px 999px 0 0}.building.two,.building.six,.building.seven{z-index:3;height:34px;border:1px solid rgba(230,236,245,.16);border-radius:999px 22px 24px 999px;background:linear-gradient(90deg,#e6ecf533,#00e5ff29 16%,#0a1624eb 72%),#080f1bf0;box-shadow:0 0 30px #00e5ff24,0 16px 42px #00000042}.building.two:before,.building.six:before,.building.seven:before{position:absolute;left:24px;top:7px;width:36px;height:13px;content:"";border-radius:4px;background:repeating-linear-gradient(90deg,#00e5ff47 0,#00e5ff47 6px,#e6ecf51f 6px,#e6ecf51f 12px),#e6ecf517}.building.two:after,.building.six:after{position:absolute;right:18px;top:-9px;width:18px;height:24px;content:"";border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#f5fbff3d,#00e5ff1a);box-shadow:0 0 20px #00e5ff2e}.building.two{left:18%;bottom:33%;width:168px;transform:rotate(-2deg)}.building.six{right:21%;bottom:38%;width:132px;height:30px;transform:rotate(2deg);opacity:.88}.building.seven{left:58%;bottom:21%;width:92px;height:22px;transform:rotate(-7deg);opacity:.78}.building.three,.building.four{z-index:3;width:58px;height:90px;border-left:4px solid rgba(0,229,255,.22);border-bottom:4px solid rgba(0,229,255,.18);opacity:.78}.building.three:before,.building.four:before{position:absolute;left:-3px;top:12px;width:76px;height:3px;content:"";background:linear-gradient(90deg,rgba(0,229,255,.5),transparent);transform:rotate(-12deg);transform-origin:left center;box-shadow:0 0 18px #00e5ff2e}.building.three:after,.building.four:after{position:absolute;right:-19px;top:15px;width:1px;height:34px;content:"";background:#e6ecf547}.building.three{left:33%;bottom:25%}.building.four{right:28%;bottom:25%;transform:scaleX(-1)}.building.nine{right:8%;bottom:27%;z-index:4;width:42px;height:92px;border:1px solid rgba(230,236,245,.18);border-radius:18px 18px 7px 7px;background:linear-gradient(90deg,transparent 38%,rgba(0,229,255,.26) 39% 61%,transparent 62%),repeating-linear-gradient(0deg,#f5fbff38 0,#f5fbff38 12px,#070b148a 12px,#070b148a 20px),linear-gradient(180deg,#f5fbff29,#00e5ff17,#070b14cc);box-shadow:0 0 34px #00e5ff33}.building.nine:before{position:absolute;left:50%;top:-18px;width:56px;height:20px;content:"";border-radius:999px;background:#f5fbff2e;box-shadow:0 0 24px #f5fbff70,0 0 62px #00e5ff52;transform:translate(-50%)}.building.nine:after{position:absolute;right:38px;top:-8px;width:250px;height:68px;content:"";background:linear-gradient(270deg,rgba(245,251,255,.28),rgba(0,229,255,.08),transparent 78%);clip-path:polygon(100% 43%,0 0,0 100%,100% 57%);opacity:.6;animation:oq-lighthouse-sweep-wide 16s ease-in-out infinite}.city-streetlight{position:absolute;bottom:22%;width:6px;height:6px;border-radius:999px;background:var(--oq-lighthouse);box-shadow:0 0 18px #f5fbffbf,0 0 42px #00e5ff66;animation:oq-harbour-light 7s ease-in-out infinite}.city-streetlight:before{position:absolute;left:50%;top:50%;width:96px;height:1px;content:"";border-radius:999px;background:linear-gradient(90deg,rgba(245,251,255,.48),transparent);transform:translateY(-50%);transform-origin:left center;animation:oq-lighthouse-sweep 14s ease-in-out infinite}.city-streetlight.left-one{left:13%}.city-streetlight.left-two{left:29%;opacity:.72;animation-delay:-2s}.city-streetlight.right-one{right:13%;animation-delay:-4s}.city-streetlight.right-two{right:29%;opacity:.72;animation-delay:-6s}@keyframes oq-lighthouse-sweep-wide{0%,to{opacity:.22;transform:rotate(-5deg) scaleX(.74)}48%,56%{opacity:.62;transform:rotate(7deg) scaleX(1)}}@keyframes oq-shipping-lanes{0%{background-position:0 0,0 0,0 0,0 0,0 0,0 0}to{background-position:0 0,0 0,42px 18px,-36px 22px,92px 92px,92px 92px}}@keyframes oq-harbour-reflection{0%,to{opacity:.68;transform:translate(-1.5%)}50%{opacity:1;transform:translate(1.5%)}}@keyframes oq-water-breathe{0%,to{opacity:.72;transform:translateY(0)}50%{opacity:.92;transform:translateY(5px)}}@keyframes oq-shipping-lane-glide{0%,to{opacity:.52;transform:translate(-2%)}50%{opacity:.88;transform:translate(2%)}}@keyframes oq-harbour-light{0%,to{opacity:.58;transform:scale(.92)}48%,56%{opacity:1;transform:scale(1)}}@keyframes oq-lighthouse-sweep{0%,to{opacity:.24;transform:translateY(-50%) scaleX(.52)}50%{opacity:.72;transform:translateY(-50%) scaleX(1)}}@media (max-width: 900px){.cityscape-background{height:42vh;opacity:.72}}@media (max-width: 640px){.cityscape-background{height:34vh;opacity:.58}.city-streetlight.left-one,.city-streetlight.right-one{display:none}}@media (prefers-reduced-motion: reduce){.city-grid,.city-glow:before,.cityscape-background:before,.cityscape-background:after,.building.nine:after,.city-streetlight,.city-streetlight:before{animation:none!important}}