:root {
  color-scheme: light;
}

// Hide the scrollbar for all types of browsers
::-webkit-scrollbar {
    width: 0 !important; /* Hides vertical scrollbar by making its width zero */ 
    height: 0 !important; /* Hides horizontal scrollbar by making its height zero */
    display: none; /* Fallback for some specific cases or older versions */
}
html, body {
    scrollbar-width: none; /* Hides the standard scrollbar in Firefox */
    -ms-overflow-style: none; /* Hides scrollbar in IE/Edge */	
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    font-family: Arial, sans-serif;
	font-size: 1.25em;
    text-align: center;   
	line-height: 1.6;
	padding: 0px;
    margin: 0px;
    color: var(--color-background);
}

#introPage {
	padding: 15px 15px 80px 15px !important;
}

.page {
    max-width: 600px;
    margin: 0px auto;
	padding: 20px 15px 80px 15px;	
}



.bottom {
  margin-top:60px;
}


.hidden {
  display: none;
}

.invisible {
  visibility: hidden;
}

#loadBox {
  position: relative;
  overflow: hidden;
}

.loadMessage {
	position: absolute;
	top: 0;
    left: 0;
    width: 100%; 
}

.symbol {
	filter: var(--filter-switch);
}

#introExpBanner {
	padding: 15px 0px;
	color: var(--color-primary);
}

input {
    width: calc(90%); /* Account for padding */
    padding: 12px 12px;
    border: 2px solid #808080; /* Light grey border, can be adjusted for new palette */
    border-radius: 8px;
    font-size: 1em;
    margin: 1em auto;
    box-sizing: border-box; /* Include padding and border in element's total width and height */
}

#loadSelButton {
	margin-top: 40px;
}

/* Button styling */
button {
    background-color: var(--color-primary);
	font-size: 1em;
    color: white;
    padding: 12px 12px;
	margin: 1em auto; 
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

button:disabled {
    background-color: #A0A0A0;
}



/* Basic spinner animation on the loading screen*/
#loadSpinner {
   border: 8px solid rgba(0.5, 0.5, 0.5, 0);
   border-left: 8px solid var(--color-primary); /* Spinner color matching heading */	
   border-bottom: 8px solid var(--color-primary); /* Spinner color matching heading */
   border-right: 8px solid var(--color-primary); /* Spinner color matching heading */
   border-radius: 50%;
   width: 60px;
   height: 60px;
   animation: spin 1s linear infinite;
   margin: 60px auto 20px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
	    
        .blink {
            animation: blink 0.4s infinite alternate;
        }
        @keyframes blink {
            0% { opacity: 1; }
            100% { opacity: 0.2; }
        }


        /* Styles for the round button */
        #loadButton {
            width: 50vw; /* Button width is half the viewport width */
            height: 50vw; /* Button height is half the viewport width to keep it round */
            max-width: 200px; /* Max width for desktop screens */
            max-height: 200px; /* Max height for desktop screens */
            border-radius: 50%; /* Make it perfectly round */
            background-color: var(--color-primary); /* Indigo 600 from Tailwind palette */
            color: white; /* White text color */
            cursor: pointer; /* Indicate it's clickable */
            transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out, border-color 0.2s ease-in-out; /* Smooth transitions for hover/active states and border color */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
            outline: none; /* Remove outline on focus */
            position: relative; /* Needed for positioning the spinner pseudo-element */

            /* Default state: dark grey border */
            border: 8px solid #606060; /* Dark grey border */
        }

        /* Styles for the button when it's active (pressed) */
        #loadButton:active {
            background-color: #A0A0A0; /* Darker indigo when pressed */
            transform: scale(0.98); /* Slightly shrink on press for visual feedback */
        }

        /* Spinner animation definition */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Spinner effect for the button when the 'spinning' class is applied */
        #loadButton.spinning {
            border-top-color: #A0A0A0; /* Dark grey top border */
            border-bottom-color: #606060; /* Dark grey bottom border */
            border-left-color: #606060; /* Light grey for left (Tailwind gray-300) */
            border-right-color: #606060; /* Light grey for right (Tailwind gray-300) */
            animation: spin 0.5s linear infinite; /* Apply the spin animation */
        }

        /* Container for the progress bar */
        #loadBarBox {
            width: 80vw; /* Progress bar width is 80% of viewport width */
            max-width: 320px; /* Max width for desktop screens (80% of 400px max container) */
            height: 30px; /* Fixed height for the progress bar container */
            background-color: #D8D8D8; /* Light grey */
            border-radius: 8px; /* Rounded corners for the container */
            /*box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); Inner shadow for depth */
            margin-top: 20px; /* Space between progress bar and button */			
            margin-bottom: 20px; /* Space between progress bar and button */
            margin-left: auto; /* Center the progress bar */
            margin-right: auto; /* Center the progress bar */
        }

        /* The actual progress bar fill */
        #loadBar {
            height: 100%; /* Take full height of its container */
            width: 0%; /* Initial width is 0% */
            background-color: var(--color-primary); /* Dark Orange */
            border-radius: 8px; /* Rounded corners for the fill */
            transition: width 0.1s linear; /* Smooth transition for width changes */
        }

        .pred {
            text-align: center;
            margin: 0px 0; /* Vertical spacing between boxes and content */
            padding: 40px 30px;
            background-color: #D0D0D0; /* Grey box */
            border-radius: 8px;
            font-weight: bold;
            color: #202020;
            user-select: none;
            -webkit-user-select: none; /* For Safari */
            -moz-user-select: none; /* For Firefox */
            touch-action: pan-y; /* Allow vertical scrolling, prevent horizontal or zoom on touch */
            position: relative;
        }

        .large {
			font-size: 1.5em;
		}

        .symbol-caption {
			font-size: 1.5em;
            margin-top: 40px;
		}

        .huge {
             font-size: 4em;
		}

        .qgap {
            height: 25vh;
        }

        .hgap {
            height: 50vh;
        }

        .gap {
            height: 110vh;
        }

