:root{--color-ink:#111116;--color-cream:#fff8ec;--color-orange:#f39c12;--color-orange-rgb:243,156,18;--color-orange-light:#f9b13a;--color-cyan:#2ee6d6}html{overflow:hidden}body{background-color:#000;width:100%;height:100%}#tap-to-play{display:none;position:fixed;border:1.5px solid rgba(var(--color-orange-rgb),.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 32px #00000073,0 0 24px rgba(var(--color-orange-rgb),.18);animation:pulse-glow 2.4s ease-in-out infinite;cursor:pointer;opacity:1;color:var(--color-cream);text-align:center;text-transform:uppercase;letter-spacing:.03em;background:#11111699;border-radius:999px;padding:22px 44px;transition:opacity .4s,transform .2s,box-shadow .2s,background .25s,color .25s,border-color .25s;font-family:sans-serif;font-size:4em;font-weight:800;top:50%;left:50%;transform:translate(-50%,-50%)}#tap-to-play p{margin:0}#tap-to-play .spark{display:inline-block;animation:twinkle 2.4s ease-in-out infinite}#tap-to-play .spark:last-child{animation-delay:1.2s}#tap-to-play.fade-out{opacity:0;pointer-events:none}#tap-to-play:hover{animation-play-state:paused}#tap-to-play:active{animation-play-state:paused}#tap-to-play:hover{background:linear-gradient(135deg,var(--color-orange-light),var(--color-orange));color:var(--color-ink);border-color:rgba(var(--color-orange-rgb),.9);box-shadow:0 16px 40px #00000080,0 0 36px rgba(var(--color-orange-rgb),.4);transform:translate(-50%,-50%)scale(1.03)}#tap-to-play:active{filter:brightness(.95);transform:translate(-50%,-50%)scale(.97);box-shadow:0 6px 16px #0006}#tap-to-play:focus-visible{outline:2px solid var(--color-orange);outline-offset:4px}@keyframes pulse-glow{0%,to{box-shadow:0 12px 32px #00000073,0 0 24px rgba(var(--color-orange-rgb),.18)}50%{box-shadow:0 12px 32px #00000073,0 0 40px rgba(var(--color-orange-rgb),.4)}}@keyframes twinkle{0%,to{opacity:.5;transform:scale(.85)rotate(0)}50%{opacity:1;transform:scale(1.2)rotate(180deg)}}video#video{position:fixed;z-index:-100;width:auto;min-width:100%;height:auto;min-height:100%;top:50%;left:50%;transform:translate(-50%)translateY(-50%)}div#pictures-container{position:fixed;pointer-events:none;--travel-scale:clamp(.25,calc(100vw/1400px),1);width:100%;height:100%;top:0;left:0}div#pictures-container img{position:absolute;max-width:calc(30%/var(--travel-scale));max-height:calc(30%/var(--travel-scale));scale:var(--travel-scale);margin:auto;inset:0}div#pictures-container img.hide{display:none}#upload-error{display:flex;position:fixed;z-index:3;border:3px solid var(--color-ink);box-shadow:4px 4px 0 var(--color-ink);background:#7a2a2a;border-radius:10px;align-items: center;gap:12px;max-width:min(90vw,480px);padding:12px 16px;top:20px;left:50%;transform:translate(-50%)}#upload-error[hidden]{display:none}#upload-error p{color:var(--color-cream);margin:0;font-family:sans-serif;font-size:14px;font-weight:700}#upload-error button{color:var(--color-cream);cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:0;font-size:16px;font-weight:700;line-height:1}.site-title{position:fixed;z-index:2;display:flex;align-items: center;gap:6px;max-width:280px;top:20px;right:20px}.site-logo{border:2px solid var(--color-ink);box-shadow:3px 3px 0 var(--color-ink);border-radius:8px;flex-shrink:0;width:40px;height:40px}.site-title h1{color:var(--color-cream);text-align:right;text-transform:uppercase;letter-spacing:.02em;text-shadow:2px 2px 0 var(--color-ink),0 0 12px #2ee6d666;margin:0;font-family:sans-serif;font-size:18px;font-weight:800;line-height:1.15}.uploader{position:fixed;z-index:2;display:flex;flex-direction:column;align-items: flex-start;max-width:260px;top:20px;left:20px}.uploader-card{display:flex;border:3px solid var(--color-ink);box-shadow:4px 4px 0 var(--color-ink);background:#1111168c;border-radius:10px;flex-direction:column;align-items: flex-start;gap:10px;padding:14px 16px}.tagline{color:var(--color-cream);text-transform:uppercase;letter-spacing:.02em;text-shadow:0 1px 2px #00000080;margin:0;font-family:sans-serif;font-size:15px;font-weight:800}label{display:inline-block;color:var(--color-cream);text-align:center;text-shadow:0 1px 2px #00000040;background:var(--color-orange);border:3px solid var(--color-ink);cursor:pointer;box-shadow:4px 4px 0 var(--color-ink);border-radius:6px;padding:12px 20px;transition:transform .15s,box-shadow .15s,background .2s;font-family:sans-serif;font-size:18px;font-weight:700}label:hover{box-shadow:6px 6px 0 var(--color-ink);background:#f4b550;transform:translate(-2px,-2px)}label:active{box-shadow:0 0 0 var(--color-ink);transform:translate(4px,4px)}input#file-upload{opacity:0;position:absolute;z-index:-1}input#file-upload:focus-visible+label{outline:3px solid var(--color-cyan);outline-offset:4px}dialog#preview-dialog{border:3px solid var(--color-ink);background:0 0;border-radius:10px;padding:0}dialog#preview-dialog::backdrop{background:#111116b3}.preview-card{display:flex;box-shadow:4px 4px 0 var(--color-ink);background:#111116d9;border-radius:10px;flex-direction:column;align-items: center;gap:10px;max-width:min(95vw,900px);padding:14px 16px}#crop-step,#edit-step{display:flex;flex-direction:column;align-items: center;gap:8px}:is(#crop-step,#edit-step)[hidden]{display:none}:is(#crop-step,#edit-step)>.tagline{color:var(--color-orange-light);font-size:20px}#crop-area{position:relative;width:min(85vw,800px);height:70vh}#crop-area cropper-canvas{width:100%;height:100%}#preview-img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none;max-width:100%;max-height:100%}#edit-canvas{display:block;touch-action:none;cursor:crosshair;border:2px solid var(--color-ink);background-color:#666;background-image:linear-gradient(45deg,#444 25%,#0000 25%),linear-gradient(-45deg,#444 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#444 75%),linear-gradient(-45deg,#0000 75%,#444 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;max-width:min(85vw,800px);max-height:70vh}.tool-picker{display:flex;gap:8px}.tool-picker button{border:2px solid var(--color-ink);cursor:pointer;color:var(--color-cream);background:0 0;border-radius:6px;padding:6px 12px;font-family:sans-serif;font-size:14px;font-weight:700}.tool-picker button[aria-pressed=true]{background:var(--color-cyan);color:var(--color-ink)}.tool-picker button:disabled{opacity:.4;cursor:not-allowed}.slider-control{display:flex;color:var(--color-cream);align-items: center;gap:8px;font-family:sans-serif;font-size:13px}.slider-control[hidden]{display:none}.slider-control label{box-shadow:none;cursor:default;font-size:inherit;color:inherit;text-shadow:none;background:0 0;border:none;padding:0;transition:none;font-weight:400}.slider-control label:hover{box-shadow:none;background:0 0;transform:none}.slider-control label:active{box-shadow:none;background:0 0;transform:none}.crop-hint{color:var(--color-cream);opacity:.8;margin:0;font-family:sans-serif;font-size:13px}.preview-actions{display:flex;gap:10px}.preview-actions button{border:3px solid var(--color-ink);cursor:pointer;box-shadow:4px 4px 0 var(--color-ink);color:var(--color-cream);background:var(--color-orange);border-radius:6px;padding:10px 18px;font-family:sans-serif;font-size:16px;font-weight:700}.preview-actions button:active{box-shadow:0 0 0 var(--color-ink);transform:translate(4px,4px)}.preview-actions button:disabled{opacity:.4;cursor:not-allowed;transform:none}.preview-actions #preview-cancel{background:#7a2a2a}.preview-actions #edit-back{background:#4a4f57}.preview-actions #preview-confirm{border:1.5px solid rgba(var(--color-orange-rgb),.6);background:linear-gradient(135deg,var(--color-orange-light),var(--color-orange));color:var(--color-ink);box-shadow:0 10px 28px rgba(var(--color-orange-rgb),.35);animation:pulse-button 2.2s ease-in-out infinite;border-radius:999px;padding:14px 28px;font-size:18px}.preview-actions #preview-confirm:hover{box-shadow:0 14px 36px rgba(var(--color-orange-rgb),.55)}.preview-actions #preview-confirm:active{box-shadow:0 6px 16px rgba(var(--color-orange-rgb),.3);transform:scale(.96)}.preview-actions #preview-confirm:disabled{animation:none}@keyframes pulse-button{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}#preview-confirm.is-loading{color:#0000;position:relative;pointer-events:none}#preview-confirm.is-loading:after{content:"";position:absolute;border:3px solid #11111659;border-top-color:var(--color-ink);animation:spin .6s linear infinite;border-radius:50%;width:18px;height:18px;margin:-9px 0 0 -9px;top:50%;left:50%}@keyframes spin{to{transform:rotate(360deg)}}footer{color:var(--color-cream);position:fixed;text-align:center;border:3px solid var(--color-ink);box-shadow:4px 4px 0 var(--color-ink);background:#1111168c;border-radius:999px;padding:6px 16px;font-family:sans-serif;font-size:13px;font-weight:500;bottom:12px;left:50%;transform:translate(-50%)}footer a{color:var(--color-cyan);text-decoration:underline;text-underline-offset:2px}footer a:hover{color:var(--color-cream)}footer a:focus-visible{outline:2px solid var(--color-cyan);outline-offset:2px;border-radius:2px}@media (prefers-reduced-motion:reduce){#tap-to-play{animation:none}#tap-to-play .spark{animation:none}#tap-to-play:hover{transform:translate(-50%,-50%)}#tap-to-play:active{transform:translate(-50%,-50%)}#tap-to-play:focus-visible{transform:translate(-50%,-50%)}label{transition:none}label:hover{transform:none}label:active{transform:none}.preview-actions #preview-confirm{animation:none}#preview-confirm.is-loading:after{animation-duration:1.2s}}@media (max-width:480px){.site-title{gap:6px;max-width:130px;top:12px;right:12px}.site-logo{width:28px;height:28px}.site-title h1{font-size:12px}.uploader{max-width:200px;top:12px;left:12px}.uploader-card{padding:10px 12px}.tagline{font-size:13px}label{padding:10px 14px;font-size:15px}#tap-to-play{box-sizing:border-box;width:92vw;padding:14px 20px;font-size:2.2em}footer{box-sizing:border-box;width:92vw;padding:5px 12px;font-size:11px;bottom:8px}}@media (orientation:portrait){.site-title{max-width:44vw;top:max(20px,2.5vh)}.uploader{max-width:42vw;top:max(20px,2.5vh)}#tap-to-play{padding:clamp(18px,3vh,26px) clamp(28px,6vw,44px);font-size:clamp(1.6em,5.5vh,2.6em)}footer{padding:8px 18px;font-size:clamp(12px,3vw,14px);bottom:max(16px,3vh)}}.spaceone_1{animation:spaceone 4.2s linear infinite}@keyframes spaceone{0%{filter:saturate(5);transform:translate(1000px,-500px)scale(2)rotate(-90deg)}5%{filter:saturate(2.5);transform:translate(975px,-500px)scale(1.95)rotate(-94.5deg)}10%{filter:saturate(0);transform:translate(900px,-425px)scale(1.9)rotate(-99deg)}15%{filter:saturate(2.5);transform:translate(925px,-450px)scale(1.85)rotate(-103.5deg)}20%{filter:saturate(5);transform:translate(800px,-375px)scale(1.8)rotate(-108deg)}25%{filter:saturate(2.5);transform:translate(825px,-400px)scale(1.75)rotate(-112.5deg)}30%{filter:saturate(0);transform:translate(700px,-325px)scale(1.7)rotate(-117deg)}35%{filter:saturate(2.5);transform:translate(725px,-350px)scale(1.65)rotate(-121.5deg)}40%{filter:saturate(5);transform:translate(600px,-275px)scale(1.6)rotate(-126deg)}45%{filter:saturate(2.5);transform:translate(625px,-300px)scale(1.55)rotate(-130.5deg)}50%{filter:saturate(0);transform:translate(500px,-225px)scale(1.5)rotate(-135deg)}55%{filter:saturate(2.5);transform:translate(525px,-250px)scale(1.45)rotate(-139.5deg)}60%{filter:saturate(5);transform:translate(400px,-175px)scale(1.4)rotate(-144deg)}65%{filter:saturate(2.5);transform:translate(425px,-200px)scale(1.35)rotate(-148.5deg)}70%{filter:saturate(0);transform:translate(300px,-125px)scale(1.3)rotate(-153deg)}75%{filter:saturate(2.5);transform:translate(325px,-150px)scale(1.25)rotate(-157.5deg)}80%{filter:saturate(5);transform:translate(200px,-75px)scale(1.2)rotate(-162deg)}85%{filter:saturate(2.5);transform:translate(225px,-100px)scale(1.15)rotate(-166.5deg)}90%{filter:saturate(0);transform:translate(100px,-25px)scale(1.1)rotate(-171deg)}95%{filter:saturate(2.5);transform:translate(125px,-50px)scale(1.05)rotate(-175.5deg)}to{filter:saturate(5);transform:translate(0)scale(1)rotate(-180deg)}}.dolphins_1{animation:dolphins-one 4s linear infinite}@keyframes dolphins-one{0%{transform:translate(1000px,-300px)rotate(-100deg)}10%{transform:translate(900px,-270px)rotate(-80deg)}20%{transform:translate(800px,-240px)rotate(-120deg)}30%{transform:translate(700px,-210px)rotate(-80deg)}40%{transform:translate(600px,-180px)rotate(-120deg)}50%{transform:translate(500px,-150px)rotate(-80deg)}60%{transform:translate(400px,-120px)rotate(-120deg)}70%{transform:translate(300px,-90px)rotate(-80deg)}80%{transform:translate(200px,-60px)rotate(-120deg)}90%{transform:translate(100px,-30px)rotate(-80deg)}to{transform:translate(0)rotate(-120deg)}}.dolphins_2{animation:dolphins-two 4s linear infinite}@keyframes dolphins-two{0%{transform:translate(1200px,400px)scale(2.5)rotate(-100deg)}10%{transform:translate(960px,360px)scale(2.4)rotate(-50deg)}20%{transform:translate(720px,320px)scale(2.3)rotate(-110deg)}30%{transform:translate(480px,280px)scale(2.2)rotate(-50deg)}40%{transform:translate(240px,240px)scale(2.1)rotate(-110deg)}50%{transform:translateY(200px)scale(2)rotate(-50deg)}60%{transform:translate(-240px,160px)scale(1.9)rotate(-110deg)}70%{transform:translate(-480px,120px)scale(1.8)rotate(-50deg)}80%{transform:translate(-720px,80px)scale(1.7)rotate(-110deg)}90%{transform:translate(-960px,40px)scale(1.6)rotate(-50deg)}to{transform:translate(-1200px)scale(1.5)rotate(-90deg)}}.spacetwo_1{animation:spacetwo-one 4s linear infinite}@keyframes spacetwo-one{0%{transform:translate(-1000px,600px)rotate(40deg)scale(-1.5,1.5)}10%{transform:translate(-800px,480px)rotate(0)scale(-1.5,1.5)}20%{transform:translate(-600px,360px)rotate(40deg)scale(-1.5,1.5)}30%{transform:translate(-400px,240px)rotate(0)scale(-1.5,1.5)}40%{transform:translate(-200px,120px)rotate(40deg)scale(-1.5,1.5)}50%{transform:translate(0)rotate(0)scale(-1.5,1.5)}60%{filter:contrast(300%);transform:translate(-160px,-100px)rotate(-40deg)scale(-1.5,1.5)}70%{filter:contrast(300%);transform:translate(-320px,-200px)rotate(0)scale(-1.5,1.5)}80%{filter:contrast(300%);transform:translate(-480px,-300px)rotate(-40deg)scale(-1.5,1.5)}90%{filter:contrast(300%);transform:translate(-640px,-400px)rotate(0)scale(-1.5,1.5)}to{filter:contrast(300%);transform:translate(-800px,-500px)rotate(-40deg)scale(-1.5,1.5)}}.spacetwo_2{animation:spacetwo-two 4s linear infinite}@keyframes spacetwo-two{0%{transform:translate(1000px,600px)rotate(-40deg)scale(1.5)}10%{transform:translate(800px,480px)rotate(0)scale(1.5)}20%{transform:translate(600px,360px)rotate(-40deg)scale(1.5)}30%{transform:translate(400px,240px)rotate(0)scale(1.5)}40%{transform:translate(200px,120px)rotate(-40deg)scale(1.5)}50%{filter:contrast(300%);transform:translate(0)rotate(0)scale(1.5)}60%{filter:contrast(300%);transform:translate(120px,-140px)rotate(40deg)scale(1.5)}70%{filter:contrast(300%);transform:translate(240px,-280px)rotate(0)scale(1.5)}80%{filter:contrast(300%);transform:translate(360px,-420px)rotate(40deg)scale(1.5)}90%{filter:contrast(300%);transform:translate(480px,-560px)rotate(0)scale(1.5)}to{filter:contrast(300%);transform:translate(600px,-700px)rotate(40deg)scale(1.5)}}.spacetwo_3{animation:spacetwo-three 4s linear infinite}@keyframes spacetwo-three{0%{opacity:0}10%{opacity:0}20%{opacity:0}30%{opacity:0}40%{opacity:0}50%{opacity:1;filter:contrast(300%);transform:translate(0)rotate(-90deg)}60%{opacity:1;filter:contrast(300%);transform:translate(-200px)rotate(-70deg)}70%{opacity:1;filter:contrast(300%);transform:translate(-400px)rotate(-110deg)}80%{opacity:1;filter:contrast(300%);transform:translate(-600px)rotate(-70deg)}90%{opacity:1;filter:contrast(300%);transform:translate(-800px)rotate(-110deg)}to{opacity:1;filter:contrast(300%);transform:translate(-1000px)rotate(-90deg)}}.spacetwo_4{animation:spacetwo-four 4s linear infinite}@keyframes spacetwo-four{0%{opacity:0}10%{opacity:0}20%{opacity:0}30%{opacity:0}40%{opacity:0}50%{opacity:1;filter:contrast(300%);transform:translate(0)rotate(90deg)scaleX(-1)}60%{opacity:1;filter:contrast(300%);transform:translate(200px)rotate(70deg)scaleX(-1)}70%{opacity:1;filter:contrast(300%);transform:translate(400px)rotate(110deg)scaleX(-1)}80%{opacity:1;filter:contrast(300%);transform:translate(600px)rotate(70deg)scaleX(-1)}90%{opacity:1;filter:contrast(300%);transform:translate(800px)rotate(110deg)scaleX(-1)}to{opacity:1;filter:contrast(300%);transform:translate(1000px)rotate(90deg)scaleX(-1)}}.spacetwo_5{animation:spacetwo-five 4s linear infinite}@keyframes spacetwo-five{0%{opacity:0}10%{opacity:0}20%{opacity:0}30%{opacity:0}40%{opacity:0}50%{opacity:1;filter:contrast(300%);transform:translate(0)rotate(-140deg)}60%{opacity:1;filter:contrast(300%);transform:translate(-60px,120px)rotate(-120deg)}70%{opacity:1;filter:contrast(300%);transform:translate(-120px,240px)rotate(-160deg)}80%{opacity:1;filter:contrast(300%);transform:translate(-180px,360px)rotate(-120deg)}90%{opacity:1;filter:contrast(300%);transform:translate(-240px,480px)rotate(-160deg)}to{opacity:1;filter:contrast(300%);transform:translate(-300px,600px)rotate(-140deg)}}.spacetwo_6{animation:spacetwo-six 4s linear infinite}@keyframes spacetwo-six{0%{opacity:0}10%{opacity:0}20%{opacity:0}30%{opacity:0}40%{opacity:0}50%{opacity:1;filter:contrast(300%);transform:translate(0)rotate(150deg)scaleX(-1)}60%{opacity:1;filter:contrast(300%);transform:translate(240px,120px)rotate(170deg)scaleX(-1)}70%{opacity:1;filter:contrast(300%);transform:translate(480px,240px)rotate(130deg)scaleX(-1)}80%{opacity:1;filter:contrast(300%);transform:translate(720px,360px)rotate(170deg)scaleX(-1)}90%{opacity:1;filter:contrast(300%);transform:translate(960px,480px)rotate(130deg)scaleX(-1)}to{opacity:1;filter:contrast(300%);transform:translate(1200px,600px)rotate(150deg)scaleX(-1)}}.microone_1{animation:microone 3.5s linear infinite}@keyframes microone{0%{transform:translateY(-200px)rotate(90deg)scale(-.5,.5)}15%{transform:translate(-300px,150px)rotate(160deg)scale(-2.5,2.5)}to{transform:translate(-50px)rotate(100deg)scale(-.5,.5)}}.microtwo_1{animation:microtwo 5.5s linear infinite}@keyframes microtwo{0%{transform:translate(-400px,-300px)rotate(100deg)scale(-.5,.5)}15%{transform:translate(-600px,-200px)rotate(90deg)scale(-2.5,2.5)}25%{transform:translate(-400px)rotate(95deg)scale(-4,4)}30%{transform:translate(900px,300px)rotate(100deg)scale(-7,7)}35%{transform:translate(1200px,200px)rotate(90deg)scale(-3,3)}40%{transform:translateY(100px)rotate(90deg)scale(-2,2)}65%{transform:translate(200px,150px)rotate(100deg)scale(-1.7,1.7)}75%{transform:translate(100px,100px)rotate(90deg)scale(-1.5,1.5)}85%{transform:translateY(50px)rotate(90deg)scale(-1.2,1.2)}95%{transform:translate(-50px)rotate(100deg)scale(-.8,.8)}to{transform:translate(0)rotate(100deg)scale(-.6,.6)}}