*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:root{--ink:#201d1d;--ink-deep:#0f0000;--charcoal:#302c2c;--body:#424245;--mute:#646262;--stone:#6e6e73;--ash:#9a9898;--canvas:#fdfcfc;--surface-soft:#f8f7f7;--surface-card:#f1eeee;--surface-dark:#201d1d;--surface-dark-elevated:#302c2c;--on-dark:#fdfcfc;--on-dark-mute:#9a9898;--hairline:rgba(15,0,0,0.12);--hairline-strong:#646262;--accent:#007aff;--font:'Berkeley Mono','IBM Plex Mono','JetBrains Mono',ui-monospace,'SFMono-Regular','Menlo','Consolas','Liberation Mono',monospace}html{font-size:16px;-webkit-font-smoothing:antialiased}body{font-family:var(--font);font-size:16px;font-weight:400;line-height:1.5;color:var(--body);background:var(--canvas);min-height:100vh;display:flex;flex-direction:column}pre{font-family:var(--font);font-size:10px;line-height:1.1;overflow:hidden}a{color:var(--ink);text-decoration:underline}.nav{border-bottom:1px solid var(--hairline);height:56px;display:flex;align-items:center}.nav-inner{max-width:960px;width:100%;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:32px}.nav-logo pre{font-size:7px;line-height:1.05;color:var(--ink);letter-spacing:-0.5px}.nav-logo{text-decoration:none}.nav-links{display:flex;gap:24px;align-items:center}.nav-link{font-weight:500;color:var(--ink);text-decoration:none}.nav-link-active{text-decoration:underline;text-underline-offset:4px}.nav-link-mute{color:var(--mute)}.hero-tui{background:var(--surface-dark);color:var(--on-dark);padding:64px 24px}.hero-tui-inner{max-width:960px;margin:0 auto}.hero-tui-art{color:var(--on-dark);font-size:10px;line-height:1.15;text-align:center;margin-bottom:32px;white-space:pre;overflow:hidden}.tui-prompt{background:var(--surface-dark-elevated);border-radius:4px;padding:8px 12px;display:flex;gap:12px;align-items:center;font-size:16px}.tui-prompt-pipe{color:var(--accent)}.tui-prompt-cmd{color:var(--on-dark);font-weight:500}.tui-prompt-token{background:var(--accent);color:#fff;padding:0 8px;border-radius:4px;font-size:14px}.tui-prompt-target{color:var(--on-dark-mute)}.converter-section{max-width:960px;width:100%;margin:96px auto;padding:0 24px}.section-header{margin-bottom:0}.section-label{font-size:16px;font-weight:700;color:var(--ink)}.hairline{height:1px;background:var(--hairline);margin:12px 0 24px}.drop-zone{border:1px dashed var(--hairline-strong);border-radius:4px;padding:48px 24px;text-align:center;cursor:pointer;transition:background 0.15s,border-color 0.15s}.drop-zone:hover,.drop-zone-active{background:var(--surface-soft);border-color:var(--ink)}.drop-zone-content{display:flex;flex-direction:column;gap:8px;align-items:center;color:var(--mute)}.drop-icon{color:var(--ink);font-weight:700;font-size:24px}.drop-hint{font-size:14px;color:var(--ash)}.file-info{display:flex;gap:12px;align-items:center;padding:12px 0;font-size:14px}.file-info-name{font-weight:500;color:var(--ink)}.file-info-size{color:var(--mute)}.convert-count{display:flex;align-items:center;gap:6px;padding:4px 0 8px;font-size:13px;color:var(--mute)}.convert-count[hidden]{display:none}.convert-count-info{position:relative;cursor:help;line-height:1;flex-shrink:0}.info-icon{font-size:13px;color:var(--ash)}.info-tooltip{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--surface-dark);color:var(--on-dark);font-size:12px;padding:6px 10px;border-radius:4px;white-space:nowrap;z-index:10;line-height:1.4}.convert-count-info:hover .info-tooltip,.convert-count-info:focus .info-tooltip{display:block}.file-previews{display:flex;flex-wrap:wrap;gap:12px;padding:12px 0}.file-previews[hidden]{display:none}.file-preview{width:96px;text-align:center;position:relative}.file-preview-remove{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;border:1px solid var(--hairline);background:var(--canvas);color:var(--ink);font-family:var(--font);font-size:13px;font-weight:700;line-height:1;cursor:pointer;padding:0;z-index:1;transition:background 0.15s,transform 0.15s}.file-preview-remove:active{transform:scale(0.96)}.file-preview-remove::before{content:'';position:absolute;inset:-9px;border-radius:50%}.file-preview-remove:hover{background:var(--surface-card)}.clear-all-btn{font-family:var(--font);font-size:13px;color:var(--mute);background:none;border:1px solid var(--hairline);border-radius:4px;padding:4px 10px;height:80px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;align-self:center;transition:background 0.15s,border-color 0.15s}.clear-all-btn:hover{background:var(--surface-soft);border-color:var(--ink);color:var(--ink)}.clear-all-icon{font-weight:700;font-size:16px}.file-preview-img{width:80px;height:80px;object-fit:cover;border-radius:4px;border:1px solid rgba(0,0,0,0.1);display:block;margin:0 auto 4px}.file-preview-name{display:block;font-size:11px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-preview-size{display:block;font-size:10px;color:var(--ash)}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0}.settings-grid>*{min-width:0}.setting{display:flex;flex-direction:column;gap:8px}.setting[hidden]{display:none}.size-row{display:flex;gap:24px}.size-row .setting{flex:1;min-width:0}.size-row .btn-primary{width:100%}.setting-blocked{opacity:0.35;pointer-events:none}.setting-label{font-size:14px;font-weight:500;color:var(--mute)}.select-input{font-family:var(--font);font-size:16px;background:var(--surface-soft);color:var(--ink);border:1px solid var(--hairline);border-radius:4px;padding:8px 12px;height:40px;cursor:pointer;appearance:auto}.select-input:focus{background:var(--canvas);border-color:var(--ink);outline:none}.text-input{font-family:var(--font);font-size:16px;background:var(--surface-soft);color:var(--ink);border:1px solid var(--hairline);border-radius:4px;padding:8px 12px;height:40px}.text-input:focus{background:var(--canvas);border-color:var(--ink);outline:none}.quality-row{display:flex;align-items:center;gap:12px}.range-input{-webkit-appearance:none;appearance:none;flex:1;height:4px;background:var(--hairline-strong);border-radius:4px;outline:none}.range-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--ink);border-radius:50%;cursor:pointer}.range-input::-moz-range-thumb{width:16px;height:16px;background:var(--ink);border:none;border-radius:50%;cursor:pointer}.quality-value{font-size:14px;color:var(--mute);min-width:28px;text-align:right;font-variant-numeric:tabular-nums}.btn-primary{font-family:var(--font);font-size:16px;font-weight:500;line-height:2;background:var(--ink);color:var(--on-dark);border:none;border-radius:4px;padding:4px 20px;height:36px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:background 0.15s,transform 0.15s}.btn-primary:hover{background:var(--ink-deep)}.btn-primary:active{background:var(--ink-deep);transform:scale(0.96)}.btn-primary:disabled{background:var(--surface-card);color:var(--ash);cursor:not-allowed;transform:none}.progress-wrap{margin-top:12px;display:flex;flex-direction:column;gap:6px}.progress-wrap[hidden]{display:none}.progress-track{height:6px;background:var(--surface-card);border-radius:3px;overflow:hidden}.progress-fill{height:100%;width:0%;background:var(--ink);border-radius:3px;transition:width 0.25s ease}.progress-text{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}.result-area{margin-top:24px}.preview-row{margin:24px 0;display:flex;justify-content:center}.preview-img{max-width:100%;max-height:500px;border-radius:4px;border:1px solid rgba(0,0,0,0.1)}.batch-result-area{margin-top:24px}.batch-result-area[hidden]{display:none}.batch-result-actions{display:flex;gap:12px;flex-wrap:wrap}.footer{margin-top:auto}.footer-inner{max-width:960px;margin:0 auto;padding:32px 24px;display:flex;justify-content:space-between;align-items:center}.footer-text{font-size:14px;color:var(--mute)}.footer-links{display:flex;gap:12px;font-size:14px;color:var(--body)}.footer-sep{color:var(--hairline-strong)}.cards-section{max-width:960px;width:100%;margin:96px auto;padding:0 24px}.cards-grid{display:flex;flex-direction:column;gap:16px}.card{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--hairline);border-radius:4px;background:var(--surface-soft);text-decoration:none;transition:background 0.15s,border-color 0.15s}.card:hover{background:var(--surface-card);border-color:var(--ink)}.card-header{display:flex;align-items:center;gap:8px}.card-icon{font-size:20px;font-weight:700;color:var(--ink);line-height:1}.card-title{font-size:16px;font-weight:500;color:var(--ink)}.card-desc{font-size:14px;color:var(--mute);line-height:1.5}.card-arrow{font-size:14px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}@media (max-width:768px){.nav-inner{padding:0 16px;gap:16px}.nav-logo pre{font-size:4.5px}.nav-links{display:none}.lang-select{padding:8px 12px;font-size:14px;min-width:120px}.hero-tui{padding:36px 16px 48px;overflow:hidden}.hero-tui-art{font-size:7px;max-width:100%;overflow:hidden}.tui-prompt{font-size:13px;flex-wrap:wrap;gap:8px}.converter-section,.cards-section{margin:40px auto;padding:0 16px}.settings-grid{grid-template-columns:1fr;gap:16px}.drop-hint{font-size:12px}.select-input,.text-input{height:44px}.btn-primary{width:100%}.footer-inner{flex-direction:column;gap:8px;padding:24px 16px;text-align:center}.footer-links{flex-wrap:wrap;justify-content:center}}@media (max-width:480px){.nav-inner{gap:10px}.nav-logo pre{font-size:3.5px}.lang-select{padding:6px 10px;font-size:13px}.hero-tui{padding:24px 12px 36px;overflow:hidden}.hero-tui-art{display:none}.tui-prompt{font-size:12px;justify-content:center}.tui-prompt-pipe{display:none}.drop-zone{padding:28px 16px}.drop-zone-content{gap:6px}.drop-hint{display:none}.converter-section{margin:24px auto}.file-preview{width:72px}.file-preview-img{width:60px;height:60px}.file-preview-remove{width:20px;height:20px;font-size:11px;top:-6px;right:-6px}.settings-grid{gap:12px}.select-input,.text-input{height:44px;font-size:16px}.btn-primary{height:44px;width:100%}.clear-all-btn{height:60px;width:72px}.range-input{height:6px}.range-input::-webkit-slider-thumb{width:22px;height:22px}.range-input::-moz-range-thumb{width:22px;height:22px}.footer-inner{padding:20px 16px}}.lang-select{font-family:var(--font);font-size:14px;background:transparent;color:var(--mute);border:1px solid var(--hairline);border-radius:4px;padding:6px 10px;cursor:pointer;margin-left:auto}.crop-image-wrap{display:flex;flex-direction:column;gap:16px;margin-top:24px}.crop-image-wrap[hidden]{display:none}.crop-image-container{position:relative;display:inline-block;max-width:100%;align-self:center}.crop-image{display:block;max-width:100%;max-height:500px;border-radius:4px;border:1px solid var(--hairline);cursor:crosshair}.crop-overlay{position:absolute;inset:0;pointer-events:none}.crop-box{position:absolute;border:2px solid var(--accent);background:rgba(0,122,255,0.08);display:none;pointer-events:none}.crop-handle{position:absolute;width:12px;height:12px;background:#fff;border:2px solid var(--accent);border-radius:50%;pointer-events:auto;z-index:2}.crop-handle-nw{top:-6px;left:-6px;cursor:nwse-resize}.crop-handle-ne{top:-6px;right:-6px;cursor:nesw-resize}.crop-handle-sw{bottom:-6px;left:-6px;cursor:nesw-resize}.crop-handle-se{bottom:-6px;right:-6px;cursor:nwse-resize}.crop-controls{display:flex;flex-direction:column;gap:12px}.crop-ratio-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.aspect-btn{font-family:var(--font);font-size:14px;background:var(--surface-soft);color:var(--mute);border:1px solid var(--hairline);border-radius:4px;padding:4px 14px;cursor:pointer;transition:background 0.15s,border-color 0.15s}.aspect-btn:hover{background:var(--surface-card);border-color:var(--ash)}.aspect-btn-active{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}.crop-coord-row{display:flex;gap:12px;justify-content:center}.coord-field{display:flex;flex-direction:column;align-items:center;gap:2px}.coord-label{font-size:11px;font-weight:600;color:var(--mute);text-transform:uppercase;letter-spacing:0.5px}.coord-input{font-family:var(--font);font-size:13px;background:var(--surface-soft);color:var(--ink);border:1px solid var(--hairline);border-radius:4px;padding:4px 6px;width:56px;height:30px;text-align:center;-moz-appearance:textfield}.coord-input::-webkit-inner-spin-button,.coord-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.coord-input:focus{background:var(--canvas);border-color:var(--ink);outline:none}.crop-action-row{display:flex;gap:12px;justify-content:center;position:relative;z-index:1}.btn-secondary{font-family:var(--font);font-size:16px;font-weight:500;line-height:2;background:transparent;color:var(--ink);border:1px solid var(--hairline-strong);border-radius:4px;padding:4px 20px;height:36px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:background 0.15s,transform 0.15s}.btn-secondary:hover{background:var(--surface-soft)}.btn-secondary:active{transform:scale(0.96)}