:root{
  --ttkm-accent:#d9534f;
  --ttkm-accent-soft:#fdeceb;
  --ttkm-accent-ring:#f7c9c7;
  --ttkm-text:#1a1a1a;
  --ttkm-muted:#7b7b7b;
  --ttkm-line:#ececec;
}

.ttkm-no-scroll{
  overflow:hidden;
}

.ttkm-start{
  appearance:none;
  border:none;
  border-radius:999px;
  background:var(--ttkm-accent);
  color:#fff;
  padding:14px 24px;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(217,83,79,.28);
}

.ttkm-overlay{
  position:fixed;
  inset:0;
  background:#fff;
  z-index:99999;
  display:none;
  flex-direction:column;
  font-family:Arial, sans-serif;
  color:var(--ttkm-text);
}

.ttkm-overlay.active{
  display:flex;
}

.ttkm-header{
  padding:18px 22px 14px;
  border-bottom:1px solid var(--ttkm-line);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
}

.ttkm-header-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}

.ttkm-title{
  font-size:21px;
  font-weight:800;
  line-height:1.2;
  margin:0 0 4px;
}

.ttkm-meta{
  color:var(--ttkm-muted);
  font-size:13px;
  font-weight:600;
}

.ttkm-close{
  appearance:none;
  border:none;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--ttkm-accent);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  flex:0 0 auto;
  box-shadow:0 6px 14px rgba(217,83,79,.35);
}

.ttkm-close:active{
  transform:scale(.92);
}

.ttkm-dots{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.ttkm-dot{
  height:6px;
  border-radius:999px;
  background:#f0d5d4;
  width:18px;
  transition:all .22s ease;
}

.ttkm-dot.active{
  background:var(--ttkm-accent);
  width:30px;
}

.ttkm-dot.done{
  background:var(--ttkm-accent);
  width:18px;
  opacity:.75;
}

.ttkm-main{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:radial-gradient(circle at top, rgba(253,236,235,.7), transparent 34%), #fff;
}

.ttkm-stage{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px;
  gap:24px;
}

.ttkm-badge{
  background:var(--ttkm-accent);
  color:#fff;
  padding:8px 20px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:12px;
}

.ttkm-step-text{
  font-size:32px;
  font-weight:700;
  max-width:760px;
  line-height:1.38;
}

.ttkm-circles{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  justify-content:center;
}

.ttkm-circle{
  width:110px;
  height:110px;
  border-radius:50%;
  background:var(--ttkm-accent-soft);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 6px var(--ttkm-accent-ring);
}

.ttkm-circle-value{
  font-size:26px;
  font-weight:800;
  color:var(--ttkm-accent);
  line-height:1;
}

.ttkm-circle-label{
  font-size:11px;
  color:#777;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  margin-top:7px;
}

.ttkm-nav{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:center;
  padding:20px;
  border-top:1px solid var(--ttkm-line);
  background:#fff;
}

.ttkm-arrow{
  border:none;
  background:none;
  font-size:40px;
  color:var(--ttkm-accent);
  cursor:pointer;
  padding:10px 30px;
}

.ttkm-arrow[disabled]{
  opacity:.2;
  cursor:default;
}

.ttkm-prev{
  justify-self:start;
}

.ttkm-next{
  justify-self:end;
}

.ttkm-counter{
  justify-self:center;
  text-align:center;
  font-weight:600;
  font-size:13px;
}

@media (max-width:900px){
  .ttkm-stage{
    padding:24px 16px 18px;
  }

  .ttkm-step-text{
    font-size:24px;
  }

  .ttkm-circle{
    width:92px;
    height:92px;
  }

  .ttkm-circle-value{
    font-size:22px;
  }

  .ttkm-arrow{
    font-size:34px;
    padding:10px 20px;
  }
}