button:hover:not(:disabled) {
    background-color: #606060; /* Darker grey on hover */
}

h1, h2, h3 {
    color: var(--color-primary);
}

a {
    color: var(--color-primary);
}

.bold {
   font-weight: bold;
}

        /* --- LAYOUT: Two Columns --- */
        #loadSelBox {
            flex-grow: 1;
            display: grid; 
            grid-template-columns: 1fr 1fr; /* Splits the space down the middle */
            gap: 16px; /* Space between the two columns */
            padding: 0 16px 60px 16px;
        }

        .loadSelColumn {
            display: flex;
            flex-direction: column;
            align-items: center; /* Centers images horizontally in the column */
            gap: 24px; /* Vertical spacing between images */
        }

        .loadSelImage {
            width: 100%; /* Take up the full width of the column */
            max-width: 100%;
            aspect-ratio: 1 / 1; /* Ensures square aspect ratio */
            border-radius: 12px;
            border: 1px solid var(--color-primary);
            transition: all 0.15s ease-in-out;
            cursor: pointer;
            box-sizing: border-box;
			background-color: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            object-fit: cover; 
        }

        /* Selected Image Style */
        .selected {
            border-color: var(--color-primary);
            border-width: 8px;
        }




.fixed {
   position: fixed;
   z-index: 1;
}

        .topBanner {
            width: 100vw;       /* Sets width to 100% of the viewport */
			box-sizing: border-box;
			padding: 0 20px 0 20px;
			margin-top: 0px;
	        margin-left: calc(50% - 50vw);
            color: white;
            text-align: center;
            font-size: 1.5em;
            font-weight: bold;
            overflow: hidden; 
            line-height: 50px; 
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            background: linear-gradient(
                110deg, /* Sweep horizontally */
                var(--color-primary) 0%,
                var(--color-primary) 45%,
                var(--color-highlight) 50%,
                var(--color-primary) 55%,
                var(--color-primary) 100%
            );
            background-position: var(--bg-position);
            /* Make the background very wide so the highlight can move across it */
            background-size: 200% 100%; 
            
            /* Animation Settings */
/*            animation: sweep-bg 40s linear infinite alternate;*/
/*            -webkit-animation: sweep-bg 40s linear infinite alternate;*/
        }

        /* 2. THE ANIMATION KEYFRAMES */
        @keyframes sweep-bg {
            0% { 
                /* Start: Move the background fully to the left (shows the right side of the gradient) */
                background-position: -10% 0; 
            }
            100% { 
                /* End: Move the background fully to the right (shows the left side of the gradient) */
                background-position: 110% 0; 
            }
        }




        /* Page Container (Replaces p-4 bg-white rounded-2xl shadow-xl max-w-sm w-full center-content) */
        .predSBox-page-container {
            padding: 1rem; /* p-4 */
            background-color: #fff; /* bg-white */
            border-radius: 1rem; /* rounded-2xl */
            /* shadow-xl equivalent */
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); 
            max-width: 24rem; /* max-w-sm */
            width: 100%; 
            margin: 0 auto; 
            box-sizing: border-box; 
        }

        /* Grid Layout (Replaces grid grid-cols-3 gap-4 mb-20) */
        .predSBox-box-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem; /* gap-4 */
            margin-top: 2rem; /* mb-20 */			
            margin-bottom: 2rem; /* mb-20 */
        }

        /* Box Item Wrapper (Replaces flex flex-col items-center) */
        .predSBox-box-item-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Typography Styles */
        .predSBox-intro-paragraph {
            margin-bottom: 2rem; /* mb-8 */
            font-size: 1rem; /* text-base */
            color: #374151; /* text-gray-700 */
        }

        .predSBox-transition-text {
            margin-bottom: 2.5rem; /* mb-10 */
            font-size: 1.25rem; /* text-xl */
            font-weight: 600; /* font-semibold */
            text-align: center;
            color: #1f2937; /* text-gray-800 */
        }

        .predSBox-section-heading {
            font-size: 1.125rem; /* text-lg */
            font-weight: 600; /* font-semibold */
            margin-bottom: 0.75rem; /* mb-3 */
            color: #1f2937; /* text-gray-800 */
        }

        /* Label Styles (Replaces mt-2 text-xl font-bold text-gray-700) */
        .predSBox-box-label {
            margin-top: 0.5rem; /* mt-2 */
            font-size: 1.25rem; /* text-xl */
            font-weight: 700; /* font-bold */
            color: var(--color-text); /* text-gray-700 */
			opacity: 0.75;
        }

        /* --- CORE BOX STYLING & OVERRIDES --- */

        /* Base box styling, using custom CSS for precise control over size and text */
        .predSBox-box {
            width: 100%; /* Take full width of the grid cell */
            aspect-ratio: 1 / 1; 
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2.0rem; 
            font-weight: 800;
            color: white;
            box-sizing: border-box;
        }

        /* Content layer to hold the letter and keep it centered */
        .predSBox-box-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: inherit;
            opacity: 1;
        }
        
        /* RULE 1: Hide box content ONLY in the first group */
        .predSBox-first-group .predSBox-box-content {
            opacity: 0;
        }
        
        /* RULE 2: OVERRIDES FOR COLOR ISOLATION (Simple solid colored squares, no border/labels/content) */
        .predSBox-color-override .predSBox-box {
            border: none !important;
            border-radius: 0 !important;
        }
        
        .predSBox-color-override .predSBox-box-content {
            opacity: 0 !important;
        }

        .predSBox-color-override .predSBox-box-item-wrapper .predSBox-box-label {
            display: none !important;
        }
        
        /* RULE 3: OVERRIDES FOR BORDER COLOR ISOLATION (Empty squares with medium, colored border) */
        .predSBox-bcolor-override .predSBox-box {
            background-color: transparent !important;
            border-radius: 0 !important;
            border-width: 16px !important;
            border-style: solid !important;
        }
        
        .predSBox-bcolor-override .predSBox-box-content {
            opacity: 0 !important;
        }

        .predSBox-bcolor-override .predSBox-box-item-wrapper .predSBox-box-label {
            display: none !important;
        }

        /* RULE 4: OVERRIDES FOR SHAPE/RADIUS ISOLATION (Homogeneous grey squares with original radii, no border/content, hidden labels) */
        .predSBox-shape-override .predSBox-box {
            background-color: #9ca3af !important;
            border: none !important;
            /* Original border radii are retained here */
        }

        .predSBox-shape-override .predSBox-box-content {
            opacity: 0 !important;
        }

        .predSBox-shape-override .predSBox-box-item-wrapper .predSBox-box-label {
            display: none !important;
        }
        
        /* RULE 5: OVERRIDES FOR LABEL ISOLATION (Solid grey squares with sharp corners, no border, VISIBLE labels) */
        .predSBox-label-override .predSBox-box {
            background-color: #9ca3af  !important;
            border: none !important;
            border-radius: 0 !important;
        }

        .predSBox-label-override .predSBox-box-content {
            opacity: 0 !important;
        }
        
        /* RULE 6: OVERRIDES FOR POSITION/NUMBER ISOLATION (Solid grey squares, sharp corners, no border, VISIBLE content 1-6, NO labels) */
        .predSBox-position-override .predSBox-box {
            background-color: #9ca3af  !important;
			color: #202020 !important;
            border: none !important;
            border-radius: 0 !important;
        }

        .predSBox-position-override .predSBox-box-content {
            opacity: 1 !important;
        }
        
        .predSBox-position-override .predSBox-box-item-wrapper .predSBox-box-label {
            display: none !important;
        }

        /* RULE 7: OVERRIDES FOR THICKNESS ISOLATION (Original color interior, GREY border, sharp corners, varied thickness, no content/labels) */
        .predSBox-thickness-override .predSBox-box {
            background-color: transparent !important;
            border-color: #9ca3af  !important;
            border-style: solid !important;
            border-radius: 0 !important;
        }

        /* RULE 8: OVERRIDES FOR THICKNESS ISOLATION (Original color interior, GREY border, sharp corners, varied thickness, no content/labels) */
        .predSBox-reveal-override .predSBox-box {
            background-color: transparent !important;
            border-style: solid !important;
			border-width: 2px !important;
			border-color: var(--color-text) !important;
			text-color: var(--color-text) !important;
        }

        .predSBox-icon {
            width: 100%;
            height: 100%;
            fill: none;
            stroke: var(--color-text); 
			stroke-width: 1;
        }

        .predSBox-inline-icon {
            display: inline-block;
            width: 1em;         /* Scales with parent font-size */
            height: 1em;        /* Scales with parent font-size */
            vertical-align: -0.125em; /* Nudges it for perfect text alignment */
            /*margin: 0 0.1em;*/
            fill: none;
            stroke: currentColor;
            /* UPDATED: Reduced stroke width for a lighter visual footprint */
            stroke-width: 2; 
        }


        .predSBox-thickness-override .predSBox-box-content {
            opacity: 0 !important;
        }

        .predSBox-thickness-override .predSBox-box-item-wrapper .predSBox-box-label {
            display: none !important;
        }


        /* ---------------------------------------------------------------------- */
        /* Individual Box Colors, Borders, and UNIQUE Corner Radii */
        
        /* Box 1: Background Red, Border Teal (Thickness: 20px) */
        .predSBox-box-1 {
            background-color: #ef4444; 
            border: 20px solid #14b8a6;
            border-top-left-radius: 1.5rem;
            border-top-right-radius: 0.75rem;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 1.5rem;
        }
        /* Box 2: Background Blue, Border Orange (Thickness: 16px) */
        .predSBox-box-2 {
            background-color: #3b82f6;
            border: 16px solid #f97316;
            border-top-left-radius: 0.75rem;
            border-top-right-radius: 1.5rem;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0.75rem;
        }
        /* Box 3: Background Green, Border Purple (Thickness: 28px) */
        .predSBox-box-3 {
            background-color: #22c55e;
            border: 28px solid #8b5cf6;
            border-top-left-radius: 0;
            border-top-right-radius: 1.5rem;
            border-bottom-right-radius: 1.5rem;
            border-bottom-left-radius: 0.75rem;
        }
        /* Box 4: Background Yellow, Border Pink (Thickness: 12px) */
        .predSBox-box-4 {
            background-color: #facc15;
            border: 12px solid #ec4899;
            border-top-left-radius: 0.75rem;
            border-top-right-radius: 0;
            border-bottom-right-radius: 1.5rem;
            border-bottom-left-radius: 0;
        }
        /* Box 5: Background Indigo, Border Lime (Thickness: 8px) */
        .predSBox-box-5 {
            background-color: #6366f1;
            border: 8px solid #84cc16;
            border-top-left-radius: 1.5rem;
            border-top-right-radius: 0.75rem;
            border-bottom-right-radius: 0.75rem;
            border-bottom-left-radius: 0;
        }
        /* Box 6: Background Cyan, Border Red (Thickness: 24px) */
        .predSBox-box-6 {
            background-color: #06b6d4;
            border: 24px solid #ef4444;
            border-top-left-radius: 0;
            border-top-right-radius: 1.5rem;
            border-bottom-right-radius: 0.75rem;
            border-bottom-left-radius: 1.5rem;
        }