@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap");@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");:root{--grey-5:#f5f3f3;--grey-10:#e5e4e4;--grey-20:#d3d1d5;--grey-90:#3e3d3e;--black:#0a090a;--white:#ffffff;--purple-100:#6c18ff;--surface-0:#1c1b1f}*{box-sizing:border-box}*,body{margin:0;padding:0}body{font-family:DM Sans,sans-serif;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center}.preview-container,body{background:linear-gradient(135deg,#FF8651,#FFBEA8 50%,#A397F5)}.preview-container{width:100%;height:100vh;height:100dvh;border-radius:0;padding:calc(8px + env(safe-area-inset-top, 0px)) 8px calc(8px + env(safe-area-inset-bottom, 0px));overflow:hidden;box-sizing:border-box}.preview-wrapper{display:flex;flex-direction:column;gap:8px;height:100%;overflow:hidden}.tour-message{background:linear-gradient(46deg,rgba(240,232,255,1) 6%,rgba(255,255,255,1) 77%,rgba(255,237,231,1) 96%);border-radius:8px;padding:20px;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:16px}.tour-content{flex:1;min-width:300px}.tour-title{font-size:24px;font-weight:500;line-height:32px;color:var(--surface-0)}.tour-subtitle{font-size:16px;font-weight:400;line-height:24px;color:var(--surface-0)}.myop-logo{height:46px;width:170px;display:flex;align-items:center;gap:8px}.myop-logo svg{height:100%;width:auto}.main-container{display:flex;border-radius:8px;overflow:hidden;flex:1}.preview-panel{flex:1;background:var(--grey-5);position:relative;border-radius:8px 0 0 8px}.preview-iframe-wrapper{width:100%;height:100%;position:relative;border-radius:8px;overflow:hidden}.preview-iframe{width:100%;height:100%;border:none;border-radius:8px}.myop-badge{position:absolute;bottom:16px;right:16px;background:linear-gradient(135deg,#000000,#1a1a2e);color:white;padding:10px 16px;border-radius:8px;font-family:Poppins,sans-serif;font-size:13px;font-weight:400;display:flex;align-items:center;gap:8px;text-decoration:none;box-shadow:0 4px 12px rgba(0,0,0,.3);z-index:100;transition:transform .2s ease,box-shadow .2s ease}.myop-badge:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.4)}.myop-badge svg{height:18px;width:auto}.myop-badge-text{background:linear-gradient(90deg,#FF8651,#FFBEA8 50%,#A397F5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:500}.drag-cover{position:fixed;inset:0;z-index:9999;cursor:grabbing}.connect-panel{position:fixed;top:108px;right:8px;bottom:8px;width:calc(50% - 12px);background:var(--white);border-radius:0 8px 8px 0;overflow:hidden;display:flex;flex-direction:column;z-index:10}.connect-panel .mobile-modal-header{display:none}.connect-panel-content{flex:1;overflow:auto}.connect-iframe{width:100%;height:100%;border:none}.connect-component-container{position:absolute;top:10px;width:100%;height:100%;overflow:auto}.main-container:not(.not-found-layout) .preview-panel{margin-right:calc(50% + 4px)}.loading-message{font-size:14px}.error-message,.loading-message{display:flex;align-items:center;justify-content:center;height:100%;color:var(--grey-90)}.error-message{font-size:16px}.error-content{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}.error-text{color:var(--grey-90)}.create-button{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:linear-gradient(135deg,#FF8651,#A397F5);color:white;font-family:DM Sans,sans-serif;font-size:14px;font-weight:500;text-decoration:none;border-radius:8px;transition:transform .2s ease,box-shadow .2s ease}.create-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(108,24,255,.3)}.not-found-layout{justify-content:center}.not-found-panel{flex:none;width:100%;max-width:100%;border-radius:8px}.not-found-container{display:flex;align-items:center;justify-content:center;height:100%;min-height:400px;padding:40px;animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}.not-found-content{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:500px}.not-found-icon{margin-bottom:24px;animation:pulse 2s ease-in-out infinite}.not-found-icon svg{width:120px;height:120px}.not-found-circle{animation:rotate 20s linear infinite;transform-origin:center}.not-found-title{font-size:28px;font-weight:600;color:var(--surface-0);margin-bottom:12px;line-height:1.3}.not-found-subtitle{font-size:16px;color:var(--grey-90);margin-bottom:32px;line-height:1.5}.not-found-cta{flex-direction:column;gap:20px}.cta-divider,.not-found-cta{display:flex;align-items:center}.cta-divider{gap:16px;width:100%}.cta-divider:after,.cta-divider:before{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--grey-20),transparent)}.cta-divider span{font-size:14px;color:var(--grey-90);white-space:nowrap}.create-button-large{display:inline-flex;align-items:center;gap:10px;padding:16px 32px;background:linear-gradient(135deg,#FF8651,#A397F5);color:white;font-family:DM Sans,sans-serif;font-size:16px;font-weight:600;text-decoration:none;border-radius:12px;transition:all .3s ease;box-shadow:0 4px 20px rgba(163,151,245,.3)}.create-button-large:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(163,151,245,.4)}.create-button-large:active{transform:translateY(-1px)}.not-found-features{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}.feature-tag{padding:6px 14px;background:linear-gradient(135deg,rgba(255,134,81,.1),rgba(163,151,245,.1));border:1px solid rgba(163,151,245,.2);border-radius:20px;font-size:13px;font-weight:500;color:var(--surface-0)}.mobile-bottom-bar,.mobile-connect-button,.mobile-modal-overlay,.mobile-toast{display:none}@media (max-width:900px){.main-container{flex-direction:column;position:relative}.main-container:not(.not-found-layout) .preview-panel{margin-right:0}.preview-panel{border-radius:8px;flex:1}.connect-panel{position:fixed;top:60px;bottom:0;left:0;right:0;width:100%;border-radius:20px 20px 0 0;transform:translateY(100%);transition:transform .3s ease;z-index:1001}.connect-panel.mobile-open{transform:translateY(var(--drag-offset,0));z-index:1010}.connect-panel.dragging{transition:none}.connect-panel .mobile-modal-header{display:flex;align-items:center;justify-content:center;padding:12px 16px;position:relative;background:white;border-radius:20px 20px 0 0;flex-shrink:0;touch-action:none;cursor:grab}.modal-drag-handle{width:40px;height:4px;background:var(--grey-20);border-radius:2px}.modal-close-button{display:none}.connect-panel-content{padding-bottom:40px;background:white;position:relative;flex:1}.connect-component-container{position:absolute;top:0;left:0;right:0;bottom:0}.mobile-modal-drag-area{position:fixed;top:0;left:0;right:0;height:60px;z-index:1002;display:none;touch-action:none;cursor:grab}.mobile-modal-drag-area.visible{display:block}.mobile-connect-button,.myop-badge{display:none}.mobile-modal-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease}.mobile-modal-overlay.open{opacity:1;visibility:visible;pointer-events:auto}.tour-message{justify-content:center;text-align:center;padding:16px;gap:12px;flex-shrink:0}.tour-content,.tour-message{flex-direction:column;align-items:center}.tour-content{min-width:unset;display:flex;gap:4px}.tour-title{font-size:20px;line-height:26px;text-align:center;max-width:280px}.tour-subtitle{font-size:14px;line-height:20px;text-align:center}.myop-logo{height:36px;width:auto}.main-container{flex:1 1 0;min-height:0;overflow:hidden}.preview-iframe-wrapper,.preview-panel{height:100%;overflow:hidden}.preview-iframe{height:100%;width:100%}.mobile-toast{display:flex;position:absolute;left:50%;transform:translateX(-50%);bottom:80px;background:linear-gradient(81deg,rgba(240,232,255,1) 6%,rgba(255,255,255,1) 77%,rgba(255,237,231,1) 96%);border-radius:8px;padding:32px 16px;max-width:336px;width:calc(100% - 64px);text-align:center;z-index:50;box-shadow:0 4px 20px rgba(0,0,0,.1);animation:slideUp .3s ease-out}.mobile-toast.hidden{display:none}@keyframes slideUp{0%{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.mobile-toast-text{font-family:DM Sans,sans-serif;font-size:16px;font-weight:400;line-height:26px;color:var(--surface-0);text-align:center;flex:1}.mobile-toast-close{position:absolute;top:7px;right:7px;background:transparent;border:none;padding:4px;cursor:pointer;color:var(--surface-0);display:flex;align-items:center;justify-content:center}.mobile-toast-close svg{width:24px;height:24px}.mobile-bottom-bar{display:flex;gap:8px;justify-content:center;padding:4px 0;flex-shrink:0;min-height:44px}.mobile-build-button{display:flex;align-items:center;gap:6px;padding:8px 12px;background:linear-gradient(135deg,#000000,#1a1a2e);color:white;font-family:Poppins,sans-serif;font-size:12px;font-weight:400;text-decoration:none;border-radius:6px;border:none;cursor:pointer;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.3)}.mobile-build-button svg{height:16px;width:auto}.mobile-connect-btn{display:flex;align-items:center;justify-content:center;gap:6px;height:auto;flex:1;max-width:180px;padding:8px 12px;background:linear-gradient(135deg,#FF8651,#FFBEA8 50%,#A397F5);color:var(--surface-0);font-family:DM Sans,sans-serif;font-size:14px;font-weight:400;text-decoration:none;border-radius:6px;border:none;cursor:pointer;white-space:nowrap;position:relative}.mobile-connect-btn:before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.2);border-radius:6px}.mobile-connect-btn svg{width:14px;height:14px}.not-found-panel{border-radius:8px}.not-found-container{padding:24px;min-height:350px}.not-found-icon svg{width:80px;height:80px}.not-found-title{font-size:22px}.not-found-subtitle{font-size:14px}.create-button-large{padding:14px 24px;font-size:15px}.feature-tag{font-size:12px;padding:5px 12px}}