*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;font-size:16px;line-height:1.5;color:#333;background-color:#f7f7f7;overflow-x:hidden}h1,h2,h3{color:#004d40;font-weight:700}.navbar{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background-color:#004d40;color:#fff;box-shadow:0 4px 6px #0000001a;position:sticky;top:0;z-index:1000}.navbar-logo{font-size:1.8em}.navbar-logo a{color:#fff;text-decoration:none;font-weight:700}.navbar-links{list-style:none;display:flex;gap:1.5rem}.navbar-links a{text-decoration:none;color:#fff;font-size:1.1em;transition:color .3s ease}.navbar-links a:hover{color:#80cbc4}.detection{max-width:800px;margin:2rem auto;padding:2rem;background-color:#fff;border-radius:8px;box-shadow:0 4px 6px #0000001a}.detection h1{text-align:center;margin-bottom:1.5rem}.toggler{display:flex;justify-content:center;gap:1.5rem;margin:1rem 0}.toggler label{font-weight:500;color:#004d40;cursor:pointer}.image-preview{text-align:center;margin-top:1.5rem}.image-preview img{border-radius:8px;border:1px solid #ddd;width:300px;height:auto}.webcam-container{display:flex;justify-content:center;margin-bottom:1.5rem}button{background-color:#004d40;color:#fff;border:none;border-radius:5px;padding:10px 20px;font-size:1em;cursor:pointer;transition:background-color .3s}button:hover{background-color:#45a049}button:disabled{background-color:#b2dfdb;cursor:not-allowed}.loader{text-align:center;color:#004d40;font-weight:700;margin:2rem 0}.labelDisplay{margin-top:1.5rem}.labelDisplay h2{text-align:center}.labelDisplay ul{list-style:none;margin-top:1rem;padding:0}.labelDisplay li{padding:.5rem 0;border-bottom:1px solid #ddd;color:#004d40}.labelDisplay li strong{color:#333}footer{text-align:center;padding:1rem;background-color:#004d40;color:#fff;margin-top:2rem}@media (max-width: 768px){.navbar{flex-direction:column;gap:1rem}.navbar-links{flex-direction:column;align-items:center}.toggler{flex-direction:column;gap:1rem}.detection{padding:1rem}}body{font-family:Roboto,sans-serif;background-color:#f9f9f9;margin:0;padding:0;display:flex;justify-content:center;align-items:center;min-height:100%;min-width:100%}.quiz-container{background:#fff;padding:30px;border-radius:12px;box-shadow:0 4px 12px #0000001a;width:90%;max-width:100%;text-align:center;overflow:hidden}.question-card{margin-bottom:20px}.question-card h2{font-size:1.8em;margin-bottom:15px;color:#333}.options-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;justify-items:center}.option-button{border:none;padding:15px 10px;cursor:pointer;text-align:center;background-color:#eaf4fc;color:#333;font-size:1em;border-radius:8px;transition:all .3s ease;width:100%;max-width:180px;box-shadow:0 2px 6px #0000001a}.option-button:hover{background-color:#d4e8f8;transform:scale(1.05);box-shadow:0 4px 8px #00000026}.option-button:active{background-color:#c5e0f4;transform:scale(.95)}.results-section{margin-top:20px;padding:30px;background-color:#fff;border-radius:12px;box-shadow:0 4px 12px #0000001a;text-align:center}.results-section h2{font-size:2em;margin-bottom:20px;color:#333}.pie-chart-container{display:flex;justify-content:center;align-items:center;margin:20px 0;padding:10px;background:#f9f9f9;border-radius:12px;box-shadow:0 2px 6px #0000001a}.response-list{list-style:none;padding:0;margin:20px 0}.response-item{margin:15px 0;font-size:1.1em;line-height:1.6;padding:15px;border-radius:8px;background:#f9f9f9;border:1px solid #e0e0e0;text-align:left;box-shadow:0 2px 6px #0000000d}.response-item.correct{border-left:4px solid #4caf50;color:#4caf50;background:#e8f5e9}.response-item.incorrect{border-left:4px solid #f44336;color:#f44336;background:#fbeaea}.response-item .correct-answer{font-size:.9em;color:#333;margin-top:5px;display:block}.retry-button{margin-top:20px;padding:12px 20px;font-size:1em;color:#fff;background:#3f51b5;border:none;border-radius:8px;cursor:pointer;box-shadow:0 2px 6px #0000001a;transition:background .3s ease}.retry-button:hover{background:#303f9f}h1{font-size:2.5em;color:#3c763d;margin-bottom:20px;animation:fadeIn 2s ease-in-out;text-align:center;width:100%}.container{display:flex;justify-content:center;align-items:flex-start;width:100%;max-width:1200px}.diagram-container{flex:1;display:inline-block;margin-right:40px;animation:slideUp 1s ease-out;text-align:center}#info{flex:1;margin-top:20px;padding:20px;border-radius:8px;width:100%;max-width:500px;background-color:#f4f4f9;box-shadow:0 4px 10px #0000001a;opacity:0;transform:translateY(20px);animation:fadeInInfo .6s forwards}#info h3{font-size:1.3em;margin-bottom:10px;color:#4c9e4c}#info p{font-size:1em;color:#555;line-height:1.6}.body-svg{width:350px;height:auto;transition:transform .3s ease-in-out}.body-part{cursor:pointer;fill:transparent;stroke:#4caf50;stroke-width:2;transition:fill .3s ease}.body-part:hover{fill:#4caf504d}.body-part.active{fill:#4caf5080;stroke:#2c6b2f}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeInInfo{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}