/* Onboarding is a self-contained layer. Existing app/card motion is untouched. */
.phone.onboarding-open > :not(.onboarding) { visibility: hidden !important; }
.phone.onboarding-open > .global-system-status,
.phone.onboarding-open > .live-status-time {
  visibility: visible !important;
  z-index: 1001;
  background: transparent;
}
.phone.onboarding-open > .global-system-status::after { display: none; }
.phone.onboarding-open > .global-system-status .island {
  left: 139px;
  top: 13.67px;
  width: 124px;
  border-radius: 18.5px;
}
.phone.onboarding-open > .global-system-status .island > * { visibility: hidden; }
.onboarding {
  position: absolute;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  isolation: isolate;
  color: #383838;
  background: #4dc5ff;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.onboarding[hidden] { display: none; }
.ob-background { position:absolute; inset:0; background:#4dc5ff; }
.ob-welcome-floor { position:absolute; inset:497px 0 0; background:#f6efea; }
.ob-copy-panel {
  position:absolute;
  left:0; top:418px; width:402px; height:456px;
  background:#f8f8f8;
  border-top:1px solid #383838;
  transform:translateY(456px);
}
.ob-stage { position:absolute; inset:0; }
.ob-slide { position:absolute; inset:0; visibility:hidden; pointer-events:none; }
.ob-slide.is-active, .ob-slide.is-transitioning { visibility:visible; }
.ob-art, .ob-title, .ob-description {
  position:absolute; inset:0; width:402px; height:874px;
  pointer-events:none;
}
.ob-art { transform-origin:201px 255px; }
.ob-slide[data-scene="welcome"] .ob-art { transform-origin:201px 560px; }
.ob-art > svg, .ob-title > svg, .ob-description > svg,
.ob-fallback, .ob-chrome { position:absolute; inset:0; display:block; width:402px; height:874px; }
.ob-art > svg { overflow:visible; }
.ob-copy-line, .ob-copy-line > svg { position:absolute; inset:0; display:block; width:402px; height:874px; }
.ob-title > .ob-fallback, .ob-description > .ob-fallback { visibility:hidden; }
.ob-slide.is-device-source .ob-art { visibility:hidden; }
.ob-spatial { position:absolute; inset:0; width:402px; height:874px; z-index:0; pointer-events:none; }
.ob-spatial[hidden] { display:none; }
.ob-spatial-layer { position:absolute; inset:0; width:402px; height:874px; transform-origin:0 0; pointer-events:none; }
.ob-spatial-layer > svg { position:absolute; inset:0; display:block; width:402px; height:874px; overflow:visible; }
.ob-spatial-body { position:absolute; inset:0; width:402px; height:874px; overflow:visible; z-index:0; }
.ob-spatial-surface { z-index:1; }
.ob-spatial-cavity { position:absolute; inset:0; width:402px; height:874px; overflow:visible; z-index:2; }
.ob-spatial-tiles { z-index:3; }
.ob-spatial-platform { z-index:4 !important; }
.ob-spatial-object { z-index:5; }
.ob-spatial-city { z-index:4; overflow:hidden; background:#4dc5ff; }
.ob-spatial-city-content { position:absolute; inset:0; width:402px; height:874px; transform-origin:0 0; }
.ob-spatial-city-content > svg { position:absolute; inset:0; display:block; width:402px; height:874px; overflow:visible; }
.ob-spatial-city-content::before { content:""; position:absolute; inset:497px -2000px -2000px; background:#f6efea; }
.ob-spatial-clock { position:absolute; width:0; height:0; pointer-events:none; }
.ob-title, .ob-description { z-index:2; }
.ob-status { z-index:10; pointer-events:none; }
.ob-footer { z-index:8; pointer-events:none; }
.ob-swipe-hint {
  position:absolute; z-index:9; left:140px; top:291px; width:124px; height:40px;
  border:0; padding:0; background:transparent; cursor:pointer;
}
.ob-pagination {
  position:absolute; z-index:10; top:730px; left:165px;
  display:flex; gap:0; width:72px; height:44px; align-items:center;
}
.ob-pagination button {
  position:relative; display:grid; place-items:center; width:18px; height:44px;
  flex:0 0 18px; margin:0; padding:0; border:0; background:transparent; cursor:pointer;
}
.ob-pagination button::before {
  content:""; width:8px; height:8px; border-radius:50%; background:#ddd8d4;
  transition:background-color 180ms ease;
}
.ob-pagination button[aria-current="step"]::before { background:#383838; }
.ob-auth {
  position:absolute; top:790px; z-index:11; width:177px; height:50px;
  padding:0; border:0; border-radius:25px; background:transparent; cursor:pointer;
}
.ob-login { left:16px; width:370px; }
.ob-auth[hidden] { display:none; }
.ob-login img { position:absolute; width:402px; height:874px; left:-16px; top:-790px; pointer-events:none; }
.ob-auth:hover { background:rgb(0 0 0 / 4%); }
.ob-auth:active { background:rgb(0 0 0 / 9%); }
.ob-auth:focus-visible, .ob-pagination button:focus-visible, .ob-swipe-hint:focus-visible {
  outline:2px solid #383838; outline-offset:4px;
}
.ob-register:focus-visible { outline-color:#4dc5ff; }
.ob-sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* Only complete exported groups get a separate motion transform. */
.ob-stage [data-onboarding-part], .ob-stage [data-onboarding-reaction] {
  transform-box:fill-box; transform-origin:center;
}
.ob-stage [data-onboarding-spin] { transform-box:view-box; transform-origin:0 0; }
@media (prefers-reduced-motion: reduce) {
  .ob-pagination button::before { transition:none; }
}