.composition-section{--composition-top-space: 112px;--composition-funnel-height: 220px;--terrain-overhang: 170px;--composition-connection-color: #ffffff;padding-top:var(--composition-top-space);color:#fff;background:var(--background);overflow-x:clip}.composition-heading.section-gap{position:relative;padding-bottom:0;color:var(--text-primary)}.composition-clouds{position:absolute;z-index:2;bottom:-20px;left:50%;display:block;width:100vw;max-width:none;height:clamp(100px,12vw,160px);transform:translate(-50%);overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(transparent,#000000 18%,#000000 82%,transparent);mask-image:linear-gradient(transparent,#000000 18%,#000000 82%,transparent)}.composition-cloud-layer{opacity:.36;transform-box:fill-box;transform-origin:center}.composition-cloud-layer.is-far{opacity:.2}.composition-cloud-lightning{fill:none;stroke:var(--lightning-color);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:18 100;stroke-dashoffset:18;opacity:0;pointer-events:none}.composition-cloud-lightning-glow{stroke-width:20;opacity:.8;filter:blur(7px)}.composition-cloud-lightning-core{stroke:color-mix(in srgb,var(--lightning-color) 70%,var(--text-primary));stroke-width:1.6}.composition-heading-copy{position:relative;z-index:4;max-width:760px;margin-inline:auto;padding-inline:20px;text-align:center}.composition-heading h2{margin-top:20px;font-size:clamp(2.4rem,4vw,4rem);line-height:1.06;letter-spacing:-.05em;text-wrap:balance}.composition-heading-flow{position:relative;padding-block:24px 128px}.composition-intro{position:relative;z-index:3;max-width:34rem;margin:0 auto;padding-inline:20px;color:var(--text-secondary);font-size:1.05rem;text-align:center;text-wrap:balance}.composition-heading-copy:before,.composition-intro:before{content:"";position:absolute;inset:-8px 0;z-index:-1;background:linear-gradient(90deg,transparent,var(--background) 12%,var(--background) 88%,transparent);filter:blur(10px);pointer-events:none}.composition-bridge{position:absolute;z-index:3;inset:calc(-1 * var(--composition-top-space)) 0 0;width:100%;height:calc(100% + var(--composition-top-space));overflow:visible;pointer-events:none}.composition-flow-particles,.composition-terrain .composition-flow-particles{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:3px calc(var(--particle-spacing, 20px) - 3px);stroke-dashoffset:var(--particle-offset, 0px);vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--particle-glow, var(--source-color, #bda2ff)) 55%,transparent))}.composition-flow-particles[data-stage]{opacity:.28}.composition-particle-hit-area,.composition-terrain .composition-particle-hit-area{fill:none;stroke:transparent;stroke-width:16;vector-effect:non-scaling-stroke;pointer-events:stroke}.composition-flow-particles.is-active,.composition-inlet-route.is-active .composition-flow-particles,.composition-underground-route.is-active .composition-flow-particles{opacity:1;stroke-width:3.2;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--particle-glow, var(--source-color)) 70%,transparent))}.composition-incoming-gradient stop,.composition-merge-source{stop-color:color-mix(in srgb,var(--source-color) 85%,var(--text-primary))}.composition-surface{--underground-start: 360px;--underground-transition: 120px;--section-fade: 180px;background:linear-gradient(var(--background) var(--underground-start),#171223 calc(var(--underground-start) + var(--underground-transition)),#171223 calc(100% - var(--section-fade)),var(--background));padding-bottom:220px}.composition-content{position:relative}.composition-funnel{position:relative;height:var(--composition-funnel-height);container-type:inline-size}.composition-inlet,.composition-outlet{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}.composition-inlet path,.composition-outlet path{vector-effect:non-scaling-stroke}.composition-inlet{position:relative;z-index:2;clip-path:inset(0 0 calc(300px - var(--terrain-overhang) - var(--trench-entry-offset)))}.composition-outlet-lane{fill:none;stroke-width:1.5;stroke-linecap:round}.composition-terrain,.composition-drone-layer{position:absolute;bottom:calc(-1 * var(--terrain-overhang));left:50%;z-index:1;width:min(94vw,1600px);max-width:none;height:300px;transform:translate(-50%);overflow:visible;pointer-events:none;filter:drop-shadow(0 16px 24px rgba(10,5,20,.25))}.composition-drone-layer{bottom:calc(-1 * (var(--composition-funnel-height) + var(--terrain-overhang)));z-index:5;filter:none}.composition-drone-controller{pointer-events:all;cursor:pointer;outline:none}.composition-drone-hit-area{fill:transparent;stroke:none;vector-effect:non-scaling-stroke}.composition-drone-controller.is-active .composition-drone-hit-area,.composition-drone-controller:focus-visible .composition-drone-hit-area{stroke:var(--primary-color);stroke-width:1.5;stroke-dasharray:5 5}.composition-drone-controller:hover .composition-city-drone-body,.composition-drone-controller.is-active .composition-city-drone-body{filter:drop-shadow(0 0 4px var(--primary-color))}.composition-drone-controller.is-active .composition-city-drone-body{animation-play-state:paused}.composition-drone-hint{position:absolute;z-index:4;top:-16px;left:50%;width:max-content;max-width:calc(100% - 24px);padding:8px 12px;border:1px solid var(--border);border-radius:20px;background:var(--background);color:var(--text-primary);font-size:.75rem;line-height:1.4;text-align:center;transform:translate(-50%);pointer-events:none}.composition-terrain-shelf{width:100%;height:300px}.composition-terrain-center{transform:translate(-50cqw);overflow:visible}.composition-campus-prop{overflow:visible}.composition-campus-shadow,.composition-city-shadow{fill:#0e081c;opacity:.18}.composition-terrain .composition-city-curb,.composition-terrain .composition-city-road,.composition-terrain .composition-city-road-guide{fill:none;stroke-linecap:round}.composition-terrain .composition-city-curb{stroke:#aaa1b7;stroke-width:22}.composition-terrain .composition-city-road{stroke:#575b70;stroke-width:18}.composition-terrain .composition-city-road-guide{stroke:#c9d5e8;stroke-width:1;stroke-dasharray:12 10;opacity:.65}.composition-terrain .composition-city-crosswalks path{stroke:#e8e2ef;stroke-width:3.5}.composition-city-signal-pole{fill:#8899a6}.composition-city-signal-case{fill:#272d3d;stroke:#a4acba;stroke-width:1}.composition-terrain .composition-city-signal-side{fill:#535c74;stroke:#8c94a7}.composition-city-signal-light{fill:currentColor;opacity:.2}.composition-city-signal-light[data-color=red]{color:#f47787}.composition-city-signal-light[data-color=amber]{color:#f5cb79}.composition-city-signal-light[data-color=green]{color:#8ce2bf}.composition-city-signal-light.is-lit{opacity:1;filter:drop-shadow(0 0 3px currentColor)}.composition-city-drone-arms{fill:none;stroke:#99adbc;stroke-width:5;stroke-linecap:round}.composition-city-rotor-guard{fill:none;stroke:#9fb4c5;stroke-width:2;opacity:.7}.composition-city-rotor-blades{stroke:#d3e2eb;stroke-width:2.5}.composition-city-rotor{transform-box:fill-box;transform-origin:center}.composition-city-drone-top{fill:#cbd9e3;stroke:#8a9eb2}.composition-city-drone-side{fill:#718ba0;stroke:#9cb1c0}.composition-city-drone-camera{fill:#263c4b;stroke:#9bc9c8;stroke-width:2}.composition-city-drone-status{fill:#8ce2bf}.composition-office-front{fill:color-mix(in srgb,var(--surface) 78%,#8d7dae);stroke:#8b759e}.composition-office-side{fill:color-mix(in srgb,var(--surface) 64%,#5a4477);stroke:#70558e}.composition-terrain .composition-office-roof{fill:color-mix(in srgb,var(--surface) 90%,#b9a2d2);stroke:#9c87b2}.composition-office-roof-unit{fill:#79678c}.composition-office-window{fill:#91bccd;opacity:.4}.composition-office-window.is-lit{fill:#e4c69f;opacity:.9}.composition-office-door{fill:#7e9cae;opacity:.8}.composition-terrain .composition-office-aerial{fill:none;stroke:#b49bca}.composition-office-status{fill:#9bdec6}.is-skyscraper .composition-office-front{fill:color-mix(in srgb,var(--surface) 68%,#98aac6)}.is-skyscraper .composition-office-side{fill:color-mix(in srgb,var(--surface) 58%,#45516f)}.composition-terrain .composition-skyscraper-mullion{fill:none;stroke:#9dbad5;stroke-width:.4;opacity:.32}.composition-skyscraper-window-lit{fill:#e4c69f;opacity:.8}.composition-tree-trunk{fill:#917f8c}.composition-terrain .composition-tree-shade{fill:#466f68;stroke:#6b978b}.composition-terrain .composition-tree-leaves{fill:#78a895;stroke:none}.composition-tree-canopy{transform-box:fill-box;transform-origin:50% 100%}.composition-terrain path{stroke:#70558e;stroke-width:1;stroke-linejoin:round}.composition-terrain .composition-terrain-top{fill:color-mix(in srgb,var(--surface) 86%,#9a82b4);stroke:#9c87b2;stroke-width:1.5;vector-effect:non-scaling-stroke}.composition-terrain-side{fill:#2a2034}.composition-terrain-front{fill:#36283f}.composition-terrain .composition-trench-opening{fill:none;stroke:#bf9ae4;stroke-width:1.5}.composition-terrain .composition-terrain-grid-line{fill:none;stroke:#8c739f;opacity:.2}.composition-terrain .composition-terrain-strata{fill:none;stroke:#8c739f;opacity:.6}.composition-trench-interior{fill:#120d1b}.composition-trench-wall{fill:#3a284a}.composition-terrain .composition-subsoil{stroke:none}.composition-terrain .composition-subsoil-contours path{fill:none;stroke:#9876b1;stroke-dasharray:2 7;opacity:.25}.composition-underground-glow{filter:blur(8px)}.composition-terrain .composition-descent-line{--particle-glow: var(--composition-connection-color);stroke:var(--descent-stroke)}.composition-terrain .composition-underground-bus{--source-color: var(--composition-connection-color);fill:none;stroke:var(--composition-connection-color);opacity:.65}.composition-outlet{--source-color: var(--composition-connection-color);height:240px}.composition-outlet-lane,.composition-outlet-particles{stroke:var(--composition-connection-color)}.composition-outlet-lane{opacity:.7}.extension-lanes{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;padding:0;margin:0}.extension-lane{position:relative;margin:0 8px;padding:24px 20px;border:1px solid color-mix(in srgb,var(--lane-color) 30%,#30253f);border-radius:16px;background:linear-gradient(160deg,color-mix(in srgb,var(--lane-color) 7%,#21192e),#1b1525)}.extension-lane-port{position:absolute;left:50%;top:-4px;width:7px;height:7px;transform:translate(-50%);border:1px solid var(--composition-connection-color);border-radius:50%;background:#21192e}.extension-lane>svg{color:var(--lane-color)}.extension-lane h3{margin-top:18px;color:#fff;font-size:1rem;font-weight:600}.extension-lane p{margin-top:8px;color:#cbbce1;font-size:.8rem;line-height:1.6}.extension-lane[data-selected=true]{border-color:var(--lane-color);background:linear-gradient(160deg,color-mix(in srgb,var(--lane-color) 16%,#21192e),#1b1525)}.extension-lane-button{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit;background:transparent;cursor:pointer}.extension-lane-button:focus-visible{outline:2px solid var(--lane-color);outline-offset:4px}.integration-example{margin:32px 8px 0;padding:clamp(20px,3vw,36px);border:1px solid #443751;border-radius:20px;background:#1b1525;color:#fff}.integration-example-heading{max-width:720px}.integration-example-eyebrow{color:#bda2ff;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}.integration-example-heading h3{margin-top:12px;font-size:clamp(1.35rem,2.4vw,2rem);font-weight:600;line-height:1.2;letter-spacing:-.035em}.integration-example-heading>p:last-child{margin-top:12px;color:#cbbce1;font-size:.95rem;line-height:1.65}.integration-example-code{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}.integration-code-block{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid #3b3048;border-radius:12px;background:#120e1b}.integration-code-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid #3b3048}.integration-code-heading h4{color:#f2edf9;font-size:.8rem;font-weight:600}.integration-code-heading>span{color:#bda2ff;font-family:monospace;font-size:.75rem}.integration-code-block pre{flex:1;min-height:0;max-height:24rem;margin:0;padding:18px;overflow:auto;color:#e2d8ef;font-size:.8rem;line-height:1.7;tab-size:2}.integration-code-block code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.integration-code-block pre:focus-visible{outline:2px solid #bda2ff;outline-offset:-3px}.integration-example-note,.integration-example-disclaimer{margin-top:18px;color:#cbbce1;font-size:.8rem;line-height:1.65}.integration-example-disclaimer{margin-top:8px;color:#b6a5ca}@media(max-width:900px){.integration-example-code{grid-template-columns:minmax(0,1fr)}}@media(prefers-reduced-motion:no-preference){.composition-cloud-layer{animation:composition-cloud-drift 18s ease-in-out -5s infinite alternate}.composition-cloud-layer.is-far{animation-delay:-12s;animation-duration:30s;animation-direction:alternate-reverse}.composition-cloud-lightning{animation:composition-cloud-lightning var(--lightning-duration) linear var(--lightning-delay) infinite}.composition-office-window.is-lit{animation:composition-office-lights 7s ease-in-out infinite alternate}.composition-city-drone-body{animation:composition-city-hover 8s ease-in-out var(--drone-delay) infinite alternate}.composition-city-rotor{animation:composition-city-rotor .55s linear infinite}.composition-city-signal-light.is-lit{animation:composition-city-signal 3s ease-in-out infinite alternate}@keyframes composition-cloud-drift{0%{transform:translate(-40px,4px) scaleX(1.02)}to{transform:translate(40px,-4px) scaleX(1.06)}}.composition-tree-canopy{animation:composition-tree-sway 5.5s ease-in-out infinite alternate}.composition-campus-prop:nth-child(2n) .composition-tree-canopy{animation-delay:-2.3s;animation-duration:6.5s}.composition-flow-particles{animation:composition-particle-flow var(--particle-duration, .4s) linear var(--particle-delay, 0s) infinite}.composition-flow-particles[data-stream]{animation:composition-particle-flow var(--particle-duration) linear var(--particle-delay) infinite,composition-particle-weave var(--weave-duration) ease-in-out var(--particle-delay) infinite alternate}.composition-particle-hit-area{animation:composition-particle-weave var(--weave-duration) ease-in-out var(--particle-delay) infinite alternate}}@keyframes composition-office-lights{to{opacity:.35}}@keyframes composition-cloud-lightning{0%,9%,to{opacity:0;stroke-dashoffset:18}1.5%{opacity:.6}4%{opacity:.4}6.5%{opacity:.15}8%{opacity:0;stroke-dashoffset:-100}}@keyframes composition-city-hover{0%{transform:translate(-4px,-4px)}to{transform:translate(4px,-12px)}}@keyframes composition-city-rotor{to{transform:rotate(360deg)}}@keyframes composition-city-signal{to{opacity:.65}}@keyframes composition-tree-sway{0%{transform:rotate(-2deg)}to{transform:rotate(2deg)}}@keyframes composition-particle-flow{0%{stroke-dashoffset:var(--particle-offset, 0px)}to{stroke-dashoffset:calc(var(--particle-offset, 0px) - var(--particle-spacing, 20px))}}@keyframes composition-particle-weave{0%{d:var(--particle-path-start)}to{d:var(--particle-path-end)}}@media(max-width:640px){.composition-section{--composition-top-space: var(--homepage-section-space, 72px);--composition-funnel-height: 180px;--terrain-overhang: 150px}.composition-heading.section-gap{padding-top:0}.composition-heading-copy,.composition-intro{padding-inline:0}.composition-heading h2{margin-top:0}.composition-heading-copy:before,.composition-intro:before{filter:none}.composition-heading-flow{padding-bottom:80px}.composition-campus-building.is-skyscraper{display:none}.composition-terrain{filter:none}.composition-surface{--underground-start: 260px;--underground-transition: 64px;--section-fade: var(--homepage-section-space, 72px);padding-bottom:var(--section-fade)}.composition-source{width:calc(100% - 8px);padding:10px 4px;flex-direction:column;gap:3px}.composition-outlet-route{display:none}.composition-outlet{height:144px}.extension-lanes{grid-template-columns:1fr;gap:12px}.extension-lane{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:16px;margin:0;padding:18px}.extension-lane>svg{grid-row:1 / 3;align-self:center}.extension-lane h3{margin-top:0}.extension-lane p{grid-column:2;margin-top:4px}.extension-lane-port{display:none}.integration-example{margin:24px 0 0;padding:18px;border-radius:16px}.integration-code-heading{padding:12px}.integration-code-block pre{padding:14px;font-size:.75rem}}.platform-to-composition#platform{padding-bottom:0}
