:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#f7f7f5; color:#171717; }
* { box-sizing:border-box; } html,body { height:100%; } body { margin:0; min-width:320px; overflow:hidden; } button,input,select { font:inherit; } button { cursor:pointer; } .shell { max-width:1440px; height:100vh; margin:auto; padding:22px clamp(20px,4vw,64px) 18px; display:flex; flex-direction:column; overflow:hidden; }
.topbar { display:flex; justify-content:space-between; align-items:center; } .brand { color:#171717; text-decoration:none; font-size:23px; font-weight:760; letter-spacing:-1.2px; } .brand span { color:#777; } .connection { color:#737373; font-size:13px; } .connection.ready { color:#26704b; }
.hero { padding:clamp(22px,4vh,46px) 0 clamp(18px,3vh,32px); max-width:730px; } .eyebrow,.section-label { margin:0; color:#727272; font-size:11px; font-weight:700; letter-spacing:.12em; } h1 { margin:12px 0 12px; font-size:clamp(38px,5vw,68px); letter-spacing:-.075em; line-height:.92; font-weight:700; } .lede { margin:0; max-width:470px; color:#616161; line-height:1.45; font-size:15px; }
.workspace { display:grid; grid-template-columns:178px minmax(310px,1fr) 276px; min-height:0; flex:1; background:#fff; border:1px solid #e4e4e1; border-radius:18px; overflow:hidden; box-shadow:0 18px 48px #00000008; }.tools,.inspector { min-height:0; padding:22px 18px; background:#fbfbfa; overflow-y:auto; }.tools { border-right:1px solid #e9e9e7; }.inspector { border-left:1px solid #e9e9e7; display:flex; flex-direction:column; gap:18px; } #operation-list { margin-top:12px; display:grid; gap:2px; }.operation { border:0; background:transparent; color:#545454; text-align:left; padding:9px 10px; border-radius:7px; font-size:13px; }.operation:hover { background:#eee; }.operation.active { color:#111; background:#e8e8e6; font-weight:650; }
.canvas-panel { min-width:0; padding:18px; display:flex; align-items:stretch; background:linear-gradient(135deg,#fff,#fafafa); }.dropzone { width:100%; border:1px dashed #c7c7c4; background:#f8f8f6; border-radius:12px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px; color:#242424; transition:.15s; }.dropzone:hover,.dropzone.dragging { border-color:#171717; background:#f0f0ee; }.drop-icon { display:grid; place-items:center; width:36px; height:36px; border:1px solid #d2d2cf; border-radius:50%; font-size:24px; font-weight:300; }.dropzone small { color:#777; }.preview { width:100%; min-width:0; display:flex; flex-direction:column; }.result-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-bottom:10px; border:1px solid #e6e6e3; border-radius:9px; overflow:hidden; background:#e6e6e3; }.result-stats div { background:#fff; padding:8px 10px; min-width:0; }.result-stats span { display:block; color:#858585; font-size:9px; font-weight:700; letter-spacing:.09em; }.result-stats strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:3px; color:#222; font-size:12px; }.comparison-controls { padding:0 0 10px; display:flex; align-items:center; gap:7px; color:#696969; font-size:12px; flex-wrap:wrap; }.comparison-controls button,.editor-controls button { border:1px solid #ddd; background:#fff; border-radius:6px; min-width:27px; padding:5px 7px; }.comparison-controls label { display:flex; align-items:center; gap:6px; }.comparison-controls label:first-of-type { margin-left:auto; }.comparison-controls input { width:78px; accent-color:#171717; }.comparison-controls select { max-width:114px; border:1px solid #ddd; border-radius:5px; font-size:11px; padding:3px; }.preview-stage { position:relative; flex:1; min-height:280px; display:grid; place-items:center; background:repeating-conic-gradient(#f0f0ee 0% 25%,#fff 0% 50%) 50%/20px 20px; border-radius:10px; overflow:hidden; }.preview-stage.alt-background { background:#262626; }.preview-stage img,.preview-stage canvas { max-width:100%; max-height:420px; object-fit:contain; transform:scale(var(--preview-zoom,1)); transition:transform .12s ease; }.preview-stage.pixelated img { image-rendering:pixelated; }.result-layer { position:absolute; inset:0; display:grid; place-items:center; clip-path:inset(0 calc(100% - var(--compare-position,50%)) 0 0); }.result-layer img { display:none; }.preview-stage.result-only #image-preview { display:none; }.preview-stage.result-only .result-layer { clip-path:none; }.preview-stage.result-only .result-layer img,.preview-stage.compare-on .result-layer img { display:block; }.preview-stage.source-only .result-layer { display:none; }.compare-handle { position:absolute; z-index:2; inset:0 auto 0 var(--compare-position,50%); width:1px; background:#fff; box-shadow:0 0 0 1px #0004; pointer-events:none; }.compare-handle span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:36px; height:29px; border-radius:15px; color:#222; background:#fff; box-shadow:0 1px 5px #0004; font-size:10px; letter-spacing:-2px; }.editor-controls { display:grid; grid-template-columns:repeat(3,max-content) 1fr repeat(3,max-content); gap:5px; align-items:center; padding-top:10px; }.editor-controls #zoom-label { min-width:52px; }.image-meta { padding:10px 2px 0; color:#6d6d6d; font-size:12px; }.hidden { display:none !important; }
.dual-result-view { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#fff; z-index:3; }.dual-result-view figure { position:relative; min-width:0; margin:0; display:grid; place-items:center; overflow:hidden; background:repeating-conic-gradient(#f0f0ee 0% 25%,#fff 0% 50%) 50%/20px 20px; }.dual-result-view img { display:block; max-width:100%; max-height:100%; object-fit:contain; transform:scale(var(--preview-zoom,1)); transition:transform .12s ease; }.dual-result-view figcaption { position:absolute; left:8px; bottom:8px; padding:4px 6px; border-radius:5px; background:#ffffffe8; color:#252525; font-size:10px; font-weight:700; letter-spacing:.05em; }.preview-stage.dual-active #image-preview,.preview-stage.dual-active .result-layer,.preview-stage.dual-active .compare-handle { display:none; }.preview-stage.pixelated .dual-result-view img { image-rendering:pixelated; }
.result-download { position:absolute; right:8px; bottom:8px; border:1px solid #d0d0cc; border-radius:5px; background:#ffffffe8; color:#292929; font-size:10px; font-weight:650; padding:4px 6px; }
.settings { display:grid; gap:12px; }.field { display:grid; gap:6px; color:#5f5f5f; font-size:12px; }.field input,.field select { width:100%; border:1px solid #d7d7d4; border-radius:7px; padding:8px; color:#191919; background:white; }.check { display:flex; align-items:center; gap:8px; font-size:12px; color:#4f4f4f; }.status { margin-top:auto; min-height:37px; color:#686868; font-size:12px; line-height:1.45; }.status.error { color:#a13232; }.actions { display:grid; gap:8px; }.primary,.secondary { border-radius:8px; padding:10px 12px; border:1px solid #d1d1ce; }.primary { background:#171717; color:#fff; border-color:#171717; }.primary:disabled { opacity:.4; cursor:not-allowed; }.secondary { color:#242424; background:#fff; } footer { padding-top:17px; color:#898989; font-size:12px; }
.recipe-bar { display:flex; justify-content:space-between; gap:8px; align-items:center; padding-bottom:2px; }.recipe-tabs,.recipe-actions { display:flex; gap:4px; }.recipe-tab,.recipe-actions button { border:1px solid #dcdcd8; border-radius:6px; background:#fff; color:#555; padding:5px 7px; font-size:11px; }.recipe-tab { min-width:31px; }.recipe-tab.active { background:#202020; color:#fff; border-color:#202020; }.recipe-actions button:hover { border-color:#777; color:#171717; }
.processors { border-top:1px solid #e2e2df; border-bottom:1px solid #e2e2df; padding:9px 0; display:grid; gap:8px; }.processors summary { cursor:pointer; color:#6a6a6a; font-size:10px; font-weight:700; letter-spacing:.11em; }.processor-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.processor-grid label { display:grid; gap:4px; color:#666; font-size:11px; }.processor-grid input { min-width:0; border:1px solid #d7d7d4; border-radius:6px; padding:6px; background:#fff; color:#222; }
.processor-grid[hidden] { display:none; }
.range-field { display:grid; grid-template-columns:minmax(0,1fr) 58px; gap:8px; align-items:center; }.range-field input[type="range"] { width:100%; accent-color:#171717; }.range-field input[type="number"] { min-width:0; text-align:right; }
.advanced { border-top:1px solid #e1e1de; padding-top:10px; }.advanced summary { cursor:pointer; color:#555; font-size:12px; }.advanced-fields { display:grid; gap:11px; padding-top:12px; }
footer { flex:none; } @media (max-width:900px) { html,body { height:auto; } body { overflow:auto; } .shell { height:auto; min-height:100vh; overflow:visible; } .workspace { flex:none; grid-template-columns:1fr; }.tools,.inspector { overflow:visible; }.tools { border-right:0; border-bottom:1px solid #e9e9e7; }.inspector { border-left:0; border-top:1px solid #e9e9e7; } #operation-list { grid-template-columns:repeat(3,minmax(0,1fr)); }.canvas-panel { min-height:400px; } } @media (max-width:520px) { .shell { padding:18px; }.hero { padding-top:56px; } #operation-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.preview-stage img,.preview-stage canvas,.dual-result-view img { transform:translate(var(--preview-pan-x,0px),var(--preview-pan-y,0px)) scale(var(--preview-zoom,1)); }
.topbar-left { display:flex; align-items:center; gap:10px; }.close-editor { width:28px; height:28px; padding:0; border:1px solid #dededb; border-radius:50%; background:#fff; color:#333; font-size:21px; line-height:1; }.close-editor:hover { background:#efefed; }.image-meta { position:absolute; z-index:4; left:10px; bottom:10px; padding:5px 7px; border-radius:5px; background:#ffffffe8; color:#4f4f4f; font-size:11px; }
.preview-stage { cursor:grab; touch-action:none; user-select:none; }.preview-stage:active { cursor:grabbing; }.compare-handle { width:48px; margin-left:-24px; background:linear-gradient(90deg,transparent calc(50% - .5px),#fff calc(50% - .5px),#fff calc(50% + .5px),transparent calc(50% + .5px)); box-shadow:none; cursor:ew-resize; pointer-events:auto; touch-action:none; }.compare-handle span { pointer-events:none; }
.actions { position:sticky; bottom:-22px; z-index:8; margin:0 -18px -22px; padding:12px 18px 18px; background:linear-gradient(to bottom,#fbfbfadd 0%,#fbfbfa 22%); }.download-dock { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px; padding:9px 10px; border:1px solid #ddddda; border-radius:8px; background:#fff; color:#5d5d5a; font-size:11px; }.download-dock strong { display:block; margin-top:2px; color:#151515; font-size:14px; }.download-dock > span:last-child { color:#147044; font-weight:700; white-space:nowrap; }.download-dock > span:last-child:not(:empty) { text-align:right; }
.preview .result-stats { display:none !important; }
.tools { display:none; }.workspace { grid-template-columns:minmax(310px,1fr) 330px; }.inspector #compressor-selector { width:100%; border:1px solid #d7d7d4; border-radius:7px; padding:8px; background:#fff; color:#191919; }