.mh-onb{
  position:fixed; inset:0; z-index:var(--z-system,9999);
  display:flex; flex-direction:column;
  background:
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 60%),
    var(--theme-bg);
  color:var(--theme-text);
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  font-feature-settings:"palt" 1;
  animation:mh-onb-shell-in .5s cubic-bezier(.22,1,.36,1);
}
@keyframes mh-onb-shell-in{
  from{ opacity:0; transform:scale(1.02); filter:blur(6px); }
  to{ opacity:1; transform:scale(1); filter:blur(0); }
}
[data-mh-onboarding="true"] #app-root{ visibility:hidden; }
[data-mh-onboarding-closing="true"] #app-root{ visibility:visible; }
[data-mh-onboarding="true"] .mh-island{ pointer-events:none; }

.mh-onb-topbar{
  flex:0 0 auto; position:relative; z-index:2;
  display:grid; grid-template-columns:44px 1fr 44px; align-items:center;
  padding:10px 14px 8px;
}
.mh-onb-topbar-spacer{ width:44px; height:1px; }

.mh-onb-back{
  justify-self:start;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgb(255 255 255/.16);
  background:
    radial-gradient(60% 60% at 30% 20%, rgb(255 255 255/.22), transparent 70%),
    color-mix(in srgb, var(--theme-surface) 46%, transparent);
  color:var(--theme-text);
  -webkit-backdrop-filter:blur(20px) saturate(1.6) brightness(1.06);
  backdrop-filter:blur(20px) saturate(1.6) brightness(1.06);
  box-shadow:0 8px 22px -10px rgb(0 0 0/.4), inset 0 1px 0 rgb(255 255 255/.22), inset 0 -1px 0 rgb(0 0 0/.14);
  opacity:1; transform:scale(1) translate3d(0,0,0);
  transition:
    transform .5s cubic-bezier(.22,1,.36,1),
    opacity .32s cubic-bezier(.32,.94,.6,1),
    box-shadow .3s ease,
    background .3s ease;
}
.mh-onb-back svg{ width:19px; height:19px; }
.mh-onb-back:active:not(:disabled){
  transform:scale(.86);
  box-shadow:0 4px 12px -8px rgb(0 0 0/.4), inset 0 1px 0 rgb(255 255 255/.3), inset 0 -1px 0 rgb(0 0 0/.18);
}
.mh-onb-back.is-hidden{
  opacity:0; pointer-events:none; transform:scale(.5) translate3d(-6px,0,0);
}
.mh-onb-back:disabled{ pointer-events:none; }

.mh-onb-progress{
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:opacity .3s ease, transform .3s ease;
}
.mh-onb-topbar.is-finish .mh-onb-progress{ opacity:0; transform:scale(.9); }
.mh-onb-dot{
  position:relative;
  width:6px; height:6px; border-radius:50%;
  background:color-mix(in srgb, var(--theme-text) 20%, transparent);
  transition:background .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.34,1.56,.64,1), width .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.mh-onb-dot[data-state="active"]{
  background:var(--color-accent); transform:scale(1);
  width:18px; border-radius:99px;
  box-shadow:0 0 10px 1px color-mix(in srgb, var(--color-accent) 55%, transparent);
}
.mh-onb-dot[data-state="done"]{ background:color-mix(in srgb, var(--color-accent) 55%, transparent); }

.mh-onb-body{ flex:1; min-height:0; overflow:hidden; position:relative; }

