: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}body{margin:0;padding:0;min-width:320px;min-height:100dvh;overflow:hidden;background-color:#08080f}*{box-sizing:border-box}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}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}}#root{width:100vw;height:100dvh;margin:0;padding:0}.app-wrap{display:flex;height:100dvh;width:100vw;background:#08080f;color:#e2e2e8;font-family:Inter,sans-serif;overflow:hidden;flex-direction:row;position:relative}.app-sidebar{width:320px;flex-shrink:0;background:#0e0e1a;border-right:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;overflow-y:auto;transition:transform .3s ease;padding-top:88px}@media(min-width:769px){.app-sidebar:before,.app-sidebar:after{content:"";flex:auto}}.app-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:88px;padding-bottom:88px;overflow:auto;gap:16px;background:#05050a;position:relative}.preview-mode .app-sidebar{display:none!important}.preview-mode .app-main{padding:88px 0;justify-content:flex-start}.preview-toggle{position:relative;z-index:50;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .2s,opacity .3s}.preview-toggle-dark{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#fff}.preview-toggle-dark:hover{background:#ffffff26}.preview-toggle-light{background:#0000000d;border:1px solid rgba(0,0,0,.1);color:#000}.preview-toggle-light:hover{background:#00000026}.preview-actions-wrapper{position:absolute;top:88px;right:28px;display:flex;flex-direction:column;gap:12px;z-index:50}.pill-navbar{position:absolute;top:16px;left:16px;right:16px;height:44px;border-radius:22px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;z-index:100;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);transition:all .3s ease}.pill-navbar-dark{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 24px #0003}.pill-navbar-light{background:#ffffff80;border:1px solid rgba(0,0,0,.1);box-shadow:0 4px 24px #0000000d}@media(min-width:769px){.app-wrap:not(.preview-mode) .pill-navbar{left:336px}}.navbar-text{font-size:15px;font-weight:700;letter-spacing:.02em;white-space:nowrap}.pill-navbar-dark .navbar-text{color:#fff}.pill-navbar-light .navbar-text{color:#000}.navbar-icon{display:flex;align-items:center;justify-content:center;transition:opacity .2s}.navbar-icon:hover{opacity:.7}.pill-navbar-dark .navbar-icon{color:#fff}.pill-navbar-light .navbar-icon{color:#000}.view-bg{position:relative;overflow:hidden;transition:background .3s ease}.view-bg-dark{background:#05050a}.view-bg-light{background:#eaeaea}.blob{position:absolute;border-radius:50%;filter:blur(80px);z-index:0;opacity:.5;animation:float 10s infinite ease-in-out alternate}.view-bg-dark .blob-1{width:400px;height:400px;background:#3b82f666;top:-100px;left:-100px}.view-bg-dark .blob-2{width:500px;height:500px;background:#8b5cf64d;bottom:-150px;right:-50px;animation-delay:-5s}.view-bg-light .blob-1{width:400px;height:400px;background:#3b82f64d;top:-100px;left:-100px}.view-bg-light .blob-2{width:500px;height:500px;background:#ec489933;bottom:-150px;right:-50px;animation-delay:-5s}.glass-pane{position:absolute;inset:0;backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);z-index:1}.view-bg-dark .glass-pane{background:#05050a99}.view-bg-light .glass-pane{background:#ffffff80}.app-canvas{position:relative;z-index:10;pointer-events:none;max-width:100%;max-height:calc(100dvh - 176px);width:auto;height:auto;object-fit:contain}.canvas-border-dark{border:1px solid rgba(255,255,255,.15)!important}.canvas-border-light{border:1px solid rgba(0,0,0,.15)!important;box-shadow:0 20px 60px #00000026,0 0 0 1px #0000000d!important}@keyframes float{0%{transform:translateY(0) scale(1)}to{transform:translateY(30px) scale(1.05)}}.mobile-export-wrapper{display:none!important}@media(max-width:768px){.app-wrap{flex-direction:column-reverse}.app-sidebar{width:100%;height:35dvh;border-right:none;border-top:1px solid rgba(255,255,255,.07);padding-top:0}.app-main{height:65dvh;flex:unset;padding:88px 0 0;justify-content:flex-start}.preview-mode .app-main{height:100dvh;padding:88px 0 32px;justify-content:flex-start}.app-canvas{height:auto;width:auto;object-fit:contain}.preview-grid-container{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;padding:0 16px!important;width:100vw!important;box-sizing:border-box!important;margin:auto 0!important}.preview-grid-container .app-canvas{max-width:100%!important;max-height:calc(65dvh - 180px)!important}.preview-mode .preview-grid-container .app-canvas{max-height:calc(100dvh - 200px)!important}.preview-actions-wrapper{position:static!important;display:flex!important;flex-direction:row!important;justify-content:center!important;padding-left:0!important;gap:16px!important;width:100%!important;margin:0!important;padding-bottom:32px!important;padding-top:16px!important;z-index:50;flex-shrink:0}.sidebar-export-section{display:none!important}.mobile-export-wrapper{display:flex!important}}.export-context-menu{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%);border-radius:14px;padding:0;display:flex;flex-direction:column;gap:0;min-width:200px;backdrop-filter:blur(40px) saturate(150%);-webkit-backdrop-filter:blur(40px) saturate(150%);z-index:100;animation:fadeInDown .2s cubic-bezier(.16,1,.3,1);overflow:hidden}@keyframes fadeInDown{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}.export-context-menu-dark{background:#1e1e231a;box-shadow:0 10px 40px #00000080,inset 0 0 0 .5px #ffffff4d}.export-context-menu-light{background:#fafafa26;box-shadow:0 10px 40px #0003,inset 0 0 0 .5px #0003}.export-menu-item{background:transparent;border:none;border-radius:0;padding:14px 18px;text-align:left;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Inter;font-size:16px;font-weight:400;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background .1s}.export-context-menu-dark .export-menu-item{color:#fff;border-bottom:.5px solid rgba(255,255,255,.15)}.export-context-menu-dark .export-menu-item:last-child{border-bottom:none}.export-context-menu-dark .export-menu-item:active{background:#ffffff26}@media(hover:hover){.export-context-menu-dark .export-menu-item:hover{background:#ffffff26}}.export-context-menu-light .export-menu-item{color:#0a0a0a;border-bottom:.5px solid rgba(0,0,0,.15)}.export-context-menu-light .export-menu-item:last-child{border-bottom:none}.export-context-menu-light .export-menu-item:active{background:#00000014}@media(hover:hover){.export-context-menu-light .export-menu-item:hover{background:#00000014}}.support-popup-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;background:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.support-popup{width:100%;max-width:400px;border-radius:20px;backdrop-filter:blur(40px) saturate(150%);-webkit-backdrop-filter:blur(40px) saturate(150%);animation:popupScaleIn .3s cubic-bezier(.16,1,.3,1);overflow:hidden}@keyframes popupScaleIn{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.support-popup-dark{background:#1e1e2340;box-shadow:0 20px 60px #0009,inset 0 0 0 .5px #ffffff40}.support-popup-light{background:#fafafab3;box-shadow:0 20px 60px #0003,inset 0 0 0 .5px #00000026}.support-popup-content{padding:24px;display:flex;flex-direction:column}.support-btn-primary{flex:1;background:#fd0;color:#000;border:none;border-radius:12px;padding:12px 10px;font-family:Inter,sans-serif;font-size:14px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:transform .1s,filter .2s;box-shadow:0 2px 8px #ffdd004d;display:flex;align-items:center;justify-content:center;white-space:nowrap}.support-btn-primary:active{transform:scale(.97)}.support-btn-primary:hover{filter:brightness(1.05)}.support-btn-secondary{flex:1;background:transparent;border:none;border-radius:12px;padding:12px 10px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;cursor:pointer;text-align:center;transition:background .2s;white-space:nowrap}.support-popup-dark .support-btn-secondary{color:#fffc;box-shadow:inset 0 0 0 1px #fff3}.support-popup-dark .support-btn-secondary:hover{background:#ffffff0d;color:#fff}.support-popup-dark .support-btn-secondary:active{background:#ffffff1a}.support-popup-light .support-btn-secondary{color:#000c;box-shadow:inset 0 0 0 1px #0003}.support-popup-light .support-btn-secondary:hover{background:#0000000d;color:#000}.support-popup-light .support-btn-secondary:active{background:#0000001a}@media(max-width:400px){.support-btn-primary,.support-btn-secondary{font-size:12px!important;padding:12px 6px!important}}