/* A single dark chapter, from illustrative sequence editing to measured results. */
.design-passage {
  --paper:#292927; --ink:#f2efe5; --muted:#b7b7ac; --rule:#ffffff25;
  --design-alphagenome:#e39a7e; --design-ntv3-650m-post:#a1bddb; --design-ntv3-650m-pre:#b9c99f;
  --design-uniform:#b5b6aa; --design-experimental-reference:#e2dfd4;
  --design-enformer:#8cc8b9; --design-ntv3-100m-post:#bda2d4; --design-evo2-20b:#d2b97e;
  --design-generator-v2-3b:#d2aaa7; --design-onehot-resnet:#9abec7; --design-kmer-3-6:#c4b09b;
  --design-marker-fill:#292927; --design-grid:#ffffff23;
  position:relative; background:var(--paper); color:var(--ink); scroll-margin-top:var(--section-nav-height,76px);
}
.passage-scroll { height:calc(min(840px,100svh - var(--section-nav-height,76px)) + var(--passage-travel,782svh)); }
.passage-stage { position:sticky; top:var(--section-nav-height,76px); height:min(840px,calc(100svh - var(--section-nav-height,76px))); isolation:isolate; }
.passage-inner { position:relative; height:100%; display:flex; flex-direction:column; padding-block:48px 16px; }
.passage-heading { flex:none; width:100%; max-width:1100px; margin:0 auto 12px; text-align:center; }
.passage-heading h2 { position:relative; font:clamp(30px,2.8vw,36px)/1.15 "Newsreader Display",var(--serif); color:var(--ink); letter-spacing:-.25px; margin:0 auto; text-wrap:balance; }
.passage-heading h2:focus { outline:none; }
.passage-controls { flex:none; display:flex; align-items:center; justify-content:space-between; width:100%; max-width:900px; margin:8px auto 0; }
.passage-guide { display:flex; gap:8px; align-items:center; margin-left:-8px; }
.passage-shortcut { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 6px; color:var(--ink); font:500 18px/1.4 var(--sans); text-decoration:underline; text-decoration-color:#bdbeb0; text-decoration-thickness:1px; text-underline-offset:6px; transition:color .15s,text-decoration-color .15s; }
.passage-shortcut:hover { color:#fff; text-decoration-color:#fff; }
.passage-cue { display:grid; align-items:center; min-height:66px; max-width:660px; margin:22px auto 0; color:#e2e0d6; font:24px/1.375 var(--sans); text-wrap:balance; }
.passage-guide > button { display:grid; place-items:center; width:44px; min-height:44px; padding:0; border:0; border-radius:0; background:none; color:var(--ink); }
.passage-previous svg { transform:scaleX(-1); }
.passage-guide > button:hover { color:var(--ink); background:none; }
.passage-guide > button:disabled { opacity:.32; cursor:default; }
.design-passage :is(a,button):focus-visible { outline:2px solid #d6b297; outline-offset:5px; }
.passage-exhibit { display:grid; overflow:clip; flex:1; min-height:0; width:100%; max-width:1100px; margin:0 auto; color:var(--ink); }
.passage-exhibit.is-handoff { mask-image:linear-gradient(to bottom,transparent,#000 10px,#000 calc(100% - 10px),transparent); }
.passage-diagram,.passage-results { grid-area:1/1; min-width:0; min-height:0; margin:0; }
.passage-results { opacity:0; visibility:hidden; display:flex; flex-direction:column; scroll-margin-top:calc(var(--section-nav-height,76px) + 24px); padding-bottom:12px; }
.passage-results:focus { outline:none; }
.passage-results #design-content { flex:1; min-height:0; }
.passage-results :is(.design-explorer,.design-curve) { height:100%; min-height:0; }
.passage-results .design-curve { max-width:none; display:flex; flex-direction:column; }
.passage-results .design-curve > svg { flex:1; width:100%; height:0; min-height:0; }
.passage-results .design-axis-label { fill:var(--muted); }
.passage-results .design-line-legend { flex:none; margin-top:16px; gap:4px 25px; }
.passage-results .design-budget-points:is(:hover,:focus-visible) .design-budget-hit { fill:#ffffff0d; stroke:#d6b297; }
.passage-results .design-point-tooltip > rect { fill:#30312d; stroke:#777b6e; }
/* Print keeps the completed illustration and the benchmark plot. */
@media print {
  .passage-scroll { height:auto; }
  .passage-stage { position:relative; top:auto; height:auto; }
  .passage-controls { display:none; }
  .passage-exhibit { display:flex; flex-direction:column; overflow:visible; mask-image:none!important; }
  .passage-diagram,.passage-results { opacity:1!important; visibility:visible!important; transform:none!important; }
  .passage-results .design-curve > svg { flex:none; height:auto; }
  .passage-results { margin-top:40px; padding-bottom:40px; border-top:0; }
}
@media(max-width:700px) {
  .passage-inner { padding-block:32px 10px; }
  .passage-heading { margin-bottom:8px; }
  .passage-heading h2 { font-size:27px; max-width:440px; text-wrap:balance; }
  .passage-cue { min-height:78px; max-width:480px; margin-top:20px; font-size:20px; line-height:1.3; }
  .passage-results .design-axis-label { font-size:13px; }
  .passage-results .design-point-tooltip text { font-size:13px; }
  .passage-results .design-point-tooltip .design-tooltip-heading { font-size:14px; }
  .passage-results .design-line-legend { gap:0 14px; margin-top:12px; }
  .passage-results .design-line-legend button { font-size:11px; min-height:32px; gap:5px; }
  .passage-results .design-line-legend svg { width:25px; }
}
@media(max-height:720px) and (min-width:701px) {
  .passage-inner { padding-block:36px 10px; }
}
@media(max-width:360px) {
  .passage-cue { font-size:19px; min-height:75px; }
}