@font-face{font-family:SF Pro Display;src:url(/ASCII-Studio/assets/SFPRODISPLAYREGULAR-DF_3XEGl.OTF)format("opentype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:SF Pro Display;src:url(/ASCII-Studio/assets/SFPRODISPLAYMEDIUM-DSttQARu.OTF)format("opentype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:SF Pro Display;src:url(/ASCII-Studio/assets/SFPRODISPLAYBOLD-CkqE-6tD.OTF)format("opentype");font-weight:700;font-style:normal;font-display:swap}:root{--bg:#000;--surface:#1c1c1e;--surface-2:#2c2c2e;--surface-3:#3a3a3c;--surface-4:#48484a;--separator:#ffffff17;--separator-strong:#ffffff29;--label:#f5f5f7;--label-secondary:#ebebf599;--label-tertiary:#ebebf54d;--accent:#0a84ff;--accent-hover:#409cff;--green:#30d158;--red:#ff453a;--radius-sm:8px;--radius:12px;--radius-lg:16px;--font:"SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--mono:"SF Mono", ui-monospace, Menlo, Consolas, "Courier New", monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font);background:var(--bg);color:var(--label);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:13px;line-height:1.4}*{scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--surface-4)}.container{gap:12px;height:100vh;padding:12px;display:flex}.sidebar{background:var(--surface);border:1px solid var(--separator);border-radius:var(--radius-lg);flex-direction:column;flex-shrink:0;gap:18px;width:320px;padding:16px;display:flex;overflow-y:auto}.panel{background:var(--surface);border:1px solid var(--separator);border-radius:var(--radius-lg);flex-direction:column;flex:1;gap:12px;min-width:0;padding:16px;display:flex}.brand{letter-spacing:-.01em;align-items:center;gap:9px;font-size:15px;font-weight:600;display:flex}.brand-mark{color:#fff;background:linear-gradient(135deg, var(--accent), #5e5ce6);border-radius:7px;justify-content:center;align-items:center;width:24px;height:24px;font-size:13px;font-weight:700;display:inline-flex}.mode-toggle{background:var(--surface-2);border-radius:9px;gap:2px;padding:2px;display:flex}.mode-option{color:var(--label-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:7px;flex:1;justify-content:center;align-items:center;padding:6px 10px;font-size:13px;font-weight:500;transition:background .2s,color .2s;display:flex}.mode-option input{display:none}.mode-option.active{background:var(--surface-4);color:var(--label);box-shadow:0 1px 3px #0000004d}.input-section{flex-direction:column;display:flex}.input-section h3{text-transform:uppercase;letter-spacing:.05em;color:var(--label-tertiary);margin-bottom:9px;font-size:11px;font-weight:600}.file-input-wrapper{text-align:center;border:1.5px dashed var(--separator-strong);border-radius:var(--radius);background:var(--surface-2);min-height:88px;color:var(--label-secondary);cursor:pointer;justify-content:center;align-items:center;padding:16px;transition:border-color .2s,background .2s,color .2s;display:flex;position:relative}.file-input-wrapper:hover{border-color:var(--accent);color:var(--label)}.file-input-wrapper.drag-over{border-color:var(--accent);color:var(--label);background:#0a84ff1f}.file-input-wrapper input[type=file]{opacity:0;cursor:pointer;position:absolute;inset:0}.image-preview{text-align:center;margin-top:12px}.image-preview img{border-radius:var(--radius-sm);border:1px solid var(--separator);max-width:100%;max-height:160px}.settings-section{flex-direction:column;gap:16px;display:flex}.setting-group{flex-direction:column;gap:7px;display:flex}.setting-group>label{color:var(--label-secondary);font-size:12px;font-weight:500}.text-input,.setting-group select,.setting-group input[type=text]{width:100%;font-family:var(--font);color:var(--label);background:var(--surface-2);border:1px solid var(--separator);border-radius:var(--radius-sm);padding:9px 11px;font-size:13px;transition:border-color .15s}.text-input{font-size:14px}.text-input:focus,.setting-group select:focus,.setting-group input[type=text]:focus{border-color:var(--accent);outline:none}.text-input::placeholder,.setting-group input::placeholder{color:var(--label-tertiary)}.range-group{align-items:center;gap:12px;display:flex}.range-group input[type=range]{appearance:none;background:var(--surface-3);cursor:pointer;border-radius:2px;flex:1;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0006}input[type=range]::-moz-range-thumb{cursor:pointer;background:#fff;border:none;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0006}.range-value{text-align:right;min-width:30px;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--label-secondary);font-size:12px}.toggle-row{cursor:pointer;justify-content:space-between;align-items:center;gap:10px;display:flex}.toggle-row>span:first-child{color:var(--label);font-size:13px}.switch{flex-shrink:0;width:38px;height:22px;position:relative}.switch input{opacity:0;width:0;height:0;position:absolute}.switch .track{background:var(--surface-3);border-radius:11px;transition:background .2s;position:absolute;inset:0}.switch .track:before{content:"";background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .2s;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #00000059}.switch input:checked+.track{background:var(--green)}.switch input:checked+.track:before{transform:translate(16px)}.color-row{gap:10px;display:flex}.color-row>div{flex-direction:column;flex:1;gap:5px;display:flex}.color-label{color:var(--label-tertiary);font-size:11px}input[type=color]{border:1px solid var(--separator);border-radius:var(--radius-sm);background:var(--surface-2);cursor:pointer;width:100%;height:32px;padding:0}input[type=color]::-webkit-color-swatch-wrapper{padding:3px}input[type=color]::-webkit-color-swatch{border:none;border-radius:5px}.panel-header{border-bottom:1px solid var(--separator);justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;display:flex}.output-controls{flex-wrap:wrap;gap:8px;display:flex}.btn{font-family:var(--font);cursor:pointer;border:none;border-radius:8px;padding:7px 14px;font-size:13px;font-weight:500;transition:background .15s,opacity .15s}.btn:disabled{opacity:.35;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-primary:not(:disabled):hover{background:var(--accent-hover)}.btn-secondary{background:var(--surface-3);color:var(--label)}.btn-secondary:not(:disabled):hover{background:var(--surface-4)}.btn-danger{color:var(--red);background:0 0}.btn-danger:not(:disabled):hover{background:#ff453a24}.status-display{min-width:0;color:var(--label-secondary);align-items:center;gap:7px;font-size:12px;display:flex}.status-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.status-dot.info{background:var(--label-tertiary)}.status-dot.success{background:var(--green)}.status-dot.error{background:var(--red)}.status-message{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.output-area{flex:1;min-height:0;display:flex}.output-container{background:var(--bg);border:1px solid var(--separator);border-radius:var(--radius);flex:1;min-width:0;display:flex;overflow:auto}.ascii-output{resize:none;width:100%;height:100%;color:var(--label);font-family:var(--mono);white-space:pre;background:0 0;border:none;padding:16px;font-size:12px;line-height:1.05}.ascii-output:focus{outline:none}.ascii-image{max-width:100%;margin:auto;display:block}@media (width<=768px){.container{flex-direction:column;height:auto;min-height:100vh}.sidebar{width:100%}.panel{min-height:60vh}}