Multi-Step Survey Quiz Card

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<form class="quizform-card" onsubmit="return false;"><div class="quizform-progress"><div class="quizform-bar" style="width: 66%;"></div></div><span class="quizform-step">Step 2 of 3</span><h4>What is your primary goal?</h4><div class="quizform-options"><label class="quizform-chip"><input type="radio" name="goal" checked><span>🚀 Build Web Apps</span></label><label class="quizform-chip"><input type="radio" name="goal"><span>🎨 Design UI/UX</span></label><label class="quizform-chip"><input type="radio" name="goal"><span>📈 Marketing</span></label></div><div class="quizform-actions"><button type="button" class="btn-prev">Back</button><button type="submit" class="btn-next">Next →</button></div></form>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.quizform-card { width: 220px; background: #ffffff; border-radius: 16px; padding: 18px; box-shadow: 0 15px 30px rgba(0,0,0,0.06); font-family: system-ui, sans-serif; margin: auto; box-sizing: border-box; }
.quizform-progress { height: 4px; background: #f1f5f9; border-radius: 2px; overflow: hidden; margin-bottom: 8px; }
.quizform-bar { height: 100%; background: #6366f1; border-radius: 2px; }
.quizform-step { font-size: 7px; font-weight: 800; color: #94a3b8; text-transform: uppercase; }
.quizform-card h4 { margin: 4px 0 12px; font-size: 11px; font-weight: 800; color: #0f172a; }
.quizform-options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.quizform-chip { display: flex; align-items: center; border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 6px 8px; cursor: pointer; transition: all 0.2s; }
.quizform-chip:has(input:checked) { border-color: #6366f1; background: #eef2ff; }
.quizform-chip input { display: none; }
.quizform-chip span { font-size: 8px; font-weight: 700; color: #1e293b; }
.quizform-actions { display: flex; gap: 8px; }
.quizform-actions button { flex: 1; border: none; border-radius: 6px; padding: 7px; font-size: 8px; font-weight: 800; cursor: pointer; }
.btn-prev { background: #f1f5f9; color: #64748b; }
.btn-next { background: #6366f1; color: #ffffff; }