:root {
  --ink: #17211d;
  --muted: #68746f;
  --line: #c8d2cd;
  --paper: #fbfcf9;
  --surface: #f1f4ef;
  --accent: #126d65;
  --accent-soft: #dce9e4;
  --atac: #52736a;
  --scrna: #52736a;
  --mpra: #52736a;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --z-map: 1;
  --z-node: 3;
  --z-panel: 8;
  --z-lightbox: 12;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body.atlas-body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Instrument Sans", Arial, sans-serif; }
button, a { font: inherit; }

.skip-link { position: fixed; z-index: 20; top: .5rem; left: .5rem; padding: .55rem .75rem; color: white; background: var(--ink); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.atlas-shell { display: grid; grid-template-rows: 5.8rem minmax(0, 1fr) 4rem; width: min(100%, 108rem); height: 100dvh; margin: auto; padding: 30px clamp(.55rem, 1.25vw, 1.25rem) 0; }
.atlas-header { display: grid; grid-template-columns: 1fr auto 1fr; align-content: start; gap: 1rem; font-size: .8333rem; }
.atlas-breadcrumb { display: flex; min-width: 0; align-items: center; gap: .55rem; }
.atlas-breadcrumb a, .atlas-footer a { color: inherit; text-decoration-color: #a7b5af; text-underline-offset: .18em; }
.atlas-breadcrumb span:last-child { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.atlas-title { grid-column: 1 / -1; margin: 36px 0 0; padding-bottom: 5px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 1.25rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.22; text-transform: none; }
.atlas-workspace { position: relative; min-height: 0; padding: .6rem 0; }

.diagram-shell { position: relative; width: 100%; height: 100%; min-height: 35rem; overflow: hidden; border: 1px solid #ccd4cf; border-radius: 1rem; background: radial-gradient(circle at 82% 12%, rgba(176,205,194,.11), transparent 26%), linear-gradient(rgba(42,82,69,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(42,82,69,.018) 1px, transparent 1px), #fafbf8; background-size: auto, 2.5rem 2.5rem, 2.5rem 2.5rem, auto; }
.lane-band { position: absolute; z-index: 0; right: .6rem; left: .6rem; height: 24%; border-radius: 0; background: transparent; }
.lane-band::before { content: ""; position: absolute; top: .55rem; bottom: .55rem; left: 2.75rem; border-left: 1px solid currentColor; opacity: .48; }
.lane-band span { position: absolute; top: 50%; left: .76rem; color: currentColor; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; }
.lane-atac { top: 14%; color: var(--atac); }
.lane-scrna { top: 40%; color: var(--scrna); }
.lane-mpra { top: 66%; color: var(--mpra); }

.workflow-connections { position: absolute; z-index: var(--z-map); inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.connection { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.connection.flow { stroke: #668078; stroke-width: 1.9; marker-end: url(#arrow-flow); }
.connection.flow-trunk { stroke: #668078; stroke-width: 1.9; }
.connection.branch { stroke: #71837c; stroke-width: 1.1; stroke-opacity: .68; marker-end: url(#arrow-context); }
.connection.context { stroke: #74867e; stroke-width: 1.1; stroke-dasharray: 3 5; stroke-opacity: .58; marker-end: url(#arrow-context); }
.connection.transfer { stroke: #74867e; stroke-width: 1.1; stroke-dasharray: 2.75 5.25; stroke-opacity: .52; marker-end: url(#arrow-context); }
#arrow-flow path { fill: #668078; }
#arrow-context path { fill: none; stroke: #74867e; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: .72; }

.workflow-node { --node-accent: var(--accent); --node-active: #deeee7; position: absolute; z-index: var(--z-node); display: grid; grid-template-rows: auto auto; align-content: center; width: clamp(9rem, 10.8vw, 11.5rem); min-height: 5.25rem; padding: .82rem .88rem .9rem; border: 1px solid #cbd4cf; border-radius: .65rem; color: var(--ink); background: rgba(253,253,249,.98); box-shadow: 0 .24rem .7rem rgba(48,75,64,.035); text-align: left; transform: translate(-50%, -50%); cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.workflow-node:active { background: var(--node-active); box-shadow: 0 .3rem .8rem rgba(43,75,63,.1); }
.workflow-node:focus-visible, .detail-close:focus-visible, .detail-navigation button:focus-visible, .output-button:focus-visible, .lightbox-close:focus-visible { outline: 3px solid rgba(18,109,101,.26); outline-offset: 3px; }
.workflow-node[aria-expanded="true"] { border-color: var(--node-accent); background: var(--node-active); box-shadow: 0 0 0 4px color-mix(in srgb, var(--node-accent) 18%, transparent), 0 .85rem 1.9rem rgba(33,75,61,.16); }
.workflow-node[aria-expanded="true"]::after { content: ""; position: absolute; top: 50%; left: -.32rem; width: .2rem; height: 1.75rem; border-radius: .2rem; background: var(--node-accent); transform: translateY(-50%); }
.node-atac-reads, .node-atac-evidence, .node-atac-integrate,
.node-scrna-quant, .node-scrna-response, .node-scrna-programs,
.node-mpra-design, .node-mpra-count, .node-mpra-analysis { --node-accent: var(--accent); --node-active: #e2efeb; }
.node-shared { width: clamp(10.5rem, 13vw, 13rem); min-height: 3.9rem; border-color: #aebdb6; background: #f0f4ef; }
.workflow-node strong { font-size: clamp(.79rem, .9vw, .96rem); font-weight: 650; letter-spacing: -.025em; line-height: 1.08; text-wrap: balance; }
.node-steps { margin-top: .48rem; color: var(--muted); font-size: .56rem; font-weight: 520; line-height: 1.25; text-wrap: balance; }
.node-calibration { left: 16%; top: 7%; }
.node-atac-reads, .node-scrna-quant, .node-mpra-design { left: 20%; }
.node-atac-evidence, .node-scrna-response, .node-mpra-count { left: 52%; }
.node-atac-integrate, .node-scrna-programs, .node-mpra-analysis { left: 84%; }
.node-atac-reads, .node-atac-evidence, .node-atac-integrate { top: 26%; }
.node-scrna-quant, .node-scrna-response, .node-scrna-programs { top: 52%; }
.node-mpra-design, .node-mpra-count, .node-mpra-analysis { top: 78%; }

.workflow-detail[hidden], .image-lightbox[hidden] { display: none !important; }
.workflow-detail { --detail-accent: var(--accent); position: absolute; z-index: var(--z-panel); top: .9rem; right: .35rem; bottom: .9rem; width: min(29rem, calc(100% - .7rem)); overflow: hidden; border: 1px solid #bdc9c3; border-top: 3px solid var(--detail-accent); border-radius: .85rem; background: #fefefb; box-shadow: -.75rem 1.1rem 2.8rem rgba(38,67,56,.125); animation: panel-in 220ms var(--ease-out) both; }
.workflow-detail[data-lane="atac"] { --detail-accent: var(--atac); }
.workflow-detail[data-lane="scrna"] { --detail-accent: var(--scrna); }
.workflow-detail[data-lane="mpra"] { --detail-accent: var(--mpra); }
@keyframes panel-in { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: translateX(0); } }
.atlas-workspace.has-detail .diagram-shell { width: calc(100% - 29.5rem); }
.detail-close, .lightbox-close { position: absolute; z-index: 2; display: grid; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: #eaf0ec; place-items: center; cursor: pointer; font: 400 1.25rem/1 Arial, sans-serif; transition: color 160ms ease, background-color 160ms ease; }
.detail-close { top: .85rem; right: .85rem; }
.detail-navigation { position: absolute; z-index: 2; top: .85rem; right: 3.35rem; display: flex; gap: .3rem; }
.detail-navigation button { display: grid; width: 2rem; height: 2rem; padding: 0; border: 1px solid #d4ddd8; border-radius: 50%; color: #53615b; background: #f4f7f3; place-items: center; cursor: pointer; font-size: 1rem; line-height: 1; transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 160ms ease; }
.detail-navigation button:active { transform: translateY(1px); }
.detail-content { height: 100%; padding: 1.35rem 1.35rem 1.75rem; overflow: auto; scrollbar-width: thin; }
.detail-content h2 { max-width: 18ch; margin: 0 7rem 1.15rem 0; font-size: clamp(1.55rem, 2.1vw, 2rem); font-weight: 570; letter-spacing: -.045em; line-height: 1; text-wrap: balance; }
.section-label { display: block; margin-bottom: .45rem; color: var(--muted); font-size: .56rem; font-weight: 650; letter-spacing: .035em; }
.details-section { margin-top: 1.2rem; }
.metro-details { margin-top: 1.55rem; }
.method-block { margin-top: 1.05rem; }
.tool-list { display: flex; flex-wrap: wrap; gap: .32rem; margin: 0; padding: 0; list-style: none; }
.tool-list li { display: inline-flex; overflow: hidden; align-items: stretch; border: 1px solid #dce2df; border-radius: .26rem; color: #405049; background: #f4f6f4; font-size: .54rem; }
.tool-list li > span:last-child { display: inline-flex; align-items: center; padding: .22rem .38rem; }
.runtime-mark { display: inline-grid; min-width: 1.36rem; padding: .22rem .26rem; border-right: 1px solid #d4dcd8; color: #45534d; background: #e2e7e4; place-items: center; font-family: Consolas, "SFMono-Regular", monospace; font-size: .45rem; font-weight: 750; letter-spacing: -.02em; }
.tool-list li[data-runtime="python"] .runtime-mark { border-right-color: #d3dce1; color: #405f70; background: #e2e9ed; }
.tool-list li[data-runtime="shell"] .runtime-mark { border-right-color: #ddd7cf; color: #6a5949; background: #ebe6df; }
.io-section { margin-top: .15rem; }
.io-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .55rem; align-items: stretch; }
.io-flow > div { min-width: 0; padding: .58rem .62rem .64rem; border-left: 2px solid color-mix(in srgb, var(--detail-accent) 55%, #d3dcd7); background: #f5f7f4; }
.io-flow strong { display: block; margin-bottom: .22rem; color: #64716b; font-size: .48rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.io-flow div span { display: block; color: #44514b; font-size: .57rem; line-height: 1.32; }
.io-arrow { align-self: center; color: #86938d; font-size: .8rem; }
.outputs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.output-button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; }
.output-card { margin: 0; overflow: hidden; border-radius: .5rem; background: #eef2ee; }
.output-card img { display: block; width: 100%; height: 8rem; object-fit: contain; background: white; transition: transform 180ms var(--ease-out); }

.metro-map { --metro-label: 6.55rem; --metro-gap: 2.2rem; --metro-lane-step: .44rem; --metro-rail-start: calc(var(--metro-label) + .68rem); --metro-bundle-mid: 0rem; --metro-axis: calc(var(--metro-rail-start) + var(--metro-bundle-mid)); --metro-track: calc(var(--metro-label) + var(--metro-gap) + .52rem); position: relative; padding: .3rem 0 .2rem; }
.metro-lanes-2 { --metro-bundle-mid: .22rem; }
.metro-lanes-3 { --metro-bundle-mid: .44rem; }
.metro-lanes-4 { --metro-bundle-mid: .66rem; }
.metro-cap { position: relative; min-height: 1.35rem; }
.metro-port { position: absolute; z-index: 3; left: var(--metro-axis); width: .72rem; height: .72rem; padding: 0 !important; border: 2px solid var(--detail-accent); border-radius: 50%; background: #fefefb; transform: translateX(-50%); }
.metro-routes { position: relative; margin: .62rem 0; padding: .1rem 0; }
.metro-network { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.metro-network path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.metro-network .metro-line { stroke-width: 2.35; opacity: .88; }
.metro-network .metro-branch-link { stroke-width: 2.1; }
.metro-route[data-lane="0"] { --lane: 0; }
.metro-route[data-lane="1"] { --lane: 1; }
.metro-route[data-lane="2"] { --lane: 2; }
.metro-route[data-lane="3"] { --lane: 3; }
.metro-route { --route: var(--detail-accent); position: relative; z-index: 2; display: grid; grid-template-columns: var(--metro-label) 1fr; gap: var(--metro-gap); min-height: 5rem; padding: .62rem 0 .82rem; }
.metro-route[data-color="0"], .metro-network [data-color="0"] { --route: var(--detail-accent); stroke: var(--detail-accent); }
.metro-route[data-color="1"], .metro-network [data-color="1"] { --route: #3f6fa3; stroke: #3f6fa3; }
.metro-route[data-color="2"], .metro-network [data-color="2"] { --route: #a2604f; stroke: #a2604f; }
.metro-route[data-color="3"], .metro-network [data-color="3"] { --route: #857044; stroke: #857044; }
.metro-route[data-color="4"], .metro-network [data-color="4"] { --route: #786a83; stroke: #786a83; }
.metro-route[data-color="5"], .metro-network [data-color="5"] { --route: #4f7770; stroke: #4f7770; }
.metro-route[data-color="6"], .metro-network [data-color="6"] { --route: #805f52; stroke: #805f52; }
.metro-route[data-color="7"], .metro-network [data-color="7"] { --route: #68737d; stroke: #68737d; }
.metro-route h3 { margin: .02rem 0 0; color: var(--route); font-size: .62rem; font-weight: 680; line-height: 1.15; text-align: right; }
.metro-script { display: block; margin-top: .3rem; color: #7d8883; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .42rem; font-weight: 480; line-height: 1.25; opacity: .76; }
.metro-track { position: relative; display: grid; gap: .56rem; padding: .05rem 0 .12rem 1.05rem; }
.metro-track-axis { position: absolute; top: .34rem; bottom: .42rem; left: .52rem; width: 2px; border-radius: 2px; background: var(--route); }
.metro-station { position: relative; min-height: 1.18rem; color: #3f4d47; font-size: .59rem; line-height: 1.32; }
.metro-station::before { content: ""; position: absolute; z-index: 2; top: 0; left: -.86rem; width: .58rem; height: .58rem; border: 2px solid var(--route); border-radius: 50%; background: #fefefb; }
.metro-junction { position: absolute; z-index: 3; top: .72rem; left: calc(var(--metro-rail-start) + var(--lane) * var(--metro-lane-step) - .24rem); width: .48rem; height: .48rem; border: 2px solid var(--route); border-radius: 50%; background: #fefefb; }

.image-lightbox { position: fixed; z-index: var(--z-lightbox); inset: 0; display: grid; padding: 3rem; background: rgba(18,27,23,.88); place-items: center; }
.image-lightbox figure { max-width: min(90rem, 96vw); max-height: 90vh; margin: 0; }
.image-lightbox img { display: block; max-width: 100%; max-height: 82vh; border-radius: .4rem; background: white; }
.image-lightbox figcaption { margin-top: .55rem; color: #edf2ef; font-size: .72rem; text-align: center; }
.lightbox-close { position: fixed; top: 1rem; right: 1rem; color: white; background: rgba(255,255,255,.16); }
.atlas-footer { display: flex; align-items: center; justify-content: flex-start; padding-top: 20px; border-top: 1px solid var(--line); font-size: var(--size-small); }
.noscript-note { position: fixed; right: 1rem; bottom: 2.4rem; z-index: 5; margin: 0; padding: .35rem .5rem; color: var(--muted); background: rgba(255,255,255,.9); font-size: .58rem; }

@media (hover: hover) and (pointer: fine) {
  .workflow-node:hover { border-color: var(--node-accent); box-shadow: 0 .48rem 1.15rem rgba(43,75,63,.075); }
  .detail-close:hover { color: var(--ink); background: #dfe8e3; }
  .detail-navigation button:hover { color: var(--ink); border-color: #b9c7c0; background: #e8efeb; }
  .output-button:hover img { transform: scale(1.025); }
}

@media (max-width: 1180px) {
  .workflow-node { width: 8.2rem; min-height: 5rem; padding: .65rem .7rem .72rem; }
  .node-shared { width: 10.4rem; min-height: 3.8rem; }
  .node-steps { font-size: .52rem; }
  .atlas-workspace.has-detail .diagram-shell { width: calc(100% - 25rem); }
  .workflow-detail { width: 24.5rem; }
}

@media (min-width: 761px) and (max-width: 1050px) {
  .atlas-workspace.has-detail .diagram-shell { width: 100%; }
  .workflow-detail { position: fixed; inset: 0; width: 100%; border: 0; border-radius: 0; }
  .detail-content { width: min(100%, 48rem); margin: auto; padding-right: 2rem; padding-left: 2rem; }
}

@media (min-width: 1051px) {
  .atlas-workspace.has-detail .node-atac-reads,
  .atlas-workspace.has-detail .node-scrna-quant,
  .atlas-workspace.has-detail .node-mpra-design { left: 25%; }
}

@media (max-width: 760px) {
  .atlas-shell { grid-template-rows: 2.8rem minmax(0, 1fr) 1.8rem; padding: 0 .42rem; }
  .atlas-header { grid-template-columns: 1fr auto; }
  .atlas-header > span, .atlas-breadcrumb span:last-child { display: none; }
  .atlas-title { grid-column: auto; margin: 0; padding: 0; border: 0; color: inherit; font-size: .67rem; font-weight: 680; letter-spacing: .13em; line-height: normal; text-transform: uppercase; }
  .atlas-workspace { padding: .42rem 0; }
  .diagram-shell { min-height: 0; border-radius: .72rem; }
  .lane-band { top: auto; right: .35rem; left: .35rem; height: 26%; }
  .lane-band::before { top: 1.75rem; right: .45rem; bottom: auto; left: .45rem; border-top: 2px solid currentColor; border-left: 0; }
  .lane-band span { top: .48rem; left: .65rem; font-size: .58rem; transform: none; writing-mode: initial; }
  .lane-atac { top: 13%; }
  .lane-scrna { top: 41%; }
  .lane-mpra { top: 69%; }
  .workflow-node, .node-shared { width: min(24vw, 6rem); min-height: 4rem; padding: .48rem; }
  .node-shared { left: 50%; top: 6%; width: min(54vw, 11rem); min-height: 3rem; }
  .workflow-node:not(.node-shared) .node-steps { display: none; }
  .workflow-node strong { font-size: clamp(.58rem, 2.3vw, .7rem); line-height: 1.08; }
  .node-steps { margin-top: .3rem; font-size: clamp(.4rem, 1.6vw, .49rem); line-height: 1.17; }
  .node-atac-reads, .node-scrna-quant, .node-mpra-design { left: 18%; }
  .node-atac-evidence, .node-scrna-response, .node-mpra-count { left: 51%; }
  .node-atac-integrate, .node-scrna-programs, .node-mpra-analysis { left: 84%; }
  .node-atac-reads, .node-atac-evidence, .node-atac-integrate { top: 27%; }
  .node-scrna-quant, .node-scrna-response, .node-scrna-programs { top: 55%; }
  .node-mpra-design, .node-mpra-count, .node-mpra-analysis { top: 83%; }
  .atlas-workspace.has-detail .diagram-shell { width: 100%; }
  .workflow-detail { position: fixed; inset: 0; width: 100%; border: 0; border-radius: 0; }
  .detail-content { padding: 1.05rem 1rem 1.5rem; }
  .detail-content h2 { font-size: 1.55rem; }
  .io-flow { grid-template-columns: 1fr; gap: .3rem; }
  .io-arrow { justify-self: center; transform: rotate(90deg); }
  .outputs-grid { grid-template-columns: 1fr 1fr; }
  .output-card img { height: 7.2rem; }
  .atlas-footer { justify-content: center; padding: 0; border: 0; font-size: .67rem; }
  .image-lightbox { padding: 2.8rem .7rem 1rem; }
  .connection.transfer { stroke-width: 1.05; stroke-dasharray: 3 5.5; stroke-opacity: .47; }
}

@media (max-width: 420px) {
  .atlas-title { font-size: .56rem; }
  .workflow-node:not(.node-shared) { width: 24vw; }
  .outputs-grid { grid-template-columns: 1fr; }
  .workflow-group { grid-template-columns: 5rem 1fr; }
  .metro-map { --metro-label: 4.8rem; --metro-gap: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .workflow-detail, .image-lightbox { animation: none; }
  .workflow-node { transition: background-color 100ms linear, border-color 100ms linear, box-shadow 100ms linear; }
  .output-card img { transition: none; }
}