/* Non-interactive tool tiles: a CSS drop entrance, then quiet balloon drift. */
.mosaic-stage .connect.tech-ecosystem{display:flex;flex-direction:column;min-height:0;padding:24rem 16rem 10rem;overflow-y:auto}
.capabilities .connect .integration-chips.tech-balloon-field{position:relative;inset:auto;display:block;flex:1 1 0;min-height:220px;margin:16px 0 0;width:100%;box-sizing:border-box;overflow:hidden;overflow:clip;container-type:size;container-name:tech-tiles}
.tech-balloon-field .tech-balloon{--tile-height:clamp(16px,calc((100% - 16px)/5),36px);--tile-overlap:2px;--land-tilt:0deg;--tile-shift:0px;position:absolute;display:grid;place-items:center;width:calc((100% - 24px)/3);height:var(--tile-height);min-width:0;min-height:0;left:calc(8px + var(--stack-col,0)*((100% - 24px)/3 + 4px) + var(--tile-shift));bottom:calc(8px + var(--stack-level,0)*(var(--tile-height) - var(--tile-overlap)));z-index:var(--tile-order,1);opacity:1;transform:rotate(var(--land-tilt))}
:root[data-style] .tech-balloon-field .tech-chip{position:relative;inset:auto;display:flex;align-items:center;justify-content:center;width:100%;height:36px;min-height:0;max-height:100%;margin:0;padding:0 3px;gap:0;border:1px solid var(--site-line);border-radius:999px;background:var(--tool-paper,var(--site-subtle));color:var(--site-ink);font:500 clamp(10px,12rem,12px)/1.05 var(--font-ui);white-space:nowrap;box-shadow:none;rotate:0deg;translate:0;pointer-events:none;animation:tech-tile-float var(--float-duration,6s) ease-in-out var(--float-delay,0s) infinite;animation-play-state:var(--tile-play-state,paused)}
/* Chips here are opaque, so a backdrop blur is invisible, yet it made the GPU re-blur 15 moving tiles every frame while the mobile rail travels. */
:root[data-style] .tech-balloon-field .tech-chip{backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-style] .tech-balloon-field .tech-chip svg{position:absolute;right:3px;top:2px;width:12px;height:12px;flex:none;color:var(--site-accent);opacity:.16}
.tech-balloon-field .tech-chip svg [fill]:not([fill="none"]){fill:currentColor}
.tech-balloon-field .tech-chip svg [stroke]:not([stroke="none"]){stroke:currentColor}
:root[data-style="sketch"] .tech-balloon-field .tech-balloon:nth-child(3n+1){--tool-paper:var(--site-pink)}
:root[data-style="sketch"] .tech-balloon-field .tech-balloon:nth-child(3n+2){--tool-paper:var(--site-yellow)}
:root[data-style="sketch"] .tech-balloon-field .tech-balloon:nth-child(3n){--tool-paper:var(--site-cyan)}
:root[data-style="sketch"] .tech-balloon-field .tech-chip{border-color:var(--site-accent);border-radius:19px 23px 18px 25px;box-shadow:1px 1px 0 var(--site-line)}
:root[data-style="sketch"] .tech-balloon-field .tech-chip::after{content:'';position:absolute;inset:3px;border:1px solid currentColor;border-radius:21px 18px 24px 19px;opacity:.16;pointer-events:none}
.tech-balloon-field[data-tech-motion="waiting"] .tech-balloon{opacity:0}
.tech-balloon-field[data-tech-motion="dropping"] .tech-balloon{animation:tech-tile-drop .7s cubic-bezier(.3,.05,.55,1) var(--tile-delay,0ms) both;animation-play-state:var(--tile-play-state,paused)}
.tech-balloon-field[data-tech-paused="true"]{--tile-play-state:paused}
.tech-balloon-field[data-tech-paused="false"]{--tile-play-state:running}
.tech-field-tools{display:flex;align-items:center;gap:4px;flex:none;min-height:44px;padding:0;color:var(--site-muted);font:10px/1.4 var(--font-ui)}
.tech-field-hint{margin-right:auto}
.tech-field-tools button{display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border:0;border-radius:4px;background:transparent;color:var(--site-ink);cursor:pointer}
.tech-field-tools button:hover,.tech-field-tools button[aria-pressed="true"]{background:var(--site-accent-soft)}
.tech-field-tools button:disabled{opacity:.4;cursor:default}
.tech-field-tools svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes tech-tile-drop{0%{opacity:0;transform:translateY(calc(-1 * var(--drop-distance,300px))) rotate(-3deg)}10%{opacity:1}72%{opacity:1;transform:translateY(0) rotate(var(--land-tilt))}86%{transform:translateY(-6px) rotate(var(--land-tilt))}100%{opacity:1;transform:translateY(0) rotate(var(--land-tilt))}}
/* Literal values (the --float-y-* variables were never set): var() in keyframes keeps 15 animations on the main thread every frame. */
@keyframes tech-tile-float{0%,100%{transform:translate(-1px,0)}50%{transform:translate(1px,0)}}
@container tech-tiles (min-height:220px){.tech-balloon-field .tech-balloon{--tile-overlap:5px;--land-tilt:var(--tile-angle);--tile-shift:var(--pile-shift)}.tech-balloon-field .tech-chip{--float-y-down:1.5px;--float-y-up:-1.5px}}
@container tech-tiles (max-width:280px){:root[data-style] .tech-balloon-field .tech-chip{font-size:10px}}
@container tech-tiles (max-width:220px){:root[data-style] .tech-balloon-field .tech-chip{font-size:9.5px;white-space:normal;overflow-wrap:anywhere}}
@media(max-width:960px){
 :root[data-style] .mosaic-stage .connect.tech-ecosystem{padding:20px 16px}
 :root[data-style] .tech-balloon-field .tech-chip{font-size:clamp(10px,2.8vw,12px)}
 .capabilities[data-mobile-rail="pinned"] .connect .integration-chips.tech-balloon-field{min-height:0;flex:1 1 0}
 .capabilities[data-mobile-rail="swipe"] .connect .tech-balloon-field{flex:auto;min-height:280px}
 .tech-field-tools{font-size:11px}
}
@media(max-width:960px) and (max-height:700px){
 :root[data-style] .capabilities[data-mobile-rail="pinned"] .connect.tech-ecosystem{padding:12px}
 .capabilities[data-mobile-rail="pinned"] .connect h2{font-size:20px;line-height:1.1}
 .capabilities[data-mobile-rail="pinned"] .connect .sub{margin-top:8px;font-size:12px;line-height:1.35}
 .capabilities[data-mobile-rail="pinned"] .connect .integration-chips.tech-balloon-field{margin-top:8px}
}
@media(max-width:960px) and (max-height:600px){
 .capabilities[data-mobile-rail="pinned"] .connect h2{font-size:18px}
 .capabilities[data-mobile-rail="pinned"] .connect .sub{margin-top:6px;font-size:11px;line-height:1.3}
}
@media(prefers-reduced-motion:reduce){.tech-balloon-field .tech-chip,.tech-balloon-field .tech-balloon{animation:none!important}.tech-balloon-field .tech-balloon{opacity:1!important;transform:none!important}}