:root{
    --navy:#0A2540;
    --teal:#17698A;
    --cyan:#1FB0CE;
    --red:#D0453E;
    --blue:#3D87C9;
    --orange:#F5921E;
    --green:#2E9E5B;
  }
  html,body{margin:0;padding:0;background:#fff}
  body{font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--navy)}

  .scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .wrap{max-width:1280px;margin:0 auto;min-width:860px;position:relative}
  .stage{position:relative;width:100%;aspect-ratio:1280/720}
  .stage svg{position:absolute;inset:0;width:100%;height:100%;display:block}
  .stage canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

  /* ---------- typography inside the SVG ----------
     inherits the host page font when embedded inline */
  text{font-family:inherit}
  .src-label{font-size:16px;font-weight:600;fill:var(--navy)}
  .bu-label{font-size:13px;font-weight:700;fill:#fff;letter-spacing:.5px}
  .uc-label{font-size:13.5px;font-weight:600;fill:#fff}
  .hz-label{font-size:15px;font-weight:700;fill:var(--red);letter-spacing:1.5px}
  .col-main{font-size:17px;font-weight:600;fill:var(--teal)}
  .col-sub{font-size:15px;font-weight:600;fill:var(--navy)}

  /* ---------- load-in choreography ---------- */
  .rv{opacity:0;animation:pop .55s cubic-bezier(.2,.9,.3,1.2) forwards;animation-delay:var(--d,0s)}
  @keyframes pop{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:none}}
  .rv-src{opacity:0;animation:slide .5s ease-out forwards;animation-delay:var(--d,0s)}
  @keyframes slide{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
  .rv-col{opacity:0;animation:rise .6s ease-out forwards;animation-delay:var(--d,0s)}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

  .ribbon{fill:none;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .9s ease-out forwards;animation-delay:var(--d,0s);transition:opacity .25s ease}
  @keyframes draw{to{stroke-dashoffset:0}}

  .hb{animation:barglow 3.2s ease-in-out infinite 2.4s}
  @keyframes barglow{0%,100%{filter:none}50%{filter:drop-shadow(0 0 6px rgba(91,155,213,.75))}}

  .pulse-dot{animation:pdot 1.6s ease-in-out infinite 2.6s;transform-origin:center;transform-box:fill-box}
  @keyframes pdot{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}}

  /* ---------- hover focus states ---------- */
  svg.focus .ribbon{opacity:.14}
  svg.focus .ribbon.on{opacity:1}
  svg.focus .uc{opacity:.35}
  svg.focus .uc.on{opacity:1}
  svg.focus .bu{opacity:.35}
  svg.focus .bu.on{opacity:1}
  svg.focus .src-label{opacity:.45}
  .bu,.uc{cursor:pointer;transition:opacity .25s ease}
  .uc:hover .uc-box{filter:brightness(1.08)}
  .bu:hover .bu-box{filter:brightness(1.25)}

  /* bottom column hover → light up the matching zone */
  .colgrp{cursor:default}
  .colgrp:hover .col-main{fill:#0d4e68}
  svg.z1 .bu-box{filter:brightness(1.3) drop-shadow(0 0 4px rgba(10,37,64,.4))}
  svg.z2 .lr,svg.z3 .lr{filter:saturate(1.6) brightness(1.04)}
  svg.z4 .hb{filter:drop-shadow(0 0 7px rgba(91,155,213,.9))}
  svg.z5 .rr{filter:saturate(1.5) brightness(1.03)}
  svg.z6 .uc-box{filter:brightness(1.12)}
  .bu-box,.uc-box,.hb,.lr,.rr{transition:filter .25s ease}

  /* ---------- tooltip ---------- */
  .tip{
    position:absolute;z-index:5;pointer-events:none;max-width:250px;
    background:var(--navy);color:#fff;font-size:12.5px;line-height:1.5;
    padding:9px 12px;border-radius:8px;opacity:0;transform:translateY(6px);
    transition:opacity .2s ease,transform .2s ease;
    box-shadow:0 10px 28px rgba(10,37,64,.28);
  }
  .tip.show{opacity:1;transform:none}
  .tip b{color:#7FD6E8;font-weight:600}

  /* all animations stay paused until the section scrolls into view */
  .rv,.rv-src,.rv-col,.ribbon,.hb,.pulse-dot{animation-play-state:paused}
  .go .rv,.go .rv-src,.go .rv-col,.go .ribbon,.go .hb,.go .pulse-dot{animation-play-state:running}

  @media (prefers-reduced-motion: reduce){
    .rv,.rv-src,.rv-col,.ribbon{animation-duration:.01s;animation-delay:0s}
    .hb,.pulse-dot{animation:none}
  }