*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}body{color:#fff;--ui-radius:10px;--image-inset:10px;--image-inset-double:20px;--brand-overhang:14px;--panel-surface-bg:#0808089e;--panel-surface-blur:blur(1px);background:#0d0d0d;height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}#toolbar{z-index:14;border-radius:var(--ui-radius);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background:#080808c7;border:1px solid #ffffff1a;align-items:center;gap:12px;width:auto;max-width:calc(100vw - 32px);padding:12px;display:flex;position:absolute;bottom:16px;left:16px;box-shadow:0 18px 42px #0000006b,inset 0 0 0 1px #ffffff08}.logo{letter-spacing:.12em;color:#ffffffd9;white-space:nowrap;font-family:Archivo Black,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:45px;font-weight:400}#brand-mark{top:max(20px, calc(var(--image-inset) - var(--brand-overhang)));left:max(20px, calc(var(--image-inset) - var(--brand-overhang)));z-index:14;border-radius:var(--ui-radius);background:var(--panel-surface-bg);-webkit-backdrop-filter:var(--panel-surface-blur);backdrop-filter:var(--panel-surface-blur);border:1px solid #ffffff14;padding:10px 12px;position:absolute;box-shadow:0 14px 30px #00000047,inset 0 0 0 1px #ffffff08}#ui-controls{z-index:40;border-radius:var(--ui-radius);background:var(--panel-surface-bg);box-shadow:none;-webkit-backdrop-filter:var(--panel-surface-blur);backdrop-filter:var(--panel-surface-blur);border:1px solid #ffffff1f;align-items:flex-start;gap:8px;padding:8px;display:flex;position:absolute;top:16px;right:16px}.ui-buttons{gap:8px;display:grid}#ui-controls .ui-buttons .btn{color:#ffffffe0;width:100%;box-shadow:none;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background:#ffffff0f;border-color:#ffffff1a;border-radius:5px}#ui-controls .ui-buttons .btn:hover,#ui-controls .ui-buttons .btn.active{color:#fff}.btn.panel-handle{border-radius:var(--ui-radius);color:#ffffffe0;cursor:grab;background:#0006;border-color:#ffffff2e;flex:none;place-items:center;width:30px;height:30px;padding:0;display:grid}.btn.panel-handle:hover{background:#ffffff24}.btn.panel-handle:active,.btn.panel-handle.active{cursor:grabbing}.toolbar-content{align-items:center;min-width:0;display:flex}.toolbar-controls{flex-wrap:nowrap;align-items:center;gap:8px;display:flex}#toolbar .toolbar-controls .btn{border-radius:5px}.btn{color:#ffffffbf;border-radius:var(--ui-radius);cursor:pointer;letter-spacing:.02em;white-space:nowrap;background:#ffffff12;border:1px solid #ffffff1a;padding:6px 14px;font-size:12px;font-weight:500;line-height:1;transition:background .15s,border-color .15s,color .15s}.btn:hover{color:#fff;background:#ffffff21;border-color:#ffffff2e}.btn.active{color:#fff;background:#ffffff24;border-color:#ffffff47}#canvas-container{width:100%;height:100%;position:relative;overflow:hidden}#image-stage{inset:var(--image-inset);position:absolute}#image-stage canvas{width:100%;height:100%;display:block;position:absolute;top:0;left:0}#overlay-canvas{cursor:crosshair}#preview-frame{z-index:12;aspect-ratio:16/10;border-radius:var(--ui-radius);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);pointer-events:none;background:#0a0a0cb8;border:1px solid #ffffff29;width:min(34vw,320px);padding:0;position:absolute;bottom:16px;right:16px;overflow:hidden;box-shadow:0 18px 50px #00000080,inset 0 0 0 1px #ffffff0a}#preview-frame .btn{z-index:2;pointer-events:auto;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);border-radius:var(--ui-radius);background:#0006;border-color:#ffffff2e;place-items:center;width:30px;height:30px;padding:0;display:grid;position:absolute;top:12px;right:12px}#preview-frame #btn-move{cursor:grab;left:12px;right:auto}#preview-frame #btn-move:active{cursor:grabbing}#preview-frame .btn:hover{background:#ffffff24}#preview-canvas{top:var(--image-inset);left:var(--image-inset);width:calc(100% - var(--image-inset-double));height:calc(100% - var(--image-inset-double));border-radius:var(--ui-radius);display:block;position:absolute}body.border-hidden{--image-inset:0px;--image-inset-double:0px}body.border-hidden #preview-canvas{border-radius:var(--ui-radius)}body.preview-full{overflow:hidden}body.preview-full #canvas-container{background:#050507}body.preview-full #gl-canvas,body.preview-full #overlay-canvas,body.preview-full #hint{opacity:0;pointer-events:none}body.preview-full.ui-hidden #gl-canvas,body.preview-full.ui-hidden #overlay-canvas{opacity:1;pointer-events:auto}body.preview-full #preview-frame{aspect-ratio:auto;border-radius:var(--ui-radius);z-index:30;width:auto;box-shadow:none;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background:#050507f5;border:none;padding:0;position:fixed;inset:0}body.preview-full #preview-frame .btn{top:18px;right:18px}body.preview-full #btn-move{display:none}body.preview-full #preview-canvas{border-radius:var(--ui-radius)}#hint{top:max(15px, calc(var(--image-inset) - 12px));z-index:13;border-radius:var(--ui-radius);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);color:#ffffffb8;pointer-events:none;white-space:nowrap;text-overflow:ellipsis;letter-spacing:.04em;background:#0808089e;border:1px solid #ffffff1f;max-width:calc(100vw - 360px);padding:6px 10px;font-size:11px;transition:opacity .4s;position:absolute;left:50%;overflow:hidden;transform:translate(-50%)}@media (width<=720px){#brand-mark{top:max(6px, calc(var(--image-inset) - var(--brand-overhang)));left:max(6px, calc(var(--image-inset) - var(--brand-overhang)))}#ui-controls{top:12px;right:12px}#toolbar{align-items:flex-start;max-width:calc(100vw - 24px);padding:10px;bottom:12px;left:12px}.toolbar-content{flex-wrap:wrap;gap:10px}.toolbar-controls{flex-wrap:wrap}#preview-frame{width:min(42vw,260px);bottom:12px;right:12px}#hint{top:max(6px, calc(var(--image-inset) - 12px));white-space:normal;text-overflow:clip;max-width:calc(100vw - 120px);overflow:visible}}body.ui-hidden #brand-mark,body.ui-hidden #toolbar,body.ui-hidden #preview-frame{opacity:0;visibility:hidden;pointer-events:none}#cp-panel{z-index:1000;border-radius:var(--ui-radius);-webkit-user-select:none;user-select:none;background:#1c1c1e;border:1px solid #ffffff1c;width:228px;padding:14px;display:none;position:fixed;box-shadow:0 12px 40px #000000b3,0 0 0 .5px #ffffff0d}#cp-sv-wrap{border-radius:var(--ui-radius);cursor:crosshair;width:200px;height:164px;margin-bottom:11px;position:relative;overflow:hidden}#cp-sv-canvas{width:200px;height:164px;display:block}#cp-sv-cursor{border-radius:var(--ui-radius);pointer-events:none;border:2px solid #fff;width:13px;height:13px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1.5px #00000073,inset 0 0 0 1px #fff3}#cp-hue{appearance:none;border-radius:var(--ui-radius);cursor:pointer;background:linear-gradient(90deg,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#8000ff,#f0f,#ff0080,red);border:none;outline:none;width:200px;height:13px;margin-bottom:11px;display:block}#cp-hue::-webkit-slider-thumb{-webkit-appearance:none;border-radius:var(--ui-radius);cursor:pointer;background:#fff;border:2px solid #00000040;width:17px;height:17px;box-shadow:0 1px 5px #00000080}#cp-hue::-moz-range-thumb{border-radius:var(--ui-radius);cursor:pointer;background:#fff;border:2px solid #00000040;width:17px;height:17px;box-shadow:0 1px 5px #00000080}#cp-bottom{align-items:center;gap:9px;display:flex}#cp-swatch{border-radius:var(--ui-radius);border:1px solid #ffffff21;flex-shrink:0;width:30px;height:30px}#cp-hex{color:#fff;border-radius:var(--ui-radius);letter-spacing:.06em;background:#ffffff12;border:1px solid #ffffff1a;outline:none;flex:1;padding:7px 9px;font-family:SF Mono,Fira Code,monospace;font-size:12px;transition:border-color .15s}#cp-hex:focus{border-color:#ffffff4d}