/* The film's own parts, over the shared chrome (../shared/player.css): its act titles in the chapter list, the
   transcript and sequence card, the Find legend, compass and strand key, termination choice, predictions, recap and
   comparison, inspector, glossary, text description, details menu, presenter and embed modes. */
.chapter-title{font-size:11px;color:#abb9c2;letter-spacing:.02em}
.chapter-title span{color:var(--accent);margin-right:12px;font-size:10px}
.legend{position:absolute;z-index:4;right:37px;bottom:127px;display:flex;gap:17px;font-size:10px;color:#a5b1bb}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:5px;height:5px;border-radius:50%;background:var(--c);box-shadow:0 0 9px color-mix(in srgb,var(--c),transparent 70%)}
.scene-meta{position:absolute;right:37px;top:116px;z-index:4;display:flex;align-items:center;gap:7px;color:#8e9fac;font-size:9px;letter-spacing:.02em}
.scene-meta button{color:#a8b7bf;border-bottom:1px solid #98a9b130;margin-left:10px;font-size:9px;padding:0 0 3px}
.live-dot{width:4px;height:4px;background:#91baad;border-radius:50%}
.citations{padding-top:12px;border-top:1px solid var(--line)}
.model-stats{font-size:10px;color:#6e8a97}
@media(max-width:1100px){.chapter-title{display:none}.legend{right:25px;bottom:113px;gap:10px}.scene-meta{right:24px}.scene-meta #scene-type{display:none}}
@media(max-width:780px){.scene-meta{top:102px}.legend{left:27px;right:auto;bottom:107px}.scene-meta button{font-size:8px}}
.path-control{position:absolute;z-index:4;right:36px;bottom:100px;display:flex;gap:10px;align-items:center;font-size:10px;color:#9fb0bb}
.path-control select{border:1px solid #809ca531;border-radius:3px;background:#10202bbc;color:#c2d0d5;font-size:10px;padding:7px}
.legend{bottom:143px}
.progress-view{position:absolute;z-index:4;right:36px;bottom:185px;width:360px;padding:14px 16px;border:1px solid #a4c0d423;border-radius:5px;background:#071420d9;backdrop-filter:blur(15px)}
.progress-view[hidden]{display:none}
.progress-heading{display:flex;gap:12px;align-items:center;font-size:8px;letter-spacing:.12em;color:#829eaa}
.progress-heading strong{font-size:15px;color:#e0bf91;font-weight:400;letter-spacing:0;margin-left:auto}
.progress-heading #rho-distance{font-size:9px;color:#b69cd2;letter-spacing:0}
.progress-view svg{width:100%;height:34px;margin-top:4px}
.progress-view svg text{fill:#aec0c8;font-size:9px}
.progress-view p{margin:3px 0 0;font-size:9px;line-height:1.5;color:#8ea7b4}
.path-choice{position:absolute;z-index:20;top:50%;left:50%;transform:translate(-50%,-50%);width:min(820px,calc(100% - 60px));background:#081420ed;border:1px solid #92b4c52c;border-radius:12px;padding:35px;backdrop-filter:blur(25px);box-shadow:0 35px 100px #0008}
.path-choice[hidden]{display:none}
.path-choice h2{font-family:'Instrument Serif',Georgia,serif;font-size:49px;font-weight:400;letter-spacing:-.03em;margin:0 0 10px}
.path-choice>p:not(.eyebrow){color:#9cb0bc;font-size:12px;line-height:1.6;margin:0 0 26px}
.path-choice>div{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.path-choice>div button{background:#142431b0;border:1px solid #9db9cb28;text-align:left;padding:24px;border-radius:6px;transition:.2s}
.path-choice>div button:hover{border-color:#dec093b0;background:#263442}
.path-choice button span{font-size:8px;letter-spacing:.13em;color:#b6a083}
.path-choice button b{display:block;font-family:'Instrument Serif',Georgia,serif;font-size:31px;font-weight:400;line-height:1.1;margin:14px 0}
.path-choice button p{font-size:11px;color:#9fb2c0;line-height:1.6;margin:0 0 22px}
.path-choice button em{font-style:normal;color:#dfbb85;font-size:11px}
body.reading .scene-meta{visibility:hidden}
@media(max-width:1100px){.progress-view{width:280px;right:24px;bottom:170px}.legend{bottom:128px}.path-control{right:24px;bottom:93px}.chapter-title{display:none}}
@media(max-width:780px){.top-controls #read-notes{font-size:9px}.legend{display:none}.progress-view{left:25px;right:25px;bottom:91px;width:auto;padding:8px 10px;max-width:450px}.progress-view p{display:none}.progress-view svg{height:23px}.progress-heading strong{font-size:12px}.path-control{right:24px;top:142px;bottom:auto}.path-choice{padding:24px;width:calc(100% - 30px)}.path-choice>div{gap:9px}.path-choice>div button{padding:15px}.path-choice button b{font-size:26px}.path-choice h2{font-size:39px}.path-choice button p{font-size:10px}.scene-meta{display:none}}
#parts{font-size:11px;color:#aab7c0;background:transparent;border:0;padding:10px 4px}
#parts[aria-pressed=false]{opacity:.5}
@media(max-width:780px){#parts{display:none}}
.legend i{width:7px;height:7px}
.legend i.line{width:14px;height:3px;border-radius:2px}
.legend i.line.thin{height:2px}
.legend em{font-style:normal}
.legend .short{display:none}
@media(max-width:1100px){.legend .long{display:none}.legend .short{display:inline}}
#initiation-view svg{width:100%;height:40px;margin-top:4px}
#initiation-view .ticks text{fill:#8ea7b4;font-size:9px}
#initiation-view .band-label{fill:#e0bf91;font-size:9px}
#abortive-tally{margin:2px 0 0;font-size:9px;color:#8ea7b4}
#abortive-tally s{color:#6f8794}
#abortive-tally b{color:#ffcf9a;font-weight:500}
@media(max-width:1100px){.scene-meta #scene-type{display:inline;font-size:11px}}
.compass{position:absolute;z-index:4;top:62px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8fa6b1;pointer-events:none}
.compass #compass-arrow{display:inline-block;letter-spacing:-.18em;color:#a9c3cd;transition:transform .3s}
.compass.flipped{color:#e8c48f}
.compass button{pointer-events:auto;font-size:10px;letter-spacing:.04em;text-transform:none;color:#e8c48f;border:1px solid #e8c48f55;border-radius:3px;padding:3px 7px;background:#0a1522cc}
@media(max-width:780px){.compass{top:136px}}
.legend span{transition:opacity .4s}
.legend span.dim{opacity:.35}
.low-power .progress-view{backdrop-filter:none}
.low-power .progress-view{background:#0a1522f0}
.progress-heading{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#a6bcc6}
.progress-heading #rho-distance{font-size:12px}
.progress-view p,#abortive-tally{font-size:12px;color:#a9bec9}
.progress-view svg text{font-size:16px;fill:#c3d2d8}
.progress-view svg text.end{font-size:17px}
#initiation-view .ticks text,#initiation-view .band-label{font-size:14px}
.legend{font-size:12px;color:#b9c6ce}
.scene-meta,.scene-meta button{font-size:11px}
.compass{font-size:11px}
#parts[aria-pressed=false]{opacity:1;color:#8fa2ad}
.act{display:flex;flex-direction:column}
.act-head{display:flex;gap:8px;align-items:baseline;min-height:26px;padding:10px 0 2px;color:#e6c291;font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-align:left}
.act-head span{font-family:'Instrument Serif',Georgia,serif;font-size:14px;letter-spacing:0;text-transform:none;color:#c9a979}
.act:first-child .act-head{padding-top:0}
@media(max-height:820px) and (min-width:601px){.act:not(.current) .ch{display:none}.act-head{padding-top:6px}}
.chem-badge{margin-left:8px;padding:2px 7px;border-radius:3px;background:#e5bf8d26;color:#f2c997;font-size:11px}
/* Hold at chapter ends and presenter navigation. */
.continue{pointer-events:auto;display:block;margin-top:14px;padding:10px 16px;border-radius:4px;background:#e5bf8d;color:#1b211f;font-size:13px;font-weight:600}
.continue:hover{background:#f3cfa1}
.next-chip{position:absolute;z-index:5;right:var(--gutter);bottom:112px;padding:10px 14px;border:1px solid #e5bf8d66;border-radius:999px;background:#0a1522e6;color:#f2c997;font-size:14px}
/* Act title cards, the reduced-motion dip and presenter blackout. */
.act-card{position:absolute;z-index:6;top:84px;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;text-shadow:0 2px 20px #03091499}
.act-card[hidden]{display:none}
.act-card span{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#e6c291}
.act-card h2{margin:4px 0 8px;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:44px;line-height:1}
.act-card i{display:block;width:120px;height:1px;margin:0 auto 8px;background:#e6c29199}
.act-card small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#b9c8cf}
#dip{position:absolute;inset:0;z-index:2;background:#070e17;opacity:0;pointer-events:none}
.blackout{position:fixed;inset:0;z-index:60;background:#000;cursor:none}
.blackout[hidden]{display:none}
/* The ending choice is a modal dialog. */
dialog.path-choice{position:fixed;inset:0;margin:auto;transform:none;height:fit-content;max-width:none;width:min(820px,calc(100% - 40px));padding:35px}
dialog.path-choice:not([open]){display:none}
.path-choice button span{font-size:11px}
.path-choice button p{font-size:13px}
.path-choice button em{font-size:13px}
.path-choice>p:not(.eyebrow){font-size:14px}
.toast .link-field{display:block;width:100%;margin-top:8px;padding:6px 8px;border-radius:4px;border:1px solid var(--edge);background:#050b12;color:#bfe7ef;font-size:12px}
/* Find a molecule: the legend is a toolbar; RNAP expands into its subunits. */
.legend{align-items:center;gap:4px}
.legend-title{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8fa2ad;margin-right:6px}
.legend button{display:flex;align-items:center;gap:6px;padding:6px 7px;border-radius:4px;color:inherit;transition:opacity .4s}
.legend button:hover,.legend button:focus-visible{background:#ffffff14}
.legend .dim,.legend button.dim{opacity:.4}
.rnap-group{position:relative;display:flex}
.subunits{position:absolute;bottom:100%;left:0;display:none;gap:2px;padding:4px;border:1px solid var(--edge);border-radius:6px;background:var(--panel)}
.rnap-group:hover .subunits,.rnap-group:focus-within .subunits{display:flex}
.top-controls .key-button{display:none}
/* Hover names, and the pinned inspector card. */
.hover-tip{position:fixed;left:0;top:0;z-index:8;opacity:1;pointer-events:none;max-width:300px;white-space:normal}
.hover-tip[hidden]{display:none}
.hover-tip b{display:block;font-weight:500}
.inspector{position:absolute;z-index:8;right:var(--gutter);top:170px;width:300px;max-height:calc(100vh - 360px);overflow:auto;padding:18px 18px 16px;border:1px solid var(--edge);border-left:3px solid var(--c,#74bcb2);border-radius:6px;background:var(--panel);box-shadow:0 20px 60px #0009}
.inspector[hidden]{display:none}
.inspector h2{margin:2px 0 4px;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:28px;line-height:1.05}
.inspector p{margin:4px 0;font-size:13px;line-height:1.55;color:#c3cfd7}
.inspector .gene{font-size:12px;color:#8ea4ae;font-style:italic}
.inspector .detail{color:#f2c997}
.inspector .where{margin-top:12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8ea4ae}
.inspector .chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
.inspector .chips button{padding:6px 9px;border:1px solid #e5bf8d55;border-radius:999px;font-size:12px;color:#f2c997}
.inspector .read{font-size:13px;color:#d4b17e;border-bottom:1px solid #ad8d633c;padding:0 0 2px}
.inspector .close{top:6px;right:10px;font-size:24px}
/* Text description: a companion panel that follows playback. */
.description{position:absolute;right:0;top:0;bottom:0;z-index:31;width:min(440px,92vw);display:flex;flex-direction:column;background:#0a1623f7;border-left:1px solid var(--edge);box-shadow:-20px 0 80px #0008}
.description[hidden]{display:none}
.panel-bar{display:flex;justify-content:space-between;align-items:center;padding:18px 20px 10px}
.panel-bar h2{margin:0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:26px}
.panel-bar button{font-size:26px;color:#9fb2bd}
.description-options{display:flex;gap:16px;padding:0 20px 10px;font-size:12px;color:#b4c2cc}
.description-options input{accent-color:#dcb680}
#description-body{overflow:auto;padding:0 12px 30px 20px}
#description-body h3{margin:18px 0 6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#e6c291}
#description-body ol{list-style:none;margin:0;padding:0}
#description-body .line{display:grid;grid-template-columns:44px 1fr;gap:8px;width:100%;padding:7px 8px 7px 10px;border-left:3px solid transparent;border-radius:3px;text-align:left;font-size:14px;line-height:1.5;color:#c9d5dc}
#description-body .line:hover{background:#ffffff0c}
#description-body .line time{font-size:12px;color:#8ea4ae;font-variant-numeric:tabular-nums;padding-top:2px}
#description-body .line b{font-weight:600;color:#e7eef1}
#description-body .line[aria-current]{border-left-color:var(--accent);background:#e5bf8d14}
.tabs{display:flex;gap:6px;margin:20px 0 0}
.tabs button{padding:7px 12px;border:1px solid var(--edge);border-radius:999px;font-size:12px;color:#c0ccd3}
.tabs button[aria-selected=true]{border-color:#e5bf8d99;color:#f2c997;background:#e5bf8d14}
body.describing .progress-view,body.describing .legend,body.describing .path-control,body.describing .scene-meta,body.describing .inspector{right:calc(min(440px,92vw) + 20px)}
body.no-scene>*:not(#description):not(script){display:none!important}
body.no-scene .description{position:fixed;inset:0;width:auto;margin:auto;max-width:760px}
/* Presenter mode: less chrome, larger type, and the transport fades when the pointer rests. */
body.presenting .brand,body.presenting .chapters,body.presenting .scene-meta,body.presenting .legend,body.presenting .section-notes,body.presenting .chapter-title,body.presenting .orbit-hint,body.presenting .path-control{display:none}
body.presenting .narration h1{font-size:clamp(48px,5vw,84px)}
body.presenting .narration>p:not(.eyebrow){font-size:18px;max-width:760px}
body.presenting .annotation{font-size:18px;max-width:340px}
body.presenting .annotation small{font-size:13px}
body.presenting .leader-line{stroke-width:1.6}
body.presenting .tag{font-size:15px}
body.presenting .transport{transition:opacity .4s}
body.presenting.idle .transport:not(:focus-within){opacity:0}
body.presenting.idle,body.presenting.idle canvas{cursor:none}
/* Embedded clip (slides): the scene, a title and a minimal transport on hover. */
body.embed header,body.embed .chapters,body.embed .legend,body.embed .scene-meta,body.embed .path-control,body.embed .progress-view,body.embed .orbit-hint,body.embed .compass,body.embed .narration>p,body.embed .section-notes,body.embed .next-chip,body.embed .act-card{display:none}
body.embed .narration{left:20px;bottom:70px}
body.embed .narration h1{font-size:clamp(22px,3.4vw,40px)}
body.embed .transport{left:14px;right:14px;bottom:10px;opacity:0;transition:opacity .3s}
body.embed:hover .transport,body.embed .transport:focus-within{opacity:1}
body.embed .transport>:not(.play):not(.scrubber):not(.clock){display:none}
@media(pointer:coarse){.legend button,.inspector .chips button,.tabs button,#description-body .line{min-height:44px}}
@media(max-width:1100px){.top-controls #describe{display:none}.inspector{top:150px;width:270px}}
@media(max-width:1100px) and (min-width:601px){.legend{display:flex;flex-wrap:wrap;max-width:420px;justify-content:flex-end}}
@media(max-width:780px){.chapters .act{flex-direction:row;gap:6px}.chapters .act-head{display:none}.compass{top:126px;left:auto;right:var(--gutter);transform:none}.path-control{display:none}.ending-row{display:flex}.legend{display:none;position:fixed;left:0;right:0;bottom:0;z-index:35;flex-wrap:wrap;gap:6px;padding:16px 16px calc(16px + env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--edge)}.legend.open{display:flex}.legend .long{display:none}.legend .short{display:inline}.legend .subunits{position:static;display:flex;border:0;padding:0;background:none}.top-controls .key-button{display:inline-block}}
.ending-row{display:none}
@media(max-width:600px){.top-controls #cutaway,.top-controls #read-notes{display:none}.progress-view{left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));padding:8px 12px}#map-caption,#abortive-tally{display:none}.transport #parts{display:none}.inspector{left:16px;right:16px;width:auto}.inspector{top:auto;bottom:calc(172px + env(safe-area-inset-bottom));max-height:45vh}.next-chip{bottom:calc(172px + env(safe-area-inset-bottom))}.act-card h2{font-size:32px}.act-card{top:150px}}
@media(max-height:560px){.progress-view .card-tabs,.progress-view #dna-view,#rna-view>:not(.progress-heading){display:none!important}.progress-view{bottom:auto;top:150px;padding:8px 12px}.act-card{top:60px}.act-card h2{font-size:30px}}
@media(prefers-contrast:more){.progress-view,.inspector,.description{backdrop-filter:none;background:#050b12}.legend,.scene-meta,.progress-view p{color:#e4ecf0}}
@media(forced-colors:active){#dip{display:none}.legend i,.live-dot{forced-color-adjust:none}}
.legend .subunits{display:none}
.legend .rnap-group:hover .subunits,.legend .rnap-group:focus-within .subunits{display:flex}
body.inspecting .progress-view,body.describing .progress-view,body.describing .legend,body.describing .path-control{visibility:hidden}
body.embed .chapter-pick,body.embed .show-text,body.embed .chapter-name,body.embed .key-button{display:none!important}
/* Predict, then watch: the question card takes the narration's place. */
body.predicting .narration,body.at-end .narration{visibility:hidden}
.checkpoint,.end-card{position:absolute;z-index:6;left:56px;bottom:127px;width:min(620px,calc(100% - 112px));padding:22px 24px;border:1px solid #e5bf8d55;border-radius:10px;background:#081420f2;box-shadow:0 24px 70px #000a}
.checkpoint h2,.end-card h2{margin:6px 0 16px;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(26px,2.6vw,36px);line-height:1.08}
.cp-options{display:flex;flex-direction:column;gap:8px}
.cp-options button{display:flex;gap:12px;align-items:center;padding:11px 14px;border:1px solid #a4c0d433;border-radius:6px;text-align:left;font-size:14px;color:#e1ebef;background:#ffffff08}
.cp-options button:hover:not(:disabled){border-color:#e5bf8daa;background:#ffffff12}
.cp-options button.right{border-color:#6fd3a0;background:#6fd3a022}
.cp-options button.wrong{border-color:#ff8080;background:#ff808018}
.cp-options button:disabled{cursor:default}
.cp-feedback{margin-top:14px}
.cp-result{margin:0 0 4px;font-weight:600;font-size:15px}
.cp-result.right{color:#8fe3b5}
.cp-result.wrong{color:#ffb0a0}
#cp-why{margin:0;font-size:14px;line-height:1.55;color:#c9d5dc}
.cp-actions{display:flex;gap:16px;align-items:center;margin-top:10px}
.cp-actions .continue{margin-top:0}
.ticks u{position:absolute;top:-2px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#f0b35a;box-shadow:0 0 0 2px #070e17}
.choice-question{margin:0 0 20px;padding:14px 16px;border:1px solid #e5bf8d55;border-radius:8px;background:#ffffff06}
.choice-question .q{margin:0 0 10px;font-size:15px;color:#e1ebef}
.choice-question .cp-options{flex-direction:row;flex-wrap:wrap}
.choice-question .why{margin:10px 0 0;font-size:13px;color:#c9d5dc}
/* End of a route: recap, compare, the other ending. */
.recap-title{margin:0 0 8px;font-size:14px;color:#e1ebef}
.recap-title small{color:#8ea4ae;margin-left:8px;font-size:12px}
#recap-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;counter-reset:step}
#recap-list li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #a4c0d433;border-radius:6px;background:#ffffff08;font-size:14px;cursor:grab;counter-increment:step}
#recap-list li::before{content:counter(step);min-width:18px;color:#8ea4ae;font-variant-numeric:tabular-nums}
#recap-list li.dragging{opacity:.5}
#recap-list li.right{border-color:#6fd3a0}
#recap-list li.wrong{border-color:#ff8080}
#recap-list .grip{color:#6f8794}
#recap-list .name{flex:1}
#recap-list .tools{display:flex;gap:4px}
#recap-list .tools button{min-width:30px;height:28px;border-radius:4px;color:#c0ccd3}
#recap-list .tools button:hover{background:#ffffff14}
#recap-list .jump{color:#f2c997!important;font-size:12px;padding:0 6px}
.recap-actions{display:flex;gap:14px;align-items:center;margin-top:10px}
.recap-actions p{margin:0;font-size:13px;color:#c9d5dc}
#score-line{margin:10px 0 4px;font-size:13px;color:#f2c997}
#revisit{display:flex;flex-wrap:wrap;gap:6px}
#revisit button{padding:5px 10px;border:1px solid #e5bf8d55;border-radius:999px;font-size:12px;color:#f2c997}
.end-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.end-actions button{padding:10px 14px;border:1px solid #e5bf8d77;border-radius:6px;font-size:13px;color:#f2c997}
.end-actions button:hover{background:#e5bf8d14}
dialog.compare{max-width:860px}
.compare table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.45}
.compare th,.compare td{padding:9px 10px;border-bottom:1px solid #ffffff14;text-align:left;vertical-align:top;color:#c9d5dc}
.compare thead th{color:#e6c291;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.compare tbody th{color:#e1ebef;font-weight:500;width:24%}
.compare .current{background:#e5bf8d12;color:#f4e7d4}
/* The ending toggle. */
.path-control span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8fa2ad}
.path-control button{padding:7px 12px;border:1px solid #809ca544;font-size:12px;color:#c2d0d5;background:#10202bbc}
.path-control button:first-of-type{border-radius:4px 0 0 4px}
.path-control button:last-of-type{border-radius:0 4px 4px 0;border-left:0}
.path-control button[aria-pressed=true]{background:#e5bf8d;color:#1b211f;border-color:#e5bf8d}
@media(max-width:1100px){.checkpoint,.end-card{left:32px;width:min(560px,calc(100% - 64px))}}
@media(max-width:600px){.checkpoint,.end-card{left:16px;right:16px;width:auto;bottom:calc(84px + env(safe-area-inset-bottom));max-height:60vh;overflow:auto;padding:16px}.cp-options button{font-size:13px}}
@media(max-height:560px){.checkpoint,.end-card{bottom:90px;max-height:calc(100vh - 110px);overflow:auto}}
body.predicting .chapters,body.at-end .chapters,body.predicting .chapter-pick,body.at-end .chapter-pick{visibility:hidden}
@media(min-height:561px){.end-card,.checkpoint{max-height:calc(100vh - 230px);overflow:auto}}
/* DNA at the polymerase */
.card-tabs{display:flex;gap:4px;margin:-4px 0 8px}
.card-tabs button{padding:4px 10px;border-radius:999px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8fa2ad}
.card-tabs button[aria-selected=true]{background:#ffffff14;color:#e6c291}
#dna-map{width:100%;height:auto;display:block;overflow:visible}
#dna-map text{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.m-base{font-size:13px;fill:#d6e2e7;text-anchor:middle}
.m-rna{fill:#ffb27a}
.m-rna.m-free{opacity:.45}
.m-rna.m-beyond{fill:#ff8a9a}
.m-rna.m-error{fill:#ff4d6d;font-weight:700}
.m-num{font-size:10px;fill:#8ea4ae;text-anchor:middle;font-family:'DM Sans',sans-serif!important}
.m-end{font-size:11px;fill:#8ea4ae;font-family:'DM Sans',sans-serif!important}
.m-box{fill:#f0a0b41f;stroke:#f0a0b4aa}
.m-label{font-size:11px;fill:#f0a0b4;font-family:'DM Sans',sans-serif!important}
.m-label.m-start{fill:#dcefff;text-anchor:middle}
.m-caret path{stroke:#c8ffd8;stroke-dasharray:3 3}
.m-caret circle{fill:#c8ffd8}
.m-caret text{font-size:10px;fill:#c8ffd8;font-family:'DM Sans',sans-serif!important}
.m-bracket path{fill:none;stroke:#b4c2cc}
.m-bracket text{font-size:10.5px;fill:#b4c2cc;font-family:'DM Sans',sans-serif!important}
.m-hybrid path{stroke:#ffb27a}
.m-hybrid text{fill:#ffb27a}
.m-scrunch{font-size:10.5px;fill:#e6c291;font-family:'DM Sans',sans-serif!important}
.m-channel{font-size:10px;fill:#ff8a9a;font-family:'DM Sans',sans-serif!important}
.map-note{margin:4px 0 0!important;font-size:11px!important;color:#8ea4ae!important}
@media(max-width:600px){.card-tabs{display:none}}
.m-summary{font-size:11px;fill:#c9d5dc;font-family:'DM Sans',sans-serif!important}
.m-bracket{fill:none;stroke:#b4c2cc}
.m-hybrid{stroke:#ffb27a}
.m-label{text-anchor:middle}
/* Glossary drawer over the chapter list, and term links in the narration. */
.term{pointer-events:auto;padding:0;font:inherit;color:inherit;border-bottom:1px dotted #d4b17e;cursor:help}
.term:hover{color:#f2c997}
.glossary{position:absolute;left:0;top:0;bottom:0;z-index:31;width:min(360px,92vw);display:flex;flex-direction:column;background:#0a1623f7;border-right:1px solid var(--edge);box-shadow:20px 0 80px #0008}
body.glossing .chapters,body.glossing .brand,body.glossing .chapter-pick,body.glossing .narration{visibility:hidden}
.glossary-search{padding:0 20px 10px}
.glossary-search input{width:100%;padding:9px 12px;border:1px solid #809ca555;border-radius:6px;background:#050b12;color:#e1ebef;font-size:14px}
#glossary-list{margin:0;overflow:auto;padding:0 16px 30px 20px}
.g-entry{padding:10px 8px;border-bottom:1px solid #ffffff0d;border-radius:4px}
.g-entry dt{font-weight:600;color:#e7eef1;font-size:14px}
.g-entry dd{margin:4px 0 0}
.g-entry p{margin:0;font-size:13px;line-height:1.5;color:#c3cfd7}
.g-actions{display:flex;gap:14px;margin-top:6px}
.g-actions button{font-size:12px;color:#d4b17e;padding:0;border-bottom:1px solid #ad8d633c}
.g-entry.flash{background:#e5bf8d1f;transition:background .3s}
@media(max-width:780px){.checkpoint,.end-card{bottom:calc(103px + var(--card,70px))}}
@media(max-width:600px){.checkpoint,.end-card,.inspector,.next-chip{bottom:calc(96px + var(--card,64px) + env(safe-area-inset-bottom))}}
.scene-meta,.compass{padding:4px 9px;border-radius:5px;background:#0a1522c7;box-shadow:0 0 0 1px #a4c0d41a}
.scene-meta{font-size:11px}
.scene-meta #scene-type{font-size:11px}
.compass{color:#b4c6cf}
.legend button.dim{opacity:.72;font-style:italic}
@media(pointer:coarse){.card-tabs button,#glossary-close,#description-close,#inspector-close,.path-control button,#recap-list .tools button,.g-actions button,#sources-open,#parts,#choice-compare,.end-actions button,.cp-options button,.continue,.next-chip,.key-button{min-height:44px;min-width:44px}.term{padding:10px 0;margin:-10px 0}}
@media(max-height:560px){.legend{display:none;position:fixed;left:0;right:0;bottom:0;z-index:35;flex-wrap:wrap;gap:6px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--edge)}.legend.open{display:flex}.legend .subunits{position:static;display:flex;border:0;padding:0;background:none}.top-controls .key-button{display:inline-block}dialog.path-choice{padding:18px 20px}.path-choice h2{font-size:30px}.path-choice>div button{padding:14px}.path-choice button b{font-size:22px;margin:6px 0}.path-choice button p{margin-bottom:8px}}
dialog.path-choice .close,dialog.compare .close{position:sticky;top:0;float:right;z-index:2;margin:-10px -10px 0 0;background:#081420e6;border-radius:50%}
.glossary{bottom:96px;border-bottom:1px solid var(--edge);border-bottom-right-radius:8px}
@media(max-width:600px){.glossary{bottom:0}}
body.at-end .legend,body.at-end .progress-view{visibility:hidden}
body.presenting .chapter-pick{display:none}
@media(max-width:600px){body.presenting .narration{bottom:calc(150px + var(--card,64px) + env(safe-area-inset-bottom))}body.presenting .narration>p:not(.eyebrow){font-size:15px}}
@media(max-width:780px){.scene-meta button{font-size:11px}}
@media(forced-colors:active){#description-body .line[aria-current]{outline:2px solid Highlight}}
@media(prefers-contrast:more){.scene-meta,.compass{background:#050b12}}
/* Strand key under the compass: which end of each strand is 5′ and which 3′, in screen order (mirrored from
   behind). No arrowheads: an arrow on the template could be misread as its reading direction. */
.compass{flex-direction:column;gap:4px}
.compass-row{display:flex;align-items:center;gap:9px}
.strand-key{display:grid;gap:2px;text-transform:none;letter-spacing:.02em;font-size:11px;line-height:1.15}
.strand-key .sk{display:grid;grid-template-columns:1.5em 78px 1.5em 5.2em;align-items:center;column-gap:5px;color:var(--c)}
.strand-key .sk[hidden]{display:none!important}
.strand-key .sk b{font-weight:600;text-align:center}
.strand-key .sk i{position:relative;height:2px;border-radius:1px;background:var(--c)}
.strand-key .sk em{font-style:normal;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#a3b6c0}
.strand-key .coding{--c:#e9e1cf}
.strand-key .template{--c:#72cdeb}
.strand-key .rna{--c:#ffa45e}
@media(max-width:600px){.strand-key .sk{grid-template-columns:1.5em 40px 1.5em 5em}}
@media(max-height:560px) and (min-width:601px){.strand-key{display:none}}
@media(forced-colors:active){.strand-key .sk i{forced-color-adjust:none;background:CanvasText}}
body.embed .read-pause,body.embed .narration-foot{display:none!important}
/* The strand key gives way where other chrome sits (act cards fade the compass; Explore's hint and the
   inspector use its space) and on phones and short screens, where the legend (read 3′→5′, made 5′→3′)
   and the sequence card carry the strand ends. Its type meets the file's floors and grows for projection. */
.compass{transition:opacity .2s}
.strand-key{font-size:12px}
.strand-key .sk em{font-size:11px}
body.presenting .strand-key{font-size:15px}
body.presenting .strand-key .sk em{font-size:13px}
body.presenting .strand-key .sk{grid-template-columns:1.5em 96px 1.5em 5.4em}
@media(prefers-contrast:more){.strand-key .sk em{color:#e4ecf0}}
body.exploring .strand-key,body.inspecting .strand-key{display:none}
@media(max-width:600px),(max-height:560px){.strand-key{display:none}}
/* The reading chip never shows over hidden narration, and on short screens it overlays instead of taking a row. */
body.glossing .read-pause,body.predicting .read-pause,body.at-end .read-pause{visibility:hidden!important}
body.presenting .tag{height:24px;line-height:24px;font-size:15px}
/* Details: extra detail beyond the notes, from the transport (under More on narrow screens). */
.details-wrap{position:relative;display:inline-flex}
.details-menu{position:absolute;right:-8px;bottom:calc(100% + 12px);z-index:31;width:280px;padding:12px 14px 4px;border:1px solid #a4c0d433;border-radius:8px;background:#081420f7;box-shadow:0 18px 50px #000a;text-align:left}
.details-menu .setting{margin-bottom:10px}
.details-title{margin:0 0 10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#a3b6c0}
#parts.on{color:#f2c997;opacity:1}
#parts span{font-size:.8em}
.details-setting{flex-direction:column;align-items:stretch}
.details-setting .details-list{margin-top:8px}
.details-setting .setting{margin-bottom:8px}
@media(min-width:781px){.details-setting{display:none}}
@media(max-width:780px){.details-wrap{display:none}}
/* The compass and strand key sit top right (where the timing chip was), clear of the subject, which the
   guided camera frames centre to right and often near the top. */
@media(min-width:781px){.compass{left:auto;right:36px;transform:none;top:76px;align-items:flex-end}}