:root {
  --mint:#bff5d0;
  --mint2:#7ce6ad;
  --glass:#dce9df;
  --deep:#052117;
  --black:#020706;
  --line:#88ffbf;
  --panel:#07110ee8
}
* {
  box-sizing:border-box
}
html,body {
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#020706;
  color:#eafff1;
  font-family:'Manrope',Arial,sans-serif
}
button {
  font:inherit
}
.city-shell {
  position:relative;
  width:100vw;
  height:100svh;
  overflow:hidden;
  background:radial-gradient(circle at 50% 45%,#133b2a 0,#06150f 30%,#010303 72%);
  isolation:isolate
}
.city-header {
  position:absolute;
  z-index:90;
  left:0;
  right:0;
  top:0;
  height:76px;
  display:grid;
  grid-template-columns:310px 1fr auto;
  align-items:center;
  background:#03100ddb;
  border-bottom:1px solid #baffd74a;
  backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 16px 50px #0008
}
.logo {
  height:76px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:0 23px;
  border:0;
  border-right:1px solid #baffd733;
  background:transparent;
  color:#fff;
  text-align:left
}
.logo>span {
  display:grid;
  place-items:center;
  width:45px;
  height:45px;
  border-radius:14px 14px 14px 5px;
  background:linear-gradient(145deg,#f3faf5,#9eb8a9);
  border:3px double #183c2b;
  box-shadow:inset 5px 5px 12px #fff,0 0 20px #77ffaf55;
  color:#0a2418;
  font:800 28px 'Manrope',sans-serif
}
.logo>b {
  font-size:20px;
  letter-spacing:.13em
}
.logo small {
  display:block;
  margin-top:3px;
  color:#7e9e8e;
  font:400 7px 'Space Mono',monospace;
  letter-spacing:.05em
}
.coordinates {
  justify-self:center;
  font:700 8px 'Space Mono',monospace;
  letter-spacing:.12em;
  color:#a8c0b4
}
.coordinates i {
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:8px;
  border-radius:50%;
  background:#8cffb7;
  box-shadow:0 0 14px #8cffb7;
  animation:blink 1.4s step-end infinite
}
.coordinates span {
  margin-left:15px;
  color:#597267
}
.city-header nav {
  align-self:stretch;
  display:flex
}
.city-header nav button {
  border:0;
  border-left:1px solid #baffd72b;
  background:transparent;
  color:#d7e9df;
  padding:0 17px;
  font:700 9px 'Space Mono',monospace;
  letter-spacing:.08em
}
.city-header nav button:hover {
  background:#d9eee1;
  color:#07110e
}
.city-header nav .buy {
  min-width:160px;
  background:var(--mint);
  color:#07150f
}
.map-viewport {
  position:absolute;
  z-index:1;
  inset:0;
  overflow:hidden;
  touch-action:none;
  cursor:grab
}
.map-viewport.dragging {
  cursor:grabbing
}
.moon-map {
  position:absolute;
  left:0;
  top:0;
  transform-origin:0 0;
  will-change:transform;
  user-select:none;
  transition:filter .6s
}
.moon-map>img {
  object-fit:cover;
  pointer-events:none
}
.city-vignette {
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 220px #0009;
  pointer-events:none
}
.city-shell.eclipse .moon-map {
  filter:brightness(.5) saturate(1.45) hue-rotate(8deg)
}
.city-shell.eclipse:after {
  content:'';
  position:absolute;
  z-index:3;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 64% 19%,#d8ffe9 0 1%,#8dffc022 2% 9%,transparent 19%);
  mix-blend-mode:screen
}
.stars {
  position:absolute;
  inset:0;
  pointer-events:none
}
.stars i {
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:#d7ffe7;
  box-shadow:0 0 7px #b8ffd3;
  animation:twinkle 2.3s ease-in-out infinite alternate
}
.transit-lines {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  filter:drop-shadow(0 0 7px #65ffad)
}
.transit-lines path {
  fill:none;
  stroke:#a3ffca;
  stroke-width:3;
  stroke-dasharray:8 18;
  opacity:.85;
  animation:dash 4s linear infinite
}
.light-tower {
  position:absolute;
  display:grid;
  place-items:center;
  border-radius:36% 36% 36% 12%;
  background:linear-gradient(145deg,#eff8f2d9,#9eb6a8bb);
  border:3px double #123b29;
  box-shadow:inset 3px 3px 8px #fff,0 0 18px #6bffacaa;
  color:#0b3322;
  font:800 16px 'Manrope',sans-serif;
  pointer-events:none;
  animation:towerPulse 2.8s ease-in-out infinite
}
.district-pin {
  position:absolute;
  z-index:8;
  width:52px;
  height:52px;
  transform:translate(-50%,-50%);
  border:0;
  border-radius:50%;
  background:#06100dcc;
  color:#eafff2;
  box-shadow:0 0 0 1px #baffd777,0 0 0 8px #07150d99,0 0 34px var(--pin);
  text-align:left
}
.district-pin>i {
  position:absolute;
  inset:13px;
  border-radius:50%;
  background:var(--pin);
  box-shadow:0 0 18px var(--pin);
  animation:pinPulse 1.4s ease-in-out infinite
}
.district-pin>span {
  position:absolute;
  left:64px;
  top:-9px;
  color:var(--pin);
  font:700 8px 'Space Mono',monospace;
  white-space:nowrap
}
.district-pin>b {
  position:absolute;
  left:64px;
  top:7px;
  padding:5px 7px;
  background:#020807db;
  border:1px solid #baffd743;
  color:#fff;
  font:800 12px 'Manrope',sans-serif;
  letter-spacing:.05em;
  white-space:nowrap
}
.district-pin>small {
  position:absolute;
  left:64px;
  top:34px;
  color:#a1b8ab;
  font:400 6px 'Space Mono',monospace;
  white-space:nowrap
}
.district-pin:hover,.district-pin.active {
  z-index:15;
  transform:translate(-50%,-50%) scale(1.22)
}
.district-pin.active {
  background:#dfffe9;
  color:#03100a
}
.district-pin.active>i {
  background:#fff
}
.hover-pod {
  position:absolute;
  z-index:7;
  color:#d9ffe8;
  font-size:13px;
  text-shadow:0 0 12px #8cffb6;
  animation:podFly 14s linear infinite
}
.pod-one {
  left:18%;
  top:61%
}
.pod-two {
  left:74%;
  top:32%;
  animation-duration:19s;
  animation-delay:-6s
}
.pod-three {
  left:51%;
  top:83%;
  animation-duration:11s;
  animation-delay:-3s
}
.welcome-card {
  position:absolute;
  z-index:40;
  left:4.2%;
  top:14%;
  width:min(440px,36vw);
  padding:26px 28px 28px;
  background:#06110ee5;
  border:1px solid #c4ffda66;
  box-shadow:0 30px 90px #000b,inset 0 0 50px #a5ffca0c;
  backdrop-filter:blur(16px)
}
.welcome-card:before {
  content:'';
  position:absolute;
  left:-6px;
  top:26px;
  bottom:26px;
  width:6px;
  background:linear-gradient(#e7fff0,#65e99d)
}
.welcome-card>p {
  margin:0;
  color:#96b5a4;
  font:700 8px 'Space Mono',monospace;
  letter-spacing:.15em
}
.welcome-card h1 {
  margin:19px 0 0;
  font:800 clamp(55px,6.6vw,105px)/.72 'Manrope',sans-serif;
  letter-spacing:-.09em
}
.welcome-card h1 span {
  color:var(--mint);
  text-shadow:0 0 28px #81ffb76b
}
.welcome-card h2 {
  margin:25px 0 20px;
  font-size:18px;
  line-height:1.05;
  letter-spacing:.04em
}
.welcome-card>div {
  padding:13px 0;
  border-top:1px solid #c6ffdb33;
  border-bottom:1px solid #c6ffdb33;
  color:#8ea99a;
  font:400 8px/1.7 'Space Mono',monospace
}
.welcome-card>div b {
  color:#fff
}
.welcome-card>button {
  width:100%;
  margin-top:19px;
  padding:13px;
  border:1px solid var(--mint);
  background:var(--mint);
  color:#04120b;
  font:700 9px 'Space Mono',monospace
}
.district-drawer {
  position:absolute;
  z-index:60;
  right:18px;
  top:94px;
  bottom:68px;
  width:390px;
  display:flex;
  flex-direction:column;
  background:#06100eef;
  border:1px solid #b8ffd453;
  box-shadow:0 28px 90px #000c;
  backdrop-filter:blur(18px);
  transform:translateX(calc(100% + 35px));
  transition:transform .45s cubic-bezier(.2,.8,.2,1)
}
.district-drawer.open {
  transform:translateX(0)
}
.drawer-close {
  position:absolute;
  z-index:3;
  right:10px;
  top:10px;
  width:35px;
  height:35px;
  border:1px solid #c4ffda75;
  background:#06100ed9;
  color:#fff;
  font-size:23px
}
.drawer-image {
  position:relative;
  height:220px;
  flex:0 0 auto;
  overflow:hidden
}
.drawer-image img {
  object-fit:cover;
  transition:transform 7s ease
}
.district-drawer:hover .drawer-image img {
  transform:scale(1.08)
}
.drawer-image:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#06100e,transparent 55%)
}
.drawer-copy {
  padding:8px 25px 24px;
  overflow:auto
}
.drawer-copy>p {
  color:#92bca5;
  font:700 7px 'Space Mono',monospace;
  letter-spacing:.13em
}
.drawer-copy h2 {
  margin:13px 0 8px;
  font-size:35px;
  line-height:.9;
  letter-spacing:-.045em
}
.drawer-copy>span {
  display:inline-block;
  padding:5px 7px;
  background:#c9ffdd;
  color:#06120b;
  font:700 7px 'Space Mono',monospace
}
.drawer-copy blockquote {
  margin:21px 0;
  font-size:15px;
  line-height:1.45;
  color:#ccded4
}
.drawer-copy>.buy-link {
  width:100%;
  padding:12px;
  border:1px solid #baffd7;
  background:transparent;
  color:#c9ffdd;
  font:700 8px 'Space Mono',monospace
}
.drawer-copy>.buy-link:hover {
  background:#c9ffdd;
  color:#05120b
}
.drawer-copy small {
  display:block;
  margin-top:15px;
  color:#658072;
  font:400 6px/1.5 'Space Mono',monospace
}
.zoom-controls {
  position:absolute;
  z-index:70;
  left:22px;
  bottom:75px;
  display:flex;
  flex-direction:column;
  background:#06100edb;
  border:1px solid #baffd744
}
.zoom-controls button {
  width:44px;
  height:44px;
  border:0;
  border-bottom:1px solid #baffd733;
  background:transparent;
  color:#dfffea;
  font-size:22px
}
.zoom-controls button:hover {
  background:#dfffea;
  color:#06100e
}
.mode-controls {
  position:absolute;
  z-index:70;
  left:82px;
  bottom:75px;
  display:flex;
  gap:7px
}
.mode-controls button {
  height:34px;
  padding:0 10px;
  border:1px solid #baffd744;
  background:#06100edb;
  color:#bcd2c6;
  font:700 7px 'Space Mono',monospace
}
.mini-map {
  position:absolute;
  z-index:70;
  right:430px;
  bottom:74px;
  width:195px;
  padding:6px;
  background:#06100ee6;
  border:1px solid #baffd744
}
.mini-map>div {
  position:relative;
  height:92px;
  overflow:hidden
}
.mini-map img {
  object-fit:cover;
  opacity:.7
}
.mini-map i {
  position:absolute;
  width:18%;
  height:28%;
  border:1px solid #dfffea;
  box-shadow:0 0 9px #7dffb5;
  transition:left .2s,top .2s
}
.mini-map>span {
  display:block;
  padding:5px 2px 0;
  color:#799588;
  font:400 6px 'Space Mono',monospace
}
.city-ticker {
  position:absolute;
  z-index:80;
  left:0;
  right:0;
  bottom:0;
  height:50px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  background:#04100ddf;
  border-top:1px solid #baffd744;
  font:400 7px 'Space Mono',monospace;
  letter-spacing:.08em
}
.city-ticker b {
  height:49px;
  display:grid;
  place-items:center;
  padding:0 22px;
  background:var(--mint);
  color:#06120c
}
.city-ticker span {
  padding:0 22px;
  color:#91aa9d;
  white-space:nowrap;
  overflow:hidden
}
.toast {
  position:absolute;
  z-index:120;
  left:50%;
  bottom:70px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:12px;
  width:min(620px,calc(100% - 30px));
  padding:13px;
  background:#07120ff2;
  border:1px solid #c3ffda;
  color:#dffff0;
  box-shadow:0 12px 45px #000
}
.toast b {
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  border-radius:10px 10px 10px 3px;
  background:#dffff0;
  color:#082015
}
.toast span {
  font:700 8px 'Space Mono',monospace
}


/* Social artwork */
.social-art {
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;
  background:#020605;
  color:#fff
}
.social-art>img {
  object-fit:cover
}
.social-art:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#020706ee 0 31%,#020706aa 44%,transparent 72%),linear-gradient(0deg,#0009,transparent 50%)
}
.social-copy {
  position:absolute;
  z-index:2;
  left:4.5%;
  top:12%
}
.social-copy p {
  margin:0;
  color:#a0c6b1;
  font:700 8px 'Space Mono',monospace;
  letter-spacing:.16em
}
.social-copy h1 {
  margin:22px 0 0;
  font:800 105px/.72 'Manrope',sans-serif;
  letter-spacing:-.085em
}
.social-copy h1 span {
  display:block;
  color:var(--mint);
  text-shadow:0 0 24px #70ffad66
}
.social-copy h2 {
  margin:33px 0 0;
  font:700 17px 'Space Mono',monospace
}
.social-status {
  position:absolute;
  z-index:3;
  right:3%;
  top:8%;
  padding:13px;
  background:#05140fd9;
  border:1px solid #c7ffdc;
  box-shadow:0 0 30px #84ffb657;
  font:700 9px/1.6 'Space Mono',monospace
}
.social-status b {
  color:var(--mint)
}
.social-footer {
  position:absolute;
  z-index:4;
  left:0;
  right:0;
  bottom:0;
  padding:9px 4%;
  background:#c9ffdc;
  color:#06110c;
  font:700 8px 'Space Mono',monospace;
  letter-spacing:.13em
}
.avatar-art>img {
  object-fit:cover
}
.avatar-art:after {
  background:radial-gradient(circle,transparent 34%,#02070666 72%,#020706 100%)
}
.avatar-logo {
  position:absolute;
  z-index:3;
  left:50%;
  bottom:6%;
  transform:translateX(-50%);
  padding:9px 18px;
  background:#06100edb;
  border:2px solid #d6ffe5;
  box-shadow:0 0 35px #78ffb770;
  font:800 58px/.85 'Manrope',sans-serif;
  letter-spacing:-.07em;
  white-space:nowrap
}
.avatar-logo span {
  color:var(--mint)
}


@keyframes blink {
  50% {
    opacity:.25
  }
}
@keyframes twinkle {
  to {
    opacity:.2;
    transform:scale(.5)
  }
}
@keyframes dash {
  to {
    stroke-dashoffset:-52
  }
}
@keyframes towerPulse {
  50% {
    box-shadow:inset 3px 3px 8px #fff,0 0 28px #6bffacdd;
    filter:brightness(1.2)
  }
}
@keyframes pinPulse {
  50% {
    transform:scale(.65);
    opacity:.55
  }
}
@keyframes podFly {
  from {
    transform:translate(-280px,160px)
  }
  to {
    transform:translate(950px,-380px)
  }
}

@media(max-width:1000px) {
  .city-header {
    grid-template-columns:230px 1fr auto
  }
  .logo {
    padding:0 15px
  }
  .coordinates span {
    display:none
  }
  .city-header nav button {
    padding:0 11px
  }
  .city-header nav .buy {
    min-width:125px
  }
  .welcome-card {
    width:410px
  }
  .mini-map {
    right:18px
  }
  .district-drawer {
    width:350px
  }
}

@media(max-width:700px) {
  .city-header {
    height:62px;
    grid-template-columns:110px 1fr
  }
  .logo {
    height:62px;
    padding:0 8px;
    gap:6px
  }
  .logo>span {
    width:34px;
    height:34px;
    font-size:21px;
    border-radius:10px 10px 10px 3px
  }
  .logo>b {
    font-size:11px;
    letter-spacing:.04em
  }
  .logo small {
    display:none
  }
  .coordinates {
    display:none
  }
  .city-header nav {
    justify-content:flex-end
  }
  .city-header nav button {
    padding:0 8px;
    font-size:6px
  }
  .city-header nav .buy {
    min-width:89px;
    font-size:6px
  }
  .welcome-card {
    left:13px;
    right:13px;
    top:82px;
    width:auto;
    padding:20px 21px
  }
  .welcome-card h1 {
    font-size:62px
  }
  .welcome-card h2 {
    font-size:14px
  }
  .district-drawer {
    left:8px;
    right:8px;
    top:auto;
    bottom:57px;
    width:auto;
    height:46vh;
    display:grid;
    grid-template-columns:42% 58%;
    transform:translateY(calc(100% + 65px))
  }
  .district-drawer.open {
    transform:translateY(0)
  }
  .drawer-image {
    height:100%
  }
  .drawer-copy {
    padding:18px 16px
  }
  .drawer-copy h2 {
    font-size:25px
  }
  .drawer-copy blockquote {
    font-size:12px;
    margin:13px 0
  }
  .drawer-copy>.buy-link {
    font-size:6px;
    padding:9px
  }
  .drawer-copy small {
    display:none
  }
  .drawer-close {
    right:7px;
    top:7px
  }
  .zoom-controls {
    left:10px;
    bottom:61px
  }
  .zoom-controls button {
    width:38px;
    height:38px
  }
  .mode-controls {
    left:58px;
    bottom:61px;
    display:grid;
    gap:4px
  }
  .mode-controls button {
    height:27px;
    font-size:5px
  }
  .mini-map {
    right:9px;
    bottom:61px;
    width:126px
  }
  .mini-map>div {
    height:60px
  }
  .city-ticker {
    height:46px
  }
  .city-ticker b {
    height:45px;
    padding:0 10px;
    font-size:5px
  }
  .city-ticker span {
    padding:0 10px;
    font-size:5px
  }
  .district-pin {
    width:45px;
    height:45px
  }
  .district-pin>b {
    font-size:10px
  }
  .district-pin>small {
    font-size:5px
  }
  .toast {
    bottom:60px
  }
  .social-copy h1 {
    font-size:74px
  }
  .avatar-logo {
    font-size:39px
  }
}

/* Diegetic city controls: no conventional navigation bar */

.city-seal {
  position:absolute;
  z-index:92;
  left:22px;
  top:21px;
  display:grid;
  grid-template-columns:58px auto;
  grid-template-rows:1fr 1fr;
  width:190px;
  height:68px;
  padding:5px 12px 5px 5px;
  border:0;
  background:transparent;
  color:#effff5;
  text-align:left;
  filter:drop-shadow(0 14px 20px #000c)
}
.city-seal>span {
  grid-row:1/3;
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  border-radius:20px 20px 20px 7px;
  background:linear-gradient(145deg,#f8fff9,#91ad9e);
  border:5px double #173c2b;
  box-shadow:inset 7px 7px 13px #fff,0 0 25px #80ffb978;
  color:#092218;
  font-size:33px;
  font-weight:800
}
.city-seal>b {
  align-self:end;
  margin-left:10px;
  font-size:14px;
  letter-spacing:.13em
}
.city-seal>small {
  margin:2px 0 0 10px;
  color:#83a493;
  font:400 6px 'Space Mono',monospace
}
.city-seal:hover>span {
  transform:rotate(-5deg) scale(1.06)
}

.orbital-socials {
  position:absolute;
  z-index:92;
  right:24px;
  top:20px;
  display:flex;
  gap:22px
}
.orbital-socials .orbital-link {
  position:relative;
  width:72px;
  height:72px;
  border:0;
  background:transparent;
  color:#effff6
}
.orbital-socials .orbital-link>i {
  position:absolute;
  left:50%;
  top:3px;
  transform:translateX(-50%);
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  background:radial-gradient(circle at 35% 28%,#effff6,#789c8a 64%,#113c29);
  border:2px solid #d9ffe8;
  border-radius:50%;
  box-shadow:0 0 22px #83ffb773;
  font-style:normal
}
.orbital-socials .orbital-link>i b {
  font:700 14px 'Space Mono',monospace
}
.orbital-socials .orbital-link>span {
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  font:700 5px 'Space Mono',monospace;
  letter-spacing:.08em;
  white-space:nowrap;
  opacity:.75
}
.x-satellite:before,.x-satellite:after {
  content:'';
  position:absolute;
  z-index:-1;
  top:18px;
  width:25px;
  height:18px;
  background:repeating-linear-gradient(90deg,#7effb8 0 5px,#0a3927 5px 8px);
  border:1px solid #c9ffe0
}
.x-satellite:before {
  left:-2px
}
.x-satellite:after {
  right:-2px
}
.telegram-dish>i {
  border-radius:50% 50% 50% 8%!important;
  transform:translateX(-50%) rotate(-28deg)!important
}
.telegram-dish:before {
  content:'';
  position:absolute;
  left:50%;
  top:-4px;
  width:2px;
  height:34px;
  background:#d9ffe8;
  transform:rotate(22deg);
  transform-origin:bottom
}
.orbital-socials .orbital-link:hover>i {
  animation:objectBounce .45s ease
}

.welcome-signal {
  position:absolute;
  z-index:38;
  left:5%;
  top:13%;
  width:min(560px,42vw);
  pointer-events:none;
  filter:drop-shadow(0 18px 35px #000c)
}
.welcome-signal>p {
  margin:0 0 16px;
  color:#b9d7c7;
  font:700 7px 'Space Mono',monospace;
  letter-spacing:.22em
}
.welcome-signal h1 {
  margin:0;
  font:800 clamp(70px,8vw,132px)/.68 'Manrope',sans-serif;
  letter-spacing:-.105em;
  text-shadow:0 8px 35px #000
}
.welcome-signal h1 span {
  display:block;
  color:var(--mint);
  text-shadow:0 0 34px #67ffad77
}
.welcome-signal h2 {
  margin:29px 0 0;
  font-size:18px;
  line-height:1.05;
  letter-spacing:.06em
}
.portal-button {
  position:absolute;
  left:365px;
  top:205px;
  width:128px;
  height:128px;
  border:0;
  background:transparent;
  color:#eafff2;
  pointer-events:auto
}
.portal-button>i {
  display:grid;
  place-items:center;
  width:92px;
  height:92px;
  margin:auto;
  border-radius:34px 34px 34px 10px;
  background:linear-gradient(145deg,#edf8f0dd,#9ab5a6c9);
  border:7px double #0d3f29;
  box-shadow:inset 10px 10px 18px #fff,0 0 0 7px #05140eba,0 0 46px #6affacbb;
  color:#0b2b1e;
  font-style:normal;
  font-size:51px;
  font-weight:800;
  animation:portalHover 3s ease-in-out infinite
}
.portal-button>span {
  display:block;
  margin-top:8px;
  font:700 7px/1.2 'Space Mono',monospace;
  letter-spacing:.1em
}
.gesture-notes {
  display:flex;
  gap:8px;
  margin-top:115px
}
.gesture-notes span {
  padding:7px 9px;
  border:1px solid #aaffca55;
  border-radius:20px;
  background:#06120b88;
  color:#bdd4c8;
  font:400 6px 'Space Mono',monospace;
  backdrop-filter:blur(8px)
}

.launch-pad {
  position:absolute;
  z-index:75;
  right:28px;
  bottom:27px;
  width:178px;
  height:126px;
  padding:16px 12px 13px 75px;
  border:0;
  border-radius:50% 18px 18px 50%;
  background:linear-gradient(145deg,#eff9f2e8,#9db7a9e0);
  box-shadow:inset 8px 8px 18px #fff,0 0 0 4px #0b3c27,0 18px 45px #000b,0 0 34px #7dffb577;
  color:#082318;
  text-align:left;
  transition:transform .25s,opacity .25s
}
.launch-pad:before {
  content:'';
  position:absolute;
  left:10px;
  top:14px;
  width:54px;
  height:82px;
  border:8px solid #0d4b30;
  border-radius:50%;
  box-shadow:inset 0 0 15px #6fffb0
}
.launch-pad>i {
  position:absolute;
  left:27px;
  top:39px;
  font-style:normal;
  font-size:27px;
  animation:rocketNudge 1.8s ease-in-out infinite
}
.launch-pad>span,.launch-pad>small {
  display:block;
  font:700 6px 'Space Mono',monospace;
  letter-spacing:.1em
}
.launch-pad>b {
  display:block;
  margin:3px 0;
  font-size:23px;
  letter-spacing:-.04em
}
.launch-pad:hover {
  transform:translateY(-6px) rotate(-2deg)
}
.district-open .launch-pad {
  opacity:0;
  pointer-events:none;
  transform:translateY(20px)
}

.zoom-totem {
  position:absolute;
  z-index:73;
  right:30px;
  top:42%;
  display:grid;
  grid-template-columns:55px 35px;
  grid-template-rows:35px 35px;
  width:92px;
  height:76px;
  padding:3px;
  background:linear-gradient(145deg,#e6f2e9d9,#8aa998c7);
  border:4px double #173e2b;
  border-radius:28px 28px 28px 8px;
  box-shadow:inset 5px 5px 10px #fff,0 12px 25px #0009
}
.zoom-totem>span {
  grid-row:1/3;
  display:grid;
  place-items:center;
  color:#0b2e20;
  font-size:32px;
  font-weight:800
}
.zoom-totem button {
  border:0;
  border-left:1px solid #173e2b66;
  background:transparent;
  color:#0a2a1d;
  font-size:20px;
  font-weight:800
}
.zoom-totem button:first-of-type {
  border-bottom:1px solid #173e2b66
}
.zoom-totem button:hover {
  background:#ecfff3
}
.moon-tools {
  position:absolute;
  z-index:72;
  left:224px;
  bottom:25px;
  display:flex;
  gap:12px
}
.moon-tools button {
  width:67px;
  height:67px;
  display:grid;
  place-content:center;
  border:2px solid #9dc2ad77;
  border-radius:48% 52% 43% 57%;
  background:radial-gradient(circle at 35% 25%,#496457dd,#14291fdd 65%,#06110c);
  box-shadow:inset 4px 5px 8px #a8c5b43d,0 10px 25px #0009;
  color:#d7eadd
}
.moon-tools button:nth-child(2) {
  transform:rotate(8deg)
}
.moon-tools i {
  font-style:normal;
  font-size:18px
}
.moon-tools span {
  font:700 5px 'Space Mono',monospace;
  letter-spacing:.06em
}
.moon-tools button:hover {
  filter:brightness(1.35)
}

.radar-stone {
  position:absolute;
  z-index:70;
  left:22px;
  bottom:20px;
  width:182px;
  height:128px;
  padding:9px;
  background:#07130ee6;
  border:1px solid #baffd744;
  border-radius:48% 52% 15px 15px;
  box-shadow:inset 0 0 25px #7dffb511,0 14px 35px #000a
}
.radar-stone>div {
  position:relative;
  width:112px;
  height:74px;
  overflow:hidden;
  border-radius:42% 58% 45% 55%;
  border:1px solid #aaffc866
}
.radar-stone img {
  object-fit:cover;
  opacity:.65
}
.radar-stone>div>i {
  position:absolute;
  width:18%;
  height:28%;
  border:1px solid #effff5;
  box-shadow:0 0 8px #80ffb7
}
.radar-stone>span {
  position:absolute;
  right:7px;
  top:20px;
  color:#8dac9c;
  font:400 5px/1.4 'Space Mono',monospace
}
.radar-stone>small {
  position:absolute;
  right:15px;
  bottom:17px;
  color:#dffff0;
  font:700 10px 'Space Mono',monospace
}
.district-drawer {
  top:18px;
  bottom:18px
}
.toast {
  bottom:28px
}

@keyframes portalHover {
  50% {
    transform:translateY(-8px) rotate(2deg);
    box-shadow:inset 10px 10px 18px #fff,0 0 0 7px #05140eba,0 0 65px #6affacdd
  }
}
@keyframes rocketNudge {
  50% {
    transform:translate(5px,-7px)
  }
}
@keyframes objectBounce {
  50% {
    transform:translateX(-50%) translateY(-6px) rotate(5deg)
  }
}

@media(max-width:1000px) {
  .welcome-signal {
    width:480px
  }
  .portal-button {
    left:325px
  }
  .district-drawer {
    width:350px
  }
  .launch-pad {
    right:22px
  }
  .radar-stone {
    left:16px
  }
  .moon-tools {
    left:210px
  }
}

@media(max-width:700px) {
  .city-seal {
    left:8px;
    top:9px;
    width:58px;
    height:58px;
    padding:0;
    display:block
  }
  .city-seal>span {
    width:52px;
    height:52px;
    font-size:29px
  }
  .city-seal>b,.city-seal>small {
    display:none
  }
  .orbital-socials {
    right:7px;
    top:8px;
    gap:6px
  }
  .orbital-socials .orbital-link {
    width:57px;
    height:58px
  }
  .orbital-socials .orbital-link>i {
    width:39px;
    height:39px
  }
  .orbital-socials .orbital-link>span {
    font-size:4px
  }
  .x-satellite:before,.x-satellite:after {
    top:15px;
    width:18px;
    height:13px
  }
  .welcome-signal {
    left:16px;
    right:16px;
    top:11%;
    width:auto
  }
  .welcome-signal>p {
    font-size:5px
  }
  .welcome-signal h1 {
    font-size:72px
  }
  .welcome-signal h2 {
    margin-top:19px;
    font-size:13px
  }
  .portal-button {
    left:auto;
    right:6px;
    top:167px;
    width:100px;
    height:112px
  }
  .portal-button>i {
    width:73px;
    height:73px;
    border-radius:26px 26px 26px 8px;
    font-size:40px;
    border-width:5px
  }
  .gesture-notes {
    margin-top:120px;
    flex-wrap:wrap;
    max-width:220px
  }
  .gesture-notes span {
    font-size:4px;
    padding:5px 7px
  }
  .district-drawer {
    left:7px;
    right:7px;
    top:auto;
    bottom:7px;
    width:auto;
    height:51vh
  }
  .launch-pad {
    right:10px;
    bottom:10px;
    width:140px;
    height:104px;
    padding:12px 8px 10px 60px
  }
  .launch-pad:before {
    left:7px;
    top:12px;
    width:43px;
    height:65px;
    border-width:6px
  }
  .launch-pad>i {
    left:22px;
    top:32px;
    font-size:21px
  }
  .launch-pad>b {
    font-size:18px
  }
  .zoom-totem {
    right:9px;
    top:43%;
    transform:scale(.82);
    transform-origin:right center
  }
  .moon-tools {
    left:143px;
    bottom:10px;
    gap:5px
  }
  .moon-tools button {
    width:48px;
    height:48px
  }
  .moon-tools span {
    font-size:4px
  }
  .radar-stone {
    left:8px;
    bottom:7px;
    width:129px;
    height:95px;
    padding:6px
  }
  .radar-stone>div {
    width:80px;
    height:55px
  }
  .radar-stone>span {
    font-size:4px
  }
  .radar-stone>small {
    font-size:7px;
    bottom:11px
  }
  .district-open .radar-stone,.district-open .moon-tools,.district-open .zoom-totem {
    opacity:0;
    pointer-events:none
  }
  .toast {
    bottom:16px
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important
  }
}



/* External link elements */

.orbital-link,
.launch-pad,
.buy-link {
  cursor: pointer;
  text-decoration: none;
}

.orbital-link,
.buy-link {
  display: block;
}