@layer components {
  .exchange-section { padding: 100px var(--page); background: #121a20; color: #eef4f8; border-bottom: 1px solid #ffffff20; scroll-margin-top: 28px; }
  .exchange-layout { display: grid; grid-template-columns: minmax(250px,.78fr) minmax(0,1.55fr); align-items: center; gap: clamp(35px,5vw,80px); max-width: 1500px; margin: auto; }
  .exchange-copy > .eyebrow { color: #9aa9b6; }
  .exchange-copy h2 { font-size: clamp(44px,4.4vw,70px); line-height: 1.06; margin-bottom: 28px; }
  .exchange-copy h2 span { color: var(--sky); }
  .exchange-copy > p:not(.eyebrow) { color: #acbbc7; font-size: 16px; line-height: 1.75; max-width: 440px; }
  .exchange-legend { display: flex; flex-wrap: wrap; gap: 15px 23px; margin: 34px 0 20px; }
  .exchange-legend > span { display: inline-flex; gap: 10px; align-items: center; font-size: 11px; letter-spacing: .06em; font-weight: 600; }
  .exchange-legend i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
  .exchange-hot { color: #ffa6a7; }
  .exchange-cold { color: #8ad9ff; }
  .exchange-copy > .exchange-note { font-size: 14px !important; color: #97aab9 !important; }
  .exchange-copy .text-link { margin-top: 26px; }
  .exchange-viewer { min-width: 0; }
  .exchange-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; border: 1px solid #344652; border-bottom: none; background: #17242e; }
  .exchange-tabs button { padding: 15px 12px; background: transparent; border: 1px solid transparent; color: #b4c1ca; font-size: 14px; display: flex; gap: 12px; align-items: center; justify-content: center; min-height: 51px; }
  .exchange-tabs button > span { font-size: 11px; opacity: .65; font-variant-numeric: tabular-nums; }
  .exchange-tabs button[aria-selected="true"] { color: #fff; background: #264661; border-color: #496b86; }
  .exchange-tabs button:hover { color: #fff; border-color: #55758a; }
  .exchange-tabs button:focus-visible { outline-offset: -3px; }
  .exchange-panel { margin: 0; }
  .exchange-panel:focus-visible { outline: 2px solid #59a9ff; outline-offset: 5px; }
  .exchange-stage { aspect-ratio: 827 / 565; background: #fff; display: grid; align-items: center; padding: 10px; overflow: hidden; }
  .exchange-art { position: relative; width: 100%; aspect-ratio: var(--art-ratio); }
  .exchange-art > img { width: 100%; height: 100%; display: block; }
  .exchange-art > .exchange-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
  .exchange-art.is-ready > .exchange-overlay { opacity: 1; }
  .exchange-signature { position: absolute; right: 4%; bottom: 5%; display: inline-flex; align-items: baseline; color: #254e70; font-size: clamp(12px,1.2vw,18px); font-weight: 600; letter-spacing: .025em; line-height: 1; text-decoration: none; }
  .exchange-signature:hover { text-decoration: underline; text-underline-offset: 4px; }
  .exchange-signature:focus-visible { outline: 2px solid #6296bf; outline-offset: 6px; border-radius: 2px; }
  .exchange-signature::before { content: ''; align-self: center; width: 18px; height: 2px; margin-right: 9px; background: #6296bf; }
  .exchange-signature > span { color: #708493; font-weight: 400; }
  .exchange-stream { fill: none; stroke-linecap: round; }
  .exchange-stream--hot { stroke: #ec2945; }
  .exchange-stream--cold { stroke: #009cda; }
  .exchange-outline { stroke: white; stroke-width: 9; opacity: .45; }
  .exchange-track { stroke-width: 6; opacity: .28; }
  .exchange-particles { stroke-width: 6; stroke-dasharray: 20 40; opacity: .96; animation: exchange-flow 2.6s linear infinite; animation-delay: var(--stream-delay); animation-play-state: paused; }
  .exchange-spark { stroke: white; stroke-width: 1.6; stroke-dasharray: 20 40; opacity: .76; animation: exchange-flow 2.6s linear infinite; animation-delay: var(--stream-delay); animation-play-state: paused; }
  .exchange-manifold .exchange-outline { stroke-width: 10; opacity: .62; }
  .exchange-manifold .exchange-track { stroke-width: 7; opacity: .4; }
  .exchange-manifold .exchange-particles { stroke-width: 7; }
  .exchange-viewer.is-playing .exchange-panel:not([hidden]) .exchange-particles,
  .exchange-viewer.is-playing .exchange-panel:not([hidden]) .exchange-spark { animation-play-state: running; }
  .exchange-caption { display: flex; gap: 17px; padding: 23px 25px; background: #192731; border: 1px solid #344652; border-top: 0; min-height: 131px; }
  .exchange-number { font-size: 12px; color: #91b7d3; padding-top: 4px; }
  .exchange-caption h3 { font-size: 23px; letter-spacing: -.02em; line-height: 1.3; margin-bottom: 8px; }
  .exchange-caption p { font-size: 14px; line-height: 1.65; color: #aabdc9; max-width: 570px; }
  .exchange-toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; border-bottom: 1px solid #344652; padding: 14px 0; }
  .exchange-toolbar > p { color: #8da6b8; font-size: 10px; letter-spacing: .12em; }
  .exchange-play { background: transparent; border: 1px solid #466175; display: flex; align-items: center; justify-content: center; gap: 9px; color: #d7e6f1; padding: 10px 14px; min-height: 44px; min-width: 125px; font-size: 13px; }
  .exchange-play:hover:not(:disabled) { background: #264661; border-color: #86adcc; }
  .exchange-play:disabled { color: #98aebb; cursor: default; }
  [data-exchange-icon] { font-size: 13px; width: 14px; text-align: center; }
  .exchange-footnote { margin-top: 14px; color: #8ea1b0; font-size: 12px; line-height: 1.6; }
  @keyframes exchange-flow { to { stroke-dashoffset: -120; } }
}
@layer responsive {
  @media (max-width: 1050px) {
    .exchange-layout { grid-template-columns: 1fr; gap: 35px; max-width: 850px; }
    .exchange-copy > p:not(.eyebrow) { max-width: 650px; }
    .exchange-copy h2 { font-size: 56px; }
    .exchange-legend { margin-top: 26px; }
    .exchange-copy .text-link { margin-top: 18px; }
  }
  @media (max-width: 560px) {
    .exchange-section { padding: 65px var(--page); }
    .exchange-copy h2 { font-size: 48px; }
    .exchange-tabs { gap: 3px; padding: 4px; }
    .exchange-tabs button { padding: 12px 6px; gap: 7px; font-size: 12px; }
    .exchange-tabs button > span { font-size: 10px; }
    .exchange-stage { padding: 5px; }
    .exchange-manifold .exchange-particles { stroke-width: 8; }
    .exchange-caption { gap: 12px; padding: 20px 16px; min-height: 168px; }
    .exchange-caption h3 { font-size: 22px; }
    .exchange-caption p { font-size: 14px; }
    .exchange-toolbar > p { max-width: 140px; font-size: 10px; line-height: 1.7; }
    .exchange-play { padding: 9px 10px; min-width: 114px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .exchange-particles, .exchange-spark { animation: none !important; }
  }
}