/* Interactive models deliberately use HTML/SVG-style geometry, not generated biology diagrams. */
dialog:has(.dna-lab) { width:min(1120px,calc(100% - 24px)); }
.dna-lab { --dna-navy:#193e65; --dna-teal:#168b83; text-align:start; }
.dna-lab p { line-height:1.6; }
.dna-overview { display:flex; align-items:center; gap:18px; padding:14px 18px; background:linear-gradient(120deg,#e7f8f4,#f2f4ff); border:1px solid #d8ebe5; border-radius:18px; }
.dna-overview img { width:94px; height:94px; object-fit:cover; border-radius:18px; flex-shrink:0; }
.dna-overview p { margin:0; font-weight:600; color:#244a60; }
.dna-tabs { display:flex; gap:8px; margin:20px 0; }
.dna-tabs button { flex:1; border:1px solid #cfdedb; padding:14px 10px; border-radius:13px; background:#f2f6f6; color:#355967; font-size:.94rem; }
.dna-tabs button[aria-pressed=true] { background:#176b72; border-color:#176b72; color:white; }
.dna-lab [hidden] { display:none!important; }
.dna-lab button { cursor:pointer; }
.dna-lab button:focus-visible,.dna-lab select:focus-visible,.dna-lab textarea:focus-visible { outline:3px solid #e5a53d; outline-offset:3px; }
.dna-toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:10px; margin:16px 0; }
.dna-toolbar button { border:0; border-radius:11px; background:#176b72; color:#fff; padding:12px 17px; min-height:44px; font-size:.85rem; }
.dna-toolbar button.secondary { background:#edf4f3; color:#265764; border:1px solid #d4e2df; }
.dna-toolbar button[aria-pressed=true] { box-shadow:inset 0 0 0 2px #21877f; }
.dna-lab button:disabled { opacity:.45; cursor:default; }
.dna-lab label { display:grid; gap:6px; font-size:.85rem; font-weight:700; color:#355967; }
.dna-lab select { font:inherit; border:1px solid #cadbd6; background:#fff; color:#173f56; padding:11px 12px; border-radius:10px; min-height:44px; max-width:100%; }
.dna-parent,.dna-daughters article { padding:20px 14px; border:1px solid #dce6e7; border-radius:18px; background:#f8fbfc; overflow:auto; }
.dna-parent { max-width:660px; margin:20px auto; }
.dna-daughters { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0; }
.dna-daughters h3 { margin:0 0 16px; color:#245367; font-size:1rem; }
.dna-strand { display:flex; align-items:center; gap:5px; justify-content:center; width:max-content; min-width:100%; padding:10px 0; border-block:3px solid #738297; }
.dna-strand b { min-width:24px; color:#536579; font-size:.8rem; }
.dna-strand.dna-old { border-color:#193e65; }
.dna-strand.dna-new { border-color:#168b83; }
.dna-row-label { margin:6px 0; color:#536579; font-size:.78rem; }
.dna-base,.dna-gap { display:inline-grid; place-items:center; flex:0 0 32px; width:32px; height:37px; border-radius:9px; background:var(--base); color:#173c52; font:bold 16px ui-monospace,monospace; border:1px solid #0001; }
.dna-gap { border:2px dashed #98afbd; background:#fff; }
.dna-gap[aria-pressed=true] { border:3px solid #e8a539; box-shadow:0 0 0 3px #ffe3a8; color:#8a5c0e; }
.dna-bonds { display:flex; justify-content:center; gap:5px; padding:2px 24px; }
.dna-bonds span { flex:0 0 32px; text-align:center; color:#c9d2dd; font-size:22px; }
.dna-choices { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:20px 0; }
.dna-choices button { border:2px solid #0001; background:var(--base); color:#173c52; border-radius:13px; font:bold 24px ui-monospace,monospace; width:65px; height:58px; }
.dna-status { min-height:1.5em; padding:10px 14px; border-radius:11px; background:#eef8f3; color:#276455; font-size:.9rem; }
.dna-status:empty { display:none; }
.dna-base-key { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; font-size:.8rem; color:#536579; }
.dna-base-key>span { display:flex; align-items:center; gap:7px; }
.dna-base-key .dna-base { width:26px; height:28px; font-size:14px; flex-basis:26px; }
.dna-note { font-size:.82rem; color:#5c6e7a; background:#f0f4f6; border-radius:11px; padding:12px 14px; }
.dna-codon-card { display:grid; grid-template-columns:1fr 1.2fr; gap:24px; background:linear-gradient(140deg,#edf8f6,#eef3fc); border:1px solid #d5e7e3; padding:24px; border-radius:20px; }
.dna-codon-strands { display:grid; gap:8px; }
.dna-codon-strands>span { font-size:.8rem; color:#536579; }
.dna-codon-strands .dna-base { width:46px; height:44px; flex-basis:46px; font-size:22px; }
.dna-codon-strands .dna-strand { min-width:0; width:100%; }
.dna-amino-result { text-align:center; }
.dna-amino-result h3 { margin:10px 0; color:#193e65; }
.dna-amino-result p { font-size:.83rem; margin:8px 0; }
.dna-amino-symbol { display:grid; place-items:center; margin:auto; border:4px solid #ffffff; box-shadow:0 6px 15px #193e6520; width:88px; height:88px; border-radius:50%; background:#a5d9ca; color:#134d52; font:bold 25px ui-monospace,monospace; }
.dna-amino-symbol.is-stop { background:#eab0a7; color:#8e3b32; }
.dna-synonyms { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.dna-synonyms button { font:bold 15px ui-monospace,monospace; padding:8px 11px; border:1px solid #c1d5d0; border-radius:8px; color:#29556b; background:#fff; }
.dna-synonyms button[aria-pressed=true] { background:#193e65; color:#fff; }
.dna-filter { margin:20px 0; max-width:340px; }
.dna-code-table { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.dna-code-group { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:6px; background:#edf3f5; border-radius:12px; }
.dna-code-group button { padding:9px 5px; min-height:52px; display:grid; gap:3px; color:#284d61; border:1px solid transparent; border-radius:8px; background:white; }
.dna-code-group strong { font:700 16px ui-monospace,monospace; }
.dna-code-group span { font-size:.75rem; }
.dna-code-group .selected { border-color:#21877f; background:#cdeee0; box-shadow:inset 0 0 0 1px #21877f; }
.dna-code-group .dna-stop-codon { color:#993e35; background:#fff0ec; }
.dna-sequence-label textarea { width:100%; box-sizing:border-box; resize:vertical; padding:16px; border:1px solid #cadbd6; border-radius:12px; color:#193e65; background:#f8fbfc; font:600 16px/1.7 ui-monospace,monospace; }
.dna-ribosome-track { display:flex; align-items:center; gap:8px; overflow-x:auto; padding:20px 4px; direction:ltr; }
.dna-triplet { display:grid; flex:0 0 65px; text-align:center; gap:5px; padding:12px 4px; background:#edf1f6; border:2px solid transparent; border-radius:12px; color:#536579; }
.dna-triplet strong { font:700 15px ui-monospace,monospace; }
.dna-triplet small { font-size:.7rem; }
.dna-triplet.dna-active { border-color:#e4a037; background:#fff0cf; box-shadow:0 0 0 3px #f3d89155; color:#805712; }
.dna-triplet.dna-read { background:#d5eee5; color:#1c6056; }
.dna-triplet.dna-unused { opacity:.5; }
.dna-chain { display:flex; flex-wrap:wrap; gap:11px 8px; padding:14px 0; }
.dna-aa { position:relative; display:grid; place-items:center; align-content:center; width:56px; height:64px; flex:0 0 56px; border:2px solid #fff; border-radius:50% 50% 45% 45%; background:var(--aa,#bce0d6); box-shadow:0 2px 4px #193e6520; color:#224d57; }
.dna-aa small { font-size:9px; color:#315767; }
.dna-aa strong { font:700 15px ui-monospace,monospace; }
.dna-aa>span { font:700 10px ui-monospace,monospace; }
.dna-aa::after { content:''; position:absolute; width:10px; height:3px; background:#b9c9ce; top:31px; right:-10px; }
.dna-aa:last-child::after { display:none; }
.dna-example { padding:18px; border-radius:16px; background:#f5f8fb; border:1px solid #dce6ed; }
.dna-example h4 { margin:0 0 8px; font-size:1rem; color:#193e65; }
.dna-example code,.dna-chain-sequence { display:block; padding:12px; border-radius:10px; background:white; color:#315767; font:13px/1.7 ui-monospace,monospace; overflow-wrap:anywhere; }
.dna-example a { display:inline-block; margin-top:14px; font-size:.8rem; color:#147c75; }
.dna-lab hr { border:0; border-top:1px solid #dce6e7; margin:26px 0; }
.dna-sources { margin-top:24px; font-size:.8rem; }
.dna-sources a { color:#147c75; }
@media(max-width:700px) { .dna-daughters,.dna-codon-card { grid-template-columns:1fr; } .dna-code-table { grid-template-columns:repeat(2,minmax(0,1fr)); } .dna-codon-card { padding:18px; } .dna-tabs button { font-size:.8rem; padding:12px 8px; } .dna-overview { gap:12px; padding:12px; } .dna-overview img { width:64px; height:64px; } .dna-overview p { font-size:.85rem; } .dna-toolbar label { flex:1 1 110px; } .dna-toolbar button { flex:1 1 130px; } }
@media(prefers-reduced-motion:no-preference) { .dna-aa { animation:dna-appear .25s ease-out; } @keyframes dna-appear { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } }