*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}#root{width:100%}button{cursor:pointer;border:none;outline:none;font-family:inherit}button:disabled{opacity:.5;cursor:not-allowed}.container{background:#fff;border-radius:20px;padding:40px 30px;box-shadow:0 20px 60px #0000004d;text-align:center}h1{font-size:2.5rem;font-weight:700;margin:0 0 5px;color:#1f2937}.subtitle{color:#6b7280;margin:0 0 30px;font-size:1.1rem}.challenge-card{background:#f9fafb;border-radius:15px;padding:30px;margin-bottom:20px}.target-icon{font-size:3rem;margin-bottom:10px}.make-sound{color:#6b7280;font-size:.9rem;margin:0 0 10px}.target-name{font-size:1.8rem;font-weight:700;color:#1f2937;margin:0 0 20px}.examples{margin-top:20px;padding-top:20px;border-top:1px solid #e5e7eb}.examples-label{color:#6b7280;font-size:.85rem;margin:0 0 10px;text-align:left}.example-buttons{display:flex;gap:12px;justify-content:flex-start}.example-btn{width:44px;height:44px;border-radius:50%;background:#3b82f6;color:#fff;font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:all .2s}.example-btn:hover{background:#2563eb;transform:scale(1.05)}.example-btn.playing{background:#ef4444}.score-section{margin:30px 0}.score-label{color:#6b7280;font-weight:600;margin:0 0 10px}.score-value{font-size:4rem;font-weight:700;margin:0}.toggle-predictions{background:transparent;color:#3b82f6;font-size:.9rem;margin-top:15px;padding:8px 16px}.toggle-predictions:hover{background:#eff6ff;border-radius:8px}.top-predictions{background:#f9fafb;border-radius:10px;padding:15px 20px;margin-top:15px;text-align:left}.prediction-row{display:flex;gap:12px;padding:8px 0;align-items:center}.prediction-rank{color:#9ca3af;font-size:.85rem;width:20px}.prediction-name{flex:1;color:#1f2937;font-size:.95rem}.prediction-score{color:#6b7280;font-size:.85rem}.status{display:flex;align-items:center;justify-content:center;gap:12px;margin:20px 0;color:#6b7280}.spinner{width:24px;height:24px;border:3px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.recording-dot{width:16px;height:16px;background:#ef4444;border-radius:50%;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.controls{display:flex;gap:20px;justify-content:center;align-items:center;margin-top:30px}.record-btn{width:100px;height:100px;border-radius:50%;background:#fff;border:4px solid #ef4444;display:flex;align-items:center;justify-content:center;transition:all .2s}.record-btn:hover{transform:scale(1.05);box-shadow:0 8px 24px #ef44444d}.record-btn:active{transform:scale(.95)}.record-circle{width:60px;height:60px;background:#ef4444;border-radius:50%;transition:all .2s}.record-btn.recording .record-circle{border-radius:8px;width:40px;height:40px}.play-btn{width:70px;height:70px;border-radius:50%;background:#22c55e;color:#fff;font-size:2rem;display:flex;align-items:center;justify-content:center;transition:all .2s}.play-btn:hover{background:#16a34a;transform:scale(1.05)}.loading,.error{color:#6b7280;font-size:1.1rem;padding:60px 20px}.error{color:#ef4444}.app{width:100%;max-width:600px;margin:0 auto}