@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap";:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background-color:#fff;color:#353740;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#f7f7f8;color:inherit}#root{min-height:100vh}.loader-container{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#f7f7f8;z-index:9999}.loader-spinner{width:48px;height:48px;animation:pop-up .25s cubic-bezier(.05,.7,.1,1),spin-slow 2s cubic-bezier(.05,.7,.1,1) infinite}@keyframes pop-up{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.workspace{display:flex;min-height:100vh;width:100%;background:#f7f7f8;position:relative}.workspace-loading{opacity:0;pointer-events:none}.workspace-loaded{animation:fade-in .4s ease-out}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.app-logo{height:32px;width:auto;margin-bottom:16px;display:block;align-self:flex-start}.control-panel{width:280px;padding:24px;background:#f7f7f8;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;gap:24px;overflow-y:auto;position:relative;z-index:10}.workspace-loaded .control-panel{animation:slide-in-left .6s cubic-bezier(.05,.7,.1,1)}@keyframes slide-in-left{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}.control-group{display:flex;flex-direction:column;gap:12px}.preset-label,.control-label{font-size:14px;font-weight:500;color:#202123;margin:0}.preset-grid{display:flex;flex-wrap:wrap;gap:17px;height:100%}.preset-button{width:32px;height:32px;border:0px none;border-image:none;border-radius:50%;cursor:pointer;padding:0;overflow:hidden;transition:all .15s;background-color:#fff;flex-shrink:0}.preset-button:hover{border-color:#d1d5db;transform:scale(1.1)}.preset-button.active{border:0px none;border-image:none}.size-inputs{display:flex;align-items:center;gap:8px}.size-input{flex:1;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;font-family:inherit;background:#fff;color:#202123;transition:border-color .15s}.size-input:focus{outline:none;border-color:#202123}.size-separator{color:#9ca3af;font-size:14px}.upload-button{display:block;width:100%;padding:12px 8px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;font-weight:500;color:#202123;background:#fff;cursor:pointer;text-align:center;transition:all .15s;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.upload-button:hover{border-color:#202123;background:#f9fafb}.upload-button+input[type=file]{display:none}.clear-button{margin-top:8px;padding:6px 12px;border:none;background:transparent;color:#6b7280;font-size:13px;cursor:pointer;text-align:center;font-family:inherit;transition:color .15s}.clear-button:hover{color:#202123}.checkbox-label{display:flex;align-items:center;gap:10px;font-size:14px;color:#202123;cursor:pointer;font-family:inherit}.checkbox-input{width:16px;height:16px;cursor:pointer;accent-color:#202123}.slider-input{width:100%;height:4px;border-radius:2px;background:#e5e7eb;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer}.slider-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#202123;cursor:pointer}.slider-input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#202123;cursor:pointer;border:none}.slider-value{font-size:12px;color:#6b7280;text-align:right;margin-top:4px}.select-input{width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;font-family:inherit;background:#fff;color:#202123;cursor:pointer;transition:border-color .15s}.select-input:focus{outline:none;border-color:#202123}.download-button{width:100%;padding:12px;border:none;border-radius:6px;font-size:14px;font-weight:500;color:#fff;background:#202123;cursor:pointer;transition:background .15s;font-family:inherit;margin-top:auto}.download-button:hover{background:#000}.preview-area{flex:1;padding:24px;display:flex;align-items:center;justify-content:center;background:#f7f7f8;position:sticky;top:0;height:100vh;overflow-y:auto}.workspace-loaded .preview-area{animation:slide-in-subtle .6s cubic-bezier(.05,.7,.1,1) .3s both}@keyframes slide-in-subtle{0%{transform:translate(-50px);opacity:0}to{transform:translate(0);opacity:1}}.preview-stage-wrapper{position:relative;width:100%;max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center}.preview-stage{position:relative;width:100%;height:100%;min-height:400px;border-radius:12px;border:1px solid #e5e7eb;overflow:hidden;background:transparent;box-shadow:0 1px 3px #0000001a}.gradient-fill,.gradient-mask{position:absolute;right:0;bottom:0;width:100%;height:100%;border-radius:inherit}.gradient-fill{z-index:0}.gradient-mask{z-index:2;pointer-events:none}.raster-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;image-rendering:auto;border-radius:inherit;pointer-events:none;z-index:1}.grain-overlay{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.4;mix-blend-mode:screen;background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"%3E%3Cfilter id="n" x="0" y="0" width="1" height="1"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3CfeColorMatrix type="saturate" values="0"/%3E%3C/filter%3E%3Crect width="120" height="120" filter="url(%23n)" opacity="0.5"/%3E%3C/svg%3E')}.processing-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#00000080;color:#fff;z-index:10;border-radius:inherit}.processing-spinner{width:32px;height:32px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.processing-overlay span{font-size:14px;font-weight:500}@media(max-width:900px){.workspace{flex-direction:column}.control-panel{width:100%;border-right:none;border-bottom:1px solid #e5e7eb;max-height:50vh}.preview-area{padding:16px}}@media(max-width:640px){.preview-stage{min-height:300px}}