:root{color-scheme:dark;--bg: #1C1B18;--panel: #1a202a;--panel-2: #202636;--elevated: #3A3835;--border: #3A3835;--border-subtle: rgba(52, 64, 86, .6);--text: #F5F3EB;--muted: #9A9589;--muted-2: #6B665C;--accent: #5DADEC;--accent-hover: #6FBAF3;--accent-dim: rgba(93, 173, 236, .15);--warning: #E8886A;--success: #7B9E7F;--shadow: 0 8px 32px rgba(0, 0, 0, .4);--glow: 0 0 20px rgba(93, 173, 236, .22);font-family:Google Sans,-apple-system,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(ellipse 1400px 900px at 65% 5%,#1b2330,#141820,#0e1118);color:var(--text)}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}.app-root{display:flex;flex-direction:column;height:100%;width:100%;background:transparent}.toolbar{height:56px;display:flex;align-items:center;gap:10px;padding:0 20px;border-bottom:1px solid var(--border-subtle);background:#1c1b18d9;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.toolbar-divider{width:1px;height:24px;background:var(--border);margin:0 6px}.toolbar-spacer{flex:1}.toolbar-count{font-size:11px;font-family:Google Sans Code,ui-monospace,monospace;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}.btn{padding:7px 12px;border-radius:7px;background:var(--panel-2);border:1px solid var(--border);font-size:12px;font-weight:500;letter-spacing:.01em;transition:transform .15s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}.btn:hover{background:var(--elevated);border-color:var(--muted-2);transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-accent{background:linear-gradient(135deg,#5dadec,#78c3f6);border-color:transparent;color:#1c1b18;font-weight:600;box-shadow:var(--glow)}.btn-accent:hover{background:linear-gradient(135deg,#6fb8f3,#8bd0ff);box-shadow:0 0 24px #5dadec59}.btn-icon{display:inline-flex;align-items:center;gap:6px}.btn-icon svg{flex-shrink:0}.btn-icon-only{display:inline-flex;align-items:center;justify-content:center;padding:8px 10px}.btn-icon-only svg{flex-shrink:0}.main{display:flex;flex:1;min-height:0;gap:0}.viewport{position:relative;flex:3 1 43%;min-width:0}.viewport-canvas{position:relative;width:100%;height:100%}.preview-panel{flex:4 1 57%;min-width:0;border-left:1px solid var(--border-subtle);background:#26252099;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:20px;display:flex;flex-direction:column;gap:16px;min-height:0}.panel-title{font-size:10px;font-family:Google Sans Code,ui-monospace,monospace;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.image-placeholder{border:2px dashed var(--border-subtle);border-radius:16px;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:14px;background:#14161a59}.image-placeholder div:first-child{font-weight:500;color:var(--text)}.image-canvas{display:block;width:auto;height:auto;max-width:100%;max-height:100%;border-radius:10px;border:1px solid var(--border);cursor:crosshair;box-shadow:var(--shadow)}.brush-slider{width:140px;accent-color:var(--accent)}.gizmo-slider{position:absolute;left:0;top:0;padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:#262520e6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow);transition:opacity .15s ease}.gizmo-slider .brush-slider{width:176px}.preview-stack{display:flex;flex-direction:column;gap:14px;flex:1;min-height:0;align-items:center}.preview-rail{width:min(100%,900px);display:flex;flex-direction:column;gap:12px;flex:1;min-height:0}.preview-header{display:flex;align-items:center;justify-content:space-between;gap:14px}.preview-left{display:flex;align-items:center;gap:14px}.preview-right{display:flex;align-items:center;gap:10px}.size-label{font-size:10px;font-family:Google Sans Code,ui-monospace,monospace;text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}.size-toggle{display:inline-flex;gap:0;background:var(--panel);border-radius:999px;padding:3px;border:1px solid var(--border-subtle)}.size-toggle .toggle-button{letter-spacing:.12em}.preview-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}.preview-frame{width:100%;height:100%;display:grid;place-items:center;border-radius:18px;border:1px solid var(--border-subtle);background:linear-gradient(140deg,#14161aeb,#101216b8);box-shadow:inset 0 0 0 1px #ffffff05,var(--shadow);position:relative;overflow:hidden}.preview-frame canvas.image-canvas{width:100%;height:100%;border-radius:16px;border:none;box-shadow:none;cursor:crosshair;touch-action:none}.drop-zone{width:calc(100% - 48px);height:calc(100% - 48px);border:2px dashed var(--border-subtle);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:14px;background:#14161a59}.drop-zone div:first-of-type{font-weight:500;color:var(--text)}.drop-zone-icon{color:var(--muted);margin-bottom:8px}.preview-zoom-controls{position:absolute;right:0;bottom:0;display:flex;gap:6px}.preview-zoom-controls button{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:34px;height:26px;padding:0 8px;border-radius:999px;border:1px solid var(--border-subtle);background:#1a1e26bf;color:var(--text);font-size:11px;font-family:Google Sans,-apple-system,sans-serif;letter-spacing:.02em}.preview-zoom-controls button:hover{border-color:#5dadec66}.preview-toggle{display:inline-flex;gap:0;background:var(--panel);border-radius:999px;padding:3px;border:1px solid var(--border-subtle);width:fit-content}.toggle-button{padding:5px 10px;border-radius:999px;border:none;background:transparent;font-size:10px;font-family:Google Sans Code,ui-monospace,monospace;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);transition:background .2s ease,color .2s ease,box-shadow .2s ease}.toggle-button:hover{color:var(--text)}.toggle-button.active{background:linear-gradient(135deg,#5dadec,#78c3f6);color:#0d1218;box-shadow:var(--glow)}.viewport-hud{position:absolute;top:20px;left:20px;padding:12px 14px;border-radius:10px;border:1px solid var(--border-subtle);background:#262520d9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--muted);font-size:11px;font-family:Google Sans Code,ui-monospace,monospace;line-height:1.5;letter-spacing:.02em;pointer-events:none;box-shadow:var(--shadow)}.helper-text{font-size:12px;color:var(--muted)}@media (max-width: 960px){.main{flex-direction:column}.preview-panel{width:100%;border-left:none;border-top:1px solid var(--border-subtle)}.brush-controls{right:16px;bottom:16px}}