.mh-onb-frame{
  position:absolute; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:6px 22px calc(28px + env(safe-area-inset-bottom,0px));
  opacity:1; filter:blur(0) saturate(1);
  transform:translate3d(0,0,0) scale(1);
  transition:
    opacity .46s cubic-bezier(.22,1,.36,1),
    transform .5s cubic-bezier(.22,1,.36,1),
    filter .42s cubic-bezier(.22,1,.36,1);
  will-change:transform, opacity, filter;
}
.mh-onb-frame[data-enter="forward"]{
  opacity:0; filter:blur(8px) saturate(1.25);
  transform:translate3d(34px,10px,0) scale(.94);
}
.mh-onb-frame[data-enter="back"]{
  opacity:0; filter:blur(8px) saturate(1.25);
  transform:translate3d(-34px,10px,0) scale(.94);
}
@media (prefers-reduced-motion: reduce){
  .mh-onb-frame{ transition:opacity .18s ease !important; transform:none !important; filter:none !important; }
  .mh-onb-frame[data-enter="forward"], .mh-onb-frame[data-enter="back"]{ transform:none !important; filter:none !important; }
  .mh-onb, .mh-onb-back, .mh-onb-dot{ animation:none !important; }
}

.mh-onb-page--lang{ align-items:stretch; }
.mh-onb-langmark{
  width:56px; height:56px; margin:2px 0 14px; border-radius:16px;
  display:grid; place-items:center;
  background:
    radial-gradient(60% 60% at 30% 18%, rgb(255 255 255/.24), transparent 68%),
    color-mix(in srgb, var(--color-accent) 20%, transparent);
  color:var(--color-accent);
  border:1px solid color-mix(in srgb, var(--color-accent) 32%, transparent);
  box-shadow:0 10px 26px -14px color-mix(in srgb, var(--color-accent) 60%, transparent), inset 0 1px 0 rgb(255 255 255/.18);
}
.mh-onb-langmark svg{ width:26px; height:26px; }

.mh-onb-langlist{
  border-radius:18px; overflow:hidden;
  background:
    linear-gradient(180deg, rgb(255 255 255/.05), transparent 40%),
    var(--theme-surface-elevated);
  -webkit-backdrop-filter:saturate(1.5) blur(22px); backdrop-filter:saturate(1.5) blur(22px);
  box-shadow:inset 0 0 0 1px var(--theme-border), inset 0 1px 0 rgb(255 255 255/.07), 0 14px 34px -22px rgb(0 0 0/.5);
  margin-bottom:6px;
}
.mh-onb-langrow{
  position:relative; width:100%;
  display:flex; align-items:center; gap:13px;
  padding:12px 16px; text-align:left;
  background:transparent; border:0; color:var(--theme-text);
  -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent;
  transition:background-color .22s cubic-bezier(.22,1,.36,1);
}
.mh-onb-langrow + .mh-onb-langrow{ box-shadow:inset 0 1px 0 var(--theme-border); }
.mh-onb-langrow.is-on{ background-color:color-mix(in srgb, var(--color-accent) 10%, transparent); }
.mh-onb-langrow:active{ background-color:color-mix(in srgb, var(--theme-text) 7%, transparent); }
.mh-onb-langrow.is-on:active{ background-color:color-mix(in srgb, var(--color-accent) 15%, transparent); }

.mh-onb-langrow-badge{
  flex:0 0 auto; width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center;
  font-size:12.5px; font-weight:800; letter-spacing:.01em;
  background:
    radial-gradient(60% 60% at 30% 20%, rgb(255 255 255/.16), transparent 70%),
    color-mix(in srgb, var(--theme-text) 8%, transparent);
  color:var(--theme-text-muted);
  border:1px solid var(--theme-border);
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.mh-onb-langrow.is-on .mh-onb-langrow-badge{
  background:
    radial-gradient(60% 60% at 30% 20%, rgb(255 255 255/.26), transparent 70%),
    color-mix(in srgb, var(--color-accent) 30%, transparent);
  color:var(--color-accent);
  border-color:color-mix(in srgb, var(--color-accent) 45%, transparent);
  transform:scale(1.04);
}

.mh-onb-langrow-t{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; }
.mh-onb-langrow-native{ font-size:15.5px; font-weight:600; letter-spacing:-.005em; transition:color .22s ease; }
.mh-onb-langrow-en{ font-size:12px; color:var(--theme-text-muted); }
.mh-onb-langrow.is-on .mh-onb-langrow-native{ color:var(--color-accent); }

.mh-onb-langrow-check{
  width:21px; height:21px; flex:0 0 auto; color:var(--color-accent);
  opacity:0; transform:scale(.5) rotate(-8deg);
  transition:opacity .28s cubic-bezier(.22,1,.36,1), transform .32s cubic-bezier(.34,1.56,.64,1);
}
.mh-onb-langrow.is-on .mh-onb-langrow-check{ opacity:1; transform:scale(1) rotate(0deg); }

.mh-onb-hero{
  min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:18px; padding:24px 6px;
}
.mh-onb-mark{
  width:76px; height:76px; border-radius:24px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--color-accent),var(--mh-primary-light,var(--color-accent)));
  color:#06231a;
  box-shadow:0 18px 48px -18px color-mix(in srgb, var(--color-accent) 70%, transparent);
}
.mh-onb-mark svg{ width:38px; height:38px; }
.mh-onb-title{ font-size:28px; font-weight:800; letter-spacing:-.01em; margin:0; }
.mh-onb-sub{ font-size:15px; line-height:1.7; color:var(--theme-text-muted); max-width:34ch; margin:0; }

