@font-face{font-family:Space Mono;font-style:normal;font-display:swap;font-weight:400;src:url(../media/space-mono-latin-400-normal.37_1qewfwlumh.woff2)format("woff2"),url(../media/space-mono-latin-400-normal.1hv-m834mchxi.woff)format("woff")}
@font-face{font-family:Space Mono;font-style:normal;font-display:swap;font-weight:700;src:url(../media/space-mono-latin-700-normal.3dmnla43cklex.woff2)format("woff2"),url(../media/space-mono-latin-700-normal.3uu61z6b0_qze.woff)format("woff")}
@font-face{font-family:Work Sans;font-style:normal;font-display:swap;font-weight:600;src:url(../media/work-sans-latin-600-normal.0assh-lmoph3n.woff2)format("woff2"),url(../media/work-sans-latin-600-normal.20ff7rcq7dkke.woff)format("woff")}
@font-face{font-family:Work Sans;font-style:normal;font-display:swap;font-weight:800;src:url(../media/work-sans-latin-800-normal.1x1p07az-uht_.woff2)format("woff2"),url(../media/work-sans-latin-800-normal.01vtm5bbjdnqn.woff)format("woff")}
:root{--primary:#ff6bb0;--secondary:#00c2ff;--accent:#ffde59;--black:#000;--off-white:#f5f5f5;--dark-gray:#222;--light-gray:#d1d1d1;--border:4px solid var(--black);--shadow:8px 8px 0 #000000e6}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{background:var(--off-white);color:var(--black);letter-spacing:-.3px;max-width:920px;margin:0 auto;padding:10px 20px 40px 12px;font-family:Space Mono,monospace;line-height:1.5}h1,h2,h3,button,.button,summary{font-family:Work Sans,sans-serif}h1,h2,h3{text-transform:uppercase;letter-spacing:-1px;font-weight:800;line-height:1.15}h1{border-bottom:var(--border);text-align:center;margin:.65em 0 .3em;padding-bottom:.35em;font-size:2.8rem}h2{margin:0 0 .8em;font-size:1.8rem}h3{letter-spacing:-.5px;margin:0 0 .7em;font-size:1.15rem}p{margin:0 0 1em}a{color:#812077;text-underline-offset:3px}a:hover{color:#000}button,input,a,summary{-webkit-tap-highlight-color:transparent}:focus-visible{outline-offset:5px;outline:3px solid #812077}.site-header{text-align:center;margin-bottom:24px}.tagline{margin:0 0 .3em;font-family:Work Sans,sans-serif;font-size:1.2rem;font-weight:600}.intro{margin:0;font-size:.82rem}.container{border:var(--border);box-shadow:var(--shadow);background:var(--off-white);padding:30px;position:relative}.converter{flex-direction:column;gap:20px;display:flex}.neo-deco{background:var(--accent);border:var(--border);z-index:-1;pointer-events:none;position:absolute}.deco-square{width:40px;height:40px;top:-20px;right:-12px}.deco-circle{border-radius:50%;width:60px;height:60px;bottom:-22px;left:-12px}.upload-label{text-transform:uppercase;margin-bottom:5px;font-weight:700;display:block}input[type=file]{border:var(--border);width:100%;min-width:0;font:inherit;cursor:pointer;background:#00c2ff4d;padding:12px}input[type=file]::file-selector-button{background:var(--off-white);color:#000;cursor:pointer;font:inherit;border:2px solid #000;margin-right:10px;padding:5px 8px;font-size:.82em}input[type=file]:hover,.is-dragging input[type=file]{background:var(--accent)}.upload-help{justify-content:space-between;align-items:baseline;gap:8px;margin-top:8px;display:flex}.upload-help p{margin:0;font-size:.72rem}.text-button{all:unset;color:#812077;cursor:pointer;text-underline-offset:3px;white-space:nowrap;min-height:32px;font-size:.75rem;font-weight:700;text-decoration:underline}.text-button:hover{color:#000}.text-button:focus-visible{outline-offset:3px;outline:3px solid #812077}.main-layout{align-items:stretch;gap:30px;margin-bottom:10px;display:flex}.controls-column{flex-direction:column;flex:0 0 300px;gap:18px;width:300px;min-width:0;display:flex}.preview-column{flex-direction:column;flex:1;min-width:0;display:flex}.param-grid{border:var(--border);background:var(--light-gray);width:100%;box-shadow:var(--shadow);gap:10px;padding:15px;display:grid}.input-group{grid-template-columns:1fr 1fr;align-items:center;gap:5px;min-width:0;display:grid}.input-group label{text-transform:uppercase;font-size:.85rem;font-weight:700}.input-group input{border:var(--border);background:var(--off-white);border-radius:0;width:100%;min-width:0;padding:8px;font:700 1.1rem Space Mono,monospace}.input-group input:focus{background:var(--accent)}.crop-label{background:var(--accent);text-transform:uppercase;text-align:center;border:2px solid #000;grid-column:1/-1;margin:3px 0 5px;padding:5px;font-size:.76rem;font-weight:700}button:not(.text-button),.button{background:var(--primary);border:var(--border);color:#000;text-align:center;text-transform:uppercase;cursor:pointer;box-shadow:var(--shadow);padding:14px 18px;font-size:1.1rem;font-weight:800;line-height:1.3;text-decoration:none;transition:transform .15s,background-color .15s;display:inline-block}button:not(.text-button):hover,.button:hover{background:var(--accent);transform:translate(-3px,-3px)}button:not(.text-button):active,.button:active{transform:translate(2px,2px);box-shadow:4px 4px #000}button:disabled,button:disabled:hover{background:var(--light-gray);color:var(--dark-gray);cursor:not-allowed;transform:none;box-shadow:4px 4px #0000004d}.generate-button{align-self:center;min-width:220px;margin-top:4px}.controls-column .small-note{text-align:center;margin:0}.small-note{font-size:.72rem;line-height:1.5}button.cancel-button{background:var(--off-white);padding:10px;font-size:.9rem}.status{background:var(--accent);border:var(--border);text-align:center;overflow-wrap:anywhere;margin:0;padding:12px;font-size:.78rem;font-weight:700;box-shadow:5px 5px #000}.status-error,.validation-error{background:#ffdbe9}.validation-error{border:3px solid #000;margin:0;padding:12px;font-size:.78rem}progress{appearance:none;background:var(--off-white);width:100%;height:22px;accent-color:var(--primary);border:3px solid #000}progress::-webkit-progress-bar{background:var(--off-white)}progress::-webkit-progress-value{background:var(--primary)}progress::-moz-progress-bar{background:var(--primary)}.preview-panel,.result-panel{border:var(--border);box-shadow:var(--shadow);background:var(--light-gray);min-width:0;padding:24px}.preview-panel{flex:1}.section-header{border:var(--border);box-shadow:var(--shadow);background:var(--secondary);justify-content:center;align-items:center;width:100%;margin:0 0 24px;padding:10px 14px;display:flex}.section-header h2{text-align:center;margin:0;font-size:1.45rem}.preview-wrapper{background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,#0000 25%),linear-gradient(-45deg,#ddd 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ddd 75%),linear-gradient(-45deg,#0000 75%,#ddd 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;width:fit-content;max-width:100%;margin:15px auto 0;display:block;position:relative}.source-image{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:400px;display:block}.grid-overlay{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.source-meta{overflow-wrap:anywhere;margin:18px 0 10px;font-size:.68rem}.frame-meta{border-top:2px solid #000;margin:0;padding-top:10px;font-size:.73rem;line-height:1.8}.preview-placeholder{text-align:center;place-content:center;min-height:260px;font-size:.85rem;display:grid}.result-panel{text-align:center;margin-top:10px}.result-panel p{margin:16px 0;font-size:.8rem}.gif-output{object-fit:contain;border:var(--border);width:auto;max-width:100%;height:auto;max-height:400px;box-shadow:var(--shadow);image-rendering:pixelated;margin:0 auto;display:block}.download-button{background:var(--secondary);margin:5px 0 8px}.frames-panel{margin-top:14px}.frame-list{flex-wrap:wrap;justify-content:center;gap:15px;margin:0;padding:0;list-style:none;display:flex}.frame-list li{flex-direction:column;align-items:center;gap:6px;font-size:.7rem;font-weight:700;display:flex}.frame-list img{max-width:96px;max-height:96px;image-rendering:pixelated;border:3px solid #000;transition:transform .2s,box-shadow .2s;display:block;box-shadow:4px 4px #000}.frame-list img:hover{transform:translate(-4px,-4px);box-shadow:8px 8px #000}.site-content{margin-top:62px}.content-section{margin:0 0 42px}.content-section p,.steps{font-size:.86rem;line-height:1.8}.example-comparison{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:24px;display:flex}.example-comparison figure{text-align:center;flex:260px;width:100%;min-width:0;max-width:400px;margin:0}.example-comparison img{object-fit:contain;width:100%;height:auto;margin:0 auto;display:block}.example-comparison figcaption{padding-top:12px;font-size:.78rem;line-height:1.7}.steps{padding-left:26px}.steps li{margin-bottom:15px;padding-left:5px}.steps li::marker{font-weight:700}.guide-grid{grid-template-columns:1fr 1fr;gap:20px;display:grid}.guide-card{background:#fff;border:3px solid #000;padding:20px;box-shadow:5px 5px #000}.guide-card:nth-child(2),.guide-card:nth-child(3){background:#ffed9a}.guide-card p{margin:0;font-size:.8rem}.faq-list{gap:12px;display:grid}details{background:#fff;border:3px solid #000}summary{cursor:pointer;padding:16px 18px;font-size:1.05rem;font-weight:600;line-height:1.4}summary:hover,details[open] summary{background:#ffd5e9}details p{border-top:2px solid #000;margin:0;padding:18px}.privacy-note{border:var(--border);background:var(--accent);box-shadow:var(--shadow);padding:26px}.privacy-note p:last-child{margin:0}.site-footer{border-top:var(--border);padding:25px 0 0;font-size:.72rem;line-height:1.8}.site-footer p:last-child{margin:0}.skip-link{background:var(--accent);z-index:10;border:3px solid #000;padding:10px;position:absolute;top:-100px;left:12px}.skip-link:focus{top:10px}@media (max-width:800px){.main-layout{flex-direction:column;gap:28px}.controls-column{flex-basis:auto;width:100%}.source-image{max-height:400px}.param-grid{padding:15px}}@media (max-width:500px){body{padding:10px 20px 30px 12px}h1{font-size:2.1rem}h2{font-size:1.55rem}.tagline{font-size:1rem}.intro{font-size:.68rem}.container{padding:18px 15px}.upload-help{flex-wrap:wrap;gap:0 10px}input[type=file]{padding:10px 6px;font-size:.7rem}input[type=file]::file-selector-button{margin-right:5px}.upload-label{font-size:.9rem}.input-group label{font-size:.76rem}.input-group input{font-size:1rem}.crop-label{font-size:.68rem}.preview-panel,.result-panel{padding:16px}.section-header{padding:10px 8px}.section-header h2{font-size:1.2rem}.guide-grid{grid-template-columns:1fr}.guide-card:nth-child(3){background:#fff}.guide-card:nth-child(4){background:#ffed9a}.privacy-note{padding:20px}.content-section p,.steps{font-size:.8rem}.frame-list img{max-width:72px;max-height:72px}summary{padding:14px 12px;font-size:1rem}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:0s!important}}