:root{color-scheme:dark;--bg: #090b10;--panel: #111620;--panel-2: #1a212d;--elevated: #283242;--border: rgba(178, 205, 236, .15);--border-subtle: rgba(133, 164, 201, .12);--text: #f4f7fb;--muted: #a0aaba;--muted-2: #657184;--accent: #69b9ef;--accent-hover: #82d4ff;--accent-dim: rgba(105, 185, 239, .14);--warning: #f0a14a;--success: #77c79b;--shadow: 0 14px 32px rgba(0, 0, 0, .3), 0 3px 8px rgba(0, 0, 0, .24);--shadow-control: inset 0 1px 0 rgba(255, 255, 255, .07), 0 2px 0 rgba(4, 7, 11, .9), 0 4px 8px rgba(0, 0, 0, .18);--shadow-pressed: inset 0 2px 4px rgba(0, 0, 0, .42), 0 1px 1px rgba(255, 255, 255, .03);font-family:Google Sans,-apple-system,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);overflow:hidden}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--accent-hover);outline-offset:3px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app-root{display:flex;flex-direction:column;height:100%;width:100%;background:transparent}.toolbar{height:64px;display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid var(--border-subtle);background:#10151d;box-shadow:inset 0 1px #ffffff09;position:relative;z-index:10}.toolbar-divider{width:1px;height:24px;background:#a6c1e129;margin:0 2px}.toolbar-spacer{flex:1}.wordmark{color:var(--text);font-size:16px;font-weight:650;letter-spacing:-.025em;-webkit-user-select:none;user-select:none}.btn{min-height:36px;padding:8px 12px;border-radius:999px;background:#202834;border:1px solid rgba(179,207,239,.14);font-size:12px;font-weight:560;letter-spacing:.01em;box-shadow:var(--shadow-control);transition:transform .12s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease}.btn:hover{background:#293443;border-color:#bad9f93d;transform:translateY(-1px)}.btn:active{transform:translateY(1px);box-shadow:var(--shadow-pressed)}.btn:disabled{opacity:.34;cursor:not-allowed;transform:none;box-shadow:inset 0 1px #ffffff08}.btn-accent{background:linear-gradient(180deg,#79c8f7,#5aa9dd);border-color:#b6e1fc66;border-radius:999px;color:#07111a;font-weight:680;box-shadow:inset 0 1px #ffffff57,0 1px #347ba9}.btn-accent:hover{background:linear-gradient(180deg,#8bd1f9,#68b5e4);box-shadow:inset 0 1px #fff6,0 1px #347ba9}.btn-accent:active{box-shadow:inset 0 2px 4px #1145664d}.btn-icon{display:inline-flex;align-items:center;gap:7px}.btn-icon svg{flex-shrink:0}.btn-icon-only{display:inline-flex;align-items:center;justify-content:center;min-width:36px;padding:8px}.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;background:#0b0e14}.viewport-canvas{position:relative;width:100%;height:100%}.preview-panel{flex:4 1 57%;min-width:0;border-left:1px solid rgba(135,166,201,.14);background:#121720;padding:24px;display:flex;flex-direction:column;gap:16px;min-height:0}.panel-title{font-size:13px;font-weight:620;letter-spacing:-.01em;color:var(--text)}.panel-subtitle{margin-top:3px;font-size:10px;color:var(--muted-2)}.preview-heading{min-width:185px}.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:14px;border:1px solid rgba(190,217,244,.12);cursor:crosshair;box-shadow:var(--shadow)}.brush-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:140px;height:6px;border-radius:999px;border:1px solid rgba(175,204,235,.14);box-shadow:inset 0 2px 4px #0000008c,0 1px #ffffff09;cursor:pointer}.brush-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;border:1px solid rgba(215,239,255,.7);background:var(--accent);box-shadow:inset 0 1px #ffffff61,0 2px #2f6f99,0 4px 8px #00000052}.brush-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:1px solid rgba(215,239,255,.7);background:var(--accent);box-shadow:0 2px #2f6f99,0 4px 8px #00000052}.gizmo-slider{position:absolute;left:0;top:0;width:224px;padding:10px 12px 13px;border-radius:10px;border:1px solid rgba(185,211,238,.17);background:#181f29f7;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px #ffffff0e,0 8px 18px #00000057,0 2px 5px #00000047;transition:opacity .15s ease}.gizmo-slider .brush-slider{display:block;width:100%}.gizmo-slider-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;color:var(--muted);font-family:Google Sans Code,ui-monospace,monospace;font-size:9px;font-weight:600;letter-spacing:.05em}.gizmo-slider-header output{color:var(--accent-hover);letter-spacing:.04em}.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:18px;flex:1;min-height:0}.preview-header{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:42px}.preview-left{display:flex;align-items:center;gap:16px}.preview-right{display:flex;align-items:center;gap:10px}.size-label{font-size:10px;font-family:Google Sans Code,ui-monospace,monospace;letter-spacing:.05em;color:var(--muted-2)}.size-toggle{display:inline-flex;gap:0;background:#0b1017;border-radius:999px;padding:3px;border:1px solid rgba(163,194,228,.13);box-shadow:inset 0 1px 3px #0000006b,0 1px #ffffff08}.size-toggle .toggle-button{letter-spacing:.04em}.preview-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative;isolation:isolate}.preview-composition{flex:none;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;justify-items:end;gap:10px}.preview-frame{width:100%;height:100%;display:grid;place-items:center;border-radius:16px;border:1px solid rgba(162,195,230,.14);background:#0d1219;box-shadow:inset 0 1px #ffffff09,inset 0 0 0 1px #00000052,0 16px 36px #00000047,0 4px 10px #0000003d;position:relative;overflow:hidden}.preview-frame canvas.image-canvas{width:100%;height:100%;border-radius:14px;border:none;box-shadow:none;cursor:crosshair;touch-action:none}.drop-zone{width:calc(100% - 48px);height:calc(100% - 48px);border:1px dashed rgba(157,192,229,.2);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:14px;background:#0d121975}.drop-zone div:first-of-type{font-weight:500;color:var(--text)}.drop-zone-icon{color:var(--accent);margin-bottom:8px;filter:none}.drop-zone-actions{display:flex;flex-direction:column;align-items:center;gap:9px;margin-top:9px}.drop-zone-button{min-width:112px}.example-image-button{padding:2px 4px;border-radius:999px;color:var(--accent);font-size:11px;font-weight:560;text-underline-offset:3px}.example-image-button:hover{color:var(--accent-hover);text-decoration:underline}.preview-zoom-controls{display:flex;gap:3px;padding:4px;border-radius:999px;border:1px solid rgba(174,204,235,.16);background:#181f29f5;box-shadow:inset 0 1px #ffffff0d,0 6px 14px #0000004d;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);white-space:nowrap}.preview-zoom-controls button{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:32px;height:30px;padding:0 8px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--text);font-size:11px;font-family:Google Sans,-apple-system,sans-serif;letter-spacing:.02em}.preview-zoom-controls button:hover{border-color:#8dc8f133;background:#69b9ef1a;color:var(--accent-hover)}.preview-zoom-controls button:active{background:#03080d73;box-shadow:inset 0 2px 4px #00000061}.preview-toggle{display:inline-flex;gap:0;background:#0b1017;border-radius:999px;padding:3px;border:1px solid rgba(163,194,228,.13);box-shadow:inset 0 1px 3px #0000006b,0 1px #ffffff08;width:fit-content}.toggle-button{min-height:28px;padding:6px 11px;border-radius:999px;border:none;background:transparent;font-size:9px;font-family:Google Sans Code,ui-monospace,monospace;font-weight:650;letter-spacing:.04em;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(180deg,#79c8f7,#5aa9dd);color:#07111a;box-shadow:inset 0 1px #ffffff57,0 1px #347ba9}.viewport-hud{position:absolute;top:20px;left:20px;padding:12px 14px 13px;border-radius:9px;border:1px solid rgba(174,202,231,.15);background:#141a23f0;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);pointer-events:none;box-shadow:inset 0 1px #ffffff0b,0 7px 16px #0000004d}.hud-primary{font-size:12px;font-weight:560;color:var(--text)}.hud-secondary{margin-top:4px;color:var(--muted);font-family:Google Sans Code,ui-monospace,monospace;font-size:9px;letter-spacing:.015em}.helper-text{font-size:12px;color:var(--muted)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (max-width: 960px){body{overflow:auto}.app-root{min-height:100%;height:auto}.toolbar{flex-wrap:wrap;height:auto;min-height:64px;padding-block:10px}.main{flex-direction:column;min-height:1100px}.preview-panel{width:100%;border-left:none;border-top:1px solid var(--border-subtle)}.viewport{min-height:520px}.preview-header{align-items:flex-start}.preview-left{align-items:flex-start;flex-direction:column}}@media (max-width: 620px){.toolbar-divider{display:none}.toolbar{gap:8px}.preview-panel{padding:16px}.preview-header{flex-direction:column}.preview-right{width:100%;justify-content:space-between}}