.image-page{padding-block:25px 40px}.image-workspace{background:var(--surface);border:0;border-radius:0;margin-top:19px;transition:border-color .2s,box-shadow .2s;overflow:clip}.image-workspace.is-dragging{border-color:var(--green);box-shadow:0 0 0 4px #14396c25}.image-file-bar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:14px;padding:15px 20px;display:flex}.image-file-details,.image-file-actions{align-items:center;gap:10px;min-width:0;display:flex}.image-file-details{flex:1}.image-file-details>div{min-width:0}.image-file-icon{border:1px solid var(--line);background:var(--mint);width:38px;height:38px;color:var(--green);border-radius:9px;flex-shrink:0;place-items:center;display:grid}.image-file-details strong{text-overflow:ellipsis;white-space:nowrap;font-size:14px;display:block;overflow:hidden}.image-file-details div>span{color:var(--muted);margin-top:4px;font-size:12px;display:block}.image-file-actions{flex-shrink:0}.image-file-actions button{background:var(--mint);min-height:44px;color:var(--green);border:1px solid #6f7e96;border-radius:10px;justify-content:center;align-items:center;gap:6px;padding:9px 11px;font-size:14px;display:flex}.image-editor{grid-template-columns:minmax(0,1fr) 320px;align-items:start;display:grid}.image-preview-column{background:var(--leaf-tint);border-radius:14px;flex-direction:column;min-width:0;padding:20px;display:flex}.image-preview-toolbar{flex-wrap:wrap;order:-1;justify-content:space-between;align-items:center;gap:10px;margin-block:0 12px;display:flex}.image-preview-toolbar>span{color:var(--muted);white-space:nowrap;font-size:12px}.preview-size-toggle{background:var(--mint);width:44px;height:44px;color:var(--green);border:1px solid #6f7e96;border-radius:6px;flex-shrink:0;place-items:center;display:grid}.image-preview-stage.is-expanded{height:min(78svh,760px)}.image-view-switch{border:1px solid var(--line);background:#e4e9f1;border-radius:12px;gap:3px;padding:3px;display:flex}.image-view-switch button{min-width:44px;min-height:44px;color:var(--muted);background:0 0;border-radius:8px;padding:8px 12px;font-size:14px}.image-view-switch button.active{color:var(--green);background:#fff;box-shadow:0 1px 5px #17283f10}.image-preview-stage{--check:color-mix(in srgb, var(--ink) 3.5%, white);background:radial-gradient(ellipse at center, #ffffffb3, #fff0 70%), repeating-conic-gradient(var(--check) 0 25%, white 0 50%) 0 0 / 20px 20px;border:1px solid var(--line);border-radius:10px;justify-content:center;align-items:center;height:clamp(240px,40svh,380px);padding:0;display:flex;position:relative;container-type:size}.image-preview-stage.crop-mode{background:#e1e7f0}.image-output-preview{width:calc(100% - var(--stage-inset,40px));height:calc(100% - var(--stage-inset,40px));object-fit:contain;display:block}.image-output-frame{filter:drop-shadow(0 3px 8px color-mix(in srgb, var(--forest) 8%, transparent));flex-shrink:0;position:relative}.image-output-frame>:is(img,svg){width:100%;height:100%;display:block}.image-crop-frame{flex-shrink:0;position:relative}.image-crop-frame>img{-webkit-user-select:none;user-select:none;pointer-events:none;width:100%;height:100%;display:block}.image-crop-selection{outline:1px solid color-mix(in srgb, var(--forest) 44%, transparent);border:2px solid #fff;position:absolute}.image-crop-shade{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.image-crop-move{cursor:move;touch-action:none;background:0 0;width:100%;height:100%;padding:0;display:block;position:absolute;inset:0}.image-crop-grid{pointer-events:none;background:linear-gradient(90deg,#0000 calc(33.333% - .5px),#ffffff65 33.333%,#0000 calc(33.333% + .5px) calc(66.666% - .5px),#ffffff65 66.666%,#0000 calc(66.666% + .5px)),linear-gradient(#0000 calc(33.333% - .5px),#ffffff65 33.333%,#0000 calc(33.333% + .5px) calc(66.666% - .5px),#ffffff65 66.666%,#0000 calc(66.666% + .5px));position:absolute;inset:0}.image-crop-handle{touch-action:none;z-index:2;background:0 0;width:44px;height:44px;padding:0;position:absolute}.image-crop-handle:after{content:"";background:var(--green);border:2px solid #fff;border-radius:3px;width:13px;height:13px;position:absolute;top:15px;left:15px;box-shadow:0 1px 5px #0005}.image-crop-handle.nw{cursor:nwse-resize;top:-23px;left:-23px}.image-crop-handle.ne{cursor:nesw-resize;top:-23px;right:-23px}.image-crop-handle.sw{cursor:nesw-resize;bottom:-23px;left:-23px}.image-crop-handle.se{cursor:nwse-resize;bottom:-23px;right:-23px}.image-size-summary{background:#fff;border:0;border-radius:0;align-items:center;gap:18px;margin-top:14px;padding:14px 16px;display:flex}.image-size-summary>div>span{color:var(--muted);margin-bottom:3px;font-size:12px;display:block}.image-size-summary strong{font-family:var(--display);letter-spacing:-.5px;font-size:18px;font-weight:700}.image-size-summary>svg{color:var(--muted);flex-shrink:0}.image-size-badge{color:#785c31;white-space:nowrap;background:#f6f0e6;border-radius:100px;align-items:center;gap:4px;margin-left:auto;padding:6px 8px;font-size:12px;display:inline-flex}.image-size-badge.smaller{background:var(--mint);color:var(--green)}.image-settings-panel{border-left:0;min-width:0;container:image-controls/inline-size}.image-settings-panel[inert]{opacity:.55}.image-control-section{padding:0}.image-control-section h2{align-items:center;gap:8px;font-size:16px;display:flex}.image-control-section h2 svg{color:var(--green)}.image-control-section p{color:var(--muted);margin-top:10px;font-size:12px;line-height:1.6}.image-ratios,.image-scale-presets{flex-wrap:wrap;gap:6px;margin-top:14px;display:flex}.image-ratios button,.image-scale-presets button{background:var(--control-surface);min-width:44px;min-height:44px;color:var(--ink);border:0;border-radius:9px;padding:8px 11px;font-size:14px}.image-ratios button.active,.image-scale-presets button[aria-pressed=true]{color:var(--green);background:var(--mint);box-shadow:inset 0 -2px var(--green)}.image-scale-presets button{flex:1}.image-dimensions{grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;display:grid}.image-dimensions label>span{color:var(--muted);margin-bottom:6px;font-size:14px;display:block}.image-number{border:1px solid var(--line);border-radius:10px;align-items:center;display:flex;overflow:hidden}.image-page input,.image-page select{font:inherit;color:var(--ink)}.image-number input{background:#fff;border:0;width:100%;min-width:0;min-height:44px;padding:10px;font-size:16px}.image-number>span{color:var(--muted);padding-right:8px;font-size:12px}.image-page :is(input,select):focus-visible{outline:2px solid var(--green);outline-offset:-2px}.image-check{min-height:44px;color:var(--muted);align-items:center;gap:6px;font-size:14px;display:flex}.image-check input{width:16px;height:16px;accent-color:var(--green);margin:0 2px 0 0}.image-scale-presets{margin-top:3px}.image-quality{margin-top:16px;display:block}.image-quality>span:first-child{justify-content:space-between;align-items:center;font-size:14px;display:flex}.image-quality strong{color:var(--green);font-weight:600}.image-quality input[type=range]{width:100%;accent-color:var(--green);cursor:pointer;touch-action:pan-y;height:28px;margin:4px 0 0}.image-range-labels{color:var(--muted);justify-content:space-between;font-size:12px;display:flex}.image-export{background:var(--surface);flex-direction:column;align-items:flex-end;gap:10px;padding:0;display:flex}.image-settings-panel{flex-direction:column;align-self:start;display:flex}.image-controls{width:100%}.image-controls>.control-tab-panel{padding-inline:16px}.image-controls>.control-tabs-footer{padding:12px 16px max(14px, env(safe-area-inset-bottom))}.image-controls .image-control-section{border:0;padding:0}.image-controls .image-ratios{margin-top:0}.image-download{gap:8px;width:100%;min-height:48px;padding-inline:13px;font-size:14px}.image-export :is(.open-another,.image-download){width:100%;max-width:500px;margin:0}.image-export .image-size-summary{flex-wrap:wrap;gap:10px;width:100%;max-width:500px;margin:0;padding:0}.image-download>span{opacity:.85;margin-left:auto;font-size:12px;font-weight:400}@media (max-width:1100px){.image-editor{grid-template-columns:minmax(0,1fr) 300px}.image-preview-column{padding:16px}.image-size-summary{flex-wrap:wrap;gap:12px;padding:12px}.image-size-badge{margin-left:0}}@media (max-width:900px){.image-editor{flex-direction:column;display:flex}.image-preview-column{display:contents}.image-preview-toolbar{order:0;width:100%;margin:0;padding:12px}.image-preview-stage{align-self:stretch;height:clamp(180px,27svh,280px);margin-inline:10px}.image-size-summary{align-self:stretch;margin:10px}.image-settings-panel{border-left:0;width:100%}.image-download{max-width:500px;margin-inline:auto 0}}@media (max-width:560px){.image-page{padding-top:21px}.image-workspace{margin-top:19px}.image-file-bar{flex-wrap:wrap;gap:10px;padding:12px}.image-file-details{flex-basis:100%}.image-file-actions{width:100%}.image-file-actions button{flex:1;min-height:44px}.image-preview-column{padding:10px}.image-preview-toolbar{gap:6px;margin-bottom:9px}.image-view-switch{gap:2px;padding:1px}.image-view-switch button{padding-inline:8px}.image-preview-toolbar>span{font-size:12px}.image-preview-stage{height:clamp(280px,50svh,520px);padding:0}.image-size-summary{flex-wrap:nowrap;gap:8px;margin-top:9px;padding:8px}.image-size-summary strong{letter-spacing:-.2px;white-space:nowrap;font-size:12px}.image-size-summary>div>span{font-size:12px}.image-size-badge{margin-left:auto;padding:5px;font-size:12px}.image-size-badge svg{display:none}.image-ratios{grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.image-ratios button{padding-inline:4px}.image-ratios,.image-scale-presets,.image-dimensions{margin-top:10px}.image-scale{grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:8px;display:grid}.image-scale input[type=range]{margin:0}.image-ratios button,.image-scale-presets button{min-height:44px}@media (max-width:359px){.image-ratios{grid-template-columns:repeat(3,minmax(0,1fr))}}.image-quality input[type=range]{height:36px}}@media (min-width:901px) and (min-height:651px){.image-workspace:not(.simple-image) .image-preview-column{max-height:calc(100svh - 40px);position:sticky;top:20px;overflow-y:auto}.image-workspace:not(.simple-image) .image-preview-stage{flex-shrink:0}}@media (prefers-reduced-motion:reduce){.image-workspace,.image-ratios button,.image-scale-presets button{transition:none}}@media (max-width:900px){.image-preview-stage:not(.is-expanded){height:auto;aspect-ratio:var(--preview-aspect,4 / 3);--stage-inset:20px;min-height:200px;max-height:min(62svh,560px)}}