.new-onboarding .top {
  position: relative;
  z-index: 50;
  padding: 10px 24px 0;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 1s;
}

@media (min-height: 700px) {
  .new-onboarding .top { padding-top: 16px; }
}
.new-onboarding .top.show { opacity: 1 }
.new-onboarding .top.on-coral {
  background: transparent;
  padding-bottom: 12px;
}
.new-onboarding .top.on-coral .bk {
  border-color: rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .18);
}
.new-onboarding .top.on-coral .bk svg { color: #fff }
.new-onboarding .top.on-coral .ptr { background: rgba(255, 255, 255, .2) }
.new-onboarding .top.on-coral .pf { background: #fff }

.new-onboarding .nav {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 44px;
}

.new-onboarding .bk {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.new-onboarding .bk:active { transform: scale(.92) }
.new-onboarding .bk svg { width: 18px; height: 18px; color: var(--text-primary) }

.new-onboarding .ptr {
  flex: 1;
  height: 3px;
  background: var(--sand);
  border-radius: 2px;
  overflow: hidden;
}

.new-onboarding .pf {
  height: 100%;
  background: var(--coral);
  border-radius: 2px;
  transition: width 1s cubic-bezier(.4, 0, .2, 1);
}

.new-onboarding .edit-done {
  font-size: 15px;
  font-weight: 600;
  color: var(--coral);
  cursor: pointer;
  flex-shrink: 0;
  padding: 6px 2px;
  -webkit-tap-highlight-color: transparent;
}