.blur-badges{text-align:center;font:400 13px/1.6 var(--fp);color:var(--sub);margin:24px 0}.bleed-toggle{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.bleed-toggle input{accent-color:var(--pink);width:20px;height:20px}.bleed-toggle span{width:100%;font:400 13px/1.6 var(--fp);color:var(--sub)}.blur-how .steps{grid-template-columns:repeat(4,minmax(0,1fr))}.blur-how .steps h3{font-size:18px}.blur-features{max-width:1160px;padding:52px 20px;margin:auto}.blur-features article{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:64px 48px;margin:20px 0;border-radius:40px;background:var(--t4)}.blur-features article:nth-child(2){background:var(--t3)}.blur-features article:nth-child(3){background:var(--t2)}.blur-features article:nth-child(4){background:var(--t1)}.blur-features h2{font:800 var(--h2)/1.2 var(--fh);letter-spacing:-.01em;margin:0 0 20px}.blur-features p{color:var(--sub);margin:0 0 24px}.blur-features img{display:block;width:100%;height:auto;border-radius:24px;object-fit:contain;background:var(--soft)}.guidance-figure{margin:0 auto;max-width:1080px}.guidance-figure img{display:block;width:100%;height:auto;border-radius:24px;background:var(--soft)}.guidance-figure figcaption{font:400 13px/1.6 var(--fp);color:var(--sub);margin-top:16px}.blur-facts>h2{max-width:680px;text-align:center}.blur-facts .effect-tips{border:0;padding:0}.blur-facts p{max-width:65ch}.blur-guidance .section-intro>p{text-align:left}body[data-tool=blur]{--tint:var(--t3)}
@media(max-width:860px){.blur-how .steps{grid-template-columns:1fr}.blur-features{padding:36px 16px}.blur-features article{grid-template-columns:1fr;gap:28px;padding:40px 16px;margin:20px -4px;border-radius:28px}.blur-facts .effect-tips{grid-template-columns:1fr}}

.blur-modes,.blur-chips{display:flex;flex-wrap:wrap;gap:8px}.blur-modes{margin:24px 0 10px}.blur-modes button,.blur-chips button{font:600 13px/1.4 var(--fh);padding:10px 18px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);min-height:44px}.blur-modes [aria-pressed=true],.blur-chips [aria-pressed=true]{background:var(--pink);color:white;border-color:var(--pink)}.mode-description,.blur-help,.blur-scale{font:400 13px/1.6 var(--fp);color:var(--sub)}.mode-description{margin:0}.blur-controls{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) auto;align-items:center}.blur-controls fieldset{border:0;margin:0;padding:0;min-width:0}.blur-controls legend{font:600 13px/1.5 var(--fh);margin-bottom:10px}.blur-scale{display:flex;justify-content:space-between;margin-top:12px;gap:8px}.blur-actions{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}.motion-controls{display:flex;gap:16px;align-items:center}.angle-dial{position:relative;flex:0 0 76px;width:76px;height:76px;border:1.5px solid var(--line);border-radius:50%;background:#fff;touch-action:none;cursor:grab}.angle-dial:after{content:"";position:absolute;width:9px;height:9px;background:var(--pink);left:calc(50% - 4.5px);top:calc(50% - 4.5px);border-radius:50%}.dial-line{position:absolute;height:3px;left:12px;right:12px;top:calc(50% - 1.5px);background:var(--pink);transform:rotate(var(--angle,0deg));border-radius:999px}.angle-input{display:flex;gap:5px;align-items:center;margin-top:8px}.blur-controls input[type=number]{width:78px;min-height:42px;border:1px solid #dcdce2;border-radius:16px;padding:8px;background:#fff;color:var(--ink);font:400 14px/1.4 var(--fp);display:inline-block;margin:0;height:auto}.center-inputs{display:flex;flex-wrap:wrap;gap:12px}.center-inputs label{display:grid;gap:6px}.center-handle{position:absolute;z-index:4;padding:6px;display:grid;place-items:center;width:42px;height:42px;transform:translate(-50%,-50%);border-radius:50%;background:white;border:2px solid var(--pink);color:var(--pink);cursor:move;touch-action:none;box-shadow:var(--sh)}.center-handle svg{stroke:currentColor;stroke-width:1.5}.original-held .center-handle{visibility:hidden}.angle-dial:focus-visible{outline:3px solid var(--pink);outline-offset:4px}.processed canvas{image-rendering:auto}.blur-controls .download{grid-column:-2/-1}.blur-controls:not(:has(#motionControls:not([hidden]),#radialControls:not([hidden]))){grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto}@media(max-width:860px){.blur-controls,.blur-controls:not(:has(#motionControls:not([hidden]),#radialControls:not([hidden]))){grid-template-columns:1fr}.blur-controls .download{grid-column:auto}.motion-controls{gap:20px}.blur-modes{gap:8px}.blur-modes button{padding:10px 14px}.blur-modes{margin-top:24px}}

.blur-aperture{padding-top:0!important}.blur-aperture figure{margin:0 auto;max-width:900px}.blur-aperture img{display:block;width:100%;height:auto;border-radius:24px}.blur-aperture figcaption{font:400 13px/1.6 var(--fp);color:var(--sub);margin-top:12px}

/* Both layers share the exact full preview box; clipping never resizes either image. */
body[data-tool=blur] #originalImage,body[data-tool=blur] #resultCanvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block}
body[data-tool=blur] #processed{inset:0;width:100%;height:100%}