:root{color-scheme:light;--ink:#153b45;--ink2:#315c63;--muted:#58767c;--teal:#117969;--mint:#ddf3e9;--navy:#092237;--blue:#538acb;--paper:#f4f7f3;--line:#d9e5dc;--shadow:0 10px 32px #102b310b;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:linear-gradient(160deg,#f5faf5,#f4f8f6 44%,#f5f6ef)}button,select,textarea,input{font:inherit}button{cursor:pointer}button,select,a,textarea,input{-webkit-tap-highlight-color:transparent}a{color:inherit}button:focus-visible,select:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,canvas:focus-visible{outline:3px solid #c88c34;outline-offset:3px}[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1,h2,h3{letter-spacing:-.04em;line-height:1.12}p{line-height:1.6}.skip-link{position:absolute;left:6px;top:-100px;background:white;color:#084a46;padding:13px;z-index:100}.skip-link:focus{top:10px}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.topbar{height:76px;padding:11px max(24px,calc((100vw - 1400px)/2));background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap}.brand img{display:block}.brand b{display:block;font-weight:850;font-size:19px;letter-spacing:-.045em}.brand small{display:block;color:#62817b;letter-spacing:.14em;font-size:9px;margin-top:3px;font-weight:800}.nav-right{display:flex;gap:14px;align-items:center}.back{font-size:13px;color:#21695e;font-weight:800;text-decoration:none;padding:10px 4px}.back:hover{text-decoration:underline}.lang{display:flex;align-items:center;gap:7px;color:#4d7570;font-size:12px}.lang select{border:1px solid #cbded3;background:#fff;color:#143f43;padding:9px 10px;border-radius:10px;min-height:42px}
.shell{max-width:1470px;margin:0 auto;padding:0 24px}.intro{background:linear-gradient(118deg,#07283b,#103657 78%,#103152);color:#ecfdf4;min-height:238px;padding:33px 46px;display:flex;align-items:center;justify-content:space-between;border-radius:0 0 22px 22px;gap:20px;overflow:hidden;position:relative}.intro:before{content:'';position:absolute;width:550px;height:380px;right:-60px;top:-130px;background:radial-gradient(circle,#51e0bd25,transparent 70%)}.intro>div:first-child{z-index:1;max-width:840px}.eyebrow{font-size:10px;color:#99e3ce;letter-spacing:.15em;font-weight:860;margin-bottom:11px}.live-dot{display:inline-block;width:8px;height:8px;background:#77eec5;border-radius:50%;margin-right:8px;box-shadow:0 0 0 4px #77eec522}.intro h1{font-size:clamp(30px,4.35vw,58px);line-height:1.07;font-weight:850;letter-spacing:-.06em;margin-bottom:14px}.intro h1 em{font-style:normal;color:#b3f3dc}.intro-copy{max-width:690px;color:#c1dce1;font-size:14px;margin-bottom:17px}.intro-badges{display:flex;flex-wrap:wrap;gap:7px}.intro-badges span{color:#c4efdf;background:#ffffff12;border:1px solid #9ed5c63a;border-radius:999px;padding:7px 10px;font-size:9px;letter-spacing:.045em;font-weight:800}.intro-art{width:255px;height:215px;flex:none;position:relative}.intro-art svg{height:100%;width:100%;filter:drop-shadow(0 5px 15px #5ce5ce42)}
.module-nav{display:flex;overflow:auto;gap:6px;padding:6px;background:#e7f0ea;border:1px solid #d0e2d6;border-radius:15px;max-width:100%;width:max-content;margin:16px 0;scrollbar-width:thin}.module-nav button{display:flex;align-items:center;gap:7px;min-height:46px;border:0;background:transparent;color:#3c6662;border-radius:10px;padding:11px 14px;font-size:13px;font-weight:790;white-space:nowrap}.module-nav button[aria-pressed=true]{background:#fff;color:#116f5c;box-shadow:0 4px 14px #154f3e20}.module-nav button:hover{background:#ffffff9e}.module-number{font-size:10px;font-variant-numeric:tabular-nums;opacity:.75;font-weight:900}
.workspace{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(340px,.85fr);align-items:start;gap:18px}.visual-card,.control-card,.reflection-card,.learning-bridge{background:#fff;border:1px solid var(--line);border-radius:21px;box-shadow:var(--shadow);min-width:0}.visual-card{overflow:hidden}.visual-head{padding:21px 22px 14px;display:flex;align-items:start;justify-content:space-between;gap:12px}.overline{color:#24816f;font-weight:860;letter-spacing:.13em;font-size:10px;line-height:1.5;margin-bottom:8px}.visual-head h2{font-size:clamp(22px,2.4vw,31px);margin-bottom:7px}.stage-subtitle{font-size:13px;color:#657d7c;max-width:530px}.listen-button{flex:none;border:1px solid #c7e5d9;background:#e9f6ee;color:#176c57;font-weight:800;border-radius:12px;min-height:40px;padding:9px 13px;font-size:12px}.listen-button:hover{background:#d8f3e4}
.dna-viewport{margin:0 16px;position:relative;background:#081b2d;border-radius:16px;overflow:hidden;min-height:410px}.dna-viewport canvas{display:block;width:100%;height:410px;touch-action:none;cursor:grab}.dna-viewport canvas:active{cursor:grabbing}.scene-instruction{position:absolute;left:13px;bottom:13px;pointer-events:none;max-width:calc(100% - 136px)}.scene-instruction span{color:#cde9ed;border:1px solid #61839875;background:#0a293dbb;border-radius:99px;padding:8px 11px;display:inline-block;font-size:11px;font-weight:730}.scene-actions{position:absolute;right:12px;bottom:12px;display:flex;gap:5px}.scene-actions button{width:38px;height:38px;border-radius:9px;border:1px solid #55798d;color:#d4f9f6;background:#0e3348eb;font-weight:800;font-size:20px}.scene-actions button:hover{background:#1d5367}
.visual-toolbar{border-bottom:1px solid #e1ece5;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:9px;padding:12px 18px}.switch-group,.nucleotide-legend{display:flex;gap:7px;flex-wrap:wrap;align-items:center}.switch-group button{border:1px solid #d8e9df;background:#f4f8f4;color:#3b675e;border-radius:9px;min-height:36px;padding:8px 11px;font-size:12px;font-weight:780}.switch-group button[aria-pressed=true]{background:#d8f2e6;border-color:#60b99f;color:#126956}.nucleotide-legend span{display:flex;gap:5px;align-items:center;font-size:11px;font-weight:850;color:#37565f}.nucleotide-legend i{width:10px;height:10px;border-radius:50%;display:inline-block}.visual-insight{padding:17px 21px;background:#f5f9f6;color:#31564d;font-size:14px;line-height:1.7;border-bottom:1px solid #e1ece5;min-height:76px}.model-caution{padding:12px 19px;color:#6b817b;font-size:11px;line-height:1.6;background:#fdfefa}
.control-card{padding:24px;min-height:574px}.control-panel h2{font-size:24px;line-height:1.15;margin-bottom:12px}.control-description{font-size:13px;line-height:1.7;color:#607973;margin-bottom:19px}.control-panel .scientific-note{margin-top:14px;padding:12px 13px;background:#f5f8f4;border-left:3px solid #7ba98d;border-radius:5px;font-size:11px;line-height:1.65;color:#607873}
.pair-inspector{display:flex;align-items:end;justify-content:space-between;gap:8px;padding:13px;border:1px solid #d6e7dc;border-radius:12px;background:#f2f8f1;margin:0 0 15px}.pair-inspector>div small,.mutation-explanation small{display:block;color:#5e7f75;font-size:11px;margin-bottom:6px}.pair-inspector>div strong{font-size:22px;font-weight:830}.pair-inspector label{font-size:11px;color:#537366;font-weight:780}.pair-inspector select{margin-left:6px;border:1px solid #c7d9cc;background:#fff;border-radius:8px;padding:7px;min-height:38px;max-width:95px}
.sequence-box{background:#fbfcf8;border:1px solid #e0e9e0;border-radius:13px;padding:12px;margin-bottom:9px}.sequence-label{display:flex;justify-content:space-between;gap:8px;align-items:center;color:#4d7168;margin-bottom:10px;font-size:11px}.sequence-label b{font-size:12px;color:#2f5e54}.base-sequence{display:flex;gap:3px;flex-wrap:wrap}.base-sequence button,.base-chip{min-width:26px;height:34px;border:1px solid #d9e5e0;background:#ecf3f1;border-radius:7px;display:grid;place-items:center;color:#15323a;font-size:12px;font-weight:900;padding:2px 5px}.base-sequence button[aria-pressed=true],.base-chip.is-selected{border-color:#188771;background:#d0f3df;box-shadow:0 0 0 1px #218e75}.base-chip{display:inline-grid;border-color:transparent;margin:0 1px;color:#123a42}.base-chip[data-base=A]{background:#fff1d5}.base-chip[data-base=T]{background:#ddf7ee}.base-chip[data-base=C]{background:#eee9fd}.base-chip[data-base=G]{background:#ffe2e6}.base-chip[data-base=U]{background:#dcefff}
.primary-action,.secondary-action{border-radius:11px;min-height:44px;padding:10px 14px;font-size:12px;font-weight:820;line-height:1.3}.primary-action{background:#15755e;border:1px solid #15755e;color:#fff}.primary-action:hover{background:#0b5d4f}.secondary-action{background:#fff;border:1px solid #c9ddd0;color:#286656}.secondary-action:hover{background:#f0f8f1}.panel-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}.wide{width:100%;margin:12px 0}
.range-field{margin:18px 0}.range-field>div{display:flex;justify-content:space-between;gap:12px}.range-field label{color:#345d50;font-size:12px;font-weight:780}.range-field output{font-size:13px;font-weight:870;color:#0d705b}.range-field input[type=range]{display:block;width:100%;height:33px;accent-color:#13775f;margin:8px 0 0;touch-action:pan-y}.rep-results{display:flex;gap:11px;flex-wrap:wrap;margin-top:16px}.rep-results>div{display:flex;align-items:center;gap:7px;font-size:11px;color:#4a6d64}.old-key,.new-key{height:9px;width:22px;border-radius:20px;display:inline-block}.old-key{background:#51dbcb}.new-key{background:#f6be78}
.mutation-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:14px 0}.mutation-presets button{min-height:42px;padding:9px;border:1px solid #d7e6da;border-radius:10px;background:#f9fbf7;color:#295e50;font-size:11px;font-weight:790;text-align:left}.mutation-presets button[aria-pressed=true]{background:#e3f5e9;border-color:#269879;box-shadow:inset 0 0 0 1px #268e76}.mutation-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mutation-controls label,.parent-fields label{display:grid;gap:6px;font-size:11px;font-weight:770;color:#44695f}.mutation-controls select,.parent-fields select{border:1px solid #cadecf;border-radius:10px;background:white;color:#254d44;padding:10px;min-height:44px;width:100%}.mutation-controls .primary-action{grid-column:1/-1}.mutation-explanation{padding:14px;background:#f0f7ee;border:1px solid #d7e9d6;border-radius:12px;margin-top:13px}.mutation-explanation strong{font-size:15px;color:#215448}.mutation-explanation p{font-size:12px;color:#526f63;margin-top:6px;line-height:1.6}
.expression-viz,.diagram-viz,.inheritance-viz{margin:0 16px;background:linear-gradient(140deg,#081f33,#0e2b43);border-radius:17px;min-height:410px;padding:23px 17px;color:#e3f4ef;overflow:hidden}.expression-viz .gene-row{margin:10px 0 18px}.gene-row header{display:flex;justify-content:space-between;font-size:11px;color:#a4d2ca;margin-bottom:7px}.sequence-ribbon{display:flex;flex-wrap:wrap;gap:4px}.sequence-ribbon .base-chip{font-size:12px;min-width:23px;min-height:29px;height:29px}.sequence-ribbon .base-chip.is-active{outline:2px solid #f1dc8d;outline-offset:1px;transform:translateY(-2px)}.strand-arrow{font-size:11px;color:#a1d9da}.gene-arrow{display:grid;place-items:center;color:#b8e9cb;font-size:12px;font-weight:800;margin:6px 0}.protein-chain{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}.amino-node{width:49px;height:49px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 28% 25%,#deffe8,#58b9ae 70%,#216a71);color:#09293a;font-size:12px;font-weight:870;box-shadow:0 0 0 2px #d4f7db44}.amino-node.is-new{box-shadow:0 0 0 3px #f0d180}.stop-node{font-weight:850;color:#f6d598;align-self:center;font-size:12px}.expression-note{font-size:12px;color:#add4d6;line-height:1.6;margin-top:12px}.gene-legend{display:flex;gap:8px;flex-wrap:wrap}.gene-legend span{font-size:10px;color:#b4d0df;background:#183c52;border:1px solid #3b647c;border-radius:99px;padding:5px 8px}
.meiosis-stage{padding:13px;background:#f3f8f3;border:1px solid #dfebe0;border-radius:12px}.stage-counter{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#598073;font-size:11px}.stage-counter strong{font-size:15px;color:#167c67}.meiosis-stage h3{font-size:17px;margin:8px 0}.meiosis-stage p{font-size:12px;color:#537064;line-height:1.65}.checkrow{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:#416958;line-height:1.6;padding:9px 0;font-weight:690}.checkrow input{margin-top:3px;accent-color:#11785e;width:16px;height:16px;flex:none}.diagram-viz{display:flex;align-items:center;justify-content:center}.diagram-viz svg{width:100%;height:auto;max-height:380px}.diagram-viz .diagram-label{font:700 15px system-ui;fill:#e9f8ff}.diagram-viz .cell-disc{fill:#123a53;stroke:#5c92a0;stroke-width:3}.diagram-viz .cell-line{stroke:#90b6c7;stroke-dasharray:6 7;stroke-width:2}.diagram-viz .chrom{stroke-linecap:round;stroke-width:9}.diagram-viz .chrom-centromere{fill:#ffe2ac;stroke:#244866;stroke-width:2}.diagram-viz .exchange{fill:none;stroke:#f9d28e;stroke-width:2;stroke-dasharray:5 5}
.parent-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.inherit-legend{display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:11px;color:#52756b;margin:13px 0}.dominant-key,.recessive-key{font-size:14px;font-weight:880;padding:6px;border-radius:7px;background:#d9f3e9;color:#165b4c}.recessive-key{background:#f5e9cf;color:#926121}.inheritance-viz{display:flex;align-items:center;flex-direction:column;justify-content:center}.punnett{display:grid;grid-template-columns:58px repeat(2,minmax(77px,124px));grid-template-rows:44px repeat(2,76px);gap:7px;justify-content:center;margin:12px auto}.punnett>div{display:grid;place-items:center;border-radius:10px;font-weight:870}.punnett .corner{font-size:12px;color:#b4dbdb;font-weight:680}.punnett .gamete{color:#fce5a9;background:#23465f;border:1px solid #416f7e}.punnett .offspring{background:#e7f8f1;color:#164b43;border:1px solid #78d0b0;font-size:23px}.punnett .offspring.recessive{background:#f7eed6;color:#8b652d;border-color:#e0b979}.inheritance-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;width:100%;max-width:490px;margin-top:17px}.inheritance-summary>div{text-align:center;background:#163b50;border:1px solid #3e6b7b;border-radius:10px;padding:11px}.inheritance-summary b{font-size:20px;display:block;color:#d4f2e0}.inheritance-summary span{font-size:11px;color:#a9c8d1}.inheritance-viz .model-mini-note{font-size:11px;color:#adcfd1;text-align:center;margin-top:12px}.sample-results{padding:12px 13px;border:1px solid #d7e5d7;background:#f3f8f0;border-radius:12px;font-size:11px;color:#507669;line-height:1.55}.sample-results .sample-row{display:flex;align-items:center;gap:9px;margin:8px 0}.sample-results .bar-back{height:8px;flex:1;min-width:30px;border-radius:8px;background:#dce9df;overflow:hidden}.sample-results .bar-back i{display:block;height:100%;background:#6fac99;border-radius:8px}.sample-results b{min-width:55px;color:#2b6754;text-align:right}
.reflection-card{margin:18px 0;padding:25px;display:grid;grid-template-columns:minmax(230px,.9fr) minmax(0,1.1fr);gap:25px;align-items:start}.reflection-card h2{font-size:25px;margin-bottom:11px}.reflection-card p:not(.overline){font-size:13px;color:#60786d}.reflection-tools label{font-size:12px;font-weight:790;color:#365f52;display:block;margin-bottom:9px}.reflection-tools textarea{width:100%;resize:vertical;border:1px solid #c7dcd1;border-radius:12px;min-height:83px;padding:12px 13px;color:#204e46;background:#fcfefa;font-size:13px;line-height:1.55}.journal-buttons{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px}.journal-entries{display:grid;gap:8px;margin-top:10px}.journal-entry{border-top:1px solid #dbe8dd;padding:9px 0;font-size:12px;color:#52746a}.journal-entry strong{font-size:11px;color:#286452}.journal-entry p{overflow-wrap:anywhere}.journal-entry button{margin-top:6px;background:transparent;color:#9c4e43;border:0;font-size:11px;text-decoration:underline}.learning-bridge{margin-top:18px;padding:25px}.learning-bridge>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.learning-bridge article{background:#f3f9f4;border:1px solid #e0ede3;border-radius:12px;padding:18px}.learning-bridge article b{font-size:11px;color:#278575}.learning-bridge h3{font-size:17px;margin:11px 0}.learning-bridge article p{font-size:12px;color:#5b746a}.footer{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:24px 5px 36px}.footer p{font-size:11px;color:#6b7e76;max-width:650px}.footer a{color:#177560;text-decoration:none;font-size:12px;font-weight:840}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,170%);z-index:90;max-width:calc(100vw - 28px);background:#123b48;color:#fff;border-radius:12px;padding:12px 18px;font-size:12px;box-shadow:0 14px 38px #002c2f44;transition:transform .2s}.toast.show{transform:translate(-50%,0)}
@media(max-width:1140px){.workspace{grid-template-columns:minmax(0,1.08fr) minmax(325px,.95fr)}.dna-viewport,.dna-viewport canvas{height:350px;min-height:350px}.expression-viz,.diagram-viz,.inheritance-viz{min-height:350px}.control-card{padding:19px}.intro-art{width:200px;height:180px}.intro{padding:28px}}
@media(max-width:850px){.workspace{grid-template-columns:1fr}.visual-card,.control-card{min-height:0}.intro-art{display:none}.dna-viewport,.dna-viewport canvas{height:370px;min-height:370px}.expression-viz,.diagram-viz,.inheritance-viz{min-height:360px}.control-card{padding:23px}.module-nav{width:100%}}
@media(max-width:580px){.topbar{height:67px;padding:8px 13px}.brand b{font-size:16px}.brand img{width:27px;height:27px}.brand small{font-size:8px;letter-spacing:.05em}.nav-right{gap:6px}.back{font-size:12px;padding:8px 3px}.lang span{display:none}.lang select{font-size:11px;padding:7px;max-width:93px}.shell{padding:0 9px}.intro{padding:24px 17px 22px;margin-bottom:9px;border-radius:0 0 16px 16px}.intro h1{font-size:clamp(28px,7.7vw,41px);line-height:1.12}.intro-copy{font-size:12px;line-height:1.65}.eyebrow{font-size:9px}.intro-badges span{font-size:9px;padding:6px 8px}.module-nav{margin:9px 0;gap:4px;padding:4px;border-radius:12px;position:sticky;top:0;z-index:12;box-shadow:0 4px 18px #123b3715}.module-nav button{font-size:11px;padding:9px 11px;min-height:45px}.workspace{gap:10px}.visual-card,.control-card,.reflection-card,.learning-bridge{border-radius:15px}.visual-head{padding:15px 12px 11px}.visual-head h2{font-size:22px}.stage-subtitle{font-size:11px}.listen-button{font-size:11px;padding:8px;min-height:37px}.dna-viewport{margin:0 8px}.dna-viewport,.dna-viewport canvas{height:298px;min-height:298px;border-radius:12px}.scene-instruction{left:8px;bottom:10px;max-width:calc(100% - 125px)}.scene-instruction span{font-size:10px;padding:6px 8px}.scene-actions{right:8px;bottom:9px;gap:3px}.scene-actions button{width:33px;height:34px;font-size:18px}.visual-toolbar{padding:10px;gap:7px}.switch-group button{font-size:10px;padding:8px 9px;min-height:37px}.visual-insight{padding:13px 14px;min-height:58px;font-size:12px}.model-caution{padding:10px 13px;font-size:10px}.control-card{padding:20px 14px}.control-panel h2{font-size:22px}.control-description{font-size:12px;margin-bottom:15px}.sequence-box{padding:10px}.base-sequence button,.base-chip{min-width:24px;height:32px;font-size:11px}.expression-viz,.diagram-viz,.inheritance-viz{margin:0 8px;padding:13px 10px;min-height:310px;border-radius:12px}.expression-viz .gene-row{margin:9px 0 13px}.gene-row header{font-size:10px}.sequence-ribbon{gap:3px}.sequence-ribbon .base-chip{min-width:21px;height:26px;font-size:10px}.amino-node{width:41px;height:41px;font-size:10px}.mutation-presets{gap:5px}.mutation-presets button{font-size:10px;min-height:43px;padding:8px}.punnett{grid-template-columns:44px repeat(2,minmax(69px,100px));grid-template-rows:36px repeat(2,68px);gap:5px}.inheritance-summary{gap:5px}.inheritance-summary>div{padding:9px 5px}.inheritance-summary b{font-size:18px}.inheritance-summary span{font-size:10px}.reflection-card{grid-template-columns:1fr;gap:15px;padding:19px 14px;margin:10px 0}.reflection-card h2{font-size:22px}.learning-bridge{padding:18px 14px;margin-top:10px}.learning-bridge>div{grid-template-columns:1fr;gap:8px}.learning-bridge article{padding:13px}.learning-bridge h3{margin:6px 0;font-size:15px}.footer{padding:18px 8px 34px;gap:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}