:root{color:#ececf1;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0d0e11;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:#0d0e11;min-width:320px;min-height:100%}body{min-width:320px;min-height:100vh;margin:0}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:2px;outline:2px solid #d9ff68}::selection{color:#11130d;background:#d9ff68}.app-shell{color:#ececf1;background:#0d0e11;grid-template-rows:64px 1fr;height:100dvh;min-height:0;display:grid;overflow:hidden}button,input,select,textarea{font:inherit}button{color:inherit}.topbar{z-index:10;background:#121318;border-bottom:1px solid #282a31;justify-content:space-between;align-items:center;padding:0 22px;display:flex;position:relative}.brand{color:#f7f7f8;letter-spacing:-.45px;align-items:center;gap:10px;font-size:18px;font-weight:700;text-decoration:none;display:inline-flex}.brand-mark{color:#121318;background:#d9ff68;border-radius:9px;place-items:center;width:30px;height:30px;display:grid;box-shadow:inset 0 0 0 1px #ffffff59}.topbar-actions{align-items:center;gap:20px;display:flex}.privacy-note{color:#8d919c;align-items:center;gap:6px;font-size:12px;display:inline-flex}.privacy-note svg{color:#9fc849}.install-button{color:#c5c7ce;cursor:pointer;background:#202228;border:1px solid #393c44;border-radius:9px;align-items:center;gap:7px;min-height:36px;padding:0 12px;font-size:11px;font-weight:650;transition:border-color .16s,color .16s,background .16s;display:inline-flex}.install-button:hover{color:#e6f6b6;background:#282c23;border-color:#65743d}.download-button{color:#11130d;cursor:pointer;background:#d9ff68;border:0;border-radius:9px;align-items:center;gap:8px;min-height:38px;padding:0 16px;font-size:13px;font-weight:700;transition:background .16s,transform .16s,opacity .16s;display:inline-flex}.download-button:hover:not(:disabled){background:#e3ff8d;transform:translateY(-1px)}.download-button:disabled{opacity:.35;cursor:not-allowed}.editor-layout{grid-template-columns:minmax(0,1fr) 350px;min-height:0;display:grid}.workspace{background-color:#0d0e11;background-image:linear-gradient(#17181d 1px,#0000 1px),linear-gradient(90deg,#17181d 1px,#0000 1px);background-size:28px 28px;flex-direction:column;justify-content:center;align-items:center;min-width:0;min-height:0;padding:38px;transition:background-color .16s;display:flex;position:relative;overflow:hidden}.workspace.is-dragging{background-color:#151810}.drop-zone{cursor:pointer;background:#121318eb;border:1px dashed #3a3d46;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;width:min(560px,86%);min-height:430px;padding:40px;transition:border-color .18s,background .18s,transform .18s;display:flex;box-shadow:0 22px 70px #0000003d}.drop-zone:hover,.is-dragging .drop-zone{background:#15171a;border-color:#98b64e;transform:translateY(-2px)}.upload-illustration{place-items:center;width:82px;height:76px;margin-bottom:28px;display:grid;position:relative}.upload-illustration:before,.upload-illustration:after{content:"";background:#1a1c22;border:1px solid #353840;border-radius:10px;width:50px;height:58px;position:absolute}.upload-illustration:before{transform:rotate(-10deg)translate(-12px,1px)}.upload-illustration:after{transform:rotate(10deg)translate(12px,1px)}.upload-icon{z-index:2;color:#d9ff68;background:#24272e;border:1px solid #494d58;border-radius:14px;place-items:center;width:52px;height:52px;display:grid;position:relative;box-shadow:0 8px 22px #00000047}.drop-title{color:#f1f1f3;letter-spacing:-.35px;font-size:20px;font-weight:650}.drop-copy{color:#858994;margin-top:7px;font-size:13px}.browse-button{color:#dedee3;background:#25272e;border:1px solid #3c3f48;border-radius:9px;margin-top:24px;padding:10px 17px;font-size:13px;font-weight:600}.format-note{color:#5f626c;margin-top:13px;font-size:11px}.canvas-stage{scrollbar-color:#444750 transparent;flex:1;justify-content:center;align-items:center;width:100%;height:auto;min-height:0;display:flex;overflow:auto}.canvas-frame{max-width:88%;max-height:88%;transform:scale(var(--zoom));flex:none;justify-content:center;align-items:center;transition:transform .12s;display:flex;box-shadow:0 25px 70px #00000073,0 0 0 1px #ffffff14}.canvas-frame canvas{object-fit:contain;max-width:100%;max-height:calc(100dvh - 280px);display:block}.image-meta{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#14151aeb;border:1px solid #292c33;border-radius:11px;align-items:center;gap:12px;padding:8px 9px 8px 8px;display:flex;position:absolute;bottom:24px;left:28px;box-shadow:0 10px 30px #00000040}.file-info{align-items:center;gap:9px;display:flex}.file-icon{color:#aeb37f;background:#292c27;border-radius:7px;place-items:center;width:32px;height:32px;display:grid}.file-info>span:last-child{flex-direction:column;gap:2px;width:150px;min-width:0;display:flex}.file-info strong{color:#d9dae0;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:600;overflow:hidden}.file-info small{color:#6f737e;font-size:10px}.icon-button{color:#747883;cursor:pointer;background:0 0;border:0;border-radius:7px;place-items:center;width:28px;height:28px;display:grid}.icon-button:hover{color:#f1f1f3;background:#2d3037}.zoom-control{color:#969aa5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#14151aeb;border:1px solid #292c33;border-radius:9px;align-items:center;padding:4px;display:flex;position:absolute;bottom:24px;right:28px}.zoom-control button{color:#91959f;cursor:pointer;background:0 0;border:0;border-radius:6px;place-items:center;width:28px;height:26px;display:grid}.zoom-control button:hover{color:#e7e7ea;background:#2a2c33}.zoom-control span{text-align:center;font-variant-numeric:tabular-nums;min-width:48px;font-size:11px}.preview-bar{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#14151af0;border:1px solid #292c33;border-radius:12px;flex:none;align-items:center;gap:12px;width:100%;height:66px;margin-top:14px;padding:7px;display:flex;box-shadow:0 10px 30px #00000038}.thumbnail-strip{scrollbar-color:#444750 transparent;scrollbar-width:thin;flex:1;align-items:center;gap:7px;min-width:0;padding:2px;display:flex;overflow-x:auto}.thumbnail-item{flex:none;position:relative}.thumbnail-select{cursor:pointer;background:#292b31;border:2px solid #0000;border-radius:8px;width:46px;height:46px;padding:0;transition:border-color .14s,opacity .14s;display:block;position:relative;overflow:hidden}.thumbnail-select:hover{opacity:.82}.thumbnail-item.active .thumbnail-select{border-color:#d9ff68}.thumbnail-select img{object-fit:cover;width:100%;height:100%;display:block}.thumbnail-select span{color:#f1f2ec;background:#0a0b0dc7;border-radius:4px;place-items:center;min-width:15px;height:15px;padding:0 3px;font-size:8px;font-weight:700;display:grid;position:absolute;bottom:2px;right:2px}.thumbnail-remove{z-index:2;color:#d9dae0;cursor:pointer;background:#202228;border:1px solid #4a4d56;border-radius:50%;place-items:center;width:16px;height:16px;padding:0;display:grid;position:absolute;top:-4px;right:-4px}.thumbnail-remove:hover{color:#fff;background:#a44040}.add-thumbnail{color:#878b95;cursor:pointer;background:#202228;border:1px dashed #454851;border-radius:8px;flex:none;place-items:center;width:46px;height:46px;display:grid}.add-thumbnail:hover{color:#d9ff68;border-color:#879d4b}.active-image-info{flex-direction:column;flex:none;gap:3px;width:145px;min-width:0;display:flex}.active-image-info strong{color:#d9dae0;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:600;overflow:hidden}.active-image-info small{color:#6f737e;font-size:9px}.preview-bar .zoom-control{-webkit-backdrop-filter:none;backdrop-filter:none;background:#25272d;border:0;flex:none;position:static}.settings-panel{scrollbar-color:#3e414a #15161b;scrollbar-width:thin;background:#15161b;border-left:1px solid #282a31;flex-direction:column;min-width:0;min-height:0;display:flex;overflow:hidden auto;box-shadow:-16px 0 40px #0000001f}.panel-heading{border-bottom:1px solid #282a31;justify-content:space-between;align-items:center;padding:25px 24px 21px;display:flex}.eyebrow{color:#70747e;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:3px;font-size:10px;font-weight:700;display:block}.panel-heading h1{color:#f0f0f2;letter-spacing:-.45px;margin:0;font-size:20px;font-weight:650}.reset-button{color:#717580;cursor:pointer;background:0 0;border:0;border-radius:7px;align-items:center;gap:6px;padding:7px 8px;font-size:11px;display:inline-flex}.reset-button:hover{color:#c8cad0;background:#23252b}.panel-section{border-bottom:1px solid #282a31;flex-direction:column;gap:20px;padding:22px 24px;display:flex}.control-group{flex-direction:column;gap:9px;display:flex;position:relative}.field-label,.control-label label{color:#b7bac2;font-size:11px;font-weight:600}.control-label{justify-content:space-between;align-items:center;display:flex}.control-label span{color:#777b86;font-variant-numeric:tabular-nums;font-size:10px}textarea,select{box-sizing:border-box;color:#e5e5e8;background:#1d1f24;border:1px solid #30323a;border-radius:9px;outline:none;width:100%;font-size:12px;transition:border-color .15s,box-shadow .15s}textarea{resize:vertical;min-height:65px;padding:11px 40px 11px 12px;line-height:1.45}textarea:focus,select:focus{border-color:#657833;box-shadow:0 0 0 3px #d9ff680f}.character-count{color:#5f626b;pointer-events:none;font-size:9px;position:absolute;bottom:9px;right:10px}.select-wrap{position:relative}.select-wrap select{appearance:none;height:40px;padding:0 34px 0 12px}.select-wrap svg{color:#6f737d;pointer-events:none;position:absolute;top:50%;right:11px;transform:translateY(-50%)}.range{--range-progress:50%;appearance:none;cursor:pointer;background:0 0;width:100%;height:16px;margin:0}.range::-webkit-slider-runnable-track{background:linear-gradient(to right, #d9ff68 var(--range-progress), #33363e var(--range-progress));border-radius:99px;height:3px}.range::-webkit-slider-thumb{appearance:none;background:#d9ff68;border:2px solid #15161b;border-radius:50%;width:13px;height:13px;margin-top:-5px;box-shadow:0 0 0 1px #8da044}.range::-moz-range-track{background:#33363e;border-radius:99px;height:3px}.range::-moz-range-progress{background:#d9ff68;border-radius:99px;height:3px}.range::-moz-range-thumb{background:#d9ff68;border:2px solid #15161b;border-radius:50%;width:11px;height:11px}.color-control{background:#1d1f24;border:1px solid #30323a;border-radius:9px;align-items:center;gap:9px;height:40px;padding:0 10px;display:flex}.color-control input{cursor:pointer;background:0 0;border:1px solid #434650;border-radius:6px;width:22px;height:22px;padding:0;overflow:hidden}.color-control input::-webkit-color-swatch-wrapper{padding:0}.color-control input::-webkit-color-swatch{border:0}.color-control>span{color:#a9acb5;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px}.swatches{gap:6px;margin-left:auto;display:flex}.swatches button{cursor:pointer;border:1px solid #42454e;border-radius:5px;width:17px;height:17px;padding:0}.swatches button.active{outline-offset:2px;outline:1px solid #d9ff68}.color-mode-tabs{background:#1a1c21;border:1px solid #30323a;border-radius:9px;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px;display:grid}.color-mode-tabs button{color:#777b85;cursor:pointer;background:0 0;border:0;border-radius:6px;height:31px;padding:0 5px;font-size:9px;font-weight:650;transition:color .15s,background .15s}.color-mode-tabs button:hover{color:#c6c8ce}.color-mode-tabs button.active{color:#e8e9e2;background:#30332c;box-shadow:inset 0 0 0 1px #454a38}.gradient-colors{align-items:center;gap:7px;display:flex}.gradient-colors label{background:#1d1f24;border:1px solid #30323a;border-radius:9px;flex:1;align-items:center;gap:7px;min-width:0;height:40px;padding:0 8px;display:flex}.gradient-colors input{cursor:pointer;background:0 0;border:0;border-radius:6px;flex:none;width:22px;height:22px;padding:0;overflow:hidden}.gradient-colors input::-webkit-color-swatch-wrapper{padding:0}.gradient-colors input::-webkit-color-swatch{border:0}.gradient-colors label span{color:#92959e;text-overflow:ellipsis;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:8px;overflow:hidden}.gradient-arrow{color:#5e626c;font-size:12px}.photo-palette{background:#20231d;border:1px solid #35382e;border-radius:9px;align-items:center;gap:11px;padding:10px;display:flex}.palette-preview{border:1px solid #ffffff1f;border-radius:7px;flex:none;width:48px;height:30px;display:flex;overflow:hidden}.palette-preview span{flex:1}.photo-palette>div:last-child{flex-direction:column;gap:2px;min-width:0;display:flex}.photo-palette strong,.protection-control strong{color:#c7c9cf;font-size:10px;font-weight:650}.photo-palette small,.protection-control small{color:#73776f;font-size:8px;line-height:1.35}.protection-control{background:#1b1e19;border:1px solid #30332d;border-radius:9px;align-items:center;gap:14px;padding:11px;display:flex}.protection-control>div{flex-direction:column;flex:1;gap:3px;min-width:0;display:flex}.protection-control .toggle{flex:none}.pattern-section{gap:18px}.pattern-heading{align-items:center;gap:10px;display:flex}.pattern-icon{color:#b4c37d;background:#252921;border-radius:8px;place-items:center;width:34px;height:34px;display:grid}.pattern-heading>div{flex-direction:column;flex:1;gap:2px;display:flex}.pattern-heading strong{color:#c7c9cf;font-size:11px;font-weight:600}.pattern-heading small{color:#686c76;font-size:9px}.toggle{cursor:pointer;background:#353841;border:0;border-radius:99px;width:36px;height:20px;padding:2px;transition:background .15s}.toggle span{background:#969aa4;border-radius:50%;width:16px;height:16px;transition:transform .15s,background .15s;display:block}.toggle.active{background:#5f702f}.toggle.active span{background:#d9ff68;transform:translate(16px)}.panel-footer{z-index:3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#15161bf5;border-top:1px solid #282a31;margin-top:auto;padding:18px 24px;position:sticky;bottom:0}.upload-another{color:#b9bcc4;cursor:pointer;background:#202228;border:1px solid #343741;border-radius:9px;justify-content:center;align-items:center;gap:8px;width:100%;height:40px;font-size:11px;font-weight:600;display:flex}.upload-another:hover{color:#eeeeef;background:#272a31;border-color:#474b55}@media (width<=900px){.app-shell{grid-template-rows:58px auto;height:auto;min-height:100dvh;display:block;overflow:visible}.topbar{height:58px;position:sticky;top:0}.editor-layout{display:block}.workspace{z-index:5;border-bottom:1px solid #282a31;height:clamp(340px,48dvh,440px);min-height:340px;padding:14px 22px;position:sticky;top:58px;box-shadow:0 18px 45px #00000057}.settings-panel{z-index:1;border-top:1px solid #282a31;border-left:0;min-height:100dvh;position:relative;overflow:visible;box-shadow:0 -16px 40px #0000002e}.canvas-stage{height:100%;min-height:0}.canvas-frame canvas{max-height:calc(48dvh - 126px)}.drop-zone{width:min(560px,100%);height:100%;min-height:0;padding:24px}.upload-illustration{width:68px;height:58px;margin-bottom:17px;transform:scale(.82)}.drop-title{font-size:17px}.browse-button{margin-top:15px;padding:8px 14px}.format-note{margin-top:9px}.panel-footer{position:static}.preview-bar{gap:8px;height:58px;margin-top:8px;padding:5px}.thumbnail-select,.add-thumbnail{width:40px;height:40px}.active-image-info{display:none}}@media (width<=560px){.topbar{padding:0 14px}.privacy-note{display:none}.download-button{min-height:34px;padding:0 12px}.topbar-actions{gap:7px}.install-button{justify-content:center;width:34px;min-height:34px;padding:0}.install-button span{display:none}.download-button{font-size:11px}.workspace{height:clamp(290px,42dvh,360px);min-height:290px;padding:10px 12px}.drop-zone{box-sizing:border-box;width:100%;min-height:0}.canvas-stage{height:100%;min-height:0}.canvas-frame canvas{max-height:calc(42dvh - 112px)}.preview-bar .zoom-control span{min-width:38px}.preview-bar .zoom-control button{width:25px}.thumbnail-strip{gap:5px}.thumbnail-select,.add-thumbnail{width:38px;height:38px}.panel-heading,.panel-section{padding-left:18px;padding-right:18px}.panel-section{gap:18px}.panel-footer{padding:16px 18px calc(16px + env(safe-area-inset-bottom))}}