:root{--ink: #241a3d;--paper: #fff8ec;--accent: #ff5e78;--accent-2: #7c4dff;--mint: #37d0a5;--sun: #ffc53d;--sky-1: #aee3ff;--sky-2: #e8f9ff;--radius: 18px;--shadow: 0 6px 0 rgba(36, 26, 61, .18);--ui-font: "Baloo 2", "Comic Sans MS", "Chalkboard SE", "Segoe UI Rounded", system-ui, -apple-system, sans-serif;--touch-min: 44px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}html,body{margin:0;padding:0;height:100%;overflow:hidden}body{font-family:var(--ui-font);color:var(--ink);background:linear-gradient(180deg,var(--sky-1),var(--sky-2));user-select:none;-webkit-user-select:none;touch-action:none}#app{position:fixed;inset:0}#stage{position:absolute;inset:0}#stage canvas{display:block;width:100%;height:100%}#loader{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#2b1b52,#4a2a8a);transition:opacity .6s ease;color:#fff}#loader.done{opacity:0;pointer-events:none}.loader-inner{text-align:center}.loader-helix{display:flex;gap:10px;justify-content:center;margin-bottom:18px}.loader-helix span{width:14px;height:46px;border-radius:8px;animation:helixPulse 1.1s ease-in-out infinite}.loader-helix span:nth-child(1){background:#37d0a5;animation-delay:0s}.loader-helix span:nth-child(2){background:#ff5e78;animation-delay:.15s}.loader-helix span:nth-child(3){background:#ffc53d;animation-delay:.3s}.loader-helix span:nth-child(4){background:#4dc3ff;animation-delay:.45s}.loader-helix span:nth-child(5){background:#b07cff;animation-delay:.6s}@keyframes helixPulse{0%,to{transform:scaleY(.35);opacity:.5}50%{transform:scaleY(1);opacity:1}}.loader-text{font-size:clamp(16px,2.5vw,22px);margin:0}#hud-top{position:absolute;top:max(10px,env(safe-area-inset-top));left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;z-index:30;pointer-events:none}#brand{pointer-events:auto;background:#ffffffeb;border-radius:999px;padding:8px 16px;font-weight:800;font-size:clamp(14px,2vw,19px);box-shadow:var(--shadow)}#hud-top-buttons{display:flex;gap:8px;pointer-events:auto}.chip-btn{min-width:var(--touch-min);min-height:var(--touch-min);border:none;border-radius:999px;cursor:pointer;background:#ffffffeb;box-shadow:var(--shadow);font-size:20px;font-family:inherit;font-weight:800;color:var(--ink);transition:transform .15s ease}.chip-btn:active{transform:scale(.9)}#caption{position:absolute;left:50%;transform:translate(-50%);bottom:calc(96px + env(safe-area-inset-bottom));z-index:25;width:min(640px,calc(100vw - 24px));background:#fffcf4f2;border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 18px;text-align:center;transition:opacity .35s ease,translate .35s ease}#caption.hidden-up{opacity:0;translate:0 14px;pointer-events:none}#caption-title{margin:0 0 2px;font-size:clamp(17px,2.6vw,23px)}#caption-body{margin:0;font-size:clamp(13.5px,2vw,16.5px);line-height:1.35}#analogy{margin-top:8px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-size:clamp(12.5px,1.8vw,15px)}.analogy-tag{background:var(--sun);color:var(--ink);border-radius:999px;padding:2px 10px;font-weight:800;font-size:.85em}#analogy-text{font-weight:700;color:#5a4a86}#action-dock{position:absolute;left:50%;transform:translate(-50%);bottom:calc(18px + env(safe-area-inset-bottom));z-index:30;display:flex;flex-direction:column;align-items:center;gap:8px}.btn-main{min-height:54px;padding:12px 30px;border:none;border-radius:999px;cursor:pointer;font-family:inherit;font-weight:800;font-size:clamp(17px,2.4vw,21px);color:#fff;background:linear-gradient(180deg,#ff7d92,var(--accent));box-shadow:0 6px #c93b57;transition:transform .12s ease,filter .2s ease}.btn-main:hover{filter:brightness(1.06)}.btn-main:active{transform:translateY(3px);box-shadow:0 3px #c93b57}.btn-main:disabled{filter:grayscale(.7) brightness(.9);cursor:default;transform:none}.btn-sub{min-height:44px;padding:8px 20px;border:none;border-radius:999px;cursor:pointer;background:#ffffffeb;box-shadow:var(--shadow);font-family:inherit;font-weight:800;font-size:15px;color:var(--ink)}.btn-sub:active{transform:scale(.95)}#trail{position:absolute;top:max(64px,calc(env(safe-area-inset-top) + 56px));right:12px;z-index:28;display:flex;flex-direction:column;gap:6px;align-items:flex-end}.trail-stop{display:flex;align-items:center;gap:7px;background:#ffffffd9;border:none;cursor:pointer;border-radius:999px;padding:4px 10px 4px 6px;font-family:inherit;font-weight:700;font-size:12.5px;color:var(--ink);opacity:.55;transform:scale(.94);transition:opacity .25s,transform .25s}.trail-stop .dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:#d9d2ea;color:#6b5f8d;flex:none}.trail-stop.locked{opacity:.32;pointer-events:none}.trail-stop.visited{opacity:1;transform:scale(1)}.trail-stop.visited .dot{background:var(--mint);color:#fff}.trail-stop.current{transform:scale(1.08);box-shadow:0 0 0 3px var(--sun)}.trail-stop .label{display:none}@media (min-width: 720px){.trail-stop .label{display:inline}}#fact-bubble{position:absolute;z-index:40;max-width:min(300px,74vw);background:#fff;border-radius:16px;padding:10px 14px;font-size:14.5px;line-height:1.3;font-weight:700;color:var(--ink);box-shadow:var(--shadow);animation:bubblePop .25s cubic-bezier(.34,1.56,.64,1)}#fact-bubble:before{content:"";position:absolute;bottom:-9px;left:24px;border:10px solid transparent;border-top-color:#fff;border-bottom:0}@keyframes bubblePop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}#lab{position:absolute;inset:0;z-index:45;background:radial-gradient(120% 90% at 50% 115%,#ffd9a8 0%,transparent 60%),linear-gradient(180deg,#241a3d,#3b2566 55%,#59358f);display:flex;flex-direction:column}#lab-canvas{position:absolute;inset:0;width:100%;height:100%}#lab-ui{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;min-height:0}#lab-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:max(10px,env(safe-area-inset-top)) 14px 6px;color:#fff}#lab-title{margin:0;font-size:clamp(18px,3vw,26px);text-shadow:0 2px 0 rgba(0,0,0,.25)}#lab-sub{margin:0;font-size:clamp(13px,2vw,16px);opacity:.92;width:100%}#lab-exit{position:absolute;right:12px;top:max(10px,env(safe-area-inset-top))}#lab-steps{display:flex;gap:6px;flex-wrap:wrap}.lab-step-pill{border-radius:999px;padding:3px 11px;font-size:12.5px;font-weight:800;background:#ffffff29;color:#efe8ff;border:none;font-family:inherit}.lab-step-pill.done{background:var(--mint);color:#103c31}.lab-step-pill.now{background:var(--sun);color:var(--ink);transform:scale(1.05)}#lab-board{flex:1;min-height:0;margin:6px 12px;position:relative;background:#fffaf0f7;border-radius:22px;box-shadow:0 10px #00000040;overflow:hidden}#lab-board canvas{position:absolute;inset:0;touch-action:none}#lab-foot{display:flex;gap:10px;align-items:center;justify-content:center;padding:8px 12px calc(14px + env(safe-area-inset-bottom));flex-wrap:wrap}.read-tile{position:relative;display:flex;gap:1px;background:#fff;border-radius:10px;padding:5px 6px;box-shadow:0 3px #241a3d40;cursor:grab;touch-action:none;z-index:5}.read-tile.dragging{cursor:grabbing;z-index:20;box-shadow:0 10px 18px #0000004d}.read-tile.snapped{cursor:default}.base{width:17px;height:24px;border-radius:5px;display:grid;place-items:center;font-size:13px;font-weight:900;color:#fff;font-family:ui-rounded,var(--ui-font)}@media (max-width: 480px){.base{width:13px;height:19px;font-size:11px}}.base.A{background:#2fae62}.base.T{background:#ff5e5e}.base.G{background:#f5a623}.base.C{background:#3d8bff}.base.hole{background:#cfc7e2;color:#7d729c}.chain-slot{position:absolute;height:40px;border-radius:12px;border:3px dashed #b9aed6;background:#b9aed626;display:grid;place-items:center;color:#8d80ad;font-weight:800;font-size:13px}.shake{animation:shakeIt .4s}@keyframes shakeIt{0%,to{translate:0 0}20%{translate:-7px 0}40%{translate:6px 0}60%{translate:-4px 0}80%{translate:3px 0}}.zip-glow{animation:zipGlow .6s}@keyframes zipGlow{0%{box-shadow:0 0 #37d0a5cc}to{box-shadow:0 0 0 26px #37d0a500}}.genome-strip{position:relative;display:flex;flex-wrap:wrap;gap:2px}.codon-group{display:flex;gap:1px;padding:3px;border-radius:8px;border:2px solid transparent}.codon-group.marked{border-color:var(--sun);background:#fff3cf}.aa-bead{width:26px;height:26px;border-radius:50%;margin:0 3px;display:grid;place-items:center;font-size:10.5px;font-weight:900;color:#fff;box-shadow:inset 0 -4px #0000002e;animation:beadIn .4s cubic-bezier(.34,1.56,.64,1) backwards}@keyframes beadIn{0%{transform:scale(0) translateY(-14px)}to{transform:scale(1) translateY(0)}}.lab-note{position:absolute;left:50%;transform:translate(-50%);bottom:10px;max-width:92%;text-align:center;background:#241a3de0;color:#fff;border-radius:12px;padding:8px 14px;font-size:clamp(13px,2vw,15.5px);font-weight:700;line-height:1.3;transition:opacity .3s;z-index:15;pointer-events:none}#help-modal{position:absolute;inset:0;z-index:70;background:#241a3d8c;display:flex;align-items:center;justify-content:center;padding:18px}.help-card{background:var(--paper);border-radius:24px;padding:22px 26px;max-width:430px;width:100%;box-shadow:0 12px #00000040;text-align:center}.help-card h2{margin:0 0 10px}.help-card ul{text-align:left;padding-left:4px;list-style:none;margin:0 0 16px}.help-card li{margin:8px 0;font-size:15.5px;line-height:1.35}#confetti-layer{position:absolute;inset:0;z-index:65;pointer-events:none;overflow:hidden}.confetto{position:absolute;width:12px;height:18px;border-radius:3px;animation:confettiFall linear forwards}@keyframes confettiFall{0%{transform:translateY(-30px) rotate(0)}to{transform:translateY(110vh) rotate(720deg)}}.win-banner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:30;background:radial-gradient(circle at 50% 40%,#ffffffeb,#ffffffbf);text-align:center;padding:20px}.win-banner h3{margin:0;font-size:clamp(24px,5vw,38px);color:var(--accent-2)}.win-banner p{margin:0;font-size:clamp(15px,2.4vw,18px);font-weight:700}@media (prefers-reduced-motion: reduce){.confetto,.loader-helix span{animation-duration:.01s!important;animation-iteration-count:1!important}}