@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap";:root{font-family:DM Sans,sans-serif;color:#283b30;background:#f7f8f3;font-synthesis:none;font-weight:400;--green:#385740;--muted:#879085;--line:#e3e7dc;--orange:#df9263}*{box-sizing:border-box}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border:0;transition:background .2s,transform .2s,opacity .2s}button:disabled{opacity:.45;cursor:wait}button:hover:not(:disabled){transform:translateY(-1px)}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #93b484;outline-offset:4px}button svg{width:17px;height:17px;stroke-width:1.7}a{color:inherit}.header{height:88px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;text-decoration:none;font-family:Manrope,sans-serif;font-size:27px;font-weight:800;letter-spacing:-1.4px}.brand-icon{display:flex;align-items:center;justify-content:center;width:37px;height:37px;background:#e6ebdf;border-radius:12px;margin-right:11px;color:#486844}.brand-icon svg{width:26px;height:26px;stroke-width:1.6}.brand-light{font-weight:450}.brand-dot{color:#bf9268}.header-context{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:600;letter-spacing:1.6px;color:#7e897e}.context-dot{width:5px;height:5px;background:#7b9870;border-radius:50%}.header-divider{height:13px;width:1px;background:#d7ddcf;margin:0 8px}.about-button{gap:9px;background:transparent;font-size:12px;color:#626f62}.about-button svg:last-child{width:14px}main{max-width:1600px;margin:auto;padding:43px 5% 0}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:2.1px;color:#8d987f}h1{font-family:Manrope,sans-serif;font-weight:600;letter-spacing:-1.8px;font-size:40px;margin:9px 0;line-height:1.3}h1>span{color:#b08c63}.intro p{font-size:14px;color:#7f897c;margin:0}.engine-badge{display:flex;gap:11px;align-items:center;border:1px solid var(--line);border-radius:9px;padding:12px 16px;background:#fbfcf8}.engine-badge strong{font-size:11px;font-weight:500;display:block;margin-bottom:4px}.engine-badge div>span{font-size:8px;color:#929a8b;letter-spacing:1.2px}.live-dot{width:6px;height:6px;background:#789566;border-radius:50%;box-shadow:0 0 0 4px #78956615;flex-shrink:0}.lab-layout{display:grid;grid-template-columns:286px minmax(0,1fr);gap:20px}.controls-panel{background:#fffefa;border:1px solid var(--line);border-radius:13px;overflow:hidden;padding:22px 22px 17px}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.panel-heading h2{font-size:13px;margin:0;font-weight:650}.panel-heading svg{width:15px;height:15px;color:#8b957e}.control-section{padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:22px}.step-title{display:flex;align-items:center;gap:9px}.step-num{font-size:9px;letter-spacing:.4px;color:#98a18d;width:23px;height:23px;border-radius:6px;border:1px solid #e7eadf;display:flex;align-items:center;justify-content:center}.step-title h3{font-weight:600;font-size:12px;margin:0}.control-description{font-size:11px;color:#889180;line-height:1.7;margin:12px 0 16px}.primary-button{width:100%;background:#3b573c;color:#fffefa;padding:12px 14px;border-radius:7px;gap:9px;font-size:12px;font-weight:500}.primary-button:hover{background:#2c452e}.primary-button svg:last-child{margin-left:auto;width:15px}.primary-button span{margin-right:auto}.secondary-button{width:100%;background:transparent;border:1px solid var(--line);border-radius:7px;padding:10px;color:#778471;font-size:11px;gap:8px;margin-top:8px}.secondary-button:hover{background:#f3f5ed}.slider-heading{display:flex;justify-content:space-between;margin:18px 0 13px;font-size:11px;color:#677361}.slider-heading output{font-size:10px;color:#48673e;background:#edf1e7;border-radius:4px;padding:2px 6px;margin-top:-2px}input[type=range]{display:block;width:100%;height:4px;margin:0;accent-color:#5f7d4f;cursor:pointer;appearance:none;background:linear-gradient(to right,#688657 65%,#e4e8dc 65%);border-radius:5px}input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;background:#5d7d4d;border:3px solid #fffefa;outline:1px solid #5d7d4d;border-radius:50%;box-shadow:0 1px 4px #233c3020}input[type=range]::-moz-range-thumb{width:8px;height:8px;background:#5d7d4d;border:3px solid #fffefa;outline:1px solid #5d7d4d;border-radius:50%}.range-labels{display:flex;justify-content:space-between;font-size:9px;color:#9ba390;margin-top:10px}.second-slider{margin-top:22px}#agitation{background:linear-gradient(to right,#688657 20%,#e4e8dc 20%)}.text-button{margin-top:20px;gap:6px;background:transparent;color:#708367;font-size:10px;padding:0;justify-content:flex-start;width:100%}.text-button svg{width:13px;height:13px}.text-button svg:last-child{margin-left:auto}.parameters{padding-bottom:21px}.readouts{border:0;margin:0;padding-bottom:16px}.readout-row{display:flex;justify-content:space-between;font-size:10px;color:#85907c;margin-top:17px;align-items:center}.readout-row strong{font-weight:500;color:#4d6145;font-size:11px}.muted{color:#9aa38c;font-weight:400}.state-dot{display:inline-block;width:5px;height:5px;background:#adac95;border-radius:50%;margin:0 6px 1px 0}.contact-meter{display:flex;gap:5px;margin-top:10px}.contact-meter>span{height:4px;border-radius:2px;background:#e8ebdf;flex:1;transition:background .3s}.contact-meter>span.filled{background:#7f9b65}.model-note{display:flex;gap:8px;background:#f3f5ee;border:1px solid #eaeee2;border-radius:7px;padding:11px 10px;color:#8b947f}.model-note svg{flex-shrink:0;width:13px;height:13px}.model-note p{font-size:9px;line-height:1.6;margin:0}.viewer-panel{position:relative;background:#eef1e6;border:1px solid #dfe5d5;border-radius:13px;overflow:hidden;min-height:590px}#viewport{position:absolute;inset:0}#viewport canvas{width:100%;height:100%;display:block;touch-action:none}.viewer-top,.viewer-bottom{position:absolute;left:23px;right:21px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.viewer-top{top:19px}.scene-title{display:flex;align-items:center;gap:9px;font-size:8px;font-weight:600;letter-spacing:1.3px;color:#7c896e}.view-tools{display:flex;gap:6px;pointer-events:auto}.icon-button{width:31px;height:31px;border-radius:6px;color:#7f8c72;background:#f9faf480;border:1px solid #dfe5d580;pointer-events:auto}.icon-button:hover,.icon-button.active{background:#f9fbf2;color:#4b6941}.icon-button svg{width:15px;height:15px}.viewer-bottom{bottom:19px}.camera-hint{display:flex;gap:8px;align-items:center;font-size:9px;color:#8d997f}.camera-hint svg{width:15px;height:15px;stroke-width:1.3}.hint-dot{margin:0 10px}.playback{display:flex;align-items:center;gap:10px;background:#f9faf5c9;border:1px solid #dce2d3;border-radius:8px;padding:5px 10px 5px 5px;pointer-events:auto}.playback .icon-button{background:none;border:0;width:25px;height:25px}.playback-divider{height:14px;width:1px;background:#e0e5d9}.reset-button{font-size:10px;gap:6px;color:#758569;background:none;padding:0}.reset-button svg{width:12px;height:12px}.scale{position:absolute;left:24px;bottom:66px;font-size:6.5px;letter-spacing:1.1px;color:#a1aa94;display:flex;align-items:center;gap:8px}.scale>span{width:30px;height:5px;border:1px solid #a1aa94;border-top:0}#annotations{position:absolute;inset:0;pointer-events:none}.annotation{position:absolute;display:flex;gap:9px;align-items:flex-start;opacity:0;transition:opacity .2s;white-space:nowrap}.annotation-line{width:28px;height:1px;background:#8e9d7880;margin-top:7px;position:relative}.annotation-line:before{content:"";position:absolute;width:4px;height:4px;border:1px solid #7d906b;border-radius:50%;top:-2px;left:-5px}.annotation-line.orange{background:#ca9c76}.annotation-line.orange:before{border-color:#ca9c76}.annotation strong{display:block;font-size:11px;font-weight:550;color:#526448}.label-kicker{display:block;font-size:6.5px;letter-spacing:1.6px;color:#8c977f;margin:-15px 0 6px}.annotation-detail{display:block;font-size:8px;color:#93a080;margin-top:5px}.label-direction{color:#bd9b77;font-weight:400;font-size:8px;margin-left:5px}.site-annotation{position:absolute;font-size:8px;color:#8f9a77;opacity:0;display:flex;align-items:center;gap:6px}.site-annotation>span{width:5px;height:5px;background:#bad188;border-radius:50%;box-shadow:0 0 0 3px #a4bf7b25}.loading{position:absolute;inset:0;background:#eef1e6ed;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;z-index:3}.loading strong{font-size:13px;font-weight:500}.loading span{font-size:11px;color:#89977d}.loading-orbit{width:32px;height:32px;border:1px solid #d3dfc8;border-top:2px solid #76955e;border-radius:50%;animation:spin 1.2s linear infinite;margin-bottom:6px}@keyframes spin{to{transform:rotate(360deg)}}.sequence-panel{display:flex;align-items:center;gap:30px;background:#fffefa;border:1px solid var(--line);border-radius:11px;margin-top:20px;padding:22px 23px}.sequence-heading{display:flex;align-items:center;gap:12px;flex-shrink:0}.sequence-heading>svg{width:21px;height:21px;color:#859a6c;stroke-width:1.2}.sequence-heading h2{font-size:12px;font-weight:550;margin:0 0 5px}.sequence-heading span{color:#98a08e;font-size:8px}.sequence-wrap{flex:1;min-width:0}.sequence{display:flex;gap:3px}.nucleotide{flex:1;min-width:0;height:25px;display:flex;justify-content:center;align-items:center;border-radius:4px;color:#799465;background:#edf2e6;font-family:monospace;font-size:10px;position:relative;transition:box-shadow .3s}.nucleotide.u{color:#b89a58;background:#f5efdc}.nucleotide.g{color:#b78569;background:#f6e8dd}.nucleotide.c{color:#71989a;background:#e6f0eb}.nucleotide.binding:after{content:"";position:absolute;bottom:-4px;left:0;right:0;height:2px;background:#9cac79}.nucleotide.bound{box-shadow:inset 0 0 0 1.5px #6b8b50}.nucleotide.start{font-weight:700;box-shadow:inset 0 0 0 1px #bfac79}.sequence-caption{display:flex;justify-content:space-between;margin-top:12px;font-size:7px;color:#9aa38e}.sequence-caption>span{display:flex;align-items:center;gap:5px}.sequence-key{width:10px;height:2px;background:#9cac79}.start-caption{margin-left:70px}.start-caption svg{width:9px;height:9px}.base-legend{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;font-size:8px;color:#8f9983;flex-shrink:0;border-left:1px solid var(--line);padding-left:24px}.base-legend>span{display:flex;align-items:center;gap:5px}.base-legend i{width:5px;height:5px;border-radius:50%;background:#9eb884}.base-legend .base-u{background:#d2b577}.base-legend .base-g{background:#d3a284}.base-legend .base-c{background:#92b6b2}footer{display:flex;justify-content:space-between;align-items:center;padding:23px 0;font-size:9px;color:#a3ac99}footer>span:last-child{display:flex;align-items:center;gap:7px}footer svg{width:12px;height:12px;color:#9aaa88}dialog{max-width:560px;width:calc(100% - 40px);padding:30px;border:1px solid #dbe3cf;border-radius:15px;background:#fafbf5;color:#3c5037;box-shadow:0 30px 100px #243b3040}dialog::backdrop{background:#26362455;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between}dialog h2{font-family:Manrope,sans-serif;font-weight:600;font-size:28px;letter-spacing:-1px}dialog p{font-size:12px;line-height:1.8;color:#79866f}dialog a{font-size:11px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;margin:10px 0 20px;color:#587b43}dialog a svg{width:13px;height:13px}.dialog-done{margin-top:10px}#viewer-panel:fullscreen,.viewer-panel:fullscreen{width:100vw;height:100vh;border-radius:0}@media(min-width:1500px){.viewer-panel{min-height:665px}.controls-panel{padding:27px}.control-section{margin-bottom:28px;padding-bottom:28px}.readouts{margin:0;padding-bottom:22px}}@media(max-width:1100px){.header-context{display:none}main{padding-left:3%;padding-right:3%}.lab-layout{grid-template-columns:255px minmax(0,1fr);gap:14px}.controls-panel{padding:20px 17px}.sequence-panel{gap:15px;padding:20px 17px}.base-legend{padding-left:15px;gap:10px}.nucleotide{font-size:9px}.annotation-detail{display:none}.annotation-line{width:13px}.annotation{gap:5px}.annotation strong{font-size:9px}}@media(max-width:900px){.header{height:72px;padding:0 5%}.brand{font-size:24px}.about-button{font-size:10px}.about-button svg:last-child{display:none}main{padding:29px 5% 0}.intro{margin-bottom:24px;align-items:flex-start}h1{font-size:29px;letter-spacing:-1.2px}.eyebrow{font-size:7px;letter-spacing:1.4px}.intro p{font-size:11px}.engine-badge{padding:9px;margin-top:12px}.engine-badge strong{font-size:8px}.engine-badge div>span{font-size:6px;letter-spacing:.6px}.engine-badge .live-dot{display:none}.lab-layout{display:flex;flex-direction:column}.viewer-panel{order:-1;min-height:430px}.controls-panel{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:21px}.panel-heading{grid-column:1/-1;margin-bottom:0}.control-section{margin:0;padding-bottom:0;border:0}.readouts{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.readouts .step-title{grid-column:1/-1}.contact-meter{grid-column:2;grid-row:3;align-self:end}.model-note{grid-column:1/-1}.sequence-panel{flex-wrap:wrap}.sequence-heading{width:100%;gap:9px}.sequence-heading>div{display:flex;align-items:center;gap:12px}.sequence-heading h2{margin:0}.base-legend{display:flex;border:0;padding:0;gap:17px}.sequence-wrap{flex-basis:100%}.sequence{gap:2px}.nucleotide{font-size:8px;height:22px}.sequence-caption{font-size:7px}.viewer-top,.viewer-bottom{left:15px;right:15px}.camera-hint{font-size:8px;gap:5px}.hint-dot{margin:0 5px}.scene-title{font-size:7px;letter-spacing:1px}.scale{left:15px}.site-annotation{font-size:7px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.loading-orbit{animation:none}}