html.onboardingLock,
body.onboardingLock{
  overflow:hidden !important;
  overscroll-behavior:none !important;
}

.onboardingRoot,
.onboardingRoot *{
  box-sizing:border-box;
}

.onboardingRoot{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .32s cubic-bezier(0.22,1,0.36,1), visibility .32s cubic-bezier(0.22,1,0.36,1);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.onboardingRoot.isOpen{ opacity:1; visibility:visible; }
.onboardingRoot.isClosing{ opacity:0; visibility:hidden; }

.onboardingBackdrop{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.76);
  -webkit-backdrop-filter:blur(10px) saturate(.9);
  backdrop-filter:blur(10px) saturate(.9);
}

.onboardingShell{
  position:relative;
  z-index:1;
  width:min(100%,1040px);
  height:100dvh;
  min-height:0;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:14px;
}

.onboardingTopBar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex:0 0 auto;
}

.onboardingSkipBtn,
.onboardingAction,
.onboardingDot,
.onboardingChip,
.onboardingTopicChip{
  -webkit-tap-highlight-color:transparent;
  font:inherit;
}

.onboardingSkipBtn{
  align-self:flex-end;
  appearance:none;
  border:1px solid rgba(17,17,19,.1);
  background:rgba(255,255,255,.96);
  color:#111113;
  border-radius:999px;
  padding:10px 14px;
  font-size:14px;
  font-weight:750;
  letter-spacing:-.01em;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(17,17,19,.04);
  transition:transform .18s cubic-bezier(0.22,1,0.36,1), border-color .18s cubic-bezier(0.22,1,0.36,1), box-shadow .18s cubic-bezier(0.22,1,0.36,1);
}
.onboardingSkipBtn:hover{ transform:translateY(-1px); border-color:rgba(17,17,19,.16); box-shadow:0 10px 22px rgba(17,17,19,.06); }

.onboardingViewport{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden;
  touch-action:pan-y pinch-zoom;
  user-select:none;
  -webkit-overflow-scrolling:touch;
  padding-right:2px;
}

.onboardingTrack{
  display:flex;
  min-height:100%;
  will-change:transform;
  transition:transform .56s cubic-bezier(0.22,1,0.36,1);
}
.onboardingTrack.isDragging,
.onboardingTrack.isImmediate{ transition:none; }

.onboardingSlide{
  flex:0 0 100%;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

.onboardingCard{
  position:relative;
  width:min(100%,920px);
  min-height:clamp(480px,66dvh,620px);
  background:linear-gradient(180deg, rgba(255,255,255,.985) 0%, rgba(248,248,248,.96) 100%);
  border:1px solid rgba(17,17,19,.08);
  border-radius:32px;
  box-shadow:0 18px 50px rgba(17,17,19,.07);
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:center;
  gap:24px;
  padding:34px;
}

.onboardingCard::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 14% 18%, rgba(17,17,19,.03), transparent 28%),
    radial-gradient(circle at 84% 18%, rgba(17,17,19,.025), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0));
  pointer-events:none;
}

.onboardingCardGlow{
  position:absolute;
  inset:auto auto -16% -12%;
  width:34%;
  aspect-ratio:1;
  border-radius:999px;
  filter:blur(64px);
  opacity:.08;
  background:rgba(17,17,19,.22);
  pointer-events:none;
}

.onboardingVisual,
.onboardingCopy{ position:relative; z-index:1; }

.onboardingVisual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:300px;
  padding:28px 0;
  overflow:visible;
  isolation:isolate;
  transform:translateY(20px) scale(.985);
  opacity:0;
  transition:transform .58s cubic-bezier(0.22,1,0.36,1), opacity .58s cubic-bezier(0.22,1,0.36,1);
}

