:root{--violet:#4832d9;--dusk:#4d508c;--lilac:#c4c7f2;--teal:#41b3bf;--gold:#bfb47a;--night:#12132b;--hand:var(--font-hand),cursive;--mono:var(--font-mono),monospace}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--lilac);font-family:var(--mono);font-size:15px;line-height:1.6;background-color:var(--night);background-image:radial-gradient(60rem 40rem at 85% -10%,color-mix(in srgb,var(--violet) 45%,transparent),transparent 70%),radial-gradient(40rem 30rem at -10% 110%,color-mix(in srgb,var(--teal) 22%,transparent),transparent 70%),linear-gradient(color-mix(in srgb,var(--dusk) 18%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--dusk) 18%,transparent) 1px,transparent 1px);background-size:auto,auto,28px 28px,28px 28px;background-attachment:fixed}main{max-width:1200px;margin:0 auto;padding:32px 16px 64px}a{color:var(--teal)}h1{font-family:var(--hand);font-weight:700;color:var(--gold);line-height:.9;margin:0}.hero{display:grid;grid-template-columns:minmax(140px,260px) 1fr;align-items:center;grid-gap:24px;gap:24px;margin-bottom:56px}.logo{width:100%;height:auto;animation:wobble 6s ease-in-out infinite}.hero h1{font-size:clamp(3rem,9vw,6.5rem);animation:rise .8s both}.hero h1 em{font-style:normal;color:var(--teal);display:inline-block;transform:rotate(-4deg);-webkit-text-decoration:underline wavy var(--violet) 3px;text-decoration:underline wavy var(--violet) 3px;text-underline-offset:10px}.tag{margin:18px 0 24px;max-width:34ch;animation:rise .8s .15s both}.btn{display:inline-block;font:700 1.35rem var(--hand);color:var(--night);background:var(--gold);border:0;padding:8px 20px 6px;border-radius:255px 15px 225px 15px/15px 225px 15px 255px;box-shadow:4px 4px 0 var(--violet);text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s;animation:rise .8s .3s both}.btn:hover:not(:disabled){transform:translate(-2px,-2px) rotate(-1deg);box-shadow:6px 6px 0 var(--teal)}.btn:disabled{opacity:.6;cursor:wait}.wall{columns:260px 3;column-gap:28px}.piece{--tilt:-1.5deg;position:relative;display:block;page-break-inside:avoid;break-inside:avoid;margin:0 0 32px;padding:10px;background:var(--lilac);transform:rotate(var(--tilt));box-shadow:0 14px 30px -12px #000a;transition:transform .25s;animation:hang .6s calc(var(--i) * 70ms + .4s) both}.piece:nth-child(2n){--tilt:1.2deg}.piece:nth-child(3n){--tilt:-0.4deg}.piece:before{content:"";position:absolute;top:-12px;left:50%;width:84px;height:24px;translate:-50% 0;rotate:3deg;background:color-mix(in srgb,var(--teal) 55%,transparent)}.piece:nth-child(2n):before{background:color-mix(in srgb,var(--gold) 60%,transparent);rotate:-4deg}.piece:focus-visible,.piece:hover{transform:rotate(0) scale(1.02);z-index:1}.piece img{display:block;width:100%;height:auto}.empty{font:1.8rem var(--hand);text-align:center;padding:80px 0}.empty,footer{color:var(--dusk)}footer{display:flex;justify-content:space-between;margin-top:48px;padding-top:16px;border-top:1px dashed var(--dusk);font-size:.8rem}.upload{max-width:520px}.upload h1{font-size:4rem;margin:24px 0}.back{font-size:.85rem}form{grid-gap:20px;gap:20px}form,label{display:grid}label{grid-gap:6px;gap:6px;font:700 1.3rem var(--hand);color:var(--gold)}small{font:.75rem var(--mono);color:var(--dusk)}input{font:inherit;font-family:var(--mono);font-size:.9rem;color:var(--lilac);background:color-mix(in srgb,var(--night) 70%,var(--dusk));border:2px dashed var(--dusk);border-radius:8px;padding:12px}input:focus{outline:none;border-color:var(--teal);border-style:solid}input::-webkit-file-upload-button{font:700 1rem var(--hand);background:var(--teal);color:var(--night);border:0;border-radius:6px;padding:4px 12px;margin-right:12px;cursor:pointer}input::file-selector-button{font:700 1rem var(--hand);background:var(--teal);color:var(--night);border:0;border-radius:6px;padding:4px 12px;margin-right:12px;cursor:pointer}form .btn{justify-self:start}.status{font:1.4rem var(--hand);color:var(--teal);margin:0}@keyframes rise{0%{opacity:0;transform:translateY(16px)}}@keyframes hang{0%{opacity:0;transform:translateY(-30px) rotate(calc(var(--tilt) * -4))}}@keyframes wobble{50%{transform:rotate(-2deg) translateY(-4px)}}@media (prefers-reduced-motion:reduce){*,:before{animation:none!important;transition:none!important}}@media (max-width:560px){.hero{grid-template-columns:1fr;text-align:center}.logo{max-width:200px;margin:0 auto}.tag{margin-inline:auto}}.upload h2{font:700 2rem var(--hand);color:var(--gold);margin:32px 0 0}.thumbs{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));grid-gap:16px;gap:16px}.thumbs li{display:grid;grid-gap:6px;gap:6px}.thumbs img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--lilac);padding:4px}.thumbs button{font:700 1rem var(--hand);color:var(--lilac);background:none;border:2px dashed var(--dusk);border-radius:6px;cursor:pointer}.thumbs button:hover:not(:disabled){color:var(--night);background:var(--teal);border-color:var(--teal)}.hero h1 .f{font-size:.35em;color:var(--teal);vertical-align:.9em;margin-right:.04em}.who{display:block;font-size:.8rem;color:var(--dusk);margin-bottom:20px}.who button{font:inherit;color:var(--teal);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}