*{box-sizing:border-box;margin:0;padding:0}body{background:#f5f5f5;color:#333;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif}#root,body{min-height:100vh}.app{display:flex;height:100vh;overflow:hidden}.dna-fullscreen{background:#0f172a;flex:1 1;position:relative}.genome-tabs{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff1a;border-radius:8px;bottom:24px;display:flex;gap:8px;left:50%;padding:6px;position:absolute;transform:translateX(-50%)}.genome-tabs button{background:#0000;border:none;border-radius:6px;color:#ffffffb3;cursor:pointer;font-size:.85rem;padding:8px 20px;transition:all .15s}.genome-tabs button:hover{background:#ffffff1a}.genome-tabs button.active{background:#fff;color:#0f172a}.viewer-controls{display:flex;gap:8px;left:16px;position:absolute;top:16px}.viewer-controls button{background:#ffffff1a;border:none;border-radius:4px;color:#ffffffb3;cursor:pointer;font-size:.75rem;padding:6px 12px;transition:all .15s}.viewer-controls button.active,.viewer-controls button:hover{background:#fff3;color:#fff}.side-panel{background:#fff;border-left:1px solid #e0e0e0;display:flex;flex-direction:column;height:100vh;width:340px}.panel-header{border-bottom:1px solid #e0e0e0;flex-shrink:0;padding:16px}.panel-header h1{color:#222;font-size:1rem;font-weight:600}.panel-content{display:flex;flex:1 1;flex-direction:column;gap:10px;overflow-y:auto;padding:12px}.organism-section{display:flex;flex-shrink:0;gap:10px}.organism-card{background:#fafafa;border:1px solid #e0e0e0;border-radius:6px;flex:1 1;padding:10px;position:relative}.organism-card h3{color:#444;font-size:.8rem;font-weight:600;margin-bottom:6px}.organism-card.offspring{background:#f0f9ff;border-color:#bae6fd;flex-shrink:0}.mutation-badge{background:#f0f;border-radius:10px;color:#fff;font-size:.6rem;padding:2px 6px;position:absolute;right:8px;top:8px}.card-controls{display:flex;gap:6px;margin-top:8px}.card-controls button{background:#fff;border:1px solid #d0d0d0;border-radius:4px;color:#444;cursor:pointer;flex:1 1;font-size:.7rem;padding:5px 8px;transition:background .15s}.card-controls button:hover{background:#f0f0f0}.crossover-controls{display:flex;flex-shrink:0;gap:8px}.crossover-btn{background:#1a1a1a;border:none;border-radius:6px;color:#fff;cursor:pointer;flex:1 1;font-size:.85rem;font-weight:500;padding:10px;transition:background .15s}.crossover-btn:hover{background:#333}.multi-btn{background:#fff;border:1px solid #1a1a1a;border-radius:6px;color:#1a1a1a;cursor:pointer;font-size:.85rem;font-weight:500;padding:10px 16px;transition:all .15s}.multi-btn:hover{background:#1a1a1a;color:#fff}.offspring-list{background:#fafafa;border:1px solid #e0e0e0;border-radius:6px;flex-shrink:0;padding:10px}.offspring-list h4{color:#666;font-size:.75rem;margin-bottom:8px}.offspring-thumbs{display:flex;gap:6px}.offspring-thumbs button{background:#fff;border:1px solid #d0d0d0;border-radius:4px;color:#444;cursor:pointer;font-size:.7rem;padding:6px 12px}.offspring-thumbs button.active{background:#1a1a1a;border-color:#1a1a1a;color:#fff}.punnett-section{background:#fafafa;border:1px solid #e0e0e0;border-radius:6px;flex-shrink:0;padding:10px}.punnett-section h4{color:#666;font-size:.75rem;margin-bottom:8px}.punnett-section select{border:1px solid #d0d0d0;border-radius:4px;font-size:.75rem;margin-bottom:8px;padding:6px 8px;width:100%}.punnett-section button{background:#fff;border:1px solid #1a1a1a;border-radius:4px;color:#1a1a1a;cursor:pointer;font-size:.75rem;padding:6px;width:100%}.punnett-section button:hover{background:#1a1a1a;color:#fff}.dna-fullscreen.expanded{bottom:0;height:100vh;left:0;position:fixed;right:0;top:0;z-index:100}.fullscreen-btn,.resize-handle,.side-panel.hidden{display:none}@media (max-width:900px){.fullscreen-btn{display:block}.resize-handle{align-items:center;bottom:0;cursor:ns-resize;display:flex;height:20px;justify-content:center;left:0;position:absolute;right:0;touch-action:none;z-index:20}.resize-bar{background:#fff6;border-radius:2px;height:4px;width:40px}.resize-handle:active .resize-bar,.resize-handle:hover .resize-bar{background:#ffffffb3}.app{flex-direction:column;height:100vh;overflow:hidden}.dna-fullscreen{flex:none;height:40vh;height:var(--dna-height,40vh);left:0;max-height:75vh;min-height:150px;position:fixed;right:0;top:0;z-index:10}.side-panel{border-left:none;border-top:1px solid #e0e0e0;height:60vh;height:calc(100vh - var(--dna-height, 40vh));margin-top:40vh;margin-top:var(--dna-height,40vh);overflow-y:auto;width:100%}.panel-content{padding-bottom:20px}.genome-tabs{bottom:12px;gap:4px;padding:4px}.genome-tabs button{font-size:.75rem;padding:6px 14px}.viewer-controls{gap:6px;left:10px;top:10px}.viewer-controls button{font-size:.7rem;padding:5px 10px}.dna-fullscreen.expanded{height:100vh;min-height:100vh}.dna-fullscreen.expanded+.side-panel,.side-panel.hidden{display:none}}@media (max-width:500px){.dna-fullscreen{height:35vh;height:var(--dna-height,35vh);min-height:150px}.side-panel{height:65vh;height:calc(100vh - var(--dna-height, 35vh));margin-top:35vh;margin-top:var(--dna-height,35vh)}.panel-header{padding:12px}.panel-header h1{font-size:.9rem}.panel-content{gap:8px;padding:10px}.organism-section{flex-direction:column;gap:8px}.organism-card{padding:8px}.organism-card h3{font-size:.75rem}.card-controls button{font-size:.65rem;padding:6px}.crossover-controls{gap:6px}.crossover-btn{font-size:.8rem;padding:10px 8px}.multi-btn{font-size:.8rem;padding:10px 12px}.genome-tabs{bottom:8px;gap:3px;padding:3px}.genome-tabs button{font-size:.7rem;padding:5px 10px}.viewer-controls{flex-wrap:wrap;max-width:50%}.viewer-controls button{font-size:.65rem;padding:4px 8px}.offspring-list,.punnett-section{padding:8px}.offspring-list h4,.punnett-section h4{font-size:.7rem}}.control-panel{background:#fafafa;border:1px solid #e0e0e0;border-radius:6px;flex-shrink:0;padding:12px}.control-panel h3{color:#444;font-size:.8rem;font-weight:600}.control-group,.control-panel h3{margin-bottom:12px}.control-group label{color:#555;display:block;font-size:.75rem;margin-bottom:6px}.control-group input[type=range]{-webkit-appearance:none;background:#e0e0e0;border-radius:2px;height:4px;outline:none;width:100%}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#2563eb;border-radius:50%;cursor:pointer;height:14px;width:14px}.range-labels{color:#888;display:flex;font-size:.65rem;justify-content:space-between;margin-top:2px}.control-group select{background:#fff;border:1px solid #d0d0d0;border-radius:4px;color:#333;cursor:pointer;font-size:.75rem;padding:6px 10px;width:100%}.control-group select:focus{border-color:#2563eb;outline:none}.toggle-label{align-items:center;cursor:pointer;display:flex;gap:10px;padding:8px 0}.toggle-label input{display:none}.toggle-slider{background:#d0d0d0;border-radius:10px;flex-shrink:0;height:20px;position:relative;transition:background .2s;width:36px}.toggle-slider:after{background:#fff;border-radius:50%;box-shadow:0 1px 3px #0003;content:"";height:16px;left:2px;position:absolute;top:2px;transition:transform .2s;width:16px}.toggle-label input:checked+.toggle-slider{background:#1a1a1a}.toggle-label input:checked+.toggle-slider:after{transform:translateX(16px)}.toggle-text{color:#444;font-size:.75rem}.legend{border-top:1px solid #e0e0e0;margin-top:12px;padding-top:12px}.legend h4{color:#666;font-size:.7rem;font-weight:500;margin-bottom:8px}.legend-items{grid-gap:4px;display:grid;gap:4px;grid-template-columns:1fr 1fr}.legend-item{align-items:center;color:#666;display:flex;font-size:.65rem;gap:4px}.color-dot{border-radius:50%;flex-shrink:0;height:8px;width:8px}.theme-buttons{display:flex;gap:6px}.theme-buttons button{background:#fff;border:1px solid #d0d0d0;border-radius:4px;color:#444;cursor:pointer;flex:1 1;font-size:.75rem;padding:6px 12px;transition:all .15s}.theme-buttons button:hover{background:#f0f0f0}.theme-buttons button.active{background:#1a1a1a;border-color:#1a1a1a;color:#fff}@media (max-width:500px){.control-panel{padding:10px}.control-panel h3{font-size:.75rem}.control-group,.control-panel h3{margin-bottom:10px}.control-group label{font-size:.7rem}.control-group select{font-size:.7rem;padding:8px 10px}.toggle-label{padding:6px 0}.toggle-text{font-size:.7rem}.toggle-slider{height:18px;width:32px}.toggle-slider:after{height:14px;width:14px}.toggle-label input:checked+.toggle-slider:after{transform:translateX(14px)}.theme-buttons button{font-size:.7rem;padding:6px 8px}.legend{margin-top:10px;padding-top:10px}.legend h4{font-size:.65rem}.legend-item{font-size:.6rem}.color-dot{height:6px;width:6px}}.gene-info{background:#fafafa;border:1px solid #e0e0e0;border-radius:6px;flex:1 1;min-height:0;overflow:hidden;padding:12px}.gene-info h3{color:#444;font-size:.8rem;font-weight:600;margin-bottom:10px}.placeholder{color:#888;font-size:.75rem;padding:16px 0;text-align:center}.info-section{border-bottom:1px solid #eee;margin-bottom:10px;padding-bottom:10px}.info-label{color:#888;font-size:.65rem;letter-spacing:.5px;margin-bottom:2px;text-transform:uppercase}.info-value{color:#333;font-size:.85rem;font-weight:500}.pair-display{align-items:center;display:flex;font-size:.9rem;gap:6px}.base{border-radius:3px;font-size:.75rem;font-weight:600;padding:3px 8px}.base-A{background:#fee2e2;color:#dc2626}.base-T{background:#d1fae5;color:#059669}.base-G{background:#dbeafe;color:#2563eb}.base-C{background:#fef3c7;color:#d97706}.pair-connector{color:#999}.base-details{display:flex;flex-direction:column;gap:6px;margin-top:10px}.base-card{background:#fff;border:1px solid #eee;border-radius:4px;overflow:hidden}.base-header{font-size:.7rem;font-weight:500;padding:5px 8px}.base-header.base-A{background:#fee2e2;color:#dc2626}.base-header.base-T{background:#d1fae5;color:#059669}.base-header.base-G{background:#dbeafe;color:#2563eb}.base-header.base-C{background:#fef3c7;color:#d97706}.base-card p{color:#666;font-size:.65rem;line-height:1.4;padding:6px 8px}.bond-info{background:#f0f9ff;color:#0369a1;font-size:.75rem;font-weight:500;margin-top:10px;text-align:center}.bond-info,.organism-display{border-radius:4px;padding:8px}.organism-display{background:#fff}.organism-avatar{border:1px solid #e0e0e0;border-radius:50%;height:48px;margin:0 auto 8px;overflow:hidden;position:relative;width:48px}.avatar-skin{border-radius:50%;inset:0;position:absolute;z-index:1}.avatar-face{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;position:absolute;z-index:3}.avatar-eyes{display:flex;gap:10px;margin-bottom:4px}.eye{background:#fff;height:7px;position:relative;width:7px}.eye,.eye:after{border-radius:50%}.eye:after{background:var(--eye-color);content:"";height:4px;left:1.5px;position:absolute;top:1.5px;width:4px}.avatar-mouth{border-bottom:1.5px solid #0000004d;border-radius:0 0 6px 6px;height:4px;width:12px}.avatar-hair{border-radius:24px 24px 0 0;height:30%;left:10%;position:absolute;right:10%;top:0;z-index:2}.dimples{top:52%;width:100%}.dimple,.dimples{position:absolute}.dimple{background:#0000001f;border-radius:50%;height:2px;width:2px}.dimple.left{left:24%}.dimple.right{right:24%}.freckles{display:flex;flex-wrap:wrap;gap:1px;justify-content:center;left:50%;position:absolute;top:38%;transform:translateX(-50%);width:18px}.freckles span{background:#8b451366;border-radius:50%;height:1.5px;width:1.5px}.traits-list{grid-gap:2px;display:grid;gap:2px;grid-template-columns:1fr 1fr}.trait{align-items:center;display:flex;font-size:.65rem;gap:3px}.trait-name{color:#888}.trait-value{color:#333;text-transform:capitalize}.genotype-info{border-top:1px solid #eee;margin-top:6px;padding-top:6px}.genotype-row{color:#888;display:flex;font-size:.6rem;justify-content:space-between}.genotype-row span{background:#f5f5f5;border-radius:2px;padding:2px 4px}.traits-extra{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.trait-tag{background:#e0e7ff;border-radius:3px;color:#4338ca;font-size:.55rem;padding:2px 5px}.trait-tag.red{background:#fee2e2;color:#dc2626}.trait-tag.affected,.trait-tag.status-affected{background:#fecaca;color:#b91c1c}.trait-tag.status-carrier{background:#fef3c7;color:#b45309}.trait-tag.normal-trait{background:#d1fae5;color:#047857}.sex-indicator{align-items:center;background:#fff;border:1px solid #e0e0e0;border-radius:50%;display:flex;font-size:.6rem;height:14px;justify-content:center;position:absolute;right:-2px;top:-2px;width:14px;z-index:10}.sex-indicator[data-sex=male]{color:#3b82f6}.sex-indicator[data-sex=female]{color:#ec4899}.disorders-section,.sex-linked-section{border-top:1px solid #eee;margin-top:6px;padding-top:6px}.section-label{color:#888;font-size:.55rem;letter-spacing:.5px;margin-bottom:4px;text-transform:uppercase}.disorders-list,.sex-linked-traits{display:flex;flex-wrap:wrap;gap:4px}.cleft-chin{background:#0000001a;border-radius:50%;bottom:18%;height:3px;width:4px}.cleft-chin,.widows-peak{left:50%;position:absolute;transform:translateX(-50%)}.widows-peak{border-left:6px solid #0000;border-right:6px solid #0000;border-top:8px solid;height:0;top:12%;width:0;z-index:3}.avatar-hair[data-type=curly]{border-radius:50% 50% 0 0}.avatar-hair[data-type=wavy]{border-radius:40% 40% 0 0}@media (max-width:500px){.organism-display{padding:6px}.organism-avatar{height:40px;margin-bottom:6px;width:40px}.avatar-eyes{gap:8px}.eye{height:6px;width:6px}.eye:after{height:3px;left:1.5px;top:1.5px;width:3px}.avatar-mouth{height:3px;width:10px}.traits-list{gap:1px}.trait{font-size:.6rem}.traits-extra{gap:3px}.trait-tag{font-size:.5rem;padding:1px 4px}.genotype-info{display:none}}.tooltip-wrapper{cursor:help;display:inline-flex;position:relative}.tooltip-content{background:#1a1a1a;border-radius:4px;box-shadow:0 2px 8px #0003;color:#fff;font-size:.7rem;line-height:1.4;margin-top:-8px;max-width:220px;padding:6px 10px;pointer-events:none;position:fixed;text-align:left;transform:translate(-50%,-100%);white-space:normal;z-index:1000}.tooltip-content:after{border:5px solid #0000;border-top-color:#1a1a1a;content:"";left:50%;position:absolute;top:100%;transform:translateX(-50%)}.punnett-overlay{align-items:center;background:#0009;display:flex;inset:0;justify-content:center;position:fixed;z-index:100}.punnett-modal{background:#fff;border-radius:8px;max-width:400px;padding:20px;width:90%}.punnett-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.punnett-header h3{color:#222;font-size:1rem}.close-btn{background:none;border:none;color:#666;cursor:pointer;font-size:1.2rem}.punnett-grid{grid-gap:4px;display:grid;gap:4px;grid-template-columns:60px 1fr 1fr;margin-bottom:20px}.punnett-cell{border-radius:4px;padding:12px 8px;text-align:center}.punnett-cell.corner{background:#0000}.punnett-cell.header{background:#f0f0f0;color:#444;font-size:.85rem;font-weight:600}.punnett-cell.result{background:#f8fafc;border:1px solid #e0e0e0;display:flex;flex-direction:column;gap:4px}.punnett-cell .alleles{color:#888;font-size:.75rem}.punnett-cell .expressed{color:#222;font-size:.8rem;font-weight:500;text-transform:capitalize}.probabilities h4{color:#444;font-size:.85rem;margin-bottom:12px}.prob-row{align-items:center;display:flex;gap:10px;margin-bottom:8px}.prob-trait{color:#666;font-size:.75rem;text-transform:capitalize;width:80px}.prob-bar{background:#e0e0e0;border-radius:4px;flex:1 1;height:8px;overflow:hidden}.prob-fill{background:#1a1a1a;border-radius:4px;height:100%}.prob-value{color:#444;font-size:.75rem;text-align:right;width:40px}@media (max-width:500px){.punnett-modal{margin:12px;padding:16px;width:95%}.punnett-header{margin-bottom:12px}.punnett-header h3{font-size:.9rem}.punnett-grid{gap:3px;grid-template-columns:50px 1fr 1fr;margin-bottom:16px}.punnett-cell{padding:8px 4px}.punnett-cell.header{font-size:.75rem}.punnett-cell .alleles{font-size:.65rem}.punnett-cell .expressed{font-size:.7rem}.probabilities h4{font-size:.75rem;margin-bottom:10px}.prob-row{gap:8px;margin-bottom:6px}.prob-trait{font-size:.65rem;width:60px}.prob-bar{height:6px}.prob-value{font-size:.65rem;width:35px}}.tutorial-overlay{align-items:center;display:flex;inset:0;justify-content:center;position:fixed;z-index:1000}.tutorial-backdrop{background:#000000b3;inset:0;position:absolute}.tutorial-modal{background:#fff;border-radius:12px;box-shadow:0 20px 60px #0000004d;max-width:480px;padding:32px;position:relative;width:90%}.tutorial-progress{display:flex;gap:6px;justify-content:center;margin-bottom:24px}.progress-dot{background:#e0e0e0;border-radius:50%;cursor:pointer;height:8px;transition:all .2s;width:8px}.progress-dot:hover{background:#bbb}.progress-dot.active{background:#1a1a1a;transform:scale(1.3)}.progress-dot.completed{background:#10b981}.tutorial-content{margin-bottom:32px;text-align:center}.tutorial-content h2{color:#1a1a1a;font-size:1.4rem;font-weight:600;margin-bottom:16px}.tutorial-content p{color:#555;font-size:.95rem;line-height:1.6}.tutorial-actions{align-items:center;display:flex;justify-content:space-between}.skip-btn{background:none;border:none;color:#888;cursor:pointer;font-size:.85rem;padding:8px 12px}.skip-btn:hover{color:#555}.nav-buttons{display:flex;gap:10px}.prev-btn{background:#fff;border:1px solid #d0d0d0;border-radius:6px;color:#444;cursor:pointer;font-size:.9rem;padding:10px 20px;transition:all .15s}.prev-btn:hover{background:#f5f5f5}.next-btn{background:#1a1a1a;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.9rem;font-weight:500;padding:10px 24px;transition:all .15s}.next-btn:hover{background:#333}.step-counter{color:#999;font-size:.75rem;position:absolute;right:20px;top:16px}@media (max-width:500px){.tutorial-modal{margin:12px;padding:20px;width:95%}.tutorial-progress{gap:4px;margin-bottom:16px}.progress-dot{height:6px;width:6px}.tutorial-content{margin-bottom:24px}.tutorial-content h2{font-size:1.1rem;margin-bottom:12px}.tutorial-content p{font-size:.85rem;line-height:1.5}.tutorial-actions{flex-direction:column-reverse;gap:12px}.nav-buttons{width:100%}.next-btn,.prev-btn{flex:1 1;font-size:.85rem;padding:12px 16px}.skip-btn{font-size:.8rem}.step-counter{font-size:.7rem;right:16px;top:12px}}
/*# sourceMappingURL=main.6c319791.css.map*/