:root{color-scheme:dark;--bg:#091820;--panel:#102630;--line:#29414b;--text:#edf3ed;--muted:#96abb1;--mint:#bde7bd;--a:#67d1bd;--t:#eabd6f;--g:#ee927c;--c:#82b8ec;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 70% 5%,#17313a 0,transparent 48%),var(--bg);color:var(--text)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #e7f8b8;outline-offset:5px}button:disabled{cursor:default}button,a{transition:background .15s,border-color .15s,transform .1s}button:not(:disabled):active{transform:scale(.97)}.app{max-width:1440px;margin:auto;padding:0 5%}.topbar{height:86px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{color:var(--text);text-decoration:none;font-size:17px;letter-spacing:3px;font-weight:700;display:flex;align-items:center;gap:12px}.brand-icon{color:var(--mint);font-size:46px;font-weight:normal;line-height:1;transform:rotate(-35deg)}.brand-lab{font-weight:400;font-size:11px;color:var(--muted);letter-spacing:2px}.top-actions{display:flex;gap:24px}.icon-button,.text-button{border:0;background:transparent;color:var(--muted);font-size:12px;padding:12px 0}.icon-button:hover,.text-button:hover{color:white}.icon-button span{margin-left:9px}.intro{display:flex;justify-content:space-between;align-items:center;padding:38px 0 30px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2.3px;color:var(--mint)}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mint);margin-right:7px;box-shadow:0 0 12px #bde7bd40}h1{font-size:clamp(38px,4.7vw,64px);font-weight:500;letter-spacing:-2.6px;margin:12px 0 10px}h1 span{font-family:Georgia,serif;font-style:italic;font-weight:400;color:var(--mint)}.intro p{color:var(--muted);font-size:14px;margin:0;line-height:1.6}.specimen-label{font:10px/2 monospace;letter-spacing:2px;text-align:right;color:var(--mint)}.specimen-label span{color:#78949d}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:24px}.lab{background:linear-gradient(145deg,#152e37,#0c1d27);border:1px solid #36505a;border-radius:14px;overflow:hidden;position:relative;min-width:0}.lab-top{display:flex;justify-content:space-between;padding:18px 24px;border-bottom:1px solid #29414b;font:10px monospace;letter-spacing:1.6px;color:var(--muted)}.stats{display:flex;padding:23px 28px 20px;gap:58px}.stats small{display:block;font-size:9px;letter-spacing:2px;color:var(--muted);margin-bottom:7px}.stats strong{font-size:30px;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:1px}.stats strong span{color:#6e8e98;font-size:20px}.timer-stat{margin-left:auto}.progress-track{height:2px;background:#29414b;margin:0 28px}.progress-track div{height:100%;background:var(--mint);width:100%;transition:width .2s linear}.stage-line{display:flex;justify-content:space-between;gap:12px;padding:19px 28px 0;font:10px monospace;color:var(--mint);letter-spacing:1px}.stage-line span+span{color:var(--muted);letter-spacing:0}.molecule-view{height:358px;position:relative;overflow:hidden;background:radial-gradient(ellipse,#1a404744,transparent 65%)}canvas{width:100%;height:100%;display:block}.axis{position:absolute;top:32px;bottom:30px;display:flex;flex-direction:column;justify-content:space-between;color:#6b929e;font:12px monospace}.left-axis{left:24px}.right-axis{right:24px}.start-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:30px 38px;background:linear-gradient(90deg,#0e222af5 12%,#0e222acd 46%,#0e222a05)}.tag{color:var(--mint);font:9px monospace;letter-spacing:1.8px}.start-overlay h2{font-family:Georgia,serif;font-weight:400;font-size:35px;line-height:1.13;letter-spacing:-.7px;margin:16px 0}.start-overlay p{font-size:12px;line-height:1.8;color:#b2c4c7;margin:0 0 22px}.primary{border:0;background:var(--mint);color:#17312d;padding:15px 22px;border-radius:6px;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:40px;min-height:46px}.primary:hover{background:#d7f5cc}.primary span{font-size:19px;line-height:14px}.start-overlay small{font:8px monospace;letter-spacing:1.3px;color:#79969e;margin-top:15px}.board-bottom{min-height:61px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 25px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}#feedback.good{color:var(--mint)}#feedback.bad{color:#ffb39d}.side-panel{display:flex;flex-direction:column;gap:20px}.control-card{border:1px solid var(--line);border-radius:14px;padding:24px;background:#132832}.control-card h2{font-size:21px;font-weight:500;letter-spacing:-.5px;margin:12px 0}.control-card p{font-size:12px;color:var(--muted);line-height:1.7;margin:0}.base-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.base{border:1px solid;border-radius:8px;text-align:left;padding:12px 15px;position:relative;color:var(--color);background:color-mix(in srgb,var(--color) 7%,#10242b);display:flex;flex-direction:column;gap:3px;min-height:97px}.base:hover:not(:disabled){background:color-mix(in srgb,var(--color) 20%,#10242b);box-shadow:0 0 18px color-mix(in srgb,var(--color) 15%,transparent)}.base:disabled{opacity:.6}.base-letter{font-family:Georgia,serif;font-size:36px;line-height:1.1}.base>span+span{font-size:10px}.base kbd{position:absolute;right:10px;top:12px;font:8px monospace;opacity:.75}.a{--color:var(--a)}.t{--color:var(--t)}.g{--color:var(--g)}.c{--color:var(--c)}.pairing-key{display:flex;justify-content:space-around;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0;margin:19px 0 13px;font:11px monospace}.pairing-key>span{display:flex;align-items:center;gap:8px}.pairing-key b{color:#76929b;font-weight:400}.pairing-key i{width:5px;height:5px;border-radius:50%;background:var(--a)}.pairing-key .t-dot{background:var(--t)}.pairing-key .g-dot{background:var(--g)}.pairing-key .c-dot{background:var(--c)}.control-card .control-hint{font-size:10px;text-align:center;line-height:1.8}.journey{padding:0 8px}.journey>.eyebrow{color:var(--muted);font-size:9px;margin-bottom:13px}.journey-step{display:flex;align-items:center;gap:12px;margin:13px 0;color:#819ba3}.journey-step>span{width:27px;height:27px;border:1px solid #34505a;border-radius:50%;display:grid;place-items:center;font:9px monospace}.journey-step strong{display:block;font-size:11px;font-weight:500}.journey-step small{display:block;font-size:9px;margin-top:5px;color:#78949e}.journey-step b{margin-left:auto;font:9px monospace}.journey-step.active{color:var(--mint)}.journey-step.active>span{background:#bde7bd15;border-color:var(--mint)}footer{display:flex;justify-content:space-between;padding:24px 0 30px;font-size:9px;letter-spacing:1.5px;color:#78919a}footer>span+span{letter-spacing:0}.footer-star{color:var(--mint);font-size:16px;margin-left:12px}.hidden{display:none!important}.round{position:absolute;top:12px;bottom:16px;left:50%;width:min(360px,78%);transform:translateX(-50%)}.target-caption{display:flex;justify-content:space-around;color:#b3cbcd;font:9px monospace;letter-spacing:1.2px;margin-bottom:10px;text-shadow:0 1px 3px #000}.pairs{display:flex;flex-direction:column;gap:7px}.pair-row{display:flex;align-items:center;justify-content:center;gap:12px;transition:transform .2s}.nucleotide{width:70px;height:43px;border-radius:8px;border:1px solid color-mix(in srgb,var(--color) 75%,white);color:var(--color);background:linear-gradient(145deg,color-mix(in srgb,var(--color) 25%,#10212b),#10212b);box-shadow:inset 0 1px 8px #ffffff10,0 5px 15px #0004;display:flex;justify-content:center;align-items:center;font:25px Georgia,serif}.bond{width:48px;height:8px;border-top:1px dashed #acc7b780;border-bottom:1px dashed #acc7b780}.pair-row button{position:relative}.pair-row button.selected{outline:2px solid #e0efad;outline-offset:3px}.pair-row button.issue{border-style:dashed;color:#f2d18c}.pair-row button.fixed::after{content:'✓';position:absolute;right:-22px;font:14px Arial;color:var(--mint)}.pair-row button.issue::after{content:'!';position:absolute;right:-23px;font:10px Arial;color:#f2d18c;border:1px solid #a18c53;border-radius:50%;width:14px;height:14px;display:grid;place-items:center}.pair-row button.selected::after{content:'←';border:0;font-size:19px}.scan-line{position:absolute;left:-20px;right:-20px;bottom:0;height:1px;background:#cfe7aa55;box-shadow:0 0 20px #dfffc855}.round-warning .scan-line{background:#f79f80;box-shadow:0 0 18px #f79f80}.round-warning{--warn:#f79f80}dialog{background:#132a34;color:var(--text);border:1px solid #48616a;border-radius:16px;width:min(540px,calc(100% - 32px));padding:34px;box-shadow:0 30px 100px #0009;max-height:90dvh;overflow:auto}dialog::backdrop{background:#041119cf;backdrop-filter:blur(7px)}dialog h2{font:32px Georgia,serif;margin:16px 0}dialog p,dialog li{color:#b7c9cf;font-size:13px;line-height:1.8}dialog ol{padding-left:20px}dialog li{margin:10px 0}dialog strong{color:#edf3ed}dialog .primary{width:100%;margin-top:20px}.close{position:absolute;right:15px;top:12px;background:transparent;border:0;color:#b7c9cf;font-size:27px;padding:5px 10px}.fine-print{font-size:10px!important;color:#8da6af!important}.secondary{width:100%;margin-top:12px;padding:13px;background:transparent;border:1px solid #46606b;border-radius:6px;color:#c5d9db;font-size:12px}.result-score{font-size:64px;color:var(--mint);font-variant-numeric:tabular-nums;margin:24px 0}.result-grid{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0}.result-grid strong{display:block;font-size:24px;font-weight:400}.result-grid small{font-size:8px;color:#96abb1;letter-spacing:1px;display:block;margin-top:8px}@media(min-width:1500px){.app{padding:0 65px}.intro{padding-top:48px}.molecule-view{height:400px}}@media(max-width:900px){.app{padding:0 24px}.workspace{grid-template-columns:minmax(0,1fr) 270px;gap:16px}.control-card{padding:20px}.stats{gap:30px}.start-overlay{padding:28px}.start-overlay h2{font-size:29px}.specimen-label{display:none}.intro p{font-size:12px}}@media(max-width:680px){.app{padding:0 16px}.topbar{height:65px}.brand{font-size:13px;gap:6px;letter-spacing:2px}.brand-lab{display:none}.brand-icon{font-size:36px}.top-actions{gap:18px}.icon-button{font-size:10px}.intro{padding:25px 0 22px}.eyebrow{font-size:8px}h1{font-size:44px;margin-top:10px}.intro p{max-width:300px;font-size:11px}.workspace{grid-template-columns:1fr;gap:16px}.lab-top{padding:15px 18px;font-size:8px}.stats{padding:16px 20px;gap:36px}.stats strong{font-size:25px}.stats small{font-size:8px}.stage-line{padding:15px 20px 0;font-size:8px}.progress-track{margin:0 20px}.molecule-view{height:315px}.start-overlay{padding:22px 27px}.start-overlay h2{font-size:31px}.board-bottom{padding:8px 18px;min-height:53px;font-size:10px}.board-bottom #feedback{max-width:78%;line-height:1.6}.control-card{padding:18px}.control-card h2{font-size:18px;margin:8px 0}.control-card>p{font-size:11px}.base-grid{grid-template-columns:repeat(4,1fr);gap:8px;margin-top:15px}.base{padding:12px 9px;min-height:87px}.base-letter{font-size:30px}.base>span+span{font-size:8px}.base kbd{font-size:7px;right:6px;top:8px}.pairing-key{margin:13px 0 0;padding:12px 0;border-bottom:0}.control-card .control-hint{display:none}.journey{display:none}.side-panel{gap:0}footer{font-size:7px;padding:20px 0;letter-spacing:1px}footer>span+span{font-size:8px}.nucleotide{height:37px;width:65px}.pairs{gap:7px}.round{top:10px}.target-caption{font-size:8px;margin-bottom:8px}dialog{padding:27px}dialog h2{font-size:28px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:680px){.in-session .topbar{height:52px}.in-session .intro{padding:12px 0}.in-session .intro .eyebrow,.in-session .intro p{display:none}.in-session h1{font-size:30px;margin:0}.in-session .molecule-view{height:280px}.in-session .control-card>.eyebrow,.in-session .control-card h2{display:none}.in-session .control-card{padding:12px 15px}.in-session .base-grid{margin-top:10px}.in-session .base{min-height:70px;padding:9px}.in-session .pairing-key{margin-top:8px;padding:8px 0}.in-session .workspace{gap:10px}.in-session footer{padding:12px 0}.in-session .stats{padding:12px 20px}}