@font-face{font-family:"Genetics Symbols";src:url("assets/genetics-symbols.ttf") format("truetype");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:Cairo;src:url('assets/Cairo.ttf') format('truetype');font-weight:200 1000;font-display:swap}
:root{font-family:Cairo,Tahoma,Arial,sans-serif;color-scheme:light;--ink:#1c3540;--muted:#667c80;--green:#078466;--forest:#078466;--forest-dark:#06674f;--lime:#b9ef75;--paper:#fff;--cream:#f2f6f5;--line:#dce7e4;--sage:#eaf6f0;--purple:#8263ba;font-synthesis:none}
*{box-sizing:border-box}html{height:100%;min-width:280px;overflow:hidden}body{height:100%;margin:0;overflow:hidden;background:var(--cream);color:var(--ink);font-size:14px;line-height:1.8;display:flex;justify-content:center;align-items:center;padding:max(18px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));-webkit-tap-highlight-color:transparent}button,summary,input,select,textarea{font:inherit}button,summary{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}button{border:0;color:inherit;background:none}button:disabled{cursor:default;opacity:.36}button:focus-visible,summary:focus-visible,[tabindex="0"]:focus-visible,a:focus-visible{outline:3px solid #9a7bd0;outline-offset:3px}h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4{line-height:1.6}h1:focus{outline:none}img,svg{display:block;max-width:100%}svg.icon{width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}.svg-library{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:fixed;top:-100px;right:20px;z-index:20;background:var(--green);color:white;padding:10px;border-radius:10px}.skip-link:focus{top:20px}
.app-frame{width:100%;max-width:480px;height:100%;max-height:850px;min-height:0;display:flex;flex-direction:column;position:relative}.site-header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;flex-shrink:0;padding:0 2px 10px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:9px;padding:0;min-width:0;text-align:right}.brand img{width:32px;height:32px;border-radius:10px}.brand span{font-size:16px;font-weight:800;white-space:nowrap}.header-actions{display:flex;gap:6px}.icon-button{position:relative;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--line);background:#fff;border-radius:14px;font-size:22px;line-height:1;transition:background .18s,transform .18s,border-color .18s}.icon-button:hover{background:var(--sage);border-color:#83bfae}.icon-button:active{transform:scale(.95)}#sound-toggle.is-muted{color:#8b9d9e}#sound-toggle.is-muted::after{content:"";width:23px;height:1.5px;background:currentColor;position:absolute;transform:rotate(-45deg)}
.app-shell{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;padding-top:12px}.screen{flex:1;min-height:0;width:100%;display:flex;flex-direction:column}.screen-enter{animation:screen-in .28s cubic-bezier(.2,.7,.3,1) both}.home-screen,.menu-screen{justify-content:center;align-items:center}.home-content{width:100%;max-width:340px;text-align:center;max-height:100%}.pea-mark{width:142px;height:126px;margin:0 auto 7px}.pea-mark svg{width:100%;height:100%;overflow:visible}.pea-pod{transform-origin:133px 29px;animation:pod-sway 5s ease-in-out infinite}.seed{transform-box:fill-box;transform-origin:center;animation:seed-pop .65s cubic-bezier(.2,.8,.3,1.3) both}.seed-two{animation-delay:.1s}.seed-three{animation-delay:.2s}.pea-spark{animation:spark 4s ease-in-out infinite}#home-title{font-size:29px;font-weight:850;letter-spacing:-.7px;line-height:1.6}#home-title>span{color:var(--green)}.author{font-size:13px;font-weight:600;color:var(--muted);margin-top:3px}.home-actions{display:flex;flex-direction:column;gap:10px;margin-top:25px}.button{min-height:50px;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;border-radius:15px;padding:10px 16px;font-size:14px;font-weight:750;line-height:1.65;transition:background .18s,transform .18s,box-shadow .18s;min-width:0}.button:active{transform:scale(.975)}.button-green{background:var(--green);color:#fff;box-shadow:0 4px 0 #05644d}.button-green:hover{background:#087657}.button-outline{background:#fff;border-color:#b8d3ca;color:#12644f;box-shadow:0 3px 0 #dce9e4}.button-outline:hover{background:#edf8f3}.button-soft{background:#eee9f8;border-color:#e0d7f0;color:#6c50a0;box-shadow:0 3px 0 #ded4ee}.button-soft:hover{background:#e6def4}.home-actions .button{justify-content:flex-start;padding-inline:18px}.home-actions .arrow,.home-actions .count{margin-inline-start:auto}.home-actions .button:first-child{min-height:54px}.count{font-size:12px;padding:0 8px;min-width:25px;border-radius:8px;background:#fff9;font-weight:700}.home-actions #resume-btn{order:1}.home-actions #saved-btn{order:2}
.menu-content{width:100%;max-width:420px;min-height:0}.page-heading{display:flex;align-items:center;gap:10px;min-height:48px;margin-bottom:18px}.page-heading h1{font-size:20px;font-weight:800;flex:1}.back-button{color:var(--green);font-family:Arial,sans-serif;font-size:24px}.heading-counter{background:#e4f2eb;color:#178166;min-width:32px;height:32px;border-radius:10px;display:flex;justify-content:center;align-items:center;font-size:13px;font-weight:700}.topics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.topic-card{position:relative;text-align:right;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;min-height:100px;padding:12px 14px;background:#fff;border:1px solid #cedfd8;border-bottom:3px solid #cedfd8;border-radius:17px;transition:background .18s,transform .18s,border-color .18s;animation:topic-in .28s ease-out both;animation-delay:calc(var(--card-order) * 28ms)}.topic-card:nth-child(3n+2){border-color:#ddd5eb;border-bottom-color:#d3c7e5;background:#f8f5fc}.topic-card:nth-child(3n){border-color:#e9dfc6;border-bottom-color:#e7d6aa;background:#fffdf6}.topic-card:hover{border-color:var(--green);background:#ecf8f1}.topic-card:active{transform:scale(.97)}.topic-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;color:#118b65;background:#e7f6ed}.topic-icon svg{width:21px;height:21px}.topic-card:nth-child(3n+2) .topic-icon{color:#8263ba;background:#ece4f6}.topic-card:nth-child(3n) .topic-icon{color:#a77916;background:#faf0d4}.topic-name{font-size:13px;font-weight:750;line-height:1.65;padding-inline-end:9px}.topic-arrow{position:absolute;top:17px;left:13px;color:#819b92;font-family:Arial,sans-serif;font-size:19px}.topic-pagination{margin-top:18px;display:flex;gap:20px;align-items:center;justify-content:center}.topic-pagination>span{font-size:13px;font-weight:700;color:var(--muted);min-width:48px;text-align:center}.topic-pagination .icon-button{width:44px;height:40px;border-radius:12px}
.game-screen{padding-top:3px}.game-nav{margin-bottom:10px;flex-shrink:0}.game-nav h1{font-size:17px;line-height:1.6}.game-nav .heading-counter{background:#eee9f8;color:#7753b0}.workspace-grid,.question-workspace{flex:1;min-height:0;display:flex;flex-direction:column}.study-scroll{min-height:0;flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b8cfc5 transparent;display:flex;flex-direction:column;padding:3px 2px 10px;scroll-padding-top:8px;-webkit-overflow-scrolling:touch}.question-card{position:relative;flex-shrink:0;margin-block:auto;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:0 8px 28px #20443c0b;transition:opacity .17s,transform .17s}.study-scroll:has(.solution-panel:not([hidden])) .question-card,.study-scroll:has(.hint-panel:not([hidden])) .question-card{margin-block:0 12px}.q-badge{display:inline-flex;color:#078466;font-size:12px;font-weight:700;background:#e5f5eb;border-radius:9px;padding:3px 10px;margin-bottom:12px}.question-text{font-size:16px;line-height:2.05;font-weight:550;overflow-wrap:anywhere}.question-card.is-leaving{opacity:0;transform:translateX(-12px)}.question-transition{animation:question-in .28s ease-out both}.hint-panel{flex-shrink:0;background:#fff8e5;border:1px solid #f1dfb4;color:#745b23;padding:14px;border-radius:14px;font-size:13px;line-height:1.95;margin-bottom:12px;animation:screen-in .2s ease-out}.game-dock{position:relative;flex-shrink:0;display:grid;grid-template-columns:minmax(0,1fr) 48px;align-items:center;gap:9px;padding:12px 0 6px;background:var(--cream);border-top:1px solid var(--line);z-index:3}.question-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.question-actions .button{padding:9px 10px;min-height:48px;font-size:14px;border-radius:13px}.toolbox>summary{list-style:none;width:48px;height:48px;background:#eee9f8;border-color:#dfd5ef;color:#7752b2;font-size:20px;letter-spacing:2px}.toolbox>summary::-webkit-details-marker{display:none}.toolbox[open]>summary{background:#8263ba;color:#fff;border-color:#8263ba}.question-tools{position:absolute;bottom:76px;left:0;width:min(278px,100%);display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;background:#fff;border:1px solid #dcd3ec;box-shadow:0 12px 40px #28384c24;border-radius:18px;animation:tools-in .2s ease-out;transform-origin:bottom left}.question-tools button{display:flex;align-items:center;gap:8px;justify-content:center;font-size:13px;font-weight:650;min-height:45px;border-radius:11px;border:1px solid var(--line);background:#f4f8f6}.question-tools button:hover,.question-tools button[aria-pressed="true"]{color:var(--green);background:#e1f2e8;border-color:#a3ccba}.question-tools .icon{width:18px;height:18px}
.solution-panel{flex-shrink:0;border:1px solid #cfe5d8;background:#fff;padding:17px;border-radius:20px;animation:screen-in .25s ease-out;margin-bottom:12px;scroll-margin-top:8px}.solution-title{font-size:18px;color:var(--green);margin-bottom:16px}.solution-steps{list-style:none;margin:0 0 15px;padding:0;display:flex;flex-direction:column;gap:9px}.solution-step{display:flex;gap:9px;align-items:flex-start;background:#f2f8f5;border-radius:11px;padding:11px}.solution-step>span{background:#d9eee1;color:#167a58;border-radius:7px;min-width:23px;height:25px;text-align:center;font-size:12px;font-weight:750}.solution-step p{font-size:13px;line-height:1.9}.solution-section-heading{display:flex;gap:8px;align-items:center;margin:20px 0 10px}.solution-section-heading>span{font-size:12px;color:#8767b8;font-weight:700}.solution-section-heading h3,.solution-subtitle,.expected-results h3,.solution-alternatives h3{font-size:14px;font-weight:750}.solution-subtitle{margin:17px 0 10px}.parents-grid,.offspring-grid,.phenotype-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.parent-card,.offspring-card{background:#f5f9f6;border:1px solid #e1ebe4;border-radius:13px;padding:12px 9px;text-align:center;display:flex;align-items:center;flex-direction:column;min-width:0}.parent-label{font-size:12px;color:var(--muted)}.genotype{font:600 24px/1.6 Georgia,serif;display:block;color:#166e53;overflow-wrap:anywhere;max-width:100%}.parent-phenotype,.offspring-phenotype{font-size:12px;line-height:1.8}.gametes{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;width:100%;border-top:1px solid var(--line);padding-top:8px;margin-top:8px}.gametes>span{font-size:11px;width:100%;color:var(--muted)}.gametes bdi{font:600 14px/1.6 Georgia,serif;background:#e2efe7;padding:2px 7px;border-radius:6px}.offspring-card{background:#fff}.offspring-grid{margin-top:8px}.probability{font-size:16px;color:#7c58ad;line-height:1.8;margin-top:5px}.probability-track{height:4px;width:100%;border-radius:5px;background:#eaf1ed;overflow:hidden;margin-top:8px;direction:ltr}.probability-track i{display:block;width:var(--probability);height:100%;background:#58b990;border-radius:5px;animation:fill-in .4s ease-out both;transform-origin:left}.phenotype-grid{margin-top:9px}.phenotype-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;background:#f1edf8;border:1px solid #e5dcf1;border-radius:12px;padding:11px;font-size:12px;line-height:1.85}.phenotype-card strong{font-size:16px;color:#7852aa;direction:ltr}.phenotype-card small{font-size:11px}.punnett-details,.genotype-details,.solution-alternatives>details{border:1px solid var(--line);border-radius:12px;margin-top:13px;overflow:hidden}.punnett-details>summary,.genotype-details>summary,.solution-alternatives summary{display:flex;align-items:center;gap:8px;list-style:none;min-height:48px;padding:10px 12px;background:#f1f7f3;font-size:13px;font-weight:650}.punnett-details>summary:before,.genotype-details>summary:before,.solution-alternatives summary:before{content:"+";font:20px Arial,sans-serif;color:var(--green)}details[open]>summary:before{content:"−"}.punnett-details>summary span{display:none}.genotype-details>summary span{margin-inline-start:auto;font-size:11px;color:var(--muted)}.punnett-wrap{overflow-x:auto;padding:9px;direction:ltr}.punnett-table{width:100%;border-spacing:3px;font:14px Georgia,serif;text-align:center;direction:ltr}.punnett-table th,.punnett-table td{padding:9px;min-width:40px;border-radius:5px;background:#f3f7f4}.punnett-table th{background:#ddefe3;color:#21694f}.punnett-table caption{font:11px/1.8 Cairo,sans-serif;caption-side:bottom;direction:rtl;color:var(--muted);padding-top:9px}.genotype-details>.offspring-grid{padding:9px;margin:0}.expected-results{margin-top:17px}.expected-results>p{font-size:11px;color:var(--muted);line-height:1.9;margin-top:8px}.solution-note{margin-top:15px;background:#fff8e8;color:#76602f;border-radius:12px;padding:12px;display:flex;gap:8px;font-size:12px;line-height:1.95}.solution-alternatives{margin-top:17px;font-size:13px}.solution-alternatives details>p{padding:10px}.solution-alternatives details>.parents-grid,.solution-alternatives details>.offspring-grid{margin:10px}.feedback-row{flex-shrink:0;padding:15px;border:1px solid var(--line);background:#fff;border-radius:16px}.feedback-row h2{font-size:14px}.feedback-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.feedback-button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;font-size:13px;font-weight:700;border:1px solid var(--line);border-radius:11px;background:#eff7f2;color:#187251}.wrong-button{background:#fbf3e5;color:#8f712d}.feedback-button.is-active{border-color:#2f9f76;opacity:1}.feedback-status{font-size:11px;color:var(--muted);line-height:1.9;margin-top:9px}
.saved-screen .page-heading{flex-shrink:0;margin-bottom:12px}.saved-grid{overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:12px;padding:3px 2px 10px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b8cfc5 transparent;flex:1}.saved-card{flex-shrink:0;padding:15px;background:#fff;border:1px solid var(--line);border-radius:17px}.saved-card>.topic-tag{font-size:12px;color:var(--green);font-weight:750}.saved-card>h3{font-size:14px;line-height:1.95;font-weight:550;margin-top:7px}.saved-card>div{display:flex;justify-content:space-between;gap:8px;margin-top:12px}.saved-open,.saved-remove{border-radius:10px;background:#e6f4ec;color:var(--green);border:1px solid #cce5d7;padding:8px 13px;font-size:12px;min-height:44px;font-weight:700}.saved-remove{background:#faf3ed;color:#a27342;border-color:#eddfd0}.empty-state{margin:auto;text-align:center;padding:20px 10px}.empty-state>.icon{width:42px;height:42px;margin:0 auto 15px;color:#977bbd}.empty-state strong{display:block;font-size:17px}.empty-state p{font-size:13px;color:var(--muted);margin-top:8px}.toast{position:fixed;bottom:max(28px,env(safe-area-inset-bottom));left:50%;width:max-content;max-width:calc(100% - 40px);transform:translate(-50%,10px);border:1px solid #416e61;background:#183f35;color:#fff;padding:11px 16px;border-radius:14px;font-size:13px;box-shadow:0 8px 25px #193b3122;opacity:0;visibility:hidden;z-index:30;pointer-events:none;transition:opacity .2s,transform .2s,visibility .2s;text-align:center}.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
@keyframes screen-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes topic-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes question-in{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}@keyframes tools-in{from{opacity:0;transform:translateY(7px) scale(.98)}to{opacity:1;transform:none}}@keyframes seed-pop{from{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}@keyframes pod-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}@keyframes spark{0%,100%{opacity:.4}50%{opacity:1}}@keyframes fill-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(min-width:650px){body{background:#e8efed}.app-frame{padding:18px 20px;background:var(--cream);border:1px solid #d5e0db;border-radius:28px;box-shadow:0 15px 60px #143f3510}.site-header{padding-bottom:12px;min-height:60px}.home-content{max-width:330px}}
@media(max-height:700px){body{padding-top:max(14px,env(safe-area-inset-top));padding-bottom:max(18px,env(safe-area-inset-bottom))}.pea-mark{width:110px;height:96px;margin-bottom:3px}#home-title{font-size:26px}.home-actions{margin-top:18px;gap:9px}.home-actions .button{min-height:47px}.topic-card{min-height:84px;padding:10px 12px;gap:5px}.topic-icon{width:27px;height:27px}.topic-icon svg{width:19px;height:19px}.topic-name{font-size:12px}.page-heading{margin-bottom:13px}.topic-pagination{margin-top:13px}.app-shell{padding-top:9px}}
@media(max-height:560px){.site-header{min-height:45px;padding-bottom:5px}.site-header .icon-button{height:38px;width:38px;border-radius:11px}.pea-mark{width:85px;height:73px}.home-actions{margin-top:12px;gap:7px}.home-actions .button{min-height:43px;padding-block:7px}.author{font-size:12px}#home-title{font-size:24px}.topic-card{min-height:68px;flex-direction:row;align-items:center;gap:8px;padding:9px}.topic-arrow{display:none}.topic-name{font-size:12px;padding:0}.topic-icon{width:25px;height:25px;flex-shrink:0}.topic-pagination{margin-top:10px}.page-heading{margin-bottom:9px;min-height:40px}.page-heading .icon-button{width:38px;height:38px}.page-heading h1{font-size:18px}.game-nav h1{font-size:15px}}
@media(orientation:landscape) and (max-height:480px){.home-content{display:grid;grid-template-columns:105px 1fr;text-align:right;align-items:center;gap:0 16px;max-width:100%}.pea-mark{grid-row:1/4;width:100px;height:110px}.home-actions{grid-column:2}.author{margin:0}.home-actions .button{min-height:40px;padding:5px 12px}.topic-card{min-height:51px}.topic-pagination{margin-top:8px}.page-heading{margin-bottom:8px}.topic-name{font-size:11px}.app-frame{max-width:600px}.site-header{min-height:40px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{html,body{height:auto;overflow:visible;background:white;display:block;padding:0}.app-frame,.app-shell,.screen,.workspace-grid,.question-workspace,.study-scroll{display:block;height:auto;max-height:none;overflow:visible;padding:0;border:0;box-shadow:none}.site-header,.game-nav,.game-dock,.feedback-row,.toast{display:none}.question-card,.solution-panel{break-inside:avoid;box-shadow:none}}
/* Keep both topic rows visible when the phone is held sideways. */
@media(orientation:landscape) and (max-height:480px){.topics-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.topic-card{min-height:52px}.topic-pagination .icon-button{height:40px}}
@media(min-height:561px){.topic-pagination .icon-button{height:44px}}
.toolbox>summary::before{display:none!important}

/* The app occupies the viewport on phone and desktop alike. */
body{background:var(--cream)}.app-frame{max-width:none;max-height:none;border:0;border-radius:0;box-shadow:none;padding:0;gap:0}.site-header{width:100%;padding-inline:4px}.app-shell{width:100%;align-self:center}.screen{max-width:1100px;margin-inline:auto}.home-content{max-width:350px}.menu-content{width:100%;max-width:860px}.site-header .brand{max-width:70%}
body[data-screen="home"] .site-header .brand{display:none}body[data-screen="home"] .site-header{justify-content:flex-end;border-bottom:0}.home-screen{padding-top:12px}
.home-utilities{position:fixed;right:max(20px,env(safe-area-inset-right));top:max(28px,calc(env(safe-area-inset-top) + 14px));z-index:8;display:flex;flex-direction:column;gap:8px}
.theme-toggle,.utility-button{position:relative;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #d5dfd8;border-radius:50%;background:#ffffffb8;color:#548b70;box-shadow:none;padding:0;transition:background .2s,transform .18s}
.theme-toggle:before,.utility-button:before{content:"";position:absolute;inset:-4px}.theme-toggle .icon,.utility-button .icon{width:18px;height:18px}.theme-toggle:hover,.utility-button:hover{background:#e7f1e9}.theme-toggle:active,.utility-button:active{transform:scale(.94)}.theme-sun{display:none!important}
.question-tools{width:220px}.study-scroll{padding-bottom:10px}.topic-arrow{width:20px;height:20px;display:flex}.topic-arrow .icon{width:18px;height:18px}.back-button .icon,.topic-pagination .icon{width:22px;height:22px}.saved-open{display:inline-flex;gap:10px;align-items:center}.saved-open .icon{width:17px;height:17px}.toolbox>summary{letter-spacing:0}
.curriculum-reasoning{padding:0 0 12px;border:0;border-bottom:1px solid var(--line);border-radius:0;margin-bottom:13px;background:transparent}.curriculum-reasoning h3{font-size:14px;margin:0 0 7px;color:var(--ink)}.curriculum-reasoning p{font-size:14px;line-height:2;margin:5px 0;overflow-wrap:anywhere}.parent-statements p{font-weight:650}
.curriculum-ratio{border-top:1px solid var(--line);padding:10px 0}.curriculum-ratio h4{font-size:13px;margin:0 0 5px;color:var(--muted)}.curriculum-ratio p{font-size:13px;line-height:2;margin:0;overflow-wrap:anywhere}.curriculum-ratio p>span{display:inline-block}.curriculum-ratio strong{color:var(--ink)}
.teacher-dialog{width:min(340px,calc(100vw - 36px));max-height:80dvh;overflow:auto;border:1px solid var(--line);border-radius:20px;padding:20px;color:var(--ink);background:var(--paper);box-shadow:0 16px 60px #0003}.teacher-dialog::backdrop{background:#171b1a80;backdrop-filter:blur(4px)}.teacher-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.teacher-dialog h2{font-size:18px}.teacher-dialog>p{font-size:13px;color:var(--muted);margin:3px 0 18px}.teacher-dialog nav{display:grid;gap:8px}.teacher-dialog a{display:flex;align-items:center;justify-content:space-between;min-height:46px;padding:9px 14px;border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none;font-size:14px}.teacher-dialog a:hover{background:var(--sage)}.teacher-dialog-heading .icon-button{width:36px;height:36px;border-radius:50%}
/* Sampled directly from the supplied Haikal Wizari reference. */
:root[data-theme="dark"]{color-scheme:dark;--ink:#f5eee6;--muted:#c9bfb1;--green:#278c6a;--forest:#6fba98;--forest-dark:#1d6b51;--cream:#393837;--line:#67625d;--sage:#4a4845;--paper:#454341}
[data-theme="dark"] body,[data-theme="dark"] .app-frame{background:transparent}
[data-theme="dark"] .icon-button,[data-theme="dark"] .button-outline{background:#454341;color:#ddd2c3;border-color:#67625d;box-shadow:none}
[data-theme="dark"] .button-soft{background:#51495a;color:#e4d3f1;border-color:#726180;box-shadow:none}[data-theme="dark"] .button-green{background:#287d60;box-shadow:0 3px 0 #245e4b}[data-theme="dark"] .button-green:hover{background:#2d8868}[data-theme="dark"] .button-outline:hover{background:#504d49}
[data-theme="dark"] .count,[data-theme="dark"] .heading-counter{background:#57524d;color:#eadbc7}[data-theme="dark"] .game-nav .heading-counter{background:#57524d;color:#eadbc7}
[data-theme="dark"] .topic-card,[data-theme="dark"] .topic-card:nth-child(3n+2),[data-theme="dark"] .topic-card:nth-child(3n){background:#454341;border-color:#67625d;box-shadow:none}[data-theme="dark"] .topic-card:hover{background:#4c4946;border-color:#8b8174}
[data-theme="dark"] .topic-icon,[data-theme="dark"] .topic-card:nth-child(3n+2) .topic-icon,[data-theme="dark"] .topic-card:nth-child(3n) .topic-icon{background:#514d48;color:#dccbb3}[data-theme="dark"] .topic-card:nth-child(3n+1) .topic-icon{color:#9bc5ad}[data-theme="dark"] .topic-card:nth-child(3n+2) .topic-icon{color:#b6cbd0}[data-theme="dark"] .topic-arrow{color:#cabda9}
[data-theme="dark"] .question-card,[data-theme="dark"] .solution-panel,[data-theme="dark"] .saved-card{background:#454341;border-color:#67625d;box-shadow:none}[data-theme="dark"] .q-badge{background:#514e48;color:#e4d4b9}
[data-theme="dark"] .solution-title,[data-theme="dark"] #home-title>span,[data-theme="dark"] .saved-card>.topic-tag{color:#a1c9b0}[data-theme="dark"] .solution-step,[data-theme="dark"] .parent-card,[data-theme="dark"] .offspring-card{background:#4b4844;border-color:#67625d}[data-theme="dark"] .solution-step>span{background:#5b554d;color:#e8dcc9}
[data-theme="dark"] .genotype{color:#e5d5b8}[data-theme="dark"] .gametes bdi{background:#5b554d;color:#f0e0c5}[data-theme="dark"] .probability{color:#dbc7e8}[data-theme="dark"] .probability-track{background:#5a5650}[data-theme="dark"] .phenotype-card{background:#4e494f;border-color:#756675}[data-theme="dark"] .phenotype-card strong{color:#e0c9ee}[data-theme="dark"] .solution-section-heading>span{color:#d4bea3}
[data-theme="dark"] .punnett-details>summary,[data-theme="dark"] .genotype-details>summary,[data-theme="dark"] .solution-alternatives summary{background:#504c47}[data-theme="dark"] .punnett-details>summary:before,[data-theme="dark"] .genotype-details>summary:before,[data-theme="dark"] .solution-alternatives summary:before{color:#deccb0}[data-theme="dark"] .punnett-table td{background:#4b4844}[data-theme="dark"] .punnett-table th{background:#5b554d;color:#f0e0c5}[data-theme="dark"] .solution-note{background:#555044;color:#eddfbe}
[data-theme="dark"] .question-tools,[data-theme="dark"] .question-tools button{background:#4b4844;border-color:#71675d;color:#e9ddcc}[data-theme="dark"] .toolbox>summary{background:#51495a;color:#e0c9ee;border-color:#726180}[data-theme="dark"] .saved-open{background:#4d584e;color:#d0e3d5;border-color:#758a78}[data-theme="dark"] .saved-remove{background:#584b42;color:#e4c7a8;border-color:#8b7560}
[data-theme="dark"] .theme-toggle,[data-theme="dark"] .utility-button{background:#454341;color:#c8bdac;border-color:#67625d}[data-theme="dark"] .theme-toggle:hover,[data-theme="dark"] .utility-button:hover{background:#514d48}[data-theme="dark"] .theme-moon{display:none!important}[data-theme="dark"] .theme-sun{display:block!important}
@media(min-width:800px){.app-shell{padding-top:18px}.topics-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.topic-card{min-height:105px}.question-card{padding:24px}.question-text{font-size:17px}.game-dock{padding-bottom:8px}.parents-grid,.offspring-grid,.phenotype-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}
@media(max-height:560px){.home-utilities{top:max(18px,env(safe-area-inset-top))}.home-screen{padding-top:0}}
@media print{.home-utilities,.teacher-dialog{display:none!important}}

/* Comfortable reading width, without reinstating the desktop phone-card frame. */
body{font-size:13px}.app-frame{max-width:820px}.screen{max-width:760px}.menu-content{max-width:660px}.home-content{max-width:320px}.brand span{font-size:14px}#home-title{font-size:25px}.author{font-size:12px}.button{font-size:13px}.topic-name{font-size:12px}.page-heading h1{font-size:20px}.game-nav h1{font-size:15px}.question-text{font-size:14px;line-height:1.95}.question-card{padding:17px}.solution-panel{padding:15px}.solution-title{font-size:16px}.curriculum-reasoning h3{font-size:13px}.curriculum-reasoning p{font-size:12.5px;line-height:1.95}.genotype{font-size:19px}.solution-section-heading h3,.solution-subtitle{font-size:13px}.pea-shadow{fill:#cbded7}[data-theme="dark"] .pea-shadow{fill:#242322}
.social-label{display:flex;flex-direction:column;gap:1px}.social-label strong{font-size:13px;font-weight:650}.social-label small{font-size:11.5px;color:var(--muted);text-align:start}.teacher-dialog a{padding:10px 13px}
.study-cross{margin:12px 0 16px}.cross-study-table{border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed;border:1px solid var(--line);border-radius:13px;overflow:hidden;text-align:center;background:var(--paper)}.cross-study-table caption{caption-side:top;font-size:13px;font-weight:750;text-align:right;padding:0 0 8px}.cross-study-table th,.cross-study-table td{padding:10px 5px;vertical-align:middle;border-bottom:1px solid var(--line)}.cross-study-table thead th{font-size:11px;font-weight:650;background:var(--sage);line-height:1.7}.cross-study-table thead th span{display:block;font-weight:500}.cross-stage{width:34px;font:italic 16px Georgia,serif;color:var(--muted)}.cross-sign{width:23px;color:var(--muted);font-size:19px}.cross-study-table tr:last-child th,.cross-study-table tr:last-child td{border-bottom:0}.cross-study-table .genotype{font-size:20px}.cross-gametes{display:flex;justify-content:center;flex-wrap:wrap;gap:5px}.cross-gametes bdi{font:600 15px Georgia,serif;padding:4px 6px;border:1px solid var(--line);border-radius:7px}.cross-arrow{height:25px;display:flex;justify-content:center;align-items:center;color:var(--muted)}.cross-arrow svg{width:20px;height:20px}.cross-children{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:7px}.cross-child{padding:7px 5px;background:var(--sage);border-radius:9px;display:flex;flex-direction:column;align-items:center;gap:2px}.cross-child>span{font-size:11px;line-height:1.65}.cross-child small{font-size:11px;color:var(--muted)}.cross-child[data-viable="false"]{border:1px dashed var(--muted)}.cross-study-table .punnett-details{margin:0}.cross-study-table .punnett-details>summary{min-height:38px;font-size:12px}.cross-study-table .punnett-table{font-size:13px;border-spacing:3px}.cross-study-table .punnett-table th,.cross-study-table .punnett-table td{padding:7px 5px;border:0}.cross-study-table .genotype-details{margin-top:8px}.cross-study-table .genotype-details>summary{font-size:11px;min-height:38px}.cross-survivors{padding:10px 0}.cross-survivors h4{font-size:12px;margin-bottom:7px}.cross-survivors .offspring-card{padding:7px}.cross-survivors .genotype{font-size:17px}.cross-survivors .probability{font-size:13px}.cross-survivors .probability-track{display:none}
[data-theme="dark"] .cross-study-table{background:#454341}[data-theme="dark"] .cross-study-table thead th,[data-theme="dark"] .cross-child{background:#504c47}
@media(min-width:800px){.question-text{font-size:14.5px}.topic-card{min-height:96px}.question-card{padding:20px}.question-actions .button{font-size:13px}.home-utilities{right:max(24px,calc((100vw - 820px)/2 - 52px))}}
@media(max-height:560px){#home-title{font-size:23px}.page-heading h1{font-size:18px}.game-nav h1{font-size:14px}}

.punnett-phenotype{display:block;font:10.5px/1.6 Cairo,sans-serif;margin-top:4px;overflow-wrap:anywhere}.punnett-table td[data-group="0"] .punnett-phenotype{color:#227053}.punnett-table td[data-group="1"] .punnett-phenotype{color:#8058a4}.punnett-table td[data-group="2"] .punnett-phenotype{color:#977020}.punnett-table td[data-group="3"] .punnett-phenotype{color:#336d99}[data-theme="dark"] .punnett-table td[data-group="0"] .punnett-phenotype{color:#b3cbb9}[data-theme="dark"] .punnett-table td[data-group="1"] .punnett-phenotype{color:#d5c1e2}[data-theme="dark"] .punnett-table td[data-group="2"] .punnett-phenotype{color:#ddc895}[data-theme="dark"] .punnett-table td[data-group="3"] .punnett-phenotype{color:#b7cdda}

/* Theme changes animate colours only; layout and page position remain stable. */
.theme-changing :where(body,.app-frame,.site-header,.brand,.author,#home-title,#home-title>span,.button,.count,.icon-button,.theme-toggle,.utility-button,.teacher-dialog,.teacher-dialog a,.social-label small,.pea-shadow){transition-property:background-color,color,border-color,box-shadow,fill,stroke;transition-duration:550ms;transition-timing-function:cubic-bezier(.22,1,.36,1)}
.theme-toggle .icon{position:absolute;inset:0;margin:auto;transform-origin:center;pointer-events:none;transition:transform 550ms cubic-bezier(.22,1,.36,1),opacity 280ms ease}
.theme-toggle .theme-moon,.theme-toggle .theme-sun{display:block!important}
.theme-toggle .theme-moon{opacity:1;transform:rotate(0) scale(1)}
.theme-toggle .theme-sun{opacity:0;transform:rotate(-90deg) scale(.35)}
[data-theme="dark"] .theme-toggle .theme-moon{opacity:0;transform:rotate(75deg) scale(.35)}
[data-theme="dark"] .theme-toggle .theme-sun{opacity:1;transform:rotate(0) scale(1)}
@media(prefers-reduced-motion:reduce){.theme-toggle .icon{transition:none!important}.theme-changing *{transition:none!important}}

/* Cross flow follows the teacher's compact visual reference. */
.cross-flow{border:1px solid var(--line);border-radius:16px;background:var(--paper);overflow:hidden;margin:12px 0 16px}.cross-flow-heading{padding:10px 14px;background:#eff4ed;border-bottom:1px solid var(--line);text-align:right}.cross-flow-heading h3{font-size:12px;font-weight:750;color:var(--ink)}
.flow-grid{display:grid;grid-template-columns:25px minmax(0,1fr);gap:12px 2px;direction:ltr;padding:12px 10px 15px}.flow-grid>.cross-stage{width:auto;font:600 14px/1.4 Georgia,serif;color:var(--ink);text-align:left;min-width:0}.flow-p-label{grid-column:1;grid-row:1;align-self:end;padding-bottom:7px}.flow-g-label{grid-column:1;grid-row:2;align-self:center}.flow-f-label{grid-column:1;grid-row:3;align-self:start;padding-top:27px}
.flow-parents,.flow-gamete-row{grid-column:2;display:grid;grid-template-columns:minmax(0,1fr) 50px minmax(0,1fr);direction:ltr;align-items:center;min-width:0}.flow-parents{grid-row:1}.flow-parent{text-align:center;min-width:0;grid-row:1}.flow-parent-0,.flow-gametes-0{grid-column:3}.flow-parent-1,.flow-gametes-1{grid-column:1}.flow-parent-heading{display:flex;align-items:center;justify-content:center;gap:4px;font-size:11.5px;line-height:1.65;min-height:35px;border-bottom:1px solid var(--line);padding:0 3px 7px;color:var(--ink)}.flow-sex{font-family:Arial,sans-serif;font-size:15px;color:#729a90}.flow-parent>.genotype{font-size:20px;margin-top:6px}.flow-times{grid-column:2;grid-row:1;align-self:start;text-align:center;padding-top:5px;color:var(--muted);font:20px/1.3 Arial,sans-serif}
.flow-gamete-row{grid-row:2;align-items:start}.flow-gametes{grid-row:1;display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;padding-top:5px;min-width:0}.gamete-circle{display:grid;place-items:center;flex-shrink:0;width:var(--gamete-size);height:var(--gamete-size);border:1px solid #70a57a;border-radius:50%;background:transparent;color:#245b48;font:500 14px/1 Georgia,serif}.flow-meiosis{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:var(--muted);font-size:9.5px;line-height:1.5;padding-top:0}.flow-meiosis svg{width:20px;height:32px}.flow-offspring{grid-column:2;grid-row:3;min-width:0;text-align:center}.flow-result-label{color:var(--muted);font-size:10.5px;margin:0 0 9px;line-height:1.5}.flow-children{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.flow-child{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:61px;max-width:115px;min-height:65px;padding:8px 12px;background:#eff4ed;border:1px solid var(--line);border-radius:12px}.flow-child .genotype{font-size:18px;line-height:1.4}.flow-child small{font-size:10.5px;color:var(--muted)}.flow-child[data-viable="false"]{border-style:dashed}
.cross-flow-summary{border-top:1px solid var(--line);padding:10px 12px;font-size:11.5px;line-height:1.9;text-align:center;color:var(--ink)}.cross-flow-summary>span{display:inline}.cross-ratio-details{border-top:1px solid var(--line);padding:0 12px}.cross-ratio-details>summary{list-style:none;font-size:10.5px;min-height:34px;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--muted)}.cross-ratio-details>summary::-webkit-details-marker{display:none}.cross-ratio-details>summary:after{content:"";width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .18s}.cross-ratio-details[open]>summary:after{transform:rotate(225deg);margin-top:3px}.cross-ratio-details .curriculum-ratio{text-align:right}.cross-flow>.cross-survivors{padding:12px;border-top:1px solid var(--line)}
.flow-offspring .punnett-details{margin:0;text-align:right}.flow-offspring .punnett-details>summary{min-height:38px;font-size:11.5px}.flow-offspring .punnett-table{font-size:13px}.flow-offspring .punnett-table td,.flow-offspring .punnett-table th{padding:7px 5px}.flow-offspring .genotype-details>summary{font-size:11px;min-height:38px}.flow-offspring .genotype-details{margin-top:8px;text-align:right}
[data-theme="dark"] .cross-flow{background:#454341}[data-theme="dark"] .cross-flow-heading,[data-theme="dark"] .flow-child{background:#4d4b46}[data-theme="dark"] .gamete-circle{border-color:#8fae96;color:#d4e2d6}[data-theme="dark"] .flow-sex{color:#a6c2b1}
@media(max-width:360px){.flow-grid{padding-inline:7px;grid-template-columns:22px minmax(0,1fr)}.flow-parents,.flow-gamete-row{grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr)}.flow-parent-heading{font-size:11px}.flow-child{min-width:55px;padding-inline:8px}.flow-parent>.genotype{font-size:18px}}

.cross-ratio-details>summary::before{display:none!important}

/* Clean scientific symbols, restrained sizes, and a continuous central cross axis. */
.cross-flow .genotype,.cross-flow .gamete-circle,.cross-flow .cross-stage,.cross-flow .punnett-table,.cross-flow .cross-gametes bdi{font-family:Arial,Tahoma,sans-serif;font-weight:600;letter-spacing:.02em}.flow-parent>.genotype{font-size:17px}.flow-child .genotype{font-size:16px}.cross-flow .cross-stage{font-size:12px;letter-spacing:0}.cross-flow .punnett-table{font-size:12.5px}.cross-flow .gamete-circle{font-size:13px;font-weight:500}.flow-times{font-size:34px;line-height:1;padding-top:3px;font-weight:400}.flow-gamete-row{min-height:70px;align-items:center}.flow-meiosis{font-size:9px;line-height:1.55;align-self:center;width:34px;transform:translateX(-14px);z-index:2;padding:0}.flow-gametes{align-self:center;padding-top:0}.flow-axis{grid-column:2;grid-row:1/3;position:relative;align-self:stretch;pointer-events:none;z-index:1}.flow-axis:before{content:"";position:absolute;left:50%;top:41px;bottom:-5px;border-left:1px solid var(--muted);opacity:.75}.flow-axis:after{content:"";position:absolute;left:calc(50% - 3px);bottom:-4px;width:6px;height:6px;border-bottom:1px solid var(--muted);border-right:1px solid var(--muted);transform:rotate(45deg);opacity:.75}.flow-f-label{padding-top:13px}.flow-child{min-height:46px;padding:11px 14px}.inference-lead{font-weight:750;color:var(--ink)}
.export-options{display:grid;gap:10px;margin-top:18px}.export-options button{display:flex;align-items:center;gap:10px;text-align:right;min-height:52px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--sage);font-size:13px}.export-options button:hover{border-color:var(--forest)}.export-options .icon{width:19px;height:19px}.export-options button:disabled{opacity:.5}
@media(max-width:360px){.flow-parent>.genotype{font-size:16px}.flow-child .genotype{font-size:15px}.flow-child{min-width:52px;padding-inline:9px}.flow-meiosis{width:30px;font-size:8.5px;transform:translateX(-16px)}}

/* Ratios answer only an explicit request; place the meiosis label on the shaft. */
.cross-flow .curriculum-ratio,.cross-flow .curriculum-ratio h4,.cross-flow .curriculum-ratio p{text-align:center}
.flow-axis>.flow-meiosis{position:absolute;left:50%;top:calc(50% + 18px);transform:translate(-50%,-50%);width:max-content;white-space:nowrap;background:var(--paper);padding:5px 4px;z-index:2;font-size:9px;line-height:1.5}
.cross-ratio-details{padding-block:8px}

/* Keep the result itself; the Punnett cells already contain the full detail. */
.cross-flow .cross-stage{font-size:17px;font-weight:700;line-height:1.4}
.flow-grid{grid-template-columns:34px minmax(0,1fr)}
.cross-flow .flow-child{background:transparent;border:0;border-radius:0;box-shadow:none;min-height:36px;padding:7px 10px}

.flow-child-phenotype{font-size:11px;line-height:1.7;font-weight:500;color:var(--muted);text-align:center}

/* Topic picker: ordered compact rows, grouped by the curriculum. */
#topics-screen .menu-content{max-width:600px}
#topics-screen .page-heading{margin-bottom:16px}
.topic-groups{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:14px;background:var(--sage);margin-bottom:14px}
.topic-groups>button{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;min-height:42px;border-radius:10px;font-size:12px;font-weight:650;color:var(--muted);transition:background .2s,color .2s,box-shadow .2s}
.topic-groups>button>span{font-size:10px;line-height:1;opacity:.8}
.topic-groups>button[aria-pressed="true"]{background:var(--paper);color:var(--forest);box-shadow:0 2px 6px #183a2910}
#topics-screen .topics-grid{grid-template-columns:1fr;gap:7px}
#topics-screen .topic-card{display:grid;grid-template-columns:34px minmax(0,1fr) 18px;align-items:center;gap:12px;min-height:56px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:none;animation-duration:.24s;animation-delay:calc(var(--card-order)*22ms)}
#topics-screen .topic-card:hover{background:var(--sage);border-color:var(--forest)}
#topics-screen .topic-card:active{transform:scale(.985)}
#topics-screen .topic-icon{width:34px;height:34px;border-radius:10px;background:var(--sage);color:var(--forest)}
#topics-screen .topic-icon svg{width:21px;height:21px}
#topics-screen .topic-name{font-size:12.5px;line-height:1.6;padding:0;font-weight:650}
#topics-screen .topic-arrow{position:static;display:block;color:var(--muted);opacity:.65}
#topics-screen .topic-arrow .icon{width:17px;height:17px}
.flow-axis>.flow-meiosis{font-size:11px;font-weight:550;padding:5px 3px}
@media(min-width:700px){#topics-screen .topics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#topics-screen .topic-card{min-height:66px}}
@media(max-height:620px){#topics-screen .topics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}#topics-screen .topic-card{min-height:57px;grid-template-columns:26px minmax(0,1fr);gap:7px;padding:8px}#topics-screen .topic-icon{width:26px;height:26px;border-radius:8px}#topics-screen .topic-icon svg{width:18px;height:18px}#topics-screen .topic-arrow{display:none}#topics-screen .topic-name{font-size:11px}#topics-screen .page-heading{margin-bottom:10px}.topic-groups{margin-bottom:10px}.topic-groups>button{min-height:36px}}
@media(max-width:360px){.flow-axis>.flow-meiosis{font-size:10px}.topic-groups>button{gap:5px;font-size:11px}}

/* Restore the original green, lavender and warm gold accents. */
#topics-screen .topic-card{--topic-fill:#f3faf6;--topic-border:#cbded2;--topic-accent:#17815e;--topic-icon-fill:#e1f2e8;background:var(--topic-fill);border-color:var(--topic-border);border-inline-start:3px solid var(--topic-accent)}
#topics-screen .topic-card:nth-child(3n+2){--topic-fill:#f8f5fc;--topic-border:#ddd5eb;--topic-accent:#8263ba;--topic-icon-fill:#ece4f6}
#topics-screen .topic-card:nth-child(3n){--topic-fill:#fffdf6;--topic-border:#e9dfc6;--topic-accent:#a77916;--topic-icon-fill:#faf0d4}
#topics-screen .topic-card .topic-icon{color:var(--topic-accent);background:var(--topic-icon-fill)}
#topics-screen .topic-card .topic-arrow{color:var(--topic-accent)}
#topics-screen .topic-card:hover{background:var(--topic-fill);border-color:var(--topic-accent);box-shadow:0 2px 8px color-mix(in srgb,var(--topic-accent) 12%,transparent)}
[data-theme="dark"] #topics-screen .topic-card{--topic-fill:#404740;--topic-border:#59685b;--topic-accent:#9bc5ad;--topic-icon-fill:#4c5b4e}
[data-theme="dark"] #topics-screen .topic-card:nth-child(3n+2){--topic-fill:#45414b;--topic-border:#696075;--topic-accent:#c3aedf;--topic-icon-fill:#554b62}
[data-theme="dark"] #topics-screen .topic-card:nth-child(3n){--topic-fill:#49453d;--topic-border:#71674f;--topic-accent:#d9be7e;--topic-icon-fill:#5c523d}

/* Calm, interruptible interaction motion; all movement respects reduced motion. */
@keyframes topic-arrive{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
#topics-screen .topic-card{animation-name:topic-arrive;animation-fill-mode:backwards;animation-duration:380ms;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-delay:calc(var(--card-order)*32ms);transition:transform 280ms cubic-bezier(.22,1,.36,1),background-color 180ms,border-color 180ms,box-shadow 180ms}
#topics-screen .topic-card:active{transform:scale(.97);transition-duration:90ms}
#topics-screen .topic-card .topic-arrow{transition:transform 220ms}
#topics-screen .topic-card:hover .topic-arrow{transform:translateX(-2px)}
.teacher-dialog[open]::backdrop{animation:backdrop-arrive 260ms ease-out both}
@keyframes backdrop-arrive{from{background-color:#171b1a00;backdrop-filter:blur(0)}to{background-color:#171b1a80;backdrop-filter:blur(4px)}}
#teacher-accounts{transition:background-color 200ms,border-color 200ms,transform 220ms}
#teacher-accounts:active{transform:scale(.9)}
#favorite-btn .icon{transition:fill 220ms,color 220ms;transform-origin:center}
#favorite-btn.is-active .icon{fill:color-mix(in srgb,var(--forest) 22%,transparent);color:var(--forest)}
#solution-toggle .icon{transition:transform 300ms}
#solution-toggle[aria-expanded="true"] .icon{transform:scale(1.1)}
.toast{top:calc(env(safe-area-inset-top,0px) + 18px);bottom:auto;transform:translate(-50%,-12px);transition:opacity 220ms ease,transform 320ms cubic-bezier(.22,1,.36,1),visibility 220ms;max-width:min(430px,calc(100% - 36px))}
.toast.show{transform:translate(-50%,0)}

.toast{background:#fff9ef;color:#494139;border-color:#e2d5c3;box-shadow:0 7px 24px #221a141c}
#music-toggle.music-playing .icon{animation:music-breathe 2.8s ease-in-out infinite;transform-origin:center}
#music-toggle[aria-busy="true"] .icon{opacity:.5}
@keyframes music-breathe{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}

#music-toggle{position:relative}
#music-toggle[aria-pressed="false"]::after{content:"";position:absolute;width:23px;height:1.5px;background:currentColor;border-radius:2px;transform:rotate(-45deg);pointer-events:none}

/* Practice, independent saved reading, and the exam worksheet. */
.home-actions #exam-start-btn{order:1}.home-actions #saved-btn{order:2}
.learning-actions{display:flex;gap:8px;margin-bottom:8px}.learning-actions>button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:36px;border:1px solid var(--line);border-radius:11px;background:var(--paper);color:var(--forest);font-size:11.5px;font-weight:650;transition:transform 180ms,background-color 180ms}.learning-actions .icon{width:16px;height:16px}.learning-actions>button:active{transform:scale(.97)}
.step-progress{font-size:11px;color:var(--muted);margin:2px 0 12px}
.evidence-mark{color:inherit;background:#f5df8f;border-radius:3px;padding-inline:1px;box-decoration-break:clone;-webkit-box-decoration-break:clone;animation:none;box-shadow:none;text-shadow:none}
.question-text .evidence-mark{padding:0;margin:0;border:0;font:inherit;line-height:inherit;transition:background-color 280ms cubic-bezier(.4,0,.2,1)}
.question-text.evidence-hiding .evidence-mark{background-color:transparent}
@media(prefers-reduced-motion:reduce){.question-text .evidence-mark{transition:none}}

[data-theme="dark"] .evidence-mark{background:#756337}
.reader-actions{display:flex;gap:9px;padding-top:12px;flex-shrink:0}.reader-actions .button{flex:1;font-size:12px;min-height:43px}
#review-scroll{flex:1;min-height:0}#review-solution{margin-top:12px}
.saved-card{padding:13px;border-radius:14px;border-inline-start:3px solid #9bc5ad;background:var(--paper)}.saved-card:nth-child(3n+2){border-inline-start-color:#b9a1d4}.saved-card:nth-child(3n){border-inline-start-color:#d4b367}
.saved-card>h3{font-size:12.5px;line-height:1.85;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:7px}.saved-card>.topic-tag{font-size:11px}.saved-card>div{margin-top:10px}.saved-open{display:flex;align-items:center;gap:7px;background:var(--sage);color:var(--forest);border-color:var(--line);font-size:11.5px;min-height:38px}.saved-open .icon{width:16px;height:16px}.saved-remove{min-height:38px;font-size:11px}
.volume-control{display:grid;grid-template-columns:1fr auto;gap:12px;margin-top:22px;font-size:13px}.volume-control input{grid-column:1/-1;width:100%;accent-color:var(--forest);min-height:28px}.volume-control output{font-size:12px;color:var(--muted)}#effects-preview{margin-top:20px;width:100%;font-size:12px;min-height:42px}
.exam-screen{min-height:0;display:flex;flex-direction:column;gap:10px;width:100%}.exam-screen>.page-heading{flex-shrink:0;margin-bottom:0}.exam-scroll{overflow:auto;min-height:0;flex:1;padding:2px 3px 12px;overscroll-behavior:contain;scrollbar-width:thin}.exam-intro{color:var(--muted);font-size:12px;line-height:1.9;margin-bottom:13px}.exam-screen>.button{flex-shrink:0;min-height:44px;font-size:13px}
.exam-topic-options fieldset,.exam-count{border:0;padding:0;margin:0 0 18px}.exam-topic-options legend,.exam-count legend{font-size:12px;font-weight:750;margin-bottom:9px}.exam-topic-options fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.exam-topic-options label{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:11px;padding:9px;min-height:44px;background:var(--paper);font-size:11.5px}.exam-topic-options input{accent-color:var(--forest);width:16px;height:16px;flex-shrink:0}.exam-topic-options label:has(input:checked){background:var(--sage);border-color:var(--forest)}.exam-count label{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border:1px solid var(--line);border-radius:10px;margin-inline-end:8px;font-size:13px;background:var(--paper)}.exam-count input{accent-color:var(--forest)}
#exam-questions{display:grid;gap:12px}.exam-question-card{display:block;width:100%;padding:15px;text-align:right;border:1px solid var(--line);border-radius:15px;background:var(--paper);transition:transform 180ms,border-color 180ms;animation:topic-arrive 320ms ease-out backwards}.exam-question-card:active{transform:scale(.99)}.exam-card-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;font-size:13px}.exam-card-question{display:block;font-size:12px;line-height:1.9}.exam-card-status{display:block;font-size:11px;color:var(--muted);margin-top:12px}.exam-status-mark{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--sage);font:700 16px Arial,sans-serif}
.button-exam-end{background:#a84f54;color:#fff;border-color:#98464c;box-shadow:0 3px 0 #813b41}.button-exam-end:hover{background:#98464c}
@media(max-height:620px){.home-actions{margin-top:15px;gap:8px}.home-actions .button{min-height:43px}.home-utilities{gap:5px}.learning-actions{margin-bottom:5px}.learning-actions>button{min-height:32px}.reader-actions{padding-top:8px}}
@media(min-width:800px){.exam-screen{max-width:700px}.exam-section{padding:17px}.exam-topic-options fieldset{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Small question action and a single compact practice toolbar. */
.question-card-heading{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:12px;flex-wrap:wrap}.question-card-heading .q-badge{margin:0}
.similar-mini{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:30px;padding:4px 8px;border:1px solid var(--line);border-radius:9px;color:var(--forest);background:var(--sage);font-size:10.5px;font-weight:600;transition:transform 180ms,border-color 180ms}.similar-mini .icon{width:13px;height:13px}.similar-mini:active{transform:scale(.96)}
#game-screen .game-dock{grid-template-columns:minmax(0,1fr) 40px;gap:7px;padding:9px 0 4px}
#game-screen .question-actions{grid-template-columns:1fr 1.2fr .8fr;gap:4px;padding:4px;border:1px solid var(--line);border-radius:15px;background:var(--paper)}
#game-screen .question-actions .button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:36px;padding:6px;border-radius:10px;font-size:11.5px;line-height:1.6;box-shadow:none}
#game-screen .question-actions .icon{width:15px;height:15px}
#game-screen .button-step{background:#f1ebfa;color:#735898;border:1px solid #e1d6ef}
#game-screen #new-q-btn{background:transparent;border-color:transparent;color:var(--forest)}
#game-screen .toolbox>summary{width:40px;height:40px;border-radius:12px}
#game-screen .question-tools{bottom:calc(100% + 8px)}
[data-theme="dark"] #game-screen .button-step{background:#514959;border-color:#746283;color:#d4bfe5}
/* Paper exam setup: quantity first, then grouped multi-selection. */
.exam-setup-scroll .exam-count{margin:0 0 18px;padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.exam-count-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.exam-count-options>label{position:relative;display:flex;justify-content:center;align-items:center;margin:0;padding:10px 5px;border-radius:11px;cursor:pointer}
.exam-count-options input{position:absolute;opacity:0;width:1px;height:1px}
.exam-count-options>label>span{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;color:var(--muted)}
.exam-count-options b{font-size:18px;line-height:1.4;font-weight:700;color:var(--ink)}
.exam-count-options>label:has(input:checked){background:var(--sage);border-color:var(--forest)}
.exam-count-options>label:has(input:checked) b,.exam-count-options>label:has(input:checked) span{color:var(--forest)}
.exam-count-options>label:has(input:focus-visible){outline:2px solid var(--forest);outline-offset:2px}
.exam-topic-picker>h2{font-size:13px;margin-bottom:9px}
.exam-topic-groups{margin-bottom:8px}.exam-topic-groups>button{font-size:11.5px;min-height:37px}
.exam-selection-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px;font-size:10.5px;color:var(--muted)}
#exam-topics fieldset{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0 0 12px}
#exam-topics label{position:relative;gap:7px;min-height:48px;padding:9px;font-size:11px;border-radius:11px;cursor:pointer}
#exam-topics input{width:14px;height:14px;margin:0;flex-shrink:0}

#exam-resume{width:100%;margin-top:10px;min-height:40px;font-size:12px}
.paper-question{cursor:default;margin-bottom:0}
.paper-question .exam-card-question{font-size:13px;line-height:2}
.exam-paper-solution{margin-top:15px;padding-top:14px;border-top:1px solid var(--line)}
.exam-paper-solution>h2{font-size:13px;color:var(--forest);margin-bottom:12px}
.exam-paper-solution .curriculum-reasoning{margin-top:12px}
@media(max-width:380px){#game-screen .question-actions .icon{display:none}#game-screen .question-actions .button{font-size:10.5px;padding-inline:4px}}

/* Compact exam composer: controls stay together instead of spanning viewport. */
#exam-setup-screen{max-width:560px;justify-content:center;flex:1;gap:12px}
#exam-setup-screen .page-heading{min-height:38px}
#exam-setup-screen .exam-setup-scroll{flex:0 1 auto;padding:0 3px 5px}
#exam-setup-screen .exam-intro{margin-bottom:12px;font-size:11px}
.exam-setup-scroll .exam-count{padding:0;border:0;background:transparent;margin:0 0 15px}
.exam-count-options{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.exam-count-options>label{padding:5px;min-height:39px;border-radius:10px}
.exam-count-options b{font-size:16px}
.exam-topic-picker>h2{font-size:12px;margin-bottom:7px}
.exam-topic-groups>button{min-height:34px;font-size:11px}
.exam-selection-heading{margin-bottom:7px}
#exam-topics fieldset{gap:6px;margin-bottom:12px}
#exam-topics label{min-height:40px;padding:7px 8px;font-size:10.5px}
#exam-topics label:has(input:disabled){opacity:.45;cursor:default}
#exam-create{width:100%;min-height:40px;font-size:12px;border-radius:11px;margin-top:3px}
.exam-pending-dialog h2{font-size:15px;line-height:1.8}
.exam-pending-actions{display:grid;gap:8px}.exam-pending-actions .button{min-height:42px;font-size:12px}
@media(max-height:600px){#exam-setup-screen{justify-content:flex-start;gap:8px}.exam-setup-scroll .exam-count{margin-bottom:10px}#exam-topics label{min-height:36px}}

/* Opening a solution must not resize or recenter the question. */
#study-scroll,#review-scroll{scrollbar-gutter:stable;overflow-anchor:none}
#study-scroll .question-card,#study-scroll:has(.solution-panel:not([hidden])) .question-card{margin-block:0 12px}
#solution-panel,#review-solution{animation:none}
#review-scroll .question-card{margin-block:0}
#question-text .evidence-mark{padding:0;margin:0;border:0;font:inherit;letter-spacing:inherit;line-height:inherit}

.question-tools{width:min(330px,calc(100vw - 44px));grid-template-columns:.8fr 1.5fr .8fr}.question-tools button{font-size:11px;padding:7px 5px;gap:5px}.question-tools .icon{width:16px;height:16px}
.question-advisory{font-size:10.5px;line-height:1.9;color:var(--muted);margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.genetic-notes-dialog{width:min(500px,calc(100vw - 30px));max-height:82dvh;padding:17px;overscroll-behavior:contain;scrollbar-width:thin}
.genetic-notes-dialog h2{font-size:16px}.genetic-notes-section{margin-top:14px}.genetic-notes-section h3{font-size:13px;color:var(--forest);margin-bottom:8px}.genetic-notes-section h4{font-size:12px;margin:13px 0 8px}.genetic-symbol-note{font-size:12px;line-height:1.95;color:var(--ink);background:var(--sage);padding:11px 12px;border-radius:11px}
.genetic-rules{list-style:none;counter-reset:rule;display:grid;gap:7px;padding:0;margin:0}.genetic-rules li{counter-increment:rule;position:relative;padding:10px 39px 10px 12px;border:1px solid var(--line);border-radius:11px}.genetic-rules li:before{content:counter(rule,arabic-indic);position:absolute;right:10px;top:10px;width:21px;height:21px;border-radius:7px;background:var(--sage);color:var(--forest);text-align:center;font-size:11px;font-weight:700}.genetic-rules strong{font-size:12px;font-weight:700}.genetic-rules p,.genetic-rules small{font-size:11.5px;line-height:1.95}.genetic-rules small{color:var(--muted)}.nonmendelian-note{padding-top:12px;border-top:1px solid var(--line)}

.genetic-notes-section[hidden]{display:none!important}.nonmendelian-note:not([hidden]){border-top:0;padding-top:0}

#game-screen .question-actions{grid-template-columns:1.15fr 1.2fr .8fr .8fr}
#game-screen #prev-q-btn{background:transparent;color:var(--forest);border-color:transparent;box-shadow:none}
#prev-q-btn:disabled{opacity:.35;cursor:default}
@media(max-width:480px){#game-screen .question-actions .button{font-size:10px;padding-inline:3px;gap:2px;min-height:39px}#game-screen .question-actions .icon{display:none}}

/* Book-style serif letters distinguish upper/lowercase genetic symbols. */
.genotype,.gamete-circle,.gametes bdi,.cross-flow .genotype,.cross-flow .gamete-circle,.cross-flow .cross-stage,.cross-flow .punnett-table,.cross-flow .cross-gametes bdi,.cross-ratios bdi{font-family:"Times New Roman",Times,serif;letter-spacing:0;font-variant-ligatures:none}

.solution-case{margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}.solution-case>h3{font-size:13px;font-weight:750;color:var(--forest);margin-bottom:10px}
.flow-children{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:0;direction:ltr}.offspring-separator{font:600 17px/1.5 "Times New Roman",serif;color:var(--muted);padding:0 5px}

/* Requested handwriting style for genetic symbols. */
.genotype,.gamete-circle,.gametes bdi,.cross-flow .genotype,.cross-flow .gamete-circle,.cross-flow .cross-stage,.cross-flow .punnett-table,.cross-flow .cross-gametes bdi,.cross-ratios bdi,.offspring-separator{font-family:"Genetics Symbols","Comic Sans MS","Comic Sans",cursive;letter-spacing:0}

.genetic-symbol,.genotype,.gamete-circle,.gametes bdi,.cross-flow .genotype,.cross-flow .gamete-circle,.cross-flow .cross-stage,.cross-flow .punnett-table,.cross-flow .punnett-table th,.cross-flow .cross-gametes bdi,.cross-ratios bdi,.offspring-separator{font-family:"Genetics Symbols","Comic Sans MS","Comic Sans",cursive;font-weight:400;font-style:normal;letter-spacing:0}.genetic-symbol{font-size:1em;line-height:inherit}

/* Slightly larger parent genotypes and gametes, keeping regular weight. */
.cross-flow .gamete-circle{font-size:16px;font-weight:400}.flow-parent>.genotype{font-size:20px;font-weight:400}.parent-statements .genetic-symbol{font-size:1.25em;font-weight:400}
@media(max-width:360px){.cross-flow .gamete-circle{font-size:15px}.flow-parent>.genotype{font-size:19px}}

/* Two distinct tool groups, with steady navigation controls during loading. */
#game-screen .game-dock{gap:9px;padding-top:10px}
#game-screen .question-actions{display:flex;align-items:center;justify-content:flex-start;gap:5px;min-width:0;padding:0;border:0;border-radius:0;background:transparent}
.solution-actions{display:grid;grid-template-columns:1fr 1fr;gap:5px;flex:1;min-width:0;max-width:none}
.question-navigation{display:flex;align-items:center;gap:5px;flex-shrink:0;padding:3px;border:1px solid var(--line);border-radius:13px;background:var(--paper)}
#game-screen .solution-actions .button{min-height:40px;padding:7px 11px;border-radius:11px;font-size:12px;gap:6px}
#game-screen .question-navigation .button{min-width:64px;min-height:34px;padding:5px 8px;gap:4px;font-size:11px;border-radius:9px;transition:background-color 160ms;transform:none}
#game-screen .question-navigation .icon{display:block;width:15px;height:15px}
#game-screen #new-q-btn:hover,#game-screen #prev-q-btn:not(:disabled):hover{background:var(--sage)}
#game-screen .question-navigation .button:active{transform:none}
#game-screen .toolbox>summary{height:40px;width:40px}
@media(max-width:600px){#game-screen .question-actions{gap:8px}.question-navigation{gap:2px;padding:2px}#game-screen .question-navigation .button{width:34px;min-width:34px;height:36px;padding:4px}#game-screen .question-navigation .button span{display:none}#game-screen .question-navigation .icon{display:block;width:18px;height:18px}#game-screen .solution-actions .button{font-size:11px;min-height:40px;padding:6px 4px}#game-screen .solution-actions .icon{display:none}}

/* One compact toolbar: no capped group or empty space between controls. */
#game-screen .game-dock{gap:5px;padding:5px;margin-top:6px;border:1px solid var(--line);border-radius:15px;background:var(--paper)}
#game-screen .question-actions{gap:5px}
.question-navigation{gap:3px;padding:0;border:0;border-radius:0;background:transparent}
#game-screen .solution-actions .button{min-height:38px;border-radius:10px}
#game-screen .question-navigation .button{min-height:38px;height:38px;border-radius:10px}
#game-screen .toolbox>summary{width:38px;height:38px;border-radius:10px;background:var(--sage);border-color:transparent;color:var(--forest)}
#game-screen .game-dock{grid-template-columns:minmax(0,1fr) 38px}
@media(max-width:600px){#game-screen .question-actions{gap:4px}.solution-actions{gap:4px}.question-navigation{gap:2px}#game-screen .solution-actions .button{min-height:38px}#game-screen .question-navigation .button{width:32px;min-width:32px;padding:3px}}
/* Welcome: one logo travels into its exact home slot; all layout stays in place. */
.welcome-pending .app-frame,.welcome-pending #home-utilities{opacity:0}
.welcome-screen{position:fixed;inset:0;z-index:1000;isolation:isolate;overflow:hidden;touch-action:manipulation}
.welcome-backdrop{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 43%,#ffffffb3 0%,transparent 58%),var(--cream)}
[data-theme="dark"] .welcome-backdrop{background:radial-gradient(ellipse at 50% 43%,#ffffff07 0%,transparent 58%),var(--cream)}
.welcome-logo{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform;pointer-events:none}
.welcome-logo>svg{width:100%;height:100%;overflow:visible}
.welcome-logo .pea-pod{animation:none;transform:rotate(-2deg)}
.welcome-logo .seed,.welcome-logo .pea-spark{animation:none}
.welcome-logo .seed{transform-box:fill-box;transform-origin:center}
.welcome-logo .pea-shadow{opacity:0}
.welcome-caption{position:absolute;left:0;top:0;text-align:center;color:var(--ink);transform-origin:0 0;will-change:transform;pointer-events:none}
.welcome-caption #home-title{width:100%;margin:0;white-space:nowrap}
.home-title-slot{visibility:hidden;margin:0}
.welcome-name,.welcome-question,#home-title>span{display:inline-block;backface-visibility:hidden}
.welcome-question,#home-title>span{transform-origin:50% 72%}
.welcome-question{color:var(--green)}
.welcome-active #home-screen{animation:none}
.welcome-active .pea-mark{visibility:hidden}
.pea-mark.welcome-settled .seed{animation:none}
.pea-mark.welcome-settled .pea-shadow{animation:home-shadow-in 700ms cubic-bezier(.22,1,.36,1) both}
@keyframes home-shadow-in{from{opacity:0}to{opacity:1}}
.welcome-active #home-screen #home-title,.welcome-active #home-utilities{opacity:0}
.welcome-controls .author,.welcome-controls .home-actions>button,.welcome-controls #home-utilities>button{opacity:0}
@media(prefers-reduced-motion:reduce){.welcome-pending .app-frame,.welcome-pending #home-utilities{opacity:1}.welcome-screen{display:none}}
/* Permanent installation invitation; only verified install/standalone state hides it. */
.home-actions .install-card{order:3;position:relative;isolation:isolate;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;width:100%;min-height:64px;padding:10px;border:1px solid #9771c54d;border-radius:13px;overflow:hidden;background:linear-gradient(115deg,#25103e,#40215c 62%,#2c1645);color:#fff;text-align:right;box-shadow:0 4px 13px #29123d1a;flex-shrink:0}
.install-card>img,.install-card-copy,.install-card-cta{position:relative;z-index:1}.install-card>img{border-radius:10px;width:38px;height:38px}.install-card-copy{display:flex;flex-direction:column;gap:1px;min-width:0}.install-card-copy strong{font-size:12px;font-weight:800;line-height:1.65}.install-card-copy small{font-size:9px;color:#e6d8f6;line-height:1.7}.install-card-cta{padding:6px 8px;border:1px solid #c2a1ec80;border-radius:8px;background:#9561d0a8;font-size:10px;font-weight:750;white-space:nowrap}.install-card:active .install-card-cta{background:#ac7de3}
.install-space{position:absolute;inset:0;z-index:0;pointer-events:none}.install-space:before{content:"";position:absolute;inset:-12px;background-image:radial-gradient(circle at 12% 34%,#fff 0 1px,transparent 1.7px),radial-gradient(circle at 32% 76%,#e9d5ff 0 .8px,transparent 1.6px),radial-gradient(circle at 55% 22%,#fff 0 1px,transparent 1.8px),radial-gradient(circle at 77% 66%,#e5cbff 0 1px,transparent 1.8px),radial-gradient(circle at 91% 28%,#fff 0 .7px,transparent 1.6px);background-size:190px 80px;animation:install-stars 9s ease-in-out infinite alternate}.install-space:after{content:"";position:absolute;inset:-30px;background:radial-gradient(ellipse at 24% 42%,#b176df35,transparent 48%),radial-gradient(ellipse at 82% 62%,#7c3bbd50,transparent 44%);animation:install-nebula 12s ease-in-out infinite alternate}
@keyframes install-stars{from{opacity:.45;transform:translate3d(-6px,0,0)}to{opacity:.85;transform:translate3d(7px,-3px,0)}}@keyframes install-nebula{from{transform:translateX(-7px)}to{transform:translateX(12px)}}
.pwa-dialog{box-sizing:border-box;width:min(370px,calc(100vw - 28px));max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);padding:22px 18px 14px;margin:auto;border:1px solid #79708b66;border-radius:23px;overflow-y:auto;overscroll-behavior:contain;background:#19172d;color:#f4f0ff;box-shadow:0 22px 70px #100d2866;font-size:12px;line-height:1.8}.pwa-dialog::backdrop{background:#10101a99;backdrop-filter:blur(5px)}.pwa-dialog h2{text-align:center;font-size:15px;font-weight:800;margin-bottom:15px}.pwa-platforms{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:13px}.pwa-platforms>button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:7px;border:1px solid #655b785c;border-radius:12px;background:#ffffff05;color:#bcb7cc;font-size:12px;font-weight:750}.pwa-platforms>button[aria-selected="true"]{border-color:#9273ff;background:#8d72ff1c;box-shadow:inset 0 0 0 1px #9273ff;color:#fff}.platform-icon{width:18px;height:18px}.android-icon{fill:none;stroke:#54d7a0;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.apple-icon{fill:currentColor}
.pwa-notice{padding:8px 10px;border:1px solid #c99e354d;border-radius:11px;background:#d1a83d12;color:#e4dbbf;font-size:10.5px;line-height:1.9;margin-bottom:12px}.pwa-install-now{width:100%;min-height:43px;padding:9px;border-radius:12px;background:linear-gradient(100deg,#7454ff,#9652ec);color:#fff;font-weight:800;font-size:13px;box-shadow:0 6px 18px #7d48f329}.pwa-status{text-align:center;font-size:9px;line-height:1.8;color:#c2b6d7;min-height:19px;margin:8px 0 11px}.pwa-steps{counter-reset:install-step;list-style:none;padding:0;margin:0;border:1px solid #75688740;border-radius:15px;background:#ffffff05;overflow:hidden}.pwa-steps>li{position:relative;counter-increment:install-step;padding:12px 38px 12px 12px;border-bottom:1px solid #75688735}.pwa-steps>li:last-child{border-bottom:0}.pwa-steps>li:before{content:counter(install-step);position:absolute;right:11px;top:14px;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#8256f6;color:#fff;font:700 10px Cairo,sans-serif}.pwa-steps strong{display:block;font-size:11px;font-weight:750}.pwa-steps p{font-size:10px;color:#c9bfd8;line-height:1.95;margin-top:4px}.pwa-steps bdi{font-size:9px;background:#ffffff09;border-radius:4px;padding:0 3px}.pwa-close{display:block;min-height:40px;min-width:75px;margin:10px auto 0;color:#c7bdd8;font-size:11px;border-radius:10px}.pwa-dialog button:focus-visible,.install-card:focus-visible{outline:2px solid #b59bff;outline-offset:3px}
@media(orientation:landscape) and (max-height:480px){.home-actions .install-card{min-height:55px;padding:7px 9px}.install-card>img{width:32px;height:32px}.home-actions{gap:7px}}
#audio-dialog{width:min(370px,calc(100vw - 28px));padding:20px 22px 9px;border-radius:24px}
#audio-dialog .teacher-dialog-heading{padding-bottom:15px;border-bottom:1px solid var(--line);margin-bottom:0}
#audio-dialog .teacher-dialog-heading h2{font-size:16px;font-weight:800}
#audio-dialog #audio-close{width:32px;height:32px;border:0;border-radius:50%;background:var(--cream)}#audio-close .icon{width:17px;height:17px}
.audio-channel{--audio-accent:var(--forest);--audio-tint:#07846612;padding:17px 0 15px;margin:0;border:0;background:transparent}.audio-channel+.audio-channel{border-top:1px solid var(--line)}
.audio-channel-music{--audio-accent:var(--purple);--audio-tint:#8263ba14}
.audio-channel-heading{display:flex;align-items:center;justify-content:space-between;gap:9px}.audio-channel-name{display:flex;align-items:center;gap:9px;min-width:0}.audio-channel-name label{font-size:12px;font-weight:700;line-height:1.7}.audio-channel-icon{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:11px;background:var(--audio-tint);color:var(--audio-accent)}.audio-channel-icon .icon{width:18px;height:18px}
#audio-dialog .audio-power{display:flex;align-items:center;justify-content:flex-end;flex:0 0 91px;gap:7px;min-height:44px;padding:0;background:none;border:0;border-radius:10px;color:var(--muted)}
#audio-dialog .audio-power::after{content:none}#audio-dialog .audio-power[aria-pressed="true"]{color:var(--audio-accent)}
.audio-state{font-size:10px;font-weight:650;white-space:nowrap}.audio-state:before{content:"متوقف"}.audio-power[aria-pressed="true"] .audio-state:before{content:"مفعّل"}.audio-power[aria-busy="true"] .audio-state:before{content:"انتظار"}
.audio-switch{position:relative;flex:0 0 40px;height:22px;border-radius:20px;background:var(--line);transition:background 220ms ease}
.audio-switch:after{content:"";position:absolute;right:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--paper);box-shadow:0 1px 3px #10281e25;transition:transform 260ms cubic-bezier(.22,1,.36,1)}
.audio-power[aria-pressed="true"] .audio-switch{background:var(--audio-accent)}.audio-power[aria-pressed="true"] .audio-switch:after{transform:translateX(-18px)}
.audio-channel-level{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:14px;margin-top:6px}.audio-channel-level output{text-align:center;direction:ltr;unicode-bidi:isolate;font-size:11px;font-weight:700;color:var(--audio-accent);background:var(--audio-tint);padding:4px 2px;border-radius:8px;font-variant-numeric:tabular-nums}
.audio-channel-level input{appearance:none;-webkit-appearance:none;width:100%;min-width:0;height:36px;margin:0;direction:rtl;accent-color:var(--audio-accent);cursor:pointer;background:linear-gradient(to left,var(--audio-accent) 0%,var(--audio-accent) var(--level,50%),var(--line) var(--level,50%),var(--line) 100%) center/100% 5px no-repeat;border-radius:8px}
.audio-channel-level input::-webkit-slider-runnable-track{height:5px;border-radius:6px;background:transparent}.audio-channel-level input::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;width:18px;height:18px;margin-top:-6.5px;border:3px solid var(--paper);border-radius:50%;background:var(--audio-accent);box-shadow:0 0 0 1px var(--audio-accent)}
.audio-channel-level input::-moz-range-track{height:5px;border-radius:6px;background:var(--line)}.audio-channel-level input::-moz-range-progress{height:5px;border-radius:6px;background:var(--audio-accent)}.audio-channel-level input::-moz-range-thumb{box-sizing:border-box;width:18px;height:18px;border:3px solid var(--paper);border-radius:50%;background:var(--audio-accent);box-shadow:0 0 0 1px var(--audio-accent)}
.audio-channel-level input:focus-visible{outline:2px solid var(--purple);outline-offset:3px}

/* Paint the full viewport once, including the space around the app. */
html{background:var(--cream)}body,.app-frame{background:transparent}.theme-changing{transition:background-color 550ms cubic-bezier(.22,1,.36,1)}
.pea-mark[role="button"]{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;border-radius:45%}.pea-mark[role="button"]:focus-visible{outline:2px solid var(--forest);outline-offset:8px}.pea-impact{transform-box:fill-box;transform-origin:50% 55%}.pea-shadow{transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:reduce){html.theme-changing{transition:none!important}}

/* Pixel companion never participates in layout or captures button taps. */
.home-cat{position:fixed;inset:0;z-index:8;overflow:hidden;pointer-events:none;contain:strict;direction:ltr}.cat-actor{position:absolute;left:0;top:0;will-change:transform;pointer-events:none}.cat-sprite{background-repeat:no-repeat;image-rendering:pixelated;transform-origin:center;pointer-events:none}

@media print{.home-cat{display:none!important}}

#start-btn.cat-tapped{box-shadow:0 2px 0 #05644d,inset 0 2px 7px #ffffff24}

.home-cat .cat-actor{pointer-events:auto;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;border-radius:35%;outline-offset:-12px}.cat-actor:focus-visible{outline:2px solid var(--forest)}