.composition-section{--composition-top-space: 112px;--composition-funnel-height: 220px;--composition-bottom-space: 96px;--terrain-overhang: 170px;--composition-terrain-width: min(94vw, 1600px);--composition-connection-color: #ffffff;--composition-outgoing-color: var(--text-secondary);position:relative;padding-top:var(--composition-top-space);color:#fff;background:var(--background);overflow-x:clip}[data-theme=light] .composition-section{--composition-outgoing-color: #d8dbe0}.composition-workflow-connection{--composition-connection-color: var(--composition-outgoing-color);position:absolute;top:0;left:0;z-index:3;max-width:none;overflow:visible;pointer-events:none}.composition-workflow-connection path{fill:none;stroke-linecap:round;stroke-linejoin:round}.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;visibility:hidden;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)}[data-theme=dark] .composition-clouds{visibility:visible}.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-family:var(--font-family-heading);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,.workflow-connection-pulses{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-click-pulse,.composition-terrain .composition-click-pulse{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:8 192;opacity:0;vector-effect:non-scaling-stroke;pointer-events:none}.composition-terrain .composition-click-pulse{stroke:var(--descent-stroke)}.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-examples{padding-bottom:var(--composition-bottom-space)}.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,.workflow-connection-line{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:var(--composition-terrain-width);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-controller:focus-visible{outline:2px solid var(--primary-color);outline-offset:4px}.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:#cbd0d8;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,.composition-campus-prop{overflow:visible}.composition-campus-shadow{fill:#0e081c;opacity:.18}.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)}[data-theme=light] .composition-terrain{filter:none}[data-theme=light] .composition-terrain .composition-trench-interior{fill:none;stroke:none}.composition-trench-bevel{visibility:hidden}[data-theme=light] .composition-terrain .composition-trench-wall{fill:var(--trench-wall-fill);stroke:#bdaacf}[data-theme=light] .composition-terrain .composition-trench-bevel{visibility:visible;stroke:none}[data-theme=light] .composition-subsoil,[data-theme=light] .composition-subsoil-contours,[data-theme=light] .composition-underground-glow{visibility:hidden}.composition-terrain .composition-descent-line{--particle-glow: var(--composition-connection-color);stroke:var(--descent-stroke)}.composition-merge-core{overflow:visible}.composition-core-halo{filter:blur(5px)}.composition-terrain .composition-core-torus-ring{stroke:#afa1ce;stroke-width:1.2}.composition-terrain .composition-core-torus-wall{stroke:#665475;stroke-width:1.2}.composition-terrain .composition-core-torus-inner{fill:#21182e;stroke:#76628c;stroke-width:1}.composition-terrain .composition-core-winding{fill:none;stroke:#372b48;stroke-width:2;opacity:.65}.composition-core-aura{fill:none;opacity:.9;filter:drop-shadow(0 0 4px #a88aff)}.composition-core-plasma{stroke-width:3.5}.composition-core-flux{stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-dasharray:12 38}.composition-core-port{fill:#fff}.composition-outlet{--composition-connection-color: var(--composition-outgoing-color);--source-color: var(--composition-connection-color);height:240px}.composition-outlet-lane,.composition-outlet-pulse{stroke:var(--composition-connection-color)}.composition-outlet-pulse,.workflow-connection-pulses{--particle-spacing: 100px;--particle-duration: 10s;--particle-glow: var(--composition-connection-color);stroke-width:2;stroke-dasharray:6 94}.composition-outlet-lane,.workflow-connection-line{opacity:.7}.extension-lanes{position:relative;display:grid;grid-template-columns:repeat(var(--extension-count),minmax(0,1fr));list-style:none;padding:0;margin:0}.extension-lane{--lane-accent: color-mix(in srgb, var(--lane-color) 60%, var(--text-primary));position:relative;margin:0 clamp(4px,.7vw,8px);padding:24px clamp(8px,1.4vw,20px);border:1px solid color-mix(in srgb,var(--lane-color) 30%,var(--border));border-radius:16px;background:linear-gradient(160deg,color-mix(in srgb,var(--lane-color) 7%,var(--surface)),var(--surface))}.extension-lane-port{position:absolute;left:50%;top:-4px;width:7px;height:7px;transform:translate(-50%);border:1px solid var(--composition-outgoing-color);border-radius:50%;background:var(--surface)}.extension-lane>svg{color:var(--lane-accent)}.extension-lane h3{margin-top:18px;color:var(--text-primary);font-size:1rem;font-weight:600}.extension-lane p{margin-top:8px;color:var(--text-secondary);font-size:.8rem;line-height:1.6}.extension-lane[data-selected=true]{border-color:var(--lane-accent);background:linear-gradient(160deg,color-mix(in srgb,var(--lane-color) 16%,var(--surface)),var(--surface))}.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-accent);outline-offset:4px}.integration-example{margin:32px 8px 0;padding:clamp(20px,3vw,36px);font-family:var(--font-family-body);border:1px solid var(--border);border-radius:20px;color:var(--text-primary)}@media(min-width:1024px){.integration-example{margin-right:calc(100% / var(--extension-count) + 8px)}}.integration-example-heading{max-width:720px}.integration-example-heading h3{font-family:var(--font-family-heading);font-size:clamp(1.5rem,2vw,2rem);font-weight:600;line-height:1.3;letter-spacing:-.035em}.integration-example-heading>p:last-child{margin-top:12px;color:var(--text-secondary);font-size:1rem;line-height:1.7}.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-family:var(--font-family-heading);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{margin-top:18px;color:var(--text-secondary);font-size:.8rem;line-height:1.65}@media(max-width:900px){.integration-example-code{grid-template-columns:minmax(0,1fr)}}@media(prefers-reduced-motion:no-preference){[data-theme=dark] .composition-cloud-layer{animation:composition-cloud-drift 18s ease-in-out -5s infinite alternate}[data-theme=dark] .composition-cloud-layer.is-far{animation-delay:-12s;animation-duration:30s;animation-direction:alternate-reverse}[data-theme=dark] .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 12s ease-in-out var(--drone-delay) infinite alternate}.composition-city-rotor{animation:composition-city-rotor .55s linear infinite}.composition-core-aura{animation:composition-core-pulse 4s ease-in-out infinite alternate}.composition-core-flux{animation:composition-core-circulate 7s linear infinite}@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,.workflow-connection-pulses{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-click-pulse{animation:composition-click-transfer .65s linear var(--click-pulse-delay, 0ms) 1 forwards,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(-20px,-4px)}50%{transform:translateY(-24px)}to{transform:translate(20px,-12px)}}@keyframes composition-city-rotor{to{transform:rotate(360deg)}}@keyframes composition-core-pulse{to{opacity:.55}}@keyframes composition-core-circulate{to{stroke-dashoffset:-100}}@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-click-transfer{0%{stroke-dashoffset:0;opacity:.7}90%{opacity:.7}to{stroke-dashoffset:-108;opacity:0}}@media(prefers-reduced-motion:reduce){.composition-click-pulse,.composition-terrain .composition-click-pulse{opacity:.6;stroke-dasharray:none}}@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-bottom-space: 48px}.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-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}