.onboardingVisualRing{
  position:absolute;
  top:50%;
  left:50%;
  width:min(72vw,296px);
  aspect-ratio:1;
  border-radius:999px;
  border:1px solid rgba(17,17,19,.06);
  background:radial-gradient(circle at center, rgba(255,255,255,.98) 0%, rgba(246,246,246,.94) 48%, rgba(255,255,255,0) 74%);
  transform:translate(-50%, -50%);
}
.onboardingVisualRing::before,
.onboardingVisualRing::after{
  content:'';
  position:absolute;
  border-radius:999px;
  border:1px solid rgba(17,17,19,.045);
}
.onboardingVisualRing::before{ inset:12%; }
.onboardingVisualRing::after{ inset:24%; }

.onboardingVisualPlate{
  position:relative;
  z-index:1;
  width:min(56vw,208px);
  aspect-ratio:1;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(246,246,246,.97) 100%);
  border:1px solid rgba(17,17,19,.09);
  box-shadow:0 18px 40px rgba(17,17,19,.08), inset 0 1px 0 rgba(255,255,255,.86);
  display:flex;
  align-items:center;
  justify-content:center;
  animation:onboardingFloat 4.8s cubic-bezier(0.22,1,0.36,1) infinite;
}
.onboardingVisualPlate::before{
  content:'';
  position:absolute;
  inset:14px;
  border-radius:999px;
  border:1px solid rgba(17,17,19,.05);
}
.onboardingVisual--pulse .onboardingVisualPlate::after{
  content:'';
  position:absolute;
  inset:-10px;
  border-radius:999px;
  border:1px solid rgba(17,17,19,.1);
  animation:onboardingPulse 2.2s cubic-bezier(0.22,1,0.36,1) infinite;
}

.onboardingIconWrap{
  width:92px;
  height:92px;
  border-radius:26px;
  background:#111113;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 16px 32px rgba(17,17,19,.16);
}
.onboardingIconWrap svg{ width:42px; height:42px; display:block; }

.onboardingCopy{ max-width:500px; }
.onboardingEyebrow,
.onboardingTitle,
.onboardingText,
.onboardingHint,
.onboardingMeta{ opacity:0; transform:translateY(20px); }

.onboardingEyebrow{
  display:inline-flex;
  margin-bottom:14px;
  color:rgba(17,17,19,.5);
  font-size:12px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
  transition:opacity .48s cubic-bezier(0.22,1,0.36,1) .03s, transform .48s cubic-bezier(0.22,1,0.36,1) .03s;
}
.onboardingTitle{
  margin:0;
  color:#111113;
  font-size:clamp(34px,4.4vw,56px);
  line-height:.98;
  letter-spacing:-.045em;
  transition:opacity .52s cubic-bezier(0.22,1,0.36,1) .1s, transform .52s cubic-bezier(0.22,1,0.36,1) .1s;
}
.onboardingText{
  margin:16px 0 0;
  color:rgba(17,17,19,.72);
  font-size:clamp(16px,1.5vw,19px);
  line-height:1.56;
  transition:opacity .56s cubic-bezier(0.22,1,0.36,1) .18s, transform .56s cubic-bezier(0.22,1,0.36,1) .18s;
}

