.bone { background: linear-gradient(100deg, #f3e7dc 20%, #fff8ef 45%, #f3e7dc 70%); background-size: 220% 100%; animation: shimmer 1.6s ease-in-out infinite; border-radius: 15rpx; } .hero-placeholder { position: relative; min-height: 330rpx; background: #fff0e2; border-radius: 38rpx; padding: 45rpx 35rpx; box-sizing: border-box; } .line { height: 22rpx; width: 65%; margin: 24rpx 0; } .short { width: 25%; } .title { height: 38rpx; width: 48%; } .art { position: absolute; right: 35rpx; top: 62rpx; width: 170rpx; height: 190rpx; border-radius: 40rpx; } .heading { width: 230rpx; height: 33rpx; margin: 48rpx 0 28rpx; } .card-placeholder { padding: 28rpx; background: white; border-radius: 35rpx; } .action { height: 80rpx; margin-top: 42rpx; border-radius: 24rpx; } .stats-placeholder { display: flex; gap: 14rpx; margin-top: 20rpx; } .stats-placeholder view { height: 140rpx; flex: 1; border-radius: 28rpx; } .loading-copy { text-align: center; color: #a48d7e; font-size: 22rpx; margin-top: 32rpx; } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }