.feature-demo{--demo-border:color-mix(in oklch, var(--foreground) 11%, var(--background));--demo-surface:color-mix(in oklch, var(--foreground) 2%, var(--background));background:color-mix(in oklch, var(--muted) 10%, var(--background));flex-direction:column;justify-content:center;min-width:0;height:420px;padding:32px;font-size:12px;display:flex;position:relative;overflow:hidden}.feature-demo button{cursor:pointer}.feature-demo button:focus-visible{outline:2px solid var(--primary);outline-offset:3px}.feature-demo button:active{transform:translateY(1px)}.studio-art{isolation:isolate;justify-content:initial;--studio-panel:color-mix(in oklch, var(--foreground) 3%, var(--background));--studio-cool:#6fa99d;padding:32px}.studio-chart-art{height:250px;position:absolute;bottom:0;left:-10%;right:-12%}.studio-chart-art svg{width:100%;height:100%;overflow:visible}.studio-chart-art svg>path,.studio-chart-lines>path{vector-effect:non-scaling-stroke}.studio-chart-band,.studio-chart-comparison,.studio-chart-main{fill:none}.studio-chart-band{stroke:var(--studio-cool);stroke-width:30px;opacity:.09}.studio-chart-comparison{stroke:var(--studio-cool);stroke-width:1px;stroke-dasharray:3 4;opacity:.65}.studio-chart-area{fill:var(--primary);opacity:.08}.studio-chart-main{stroke:var(--primary);stroke-width:2px;stroke-linecap:round}.studio-chart-usual{stroke:color-mix(in oklch, var(--foreground) 42%, var(--background));stroke-linecap:butt}.studio-chart-marker{fill:none;stroke:var(--primary);stroke-width:1px;opacity:.6}.studio-chart-expected{color:var(--studio-cool);font:9px var(--font-mono), monospace;opacity:.8;position:absolute;top:calc(72% - 22px);left:calc(8.2% + 32px)}.studio-chart-dot{background:var(--primary);width:8px;height:8px;box-shadow:0 0 0 2px var(--background);position:absolute;top:33.08%;left:70.38%;translate:-50% -50%}.studio-chart-float{background:var(--studio-panel);border:1px solid color-mix(in oklch, var(--foreground) 15%, var(--background));white-space:nowrap;min-width:148px;padding:12px 14px;position:absolute;top:calc(33.08% - 86px);left:70.38%;transform:translate(calc(.5px - 100%));box-shadow:0 6px 18px #00000024}.studio-chart-float-heading{color:var(--muted-foreground);justify-content:space-between;align-items:center;gap:20px;font-size:10px;line-height:16px;display:flex}.studio-chart-float-heading time{opacity:.65;font-variant-numeric:tabular-nums;font-size:9px}.studio-chart-float:after{content:"";background:color-mix(in oklch, var(--primary) 40%, var(--background));width:1px;height:15px;position:absolute;top:100%;right:-1px}.studio-chart-float strong{font-variant-numeric:tabular-nums;margin-top:5px;font-size:14px;font-weight:500;line-height:21px;display:block}.studio-chart-float strong>span{color:var(--muted-foreground);font-size:11px;font-weight:400}.studio-replay-art{--replay-cycle:5.2s;--replay-loop:calc(var(--replay-cycle) * 4);--demo-bg:color-mix(in oklch, var(--muted) 10%, var(--background));height:296px;position:absolute;top:calc(50% - 148px);left:0;right:0}.studio-replay-art:before,.studio-replay-art:after{content:"";z-index:1;background:linear-gradient(90deg, var(--demo-bg), color-mix(in oklch, var(--demo-bg) 55%, transparent) 64px);pointer-events:none;width:calc(50% - 106px);height:232px;position:absolute;top:0;left:0}.studio-replay-art:after{left:auto;right:0;scale:-1 1}.studio-replay-track{animation:studio-record-feed var(--replay-cycle) infinite cubic-bezier(.77, 0, .175, 1), studio-record-loop var(--replay-loop) infinite steps(4);left:calc(50% - 314px);gap:20px;width:max-content;display:flex;position:absolute;top:8px;left:calc(round(down,50%,1px) - 314px)}.studio-record{background:var(--studio-panel);border:1px solid color-mix(in oklch, var(--foreground) 14%, var(--background));width:196px;height:216px;position:relative}.studio-record-page{background:var(--background);border-bottom:1px solid var(--demo-border);width:194px;height:124px;display:block}.studio-record-page .wf-chrome{fill:var(--studio-panel)}.studio-record-page .wf-1{fill:color-mix(in oklch, var(--foreground) 5%, var(--background))}.studio-record-page .wf-2{fill:color-mix(in oklch, var(--foreground) 13%, var(--background))}.studio-record-page .wf-3{fill:color-mix(in oklch, var(--foreground) 30%, var(--background))}.studio-record-page .wf-line,.studio-record-page .wf-dash,.studio-record-page .wf-rule,.studio-record-page .wf-hot{fill:none;stroke:color-mix(in oklch, var(--foreground) 16%, var(--background));stroke-width:1px}.studio-record-page .wf-dash{stroke-dasharray:3 3}.studio-record-cursor{--rest:color-mix(in oklch, var(--foreground) 45%, var(--background));color:var(--rest)}.studio-record-page .wf-hot,.studio-record-trail,.studio-record-click{fill:none;stroke:currentColor;stroke-width:1px}.studio-record-trail{stroke-linecap:round;opacity:.8}.studio-record-pointer{fill:var(--foreground);stroke:var(--background);stroke-width:1.5px;paint-order:stroke}.studio-record-info{color:var(--muted-foreground);padding:12px;font-size:10px;line-height:14px}.studio-record-info>div:first-child{justify-content:space-between;align-items:baseline;display:flex}.studio-record-info strong{color:var(--foreground);font-size:12px;font-weight:450;line-height:16px}.studio-record-info time,.studio-scan-result time{font:10px var(--font-mono), monospace;font-variant-numeric:tabular-nums}.studio-record-wave{--wave:color-mix(in oklch, var(--foreground) 22%, var(--background));border-bottom:1px solid var(--demo-border);align-items:flex-end;gap:4px;height:26px;margin-top:10px;display:flex}.studio-record-wave>i{background:var(--wave);width:2px}.studio-record-moment,.studio-record-cursor,.studio-record-link{animation:var(--replay-loop) calc((var(--slot) - 1) * var(--replay-cycle)) infinite backwards}.studio-record-moment{transform-origin:bottom;height:24px;animation-name:studio-moment;transform:scaleY(.5)}.studio-record-cursor{animation-name:studio-trouble}.studio-record-link{left:calc(12px + var(--moment) * 6px);z-index:3;background:var(--primary);clip-path:inset(0 0 100%);width:2px;animation-name:studio-link;position:absolute;top:202px;bottom:-29px}.studio-scanner{top:0;left:calc(50% - 106px);z-index:2;pointer-events:none;width:212px;height:232px;position:absolute;left:calc(round(down,50%,1px) - 106px);overflow:hidden}.studio-scanner>i{border:0 solid var(--primary);width:12px;height:12px;position:absolute}.studio-scanner>i:first-child{border-top-width:1px;border-left-width:1px;top:0;left:0}.studio-scanner>i:nth-child(2){border-top-width:1px;border-right-width:1px;top:0;right:0}.studio-scanner>i:nth-child(3){border-bottom-width:1px;border-right-width:1px;bottom:0;right:0}.studio-scanner>i:nth-child(4){border-bottom-width:1px;border-left-width:1px;bottom:0;left:0}.studio-scan-beam{border-bottom:1px solid var(--primary);background:linear-gradient(transparent, color-mix(in oklch, var(--primary) 16%, transparent));height:48px;animation:studio-scan-pass var(--replay-cycle) infinite linear;position:absolute;top:0;left:0;right:0}.studio-finding-slot{top:252px;left:calc(50% - 144px);z-index:2;border:1px solid color-mix(in oklch, var(--foreground) 16%, var(--background));background:var(--studio-panel);width:288px;height:44px;position:absolute;left:calc(round(down,50%,1px) - 144px)}.studio-finding-slot>div{white-space:nowrap;align-items:center;gap:10px;padding:0 14px;display:flex;position:absolute;inset:0}.studio-slot-scanning{color:var(--muted-foreground);animation:studio-slot-scanning var(--replay-cycle) infinite}.studio-live-mark{background:var(--primary);width:5px;height:5px;margin:0 5px;animation:1s steps(2,jump-none) infinite studio-live}.studio-scan-result{opacity:0;animation:studio-finding var(--replay-loop) calc(var(--slot) * var(--replay-cycle)) infinite backwards}.studio-scan-result>svg{color:var(--primary);flex-shrink:0}.studio-scan-result strong{font-size:12px;font-weight:450}.studio-scan-result time{color:var(--muted-foreground);margin-left:auto}@keyframes studio-record-feed{0%,80%{transform:translate(0)}98%,to{transform:translate(-216px)}}@keyframes studio-record-loop{to{translate:-864px}}@keyframes studio-scan-pass{0%{opacity:0;transform:translateY(-48px)}5%{opacity:1}25%{opacity:1;transform:translateY(184px)}28%,to{opacity:0;transform:translateY(184px)}}@keyframes studio-live{to{opacity:.25}}@keyframes studio-slot-scanning{0%,29%{opacity:1}32%,84%{opacity:0}90%,to{opacity:1}}@keyframes studio-moment{0%,4.4%{background:var(--wave);animation-timing-function:cubic-bezier(.23,1,.32,1);transform:scaleY(.5)}5.6%,19.7%{background:var(--primary);transform:none}20.7%,to{background:var(--wave);transform:scaleY(.5)}}@keyframes studio-trouble{0%,4.4%{color:var(--rest)}5.6%,19.7%{color:var(--primary)}20.7%,to{color:var(--rest)}}@keyframes studio-link{0%,5.6%{clip-path:inset(0 0 100%);opacity:1;animation-timing-function:cubic-bezier(.23,1,.32,1)}6.8%,19.7%{clip-path:inset(0);opacity:1}20.5%{clip-path:inset(0);opacity:0}20.6%,to{clip-path:inset(0 0 100%);opacity:0}}@keyframes studio-finding{0%,6.6%{opacity:0;animation-timing-function:cubic-bezier(.23,1,.32,1);transform:translateY(-4px)}8%,19.7%{opacity:1;transform:none}20.5%,to{opacity:0;transform:none}}.studio-replay-art[data-replay-motion=paused] *{animation-play-state:paused}@media (prefers-reduced-motion:reduce){.studio-scan-beam,.studio-slot-scanning{display:none}.studio-scan-result[style*="--slot: 0"],.studio-scan-result[style*=--slot\:0]{opacity:1}.studio-record:nth-child(2) .studio-record-moment{background:var(--primary);transform:none}.studio-record:nth-child(2) .studio-record-cursor{color:var(--primary)}.studio-record:nth-child(2) .studio-record-link{clip-path:none}}@keyframes studio-chart-draw{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@keyframes studio-chart-reveal{0%{opacity:0}}@keyframes studio-chart-label-in{0%{opacity:0;translate:0 8px}to{opacity:1;translate:0}}@media (prefers-reduced-motion:no-preference){[data-chart-motion] .studio-chart-lines{animation:1.2s cubic-bezier(.22,1,.36,1) both studio-chart-draw}[data-chart-motion] .studio-chart-area,[data-chart-motion] .studio-chart-hatch{animation:.6s ease-out .35s both studio-chart-reveal}[data-chart-motion] .studio-chart-marker,[data-chart-motion] .studio-chart-dot{animation:.3s ease-out .8s both studio-chart-reveal}[data-chart-motion] .studio-chart-float{animation:.4s ease-out .9s both studio-chart-label-in}.studio-chart-art[data-chart-motion=waiting] *{animation-play-state:paused}}@keyframes studio-surface-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (width<=639px){.studio-art{padding:24px}.studio-chart-art{height:230px;bottom:0}}.studio-simple-stat{z-index:1;pointer-events:none;margin-top:24px;position:relative}.studio-simple-stat strong{letter-spacing:-1.5px;font-size:39px;font-weight:450;line-height:1.2;display:block}.studio-simple-stat>span{color:var(--muted-foreground);align-items:center;gap:12px;margin-top:5px;font-size:11px;display:flex}.studio-simple-stat i{color:var(--primary);font-style:normal}.studio-builder{justify-content:center}.blueprint-goal{border:1px solid var(--demo-border);background:var(--background);align-items:center;gap:12px;height:44px;padding:0 8px 0 14px;font-size:13px;display:flex}.blueprint-goal-mark{color:var(--primary);flex-shrink:0}.blueprint-goal button{background:var(--primary);width:28px;height:28px;color:var(--primary-foreground,#fff);place-items:center;margin-left:auto;display:grid}.blueprint-status{height:28px;color:var(--muted-foreground);font-variant-numeric:tabular-nums;padding-left:38px;font-size:10px;line-height:28px;animation:.3s both studio-chart-reveal;position:relative}.blueprint-status:before,.blueprint-status:after{content:"";position:absolute}.blueprint-status:before{background:var(--demo-border);width:1px;top:0;bottom:0;left:21px}.blueprint-status:after{background:var(--primary);width:5px;height:5px;top:12px;left:19px}.blueprint-canvas{border:1px dashed var(--demo-border);grid-template-rows:126px 126px;grid-template-columns:1fr 1fr;gap:10px;padding:10px;display:grid}.blueprint-module{border:1px solid var(--demo-border);background:var(--studio-panel);min-width:0;padding:14px;animation:.4s .1s both studio-surface-in}.blueprint-module span{color:var(--muted-foreground);white-space:nowrap;font-size:11px;line-height:16px}.blueprint-module>span{display:block}.blueprint-module strong{letter-spacing:-.6px;font-variant-numeric:tabular-nums;margin-top:2px;font-size:24px;font-weight:450;line-height:30px;display:block}.blueprint-module strong>i{color:var(--studio-cool);font:10px var(--font-mono), monospace;letter-spacing:0;margin-left:4px}.blueprint-funnel{flex-direction:column;grid-row:span 2;display:flex}.blueprint-stages{flex:1;grid-template-columns:repeat(3,1fr);gap:8px;min-height:0;margin-top:14px;display:grid}.blueprint-stages>div{flex-direction:column;min-width:0;display:flex}.blueprint-stage-bar{border-bottom:1px solid color-mix(in oklch, var(--foreground) 30%, var(--background));background:repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in oklch, var(--foreground) 7%, transparent) 4px 5px);flex:1;margin-bottom:8px;position:relative}.blueprint-stage-bar>i{background:color-mix(in oklch, var(--foreground) 16%, var(--background));color:var(--foreground);font:10px/1 var(--font-mono), monospace;padding:5px 6px;animation:.7s cubic-bezier(.22,1,.36,1) .3s both blueprint-rise;position:absolute;inset:auto 0 0}.blueprint-stages>div:nth-child(2) i{animation-delay:.4s}.blueprint-stages>div:last-child i{background:var(--primary);color:var(--primary-foreground,#fff);animation-delay:.5s}.blueprint-stages span{font-size:10px;line-height:14px}.blueprint-stages b{font-variant-numeric:tabular-nums;font-size:12px;font-weight:500;line-height:16px}@keyframes blueprint-rise{0%{clip-path:inset(100% 0 0)}to{clip-path:inset(0)}}.blueprint-source{animation-delay:.25s}.blueprint-source>div{gap:8px;margin-top:12px;display:grid}.blueprint-source>div>div{align-items:center;gap:8px;display:flex}.blueprint-source>div>div>span{width:44px;font-size:10px;line-height:14px}.blueprint-source i{background:color-mix(in oklch, var(--foreground) 6%, transparent);flex:1;height:6px}.blueprint-source b{background:color-mix(in oklch, var(--foreground) 30%, var(--background));transform-origin:0;height:100%;animation:.6s cubic-bezier(.22,1,.36,1) .45s both blueprint-grow;display:block}.blueprint-source>div>div:first-child b{background:color-mix(in oklch, var(--foreground) 70%, var(--background))}.blueprint-source em{text-align:right;width:24px;font:normal 10px var(--font-mono), monospace}.blueprint-source>div>div:not(:first-child) em{color:var(--muted-foreground)}@keyframes blueprint-grow{0%{transform:scaleX(0)}}.blueprint-growth{animation-delay:.4s;position:relative}.blueprint-growth svg{width:calc(100% - 28px);height:34px;position:absolute;bottom:14px;left:14px;overflow:visible}.blueprint-growth path{fill:none;stroke:color-mix(in oklch, var(--foreground) 70%, var(--background));stroke-width:1.5px;stroke-linejoin:round;vector-effect:non-scaling-stroke}.blueprint-growth .blueprint-growth-area{fill:color-mix(in oklch, var(--foreground) 5%, transparent);stroke:none}.blueprint-growth .blueprint-growth-end{stroke:var(--primary);stroke-width:5px;stroke-linecap:square}@media (width<=639px){.studio-simple-stat{margin-top:34px}.blueprint-goal{gap:8px;font-size:12px}.blueprint-module{padding:10px}.blueprint-canvas{gap:8px;padding:8px}.blueprint-stages{gap:4px}.blueprint-stage-bar>i{padding:4px}.blueprint-stages span{font-size:9px}.blueprint-source>div>div{gap:4px}.blueprint-growth svg{width:calc(100% - 20px);bottom:10px;left:10px}}@media (prefers-reduced-motion:reduce){.feature-demo *{transition:none!important;animation:none!important}}.studio-chart-hatch-line{fill:none;stroke:var(--primary);stroke-width:.6px;opacity:.28}.hero-signal-rail,.hero-signal-flow,.hero-processor-pin{fill:none;stroke:color-mix(in oklch, var(--foreground) 14%, var(--background));stroke-width:1px;vector-effect:non-scaling-stroke}.hero-processor-pin{stroke:color-mix(in oklch, var(--foreground) 28%, var(--background));stroke-width:2px}.hero-signal-flow{stroke:var(--primary);stroke-width:1.5px;stroke-dasharray:.06 .94;animation:2.8s linear infinite hero-signal-travel}.hero-signal-output-flow{stroke-dasharray:.25 .75;animation-duration:1.6s}@keyframes hero-signal-travel{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}.hero-port{fill:var(--background);stroke:color-mix(in oklch, var(--foreground) 30%, var(--background));stroke-width:1px;background:var(--background);box-shadow:0 0 0 1px color-mix(in oklch, var(--foreground) 30%, var(--background))}.hero-port-active{fill:var(--primary);stroke:var(--background);stroke-width:2px}.hero-chip,.hero-card{box-shadow:0 0 0 1px color-mix(in oklch, var(--foreground) 11%, transparent), 0 1px 2px -1px oklch(0% 0 0/.06), 0 2px 4px 0 oklch(0% 0 0/.04)}.hero-card{box-shadow:0 0 0 1px color-mix(in oklch, var(--foreground) 12%, transparent), 0 1px 2px -1px oklch(0% 0 0/.06), 0 12px 32px -8px oklch(0% 0 0/.14)}.dark .hero-chip,.dark .hero-card{box-shadow:0 0 0 1px oklch(100% 0 0/.1)}.hero-evidence{background:color-mix(in oklch, var(--foreground) 3%, var(--background));box-shadow:0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent)}.hero-processor{box-shadow:inset 0 0 0 6px var(--background), inset 0 0 0 7px var(--border), 0 10px 28px -6px oklch(0% 0 0/.18)}.hero-processor:before{content:"";pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.8' d='M0 0h128v128H0z'/%3E%3C/svg%3E");position:absolute;inset:7px}.hero-processor-glow{pointer-events:none;background:radial-gradient(closest-side, color-mix(in oklch, var(--primary) 16%, transparent), transparent);position:absolute;inset:-48px}@media (prefers-reduced-motion:reduce){.hero-signal-flow{stroke-dasharray:none;opacity:.25;animation:none}}
