/* Native molecular sequence; isolated from the older dark science instruments. */
.dna-animation{min-width:0;margin:0;background:var(--paper);color:#18222b;padding:24px 0 20px;overflow:hidden}
.dna-animation [hidden]{display:none!important}
.dna-animation h3{font:inherit;font-size:1.45rem;font-weight:400;line-height:1.25;letter-spacing:-.025em;min-height:2.5em;margin:0 0 10px}
.dna-animation-legend{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.875rem;line-height:1.5;color:#52606a}
.dna-animation-legend span{display:inline-flex;align-items:center;gap:8px}
.dna-animation-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#f6a62a;flex:none}
.dna-animation-legend span+span i{background:#f4482d}
/* The frame is wider than the render's own 1080:970 proportions. Vertical framing
   is fixed in the projection, so the stage height alone sets how large the molecule
   draws -- 3:2 keeps it at the height it had in the narrower frame, and the extra
   width becomes extra field of view rather than extra magnification. */
.dna-animation-stage{position:relative;aspect-ratio:3/2;overflow:hidden}
.dna-animation-stage canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.dna-animation-stage img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Caption on the left, the pause control on the same line at the right edge, its label
   raised 8px onto the caption's first baseline (the 44px tap target centres it lower);
   the note runs full width underneath. */
.dna-animation figcaption{padding-top:16px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:start}
.dna-animation-caption{grid-column:1;grid-row:1;font-size:1rem;line-height:1.5;min-height:3em;color:#394c5b}
.dna-animation-note{grid-column:1/-1;grid-row:2;font-size:.8125rem;line-height:1.5;margin-top:12px;color:#52606a}
.dna-animation-note a{color:#006b95;text-decoration:underline;text-underline-offset:3px}
.dna-animation-controls{grid-column:2;grid-row:1;justify-self:end;margin-top:-8px;min-height:44px}
.dna-animation button{font:inherit;font-size:.875rem;line-height:1.4;min-height:44px;padding:8px 0;border:0;border-bottom:1px solid #70848f;background:transparent;color:#394c5b;cursor:pointer}
.dna-animation button:hover{color:#18222b;border-color:#18222b}
.dna-animation button:focus-visible{outline:2px solid #006b95;outline-offset:4px}
.dna-animation button:disabled{cursor:default;border-color:transparent}
@media(max-width:700px){.dna-animation{padding:20px 0 16px}.dna-animation-stage{aspect-ratio:1080/970}.dna-animation h3{font-size:1.35rem}}
.dna-animation .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* September 10 refinement: gently focused, feathered UV-C exposure wash.
   One continuous field, synchronized to the molecular clock; no independent loop. */
.dna-animation-stage::after{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(ellipse 80% 95% at 38% 36%,
   rgba(50,210,239,.28) 0%,rgba(78,218,241,.23) 28%,
   rgba(127,230,244,.12) 55%,rgba(170,237,246,.035) 80%,
   rgba(170,237,246,0) 100%);
 opacity:0;
}
.dna-animation[data-ready=true] .dna-animation-stage::after{opacity:var(--dna-exposure,0)}

/* Wide 16:9 frame (opt-in with data-dna-frame="wide"; US science page).
   Same scale and vertical framing as the 1080 × 970 crop: the extra width shows more of the
   measured 1COC/1TTD structure, never added content. The stage spans the panel, flush left. */
.dna-animation[data-dna-frame=wide] .dna-animation-stage{aspect-ratio:16/9}
#mechanism .dna-animation[data-dna-frame=wide] .dna-animation-stage{width:100%;max-width:none}

/* Exposure wash rescaled so it covers the same part of the molecule as in the narrower frame
   (centre 38% -> 42.5%, width 80% -> 50% of the frame). */
.dna-animation[data-dna-frame=wide] .dna-animation-stage::after{
 background:radial-gradient(ellipse 50% 95% at 42.5% 36%,
   rgba(50,210,239,.28) 0%,rgba(78,218,241,.23) 28%,
   rgba(127,230,244,.12) 55%,rgba(170,237,246,.035) 80%,
   rgba(170,237,246,0) 100%)}

/* In-frame legend stays above the molecular canvas and exposure wash. */
.dna-animation-stage .dna-animation-legend{position:absolute;inset:12px 0 auto;z-index:1;gap:8px;pointer-events:none}
.dna-animation-stage .dna-animation-legend span{padding:5px 10px;border:1px solid #d0dae0;border-radius:999px;background:rgba(255,255,255,.94);white-space:nowrap}
/* Phones and tablets: the two structure links get their own line under the note (Vivian, 2026-10-05). */
@media(max-width:1024px){.dna-animation-sources{display:block;margin-top:4px}}