@font-face{font-family:Dela Gothic One;font-style:normal;font-display:swap;font-weight:400;src:url(/tools/avatar-before-after/assets/dela-gothic-one-japanese-400-normal-De8ccvZQ.woff2)format("woff2")}@font-face{font-family:Mochiy Pop P One;font-style:normal;font-display:swap;font-weight:400;src:url(/tools/avatar-before-after/assets/mochiy-pop-p-one-japanese-400-normal-Dp_HWx0f.woff2)format("woff2")}@font-face{font-family:Kaisei Opti;font-style:normal;font-display:swap;font-weight:400;src:url(/tools/avatar-before-after/assets/kaisei-opti-japanese-400-normal-NGyJXl5q.woff2)format("woff2")}@font-face{font-family:Kaisei Opti;font-style:normal;font-display:swap;font-weight:700;src:url(/tools/avatar-before-after/assets/kaisei-opti-japanese-700-normal-CSbhpP9j.woff2)format("woff2")}@font-face{font-family:IBM Plex Sans Condensed;font-style:normal;font-display:swap;font-weight:600;src:url(/tools/avatar-before-after/assets/ibm-plex-sans-condensed-latin-600-normal-CRd5VyFf.woff2)format("woff2")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/tools/avatar-before-after/assets/ibm-plex-mono-latin-400-normal-DMJ8VG8y.woff2)format("woff2")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:600;src:url(/tools/avatar-before-after/assets/ibm-plex-mono-latin-600-normal-BgSNZQsw.woff2)format("woff2")}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--nui-palette-ink:#1d2128;--nui-palette-paper:#fff;--nui-palette-orange:#ff9e20;--nui-palette-orange-dark:#a34800;--nui-palette-pink:#ff62bb;--nui-palette-cyan:#31d9ec;--nui-palette-violet:#9a7dd4;--nui-palette-danger:#b42318;--nui-color-canvas:var(--nui-palette-paper);--nui-color-background:var(--nui-color-canvas);--nui-color-surface:var(--nui-palette-paper);--nui-color-surface-raised:#fffffff5;--nui-color-surface-muted:#ffffffb3;--nui-color-text:var(--nui-palette-ink);--nui-color-text-muted:#394047;--nui-color-text-subtle:#5c6668;--nui-color-label:#4c5557;--nui-color-border:#1d21282e;--nui-color-border-strong:var(--nui-palette-ink);--nui-color-control-border:#8d949b;--nui-color-swatch-border:#8d949b;--nui-color-disabled-surface:#e8ecef;--nui-color-disabled-text:#4c5557;--nui-color-disabled-border:#7a848a;--nui-color-accent:var(--nui-palette-orange);--nui-color-accent-strong:var(--nui-palette-orange-dark);--nui-color-accent-hover:#f28a00;--nui-color-on-accent:var(--nui-palette-ink);--nui-color-selected:var(--nui-palette-cyan);--nui-color-on-selected:var(--nui-palette-ink);--nui-color-focus:var(--nui-palette-ink);--nui-color-danger:var(--nui-palette-danger);--nui-color-danger-hover:#8f1c13;--nui-color-on-danger:#fff;--nui-color-selection:#31d9ec59;--nui-color-decorative-1:var(--nui-palette-orange);--nui-color-decorative-2:var(--nui-palette-pink);--nui-color-decorative-3:var(--nui-palette-cyan);--nui-color-decorative-4:var(--nui-palette-violet);--nui-color-footer:var(--nui-palette-ink);--nui-color-footer-text:#ffffffc7;--nui-color-footer-heading:var(--nui-palette-paper);--nui-color-header-bg:#fffffff5;--nui-footer-stripe-size:12px;--nui-footer-stripe:var(--nui-color-accent);--nui-font-body:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;--nui-font-display:"Dela Gothic One", "Mochiy Pop P One", var(--nui-font-body);--nui-font-action:var(--nui-font-body);--nui-font-label:var(--nui-font-body);--nui-font-mono:"IBM Plex Mono", "SFMono-Regular", Consolas, monospace;--nui-font-weight-regular:400;--nui-font-weight-medium:500;--nui-font-weight-bold:800;--nui-font-weight-heavy:900;--nui-font-weight-display:var(--nui-font-weight-bold);--nui-font-weight-action:var(--nui-font-weight-heavy);--nui-font-weight-label:var(--nui-font-weight-bold);--nui-font-size-xs:.75rem;--nui-font-size-sm:.875rem;--nui-font-size-md:1rem;--nui-font-size-lg:1.125rem;--nui-font-size-xl:1.5rem;--nui-font-size-2xl:clamp(1.9rem, 3.6vw, 3.1rem);--nui-font-size-display:clamp(2.45rem, 5.2vw, 4.5rem);--nui-line-height-tight:1.12;--nui-line-height-heading:1.22;--nui-line-height-body:1.72;--nui-line-height-relaxed:1.8;--nui-letter-spacing-heading:0;--nui-letter-spacing-label:.08em;--nui-space-0:0;--nui-space-1:4px;--nui-space-2:8px;--nui-space-3:12px;--nui-space-4:16px;--nui-space-5:20px;--nui-space-6:24px;--nui-space-8:32px;--nui-space-10:40px;--nui-space-12:48px;--nui-space-16:64px;--nui-space-20:80px;--nui-space-24:96px;--nui-space-32:128px;--nui-space-40:160px;--nui-layout-content-max:1180px;--nui-layout-wide-max:1220px;--nui-layout-reading-max:65ch;--nui-layout-gutter:clamp(16px, 4vw, 48px);--nui-layout-gutter-mobile:16px;--nui-layout-section-space:clamp(52px, 7vw, 80px);--nui-layout-header-height:72px;--nui-control-height-sm:44px;--nui-control-height:44px;--nui-control-height-lg:52px;--nui-control-height-pill:44px;--nui-field-height:48px;--nui-icon-button-size:44px;--nui-brand-mark-size:42px;--nui-brand-mark-size-mobile:38px;--nui-border-width-subtle:1px;--nui-border-width:2px;--nui-border-width-card:3px;--nui-border-width-strong:4px;--nui-radius-none:0;--nui-radius-sm:4px;--nui-radius-md:8px;--nui-radius-round:50%;--nui-radius-full:999px;--nui-radius-control:var(--nui-radius-md);--nui-radius-card:var(--nui-radius-md);--nui-radius-panel:var(--nui-radius-md);--nui-radius-pill:var(--nui-radius-full);--nui-radius-swatch:var(--nui-radius-sm);--nui-shadow-sm:0 4px 12px #211a2c33;--nui-shadow-md:0 18px 40px #1f182b1f;--nui-shadow-block-sm:4px 4px 0 var(--nui-color-decorative-2);--nui-shadow-block:5px 5px 0 var(--nui-color-decorative-2);--nui-shadow-block-hover:5px 5px 0 var(--nui-color-decorative-3);--nui-shadow-panel:10px 10px 0 var(--nui-color-decorative-1);--nui-shadow-card:7px 7px 0 #ff9e206b;--nui-shadow-card-hover:10px 10px 0 var(--nui-color-decorative-3);--nui-shadow-focus:0 0 0 4px #31d9ec57;--nui-motion-instant:1ms;--nui-motion-fast:.16s;--nui-motion-medium:.32s;--nui-motion-slow:.48s;--nui-motion-ambient:14s;--nui-ease-standard:ease;--nui-ease-expressive:cubic-bezier(.16, 1, .3, 1);--nui-layer-base:0;--nui-layer-content:10;--nui-layer-sticky:20;--nui-layer-header:40;--nui-layer-overlay:100;--nui-layer-modal:200;--nui-layer-toast:300}:where(.nui-root),:where(.nui-root *){box-sizing:border-box}:where(.nui-root){overflow-wrap:break-word;background:var(--nui-color-canvas);min-height:100dvh;color:var(--nui-color-text);font-family:var(--nui-font-body);font-size:var(--nui-font-size-md);font-weight:var(--nui-font-weight-regular);line-height:var(--nui-line-height-body);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}:where(){background:var(--nui-color-selection);color:var(--nui-color-text)}:where(.nui-root)::selection{background:var(--nui-color-selection);color:var(--nui-color-text)}:where(.nui-root) :where(img,picture,video,canvas,svg){max-width:100%;display:block}:where(.nui-root) :where(button,input,select,textarea){color:inherit;font:inherit;margin:0}:where(.nui-root) :where(button,[type=button],[type=reset],[type=submit]){-webkit-tap-highlight-color:transparent}:where(.nui-root) :where(a){color:currentColor;text-underline-offset:.2em;text-decoration-thickness:.1em}:where(.nui-root) :where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(.nui-root) :where(:focus-visible){outline:3px solid var(--nui-color-focus);outline-offset:3px;box-shadow:var(--nui-shadow-focus)}:where(.nui-root) :where([hidden]){display:none!important}@media (prefers-reduced-motion:reduce){:where(.nui-root),:where(.nui-root *){scroll-behavior:auto!important;animation-delay:0s!important;animation-duration:var(--nui-motion-instant)!important;transition-delay:0s!important;transition-duration:var(--nui-motion-instant)!important;animation-iteration-count:1!important}}@media (forced-colors:active){:where(.nui-root) :where(:focus-visible){box-shadow:none;outline-color:highlight}}.nui-root,.nui-app-shell{isolation:isolate;background:var(--nui-color-canvas);width:100%;min-height:100dvh;color:var(--nui-color-text);position:relative;overflow-x:clip}.nui-app-shell{flex-direction:column;display:flex}.nui-app-shell>main{flex:1 0 auto}.nui-app-shell>.nui-footer{margin-top:auto}.nui-container{width:min(var(--nui-container-max,var(--nui-layout-content-max)), calc(100% - (var(--nui-layout-gutter) * 2)));margin-inline:auto}.nui-container--wide{--nui-container-max:var(--nui-layout-wide-max)}.nui-container--reading{--nui-container-max:var(--nui-layout-reading-max)}.nui-section{width:100%;padding-block:var(--nui-layout-section-space);margin:0}.nui-section--wide>.nui-container{--nui-container-max:var(--nui-layout-wide-max)}.nui-section-heading{gap:var(--nui-space-3);max-width:min(900px,100%);margin:0;display:grid}.nui-heading{color:var(--nui-color-text);font-family:var(--nui-font-display);font-size:var(--nui-heading-size,var(--nui-font-size-2xl));font-weight:var(--nui-font-weight-display,var(--nui-font-weight-bold));line-height:var(--nui-line-height-heading);letter-spacing:var(--nui-letter-spacing-heading);text-wrap:balance;margin:0}.nui-heading--display{--nui-heading-size:var(--nui-font-size-display);line-height:var(--nui-line-height-tight)}.nui-heading--section{--nui-heading-size:var(--nui-font-size-2xl)}.nui-heading--subsection{--nui-heading-size:var(--nui-font-size-xl)}.nui-eyebrow{align-items:center;gap:var(--nui-space-2);width:fit-content;color:var(--nui-color-accent-strong);font-family:var(--nui-font-label);font-size:var(--nui-font-size-xs);font-weight:var(--nui-font-weight-label);letter-spacing:var(--nui-letter-spacing-label);text-transform:uppercase;margin:0;line-height:1.4;display:inline-flex}.nui-header{z-index:var(--nui-layer-header);width:100%;min-height:var(--nui-layout-header-height);border-top:var(--nui-border-width-strong) solid var(--nui-color-accent);border-bottom:var(--nui-border-width-subtle) solid var(--nui-color-border);background:var(--nui-color-header-bg,var(--nui-color-surface-raised));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0}.nui-header__inner{justify-content:space-between;align-items:center;gap:var(--nui-space-4);width:min(var(--nui-layout-content-max), calc(100% - (var(--nui-layout-gutter) * 2)));min-height:calc(var(--nui-layout-header-height) - var(--nui-border-width-strong));padding-block:var(--nui-space-2);margin-inline:auto;display:flex}.nui-brand{min-width:0;min-height:44px;color:var(--nui-color-text);align-items:center;gap:10px;text-decoration:none;display:inline-flex}.nui-brand__mark{width:var(--nui-brand-mark-size);height:var(--nui-brand-mark-size);flex:none;place-items:center;display:grid}.nui-brand__name{min-width:0;font-family:var(--nui-font-display);font-size:1.04rem;font-weight:var(--nui-font-weight-display,var(--nui-font-weight-bold));text-overflow:ellipsis;white-space:nowrap;line-height:1.2;overflow:hidden}.nui-button{min-height:var(--nui-control-height);justify-content:center;align-items:center;gap:var(--nui-space-2);border:var(--nui-border-width) solid var(--nui-color-border-strong);border-radius:var(--nui-radius-control);background:var(--nui-color-surface);color:var(--nui-color-text);font-family:var(--nui-font-action);font-weight:var(--nui-font-weight-action,var(--nui-font-weight-heavy));text-align:center;white-space:nowrap;cursor:pointer;transition:transform var(--nui-motion-fast) var(--nui-ease-standard), border-color var(--nui-motion-fast) var(--nui-ease-standard), background-color var(--nui-motion-fast) var(--nui-ease-standard), color var(--nui-motion-fast) var(--nui-ease-standard), box-shadow var(--nui-motion-fast) var(--nui-ease-standard);padding:0 15px;line-height:1.2;text-decoration:none;display:inline-flex}.nui-button--primary{background:var(--nui-color-accent);color:var(--nui-color-on-accent);box-shadow:var(--nui-shadow-block)}.nui-button--secondary{background:var(--nui-color-surface);color:var(--nui-color-text)}.nui-button--ghost{color:var(--nui-color-text);background:0 0;border-color:#0000}.nui-button--danger{border-color:var(--nui-color-danger);background:var(--nui-color-danger);color:var(--nui-color-on-danger)}.nui-button--icon{width:var(--nui-icon-button-size);min-width:var(--nui-icon-button-size);height:var(--nui-icon-button-size);min-height:var(--nui-icon-button-size);padding:0}.nui-button--sm{min-height:var(--nui-control-height-sm);padding-inline:var(--nui-space-3);font-size:var(--nui-font-size-sm)}.nui-button--lg{min-height:var(--nui-control-height-lg);padding-inline:var(--nui-space-5);font-size:var(--nui-font-size-lg)}.nui-button--block{width:100%}.nui-button[aria-pressed=true]{background:var(--nui-color-selected);color:var(--nui-color-on-selected);box-shadow:var(--nui-shadow-block)}@media (hover:hover){.nui-button:not(:disabled,[aria-disabled=true],[aria-busy=true]):hover{border-color:var(--nui-color-border-strong);transform:translate(-2px,-2px)}.nui-button:not(.nui-button--ghost,.nui-button--danger):not(:disabled,[aria-disabled=true],[aria-busy=true]):hover{background:var(--nui-color-accent-hover);color:var(--nui-color-on-accent);box-shadow:var(--nui-shadow-block-hover,var(--nui-shadow-block))}.nui-button--ghost:not(:disabled,[aria-disabled=true],[aria-busy=true]):hover{background:var(--nui-color-surface-muted);color:var(--nui-color-text);box-shadow:none}.nui-button--danger:not(:disabled,[aria-disabled=true],[aria-busy=true]):hover{border-color:var(--nui-color-danger-hover);background:var(--nui-color-danger-hover);color:var(--nui-color-on-danger);box-shadow:var(--nui-shadow-block-hover,var(--nui-shadow-block))}.nui-button[aria-pressed=true]:not(:disabled,[aria-disabled=true],[aria-busy=true]):hover{background:var(--nui-color-selected);color:var(--nui-color-on-selected)}}.nui-button:not(:disabled,[aria-disabled=true],[aria-busy=true]):active{box-shadow:none;transform:translate(1px,1px)}.nui-button:disabled,.nui-button[aria-disabled=true]{border-color:var(--nui-color-disabled-border);background:var(--nui-color-disabled-surface);color:var(--nui-color-disabled-text);box-shadow:none;cursor:not-allowed}.nui-button[aria-busy=true]{cursor:progress}.nui-button[aria-busy=true]>*{opacity:1}.nui-panel{padding:var(--nui-panel-padding,var(--nui-space-5));border:var(--nui-border-width-strong) solid var(--nui-color-border-strong);border-radius:var(--nui-radius-panel);background:var(--nui-color-surface);color:var(--nui-color-text);box-shadow:var(--nui-shadow-panel)}.nui-card{padding:var(--nui-card-padding,var(--nui-space-5));border:var(--nui-border-width-card) solid var(--nui-color-border);border-radius:var(--nui-radius-card);background:var(--nui-color-surface-raised);color:var(--nui-color-text);box-shadow:var(--nui-shadow-card,none);transition:transform var(--nui-motion-fast) var(--nui-ease-standard), border-color var(--nui-motion-fast) var(--nui-ease-standard), box-shadow var(--nui-motion-fast) var(--nui-ease-standard)}.nui-card[data-nui-interactive=true]{cursor:pointer}@media (hover:hover){.nui-card[data-nui-interactive=true]:hover{border-color:var(--nui-color-decorative-4);box-shadow:var(--nui-shadow-card-hover,var(--nui-shadow-md));transform:translate(-3px,-3px)}}.nui-pill{min-height:var(--nui-control-height-pill);justify-content:center;align-items:center;gap:var(--nui-space-2);border:var(--nui-border-width) solid var(--nui-color-border-strong);border-radius:var(--nui-radius-pill);background:var(--nui-color-surface-muted);color:var(--nui-color-text);font-family:var(--nui-font-label);font-size:var(--nui-font-size-sm);font-weight:var(--nui-font-weight-label);white-space:nowrap;transition:transform var(--nui-motion-fast) var(--nui-ease-standard), border-color var(--nui-motion-fast) var(--nui-ease-standard), background-color var(--nui-motion-fast) var(--nui-ease-standard), color var(--nui-motion-fast) var(--nui-ease-standard), box-shadow var(--nui-motion-fast) var(--nui-ease-standard);padding:0 13px;line-height:1.2;text-decoration:none;display:inline-flex}button.nui-pill{cursor:pointer}.nui-pill[aria-pressed=true],.nui-pill[data-nui-selected=true]{background:var(--nui-color-selected);color:var(--nui-color-on-selected);box-shadow:var(--nui-shadow-block)}@media (hover:hover){button.nui-pill:not(:disabled,[aria-disabled=true],[aria-busy=true]):hover{border-color:var(--nui-color-border-strong);background:var(--nui-color-accent-hover);color:var(--nui-color-on-accent);box-shadow:var(--nui-shadow-block-hover);transform:translate(-1px,-1px)}button.nui-pill:is([aria-pressed=true],[data-nui-selected=true]):not(:disabled,[aria-disabled=true],[aria-busy=true]):hover{background:var(--nui-color-selected);color:var(--nui-color-on-selected)}}button.nui-pill:not(:disabled,[aria-disabled=true],[aria-busy=true]):active{box-shadow:none;transform:translate(1px,1px)}button.nui-pill:disabled,button.nui-pill[aria-disabled=true]{border-color:var(--nui-color-disabled-border);background:var(--nui-color-disabled-surface);color:var(--nui-color-disabled-text);box-shadow:none;cursor:not-allowed}button.nui-pill[aria-busy=true]{cursor:progress}.nui-field{gap:var(--nui-space-2);display:grid}.nui-field__label{color:var(--nui-color-label);font-family:var(--nui-font-label);font-size:var(--nui-font-size-xs);font-weight:var(--nui-font-weight-label);line-height:1.5}.nui-input,.nui-select{width:100%;min-height:var(--nui-field-height);padding-inline:var(--nui-space-3);border:var(--nui-border-width) solid var(--nui-color-control-border);border-radius:var(--nui-radius-control);background:var(--nui-color-surface);color:var(--nui-color-text);caret-color:var(--nui-color-accent-strong);transition:border-color var(--nui-motion-fast) var(--nui-ease-standard), box-shadow var(--nui-motion-fast) var(--nui-ease-standard)}.nui-input::placeholder{color:var(--nui-color-text-subtle);opacity:1}.nui-input:not(:disabled):hover,.nui-select:not(:disabled):hover{border-color:var(--nui-color-border-strong)}.nui-input:focus-visible,.nui-select:focus-visible{border-color:var(--nui-color-border-strong);outline:3px solid var(--nui-color-focus);outline-offset:2px;box-shadow:var(--nui-shadow-focus)}.nui-input[aria-invalid=true],.nui-select[aria-invalid=true]{border-color:var(--nui-color-danger)}.nui-input:disabled,.nui-select:disabled{border-color:var(--nui-color-disabled-border);background:var(--nui-color-disabled-surface);color:var(--nui-color-disabled-text);opacity:1;cursor:not-allowed}.nui-field__hint,.nui-field__error{font-size:var(--nui-font-size-xs);margin:0;line-height:1.55}.nui-field__hint{color:var(--nui-color-text-muted)}.nui-field__error{color:var(--nui-color-danger);font-weight:var(--nui-font-weight-bold)}.nui-swatch-row{border:var(--nui-border-width-card) solid var(--nui-color-border);border-radius:var(--nui-radius-card);min-height:48px;display:flex;overflow:hidden}.nui-swatch-row>.nui-swatch{border:0;border-radius:0;flex:1 1 0;min-width:0}.nui-swatch{width:var(--nui-swatch-width,44px);height:var(--nui-swatch-height,32px);border:var(--nui-border-width-subtle) solid var(--nui-color-swatch-border);border-radius:var(--nui-radius-swatch);background:var(--nui-swatch-color,transparent);box-shadow:inset 0 0 0 1px var(--nui-color-surface-muted);flex:none;display:inline-block}button.nui-swatch{cursor:pointer;min-width:44px;min-height:44px;transition:transform var(--nui-motion-fast) var(--nui-ease-standard), box-shadow var(--nui-motion-fast) var(--nui-ease-standard)}button.nui-swatch[aria-pressed=true]{box-shadow:inset 0 0 0 3px var(--nui-color-surface), inset 0 0 0 6px var(--nui-color-border-strong);outline:0}@media (hover:hover){button.nui-swatch:not(:disabled,[aria-disabled=true],[aria-busy=true]):hover{box-shadow:inset 0 0 0 2px var(--nui-color-surface), inset 0 0 0 4px var(--nui-color-border-strong)}button.nui-swatch[aria-pressed=true]:not(:disabled,[aria-disabled=true],[aria-busy=true]):hover{box-shadow:inset 0 0 0 3px var(--nui-color-surface), inset 0 0 0 6px var(--nui-color-border-strong)}}button.nui-swatch:not(:disabled,[aria-disabled=true],[aria-busy=true]):active{transform:scale(.96)}button.nui-swatch:disabled,button.nui-swatch[aria-disabled=true]{border-color:var(--nui-color-disabled-border);filter:grayscale();opacity:1;cursor:not-allowed}button.nui-swatch[aria-busy=true]{filter:saturate(.45);cursor:progress}.nui-footer{width:100%;padding:44px var(--nui-layout-gutter) 46px;border-top:var(--nui-border-width-strong) solid var(--nui-color-border-strong);background:var(--nui-color-footer);color:var(--nui-color-footer-text);position:relative}.nui-footer:before{height:var(--nui-footer-stripe-size);background:var(--nui-footer-stripe);content:"";pointer-events:none;position:absolute;inset:0 0 auto}.nui-footer__inner{max-width:var(--nui-layout-content-max);justify-content:space-between;align-items:center;gap:var(--nui-space-6);margin-inline:auto;display:flex}.nui-footer__brand{color:var(--nui-color-footer-heading);font-family:var(--nui-font-display);font-size:var(--nui-font-size-lg);font-weight:var(--nui-font-weight-display,var(--nui-font-weight-bold))}.nui-footer__brand>strong{display:block}.nui-footer__brand>p{margin:var(--nui-space-1) 0 0;color:var(--nui-color-footer-text);font-family:var(--nui-font-body);font-size:var(--nui-font-size-sm);font-weight:var(--nui-font-weight-regular);line-height:var(--nui-line-height-body)}.nui-footer__links{gap:var(--nui-space-3);flex-wrap:wrap;flex:none;display:flex}.nui-footer__links>:where(a,button){align-items:center;min-height:44px;display:inline-flex}.nui-stack{gap:var(--nui-stack-space,var(--nui-space-4));flex-direction:column;display:flex}.nui-stack>*{margin-block:0}.nui-stack--sm{--nui-stack-space:var(--nui-space-2)}.nui-stack--lg{--nui-stack-space:var(--nui-space-8)}.nui-cluster{align-items:var(--nui-cluster-align,center);justify-content:var(--nui-cluster-justify,flex-start);gap:var(--nui-cluster-space,var(--nui-space-3));flex-wrap:wrap;display:flex}.nui-grid{grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--nui-grid-min,240px)), 1fr));gap:var(--nui-grid-space,var(--nui-space-4));display:grid}.nui-visually-hidden{clip:rect(0, 0, 0, 0)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}@media (width<=767.98px){.nui-container,.nui-section,.nui-header__inner{width:calc(100% - (var(--nui-layout-gutter-mobile) * 2))}.nui-section{padding-block:clamp(40px,12vw,60px)}.nui-header__inner{gap:var(--nui-space-3)}.nui-brand__mark{width:var(--nui-brand-mark-size-mobile);height:var(--nui-brand-mark-size-mobile)}.nui-brand__name{font-size:.94rem}.nui-grid{grid-template-columns:minmax(0,1fr)}.nui-panel,.nui-card{padding:var(--nui-space-4)}.nui-footer{padding-inline:var(--nui-layout-gutter-mobile)}.nui-footer__inner{flex-direction:column;align-items:flex-start}.nui-footer__links{width:100%}}@media (forced-colors:active){.nui-button,.nui-panel,.nui-card,.nui-pill,.nui-input,.nui-select,.nui-swatch{box-shadow:none;border-color:canvastext}.nui-button[aria-pressed=true],.nui-pill:is([aria-pressed=true],[data-nui-selected=true]),button.nui-swatch[aria-pressed=true]{outline-offset:2px;outline:3px solid highlight}.nui-swatch{forced-color-adjust:none}}:root,[data-nui-theme=color-lab],.nui-theme-color-lab{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--nui-palette-ink:#1d2128;--nui-palette-paper:#fff;--nui-palette-orange:#ff9e20;--nui-palette-orange-dark:#a34800;--nui-palette-pink:#ff62bb;--nui-palette-cyan:#31d9ec;--nui-palette-violet:#9a7dd4;--nui-color-canvas:#fff;--nui-color-background:#fff;--nui-color-surface:#fff;--nui-color-surface-raised:#fffffff5;--nui-color-surface-muted:#ffffffb3;--nui-color-text:#1d2128;--nui-color-text-muted:#394047;--nui-color-text-subtle:#6c6478;--nui-color-label:#4c5557;--nui-color-border:#1d21282e;--nui-color-border-strong:#1d2128;--nui-color-control-border:#8d949b;--nui-color-swatch-border:#8d949b;--nui-color-disabled-surface:#e8ecef;--nui-color-disabled-text:#4c5557;--nui-color-disabled-border:#7a848a;--nui-color-accent:#ff9e20;--nui-color-accent-strong:#a34800;--nui-color-accent-hover:#f28a00;--nui-color-on-accent:#1d2128;--nui-color-selected:#31d9ec;--nui-color-on-selected:#1d2128;--nui-color-focus:#1d2128;--nui-color-danger:#b42318;--nui-color-danger-hover:#8f1c13;--nui-color-on-danger:#fff;--nui-color-selection:#31d9ec59;--nui-color-decorative-1:#ff9e20;--nui-color-decorative-2:#ff62bb;--nui-color-decorative-3:#31d9ec;--nui-color-decorative-4:#9a7dd4;--nui-color-footer:#1d2128;--nui-color-footer-text:#ffffffc7;--nui-color-footer-heading:#fff;--nui-color-header-bg:#fffffff5;--nui-font-body:"Mochiy Pop P One", "BIZ UDPGothic", "Yu Gothic UI", "Hiragino Sans", Meiryo, sans-serif;--nui-font-display:"Dela Gothic One", "Mochiy Pop P One", var(--nui-font-body);--nui-font-action:var(--nui-font-body);--nui-font-label:var(--nui-font-body);--nui-font-mono:"IBM Plex Mono", "SFMono-Regular", Consolas, monospace;--nui-font-weight-display:400;--nui-font-weight-action:900;--nui-font-weight-label:900;--nui-layout-content-max:1180px;--nui-layout-wide-max:1220px;--nui-layout-header-height:72px;--nui-radius-control:0;--nui-radius-card:0;--nui-radius-panel:0;--nui-radius-pill:0;--nui-radius-swatch:0;--nui-shadow-block-sm:4px 4px 0 #ff62bb;--nui-shadow-block:5px 5px 0 #ff62bb;--nui-shadow-block-hover:5px 5px 0 #31d9ec;--nui-shadow-panel:10px 10px 0 #ff9e20;--nui-shadow-sm:0 4px 12px #211a2c33;--nui-shadow-md:0 18px 40px #1f182b1f;--nui-shadow-card:7px 7px 0 #ff9e206b;--nui-shadow-card-hover:10px 10px 0 #31d9ec;--nui-shadow-focus:0 0 0 4px #31d9ec57;--nui-footer-stripe-size:12px;--nui-footer-stripe:linear-gradient(90deg, #ff9e20 0 42%, #ff62bb 42% 62%, #31d9ec 62% 82%, #9a7dd4 82% 100%)}:root{font-family:var(--nui-font-body);background:var(--nui-color-canvas);color:var(--nui-color-text);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-width:0;min-height:100dvh;margin:0;overflow-x:hidden}button,input,select,textarea{font:inherit}button,a,summary,input,select,textarea{touch-action:manipulation}:focus-visible{outline:3px solid var(--nui-color-focus);outline-offset:3px}::selection{background:var(--nui-color-selection)}.kba-app{--kba-rule:var(--nui-border-width-strong) solid var(--nui-color-border-strong);background:var(--nui-color-canvas);min-width:0}.kba-skip-link{z-index:var(--nui-layer-toast);inset:var(--nui-space-3) auto auto var(--nui-space-3);padding:var(--nui-space-3) var(--nui-space-4);border:var(--nui-border-width) solid var(--nui-color-border-strong);background:var(--nui-color-accent);color:var(--nui-color-on-accent);font-weight:var(--nui-font-weight-bold);position:fixed;transform:translateY(-170%)}.kba-skip-link:focus{transform:none}.kba-product-brand{flex:0 auto;min-width:0}.kba-brand-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kba-back-link{white-space:nowrap;margin-inline-start:auto}.kba-switch-mark{border:var(--nui-border-width) solid var(--nui-color-border-strong);background:var(--nui-color-surface);width:36px;height:32px;box-shadow:var(--nui-shadow-block-sm);flex:none;grid-template-columns:1fr 5px 1fr;padding:3px;display:grid}.kba-switch-mark i:first-child{background:var(--nui-color-decorative-1)}.kba-switch-mark i:last-child{background:var(--nui-color-decorative-2)}.kba-switch-mark b{background:var(--nui-color-border-strong)}.kba-intro{border-bottom:var(--kba-rule);background:var(--nui-color-surface);position:relative;overflow:hidden}.kba-intro__inner{gap:var(--nui-space-8);grid-template-columns:minmax(0,1.35fr) minmax(190px,.65fr);align-items:center;min-height:240px;padding-block:clamp(28px,5vw,52px);display:grid;position:relative}.kba-intro__copy{z-index:1;gap:var(--nui-space-3);max-width:760px;display:grid;position:relative}.kba-intro__copy .nui-eyebrow{margin:0}.kba-title{--nui-heading-size:clamp(2rem, 5vw, 4.35rem);max-width:14ch;margin:0;line-height:1.08}.kba-lead{max-width:62ch;color:var(--nui-color-text-muted);font-size:var(--nui-font-size-lg);line-height:var(--nui-line-height-body);margin:0}.kba-intro-split{opacity:.28;pointer-events:none;grid-template-columns:1fr 12px 1fr;width:clamp(150px,20vw,290px);display:grid;position:absolute;inset:-32px 2% -40px auto;rotate:7deg}.kba-intro-split i:first-child{border:var(--kba-rule);background:var(--nui-color-decorative-1)}.kba-intro-split i:last-child{border:var(--kba-rule);background:var(--nui-color-decorative-2)}.kba-intro-split b{background:var(--nui-color-border-strong)}.kba-workspace{padding-block:var(--nui-space-8) var(--nui-space-16)}.kba-tabs{width:min(100%,560px);border:var(--kba-rule);box-shadow:var(--nui-shadow-block);grid-template-columns:repeat(2,minmax(0,1fr));margin-block-end:var(--nui-space-8);display:grid}.kba-tabs__tab{min-height:52px;padding:var(--nui-space-3) var(--nui-space-4);background:var(--nui-color-surface);color:var(--nui-color-text);font-family:var(--nui-font-action);font-weight:var(--nui-font-weight-heavy);cursor:pointer;transition:transform var(--nui-motion-fast) var(--nui-ease-standard), background-color var(--nui-motion-fast) var(--nui-ease-standard), box-shadow var(--nui-motion-fast) var(--nui-ease-standard);border:0;position:relative}.kba-tabs__tab+.kba-tabs__tab{border-inline-start:var(--nui-border-width-strong) solid var(--nui-color-border-strong)}.kba-tabs__tab[aria-selected=true]{background:var(--nui-color-selected);color:var(--nui-color-on-selected)}.kba-tabs__tab:active{box-shadow:inset 0 4px 0 var(--nui-color-decorative-2);transform:translateY(2px)}.kba-tabs__tab:focus-visible{z-index:1;outline-offset:-6px}.kba-tool-grid{gap:var(--nui-space-8);grid-template-areas:"source""ratio""alignment""transition""preview""export";align-items:start;display:grid}.kba-tool-grid[data-mode=simple]{grid-template-areas:"source""ratio""transition""preview""export"}.kba-grid-source{grid-area:source}.kba-grid-ratio{grid-area:ratio}.kba-grid-alignment{grid-area:alignment}.kba-grid-transition{gap:var(--nui-space-8);grid-area:transition;display:grid}.kba-grid-preview{grid-area:preview;min-width:0}.kba-grid-export{grid-area:export}.kba-grid-source,.kba-grid-ratio,.kba-grid-alignment,.kba-grid-transition,.kba-grid-preview,.kba-grid-export{min-width:0}.kba-step-heading{gap:var(--nui-space-4);grid-template-columns:minmax(0,1fr);align-items:start;display:grid}.kba-step-heading[data-numbered=true]{grid-template-columns:auto minmax(0,1fr)}.kba-step-heading h2,.kba-step-heading p{margin:0}.kba-step-heading p{color:var(--nui-color-text-muted);line-height:var(--nui-line-height-body)}.kba-step-number{border:var(--nui-border-width-strong) solid var(--nui-color-border-strong);background:var(--nui-color-decorative-2);width:48px;height:48px;font-family:var(--nui-font-mono);font-weight:var(--nui-font-weight-bold);box-shadow:var(--nui-shadow-block-sm);place-items:center;display:grid}.kba-source-card,.kba-ratio-panel,.kba-alignment-panel,.kba-transition-panel,.kba-preview-panel,.kba-export-panel,.kba-advanced-settings{border-color:var(--nui-color-border-strong);min-width:0;box-shadow:var(--nui-shadow-panel)}.kba-source-card{background:linear-gradient(90deg, color-mix(in srgb, var(--nui-color-decorative-1) 9%, transparent) 0 50%, color-mix(in srgb, var(--nui-color-decorative-2) 9%, transparent) 50% 100%), var(--nui-color-surface)}.kba-source-card[aria-busy=true]{cursor:wait}.kba-dropzones{gap:var(--nui-space-3);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;display:grid}.kba-dropzone{gap:var(--nui-space-3);min-width:0;min-height:270px;padding:var(--nui-space-4);border:3px dashed var(--nui-color-control-border);background:var(--nui-color-surface);transition:transform var(--nui-motion-fast) var(--nui-ease-standard), background-color var(--nui-motion-fast) var(--nui-ease-standard), border-color var(--nui-motion-fast) var(--nui-ease-standard);align-content:start;display:grid}.kba-dropzone[data-focused-slot=true]{border-style:solid;border-color:var(--nui-color-border-strong)}.kba-dropzone[data-dragging=true]{background:var(--nui-color-selected);border-style:solid;transform:translateY(-2px)}.kba-dropzone__label{justify-content:space-between;align-items:baseline;gap:var(--nui-space-2);border-bottom:var(--nui-border-width) solid var(--nui-color-border);padding-block-end:var(--nui-space-2);display:flex}.kba-dropzone__label strong{font-family:var(--nui-font-action);font-size:var(--nui-font-size-lg)}.kba-dropzone__label span{color:var(--nui-color-text-subtle);font-family:var(--nui-font-mono);font-size:var(--nui-font-size-xs);font-weight:var(--nui-font-weight-bold)}.kba-dropzone__empty{gap:var(--nui-space-2);text-align:center;align-content:center;place-items:center;min-height:190px;display:grid}.kba-image-placeholder{width:64px;height:52px;border:var(--nui-border-width-strong) solid var(--nui-color-border-strong);background:var(--nui-color-surface-muted);box-shadow:var(--nui-shadow-block-sm);margin-block-end:var(--nui-space-2);display:block;position:relative}.kba-image-placeholder:before{border:2px solid var(--nui-color-border-strong);background:var(--nui-color-decorative-3);content:"";width:12px;height:12px;position:absolute;inset:8px auto auto 9px}.kba-image-placeholder i{background:var(--nui-color-decorative-2);clip-path:polygon(0 100%,34% 20%,54% 60%,72% 5%,100% 100%);height:19px;position:absolute;inset:auto 7px 7px}.kba-dropzone__thumb{border:var(--nui-border-width) solid var(--nui-color-border-strong);background:var(--nui-color-surface-muted);object-fit:contain;width:100%;height:180px;display:block}.kba-dropzone__meta{gap:var(--nui-space-1);min-width:0;display:grid}.kba-dropzone__meta strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kba-dropzone__meta span{color:var(--nui-color-text-muted);font-family:var(--nui-font-mono);font-size:var(--nui-font-size-sm)}.kba-dropzone__actions{margin-block-start:auto}.kba-swap-button{width:112px;min-height:68px;padding-inline:var(--nui-space-2);font-size:var(--nui-font-size-sm);white-space:normal;flex-direction:column;gap:2px}.kba-swap-button span{font-family:var(--nui-font-mono);font-size:1.35rem;line-height:1}.kba-alert,.kba-notice,.kba-warning,.kba-disabled-reason{gap:var(--nui-space-2);min-width:0;padding:var(--nui-space-3) var(--nui-space-4);border:var(--nui-border-width) solid var(--nui-color-border-strong);align-items:flex-start;display:flex}.kba-alert{border-color:var(--nui-color-danger);background:color-mix(in srgb, var(--nui-color-danger) 9%, var(--nui-color-surface));flex-direction:column}.kba-notice{background:var(--nui-color-selected);color:var(--nui-color-on-selected);font-weight:var(--nui-font-weight-bold);justify-content:space-between;align-items:center}.kba-warning{background:var(--nui-color-surface-muted);color:var(--nui-color-text);line-height:var(--nui-line-height-body);margin:0}.kba-disabled-reason{background:var(--nui-color-disabled-surface);color:var(--nui-color-disabled-text);border-style:dashed;margin:0}.kba-loading{align-items:center;gap:var(--nui-space-3);min-height:48px;padding:var(--nui-space-3) var(--nui-space-4);border:var(--nui-border-width) solid var(--nui-color-border-strong);background:var(--nui-color-surface-raised);font-weight:var(--nui-font-weight-bold);display:flex}.kba-loading span{background:var(--nui-color-surface-muted);width:80px;height:16px;display:block}@media (prefers-reduced-motion:no-preference){.kba-loading span{background:linear-gradient(90deg, var(--nui-color-surface-muted) 0 36%, var(--nui-color-decorative-2) 50%, var(--nui-color-surface-muted) 64% 100%);background-size:220% 100%;animation:1.2s ease-in-out infinite kba-loading-shimmer}}@keyframes kba-loading-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.kba-ratio-options{gap:var(--nui-space-3);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.kba-choice-button{gap:var(--nui-space-1);min-width:0;min-height:126px;padding:var(--nui-space-4);border:var(--nui-border-width) solid var(--nui-color-control-border);background:var(--nui-color-surface);color:var(--nui-color-text);text-align:start;cursor:pointer;box-shadow:var(--nui-shadow-block-sm);align-content:center;justify-items:start;display:grid;position:relative}.kba-choice-button>strong{font-family:var(--nui-font-display);font-size:clamp(1.5rem,4vw,2.2rem)}.kba-choice-button>small{color:var(--nui-color-text-muted);font-family:var(--nui-font-mono)}.kba-choice-button>b{font-size:var(--nui-font-size-xs);margin-block-start:var(--nui-space-2)}.kba-choice-button[aria-pressed=true]{border-color:var(--nui-color-border-strong);background:var(--nui-color-selected);color:var(--nui-color-on-selected);box-shadow:var(--nui-shadow-block)}.kba-choice-button:not(:disabled):active{box-shadow:none;transform:translate(2px,2px)}.kba-segmented{border:var(--nui-border-width) solid var(--nui-color-border-strong);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.kba-segmented--comparison{grid-template-columns:repeat(3,minmax(0,1fr))}.kba-segmented button{min-width:0;min-height:44px;padding:var(--nui-space-2) var(--nui-space-3);background:var(--nui-color-surface);color:var(--nui-color-text);font-weight:var(--nui-font-weight-bold);cursor:pointer;border:0}.kba-segmented button+button{border-inline-start:var(--nui-border-width) solid var(--nui-color-border-strong)}.kba-segmented button[aria-pressed=true]{background:var(--nui-color-selected);color:var(--nui-color-on-selected)}.kba-segmented button:disabled{background:var(--nui-color-disabled-surface);color:var(--nui-color-disabled-text);cursor:not-allowed}.kba-current-target{font-weight:var(--nui-font-weight-bold);margin:0}.kba-alignment-stage,.kba-preview-stage{border:var(--nui-border-width-strong) solid var(--nui-color-border-strong);background:var(--nui-color-surface-muted);width:min(100%,640px);max-height:min(72dvh,760px);box-shadow:var(--nui-shadow-block);margin-inline:auto;position:relative;overflow:hidden}.kba-alignment-stage{cursor:grab;touch-action:none}.kba-alignment-stage:active{cursor:grabbing}.kba-alignment-stage canvas,.kba-preview-stage canvas{object-fit:contain;width:100%;height:100%;display:block}.kba-guide{pointer-events:none;position:absolute;inset:0}.kba-guide--center span{background:var(--nui-color-surface);box-shadow:0 0 0 1px var(--nui-color-border-strong);position:absolute}.kba-guide--center span:first-child{width:2px;height:100%;inset:0 auto 0 50%}.kba-guide--center span:last-child{width:100%;height:2px;inset:50% 0 auto}.kba-guide--thirds span{background:color-mix(in srgb, var(--nui-color-surface) 82%, transparent);box-shadow:0 0 0 1px color-mix(in srgb, var(--nui-color-border-strong) 80%, transparent);position:absolute}.kba-guide--thirds span:first-child,.kba-guide--thirds span:nth-child(2){width:1px;height:100%;inset-block:0}.kba-guide--thirds span:first-child{inset-inline-start:33.333%}.kba-guide--thirds span:nth-child(2){inset-inline-start:66.666%}.kba-guide--thirds span:nth-child(3),.kba-guide--thirds span:nth-child(4){width:100%;height:1px;inset-inline:0}.kba-guide--thirds span:nth-child(3){inset-block-start:33.333%}.kba-guide--thirds span:nth-child(4){inset-block-start:66.666%}.kba-guide--safe{border:2px dashed var(--nui-color-surface);box-shadow:inset 0 0 0 1px var(--nui-color-border-strong), 0 0 0 1px var(--nui-color-border-strong);inset:7%}.kba-range-field{gap:var(--nui-space-2)}.kba-range-field__label{justify-content:space-between;align-items:center;gap:var(--nui-space-4);display:flex}.kba-range-field output{min-width:70px;font-family:var(--nui-font-mono);font-weight:var(--nui-font-weight-bold);text-align:end}.kba-range-field input[type=range]{width:100%;min-height:44px;accent-color:var(--nui-color-accent);margin:0}.kba-alignment-actions{align-items:stretch}.kba-guide-controls{gap:var(--nui-space-2) var(--nui-space-4);border-top:var(--nui-border-width) solid var(--nui-color-border);grid-template-columns:repeat(2,minmax(0,1fr));padding-block-start:var(--nui-space-3);display:grid}.kba-check{align-items:center;gap:var(--nui-space-3);min-height:44px;line-height:1.45;display:flex}.kba-check input{width:22px;height:22px;accent-color:var(--nui-color-accent);flex:none;margin:0}.kba-effect-grid{gap:var(--nui-space-3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.kba-effect-option{gap:var(--nui-space-3);min-width:0;min-height:118px;padding:var(--nui-space-3);border:var(--nui-border-width) solid var(--nui-color-control-border);background:var(--nui-color-surface);color:var(--nui-color-text);text-align:start;cursor:pointer;box-shadow:var(--nui-shadow-block-sm);grid-template-columns:84px minmax(0,1fr);align-items:center;display:grid;position:relative}.kba-effect-option[aria-pressed=true]{border-color:var(--nui-color-border-strong);background:var(--nui-color-selected);color:var(--nui-color-on-selected);box-shadow:var(--nui-shadow-block)}.kba-effect-option:active{box-shadow:none;transform:translate(2px,2px)}.kba-effect-option>span:not(.kba-effect-diagram){gap:var(--nui-space-1);display:grid}.kba-effect-option small{line-height:1.45}.kba-selected-text{inset:var(--nui-space-2) var(--nui-space-2) auto auto;font-size:var(--nui-font-size-xs);position:absolute}.kba-effect-diagram{border:var(--nui-border-width) solid var(--nui-color-border-strong);background:var(--nui-color-surface-muted);grid-template-columns:1fr 1fr;width:84px;height:64px;display:grid;position:relative;overflow:hidden}.kba-effect-diagram i,.kba-effect-diagram b{display:block}.kba-effect-diagram i{background:var(--nui-color-decorative-1)}.kba-effect-diagram b{background:var(--nui-color-decorative-2)}.kba-effect-diagram em{background:var(--nui-color-surface);width:4px;box-shadow:0 0 0 1px var(--nui-color-border-strong);position:absolute;inset:0 auto 0 calc(50% - 2px)}.kba-effect-diagram--fade i,.kba-effect-diagram--fade b{opacity:.72}.kba-effect-diagram--fade em{background:color-mix(in srgb, var(--nui-color-decorative-1) 50%, var(--nui-color-decorative-2));width:18px;inset-inline-start:calc(50% - 9px)}.kba-effect-diagram--grid{perspective:72px;background:linear-gradient(90deg, transparent 0 30%, var(--nui-color-border-strong) 30% 34%, transparent 34% 64%, var(--nui-color-border-strong) 64% 68%, transparent 68%), linear-gradient(transparent 0 30%, var(--nui-color-border-strong) 30% 35%, transparent 35% 64%, var(--nui-color-border-strong) 64% 69%, transparent 69%), var(--nui-color-decorative-2)}.kba-effect-diagram--grid i,.kba-effect-diagram--grid b,.kba-effect-diagram--grid em{box-sizing:border-box;border:1px solid var(--nui-color-border-strong);box-shadow:2px 2px 0 color-mix(in srgb, var(--nui-color-border-strong) 24%, transparent);display:block;position:absolute}.kba-effect-diagram--grid i{background:var(--nui-color-decorative-1);width:23px;height:22px;inset:7px auto auto 7px;transform:rotateY(58deg)}.kba-effect-diagram--grid b{background:var(--nui-color-decorative-3);width:24px;height:23px;inset:33px auto auto 30px;transform:rotateY(-48deg)}.kba-effect-diagram--grid em{background:var(--nui-color-surface);width:17px;height:29px;inset:10px 7px auto auto;transform:rotateY(68deg)}.kba-effect-diagram--glitch{isolation:isolate;grid-template-columns:46% 54%}.kba-effect-diagram--glitch i,.kba-effect-diagram--glitch b{position:relative;transform:skew(-8deg)}.kba-effect-diagram--glitch i{translate:-4px}.kba-effect-diagram--glitch b{translate:5px}.kba-effect-diagram--glitch:before{z-index:2;background:var(--nui-color-border-strong);height:2px;box-shadow:11px 8px 0 var(--nui-color-decorative-3), -7px 17px 0 1px var(--nui-color-border-strong), 15px 31px 0 var(--nui-color-decorative-4), -12px 44px 0 var(--nui-color-decorative-3), 6px 52px 0 var(--nui-color-border-strong);content:"";position:absolute;inset:5px -10px auto}.kba-effect-diagram--glitch em{z-index:3;background:var(--nui-color-decorative-3);width:auto;height:9px;box-shadow:14px -12px 0 -3px var(--nui-color-decorative-4), 17px 15px 0 -3px var(--nui-color-border-strong);inset:26px -10px auto;transform:translate(-8px)}.kba-effect-diagram--particles{background:radial-gradient(circle at 10% 20%, var(--nui-color-decorative-1) 0 2px, transparent 2.5px), radial-gradient(circle at 20% 52%, var(--nui-color-decorative-1) 0 1px, transparent 1.5px), radial-gradient(circle at 29% 78%, var(--nui-color-decorative-3) 0 2px, transparent 2.5px), radial-gradient(circle at 38% 31%, var(--nui-color-decorative-3) 0 1.5px, transparent 2px), radial-gradient(circle at 46% 63%, var(--nui-color-decorative-1) 0 1px, transparent 1.5px), radial-gradient(circle at 55% 17%, var(--nui-color-decorative-2) 0 2px, transparent 2.5px), radial-gradient(circle at 61% 82%, var(--nui-color-decorative-3) 0 1px, transparent 1.5px), radial-gradient(circle at 70% 45%, var(--nui-color-decorative-2) 0 1.5px, transparent 2px), radial-gradient(circle at 77% 69%, var(--nui-color-decorative-1) 0 1px, transparent 1.5px), radial-gradient(circle at 84% 25%, var(--nui-color-decorative-2) 0 2px, transparent 2.5px), radial-gradient(circle at 91% 54%, var(--nui-color-decorative-3) 0 1px, transparent 1.5px), radial-gradient(circle at 95% 84%, var(--nui-color-decorative-2) 0 1.5px, transparent 2px), var(--nui-color-surface-muted)}.kba-effect-diagram--particles i,.kba-effect-diagram--particles b,.kba-effect-diagram--particles em{display:none}.kba-effect-diagram--cut em{background:var(--nui-color-border-strong);width:2px;box-shadow:none}.kba-advanced-settings{padding:var(--nui-space-6);border:var(--kba-rule);background:var(--nui-color-surface)}.kba-transition-speed{gap:var(--nui-space-1);padding-block-start:var(--nui-space-2);display:grid}.kba-transition-speed .nui-field__hint{margin:0}.kba-settings-grid{gap:var(--nui-space-4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.kba-fieldset{min-width:0;padding:var(--nui-space-4);border:var(--nui-border-width) solid var(--nui-color-border);margin:0}.kba-fieldset legend{padding-inline:var(--nui-space-2);font-weight:var(--nui-font-weight-bold)}.kba-option-row{gap:var(--nui-space-2) var(--nui-space-4);flex-wrap:wrap;display:flex}.kba-option-row label{align-items:center;gap:var(--nui-space-2);min-height:44px;display:inline-flex}.kba-option-row input{width:21px;height:21px;accent-color:var(--nui-color-accent);margin:0}.kba-color-control{gap:var(--nui-space-3);grid-template-columns:72px minmax(0,1fr);display:grid}.kba-color-control input[type=color]{border:var(--nui-border-width) solid var(--nui-color-control-border);background:var(--nui-color-surface);width:72px;min-height:48px;padding:3px}.kba-preview-panel{overflow:hidden}.kba-preview-stage{width:min(100%,520px);max-height:min(68dvh,760px)}.kba-preview-stage[data-empty=true]{min-height:360px}.kba-preview-empty{gap:var(--nui-space-4);padding:var(--nui-space-6);background:linear-gradient(90deg, color-mix(in srgb, var(--nui-color-decorative-1) 26%, var(--nui-color-surface)) 0 50%, color-mix(in srgb, var(--nui-color-decorative-2) 26%, var(--nui-color-surface)) 50% 100%);text-align:center;place-content:center;justify-items:center;display:grid;position:absolute;inset:0}.kba-preview-empty p{max-width:28ch;font-weight:var(--nui-font-weight-bold);line-height:var(--nui-line-height-body);margin:0}.kba-preview-empty__mark{border:var(--kba-rule);background:var(--nui-color-surface);width:80px;height:56px;box-shadow:var(--nui-shadow-block);grid-template-columns:1fr 1fr;display:grid}.kba-preview-empty__mark i:first-child{border-inline-end:var(--nui-border-width) solid var(--nui-color-border-strong);background:var(--nui-color-decorative-1)}.kba-preview-empty__mark i:last-child{background:var(--nui-color-decorative-2)}.kba-playback-controls{align-items:stretch}.kba-preview-jump{grid-template-columns:repeat(2,minmax(0,1fr))}.kba-setting-summary{border-top:var(--nui-border-width) solid var(--nui-color-border);grid-template-columns:repeat(2,minmax(0,1fr));margin:0;display:grid}.kba-setting-summary div{gap:var(--nui-space-1);padding:var(--nui-space-3);border-bottom:var(--nui-border-width) solid var(--nui-color-border);display:grid}.kba-setting-summary div:nth-child(odd){border-inline-end:var(--nui-border-width) solid var(--nui-color-border)}.kba-setting-summary dt{color:var(--nui-color-text-muted);font-size:var(--nui-font-size-sm)}.kba-setting-summary dd{font-family:var(--nui-font-mono);font-weight:var(--nui-font-weight-bold);margin:0}.kba-format-switch,.kba-resolution-options{gap:var(--nui-space-3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.kba-format-switch label,.kba-resolution-options label{gap:var(--nui-space-1);min-width:0;min-height:92px;padding:var(--nui-space-3) var(--nui-space-3) var(--nui-space-3) var(--nui-space-10);border:var(--nui-border-width) solid var(--nui-color-control-border);background:var(--nui-color-surface);cursor:pointer;align-content:center;display:grid;position:relative}.kba-format-switch label[data-selected=true],.kba-resolution-options label[data-selected=true]{border-color:var(--nui-color-border-strong);background:var(--nui-color-selected);box-shadow:var(--nui-shadow-block-sm)}.kba-format-switch input,.kba-resolution-options input{width:22px;height:22px;inset:50% auto auto var(--nui-space-3);accent-color:var(--nui-color-accent);margin:0;position:absolute;translate:0 -50%}.kba-format-switch span,.kba-resolution-options span{overflow-wrap:anywhere;color:var(--nui-color-text-muted);font-size:var(--nui-font-size-sm)}.kba-resolution-note{margin:var(--nui-space-5) 0 0}.kba-output-summary{padding:var(--nui-space-3) var(--nui-space-4);border-inline-start:6px solid var(--nui-color-accent);background:var(--nui-color-surface-muted);line-height:var(--nui-line-height-body);margin:0}.kba-output-summary strong{font-family:var(--nui-font-mono)}.kba-export-actions{gap:var(--nui-space-3);grid-template-columns:minmax(0,1.4fr) minmax(180px,.8fr);align-items:stretch;display:grid}.kba-save-button,.kba-share-button{white-space:nowrap;min-height:58px}.kba-share-hint{margin:0}.kba-progress{gap:var(--nui-space-3);padding:var(--nui-space-4);border:var(--kba-rule);background:var(--nui-color-surface-raised);box-shadow:var(--nui-shadow-block-sm);display:grid}.kba-progress__heading{justify-content:space-between;gap:var(--nui-space-4);display:flex}.kba-progress__heading span{font-family:var(--nui-font-mono);font-weight:var(--nui-font-weight-bold)}.kba-progress progress{border:var(--nui-border-width) solid var(--nui-color-border-strong);background:var(--nui-color-surface-muted);width:100%;height:20px;accent-color:var(--nui-color-accent)}.kba-progress p{color:var(--nui-color-text-muted);margin:0}.kba-complete{gap:var(--nui-space-4);padding:var(--nui-space-5);border:var(--kba-rule);background:var(--nui-color-selected);color:var(--nui-color-on-selected);box-shadow:var(--nui-shadow-block);display:grid}.kba-complete>strong{font-family:var(--nui-font-display);font-size:var(--nui-font-size-xl)}.kba-complete dl{gap:var(--nui-space-3);grid-template-columns:repeat(2,minmax(0,1fr));margin:0;display:grid}.kba-complete dl div{gap:var(--nui-space-1);display:grid}.kba-complete dt{font-size:var(--nui-font-size-sm)}.kba-complete dd{font-family:var(--nui-font-mono);font-weight:var(--nui-font-weight-bold);margin:0}.kba-share-copy{resize:vertical;min-height:148px}.kba-info-section{border-top:var(--kba-rule)}.kba-info-section .nui-section-heading{max-width:720px}.kba-info-section .nui-section-heading p{color:var(--nui-color-text-muted);line-height:var(--nui-line-height-body)}.kba-how-to{background:var(--nui-color-surface)}.kba-how-to__steps{border:var(--kba-rule);counter-reset:kba-howto;box-shadow:var(--nui-shadow-panel);grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}.kba-how-to__step{gap:var(--nui-space-3);min-height:88px;padding:var(--nui-space-4);counter-increment:kba-howto;grid-template-columns:50px minmax(0,1fr);align-items:center;display:grid;position:relative}.kba-how-to__step:before{border:var(--nui-border-width) solid var(--nui-color-border-strong);background:var(--nui-color-decorative-2);content:counter(kba-howto, decimal-leading-zero);width:44px;height:44px;font-family:var(--nui-font-mono);font-weight:var(--nui-font-weight-bold);place-items:center;display:grid}.kba-how-to__step:nth-child(2n){border-inline-start:var(--nui-border-width) solid var(--nui-color-border)}.kba-how-to__step:not(:nth-last-child(-n+2)){border-bottom:var(--nui-border-width) solid var(--nui-color-border)}.kba-rights-note{padding:var(--nui-space-4);border-inline-start:6px solid var(--nui-color-accent);background:var(--nui-color-surface-muted);line-height:var(--nui-line-height-body);margin:0}.kba-features{background:var(--nui-color-canvas)}.kba-feature-list{border:var(--kba-rule);box-shadow:var(--nui-shadow-panel);grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none;display:grid}.kba-feature-list__item{border-bottom:var(--nui-border-width) solid var(--nui-color-border);background:var(--nui-color-surface);min-width:0;padding:clamp(22px,4vw,42px)}.kba-feature-list__item:nth-child(2n){border-inline-start:var(--kba-rule)}.kba-feature-list__item:first-child,.kba-feature-list__item:nth-child(4){background:color-mix(in srgb, var(--nui-color-decorative-2) 24%, var(--nui-color-surface))}.kba-feature-list__item:nth-child(3),.kba-feature-list__item:nth-child(6){background:color-mix(in srgb, var(--nui-color-decorative-1) 18%, var(--nui-color-surface))}.kba-feature-list__item:nth-last-child(-n+2){border-bottom:0}.kba-feature-list__item h3,.kba-feature-list__item p{margin:0}.kba-feature-list__item p{color:var(--nui-color-text-muted);line-height:var(--nui-line-height-body);margin-block-start:var(--nui-space-3)}.kba-faq{background:var(--nui-color-surface)}.kba-faq__list{border:var(--kba-rule);box-shadow:var(--nui-shadow-panel)}.kba-faq__item+.kba-faq__item{border-top:var(--nui-border-width) solid var(--nui-color-border)}.kba-faq__item summary{min-height:58px;padding:var(--nui-space-4) var(--nui-space-12) var(--nui-space-4) var(--nui-space-4);background:var(--nui-color-surface);font-weight:var(--nui-font-weight-bold);cursor:pointer;line-height:1.5}.kba-faq__item[open] summary{background:var(--nui-color-selected);color:var(--nui-color-on-selected)}.kba-faq__answer{padding:var(--nui-space-4) var(--nui-space-6) var(--nui-space-6);background:var(--nui-color-surface-raised)}.kba-faq__answer p{line-height:var(--nui-line-height-body);margin:0}.kba-related-tools{background:var(--nui-color-canvas)}.kba-related-tools__grid{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.kba-related-tool{min-width:0}.kba-related-tool:first-child{background:color-mix(in srgb, var(--nui-color-decorative-3) 16%, var(--nui-color-surface))}.kba-related-tool:nth-child(2){background:color-mix(in srgb, var(--nui-color-decorative-2) 16%, var(--nui-color-surface))}.kba-related-tool p{color:var(--nui-color-text-muted);line-height:var(--nui-line-height-body)}.kba-footer{border-top:0;position:relative}.kba-footer:before{background:linear-gradient(90deg, var(--nui-color-accent) 0 30%, var(--nui-color-decorative-1) 30% 52%, var(--nui-color-decorative-2) 52% 76%, var(--nui-color-decorative-4) 76% 100%);content:"";height:12px;display:block}.kba-footer__inner{width:min(calc(100% - var(--nui-layout-gutter) * 2), var(--nui-layout-wide-max));margin-inline:auto}.kba-footer__copy{max-width:760px}.kba-footer__copy p{max-width:76ch}.kba-footer__links{justify-content:flex-end;max-width:620px}.kba-footer__links>a{min-width:72px;padding:0 var(--nui-space-4);border:var(--nui-border-width) solid var(--nui-color-footer-heading);background:var(--nui-color-decorative-1);color:var(--nui-color-text);font-family:var(--nui-font-action);font-size:var(--nui-font-size-sm);font-weight:var(--nui-font-weight-heavy);text-align:center;white-space:nowrap;box-shadow:5px 5px 0 var(--nui-color-decorative-2);transition:transform var(--nui-motion-fast) var(--nui-ease-standard), background-color var(--nui-motion-fast) var(--nui-ease-standard), box-shadow var(--nui-motion-fast) var(--nui-ease-standard);justify-content:center;line-height:1.2;text-decoration:none}.kba-footer__links>a:active{box-shadow:3px 3px 0 var(--nui-color-decorative-4);transform:translate(2px,2px)}@media (hover:hover){.kba-footer__links>a:hover{background:var(--nui-color-decorative-3);box-shadow:6px 6px 0 var(--nui-color-decorative-4);transform:translate(-1px,-1px)}}@media (width<=980px){.kba-footer__inner{flex-direction:column;align-items:flex-start}.kba-footer__links{justify-content:flex-start;width:100%;max-width:none}}.kba-fallback{background:var(--nui-color-canvas,#fff);min-height:100dvh;color:var(--nui-color-text,#202026);grid-template-rows:auto 1fr;display:grid}.kba-fallback header,.kba-fallback main{padding:24px}.kba-fallback header{border-bottom:3px solid}.kba-fallback main{max-width:760px}@media (hover:hover){.kba-tabs__tab:hover{background:var(--nui-color-decorative-4);box-shadow:inset 0 -5px 0 var(--nui-color-decorative-2)}.kba-tabs__tab[aria-selected=true]:hover{background:var(--nui-color-selected)}.kba-choice-button:not(:disabled):hover,.kba-effect-option:not(:disabled):hover{border-color:var(--nui-color-border-strong);transform:translateY(-2px)}.kba-segmented button:not(:disabled):hover{background:var(--nui-color-decorative-4)}.kba-segmented button[aria-pressed=true]:not(:disabled):hover{background:var(--nui-color-selected)}.kba-faq__item summary:hover{background:var(--nui-color-decorative-4)}.kba-faq__item[open] summary:hover{background:var(--nui-color-selected)}}@media (width>=1080px){.kba-tool-grid{grid-template-columns:minmax(0,.94fr) minmax(410px,1.06fr);grid-template-areas:"source preview""ratio preview""alignment preview""transition preview""export preview"}.kba-tool-grid[data-mode=simple]{grid-template-areas:"source preview""ratio preview""transition preview""export preview"}.kba-grid-preview{top:calc(var(--nui-layout-header-height) + var(--nui-space-4));position:sticky}}@media (width<=1079px){.kba-preview-stage,.kba-alignment-stage{max-height:680px}}@media (width<=767px){.kba-intro__inner{gap:var(--nui-space-5);grid-template-columns:1fr;min-height:auto}.kba-intro-split{inset-inline-end:-64px}.kba-dropzones{grid-template-columns:1fr}.kba-swap-button{flex-direction:row;width:100%;min-height:50px}.kba-ratio-options{grid-template-columns:1fr}.kba-choice-button{grid-template-columns:auto minmax(0,1fr);align-items:center;min-height:94px}.kba-choice-button>strong{grid-row:1/span 3;margin-inline-end:var(--nui-space-3)}.kba-choice-button>b{margin-block-start:0}.kba-guide-controls,.kba-settings-grid,.kba-effect-grid{grid-template-columns:1fr}.kba-alignment-stage,.kba-preview-stage{width:min(100%,500px);max-height:68dvh}.kba-preview-stage[data-empty=true]{min-height:320px}.kba-related-tools__grid,.kba-feature-list{grid-template-columns:1fr}.kba-footer__links{justify-content:flex-start}.kba-feature-list__item,.kba-feature-list__item:nth-child(2n){border-inline-start:0;border-bottom:var(--nui-border-width) solid var(--nui-color-border)}.kba-feature-list__item:last-child{border-bottom:0}}@media (width<=639px){.kba-workspace{padding-block-start:var(--nui-space-6)}.kba-step-heading[data-numbered=true]{grid-template-columns:42px minmax(0,1fr)}.kba-step-number{width:40px;height:40px}.kba-source-card,.kba-ratio-panel,.kba-alignment-panel,.kba-transition-panel,.kba-preview-panel,.kba-export-panel,.kba-advanced-settings{padding:var(--nui-space-4)}.kba-dropzone{min-height:240px}.kba-format-switch,.kba-resolution-options,.kba-export-actions{grid-template-columns:1fr}.kba-playback-controls,.kba-alignment-actions,.kba-complete .nui-cluster{grid-template-columns:1fr;display:grid}.kba-playback-controls .nui-button,.kba-alignment-actions .nui-button,.kba-complete .nui-button,.kba-complete .nui-cluster a{width:100%}.kba-how-to__steps{grid-template-columns:1fr}.kba-how-to__step,.kba-how-to__step:nth-child(2n){border-inline-start:0;border-bottom:var(--nui-border-width) solid var(--nui-color-border)}.kba-how-to__step:last-child{border-bottom:0}.kba-setting-summary,.kba-complete dl{grid-template-columns:1fr}.kba-setting-summary div:nth-child(odd){border-inline-end:0}.kba-notice{grid-template-columns:1fr;display:grid}.kba-notice .nui-button{width:100%}}@media (width<=479px){.kba-brand-name{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.kba-back-link{padding-inline:var(--nui-space-2);font-size:var(--nui-font-size-sm)}.kba-title{font-size:clamp(1.95rem,10vw,2.7rem)}.kba-lead{font-size:var(--nui-font-size-base)}.kba-tabs__tab{padding-inline:var(--nui-space-2);font-size:var(--nui-font-size-sm)}.kba-effect-option{grid-template-columns:70px minmax(0,1fr)}.kba-effect-diagram{width:70px;height:58px}.kba-color-control{grid-template-columns:58px minmax(0,1fr)}.kba-color-control input[type=color]{width:58px}.kba-save-button,.kba-share-button{width:100%;padding-inline:var(--nui-space-2);white-space:normal}.kba-output-summary,.kba-resolution-options span,.kba-format-switch span{overflow-wrap:anywhere}.kba-alignment-stage,.kba-preview-stage{max-height:62dvh}.kba-preview-stage[data-empty=true]{min-height:280px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (forced-colors:active){.kba-switch-mark,.kba-choice-button,.kba-effect-option,.kba-dropzone,.kba-alignment-stage,.kba-preview-stage,.kba-how-to__steps,.kba-feature-list,.kba-faq__list,.kba-footer__links>a{box-shadow:none;border-color:canvastext}.kba-choice-button[aria-pressed=true],.kba-effect-option[aria-pressed=true],.kba-segmented button[aria-pressed=true],.kba-tabs__tab[aria-selected=true]{outline-offset:-6px;outline:4px solid highlight}.kba-guide span,.kba-guide--safe{box-shadow:none;background:canvas;border-color:canvastext}}