.connections .connections-heading>p{max-width:600px;margin-inline:auto}
.connections .connection-playground{position:relative;max-width:1140px;margin:46px auto 22px;border-radius:32px;background:#f5f5f7;overflow:hidden;isolation:isolate}
.connections .connection-stage{position:relative;height:450px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-content:center;justify-items:center;gap:28px 0;padding:24px;overflow:hidden;contain:layout paint}
.connections .connection-stage::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 15%,#fff9,transparent 65%);pointer-events:none}
.connections .connection-stage.physics-ready{display:block;padding:0}
.connections .connection-tile{--tile-size:88px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:9px;width:calc(var(--tile-size) + 20px);height:calc(var(--tile-size) + 31px);padding:0;border:0;background:transparent;color:#1d1d1f;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:default;outline:none;isolation:isolate;-webkit-tap-highlight-color:transparent}
.connections .physics-ready .connection-tile{position:absolute;left:0;top:0;margin:0;will-change:transform;touch-action:none;cursor:grab}
.connections .connection-tile.is-dragging{cursor:grabbing;z-index:4}
.connections .connection-tile:focus-visible{outline:2px solid #1d1d1f;outline-offset:3px;border-radius:24px;z-index:3}
.connections .connection-tile-icon{display:grid;place-items:center;flex:none;width:var(--tile-size);height:var(--tile-size);border-radius:calc(var(--tile-size)*.26);background:var(--tile-background,#fff);box-shadow:0 2px 3px #00000004,0 10px 22px #00000007;transition:box-shadow .2s,scale .2s;pointer-events:none}
.connections .connection-tile:hover .connection-tile-icon,.connections .connection-tile.is-dragging .connection-tile-icon{box-shadow:0 4px 7px #00000006,0 14px 28px #00000010;scale:1.035}
.connections .connection-tile-icon img{display:block;width:58%;height:58%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.connections .connection-tile[data-app="slack"] img{width:83%;height:83%}
.connections .connection-tile[data-app^="apple-"] img{width:91%;height:91%}
.connections .connection-tile-name{display:block;max-width:100%;font-size:11px;line-height:15px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;pointer-events:none}
.connections .connection-tile[data-app="teams"]{--tile-background:#eeedff}.connections .connection-tile[data-app="messenger"]{--tile-background:#e9f2ff}.connections .connection-tile[data-app="chatgpt"]{--tile-background:#fff}.connections .connection-tile[data-app="claude"]{--tile-background:#eac4ae}.connections .connection-tile[data-app="google-calendar"]{--tile-background:#e6efff}.connections .connection-tile[data-app="outlook"]{--tile-background:#e7f3ff}.connections .connection-tile[data-app="todoist"]{--tile-background:#fff0ec}
 .connections .connection-stage.entrance-waiting .connection-tile{visibility:hidden}
.connections .connection-replay{position:absolute;right:14px;bottom:14px;z-index:5;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;padding:0;background:#ffffffc9;color:#6e6e73;box-shadow:0 1px 4px #00000005;cursor:pointer;outline:none;transition:background .2s,color .2s;-webkit-tap-highlight-color:transparent}
.connections .connection-replay:hover{background:#fff;color:#1d1d1f}.connections .connection-replay:focus-visible{outline:2px solid #1d1d1f;outline-offset:3px}.connections .connection-replay:disabled{opacity:.4;cursor:default}.connections .connection-replay[hidden]{display:none}.connections .connection-replay svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.connections .connection-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:800px){.connections .connection-stage{padding:18px;grid-template-columns:repeat(4,minmax(0,1fr))}.connections .connection-tile{--tile-size:72px}.connections .connection-tile-name{font-size:10px}}
@media(max-width:600px){.connections .connection-playground{border-radius:26px;margin-top:34px;margin-inline:-8px}.connections .connection-stage{height:520px;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 0;padding:12px}.connections .connection-tile{--tile-size:clamp(44px,calc((100vw - 112px)/4),65px);width:calc(var(--tile-size) + 12px)}.connections .connection-tile-name{font-size:9px}.connections .connection-replay{right:8px;bottom:8px}}
@media(prefers-reduced-motion:reduce){.connections .connection-tile-icon,.connections .connection-replay{transition:none}.connections .physics-ready .connection-tile{touch-action:pan-y;cursor:default}.connections .connection-tile:hover .connection-tile-icon,.connections .connection-tile.is-dragging .connection-tile-icon{scale:1}}