/* spora additions to the Shibuya theme, shared by the landing page and the io and
   bench docs. The rules below use theme variables, so they follow the colour mode. */

/* Ruda ExtraBold for the spora wordmark, as in the original logo (SIL Open Font
   License, see fonts/Ruda-OFL.txt). Latin subset only. */
@font-face {
  font-family: "Ruda"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fonts/ruda-800-latin.woff2") format("woff2");
}

/* Colours: the AIMM lab palette. Every colour on the site is one of the six --aimm-*
   values or a mix of them; nothing else is hard-coded. Blue is the primary colour,
   green and purple the secondary ones (spora [data] and spora [bench]), gold, navy,
   and light blue fill the remaining roles. Green is used as is, also for text; gold
   is darkened for text (code strings). */
:root {
  --aimm-blue: #3B65CD; --aimm-green: #3BC98F; --aimm-purple: #6C3483;
  --aimm-gold: #E1A95F; --aimm-navy: #1A254B; --aimm-light-blue: #A7BED3;

  /* Text inks. */
  --spora-blue: var(--aimm-blue);
  --spora-blue-dark: color-mix(in srgb, var(--aimm-blue) 75%, var(--aimm-navy));
  --spora-green: var(--aimm-green);
  --spora-purple: var(--aimm-purple);
  --spora-gold: color-mix(in srgb, var(--aimm-gold) 60%, #000);
  /* Washes for tinted light surfaces. */
  --spora-blue-wash: color-mix(in srgb, var(--aimm-blue) 9%, #fff);
  --spora-green-wash: color-mix(in srgb, var(--aimm-green) 12%, #fff);
  --spora-purple-wash: color-mix(in srgb, var(--aimm-purple) 9%, #fff);
  /* Light tints and surfaces for the dark hero and bench task cards. */
  --spora-blue-light: color-mix(in srgb, var(--aimm-blue) 55%, #fff);
  --spora-green-light: color-mix(in srgb, var(--aimm-green) 70%, #fff);
  --spora-purple-light: color-mix(in srgb, var(--aimm-purple) 45%, #fff);
  --spora-on-dark: color-mix(in srgb, var(--aimm-light-blue) 35%, #fff);
  --spora-navy-deep: color-mix(in srgb, var(--aimm-navy) 70%, #000);
  --spora-navy-line: color-mix(in srgb, var(--aimm-navy) 70%, var(--aimm-light-blue));
}

/* Light mode. Neutrals are tints of navy (text) and light blue (surfaces, borders).
   Accent steps follow the Radix scale Shibuya uses: 1-8 are tints of the blue,
   9 solid, 10 hover, 11 text, 12 high contrast. The site is always in light mode. */
html:not(.dark) {
  --sy-c-background: color-mix(in srgb, var(--aimm-light-blue) 6%, #fff);
  --sy-c-surface: color-mix(in srgb, var(--aimm-light-blue) 18%, #fff);
  --sy-c-heading: var(--aimm-navy); --sy-c-bold: var(--aimm-navy);
  --sy-c-text: color-mix(in srgb, var(--aimm-navy) 82%, #fff);
  --sy-c-light: color-mix(in srgb, var(--aimm-navy) 68%, #fff);
  --sy-c-border: color-mix(in srgb, var(--aimm-light-blue) 45%, #fff);
  --sy-c-divider: color-mix(in srgb, var(--aimm-light-blue) 32%, #fff);
  --sy-c-link: var(--spora-blue); --sy-c-link-hover: var(--spora-blue-dark);
  --sy-c-foot-background: color-mix(in srgb, var(--aimm-light-blue) 12%, #fff);
  --sy-c-background-dropback: color-mix(in srgb, var(--sy-c-background) 86%, transparent);

  --accent-1: color-mix(in srgb, var(--aimm-blue) 3%, #fff);
  --accent-2: color-mix(in srgb, var(--aimm-blue) 6%, #fff);
  --accent-3: color-mix(in srgb, var(--aimm-blue) 11%, #fff);
  --accent-4: color-mix(in srgb, var(--aimm-blue) 16%, #fff);
  --accent-5: color-mix(in srgb, var(--aimm-blue) 24%, #fff);
  --accent-6: color-mix(in srgb, var(--aimm-blue) 34%, #fff);
  --accent-7: color-mix(in srgb, var(--aimm-blue) 48%, #fff);
  --accent-8: color-mix(in srgb, var(--aimm-blue) 70%, #fff);
  --accent-9: var(--aimm-blue); --accent-10: var(--spora-blue-dark);
  --accent-11: var(--aimm-blue); --accent-12: var(--aimm-navy);
  --accent-a1: color-mix(in srgb, var(--aimm-blue) 2%, transparent);
  --accent-a2: color-mix(in srgb, var(--aimm-blue) 5%, transparent);
  --accent-a3: color-mix(in srgb, var(--aimm-blue) 9%, transparent);
  --accent-a4: color-mix(in srgb, var(--aimm-blue) 14%, transparent);
  --accent-a5: color-mix(in srgb, var(--aimm-blue) 22%, transparent);
  --accent-a6: color-mix(in srgb, var(--aimm-blue) 30%, transparent);
  --accent-a7: color-mix(in srgb, var(--aimm-blue) 40%, transparent);
  --accent-a8: color-mix(in srgb, var(--aimm-blue) 55%, transparent);
  --accent-a9: var(--aimm-blue); --accent-a10: var(--spora-blue-dark);
  --accent-a11: var(--aimm-blue); --accent-a12: var(--aimm-navy);
  --accent-contrast: #fff;
  --color-surface-accent: var(--spora-blue-wash);

  --yue-c-link-1: var(--sy-c-link); --yue-c-link-2: var(--sy-c-link-hover);
  --yue-c-code-text: var(--aimm-navy);
  --yue-c-code-background: var(--sy-c-surface); --yue-c-th-background: var(--sy-c-surface);
  --yue-c-table-border: var(--sy-c-border); --yue-c-th-border: var(--sy-c-border); --yue-c-td-border: var(--sy-c-divider);

  /* Glass surfaces, code boxes, file trees, and model chips. */
  --spora-glass: rgba(255, 255, 255, .76);
  --spora-glass-line: color-mix(in srgb, var(--aimm-light-blue) 55%, transparent);
  --spora-inset: rgba(255, 255, 255, .95); --spora-nav-active: var(--aimm-blue);
  --spora-code-bg: color-mix(in srgb, var(--aimm-light-blue) 14%, #fff);
  --spora-code-border: color-mix(in srgb, var(--aimm-light-blue) 38%, #fff);
  --spora-tree-line: color-mix(in srgb, var(--aimm-light-blue) 60%, #fff);
  --spora-chip-bg: var(--spora-blue-wash); --spora-chip-text: var(--spora-blue-dark);

  /* Syntax: blue keywords, green modules and classes, dark blue functions and
     builtins, gold strings, purple numbers, and muted navy comments. */
  --spora-syn-text: var(--sy-c-text); --spora-syn-punct: var(--sy-c-light);
  --spora-syn-keyword: var(--spora-blue); --spora-syn-module: var(--spora-green);
  --spora-syn-builtin: var(--spora-blue-dark); --spora-syn-string: var(--spora-gold);
  --spora-syn-escape: color-mix(in srgb, var(--aimm-gold) 45%, #000);
  --spora-syn-number: var(--spora-purple); --spora-syn-comment: var(--sy-c-light);
}
html:not(.dark) .yue a:not(.sd-btn):not(.sd-stretched-link) { text-decoration: none; }
html:not(.dark) .yue a:not(.sd-btn):hover { text-decoration: underline; }
html:not(.dark) .admonition { --color-1: var(--sy-c-surface); --color-2: var(--accent-3); --color-3: var(--accent-9); --color-4: var(--accent-10); }
html:not(.dark) .globaltoc li.current > a { background: var(--accent-3); color: var(--accent-10); font-weight: 650; border-radius: 3px; }
html:not(.dark) .sy-foot { border-top: 1px solid var(--sy-c-divider); }
a:focus-visible { outline: 3px solid var(--accent-9); outline-offset: 4px; }

/* Header project links as outlined buttons; the active project is filled. */
@media (min-width: 768px) {
  .sy-head-links .link > a { margin-left: 0.5rem; padding: 0.35rem 0.9rem; font-size: 0.875rem; font-weight: 600; border: 1px solid var(--accent-7); border-radius: 4px; }
  html:not(.dark) .sy-head-links .link > a { color: var(--sy-c-text); border-color: var(--sy-c-border); background: #fff; }
  .sy-head-links .link > a:hover { color: var(--accent-11); border-color: var(--accent-9); }
  .sy-head-links .link.active > a, html:not(.dark) .sy-head-links .link.active > a { color: var(--accent-contrast); background: var(--accent-9); border-color: var(--accent-9); }
}

/* Header: the active project and the brand. */
.spora-brand strong { font-size: 1.35rem; letter-spacing: -0.04em; }
.sy-head-links .link.active > a { color: var(--accent-11); font-weight: 600; }  /* mobile menu */

/* Project title above the sidebar navigation. */
.spora-project { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--sy-c-divider); }
.spora-project-title { display: block; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.04em; color: var(--sy-c-heading); }
.yue h1 { letter-spacing: -0.04em; }
.spora-project-title span, .yue h1 .bracket { color: var(--accent-11); font-weight: 450; }
.spora-project-repo { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.25rem; font-size: 0.85rem; color: var(--sy-c-light); }
.spora-project-repo:hover { color: var(--accent-11); }
.spora-project-repo i { width: 0.8rem; height: 0.8rem; }

/* Index pages: lead paragraph and action buttons. */
.yue .lead { font-size: 1.2rem; line-height: 1.6; color: var(--sy-c-light); max-width: 46rem; }
.yue .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 2rem; }
.yue .actions p { margin: 0; }
.yue .sd-btn { text-decoration: none; }
.yue .sd-card-title { color: var(--accent-11); }
.yue .sd-card-text { color: var(--sy-c-light); font-size: 0.95rem; }

/* Landing page. */
.yue .eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-11); margin: 0; }
.yue .paper-line { font-size: 0.9rem; color: var(--sy-c-light); margin-bottom: 2.5rem; }
.yue .flow { padding: 1.25rem 1.5rem; background: var(--sy-c-surface); border: 1px solid var(--sy-c-border); border-radius: 6px; }
.yue figure img { border: 1px solid var(--sy-c-border); border-radius: 6px; }
.yue figcaption { font-size: 0.85rem; color: var(--sy-c-light); }

/* Overall layout: smoother type, tighter headings, rounder surfaces. */
/* Wider pages: the theme caps the page (header, sidebars, content) at 90rem; on wide
   screens the extra room goes to the content, which keeps the theme's 72rem limit. */
.sy-container { max-width: 110rem; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.yue h2 { font-weight: 700; letter-spacing: -0.02em; }
.yue h3 { font-weight: 650; letter-spacing: -0.01em; }
.yue .sd-btn { border-radius: 6px; padding: 0.45rem 1.1rem; font-weight: 600; }
.yue :not(pre) > code { padding: 0.1em 0.35em; border-radius: 4px; }
.yue table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--sy-c-border); border-radius: 6px; overflow: hidden; }
.yue .admonition { border-radius: 6px; }
.globaltoc li > a { border-radius: 6px; }

/* Gallery boxes: the landing-page card style for every grid card. */
.yue .sd-card { border: 1px solid var(--sy-c-border); border-top: 3px solid var(--accent-9); border-radius: 8px;
  box-shadow: 0 1px 2px rgba(26, 37, 75, 0.05); transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s; }
.yue .sd-card-hover:hover { transform: translateY(-2px); border-color: var(--accent-7); border-top-color: var(--accent-9);
  box-shadow: 0 6px 18px rgba(26, 37, 75, 0.1); }
.yue .sd-card-footer { font-size: 0.9rem; font-weight: 600; color: var(--accent-11); border-top-color: var(--sy-c-border); }

/* Source code boxes: light background with a coloured edge on the left. API
   signatures are coloured by object type. */
.yue .highlight pre { background: var(--spora-code-bg); border: 1px solid var(--spora-code-border);
  border-left: 3px solid var(--accent-9); border-radius: 4px; }
dt.sig { --spora-sig-edge: var(--accent-9);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.9rem; font-weight: 400; line-height: 1.85;
  background: var(--spora-code-bg); border: 1px solid var(--spora-code-border); border-left: 3px solid var(--spora-sig-edge);
  border-radius: 4px; padding: 0.75rem 1.25rem 0.75rem 3.65rem; margin-bottom: 0.75rem;
  overflow-wrap: anywhere; scroll-margin-top: calc(var(--sy-s-navbar-height) + 1.5rem); }
dt.sig:hover { background: var(--spora-code-bg); }
dl.py.method > dt.sig, dl.py.function > dt.sig { --spora-sig-edge: var(--aimm-purple); }
dl.py.attribute > dt.sig, dl.py.property > dt.sig, dl.py.data > dt.sig { --spora-sig-edge: var(--aimm-green); }
dl.py.exception > dt.sig { --spora-sig-edge: var(--aimm-gold); }
dl.py.class > dt.sig { --spora-sig-edge: var(--accent-9); }

/* Syntax colours, shared by code blocks and API signatures, from the spora_bright
   palette: blue-violet keywords and operators, mint module and class names, blue
   builtins, coral strings, indigo numbers, and slate comments. Keywords, module names,
   and builtins are bold in both colour modes. The "html" prefix outranks Shibuya's
   pygments rules. */
.yue .highlight pre { font-size: 0.9rem; line-height: 1.85; padding: 1.25rem 1.5rem; color: var(--spora-syn-text); }
html .yue .highlight :is(.n, .nv, .na, .ni, .nl, .nt, .nx, .py, .w) { color: var(--spora-syn-text); }
html .yue .highlight .p { color: var(--spora-syn-punct); }
html .yue .highlight :is(.k, .kd, .kn, .kp, .kr, .kt, .ow) { color: var(--spora-syn-keyword); font-weight: 700; }
html .yue .highlight .o { color: var(--spora-syn-keyword); }
html .yue .highlight :is(.nn, .nc) { color: var(--spora-syn-module); font-weight: 700; }
html .yue .highlight :is(.nd, .ne) { color: var(--spora-syn-module); }
html .yue .highlight :is(.nf, .fm) { color: var(--spora-syn-builtin); }
html .yue .highlight :is(.nb, .bp) { color: var(--spora-syn-builtin); font-weight: 700; }
html .yue .highlight :is(.s, .s1, .s2, .sa, .sb, .sc, .sd, .dl, .sh, .sx, .sr, .ss) { color: var(--spora-syn-string); }
html .yue .highlight :is(.se, .si) { color: var(--spora-syn-escape); }
html .yue .highlight :is(.m, .mb, .mf, .mh, .mi, .mo, .il, .kc) { color: var(--spora-syn-number); }
html .yue .highlight :is(.c, .c1, .ch, .cm, .cp, .cpf, .cs) { color: var(--spora-syn-comment); font-style: italic; }
html .yue .highlight :is(.gp, .go) { color: var(--spora-syn-comment); }
html .yue .highlight .err { color: inherit; background: none; border: 0; }

/* API signatures in the same colours. Default values are all blue, since the markup
   does not distinguish strings from numbers. */
dt.sig { color: var(--spora-syn-punct); }
dt.sig .sig-param { font-style: normal; }
dt.sig .property, dt.sig .o { color: var(--spora-syn-keyword); }
dt.sig .property .k { color: var(--spora-syn-keyword); font-weight: 700; }
dt.sig .sig-prename { color: var(--spora-syn-module); }
dt.sig .sig-name { color: var(--spora-syn-text); font-weight: 700; }
:is(dl.py.class, dl.py.exception) > dt.sig .sig-name { color: var(--spora-syn-module); }
:is(dl.py.method, dl.py.function) > dt.sig .sig-name { color: var(--spora-syn-builtin); }
dt.sig .sig-param .n { color: var(--spora-syn-text); }
dt.sig .default_value { color: var(--spora-syn-number); }

/* Signature permalink: a pilcrow after the signature. The hanging indent of dt.sig
   would otherwise pull the inline-block link back over the text. */
dt.sig a.headerlink { text-indent: 0; margin-left: 0.5rem; font-size: 0; vertical-align: baseline; }
dt.sig a.headerlink::after { content: "¶"; font-size: 0.9rem; font-family: var(--sy-f-text); }

/* API fields (Parameters, Returns, Raises): a label column and rows separated by grey
   lines; parameter names as code chips, types in the default-value colour. */
dl.py dd > dl.field-list { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); margin: 1.25rem 0 1.75rem; }
dl.py dd > dl.field-list > dt, dl.py dd > dl.field-list > dd { margin: 0; padding: 0.85rem 0; border-top: 1px solid var(--sy-c-divider); }
dl.py dd > dl.field-list > dt { padding-right: 1rem; font-size: 0.9rem; font-weight: 650; text-transform: none; color: var(--sy-c-heading); }
dl.py dd > dl.field-list > dt .colon { display: none; }
dl.py dd > dl.field-list > dd p { margin: 0; }
dl.py dd > dl.field-list > dd ul { list-style: none; margin: 0; padding: 0; }
dl.py dd > dl.field-list > dd li { margin: 0; padding: 0; }
dl.py dd > dl.field-list > dd li + li { margin-top: 0.7rem; }
dl.py dd > dl.field-list > dd :is(p, li > p) > strong { font-family: var(--sy-f-mono); font-size: 0.85rem; font-weight: 700;
  color: var(--spora-chip-text); background: var(--spora-chip-bg); border-radius: 4px; padding: 0.15em 0.45em; }
dl.py dd > dl.field-list > dd em, dl.py dd > dl.field-list > dd a > strong { font-family: var(--sy-f-mono); font-size: 0.85rem;
  font-style: normal; font-weight: 400; color: var(--spora-syn-number); }

/* "On this page": one line per entry; long member names end in an ellipsis instead
   of wrapping or scrolling sideways. */
.sy-rside .sy-scrollbar { overflow-x: hidden; }
.localtoc a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sy-rside .localtoc > ul { font-size: 0.85rem; }
/* API pages list members as <code>; show them like the plain entries of text pages. */
.sy-rside .localtoc code { font: inherit; color: inherit; background: none; padding: 0; border-radius: 0; }
/* "On this page" heading in the style of the sidebar captions (GET STARTED, ...). */
.sy-rside-inner > div.localtoc > h3 { font-size: 0.86rem; font-weight: 500; font-family: var(--sy-f-heading);
  color: var(--sy-c-light); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 0.6rem; }

/* File trees (file-tree directive): bold mint folders with a solid folder icon, files
   with an outline icon, notes in grey italics, and guide lines between levels. */
.yue .spora-tree { margin: 1rem 0 1.5rem; padding: 1rem 1.25rem; overflow-x: auto; font-family: var(--sy-f-mono);
  font-size: 0.85rem; line-height: 1.9; color: var(--spora-syn-text); background: var(--spora-code-bg);
  border: 1px solid var(--spora-code-border); border-left: 3px solid var(--accent-9); border-radius: 4px; }
.yue .spora-tree ul { list-style: none; margin: 0; padding: 0; }
.yue .spora-tree li { position: relative; margin: 0; padding: 0; white-space: nowrap; }
.yue .spora-tree ul ul { margin-left: 0.45rem; }
.yue .spora-tree ul ul > li { padding-left: 1.3rem; }
.yue .spora-tree ul ul > li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1px solid var(--spora-tree-line); }
.yue .spora-tree ul ul > li:last-child::before { bottom: auto; height: 0.95em; }
.yue .spora-tree ul ul > li::after { content: ""; position: absolute; left: 0; top: 0.95em; width: 0.95rem; border-top: 1px solid var(--spora-tree-line); }
.yue .spora-tree .name::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.45em;
  vertical-align: -0.15em; background-color: currentColor; -webkit-mask: var(--spora-tree-icon) no-repeat center / contain; mask: var(--spora-tree-icon) no-repeat center / contain; }
.yue .spora-tree .dir > .name { font-weight: 700; color: var(--spora-syn-module);
  --spora-tree-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E"); }
.yue .spora-tree .file > .name { color: var(--spora-syn-text);
  --spora-tree-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E"); }
.yue .spora-tree .file > .name::before { opacity: 0.7; }
.yue .spora-tree .ph { font-style: italic; }
.yue .spora-tree .note { margin-left: 1.5rem; font-style: italic; color: var(--spora-syn-comment); }

/* ---------------------------------------------------------------------------
   Brand: fluorescence palette and the textured brackets of the spora logos.
   --------------------------------------------------------------------------- */
/* Header brand: the "spora" wordmark. */
.spora-brand { display: inline-flex; align-items: center; }

/* Brackets filled with a multiplex image, as in the logos (sidebar project title). */
.spora-bracket { color: transparent; background: url("TMA_Lung_s0_a2_ac.jpg") 30% 45% / 320px auto;
  -webkit-background-clip: text; background-clip: text; }
.spora-project-title .spora-bracket { font-weight: 800; }

/* ---------------------------------------------------------------------------
   Landing pages (layout "hub"): no right sidebar, a dark hero, and colourful
   sections. The reStructuredText title stays in the page for search and the
   browser tab, but the hero shows the visible title.
   --------------------------------------------------------------------------- */
.spora-hub .yue > section > h1:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spora-hub .yue h2 { margin-top: 3.5rem; font-size: 1.7rem; letter-spacing: -0.03em; }
.spora-hub .yue h2::before { content: ""; display: block; width: 2.5rem; height: 4px; margin-bottom: 0.9rem; border-radius: 2px;
  background: linear-gradient(90deg, var(--aimm-purple), var(--aimm-green), var(--aimm-gold)); }
.spora-hub .yue h2 a.headerlink { display: none; }
.spora-hub .yue .section-lead { font-size: 1.08rem; color: var(--sy-c-light); max-width: 44rem; margin-top: -0.25rem; }

/* Hero: a light, transparent glass surface over a static, blurred multiplex image.
   The image layer extends 24px past the hero so its blur never fades at the edges;
   its own clip-path (inset by the same 24px) keeps it inside the rounded corners. */
.yue .spora-hero { --hero-r: 26px;
  position: relative; overflow: hidden; isolation: isolate; margin: 0 0 1rem; padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--hero-r); background: var(--aimm-navy); color: var(--spora-on-dark);
  box-shadow: 0 22px 55px -27px rgba(26, 37, 75, .65), inset 0 1px 1px rgba(255, 255, 255, .65), inset 0 -1px 1px rgba(167, 190, 211, .2); }
.spora-hero-image { position: absolute; inset: -24px; z-index: -3;
  background: url("TMA_Lung_s0_a2_ac.jpg") center / cover no-repeat;
  filter: blur(3px) brightness(.9) saturate(1.15);
  -webkit-clip-path: inset(24px round var(--hero-r)); clip-path: inset(24px round var(--hero-r)); }
.spora-hero-glass { position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, rgba(26, 37, 75, .56), rgba(26, 37, 75, .3) 56%, rgba(26, 37, 75, .1));
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .4), inset 1px 0 1px rgba(167, 190, 211, .25), inset 0 -1px 2px rgba(255, 255, 255, .2); }
.spora-hero-inner { position: relative; max-width: 44rem; }
.yue .spora-hero-title { margin: 0; font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.055em; color: #fff; }
.yue .spora-hero-title .spora-bracket { color: #fff; -webkit-text-fill-color: #fff; background: none; font-weight: 800; }
.yue .spora-hero-lead { text-shadow: 0 1px 12px rgba(18, 26, 53, .3); margin: 1.5rem 0 0; font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.6; color: var(--spora-on-dark); }
.yue .spora-hero-lead strong { color: #fff; font-weight: 600; }
.spora-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.yue a.spora-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.65rem 1.25rem; border-radius: 10px; font-weight: 650;
  font-size: 0.95rem; color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px); transition: transform 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s; }
.yue a.spora-btn:hover { text-decoration: none; transform: translateY(-1px); background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.5); }
.yue a.spora-btn.primary { color: #fff; background: linear-gradient(135deg, var(--aimm-purple), var(--aimm-blue)); border-color: transparent;
  box-shadow: 0 8px 24px -8px rgba(59, 101, 205, 0.6); }
.yue a.spora-btn.primary:hover { box-shadow: 0 10px 30px -8px rgba(59, 101, 205, 0.85); }

/* The data -> io -> bench flow inside the hero. */
.yue ol.spora-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin: 2.75rem 0 0; padding: 0; list-style: none; counter-reset: none; }
.yue ol.spora-flow > li { margin: 0; display: flex; align-items: center; }
.yue ol.spora-flow > li + li::before { content: ""; width: 2rem; height: 1px; margin: 0 0.35rem; background: linear-gradient(90deg, rgba(255,255,255,0.15), rgba(255,255,255,0.5)); }
.spora-flow .step { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.55rem 0.95rem; border-radius: 10px; color: var(--spora-on-dark);
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); text-decoration: none; }
.yue a.step:hover { text-decoration: none; border-color: rgba(255, 255, 255, 0.4); }
.spora-flow .step b { font-family: var(--sy-f-mono); font-size: 0.95rem; color: #fff; }
.spora-flow .step small { font-size: 0.75rem; color: var(--aimm-light-blue); }
.spora-flow .step.current { border-color: rgba(59, 201, 143, 0.7); background: rgba(59, 201, 143, 0.12); box-shadow: 0 0 24px -6px rgba(59, 201, 143, 0.6); }

/* Feature cards with a coloured icon tile each. */
.spora-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin: 1.5rem 0 0; }
.yue a.spora-feature { --c: var(--spora-purple); --g: var(--aimm-purple); position: relative; display: block; padding: 1.4rem 1.3rem 1.3rem; border-radius: 14px;
  color: var(--sy-c-text); text-decoration: none; background: var(--sy-c-background); border: 1px solid var(--sy-c-border);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; overflow: hidden; }
.yue a.spora-feature::after { content: ""; position: absolute; inset: auto -30% -60% auto; width: 12rem; height: 12rem; border-radius: 50%;
  background: var(--g); opacity: 0.08; filter: blur(30px); transition: opacity 0.2s; }
.yue a.spora-feature:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--c); box-shadow: 0 12px 30px -14px var(--g); }
.yue a.spora-feature:hover::after { opacity: 0.2; }
.spora-feature .icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: 1rem; border-radius: 10px;
  font-size: 1.25rem; color: #fff; background: linear-gradient(135deg, var(--g), var(--c)); box-shadow: 0 6px 16px -6px var(--g); }
.spora-feature .title { display: block; font-weight: 700; font-size: 1.02rem; margin-bottom: 0.35rem; color: var(--sy-c-heading); }
.spora-feature .text { display: block; font-size: 0.92rem; line-height: 1.55; color: var(--sy-c-light); }

/* Stats band. */
.spora-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1px; margin: 1.5rem 0 0; border-radius: 16px; overflow: hidden;
  background: var(--sy-c-border); border: 1px solid var(--sy-c-border); }
.spora-stats > div { padding: 1.3rem 1.2rem; background: var(--sy-c-background); }
.spora-stats b { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1;
  background: linear-gradient(120deg, var(--spora-purple), var(--spora-green) 50%, var(--spora-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.spora-stats span { display: block; margin-top: 0.3rem; font-size: 0.85rem; color: var(--sy-c-light); }

/* Three biological scales (bench). */
.spora-scales { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin: 1.5rem 0 0; }
.spora-scale { --c: var(--spora-gold); --g: var(--aimm-gold); position: relative; padding: 1.5rem 1.4rem 1.3rem; border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--g) 12%, var(--sy-c-background)), var(--sy-c-background) 60%); border: 1px solid color-mix(in srgb, var(--g) 35%, var(--sy-c-border)); }
.spora-scale.c-violet { --c: var(--spora-purple); --g: var(--aimm-purple); }
.spora-scale.c-blue { --c: var(--spora-blue); --g: var(--aimm-blue); }
.spora-scale .kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c); }
.spora-scale .title { display: block; margin: 0.3rem 0 0.5rem; font-size: 1.25rem; font-weight: 750; letter-spacing: -0.02em; color: var(--sy-c-heading); }
.spora-scale .question { font-size: 0.93rem; color: var(--sy-c-light); margin: 0 0 1rem; }
.yue .spora-scale ul { list-style: none; margin: 0; padding: 0; }
.yue .spora-scale li { margin: 0; padding: 0; }
.yue .spora-scale li a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.75rem; margin-top: 0.4rem;
  border-radius: 9px; font-size: 0.92rem; font-weight: 600; color: var(--sy-c-heading); text-decoration: none;
  background: color-mix(in srgb, var(--sy-c-background) 70%, transparent); border: 1px solid var(--sy-c-border); transition: border-color 0.15s, transform 0.15s; }
.yue .spora-scale li a::after { content: "→"; color: var(--c); }
.yue .spora-scale li a:hover { text-decoration: none; border-color: var(--c); transform: translateX(2px); }

/* Model chips (bench). */
.spora-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.25rem 1.5rem; margin: 1.5rem 0 0; }
.spora-chips .group > span { display: block; margin-bottom: 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sy-c-light); }
.spora-chips .group > div { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.spora-chips .chip { --c: var(--spora-purple); padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: var(--c);
  background: color-mix(in srgb, var(--c) 9%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.spora-chips .group:nth-child(2) .chip { --c: var(--aimm-navy); }
.spora-chips .group:nth-child(3) .chip { --c: var(--spora-gold); }
.spora-chips .group:nth-child(4) .chip { --c: var(--spora-green); }
.spora-chips .group:nth-child(5) .chip { --c: var(--spora-blue); }

/* Two-column "text + code" blocks built with sphinx-design grids. */
.spora-hub .yue .spora-split .highlight pre { box-shadow: 0 18px 40px -24px rgba(18, 26, 53, 0.45); }

/* Card grids: each card gets its own fluorescence colour on the top edge. */
.yue .sd-row > :nth-child(6n+1) .sd-card { --card-c: var(--spora-purple); }
.yue .sd-row > :nth-child(6n+2) .sd-card { --card-c: var(--spora-green); }
.yue .sd-row > :nth-child(6n+3) .sd-card { --card-c: var(--spora-gold); }
.yue .sd-row > :nth-child(6n+4) .sd-card { --card-c: var(--spora-blue); }
.yue .sd-row > :nth-child(6n+5) .sd-card { --card-c: var(--spora-blue-dark); }
.yue .sd-row > :nth-child(6n+6) .sd-card { --card-c: var(--aimm-navy); }
.yue .sd-card { border-top-color: var(--card-c, var(--accent-9)); }
.yue .sd-card-hover:hover { border-top-color: var(--card-c, var(--accent-9)); }

.yue a.spora-chips-link { display: block; padding: 1.25rem 1.4rem; margin-top: 1.5rem; border-radius: 16px; color: inherit; text-decoration: none;
  border: 1px solid var(--sy-c-border); background: var(--sy-c-background); transition: border-color 0.15s, box-shadow 0.15s; }
.yue a.spora-chips-link:hover { text-decoration: none; border-color: var(--accent-7); box-shadow: 0 12px 30px -18px rgba(18, 26, 53, 0.4); }
.yue a.spora-chips-link .spora-chips { margin: 0; }
/* Landing components are links without underlines, also on hover (the generic hover
   underline above has a higher specificity). */
html .yue :is(.spora-hero, .spora-features, .spora-scales) a:hover, html .yue a.spora-chips-link:hover { text-decoration: none !important; }

/* Bench task previews. Original scientific images stay intact. The paired images
   share one camera; cell contours are traced from the supplied segmentation mask. */
.spora-scale.spora-task {
  --task-accent: var(--spora-purple-light);
  isolation: isolate; padding: 0; background: var(--spora-navy-deep); color: #fff;
  border: 1px solid var(--spora-navy-line); box-shadow: 0 5px 18px -12px var(--spora-navy-deep);
  transition: border-color .3s, box-shadow .3s;
}
.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 30px -18px var(--spora-navy-deep); }
.spora-task:focus-visible { outline: 3px solid var(--accent-9); outline-offset: 4px; }
.spora-task-visual { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: var(--spora-navy-deep); }
.spora-task .spora-task-image {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none;
  margin: 0; object-fit: cover; object-position: center; border: 0; border-radius: 0;
}
.spora-task::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(26, 37, 75, .04) 0%, rgba(26, 37, 75, .12) 22%, rgba(26, 37, 75, .78) 39%, rgba(26, 37, 75, .95) 63%, var(--spora-navy-deep) 100%);
}
.spora-task-content { position: relative; margin-top: 205px; padding: 0 1.4rem 1.3rem; }
.spora-task .kicker { color: var(--task-accent); }
.spora-task .title { color: #fff; line-height: 1.3; }
.spora-task .question { color: var(--spora-on-dark); line-height: 1.6; }
.yue .spora-task li a { color: #fff; background: rgba(26, 37, 75, .88); border-color: var(--spora-navy-line); font-size: .86rem; }
.yue .spora-task li a::after { color: var(--task-accent); }
.yue .spora-task li a:hover, .yue .spora-task li a:focus-visible { border-color: var(--task-accent); background: var(--aimm-navy); }
.spora-task-cue {
  position: absolute; top: 1rem; left: 1rem; max-width: calc(100% - 2rem); padding: .35rem .65rem;
  border: 1px solid rgba(167, 190, 211, .3); border-radius: 999px;
  background: rgba(26, 37, 75, .78); color: var(--spora-on-dark);
  font: 500 .65rem/1.4 var(--sy-f-mono); letter-spacing: .025em; pointer-events: none;
}
.spora-cue-active { display: none; }
.spora-task.is-active .spora-cue-idle { display: none; }
.spora-task.is-active .spora-cue-active { display: inline; }

/* Cell: a wider camera makes cells smaller. Image and traced vector contours
   share one SVG coordinate frame. JS schedules small, overlapping groups of cells. */
.spora-segmentation-visual { isolation: isolate; }
.spora-segmentation-plane { position: absolute; top: 0; left: 50%; width: max(100%, 420px); aspect-ratio: 1; transform: translateX(-50%); }
.spora-segmentation-scene { display: block; width: 100%; height: 100%; }
.spora-cell-contours { fill: none; stroke: var(--spora-on-dark); stroke-width: 1.05; }
.spora-cell { vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.spora-task-segmentation.is-active .spora-cell.is-visible { animation: spora-cell-trace .48s ease-in-out var(--cell-delay, 0s) both; }
@keyframes spora-cell-trace { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: .85; } 100% { stroke-dashoffset: 0; opacity: .85; } }

/* Subcellular: the H&E field stays sharp at rest. On hover, a brief softening
   precedes multiplex emerging in feathered regions. There is no independent
   image transform: both modalities have identical image bounds and crop. */
/* Fade the whole paired-image plane, so H&E and multiplex share the same soft
   lower edge and neither exposes the rectangular end of the original image. */
.spora-staining-plane { position: absolute; top: 0; left: 50%; width: max(100%, 580px); aspect-ratio: 2048 / 1214; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0, 0, 0, .92) 52%, rgba(0, 0, 0, .55) 70%, rgba(0, 0, 0, .12) 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0, 0, 0, .92) 52%, rgba(0, 0, 0, .55) 70%, rgba(0, 0, 0, .12) 88%, transparent 100%);
}
.spora-staining-pair { display: block; width: 100%; height: 100%; }
.spora-staining-he { filter: none; }
.spora-staining-regions, .spora-staining-complete { opacity: 0; }
.spora-stain-region { transform-box: fill-box; transform-origin: center; transform: scale(.015); opacity: 0; }
.spora-task-staining.is-active .spora-staining-he { animation: spora-he-soften 6.8s ease both; }
.spora-task-staining.is-active .spora-staining-regions { opacity: 1; }
.spora-task-staining.is-active .spora-stain-region { animation: spora-region-reveal var(--duration) cubic-bezier(.18, .6, .35, 1) var(--delay) both; }
.spora-task-staining.is-active .spora-staining-complete { animation: spora-clear-image 1.2s ease 5.6s both; }
@keyframes spora-he-soften { 0% { filter: blur(0); } 20%, 65% { filter: blur(4px); } 100% { filter: blur(0); } }
@keyframes spora-region-reveal { from { transform: scale(.015); opacity: 0; } 15% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
@keyframes spora-clear-image { from { opacity: 0; } to { opacity: 1; } }

/* Tissue: a single scan traverses the specimen, followed by staggered region
   brackets and a subtle attention glow. An illustrative motif, not model output. */
.spora-pathology-grid {
  position: absolute; inset: 0 0 auto; height: 205px; opacity: 0;
  background-image: linear-gradient(rgba(59, 201, 143, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 201, 143, .16) 1px, transparent 1px);
  background-size: 20% 20%; transition: opacity .7s;
}
.spora-task-pathology.is-active .spora-pathology-grid { opacity: .7; }
.spora-pathology-scan {
  position: absolute; inset: 0 0 auto; height: 205px; opacity: 0;
  background: linear-gradient(0deg, rgba(59, 201, 143, .18), transparent 25%);
  border-bottom: 1px solid rgba(59, 201, 143, .9); transform: translateY(-100%);
}
.spora-task-pathology.is-active .spora-pathology-scan { animation: spora-tissue-scan 4.8s cubic-bezier(.3, .1, .4, 1) both; }
.spora-task .spora-pathology-regions { height: 205px; }
.spora-pathology-region { opacity: 0; }
.spora-pathology-region path { fill: none; stroke: var(--spora-green-light); stroke-width: 2; vector-effect: non-scaling-stroke; }
.spora-pathology-glow { fill: var(--aimm-green); fill-opacity: .2; stroke: none; }
.spora-task-pathology.is-active .spora-pathology-region { animation: spora-region-detect 1.1s ease var(--delay) both; }
@keyframes spora-tissue-scan { 0% { transform: translateY(-100%); opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes spora-region-detect { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 767px) {
  .spora-task-content { margin-top: 190px; }
  .spora-pathology-grid, .spora-pathology-scan, .spora-task .spora-pathology-regions { height: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .spora-task, .spora-task *, .spora-task *::after { animation: none !important; transition: none !important; }
  .spora-task-staining.is-active .spora-staining-complete { opacity: 1; }
  .spora-task-segmentation.is-active .spora-cell.is-visible { stroke-dashoffset: 0; opacity: .85; }
  .spora-task-pathology.is-active .spora-pathology-region { opacity: 1; }
  .spora-pathology-scan { display: none; }
}
/* Printed docs keep a clean, static rendering with readable task links. */
@media print {
  .spora-task-visual, .spora-task-cue, .spora-task::after { display: none; }
  .spora-scale.spora-task { background: #fff; border-color: #aaa; break-inside: avoid; }
  .spora-task-content { margin-top: 0; padding-top: 1.3rem; }
  .spora-task .kicker, .spora-task .title, .spora-task .question, .yue .spora-task li a { color: var(--aimm-navy); }
  .yue .spora-task li a { background: #fff; }
}