@font-face{font-family:Inter Variable;font-style:normal;font-weight:100 900;font-display:swap;src:url(../../../fonts/Inter-VariableFont_opsz,wght.ttf) format("truetype")}@font-face{font-family:Inter Variable;font-style:italic;font-weight:100 900;font-display:swap;src:url(../../../fonts/Inter-Italic-VariableFont_opsz,wght.ttf) format("truetype")}body{margin:0;background-color:#fff;color:#141414;display:flex;flex-direction:column;min-height:100vh;padding:0;box-sizing:border-box;overflow-x:hidden;position:relative}.background-shapes-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;overflow:hidden;pointer-events:none}.top-background-shape{position:absolute;top:0;left:0;width:100%;height:1010px;background-image:radial-gradient(#fdfdfd,#fafafa 70%);clip-path:ellipse(140% 100% at 60% 0%);z-index:-2}.blob-shape{position:absolute;z-index:-1;opacity:.7;filter:blur(70px);pointer-events:none}.blob-shape-1{width:450px;height:400px;background-color:#fff0964d;top:-150px;left:-250px;border-radius:40% 60% 70% 30%/40% 50% 60%;transform:rotate(-15deg)}.blob-shape-2{width:500px;height:550px;background-color:#b4ffc833;top:300px;right:-250px;border-radius:60% 40% 30% 70%/50% 60% 40% 50%;transform:rotate(20deg)}.blob-shape-3{width:300px;height:350px;background-color:#ffc8b433;top:450px;left:-150px;border-radius:50% 50% 35% 65%/60% 40%;filter:blur(80px);opacity:.6;transform:rotate(5deg)}.container{max-width:1200px;margin:0 auto;padding:20px;z-index:1;position:relative}main{display:flex;flex-direction:column;gap:100px;padding:20px 0}section{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}section.visible{opacity:1;transform:translateY(0)}.section-title{text-align:center;margin-bottom:48px}.see-ctrlpotato-in-action{padding-bottom:20px}.highlight{display:inline-block;font-weight:700;background-color:transparent;transform:none;padding:0;color:inherit;border-bottom:none;text-shadow:none}.highlight.highlight-style-yellow-bg{background-color:#fff0b3;transform:rotate(-1deg);padding:2px 6px;border-radius:3px;box-shadow:1px 1px 3px #00000014;color:#141414}.highlight.highlight-style-underline{border-bottom:3px solid rgba(100,80,220,.6);padding-bottom:1px}.highlight.highlight-style-tint{background-color:#ffda4826;padding:2px 6px;border-radius:3px}.highlight.highlight-style-color{color:#4a6988}.highlight.highlight-style-shadow{text-shadow:0 0 8px rgba(100,80,220,.3)}.highlight.highlight-style-block-behind{position:relative;z-index:1;background-color:transparent;padding:0;box-shadow:none;border-bottom:none;text-shadow:none;color:inherit;transform:rotate(-1deg)}.highlight.highlight-style-block-behind:before{content:"";position:absolute;left:-.25em;right:-.25em;bottom:.05em;height:.3em;background-color:#ffda48ce;border-radius:4px;z-index:-1}h1{font-size:51px;font-weight:800;line-height:1.1;margin-bottom:16px}.headline-1,.headline-2{display:block}h2{font-size:36px;font-weight:700;margin-bottom:32px}h3{font-size:20px;font-weight:600;margin-bottom:8px}p{font-size:18px;line-height:1.6;margin-bottom:0;color:#333}.subheader{font-weight:500;font-size:19px;margin-bottom:32px;max-width:600px}.cta-button{padding:15px 28px;font-size:18px;font-weight:600;background-color:#29ff29;color:#000;border:2px solid #000000;border-radius:12px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease}.cta-button:hover{background-color:#0f0;box-shadow:3px 3px #000000e6;transform:translate(-1px,-1px)}.cta-button:active{transform:translate(0);box-shadow:0 0 #000000e6}.chip{display:inline-block;padding:2px 8px;background-color:#f6fff7;color:#131912;border-radius:999px;font-size:11px;position:absolute;top:-9px;right:-15px;cursor:default;letter-spacing:.15px;border:1px solid #202020;transform:rotate(2deg);box-shadow:0 1px 3px #5c5c5c66}.chip .chip-tooltip{visibility:hidden;width:auto;background-color:#2d2d2d;color:#fff;text-align:center;border-radius:6px;padding:8px;position:absolute;z-index:10;bottom:140%;left:50%;margin-left:-80px;opacity:0;transition:opacity .1s ease-in-out;font-size:12px;font-weight:500;line-height:1.4;pointer-events:none;box-shadow:0 4px 14px #00000040;white-space:nowrap}.chip:hover .chip-tooltip{visibility:visible;opacity:1}.chip .chip-tooltip:after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#2d2d2d transparent transparent transparent}.btn-arrow{font-size:24px;transition:transform .3s ease}.cta-button:hover .btn-arrow{transform:translate(5px)}@keyframes pulse-shadow{0%{box-shadow:0 0 #00e600b3}70%{box-shadow:0 0 0 10px #00e60000}to{box-shadow:0 0 #00e60000}}.pulse:after{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:inherit;z-index:-1;animation:pulse-shadow 2s infinite}.hero{display:flex;gap:40px;align-items:center;margin-bottom:80px}.hero-left,.hero-right{flex:1}.logo-showcase{position:relative;padding:0;margin-top:10px;display:flex;justify-content:center;align-items:center}.logo-all-in-one{display:block;max-width:80%;height:auto;-o-object-fit:contain;object-fit:contain;opacity:.9}.logo-showcase picture{display:contents}.demo-container{display:flex;gap:40px;align-items:center}.demo-visuals{flex:3;position:relative;z-index:2}.app-showcase{position:relative;width:100%;border-radius:12px}.bg-shapes{position:absolute;top:-50px;left:-50px;right:-50px;bottom:-50px;width:calc(100% + 100px);height:calc(100% + 100px);z-index:0}.circle{position:absolute;border-radius:50%}.circle-1{width:300px;height:300px;background:rgba(220,100,120,.5);bottom:0;left:5%}.circle-2{width:250px;height:250px;background:rgba(100,80,220,.4);top:0;right:0}.circle-3{width:200px;height:200px;background:rgba(20,180,120,.3);top:30%;left:30%}.app-window{position:relative;z-index:1;width:81%;max-width:650px;margin:25px auto;background:rgba(255,255,255,.15);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:18px;box-shadow:6px 6px 15px #00000026;border:1px solid rgba(255,255,255,.16);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;display:flex;flex-direction:column;padding:0}.app-window:hover{transform:translate(-1px,-1px);box-shadow:0 2px 8px #0000001a}.app-image{width:100%;height:auto;display:block;opacity:1;mix-blend-mode:normal}.top-right{top:20px;right:-60px;transform:rotate(5deg)}.bottom-left{bottom:45px;left:-40px;transform:rotate(-4deg)}.enlarge{font-size:25px}.demo-text{flex:2;padding-left:20px;padding-right:20px;padding-top:50px}.demo-text h3{margin-bottom:20px;font-size:24px}.feature-bullets{display:flex;flex-direction:column;gap:28px}.bullet-item p{margin:0;font-size:17.5px;color:#333;line-height:1.6}.bullet-item p strong{font-weight:600;color:#111;margin-right:.4em}.social-proof-badge{margin-top:16px;font-size:15px;color:#2a2a2ad9;display:inline-block;padding:10px 14px;font-weight:500}.social-proof-badge strong{font-weight:700;color:#2a2a2ad9}@keyframes textPulse{0%{text-shadow:0 0 0px rgba(0,0,0,.1)}50%{text-shadow:0 0 5px rgba(0,0,0,.15)}to{text-shadow:0 0 0px rgba(0,0,0,.1)}}.pulse-once{display:inline-block;animation:pulseOnce 3s infinite ease-in-out}@keyframes pulseOnce{0%,20%,to{transform:scale(1)}10%{transform:scale(1.02)}}.how-it-works-alternating{padding:60px;max-width:1100px;margin:100px auto 0;background-color:#fafafa}.workflow-step{display:flex;align-items:center;gap:100px;margin-bottom:60px;position:relative}.workflow-step.step-2 .workflow-description{order:1}.workflow-step.step-2 .workflow-visual{order:2}.workflow-step.step-4{flex-direction:column;align-items:center;gap:20px;margin-bottom:0}.workflow-visual{flex:1;border-radius:10px;box-shadow:0 8px 25px #00000026;overflow:hidden;position:relative}.video-center{width:100%;max-width:600px}.workflow-description{flex:1}.desc-left{text-align:right}.desc-right{text-align:left}.desc-center{text-align:center;max-width:600px;margin-bottom:20px}.workflow-description h3{font-size:22px;font-weight:600;margin-bottom:10px;color:#222}.workflow-description p{font-size:17px;line-height:1.6;color:#555}.video-element{width:100%;height:auto;display:block;cursor:pointer}.workflow-connector{height:80px;width:2px;border-left:2px dashed #ccc;margin:-25px auto 0;position:relative}.arrow-connector{position:absolute;z-index:1}.arrow-connector.right{top:50%;right:-25px;width:30px;height:20px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300e600' stroke-width='2'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;transform:translateY(-50%);animation:arrowPulse 1.5s infinite}.workflow-connector{height:200px;width:40px;position:relative;margin-bottom:20px}.flow-arrow-vertical{position:absolute;top:0;left:50%;height:100%;width:20px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300e600' stroke-width='2'%3E%3Cpath d='M12 5v14M5 12l7 7 7-7'/%3E%3C/svg%3E");background-position:bottom center;background-repeat:no-repeat;transform:translate(-50%);animation:arrowBounce 1.5s infinite}.workflow-path{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.7}#workflow-connector-path{stroke-dasharray:5;animation:drawPath 10s linear forwards}.feature-list{display:flex;flex-wrap:wrap;gap:32px}.feature-item{flex:1 0 45%;display:flex;gap:16px;align-items:flex-start;transition:transform .3s ease,opacity .3s ease,background-color .3s ease;padding:16px;border-radius:8px}.feature-item:hover{background-color:#00000005}.feature-text{flex:1}.feature-icon{font-size:32px}.testimonials{display:flex;gap:24px;flex-wrap:wrap}.testimonial{flex:1;min-width:280px;padding:24px;border:2px solid black;border-radius:12px;background-color:#f0fff0;transition:transform .3s ease,box-shadow .3s ease}.testimonial:hover{box-shadow:6px 6px #0000001a;transform:translate(-3px,-3px)}.testimonial-text{font-style:italic;margin-bottom:16px}.testimonial-author{font-weight:600}.qa-item{margin-bottom:16px;border:2px solid black;border-radius:12px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}.qa-item:hover{transform:translate(-3px,-3px);box-shadow:6px 6px #0000001a}.qa-question{width:100%;padding:16px;background-color:#ffde59;display:flex;justify-content:space-between;align-items:center;cursor:pointer;border:none;text-align:left;font-family:inherit}.qa-question h3{color:inherit;text-decoration:none;-webkit-text-fill-color:initial;margin:0;font-size:1.1rem;font-weight:600;text-align:left;flex-grow:1}.toggle{font-size:24px;font-weight:700;transition:transform .3s ease}.qa-item:hover .toggle{transform:rotate(90deg)}.qa-answer{padding:0 16px;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;background-color:#fff}.qa-answer.open{padding:16px;max-height:300px}.final-cta{text-align:center;padding:48px 24px;background-color:#f0fff0;border:2px solid black;border-radius:16px;position:relative;overflow:hidden;z-index:1}.final-cta:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 50% 50%,rgba(0,230,0,.05) 0%,rgba(255,255,255,0) 70%);z-index:0}.final-cta h2,.final-cta p,.final-cta button{position:relative}.final-cta p{margin-bottom:24px}.final-cta .cta-button{display:inline-flex;margin-top:24px}footer{margin-top:48px;padding:24px 0;text-align:center;border-top:1px solid #ddd}footer a{color:#1a1a1a;text-decoration:none;font-weight:600;position:relative}@keyframes arrowPulse{0%,to{opacity:.7;transform:translateY(-50%) translate(0)}50%{opacity:1;transform:translateY(-50%) translate(5px)}}@keyframes arrowBounce{0%,to{opacity:.7;transform:translate(-50%) translateY(0)}50%{opacity:1;transform:translate(-50%) translateY(5px)}}@keyframes drawPath{0%{stroke-dashoffset:1000}to{stroke-dashoffset:0}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.nowrap{white-space:nowrap;display:inline-block}.app-window-header{display:flex;align-items:center;padding:7px 12px;flex-shrink:0;position:relative}.window-buttons{display:flex;gap:6px}.window-button{width:8px;height:8px;border-radius:50%;border:.5px solid rgba(0,0,0,.15)}.button-red{background-color:#ff5f57df}.button-yellow{background-color:#ffbd2ee3}.button-green{background-color:#28c940df}#recording-visualizer{color:#000;display:flex;align-items:center;height:100%;padding:0 15px;gap:3px;position:absolute;left:48%;transform:translate(-50%);margin-right:0;z-index:1;margin-top:8px}.viz-bar{width:1px;background-color:#000;transition:height .05s ease-in-out}.wisndow-title{font-size:12px;font-weight:400;color:#fff6;position:absolute;left:52%;top:48%;transform:translate(-50%,-50%);letter-spacing:1.5px}.app-window-content{padding:5px 18px 13px 30px;flex-grow:1;overflow-y:auto;color:#fafafa;font-size:12px;line-height:1.4}.hint-section{margin-bottom:18px}.hint-title{font-weight:700;color:#000000d6;margin-bottom:15px;font-size:13px}.hint-list{list-style:none;padding-left:28px;margin:0}.hint-item{font-weight:500;margin-bottom:3px;color:#000000d6}.answer-section{margin-top:15px}.answer-title{font-weight:700;color:#000000d6;margin-bottom:22px;font-size:13px}.code-block{background-color:#1e1e1ebd;border-radius:6px;padding:12px 15px 25px 12px;overflow-x:auto;font-family:SF Mono,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:11px;line-height:1.5;color:#d4d4d4;margin:0;box-shadow:0 2px 8px #00000040}.code-block code{display:block;white-space:pre;opacity:1!important}.code-block code span{opacity:1!important}.code-keyword{color:#ff79c7;font-weight:400}.code-function{color:#4dfa7c}.code-param{color:#9cdcfe}.code-comment{color:#bcbcbc;font-style:italic}.code-variable{color:#9cdcfe}.code-number{color:#b892f1}.code-operator{color:#d4d4d4}.code-built_in{color:#f8a456}.code-block code span:not([class^=code-]){color:#d4d4d4}.app-image{display:none}.visualizer-annotation{position:absolute;top:-45px;left:calc(50% + 67px);transform:translate(-50%);display:flex;z-index:3;pointer-events:none}.visualizer-arrow-svg{margin-bottom:-15px;margin-right:-5px;filter:drop-shadow(1px 1px 1px rgba(0,0,0,.2));padding-top:10px}.visualizer-annotation-text{font-size:14px;font-weight:500;color:#535353;padding:2px 5px;white-space:nowrap}.annotation-bubble{position:absolute;background-color:#ffde59;border:2px solid black;border-radius:8px;padding:8px 12px;font-size:14px;font-weight:600;max-width:150px;z-index:2}.extra-features{margin-left:10px}.interactive-features-container{display:flex;gap:40px;align-items:flex-start;min-height:530px}.feature-tabs{flex:1;min-width:510px}.feature-tabs ul{list-style:none;padding:0;margin:0}.feature-tabs li{margin-bottom:8px}.feature-tab{width:100%;padding:15px 20px;background-color:#fff;border:2px solid #e0e0e0;border-radius:10px;cursor:pointer;text-align:left;font-family:inherit;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease,padding .3s ease}.feature-tab:hover{background-color:#f9f9f9;border-color:#ccc}.feature-tab.active{background-color:#ffde59;border-color:#000;box-shadow:3px 3px #000000e6;transform:translate(-1px,-1px);pointer-events:none}.feature-tab-title{font-size:18px;font-weight:600;margin:0;color:#141414}.feature-tab-desc{font-size:15px;line-height:1.5;margin:0;color:#555}.feature-tab.active .feature-tab-desc{margin-top:15px}.feature-content{flex:2;position:relative;border-radius:12px;overflow:hidden;min-height:500px}.feature-media-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:10px;box-sizing:border-box;transition:opacity .3s ease-in-out}.feature-media{height:auto;display:block;-o-object-fit:contain;object-fit:contain;border-radius:12px;max-width:70%;max-height:100%}.feature-media-wrapper[data-feature-id=mirroring]{padding:0!important;border-radius:22px!important;overflow:hidden!important}.feature-media-wrapper[data-feature-id=mirroring] .feature-media.video-element{-o-object-fit:contain!important;object-fit:contain!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;border-radius:22px!important}.mirror-link{cursor:pointer;color:#000;position:relative;transition:color .2s ease;text-decoration:none;padding-bottom:1px;border-bottom:1px dotted #5555554f}.mirror-link:hover{color:#034f00}@media (max-width: 480px){h1{font-size:32px}.headline-1,.headline-2{display:inline}.headline-1:after{content:" "}}@media (max-width: 768px){.container{padding:15px;overflow-x:hidden}main{gap:40px}.hero,.demo-container,.workflow-top-row{flex-direction:column;gap:80px}.hero-left,.hero-right{width:100%;text-align:center}.hero-left .subheader{margin:0 auto 45px}.hero-left .cta-button{margin:0 auto;display:inline-flex}.logo-all-in-one{max-width:100%}.demo-visuals{min-height:250px;max-width:110%}.app-window{width:92%;margin:25px auto}.demo-text{padding:0;text-align:center}.demo-text h3{font-size:30px;padding-bottom:15px}.feature-bullets{gap:40px;align-items:center}.bullet-item p{font-size:16px;text-align:center;max-width:400px}.how-it-works-alternating{padding:30px 15px;margin-top:50px;margin-bottom:30px}.interactive-features{margin-bottom:30px}.workflow-step{flex-direction:column!important;gap:20px!important;margin-bottom:60px}.workflow-step.step-2 .workflow-description,.workflow-step.step-2 .workflow-visual{order:initial!important}.workflow-step .workflow-description{order:1!important}.workflow-step .workflow-visual{order:2!important}.workflow-visual{flex:1;width:100%;max-width:400px}.workflow-description{flex:1;width:100%;text-align:center!important}.workflow-description h3{font-size:20px}.workflow-description p{font-size:16px}.workflow-connector,.arrow-connector,.flow-arrow-vertical{display:none!important}.testimonials{gap:16px}.testimonial{flex-basis:100%;min-width:unset;padding:16px}.feature-item{flex-basis:100%;gap:12px;padding:12px}.qa-item{margin-bottom:12px}.qa-question h3{font-size:16px;color:#141414!important;-webkit-text-fill-color:#141414!important;text-decoration:none!important}.qa-answer p{font-size:15px}.final-cta{padding:30px 15px}.final-cta h2{font-size:24px}.final-cta p{font-size:16px;margin-bottom:16px}.final-cta .cta-button{font-size:16px;padding:12px 24px;margin-top:16px}footer{margin-top:30px;padding:20px 0;font-size:14px}.footer-links span{display:block;margin:5px 0}.see-ctrlpotato-in-action{padding-bottom:0}.section-title.see-ctrlpotato-in-action{margin-bottom:40px;margin-top:10px}.annotation-bubble.top-right{position:absolute;top:0;right:-20px;bottom:auto;margin:15px 0;display:block;max-width:30%}.annotation-bubble.bottom-left{position:absolute;top:91%;right:auto;bottom:auto;left:-5px;margin:15px auto;display:block;max-width:30%}.circle-2{top:20px}h1{font-size:46px;padding-bottom:30px}h2{font-size:35px}.interactive-features-container{flex-direction:column;gap:0px;min-height:unset}.feature-tab{padding:12px 15px}.feature-tab-title{font-size:16px}.feature-tab-desc{font-size:14px}.toggle{margin-left:20px;color:#141414!important;-webkit-text-fill-color:#141414!important;text-decoration:none!important}.feature-media{max-width:100%}.feature-media-wrapper[data-feature-id=mirroring] .feature-media.video-element{border-radius:22px!important;box-shadow:0 0 15px #00000026!important;-o-object-fit:contain!important;object-fit:contain!important;width:auto!important;height:100%!important;max-width:none!important;max-height:none!important}.top-background-shape{height:1000px;clip-path:ellipse(150% 100% at 50% 0%)}.blob-shape{filter:blur(50px)}.blob-shape-1{width:300px;height:250px;top:-80px;left:-180px}.blob-shape-2{width:250px;height:300px;top:250px;right:-150px}.blob-shape-3{width:200px;height:250px;top:380px;left:-100px;filter:blur(60px)}}@media (max-width: 768px){body:before{overflow:hidden}.feature-tabs,.feature-content{width:100%;min-width:unset}.feature-media{max-width:100%}.feature-media-wrapper[data-feature-id=mirroring] .feature-media.video-element{max-width:-moz-fit-content;max-width:fit-content}}header{background-color:transparent;position:relative;z-index:2;transform:translateZ(0);-webkit-transform:translateZ(0);padding-top:env(safe-area-inset-top)}
