.tutorial-section{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;padding:0 80px 60px 80px}.tutorial-section-title-wrapper{text-align:center;margin:0 0 60px 0;overflow:hidden}.tutorial-section-title{font-family:inherit;font-size:5vw;font-size:clamp(1.25rem,5vw,3rem);font-weight:600;color:#1a1a2e;margin:0;padding:0;white-space:nowrap;-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);opacity:0;-webkit-transition:transform 0.8s ease-out,opacity 0.6s ease;-ms-transition:transform 0.8s ease-out,opacity 0.6s ease;transition:transform 0.8s ease-out,opacity 0.6s ease}.tutorial-section-title .mobile-br{display:none}.tutorial-section-title-wrapper.visible .tutorial-section-title{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1}.tutorial-section-subtitle{font-family:inherit;font-size:4vw;font-size:clamp(1rem,4vw,1.5rem);font-weight:400;color:#666;margin:8px 0 0 0;padding:0;white-space:nowrap;-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);opacity:0;-webkit-transition:transform 0.8s ease-out 0.1s,opacity 0.6s ease 0.1s;-ms-transition:transform 0.8s ease-out 0.1s,opacity 0.6s ease 0.1s;transition:transform 0.8s ease-out 0.1s,opacity 0.6s ease 0.1s}.tutorial-section-title-wrapper.visible .tutorial-section-subtitle{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1}.tutorial-block{display:grid;grid-template-columns:0.9fr 1.1fr;gap:0;align-items:stretch;margin-bottom:80px}.tutorial-block:last-child{margin-bottom:0}.tutorial-block .tutorial-explanation-box{order:1}.tutorial-block .tutorial-image-box{order:2}.tutorial-block.reversed{grid-template-columns:1.1fr 0.9fr}.tutorial-block.reversed .tutorial-image-box{order:1;margin-left:0;margin-right:-32px}.tutorial-block.reversed .tutorial-explanation-box{order:2;border-radius:0 32px 32px 0}.tutorial-block.reversed .tutorial-explanation-content{margin-left:50px;margin-right:40px}.tutorial-inner-box{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.tutorial-explanation-box{position:relative;z-index:1;padding:48px;border-radius:32px 0 0 32px;background:linear-gradient(135deg,rgba(255,255,255,0.4) 0%,rgba(255,255,255,0.1) 50%,rgba(255,255,255,0.3) 100%);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(255,255,255,0.5);display:flex;align-items:center}.tutorial-explanation-box::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,0.3) 0%,transparent 50%,rgba(255,255,255,0.1) 100%);pointer-events:none}.tutorial-explanation-box .tutorial-inner-box{background:transparent}.tutorial-explanation-content{position:relative;max-width:50ch;margin-left:40px;text-align:left}.tutorial-explanation-content .tutorial-inner-box{background:transparent}.tutorial-explanation-title{font-size:2.45rem;font-weight:500;color:#1a1a2e;line-height:1.2;margin-bottom:16px;letter-spacing:-0.02em}.tutorial-explanation-subtitle{font-size:1.05rem;font-weight:400;color:#4a4a68;line-height:1.6;margin-bottom:32px}.tutorial-button-container{position:relative}.tutorial-button-container .tutorial-inner-box{background:transparent}.tutorial-explanation-button{display:inline-flex;align-items:center;padding:12px 24px;background:linear-gradient(45deg,#E1306C 0%,#C13584 25%,#833AB4 50%,#5851DB 75%,#405DE6 100%);color:#fff;text-decoration:none;font-size:1.05rem;font-weight:500;border-radius:50px;border:none;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:0 4px 16px rgba(225,48,108,0.35)}.tutorial-explanation-button:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(225,48,108,0.45);filter:brightness(1.05)}.tutorial-explanation-button:active{transform:translateY(0)}.tutorial-image-box{position:relative;z-index:2;border-radius:32px;overflow:hidden;margin-left:-32px;display:flex;min-height:600px}.tutorial-image-box .tutorial-inner-box{background:linear-gradient(135deg,rgba(233,232,248,0.6) 0%,rgba(255,255,255,0.6) 100%);border:1px solid rgba(255,255,255,0.4)}.tutorial-image{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 50%}.tutorial-prompt-box-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) translateY(60px);max-width:80%;width:70%;opacity:0;transition:transform 0.8s cubic-bezier(0.16,1,0.3,1),opacity 0.6s ease-out;z-index:3;filter:drop-shadow(0 20px 40px rgba(0,0,0,0.15))}.tutorial-prompt-box-overlay.visible{transform:translate(-50%,-50%) translateY(0);opacity:1}.tutorial-prompt-box-overlay img{width:100%;height:auto;display:block}.tutorial-social-logos{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;gap:20px;z-index:5}.tutorial-social-logo{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px rgba(0,0,0,0.2);transition:transform 0.3s ease}.tutorial-social-logo:hover{transform:scale(1.1)}.tutorial-social-logo svg{width:32px;height:32px}.tutorial-social-logo.facebook{background:#1877F2;color:white}.tutorial-social-logo.instagram{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);color:white}.tutorial-social-logo.tiktok{background:#000000;color:white}.tutorial-posts-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;z-index:4;gap:0}.tutorial-post{width:160px;opacity:0;transform:translateY(200px) scale(0.3);transition:all 0.8s cubic-bezier(0.34,1.56,0.64,1);margin-left:-30px;filter:drop-shadow(0 10px 30px rgba(0,0,0,0.25))}.tutorial-post:first-child{margin-left:0}.tutorial-post.visible{opacity:1;transform:translateY(0) scale(1)}.tutorial-post[data-index="0"]{z-index:1;transition-delay:0s}.tutorial-post[data-index="1"]{z-index:2;transition-delay:0.1s}.tutorial-post[data-index="2"]{z-index:3;transition-delay:0.2s}.tutorial-post[data-index="3"]{z-index:4;transition-delay:0.3s}.tutorial-post[data-index="4"]{z-index:5;transition-delay:0.4s}.tutorial-post-inner{background:white;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.1)}.tutorial-post-header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #f0f0f0;direction:ltr}.tutorial-post-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover}.tutorial-post-username{font-size:11px;font-weight:600;color:#262626}.tutorial-post-image{width:100%;aspect-ratio:1;background:#f0f0f0;overflow:hidden}.tutorial-post-image img{width:100%;height:100%;object-fit:cover}.tutorial-post-actions{display:flex;align-items:center;gap:6px;padding:10px 12px;direction:ltr}.tutorial-post-heart{display:inline-block;width:14px;height:14px;position:relative}.tutorial-post-heart::before,.tutorial-post-heart::after{content:'';position:absolute;top:0;width:7px;height:12px;background:#ed4956;border-radius:7px 7px 0 0}.tutorial-post-heart::before{left:7px;transform:rotate(-45deg);transform-origin:0 100%}.tutorial-post-heart::after{left:0;transform:rotate(45deg);transform-origin:100% 100%}.tutorial-post-likes{font-size:11px;font-weight:600;color:#262626}@media (max-width:968px){.tutorial-section{padding:0 20px 40px 20px}.tutorial-section-title{font-size:2rem;white-space:normal}.tutorial-section-title .mobile-br{display:block}.tutorial-section-subtitle{white-space:normal}.tutorial-block,.tutorial-block.reversed{grid-template-columns:1fr;margin-bottom:60px}.tutorial-block .tutorial-explanation-box,.tutorial-block.reversed .tutorial-explanation-box{order:2!important;border-radius:32px!important;padding:72px 32px 32px 32px}.tutorial-explanation-content,.tutorial-block.reversed .tutorial-explanation-content{margin-left:0!important;margin-right:0!important}.tutorial-block .tutorial-image-box,.tutorial-block.reversed .tutorial-image-box{order:1!important;margin-left:0!important;margin-right:0!important;margin-bottom:-40px;min-height:400px}.tutorial-post{width:70px;margin-left:-15px}.tutorial-post-inner{border-radius:8px}.tutorial-post-header{padding:4px 6px;gap:4px}.tutorial-post-avatar{width:12px;height:12px}.tutorial-post-username{font-size:6px}.tutorial-post-actions{padding:4px 6px;gap:3px}.tutorial-post-heart{width:8px;height:8px}.tutorial-post-heart::before,.tutorial-post-heart::after{width:4px;height:7px;border-radius:4px 4px 0 0}.tutorial-post-heart::before{left:4px}.tutorial-post-likes{font-size:6px}.tutorial-social-logos{bottom:20px;gap:12px}.tutorial-social-logo{width:40px;height:40px;border-radius:10px}.tutorial-social-logo svg{width:22px;height:22px}.tutorial-explanation-title{font-size:1.5rem}.tutorial-explanation-subtitle{font-size:1rem}.tutorial-explanation-button{font-size:1rem}}@media (max-width:480px){.tutorial-section{padding:0 16px 30px 16px}.tutorial-block .tutorial-explanation-box{padding:64px 24px 24px 24px}.tutorial-explanation-title{font-size:1.35rem}.tutorial-explanation-subtitle{font-size:0.95rem}.tutorial-explanation-button{font-size:0.95rem;padding:10px 20px}.tutorial-block{margin-bottom:40px}.tutorial-block .tutorial-image-box,.tutorial-block.reversed .tutorial-image-box{min-height:300px}}.tutorial-section[dir="rtl"] .tutorial-explanation-content{text-align:right}.tutorial-section[dir="rtl"] .tutorial-block .tutorial-explanation-box{border-radius:0 32px 32px 0}.tutorial-section[dir="rtl"] .tutorial-block .tutorial-image-box{margin-left:0;margin-right:-32px}.tutorial-section[dir="rtl"] .tutorial-block.reversed .tutorial-explanation-box{border-radius:32px 0 0 32px}.tutorial-section[dir="rtl"] .tutorial-block.reversed .tutorial-image-box{margin-right:0;margin-left:-32px}.tutorial-section[dir="rtl"] .tutorial-explanation-content{margin-left:40px;margin-right:0}.tutorial-section[dir="rtl"] .tutorial-block.reversed .tutorial-explanation-content{margin-right:50px;margin-left:40px}@media (max-width:968px){.tutorial-section[dir="rtl"] .tutorial-explanation-content,.tutorial-section[dir="rtl"] .tutorial-block.reversed .tutorial-explanation-content{margin-left:0;margin-right:0;text-align:right}.tutorial-section[dir="rtl"] .tutorial-block .tutorial-image-box,.tutorial-section[dir="rtl"] .tutorial-block.reversed .tutorial-image-box{margin-left:0;margin-right:0}.tutorial-section[dir="rtl"] .tutorial-block .tutorial-explanation-box,.tutorial-section[dir="rtl"] .tutorial-block.reversed .tutorial-explanation-box{border-radius:32px}}