:root{--accent:#2563eb;--accent-dark:#1d4ed8;--background:#f6f8fb;--card:#fff;--text:#111827;--muted:#6b7280;--soft:#eef2f7;--border:#dfe5ee;--danger:#dc2626;--shadow:0 18px 50px #0f172a14;--radius:8px;--max-width:1440px;color:var(--text);background:var(--background);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background-color:#fff;background-image:linear-gradient(#cbd5e138 1px,#0000 1px),linear-gradient(90deg,#cbd5e133 1px,#0000 1px),linear-gradient(#fffffff7,#f8fafcf5),none;background-position:50%,50%,50%,50%;background-repeat:repeat,repeat,repeat,repeat;background-size:36px 36px,36px 36px,auto,auto;background-attachment:fixed;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;min-width:320px;margin:0}button,input,select{font:inherit}button{cursor:pointer}h1,h2,p{margin:0}h2{font-size:1.15rem;line-height:1.25}.app-shell{width:min(100% - 32px, var(--max-width));margin:0 auto;padding:26px 0 32px}.site-header{justify-content:center;align-items:center;gap:24px;padding:6px 0 30px;display:flex}.brand-link{color:var(--text);align-items:center;gap:16px;text-decoration:none;display:inline-flex}.brand-logo{object-fit:cover;border-radius:14px;width:68px;height:68px;box-shadow:0 8px 22px #0f172a1f}.brand-title{font-size:clamp(2rem,4vw,3.35rem);font-weight:860;line-height:1}.studio-layout{grid-template-columns:minmax(620px,1fr) minmax(340px,420px);align-items:start;gap:22px;display:grid}.control-column{align-items:start;gap:18px;display:grid}.control-panel,.preview-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);padding:22px}.live-preview-card{padding:22px;position:sticky;top:20px}.section-heading{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;display:flex}.section-heading p{color:var(--muted);margin-top:5px;font-size:.94rem}.section-heading.compact{margin-bottom:16px}.tab-list{border:1px solid var(--border);border-radius:var(--radius);background:#f8fafc;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:18px;padding:4px;display:grid}.tab-button{min-height:38px;color:var(--muted);background:0 0;border:0;border-radius:6px;font-weight:820}.tab-button.is-active{color:var(--text);background:#fff;box-shadow:0 6px 18px #0f172a14}.tab-panel[hidden]{display:none}.image-count{border:1px solid var(--border);color:var(--muted);background:#fbfcfe;border-radius:999px;flex:none;padding:6px 10px;font-size:.82rem;font-weight:700}.dropzone{border-radius:var(--radius);min-height:220px;color:var(--muted);text-align:center;background:linear-gradient(135deg,#2563eb14,#10b98114),#fbfcff;border:1.5px dashed #b8c4d6;place-items:center;margin-bottom:22px;transition:border-color .16s,background .16s,transform .16s;display:grid}.dropzone:hover,.dropzone.is-dragging,.dropzone.is-loading{border-color:var(--accent);background:linear-gradient(135deg,#2563eb1f,#10b9811a),#fff;transform:translateY(-1px)}.dropzone.is-loading{pointer-events:none}.dropzone input{display:none}.dropzone-icon{background:var(--accent);color:#fff;border-radius:50%;place-items:center;width:52px;height:52px;margin-bottom:14px;font-size:2rem;line-height:1;display:inline-grid}.dropzone-title{color:var(--text);font-size:1.1rem;font-weight:800;display:block}.dropzone-text{margin-top:6px;font-size:.93rem;display:block}.image-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;display:grid}.image-card{border:1px solid var(--border);border-radius:var(--radius);background:#fff;min-width:0;position:relative;overflow:hidden}.image-card img,.demo-preview{aspect-ratio:1;object-fit:cover;background:var(--soft);width:100%;display:block}.demo-preview-one{background:linear-gradient(140deg,#2563eb2e,#0000 48%),linear-gradient(45deg,#c7d2fe,#f9fafb 45%,#dbeafe)}.demo-preview-two{background:linear-gradient(135deg,#fef3c7,#f8fafc 42%,#bfdbfe),repeating-linear-gradient(90deg,#1118271a 0 2px,#0000 2px 18px)}.demo-preview-three{background:radial-gradient(circle at 35% 32%,#10b98147,#0000 24%),linear-gradient(135deg,#e0f2fe,#f8fafc 54%,#fecaca)}.image-card p{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;padding:10px 11px;font-size:.82rem;overflow:hidden}.crop-badge{color:#fff;background:#111827b8;border-radius:999px;padding:6px 9px;font-size:.72rem;font-weight:800;position:absolute;top:8px;left:8px}.card-actions{gap:6px;display:flex;position:absolute;top:8px;right:8px}.icon-button{min-width:32px;height:32px;color:var(--text);background:#ffffffe6;border:1px solid #d1d8e2e0;border-radius:999px;padding:0 10px;font-size:.75rem;font-weight:800;box-shadow:0 8px 22px #0f172a1a}.icon-button:hover{border-color:var(--accent);color:var(--accent)}.icon-button.danger:hover{color:var(--danger);border-color:#dc262652}.settings-form{gap:14px;display:grid}.field{color:var(--muted);gap:7px;font-size:.86rem;font-weight:760;display:grid}.range-field span{justify-content:space-between;gap:12px;display:flex}.range-field output{color:var(--text);font-weight:820}.field input,.field select{border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text);background:#fff;padding:10px 11px}.field input:focus,.field select:focus{border-color:var(--accent);outline:3px solid #2563eb24}.color-field input{height:44px;padding:5px}.custom-size-row{grid-template-columns:1fr 1fr;gap:10px;display:none}.custom-size-row.is-visible{display:grid}.toggle-field{color:var(--text);align-items:center;gap:10px;font-weight:760;display:flex}.toggle-field input{width:18px;height:18px;accent-color:var(--accent)}.button-row{gap:10px;margin-top:18px;display:grid}.button{border-radius:var(--radius);border:1px solid #0000;min-height:44px;padding:10px 14px;font-weight:820;transition:transform .15s,border-color .15s,background .15s}.small-button{min-height:36px;padding:7px 10px;font-size:.82rem}.button:hover{transform:translateY(-1px)}.button:disabled{cursor:not-allowed;opacity:.58;transform:none}.button.primary{background:var(--accent);color:#fff}.button.primary:hover{background:var(--accent-dark)}.button.secondary{border-color:var(--border);color:var(--text);background:#fff}.button.ghost{color:var(--muted);background:0 0}.full-width-button{width:100%;margin-top:18px}.modal-backdrop{z-index:50;background:#0f172a75;justify-content:center;align-items:center;padding:14px;display:flex;position:fixed;inset:0;overflow-y:auto}.modal-backdrop[hidden]{display:none}.modal-card{border:1px solid var(--border);border-radius:var(--radius);background:#fff;width:min(100%,760px);max-height:calc(100vh - 28px);padding:18px;overflow:auto;box-shadow:0 24px 70px #0f172a38}.modal-header{justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;display:flex}.cropper-stage{border-radius:var(--radius);background:#f8fafc;border:1px solid #b8c4d6;height:min(62vh,520px);min-height:260px;overflow:hidden}.cropper-stage img{max-width:100%;max-height:100%;display:block}.cropper-container{max-width:100%}.modal-actions{justify-content:flex-end;gap:10px;margin-top:16px;display:flex}.generated-placeholder{border:1px solid var(--border);border-radius:var(--radius);background:#f8fafc;place-items:center;min-height:min(760px,100vh - 220px);display:grid;position:relative}.preview-topbar{gap:14px;margin-bottom:18px;display:grid}.preview-topbar .section-heading{margin-bottom:0}.preview-actions{flex-wrap:wrap;gap:8px;display:flex}.konva-stage{place-items:center;max-width:100%;display:grid}.konva-stage[hidden]{display:none}.konva-stage .konvajs-content{border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.floating-image-controls{z-index:5;pointer-events:auto;gap:6px;display:flex;position:absolute;transform:translate(-50%)}.floating-image-controls[hidden]{display:none}.floating-control-button{color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#11182794;border:1px solid #ffffff85;border-radius:999px;place-items:center;min-width:34px;height:34px;font-size:.82rem;font-weight:900;display:grid;box-shadow:0 10px 28px #0f172a38}.floating-control-button:hover{background:#2563ebc7}.empty-preview-message{max-width:320px;color:var(--muted);text-align:center;font-weight:820}.site-footer{justify-content:center;padding-top:26px;display:flex}.github-link{border:1px solid var(--border);color:var(--text);background:#ffffffd1;border-radius:999px;align-items:center;gap:9px;padding:9px 13px;font-size:.9rem;font-weight:780;text-decoration:none;transition:border-color .15s,color .15s,transform .15s;display:inline-flex;box-shadow:0 10px 28px #0f172a0f}.github-link:hover{color:var(--accent);border-color:#2563eb6b;transform:translateY(-1px)}.github-icon{width:20px;height:20px}@media (width<=1180px){.studio-layout{grid-template-columns:1fr}.live-preview-card{position:static}}@media (width<=900px){.site-header{padding-bottom:16px}.preview-actions{grid-template-columns:1fr 1fr;display:grid}}@media (width<=560px){.app-shell{width:min(100% - 20px, var(--max-width));padding-top:18px}.control-panel,.preview-card{padding:16px}.section-heading{flex-direction:column;align-items:flex-start}.dropzone{min-height:180px}.image-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.custom-size-row,.custom-size-row.is-visible{grid-template-columns:1fr}.modal-actions{display:grid}.generated-placeholder{min-height:360px}.cropper-stage{height:min(56vh,420px)}}.cropper-container{-ms-touch-action:none;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;direction:ltr;font-size:0;line-height:0;position:relative}.cropper-container img{backface-visibility:hidden;image-orientation:0deg;width:100%;height:100%;display:block;min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important}.cropper-wrap-box,.cropper-canvas,.cropper-drag-box,.cropper-crop-box,.cropper-modal{position:absolute;inset:0}.cropper-wrap-box,.cropper-canvas{overflow:hidden}.cropper-drag-box{opacity:0;background-color:#fff}.cropper-modal{opacity:.5;background-color:#000}.cropper-view-box{outline:1px solid #3399ffbf;width:100%;height:100%;display:block;overflow:hidden}.cropper-dashed{opacity:.5;border:0 dashed #eee;display:block;position:absolute}.cropper-dashed.dashed-h{border-top-width:1px;border-bottom-width:1px;width:100%;height:33.3333%;top:33.3333%;left:0}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;width:33.3333%;height:100%;top:0;left:33.3333%}.cropper-center{opacity:.75;width:0;height:0;display:block;position:absolute;top:50%;left:50%}.cropper-center:before,.cropper-center:after{content:" ";background-color:#eee;display:block;position:absolute}.cropper-center:before{width:7px;height:1px;top:0;left:-3px}.cropper-center:after{width:1px;height:7px;top:-3px;left:0}.cropper-face,.cropper-line,.cropper-point{opacity:.1;width:100%;height:100%;display:block;position:absolute}.cropper-face{background-color:#fff;top:0;left:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;width:5px;top:0;right:-3px}.cropper-line.line-n{cursor:ns-resize;height:5px;top:-3px;left:0}.cropper-line.line-w{cursor:ew-resize;width:5px;top:0;left:-3px}.cropper-line.line-s{cursor:ns-resize;height:5px;bottom:-3px;left:0}.cropper-point{opacity:.75;background-color:#39f;width:5px;height:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;top:50%;right:-3px}.cropper-point.point-n{cursor:ns-resize;margin-left:-3px;top:-3px;left:50%}.cropper-point.point-w{cursor:ew-resize;margin-top:-3px;top:50%;left:-3px}.cropper-point.point-s{cursor:s-resize;margin-left:-3px;bottom:-3px;left:50%}.cropper-point.point-ne{cursor:nesw-resize;top:-3px;right:-3px}.cropper-point.point-nw{cursor:nwse-resize;top:-3px;left:-3px}.cropper-point.point-sw{cursor:nesw-resize;bottom:-3px;left:-3px}.cropper-point.point-se{cursor:nwse-resize;opacity:1;width:20px;height:20px;bottom:-3px;right:-3px}@media (width>=768px){.cropper-point.point-se{width:15px;height:15px}}@media (width>=992px){.cropper-point.point-se{width:10px;height:10px}}@media (width>=1200px){.cropper-point.point-se{opacity:.75;width:5px;height:5px}}.cropper-point.point-se:before{content:" ";opacity:0;background-color:#39f;width:200%;height:200%;display:block;position:absolute;bottom:-50%;right:-50%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-hide{width:0;height:0;display:block;position:absolute}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}