:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh}#root{width:100%;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{box-sizing:border-box}.app{width:100%;min-height:100vh;display:flex;flex-direction:column}.header{padding:1.5rem 2rem;border-bottom:1px solid rgba(255,255,255,.1)}.header h1{margin:0;font-size:1.25rem;font-weight:500;letter-spacing:-.02em}.tabs{display:flex;gap:.5rem;padding:1rem 2rem;border-bottom:1px solid rgba(255,255,255,.1)}.tab{padding:.5rem 1rem;background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff9;font-size:.875rem;cursor:pointer;transition:all .2s ease}.tab:hover{background:#ffffff0d;color:#fffc}.tab.active{background:#ffffff1a;border-color:#ffffff4d;color:#fff}.main{flex:1;display:flex;gap:2rem;padding:2rem;justify-content:center;align-items:flex-start}.preview{width:402px;height:875px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#ffffff05;border-radius:12px;border:1px solid rgba(255,255,255,.08);overflow:hidden}.animation-container{width:402px;height:875px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.phone-frame{width:100%;height:100%;background:#fff;border-radius:40px;display:flex;flex-direction:column;padding:60px 24px 24px;position:relative}.phone-header{text-align:center;margin-bottom:32px}.phone-header h1{font-size:28px;font-weight:600;color:#1a1a1a;margin:0 0 8px}.phone-header p{font-size:16px;color:#00000080;margin:0}.phone-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.phone-input-container{margin-top:auto;width:100%;overflow:hidden}.phone-input{width:100%;display:flex;align-items:center;gap:12px;padding:14px 16px;background:#0000000a;border-radius:16px;border:none}.phone-input-icon{width:20px;height:20px;color:#0000004d}.phone-input input{flex:1;border:none;background:none;font-size:16px;color:#1a1a1a;outline:none}.phone-input input::placeholder{color:#00000059}.phone-input-actions{display:flex;gap:8px}.phone-input-action{width:32px;height:32px;border-radius:50%;border:none;background:#0000000f;color:#00000080;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease}.phone-input-action:hover{background:#0000001a}.phone-input-container.expanded{background:#0000000a;border-radius:20px;overflow:hidden}.composer-expanded{padding:16px}.composer-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}.composer-close{width:36px;height:36px;border-radius:50%;border:none;background:#0000000f;color:#0009;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease}.composer-close:hover{background:#0000001a}.composer-title{font-size:16px;font-weight:600;color:#1a1a1a}.composer-prompt{font-size:15px;line-height:1.5;color:#000000b3;padding:12px 16px;background:#fff;border-radius:12px;margin-bottom:12px}.composer-actions{display:flex;justify-content:flex-end}.composer-action-button{display:flex;align-items:center;gap:8px;padding:10px 20px;border:none;border-radius:100px;font-size:14px;font-weight:500;cursor:pointer;transition:transform .2s ease,opacity .2s ease}.composer-action-button.primary{background:#1a1a1a;color:#fff}.composer-action-button:hover{transform:scale(1.02)}.composer-action-button:active{transform:scale(.98)}.animation-element{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120px;height:120px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:.875rem;color:#fff}.anim1-back{position:relative;width:302px;height:440px;overflow:hidden;border-radius:24px}.anim1-back>img{width:100%;height:100%;object-fit:cover}.anim1-front-wrapper{position:absolute;top:60px;left:0;right:0;display:flex;justify-content:center}.anim1-front{width:237px}.anim1-front img{width:100%;height:auto}.controls{width:280px;display:flex;flex-direction:column;gap:1.5rem}.control-section{display:flex;flex-direction:column;gap:.75rem}.control-section h3{margin:0;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:#ffffff80}.button-group{display:flex;gap:.5rem}.button-group button{flex:1;padding:.625rem 1rem;font-size:.875rem;background:#ffffff14;border:1px solid rgba(255,255,255,.12);border-radius:6px;color:#fff;cursor:pointer;transition:all .2s ease}.button-group button:hover:not(:disabled){background:#ffffff1f}.button-group button:disabled{opacity:.4;cursor:not-allowed}.slider-control{display:flex;align-items:center;gap:1rem}.slider-control input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:4px;background:#fff3;border-radius:2px;cursor:pointer}.slider-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:#fff;border-radius:50%;cursor:pointer}.slider-control .value{min-width:40px;font-size:.875rem;font-family:SF Mono,Monaco,Consolas,monospace;color:#ffffffb3}select{width:100%;padding:.625rem .875rem;font-size:.875rem;background:#ffffff14;border:1px solid rgba(255,255,255,.12);border-radius:6px;color:#fff;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' fill-opacity='0.5' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center}select:disabled{opacity:.4;cursor:not-allowed}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.checkbox-label input[type=checkbox]{width:14px;height:14px;accent-color:#667eea}.bezier-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.bezier-input{display:flex;flex-direction:column;gap:.25rem}.bezier-input label{font-size:.625rem;text-transform:uppercase;color:#fff6}.bezier-input input[type=number]{width:100%;padding:.5rem;font-size:.75rem;font-family:SF Mono,Monaco,Consolas,monospace;background:#ffffff14;border:1px solid rgba(255,255,255,.12);border-radius:4px;color:#fff;text-align:center}.bezier-input input[type=number]::-webkit-inner-spin-button,.bezier-input input[type=number]::-webkit-outer-spin-button{opacity:.3}.bezier-preview{margin-top:.5rem;padding:.5rem;background:#0003;border-radius:4px}.bezier-preview code{font-size:.75rem;font-family:SF Mono,Monaco,Consolas,monospace;color:#fff9}.swipe-stack-wrapper{display:flex;flex-direction:column;align-items:center;gap:20px;padding-top:20px}.swipe-stack{position:relative;width:280px;height:360px}.phone-frame .swipe-stack-wrapper{padding-top:0}@keyframes card-blur-exit-left{0%{transform:scale(1) translateY(0) translate(0) rotate(0);opacity:1;filter:blur(0)}to{transform:scale(.85) translateY(-150px) translate(-30px) rotate(-8deg);opacity:0;filter:blur(12px)}}@keyframes card-blur-exit-right{0%{transform:scale(1) translateY(0) translate(0) rotate(0);opacity:1;filter:blur(0)}to{transform:scale(.85) translateY(-150px) translate(30px) rotate(8deg);opacity:0;filter:blur(12px)}}@keyframes card-blur-enter-left{0%{opacity:0;transform:translateY(40px) translate(-25px) scale(.9) rotate(-6deg);filter:blur(8px)}to{opacity:1;transform:translateY(0) translate(0) scale(1) rotate(0);filter:blur(0)}}@keyframes card-blur-enter-right{0%{opacity:0;transform:translateY(40px) translate(25px) scale(.9) rotate(6deg);filter:blur(8px)}to{opacity:1;transform:translateY(0) translate(0) scale(1) rotate(0);filter:blur(0)}}.swipe-card.exiting-left{animation:card-blur-exit-left .5s cubic-bezier(.2,0,.2,1) forwards;pointer-events:none}.swipe-card.exiting-right{animation:card-blur-exit-right .5s cubic-bezier(.2,0,.2,1) forwards;pointer-events:none}.swipe-card.entering-left{animation:card-blur-enter-left .5s cubic-bezier(.2,.8,.2,1) backwards}.swipe-card.entering-right{animation:card-blur-enter-right .5s cubic-bezier(.2,.8,.2,1) backwards}@keyframes card-blur-up{0%{transform:scale(1) translateY(0);opacity:1;filter:blur(0)}to{transform:scale(.9) translateY(-180px);opacity:0;filter:blur(16px)}}.swipe-card.blur-up-exit{animation:card-blur-up .6s cubic-bezier(.25,.1,.25,1) forwards;animation-delay:.08s;pointer-events:none;z-index:10}@keyframes fade-out-quick{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}.swipe-card.fade-out-quick{animation:fade-out-quick .18s cubic-bezier(.4,0,1,1) both;transform-origin:center center;pointer-events:none}.refresh-button{display:flex;align-items:center;gap:8px;padding:12px 20px;background:transparent;border:none;color:#00000080;font-size:.9rem;font-weight:500;cursor:pointer;transition:color .2s ease}.refresh-button:hover{color:#000000b3}.refresh-button svg{width:18px;height:18px}.refresh-button:disabled{opacity:.4;cursor:not-allowed}.swipe-card{position:absolute;width:280px;height:360px;border-radius:24px;padding:24px;display:flex;flex-direction:column;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:pan-y;transform-origin:center center}.swipe-card:active{cursor:grabbing}.swipe-card-orb{width:90px;height:90px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center}.swipe-card-orb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;opacity:.9}.swipe-card-title{margin:0 0 8px;font-size:1.5rem;font-weight:600;color:#fff;text-align:center}.swipe-card-description{margin:0 0 auto;font-size:.875rem;line-height:1.5;color:#ffffffd9;text-align:center}.swipe-card-button{margin-top:16px;padding:10px 24px;border:1px solid rgba(255,255,255,.3);border-radius:100px;font-size:.75rem;font-weight:500;cursor:pointer;transition:transform .2s ease,opacity .2s ease;background:#ffffff26;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;box-shadow:0 2px 8px #0000001a,inset 0 1px #fff3}.swipe-card-button:hover{transform:scale(1.02);background:#fff3}.swipe-card-button:active{transform:scale(.98)}.debug-section{border-top:1px solid rgba(0,0,0,.1);padding-top:1rem}.debug-info{font-family:SF Mono,Monaco,Consolas,monospace;font-size:.75rem}.debug-row{display:flex;justify-content:space-between;padding:.25rem 0;color:#00000080}.debug-row span:last-child{color:#000c}.debug-cards{margin-top:.75rem;display:flex;flex-direction:column;gap:.5rem}.debug-card{display:grid;grid-template-columns:1fr repeat(4,auto);gap:.5rem;padding:.5rem;background:#0000000d;border-radius:4px;color:#00000080}.debug-card strong{color:#000c;font-weight:500}.debug-card span{text-align:right}@media(prefers-color-scheme:light){.header,.tabs{border-color:#0000001a}.tab{border-color:#00000026;color:#00000080}.tab:hover{background:#00000008;color:#000000b3}.tab.active{background:#0000000f;border-color:#0003;color:#213547}.preview{background:#00000005;border-color:#00000014}.control-section h3{color:#00000080}.button-group button{background:#0000000a;border-color:#0000001a;color:#213547}.button-group button:hover:not(:disabled){background:#00000014}.slider-control input[type=range]{background:#00000026}.slider-control input[type=range]::-webkit-slider-thumb{background:#213547}.slider-control .value{color:#0009}select{background-color:#0000000a;border-color:#0000001a;color:#213547;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23213547' fill-opacity='0.5' d='M2 4l4 4 4-4'/%3E%3C/svg%3E")}.bezier-input label{color:#0006}.bezier-input input[type=number]{background:#0000000a;border-color:#0000001a;color:#213547}.bezier-preview{background:#0000000a}.bezier-preview code{color:#0009}}.anim2-container{background:#fff;border-radius:40px}.carousel-viewport{width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:grab}.carousel-viewport:active{cursor:grabbing}.carousel-track{display:flex;flex-shrink:0;will-change:transform}.carousel-track img{display:block;height:200px;width:auto;flex-shrink:0;pointer-events:none}