/* Reset default margins/paddings to avoid unwanted scrollbars */
         * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
         }
         body {
         font-family: var(--wp--preset--font-family--manrope), sans-serif;
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100vh;
         background-color: #f8f9fc;
         overflow: hidden;
         /* Prevent scrollbars */
         }
         :root {
         --wp--preset--font-family--manrope: "Manrope", sans-serif;
         --wp--preset--font-family--fira-code: "Fira Code", monospace;
         }
         .container {
         padding: 30px;
         border-radius: 10px;
         text-align: center;
         max-width: 350px;
         width: 100%;
         transition: all 0.3s ease-in-out;
         }
         .container img {
         width: 80px;
         }
         h2 {
         margin-bottom: 10px;
         color: #333;
         font-weight: 300;
         }
         p {
         color: #666;
         font-size: 14px;
         }
         .code-display {
         display: flex;
         justify-content: center;
         gap: 8px;
         margin-bottom: 15px;
         margin-top: 20px;
         font-size: 24px;
         font-weight: bold;
         color: #007bff;
         }
         /* Green digit styling */
         .green-digit {
         color: green;
         }
         .code-inputs {
         display: flex;
         justify-content: center;
         gap: 8px;
         margin: 20px 0;
         }
         .code-inputs input {
         width: 40px;
         height: 50px;
         text-align: center;
         font-size: 20px;
         border: 1px solid #ccc;
         border-radius: 8px;
         outline: none;
         transition: border-color 0.3s ease-in-out;
         }
         .code-inputs input:focus {
         border-color: #007bff;
         }
         .correct {
         border-color: green !important;
         }
         .incorrect {
         border-color: #de1303 !important;
         }
         /* Timer bars (two total) */
         .timer-container {
         position: relative;
         height: 5px;
         width: 100%;
         background: #ddd;
         border-radius: 5px;
         margin-top: 10px;
         overflow: hidden;
         transition: opacity 0.5s ease-in-out, margin-bottom 0.5s ease-in-out;
         }
         .progress-bar {
         height: 5px;
         width: 100%;
         background: #007bff;
         border-radius: 5px;
         transition: width 3s linear;
         }
         .timer-container-2 {
         margin-top: 10px;
         }
         .progress-bar-2 {
         transition: width 15s linear;
         }
         button {
         width: 100%;
         padding: 12px;
         border: none;
         border-radius: 5px;
         background: rgb(50, 114, 254);
         color: white;
         font-size: 16px;
         cursor: pointer;
         margin-top: 15px;
         transition: margin-top 0.5s ease-in-out;
         display: none;
         }
         .error-message,
         .success-message {
         margin-top: 10px;
         font-size: 14px;
         font-weight: bold;
         display: none;
         }
         .error-message {
         color: #de1303;
         }
         .success-message {
         color: green;
         }
         /* Responsive adjustments */
         @media (max-width: 550px) {
         .container {
         width: 90%;
         padding: 20px;
         }
         .code-inputs input {
         width: 60px;
         height: 70px;
         font-size: 18px;
         }
         }
         #progressBar {
         background: green !important;
         }
         @keyframes colorTransition {
         0% {
         background: #007bff;
         }
         /* Start as blue */
         75% {
         background: orange;
         }
         /* Change to orange at 75% */
         100% {
         background: red;
         }
         /* End as red */
         }
         .progress-bar-2 {
         background: #007bff;
         /* Initial color */
         animation: colorTransition 15s linear forwards;
         }
         #codeDisplay {
         display: none;
         }
         .cf-turnstile {
         margin-top: 1rem;
         }