*,*:before,*:after{box-sizing:border-box}*{margin:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{line-height:1.5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root{min-height:100vh}:root{--amber: #FFB000;--green: #33FF00;--bg-primary: #1a1a2e;--bg-secondary: #16213e;--text-primary: #eeeeee;--text-secondary: #a0a0a0;--text-tertiary: #666666;--border-color: #2a2a4a;--accent: #0f3460;--accent-hover: #1a4a80;--accent-text: #ffffff;--accent-transparent: rgba(15, 52, 96, .3);--terminal-bg: #0d0d0d}[data-theme=light]{--bg-primary: #f5f5f5;--bg-secondary: #ffffff;--text-primary: #222222;--text-secondary: #666666;--text-tertiary: #999999;--border-color: #dddddd;--accent: #3b82f6;--accent-hover: #2563eb;--accent-text: #ffffff;--accent-transparent: rgba(59, 130, 246, .15);--terminal-bg: #ffffff}body{background-color:var(--bg-primary);color:var(--text-primary);transition:background-color .3s ease,color .3s ease}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent)}.file-upload{border:2px dashed var(--border-color);border-radius:8px;text-align:center;cursor:pointer;transition:all .2s ease;background:var(--bg-secondary);display:flex;align-items:center;justify-content:center;min-height:200px}.file-upload:hover,.file-upload:focus{border-color:var(--accent);outline:none}.file-upload:focus{box-shadow:0 0 0 2px var(--accent-transparent)}.file-upload--dragging{border-color:var(--accent);background:var(--accent-transparent)}.file-upload--disabled{opacity:.6;cursor:not-allowed}.file-upload--disabled:hover{border-color:var(--border-color)}.file-upload__input{display:none}.file-upload__placeholder{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2rem}.file-upload__icon{width:48px;height:48px;color:var(--text-secondary)}.file-upload__icon svg{width:100%;height:100%}.file-upload__text{font-size:1rem;color:var(--text-primary);margin:0}.file-upload__subtext{font-size:.875rem;color:var(--text-secondary);margin:0}.file-upload__formats{font-size:.75rem;color:var(--text-tertiary);margin:.5rem 0 0}.transform-panel{background:var(--bg-secondary);border-radius:8px;padding:1rem}.transform-panel__title{font-size:1rem;font-weight:600;margin:0 0 1rem;color:var(--text-primary)}.transform-panel__row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.5rem}.transform-panel__row:last-child{margin-bottom:0}.transform-panel__label{font-size:.875rem;color:var(--text-secondary);flex-shrink:0}.transform-panel__size-inputs{display:flex;align-items:center;gap:.25rem}.transform-panel__size-separator{font-size:.875rem;color:var(--text-tertiary)}.transform-panel__input{padding:.375rem .5rem;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-primary);color:var(--text-primary);font-size:.875rem}.transform-panel__input:focus{outline:none;border-color:var(--accent)}.transform-panel__input:disabled{opacity:.6;cursor:not-allowed}.transform-panel__input--small{width:60px;text-align:center}.transform-panel__select{padding:.375rem .5rem;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-primary);color:var(--text-primary);font-size:.875rem;cursor:pointer;min-width:100px}.transform-panel__select:focus{outline:none;border-color:var(--accent)}.transform-panel__select:disabled{opacity:.6;cursor:not-allowed}.transform-panel__select--wide{flex:1}.transform-panel__select option:disabled{color:var(--text-tertiary)}.transform-panel__inline-checkbox{display:flex;align-items:center;gap:.25rem;cursor:pointer;font-size:.875rem;color:var(--text-secondary);flex-shrink:0}.transform-panel__inline-checkbox input{width:.875rem;height:.875rem;cursor:pointer}.transform-panel__inline-checkbox input:disabled{cursor:not-allowed}.transform-panel__inline-checkbox:has(input:disabled){cursor:not-allowed;opacity:.6}.output-panel{border-radius:8px;min-height:400px;display:flex;align-items:center;justify-content:center;overflow:auto;position:relative}.output-panel__loading{display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--text-secondary)}.output-panel__spinner{width:32px;height:32px;border:3px solid var(--border-color);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}.output-panel__content{margin:0;padding:1rem;line-height:1;white-space:pre;overflow:visible}.output-panel__row{display:block;height:1em}.output-panel__empty{color:var(--text-tertiary);text-align:center;padding:2rem}.output-panel__empty p{margin:0 0 .5rem;color:var(--text-primary);font-size:1rem}.output-panel__empty span{font-size:.875rem}.render-config{background:var(--bg-secondary);border-radius:8px;padding:1rem}.render-config__title{font-size:1rem;font-weight:600;margin:0 0 1rem;color:var(--text-primary)}.render-config__row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.5rem}.render-config__row:last-child{margin-bottom:0}.render-config__label{font-size:.875rem;color:var(--text-secondary);white-space:nowrap}.render-config__slider{flex:1;max-width:120px;cursor:pointer}.render-config__select{padding:.375rem .5rem;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-primary);color:var(--text-primary);font-size:.875rem;cursor:pointer;min-width:100px}.render-config__select:focus{outline:none;border-color:var(--accent)}.render-config__color-input{display:flex;gap:.25rem}.render-config__color-input input[type=color]{width:28px;height:28px;padding:1px;border:1px solid var(--border-color);border-radius:4px;cursor:pointer;background:var(--bg-primary)}.render-config__color-input input[type=text]{width:70px;padding:.25rem .375rem;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-primary);color:var(--text-primary);font-family:monospace;font-size:.75rem}.render-config__color-input input[type=text]:focus{outline:none;border-color:var(--accent)}.copy-button{position:relative;display:flex}.copy-button__main{flex:1;padding:.75rem 1rem;border:none;border-radius:4px 0 0 4px;background:var(--accent);color:var(--accent-text);font-size:.9375rem;font-weight:500;cursor:pointer;transition:background .2s ease}.copy-button__main:hover:not(:disabled){background:var(--accent-hover)}.copy-button__main:disabled{opacity:.6;cursor:not-allowed}.copy-button__dropdown-toggle{padding:.75rem .5rem;border:none;border-left:1px solid rgba(255,255,255,.2);border-radius:0 4px 4px 0;background:var(--accent);color:var(--accent-text);cursor:pointer;transition:background .2s ease}.copy-button__dropdown-toggle:hover:not(:disabled){background:var(--accent-hover)}.copy-button__dropdown-toggle:disabled{opacity:.6;cursor:not-allowed}.copy-button__dropdown-toggle svg{width:16px;height:16px}.copy-button__dropdown{position:absolute;top:100%;right:0;margin-top:.25rem;min-width:180px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:4px;box-shadow:0 4px 12px #0000004d;z-index:100;overflow:hidden}.copy-button__dropdown button{display:block;width:100%;padding:.75rem 1rem;border:none;background:transparent;color:var(--text-primary);font-size:.875rem;text-align:left;cursor:pointer;transition:background .2s ease}.copy-button__dropdown button:hover{background:var(--accent-transparent)}.copy-button__dropdown hr{margin:0;border:none;border-top:1px solid var(--border-color)}.theme-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;transition:background .2s ease,color .2s ease}.theme-toggle:hover{background:var(--accent-transparent);color:var(--accent)}.theme-toggle:focus{outline:none;box-shadow:0 0 0 2px var(--accent)}.theme-toggle svg{width:20px;height:20px}.input-preview{border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:200px}.input-preview--processing{opacity:.7}.input-preview__container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.input-preview__image{max-width:100%;max-height:100%;transition:transform .2s ease}.input-preview__overlay{position:absolute;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center}.input-preview__spinner{width:32px;height:32px;border:3px solid var(--border-color);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}.input-preview__empty{text-align:center;padding:2rem}.input-preview__empty p{margin:0 0 .5rem;color:var(--text-primary);font-size:1rem}.input-preview__empty span{color:var(--text-tertiary);font-size:.875rem}@keyframes spin{to{transform:rotate(360deg)}}.input-preview-config{background:var(--bg-secondary);border-radius:8px;padding:1rem}.input-preview-config__title{font-size:1rem;font-weight:600;margin:0 0 1rem;color:var(--text-primary)}.input-preview-config__row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.5rem}.input-preview-config__row:last-child{margin-bottom:0}.input-preview-config__label{font-size:.875rem;color:var(--text-secondary);white-space:nowrap}.input-preview-config__slider{flex:1;max-width:120px;cursor:pointer}.input-preview-config__select{padding:.375rem .5rem;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-primary);color:var(--text-primary);font-size:.875rem;cursor:pointer}.input-preview-config__select:focus{outline:none;border-color:var(--accent)}.input-preview-config__color-input{display:flex;gap:.25rem}.input-preview-config__color-input input[type=color]{width:28px;height:28px;padding:1px;border:1px solid var(--border-color);border-radius:4px;cursor:pointer;background:var(--bg-primary)}.input-preview-config__color-input input[type=text]{width:70px;padding:.25rem .375rem;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-primary);color:var(--text-primary);font-family:monospace;font-size:.75rem}.input-preview-config__color-input input[type=text]:focus{outline:none;border-color:var(--accent)}.app{min-height:100vh;display:flex;flex-direction:column;padding:1rem}.app__error{padding:1rem;margin-bottom:1rem;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:8px;color:#ef4444;font-size:.875rem}.app__grid{flex:1;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr auto auto;gap:1rem;max-width:1600px;margin:0 auto;width:100%}.app__upload-cell{position:relative;display:flex;flex-direction:column}.app__upload-cell .theme-toggle{position:absolute;top:.5rem;left:.5rem;z-index:10}.app__upload-cell .file-upload{flex:1}.app__button{padding:.75rem 1rem;border:none;border-radius:4px;font-size:.9375rem;font-weight:500;cursor:pointer;transition:all .2s ease}.app__button--primary{background:var(--accent);color:var(--accent-text)}.app__button--primary:hover:not(:disabled){background:var(--accent-hover)}.app__button--secondary{background:transparent;border:1px solid var(--border-color);color:var(--text-secondary)}.app__button--secondary:hover:not(:disabled){border-color:var(--accent);color:var(--text-primary)}.app__button:disabled{opacity:.6;cursor:not-allowed}@media(max-width:1100px){.app__grid{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto auto}.app__grid>:nth-child(1){grid-column:1;grid-row:1}.app__grid>:nth-child(2){grid-column:2;grid-row:1}.app__grid>:nth-child(3){grid-column:1/-1;grid-row:2}.app__grid>:nth-child(4){grid-column:1;grid-row:3}.app__grid>:nth-child(5){grid-column:2;grid-row:3}.app__grid>:nth-child(6){grid-column:1/-1;grid-row:4}.app__grid>:nth-child(7){grid-column:1;grid-row:5}.app__grid>:nth-child(8){grid-column:2;grid-row:5}.app__grid>:nth-child(9){grid-column:1/-1;grid-row:6}}@media(max-width:700px){.app__grid{grid-template-columns:1fr;grid-template-rows:repeat(9,auto)}.app__grid>:nth-child(1){grid-column:1;grid-row:1}.app__grid>:nth-child(2){grid-column:1;grid-row:2}.app__grid>:nth-child(3){grid-column:1;grid-row:3}.app__grid>:nth-child(4){grid-column:1;grid-row:4}.app__grid>:nth-child(5){grid-column:1;grid-row:5}.app__grid>:nth-child(6){grid-column:1;grid-row:6}.app__grid>:nth-child(7){grid-column:1;grid-row:7}.app__grid>:nth-child(8){grid-column:1;grid-row:8}.app__grid>:nth-child(9){grid-column:1;grid-row:9}}