*{box-sizing:border-box;margin:0;padding:0;outline:0;font-family:Roboto}body{max-inline-size:1080px;min-block-size:100dvh;margin-inline:auto;background:#ecfaff;position:relative;display:block;padding:1px}img{max-width:100%;object-fit:cover}button{background:#d1f4ff;padding:10px 15px;border-radius:6px;color:#119dc7;border:1px solid rgb(17,157,199);margin-inline:15px}button:hover,button:focus{background:#9be8ff;cursor:pointer}.tools{padding:35px;margin:20px;border-radius:25px;background:#f9feff}.tools .heading{font-size:2rem;font-weight:700;margin-bottom:20px}.options{display:flex;flex-wrap:wrap;justify-content:space-around;margin-block:35px}.option{background:#d1f4ff;cursor:pointer;position:relative;border-radius:12px}.option .wrapper{padding:15px;position:relative;border-radius:12px;color:#119dc7;border-radius:inherit;background:inherit;display:flex;gap:15px;z-index:2}.options input{width:20px;appearance:none;position:relative}.options input:before{content:"";width:10px;height:10px;border:1px solid rgb(17,157,199);border-radius:50%;position:absolute;top:4px}.option:has(input:checked){font-weight:700;border:1px solid rgb(17,157,199)}.options input:checked:before{background:#119dc7}.option.animated-option{animation-name:jump;animation-duration:.2s;animation-timing-function:ease-in-out;animation-direction:alternate;animation-iteration-count:2}.option:before{content:"";position:absolute;width:10px;height:10px;background:#0f96be;border-radius:50%;z-index:1;top:50%;left:50%;transform:translate(-5px,-5px)}.option.animated-option:before{animation:scaleDown 2s linear 10ms 1 forwards}@keyframes jump{to{transform:translateY(-40px)}}@keyframes scaleDown{0%{opacity:1;box-shadow:0 0 #0f96be,0 0 #0f96be,0 0 #0f96be,0 0 #0f96be,0 0 #0f96be,0 0 #0f96be,0 0 #0f96be,0 0 #0f96be,0 0 #0f96be,0 0 #0f96be}to{opacity:0;box-shadow:40px 30px #0f96be,-35px -50px #0f96be,35px 42px #0f96be,55px -44px #0f96be,-65px 56px #0f96be,77px -59px #0f96be,40px -80px #0f96be,76px 61px #0f96be,50px -50px #0f96be,45px 55px #0f96be}}.upload-area{min-height:300px;display:flex;align-items:center;justify-content:center;padding:25px;gap:25px;border:4px dashed rgb(17,157,199);border-radius:20px;flex-wrap:wrap;position:relative}.upload-area p{font-size:3rem}.file-selection{margin-block:20px}.upload-area .box-wrapper{flex:1;min-width:150px;max-width:300px;cursor:move}.upload-box{padding:5px;border-radius:4px;transition:scale .3s;background:#fff}.upload-box:hover>img{opacity:1}.upload-box span{display:inline-block;margin:5px}.upload-box img{border-radius:4px;opacity:.6}.upload-box.moving{background:#fff;box-shadow:0 0 10px 3px #ccc;scale:1.05;position:absolute;pointer-events:none}.upload-box.moving img{opacity:1}.show{height:600px;position:relative;margin-block:20px;background:#fff;border-radius:12px}.show:has(>:not(.tc)){overflow:hidden}.name{position:absolute;bottom:0;left:0;padding:10px;background:#fff;border-top-right-radius:4px}.ta{position:absolute;width:100%;height:100%;top:0;left:0;display:flex;transition:.3s}.ta .slide{position:relative;display:flex;flex:1}.ta img{position:absolute;display:block;width:100%;height:100%;inset:0}.ta:not(.tb) .name{transform:translate(0);opacity:1;transition:opacity 10ms,transform .4s;transition-delay:.5s}@starting-style{.ta:not(.tb) .name{opacity:0;transform:translate(-100%)}}.tb{flex-direction:column;width:100%}.tb .slide{width:100%}.tb .name span{display:inline-block;margin-inline:4px;transform:translateY(0);transition:.3s}@starting-style{.tb .name span{transform:translateY(200px)}}.tc,.td,.te{position:relative;width:100%;height:100%}.tc .slide{position:absolute;width:80%;margin-left:10%;transition:.5s}.tc .name{padding:5px;bottom:10px}.tc img{border-radius:5px;border:8px solid #fff;border-bottom-width:35px;box-shadow:0 0 20px 8px #ccc}.show:has(.tc){background:transparent;margin-block:50px}.win{position:absolute;width:100%;height:100%;top:0;left:0;display:flex}.side{width:50%;position:relative;transition:.3s;perspective:1000px;transform-style:preserve-3d}.side img{position:absolute;max-width:200%;width:200%;height:100%}.side:first-child{transform-origin:left}.side:first-child img{left:0}.side:last-child{transform-origin:right}.side:last-child img{right:0}.win.open .side{transform:rotateY(90deg)}.te img{position:absolute;display:block;width:100%;height:100%;inset:0}main{position:relative}dialog{border:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(1);padding:45px;border-radius:15px;box-shadow:0 0 30px 5px #6d6d6d;transition:transform .6s}@starting-style{dialog{transform:translate(-50%,-50%) scale(0)}}dialog .heading{font-size:2rem;font-weight:700;margin-block:25px}dialog .danger{border-color:#eb3e3e;color:#eb3e3e;background:#ffc3c3;margin-top:45px}button.danger:focus,button.danger:hover{background:#ffa1a1}.notes{background:#d1f4ff;padding:35px;border-radius:12px;color:#119dc7;border:1px solid rgb(17,157,199);line-height:2;margin:25px}