/* Magic UI Animated Beam composition; MIT: /ui/MAGICUI-LICENSE.txt.
   Tabs sliding from Transitions.dev, native keyboard model from SmoothUI AnimatedTabs. */
.connections {
  position: relative;
  isolation: isolate;
  padding: clamp(72px, 8vw, 120px) clamp(16px, 4vw, 64px);
  background: #050506;
  border-bottom: 1px solid #242426;
  scroll-margin-top: 90px;
}
.connections-inner { width: min(100%, 1120px); margin: auto; }
.connections-heading { text-align: center; }
.connections-kicker { margin: 0 0 22px; color: #a9a9b2; font-size: 11px; font-weight: 600; letter-spacing: .2em; }
.connections-heading h2 { margin: 0; font-size: clamp(38px, 5.2vw, 64px); line-height: 1.08; font-weight: 500; letter-spacing: -.055em; }
.connections-heading > p:last-child { max-width: 550px; margin: 22px auto 0; color: #b4b4bf; font-size: 16px; line-height: 1.7; }
.connections-figure { position: relative; margin: 24px auto 38px; }
.connections-map { position: relative; width: min(100%, 800px); height: 340px; margin: auto; isolation: isolate; }
.connections-map::before { position: absolute; inset: 0; z-index: -1; content: ""; background: radial-gradient(ellipse at center, #24203255, transparent 64%); pointer-events: none; }
.connections-fallback, .connections-beam { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.connections-map[data-beams-ready="true"] .connections-fallback { display: none; }
.connections-node { position: absolute; z-index: 1; display: flex; width: 100px; align-items: center; flex-direction: column; gap: 12px; transform: translate(-50%, -50%); }
.connections-node--notion, .connections-node--mcp { top: 18%; }
.connections-node--github, .connections-node--tools, .connections-node--hub { top: 50%; }
.connections-node--linear, .connections-node--skills { top: 82%; }
.connections-node--notion, .connections-node--github, .connections-node--linear { left: 14%; }
.connections-node--mcp, .connections-node--tools, .connections-node--skills { left: 86%; }
.connections-node--hub { left: 50%; gap: 14px; }
.connections-circle { display: flex; width: 58px; height: 58px; align-items: center; justify-content: center; padding: 14px; border: 2px solid #fff; border-radius: 50%; color: #18181b; background: #f8f8fa; box-shadow: 0 0 20px -12px #ffffff60; }
.connections-circle svg, .connections-circle img { display: block; width: 26px; height: 26px; }
.connections-circle--linear { color: #6865db; }
.connections-circle--mcp { background: #e8dfff; border-color: #f5efff; }
.connections-circle--tools { background: #dcefff; border-color: #eaf6ff; }
.connections-circle--skills { background: #ffead9; border-color: #fff2e7; }
.connections-notion-mark { display: grid; place-items: center; width: 26px; height: 27px; border: 1.5px solid currentColor; border-radius: 2px; font: 700 26px/1 Georgia, serif; box-shadow: -2px -2px 0 currentColor; }
.connections-hub { display: grid; place-items: center; width: 94px; height: 94px; border: 1px solid #43434b; border-radius: 50%; background: #08080a; box-shadow: 0 0 0 9px #ffffff03, 0 0 70px -20px #9d88dd70; }
.connections-hub img, .connections-hub canvas { grid-area: 1 / 1; width: 80px; height: 80px; border-radius: 50%; }
.connections-hub canvas { opacity: 0; pointer-events: none; }
.connections-hub canvas[data-eye-ready="true"] { opacity: 1; }
.connections-hub:has(canvas[data-eye-ready="true"]) img { visibility: hidden; }
.connections-node-label { position: absolute; top: calc(100% + 10px); color: #d4d4dd; font-size: 12px; font-weight: 500; white-space: nowrap; }
.connections-node--hub .connections-node-label { font-size: 14px; color: #fff; }
.connections-figure figcaption { margin-top: 14px; color: #a6a6b0; font-size: 12px; text-align: center; line-height: 1.7; }
.connections-motion { display: flex; align-items: center; gap: 7px; min-height: 44px; margin: 6px auto 0; padding: 0 12px; border: 0; border-radius: 20px; background: transparent; color: #b6b6bf; font-size: 11px; cursor: pointer; transition: color 150ms ease, background-color 150ms ease; }
.connections-motion:hover { color: #fff; background: #ffffff08; }
.connections-motion[hidden], .connections-tabs[hidden], .connections-panel[hidden] { display: none !important; }
.connections-details { max-width: 900px; margin: auto; padding-top: 28px; border-top: 1px solid #292930; }
.connections-tabs { --tabs-dur: 250ms; --tabs-ease: cubic-bezier(.22, 1, .36, 1); position: relative; display: flex; width: max-content; max-width: 100%; align-items: center; gap: 3px; margin: 0 auto 28px; padding: 3px; border: 1px solid #2c2c33; border-radius: 48px; background: #17171b; }
.connections-tabs .t-tab { position: relative; z-index: 1; appearance: none; min-height: 44px; padding: 8px 22px; border: 0; border-radius: 48px; background: transparent; color: #b2b2bd; font-size: 13px; white-space: nowrap; cursor: pointer; transition: color var(--tabs-dur) var(--tabs-ease); }
.connections-tabs .t-tab:hover, .connections-tabs .t-tab[aria-selected="true"] { color: #fff; }
.connections-tabs .t-tabs-pill { position: absolute; top: 3px; left: 0; width: 0; height: 44px; border-radius: 48px; background: #37373f; pointer-events: none; transition: transform var(--tabs-dur) var(--tabs-ease), width var(--tabs-dur) var(--tabs-ease); }
.connections-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.connections.is-enhanced .connections-panels { display: block; }
.connections-panel { display: flex; align-items: start; justify-content: space-between; gap: 40px; }
.connections:not(.is-enhanced) .connections-panel { flex-direction: column; }
.connections.is-enhanced .connections-panel { min-height: 190px; }
.connections-panel > div:first-child { max-width: 620px; }
.connections-panel-kicker { margin: 0 0 12px; color: #b5a7df; font-size: 9px; font-weight: 600; letter-spacing: .14em; line-height: 1.6; }
.connections-panel h3 { margin: 0 0 12px; color: #f4f4f8; font-size: 25px; line-height: 1.25; font-weight: 500; letter-spacing: -.035em; }
.connections-panel p:not(.connections-panel-kicker) { max-width: 600px; margin: 0; color: #b4b4bf; font-size: 14px; line-height: 1.75; }
.connections-app-list { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; color: #d1d1d9; font-size: 11px; }
.connections-app-list span { display: inline-flex; gap: 6px; align-items: center; }
.connections-app-list span::before { content: ""; width: 3px; height: 3px; background: #858591; border-radius: 50%; }
.connections-cta { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 16px; min-height: 44px; margin-top: 24px; padding: 12px 20px; border-radius: 99px; background: #f3f3f6; color: #17171b; font-size: 12px; font-weight: 600; white-space: nowrap; transition: background-color 150ms ease; }
.connections-cta:hover { background: #dcd5ee; }
.connections-panel-actions { display: flex; flex: none; align-items: center; flex-direction: column; gap: 12px; }
.connections-secondary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #cfcfd9; font-size: 12px; text-underline-offset: 4px; }
.connections-secondary:hover { text-decoration: underline; }
.connections-permissions { display: flex; align-items: start; gap: 8px; margin: 26px 0 0; color: #a9a9b4; font-size: 11px; line-height: 1.75; }
.connections-permissions img { flex: none; margin-top: 2px; filter: invert(75%); }
.connections :is(a, button, [role="tabpanel"]):focus-visible { outline: 2px solid #c5b4ef; outline-offset: 4px; }
@media (max-width: 640px) {
  .connections-heading > p:last-child { max-width: 400px; font-size: 14px; }
  .connections-map { height: 300px; }
  .connections-circle { width: 48px; height: 48px; padding: 10px; }
  .connections-hub { width: 76px; height: 76px; }
  .connections-hub img, .connections-hub canvas { width: 65px; height: 65px; }
  .connections-node { width: 72px; gap: 9px; }
  .connections-node-label { font-size: 10px; }
  .connections-node--notion, .connections-node--github, .connections-node--linear { left: 12%; }
  .connections-node--mcp, .connections-node--tools, .connections-node--skills { left: 88%; }
  .connections-tabs { width: 100%; }
  .connections-tabs .t-tab { flex: 1; padding: 8px 9px; font-size: 11px; }
  .connections-panel, .connections-panel-actions { align-items: start; flex-direction: column; gap: 6px; }
  .connections.is-enhanced .connections-panel { min-height: 285px; }
  .connections-panel h3 { font-size: 23px; }
  .connections-cta { margin-top: 18px; }
  .connections-panels { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .connections-tabs .t-tabs-pill, .connections-tabs .t-tab, .connections-cta, .connections-motion { transition: none !important; }
  .connections-hub canvas { display: none; }
  .connections-hub img { visibility: visible !important; }
}
@media (forced-colors: active) {
  .connections-hub canvas { display: none; }
  .connections-hub img { visibility: visible !important; }
  .connections-circle, .connections-hub { border-color: CanvasText; background: Canvas; color: CanvasText; }
  .connections-tabs { border-color: CanvasText; }
  .connections-tabs .t-tab[aria-selected="true"] { outline: 1px solid Highlight; }
  .connections-cta { border: 1px solid CanvasText; }
}
@media print {
  .connections-hub canvas { display: none; }
  .connections-hub img { visibility: visible !important; }
}