@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap";*{box-sizing:border-box}@keyframes move{0%{transform:translateZ(1px) rotate(0)}to{transform:translateZ(1px) rotate(360deg)}}.background{position:fixed;width:100vw;height:100vh;top:0;left:0;background:#f5f7fb;overflow:hidden;z-index:0}body{font-family:Karla,sans-serif;margin:0;padding:0;height:100vh;display:flex;justify-content:center;align-items:center}#root{position:relative;z-index:1;width:550px;height:550px;background:none}.ball{position:absolute;width:20vmin;height:20vmin;border-radius:50%;backface-visibility:hidden;animation:move linear infinite}.ball:nth-child(1){background:#deebf8;top:77%;left:88%;animation-duration:40s;animation-delay:-3s;transform-origin:16vw -2vh;box-shadow:40vmin 0 #deebf8}.ball:nth-child(2){background:#fffad1;top:42%;left:2%;animation-duration:53s;animation-delay:-29s;transform-origin:-19vw 21vh;box-shadow:-40vmin 0 #fffad1}.ball:nth-child(3){background:#e3bbee;top:28%;left:18%;animation-duration:49s;animation-delay:-8s;transform-origin:-22vw 3vh;box-shadow:40vmin 0 #e3bbee}.ball:nth-child(4){background:#f34c7a;top:50%;left:79%;animation-duration:26s;animation-delay:-21s;transform-origin:-17vw -6vh;box-shadow:40vmin 0 #f34c7a}.ball:nth-child(5){background:#72abed;top:46%;left:15%;animation-duration:36s;animation-delay:-40s;transform-origin:4vw 0vh;box-shadow:-40vmin 0 #72abed}.ball:nth-child(6){background:#fc5e62;top:77%;left:16%;animation-duration:31s;animation-delay:-10s;transform-origin:18vw 4vh;box-shadow:40vmin 0 #fc5e62}.ball:nth-child(7){background:#b8e6b8;top:22%;left:17%;animation-duration:55s;animation-delay:-6s;transform-origin:1vw -23vh;box-shadow:-40vmin 0 #b8e6b8}.ball:nth-child(8){background:#ffd6a5;top:41%;left:47%;animation-duration:43s;animation-delay:-28s;transform-origin:25vw -3vh;box-shadow:40vmin 0 #ffd6a5}div#root{z-index:1;width:550px;height:550px;background-color:#edf6ffcc;display:flex;justify-content:center;align-items:center;text-align:center;border-radius:10%}section>.start-page{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center}.start-page h1{font-size:32px;font-weight:700;margin:0}.start-page p{font-size:16px;font-family:Inter,san-serif;font-weight:400;margin:0}.start-page button{background-color:#4d5b9e;height:52px;width:193px;margin-block:20px;border-radius:10px;color:#fff;font-size:16px;font-family:Inter,san-serif;font-weight:500;border:none;cursor:pointer}.start-page>.questionCount{background-color:#4d5b9e;height:52px;width:60px;margin-block:20px;margin-left:10px;border:2px solid oldlace;border-radius:10px;color:#fff;font-size:16px;font-family:Inter,san-serif;font-weight:500;border:none;padding:0 12px}.main-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:1rem;position:relative;box-sizing:border-box}.start-page{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;width:100%;background:none;padding:1rem;box-sizing:border-box}.start-page-title{font-size:32px;font-weight:700;color:#1a202c;margin:0 0 .5rem;font-family:Inter,sans-serif}.start-page-subtitle{font-size:16px;font-family:Inter,sans-serif;font-weight:400;color:#4a5568;margin:0 0 1.5rem}.question-count-container{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-bottom:1rem}.question-count-label{color:#4a5568;font-family:Inter,sans-serif;font-size:14px}.question-count-input{background-color:#4d5b9e;height:52px;width:80px;border:2px solid #e2e8f0;border-radius:10px;color:#fff;font-size:16px;font-family:Inter,sans-serif;font-weight:500;text-align:center;padding:0 12px;box-sizing:border-box}.question-count-input:focus{outline:none;border-color:#3f478c}.start-button{background-color:#4d5b9e;height:52px;width:193px;margin-top:20px;border-radius:10px;color:#fff;font-size:16px;font-family:Inter,sans-serif;font-weight:500;border:none;cursor:pointer;transition:background-color .2s ease-in-out}.start-button:hover{background-color:#3f478c}.quiz-page{width:100%;height:100%;padding:1rem;box-sizing:border-box;overflow-y:auto;display:flex;flex-direction:column}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%}.loading-spinner{width:3rem;height:3rem;border-radius:50%;border-top:2px solid #4D5B9E;border-bottom:2px solid #4D5B9E;animation:spin 1s linear infinite}.loading-text{margin-top:1rem;color:#4a5568;font-family:Inter,sans-serif}.questions-container{flex:1;overflow-y:auto;padding-right:.5rem}.question-card{margin-bottom:1rem}.question-card h2{font-size:14px;font-weight:600;color:#1a202c;margin-bottom:.5rem;line-height:1.3;font-family:Inter,sans-serif}.question-card .flex{display:flex;flex-wrap:wrap;gap:.25rem;margin-bottom:.5rem}.answer-button{padding:.375rem .75rem;border-radius:8px;border:1px solid #e2e8f0;font-weight:500;font-size:12px;font-family:Inter,sans-serif;transition:all .2s ease-in-out;cursor:pointer;line-height:1.2}.default-answer{background-color:#fff;color:#4a5568}.default-answer:hover{background-color:#f0f4ff}.selected-answer{background-color:#4d5b9e;color:#fff;border-color:transparent}.correct-answer{background-color:#48bb78;color:#fff;border-color:transparent}.incorrect-answer{background-color:#f56565;color:#fff;border-color:transparent;opacity:.7}.faded-answer{opacity:.5}.quiz-footer{margin-top:1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding-top:1rem;border-top:1px solid #e2e8f0}.quiz-score{font-size:14px;font-weight:600;color:#4a5568;font-family:Inter,sans-serif;margin:0}.check-button,.play-again-button{background-color:#4d5b9e;color:#fff;font-weight:500;padding:.5rem 1.5rem;border-radius:8px;transition:background-color .2s ease-in-out;cursor:pointer;border:none;font-size:14px;font-family:Inter,sans-serif}.check-button:hover,.play-again-button:hover{background-color:#3f478c}.message-box{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;padding:1.5rem;border-radius:.5rem;box-shadow:0 10px 20px #0003;text-align:center;z-index:1000}.message-box p{margin:0 0 1rem;color:#4a5568}.message-box-close{background-color:#4c51bf;color:#fff;border:none;padding:.5rem 1rem;border-radius:.25rem;cursor:pointer}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}