*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#09090b;--surface:#0f0f12;--surface2:#18181c;--surface3:#202025;--border:#ffffff0d;--border-md:#ffffff17;--text:#f4f3f0;--text-muted:#5e5e6a;--text-dim:#35353f;--accent:#6b7fff;--accent-hi:#8b9fff;--accent-dim:#1e2240;--accent-bg:#6b7fff12;--accent-border:#6b7fff2e;--r:7px;--r-lg:11px;--sidebar:500px;--header:50px}html,body{height:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;flex-direction:column;font-family:Geist,sans-serif;display:flex;overflow:hidden}header{height:var(--header);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:center;align-items:center;gap:14px;animation:.4s both fadeIn;display:flex}header h1{letter-spacing:-.01em;color:var(--text);font-size:14px;font-weight:600}.header-sep{background:var(--border-md);flex-shrink:0;width:1px;height:14px}header p{color:var(--text-muted);font-family:Geist Mono,monospace;font-size:12px}.container{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}#drop-zone{cursor:pointer;flex:1;justify-content:center;align-items:center;padding:2rem;animation:.5s both fadeUp;display:flex}#drop-zone:hover .drop-inner,#drop-zone.drag-over .drop-inner{border-color:var(--gold-hi);background:#d4a85308}.drop-inner{text-align:center;border:1.5px dashed var(--border-md);border-radius:var(--r-lg);flex-direction:column;align-items:center;width:100%;max-width:400px;padding:3rem 2.5rem;transition:border-color .2s,background .2s;display:flex}.drop-inner svg.icon{width:28px;height:28px;stroke:var(--text-dim);margin-bottom:1rem}.drop-inner h2{color:var(--text);margin-bottom:6px;font-size:15px;font-weight:500}.drop-inner p{color:var(--text-muted);font-family:Geist Mono,monospace;font-size:12px}#controls-section{grid-template-columns:var(--sidebar) 1fr;flex:1;min-height:0;display:grid;overflow:hidden}.col-left{border-right:1px solid var(--border);flex-direction:column;gap:1.25rem;padding:1.25rem 1.5rem;display:flex;overflow-y:auto}.col-left::-webkit-scrollbar{width:3px}.col-left::-webkit-scrollbar-track{background:0 0}.col-left::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:3px}.banner{background:var(--accent-bg);border:1px solid var(--accent-border);border-radius:var(--r);color:var(--accent-hi);align-items:center;gap:9px;padding:10px 12px;font-family:Geist Mono,monospace;font-size:12px;line-height:1.55;display:flex}.banner svg{width:13px;height:13px;stroke:var(--accent-hi);flex-shrink:0;margin-top:2px}.grid-2{grid-template-columns:1fr 1fr;gap:1.1rem 1.25rem;display:grid}label.field-label{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);justify-content:space-between;align-items:center;margin-bottom:8px;font-family:Geist Mono,monospace;font-size:11px;display:flex}label.field-label span{color:var(--accent-hi);letter-spacing:0;text-transform:none;font-size:12px;font-weight:500}.hint{color:var(--text-dim);margin-top:5px;font-family:Geist Mono,monospace;font-size:11px}input[type=range]{appearance:none;background:var(--surface3);cursor:pointer;border-radius:3px;outline:none;width:100%;height:3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:14px;height:14px;transition:transform .15s,box-shadow .15s}input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 4px var(--accent-bg);transform:scale(1.2)}input[type=color]{border:1px solid var(--border-md);border-radius:var(--r);background:var(--surface2);cursor:pointer;width:100%;height:34px;padding:2px}select{background:var(--surface2);border:1px solid var(--border-md);border-radius:var(--r);width:100%;height:34px;color:var(--text);cursor:pointer;outline:none;padding:0 10px;font-family:Geist Mono,monospace;font-size:12px}select:focus{border-color:var(--accent)}.invert-row{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);justify-content:space-between;align-items:center;gap:1rem;padding:12px 14px;display:flex}.invert-row .info h3{color:var(--text);margin-bottom:3px;font-size:13px;font-weight:500}.invert-row .info p{color:var(--text-muted);font-family:Geist Mono,monospace;font-size:11px}.toggle{cursor:pointer;flex-shrink:0;width:38px;height:22px;position:relative}.toggle input{opacity:0;width:0;height:0;position:absolute}.toggle-track{background:var(--surface3);border:1px solid var(--border-md);border-radius:22px;transition:background .2s,border-color .2s;position:absolute;inset:0}.toggle-thumb{background:var(--text-muted);border-radius:50%;width:16px;height:16px;transition:transform .2s,background .2s;position:absolute;top:3px;left:3px}.toggle input:checked~.toggle-track{background:var(--accent);border-color:var(--accent)}.toggle input:checked~.toggle-thumb{background:#fff;transform:translate(16px)}.btn{border-radius:var(--r);cursor:pointer;border:1px solid var(--border-md);background:var(--surface2);color:var(--text-muted);white-space:nowrap;justify-content:center;align-items:center;gap:7px;padding:8px 14px;font-family:Geist Mono,monospace;font-size:12px;transition:all .15s;display:inline-flex}.btn:hover{background:var(--surface3);color:var(--text);border-color:#ffffff26}.btn:active{transform:scale(.98)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;width:100%;font-weight:600}.btn-primary:hover{background:var(--accent-hi);border-color:var(--accent-hi);color:#fff}.btn svg{stroke:currentColor;flex-shrink:0;width:14px;height:14px}.col-right{flex-direction:column;gap:1rem;padding:1.25rem 1.5rem;display:flex;overflow-y:auto}.col-right::-webkit-scrollbar{width:3px}.col-right::-webkit-scrollbar-track{background:0 0}.col-right::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:3px}.preview-box{border:1px solid var(--border);border-radius:var(--r-lg);flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.preview-box-header{text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;justify-content:space-between;align-items:center;padding:9px 14px;font-family:Geist Mono,monospace;font-size:11px;display:flex}.badge{background:var(--accent-bg);color:var(--accent-hi);border:1px solid var(--accent-border);text-transform:none;letter-spacing:0;border-radius:99px;padding:2px 7px;font-family:Geist Mono,monospace;font-size:10px}.preview-box-body{background:var(--surface2);flex:1;justify-content:center;align-items:center;min-height:160px;padding:1.5rem;display:flex}.preview-box-body img{object-fit:contain;max-width:100%;max-height:100%}.actions{flex-shrink:0;gap:8px;display:flex}.actions .btn{flex:1}.feedback{text-align:center;color:var(--accent-hi);flex-shrink:0;height:16px;font-family:Geist Mono,monospace;font-size:11px}.status-text{color:var(--text-dim);font-family:Geist Mono,monospace;font-size:12px}@keyframes fadeUp{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (width<=860px){html,body{height:auto;overflow:auto}body{overflow:auto}.container{flex:none;overflow:visible}#controls-section{flex:none;grid-template-columns:1fr;overflow:visible}.col-left{border-right:none;border-bottom:1px solid var(--border);overflow:visible}.col-right{overflow:visible}.preview-box{flex:none;min-height:200px}#drop-zone{flex:none;min-height:calc(100vh - 52px)}}