.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:140px;padding:24px 16px;border:2px dashed var(--border);border-radius:var(--radius);background:var(--surface-2);color:var(--text-2);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}.drop-zone.is-hover,.drop-zone:focus-visible,.drop-zone:hover{border-color:var(--accent);background:var(--surface);outline:0}.drop-zone strong{color:var(--text);font-size:1.05rem}.drop-zone small{color:var(--muted)}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:.6rem}.preview-grid figure{margin:0;min-width:0}.preview-box{display:flex;align-items:center;justify-content:center;min-height:120px;padding:8px;border:1px solid var(--border);border-radius:var(--radius-sm);background-color:var(--surface-2);background-image:linear-gradient(45deg,rgba(127,127,127,.28) 25%,transparent 25%),linear-gradient(-45deg,rgba(127,127,127,.28) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(127,127,127,.28) 75%),linear-gradient(-45deg,transparent 75%,rgba(127,127,127,.28) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;overflow:auto}.preview-box canvas{max-width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges}.preview-grid figcaption{font-size:.82rem;color:var(--text-2);margin-top:.35rem;text-align:center}.field .grid label{display:block;font-weight:600;font-size:.93rem;color:var(--text);margin-bottom:.35rem}.size-presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:.7rem}.size-presets .btn.is-active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.opt-check{display:flex;align-items:flex-start;gap:.5rem;margin-bottom:.7rem}.opt-check input[type=checkbox]{width:1.05rem;height:1.05rem;margin-top:.18rem;flex:none;accent-color:var(--accent);cursor:pointer}.opt-check label{font-size:.93rem;color:var(--text);cursor:pointer}.opt-check .why{display:block;font-size:.82rem;color:var(--muted);font-weight:400}.depth-row{margin-bottom:.9rem}.depth-row>label{display:block;font-weight:600;font-size:.93rem;color:var(--text);margin-bottom:.35rem}.depth-row select{max-width:420px}.depth-row .hint{margin-top:.35rem}.bg-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.7rem}.bg-row label{font-size:.93rem;color:var(--text)}#opt-bg{width:52px;height:36px;flex:none;padding:0;border:1px solid var(--border);border-radius:8px;background:0 0;cursor:pointer}#opt-bg::-webkit-color-swatch-wrapper{padding:3px}#opt-bg::-webkit-color-swatch{border:none;border-radius:5px}#opt-bg::-moz-color-swatch{border:none;border-radius:5px}.cost-readout{font-family:var(--mono);font-size:.9rem;font-weight:600;color:var(--accent);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6rem .8rem;margin-bottom:.7rem;overflow-wrap:break-word}.out-note{font-size:.85rem;color:var(--muted);min-height:1.1em;margin-bottom:.6rem}#out-code{width:100%;min-height:260px;font-family:var(--mono);font-size:.8rem;line-height:1.45;white-space:pre;overflow:auto;resize:vertical}.out-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}.code-copy-btn{font:inherit;font-size:.85rem;font-weight:600;line-height:1;padding:.65rem 1.1rem;color:var(--text);background:var(--surface-2);border:2px solid var(--border);border-radius:var(--radius-sm);cursor:pointer}.code-copy-btn:hover{border-color:var(--accent);color:var(--accent)}.snip{font-family:var(--mono);font-size:.84rem;line-height:1.55;white-space:pre;overflow-x:auto;padding:.75rem .85rem;margin:0 0 .9rem;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text)}@media (max-width:560px){.preview-grid{grid-template-columns:1fr}.out-actions .btn,.out-actions .code-copy-btn{flex:1 1 100%}}