:root{--color-theme:#5b4a96;--color-background:#fff;--color-text:rgb(0, 0, 0);--color-warning:rgb(204, 67, 53);--color-white:#fff;--radius-large:25px;--radius-small:0.5rem;--transition-default:0.3s ease;--shadow-default:0 4px 8px rgba(0, 0, 0, 0.1);--font-size-base:0.875rem;--font-size-large:1.5rem;--font-size-medium:1rem;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.25rem;--spacing-xl:1.5rem}.eye-color-calculator{max-width:500px;min-width:280px;width:70%;margin:2rem auto;padding:var(--spacing-xl);text-align:center;background-color:var(--color-background);border-radius:var(--radius-large);box-shadow:var(--shadow-default);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}.eye-color-calculator
h2{color:var(--color-theme);margin:var(--spacing-sm) 0;font-size:var(--font-size-large)}.eye-color-header{color:var(--color-text);font-size:var(--font-size-medium);font-weight:600;margin:0.7rem 0 0.2rem}.parent-section{margin:var(--spacing-lg) 0}.eye-button-container{display:flex;justify-content:center;gap:var(--spacing-lg);flex-wrap:wrap}.eye-button{display:flex;flex-direction:column;align-items:center;width:5rem;padding:var(--spacing-sm);border:none;border-radius:var(--radius-small);background:none;cursor:pointer;transition:transform var(--transition-default)}.eye-button:hover{transform:translateY(-2px)}.eye-button:focus-visible{outline:2px
solid var(--color-theme);outline-offset:2px}.eye-icon{width:3.75rem;height:3.75rem;margin-bottom:var(--spacing-xs);padding:0.3125rem;background-color:var(--color-white);border-radius:50%;transition:background-color var(--transition-default)}.eye-button.selected .eye-icon{background-color:var(--color-theme);opacity:0.7}.eye-color-text{margin-top:var(--spacing-xs);font-size:var(--font-size-base);color:var(--color-text)}.warning-text{color:var(--color-warning);font-size:var(--font-size-base)}.required{color:red}#calculate{margin:var(--spacing-sm);padding:0.625rem 1.25rem;color:var(--color-white);background-color:var(--color-theme);border:none;border-radius:var(--radius-large);font-size:var(--font-size-base);cursor:pointer;transition:opacity var(--transition-default),
transform var(--transition-default)}#calculate:hover{opacity:0.7}#calculate:focus-visible{outline:2px
solid var(--color-theme);outline-offset:2px}.result-container{display:none;margin-top:var(--spacing-md);border:1.5px solid var(--color-theme);border-radius:var(--radius-large);scroll-margin-bottom:20px}.eye-color-results-wrapper{display:flex;justify-content:center;gap:var(--spacing-md);flex-wrap:wrap}.result-wrapper{display:flex;flex-direction:column;align-items:center;width:5rem;padding:var(--spacing-sm);border-radius:var(--radius-small);transition:transform var(--transition-default)}.result-wrapper
img{width:3.75rem;height:3.75rem;padding:0.3125rem;background-color:var(--color-white);border-radius:50%;transition:background-color var(--transition-default)}.eye-color-result-text{margin:0;font-size:var(--font-size-base)}.eye-color-result{margin:0;font-size:var(--font-size-base);font-weight:600}@media (max-width: 480px){.eye-color-calculator{width:90%;padding:var(--spacing-md)}.eye-button-container{gap:0.75rem}.eye-button{width:4rem}.eye-icon{width:3rem;height:3rem}.eye-color-results-wrapper{flex-direction:column;gap:0;align-items:center}}