.topographic-flow{--topographic-flow-background:#fff;--topographic-flow-ink:#000}:root[data-theme=dark] .topographic-flow,.dark .topographic-flow{--topographic-flow-background:#000;--topographic-flow-ink:#fff}:root[data-theme=light] .topographic-flow{--topographic-flow-background:#fff;--topographic-flow-ink:#000}@media (prefers-color-scheme:dark){:root:not([data-theme=light]):not([data-theme=dark]):not(.light) .topographic-flow{--topographic-flow-background:#000;--topographic-flow-ink:#fff}}.topographic-flow{isolation:isolate;width:100%;height:100%;position:relative;overflow:hidden}.topographic-flow-canvas{z-index:1;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.topographic-flow-content{z-index:3;min-height:100%;position:relative}.topographic-flow[data-animate-entrance=true]>.topographic-flow-canvas{opacity:0}.topographic-flow[data-animate-entrance=true][data-ready=true]>.topographic-flow-canvas{opacity:1;animation:.8s cubic-bezier(.22,1,.36,1) both topographic-flow-enter}@keyframes topographic-flow-enter{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.topographic-flow[data-animate-entrance=true][data-ready=true]>.topographic-flow-canvas{animation:none}}:is(.component-showcase:has(.topographic-flow-demo),.component-preview-canvas:has(.topographic-flow-demo)){min-height:0}.component-showcase .component-preview-stage:has(>.topographic-flow-demo){min-height:0;padding:0}.topographic-flow-demo{align-self:stretch;width:100%}.topographic-flow-demo .topographic-flow{min-height:0}.component-showcase:has(.topographic-flow-demo){--component-background-preview-height:540px}