*{margin:0;padding:0;box-sizing:border-box}

:root{
  --ink:#17191c;
  --mut:#9aa1a9;
  --sh:0 1px 2px rgba(18,22,30,.08),0 6px 16px rgba(18,22,30,.1);
}

body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f4f4f5;
  font-family:"Inter",sans-serif;
  -webkit-font-smoothing:antialiased;
}

button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit}

#meas{
  position:fixed;
  left:-9999px;
  top:0;
  visibility:hidden;
  white-space:nowrap;
  font-family:"Inter",sans-serif;
  line-height:1;
}

.card{
  position:relative;
  background:#fff;
  border-radius:16px;
  box-shadow:0 1px 2px rgba(18,22,30,.04),0 12px 32px rgba(18,22,30,.08);
  user-select:none;
}

.content{position:absolute;inset:0}
.content>*{position:absolute;left:0;top:0}

.av{
  border-radius:50%;
  object-fit:cover;
  background:#eaecef;
  z-index:2;
}

.ghw{display:block;z-index:3}
.ghw .gh,.ghw .fl{position:absolute;left:0;top:0}
.gh{display:block}
.fl{
  font-size:11px;
  font-weight:500;
  font-style:normal;
  line-height:1;
  color:var(--ink);
  white-space:nowrap;
}

.name{font-weight:600;color:var(--ink);letter-spacing:-.1px}
.handle{font-weight:500;color:var(--mut)}
.mon{font-size:9px;font-weight:500;color:#a4aab1}
.cn{font-weight:600;color:var(--ink);letter-spacing:-.1px}
.cl{font-weight:500;color:var(--mut)}
.name,.handle,.mon,.cn,.cl{line-height:1;white-space:nowrap;z-index:2}

.dot{border-radius:50%;z-index:1}
.v0{background:#eaecef}
.v1{background:#86e3aa}
.v2{background:#2bc06d}
.v3{background:#123122}

.sat{position:absolute;z-index:6;opacity:0;visibility:hidden}

.sat-left{left:-40px;top:4px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.sbtn{
  width:30px;
  height:30px;
  border-radius:50%;
  background:#fff;
  box-shadow:var(--sh);
  display:grid;
  place-items:center;
  color:#5b6167;
  flex:none;
}
.sbtn svg{width:14px;height:14px}
.sbtn:hover{color:var(--ink)}
.sbtn.num{font-size:11px;font-weight:600;color:#a5abb2}
.sbtn.num.on,.sbtn.num:hover{color:var(--ink)}

.fld{
  display:flex;
  align-items:center;
  gap:7px;
  height:30px;
  padding:0 12px;
  border-radius:15px;
  background:#fff;
  box-shadow:var(--sh);
  color:#7d838b;
}
.fld svg{width:12px;height:12px;flex:none}
.fld input{border:0;outline:0;background:none;width:82px;font-family:inherit;font-size:10.5px;font-weight:500;color:#3f4247}
.fld input::placeholder{color:#a9adb3}

.sat-del{
  right:-11px;
  top:-11px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#fff;
  box-shadow:var(--sh);
  display:grid;
  place-items:center;
  color:#e0524b;
}
.sat-del svg{width:13px;height:13px}
.sat-del:hover{background:#fdf1f0}

.sat-sizes{
  left:0;
  right:0;
  bottom:-15px;
  margin:auto;
  width:max-content;
  display:flex;
  align-items:center;
  gap:9px;
  height:30px;
  padding:0 11px;
  border-radius:12px;
  background:#fff;
  box-shadow:var(--sh);
}
.sz{border:1.5px solid #d3d7dc;border-radius:4px;flex:none;transition:background-color .15s,border-color .15s}
.sz-lg{width:12px;height:12px}
.sz-md{width:18px;height:9px;border-radius:5px}
.sz-sm{width:9px;height:9px;border-radius:3px}
.sz:hover{border-color:#a9aeb4}
.sz.on{background:#141619;border-color:#141619}

.tip{
  position:fixed;
  left:0;
  top:0;
  z-index:20;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  background:#fff;
  border-radius:8px;
  padding:5px 9px;
  font-size:10px;
  font-weight:500;
  color:#4b5158;
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(18,22,30,.08),0 10px 24px rgba(18,22,30,.12);
}