@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap";:root{--bg-color:#fff;--panel-bg:#ffffffbf;--panel-border:#0000000f;--text-primary:#111;--text-secondary:#666;--accent:#000;--accent-hover:#333;--radius:12px;--font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);font-family:var(--font-family);color:var(--text-primary);-webkit-font-smoothing:antialiased;margin:0;font-size:13px;overflow:hidden}#canvas-container{z-index:1;background-color:#fcfcfc;background-image:radial-gradient(#d5d5d5 1px,#0000 1px);background-size:24px 24px;width:100vw;height:100vh;position:absolute;top:0;left:0}#canvas-container canvas{position:absolute;top:0;left:0;width:100%!important;height:100%!important}#ui-panel{z-index:10;background:var(--panel-bg);-webkit-backdrop-filter:blur(24px);isolation:isolate;border:1px solid var(--panel-border);border-radius:var(--radius);flex-direction:column;gap:22px;width:260px;max-height:calc(100vh - 48px);padding:20px;display:flex;position:absolute;top:24px;right:24px;overflow-y:auto;box-shadow:0 8px 32px #0000000f,0 2px 8px #00000005}#ui-panel::-webkit-scrollbar{width:4px}#ui-panel::-webkit-scrollbar-thumb{background:#0000001a;border-radius:2px}.logo{justify-content:center;align-items:center;margin-top:16px;margin-bottom:24px;display:flex}.logo a{text-align:center;width:100%;transition:transform .2s;display:block}.logo a:hover{transform:scale(1.02)}.logo a:active{transform:scale(.98)}.logo img{cursor:pointer;width:90%;max-width:100%;height:auto}.control-group{flex-direction:column;gap:10px;display:flex}.control-group.inline{flex-direction:row;justify-content:space-between;align-items:center}label{color:var(--text-primary);justify-content:space-between;font-size:12px;font-weight:500;display:flex}.val{color:var(--text-secondary);font-size:11px}.upload-btn{background:var(--accent);color:#fff;text-align:center;cursor:pointer;border:1px solid var(--accent);border-radius:6px;justify-content:center;padding:10px;font-size:13px;font-weight:500;transition:background .2s,transform .1s;display:flex}.upload-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.upload-btn:active{transform:scale(.98)}.radio-group{background:#0000000a;border-radius:6px;padding:2px;display:flex}.radio-group label{text-align:center;cursor:pointer;color:var(--text-secondary);border-radius:4px;flex:1;justify-content:center;padding:6px 0;font-size:11px;font-weight:500;transition:background .2s,box-shadow .2s,color .2s}.radio-group label:has(input:checked){color:var(--text-primary);background:#fff;box-shadow:0 1px 3px #00000014}.radio-group input{display:none}input[type=range]{appearance:none;background:#00000014;border-radius:2px;outline:none;width:100%;height:4px;margin-top:4px;margin-bottom:4px}input[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border:1px solid #0003;border-radius:50%;width:12px;height:12px;transition:transform .1s;box-shadow:0 1px 3px #0000001a}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}.style-row{flex-direction:column;gap:4px;margin-bottom:6px;padding:0;display:flex}.style-row label{color:var(--text-secondary);font-size:11px}.switch{width:32px;height:18px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;background-color:#0000001f;border-radius:18px;transition:all .2s;position:absolute;inset:0}.slider:before{content:"";background-color:#fff;border-radius:50%;width:14px;height:14px;transition:all .2s;position:absolute;bottom:2px;left:2px;box-shadow:0 1px 2px #0000001a}input:checked+.slider{background-color:var(--accent)}input:checked+.slider:before{transform:translate(14px)}.export-group{border-top:1px solid var(--panel-border);flex-direction:column;gap:8px;margin-top:8px;padding-top:16px;display:flex}.export-group button{color:var(--text-primary);border:1px solid var(--panel-border);cursor:pointer;background:#fff;border-radius:6px;padding:8px;font-size:12px;font-weight:500;transition:all .2s;box-shadow:0 1px 2px #00000005}.export-group button:nth-child(2){background:var(--bg-color)}.export-group button:hover{background:#fafafa;border-color:#00000026}.export-group button:active{transform:scale(.98)}.palette-container{flex-wrap:wrap;gap:4px;min-height:24px;display:flex}.color-swatch{cursor:pointer;border:1px solid #00000014;border-radius:4px;width:16px;height:16px;transition:transform .1s,box-shadow .1s;box-shadow:inset 0 1px 2px #0000000d}.color-swatch:hover{z-index:2;transform:scale(1.15)translateY(-1px);box-shadow:0 2px 6px #00000026}.version-label{text-align:center;color:var(--text-secondary);opacity:.6;margin-top:4px;font-family:monospace;font-size:10px}.pcr-app[data-theme=monolith]{font-family:var(--font-family)!important;background:var(--panel-bg)!important;-webkit-backdrop-filter:blur(24px)!important;border:1px solid var(--panel-border)!important;border-radius:var(--radius)!important;width:250px!important;padding:18px!important;box-shadow:0 8px 32px #0000000f,0 2px 8px #00000005!important}.pcr-app[data-theme=monolith] .pcr-interaction .pcr-save{background:var(--accent)!important;color:#fff!important;border-radius:6px!important;font-family:inherit!important;font-weight:500!important;transition:background .2s,transform .1s!important}.pcr-app[data-theme=monolith] .pcr-interaction .pcr-save:hover{background:var(--accent-hover)!important}.pcr-app[data-theme=monolith] .pcr-interaction .pcr-save:active{transform:scale(.98)!important}.pcr-app[data-theme=monolith] .pcr-interaction input{color:var(--text-primary)!important;background:#fffc!important;border:1px solid #00000014!important;border-radius:4px!important;font-family:inherit!important;transition:all .2s!important}.pcr-app[data-theme=monolith] .pcr-interaction input:focus{border-color:var(--accent)!important;box-shadow:0 0 0 1px var(--accent)!important;outline:none!important}#toast{color:#fff;font-size:13px;font-family:var(--font-family);letter-spacing:.02em;pointer-events:none;z-index:9999;opacity:0;-webkit-backdrop-filter:blur(8px);white-space:nowrap;background:#000000bf;border-radius:20px;padding:10px 20px;transition:opacity .2s,transform .2s;position:fixed;bottom:48px;left:50%;transform:translate(-50%)translateY(12px)}#toast.show{opacity:1;transform:translate(-50%)translateY(0)}.pickr{position:relative;overflow:visible;transform:translateY(0)}.pickr *{box-sizing:border-box;-webkit-appearance:none;border:none;outline:none}.pickr .pcr-button{cursor:pointer;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\" stroke=\"%2342445A\" stroke-width=\"5px\" stroke-linecap=\"round\"><path d=\"M45,45L5,5\"></path><path d=\"M45,5L5,45\"></path></svg>") 50%/0 no-repeat;border-radius:.15em;width:2em;height:2em;padding:.5em;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;transition:all .3s;position:relative}.pickr .pcr-button:before{content:"";z-index:-1;width:100%;height:100%;z-index:initial;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>") 0 0/.5em;border-radius:.15em;position:absolute;top:0;left:0}.pickr .pcr-button:after{content:"";background:var(--pcr-color);border-radius:.15em;width:100%;height:100%;transition:background .3s;position:absolute;top:0;left:0}.pickr .pcr-button.clear{background-size:70%}.pickr .pcr-button.clear:before{opacity:0}.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px var(--pcr-color)}.pickr .pcr-button.disabled{cursor:not-allowed}.pickr *,.pcr-app *{box-sizing:border-box;-webkit-appearance:none;border:none;outline:none}.pickr input:focus,.pickr input.pcr-active,.pickr button:focus,.pickr button.pcr-active,.pcr-app input:focus,.pcr-app input.pcr-active,.pcr-app button:focus,.pcr-app button.pcr-active{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px var(--pcr-color)}.pickr .pcr-palette,.pickr .pcr-slider,.pcr-app .pcr-palette,.pcr-app .pcr-slider{transition:box-shadow .3s}.pickr .pcr-palette:focus,.pickr .pcr-slider:focus,.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px #00000040}.pcr-app{z-index:10000;opacity:0;visibility:hidden;background:#fff;border-radius:.1em;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;transition:opacity .3s,visibility 0s .3s;display:flex;position:fixed;top:0;left:0;box-shadow:0 .15em 1.5em #0000001a,0 0 1em #00000008}.pcr-app.visible{visibility:visible;opacity:1;transition:opacity .3s}.pcr-app .pcr-swatches{flex-wrap:wrap;margin-top:.75em;display:flex}.pcr-app .pcr-swatches.pcr-last{margin:0}@supports (display:grid){.pcr-app .pcr-swatches{grid-template-columns:repeat(auto-fit,1.75em);align-items:center;display:grid}}.pcr-app .pcr-swatches>button{cursor:pointer;z-index:1;background:0 0;border-radius:.15em;flex-shrink:0;justify-self:center;width:calc(1.75em - 5px);height:calc(1.75em - 5px);margin:2.5px;font-size:1em;transition:all .15s;position:relative;overflow:hidden}.pcr-app .pcr-swatches>button:before{content:"";z-index:-1;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>") 0 0/6px;border-radius:.15em;width:100%;height:100%;position:absolute;top:0;left:0}.pcr-app .pcr-swatches>button:after{content:"";background:var(--pcr-color);box-sizing:border-box;border:1px solid #0000000d;border-radius:.15em;width:100%;height:100%;position:absolute;top:0;left:0}.pcr-app .pcr-swatches>button:hover{filter:brightness(1.05)}.pcr-app .pcr-swatches>button:not(.pcr-active){box-shadow:none}.pcr-app .pcr-interaction{flex-wrap:wrap;align-items:center;margin:0 -.2em;display:flex}.pcr-app .pcr-interaction>*{margin:0 .2em}.pcr-app .pcr-interaction input{letter-spacing:.07em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;margin-top:.75em;padding:.45em .5em;font-size:.75em;transition:all .15s}.pcr-app .pcr-interaction input:hover{filter:brightness(.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px #4285f4bf}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;cursor:text;background:#f1f3f4;border-radius:.15em;flex:8em;min-width:8em;transition:all .2s}.pcr-app .pcr-interaction .pcr-result::selection{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff;width:auto}.pcr-app .pcr-interaction .pcr-save:hover,.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover{filter:brightness(.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-cancel{background:#f44250}.pcr-app .pcr-interaction .pcr-clear:focus,.pcr-app .pcr-interaction .pcr-cancel:focus{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px #f44250bf}.pcr-app .pcr-selection .pcr-picker{-webkit-user-select:none;user-select:none;border:2px solid #fff;border-radius:100%;width:18px;height:18px;position:absolute}.pcr-app .pcr-selection .pcr-color-palette,.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity{-webkit-user-select:none;user-select:none;cursor:grab;cursor:-webkit-grab;flex-direction:column;display:flex;position:relative}.pcr-app .pcr-selection .pcr-color-palette:active,.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active{cursor:grabbing;cursor:-webkit-grabbing}.pcr-app[data-theme=monolith]{width:14.25em;max-width:95vw;padding:.8em}.pcr-app[data-theme=monolith] .pcr-selection{flex-direction:column;flex-grow:1;justify-content:space-between;display:flex}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview{z-index:1;flex-direction:row;justify-content:space-between;width:100%;height:1em;margin-bottom:.5em;display:flex;position:relative}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview:before{content:"";z-index:-1;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>") 0 0/.5em;border-radius:.15em;width:100%;height:100%;position:absolute;top:0;left:0}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-last-color{cursor:pointer;z-index:2;border-radius:.15em 0 0 .15em;transition:background-color .3s,box-shadow .3s}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-current-color{border-radius:0 .15em .15em 0}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-last-color,.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-current-color{background:var(--pcr-color);width:50%;height:100%}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-palette{z-index:1;width:100%;height:8em}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-palette .pcr-palette{border-radius:.15em;width:100%;height:100%}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-palette .pcr-palette:before{content:"";z-index:-1;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>") 0 0/.5em;border-radius:.15em;width:100%;height:100%;position:absolute;top:0;left:0}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity{height:.5em;margin-top:.75em}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity .pcr-picker{top:50%;transform:translateY(-50%)}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity .pcr-slider{border-radius:50em;flex-grow:1}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(90deg,#0000,#000) 0 0/100%,url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>") 0 0/.25em}