html,body{margin:0;padding:0;height:100%;overflow:hidden;overscroll-behavior:none}body{font-family:sans-serif;background:#fff;color:#000}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;height:100dvh;gap:20px;padding:20px}.steps{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.step{width:28px;height:28px;background:#90caf9;color:#fff;display:flex;align-items:center;justify-content:center;border-radius:6px;opacity:.5;font-size:12px}.step.active{opacity:1;background:#1a73e8;transform:scale(1.2)}.image-box{width:80vw;max-width:300px;aspect-ratio:1 / 1}.image-box img{width:100%;height:100%;object-fit:cover}.timer-bar{width:80vw;max-width:300px;height:20px;background:#ddd;border-radius:10px;overflow:hidden}.timer-fill{height:100%;background:#2196f3;border-radius:10px}.next-btn{padding:12px 30px;font-size:16px;border:none;border-radius:8px;cursor:pointer}.next-btn.disabled{opacity:.3;cursor:default}.next-btn.active{background:#ffab40;color:#fff}.start-btn{padding:20px 40px;font-size:20px;background:#00c853;border:none;border-radius:10px;cursor:pointer}.timer-display{font-size:18px;color:#000;text-align:center}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#ffffffe6;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:18px}.spinner{width:40px;height:40px;border:4px solid #ccc;border-top:4px solid #2196f3;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:10px}@keyframes spin{to{transform:rotate(360deg)}}.image-box{position:relative}.replay-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;background:#0000008c;border:3px solid white;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:background .2s}.replay-btn:hover{background:#000000bf}.landing{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#e8f0fe,#f5f8ff);padding:20px}.landing-card{background:#fff;border-radius:20px;padding:48px 40px;max-width:400px;width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 4px 24px #1a73e81a}.landing-icon{width:72px;height:72px;background:#1a73e8;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:4px}.landing-title{font-size:clamp(20px,5vw,26px);font-weight:700;color:#1a1a1a;text-align:center;margin:0;letter-spacing:-.3px}.landing-sub{font-size:14px;color:#888;margin:0;text-align:center}.landing-divider{width:40px;height:3px;background:#1a73e8;border-radius:2px;margin:4px 0}.landing-info{list-style:none;padding:0;margin:0;width:100%;display:flex;flex-direction:column;gap:10px}.landing-info li{font-size:14px;color:#444;background:#f5f8ff;border-radius:10px;padding:10px 14px}.start-btn{margin-top:8px;padding:14px 48px;font-size:16px;font-weight:700;background:#1a73e8;color:#fff;border:none;border-radius:12px;cursor:pointer;letter-spacing:.5px;transition:background .2s,transform .1s}.start-btn:hover{background:#1558b0}.start-btn:active{transform:scale(.97)}