/* Shared material, distinct silhouettes. These are scientific close-ups, not app shells. */
.home-concise .home-features { padding: 64px 0; }
.home-features__stack { display: grid; gap: 32px; }
.home-feature { display: grid; grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr); gap: 16px; scroll-margin-top: 16px; }
.home-feature--reverse { grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr); }
.home-feature--reverse .home-feature__copy { grid-column: 2; grid-row: 1; }
.home-feature--reverse .home-feature__art { grid-column: 1; grid-row: 1; }
#memory.home-feature { scroll-margin-top: 16px; }
.home-feature__copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 40px clamp(28px, 3.2vw, 64px); border-radius: 18px; background: var(--band); color: #f7f7fb; }
.home-feature__eyebrow { margin-bottom: 24px; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #c9ccee; }
.home-feature__copy h2 { max-width: 15ch; font-size: clamp(36px, 3.4vw, 48px); line-height: 1.07; letter-spacing: -.025em; }
.home-feature__copy p { max-width: 35ch; margin-top: 24px; font-size: 18px; line-height: 1.6; color: #dddfee; }
.home-feature__copy a { display: inline-flex; align-items: center; gap: 14px; margin-top: 30px; font-size: 16px; text-decoration: none; }
.home-feature__copy a:hover { text-decoration: underline; text-underline-offset: 5px; }
.home-feature__copy a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.home-feature__engines { display: block; margin-top: 18px; color: #c9ccee; font-size: 13px; }
.home-feature__art { position: relative; isolation: isolate; overflow: clip; display: grid; align-content: center; min-height: 570px; margin: 0; padding: clamp(24px, 3vw, 56px); border: 1px solid #d5d8f1; border-radius: 18px; color: var(--ink); }
.home-feature__art::before, .home-feature__art::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.feature-glass { min-width: 0; border: 1px solid #ffffffc9; border-radius: 14px; background: #ffffffed; box-shadow: 0 16px 32px #282d581a, 0 2px 4px #282d5808; backdrop-filter: blur(14px); }
.feature-detail-label { display: block; font-family: var(--mono); font-size: 11px; color: #646980; letter-spacing: .03em; }
/* DESIGN: a broad DNA strip with a gel and a compact check overlapping below it. */
[data-home-feature="design"] { background: linear-gradient(160deg, #f1f3fc, #d9deed); }
[data-home-feature="design"]::before { inset: 33% -10% auto; height: 36%; transform: rotate(-9deg); border-top: 1px solid #ffffffd9; border-bottom: 1px solid #ffffffa6; background: linear-gradient(180deg, #ffffffc2, #ffffff12); }
[data-home-feature="design"]::after { inset: 0; opacity: .23; background: radial-gradient(#818bb7 .65px, transparent .65px) 0 0 / 14px 14px; }
.feature-design { width: 100%; }
.feature-sequence { position: relative; padding: 24px 28px; }
.feature-sequence__heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.feature-sequence__heading > div { line-height: 1.2; }
.feature-sequence__heading > div > span { display: block; margin-top: 5px; line-height: 1.4; }
.feature-sequence__heading strong { display: block; line-height: 1.2; font-family: var(--display); font-size: 24px; font-weight: 500; }
.feature-sequence__heading span { font-size: 12px; color: #646980; }
.feature-sequence__heading > span { font-family: var(--mono); }
.feature-sequence__track { position: relative; padding-top: 59px; margin-top: 14px; }
.feature-sequence__ruler { height: 14px; border-top: 1px solid #aeb8d0; background: repeating-linear-gradient(90deg, #c6cedf 0 1px, transparent 1px 5%); }
.feature-cut { position: absolute; top: 0; font-family: var(--mono); font-size: 12px; }
.feature-cut strong { font-weight: 500; }
.feature-cut small { display: block; margin-top: 3px; color: #73788c; font-size: 10px; }
.feature-cut::after { content: ''; position: absolute; left: 0; top: 40px; width: 1px; height: 26px; background: #b96273; }
.feature-cut--ecori { left: 14.78%; }
.feature-cut--scai { left: 81.16%; }
.feature-sequence__fragments { display: grid; grid-template-columns: 1783fr 903fr; gap: 12px; margin-top: 10px; font: 12px var(--mono); }
.feature-sequence__fragments span { display: grid; place-items: center; height: 24px; border-radius: 3px; background: #96bda8; color: #28503c; }
.feature-sequence__fragments span + span { background: #bcc3e6; color: #404a7b; }
.feature-sequence__caption { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 10px; color: #646980; }
.feature-design__results { display: grid; grid-template-columns: minmax(0, 1.17fr) minmax(0, 1fr); gap: 22px; align-items: start; margin: 22px 12px 0; }
.feature-digest { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.feature-digest__title { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 16px; font-size: 13px; }
.feature-digest__title strong { font-weight: 500; }
.feature-digest__title span { font-size: 11px; color: #646980; }
.feature-digest .gel { width: 100%; max-height: 255px; }
.feature-digest .gel text { fill: #535a70; }
.feature-checks { padding: 22px; }
.feature-checks__title { display: block; max-width: 19ch; margin: 12px 0 15px; font: 500 21px/1.2 var(--display); }
.feature-check { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 12px; border-bottom: 1px solid #e6e8ed; }
.feature-check > span:last-child { color: #376951; white-space: nowrap; }
.feature-checks p { margin-top: 18px; font-size: 10px; color: #646980; }
/* SCALE: an enlarged plate, curved glass, and a narrower order artifact to its right. */
[data-home-feature="scale"] { min-height: 590px; background: radial-gradient(ellipse at 14% 80%, #c6d6df, transparent 70%), linear-gradient(120deg, #edf3f5, #e2e4f5); }
[data-home-feature="scale"]::before { width: 110%; aspect-ratio: 1; left: -37%; top: -36%; border-radius: 50%; border: 1px solid #ffffffdc; box-shadow: 0 0 0 34px #ffffff2e, 0 0 0 35px #ffffffb0, 0 0 0 100px #ffffff12; background: radial-gradient(ellipse at 80% 80%, #ffffff42, transparent 70%); }
.feature-batch { display: grid; grid-template-columns: minmax(0, 1.65fr) 24px minmax(0, 1fr); align-items: center; }
.feature-plate { position: relative; padding: 26px 24px 24px; transform: translateY(-25px); }
.feature-plate__head { margin-bottom: 24px; }
.feature-plate__head strong { display: block; margin-top: 10px; font: 500 24px/1.2 var(--display); }
.feature-plate .plate { position: relative; width: 100%; max-width: none; gap: 6px; font-size: 9px; }
.feature-plate .plate b { background: #6872cf; box-shadow: inset 0 1px 3px #303b6720; }
.feature-plate .plate b.o { background: #e99a61; }
.feature-plate__key { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 20px; color: #555c6d; font-size: 11px; }
.feature-plate__key span { display: flex; align-items: center; gap: 6px; }
.feature-plate__key i { width: 7px; height: 7px; border-radius: 50%; background: #6872cf; }
.feature-plate__key .feature-plate__flag { background: #e99a61; }
.feature-batch__handoff { display: flex; align-items: center; z-index: 1; color: #8289b3; }
.feature-batch__handoff span { flex: 1; height: 1px; background: currentColor; }
.feature-batch__handoff i { font-style: normal; font-size: 18px; }
.feature-export { position: relative; padding: 24px 18px; margin-top: 115px; border-color: #ffffff; }
.feature-export__icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 20px; border-radius: 9px; background: #ecedfa; color: #5561c8; font-size: 24px; }
.feature-export > strong { display: block; margin-top: 12px; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.feature-export > small { display: block; margin-top: 4px; font-size: 11px; color: #646980; }
.feature-export__table { margin-top: 24px; font: 11px var(--mono); }
.feature-export__table > div { display: flex; justify-content: space-between; gap: 8px; padding: 9px 0; border-bottom: 1px solid #e8e9f0; }
.feature-export__table > div:first-child { color: #777d92; }
.feature-export__table > div:nth-child(n+4) { color: #996038; }
.feature-export > p { margin-top: 18px; font-size: 11px; line-height: 1.5; color: #646980; }
/* MEMORY: a deeper, horizontal glass plane. Context stays high left; recall sits low right. */
.home-feature__art.home-lab-brain__stage { min-height: 610px; padding: clamp(24px, 3vw, 56px); background: radial-gradient(ellipse at 13% 17%, #535d8e, transparent 64%), linear-gradient(145deg, #30365e, #202541); border-color: #3d446e; }
[data-home-feature="memory"]::before { inset: 42% -20% auto -10%; height: 30%; transform: rotate(8deg); border-top: 1px solid #acb4e77a; border-bottom: 1px solid #9da7d833; background: linear-gradient(180deg, #c9d2f425, #c9d2f402); }
[data-home-feature="memory"]::after { width: 70%; height: 80%; border-radius: 50%; border: 1px solid #8795c323; top: -28%; right: -24%; }
.home-feature__art .home-lab-brain__demo { width: 100%; max-width: none; }
.home-feature__art .home-lab-brain__memory { width: 78%; margin-right: auto; padding: 20px 24px; background: #e8edf7e8; border-color: #ffffff99; box-shadow: 0 12px 28px #10142b22; }
.home-feature__art .home-lab-brain__memory-head { font-size: 13px; }
.home-feature__art .home-lab-brain__scope { font-size: 10px; }
.home-feature__art .home-lab-brain__memory li p { font-size: 14px; }
.home-feature__art .home-lab-brain__bridge { justify-content: flex-end; width: 83%; padding: 20px 0; color: #d0d6f0; }
.home-feature__art .home-lab-brain__bridge svg { color: #b2baff; transform: rotate(-30deg); }
.home-feature__art .home-lab-brain__chat { width: 84%; margin-left: auto; box-shadow: 0 20px 40px #10142b40; }
.home-feature__art .home-lab-brain__turns { padding: 22px 24px 24px; }
.home-feature__art .home-lab-brain__answer p { font-size: 16px; }
/* Motion draws attention; static content is never removed from the first three stories. */
[data-home-feature="design"][data-phase="1"] .feature-zoom { border-color: #5561C8; box-shadow: 0 0 0 2px #5561c81f; }
[data-home-feature="design"][data-phase="1"] .feature-map__focus { opacity: 1; }
[data-home-feature="design"][data-phase="2"] .feature-checks { border-color: #a7c6b2; box-shadow: 0 14px 30px #282d581a, 0 0 0 2px #88b69b20; }
.feature-checks, .feature-export { transition: border-color .9s, box-shadow .9s; }
[data-home-feature="scale"][data-running="true"][data-phase="1"] .plate b { animation: feature-well-pass 1.8s ease-in-out both; animation-delay: calc(var(--well-index) * 12ms); }
@keyframes feature-well-pass { 45% { transform: scale(.84); opacity: .55; } }
[data-home-feature="scale"][data-phase="2"] .feature-export { border-color: #a9b0e4; box-shadow: 0 14px 30px #282d581a, 0 0 0 2px #7f8cdb20; }
.home-feature__art[data-running="false"] *, .home-feature__art[data-running="false"] *::after { animation-play-state: paused !important; }
@media (min-width: 1800px) {
  .home-feature { grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); }
  .home-feature--reverse { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); }
  .feature-sequence { padding: 30px 36px; }
  .feature-design__results { margin-left: 6%; margin-right: 9%; gap: 4%; }
  .feature-digest { padding: 26px; }
  .feature-checks { padding: 30px; }
  .feature-checks__title { font-size: 26px; }
  .feature-check { font-size: 14px; }
  .feature-batch { grid-template-columns: minmax(0, 1.5fr) 48px minmax(0, 1fr); padding: 0 4%; }
  .feature-plate { padding: 30px; }
  .feature-plate .plate { gap: 8px; }
  .feature-export { margin-top: 110px; padding: 30px; }
  .home-feature__art .home-lab-brain__memory { width: 65%; padding: 24px 30px; }
  .home-feature__art .home-lab-brain__memory li p { font-size: 17px; }
  .home-feature__art .home-lab-brain__chat { width: 73%; }
  .home-feature__art .home-lab-brain__question { font-size: 17px; }
  .home-feature__art .home-lab-brain__answer p { font-size: 19px; }
}
@media (max-width: 1150px) and (min-width: 801px) {
  .home-feature, .home-feature--reverse { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .home-feature--reverse { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .home-feature__copy { padding: 32px 26px; }
  .home-feature__art { padding: 24px 18px; }
  .feature-sequence { padding: 20px; }
  .feature-design__results { gap: 12px; margin-left: 0; margin-right: 0; }
  .feature-checks { padding: 16px; }
  .feature-check { flex-wrap: wrap; gap: 4px; }
  .feature-digest { padding: 16px 12px; }
  .feature-digest__title { flex-wrap: wrap; gap: 4px; }
  .feature-batch { grid-template-columns: minmax(0, 1.45fr) 16px minmax(0, 1fr); }
  .feature-plate { padding: 22px 14px; }
  .feature-plate .plate { gap: 3px; font-size: 8px; }
  .feature-plate__head strong { font-size: 21px; }
  .feature-export { padding: 20px 14px; }
  .home-feature__art.home-lab-brain__stage { padding: 28px 20px; }
  .home-feature__art .home-lab-brain__memory { width: 90%; padding: 18px; }
  .home-feature__art .home-lab-brain__chat { width: 94%; }
  .home-feature__art .home-lab-brain__turns { padding: 18px; }
}
@media (max-width: 800px) {
  .home-concise .home-features { padding: 40px 0; }
  .home-features__stack { gap: 32px; }
  .home-feature, .home-feature--reverse { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .home-feature--reverse .home-feature__copy, .home-feature--reverse .home-feature__art { grid-column: auto; grid-row: auto; }
  .home-feature__copy { padding: 32px; }
  .home-feature__copy h2 { max-width: 20ch; font-size: 36px; }
  .home-feature__copy p { max-width: 46ch; margin-top: 20px; }
  .home-feature__eyebrow { margin-bottom: 18px; }
  .home-feature__copy a { margin-top: 24px; }
  .home-feature__art { min-height: 0; padding: 32px 24px; }
  [data-home-feature="scale"], [data-home-feature="records"] { min-height: 0; }
  .home-feature__art.home-lab-brain__stage { min-height: 0; padding: 32px 24px; }
}
@media (max-width: 500px) {
  .home-feature__copy { padding: 28px 24px; }
  .home-feature__copy h2 { font-size: 34px; }
  .home-feature__art { padding: 26px 14px; }
  .feature-sequence { padding: 18px 16px; }
  .feature-sequence__heading { align-items: flex-start; gap: 12px; }
  .feature-sequence__heading strong { font-size: 21px; }
  .feature-sequence__heading > span { max-width: 9ch; text-align: right; font-size: 10px; line-height: 1.5; }
  .feature-sequence__heading > div > span { font-size: 10px; }
  .feature-cut { font-size: 10px; }
  .feature-cut small { font-size: 9px; }
  .feature-sequence__caption { flex-wrap: wrap; font-size: 9px; gap: 5px; }
  .feature-sequence__fragments { font-size: 10px; gap: 7px; }
  .feature-design__results { grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 18px 6px 0; }
  .feature-digest { padding: 18px; }
  .feature-checks { margin: 0 0 0 16px; padding: 18px; }
  .feature-checks__title { max-width: none; font-size: 19px; }
  .feature-check { font-size: 11px; padding: 8px 0; }
  .feature-batch { grid-template-columns: minmax(0, 1fr); }
  .feature-plate { padding: 22px 16px; transform: none; margin-right: 10px; }
  .feature-plate__head strong { font-size: 23px; }
  .feature-plate .plate { gap: 4px; font-size: 8px; }
  .feature-batch__handoff { width: 26px; height: 30px; transform: rotate(90deg); justify-self: end; margin-right: 65px; }
  .feature-export { margin: 0 0 0 24px; padding: 20px; }
  .feature-export__icon { float: right; margin-bottom: 0; }
  .feature-export__table { margin-top: 18px; }
  .feature-detail-label { font-size: 9px; }
  .home-feature__art.home-lab-brain__stage { padding: 26px 14px; }
  .home-feature__art .home-lab-brain__memory { width: 94%; padding: 16px; }
  .home-feature__art .home-lab-brain__memory-head { font-size: 12px; }
  .home-feature__art .home-lab-brain__memory li p { font-size: 13px; }
  .home-feature__art .home-lab-brain__bridge { width: 96%; padding: 20px 0; font-size: 11px; }
  .home-feature__art .home-lab-brain__chat { width: 94%; }
  .home-feature__art .home-lab-brain__turns { padding: 16px; }
  .home-feature__art .home-lab-brain__answer p { font-size: 14px; }
  .home-feature__art .home-lab-brain__question { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .home-feature__art *, .home-feature__art *::after { animation: none !important; transition: none !important; } }

/* DESIGN, redrawn 10-10 (founder: "improve the linear map and the gel", canvas option V3): the plasmid's
   features on the map, a zoom into the EcoRI site, and the editor's own virtual gel as an image. */
.feature-map { display: block; width: 100%; height: auto; margin-top: 8px; font-family: var(--mono); font-size: 10px; }
.feature-map__cuts { font-size: 10.5px; font-weight: 500; fill: #121316; }
.feature-map__cuts line { stroke: #B96273; stroke-width: 1.2; }
.feature-map__cuts path { fill: #B96273; }
.feature-map__axis { stroke: #121316; stroke-width: 1; }
.feature-map__focus { opacity: .55; transition: opacity .9s; }
.feature-map__focus rect { fill: none; stroke: #5561C8; stroke-width: 1; }
.feature-map__focus path { fill: none; stroke: #5561C8; stroke-width: .8; stroke-dasharray: 3 3; }
.feature-map__legend { display: none; gap: 14px; margin: 6px 0 10px; font-family: var(--mono); font-size: 11px; color: #646980; }
.feature-map__legend span { display: inline-flex; align-items: center; gap: 5px; }
.feature-map__legend i { width: 10px; height: 10px; border-radius: 2px; }
.feature-zoom { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 2px; padding: 8px 12px; border: 1px solid #c9cdf0; border-radius: 4px; background: #F9FAFF; transition: border-color .9s, box-shadow .9s; }
.feature-zoom__seq { font-family: var(--code); font-size: 13px; letter-spacing: .08em; line-height: 1.4; }
.feature-zoom__dim { color: #646980; }
.feature-zoom__cut { color: #B96273; font-weight: 600; }
.feature-zoom__site { padding: 0 2px; background: #FBEBE4; color: #8A2E2E; }
.feature-zoom__note { font-family: var(--mono); font-size: 10.5px; line-height: 1.5; color: #646980; text-align: right; white-space: nowrap; }
.feature-gel { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; }
.feature-gel__sizes { position: relative; font-family: var(--mono); font-size: 10px; color: #646980; text-align: right; }
.feature-gel__sizes span { position: absolute; right: 0; }
.feature-gel__sizes span:nth-child(1) { top: 6%; } .feature-gel__sizes span:nth-child(2) { top: 37%; } .feature-gel__sizes span:nth-child(3) { top: 63%; } .feature-gel__sizes span:nth-child(4) { top: 80%; }
.feature-gel img { display: block; width: 100%; height: auto; border-radius: 6px; border: 2px solid #333; }
.feature-gel__lanes { display: grid; grid-template-columns: 34px repeat(4, minmax(0, 1fr)); font-family: var(--mono); font-size: 10px; color: #646980; text-align: center; }
.feature-gel__lanes span { grid-column: span 1; }
.feature-gel__lanes span:first-child { grid-column: 2; }
.feature-checks__title { margin-top: 8px; }
@media (max-width: 700px) {
  .feature-zoom { flex-direction: column; align-items: flex-start; gap: 6px; }
  .feature-zoom__seq { font-size: 11.5px; letter-spacing: .05em; }
  .feature-zoom__note { text-align: left; white-space: normal; }
  /* The map renders at ~0.45x on a phone: cut labels grow to read at ~11px and sit above the box,
     the in-arrow feature names give way to a legend line. */
  .feature-map { overflow: visible; margin-top: 18px; }
  .feature-map__cuts { font-size: 24px; }
  .feature-map__cuts text { transform: translateY(-6px); }
  .feature-map > text { display: none; }
  .feature-map__legend { display: flex; }
}

/* RECORDS, redrawn 10-10 (founder: option N3 + "use our workflow graph code" + the old landing's memory web):
   one entry at the centre of its orbit, the records around it drawn with the app's own workflow node
   chassis (styles/workflow-nodes.css, wfn-) and React Flow's bezier edges, edge colours from EDGE_STYLES. */
[data-home-feature="records"] { min-height: 655px; background: linear-gradient(160deg, #f1f3fc, #d9deed); }
[data-home-feature="records"]::before { inset: 33% -10% auto; height: 36%; transform: rotate(-9deg); border-top: 1px solid #ffffffd9; border-bottom: 1px solid #ffffffa6; background: linear-gradient(180deg, #ffffffc2, #ffffff12); }
[data-home-feature="records"]::after { inset: 0; opacity: .23; background: radial-gradient(#818bb7 .65px, transparent .65px) 0 0 / 14px 14px; }
.feature-project { width: 100%; }
.feature-project__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; padding: 0 4px; }
.feature-project__head strong { font-weight: 500; font-size: 16px; }
.feature-project__head > div > span { display: block; margin-top: 4px; color: #646980; font-size: 11px; }
.feature-graph { --node-w: 196px; --centre-w: 228px; --inset: max(11%, calc(var(--node-w) / 2 + 12px)); position: relative; margin: 0 calc(-1 * clamp(8px, 2vw, 30px)); height: 540px; }
/* The chassis tokens the app sets from its theme, written out for the static page. */
.feature-node.wfn-node { --wfn-card: #fff; --wfn-inset: #F7F7F5; --wfn-tile-base: #fff; --wfn-border: #E1E2E6; --wfn-ink: #121316; --wfn-ink-2: #5E6167; --wfn-ink-3: #6f7278; --wfn-ink-4: #9a9ca3; --wfn-chip-bg: #F1F1F3; --wfn-chip-bd: #E1E2E6; --wfn-foot-bg: #F7F7F5; --wfn-port: #9a9ca3; --wfn-acc-dna: #16A34A; --wfn-acc-cyan: #0891B2; --wfn-acc-verify: #65A30D; --wfn-acc-doc: #475569; --wfn-acc-exp: #9333EA; --wfn-st-ready: #16A34A; --wfn-st-running: #2563EB; --wfn-sel: #2563EB; --wfn-radius: 10px; --wfn-shadow-1: 0 1px 2px rgba(20,18,15,.04), 0 1px 1px rgba(20,18,15,.03); --wfn-shadow-sel: 0 0 0 1px var(--wfn-sel), 0 1px 2px rgba(20,18,15,.04), 0 6px 18px rgba(37,99,235,.10);
  position: absolute; z-index: 1; width: var(--node-w); box-sizing: border-box; transform: translate(-50%, -50%); background: var(--wfn-card); border: 1px solid var(--wfn-border); border-radius: var(--wfn-radius); box-shadow: var(--wfn-shadow-1); color: var(--wfn-ink); font-family: var(--body); transition: border-color .6s, box-shadow .6s, opacity .6s; }
.feature-node--centre.wfn-node { width: var(--centre-w); left: 50%; top: 50%; }
[data-node="construct"] { left: 50%; top: 10%; }
[data-node="construct1"] { left: var(--inset); top: 26%; }
[data-node="protocol"] { left: var(--inset); top: 74%; }
[data-node="result"] { left: calc(100% - var(--inset)); top: 26%; }
[data-node="task"] { left: calc(100% - var(--inset)); top: 74%; }
[data-node="sister"] { left: 50%; top: 90%; }
.feature-node--faded.wfn-node { opacity: .78; }
.feature-node .wfn-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
.feature-node .wfn-icon { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border: 1px solid var(--wfn-border); background: var(--wfn-card); border-radius: 7px; color: var(--wfn-ink-2); }
.feature-node .wfn-icon svg { width: 16px; height: 16px; display: block; }
.feature-node .wfn-ic-dna { color: var(--wfn-acc-dna); background: color-mix(in oklab, var(--wfn-acc-dna) 12%, #fff); border-color: color-mix(in oklab, var(--wfn-acc-dna) 26%, #fff); }
.feature-node .wfn-ic-cyan { color: var(--wfn-acc-cyan); background: color-mix(in oklab, var(--wfn-acc-cyan) 12%, #fff); border-color: color-mix(in oklab, var(--wfn-acc-cyan) 26%, #fff); }
.feature-node .wfn-ic-verify { color: var(--wfn-acc-verify); background: color-mix(in oklab, var(--wfn-acc-verify) 12%, #fff); border-color: color-mix(in oklab, var(--wfn-acc-verify) 26%, #fff); }
.feature-node .wfn-ic-doc { color: var(--wfn-acc-doc); background: color-mix(in oklab, var(--wfn-acc-doc) 12%, #fff); border-color: color-mix(in oklab, var(--wfn-acc-doc) 26%, #fff); }
.feature-node .wfn-ic-exp { color: var(--wfn-acc-exp); background: color-mix(in oklab, var(--wfn-acc-exp) 12%, #fff); border-color: color-mix(in oklab, var(--wfn-acc-exp) 26%, #fff); }
.feature-node .wfn-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--wfn-ink); white-space: nowrap; overflow: hidden; }
.feature-node .wfn-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feature-node .wfn-open { flex: 0 0 auto; font-size: 11px; line-height: 1; color: var(--wfn-ink-4); }
.feature-node .wfn-sub { padding: 0 14px 10px; color: var(--wfn-ink-2); font-size: 12.5px; line-height: 1.45; }
.feature-node .wfn-sub sub { font-size: 9px; }
.feature-node .wfn-excerpt { margin: 0 0 12px; padding: 0 14px; color: var(--wfn-ink-2); font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.feature-node .wfn-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-top: 1px solid var(--wfn-border); color: var(--wfn-ink-3); font-size: 11.5px; background: var(--wfn-foot-bg); border-radius: 0 0 var(--wfn-radius) var(--wfn-radius); }
.feature-node .wfn-foot-left { white-space: nowrap; }
.feature-node .wfn-meta { margin-left: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--code); font-size: 10.5px; color: var(--wfn-ink-4); }
.feature-node .wfn-status { position: absolute; top: -10px; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 100px; background: var(--wfn-card); border: 1px solid var(--wfn-border); font-size: 11px; font-weight: 500; color: var(--wfn-ink-2); box-shadow: var(--wfn-shadow-1); }
.feature-node .wfn-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wfn-ink-4); }
.feature-node .wfn-status.is-ready .wfn-dot { background: var(--wfn-st-ready); }
.feature-node .wfn-status.is-running .wfn-dot { background: var(--wfn-st-running); animation: wfn-pulse 1.4s infinite; }
@keyframes wfn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
/* Edges: React Flow's bezier, 2px, idle at .7 like SemanticEdge; the lit edge is the selected one (3px, full). */
.feature-graph__edges { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.feature-graph__edges path { fill: none; stroke: var(--edge); stroke-width: 2; opacity: .7; transition: opacity .6s, stroke-width .6s; }
.feature-graph__edges [data-dashed] path { stroke-dasharray: 6 4; }
.feature-graph__edges circle { fill: #fff; stroke: #9a9ca3; stroke-width: 1.5; transition: stroke .6s; }
.feature-graph__edges g[hidden] { display: none; }
.feature-edge-label { position: absolute; left: 0; top: 0; z-index: 3; display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border: 1px solid var(--edge); border-radius: 999px; background: color-mix(in srgb, var(--edge) 90%, transparent); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; box-shadow: 0 1px 2px #0000001a; opacity: 0; transition: opacity .6s; }
.feature-graph[data-ready] .feature-edge-label { opacity: .85; }
.feature-graph:not([data-ready]) .feature-graph__edges { opacity: 0; }
/* Phases: 0 = what went in (the construct and its earlier version), 1 = what came out (result, task), 2 = the entry and every link. */
[data-home-feature="records"][data-phase="0"] [data-graph-focus="0"], [data-home-feature="records"][data-phase="1"] [data-graph-focus="1"], [data-home-feature="records"][data-phase="2"] [data-graph-focus="2"] { border-color: var(--wfn-sel); box-shadow: var(--wfn-shadow-sel); }
[data-home-feature="records"][data-phase="0"] [data-focus~="0"] path, [data-home-feature="records"][data-phase="1"] [data-focus~="1"] path, [data-home-feature="records"][data-phase="2"] [data-focus~="2"] path { opacity: 1; stroke-width: 3; }
[data-home-feature="records"][data-phase="0"] [data-focus~="0"] circle, [data-home-feature="records"][data-phase="1"] [data-focus~="1"] circle, [data-home-feature="records"][data-phase="2"] [data-focus~="2"] circle { stroke: var(--edge); }
@media (max-width: 1400px) and (min-width: 1151px) {
  /* The figure is 600-700px here: smaller cards keep a gap between the centre and the sides. */
  .feature-graph { --node-w: 172px; --centre-w: 200px; --inset: max(11%, calc(var(--node-w) / 2 + 8px)); margin: 0 -30px; }
  .feature-node .wfn-head { padding: 12px 12px 8px; }
  .feature-node .wfn-sub, .feature-node .wfn-excerpt { padding-left: 12px; padding-right: 12px; }
  .feature-node .wfn-title { font-size: 13px; }
  .feature-node .wfn-open, .feature-node .wfn-meta { display: none; }
}
@media (max-width: 1150px) and (min-width: 801px) {
  .feature-graph { --node-w: 184px; --centre-w: 210px; height: 560px; margin: 0 -12px; }
  [data-node="construct1"], [data-node="result"] { top: 25%; }
  [data-node="protocol"], [data-node="task"] { top: 75%; }
  .feature-node .wfn-head { padding: 12px 12px 8px; }
  .feature-node .wfn-sub, .feature-node .wfn-excerpt { padding-left: 12px; padding-right: 12px; }
  .feature-node .wfn-title { font-size: 13px; }
  .feature-node .wfn-meta { display: none; }
}
@media (max-width: 700px) {
  /* Phone: the orbit folds into a column. The two context records (v1, the sister entry) are left out. */
  .feature-graph { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 14px; height: auto; margin: 12px 0 0; }
  .feature-node .wfn-title, .feature-node .wfn-name { white-space: normal; overflow: visible; font-size: 13px; line-height: 1.25; }
  .feature-node .wfn-open, .feature-node .wfn-meta { display: none; }
  .feature-node .wfn-status { display: none; }
  [data-node="task"] .wfn-foot-left::after { content: " · In progress"; }
  [data-node="construct1"], [data-node="sister"], [data-edge-label="revises"], [data-edge-label="related"] { display: none; }
  .feature-node.wfn-node, .feature-node--centre.wfn-node { position: relative; left: auto; top: auto; width: auto; transform: none; }
  [data-node="protocol"] { order: 1; } [data-node="construct"] { order: 2; } .feature-node--centre { order: 3; grid-column: 1 / -1; } [data-node="result"] { order: 4; } [data-node="task"] { order: 5; }
  .feature-project__head { padding: 0; gap: 10px; }
  .feature-project__head strong { font-size: 14px; }
  .feature-project__head > div > span { font-size: 10px; }
}