html,body{
  margin:0;
  height:100%;
  background:#0b0b0f;
  font-family:system-ui;
  overflow:hidden;
}

.view{display:none;height:100vh}
.view.active{display:block}

.screen{
  color:white;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  font-size:22px;
}

#map{
  color:white;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}

.tabbar{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:12px;
  padding:10px;
  border-radius:30px;
  backdrop-filter:blur(20px);
}

.tabbtn{
  width:70px;
  height:60px;
  display:flex;
  justify-content:center;
  align-items:center;
  color:white;
  z-index:2;
  cursor:pointer;
  font-size:22px;
}

.indicator{
  position:absolute;
  width:70px;
  height:60px;
  border-radius:20px;
  background:rgba(255,255,255,0.18);
  backdrop-filter:blur(20px);
  transition:transform .45s cubic-bezier(0.2,0.9,0.2,1);
  z-index:1;
}