/* A single expressive molecular scene, with quieter, purposeful supporting motion. */
.site-header{position:relative}
.molecular-stage{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;background:#0c1c36;aspect-ratio:64/62;box-shadow:0 24px 64px rgb(16 36 73 / .12)}
.molecular-stage .molecular-poster{width:100%;height:100%;object-fit:cover;border-radius:0;opacity:1}
.molecular-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.is-ready .molecular-poster{opacity:0}
.scene-label,.scene-annotation,.scene-bottom{position:absolute;z-index:1;color:#bed1e8;font-size:.6875rem;line-height:1.5;pointer-events:none}
.scene-label{top:28px;left:28px;display:flex;align-items:center;gap:9px}
.scene-dot{width:5px;height:5px;border-radius:50%;background:#84ddf2;box-shadow:0 0 12px rgb(132 221 242 / .45)}
.scene-annotation{right:26px;top:39%;display:flex;align-items:center;gap:9px;color:#dcefff}
.annotation-line{width:34px;height:1px;background:#6b9dbf}
.scene-bottom{bottom:25px;left:28px;right:28px;display:flex;align-items:center;justify-content:space-between;font-size:.625rem;color:#9fb8d5}
.scene-crosshair{font-size:1.25rem;color:#86b3d5}
.hero-figure .molecular-caption{padding:18px 2px 0;min-height:84px;display:flex;flex-wrap:wrap;gap:12px;align-items:start;justify-content:space-between;font-size:.75rem}
.molecular-caption>div{flex:1;min-width:190px;line-height:1.65}
.hero-figure .molecular-caption span{font-size:.625rem;line-height:1.7}
.hero-figure .molecular-caption .pointer-hint{display:none}
.is-ready .molecular-caption .pointer-hint{display:inline}
.motion-control{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 12px;background:var(--canvas);border:1px solid var(--control);color:var(--ink);border-radius:6px;font:inherit;white-space:nowrap}
.motion-control:hover{border-color:var(--brand);background:var(--surface-strong)}
.hero-figure .molecular-caption .motion-label{font-size:.6875rem;color:var(--ink)}
.motion-icon{display:block;width:9px;height:10px;border-inline:2px solid currentColor}
.motion-control[data-paused=true] .motion-icon{height:0;width:0;border:5px solid transparent;border-right:0;border-left:8px solid currentColor}
.reading-progress{position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:linear-gradient(90deg,var(--brand),var(--cyan));transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.discovery-section .process-grid{position:relative}
.discovery-section .process-grid::before{content:'';position:absolute;top:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--brand),var(--cyan));transform-origin:left;pointer-events:none}
.process-grid li{position:relative}
.process-grid .stage{transition:color .25s ease}
.process-grid li::after{content:'';position:absolute;left:0;bottom:0;width:40px;height:2px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.process-grid li:hover::after,.process-grid li:focus-within::after{transform:scaleX(1)}
.workflow-visual{position:relative;isolation:isolate;padding-block:38px;overflow:hidden;background:radial-gradient(ellipse at center,#21416a,#152b4b 75%)}
.workflow-circuit{position:absolute;inset:0;width:100%;height:100%;z-index:-1;fill:none}
.circuit-track{stroke:#52749b;stroke-width:1;opacity:.65}
.circuit-signal{stroke:#9cdeee;stroke-width:1.7;opacity:.85}
.circuit-signal path{stroke-dasharray:1;stroke-dashoffset:0}
.workflow-visual .workflow-input,.workflow-visual .workflow-output,.workflow-visual .workflow-center{position:relative}
.workflow-visual .workflow-input,.workflow-visual .workflow-output{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.workflow-visual .workflow-input span,.workflow-visual .workflow-output span{justify-self:center}
.workflow-visual .workflow-center{margin-block:64px;box-shadow:0 0 40px rgb(99 176 222 / .12)}
.workflow-visual .workflow-center::before,.workflow-visual .workflow-center::after{display:none}
.workflow-visual .workflow-input span,.workflow-visual .workflow-output span{background:#183659}
.study-art{isolation:isolate}
@media(hover:none),(pointer:coarse){.hero-figure .molecular-caption .pointer-hint{display:none}}
@media(min-width:1024px){html{scroll-padding-top:120px}.site-header{position:sticky;top:0;z-index:20;view-transition-name:site-header}.article-layout aside{top:128px}.discovery-section{view-timeline-name:--discovery-sequence;view-timeline-axis:block}}
@media(max-width:479px){.scene-label{top:20px;left:20px}.scene-annotation{right:18px;font-size:.5625rem;top:38%}.annotation-line{width:16px}.scene-bottom{left:20px;right:20px;bottom:18px}.hero-figure .molecular-caption{gap:8px}.molecular-caption>div{min-width:150px}.motion-control{padding-inline:10px}.hero-figure .molecular-caption .motion-label{font-size:.625rem}}
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:page-away .14s ease-in both}
  ::view-transition-new(root){animation:page-arrive .25s ease-out both}
  ::view-transition-old(site-header),::view-transition-new(site-header){animation:none;mix-blend-mode:normal}
  .button{position:relative;overflow:hidden;isolation:isolate;transition:background .2s ease,box-shadow .2s ease,transform .2s ease}
  .button::after{content:'';position:absolute;inset:-100% -40%;background:linear-gradient(110deg,transparent 38%,rgb(255 255 255 / .2) 50%,transparent 62%);transform:translateX(-65%);pointer-events:none;z-index:-1}
  .button:hover::after,.button:focus-visible::after{animation:button-glint .65s ease-out}
  .button:hover{box-shadow:0 5px 18px rgb(16 36 73 / .12)}
  .study-art img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
  .study-card:hover .study-art img,.study-card:focus-within .study-art img{transform:scale(1.045) rotate(-.7deg)}
  .workflow-visual{view-timeline-name:--workflow-circuit;view-timeline-axis:block}
  @supports((animation-timeline:view()) and (animation-range:entry)){
    .discovery-section{view-timeline-name:--discovery-sequence;view-timeline-axis:block}
    .discovery-section .process-grid::before{animation:draw-discovery linear both;animation-timeline:--discovery-sequence;animation-range:entry 10% entry 85%}
    .circuit-signal path{animation:trace-circuit linear both;animation-timeline:--workflow-circuit;animation-range:entry 15% entry 75%}
    .circuit-signal path:nth-child(n+3){animation-range:entry 45% entry 95%}
  }
  @supports(animation-timeline:scroll()){
    .reading-progress{animation:draw-discovery linear;animation-timeline:scroll(root block)}
  }
  .motion-fallback .process-grid::before{transform:scaleX(0)}
  .motion-fallback.is-activated .process-grid::before{animation:draw-discovery 1.2s ease-out both}
  .motion-fallback .circuit-signal path{stroke-dashoffset:1}
  .motion-fallback.is-activated .circuit-signal path{animation:trace-circuit 1.5s ease-out both}
  .motion-fallback.is-activated .circuit-signal path:nth-child(n+3){animation-delay:.65s}
}
@keyframes draw-discovery{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes trace-circuit{from{stroke-dashoffset:1;opacity:.25}to{stroke-dashoffset:0;opacity:1}}
@keyframes button-glint{to{transform:translateX(65%)}}
@keyframes page-away{to{opacity:0}}
@keyframes page-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}.reading-progress{display:none}.circuit-signal path{stroke-dashoffset:0!important}.discovery-section .process-grid::before{transform:none!important}.motion-control{display:none!important}.hero-figure .molecular-caption .pointer-hint{display:none}.molecular-canvas{display:none!important}.is-ready .molecular-poster{opacity:1}}
@media(forced-colors:active){.molecular-stage{border:1px solid CanvasText}.scene-label,.scene-annotation,.scene-bottom{display:none}.motion-control{border-color:ButtonText}.workflow-circuit,.reading-progress{display:none}}
@media print{.molecular-canvas,.motion-control,.reading-progress{display:none!important}.is-ready .molecular-poster{opacity:1}.site-header{position:static}}