.onboardingMeta{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:18px;
  transition:opacity .58s cubic-bezier(0.22,1,0.36,1) .22s, transform .58s cubic-bezier(0.22,1,0.36,1) .22s;
}
.onboardingMetaLabel{
  color:rgba(17,17,19,.72);
  font-size:14px;
  line-height:1.4;
}
.onboardingMetaLabel b{ color:#111113; }

.onboardingChipRow,
.onboardingChipGrid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.onboardingChipGrid{ gap:14px 12px; }

.onboardingChip,
.onboardingTopicChip{
  appearance:none;
  border:1px solid rgba(17,17,19,.12);
  background:#fff;
  color:#111113;
  cursor:pointer;
  transition:transform .16s cubic-bezier(0.22,1,0.36,1), background .18s cubic-bezier(0.22,1,0.36,1), color .18s cubic-bezier(0.22,1,0.36,1), border-color .18s cubic-bezier(0.22,1,0.36,1), box-shadow .18s cubic-bezier(0.22,1,0.36,1);
}
.onboardingChip:hover,
.onboardingTopicChip:hover{ transform:translateY(-1px); }
.onboardingChip:focus-visible,
.onboardingTopicChip:focus-visible,
.onboardingAction:focus-visible,
.onboardingSkipBtn:focus-visible,
.onboardingDot:focus-visible{
  outline:2px solid rgba(17,17,19,.2);
  outline-offset:2px;
}
.onboardingChip{
  min-height:42px;
  padding:10px 14px;
  border-radius:12px;
  font-size:14px;
  font-weight:750;
}
.onboardingTopicChip{
  min-height:70px;
  padding:18px 28px;
  border-radius:28px;
  font-size:17px;
  font-weight:800;
  letter-spacing:-.03em;
  box-shadow:0 10px 22px rgba(17,17,19,.04);
}
.onboardingChip.isActive,
.onboardingTopicChip.isActive{
  background:#111113;
  color:#fff;
  border-color:#111113;
  box-shadow:0 12px 24px rgba(17,17,19,.12);
}

.onboardingHint{
  margin-top:22px;
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(17,17,19,.035);
  border:1px solid rgba(17,17,19,.08);
  color:rgba(17,17,19,.78);
  font-size:14px;
  font-weight:650;
  line-height:1.35;
  transition:opacity .6s cubic-bezier(0.22,1,0.36,1) .26s, transform .6s cubic-bezier(0.22,1,0.36,1) .26s;
}
.onboardingHintDot{
  width:9px;
  height:9px;
  flex:0 0 auto;
  border-radius:999px;
  background:#111113;
  opacity:.86;
}

.onboardingSlide.isActive .onboardingVisual,
.onboardingSlide.isActive .onboardingEyebrow,
.onboardingSlide.isActive .onboardingTitle,
.onboardingSlide.isActive .onboardingText,
.onboardingSlide.isActive .onboardingHint,
.onboardingSlide.isActive .onboardingMeta{
  opacity:1;
  transform:translateY(0) scale(1);
}

.onboardingFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex:0 0 auto;
}
.onboardingDots{
  display:flex;
  align-items:center;
  gap:10px;
}
.onboardingDot{
  appearance:none;
  width:10px;
  height:10px;
  border:none;
  border-radius:999px;
  background:rgba(17,17,19,.16);
  cursor:pointer;
  padding:0;
  transition:transform .22s cubic-bezier(0.22,1,0.36,1), width .22s cubic-bezier(0.22,1,0.36,1), background .22s cubic-bezier(0.22,1,0.36,1);
}
.onboardingDot.isActive{ width:28px; background:#111113; }

.onboardingActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
}
.onboardingAction{
  appearance:none;
  min-height:50px;
  border-radius:16px;
  padding:0 18px;
  border:1px solid rgba(17,17,19,.1);
  font-size:15px;
  font-weight:800;
  letter-spacing:-.01em;
  cursor:pointer;
  transition:transform .18s cubic-bezier(0.22,1,0.36,1), background .18s cubic-bezier(0.22,1,0.36,1), border-color .18s cubic-bezier(0.22,1,0.36,1), opacity .18s cubic-bezier(0.22,1,0.36,1), box-shadow .18s cubic-bezier(0.22,1,0.36,1);
}
.onboardingAction:hover{ transform:translateY(-1px); }
.onboardingAction:disabled{ opacity:.42; cursor:default; transform:none; }
.onboardingAction--ghost{ background:#fff; color:#111113; }
.onboardingAction--primary{ background:#111113; color:#fff; border-color:#111113; box-shadow:0 10px 24px rgba(17,17,19,.12); }
.onboardingAction.isHidden{ display:none; }

.checkneUiRevealItem{
  opacity:0;
  transform:translateY(18px) scale(.99);
}
.checkneUiRevealRun .checkneUiRevealItem{
  opacity:1;
  transform:translateY(0) scale(1);
  transition:opacity .52s cubic-bezier(0.22,1,0.36,1) var(--ui-reveal-delay, 0ms), transform .58s cubic-bezier(0.22,1,0.36,1) var(--ui-reveal-delay, 0ms);
}

@keyframes onboardingFloat{ 0%,100%{ transform:translate3d(0,0,0);} 50%{ transform:translate3d(0,-10px,0);} }
@keyframes onboardingPulse{ 0%{ opacity:.18; transform:scale(.96);} 70%{ opacity:0; transform:scale(1.08);} 100%{ opacity:0; transform:scale(1.08);} }

@media (max-width: 920px){
  .onboardingShell{ padding:16px 14px calc(14px + env(safe-area-inset-bottom)); gap:12px; }
  .onboardingCard{
    width:min(100%, 540px);
    min-height:min(78dvh, 760px);
    margin:0 auto;
    grid-template-columns:1fr;
    gap:18px;
    padding:24px 20px 20px;
    border-radius:28px;
  }
  .onboardingCardGlow{ width:58%; inset:auto auto -18% -18%; }
  .onboardingVisual{ min-height:230px; padding:34px 0 18px; }
  .onboardingVisualRing{ width:min(76vw, 250px); }
  .onboardingVisualPlate{ width:min(50vw, 182px); }
  .onboardingCopy{ max-width:none; }
  .onboardingText{ font-size:16px; }
  .onboardingHint{ width:100%; }
  .onboardingFooter{ flex-direction:column; align-items:stretch; gap:12px; }
  .onboardingDots{ justify-content:center; }
  .onboardingActions{ width:100%; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .onboardingAction{ width:100%; min-height:52px; }
  .onboardingTopicChip{ min-height:64px; padding:16px 24px; font-size:16px; }
}

@media (max-width: 640px){
  .onboardingShell{
    max-width:480px;
    margin:0 auto;
    padding:max(8px, env(safe-area-inset-top)) 8px calc(16px + env(safe-area-inset-bottom));
    gap:8px;
    min-height:0;
  }

  .onboardingTopBar{
    padding-inline:2px;
    flex:0 0 auto;
  }

  .onboardingViewport{
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    touch-action:pan-y pinch-zoom;
    padding:0 1px 2px;
  }

  .onboardingTrack{
    min-height:100%;
    height:auto;
    align-items:flex-start;
  }

  .onboardingSkipBtn{
    padding:10px 12px;
    font-size:13px;
  }

  .onboardingSlide{
    height:auto;
    min-height:100%;
    align-items:flex-start;
    justify-content:center;
    padding:0;
  }

  .onboardingCard{
    margin:0;
    width:100%;
    min-height:0;
    max-height:none;
    overflow:visible;
    padding:18px 16px 18px;
    gap:14px;
    border-radius:26px;
    align-content:start;
  }

  .onboardingCard.isScrollable{
    overflow:visible;
  }

  .onboardingCard::-webkit-scrollbar{
    display:none;
  }

  .onboardingVisual{
    min-height:184px;
    padding:16px 0 6px;
    flex:0 0 auto;
  }

  .onboardingVisualRing{
    width:min(68vw, 220px);
  }

  .onboardingVisualPlate{
    width:min(44vw, 154px);
  }

  .onboardingIconWrap{
    width:76px;
    height:76px;
    border-radius:22px;
  }

  .onboardingIconWrap svg{
    width:34px;
    height:34px;
  }

  .onboardingCopy{
    min-height:0;
  }

  .onboardingEyebrow{
    margin-bottom:10px;
    font-size:11px;
  }

  .onboardingTitle{
    font-size:clamp(28px, 8.4vw, 40px);
    line-height:1.02;
    letter-spacing:-.05em;
  }

  .onboardingText{
    margin-top:12px;
    font-size:15px;
    line-height:1.48;
  }

  .onboardingMeta{
    margin-top:16px;
    gap:10px;
  }

  .onboardingMetaLabel{
    font-size:13px;
  }

  .onboardingChipRow--regions{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:10px;
  }

  .onboardingChip{
    min-height:46px;
    padding:10px 8px;
    font-size:13px;
    border-radius:14px;
    text-align:center;
    justify-content:center;
  }

  .onboardingTopicChip{
    width:100%;
    justify-content:center;
    min-height:58px;
    padding:14px 18px;
    border-radius:22px;
    font-size:15px;
  }

  .onboardingChipGrid{
    gap:10px;
  }

  .onboardingHint{
    margin-top:16px;
    padding:12px 13px;
    border-radius:16px;
    font-size:13px;
    line-height:1.4;
  }

  .onboardingFooter{
    gap:10px;
    flex:0 0 auto;
    position:sticky;
    bottom:0;
    z-index:2;
    padding-top:10px;
    padding-bottom:calc(2px + env(safe-area-inset-bottom));
    background:linear-gradient(
      180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.82) 18%,
      rgba(255,255,255,.96) 42%,
      rgba(255,255,255,1) 100%
    );
    backdrop-filter:saturate(1.05) blur(6px);
    -webkit-backdrop-filter:saturate(1.05) blur(6px);
  }

  .onboardingDots{
    gap:8px;
  }

  .onboardingDot{
    width:9px;
    height:9px;
  }

  .onboardingDot.isActive{
    width:24px;
  }

  .onboardingActions{
    grid-template-columns:1fr;
    gap:12px;
  }

  .onboardingAction{
    min-height:54px;
    border-radius:18px;
    font-size:15px;
  }

  .onboardingSlide[data-slide-index="2"] .onboardingCard{
    padding-top:12px;
    padding-bottom:16px;
    gap:12px;
  }

  .onboardingSlide[data-slide-index="2"] .onboardingVisual{
    min-height:118px;
    padding:2px 0 0;
  }

  .onboardingSlide[data-slide-index="2"] .onboardingVisualRing{
    width:min(48vw, 164px);
  }

  .onboardingSlide[data-slide-index="2"] .onboardingVisualPlate{
    width:min(31vw, 108px);
  }

  .onboardingSlide[data-slide-index="2"] .onboardingIconWrap{
    width:60px;
    height:60px;
    border-radius:18px;
  }

  .onboardingSlide[data-slide-index="2"] .onboardingIconWrap svg{
    width:28px;
    height:28px;
  }

  .onboardingSlide[data-slide-index="2"] .onboardingTitle{
    font-size:clamp(24px, 7.8vw, 34px);
  }

  .onboardingSlide[data-slide-index="2"] .onboardingText{
    margin-top:10px;
  }

  .onboardingSlide[data-slide-index="2"] .onboardingTopicChip{
    min-height:54px;
    padding:12px 16px;
    border-radius:20px;
    font-size:14px;
  }
}

@media (max-width: 420px){
  .onboardingShell{ padding:max(8px, env(safe-area-inset-top)) 8px calc(14px + env(safe-area-inset-bottom)); }
  .onboardingCard{ padding:18px 14px 16px; border-radius:24px; }
  .onboardingVisual{ min-height:180px; }
  .onboardingVisualRing{ width:min(74vw, 220px); }
  .onboardingVisualPlate{ width:min(50vw, 156px); }
  .onboardingTitle{ font-size:clamp(26px, 8.8vw, 36px); }
  .onboardingChipRow--regions{ grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; }
  .onboardingChip{ min-height:44px; padding:8px 6px; font-size:12px; }
}

@media (prefers-reduced-motion: reduce){
  .onboardingRoot,
  .onboardingVisual,
  .onboardingEyebrow,
  .onboardingTitle,
  .onboardingText,
  .onboardingHint,
  .onboardingMeta,
  .onboardingTrack,
  .onboardingSkipBtn,
  .onboardingAction,
  .onboardingDot,
  .onboardingChip,
  .onboardingTopicChip,
  .checkneUiRevealRun .checkneUiRevealItem{ transition:none !important; }
  .onboardingVisualPlate,
  .onboardingVisual--pulse .onboardingVisualPlate::after{ animation:none !important; }
  
}