:root{--blue-00: #080824;--blue-01: #232347;--blue-02: #33335A;--blue-03: #46466A;--bg: #131333;--gradient: linear-gradient(135deg, #4DFFDF 0%, #4DA1FF 100%)}button{outline:none!important}button:focus,button:focus-visible,button:active{outline:none!important;box-shadow:none!important}.app{display:flex;width:100%;height:100vh;background:var(--blue-00)}.canvas-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;overflow:auto}.canvas-wrapper{background:#fff;border-radius:12px;box-shadow:0 20px 60px #00000080;overflow:hidden;position:relative}.canvas-wrapper{user-select:none;-webkit-user-select:none;-moz-user-select:none}.canvas-wrapper svg{display:block}.canvas-wrapper-scaled{border-radius:12px;box-shadow:0 20px 60px #00000080;overflow:hidden;position:relative;user-select:none;-webkit-user-select:none;-moz-user-select:none;display:flex;align-items:center;justify-content:center;contain:layout}.canvas-wrapper-scaled svg{display:block;width:100%;height:100%;border-radius:12px}.canvas-wrapper svg rect{animation:none}.left-panel{width:180px;background:var(--bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-right:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;overflow:hidden}.side-panel{width:300px;background:var(--bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-left:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;overflow:hidden}.panel-content{flex:1;overflow-y:visible;padding:24px;display:flex;flex-direction:column;gap:0;width:100%}.left-panel .panel-content{overflow-y:auto;padding:24px 16px 16px 24px}.side-panel .panel-content{overflow-y:auto}.panel-content::-webkit-scrollbar{width:8px}.panel-content::-webkit-scrollbar-track{background:transparent}.panel-content::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}.left-panel:hover .panel-content::-webkit-scrollbar-track,.side-panel:hover .panel-content::-webkit-scrollbar-track{background:#ffffff0d}.left-panel:hover .panel-content::-webkit-scrollbar-thumb,.side-panel:hover .panel-content::-webkit-scrollbar-thumb{background:#fff3}.panel-content::-webkit-scrollbar-thumb:hover{background:#ffffff4d!important}.panel-footer{flex-shrink:0;padding:30px;border-top:1px solid rgba(255,255,255,.2);background:var(--blue-01)}.panel-section{display:flex;flex-direction:column;gap:24px;margin-top:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px}.panel-content .panel-section:first-child{border-top:none;padding-top:0;margin-top:0}.left-panel .panel-section{margin-left:-24px;margin-right:-16px;padding-left:24px;padding-right:16px}.panel-footer .panel-section{border-top:none;padding-top:0;margin:0;padding-left:0;padding-right:0}.panel-section h2{font-family:GT Welsheim Pro,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:12px;font-weight:500;color:#fff;margin-bottom:5px;text-transform:uppercase;letter-spacing:1px}.section-header-with-button{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}.section-header-with-button h2{margin-bottom:0}.reset-section-button{padding:6px;background:unset;border:none;border-radius:6px;color:#ffffffb3;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.reset-section-button:hover{background:#ffffff1a;color:#fff;border-color:#fff3}.reset-section-button:disabled{opacity:.3;cursor:not-allowed;background:unset;color:#ffffff4d}.reset-section-button:disabled:hover{background:unset;color:#ffffff4d;border-color:transparent}.pattern-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.pattern-selector{display:grid;grid-template-columns:1fr;gap:16px}.pattern-selector .pattern-button{padding:0}.pattern-selector.single-row{display:flex;gap:16px}.pattern-selector.single-row .pattern-button{flex:1;padding:10px}.layers-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.pattern-button{padding:8px;background:var(--blue-01);border:2px solid transparent;border-radius:8px;color:#fff;font-family:GT Welsheim Pro,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px;font-weight:400;cursor:pointer;transition:all .2s ease;text-align:center;position:relative;display:flex;flex-direction:column;align-items:center;gap:0}.pattern-preview{width:100%;height:auto;border-radius:4px;display:block}.pattern-label{display:none;font-size:12px;font-weight:500}.pattern-button:hover{background:var(--blue-02);border:2px solid var(--blue-03);transform:translateY(-2px)}.pattern-button.active{background:var(--blue-02);border:2px solid transparent}.pattern-button.active:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:8px;padding:2px;background:var(--gradient);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.control-group{display:flex;flex-direction:column;gap:8px}.control-group label{font-family:GT Welsheim Pro,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:10pt;font-weight:500;color:#fff9}.slider-container{display:flex;align-items:center;gap:12px}.slider-icon{width:32px;height:32px;border-radius:50%;background:#ffffff0d;display:flex;align-items:center;justify-content:center;flex-shrink:0}.control-group input[type=range]{width:100%;height:6px;background:#ffffff1a;border-radius:3px;outline:none;-webkit-appearance:none}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:#fff;border-radius:50%;cursor:pointer}.control-group input[type=range]::-moz-range-thumb{width:18px;height:18px;background:#fff;border-radius:50%;cursor:pointer;border:none}.control-group input[type=number],.control-group input[type=color]{width:100%;padding:10px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#fff;font-family:GT Welsheim Pro,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px;outline:none}.control-group input[type=color]{height:40px;cursor:pointer}.control-group input[type=number]:focus{border-color:#667eea;background:#ffffff14}.color-inputs{display:flex;flex-direction:column;gap:24px}.color-input-group{display:flex;align-items:center;gap:12px}.color-input-group .input-with-label{flex:1}.color-swatch-wrapper{position:relative;width:44px;height:44px;flex-shrink:0}.color-preview-swatch{width:100%;height:100%;border-radius:8px;border:2px solid rgba(255,255,255,.1);cursor:pointer;transition:all .2s ease}.color-swatch-wrapper:hover .color-preview-swatch{border-color:#ffffff4d;transform:scale(1.05)}.size-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px}.input-with-label{position:relative;display:flex;align-items:center;border-radius:8px}.input-with-label:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:8px;padding:2px;background:var(--gradient);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .2s ease;pointer-events:none}.input-with-label:focus-within:before{opacity:1}.input-marker{position:absolute;left:12px;color:#ffffffb3;font-family:GT Welsheim Pro,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px;font-weight:500;pointer-events:none;z-index:1}.size-input{width:100%;padding:10px 10px 10px 32px;background:var(--blue-01);border:2px solid transparent;border-radius:8px;color:#fff;font-family:GT Welsheim Pro,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px;font-weight:500;outline:none;transition:all .2s ease}.size-input::-webkit-inner-spin-button,.size-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.size-input{-moz-appearance:textfield}.size-input:hover{background:var(--blue-02);border:2px solid var(--blue-03)}.size-input:focus{background:var(--blue-02);border:2px solid transparent}.export-buttons{display:flex;flex-direction:row;gap:10px}.export-button{flex:1;padding:14px 20px;background:var(--gradient);border:none;border-radius:8px;color:#fff;font-family:GT Welsheim Pro,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:1px}.export-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4dffdf4d}.export-button:active{transform:translateY(0)}.export-button-secondary{background:var(--blue-03)}.export-button-secondary:hover{box-shadow:0 6px 20px #46466a80}.color-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.app-header{position:absolute;top:30px;left:40px;z-index:10}.app-header h1{font-size:32px;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:2px}select{width:100%;padding:10px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#fff;font-size:14px;outline:none;cursor:pointer}select:focus{border-color:#667eea;background:#ffffff14}select option{background:#1a1a2e;color:#fff}.floating-toolbar{display:flex;gap:8px;padding:8px 4px;background:var(--blue-01);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;box-shadow:0 8px 32px #0000004d;border:1px solid rgba(255,255,255,.1);align-items:center;height:60px}.toolbar-icon-button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:none;border-radius:8px;color:#9b9bc3;cursor:pointer;transition:all .2s ease;flex-shrink:0;position:relative}.toolbar-icon-button:hover{background:var(--blue-02);color:#fff}.toolbar-icon-button:active{transform:scale(.95)}.toolbar-icon-button.active-icon{background:var(--blue-02);color:#fff}.toolbar-icon-button.active-icon:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:8px;padding:2px;background:var(--gradient);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.toolbar-divider{width:1px;height:32px;background:#ffffff1a;margin:0 4px}.toolbar-segment-control{display:flex;gap:0;background:var(--blue-00);border-radius:8px;padding:4px}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;min-width:44px;height:44px;background:transparent;border:none;border-radius:6px;color:#9b9bc3;cursor:pointer;transition:all .2s ease;position:relative}.segment-button:hover{color:#fff}.segment-button.active{background:var(--blue-02);color:#fff}.segment-button svg{width:24px;height:24px}.segment-button div{display:flex;align-items:center;justify-content:center}.toolbar-button{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--blue-02);border:2px solid transparent;border-radius:8px;color:#fff;font-family:GT Welsheim Pro,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.toolbar-button:hover{background:var(--blue-03);transform:translateY(-2px);box-shadow:0 4px 12px #0003}.toolbar-button:active{transform:translateY(0)}.toolbar-button.active{background:var(--blue-02);border:2px solid transparent}.toolbar-button.active:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:8px;padding:2px;background:var(--gradient);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.toolbar-button.active{position:relative}.toolbar-button.secondary{background:#ffffff0d}.toolbar-button.secondary:hover{background:#ffffff1a}.toolbar-button svg{flex-shrink:0}.color-picker-popup{position:absolute;top:calc(100% + 8px);left:0;z-index:1000;background:var(--blue-02);border:2px solid var(--blue-03);border-radius:8px;padding:8px;box-shadow:0 8px 32px #00000080;width:252px}.mode-selector{display:flex;gap:0;margin-bottom:12px;background:#28283d;border-radius:8px;padding:4px;overflow:hidden}.mode-selector-option{flex:1;background:transparent;border:none;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;border-radius:6px;position:relative}.mode-selector-option:hover:not(.active){background:#ffffff0d}.mode-selector-option.active{background:#43435c}.mode-selector-option svg{display:block;width:20px;height:20px;clip-path:circle(50%);border-radius:50%}.color-picker-popup .react-colorful{width:100%;height:200px}.color-picker-popup .react-colorful__saturation{border-radius:6px 6px 0 0;border-bottom:none}.color-picker-popup .react-colorful__hue{height:12px;border-radius:6px;margin-top:12px}.color-picker-popup .react-colorful__pointer{width:20px;height:20px;border:3px solid #FFFFFF;box-shadow:0 2px 8px #0000004d}.color-picker-popup .react-colorful__hue .react-colorful__pointer{width:16px;height:16px}.gradient-editor{display:flex;flex-direction:column;gap:12px}.gradient-preview{width:100%;height:40px;border-radius:6px;border:2px solid var(--blue-03)}.gradient-angle-control{display:flex;align-items:center;gap:8px}.gradient-angle-control label{font-size:12px;color:#ffffffb3;min-width:40px}.angle-slider{flex:1;height:4px;border-radius:2px;background:var(--blue-03);outline:none;-webkit-appearance:none}.angle-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 4px #0000004d}.angle-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;cursor:pointer;border:none;box-shadow:0 2px 4px #0000004d}.angle-value{font-size:12px;color:#ffffffb3;min-width:35px;text-align:right}.gradient-stops{display:flex;flex-direction:column;gap:8px}.gradient-stops-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.gradient-stops-header label{font-size:12px;color:#ffffffb3}.add-stop-button{background:transparent;border:none;color:#fffc;padding:4px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.add-stop-button:hover{background:var(--blue-04);color:#fff}.gradient-stop-item{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}.stop-color-input-wrapper{flex:1;min-width:0}.stop-opacity-input-wrapper{width:70px;flex-shrink:0}.stop-hex-input,.stop-opacity-input{width:100%;padding:8px 8px 8px 32px!important;font-size:12px!important;font-weight:500;border:2px solid transparent!important;border-radius:8px;background:var(--blue-01)!important;color:#fff;font-family:GT Welsheim Pro,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;outline:none;transition:all .2s ease}.stop-position-input{width:100%;padding:8px 24px 8px 10px!important;font-size:12px!important;font-weight:500;border:2px solid transparent!important;border-radius:8px;background:var(--blue-01)!important;color:#fff;font-family:GT Welsheim Pro,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;outline:none;transition:all .2s ease}.stop-hex-input:hover,.stop-position-input:hover,.stop-opacity-input:hover{background:var(--blue-02)!important;border:2px solid var(--blue-03)!important}.stop-hex-input:focus,.stop-position-input:focus,.stop-opacity-input:focus{background:var(--blue-02)!important;border:2px solid transparent!important}.stop-position-input-wrapper{width:64px;flex-shrink:0}.position-marker{left:auto;right:10px}.stop-color-swatch{width:24px;height:24px;border-radius:4px;border:2px solid var(--blue-03);cursor:pointer;transition:border-color .2s ease;flex-shrink:0}.stop-color-swatch:hover{border-color:var(--blue-04)}.stop-position-slider{flex:1;height:4px;border-radius:2px;background:var(--blue-03);outline:none;-webkit-appearance:none}.stop-position-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 4px #0000004d}.stop-position-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none;box-shadow:0 2px 4px #0000004d}.stop-position-value{font-size:12px;color:#fff9;min-width:32px;text-align:right}.remove-stop-button{background:transparent;border:none;color:#fff6;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s ease}.remove-stop-button:hover:not(:disabled){color:#ff6464cc}.remove-stop-button:disabled{opacity:.3;cursor:not-allowed}.stop-color-picker{margin-top:8px;padding-top:12px;border-top:1px solid var(--blue-03)}.color-swatch-wrapper{position:relative}.color-preview-swatch{cursor:pointer;pointer-events:all}.eye-toggle-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;color:#ffffffb3;transition:color .2s ease;padding:0 8px}.eye-toggle-icon:hover{color:#fff}.color-history{margin-top:12px}.color-history-label{font-size:12px;color:#ffffffb3;display:block;margin-bottom:8px}.color-history-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.color-history-swatch{aspect-ratio:1;border-radius:8px;border:2px solid var(--blue-03);cursor:pointer;transition:all .2s ease}.color-history-swatch:hover{border-color:var(--blue-04);transform:scale(1.05)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:transparent;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-content{background:var(--blue-01);border-radius:16px;width:90%;max-width:600px;max-height:80vh;overflow:hidden;box-shadow:0 20px 60px #00000080;border:1px solid rgba(255,255,255,.1)}.modal-header{padding:20px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.1)}.modal-header h1{font-family:GT Welsheim Pro,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:32px;font-weight:700;color:#fff;margin:0}.modal-close-button{background:#ffffff0d;border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;flex-shrink:0}.modal-close-button:hover{background:#ffffff1a}.modal-body{padding:32px;overflow-y:auto;max-height:calc(80vh - 85px)}.modal-body p{font-family:GT Welsheim Pro,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:18px;line-height:1.6;color:#ffffffd9;margin:0 0 24px}.modal-body p:last-child{margin-bottom:0}.modal-body strong{color:#fff;font-weight:600}.modal-divider{height:1px;background:#ffffff1a;margin:32px 0}.modal-footer-text{font-size:16px!important;color:#fff9!important;text-align:left}.copy-icon{display:inline-block;margin-left:8px;vertical-align:middle;cursor:pointer;color:#ffffffb3;transition:all .2s ease}.copy-icon:hover{color:#fff;transform:scale(1.1)}.copy-icon.copied{color:#4dffdf;cursor:default}.author-link{color:#fffc;text-decoration:none;transition:all .2s ease;border-bottom:1px solid rgba(255,255,255,.3)}.author-link:hover{color:#4dffdf;border-bottom-color:#4dffdf}.mobile-notice{display:none;position:fixed;top:0;left:0;width:100%;height:100vh;background:var(--blue-00);z-index:9999;overflow:hidden}.mobile-notice:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(77,161,255,.15) 0%,transparent 70%);border-radius:50%;pointer-events:none}.mobile-notice-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:40px;text-align:center}.mobile-notice-logo{display:flex;align-items:center;gap:16px;margin-bottom:60px}.mobile-notice-icon{width:48px;height:48px;color:#4dffdfe6;display:flex;align-items:center;justify-content:center}.mobile-notice-icon svg{width:100%;height:100%}.mobile-notice-title{font-family:GT Welsheim Pro,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:42px;font-weight:700;color:#fff;margin:0;letter-spacing:2px}.mobile-notice-heading{font-family:GT Welsheim Pro,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:28px;font-weight:600;color:#fff;margin:0 0 32px;line-height:1.3}.mobile-notice-text{font-family:GT Welsheim Pro,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:18px;line-height:1.6;color:#fffc;margin:0;max-width:500px}@media (max-width: 320px){.mobile-notice{display:block}.app{display:none!important}}@media (max-width: 400px){.mobile-notice-title{font-size:36px}.mobile-notice-heading{font-size:24px}.mobile-notice-text{font-size:16px}.mobile-notice-content{padding:24px}}@font-face{font-family:GT Welsheim Pro;src:url(/fonts/GTWelsheimPro-Regular.woff2) format("woff2"),url(/fonts/GTWelsheimPro-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:GT Welsheim Pro;src:url(/fonts/GTWelsheimPro-Medium.woff2) format("woff2"),url(/fonts/GTWelsheimPro-Medium.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:GT Welsheim Pro;src:url(/fonts/GTWelsheimPro-Bold.woff2) format("woff2"),url(/fonts/GTWelsheimPro-Bold.woff) format("woff");font-weight:600;font-style:normal;font-display:swap}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#080824;color:#fff;overflow:hidden}#root{width:100vw;height:100vh}