*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  height:100%;
}

body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--color-neutral-161616);
  background:var(--color-white-ffffff);
  display:grid;
  place-items:center;
  padding:clamp(12px, 3vw, 24px);
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input{
  font:inherit;
}

.skip-link{
  position:absolute;
  left:var(--space-16);
  top:var(--space-16);
  padding:10px 12px;
  background:var(--color-white-ffffff);
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  transform:translateY(-200%);
  transition:transform .2s ease;
  z-index:40;
}

.skip-link:focus{
  transform:translateY(0);
}

.frame{
  width:min(100%, 1920px);
  aspect-ratio:1920 / 1007;
  position:relative;
  overflow:hidden;
  border-radius:24px;
  background:var(--color-white-ffffff);
  box-shadow:0 30px 90px rgba(0,0,0,.12);
}

.frame::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:url("./map.png");
  background-size:cover;
  background-position:center;
  transform:scale(var(--bg-zoom, 1));
  transform-origin:50% 50%;
  transition:transform 80ms linear;
  opacity:.86;
}

.frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:radial-gradient(circle at 50% 42%, rgba(255,255,255,.92), rgba(255,255,255,.65) 52%, rgba(255,255,255,.92) 100%);
  pointer-events:none;
}

.main,
.footer{
  position:absolute;
  inset:auto;
  z-index:2;
}

.navpill{
  position:absolute;
  left:42.265625%;
  top:2.532273%;
  width:15.572917%;
  height:5.660377%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  border-radius:999px;
  background:#FFFFFF;
  border:1px solid #CCCCCC;
  pointer-events:auto;
  z-index:20;
}

.navpill__link{
  font-weight:var(--font-weight-medium);
  font-size:clamp(13px, 1.05vw, 16px);
  color:rgba(0,0,0,.72);
}

.navpill__dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background:#FF08AD;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:0;
  font-weight:var(--font-weight-medium);
  border:1px solid transparent;
  cursor:pointer;
}

.btn--enter{
  position:absolute;
  left:93.567708%;
  top:2.532273%;
  width:4.739583%;
  height:5.660377%;
  border-radius:999px;
  background:linear-gradient(180deg, #76004F 0%, #DC0093 100%);
  border:1px solid #CCCCCC;
  color:var(--color-white-ffffff);
  font-size:clamp(13px, 1.05vw, 16px);
  box-shadow:none;
  pointer-events:auto;
  z-index:20;
}

.main{
  left:0;
  top:0;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  text-align:center;
  padding:0;
}

.hero__title{
  margin:0;
  font-weight:var(--font-weight-semibold);
  letter-spacing:-0.04em;
  line-height:0.95;
  font-size:clamp(44px, 5.6vw, 78px);
  color:#000000;
  transform:translateY(-2%);
  position:relative;
  z-index:2;
}

.cluster{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:10;
}

.bubble{
  position:absolute;
  width:clamp(46px, 4.15vw, 80px);
  height:clamp(46px, 4.15vw, 80px);
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--color-white-ffffff);
  border:3.19px solid var(--ring, #0095FF);
  box-shadow:0 10px 40px rgba(0,0,0,.12);
  transform:translate(-50%, -50%);
  padding:0;
  appearance:none;
  -webkit-appearance:none;
  cursor:grab;
  pointer-events:auto;
  touch-action:none;
  user-select:none;
  isolation:isolate;
  z-index:10;
}

.bubble:active{
  cursor:grabbing;
}

.bubble--halo::before,
.bubble--halo::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  border-radius:999px;
  background:rgba(160,218,249,.55);
  z-index:-1;
  pointer-events:none;
}

.bubble--halo::before{
  width:calc(100% * var(--halo2, 2.2));
  height:calc(100% * var(--halo2, 2.2));
  opacity:.5;
}

.bubble--halo::after{
  width:calc(100% * var(--halo1, 1.7));
  height:calc(100% * var(--halo1, 1.7));
  opacity:.55;
}

.bubble__img{
  width:calc(100% - 10px);
  height:calc(100% - 10px);
  border-radius:999px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, rgba(160,218,249,.45), rgba(255,8,173,.14));
  font-size:20px;
  overflow:hidden;
}

.bubble__photo{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

.meter{
  position:absolute;
  left:36.145833%;
  top:66.466137%;
  width:27.885260%;
  height:8.617145%;
  border-radius:999px;
  background:#F6F6F6;
  display:grid;
  place-items:center;
  z-index:3;
}

.meter__range{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

.meter__surface{
  width:100%;
  height:100%;
  position:relative;
}

.meter__track{
  position:absolute;
  left:6.538462%;
  right:6.538462%;
  top:50%;
  transform:translateY(-50%);
  height:calc(100% * 10.2102 / 86.7866);
  border-radius:999px;
  overflow:visible;
  background:#E8DEF8;
}

.meter__fill{
  position:absolute;
  inset:0 auto 0 0;
  width:var(--meter, 50%);
  border-radius:999px;
  background:linear-gradient(90deg, #FF08AD 0%, #450036 100%);
}

.meter__rest{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:#E8DEF8;
  z-index:-1;
}

.meter__thumb{
  position:absolute;
  top:50%;
  left:var(--meter, 50%);
  transform:translate(-50%, -50%);
  width:clamp(3px, 0.18vw, 4px);
  height:calc(100% * 28.078 / 86.7866);
  border-radius:999px;
  background:#6750A4;
}

.meter__dot{
  position:absolute;
  top:50%;
  right:0;
  transform:translate(50%, -50%);
  width:clamp(6px, 0.5vw, 8px);
  height:clamp(6px, 0.5vw, 8px);
  border-radius:999px;
  background:#4A4459;
}

.footer{
  left:0;
  bottom:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.brand{
  position:absolute;
  left:50%;
  bottom:7.5%;
  transform:translateX(-50%);
  color:rgba(0,0,0,.55);
  font-weight:var(--font-weight-medium);
}

.brand__name{
  letter-spacing:0.02em;
}

.footer__lgpd{
  position:absolute;
  left:50%;
  bottom:3%;
  transform:translateX(-50%);
  width:min(820px, 78%);
  margin:0;
  text-align:center;
  color:rgba(0,0,0,.35);
  font-size:clamp(10px, 0.75vw, 12px);
  line-height:1.35;
}

@media (max-width: 720px){
  body{
    padding:0;
    place-items:stretch;
  }
  .frame{
    width:100%;
    border-radius:0;
    box-shadow:none;
    aspect-ratio:auto;
    min-height:100svh;
  }
  .main{
    place-items:center;
  }
  .navpill{
    width:calc(100% - 24px);
    left:12px;
    top:12px;
    height:52px;
    gap:14px;
  }
  .btn--enter{
    top:74px;
    left:calc(100% - 12px);
    transform:translateX(-100%);
    width:120px;
    height:52px;
  }
  .meter{
    left:50%;
    top:74%;
    transform:translateX(-50%);
    width:min(560px, calc(100% - 24px));
    height:86px;
  }
  .footer__lgpd{
    width:calc(100% - 24px);
    bottom:14px;
    font-size:11px;
  }
}