{} *{} 
     


      #IE-warning {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: white;
      }
      .IE-warning-message {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
      }
    



 /* --- Brand Colours & General Styling --- */ :root { --brand-blue: #373dff; --brand-red-pink: #fc0767; --background-color: #f4f7f9; --text-color: #333333; --light-text-color: #666666; } body { font-family: 'Poppins', sans-serif; background-color: var(--background-color); color: var(--text-color); margin: 0; padding: 4rem 1rem 2rem 1rem; text-align: center; } /* --- Header & Intro --- */ header { max-width: 800px; margin: 2 auto 3rem auto; } header h1 { font-size: 2.5rem; font-weight: 700; color: var(--brand-blue); margin-bottom: 0.5rem; } header p { font-size: 1.1rem; color: var(--light-text-color); line-height: 1.6; } /* --- Results Section --- */ .results-container { max-width: 800px; margin: 3rem auto; text-align: left; min-height: 200px; /* Ensures space for loader */ } .result-bar { margin-bottom: 1.5rem; } .result-info { display: flex; justify-content: space-between; margin-bottom: .5rem; font-weight: 600; } .progress-bar-bg { background-color: #e0e0e0; border-radius: 20px; height: 25px; overflow: hidden; } .progress-bar { background-image: linear-gradient(to right, var(--brand-blue) 0%, var(--brand-red-pink) 100%); height: 100%; width: 0; /* Starts at 0, width set by JS */ border-radius: 20px; transition: width 1s ease-in-out; } /* --- Loading Spinner --- */ .loader { border: 5px solid #f3f3f3; /* Light grey */ border-top: 5px solid var(--brand-blue); /* Blue */ border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 3rem auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* --- Footer --- */ footer { margin-top: 4rem; color: #999; font-size: 0.9rem; }