html, body { margin: 0; height: 100%; overflow: hidden; background: #ece6da; }
#stage { position: relative; width: 100%; height: 100vh; overflow: hidden; }

#hint, #note {
  position: fixed; z-index: 2; pointer-events: none; user-select: none;
  transition: color .6s, opacity .4s;
}
#hint { top: 18px; left: 20px; font: 500 13px/1.3 system-ui, sans-serif; letter-spacing: .01em; }
#hint, #note { color: #3a2f1a; }
#note { left: 16px; bottom: 16px; max-width: 60%; font: 400 12px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

#os {
  position: fixed; inset: 0; z-index: 5; width: 100%; height: 100%; border: 0;
  opacity: 0; pointer-events: none; transition: opacity .45s; background: transparent;
}

#mobile {
  position: fixed; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  opacity: 0; pointer-events: none; transition: opacity .45s;
}
.phone-shell {
  height: min(844px, calc(100vh - 96px)); aspect-ratio: 390 / 844; padding: 10px; box-sizing: content-box;
  border-radius: 52px; background: #101426; position: relative;
  box-shadow: 0 0 0 2px #2a3150 inset, 0 30px 80px rgba(0, 0, 0, .45);
}
#mobileFrame { width: 100%; height: 100%; border: 0; border-radius: 42px; background: #0a0f24; display: block; }
#mobileExit {
  border: 0; cursor: pointer; border-radius: 99px; padding: 9px 18px;
  font: 600 13px system-ui, sans-serif; background: rgba(16, 20, 38, .85); color: #e8eefb; backdrop-filter: blur(8px);
}