.demo-container{min-height:100vh;padding-top:5rem;background:linear-gradient(135deg,hsl(var(--background)) 0,color-mix(in srgb,hsl(var(--primary)) 3%,hsl(var(--background))) 50%,hsl(var(--background)) 100%)}.demo-hero{max-width:1280px;margin:0 auto;padding:4rem 1.5rem;text-align:center}.demo-hero-content{max-width:800px;margin:0 auto}.demo-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:9999px;background:linear-gradient(135deg,var(--brand-purple-600),var(--brand-pink-600));color:white;font-size:.875rem;font-weight:600;margin-bottom:1.5rem;box-shadow:0 4px 12px rgba(124,58,237,.3)}.demo-title{font-size:3.5rem;font-weight:800;line-height:1.1;margin-bottom:1.5rem;background:linear-gradient(135deg,hsl(var(--foreground)),var(--brand-purple-600));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.demo-subtitle{font-size:1.25rem;line-height:1.6;color:hsl(var(--muted-foreground));max-width:700px;margin:0 auto}.demo-interactive{max-width:1400px;margin:0 auto;padding:4rem 1.5rem}.demo-flow-wrapper{position:relative;display:flex;flex-direction:column;gap:2rem}.demo-explanation{position:absolute;top:1rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.75rem;padding:.75rem 1.5rem;border-radius:9999px;background:linear-gradient(135deg,var(--brand-purple-600),var(--brand-pink-600));color:white;font-size:.9375rem;font-weight:600;box-shadow:0 8px 24px rgba(124,58,237,.4);white-space:nowrap;z-index:1000;pointer-events:none}.demo-flow-controls{display:flex;justify-content:center;margin-bottom:1rem}.demo-flow-container{width:100%;height:600px;background:linear-gradient(135deg,hsl(var(--background)) 0,color-mix(in srgb,hsl(var(--primary)) 2%,hsl(var(--background))) 100%);border-radius:1.5rem;border:1px solid hsl(var(--border));overflow:hidden}.demo-flow-node{cursor:grab!important}.demo-flow-node:active{cursor:grabbing!important}.demo-flow-node-selected{outline:2px solid var(--brand-purple-600);outline-offset:2px}.demo-check-handle{width:12px;height:12px;border:2px solid var(--brand-purple-600);background:white;border-radius:50%;transition:all .2s ease;opacity:0}.demo-check:hover .demo-check-handle{opacity:1}.demo-check-handle-source{background:var(--brand-purple-600)}.demo-check-handle-target{background:white}.demo-check-handle:hover{transform:scale(1.4);box-shadow:0 0 0 4px rgba(124,58,237,.2)}.react-flow__handle-connecting{background:var(--brand-pink-600)!important;border-color:var(--brand-pink-600)!important}.react-flow__handle-valid{background:var(--brand-green-600)!important;border-color:var(--brand-green-600)!important}.demo-check-drag-hint{font-size:.625rem;color:hsl(var(--muted-foreground));opacity:0;transition:opacity .2s;text-align:right}.demo-check:hover .demo-check-drag-hint{opacity:1}.demo-check{position:relative;background:linear-gradient(135deg,hsl(var(--card)),color-mix(in srgb,hsl(var(--primary)) 5%,hsl(var(--card))));border:2px solid hsl(var(--border));border-radius:1rem;padding:1.5rem;box-shadow:0 4px 20px rgba(0,0,0,.1);backdrop-filter:blur(10px);overflow:visible}.demo-check-dimmed{opacity:.3}.demo-check-animate-in{animation:checkSplitIn .4s ease-out forwards}@keyframes checkSplitIn{0%{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.demo-check-large{width:380px;padding:2rem}.demo-check-small{width:200px;padding:1.25rem}.demo-check-glow{position:absolute;inset:-10px;background:linear-gradient(135deg,var(--brand-purple-600),var(--brand-pink-600));border-radius:1.5rem;z-index:-1;filter:blur(20px);pointer-events:none}.demo-check-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.demo-check-id{font-family:Courier New,monospace;font-size:.875rem;font-weight:600;color:hsl(var(--muted-foreground))}.demo-check-id-small{font-size:.75rem}.demo-check-badge{padding:.25rem .75rem;border-radius:9999px;background:linear-gradient(135deg,var(--brand-purple-600),var(--brand-pink-600));color:white;font-size:.75rem;font-weight:600}.demo-check-amount{font-size:3rem;font-weight:800;background:linear-gradient(135deg,hsl(var(--primary)),var(--brand-purple-600));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem}.demo-check-amount-small{font-size:1.75rem;margin-bottom:.5rem}.demo-check-details{flex-direction:column}.demo-check-detail,.demo-check-details{display:flex;gap:.5rem}.demo-check-detail-label{font-size:.875rem;color:hsl(var(--muted-foreground));font-weight:500}.demo-check-detail-value{font-size:.875rem;color:hsl(var(--foreground));font-weight:600}.demo-check-date{font-size:.75rem;color:hsl(var(--muted-foreground));font-weight:500}.demo-split-button{background:linear-gradient(135deg,hsl(var(--primary)),var(--brand-purple-600));border:none;padding:1rem 2rem;font-size:1rem;font-weight:600;box-shadow:0 4px 20px rgba(124,58,237,.4);transition:all .3s ease;gap:.5rem;white-space:nowrap}.demo-split-button:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(124,58,237,.5)}.demo-split-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.react-flow__node{cursor:default!important}.react-flow__edge{transition:none}.react-flow__edge-path{stroke:var(--brand-purple-600);stroke-width:2;stroke-dasharray:5 5;animation:dash .5s linear infinite}@keyframes dash{to{stroke-dashoffset:-10}}.react-flow__background{background-color:transparent}.react-flow .react-flow__edges{z-index:1}.react-flow .react-flow__nodes{z-index:2}.demo-flow-help-panel{pointer-events:none}.demo-flow-help{background:linear-gradient(135deg,hsl(var(--card)),color-mix(in srgb,hsl(var(--primary)) 5%,hsl(var(--card))));border:1px solid hsl(var(--border));border-radius:.75rem;padding:.75rem 1.5rem;font-size:.875rem;font-weight:500;color:hsl(var(--foreground));box-shadow:0 4px 12px rgba(0,0,0,.1);backdrop-filter:blur(10px);white-space:nowrap}.demo-flow-controls-panel{background:hsl(var(--card))!important;border:1px solid hsl(var(--border))!important;border-radius:.5rem!important;box-shadow:0 4px 12px rgba(0,0,0,.1)!important}.demo-flow-controls-panel button{background:transparent!important;border:none!important;color:hsl(var(--foreground))!important;transition:all .2s ease!important}.demo-flow-controls-panel button:hover{background:hsl(var(--accent))!important;color:hsl(var(--primary))!important}.demo-flow-controls-panel button svg{fill:currentColor!important}.demo-flow-minimap{border-radius:.5rem!important;overflow:hidden!important;box-shadow:0 4px 12px rgba(0,0,0,.1)!important;background-color:hsl(var(--card))!important;border:1px solid hsl(var(--border))!important}.react-flow__minimap-mask{fill:hsl(var(--primary))!important;fill-opacity:.1!important}.react-flow__minimap-node{stroke:hsl(var(--border))!important;stroke-width:1!important}.demo-metrics{max-width:1280px;margin:0 auto;padding:4rem 1.5rem}.demo-metrics-header{text-align:center;margin-bottom:3rem}.demo-metrics-title{font-size:2.5rem;font-weight:800;margin-bottom:1rem;color:hsl(var(--foreground))}.demo-metrics-subtitle{font-size:1.125rem;color:hsl(var(--muted-foreground));max-width:600px;margin:0 auto}.demo-metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.demo-metric-card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:1rem;padding:2rem;text-align:center;transition:all .3s ease}.demo-metric-card:hover{border-color:hsl(var(--primary));box-shadow:0 8px 24px rgba(0,0,0,.1)}.demo-metric-icon{width:3rem;height:3rem;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;border-radius:1rem;background:linear-gradient(135deg,var(--brand-purple-600),var(--brand-pink-600));color:white}.demo-metric-value{font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,hsl(var(--primary)),var(--brand-purple-600));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.demo-metric-title{font-size:1.25rem;font-weight:700;color:hsl(var(--foreground));margin-bottom:.5rem}.demo-metric-description{font-size:.9375rem;line-height:1.6;color:hsl(var(--muted-foreground))}.demo-use-cases{max-width:1280px;margin:0 auto;padding:4rem 1.5rem}.demo-section-title{font-size:2.5rem;font-weight:800;text-align:center;margin-bottom:3rem;color:hsl(var(--foreground))}.demo-use-cases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.demo-use-case{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:1rem;padding:1.5rem;transition:all .3s ease}.demo-use-case:hover{border-color:hsl(var(--primary));transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.1)}.demo-use-case h3{font-size:1.125rem;font-weight:700;color:hsl(var(--foreground));margin-bottom:.5rem}.demo-use-case p{font-size:.9375rem;line-height:1.6;color:hsl(var(--muted-foreground))}@media (max-width:1024px){.demo-flow-container{height:500px}.demo-explanation{font-size:.8125rem;padding:.625rem 1.25rem;white-space:normal;text-align:center;max-width:90%}}@media (max-width:768px){.demo-title{font-size:2.5rem}.demo-subtitle{font-size:1rem}.demo-flow-container{height:450px}.demo-check-large{width:280px}.demo-check-small{width:160px}.demo-check-amount,.demo-metrics-title,.demo-section-title{font-size:2rem}.demo-check-amount-small{font-size:1.5rem}.demo-flow-help{font-size:.75rem;padding:.5rem 1rem;white-space:normal;text-align:center;max-width:280px}.demo-flow-minimap{display:none}}@media (max-width:640px){.demo-hero{padding:3rem 1rem}.demo-interactive{padding:2rem 1rem}.demo-metrics,.demo-use-cases{padding:3rem 1rem}.demo-title{font-size:2rem}}