/* /how-to-make-labels-online: How it works scene. */
.hub-anim.ha-how-to-make-labels-online .ha-stage { min-height: 0; }
.hub-anim.ha-how-to-make-labels-online .sc-arrow { color: #0f0f12; flex: 0 0 auto; } .hub-anim.ha-how-to-make-labels-online .sc-arrow svg { width: 64px; height: 32px; display: block; }
.hub-anim.ha-how-to-make-labels-online .sc { display: flex; align-items: center; justify-content: center; gap: 1.6rem; min-height: 250px; }
.hub-anim.ha-how-to-make-labels-online .sc-tag { display: inline-block; margin: 0; padding: 0.4rem 0.72rem; border-radius: 999px; font: 800 0.8rem/1 Manrope, Inter, sans-serif; white-space: nowrap; box-shadow: 3px 3px 0 #0f0f12; }
@media (max-width: 640px) { .hub-anim.ha-how-to-make-labels-online .sc { flex-direction: column; gap: 0.9rem; } .hub-anim.ha-how-to-make-labels-online .sc-arrow { transform: rotate(90deg); } .hub-anim.ha-how-to-make-labels-online .ha-stage { padding-bottom: 3.4rem; } }
.hub-anim.ha-how-to-make-labels-online .ha-stage { border: 1px solid #f5c2d8; background: radial-gradient(circle at 86% 18%, rgba(255,255,255,.6) 0 80px, transparent 81px), linear-gradient(180deg, #fdeef5, #fbdfeb); }
.hub-anim.ha-how-to-make-labels-online .mo-steps { display: flex; flex-direction: column; gap: .6rem; flex: 0 0 auto; }
.hub-anim.ha-how-to-make-labels-online .mo-s { display: flex; align-items: center; gap: .6rem; margin: 0; font: 800 .95rem/1 Manrope, Inter, sans-serif; color: #831843; } .hub-anim.ha-how-to-make-labels-online .mo-s b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 99px; background: #db2777; color: #fff; border: 2px solid #0f0f12; font-size: .86rem; box-sizing: border-box; }
.hub-anim.ha-how-to-make-labels-online .mo-lab { position: relative; width: 320px; height: 190px; padding: 1.1rem 1.2rem; background: #fff; border: 2.5px solid #0f0f12; border-radius: 12px; box-shadow: 5px 6px 0 #0f0f12; box-sizing: border-box; flex: 0 1 auto; }
.hub-anim.ha-how-to-make-labels-online .mo-name { display: block; font: 800 1.5rem/1.1 Manrope, Inter, sans-serif; color: #0f0f12; } .hub-anim.ha-how-to-make-labels-online .mo-line { display: block; margin: 8px 0 14px; font: 600 .9rem/1 Inter, system-ui, sans-serif; color: #52525b; } .hub-anim.ha-how-to-make-labels-online .mo-bars { display: block; height: 62px; background: repeating-linear-gradient(90deg, #0f0f12 0 3px, transparent 3px 5px, #0f0f12 5px 6px, transparent 6px 10px, #0f0f12 10px 14px, transparent 14px 16px); }
.hub-anim.ha-how-to-make-labels-online .mo-ok { position: absolute; right: -12px; bottom: -13px; background: #15803d; color: #fff; transform: rotate(3deg); }
@media (max-width: 640px) { .hub-anim.ha-how-to-make-labels-online .mo-steps { flex-direction: row; flex-wrap: wrap; justify-content: center; } .hub-anim.ha-how-to-make-labels-online .mo-lab { width: 100%; max-width: 235px; height: 170px; padding: .9rem; } .hub-anim.ha-how-to-make-labels-online .mo-name { font-size: 1.2rem; } .hub-anim.ha-how-to-make-labels-online .mo-line { font-size: .74rem; } .hub-anim.ha-how-to-make-labels-online .mo-ok { right: -4px; } }
@media (prefers-reduced-motion: no-preference) {
 .hub-anim.ha-how-to-make-labels-online .mo-lab { animation: mo-lab 10s ease infinite both; } .hub-anim.ha-how-to-make-labels-online .mo-name { animation: mo-n 10s steps(9, end) infinite both; } .hub-anim.ha-how-to-make-labels-online .mo-line { animation: mo-l 10s ease infinite both; } .hub-anim.ha-how-to-make-labels-online .mo-bars { animation: mo-b 10s ease infinite both; } .hub-anim.ha-how-to-make-labels-online .mo-ok { animation: mo-ok 10s ease infinite both; }
 .hub-anim.ha-how-to-make-labels-online .mo-s1 b { animation: mo-1 10s ease infinite both; } .hub-anim.ha-how-to-make-labels-online .mo-s2 b { animation: mo-2 10s ease infinite both; } .hub-anim.ha-how-to-make-labels-online .mo-s3 b { animation: mo-3 10s ease infinite both; } .hub-anim.ha-how-to-make-labels-online .mo-s4 b { animation: mo-4 10s ease infinite both; }
 @keyframes mo-lab { 0%, 2% { transform: scale(.82); opacity: 0; } 10%, 94% { transform: none; opacity: 1; } 99%, 100% { opacity: 0; } }
 @keyframes mo-n { 0%, 14% { clip-path: inset(0 100% 0 0); } 30%, 100% { clip-path: inset(0 0 0 0); } }
 @keyframes mo-l { 0%, 32% { opacity: 0; } 38%, 100% { opacity: 1; } }
 @keyframes mo-b { 0%, 44% { opacity: 0; transform: translateY(8px); } 54%, 100% { opacity: 1; transform: none; } }
 @keyframes mo-ok { 0%, 66% { opacity: 0; transform: rotate(3deg) scale(.7); } 72%, 94% { opacity: 1; transform: rotate(3deg); } 99%, 100% { opacity: 0; } }
 @keyframes mo-1 { 0%, 2% { background: #fff; color: #0f0f12; } 8%, 96% { background: #db2777; color: #fff; } 100% { background: #fff; color: #0f0f12; } }
 @keyframes mo-2 { 0%, 14% { background: #fff; color: #0f0f12; } 20%, 96% { background: #db2777; color: #fff; } 100% { background: #fff; color: #0f0f12; } }
 @keyframes mo-3 { 0%, 44% { background: #fff; color: #0f0f12; } 50%, 96% { background: #db2777; color: #fff; } 100% { background: #fff; color: #0f0f12; } }
 @keyframes mo-4 { 0%, 64% { background: #fff; color: #0f0f12; } 70%, 96% { background: #db2777; color: #fff; } 100% { background: #fff; color: #0f0f12; } }
}