.mh-onb-page{ min-height:100%; padding:6px 0 8px; display:flex; flex-direction:column; }
.mh-onb-h1{ font-size:24px; font-weight:800; letter-spacing:-.01em; margin:6px 0 6px; }
.mh-onb-h2{ font-size:14px; font-weight:700; color:var(--theme-text-muted); margin:20px 0 10px; }
.mh-onb-lead{ font-size:14.5px; line-height:1.7; color:var(--theme-text-muted); margin:0 0 16px; }

.mh-onb-terms{ display:flex; flex-direction:column; gap:14px; margin-bottom:18px; }
.mh-onb-term{
  border-radius:16px; padding:14px 16px; background:var(--theme-surface-elevated);
  border:1px solid var(--theme-border);
}
.mh-onb-term strong{ display:block; font-size:14.5px; margin-bottom:4px; }
.mh-onb-term p{ margin:0; font-size:13px; line-height:1.65; color:var(--theme-text-muted); }
.mh-onb-agree{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px;
  background:var(--theme-surface-elevated); border:1px solid var(--theme-border);
  font-size:14px; margin-bottom:8px;
}
.mh-onb-agree input{ width:20px; height:20px; accent-color:var(--color-accent); flex:0 0 auto; }

.mh-onb-choicecol{ display:flex; flex-direction:column; gap:10px; margin-bottom:6px; }
.mh-onb-choice{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:14px; text-align:left;
  padding:14px 16px; border-radius:18px;
  background:
    radial-gradient(120% 140% at 12% 0%, rgb(255 255 255/.09), transparent 55%),
    var(--theme-surface-elevated);
  border:2px solid transparent;
  -webkit-backdrop-filter:saturate(1.4) blur(18px); backdrop-filter:saturate(1.4) blur(18px);
  box-shadow:inset 0 0 0 1px var(--theme-border), inset 0 1px 0 rgb(255 255 255/.06);
  transition:border-color .3s cubic-bezier(.22,1,.36,1), transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .3s cubic-bezier(.22,1,.36,1);
  color:var(--theme-text);
}
.mh-onb-choice:active{ transform:scale(.972); }
.mh-onb-choice.is-on{ border-color:var(--color-accent); box-shadow:inset 0 0 0 1px var(--theme-border), inset 0 1px 0 rgb(255 255 255/.06), 0 6px 18px -10px color-mix(in srgb, var(--color-accent) 55%, transparent); }
.mh-onb-choice svg{ width:26px; height:26px; flex:0 0 auto; color:var(--color-accent); }
.mh-onb-choice-t{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mh-onb-choice-t strong{ font-size:15px; font-weight:700; }
.mh-onb-choice-t span{ font-size:12.5px; color:var(--theme-text-muted); line-height:1.5; }

.mh-onb-status{ font-size:13px; margin:4px 2px 0; }
.mh-onb-status[data-tone="success"]{ color:var(--color-success,var(--color-accent)); }
.mh-onb-status[data-tone="error"]{ color:var(--color-danger,#ff6b6b); }

.mh-onb-grid{ margin-bottom:4px; }

.mh-onb-actions{ margin-top:auto; padding-top:20px; display:flex; flex-direction:column; gap:10px; }
.mh-onb-cta{
  width:100%; padding:15px; font-size:16px; position:relative; overflow:hidden;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s ease, box-shadow .3s cubic-bezier(.22,1,.36,1), filter .3s ease;
}
.mh-onb-cta:active:not(:disabled){ transform:scale(.965); filter:brightness(1.05) saturate(1.1); }
.mh-onb-cta:disabled{ opacity:.4; }

.mh-onb-finish{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px;
  padding:24px;
  text-align:center;
  transition:opacity .3s ease;
}
.mh-onb-finish.is-launching{ opacity:.4; }
.mh-onb-finish-title{
  font-size:34px; font-weight:800; letter-spacing:-.01em; line-height:1.25;
  white-space:pre-line; margin:0 0 6px;
}
.mh-onb-finish-sub{
  font-size:14.5px; color:var(--theme-text-muted); margin:0; max-width:26ch;
}

.mh-onb-edge{
  position:absolute; bottom:0;
  width:104px; height:calc(120px + env(safe-area-inset-bottom,0px));
  padding:0 0 calc(14px + env(safe-area-inset-bottom,0px)); margin:0; border:0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px;
  background:transparent; box-shadow:none;
  color:var(--color-accent);
  -webkit-appearance:none; appearance:none;
  -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none;
  touch-action:manipulation; user-select:none; -webkit-user-select:none;
  outline:none; cursor:pointer;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1);
}
.mh-onb-edge--left{ left:0; align-items:flex-start; padding-left:14px; }
.mh-onb-edge--right{ right:0; align-items:flex-end; padding-right:14px; }
.mh-onb-edge.is-pressed{ transform:scale(.92); }

.mh-onb-edge-glow{
  position:absolute; bottom:0; width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--color-accent) 22%, transparent) 0%, transparent 68%);
  pointer-events:none;
  opacity:.7; transition:opacity .3s ease;
}
.mh-onb-edge--left .mh-onb-edge-glow{ left:-60px; }
.mh-onb-edge--right .mh-onb-edge-glow{ right:-60px; }
.mh-onb-edge.is-pressed .mh-onb-edge-glow{ opacity:1; }

