:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;color:var(--text);background:var(--bg);--bg: #f7f7fa;--panel: #fff;--text: #292839;--muted: #666579;--line: #e7e5ef;--purple: #6952cf;--purple-soft: #f0edf9;--soft: #faf9fc;--cell-inner: #faf9fe;--cell-edge: #f0ecfb;--grid-dot: #dfdce9;--centromere: #5e4a87;--cell-stroke: #c9c0e5;--spindle: #beb2d7;--green: #21785f;--cell-shadow: #e9e3f4;--maternal: #e13d50;--paternal: #7941cb}:root[data-theme=dark]{color-scheme:dark;--bg: #171820;--panel: #21222d;--text: #f0eef9;--muted: #b2aec7;--line: #393846;--purple: #b8a5ff;--purple-soft: #302943;--soft: #272631;--cell-inner: #252530;--cell-edge: #373047;--grid-dot: #3d3a4c;--centromere: #e2d9fa;--cell-stroke: #71658c;--spindle: #786c92;--green: #7fdbbb;--cell-shadow: #332a48;--maternal: #ff6878;--paternal: #b083f2}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select,input{border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);min-height:44px}button{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 15px;font-weight:600}button:hover:not(:disabled){border-color:var(--purple);background:var(--purple-soft)}button:disabled{cursor:default;opacity:.5}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--purple);outline-offset:3px}button svg{width:20px;height:20px;flex-shrink:0}select{padding:8px 12px;max-width:100%}input{padding:10px 13px;max-width:100%}a{color:var(--purple)}h1,h2,h3,p{margin:0}h1{font-size:28px;letter-spacing:-.7px}h2{font-size:24px;line-height:1.35;letter-spacing:-.4px}h3{font-size:18px}.primary{background:var(--purple);color:var(--panel);border-color:var(--purple)}.primary:hover:not(:disabled){color:var(--text)}.icon{width:44px;min-width:44px;padding:9px}.active{background:var(--purple-soft);border-color:var(--purple);color:var(--purple)}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}.app-header{max-width:1180px;margin:auto;height:90px;display:flex;align-items:center;gap:28px;padding:18px 24px}.brand{display:flex;gap:9px;align-items:center;color:var(--text);font-size:22px;font-weight:750;text-decoration:none;letter-spacing:-1px}.brand>svg{color:var(--purple);width:30px;height:30px}.brand span span{color:var(--purple)}.app-header nav{display:flex;gap:6px;flex:1}.app-header nav button{min-width:0;overflow-wrap:anywhere;border-color:transparent;background:transparent;color:var(--muted)}.app-header nav button.active{background:var(--purple-soft);color:var(--purple)}.app-header nav button>span,.answer>span:not(.letter){min-width:0;overflow-wrap:anywhere}.timeline,.transport,.room-code,.counters strong{direction:ltr;unicode-bidi:isolate}.header-tools{display:flex;gap:7px;align-items:center}.header-tools select{width:121px;font-size:14px}.header-tools .icon{background:transparent;border-color:transparent}.app main{max-width:1050px;padding:8px 24px 32px;margin:auto}.panel{background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:0 8px 30px #29243904;overflow:hidden}.simulation{padding:22px}.sim-toolbar,.toolbar-right{display:flex;align-items:center;gap:8px}.sim-toolbar{justify-content:space-between}.segmented{display:flex;padding:4px;background:var(--soft);border:1px solid var(--line);border-radius:15px;gap:4px}.segmented button{min-width:105px;border-color:transparent;background:transparent}.segmented button.active{background:var(--purple-soft);color:var(--purple)}.dotation{color:var(--muted);font-size:14px;margin-inline-end:8px}.phase-heading{display:flex;justify-content:space-between;align-items:center;padding:24px 2px 14px}.phase-heading>span{font-size:14px;color:var(--muted)}.timeline{display:flex;align-items:center;gap:7px;position:relative;margin-bottom:18px;overflow-x:auto;padding:3px 2px}.timeline button{border-radius:50%;padding:0;width:44px;min-width:44px;font-size:13px;position:relative;background:var(--soft);color:var(--muted)}.timeline .active{background:var(--purple);color:var(--panel);border-color:var(--purple)}.timeline .visited{color:var(--purple);border-color:var(--purple-soft);background:var(--purple-soft)}.counters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);border-radius:15px;background:var(--soft);padding:13px 5px}.counters>div{min-width:0;display:flex;flex-direction:column;gap:3px;align-items:center;border-inline-end:1px solid var(--line)}.counters>div:last-child{border:0}.counters strong{font-size:27px;font-weight:650;font-variant-numeric:tabular-nums}.counters span{max-width:100%;padding-inline:3px;text-align:center;overflow-wrap:anywhere;font-size:12px;color:var(--muted)}.cell-counter{display:flex;align-items:center;justify-content:center;gap:20px;padding:8px;font-size:13px;color:var(--muted)}.cell-counter select{min-height:35px;padding:3px 10px}.stage-wrap{position:relative;margin-top:14px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--soft)}.cell-svg{direction:ltr;width:100%;display:block;height:clamp(360px,calc(100dvh - 290px),520px)}.origin-legend{display:flex;gap:18px;padding:12px 16px 0;font-size:13px;font-weight:600}.origin-legend span{display:inline-flex;align-items:center;gap:6px}.origin-legend i{width:10px;height:10px;border-radius:50%}.zoom-controls{position:absolute;bottom:10px;right:10px;display:flex;gap:5px}.zoom-controls .icon{background:var(--panel);width:36px;min-width:36px;min-height:36px;padding:6px}.transport{display:flex;gap:10px;justify-content:center;padding-top:20px}.transport .play{width:62px;height:52px;border-radius:17px}.transport .icon{height:52px;width:52px}.settings{display:flex;flex-wrap:wrap;gap:16px;padding:16px;background:var(--soft);border:1px solid var(--line);border-radius:12px;margin-top:16px;font-size:13px}.settings label{display:flex;align-items:center;gap:8px}.settings input{min-height:20px;width:20px;height:20px;accent-color:var(--purple)}.separate-row{display:flex;justify-content:center;align-items:center;gap:10px;padding:16px 0 0}.separate-row>span{font-size:15px;font-weight:600;margin-right:8px}.separate-row button{padding:7px 15px;min-width:142px}.separation-icon{width:90px!important;height:52px!important}.feedback{padding:12px;text-align:center;border-radius:10px;color:var(--purple);font-weight:600;background:var(--purple-soft);margin:14px 0 0;font-size:15px}.inspector{display:flex;align-items:center;gap:12px;padding:12px 2px 0;flex-wrap:wrap}.inspector>.icon{margin-inline-start:auto}.gene-strips{direction:ltr;display:flex;gap:6px}.gene-strip{direction:ltr;display:flex;overflow:hidden;border-radius:7px;border:1px solid var(--line)}.gene-strip>span{padding:4px 7px;color:#fff;font-size:11px;font-weight:700}.maternal{background:var(--maternal)}.paternal{background:var(--paternal)}.gene-strip>.maternal{background:#ba283b}.gene-strip>.paternal{background:#6832b4}.cell-glow{fill:var(--cell-shadow);opacity:.5}.membrane{stroke:var(--cell-stroke);stroke-width:2}.nuclear-envelope{fill:none;stroke:var(--cell-stroke);stroke-width:1.8;stroke-dasharray:7 5}.equator{stroke:var(--cell-stroke);stroke-width:1;stroke-dasharray:5 7}.spindle{stroke:var(--spindle);stroke-width:1;opacity:.55}.spindle circle{fill:var(--spindle);stroke:none}.spindle path{stroke-width:1.7}.chromosome{cursor:pointer;transform-origin:0 0;transition:transform var(--motion-time) cubic-bezier(.3,.03,.25,1);touch-action:none;outline:none}.chromosome-body{transform-origin:0 0;animation:chromosome-drift var(--drift-duration) ease-in-out var(--drift-delay) infinite;transition:transform .18s ease-out}.metaphase-stage .chromosome-body,.paired-stage .chromosome-body{animation:none}.paired-stage .chromosome:hover .chromosome-body,.paired-stage .chromosome:focus-visible .chromosome-body,.paired-stage .chromosome.dragging .chromosome-body{transform:none}.chiasma{pointer-events:none;fill:none;stroke:var(--text);stroke-width:1.5;opacity:.7}.crossover-exchange{animation:crossover-exchange var(--motion-time) ease-in-out}@keyframes crossover-exchange{0%,35%{stroke:var(--original-color)}to{stroke:var(--exchanged-color)}}.chromosome:hover .chromosome-body,.chromosome:focus-visible .chromosome-body,.chromosome.dragging .chromosome-body{animation:none;transform:scale(1.06)}@keyframes chromosome-drift{0%,to{transform:translate(-1px,1px) rotate(-1deg)}50%{transform:translate(1px,-1px) rotate(1deg)}}.chromosome:hover .hit-area,.chromosome:focus-visible .hit-area{fill:var(--purple-soft)}.chromosome:focus-visible .hit-area{stroke:var(--purple);stroke-width:2}.selection-outline{fill:none;stroke:var(--purple);stroke-width:2;stroke-dasharray:5 4}.chr-label{font:10px system-ui;fill:var(--text)}.cell-label,.annotation{font:12px system-ui;fill:var(--muted)}.annotation-line{stroke:var(--cell-stroke);fill:none}.cell-outline{transition:all var(--motion-time)}@keyframes sister-separation{0%{transform:var(--from-transform)}}.challenges{padding:24px}.challenge-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:26px}.challenge-toolbar>span{margin-left:auto;white-space:nowrap;font-size:13px;color:var(--muted)}.categories{display:flex;gap:6px;flex-wrap:wrap}.categories button{font-size:14px}.question-card h2{max-width:750px;margin-bottom:23px}.answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.answer{min-height:160px;flex-direction:column;position:relative;text-align:center;padding:20px 16px;font-size:17px;line-height:1.4;background:var(--soft);font-weight:550}.answer .letter{width:45px;height:45px;border-radius:13px;background:var(--purple-soft);color:var(--purple);display:grid;place-items:center;font-size:21px;margin-bottom:7px}.answer.selected{border:2px solid var(--purple);background:var(--purple-soft)}.answer.correct{border-color:var(--green)}.answer.correct .choice-check{color:var(--green)}.answer .choice-check{position:absolute;right:10px;top:10px}.question-actions{display:flex;justify-content:space-between;gap:12px;margin-top:23px}.question-actions:empty{display:none}.count-table table{width:100%;border-collapse:collapse;margin:24px 0;text-align:left}.count-table th,.count-table td{padding:12px;border-bottom:1px solid var(--line)}.count-table input{width:90px}.guide{padding:34px;max-width:830px;margin:auto}.guide h1{margin-bottom:32px}.guide section{margin:25px 0}.guide p{line-height:1.8;color:var(--muted);margin-top:10px}.guide details{border-top:1px solid var(--line);padding:20px 0}.guide summary{cursor:pointer;font-size:19px;font-weight:600}.guide-links{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:22px}.guide-links a{display:flex;align-items:center;gap:5px;font-size:14px}.guide-links a svg{width:15px}.projection .app-header{display:none}.projection main{max-width:1450px;padding-top:22px}.exit-projection{position:fixed;right:14px;top:12px;z-index:4}.projecting .sim-toolbar{padding-right:55px}.projecting .cell-svg{max-height:65vh}.projecting .counters strong{font-size:36px}.classroom-entry{padding:32px}.classroom-entry h1{margin-bottom:34px}.entry-actions{display:grid;grid-template-columns:1fr 1fr;gap:22px}.entry-actions.qr-entry{grid-template-columns:1fr;max-width:450px;margin:auto}.entry-actions>div,.entry-actions>form{padding:30px;border:1px solid var(--line);border-radius:18px;background:var(--soft);display:flex;flex-direction:column;align-items:stretch;gap:20px}.entry-actions>div>svg,.entry-actions>form>svg{width:54px;height:54px;color:var(--purple);margin:0 auto 10px}.entry-actions input{font-size:25px;letter-spacing:3px;text-align:center}.room-bar{display:flex;align-items:center;gap:18px;padding:13px 19px;margin-bottom:18px;border-radius:16px}.room-code{font-size:25px;letter-spacing:3px;font-variant-numeric:tabular-nums}.connection{font-size:13px;color:var(--muted)}.connection.connected:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:6px}.participants{margin-inline-start:auto;display:flex;align-items:center;gap:7px;font-size:14px}.participants svg{width:20px}.teacher-top{display:grid;grid-template-columns:285px 1fr;gap:18px;margin-bottom:18px}.join-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px}.join-card img{border-radius:10px}.join-card a{font-size:14px;text-decoration:none}.poll-controls{padding:28px;display:flex;flex-direction:column;justify-content:center;gap:18px;min-width:0}.poll-controls select{width:100%;font-size:15px;text-overflow:ellipsis}.poll-progress{display:flex;justify-content:space-between;font-size:22px;margin-top:12px}.poll-buttons{display:flex;gap:12px;flex-wrap:wrap}.live-question{padding:25px;margin-bottom:18px}.live-question-label{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:14px;margin-bottom:20px}.live-question .answer:disabled{opacity:1}.results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:26px;border-top:1px solid var(--line);padding-top:22px}.results h3{font-size:15px;margin-bottom:12px}.result{display:flex;align-items:center;gap:10px;margin:10px 0}.result>div{flex:1;border-radius:6px;background:var(--soft);height:16px;overflow:hidden}.result i{display:block;height:100%;background:var(--purple);transition:width .25s}.result strong{width:24px;text-align:right;font-size:14px}.waiting{padding:70px 20px;display:flex;flex-direction:column;align-items:center;gap:25px;font-size:22px;margin-bottom:18px}.waiting svg{height:70px;width:70px;color:var(--purple)}.confirm{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:20px;margin-bottom:18px}@media(max-width:800px){.app-header{gap:15px;padding:14px 18px;height:auto;flex-wrap:wrap}.brand{font-size:21px}.app-header nav{order:3;width:100%;justify-content:center;flex-basis:100%}.header-tools{margin-inline-start:auto}.app main{padding:8px 14px 22px}.simulation{padding:15px}.phase-heading{padding-top:20px}.timeline{gap:6px}.timeline button{min-width:38px;width:38px;min-height:38px}.answers{grid-template-columns:1fr}.answer{min-height:86px;flex-direction:row;justify-content:flex-start;text-align:start;font-size:17px;padding:15px 20px;gap:18px}.answer .letter{margin-bottom:0;flex-shrink:0;width:40px;height:40px}.answer .separation-icon{width:75px!important;height:44px!important}.answer .choice-check{position:static;margin-inline-start:auto}.challenges{padding:20px}.challenge-toolbar{flex-wrap:wrap;gap:9px}.categories{flex:1;gap:4px}.categories button{padding:8px 10px;font-size:13px}.teacher-top{grid-template-columns:220px 1fr}.join-card img{width:180px;height:180px}.poll-controls{padding:20px}.guide{padding:25px}.room-code{font-size:22px;letter-spacing:2px}.room-bar{gap:12px}}@media(max-width:520px){.brand{font-size:18px}.brand>svg{width:25px}.app-header{gap:10px;padding:12px 14px}.header-tools{gap:2px}.header-tools select{width:95px;font-size:13px;padding:8px}.header-tools .icon{width:38px;min-width:38px}.app-header nav{gap:3px}.app-header nav button{flex:1;font-size:14px;padding:9px 10px;gap:6px}.app-header nav button svg{width:18px}.sim-toolbar{gap:8px}.segmented{padding:3px}.segmented button{min-width:72px;padding:8px 10px;font-size:14px}.toolbar-right{gap:3px}.toolbar-right .icon{width:36px;min-width:36px;padding:6px}.dotation{font-size:12px;margin-inline-end:0}.toolbar-right .fullscreen-control{display:none}.phase-heading h1{font-size:25px}.phase-heading>span{font-size:12px}.counters{padding:11px 2px}.counters strong{font-size:22px}.counters span{font-size:11px;line-height:1.3;white-space:normal}.cell-counter{flex-wrap:wrap;gap:6px;font-size:11px;padding:9px 2px}.stage-wrap{margin-top:12px}.cell-svg{height:280px;object-fit:contain}.zoom-controls{bottom:5px;right:5px}.zoom-controls .icon{width:30px;min-width:30px;min-height:30px;height:30px}.separate-row{flex-wrap:wrap;gap:7px}.separate-row>span{width:100%;text-align:center;font-size:14px}.separate-row button{min-width:0;flex:1;padding:6px;font-size:14px;gap:4px}.separate-row .separation-icon{width:65px!important;height:40px!important}.transport{padding-top:15px;gap:7px}.transport .icon{width:46px;height:46px}.transport .play{width:56px}.inspector{font-size:14px;gap:8px}.inspector button{font-size:13px;padding:8px}.inspector .icon{padding:9px}.question-card h2{font-size:22px;margin-bottom:20px}.question-actions button{padding:9px 12px;font-size:14px}.categories{width:100%;flex-basis:100%}.count-table{font-size:12px}.count-table th,.count-table td{padding:8px 4px}.count-table input{width:66px}.classroom-entry{padding:24px}.entry-actions{grid-template-columns:1fr;gap:15px}.entry-actions>div,.entry-actions>form{padding:20px;gap:15px}.entry-actions>div>svg,.entry-actions>form>svg{height:40px;width:40px}.room-bar{padding:12px;gap:8px;flex-wrap:wrap}.room-code{font-size:20px;letter-spacing:1px}.connection{font-size:11px}.participants{font-size:12px;gap:4px}.room-bar>.icon{width:36px;min-width:36px;min-height:36px}.teacher-top{grid-template-columns:1fr}.join-card{padding:16px}.join-card img{width:190px;height:190px}.poll-controls,.live-question{padding:20px}.results{gap:16px}.guide h1{font-size:27px}.guide h2{font-size:21px}.guide p{font-size:15px}.projecting .sim-toolbar{padding-right:0}.projection .exit-projection{top:4px;right:4px}.projecting{padding-top:52px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}