.ascii-drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:240px;padding:40px 32px;border:2px dashed #d4d0cb;border-radius:8px;color:#999;cursor:pointer;transition:border-color .25s var(--ease-out),color .2s,background .25s var(--ease-out);text-align:center}.ascii-drop-zone svg{opacity:.5;transition:opacity .2s}.ascii-drop-zone:hover svg,.ascii-drop-zone--active svg{opacity:.8}.ascii-drop-text{font-size:var(--text-sm);line-height:1.5}.ascii-drop-zone:hover,.ascii-drop-zone--active{border-color:#1a1a1a;color:#555;background:#1a1a1a05}.ascii-workspace{display:flex;flex-direction:column;gap:0}.ascii-canvas{background:#141314;border-radius:8px 8px 0 0;overflow:auto;max-height:min(65vh,520px);min-height:180px;display:flex;align-items:center;justify-content:center;padding:16px}.ascii-output{margin:0;padding:0;font-family:var(--font-mono);font-size:6px;line-height:1.15;white-space:pre;user-select:all;cursor:text}.ascii-toolbar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#1a1a1a;border-radius:0 0 8px 8px}.ascii-toolbar-group{display:flex;align-items:center;gap:2px}.ascii-toolbar-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:transparent;border:none;border-radius:4px;color:#ffffff80;cursor:pointer;transition:background .15s,color .15s}.ascii-toolbar-btn:hover{background:#ffffff14;color:#ffffffe6}.ascii-toolbar-btn--active{color:#fff;background:#ffffff1a}.ascii-toolbar-btn--danger:hover{background:#c83c3c26;color:#e06060}.ascii-controls{display:flex;flex-direction:column;gap:0;margin-top:16px;border:1px solid #d4d0cb;border-radius:8px;overflow:hidden}.ascii-ctrl-section{padding:10px 16px 8px}.ascii-ctrl-section+.ascii-ctrl-section{border-top:1px solid #e8e5e0}.ascii-ctrl-heading{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:#aaa;font-weight:400;margin-bottom:6px}.ascii-ctrl-row{display:flex;align-items:center;gap:12px;min-height:24px}.ascii-ctrl-row+.ascii-ctrl-row{margin-top:4px}.ascii-ctrl-label{min-width:110px;flex-shrink:0;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.04em;color:#666}.ascii-color-swatches{display:flex;gap:6px;flex:1;justify-content:flex-end}.ascii-color-swatch{width:20px;height:20px;border:2px solid #d4d0cb;border-radius:3px;padding:0;cursor:pointer;transition:border-color .15s,transform .15s var(--ease-out)}.ascii-color-swatch:hover{border-color:#888}.ascii-color-swatch--active{border-color:#1a1a1a;box-shadow:0 0 0 1px #1a1a1a26}.ascii-ctrl-slider-wrap{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.ascii-slider{flex:1;min-width:0;height:3px;appearance:none;background:#e0ddd8;border-radius:2px;outline:none;margin:0;padding:0;transition:background .15s}.ascii-slider:hover{background:#d4d0cb}.ascii-slider::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:#1a1a1a;border-radius:50%;cursor:pointer;transition:transform .1s var(--ease-out)}.ascii-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.ascii-slider::-moz-range-thumb{width:12px;height:12px;background:#1a1a1a;border:none;border-radius:50%;cursor:pointer}.ascii-slider-val{min-width:32px;text-align:right;font-size:var(--text-xs);font-family:var(--font-mono);color:#999;flex-shrink:0}.ascii-select{flex:1;min-width:0;padding:5px 10px;font-size:var(--text-sm);font-family:inherit;color:#1a1a1a;background:transparent;border:1px solid #d4d0cb;border-radius:4px;outline:none;cursor:pointer;transition:border-color .15s}.ascii-select:focus{border-color:#1a1a1a}.ascii-toggle{position:relative;display:inline-block;width:32px;height:18px;cursor:pointer;margin-left:auto}.ascii-toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}.ascii-toggle-track{position:absolute;inset:0;background:#ddd;border-radius:9px;transition:background .2s}.ascii-toggle-track:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .2s var(--ease-out);box-shadow:0 1px 3px #00000026}.ascii-toggle input:checked+.ascii-toggle-track{background:#1a1a1a}.ascii-toggle input:checked+.ascii-toggle-track:after{transform:translate(14px)}
