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