@import "https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap";
:root{--bg-main:#f1f1e6;--bg-container:#fff;--primary:#ce90ff;--primary-hover:#b97af0;--text-main:#333;--text-muted:#666;--border-color:#e2e2d1;--shadow-color:#a09d7d}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-main);color:var(--text-main);flex-direction:column;min-height:100vh;font-family:Quicksand,sans-serif;display:flex}h1,h2,h3{font-weight:700}.card-panel{background:var(--bg-container);border:2px solid var(--border-color);box-shadow:8px 8px 0px var(--shadow-color);border-radius:20px;margin:0 auto;padding:10px;transition:transform .2s,box-shadow .2s}@media (min-width:768px){.card-panel{padding:20px}}@media (min-width:1200px){.card-panel{padding:32px}}.input-group{flex-direction:column;gap:8px;margin-bottom:24px;display:flex}.input-label{color:var(--text-main);font-size:1rem;font-weight:600}.input-field{border:2px solid var(--border-color);width:100%;color:var(--text-main);background:#fff;border-radius:12px;outline:none;padding:14px 16px;font-family:inherit;font-size:1.1rem;font-weight:500}.input-field:focus{border-color:var(--primary);box-shadow:4px 4px #ce90ff66}.btn{cursor:pointer;border:2px solid #0000;border-radius:99px;justify-content:center;align-items:center;padding:16px 32px;font-family:inherit;font-size:1.1rem;font-weight:700;transition:all .2s;display:inline-flex}.btn-primary{background-color:var(--primary);color:#000;border:2px solid #000;box-shadow:4px 4px #000}.btn-primary:hover:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px #000}.btn-primary:active:not(:disabled){transform:translate(4px,4px);box-shadow:0 0 #000}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important;box-shadow:4px 4px #000!important}.option-btn{text-align:left;background:var(--bg-container);border:2px solid var(--border-color);width:100%;color:var(--text-main);cursor:pointer;border-radius:16px;margin-bottom:16px;padding:20px;font-size:1.125rem;font-weight:600;transition:all .2s}.option-btn:hover{border-color:var(--shadow-color);box-shadow:4px 4px 0px var(--shadow-color);background:#fafaf5;transform:translateY(-2px)}.question-layout{flex-direction:column;gap:32px;display:flex}@media (min-width:1024px){.question-layout{flex-direction:row-reverse;align-items:flex-start}}.question-content{flex:1}.video-placeholder{border:2px dashed var(--shadow-color);min-height:250px;color:var(--text-muted);text-align:center;background:#efefef;flex:1;justify-content:center;align-items:center;padding:24px;font-size:1.2rem;font-weight:600;display:flex}.video-container{aspect-ratio:16/9;border-radius:6px;width:100%;overflow:hidden}@media (min-width:1024px){.video-container{border-radius:16px}.question-layout .video-container{flex:0 0 calc(50% - 16px);width:calc(50% - 16px)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.4s forwards fadeIn}.progress-bar-bg{background:var(--border-color);border-radius:6px;width:100%;height:12px;margin-bottom:32px;overflow:hidden}.progress-bar-fill{background-color:var(--primary);border-radius:6px;height:100%;transition:width .3s}.result-tag{background-color:var(--primary);color:#000;border:2px solid #000;border-radius:99px;margin-top:16px;padding:12px 24px;font-weight:700;display:inline-block;box-shadow:4px 4px #000}.header-logo{text-align:center;color:var(--text-main);margin-bottom:24px;font-size:2.5rem;font-weight:700}