*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,'Segoe UI',ui-sans-serif,-apple-system,BlinkMacSystemFont,Arial,sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}svg{display:block;width:20px;height:20px}#app[v-cloak]{display:none}.app-shell{min-height:100vh;position:relative;isolation:isolate;transition:background .25s,color .25s}
.dark-mode{--bg:#090a10;--surface:#101119;--elevated:#161721;--hover:#1f2030;--border:#2a2b39;--subtle:#20212d;--text:#f4f2fc;--secondary:#a3a2b5;--muted:#747387;--purple:#aa85ff;--deep-purple:#7441da;--gradient-a:#8150ec;--gradient-b:#ad85ff;--glow:rgba(140,84,255,.22);--icon-bg:#241c3b;--thumb-bg:#252335;--shadow:0 35px 90px rgba(0,0,0,.35);background:var(--bg);color:var(--text)}
.light-mode{--bg:#f7f7fb;--surface:#fff;--elevated:#f9f8fd;--hover:#f1edfb;--border:#e5e1ee;--subtle:#f1eff6;--text:#191526;--secondary:#6a6579;--muted:#888296;--purple:#7546d8;--deep-purple:#673ac6;--gradient-a:#7840db;--gradient-b:#9757e0;--glow:rgba(140,84,255,.10);--icon-bg:#efe7ff;--thumb-bg:#ede8f6;--shadow:0 25px 65px rgba(34,20,75,.08);background:var(--bg);color:var(--text)}
.ambient{position:absolute;pointer-events:none;z-index:-1}.ambient-a{width:700px;height:600px;top:70px;right:10%;background:radial-gradient(circle,var(--glow) 0%,transparent 69%);filter:blur(37px);opacity:.65}.ambient-b{width:550px;height:480px;top:750px;left:-250px;background:radial-gradient(circle,var(--glow) 0%,transparent 70%);filter:blur(55px);opacity:.26}
.site-header{height:91px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 max(32px,calc((100vw - 1460px)/2));background:color-mix(in srgb,var(--bg),transparent 6%);position:relative;z-index:3}.brand{display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--text)}.brand-mark{height:43px;width:43px;display:grid;place-items:center;color:var(--purple)}.brand-mark svg{height:40px;width:40px}.brand-stack{display:flex;flex-direction:column;gap:2px}.brand-stack strong{font-size:20px;font-weight:820;letter-spacing:-.7px;line-height:1.1}.brand-stack em{font-style:normal;color:var(--purple)}.brand-stack small{font-size:9px;font-weight:800;letter-spacing:2px;color:var(--muted)}.header-actions{display:flex;align-items:center;gap:17px}.status-pill{display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:24px;padding:11px 15px;font-size:12px;font-weight:670;color:var(--secondary);background:var(--surface)}.status-dot{display:inline-block;width:7px;height:7px;background:#54daa2;box-shadow:0 0 0 4px rgba(73,210,142,.10);border-radius:50%;flex-shrink:0}.theme-switch{width:42px;height:42px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);color:var(--secondary);border-radius:12px}.theme-switch:hover{color:var(--purple);background:var(--hover)}
.main-content{max-width:1460px;margin:0 auto;padding:70px 32px 65px}.hero{max-width:900px;margin-bottom:55px}.eyebrow,.section-index{font-size:10px;font-weight:850;letter-spacing:2.25px;color:var(--purple)}.eyebrow{display:flex;align-items:center;gap:12px}.eyebrow-line{display:inline-block;width:27px;height:1px;background:var(--purple)}.version{display:inline-block;padding:4px 8px;background:var(--icon-bg);border-radius:5px;letter-spacing:.6px;margin-left:6px;font-size:9px}.hero h1{font-size:clamp(42px,5vw,71px);letter-spacing:-3.5px;line-height:1.08;margin:22px 0 21px;font-weight:830}.hero h1 span{background:linear-gradient(102deg,var(--purple),#cdabff 90%);background-clip:text;-webkit-background-clip:text;color:transparent}.hero-description{line-height:1.75;font-size:15.5px;color:var(--secondary);max-width:620px;margin:0}.hero-tags{display:flex;gap:26px;flex-wrap:wrap;margin-top:24px}.hero-tags span{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:760;letter-spacing:.3px;color:var(--secondary)}.hero-tags svg{width:15px;height:15px;color:var(--purple)}
.workspace-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(350px,1fr);align-items:start;gap:26px}.primary-column{min-width:0}.section-heading{display:flex;align-items:end;justify-content:space-between;margin:0 0 20px}.section-heading h2,.settings-header h2{font-size:22px;letter-spacing:-.55px;margin:9px 0 0;font-weight:760}.section-meta{color:var(--muted);font-size:12px;font-weight:640}
.dropzone{min-height:298px;border-radius:18px;border:1.5px dashed #654c96;background:radial-gradient(ellipse at 50% -35%,var(--glow),transparent 76%),var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;transition:border-color .16s,background .16s;padding:28px 20px;text-align:center}.dropzone.drag-over{border-color:var(--purple);background:var(--icon-bg)}.dropzone.busy{opacity:.75}.dropzone input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}.upload-icon{background:var(--icon-bg);color:var(--purple);width:56px;height:56px;border-radius:15px;display:grid;place-items:center;margin:0 0 15px}.upload-icon svg{width:28px;height:28px}.dropzone h3{margin:0;font-size:19px;letter-spacing:-.4px}.dropzone p{color:var(--muted);font-size:12.5px;margin:9px 0 21px}.btn{border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:10px;font-size:12.5px;font-weight:750;min-height:43px;padding:0 17px;white-space:nowrap;transition:transform .13s,background .13s,border-color .13s}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn svg{height:16px;width:16px}.btn-secondary{background:var(--elevated);color:var(--text)}.btn-secondary:hover:not(:disabled){border-color:var(--purple);background:var(--hover)}.picker-label{cursor:pointer}.picker-label.disabled{opacity:.6;pointer-events:none}.drop-formats{display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap;margin-top:19px}.drop-formats span:not(.hint-text){font-size:9px;font-weight:850;letter-spacing:.75px;background:var(--subtle);padding:5px 7px;border-radius:4px;color:var(--secondary)}.drop-formats .hint-text{font-size:11px;color:var(--muted)}
.file-panel{border:1px solid var(--border);background:var(--surface);border-radius:16px;margin-top:17px;overflow:hidden}.files-bar{display:flex;justify-content:space-between;align-items:center;padding:18px 20px}.files-bar>div{display:flex;align-items:center;gap:15px}.files-bar strong{font-size:13px}.files-bar span{font-size:11px;color:var(--muted)}.text-button{padding:4px;background:none;border:0;color:var(--purple);font-size:11px;font-weight:750}.progress-track{height:3px;background:var(--border)}.progress-track div{height:100%;transition:width .2s;background:linear-gradient(90deg,var(--gradient-a),var(--gradient-b))}.file-list{max-height:470px;overflow-y:auto}.file-row{display:flex;align-items:center;gap:13px;border-top:1px solid var(--border);padding:13px 17px;min-width:0}.file-preview{width:56px;height:56px;flex-shrink:0;overflow:hidden;background:var(--thumb-bg);border:1px solid var(--border);border-radius:9px;padding:0}.file-preview:disabled{opacity:1}.file-preview img{height:100%;width:100%;object-fit:contain}.file-information{flex:1;min-width:0}.file-information>strong{display:block;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:7px}.file-subline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:11px}.file-badge{font-size:9px;font-weight:700;padding:4px 6px;border-radius:5px;background:var(--subtle)}.file-badge.done{background:rgba(51,183,125,.12);color:#55c995}.file-badge.error{background:rgba(255,102,132,.12);color:#ff6f8b}.file-badge.working{background:var(--icon-bg);color:var(--purple)}.file-error{margin-top:5px;font-size:11px;color:#ff7d97}.result-numbers{text-align:right;flex-shrink:0;min-width:86px}.result-numbers strong{font-size:18px;font-variant-numeric:tabular-nums;display:block}.result-numbers span{font-size:10px;color:var(--muted)}.positive{color:#51c993!important}.negative{color:#fd929f!important}.file-actions{display:flex;flex-shrink:0;gap:2px}.icon-btn{display:grid;place-items:center;width:30px;height:33px;border:none;border-radius:8px;color:var(--secondary);background:transparent}.icon-btn:hover{background:var(--hover);color:var(--purple)}.icon-btn svg{width:16px;height:16px}.icon-btn.dim{color:var(--muted)}
.stats-heading{margin-top:38px}.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.metric{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 16px;min-width:0}.metric span{display:block;font-size:9px;letter-spacing:1px;font-weight:800;color:var(--muted);white-space:nowrap}.metric strong{display:block;font-size:23px;letter-spacing:-.9px;font-weight:790;margin:15px 0 8px;white-space:nowrap}.metric small{font-size:10px;color:var(--muted);white-space:nowrap}.accent-metric{background:linear-gradient(145deg,var(--icon-bg),var(--surface));border-color:color-mix(in srgb,var(--purple),var(--border) 69%)}.accent-metric strong{color:var(--purple)}.output-actions{display:flex;align-items:center;gap:14px;margin-top:18px}.output-actions>span{font-size:11px;color:var(--muted)}
.settings-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:27px;box-shadow:var(--shadow)}.settings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:27px}.settings-header h2{font-size:23px}.settings-indicator{border:1px solid var(--border);padding:7px 9px;color:var(--muted);border-radius:6px;font-weight:800;letter-spacing:1px;font-size:9px}.setting-group{margin:0 0 23px}.setting-title{display:block;margin-bottom:10px;font-size:12px;font-weight:780;color:var(--text)}.field-note{font-size:10.7px;line-height:1.6;color:var(--muted);margin:9px 0 0}.select-wrap{position:relative}.select-wrap:after{content:'⌄';position:absolute;color:var(--secondary);pointer-events:none;right:14px;top:50%;transform:translateY(-60%);font-size:17px}select,.inline-input{background:var(--elevated);border:1px solid var(--border);border-radius:9px;min-height:44px;color:var(--text);width:100%}select{appearance:none;-webkit-appearance:none;padding:0 33px 0 13px;font-size:12px;font-weight:650;outline:none}select:focus,.inline-input:focus-within{border-color:var(--purple)}.inline-input{display:flex;align-items:center;margin-top:10px}.inline-input input{background:none;border:none;min-width:0;width:100%;color:var(--text);font-size:12px;padding:0 12px;outline:none}.inline-input span{padding:0 12px;color:var(--muted);font-size:11px}.label-row{display:flex;align-items:center;justify-content:space-between}.value-display{color:var(--purple);font-size:12px}input[type=range]{width:100%;accent-color:var(--purple);height:6px;cursor:pointer}.range-legend{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin-top:5px}.segment{display:flex;gap:6px;padding:4px;border:1px solid var(--border);border-radius:10px;background:var(--elevated)}.segment button{border:1px solid transparent;background:none;color:var(--muted);font-size:11px;font-weight:760;border-radius:7px;padding:10px 4px;flex:1}.segment button.selected{background:var(--icon-bg);border-color:color-mix(in srgb,var(--purple),transparent 68%);color:var(--purple)}.divider{height:1px;background:var(--border);margin:25px 0}.toggle-row{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;position:relative}.toggle-row>span:first-child{display:flex;flex-direction:column;gap:4px}.toggle-row strong{font-size:12px}.toggle-row small{font-size:11px;color:var(--muted)}.toggle-row input{position:absolute;right:0;width:38px;height:21px;opacity:0;cursor:pointer}.toggle{display:block;background:var(--border);width:40px;height:23px;border-radius:30px;position:relative;transition:background .15s;flex-shrink:0}.toggle:after{content:'';width:17px;height:17px;position:absolute;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .15s;box-shadow:0 1px 2px #0003}.toggle-row input:checked+.toggle{background:var(--gradient-a)}.toggle-row input:checked+.toggle:after{transform:translateX(17px)}.toggle-row input:focus-visible+.toggle{outline:2px solid var(--purple);outline-offset:4px}.thumb-config{background:var(--elevated);border:1px solid var(--border);border-radius:12px;margin-top:16px;padding:13px}.field-2{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:11px}.field-2 label{font-size:10px;color:var(--secondary);font-weight:750;min-width:0}.field-2 .inline-input{min-height:37px;margin-top:6px}.field-2 select{min-height:38px;padding-left:9px;font-size:11px}.field-2 .select-wrap{margin-top:6px}.thumb-config .field-note{margin-top:2px}.submit-block{margin-top:23px}.btn-primary{border:none;background:linear-gradient(105deg,var(--gradient-a),var(--gradient-b));color:white;box-shadow:0 12px 25px var(--glow)}.btn-primary:hover:not(:disabled){filter:brightness(1.09)}.run-btn{width:100%;min-height:49px;position:relative;font-size:13px}.run-btn .run-arrow{position:absolute;right:15px;top:50%;transform:translateY(-50%);font-size:18px}.submit-help{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:14px;color:var(--muted);font-size:10.5px}
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:var(--elevated);color:var(--text);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:13px 20px;font-size:12px;max-width:min(560px,90vw);z-index:100;text-align:center}.foot-note{margin-top:50px;display:flex;gap:17px;max-width:900px}.foot-accent{width:3px;flex-shrink:0;background:linear-gradient(var(--purple),transparent);border-radius:3px}.foot-note strong{font-size:12px}.foot-note p{font-size:11.5px;color:var(--muted);line-height:1.75;margin:8px 0}.footer{height:68px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;padding:0 max(32px,calc((100vw - 1460px)/2));font-size:9px;letter-spacing:1.3px;color:var(--muted);font-weight:790}.footer i{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--purple);vertical-align:middle;margin:0 6px}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;padding:20px;z-index:1000;backdrop-filter:blur(8px)}.preview-dialog{width:min(990px,100%);max-height:95vh;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:19px}.dialog-top{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 16px}.dialog-top h3{margin:5px 0 0;font-size:17px;word-break:break-word}.close{height:38px;width:38px}.compare-container{position:relative;height:min(60vh,600px);min-height:230px;overflow:hidden;background:repeating-conic-gradient(var(--thumb-bg) 0% 25%,var(--elevated) 0% 50%) 50%/20px 20px;border:1px solid var(--border);border-radius:10px;user-select:none}.compare-image{height:100%;width:100%;object-fit:contain;display:block;position:absolute;inset:0}.compare-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--split)) 0 0);pointer-events:none}.compare-divider{position:absolute;top:0;bottom:0;left:var(--split);transform:translateX(-50%);width:2px;background:#fff;pointer-events:none;filter:drop-shadow(0 0 2px #0007)}.compare-divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:white;color:#281841;display:grid;place-items:center;border-radius:50%;height:34px;width:34px;font-size:18px}.compare-range{position:absolute;inset:0!important;width:100%!important;height:100%!important;opacity:0;cursor:ew-resize;margin:0;z-index:5}.compare-label{position:absolute;bottom:15px;font-size:9px;font-weight:850;letter-spacing:1.2px;background:#111b;padding:8px;border-radius:5px;color:white;pointer-events:none}.compare-label.left{left:15px}.compare-label.right{right:15px}.dialog-info{display:flex;align-items:center;gap:23px;color:var(--secondary);font-size:12px;padding-top:15px}.dialog-info strong{color:var(--text)}.dialog-info .btn{margin-left:auto}
@media(max-width:1180px){.workspace-grid{grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr)}.metrics-grid{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:59px}}@media(max-width:850px){.site-header{padding:0 20px;height:80px}.main-content{padding:45px 20px}.workspace-grid{display:flex;flex-direction:column}.primary-column,.settings-card{width:100%}.settings-card{order:-1}.hero{margin-bottom:35px}.hero h1{font-size:clamp(39px,8vw,63px)}.footer{padding:0 20px}.metrics-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:650px){.site-header{height:74px}.brand-stack strong{font-size:17px}.brand-stack small{font-size:7px;letter-spacing:1.4px}.brand-mark,.brand-mark svg{width:33px;height:33px}.status-pill{display:none}.main-content{padding:38px 15px}.hero h1{font-size:43px;letter-spacing:-2px}.hero-description{font-size:13px}.hero-tags{gap:10px 17px}.hero-tags span{font-size:10px}.section-heading h2{font-size:20px}.dropzone{min-height:258px}.settings-card{padding:20px}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric{padding:16px 13px}.metric strong{font-size:22px}.file-row{gap:8px;padding:11px 8px;flex-wrap:wrap}.file-preview{width:45px;height:45px}.file-information>strong{font-size:11px}.result-numbers{min-width:70px}.result-numbers strong{font-size:14px}.file-actions{margin-left:45px}.footer{flex-direction:column;gap:10px;justify-content:center;padding:10px;text-align:center;font-size:8px}.output-actions{flex-wrap:wrap}.dialog-info{gap:7px;flex-wrap:wrap}.compare-container{height:48vh}.file-subline{gap:4px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Hono 1.3 Suite */
.tool-nav{display:flex;gap:5px;padding:5px;border:1px solid var(--border);border-radius:11px;background:var(--surface)}
.tool-nav a{text-decoration:none;color:var(--muted);font-weight:750;font-size:11px;border-radius:8px;padding:10px 14px;white-space:nowrap}
.tool-nav a.current{background:var(--icon-bg);color:var(--purple)}
.tool-nav a:hover{color:var(--text)}
.compare-gallery{margin-top:34px}.compare-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.compare-tile{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:10px;min-width:0}
.compare-container.compact{height:235px;min-height:160px}.compact .compare-divider span{width:29px;height:29px}
.compare-tile-details{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 5px 5px}
.compare-tile-details strong{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.compare-tile-details span{font-size:10px;color:var(--muted);white-space:nowrap}
.compare-tile-actions{display:flex;gap:16px;justify-content:flex-end;padding:7px 6px}.server-login-box{border:1px solid var(--border);padding:13px;border-radius:9px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.server-login-box>span{font-size:11px;color:var(--secondary)}.studio-field{background:var(--elevated);border:1px solid var(--border);border-radius:9px;color:var(--text);width:100%;min-height:46px;padding:12px}
.small-dialog{max-width:500px}.base64-dialog{max-width:800px}.base64-code{margin-top:12px;width:100%;height:220px;resize:vertical;background:var(--elevated);border:1px solid var(--border);border-radius:10px;color:var(--secondary);padding:16px;font:11px/1.7 ui-monospace,Consolas,monospace;word-break:break-all}
@media(max-width:1050px){.compare-gallery-grid{grid-template-columns:1fr}.tool-nav a{padding:8px}}
@media(max-width:650px){.tool-nav{position:absolute;top:74px;right:15px;z-index:2}.hero{padding-top:35px}.compare-container.compact{height:220px}.compare-tile-details{flex-direction:column;align-items:flex-start}}