:root{font-family:Trebuchet MS,sans-serif;color:#e4eef9;background:#070c18;font-synthesis:none;color-scheme:dark}*{box-sizing:border-box}body{margin:0}header,main{width:calc(100% - 12px);max-width:none;margin:auto}header{display:flex;align-items:center;gap:10px;padding:10px 12px 8px;flex-wrap:wrap}.header-actions{display:flex;gap:10px;margin-left:auto}.scoreboard{display:flex;gap:26px;margin-left:16px}.scoreboard strong{display:block;font-size:24px;margin-top:5px;font-variant-numeric:tabular-nums}h1{font-size:28px;letter-spacing:4px;margin:2px 0}h1 span{color:#b9ef9c}.eyebrow{font-size:10px;letter-spacing:2px;color:#87a4bb}button,.import{border:1px solid #345263;border-radius:8px;background:#132433;color:#e1edf5;padding:11px 17px;font:inherit;cursor:pointer}button:hover,.import:hover{border-color:#b9ef9c}button:focus-visible,.import:focus-within{outline:3px solid #d8ffab;outline-offset:3px}button:disabled{opacity:.5;cursor:default}#pause{background:#b9ef9c;color:#12251e;border-color:#b9ef9c}.field-wrap{--field-height: max(280px,calc(100svh - var(--game-chrome,130px)));position:relative;display:grid;place-items:center;height:var(--field-height);border:1px solid #263e51;border-radius:14px;overflow:hidden;background:radial-gradient(ellipse at center,#112d37,#070e1d)}.game-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(122px,11vw,190px);gap:8px;width:100%;height:100%}.game-area{position:relative;min-width:0;height:100%}#field{position:absolute;top:0;right:0;bottom:0;left:0}#field canvas{display:block}.game-tools{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:8px 12px;font-size:12px;color:#9fb3c7}.game-tools button,.game-tools .import{padding:8px 12px}.import input{position:absolute;width:1px;height:1px;opacity:0}details{margin:0 24px;padding:16px;border:1px solid #213545;border-radius:10px;color:#9fb3c7}summary{cursor:pointer}li{padding:5px}footer{text-align:center;font-size:10px;letter-spacing:1.5px;color:#70879b;padding:28px}@media(max-width:700px){header,main{width:100%}header{flex-wrap:wrap;padding:10px 12px}.scoreboard{margin-left:auto;gap:16px}.scoreboard strong{font-size:19px}.header-actions{flex-basis:100%;margin-left:0}.game-tools{flex-wrap:wrap;padding:12px 18px;justify-content:flex-start}h1{font-size:21px}header button{padding:9px}.field-wrap{border-radius:0}}dialog{width:min(560px,calc(100% - 32px));max-height:85vh;overflow:auto;padding:28px;border:1px solid #4a6976;border-radius:16px;background:#101e2a;color:#dcebf2;box-shadow:0 24px 100px #0009}dialog::backdrop{background:#020914c9}dialog h2{margin-top:0;color:#c4f99d;font-size:24px}dialog ol{padding-left:23px}dialog li,dialog p{font-size:14px;line-height:1.7}dialog li{padding:5px 0 9px}dialog strong{color:#d3f5c0}.dialog-note{color:#92adbc}dialog form{display:flex;justify-content:flex-end}dialog form button{background:#b9ef9c;color:#12251e}#pair-huds{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.pairing-station{position:absolute;top:18%;height:65%;pointer-events:none;color:#d6e8ec}.station-at{left:.46875%;width:11.875%}.station-cg{left:47.03125%;width:12.1875%}.station-hint{position:absolute;top:56%;left:0;width:100%;text-align:center;font-size:clamp(7px,.65vw,10px);color:#93adb9;white-space:nowrap}.base-drag{position:fixed;z-index:1000;pointer-events:none;transform:translate(-50%,-50%);display:grid;place-items:center;width:52px;height:52px;border:2px solid currentColor;border-radius:12px;background:#101f2bee;font-size:30px;font-weight:700;box-shadow:0 0 22px currentColor}.science-reel{display:flex;align-items:center;gap:12px;min-width:0;min-height:48px;padding:6px 12px;border:1px solid #2e4c56;border-top:0;border-radius:0 0 10px 10px;background:linear-gradient(100deg,#112b30,#101b2e 70%);box-shadow:inset 0 1px #a4f5c514;overflow:hidden}.reel-label{flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:1.3px;color:#bcf6ba}.reel-label>span{color:#86efac;margin-right:4px}.reel-window{flex:1;min-width:0;overflow:hidden;border-radius:4px;padding:5px 0}.reel-window:focus-visible{outline:2px solid #bcf6ba;outline-offset:2px}.reel-track{display:flex;width:max-content;animation:science-scroll var(--reel-duration,300s) linear infinite;will-change:transform}.reel-group{display:flex;flex-shrink:0;align-items:center;gap:36px;padding-right:36px}.science-fact{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;color:var(--fact-color);font:500 15px/1.5 var(--fact-font);text-decoration:none}.science-fact:hover,.science-fact:focus-visible{text-decoration:underline;text-underline-offset:4px}.fact-label{font:700 9px/1.3 Trebuchet MS,sans-serif;letter-spacing:.8px;padding:3px 6px;border:1px solid currentColor;border-radius:4px;opacity:.85}.reel-toggle{flex-shrink:0;padding:6px 9px;font-size:11px;color:#c5e9d9;background:#132b30}.science-reel[data-paused=true] .reel-track,.reel-window:hover .reel-track,.reel-window:focus-within .reel-track{animation-play-state:paused}.science-reel[data-reduced=true] .reel-window{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#4d7975 #101b2e}.science-reel[data-reduced=true] .reel-track{animation:none;transform:none;will-change:auto}.science-reel[data-reduced=true] .reel-copy{display:none}@keyframes science-scroll{to{transform:translate(-50%)}}@media(max-width:700px){.science-reel{gap:8px;padding:6px 8px}.reel-label{max-width:76px;font-size:9px;letter-spacing:.6px}.science-fact{font-size:14px}.fact-label{font-size:8px}.reel-toggle{font-size:10px;padding:6px}}.pair-drag{width:66px;height:90px;grid-template-rows:1fr 1fr;gap:3px;padding:7px;background:#123324ee;border-radius:13px 18px 15px 12px;box-shadow:0 0 22px #9dff6b80}.pair-drag span{display:grid;place-items:center;width:100%;height:100%;border:1px solid currentColor;border-radius:7px;font-size:27px;line-height:1}.pair-drag:after{content:"";position:absolute;bottom:-9px;left:12px;width:7px;height:13px;border-radius:0 0 6px 6px;background:#a4f578;box-shadow:28px -3px #76c25a}.pair-drag[data-valid=true]{outline:3px solid #e3ffc4;outline-offset:5px;box-shadow:0 0 30px #9dff6bcc}.field-labels{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.field-label{position:absolute;bottom:0;height:8%;display:flex;flex-direction:column;justify-content:center;gap:4px;text-align:center;min-width:0}.canal-label{left:13.125%;width:33.125%}.organism-label{left:60.546875%;width:37.890625%}.field-label h2{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;color:#c4f99d;font:700 clamp(13px,1.35vw,21px)/1.1 "Trebuchet MS",sans-serif;letter-spacing:1px}.field-label h2 span{padding:2px 5px;border:1px solid #77ad7355;border-radius:4px;color:#b9d8c0;font:500 clamp(8px,.65vw,10px)/1 "Trebuchet MS",sans-serif;letter-spacing:.4px}.field-label p{margin:0;padding:0 8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#9fb9c7;font:500 clamp(9px,.8vw,12px)/1.3 "Trebuchet MS",sans-serif}.dna-tracker{position:relative;min-width:0;height:100%;margin-right:6px}.dna-log{position:absolute;top:3.3846%;height:88.3077%;width:100%;display:grid;grid-template-rows:repeat(var(--dna-count),minmax(14px,1fr));gap:2px;margin:0;padding:7px 6px;list-style:none;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#507e72 #0a1d28;border:1px solid #527b8a88;border-radius:12px;background:linear-gradient(180deg,#102b32e8,#0a1928e8);box-shadow:inset 3px 0 12px #69d8c412}.dna-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:3px;min-width:0;padding:1px 3px;border:1px solid #53657838;border-radius:4px;background:#101d2c;color:#8296a5;font:600 clamp(12px,calc(190px / var(--dna-count)),20px)/1 monospace}.dna-pair{display:flex;justify-content:center;gap:1px;padding:1px 0;border-radius:3px;color:#526879}.dna-row[data-state=current]{border-color:#8ceac9;background:#1b3a3d;box-shadow:inset 3px 0 #8ceac9}.dna-row[data-state=complete]{border-color:#8ad66a88;background:#173429}.dna-pair[data-filled=true]{background:#ffffff09}.tracker-label{width:100%}.tracker-label h2{font-size:clamp(10px,.85vw,14px);letter-spacing:.6px}.tracker-label p{padding:0 2px;font-size:clamp(8px,.65vw,10px)}@media(max-width:700px){.game-stage{grid-template-columns:minmax(0,1fr) 100px;gap:4px}.dna-log{padding:5px 3px}.dna-row{gap:1px;padding-inline:2px;font-size:clamp(10px,calc(140px / var(--dna-count)),14px)}.dna-tracker{margin-right:3px}}.dna-row[data-completion=celebrating]{border-color:#e8ffb6;background:#315447;box-shadow:0 0 12px #c7ff9188,inset 0 0 7px #e7ffc344;animation:master-glimmer .48s ease-in-out infinite alternate}.dna-row[data-completion=drifting]{border-color:#d4ffac;background:#294a39;box-shadow:0 0 9px #b9ff9266}.dna-row[data-completion=linked]{animation:master-arrival 1.2s ease-out both}.dna-tracker[data-paused=true] .dna-row{animation-play-state:paused}.dna-tracker[data-reduced=true] .dna-row{animation:none}.dna-tracker[data-reduced=true] .dna-row[data-completion=linked]{border-color:#c5f79d}@keyframes master-glimmer{to{box-shadow:0 0 16px #c7ff91bb,inset 0 0 9px #e7ffc377;background:#466447}}@keyframes master-arrival{0%{border-color:#f2ffce;background:#52734a;box-shadow:0 0 16px #c7ff91cc}to{border-color:#8ad66a88;background:#173429;box-shadow:0 0 #c7ff9100}}.quick-pair{flex:1;min-width:0;padding:5px 1px;font-size:clamp(10px,1vw,15px);background:#17332c;border-color:#74a98b;touch-action:none}.quick-pair{cursor:grab}.quick-pair:active{cursor:grabbing}.quick-pair[aria-pressed=true]{background:#31583c;box-shadow:0 0 8px #b9ef9c55}.pair-choices{display:flex;flex-direction:column;gap:24px;padding:0 8%}.pair-critter{container-type:inline-size;position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding:8px 3px;border:1px solid #8dbfbc45;border-radius:20px;background:#102834dd;pointer-events:auto;touch-action:none;color:#e4f9ed;transition:background .2s,border-color .2s}.pair-critter:hover:not(:disabled),.pair-critter[aria-pressed=true]{border-color:var(--pair-color);background:#244c4d;box-shadow:0 0 22px color-mix(in srgb,var(--pair-color) 25%,transparent)}.critter-body{display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;width:85%;aspect-ratio:1.35;border-radius:43% 54% 38% 47%;background:linear-gradient(135deg,var(--pair-color),var(--mate-color));box-shadow:inset 3px 4px #fff5,inset -4px -6px #081b3333;color:#132331;animation:pair-bob 2.7s ease-in-out infinite}.critter-1 .critter-body{animation-delay:-1.35s;border-radius:52% 35% 49% 38%}.critter-eyes{font-size:clamp(16px,2vw,30px);letter-spacing:.28em;line-height:.7;padding-left:.28em}.pair-letters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:4px;width:82%;margin:5px auto;font-size:clamp(14px,25cqi,30px);line-height:1.15;font-weight:900;letter-spacing:0;text-align:center}.pair-letters>span{display:block;min-width:0;padding:2px 0;border-radius:7px;color:#f5fcff;background:#102334;text-shadow:none;box-shadow:0 2px #0003}.pair-critter[data-pair=TA] .critter-body{border-radius:48% 48% 35% 35%}.pair-critter[data-pair=AT] .critter-body{border-radius:30% 30% 48% 48%;background:linear-gradient(160deg,#ffdc80,#ef9e36)}.pair-critter[data-pair=CG] .critter-body{border-radius:24%;background:linear-gradient(160deg,#96f4ff,#29bcd8)}.pair-critter[data-pair=GC] .critter-body{border-radius:48% 25%;background:linear-gradient(160deg,#d9bdff,#9971e8)}.critter-smile{width:15%;height:5px;border-bottom:2px solid #132331;border-radius:50%}.pair-name{font-size:clamp(13px,1.4vw,20px);font-weight:800;letter-spacing:.15em;margin-top:6px}.pairing-station .station-hint{position:static;display:block;text-align:center;margin-top:14%;font-size:clamp(8px,.75vw,11px);line-height:1.6}.pair-critter:disabled{opacity:1;border-color:#8dbfbc30;cursor:default}.pair-critter:focus-visible{outline:3px solid #e8ffb2;outline-offset:3px}@keyframes pair-bob{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}.game-area[data-reduced=true] .critter-body{animation:none}@media(prefers-reduced-motion:reduce){.critter-body{animation:none}}@media(max-height:650px){.pair-choices{gap:8px}.pair-critter{padding:4px 2px}.pairing-station .station-hint{margin-top:5%}}.status-announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.game-area[data-paused=true] .critter-body{animation-play-state:paused}#directions-dialog{position:relative}#directions-title{padding-right:30px}.dialog-close{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:36px;height:36px;padding:0;font-size:26px;line-height:1}