:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.breeding-calculator{width:100%;max-width:1200px;margin:0 auto;animation:fadeIn .4s ease}.calculator-header{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:var(--space-2xl);padding:var(--space-lg) 0}.header-logo{margin-bottom:var(--space-md)}.logo-image{width:72px;height:72px;border-radius:var(--radius-md);border:2px solid var(--color-border);box-shadow:var(--shadow-md)}@keyframes logoColorCycle{0%,20%{opacity:1}25%,95%{opacity:0}to{opacity:1}}.logo-image-stack{position:relative;width:72px;height:72px}.logo-variant{position:absolute;top:0;left:0;width:72px;height:72px;border-radius:var(--radius-md);border:2px solid var(--color-border);box-shadow:var(--shadow-md);animation:logoColorCycle 20s infinite}.logo-variant:nth-child(1){animation-delay:0s}.logo-variant:nth-child(2){animation-delay:5s}.logo-variant:nth-child(3){animation-delay:10s}.logo-variant:nth-child(4){animation-delay:15s}.header-text{text-align:center}.main-title{font-size:1.75rem;font-weight:600;color:var(--color-text);margin-bottom:var(--space-xs);letter-spacing:-.02em}.subtitle{font-size:.9rem;font-weight:400;color:var(--color-text-secondary)}.parents-container{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-lg);align-items:start;margin-bottom:var(--space-xl)}.pairing-symbol{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:4.5rem;gap:var(--space-sm)}.cross-container{width:48px;height:48px;border-radius:50%;background:var(--color-bg-input);border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;transition:all var(--transition-normal)}.cross-container:hover{border-color:var(--color-primary);background:var(--color-primary-muted);transform:rotate(90deg)}.cross-icon{font-size:1.5rem;color:var(--color-text-muted);line-height:1}.pairing-label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:var(--color-text-muted)}.parent-selector{background:var(--color-bg-card);border-radius:var(--radius-lg);padding:var(--space-lg);border:1px solid var(--color-border);box-shadow:var(--shadow-sm);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.parent-selector:hover{border-color:var(--color-border-light);box-shadow:var(--shadow-md)}.parent-selector.male{border:2px solid var(--color-male);background:linear-gradient(180deg,var(--color-male-muted) 0%,var(--color-bg-card) 15%)}.parent-selector.male:hover{border-color:var(--color-male)}.parent-selector.female{border:2px solid var(--color-female);background:linear-gradient(180deg,var(--color-female-muted) 0%,var(--color-bg-card) 15%)}.parent-selector.female:hover{border-color:var(--color-female)}.parent-header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md);padding-bottom:var(--space-md);border-bottom:1px solid var(--color-border)}.parent-icon{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center}.parent-selector.male .parent-icon{background:var(--color-male-muted)}.parent-selector.female .parent-icon{background:var(--color-female-muted)}.sex-icon{width:22px;height:22px}.parent-selector.male .sex-icon{color:var(--color-male)}.parent-selector.female .sex-icon{color:var(--color-female)}.parent-title-section{flex:1}.parent-title{font-size:1.1rem;font-weight:600;margin:0 0 2px}.parent-selector.male .parent-title{color:var(--color-male)}.parent-selector.female .parent-title{color:var(--color-female)}.chromosome-label{font-size:.75rem;font-family:var(--font-mono);color:var(--color-text-muted)}.active-mutations-badge{padding:.35rem .75rem;border-radius:var(--radius-sm);font-size:.7rem;font-weight:600;font-family:var(--font-mono);background:var(--color-primary-muted);color:var(--color-primary);border:1px solid rgba(16,185,129,.3)}.sex-note{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-md);border-radius:var(--radius-sm);background:var(--color-female-muted);border:1px solid rgba(236,72,153,.2);font-size:.8rem;color:var(--color-text-secondary)}.sex-note-spacer{visibility:hidden}.info-icon{width:16px;height:16px;color:var(--color-female);flex-shrink:0}.mutation-groups{display:flex;flex-direction:column;gap:var(--space-md)}.mutation-group{background:var(--color-bg);border-radius:var(--radius-md);padding:var(--space-md);border:1px solid var(--color-border)}.group-header{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm)}.group-icon{font-size:.85rem}.group-title{flex:1;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);margin:0}.group-count{display:flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-sm);font-size:.65rem;font-weight:600;font-family:var(--font-mono);background:var(--color-primary);color:#fff}.category-footer{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);margin-top:var(--space-md);background:var(--color-bg-input);border-radius:var(--radius-sm);border-left:3px solid var(--color-primary);font-size:.75rem;line-height:1.5;color:var(--color-text-secondary)}.footer-icon{width:14px;height:14px;flex-shrink:0;margin-top:1px;color:var(--color-primary);opacity:.8}.category-footer span{flex:1}.mutation-list{display:flex;flex-direction:column;gap:2px}.mutation-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:var(--space-md);padding:var(--space-sm);border-radius:var(--radius-sm);transition:background var(--transition-fast)}.mutation-row:hover{background:var(--color-bg-input)}.mutation-row.is-active{background:var(--color-primary-muted)}.mutation-row.has-error{background:#ef44441a}.mutation-info{display:flex;flex-direction:column;gap:2px}.mutation-name{font-size:.85rem;font-weight:500;color:var(--color-text);line-height:1.3}.mutation-symbol{font-size:.7rem;font-family:var(--font-mono);color:var(--color-text-muted);display:inline-block}.mutation-symbol sup{font-size:.5rem;vertical-align:super}.mutation-toggle-group{display:flex;gap:2px;background:var(--color-bg);padding:3px;border-radius:var(--radius-md)}.mutation-toggle{padding:.4rem .75rem;font-size:.75rem;font-weight:500;border:none;background:transparent;color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast);border-radius:var(--radius-sm)}.mutation-toggle:hover:not(.active):not(.disabled){background:var(--color-bg-input);color:var(--color-text)}.mutation-toggle.active{background:var(--color-primary);color:#fff}.mutation-toggle.active.none{background:var(--color-bg-input);color:var(--color-text)}.mutation-toggle.active.split{background:linear-gradient(135deg,var(--color-primary) 50%,var(--color-bg-input) 50%);color:#fff}.mutation-toggle.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.error-message{grid-column:1 / -1;font-size:.7rem;color:var(--color-error)}.calculator-actions{display:flex;justify-content:center;gap:var(--space-md);margin-bottom:var(--space-xl)}.calculate-button{display:flex;align-items:center;gap:var(--space-sm);padding:.75rem 1.75rem;font-size:.9rem;font-weight:600;border:none;border-radius:var(--radius-md);background:var(--color-primary);color:#fff;cursor:pointer;transition:all var(--transition-fast)}.calculate-button svg{width:18px;height:18px}.calculate-button:hover:not(:disabled){background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.calculate-button:active:not(:disabled){transform:translateY(0)}.calculate-button:disabled{opacity:.5;cursor:not-allowed}.calculate-button.calculating{pointer-events:none}.spinner{width:18px;height:18px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.clear-button{display:flex;align-items:center;gap:var(--space-sm);padding:.75rem 1.25rem;font-size:.9rem;font-weight:500;border:1px solid var(--color-border);border-radius:var(--radius-md);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast)}.clear-button svg{width:16px;height:16px}.clear-button:hover{border-color:var(--color-error);color:var(--color-error);background:#dc26260f}.results-display{background:var(--color-bg-card);border-radius:var(--radius-lg);padding:var(--space-lg);border:1px solid var(--color-border);box-shadow:var(--shadow-sm)}.results-display.empty{padding:var(--space-2xl) var(--space-lg)}.empty-state{text-align:center;max-width:380px;margin:0 auto}.empty-icon{margin-bottom:var(--space-md)}.empty-icon svg{width:64px;height:64px;color:var(--color-border-light)}.empty-title{font-size:1.1rem;font-weight:600;color:var(--color-text);margin-bottom:var(--space-xs)}.empty-text{font-size:.85rem;color:var(--color-text-secondary);line-height:1.6}.results-header{margin-bottom:var(--space-lg)}.results-title{display:flex;align-items:center;gap:var(--space-sm);font-size:1.25rem;font-weight:600;color:var(--color-primary);margin:0}.results-icon{width:24px;height:24px}.warnings-section{margin-bottom:var(--space-lg)}.warning{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);margin-bottom:var(--space-sm);font-size:.85rem}.warning.lethal{background:#dc262614;border:1px solid rgba(220,38,38,.2);color:#dc2626}.warning-icon{width:18px;height:18px;color:var(--color-error);flex-shrink:0}.results-summary-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:var(--space-sm);margin-bottom:var(--space-lg)}.summary-card{padding:var(--space-md);background:var(--color-bg);border-radius:var(--radius-md);text-align:center;border:1px solid var(--color-border)}.summary-card.male{border-color:#3b82f64d;background:var(--color-male-muted)}.summary-card.female{border-color:#ec48994d;background:var(--color-female-muted)}.summary-card.highlight{border-color:#10b9814d;background:var(--color-primary-muted)}.summary-value{font-size:1.5rem;font-weight:700;font-family:var(--font-mono);color:var(--color-text)}.summary-card.male .summary-value{color:var(--color-male)}.summary-card.female .summary-value{color:var(--color-female)}.summary-card.highlight .summary-value{color:var(--color-primary)}.summary-label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-top:var(--space-xs)}.results-section{margin-bottom:var(--space-lg)}.results-section:last-of-type{margin-bottom:var(--space-md)}.section-title{display:flex;align-items:center;gap:var(--space-sm);font-size:.95rem;font-weight:600;margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:1px solid var(--color-border)}.section-icon{width:18px;height:18px}.section-icon.male{color:var(--color-male)}.section-icon.female{color:var(--color-female)}.results-section.male .section-title{color:var(--color-male)}.results-section.female .section-title{color:var(--color-female)}.results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-sm)}.result-card{background:var(--color-bg);border-radius:var(--radius-md);padding:var(--space-md);border:1px solid var(--color-border);transition:border-color var(--transition-fast)}.result-card:hover{border-color:var(--color-border-light)}.result-card.male{border-left:3px solid var(--color-male)}.result-card.female{border-left:3px solid var(--color-female)}.result-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm)}.sex-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:var(--radius-sm);font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}.sex-badge-icon{width:10px;height:10px}.sex-badge.male{background:var(--color-male-muted);color:var(--color-male)}.sex-badge.female{background:var(--color-female-muted);color:var(--color-female)}.sex-badge.either{background:#8b5cf61a;color:#7c3aed}.result-probabilities{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.result-probability{font-family:var(--font-mono);font-size:1rem;font-weight:600}.result-probability.tier-high{color:var(--tier-high)}.result-probability.tier-medium{color:var(--tier-medium)}.result-probability.tier-low{color:var(--tier-low)}.result-probability.tier-rare{color:var(--tier-rare)}.within-sex-probability{font-size:.65rem;font-family:var(--font-mono);font-weight:500;color:var(--color-text-secondary);background:var(--color-bg);padding:2px 6px;border-radius:var(--radius-sm)}.result-card.male .within-sex-probability{color:var(--color-male);background:var(--color-male-muted)}.result-card.female .within-sex-probability{color:var(--color-female);background:var(--color-female-muted)}.result-card-body{margin-bottom:var(--space-sm)}.result-phenotype{font-size:.9rem;font-weight:500;color:var(--color-text);margin-bottom:4px;line-height:1.4}.phenotype-visual{color:var(--color-text);font-weight:600}.phenotype-combo-name{color:var(--color-primary);font-weight:700;margin-right:4px}.phenotype-splits{color:var(--color-text-muted);font-weight:400;font-style:italic;font-size:.85em}.result-genotype code,.result-genotype .genotype-code,.result-genotype .autosomal-genotype{font-family:var(--font-mono);font-size:.75rem;color:var(--color-text-secondary);background:var(--color-bg-card);border:1px solid var(--color-border);padding:2px 6px;border-radius:var(--radius-sm)}.genotype-display{display:inline-flex;align-items:flex-start;gap:var(--space-sm);flex-wrap:wrap}.genotype-columns{display:inline-flex;gap:2px;background:var(--color-bg-card);border:1px solid var(--color-border);padding:4px 6px;border-radius:var(--radius-sm)}.chromosome-column{display:flex;flex-direction:column;align-items:center;min-width:2rem}.chromosome-label{font-size:.6rem;font-family:var(--font-mono);font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;padding-bottom:2px;margin-bottom:2px;border-bottom:1px solid var(--color-border);width:100%;text-align:center}.chromosome-alleles{display:flex;flex-direction:column;align-items:center;gap:1px}.allele-row{font-family:var(--font-mono);font-size:.75rem;color:var(--color-text);line-height:1.3}.allele-row sup{font-size:.5rem;vertical-align:super;color:var(--color-text-secondary)}.autosomal-genotype{font-family:var(--font-mono);font-size:.75rem;color:var(--color-text-secondary);background:var(--color-bg-card);border:1px solid var(--color-border);padding:2px 6px;border-radius:var(--radius-sm)}.autosomal-genotype sup{font-size:.5rem;vertical-align:super;color:var(--color-text-secondary)}.probability-bar-container{height:4px;background:var(--color-border);border-radius:2px;overflow:hidden}.probability-bar-fill{height:100%;border-radius:2px;transition:width .4s ease}.probability-bar-fill.tier-high{background:var(--tier-high)}.probability-bar-fill.tier-medium{background:var(--tier-medium)}.probability-bar-fill.tier-low{background:var(--tier-low)}.probability-bar-fill.tier-rare{background:var(--tier-rare)}.results-footer{display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-md);border-top:1px solid var(--color-border);flex-wrap:wrap;gap:var(--space-md)}.probability-check{font-size:.8rem;font-family:var(--font-mono)}.probability-valid{color:var(--color-text-muted)}.probability-warning{color:var(--color-warning)}.results-legend{display:flex;gap:var(--space-sm);flex-wrap:wrap}.legend-item{font-size:.65rem;font-weight:600;padding:3px 8px;border-radius:var(--radius-sm);background:var(--color-bg);border:1px solid var(--color-border)}.legend-item.tier-high{color:var(--tier-high);border-color:#0596694d}.legend-item.tier-medium{color:var(--tier-medium);border-color:#d977064d}.legend-item.tier-low{color:var(--tier-low);border-color:#ea580c4d}.legend-item.tier-rare{color:var(--tier-rare);border-color:#64748b4d}.calculator-footer{margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid var(--color-border)}.footer-content{text-align:center;max-width:500px;margin:0 auto}.data-attribution{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);margin-bottom:var(--space-sm);font-size:.8rem;color:var(--color-text-secondary)}.attribution-icon{width:16px;height:16px;flex-shrink:0}.disclaimer{font-size:.75rem;color:var(--color-text-muted);line-height:1.5}.mutation-row.is-blocked{opacity:.7}.mutation-row.is-blocked .mutation-name,.mutation-row.is-blocked .mutation-symbol{color:var(--color-text-muted)}.mutation-row.is-blocked .mutation-toggle-group{position:relative;pointer-events:none}.mutation-row.has-warning{border-left:2px solid var(--color-warning);padding-left:calc(var(--space-sm) - 2px)}.blocked-message,.warning-message{font-size:.7rem;line-height:1.4}.blocked-message{color:var(--color-text-muted)}.warning-message{color:var(--color-warning)}.constraint-warnings{background:#d977060f;border:1px solid rgba(217,119,6,.15);border-radius:var(--radius-md);padding:var(--space-md);margin-bottom:var(--space-lg)}.warnings-title{display:flex;align-items:center;gap:var(--space-sm);margin:0 0 var(--space-sm) 0;font-size:.85rem;font-weight:600;color:var(--color-warning)}.warning-title-icon{width:18px;height:18px}.constraint-warning{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-sm);border-radius:var(--radius-sm);margin-bottom:var(--space-xs);font-size:.8rem;line-height:1.5}.constraint-warning:last-child{margin-bottom:0}.constraint-warning.info{background:#3b82f60f;color:var(--color-text-secondary)}.constraint-warning.warning{background:#d977060f;color:var(--color-text-secondary)}.constraint-warning.error{background:#dc26260f;color:#b91c1c;border:1px solid rgba(220,38,38,.15)}.constraint-warning .warning-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:.6rem;font-weight:700;flex-shrink:0}.constraint-warning.info .warning-icon{background:#3b82f633;color:var(--color-male)}.constraint-warning.warning .warning-icon{background:#f59e0b33;color:var(--color-warning)}.constraint-warning.error .warning-icon{background:#ef444433;color:var(--color-error)}.constraint-warning .warning-content{display:flex;flex-direction:column;gap:2px}.constraint-warning .warning-text{color:inherit}.constraint-warning .warning-text strong{font-weight:600;color:var(--color-text)}.constraint-warning .warning-recommendation{font-size:.75rem;color:var(--color-text-muted)}@media(max-width:1024px){.parents-container{grid-template-columns:1fr;gap:var(--space-md)}.pairing-symbol{padding:var(--space-sm) 0;flex-direction:row}.cross-container{width:40px;height:40px}}@media(max-width:768px){.calculator-header{margin-bottom:var(--space-lg)}.logo-image{width:56px;height:56px}.main-title{font-size:1.5rem}.parent-selector{padding:var(--space-md)}.mutation-row{grid-template-columns:1fr;gap:var(--space-sm)}.mutation-toggle-group{width:100%;justify-content:center}.mutation-toggle{flex:1;text-align:center}.calculator-actions{flex-direction:column;align-items:stretch}.calculate-button,.clear-button{justify-content:center}.results-display{padding:var(--space-md)}.results-summary-cards{grid-template-columns:repeat(2,1fr)}.results-grid{grid-template-columns:1fr}.results-footer{flex-direction:column;text-align:center}.results-legend{justify-content:center}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #f8fafc;--color-bg-elevated: #ffffff;--color-bg-card: #ffffff;--color-bg-input: #f1f5f9;--color-border: #e2e8f0;--color-border-light: #cbd5e1;--color-text: #1e293b;--color-text-secondary: #475569;--color-text-muted: #94a3b8;--color-primary: #10b981;--color-primary-hover: #059669;--color-primary-muted: rgba(16, 185, 129, .1);--color-male: #3b82f6;--color-male-muted: rgba(59, 130, 246, .08);--color-female: #ec4899;--color-female-muted: rgba(236, 72, 153, .08);--color-warning: #d97706;--color-error: #dc2626;--color-success: #10b981;--tier-high: #059669;--tier-medium: #d97706;--tier-low: #ea580c;--tier-rare: #64748b;--font-sans: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);--transition-fast: .15s ease;--transition-normal: .25s ease}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);font-weight:400;line-height:1.6;color:var(--color-text);background:var(--color-bg);min-height:100vh}::selection{background:var(--color-primary-muted);color:var(--color-text)}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}#root{min-height:100vh;display:flex;flex-direction:column}.app{min-height:100vh;padding:var(--space-xl);position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}h1,h2,h3,h4,h5,h6{font-family:var(--font-sans);font-weight:600;line-height:1.3;color:var(--color-text)}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-hover)}button{font-family:inherit;cursor:pointer;border:none;background:none}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg)}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.app{padding:var(--space-md)}}@media(max-width:480px){html{font-size:14px}.app{padding:var(--space-sm)}}