.mh-onb-edge-bar{
  position:relative; z-index:1;
  width:22px; height:34px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:0;
}
.mh-onb-edge-bar svg{
  position:absolute; bottom:0; width:16px; height:9px;
  color:var(--color-accent);
  opacity:0;
  animation:mh-onb-chev-rise 2.1s cubic-bezier(.22,1,.36,1) infinite;
}
.mh-onb-edge-bar svg:nth-child(1){ animation-delay:0s; }
.mh-onb-edge-bar svg:nth-child(2){ animation-delay:.24s; }
.mh-onb-edge-bar svg:nth-child(3){ animation-delay:.48s; }
@keyframes mh-onb-chev-rise{
  0%{ opacity:0; transform:translateY(6px); }
  18%{ opacity:.95; transform:translateY(0); }
  55%{ opacity:.28; transform:translateY(-9px); }
  100%{ opacity:0; transform:translateY(-16px); }
}

.mh-onb-edge-arrow{
  position:relative; z-index:1;
  display:grid; place-items:center;
  width:30px; height:30px; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--color-accent) 34%, transparent);
  background:
    radial-gradient(60% 60% at 30% 22%, rgb(255 255 255/.16), transparent 70%),
    color-mix(in srgb, var(--color-accent) 13%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .3s ease;
}
.mh-onb-edge-arrow svg{ width:14px; height:14px; }
.mh-onb-edge.is-pressed .mh-onb-edge-arrow{ transform:scale(.88); border-color:var(--color-accent); }

@media (prefers-reduced-motion: reduce){
  .mh-onb-edge-bar svg{ animation:none; opacity:.6; }
}