:root{font-family:Inter,SF Pro Display,PingFang SC,Microsoft YaHei,system-ui,sans-serif;color:#f2f0ed;background:#0b0d0e;font-synthesis:none;text-rendering:optimizeLegibility;--bg: #0b0d0e;--surface: #101315;--surface-raised: #15181a;--line: #303438;--line-strong: #4c5156;--text: #f2f0ed;--muted: #a5a7aa;--accent: #ff5d5f;--accent-hover: #ff7072;--success: #9bd66f;--danger: #ff7778}*{box-sizing:border-box}html{min-width:320px;background:var(--bg);scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 70% 35%,rgba(42,49,52,.14),transparent 34%),var(--bg)}button,input{font:inherit}button{color:inherit}.app-shell{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,4vw,58px);border-bottom:1px solid #272b2e}.brand{display:inline-flex;align-items:center;gap:15px;color:var(--text);text-decoration:none;font-size:25px;font-weight:750;letter-spacing:-.04em}.brand-mark{display:grid;grid-template-columns:repeat(3,7px);gap:3px;transform:rotate(-1deg)}.brand-mark i{width:7px;height:7px;border-radius:1.5px;background:var(--accent)}.privacy{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}.privacy svg{width:22px;height:22px}main{width:100%;max-width:1600px;margin:0 auto;padding:clamp(36px,3.2vw,46px) clamp(24px,2.8vw,42px) 24px}.intro{margin-bottom:28px}.intro h1{margin:0;max-width:940px;font-size:clamp(38px,4.1vw,62px);line-height:1.08;letter-spacing:-.055em;font-weight:760}.intro p{margin:17px 0 0;color:var(--muted);font-size:clamp(14px,1.4vw,19px);letter-spacing:.01em}.mobile-break{display:none}.workspace{display:grid;grid-template-columns:minmax(380px,.95fr) minmax(580px,1.45fr);gap:clamp(22px,2.5vw,34px);align-items:stretch}.controls{min-width:0;display:flex;flex-direction:column;gap:16px}.drop-zone{min-height:220px;padding:24px;border:1.5px dashed var(--line-strong);border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;text-align:center;color:var(--muted);background:linear-gradient(135deg,#ffffff05,#ffffff01);cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease;outline:none}.drop-zone:hover,.drop-zone:focus-visible,.drop-zone.is-dragging{border-color:var(--accent);background:#ff5d5f0b;transform:translateY(-1px)}.drop-zone.has-file{border-style:solid}.drop-icon{width:54px;height:54px;margin-bottom:2px;color:#bdc0c3}.drop-zone strong{max-width:100%;color:var(--text);font-size:18px;line-height:1.3}.drop-zone span{font-size:14px}.file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.drop-zone .drop-hint{color:#7d8185;font-size:12px}.config-panel{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#111416d1}.config-row{min-height:69px;display:grid;grid-template-columns:24px minmax(128px,1fr) auto;gap:13px;align-items:center;padding:0 15px;border-bottom:1px solid var(--line);color:var(--text);font-size:14px}.config-row:last-child{border-bottom:0}.config-row svg{width:22px;height:22px;color:#b9bdc0}.config-row output{color:#b8bbbe;font-size:12px;white-space:nowrap}.format-switch{display:inline-flex;padding:3px;border:1px solid #3a3e42;border-radius:7px;background:#0d0f10}.format-switch button{min-width:58px;height:29px;padding:0 9px;border:0;border-radius:5px;color:#8f9397;background:transparent;font-size:11px;font-weight:700;cursor:pointer}.format-switch button.is-active{color:#fff;background:var(--accent)}.format-switch button:disabled{cursor:not-allowed;opacity:.45}.quality-row{grid-template-columns:24px minmax(80px,1fr) minmax(90px,1.2fr) 29px}.quality-row input{width:100%;height:16px;appearance:none;background:transparent;cursor:pointer}.quality-row input::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,var(--accent) 0 var(--range-value),#44484c var(--range-value) 100%)}.quality-row input::-webkit-slider-thumb{width:15px;height:15px;margin-top:-6px;appearance:none;border-radius:50%;background:var(--accent);border:0}.quality-row input::-moz-range-track{height:3px;background:#44484c}.quality-row input::-moz-range-progress{height:3px;background:var(--accent)}.quality-row input::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:var(--accent)}.example-action{width:fit-content;display:flex;align-items:center;gap:9px;padding:2px 5px;border:0;background:transparent;color:#c5c7c9;font-size:14px;cursor:pointer}.example-action:hover{color:var(--accent)}.example-action:disabled{color:#55595c;cursor:not-allowed}.memory-note{margin:auto 0 0;color:#717579;font-size:11px;line-height:1.55}.preview-panel{min-width:0;border:1px solid var(--line);border-radius:13px;padding:10px 10px 12px;background:#0d0f10;display:flex;flex-direction:column}.preview-canvas{position:relative;min-height:0;flex:1;overflow:hidden;border-radius:5px;background:#121416;aspect-ratio:854 / 480}.preview-canvas>img{display:block;width:100%;height:100%;object-fit:contain}.preview-scrim{position:absolute;inset:0;background:#05070829;box-shadow:inset 0 0 70px #05070842;pointer-events:none}.processing-overlay{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;color:var(--text);background:#050708b8;backdrop-filter:blur(5px)}.processing-overlay strong{font-size:26px}.processing-overlay span{color:var(--muted);font-size:12px}.processing-ring{--progress: 0deg;width:54px;height:54px;border-radius:50%;background:conic-gradient(var(--accent) var(--progress),#34383b 0);mask:radial-gradient(circle,transparent 59%,#000 61%)}.download-overlay{position:absolute;right:15px;bottom:15px;display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.38);border-radius:8px;padding:9px 12px;color:#fff;background:#090b0cc7;cursor:pointer;backdrop-filter:blur(6px)}.download-overlay svg{width:17px;height:17px}.download-overlay:hover{border-color:var(--accent)}.timeline{position:relative;height:22px;margin:8px 4px 0;border-bottom:1px solid #24282b}.timeline:before{content:"";position:absolute;top:9px;left:0;right:0;height:2px;background:#292d30}.timeline-fill{position:absolute;z-index:1;top:9px;left:0;height:2px;background:var(--accent);transition:width .3s ease}.timeline i{position:absolute;z-index:2;top:6px;width:8px;height:8px;margin-left:-4px;border:2px solid #0d0f10;border-radius:50%;background:#686d71}.timeline i:first-of-type,.timeline i:last-of-type{display:none}.preview-meta{display:flex;justify-content:space-between;gap:20px;padding:5px 4px 0;color:#73777a;font-size:11px}.preview-meta span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.error-banner{max-width:100%;margin-top:18px;display:flex;align-items:center;gap:10px;padding:12px 15px;border:1px solid rgba(255,119,120,.4);border-radius:8px;color:#ffb0b1;background:#ff5d5f12;font-size:13px}.error-banner svg{flex:0 0 auto;width:18px}.command-bar{min-height:134px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px clamp(24px,4vw,58px);border-top:1px solid #272b2e;background:#0a0c0df7;position:relative;z-index:10}.status-group{display:flex;align-items:center;gap:12px;color:#c2c4c6;font-size:13px}.status-icon{width:32px;height:32px;display:grid;place-items:center;border:2px solid var(--success);border-radius:50%;color:var(--success)}.status-icon.is-error{color:var(--danger);border-color:var(--danger)}.status-icon svg{width:18px}.status-divider{width:1px;height:38px;margin:0 10px;background:var(--line)}kbd{padding:5px 6px;border:1px solid #666b70;border-radius:4px;color:#c8cbcd;background:#151819;font:10px/1 ui-monospace,monospace;box-shadow:none}.command-actions{display:flex;gap:10px}.primary-button,.cancel-button{min-height:54px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:8px;padding:0 28px;border:0;font-weight:650;cursor:pointer;transition:background .15s ease,transform .15s ease,opacity .15s ease}.primary-button{min-width:290px;min-height:76px;color:#fff;background:var(--accent);font-size:20px}.primary-button:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px)}.primary-button:disabled{cursor:not-allowed;opacity:.35}.primary-button svg,.cancel-button svg{width:21px;height:21px}.cancel-button{color:#c9cbcd;border:1px solid var(--line);background:transparent}.cancel-button:hover{border-color:#666b70}@media(max-width:980px){main{padding-top:38px}.workspace{grid-template-columns:1fr}.controls{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(330px,1.1fr);align-items:start}.drop-zone{grid-row:span 2;min-height:100%}.example-action{grid-column:2}.memory-note{grid-column:1 / -1}.preview-panel{min-height:0}}@media(max-width:680px){.topbar{height:62px;padding-inline:18px}.brand{font-size:21px;gap:11px}.privacy{font-size:0;gap:0}main{padding:30px 18px 24px}.intro h1{font-size:clamp(32px,9vw,40px);line-height:1.12}.mobile-break{display:block}.intro p{line-height:1.7}.workspace,.controls{display:flex;flex-direction:column}.drop-zone{min-height:190px}.preview-panel{order:2}.memory-note{order:1}.config-row{padding-inline:12px}.quality-row{grid-template-columns:22px minmax(76px,1fr) minmax(68px,.75fr) 24px;gap:9px}.preview-meta{display:none}.command-bar{min-height:82px;padding:12px 18px}.status-group>kbd,.status-group>kbd+span,.status-divider{display:none}.status-group{min-width:0}.status-group>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-icon{flex:0 0 28px;width:28px;height:28px}.primary-button{min-width:0;min-height:50px;padding-inline:19px;font-size:15px}.cancel-button{min-height:50px;padding-inline:14px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}