.before-after__container{position:relative;width:100%;max-width:100%;margin:0 auto;user-select:none;overflow:hidden;aspect-ratio:1}.before-after__before{position:absolute;inset:0;overflow:hidden}.before-after__after{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 50% 0 0)}.before-after__image{width:100%;height:100%;object-fit:contain;transition:none}.before-after__line{position:absolute;top:0;bottom:0;width:var(--border-width-1);background-color:var(--color-bg-primary);box-shadow:var(--shadow-lg);z-index:var(--z-index-10);transition:none}.before-after__line--center{left:50%}.before-after__handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--space-4);height:var(--space-4);background-color:var(--color-neutral-800);border-radius:var(--radius-full);cursor:grab;border:var(--border-width-2) solid var(--color-bg-primary);box-shadow:var(--shadow-sm);transition:none}.before-after__handle:active{cursor:grabbing}.visualization-container{display:flex;flex-direction:column;gap:var(--space-4);width:100%}.demo-canvas{width:100%;border-radius:var(--squircle-md);overflow:hidden;background-color:var(--color-bg-muted)}.demo-canvas--height-400{height:400px}.demo-canvas--height-500{height:500px}.demo-canvas--height-auto{height:auto}.demo-canvas--aspect-ratio-1-5{aspect-ratio:1.5 / 1}.gui-panel{background-color:var(--color-bg-primary);border:var(--border-width-1) solid var(--color-border-primary);border-radius:var(--squircle-md);padding:var(--space-4)}.visualization-container[data-astro-cid-co3wohfo]{display:flex;flex-direction:column;gap:var(--space-5);width:100%;font-family:var(--font-family-sans)}.demo-canvas[data-astro-cid-co3wohfo]{width:100%;border:var(--border-width-1) solid var(--color-border-primary);border-radius:var(--squircle-2xl);background:var(--color-bg-secondary);position:relative;overflow:hidden}.demo-canvas[data-astro-cid-co3wohfo] canvas[data-astro-cid-co3wohfo]{display:block;pointer-events:auto}.gui-panel[data-astro-cid-co3wohfo]{width:100%;height:auto;border:var(--border-width-1) solid var(--color-border-primary);border-radius:var(--squircle-2xl);background:var(--color-bg-primary);padding:var(--space-4)}@media(max-width:600px){.gui-panel[data-astro-cid-co3wohfo]{padding:var(--space-4)!important}.gui-panel[data-astro-cid-co3wohfo] h3[data-astro-cid-co3wohfo]{font-size:var(--font-size-sm)!important}.gui-panel[data-astro-cid-co3wohfo] .grid-container[data-astro-cid-co3wohfo]{grid-template-columns:1fr!important;gap:var(--space-4)!important}}:root{--color-neutral-50: #f9fafb;--color-neutral-100: #f3f4f6;--color-neutral-200: #e5e7eb;--color-neutral-300: #d1d5db;--color-neutral-400: #a3a3a3;--color-neutral-500: #737373;--color-neutral-600: #666666;--color-neutral-700: #525252;--color-neutral-800: #262626;--color-neutral-900: #111827;--color-text-primary: var(--color-neutral-800);--color-text-secondary: var(--color-neutral-600);--color-text-muted: var(--color-neutral-500);--color-text-disabled: var(--color-neutral-400);--color-bg-primary: #ffffff;--color-bg-secondary: var(--color-neutral-50);--color-bg-muted: var(--color-neutral-100);--color-bg-disabled: var(--color-neutral-200);--color-border-primary: var(--color-neutral-200);--color-border-secondary: var(--color-neutral-300);--color-border-focus: #3b82f6;--color-link: #2563eb;--color-link-hover: #1d4ed8;--color-link-visited: #7c3aed;--color-success: #10b981;--color-warning: #f59e0b;--color-error: #ef4444;--color-info: #3b82f6;--color-accent: #2563eb;--color-selection-bg: #000000;--color-selection-text: #ffffff;--font-family-sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-family-serif: "Libre Baskerville", ui-serif, Georgia, Cambria, "Times New Roman", serif;--font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-size-5xl: 3rem;--font-size-6xl: 3.75rem;--font-size-7xl: 4.5rem;--font-size-8xl: 6rem;--font-weight-thin: 300;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-snug: 1.375;--line-height-normal: 1.5;--line-height-relaxed: 1.625;--line-height-loose: 2;--letter-spacing-tighter: -.05em;--letter-spacing-tight: -.025em;--letter-spacing-normal: 0em;--letter-spacing-wide: .025em;--letter-spacing-wider: .05em;--letter-spacing-widest: .1em;--space-0: 0;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--space-32: 8rem;--border-width-0: 0;--border-width-1: 1px;--border-width-2: 2px;--border-width-4: 4px;--border-width-8: 8px;--radius-none: 0;--radius-sm: .125rem;--radius-base: .25rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-xl: .75rem;--radius-2xl: 1rem;--radius-3xl: 1.5rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-base: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, .06);--duration-75: 75ms;--duration-100: .1s;--duration-150: .15s;--duration-200: .2s;--duration-250: .25s;--duration-300: .3s;--duration-400: .4s;--duration-500: .5s;--duration-700: .7s;--duration-1000: 1s;--ease-linear: linear;--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--z-index-0: 0;--z-index-10: 10;--z-index-20: 20;--z-index-30: 30;--z-index-40: 40;--z-index-50: 50;--z-index-auto: auto;--container-xs: 20rem;--container-sm: 24rem;--container-md: 28rem;--container-lg: 32rem;--container-xl: 36rem;--container-2xl: 42rem;--container-3xl: 48rem;--container-4xl: 56rem;--container-5xl: 64rem;--container-6xl: 72rem;--container-7xl: 80rem;--squircle-sm: calc(var(--radius-base) * .5) / calc(var(--radius-base) * .5);--squircle-md: var(--radius-base) / var(--radius-base);--squircle-lg: calc(var(--radius-base) * 1.5) / calc(var(--radius-base) * 1.5);--squircle-xl: calc(var(--radius-base) * 2) / calc(var(--radius-base) * 2);--squircle-2xl: calc(var(--radius-base) * 3) / calc(var(--radius-base) * 3);--squircle-3xl: calc(var(--radius-base) * 4) / calc(var(--radius-base) * 4);--squircle-mask-sm: radial-gradient(circle at 0 0, transparent calc(var(--radius-base) * .5 - 1px), black calc(var(--radius-base) * .5)) top left, radial-gradient(circle at 100% 0, transparent calc(var(--radius-base) * .5 - 1px), black calc(var(--radius-base) * .5)) top right, radial-gradient(circle at 0 100%, transparent calc(var(--radius-base) * .5 - 1px), black calc(var(--radius-base) * .5)) bottom left, radial-gradient(circle at 100% 100%, transparent calc(var(--radius-base) * .5 - 1px), black calc(var(--radius-base) * .5)) bottom right;--squircle-mask-md: radial-gradient(circle at 0 0, transparent calc(var(--radius-base) - 1px), black var(--radius-base)) top left, radial-gradient(circle at 100% 0, transparent calc(var(--radius-base) - 1px), black var(--radius-base)) top right, radial-gradient(circle at 0 100%, transparent calc(var(--radius-base) - 1px), black var(--radius-base)) bottom left, radial-gradient(circle at 100% 100%, transparent calc(var(--radius-base) - 1px), black var(--radius-base)) bottom right;--squircle-mask-lg: radial-gradient(circle at 0 0, transparent calc(calc(var(--radius-base) * 1.5) - 1px), black calc(var(--radius-base) * 1.5)) top left, radial-gradient(circle at 100% 0, transparent calc(calc(var(--radius-base) * 1.5) - 1px), black calc(var(--radius-base) * 1.5)) top right, radial-gradient(circle at 0 100%, transparent calc(calc(var(--radius-base) * 1.5) - 1px), black calc(var(--radius-base) * 1.5)) bottom left, radial-gradient(circle at 100% 100%, transparent calc(calc(var(--radius-base) * 1.5) - 1px), black calc(var(--radius-base) * 1.5)) bottom right;--squircle-button: calc(var(--space-2) + var(--space-1)) / calc(var(--space-2) + var(--space-1));--squircle-card: calc(var(--space-3) + var(--space-1)) / calc(var(--space-3) + var(--space-1));--squircle-input: var(--space-2) / var(--space-2);--squircle-select: calc(var(--space-2) + var(--space-1)) / calc(var(--space-2) + var(--space-1));--button-padding-sm: var(--space-2) var(--space-3);--button-padding-md: var(--space-3) var(--space-4);--button-padding-lg: var(--space-4) var(--space-6);--button-radius: var(--squircle-button);--button-font-size: var(--font-size-sm);--button-font-weight: var(--font-weight-medium);--button-transition: all var(--duration-150) var(--ease-out);--card-padding: var(--space-4);--card-radius: var(--squircle-card);--card-border: var(--border-width-1) solid var(--color-border-primary);--card-shadow: var(--shadow-sm);--card-bg: var(--color-bg-primary);--input-padding: var(--space-2) var(--space-3);--input-radius: var(--squircle-input);--input-border: var(--border-width-1) solid var(--color-border-primary);--input-font-family: var(--font-family-mono);--select-padding: var(--space-2) var(--space-3);--select-radius: var(--squircle-select);--select-border: var(--border-width-1) solid var(--color-border-primary);--select-transition: border-color var(--duration-150) var(--ease-out);--select-font-family: var(--font-family-mono);--code-bg: var(--color-bg-secondary);--code-border: var(--border-width-1) solid var(--color-border-primary);--code-radius: var(--squircle-2xl);--code-padding: var(--space-1) var(--space-4);--code-font-size: var(--font-size-xs);--code-font-weight: var(--font-weight-medium);--tag-padding: var(--space-1) var(--space-3);--tag-radius: var(--radius-full);--tag-bg: var(--color-bg-muted);--tag-color: var(--color-text-secondary);--tag-font-size: var(--font-size-sm);--tag-border: var(--border-width-1) solid var(--color-border-primary);--animation-duration-fast: var(--duration-150);--animation-duration-normal: var(--duration-300);--animation-duration-slow: var(--duration-500);--animation-ease: var(--ease-out);--animation-ease-bounce: cubic-bezier(.68, -.55, .265, 1.55);--focus-ring-width: 2px;--focus-ring-color: var(--color-border-focus);--focus-ring-offset: 2px;--motion-reduce: .01ms;--motion-safe: var(--duration-150);--grid-cols-1: repeat(1, minmax(0, 1fr));--grid-cols-2: repeat(2, minmax(0, 1fr));--grid-cols-3: repeat(3, minmax(0, 1fr));--grid-cols-4: repeat(4, minmax(0, 1fr));--grid-cols-6: repeat(6, minmax(0, 1fr));--grid-cols-12: repeat(12, minmax(0, 1fr));--flex-gap-sm: var(--space-2);--flex-gap-md: var(--space-4);--flex-gap-lg: var(--space-6);--svg-blue-primary: #1971c2;--svg-blue-secondary: #a5d8ff;--svg-red-primary: #e03131;--svg-red-secondary: #ffc9c9;--svg-yellow-primary: #ffd43b;--svg-yellow-secondary: #fab005;--svg-purple-primary: #9775fa;--svg-purple-secondary: #da77f2;--svg-pink-primary: #f783ac;--svg-pink-secondary: #fcc2d7;--svg-orange-primary: #f08c00;--svg-orange-secondary: #ffd8a8;--svg-green-primary: #2f9e44;--svg-green-secondary: #b2f2bb;--svg-cyan-primary: #0c8599;--svg-cyan-secondary: #99e9f2;--svg-brown-primary: #846358;--svg-brown-secondary: #c4a99a;--svg-text-primary: #1e1e1e;--svg-background-primary: #ffffff}@media(min-width:475px){:root{--container-sm: 28rem}}@media(min-width:640px){:root{--container-md: 32rem}}@media(min-width:768px){:root{--container-lg: 36rem}}@media(min-width:1024px){:root{--container-xl: 42rem}}@media(min-width:1280px){:root{--container-2xl: 48rem}}@media(min-width:1536px){:root{--container-3xl: 56rem}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--color-neutral-50: #1a1a1a;--color-neutral-100: #262626;--color-neutral-200: #404040;--color-neutral-300: #525252;--color-neutral-400: #737373;--color-neutral-500: #a3a3a3;--color-neutral-600: #d4d4d4;--color-neutral-700: #e5e5e5;--color-neutral-800: #f5f5f5;--color-neutral-900: #fafafa;--color-text-primary: #f5f5f5;--color-text-secondary: #d4d4d4;--color-text-muted: #a3a3a3;--color-text-disabled: #737373;--color-bg-primary: #0f0f0f;--color-bg-secondary: #1a1a1a;--color-bg-muted: #262626;--color-bg-disabled: #404040;--color-border-primary: #404040;--color-border-secondary: #525252;--color-link: #60a5fa;--color-link-hover: #93c5fd;--color-selection-bg: #ffffff;--color-selection-text: #000000;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-base: 0 1px 3px 0 rgba(0, 0, 0, .4), 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .4), 0 2px 4px -1px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .4), 0 4px 6px -2px rgba(0, 0, 0, .3);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .4), 0 10px 10px -5px rgba(0, 0, 0, .3);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .5);scrollbar-color:var(--color-neutral-400) var(--color-neutral-100);--svg-text-primary: #ffffff;--svg-background-primary: #1e1e1e;--svg-blue-primary: #4dabf7;--svg-blue-secondary: #1971c2;--svg-red-primary: #ff8787;--svg-red-secondary: #e03131;--svg-yellow-primary: #ffd43b;--svg-yellow-secondary: #fab005;--svg-purple-primary: #9775fa;--svg-purple-secondary: #862e9c;--svg-pink-primary: #f783ac;--svg-pink-secondary: #fcc2d7;--svg-orange-primary: #fd7e14;--svg-orange-secondary: #f08c00;--svg-green-primary: #51cf66;--svg-green-secondary: #2f9e44;--svg-cyan-primary: #3bc9db;--svg-cyan-secondary: #0c8599;--svg-brown-primary: #a67c52;--svg-brown-secondary: #846358}}[data-theme=dark]{--color-neutral-50: #1a1a1a;--color-neutral-100: #262626;--color-neutral-200: #404040;--color-neutral-300: #525252;--color-neutral-400: #737373;--color-neutral-500: #a3a3a3;--color-neutral-600: #d4d4d4;--color-neutral-700: #e5e5e5;--color-neutral-800: #f5f5f5;--color-neutral-900: #fafafa;--color-text-primary: #f5f5f5;--color-text-secondary: #d4d4d4;--color-text-muted: #a3a3a3;--color-text-disabled: #737373;--color-bg-primary: #0f0f0f;--color-bg-secondary: #1a1a1a;--color-bg-muted: #262626;--color-bg-disabled: #404040;--color-border-primary: #404040;--color-border-secondary: #525252;--color-link: #60a5fa;--color-link-hover: #93c5fd;--color-selection-bg: #ffffff;--color-selection-text: #000000;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-base: 0 1px 3px 0 rgba(0, 0, 0, .4), 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .4), 0 2px 4px -1px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .4), 0 4px 6px -2px rgba(0, 0, 0, .3);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .4), 0 10px 10px -5px rgba(0, 0, 0, .3);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .5);scrollbar-color:var(--color-neutral-400) var(--color-neutral-100);--svg-text-primary: #ffffff;--svg-background-primary: #1e1e1e;--svg-blue-primary: #4dabf7;--svg-blue-secondary: #1971c2;--svg-red-primary: #ff8787;--svg-red-secondary: #e03131;--svg-yellow-primary: #ffd43b;--svg-yellow-secondary: #fab005;--svg-purple-primary: #9775fa;--svg-purple-secondary: #862e9c;--svg-pink-primary: #f783ac;--svg-pink-secondary: #fcc2d7;--svg-orange-primary: #fd7e14;--svg-orange-secondary: #f08c00;--svg-green-primary: #51cf66;--svg-green-secondary: #2f9e44;--svg-cyan-primary: #3bc9db;--svg-cyan-secondary: #0c8599;--svg-brown-primary: #a67c52;--svg-brown-secondary: #846358}.link-primary{color:var(--color-link);text-decoration:none;transition:color var(--duration-150) var(--ease-out)}.link-primary:hover{color:var(--color-link-hover);text-decoration:underline}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}#resetTransform[data-astro-cid-2ievze5s]:hover,#resetPixelation[data-astro-cid-ouhbboxj]:hover{background-color:#2d3748!important}