/* Shared visual refinement. Clear blue actions, soft spectral color, restrained glass.
   Scientific images and the existing task animation geometry are unchanged. */
:root { --sy-s-navbar-height: 72px; }
body { background: var(--sy-c-background); }
.sy-container { max-width: 100rem; }
a, button, input { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent-9); outline-offset: 4px; }
.yue { line-height: 1.75; }
.yue h1, .yue h2, .yue h3 { font-weight: 650; letter-spacing: -.035em; }
.yue h2 { margin-top: 2.9rem; }
.yue p { text-wrap: pretty; }

/* A single frosted header, one navigation treatment, and a compact search. */
.announcement { padding: .38rem 2rem; background: var(--sy-c-surface); color: var(--sy-c-light); border-bottom: 1px solid var(--sy-c-divider); font-size: .74rem; line-height: 1.6; }
.announcement-close { top: .47rem; color: var(--sy-c-light); }
.spora-site-header .sy-head-blur { background: var(--sy-c-background-dropback); -webkit-backdrop-filter: blur(22px) saturate(115%); backdrop-filter: blur(22px) saturate(115%); box-shadow: 0 1px 0 var(--spora-glass-line), 0 6px 24px rgba(26, 37, 75, .025); }
.spora-site-header .sy-head-inner { gap: 1rem; }
.spora-site-header .spora-brand { align-items: baseline; gap: .5rem; flex-shrink: 0; }
.spora-site-header .spora-brand strong { font-size: 1.4rem; font-weight: 650; letter-spacing: -.055em; }
.spora-site-header .spora-brand-docs { font-size: 1.1rem; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; color: var(--spora-blue); }
/* BioImage Archive logo in front of the spora-data link, which points to the archive. */
.spora-site-header .spora-bia-logo { display: inline-block; width: 16px; height: 16px; margin-right: .2rem; border-radius: 2px; flex-shrink: 0; }
.spora-site-header .sy-head-actions { gap: .25rem; }
.spora-site-header .sy-head-actions button { height: 36px; width: 36px; padding: .5rem; justify-content: center; border-radius: 10px; color: var(--sy-c-light); }
.spora-site-header .sy-head-actions button:hover { color: var(--sy-c-heading); background: var(--sy-c-surface); }
.spora-site-header .sy-head-socials { margin-left: .5rem; color: var(--sy-c-light); }
.spora-site-header .sy-head-socials a { border-radius: 9px; }
.spora-site-header .sy-head-socials a:hover { background: var(--sy-c-surface); }
.spora-site-header .spora-github-link { gap: .3rem; font-size: .75rem; font-weight: 500; color: var(--sy-c-light); white-space: nowrap; }
.spora-site-header .spora-search { position: relative; width: 170px; border: 1px solid var(--spora-glass-line); border-radius: 10px; background: var(--spora-glass); box-shadow: inset 0 1px var(--spora-inset); }
.spora-site-header .spora-search input { min-width: 0; width: 100%; background: transparent; padding: .6rem 1.6rem .6rem 2rem; border-radius: inherit; color: var(--sy-c-text); font-size: .79rem; }
.spora-search input::placeholder { color: var(--sy-c-light); }
.spora-search .spora-search-icon { position: absolute; left: .65rem; color: var(--sy-c-light); pointer-events: none; }
.spora-search kbd { color: var(--sy-c-light); font-size: .65rem; opacity: .65; }
@media (min-width: 768px) {
  .spora-site-header .sy-head-nav { gap: 1rem; min-width: 0; position: static; inset: auto; width: auto; padding: 0; border: 0; background: transparent; overflow: visible; }
  .spora-site-header .sy-head-links { justify-content: center; padding: 0; overflow: visible; }
  .spora-site-header .sy-head-links > ul { display: inline-flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid var(--spora-glass-line); border-radius: 13px; background: var(--spora-glass); box-shadow: inset 0 1px var(--spora-inset), 0 2px 8px rgba(26, 37, 75, .025); }
  .spora-site-header .sy-head-links .link { height: auto; margin: 0; }
  html .spora-site-header .sy-head-links .link > a { display: inline-flex; align-items: center; gap: .2rem; margin: 0; padding: .48rem .8rem; font-size: .8rem; font-weight: 550; border: 0; border-radius: 8px; color: var(--sy-c-light); background: transparent; transition: background .18s, color .18s; }
  html .spora-site-header .sy-head-links .link:hover > a { color: var(--sy-c-heading); background: var(--sy-c-surface); }
  html .spora-site-header .sy-head-links .link.active > a { background: var(--spora-nav-active); color: #fff; box-shadow: 0 1px 3px rgba(26, 37, 75, .1); }
  .spora-site-header .sy-head-extra { gap: .15rem; padding: 0; width: auto; flex-direction: row; }
  .spora-site-header .sy-head-extra .spora-search { position: relative; inset: auto; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .spora-site-header .sy-head-inner { gap: .65rem; padding-left: 1.2rem; padding-right: 1.2rem; }
  .spora-site-header .sy-head-nav { gap: .6rem; }
  .spora-site-header .sy-head-socials { display: none; }
  .spora-site-header .spora-search { width: 150px; }
  html .spora-site-header .sy-head-links .link > a { padding: .48rem .6rem; }
}

/* Calm documentation navigation and a little more room for the hub pages. */
@media (min-width: 768px) { .sy-main.spora-hub { width: calc(100% - 18rem); max-width: none; flex: 1; min-width: 0; } }
.spora-project { padding-bottom: 1.2rem; margin-bottom: 1.4rem; }
.spora-project-title { font-size: 1.2rem; font-weight: 650; }
.spora-project-title .spora-bracket { background: none; color: var(--sy-c-light); }
.spora-project-repo { font-size: .73rem; margin-top: .45rem; }
.globaltoc { font-size: .85rem; line-height: 1.55; }
.globaltoc .caption { font-size: .65rem; font-weight: 650; letter-spacing: .11em; border: 0; padding-top: .6rem; color: var(--sy-c-light); }
.globaltoc li { margin: .26rem 0; }
.globaltoc li > a { display: block; padding: .25rem .5rem; margin-left: -.5rem; border-radius: 7px; }
.globaltoc li > a:hover { color: var(--sy-c-heading); background: var(--sy-c-surface); }
html .globaltoc li.current > a, html:not(.dark) .globaltoc li.current > a { background: var(--accent-a3); color: var(--sy-c-link); font-weight: 600; border-radius: 7px; }
.globaltoc li > ul { font-size: .96em; }
.globaltoc ul + .caption { margin-top: 1.6rem; }
.globaltoc .caption + ul { margin-bottom: 1.1rem; }
.sy-rside .localtoc > ul { font-size: .78rem; line-height: 1.8; }
.sy-rside-inner > div.localtoc > h3 { font-size: .65rem; letter-spacing: .1em; font-weight: 650; }
.sy-breadcrumbs { background: var(--sy-c-background-dropback); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.sy-breadcrumbs ol { font-size: .8rem; }
.sy-breadcrumbs-inner { border-bottom-color: var(--sy-c-divider); }

/* Glass is concentrated in the hero controls and lightly raised card surfaces. */
.yue .spora-hero { --hero-r: 22px; box-shadow: 0 18px 40px -26px rgba(26, 37, 75, .55), inset 0 1px rgba(167, 190, 211, .24); }
.spora-hero-image { filter: blur(3px) brightness(.91) saturate(.96); }
.spora-hero-glass { background: linear-gradient(105deg, rgba(26, 37, 75, .58), rgba(26, 37, 75, .32) 60%, rgba(26, 37, 75, .13)); box-shadow: inset 0 1px 1px rgba(255,255,255,.25); }
.yue .spora-hero-title { font-weight: 650; letter-spacing: -.065em; font-size: clamp(2.8rem,6.8vw,5rem); }
.yue .spora-hero-title .spora-bracket { font-weight: 550; }
.yue .spora-hero-lead { max-width: 39rem; font-size: clamp(1rem,1.5vw,1.12rem); line-height: 1.75; color: var(--spora-on-dark); }
.spora-hero-actions { gap: .6rem; margin-top: 1.8rem; }
.yue a.spora-btn { font-size: .84rem; font-weight: 550; border-radius: 10px; padding: .7rem 1.05rem; border-color: rgba(167, 190, 211, .25); background: rgba(167, 190, 211, .085); box-shadow: inset 0 1px rgba(255,255,255,.075); }
.yue a.spora-btn.primary { background: var(--aimm-blue); color: #fff; border-color: rgba(167, 190, 211, .65); box-shadow: 0 4px 14px rgba(26, 37, 75, .2), inset 0 1px rgba(255,255,255,.2); }
.yue a.spora-btn.primary:hover { background: color-mix(in srgb, var(--aimm-blue) 88%, #fff); box-shadow: 0 6px 18px rgba(26, 37, 75, .25); }
.yue ol.spora-flow { margin-top: 2.3rem; gap: .4rem; }
.yue ol.spora-flow > li + li::before { width: 1.1rem; margin: 0 .1rem; opacity: .45; }
.spora-flow .step { border-radius: 10px; background: rgba(167, 190, 211, .06); padding: .6rem .8rem; border-color: rgba(167, 190, 211, .16); box-shadow: inset 0 1px rgba(255,255,255,.055); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.spora-flow .step b { font-size: .82rem; font-weight: 550; }
.spora-flow .step small { font-size: .68rem; color: var(--aimm-light-blue); }
.spora-flow > li:nth-child(1) { --flow-accent: var(--spora-green-light); }
.spora-flow > li:nth-child(2) { --flow-accent: var(--spora-blue-light); }
.spora-flow > li:nth-child(3) { --flow-accent: var(--spora-purple-light); }
.spora-flow .step b { color: var(--flow-accent); }
.spora-flow .step.current { background: color-mix(in srgb,var(--flow-accent) 15%,transparent); border-color: color-mix(in srgb,var(--flow-accent) 50%,transparent); box-shadow: inset 0 1px rgba(255,255,255,.1); }
.spora-hub .yue h2 { font-size: 1.55rem; margin-top: 3.7rem; }
.spora-hub .yue h2::before { width: 1.65rem; height: 2px; margin-bottom: .9rem; background: linear-gradient(90deg,var(--spora-blue),var(--spora-purple)); }
.spora-hub .yue .section-lead { font-size: 1rem; line-height: 1.75; max-width: 45rem; }

/* sphinx-design grids: align card edges with the text column (the container padding is not offset by the row margins). */
.yue .sd-container-fluid { padding-left: 0; padding-right: 0; }
.yue .sd-card, .yue a.spora-feature, .yue a.spora-chips-link { background: var(--spora-glass); border: 1px solid var(--spora-glass-line); border-radius: 15px; box-shadow: inset 0 1px var(--spora-inset), 0 6px 22px -15px rgba(26, 37, 75, .18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.yue .sd-card-hover:hover, .yue a.spora-feature:hover, .yue a.spora-chips-link:hover { transform: translateY(-2px); border-color: var(--accent-7); box-shadow: inset 0 1px var(--spora-inset), 0 14px 30px -19px rgba(26, 37, 75, .25); }
.yue .sd-card-title { color: var(--sy-c-heading); font-weight: 600; letter-spacing: -.025em; }
.yue .sd-card-body { padding: 1.4rem; }
.yue .sd-card-footer { border-top: 1px solid var(--sy-c-divider); font-size: .82rem; font-weight: 550; padding: .85rem 1.4rem; }
.yue .sd-card-text { font-size: .9rem; line-height: 1.7; }
/* "Why spora [io]" cards: plain cards, each with a solid icon tile in one palette colour. */
.yue a.spora-feature { --feature-ink: var(--aimm-blue); --feature-icon: #fff; padding: 1.5rem; background: #fff; }
.yue a.spora-feature.c-blue { --feature-ink: var(--aimm-blue); }
.yue a.spora-feature.c-gold { --feature-ink: var(--aimm-gold); --feature-icon: var(--aimm-navy); }
.yue a.spora-feature.c-purple { --feature-ink: var(--aimm-purple); }
.yue a.spora-feature.c-navy { --feature-ink: var(--aimm-navy); }
.yue a.spora-feature:hover { border-color: color-mix(in srgb,var(--feature-ink) 55%,var(--spora-glass-line)); }
.yue a.spora-feature::after { content: none; }
.spora-feature .icon { width: 2.5rem; height: 2.5rem; color: var(--feature-icon); background: var(--feature-ink); border: 0; box-shadow: 0 6px 14px -8px var(--feature-ink); }
.spora-feature .icon svg { stroke-width: 1.8; }
.spora-feature .title { font-size: 1rem; font-weight: 600; letter-spacing: -.02em; }
.spora-feature .text { font-size: .86rem; line-height: 1.75; color: var(--sy-c-text); }
.spora-stats { border-color: var(--spora-glass-line); background: var(--sy-c-divider); border-radius: 15px; }
.spora-stats > div { background: var(--spora-glass); }
.spora-stats b { background: none; color: var(--spora-blue); font-size: 1.8rem; font-weight: 600; }
/* Stat numbers in order: blue, purple, gold, green, and navy. */
.spora-stats > div:nth-child(2) b { color: var(--aimm-purple); }
.spora-stats > div:nth-child(3) b { color: var(--aimm-gold); }
.spora-stats > div:nth-child(4) b { color: var(--aimm-green); }
.spora-stats > div:nth-child(5) b { color: var(--aimm-navy); }
.spora-stats span { font-size: .8rem; }
.spora-chips .group > span { font-size: .65rem; letter-spacing: .08em; }
.spora-chips .chip { color: var(--c); background: color-mix(in srgb,var(--c) 8%,transparent); border-color: color-mix(in srgb,var(--c) 19%,transparent); font-size: .8rem; font-weight: 500; padding: .32rem .65rem; }

/* Small accents echo the tissue colors without recoloring the scientific images. */
.spora-scale.spora-task { --task-accent: var(--spora-purple-light); border-color: var(--spora-navy-line); border-radius: 17px; box-shadow: 0 9px 24px -19px rgba(26, 37, 75, .6), inset 0 1px rgba(167, 190, 211, .1); }
.spora-task.spora-task-segmentation { --task-accent: var(--spora-blue-light); }
.spora-task.spora-task-pathology { --task-accent: var(--spora-green-light); }
.spora-task.is-active { border-color: var(--task-accent); box-shadow: 0 12px 28px -19px rgba(26, 37, 75, .7); }
.spora-task .kicker { font-size: .64rem; letter-spacing: .13em; font-weight: 600; }
.spora-task .title { font-size: 1.24rem; font-weight: 600; letter-spacing: -.03em; }
.spora-task .question { font-size: .89rem; line-height: 1.75; color: var(--spora-on-dark); }
.spora-task-content { padding: 0 1.4rem 1.4rem; }
.yue .spora-task li a { font-size: .81rem; font-weight: 550; padding: .66rem .78rem; border-color: rgba(167, 190, 211, .24); background: rgba(167, 190, 211, .055); box-shadow: inset 0 1px rgba(167, 190, 211, .04); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.yue .spora-task li a:hover { transform: none; background: rgba(167, 190, 211, .1); border-color: rgba(167, 190, 211, .48); }
.spora-task-cue { font-size: .61rem; border-color: rgba(167, 190, 211, .23); background: rgba(26, 37, 75, .66); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* Reference pages stay crisp and quiet; syntax still distinguishes token types. */
.yue .highlight pre, dt.sig, .yue .spora-tree { border-radius: 9px; border-left-width: 2px; border-left-color: var(--accent-7); box-shadow: inset 0 1px var(--spora-inset); }
.yue .highlight pre { font-size: .84rem; line-height: 1.85; }
.spora-hub .yue .spora-split .highlight pre { box-shadow: inset 0 1px var(--spora-inset), 0 8px 24px -20px rgba(26, 37, 75, .23); }
.yue .spora-tree { font-size: .8rem; }
dt.sig { font-size: .85rem; }
.yue table { border-radius: 10px; font-size: .9rem; }
.yue .admonition, html:not(.dark) .admonition { --color-1: var(--sy-c-surface); --color-2: var(--sy-c-border); --color-3: var(--sy-c-link); --color-4: var(--sy-c-heading); border-radius: 10px; }
/* The round icon badge on the left edge: drawn above the title bar, which otherwise covers its right half. */
.yue .admonition::before, .yue .admonition::after { z-index: 1; }
/* The title bar starts at the inner edge of the 4px left border (the theme pulls it 3px over the
   border) and follows the box's rounded corners: 10px on the right, and on the left the border's
   inner curve, 10px - 4px = 6px wide and 10px tall. */
.yue .admonition p.admonition-title { margin-left: -1rem; border-radius: 6px 10px 0 0 / 10px 10px 0 0; }
.sy-foot, html:not(.dark) .sy-foot { border-top: 1px solid var(--sy-c-divider); background: var(--sy-c-foot-background); }
/* Previous/next links: long class names (e.g. SingleIHCImagingDataset) wrap instead of widening the page on phones. */
.navigation > div, .navigation a, .navigation .page-info { min-width: 0; }
.navigation .page-info .title { overflow-wrap: anywhere; }
.sy-foot-copyright { color: var(--sy-c-light); font-size: .75rem; }

/* Code blocks marked spora-wrap wrap long lines when they do not fit, instead of scrolling. */
.yue .spora-wrap .highlight pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Copy button in the top-right corner of the citation and other copyable code blocks;
   the code keeps clear of it. */
.yue :is(.spora-citation, .spora-copyable) .highlight pre { padding-right: 5.5rem; }
html .yue .spora-citation .highlight span { color: var(--spora-syn-text); font-weight: 400; font-style: normal; }
.spora-copy { position: absolute; top: .7rem; right: .7rem; padding: .3rem .7rem; border: 1px solid var(--sy-c-border); border-radius: 8px; background: #fff; color: var(--sy-c-light); font-size: .75rem; font-weight: 550; cursor: pointer; transition: color .15s, border-color .15s; }
.spora-copy:hover { color: var(--spora-blue); border-color: var(--accent-7); }
.spora-copy.is-copied { color: var(--spora-green); border-color: color-mix(in srgb, var(--aimm-green) 50%, #fff); }
/* Landing intro: a plain box with two soft gradient dots in opposite corners, the
   wordmark with "Documentation", the lead, and the group and EPFL logos. */
.spora-overview-page > h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.spora-overview-intro { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--spora-glass-line); border-radius: 22px; background: #fff; box-shadow: inset 0 1px var(--spora-inset), 0 15px 40px -30px rgba(26, 37, 75, .2); }
/* Dot fields: a colour seen through a grid of small dots. Top left: blue, confined to
   the box padding (a strip along the top and one down the left edge) so it never
   reaches the text. Bottom right: blue to purple, fading out from the corner. */
.spora-overview-intro { --intro-pad: clamp(1.6rem,5vw,3.2rem); padding: var(--intro-pad); }
.spora-overview-intro::before, .spora-overview-intro::after { content: ""; position: absolute; z-index: -1; pointer-events: none;
  --dots: radial-gradient(circle, #000 1.3px, transparent 1.8px) 0 0 / 14px 14px; }
.spora-overview-intro::before { inset: 0; background: var(--aimm-blue);
  --corner: radial-gradient(ellipse 55% 90% at top left, #000 0%, rgba(0, 0, 0, .55) 35%, transparent 75%);
  --top: linear-gradient(to bottom, #000, transparent calc(var(--intro-pad) + .4rem));
  --left: linear-gradient(to right, #000, transparent calc(var(--intro-pad) - .3rem));
  -webkit-mask: var(--dots), var(--corner), var(--top), var(--left); -webkit-mask-composite: source-in, source-in, source-over;
  mask: var(--dots), var(--corner), var(--top), var(--left); mask-composite: intersect, intersect, add; }
.spora-overview-intro::after { bottom: 0; right: 0; width: 65%; height: 85%;
  background: linear-gradient(115deg, var(--aimm-blue) 25%, var(--aimm-purple));
  --fade: radial-gradient(ellipse at bottom right, #000 0%, rgba(0, 0, 0, .5) 30%, transparent 68%);
  -webkit-mask: var(--dots), var(--fade); -webkit-mask-composite: source-in; mask: var(--dots), var(--fade); mask-composite: intersect; }
.yue .spora-overview-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; margin: .7rem 0 1rem; }
.yue .spora-overview-title { width: fit-content; font-size: clamp(3.5rem,8vw,5.5rem); font-weight: 600; letter-spacing: -.075em; line-height: 1.05; color: var(--spora-blue); }
@supports (background-clip: text) {
  .yue .spora-overview-title { background: linear-gradient(110deg,var(--spora-blue) 15%,var(--spora-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.yue .spora-overview-docs { font-size: clamp(1.3rem,2.6vw,1.9rem); font-weight: 400; letter-spacing: -.01em; color: var(--sy-c-light); }
.yue .spora-overview-intro .lead { font-size: clamp(1rem,2vw,1.18rem); line-height: 1.8; max-width: 43rem; margin-bottom: 0; color: var(--sy-c-text); }
/* Primary call to action: a flat, solid blue button. */
.yue .spora-overview-actions { margin: 1.8rem 0 0; }
.yue a.spora-cta { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.2rem; border-radius: 10px; background: var(--aimm-blue); color: #fff; font-size: .95rem; font-weight: 600; text-decoration: none; transition: background .15s; }
.yue a.spora-cta:hover { background: var(--spora-blue-dark); color: #fff; text-decoration: none; }
.yue a.spora-cta span { font-size: 1.15em; line-height: 1; }
/* Group logo in its own colours, EPFL logo in black. */
.yue .spora-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.5rem; margin: 2.2rem 0 0; }
.yue .spora-logos img { display: block; width: auto; margin: 0; border: 0; }
.spora-logos .spora-logo-group { height: 40px; }
.spora-logos .spora-logo-epfl { height: 26px; filter: brightness(0); }
/* The data -> io -> bench flow: one step box under each component card. */
.yue .spora-landing-flow-lead { max-width: 44rem; margin: 2rem 0 0; font-size: 1rem; line-height: 1.75; color: var(--sy-c-light); }
.yue ol.spora-landing-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.yue ol.spora-landing-flow > li { display: block; position: relative; margin: 0; padding: .85rem 1.1rem; border: 1px solid var(--spora-glass-line); border-radius: 12px; background: var(--spora-glass); font-size: .9rem; line-height: 1.5; color: var(--sy-c-text); }
.yue ol.spora-landing-flow > li:nth-child(1) { --component-ink: var(--spora-green); }
.yue ol.spora-landing-flow > li:nth-child(2) { --component-ink: var(--spora-blue); }
.yue ol.spora-landing-flow > li:nth-child(3) { --component-ink: var(--spora-purple); }
.spora-landing-flow-step { display: block; margin-bottom: .2rem; font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--component-ink); }
.yue ol.spora-landing-flow > li + li::before { content: "→"; position: absolute; left: -1.5rem; top: 50%; width: 1.5rem; transform: translateY(-50%); text-align: center; color: var(--sy-c-light); }
@media (max-width: 767px) {
  .yue ol.spora-landing-flow { grid-template-columns: 1fr; gap: 1.25rem; }
  .yue ol.spora-landing-flow > li + li::before { content: "↓"; left: 0; right: 0; top: -1.25rem; width: auto; transform: none; line-height: 1.25rem; }
}
/* Ecosystem cards: grey outline like the intro box, coloured titles, and only the
   footer link is clickable. */
.components .sd-row > :nth-child(1) { --component-ink: var(--spora-green); }
.components .sd-row > :nth-child(2) { --component-ink: var(--spora-blue); }
.components .sd-row > :nth-child(3) { --component-ink: var(--spora-purple); }
.yue .components .sd-card { background: var(--sy-c-background); border-color: var(--spora-glass-line); }
.yue .components .sd-card-title { color: var(--component-ink); }
.yue .components .sd-card-text { color: var(--sy-c-text); }
.yue .components .sd-card-footer p { margin: 0; }
.yue a.spora-card-link { display: inline-flex; align-items: center; gap: .35rem; vertical-align: top; color: var(--sy-c-heading); font-weight: 550; text-decoration: none; }
.yue a.spora-card-link:hover { color: var(--spora-blue); text-decoration: none; }
.spora-card-link .spora-card-logo { width: 16px; height: 16px; margin: 0 .15rem 0 0; border: 0; border-radius: 2px; }

@media (max-width: 767px) {
  :root { --sy-s-navbar-height: 64px; }
  .spora-site-header .sy-head-inner { padding-left: 1.2rem; padding-right: 1rem; }
  .spora-site-header .sy-head-nav { background: var(--sy-c-background-dropback); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); padding: 5.5rem 1.5rem 1.5rem; }
  .spora-site-header .sy-head-links > ul { display: grid; gap: .5rem; }
  .spora-site-header .sy-head-links .link { margin: 0; }
  .spora-site-header .sy-head-links .link > a { display: flex; align-items: center; gap: .4rem; padding: 1rem; font-size: .95rem; border: 1px solid var(--spora-glass-line); border-radius: 12px; background: var(--spora-glass); color: var(--sy-c-text); }
  .spora-site-header .sy-head-links .link.active > a { color: var(--sy-c-link); background: var(--accent-a3); }
  .spora-site-header .sy-head-extra .spora-search { position: absolute; top: 1.5rem; left: 1.5rem; right: 1.5rem; width: auto; }
  .spora-site-header .spora-search input { font-size: 1rem; }
  .spora-site-header .sy-head-extra { padding: 1.5rem 0; }
  .sy-breadcrumbs ol { font-size: .75rem; }
  .spora-overview-intro::after { width: 70%; height: 20%; }
  .spora-stats { grid-template-columns: 1fr 1fr; }
  .spora-stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .yue .spora-hero { --hero-r: 18px; padding: 1.6rem; }
  .yue .spora-hero-title { font-size: clamp(2.6rem,10vw,3.4rem); }
  .yue .spora-hero-lead { font-size: .98rem; }
  .spora-hero-actions { gap: .5rem; }
  .yue a.spora-btn { padding: .65rem .8rem; font-size: .8rem; }
  .yue ol.spora-flow { display: grid; grid-template-columns: 1fr; gap: .5rem; margin-top: 1.8rem; }
  .yue ol.spora-flow > li { display: block; }
  .yue ol.spora-flow > li + li::before { display: none; }
  .spora-flow .step { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: .8rem; padding: .65rem .8rem; }
  .spora-hub .yue h2 { margin-top: 2.8rem; font-size: 1.4rem; }
  .spora-hub .yue .section-lead { font-size: .94rem; }
}
@media (prefers-reduced-motion: reduce) { .yue .sd-card, .yue a.spora-feature, .yue a.spora-btn { transition: none; } }
@media print { body, .yue .sd-card, .yue a.spora-feature, .spora-overview-intro { background: white; box-shadow: none; backdrop-filter: none; } }
@media print, (forced-colors: active) { .yue .spora-overview-title { background: none; color: CanvasText; } .spora-overview-intro::before, .spora-overview-intro::after { display: none; } }

/* Stack the small ecosystem controls before they begin wrapping awkwardly. */
@media (min-width: 768px) and (max-width: 1100px) {
  .yue ol.spora-flow { display: grid; grid-template-columns: 1fr; gap: .5rem; }
  .yue ol.spora-flow > li { display: block; }
  .yue ol.spora-flow > li + li::before { display: none; }
  .spora-flow .step { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* spora [data] charts (rendered from source/shared/data/*.csv by source/shared/data_charts.py): tissue origins on the
   left, technology and H&E pairing stacked on the right, in the same white cards as the
   features. Bars are thin with 4px rounded data ends; stacked segments sit 2px apart. */
.spora-data-charts { --spora-indigo: color-mix(in srgb, var(--aimm-navy) 50%, var(--aimm-blue));
  --spora-unimodal: color-mix(in srgb, var(--aimm-light-blue) 75%, #fff);
  --spora-matched: color-mix(in srgb, var(--aimm-purple) 60%, #fff);
  --chart-grid: color-mix(in srgb, var(--aimm-light-blue) 30%, #fff);
  display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0 0; }
/* Side by side when the column has room (about 47rem), stacked otherwise. */
.yue .spora-chart-tissue { flex: 1.2 1 25rem; min-width: 0; }
.spora-chart-side { flex: 1 1 21rem; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.spora-chart-side .spora-chart { flex: 1; }
.yue .spora-chart { display: flex; box-sizing: border-box; flex-direction: column; margin: 0; padding: 1.4rem 1.5rem 1.5rem; background: #fff; border: 1px solid var(--spora-glass-line); border-radius: 15px; box-shadow: inset 0 1px var(--spora-inset), 0 6px 22px -15px rgba(26, 37, 75, .18); }
.yue .spora-chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .15rem 1rem; margin: 0 0 1.1rem; }
.spora-chart-title { font-size: 1rem; font-weight: 600; letter-spacing: -.02em; color: var(--sy-c-heading); }
.spora-chart-sub { font-size: .78rem; color: var(--sy-c-light); }

/* Tissue origin: label | bar with the value at its tip. The plot keeps 4.2rem on the
   right for the largest value; gridlines and tick labels share the plot's extent. */
.spora-chart-bars { --label-w: 6.9rem; --value-w: 4.2rem; position: relative; flex: 1; display: flex; flex-direction: column; padding-bottom: 1.4rem; }
.yue .spora-chart-bars ol { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.yue .spora-chart-bars li { position: relative; display: grid; grid-template-columns: var(--label-w) 1fr; align-items: center; min-height: 1.6rem; margin: 0; padding: 0 var(--value-w) 0 0; font-size: .8rem; line-height: 1.2; }
.spora-chart-bars .label { padding-right: .7rem; color: var(--sy-c-text); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spora-chart-bars .bar { display: block; height: 12px; width: calc(var(--w) * 1%); border-radius: 0 4px 4px 0; background: var(--aimm-blue); transform-origin: left center; transition: background .15s; }
.spora-chart-bars .value { position: absolute; left: calc(var(--label-w) + (100% - var(--label-w) - var(--value-w)) * var(--w) / 100 + .45rem); color: var(--sy-c-light); font-size: .74rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.spora-chart-bars li:hover .bar { background: var(--spora-blue-dark); }
.spora-chart-bars li:hover .value { color: var(--sy-c-heading); }
.spora-chart-grid { position: absolute; top: 0; bottom: 0; left: var(--label-w); right: var(--value-w); pointer-events: none; }
/* Each tick is a zero-width column: its line runs down the plot, its label is centred
   below. The first tick (100) is the baseline. */
.spora-chart-grid span::before { content: ""; position: absolute; top: 0; bottom: 1.4rem; left: 0; border-left: 1px solid var(--chart-grid); }
.spora-chart-grid span:first-child::before { border-left-color: var(--sy-c-border); }
.spora-chart-grid span { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 1%); width: 0; display: flex; justify-content: center; align-items: flex-end; font-size: .68rem; line-height: 1; color: var(--sy-c-light); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Technology and pairing: one 100% bar, then a legend in the same order. */
.spora-chart-share { justify-content: flex-start; }
.spora-stack { display: flex; gap: 2px; height: 28px; }
.spora-stack .seg { min-width: 3px; background: var(--c); transform-origin: left center; transition: filter .15s; }
.spora-stack .seg:first-child { border-radius: 6px 0 0 6px; }
.spora-stack .seg:last-child { border-radius: 0 6px 6px 0; }
.spora-stack .seg:hover { filter: brightness(1.08) saturate(1.1); }
.spora-stack-group { position: relative; padding-top: 1.55rem; }
.spora-bracket-line { position: absolute; top: 0; left: calc(var(--start) * 1% + 2px); right: 0; height: 1.55rem; }
.spora-bracket-line::before { content: ""; position: absolute; left: 0; right: 0; bottom: .45rem; height: .35rem; border: 1px solid var(--sy-c-light); border-bottom: 0; border-radius: 4px 4px 0 0; }
.spora-bracket-line > span { position: absolute; right: 0; bottom: .85rem; font-size: .74rem; color: var(--sy-c-text); white-space: nowrap; background: #fff; padding-left: .4rem; line-height: 1; }
/* The legend doubles as the table: one row per segment, value right-aligned. */
.yue .spora-chart-legend { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.yue .spora-chart-legend li { display: flex; align-items: center; gap: .55rem; margin: 0; padding: .42rem 0; border-top: 1px solid var(--chart-grid); font-size: .82rem; line-height: 1.3; color: var(--sy-c-text); }
.yue .spora-chart-legend li:first-child { border-top: 0; }
.spora-chart-legend li::before { content: ""; flex: none; width: .7rem; height: .7rem; border-radius: 3px; background: var(--c); }
.yue .spora-chart-legend li.sub { padding-left: 1.25rem; }
.spora-chart-legend b { margin-left: auto; }
.spora-chart-legend b, .spora-bracket-line b { font-weight: 600; color: var(--sy-c-heading); font-variant-numeric: tabular-nums; }

.yue p.spora-chart-note { margin-top: .9rem; font-size: .82rem; line-height: 1.6; color: var(--sy-c-light); }

/* Tooltip, positioned by spora.js. */
.spora-chart-tip { position: fixed; z-index: 60; pointer-events: none; padding: .45rem .65rem; border: 1px solid var(--spora-glass-line); border-radius: 9px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 24px -12px rgba(26, 37, 75, .35); font-size: .76rem; line-height: 1.45; color: var(--sy-c-text); opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.spora-chart-tip.is-on { opacity: 1; transform: none; }
.spora-chart-tip b { display: block; font-weight: 600; color: var(--sy-c-heading); }

/* Entrance: bars and segments grow from the baseline once the charts scroll into view.
   spora.js adds .is-pending; without JavaScript, or with reduced motion, they stay drawn. */
.spora-data-charts.is-pending :is(.bar, .seg) { transform: scaleX(0); }
.spora-data-charts :is(.bar, .seg) { transition: transform 1.05s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 68ms), background .15s, filter .15s; }
.spora-data-charts.is-pending .value, .spora-data-charts.is-pending .spora-bracket-line { opacity: 0; }
.spora-data-charts :is(.value, .spora-bracket-line) { transition: opacity .6s ease .68s; }
@media (prefers-reduced-motion: reduce) { .spora-data-charts :is(.bar, .seg, .value, .spora-bracket-line) { transition: none; } }

@media (max-width: 480px) {
  .yue .spora-chart { padding: 1.15rem 1rem 1.25rem; }
  .spora-chart-bars { --label-w: 5.9rem; --value-w: 3.6rem; }
  .yue .spora-chart-bars li { font-size: .74rem; }
  .spora-chart-bars .label { white-space: normal; overflow: visible; }
}

/* The spora wordmark (header, landing title, io and bench heroes, sidebar title) in
   Ruda ExtraBold, as in the original logo. */
.spora-site-header .spora-brand strong, .yue .spora-overview-title, .yue .spora-hero-title,
.yue .spora-hero-title .spora-bracket, .spora-project-title, .spora-project-title .spora-bracket {
  font-family: "Ruda", var(--sy-f-heading), sans-serif; font-weight: 800; letter-spacing: -.02em; }