@font-face{font-family:Tajawal;src:url(/assets/Tajawal-Regular-lomV3N7R.ttf) format("truetype");font-weight:400;font-display:swap}@font-face{font-family:Tajawal;src:url(/assets/Tajawal-Bold-N9U1XsUl.ttf) format("truetype");font-weight:700;font-display:swap}:root{--bg:#081536;--primary:#6C3BFF;--cyan:#00D2FF;--green:#A8F466;--gold:#FFD166;--text:#E2E8F0;--muted:#ACBBD3;--surface:#102344;--line:#314668;--error:#FF9FA8;--white:#fff;--specimen-violet:#A999FF;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--control-radius:8px;--card-radius:16px;--motion-short:.16s;--motion-long:.24s;--shadow:0 12px 32px #00000018;--font:Tajawal,Arial,sans-serif;--text-sm:14px;--text-base:17px;--text-lg:24px;--text-title:40px;--hero-gradient:radial-gradient(ellipse at 10% 5%,#192456,var(--bg) 65%)}*{box-sizing:border-box}html{color-scheme:dark;scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--text-base);line-height:1.6}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}h1{font-size:clamp(32px,3.2vw,48px);line-height:1.3}h2{font-size:var(--text-lg);line-height:1.4}h3{font-size:20px;line-height:1.4}p{color:var(--muted);margin-top:var(--space-2)}bdi{direction:ltr;unicode-bidi:isolate;display:inline-block;font-variant-numeric:tabular-nums}small{font-size:var(--text-sm)}.muted{color:var(--muted)}.cyan-text{color:var(--cyan)}.app-shell{max-width:1600px;padding:0 var(--space-12);margin:auto;background:var(--hero-gradient)}.app-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);border-bottom:1px solid var(--line);min-height:128px}.brand{display:inline-flex;align-items:center;font-size:24px;font-weight:700;line-height:1.35}.logo-space{width:96px;height:96px;display:grid;place-items:center;flex:none}.logo-space img{width:64px;height:64px;object-fit:contain}.brand small{display:block;font-size:14px;font-weight:400;color:var(--muted);margin-top:4px}.header-caption{margin:0;font-size:16px}.main-nav{display:flex;gap:var(--space-2);padding:var(--space-6) 0;border-bottom:1px solid var(--line);flex-wrap:wrap}.button{min-height:44px;padding:10px 20px;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-weight:700;border:1px solid var(--line);border-radius:var(--control-radius);color:var(--text);background:transparent;line-height:1.4;transition:background var(--motion-short),border-color var(--motion-short);text-align:center}.button.primary{background:var(--primary);border-color:var(--primary);color:var(--white)}.button.primary:hover:not(:disabled){background:color-mix(in srgb,var(--primary),white 10%);border-color:var(--specimen-violet)}.button.secondary:hover:not(:disabled){background:var(--surface);border-color:var(--muted)}.button.quiet{border-color:transparent;padding:10px;min-width:44px}.button:disabled{cursor:not-allowed;background:var(--surface);color:var(--muted)}.button:active:not(:disabled){transform:translateY(1px)}:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}h1:focus{outline:none}.main-nav .button{font-size:14px;font-weight:400;padding:8px 14px}.main-nav .button bdi{color:var(--muted);font-size:12px}.main-nav .nav-active{color:var(--cyan);border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 5%,var(--bg))}.main-nav .button:disabled{background:transparent;color:var(--muted);border-style:dashed}.icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none}.icon svg{width:100%;height:100%}.badge{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:6px;padding:5px 10px;font-size:14px;color:var(--muted);font-weight:400;line-height:1.5}.badge.cyan{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 45%,var(--line))}.badge.green{color:var(--green)}.badge.gold{color:var(--gold)}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);margin:var(--space-8) 0}.page-heading p{max-width:700px;margin-top:var(--space-3)}.eyebrow{display:block;color:var(--cyan);font-size:14px;margin-bottom:var(--space-3)}.heading-actions{display:flex;flex-direction:column;gap:var(--space-3);flex:none;min-width:210px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:var(--space-6);min-width:0}.dashboard-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}.dashboard-stats .card{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-6)}.dashboard-stats .icon{color:var(--cyan);width:24px;height:24px}.dashboard-stats span{color:var(--muted);font-size:14px}.dashboard-stats strong{font-size:26px;color:var(--text);margin-left:8px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin:var(--space-8) 0 var(--space-4)}.section-heading.tight{margin:0 0 var(--space-4)}.section-heading>.muted{font-size:14px}.laboratories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}.laboratory{display:flex;flex-direction:column;padding:20px;position:relative;overflow:hidden}.lab-meta{display:flex;justify-content:space-between;gap:var(--space-2);align-items:center;font-size:14px}.lab-meta>span{display:flex;gap:var(--space-2);align-items:center}.fictional .lab-meta>span{color:var(--specimen-violet)}.plant .lab-meta>span{color:var(--green)}.animal .lab-meta>span{color:var(--gold)}.human .lab-meta>span{color:var(--cyan)}.lab-art{width:100%;height:190px;object-fit:contain;margin:var(--space-4) 0}.laboratory p{font-size:16px;min-height:76px;margin:var(--space-3) 0 var(--space-6)}.laboratory .button{margin-top:auto;width:100%;justify-content:space-between}.scope-card{margin-top:var(--space-6);display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);background:transparent}.scope-facts{display:flex;gap:var(--space-2);flex-wrap:wrap}.generation-progress{display:flex;align-items:center;gap:var(--space-6);padding:0;margin:var(--space-6) 0;list-style:none}.generation-progress li{display:flex;align-items:center;gap:var(--space-3);color:var(--muted);font-size:14px}.generation-progress li>bdi{border:1px solid var(--line);border-radius:var(--control-radius);padding:8px 12px;min-width:44px;text-align:center;font-size:20px}.generation-progress li.reached>bdi{color:var(--cyan);border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 5%,var(--bg))}.generation-progress li[aria-current]>span{color:var(--text)}.scope-card .generation-progress{margin:0}.parents-grid,.analysis-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}.specimen-stage{position:relative;display:flex;flex-direction:column;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:var(--control-radius);padding:var(--space-4);margin-bottom:var(--space-6)}.specimen-stage:before{content:"";position:absolute;top:10%;right:20%;bottom:10%;left:20%;background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%20viewBox='0%200%20120%20120'%3e%3cg%20fill='none'%20stroke='%236C3BFF'%20opacity='.28'%3e%3ccircle%20cx='60'%20cy='60'%20r='20'/%3e%3ccircle%20cx='60'%20cy='60'%20r='46'/%3e%3c/g%3e%3c/svg%3e") center/contain no-repeat;opacity:.2;pointer-events:none}.specimen{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}.specimen img,.specimen svg{height:210px;width:100%;object-fit:contain}.specimen-label{position:relative;font-size:14px;color:var(--muted)}.specimen-label bdi{color:var(--text);font-size:20px;margin-right:12px}.asset-note{font-size:12px;color:var(--gold);text-align:center}.trait-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:14px;margin-bottom:8px}.trait-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);border-top:1px solid var(--line);padding:var(--space-4) 0}.trait-row strong{display:block;font-size:16px}.trait-row strong bdi{color:var(--cyan);margin-right:8px}.trait-row span{display:block;color:var(--text);margin-top:4px}.trait-row small{display:block;color:var(--muted)}.select,.input{min-height:44px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:var(--control-radius);padding:8px 12px;max-width:100%;font-size:17px}.select{min-width:86px}.select:disabled,.input:disabled{color:var(--muted);cursor:not-allowed}.input:invalid{border-color:var(--error)}.action-bar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin:var(--space-6) 0;flex-wrap:wrap}.action-bar p{margin:0;max-width:65%}.count-control{display:flex;gap:var(--space-4);align-items:center}.notice{border:1px solid var(--line);border-right:3px solid var(--cyan);background:var(--surface);border-radius:var(--control-radius);padding:var(--space-4);margin:var(--space-6) 0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.notice.error{border-right-color:var(--error);color:var(--error)}.science-note{padding:var(--space-4) var(--space-6);background:var(--surface);border-right:3px solid var(--cyan);color:var(--muted);margin:var(--space-6) 0;font-size:14px;line-height:1.8}.science-note .icon{vertical-align:middle;margin-left:8px}.parent-review{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-top:var(--space-6)}.parent-review>div{border:1px solid var(--line);border-radius:var(--control-radius);padding:var(--space-4);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3)}.parent-review>div>bdi{font-size:22px;color:var(--cyan)}.parent-review p{width:100%;margin:0;font-size:15px}.prediction-card{margin-top:var(--space-6)}.prediction-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}.prediction-input{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);border:1px solid var(--line);border-radius:var(--control-radius);padding:var(--space-4)}.prediction-input>div:first-child{display:flex;gap:var(--space-3);align-items:center;min-width:0}.prediction-input bdi{font-size:20px;color:var(--cyan)}.prediction-input span{font-size:15px}.percent-input{display:flex;align-items:center;gap:var(--space-2);flex:none}.percent-input input{width:80px}.button-group,.tabs{display:flex;gap:var(--space-3);flex-wrap:wrap}.selected{border:2px solid var(--cyan)!important;background:color-mix(in srgb,var(--cyan) 7%,var(--bg))!important}.offspring{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-3)}.child-card{display:flex;flex-direction:column;min-width:0;text-align:center;justify-content:flex-start;background:var(--bg);padding:var(--space-3);border-radius:var(--control-radius);font-weight:400}.child-card:disabled{background:var(--bg);color:var(--text);cursor:default}.child-top{width:100%;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:13px;gap:4px}.child-top>span:nth-child(2):not(:last-child){color:var(--cyan);display:flex;align-items:center;gap:2px;font-size:11px}.child-top .icon{width:14px;height:14px}.specimen.compact img,.specimen.compact svg{height:110px}.child-genes{font-size:18px}.child-phenotype{font-size:13px;color:var(--muted);min-height:42px}.parentage{font-size:12px;color:var(--muted);margin-top:auto;padding-top:8px}.child-card .asset-note{font-size:10px;line-height:1.2}.analysis>.card{margin-top:var(--space-6)}.gamete-parent{margin-top:var(--space-6)}.gamete-parent strong{display:flex;justify-content:space-between;font-size:16px;gap:var(--space-3);flex-wrap:wrap}.gamete-parent strong bdi{color:var(--cyan)}.gametes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2);margin-top:var(--space-3)}.gametes>span{background:var(--bg);border:1px solid var(--line);border-radius:var(--control-radius);padding:8px;text-align:center;display:flex;flex-direction:column}.gametes bdi{color:var(--cyan);font-size:18px}.gametes small{color:var(--muted)}.punnett{width:100%;border-spacing:6px;text-align:center;margin-top:var(--space-3);table-layout:fixed}.punnett caption{caption-side:bottom;color:var(--muted);font-size:14px;padding:8px}.punnett th,.punnett td{background:var(--bg);border:1px solid var(--line);padding:12px;border-radius:6px;font-size:24px}.punnett th{color:var(--cyan);font-weight:400}.punnett td{background:color-mix(in srgb,var(--primary) 10%,var(--bg))}.genotype-summary{display:flex;justify-content:space-around;gap:var(--space-3);flex-wrap:wrap}.genotype-summary>span{display:flex;gap:12px}.genotype-summary strong{color:var(--cyan)}.distribution-head,.distribution-row{display:grid;grid-template-columns:minmax(0,1fr) 100px 100px 110px;gap:var(--space-4);align-items:center;padding:var(--space-4);border-bottom:1px solid var(--line)}.distribution-head{color:var(--muted);font-size:14px;background:var(--bg)}.distribution-row>div{display:flex;gap:var(--space-4);align-items:center}.distribution-row>div>span{font-size:16px}.phenotype-code{font-size:18px;color:var(--cyan);min-width:40px}.distribution-row small{display:block;color:var(--muted)}details summary{cursor:pointer;display:flex;gap:var(--space-4);align-items:center;min-height:44px;font-weight:700}details summary:before{content:"+";color:var(--cyan);font-size:22px}details[open] summary:before{content:"−"}.genotypes-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-4)}.genotypes-grid>div{padding:var(--space-3);background:var(--bg);border-radius:var(--control-radius);display:flex;justify-content:space-between;gap:var(--space-3)}.genotypes-grid span{color:var(--cyan)}.history-list{display:grid;gap:var(--space-6)}.history-facts{display:flex;justify-content:space-between;gap:var(--space-6);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--space-4) 0;color:var(--muted);flex-wrap:wrap}.history-facts bdi{display:block;color:var(--text)}.history-card .action-bar{margin-bottom:0}.history-card .action-bar>.muted{margin-left:auto}.experiment-id{font-size:14px;overflow-wrap:anywhere}.empty-state{padding:var(--space-16) var(--space-6);text-align:center}.empty-state>.icon{color:var(--cyan);width:40px;height:40px;margin-bottom:var(--space-4)}.empty-state .button{margin-top:var(--space-6)}.app-footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:var(--space-4);color:var(--muted);font-size:14px;padding:var(--space-6) 0;margin-top:var(--space-12)}.skip-link{position:fixed;top:-100px;right:16px;z-index:10;background:var(--text);color:var(--bg);padding:12px}.skip-link:focus-visible{top:16px}@media(min-width:1440px){.laboratory .lab-art{height:210px}.page-heading{margin:40px 0}.laboratory p{min-height:64px}}@media(min-width:1024px)and (max-width:1439px){.app-shell{padding:0 32px}.lab-meta{flex-wrap:wrap}.lab-art{height:160px}.laboratory,.dashboard-stats .card{padding:16px}.dashboard-stats strong{display:block}.offspring{grid-template-columns:repeat(4,minmax(0,1fr))}.scope-card{align-items:flex-start}.scope-facts{justify-content:flex-end}.genotypes-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:768px)and (max-width:1023px){.app-shell{padding:0 24px}.header-caption{display:none}.laboratories,.dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.offspring{grid-template-columns:repeat(4,minmax(0,1fr))}.analysis-grid{grid-template-columns:1fr}.scope-card{flex-direction:column;align-items:flex-start}.main-nav .button{padding:8px 10px}.main-nav .button .icon{display:none}.main-nav .button bdi{display:none}.prediction-grid{grid-template-columns:1fr}.genotypes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-heading{align-items:flex-start}.heading-actions{min-width:180px}.distribution-head,.distribution-row{grid-template-columns:minmax(0,1fr) 70px 80px 85px;gap:8px}.parents-grid{gap:16px}.parent-card{padding:16px}.trait-row{gap:8px}}@media(max-width:767px){.app-shell{padding:0 16px}.app-header{min-height:112px;gap:8px}.brand{font-size:20px}.brand small{font-size:12px}.header-caption,.app-header>.badge{display:none}.main-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:16px 0}.main-nav .button{font-size:13px;padding:8px 4px;min-width:0}.main-nav .button .icon,.main-nav .button bdi{display:none}.page-heading{flex-direction:column;align-items:stretch;gap:24px;margin:24px 0}.page-heading h1{font-size:32px}.page-heading p{font-size:16px}.heading-actions{flex-direction:row;flex-wrap:wrap}.heading-actions>.button{flex:1}.dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dashboard-stats .card{padding:12px;gap:8px}.dashboard-stats strong{display:block;font-size:24px}.dashboard-stats span{font-size:13px}.dashboard-stats .icon{width:20px;height:20px}.laboratories,.parents-grid,.analysis-grid,.prediction-grid,.parent-review{grid-template-columns:1fr}.section-heading{flex-wrap:wrap;align-items:flex-start}.section-heading>.muted{font-size:14px}.laboratory .lab-art{height:190px;margin:8px 0}.laboratory p{min-height:0}.laboratory .button{margin-top:0}.scope-card{flex-direction:column;align-items:stretch;padding:16px}.generation-progress{gap:8px;justify-content:space-between}.generation-progress li{flex-direction:column;gap:4px;position:relative;flex:1;font-size:12px;text-align:center}.generation-progress li>span:last-child:not(:nth-child(2)){position:absolute;left:-8px;top:16px}.scope-facts{justify-content:center}.scope-facts .badge{font-size:12px}.card{padding:16px}.parent-card .specimen img,.parent-card .specimen svg{height:190px}.trait-row small{font-size:13px}.action-bar{align-items:stretch}.action-bar p{max-width:100%;width:100%}.action-bar>.button{flex:1}.notice{flex-wrap:wrap;font-size:15px}.notice>.button{margin-right:auto}.prediction-input{padding:12px;gap:8px}.prediction-input>div:first-child{flex-direction:column;align-items:flex-start;gap:4px}.prediction-input span{font-size:14px}.percent-input input{width:72px}.button-group{width:100%}.button-group .button{flex:1}.offspring{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.child-card{padding:12px 8px}.child-genes{font-size:18px}.child-phenotype{font-size:13px}.analysis-grid .section-heading .select{width:100%}.distribution-head{display:none}.distribution-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px 0}.distribution-row>div{grid-column:1/-1;gap:12px}.distribution-row>span{display:flex;flex-direction:column;font-size:16px}.distribution-row>span:before{content:attr(data-label);font-size:12px;color:var(--muted);margin-bottom:4px}.distribution-row>span small{font-size:12px}.science-note{padding:16px;font-size:14px}.genotypes-grid{grid-template-columns:1fr}.history-facts{flex-direction:column;gap:12px}.history-card .action-bar>.muted{width:100%}.experiment-id{font-size:12px}.app-footer{flex-direction:column;font-size:13px;gap:8px}.specimen.compact img,.specimen.compact svg{height:110px}.child-card .asset-note{font-size:11px}.gametes{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}.plant-traits{display:flex;gap:24px;align-items:center;justify-content:center;position:absolute;bottom:16px;left:16px;border:1px solid var(--line);border-radius:var(--control-radius);padding:12px;background:var(--bg)}.seed{width:24px;height:24px;border:2px solid var(--muted);display:block}.seed.yellow{background:var(--gold)}.seed.green{background:var(--green)}.seed.smooth{border-radius:50%}.seed.wrinkled{clip-path:polygon(20% 0,50% 10%,75% 0,100% 30%,85% 55%,100% 80%,60% 100%,35% 85%,10% 100%,0 55%)}.flower{width:22px;height:22px;display:block;clip-path:polygon(50% 0,65% 25%,95% 20%,80% 50%,100% 75%,65% 75%,50% 100%,35% 75%,0 75%,20% 50%,5% 20%,35% 25%)}.flower.violet{background:var(--specimen-violet)}.flower.white{background:var(--white)}.compact .plant-traits{gap:12px;padding:4px;bottom:0;left:0}.compact .seed,.compact .flower{width:14px;height:14px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link:focus-visible{top:16px;width:auto;height:auto;overflow:visible;clip-path:none}