/*! BIO-ORIGIN project=holiday-19-nucleic-acid; version=1.0.1-draft-web.1; official=https://bio2077.cn/ */
:root{font-family:"Microsoft YaHei","Segoe UI",sans-serif;color:#152d38;background:#edf2f1;font-synthesis:none;--mint:#6de0c2;--gold:#f3bf67;--stage:#102a35;--muted:#b4cbd4}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button{min-height:44px;border:1px solid #bdcfcd;border-radius:10px;background:#fff;color:#203d46;padding:10px 14px;cursor:pointer;font-weight:600;transition:background .15s,box-shadow .15s}button:hover{box-shadow:0 0 0 2px #68bda955}button:focus-visible,select:focus-visible,[role=button]:focus-visible{outline:3px solid #faaf40;outline-offset:3px}button:disabled{opacity:.5;cursor:default}button.active,button[aria-pressed=true]{background:#164d4b;color:#fff;border-color:#164d4b}header{padding:18px 28px 14px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:13px}.mark{font:bold 30px Georgia;border:2px solid #237369;color:#237369;border-radius:14px;padding:5px 12px;transform:rotate(-8deg)}h1{font-size:27px;margin:0;letter-spacing:2px}.brand p{margin:4px 0 0;color:#547078;font-size:15px}.utilities{display:flex;gap:8px}.utilities button{font-size:15px}nav{display:flex;gap:8px;margin:0 28px 16px}nav button{border:0;background:transparent;font-size:18px;padding:12px 22px}nav button.active{background:#fff;color:#163e3e;box-shadow:inset 0 -4px #269584}main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;padding:0 28px}.workspace{background:var(--stage);border-radius:22px;color:#fff;overflow:hidden;box-shadow:0 14px 30px #12332c14;display:flex;flex-direction:column;min-width:0}.stage-head{padding:20px 25px 0;display:flex;justify-content:space-between;gap:10px;align-items:center}.eyebrow{font-size:11px;letter-spacing:2.8px;color:var(--mint)}h2{font-size:24px;margin:7px 0 0}.stage-tag{font-size:13px;color:#c4dcd8;border:1px solid #426069;border-radius:20px;padding:6px 10px;white-space:nowrap}.stage{height:min(49vh,470px);min-height:320px;display:flex;justify-content:center;align-items:center;background:radial-gradient(ellipse at center,#24506166,transparent 65%)}.stage svg{width:100%;height:100%;overflow:visible}.stage svg text{font-family:"Microsoft YaHei",sans-serif;fill:#eaf6f6;text-anchor:middle;font-weight:600}.stage svg .hint{fill:#b6ccd4;font-weight:400}.stage svg .dark-text{fill:#102f39}.carbon{cursor:pointer}.carbon:hover circle{stroke:#fff;stroke-width:4}.carbon circle{fill:#163b49;stroke:#7ce8cf;stroke-width:2}.bond{stroke:#c2e4e2;stroke-width:5;fill:none;stroke-linecap:round}.sugar{fill:#398f88;stroke:#91f1d7;stroke-width:3}.phosphate{fill:#f6c477;stroke:#ffe1a8;stroke-width:2}.base{fill:#87b9ed;stroke:#cee5ff;stroke-width:2}.feedback{margin:0 20px 12px;padding:12px 16px;border-left:4px solid #78d8c5;border-radius:5px;background:#24454b;color:#efffff;font-size:19px;line-height:1.5;min-height:55px}.feedback.error{border-color:#ff9b9b;background:#542f39}.feedback.success{border-color:#8beaac;background:#164d40}.stage-foot{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 20px 16px;color:var(--muted);font-size:14px}.stage-foot button{font-size:14px;white-space:nowrap;border-color:#56727c;background:transparent;color:#e5f3f3;min-height:38px}aside{background:#fff;border:1px solid #d8e2df;border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:16px;min-width:0}aside h3{margin:0 0 10px;font-size:19px}aside p{font-size:15px;line-height:1.65;margin:5px 0;color:#567078}.step{font-size:12px;color:#53867d;letter-spacing:1px;font-weight:bold}.row{display:flex;gap:8px;flex-wrap:wrap}.row>*{flex:1}.sugar-choices button{font-size:16px}.sugar-choices small{display:block;font-size:13px;font-weight:400;margin-top:5px}.bases{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.bases button{padding:7px 0;font-size:23px}.bases button small{display:block;font-size:10px;font-weight:400}.selected{box-shadow:0 0 0 3px #56b89f!important}.primary{background:#1b786b;color:#fff;border-color:#1b786b;width:100%;font-size:18px}.pill{display:inline-block;padding:5px 10px;background:#edf7f3;color:#296b5a;border-radius:7px;font-size:14px}.divider{border-top:1px solid #e2e9e6;padding-top:14px}.choice-label{font-size:15px;display:block;margin-bottom:6px}select{padding:9px;border:1px solid #a9c2bb;border-radius:8px;background:#f8fbfa;color:#244a43;width:100%;min-height:44px}.compact{font-size:14px}.compact button{font-size:14px;padding:8px 9px}.sequence{font:600 24px "Segoe UI",sans-serif;letter-spacing:4px;color:#176452;padding:6px 0}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;height:100%;padding:15px 25px}.compare-card{border:1px solid #456c75;border-radius:16px;text-align:center;padding:12px}.compare-card h3{font-size:28px;color:#85e9cb;margin:0}.compare-card svg{height:180px}.compare-card p{margin:5px;font-size:20px}.compare-card .note{font-size:15px;color:#b3d1d3}.compare-card.focus{border:2px solid #e9c876}.answer-row button{font-size:19px}.legend{font-size:14px;line-height:1.9}.legend b{color:#176d5b}footer{display:flex;justify-content:space-between;padding:14px 30px;color:#607a7b;font-size:12px}dialog{border:0;border-radius:20px;max-width:750px;width:92%;padding:30px;color:#233f47;max-height:85vh;line-height:1.8}dialog::backdrop{background:#071d29bb}.close{float:right}dialog h2{margin-top:0}dialog a{color:#176e76}body.contrast{--stage:#030b12;--muted:#ebf4fa;background:#fff;color:#000}body.contrast aside{border:2px solid #174c45}body.contrast .stage{background:none}body.contrast .hint{fill:#fff}body.contrast .bond{stroke:#fff}body.contrast .carbon circle{fill:#062924;stroke:#fff}body.contrast .feedback{background:#143d35;color:#fff}body.contrast .feedback.error{background:#651d2e}body.contrast button{border-width:2px}body.contrast aside p{color:#233b43}body.contrast footer{color:#314b55}
@media(min-width:1500px){main{grid-template-columns:minmax(0,1fr) 365px}aside{padding:24px}aside h3{font-size:22px}.stage{height:55vh}header{padding-top:24px}nav{margin-top:8px}button{font-size:18px}.bases button small{font-size:12px}}
@media(max-width:1100px){header{padding:14px 18px}main{padding:0 18px;gap:12px;grid-template-columns:minmax(0,1fr) 285px}nav{margin:0 18px 12px}nav button{padding:10px;font-size:16px}aside{padding:15px;gap:12px}.stage-head{padding:16px 18px 0}.stage-tag{display:none}.feedback{font-size:17px}.stage-foot{font-size:12px}.stage{min-height:300px}h2{font-size:21px}.compare-card p{font-size:17px}.compare-grid{padding:12px}}
@media(max-width:760px){header{flex-wrap:wrap;gap:10px}.brand h1{font-size:24px}.brand p{font-size:13px}.utilities{width:100%}.utilities button{flex:1;font-size:14px;padding:8px}nav{gap:3px;margin:0 12px 10px}nav button{font-size:14px;padding:10px 6px;flex:1}main{padding:0 12px;display:flex;flex-direction:column}.stage{height:340px;min-height:0}.stage-head{padding:16px 15px 0}h2{font-size:20px}.eyebrow{font-size:9px}.feedback{font-size:17px;margin:0 12px 10px;padding:10px}.stage-foot{padding:0 12px 12px;align-items:flex-start}.stage-foot span{max-width:63%}aside{gap:14px}footer{padding:14px;gap:10px;flex-wrap:wrap}.compare-grid{padding:8px;gap:7px}.compare-card{padding:10px 4px}.compare-card svg{height:140px}.compare-card p{font-size:15px}.compare-card .note{font-size:12px}.compare-card h3{font-size:22px}.stage:has(.compare-grid){height:345px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.carbon .hit,.carbon:hover .hit{fill:transparent;stroke:none;pointer-events:all}.chain-summary{display:flex;justify-content:space-between;align-items:center;gap:6px}.chain-summary h3{font-size:18px;margin:0;white-space:nowrap}.chain-summary .pill{font-size:12px;white-space:nowrap;padding:4px 6px}body[data-activity=chain] aside{gap:10px}body[data-activity=chain] aside p{line-height:1.4;font-size:14px}body[data-activity=chain] aside h3{margin-bottom:6px}body[data-activity=chain] .divider{padding-top:10px}body[data-activity=chain] .sequence{font-size:22px;padding:3px 0}body[data-activity=chain] .choice-label{margin-bottom:4px;font-size:14px}
.stage-tag:has(button){display:block;border:0;padding:0}.stage-tag button{font-size:14px;background:#254b54;color:#e1fbf1;border:1px solid #67b9a6}.detail-graphic{background:#102a35;border-radius:16px;height:330px;margin:16px 0}.detail-graphic svg{width:100%;height:100%}.detail-graphic text{fill:#fff;text-anchor:middle;font-family:"Microsoft YaHei",sans-serif;font-weight:600}.detail-graphic .dark-text{fill:#102f39}
button,[role=button]{-webkit-tap-highlight-color:transparent}
.annotation-line{stroke:#a8c6cf;stroke-width:1.5;stroke-dasharray:3 3;fill:none;pointer-events:none}.end-leader{stroke-width:2;stroke:#bfd8dd}.stage svg .end-label{fill:#f3ffff}.stage svg .end-description{fill:#c6dedf;font-weight:400}
@media(min-width:761px) and (max-height:820px){header{padding-top:12px;padding-bottom:10px}nav{margin-bottom:10px}nav button{padding-top:9px;padding-bottom:9px}.stage{height:44vh}.stage-head{padding-top:13px}.feedback{margin-bottom:8px;padding:9px 12px}.stage-foot{padding-bottom:12px}footer{padding-top:8px;padding-bottom:8px}aside{padding-top:14px;padding-bottom:14px;gap:10px}aside p{line-height:1.45}aside h3{margin-bottom:7px}}